/* Site public v3 — sur tokens.css. Structure : nav · héros sombre · chiffres · produit · fonctionnement · conformité · tarif · FAQ · CTA · pied */
.nav-site{ position:sticky; top:0; z-index:50; height:var(--nav-h); display:flex; align-items:center; background:color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter:blur(20px); border-bottom:1px solid transparent; transition:border-color var(--t-base), background var(--t-base); }
.nav-site.def{ border-bottom-color:var(--line); }
.nav-site .container{ display:flex; align-items:center; gap:28px; }
.nav-site .marque{ display:flex; align-items:center; gap:9px; font-family:var(--titre); font-weight:700; font-size:1rem; letter-spacing:-.03em; white-space:nowrap; flex:none; } .nav-site .marque svg{ width:24px; height:24px; }
.nav-site .liens{ display:flex; gap:22px; margin-left:8px; } .nav-site .liens a{ font-size:.875rem; color:var(--text-2); } .nav-site .liens a:hover{ color:var(--text); }
.nav-site .droite{ margin-left:auto; display:flex; gap:8px; align-items:center; }
@media(max-width:820px){ .nav-site .liens{ display:none; } }
/* Sous 520 px la barre n'a plus la place pour deux actions : on garde l'essai. */
@media(max-width:520px){
  .nav-site .container{ gap:12px; }
  .nav-site .droite .btn-ghost{ display:none; }
  .nav-site .droite .btn{ padding:0 14px; font-size:.8125rem; }
}

.heros{ background:#08090A; color:#F5F6F7; padding:104px 0 0; overflow:hidden; position:relative; }
/* Deux nappes superposées : marine large au centre, or rasant à gauche.
   C'est la superposition, pas l'intensité, qui donne la profondeur. */
.heros::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 46% at 50% -4%, rgba(46,92,135,.42), transparent 68%),
             radial-gradient(38% 34% at 8% 6%, rgba(239,176,51,.13), transparent 70%); }
.heros::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(64% 52% at 50% 0%, #000, transparent 78%);
  mask-image:radial-gradient(64% 52% at 50% 0%, #000, transparent 78%); }
.heros .container{ position:relative; z-index:1; }
/* Chapeau en pastille : un objet, pas une ligne de texte perdue. */
.heros .eyebrow{ display:inline-flex; align-items:center; gap:9px; min-height:29px; padding:5px 13px 5px 11px; line-height:1.35;
  border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07); color:#C3C8D0; text-transform:none; letter-spacing:.01em; font-size:.8125rem; }
.heros .eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(239,176,51,.22); }
.heros h1{ color:#fff; max-width:15ch; margin:22px 0 20px; }
.heros .lead{ color:#B7BCC5; font-size:1.125rem; max-width:560px; }
.heros .ctas{ display:flex; gap:10px; margin-top:32px; flex-wrap:wrap; }
/* Bouton principal sur fond sombre : une pastille qui décolle, pas un aplat. */
.heros .btn-primary,.final .btn-primary{ background:linear-gradient(180deg,#FFFFFF,#EDEFF2); color:#0B0C0E; border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset, 0 1px 2px rgba(0,0,0,.4), 0 10px 24px -8px rgba(0,0,0,.7); }
.heros .btn-primary:hover,.final .btn-primary:hover{ background:linear-gradient(180deg,#FFFFFF,#FFFFFF); transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(0,0,0,.4), 0 16px 32px -10px rgba(0,0,0,.75); }
.heros .btn-primary:active,.final .btn-primary:active{ transform:translateY(0); }
.heros .btn-secondary{ color:#F5F6F7; border-color:rgba(255,255,255,.18); } .heros .btn-secondary:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3); }
.heros .rassure{ margin-top:18px; font-size:.8125rem; color:#8A8F98; display:flex; gap:14px; flex-wrap:wrap; }
.heros .rassure span::before{ content:'✓'; color:var(--accent); margin-right:6px; }

/* Capture produit : mosaïque satellite IGN + épingles DPE réelles + fiche réelle */
.capture{ position:relative; z-index:1; margin:60px auto -1px; max-width:calc(var(--container) - var(--gutter) * 2); border-radius:20px 20px 0 0; border:1px solid rgba(255,255,255,.14); border-bottom:0; overflow:hidden; box-shadow:0 -20px 80px -20px rgba(46,92,135,.5); background:#141518; position:relative; }
.capture .barre{ height:44px; display:flex; align-items:center; gap:10px; padding:0 14px; background:#141518; border-bottom:1px solid rgba(255,255,255,.08); font-size:.75rem; color:#8A8F98; }
.capture .barre i{ width:10px; height:10px; border-radius:50%; background:#2A2D33; display:inline-block; } .capture .barre .url{ margin-left:8px; height:26px; padding:0 12px; border-radius:7px; background:#1B1D21; display:inline-flex; align-items:center; gap:6px; color:#B7BCC5; }
.scene{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#07080A; }
/* La maquette : c'est la carte du produit, pas une image de la carte. */
.scene .toile{ position:absolute; inset:0; opacity:0; transition:opacity 900ms var(--ease); }
.scene .toile.vue{ opacity:1; }
.scene .toile canvas{ outline:0; }
.scene::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(70% 55% at 50% 0%, rgba(46,92,135,.20), transparent 72%); }
.scene::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,8,10,.30), rgba(7,8,10,0) 34%, rgba(7,8,10,.62)); }
.scene .chrome{ position:absolute; left:14px; top:14px; z-index:3; display:flex; gap:8px; }
.scene .chrome span{ height:34px; padding:0 12px; display:inline-flex; align-items:center; gap:8px; border-radius:10px; background:rgba(20,21,24,.94); border:1px solid rgba(255,255,255,.12); font-size:.75rem; color:#B7BCC5; }
.scene .chrome b{ color:#F5F6F7; font-weight:600; }
.scene .fiche{ position:absolute; right:14px; top:14px; z-index:4; width:min(300px, 46%); border-radius:16px; background:rgba(20,21,24,.96); border:1px solid rgba(255,255,255,.14); box-shadow:var(--shadow-lg); color:#F5F6F7; padding:14px 16px; }
.scene .fiche .titre-fiche{ font-size:.875rem; font-weight:600; letter-spacing:-.01em; margin:0; } .scene .fiche small{ display:block; color:#8A8F98; font-size:.75rem; margin-top:2px; }
.scene .fiche .etq{ display:flex; gap:6px; align-items:center; margin:10px 0; font-size:.75rem; color:#B7BCC5; } .scene .fiche .dpe{ width:24px; height:24px; font-size:.75rem; }
.scene .fiche .est{ padding:10px 12px; border-radius:10px; background:linear-gradient(135deg, rgba(239,176,51,.18), rgba(239,176,51,.05)); border:1px solid rgba(239,176,51,.3); }
.scene .fiche .est .eyebrow{ color:var(--accent); font-size:.625rem; } .scene .fiche .est b{ display:block; font-size:1.375rem; font-weight:600; letter-spacing:-.03em; margin-top:4px; font-variant-numeric:tabular-nums; }
.scene .fiche .est span{ display:block; font-size:.6875rem; color:#B7BCC5; margin-top:4px; } .scene .fiche .est em{ font-style:normal; color:var(--accent); letter-spacing:.08em; }
.scene .fiche .cta{ margin-top:10px; height:30px; border-radius:8px; background:var(--accent); color:#15171A; font:500 .75rem/30px var(--font); text-align:center; }
@media(max-width:640px){
  /* 16/9 sur 373 px ne laisse que 210 px de haut : la fiche y était amputée. */
  .scene{ aspect-ratio:4/5; }
  .scene .fiche{ width:auto; left:14px; right:14px; top:auto; bottom:14px; padding:12px 14px; }
  .scene .chrome{ top:12px; left:12px; }
  .heros{ padding-top:64px; }
}

.chiffres{ position:relative; background:var(--bg); border-bottom:1px solid var(--line); }
.chiffres .container{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; padding-block:30px; position:relative; }
/* Filets verticaux entre les chiffres : de la structure, pas du vide. */
.chiffres .container > div + div::before{ content:''; position:absolute; top:26px; bottom:26px; width:1px; margin-left:-12px;
  background:linear-gradient(180deg, transparent, var(--line-2), transparent); }
.chiffres .container > div{ position:relative; }
.chiffres b{ display:block; font-family:var(--titre); font-size:1.75rem; font-weight:700; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums; }
.chiffres span{ display:block; margin-top:7px; font-size:.8125rem; color:var(--text-2); }
@media(max-width:820px){ .chiffres .container{ grid-template-columns:repeat(2, 1fr); }
  .chiffres .container > div:nth-child(2n+1)::before{ display:none; } }

.section-tete{ max-width:640px; margin-bottom:var(--s-7); } .section-tete h2{ margin:14px 0 14px; } .section-tete p{ font-size:1.0625rem; color:var(--text-2); }
.bento{ display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; }
.bento .card{ padding:28px; display:flex; flex-direction:column; gap:10px; min-height:230px; overflow:hidden; }
.bento .card:hover{ transform:none; }
.bento .card.vedette{ background:var(--pane-accent), var(--pane); border-color:var(--line-2); }
.bento .card.vedette .ic{ background:var(--brand); color:#fff; box-shadow:0 6px 16px -6px rgba(22,50,79,.6); }
.bento .c-3{ grid-column:span 3; } .bento .c-2{ grid-column:span 2; } .bento .c-4{ grid-column:span 4; }
.bento .ic{ width:38px; height:38px; border-radius:11px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; margin-bottom:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(0,22,62,.06); } .bento .ic svg{ width:18px; height:18px; }
.bento h3{ font-size:var(--h3-size); } .bento p{ font-size:.9375rem; line-height:1.55; }
.bento .demo{ margin-top:auto; padding-top:16px; }
.lettres-demo{ display:flex; gap:8px; flex-wrap:wrap; } .lettres-demo span{ padding:6px 10px; border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--line-2); font-size:.75rem; color:var(--text-2); }
.parcours{ display:flex; gap:4px; flex-wrap:wrap; } .parcours span{ height:24px; padding:0 9px; display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-pill); font:500 .6875rem/1 var(--font); }
.parcours span::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
/* Le parcours porte les vraies couleurs de statut du produit et s'allume étape par étape.
   Trois cycles suffisent : au-delà, ça clignote à côté d'un texte qu'on essaie de lire. */
.parcours .st-envoye  { background:#E9EEF5; color:#16324F; }
.parcours .st-scanne  { background:#E6F0FA; color:#1D4ED8; }
.parcours .st-estime  { background:#EDE9FE; color:#6D28D9; }
.parcours .st-consenti{ background:#E6F6EC; color:#0F6E36; }
.parcours .st-rdv     { background:var(--accent-soft); color:#8A5A00; }
.parcours .st-mandat  { background:var(--brand); color:#fff; }
.parcours span{ opacity:.62; transition:opacity 400ms var(--ease); }
[data-reveal].in .parcours span{ animation:etape-vive 7.2s var(--ease) 3; animation-delay:calc(var(--i) * 600ms); animation-fill-mode:forwards; }
@keyframes etape-vive{ 0%,4%{ opacity:.62; } 9%,26%{ opacity:1; } 34%,99%{ opacity:.62; } 100%{ opacity:1; } }
@media(prefers-reduced-motion:reduce){ .parcours span{ opacity:1; animation:none !important; } }
@media(max-width:900px){ .bento .c-3,.bento .c-2,.bento .c-4{ grid-column:span 6; } }

.etapes{ position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; counter-reset:etape; }
.etapes div{ position:relative; padding:26px 0 0; border-top:1px solid var(--line-2); }
.etapes div::after{ content:''; position:absolute; top:-1px; left:0; width:38px; height:1px; background:var(--accent); }
.etapes div::before{ counter-increment:etape; content:counter(etape, decimal-leading-zero); position:absolute; top:-11px; left:0; background:var(--bg); padding-right:10px; font:500 .75rem/1.6 var(--mono); color:var(--accent-hover); letter-spacing:.06em; }
.etapes h3{ font-size:var(--h3-size); margin-bottom:8px; } .etapes p{ font-size:.9375rem; color:var(--text-2); line-height:1.55; }
@media(max-width:820px){ .etapes{ grid-template-columns:1fr; } }

.conformite{ position:relative; background:var(--bg);
  border-block:1px solid var(--line); }
.conformite .container{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
.conformite ul{ display:flex; flex-direction:column; gap:12px; margin-top:20px; } .conformite li{ display:flex; gap:12px; font-size:.9375rem; line-height:1.5; }
.conformite li svg{ width:18px; height:18px; color:var(--success); flex:none; margin-top:3px; }
.lettre-apercu{ background:var(--bg); border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--shadow-lg); padding:0; overflow:hidden; font-size:.75rem; }
.lettre-apercu .bandeau{ background:var(--brand); color:#fff; padding:16px 20px; font-weight:600; display:flex; justify-content:space-between; } .lettre-apercu .or{ height:3px; background:var(--accent); }
.lettre-apercu .corps{ padding:18px 20px; display:grid; grid-template-columns:1fr 92px; gap:14px; color:var(--text-2); line-height:1.5; } .lettre-apercu .corps b{ color:var(--text); display:block; font-size:.875rem; margin-bottom:6px; }
.lettre-apercu .qr{ width:92px; height:92px; border-radius:8px; background:var(--surface-2); display:grid; place-items:center; } .lettre-apercu .qr svg{ width:76px; height:76px; }
@media(max-width:900px){ .conformite .container{ grid-template-columns:1fr; } }

.tarif{ max-width:520px; margin:0 auto; }
.plan{ border:1px solid var(--line-2); border-radius:var(--r-xl); padding:34px; background:var(--pane); box-shadow:var(--shadow-lg), var(--liseré); position:relative; isolation:isolate; }
.plan::before{ content:''; position:absolute; inset:-40px -40px auto -40px; height:220px; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0%, rgba(46,92,135,.14), transparent 70%); }
.plan .prix{ font-family:var(--titre); }
.plan .badge{ position:absolute; top:-12px; left:32px; }
.plan .prix{ font-size:2rem; font-weight:600; letter-spacing:-.03em; margin:10px 0 4px; } .plan .prix small{ font-size:.875rem; color:var(--text-2); font-weight:400; letter-spacing:0; }
.plan ul{ margin:22px 0; display:flex; flex-direction:column; gap:10px; } .plan li{ display:flex; gap:10px; font-size:.9375rem; } .plan li svg{ width:16px; height:16px; color:var(--brand); flex:none; margin-top:3px; }
.plan .note{ font-size:.8125rem; color:var(--text-2); margin-top:12px; text-align:center; }

.faq{ max-width:720px; margin:0 auto; } .faq details{ border-top:1px solid var(--line); padding:18px 0; } .faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:500; font-size:1.0625rem; } .faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; color:var(--text-3); font-size:1.25rem; transition:transform var(--t-base) var(--ease); } .faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin-top:12px; color:var(--text-2); line-height:1.6; font-size:.9375rem; }

.final{ position:relative; background:#08090A; color:#F5F6F7; text-align:left; padding-block:var(--s-9); overflow:hidden; }
.final::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 78% at 50% 100%, rgba(46,92,135,.40), transparent 70%),
             radial-gradient(28% 50% at 50% 108%, rgba(239,176,51,.16), transparent 70%); }
.final::after{ content:''; position:absolute; inset:0; pointer-events:none; display:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:72px 72px; -webkit-mask-image:radial-gradient(60% 70% at 50% 100%, #000, transparent 76%); mask-image:radial-gradient(60% 70% at 50% 100%, #000, transparent 76%); }
.final .container{ position:relative; z-index:1; }
.final h2{ color:#fff; max-width:18ch; margin:0 auto 14px; } .final p{ color:#9AA1AC; margin-bottom:30px; }
.pied{ background:#0B0C0E; color:#8A8F98; border-top:1px solid rgba(255,255,255,.08); padding-block:32px; font-size:.8125rem; }
.pied .container{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; } .pied a{ color:#B7BCC5; } .pied a:hover{ color:#fff; } .pied nav{ display:flex; gap:18px; }

/* ── Rythme des fonds : bandes teintées et bandes blanches en alternance.
   Les cartes sont claires ; posées sur une bande teintée, elles se décollent. */
.bande{ background:var(--surface); }
.bande-debut{ border-top:1px solid var(--line); }
.bande-fin{ border-bottom:1px solid var(--line); }

/* Conformité : fond clair et halo marine, pour trancher avec les bandes teintées. */
.conformite::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 60% at 78% 42%, rgba(46,92,135,.10), transparent 68%); }
.conformite .container{ position:relative; }
.lettre-apercu{ box-shadow:var(--shadow-lg), var(--liseré); }

/* Icônes des cartes : légère matière au lieu d'un aplat. */
.bento .ic{ border:1px solid rgba(22,50,79,.10); background:linear-gradient(180deg, #EEF3F9, var(--brand-soft)); }

/* ── Bande sombre à figures ─────────────────────────────────────────────
   Un palier noir au milieu de la page : il coupe l'enfilade de bandes
   claires et donne au parcours le poids d'un chapitre. */
.sombre{ position:relative; background:#08090A; color:#F5F6F7; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); }
.sombre::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--fond, none) center/cover no-repeat; opacity:.85; transition:opacity 700ms var(--ease); }
.sombre::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, #08090A, rgba(8,9,10,0) 26%, rgba(8,9,10,0) 74%, #08090A); }
.sombre .container{ position:relative; z-index:1; }
.sombre h2{ color:#F5F6F7; } .sombre p{ color:#9CA3AE; } .sombre .eyebrow{ color:var(--accent); }
.sombre .etapes{ margin-top:56px; }
.sombre .etapes > div{ padding-top:0; border-top:0; }
/* L'étiquette FIG remplace le compteur et le filet de l'ancienne version. */
.sombre .etapes > div::after, .sombre .etapes > div::before{ display:none; content:none; }
.sombre .etapes h3{ color:#F5F6F7; margin-top:26px; }
.sombre .etapes h3::before{ content:''; display:block; width:38px; height:1px; background:var(--accent); margin-bottom:16px; }

/* Les figures : trait fin, faces presque noires, tout tient dans le dessin. */
.fig-bloc{ margin:0 0 4px; }
.fig-num{ display:block; font:400 .6875rem/1 var(--mono); letter-spacing:.16em; color:rgba(255,255,255,.52); margin-bottom:20px; }
/* Le cadre porte la lueur, l'image porte le tracé. */
.fig-cadre{ position:relative; display:block; width:100%; max-width:290px; }
.fig-cadre::before{ content:''; position:absolute; inset:-14% -8%; z-index:0; pointer-events:none;
  background:radial-gradient(52% 46% at 50% 52%, rgba(46,92,135,.34), transparent 70%); opacity:0; transition:opacity 900ms var(--ease); }
[data-reveal].in .fig-cadre::before{ opacity:1; animation:respire 6.5s var(--ease) 1.2s infinite; }
@keyframes respire{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.fig{ position:relative; z-index:1; display:block; width:100%; height:auto; }

/* La figure arrive doucement puis flotte. */
.fig-bloc{ opacity:0; transform:translateY(14px); transition:opacity 800ms var(--ease), transform 800ms var(--ease); }
[data-reveal].in .fig-bloc{ opacity:1; transform:none; }
[data-reveal].in .fig{ animation:flotte 7s var(--ease) 900ms infinite; }
@keyframes flotte{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@media(prefers-reduced-motion:reduce){
  .fig, .fig-bloc, .fig-cadre::before{ animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; }
}
@media(max-width:820px){ .fig-cadre{ max-width:230px; } .sombre .etapes h3{ margin-top:18px; } }

/* ── Conformité : la photo porte, la carte se pose dessus ────────────── */
.conformite-visuel{ position:relative; }
.conformite-visuel .photo{ display:block; width:100%; height:auto; border-radius:16px;
  box-shadow:0 2px 4px rgba(0,22,62,.06), 0 24px 56px -18px rgba(0,22,62,.34); }
.conformite-visuel .lettre-apercu{ position:absolute; left:-34px; bottom:-30px; width:64%;
  box-shadow:0 4px 8px rgba(0,22,62,.08), 0 28px 64px -16px rgba(0,22,62,.42), var(--liseré);
  transform:translateY(10px); opacity:0; transition:transform 900ms var(--ease) 260ms, opacity 900ms var(--ease) 260ms; }
.conformite-visuel.in .lettre-apercu{ transform:none; opacity:1; }
@media(max-width:900px){
  .conformite-visuel .lettre-apercu{ position:static; width:100%; margin-top:16px; transform:none; opacity:1; }
}

/* ── Le plan large ───────────────────────────────────────────────────── */
.bande-image{ position:relative; min-height:clamp(360px, 52vh, 560px); display:grid; align-items:center;
  background:#0A0B0D var(--fond, none) center/cover no-repeat; overflow:hidden;
  border-block:1px solid rgba(255,255,255,.07); }
/* La dérive se joue sur le compositeur au lieu de clouer le fond à la fenêtre :
   même sensation, sans repeindre la zone à chaque frame de défilement. */
@supports (animation-timeline: view()){
  @media(min-width:900px) and (prefers-reduced-motion:no-preference){
    .bande-image{ background-image:none; isolation:isolate; }
    .bande-image::after{ content:''; position:absolute; inset:-12% 0; z-index:-1;
      background:var(--fond, none) center/cover no-repeat;
      animation:derive linear both; animation-timeline:view(); }
    @keyframes derive{ from{ transform:translate3d(0,-6%,0); } to{ transform:translate3d(0,6%,0); } }
  }
}
.bande-image::before{ content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(6,7,9,.94) 6%, rgba(6,7,9,.72) 42%, rgba(6,7,9,.24) 78%); }
.bande-image .container{ position:relative; z-index:1; padding-block:64px; }
.bande-image .dit{ font-family:var(--titre); font-weight:700; color:#F5F6F7;
  font-size:clamp(1.625rem, 1.15rem + 1.9vw, 2.625rem); line-height:1.12; letter-spacing:-.034em; max-width:19ch; text-wrap:balance; }
.bande-image .dit-note{ display:block; margin-top:20px; color:#9CA3AE; font-size:.9375rem; max-width:44ch; }
@media(max-width:640px){ .bande-image .dit br{ display:none; } }

/* ── Clôture : la maquette en fond, le texte dans le vide de gauche ──── */
.final{ text-align:left; background:#08090A var(--fond, none) right center/cover no-repeat; }
.final::before{ background:linear-gradient(96deg, #08090A 4%, rgba(8,9,10,.86) 38%, rgba(8,9,10,.18) 82%); }
.final::after{ display:none; }
.final h2{ margin:0 0 14px; max-width:16ch; }
.final p{ max-width:40ch; }
@media(max-width:820px){
  .final{ background-position:72% center; text-align:center; }
  .final::before{ background:linear-gradient(180deg, rgba(8,9,10,.78), rgba(8,9,10,.94)); }
  .final h2, .final p{ margin-inline:auto; }
}

/* ── Reprises d'audit ────────────────────────────────────────────────── */

/* Lien d'évitement : index.php ne passe pas par tete.php et l'avait perdu. */
.eviter{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--brand); color:#fff;
  padding:12px 18px; border-radius:0 0 var(--r-md) 0; font-size:.875rem; }
.eviter:focus{ left:0; }

/* Le strict nécessaire de maplibre-gl.css : la carte n'a aucun contrôle, aucune bulle. */
.maplibregl-map{ position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; }
.maplibregl-canvas-container, .maplibregl-canvas{ position:absolute; top:0; left:0; width:100%; height:100%; }
.maplibregl-control-container{ display:none; }

/* Attribution IGN : la licence des tuiles l'impose, le contrôle natif est désactivé. */
.scene .chrome .source{ margin-left:2px; opacity:.62; font-size:.6875rem; }

/* Étoiles de fiabilité : le jeu SVG maison plutôt que des glyphes de police système. */
.scene .fiche .etoiles{ display:inline-flex; gap:1px; vertical-align:-2px; }
.scene .fiche .etoiles svg{ width:11px; height:11px; }
.scene .fiche .etoiles .pleine{ fill:var(--accent); color:var(--accent); }
.scene .fiche .etoiles .vide{ color:rgba(255,255,255,.28); }

/* La preuve qui manquait dans la carte « le propriétaire vient à vous ». */
.consentement{ display:flex; gap:10px; align-items:flex-start; padding:12px; margin-top:auto;
  border-radius:var(--r-md); background:var(--bg); border:1px solid var(--line-2); }
.consentement .coche{ flex:none; width:20px; height:20px; border-radius:var(--r-sm);
  display:grid; place-items:center; background:#E6F6EC; color:#0F6E36; }
.consentement .coche svg{ width:12px; height:12px; }
.consentement b{ display:block; font-size:.8125rem; color:var(--text); font-weight:500; }
.consentement small{ font-size:.6875rem; color:var(--text-3); font-family:var(--mono); }

/* Les sections hors écran ne sont plus rendues, donc leurs animations se suspendent. */
.section, .bande-image, .final{ content-visibility:auto; contain-intrinsic-size:auto 700px; }
.heros{ content-visibility:visible; }

/* FAQ : 720 px cliquables sans le moindre retour au survol, et un « + » à 2,36:1. */
.faq details{ border-radius:var(--r-md); transition:background var(--t-fast) var(--ease); }
.faq summary{ padding-inline:14px; margin-inline:-14px; }
.faq details:hover{ background:color-mix(in srgb, var(--bg) 65%, transparent); }
.faq summary:hover{ color:var(--brand-2); }
.faq summary::after{ color:var(--text-2); transition:transform var(--t-base) var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ max-width:66ch; }
@media(prefers-reduced-motion:no-preference){
  .faq details{ interpolate-size:allow-keywords; }
  .faq details::details-content{ block-size:0; overflow:hidden; opacity:0;
    transition:block-size var(--t-base) var(--ease), opacity var(--t-base) var(--ease),
               content-visibility var(--t-base) allow-discrete; }
  .faq details[open]::details-content{ block-size:auto; opacity:1; }
}

/* Barre de progression de lecture, sur transform, sans une ligne de JS. */
.progression{ position:fixed; top:var(--nav-h); left:0; height:2px; width:100%; z-index:60; pointer-events:none;
  background:linear-gradient(90deg, var(--accent), var(--brand-2)); transform:scaleX(0); transform-origin:0 50%; }
@supports (animation-timeline: scroll()){
  .progression{ animation:barre linear; animation-timeline:scroll(root block); }
  @keyframes barre{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
}

/* Le geste signature : la maquette est posée à plat puis se redresse au défilement. */
@supports (animation-timeline: view()){
  @media(min-width:900px) and (prefers-reduced-motion:no-preference){
    .heros{ perspective:1800px; perspective-origin:50% 0; }
    .capture{ transform-origin:50% 0; will-change:transform;
      animation:redresse linear both; animation-timeline:view(); animation-range:entry 0% cover 38%; }
    @keyframes redresse{ from{ transform:rotateX(13deg) scale(.94); opacity:.72; } to{ transform:none; opacity:1; } }
  }
}

/* Les cartes s'éclairent du côté où se trouve la souris. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .bento .card{ isolation:isolate; }
  .bento .card > *{ position:relative; z-index:1; }
  .bento .card::after{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
    transition:opacity var(--t-base) var(--ease);
    background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(46,92,135,.14), transparent 62%); }
  .bento .card:hover::after{ opacity:1; }
  /* L'aimant se compose avec le décollement au lieu de l'écraser. */
  .btn[data-aimant]{ --ax:0px; --ay:0px; --lift:0px; transform:translate3d(var(--ax), calc(var(--ay) + var(--lift)), 0); }
  .btn[data-aimant]:hover{ --lift:-2px; }
}

/* Un h2 utilitaire ne doit pas peser autant qu'un h2 de conclusion. */
#faq h2{ font-size:clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem); }
.final h2{ font-size:clamp(2.375rem, 1.9rem + 1.9vw, 3.25rem); letter-spacing:-.038em; }

/* ═══════════════════════════════════════════════════════════════════════
   LE SOMBRE COMME PONCTUATION
   Mesure faite sur treize sites comparables : le sombre intégral n'existe que
   chez les outils vendus à des développeurs. Les logiciels immobiliers et les
   SaaS B2B français les mieux faits sont entre 25 et 40 % de hauteur sombre,
   posés sur un fond clair. Quatre sections passent donc en sombre — héros,
   chapitre du parcours, plan large, clôture — et le reste reste lisible.
   ═══════════════════════════════════════════════════════════════════════ */

/* Ces quatre sections portent data-theme="dark" : les tokens font le travail,
   plus aucune couleur n'est réécrite à la main. */
[data-theme="dark"]{ background:var(--bg); color:var(--text); }
.sombre{ background:var(--bg); }

/* Le pied prolonge la clôture sombre au lieu de faire une couture. */
.pied{ background:#0B0C0E; border-top:1px solid rgba(255,255,255,.08); }

/* Le lien d'évitement doit rester visible sur le fond clair de la page. */
.eviter{ background:var(--brand); color:#fff; }

/* ── Le registre technique ───────────────────────────────────────────────
   Index de section en chiffres monospace, étiquettes de carte à plat plutôt
   qu'icônes enfermées dans un carré arrondi, et deux rails verticaux qui
   rendent la grille visible sur toute la hauteur. */

.eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.eyebrow i{ font-style:normal; font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em;
  color:var(--text-3); padding-right:10px; border-right:1px solid var(--line-2); }

/* L'icône sort de sa boîte et devient une étiquette de rubrique. */
.bento .ic{ width:auto; height:auto; border:0 !important; background:none !important; border-radius:0;
  box-shadow:none !important; display:flex; align-items:center; gap:9px; padding:0; margin-bottom:24px;
  font:500 .6875rem/1 var(--font); letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
/* Le filet de rubrique file jusqu'au bord de la carte et s'éteint. */
.bento .ic::after{ content:''; flex:1; height:1px; margin-left:2px;
  background:linear-gradient(90deg, var(--line-2), transparent 88%); }
.bento .ic svg{ width:15px; height:15px; color:var(--text-2); }
.bento .card.vedette .ic{ color:var(--accent); } .bento .card.vedette .ic svg{ color:var(--accent); }

/* Les rails verticaux ont été retirés : ils ajoutaient du trait sans rien porter. */
.section > .container, .conformite > .container{ position:relative; }

/* Le titre de section s'aligne à gauche partout : le centrage systématique
   est ce qui donnait l'impression d'un gabarit. */
.section-tete{ max-width:none; }
.section-tete h2{ max-width:20ch; }
.section-tete p{ max-width:56ch; }

/* ── Testez votre secteur ────────────────────────────────────────────────
   Le seul endroit de la page où le visiteur agit avant de s'inscrire.
   Il doit donc être le plus lisible et le plus rapide de tous. */
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.secteur{ position:relative; }
.secteur::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 56% at 20% 0%, var(--brand-soft), transparent 72%); opacity:.7; }
.secteur-form{ display:flex; gap:10px; margin-top:32px; max-width:560px; }
.secteur-form input{ flex:1; min-width:0; height:52px; padding:0 18px; border-radius:var(--r-md);
  border:1px solid var(--line-2); background:var(--bg); color:var(--text); box-shadow:var(--shadow-sm);
  font-family:var(--titre); font-size:1.0625rem; letter-spacing:-.015em;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.secteur-form input::placeholder{ color:var(--text-3); font-weight:400; }
.secteur-form input:hover{ border-color:var(--text-3); }
.secteur-form input:focus{ outline:2px solid var(--brand-2); outline-offset:2px; border-color:var(--brand-2); }
.secteur-form .btn{ height:52px; padding:0 22px; flex:none; }
.secteur-aide{ margin-top:12px; font-size:.8125rem; color:var(--text-3); }

.secteur-res{ display:none; margin-top:28px; }
.secteur-res.on{ display:block; animation:monte 520ms var(--ease) both; }
.secteur-res.charge{ opacity:.5; }
@keyframes monte{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.secteur-carte{ position:relative; padding:28px 30px; border-radius:var(--r-lg); border:1px solid var(--line-2);
  background:var(--pane); box-shadow:var(--shadow-lg), var(--liseré); }
.secteur-cle{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.secteur-cle .chiffre{ font-size:clamp(2.75rem, 2rem + 2.6vw, 4rem); line-height:.95; color:var(--brand); }
.secteur-cle span{ font-size:1.0625rem; color:var(--text-2); max-width:28ch; }
.secteur-cle span b{ color:var(--text); font-weight:600; }
.secteur-grille{ display:grid; grid-template-columns:repeat(auto-fit, minmax(148px, 1fr)); gap:1px; margin:26px 0 24px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.secteur-grille div{ background:var(--bg); padding:14px 16px; }
.secteur-grille small{ display:block; font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:7px; }
.secteur-grille b{ display:block; font-family:var(--titre); font-size:1.375rem; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.secteur-grille em{ display:block; font-style:normal; font-size:.75rem; color:var(--text-3); margin-top:5px; }
.secteur-note{ margin-top:12px; font-size:.8125rem; color:var(--text-3); }
.secteur-vide{ color:var(--text-2); font-size:.9375rem; line-height:1.55; }
.secteur-autres{ margin-top:16px; font-size:.8125rem; color:var(--text-3); }
.secteur-autres button{ height:28px; padding:0 11px; margin:0 4px 4px 0; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:transparent; color:var(--text-2); font-size:.8125rem; cursor:pointer;
  transition:color var(--t-fast), border-color var(--t-fast); }
.secteur-autres button:hover{ color:var(--text); border-color:var(--text-3); }
@media(max-width:640px){
  .secteur-form{ flex-direction:column; }
  .secteur-form .btn{ width:100%; }
  .secteur-carte{ padding:22px 20px; }
}

/* Repli de la scène : la densité réelle du secteur, en attendant ou à la place
   de la carte vivante. Chaque point est un DPE existant, à sa vraie position. */
.scene .semis{ position:absolute; inset:0; z-index:0; }
.scene .semis i{ position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
  background:var(--c); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent), 0 2px 6px rgba(0,0,0,.6);
  opacity:0; animation:pose 520ms var(--ease) forwards; animation-delay:calc(var(--n, 0) * 18ms); }
.scene .semis i:nth-child(3n){ animation-delay:140ms; } .scene .semis i:nth-child(3n+1){ animation-delay:280ms; }
@keyframes pose{ from{ opacity:0; transform:translateY(-6px) scale(.6); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){ .scene .semis i{ opacity:1; animation:none; } }

/* ── Le fondateur ─────────────────────────────────────────────────────────
   Une photo et trois paragraphes à la première personne, avant le tarif. Le
   portrait est détouré sur fond blanc : on le pose donc sur une nappe marine
   très douce plutôt que sur une carte, sinon on voit le rectangle. */
.fondateur{ padding-block:var(--s-9); }
.fond-grille{ display:grid; grid-template-columns:minmax(0,320px) 1fr; gap:var(--s-7); align-items:center; }
.fond-photo{ position:relative; isolation:isolate; }
.fond-photo::before{
  content:''; position:absolute; inset:auto 0 0 0; height:88%; z-index:-1; border-radius:var(--r-xl);
  background:linear-gradient(180deg, var(--brand-soft) 0%, rgba(233,238,245,0) 100%);
}
.fond-photo img{ width:100%; height:auto; display:block; border-radius:var(--r-xl); }
.fond-mot h2{ font-size:var(--h2-size); line-height:var(--h2-lh); letter-spacing:var(--h2-track); }
.fond-mot p{ color:var(--text-2); font-size:1rem; line-height:1.65; margin-top:14px; max-width:56ch; }
.fond-mot .lead{ max-width:56ch; }
.fond-signature{ margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid var(--line); }
.fond-signature b{ display:block; font-family:var(--titre); font-size:1.0625rem; font-weight:700; letter-spacing:-.02em; }
.fond-signature span{ display:block; font-size:.8125rem; color:var(--text-3); margin-top:3px; }
@media(max-width:820px){
  .fond-grille{ grid-template-columns:1fr; gap:var(--s-5); }
  .fond-photo{ max-width:260px; }
}