:root{
    --sans:"SF Pro Rounded","SF Pro Display",-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;
  /* MEMES VALEURS QUE app.css et legal.css. Les fiches d'agents avaient leur
     propre noir pur : ouvrir une fiche depuis le catalogue donnait l'impression
     de quitter la plateforme. Une couleur de fond, partout. */
  --bg:#070C16;--surf:#111E36;--surf2:#172848;--line:rgba(255,255,255,.14);--line2:rgba(255,255,255,.22);
  --txt:rgba(255,255,255,.98);--muted:#A2B4BB;--faint:#8FA6AE;--indigo:#7C3AED;--cyan:#06B6D4;--emerald:#30D158;
  --grad:linear-gradient(120deg,#7C3AED 0%,#3B82F6 55%,#06B6D4 100%);
  --grad-soft:linear-gradient(135deg,rgba(124,58,237,.18),rgba(59,130,246,.12),rgba(6,182,212,.10));
  --r:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.grad-txt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Halo eteint en mode sombre : il teintait le coin superieur gauche en violet
   alors que le reste du fond etait petrole. Voir assets/app.css. */
.glow{display:none}
.g1{width:600px;height:600px;background:rgba(99,102,241,.30);top:-200px;left:-150px}
.g2{width:500px;height:500px;background:rgba(34,211,238,.18);top:200px;right:-180px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:12px;font-weight:700;font-size:15px;background:var(--grad);color:#000000;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 10px 30px -10px rgba(34,211,238,.5)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(34,211,238,.65)}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line2);box-shadow:none}
.promo{background:var(--grad);color:#000000;text-align:center;font-size:13px;font-weight:700;padding:9px 14px}
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px);background:rgba(18,42,50,.78);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:-.5px;cursor:pointer}
.logo .mk{width:34px;height:34px;border-radius:10px;background:#00041f url(../assets/logo-mark.png) center/cover;display:grid;place-items:center;font-size:0;color:transparent}
.nav-links{display:flex;gap:24px;font-size:14.5px;font-weight:500;color:var(--muted)}
.nav-links a:hover{color:var(--txt)}
.hero{position:relative;z-index:1;padding:54px 0 30px}
.hgrid{display:grid;grid-template-columns:1fr 480px;gap:46px;align-items:center}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);background:var(--grad-soft);border:1px solid var(--line2);padding:6px 13px;border-radius:100px}
h1{font-size:clamp(38px,5.5vw,66px);font-weight:900;letter-spacing:-2px;line-height:1.03;margin:18px 0 14px}
.role{color:var(--muted);font-size:18px;margin-bottom:14px}
.stars{color:#F5C451;letter-spacing:2px}
.lead{font-size:17px;color:var(--muted);max-width:520px;margin:14px 0 22px}
.ticks{display:flex;flex-direction:column;gap:9px;margin-bottom:26px}
.tick{display:flex;align-items:center;gap:10px;font-size:15px}
.tick .c{color:var(--emerald);font-weight:800}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.portrait{position:relative}
.portrait img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 18%;border-radius:26px;border:1px solid var(--line2);box-shadow:0 40px 90px -30px rgba(34,211,238,.45),0 20px 50px -20px rgba(0,0,0,.8);display:block}
.badge-float{position:absolute;bottom:18px;left:-18px;background:var(--surf2);border:1px solid var(--line2);border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:9px;box-shadow:0 14px 30px -12px rgba(0,0,0,.7);font-size:13px;font-weight:600}
.badge-float .dot{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 10px var(--emerald)}
section{padding:54px 0;position:relative;z-index:1}
.sec-h{text-align:center;margin-bottom:34px}
.sec-h .eyebrow{margin-bottom:14px}
.sec-h h2{font-size:clamp(28px,3.6vw,42px);font-weight:900;letter-spacing:-1.2px}
.scen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{border:1px solid var(--line);background:var(--surf);border-radius:var(--r);padding:20px}
.card .tag{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--faint)}
.bubble{margin-top:12px;padding:12px 14px;border-radius:13px;font-size:14px}
.bubble.u{background:var(--grad-soft);border:1px solid var(--line2);border-bottom-right-radius:4px}
.bubble.a{background:var(--surf2);border:1px solid var(--line);border-bottom-left-radius:4px;margin-top:9px}
.bubble .who{font-size:11px;font-weight:700;color:var(--cyan);margin-bottom:4px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{border:1px solid var(--line);background:var(--surf);border-radius:var(--r);padding:24px}
.feat .i{width:48px;height:48px;border-radius:13px;background:var(--grad-soft);border:1px solid var(--line);display:grid;place-items:center;font-size:22px;margin-bottom:14px}
.feat h3{font-size:17px;margin-bottom:6px}.feat p{color:var(--muted);font-size:14px}
.quote{max-width:760px;margin:0 auto;text-align:center;font-size:21px;font-weight:600;line-height:1.5}
.quote .who{display:block;color:var(--muted);font-size:14px;font-weight:500;margin-top:14px}
.cta-band{background:linear-gradient(120deg,var(--surf2),var(--surf));border:1px solid var(--line2);border-radius:26px;padding:46px;text-align:center}
.cta-band h2{font-size:clamp(26px,3.4vw,40px);font-weight:900;letter-spacing:-1px;margin-bottom:12px}
.cta-band p{color:var(--muted);margin-bottom:24px}
footer{border-top:1px solid var(--line);margin-top:30px;padding:30px 0;text-align:center;color:var(--faint);font-size:13px}
.otheragents{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.oa{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:100px;border:1px solid var(--line2);background:var(--surf);font-size:13px;font-weight:600}
.oa img{width:24px;height:24px;border-radius:50%;object-fit:cover}
@media(max-width:900px){.hgrid{grid-template-columns:1fr;gap:30px}.portrait{max-width:380px;margin:0 auto}.scen,.feats{grid-template-columns:1fr}/* PARITE MOBILE : ces liens etaient MASQUES sous 900px, et ces pages
     n'ont ni burger ni menu de remplacement — depuis un telephone, on ne
     pouvait plus atteindre Tarifs ni FAQ depuis une fiche. Ils ne sont que
     TROIS et tres courts : ils tiennent sur un ecran de 375px. On les
     resserre au lieu de les supprimer. */
  .nav-links{gap:14px;font-size:13px}
    /* La barre passe sur DEUX LIGNES plutot que de pousser « Se connecter »
       hors de l'ecran : mesure a 375px, elle debordait de 57px. */
    .nav-in{flex-wrap:wrap;height:auto;padding:10px 0;row-gap:6px}
    .nav-links{order:3;flex-basis:100%;justify-content:center}
    /* 44px de haut minimum : c'est la cible tactile sous laquelle un doigt
       rate le lien une fois sur trois. Mesure avant correction : 40px. */
    .nav-links a{display:inline-flex;align-items:center;min-height:44px}}