/* ==========================================================================
   Kms 17 : site.css (Nicolam Studio)
   Artisan de la pierre, sobre et soigné : le crème et le kraft du bois portent la page, le marine du coup de pinceau
   du logo porte l'action ; EB Garamond sur les titres, Source Sans 3 sur le corps, profondeur douce par l'ombre brune.
   Aucune bibliothèque CSS chargée : tout le style vit dans cette feuille.
   ========================================================================== */

/* ---------- Polices hébergées sur le site (aucun appel à Google Fonts) : EB Garamond 600/700, Source Sans 3 400/600/700, latin ---------- */
@font-face{ font-family:"EB Garamond"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/eb-garamond-600-latin.woff2") format("woff2"); }
@font-face{ font-family:"EB Garamond"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/eb-garamond-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:#FAF4E8;                 /* crème : fond du site, A du flux */
  --principale:#16294F;           /* marine soutenue : action, sur-titres, aplat de contraste */
  --principale-claire:#E4E8F0;    /* marine claire */
  --secondaire:#8F5D2E;           /* caramel soutenu : repères (icônes, chiffres, coches, frise, badges) */
  --secondaire-claire:#F0E1CB;    /* caramel clair : B du flux, placeholders */
  --texte:#1C2230;
  --texte-2:#5B5E66;              /* 5,9:1 sur le fond */
  --caramel-sur-marine:#C9925A;   /* chiffres et accents sur l'aplat marine (5,3:1) */
  --star:#F2B01E;                 /* le seul or du site : étoiles et note Google */
  --surface:#FFFDF8;              /* fond des cartes, distinct du fond de section */
  --carmin:#A8243A;               /* notes de maquette */
  --erreur:#B42318;
  --filet:rgba(28,34,48,.14);     /* hairline visible */
  --annonce-top:#2B4171;          /* haut du dégradé vertical de la barre d'annonce (marine éclairci) */
  --sig:linear-gradient(90deg,#16294F,#8F5D2E);                  /* dégradé signature, horizontal (nom du H1, gras accent) */
  --grad:linear-gradient(135deg,#16294F,#8F5D2E);                /* le même à 135° : pastilles d'icône, avatars, bordures, dernier repère */
  --grad-btn:linear-gradient(135deg,#16294F 0%,#3A3A4C 40%,#8F5D2E 100%);   /* bouton plein : la signature à son angle, point à 40 % */
  --grad-clair:linear-gradient(135deg,#F0E1CB 0%,#F6ECDD 40%,#FFFDF8 100%);  /* dégradé clair des fonds d'icônes, même angle */
  --frise-mid:#4F4345;            /* couleur du milieu de la ligne de frise */
  /* Espacements */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  /* Rayons */
  --r-btn:10px; --r-card:16px; --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:56px;
  /* Ombres : brun chaud en couches + liseré clair (une seule ombre pour tout le site) */
  --sh-card:0 1px 2px rgba(92,58,30,.09),0 8px 20px rgba(92,58,30,.11),0 18px 40px rgba(92,58,30,.07),inset 0 1px 0 rgba(255,252,247,.7);
  --sh-soft:0 1px 2px rgba(92,58,30,.07),0 4px 12px rgba(92,58,30,.07);
  /* Mouvement : ease-in-out partout, .4s minimum ; états .6s, reveal .9s, zoom 1,2s, menu .5s ; ticker en linear */
  --ease:ease-in-out; --dur:.4s; --dur-st:.6s; --dur-in:.9s; --dur-open:.5s; --dur-faq:.4s; --fill-dur:.6s;
  /* Typographie */
  --f-titre:"EB Garamond",Georgia,"Times New Roman",serif;
  --f-texte:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --h1:clamp(2.4rem,1.6rem + 3.2vw,4rem);
  --h1-page:clamp(2.1rem,1.5rem + 2.4vw,3.25rem);   /* heros de page : toujours sous le H1 de l'accueil */
  --h2:clamp(1.9rem,1.4rem + 1.8vw,2.75rem);
  --h3:clamp(1.3rem,1.15rem + .6vw,1.6rem);
  --h4:1.125rem;
  --chapo:clamp(1.125rem,1.06rem + .3vw,1.25rem);
  --corps:1.0625rem;
  --caption:.875rem;
  --surtitre:.875rem;
  /* Ticker de la barre d'annonce */
  --tk-lead:96px; --tk-fade:24px;
}
@supports (background:linear-gradient(in oklab,red,blue)){
  :root{
    --sig:linear-gradient(90deg in oklab,#16294F,#8F5D2E);
    --grad:linear-gradient(135deg in oklab,#16294F,#8F5D2E);
    --grad-btn:linear-gradient(135deg in oklab,#16294F 0%,color-mix(in oklab,#16294F 70%,#8F5D2E) 40%,#8F5D2E 100%);
  }
}
@supports (color:color-mix(in oklab,red,blue)){ :root{ --frise-mid:color-mix(in oklab,#16294F,#8F5D2E); } }
@media (max-width:767px){ :root{ --pad:16px; --tk-fade:16px; --tk-lead:64px; --ann-h:36px; --hdr-h:68px; --logo-h:48px; } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; scroll-padding-top:calc(var(--hdr-h) + 24px); }
body{ margin:0; background:var(--fond); color:var(--texte); 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,blockquote{ margin:0; }
ul,ol{ padding:0; }
[hidden]{ display:none !important; }
::selection{ background:var(--principale); color:var(--fond); }
:focus-visible{ outline:2px solid var(--principale); 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(--texte); font-weight:600; letter-spacing:-.015em; }
h1{ font-size:var(--h1); font-weight:700; line-height:1.12; }
h2{ font-size:var(--h2); line-height:1.2; }
h3{ font-size:var(--h3); line-height:1.2; }
h4{ font-size:var(--h4); line-height:1.3; }
.center h2,.hero h1,.phero h1{ text-wrap:balance; }
/* « Kms 17 » dans les H1 : dégradé signature horizontal (marine → caramel) */
.h1-name{ background:var(--sig); -webkit-background-clip:text; background-clip:text; color:transparent; padding-block:.1em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
/* gras accent des H2 : les mots forts en dégradé signature horizontal, une graisse au-dessus du reste du titre */
.acc{ font-weight:700; background:var(--sig); -webkit-background-clip:text; background-clip:text; color:transparent; padding-block:.08em;
  -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(--principale); }
.lead{ font-size:var(--chapo); line-height:1.55; color:var(--texte-2); }
.tlink{ color:var(--principale); font-weight:600; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px;
  text-decoration-color:rgba(22,41,79,.35); cursor:pointer;
  transition:color var(--dur-st) var(--ease),text-decoration-color var(--dur-st) var(--ease); }
.tlink:hover{ color:var(--secondaire); text-decoration-color:currentColor; }

/* ---------- 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.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,.qband::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 = #FAF4E8, B = #F0E1CB (posé par flow() au build, bords calés) */
.bg-ab{ background:linear-gradient(180deg,#FAF4E8,#F0E1CB); }
.bg-ba{ background:linear-gradient(180deg,#F0E1CB,#FAF4E8); }
.bg-aba{ background:linear-gradient(180deg,#FAF4E8,#F0E1CB 50%,#FAF4E8); }
.bg-bab{ background:linear-gradient(180deg,#F0E1CB,#FAF4E8 50%,#F0E1CB); }

/* en-tête de section : le chapô prend la largeur de son titre, plancher ~70 caractères */
.shead{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:48px; width:fit-content; max-width:100%;
  min-width:min(100%,40rem); }
.shead .lead{ align-self:stretch; contain:inline-size; min-width:min(100%,40rem); }
.shead.center{ align-items:center; text-align:center; margin-inline:auto; }
.shead.center .lead{ text-wrap:balance; }
@media (max-width:767px){ .shead{ margin-bottom:32px; width:auto; } .shead.center .lead{ text-wrap:wrap; } }

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

/* ---------- Boutons : deux niveaux, coins doux 10px, icône à droite dans la couleur du libellé ---------- */
.btn{ position:relative; 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-texte);
  font-weight:600; font-size:1.0625rem; line-height:1.2; cursor:pointer; text-align:center;
  transition:transform var(--dur-st) var(--ease),background-color var(--dur-st) var(--ease),box-shadow var(--dur-st) var(--ease),
    color var(--dur-st) var(--ease),border-color var(--dur-st) var(--ease); }
.btn .ic{ width:20px; height:20px; }
/* ghost : bordure marine franche, fond transparent ; au survol, un fond léger et une légère montée */
.btn--ghost{ color:var(--principale); border-color:var(--principale); background-color:transparent; }
.btn--ghost:hover{ background-color:rgba(228,232,240,.85); transform:translateY(-2px); box-shadow:var(--sh-soft); }
.btn--ghost:active{ transform:translateY(0) scale(.985); background-color:rgba(22,41,79,.12); }
/* deux boutons côte à côte : sur une ligne tant qu'ils tiennent, sinon empilés en pleine largeur (classe posée par site.js) */
.btn-row{ display:flex; flex-wrap:wrap; gap:16px; }
.btn-row--center{ justify-content:center; }
.btn-row.is-stacked{ flex-direction:column; align-items:stretch; align-self:stretch; }
.btn-row.is-stacked .btn{ width:100%; }

/* ---- Arrow Fill Button : tous les boutons pleins (fiche COMPOSANTS.md, réglages de nicolamstudio.fr du 05/11/2026) ----
   plein au dégradé signature (135°), libellé crème ; à droite, le rond clair (≈ 60 % de la hauteur, même marge en haut, en bas
   et à droite), l'icône marine à 57 % du rond. Au survol (vrai survol), au toucher et au focus, le rond s'étend jusqu'à couvrir
   le bouton : un calque inversé (dégradé clair, libellé marine) révélé par clip-path: circle(), 0,6 s ease-in-out. */
.btn-fill{
  --btn-h:48px; --dot:28px;
  --dm:calc((var(--btn-h) - 3px - var(--dot)) / 2);   /* même marge en haut, en bas et à droite du rond (bordure de 1,5px comprise) */
  --fxr:24px;   /* centre du rond, compté depuis le bord droit : 1,5 (bordure) + 8,5 (marge) + 14 (rayon), sans calc() ni script */
  --fill-ease:var(--ease);
  --f-bg:var(--grad-clair); --f-fg:var(--principale);   /* état rempli : dégradé clair, libellé marine */
  --d-fg:var(--principale);                             /* rond au repos : le calque clair vu à travers sa découpe, icône marine */
  --i-bg:var(--grad); --i-fg:var(--fond);               /* rond rempli : dégradé signature, icône crème */
  height:var(--btn-h); min-height:var(--btn-h);
  padding:0 calc(var(--dm) + var(--dot) + 12px) 0 24px;   /* la marge, le rond, puis 12px avant le libellé */
  gap:0; justify-content:center; color:var(--fond);
  background:var(--grad-btn); border:1.5px solid rgba(255,253,248,.85);
  background-clip:padding-box; background-origin:padding-box; background-repeat:no-repeat;
  box-shadow:var(--sh-card); overflow:visible; -webkit-tap-highlight-color:transparent; }
.btn-fill:hover,.btn-fill:active{ transform:none; box-shadow:var(--sh-card); }   /* le remplissage EST l'état de survol */
.btn-fill.is-wide{ padding-left:12px; }   /* pleine largeur : le libellé se centre dans l'espace à gauche du rond (site.js) */
.btn-fill__txt{ position:relative; z-index:1; display:inline-flex; align-items:center; }
.btn-fill__layer{ position:absolute; inset:-1.5px; z-index:2; display:flex; align-items:center; justify-content:inherit;
  padding:inherit; border:1.5px solid transparent; border-radius:inherit;
  background:var(--f-bg); color:var(--f-fg); background-origin:border-box; background-repeat:no-repeat;
  -webkit-clip-path:circle(calc(var(--dot) / 2) at right var(--fxr) top 50%);
  clip-path:circle(calc(var(--dot) / 2) at right var(--fxr) top 50%);
  transition:clip-path var(--fill-dur) var(--fill-ease),-webkit-clip-path var(--fill-dur) var(--fill-ease);
  pointer-events:none; }
.btn-fill__dot{ position:absolute; right:var(--dm); top:50%; width:var(--dot); height:var(--dot); margin-top:calc(var(--dot) / -2);
  border-radius:50%; display:grid; place-items:center; color:var(--d-fg); transition:color var(--fill-dur) var(--fill-ease); }
.btn-fill__inv{ position:absolute; inset:0; border-radius:50%; background:var(--i-bg); opacity:0; transition:opacity var(--fill-dur) var(--fill-ease); }
.btn-fill .btn-fill__ic{ position:relative; width:calc(var(--dot) * .57); height:calc(var(--dot) * .57); transition:transform var(--fill-dur) var(--fill-ease); }
.btn-fill__spin{ display:none; position:relative; width:calc(var(--dot) * .5); height:calc(var(--dot) * .5); border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; animation:btn-spin .8s linear infinite; }
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
.btn-fill.is-filled .btn-fill__layer,.btn-fill:focus-visible .btn-fill__layer{
  -webkit-clip-path:circle(var(--fr, 600px) at right var(--fxr) top 50%);
  clip-path:circle(var(--fr, 600px) at right var(--fxr) top 50%); }
.btn-fill.is-filled .btn-fill__inv,.btn-fill:focus-visible .btn-fill__inv{ opacity:1; }
.btn-fill.is-filled .btn-fill__dot,.btn-fill:focus-visible .btn-fill__dot{ color:var(--i-fg); }
.btn-fill--pivot.is-filled .btn-fill__ic,.btn-fill--pivot:focus-visible .btn-fill__ic{ transform:rotate(45deg); }   /* ↗ → → */
@media (hover:hover){
  .btn-fill:not(:disabled):hover .btn-fill__layer{
    -webkit-clip-path:circle(var(--fr, 600px) at right var(--fxr) top 50%);
    clip-path:circle(var(--fr, 600px) at right var(--fxr) top 50%); }
  .btn-fill:not(:disabled):hover .btn-fill__inv{ opacity:1; }
  .btn-fill:not(:disabled):hover .btn-fill__dot{ color:var(--i-fg); }
  .btn-fill--pivot:not(:disabled):hover .btn-fill__ic{ transform:rotate(45deg); }
}
.btn-fill:focus-visible{ outline:2px solid var(--principale); outline-offset:3px; }
/* envoi en cours : le bouton reste rempli, un indicateur de chargement prend la place de l'icône */
.btn-fill.is-busy,.btn-fill[aria-busy="true"]{ cursor:progress; pointer-events:none; }
.btn-fill.is-busy .btn-fill__ic{ display:none; }
.btn-fill.is-busy .btn-fill__spin{ display:block; }
.btn-fill:disabled:not(.is-busy){ opacity:.5; cursor:not-allowed; }
/* compact (header) : 44px, rond de 26px */
.btn-fill--sm{ --btn-h:44px; --dot:26px; --fxr:22px; padding-left:20px; font-size:1rem; }   /* 1,5 + 7,5 + 13 */
@media (max-width:359px){ .btn-fill{ padding-left:18px; font-size:1rem; } .btn-fill.is-wide{ padding-left:12px; } }

/* ---------- Badges pilule : statiques, sans bordure ni ombre, à l'arrondi des boutons, icône en tête ---------- */
.badges{ display:flex; flex-wrap:wrap; gap:12px; }
.badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:var(--r-btn); background:var(--principale-claire);
  color:var(--principale); font-weight:600; font-size:.875rem; line-height:1.3; white-space:nowrap; }
.badge .ic{ width:16px; height:16px; color:var(--secondaire); }
.badge .g-g{ width:16px; height:16px; }

/* ---------- Barre d'annonce : dégradé vertical du marine (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(--annonce-top) 0%,var(--principale) 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:.75; }
.annonce .tk > .annonce__set[aria-hidden]{ display:none; }
@media (max-width:619px){   /* bascule mesurée sur la ligne réelle : 572px en corps mobile + marges 2 × 16 + barre de défilement = 619px ; 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; } }

/* ---------- Tickers ---------- */
.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-in{ from{ transform:translateX(var(--lead,96px)); } to{ transform:translateX(0); } }

/* ---------- Logo : le fichier du client, en tuile aux coins des boutons ---------- */
.logo{ display:block; height:var(--logo-h); width:var(--logo-h); border-radius:var(--r-btn); object-fit:cover; box-shadow:0 1px 2px rgba(92,58,30,.18); }

/* ---------- 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(250,244,232,.94),rgba(250,244,232,.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-st) 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(--texte);
  transition:color var(--dur-st) var(--ease),background-color var(--dur-st) var(--ease); }
.nav__link:hover{ background:rgba(228,232,240,.8); color:var(--principale); }
.nav__link[aria-current="page"],.nav__toggle[data-current]{ color:var(--principale); }
.nav__link[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--principale); border-radius:var(--r-btn) var(--r-btn) 0 0; }
.nav__link .ic{ width:16px; height:16px; color:var(--principale); 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(--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(--texte);
  transition:background-color var(--dur-st) var(--ease),color var(--dur-st) var(--ease); }
.submenu a:hover,.submenu a[aria-current]{ background:var(--principale-claire); }
.submenu a:hover .submenu__t,.submenu a[aria-current] .submenu__t{ color:var(--principale); }
.submenu__txt{ display:block; min-width:0; }
.submenu__t{ display:block; font-weight:600; font-size:1.0625rem; line-height:1.3; white-space:nowrap; transition:color var(--dur-st) var(--ease); }
.submenu__d{ display:block; font-size:var(--caption); line-height:1.4; color:var(--texte-2); white-space:nowrap; }
/* icône clé dans sa pastille au dégradé signature : 40 / 22px (overlay), 36 / 20px (panneau) */
.kchip{ flex:0 0 auto; width:40px; height:40px; border-radius:var(--r-btn); background:var(--grad);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(92,58,30,.16),0 4px 10px rgba(22,41,79,.18),inset 0 1px 0 rgba(255,252,247,.3); }
.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(28,34,48,.22); align-items:center; justify-content:center; color:var(--principale);
  transition:background-color var(--dur-st) var(--ease),border-color var(--dur-st) var(--ease); }
.burger:hover{ background:rgba(228,232,240,.8); border-color:var(--principale); }
.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:879px){   /* bascule burger mesurée : logo 56 + nav 454 + CTA 200 + gouttières 2 × 24 + 24px d'air de part et d'autre de la nav + marges 2 × 24 + barre de défilement = 869px */
  .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(92,58,30,.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(--texte); text-align:left;
    transition:background-color var(--dur-st) var(--ease),color var(--dur-st) var(--ease); }
  .hdr__panel a:not(.btn):hover,.macc__btn:hover{ background:var(--principale-claire); color:var(--principale); }
  .hdr__panel a[aria-current]:not(.btn),.macc__btn[data-current]{ color:var(--principale); }
  .macc__btn{ width:100%; justify-content:space-between; }
  .macc__btn .ic{ width:20px; height:20px; color:var(--principale); 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, foyer crème, bords caramel 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(100vh - var(--stack-h)); padding:96px var(--pad); color:var(--texte); }
@supports (height:100svh){ .hero{ min-height:calc(100svh - var(--stack-h)); } }
.hero__media{ position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at center,#FAF4E8 0%,#F0E1CB 100%); }
/* le logo du client en filigrane, très discret derrière le H1 ; bords du carré fondus (masque radial) */
.hero__media::before,.phero::before{ content:""; position:absolute; left:50%; top:50%; width:min(64vmin,600px); aspect-ratio:1;
  transform:translate(-50%,-50%); opacity:.05; pointer-events:none;
  background:url("/assets/kms17-logo-480.jpg") no-repeat center / contain;
  -webkit-mask-image:radial-gradient(closest-side,#000 64%,transparent 100%); mask-image:radial-gradient(closest-side,#000 64%,transparent 100%); }
.hero__in{ width:fit-content; max-width:min(100%,var(--container)); display:flex; flex-direction:column; align-items:center; gap:24px; }
.hero__tag{ font-size:var(--chapo); line-height:1.55; color:var(--texte-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, G + note (or) + cinq étoiles, rien d'autre */
.gpill{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 12px; border-radius:var(--r-pill);
  background:rgba(255,253,248,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(28,34,48,.12); box-shadow:var(--sh-soft); white-space:nowrap; line-height:1; }
.gpill .g-g{ width:18px; height:18px; }
.gpill__n{ font-family:var(--f-texte); font-weight:700; font-size:1rem; color:var(--star); font-variant-numeric:tabular-nums lining-nums; }
.stars--pill{ --sz:15px; }
/* Indicateur de scroll : au milieu de l'espace vide sous les boutons, la barre pile sur l'axe des boutons, haute de la moitié
   de cet espace (site.js) ; « Avis » à droite, 12px plus loin, même couleur et même opacité (marine à 24 %) */
.scroll-ind{ --ind-h:72px; position:absolute; left:0; right:0; bottom:calc(32px + env(safe-area-inset-bottom)); z-index:1; width:max-content; margin-inline:auto;
  display:grid; grid-template-columns:1fr 1px 1fr; column-gap:12px;
  align-items:center; height:var(--ind-h); cursor:pointer; color:rgba(22,41,79,.24);
  transition:opacity .6s var(--ease),visibility 0s linear .6s,color var(--dur-st) var(--ease); }
.scroll-ind__line{ position:relative; grid-column:2; width:1px; height:100%; overflow:hidden; background:currentColor; }
.scroll-ind__word{ grid-column:3; justify-self:start; text-align:left; font-family:var(--f-texte); font-weight:700; font-size:var(--surtitre); line-height:1; letter-spacing:.12em;
  text-transform:uppercase; white-space:nowrap; }
.scroll-ind:hover{ color:rgba(22,41,79,.5); }
.scroll-ind:focus-visible{ outline-offset:4px; }
@media (max-width:767px){
  .scroll-ind{ --ind-h:56px; }
  .hero{ padding-block:64px; }
  .hero__tag{ text-wrap:wrap; }
  .gpill{ padding:6px 12px 6px 10px; gap:6px; }
  .gpill .g-g{ width:16px; height:16px; }
  .gpill__n{ font-size:.9375rem; }
  .stars--pill{ --sz:13px; }
}

/* ---------- Hero de page : même radial (centre crème) + logo, H1 + tagline seuls ; la section suivante démarre sur le crème ---------- */
.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,#FAF4E8 0%,#F0E1CB 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(--texte-2); align-self:stretch; contain:inline-size; text-wrap:balance; }
@media (max-width:767px){ .phero{ padding-block:64px; min-height:300px; } .phero__tag{ text-wrap:wrap; } }

/* ---------- Placeholder image : le logo du client centré (fichier réel, bords fondus), radial caramel clair, légende en pastille ---------- */
.ph{ position:relative; overflow:hidden; background:radial-gradient(ellipse at center,#FAF4E8 0%,#F0E1CB 100%); }
.ph::before{ content:""; position:absolute; left:50%; top:50%; width:min(48%,240px); aspect-ratio:1; transform:translate(-50%,-50%);
  opacity:.16; pointer-events:none; background:url("/assets/kms17-logo-480.jpg") no-repeat center / contain;
  -webkit-mask-image:radial-gradient(closest-side,#000 64%,transparent 100%); mask-image:radial-gradient(closest-side,#000 64%,transparent 100%); }
.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-btn); background:rgba(255,253,248,.9); color:var(--texte-2);
  font-size:var(--caption); line-height:1.4; box-shadow:var(--sh-soft); }

/* ---------- Notes de maquette : Note = carmin + info ---------- */
.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(--texte); }
.mnote--note{ border-color:rgba(168,36,58,.35); background:linear-gradient(rgba(168,36,58,.07),rgba(168,36,58,.07)),var(--fond); }
.mnote > .ic{ width:24px; height:24px; margin-top:1px; }
.mnote--note > .ic,.mnote--note .mnote__label{ color:var(--carmin); }
.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(--texte); }
@media (max-width:767px){ .note-wrap{ margin-top:32px; } .mnote{ padding:16px; gap:12px; } }
.note-solo{ max-width:760px; margin-inline:auto; }

/* ---------- Cartes ---------- */
.card{ background:var(--surface); color:var(--texte); border-radius:var(--r-card); box-shadow:var(--sh-card); padding:48px; }

/* ---------- S2 Bande de qualités : ticker de mots, fond propre en dégradé horizontal (caramel clair → marine claire) ---------- */
.qband{ position:relative; isolation:isolate; padding:64px 0; background:linear-gradient(90deg,#F0E1CB,#E4E8F0); }
.qband > *{ position:relative; z-index:1; }
.qband__t{ display:block; text-align:center; text-wrap:balance; margin:0 auto 32px; }
.qband__t .g-g{ display:inline-block; width:18px; height:18px; vertical-align:-3px; margin-right:10px; }
.qband__tk{ overflow:hidden;
  -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); }
.tk--q{ width:max-content; transform:translateX(var(--lead,96px)); }   /* vide de lecture au départ : le premier extrait n'est jamais collé au bord */
.tk--q.run,.tk--q.is-done{ transform:none; }
.qt__set{ list-style:none; margin:0; padding:0; display:flex; align-items:center; flex:0 0 auto; }
.qt__it{ display:inline-flex; align-items:baseline; gap:12px; white-space:nowrap; }
.qt__q{ font-family:var(--f-titre); font-weight:600; font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem); line-height:1.3; letter-spacing:-.01em; color:var(--texte); }
.qt__who{ font-weight:600; font-size:var(--caption); line-height:1; color:var(--secondaire); }
.qt__sep{ display:inline-flex; align-items:center; margin:0 32px; font-size:.75rem; line-height:1; color:var(--secondaire); }
@media (max-width:767px){ .qband{ padding:48px 0; } .qband__t{ margin-bottom:24px; padding-inline:var(--pad); } .qt__sep{ margin:0 24px; } }

/* ---------- S3 Prestations : alternance image/texte, texte ~43 %, centré face à l'image ---------- */
.alt{ display:flex; flex-direction:column; gap:96px; }
.alt__row{ display:grid; grid-template-columns:minmax(0,13fr) minmax(0,10fr); column-gap:64px; align-items:center; }
.alt__row--r{ grid-template-columns:minmax(0,10fr) minmax(0,13fr); }
.alt__row--r .alt__img{ grid-column:2; grid-row:1; }
.alt__row--r .alt__txt{ grid-column:1; grid-row:1; }
.alt__img{ position:relative; aspect-ratio:4 / 3; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); }
.alt__img .ph{ position:absolute; inset:0; }
.alt__txt{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; min-width:0; }
.alt__txt h3{ font-size:clamp(1.5rem,1.3rem + .8vw,2rem); }
.alt__txt > p{ color:var(--texte-2); }
.alt__txt .btn{ margin-top:8px; }
/* item à icône, format rangée : icône nue (caramel), libellé, filet inséré à l'aplomb du libellé */
.irows{ list-style:none; align-self:stretch; margin-top:4px; }
.irow{ position:relative; display:flex; align-items:center; gap:14px; min-height:48px; padding-block:10px;
  font-weight:600; font-size:var(--corps); line-height:1.35; color:var(--texte); }
.irow .ic{ width:24px; height:24px; color:var(--secondaire); }
.irow + .irow::before{ content:""; position:absolute; top:0; left:38px; right:0; height:1px; background:var(--filet); }
.prest__end{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; margin-top:64px; }
@media (max-width:959px){   /* bascule mesurée : sous 960px, la colonne de texte passerait sous ~380px ; empilé, l'image au-dessus */
  .alt{ gap:64px; }
  .alt__row,.alt__row--r{ grid-template-columns:minmax(0,1fr); row-gap:32px; }
  .alt__row--r .alt__img,.alt__row--r .alt__txt{ grid-column:auto; grid-row:auto; }
}
@media (max-width:767px){ .alt{ gap:56px; } .alt__row,.alt__row--r{ row-gap:24px; } .prest__end{ margin-top:48px; } }

/* ---------- S4 Avant/après : sélecteur segmenté, curseur 3/2 (1000px au plus), avis de lys aka, duo ---------- */
.seg{ position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:min(100%,440px); margin:0 auto 32px; padding:4px;
  border-radius:14px; background:var(--principale-claire); --i:0; --h:0; }
.seg__pill,.seg__hover{ position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:var(--r-btn);
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease); pointer-events:none; }
.seg__pill{ background:var(--principale); box-shadow:0 1px 2px rgba(22,41,79,.2),0 4px 10px rgba(22,41,79,.16); transform:translateX(calc(var(--i) * 100%)); z-index:1; }
.seg__hover{ background:rgba(22,41,79,.1); opacity:0; transform:translateX(calc(var(--h) * 100%)); }
.seg.is-hover .seg__hover{ opacity:1; }
.seg__btn{ position:relative; z-index:2; min-height:44px; padding:10px 16px; border-radius:var(--r-btn); font-weight:600; font-size:1rem; line-height:1.2;
  color:var(--principale); white-space:nowrap; transition:color var(--dur) var(--ease); }
.seg__btn[aria-selected="true"]{ color:var(--fond); }
.seg__btn:focus-visible{ outline-offset:2px; }
.ba-wrap{ max-width:1000px; margin-inline:auto; }
.ba__stack{ display:grid; }
.ba__v{ grid-area:1 / 1; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur); }   /* sortie : 0,4 s, descente de 8px */
.ba__v.is-on{ opacity:1; visibility:visible; transform:none;   /* entrée : après la sortie (retard 0,4 s), fondu + montée de 8px en 0,5 s */
  transition:opacity .5s var(--ease) var(--dur),transform .5s var(--ease) var(--dur),visibility 0s linear var(--dur); }
.ba__stack.is-init .ba__v{ transition:none; }
.ba{ --pos:50%; position:relative; aspect-ratio:3 / 2; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card);
  touch-action:pan-y; -webkit-user-select:none; user-select:none; cursor:ew-resize; }
.ba__layer{ position:absolute; inset:0; }
.ba__layer .ph{ position:absolute; inset:0; }
.ba__before{ -webkit-clip-path:inset(0 calc(100% - var(--pos)) 0 0); clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba__before .ph__cap{ top:12px; bottom:auto; }   /* avant en haut à gauche, après en bas à droite : jamais l'une sur l'autre */
.ph--r .ph__cap{ left:auto; right:12px; }
.ba__bar{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:var(--fond);
  box-shadow:0 0 0 1px rgba(22,41,79,.12),0 0 14px rgba(92,58,30,.28); pointer-events:none; }
.ba__handle{ position:absolute; top:50%; left:var(--pos); width:52px; height:52px; transform:translate(-50%,-50%); border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--fond); color:var(--principale);
  border:1.5px solid rgba(22,41,79,.18); box-shadow:var(--sh-card); cursor:grab; touch-action:none;
  transition:background-color var(--dur-st) var(--ease),color var(--dur-st) var(--ease),transform var(--dur-st) var(--ease); }
.ba__handle .ic{ width:18px; height:18px; }
.ba__handle .ic + .ic{ margin-left:-2px; }
.ba:hover .ba__handle,.ba__handle:focus-visible{ background:var(--principale); color:var(--fond); transform:translate(-50%,-50%) scale(1.06); }
.ba.is-drag,.ba.is-drag .ba__handle{ cursor:grabbing; }
.ba-rv{ max-width:640px; margin:48px auto 0; }
.ba-cta{ margin-top:48px; }
@media (max-width:767px){ .seg{ margin-bottom:24px; } .ba-rv,.ba-cta{ margin-top:32px; } .ba__handle{ width:48px; height:48px; } }

/* ---------- Cartes d'avis : pastille à l'initiale, prénom puis étoiles empilés, G seul en haut à droite, verbatim « … » ---------- */
.stars{ --sz:18px; display:inline-flex; align-items:center; gap:2px; }
.stars .star{ width:var(--sz); height:var(--sz); flex:0 0 auto; fill:var(--star); }
.stars--sm{ --sz:16px; }
.stars--lg{ --sz:24px; }
.rv{ position:relative; display:flex; flex-direction:column; gap:16px; padding:32px; background:var(--surface); color:var(--texte);
  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:var(--grad);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-titre); font-weight:700; font-size:1.25rem; line-height:1; }
.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(--texte); }
.rv__g{ flex:0 0 auto; line-height:0; }
.rv__g .g-g{ width:22px; height:22px; }
.rv__txt{ color:var(--texte); line-height:1.6; white-space:pre-wrap; }   /* verbatim mot pour mot : espaces d'origine conservés */
.rv--solo{ box-shadow:var(--sh-card); }
@media (max-width:767px){ .rv{ padding:24px; } .rv__g .g-g{ width:30px; height:30px; } }

/* ---------- S5 L'entreprise : section de contraste (aplat marine), split avec chevauchement, panneau crème posé dessus ---------- */
.sec-contrast{ background:var(--principale); color:var(--fond); }
.sec-contrast::before{ opacity:.03; }   /* grain un cran plus discret */
/* composition centrée de 1085px : portrait 680px (4/5), panneau 540px, recouvrement 135px = un quart du panneau ;
   le portrait dépasse toujours le panneau de 48px en haut et en bas (marges négatives verticales), pour que le recouvrement se lise */
.split{ display:grid; grid-template-columns:minmax(0,545fr) minmax(0,135fr) minmax(0,405fr); max-width:1085px; margin:48px auto 0; align-items:stretch; }
.split__img{ grid-column:1 / 3; grid-row:1; margin-block:-48px; position:relative; border-radius:var(--r-card); overflow:hidden; box-shadow:0 18px 44px rgba(5,12,28,.32); }
.split__img::before{ content:""; display:block; padding-top:125%; }   /* portrait 4/5 */
.split__img .ph{ position:absolute; inset:0; }
.split__img .ph::before{ left:39%; top:42%; }   /* le motif reste dans la partie visible du portrait */
.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(--fond); color:var(--texte);
  border-radius:var(--r-card); box-shadow:0 1px 2px rgba(5,12,28,.2),0 12px 32px rgba(5,12,28,.28),0 28px 56px rgba(5,12,28,.18); }
.split__panel h2{ margin-top:16px; }
.split__panel > p{ margin-top:24px; color:var(--texte-2); }
/* phrase d'avis : sous le texte qu'elle prouve, un cran au-dessus du corps, attribution petite en caramel */
.quote{ margin-top:24px; display:flex; flex-direction:column; gap:8px; }
.quote blockquote p{ font-family:var(--f-titre); font-weight:600; font-size:1.3125rem; line-height:1.4; letter-spacing:-.005em; color:var(--texte); }
.quote figcaption{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:var(--caption); line-height:1; color:var(--secondaire); }
.quote figcaption .g-g{ width:16px; height:16px; }
.split__cta{ margin-top:32px; align-self:stretch; }
/* emplacements réservés au format d'un logo d'assureur : sans logo, sans titre, sans texte */
.trust{ display:flex; align-items:center; gap:16px; }
.islot{ display:block; flex:0 0 auto; width:120px; height:60px; border-radius:var(--r-btn); border:1.5px dashed rgba(28,34,48,.26); background:rgba(228,232,240,.4); }
.trust--panel{ margin-top:24px; align-self:stretch; }
/* bande de stats nue : chiffres posés sur l'aplat, centrés ; chiffres caramel, une étoile dorée après la note */
.stats-box{ max-width:964px; margin:112px auto 0; container:stats / inline-size; }   /* 64px sous le portrait, qui dépasse de 48px */
.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; min-width:0; }
.stat__n{ display:inline-flex; align-items:center; gap:8px; 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(--caramel-sur-marine); font-variant-numeric:tabular-nums lining-nums; }
.stat__n .star{ width:.5em; height:.5em; fill:var(--star); }
.stat__l{ font-weight:600; font-size:1.0625rem; line-height:1.4; color:var(--fond); white-space:nowrap; }
.sec-contrast .note-wrap{ margin-top:64px; }
@media (max-width:1023px){
  .split{ display:block; max-width:none; margin:0; }
  .stats-box{ margin-top:64px; }
  .split__img{ height:460px; margin-block:0; }
  .split__img::before{ display:none; }
  .split__img .ph::before{ left:50%; top:36%; }
  .split__img .ph__cap{ top:16px; bottom:auto; }   /* 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:340px; }
  .split__img .ph__cap{ top:12px; }
  .split__panel{ margin:-48px 16px 0; padding:32px 24px; }   /* recouvrement réduit de moitié, marges négatives verticales seulement */
  .stats-box{ margin-top:48px; }
  .sec-contrast .note-wrap{ margin-top:48px; }
  .islot{ width:auto; flex:0 1 120px; min-width:0; height:auto; aspect-ratio:2 / 1; }
}
/* trois colonnes tant que le plus long label (« ans à Saint-Sauvant ») tient sur une ligne ; sinon 2 + 1, l'orpheline centrée sur toute la largeur */
@container stats (max-width:559px){
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:32px; }
  .stat:last-child{ grid-column:1 / -1; }
}

/* ---------- S6 Frise numérotée : en-tête et duo à gauche (~40 %), frise verticale à droite ---------- */
.fsplit{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); grid-template-areas:"head frise" "cta frise";
  grid-template-rows:auto 1fr; column-gap:64px; align-items:start; }
.fsplit__head{ grid-area:head; margin-bottom:0; width:auto; min-width:0; }
.fsplit__head .lead{ min-width:0; }
.frise{ grid-area:frise; position:relative; }
.fsplit__cta{ grid-area:cta; margin-top:32px; }
.frise__list{ list-style:none; display:flex; flex-direction:column; gap:48px; }
.frise__step{ display:grid; grid-template-columns:56px minmax(0,1fr); column-gap:24px; align-items:start; }
.frise__dot{ position:relative; isolation:isolate; z-index:1; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--f-texte); font-weight:700; font-size:1.375rem; line-height:1;
  color:var(--fond); font-variant-numeric:lining-nums; box-shadow:0 0 0 6px var(--ring,transparent); }
.frise__dot--1{ background:var(--principale); }
.frise__dot--2{ background:var(--frise-mid); }
.frise__dot--3{ background:var(--frise-mid); }
.frise__dot--3::before{ content:""; position:absolute; inset:-2px; z-index:-1; border-radius:50%; background:var(--grad); }   /* le dernier : plein du dégradé signature */
.frise__txt{ padding-top:12px; }
.frise__txt p{ margin-top:8px; color:var(--texte-2); }
/* la ligne : dégradé signature du marine (premier repère) au caramel (dernier), calée par site.js entre le centre du premier
   et du dernier rond ; à pleine opacité */
.frise__rail{ position:absolute; left:26.5px; width:3px; top:28px; height:calc(100% - 56px); border-radius:2px; z-index:0; pointer-events:none; }
.frise__fill{ position:absolute; inset:0; border-radius:2px; background:linear-gradient(180deg,#16294F,#8F5D2E); }
@supports (background:linear-gradient(in oklab,red,blue)){ .frise__fill{ background:linear-gradient(180deg in oklab,#16294F,#8F5D2E); } }
@media (max-width:1023px){
  .fsplit{ grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "frise" "cta"; grid-template-rows:none; }
  .fsplit__head{ margin-bottom:48px; }
  .fsplit__cta{ margin-top:48px; }
}
@media (max-width:767px){
  .fsplit__head{ margin-bottom:32px; }
  .fsplit__cta{ margin-top:40px; }
  .frise__list{ gap:32px; }
  .frise__step{ grid-template-columns:48px minmax(0,1fr); column-gap:16px; }
  .frise__dot{ width:48px; height:48px; font-size:1.25rem; }
  .frise__rail{ left:22.5px; top:24px; }
  .frise__txt{ padding-top:9px; }
}

/* ---------- S7 Avis : bloc note centré, mur masonry (grille de 1px, span calculé par site.js), deux ghosts ---------- */
.rating{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:-16px auto 48px; }
.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(--star); font-variant-numeric:tabular-nums lining-nums; }
.rating__l2{ display:flex; align-items:center; gap:10px; }
.rating__c{ font-weight:600; font-size:1.0625rem; line-height:1; color:var(--texte); font-variant-numeric:tabular-nums lining-nums; }
.g-word{ height:22px; width:auto; }
.wall{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:24px; row-gap:24px; align-items:start; }
html.js .wall{ grid-auto-rows:1px; row-gap:0; grid-auto-flow:dense; }
.rv--cath{ grid-column:1; } .rv--lys{ grid-column:2; } .rv--betty{ grid-column:3; } .rv--linda{ grid-column:1; } .rv--bruno{ grid-column:2; }
.rv-cta{ margin-top:48px; }
@media (max-width:1023px){   /* 2 colonnes : col. 1 Cath puis lys aka ; col. 2 Linda, Bruno puis Betty */
  .wall{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rv--cath{ grid-column:1; order:1; } .rv--lys{ grid-column:1; order:2; } .rv--linda{ grid-column:2; order:3; }
  .rv--bruno{ grid-column:2; order:4; } .rv--betty{ grid-column:2; order:5; }
}
@media (max-width:639px){   /* 1 colonne : Cath, Linda, Bruno, lys aka, Betty */
  .wall{ grid-template-columns:minmax(0,1fr); }
  .rv--m{ grid-column:1 !important; }
  .rv--cath{ order:1; } .rv--linda{ order:2; } .rv--bruno{ order:3; } .rv--lys{ order:4; } .rv--betty{ order:5; }
  .rating{ margin-bottom:32px; }
  .rating__n{ font-size:2.25rem; }
  .stars--lg{ --sz:20px; }
  .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; letter-spacing:0; }
.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.3125rem; line-height:1.35; letter-spacing:-.01em;
  color:var(--texte); border-radius:var(--r-btn); transition:color var(--dur-st) var(--ease),background-color var(--dur-st) var(--ease); }
.faq__q:hover{ color:var(--principale); background:rgba(228,232,240,.6); }
.faq__q .ic{ width:24px; height:24px; margin-top:2px; color:var(--secondaire); 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(--texte-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.1875rem; padding:16px 8px; } .faq__a p{ padding:0 8px 16px; } .faq__item + .faq__item::before{ left:8px; right:8px; } }

/* ---------- S9 Formulaire de devis en carte, avec coordonnées (7 / 5), carte de confiance en tête de la colonne ---------- */
.cgrid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-areas:"form conf" "form coord" "form hrs";
  grid-template-rows:auto auto 1fr; column-gap:32px; row-gap:24px; align-items:start; }
.tcard{ grid-area:conf; }
.cgrid__form{ grid-area:form; }
.icard--coord{ grid-area:coord; }
.icard--hrs{ grid-area:hrs; }
.fcard{ padding:48px; }
.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(--texte); }
.field .opt{ font-weight:400; color:var(--texte-2); margin-left:4px; }
.hint{ font-size:var(--caption); line-height:1.5; color:var(--texte-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(--texte); background:var(--surface); border:1px solid rgba(28,34,48,.22); border-radius:var(--r-btn); margin:0;
  transition:border-color var(--dur-st) var(--ease),background-color var(--dur-st) var(--ease); }
.field textarea{ resize:vertical; min-height:150px; }
.field ::placeholder{ color:#6E7078; opacity:1; }   /* gris lisible (4,9:1 sur la carte) */
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(28,34,48,.45); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--principale); outline-offset:3px; border-color:var(--principale); }
.field select{ appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer; }
.field select:invalid{ color:#6E7078; }
.sel{ position:relative; }
.sel__ic{ position:absolute; right:14px; top:50%; width:20px; height:20px; margin-top:-10px; color:var(--secondaire); pointer-events:none; }
.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:#6E7078; 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(--texte); }
.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(28,34,48,.3); background:var(--surface); color:var(--secondaire);
  transition:background-color var(--dur-st) var(--ease),border-color var(--dur-st) var(--ease),color var(--dur-st) var(--ease); }
.file__zone .ic{ width:24px; height:24px; }
.file__input:hover + .file__zone{ background:var(--principale-claire); border-color:var(--principale); color:var(--principale); }
.file__input:focus-visible + .file__zone{ outline:2px solid var(--principale); 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(28,34,48,.22); background:var(--surface); }
.file__chosen > .ic{ width:20px; height:20px; color:var(--secondaire); }
.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(--principale); transition:background-color var(--dur-st) var(--ease); }
.file__clear:hover{ background:var(--principale-claire); }
.form-send{ margin-top:32px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.form-ko{ font-weight:600; color:var(--erreur); }
.form-foot{ margin-top:16px; font-size:var(--caption); line-height:1.5; color:var(--texte-2); }
.form-foot a{ color:var(--principale); text-decoration:underline; text-underline-offset:2px; cursor:pointer; transition:color var(--dur-st) var(--ease); }
.form-foot a:hover{ color:var(--secondaire); }
.form-ok{ padding:24px; border-radius:var(--r-btn); background:var(--principale-claire); color:var(--texte); font-weight:600; }
.form-ok:focus{ outline:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* carte de confiance : bordure fine au dégradé signature, rangées séparées par des filets */
.tcard{ padding:32px; border:1.5px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box; }
.tc__top{ display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; }
.tc__note{ display:flex; flex-direction:column; gap:6px; }
.tc__n{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-texte); font-weight:700; font-size:2.5rem; line-height:1;
  letter-spacing:-.01em; color:var(--star); font-variant-numeric:tabular-nums lining-nums; }
.tc__n .star{ width:.55em; height:.55em; fill:var(--star); }
.tc__c{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.9375rem; line-height:1; color:var(--texte); }
.tc__c .g-word{ height:18px; }
.tc__sep{ height:1px; background:var(--filet); margin:24px 0; }
.rv--bare{ padding:0; background:none; box-shadow:none; border-radius:0; }
.tc__slots{ display:flex; gap:12px; }
.tc__slots .islot{ flex:0 1 120px; width:auto; min-width:0; height:auto; aspect-ratio:2 / 1; }
/* Contact : cinq avis à feuilleter, chevrons discrets sous l'avis (ronds pleins marine de 24px, chevron crème de 12px) */
.tcr__track{ position:relative; display:flex; align-items:flex-start; gap:32px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain; scrollbar-width:none; transition:height var(--dur) var(--ease); }
.tcr__track::-webkit-scrollbar{ display:none; }
.tcr__track:focus-visible{ outline:2px solid var(--principale); outline-offset:4px; border-radius:var(--r-btn); }
.tcr__track > .rv{ flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; }
.tcr__nav{ display:flex; justify-content:center; gap:20px; margin-top:16px; }
.chev{ position:relative; width:24px; height:24px; border-radius:50%; background:var(--principale); color:var(--fond);
  display:inline-flex; align-items:center; justify-content:center;
  transition:opacity var(--dur) var(--ease),transform var(--dur-st) var(--ease),background-color var(--dur-st) var(--ease); }
.chev::before{ content:""; position:absolute; inset:-10px; }   /* zone cliquable de 44px, invisible */
.chev .ic{ width:12px; height:12px; }
.chev:hover:not(:disabled){ transform:scale(1.12); background:#22386A; }
.chev:disabled{ opacity:.35; cursor:default; }
/* cartes Coordonnées et Horaires, sobres */
.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(--secondaire); }
.icard__rows{ display:flex; flex-direction:column; gap:12px; }
.icard .row{ display:flex; align-items:flex-start; gap:12px; }
.icard .row .ic{ color:var(--secondaire); margin-top:3px; }
.icard .row a{ cursor:pointer; display:inline-block; padding-block:10px; margin-block:-10px; overflow-wrap:anywhere; transition:color var(--dur-st) var(--ease); }
.icard .row a:hover{ color:var(--principale); text-decoration:underline; text-underline-offset:3px; }
.icard__cta{ margin-top:24px; }
.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(--texte-2); white-space:nowrap; }
@media (max-width:1023px){
  .cgrid{ grid-template-columns:minmax(0,1fr); grid-template-areas:"conf" "form" "coord" "hrs"; grid-template-rows:none; }
}
@media (max-width:767px){
  .card,.fcard{ padding:32px 24px; }
  .icard,.tcard{ padding:32px 24px; }
  .form-send{ align-items:stretch; }
  .form-send .btn{ width:100%; }
  .tc__n{ font-size:2.25rem; }
}

/* ---------- Footer : marine unie, Maps bord à bord, identité en trois colonnes ---------- */
.foot{ background:var(--principale); color:var(--fond); font-size:1rem; }
.foot__map{ position:relative; height:360px; background:var(--principale-claire); }
.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-st) var(--ease); }
.foot__logolink:hover{ opacity:.85; }
.foot__name{ font-size:1.625rem; line-height:1.2; color:var(--fond); }
.foot__pos{ display:block; font-family:var(--f-texte); font-size:1.0625rem; font-weight:600; letter-spacing:0; line-height:1.35; color:var(--caramel-sur-marine); margin-top:4px; }
.foot__tag{ color:rgba(250,244,232,.78); margin-top:12px; }
.trust--foot{ display:flex; justify-content:flex-start; gap:12px; margin-top:24px; align-self:stretch; }
.trust--foot .islot{ flex:0 1 96px; width:auto; min-width:0; height:auto; aspect-ratio:2 / 1; background:rgba(250,244,232,.06); border-color:rgba(250,244,232,.32); }
.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(--caramel-sur-marine); 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; color:var(--fond);
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px;
  transition:text-decoration-color var(--dur-st) var(--ease),transform var(--dur-st) var(--ease),color var(--dur-st) var(--ease); }
.foot__links a:hover,.foot__info a:hover{ color:var(--caramel-sur-marine); text-decoration-color:currentColor; transform:translateX(3px); }
.foot__parent{ color:var(--fond); }
.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(--caramel-sur-marine); }
.foot__sep{ height:1px; background:rgba(250,244,232,.18); 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:rgba(250,244,232,.78); }
.foot :focus-visible{ outline-color:var(--fond); }
@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
   (414 + 191 + 233 + 2 × 64 + marges 2 × 24 + barre de défilement 15 = 1029px) : une colonne, tablette comprise */
@media (max-width:1028px){
  .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; }
  .foot__bar{ flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
}
@media (min-width:1024px){ .foot > .container{ max-width:var(--container-header); } }
@media (min-width:1029px){
  .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; }
}

/* ---------- 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:48px; height:48px;   /* 48px, icône 20px (fiche du 05/11) */
    border-radius:50%; background:var(--principale); color:var(--fond); display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 2px rgba(92,58,30,.12),0 8px 24px rgba(92,58,30,.14),0 16px 40px rgba(92,58,30,.08);   /* l'ombre du site seule, sans anneau clair (demande de Nicolas, 06/11) */
    transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease),transform var(--dur-st) var(--ease),background-color var(--dur-st) var(--ease); }
  .fcall .ic{ width:20px; height:20px; }
  .fcall:hover{ background:#22386A; 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(--principale);
    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 : Phase finale (activés par build.py, un à la fois)
   ========================================================================== */
/* indicateur de scroll : la lueur (transparent → marine → transparent sur 40 % de la ligne), vitesse constante, 2,4 s ;
   fondu une fois la page défilée de 40 % d'un écran */
html[data-glow="1"] .scroll-ind__line::after{ content:""; position:absolute; left:0; top:0; width:100%; height:40%;
  background:linear-gradient(180deg,rgba(22,41,79,0),var(--principale),rgba(22,41,79,0)); animation:ind-glow 2.4s linear infinite; }
@keyframes ind-glow{ from{ transform:translateY(-100%); } to{ transform:translateY(250%); } }
.scroll-ind.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }
.scroll-ind:not(.is-gone){ transition:opacity .6s var(--ease),visibility 0s,color var(--dur-st) var(--ease); }
/* reveal : é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; }
/* frise : chaque étape apparaît au passage de la ligne, puis reste ; chaque rond s'allume quand la ligne l'atteint */
html.frise-on .frise__fill{ will-change:clip-path; }
html.frise-on .frise__step{ opacity:0; transform:translateY(28px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
html.frise-on .frise__step.is-in{ opacity:1; transform:none; }
html.frise-on .frise__dot{ transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease); }
html.frise-on .frise__step:not(.is-lit) .frise__dot{ background:rgba(22,41,79,.18); }
html.frise-on .frise__dot--3::before{ opacity:0; transition:opacity var(--dur) var(--ease); }
html.frise-on .frise__step.is-lit .frise__dot--3::before{ opacity:1; }
/* hero pinné, effet rideau : le hero reste figé, le corps entier (couche opaque unique) remonte par-dessus */
.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(92,58,30,.08),0 -1px 2px rgba(92,58,30,.05); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  html[data-glow="1"] .scroll-ind__line::after{ animation:none !important; transform:translateY(75%); }   /* la lueur figée au milieu */
  *,*::before,*::after{ transition-duration:.001ms !important; transition-delay:0s !important; animation-duration:.001ms !important;
    animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  .tk.run{ animation:none !important; }
  .tk--q{ transform:none !important; }
  .qband__tk{ overflow-x:auto; }
  html.js-ready [data-reveal],html.frise-on .frise__step{ opacity:1 !important; transform:none !important; }
  .annonce__in{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .annonce .tk > .annonce__set[aria-hidden]{ display:none !important; }
  @media (max-width:619px){ .annonce__set{ padding-inline:var(--pad); } }
  .fcall::before{ display:none; }
  .btn-fill .btn-fill__ic{ transform:none !important; }
}