/* ============================================================
   Nivo Local — ligne produit artisans (v2 : COCKPIT INVERSÉ EN CLAIR)
   Lien graphique fort avec nivo-web-1 : cadre + crochets menthe, N, Instrument,
   menthe, boutons biseautés (coupes du N). Registre CLAIR & FROID (blanc bleuté)
   + PHOTOS chaudes + accent AMBRE. Réfs extraites : designjoy.co (blanc, un prix,
   preuve, radius 8) · videohusky.com (blanc froid #F4F8F9, highlight ambre, hero split, preuve tissée).
   ============================================================ */
:root{
  --bg:#F2F5FB; --bg2:#FFFFFF; --cool:#E7EDF6; --ink:#0C0E1C; --muted:#565D74; --faint:#8A90A5;
  --line:rgba(12,14,28,.11); --frame:rgba(12,14,28,.16);
  --mint:#00DEAB; --mint-ink:#04130D; --mint-deep:#08916E; --amber:#E7A93C; --amber-soft:#FBE7BE;
  --serif:'Instrument Serif',Georgia,serif; --sans:'Instrument Sans',-apple-system,system-ui,sans-serif;
  --logo:'Montserrat','Instrument Sans',sans-serif;   /* logo (Montserrat 600) */
  --e:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.77,0,.175,1);
  --maxw:1440px; --gut:clamp(20px,5vw,72px); --pad:clamp(14px,2vw,26px);
  --bevel:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
}
*{box-sizing:border-box}
.nlocal{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:clamp(16px,1.05vw,17.5px);line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:.003em}
.nlocal a{color:inherit;text-decoration:none}
.nlocal h1,.nlocal h2,.nlocal h3,.nlocal h4,.nlocal p{margin:0;font-weight:400}
.nlocal img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.serif{font-family:var(--serif)} .ital{font-style:italic} .mintc{color:var(--mint-deep)}
.display{font-family:var(--serif);font-weight:400;line-height:1.0;letter-spacing:-.012em}
.hl{font-style:italic}  /* accent italique serif (comme l'accueil nivo-web), plus de soulignement */

/* ---- COCKPIT FRAME (light) — le lien graphique ---- */
.lframe{position:fixed;inset:var(--pad);z-index:60;pointer-events:none;border:1px solid var(--frame)}
.cnr{position:absolute;width:13px;height:13px}
.cnr::before,.cnr::after{content:"";position:absolute;background:var(--mint)}
.cnr::before{width:13px;height:1.6px}.cnr::after{width:1.6px;height:13px}
.cnr.tl{top:-1px;left:-1px}.cnr.tr{top:-1px;right:-1px}.cnr.tr::before{right:0}.cnr.tr::after{right:0}
.cnr.bl{bottom:-1px;left:-1px}.cnr.bl::before{bottom:0}.cnr.bl::after{bottom:0}
.cnr.br{bottom:-1px;right:-1px}.cnr.br::before{right:0;bottom:0}.cnr.br::after{right:0;bottom:0}

/* ---- buttons : biseautés (coupes du N) ---- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:1rem;padding:.95em 1.5em;border:none;overflow:hidden;isolation:isolate;
  clip-path:var(--bevel);transition:transform .35s var(--e)}
.btn .lbl{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5em;transition:color .5s var(--e-io)}
.btn::before{content:"";position:absolute;inset:0;z-index:0;transform:translateX(-101%);transition:transform .55s var(--e-io)}
.btn:hover::before{transform:translateX(0)}
.btn-mint{background:var(--mint);color:var(--mint-ink)}.btn-mint::before{background:var(--ink)}.btn-mint:hover .lbl{color:#fff}
.btn-dark{background:var(--ink);color:#fff}.btn-dark::before{background:var(--mint)}.btn-dark:hover .lbl{color:var(--mint-ink)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--frame)}.btn-ghost::before{background:var(--ink)}.btn-ghost:hover .lbl{color:#fff}
.btn-lg{font-size:1.08rem;padding:1.05em 1.8em}
.arrow{display:inline-block;transition:transform .35s var(--e)}.btn:hover .arrow{transform:translateX(5px)}
.lnk{font-weight:600;color:var(--mint-deep);display:inline-flex;align-items:center;gap:.4em}.lnk:hover .arrow{transform:translateX(5px)}

/* ---- header ---- */
.lhead{position:sticky;top:0;z-index:50;background:rgba(242,245,251,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.lhead .bar{display:flex;align-items:center;gap:18px;height:70px;padding-left:clamp(6px,1vw,14px)}
.lbrand{display:inline-flex;align-items:center;gap:.42em;font-family:var(--logo);font-weight:600;font-size:1.02rem;letter-spacing:-.005em}
/* logo Nivo Local + badge d'attribution "par Nivo-Web" (blanc italique, vert, plus petit).
   scopé sous .lbrand pour battre .nlocal a{color:inherit} */
.lbrand .lb-name{color:var(--ink)}   /* pas de hover */
/* badge "par Nivo-Web" : turquoise, coupe des boutons, texte noir italique.
   hover = même balayage que les boutons (fond noir qui entre par la gauche, texte -> blanc) */
.lbrand .lb-by{position:relative;overflow:hidden;isolation:isolate;
  font-family:var(--sans);font-style:italic;font-weight:600;font-size:.68em;line-height:1;white-space:nowrap;
  color:var(--mint-ink);background:var(--mint);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  padding:.5em .85em;margin-left:.5em}
.lbrand .lb-by::before{content:"";position:absolute;inset:0;z-index:0;background:var(--ink);
  transform:translateX(-101%);transition:transform .55s var(--e-io)}
.lbrand .lb-by:hover::before{transform:translateX(0)}
.lbrand .lb-by .lbl{position:relative;z-index:1;transition:color .5s var(--e-io)}
.lbrand .lb-by:hover .lbl{color:#fff}
.lbrand .mk{flex:0 0 auto;width:26px;height:26px;display:inline-grid;place-items:center}
.lbrand .mk svg{display:block;width:26px;height:26px}
.lbrand .tag{font-family:var(--sans);font-weight:600;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mint-deep);border:1px solid rgba(0,222,171,.4);padding:.28em .55em;border-radius:999px;margin-left:.15em}
.lnav{display:flex;gap:22px;margin-left:auto;font-weight:500;color:var(--muted);font-size:.95rem}
.lnav a:hover{color:var(--ink)}
.lhead .btn{padding:.6em 1.1em;font-size:.9rem}
.lback{color:var(--faint);font-size:.85rem}.lback:hover{color:var(--ink)}

/* ---- trust bar ---- */
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;font-size:.95rem;color:var(--muted)}
.trust b{color:var(--ink);font-weight:700}
.trust .stars{color:var(--amber);letter-spacing:.04em}
.trust .dot{width:4px;height:4px;border-radius:50%;background:var(--faint)}

/* ---- hero (split, réf videohusky) ---- */
.lhero{padding:clamp(36px,5vh,72px) 0 clamp(46px,6vh,84px)}
.lhero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,72px);align-items:center}
.lhero .eyebrow{font-weight:500;color:var(--muted);margin-bottom:1.1em;font-size:.92rem}
.lhero h1{font-size:clamp(38px,5.2vw,66px)}
.lhero .sub{margin-top:1.1em;font-size:clamp(17px,1.35vw,20px);color:var(--muted);max-width:44ch}
.lhero .sub b{color:var(--ink);font-weight:700}
.lhero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.7em}
.lhero .trust{margin-top:1.7em}
.lmedia{position:relative}
.lmedia .shot{overflow:hidden;clip-path:var(--bevel);border:1px solid var(--line);background:var(--bg2);aspect-ratio:4/5;box-shadow:0 30px 60px -34px rgba(12,14,28,.35)}
.lmedia .shot img{width:100%;height:100%;object-fit:cover}
.lmedia .ph{width:100%;height:100%;display:grid;place-items:center;background:var(--cool);color:rgba(8,145,110,.35);font-family:var(--serif);font-size:5rem}
.lmedia .chip{position:absolute;background:var(--bg2);border:1px solid var(--line);clip-path:var(--bevel);box-shadow:0 16px 34px -18px rgba(12,14,28,.4);padding:13px 16px;font-size:.88rem;font-weight:600}
.lmedia .chip.a{top:7%;left:-5%}.lmedia .chip.b{bottom:6%;right:-5%}
.lmedia .chip b{display:block;font-family:var(--serif);font-size:1.7rem;color:var(--mint-deep);line-height:1;font-weight:400}
.lmedia .chip .stars{color:var(--amber);font-size:.8rem}

/* ---- mint marquee (callback nivo-web) ---- */
.lmarq{background:var(--mint);color:var(--mint-ink);overflow:hidden;padding:13px 0;border-top:1px solid rgba(4,19,13,.15);border-bottom:1px solid rgba(4,19,13,.15)}
.lmarq .track{display:flex;width:max-content;animation:lmarq 40s linear infinite}
.lmarq:hover .track{animation-play-state:paused}
.lmarq .seg{display:flex;align-items:center;flex:0 0 auto}
.lmarq .seg span{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.3vw,30px);padding:0 .55em;white-space:nowrap}
.lmarq .seg em{font-style:normal;font-size:.42em;transform:translateY(-.35em);opacity:.5}
@keyframes lmarq{to{transform:translateX(-50%)}}

/* ---- sections ---- */
.sec{padding:clamp(56px,8vh,108px) 0}
.sec.white{background:var(--bg2)}
.sec.cool{background:var(--cool)}
.sec-head{max-width:60ch;margin:0 auto clamp(34px,5vh,58px)}
.sec-head.center{text-align:center}
.sec-head .eyebrow{font-weight:600;color:var(--mint-deep);margin-bottom:.9em}
.sec-head h2{font-size:clamp(28px,3.8vw,50px)}
.sec-head p{margin-top:.9em;color:var(--muted);font-size:clamp(16px,1.2vw,18.5px)}

.promise{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,60px);align-items:center}
.promise .big{font-family:var(--serif);font-size:clamp(25px,3.3vw,40px);line-height:1.14}
.promise .big .hl{padding:0 .08em}
.promise p{color:var(--muted);font-size:1.06rem}.promise b{color:var(--ink)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,26px);counter-reset:s}
.step{background:var(--bg2);border:1px solid var(--line);clip-path:var(--bevel);padding:24px}
.step .n{counter-increment:s;font-family:var(--serif);font-size:2.2rem;color:var(--mint-deep);line-height:1}
.step .n::before{content:"0" counter(s)}
.step h3{font-family:var(--serif);font-size:1.32rem;margin:.35em 0 .3em}
.step p{color:var(--muted);font-size:.95rem}

/* included + offer card */
.incl{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,60px);align-items:start}
.incl-item{display:flex;gap:15px;align-items:flex-start;padding:17px 0;border-top:1px solid var(--line)}
.incl-item .ic{flex:0 0 auto;width:32px;height:32px;background:rgba(0,222,171,.14);color:var(--mint-deep);display:grid;place-items:center;font-weight:700;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.incl-item h4{font-size:1.06rem;font-weight:700}.incl-item p{color:var(--muted);font-size:.94rem;margin-top:.15em}
.offer{background:var(--ink);color:#fff;clip-path:var(--bevel);padding:clamp(26px,2.6vw,38px);box-shadow:0 30px 60px -34px rgba(12,14,28,.5)}
.offer .kicker{font-weight:600;color:var(--mint);font-size:.9rem}
.offer h3{font-family:var(--serif);font-size:1.75rem;margin:.2em 0 .1em}
.offer .from{color:#B9BECB;font-size:.95rem}.offer .from b{color:var(--mint)}
.offer ul{list-style:none;padding:0;margin:1.1em 0}
.offer li{padding:.5em 0 .5em 1.7em;position:relative;font-size:.96rem;color:#EAECF2}
.offer li::before{content:"✓";position:absolute;left:0;color:var(--mint);font-weight:700}
.offer .btn{width:100%;margin-top:.5em}
.offer .rr{text-align:center;color:#8A90A5;font-size:.83rem;margin-top:.8em}

/* proof */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.proof-card{background:var(--bg2);border:1px solid var(--line);clip-path:var(--bevel);padding:26px}
.proof-card .big{font-family:var(--serif);font-size:clamp(38px,4.4vw,60px);color:var(--mint-deep);line-height:.9}
.proof-card p{color:var(--muted);margin-top:.5em;font-size:.98rem}.proof-card .who{font-weight:600;margin-top:.8em;font-size:.9rem}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(28px,4vh,46px)}
.review{background:var(--bg2);border:1px solid var(--line);clip-path:var(--bevel);padding:20px}
.review .stars{color:var(--amber)}.review p{font-size:.95rem;margin:.5em 0}.review .who{font-weight:600;font-size:.87rem;color:var(--muted)}

/* métiers */
.metiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.metier{display:block;background:var(--bg2);border:1px solid var(--line);clip-path:var(--bevel);overflow:hidden;transition:transform .4s var(--e),box-shadow .4s var(--e)}
.metier:hover{transform:translateY(-5px);box-shadow:0 26px 50px -30px rgba(12,14,28,.4)}
.metier .img{aspect-ratio:16/11;overflow:hidden;background:var(--cool)}
.metier .img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}.metier:hover .img img{transform:scale(1.05)}
.metier .img .ph{width:100%;height:100%;display:grid;place-items:center;color:rgba(8,145,110,.32);font-family:var(--serif);font-size:2.6rem}
.metier .body{padding:20px 22px}.metier h3{font-family:var(--serif);font-size:1.42rem}.metier p{color:var(--muted);font-size:.94rem;margin-top:.25em}
.metier .go{margin-top:.7em;color:var(--mint-deep);font-weight:600;font-size:.93rem}

/* pricing */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);max-width:840px;margin:0 auto}
.price{background:var(--bg2);border:1px solid var(--line);clip-path:var(--bevel);padding:clamp(26px,2.5vw,40px)}
.price.feat{border:2px solid var(--mint);box-shadow:0 26px 54px -30px rgba(0,222,171,.5);position:relative}
.price.feat .flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--mint);color:var(--mint-ink);font-weight:700;font-size:.8rem;padding:.3em 1em;border-radius:999px}
.price h3{font-family:var(--serif);font-size:1.55rem}
.price .amt{font-family:var(--serif);font-size:clamp(38px,4.4vw,56px);line-height:1;margin:.25em 0 .1em}
.price .amt small{font-size:.34em;color:var(--muted);font-family:var(--sans);font-weight:600}
.price .setup{color:var(--muted);font-size:.94rem}
.price ul{list-style:none;padding:0;margin:1.2em 0}.price li{padding:.44em 0 .44em 1.6em;position:relative;font-size:.96rem}
.price li::before{content:"✓";position:absolute;left:0;color:var(--mint-deep);font-weight:700}
.price .btn{width:100%;margin-top:.4em}
.price-note{text-align:center;color:var(--muted);max-width:62ch;margin:clamp(24px,3vh,40px) auto 0;font-size:.96rem}.price-note b{color:var(--ink)}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
.qa{border-top:1px solid var(--line)}.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-family:var(--serif);font-size:clamp(19px,1.9vw,24px);position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:6px;top:19px;font-size:1.5rem;color:var(--mint-deep);transition:transform .3s var(--e)}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{color:var(--muted);padding:0 0 22px;font-size:1rem}
/* FAQ : ouverture fluide (grid-rows 0fr->1fr) ; le wrapper reste en flux même fermé (override UA display:none) */
.qa .qa-a{overflow:hidden;transition:height .38s var(--e)}   /* hauteur animée par JS (px exacts) ; sans JS = <details> natif instantané */
.qa .qa-a>*{min-height:0}
@media (prefers-reduced-motion:reduce){.qa .qa-a{transition:none}}

/* final CTA (dark, callback cockpit) */
.final{background:var(--ink);color:#fff;clip-path:var(--bevel);text-align:center;padding:clamp(44px,7vh,88px) var(--gut);position:relative;overflow:hidden}
.final .fcnr{position:absolute;width:16px;height:16px}
.final .fcnr::before,.final .fcnr::after{content:"";position:absolute;background:var(--mint)}
.final .fcnr::before{width:16px;height:2px}.final .fcnr::after{width:2px;height:16px}
.final .fcnr.tl{top:14px;left:14px}.final .fcnr.br{bottom:14px;right:14px}.final .fcnr.br::before{right:0;bottom:0}.final .fcnr.br::after{right:0;bottom:0}
.final h2{font-family:var(--serif);font-size:clamp(30px,4.6vw,58px);line-height:1.02}
.final p{color:#C4C9D6;margin:1em auto 0;max-width:46ch}
.final .cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:2em}
.lead-form{max-width:560px;margin:2em auto 0;display:grid;gap:12px;text-align:left}
.lead-form input{padding:.9em 1.1em;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:1rem}
.lead-form input::placeholder{color:#9AA0B0}
.lead-form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* footer */
.lfoot{background:var(--bg2);color:var(--muted);padding:clamp(50px,7vh,84px) 0 calc(var(--pad) + 30px);border-top:1px solid var(--line)}
.lfoot .top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px}
.lfoot .lbrand{color:var(--ink)}
.lfoot h5{color:var(--ink);font-size:.95rem;margin:0 0 1em;font-weight:700}
.lfoot a{display:block;padding:.32em 0;color:var(--muted);font-size:.95rem}.lfoot a:hover{color:var(--mint-deep)}
.lfoot .bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-size:.85rem;color:var(--faint)}

/* sticky mobile cta */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(242,245,251,.95);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.mcta .btn{flex:1;padding:.85em 1em;font-size:.95rem}

/* métier specifics */
.pains{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pain{background:var(--bg2);border:1px solid var(--line);clip-path:polygon(9px 0,100% 0,100% 100%,0 100%,0 9px);padding:18px 20px}
.pain::before{content:"";display:block;width:26px;height:2px;background:var(--amber);margin-bottom:.7em}
.pain b{display:block;margin-bottom:.2em}.pain span{color:var(--muted);font-size:.94rem}

@media (max-width:900px){
  .lnav,.lback,.lhead .btn{display:none}
  .lhead .bar{justify-content:flex-start}
  .lhero-grid,.promise,.incl,.metiers,.proof-grid,.reviews,.prices,.steps,.pains{grid-template-columns:1fr}
  .lmedia{order:-1;max-width:420px;margin:0 auto}
  .offer{position:static}
  .lfoot .top{grid-template-columns:1fr 1fr}
  .mcta{display:flex}.nlocal{padding-bottom:68px}
}
@media (max-width:560px){ .steps,.lfoot .top{grid-template-columns:1fr} .lmedia .chip{display:none} }

/* ===== footer fix + redesign ===== */
.lfoot .lbrand{display:inline-flex}
.lfoot .top{grid-template-columns:1.6fr 1fr 1fr 1.2fr}
.foot-cta{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  background:var(--cool);border:1px solid var(--line);clip-path:var(--bevel);padding:clamp(22px,2.4vw,34px) clamp(24px,2.8vw,44px);margin-bottom:clamp(36px,5vh,60px)}
.foot-cta h4{font-family:var(--serif);font-size:clamp(21px,2.4vw,32px);line-height:1.05}
.foot-cta p{color:var(--muted);margin-top:.2em;font-size:.98rem}
.fc-cnr{position:absolute;width:12px;height:12px}
.fc-cnr::before,.fc-cnr::after{content:"";position:absolute;background:var(--mint)}
.fc-cnr::before{width:12px;height:1.6px}.fc-cnr::after{width:1.6px;height:12px}
.fc-cnr.tl{top:6px;left:6px}.fc-cnr.br{bottom:6px;right:6px}.fc-cnr.br::before{right:0;bottom:0}.fc-cnr.br::after{right:0;bottom:0}
.foot-contact a{display:block}
.foot-contact .cities{color:var(--faint);font-size:.9rem;margin-top:.4em}

/* ===== SIMULATEUR CA perdu (V2) ===== */
.sim{background:var(--bg2);border:1px solid var(--line);clip-path:var(--bevel);box-shadow:0 30px 60px -34px rgba(12,14,28,.3);overflow:hidden}
.sim-grid{display:grid;grid-template-columns:1.05fr .95fr}
.sim-inputs{padding:clamp(26px,2.6vw,40px)}
.sim-inputs .st{font-weight:600;color:var(--mint-deep);font-size:.9rem;margin-bottom:1.3em;display:inline-flex;align-items:center;gap:.5em}
.sim-row{margin:0 0 1.6em}
.sim-row .lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:.5em}
.sim-row .lab .q{font-weight:600;font-size:1.02rem;max-width:28ch}
.sim-row .lab .val{font-family:var(--serif);font-size:1.5rem;color:var(--ink);white-space:nowrap}
.sim-row input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--cool);outline:none}
.sim-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--mint);border:3px solid #fff;box-shadow:0 4px 12px -2px rgba(0,222,171,.6);cursor:pointer}
.sim-row input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--mint);border:3px solid #fff;cursor:pointer}
.sim-note{color:var(--faint);font-size:.85rem;margin-top:.4em}
.sim-out{background:var(--ink);color:#fff;padding:clamp(26px,2.6vw,40px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.sim-out .fcnr{position:absolute;width:14px;height:14px}.sim-out .fcnr::before,.sim-out .fcnr::after{content:"";position:absolute;background:var(--mint)}
.sim-out .fcnr::before{width:14px;height:2px}.sim-out .fcnr::after{width:2px;height:14px}
.sim-out .fcnr.tr{top:12px;right:12px}.sim-out .fcnr.tr::before{right:0}.sim-out .fcnr.tr::after{right:0}
.sim-out .tag{display:inline-block;font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mint);border:1px solid rgba(0,222,171,.4);padding:.28em .7em;border-radius:999px;margin-bottom:1em;align-self:flex-start}
.sim-out .big{font-family:var(--serif);font-size:clamp(46px,6vw,80px);line-height:.92;color:var(--mint)}
.sim-out .big small{font-size:.32em;color:#B9BECB;font-family:var(--sans);font-weight:600}
.sim-out .year{color:#C4C9D6;font-size:1.05rem;margin-top:.4em}
.sim-out .lead-txt{color:#EAECF2;margin-top:1em;font-size:1rem;line-height:1.4}
.sim-out .formula{color:#8A90A5;font-size:.86rem;margin-top:1em;padding-top:1em;border-top:1px solid rgba(255,255,255,.12)}
.sim-out .roi{color:#EAECF2;font-size:.98rem;margin-top:.8em}.sim-out .roi b{color:var(--mint)}
.sim-out .btn{margin-top:1.4em}
@media (max-width:820px){ .sim-grid{grid-template-columns:1fr} }
@media (max-width:900px){ .foot-cta{flex-direction:column;align-items:flex-start} .lfoot .top{grid-template-columns:1fr 1fr} .foot-contact{grid-column:1/-1} }

/* ===== header dans son propre cadre ; le cadre de page se raccourcit en haut (comme le footer-frame de l'accueil) ===== */
:root{--headh:70px}
.nlocal{padding-top:calc(var(--pad) + var(--headh) + 14px)}
.lhead{position:fixed;top:var(--pad);left:var(--pad);right:var(--pad);z-index:66;
  border:1px solid var(--frame);background:rgba(242,245,251,.9);backdrop-filter:blur(12px) saturate(1.1)}
.lhead .bar{height:var(--headh);padding:0 clamp(16px,2vw,28px)}
.lframe{top:calc(var(--pad) + var(--headh) + 12px)}
/* sec-head : aligné à gauche par défaut, .center seulement pour centrer */
.sec-head{margin-left:0;margin-right:0}
.sec-head.center{margin-left:auto;margin-right:auto}

/* ===== split texte + photo (sections métier : constat / ce qu'on fait) ===== */
.feat-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.feat-split.rev .feat-img{order:-1}
.feat-split .ft{max-width:52ch;color:var(--muted);font-size:1.06rem;line-height:1.7;margin-top:1em}
.feat-img{aspect-ratio:4/3;overflow:hidden;clip-path:var(--bevel);border:1px solid var(--line);background:var(--cool);box-shadow:0 26px 50px -30px rgba(12,14,28,.3)}
.feat-img img{width:100%;height:100%;object-fit:cover}
.feat-img .ph{width:100%;height:100%;display:grid;place-items:center;color:rgba(8,145,110,.3);font-family:var(--serif);font-size:3rem}
@media(max-width:820px){.feat-split{grid-template-columns:1fr}.feat-split.rev .feat-img{order:0}}

/* ===== exemples de sites déjà créés (par métier) ===== */
.examples{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.ex{margin:0;border:1px solid var(--line);clip-path:var(--bevel);overflow:hidden;background:var(--bg2);box-shadow:0 22px 44px -28px rgba(12,14,28,.28);transition:transform .4s var(--e)}
.ex:hover{transform:translateY(-4px)}
.ex-bar{display:flex;gap:5px;padding:9px 12px;background:var(--cool);border-bottom:1px solid var(--line)}
.ex-bar span{width:8px;height:8px;border-radius:50%;background:var(--faint);opacity:.55}
.ex-shot{aspect-ratio:16/10;overflow:hidden;background:var(--cool)}
.ex-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.ex-shot .ph{width:100%;height:100%;display:grid;place-items:center;color:rgba(8,145,110,.3);font-family:var(--serif);font-size:2rem}
.nlocal .ex-note{text-align:center;color:var(--faint);font-size:.9rem;margin-top:clamp(48px,7vh,84px)}
@media(max-width:820px){.examples{grid-template-columns:1fr}}

/* ===== SIMULATEUR v2 : objectif fixe + 1 curseur montant -> gain/an vs prix/mois (2 cards) ===== */
.sim2{background:var(--bg2);border:1px solid var(--line);clip-path:var(--bevel);box-shadow:0 30px 60px -34px rgba(12,14,28,.3);padding:clamp(26px,2.8vw,44px)}
.sim2-top{max-width:660px;margin:0 auto;text-align:center}
.sim2 .claim{font-family:var(--serif);font-size:clamp(21px,2.5vw,32px);line-height:1.2;margin:0 0 1.5em}
.sim2 .claim b{color:var(--mint-deep);font-style:italic;font-weight:400}
.sim2 .sim-row{text-align:left}
.sim2-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);margin-top:clamp(26px,3.4vh,44px)}
.s2card{clip-path:var(--bevel);padding:clamp(24px,2.5vw,38px);position:relative;overflow:hidden;display:flex;flex-direction:column}
.s2card.gain{background:var(--ink);color:#fff}
.s2card.cost{background:var(--cool);border:1px solid var(--line);color:var(--ink)}
.s2card .fcnr{position:absolute;width:13px;height:13px}.s2card .fcnr::before,.s2card .fcnr::after{content:"";position:absolute;background:var(--mint)}
.s2card .fcnr::before{width:13px;height:2px}.s2card .fcnr::after{width:2px;height:13px}
.s2card .fcnr.tr{top:12px;right:12px}.s2card .fcnr.tr::before{right:0}.s2card .fcnr.tr::after{right:0}
.s2card .tag{font-weight:600;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.7em}
.s2card.gain .tag{color:var(--mint)}.s2card.cost .tag{color:var(--mint-deep)}
.s2card .big{font-family:var(--serif);font-weight:400;font-size:clamp(42px,5.6vw,80px);line-height:.9;letter-spacing:-.02em}
.s2card.gain .big{color:var(--mint)}.s2card.cost .big{color:var(--ink)}
.s2card .big small{font-size:.3em;font-family:var(--sans);font-weight:600;letter-spacing:0}
.s2card .s2sub{margin-top:.9em;font-size:.92rem;line-height:1.4}
.s2card.gain .s2sub{color:#C4C9D6}.s2card.cost .s2sub{color:var(--muted)}
.sim2-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:clamp(22px,3vh,34px)}
.sim2-foot .roi{color:var(--muted);font-size:.98rem;max-width:46ch}
@media(max-width:640px){.sim2-cards{grid-template-columns:1fr}}

/* ============================================================
   MOTION — reveals au scroll (staggered) + parallaxe douce
   Gated .js (posé pré-paint uniquement si motion autorisé) -> aucun FOUC,
   et contenu toujours visible si motion réduit / JS absent.
   ============================================================ */
.js .lhero .eyebrow,.js .lhero .sub,.js .lhero-cta,.js .lmedia,
.js .sec-head,.js .incl-item,.js .metier,.js .feat-split,.js .ex,.js .qa,
.js .prices>*,.js .price,.js .final h2,.js .final p,.js .final .btn,
.js .steps>*,.js .constat,.js .band{
  opacity:0;transform:translateY(26px);
  transition:opacity .82s cubic-bezier(.16,1,.3,1) var(--rvd,0s),transform .82s cubic-bezier(.16,1,.3,1) var(--rvd,0s)}
.js .in{opacity:1!important;transform:none!important}
/* hero H1 : reveal masqué (le geste d'ouverture de l'accueil) — le titre glisse depuis un cache */
.js .lhero h1.lines .ln{display:block;overflow:hidden;padding-bottom:.12em}
.js .lhero h1.lines .ln>span{display:block;transform:translateY(106%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.js .lhero h1.lines.in .ln>span{transform:none}
/* base overscale -> laisse de la marge au translate du parallaxe (recadré par overflow:hidden) */
.js .feat-img img,.js .lmedia img{transform:scale(1.12);will-change:transform}

/* ancres : décalage sous le header collant + fallback natif (JS gère le lissage précis) */
html{scroll-padding-top:88px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ============================================================
   V3 — IMMERSION MÉTIER : hero plein cadre à fond photo, bandes
   full-width en parallaxe, section « À propos » (Victor & Raphaël).
   Ces pages doivent respirer plus chaud/proche que la page globale.
   ============================================================ */

/* ---- HERO à fond photo (pages métier) ---- */
.lhero-photo{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;
  min-height:clamp(520px,78vh,800px);padding:clamp(52px,9vh,104px) 0}
.lhero-photo .lhero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0B1020}
.lhero-photo .lhero-bg img{position:absolute;top:-9%;left:0;width:100%;height:118%;object-fit:cover;object-position:center 30%}
.lhero-photo .lhero-bg .ph{width:100%;height:100%;display:grid;place-items:center;background:#0B1020;color:rgba(0,222,171,.25);font-family:var(--serif);font-size:6rem}
/* voile sombre : dégradé latéral pour que le texte (à gauche) reste lisible + assombri global bas */
.lhero-photo .lhero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(6,7,20,.9) 0%,rgba(6,7,20,.74) 38%,rgba(6,7,20,.36) 72%,rgba(6,7,20,.2) 100%),
             linear-gradient(0deg,rgba(6,7,20,.6),rgba(6,7,20,0) 42%)}
.lhero-photo .wrap{position:relative;z-index:1;width:100%}
.lhero-photo .lhero-inner{max-width:680px;color:#fff}
.lhero-photo .eyebrow{color:rgba(255,255,255,.72);margin-bottom:1.1em;font-weight:500}
.lhero-photo .eyebrow a{color:var(--mint)!important}
.lhero-photo h1{font-size:clamp(38px,5.4vw,68px);color:#fff;text-shadow:0 2px 30px rgba(4,8,20,.45)}
.lhero-photo h1 .hl{color:var(--mint);font-style:italic}
.lhero-photo .sub{margin-top:1.15em;font-size:clamp(17px,1.35vw,20px);color:rgba(255,255,255,.86);max-width:46ch}
.lhero-photo .sub b{color:#fff}
.lhero-photo .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.8em}
.lhero-photo .trust{margin-top:1.9em;color:rgba(255,255,255,.78)}
.lhero-photo .trust b{color:#fff}
.lhero-photo .trust .dot{background:rgba(255,255,255,.4)}
/* ghost -> variante claire sur photo (bordure + texte blancs) */
.lhero-photo .btn-ghost,.photoband .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.lhero-photo .btn-ghost::before,.photoband .btn-ghost::before{background:#fff}
.lhero-photo .btn-ghost:hover .lbl,.photoband .btn-ghost:hover .lbl{color:var(--ink)}

/* ---- BANDE plein cadre à fond photo + parallaxe (constats / respirations) ---- */
.photoband{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;
  min-height:clamp(360px,56vh,560px);padding:clamp(48px,8vh,96px) 0}
.photoband .pb-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0B1020}
.photoband .pb-bg img{position:absolute;top:-12%;left:0;width:100%;height:124%;object-fit:cover}
.photoband .pb-bg .ph{width:100%;height:100%;display:grid;place-items:center;background:#0B1020;color:rgba(0,222,171,.22);font-family:var(--serif);font-size:4rem}
.photoband .pb-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(6,7,20,.86) 0%,rgba(6,7,20,.64) 46%,rgba(6,7,20,.42) 78%,rgba(6,7,20,.6) 100%)}
.photoband .wrap{position:relative;z-index:1;width:100%}
.photoband .pb-inner{max-width:760px;color:#fff}
.photoband .kicker{display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:.9rem;color:var(--mint);margin-bottom:1em}
.photoband h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,52px);line-height:1.06;color:#fff;letter-spacing:-.012em}
.photoband h2 .hl{color:var(--mint);font-style:italic}
.photoband p{margin-top:1em;color:rgba(255,255,255,.84);font-size:clamp(16px,1.2vw,18.5px);max-width:58ch;line-height:1.65}
.photoband .pb-cta{margin-top:1.7em}
.photoband .pb-cta .lnk{color:var(--mint)}
/* variante centrée (clôture) */
.photoband.center{justify-content:center;text-align:center}
.photoband.center .pb-inner{margin:0 auto;max-width:800px}
.photoband.center .pb-cta{display:flex;justify-content:center}
.photoband.center .pb-bg::after{background:linear-gradient(rgba(6,7,20,.74),rgba(6,7,20,.66)),radial-gradient(120% 100% at 50% 50%,rgba(6,7,20,0) 30%,rgba(6,7,20,.5) 100%)}

/* ---- À PROPOS (Victor & Raphaël) — proximité, taille humaine ---- */
/* .nlocal a{color:inherit} (spéc. 0,1,1) battait .btn-dark{color:#fff} (0,1,0) -> label sombre sur fond sombre.
   On rescope le libellé du bouton foncé pour qu'il repasse en blanc. */
.nlocal .btn-dark{color:#fff}
.about{background:var(--cool)}
.about-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,5vw,68px);align-items:center}
.about-media{position:relative}
.about-media .shot{overflow:hidden;clip-path:var(--bevel);border:1px solid var(--line);background:var(--bg2);aspect-ratio:4/5;box-shadow:0 34px 66px -36px rgba(12,14,28,.42)}
.about-media .shot img{width:100%;height:100%;object-fit:cover}
.about-media .shot .ph{width:100%;height:100%;display:grid;place-items:center;background:var(--bg2);color:rgba(8,145,110,.32);font-family:var(--serif);font-size:4rem}
.about-media .stamp{position:absolute;right:-4%;bottom:7%;background:var(--bg2);border:1px solid var(--line);clip-path:var(--bevel);
  box-shadow:0 18px 38px -20px rgba(12,14,28,.45);padding:12px 16px;font-size:.86rem;font-weight:600;display:flex;align-items:center;gap:.6em;white-space:nowrap}
.about-media .stamp .d{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(0,222,171,.2)}
.about-body .eyebrow{font-weight:600;color:var(--mint-deep);margin-bottom:.9em}
.about-body h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.7vw,48px);line-height:1.04;letter-spacing:-.01em}
.about-body h2 .hl{font-style:italic;color:var(--mint-deep)}
.about-body p{color:var(--muted);font-size:clamp(16px,1.15vw,18px);line-height:1.7;margin-top:1.1em;max-width:56ch}
.about-body p b{color:var(--ink);font-weight:600}
.about-sign{display:flex;align-items:center;gap:14px;margin-top:1.6em}
.about-sign .names{font-family:var(--serif);font-size:1.3rem;color:var(--ink)}
.about-sign .role{color:var(--faint);font-size:.9rem}
.about-body .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.7em}

@media(max-width:820px){
  .lhero-photo{min-height:0;padding:clamp(40px,7vh,64px) 0}
  .lhero-photo .lhero-bg::after{background:linear-gradient(180deg,rgba(6,7,20,.62) 0%,rgba(6,7,20,.5) 40%,rgba(6,7,20,.8) 100%)}
  .photoband{min-height:0}
  .about-grid{grid-template-columns:1fr}
  .about-media{max-width:420px;margin:0 auto}
  .about-media .stamp{right:4%;bottom:5%}
}

/* reveals des nouveaux blocs (état de base masqué, comme les autres) */
.js .lhero-photo .eyebrow,.js .lhero-photo .sub,.js .lhero-photo .cta,.js .lhero-photo .trust,
.js .photoband .pb-inner,.js .about-media,.js .about-body{
  opacity:0;transform:translateY(26px);
  transition:opacity .82s cubic-bezier(.16,1,.3,1) var(--rvd,0s),transform .82s cubic-bezier(.16,1,.3,1) var(--rvd,0s)}
.js .lhero-photo .in,.js .photoband .in,.js .in.about-media,.js .in.about-body{opacity:1!important;transform:none!important}
/* le fond photo est sur-dimensionné pour laisser la marge au translate du parallaxe */
.js .lhero-photo .lhero-bg img,.js .photoband .pb-bg img{will-change:transform}

/* ============================================================
   V4 — AIGUILLAGE + CATALOGUE D'OFFRES
   Accueil : équipe en tête + « Quel est votre métier ? » (aiguillage).
   Offres : 3 offres chiffrées + entrée « sans site » + options en arguments.
   ============================================================ */

/* ---- aiguillage métier (hero accueil) ---- */
.pick{margin-top:1.7em}
.pick-q{font-family:var(--serif);font-size:clamp(21px,2vw,27px);line-height:1.1;margin-bottom:.6em}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pick a{display:flex;flex-direction:column;gap:.2em;padding:14px 16px;background:var(--bg2);border:1px solid var(--line);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:transform .35s var(--e),border-color .3s,box-shadow .35s var(--e)}
.pick a:hover{transform:translateY(-3px);border-color:rgba(0,222,171,.55);box-shadow:0 18px 34px -22px rgba(12,14,28,.35)}
.pick a b{font-weight:700;font-size:1rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:.5em}
.pick a b .arrow{color:var(--mint-deep)}
.pick a span{color:var(--muted);font-size:.9rem;line-height:1.35}
.pick a.other{background:transparent;border-style:dashed}
.lmedia .chip .d{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(0,222,171,.2);margin-right:.5em;vertical-align:middle}

/* ---- catalogue d'offres ---- */
.offers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);align-items:stretch;margin-top:clamp(10px,2vh,18px)}
.plan{position:relative;display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line);clip-path:var(--bevel);padding:clamp(24px,2.3vw,34px)}
.plan.feat{border:2px solid var(--mint);box-shadow:0 26px 54px -30px rgba(0,222,171,.45);padding-top:calc(clamp(24px,2.3vw,34px) + 24px)}
.plan .flag{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:var(--mint);color:var(--mint-ink);font-weight:700;font-size:.8rem;padding:.3em 1em;border-radius:999px;white-space:nowrap}
.plan h3{font-family:var(--serif);font-size:1.62rem;line-height:1.05}
.plan .who{color:var(--mint-deep);font-weight:600;font-size:.93rem;line-height:1.35;margin-top:.55em;min-height:2.7em}
.plan .amt{font-family:var(--serif);font-size:clamp(40px,4.4vw,58px);line-height:1;margin:.5em 0 .15em;letter-spacing:-.02em}
.plan .amt small{font-size:.28em;font-family:var(--sans);font-weight:600;color:var(--muted);letter-spacing:0;margin-left:.35em}
.plan .plus{color:var(--muted);font-size:.92rem;line-height:1.45}
.plan .plus b{color:var(--ink)}
.plan ul{list-style:none;padding:0;margin:1.2em 0 1.4em;flex:1}
.plan li{padding:.42em 0 .42em 1.6em;position:relative;font-size:.95rem;line-height:1.4}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--mint-deep);font-weight:700}
.plan li.note{color:var(--muted)}
.plan li.note::before{content:"·";color:var(--faint)}
.plan .btn{width:100%;margin-top:auto}

/* entrée « sans site » : accompagnement local seul, modulable */
.offer-noside{margin-top:clamp(16px,2vw,24px);display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,3vw,44px);align-items:center;
  background:var(--ink);color:#fff;clip-path:var(--bevel);padding:clamp(26px,2.8vw,40px);position:relative;overflow:hidden}
.offer-noside .fcnr{position:absolute;width:14px;height:14px}.offer-noside .fcnr::before,.offer-noside .fcnr::after{content:"";position:absolute;background:var(--mint)}
.offer-noside .fcnr::before{width:14px;height:2px}.offer-noside .fcnr::after{width:2px;height:14px}
.offer-noside .fcnr.tr{top:12px;right:12px}.offer-noside .fcnr.tr::before{right:0}.offer-noside .fcnr.tr::after{right:0}
.offer-noside .kick{display:inline-block;font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mint);border:1px solid rgba(0,222,171,.45);padding:.3em .75em;border-radius:999px;margin-bottom:.9em}
.offer-noside h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.08}
.offer-noside p{color:#C4C9D6;margin-top:.7em;font-size:1rem;line-height:1.6;max-width:58ch}
.offer-noside p b{color:#fff;font-weight:600}
.offer-noside .side{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.offer-noside .side small{color:#8A90A5;font-size:.85rem;line-height:1.4}

/* options : des arguments, pas des prix */
.options{margin-top:clamp(36px,5vh,60px)}
.options h3{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.08}
.options>p{color:var(--muted);margin-top:.5em;max-width:62ch}
.opt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:1.3em}
.opt{display:flex;gap:.7em;align-items:flex-start;padding:14px 16px;background:var(--bg2);border:1px solid var(--line);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);font-size:.94rem;line-height:1.4}
.opt::before{content:"+";flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;background:rgba(0,222,171,.14);color:var(--mint-deep);font-weight:700;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.offers-foot{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;margin-top:clamp(26px,3.5vh,40px);color:var(--muted);font-size:.92rem}
.offers-foot span::before{content:"✓ ";color:var(--mint-deep);font-weight:700}

@media(max-width:900px){
  .offers-grid{grid-template-columns:1fr}
  .plan .who{min-height:0}
  .offer-noside{grid-template-columns:1fr}
  .opt-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){ .opt-grid,.pick-grid{grid-template-columns:1fr} }

/* reveals des nouveaux blocs */
.js .pick,.js .plan,.js .offer-noside,.js .options{
  opacity:0;transform:translateY(26px);
  transition:opacity .82s cubic-bezier(.16,1,.3,1) var(--rvd,0s),transform .82s cubic-bezier(.16,1,.3,1) var(--rvd,0s)}
.js .in.pick,.js .in.plan,.js .in.offer-noside,.js .in.options{opacity:1!important;transform:none!important}

@media(max-width:900px){ .lmedia .shot{aspect-ratio:4/3} }

/* ============================================================
   V5 — AIGUILLAGE À L'ÉCHELLE + PREUVES INCARNÉES + HUB MÉTIERS
   ============================================================ */

/* ---- « Je suis ___ à ___ » : phrase à trous, suggestions vivantes, CTA qui parle ---- */
.finder{margin-top:1.6em}
.finder .line{font-family:var(--serif);font-size:clamp(24px,2.7vw,36px);line-height:1.3;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em .4em;letter-spacing:-.01em}
.finder .blank{position:relative;display:inline-block;max-width:100%}
.finder input,.finder select{font:inherit;font-style:italic;color:var(--ink);background:transparent;border:0;border-bottom:2px solid rgba(12,14,28,.35);border-radius:0;padding:.02em .15em;outline:none;transition:border-color .3s}
.finder input{min-width:8ch;width:11ch;max-width:100%;caret-color:var(--mint-deep)}
.finder input::placeholder{color:var(--faint);font-style:italic;opacity:1}
.finder input:focus,.finder select:focus{border-bottom-color:var(--mint)}
.finder select{appearance:none;-webkit-appearance:none;padding-right:1.1em;cursor:pointer}
.finder .blank.sel::after{content:"";position:absolute;right:.15em;top:50%;width:.45em;height:.45em;border-right:2px solid var(--mint-deep);border-bottom:2px solid var(--mint-deep);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.finder .sugg{display:flex;flex-wrap:wrap;gap:8px;margin-top:1em;min-height:46px}
.finder .sg{display:inline-flex;align-items:center;gap:.55em;padding:10px 13px;background:var(--bg2);border:1px solid var(--line);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  font:inherit;font-weight:600;font-size:.93rem;color:var(--ink);cursor:pointer;text-align:left;
  opacity:0;transform:translateY(8px);animation:sgin .5s var(--e) forwards;transition:transform .3s var(--e),border-color .25s,box-shadow .3s var(--e)}
.finder .sg small{font-weight:500;font-size:.78rem;color:var(--faint);white-space:nowrap}
.finder .sg.soon small{color:var(--mint-deep)}
.finder .sg:hover,.finder .sg.active{transform:translateY(-2px);border-color:rgba(0,222,171,.6);box-shadow:0 14px 26px -18px rgba(12,14,28,.35)}
.finder .sg.active{box-shadow:0 0 0 3px rgba(0,222,171,.2)}
.finder .sg mark{background:rgba(0,222,171,.28);color:inherit;padding:0 .05em}
@keyframes sgin{to{opacity:1;transform:none}}
.finder .go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:1.1em}
.finder .hint{font-size:.86rem;color:var(--faint);margin-top:.7em;max-width:52ch}
@media(prefers-reduced-motion:reduce){.finder .sg{animation:none;opacity:1;transform:none}}

/* ---- preuves incarnées : visuel du projet + chiffre + ce qu'ils en disent + qui ---- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.case{display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line);clip-path:var(--bevel);overflow:hidden;transition:transform .45s var(--e),box-shadow .45s var(--e)}
.case:hover{transform:translateY(-5px);box-shadow:0 28px 54px -30px rgba(12,14,28,.4)}
.case-img{aspect-ratio:16/10;overflow:hidden;background:var(--cool)}
.case-img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .9s var(--e)}
.case:hover .case-img img{transform:scale(1.04)}
.case-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.case-num{font-family:var(--serif);font-size:clamp(34px,3.4vw,46px);color:var(--mint-deep);line-height:.95;letter-spacing:-.01em}
.case-num sup{font-size:.45em;vertical-align:.7em}
.case-ctx{color:var(--muted);font-size:.94rem;margin-top:.35em}
.case-quote{position:relative;font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.4;color:var(--ink);margin:.9em 0 0;padding-left:1.1em}
.case-quote::before{content:"«";position:absolute;left:0;top:-.08em;color:var(--mint);font-size:1.5em;line-height:1;font-style:normal}
.case-who{margin-top:.9em;font-size:.88rem;line-height:1.35}
.case-who b{display:block;font-weight:700;color:var(--ink)}
.case-who span{color:var(--faint)}
.case-go{margin-top:auto;padding-top:1em;color:var(--mint-deep);font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:.4em}
.case:hover .case-go .arrow{transform:translateX(5px)}
@media(max-width:900px){.cases{grid-template-columns:1fr}}

/* ---- page hub métiers : familles + filtre vivant ---- */
.hub-hero{padding:clamp(28px,4vh,56px) 0 clamp(20px,3vh,36px)}
.hub-hero h1{font-size:clamp(36px,5vw,64px)}
.hub-hero .sub{margin-top:.9em;font-size:clamp(17px,1.3vw,20px);color:var(--muted);max-width:56ch}
.hub-filter{display:flex;align-items:center;gap:14px;margin-top:1.4em;max-width:640px}
.hub-filter input{flex:1;min-width:0;font:inherit;font-size:1.05rem;padding:.85em 1.1em;background:var(--bg2);border:1px solid var(--line);clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);outline:none}
.hub-filter input:focus{border-color:var(--mint)}
.hub-filter span{color:var(--faint);font-size:.9rem;white-space:nowrap}
.fam{padding:clamp(22px,3vh,36px) 0;border-top:1px solid var(--line)}
.fam:first-child{border-top:0;padding-top:0}
.fam h2{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.05;margin-bottom:.7em}
.fam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mcard{display:flex;flex-direction:column;gap:.3em;padding:18px 20px;background:var(--bg2);border:1px solid var(--line);clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);transition:transform .35s var(--e),border-color .3s,box-shadow .35s var(--e)}
.mcard:hover{transform:translateY(-3px);border-color:rgba(0,222,171,.55);box-shadow:0 18px 34px -22px rgba(12,14,28,.35)}
.mcard b{font-weight:700;font-size:1.05rem;color:var(--ink)}
.mcard span{color:var(--muted);font-size:.92rem;line-height:1.4}
.mcard em{font-style:normal;margin-top:.5em;font-weight:600;font-size:.86rem;color:var(--mint-deep)}
.mcard.soon{border-style:dashed;background:transparent}
.mcard.soon em{color:var(--faint)}
.mcard.soon:hover em{color:var(--mint-deep)}
.mcard.hide{display:none}
.hub-empty{color:var(--muted);padding:1.5em 0}
@media(max-width:900px){.fam-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fam-grid{grid-template-columns:1fr}}

.js .finder,.js .case{opacity:0;transform:translateY(26px);transition:opacity .82s cubic-bezier(.16,1,.3,1) var(--rvd,0s),transform .82s cubic-bezier(.16,1,.3,1) var(--rvd,0s)}
.js .in.finder,.js .in.case{opacity:1!important;transform:none!important}

/* ---- V6 : hero accueil allégé + bande chiffres clés + légende photo ---- */
.lhero-fit{padding:clamp(30px,4.5vh,56px) 0 clamp(34px,5vh,60px)}
@media(min-width:901px){.lhero-fit .lhero-grid{grid-template-columns:1.3fr .7fr;align-items:start}.lhero-fit .lmedia{margin-top:.6em}}
.nlocal .lcap{margin-top:2.4em;font-size:.86rem;line-height:1.5;color:var(--faint)}   /* .nlocal p{margin:0} battait .lcap : rescopé */
.lcap b{color:var(--muted);font-weight:600}
.lcap b{color:var(--ink);font-weight:600}
@media(max-width:900px){.lhero-fit .lmedia{max-width:360px}}

/* ---- V8 : hero photo jusqu'en haut de l'écran, header adaptatif (pages métier, body.has-photo-hero) ---- */
.nlocal.has-photo-hero{padding-top:0}
.has-photo-hero .lhero-photo{min-height:100vh;min-height:100dvh;padding-top:calc(var(--pad) + var(--headh) + clamp(28px,5vh,80px))}
/* budget vertical : le hero tient dans 100dvh dès ~740px de haut, pour que le panneau reste collé au bas du cadre en haut de page */
.has-photo-hero .lhero-photo h1{font-size:clamp(36px,min(5.4vw,7.4vh),68px)}
.has-photo-hero .lhero-photo .sub{margin-top:.9em}
.has-photo-hero .lhero-photo .cta{margin-top:1.4em}
/* voile supplémentaire en haut : la nav blanche reste lisible quelle que soit la photo */
.has-photo-hero .lhero-photo .lhero-bg::after{background:
  linear-gradient(180deg,rgba(6,7,20,.62) 0,rgba(6,7,20,0) 30%),
  linear-gradient(96deg,rgba(6,7,20,.9) 0%,rgba(6,7,20,.74) 38%,rgba(6,7,20,.36) 72%,rgba(6,7,20,.2) 100%),
  linear-gradient(0deg,rgba(6,7,20,.6),rgba(6,7,20,0) 42%)}
.lhead{transition:background .4s var(--e),border-color .4s var(--e)}
.lbrand .lb-name,.lnav,.lnav a{transition:color .4s var(--e)}
/* état « sur la photo » (body:not(.past-hero)) : header verre sombre sans flou, filets du header ET du cadre en blanc transparent */
.has-photo-hero:not(.past-hero) .lhead{background:transparent;border-color:rgba(255,255,255,.26);backdrop-filter:none;-webkit-backdrop-filter:none}
.has-photo-hero:not(.past-hero) .lframe{border-color:rgba(255,255,255,.26)}
.lframe{transition:border-color .4s var(--e)}
.has-photo-hero:not(.past-hero) .lhead .lb-name{color:#fff}
.has-photo-hero:not(.past-hero) .lhead .lnav{color:rgba(255,255,255,.82)}
.has-photo-hero:not(.past-hero) .lhead .lnav a:hover{color:#fff}
@media(max-width:820px){
  .has-photo-hero .lhero-photo{padding-top:calc(var(--pad) + var(--headh) + 40px)}
  .has-photo-hero .lhero-photo .lhero-bg::after{background:linear-gradient(180deg,rgba(6,7,20,.72) 0%,rgba(6,7,20,.5) 40%,rgba(6,7,20,.82) 100%)}
}

/* ---- V9 : chiffres clés = panneau cloisonné dans le cadre, posé au bas du hero (la photo déborde dessous et sur les côtés) ---- */
.lhero-fit{position:relative;display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100vh - var(--pad) - var(--headh) - 14px);min-height:calc(100dvh - var(--pad) - var(--headh) - 14px);
  padding-top:clamp(18px,3vh,52px);padding-bottom:calc(var(--pad) + 104px)}
@media(min-width:901px) and (max-height:820px){.lhero-fit .lmedia .shot{aspect-ratio:4/3}}
.has-photo-hero .lhero-photo{padding-bottom:calc(var(--pad) + 104px)}
.keyfacts{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);z-index:3;
  background:rgba(255,255,255,.94);border:1px solid var(--frame);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:18px 0}
.keyfacts .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 28px}
.kf{display:inline-flex;align-items:baseline;gap:.55em;white-space:nowrap}
.kf b{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1;color:var(--ink);letter-spacing:-.02em}
.kf b span{font-size:.55em;color:var(--mint-deep)}
.kf .kl{font-size:.92rem;color:var(--muted)}
.kf .stars{color:var(--amber);font-size:.74rem;letter-spacing:.06em;margin-right:.45em}
.kf.cities{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.4vw,21px);color:var(--ink)}
@media(max-width:820px){
  .lhero-fit,.has-photo-hero .lhero-photo{padding-bottom:calc(var(--pad) + 196px)}
  .keyfacts{padding:14px 0}
  .keyfacts .wrap{justify-content:flex-start;gap:10px 22px}
  .kf.cities{width:100%;font-size:16px}
}

/* accueil : budget vertical sur écrans peu hauts (le hero tient dans 100dvh, panneau collé au bas du cadre) */
.lhero-fit h1{font-size:clamp(34px,min(5.2vw,7.4vh),66px)}
@media(min-width:901px) and (max-height:820px){
  .lhero-fit .sub{font-size:clamp(15px,1.15vw,17px);margin-top:.8em}
  .lhero-fit .finder{margin-top:1.2em}
  .lhero-fit .finder .sg:nth-child(n+5){display:none}
  .lhero-fit .finder .hint{display:none}
  .lhero-fit .finder .sugg{min-height:0}
}

/* pied de page : lien vers le hub métiers */
.lfoot .foot-all{color:var(--mint-deep);font-weight:600;margin-top:.4em}