/* ==========================================================================
   Avuru Finance — landing « Votre argent grandit ».
   Thème CLAIR majoritaire + sections de rupture SOMBRES (.dark).
   Aération façon Brex. Police Inter auto-hébergée. Accent bronze.
   Partagé par index.html (FR) et en.html (EN).
   ========================================================================== */

/* ── Inter auto-hébergée (variable 100–900, aucune police externe) ─────── */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-normal-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Tokens : CLAIR par défaut, réoverride en .dark ────────────────────── */
:root{
  --bg:#FFFFFF;
  --bg-soft:#F6F7F9;
  --tint-soft:rgba(11,18,32,.033); /* ≈ --bg-soft composé sur blanc, mais translucide (laisse voir la couche ambient) */
  --panel:#FFFFFF;
  --panel-2:#FFFFFF;
  --line:rgba(10,15,28,.10);
  --line-strong:rgba(10,15,28,.16);
  --text:#0A0F1C;
  --muted:#54617A;
  --faint:#8A96AC;
  --bronze:#CFA76D;          /* aplats / boutons */
  --accent:#8F6C31;          /* accent TEXTE sur clair (contraste AA) */
  --bronze-soft:rgba(143,108,49,.10);
  --green:#2E9E77;
  --green-soft:rgba(46,158,119,.12);
  --red:#C6553F;
  --card-shadow:0 24px 60px rgba(10,15,28,.07),0 2px 6px rgba(10,15,28,.04);
  --radius:16px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --wrap-w:1360px;
  /* Distance bord viewport → bord du CONTENU du .wrap (pour les bleeds) */
  --edge:max(var(--gutter),calc((100vw - var(--wrap-w))/2 + var(--gutter)));
  --font-inter:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:var(--font-inter);
  --font-body:var(--font-inter);
  --font-mono:var(--font-inter);
  --ease:cubic-bezier(.22,1,.36,1);
}
/* Rupture sombre : ré-override des MÊMES tokens → composants adaptés */
.dark{
  --bg:#050B17;
  --bg-soft:#070F1F;
  --panel:#0C1426;
  --panel-2:#0D1B30;
  --line:rgba(233,237,244,.09);
  --line-strong:rgba(233,237,244,.16);
  --text:#EDF0F6;
  --muted:#94A1B5;
  --faint:#6B7890;
  --bronze:#CFA76D;
  --accent:#CFA76D;
  --bronze-soft:rgba(207,167,109,.12);
  --green:#4CC29A;
  --red:#E0806F;
  --card-shadow:0 40px 100px rgba(0,0,0,.5);
  background:var(--bg);
  color:var(--text);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap-w);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:860px}
.tnum{font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:.98rem;padding:15px 30px;border-radius:12px;border:1px solid transparent;cursor:pointer;font-family:var(--font-body);transition:transform .15s,background .15s,box-shadow .2s,border-color .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--bronze);color:#1A1206;box-shadow:0 8px 30px rgba(207,167,109,.30)}
.btn-primary:hover{background:#DDB77E;box-shadow:0 12px 42px rgba(207,167,109,.4);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:11px 22px;font-size:.88rem}

/* ---------- Nav (clair, sticky) ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
header.scrolled{box-shadow:0 6px 24px rgba(10,15,28,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;position:relative}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.32rem;letter-spacing:-.025em;color:var(--text)}
.logo span{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:32px;font-size:.92rem;color:var(--muted);font-weight:600}
.nav-links>a{color:var(--muted)}
.nav-links>a:hover{color:var(--text)}

.has-menu{position:relative}
.nav-trigger{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-family:var(--font-body);font-weight:600;font-size:.92rem;cursor:pointer;padding:0}
.nav-trigger:hover{color:var(--text)}
.nav-trigger svg{width:12px;height:12px;transition:transform .2s var(--ease)}
.has-menu:hover .nav-trigger svg,.has-menu:focus-within .nav-trigger svg{transform:rotate(180deg)}
.submenu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(6px);min-width:260px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease);box-shadow:var(--card-shadow);z-index:60}
.submenu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.has-menu:hover .submenu,.has-menu:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu a{display:flex;flex-direction:column;padding:11px 13px;border-radius:9px;font-size:.88rem;color:var(--text);font-weight:600}
.submenu a small{font-weight:400;color:var(--muted);font-size:.76rem;margin-top:2px}
.submenu a:hover{background:var(--bg-soft)}

.lang-switch{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em}
.lang-switch a{color:var(--faint)}
.lang-switch a:hover{color:var(--text)}
.lang-switch a.active{color:var(--accent);font-weight:700}
.lang-switch .sep{color:var(--line-strong)}

.nav-cta{display:flex;align-items:center;gap:20px}
.login-link{font-size:.9rem;color:var(--muted);font-weight:600}
.login-link:hover{color:var(--text)}

.hamburger{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;border:1px solid var(--line-strong);background:none;color:var(--text);cursor:pointer}
.hamburger svg{width:20px;height:20px}
.hamburger .x{display:none}
header.menu-open .hamburger .bars{display:none}
header.menu-open .hamburger .x{display:block}
.mobile-menu{overflow:hidden;max-height:0;transition:max-height .3s ease-out;border-top:1px solid transparent;background:rgba(255,255,255,.98)}
header.menu-open .mobile-menu{max-height:calc(100dvh - 76px);overflow-y:auto;border-top-color:var(--line)}
.mobile-menu .inner{display:flex;flex-direction:column;padding:14px 0 24px}
.mobile-menu a{padding:13px 6px;font-size:.98rem;color:var(--muted);font-weight:600}
.mobile-menu a:hover{color:var(--text)}
.mobile-menu .mm-head{padding:18px 6px 6px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.mobile-menu .mm-cta{padding:16px 6px 0}
.mobile-menu .mm-cta .btn{width:100%}

@media(max-width:960px){
  .nav-links,.login-link,.nav-cta .lang-switch{display:none}
  .hamburger{display:inline-flex}
}
@media(min-width:961px){.mobile-menu{display:none}}

/* ---------- Sections & typo ---------- */
.section,.feature,.ai,.pricing,.security,.manifesto-sec,.community,.regret{padding:clamp(5.5rem,11vw,11rem) 0}
.manifesto-sec{background:var(--bg-soft)}
.ai{background:var(--tint-soft)}
.soft{background:var(--bg-soft)}
h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.8rem,6.4vw,5.2rem);line-height:1.02;letter-spacing:-.045em;color:var(--text)}
h2{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.08;letter-spacing:-.035em;color:var(--text)}
h2 em{font-style:normal;color:var(--accent)}
.sec-head{text-align:center;max-width:64ch;margin:0 auto clamp(3rem,6vw,5rem)}
.sec-head p{color:var(--muted);margin-top:1rem;font-size:1.1rem}

/* ---------- Hero (style Brex : 2 colonnes, blanc pur + dégradé doux) ---- */
.hero{position:relative;overflow:hidden;background:transparent;padding:clamp(3rem,5vw,5.5rem) 0 clamp(4rem,8vw,7rem)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(48% 44% at 92% 20%,rgba(207,167,109,.14),transparent 72%),radial-gradient(42% 52% at 2% 98%,rgba(110,130,190,.06),transparent 70%),linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(246,247,249,.6) 100%)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,7vw,3.5rem);align-items:center}
.hero-left{text-align:left}
.hero h1{font-size:clamp(2.5rem,5.1vw,4.6rem);line-height:1.03;letter-spacing:-.045em}
h1 .brand{display:block;color:var(--muted);font-size:.4em;font-weight:700;letter-spacing:-.02em;margin-bottom:.4em}
h1 .grow{color:var(--accent)}
.hero-sub{color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.22rem);max-width:46ch;margin:26px 0 32px;line-height:1.6}
.hero-sub b{color:var(--text);font-weight:600}
.hero-form{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-strong);border-radius:14px;padding:6px 6px 6px 18px;max-width:440px;box-shadow:0 8px 26px rgba(10,15,28,.07)}
.hero-form input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;font-size:.98rem;color:var(--text)}
.hero-form input::placeholder{color:var(--faint)}
.hero-form .btn{flex:none;white-space:nowrap}
.hero-reassure{font-size:.82rem;color:var(--faint);margin-top:14px}
.hero-play{display:inline-flex;align-items:center;gap:10px;margin-top:28px;color:var(--accent);font-weight:700;font-size:.94rem}
.hero-play svg{width:26px;height:26px;flex:none}
.hero-play:hover{text-decoration:underline;text-underline-offset:4px}
.hero-right{position:relative}
@media(min-width:961px){
  .hero-grid{grid-template-columns:1fr 1.12fr}
  .hero-right{overflow:visible}
  .hero-right .dash{width:100%;max-width:none;margin:0;margin-right:calc(-1*var(--edge));border-radius:22px 0 0 22px;transform:perspective(2000px) rotateY(-6deg) rotateX(1.5deg);transform-origin:left center}
}
@media(max-width:960px){
  .hero-right{display:flex;justify-content:center}
  .hero-form{max-width:none}
}
@media(max-width:480px){
  .hero-form{flex-wrap:wrap;padding:6px}
  .hero-form input{flex:1 1 100%;padding:10px 12px}
  .hero-form .btn{flex:1 1 100%}
}

/* ---------- Dashboard mockup (screenshot SOMBRE, couleurs en dur) ------- */
.dash{position:relative;z-index:2;max-width:1060px;margin:0 auto;background:linear-gradient(180deg,#0D1B30,#0A1424);border:1px solid rgba(233,237,244,.14);border-radius:22px;box-shadow:0 60px 140px rgba(10,15,28,.28),0 8px 30px rgba(10,15,28,.12);overflow:hidden;text-align:left;color:#EDF0F6}
.dash-top{display:flex;align-items:center;gap:8px;padding:15px 22px;border-bottom:1px solid rgba(233,237,244,.08)}
.dash-top i{width:10px;height:10px;border-radius:50%;background:rgba(233,237,244,.14)}
.dash-top .url{margin-left:12px;font-family:var(--font-mono);font-size:.72rem;color:#5C6A80}
.dash-body{display:grid;grid-template-columns:210px 1fr 270px;min-height:400px}
.dash-side{border-right:1px solid rgba(233,237,244,.08);padding:22px 0}
.side-item{display:flex;align-items:center;gap:10px;padding:10px 24px;font-size:.85rem;color:#94A1B5}
.side-item.active{color:#EDF0F6;background:rgba(207,167,109,.08);border-right:2px solid #CFA76D}
.side-item .ic{font-family:var(--font-mono);font-size:.7rem;color:#CFA76D;width:16px}
.dash-main{padding:30px 32px}
.dm-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#5C6A80}
.dm-value{font-family:var(--font-mono);font-weight:700;font-size:2.3rem;letter-spacing:-.02em;margin:9px 0 3px;font-variant-numeric:tabular-nums;color:#fff}
.dm-delta{font-family:var(--font-mono);font-size:.78rem;color:#4CC29A;font-variant-numeric:tabular-nums}
.chart{margin-top:26px}
.chart svg{width:100%;height:auto;display:block}
.chart .area{fill:url(#grad)}
.chart .stroke{fill:none;stroke:#CFA76D;stroke-width:2;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2.2s ease-out .4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.chart-meta{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.66rem;color:#5C6A80;margin-top:8px}
.dash-right{border-left:1px solid rgba(233,237,244,.08);padding:26px 22px;display:flex;flex-direction:column;gap:14px}
.dr-title{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;color:#5C6A80;text-transform:uppercase}
.dr-q{background:rgba(207,167,109,.12);border:1px solid rgba(207,167,109,.25);border-radius:10px 10px 3px 10px;padding:11px 14px;font-size:.8rem;margin-left:18px}
.dr-a{background:rgba(233,237,244,.04);border:1px solid rgba(233,237,244,.08);border-radius:10px 10px 10px 3px;padding:12px 14px;margin-right:18px}
.dr-a .b{font-family:var(--font-mono);font-weight:700;font-size:1rem;display:block;margin-bottom:3px}
.dr-a .d{font-size:.75rem;color:#94A1B5}
.dr-a .d em{color:#4CC29A;font-style:normal}
.dr-goal{margin-top:auto;padding-top:14px;border-top:1px solid rgba(233,237,244,.08)}
.dr-goal .g-head{display:flex;justify-content:space-between;font-size:.75rem;margin-bottom:8px}
.dr-goal .g-head .when{font-family:var(--font-mono);font-size:.64rem;color:#CFA76D}
.dr-goal .g-bar{height:5px;border-radius:3px;background:rgba(233,237,244,.09);overflow:hidden}
.dr-goal .g-bar i{display:block;height:100%;width:62%;background:linear-gradient(90deg,#4CC29A,#CFA76D)}
@media(max-width:900px){
  .dash-body{grid-template-columns:1fr}
  .dash-side{display:none}
  .dash-right{border-left:none;border-top:1px solid rgba(233,237,244,.08)}
}

/* ---------- Proof strip ---------- */
.proof{background:var(--tint-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.proof-item{padding:44px 30px;border-left:1px solid var(--line);text-align:left}
.proof-item:first-child{border-left:none}
.proof-item .v{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:var(--text)}
.proof-item .l{font-size:.83rem;color:var(--muted);margin-top:8px;line-height:1.55}
@media(max-width:840px){
  .proof-grid{grid-template-columns:1fr 1fr}
  .proof-item{border-top:1px solid var(--line);min-width:0}
  .proof-item:nth-child(-n+2){border-top:none}
  .proof-item:nth-child(odd){border-left:none}
}
@media(max-width:480px){
  .proof-item{padding:32px 18px}
  .proof-item .v{font-size:1.22rem}
}

/* ---------- Feature sections ---------- */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,7vw,7rem);align-items:center}
.feat-grid.flip .feat-copy{order:2}
.feat-grid.flip .feat-visual{order:1}
.feat-copy p{color:var(--muted);font-size:1.08rem;margin-top:1rem}
.feat-copy p b{color:var(--text)}
.feat-points{margin-top:28px;display:flex;flex-direction:column;gap:14px}
.fp{display:flex;gap:12px;font-size:.95rem;color:var(--muted)}
.fp::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--bronze);margin-top:.5em}
.fp b{color:var(--text)}
.feat-link{display:inline-flex;align-items:center;gap:8px;margin-top:30px;font-weight:700;font-size:.94rem;color:var(--accent);transition:gap .15s}
.feat-link:hover{gap:12px}

/* Panneau visuel « illustratif » (dégradé abstrait) + carte data flottante */
.feat-visual{position:relative;border-radius:28px;padding:clamp(1.6rem,4vw,3rem);background:radial-gradient(120% 120% at 15% 0%,var(--bronze-soft),transparent 55%),var(--bg-soft);border:1px solid var(--line);overflow:hidden}
.feat-visual::after{content:"";position:absolute;width:280px;height:280px;right:-90px;bottom:-90px;border-radius:50%;background:radial-gradient(circle,rgba(207,167,109,.18),transparent 70%);pointer-events:none}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--card-shadow)}
.row-line{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.row-line:last-child{border-bottom:none}
.row-line .sub{display:block;font-size:.73rem;color:var(--faint)}
.row-line .amt{font-family:var(--font-mono);font-size:.83rem;font-variant-numeric:tabular-nums}
.row-line .amt.pos{color:var(--green)}
.row-line .st{font-family:var(--font-mono);font-size:.64rem;font-weight:700;padding:3px 9px;border-radius:6px}
.st-dead{color:var(--red);background:rgba(198,85,63,.1)}
.st-dup{color:var(--accent);background:var(--bronze-soft)}
.st-ok{color:var(--faint);background:var(--bg-soft)}
.card-total{margin-top:16px;padding-top:15px;border-top:1px solid var(--line-strong);display:flex;justify-content:space-between;align-items:baseline}
.card-total .l{font-size:.84rem;color:var(--muted)}
.card-total .v{font-family:var(--font-mono);font-weight:700;font-size:1.35rem;color:var(--green);font-variant-numeric:tabular-nums}
.freedom-big{text-align:center;padding:14px 0 6px}
.freedom-big .v{font-family:var(--font-display);font-weight:800;font-size:2.8rem;letter-spacing:-.03em;color:var(--accent)}
.freedom-big .l{font-size:.86rem;color:var(--muted);margin-top:6px}
.f-bar{height:8px;border-radius:4px;background:var(--bg-soft);overflow:hidden;margin-top:20px}
.f-bar i{display:block;height:100%;width:14%;background:linear-gradient(90deg,var(--green),var(--bronze))}
.f-meta{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.66rem;color:var(--faint);margin-top:8px}
@media(max-width:880px){
  .feat-grid{grid-template-columns:1fr;gap:44px}
  .feat-grid.flip .feat-copy{order:1}
  .feat-grid.flip .feat-visual{order:2}
}

/* ---------- Orientation (windfall / profil & objectif) ---------- */
.soon{display:inline-block;margin-left:.55rem;padding:.14rem .55rem;border-radius:100px;border:1px solid rgba(143,108,49,.4);font-family:var(--font-mono);font-size:.5rem;font-weight:700;letter-spacing:.2em;color:var(--accent);vertical-align:middle}
.dark .soon{border-color:rgba(207,167,109,.4)}
.orient-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.orient-tags span{font-family:var(--font-mono);font-size:.68rem;font-weight:600;padding:6px 11px;border-radius:8px;background:var(--bronze-soft);color:var(--accent)}
.feat-note{margin-top:20px;font-size:.8rem;color:var(--faint);line-height:1.6}
.feat-note b{color:var(--muted)}

/* ---------- Avuru Connect : FAQ ---------- */
.connect-faq{max-width:860px;margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(2.4rem,5vw,3.6rem);border-top:1px solid var(--line)}
.connect-faq h3{font-size:clamp(1.25rem,2.4vw,1.6rem);letter-spacing:-.01em;margin:0 0 1.2rem}
.connect-faq details{border-bottom:1px solid var(--line)}
.connect-faq summary{list-style:none;cursor:pointer;position:relative;padding:1.05rem 2.2rem 1.05rem 0;font-size:1rem;font-weight:500;color:var(--text)}
.connect-faq summary::-webkit-details-marker{display:none}
.connect-faq summary:hover{color:var(--accent)}
.connect-faq summary::after{content:"+";position:absolute;right:.1rem;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:1.35rem;line-height:1;color:var(--accent)}
.connect-faq details[open] summary{color:var(--accent)}
.connect-faq details[open] summary::after{content:"–"}
.connect-faq details p{margin:-.2rem 0 1.15rem;max-width:72ch;font-size:.95rem;color:var(--muted);line-height:1.65}

/* ---------- Assistant IA ---------- */
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,6rem);align-items:center}
@media(max-width:880px){.ai-grid{grid-template-columns:1fr;gap:44px}}
.ai-grid>div>p{color:var(--muted);font-size:1.05rem;margin-top:1rem}
.prompt-list{margin-top:32px;display:flex;flex-direction:column;gap:13px}
.prompt-tab{display:flex;align-items:center;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-size:.98rem;color:var(--faint);transition:color .3s var(--ease);padding:0;font-family:var(--font-body)}
.prompt-tab .bar{display:inline-block;height:2px;width:.75rem;margin-right:.75rem;background:var(--line-strong);transition:all .5s var(--ease);flex:none}
.prompt-tab:hover{color:var(--muted)}
.prompt-tab.active{color:var(--text)}
.prompt-tab.active .bar{width:2rem;background:var(--bronze)}
.assistant-card{position:relative;border-radius:20px;border:1px solid var(--line);background:var(--panel);padding:36px;overflow:hidden;box-shadow:var(--card-shadow)}
.assistant-head{display:flex;align-items:center;gap:.75rem;font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;color:var(--faint)}
.assistant-head svg{width:.9rem;height:.9rem;color:var(--accent)}
.assistant-q{margin-top:28px}
.assistant-a{margin-top:28px;border-top:1px solid var(--line);padding-top:28px}
.assistant-tag{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;margin-bottom:12px;color:var(--faint)}
.assistant-a .assistant-tag{color:var(--accent)}
.assistant-question{font-family:var(--font-display);font-weight:600;font-size:clamp(1.25rem,2.4vw,1.65rem);color:var(--text);line-height:1.3;letter-spacing:-.02em}
.assistant-answer{font-family:var(--font-mono);font-weight:700;font-size:clamp(2rem,5vw,3.3rem);letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.1}
.assistant-context{margin-top:14px;color:var(--muted);font-size:.98rem;line-height:1.6}
.qfade{animation:quietFade .5s var(--ease) both}
.afade{animation:quietFade .7s var(--ease) .12s both}
@keyframes quietFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Regret (SOMBRE) ---------- */
.regret{text-align:center}
.regret-num{margin-top:2rem;font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,11vw,8rem);line-height:.95;letter-spacing:-.045em;color:var(--accent);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.regret-months{margin-top:1.1rem;font-size:clamp(1rem,2.2vw,1.3rem);color:var(--muted)}
.regret-months .tnum{color:var(--text);font-weight:700}
.regret-controls{margin:48px auto 0;max-width:660px;display:grid;gap:2rem;text-align:left}
@media(min-width:768px){.regret-controls{grid-template-columns:1fr 1fr}}
.sim-ctrl{display:flex;flex-direction:column;gap:.75rem}
.sim-ctrl .top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.sim-ctrl .top .k{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--faint)}
.sim-ctrl .top .v{font-family:var(--font-mono);font-size:1.15rem;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.avuru-range{-webkit-appearance:none;appearance:none;width:100%;height:2px;border-radius:9999px;outline:none;cursor:pointer;background:var(--line-strong)}
.avuru-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:9999px;background:var(--text);border:2px solid var(--bronze);box-shadow:0 0 0 4px rgba(207,167,109,.14);cursor:grab;transition:box-shadow .2s var(--ease)}
.avuru-range::-webkit-slider-thumb:hover{box-shadow:0 0 0 6px rgba(207,167,109,.24)}
.avuru-range::-moz-range-thumb{width:18px;height:18px;border-radius:9999px;background:var(--text);border:2px solid var(--bronze);cursor:grab}
.regret-disclaimer{margin-top:2rem;font-size:.75rem;color:var(--faint);max-width:660px;margin-left:auto;margin-right:auto;line-height:1.7}
.regret-cta{margin-top:2.6rem}

/* ---------- Pricing (clair) ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.tier{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;text-align:left;box-shadow:var(--card-shadow)}
.tier.pop{border-color:rgba(143,108,49,.4);box-shadow:0 30px 70px rgba(143,108,49,.14);position:relative}
.tier.pop::before{content:attr(data-badge);position:absolute;top:-11px;left:26px;font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.14em;color:#1A1206;background:var(--bronze);border-radius:100px;padding:4px 12px}
.tier .plan{font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.tier .amount{font-family:var(--font-display);font-weight:800;font-size:2.4rem;letter-spacing:-.03em;margin:14px 0 2px;color:var(--text)}
.tier .amount small{font-family:var(--font-body);font-weight:400;font-size:.85rem;color:var(--muted)}
.tier .amount-year{font-size:.78rem;color:var(--faint);margin-bottom:14px}
.tier .hook{font-size:.86rem;color:var(--green);font-weight:600;margin-bottom:18px}
.tier ul{list-style:none;flex:1}
.tier li{font-size:.89rem;color:var(--muted);padding:7px 0 7px 22px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:.85em;width:7px;height:7px;border-radius:50%;background:var(--bronze)}
.tier li b{color:var(--text)}
.tier .btn{margin-top:26px;width:100%}
@media(max-width:1040px){.tiers{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tiers{grid-template-columns:1fr}}

/* ---------- Sécurité (SOMBRE) ---------- */
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px}
.sec-mini{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.sec-mini h3{font-family:var(--font-display);font-weight:700;font-size:1.12rem;letter-spacing:-.02em;margin-bottom:8px;color:var(--text)}
.sec-mini p{font-size:.84rem;color:var(--muted);line-height:1.6}
.sec-honest{margin-top:32px;font-size:.84rem;color:var(--faint);max-width:74ch;line-height:1.7}
.sec-honest a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
@media(max-width:840px){.sec-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sec-grid{grid-template-columns:1fr}}

/* ---------- Manifeste (clair sobre) ---------- */
.manifesto{max-width:840px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:1.7rem}
.mline{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,3.4vw,2.5rem);line-height:1.3;letter-spacing:-.025em;color:var(--text);text-wrap:balance}
.mline .hl{color:var(--accent);font-weight:800}
.mline.final{font-weight:800;color:var(--accent);margin-top:.4rem}

/* ---------- Communauté (clair) ---------- */
.community{text-align:center}
.community-inner{max-width:680px;margin:0 auto;border:1px solid var(--line);border-radius:24px;background:radial-gradient(120% 120% at 50% 0%,var(--bronze-soft),transparent 55%),var(--panel);padding:clamp(2.6rem,6vw,4.5rem);display:flex;flex-direction:column;align-items:center;gap:1.4rem;box-shadow:var(--card-shadow)}
.community-inner p{color:var(--muted)}
.community-cta{margin-top:.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.link-quiet{font-size:.9rem;color:var(--muted);text-underline-offset:4px}
.link-quiet:hover{color:var(--accent);text-decoration:underline}

/* ---------- CTA final (SOMBRE) — split 50/50 façon Brex ---------- */
.final{position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 55% at 22% 45%,rgba(207,167,109,.1),transparent 70%);pointer-events:none}
.final-split{display:grid;grid-template-columns:1fr 1fr;min-height:540px}
.final-copy{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;padding:clamp(5rem,10vw,8.5rem) clamp(2.5rem,5vw,5rem) clamp(5rem,10vw,8.5rem) var(--edge)}
.final h2{font-size:clamp(2.2rem,3.8vw,3.6rem);letter-spacing:-.04em}
.final .lede{color:var(--muted);max-width:44ch;margin:24px 0 40px;font-size:1.1rem}
.final .btn{font-size:1.06rem;padding:19px 44px}
.final .reassure{font-size:.84rem;color:var(--faint);margin-top:18px}
.final-visual{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 130% at 12% 6%,rgba(255,255,255,.16),transparent 55%),linear-gradient(150deg,#DDB77E,#CFA76D 45%,#9A7A3F);padding:clamp(3rem,5vw,5rem) clamp(2rem,4vw,4rem)}
.phone{width:min(380px,78%);background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-strong);border-radius:34px;padding:20px 20px 26px;box-shadow:0 50px 120px rgba(10,15,28,.45);transform:rotate(-6deg)}
.phone-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 6px 16px;border-bottom:1px solid var(--line)}
.phone-head .k{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.phone-head .v{font-family:var(--font-mono);font-weight:700;font-size:1.25rem;color:var(--text)}
.phone-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 6px;border-bottom:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.phone-row:last-child{border-bottom:none;padding-bottom:0}
.phone-row .amt{font-family:var(--font-mono);font-size:.82rem;color:var(--text)}
.phone-row .amt.pos{color:var(--green)}
@media(max-width:960px){
  .final-split{grid-template-columns:1fr;min-height:0}
  .final-copy{align-items:center;text-align:center;padding:clamp(4.5rem,10vw,7rem) var(--gutter)}
  .final .lede{margin-left:auto;margin-right:auto}
  .final-visual{justify-content:center;padding:3.5rem var(--gutter) 0}
  .phone{width:min(340px,86%);margin:0 0 -70px;transform:rotate(-4deg)}
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line-strong);padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.sticky-cta .btn{width:100%;padding:15px}
@media(max-width:640px){.sticky-cta{display:block}body{padding-bottom:78px}}

/* ---------- Footer (SOMBRE, grand) ---------- */
.site-footer{position:relative}
.footer-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px;padding:clamp(4rem,7vw,6rem) 0 clamp(3rem,5vw,4rem)}
.footer-brand .logo{font-size:1.4rem;display:inline-block;margin-bottom:16px}
.footer-brand p{color:var(--muted);font-size:.9rem;max-width:30ch;line-height:1.6}
.newsletter{margin-top:22px;max-width:340px}
.newsletter label{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:10px}
.newsletter form{display:flex;gap:8px}
.newsletter input[type=email]{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line-strong);border-radius:11px;padding:12px 14px;color:var(--text);font-family:inherit;font-size:.88rem;outline:none;transition:border-color .2s}
.newsletter input[type=email]:focus{border-color:var(--bronze)}
.newsletter input[type=email]::placeholder{color:var(--faint)}
.newsletter .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.newsletter .nl-msg{margin-top:10px;font-size:.8rem;min-height:1.1em}
.newsletter .nl-msg.ok{color:var(--green)}
.newsletter .nl-msg.err{color:var(--red)}
.socials{display:flex;gap:12px;margin-top:26px}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line-strong);color:var(--muted);transition:color .2s,border-color .2s}
.socials a:hover{color:var(--bronze);border-color:var(--bronze)}
.socials svg{width:18px;height:18px}
.footer-col h4{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer-col a{font-size:.9rem;color:var(--muted)}
.footer-col a:hover{color:var(--text)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 0 clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.footer-bottom .mono{font-family:var(--font-mono);font-size:.72rem;color:var(--faint)}
@media(max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr;gap:36px}
  .footer-brand{grid-column:1 / -1}
}
@media(max-width:560px){.footer-top{grid-template-columns:1fr}}

/* ---------- Rythme de largeur : bleeds vers le bord du viewport ---------- */
@media(min-width:1100px){
  .bleed-right{margin-right:calc(-1*var(--edge));border-radius:28px 0 0 28px}
  .bleed-left{margin-left:calc(-1*var(--edge));border-radius:0 28px 28px 0}
}

/* ---------- Couche ambiante « champ de trajectoires » (hero → IA) ------- */
/* z-index:-1 : la couche peint AVANT les fonds des sections (les fonds
   opaques .dark la couvrent, les fonds translucides la laissent voir).
   .ambient a z-index:0 pour créer le stacking context qui borne le -1
   (sinon la couche passerait derrière le fond du body). Le div porte aussi
   ces valeurs en style inline — filet si une vieille feuille CSS en cache
   ne connaît pas ces règles (sinon les SVG passent dans le flux et cassent
   toute la mise en page, bug Safari du 2026-07-28). */
.ambient{position:relative;z-index:0}
.ambient>section,.ambient>.proof{position:relative;z-index:1}
.ambient-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40px,#000 calc(100% - 220px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 40px,#000 calc(100% - 220px),transparent 100%)}
.ambient-orbits{position:absolute;height:auto}
.ao-hero{top:-60px;right:-8%;width:min(74vw,1150px)}
.ao-mid{top:45%;left:-12%;width:min(50vw,760px)}
.ao-ai{top:85%;left:-6%;width:min(42vw,620px)}
/* Poussière : bande hero uniquement (jamais toute la hauteur — texture GPU) */
.ambient-dust{position:absolute;top:0;left:0;right:0;height:calc(130vh + 950px);
  background-image:
    radial-gradient(2px 2px at 18% 12%,rgba(143,108,49,.10),transparent 55%),
    radial-gradient(1.5px 1.5px at 73% 34%,rgba(143,108,49,.08),transparent 55%),
    radial-gradient(2.5px 2.5px at 44% 58%,rgba(10,15,28,.05),transparent 55%),
    radial-gradient(1.5px 1.5px at 88% 76%,rgba(143,108,49,.07),transparent 55%),
    radial-gradient(2px 2px at 8% 86%,rgba(10,15,28,.05),transparent 55%);
  background-size:1100px 950px;
  animation:amb-dust 140s linear infinite}
@keyframes amb-dust{to{transform:translateY(-950px)}}
.amb-tw{animation:amb-twinkle 7s ease-in-out infinite}
@keyframes amb-twinkle{0%,100%{opacity:.35}50%{opacity:1}}
.amb-ring{transform-box:fill-box;transform-origin:center;animation:amb-ring 7s var(--ease) infinite}
@keyframes amb-ring{0%{transform:scale(.2);opacity:0}12%{opacity:.5}100%{transform:scale(1);opacity:0}}
.ambient-layer .paused,.ambient-layer .paused *,.ambient-layer.paused *{animation-play-state:paused}
@media(max-width:768px){
  .ao-mid,.ao-ai,.ambient-dust{display:none}
  .ao-hero{width:130vw;right:-40vw;opacity:.7}
}

/* ---------- Reveal (JS only) ---------- */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);will-change:opacity,transform}
html.js .reveal.in{opacity:1;transform:none}
.d-1{transition-delay:.08s}.d-2{transition-delay:.16s}.d-3{transition-delay:.24s}

/* ---------- Micro-animations (états cachés UNIQUEMENT derrière html.js) -- */
@keyframes rise{to{opacity:1;transform:none}}
/* Cascade d'entrée du hero (au chargement) */
html.js .hero-left>*{opacity:0;transform:translateY(14px);animation:rise .7s var(--ease) both}
html.js .hero-left h1{animation-delay:.05s}
html.js .hero-left .hero-sub{animation-delay:.12s}
html.js .hero-left .hero-form{animation-delay:.19s}
html.js .hero-left .hero-reassure{animation-delay:.26s}
html.js .hero-left .hero-play{animation-delay:.33s}
/* Mini-chat du cockpit : question puis réponse */
html.js .dr-q{opacity:0;animation:rise .5s var(--ease) 1.1s both}
html.js .dr-a{opacity:0;animation:rise .5s var(--ease) 1.5s both}
/* Lignes de carte : entrée en cascade quand la carte se révèle */
html.js .reveal .card .row-line,html.js .reveal .card .card-total{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
html.js .reveal.in .card .row-line,html.js .reveal.in .card .card-total{opacity:1;transform:none}
html.js .reveal.in .card .row-line:nth-child(1){transition-delay:.25s}
html.js .reveal.in .card .row-line:nth-child(2){transition-delay:.32s}
html.js .reveal.in .card .row-line:nth-child(3){transition-delay:.39s}
html.js .reveal.in .card .row-line:nth-child(4){transition-delay:.46s}
html.js .reveal.in .card .row-line:nth-child(5){transition-delay:.53s}
html.js .reveal.in .card .card-total{transition-delay:.62s}
/* Puces des sections features */
html.js .reveal .fp{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.js .reveal.in .fp{opacity:1;transform:none}
html.js .reveal.in .fp:nth-child(1){transition-delay:.15s}
html.js .reveal.in .fp:nth-child(2){transition-delay:.22s}
html.js .reveal.in .fp:nth-child(3){transition-delay:.29s}
html.js .reveal.in .fp:nth-child(4){transition-delay:.36s}
/* Onglets de prompts IA */
html.js .reveal .prompt-list li{opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.js .reveal.in .prompt-list li{opacity:1;transform:none}
html.js .reveal.in .prompt-list li:nth-child(1){transition-delay:.12s}
html.js .reveal.in .prompt-list li:nth-child(2){transition-delay:.18s}
html.js .reveal.in .prompt-list li:nth-child(3){transition-delay:.24s}
html.js .reveal.in .prompt-list li:nth-child(4){transition-delay:.3s}
html.js .reveal.in .prompt-list li:nth-child(5){transition-delay:.36s}
html.js .reveal.in .prompt-list li:nth-child(6){transition-delay:.42s}
/* Tags orientation */
html.js .reveal .orient-tags span{opacity:0;transform:scale(.7);transition:opacity .45s var(--ease),transform .45s var(--ease)}
html.js .reveal.in .orient-tags span{opacity:1;transform:scale(1)}
html.js .reveal.in .orient-tags span:nth-child(1){transition-delay:.2s}
html.js .reveal.in .orient-tags span:nth-child(2){transition-delay:.28s}
html.js .reveal.in .orient-tags span:nth-child(3){transition-delay:.36s}
/* Pyramide des besoins : barres qui poussent du centre, du vital au rêve */
html.js .reveal .needs-stack i{transform:scaleX(0);transition:transform .5s var(--ease)}
html.js .reveal.in .needs-stack i{transform:scaleX(1)}
html.js .reveal.in .needs-stack .ns-1{transition-delay:.2s}
html.js .reveal.in .needs-stack .ns-2{transition-delay:.28s}
html.js .reveal.in .needs-stack .ns-3{transition-delay:.36s}
html.js .reveal.in .needs-stack .ns-4{transition-delay:.44s}
html.js .reveal.in .needs-stack .ns-5{transition-delay:.52s}
/* Badges de statut (RÉSILIER / DOUBLON / …) : pop séquencé après les lignes */
@keyframes pop{0%{opacity:0;transform:scale(.5)}70%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
html.js .reveal .st{opacity:0}
html.js .reveal.in .st{animation:pop .5s var(--ease) both}
html.js .reveal.in .row-line:nth-child(1) .st{animation-delay:.5s}
html.js .reveal.in .row-line:nth-child(2) .st{animation-delay:.65s}
html.js .reveal.in .row-line:nth-child(3) .st{animation-delay:.8s}
html.js .reveal.in .row-line:nth-child(4) .st{animation-delay:.95s}
/* Barres de progression (objectif hero + liberté) */
html.js .g-bar i,html.js .reveal .f-bar i{transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .45s}
html.js .reveal.in .g-bar i,html.js .reveal.in .f-bar i{transform:scaleX(1)}
/* Caret de frappe de l'assistant */
.typing::after{content:"";display:inline-block;width:2px;height:1em;vertical-align:-2px;background:var(--accent);margin-left:2px;animation:caretBlink 1s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}

/* ---------- Barre d'annonce (early adopters, au-dessus du header) ------- */
.announce{font-size:.82rem}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:12px;min-height:42px;padding-top:8px;padding-bottom:8px;text-align:center}
.announce p{margin:0;line-height:1.5}
.announce b{color:var(--bronze)}
.announce a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.announce-close{display:none;flex:none;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:none;color:var(--muted);cursor:pointer;border-radius:8px}
html.js .announce-close{display:inline-flex}
.announce-close:hover{color:var(--text)}
.announce-close svg{width:14px;height:14px}
html.announce-off .announce{display:none}

/* ---------- Pyramide des besoins (#besoins) ---------- */
.needs-stack{display:flex;flex-direction:column-reverse;align-items:center;gap:5px;margin-bottom:18px}
.needs-stack i{display:block;height:14px;border-radius:4px;background:var(--bronze-soft)}
.needs-stack .ns-1{width:100%}
.needs-stack .ns-2{width:84%}
.needs-stack .ns-3{width:68%}
.needs-stack .ns-4{width:52%}
.needs-stack .ns-5{width:36%}
.needs-stack i.on{background:linear-gradient(90deg,var(--green),var(--bronze))}

/* ---------- Photos (personas, features, communauté) ----------
   Pexels auto-hébergées, lazy. Voile bronze léger pour coller à la palette.
   Masquées sur mobile (display:none + loading=lazy → jamais téléchargées). */
.personas{padding:clamp(4.5rem,9vw,8rem) 0;background:var(--tint-soft)}
.personas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.persona{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--card-shadow);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.persona:hover{transform:translateY(-4px);box-shadow:0 30px 70px rgba(10,15,28,.11),0 3px 8px rgba(10,15,28,.05)}
.persona-photo{position:relative;aspect-ratio:4/3.4;overflow:hidden;background:var(--bg-soft)}
.persona-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88)}
.persona-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(207,167,109,.07),rgba(10,15,28,.10) 92%);pointer-events:none}
.persona-body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:8px;flex:1}
.persona-body h3{font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--text)}
.persona-body p{font-size:.9rem;color:var(--muted);line-height:1.6;flex:1}
.persona-body .feat-link{margin-top:14px}
@media(max-width:880px){
  .personas-grid{grid-template-columns:1fr;gap:18px}
  .persona-photo{aspect-ratio:16/7}
}
@media(max-width:640px){
  .persona-photo{display:none}
}

/* Feature : photo en toile de fond derrière la carte UI */
.feat-visual.has-photo{padding-top:clamp(8rem,18vw,13rem)}
.feat-visual.has-photo::after{display:none}
.feat-photo{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.feat-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85)}
.feat-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(207,167,109,.08) 0%,rgba(10,15,28,.06) 45%,rgba(10,15,28,.26) 100%)}
@media(max-width:880px){
  .feat-visual.has-photo{padding-top:clamp(1.6rem,4vw,3rem)}
  .feat-photo{display:none}
}

/* Communauté : photo de groupe au-dessus du texte */
.community-photo{position:relative;width:100%;aspect-ratio:16/7;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.community-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88)}
.community-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(207,167,109,.06),rgba(10,15,28,.12) 95%)}
@media(max-width:640px){
  .community-photo{display:none}
}

/* ---------- Pages légales (conditions / confidentialité) ---------- */
.legal{padding:clamp(3rem,6vw,5rem) 0 clamp(4rem,7vw,6rem)}
.legal h1{font-size:clamp(2rem,4vw,2.8rem);margin:.6rem 0 .4rem}
.legal h2{font-size:1.25rem;letter-spacing:-.02em;margin:2.4rem 0 .6rem}
.legal p,.legal li{color:var(--muted);font-size:.95rem}
.legal p b,.legal li b{color:var(--text)}
.legal ul{padding-left:1.2rem;margin:.6rem 0}
.legal li{margin:.35rem 0}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal-updated{font-family:var(--font-mono);font-size:.74rem;color:var(--faint);margin-bottom:1.4rem}
.footer-lite .footer-bottom{border-top:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;animation-delay:0s!important}
  html.js .reveal{opacity:1!important;transform:none!important}
  .chart .stroke{stroke-dashoffset:0!important}
  /* SMIL ignore prefers-reduced-motion → on retire le point orbital (JS le met
     aussi en pause via pauseAnimations, double ceinture). */
  .ambient-layer .orbit-dot{display:none}
  /* Tous les états initiaux cachés des micro-animations → visibles d'emblée */
  html.js .hero-left>*,html.js .dr-q,html.js .dr-a,
  html.js .reveal .card .row-line,html.js .reveal .card .card-total,
  html.js .reveal .fp,html.js .reveal .prompt-list li,
  html.js .reveal .orient-tags span,html.js .reveal .st{opacity:1!important;transform:none!important;animation:none!important}
  html.js .reveal .needs-stack i,html.js .g-bar i,html.js .reveal .f-bar i{transform:scaleX(1)!important}
  .typing::after{display:none}
}