dans un titre) */
.h1 .hl,.hero h1 .hl{background:linear-gradient(100deg,var(--accent),var(--magenta) 50%,var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;animation:shine 5s linear infinite;padding-right:.14em;margin-right:-.14em}
@keyframes shine{to{background-position:200% center}}
/* CARTES — reflet au survol, icône qui s'anime, titre qui s'éclaire */
.card{position:relative;overflow:hidden}
.card::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);pointer-events:none}
.card:hover::after{animation:sweep .85s ease}
@keyframes sweep{to{left:160%}}
.card:hover{border-color:rgba(200,29,107,.35)}
.card .ic{transition:transform .25s ease}
.card:hover .ic{transform:scale(1.12) rotate(-4deg)}
.card h3{transition:color .2s}
.card:hover h3{color:var(--accent)}
/* NAV — survol : fondu uniquement quand un lien est réellement survolé (pas les espaces) */
@media(hover:hover) and (pointer:fine){
.nav-links:has(a:not(.nav-cta):hover) a:not(.nav-cta):not(:hover){opacity:.35}
.nav-links a:not(.nav-cta):hover{opacity:1;color:var(--lime)}
}
/* NAV — soulignement animé */
.nav-links a:not(.nav-cta){position:relative}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:13px;bottom:5px;height:2px;width:0;background:var(--lime);transition:width .25s}
.nav-links a:not(.nav-cta):hover::after{width:calc(100% - 26px)}
/* REVEAL — cascade dans les grilles */
.grid .reveal:nth-child(2){transition-delay:.07s}
.grid .reveal:nth-child(3){transition-delay:.13s}
.grid .reveal:nth-child(4){transition-delay:.19s}
.grid .reveal:nth-child(5){transition-delay:.25s}
.grid .reveal:nth-child(6){transition-delay:.31s}
/* PROOFBAR — chiffres qui réagissent */
.proofbar .p{transition:transform .25s}
.proofbar .p:hover{transform:translateY(-4px)}
/* BOUTONS — léger reflet */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);pointer-events:none}
.btn:hover::after{animation:sweep .7s ease}
/* RELATED — relief au survol */
.related a:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,20,30,.08)}
/* STEPS — numéro qui prend du relief */
.step{transition:transform .25s,box-shadow .25s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
/* Showcase vidéo — cadre arrondi premium (lecture au clic) */
.video-frame{max-width:760px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#000}
.video-frame video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#000}
.video-cap{text-align:center;color:var(--muted);font-size:.86rem;margin-top:12px}
/* Bande vidéo immersive — fond animé muet, façon Volt */
.video-band{position:relative;overflow:hidden;border-radius:var(--radius-lg);min-height:420px;display:grid;place-items:center;max-width:var(--maxw);margin:0 auto}
@media(max-width:600px){.video-band{min-height:300px}.video-band .vb-in{padding:40px 18px}}
.video-band>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.video-band .vb-ov{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,11,15,.42),rgba(11,11,15,.66))}
.video-band .vb-in{position:relative;z-index:2;text-align:center;color:#fff;padding:56px 24px;max-width:680px}
.video-band .vb-in .eyebrow{color:#fff;justify-content:center}.video-band .vb-in .eyebrow::before{background:#fff}
.video-band .vb-in h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.6rem);margin:12px 0 14px}
.video-band .vb-in p{color:rgba(255,255,255,.9);margin-bottom:22px}
/* =====================================================================
COUCHE MOBILE-FIRST — confort tactile, densité, safe-area (2026)
===================================================================== */
a,button,input,textarea,select{touch-action:manipulation}
body{-webkit-tap-highlight-color:transparent}
input,textarea,select{font-size:16px}/* évite le zoom auto iOS */
@media(max-width:600px){
.wrap{padding:0 18px}
/* rythme vertical resserré : plus de valeur par écran */
.sec{padding:26px 0!important}
.hero{padding:var(--s5) 0 var(--s3)}
.sec-head{margin-bottom:var(--s3)}
.h1,h1{font-size:clamp(1.5rem,6.4vw,1.85rem)!important;line-height:1.12}
.h2,h2{font-size:clamp(1.28rem,5.2vw,1.55rem)!important;line-height:1.16}
h3{font-size:1.05rem!important}
.lead{font-size:.94rem!important;line-height:1.4}
p{font-size:.93rem}
/* CTA pleine largeur, pouce-friendly */
.hero-cta{flex-direction:column;align-items:stretch;gap:10px}
.hero-cta .btn{width:100%;justify-content:center;min-height:50px}
.band .btn{width:100%;justify-content:center;min-height:50px}
.band{padding:var(--s5) var(--s4)}
.btn{font-size:.94rem;padding:13px 18px}
/* cartes plus denses */
.card{padding:18px 16px}
.step{padding:16px 14px}
.checks{padding:18px 16px}
.grid-2,.grid-3,.grid-4{gap:12px!important}
.faq-q{padding:14px 16px;font-size:.98rem;min-height:50px}
.faq-q .pl{gap:7px}
.faq-q .pl::before{font-size:.7rem}
.faq-q .pl::after{width:28px;height:28px;font-size:1.1rem}
.faq-a{padding:0 16px}
.faq details:not(.fcol)>summary{grid-template-columns:1fr;gap:10px;min-height:0;padding:16px;font-size:.98rem}
.faq details:not(.fcol)>summary::after{justify-self:start;padding:7px 11px;font-size:.72rem}
.faq details:not(.fcol)>:not(summary){padding:16px}
/* footer : liens tapables */
.ft-grid a{padding:10px 0;min-height:44px;display:flex;align-items:center;width:fit-content}
.ft-bottom{padding-bottom:env(safe-area-inset-bottom)}
footer.ft{margin-top:var(--s5)}
.crumb{font-size:.8rem}
.crumb a{display:inline-block;padding:6px 2px}
}
@media(max-width:380px){
.wrap{padding:0 14px}
.h1{font-size:1.55rem}
}
/* paysage mobile : menu utilisable */
@media(max-height:480px) and (max-width:880px){
.nav-links{max-height:calc(100dvh - 60px);overflow-y:auto}
}
/* NAV — bannière flottante en pilule + mini-menu au scroll */
header.nav{transition:transform .35s ease,border-radius .35s ease,top .35s ease,box-shadow .35s ease,max-width .35s ease}
header.nav.float{top:12px;max-width:min(1180px,calc(100% - 28px));margin:0 auto;border-radius:100px;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.4);background:rgba(18,18,24,.95)}
header.nav.float .nav-inner{padding:10px 22px}
header.nav.hide{transform:translateY(-140%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none}
header.nav.hide .burger{display:none}
/* le menu plein écran reste inset:0 même en mode pilule */
.nav-mini{position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:140;display:flex;gap:10px;align-items:center;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.3s}
.nav-mini.show{opacity:1;visibility:visible;transform:none}
.nav-mini .mini-cta{background:var(--lime,#d8ff3e);color:#16161e;font-weight:800;font-size:.95rem;padding:14px 22px;border-radius:100px;box-shadow:0 12px 30px rgba(0,0,0,.35);white-space:nowrap}
.nav-mini .mini-cta:hover{background:#fff}
.nav-mini .mini-burger{width:50px;height:50px;border-radius:50%;background:#16161e;color:#f7f4ee;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.35);font-size:1.25rem;line-height:1}
.nav-mini .mini-burger:hover{color:var(--lime,#d8ff3e)}
@media(prefers-reduced-motion:reduce){header.nav,.nav-mini{transition:none}}
/* ===== NAV transparente à l'arrivée, adaptée au fond de chaque page ===== */
header.nav:not(.float){background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Thème CLAIR (défaut : hero crème) — logo + liens foncés, pilule blanche au scroll */
body:not(.nav-dark) header.nav .nav-links a:not(.nav-cta){color:#16161e}
body:not(.nav-dark) header.nav .nav-links a:not(.nav-cta):hover{color:var(--accent)}
body:not(.nav-dark) header.nav .burger{color:#16161e}
body:not(.nav-dark) header.nav .nav-profile{color:#16161e}
body:not(.nav-dark) header.nav .nav-profile .pf-head{fill:var(--accent)}
body:not(.nav-dark) header.nav.float{background:#faf8f3;border-color:rgba(20,20,26,.09);box-shadow:0 16px 40px rgba(0,0,0,.13);backdrop-filter:none;-webkit-backdrop-filter:none}
body:not(.nav-dark) header.nav .nav-links.open a:not(.nav-cta){color:#f7f4ee}
body:not(.nav-dark) header.nav:has(.nav-links.open) .burger{color:#f7f4ee}
/* Thème SOMBRE (hero foncé : accueil) — garde blanc + pilule sombre */
body.nav-dark header.nav.float{background:#16161e;border-color:rgba(255,255,255,.14);backdrop-filter:none;-webkit-backdrop-filter:none}
/* Mobile : on retire la pilule "On en parle ?" flottante qui chevauchait le contenu (le burger reste pour le menu) */
@media(max-width:760px){.nav-mini .mini-cta{display:none!important}}
/* ===== Aération globale : de l'air entre un bloc/bande et le texte qui le précède (évite les blocs collés) ===== */
.sec p + .band,.sec p + .related,.sec p + blockquote,.sec p + .grid,.sec p + .cmp-scroll,.sec p + .pl-grid,.sec .lead + .band,.sec p + .steps,.sec p + .svc-grid,.sec p + .offers-grid{margin-top:var(--s5)}
.band + *,blockquote + *{margin-top:0}
/* ===== Correctif bannière : sur les pages hero (classe body.hero-page), header en overlay FIXE déterministe — marge haute suffisante pour ne jamais chevaucher titre/logo. Fonctionne sans :has (compatible aperçu). Accueil (hero-screen) et pages sans hero non concernés. ===== */
body.hero-page header.nav{position:fixed;left:0;right:0}
body.hero-page .hero{padding-top:108px}
@media(max-width:880px){body.hero-page .hero{padding-top:100px}}
@media(max-width:600px){body.hero-page .hero{padding-top:92px}}
/* header pages intérieures : fond dépoli OPAQUE même hors "float", pour masquer le contenu qui défile dessous (supprime le chevauchement visible au scroll). Accueil (body.nav-dark) non concerné. */
body.hero-page header.nav:not(.float){background:rgba(247,244,238,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(20,20,26,.06)}
/* ===================================================================
FAIL-SAFE APPARITION (2026-07-14) — le contenu reste TOUJOURS visible.
L'animation .reveal (opacity:0 + transition, révélée au scroll par JS)
pouvait rester bloquée (script non exécuté après navigation, ou
transition figée sur certains navigateurs) et laisser des pages
entières blanches. Priorité absolue : zéro contenu masqué.
=================================================================== */
.reveal{opacity:1 !important;transform:none !important;transition:none !important}
/* ===================================================================
Logo bannière flottante (nav.float) = même taille que le logo normal
sur mobile/tablette. Avant, le float restait à 48px (trop gros au scroll).
=================================================================== */
@media(max-width:880px){header.nav.float .nav-inner .logo img,header.nav.float .logo img{height:46px!important}}
@media(max-width:600px){header.nav.float .nav-inner .logo img,header.nav.float .logo img{height:38px!important}}
/* ===================================================================
CTA collant du bas RETIRÉ sur mobile (évite la surcharge : il se
superposait aux CTA déjà présents dans le contenu). La bulle de chat
n'est PAS concernée. 2026-07-14.
=================================================================== */
.sticky-cta{display:none!important}
@media(max-width:760px){body{padding-bottom:env(safe-area-inset-bottom)!important}}
/* Bandeau cookies : boutons plus compacts */
#cookie-consent .cc-btn{font-size:.8rem!important;padding:9px 16px!important;min-height:38px!important}
#cookie-consent .cc-custom{font-size:.8rem!important}
@media(max-width:560px){#cookie-consent .cc-btn{font-size:.78rem!important;padding:9px 12px!important;min-height:36px!important}}
/* ===================================================================
Échelle typographique desktop — titres plus équilibrés.
Les textes longs restent dominants sans occuper la majorité du viewport.
Le mobile conserve son calibrage compact existant.
=================================================================== */
@media(min-width:761px){
.h1,.hero h1{font-size:clamp(2.25rem,4.2vw,3.35rem)!important;line-height:1.08!important}
.h2,.sec-head h2,.band h2,.video-band .vb-in h2{font-size:clamp(1.65rem,3vw,2.25rem)!important;line-height:1.12!important}
}
/* Pages villes : la barre de preuves chevauche exactement la séparation
entre le hero et la section suivante. */
.pbwrap{
position:relative;
z-index:3;
margin:calc(-1 * var(--s12)) 0 30px!important;
transform:translateY(-50%);
}
@media(max-width:600px){
.pbwrap{margin:-26px 0 22px!important}
}
/* Pages villes : composition compacte de la section méthode.
Le bandeau stratégie reste sous le texte et la vidéo occupe la colonne droite. */
@media(min-width:761px){
.sec > .wrap:has(> .pbwrap + .agile-grid){
display:grid;
grid-template-columns:minmax(0,1fr) 246px;
column-gap:46px;
align-items:start;
}
.sec > .wrap:has(> .pbwrap + .agile-grid) > .pbwrap{
grid-column:1 / -1;
}
.sec > .wrap:has(> .pbwrap + .agile-grid) > .agile-grid{
display:contents;
}
.sec > .wrap:has(> .pbwrap + .agile-grid) .ag-txt{
display:contents;
}
.sec > .wrap:has(> .pbwrap + .agile-grid) .ag-txt .sec-head{
grid-column:1;
grid-row:2;
}
.sec > .wrap:has(> .pbwrap + .agile-grid) .ag-txt > .lead{
grid-column:1;
grid-row:3;
}
.sec > .wrap:has(> .pbwrap + .agile-grid) .ag-vid{
grid-column:2;
grid-row:2 / 5;
align-self:start;
}
.sec > .wrap:has(> .pbwrap + .agile-grid) > .grid.grid-3{
grid-column:1;
grid-row:4;
grid-template-columns:1fr;
margin-top:24px;
}
.sec > .wrap:has(> .pbwrap + .agile-grid) > .grid.grid-3 > .card{
display:grid;
grid-template-columns:minmax(170px,220px) minmax(0,1fr);
gap:24px;
align-items:start;
padding:24px 26px;
}
.sec > .wrap:has(> .pbwrap + .agile-grid) > .grid.grid-3 > .card h3,
.sec > .wrap:has(> .pbwrap + .agile-grid) > .grid.grid-3 > .card p{
margin:0;
}
}
@media(max-width:900px) and (min-width:761px){
.sec > .wrap:has(> .pbwrap + .agile-grid){
grid-template-columns:minmax(0,1fr) 200px;
column-gap:28px;
}
.sec > .wrap:has(> .pbwrap + .agile-grid) > .grid.grid-3 > .card{
grid-template-columns:1fr;
gap:8px;
}
}
@media(max-width:760px){
.pbwrap + .agile-grid{margin-bottom:20px}
.pbwrap + .agile-grid + .grid.grid-3{grid-template-columns:1fr;margin-top:0}
}
/* ===== HEADER MOBILE v2 (23/09/2026) - bouton appel rose, "Se connecter" dans le menu (icône profil retirée), icône menu dessinée et centrée ===== */
.nav-call{display:none}
.nav-links .nav-login{display:none}
@media(max-width:880px){
header.nav .nav-profile.pf-mobile{display:none!important}
.nav-links.open .nav-login{display:flex}
.nav-links.open .nav-profile.pf-desktop{display:none!important}
header.nav .nav-inner .logo{margin-right:auto!important}
.nav-call{display:inline-flex;align-items:center;justify-content:center;align-self:center;width:48px;height:36px;border-radius:100px;background:var(--magenta,#ff3d81);box-shadow:0 6px 18px rgba(255,61,129,.35);flex:0 0 auto;margin-left:auto!important;margin-right:0!important}
.nav-call svg{width:17px;height:17px;fill:#fff}
.nav-call:active{transform:scale(.95)}
body.menu-open .nav-call{display:none}
body:not(.menu-open) header.nav .burger{font-size:0!important;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;align-self:center;margin-left:2px!important;
background:linear-gradient(currentColor,currentColor) center calc(50% - 7px)/22px 2.4px no-repeat,linear-gradient(currentColor,currentColor) center/22px 2.4px no-repeat,linear-gradient(currentColor,currentColor) center calc(50% + 7px)/22px 2.4px no-repeat!important}
}
/* ===== DEFILEMENT MOBILE v1 (23/09/2026) - longues listes de villes sur une ligne qui défile + cartes qui laissent voir la suivante ===== */
@media(max-width:600px){
.related:has(> a:nth-of-type(9)){flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-left:18px;margin-left:-18px;margin-right:-18px;padding:4px 18px 8px}
.related:has(> a:nth-of-type(9))::-webkit-scrollbar{display:none}
.related:has(> a:nth-of-type(9)) > a{flex:0 0 auto;scroll-snap-align:start}
#secteurs-list .grid,#expertises .svc-grid{grid-auto-columns:80%!important}
}
/* ===== HEADER CHEVAUCHEMENT v1 (23/09/2026) - le header fixe ne mange plus le haut du contenu (5 pages avaient un hero à 40px) ===== */
@media(max-width:600px){
body.hero-page .hero{padding-top:92px!important}
}
/* ===== FAB MOBILE MASQUE (23/09/2026) - bouton WhatsApp flottant retiré sur mobile (doublon avec le bouton appel du header) ===== */
@media(max-width:880px){.vib-fab,.wa-fab{display:none!important}}
/* ===== SECTEURS GRILLE MOBILE (23/09/2026) - page Secteurs : les 6 secteurs visibles d'un coup, en grille compacte 2 colonnes, sans défilement ===== */
@media(max-width:600px){
#secteurs-list .grid{grid-template-columns:1fr 1fr!important;grid-auto-flow:row!important;grid-auto-columns:auto!important;overflow:visible!important;scroll-snap-type:none!important;gap:8px!important;padding-bottom:0!important}
#secteurs-list .card{display:flex!important;align-items:center;gap:10px;padding:12px 12px!important;min-height:58px;border-radius:14px}
#secteurs-list .card .ic{width:20px;height:20px;flex:0 0 20px;margin:0!important}
#secteurs-list .card h3{font-size:.84rem!important;line-height:1.2;margin:0!important}
}
/* ===== BANDEAU CHIFFRES CHEVAUCHANT (23/09/2026) - l'encart des chiffres chevauche le bas du hero et ouvre la section suivante (plus de bloc isolé) ===== */
.hero ~ .wrap:has(> .proofbar:first-child),.hero ~ .proofbar-sec{position:relative;z-index:3;margin-top:-46px!important;padding-top:0!important;padding-bottom:0!important;background:transparent!important}
.hero:has(~ .wrap > .proofbar:first-child),.hero:has(~ .proofbar-sec){padding-bottom:86px!important}
.hero ~ .wrap:has(> .proofbar:first-child) + section,.hero ~ .wrap:has(> .proofbar:first-child) + style + section,.hero ~ .proofbar-sec + section{border-top:0!important;padding-top:44px!important}
@media(max-width:600px){
.hero ~ .wrap:has(> .proofbar:first-child),.hero ~ .proofbar-sec{margin-top:-34px!important}
.hero:has(~ .wrap > .proofbar:first-child),.hero:has(~ .proofbar-sec){padding-bottom:62px!important}
.hero ~ .wrap:has(> .proofbar:first-child) + section,.hero ~ .wrap:has(> .proofbar:first-child) + style + section,.hero ~ .proofbar-sec + section{padding-top:30px!important}
}
/* ===== CARROUSEL FORMULES FINITIONS (23/09/2026) - badge "La plus choisie" et ombres plus coupés net, bords adoucis ===== */
.cf{margin-top:22px!important}
.cf-stage{overflow:visible!important}
section:has(.cf-stage){overflow-x:clip}
.cf-dots{margin-top:30px!important}
/* ===== ENCART CHIFFRES PAGE PUB EN NOIR (23/09/2026) - même rendu que sur les autres pages ===== */
.proofbar-sec .proofbar{background:#16161e!important;border-color:#16161e!important;color:#f7f4ee}
.proofbar-sec .proofbar .pf:nth-child(odd) .pf-n{color:var(--lime,#d8ff3e)!important}
.proofbar-sec .proofbar .pf:nth-child(even) .pf-n{color:var(--magenta,#ff3d81)!important}
.proofbar-sec .proofbar .pf-t{color:rgba(247,244,238,.78)!important;opacity:1!important}
.proofbar-sec .proofbar .pf{border-color:rgba(255,255,255,.1)!important}
/* ===== FORMULAIRE DE CONTACT — partage avec les pages villes (ajoute le 2026-10-04) =====
Ces regles vivaient uniquement en inline dans index.html. Deplacees ici pour que les pages
villes puissent porter leur propre formulaire au lieu de renvoyer vers l accueil. */
/* CONTACT */
.cta{padding:54px 0}
.contact-box{display:grid;grid-template-columns:1fr 1fr;border-radius:30px;overflow:hidden;border:1px solid var(--line)}
.contact-intro{background:var(--lime);color:#16161e;padding:46px 40px}
.contact-intro .eyebrow{color:#111}
.contact-intro .eyebrow::before{background:#111}
.contact-intro h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:14px 0}
.contact-intro p{opacity:.85;margin-bottom:14px;font-size:1.02rem}
.contact-intro .reassure{font-weight:800;opacity:1;font-size:.92rem;display:flex;flex-wrap:wrap;gap:6px 16px}
.mini-testi{margin-top:22px;background:rgba(11,11,15,.07);border-left:3px solid #16161e;padding:12px 16px;border-radius:10px;font-size:.86rem;color:#16161e;line-height:1.4}
.mini-testi span{font-weight:600}
.contact-alt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:20px}
.contact-choice-label{font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.contact-alt a{display:inline-flex;align-items:center;gap:10px;font-weight:700;background:#16161e;color:#fff;padding:12px 18px;border-radius:100px;width:fit-content;max-width:100%;transition:.2s;font-size:.92rem}
.contact-alt a:hover{transform:translateX(4px)}
.contact-more{margin-top:16px;padding-top:14px;border-top:1px solid rgba(22,22,30,.18)}
.contact-more summary{width:fit-content;cursor:pointer;font-size:.86rem;font-weight:700;text-decoration:underline;text-underline-offset:3px;opacity:.76}
.contact-more summary:hover{opacity:1}
.contact-more-links{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:12px}
.contact-more-links a{color:#16161e;font-size:.88rem;font-weight:700;border-bottom:1px solid rgba(22,22,30,.35)}
.contact-more-links a:hover{border-color:#16161e}
.contact-form{background:var(--ink2);padding:46px 40px;display:flex;flex-direction:column;gap:14px}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.85rem;opacity:.9}
.contact-form input,.contact-form textarea{background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:13px 15px;color:var(--cream);font-family:inherit;font-size:1rem;transition:.2s;width:100%}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent)}
.contact-form button{margin-top:6px;justify-content:center}
.form-note{font-size:.8rem;opacity:.9;margin:0;text-align:center}
.form-success{display:none;background:rgba(216,255,62,.12);border:1px solid var(--lime);border-radius:14px;padding:20px;text-align:center;font-weight:600}
.contact-form.sent .field{display:none}
.contact-form.sent .form-success{display:block}
/* QUIZ multi-étapes */
.contact-form.sent .quiz{display:none}
.quiz-prog{display:flex;gap:8px;margin-bottom:6px}
.quiz-prog .d{flex:1;height:5px;border-radius:6px;background:rgba(0,0,0,.12)}
.quiz-prog .d.on{background:var(--accent)}
.quiz-step{display:none;flex-direction:column;gap:12px}
.quiz-step.show{display:flex;animation:qin .35s ease}
.quiz-q{font-family:var(--display);font-weight:700;font-size:1.18rem;margin-bottom:2px}
.quiz-sub{font-size:.84rem;opacity:.82;margin-top:-6px}
.quiz-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:4px}
.quiz-back{background:none;border:none;color:var(--cream);opacity:.6;font-weight:700;cursor:pointer;font-family:inherit;font-size:.9rem;padding:6px}
.quiz-back:hover{opacity:1}
.quiz-skip{display:block;margin:14px auto 0;background:none;border:none;font-family:inherit;color:var(--accent);font-weight:700;font-size:.9rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px}
.quiz-skip:hover{opacity:.75}
@media(max-width:760px){.contact-box{grid-template-columns:1fr}}
.contact-form input,.contact-form textarea{font-size:16px}
@media(max-width:600px){
/* header en pilule verre dépoli (façon HUP) */
body:not(.menu-open) header.nav:not(.float){top:10px;left:12px;right:12px;border-radius:100px;border:1px solid rgba(255,255,255,.22);background:rgba(16,16,22,.42);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body:not(.menu-open) header.nav:not(.float) .nav-inner{padding:8px 10px 8px 18px!important}
/* bouton devis : la flèche ne passe plus à la ligne */
/* AÉRATION : mêmes polices, mêmes boutons, juste plus d'espace entre les blocs */
.hero-screen .hero .wrap{padding:0 22px}
.hero-screen .hero .lead{line-height:1.5!important;margin:16px auto 26px!important}
.hero-screen .hero .hero-cta{gap:12px!important;margin-top:0!important}
.hero-screen .hero .hero-cta a{white-space:nowrap}
.hero-screen .hero .hero-cta #heroCta{flex-grow:1.2!important}
.hero-screen .hero .micro-reassure{margin-top:20px!important;line-height:1.6}
.hero-screen .hero .trust{margin-top:14px!important}
/* réassurance : retour à la ligne propre, centré */
.hero .micro-reassure{flex-wrap:wrap;justify-content:center;column-gap:5px;row-gap:2px}
}
/* ===== BANDEAU VIDEOS DES PAGES VILLES (ajoute le 2026-10-04) =====
Bloc autonome : le feed de l accueil a son CSS en inline, non reutilisable ici. */
.vshow{padding:56px 0;border-top:1px solid rgba(20,20,30,.08)}
.vshow .eyebrow{display:block;font-weight:800;font-size:.73rem;letter-spacing:.15em;text-transform:uppercase;color:#c81d6b;margin:0 0 12px}
.vshow h2{font-size:clamp(1.5rem,4.4vw,2.1rem);line-height:1.12;margin:0 0 10px;letter-spacing:-.02em}
.vshow .vshow-sub{margin:0 0 26px;opacity:.78;max-width:56ch}
.vshow-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vshow-card{position:relative;border-radius:18px;overflow:hidden;background:#16161e;aspect-ratio:9/16}
.vshow-card video{width:100%;height:100%;object-fit:cover;display:block}
.vshow-card .vshow-grad{position:absolute;inset:auto 0 0 0;height:52%;background:linear-gradient(to top,rgba(0,0,0,.72),transparent);pointer-events:none}
.vshow-chip{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.93);color:#16161e;font-weight:800;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;padding:6px 11px;border-radius:100px}
.vshow-meta{position:absolute;left:14px;right:14px;bottom:13px;color:#fff}
.vshow-meta .vshow-client{font-weight:800;font-size:.95rem;display:block}
.vshow-meta .vshow-ton{font-size:.82rem;opacity:.85}
.vshow-cta{margin-top:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.vshow-note{font-size:.9rem;opacity:.72}
@media(max-width:760px){
.vshow{padding:44px 0}
.vshow-row{grid-template-columns:repeat(3,76%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:none}
.vshow-row::-webkit-scrollbar{display:none}
.vshow-card{scroll-snap-align:center}
}
/* Correctif 2026-10-04 : sur les pages villes, la barre de preuves remonte de 34px dans le hero
et recouvrait la ligne de reassurance. On degage la place necessaire sous celle-ci.
Portee limitee aux pages qui utilisent ce motif (hero suivi d un .wrap > .proofbar). */
@media(max-width:600px){
.hero:has(~ .wrap > .proofbar:first-child){padding-bottom:88px!important}
.hero:has(~ .wrap > .proofbar:first-child) .reassure{margin-bottom:4px}
}
/* ===== HERO VIDEO DES PAGES VILLES (2026-10-04) =====
Reprend le traitement de l accueil (video de fond + voile sombre + texte blanc),
qui vivait uniquement en inline dans index.html. Portee limitee a .hero.hero-video. */
.hero.hero-video{background:#101016;padding:104px 0 34px;position:relative;overflow:hidden}
.hero.hero-video::before,.hero.hero-video::after{display:none!important}
.hero.hero-video .blob{display:none}
.hero.hero-video .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.hero.hero-video .hero-ov{position:absolute;inset:0;z-index:1;background:radial-gradient(135% 78% at 50% 58%,rgba(9,9,13,.78) 0%,rgba(9,9,13,.58) 46%,rgba(9,9,13,.34) 74%,rgba(9,9,13,.26) 100%),linear-gradient(180deg,rgba(9,9,13,.42) 0%,rgba(9,9,13,.38) 55%,rgba(9,9,13,.70) 100%)}
.hero.hero-video > .wrap{position:relative;z-index:2}
.hero.hero-video .eyebrow{color:var(--lime,#d8ff3e)}
.hero.hero-video .eyebrow::before{background:var(--lime,#d8ff3e)}
.hero.hero-video h1,.hero.hero-video .h1{color:#fff}
.hero.hero-video .lead{color:rgba(255,255,255,.93);font-size:1.06rem;line-height:1.55;margin:18px 0 30px;max-width:46ch}
.hero.hero-video .lead strong{color:#fff}
.hero.hero-video .reassure{color:rgba(255,255,255,.86);font-weight:600}
.hero.hero-video .hero-cta{margin-top:0;gap:12px}
.hero.hero-video .btn:not(.btn-ghost){background:var(--magenta,#ff3d81);color:#fff;border:2px solid #fff}
.hero.hero-video .btn-ghost{color:rgba(255,255,255,.94);border-color:rgba(255,255,255,.42);background:transparent;font-weight:600}
.hero.hero-video .btn-ghost:hover{border-color:var(--lime,#d8ff3e);color:#fff}
@media(max-width:600px){
.hero.hero-video{padding:92px 0 30px}
.hero.hero-video .lead{font-size:1.02rem;margin:16px 0 26px}
}
/* Hero des pages villes : un ecran entier, contenu centre verticalement, de l air. */
.hero.hero-video{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:112px 0 64px}
.hero.hero-video .eyebrow{font-size:.68rem;letter-spacing:.13em;margin-bottom:18px}
.hero.hero-video h1,.hero.hero-video .h1{margin:0 0 4px}
.hero.hero-video .reassure{margin-top:22px;white-space:nowrap;font-size:.84rem}
@media(max-width:600px){
.hero.hero-video{padding:104px 0 58px}
.hero.hero-video .eyebrow{font-size:.64rem;letter-spacing:.11em}
.hero.hero-video .reassure{font-size:.78rem}
}
/* ===== PAGES VILLES — reglages issus de la recherche CRO (2026-10-04) =====
Sources : NN/g (cibles tactiles >= 44px, respiration entre blocs, lecture ~25% du texte),
benchmarks landing pages (visuels traites bien plus vite que le texte, copy courte). */
/* Voile de la video : moins opaque. La lisibilite est reprise par une ombre portee douce. */
.hero.hero-video .hero-ov{background:
radial-gradient(135% 78% at 50% 58%,rgba(9,9,13,.60) 0%,rgba(9,9,13,.42) 46%,rgba(9,9,13,.22) 74%,rgba(9,9,13,.14) 100%),
linear-gradient(180deg,rgba(9,9,13,.30) 0%,rgba(9,9,13,.24) 55%,rgba(9,9,13,.56) 100%)}
.hero.hero-video .eyebrow,.hero.hero-video h1,.hero.hero-video .h1,
.hero.hero-video .lead,.hero.hero-video .reassure{text-shadow:0 1px 16px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.35)}
/* Respiration entre les sections (NN/g : whitespace genereux entre blocs) */
body:has(.hero.hero-video) .sec{padding-top:72px!important;padding-bottom:72px!important}
body:has(.hero.hero-video) .checks{display:grid;gap:20px;margin-top:22px}
body:has(.hero.hero-video) .checks > div{line-height:1.55}
body:has(.hero.hero-video) .sec-head{margin-bottom:6px}
@media(max-width:600px){
/* Boutons : plus compacts qu avant, toujours au-dessus des 44px recommandes */
body:has(.hero.hero-video) .btn{padding:14px 20px;font-size:.95rem;min-height:48px;line-height:1.2}
.hero.hero-video .hero-cta{gap:10px}
body:has(.hero.hero-video) .sec{padding-top:56px!important;padding-bottom:56px!important}
body:has(.hero.hero-video) .checks{gap:18px}
body:has(.hero.hero-video) .vshow{padding:52px 0}
}
/* Bandeau video des pages villes : 8 vidéos, rangee unique qui defile (toutes tailles). */
.vshow-row{display:flex;grid-template-columns:none;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px}
.vshow-row::-webkit-scrollbar{display:none}
.vshow-card{flex:0 0 238px;scroll-snap-align:center}
.vshow-hint{margin-top:14px;font-size:.84rem;opacity:.6}
@media(max-width:600px){
.vshow-row{gap:12px}
.vshow-card{flex:0 0 76%}
}
/* ===== LIGHTBOX VIDEO DES PAGES VILLES (2026-10-04) =====
Clic sur une carte -> lecture en grand, avec le son et les controles. */
.vshow-card{cursor:pointer}
.vshow-card::after{content:"";position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;
border-radius:50%;background:rgba(255,255,255,.92) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316161e'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center/22px no-repeat;
box-shadow:0 6px 24px rgba(0,0,0,.3);opacity:.92;transition:transform .2s,opacity .2s;pointer-events:none;z-index:2}
.vshow-card:hover::after{transform:scale(1.08);opacity:1}
.vlb{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
background:rgba(8,8,12,.93);padding:18px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vlb[open],.vlb.is-open{display:flex}
.vlb-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(94vw,440px);width:100%}
.vlb video{width:100%;max-height:78dvh;aspect-ratio:9/16;object-fit:contain;background:#000;border-radius:16px;display:block}
.vlb-cap{color:#fff;text-align:center;font-size:.92rem;line-height:1.4}
.vlb-cap b{display:block;font-size:1rem;margin-bottom:2px}
.vlb-cap span{opacity:.72}
.vlb-close{position:absolute;top:-6px;right:-6px;transform:translate(40%,-40%);width:44px;height:44px;border:0;border-radius:50%;
background:#fff;color:#16161e;font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.vlb-close:hover{background:var(--lime,#d8ff3e)}
.vlb-cta{margin-top:2px}
@media(max-width:600px){
.vlb{padding:14px}
.vlb video{max-height:70dvh}
.vlb-close{top:0;right:0;transform:translate(30%,-30%)}
}
/* ===== PAGES VILLES — dessin de ville sans encart + liens secondaires allegés (2026-10-04) ===== */
/* Le dessin etait enferme dans une carte blanche : fond blanc cuit dans le .webp,
plus une bordure et un arrondi en CSS. On retire le cadre, et "multiply" fait
disparaitre le blanc du fichier dans le fond creme de la page. */
body:has(.hero.hero-video) .cs-img img{
background:transparent!important;border:0!important;border-radius:0!important;
box-shadow:none!important;mix-blend-mode:multiply;width:100%;height:auto}
body:has(.hero.hero-video) .cs-img{background:transparent!important;border:0!important;
border-radius:0!important;box-shadow:none!important;padding:0!important}
/* Liens secondaires (secteurs, villes proches) : des puces qui s enchainent,
au lieu d une pile de gros boutons. Hauteur maintenue a 44px (NN/g). */
body:has(.hero.hero-video) .related{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
body:has(.hero.hero-video) .related a{
padding:0 15px;min-height:44px;display:inline-flex;align-items:center;
font-size:.86rem;font-weight:600;line-height:1.2;white-space:normal}
@media(max-width:600px){
body:has(.hero.hero-video) .related{gap:7px}
body:has(.hero.hero-video) .related a{padding:0 13px;font-size:.82rem;min-height:44px}
}
/* Encart contact des pages villes : plus de largeur utile sur mobile, et de l air entre les blocs. */
body:has(.hero.hero-video) .contact-intro > p{margin-bottom:18px}
body:has(.hero.hero-video) .contact-intro .reassure{margin-top:22px;gap:10px 18px}
body:has(.hero.hero-video) .mini-testi{margin-top:24px}
body:has(.hero.hero-video) .contact-alt{margin-top:24px}
body:has(.hero.hero-video) .contact-more{margin-top:18px}
body:has(.hero.hero-video) .contact-form .field{margin-bottom:4px}
@media(max-width:600px){
body:has(.hero.hero-video) .contact-intro,
body:has(.hero.hero-video) .contact-form{padding:34px 22px!important}
body:has(.hero.hero-video) .contact-intro h2{margin-bottom:14px}
}
/* ===== FAQ DES PAGES VILLES — compactee (2026-10-04) =====
Le "Voir la réponse +" occupait une ligne entiere sous chaque question : ~45 px x 7.
On le remplace par un indicateur rond aligne a droite, sur la meme ligne que la question. */
body:has(.hero.hero-video) .faq details{margin-bottom:8px}
body:has(.hero.hero-video) .faq summary{
display:flex!important;align-items:flex-start;justify-content:space-between;gap:14px;
padding:14px 16px!important;line-height:1.35}
body:has(.hero.hero-video) .faq summary::after{
content:"+"!important;flex:0 0 auto;display:grid;place-items:center;
width:26px;height:26px;margin:0!important;border-radius:50%;
background:rgba(200,29,107,.1);color:#c81d6b;font-weight:800;font-size:1.05rem;line-height:1;
padding:0!important;border:0!important;transition:transform .2s}
body:has(.hero.hero-video) .faq details[open] summary::after{content:"−"!important;transform:rotate(180deg)}
@media(max-width:600px){
body:has(.hero.hero-video) .faq summary{padding:13px 14px!important;font-size:.95rem}
body:has(.hero.hero-video) .faq details{margin-bottom:7px}
}
/* La barre de preuves descend sur le fond creme, juste au-dessus de "Ce qu on produit",
au lieu de chevaucher le bas du hero video. */
.proofband{margin:0 0 34px}
@media(max-width:600px){ .proofband{margin:0 0 28px} }
/* Mot-cle du titre sur le hero video : lime UNI, sans degrade ni animation.
Le degrade de l accueil passe par #b8e62e (vert olive) : sur une video sombre ce
stop rend terne, et l animation laisse le mot stationner dessus. Une couleur pleine
ne peut pas virer. */
.hero.hero-video h1 .hl,.hero.hero-video .h1 .hl{
background:none!important;background-image:none!important;
-webkit-text-fill-color:#d8ff3e!important;color:#d8ff3e!important;
animation:none!important;font-style:italic}
/* La barre de preuves remonte : on reduit le beige entre le hero et elle. */
body:has(.hero.hero-video) .vshow{padding-top:18px!important}
@media(max-width:600px){
body:has(.hero.hero-video) .vshow{padding-top:14px!important}
.proofband{margin:0 0 22px}
}
/* ===== BANDEAU COOKIES — carte compacte en bas a gauche (2026-10-04) =====
Avant : barre de 680px centree en bas, qui recouvrait les boutons du hero,
avec un contour lime. Desormais une carte etroite calee a gauche, bordure neutre.
Specificite renforcee (html body) : les regles d origine sont inline dans chaque
page, donc posterieures a cette feuille, et deja en !important. */
html body #cookie-consent{
left:18px!important;right:auto!important;bottom:18px!important;
justify-content:flex-start!important;padding:0!important;
max-width:none!important}
html body #cookie-consent .cc-box{
max-width:320px!important;width:320px!important;
flex-direction:column!important;align-items:flex-start!important;
gap:14px!important;padding:18px!important;border-radius:16px!important;
border:1px solid rgba(255,255,255,.12)!important;
box-shadow:0 14px 44px rgba(0,0,0,.45)!important}
html body #cookie-consent .cc-txt{min-width:0!important;font-size:.86rem!important}
html body #cookie-consent .cc-txt a{color:rgba(247,244,238,.78)!important;text-decoration:underline}
html body #cookie-consent .cc-txt a:hover{color:#f7f4ee!important}
html body #cookie-consent .cc-actions{
width:100%!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important}
html body #cookie-consent .cc-btns{width:100%!important}
html body #cookie-consent .cc-btn{width:100%!important;justify-content:center!important}
html body #cookie-consent .cc-custom{text-align:center!important;padding:6px 2px!important;min-height:36px!important}
@media(max-width:600px){
html body #cookie-consent{left:12px!important;right:12px!important;bottom:12px!important}
html body #cookie-consent .cc-box{width:auto!important;max-width:none!important}
}
/* ===== PAGES VILLES — rattrapage des regles liees a .pbwrap (2026-10-04) =====
Deux regles d origine dependaient de l adjacence ".pbwrap + .agile-grid".
En deplacant la barre de preuves sous le hero, .pbwrap a disparu de la page et
ces regles sont devenues inertes : la carte "Strategie de marque" se retrouvait
seule dans une grille a 3 colonnes, calee a gauche. On les reconstruit. */
body:has(.hero.hero-video) .agile-grid{margin-bottom:20px}
body:has(.hero.hero-video) .agile-grid + .grid.grid-3{grid-template-columns:1fr;margin-top:0}
/* la colonne video depassait le texte raccourci de ~260px : on la ramene a sa hauteur */
@media(min-width:901px){
body:has(.hero.hero-video) .agile-grid{align-items:stretch}
body:has(.hero.hero-video) .agile-grid .ag-vid video,
body:has(.hero.hero-video) .agile-grid .ag-vid img{max-height:340px;object-fit:cover}
}
/* ===== BANNIERE BEIGE SUR MOBILE — toutes les pages sauf l accueil (2026-10-04) =====
Une regle d origine donnait a l en-tete un fond sombre translucide sous 600px
(rgba(16,16,22,.42)), pensee pour le hero sombre de l accueil. Sur les pages
interieures, qui ont un fond clair et le logo noir, le logo devenait illisible.
L accueil ne charge pas cette feuille : il garde sa banniere sombre. */
@media(max-width:600px){
body:not(.nav-dark):not(.menu-open) header.nav:not(.float){
background:rgba(250,248,243,.94)!important;
border:1px solid rgba(20,20,26,.08)!important;
-webkit-backdrop-filter:blur(14px)!important;backdrop-filter:blur(14px)!important}
/* icones et liens : sombres sur fond clair (ils utilisent currentcolor) */
body:not(.nav-dark):not(.menu-open) header.nav:not(.float) .burger{color:#16161e!important}
body:not(.nav-dark):not(.menu-open) header.nav:not(.float) .nav-profile{color:#16161e!important}
body:not(.nav-dark):not(.menu-open) header.nav:not(.float) .nav-profile .pf-head{fill:#c81d6b!important}
}
/* ===== LISTE DES VILLES — defilement continu, pause au survol (2026-10-04) =====
La piste est dupliquee au chargement par le script (pas dans le HTML) : les moteurs
ne voient donc qu un seul jeu de liens, sans duplication interne. */
.villes-marquee{display:flex!important;flex-wrap:nowrap!important;overflow:hidden;gap:0!important;
position:relative;margin-top:18px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.villes-marquee .vm-piste{display:flex;gap:8px;flex:0 0 auto;padding-right:8px;
animation:villes-defile 46s linear infinite;will-change:transform}
.villes-marquee:hover .vm-piste,
.villes-marquee:focus-within .vm-piste,
.villes-marquee.vm-pause .vm-piste{animation-play-state:paused}
.villes-marquee a{white-space:nowrap;flex:0 0 auto}
@keyframes villes-defile{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){
.villes-marquee{flex-wrap:wrap!important;gap:8px!important;-webkit-mask-image:none;mask-image:none}
.villes-marquee .vm-piste{animation:none;flex-wrap:wrap;gap:8px}
}
/* ===== BLOCS DE CONTENU HORS SECTION — espace sous le bloc (2026-10-04) =====
Certains encarts (.onering, .cfg) vivent dans un place
directement sous , entre deux . Ce wrap n a aucune marge : la
section suivante demarrait donc collee au bloc, bordure comprise. */
body > .wrap:has(> .onering),
body > .wrap:has(> .cfg){margin-bottom:56px}
@media(max-width:760px){
body > .wrap:has(> .onering),
body > .wrap:has(> .cfg){margin-bottom:40px}
}
/* ===== ACCROCHES : LIGNES EQUILIBREES (2026-10-04) =====
text-wrap:balance repartit le texte pour que les lignes aient des longueurs
proches, au lieu de laisser une derniere ligne orpheline tres courte.
Sans effet sur les navigateurs qui ne le connaissent pas. */
.hero .lead,
.sec-head + .lead,
.hero p.lead{text-wrap:balance}
/* les titres en profitent aussi : ils souffrent du meme desequilibre */
.hero h1,.hero .h1,.sec-head h2,.sec-head .h2{text-wrap:balance}
/* ===== GARANTIE EXPLICITE + CTA COLLANT MOBILE (2026-10-05) =====
.vg-promise : bloc d engagement dans l encart de contact.
.vg-sticky : bouton de devis permanent en bas d ecran sur mobile.
Il s efface des que le formulaire est a l ecran (voir le JS),
pour ne pas doubler l appel a l action. */
.vg-promise{margin:18px 0 0;padding:14px 16px;border-radius:12px;background:rgba(22,22,30,.06);border:1px solid rgba(22,22,30,.14)}
.vg-promise > strong{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.vg-promise ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.vg-promise li{position:relative;padding-left:20px;font-size:.9rem;line-height:1.45}
.vg-promise li::before{content:"\2713";position:absolute;left:0;top:0;font-weight:800}
@media(max-width:600px){.vg-promise{padding:12px 13px;margin-top:14px}.vg-promise li{font-size:.86rem}}
.vg-sticky{display:none}
@media(max-width:820px){
.vg-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:9000;
padding:9px 14px;padding-bottom:calc(9px + env(safe-area-inset-bottom,0px));
background:transparent;border:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease}
.vg-sticky[hidden]{display:block!important;transform:translateY(110%);opacity:0;pointer-events:none}
.vg-sticky a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;
border-radius:100px;background:var(--magenta,#ff3d81);color:#fff;font-weight:800;
text-decoration:none;font-size:1rem;line-height:1.2;border:2px solid #fff;pointer-events:auto;box-shadow:0 8px 24px rgba(22,22,30,.28)}
body:has(.vg-sticky){padding-bottom:74px}
}
/* ===== BASE DES CARTES FORMULES (portee depuis services.html le 2026-10-05) =====
Necessaire pour afficher le carrousel de formules sur les pages villes. */
.pl-grid{display:grid;grid-template-columns:1fr;gap:34px;margin-top:8px}
.plan{position:relative;display:flex;flex-direction:column;background:var(--ink2);border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:28px 26px}
.plan.feature{border-color:var(--cream);box-shadow:var(--shadow)}
.plan .pop{position:absolute;top:-13px;left:22px;background:var(--lime);color:var(--cream);font-weight:800;font-size:.72rem;letter-spacing:.08em;padding:6px 14px;border-radius:100px;border:1.5px solid var(--cream)}
.plan h3{font-size:1.55rem}
.plan .mode{font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:6px 0 10px}
.plan .who{font-size:.94rem;color:var(--muted)}
.plan h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:20px 0 9px}
.plan ul{list-style:none}
.plan ul li{position:relative;padding-left:26px;margin:8px 0;font-size:.93rem;line-height:1.5}
.plan .who{margin-bottom:2px;line-height:1.5}
.plan .inc li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.plan .inc li::after{content:"";position:absolute;left:5px;top:9px;width:6px;height:3px;border-left:2px solid var(--cream);border-bottom:2px solid var(--cream);transform:rotate(-45deg)}
.plan .exc li{color:var(--muted)}
.plan .exc li::before{content:"✕";position:absolute;left:2px;top:0;font-size:.8rem;font-weight:700;opacity:.55}
.plan .ideal{background:var(--ink3);border-radius:14px;padding:14px 16px;font-size:.9rem;margin-top:18px}
.plan .btn{justify-content:center;margin-top:14px;text-align:center}
.plan .plan-reassure{font-size:.85rem;color:var(--muted);margin-top:auto;padding-top:16px}
.plan .plan-detail{display:block;text-align:center;margin-top:11px;font-size:.82rem;color:var(--accent);font-weight:700;text-decoration:none;opacity:.85}
.plan .plan-detail:hover{opacity:1;text-decoration:underline}
.plan .plan-ideal{font-size:.85rem;color:var(--muted);margin-top:16px;padding-left:12px;border-left:2px solid var(--lime);line-height:1.45}