/* ==========================================================================
   Couverture 17 : site.css (Nicolam Studio)
   Le bleu de son nom porte l'action et la confiance, le rouge de son toit les repères, le jaune de son logo ne vit que
   dans le dégradé signature, sur une crème chaude. Aucune bibliothèque CSS chargée : tout le style vit dans cette feuille.
   ========================================================================== */

/* ---------- Polices hébergées sur le site (aucun appel à Google Fonts) : Roboto Slab 600/700, Source Sans 3 400/600/700, latin ---------- */
@font-face{ font-family:"Roboto Slab"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/roboto-slab-600-latin.woff2") format("woff2"); }
@font-face{ font-family:"Roboto Slab"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/roboto-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 */
  --fond:#F6F2EA;            /* crème, fond du site (A du flux) */
  --bleu-clair:#E4EBF5;      /* principale claire (B du flux, placeholders, cartes teintées) */
  --bleu:#1F4F8E;            /* principale soutenue : boutons pleins, sur-titres, lien actif, aplat de contraste, focus */
  --bleu-annonce:#2E62A6;    /* haut du dégradé de la barre d'annonce */
  --rouge-clair:#F6DEDB;     /* secondaire claire : fonds des notes */
  --rouge:#B5302A;           /* secondaire soutenue : repères (chiffres, icônes nues, pin, « Voir la prestation ») */
  --jaune:#F0B323;           /* jaune du logo : uniquement dans le dégradé signature et les suggestions */
  --or:#F2B01E;              /* or des étoiles Google, un seul or sur tout le site */
  --surface:#FFFDF9;         /* fond des cartes */
  --ink:#1B2430;             /* texte */
  --ink-2:#545D6B;           /* texte secondaire (6:1 sur la crème) */
  --erreur:#B42318;
  --filet:rgba(27,36,48,.14);/* hairline */
  --signature:linear-gradient(135deg,#F0B323,#B5302A);
  --nom-h1:linear-gradient(90deg,#B87A06,#B5302A);
  --ph-bord:#EBEEF1;         /* bord du radial des placeholders : 60 % bleu clair + 40 % crème (repli sans color-mix) */
  /* Espacements */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  /* Rayons (coins doux) */
  --r-btn:10px; --r-card:14px; --r-pastille:12px; --r-pill:999px;
  /* Conteneurs */
  --container:1200px; --container-header:1320px; --pad:24px;
  /* Barre d'annonce + header */
  --ann-h:40px; --hdr-h:80px; --stack-h:calc(var(--ann-h) + var(--hdr-h));
  --logo-h:40px;
  /* Ombre (teinte texte foncé, niveau présent) */
  --sh-card:0 1px 2px rgba(27,36,48,.12),0 8px 20px rgba(27,36,48,.10),0 18px 40px rgba(27,36,48,.07),inset 0 1px 0 rgba(255,252,247,.7);
  --sh-soft:0 1px 2px rgba(27,36,48,.10),0 4px 12px rgba(27,36,48,.08),inset 0 1px 0 rgba(255,252,247,.7);
  --sh-btn:0 1px 2px rgba(27,36,48,.16),0 4px 12px rgba(31,79,142,.20);
  /* Mouvement : ease-in-out partout, .4s minimum ; ticker en linear */
  --ease:ease-in-out; --dur:.4s; --dur-in:.9s; --dur-open:.5s; --dur-faq:.4s;
  /* Typographie */
  --f-titre:'Roboto Slab',Georgia,serif;
  --f-texte:'Source Sans 3',system-ui,sans-serif;
  --h1:clamp(2.25rem,1.5rem + 3vw,3.75rem);
  --h1-page:clamp(2rem,1.45rem + 2.2vw,3.125rem);   /* heros de page : toujours sous le H1 de l'accueil */
  --h2:clamp(1.75rem,1.35rem + 1.6vw,2.625rem);
  --h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --h4:1.0625rem;
  --chapo:clamp(1.125rem,1.05rem + .3vw,1.1875rem);
  --corps:clamp(1rem,.97rem + .15vw,1.0625rem);
  --caption:.875rem;
  --surtitre:.8125rem;
  /* Tickers */
  --tk-lead:96px; --tk-gap:24px; --tk-fade:24px;
}
@supports (background:linear-gradient(in oklab,red,blue)){
  :root{
    --signature:linear-gradient(135deg in oklab,#F0B323,#B5302A);
    --nom-h1:linear-gradient(90deg in oklab,#B87A06,#B5302A);
  }
}
@supports (color:color-mix(in oklab,red,blue)){ :root{ --ph-bord:color-mix(in oklab,#E4EBF5 60%,#F6F2EA); } }
@media (max-width:767px){ :root{ --pad:16px; --tk-fade:16px; --tk-gap:16px; --tk-lead:64px; --ann-h:36px; --hdr-h:68px; --logo-h:32px; } }

/* ---------- 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); }   /* « Demander un devis » descend au formulaire, sous le header collant */
body{ margin:0; background:var(--fond); color:var(--ink); overflow-x:clip; font-family:var(--f-texte);
  font-size:var(--corps); 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; }
[hidden]{ display:none !important; }
::selection{ background:var(--bleu); color:var(--fond); }
:focus-visible{ outline:2px solid var(--bleu); 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; }

/* Titres : coupure normale à gauche, balance seulement sur un titre centré ; jamais pretty */
h1,h2,h3,h4{ font-family:var(--f-titre); color:var(--ink); font-weight:600; font-variant-numeric:lining-nums; }
h1{ font-size:var(--h1); font-weight:700; line-height:1.1; letter-spacing:-.015em; }
h2{ font-size:var(--h2); line-height:1.2; letter-spacing:-.015em; }
h3{ font-size:var(--h3); line-height:1.25; }
h4{ font-size:var(--h4); line-height:1.3; }
.center h2,.hero h1,.phero h1{ text-wrap:balance; }
/* « Couverture 17 » dans les H1 : dégradé du nom, horizontal */
.h1-name{ background:var(--nom-h1); -webkit-background-clip:text; background-clip:text; color:transparent; padding-block:.1em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.eyebrow{ display:inline-block; font-family:var(--f-texte); font-weight:700; font-size:var(--surtitre); line-height:1.4;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bleu); }
.lead{ font-size:var(--chapo); line-height:1.55; color:var(--ink-2); }
.is-ph{ font-style:italic; }

/* ---------- 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,.section > .rtk{ position:relative; z-index:1; }
.section.is-tight{ padding-top:48px; }   /* deux sections d'un même thème : écart réduit */
/* grain 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; } .section.is-tight{ padding-top:32px; } }
/* flux des fonds : A = #F6F2EA, B = #E4EBF5 (posé par flow() au build, bords calés) */
.bg-ab{ background:linear-gradient(180deg,#F6F2EA,#E4EBF5); }
.bg-ba{ background:linear-gradient(180deg,#E4EBF5,#F6F2EA); }
.bg-aba{ background:linear-gradient(180deg,#F6F2EA,#E4EBF5 50%,#F6F2EA); }
.bg-bab{ background:linear-gradient(180deg,#E4EBF5,#F6F2EA 50%,#E4EBF5); }

.shead{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:48px; width:fit-content; max-width:100%; }
/* le chapô prend la largeur de son titre : jamais plus étroit (pas de colonne coupée sous un titre qui court sur toute la largeur),
   jamais plus long (pas de lignes à l'infini). L'en-tête se serre sur son titre, le chapô n'y pèse pas (contain) et s'étire dessus. */
.shead .lead{ align-self:stretch; contain:inline-size; min-width:min(100%,40rem); }   /* plancher : ~70 caractères sous un titre court */
.shead.center{ align-items:center; text-align:center; margin-inline:auto; }
.shead.center .lead{ text-wrap:balance; }
.shead__cta{ margin-top:8px; }
@media (max-width:767px){ .shead{ margin-bottom:32px; } }

/* ---------- Icônes (Lucide, trait 1,5) ---------- */
.ic{ width:20px; height:20px; flex:0 0 auto; }
.kic{ width:32px; height:32px; flex:0 0 auto; }

/* ---------- Boutons : deux niveaux, coins doux 10px, icône à droite dans la couleur du libellé ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 24px;
  border-radius:var(--r-btn); border:1.5px solid transparent; white-space:nowrap; font-family:var(--f-texte);
  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:20px; height:20px; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }
/* plein : bleu soutenu uni (le dégradé signature ne passe pas sur les boutons), texte et icône crème */
.btn--primary{ background-color:var(--bleu); color:var(--fond); box-shadow:var(--sh-btn); }
.btn--primary:hover{ filter:brightness(.88); box-shadow:0 2px 4px rgba(27,36,48,.18),0 10px 22px rgba(31,79,142,.26); }
.btn--primary:active{ filter:brightness(.8); }
.btn--ghost{ color:var(--bleu); border-color:var(--bleu); background-color:transparent; }   /* bordure 1,5px franche */
.btn--ghost:hover{ background-color:rgba(31,79,142,.08); }
.btn--ghost:active{ background-color:rgba(31,79,142,.14); }
/* deux boutons côte à côte : sur une ligne tant qu'ils tiennent, sinon empilés en pleine largeur (classe posée par main.js) */
.btn-row{ display:flex; flex-wrap:wrap; gap:16px; }
.btn-row.is-stacked{ flex-direction:column; align-items:stretch; }
.btn-row.is-stacked .btn{ width:100%; }

/* ---------- Barre d'annonce : dégradé vertical du bleu (haut plus clair), opaque, texte et icônes crème ---------- */
.annonce{ position:relative; z-index:51; height:var(--ann-h); display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(180deg,var(--bleu-annonce) 0%,var(--bleu) 100%); color:var(--fond); }
.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:16px; 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:18px; height:18px; color:var(--fond); }
.annonce li.sep{ opacity:.7; }
.annonce .tk > .annonce__set[aria-hidden]{ display:none; }
@media (max-width:799px){   /* bascule mesurée sur la ligne réelle (730px + marges 2 × 24 = 778px nécessaires) : 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); }
  .annonce li.sep:first-child{ display:none; }
}
@media (max-width:767px){ .annonce li{ font-size:.875rem; } .annonce li .ic{ width:16px; height:16px; } }

/* ---------- 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 !important; }
@keyframes tk{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes tk-r{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@keyframes tk-in{ from{ transform:translateX(var(--tk-lead)); } to{ transform:translateX(0); } }   /* ticker de cartes : entrée unique depuis le vide de lecture */
@keyframes tkv-up{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes tkv-down{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
@keyframes tkv-in{ from{ transform:translateY(var(--tk-lead)); } to{ transform:translateY(0); } }

/* ---------- Logo : fichier du client tel quel, à la taille du header ---------- */
.logo{ display:block; height:var(--logo-h); width:auto; }

/* ---------- Header : verre de la crème 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(246,242,234,.94),rgba(246,242,234,.76));
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:var(--sh-soft); }
.hdr__bar::after{ content:""; position:absolute; inset:0; background:var(--fond); opacity:0; pointer-events:none;
  transition:opacity var(--dur-open) 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; }
.nav{ display:flex; align-items:center; gap:8px; 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 16px; 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(31,79,142,.08); color:var(--bleu); }
.nav__link[aria-current="page"],.nav__toggle[data-current]{ color:var(--bleu); }
.nav__link .ic{ width:16px; height:16px; color:var(--bleu); 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:380px; padding:8px; display:flex; flex-direction:column; gap:2px;
  background:var(--surface); 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 16px 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(--bleu-clair); }
.submenu a:hover .submenu__t,.submenu a[aria-current] .submenu__t{ color:var(--bleu); }
.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(--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 ;
   voile encre léger sous le dégradé : le trait crème reste lisible au bout jaune */
.kchip{ flex:0 0 auto; width:40px; height:40px; border-radius:var(--r-pastille);
  background:linear-gradient(rgba(27,36,48,.16),rgba(27,36,48,.16)),var(--signature);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(27,36,48,.16),0 4px 10px rgba(181,48,42,.22),inset 0 1px 0 rgba(255,252,247,.35); }
.kchip .kic{ width:22px; height:22px; color:var(--fond); }
.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(27,36,48,.22); align-items:center; justify-content:center; color:var(--bleu);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.burger:hover{ background:rgba(31,79,142,.08); border-color:var(--bleu); }
.burger .ic{ width:24px; height:24px; }
.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:1019px){   /* bascule burger mesurée : 1013px nécessaires (logo 203 + nav 454 + CTA 212 + gouttières 2 × 24 + 24px d'air de part et d'autre de la nav + marges 2 × 24) */
  .nav,.hdr__cta{ display:none; }
  .burger{ display:inline-flex; }
  /* le panneau se déplie et se replie à sa hauteur exacte (grid-template-rows 0fr → 1fr), sans fondu */
  .hdr__panel{ display:grid; grid-template-rows:0fr; position:absolute; top:100%; left:0; right:0; z-index:2; background:var(--fond);
    box-shadow:0 12px 24px rgba(27,36,48,.12); visibility:hidden;
    transition:grid-template-rows var(--dur-open) var(--ease),visibility 0s linear var(--dur-open); }
  .hdr.is-open .hdr__panel{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows var(--dur-open) var(--ease),visibility 0s; }
  .hdr__scroll{ min-height:0; max-height:calc(100svh - var(--stack-h)); overflow:hidden; }
  .hdr.is-open .hdr__scroll{ overflow-y:auto; }
  .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(--bleu-clair); color:var(--bleu); }
  .hdr__panel a[aria-current]:not(.btn),.macc__btn[data-current]{ color:var(--bleu); }
  .macc__btn{ width:100%; justify-content:space-between; }
  .macc__btn .ic{ width:20px; height:20px; color:var(--bleu); transition:transform var(--dur-open) 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-open) var(--ease),visibility 0s linear var(--dur-open); }
  .macc.is-open .macc__panel{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows var(--dur-open) var(--ease),visibility 0s; }
  .macc__in{ overflow:hidden; min-height:0; display:flex; flex-direction:column; }
  /* sous-liens alignés à gauche comme les liens de premier niveau ; le titre seul, sans description */
  .hdr__panel .macc__in a:not(.btn){ display:flex; align-items:center; gap:12px; height:48px; min-height:48px; padding:0 8px; }
  .hdr__panel .kchip{ width:36px; height:36px; }
  .hdr__panel .kchip .kic{ width:20px; height:20px; }
  .hdr__panel .btn{ margin-top:16px; align-self:stretch; }
}

/* ---------- Hero d'accueil : placeholder du site en plein fond (radial bleu clair + logo), 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;
  background:radial-gradient(ellipse at center,var(--bleu-clair) 0%,var(--ph-bord) 100%); }
/* le logo du client en filigrane, très discret derrière le H1 (en toutes lettres, il se lirait sous le titre) */
.hero__media::before,.phero::before{ content:""; position:absolute; inset:0; opacity:.035;
  background:url("/assets/img/couverture-17-logo.svg") no-repeat center 50% / min(78%,860px) auto; }
.hero__in{ width:fit-content; max-width:min(100%,var(--container)); display:flex; flex-direction:column; align-items:center; gap:24px; }
/* la tagline prend la largeur du H1 (jamais coupée en deux sous un titre d'une ligne), la rangée de boutons au minimum */
.hero__tag{ font-size:var(--chapo); line-height:1.55; color:var(--ink-2); align-self:stretch; contain:inline-size; text-wrap:balance; }
.hero__cta{ justify-content:center; margin-top:8px; }
.hero__cta.is-stacked{ align-self:stretch; }
/* Pastille Google : 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(255,253,249,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(27,36,48,.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-texte); font-weight:700; font-size:1.0625rem; line-height:1; color:var(--or); font-variant-numeric:tabular-nums lining-nums; }
.stars{ --sz:18px; display:inline-flex; align-items:center; gap:2px; }
.stars .star,.ostar .star{ width:var(--sz); height:var(--sz); flex:0 0 auto; fill:var(--or); }
.gpill .stars{ --sz:16px; }
@media (max-width:767px){
  .hero{ padding-block:64px; }
  .hero__tag{ max-width:none; text-wrap:wrap; }   /* la tagline remplit la largeur : jamais plus étroite que les boutons */
  .gpill{ padding:6px 12px 6px 10px; gap:8px; }
  .gpill .g-g{ width:16px; height:16px; }
  .gpill__n{ font-size:.9375rem; }
  .gpill .stars{ --sz:13px; }
  .hero__media::before{ background-size:94% auto; }
}
@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 : même radial (centre B) + logo, H1 + tagline seuls ; la section suivante démarre sur B ---------- */
.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(ellipse at center,var(--bleu-clair) 0%,var(--ph-bord) 100%); }
.phero::before{ z-index:-1; }
.phero__in{ width:fit-content; max-width:min(100%,var(--container)); display:flex; flex-direction:column; align-items:center; gap:16px; }
.phero h1{ font-size:var(--h1-page); }
.phero__tag{ font-size:var(--chapo); line-height:1.55; color:var(--ink-2); align-self:stretch; contain:inline-size; text-wrap:balance; }   /* la largeur du H1 */
@media (max-width:767px){ .phero{ padding-block:64px; min-height:300px; } .phero__tag{ max-width:none; } .phero::before{ background-size:94% auto; } }

/* ---------- Placeholder image : logo du client centré (~0,14), radial bleu clair, légende en pastille ---------- */
.ph{ position:relative; overflow:hidden; background:radial-gradient(ellipse at center,var(--bleu-clair) 0%,var(--ph-bord) 100%); }
.ph::before{ content:""; position:absolute; inset:0; opacity:.14;
  background:url("/assets/img/couverture-17-logo.svg") no-repeat center 50% / min(58%,280px) 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:var(--r-pastille); background:rgba(255,253,249,.85); color:var(--ink-2);
  font-size:var(--caption); line-height:1.4; box-shadow:var(--sh-soft); }

/* ---------- Notes de maquette : Note = carmin + info ; Suggestion = ambre + ampoule ---------- */
.note-wrap{ margin-top:48px; }
.note-wrap .mnote,.note-solo .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; color:var(--ink); }
.mnote--note{ border-color:rgba(181,48,42,.35); background:linear-gradient(rgba(246,222,219,.6),rgba(246,222,219,.6)),var(--fond); }
.mnote--sugg{ border-color:rgba(240,179,35,.55); background:linear-gradient(rgba(240,179,35,.14),rgba(240,179,35,.14)),var(--fond); }
.mnote > .ic{ width:24px; height:24px; margin-top:1px; }
.mnote--note > .ic,.mnote--note .mnote__label{ color:var(--rouge); }
.mnote--sugg > .ic,.mnote--sugg .mnote__label{ color:var(--ink); }
.mnote__label{ display:block; font-weight:700; font-size:var(--surtitre); letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px; line-height:1.4; }
.mnote p{ font-size:1rem; line-height:1.55; color:var(--ink); }
@media (max-width:767px){ .note-wrap{ margin-top:32px; } .mnote{ padding:16px; gap:12px; } }

/* ---------- S2 Prestations : bento asymétrique, 10 colonnes ; Couverture en bandeau, puis 5 + 5, 5 + 5 ---------- */
.sec-prest .container{ container-type:inline-size; }
.bento{ display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:24px;
  --half:calc((100cqw - 24px) / 2);         /* largeur de la petite tuile (5 colonnes) */
  --tile-img:calc(var(--half) / 1.5); }     /* hauteur d'image = petite tuile ÷ 1,5 (3/2), la même partout */
.t-half{ grid-column:span 5; }
.tile{ display:flex; flex-direction:column; border-radius:var(--r-card); background:var(--surface);
  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); }   /* un seul effet : le zoom lent de l'image */
.tile__img .ph__cap{ top:12px; bottom:auto; }   /* légende en haut à gauche : la pastille d'icône occupe le bas à gauche */
.tile__chip{ position:absolute; left:32px; bottom:-28px; z-index:1; width:56px; height:56px; border-radius:var(--r-pastille);
  background:linear-gradient(rgba(27,36,48,.16),rgba(27,36,48,.16)),var(--signature);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(27,36,48,.14),0 6px 14px rgba(181,48,42,.26),inset 0 1px 0 rgba(255,252,247,.35); }
.tile__chip .kic{ width:32px; height:32px; color:var(--fond); }
.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:24px; font-weight:600; color:var(--rouge); }
.tile__more .ic{ width:20px; height:20px; transition:transform var(--dur) var(--ease); }
.tile:hover .tile__more .ic,.tile:focus-visible .tile__more .ic{ transform:translateX(4px); }
/* bandeau (ordinateur) : pleine largeur, image à gauche à la largeur exacte de la tuile du dessous, texte à droite,
   pastille à cheval sur la jonction, centrée sur la ligne du titre */
.t-band{ grid-column:1 / -1; display:grid; grid-template-columns:var(--half) minmax(0,1fr); }
.t-band .tile__img{ 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(48px + var(--h3) * .625 - 28px); }
.t-band .tile__body{ padding:48px 32px 32px 56px; }
@media (max-width:1023px){   /* tablette : Couverture redevient une tuile verticale pleine largeur, puis les paires */
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .t-half{ grid-column:auto; }
  .t-band{ display:flex; }
  .t-band .tile__img{ height:var(--tile-img); min-height:0; }
  .t-band .tile__clip{ border-radius:var(--r-card) var(--r-card) 0 0; }
  .t-band .tile__chip{ left:32px; right:auto; top:auto; bottom:-28px; }
  .t-band .tile__body{ padding:48px 32px 32px; }
}
@media (max-width:767px){ .tile__chip,.t-band .tile__chip{ left:24px; } .tile__body,.t-band .tile__body{ padding:48px 24px 24px; } }
@media (max-width:599px){   /* une colonne : tuiles pleine largeur, zone image 3/2 */
  .bento{ grid-template-columns:minmax(0,1fr); --tile-img:calc(100cqw / 1.5); }
}

/* ---------- Ticker de cartes (réalisations, avis) : mêmes réglages ; vertical sous 1024px (fenêtre de 85svh) ---------- */
.rtk{ position:relative; overflow:hidden; padding-block:14px 36px; margin-top:-14px;
  -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); }
.rtk__rows{ display:flex; flex-direction:column; gap:24px; }
.rtk .tk{ width:max-content; }
.rtk .tk__set{ display:flex; gap:var(--tk-gap); padding-right:var(--tk-gap); flex:0 0 auto; }   /* la gouttière après la dernière carte de chaque copie : écart constant au raccord */
.rtk .tk.run[data-row="right"]{ animation-name:tk-r; }
.rtk .tk.run[data-dir="up"]{ animation-name:tkv-up; }
.rtk .tk.run[data-dir="down"]{ animation-name:tkv-down; }
.rtk:not(.is-seen) .tk.run{ animation-play-state:paused !important; }   /* démarre à l'arrivée dans l'écran (main.js) */
@media (max-width:1023px){
  .rtk.is-v{ max-width:var(--container); height:85svh; margin:0 auto; padding:0 var(--pad); overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent);
    mask-image:linear-gradient(180deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent); }
  .rvc{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--tk-gap); align-items:start; }
  .rvc__col{ min-width:0; }
  .rtk.is-v .tk{ flex-direction:column; width:auto; }
  .rtk.is-v .tk__set{ flex-direction:column; padding:0 0 var(--tk-gap); }   /* à la verticale : la gouttière sous la dernière carte de chaque copie */
  .rtk.is-v .rcard,.rtk.is-v .rv{ width:auto; }
  .rtk.is-v .rv{ height:auto; }   /* à la verticale, chaque carte d'avis prend la hauteur de son texte : la hauteur commune ne sert qu'à aligner une rangée horizontale */
  .rtk.is-v .rcard:hover{ transform:none; }
  /* sans JS : les cartes en simple pile, sans défilement horizontal */
  html:not(.js) .rtk{ max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); -webkit-mask-image:none; mask-image:none; }
  html:not(.js) .rtk .tk{ width:auto; flex-direction:column; }
  html:not(.js) .rtk .tk__set{ flex-direction:column; padding-right:0; }
  html:not(.js) .rtk .tk__set[aria-hidden]{ display:none; }
  html:not(.js) .rtk .rcard,html:not(.js) .rtk .rv{ width:auto; }
}
@media (max-width:767px){ .rvc{ grid-template-columns:minmax(0,1fr); } }   /* mobile : une seule colonne qui monte */

/* ---------- S3 Réalisations : cartes projet (variante portfolio de la carte image), 340px en desktop ---------- */
.rcard{ flex:0 0 auto; width:340px; display:flex; flex-direction:column; background:var(--surface); color:var(--ink);
  border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-soft);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); }
.rcard:hover,.rcard:focus-visible{ transform:translateY(-3px); box-shadow:0 2px 4px rgba(27,36,48,.10),0 10px 22px rgba(27,36,48,.12); }   /* un seul effet : le lift réduit, ombre contenue dans le padding du ticker */
.rcard__img{ position:relative; overflow:hidden; }
.rcard__img::before{ content:""; display:block; padding-top:75%; }   /* 4/3 paysage, le format de ses photos */
.rcard__img .ph{ position:absolute; inset:0; }
.rcard__body{ flex:1 1 auto; display:flex; flex-direction:column; gap:8px; padding:24px; }
.rcard__cat{ font-weight:700; font-size:var(--surtitre); line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--bleu); }
.rcard__t{ display:block; font-family:var(--f-titre); font-weight:600; color:var(--ink); font-size:1.1875rem; line-height:1.35; min-height:2.7em; }   /* deux lignes réservées */
.rcard__loc{ margin-top:auto; display:flex; align-items:center; gap:8px; font-size:var(--caption); line-height:1.5; color:var(--ink-2); }
.rcard__loc .ic{ width:16px; height:16px; color:var(--rouge); }
.after-tk{ display:flex; justify-content:center; margin-top:12px; }   /* le padding bas du ticker (36px) + 12px = 48px */
@media (max-width:1023px){ .after-tk{ margin-top:48px; } }
@media (max-width:767px){ .rcard__t{ font-size:1.125rem; } .after-tk{ margin-top:32px; } }

/* ---------- S4 Zone d'intervention : split, en-tête et liste à gauche (~45 %), carte à droite (~55 %) ---------- */
.zone{ display:grid; grid-template-columns:minmax(0,45fr) minmax(0,55fr); grid-template-rows:1fr auto auto 1fr; column-gap:64px; }
.zone__head{ grid-column:1; grid-row:2; margin-bottom:40px; }
.zone__map{ grid-column:2; grid-row:1 / -1; align-self:center; }
.zone__list{ grid-column:1; grid-row:3; }
.zone__list h3{ font-size:var(--h3); }
.crows{ list-style:none; margin:16px 0 0; padding:0; }
.crow{ position:relative; display:flex; align-items:center; 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; color:var(--rouge); }
.crow + .crow::before{ content:""; position:absolute; top:0; left:32px; right:0; height:1px; background:var(--filet); }   /* filet inséré à l'aplomb du nom */
@media (max-width:1023px){
  .zone{ display:block; }
  .zone__head{ margin-bottom:0; }
  .zone__map{ margin-block:48px; }
}
@media (max-width:767px){ .zone__map{ margin-block:32px; } }
@media (max-width:359px){ .zone__head h2{ font-size:1.5rem; } }   /* « Saint-Laurent-de-la-Prée », jamais coupé au tiret, tient dans 288px à 24px */
/* carte de localisation : vrais contours, terre découpée par le trait de côte, frontières intérieures seulement,
   étiquettes en HTML à l'échelle de la carte */
.zmap{ position:relative; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); background:var(--bleu-clair); 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:var(--bleu-clair); }            /* mer : teinte claire du contraste, hachurée */
.zmap .hatch{ stroke:rgba(31,79,142,.16); stroke-width:1.6; }
.zmap .land{ fill:var(--fond); }                 /* terre : couleur de fond */
.zmap .dep-l{ fill:none; stroke:rgba(27,36,48,.2); stroke-width:1; vector-effect:non-scaling-stroke; }
.zmap .coast{ fill:none; stroke:rgba(31,79,142,.4); stroke-width:1; 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.3cqw, 14px); }
.mpt--main{ z-index:2; --pin:clamp(6px, 2.2cqw, 11px); }
.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(246,242,234,.95); }
/* pin du siège à sa propre échelle (base --pin) : tracé Lucide map-pin rempli de rouge, liseré clair, la pointe sur l'ancre */
.mpt .pin{ position:absolute; width:calc(var(--pin) * 3.2); height:calc(var(--pin) * 3.2); left:calc(var(--pin) * -1.6); top:calc(var(--pin) * -2.927);
  overflow:visible; filter:drop-shadow(0 3px 5px rgba(27,36,48,.3)); }
.pin__b{ fill:var(--rouge); stroke:var(--fond); stroke-width:1.4; paint-order:stroke; }
.pin__c{ fill:var(--fond); }
.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(246,242,234,.96); box-shadow:var(--sh-soft); }
.mpt--main .lbl{ font-size:1.0769em; font-weight:700; color:var(--rouge); padding:.4286em .7143em; }
.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%); }
/* siège : étiquette AU-DESSUS du pin, centrée sur lui (Fouras, à l'ouest, et Rochefort, au sud-est, ont leur étiquette de leur côté) */
.mpt--main .lbl--siege{ left:0; bottom:calc(var(--pin) * 3.25); transform:translateX(-50%); }
@media (max-width:767px){
  .zmap::before{ padding-top:100%; }   /* carré, viewBox recadré par main.js (data-vbm) */
  .mpt{ left:var(--xm); top:var(--ym); font-size:clamp(10px, 3.6cqw, 13px); }
  .mpt--main{ --pin:clamp(6px, 2.6cqw, 11px); }
  .lbl[data-d]{ left:auto; right:auto; top:auto; bottom:auto; transform:none; }
  .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%); }
}

/* ---------- S5 Garanties : aplat bleu soutenu (section de contraste), item à icône en grille de trois + emplacements ---------- */
.sec-contrast{ background:var(--bleu); color:var(--fond); }
.sec-contrast::before{ opacity:.03; }   /* grain un cran plus discret */
.sec-contrast .eyebrow{ color:var(--bleu-clair); }
.sec-contrast h2,.sec-contrast h3{ color:var(--fond); }
.ggrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.gitem{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:32px 24px;
  border-radius:var(--r-card); transition:background-color var(--dur) var(--ease); }
.gitem:hover{ background:rgba(246,242,234,.06); }   /* un seul effet : la colonne survolée légèrement teintée */
.gitem + .gitem::before{ content:""; position:absolute; left:0; top:32px; bottom:32px; width:1px; background:rgba(246,242,234,.22); }
.gitem__ic{ width:48px; height:48px; margin-bottom:16px; color:var(--fond); }   /* icône nue, trait crème */
.gitem h3{ text-wrap:balance; }
.gitem p{ color:var(--fond); max-width:34ch; }
/* emplacements réservés au format d'un logo de preuve (décennale, RC pro) : sans logo, sans titre, sans texte */
.slots-wrap{ margin-top:64px; }
.trust{ display:flex; align-items:center; justify-content:center; gap:32px; }
.islot{ display:block; flex:0 0 auto; width:160px; height:80px; border-radius:var(--r-btn); border:1.5px dashed rgba(246,242,234,.5); background:rgba(246,242,234,.12); }
.sec-contrast .note-wrap{ margin-top:64px; }
@media (max-width:767px){
  .slots-wrap,.sec-contrast .note-wrap{ margin-top:48px; }
  .trust{ gap:16px; }
  .islot{ width:136px; height:68px; }
  .gitem{ padding:24px 8px; }
  .gitem__ic{ width:40px; height:40px; }
}
@media (max-width:599px){   /* une colonne : items centrés, filets horizontaux insérés entre eux */
  .ggrid{ grid-template-columns:minmax(0,1fr); }
  .gitem + .gitem::before{ left:24px; right:24px; top:0; bottom:auto; width:auto; height:1px; }
}

/* ---------- S6 L'entreprise : split avec chevauchement, panneau texte sur la photo portrait (4/5), photo à gauche ---------- */
/* composition centrée de 964px : photo 576px, panneau 518px (45 % du conteneur), recouvrement 130px = un quart du panneau */
.split{ display:grid; grid-template-columns:minmax(0,446fr) minmax(0,130fr) minmax(0,388fr); max-width:964px; margin-inline:auto; align-items:stretch; }
.split__img{ grid-column:1 / 3; grid-row:1; position:relative; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); }
.split__img::before{ content:""; display:block; padding-top:125%; }   /* portrait 4/5 */
.split__img .ph{ position:absolute; inset:0; }
.split__img .ph::before{ background-position:38% 40%; background-size:min(50%,240px) auto; }   /* le motif reste dans la partie visible de la photo */
.split__panel{ grid-column:2 / 4; grid-row:1; align-self:center; position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start; padding:48px; background:var(--surface); border-radius:var(--r-card); box-shadow:var(--sh-card); }
.split__panel h2{ margin-top:16px; }
.split__panel p{ margin-top:16px; color:var(--ink-2); }
.split__panel h2 + p{ margin-top:24px; }
@media (max-width:1023px){
  .split{ display:block; max-width:none; }
  .split__img{ height:440px; }
  .split__img::before{ display:none; }
  .split__img .ph::before{ background-position:center 34%; }
  .split__img .ph__cap{ top:16px; bottom:auto; left:16px; }   /* le panneau recouvre le bas de la photo : la légende remonte */
  .split__panel{ margin:-96px 32px 0; }
}
@media (max-width:767px){
  .split__img{ height:320px; }
  .split__img .ph__cap{ top:12px; left:12px; }
  .split__panel{ margin:-48px 16px 0; padding:32px 24px; }   /* recouvrement réduit de moitié, marges négatives verticales seulement */
}
/* bande de stats nue : chiffres posés sur le fond, centrés ; la note Google en or avec une seule étoile */
.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; max-width:964px; margin:64px auto 0; }
.stat{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; }
.stat__n{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-texte); font-weight:700; font-size:clamp(2.75rem,2.2rem + 1.8vw,3.75rem); line-height:1;
  letter-spacing:-.01em; color:var(--rouge); font-variant-numeric:tabular-nums lining-nums; }
.stat__n--g{ color:var(--or); }
.stat__n .star{ width:.5em; height:.5em; fill:var(--or); }
.stat__l{ font-weight:600; font-size:1rem; line-height:1.4; color:var(--ink-2); white-space:nowrap; }
@media (max-width:767px){ .stats{ margin-top:48px; } }
@media (max-width:639px){   /* deux colonnes, 2 en haut / 1 en bas, l'orpheline sur toute la largeur et centrée comme les deux du haut ;
     l'orpheline est « 2006 » : son label (« création de Couverture 17 », 178px) ne tient pas dans une demi-colonne à 375px */
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:32px; }
  .stat:first-child{ grid-column:1 / -1; grid-row:2; }
}

/* ---------- S7 Avis : en-tête à gauche (bloc note), ticker de deux rangées en sens inverse ---------- */
.rating{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:8px; }
.rating__l1{ display:flex; align-items:center; gap:12px; }
.rating__n{ font-family:var(--f-texte); font-weight:700; font-size:2.75rem; line-height:1; letter-spacing:-.01em;
  color:var(--or); 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; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }
.g-word{ height:24px; width:auto; }
.rv{ flex:0 0 auto; width:360px; height:var(--rv-h,auto); display:flex; flex-direction:column; gap:16px; padding:32px;
  background:var(--surface); color:var(--ink); border-radius:var(--r-card); box-shadow:var(--sh-soft); }
.rv__head{ display:flex; align-items:flex-start; gap:12px; }
.rv__av{ width:44px; height:44px; flex:0 0 auto; border-radius:50%; color:var(--fond);
  background:linear-gradient(rgba(27,36,48,.16),rgba(27,36,48,.16)),var(--signature);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-titre); 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:1.0625rem; line-height:1.3; color:var(--ink); }
.stars--sm{ --sz:16px; }
.rv__g{ flex:0 0 auto; line-height:0; }   /* le G seul, calé sur le haut de l'en-tête, jamais collé aux étoiles */
.rv__g .g-g{ width:22px; height:22px; }
.rv__txt{ color:var(--ink); line-height:1.6; white-space:pre-wrap; }   /* verbatim mot pour mot : espaces d'origine conservés */
.rv-cta{ margin-top:12px; }   /* le padding bas du ticker (36px) + 12px = 48px */
@media (max-width:1023px){ .rv-cta{ margin-top:48px; } }
@media (max-width:767px){
  .rating__n{ font-size:2.25rem; }
  .rating .stars{ --sz:20px; }
  .rv{ padding:32px 24px; }
  .rv__g .g-g{ width:30px; height:30px; }
  .rv-cta{ margin-top:32px; }
}

/* ---------- S8 FAQ : accordéon à filets, une colonne centrée ---------- */
.faq{ max-width:760px; 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(--filet); }
.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-titre); font-weight:600; font-size:1.1875rem; line-height:1.4;
  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(--bleu); background:rgba(31,79,142,.06); }
.faq__q .ic{ width:24px; height:24px; margin-top:1px; color:var(--bleu); transition:transform var(--dur-faq) 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-faq) var(--ease),visibility 0s linear var(--dur-faq); }
.faq__a > div{ overflow:hidden; min-height:0; }
.faq__a p{ color:var(--ink-2); padding:0 56px 24px 16px; }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows var(--dur-faq) var(--ease),visibility 0s; }
@media (max-width:767px){ .faq__q{ font-size:1.0625rem; padding:16px 8px; } .faq__a p{ padding:0 8px 16px; } .faq__item + .faq__item::before{ left:8px; right:8px; } }

/* ---------- Formulaire de devis en carte : seul (720px) ou avec coordonnées (7 / 5) ---------- */
.card{ background:var(--surface); color:var(--ink); border-radius:var(--r-card); box-shadow:var(--sh-card); padding:48px; }
.fsolo{ max-width:720px; margin-inline:auto; }
.sec-devis .shead.center h2{ max-width:none; }
.sec-devis .shead__cta{ margin-top:8px; }   /* chapô → « Nous appeler » : 16 + 8 = 24px */
.cgrid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:32px; align-items:start; }
.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:4px; }
.hint{ font-size:var(--caption); line-height:1.5; color:var(--ink-2); }
.field input,.field select,.field textarea{ width:100%; min-height:48px; padding:12px 16px; font:inherit; font-size:1rem; line-height:1.5;
  color:var(--ink); background:var(--surface); border:1px solid rgba(27,36,48,.18); 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:#6A7280; opacity:1; }   /* gris lisible (4,8:1 sur la carte) */
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(27,36,48,.4); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--bleu); outline-offset:3px; border-color:var(--bleu); }
.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='%231F4F8E' stroke-width='1.5' 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 12px center; background-size:20px; }
.field select:invalid{ color:#6A7280; }
.sel{ position:relative; }
.sel__ph{ display:none; position:absolute; left:17px; right:44px; top:50%; transform:translateY(-50%); pointer-events:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#6A7280; 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); }
.err{ display:none; font-size:var(--caption); font-weight:600; line-height:1.4; color:var(--erreur); }
.field.is-err .err{ display:block; }
.field.is-err input,.field.is-err select,.field.is-err textarea{ border-color:var(--erreur); }
.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(27,36,48,.3); background:var(--surface); color:var(--bleu);
  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(--bleu-clair); border-color:var(--bleu); }
.file__input:focus-visible + .file__zone{ outline:2px solid var(--bleu); outline-offset:3px; }
.field.is-err .file__zone{ border-color:var(--erreur); }
.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 16px; border-radius:var(--r-btn);
  border:1px solid rgba(27,36,48,.18); background:var(--surface); }
.file__chosen > .ic{ width:20px; height:20px; color:var(--bleu); }
.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(--bleu); transition:background-color var(--dur) var(--ease); }
.file__clear:hover{ background:var(--bleu-clair); }
.form-send{ margin-top:32px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.form.is-busy .form-send .btn--primary{ opacity:.7; pointer-events:none; }
.form-ko{ font-weight:600; color:var(--erreur); }
.form-foot{ margin-top:16px; font-size:var(--caption); line-height:1.5; color:var(--ink-2); }
.form-foot a{ color:var(--bleu); 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(--bleu-clair); color:var(--ink); font-weight:600; }
.form-ok:focus{ outline:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.icards{ display:flex; flex-direction:column; gap:24px; }
.icard{ padding:32px; }
.icard h3{ margin-bottom:16px; }
.icard__h{ display:flex; align-items:center; gap:12px; }
.icard__h .ic{ width:24px; height:24px; color:var(--rouge); }
.icard__rows{ display:flex; flex-direction:column; gap:12px; }
.icard .row{ display:flex; align-items:flex-start; gap:12px; }
.icard .row .ic{ color:var(--rouge); margin-top:3px; }   /* icônes nues des listes : repères en rouge */
.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(--bleu); }
.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(--filet); }
.hrow > span:first-child{ white-space:nowrap; font-weight:600; }
.hrow .d{ text-align:right; color:var(--ink-2); white-space:nowrap; }
@media (max-width:1023px){ .cgrid{ grid-template-columns:minmax(0,1fr); gap:24px; } }
@media (max-width:767px){
  .card{ padding:32px 24px; }
  .icard{ padding:32px 24px; }
  .form-send{ align-items:stretch; }
  .form-send .btn{ width:100%; }
}

/* ---------- Pages en gabarit ---------- */
.note-solo{ max-width:760px; margin-inline:auto; }

/* ---------- Footer : crème unie, Maps bord à bord, identité en trois colonnes ---------- */
.foot{ background:var(--fond); color:var(--ink); font-size:1rem; }
.foot__map{ position:relative; height:360px; background:var(--bleu-clair); }
.foot__map iframe{ position:absolute; inset:0; display:block; width:100%; height:100%; border:0; }
.foot__id{ padding-top:48px; }
.foot__grid > *{ min-width:0; }
.foot__logolink{ display:inline-flex; margin-bottom:16px; border-radius:var(--r-btn); transition:opacity var(--dur) var(--ease); }
.foot__logolink:hover{ opacity:.85; }
.foot__name{ font-size:1.375rem; line-height:1.25; letter-spacing:-.01em; color:var(--ink); }
.foot__pos{ display:block; font-family:var(--f-texte); font-size:1.125rem; font-weight:600; letter-spacing:0; color:var(--bleu); margin-top:2px; }
.foot__tag{ color:var(--ink-2); margin-top:12px; }
.trust--foot{ display:flex; justify-content:flex-start; gap:12px; margin-top:24px; }
.trust--foot .islot{ width:96px; height:48px; background:rgba(255,253,249,.7); border-color:rgba(27,36,48,.28); }
.foot__h{ font-family:var(--f-texte); font-weight:700; font-size:var(--surtitre); line-height:1.4; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bleu); 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:10px; margin-block:-10px;
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px;
  transition:text-decoration-color var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease); }
.foot__links a:hover,.foot__info a:hover{ color:var(--bleu); text-decoration-color:currentColor; 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:20px; height:20px; margin-top:3px; color:var(--ink-2); }
.foot__sep{ height:1px; background:var(--filet); margin-top:32px; }
.foot__sep--m{ display:none; }
.foot__bar{ display:flex; justify-content:space-between; gap:16px; padding-block:32px; font-size:var(--caption); color:var(--ink-2); }
@media (max-width:1023px){ .foot__id{ padding-top:44px; } }
@media (max-width:767px){ .foot__map{ height:280px; } .foot__id{ padding-top:32px; } }
/* Configuration mobile, sous la largeur mesurée où les trois colonnes tiennent avec 64px d'air sur les lettres
   (354 + 131 + 249 + 2 × 64 + marges 2 × 24 + barre de défilement 15 = 925px) : une colonne, tablette comprise */
@media (max-width:927px){
  .foot__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
  .foot__ident{ display:flex; flex-direction:column; align-items:flex-start; }
  .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, chaque élément serré sur son texte : le bouton flottant, à droite, ne la recouvre pas */
  .foot__bar{ flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
}
/* trois colonnes serrées sur leur texte, même air entre elles ; tagline sur ses deux lignes choisies */
@media (min-width:928px){
  .foot__grid{ display:grid; grid-template-columns:repeat(3,max-content); justify-content:space-between; column-gap:64px; }
  .foot__col{ padding-top:calc(var(--logo-h) + 16px); }   /* première ligne au niveau du nom, pas du logo */
  .foot__tag > span{ display:block; }
  .foot__info .row--fold > span{ flex:1 1 0; contain:inline-size; }   /* l'adresse se plie à la largeur des autres lignes */
}
/* barre du bas en ligne avec le bouton d'appel flottant (sous 1024px) : réserve dessous pour qu'il ne la recouvre jamais */
@media (min-width:928px) and (max-width:1023px){ .foot__bar{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); } }
/* ordinateur : le footer prend la largeur du header, gouttière minimale 48px */
@media (min-width:1024px){ .foot > .container{ max-width:var(--container-header); } .foot__grid{ column-gap:48px; } }

/* ---------- 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(--bleu); color:var(--fond); display:flex; align-items:center; justify-content:center;
    /* ombre du site, plus un anneau crème de 2px : sans lui, le rond bleu se perd sur l'aplat bleu des Garanties */
    box-shadow:0 0 0 2px rgba(246,242,234,.9),0 1px 2px rgba(27,36,48,.12),0 8px 20px rgba(27,36,48,.10),0 18px 40px rgba(27,36,48,.07);
    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(1.12); 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(--bleu);
    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; } }

/* ---------- Compteur à molettes : chaque chiffre entier est une fenêtre (clip-path) où glisse une bande 0 à 9 ;
   le chiffre final, invisible, donne la taille : rien ne bouge autour. Étoiles : grisées dessous, l'or 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__b{ fill:rgba(27,36,48,.2) !important; }   /* couleur du texte de leur contexte à 20 % (fond clair) */
.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; }

/* ==========================================================================
   Effets : Phase finale
   ========================================================================== */
/* état masqué posé sans transition ; les transitions ne s'allument qu'après (fx-on) */
html.js-ready [data-reveal]{ opacity:0; transform:translateY(30px); }
html.fx-on [data-reveal]{ 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(--fond); }
.is-home .hero--pin + .page-flow{ box-shadow:0 -10px 28px rgba(27,36,48,.08),0 -1px 2px rgba(27,36,48,.05); }   /* le rideau se lit en remontant sur le hero */

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important;
    animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  .tk.run{ animation:none !important; }
  html.js-ready [data-reveal]{ opacity:1 !important; transform:none !important; }
  .rtk,.annonce__in{ overflow-x:auto; }
  .rtk.is-v{ overflow-x:hidden; overflow-y:auto; }
  .rtk,.annonce__in{ -webkit-mask-image:none; mask-image:none; }
  .tk > .tk__set[aria-hidden],.annonce .tk > .annonce__set[aria-hidden]{ display:none !important; }
  @media (max-width:799px){ .annonce__set{ padding-inline:var(--pad); } }
  .fcall::before{ display:none; }
  .tile__clip .ph{ transform:none !important; }
}