/* ==========================================================================
   Volt & Eau Express : site.css (Nicolam Studio)
   Le bleu et le vert d'eau du logo sur un blanc cassé bleuté. Tokens, base, composants, effets.
   Aucune bibliothèque CSS chargée : tout le style du site vit dans cette feuille.
   ========================================================================== */

/* ---------- Polices hébergées sur le site (aucun appel à Google Fonts : pas d'IP de visiteur envoyée à Google) ----------
   Fichiers variables officiels de Google Fonts, sous-ensemble latin (accents français, œ, €, guillemets, espaces insécables). */
@font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Manrope"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("/assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- Tokens ---------- */
:root{
  /* Couleurs — rôles */
  --bg:#F4F7F7;            /* fond : blanc cassé légèrement bleuté, jamais blanc pur */
  --blue-soft:#DDE9F5;     /* accent, teinte claire */
  --blue:#1E5A9C;          /* accent, teinte soutenue */
  --water-soft:#DCF1EC;    /* accent secondaire (eau), teinte claire */
  --water:#2E9F8C;         /* accent secondaire (eau), teinte soutenue : JAMAIS en texte ; réservé au dégradé signature */
  --water-icon:#25897A;    /* vert eau des icônes, 4:1 sur --bg et 3,6:1 sur --section-b */
  --ink:#14213A;           /* texte */
  --ink-2:#4B5B70;         /* texte secondaire (6,4:1 sur --bg) */
  --ink-3:#5E6A7C;         /* placeholders et valeur de repli (5,1:1 sur --bg) */
  --section-b:#E6EEF5;     /* seconde couleur des fonds de sections */
  --card:#FFFFFF;          /* fond des cartes posées sur la section */
  --error:#B42318;         /* erreur de formulaire */
  --gold:#F2B01E;          /* or Google : étoiles et note, le même jaune partout */
  --grad-signature:linear-gradient(135deg,#1E5A9C,#2E9F8C);
  --hairline:rgba(20,33,58,.14);
  --line-on-accent:rgba(244,247,247,.28);

  /* Notes de maquette : Note = carmin, Suggestion = ambre */
  --note-ink:#9E1F42; --note-txt:#7A2038; --note-bg:rgba(158,31,66,.06); --note-bd:rgba(158,31,66,.32);
  --sugg-ink:#7A5600; --sugg-txt:#6A4C07; --sugg-bg:rgba(224,161,0,.12); --sugg-bd:rgba(224,161,0,.55);

  /* Ombre unique du site : bleu nuit, niveau « présent » (+ son cran de survol) */
  --sh-card:0 1px 2px rgba(20,33,58,.12),0 8px 20px rgba(20,33,58,.09),0 18px 36px rgba(20,33,58,.05),inset 0 1px 0 rgba(255,252,247,.7);
  --sh-soft:0 1px 2px rgba(20,33,58,.08),0 6px 14px rgba(20,33,58,.06);
  --sh-lift:0 2px 4px rgba(20,33,58,.12),0 12px 26px rgba(20,33,58,.12),0 24px 44px rgba(20,33,58,.07),inset 0 1px 0 rgba(255,252,247,.7);

  /* Espacements — échelle unique */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;
  /* Rayons — coins doux (registre services aux particuliers) */
  --r-btn:10px; --r-field:10px; --r-card:16px; --r-pill:999px;
  /* Conteneurs */
  --container:1200px; --container-header:1320px; --pad:24px;
  /* Hauteurs de référence : barre d'annonce + header */
  --ann-h:40px; --hdr-h:80px; --stack-h:calc(var(--ann-h) + var(--hdr-h));
  /* Mouvement */
  --ease:ease-in-out; --dur:.4s;
  --dur-menu:.5s;   /* menu mobile : panneau, accordéon « Prestations » et voile du header, la même durée (fiche Header) */
  /* Tickers : exactement les mêmes réglages pour les deux */
  --tk-lead:48px; --tk-gap:24px; --tk-fade:24px;

  /* Typographie */
  --f-title:"Manrope",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --fs-h1:clamp(2.25rem,1.5rem + 3vw,3.75rem);        /* 36 → 60px */
  --fs-h2:clamp(1.75rem,1.35rem + 1.6vw,2.625rem);    /* 28 → 42px */
  --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);        /* 20 → 24px */
  --fs-h4:1.0625rem;                                  /* 17px */
  --fs-lead:clamp(1.125rem,1.05rem + .3vw,1.1875rem); /* chapô 18 → 19px */
  --fs-body:clamp(1rem,.97rem + .15vw,1.0625rem);     /* 16 → 17px */
  --fs-caption:.875rem;                               /* 14px */
  --fs-overline:.8125rem;                             /* 13px */
}
@media (max-width:1023px){ :root{ --hdr-h:64px; } }
@media (max-width:767px){ :root{ --pad:16px; --tk-fade:16px; } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 24px); }
body{ margin:0; background:var(--bg); color:var(--ink); overflow-x:clip; font-family:var(--f-body);
  font-size:var(--fs-body); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
svg{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; letter-spacing:inherit; color:inherit; background:transparent; border:0; padding:0; margin:0; cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; }
p{ text-wrap:pretty; }
[hidden]{ display:none !important; }
::selection{ background:var(--blue); color:var(--bg); }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.nw{ white-space:nowrap; }

/* Titre aligné à gauche : la 1re ligne remplit la largeur (pretty évite seulement le mot orphelin). JAMAIS balance :
   il coupe le titre en deux moitiés égales et laisse la moitié droite vide. balance seulement sur un titre centré. */
h1,h2,h3,h4{ font-family:var(--f-title); color:var(--ink); text-wrap:pretty; }
.center h1,.center h2,.center h3,.hero h1,.phero h1,.guar__txt h3,.frise__txt h3{ text-wrap:balance; }
h1{ font-weight:700; font-size:var(--fs-h1); line-height:1.08; letter-spacing:-.015em; }
h2{ font-weight:600; font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.015em; }
h3{ font-weight:600; font-size:var(--fs-h3); line-height:1.25; letter-spacing:-.005em; }
h4{ font-weight:600; font-size:var(--fs-h4); line-height:1.3; }
.eyebrow{ display:inline-block; font-family:var(--f-body); font-weight:600; font-size:var(--fs-overline); line-height:1.4;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue); text-wrap:balance; }
.lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-2); max-width:70ch; text-wrap:pretty; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; isolation:isolate; padding-block:96px; }
.section > .container{ position:relative; z-index:1; }
/* grain désaturé 4 % sur les fonds de section uniquement (les composants restent lisses au-dessus) */
.section::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (max-width:767px){ .section{ padding-block:64px; } }
/* deux sections d'un même thème : écart réduit, elles se lisent comme un tout (CLAUDE.md, fonds par thèmes) */
.section.sec-tight{ padding-top:48px; }
@media (max-width:767px){ .section.sec-tight{ padding-top:32px; } }
/* flux des fonds : A = #F4F7F7, B = #E6EEF5 (attribué par flow() au build, bords calés) */
.bg-ab{ background:linear-gradient(180deg,#F4F7F7,#E6EEF5); }
.bg-ba{ background:linear-gradient(180deg,#E6EEF5,#F4F7F7); }
.bg-aba{ background:linear-gradient(180deg,#F4F7F7,#E6EEF5 50%,#F4F7F7); }
.bg-bab{ background:linear-gradient(180deg,#E6EEF5,#F4F7F7 50%,#E6EEF5); }

.shead{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:48px; }
.shead.center{ align-items:center; text-align:center; }
.shead.center .lead{ margin-inline:auto; }
.sec-prest .lead{ max-width:none; }   /* rien en face : le chapô court sur toute la largeur du conteneur */
@media (max-width:767px){ .shead{ margin-bottom:32px; } }

/* ---------- Icônes ---------- */
.ic{ width:20px; height:20px; flex:0 0 auto; }
.kic{ width:48px; height:48px; flex:0 0 auto; color:var(--water-icon); }

/* ---------- Boutons : trois niveaux, coins doux 10px, icône à droite ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 22px;
  border-radius:var(--r-btn); border:1.5px solid transparent; white-space:nowrap; font-family:var(--f-body);
  font-weight:600; font-size:1rem; line-height:1.2; cursor:pointer;
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),filter var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.btn .ic{ width:18px; height:18px; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn--primary{ background:var(--blue); color:var(--bg); box-shadow:0 6px 16px rgba(30,90,156,.24); }
.btn--primary:hover{ filter:brightness(.88); box-shadow:0 10px 22px rgba(30,90,156,.3); }
.btn--primary:active{ filter:brightness(.8); }
.btn--primary.on-img{ box-shadow:0 8px 22px rgba(8,16,30,.35); }   /* jamais de liseré clair sur un bouton plein */
.btn--ghost{ color:var(--blue); border-color:var(--blue); background:transparent; }
.btn--ghost:hover{ background:rgba(30,90,156,.08); }
.btn--ghost:active{ background:rgba(30,90,156,.14); }
.btn--ghost.on-img{ color:var(--bg); border-color:rgba(244,247,247,.92); background:rgba(20,33,58,.22); }
.btn--ghost.on-img:hover{ background:rgba(244,247,247,.16); }
.hero :focus-visible,.annonce :focus-visible{ outline-color:var(--bg); }

/* ---------- Barre d'annonce ---------- */
.annonce{ position:relative; z-index:51; height:var(--ann-h); display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(180deg,#2A6BB0 0%,#1E5A9C 55%,#1A5190 100%); color:var(--bg); }
.annonce__in{ width:100%; max-width:var(--container-header); margin-inline:auto; padding-inline:var(--pad); overflow:hidden; }
.annonce .tk{ justify-content:center; }
.annonce__set{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:var(--tk-gap); flex:0 0 auto; }
.annonce li{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-caption); font-weight:500; line-height:1; white-space:nowrap; }
.annonce li .ic{ width:16px; height:16px; }
.annonce li.sep{ opacity:.7; }
.annonce .tk > .annonce__set[aria-hidden]{ display:none; }
@media (max-width:1039px){   /* V1 : ligne fixe de quatre éléments mesurée à 945px + 48px de marges : en dessous, ticker, vide de lecture de 48px devant CHAQUE copie */
  .annonce__in{ padding-inline:0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent); }
  .annonce .tk{ justify-content:flex-start; width:max-content; }
  .annonce .tk > .annonce__set[aria-hidden]{ display:flex; }
  .annonce__set{ padding-left:var(--tk-lead); }
}

/* ---------- Ticker (mécanique commune) ---------- */
.tk{ display:flex; }
.tk.run{ animation:tk var(--tk-dur,30s) linear infinite; will-change:transform; }
.tk.paused{ animation-play-state:paused; }
@keyframes tk{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Header : verre densifié, un seul état ---------- */
.hdr{ position:sticky; top:0; z-index:50; }
.hdr__bar{ position:relative; height:var(--hdr-h);
  background:linear-gradient(180deg,rgba(244,247,247,.95),rgba(244,247,247,.78));
  -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:var(--sh-soft); }
.hdr__bar::after{ content:""; position:absolute; inset:0; background:var(--bg); opacity:0; pointer-events:none;
  transition:opacity var(--dur-menu) var(--ease); }
.hdr.is-open .hdr__bar::after{ opacity:1; }
.hdr__bar > .container{ max-width:var(--container-header); height:100%; display:flex; align-items:center; gap:24px;
  flex-wrap:nowrap; position:relative; z-index:1; }
.hdr__logo{ flex:0 0 auto; display:flex; align-items:center; border-radius:6px; transition:opacity var(--dur) var(--ease); }
.hdr__logo:hover{ opacity:.85; }
.hdr__img{ height:56px; width:auto; }
.nav{ display:flex; align-items:center; gap:4px; margin-inline:auto; flex-wrap:nowrap; }
.nav__link{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; white-space:nowrap; min-height:44px;
  padding:10px 14px; border-radius:var(--r-btn); font-weight:500; font-size:.96875rem; color:var(--ink);
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.nav__link:hover{ color:var(--blue); background:rgba(30,90,156,.07); }
.nav__link[aria-current="page"],.nav__toggle[data-current]{ color:var(--blue); }
.nav__link .ic{ width:16px; height:16px; transition:transform var(--dur) var(--ease); }
.nav__has{ position:relative; }
.nav__toggle[aria-expanded="true"] .ic{ transform:rotate(180deg); }
.submenu{ position:absolute; top:calc(100% + 12px); left:50%; min-width:272px; padding:8px; display:flex; flex-direction:column;
  background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-card);
  opacity:0; visibility:hidden; transform:translate(-50%,6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur) var(--ease); }
.submenu::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }   /* pont de survol */
.nav__has:hover .submenu,.nav__has:focus-within .submenu,.submenu.is-open{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.submenu a{ display:flex; align-items:center; gap:12px; padding:6px 14px 6px 8px; border-radius:var(--r-btn); font-weight:500; color:var(--ink); white-space:nowrap;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease); }
.submenu a:hover,.submenu a[aria-current]{ background:var(--blue-soft); color:var(--blue); }
/* icône clé dans la MÊME pastille que le bento (.tile__chip), mise à l'échelle : 40 / 22px, coins au même rapport (14px à 56px) */
.kchip{ flex:0 0 auto; width:40px; height:40px; border-radius:10px; background:var(--grad-signature);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(20,33,58,.14),0 4px 10px rgba(30,90,156,.2),inset 0 1px 0 rgba(255,252,247,.28); }
.kchip .kic{ width:22px; height:22px; color:var(--bg); }
.hdr__cta{ flex:0 0 auto; }
.burger{ display:none; flex:0 0 auto; margin-left:auto; width:44px; height:44px; border-radius:var(--r-btn);
  border:1.5px solid rgba(20,33,58,.18); align-items:center; justify-content:center; color:var(--ink);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.burger:hover{ background:rgba(30,90,156,.07); border-color:rgba(30,90,156,.4); }
.burger .ic{ width:22px; height:22px; }
.burger .ic-x,.hdr.is-open .burger .ic-menu{ display:none; }
.hdr.is-open .burger .ic-x{ display:block; }
.hdr__panel{ display:none; }
@media (max-width:1023px){ .hdr__img{ height:44px; } }
@media (max-width:859px){   /* bascule burger mesurée en V1 : logo 69 + 4 entrées 432 + CTA 224 + écarts et marges 96 = 821px */
  .nav,.hdr__cta{ display:none; }
  .burger{ display:inline-flex; }
  /* dépliage et repli à la hauteur exacte du menu (grille 0fr → 1fr), en ease-in-out visible d'un bout à l'autre ; jamais un
     max-height de 0 à 100svh (la courbe porterait sur la hauteur d'écran) ni de fondu d'opacité ; le panneau ne se cache qu'à
     la fin du repli */
  .hdr__panel{ display:grid; grid-template-rows:0fr; position:absolute; top:100%; left:0; right:0; z-index:2; background:var(--bg);
    box-shadow:0 18px 30px rgba(20,33,58,.12); visibility:hidden;
    transition:grid-template-rows var(--dur-menu) var(--ease),visibility 0s linear var(--dur-menu); }
  .hdr.is-open .hdr__panel{ grid-template-rows:1fr; visibility:visible;
    transition:grid-template-rows var(--dur-menu) var(--ease),visibility 0s linear 0s; }
  .hdr__in{ min-height:0; max-height:calc(100svh - var(--stack-h)); overflow:hidden; }
  .hdr.is-open .hdr__in{ overflow-y:auto; }
  .hdr__panel .container{ display:flex; flex-direction:column; gap:4px; padding-block:16px calc(32px + var(--ckb-h,0px)); }
  .hdr__panel a:not(.btn),.macc__btn{ display:flex; align-items:center; min-height:48px; padding:12px 8px; border-radius:var(--r-btn);
    font-weight:500; color:var(--ink); text-align:left;
    transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease); }
  .hdr__panel a:not(.btn):hover,.macc__btn:hover,.hdr__panel a[aria-current]:not(.btn),.macc__btn[data-current]{ background:var(--blue-soft); color:var(--blue); }
  .macc__btn{ width:100%; justify-content:space-between; }
  .macc__btn .ic{ width:18px; height:18px; transition:transform var(--dur-menu) var(--ease); }
  .macc.is-open .macc__btn .ic{ transform:rotate(180deg); }
  .macc__panel{ display:grid; grid-template-rows:0fr; visibility:hidden;
    transition:grid-template-rows var(--dur-menu) var(--ease),visibility 0s linear var(--dur-menu); }
  .macc.is-open .macc__panel{ grid-template-rows:1fr; visibility:visible;
    transition:grid-template-rows var(--dur-menu) var(--ease),visibility 0s linear 0s; }
  .macc__in{ overflow:hidden; min-height:0; display:flex; flex-direction:column; }
  /* sous-liens : lignes de 48px qui ne grossissent pas, pastille 36 / 20px, 12px jusqu'au libellé, même retrait partout */
  .hdr__panel .macc__in a:not(.btn){ display:flex; align-items:center; gap:12px; min-height:48px; padding:6px 8px 6px 24px; }
  .hdr__panel .macc__in a:not(.btn):focus-visible{ outline-offset:-2px; }   /* le conteneur de l'accordéon coupe ce qui dépasse */
  .hdr__panel .kchip{ width:36px; height:36px; border-radius:9px; }
  .hdr__panel .kchip .kic{ width:20px; height:20px; }
  .hdr__panel .btn{ margin-top:16px; align-self:stretch; }
}

/* ---------- Hero d'accueil ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:center;
  text-align:center; min-height:calc(100svh - var(--stack-h)); padding:96px var(--pad); color:var(--bg); }
.hero__media{ position:absolute; inset:0; z-index:-2; background:var(--ink); }
.hero__media picture{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:var(--hero-pos,50% 50%); }
@media (orientation:portrait){ .hero__media img{ object-position:var(--hero-pos-m,50% 50%); } }   /* découpe portrait dédiée */
/* placeholder du hero : dégradé signature assombri (texte clair AA), logo en filigrane, légende en pastille */
.hero__ph{ position:absolute; inset:0;
  background:linear-gradient(rgba(20,33,58,.35),rgba(20,33,58,.35)),linear-gradient(135deg,#1E5A9C,#2E9F8C); }
/* logo en filigrane AU-DESSUS du voile (sinon le voile l'éteint), sous le texte, tel quel, jamais recoloré */
.hero__mark{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.22;
  background:url("/assets/img/logo-motif.webp") no-repeat center 46% / min(52%,480px) auto; }
.hero__ph .ph__cap{ top:16px; bottom:auto; left:16px; background:rgba(20,33,58,.4); color:rgba(244,247,247,.92);
  border:1px solid rgba(244,247,247,.22); box-shadow:none; }
.hero__veil{ position:absolute; inset:0; z-index:-1;
  background:radial-gradient(64% 58% at 50% 52%,rgba(20,33,58,.62),rgba(20,33,58,.36) 72%,rgba(20,33,58,.3)),
             linear-gradient(180deg,rgba(20,33,58,.08) 0%,rgba(20,33,58,.46) 100%); }
.hero__in{ width:100%; max-width:var(--container); display:flex; flex-direction:column; align-items:center; gap:24px; }
.hero h1{ color:var(--bg); text-shadow:0 2px 24px rgba(8,16,30,.32); }
.hero__tag{ font-size:var(--fs-lead); line-height:1.55; color:rgba(244,247,247,.96); text-shadow:0 1px 14px rgba(8,16,30,.42); max-width:70ch; }
.hero__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:8px; }
/* Pastille Google : variante classique, version foncée (verre) */
.gpill{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 12px; border-radius:var(--r-pill);
  background:rgba(20,33,58,.34); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(244,247,247,.24); white-space:nowrap; }
.gpill .g-g{ width:20px; height:20px; flex:0 0 auto; }
.gpill__n{ font-family:var(--f-title); font-weight:700; font-size:1rem; line-height:1; color:var(--gold); font-variant-numeric:tabular-nums lining-nums; }
.stars{ display:inline-flex; align-items:center; gap:2px; color:var(--gold); }   /* un seul or, le jaune, partout (demande de Nicolas) */
.star{ width:18px; height:18px; fill:currentColor; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
.gpill .stars{ color:var(--gold); }
.gpill .star{ width:16px; height:16px; }
@media (max-width:767px){
  .gpill{ padding:6px 12px 6px 10px; gap:8px; }
  .hero__mark{ background-size:min(84%,320px) auto; }
  .gpill .g-g{ width:16px; height:16px; }
  .gpill__n{ font-size:.875rem; }
  .gpill .star{ width:13px; height:13px; }
  .hero{ padding-block:64px; }   /* padding standard des sections : l'indicateur de scroll, en barre à droite, ne prend pas de place en bas */
  .hero__cta{ flex-direction:column; align-items:stretch; }   /* empilés : les deux en pleine largeur */
}
/* Hero d'accueil plein écran sur téléphone : 100svh est l'écran avec les barres du navigateur DÉPLIÉES. Barres repliées,
   ou page qui passe sous la barre flottante de Safari, l'écran visible est plus haut et la section suivante apparaissait
   en bas (barre blanche). La boîte va donc jusqu'au grand viewport (100lvh) ; le contenu reste centré dans le petit
   (le surplus va en marge basse), toujours visible au chargement. Sur ordinateur, les deux sont égaux. */
@supports (height:100lvh){
  .hero{ min-height:calc(100lvh - var(--stack-h)); padding-bottom:calc(96px + 100lvh - 100svh); }
  @media (max-width:767px){ .hero{ padding-bottom:calc(64px + 100lvh - 100svh); } }
}
/* Indicateur de scroll, variante barre à droite sans mot (COMPOSANTS.md ; contrôle final du 08/10) : ligne verticale de 1px et sa
   lueur en bas à droite du hero d'accueil, 24px du bord (16px sous 768px), 32px au-dessus du bas de l'écran visible, zone
   cliquable de 44px ; masqué tant que le bandeau cookies est là (html.ck-open), en fondu après ~40 % d'écran défilé (.is-gone),
   retiré s'il chevaucherait un texte ou un bouton du hero (.is-off, mesuré en JS au chargement et au redimensionnement) */
.hscroll{ position:absolute; right:0; bottom:calc(32px + env(safe-area-inset-bottom)); z-index:1; width:48px; height:72px;
  transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease); }
@supports (height:100lvh){ .hscroll{ bottom:calc(32px + env(safe-area-inset-bottom) + 100lvh - 100svh); } }
.hscroll__line{ position:absolute; top:0; right:24px; width:1px; height:100%; overflow:hidden; background:rgba(244,247,247,.28); }
.hscroll__line::after{ content:""; position:absolute; left:0; top:0; width:100%; height:40%;
  background:linear-gradient(180deg,transparent,rgba(244,247,247,.95),transparent); animation:vee-glow 2.4s linear infinite; }   /* flux continu, sans pause */
@keyframes vee-glow{ from{ transform:translateY(-100%); } to{ transform:translateY(250%); } }
.hscroll__line{ transition:background-color var(--dur) var(--ease); }
.hscroll:hover .hscroll__line{ background:rgba(244,247,247,.6); }
html.ck-open .hscroll,.hscroll.is-gone,.hscroll.is-off{ opacity:0; visibility:hidden; pointer-events:none; }
@media (max-width:767px){ .hscroll{ width:44px; height:56px; } .hscroll__line{ right:16px; } }

/* ---------- Hero de page ---------- */
.phero{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:center;
  text-align:center; min-height:clamp(320px,44svh,460px); padding:96px var(--pad);
  background:radial-gradient(75% 95% at 50% 50%,#F4F7F7 0%,#F4F7F7 24%,#DDE9F5 100%); }
.phero::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.06;
  background:url("/assets/img/logo-motif.webp") no-repeat center / min(44%,360px) auto; }
.phero__in{ width:100%; max-width:var(--container); display:flex; flex-direction:column; align-items:center; gap:16px; }
/* Nom de l'entreprise en tête des H1 (accueil, prestations, Réalisations, Contact) : le dégradé signature à l'horizontale, du bleu
   de l'accent vers l'eau, comme le logo (06/10, Nicolas), étalé sur le nom seul ; chaque ligne garde son dégradé complet si le
   nom passe sur deux lignes. Heros clairs : la ligne du dégradé finit un peu après le nom (eau à 125 %), la dernière lettre
   prend l'eau à 20 % vers l'accent (#2B918F) : 3,07:1 au pire sur le bord bleuté du hero, quand l'eau pure n'y fait que 2,64:1 */
.brand-grad{ background-image:linear-gradient(90deg,var(--blue) 0%,var(--water) 125%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; text-shadow:none; }
.hero .brand-grad,.phero--img .brand-grad{ background-image:linear-gradient(90deg,var(--blue-soft),var(--water-soft)); }   /* hero d'accueil : teintes claires sur le voile sombre */
.brand-grad::selection{ -webkit-text-fill-color:var(--bg); }   /* sélection du site (fond accent, texte clair) : le nom reste lisible */
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .brand-grad{ background-image:none; color:var(--blue); -webkit-text-fill-color:var(--blue); }
  .hero .brand-grad,.phero--img .brand-grad{ color:var(--blue-soft); -webkit-text-fill-color:var(--blue-soft); }
}
/* Pages prestations (08/10, Nicolas) : la tuile de la prestation en fond, sous le même voile sombre que l'accueil (.hero__veil
   réutilisé, mêmes valeurs, centré) ; le filigrane du logo s'efface, le texte passe en clair comme sur l'accueil */
.phero--img{ background:var(--ink); }
@media (min-width:1024px){ .phero--img{ min-height:clamp(440px,60svh,640px); } }   /* heros à image (prestations, Réalisations, Contact), ordinateur seulement : plus hauts (Nicolas, 08/10) ; tablette et mobile inchangés */
.phero--img::before{ display:none; }
.phero__media{ position:absolute; inset:0; z-index:-2; }
.phero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.phero__media::after{ content:""; position:absolute; inset:0; background:rgba(20,33,58,.2); }
.phero--accueil .phero__media::after{ display:none; }   /* Réalisations : l'image sombre de l'accueil, exactement son overlay, rien de plus (Contact a la camionnette, .phero--van) */
.phero--accueil .phero__media img{ object-position:72% 40%; }   /* l'électricien (tiers droit, logo au dos) reste dans le cadre sur écran étroit */   /* images plus claires que celle de l'accueil : 20 % bleu marine sous le même voile, minimum mesuré pour titre ≥ 3:1 et accroche ≥ 4,5:1 */
/* Contact : la camionnette devant la maison (08/10, Nicolas), voile marine à 30 % (image claire, le voile doit se voir).
   Hero plus large que l'image (ordinateur) : calé à 72 % en hauteur, camionnette entière (y 26-88 % de l'image), et jamais plus
   bas que 28vw sur grand écran ; mobile : calé à droite, les deux personnes qui se serrent la main à la porte restent visibles */
.phero--van .phero__media::after{ background:rgba(20,33,58,.3); }
.phero--van .phero__media img{ object-position:var(--van-x,50%) var(--van-y,72%); }
@media (min-width:1024px){ .phero--van{ min-height:max(clamp(440px,60svh,640px),28vw); } }
@media (max-width:767px){ .phero--van{ --van-x:97%; } }
.phero--img h1{ color:var(--bg); text-shadow:0 2px 24px rgba(8,16,30,.32); }
.phero--img .phero__tag{ color:rgba(244,247,247,.96); text-shadow:0 1px 14px rgba(8,16,30,.42); }
/* V1 : les H1 de page sont longs (mot-clé + nom) : un cran plus petits que le H1 d'accueil pour casser en 2-3 lignes équilibrées */
.phero h1{ font-size:clamp(1.625rem,1.1rem + 2.4vw,3rem); }
.phero__tag{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-2); max-width:70ch; }
@media (max-width:767px){ .phero{ padding-block:64px; min-height:280px; } .phero::before{ background-size:min(72%,260px) auto; } }

/* ---------- Placeholder image : logo du client, radial clair, légende en pastille ---------- */
.ph{ position:relative; overflow:hidden; background:radial-gradient(80% 80% at 50% 48%,#F4F7F7 0%,#DDE9F5 100%); }
.ph::before{ content:""; position:absolute; inset:0; opacity:.2;   /* motif calé sur la hauteur : la légende ne le touche jamais */
  background:url("/assets/img/logo-motif.webp") no-repeat center 38% / auto min(54%,150px); }
.ph__cap{ position:absolute; left:12px; bottom:12px; z-index:1; width:max-content; max-width:calc(100% - 24px);
  padding:6px 12px; border-radius:12px; background:rgba(244,247,247,.92); color:var(--ink-2);
  font-size:var(--fs-caption); line-height:1.4; box-shadow:var(--sh-soft);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }

/* ---------- Signature d'image (06/10, Nicolas) : voile de marque + grain sur chaque image du site, sauf les photos de
   réalisations (photos du client, brutes : page Réalisations et ticker de l'accueil). En CSS, sans toucher aux fichiers : un
   élément dédié .sig posé juste après l'image dans son cadre, car le ::before de .alt__img tient le ratio et celui d'un cadre
   passerait SOUS l'image (premier dans l'ordre du DOM). ::before = voile, ::after = grain. Réglages ici seulement. ---------- */
.sig{ position:absolute; inset:0; pointer-events:none; --sig-voile:.07; --sig-grain:.04; }   /* image sans texte dessus (tuiles, alternances) ; grain 4 % : valeur du secteur bâtiment */
.sig--text{ --sig-voile:.12; }   /* heros (accueil et pages) : voile plus marqué, par-dessus leur overlay sombre ; même grain */
.sig::before,.sig::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.sig::before{ background:var(--blue); mix-blend-mode:soft-light; opacity:var(--sig-voile); }   /* voile : l'accent du site, uni (08/10, Nicolas) */
.sig::after{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat; mix-blend-mode:overlay; opacity:var(--sig-grain); }   /* bruit fixe, non animé */
.sig--text::before,.sig--text::after{ z-index:-1; }   /* hero : passe après le voile sombre (z -1, plus tôt dans le DOM), sous le texte */

/* ---------- Notes de maquette ---------- */
.note-wrap.is-center .mnote{ margin-inline:auto; }
.mnote{ display:flex; gap:14px; align-items:flex-start; max-width:760px; padding:18px 20px; border-radius:var(--r-card); border:1px solid; }
.mnote .ic{ width:22px; height:22px; margin-top:1px; }
.mnote__label{ display:block; font-weight:600; font-size:var(--fs-overline); letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; line-height:1.4; }
.mnote p{ font-size:1rem; line-height:1.55; }
.mnote--note{ background:var(--note-bg); border-color:var(--note-bd); color:var(--note-ink); }
.mnote--note p{ color:var(--note-txt); }
.mnote--sugg{ background:var(--sugg-bg); border-color:var(--sugg-bd); color:var(--sugg-ink); }
.mnote--sugg p{ color:var(--sugg-txt); }
.sec-note .mnote{ margin-inline:auto; max-width:720px; }
.sec-contrast .mnote--note{ background:linear-gradient(var(--note-bg),var(--note-bg)),var(--bg); }   /* lisible sur l'aplat */

/* ---------- S2 Prestations : bento asymétrique 4 colonnes, dominantes en diagonale ---------- */
.bento{ display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); grid-auto-rows:1fr; gap:24px; --tile-img:304px; }   /* 1fr : toutes les rangées à la hauteur de la plus haute = cartes identiques ; 304 = zone texte des petites cartes (50/50) */
/* V1 (06/10, Nicolas) : sept tuiles sur trois rangées, une rangée par métier (Électricité, puis Plomberie dessous, chacune
   en tête de sa rangée), Dépannage en bandeau horizontal dessous. Les six autres en image en haut, texte en bas, cartes de même
   hauteur : image à hauteur fixe (--tile-img), zone texte identique partout. Grille de 10 : une dominante prend 4 colonnes, une
   petite 3 (la dominante vaut ~1,35 petite, pas deux) : les petites s'élargissent, leur texte tient en moins de lignes, la rangée
   raccourcit et les dominantes, au texte court, n'ont plus de grand vide */
/* une rangée par métier, sa grande carte en tête : Électricité puis ses prestations, Plomberie dessous puis les siennes */
.t-elec{ grid-column:1 / 5; grid-row:1; }
.t-borne{ grid-column:5 / 8; grid-row:1; }
.t-pac{ grid-column:8 / 11; grid-row:1; }
.t-plomb{ grid-column:1 / 5; grid-row:2; }
.t-insp{ grid-column:5 / 8; grid-row:2; }
.t-ce{ grid-column:8 / 11; grid-row:2; }
.t-dep{ grid-column:1 / -1; grid-row:3; }
@media (min-width:1024px){
  .bento{ grid-template-rows:1fr 1fr auto; }   /* les deux rangées de cartes à hauteur égale, le bandeau à la sienne */
  /* bandeau : l'image à gauche, le texte à droite ; la pastille à cheval entre les deux */
  .tile.t-dep{ flex-direction:row; }   /* .tile (colonne) est déclarée plus bas : il faut la même précision plus une classe */
  .t-dep .tile__img{ flex:0 0 calc(40% - 14.4px); height:auto; min-height:var(--tile-img); }   /* largeur et hauteur de Plomberie, juste au-dessus : même image qu'une grande tuile */
  .t-dep .tile__chip{ left:auto; right:-28px; top:calc(32px + var(--fs-h3) * .625 - 28px); bottom:auto; }   /* centrée sur la ligne du titre */
  .t-dep .tile__body{ padding:32px 32px 32px 64px; }   /* texte calé en haut, comme sur toutes les tuiles */
}
.tile{ display:flex; flex-direction:column; border-radius:var(--r-card); overflow:hidden; background:var(--card);
  box-shadow:var(--sh-card); color:var(--ink); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); }
/* survol des tuiles : un seul effet, le zoom de l'image, sans montée (Nicolas, 08/10 ; COMPOSANTS.md, Carte image) */
.tile__img{ position:relative; height:var(--tile-img); flex:0 0 auto; }   /* hauteur FIXE, identique sur toutes les cartes d'un même écran */
.tile__img .ph,.tile__img img{ position:absolute; inset:0; width:100%; height:100%; }
.tile__frame{ position:absolute; inset:0; overflow:hidden; }   /* le zoom reste dans l'image, la pastille déborde toujours */
.tile__img img{ transition:transform 1.2s var(--ease); }
.tile:hover .tile__img img{ transform:scale(1.04); }   /* zoom image lent au survol (CLAUDE-batiment : 1.04), comme les cartes Réalisations */
.tile__img img{ object-fit:cover; object-position:50% 50%; }   /* sujet composé au centre : lisible à tous les ratios */
.tile__body{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-start; padding:48px 32px 32px; }   /* 48 en haut : la pastille déborde de 28px ; texte calé en haut = même écart pastille → titre partout */
.tile__txt{ display:flex; flex-direction:column; gap:8px; }
/* indicateur de lien (style du bouton tertiaire : texte en accent, sans fond ni bordure), calé en bas à droite de la tuile,
   à la même hauteur dans une rangée ; la flèche glisse au survol. Un texte DANS le lien de la tuile, jamais un second lien */
.tile__more{ display:inline-flex; align-items:center; gap:8px; align-self:flex-end; margin-top:auto; padding-top:24px; font-weight:600; color:var(--blue); }
.tile__more .ic{ width:18px; height:18px; transition:transform var(--dur) var(--ease); }
.tile:hover .tile__more .ic,.tile:focus-visible .tile__more .ic{ transform:translateX(4px); }
.tile__txt p{ color:var(--ink-2); }
.tile__img .ph__cap{ top:12px; bottom:auto; }   /* la légende monte : la pastille d'icône occupe le bas à gauche */
/* icône sur-mesure dans une pastille au dégradé signature, à cheval sur l'image et le texte, même traitement sur les six tuiles */
.tile__chip{ position:absolute; left:32px; bottom:-28px; z-index:1; width:56px; height:56px; border-radius:14px; background:var(--grad-signature);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(20,33,58,.14),0 6px 14px rgba(30,90,156,.22),inset 0 1px 0 rgba(255,252,247,.28); }
.tile__chip .kic{ width:32px; height:32px; color:var(--bg); }   /* trait clair sur le dégradé signature */
@media (max-width:1023px){
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); --tile-img:272px; }   /* zone texte des demi-cartes à 768 : 273 */
  .t-elec{ grid-column:1 / -1; grid-row:1; }   /* même logique : chaque grande carte en pleine largeur, ses prestations dessous */
  .t-borne{ grid-column:1; grid-row:2; }
  .t-pac{ grid-column:2; grid-row:2; }
  .t-plomb{ grid-column:1 / -1; grid-row:3; }
  .t-insp{ grid-column:1; grid-row:4; }
  .t-ce{ grid-column:2; grid-row:4; }
  .t-dep{ grid-column:1 / -1; grid-row:5; }
}
@media (max-width:767px){
  .bento{ grid-template-columns:1fr; --tile-img:264px; }   /* zone texte à 375 : 266 */
  .t-elec,.t-plomb,.t-insp,.t-borne,.t-ce,.t-pac,.t-dep{ grid-column:auto; grid-row:auto; }
}

/* ---------- S3 Réalisations : grille de trois cartes projet (le ticker est retiré, 10/10) ---------- */
.sec-real .shead{ margin-bottom:32px; }
.rgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch; }   /* calée en haut, cartes d'une rangée à la même hauteur (un titre sur trois lignes vers 1024px) */
.after-grid{ display:flex; justify-content:center; margin-top:48px; }
/* six cartes sur ordinateur (deux rangées de trois) ; iPad : les quatre premières en 2 × 2 ; mobile : les quatre premières
   en une colonne. Les deux dernières (.rcard--desk) ne s'affichent que sur ordinateur (Nicolas, 12/10) */
@media (max-width:1023px){ .rgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .rgrid > .rcard--desk{ display:none; } }
@media (max-width:767px){ .rgrid{ grid-template-columns:minmax(0,1fr); } }
/* carte projet (Carte image, variante portfolio) : catégorie, intitulé ; la ligne commune seulement quand elle est connue */
.rcard{ display:flex; flex-direction:column; background:var(--card); color:var(--ink); border-radius:var(--r-card);
  overflow:hidden; box-shadow:var(--sh-card); }
.rcard__img{ position:relative; overflow:hidden; }
.rcard__img::before{ content:""; display:block; padding-top:133.333%; }   /* portrait 3:4, comme les photos */
.rcard__img .ph,.rcard__img > img{ position:absolute; inset:0; }
.rcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }   /* photo du client, déjà au 3:4 */
/* V1 : au survol, zoom lent de l'image à 1.04 À LA PLACE de la montée de la carte (un seul effet) */
.rcard__img .ph{ transition:transform 1.2s var(--ease); }
.rcard:hover .rcard__img .ph,.rcard:hover .rcard__img img{ transform:scale(1.04); }
.rcard__body{ position:relative; flex:1 1 auto; display:flex; flex-direction:column; gap:8px; padding:16px 24px 24px; }
.rcard__cat{ font-weight:600; font-size:var(--fs-overline); line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.rcard__t{ font-size:var(--fs-h3); line-height:1.25; min-height:2.5em; }   /* deux lignes réservées */
.rcard__loc{ margin-top:auto; display:flex; align-items:center; gap:6px; font-size:var(--fs-caption); line-height:1.5; color:var(--ink-2); }
.rcard__loc .ic{ width:14px; height:14px; }
.is-ph{ font-style:italic; color:var(--ink-3); }
/* carte au carrousel sur l'accueil : un article, le lien sur le titre s'étend au corps de la carte (jamais de bouton dans un lien) */
.rcard__link{ color:inherit; }
.rcard__link::after{ content:""; position:absolute; inset:0; }
.rcard__link:focus-visible{ outline:none; }
.rcard__link:focus-visible::after{ outline:2px solid var(--blue); outline-offset:-2px; border-radius:0 0 var(--r-card) var(--r-card); }
@media (max-width:767px){ .rcard__body{ padding:16px 16px 24px; } }
/* carrousel avant / après dans le cadre image (réglages du Carrousel d'avis : chevrons ronds de 48px, butées, aimantation, glissé) */
.rcar__track{ position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain; scrollbar-width:none; }
.rcar__track::-webkit-scrollbar{ display:none; }
.rcar__track{ cursor:grab; }
.rcar__track.is-drag{ cursor:grabbing; }
.rcar__track.is-drag img{ transition:none; }
.rcar__track:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
/* la photo est un conteneur : chevrons et pastille se règlent sur SA largeur (368px ordinateur, ~220px iPad en trois colonnes,
   la pleine largeur en mobile), jamais une taille fixe pour toutes les largeurs */
.rcar{ container-type:inline-size; }
.rcar__view{ position:relative; flex:0 0 100%; margin:0; overflow:hidden; scroll-snap-align:start; scroll-snap-stop:always; }
.rcar__view img{ position:absolute; inset:0; }
.rcar__tag{ position:absolute; top:clamp(8px,3.3cqw,12px); left:clamp(8px,3.3cqw,12px); z-index:1; padding:.3em .75em; border-radius:999px;
  background:var(--bg); color:var(--ink); font-weight:600; font-size:clamp(10px,3.5cqw,var(--fs-overline)); line-height:1.4; letter-spacing:.12em; text-transform:uppercase; }
/* chevrons seuls sur la photo, sans rond ni bordure (Nicolas, 11/10) : clairs avec une ombre pour rester lisibles, zone cliquable de 44px */
.rcar__btn{ position:absolute; z-index:2; top:calc(50% - 22px); width:44px; height:44px; padding:0; border:0; background:none; color:var(--bg);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:opacity var(--dur) var(--ease);
  filter:drop-shadow(0 1px 3px rgba(8,16,30,.55)); }
.rcar__btn .ic{ width:clamp(18px,6.5cqw,28px); height:clamp(18px,6.5cqw,28px); stroke-width:2; }   /* 18px sur une carte de 220px, 24px à 368px, 28px au plus */
.rcar__btn:hover:not(:disabled){ background:none; color:var(--bg); transform:none; opacity:.8; }
.rcar__btn:focus-visible{ outline:2px solid var(--bg); outline-offset:0; border-radius:8px; }
.rcar__btn:disabled{ opacity:.35; cursor:default; }   /* grisé en butée */
.rcar__btn--prev{ left:clamp(0px,1.1cqw,4px); }
.rcar__btn--next{ right:clamp(0px,1.1cqw,4px); }

/* ---------- S4 Zone d'intervention : split carte / texte ---------- */
/* ordinateur : la carte à gauche sur toute la hauteur, le texte (en-tête puis liste) centré en face ; empilé (tablette, mobile) :
   l'ordre du HTML, en-tête de section d'abord, puis la carte, puis la liste des communes (rien de la section au-dessus du sur-titre) */
.zsplit{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:1fr auto auto 1fr; column-gap:64px; align-items:start; }
.zsplit > .zmap{ grid-column:1; grid-row:1 / -1; align-self:center; }
.zsplit > .ztext--head{ grid-column:2; grid-row:2; }
.zsplit > .ztext--list{ grid-column:2; grid-row:3; margin-top:16px; }   /* 16 + les 16 du sous-titre : 32px sous le chapô, comme avant */
.ztext{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.ztext p{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-2); max-width:70ch; }
/* communes les plus servies (composant repris de la maquette Fleurent Bâtiment) : sous-titre, puis une rangée par commune,
   repère Lucide en accent, filet inséré aligné sur le texte */
.ztext__h{ font-size:var(--fs-h4); margin-top:16px; }
.crows{ list-style:none; margin:0; padding:0; width:100%; }
.crow{ position:relative; display:flex; align-items:center; gap:12px; min-height:48px; padding-block:12px; font-weight:600; }
.crow .ic{ width:20px; height:20px; color:var(--water-icon); flex:0 0 auto; }
.crow + .crow::before{ content:""; position:absolute; top:0; left:32px; right:0; height:1px; background:var(--hairline); }
@media (min-width:600px){   /* deux colonnes lues de haut en bas ; pas de filet en tête de colonne */
  .crows{ display:grid; grid-template-rows:repeat(var(--rows,5),auto); grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); column-gap:32px; }
  .crow--col::before{ display:none; }
}
.zmap{ position:relative; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); background:var(--blue-soft); container-type:inline-size; }
.zmap::before{ content:""; display:block; padding-top:80%; }   /* cadre 120 × 96 km : littoral, îles et estuaire visibles */
.zmap svg{ position:absolute; inset:0; width:100%; height:100%; }
.zmap .sea{ fill:#DDE9F5; }
.zmap .dep{ fill:#F4F7F7; }
.zmap .dep-l{ fill:none; stroke:rgba(20,33,58,.2); stroke-width:1; vector-effect:non-scaling-stroke; }
/* halo de couverture : teinte claire d'accent, contour diffus (enveloppe élargie + flou SVG), sur la terre seulement */
.zmap .halo{ fill:#DDE9F5; stroke:#DDE9F5; stroke-width:150; stroke-linejoin:round; }
.zmap .coast{ fill:none; stroke:rgba(30,90,156,.4); stroke-width:1; vector-effect:non-scaling-stroke; }
/* Points et étiquettes à l'échelle de la carte : tout le groupe (texte, marges, décalages, points, repère) est en em
   d'une base qui suit la largeur de la carte (cqw). Elle vaut la taille d'origine sur la carte de référence, sans
   chevauchement (13px pour 544px de large, 12px pour la carte carrée de 343px), et n'est jamais plus grande ; quand
   la carte rétrécit (1024px, petits téléphones), tout rétrécit ensemble et la disposition reste la même, sans
   descendre sous 10px. */
.mpt{ position:absolute; left:var(--x); top:var(--y); width:0; height:0; z-index:1; font-size:clamp(10px, 2.39cqw, .8125rem); }
.mpt--main{ z-index:2; }
.mpt i{ position:absolute; left:-.3077em; top:-.3077em; width:.6154em; height:.6154em; border-radius:50%; background:var(--ink);
  box-shadow:0 0 0 .2308em rgba(244,247,247,.95); }
.mpt .pin{ position:absolute; width:2.7692em; height:2.7692em; left:-1.3846em; top:-2.5385em; fill:var(--blue); stroke:var(--bg);
  filter:drop-shadow(0 3px 5px rgba(20,33,58,.3)); }   /* la pointe touche l'ancre */
.mpt .pin circle{ fill:var(--bg); stroke:none; }
.lbl{ position:absolute; white-space:nowrap; line-height:1; border-radius:var(--r-pill); padding:.3846em .6923em;
  font-size:1em; font-weight:500; color:var(--ink); background:rgba(244,247,247,.96); box-shadow:var(--sh-soft); }
.mpt--main .lbl{ font-size:1.0769em; font-weight:700; color:var(--blue); padding:.4286em .7143em; }
.lbl[data-d="top"]{ left:0; bottom:3em; transform:translateX(-50%); }
.lbl[data-d="right"]{ left:.9231em; top:0; transform:translateY(-50%); }
.lbl[data-d="right-low"]{ left:.9231em; top:0; transform:translateY(calc(-50% + .5em)); }   /* à droite, un peu plus bas : laisse de l'air au point voisin au-dessus */
.lbl[data-d="left"]{ right:.9231em; top:0; transform:translateY(-50%); }
.lbl[data-d="below"]{ left:0; top:.9231em; transform:translateX(-50%); }
.lbl[data-d="above"]{ left:0; bottom:.9231em; transform:translateX(-50%); }
.lbl[data-d="above-right"]{ left:.6154em; bottom:.6154em; }   /* en diagonale, en haut à droite du point */
.lbl[data-d="above-left"]{ right:.6154em; bottom:.6154em; }
@media (max-width:1023px){
  .zsplit{ grid-template-columns:1fr; grid-template-rows:none; gap:48px; }
  .zsplit > .zmap,.zsplit > .ztext--head,.zsplit > .ztext--list{ grid-column:auto; grid-row:auto; }
  .zsplit > .ztext--list{ margin-top:0; }
  .ztext--list .ztext__h{ margin-top:0; }   /* la carte au-dessus : l'écart de la grille suffit */
}
@media (max-width:767px){
  .zsplit{ gap:32px; }
  .zmap::before{ padding-top:100%; }   /* carte carrée, SVG recadré au centre */
  .mpt{ left:var(--xm); top:var(--ym); font-size:clamp(10px, 3.5cqw, .75rem); }
  .mpt i{ left:-.3333em; top:-.3333em; width:.6667em; height:.6667em; box-shadow:0 0 0 .25em rgba(244,247,247,.95); }
  .lbl{ padding:.3333em .5833em; }
  .mpt--main .lbl{ font-size:1.0833em; padding:.3846em .6154em; }
  .mpt .pin{ width:2.5em; height:2.5em; left:-1.25em; top:-2.2917em; }
  .lbl[data-d]{ left:auto; right:auto; top:auto; bottom:auto; transform:none; }
  .lbl[data-m="top"]{ left:0; bottom:2.6923em; transform:translateX(-50%); }
  .lbl[data-m="right"]{ left:.8333em; top:0; transform:translateY(-50%); }
  .lbl[data-m="right-low"]{ left:.8333em; top:0; transform:translateY(calc(-50% + .5em)); }
  .lbl[data-m="left"]{ right:.8333em; top:0; transform:translateY(-50%); }
  .lbl[data-m="below"]{ left:0; top:.8333em; transform:translateX(-50%); }
  .lbl[data-m="above"]{ left:0; bottom:.8333em; transform:translateX(-50%); }
  .lbl[data-m="above-right"]{ left:.5833em; bottom:.5833em; }
  .lbl[data-m="above-left"]{ right:.5833em; bottom:.5833em; }
}

/* ---------- S5 Garanties : item à icône en grille + emplacements réservés ---------- */
.guar{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.guar__it{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;
  padding:32px; border-radius:var(--r-card); transition:background-color var(--dur) var(--ease); }
.guar__it:hover{ background:rgba(30,90,156,.05); }
.guar__it + .guar__it::before{ content:""; position:absolute; left:0; top:24px; bottom:24px; width:1px; background:var(--hairline); }
.gic{ width:40px; height:40px; color:var(--water-icon); flex:0 0 auto; }
.guar__txt{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.guar__txt p{ color:var(--ink-2); max-width:34ch; }
/* preuve sous l'item qui l'annonce : logo de l'assureur + numéro de contrat, centrés comme l'item */
.guar__proof{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:8px; }
.guar__proof img{ height:22px; width:auto; }
.guar__proof span{ font-size:var(--fs-caption); color:var(--ink-2); }
/* bandeau de confiance : deux vrais logos, même HAUTEUR OPTIQUE (réglée à l'œil, repère 48px), légende centrée dessous */
.trust{ display:flex; justify-content:center; align-items:flex-end; gap:64px; margin-top:48px; }
.trust__it{ margin:0; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.trust__logo{ width:auto; }
.trust__logo--ergo{ height:30px; margin-bottom:14px; }   /* mot large et bas : plus petit en pixels, même présence */
.trust__logo--qe{ height:72px; }
.trust__it figcaption{ font-size:var(--fs-caption); line-height:1.5; color:var(--ink-2); }
@media (max-width:1023px){ .guar__it{ padding:24px 16px; } .gic{ width:36px; height:36px; } }
@media (max-width:767px){
  .guar{ grid-template-columns:1fr; }
  .guar__it{ padding:24px 16px; }
  .guar__it + .guar__it::before{ left:24px; right:24px; top:0; bottom:auto; width:auto; height:1px; }
  .gic{ width:32px; height:32px; }
  .trust{ gap:24px; }
  .trust__logo--ergo{ height:25px; margin-bottom:12px; }
  .trust__logo--qe{ height:60px; }
}

/* ---------- S6 L'entreprise : section de contraste + chevauchement + bande de stats ---------- */
.sec-contrast{ background:var(--blue); color:var(--bg); }
.sec-contrast::before{ opacity:.03; }
/* « Qui je suis » : chiffres à l'échelle de la carte voisine, un cran au-dessus de son H2 (32 → 44px), pas 48 → 72px (19/10, Nicolas) */
.sec-who .stat__n{ font-size:clamp(2rem,1.55rem + 1.6vw,2.75rem); }
.who{ max-width:760px; margin-inline:auto; background:var(--bg); color:var(--ink); border-radius:var(--r-card); box-shadow:var(--sh-card);
  padding:48px; display:flex; flex-direction:column; gap:16px; }   /* sans portrait (10/10) : la carte seule, centrée dans la section */
.who p{ color:var(--ink-2); font-size:var(--fs-lead); line-height:1.55; }
/* « Qui je suis » : les qualifications sous la présentation. Un filet (32px de part et d'autre), le sur-titre, puis une rangée
   par preuve : le logo dans une colonne fixe (les textes s'alignent), l'intitulé en gras, le numéro en gris dessous */
.quals{ position:relative; margin-top:16px; padding-top:32px; display:flex; flex-direction:column; gap:16px; }
.quals::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--hairline); }
.quals__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.qual{ display:flex; align-items:center; gap:16px; }
.qual__logo{ flex:0 0 72px; display:flex; justify-content:center; }
.qual__img--qe{ height:56px; width:auto; }
.qual__txt{ display:flex; flex-direction:column; gap:2px; line-height:1.4; }
.qual__txt strong{ font-weight:600; color:var(--ink); }
.qual__txt span{ font-size:var(--fs-caption); color:var(--ink-2); }
@media (max-width:767px){
  .qual{ gap:12px; }
  .qual__logo{ flex-basis:56px; }
  .qual__img--qe{ height:48px; }
}
.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:64px; }
.stat{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:24px 16px; }
.stat + .stat::before{ content:""; position:absolute; left:0; top:24px; bottom:24px; width:1px; background:var(--line-on-accent); }
.stat__n{ font-family:var(--f-title); font-weight:700; font-size:clamp(3rem,2.2rem + 3vw,4.5rem); line-height:1; letter-spacing:-.02em;
  color:var(--bg); font-variant-numeric:tabular-nums lining-nums; }
.stat__l{ font-weight:500; font-size:1rem; line-height:1.4; color:var(--blue-soft); white-space:nowrap; }
.stat__n{ display:inline-flex; align-items:center; gap:.08em; }
/* l'étoile en or, collée au chiffre, à la hauteur des chiffres */
.stat__star{ width:.62em; height:.62em; flex:0 0 auto; fill:var(--gold); stroke:var(--gold); stroke-width:1.5; stroke-linejoin:round; }
@media (max-width:1023px){
  .who{ padding:32px; }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat:last-child{ grid-column:1 / -1; }   /* l'orpheline, centrée comme les deux du haut */
  .stat:last-child::before{ left:24px; right:24px; top:0; bottom:auto; width:auto; height:1px; }   /* un seul trait continu */
}
@media (max-width:767px){
  .who{ padding:32px 24px; max-width:none; }
  .who p{ font-size:var(--fs-body); }
  .stats{ margin-top:48px; }
  .stat{ padding:24px 8px; }
  .stat__l{ font-size:.9375rem; }
}

/* ---------- S7 Avis : bloc note + mur masonry ---------- */
.rating{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:8px; }
.rating__l1{ display:flex; align-items:center; gap:12px; }
.rating__n{ font-family:var(--f-title); font-weight:700; font-size:2.75rem; line-height:1; letter-spacing:-.02em;
  color:var(--gold); font-variant-numeric:tabular-nums lining-nums; }
.rating .star{ width:24px; height:24px; }
.rating__l2{ display:flex; align-items:center; gap:10px; font-weight:600; color:var(--ink); }
/* Compteur à molettes (accueil) : chiffres à chasse fixe ; chaque chiffre entier est une fenêtre d'un chiffre sur une ligne,
   découpée par clip-path (overflow déplacerait la ligne de base), où glisse une bande 0 à 9. Le chiffre final, invisible,
   donne la taille de la fenêtre : rien ne bouge autour. Étoiles de la note : une grisée dessous, le jaune découvert dessus. */
[data-odo]{ font-variant-numeric:tabular-nums lining-nums; }
.odo__w{ position:relative; display:inline-block; clip-path:inset(0); }
.odo__g{ visibility:hidden; }
.odo__s{ position:absolute; left:0; top:0; width:100%; }
.odo__s > span{ display:block; text-align:center; }
.ostar{ position:relative; display:inline-flex; }
.ostar__f{ position:absolute; inset:0; clip-path:inset(0 100% 0 0); transition:clip-path 150ms var(--ease); }
.ostar.is-on .ostar__f{ clip-path:inset(0); }
.ostar.is-now .ostar__f{ transition:none; }
.gpill .ostar__b{ color:rgba(244,247,247,.2); }   /* couleur du texte à 20 % : clair sur la pastille du hero */
.rating .ostar__b{ color:rgba(20,33,58,.2); }     /* foncé dans la section Avis */
.g-word{ height:22px; width:auto; margin-top:3px; }
.wall{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:start; }
.wall.is-masonry{ grid-auto-rows:1px; row-gap:0; }
.rv{ background:var(--card); color:var(--ink); border-radius:var(--r-card); box-shadow:var(--sh-card); padding:32px;
  display:flex; flex-direction:column; gap:16px; }
.rv__head{ display:flex; align-items:center; gap:12px; }
.rv__av{ width:44px; height:44px; flex:0 0 auto; border-radius:50%; background:var(--grad-signature); color:var(--bg);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-title); font-weight:700; font-size:1.25rem; }
.rv__who{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }   /* prénom, étoiles dessous */
.rv__name{ font-weight:600; line-height:1.3; }
.rv__g{ margin-left:auto; align-self:flex-start; }   /* le G seul, en haut à droite, calé sur le haut de l'en-tête */
.rv__g .g-g{ width:18px; height:18px; }
/* mur d'avis en alternance : colonne ÉCRITE par palier (et rang par order), hauteurs naturelles, jamais de colonnes CSS */
.wall--alt{ grid-auto-flow:dense; }
.wall--alt > .rv{ grid-column:var(--c3); }
.stars--sm .star{ width:15px; height:15px; }
.rv__txt{ color:var(--ink); }
.rv-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:48px; }
@media (max-width:1023px){ .wall{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wall--alt > .rv{ grid-column:var(--c2); order:var(--o2); } }
@media (max-width:767px){
  .rating__n{ font-size:2.25rem; }
  .rating .star{ width:20px; height:20px; }
  .wall{ grid-template-columns:1fr; }
  .wall--alt > .rv{ grid-column:1; order:var(--o1); }
  .rv{ padding:24px; }
  .rv-cta{ flex-direction:column; align-items:stretch; margin-top:32px; }   /* empilés : les deux en pleine largeur */
}

/* ---------- S8 FAQ : accordéon à filets ---------- */
.faq{ max-width:760px; margin-inline:auto; border-bottom:1px solid var(--hairline); }
.faq__item{ border-top:1px solid var(--hairline); }
.faq__h{ font-size:inherit; }
.faq__q{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; min-height:44px;
  padding:24px 16px; text-align:left; font-family:var(--f-title); font-weight:600; font-size:1.1875rem; line-height:1.35;
  color:var(--ink); border-radius:var(--r-btn); transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.faq__q:hover{ color:var(--blue); background:rgba(30,90,156,.05); }
.faq__q .ic{ width:22px; height:22px; margin-top:2px; color:var(--blue); transition:transform var(--dur) var(--ease); }
.faq__item.is-open .faq__q .ic{ transform:rotate(180deg); }
.faq__a{ display:grid; grid-template-rows:0fr; visibility:hidden;
  transition:grid-template-rows var(--dur) var(--ease),visibility var(--dur) var(--ease); }
.faq__a > div{ overflow:hidden; min-height:0; }
.faq__a p{ color:var(--ink-2); padding:0 16px 24px; max-width:64ch; }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; visibility:visible; }
@media (max-width:767px){ .faq__q{ font-size:1.0625rem; padding:16px 8px; } .faq__a p{ padding:0 8px 16px; } }

/* ---------- Formulaire de devis (bloc partagé) ---------- */
.sec-devis .shead{ margin-bottom:24px; }
.devis__call{ display:flex; justify-content:center; margin-bottom:48px; }
.card{ background:var(--card); color:var(--ink); border-radius:var(--r-card); box-shadow:var(--sh-card); padding:48px; }
.fcard--solo{ max-width:720px; margin-inline:auto; }
.fcard > .shead{ margin-bottom:32px; }
.form-body{ display:flex; flex-direction:column; gap:24px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-weight:600; font-size:1rem; line-height:1.4; color:var(--ink); }
.field .opt{ font-weight:400; color:var(--ink-2); margin-left:6px; }
.hint{ font-size:var(--fs-caption); line-height:1.5; color:var(--ink-2); }
.field input,.field select,.field textarea{ width:100%; min-height:48px; padding:12px 14px; font:inherit; font-size:1rem; line-height:1.5;
  color:var(--ink); background:var(--bg); border:1px solid rgba(20,33,58,.16); border-radius:var(--r-field); margin:0;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.field textarea{ resize:vertical; }
.field ::placeholder{ color:var(--ink-3); opacity:1; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(20,33,58,.34); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--blue); outline-offset:3px; border-color:var(--blue); }
.field select{ appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5A9C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px; }
.field select:invalid{ color:var(--ink-3); }
.field select option{ color:var(--ink); }
@media (max-width:419px){   /* l'intitulé tient en entier à 375px : chevron resserré, texte toujours aligné à 14px */
  .field select{ padding-right:28px; letter-spacing:-.025em; background-position:right 8px center; background-size:16px; }
}
.err{ display:none; font-size:var(--fs-caption); font-weight:600; line-height:1.4; color:var(--error); }
.field.is-err .err{ display:block; }
.field.is-err input,.field.is-err select,.field.is-err textarea{ border-color:var(--error); }
/* pièce jointe : zone compacte, nom affiché, bouton pour retirer */
.file{ position:relative; }
.file__input{ position:absolute; inset:0; z-index:1; width:100%; height:100%; opacity:0; cursor:pointer; }
.file__zone{ display:flex; align-items:center; justify-content:center; min-height:56px; border-radius:var(--r-field);
  border:1.5px dashed rgba(20,33,58,.26); background:var(--bg); color:var(--blue);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.file__zone .ic{ width:24px; height:24px; }
.file__input:hover + .file__zone{ background:var(--blue-soft); border-color:var(--blue); }
.file__input:focus-visible + .file__zone{ outline:2px solid var(--blue); outline-offset:3px; }
.field.is-err .file__zone{ border-color:var(--error); }
.file.has-file .file__input,.file.has-file .file__zone{ display:none; }
.file__chosen{ display:flex; align-items:center; gap:12px; min-height:56px; padding:6px 6px 6px 14px; border-radius:var(--r-field);
  border:1px solid rgba(20,33,58,.16); background:var(--bg); }
.file__name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file__clear{ flex:0 0 auto; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-btn); color:var(--ink-2); transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease); }
.file__clear:hover{ background:var(--blue-soft); color:var(--blue); }
.form-send{ margin-top:32px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.form.is-busy .form-send .btn{ opacity:.7; pointer-events:none; }
.form-ko{ font-weight:600; color:var(--error); }
.form-foot{ margin-top:16px; font-size:var(--fs-caption); line-height:1.5; color:var(--ink-2); }
.form-foot a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; transition:color var(--dur) var(--ease); }
.form-foot a:hover{ color:var(--ink); }
.form-ok{ padding:24px; border-radius:var(--r-field); background:var(--blue-soft); color:var(--ink); font-weight:600; }
.form-ok:focus{ outline:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:767px){ .card{ padding:32px 24px; } .form-send .btn{ width:100%; } }

/* ---------- Contact : formulaire « avec coordonnées » (7 / 5) ---------- */
.cgrid{ display:grid; grid-template-columns:7fr 5fr; gap:32px; align-items:start; }
.cgrid > *{ min-width:0; }
.icards{ display:flex; flex-direction:column; gap:24px; }
.icard{ padding:32px; }
.icard h3{ margin-bottom:16px; }
.icard__rows{ display:flex; flex-direction:column; gap:12px; }
.icard .row{ display:flex; align-items:flex-start; gap:12px; }
.icard .ic{ color:var(--water-icon); margin-top:3px; }
.icard a{ cursor:pointer; overflow-wrap:anywhere; transition:color var(--dur) var(--ease); }
.icard a:hover{ color:var(--blue); }
.hrow{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.hrow > span:first-child{ white-space:nowrap; }   /* le jour ne se coupe jamais ; l'horaire passe à la ligne s'il le faut */
.hrow .d{ font-weight:600; text-align:right; color:var(--ink-2); }
@media (max-width:1023px){ .cgrid{ grid-template-columns:1fr; } }
@media (max-width:767px){ .icard{ padding:24px; } }

/* ---------- Pages légales ---------- */
.legal{ max-width:720px; margin-inline:auto; display:flex; flex-direction:column; gap:8px; }
.legal h2{ font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem); margin-top:32px; margin-bottom:8px; }
.legal h2:first-child{ margin-top:0; }
.legal p{ color:var(--ink-2); }
.legal a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; transition:color var(--dur) var(--ease); }
.legal a:hover{ color:var(--ink); }

/* ---------- Footer ---------- */
.foot{ background:var(--bg); color:var(--ink); }
/* Maps bord à bord, au même format avant et après le consentement : aucun décalage au déblocage */
.foot__map{ position:relative; height:360px; background:var(--blue-soft); }
.foot__map iframe{ position:absolute; inset:0; display:block; width:100%; height:100%; border:0; }
.mapph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  padding:24px var(--pad); text-align:center; background:radial-gradient(80% 90% at 50% 50%,#F4F7F7 0%,#DDE9F5 100%); }
.mapph p{ color:var(--ink-2); max-width:44ch; }
.mapph__ic{ width:24px; height:24px; color:var(--blue); }
.foot__id{ padding-top:48px; }
.foot__grid{ display:grid; grid-template-columns:1.3fr 1fr 1.25fr; gap:48px; }
/* ordinateur : le footer prend la largeur du header (1320px) et les trois colonnes, serrées sur leur texte, se répartissent avec le même air entre elles (Nicolas, 12/10).
   L'accroche passe sur deux lignes choisies, la zone d'intervention se plie à la largeur de l'adresse : aucun texte ne dépasse de sa colonne. */
@media (min-width:1024px){ .foot > .container{ max-width:var(--container-header); }
  .foot__grid{ grid-template-columns:repeat(3,max-content); justify-content:space-between; column-gap:48px; }
  .foot__tag{ max-width:none; }
  .foot__tag > span{ display:block; }
  .foot__info .row--zone > span{ flex:1 1 0; contain:inline-size; } }
.foot__grid > *{ min-width:0; }
.foot__logo{ height:56px; width:auto; margin-bottom:16px; }
.foot__name{ font-size:1.375rem; line-height:1.2; letter-spacing:-.01em; }
.foot__pos{ color:var(--blue); font-weight:600; margin-top:2px; }
.foot__tag{ color:var(--ink-2); margin-top:12px; max-width:38ch; }
/* réassurances : vrais logos sur une ligne, même hauteur optique (le mot ERGO, large et bas, face au bloc Qualifelec vertical) */
.foot__proofs{ display:flex; align-items:center; gap:24px; margin-top:24px; }
.proof{ width:auto; flex:0 0 auto; }
.proof--ergo{ height:22px; }
.proof--qe{ height:68px; }
.foot__col{ padding-top:72px; }   /* première ligne au niveau du nom, pas du logo */
.foot__h{ font-family:var(--f-body); font-weight:600; font-size:var(--fs-overline); line-height:1.4; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue); margin-bottom:12px; }
.foot__h--legal{ margin-top:32px; }
.foot__links{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.foot__links a,.foot__info a,.foot__btnlink,.foot__bar a{ cursor:pointer; transition:color var(--dur) var(--ease),transform var(--dur) var(--ease); }
.foot__links a:hover,.foot__info a:hover,.foot__btnlink:hover,.foot__bar a:hover{ color:var(--blue); transform:translateX(3px); }
.foot__btnlink{ text-align:left; line-height:inherit; }   /* « Gérer les cookies » : un bouton, traité comme les liens du bloc Légal */
.foot__parent{ color:var(--ink); }
.foot__sub{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding-left:16px; }
.foot__sub a{ color:var(--ink-2); }
.foot__info{ display:flex; flex-direction:column; gap:12px; }
.foot__info .row{ display:flex; align-items:flex-start; gap:10px; }
.foot__info .ic{ width:18px; height:18px; margin-top:3px; color:var(--water-icon); }
.foot__info a{ overflow-wrap:anywhere; }
.foot__sep{ height:1px; background:var(--hairline); margin-top:32px; }
.foot__sep--m{ display:none; }
.foot__bar{ display:flex; justify-content:space-between; gap:16px; padding-block:32px; font-size:var(--fs-caption); color:var(--ink-2); }
@media (max-width:1023px){ .foot__id{ padding-top:44px; } .foot__logo{ height:44px; } .foot__col{ padding-top:60px; }
  /* le bouton d'appel flottant (56px à 16px du bas) ne recouvre jamais la barre du bas */
  .foot__bar{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); } }
@media (max-width:1023px) and (min-width:768px){
  .foot__grid{ gap:24px; grid-template-columns:minmax(0,1fr) max-content minmax(0,1.1fr); font-size:.9375rem; }
  .foot__links a,.foot__parent{ white-space:nowrap; }
}
@media (max-width:767px){
  .foot__map{ height:280px; }
  .proof--ergo{ height:20px; }
  .proof--qe{ height:62px; }
  .foot__grid{ grid-template-columns:1fr; gap:0; }
  .foot__col{ padding-top:0; }
  .foot__col + .foot__col{ margin-top:32px; }
  .foot__sep--m{ display:block; margin-block:32px; }
  /* barre empilée à gauche : le bouton d'appel flottant, à droite, ne la recouvre pas ; pas besoin de la réserve de 88px */
  .foot__bar{ flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:calc(32px + env(safe-area-inset-bottom)); }   /* chaque ligne serrée sur son texte : pas de lien pleine largeur */
}

/* ==========================================================================
   Gabarit des pages prestations (V1)
   ========================================================================== */
/* lien texte dans un paragraphe : accent, souligné, survol visible */
.tlink{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; transition:color var(--dur) var(--ease); }
.tlink:hover{ color:var(--ink); }

/* S2 Alternance image / texte : texte 42 %, image le reste ; l'image vient d'abord dans le DOM (au-dessus en mobile) */
.alt{ display:flex; flex-direction:column; gap:96px; }
.alt__blk{ display:grid; grid-template-columns:minmax(0,42fr) minmax(0,58fr); gap:64px; align-items:center; }
.alt__blk .alt__img{ grid-column:2; grid-row:1; }
.alt__blk .alt__txt{ grid-column:1; grid-row:1; }
.alt__blk--rev{ grid-template-columns:minmax(0,58fr) minmax(0,42fr); }
.alt__blk--rev .alt__img{ grid-column:1; }
.alt__blk--rev .alt__txt{ grid-column:2; }
.alt__img{ position:relative; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); }
.alt__img::before{ content:""; display:block; padding-top:100%; }   /* carré côte à côte : la hauteur du texte voisin (taille finale, 06/10) ; réservée sans aspect-ratio (Safari) */
.alt__img .ph,.alt__img img{ position:absolute; inset:0; }
.alt__img img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }   /* image IA : carré côte à côte, 4:3 empilé ; pas de zoom, l'alternance n'est pas cliquable (contrôle final) */
.alt__txt{ min-width:0; }
.alt__p{ margin-top:16px; color:var(--ink-2); }
/* item à icône, format rangée : icône nue à gauche, titre puis texte, filet inséré aligné sur le retrait du texte */
.irows{ list-style:none; margin:24px 0 0; padding:0; }
.irow{ position:relative; display:flex; align-items:flex-start; gap:16px; padding-block:16px; }
.irow + .irow::before{ content:""; position:absolute; top:0; left:40px; right:0; height:1px; background:var(--hairline); }
.iric{ width:24px; height:24px; flex:0 0 auto; margin-top:1px; color:var(--water-icon); }
.irow__txt{ min-width:0; }
.irow__txt h4{ font-family:var(--f-body); font-weight:600; font-size:var(--fs-body); line-height:1.5; color:var(--ink); }
.irow__txt p{ margin-top:4px; color:var(--ink-2); }
@media (max-width:1023px){
  .alt{ gap:64px; }
  .alt__blk,.alt__blk--rev{ grid-template-columns:1fr; gap:32px; }
  .alt__blk .alt__img,.alt__blk .alt__txt{ grid-column:1; grid-row:auto; }
  .alt__img::before{ padding-top:75%; }   /* empilé : 4:3, tablette et mobile */
}
@media (max-width:767px){
  .alt{ gap:48px; }
  .alt__blk,.alt__blk--rev{ gap:24px; }
  .iric{ width:20px; height:20px; margin-top:2px; }
  .irow + .irow::before{ left:36px; }
}

/* S4 Frise numérotée : chiffre dans un rond, ligne au dégradé signature dans son sens (bleu → eau), dernier rond plein du dégradé */
.frise{ position:relative; max-width:1040px; margin-inline:auto; }
.frise__list{ list-style:none; margin:0; padding:0; position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.frise__st{ display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; }
.frise__txt{ display:flex; flex-direction:column; gap:8px; }
.frise__txt p{ color:var(--ink-2); }
.frise__n{ flex:0 0 auto; width:48px; height:48px; border-radius:50%; border:2px solid; background:var(--bg);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-title); font-weight:700; font-size:1.25rem;
  line-height:1; color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }
/* même sens que le dégradé signature des pastilles d'icônes : du bleu de l'accent au vert eau (06/10, Nicolas) */
.frise__st:nth-child(1) .frise__n{ border-color:var(--blue); }
.frise__st:nth-child(2) .frise__n{ border-color:#267D94; }
.frise__st:nth-child(3) .frise__n{ position:relative; isolation:isolate; border-color:transparent; background:none; color:var(--bg); }   /* le point fort */
/* son plein : le dégradé signature des pastilles d'icônes (bleu en haut à gauche, vert en bas à droite), sur un calque pour qu'il
   apparaisse en fondu au passage de la ligne (un dégradé ne s'anime pas) ; chiffre clair à ~4,5:1 au centre */
.frise__st:nth-child(3) .frise__n::before{ content:""; position:absolute; inset:-2px; z-index:-1; border-radius:50%; background:var(--grad-signature); }
/* la ligne court du centre du 1er rond au centre du dernier, jamais au-delà (colonnes égales, 32px de gouttière) */
.frise__line{ position:absolute; z-index:0; top:23px; left:calc((100% - 64px) / 6); right:calc((100% - 64px) / 6); height:2px;
  background:linear-gradient(90deg,var(--blue),var(--water)); transform-origin:left center; }
@media (max-width:767px){
  .frise__list{ grid-template-columns:1fr; gap:32px; }
  .frise__st{ flex-direction:row; align-items:flex-start; gap:16px; text-align:left; }
  .frise__txt{ padding-top:6px; }
  .frise__n{ width:40px; height:40px; font-size:1.125rem; }
  /* verticale : calée par le JS entre le centre du 1er et du dernier rond */
  .frise__line{ left:19px; right:auto; width:2px; height:var(--fl-h,0px); top:var(--fl-top,20px);
    background:linear-gradient(180deg,var(--blue),var(--water)); transform-origin:center top; }
}

/* S3 En pratique : LA section de contraste des pages prestations (aplat d'accent), item à icône inversé */
.sec-when.sec-contrast .eyebrow,.sec-when.sec-contrast h2,.sec-when.sec-contrast h3{ color:var(--bg); }
.sec-when.sec-contrast .guar__txt p{ color:var(--blue-soft); }   /* jamais le gris secondaire sur l'aplat */
.sec-when.sec-contrast .gic{ color:var(--water-soft); }          /* même série, en trait clair */
.sec-when.sec-contrast .guar__it + .guar__it::before{ background:var(--line-on-accent); }
.sec-when.sec-contrast .guar__it:hover{ background:rgba(244,247,247,.08); }
.sec-contrast :focus-visible{ outline-color:var(--bg); }

/* S5 Preuve : split dès 1024px. À gauche l'argument, tout aligné à gauche (logo s'il y en a un, sur-titre, titre, texte),
   à droite le carrousel d'avis (une carte premium à la fois). Calés en haut, jamais centrés verticalement : ni la colonne
   de gauche, ni les flèches, ni le haut de la carte ne bougent d'un avis à l'autre. En dessous de 1024px, ils s'empilent. */
.proof__split{ display:flex; flex-direction:column; gap:64px; }
@media (min-width:1024px){
  .proof__split{ display:grid; grid-template-columns:400px minmax(0,1fr); column-gap:64px; align-items:start; }
}
.sec-proof .shead{ margin-bottom:0; }
.sec-proof .lead{ max-width:70ch; }
.proof__pill{ display:flex; margin-top:32px; }   /* sous le texte : rien de la section au-dessus du sur-titre (10/10) */
.proof__pill img{ box-sizing:content-box; height:72px; width:auto; padding:16px 24px; background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-card); }
.proof__pill--ergo img{ height:30px; padding:37px 28px; }   /* mot large et bas : même présence que le bloc Qualifelec */
@media (min-width:1200px){
  .proof__pill img{ height:88px; }
  .proof__pill--ergo img{ height:34px; padding:43px 30px; }
}
.proof__call{ display:flex; margin-top:32px; }
.rvs{ min-width:0; }
/* flèches au-dessus de la carte, à droite, 16px au-dessus de son bord haut (la piste rend ses 8px d'ombre du haut) */
.rvs__nav{ display:flex; justify-content:flex-end; gap:12px; margin-bottom:16px; }
/* piste qui défile au doigt (aimantation), une carte par cran ; la hauteur suit la carte affichée (réglée par le JS),
   le haut étant fixe, elle ne grandit ou ne rétrécit que vers le bas, et ne rétrécit qu'une fois la carte arrêtée */
.rvs__track{ display:flex; align-items:flex-start; gap:48px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; overscroll-behavior-x:contain; scrollbar-width:none; margin:-8px -24px -40px; padding:8px 24px 40px;   /* le bas réservé à l'ombre ne s'ajoute pas à la section */
  scroll-padding-inline:24px; transition:height var(--dur) var(--ease); }
.rvs__track::-webkit-scrollbar{ display:none; }
.rvs__track:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; border-radius:var(--r-card); }
.rvs__track > .rv{ flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; }
.rvs__btn{ width:48px; height:48px; border-radius:50%; border:1.5px solid var(--blue); background:var(--card); color:var(--blue);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),opacity var(--dur) var(--ease),transform var(--dur) var(--ease); }
.rvs__btn .ic{ width:22px; height:22px; }
.rvs__btn:hover:not(:disabled){ background:var(--blue); color:var(--bg); transform:translateY(-2px); }
.rvs__btn:disabled{ opacity:.35; cursor:default; }
/* carte d'avis premium : plus d'air, verbatim un cran plus grand, bordure complète au dégradé signature */
.rv--xl{ position:relative; padding:48px; gap:24px; border:1.5px solid transparent;   /* épaisseur du contour des flèches */
  background:linear-gradient(var(--card),var(--card)) padding-box, var(--grad-signature) border-box; }
.rv--xl .rv__av{ width:56px; height:56px; font-size:1.5rem; }
.rv--xl .rv__name{ font-size:1.125rem; }
.rv--xl .stars--sm .star{ width:18px; height:18px; }
.rv--xl .rv__g .g-g{ width:22px; height:22px; }
.rv--xl .rv__txt{ font-family:var(--f-title); font-weight:500; font-size:var(--fs-lead); line-height:1.6; }
@media (max-width:767px){
  .proof__split{ gap:48px; }
  .rvs__track{ margin-inline:0; padding-inline:0; scroll-padding-inline:0; gap:32px; }   /* aucune marge négative horizontale */
  .rv--xl{ padding:32px 24px; gap:24px; }
  .rv--xl .rv__txt{ font-size:var(--fs-body); }
  .proof__pill img{ height:56px; }
  .proof__pill--ergo img{ height:24px; padding:30px 24px; }
}

/* ==========================================================================
   Réalisations : galerie filtrable par prestation (V1)
   ========================================================================== */
.sec-gal .shead{ margin-bottom:32px; }
.gal__bar{ display:none; margin-bottom:32px; }
html.js .gal__bar{ display:block; }   /* sans JS : toutes les cartes visibles, filtres masqués */
.gal__scroll{ overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; padding-block:8px; margin-block:-4px; }   /* place pour l'anneau de focus */
.gal__scroll::-webkit-scrollbar{ display:none; }
.gal__chips{ display:flex; gap:8px; width:max-content; margin-inline:auto; }   /* une seule ligne, centrée tant qu'elle tient */
.chip{ flex:0 0 auto; scroll-snap-align:start; min-height:44px; padding:10px 14px; border-radius:var(--r-pill);
  background:rgba(221,233,245,.7); color:var(--blue); font-weight:500; font-size:.9375rem; line-height:1.4; white-space:nowrap;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease); }
.chip:hover{ background:var(--blue-soft); }
.chip[aria-pressed="true"]{ background:var(--blue); color:var(--bg); }
.gal{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:start; transition:opacity var(--dur) var(--ease); }
.gal.is-fading{ opacity:0; }
.gal .rcard{ width:auto; }
.gal__empty{ padding:48px 16px; text-align:center; }
.gal__empty p{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-2); }
.gal__more{ display:flex; justify-content:center; margin-top:32px; }
@media (max-width:1023px){
  .gal{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* une ligne qui défile au doigt : marge de départ à gauche, pastille coupée au bord droit */
  .gal__scroll{ margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad); scroll-padding-inline:var(--pad); }
  .gal__chips{ margin-inline:0; }
}
@media (max-width:767px){ .gal{ grid-template-columns:1fr; } }

/* ---------- Contact : bande d'urgence sous le planning ---------- */
.urg{ display:flex; align-items:center; gap:10px; margin-top:16px; padding:12px 16px; border-radius:10px;
  background:var(--blue-soft); color:var(--blue); font-weight:600; line-height:1.4; }
.urg .ic{ width:20px; height:20px; color:var(--water-icon); }

/* ==========================================================================
   Pages légales : hero légal + contenu en colonne de lecture sur fond uni (V1)
   ========================================================================== */
.lhero{ min-height:0; padding-block:64px; }
.lhero__date{ font-size:var(--fs-caption); line-height:1.5; color:var(--ink-2); }
.lhero__date--ghost{ visibility:hidden; }
.lhero--doc::before{ display:none; }   /* Mentions légales et Politique : pas de logo en filigrane dans le hero */   /* Mentions légales : même hauteur de hero que la politique (qui porte sa date) */
.sec-legal{ background:var(--bg); }
.sec-legal::before{ display:none; }   /* pas de grain : fond uni */
.legal{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:48px; }
.legal__part h2{ display:flex; align-items:baseline; gap:12px; font-size:var(--fs-h3); font-weight:600; line-height:1.3; margin-bottom:16px; }
.legal__n{ font-family:var(--f-body); font-weight:700; color:var(--blue); font-size:1rem; }
.legal__part p,.legal__list{ font-size:var(--fs-lead); line-height:1.6; color:rgba(20,33,58,.8); }
.legal__part p + p,.legal__part p + .legal__list,.legal__list + p{ margin-top:14px; }
.legal__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.legal__list li{ position:relative; padding-left:18px; }
.legal__list li::before{ content:""; position:absolute; left:0; top:.68em; width:6px; height:6px; border-radius:50%; background:var(--blue); }
.legal strong{ font-weight:600; color:var(--ink); }
.legal a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; transition:color var(--dur) var(--ease); }
.legal a:hover{ color:var(--ink); }
@media (max-width:767px){ .lhero{ padding-block:48px; } }

/* ---------- 404 : rangées en liens vers les prestations, deux colonnes ---------- */
.lrows{ max-width:760px; margin-inline:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,auto);
  grid-auto-flow:column; column-gap:32px; }
.lrow{ position:relative; display:flex; align-items:center; gap:12px; min-height:64px; padding:8px 12px; border-radius:var(--r-btn);
  font-weight:600; color:var(--ink); transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease); }
.lrow + .lrow::before{ content:""; position:absolute; top:0; left:12px; right:12px; height:1px; background:var(--hairline); }
.lrow:nth-child(5)::before{ display:none; }   /* tête de la seconde colonne */
.lrow__t{ flex:1 1 auto; }
.lrow__go{ width:20px; height:20px; color:var(--blue); transition:transform var(--dur) var(--ease); }
.lrow:hover{ background:rgba(30,90,156,.06); color:var(--blue); }
.lrow:hover .lrow__go{ transform:translateX(4px); }
.lrows__home{ display:flex; justify-content:center; margin-top:48px; }
@media (max-width:767px){
  .lrows{ grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; }
  .lrow:nth-child(5)::before{ display:block; }
}

/* Zones cliquables de 44px sous 1024px (liens du footer, carte Coordonnées) : la zone de clic s'agrandit sans toucher à la mise en page */
@media (max-width:1023px){
  .foot__links a,.foot__info a,.foot__btnlink,.foot__bar a,.icard a{ position:relative; }
  .foot__links a::after,.foot__info a::after,.foot__btnlink::after,.foot__bar a::after,.icard a::after{
    content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }
}

/* ---------- Bouton d'appel flottant (secteur bâtiment) : sous 1024px seulement ---------- */
.fcall{ display:none; }
@media (max-width:1023px){
  .fcall{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:60; width:56px; height:56px;
    border-radius:50%; background:var(--blue); color:var(--bg); display:flex; align-items:center; justify-content:center;
    box-shadow:var(--sh-card);
    transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease),transform var(--dur) var(--ease),filter var(--dur) var(--ease); }
  .fcall:hover{ filter:brightness(.88); }
  .fcall .ic{ width:24px; height:24px; }
  .fcall:active{ transform:scale(.94); }
  .fcall:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
  .fcall.is-off,html.fc-wait .fcall{ opacity:0; visibility:hidden; pointer-events:none; }   /* fc-wait : tant que le JS n'a pas statué */
}

/* ---------- Bandeau cookies : barre en bas, jamais une modale ---------- */
.ckb{ position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--bg); color:var(--ink);
  box-shadow:0 -1px 2px rgba(20,33,58,.06),0 -10px 28px rgba(20,33,58,.12);
  padding-bottom:env(safe-area-inset-bottom); opacity:0; transition:opacity var(--dur) var(--ease); }
.ckb.is-in{ opacity:1; }
body{ padding-bottom:var(--ckb-h,0px); }   /* pendant le choix, le bas de page reste atteignable au-dessus du bandeau */
/* grille : le texte et la rangée de boutons ; le détail (catégories) s'ouvre au-dessus de cette rangée, sur la largeur de la barre */
.ckb__in{ max-width:var(--container-header); display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"txt btns";
  align-items:center; column-gap:32px; row-gap:16px; padding-block:16px; }
.ckb.is-open .ckb__in{ grid-template-areas:"prefs prefs" "txt btns"; }
.ckb__txt{ grid-area:txt; }
.ckb__prefs{ grid-area:prefs; display:flex; flex-direction:column; }
.ckb__prefs[hidden]{ display:none; }
.ckb__btns{ grid-area:btns; }
.ckb__pref{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:8px; }
.ckb__pref + .ckb__pref::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--hairline); }
.ckb__pref-txt{ font-size:1rem; line-height:1.5; color:var(--ink-2); }
.ckb__pref-txt strong{ font-weight:600; color:var(--ink); }
/* interrupteur : piste en filet au repos, en accent activé ; zone cliquable de 44px */
.ckb__sw{ position:relative; flex:0 0 auto; width:56px; height:44px; padding:0; background:none; border:0; cursor:pointer; }
.ckb__sw::before{ content:""; position:absolute; left:6px; top:12px; width:44px; height:24px; border-radius:999px; background:var(--hairline);
  transition:background-color var(--dur) var(--ease); }
.ckb__knob{ position:absolute; left:9px; top:15px; width:18px; height:18px; border-radius:50%; background:var(--bg); box-shadow:0 1px 3px rgba(20,33,58,.25);
  transition:transform var(--dur) var(--ease); }
.ckb__sw[aria-checked="true"]::before{ background:var(--blue); }
.ckb__sw[aria-checked="true"] .ckb__knob{ transform:translateX(20px); }
.ckb__sw:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; border-radius:999px; }
/* « Personnaliser » : lien texte souligné en accent, à gauche des deux boutons */
.ckb__more{ min-height:44px; padding:0 4px; background:none; border:0; color:var(--blue); font:inherit; font-size:1rem; font-weight:500;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; transition:color var(--dur) var(--ease); }
.ckb__more:hover{ color:var(--ink); }
.ckb__more[hidden],.ckb__save[hidden]{ display:none; }
.ckb__txt{ flex:1 1 auto; min-width:0; display:flex; align-items:flex-start; gap:12px; font-size:1rem; line-height:1.5; }
.ckb__ic{ width:20px; height:20px; margin-top:2px; color:var(--blue); }
.ckb__txt a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; white-space:nowrap; transition:color var(--dur) var(--ease); }   /* le lien ne se coupe jamais en deux lignes */
.ckb__txt a:hover{ color:var(--ink); }
.ckb__btns{ display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.ckb__btns .btn{ min-height:44px; padding:10px 18px; }
/* tablette et ordinateur : la barre prend à l'écran la même part qu'en mobile (environ un quart de la hauteur), au lieu d'un
   mince filet qu'on ne voyait pas : texte au-dessus en taille de chapô, boutons à taille normale dessous, marges calées sur la
   hauteur d'écran. Elle ne bloque toujours rien : pas de voile, le site reste lisible et cliquable (Nicolas, 12/10) */
@media (min-width:768px){
  /* un quart de la hauteur d'écran, contenu centré dedans ; la marge de 24px ne joue que si le contenu dépasse ce quart */
  .ckb__in{ grid-template-columns:minmax(0,1fr); grid-template-areas:"txt" "btns"; row-gap:28px; padding-block:24px; min-height:25vh; align-content:center; }
  .ckb.is-open .ckb__in{ grid-template-areas:"txt" "prefs" "btns"; }
  .ckb__txt{ gap:14px; font-size:var(--fs-lead); line-height:1.55; max-width:62ch; text-wrap:pretty; }
  .ckb__ic{ width:24px; height:24px; margin-top:3px; }
  .ckb__btns{ justify-content:flex-start; gap:16px; }
  .ckb__btns .btn{ min-height:52px; padding:14px 28px; }
  .ckb__pref-txt{ font-size:1.0625rem; }
  .ckb__more{ font-size:1.0625rem; }
}
@media (max-width:767px){
  /* compacte, collée en bas : texte au-dessus, deux boutons à largeur égale dessous (aucune base flex héritée de l'horizontal) */
  .ckb__in{ grid-template-columns:minmax(0,1fr); grid-template-areas:"txt" "btns"; row-gap:12px; padding:16px;
    min-height:25vh; min-height:25dvh; align-content:center; }   /* au moins un quart de l'écran, comme sur tablette et ordinateur */
  .ckb.is-open .ckb__in{ grid-template-areas:"txt" "prefs" "btns"; }
  .ckb__txt{ font-size:.875rem; }   /* mobile : 14px garde la barre compacte */
  .ckb__pref-txt{ font-size:.875rem; }
  .ckb__btns{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .ckb__btns .btn{ padding-inline:12px; }
  .ckb__more{ grid-column:1 / -1; grid-row:2; justify-self:center; font-size:.875rem; }   /* centré sous les deux boutons */
  .ckb__save{ grid-column:1 / -1; grid-row:2; }   /* détail ouvert : « Enregistrer mes choix » en pleine largeur sous les deux autres */
}

/* ==========================================================================
   Effets : montés en dernier (Phase finale)
   ========================================================================== */
/* Reveal au scroll, au niveau du composant, en cascade (html.js-ready posé par le JS si data-fx="1") */
html.js-ready [data-reveal]{ opacity:0; transform:translateY(30px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease); }
html.js-ready [data-reveal].is-in{ opacity:1; transform:none; }
html.js-ready .tile[data-reveal]{ transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); }
html.js-ready .tile.is-in:hover{ transform:translateY(-4px); }
html.js-ready .guar__it[data-reveal]{ transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),background-color var(--dur) var(--ease); }
html.js-ready .lrow[data-reveal]{ transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease); }
/* Hero d'accueil pinné : effet rideau (le corps remonte d'un bloc par-dessus) */
.hero--pin{ position:sticky; top:0; z-index:0; }
.page-flow{ position:relative; z-index:2; background:var(--bg); }

/* Entrée au chargement (livraison) : barre d'annonce et header entrent EN BLOC, fond compris ; le hero pinné en fondu seul.
   Pas de remplissage « after » : à la fin de l'animation le transform disparaît et le header redevient sticky. */
@keyframes vee-drop{ from{ transform:translateY(-100%); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes vee-fade{ from{ opacity:0; } to{ opacity:1; } }
html.fx-in .annonce{ animation:vee-drop .7s var(--ease) backwards; }
html.fx-in .hdr{ animation:vee-drop .7s var(--ease) .08s backwards; }
html.fx-in .hero,html.fx-in .phero{ animation:vee-fade .8s var(--ease) .2s backwards; }
html.fx-in .hscroll{ animation:vee-fade .8s var(--ease) 1s backwards; }   /* dernier temps de l'entrée, après les textes du hero */

/* Frise : la ligne se déroule à l'entrée dans la vue (~1,5 s), les ronds prennent leur couleur à son passage */
html.js-ready .frise__line{ transform:scaleX(0); transition:transform 1.5s var(--ease); }
html.js-ready .frise.is-drawn .frise__line{ transform:none; }
html.js-ready .frise__n{ transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease); }
html.js-ready .frise:not(.is-drawn) .frise__n{ border-color:var(--hairline); background:var(--bg); color:var(--ink); }
html.js-ready .frise.is-drawn .frise__st:nth-child(2) .frise__n{ transition-delay:.7s; }
html.js-ready .frise.is-drawn .frise__st:nth-child(3) .frise__n{ transition-delay:1.4s; }
html.js-ready .frise__n::before{ transition:opacity var(--dur) var(--ease); }
html.js-ready .frise:not(.is-drawn) .frise__n::before{ opacity:0; }
html.js-ready .frise.is-drawn .frise__st:nth-child(3) .frise__n::before{ transition-delay:1.4s; }
@media (max-width:767px){ html.js-ready .frise__line{ transform:scaleY(0); } }

/* Bouton d'appel flottant : halo léger, un anneau qui s'élargit et s'efface, courte pause entre deux battements */
@media (max-width:1023px){
  .fcall::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:50%; background:var(--blue);
    animation:vee-halo 2.8s var(--ease) infinite; pointer-events:none; }
}
@keyframes vee-halo{ 0%{ transform:scale(1); opacity:.35; } 86%{ transform:scale(1.4); opacity:0; } 100%{ transform:scale(1.4); opacity:0; } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important;
    animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  html{ scroll-behavior:auto; }
  .tk.run{ animation:none !important; }
  html.js-ready [data-reveal]{ opacity:1 !important; transform:none !important; }
  .tile:hover .tile__img img,.rcard:hover .rcard__img img,.rcard:hover .rcard__img .ph{ transform:none; }   /* zoom coupé, pas seulement instantané */
  .annonce__in{ overflow-x:auto; }
  .fcall::before{ display:none; }                           /* le rond reste, sans halo */
  .hscroll__line::after{ animation:none !important; transform:translateY(75%); }   /* lueur figée au milieu de la ligne */
  .rcard__img .ph{ transform:none !important; }             /* pas de zoom */
}