/* Leads Factory — site vitrine + landing. Brief : /docker/leads-factory/DESIGN_BRIEF.md
   Palette 5 valeurs : graphite, chartreuse (accent, CTA + blocs-titre seulement), blanc, papier, gris.
   2 polices : Fredoka (titres) + Figtree (texte). Motion : cubic-bezier(.2,.8,.2,1), jamais ease-in-out. */
:root{
  --graphite:#16191C;--graphite-2:#1F2429;--graphite-3:#2B3138;
  --lime:#CDFF00;--lime-press:#B8E600;
  --blanc:#FFFFFF;--papier:#EEF0EA;--trait:#E1E4DD;--trait-sombre:rgba(255,255,255,.13);
  --encre:#16191C;--gris:#5C6571;--gris-sombre:#AEB4BD;
  --ease:cubic-bezier(.2,.8,.2,1);
  --r:16px;--r-photo:24px;--r-ui:12px;
  --w:1200px;--w-text:720px;
  --pad:clamp(20px,4vw,40px);
  --sec:clamp(64px,9vw,128px);
  --toiture:#E11D48;--facade:#F97316;--isolation:#F59E0B;--panneaux_pv:#5B9E12;--pac:#0891B2;--borne_recharge:#3B82F6;--mise_conformite:#8B5CF6;--salle_de_bain:#14B8A6;--cuisine:#EC4899;--autre:#64748B;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blanc);color:var(--encre);font-family:'Figtree','Segoe UI',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
figure{margin:0}
a{color:inherit}
p{margin:0 0 1em;text-wrap:pretty}
h1,h2,h3,h4{font-family:'Fredoka','Figtree',sans-serif;font-weight:600;line-height:1.05;margin:0 0 .5em;text-wrap:balance;color:inherit}
h1{font-size:clamp(2.9rem,7.2vw,6.25rem);letter-spacing:-.022em;line-height:1}
h2{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.016em;line-height:1.06}
h3{font-size:clamp(1.35rem,1.8vw,1.6rem);line-height:1.2;letter-spacing:-.005em}
h4{font-size:1.15rem;line-height:1.3}
strong,b{font-weight:600}
.small{font-size:14px}
.muted{color:var(--gris)}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.band-dark :focus-visible{outline-color:var(--lime)}
::selection{background:var(--lime);color:var(--graphite)}

/* ── Conteneurs & grille ── */
.wrap{max-width:var(--w);margin:0 auto;padding-inline:var(--pad)}
.wrap-text{max-width:var(--w-text)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,40px);align-items:center}
.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:1/-1}
.start{align-items:start}
.section{padding-block:var(--sec)}
.section-tight{padding-block:calc(var(--sec) * .6)}
.band-dark{background:var(--graphite);color:var(--blanc)}
/* Sur fond sombre, tout texte secondaire passe au gris clair… */
.band-dark .muted,.band-dark .lead,.band-dark .sub,.band-dark p,.band-dark li,.band-dark .frame-cap,.band-dark .manifeste p,.band-dark .critere p,.band-dark .tile p,.band-dark .etape p{color:var(--gris-sombre)}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4,.band-dark b,.band-dark strong{color:var(--blanc)}
.band-dark .points li{color:var(--blanc)}
/* …sauf à l'intérieur des surfaces claires posées dessus (fiches, formulaire, cartes). */
.band-dark .frame,.band-dark .carte,.band-dark .form,.band-dark .merci,.band-dark .espace,.band-dark .agenda{color:var(--encre)}
.band-dark .frame p,.band-dark .frame li,.band-dark .frame .muted,.band-dark .carte .muted,.band-dark .carte p,.band-dark .form .muted,.band-dark .form p,.band-dark .form li,.band-dark .merci p,.band-dark .espace .muted{color:var(--gris)}
.band-dark .frame h1,.band-dark .frame h2,.band-dark .frame h3,.band-dark .frame h4,.band-dark .frame b,.band-dark .merci h3,.band-dark .form b,.band-dark .carte b,.band-dark .espace-main h4{color:var(--graphite)}
.band-dark .espace-side a,.band-dark .espace-side span{color:var(--gris-sombre)}
.band-dark .espace-side a.on,.band-dark .espace-side span.on{color:var(--graphite)}
.band-dark .manifeste .n{color:var(--gris-sombre)}
.band-dark .manifeste{border-color:var(--trait-sombre)}
.band-dark .manifeste>div{border-color:var(--trait-sombre)}
.band-paper{background:var(--papier)}
.band-light{background:var(--blanc)}
.hr{height:1px;background:var(--trait);border:0;margin:0}
.band-dark .hr{background:var(--trait-sombre)}

/* ── Étiquettes ── */
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);margin:0 0 22px}
.kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--lime);border:2px solid var(--graphite);flex:none}
.band-dark .kicker{color:var(--gris-sombre)}
.band-dark .kicker::before{border-color:var(--blanc)}
.label{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);font-variant-numeric:tabular-nums}
.lead{font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.5;color:var(--gris);max-width:36ch}
.sub{font-size:1.2rem;color:var(--gris);max-width:60ch}
.band-dark .sub{color:var(--gris-sombre)}

/* ── La bulle (géométrie du logo) — un mot par page ── */
.bulle{display:inline-block;position:relative;background:var(--lime);color:var(--graphite);padding:.02em .3em .1em;border-radius:.2em;white-space:nowrap;margin-bottom:.12em}
.bulle::after{content:"";position:absolute;left:.62em;bottom:-.32em;width:.5em;height:.42em;background:var(--lime);clip-path:polygon(0 0,100% 0,18% 100%)}
.bulle-sm{font-family:'Fredoka',sans-serif;font-weight:600}

/* ── Boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:999px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:17px;line-height:1;text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .45s var(--ease),background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:18px 32px;font-size:19px}
.btn-sm{padding:10px 18px;font-size:15px}
.btn-lime{background:var(--lime);color:var(--graphite)!important}
.btn-lime:hover{background:var(--lime-press)}
.btn-graphite{background:var(--graphite);color:var(--blanc)!important}
.btn-graphite:hover{background:var(--graphite-3)}
.btn-ghost{border-color:var(--graphite);color:var(--graphite)!important;background:transparent}
.btn-ghost:hover{background:var(--graphite);color:var(--blanc)!important}
.band-dark .btn-ghost,.btn-ghost-dark{border-color:rgba(255,255,255,.35);color:var(--blanc)!important;background:transparent}
.band-dark .btn-ghost:hover,.btn-ghost-dark:hover{border-color:var(--blanc);background:var(--blanc);color:var(--graphite)!important}
.btn:disabled{opacity:.55;cursor:wait;transform:none}
.btn .arr{width:18px;height:18px;transition:transform .45s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.link{font-weight:600;text-decoration:none;border-bottom:2px solid var(--lime);padding-bottom:1px}
.link:hover{border-bottom-color:currentColor}

/* ── En-tête ── */
.top{position:sticky;top:0;z-index:50;background:var(--graphite);color:var(--blanc);border-bottom:1px solid var(--trait-sombre)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:6px}
.nav a{text-decoration:none;color:var(--gris-sombre);font-weight:500;font-size:15.5px;padding:9px 14px;border-radius:999px;transition:color .25s var(--ease),background .25s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--blanc);background:rgba(255,255,255,.07)}
.nav a[aria-current="page"]{color:var(--blanc)}
.nav .btn{margin-left:8px;color:var(--graphite)}
.nav .sep{width:1px;height:22px;background:var(--trait-sombre);margin:0 8px}
.burger{display:none;background:transparent;border:0;color:var(--blanc);width:44px;height:44px;border-radius:12px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:22px;height:2px;background:currentColor;position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.burger span::before{top:-7px}.burger span::after{top:7px}
.nav-open .burger span{background:transparent}
.nav-open .burger span::before{top:0;transform:rotate(45deg)}.nav-open .burger span::after{top:0;transform:rotate(-45deg)}

/* ── Hero ── */
.hero{padding-block:clamp(56px,7vw,104px) clamp(48px,6vw,88px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto -20% -40% auto;width:60vw;max-width:900px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(205,255,0,.13),transparent 70%);pointer-events:none}
.hero h1{margin-bottom:.35em}
.hero .lead{margin-bottom:30px}
.hero-visual{position:relative}
.hero-visual .photo{aspect-ratio:4/5}
.hero-visual .frame{position:absolute;left:-12%;bottom:-8%;width:min(390px,88%);}
.points{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px;font-weight:500}
.points li{display:flex;align-items:flex-start;gap:12px;line-height:1.45}
.points li::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--lime);border:2px solid var(--graphite);flex:none;margin-top:.42em}
.band-dark .points li::before{border-color:var(--blanc)}
.hero-page{padding-block:clamp(56px,7vw,96px)}
.hero-page h1{font-size:clamp(2.5rem,5.6vw,4.75rem)}

/* ── Photos ── */
.photo{border-radius:var(--r-photo);overflow:hidden;background:var(--graphite-2);position:relative;isolation:isolate}
.photo img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 1.2s var(--ease)}
.photo:hover img{transform:scale(1.06)}
.photo-tag{position:absolute;left:14px;bottom:14px;background:rgba(22,25,28,.82);color:var(--blanc);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:999px;backdrop-filter:blur(6px)}
.photo-wide{aspect-ratio:16/9}.photo-tall{aspect-ratio:4/5}.photo-square{aspect-ratio:1}
.photo-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ── Cadre UI (Attio) ── */
.frame{background:var(--blanc);color:var(--encre);border:1px solid var(--trait);border-radius:var(--r-ui);box-shadow:0 2px 3px -2px rgba(28,40,64,.12),0 8px 24px -12px rgba(28,40,64,.18);overflow:hidden}
.frame-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--trait);background:#FAFBF8}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:var(--trait);display:block}
.frame-bar span{margin-left:auto;font-size:12px;color:var(--gris);font-weight:500}
.fiche{padding:18px 20px 16px}
.fiche-head{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;align-items:center}
.tag{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid;line-height:1.3;white-space:nowrap}
.tag[data-t]{color:var(--tc);background:color-mix(in srgb,var(--tc) 10%,white);border-color:color-mix(in srgb,var(--tc) 40%,white)}
.tag[data-t="toiture"]{--tc:var(--toiture)}.tag[data-t="facade"]{--tc:var(--facade)}.tag[data-t="isolation"]{--tc:var(--isolation)}.tag[data-t="panneaux_pv"]{--tc:var(--panneaux_pv)}.tag[data-t="pac"]{--tc:var(--pac)}.tag[data-t="borne_recharge"]{--tc:var(--borne_recharge)}.tag[data-t="mise_conformite"]{--tc:var(--mise_conformite)}.tag[data-t="salle_de_bain"]{--tc:var(--salle_de_bain)}.tag[data-t="cuisine"]{--tc:var(--cuisine)}.tag[data-t="autre"]{--tc:var(--autre)}
.tag-lime{background:var(--lime);color:var(--graphite);border-color:var(--lime)}
.tag-neutre{background:var(--papier);color:var(--gris);border-color:var(--trait)}
.fiche-row{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--trait);font-size:15px;line-height:1.45}
.fiche-row .label{padding-top:2px;hyphens:none;overflow-wrap:normal}
.fiche-row.ok{grid-template-columns:96px 1fr}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.checks li{display:flex;gap:8px;align-items:flex-start}
.checks li::before{content:"";width:16px;height:16px;flex:none;margin-top:3px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%2316191C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.fiche-foot{display:flex;gap:8px;justify-content:flex-end;padding-top:12px;margin-top:6px;border-top:1px solid var(--trait)}
.chip-ui{font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px;border:1.5px solid var(--trait);color:var(--encre);background:var(--blanc)}
.chip-ui.on{background:var(--graphite);color:var(--blanc);border-color:var(--graphite)}
.frame-cap{font-size:13px;color:var(--gris);margin-top:12px}
.band-dark .frame-cap{color:var(--gris-sombre)}

/* Espace acheteur — réplique code-native du portail (données fictives) */
.espace{display:grid;grid-template-columns:168px 1fr;min-height:360px}
.espace-side{background:var(--graphite);color:var(--blanc);padding:18px 14px;display:flex;flex-direction:column;gap:6px}
.espace-side img{height:34px;width:auto;margin:4px 0 16px 6px}
.espace-side a,.espace-side span{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 11px;border-radius:10px;font-size:13px;text-decoration:none;color:var(--gris-sombre)}
.espace-side a.on,.espace-side span.on{background:var(--lime);color:var(--graphite);font-weight:600}
.espace-side a b,.espace-side span b{background:var(--lime);color:var(--graphite);font-size:11px;font-weight:700;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.espace-side a.on b,.espace-side span.on b{background:var(--graphite);color:var(--lime)}
.espace-main{padding:16px;min-width:0;background:#F7F8F5;display:grid;gap:14px;align-content:start}
.espace-main h4{font-size:22px;margin:0}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpi{background:var(--blanc);border:1px solid var(--trait);border-radius:12px;padding:10px 12px;min-width:0}
.kpi .label{font-size:12px}
.kpi b{display:block;font-family:'Fredoka',sans-serif;font-size:24px;line-height:1.1;margin-top:4px}
.rowc{background:var(--blanc);border:1px solid var(--trait);border-radius:12px;padding:11px 12px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;font-size:13px;min-width:0}
.rowc small{font-size:12px}
.rowc>span:first-child{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.rowc .tag{font-size:12px;padding:3px 8px}
.rowc small{color:var(--gris)}

/* ── La chaîne (signature) ── */
.chaine{padding-block:0 clamp(40px,5vw,72px);overflow:hidden;position:relative}
.tapis-zone{position:relative;padding-bottom:6px}
.postes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:26px;position:relative}
.postes::before{content:"";position:absolute;left:5%;right:5%;top:15px;height:2px;background:var(--trait-sombre)}
.poste{position:relative;text-align:center;padding-top:44px;font-size:14px;color:var(--gris-sombre);font-weight:500}
.poste::before{content:attr(data-n);position:absolute;left:50%;top:0;transform:translateX(-50%);width:32px;height:32px;border-radius:50%;background:var(--graphite);border:2px solid var(--trait-sombre);color:var(--blanc);font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center}
.poste.actif::before{background:var(--lime);color:var(--graphite);border-color:var(--lime)}
.poste.actif{color:var(--blanc);font-weight:600}
.tapis{display:flex;gap:14px;width:max-content;animation:tapis 46s linear infinite;will-change:transform}
.chaine:hover .tapis{animation-play-state:paused}
@keyframes tapis{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lot{display:flex;gap:14px;flex:none}
.carte{width:264px;flex:none;align-self:stretch;background:var(--blanc);color:var(--encre);border:1px solid var(--trait);border-radius:var(--r-ui);padding:14px 16px;display:grid;gap:8px;font-size:14px;line-height:1.35}
.carte .etat{font-size:12px}
.carte .who{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:600}
.carte .who small{color:var(--gris);font-weight:500;font-size:12px}
.carte .etat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--gris)}
.carte .etat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--trait)}
.carte .etat[data-e="2"]::before{background:var(--gris)}
.carte .etat[data-e="3"]::before{background:var(--lime);border:1px solid var(--graphite)}
.carte .etat[data-e="4"]{color:var(--graphite)}
.carte .etat[data-e="4"]::before{background:var(--graphite)}
.carte .etat[data-e="3"]{color:var(--graphite)}
.fondu-l,.fondu-r{position:absolute;top:0;bottom:0;width:12%;pointer-events:none;z-index:2}
.fondu-l{left:0;background:linear-gradient(90deg,var(--graphite),transparent)}
.fondu-r{right:0;background:linear-gradient(270deg,var(--graphite),transparent)}

/* ── Deux formules ── */
.formules{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,28px);margin-top:44px}
.formule{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);padding:clamp(24px,3vw,40px);display:grid;gap:14px;align-content:start;position:relative}
.formule h3{font-size:clamp(1.7rem,2.6vw,2.4rem);margin:0}
.formule .label{margin-bottom:4px}
.formule ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.formule li{padding-left:26px;position:relative;line-height:1.45}
.formule li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:50%;background:var(--lime);border:2px solid var(--graphite)}
.formule-mini{margin-top:auto;padding-top:8px}
.agenda{border:1px solid var(--trait);border-radius:var(--r-ui);overflow:hidden;background:var(--blanc);font-size:12.5px}
.agenda-h{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--trait);background:#FAFBF8}
.agenda-h span{padding:8px 0;text-align:center;font-weight:600;color:var(--gris);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.agenda-b{display:grid;grid-template-columns:repeat(5,1fr);height:110px}
.agenda-b span{border-right:1px solid var(--trait);position:relative}
.agenda-b span:last-child{border-right:0}
.agenda-b i{position:absolute;left:5px;right:5px;border-radius:7px;background:var(--papier);border:1px solid var(--trait)}
.agenda-b i.rdv{background:var(--lime);border-color:var(--graphite);font-style:normal;font-weight:600;font-size:11px;padding:5px 7px;color:var(--graphite);line-height:1.2}
.impartial{margin-top:28px;padding:20px 24px;border-left:3px solid var(--lime);background:var(--blanc);border-radius:0 var(--r-ui) var(--r-ui) 0;color:var(--gris);max-width:820px}

/* ── Étapes ── */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.5vw,32px);margin-top:48px;counter-reset:e}
.etape{position:relative;padding-top:64px}
.etape::before{counter-increment:e;content:counter(e);position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;background:var(--lime);color:var(--graphite);font-family:'Fredoka',sans-serif;font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center}
.etape::after{content:"";position:absolute;left:58px;right:-12px;top:23px;height:2px;background:var(--trait-sombre)}
.etape:last-child::after{display:none}
.etape h3{font-size:1.3rem;margin-bottom:.4em}
.etape p{color:var(--gris-sombre);margin:0;font-size:15.5px}
.band-light .etape::after,.band-paper .etape::after{background:var(--trait)}
.band-light .etape p,.band-paper .etape p{color:var(--gris)}

/* ── Manifeste / engagements ── */
.manifeste{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--trait);margin-top:40px}
.manifeste > div{padding:32px 32px 32px 0;border-bottom:1px solid var(--trait);display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start}
.manifeste > div:nth-child(odd){border-right:1px solid var(--trait);padding-right:40px}
.manifeste > div:nth-child(even){padding-left:40px}
.manifeste .n{font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;color:var(--gris);padding-top:9px;font-variant-numeric:tabular-nums}
.manifeste h3{font-size:1.75rem;margin-bottom:.3em}
.manifeste p{margin:0;color:var(--gris)}

/* ── Métiers ── */
.metiers{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:36px}
.metier{display:flex;align-items:center;gap:10px;padding:16px 18px;border:1px solid var(--trait);border-radius:var(--r-ui);background:var(--blanc);font-weight:600;font-size:15.5px;line-height:1.25}
.metier i{width:12px;height:12px;border-radius:50%;background:var(--tc,var(--autre));flex:none}
.metier[data-t="toiture"]{--tc:var(--toiture)}.metier[data-t="facade"]{--tc:var(--facade)}.metier[data-t="isolation"]{--tc:var(--isolation)}.metier[data-t="panneaux_pv"]{--tc:var(--panneaux_pv)}.metier[data-t="pac"]{--tc:var(--pac)}.metier[data-t="borne_recharge"]{--tc:var(--borne_recharge)}.metier[data-t="mise_conformite"]{--tc:var(--mise_conformite)}.metier[data-t="salle_de_bain"]{--tc:var(--salle_de_bain)}.metier[data-t="cuisine"]{--tc:var(--cuisine)}.metier[data-t="autre"]{--tc:var(--autre)}
.provinces{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.provinces span{padding:9px 16px;border-radius:999px;background:var(--graphite);color:var(--blanc);font-weight:600;font-size:14.5px}
.band-dark .provinces span{background:var(--blanc);color:var(--graphite)}

/* ── Critères de qualification ── */
.criteres{display:grid;gap:0;margin-top:36px;border-top:1px solid var(--trait)}
.critere{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--trait);align-items:start}
.critere .n{font-family:'Fredoka',sans-serif;font-weight:600;font-size:2rem;line-height:1;color:var(--graphite);padding-top:2px}
.critere h3{margin-bottom:.25em}
.critere p{margin:0;color:var(--gris)}
.band-dark .criteres,.band-dark .critere{border-color:var(--trait-sombre)}
.band-dark .critere .n{color:var(--lime)}
.band-dark .critere p{color:var(--gris-sombre)}

/* ── FAQ ── */
.faq{display:grid;gap:0;margin-top:0;border-top:1px solid var(--trait)}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.25rem;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--graphite);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='%2316191C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .45s var(--ease),background-color .25s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--lime)}
.faq details p{margin:0 0 22px;color:var(--gris);max-width:70ch}

/* ── Formulaire ── */
.form{background:var(--blanc);color:var(--encre);border:1px solid var(--trait);border-radius:var(--r);padding:clamp(22px,3vw,34px);display:grid;gap:16px}
.form label{display:grid;gap:6px;font-size:14px;font-weight:600}
.form label .muted{color:var(--gris);font-weight:500}
.form input,.form textarea,.form select{font:inherit;font-weight:400;font-size:16px;padding:13px 14px;border:1.5px solid var(--trait);border-radius:10px;background:var(--blanc);color:var(--encre);width:100%;transition:border-color .2s,box-shadow .2s}
.form input::placeholder,.form textarea::placeholder{color:#A3AAB3}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--graphite);box-shadow:0 0 0 4px rgba(205,255,0,.55)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.span2{grid-column:1/-1}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-size:14px;font-weight:600;margin-bottom:8px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-block}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.chip span{display:inline-block;padding:9px 14px;border-radius:999px;border:1.5px solid var(--trait);font-weight:500;font-size:14px;background:var(--blanc);transition:background .2s,border-color .2s;cursor:pointer}
.chip input:checked+span{background:var(--lime);border-color:var(--graphite);color:var(--graphite);font-weight:600}
.chip input:focus-visible+span{box-shadow:0 0 0 3px rgba(22,25,28,.3)}
.consent{display:flex!important;flex-direction:row!important;gap:10px!important;align-items:flex-start;font-weight:400!important;font-size:13.5px!important;color:var(--gris)!important;line-height:1.45}
.consent input{width:22px;height:22px;margin-top:0;flex:none;accent-color:var(--graphite)}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.err{color:#B3261E;font-size:14px;margin:0;font-weight:500}
.form-note{font-size:13px;color:var(--gris);margin:0}
.merci{background:var(--blanc);color:var(--encre);border:1px solid var(--trait);border-radius:var(--r);padding:clamp(28px,4vw,44px);text-align:left;display:grid;gap:8px}
.merci .bulle{font-family:'Fredoka',sans-serif;font-weight:600;font-size:2.2rem;justify-self:start;margin-bottom:14px}
.merci h3{margin:0 0 .2em}
.merci .num{font-family:'Fredoka',sans-serif;font-weight:600;font-variant-numeric:tabular-nums}

/* ── CTA final ── */
.cta-final{position:relative;overflow:hidden}
.cta-final h2{font-size:clamp(2.4rem,5.4vw,4.6rem);max-width:14ch}
.cta-final .grid{align-items:end}

/* ── Pied ── */
.foot{background:#0F1113;color:var(--gris-sombre);padding:clamp(48px,6vw,72px) 0 32px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid var(--trait-sombre)}
.foot img{height:44px;width:auto;margin-bottom:16px}
.foot h4{color:var(--blanc);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-family:'Figtree',sans-serif;font-weight:600;margin:0 0 14px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.foot a{color:var(--gris-sombre);text-decoration:none}
.foot a:hover{color:var(--blanc)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;font-size:13px}
.foot-bottom a{text-decoration:underline;text-underline-offset:3px}

/* ── Révélations ── */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="pop"]{transform:translateY(16px) scale(.97)}
.hero [data-reveal]{transition-duration:.9s}

/* ── Divers ── */
.lf-pages{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.lf-page{display:grid;gap:8px;padding:26px;border:1px solid var(--trait);border-radius:var(--r);text-decoration:none;background:var(--blanc);transition:transform .45s var(--ease),border-color .25s}
.lf-page:hover{transform:translateY(-3px);border-color:var(--graphite)}
.lf-page h3{margin:0;font-size:1.35rem}
.lf-page p{margin:0;color:var(--gris);font-size:15px}
.lf-page .link{justify-self:start;font-size:14.5px}
.prose{max-width:var(--w-text)}
.prose h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.4em}
.coords{display:grid;gap:18px}
.coords > div{padding:20px 0;border-top:1px solid var(--trait-sombre)}
.coords .label{color:var(--gris-sombre);margin-bottom:6px;display:block}
.coords a{text-decoration:none;font-weight:600;color:var(--blanc)}
.coords a:hover{text-decoration:underline}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.stat{display:grid;gap:4px}
.stat b{font-family:'Fredoka',sans-serif;font-size:2.4rem;font-weight:600;line-height:1}

/* ── Responsive ── */
@media (max-width:1080px){
  .metiers{grid-template-columns:repeat(3,1fr)}
  .etapes{grid-template-columns:repeat(2,1fr)}
  .etape::after{display:none}
  .photo-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .grid{grid-template-columns:1fr;gap:32px}
  .c4,.c5,.c6,.c7,.c8{grid-column:1/-1}
  .hero-visual{margin-top:8px}
  .hero-visual .photo{aspect-ratio:16/10}
  .hero-visual .frame{position:relative;left:0;bottom:0;width:100%;margin-top:-40px;margin-left:var(--pad)}
  .formules,.manifeste,.two,.foot-grid{grid-template-columns:1fr}
  .manifeste > div{padding:24px 0!important;border-right:0!important}
  .lf-pages{grid-template-columns:1fr}
  .nav:not(.nav-simple){position:fixed;inset:76px 0 auto 0;background:var(--graphite);flex-direction:column;align-items:stretch;padding:12px var(--pad) 24px;gap:4px;border-bottom:1px solid var(--trait-sombre);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
  .nav-simple{gap:6px}
  .nav-simple a:not(.btn){display:none}
  .nav-open .nav:not(.nav-simple){opacity:1;transform:none;pointer-events:auto}
  .nav:not(.nav-simple) a{padding:13px 14px;font-size:17px}
  .nav .sep{display:none}
  .nav:not(.nav-simple) .btn{margin:8px 0 0;justify-content:center}
  .burger{display:inline-flex}
  .postes{grid-template-columns:repeat(2,1fr);gap:14px 8px}
  .postes::before{display:none}
  .espace{grid-template-columns:1fr}
  .espace-side{flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px}
  .espace-side img{margin:0 8px 0 4px}
  .espace-side a,.espace-side span{padding:7px 10px;font-size:12.5px}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .grid2{grid-template-columns:1fr}
  .metiers{grid-template-columns:1fr 1fr}
  .etapes{grid-template-columns:1fr}
  .photo-row{grid-template-columns:1fr 1fr;gap:10px}
  .btn-lg{padding:16px 24px;font-size:17px}
  .cta-row .btn{width:100%}
  .carte{width:230px}
  .fiche-row{grid-template-columns:1fr;gap:3px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .tapis{animation:none}
  .btn,.photo img,.lf-page{transition:none}
}

/* ── Ajouts : bandeau pleine largeur, cadre hero, blocs édito ── */
.bleed{width:100%;margin:0;padding:0}
.bleed .photo{border-radius:0;aspect-ratio:21/9}
@media(max-width:760px){.bleed .photo{aspect-ratio:16/10}}
.hero .frame{max-width:460px;margin-left:auto}
.nav-simple{gap:14px}
.edito{display:grid;gap:14px;align-content:start}
.edito h2{margin-bottom:.2em}
.pull{font-family:'Fredoka',sans-serif;font-weight:500;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25;letter-spacing:-.012em;margin:0 0 .6em;text-wrap:balance}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px)}
@media(max-width:760px){.duo{grid-template-columns:1fr}}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
@media(max-width:900px){.tiles{grid-template-columns:1fr}}
.tile{display:grid;gap:10px;padding:28px;border-radius:var(--r);background:var(--blanc);border:1px solid var(--trait)}
.band-dark .tile{background:var(--graphite-2);border-color:var(--trait-sombre)}
.tile h3{margin:0}
.tile p{margin:0;color:var(--gris)}
.band-dark .tile p{color:var(--gris-sombre)}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.center-narrow{max-width:760px}

/* Filet : si le script ne s'exécute pas, rien ne reste invisible */
.no-js [data-reveal]{opacity:1;transform:none}

/* Pastille de couleur d'un métier, en tête de ligne */
.pastille{display:inline-block;width:20px;height:20px;border-radius:7px;background:var(--tc,var(--autre));margin-top:6px}
.pastille[data-t="toiture"]{--tc:var(--toiture)}.pastille[data-t="facade"]{--tc:var(--facade)}.pastille[data-t="isolation"]{--tc:var(--isolation)}.pastille[data-t="panneaux_pv"]{--tc:var(--panneaux_pv)}.pastille[data-t="pac"]{--tc:var(--pac)}.pastille[data-t="borne_recharge"]{--tc:var(--borne_recharge)}.pastille[data-t="mise_conformite"]{--tc:var(--mise_conformite)}.pastille[data-t="salle_de_bain"]{--tc:var(--salle_de_bain)}.pastille[data-t="cuisine"]{--tc:var(--cuisine)}.pastille[data-t="autre"]{--tc:var(--autre)}
.critere .n .pastille{margin-top:2px}

/* Cibles tactiles confortables sur petit écran (WCAG 2.5.8) */
@media (max-width:900px) and (pointer:coarse){
  .foot ul{gap:2px}
  .foot ul a{display:inline-block;padding:12px 0;min-height:44px;line-height:20px}
  .foot-bottom a{display:inline-block;padding:8px 0}
  .coords a{display:inline-block;padding:11px 0}
  .prose a{padding:2px 0}
  .consent a{display:inline-block;padding:4px 0}
  .top .btn-sm{min-height:44px;padding-inline:20px}
  .faq summary{padding:24px 0;min-height:56px}
}