/* ==========================================================================
   PG Plomberie : site.css (Nicolam Studio)
   Bleu pétrole du logo (confiance), corail du robinet (ce qui se clique et ce qui se compte), sur un blanc cassé chaud.
   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) : Zilla Slab 600/700, Source Sans 3 400/600/700, latin ---------- */
@font-face{ font-family:"Zilla Slab"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/zilla-slab-600-latin.woff2") format("woff2"); }
@font-face{ font-family:"Zilla Slab"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/zilla-slab-700-latin.woff2") format("woff2"); }
@font-face{ font-family:"Source Sans 3"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/source-sans-3-400-latin.woff2") format("woff2"); }
@font-face{ font-family:"Source Sans 3"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/source-sans-3-600-latin.woff2") format("woff2"); }
@font-face{ font-family:"Source Sans 3"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/source-sans-3-700-latin.woff2") format("woff2"); }

/* ---------- Tokens (Invariants du prompt) ---------- */
:root{
  /* Couleurs — deux teintes par couleur */
  --bg:#F7F5F1;             /* fond, blanc cassé chaud, jamais blanc pur ; footer uni */
  --petrol:#225369;         /* principale soutenue : titres d'accent, aplats (contraste, barre d'annonce), bouton secondaire bordé */
  --petrol-light:#E4EDF1;   /* principale claire : fonds de sections, fonds de cartes, placeholders */
  --corail:#BB3D3A;         /* secondaire soutenue : toutes les actions, toutes les icônes Lucide, chiffres, sur-titres. Le #C2403D du prompt, approfondi d'un cran
                               pour l'AA sur le fond bleu clair des sections (4,6:1 sur #E4EDF1, 5,0:1 sur le fond, texte clair dessus 5,0:1) */
  --corail-light:#FBE5E2;   /* secondaire claire : fonds d'icônes, filets d'accent, zone de la carte */
  --ink:#16252D;            /* texte (14,8:1 sur le fond) */
  --ink-2:#4E5D66;          /* texte secondaire (6,3:1 sur le fond, AA) */
  --gold:#F2B01E;           /* jaune Google : note et étoiles UNIQUEMENT, le même partout */
  --error:#B42318;
  --grad:linear-gradient(135deg,#225369,#C2403D);           /* dégradé signature, composants uniquement, jamais inversé */
  --fond-section:linear-gradient(180deg,#F7F5F1,#E4EDF1);
  --hairline:rgba(22,37,45,.14);
  --card:#FDFCFA;           /* surface des tuiles, cartes et formulaires posés sur les sections (distincte du fond de section) */
  --on-acc:#F7F5F1;         /* texte clair sur le bleu pétrole (7,7:1) et sur le corail (5,1:1) */
  /* Notes de maquette : Note = carmin + info */
  --note-ink:#9E1F42; --note-txt:#7A2038; --note-bg:rgba(158,31,66,.06); --note-bd:rgba(158,31,66,.32);
  /* Espacements (échelle unique) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  /* Rayons (coins doux, choisis une fois pour tout le site) */
  --r-btn:10px; --r-card:16px; --r-pill:999px;
  /* Conteneurs */
  --container:1200px; --container-header:1320px; --form-max:720px; --faq-max:760px; --pad:24px;
  /* Barre d'annonce + header */
  --ann-h:40px; --hdr-h:88px; --stack-h:calc(var(--ann-h) + var(--hdr-h));
  /* Typographie */
  --f-title:'Zilla Slab',Georgia,serif;
  --f-body:'Source Sans 3',system-ui,sans-serif;
  --fs-h1:clamp(2.25rem,1.5rem + 3vw,3.75rem);
  --fs-h2:clamp(1.75rem,1.35rem + 1.6vw,2.625rem);
  --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --fs-h4:1.0625rem;
  --fs-lead:clamp(1.125rem,1.05rem + .3vw,1.1875rem);
  --fs-body:clamp(1rem,.97rem + .15vw,1.0625rem);
  --fs-caption:.875rem; --fs-over:.8125rem;
  /* Ombre : une seule pour tout le site, teinte texte foncé #16252D, niveau présent, liseré clair (boutons à part) */
  --sh-card:inset 0 1px 0 rgba(255,252,247,.7),0 1px 2px rgba(22,37,45,.08),0 6px 16px rgba(22,37,45,.09),0 18px 40px rgba(22,37,45,.08);
  --sh-soft:0 1px 2px rgba(22,37,45,.06),0 4px 12px rgba(22,37,45,.09);
  /* Mouvement : ease-in-out partout ; .6s pour les états, .9s pour l'apparition au scroll (0,4 s est le minimum, pas la cible) */
  --ease:ease-in-out; --dur:.6s; --dur-in:.9s;
  /* Tickers : exactement les mêmes réglages pour les trois */
  --tk-lead:96px; --tk-gap:24px; --tk-fade:24px;
}
@media (max-width:1023px){ :root{ --hdr-h:76px; } }
@media (max-width:767px){ :root{ --pad:16px; --tk-fade:16px; --hdr-h:68px; } }

/* ---------- 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(--corail); color:#F7F5F1; }
:focus-visible{ outline:2px solid var(--corail); 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 : pretty ; balance seulement sur un titre centré */
h1,h2,h3,h4{ font-family:var(--f-title); color:var(--ink); text-wrap:pretty; font-feature-settings:"lnum" 1; }
.center h2,.hero h1,.phero h1{ 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.12; letter-spacing:-.015em; }
h3{ font-weight:600; font-size:var(--fs-h3); line-height:1.25; letter-spacing:-.01em; }
h4{ font-weight:600; font-size:var(--fs-h4); line-height:1.3; }
/* le nom de l'entreprise dans le H1 : dégradé signature horizontal, #225369 → #C2403D, jamais inversé */
.h1-name{ background:linear-gradient(90deg,#225369,#C2403D); -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap; padding-block:.1em; }
.eyebrow{ display:inline-block; font-family:var(--f-body); font-weight:600; font-size:var(--fs-over); line-height:1.4;
  letter-spacing:.12em; text-transform:uppercase; color:var(--petrol); }
.lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-2); }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; isolation:isolate; padding:96px 0; }
.section > .container{ position:relative; z-index:1; }
.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; } }
/* flux des fonds : A = #F7F5F1, B = #E4EDF1 (attribué par flow() au build, bords calés) */
.bg-ab{ background:linear-gradient(180deg,#F7F5F1,#E4EDF1); }
.bg-ba{ background:linear-gradient(180deg,#E4EDF1,#F7F5F1); }
.bg-aba{ background:linear-gradient(180deg,#F7F5F1,#E4EDF1 50%,#F7F5F1); }
.bg-bab{ background:linear-gradient(180deg,#E4EDF1,#F7F5F1 50%,#E4EDF1); }

.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{ max-width:70ch; margin-inline:auto; text-wrap:balance; }
@media (max-width:767px){ .shead{ margin-bottom:32px; } }

/* ---------- Icônes ---------- */
.ic{ width:20px; height:20px; flex:0 0 auto; }
.kic{ width:44px; height:44px; flex:0 0 auto; }

/* ---------- 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(--corail); color:var(--on-acc); box-shadow:0 6px 16px rgba(120,32,30,.22); }   /* corail plein, texte #F7F5F1 (5,1:1) */
.btn--primary:hover{ filter:brightness(.92); box-shadow:0 10px 22px rgba(120,32,30,.26); }
.btn--primary:active{ filter:brightness(.86); }
.btn--ghost{ color:var(--petrol); border-color:var(--petrol); background:transparent; }   /* bouton secondaire bordé de bleu pétrole, bordure franche */
.btn--ghost:hover{ background:rgba(34,83,105,.07); }
.btn--ghost:active{ background:rgba(34,83,105,.12); }
.btn--text{ color:var(--corail); padding-inline:22px; border-color:transparent; }   /* même retrait que le texte d'un ghost : les deux libellés s'alignent */
.btn--text:hover{ background:rgba(194,64,61,.08); }

/* ---------- Barre d'annonce : dégradé vertical de bleu pétrole, opaque, texte clair ---------- */
.annonce{ position:relative; z-index:51; height:var(--ann-h); display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(180deg,#2B6580 0%,#225369 55%,#1D4759 100%); color:var(--on-acc); }
.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:.9375rem; font-weight:600; line-height:1; white-space:nowrap; }
.annonce li .ic{ width:16px; height:16px; color:var(--corail-light); }
.annonce li.sep{ opacity:.7; }
.annonce .tk > .annonce__set[aria-hidden]{ display:none; }
@media (max-width:709px){   /* bascule mesurée sur la ligne réelle (689px nécessaires, voir site.js BP_ANN) : en dessous, ticker, vide de lecture 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); }
  /* au raccord, le point médian saute : c'est le vide de lecture qui sépare la boucle */
}

/* ---------- Ticker (mécanique commune aux trois) ---------- */
.tk{ display:flex; }
.tk.run{ animation:tk var(--tk-dur,30s) linear infinite; will-change:transform; }
.tk--rev.run{ animation-name:tk-rev; }
.tk.paused{ animation-play-state:paused; }
@keyframes tk{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes tk-rev{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.tk__set{ display:flex; gap:var(--tk-gap); padding-left:var(--tk-lead); flex:0 0 auto; }
.tk-mask{ -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); }

/* ---------- Header : verre blanc cassé densifié, un seul état, séparation par l'ombre seule ---------- */
.hdr{ position:sticky; top:0; z-index:50; }
.hdr__bar{ position:relative; height:var(--hdr-h);
  background:linear-gradient(180deg,rgba(247,245,241,.94),rgba(247,245,241,.78));
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 2px rgba(22,37,45,.07),0 8px 22px rgba(22,37,45,.09); }
.hdr__bar::after{ content:""; position:absolute; inset:0; background:var(--bg); opacity:0; pointer-events:none;
  transition:opacity .4s 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; min-height:44px; border-radius:var(--r-btn); transition:opacity var(--dur) var(--ease); }
.hdr__logo:hover{ opacity:.85; }
.hdr__img{ width:76px; height:76px; }
.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:600; font-size:1.0625rem; color:var(--ink);
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.nav__link:hover{ background:rgba(194,64,61,.07); color:var(--corail); }
.nav__link[aria-current="page"],.nav__toggle[data-current]{ color:var(--corail); }
.nav__link .ic{ width:16px; height:16px; color:var(--corail); transition:transform var(--dur) var(--ease); }
.nav__has{ position:relative; }
.nav__toggle[aria-expanded="true"] .ic{ transform:rotate(180deg); }
/* overlay desktop : fond plein, pastille + titre + description empilés */
.submenu{ position:absolute; top:calc(50% + var(--hdr-h) / 2 + 8px); left:50%; min-width:440px; padding:8px; display:flex; flex-direction:column; gap:2px;
  background:var(--bg); 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:-40px; height:40px; }
.nav__has:hover .submenu,.submenu.is-open{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.submenu a{ display:flex; align-items:center; gap:12px; padding:8px 14px 8px 8px; border-radius:var(--r-btn); color:var(--ink);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease); }
.submenu a:hover,.submenu a[aria-current]{ background:var(--petrol-light); }
.submenu a:hover .submenu__t,.submenu a[aria-current] .submenu__t{ color:var(--corail); }
.submenu__txt{ display:block; min-width:0; }
.submenu__t{ display:block; font-weight:600; font-size:1rem; line-height:1.3; white-space:nowrap; transition:color var(--dur) var(--ease); }
.submenu__d{ display:block; font-size:var(--fs-caption); line-height:1.4; color:var(--ink-2); white-space:nowrap; }
/* icône clé dans la MÊME pastille que le bento (.tile__chip), à l'échelle du menu : 40 / 22px */
.kchip{ flex:0 0 auto; width:40px; height:40px; border-radius:10px; background:var(--grad);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(22,37,45,.16),0 4px 10px rgba(194,64,61,.2),inset 0 1px 0 rgba(255,252,247,.3); }
.kchip .kic{ width:22px; height:22px; color:#F7F5F1; }
.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(22,37,45,.22); align-items:center; justify-content:center; color:var(--corail);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.burger:hover{ background:rgba(194,64,61,.07); border-color:var(--corail); }
.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{ width:64px; height:64px; } }
@media (max-width:767px){ .hdr__img{ width:58px; height:58px; } }
@media (max-width:899px){   /* bascule burger mesurée sur le contenu réel (878px nécessaires, voir site.js BP_NAV) */
  .nav,.hdr__cta{ display:none; }
  .burger{ display:inline-flex; }
  .hdr__panel{ display:block; position:absolute; top:100%; left:0; right:0; z-index:2; background:var(--bg);
    box-shadow:0 12px 24px rgba(22,37,45,.12); max-height:0; overflow:hidden; visibility:hidden; opacity:0;
    transition:max-height .5s var(--ease),opacity .4s var(--ease),visibility .5s var(--ease); }
  .hdr.is-open .hdr__panel{ max-height:calc(100svh - var(--stack-h)); overflow-y:auto; visibility:visible; opacity:1; }
  .hdr__panel .container{ display:flex; flex-direction:column; gap:4px; padding-block:16px 32px; }
  .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:600; font-size:1.0625rem; 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{ background:var(--petrol-light); color:var(--corail); }
  .hdr__panel a[aria-current]:not(.btn),.macc__btn[data-current]{ color:var(--corail); }
  .macc__btn{ width:100%; justify-content:space-between; }
  .macc__btn .ic{ width:18px; height:18px; color:var(--corail); transition:transform var(--dur) 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) var(--ease),visibility var(--dur) var(--ease); }
  .macc.is-open .macc__panel{ grid-template-rows:1fr; visibility:visible; }
  .macc__in{ overflow:hidden; min-height:0; display:flex; flex-direction:column; }
  .hdr__panel .macc__in a:not(.btn){ display:flex; align-items:center; gap:12px; height:48px; min-height:48px; padding:0 8px 0 20px; font-weight:600; }
  .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 : placeholder clair (radial bleu pétrole clair + logo en filigrane, sans légende), contenu centré ---------- */
.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(--ink); }
.hero__media{ position:absolute; inset:0; z-index:-1; }
.hero__media--ph{ background:radial-gradient(80% 85% at 50% 50%,#F7F5F1 0%,#F7F5F1 30%,#E4EDF1 100%); }
.hero__media--ph::before{ content:""; position:absolute; inset:0; opacity:.05;
  background:url("/assets/img/logo-motif.webp") no-repeat center / min(50%,500px) auto; }
.hero__in{ width:100%; max-width:var(--container); display:flex; flex-direction:column; align-items:center; gap:24px; }
.hero__tag{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-2); text-wrap:balance; }
.hero__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:8px; }
/* Pastille Google, version claire (texte foncé) : verre clair, une seule ligne, s'arrête aux étoiles */
.gpill{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 12px; border-radius:var(--r-pill);
  background:rgba(253,252,250,.6); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(22,37,45,.12); box-shadow:var(--sh-soft); white-space:nowrap; }
.gpill .g-g{ width:20px; height:20px; flex:0 0 auto; }
.gpill__n{ font-family:var(--f-body); font-weight:700; font-size:1rem; line-height:1; color:var(--gold); font-variant-numeric:tabular-nums lining-nums; }
/* étoiles à la note réelle : copie grise dessous, or dessus découpé (la cinquième aux neuf dixièmes) */
.stars{ --sz:18px; display:inline-flex; align-items:center; gap:2px; }
.st{ position:relative; display:block; flex:0 0 auto; width:var(--sz); height:var(--sz); }
.st .star{ position:absolute; left:0; top:0; width:var(--sz); height:var(--sz); fill:var(--gold); stroke:var(--gold); stroke-width:1.5; stroke-linejoin:round; }
.st .star--e{ fill:rgba(22,37,45,.16); stroke:rgba(22,37,45,.16); }
.st__f{ position:absolute; left:0; top:0; bottom:0; overflow:hidden; }
.gpill .stars{ --sz:16px; }
@media (max-width:767px){
  .hero{ padding-block:64px; }
  .gpill{ padding:6px 12px 6px 10px; gap:8px; }
  .gpill .g-g{ width:16px; height:16px; }
  .gpill__n{ font-size:.875rem; }
  .gpill .stars{ --sz:13px; }
}
@media (max-width:479px){ .hero__cta{ flex-direction:column; align-self:stretch; } .hero__cta .btn{ width:100%; } }
@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); } }
}

/* ---------- Hero de page : radial clair + motif logo, H1 + tagline seuls ---------- */
.phero{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:center;
  text-align:center; min-height:clamp(340px,46svh,480px); padding:96px var(--pad);
  background:radial-gradient(75% 95% at 50% 50%,#F7F5F1 0%,#F7F5F1 26%,#E4EDF1 100%); }
.phero::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.07;
  background:url("/assets/img/logo-motif.webp") no-repeat center / min(38%,380px) auto; }
.phero__in{ width:100%; max-width:var(--container); display:flex; flex-direction:column; align-items:center; gap:16px; }
.phero h1{ font-size:clamp(1.875rem,1.25rem + 2.4vw,3.25rem); line-height:1.1; }
.phero__tag{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-2); max-width:min(100%,60rem); text-wrap:balance; }
@media (max-width:767px){ .phero{ padding-block:64px; min-height:300px; } .phero::before{ background-size:min(70%,280px) auto; } }

/* ---------- Placeholder image : logo du client, radial bleu pétrole clair, légende en pastille ---------- */
.ph{ position:relative; overflow:hidden; background:radial-gradient(80% 80% at 50% 48%,#F7F5F1 0%,#E4EDF1 100%); }
.ph::before{ content:""; position:absolute; inset:0; opacity:.16;
  background:url("/assets/img/logo-motif.webp") no-repeat center 46% / min(46%,190px) auto; }
.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(247,245,241,.94); color:var(--ink-2);
  font-size:var(--fs-caption); line-height:1.4; box-shadow:var(--sh-soft); }

/* ---------- Notes de maquette ---------- */
.note-wrap{ margin-top:48px; }
.note-wrap.is-center .mnote{ margin-inline:auto; }
.mnote{ display:flex; gap:16px; align-items:flex-start; max-width:760px; padding:16px 24px; border-radius:var(--r-card); border:1px solid;
  background:linear-gradient(var(--note-bg),var(--note-bg)),var(--bg); border-color:var(--note-bd); color:var(--note-ink); }
.mnote .ic{ width:22px; height:22px; margin-top:1px; }
.mnote__label{ display:block; font-weight:600; font-size:var(--fs-over); letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; line-height:1.4; }
.mnote p{ font-size:1rem; line-height:1.55; color:var(--note-txt); }
.sec-note .mnote{ margin-inline:auto; max-width:760px; }
/* section de contraste : la note reste SOUS la carte, en carte Note lisible sur l'aplat */
.sec-contrast .mnote{ background:rgba(247,245,241,.08); border-color:rgba(247,245,241,.45); color:#F7F5F1; }
.sec-contrast .mnote p{ color:#F7F5F1; }
@media (max-width:767px){ .note-wrap{ margin-top:32px; } .mnote{ padding:16px; gap:12px; } }

/* ---------- S2 Prestations : bento asymétrique, 10 colonnes (4 + 3 + 3), Débouchage et curage en bandeau ---------- */
.sec-prest .container{ container-type:inline-size; }
.bento{ display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:24px;
  --tile-img:calc(((100cqw - 216px) * .3 + 48px) / 1.5); }   /* hauteur d'image = largeur de la petite tuile ÷ 1,5 (ratio 3/2) */
.t-dom{ grid-column:span 4; }
.t-sm{ grid-column:span 3; }
.t-band{ grid-column:1 / -1; }
.tile{ display:flex; flex-direction:column; border-radius:var(--r-card); background:var(--card);
  box-shadow:var(--sh-card); color:var(--ink); cursor:pointer; }
.tile__img{ position:relative; height:var(--tile-img); flex:0 0 auto; }   /* hauteur FIXE, identique pour toutes les tuiles */
.tile__clip{ position:absolute; inset:0; overflow:hidden; border-radius:var(--r-card) var(--r-card) 0 0; }
.tile__clip .ph{ position:absolute; inset:0; transition:transform 1.2s var(--ease); }
.tile:hover .tile__clip .ph,.tile:focus-visible .tile__clip .ph{ transform:scale(1.04); }
.tile__img .ph__cap{ top:12px; bottom:auto; }
.tile__img .ph::before{ background-size:auto 56%; background-position:50% 62%; }   /* légende en haut à gauche : la pastille occupe le bas à gauche */
.tile__chip{ position:absolute; left:32px; bottom:-28px; z-index:1; width:56px; height:56px; border-radius:12px; background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(22,37,45,.14),0 6px 14px rgba(194,64,61,.24),inset 0 1px 0 rgba(255,252,247,.3); }
.tile__chip .kic{ width:32px; height:32px; color:#F7F5F1; }
.tile__body{ flex:1 1 auto; display:flex; flex-direction:column; padding:48px 32px 32px; }   /* 48 = débord 28 + 20 */
.tile__txt{ display:flex; flex-direction:column; gap:8px; }
.tile__txt p{ color:var(--ink-2); }
.tile__more{ display:inline-flex; align-items:center; gap:8px; align-self:flex-end; margin-top:auto; padding-top:20px; font-weight:600; color:var(--corail); }
.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); }
@media (min-width:1024px){
  /* bandeau : image à gauche (largeur exacte de la tuile dominante, juste au-dessus), texte à droite, pastille à cheval sur la jonction */
  .tile.t-band{ flex-direction:row; }
  .t-band .tile__img{ flex:0 0 calc((100cqw - 216px) * .4 + 72px); height:auto; min-height:var(--tile-img); }
  .t-band .tile__clip{ border-radius:var(--r-card) 0 0 var(--r-card); }
  .t-band .tile__chip{ left:auto; right:-28px; bottom:auto; top:calc(32px + var(--fs-h3) * .625 - 28px); }   /* centrée sur la ligne du titre */
  .t-band .tile__body{ padding:32px 32px 32px 64px; }
}
@media (max-width:1023px){
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); --tile-img:calc((100cqw - 24px) / 2 / 1.5); }
  .t-dom,.t-band{ grid-column:1 / -1; }
  .t-sm{ grid-column:auto; }
}
@media (max-width:767px){
  .bento{ grid-template-columns:1fr; --tile-img:calc(100cqw / 1.5); }
  .t-dom,.t-sm,.t-band{ grid-column:auto; }
}

/* ---------- S3 Réalisations : ticker d'ambiance de cartes projet portrait ---------- */
.rtk{ position:relative; overflow:hidden; padding-block:14px 56px; margin-top:-14px; }
.rtk .tk{ width:max-content; }
.rcard{ flex:0 0 auto; width:280px; display:flex; flex-direction:column; background:var(--bg); 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 */
.rcard__img .ph{ position:absolute; inset:0; transition:transform 1.2s var(--ease); }
.rcard:hover .rcard__img .ph,.rcard:focus-visible .rcard__img .ph{ transform:scale(1.04); }
.rcard__body{ flex:1 1 auto; display:flex; flex-direction:column; gap:8px; padding:16px 20px 20px; }
.rcard__cat{ font-weight:600; font-size:var(--fs-over); line-height:1.4; letter-spacing:.1em; text-transform:uppercase; color:var(--petrol); }
.rcard__t{ font-size:1.25rem; line-height:1.25; min-height:2.5em; }   /* deux lignes réservées ; la commune reste calée en bas de toutes les cartes */
.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; color:var(--corail); }
.is-ph{ font-style:italic; }
h3.is-ph{ color:var(--ink-2); }
.after-tk{ display:flex; justify-content:flex-start; margin-top:-8px; }   /* 56px de padding du ticker − 8px = 48px (32px en mobile) */
@media (max-width:1023px){ .rcard{ width:260px; } .rcard__t{ font-size:1.125rem; } }
@media (max-width:767px){ .rcard{ width:240px; } .rcard__body{ padding:16px; } .rcard__t{ font-size:1.0625rem; } .after-tk{ margin-top:-24px; } }

/* ---------- S4 Garanties : items à icône (grille) + bandeau de confiance en emplacements réservés ---------- */
.egrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; }
.eitem{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:16px; }   /* format grille : icône au-dessus, titre puis texte, alignés à gauche */
.eitem > .ic{ width:40px; height:40px; color:var(--corail); }
.eitem__txt{ display:flex; flex-direction:column; gap:8px; }
.eitem__txt p{ color:var(--ink-2); }
.trust{ display:flex; justify-content:center; gap:48px; margin-top:64px; }
.trust__slot{ flex:0 0 auto; width:180px; height:96px; border-radius:var(--r-btn); border:1.5px dashed rgba(22,37,45,.28); background:rgba(247,245,241,.5); }
@media (max-width:1023px){ .egrid{ gap:32px; } }
@media (max-width:767px){
  .egrid{ grid-template-columns:1fr; gap:24px; }
  .eitem{ flex-direction:row; align-items:flex-start; gap:16px; }   /* mobile : format rangée, même retrait d'une rangée à l'autre */
  .eitem > .ic{ width:32px; height:32px; }
  .trust{ gap:16px; margin-top:48px; }
  .trust__slot{ width:calc((100% - 16px) / 2); max-width:180px; height:auto; aspect-ratio:15 / 8; }
}

/* ---------- S5 Présentation et zone : aplat bleu pétrole, une seule carte 2 × 2 ---------- */
.sec-contrast{ background:var(--petrol); color:var(--on-acc); }
.sec-contrast::before{ opacity:.03; }   /* grain un cran plus discret */
.card{ background:var(--card); color:var(--ink); border-radius:var(--r-card); box-shadow:var(--sh-card); padding:48px; }
.who.card{ background:var(--bg); }
/* une seule carte en 2 × 2 : présentation (texte puis bande de stats) | portrait, puis carte | villes.
   La bande de stats est un bloc à part de la colonne de présentation : en tablette elle prend toute la largeur de la carte (trois cellules tiennent). */
.who{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-areas:"bio photo" "stats photo" "map cities";
  column-gap:48px; align-items:center; }
.who__bio{ grid-area:bio; align-self:end; }
.who__stats{ grid-area:stats; align-self:start; margin-top:32px; }
.who__photo{ grid-area:photo; }
.who__map{ grid-area:map; margin-top:48px; }
.who__cities{ grid-area:cities; margin-top:48px; }
.who__bio h2{ margin-top:16px; }
.who__p{ display:flex; flex-direction:column; gap:16px; margin-top:24px; }
.who__p p{ color:var(--ink-2); }
.who__pclip{ position:relative; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); }
.who__pclip::before{ content:""; display:block; padding-top:125%; }   /* 4/5 */
.who__pclip .ph{ position:absolute; inset:0; }
.who__h{ font-size:var(--fs-h3); }
.crows{ list-style:none; margin:16px 0 0; padding:0; }
.crow{ position:relative; display:flex; align-items:flex-start; gap:12px; min-height:48px; padding-block:12px; font-weight:600; line-height:1.4; color:var(--ink); }
.crow .ic{ width:20px; height:20px; flex:none; margin-top:2px; color:var(--corail); }
.crow + .crow::before{ content:""; position:absolute; top:0; left:32px; right:0; height:1px; background:var(--hairline); }   /* filet inséré à l'aplomb du nom */
/* bande de stats nue, sous les paragraphes */
.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.stat{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; }
.stat__n{ font-family:var(--f-body); font-weight:700; font-size:clamp(2.5rem,1.9rem + 2.2vw,3.5rem); line-height:1; letter-spacing:-.02em;
  color:var(--corail); font-variant-numeric:tabular-nums lining-nums; }
.stat__l{ font-weight:600; font-size:1rem; line-height:1.4; color:var(--ink-2); white-space:nowrap; }
@media (min-width:1024px) and (max-width:1099px){ .who__stats.stats{ column-gap:8px; } }
@media (max-width:359px){ .stat__l{ font-size:.9375rem; } }
@media (max-width:1023px){
  .who{ column-gap:32px; grid-template-areas:"bio photo" "stats stats" "map cities"; }
  .who__bio{ align-self:center; }
  .who__map,.who__cities{ margin-top:32px; }
}
@media (max-width:767px){
  .who.card{ padding:32px 24px; }
  .who{ grid-template-columns:minmax(0,1fr); grid-template-areas:"photo" "bio" "stats" "map" "cities"; }
  .who__bio{ margin-top:32px; }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
  .stat:last-child{ grid-column:1 / -1; }
  .who__stats .stat:last-child{ grid-column:auto; }
  .who__stats .stat:first-child{ grid-column:1 / -1; order:3; }
}
/* carte de localisation (mécanique On Off Électricité) : vrais contours, terre découpée par le trait de côte,
   frontières intérieures seulement, zone de 40 km à l'échelle réelle, étiquettes en HTML à l'échelle de la carte */
.zmap{ position:relative; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); background:#D5E3E9; container-type:inline-size; }
.zmap::before{ content:""; display:block; padding-top:80%; }   /* cadre 5:4 */
.zmap svg{ position:absolute; inset:0; width:100%; height:100%; }
.zmap .sea{ fill:#D5E3E9; }                 /* mer : bleu pétrole clair appuyé, distinct de la terre d'un coup d'œil */
.zmap .dep{ fill:#F7F5F1; }                 /* terre : couleur de fond */
.zmap .zone{ fill:var(--corail-light); }    /* zone : teinte claire de l'accent, sur la terre seulement */
.zmap .dep-l{ fill:none; stroke:rgba(22,37,45,.2); stroke-width:1; vector-effect:non-scaling-stroke; }
.zmap .coast{ fill:none; stroke:rgba(34,83,105,.4); stroke-width:1; vector-effect:non-scaling-stroke; }
.zmap .ring{ fill:none; stroke:var(--corail); stroke-width:1.5; stroke-dasharray:6 5; vector-effect:non-scaling-stroke; }
.mpt{ position:absolute; left:var(--x); top:var(--y); width:0; height:0; z-index:1; font-size:clamp(10px, 2.5cqw, .9375rem); }
.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(247,245,241,.95); }
.mpt .pin{ position:absolute; width:2.7692em; height:2.7692em; left:-1.3846em; top:-2.5385em; fill:var(--corail); stroke:#F7F5F1; stroke-width:1.5;
  filter:drop-shadow(0 3px 5px rgba(22,37,45,.3)); }
.mpt .pin circle{ fill:#F7F5F1; stroke:none; }
.lbl{ position:absolute; white-space:nowrap; line-height:1; border-radius:var(--r-pill); padding:.3846em .6923em;
  font-size:1em; font-weight:600; color:var(--ink); background:rgba(247,245,241,.96); box-shadow:var(--sh-soft); }
.mpt--main .lbl{ font-size:1.0769em; font-weight:700; color:var(--corail); padding:.4286em .7143em; }
.lbl[data-d="top"]{ left:0; bottom:2.35em; transform:translateX(calc(-50% + var(--lx,0em))); }
.lbl[data-d="right"]{ left:.9231em; top:0; transform:translateY(-50%); }
.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%); }
.mpt--main .lbl[data-d="top"]{ bottom:2.6em; }
@media (max-width:767px){
  .zmap::before{ padding-top:100%; }   /* carré, viewBox recadré autour du siège par le JS (data-vbm) */
  /* pin et points à leur propre échelle, plancher plus bas que les étiquettes : le pin ne touche jamais le point voisin quand la carte rétrécit */
  .mpt{ left:var(--xm); top:var(--ym); --b:clamp(7px, 3.4cqw, .875rem); font-size:var(--b); }
  .mpt .lbl{ font-size:max(10px, var(--b)); }
  .mpt--main .lbl{ font-size:max(10.77px, calc(var(--b) * 1.0769)); }
  .lbl[data-d]{ left:auto; right:auto; top:auto; bottom:auto; transform:none; }
  .lbl[data-m="top"]{ left:0; bottom:2.35em; transform:translateX(calc(-50% + var(--lxm,0em))); }
  .mpt--main .lbl[data-m="top"]{ bottom:calc(var(--b) * 2.4 + 4px); }   /* 4px au-dessus de la tête du pin */
  .lbl[data-m="right"]{ left:.8333em; top:0; transform:translateY(-50%); }
  .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%); }
}

/* ---------- S6 Avis : bloc note + ticker deux rangées en sens inverse ---------- */
.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-body); font-weight:700; font-size:2.75rem; line-height:1; letter-spacing:-.02em;
  color:var(--gold); font-variant-numeric:tabular-nums lining-nums; }
.rating .stars{ --sz:24px; }
.rating__l2{ display:flex; align-items:center; gap:10px; }
.rating__c{ font-weight:600; font-size:1.0625rem; color:var(--ink); }
.g-word{ height:24px; width:auto; }
.atk{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:var(--tk-gap); padding-block:14px 56px; margin-top:-14px; }
.atk .tk{ width:max-content; }
/* carte d'avis : largeur ET hauteur fixes (hauteur calée par le JS sur le plus long des avis, au palier courant), verbatim toujours entier */
.rv{ flex:0 0 auto; width:360px; height:var(--rv-h,auto); display:flex; flex-direction:column; gap:16px; padding:24px;
  background:var(--card); color:var(--ink); border-radius:var(--r-card); box-shadow:var(--sh-card); }
.rv__head{ display:flex; align-items:flex-start; gap:12px; }
.rv__av{ width:44px; height:44px; flex:0 0 auto; border-radius:50%; background:var(--grad); color:#F7F5F1;
  display:flex; align-items:center; justify-content:center; font-family:var(--f-body); font-weight:700; font-size:1.125rem; }
.rv__who{ display:flex; flex-direction:column; gap:4px; flex:1 1 auto; min-width:0; }
.rv__name{ font-weight:700; font-size:1rem; line-height:22px; }
.stars--sm{ --sz:15px; }
.rv__g{ flex:0 0 auto; margin-top:2px; line-height:0; }
.rv__g .g-g{ width:20px; height:20px; }
.rv__txt{ color:var(--ink); font-size:1rem; line-height:1.55; }
.rv-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:-8px; }
@media (max-width:1023px){ .rv{ width:340px; } }
@media (max-width:767px){
  .rating__n{ font-size:2.25rem; }
  .rating .stars{ --sz:20px; }
  .rv{ width:300px; padding:20px; }
  .rv-cta{ flex-direction:column; align-items:flex-start; margin-top:-24px; }
}

/* ---------- S7 FAQ : accordéon à filets ---------- */
.faq{ max-width:var(--faq-max); margin-inline:auto; }
.faq__item{ position:relative; }
.faq__item + .faq__item::before{ content:""; position:absolute; top:0; left:16px; right:16px; height:1px; background: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.375rem; line-height:1.3;
  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(--corail); background:rgba(34,83,105,.06); }
.faq__q .ic{ width:22px; height:22px; margin-top:3px; color:var(--corail); 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 54px 24px 16px; }   /* la réponse s'aligne sur la question et s'arrête au niveau du chevron */
.faq__item.is-open .faq__a{ grid-template-rows:1fr; visibility:visible; }
@media (max-width:767px){ .faq__q{ font-size:1.1875rem; padding:16px 8px; } .faq__a p{ padding:0 8px 16px; } .faq__item + .faq__item::before{ left:8px; right:8px; } }

/* ---------- Formulaire de devis (bloc partagé) ---------- */
.fcard--solo{ max-width:var(--form-max); margin-inline:auto; }
.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(22,37,45,.22); border-radius:var(--r-btn); margin:0;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.field textarea{ resize:vertical; min-height:150px; }
.field ::placeholder{ color:#5E6B73; opacity:1; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(22,37,45,.4); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--corail); outline-offset:3px; border-color:var(--corail); }
.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='%23BB3D3A' 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:#5E6B73; }
/* intitulé gris du select : posé par-dessus quand rien n'est choisi */
.sel{ position:relative; }
.sel__ph{ display:none; position:absolute; left:15px; right:44px; top:50%; transform:translateY(-50%); pointer-events:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#5E6B73; font-size:1rem; line-height:1.5; }
.sel:has(select:invalid) .sel__ph{ display:block; }
.sel:has(select:invalid) select{ color:transparent; }
.field select option{ color:var(--ink); }
@media (max-width:419px){ .field select{ padding-right:36px; background-position:right 12px center; background-size:16px; } .sel__ph{ right:36px; } }
.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); }
.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:48px; border-radius:var(--r-btn);
  border:1.5px dashed rgba(22,37,45,.3); background:var(--bg); color:var(--corail);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.file__zone .ic{ width:22px; height:22px; }
.file__input:hover + .file__zone{ background:var(--corail-light); border-color:var(--corail); }
.file__input:focus-visible + .file__zone{ outline:2px solid var(--corail); 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:48px; padding:2px 2px 2px 14px; border-radius:var(--r-btn);
  border:1px solid rgba(22,37,45,.22); background:var(--bg); }
.file__chosen > .ic{ width:18px; height:18px; color:var(--corail); }
.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(--corail); transition:background-color var(--dur) var(--ease); }
.file__clear:hover{ background:var(--corail-light); }
.form-send{ margin-top:32px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.form-btns{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.form.is-busy .form-send .btn--primary{ 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(--corail); 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-btn); background:var(--petrol-light); 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{ align-items:stretch; }
  .form-btns{ flex-direction:column; align-items:stretch; }
  .form-btns .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(--corail); margin-top:3px; }
.icard a{ cursor:pointer; display:inline-block; padding-block:10px; margin-block:-10px; overflow-wrap:anywhere; transition:color var(--dur) var(--ease); }
.icard a:hover{ color:var(--corail); }
.hrow{ position:relative; display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.hrow + .hrow{ padding-top:12px; }
.hrow + .hrow::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--hairline); }
.hrow > span:first-child{ white-space:nowrap; font-weight:600; }
.hrow .d{ text-align:right; color:var(--ink-2); }
.urg{ display:flex; gap:12px; align-items:flex-start; margin-top:24px; padding:16px; border-radius:var(--r-btn);
  background:var(--corail-light); color:var(--ink); font-weight:600; font-size:1rem; line-height:1.5; }
.urg span{ text-wrap:balance; }
.urg .ic{ color:var(--corail); margin-top:2px; width:18px; height:18px; }
@media (max-width:1023px){ .cgrid{ grid-template-columns:1fr; gap:24px; } }
@media (max-width:767px){ .icard{ padding:32px 24px; } }

/* ---------- Footer ---------- */
.foot{ background:var(--bg); color:var(--ink); }
.foot__map{ position:relative; height:360px; background:var(--petrol-light); }
.foot__map iframe{ position:absolute; inset:0; display:block; width:100%; height:100%; border:0; }
.foot__id{ padding-top:48px; }
.foot__grid{ display:grid; grid-template-columns:1.3fr 1fr 1.25fr; gap:48px; }
.foot__grid > *{ min-width:0; }
.foot__logolink{ display:inline-flex; border-radius:var(--r-btn); margin-bottom:12px; transition:opacity var(--dur) var(--ease); }
.foot__logolink:hover{ opacity:.85; }
.foot__logo{ width:76px; height:76px; }   /* même taille que dans le header */
.foot__name{ font-size:1.375rem; line-height:1.25; letter-spacing:-.01em; }
.foot__pos{ display:block; font-family:var(--f-body); font-size:1rem; font-weight:600; letter-spacing:0; color:var(--petrol); margin-top:2px; }
.foot__tag{ color:var(--ink-2); margin-top:12px; max-width:40ch; }
.foot__proofs{ display:flex; align-items:center; gap:16px; margin-top:24px; }
.foot__proofs .slot{ flex:0 0 auto; width:80px; height:48px; border-radius:8px; border:1.5px dashed rgba(22,37,45,.26); }
.foot__col{ padding-top:88px; }   /* première ligne au niveau du nom, pas du logo */
.foot__h{ font-family:var(--f-body); font-weight:600; font-size:var(--fs-over); line-height:1.4; letter-spacing:.12em;
  text-transform:uppercase; color:var(--petrol); 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{ cursor:pointer; display:inline-block; padding-block:9px; margin-block:-9px; transition:color var(--dur) var(--ease),transform var(--dur) var(--ease); }
.foot__links a:hover,.foot__info a:hover{ color:var(--corail); transform:translateX(3px); }
.foot__parent{ color:var(--ink); }
.foot__sub{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding-left:16px; }
.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:4px; color:var(--corail); }
.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{ width:64px; height:64px; } .foot__col{ padding-top:76px; }
  /* tablette : la barre du bas est en ligne, le bouton d'appel flottant (56px à 16px du bas) ne la recouvre jamais */
  .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; }
  .foot__proofs{ gap:10px; }
  .foot__proofs .slot{ width:64px; height:40px; }
  .foot__info a[href^="mailto"]{ overflow-wrap:anywhere; }
}
@media (max-width:767px){
  .foot__map{ height:280px; }
  .foot__logo{ width:58px; height:58px; }
  .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 0; }
  .foot__sep--m + .foot__col{ padding-top:32px; }
  /* barre empilée à gauche : le bouton flottant, à droite, ne la recouvre pas ; padding normal */
  .foot__bar{ flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
}
/* 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.
   La tagline passe sur deux lignes choisies, la ligne d'horaires se plie à la largeur de la plus longue des autres lignes : 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--fold > span{ flex:1 1 0; contain:inline-size; } }
@media (min-width:1024px) and (max-width:1199px){ .foot__grid{ font-size:.9375rem; } }

/* ---------- 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(--corail); color:var(--on-acc); display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 2px rgba(22,37,45,.08),0 6px 16px rgba(22,37,45,.09),0 18px 40px rgba(22,37,45,.08);   /* ombre du site sans le liseré clair (boutons à part) */
    transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease),transform var(--dur) var(--ease),filter var(--dur) var(--ease); }
  .fcall .ic{ width:24px; height:24px; }
  .fcall:hover{ filter:brightness(.92); transform:translateY(-2px); }
  .fcall:active{ transform:scale(.94); }
  .hdr.is-open ~ .fcall{ opacity:0; visibility:hidden; pointer-events:none; }
  .fcall.is-off{ opacity:0; visibility:hidden; pointer-events:none; }
  .fcall::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:50%; background:var(--corail);
    animation:fb-halo 2.4s var(--ease) infinite; pointer-events:none; }
}
@keyframes fb-halo{ 0%{ transform:scale(1); opacity:.35; } 80%{ transform:scale(1.4); opacity:0; } 100%{ transform:scale(1.4); opacity:0; } }

/* ==========================================================================
   Effets : montés en dernier (Phase finale)
   ========================================================================== */
html.js-ready [data-reveal]{ opacity:0; transform:translateY(30px);
  transition:opacity var(--dur-in) var(--ease),transform var(--dur-in) var(--ease); }
html.js-ready [data-reveal].is-in{ opacity:1; transform:none; }
.hero--pin{ position:sticky; top:0; z-index:0; }
.page-flow{ position:relative; z-index:2; background:var(--bg); }

/* ---------- 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; }
  .rtk,.atk,.annonce__in{ overflow-x:auto; }
  .tk-mask{ -webkit-mask-image:none; mask-image:none; }
  .tk > .tk__set[aria-hidden],.annonce .tk > .annonce__set[aria-hidden]{ display:none !important; }
  .annonce__in{ -webkit-mask-image:none; mask-image:none; }
  @media (max-width:709px){ .annonce__set{ padding-inline:var(--pad); }
    .annonce__in{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--tk-fade)),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - var(--tk-fade)),transparent); } }
  .fcall::before{ display:none; }
  .rcard__img .ph,.tile__clip .ph{ transform:none !important; }
}