/* ═══════════════════════════════════════════════════════════════
Pure Studio Design System V1
Ultra-premium · Artisans locaux · 2026
Polices : DM Sans (titres) + Inter (corps)
Palette : #111 fond sombre · #F5F4F1 fond clair · accent client
═══════════════════════════════════════════════════════════════ */
:root {
--acc: #D16B27;
--acc2: #B25B21;
--acc-bg: color-mix(in srgb, #D16B27 10%, transparent);
/* ── Fonds harmonisés (structurels, indépendants du client) ──
3 fonds max : ivoire chaud (clair), beige doux (transition), anthracite (fort). */
--fond-clair: #F6F6F4;
--fond-beige: #ECEBE8;
/* --ink = anthracite UNIQUE pour toutes les sections sombres (entreprise, avis, devis). */
--ink: #111418;
--ink2: #111418;
--ink3: #1A1F26;
/* --header-bg = fond du header UNIQUEMENT (réglable sans impacter le reste).
Si l'utilisateur a choisi un header transparent, couleur_primaire vaut
"transparent" → on retombe sur la couleur solide calculée par le générateur
pour ne jamais avoir un fond cassé. */
--header-bg: #FFFFFF;
/* Fond plein appliqué au header transparent une fois scrollé */
--header-solid: #FFFFFF;
--off: #FBF3EE;
--off2: color-mix(in srgb, #FBF3EE 80%, #000);
--white: #FFFFFF;
--menu: #FFFFFF;
--menu-scroll-text: #16181D;
--btn-text: #FFFFFF;
--footer-bg: #F4F5F7;
--footer-text: #3A3F4A;
--footer-title: #16181D;
--footer-link: #3A3F4A;
--footer-link-hover: #D16B27;
--footer-border: #E3E2DF;
--footer-font: var(--f-body);
--logo-h: 58px;
--logo-h-mobile: 58px;
/* Couleur du logo une fois la page scrollée (header transparent). Déclarée
seulement si elle est réglée : une valeur vide casserait le var() du
calque de recolorisation (cf. .logo-swap). */
/* Assombrissement du hero, réglé à l'étape Identité visuelle (0 = photo brute,
55 = défaut, 100 = quasi noir). Deux facteurs, cf. voileHero() dans context.ts :
--hero-voile-forme = intensité du voile DESSINÉ (dégradé directionnel + vignette)
--hero-voile-plat = voile UNIFORME ajouté au-delà de 55, celui qui assombrit
réellement toute la surface (le dégradé seul laisse
toujours un bord clair). */
--hero-voile-forme: 1;
--hero-voile-plat: 0.622;
--bd: #E3E2DF;
--bd2: #CFCFCB;
--t1: #16181D;
--t2: #514D43;
--t3: #736E64;
--w1: #FFFFFF;
--w2: #B9B6AF;
--w3: #8C887E;
--radius: 10px;
--radius-lg: 16px;
--shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
--shadow: 0 4px 16px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
--shadow-lg: 0 16px 48px rgba(0,0,0,.13), 0 4px 12px rgba(0,0,0,.07);
--f-title: 'DM Sans', 'Montserrat', sans-serif;
/* Titres éditoriaux (hero, H2 de sections, CTA) : serif premium. Les
éléments d'interface (boutons, badges, menu, chiffres) restent en
--f-title pour garder leur lisibilité utilitaire. */
--f-display: 'Fraunces', Georgia, serif;
--f-body: 'Inter', 'Open Sans', sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
/* Garde anti-débordement horizontal (mobile) : clip n'établit PAS de conteneur
de défilement -> le header position:sticky continue de fonctionner. */
body{font-family:var(--f-body);color:var(--t1);background:var(--fond-clair);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased;overflow-x:clip;width:100%;max-width:100%;position:relative}
h1,h2,h3,h4{font-family:var(--f-title);line-height:1.12;letter-spacing:-.025em}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
/* Fonts chargées via dans le de chaque page (non bloquant) */
/* ── Container ── */
.container{max-width:1320px;margin:0 auto;padding:0 40px;width:100%}
@media(max-width:900px){.container{padding:0 24px}}
@media(max-width:600px){.container{padding:0 16px}}
/* ── Sections ── */
.sec {padding:100px 0}
.sec-sm {padding:72px 0}
.sec-dark {background:var(--fond-clair)}
.sec-dark2{background:var(--fond-clair)}
.sec-off {background:var(--fond-clair)}
.sec-off2 {background:var(--off2)}
@media(max-width:760px){.sec{padding:64px 0}.sec-sm{padding:48px 0}}
/* ── Typographie globale ── */
.eyebrow{font-family:var(--f-title);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--acc);margin-bottom:14px;display:block}
.eyebrow-w{color:var(--acc)}
.sh{font-family:var(--f-display);font-weight:600;line-height:1.08;letter-spacing:-.02em;color:var(--t1)}
.sh-w{color:#fff}
.sh-xl{font-size:52px}
.sh-lg{font-size:40px}
.sh-md{font-size:32px}
.sh-sm{font-size:24px}
.lead{font-size:16.5px;color:var(--t2);line-height:1.72;max-width:560px}
.lead-w{color:var(--w2)}
@media(max-width:760px){.sh-xl{font-size:36px}.sh-lg{font-size:30px}.sh-md{font-size:26px}}
/* ── Boutons ── */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-title);font-weight:700;font-size:14px;border-radius:8px;padding:14px 28px;cursor:pointer;border:none;transition:all .15s;white-space:nowrap;letter-spacing:-.01em}
/* Icône SVG dans un bouton — hérite de la couleur du texte du bouton */
.btn-ico{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-acc .btn-ico{stroke:#fff}
.cta-tel .btn-ico{width:15px;height:15px;stroke:var(--acc)}
.btn:active{transform:scale(.98)}
.btn-acc{background:var(--acc);color:var(--btn-text);box-shadow:0 4px 20px color-mix(in srgb,var(--acc) 40%,transparent)}
.btn-acc:hover{background:var(--acc2);box-shadow:0 6px 24px color-mix(in srgb,var(--acc) 50%,transparent);transform:translateY(-1px)}
.btn-wh{background:#fff;color:var(--ink);border:1.5px solid #fff}
.btn-wh:hover{background:rgba(255,255,255,.9);transform:translateY(-1px);box-shadow:0 6px 24px rgba(255,255,255,.15)}
.btn-outline{background:transparent;color:var(--t1);border:2px solid var(--bd2)}
.btn-outline:hover{border-color:var(--acc);color:var(--acc)}
.btn-sm{padding:10px 20px;font-size:13px}
.btn-lg{padding:17px 36px;font-size:15px}
/* ── Link arrow ── */
.link-arr{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-title);font-weight:700;font-size:13px;color:var(--t1);border-bottom:2px solid var(--t1);padding-bottom:2px;transition:gap .15s}
.link-arr:hover{gap:10px}
.link-arr-w{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.link-arr-w:hover{border-bottom-color:#fff}
/* ══════════════ HEADER ══════════════ */
header.site-hdr{
position:sticky;top:0;z-index:200;
transition:transform .28s cubic-bezier(.4,0,.2,1), background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
background:var(--header-bg);
backdrop-filter:blur(16px) saturate(180%);
-webkit-backdrop-filter:blur(16px) saturate(180%);
border-bottom:1px solid rgba(255,255,255,.07)
}
header.site-hdr.hdr-hidden{transform:translateY(-100%);}
/* ── Header transparent (posé sur le hero) ───────────────────────────
Activé quand le générateur ajoute la classe .hdr-transparent.
En haut de page : fond transparent, pas de bordure ni de flou.
Dès qu'on scrolle (.hdr-scrolled ajouté en JS) : fond plein lisible. */
header.site-hdr.hdr-transparent{
position:absolute;top:0;left:0;right:0;
background:transparent;
backdrop-filter:none;
-webkit-backdrop-filter:none;
border-bottom-color:transparent;
}
/* Au scroll, le header transparent repasse en fixed pour rester visible
et prend un fond plein lisible. */
header.site-hdr.hdr-transparent.hdr-scrolled{
position:fixed;
background:var(--header-solid, #16181D);
backdrop-filter:blur(16px) saturate(180%);
-webkit-backdrop-filter:blur(16px) saturate(180%);
border-bottom-color:rgba(255,255,255,.07);
box-shadow:0 6px 24px rgba(0,0,0,.18);
}
/* Texte du menu lisible une fois scrollé : couleur contrastée calculée
sur le fond scrollé (sombre si fond clair, clair si fond sombre). */
header.site-hdr.hdr-transparent.hdr-scrolled .logo-name,
header.site-hdr.hdr-transparent.hdr-scrolled .logo-sub,
header.site-hdr.hdr-transparent.hdr-scrolled .hdr-nav > a,
header.site-hdr.hdr-transparent.hdr-scrolled .hdr-nav .has-drop > a,
header.site-hdr.hdr-transparent.hdr-scrolled .hdr-tel-num{
color:var(--menu-scroll-text, var(--menu));
}
/* Bouton « Etre rappele » : au scroll (fond plein), son texte doit passer
a la couleur lisible comme le reste du menu, sinon il reste blanc et
devient invisible sur fond clair. Au survol, le fond passe a l'accent :
on garde le texte blanc pour le contraste. */
header.site-hdr.hdr-transparent.hdr-scrolled .hdr-rappel-btn{
color:var(--menu-scroll-text, var(--menu));
}
header.site-hdr.hdr-transparent.hdr-scrolled .hdr-rappel-btn:hover{
color:#fff;
}
/* Filet de sécurité : si jamais --header-bg vaut littéralement "transparent"
sans que la classe soit posée (page dont le générateur n'injecte pas encore
la variable), on garde un fond plein lisible plutôt qu'un header invisible. */
header.site-hdr:not(.hdr-transparent){
background:var(--header-bg, #16181D);
}
.hdr{
height:max(80px, calc(var(--logo-h, 48px) + 24px));display:flex;align-items:center;justify-content:space-between;
max-width:1320px;margin:0 auto;padding:0 40px;width:100%
}
/* Taille du logo dédiée au mobile (réglage wizard) : ne touche pas au
rendu ordinateur. Le logo ET la hauteur du header suivent. */
@media(max-width:760px){
:root{--logo-h:var(--logo-h-mobile,48px)}
}
.hdr-logo{display:flex;align-items:center;gap:11px;flex-shrink:0;color:inherit}
/* Aucun fond derriere le logo, jamais : un logo clair sur fond scrolle clair
est recolorise via le masque ci-dessous (logo-swap), pas via une plaque. */
/* ── Logo recolorise au scroll ──────────────────────────────────────
Cas type : monogramme blanc sur hero transparent, header blanc au scroll.
Le wrapper .logo-swap n'est genere QUE si une couleur de scroll est reglee.
Une fois scrolle, l'image d'origine est masquee (visibility -> la place est
conservee, aucun saut) et un calque de la couleur choisie est decoupe a la
forme du logo (mask-image) : la transparence du PNG est respectee. */
.logo-swap{position:relative;display:inline-flex;flex-shrink:0}
header.site-hdr.hdr-scrolled .logo-swap > img{visibility:hidden}
header.site-hdr.hdr-scrolled .logo-swap::after{
content:'';position:absolute;inset:0;
background:var(--logo-scroll-color,#16181D);
-webkit-mask:var(--logo-mask) center/contain no-repeat;
mask:var(--logo-mask) center/contain no-repeat;
}
/* Drawer mobile (fond blanc) : le logo clair y est recolorise en permanence,
pas seulement au scroll. */
.mob-drawer .logo-swap > img{visibility:hidden}
.mob-drawer .logo-swap::after{
content:'';position:absolute;inset:0;
background:var(--logo-scroll-color,#16181D);
-webkit-mask:var(--logo-mask) center/contain no-repeat;
mask:var(--logo-mask) center/contain no-repeat;
}
/* Navigateur sans mask-image : on garde le logo d'origine plutot qu'un vide. */
@supports not ((-webkit-mask-image:url(#a)) or (mask-image:url(#a))){
header.site-hdr.hdr-scrolled .logo-swap > img,
.mob-drawer .logo-swap > img{visibility:visible}
header.site-hdr.hdr-scrolled .logo-swap::after,
.mob-drawer .logo-swap::after{display:none}
}
.logo-mark{
width:34px;height:34px;background:var(--acc);border-radius:8px;
display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.logo-mark svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.2}
.logo-img{height:var(--logo-h,48px);max-height:var(--logo-h,48px);width:auto;max-width:280px;object-fit:contain;flex-shrink:0;display:block}
.logo-name{font-family:var(--f-title);font-weight:800;font-size:14px;color:var(--menu);letter-spacing:-.02em}
.logo-sub{font-size:9px;color:var(--menu);opacity:.6;text-transform:uppercase;letter-spacing:.1em;font-weight:600;display:block;margin-top:1px}
.hdr-nav{display:flex;align-items:center;gap:0;flex:1;justify-content:center}
.hdr-nav > a,.hdr-nav .has-drop > a{
font-family:var(--f-title);font-size:13px;font-weight:600;color:var(--menu);opacity:.78;
padding:0 15px;height:72px;display:flex;align-items:center;gap:5px;
border-bottom:2px solid transparent;white-space:nowrap;transition:color .12s,opacity .12s
}
.hdr-nav > a:hover,.hdr-nav .has-drop > a:hover{color:var(--menu);opacity:1}
.hdr-nav > a.on,.hdr-nav .has-drop > a.on{color:var(--menu);opacity:1;border-bottom-color:var(--acc)}
.hdr-nav a .caret{font-size:8px;opacity:.5;transition:transform .15s}
.hdr-nav .has-drop:hover .caret{transform:rotate(180deg)}
/* Dropdown */
.hdr-nav .has-drop{position:relative}
/* Pont invisible pour combler le gap entre le lien et le menu */
.hdr-nav .has-drop::after{content:'';position:absolute;top:100%;left:0;right:0;height:12px;display:none}
.hdr-nav .has-drop:hover::after{display:block}
.nav-drop{
display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
background:rgba(22,21,20,.98);border:1px solid rgba(255,255,255,.1);
border-radius:12px;padding:8px;min-width:210px;z-index:500;
box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.hdr-nav .has-drop:hover .nav-drop,
.hdr-nav .has-drop:focus-within .nav-drop{display:block}
.nav-drop a{
display:flex;align-items:center;gap:10px;
padding:10px 14px;font-size:13px;font-weight:600;
font-family:var(--f-title);color:var(--w2);
border-radius:8px;transition:all .1s;
border:none!important;height:auto
}
.nav-drop a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-drop-sep{height:1px;background:rgba(255,255,255,.07);margin:6px 0}
.nav-drop-footer{padding:8px 14px 4px}
.nav-drop-footer a{font-size:12px;color:var(--acc);font-weight:700;border:none!important;padding:0!important;background:none!important}
.hdr-right{display:flex;align-items:center;gap:18px;flex-shrink:0}
.hdr-tel-block{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.hdr-tel-block .hdr-tel-num{text-decoration:none}
.hdr-tel{display:flex;flex-direction:column;align-items:flex-end}
.hdr-tel-num{font-family:var(--f-title);font-weight:800;font-size:15px;color:var(--menu);letter-spacing:-.01em}
.hdr-tel-sub{font-size:9px;color:var(--acc);font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.hdr-cta{
background:var(--acc);color:#fff;
padding:10px 20px;border-radius:8px;
font-family:var(--f-title);font-weight:700;font-size:13px;
white-space:nowrap;display:flex;align-items:center;gap:7px;
box-shadow:0 2px 12px color-mix(in srgb,var(--acc) 35%,transparent);
transition:all .15s
}
.hdr-cta:hover{transform:translateY(-1px);box-shadow:0 4px 20px color-mix(in srgb,var(--acc) 45%,transparent)}
.hdr-burger{display:none;background:none;border:none;cursor:pointer;width:36px;height:36px;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0}
.hdr-burger span{display:block;width:22px;height:2px;background:#16181D;border-radius:1px;transition:.2s}
/* Header transparent posé sur le hero : barres blanches (lisibles sur photo).
Sinon (header plein), barres sombres — jamais liées à --menu qui peut valoir blanc. */
header.site-hdr.hdr-transparent:not(.hdr-scrolled) .hdr-burger span{background:#fff}
header.site-hdr.hdr-transparent.hdr-scrolled .hdr-burger span{background:#16181D}
/* Drawer mobile */
/* Drawer mobile : FOND BLANC + ÉCRITURE NOIRE, en dur (jamais de variable
qui pourrait retomber en blanc sur blanc selon le header du client). */
.mob-drawer{display:none;position:fixed;inset:0;z-index:300;background:#fff;overflow-y:auto}
.mob-drawer.open{display:block}
.mob-drawer-head{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid rgba(0,0,0,.09)}
.mob-drawer-close{background:none;border:none;color:#16181D;font-size:28px;cursor:pointer;line-height:1}
.mob-drawer nav{display:flex;flex-direction:column;padding:12px 0}
.mob-drawer nav a{font-family:var(--f-title);font-weight:700;font-size:16px;color:#16181D;padding:15px 24px;border-bottom:1px solid rgba(0,0,0,.07)}
.mob-drawer nav a.sub{font-size:14px;color:#16181D;opacity:.62;padding-left:40px}
/* Accordéon Services du drawer mobile — replié par défaut */
.mob-drawer nav details.mob-acc{border-bottom:1px solid rgba(0,0,0,.07)}
.mob-drawer nav details.mob-acc > summary{
list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
font-family:var(--f-title);font-weight:700;font-size:16px;color:#16181D;padding:15px 24px;
}
.mob-drawer nav details.mob-acc > summary::-webkit-details-marker{display:none}
.mob-drawer nav details.mob-acc > summary::after{content:'▾';font-size:12px;opacity:.55;transition:transform .2s ease}
.mob-drawer nav details.mob-acc[open] > summary::after{transform:rotate(180deg)}
.mob-drawer nav details.mob-acc a.sub{display:block;color:#16181D;opacity:.72;padding:13px 24px 13px 40px;border-bottom:1px solid rgba(0,0,0,.05)}
.mob-drawer-tel{display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 20px 8px;background:var(--acc);color:var(--btn-text);padding:16px;border-radius:10px;font-family:var(--f-title);font-weight:800;font-size:16px}
@media(max-width:1024px){.hdr-nav{display:none}.hdr{padding:0 24px}.hdr-burger{display:flex}.hdr-tel-block{display:none}.hdr-cta{display:none}}
@media(max-width:600px){.hdr{padding:0 16px}.hdr-right{gap:10px}}
@media(max-width:380px){.hdr-rappel-btn{padding-left:11px;padding-right:11px;font-size:13px}}
/* ══════════════ HERO ══════════════ */
.hero{
position:relative;min-height:720px;
display:flex;flex-direction:column;
overflow:hidden;
background:var(--ink)
}
/* Bande sombre en haut : lisibilité du menu blanc avec header transparent.
Suit --hero-voile comme le reste du voile du hero. */
.hero::after{content:'';position:absolute;top:0;left:0;right:0;height:160px;z-index:2;pointer-events:none;
background:linear-gradient(to bottom,
rgb(8 7 6 / calc(var(--hero-voile-forme,1) * 55%)) 0%,
rgb(8 7 6 / calc(var(--hero-voile-forme,1) * 26%)) 55%,
transparent 100%)}
.hero-bg{
position:absolute;inset:0;
background:repeating-linear-gradient(45deg,#1e1c1a 0,#1e1c1a 1px,#141210 1px,#141210 20px);
z-index:0
}
.hero-photo{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
z-index:1;
}
/* Voile par-dessus la photo : assez pour garder le texte blanc lisible à
gauche, mais bien plus léger qu'avant pour laisser respirer la photo. */
.hero-bg::before{
content:'';position:absolute;inset:0;z-index:2;
background:linear-gradient(105deg,
rgb(12 11 10 / calc(var(--hero-voile-forme,1) * 60%)) 0%,
rgb(12 11 10 / calc(var(--hero-voile-forme,1) * 40%)) 42%,
rgb(12 11 10 / calc(var(--hero-voile-forme,1) * 20%)) 72%,
rgb(12 11 10 / calc(var(--hero-voile-forme,1) * 5%)) 100%),
/* Voile uniforme : seul capable d'assombrir le côté clair du dégradé */
linear-gradient(rgb(12 11 10 / calc(var(--hero-voile-plat,0) * 100%)),
rgb(12 11 10 / calc(var(--hero-voile-plat,0) * 100%)))
}
/* Accent diagonal subtil */
.hero-bg::after{
content:'';position:absolute;
top:-20%;right:-10%;width:55%;height:140%;
background:radial-gradient(ellipse at center,color-mix(in srgb,var(--acc) 12%,transparent) 0%,transparent 65%);
z-index:1
}
/* Une seule colonne : la carte « Pourquoi nous choisir » a cede la place
au bandeau d'honneurs sous le contenu. flex:1 centre le contenu entre
le header et le bandeau. */
.hero-inner{
position:relative;z-index:3;
max-width:1320px;margin:0 auto;padding:140px 40px 0;
width:100%;flex:1;
display:grid;grid-template-columns:1fr;align-items:center
}
/* Hero centré (retour Benjamin 2026-08) : le titre court (domaines) laisse
la place — tout le bloc vit dans l'axe de la photo. */
.hero-content{max-width:880px;margin:0 auto;text-align:center}
.hero-kicker{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--f-title);font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.18em;color:var(--acc);
margin-bottom:22px
}
/* Titre du hero : 72px max (le 92px écrasait tout avec les intitulés à
deux métiers — retour Benjamin 2026-08), lignes équilibrées. */
.hero-h1{
font-family:var(--f-display);font-weight:600;font-size:clamp(38px,5.2vw,72px);
line-height:1.05;letter-spacing:-.025em;color:#fff;
margin-bottom:22px;text-wrap:balance
}
.hero-h1 em{color:var(--acc);font-style:italic;display:block}
.hero-sub{font-size:17px;color:rgba(255,255,255,.72);line-height:1.68;max-width:620px;margin:0 auto 32px}
.hero-sep{color:rgba(255,255,255,.2);font-size:18px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero-micro{margin-top:16px;font-size:12.5px;color:rgba(255,255,255,.6);font-weight:600;letter-spacing:.02em}
/* ── Carte locale (zone d'intervention) ── */
.zone-svg{width:100%;height:auto;max-width:460px;display:block;margin:0 auto}
.zone-chip{fill:var(--white);fill-opacity:.86;stroke:var(--bd);stroke-width:1}
.zone-chip-base{fill-opacity:.96}
.zone-lbl{font-family:var(--f-title);font-size:11px;font-weight:700;fill:var(--t1)}
.zone-lbl-base{font-size:13px;fill:var(--t1);font-weight:800}
@media(max-width:480px){
.hero-ctas{flex-wrap:nowrap;gap:8px}
.hero-ctas .btn{flex:1;text-align:center;justify-content:center;padding-left:10px;padding-right:10px;font-size:.82rem;white-space:nowrap;min-width:0}
}
/* ══ Bandeau d'honneurs — les preuves du CRM sous le contenu du hero.
Filet + items séparés par des traits verticaux ; le logo Compagnons
(compagnon_logo_url) s'affiche sur pastille blanche. ══ */
.hero-honneurs{position:relative;z-index:3;max-width:1320px;width:100%;margin:0 auto;padding:26px 40px 42px}
/* Filet centré, trait de chaque côté — assise du hero centré. */
.hh-filet{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.hh-filet span{font-family:var(--f-title);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.24em;color:rgba(255,255,255,.55);white-space:nowrap}
.hh-filet::before{content:'';flex:1;height:1px;background:linear-gradient(270deg,rgba(255,255,255,.22),transparent)}
.hh-filet::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.22),transparent)}
.hh-rail{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;row-gap:20px}
.hh-item{display:flex;align-items:center;gap:12px;padding:0 20px}
.hh-item+.hh-item{border-left:1px solid rgba(255,255,255,.16)}
.hh-ico{flex:none;width:42px;height:42px;display:flex;align-items:center;justify-content:center}
.hh-ico svg{width:30px;height:30px;fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* Le G de Google garde ses couleurs : pas de gravure blanche héritée */
.hh-ico .hh-g{width:26px;height:26px}
.hh-ico .hh-g path{stroke:none}
.hh-ico-blanc{background:#fff;border-radius:10px;padding:4px;width:46px;height:46px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.hh-ico-blanc img{width:100%;height:100%;object-fit:contain}
.hh-txt b{display:block;font-family:var(--f-title);font-weight:700;font-size:14.5px;color:#fff;letter-spacing:-.01em;line-height:1.2}
.hh-txt b .hh-etoiles{font-style:normal;color:#FBBC05;letter-spacing:1.5px;font-size:12px}
.hh-txt span{display:block;font-family:var(--f-title);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.55);margin-top:3px}
/* Écrans moyens : items resserrés pour que 6 preuves tiennent sur une ligne */
@media(max-width:1460px){
.hh-item{padding:0 14px}
.hh-ico{width:38px;height:38px}
.hh-ico svg{width:27px;height:27px}
.hh-ico-blanc{width:42px;height:42px}
.hh-txt b{font-size:13.5px}
}
@media(max-width:1024px){
.hero-inner{padding:140px 24px 0}
.hero-h1{font-size:44px}
.hero-honneurs{padding:22px 24px 36px}
}
@media(max-width:600px){
.hero{min-height:auto}
.hero-h1{font-size:33px;margin-bottom:16px}
.hero-kicker{font-size:10px;letter-spacing:.14em;margin-bottom:16px}
.hero-sub{font-size:15px;line-height:1.62;margin-bottom:24px}
.hero-inner{padding:112px 16px 0}
.hero-honneurs{padding:18px 16px 26px}
.hh-filet{margin-bottom:16px}
.hh-rail{row-gap:14px}
.hh-item{padding:0;border-left:none !important;width:50%}
.hh-ico{width:34px;height:34px}
.hh-ico svg{width:24px;height:24px}
.hh-txt b{font-size:12.5px}
.hh-txt span{font-size:10px}
}
@media(max-width:340px){
.hh-item{width:100%}
}
/* ══ Hero pages internes ══
Realisations / Contact / Mentions / Confidentialite utilisaient ici un hero
« srv-hero » de 720 px de haut, deux fois plus grand que celui des pages
service / ville. Uniformisation 2026-08 : toutes les pages internes rendent
desormais le hero « vs2 » de _locale_styles.html. Regles retirees. */
/* ══════════════ CHIFFRES CLÉS ══════════════ */
.kpis{background:var(--ink2)}
.kpis-inner{
display:grid;grid-template-columns:repeat(4,1fr);
border-top:1px solid rgba(255,255,255,.08);
max-width:1320px;margin:0 auto
}
.kpi{
padding:36px 32px;border-right:1px solid rgba(255,255,255,.08);
display:flex;flex-direction:column;align-items:flex-start;
transition:background .15s
}
.kpi:last-child{border-right:none}
.kpi:hover{background:rgba(255,255,255,.03)}
.kpi-n{font-family:var(--f-title);font-weight:900;font-size:44px;color:#fff;line-height:1;letter-spacing:-.04em}
.kpi-n .a{color:var(--acc);font-size:28px}
.kpi-l{font-size:13px;color:var(--w3);margin-top:8px;font-weight:600;letter-spacing:.01em}
.kpi-bar{width:32px;height:2px;background:var(--acc);border-radius:1px;margin-top:16px}
@media(max-width:900px){.kpis-inner{grid-template-columns:1fr 1fr}.kpi{border-bottom:1px solid rgba(255,255,255,.08)}}
@media(max-width:500px){.kpis-inner{grid-template-columns:1fr 1fr}.kpi{padding:24px 20px}.kpi-n{font-size:36px}}
/* ══════════════ SERVICES ══════════════ */
/* ══════════════ GRILLE SERVICES ══════════════
Layout : carte prioritaire (gauche, pleine hauteur)
+ toutes les autres cartes en auto-fill à droite.
S'adapte à n'importe quel nombre de services.
══════════════════════════════════════════════ */
.srv-grid{
display:grid;
/* Colonne gauche fixe (carte prioritaire) + droite auto-fill */
grid-template-columns:300px 1fr;
gap:12px;
align-items:start;
}
/* Grille des cartes standard à droite */
.srv-grid-rest{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:12px;
}
.srv-01{
background:var(--ink2);border-radius:var(--radius-lg);
padding:32px;display:flex;flex-direction:column;position:relative;overflow:hidden;
border:1px solid rgba(255,255,255,.06);
min-height:320px;
}
.srv-01::before{
content:'';position:absolute;bottom:0;right:0;width:180px;height:180px;
background:radial-gradient(circle at bottom right,color-mix(in srgb,var(--acc) 20%,transparent),transparent 70%);
z-index:0
}
.srv-icon{width:44px;height:44px;border-radius:10px;background:var(--acc-bg);border:1px solid color-mix(in srgb,var(--acc) 25%,transparent);display:flex;align-items:center;justify-content:center;margin-bottom:20px;position:relative;z-index:1;flex-shrink:0}
.srv-icon svg{width:22px;height:22px;stroke:var(--acc);fill:none;stroke-width:2}
.srv-icon{transition:background .15s,border-color .15s}
.srv-card:hover .srv-icon{background:color-mix(in srgb,var(--acc) 16%,#fff);border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.srv-01 .srv-icon{width:52px;height:52px;margin-bottom:24px}
.srv-01 .srv-icon svg{width:26px;height:26px;stroke:#fff}
/* ── Grille de services : une carte par prestation ──
Cartes claires sur le fond de page, la couleur d'accent tenue partout
(icônes, filet de survol, pastille de catégorie) plutôt que réservée au
survol : sans elle la grille tombe dans le gris. Tout le contenu est
rendu côté serveur, le JS ne fait que masquer/afficher. */
.svc-head{text-align:center;max-width:680px;margin:0 auto 40px}
.svc-head-lead{font-size:15.5px;line-height:1.72;color:var(--t2);margin-top:18px}
.svc-filtres{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:40px}
.svc-filtre{
appearance:none;font-family:var(--f-title);font-size:13px;font-weight:600;
padding:10px 20px;border-radius:100px;cursor:pointer;line-height:1.2;
background:#fff;color:var(--t1);border:1px solid var(--bd);
transition:background .2s,color .2s,border-color .2s
}
.svc-filtre:hover{border-color:var(--acc);color:var(--acc)}
.svc-filtre.on{background:var(--acc);color:var(--btn-text);border-color:var(--acc)}
.svc-filtre:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc-card{
display:flex;flex-direction:column;position:relative;overflow:hidden;
background:#fff;border:1px solid var(--bd);border-radius:18px;
padding:30px 28px 26px;min-height:228px;color:inherit
}
/* Filet d'accent qui se déroule sur le bord haut au survol : la carte
réagit sans avoir à changer de couleur de fond. */
.svc-card::before{
content:'';position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
background:var(--acc);transform:scaleX(0);transform-origin:left;
transition:transform .32s cubic-bezier(.2,.8,.2,1)
}
.svc-card:hover::before{transform:scaleX(1)}
/* Après l'entrée au défilement (.rv puis .in), la carte reprend une
transition courte : sinon elle hérite des .7s de l'animation d'arrivée. */
.svc-card, .svc-card.in{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.svc-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -18px color-mix(in srgb,var(--acc) 26%,rgba(20,20,20,.2));border-color:color-mix(in srgb,var(--acc) 34%,var(--bd))}
.svc-card:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.svc-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px}
.svc-card-ico{
width:52px;height:52px;border-radius:14px;flex-shrink:0;
background:color-mix(in srgb,var(--acc) 11%,#fff);color:var(--acc);
display:flex;align-items:center;justify-content:center;
transition:background .28s ease,color .28s ease
}
.svc-card-ico svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc-card:hover .svc-card-ico{background:var(--acc);color:var(--btn-text)}
.svc-card-num{font-family:var(--f-display);font-style:italic;font-size:15px;color:color-mix(in srgb,var(--acc) 40%,var(--t3));transition:color .28s ease}
.svc-card:hover .svc-card-num{color:var(--acc)}
.svc-card-title{font-family:var(--f-title);font-weight:700;font-size:16.5px;line-height:1.35;color:var(--t1);margin-bottom:9px;letter-spacing:-.01em}
.svc-card-desc{font-size:13.5px;line-height:1.65;color:var(--t2);margin-bottom:auto}
.svc-card-bot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.svc-card-badge{font-family:var(--f-title);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.svc-card-badge::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--acc);margin-right:8px;vertical-align:1px}
.svc-card-arr{
width:33px;height:33px;border-radius:50%;flex-shrink:0;
border:1px solid var(--bd);color:var(--t1);
display:flex;align-items:center;justify-content:center;
transition:background .28s ease,border-color .28s ease,color .28s ease,transform .28s ease
}
.svc-card-arr svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.svc-card:hover .svc-card-arr{background:var(--acc);border-color:var(--acc);color:var(--btn-text);transform:rotate(-45deg)}
.svc-cache{display:none}
/* ── Carte vedette : la prestation phare, sur deux colonnes ──
Fond teinté accent (surtout pas un bloc noir : il écrasait toute la
grille) et photo de chantier fondue dans ce fond sur la droite. */
.svc-card-star{
--star-bg:color-mix(in srgb,var(--acc) 10%,#fff);
grid-column:span 2;padding:36px 34px 30px;
background:var(--star-bg);
border-color:color-mix(in srgb,var(--acc) 26%,transparent)
}
.svc-card-star > *{position:relative;z-index:1}
.svc-card-star .svc-card-title,
.svc-card-star .svc-card-desc,
.svc-card-star .svc-card-bot{max-width:min(46ch,58%)}
.svc-card-star .svc-card-title{font-family:var(--f-display);font-style:italic;font-weight:600;font-size:clamp(22px,2.3vw,31px);line-height:1.12;margin-bottom:12px}
.svc-card-star .svc-card-desc{font-size:14.5px;color:var(--t2)}
.svc-card-star .svc-card-ico{background:var(--acc);color:var(--btn-text);width:56px;height:56px}
.svc-card-star .svc-card-ico svg{width:27px;height:27px}
.svc-card-star:hover{border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
/* Étiquette à la place du numéro : elle dit pourquoi cette carte est grande */
.svc-card-phare{
font-family:var(--f-title);font-size:10px;font-weight:800;letter-spacing:.16em;
text-transform:uppercase;color:var(--acc);white-space:nowrap;
background:#fff;border:1px solid color-mix(in srgb,var(--acc) 24%,transparent);
border-radius:100px;padding:7px 13px;line-height:1
}
/* Photo : elle occupe la droite de la carte et se fond dans le fond teinté */
.svc-card-media{position:absolute;top:0;right:0;bottom:0;width:52%;z-index:0;overflow:hidden}
.svc-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.svc-card-media::after{
content:'';position:absolute;inset:0;
background:linear-gradient(100deg,var(--star-bg) 8%,color-mix(in srgb,var(--star-bg) 55%,transparent) 46%,transparent 78%)
}
/* Pied de section : le chantier qui ne rentre dans aucune case */
.svc-pied{
margin-top:44px;background:#fff;border:1px solid var(--bd);border-radius:18px;
padding:30px 36px;display:flex;align-items:center;justify-content:space-between;
gap:24px;flex-wrap:wrap;position:relative;overflow:hidden
}
.svc-pied::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc)}
.svc-pied-txt strong{font-family:var(--f-display);font-style:italic;font-weight:600;font-size:21px;color:var(--t1);display:block;margin-bottom:5px;line-height:1.25}
.svc-pied-txt span{font-size:14px;color:var(--t2)}
.svc-pied-cta{flex-shrink:0}
@media(max-width:1024px){
.svc-grid{grid-template-columns:repeat(2,1fr)}
.svc-card-star{grid-column:span 2}
.svc-card-media{width:44%}
.svc-card-star .svc-card-title,
.svc-card-star .svc-card-desc,
.svc-card-star .svc-card-bot{max-width:56%}
}
@media(max-width:640px){
.svc-head{margin-bottom:28px}
.svc-filtres{gap:7px;margin-bottom:26px}
.svc-filtre{font-size:12px;padding:9px 15px}
.svc-grid{grid-template-columns:1fr;gap:12px}
.svc-card{min-height:0;padding:24px 22px 22px}
/* Téléphone : la photo n'a plus de place à droite, on garde le fond teinté */
.svc-card-star{grid-column:span 1;padding:26px 22px 22px}
.svc-card-media{display:none}
.svc-card-star .svc-card-title,
.svc-card-star .svc-card-desc,
.svc-card-star .svc-card-bot{max-width:none}
.svc-pied{margin-top:30px;padding:26px 22px;gap:18px}
.svc-pied-cta{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
.svc-card,.svc-card.in,.svc-card::before,.svc-card-ico,.svc-card-arr,.svc-card-num,.svc-filtre{transition:none}
.svc-card:hover{transform:none}
.svc-card:hover .svc-card-arr{transform:none}
}
/* ══════════════ PROCESS ══════════════ */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;position:relative}
.process-grid::before{
content:'';position:absolute;top:28px;left:calc(12.5%);right:calc(12.5%);
height:2px;background:linear-gradient(to right,var(--bd),var(--acc),var(--bd));
z-index:0
}
.process-step{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1;padding:0 16px}
.process-num{
width:56px;height:56px;border-radius:50%;border:2px solid var(--bd);background:var(--white);
display:flex;align-items:center;justify-content:center;margin-bottom:20px;
font-family:var(--f-title);font-weight:900;font-size:18px;color:var(--t3);
position:relative;box-shadow:0 0 0 6px var(--white)
}
.process-step:hover .process-num{background:var(--acc);border-color:var(--acc);color:#fff}
.process-title{font-family:var(--f-title);font-weight:800;font-size:15px;color:var(--t1);margin-bottom:8px}
.process-desc{font-size:13px;color:var(--t2);line-height:1.6}
@media(max-width:760px){
.process-grid{grid-template-columns:1fr 1fr;gap:32px}
.process-grid::before{display:none}
}
/* ══════════════ ARGUMENTS (Pourquoi nous) ══════════════
Tête centrée + cartes en rangées équilibrées + CTA centrés — même
schéma que le hero (retour Benjamin 2026-08 : plus jamais de colonne
titre calée à gauche avec boutons empilés). */
.why-head{text-align:center;max-width:660px;margin:0 auto 40px}
.why-items{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.why-item{
display:flex;gap:16px;padding:22px;
flex:1 1 340px;max-width:430px;min-width:0;
background:#fff;border:1px solid var(--bd);border-radius:16px;
box-shadow:0 10px 30px rgba(20,18,15,.05)
}
.why-item:hover{border-color:color-mix(in srgb,var(--acc) 40%,var(--bd));box-shadow:0 18px 40px rgba(20,18,15,.09)}
/* Jamais de carte orpheline : à 4 cartes, 2+2 au lieu de 3+1 (les autres
comptes — 3, 5, 6 — se répartissent déjà sans orpheline). Desktop
uniquement : la spécificité du :has écraserait la colonne unique mobile. */
@media(min-width:901px){
.why-items:has(.why-item:nth-child(4):last-child) .why-item{flex-basis:40%;max-width:520px}
}
.why-item-icon{
width:44px;height:44px;border-radius:12px;flex-shrink:0;
background:color-mix(in srgb,var(--acc) 8%,#fff);border:1px solid color-mix(in srgb,var(--acc) 22%,var(--bd));
display:flex;align-items:center;justify-content:center
}
.why-item-icon svg{width:20px;height:20px;stroke:var(--acc);fill:none;stroke-width:1.8}
.why-title{font-family:var(--f-title);font-weight:800;font-size:15.5px;color:var(--t1);margin-bottom:6px;line-height:1.3}
.why-desc{font-size:13.5px;color:var(--t2);line-height:1.6}
.why-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:36px}
/* Petits mobiles : les deux boutons restent côte à côte (même traitement
que les CTA du hero) — plus compacts au lieu d'empilés. */
@media(max-width:480px){
.why-cta{flex-wrap:nowrap;gap:8px}
.why-cta .btn{flex:1;justify-content:center;padding:12px 10px;font-size:.8rem;white-space:nowrap;min-width:0}
}
.why-micro{text-align:center;margin-top:14px;font-size:12.5px;color:var(--t3);font-weight:600;letter-spacing:.02em}
@media(max-width:900px){
.why-head{margin-bottom:28px}
.why-item{flex-basis:100%;max-width:none}
.why-cta{margin-top:26px}
}
/* ══════════════ RÉALISATIONS ══════════════ */
.real-intro{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:24px}
/* Vidéos de réalisation — section dédiée (accueil + page réalisations) */
.real-videos{margin-top:56px}
.real-videos-head{text-align:center;margin-bottom:28px}
.real-videos-head .eyebrow{margin-bottom:10px}
.real-videos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;justify-items:center;width:100%}
.real-video{width:100%;max-width:520px;aspect-ratio:16/9;height:auto;display:block;object-fit:cover;border-radius:14px;background:#000;box-shadow:var(--shadow);border:1px solid var(--bd)}
@media(max-width:760px){
.real-videos{margin-top:40px}
.real-videos-grid{grid-template-columns:1fr;gap:14px}
.real-video{max-width:100%;max-height:72vh}
}
.real-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:300px 220px;gap:10px}
.rg{border-radius:var(--radius-lg);overflow:hidden;position:relative}
.rg.tall{grid-row:1/3}
/* Fonds variés par service — pas tous identiques */
.rg-c1{background:linear-gradient(135deg,#2C2420 0%,#3D3028 100%)}
.rg-c2{background:linear-gradient(135deg,#1E2830 0%,#253540 100%)}
.rg-c3{background:linear-gradient(135deg,#1E2A20 0%,#253828 100%)}
.rg-c4{background:linear-gradient(135deg,#2A2020 0%,#382828 100%)}
.rg-c5{background:linear-gradient(135deg,#28241E 0%,#363020 100%)}
/* Motif texture */
.rg::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 18px)}
.rg-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.2) 55%,transparent 100%)}
.rg-info{position:absolute;bottom:0;left:0;right:0;padding:20px}
.rg-tag{display:inline-block;background:var(--acc);color:#fff;font-size:10px;font-weight:800;padding:4px 10px;border-radius:20px;font-family:var(--f-title);margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em}
.rg-title{font-family:var(--f-title);font-weight:800;font-size:15px;color:#fff;line-height:1.3}
.rg-meta{font-size:12px;color:rgba(255,255,255,.6);margin-top:4px;font-weight:600;display:flex;align-items:center;gap:5px}
.rg-meta::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--acc);flex-shrink:0}
/* Slider avant/après */
.ba-slider{position:relative;border-radius:var(--radius-lg);overflow:hidden;height:240px;margin-top:10px;user-select:none;cursor:col-resize}
.ba-after{position:absolute;inset:0;background:linear-gradient(135deg,#3a2818 0%,#4a3020 100%)}
.ba-after::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,transparent 1px,transparent 18px)}
.ba-before{position:absolute;inset:0;background:linear-gradient(135deg,#c8c4bc 0%,#d8d4cc 100%);clip-path:inset(0 50% 0 0)}
.ba-before::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 1px,transparent 1px,transparent 16px)}
.ba-divider{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;z-index:10;transform:translateX(-50%);box-shadow:0 0 12px rgba(0,0,0,.3)}
.ba-handle{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:48px;height:48px;border-radius:50%;background:#fff;z-index:11;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 20px rgba(0,0,0,.4);cursor:col-resize
}
.ba-handle svg{width:20px;height:20px;fill:var(--t1)}
.ba-lbl{position:absolute;bottom:14px;font-size:11px;font-weight:800;padding:4px 12px;border-radius:20px;font-family:var(--f-title);z-index:5;pointer-events:none;letter-spacing:.04em;text-transform:uppercase}
.ba-lbl.left{left:14px;background:rgba(0,0,0,.7);color:#fff;backdrop-filter:blur(4px)}
.ba-lbl.right{right:14px;background:var(--acc);color:#fff}
@media(max-width:900px){
.real-intro{flex-direction:column;gap:16px}
.real-grid{grid-template-columns:1fr 1fr;grid-template-rows:200px 160px 160px}
.rg.tall{grid-row:auto;grid-column:1/3;height:220px}
}
@media(max-width:560px){
.real-grid{grid-template-columns:1fr;grid-template-rows:repeat(5,200px)}
.rg.tall{grid-column:auto}
}
/* ══════════════ AVIS ══════════════ */
.avis-top{display:grid;grid-template-columns:220px 1fr;gap:56px;align-items:center;margin-bottom:48px}
.avis-score{
text-align:center;background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:32px 24px
}
.avis-big{font-family:var(--f-title);font-weight:900;font-size:60px;color:#fff;line-height:1;letter-spacing:-.04em}
.avis-big em{color:var(--acc);font-style:normal;font-size:28px;letter-spacing:0}
.avis-stars-lg{font-size:22px;color:#F5A623;letter-spacing:4px;margin:10px 0 6px}
.avis-base{font-size:12px;color:var(--w3);font-weight:600;font-family:var(--f-title)}
.avis-glogobox{display:flex;align-items:center;gap:7px;margin-top:16px;justify-content:center}
.avis-glogo{font-size:18px;font-weight:900;background:linear-gradient(135deg,#4285F4,#EA4335);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.avis-google-txt{font-size:12px;color:var(--w3);font-weight:600}
.avis-voir-link{display:block;margin-top:14px;font-size:12px;font-weight:700;font-family:var(--f-title);color:var(--acc)}
.avis-resume{font-size:16px;color:var(--w1);line-height:1.72;margin-bottom:20px}
/* ── Carrousel d'avis défilant (premium) ── */
.avis-marquee{margin-top:34px;overflow:hidden;position:relative;width:100%}
.avis-marquee::before,.avis-marquee::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.avis-marquee::before{left:0;background:linear-gradient(to right,var(--ink2,#171A1F),transparent)}
.avis-marquee::after{right:0;background:linear-gradient(to left,var(--ink2,#171A1F),transparent)}
.avis-track{display:flex;gap:18px;padding:8px 24px 12px}
.avis-marquee:not(.is-live){overflow-x:auto;scrollbar-width:none}
.avis-marquee:not(.is-live)::-webkit-scrollbar{display:none}
.avis-marquee.is-live .avis-track{width:max-content;animation:avis-scroll 50s linear infinite}
.avis-marquee.is-live:hover .avis-track{animation-play-state:paused}
@keyframes avis-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.avis-mcard{width:330px;flex-shrink:0;background:var(--ink3);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px 22px 18px;display:flex;flex-direction:column}
.avis-mcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.avis-mstars{color:#f5a623;font-size:15px;letter-spacing:2px}
.avis-mg{width:22px;height:22px;border-radius:50%;background:#fff;color:#4285F4;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;font-family:Arial,Helvetica,sans-serif;flex-shrink:0}
.avis-mtext{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.82);margin:0 0 16px}
.avis-mfoot{display:flex;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.1);padding-top:14px;margin-top:auto}
.avis-mav{width:36px;height:36px;border-radius:50%;background:var(--acc,#e46a2e);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.avis-mname{font-size:13px;font-weight:700;color:#fff}
.avis-mdate{font-size:11px;color:rgba(255,255,255,.5)}
@media(max-width:768px){.avis-mcard{width:280px}.avis-track{animation-duration:62s}}
/* ══════════════ SECTIONS CLAIRES UNIFORMES ══════════════
Les anciennes sections sombres (entreprise, avis, devis) passent en clair
pour un arrière-plan uniforme. Les accents (couleur principale/secondaire)
ponctuent la mise en page : bordures, étoiles, boutons, halos. */
.sec-dark .sh-w, .sec-dark2 .sh-w{color:var(--t1)}
.sec-dark .lead-w, .sec-dark2 .lead-w{color:var(--t2)}
.sec-dark .btn-wh, .sec-dark2 .btn-wh{background:var(--acc);color:var(--btn-text,#fff);border-color:var(--acc)}
.sec-dark .btn-wh:hover, .sec-dark2 .btn-wh:hover{background:var(--acc2,var(--acc));box-shadow:0 8px 24px color-mix(in srgb,var(--acc) 30%,transparent)}
/* Entreprise locale — les cartes portent leur propre fond (cf. .why-item) */
.sec-dark .why-item:hover .why-item-icon{background:color-mix(in srgb,var(--acc) 16%,#fff)}
/* Avis : carte de note + carrousel en clair, accent en touches */
.sec-dark2 .avis-resume{color:var(--t2)}
.sec-dark2 .avis-score{background:color-mix(in srgb,var(--acc) 5%,#fff);border-color:color-mix(in srgb,var(--acc) 18%,var(--bd));box-shadow:0 18px 44px rgba(20,18,15,.06)}
.sec-dark2 .avis-big{color:var(--t1)}
.sec-dark2 .avis-base, .sec-dark2 .avis-google-txt{color:var(--t3)}
.sec-dark2 .avis-marquee::before{background:linear-gradient(to right,var(--fond-clair),transparent)}
.sec-dark2 .avis-marquee::after{background:linear-gradient(to left,var(--fond-clair),transparent)}
.sec-dark2 .avis-mcard{background:#fff;border-color:var(--bd);border-top:3px solid var(--acc);box-shadow:0 10px 30px rgba(20,18,15,.07)}
.sec-dark2 .avis-mtext{color:var(--t2)}
.sec-dark2 .avis-mname{color:var(--t1)}
.sec-dark2 .avis-mdate{color:var(--t3)}
.sec-dark2 .avis-mfoot{border-top-color:var(--bd)}
.sec-dark2 .avis-mg{background:#F1F3F4}
/* Section invite « déposez un avis » (pas encore d'avis mais fiche Google) */
.avis-invite{max-width:680px;margin:0 auto;text-align:center;background:color-mix(in srgb,var(--acc) 5%,#fff);border:1px solid color-mix(in srgb,var(--acc) 18%,var(--bd));border-radius:20px;padding:44px 34px;box-shadow:0 18px 44px rgba(20,18,15,.06)}
.avis-invite-ico{width:60px;height:60px;margin:0 auto 18px;border-radius:50%;background:color-mix(in srgb,var(--acc) 12%,#fff);display:flex;align-items:center;justify-content:center}
.avis-invite-ico svg{width:32px;height:32px;fill:var(--acc)}
.avis-invite .eyebrow-w{color:var(--acc);display:inline-block;margin-bottom:10px}
.avis-invite .sh-w{color:var(--t1)}
.avis-invite-txt{font-size:16px;color:var(--t2);line-height:1.72;margin-bottom:26px}
.avis-invite-btn{display:inline-flex;align-items:center;gap:10px}
.avis-invite-g{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#4285F4;font-weight:900;font-size:14px;line-height:1}
.avis-invite-note{font-size:12.5px;color:var(--t3);margin-top:14px}
/* Mobile : la section avis et celle qui la suit (FAQ) cumulent 128px de vide — on resserre */
/* NB : jamais « { » suivi de « # » collés — Nunjucks y voit l'ouverture d'un commentaire */
@media(max-width:760px){ #avis{padding-bottom:36px} #avis + .sec{padding-top:36px} }
/* Devis : colonne gauche en clair (le formulaire reste clair) */
.sec-dark .home-contact-point{background:#fff;border-color:var(--bd);box-shadow:0 10px 28px rgba(20,18,15,.05)}
.sec-dark .home-contact-point strong{color:var(--t1)}
.sec-dark .home-contact-point small{color:var(--t2)}
.sec-dark .fli{background:#fff;border-color:var(--bd);box-shadow:0 10px 28px rgba(20,18,15,.05)}
.sec-dark .fli:hover{box-shadow:0 14px 32px rgba(20,18,15,.08)}
.sec-dark .fli-title{color:var(--t1)}
.sec-dark .fli-val, .sec-dark .fli-val a{color:var(--t2)}
@media(prefers-reduced-motion:reduce){.avis-track{animation:none;overflow-x:auto;width:100%}}
.avis-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.avis-card{
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
border-radius:var(--radius-lg);padding:24px;
transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),border-color .18s
}
.avis-card:hover{
transform:translateY(-3px);
border-color:color-mix(in srgb,var(--acc) 45%,rgba(255,255,255,.1));
box-shadow:0 12px 32px rgba(0,0,0,.28)
}
.avis-stars{font-size:15px;color:#F5A623;letter-spacing:2px;margin-bottom:12px}
.avis-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.avis-card-top .avis-stars{margin-bottom:0}
.avis-verif{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#34d399;background:rgba(52,211,153,.14);border-radius:20px;padding:3px 10px}
.avis-verif svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.8}
.avis-text{font-size:14px;color:var(--w1);line-height:1.68;font-style:italic;margin-bottom:16px}
.avis-author{display:flex;align-items:center;gap:10px}
.avis-av{width:36px;height:36px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;font-family:var(--f-title);font-weight:800;font-size:13px;color:#fff;flex-shrink:0}
.avis-name{font-family:var(--f-title);font-weight:800;font-size:13px;color:#fff}
.avis-loc{font-size:12px;color:var(--w3);font-weight:600;margin-top:1px}
@media(max-width:900px){
.avis-top{grid-template-columns:1fr;gap:28px}
.avis-cards{grid-template-columns:1fr;gap:12px}
/* Cohérence avec le reste du mobile (hero, pourquoi-nous, FAQ centrés) */
.avis-top > div:last-child{text-align:center}
.avis-top .btn{margin-left:auto;margin-right:auto}
.avis-score{max-width:340px;margin:0 auto}
}
/* ══════════════ ZONES ══════════════ */
.zones-head{text-align:center;padding:0 0 40px;max-width:640px;margin:0 auto}
/* Stats en carte raffinée (même langage que la carte de France : blanc,
bordure teintée accent, ombre douce, chiffres en serif éditoriale). */
.zones-kpis{
display:flex;align-items:stretch;gap:0;margin-bottom:26px;
background:#fff;border:1px solid color-mix(in srgb,var(--acc) 14%,var(--bd));
border-radius:16px;box-shadow:0 16px 40px rgba(20,18,15,.06);overflow:hidden
}
.zki{
flex:1;min-width:150px;text-align:left;
padding:20px 26px;
display:flex;flex-direction:column;gap:6px;
justify-content:center
}
/* Séparateur vertical fin entre les deux stats */
.zki + .zki{border-left:1px solid var(--bd)}
.zki-n{
font-family:var(--f-display);font-weight:600;font-size:27px;
color:var(--t1);line-height:1;letter-spacing:-.02em
}
.zki-l{
font-size:12.5px;color:var(--t3);font-weight:600;
letter-spacing:.02em
}
@media(max-width:600px){
/* min-width:0 : les deux stats restent côte à côte (sinon elles
s'empilaient avec un séparateur vertical orphelin). */
.zki{padding:14px 16px;min-width:0}
.zki-n{font-size:18px}
.zki-l{font-size:11.5px}
}
.zones-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:24px}
.zcard{
background:var(--white);border:1.5px solid var(--bd);border-radius:8px;
padding:10px 16px;display:inline-flex;align-items:center;gap:8px;
white-space:nowrap;transition:all .15s;text-decoration:none;color:inherit;
box-shadow:var(--shadow-sm)
}
.zcard:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-2px);box-shadow:var(--shadow)}
/* Ville de base : accent, pas de noir (retour Benjamin — rendu premium). */
.zcard.main{background:color-mix(in srgb,var(--acc) 8%,#fff);border-color:var(--acc);color:var(--t1);cursor:default}
.zcard.main:hover{transform:none}
.zc-dot{width:6px;height:6px;border-radius:50%;background:var(--acc);flex-shrink:0}
.zcard.main .zc-dot{background:var(--acc);box-shadow:0 0 8px color-mix(in srgb,var(--acc) 60%,transparent)}
.zc-name{font-family:var(--f-title);font-weight:700;font-size:13.5px}
.zc-dist{font-size:10.5px;font-weight:800;color:var(--t3);background:var(--off);border-radius:20px;padding:2px 8px;font-family:var(--f-title)}
.zc-dist.base{background:var(--acc);color:#fff}
.zones-note{text-align:center;font-size:13.5px;color:var(--t2);font-weight:600}
/* Communes + carte de France dans la même section (un seul titre) */
.zones-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:52px;align-items:center;margin-top:34px}
.zones-layout > *{min-width:0}
.zones-layout .zones-pills{justify-content:flex-start}
.zones-layout .zones-note{text-align:left}
@media(max-width:900px){
.zones-layout{grid-template-columns:1fr;gap:30px}
.zones-layout .zones-pills{justify-content:center}
.zones-layout .zones-note{text-align:center}
}
/* Carte claire premium — carte blanche teintée accent, la France en gris
chaud bien lisible, le département d'attache pulse en accent. Tout dérive
de --acc : chaque site adapte la carte à sa propre couleur sans réglage. */
.zmap-card{position:relative;background:linear-gradient(165deg,#fff 0%,color-mix(in srgb,var(--acc) 7%,#fff) 100%);border:1px solid color-mix(in srgb,var(--acc) 16%,var(--bd));border-radius:22px;padding:24px 24px 20px;overflow:hidden;box-shadow:0 22px 55px rgba(20,18,15,.10)}
.zmap-card::before{content:'';position:absolute;inset:0;background:radial-gradient(80% 60% at 70% 30%,color-mix(in srgb,var(--acc) 9%,transparent),transparent 70%);pointer-events:none}
.zmap-canvas{position:relative;padding:4px 10px 6px}
.zmap-card .france-map{max-height:430px}
.zmap-card .france-map .dept{fill:color-mix(in srgb,var(--acc) 5%,#E6E2DA);stroke:#fff;stroke-width:1.1}
.zmap-card .france-map .dept:hover{fill:color-mix(in srgb,var(--acc) 10%,#DDD8CF)}
.zmap-chips{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.zmap-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-title);font-weight:700;font-size:12px;color:var(--t1);background:#fff;border:1px solid var(--bd);border-radius:20px;padding:7px 13px;box-shadow:var(--shadow-sm)}
.zmap-chip.alt{color:var(--t2)}
.zmap-dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px color-mix(in srgb,var(--acc) 70%,transparent);flex-shrink:0}
@keyframes fmap-pulse{
0%,100%{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--acc) 50%,transparent))}
50%{filter:drop-shadow(0 0 16px color-mix(in srgb,var(--acc) 85%,transparent))}
}
@media(max-width:900px){.zmap-card{padding:20px 18px 16px}.zmap-card .france-map{max-height:340px}}
/* ══════════════ CARTE ══════════════ */
.map-section{background:var(--off)}
.map-section-inner{display:grid;grid-template-columns:360px 1fr;min-height:480px;align-items:center}
.map-info{padding:60px 48px;display:flex;flex-direction:column;justify-content:center}
.map-legend{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.map-legend-item{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--t2);font-weight:600}
.map-legend-dot{width:14px;height:14px;border-radius:4px;flex-shrink:0}
.map-legend-dot.main{background:var(--acc)}
.map-legend-dot.zone{background:color-mix(in srgb,var(--acc) 20%,#fff);border:1px solid color-mix(in srgb,var(--acc) 35%,#fff)}
.map-legend-dot.ring{background:transparent;border:2px solid var(--acc);border-radius:50%}
.map-benefits{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.map-benefits li{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--t2);font-weight:600}
.map-benefits svg{width:19px;height:19px;flex-shrink:0;stroke:var(--acc);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.map-cta{display:inline-flex;align-items:center;gap:7px;margin-top:26px;font-family:var(--f-title);font-weight:700;font-size:14px;color:var(--acc);align-self:flex-start}
.map-cta span{transition:transform .15s}
.map-cta:hover span{transform:translateX(3px)}
.map-canvas{position:relative;display:block}
.map-canvas-svg{display:flex;align-items:center;justify-content:center;padding:32px}
.zone-leaflet{width:100%;height:440px;border-radius:14px;overflow:hidden;border:1px solid var(--bd);background:#eef1f3;z-index:0}
.leaflet-tooltip.zone-tip{background:#fff;border:1px solid var(--bd);border-radius:7px;box-shadow:0 4px 14px rgba(0,0,0,.10);color:var(--t1);font-family:var(--f-title);font-weight:700;font-size:12px;padding:3px 8px;white-space:nowrap}
.leaflet-tooltip.zone-tip.leaflet-tooltip-top:before{border-top-color:#fff}
.leaflet-tooltip.zone-tip-base{font-size:13px;font-weight:800;border-color:var(--acc)}
.zone-base-pin{background:var(--acc);border:3px solid #fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.zone-dot{background:var(--acc);border:2px solid #fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.35);opacity:.85}
.zone-dot-imp{opacity:1;box-shadow:0 2px 5px rgba(0,0,0,.4)}
/* ── Carte contact (ancien bloc — voir bloc France SVG plus bas) ── */
.contact-map-address{font-size:.875rem;color:var(--t2);margin:0}
.contact-map-highlights{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.contact-map-highlights div{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--t2);font-weight:600}
.contact-map-highlights span{width:8px;height:8px;border-radius:50%;background:var(--acc);flex-shrink:0;display:inline-block}
@media(max-width:900px){.map-section-inner{grid-template-columns:1fr}.map-info{padding:40px 24px}.map-canvas-svg{padding:24px}}
/* ══════════════ FAQ ══════════════ */
.faq-layout{display:grid;grid-template-columns:300px 1fr;gap:72px}
/* Accueil : tête centrée + liste centrée + appel centré (même schéma que
le reste de la page). .faq-layout reste pour les pages internes. */
.faq-head{text-align:center;max-width:640px;margin:0 auto 36px}
.faq-centre{max-width:860px;margin:0 auto}
.faq-cta{display:flex;justify-content:center;margin-top:30px}
.faq-list{border-top:1px solid var(--bd)}
.faq-row{border-bottom:1px solid var(--bd)}
.faq-row summary{
display:flex;justify-content:space-between;align-items:center;gap:24px;
padding:20px 0;cursor:pointer;list-style:none
}
.faq-row summary::-webkit-details-marker{display:none}
.faq-q{font-family:var(--f-title);font-weight:700;font-size:15.5px;color:var(--t1);line-height:1.4}
.faq-plus{
width:28px;height:28px;border-radius:50%;border:1.5px solid var(--bd2);
display:flex;align-items:center;justify-content:center;flex-shrink:0;
font-size:16px;color:var(--t3);transition:all .15s
}
.faq-plus::before{content:'+'}
.faq-row[open] .faq-plus{background:var(--acc);border-color:var(--acc);color:#fff;transform:rotate(45deg)}
.faq-row[open] .faq-plus::before{content:'+'}
.faq-a{padding:0 0 20px;font-size:14.5px;color:var(--t2);line-height:1.72}
@media(max-width:900px){.faq-layout{grid-template-columns:1fr;gap:28px}}
/* ══════════════ CONTACT SECTION ══════════════ */
.form-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.form-left-info{display:flex;flex-direction:column;gap:14px;margin-top:8px}
/* Cards contact cohérentes : même fond, bordure, radius que la famille de cards */
.fli{
display:flex;align-items:center;gap:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:var(--radius-lg);
padding:16px 18px;
transition:transform .18s var(--ease-out),border-color .18s,box-shadow .18s
}
.fli:hover{
transform:translateY(-2px);
border-color:color-mix(in srgb,var(--acc) 40%,rgba(255,255,255,.1));
box-shadow:0 10px 26px rgba(0,0,0,.25)
}
.fli-icon{
width:44px;height:44px;border-radius:12px;flex-shrink:0;
background:var(--acc-bg);border:1px solid color-mix(in srgb,var(--acc) 25%,transparent);
display:flex;align-items:center;justify-content:center
}
.fli-icon svg,.fli-icon span{font-size:18px;color:var(--acc)}
.fli-icon svg{width:20px;height:20px;stroke:var(--acc);fill:none;stroke-width:1.8}
.fli-content{}
.fli-title{font-family:var(--f-title);font-weight:800;font-size:14px;color:#fff;margin-bottom:3px;display:block}
.fli-val{font-size:13.5px;color:var(--w2);font-weight:500}
.fli-val a{color:var(--w2)}
.form-box{background:var(--white);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-lg)}
.form-title{font-family:var(--f-title);font-weight:800;font-size:20px;color:var(--t1);margin-bottom:4px}
.form-sub{font-size:13.5px;color:var(--t3);margin-bottom:28px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.fld{display:flex;flex-direction:column;gap:5px}
.flbl{font-size:11.5px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.06em;font-family:var(--f-title)}
.finput{background:var(--off);border:1.5px solid var(--bd);border-radius:8px;padding:13px 15px;font-size:14px;color:var(--t1);font-family:var(--f-body);width:100%;transition:border-color .12s,box-shadow .12s}
.fmicro{text-align:center;font-size:11.5px;color:var(--t3);margin-top:10px;font-weight:600}
.finput:focus,.ftxt:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 15%,transparent)}
.finput::placeholder,.ftxt::placeholder{color:var(--t3)}
.ftxt{background:var(--off);border:1.5px solid var(--bd);border-radius:8px;padding:12px 14px;min-height:100px;font-size:14px;color:var(--t1);font-family:var(--f-body);width:100%;resize:vertical}
.fsubmit{background:var(--acc);color:var(--btn-text);border:none;padding:15px;border-radius:8px;font-size:15px;font-weight:800;width:100%;font-family:var(--f-title);display:flex;align-items:center;justify-content:center;gap:9px;margin-top:8px;cursor:pointer;transition:all .15s;box-shadow:0 4px 16px color-mix(in srgb,var(--acc) 35%,transparent)}
.fsubmit:hover{transform:translateY(-1px);box-shadow:0 6px 24px color-mix(in srgb,var(--acc) 45%,transparent)}
.fnote{font-size:11.5px;color:var(--t3);text-align:center;margin-top:10px}
@media(max-width:900px){.form-layout{grid-template-columns:1fr;gap:40px}.frow{grid-template-columns:1fr}}
/* ══════════════ CTA BLOCK ══════════════ */
.cta-block{position:relative;overflow:hidden;min-height:300px;display:flex;align-items:center;background:#FFFFFF}
.cta-bbg{
position:absolute;inset:0;
background:
radial-gradient(ellipse 100% 140% at 8% 0%, color-mix(in srgb,var(--acc) 12%,transparent) 0%, transparent 50%),
radial-gradient(ellipse 90% 120% at 100% 100%, color-mix(in srgb,var(--acc) 9%,transparent) 0%, transparent 48%),
#FFFFFF;
}
.cta-bbg::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(0,0,0,.01) 0,rgba(0,0,0,.01) 1px,transparent 1px,transparent 30px)}
.cta-bbg::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--acc),transparent)}
.cta-inner{position:relative;z-index:2;padding:56px 40px;max-width:1320px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center}
.cta-eyebrow,.cta-label{font-family:var(--f-title);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--acc);margin-bottom:14px}
.cta-h{font-family:var(--f-display);font-weight:600;font-size:44px;color:var(--t1);letter-spacing:-.02em;line-height:1.07;margin-bottom:20px}
.cta-sub{font-size:15px;color:var(--t2);line-height:1.55;margin:-8px 0 22px;max-width:430px;font-weight:500}
.cta-proofs{display:flex;gap:20px;flex-wrap:wrap}
.cta-p{font-size:13px;color:var(--t2);font-family:var(--f-title);font-weight:600;display:flex;align-items:center;gap:6px}
.cta-p::before{content:'✓';color:var(--acc);font-weight:900}
.cta-right{display:flex;flex-direction:column;gap:16px;align-items:flex-end;flex-shrink:0}
.cta-tel{font-family:var(--f-title);font-weight:900;font-size:24px;letter-spacing:-.02em;text-align:right}
.cta-tel a{color:var(--t1)!important;display:inline-flex;align-items:center;gap:8px;transition:color .2s ease}
.cta-tel a:hover{color:var(--acc)!important}
.cta-tel-sub{font-size:12px;color:var(--t3);font-weight:600;margin-top:4px}
.cta-tel-block{font-family:var(--f-title);font-weight:900;font-size:22px;color:var(--t1);text-align:right;letter-spacing:-.02em}
.cta-tel-block a{color:var(--t1);transition:color .2s ease}
.cta-tel-block a:hover{color:var(--acc)}
@media(max-width:760px){.cta-inner{grid-template-columns:1fr;gap:28px;text-align:center}.cta-h{font-size:32px}.cta-right{align-items:center}.cta-tel{text-align:center}.cta-proofs{justify-content:center}}
/* ══════════════ FOOTER ══════════════ */
footer.site-ftr{background:var(--footer-bg);border-top:1px solid var(--footer-border,rgba(255,255,255,.08));padding:64px 0 32px;font-family:var(--footer-font,var(--f-body))}
.ft-inner{max-width:1320px;margin:0 auto;padding:0 40px}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px;margin-bottom:56px}
.ft-brand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.ft-brand-mark{width:34px;height:34px;background:var(--acc);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ft-brand-mark:has(.ft-logo-img){width:auto;height:auto;background:transparent;border-radius:0}
.ft-logo-img{height:calc(var(--logo-h,48px) + 8px);width:auto;max-width:260px;object-fit:contain;display:block}
.ft-brand-mark svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.2}
.ft-brand-name{font-family:var(--footer-font,var(--f-title));font-weight:800;font-size:14px;color:var(--footer-text);letter-spacing:-.02em}
.ft-brand-sub{font-size:9.5px;color:var(--footer-text);opacity:.55;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.ft-desc{font-size:13.5px;color:var(--w3);line-height:1.72;margin-bottom:20px;max-width:260px}
.ft-certifs{display:flex;flex-wrap:wrap;gap:8px}
.ft-certif{font-size:11px;font-weight:700;color:var(--w3);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:4px 10px;border-radius:20px;font-family:var(--f-title);text-transform:uppercase;letter-spacing:.04em}
.ft-h{font-family:var(--footer-font,var(--f-title));font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--footer-title,rgba(255,255,255,.55));margin-bottom:18px}
.ft-l{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--footer-link,var(--footer-text));opacity:.82;margin-bottom:10px;font-weight:500;transition:opacity .12s,color .12s}
.ft-l:hover{opacity:1;color:var(--footer-link-hover,var(--acc))}
.ft-contact-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.ft-ci{color:var(--acc);flex-shrink:0;margin-top:2px}
.ft-ci svg{width:15px;height:15px;stroke:var(--acc);fill:none;stroke-width:1.8}
/* Icône pin de localisation (remplace l'emoji 📍) — colorée en accent */
.loc-ico{width:13px;height:13px;stroke:var(--acc);fill:none;stroke-width:1.8;flex-shrink:0;display:inline-block;vertical-align:middle;margin-right:5px}
.ft-cv{font-size:13.5px;color:var(--w2);line-height:1.5;font-weight:500}
.ft-cv a{color:var(--w2);transition:color .12s}
.ft-cv a:hover{color:#fff}
.ft-bottom{border-top:1px solid var(--footer-border,rgba(255,255,255,.08));padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.ft-copy{font-size:12px;color:var(--w2);font-weight:500}
.ft-links{display:flex;gap:20px}
.ft-links a{font-size:12px;color:var(--footer-text);opacity:.7;font-weight:500;transition:color .12s,opacity .12s}
.ft-links a:hover{color:var(--footer-link-hover,var(--acc));opacity:1}
@media(max-width:900px){.ft-inner{padding:0 24px}.ft-top{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){footer.site-ftr{padding:48px 0 24px}.ft-inner{padding:0 16px}.ft-top{grid-template-columns:1fr;gap:28px}.ft-bottom{flex-direction:column;align-items:flex-start}}
/* ══════════════ STICKY MOBILE ══════════════ */
.sticky-mob{display:none}
@media(max-width:760px){
.sticky-mob{
display:grid;grid-template-columns:1fr 1fr;gap:0;
position:fixed;bottom:0;left:0;right:0;z-index:95;
background:rgba(20,19,17,.96);backdrop-filter:blur(14px);
border-top:1px solid rgba(255,255,255,.08);
box-shadow:0 -4px 24px rgba(0,0,0,.3);
padding-bottom:env(safe-area-inset-bottom,0);
transform:translateY(100%);
transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.sticky-mob.sticky-visible{transform:translateY(0)}
.sticky-mob a{
display:flex;align-items:center;justify-content:center;gap:10px;
padding:16px 10px;text-decoration:none;color:#fff;
font-family:var(--f-title);transition:background .2s ease
}
.sticky-mob .sticky-ico{font-size:20px;flex-shrink:0;line-height:1}
.sticky-mob .sticky-ico .btn-ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.sticky-mob .sticky-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0}
.sticky-mob .sticky-lbl{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sticky-mob .sticky-sub{font-weight:600;font-size:11px;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sticky-call{background:var(--acc)}
.sticky-call:active{background:var(--acc2)}
.sticky-quote{background:transparent;border-left:1px solid rgba(255,255,255,.1)}
.sticky-quote:active{background:rgba(255,255,255,.06)}
.sticky-call .sticky-sub{color:rgba(255,255,255,.85)}
.sticky-quote .sticky-ico{color:var(--acc)}
.sticky-full{grid-column:1/-1;background:var(--acc)!important;justify-content:center}
.sticky-full .sticky-lbl{font-size:15px}
/* L'espace réservé à la barre fixe vit DANS le footer (même fond sombre) :
un padding sur body laisserait une bande claire entre footer et barre */
footer.site-ftr{padding-bottom:calc(24px + 64px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:360px){
.sticky-mob .sticky-sub{display:none}
.sticky-mob a{padding:14px 10px}
}
/* ══════════════ BREADCRUMB ══════════════ */
.bc{font-size:12px;color:rgba(255,255,255,.45);font-family:var(--f-title);font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.bc a{color:rgba(255,255,255,.45);transition:color .12s}
.bc a:hover{color:rgba(255,255,255,.8)}
.bc strong{color:rgba(255,255,255,.9)}
.bc-sep{color:rgba(255,255,255,.2)}
/* ══════════════ Pages internes ══════════════ */
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:60px;align-items:start}
@media(max-width:900px){.two-col{grid-template-columns:1fr;gap:36px}}
@media(min-width:901px){.sticky-side{position:sticky;top:88px}}
.srv-detail-block{margin-bottom:32px}
.srv-detail-title{font-family:var(--f-title);font-weight:800;font-size:13px;color:var(--t2);margin-bottom:12px;text-transform:uppercase;letter-spacing:.08em}
.srv-detail-list{display:flex;flex-direction:column;gap:10px}
.srv-dl{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--t2);line-height:1.6}
.srv-dl-check{color:var(--acc);font-weight:900;flex-shrink:0;font-size:16px;margin-top:-1px}
.sidebar-card{background:var(--off);border-radius:var(--radius-lg);padding:28px;border:1px solid var(--bd);box-shadow:var(--shadow-sm)}
.sb-title{font-family:var(--f-title);font-weight:800;font-size:15px;color:var(--t1);margin-bottom:18px}
.sb-tel{font-family:var(--f-title);font-weight:900;font-size:24px;color:var(--acc);margin-bottom:4px;display:flex;align-items:center;gap:8px;letter-spacing:-.02em}
.sb-tel .btn-ico{width:20px;height:20px;stroke:var(--acc)}
.cta-tel-block .btn-ico{width:18px;height:18px;stroke:currentColor;display:inline-block;vertical-align:middle;margin-right:6px}
.sb-sub{font-size:12.5px;color:var(--t2);margin-bottom:18px}
.sb-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--acc);color:#fff;padding:13px;border-radius:8px;font-family:var(--f-title);font-weight:700;font-size:14px;transition:all .15s;box-shadow:0 4px 16px color-mix(in srgb,var(--acc) 30%,transparent)}
.sb-btn:hover{transform:translateY(-1px)}
.sb-certifs{display:flex;flex-direction:column;gap:9px;margin-top:18px;border-top:1px solid var(--bd);padding-top:18px}
.sb-cert{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--t1);font-weight:600}
.sb-cert-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex-shrink:0}
.args-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:760px){.args-grid{grid-template-columns:1fr 1fr}}
.ag-card{background:var(--white);border:1px solid var(--bd);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}
.ag-t{font-size:14px;font-weight:800;color:var(--t1);margin-bottom:6px;font-family:var(--f-title)}
.ag-s{font-size:13px;color:var(--t2);line-height:1.55}
.mesh-title{font-family:var(--f-title);font-weight:800;font-size:12px;color:var(--t2);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
/* Infos locales sidebar ville — icônes en accent */
.city-infos{display:flex;flex-direction:column;gap:10px}
.city-info{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--t1);font-weight:600}
.city-info .loc-ico{width:15px;height:15px;stroke:var(--acc);fill:none;stroke-width:1.8;flex-shrink:0;margin-right:0}
.mesh-links{display:flex;flex-wrap:wrap;gap:8px}
.mesh-link{background:var(--white);border:1.5px solid var(--bd);border-radius:8px;padding:8px 14px;font-size:13px;color:var(--t1);font-family:var(--f-title);font-weight:700;transition:all .12s;box-shadow:var(--shadow-sm)}
.mesh-link:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px)}
.local-ctx{background:var(--off);border-left:4px solid var(--acc);border-radius:0 var(--radius) var(--radius) 0;padding:22px 26px;margin:32px 0}
.vs-local-title{font-family:var(--f-title);font-weight:800;font-size:15px;color:var(--t1);margin-bottom:14px}
.vs-local-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.vs-local-grid{grid-template-columns:1fr}}
.vs-litem{font-size:14px;color:var(--t2);display:flex;align-items:flex-start;gap:8px;line-height:1.55}
.vs-litem-dot{color:var(--acc);font-weight:900;flex-shrink:0}
.other-srv-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.other-srv-pill{display:inline-flex;align-items:center;background:var(--white);border:1px solid var(--bd);border-radius:999px;padding:9px 18px;font-size:13.5px;color:var(--t1);font-family:var(--f-title);font-weight:600;box-shadow:var(--shadow-sm);transition:background .14s,color .14s,border-color .14s,transform .14s,box-shadow .14s}
.other-srv-pill:hover{background:var(--acc);border-color:var(--acc);color:var(--btn-text);transform:translateY(-1px);box-shadow:var(--shadow)}
.villes-links{display:flex;flex-wrap:wrap;gap:8px}
.ville-link{background:var(--white);border:1.5px solid var(--bd);border-radius:8px;padding:9px 14px;font-size:13px;color:var(--t1);font-family:var(--f-title);font-weight:700;display:inline-flex;align-items:center;gap:7px;box-shadow:var(--shadow-sm);transition:all .12s}
.ville-link:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px)}
.ville-link.forte{border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
.ville-link .vl-dist{font-size:10.5px;color:var(--t3);font-weight:700;background:var(--off);border-radius:20px;padding:2px 7px}
/* ── Repli "Voir toutes les communes" (liens gardés dans le HTML pour le SEO) ── */
.villes-links.is-collapsed .ville-link:nth-child(n+16),
.mesh-links.is-collapsed .mesh-link:nth-child(n+16){display:none}
.zones-pills.is-collapsed .zcard:nth-child(n+14){display:none}
.voir-plus-wrap{margin-top:16px}
.voir-plus-btn{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1.5px solid var(--bd);border-radius:8px;padding:10px 18px;font-size:13px;font-weight:700;font-family:var(--f-title);color:var(--t1);cursor:pointer;box-shadow:var(--shadow-sm);transition:all .12s}
.voir-plus-btn:hover{border-color:var(--acc);color:var(--acc)}
.voir-plus-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}
/* ── Services prioritaires (page ville) : cartes + tags secondaires ── */
.vsrv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:8px}
@media(max-width:640px){.vsrv-grid{grid-template-columns:1fr}}
.vsrv-card{display:block;background:var(--white);border:1.5px solid var(--bd);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow-sm);transition:all .14s;text-decoration:none}
.vsrv-card:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.09)}
.vsrv-name{font-family:var(--f-title);font-weight:800;font-size:15.5px;color:var(--t1);display:flex;align-items:center;justify-content:space-between;gap:10px}
.vsrv-arr{color:var(--acc);font-size:17px;font-weight:700}
.vsrv-desc{margin-top:7px;font-size:12.5px;color:var(--t3);line-height:1.5}
.vsrv-sub{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin:20px 0 12px}
.other-srv-block{margin-top:48px;padding-top:38px;border-top:1px solid var(--bd)}
.other-srv-block .vsrv-sub{font-size:16px;color:var(--acc);letter-spacing:.08em;margin-bottom:6px}
.other-srv-intro{text-align:center;font-size:14px;color:var(--t2);max-width:540px;margin:0 auto 24px;line-height:1.55}
/* ── Phase 2 : infos clés premium (page ville) ── */
.local-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:10px}
@media(max-width:760px){.local-kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.local-kpi-grid{grid-template-columns:1fr}}
.local-kpi{background:var(--white);border:1.5px solid var(--bd);border-radius:12px;padding:18px;box-shadow:var(--shadow-sm)}
.local-kpi-ico{width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--acc) 12%,transparent);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.local-kpi-ico svg{width:20px;height:20px;stroke:var(--acc);fill:none;stroke-width:2}
.local-kpi-val{font-family:var(--f-title);font-weight:800;font-size:15.5px;color:var(--t1);line-height:1.25}
.local-kpi-lbl{margin-top:5px;font-size:12px;color:var(--t3);line-height:1.45}
/* ── Phase 2 : pourquoi nous choisir (3 cartes) ── */
.vchoix-sec{margin-top:8px;background:var(--off);border:1px solid var(--bd);border-radius:18px;padding:40px 34px}
@media(max-width:600px){.vchoix-sec{padding:30px 20px}}
.vchoix-title{font-family:var(--f-title);font-weight:800;font-size:24px;color:var(--t1);text-align:center;margin-bottom:6px}
.vchoix-sub{text-align:center;font-size:14px;color:var(--t3);margin:0 auto 28px;max-width:560px}
.vchoix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.vchoix-grid{grid-template-columns:1fr}}
.vchoix-card{background:var(--white);border:1.5px solid var(--bd);border-radius:14px;padding:26px 24px;box-shadow:var(--shadow-sm);transition:all .14s}
.vchoix-card:hover{border-color:color-mix(in srgb,var(--acc) 35%,transparent);transform:translateY(-2px)}
.vchoix-ico{width:46px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--acc) 12%,transparent);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.vchoix-ico svg{width:24px;height:24px;stroke:var(--acc);fill:none;stroke-width:2}
.vchoix-card h3{font-family:var(--f-title);font-weight:800;font-size:17px;color:var(--t1);margin:0 0 8px}
.vchoix-card p{font-size:13.5px;color:var(--t3);line-height:1.55;margin:0}
/* ── Phase 2 : avis premium ── */
.local-avis-rating{display:flex;align-items:center;gap:11px;margin-bottom:14px;flex-wrap:wrap}
.lar-num{font-family:var(--f-title);font-weight:800;font-size:30px;color:var(--t1);line-height:1}
.lar-stars{color:#f5a623;font-size:16px;letter-spacing:1.5px}
.lar-verif{font-size:11.5px;font-weight:700;color:#1a9d5a;background:color-mix(in srgb,#1a9d5a 12%,transparent);border-radius:20px;padding:4px 11px;display:inline-flex;align-items:center;gap:5px}
.lar-verif svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6}
/* ── Phase 3 : page service ── */
.signaux-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:600px){.signaux-grid{grid-template-columns:1fr}}
.signal-card{background:var(--white);border:1.5px solid var(--bd);border-left:3px solid var(--acc);border-radius:10px;padding:16px 18px;box-shadow:var(--shadow-sm)}
.signal-ico{width:32px;height:32px;border-radius:8px;background:color-mix(in srgb,var(--acc) 12%,transparent);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.signal-ico svg{width:18px;height:18px;stroke:var(--acc);fill:none;stroke-width:2}
.signal-t{font-family:var(--f-title);font-weight:800;font-size:14.5px;color:var(--t1);margin-bottom:5px}
.signal-d{font-size:12.5px;color:var(--t3);line-height:1.5}
.interv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:600px){.interv-grid{grid-template-columns:1fr}}
.interv-card{display:flex;align-items:flex-start;gap:10px;background:var(--off);border:1px solid var(--bd);border-radius:10px;padding:13px 15px;font-size:13.5px;color:var(--t1);font-weight:600;line-height:1.4}
.interv-check{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;margin-top:1px}
.interv-check svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3}
.urgence-block{display:flex;gap:16px;align-items:flex-start;background:color-mix(in srgb,var(--acc) 7%,var(--off));border:1.5px solid color-mix(in srgb,var(--acc) 22%,transparent);border-radius:14px;padding:22px 24px;margin-bottom:32px}
.urgence-ico{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--acc);display:flex;align-items:center;justify-content:center}
.urgence-ico svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2}
.urgence-t{font-family:var(--f-title);font-weight:800;font-size:17px;color:var(--t1);margin-bottom:6px}
.urgence-p{font-size:13.5px;color:var(--t2);line-height:1.6;margin:0}
.engage-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:600px){.engage-grid{grid-template-columns:1fr}}
.engage-card{display:flex;align-items:flex-start;gap:12px;background:var(--white);border:1.5px solid var(--bd);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow-sm)}
.engage-check{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--acc) 14%,transparent);display:flex;align-items:center;justify-content:center;margin-top:1px}
.engage-check svg{width:14px;height:14px;stroke:var(--acc);fill:none;stroke-width:3}
.engage-t{font-family:var(--f-title);font-weight:800;font-size:14.5px;color:var(--t1);margin-bottom:4px}
.engage-d{font-size:12.5px;color:var(--t3);line-height:1.5}
/* ── Section Avis clients ── */
.avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.avis-grid{grid-template-columns:1fr}}
.avis-card{background:var(--card,#fff);border:1px solid var(--bd,#eee);border-radius:var(--radius-lg,14px);padding:28px;display:flex;flex-direction:column;gap:14px;transition:transform .18s,box-shadow .18s}
.avis-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08)}
.avis-stars{color:#F5A623;font-size:16px;letter-spacing:2px}
.avis-text{font-size:14.5px;line-height:1.7;color:var(--t2);flex:1}
.avis-author{display:flex;align-items:center;gap:12px;margin-top:4px}
.avis-avatar{width:42px;height:42px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--f-title);font-weight:800;font-size:17px;flex-shrink:0}
.avis-name{font-family:var(--f-title);font-weight:700;font-size:14px;color:var(--t1)}
.avis-loc{font-size:12.5px;color:var(--t3,#999);font-weight:600}
/* Avis local (pages ville + service) — carte claire premium */
.local-avis-wrap{margin-top:40px}
.local-avis-list{margin-top:14px}
.local-avis-card{position:relative;background:#fff;border:1px solid var(--bd);border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow-sm);display:block}
.local-avis-quote{font-family:var(--f-title);font-size:40px;font-weight:900;color:color-mix(in srgb,var(--acc) 35%,#fff);line-height:.6;margin-bottom:10px}
.local-avis-text{font-size:14.5px;line-height:1.7;color:var(--t1);margin-bottom:18px;font-style:normal}
.local-avis-author{display:flex;align-items:center;gap:12px}
.local-avis-av{width:40px;height:40px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--f-title);font-weight:800;font-size:14px;flex-shrink:0}
.local-avis-name{font-family:var(--f-title);font-weight:800;font-size:13.5px;color:var(--t1)}
.local-avis-loc{font-size:12.5px;color:var(--t3);font-weight:600;margin-top:1px}
.avis-loc-stars{color:#F5A623;letter-spacing:1px}
/* ── Animation chiffres au scroll ── */
.zki-n{transition:opacity .4s ease}
/* ═══════════ ANIMATIONS HOVER ORGANIQUES ═══════════ */
/* Courbe d'accélération naturelle partagée */
:root{--ease-out:cubic-bezier(.22,.61,.36,1);--ease-soft:cubic-bezier(.4,0,.2,1)}
/* Cartes services — soulèvement + accent qui apparaît */
.srv-card{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .25s ease!important;will-change:transform}
.srv-card:hover{transform:translateY(-6px)!important;box-shadow:0 18px 44px rgba(0,0,0,.13),0 4px 12px rgba(0,0,0,.06)!important;border-color:color-mix(in srgb,var(--acc) 45%,var(--bd))!important}
.srv-card .srv-card-arrow,.srv-card .link-arr{transition:transform .35s var(--ease-out)}
.srv-card:hover .srv-card-arrow,.srv-card:hover .link-arr{transform:translateX(5px)}
/* Cartes zones — léger zoom + lueur accent */
.zcard{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .25s ease,color .25s ease!important}
.zcard:not(.main):hover{transform:translateY(-4px) scale(1.015)!important;box-shadow:0 14px 34px color-mix(in srgb,var(--acc) 14%,rgba(0,0,0,.1))!important}
/* Cartes avis — soulèvement doux */
.avis-card{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)!important}
.avis-card:hover{transform:translateY(-5px)!important;box-shadow:0 18px 44px rgba(0,0,0,.1)!important}
/* Why-items (cartes) — soulèvement doux + icône réactive */
.why-item{transition:transform .28s var(--ease-out),box-shadow .28s ease,border-color .28s ease}
.why-item:hover{transform:translateY(-3px)}
.why-item-icon{transition:transform .35s var(--ease-out),background .25s ease}
.why-item:hover .why-item-icon{transform:scale(1.08)}
/* Coordonnées contact (fli) — icône réactive */
.fli-icon{transition:transform .35s var(--ease-out),box-shadow .3s ease}
/* Boutons — accélération plus naturelle */
.btn{transition:transform .25s var(--ease-out),box-shadow .3s var(--ease-out),background .2s ease!important}
.btn-acc:hover{transform:translateY(-2px)!important}
/* Liens flèche — déplacement fluide */
.link-arr{transition:gap .3s var(--ease-out),color .2s ease!important}
.link-arr:hover{gap:11px}
/* Process steps — numéro qui réagit */
.process-num{transition:transform .35s var(--ease-out),background .3s ease,border-color .3s ease,box-shadow .3s ease}
.process-step:hover .process-num{transform:translateY(-4px) scale(1.08);box-shadow:0 10px 26px color-mix(in srgb,var(--acc) 30%,transparent)}
/* Galerie — image qui respire */
.gal-card{transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)!important}
.gal-card:hover{transform:translateY(-5px) scale(1.012)!important;box-shadow:0 20px 50px rgba(0,0,0,.18)!important}
/* CTA final — bouton qui rayonne */
.cta-block .btn-acc:hover{transform:translateY(-2px) scale(1.02)!important;box-shadow:0 10px 30px color-mix(in srgb,var(--acc) 55%,transparent)!important}
/* Logo header — subtil */
.hdr-logo{transition:opacity .2s ease}
.hdr-logo:hover{opacity:.85}
/* Footer liens — glissement */
.ft-col a,.footer a{transition:color .2s ease,padding-left .25s var(--ease-out)}
.ft-col a:hover{padding-left:4px}
/* Respect des préférences de mouvement réduit */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
/* ══════════════ CONTACT PREMIUM OVERRIDES — PURE STUDIO ══════════════ */
.contact-premium-sec{
padding:88px 0 96px;
background:
radial-gradient(900px 420px at 80% -10%, color-mix(in srgb,var(--acc) 7%, transparent), transparent 58%),
linear-gradient(180deg,#fff 0%,#fbfaf7 100%);
}
.contact-premium-layout{
max-width:1120px;margin:0 auto;
display:grid;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
gap:56px;align-items:start;
}
.contact-info-panel{min-width:0;}
.contact-title{margin:8px 0 14px;color:var(--t1);letter-spacing:-.045em;}
.contact-lead{font-size:15px;color:var(--t2);line-height:1.75;max-width:520px;margin-bottom:24px;}
.contact-cards{display:grid;gap:12px;margin-top:24px;}
.contact-card{
display:flex;gap:14px;align-items:center;padding:16px 17px;
background:#fff;border:1px solid var(--bd);border-radius:14px;color:var(--t1);
box-shadow:0 10px 28px rgba(0,0,0,.045);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.contact-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--acc) 38%,var(--bd));box-shadow:0 18px 42px rgba(0,0,0,.075);}
.contact-card-main{border-color:color-mix(in srgb,var(--acc) 35%,var(--bd));background:linear-gradient(135deg,#fff 0%,color-mix(in srgb,var(--acc) 6%,#fff) 100%);}
.contact-card-icon{width:40px;height:40px;border-radius:12px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 40px;box-shadow:0 10px 22px color-mix(in srgb,var(--acc) 25%,transparent);}
.ci-ico{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.contact-card-body{display:flex;flex-direction:column;min-width:0;line-height:1.25;}
.contact-card-label{font-family:var(--f-title);font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--acc);margin-bottom:5px;}
.contact-card strong{font-family:var(--f-title);font-size:15px;font-weight:900;color:var(--t1);letter-spacing:-.015em;overflow-wrap:anywhere;}
.contact-card small{font-size:12.5px;color:var(--t2);font-weight:600;margin-top:4px;}
.contact-hours-card{
margin-top:18px;padding:20px;background:var(--off);border:1px solid var(--bd);border-radius:14px;
}
.contact-mini-title{font-family:var(--f-title);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:var(--t1);margin-bottom:10px;}
.contact-hours-list{display:grid;gap:0;}
.contact-hour-row{display:flex;justify-content:space-between;gap:18px;padding:7px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:13px;}
.contact-hour-row:last-child{border-bottom:0;}
.contact-hour-row span{font-weight:700;color:var(--t1);}
.contact-hour-row strong{font-weight:800;color:var(--t2);}
.contact-hours-note{margin-top:12px;padding:10px 12px;border-radius:10px;background:#fff;color:var(--t2);font-size:12.5px;font-weight:700;border:1px solid var(--bd);}
.contact-urgent-card{
margin-top:18px;padding:22px;border-radius:16px;background:linear-gradient(135deg,var(--ink) 0%,#172019 100%);border:1px solid rgba(255,255,255,.08);
box-shadow:0 18px 40px rgba(0,0,0,.18);color:#fff;display:grid;gap:16px;position:relative;overflow:hidden;
}
.contact-urgent-card::after{content:'';position:absolute;right:-60px;bottom:-80px;width:190px;height:190px;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 18%,transparent),transparent 65%);}
.contact-urgent-kicker{font-family:var(--f-title);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:900;display:block;margin-bottom:5px;}
.contact-urgent-card strong{font-family:var(--f-title);font-size:18px;font-weight:900;display:block;}
.contact-urgent-card p{color:var(--w2);font-size:13.5px;line-height:1.6;margin-top:7px;max-width:420px;}
.contact-urgent-card .btn{width:max-content;position:relative;z-index:1;}
.contact-legal-line{margin-top:14px;color:var(--t3);font-size:12px;font-weight:700;}
.contact-form-wrap{position:sticky;top:112px;}
.contact-form-card{padding:34px;border-radius:18px;border:1px solid rgba(0,0,0,.05);box-shadow:0 28px 70px rgba(0,0,0,.16);background:#FBFBF9;}
.form-kicker{font-family:var(--f-title);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.15em;color:var(--acc);display:block;margin-bottom:8px;}
.contact-form-card .form-title{font-size:24px;font-weight:900;letter-spacing:-.035em;color:#1E1E1E;}
.contact-form-card .form-sub{font-size:13.5px;color:#6F6A62;font-weight:600;margin-bottom:24px;}
.contact-form-card .flbl{color:#6F6A62;}
.contact-form-card .finput,.contact-form-card .ftxt{background:#FFFFFF;border-color:#E5E5E1;border-radius:9px;min-height:46px;color:#1F1F1F;}
.contact-form-card .ftxt{min-height:118px;}
.contact-form-card .fsubmit{min-height:48px;border-radius:9px;box-shadow:0 10px 24px color-mix(in srgb,var(--acc) 28%,transparent);}
.form-trust-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:13px;color:var(--t3);font-size:11.5px;font-weight:700;}
.contact-map-section{padding:0 0 92px;background:linear-gradient(180deg,#fbfaf7 0%,var(--off) 100%);}
.contact-map-shell{
max-width:1120px;margin:0 auto;display:grid;grid-template-columns:360px 1fr;
min-height:460px;background:#fff;border:1px solid var(--bd);border-radius:22px;overflow:hidden;
box-shadow:0 28px 80px rgba(0,0,0,.11);
}
.contact-map-info{padding:46px 42px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#fff 0%,color-mix(in srgb,var(--acc) 5%,#fff) 100%);}
.contact-map-address{font-size:15px;color:var(--t2);line-height:1.65;font-weight:700;margin:10px 0 18px;}
.contact-map-highlights{display:grid;gap:10px;margin:6px 0 22px;}
.contact-map-highlights div{display:flex;align-items:center;gap:9px;color:var(--t2);font-weight:800;font-size:13px;}
.contact-map-highlights span{width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 5px color-mix(in srgb,var(--acc) 12%,transparent);flex:0 0 9px;}
.contact-map-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.contact-map-pills a{padding:8px 12px;border-radius:999px;background:var(--off);border:1px solid var(--bd);font-family:var(--f-title);font-size:12.5px;font-weight:800;color:var(--t1);transition:all .15s;}
.contact-map-pills a:hover{background:var(--acc);border-color:var(--acc);color:#fff;transform:translateY(-1px);}
.contact-map-frame{position:relative;min-height:460px;background:linear-gradient(135deg,#fbfaf7 0%,var(--off) 100%);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:32px;}
/* Carte France SVG — statique, premium */
.france-map{width:100%;height:auto;max-height:420px;display:block}
.france-map .dept{
fill:#ECEAE5;stroke:#fff;stroke-width:1.2;
transition:fill .2s ease;
}
.france-map .dept:hover{fill:#DDD9D1}
/* Les départements actifs (colorés via