/* =====================================================================
   NFR — Nuance Façades Rénovation · design system partagé (refonte 2026)
   Direction : éditorial, architectural, hairlines, coins nets, couleur
   de marque en accents. Utilisé par les 8 pages services + l'accueil.
   ===================================================================== */

:root{
  --bg:#e7edee;                 /* fond de page : pétrole très pâle (base des rayures) */
  --paper:#f4f7f8;              /* blanc à peine pétrolé : heros, bandes .paper */
  --white:#ffffff;              /* blanc du logo : cartes, formulaires */
  /* Rayures « entailles » : même motif que le fond de la maison 3D (120°, période 192 px),
     en version claire et avec des bords fondus (imite le flou du bloc 3D sans filter). */
  --stripe-a:#e2e9eb;
  --stripe-b:#ecf1f2;
  --bg-stripes:repeating-linear-gradient(120deg, var(--stripe-a) 0 72px, var(--stripe-b) 120px 168px, var(--stripe-a) 192px);
  --ink:#201c17;                /* presque noir chaud */
  --muted:#6d675d;
  --faint:#9a938763;
  --maxw:1180px;
  /* =====================================================================
     Marque NFR — palette échantillonnée directement sur le logo (logo-nfr.png).
     3 vraies teintes du logo : pétrole #004A5C (cœur, dominant),
     navy #212C56 (filet gauche), rouge #B71A26 (filet droit / accent R).
     Aucun orange : l'ancien ambre (accent du brief) ne figurait pas dans le logo.
     ===================================================================== */
  --petrol:#004A5C;              /* couleur de marque DOMINANTE */
  --petrol-deep:#003343;         /* pétrole foncé : hover, profondeur, aplats */
  --petrol-bright:#0A6E80;       /* pétrole clair : accents, liens, survols */
  --petrol-pale:#7FCAD6;         /* pétrole pâle : accents/liens SUR fond pétrole foncé */
  --red:#B71A26; --red-2:#8F141F;/* rouge du logo : accent chaud TRÈS ponctuel */
  --navy-ink:#212C56;            /* navy réel du logo : usage rare (fonds alternés) */
  /* Alias de compatibilité : tout le CSS existant continue de fonctionner,
     mais pointe désormais vers la vraie palette pétrole (plus d'orange). */
  --navy:#004A5C;  --brand-navy:#004A5C;               /* ex-navy → pétrole */
  --navy-2:#0A6E80; --brand-navy-light:#0A6E80;        /* ex-navy clair → pétrole clair */
  --amber:#0A6E80; --brand-amber:#0A6E80;              /* ex-ambre → pétrole clair (accent) */
  --amber-2:#065462; --brand-amber-dark:#065462;       /* ex-ambre foncé → pétrole clair foncé */
  --green:#2E7D5B; --brand-green:#2E7D5B;
  --tint:#e2edef; --brand-tint:#e2edef;                /* teinte claire pétrolée (ex-bleutée) */
  --tint-2:#d2e2e5;                                    /* teinte pétrolée un cran plus dense */
  /* --- Dégradés DE MARQUE (pétrole clair→foncé, bi-ton pétrole↔navy). Sobres. --- */
  --grad-petrol:linear-gradient(155deg,#0A6E80 0%,#004A5C 55%,#00323F 100%);
  --grad-petrol-navy:linear-gradient(150deg,#0A6273 0%,#004A5C 46%,#1A2450 100%);
  --grad-btn:linear-gradient(180deg,#065C6E 0%,#004A5C 100%);
  --grad-btn-hover:linear-gradient(180deg,#004A5C 0%,#00303E 100%);
  --grad-tint:linear-gradient(180deg,#eef5f6 0%,#dbe8ea 100%);   /* wash clair pour sections teintées */
  --line:rgba(32,28,23,.16);          /* hairline chaud */
  --line-soft:rgba(32,28,23,.09);
  --line-strong:rgba(32,28,23,.34);
  --brand-line:rgba(0,74,92,.18);
  --shadow-crisp:0 18px 40px -28px rgba(0,58,71,.5);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  line-height:1.65; font-size:16.5px;
  /* rayures diagonales pétrole pâle, reprises du fond de la maison 3D */
  background-image:var(--bg-stripes);
}
h1,h2,h3,h4{ font-family:'Fraunces',Georgia,serif; font-weight:500; line-height:1.04; letter-spacing:-.02em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--navy); color:#fff; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 34px; }
@media(max-width:640px){ .wrap{ padding:0 20px; } }

/* -- eyebrow éditorial : filet ambre + libellé tracké -- */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--navy);
}
.eyebrow::before{ content:""; width:30px; height:2px; background:var(--red); flex:none; }
/* ---- Révélations typées (lot animations, piloté par assets/site.js) ----------------
   Les classes .rv-* ne sont POSÉES QUE par le JS : sans JS, ou en mouvement réduit,
   rien n'est masqué et le contenu s'affiche nativement. */
.eyebrow.rv-filet::before{ transform:scaleX(0); transform-origin:left center; transition:transform .6s var(--ease); }
.eyebrow.rv-filet.is-in::before{ transform:scaleX(1); }
/* média : volet qui s'ouvre + dé-zoom */
.rv-media{ opacity:0; clip-path:inset(0 100% 0 0); transform:scale(1.045);
  transition:opacity .55s var(--ease), clip-path .8s var(--ease), transform .9s var(--ease); }
.rv-media.is-in{ opacity:1; clip-path:inset(0 0 0 0); transform:none; }
@media(prefers-reduced-motion:reduce){
  .eyebrow.rv-filet::before{ transform:none; transition:none; }
  .rv-media{ opacity:1; clip-path:none; transform:none; transition:none; }
}

/* -- boutons : carrés, architecturaux -- */
/* Modèle « Boutons 1a Institutionnel » (fourni) : plein pétrole, coins doux,
   liséré tricolore (navy/crème/rouge = écho du logo) sous le primaire, états animés. */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 28px; border-radius:6px;
  font-weight:700; font-size:15px; letter-spacing:.01em; line-height:1.1; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .25s var(--ease), background .2s, color .2s, box-shadow .3s, border-color .2s; }
/* PRIMAIRE — plein pétrole + liséré tricolore */
.btn-petrol{ background:var(--petrol); color:#fff; box-shadow:0 10px 24px -14px rgba(0,58,71,.85); }
.btn-petrol::before{ content:""; position:absolute; left:14px; right:14px; bottom:6px; height:3px; border-radius:2px; opacity:.92; pointer-events:none;
  background:linear-gradient(90deg, var(--navy-ink) 0 33.34%, #f4f1ea 33.34% 66.67%, var(--red) 66.67% 100%);
  transition:left .3s var(--ease), right .3s var(--ease), opacity .2s; }
.btn-petrol:hover{ background:var(--petrol-deep); transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(0,58,71,.95); }
.btn-petrol:hover::before{ left:9px; right:9px; opacity:1; }
.btn-petrol:active{ transform:translateY(0); background:#00303e; box-shadow:0 6px 16px -12px rgba(0,58,71,.9); }
/* SECONDAIRE — contour pétrole sur blanc */
.btn-outline{ background:var(--white); border:1.5px solid var(--petrol); color:var(--petrol); }
.btn-outline:hover{ background:var(--petrol); color:#fff; transform:translateY(-2px); box-shadow:0 12px 26px -16px rgba(0,58,71,.8); }
.btn-outline:active{ transform:translateY(0); }
/* TERTIAIRE — lien d'action souligné */
.btn-link{ padding:8px 4px; border-radius:0; color:var(--petrol); background:none; box-shadow:inset 0 -2px 0 var(--petrol); }
.btn-link:hover{ color:var(--petrol-deep); box-shadow:inset 0 -2px 0 var(--red); }
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:var(--petrol); transform:translateY(-2px); }
.btn-ghost{ border:1px solid var(--line); background:transparent; }
/* désactivé + chargement */
.btn:disabled, .btn.is-disabled{ background:#dfe0dc; color:#9a978f; border-color:transparent; box-shadow:none; cursor:not-allowed; transform:none; }
.btn:disabled::before, .btn.is-disabled::before{ display:none; }
.btn:focus-visible, .btn-cta:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
@media(prefers-reduced-motion:reduce){ .btn{ transition:none; } .btn:hover{ transform:none; } .btn-petrol::before{ transition:none; } }
.tel-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--navy); }
.tel-link:hover{ color:var(--amber-2); }
.tel-link svg{ width:17px; height:17px; color:var(--amber); }
.todo{ display:inline-block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:#7a7060; background:#ece7dd; padding:3px 8px; border-radius:3px; vertical-align:middle; }

/* ============================ HEADER / NAV ============================ */
nav{ position:fixed; top:0; left:0; right:0; z-index:60; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(244,247,248,.82); border-bottom:1px solid transparent; transition:border-color .3s, background .3s, box-shadow .3s; }
nav.scrolled{ border-color:var(--line); background:rgba(244,247,248,.96); box-shadow:0 1px 0 var(--line), 0 18px 40px -34px rgba(18,56,90,.5); }
nav .wrap{ display:flex; align-items:center; gap:16px; height:74px; }

.logo{ font-family:'Fraunces',serif; font-size:24px; font-weight:600; letter-spacing:.02em; line-height:1; color:var(--navy); flex:none; display:inline-flex; align-items:center; }
.logo span{ color:var(--red); }
.logo small{ display:block; font-family:'Inter'; font-size:9.5px; letter-spacing:.16em; color:var(--muted); font-weight:500; margin-top:3px; text-transform:uppercase; }
.logo-img{ height:46px; width:auto; display:block; }
.drawer-head .logo-img{ height:40px; }
footer .logo-img{ height:56px; }
@media(max-width:520px){ .logo-img{ height:40px; } }

.nav-main{ display:flex; align-items:center; gap:2px; margin-left:22px; }
.nav-main > a, .nav-item > .nav-toggle{ font-family:'Inter',sans-serif; font-size:14.5px; font-weight:500; color:var(--ink); background:none; border:0; cursor:pointer; padding:10px 13px; border-radius:4px; display:inline-flex; align-items:center; gap:6px; line-height:1; transition:background .2s, color .2s; }
.nav-main > a:hover, .nav-item > .nav-toggle:hover, .nav-item.open > .nav-toggle{ color:var(--navy); background:rgba(18,56,90,.06); }
.nav-main > a:focus-visible, .nav-item > .nav-toggle:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.caret{ width:11px; height:11px; transition:transform .25s var(--ease); opacity:.6; }
.nav-item.open > .nav-toggle .caret{ transform:rotate(180deg); }
@media(prefers-reduced-motion:reduce){ .caret{ transition:none; } }

.nav-right{ display:flex; align-items:center; gap:14px; margin-left:auto; flex:none; }
.nav-tel{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:14px; color:var(--navy); padding:7px 8px; border-radius:4px; line-height:1.15; transition:color .2s; }
.nav-tel:hover{ color:var(--amber-2); }
.nav-tel:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.nav-tel svg{ width:16px; height:16px; flex:none; color:var(--amber); }
.nav-tel small{ display:block; font-weight:500; font-size:10.5px; color:var(--muted); letter-spacing:.02em; margin-bottom:1px; text-transform:uppercase; }
.btn-cta{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:4px; font-weight:600; font-size:14.5px; background:var(--navy); color:#fff; transition:transform .25s var(--ease), background .25s; }
.btn-cta:hover{ background:var(--amber); transform:translateY(-1px); }
.btn-cta:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

/* ============================ MÉGA-MENU ============================ */
.nav-item{ position:relative; }
.mega{ position:absolute; top:calc(100% + 12px); z-index:70; visibility:hidden; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; }
.nav-item.open .mega{ visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto; }
@media(prefers-reduced-motion:reduce){ .mega{ transition:visibility .01s; transform:none; } .nav-item.open .mega{ transform:none; } }
.nav-item.mega-wide .mega{ left:50%; transform:translateX(-50%) translateY(8px); width:min(1040px, calc(100vw - 40px)); }
.nav-item.mega-wide.open .mega{ transform:translateX(-50%) translateY(0); }
@media(prefers-reduced-motion:reduce){ .nav-item.mega-wide .mega, .nav-item.mega-wide.open .mega{ transform:translateX(-50%); } }
.nav-item.mega-drop .mega{ left:0; width:420px; max-width:calc(100vw - 24px); }

.mega-inner{ background:var(--white); border:1px solid var(--line); border-radius:6px; box-shadow:0 40px 90px -50px rgba(18,56,90,.6); padding:26px; }
.mega-wide .mega-inner{ display:grid; grid-template-columns:1.7fr .9fr; gap:26px; }
.mega-kicker{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber-2); font-weight:700; margin-bottom:16px; display:block; }
.mega-featured{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.mega-list{ display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; }
.mega-svc{ display:block; padding:11px 12px; border-radius:4px; transition:background .18s; border-left:2px solid transparent; }
.mega-svc:hover{ background:var(--tint); border-left-color:var(--amber); }
.mega-svc:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; }
.mega-svc .t{ display:block; font-weight:600; font-size:14.5px; color:var(--navy); margin-bottom:2px; }
.mega-svc .d{ display:block; font-size:12.5px; color:var(--muted); line-height:1.45; }
.mega-svc.feat{ border:1px solid var(--line); background:var(--paper); border-left:2px solid var(--amber); }
.mega-svc.feat:hover{ border-color:var(--navy-2); border-left-color:var(--amber); }
.mega-svc.current{ background:var(--tint); border-left-color:var(--amber); }
.mega-tag{ display:inline-block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--red); background:#f6e0e0; padding:3px 8px; border-radius:3px; margin-bottom:7px; }

.mega-aside{ background:var(--grad-petrol-navy); border-radius:6px; padding:22px; color:#fff; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }   /* contenu centré verticalement → plus de vide creux au milieu */
.mega-aside::before{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--red); }
.mega-aside .a-kicker{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.6); font-weight:600; }
.mega-aside h4{ font-family:'Fraunces',serif; font-size:23px; font-weight:500; margin:8px 0 8px; color:#fff; line-height:1.1; }
.mega-aside p{ font-size:13px; color:rgba(255,255,255,.76); line-height:1.55; margin-bottom:16px; }
.mega-aside .a-link{ margin-top:18px; display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14px; color:var(--petrol-pale); }
.mega-aside .a-link:hover{ gap:11px; }
.mega-aside .a-divider{ border:0; border-top:1px solid rgba(255,255,255,.16); margin:16px 0; }
.mega-aside .a-combo{ font-size:13px; color:rgba(255,255,255,.9); font-weight:500; }
.mega-aside .a-combo b{ color:var(--petrol-pale); font-weight:600; }

.zones-core{ display:grid; gap:0; }
.zone-row{ display:flex; align-items:center; gap:10px; padding:11px 10px; border-radius:4px; transition:background .18s; border-bottom:1px solid var(--line-soft); }
.zone-row:last-child{ border-bottom:0; }
.zone-row:hover{ background:var(--tint); }
.zone-row .z-t{ font-weight:600; font-size:14px; color:var(--navy); }
.zone-row .z-s{ font-size:11.5px; color:var(--muted); margin-left:auto; text-transform:uppercase; letter-spacing:.08em; }
.zone-pin{ width:15px; height:15px; color:var(--red); flex:none; }
.zone-todo{ margin-top:14px; padding:13px; border:1px solid var(--line); border-left:2px solid var(--amber); border-radius:4px; background:var(--paper); }
.zone-todo .badge-todo{ display:inline-block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:#7a7060; background:#ece7dd; padding:3px 8px; border-radius:3px; margin-bottom:7px; }
.zone-todo p{ font-size:12px; color:var(--muted); line-height:1.5; }
.zone-todo .depts{ font-size:12px; color:#9aa2a8; margin-top:6px; font-style:italic; }
.zones-depts{ margin-top:12px; font-size:12.5px; font-weight:600; color:var(--petrol-bright); letter-spacing:.005em; }
.drawer .zones-depts{ margin:10px 12px 4px; }
.zones-all{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-weight:600; font-size:13.5px; color:var(--navy-2); }
.zones-all:hover{ gap:11px; }

/* ============================ HAMBURGER + DRAWER ============================ */
.hamburger{ display:none; flex:none; width:44px; height:44px; border:1px solid var(--line); border-radius:4px; background:var(--white); cursor:pointer; align-items:center; justify-content:center; color:var(--navy); }
.hamburger:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.hamburger svg{ width:22px; height:22px; }
.drawer-backdrop{ position:fixed; inset:0; z-index:190; background:rgba(18,56,90,.42); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; }
.drawer-backdrop.show{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; right:0; bottom:0; z-index:200; width:min(380px,88vw); background:var(--white); box-shadow:-30px 0 70px -34px rgba(18,56,90,.55); transform:translateX(100%); transition:transform .34s var(--ease); display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; }
.drawer.open{ transform:translateX(0); }
@media(prefers-reduced-motion:reduce){ .drawer{ transition:transform .01s; } .drawer-backdrop{ transition:none; } }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.drawer-close{ width:42px; height:42px; border:1px solid var(--line); border-radius:4px; background:var(--white); cursor:pointer; color:var(--navy); display:inline-flex; align-items:center; justify-content:center; }
.drawer-close:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.drawer-nav{ padding:10px 14px; display:flex; flex-direction:column; }
.drawer-nav > a, .acc > .acc-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; font-family:'Inter',sans-serif; font-size:16px; font-weight:600; color:var(--navy); background:none; border:0; cursor:pointer; padding:15px 12px; border-radius:4px; border-bottom:1px solid var(--line-soft); }
.drawer-nav > a:hover, .acc > .acc-toggle:hover{ background:var(--tint); }
.drawer-nav > a:focus-visible, .acc > .acc-toggle:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; }
.acc{ border-bottom:1px solid var(--line-soft); }
.acc > .acc-toggle{ border-bottom:0; }
.acc-panel{ overflow:hidden; max-height:0; transition:max-height .3s var(--ease); }
@media(prefers-reduced-motion:reduce){ .acc-panel{ transition:none; } }
.acc-panel-inner{ padding:2px 8px 12px; }
.acc-panel a{ display:block; padding:10px 12px; border-radius:4px; color:var(--navy); }
.acc-panel a:hover{ background:var(--tint); }
.acc-panel a .t{ display:block; font-weight:600; font-size:14.5px; }
.acc-panel a .d{ display:block; font-size:12px; color:var(--muted); margin-top:1px; }
.acc-panel a .mega-tag{ margin-bottom:4px; }
.acc > .acc-toggle .caret{ opacity:.6; }
.acc.open > .acc-toggle .caret{ transform:rotate(180deg); }
.drawer .zone-todo{ margin:8px 12px 4px; }
.drawer-foot{ margin-top:auto; padding:18px 20px 24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px; }
.drawer-foot .btn-cta{ justify-content:center; padding:14px; }

/* ---- Tiroir mobile : version aérée (18/09/2026, retour client « trop dense et petit ») ----
   Cibles tactiles ≥ 56 px, texte 19 px, sous-menus 16 px sans descriptions, plein écran sous 480 px. */
.drawer{ width:min(420px,100vw); }
@media(max-width:480px){ .drawer{ width:100vw; box-shadow:none; } }
.drawer-head{ padding:16px 20px; }
.drawer-close{ width:46px; height:46px; }
.drawer-nav{ padding:12px 16px 8px; }
.drawer-nav > a, .acc > .acc-toggle{ font-size:19px; padding:17px 14px; min-height:58px; letter-spacing:-.005em; }
.acc > .acc-toggle .caret{ width:16px; height:16px; opacity:.75; }
.acc-panel-inner{ padding:4px 4px 14px 14px; margin:0 0 6px 14px; border-left:2px solid var(--line); }
.acc-panel a{ display:flex; flex-direction:column; justify-content:center; gap:3px; min-height:50px; padding:12px 14px; }
.acc-panel a .t{ font-size:16.5px; line-height:1.25; }
.drawer .acc-panel a .d{ display:none; }
.drawer .zones-depts{ font-size:13.5px; margin:12px 14px 6px; }
.drawer-foot{ padding:18px 20px calc(24px + env(safe-area-inset-bottom, 0px)); gap:14px; }
.drawer-foot .nav-tel{ font-size:17px; padding:10px 8px; }
.drawer-foot .nav-tel small{ font-size:12px; }
.drawer-foot .nav-tel svg{ width:20px; height:20px; }
.drawer-foot .btn-cta{ padding:17px; font-size:17px; }

.drawer-foot .nav-tel{ justify-content:flex-start; }

@media(max-width:980px){
  .nav-main{ display:none; }
  .nav-right .btn-cta.header-cta, .nav-tel .tel-text{ display:none; }
  .hamburger{ display:inline-flex; }
}
@media(min-width:981px){ .drawer, .drawer-backdrop{ display:none; } }

/* ============================ RYTHME DES SECTIONS ============================ */
.band{ padding:104px 0; position:relative; }
.band.paper{ background:var(--paper); }
/* aplat teinté marque (wash pétrole clair) : renforce la présence sans passer au sombre */
.band.tinted{ background:var(--grad-tint); border-top:1px solid var(--brand-line); border-bottom:1px solid var(--brand-line); }
.band.tight{ padding:70px 0; }
.band.hair{ border-top:1px solid var(--line); }       /* transition par filet, pas par aplat */
.band.ink{ background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 40px),
    var(--grad-petrol); color:#fff; }
section[id]{ scroll-margin-top:90px; }

/* en-tête de section : ALIGNÉ À GAUCHE, éditorial (modifieur .center pour recentrer) */
.section-head{ max-width:660px; }
.section-head h2{ font-size:clamp(30px,4.2vw,52px); margin:16px 0 14px; }
.section-head p{ color:var(--muted); font-size:17px; max-width:56ch; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow::before{ display:none; }
.section-head.center .eyebrow{ gap:0; }
.section-head.center p{ margin-left:auto; margin-right:auto; }

/* ============================ HERO PAGE SERVICE ============================ */
.svc-hero{ position:relative; overflow:hidden; padding:150px 0 76px; border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(0,74,92,.07), transparent 60%), /* halo de marque */
    var(--paper); }
/* motif bardage (fines lignes verticales pétrole) en fond de hero service */
.svc-hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7;
  background-image:linear-gradient(90deg, rgba(0,74,92,.06) 1px, transparent 1px);
  background-size:clamp(58px,8vw,104px) 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%); mask-image:linear-gradient(90deg,transparent,#000 55%); }
/* trame architecturale ultra discrète (lignes verticales) au lieu du blob */
.svc-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:clamp(64px,9vw,120px) 100%; mask-image:linear-gradient(90deg,transparent,#000 40%,#000 100%); -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%,#000 100%); }
.svc-hero .wrap{ position:relative; z-index:1; display:grid; grid-template-columns:1.18fr .82fr; gap:0; align-items:stretch; }
.svc-hero .hero-copy{ padding-right:52px; }
.svc-hero .crumb{ font-size:12px; color:var(--muted); margin-bottom:22px; display:flex; gap:9px; flex-wrap:wrap; align-items:center; letter-spacing:.02em; }
.svc-hero .crumb a{ color:var(--navy-2); font-weight:600; }
.svc-hero .crumb a:hover{ color:var(--amber-2); }
.svc-hero .crumb span{ opacity:.4; }
.svc-hero h1{ font-size:clamp(38px,5.4vw,70px); margin:18px 0 24px; color:var(--ink); letter-spacing:-.025em; }
.svc-hero h1 b{ font-weight:500; font-style:italic; color:var(--navy-2); }
.svc-hero .lead{ font-size:18.5px; color:var(--muted); max-width:50ch; margin-bottom:32px; line-height:1.65; }
.svc-hero .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
@media(max-width:900px){ .svc-hero{ padding:120px 0 56px; } .svc-hero .wrap{ grid-template-columns:1fr; gap:28px; } .svc-hero .hero-copy{ padding-right:0; } }

/* -----------------------------------------------------------------
   OBJET DE HERO (colonne droite) pour les heros SANS formulaire
   (Avis, Réalisations) : comble le vide à grande largeur par une carte
   de marque (note Google / zone d'intervention). Carte blanche, en-tête
   pétrole à filet rouge. Reprend la largeur du micro-form pour l'équilibre.
   ----------------------------------------------------------------- */
.svc-hero .hero-aside{ margin-left:auto; align-self:center; width:100%; max-width:420px; }
.hero-aside{ background:var(--white); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow-crisp); overflow:hidden; }
.hero-aside .ha-head{ background:var(--grad-petrol-navy); color:#fff; border-top:3px solid var(--red); padding:15px 22px; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.hero-aside .ha-head svg{ width:16px; height:16px; flex:none; }
.hero-aside .ha-body{ padding:26px 24px 28px; }
/* variante « note Google » */
.hero-aside .ha-stars{ color:var(--petrol); font-size:30px; letter-spacing:5px; line-height:1; }
.hero-aside .ha-note{ font-family:'Fraunces',serif; font-size:34px; font-weight:500; color:var(--ink); line-height:1; margin-top:14px; }
.hero-aside .ha-note small{ font-family:'Inter',sans-serif; font-size:15px; font-weight:600; color:var(--muted); letter-spacing:0; }
.hero-aside .ha-txt{ margin-top:14px; font-size:14px; line-height:1.55; color:var(--muted); }
.hero-aside .ha-g{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-size:12.5px; font-weight:600; color:var(--muted); }
.hero-aside .ha-g svg{ width:15px; height:15px; flex:none; }
/* variante « zone » : liste de départements */
.hero-aside .ha-zones{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.hero-aside .ha-zones li{ display:flex; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid var(--line-soft); font-weight:600; font-size:15px; color:var(--ink); }
.hero-aside .ha-zones li:last-child{ border-bottom:0; }
.hero-aside .ha-zones li span{ margin-left:auto; font-weight:500; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.hero-aside .ha-zones svg{ width:16px; height:16px; flex:none; color:var(--red); }
.hero-aside .ha-foot{ margin-top:16px; font-size:13px; line-height:1.5; color:var(--muted); }
@media(max-width:900px){ .svc-hero .hero-aside{ margin:0; max-width:none; align-self:stretch; } }

/* =====================================================================
   FORMULAIRES — « le bon de devis du façadier ».
   Signature : papier quadrillé d'architecte à peine visible, champs
   numérotés (écho des chapitres 01→08 de l'accueil), saisie sur la
   ligne (soulignement pétrole tracé au focus), coche dessinée quand le
   champ est rempli, double-filet du logo en tête. Zéro logique changée.
   ===================================================================== */

/* carte micro-form hero : « bon de rappel » */
.hero-form{ background:var(--white); border:1px solid var(--line); border-radius:6px; padding:0; overflow:hidden; box-shadow:var(--shadow-crisp); align-self:start; counter-reset:formfield;
  /* papier quadrillé d'architecte, presque subliminal */
  background-image:
    linear-gradient(rgba(0,74,92,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,74,92,.045) 1px, transparent 1px);
  background-size:26px 26px; }
.svc-hero .hero-form{ margin-left:auto; width:100%; max-width:420px; }
.hero-form h3{ font-family:'Inter',sans-serif; font-size:14.5px; font-weight:700; color:#fff; position:relative; margin:0; padding:18px 22px 24px; border-top:3px solid var(--red); letter-spacing:.01em;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px), /* bardage */
    var(--grad-petrol-navy); }
/* double filet du logo (blanc/rouge) sous le titre du bon */
.hero-form h3::after{ content:""; position:absolute; left:22px; bottom:12px; width:56px; height:2px; border-radius:1px;
  background:linear-gradient(90deg, #fff 0 44%, transparent 44% 56%, var(--red) 56% 100%); opacity:.92; }
.hero-form .field{ margin:0 0 4px; padding:0 22px; }
.hero-form .field:first-of-type{ padding-top:18px; }
.hero-form .field::after{ right:24px; }
.hero-form .btn{ width:calc(100% - 44px); margin:14px 22px 0; justify-content:center; }
.hero-form .btn::after{ content:"→"; display:inline-block; transition:transform .3s var(--ease); }
.hero-form .btn:hover::after{ transform:translateX(4px); }
.hero-form .hint{ font-size:11.5px; color:var(--muted); text-align:center; margin:12px 22px 20px; line-height:1.5; }
.hero-form .form-msg{ margin:12px 22px 20px; }

/* -- champ générique : ligne à remplir, comme sur un bon papier -- */
.field{ margin-bottom:16px; position:relative; }
.field label{ display:flex; align-items:baseline; gap:9px; font-size:11px; font-weight:700; color:var(--navy); margin-bottom:1px; letter-spacing:.12em; text-transform:uppercase; transition:color .2s; }
/* numéro de champ : italique Fraunces rouge, signature éditoriale du site */
.hero-form .field > label::before, .contact-form .field > label::before{
  counter-increment:formfield; content:counter(formfield, decimal-leading-zero);
  font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:500; font-size:14px; letter-spacing:.02em; color:var(--red); flex:none; }
.field:focus-within label{ color:var(--petrol-bright); }
.field input, .field textarea, .field select{ width:100%; padding:9px 2px 11px; border:0; border-bottom:1px solid var(--line-strong); border-radius:0; font:inherit; font-size:16px; color:var(--ink); background:transparent; /* 16px : pas de zoom iOS au focus */
  /* soulignement pétrole qui se trace au focus */
  background-image:linear-gradient(90deg, var(--petrol-bright), var(--petrol));
  background-repeat:no-repeat; background-size:0% 2px; background-position:left bottom;
  transition:background-size .4s var(--ease), border-color .25s; }
.field input::placeholder, .field textarea::placeholder{ color:#8b8478; opacity:1; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:transparent; background-size:100% 2px; }
.field input:hover:not(:focus), .field textarea:hover:not(:focus), .field select:hover:not(:focus){ border-color:var(--petrol); }
/* validation inline : coche dessinée dès que le champ est rempli */
.field::after{ content:""; position:absolute; right:4px; bottom:19px; width:13px; height:7px; pointer-events:none; opacity:0;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(-45deg) scale(.4); transform-origin:center;
  transition:opacity .3s var(--ease), transform .3s var(--ease); }
.field:has(input:not(:placeholder-shown):valid)::after,
.field:has(textarea:not(:placeholder-shown):valid)::after{ opacity:1; transform:rotate(-45deg) scale(1); }
.field:has(input:not(:placeholder-shown):valid) input,
.field:has(textarea:not(:placeholder-shown):valid) textarea{ padding-right:26px; }
/* erreur : seulement après interaction (:user-invalid), jamais agressif au chargement */
.field input:user-invalid, .field textarea:user-invalid{ border-color:var(--red); background-image:linear-gradient(90deg, var(--red-2), var(--red)); }
.field:has(input:user-invalid) > label, .field:has(textarea:user-invalid) > label{ color:var(--red); }
.field:has(input:user-invalid)::after, .field:has(textarea:user-invalid)::after{ opacity:0; transform:rotate(-45deg) scale(.4); }
/* select : chevron pétrole dessiné, même ligne que les inputs */
.field select{ appearance:none; -webkit-appearance:none; padding-right:30px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 4.5 6 8l3.5-3.5' stroke='%23004A5C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    linear-gradient(90deg, var(--petrol-bright), var(--petrol));
  background-repeat:no-repeat, no-repeat; background-size:14px 14px, 0% 2px;
  background-position:right 6px center, left bottom; }
.field select:focus{ background-size:14px 14px, 100% 2px; }
/* message de succès : reçu tamponné, coche dessinée (styles portés par le CSS, plus par le JS) */
.form-msg{ margin-top:14px; padding:13px 16px 13px 42px; border-radius:4px; position:relative;
  background:#eaf4ee; border:1px solid #bfe0cc; border-left:3px solid var(--green);
  color:#1d5c3f; font-size:13.5px; line-height:1.55; animation:msgin .45s var(--ease); }
.form-msg::before{ content:""; position:absolute; left:15px; top:19px; width:12px; height:6px;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg); }
@keyframes msgin{ from{ opacity:0; transform:translateY(6px); } }
@media(prefers-reduced-motion:reduce){
  .field input, .field textarea, .field select, .field::after, .hero-form .btn::after{ transition:none; }
  .form-msg{ animation:none; }
}

/* ============================ RÉASSURANCE (bandeau à filets) ============================ */
.reassure{ padding:0; background:var(--grad-tint); border-top:1px solid var(--brand-line); border-bottom:1px solid var(--brand-line); }
.reassure-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.reassure-item{ display:flex; gap:14px; align-items:flex-start; padding:30px 30px; border-left:1px solid var(--line); }
.reassure-item:first-child{ border-left:0; }
.reassure-item .ri-ic{ flex:none; width:38px; height:38px; border-radius:4px; background:var(--white); border:1px solid var(--brand-line); display:flex; align-items:center; justify-content:center; color:var(--petrol); }
.reassure-item .ri-ic svg{ width:19px; height:19px; }
.reassure-item h3{ font-family:'Inter',sans-serif; font-size:14px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.reassure-item p{ font-size:12.5px; color:var(--muted); line-height:1.5; }
@media(max-width:900px){ .reassure-grid{ grid-template-columns:1fr 1fr; } .reassure-item:nth-child(3){ border-left:0; } .reassure-item{ border-top:1px solid var(--line); } .reassure-item:nth-child(-n+2){ border-top:0; } }
@media(max-width:520px){ .reassure-grid{ grid-template-columns:1fr; } .reassure-item{ border-left:0; border-top:1px solid var(--line); } .reassure-item:first-child{ border-top:0; } }

/* ============================ PROSE ÉDITORIALE ============================ */
.prose{ max-width:760px; }
.prose.center{ margin:0 auto; }
.prose h2{ font-size:clamp(26px,3.4vw,42px); margin-bottom:18px; }
.prose h2:not(:first-child){ margin-top:8px; }
.prose h2 + .eyebrow, .prose .eyebrow{ margin-bottom:4px; }
.prose p{ color:var(--ink); font-size:17px; line-height:1.78; margin-bottom:18px; }
.prose p:last-child{ margin-bottom:0; }
.prose a{ color:var(--navy-2); font-weight:600; box-shadow:inset 0 -2px 0 rgba(10,110,128,.4); transition:box-shadow .2s, color .2s; }
.prose a:hover{ color:var(--amber-2); box-shadow:inset 0 -2px 0 var(--amber); }
.prose .muted{ color:var(--muted); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.split .prose{ max-width:none; }
/* asymétrie éditoriale : colonne titre étroite / texte large */
.split.edito{ grid-template-columns:.85fr 1.15fr; gap:64px; }
@media(max-width:860px){ .split, .split.edito{ grid-template-columns:1fr; gap:34px; } }

.check-list{ list-style:none; display:grid; gap:0; margin:10px 0 4px; }
.check-list li{ position:relative; padding:14px 0 14px 40px; font-size:16px; line-height:1.6; color:var(--ink); border-top:1px solid var(--line); }
.check-list li:last-child{ border-bottom:1px solid var(--line); }
.check-list li::before{ content:""; position:absolute; left:2px; top:18px; width:9px; height:5px; border-left:2px solid var(--amber); border-bottom:2px solid var(--amber); transform:rotate(-45deg); }
.check-list li b{ color:var(--navy); font-weight:600; }

/* encart d'appel = LE moment pétrole, travaillé (filet rouge = écho du logo) */
.callout{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 38px), /* bardage */
    var(--grad-petrol-navy);
  color:#fff; border-radius:6px; padding:52px; position:relative; overflow:hidden; }
.callout::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--red); }
.callout::after{ content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
.callout .eyebrow{ color:#fff; }
.callout .eyebrow::before{ background:var(--red); }
.callout h2{ color:#fff; font-size:clamp(26px,3.4vw,40px); margin:14px 0 16px; max-width:22ch; }
.callout p{ color:rgba(255,255,255,.84); font-size:16.5px; line-height:1.72; margin-bottom:18px; max-width:64ch; }
.callout a.inline{ color:var(--petrol-pale); font-weight:600; box-shadow:inset 0 -2px 0 rgba(127,202,214,.5); }
.callout a.inline:hover{ box-shadow:inset 0 -2px 0 var(--petrol-pale); }

/* ============================ PROCESS (étapes reliées) ============================ */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:8px; border-top:1px solid var(--line); }
.steps.s4{ grid-template-columns:repeat(4,1fr); }
.step{ position:relative; padding:30px 24px 30px 0; padding-left:0; border-left:1px solid var(--line); padding-left:22px; }
.step:first-child{ border-left:0; padding-left:0; }
.step .sn{ font-family:'Fraunces',serif; font-size:34px; font-weight:500; color:var(--petrol); line-height:1; margin-bottom:14px; font-style:italic; }   /* numéros d'étapes UNIFIÉS en pétrole (l'italique rouge est réservé aux chapitres + champs de formulaire) */
.step h3{ font-family:'Inter',sans-serif; font-size:14.5px; font-weight:700; color:var(--navy); margin-bottom:8px; letter-spacing:.01em; }
.step p{ font-size:13px; color:var(--muted); line-height:1.55; }
@media(max-width:980px){ .steps, .steps.s4{ grid-template-columns:1fr 1fr; } .step{ border-left:0; padding-left:0; padding-right:22px; border-top:1px solid var(--line); padding-top:24px; } .steps .step:nth-child(-n+2){ border-top:0; } }
@media(max-width:520px){ .steps, .steps.s4{ grid-template-columns:1fr; } .step{ border-top:1px solid var(--line); padding:22px 0; } .steps .step:first-child{ border-top:0; } .step .sn{ font-size:28px; margin-bottom:10px; } .step h3{ font-size:15.5px; } .step p{ font-size:14.5px; line-height:1.6; } }

/* ============================ POURQUOI ============================ */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:8px; border-top:1px solid var(--line); }
.why-card{ background:transparent; padding:34px 30px 34px 0; border-left:1px solid var(--line); padding-left:30px; }
.why-card:first-child{ border-left:0; padding-left:0; }
.why-card .wn{ font-family:'Fraunces',serif; font-style:italic; font-size:30px; color:var(--red); margin-bottom:14px; }
.why-card h3{ font-size:20px; margin-bottom:11px; color:var(--navy); line-height:1.15; }
.why-card p{ color:var(--muted); font-size:14.5px; line-height:1.6; }
@media(max-width:860px){ .why-grid{ grid-template-columns:1fr; } .why-card{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:28px; } .why-card:first-child{ border-top:0; } }

/* ============================ AIDES ============================ */
.aides-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
.aide-card{ background:var(--white); border:1px solid var(--line); border-radius:6px; padding:28px; transition:border-color .25s, transform .25s var(--ease); }
.aide-card:hover{ border-color:var(--navy-2); transform:translateY(-3px); }
.aide-card .ac-t{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.aide-card .ac-badge{ width:38px; height:38px; border-radius:4px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:500; font-size:15px; }
.aide-card h3{ font-family:'Inter',sans-serif; font-size:16px; font-weight:700; color:var(--navy); }
.aide-card p{ color:var(--muted); font-size:14px; line-height:1.6; }
.aide-note{ margin-top:22px; background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:4px; padding:20px 24px; }
.aide-note b{ color:var(--navy); }
.aide-note p{ font-size:14px; color:var(--ink); line-height:1.65; }
.rge-note{ margin-top:12px; font-size:12.5px; color:var(--muted); font-style:italic; }
@media(max-width:860px){ .aides-grid{ grid-template-columns:1fr; } }

/* ============================ HUB (liens services) ============================ */
.hub-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:8px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.hub-card{ background:transparent; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:30px 28px; display:flex; flex-direction:column; transition:background .25s; position:relative; }
.hub-card:hover{ background:var(--paper); }
.hub-card::before{ content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--amber); transition:width .3s var(--ease); }
.hub-card:hover::before{ width:100%; }
.hub-card h3{ font-size:19px; margin-bottom:9px; color:var(--navy); line-height:1.15; }
.hub-card p{ color:var(--muted); font-size:14px; flex:1; line-height:1.6; }
.hub-card .more{ margin-top:16px; display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13px; color:var(--navy-2); text-transform:uppercase; letter-spacing:.06em; }
.hub-card:hover .more{ gap:11px; color:var(--amber-2); }
@media(max-width:860px){ .hub-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .hub-grid{ grid-template-columns:1fr; } }

/* ============================ TÉMOIGNAGES ============================ */
/* Ancien composant .avis-card / .avis-grid RETIRÉ : consolidation sur les 2 formes
   canoniques ci-dessous (.tmoi-feature vedette pétrole + .tmoi-grid grille claire),
   identiques sur l'accueil, les 8 pages services et la page /avis/. */
.avis-source{ font-size:13px; color:var(--muted); }
.avis-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:40px; justify-content:center; }

/* ============================ TÉMOIGNAGE (modèle 12b/12c) ============================
   Composant témoignage refait : carte pétrole « vedette » (1 avis, façon 12b, sans photo)
   + grille de cartes « Avis Google » claires (plusieurs avis, façon 12c). Palette pétrole/
   navy + rouge, Fraunces/Inter, aucun orange. Visible sans dépendre du reveal (pas de bug). */
.tmoi-source{ font-size:13px; color:var(--muted); }

/* -- carte vedette pétrole (pages à 1 avis) -- */
.tmoi-feature{ position:relative; overflow:hidden; max-width:900px; margin:44px auto 0; background:var(--petrol); color:#fff; border-radius:10px; padding:40px 44px 32px; box-shadow:var(--shadow-crisp); }
.tmoi-feature::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background:repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 40px); }
.tmoi-mark{ position:absolute; top:2px; left:24px; z-index:0; font-family:'Fraunces',serif; font-size:120px; line-height:1; color:rgba(255,255,255,.11); pointer-events:none; }
.tmoi-quote{ position:relative; z-index:1; font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(21px,2.5vw,29px); line-height:1.42; letter-spacing:-.01em; margin:0 0 26px; max-width:47ch; }
.tmoi-foot{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:20px 26px; flex-wrap:wrap; }
.tmoi-author{ display:flex; align-items:center; gap:14px; }
.tmoi-avatar{ flex:none; width:48px; height:48px; border-radius:50%; background:var(--petrol-deep); border:1.5px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:16px; letter-spacing:.02em; color:#fff; }
.tmoi-id b{ display:block; font-weight:700; font-size:15px; line-height:1.2; }
.tmoi-id small{ display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--petrol-pale); margin-top:3px; }
.tmoi-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.tmoi-stars{ color:var(--petrol-pale); font-size:16px; letter-spacing:2px; line-height:1; }
.tmoi-google{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:rgba(255,255,255,.82); }
.tmoi-google svg{ width:14px; height:14px; flex:none; }

/* -- grille de cartes « Avis Google » claires (pages à plusieurs avis) -- */
.tmoi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; max-width:1120px; margin:44px auto 0; }
.tmoi-review{ display:flex; flex-direction:column; gap:14px; background:var(--white); border:1px solid var(--brand-line); border-left:3px solid var(--petrol); border-radius:8px; padding:24px 26px; box-shadow:0 14px 30px -26px rgba(0,58,71,.5); }
.tmoi-rtop{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tmoi-review .tmoi-stars{ color:var(--petrol); }
.tmoi-gtag{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--muted); }
.tmoi-gtag svg{ width:14px; height:14px; flex:none; }
.tmoi-review blockquote{ margin:0; font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:16px; line-height:1.55; color:var(--ink); }
.tmoi-rauthor{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft); }
.tmoi-review .tmoi-avatar{ width:40px; height:40px; background:var(--petrol); border:none; font-size:14px; }
.tmoi-review .tmoi-id b{ color:var(--navy); }
.tmoi-review .tmoi-id small{ color:var(--muted); text-transform:none; letter-spacing:0; font-size:12px; }

.tmoi-actions{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:36px; }

@media(max-width:640px){
  .tmoi-feature{ padding:28px 22px 24px; margin-top:32px; }
  .tmoi-mark{ font-size:96px; top:0; left:16px; }
  .tmoi-foot{ align-items:flex-start; gap:18px; }
  .tmoi-meta{ align-items:flex-start; flex-direction:row; gap:16px; }
  .tmoi-grid{ margin-top:32px; }
}

/* ============================ PLACEHOLDER PHOTO (plan d'archi) ============================ */
.photo-slot{ position:relative; aspect-ratio:4/3; border-radius:6px; overflow:hidden; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
  background-color:var(--navy);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px; }
.photo-slot::after{ content:""; position:absolute; inset:12px; border:1px dashed rgba(255,255,255,.22); border-radius:4px; }
.photo-slot .ps-ic{ width:44px; height:44px; color:rgba(255,255,255,.5); position:relative; z-index:1; }
.photo-slot .ps-tag{ position:absolute; top:16px; left:16px; z-index:2; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); padding:5px 10px; border-radius:3px; }
.photo-slot .ps-cap{ position:absolute; bottom:16px; left:16px; right:16px; z-index:2; font-size:12px; color:rgba(255,255,255,.82); font-weight:500; }
.photo-slot .ps-cap .todo{ background:rgba(236,231,221,.92); color:#5f584b; }

/* ============================ FAQ ============================ */
.faq{ max-width:820px; margin:8px 0 0; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:24px 4px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:'Fraunces',serif; font-size:19px; font-weight:500; color:var(--navy); letter-spacing:-.01em; }
.faq-q:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.faq-q .fq-ic{ flex:none; width:20px; height:20px; position:relative; }
.faq-q .fq-ic::before, .faq-q .fq-ic::after{ content:""; position:absolute; background:var(--amber); border-radius:1px; transition:transform .25s var(--ease); }
.faq-q .fq-ic::before{ top:9px; left:2px; width:16px; height:2px; }
.faq-q .fq-ic::after{ top:2px; left:9px; width:2px; height:16px; }
.faq-item.open .fq-ic::after{ transform:scaleY(0); }
@media(prefers-reduced-motion:reduce){ .faq-q .fq-ic::before, .faq-q .fq-ic::after{ transition:none; } }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .3s var(--ease); }
@media(prefers-reduced-motion:reduce){ .faq-a{ transition:none; } }
.faq-a p{ padding:0 4px 24px; color:var(--muted); font-size:15px; line-height:1.7; max-width:70ch; }

/* ============================ CONTACT ============================ */
.contact{ background:var(--paper); }
.contact-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; margin-top:48px; align-items:start; }
/* formulaire long : « bon de devis », même papier que le micro-form */
.contact-form{ background:var(--white); border:1px solid var(--line); border-radius:6px; padding:34px; box-shadow:var(--shadow-crisp); counter-reset:formfield; position:relative;
  background-image:
    linear-gradient(rgba(0,74,92,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,74,92,.045) 1px, transparent 1px);
  background-size:26px 26px; }
/* double filet du logo (navy/rouge) en tête du bon */
.contact-form::before{ content:""; display:block; width:132px; height:3px; border-radius:2px; margin-bottom:28px;
  background:linear-gradient(90deg, var(--navy-ink) 0 44%, transparent 44% 56%, var(--red) 56% 100%); }
.contact-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; }
@media(max-width:520px){ .contact-form .row2{ grid-template-columns:1fr; } .contact-form{ padding:26px 20px; } }
.contact-form .btn{ border-radius:4px; }
.consent{ display:flex; gap:11px; align-items:flex-start; margin:10px 0 18px; font-size:12.5px; color:var(--muted); line-height:1.5;
  padding:12px 14px; border:1px solid var(--line); border-radius:4px; background:rgba(244,247,248,.72); transition:border-color .25s, background .25s; cursor:pointer; }
.consent:hover{ border-color:var(--petrol); }
.consent:has(input:checked){ border-color:var(--petrol); background:var(--tint); color:var(--ink); }
.consent:has(input:focus-visible){ outline:2px solid var(--amber); outline-offset:2px; }
.consent input{ margin-top:2px; flex:none; width:17px; height:17px; accent-color:var(--petrol); cursor:pointer; }
.contact-side .cs-block{ background:var(--white); border:1px solid var(--line); border-radius:6px; padding:26px; margin-bottom:16px; }
.contact-side h3{ font-family:'Inter',sans-serif; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); margin-bottom:18px; }
.cs-line{ display:flex; align-items:flex-start; gap:13px; margin-bottom:16px; font-size:14.5px; color:var(--ink); }
.cs-line:last-child{ margin-bottom:0; }
.cs-line svg{ width:18px; height:18px; color:var(--amber); flex:none; margin-top:2px; }
.cs-line a{ color:var(--navy); font-weight:600; }
.cs-line small{ display:block; color:var(--muted); font-weight:400; font-size:12.5px; }
.cs-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.cs-badge{ font-size:12px; font-weight:600; color:var(--navy); background:var(--tint); border:1px solid var(--brand-line); padding:8px 13px; border-radius:3px; }
@media(max-width:860px){ .contact-wrap{ grid-template-columns:1fr; gap:32px; } }

/* ============================ FOOTER ============================ */
footer{ padding:76px 0 40px; position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(120deg, rgba(0,51,67,.38) 0 96px, rgba(0,74,92,0) 96px 192px), /* entailles pétrole : motif de marque, même langage que #pourquoi et la section maison */
    var(--grad-petrol-navy);
  color:rgba(255,255,255,.72); border-top:3px solid var(--red); }
/* filigrane discret du logo, bas-droite */
footer::after{ content:""; position:absolute; right:-60px; bottom:-70px; width:360px; height:360px; z-index:0; pointer-events:none;
  background:url(/assets/logo-nfr-trim.png) no-repeat center/contain;
  filter:brightness(0) invert(1); opacity:.03; }
footer .wrap{ position:relative; z-index:1; }
footer .logo{ color:#fff; }
footer .logo-img{ border-radius:8px; }  /* le logo porte son propre fond crème : plus d'inversion en blanc */
.foot{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; }
.foot > div:first-child{ max-width:34ch; }
.foot p{ color:rgba(255,255,255,.66); font-size:14px; margin-top:16px; line-height:1.6; }
.foot-social{ display:flex; gap:10px; margin-top:20px; }
.foot-social a{ width:38px; height:38px; border-radius:4px; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s, border-color .2s; }
.foot-social a:hover{ background:var(--petrol-bright); border-color:var(--petrol-bright); }
.foot-social svg{ width:17px; height:17px; }
.foot-col h4{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:16px; font-weight:700; }
.foot-col a{ display:block; color:rgba(255,255,255,.66); font-size:14px; margin-bottom:11px; transition:color .2s, padding-left .2s; }
.foot-col a:hover{ color:#fff; padding-left:3px; }
.copyright{ margin-top:52px; padding-top:24px; border-top:1px solid rgba(255,255,255,.16); font-size:13px; color:rgba(255,255,255,.55); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.copyright a{ color:rgba(255,255,255,.82); box-shadow:inset 0 -1px 0 rgba(255,255,255,.28); transition:color .2s, box-shadow .2s; }
.copyright a:hover{ color:#fff; box-shadow:inset 0 -1px 0 var(--red); }
.copyright .todo{ background:rgba(255,255,255,.14); color:rgba(255,255,255,.72); }
@media(max-width:860px){ .foot{ grid-template-columns:1fr 1fr; gap:30px; } }
@media(max-width:520px){ .foot{ grid-template-columns:1fr; } }

/* ============================ BARRE CTA MOBILE ============================ */
.mobcta{ position:fixed; left:0; right:0; bottom:0; z-index:55; display:none; gap:10px; padding:10px 14px; background:rgba(244,247,248,.97); backdrop-filter:blur(10px); border-top:1px solid var(--line); box-shadow:0 -10px 26px -18px rgba(18,56,90,.5); }
.mobcta a{ flex:1; justify-content:center; padding:14px 10px; font-size:14.5px; }
@media(max-width:720px){ .mobcta{ display:flex; } body{ padding-bottom:74px; } }

/* ============================ RÉVÉLATIONS AU SCROLL ============================ */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ============================ ASSETS DÉCORATIFS DE MARQUE ============================
   Éléments vectoriels maison, dérivés du logo (double filet navy+rouge, bardage,
   filets d'angle). En CSS pur, dosés — présence de marque sans surcharge. */

/* Double filet du logo (navy à gauche, rouge à droite) — signature réutilisable */
.brand-filets{ display:block; width:132px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--navy-ink) 0 44%, transparent 44% 56%, var(--red) 56% 100%); }
/* posé automatiquement sous le logo du footer (aucune modif HTML nécessaire) */
footer .foot > div:first-child .logo{ display:block; }
footer .foot > div:first-child .logo::after{ content:""; display:block; margin-top:16px; width:132px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, #fff 0 44%, transparent 44% 56%, var(--red) 56% 100%); opacity:.92; }

/* Filet d'angle architectural (crochet) — accent d'angle discret sur cartes/encarts sombres */
.corner-accent{ position:relative; }
.corner-accent::after{ content:""; position:absolute; top:14px; right:14px; width:20px; height:20px; pointer-events:none;
  border-top:2px solid var(--petrol-pale); border-right:2px solid var(--petrol-pale); opacity:.55; }

/* Séparateur de section stylé : filet plein + petit repère rouge (écho logo) */
.brand-sep{ border:0; height:0; border-top:1px solid var(--brand-line); position:relative; margin:0; }
.brand-sep::before{ content:""; position:absolute; left:0; top:-1px; width:56px; height:3px; background:var(--red); }

/* Motif bardage clair réutilisable en fond de section teintée */
.deco-bardage{ position:relative; }
.deco-bardage::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background-image:linear-gradient(90deg, rgba(0,74,92,.05) 1px, transparent 1px);
  background-size:clamp(56px,7vw,96px) 100%;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent); mask-image:linear-gradient(180deg,#000,transparent); }
.deco-bardage > *{ position:relative; z-index:1; }

/* ============================ MONTAGE 3D (visuel animé par page) ============================ */
.montage{ position:relative; aspect-ratio:4/3; border-radius:6px; overflow:hidden; border:1px solid var(--line-strong); background:var(--petrol-deep); margin:0; }
.montage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .85s var(--ease); }
.montage img.on{ opacity:1; }
.montage::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:42%; pointer-events:none; z-index:2; background:linear-gradient(180deg,transparent,rgba(0,40,50,.62)); }
.montage-badge{ position:absolute; top:14px; right:14px; z-index:3; font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:#fff; background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.32); padding:5px 10px; border-radius:3px; }
.montage-cap{ position:absolute; left:16px; bottom:14px; z-index:3; display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:#fff; }
.montage-cap .m-dot{ width:8px; height:8px; border-radius:50%; background:var(--red); flex:none; box-shadow:0 0 0 0 rgba(183,26,38,.7); animation:mpulse 2s var(--ease) infinite; }
.montage-cap .m-step{ opacity:.95; }
.montage-cap .m-num{ color:var(--petrol-pale); font-weight:700; }
@keyframes mpulse{ 0%{ box-shadow:0 0 0 0 rgba(183,26,38,.55);} 70%{ box-shadow:0 0 0 7px rgba(183,26,38,0);} 100%{ box-shadow:0 0 0 0 rgba(183,26,38,0);} }
@media(prefers-reduced-motion:reduce){ .montage img{ transition:none; } .montage-cap .m-dot{ animation:none; } }

/* Bande image d'illustration (photo CC0 temporaire) */
.illus{ margin:0; border-radius:6px; overflow:hidden; border:1px solid var(--line-strong); position:relative; }
.illus img{ width:100%; height:clamp(240px,38vw,440px); object-fit:cover; display:block; }
.illus figcaption{ position:absolute; left:0; right:0; bottom:0; padding:16px 20px; font-size:12.5px; line-height:1.4; color:#fff; background:linear-gradient(180deg,transparent,rgba(0,50,63,.82)); display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
/* écran étroit : le badge passe seul sur sa ligne, le texte prend toute la largeur en dessous (sinon il se casse mot par mot à côté du badge) */
@media(max-width:520px){ .illus figcaption{ padding:12px 14px; } }
.illus-badge{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32); padding:5px 9px; border-radius:3px; flex:none; }
.illus .todo{ background:rgba(236,231,221,.92); color:#5f584b; }

/* ============================ BANNIÈRE DE CONFIANCE ============================
   Modèle « Bannière 4c » : carte pétrole SOUS le hero, médaillon RGE qui déborde
   du bord haut + 4 signaux de confiance honnêtes. Sur les 18 pages (bloc partagé). */
.trust-banner{ background:var(--paper); padding:46px 0 6px; }
.tb-card{ position:relative; display:flex; align-items:center; gap:30px; background:var(--petrol); color:#fff; border-radius:14px; padding:22px 32px; box-shadow:var(--shadow-crisp); }
.tb-card::before{ content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none; opacity:.5; background:repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 40px); }
/* médaillon RGE : déborde par le haut (margin-top négatif) */
.tb-medal{ position:relative; z-index:1; flex:none; width:86px; height:86px; margin-top:-46px; margin-bottom:-6px; border-radius:50%; background:var(--petrol-deep); border:2px solid rgba(255,255,255,.9); box-shadow:0 12px 26px -12px rgba(0,40,50,.75); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.tb-medal::before{ content:""; position:absolute; inset:5px; border-radius:50%; border:1px dashed rgba(255,255,255,.5); }
.tb-medal .tb-rge{ font-family:'Fraunces',serif; font-weight:600; font-size:27px; line-height:1; letter-spacing:.03em; }
.tb-medal .tb-lbl{ font-size:7px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-top:3px; }
.tb-medal .tb-dots{ display:flex; gap:3px; margin-top:4px; }
.tb-medal .tb-dots i{ width:4px; height:4px; border-radius:50%; }
.tb-medal .tb-dots i:nth-child(1){ background:var(--navy-ink); } .tb-medal .tb-dots i:nth-child(2){ background:#f0eee9; } .tb-medal .tb-dots i:nth-child(3){ background:var(--red); }
.tb-list{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:10px 34px; margin:0; padding:0; list-style:none; }
.tb-item{ display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:600; color:#fff; }
.tb-item svg{ width:17px; height:17px; flex:none; color:#fff; }
@media(max-width:860px){ .tb-list{ grid-template-columns:1fr; gap:8px; } }
@media(max-width:720px){
  .trust-banner{ padding:38px 0 6px; }
  .tb-card{ gap:16px; padding:18px 18px; }
  .tb-medal{ width:66px; height:66px; margin-top:-40px; } .tb-medal .tb-rge{ font-size:20px; } .tb-medal .tb-lbl{ font-size:6px; }
  .tb-item{ font-size:13px; }
}
/* ≤480px : on GARDE le médaillon RGE (signal de réassurance le plus fort) en version compacte
   inline plutôt que de le supprimer. */
@media(max-width:480px){
  .tb-card{ padding:16px; gap:14px; }
  .tb-medal{ width:56px; height:56px; margin-top:-32px; margin-bottom:-4px; }
  .tb-medal .tb-rge{ font-size:16px; } .tb-medal .tb-lbl{ font-size:5.5px; letter-spacing:.1em; }
  .tb-medal .tb-dots{ margin-top:3px; } .tb-medal .tb-dots i{ width:3px; height:3px; }
}
@media(prefers-reduced-motion:reduce){ .tb-card::before{ background:none; } }
/* accroche RGE (remplace la liste des 4 signaux, désormais dans la carte « Vos garanties ») */
.tb-accroche{ position:relative; z-index:1; }
.tb-accroche h2{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(19px,2.1vw,25px); color:#fff; line-height:1.14; letter-spacing:-.01em; margin:0 0 5px; }
.tb-accroche p{ font-family:'Inter',sans-serif; font-size:14px; color:rgba(255,255,255,.82); line-height:1.5; margin:0; max-width:62ch; }
@media(max-width:720px){ .tb-accroche h2{ font-size:19px; } .tb-accroche p{ font-size:13px; } }

/* ============================ BANNIÈRE DE CONFIANCE « VOS GARANTIES » ============================
   Report fidèle du composant Design « Banniere confiance NFR » : carte à rayons
   asymétriques, panneau pétrole rayé en diagonale avec découpe oblique, filet
   tricolore, décennale en chiffre fort, logo RGE Qualibat sur plaque blanche,
   garanties en lignes séparées à pastille rouge.
   Écarts assumés vs la maquette : typo Inter (celle du site) au lieu d'Archivo,
   et logo RGE en hauteur libre — le logo officiel est en portrait (313×380),
   la maquette prévoyait une fente paysage 114×64. */
.vg-section{ padding:56px 0 50px; background:var(--paper); border-bottom:1px solid var(--line); }
.vg-card{ border:2px solid #004A5C; border-radius:0 36px 0 36px; background:#fff; overflow:hidden;
  display:grid; grid-template-columns:minmax(340px,1.25fr) minmax(280px,.9fr); align-items:stretch; }

/* panneau pétrole : rayures diagonales + bord droit oblique */
.vg-head{ background-color:#004A5C;
  background-image:repeating-linear-gradient(105deg,#00303B 0 42px,#004A5C 42px 84px);
  clip-path:polygon(0 0, 100% 0, calc(100% - 34px) 100%, 0 100%);
  padding:30px 50px 30px 32px; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.vg-rule{ display:flex; gap:6px; }
.vg-rule i{ width:34px; height:5px; }
.vg-rule i:nth-child(1){ background:#8A8ACB; }
.vg-rule i:nth-child(2){ background:#fff; }
.vg-rule i:nth-child(3){ background:#F2626E; }
.vg-head-row{ display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:18px; }
.vg-warranty{ margin:0; min-width:0; display:flex; flex-direction:column; gap:2px; color:#fff; font-family:'Inter',sans-serif; }
.vg-warranty-k{ font-size:18px; font-weight:500; letter-spacing:.02em; line-height:1.2; }
.vg-warranty-v{ font-size:clamp(28px,3.4vw,42px); font-weight:700; letter-spacing:-.025em; line-height:1; }
.vg-logo{ flex:0 0 auto; display:flex; align-items:center; background:#fff; border-radius:0 18px 0 18px; padding:12px 14px; }
.vg-logo img{ display:block; width:auto; height:68px; }

/* colonne des garanties */
.vg-list{ margin:0; padding:32px 36px 32px 20px; list-style:none; display:flex; flex-direction:column; justify-content:center; }
.vg-item{ display:flex; align-items:center; gap:18px; padding:15px 0; font-family:'Inter',sans-serif;
  font-size:17.5px; font-weight:600; line-height:1.3; letter-spacing:-.005em; color:#00303B; }
.vg-item::before{ content:""; flex:0 0 auto; width:11px; height:11px; background:#BD1724; border-radius:0 4px 0 4px; }
.vg-item + .vg-item{ border-top:1px solid #DCE5E8; }

/* variante mobile de la maquette : une colonne, découpe oblique en bas du panneau */
@media(max-width:720px){
  .vg-section{ padding:46px 0 44px; }
  .vg-card{ grid-template-columns:1fr; border-radius:0 28px 0 28px; }
  .vg-head{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%); padding:24px 22px 42px; gap:16px; }
  .vg-rule{ gap:5px; } .vg-rule i{ width:28px; height:4px; }
  .vg-head-row{ gap:14px; }
  .vg-warranty-k{ font-size:15px; }
  .vg-warranty-v{ font-size:30px; }
  .vg-logo{ border-radius:0 14px 0 14px; padding:9px 12px; }
  .vg-logo img{ height:52px; }
  .vg-list{ padding:6px 22px 22px; }
  .vg-item{ gap:14px; padding:13px 0; font-size:16px; letter-spacing:0; }
  .vg-item::before{ width:10px; height:10px; }
}

/* ============================ DÉDUP MOBILE DU HERO ============================
   Dès que la barre d'appel fixe apparaît (≤720px), elle porte déjà Appeler + Devis.
   On masque donc les mêmes boutons dans le hero (accueil + pages services) pour ne
   pas répéter l'action ; le micro-form « Être rappelé » reste l'unique action du hero.
   Desktop (>720px, sans barre fixe) : boutons du hero conservés. */
@media(max-width:720px){ .hero .hero-cta, .svc-hero .hero-cta{ display:none; } }
/* mobile : le micro-form du hero passe centré et pleine largeur */
@media(max-width:720px){ .hero-form, .svc-hero .hero-form{ width:100%; max-width:none; margin-left:0; margin-right:0; } }

/* Placeholder photo générique (emplacement en attente d'une vraie photo NFR) */
.nfr-ph{ position:relative; border:1.5px dashed rgba(0,74,92,.4); border-radius:8px; background:linear-gradient(135deg,rgba(0,74,92,.05),rgba(0,74,92,.02)); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:26px 22px; min-height:220px; aspect-ratio:4/3; overflow:hidden; }
.nfr-ph::after{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg,rgba(0,74,92,.03) 0 10px,transparent 10px 20px); pointer-events:none; }
.nfr-ph svg{ width:38px; height:38px; color:var(--petrol); opacity:.5; }
.nfr-ph .l{ font-weight:600; font-size:14px; color:var(--petrol); max-width:28ch; line-height:1.35; }
.nfr-ph .t{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#fff; background:var(--petrol); padding:4px 9px; border-radius:3px; }

/* ---- Curseur avant / après (18/09/2026) : image « avant » dessous, calque « après » (image ou vidéo) découpé par --pos ----
   Le <input type=range> transparent couvre tout le bloc : souris, doigt et clavier (flèches) déplacent la ligne. */
.ba-slider{ position:relative; width:min(480px,100%); margin:0 auto; aspect-ratio:4/5; border-radius:8px; overflow:hidden; background:var(--tint-2); border:1px solid var(--line-strong); --pos:50%; user-select:none; -webkit-user-select:none; touch-action:pan-y; }
.ba-slider > img, .ba-slider .ba-after, .ba-slider .ba-after video, .ba-slider .ba-after img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; margin:0; }
.ba-slider .ba-after{ clip-path:inset(0 0 0 var(--pos)); }
.ba-slider .ba-line{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 0 1px rgba(0,26,33,.28); pointer-events:none; z-index:2; }
.ba-slider .ba-knob{ position:absolute; top:50%; left:var(--pos); width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:#fff; color:var(--petrol); box-shadow:0 8px 24px rgba(0,26,33,.38); display:grid; place-items:center; pointer-events:none; z-index:3; }
.ba-slider .ba-knob svg{ width:22px; height:22px; }
.ba-slider input[type=range]{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:ew-resize; z-index:4; -webkit-appearance:none; appearance:none; background:transparent; }
.ba-slider input[type=range]:focus-visible + .ba-focus, .ba-slider:focus-within{ outline:2px solid var(--amber); outline-offset:3px; }
.ba-slider .ba-lab{ position:absolute; top:14px; z-index:2; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#fff; background:rgba(0,40,50,.72); padding:5px 10px; border-radius:3px; pointer-events:none; }
.ba-slider .ba-lab-b{ left:14px; }
.ba-slider .ba-lab-a{ right:14px; background:var(--red); }
.ba-cap{ text-align:center; font-size:13px; color:var(--muted); margin:14px auto 0; max-width:60ch; }
.montage.is-photo .montage-cap .m-step{ font-size:12.5px; }

/* Mobile : on desserre (en fin de feuille pour passer après les règles de base). Les bandes gardent leur rythme mais perdent 40 px de vide,
   et les encarts (callout, cartes) rendent leur marge intérieure au texte. */
@media(max-width:640px){
  .band{ padding:64px 0; } .band.tight{ padding:48px 0; }
  .split{ gap:36px; }
  .callout{ padding:30px 22px 28px; border-radius:6px; }
  .callout::after{ display:none; }
  .callout h2{ max-width:none; }
  .reassure-item{ padding:20px 16px; }
  .hub-card{ padding:22px 20px; }
  .aide-card{ padding:22px 20px; }
}

/* ============================ CARROUSEL PHOTOS (pages services) ============================
   Même composant que le slider réalisations de l'accueil (classes .rs-*), sans onglets :
   piste à défilement horizontal + scroll-snap, flèches, compteur. JS : [data-rs-simple] dans nfr.js. */
.rs{ position:relative; margin-top:36px; }
.rs-stage{ position:relative; }
.rs-track{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; border-radius:10px; }
.rs-track::-webkit-scrollbar{ display:none; }
.rs-slide{ flex:0 0 100%; margin:0; scroll-snap-align:center; position:relative; border-radius:10px; overflow:hidden; background:var(--tint); }
.rs-slide img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; max-height:min(58vh, 520px); }
.rs-slide figcaption{ position:absolute; left:0; right:0; bottom:0; padding:26px 16px 13px; color:#fff; font-size:13.5px; font-weight:600; background:linear-gradient(transparent, rgba(0,32,40,.82)); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.rs-step{ flex:none; padding:3px 9px; border-radius:999px; background:var(--red); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.rs-step.is-before{ background:var(--petrol-deep); } .rs-step.is-during{ background:var(--petrol-bright); }
.rs-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--petrol); background:rgba(255,255,255,.92); border:1px solid var(--line-strong); box-shadow:0 8px 20px -10px rgba(0,40,50,.5); transition:background .18s, color .18s, opacity .18s; }
.rs-nav svg{ width:20px; height:20px; }
.rs-nav:hover{ background:var(--petrol); color:#fff; }
.rs-nav:focus-visible{ outline:2px solid var(--petrol-bright); outline-offset:2px; }
.rs-prev{ left:12px; } .rs-next{ right:12px; }
.rs-nav[disabled]{ opacity:0; pointer-events:none; }
.rs-count{ position:absolute; right:12px; top:12px; z-index:2; padding:5px 11px; border-radius:999px; background:rgba(0,48,59,.78); color:#fff; font-size:12px; font-weight:600; letter-spacing:.04em; }
.rs-more{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.ba-slider + .rs{ margin-top:44px; }
.ba-cap{ text-align:center; font-size:13px; color:var(--muted); margin-top:12px; }
[id]{ scroll-margin-top:96px; }
@media(max-width:640px){ .rs-nav{ width:36px; height:36px; } .rs-prev{ left:7px; } .rs-next{ right:7px; } .rs{ margin-top:26px; } }
@media(prefers-reduced-motion:reduce){ .rs-track{ scroll-behavior:auto; } }
/* ============================ PHOTOS DANS LE CORPS (pages services) ============================ */
.body-fig{ margin:36px 0 6px; }
.body-fig img{ height:clamp(240px,34vw,440px); }
.split.split-photo{ grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:start; }
.split-photo .split-fig{ position:sticky; top:96px; margin:0; }
.split-photo .split-fig img{ height:clamp(280px,38vw,560px); }
@media(max-width:860px){ .split.split-photo{ grid-template-columns:1fr; gap:28px; } .split-photo .split-fig{ position:static; order:-1; } .split-photo .split-fig img{ height:clamp(220px,60vw,340px); } .body-fig{ margin-top:28px; } }