/* ================= DevisCasa – design E (marine + azur, Arial) – 27 octobre 2026 ================= */
:root,:root[data-theme="dark"]{
  --bg:#FFFFFF;--surface:#FFFFFF;--ink:#101828;--muted:#5F6B7A;--line:#D9E1EC;--line2:#C9D3E2;
  --accent:#1F6BFF;--accent-ink:#FFFFFF;--accent-soft:#EAF1FF;--lime:#1F6BFF;--amber:#1F6BFF;--ok:#1F6BFF;
  --marine:#0E2A4D;--marine2:#0B2140;--azur:#1F6BFF;--azur2:#175BE0;--ciel:#EAF1FF;
  --r-lg:16px;--r-md:10px;--r-sm:8px;--shadow:0 40px 80px -40px rgba(14,42,77,.45);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#FFFFFF;--surface:#FFFFFF;--ink:#101828;--muted:#5F6B7A;--line:#D9E1EC;--line2:#C9D3E2;
  --accent:#1F6BFF;--accent-ink:#FFFFFF;--accent-soft:#EAF1FF;--lime:#1F6BFF;--amber:#1F6BFF;--ok:#1F6BFF;--warn:#FFF4CC;--bad:#C2361B;--shadow:0 40px 80px -40px rgba(14,42,77,.45)}}
body{background:#fff;color:var(--ink)}
/* ---- en-tête : marine partout ---- */
.topbar,[data-mfocus] .topbar{background:var(--marine)!important;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none!important}
.topbar .logo,.topbar .nav a{color:#fff}
.topbar .lg-sl,.topbar .lg-sl b{color:#C9D6EA}
.topbar .nav a:hover{color:#fff;text-decoration:underline}
.nav .nav-cta,.nav .nav-cta:hover{background:var(--azur);color:#fff;border-radius:8px;text-decoration:none}
.nav .nav-cta:hover{background:var(--azur2)}
/* ---- boutons ---- */
.btn,.btn.signal,.btn.signal:hover{background:var(--azur);border-color:var(--azur);color:#fff;border-radius:8px}
.btn:hover{background:var(--azur2);border-color:var(--azur2)}
.btn.ghost,.btn.secondary{background:#fff;color:var(--marine);border-color:var(--line2)}
/* ---- accueil : bandeau marine, titre centré, formulaire dessous ---- */
[data-mfocus] body,body[data-mfocus]{background:#fff}
[data-mfocus] main{background:#fff}
[data-mfocus] main>.wrap:first-child{max-width:none;padding:0;background:var(--marine)}
[data-mfocus] .hero,[data-mfocus]:not(.m-open) .hero{display:flex!important;flex-direction:column;align-items:center;gap:0;max-width:1180px;margin:0 auto;padding:clamp(1.6rem,4vh,3rem) 28px 0!important;min-height:0!important;color:#fff}
[data-mfocus]:not(.m-open) .hero-txt,[data-mfocus].f-started:not(.m-open) .hero-txt{display:flex!important;flex-direction:column;align-items:center;text-align:center;margin:0 0 clamp(1.2rem,3vh,2rem)!important;padding:0!important;align-self:center!important}
[data-mfocus]:not(.m-open):has([data-step="metier"].picked) .hero-txt{display:flex!important}
[data-mfocus] .hero h1{color:#fff;font-size:clamp(1.9rem,4.4vw,3.6rem)!important;line-height:1.06;letter-spacing:-.03em;max-width:17ch;margin:0 0 .6em}
[data-mfocus] .hero h1 span{color:#fff}
[data-mfocus] .hero-lead{display:block!important;color:#C9D6EA;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.5;max-width:42ch;margin:0 0 1.4rem}
/* barre Décrivez / Comparez / Choisissez */
[data-mfocus]:not(.m-open) .hero-txt .hero-stats,[data-mfocus]:not(.m-open):not(.f-started) .hero-txt .hero-stats{display:flex!important;gap:0;max-width:640px;width:100%;margin:0 auto!important;background:rgba(255,255,255,.08);border-radius:999px;padding:6px;text-align:left}
[data-mfocus] .hero-stats li{flex:1;border:0!important;padding:10px 16px!important;border-radius:999px;margin:0}
[data-mfocus] .hero-stats li:first-child{background:var(--azur)}
[data-mfocus] .hero-stats b,[data-mfocus] .hero-stats li.acc b{display:block;color:#fff!important;font-size:1rem!important;white-space:nowrap}
[data-mfocus] .hero-stats span{display:block;color:#C9D6EA;font-size:.86rem!important;line-height:1.3}
[data-mfocus] .hero-stats li:first-child span{color:#DCE8FF}
[data-mfocus] .hero-stats small{display:none}
/* la fiche formulaire, centrée, qui déborde sur le blanc */
[data-mfocus] .hero .tunnel,[data-mfocus] .hero>#quote{width:100%;max-width:640px;margin:0 auto!important;transform:translateY(90px);position:relative;z-index:2;background:#fff!important;border-radius:16px;box-shadow:var(--shadow);color:var(--ink)}
[data-mfocus] main>.wrap:first-child{padding-bottom:0}
[data-mfocus] main>.wrap:first-child+.wrap,[data-mfocus] #fonctionnement{padding-top:130px}
[data-mfocus].f-started main>.wrap:first-child{padding-bottom:0}
[data-mfocus].f-started main{padding-bottom:120px}
/* formulaire (toutes pages) */
.tunnel{border-radius:16px;border:1px solid var(--line)}
.tunnel legend{letter-spacing:-.02em}
.tunnel .topt span{border-radius:10px;border-color:var(--line)}
.tunnel .topt input:checked+span,.tunnel .topt.on span{background:var(--ciel);border-color:var(--azur);color:var(--azur2)}
.tunnel .topt svg{stroke:currentColor}
.tunnel .tprog{background:var(--ciel)}.tunnel .tprog i{background:var(--azur)}
.tunnel .treass{color:var(--muted)}
.tunnel input,.tunnel textarea,.tunnel select{border-radius:10px;border-color:var(--line2)}
.tunnel input:focus,.tunnel textarea:focus{border-color:var(--azur);box-shadow:0 0 0 3px var(--ciel)}
.chips label span,.chips .chip{border-radius:999px}
.chips input:checked+span{background:var(--azur);border-color:var(--azur);color:#fff}
/* sections */
.band{border:0}
.sec,h2.sec{letter-spacing:-.03em}
.how .steps-v li{background:var(--ciel);border-radius:14px;padding:1.4rem 1.3rem;border:0}
.steps li::before,.vsteps li::before{content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--azur);color:#fff;display:grid;place-items:center;font-size:1rem;font-weight:700}
.steps li,.vsteps li{border-top:0}
.how .steps-v li{border-top:0}
.hm{background:var(--marine)!important;border-radius:18px}
.hm-ok{background:var(--ciel);color:var(--azur2)}
.hm-o i{background:var(--marine);color:#fff}
.hm-o em{background:var(--azur)}
.hm-o2{}
.hm-btn{background:var(--azur);color:#fff}
.hm-chk li.on i,.hm-chk li i{border-color:#C9D3E2}
.hm-cap{color:#fff}.hm-head{color:#fff}.hm-head small{color:#8FB3FF}
.hm-play{border-color:rgba(255,255,255,.45);color:#fff}.hm-play.on{background:var(--azur);border-color:var(--azur);color:#fff}
.tiles li a{border-radius:12px;background:#fff;border:1.5px solid var(--line)}
.tiles li a:hover{border-color:var(--azur);color:var(--azur2)}
.tiles svg{stroke:var(--azur)}
#h-tr+.muted{color:var(--muted)}
section[aria-labelledby="h-tr"]{background:var(--ciel)}
.dark-block{background:var(--marine)!important;border-radius:18px}
.db-cards>div,.db-card{background:rgba(255,255,255,.07);border-radius:12px}
.db-cta{background:var(--azur);color:#fff;border-radius:10px}
.db-cta:hover{background:var(--azur2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{font-weight:700}
.faq summary::after,.faq summary::marker{color:var(--azur)}
.faq-cta{background:var(--ciel);border-radius:14px}
/* pied de page marine */
body>.wrap:last-of-type{max-width:none;padding:0}
footer{background:var(--marine);color:#AFC0DA;border:0;margin:0;padding:0 28px;font-size:.95rem}
footer>*{max-width:1180px;margin-left:auto;margin-right:auto}
footer .ftop{padding-top:3.2rem}
footer h2,footer a,footer .f-social a,footer .logo{color:#fff}
footer a:hover,footer .f-social a:hover{color:#fff;text-decoration:underline}
footer .f-slogan{color:#8FB3FF;font-weight:700}
footer .fmore{border-top:1px solid rgba(255,255,255,.15);margin-top:2.4rem}
footer .fmore summary::after{border-color:#AFC0DA}
footer .copy{border-top:1px solid rgba(255,255,255,.15);color:#AFC0DA;padding:1.3rem 0 2.2rem;margin:0 auto}
footer .m-legal{color:#AFC0DA}
footer .legal-info{color:#AFC0DA}
/* pages métiers / villes / guides / entreprises : accents */
.phero,.hero-e{color:var(--ink)}
.kicker{background:var(--ciel);color:var(--azur2);border-radius:999px}
.checks li::before{background:var(--azur)}
.checks{color:var(--muted)}
.side-card{border-radius:14px;border:1px solid var(--line)}
.ptable-wrap{border-radius:14px;border:1px solid var(--line)}
.answer{background:var(--ciel);border-left:4px solid var(--azur);border-radius:10px}
.guide-form.gf-top{background:var(--marine)}
.cta-band{background:var(--azur);color:#fff;border-radius:18px}
.cta-band .btn{background:#fff;border-color:#fff;color:var(--azur2)}
.vs th,.vs .ok{color:var(--azur2)}
.promo,.promise{background:var(--ciel);border-radius:14px}
.offer .tag{background:var(--ciel);color:var(--azur2)}
.float .ic{background:var(--ciel)}
.done .tick{background:var(--azur)}
.lieu-box .ok{background:var(--azur)}
.wa{background:var(--marine);color:#fff}
.ck{border-radius:14px}
.ck .btn.ok{background:var(--azur)}
/* liens */
a:hover{color:var(--azur2)}
.lnk{color:var(--azur2)}
@media (max-width:640px){
[data-mfocus]:not(.m-open) .hero-txt .hero-stats,[data-mfocus]:not(.m-open):not(.f-started) .hero-txt .hero-stats{flex-direction:column;border-radius:16px;gap:2px}
[data-mfocus] .hero-stats li{border-radius:12px;padding:8px 14px!important;display:flex;gap:8px;align-items:baseline}
[data-mfocus] .hero-stats b{min-width:6.4em}
[data-mfocus] .hero .tunnel,[data-mfocus] .hero>#quote{transform:translateY(60px)}
[data-mfocus] main>.wrap:first-child+.wrap,[data-mfocus] #fonctionnement{padding-top:100px}
}
/* une fois la demande lancée : titre compact, pas de phrase ni de barre, formulaire bien visible */
[data-mfocus].f-started .hero-lead,[data-mfocus].f-started .hero-stats{display:none!important}
[data-mfocus].f-started .hero h1{font-size:clamp(1.3rem,2.2vw,1.8rem)!important;margin-bottom:0}
[data-mfocus].f-started .hero-txt{margin-bottom:1rem!important}
[data-mfocus].f-started .hero{padding-top:1.2rem!important}
[data-mfocus].f-started .hero .tunnel{transform:translateY(40px)}
[data-mfocus].f-started main{padding-bottom:60px}
/* mots accentués dans les titres : azur */
:root{--amber-text:#1F6BFF}
.hero-e h1 span,.phero h1 span,.steps .n,.step .n,.big404,.pchips li::before{color:var(--azur)}
.hero-e .kpi.on,.kpis .on,.kpi-main{background:var(--azur)}
/* admin et espace : en-tête marine, onglets blancs */
body.adm header.top{background:var(--marine);color:#fff;padding:.8rem 1.2rem;margin:0 0 1.2rem;border:0;border-radius:0 0 12px 12px}
body.adm header.top .nav a,header.topbar .nav a{color:#fff}
body.adm header.top .nav a[aria-current],header.topbar .nav a[aria-current]{background:var(--azur);border-radius:8px;color:#fff}
.badge{background:var(--azur);color:#fff}
.admin main,.espace main{background:#fff}
/* formulaire lancé : la fiche reste collée sous le titre compact, sans décalage ; sur téléphone le titre disparaît */
[data-mfocus].f-started .hero .tunnel{transform:none!important}
[data-mfocus].f-started main>.wrap:first-child{padding-bottom:1.5rem}
[data-mfocus].f-started main{padding-bottom:0}
@media (max-width:640px),(max-height:820px){
[data-mfocus].f-started:not(.m-open) .hero-txt{display:none!important}
[data-mfocus].f-started .hero{padding-top:.6rem!important}
}
/* logo DEVISCASA (27 octobre) */
.lg-img,.top .lg-img{height:34px!important;width:auto}
footer .lg-img{height:30px!important}
@media (max-width:400px){.top .lg-img{height:26px!important}.topbar .lg-sl{margin-top:2px}}
.lg-sl{margin-top:5px}

/* ===== 27.10 soir : tout le premier écran tient sans défiler + photos du chantier ===== */
/* photos du chantier dans le bandeau marine (ordinateur) */
[data-mfocus] main>.wrap:first-child{position:relative}
[data-mfocus] main>.wrap:first-child>.fond-etapes{position:absolute;inset:0;z-index:0}
[data-mfocus] .fond-etapes::after{background:rgba(14,42,77,.80)}
[data-mfocus] .hero{position:relative;z-index:1}
/* mobile : bande photo en haut de la carte, voile clair */
[data-mfocus] .fond-bande::after{background:rgba(255,255,255,.25)}
/* premier écran compact : titre sur 2 lignes, phrase courte, barre fine */
[data-mfocus] .hero,[data-mfocus]:not(.m-open) .hero{padding-top:clamp(.8rem,2.6vh,2rem)!important}
[data-mfocus] .hero h1{font-size:clamp(1.7rem,min(3.6vw,5.4vh),3.1rem)!important;max-width:30ch;margin:0 0 .45em}
[data-mfocus] .hero-lead{font-size:clamp(.92rem,min(1.2vw,2.1vh),1.08rem)!important;max-width:92ch;margin:0 0 clamp(.6rem,1.8vh,1.2rem)}
[data-mfocus]:not(.m-open) .hero-txt,[data-mfocus].f-started:not(.m-open) .hero-txt{margin-bottom:clamp(.7rem,2vh,1.4rem)!important}
[data-mfocus] .hero-stats li{padding:clamp(5px,1vh,9px) 14px!important}
[data-mfocus] .hero-stats span{font-size:.8rem!important}
[data-mfocus] .hero .tunnel,[data-mfocus] .hero>#quote{transform:none;margin-bottom:0!important}
[data-mfocus] main>.wrap:first-child{padding-bottom:clamp(1rem,3vh,2rem)}
[data-mfocus] main>.wrap:first-child+.wrap,[data-mfocus] #fonctionnement{padding-top:clamp(2.5rem,6vh,4.5rem)}
[data-mfocus] .tunnel{padding-top:clamp(.9rem,2.2vh,1.6rem);padding-bottom:clamp(.9rem,2.2vh,1.6rem)}
[data-mfocus] .tunnel legend{font-size:clamp(1.1rem,2.6vh,1.4rem)}
[data-mfocus] .tunnel .jobs-h{margin:clamp(.3rem,.9vh,.6rem) 0 clamp(.25rem,.7vh,.5rem)}
[data-mfocus] .tunnel .topts{gap:clamp(5px,.9vh,8px)}
[data-mfocus] .tunnel .topt span{min-height:clamp(36px,5.4vh,46px)!important;padding-top:4px;padding-bottom:4px}
@media (max-height:720px){[data-mfocus]:not(.f-started) .hero-lead{display:none!important}}
@media (max-height:620px){[data-mfocus] .hero-stats span{display:none!important}}
/* téléphone : barre des 3 verbes sur une ligne, phrase masquée sous 800 px de haut */
@media (max-width:640px){
 [data-mfocus]:not(.m-open) .hero-txt .hero-stats,[data-mfocus]:not(.m-open):not(.f-started) .hero-txt .hero-stats{flex-direction:row;border-radius:14px;gap:2px;padding:4px}
 [data-mfocus] .hero-stats li{display:block;border-radius:10px;padding:6px 8px!important}
 [data-mfocus] .hero-stats b{min-width:0;font-size:.86rem!important}
 [data-mfocus] .hero-stats span{font-size:.68rem!important;line-height:1.25}
 [data-mfocus] .hero h1{font-size:clamp(1.35rem,3.4vh,1.75rem)!important;max-width:20ch}
}
@media (max-width:640px) and (max-height:900px){[data-mfocus]:not(.f-started) .hero-lead{display:none!important}}
@media (max-width:640px) and (max-height:700px){[data-mfocus] .hero-stats span{display:none!important}}
/* formulaire lancé : titre compact seul (ordinateur), plus rien au-dessus (téléphone) */
body[data-mfocus].f-started:not(.m-open) .hero-txt .hero-stats,body[data-mfocus].f-started .hero-lead{display:none!important}
@media (max-width:640px),(max-height:820px){html body[data-mfocus].f-started:not(.m-open):not(.x1):not(.x2) .hero-txt{display:none!important}}
/* le bandeau photo couvre tout l'écran une fois la demande lancée */
body[data-mfocus].f-started main>.wrap:first-child{min-height:calc(100svh - var(--hh));box-sizing:border-box}
/* accueil : liens vers les pages Comment ça marche, Nos métiers, Questions fréquentes */
.hero-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:clamp(.8rem,2.2vh,1.4rem) auto 0;padding:0 16px}
.hero-liens a{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:#fff!important;text-decoration:none;font-size:.95rem;font-weight:700;background:rgba(255,255,255,.06)}
.hero-liens a:hover,.hero-liens a:focus-visible{background:#fff;color:var(--marine,#0E2A4D)!important;border-color:#fff}
body.f-started .hero-liens,body:has([data-step="metier"].picked) .hero-liens{display:none}
@media (max-width:640px){.hero-liens{gap:8px}.hero-liens a{min-height:36px;padding:0 13px;font-size:.86rem}}
/* pages Comment ça marche / Nos métiers / Questions fréquentes : un seul écran */
.psec .crumbs{margin:clamp(.8rem,2vh,1.4rem) 0 0}
.psec .band{padding:clamp(1rem,3vh,2.2rem) 0 clamp(1.4rem,4vh,3rem)!important}
.psec h1.sec{font-size:clamp(1.7rem,3vw,2.4rem);margin:0 0 .6em;color:var(--marine,#0E2A4D)}
.psec .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.psec .sec-head h1{margin-bottom:.4em}
.psec-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:1.4rem 0 0}
.psec-cta span{color:#5F6B7A;font-size:.92rem}
.psec-plus{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem}
.psec-plus li{border-left:3px solid var(--azur,#1F6BFF);padding:.2rem 0 .2rem .8rem}
.psec-plus b{display:block;color:var(--marine,#0E2A4D)}
.psec-plus span{color:#5F6B7A;font-size:.94rem}
.psec .rv{opacity:1!important;transform:none!important}
/* v12 : tout tient sur un écran */
.hero-liens{gap:0;margin:clamp(.5rem,1.6vh,1rem) auto 0}
.hero-liens a{min-height:30px;padding:0 14px;border:0;background:none;font-size:.93rem;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px}
.hero-liens a+a{border-left:1px solid rgba(255,255,255,.3);border-radius:0}
.hero-liens a:hover,.hero-liens a:focus-visible{background:none;color:#fff!important;text-decoration-color:#fff}
@media (min-width:1100px){[data-mfocus]:not(.f-started) .hero-lead{max-width:none!important;white-space:nowrap;font-size:clamp(.9rem,min(1.05vw,2vh),1.02rem)!important}}
@media (max-height:860px){[data-mfocus] .hero-stats li{padding:7px 16px!important}[data-mfocus] .hero h1{margin-bottom:.35em!important}}
@media (max-width:640px){.hero-liens a{min-height:28px;padding:0 9px;font-size:.8rem}}
.psec .how{align-items:start;gap:clamp(24px,4vw,56px)}
.psec .how .steps-v{gap:.6rem}
.psec .how .steps-v li{padding:.8rem 1rem}
.psec .how .steps-v h3{font-size:1.08rem;margin:0 0 .15em}
.psec .how .steps-v p{font-size:.93rem;margin:0}
.psec .psec-plus{margin-top:.8rem}
.psec .psec-cta{margin-top:1rem}
@media (min-width:900px) and (max-height:900px){.psec .hm{zoom:.78}}
@media (min-width:900px) and (max-height:700px){.psec .hm{zoom:.66}}
@media (min-width:641px) and (max-height:820px){[data-mfocus]:not(.f-started) .tunnel .topt span{min-height:clamp(34px,4.9vh,42px)!important}[data-mfocus]:not(.f-started) .hero-txt{margin-bottom:.7rem!important}[data-mfocus]:not(.f-started) .hero-stats span{font-size:.8rem!important}}
@media (max-width:640px){.hero-liens{flex-wrap:nowrap;padding:0 4px;margin-top:.45rem}.hero-liens a{white-space:nowrap;font-size:clamp(.68rem,3.3vw,.8rem);padding:0 clamp(5px,2vw,9px);min-height:26px}
 [data-mfocus]:not(.f-started) .hero h1{margin-bottom:.3em!important}[data-mfocus]:not(.f-started) .hero-txt{margin-bottom:.6rem!important}}
@media (max-width:640px) and (max-height:860px){[data-mfocus]:not(.f-started) .tunnel .topt span{min-height:clamp(32px,5vh,42px)!important}}
@media (min-width:641px) and (max-height:800px){[data-mfocus]:not(.f-started) .hero h1{font-size:clamp(1.6rem,min(3.4vw,4.6vh),2.6rem)!important}}
/* v15 : pages compactes */
.psec .how .steps-v li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:start}
.psec .how .steps-v li::before{width:30px;height:30px;font-size:.9rem;grid-row:span 2}
.psec .how h1.sec{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:.45em}
.psec .psec-plus li{padding:.1rem 0 .1rem .7rem}
.psec .psec-plus span{font-size:.88rem;line-height:1.4}
@media (min-width:900px) and (max-height:800px){.psec .hm{zoom:.7}.psec .band{padding-top:.6rem!important}.psec .crumbs{margin-top:.6rem}}
@media (max-width:640px){
 .psec .crumbs{margin:.6rem 0 0;font-size:.82rem}
 .psec .band{padding:.5rem 0 1rem!important}
 .psec h1.sec,.psec .how h1.sec{font-size:1.55rem;margin:0 0 .4em}
 .psec .sec-head .muted{font-size:.78rem;margin:-.3rem 0 .5rem}
 .psec .tiles{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
 .psec .tiles a{padding:8px 6px!important;min-height:0!important;gap:4px!important;font-size:.76rem!important;line-height:1.2;text-align:center;align-items:center!important;justify-content:center}
 .psec .tiles svg{width:18px!important;height:18px!important}
 .psec .faq-grid{gap:.8rem!important}
 .psec .faq details summary{font-size:.92rem;padding:.7rem 0!important}
 .psec .faq-cta{padding:1rem!important}
 .psec .faq-cta p{display:none}
 .psec .faq-cta h3{font-size:1.02rem;margin:0 0 .6rem}
 .psec .how{display:flex!important;flex-direction:column}
 .psec .how>div:last-child{order:-1}
 .psec .how .steps-v li{padding:.55rem .8rem}
 .psec .how .steps-v p{font-size:.84rem;line-height:1.4}
 .psec .psec-plus{display:none}
 .psec .psec-cta{margin-top:.7rem}
 .psec .hm{zoom:.62;margin:0 auto}
}
@media (max-width:640px){
 .psec .how>div:last-child{display:contents}
 .psec .how h1.sec{order:-2}.psec .how .hm{order:-1}.psec .how .psec-cta{order:0;justify-content:center}
 .psec .how .steps-v{display:none}
 .psec .faq-cta h3{display:none}
 .psec .faq-cta{background:none!important;box-shadow:none!important;border:0!important;padding:0!important}
}
@media (max-width:640px) and (max-height:700px){.psec .hm{zoom:.52}.psec .tiles a{padding:6px 4px!important}.psec .faq details summary{padding:.5rem 0!important;font-size:.86rem}}
@media (min-width:641px) and (max-width:899px){.psec .how{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:24px}.psec .hm{zoom:.62}.psec .psec-plus span{font-size:.84rem}}
/* en-tête téléphone : logo + bouton seulement (évite le débordement à droite) */
@media (max-width:640px){
 header.top .nav a:not(.nav-cta){display:none!important}
 header.top .nav .nav-cta{white-space:nowrap;padding:8px 12px!important;font-size:.84rem!important;min-height:0}
 header.top{gap:10px}
 .hero-liens a{font-size:min(.8rem,3vw)!important;padding:0 min(8px,1.6vw)!important}
 .psec .tiles span{font-size:.76rem!important;letter-spacing:0}
}
@media (max-width:360px){
 header.top .nav .nav-cta{padding:7px 9px!important;font-size:.76rem!important}
 header.top .lg-img{height:22px!important;width:auto}
}
@media (max-width:340px){.hero-liens{flex-wrap:wrap;row-gap:2px}.hero-liens a{font-size:.74rem!important}}
.ck{max-width:calc(100vw - 24px);box-sizing:border-box}
@media (max-width:380px){.hero-liens a{padding:0 4px!important;font-size:min(.8rem,2.9vw)!important}}
/* flèche « page suivante » */
.suite{display:flex;flex-direction:column;align-items:center;gap:0;width:max-content;margin:clamp(.4rem,1.4vh,1rem) auto 0;padding:2px 10px 6px;color:var(--marine);text-decoration:none;font-size:.8rem;font-weight:700;opacity:.85}
.suite svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:suiteB 1.8s ease-in-out infinite}
.suite:hover,.suite:focus-visible{opacity:1}
.hero .suite{color:#fff}
@keyframes suiteB{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.suite svg{animation:none}}
body.f-started .hero .suite,body:has([data-step="metier"].picked) .hero .suite{display:none}
.psec>.suite{margin-top:-1rem;margin-bottom:.4rem}
@media (max-width:640px){.suite{font-size:.72rem;padding:0 8px 2px}.suite svg{width:22px;height:22px}.hero .suite{margin-top:.1rem}}
/* flèche : posée en bas de l'écran, sans prendre de place */
.suite,.psec>.suite{position:fixed;left:50%;bottom:max(4px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;padding:4px 10px;z-index:30;transition:opacity .2s}
.suite span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.suite svg{width:30px;height:30px}
html.suite-bas .suite{opacity:0;pointer-events:none}
@media (max-width:640px){.suite svg{width:26px;height:26px}}
.suite,.psec>.suite{bottom:auto;top:calc(100% - 44px)}
@media (min-width:1000px) and (max-height:900px){[data-mfocus]:not(.f-started) .hero h1{max-width:none!important;white-space:nowrap;font-size:clamp(1.6rem,min(2.55vw,4.6vh),2.5rem)!important}[data-mfocus]:not(.f-started) .hero h1 br{display:none}}
@media (max-width:640px){[data-mfocus]:not(.f-started) .tunnel .topt span{min-height:clamp(30px,4.3vh,38px)!important}[data-mfocus]:not(.f-started) .tunnel .topts{gap:5px}}
@media (max-width:640px) and (max-height:700px){[data-mfocus]:not(.f-started) .hero-stats{padding:3px!important}[data-mfocus]:not(.f-started) .hero-stats li{padding:5px 9px!important}}
@media (min-width:900px) and (max-height:740px){.psec .hm{zoom:.64}}
@media (max-width:640px) and (max-height:660px){.psec .hm{zoom:.48}}
@media (min-width:641px) and (max-height:740px){.psec .psec-plus span{display:none}.psec .how .steps-v li{padding:.6rem .9rem}}
@media (max-width:640px) and (max-height:660px){[data-mfocus]:not(.f-started) .hero-stats span{display:none!important}}
@media (max-width:640px) and (max-height:700px){[data-mfocus]:not(.f-started) .hero h1{max-width:none!important;font-size:clamp(1.15rem,3.2vh,1.4rem)!important}}
main.psec{padding-bottom:40px;position:relative}
main.psec .band{padding-bottom:clamp(.6rem,2vh,1.4rem)!important}
main.psec:has(.tiles){background:#EAF1FF}
/* Questions fréquentes : questions + pied de page entier sur un seul écran */
body.p-faq main.psec{padding-bottom:0}
body.p-faq .psec .crumbs{margin-top:.5rem;font-size:.85rem}
body.p-faq .psec .band{padding:.2rem 0 clamp(.6rem,2vh,1.2rem)!important}
body.p-faq .psec h1.sec{font-size:clamp(1.5rem,2.4vw,2rem);margin:0 0 .25em}
body.p-faq .psec .faq details summary{padding:clamp(.35rem,1.1vh,.7rem) 0!important;font-size:.98rem}
body.p-faq .psec .faq-grid{align-items:start}
body.p-faq .psec .faq-cta{padding:1.1rem 1.3rem!important}
body.p-faq .psec .faq-cta h3{font-size:1.1rem;margin:0 0 .4rem}
body.p-faq .psec .faq-cta p{font-size:.9rem;line-height:1.45;margin:0 0 .8rem}
body.p-faq footer{font-size:.84rem}
body.p-faq footer .ftop{padding-top:clamp(.9rem,2.4vh,1.6rem);grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:1rem 2.5rem}
body.p-faq footer .ftop>div>*{margin:0 0 .35rem}
body.p-faq footer .lg-img{height:26px!important}
body.p-faq footer h2{font-size:.86rem;margin:0 0 .35rem}
body.p-faq footer .finfo{columns:3;column-gap:1.5rem;margin:0;padding:0}
body.p-faq footer .finfo li{margin:0 0 .2rem;line-height:1.35}
body.p-faq footer .fmore{margin-top:clamp(.5rem,1.4vh,1rem)}
body.p-faq footer .fmore summary{padding:.35rem 0;min-height:34px}
body.p-faq footer .copy{padding:.5rem 0 .7rem}
@media (max-width:640px){
 body.p-faq .psec h1.sec{font-size:1.35rem}
 body.p-faq .psec .faq details summary{font-size:.86rem;padding:.35rem 0!important}
 body.p-faq .psec .faq-grid{gap:.4rem!important}
 body.p-faq .psec .faq-cta .btn{min-height:40px;padding-top:.5rem;padding-bottom:.5rem}
 body.p-faq footer{padding:0 16px;font-size:.78rem}
 body.p-faq footer .ftop{grid-template-columns:1fr;gap:.5rem}
 body.p-faq footer .ftop>div{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .8rem}
 body.p-faq footer .ftop>div>p[style]{display:none}
 body.p-faq footer .ftop>div>*{margin:0}
 body.p-faq footer .finfo{columns:2;column-gap:1rem}
 body.p-faq footer .finfo li{margin:0 0 .1rem}
 body.p-faq footer .fmore{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 .6rem;margin-top:.4rem}
 body.p-faq footer .fmore details{border-bottom:0}
 body.p-faq footer .fmore details[open]{grid-column:1/-1;grid-row:2}
 body.p-faq footer .fmore summary{min-height:30px;padding:.2rem 0}
 body.p-faq footer .fmore summary h2{font-size:.76rem;margin:0}
 body.p-faq footer .copy{padding:.3rem 0 .5rem}
}
body.p-faq .psec .faq details{padding:clamp(.25rem,.9vh,.6rem) 0!important}
body.p-faq .psec .crumbs{padding-top:.4rem}
body.p-faq .psec .faq details[open] p{margin:.2rem 0 .4rem;font-size:.92rem}
@media (max-width:640px){body.p-faq .psec .faq details{padding:.15rem 0!important}}
body.p-faq footer .ftop>div>p[style]{max-width:46ch!important}
@media (min-width:641px) and (max-height:820px){body.p-faq .psec .faq details{padding:.1rem 0!important}body.p-faq .psec .faq details summary{padding:.45rem 0!important}body.p-faq footer .ftop{padding-top:.8rem}}
@media (max-width:640px){
 body.p-faq footer li a{padding:.25rem 0;min-height:30px}
 body.p-faq footer .ftop>div .f-social{margin-left:auto}
 body.p-faq .psec-cta,body.p-faq .psec .faq-cta{margin-top:.2rem}
 body.p-faq .psec .faq details summary{min-height:0}
}
@media (min-width:641px) and (max-width:899px){body.p-faq .psec .faq-grid{display:grid!important;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)!important;gap:1.5rem!important}body.p-faq .psec .faq-cta p{font-size:.85rem}}
@media (max-width:640px){body.p-faq .psec .band{padding-bottom:.6rem!important}body.p-faq .psec .crumbs{font-size:.78rem;padding-top:.2rem;margin-top:.3rem}body.p-faq .psec .faq details summary{padding:.3rem 0!important}body.p-faq footer .ftop{padding-top:.7rem}}
body.p-faq{background:var(--marine)}
body.p-faq main.psec{background:#fff}
@media (max-width:640px){body.p-faq footer .ftop>div .f-social{margin-left:0}}
/* Décrivez / Comparez / Choisissez en étapes reliées (option A) */
html body[data-mfocus]:not(.x1):not(.x2):not(.x3) .hero-txt ul.hero-stats.verbes{background:none!important;padding:0!important;border-radius:0!important;counter-reset:v;max-width:660px!important;gap:0!important;flex-direction:row!important;align-items:flex-start}
html body[data-mfocus]:not(.x1):not(.x2):not(.x3) .hero-txt ul.hero-stats.verbes li{background:none!important;position:relative;text-align:center;display:flex!important;flex-direction:column!important;align-items:center!important;padding:0 6px!important;counter-increment:v;border-radius:0!important}
html body[data-mfocus]:not(.x1):not(.x2):not(.x3) .hero-txt ul.hero-stats.verbes li::before{content:counter(v);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2px solid #4D6A93;background:#0E2A4D;color:#C9D6EA;font-weight:700;font-size:14px;margin:0 auto 6px;position:relative;z-index:1;box-sizing:border-box}
html body[data-mfocus]:not(.x1):not(.x2):not(.x3) .hero-txt ul.hero-stats.verbes li:first-child::before{background:#1F6BFF;border-color:#1F6BFF;color:#fff}
html body[data-mfocus]:not(.x1):not(.x2):not(.x3) .hero-txt ul.hero-stats.verbes li+li::after{content:"";position:absolute;top:15px;right:calc(50% + 15px);width:calc(100% - 30px);height:2px;background:#4D6A93}
html body[data-mfocus]:not(.x1):not(.x2):not(.x3) .hero-txt ul.hero-stats.verbes li span{color:#C9D6EA!important}
@media (max-width:640px){html body[data-mfocus]:not(.x1):not(.x2):not(.x3) .hero-txt ul.hero-stats.verbes li b{font-size:.92rem!important}html body[data-mfocus]:not(.x1):not(.x2):not(.x3) .hero-txt ul.hero-stats.verbes li span{font-size:.72rem!important}html body[data-mfocus]:not(.x1):not(.x2):not(.x3) .hero-txt ul.hero-stats.verbes li::before{width:26px;height:26px;font-size:12px;margin-bottom:4px}html body[data-mfocus]:not(.x1):not(.x2):not(.x3) .hero-txt ul.hero-stats.verbes li+li::after{top:13px;right:calc(50% + 13px);width:calc(100% - 26px)}}
@media (max-width:640px) and (max-height:700px){html body[data-mfocus]:not(.x1):not(.x2):not(.x3) .hero-txt ul.hero-stats.verbes li::before{width:22px;height:22px;font-size:11px;margin-bottom:2px;border-width:1.5px}html body[data-mfocus]:not(.x1):not(.x2):not(.x3) .hero-txt ul.hero-stats.verbes li+li::after{top:11px;right:calc(50% + 11px);width:calc(100% - 22px)}html body[data-mfocus]:not(.x1):not(.x2):not(.x3) .hero-txt ul.hero-stats.verbes li b{font-size:.84rem!important}}
@media (max-width:640px){[data-mfocus]:not(.f-started) .hero{padding-top:clamp(.8rem,2.2vh,1.4rem)!important}[data-mfocus]:not(.f-started) .hero-txt{margin-bottom:.5rem!important}}
@media (max-width:640px){[data-mfocus]:not(.f-started) .tunnel .topt span{min-height:clamp(30px,4vh,36px)!important}.suite,.psec>.suite{padding:0 10px 2px}}

/* enchaînement des pages : pas de pied de page, l'écran est rempli, la page suivante glisse depuis le bas */
body.p-suite{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
body.p-suite>.wrap:has(>footer){display:none}
body.p-suite>main{flex:1;display:flex;flex-direction:column}
body.p-suite>main>*{flex:none}
body.p-suite[data-mfocus]{background:var(--marine)}
body.p-suite[data-mfocus]>main>.wrap:first-child{flex:1}
body.p-suite>main.psec>.band{flex:1}
body.p-suite>main.psec{padding-bottom:0}
body.p-suite>main.psec>.band{padding-bottom:48px!important}
::view-transition-old(entete){display:none}
::view-transition-new(entete){animation:none}
::view-transition-group(entete){animation:none}
html:active-view-transition-type(suite)::view-transition-old(root){animation:.5s cubic-bezier(.45,0,.2,1) both dcHautSort}
html:active-view-transition-type(suite)::view-transition-new(root){animation:.5s cubic-bezier(.45,0,.2,1) both dcBasEntre}
html:active-view-transition-type(retour)::view-transition-old(root){animation:.5s cubic-bezier(.45,0,.2,1) both dcBasSort}
html:active-view-transition-type(retour)::view-transition-new(root){animation:.5s cubic-bezier(.45,0,.2,1) both dcHautEntre}
@keyframes dcHautSort{to{transform:translateY(-100%)}}
@keyframes dcBasEntre{from{transform:translateY(100%)}}
@keyframes dcBasSort{to{transform:translateY(100%)}}
@keyframes dcHautEntre{from{transform:translateY(-100%)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none!important}}
body.p-suite>main>.wrap{width:100%;box-sizing:border-box}
body.p-suite[data-mfocus]>main>.wrap:first-child,body.p-suite>main>.band{max-width:none;align-self:stretch;margin-left:0;margin-right:0}
body.p-suite[data-mfocus]>main{background:var(--marine)}
body.p-suite[data-mfocus] main ul.stats.rv,body.p-suite[data-mfocus] .m-intro{display:none!important}
/* téléphone : mots courts sous les étapes, toujours visibles */
.verbes em.court{display:none}
@media (max-width:640px){html body[data-mfocus]:not(.x1):not(.x2):not(.x3) .hero-txt ul.hero-stats.verbes li span{display:none!important}html body[data-mfocus]:not(.x1):not(.x2):not(.x3) .hero-txt ul.hero-stats.verbes li em.court{display:block;font-style:normal;font-size:.74rem;line-height:1.25;color:#8FB3FF;font-weight:700;margin-top:1px}}
@media (max-width:640px) and (max-height:800px){[data-mfocus]:not(.f-started) .hero h1{max-width:none!important;font-size:clamp(1.15rem,3.1vh,1.45rem)!important;margin-bottom:.25em!important}[data-mfocus]:not(.f-started) .tunnel .topt span{min-height:clamp(29px,4.4vh,34px)!important}[data-mfocus]:not(.f-started) .tunnel legend{font-size:1.15rem!important}}
@media (max-width:640px) and (max-height:680px){[data-mfocus]:not(.f-started) .tunnel .topts{gap:4px!important}[data-mfocus]:not(.f-started) .tunnel .topt span{min-height:28px!important;font-size:.86rem}}
@media (max-width:640px){html body[data-mfocus]:not(.x1):not(.x2):not(.x3) .hero-txt ul.hero-stats.verbes li em.court{white-space:nowrap;font-size:min(.74rem,3vw)}}
/* pages ville : article long avec images */
.article-ville .narrow{max-width:760px}
.article-ville h2.sec{margin-top:2.4rem;font-size:clamp(1.35rem,2.2vw,1.75rem)}
.article-ville p,.article-ville li{line-height:1.65}
.art-intro{font-size:1.1rem;color:var(--marine)}
.art-som{background:var(--ciel);border-radius:14px;padding:1rem 1.3rem;margin:1.4rem 0 .5rem}
.art-som b{display:block;color:var(--marine);margin-bottom:.4rem}
.art-som ol{margin:0;padding-left:1.2rem;columns:2;column-gap:2rem}
.art-som li{margin:.15rem 0;line-height:1.4}
.art-som a{color:var(--azur2)}
.art-fig{margin:1.6rem 0;border-radius:16px;overflow:hidden;background:#EEF2F7}
.art-fig img{display:block;width:100%;height:auto}
.art-fig figcaption{font-size:.88rem;color:#5F6B7A;padding:.6rem .9rem .8rem;background:#F4F7FB}
.art-box{border:1px solid #D9E1EC;border-left:4px solid var(--azur);border-radius:12px;padding:1rem 1.2rem;margin:1.4rem 0;background:#fff}
.art-box h3{margin:0 0 .5rem;font-size:1.08rem;color:var(--marine)}
.art-steps{counter-reset:as;list-style:none;padding:0;margin:1rem 0;display:grid;gap:.7rem}
.art-steps li{counter-increment:as;position:relative;padding:.1rem 0 .1rem 2.6rem}
.art-steps li::before{content:counter(as);position:absolute;left:0;top:.1rem;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--azur);color:#fff;font-weight:700;display:grid;place-items:center;font-size:.9rem}
.art-cta{margin:2.2rem 0 0;padding:1.4rem 1.5rem;border-radius:16px;background:var(--marine);color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;justify-content:space-between}
.art-cta p{margin:0;color:#DCE8FF;max-width:44ch}.art-cta b{color:#fff}
@media (max-width:640px){.art-som ol{columns:1}.art-cta .btn{width:100%;text-align:center}}
.article-ville h2.sec{max-width:none}
.art-fig img[height="1250"]{max-height:540px;object-fit:cover;object-position:center 40%}
/* 16 métiers (parquet) : grilles qui restent sur un écran */
@media (min-width:1100px){.psec .tiles{grid-template-columns:repeat(8,minmax(0,1fr))!important}.psec .tiles a{padding:1rem .8rem!important}.psec .tiles span{font-size:clamp(.82rem,.95vw,1.02rem)!important;overflow-wrap:anywhere}}
@media (min-width:641px) and (max-width:1099px){.psec .tiles{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (max-width:640px){.psec .tiles{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}.psec .tiles span{font-size:.7rem!important}}
[data-mfocus]:not(.f-started) [data-step="metier"] .topts{gap:3px!important}

@media (max-width:400px) and (max-height:700px){.top .lg-img{height:23px!important}.topbar .lg-sl{margin-top:1px}}