/* ── 01-socle.css ─────────────────────────────────── */
/* ==========================================================================
   SCIAGE DE BÉTON UNIK, version 15
   Un site signé ganolyk

   Direction : clair, aéré, des cartes qui flottent.

   LE SITE EST BLANC, ET SEULEMENT BLANC. Il n'y a plus de thème noir du tout
   (décision du client, 15 sept. 2026) : ni bouton, ni règle de préférence
   système, ni jeu de jetons de rechange. Une couleur de moins à maintenir, et une page qui
   ne peut plus s'ouvrir autrement que blanche.

   Le vocabulaire : un dégradé béton très doux derrière le héros, des cartes
   blanches à grands rayons posées par-dessus, des étiquettes en pastille avec
   une puce, des boutons à flèche ronde, et le bleu marine de la marque en
   aplat pour les blocs qui doivent arrêter l'œil. Aucune autre couleur.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff?v=ea2549f4') format('woff-variations'),
       url('../fonts/archivo-var.woff?v=ea2549f4') format('woff');
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════ jetons de couleur */
:root {
  color-scheme: light;

  --fond:       #FFFFFF;
  --fond-2:     #F4F4F1;   /* béton frais */
  --fond-3:     #E9E9E4;
  --surface:    #FFFFFF;

  --trait:      #E2E2DC;
  --trait-fort: #C9C9C2;
  --bord-champ: #6E757C;   /* 4,7:1 sur blanc — WCAG 1.4.11 */

  --encre:      #16181C;
  --texte:      #2A2D33;
  --texte-doux: #4E555B;
  --texte-pale: #636A72;   /* 4,5:1 même sur --fond-3, la surface la plus foncée */

  --lame:       #2B3A8F;   /* le bleu du camion */
  --lame-fort:  #1E2A6B;
  --lame-clair: #4B5BC4;
  --lame-vif:   #93A2F5;   /* le seul bleu lisible sur une photo sombre */
  --lame-voile: #EDEFFA;
  --sur-lame:   #FFFFFF;

  --nuit:       #101215;   /* les rares sections sombres */
  --nuit-2:     #191C21;
  --nuit-texte: #F0F0EC;
  --nuit-doux:  #A6AEB6;
  --nuit-trait: rgba(255,255,255,.13);
  --nuit-lame:  #8B99EA;

  --alerte:       #B3261E;   /* 3,4:1 sur blanc — contour de champ refusé */
  --alerte-voile: rgba(179,38,30,.16);

  /* L'accent plein : le bleu marine du lettrage des camions, rien d'autre.
     (Une version de travail essayait le jaune-vert des dossards — le client
     n'en voulait pas. Ce qui rend ce site différent des autres, c'est le
     gabarit : le dégradé, les cartes qui flottent, les bulles. Pas une
     couleur d'emprunt.) */
  --vif:        #2B3A8F;
  --vif-fonce:  #1E2A6B;
  --sur-vif:    #FFFFFF;

  --degrade:    linear-gradient(168deg, #E4E7EE 0%, #EFF1F5 36%, #FAFBFC 70%, #FFFFFF 100%);

  --corail:     #EE5539;   /* ganolyk, pied de page seulement */

  --ombre:      0 1px 2px rgba(22,24,28,.04), 0 12px 30px -18px rgba(22,24,28,.22);
  --ombre-fort: 0 2px 6px rgba(22,24,28,.06), 0 30px 60px -28px rgba(22,24,28,.34);

  --marge:  clamp(1.15rem, .4rem + 3.2vw, 5rem);
  --bande:  clamp(3.5rem, 2rem + 6.5vw, 7rem);
  --maxw:   1340px;
  --h-entete: 86px;   /* hauteur de la barre : le héros remonte d'autant */
  --r:      20px;
  --r-sm:   12px;
  --r-pill: 999px;
  --ease:   cubic-bezier(.22,.61,.36,1);

  /* Distance exacte entre le bord du CONTENU et le bord de l'écran. C'est ce
     qu'une photo doit remonter pour aller toucher le bord — et pas un pixel de
     plus, sinon la page se met à glisser de côté. */
  --fuite:  calc(max(0px, (100vw - var(--maxw)) / 2) + var(--marge));
}

/* ═══════════════════════════════════════════════════════════════════ base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-stretch: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;         /* repli */
  overflow-x: clip;           /* le bon : ne crée pas de conteneur de
                                 défilement, donc l'en-tête reste collante */
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Le sprite des pictogrammes, collé une fois par page juste après <body>.
   IL DOIT ÊTRE CACHÉ PAR UNE CLASSE, PAS PAR UN style= EN LIGNE : Hostinger
   sert un en-tête CSP dont `style-src` n'a pas 'unsafe-inline', donc tout
   attribut style est purement et simplement ignoré en production. Un <svg>
   sans hauteur déclarée retombe alors sur les 150 px du navigateur, pousse
   toute la page vers le bas et fait passer l'en-tête sur du blanc — c'est
   exactement le bogue « on voit une scie bleue et rien d'autre ». */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: var(--lame-fort); text-underline-offset: 3px; }
::selection { background: var(--lame); color: var(--sur-lame); }
:focus-visible { outline: 3px solid var(--lame); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--marge); }
.wrap--lire { max-width: 860px; }

.saut {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--lame); color: var(--sur-lame); padding: 12px 20px;
  font-weight: 700; border-radius: 0 0 var(--r-sm) 0;
}
.saut:focus { left: 0; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ═══════════════════════════════════════════════════════════ typographie
   Bas de casse, largeur normale, contraste de graisse. Les capitales sont
   réservées aux toutes petites étiquettes. */
h1, h2, h3, h4 {
  font-weight: 800;
  font-stretch: 100%;
  line-height: 1.04;
  letter-spacing: -.022em;
  color: var(--encre);
  margin: 0 0 .5em;
  text-wrap: balance;
  /* PAS de césure dans un titre. « hyphens: auto » avait été mis pour empêcher
     un mot long en capitales de déborder un écran de 360 px — mais il coupait
     BÉ-TON en plein héros, à toutes les largeurs. overflow-wrap suffit : il ne
     casse un mot que s'il ne rentre vraiment pas, et sans tiret. */
  hyphens: manual; -webkit-hyphens: manual;
  /* « anywhere » et non « break-word » : les deux cassent la ligne pareil, mais
     seul « anywhere » compte dans la largeur MINIMALE du bloc. Avec break-word,
     une colonne de grille s'élargissait quand même jusqu'au mot le plus long —
     c'est ce qui poussait « COMPLÉMENTAIRES » hors d'un écran de 320 px. */
  overflow-wrap: anywhere;
}
/* Les grands titres sont en CAPITALES, serrées. C'est le geste du site que le
   client a montré en exemple, et ça tient dans un métier de chantier. Les h3 et
   h4, eux, restent en bas-de-casse : en capitales, une carte devient illisible. */
h1, h2 { text-transform: uppercase; letter-spacing: -.012em; }
h1 { font-size: clamp(1.6rem, 1.1rem + 3.6vw, 4.1rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 2.5vw, 3rem); }
h3 { font-size: clamp(1.08rem, .98rem + .6vw, 1.35rem); letter-spacing: -.018em; }
h4 { font-size: 1rem; letter-spacing: -.012em; }

/* un mot du titre dans le bleu de la marque, ou souligné : les deux accents du
   site de référence, transposés */
h1 em, h2 em { font-style: normal; color: var(--lame); }
.souligne { box-shadow: inset 0 -.14em 0 var(--lame); }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.chapo {
  font-size: clamp(1.06rem, 1rem + .45vw, 1.24rem);
  line-height: 1.55; color: var(--texte-doux);
}
.discret { color: var(--texte-doux); }

/* L'étiquette de section : une pastille à puce, pas un titre en capitales
   étirées. C'est le petit élément qui donne le ton au reste de la page. */
.etiq {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .42em .95em .42em .75em;
  font-size: .78rem; font-weight: 600; letter-spacing: -.005em;
  color: var(--texte-doux);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-pill);
  margin: 0 0 1.15rem;
}
.etiq::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--vif); box-shadow: 0 0 0 3px rgba(43,58,143,.16); flex: none;
}
.etiq--nu::before { display: none; }
.bande--beton .etiq { background: var(--fond); }

/* le trait de scie, gardé comme signature mais discret */
.kerf { height: 2px; border: 0; border-radius: 2px; margin: 0;
        background: linear-gradient(90deg, var(--lame), transparent); }

/* ═══════════════════════════════════════════════════════════════ boutons */
.btn {
  --f: var(--lame); --t: var(--sur-lame);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .95em 1.55em;
  font-family: inherit; font-size: .94rem; font-weight: 700; line-height: 1;
  letter-spacing: -.005em;
  color: var(--t); background: var(--f);
  border: 1.5px solid var(--f); border-radius: var(--r-pill);
  text-decoration: none; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { --f: var(--lame-fort); color: var(--t); transform: translateY(-1px); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn--ligne { --f: transparent; --t: var(--encre); border-color: var(--trait-fort); }
.btn--ligne:hover { --f: var(--encre); --t: var(--fond); border-color: var(--encre); }
.btn--lg { padding: 1.08em 1.85em; font-size: 1rem; }
.btn--sm { padding: .68em 1.15em; font-size: .85rem; }

/* Le bouton vif : l'accent des dossards, réservé aux appels à l'action. */
.btn--vif { --f: var(--vif); --t: var(--sur-vif); }
.btn--vif:hover { --f: var(--vif-fonce); }

/* La flèche dans son rond, collée au bord droit du bouton — le geste qui
   revient partout dans la référence. */
.btn--fleche { padding-right: .5em; }
.btn--fleche .rond {
  display: inline-grid; place-items: center; flex: none;
  width: 2em; height: 2em; margin-left: .25em;
  border-radius: 50%; background: var(--fond);
  transition: transform .2s var(--ease);
}
.btn--fleche .rond svg { width: .78em; height: .78em; color: var(--encre); }
.btn--fleche:hover .rond { transform: translateX(3px); }

/* Le même rond, seul, posé dans le coin d'une carte. */
.rond-seul {
  display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem;
  border-radius: 50%; background: var(--vif); color: var(--sur-vif);
  border: 0; flex: none; transition: transform .2s var(--ease);
}
.rond-seul svg { width: .85rem; height: .85rem; }
/* ═══════════════════════════════════════════════════════════════ sections */
main { position: relative; }
.bande { padding-block: var(--bande); position: relative; }
.bande--serre { padding-block: calc(var(--bande) * .62); }
.bande--beton { background: var(--fond-2); }
.bande--vif { background: var(--vif); }
.bande--vif .etiq { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.26); color: var(--sur-vif); }
.bande--vif .etiq::before { background: var(--sur-vif); box-shadow: none; }
.bande--vif h2, .bande--vif h3, .bande--vif .chapo, .bande--vif p { color: var(--sur-vif); }
.bande--vif .chapo { opacity: .8; }

/* Une section sombre au milieu d'une page blanche REDÉFINIT SES JETONS. On ne
   repeint pas les éléments un par un : la première version faisait ça, et la
   moindre règle un peu plus précise (.savait__txt p, 0-2-0) repassait par-dessus
   avec l'encre du thème clair — du gris foncé sur du noir. En changeant les
   jetons, tout ce qui est dedans suit, y compris ce qu'on écrira demain. */
.bande--nuit, .sur-nuit {
  --fond:       var(--nuit);
  --fond-2:     var(--nuit-2);
  --fond-3:     #23272C;
  --surface:    var(--nuit-2);

  --trait:      var(--nuit-trait);
  --trait-fort: rgba(255,255,255,.3);
  --bord-champ: #8A939C;

  --encre:      var(--nuit-texte);
  --texte:      var(--nuit-texte);
  --texte-doux: var(--nuit-doux);
  --texte-pale: var(--nuit-doux);

  --lame:       var(--nuit-lame);
  --lame-fort:  var(--nuit-lame);
  --lame-voile: rgba(139,153,234,.14);

  --ombre:      0 1px 2px rgba(0,0,0,.5), 0 12px 30px -18px rgba(0,0,0,.8);
  --ombre-fort: 0 2px 6px rgba(0,0,0,.55), 0 30px 60px -28px rgba(0,0,0,.9);
}
.bande--nuit { background: var(--nuit); color: var(--nuit-texte); }
.sur-nuit .btn { --f: var(--lame); --t: var(--nuit); }
.sur-nuit .btn:hover { --f: var(--nuit-lame); }
.sur-nuit .btn--ligne { --f: transparent; --t: var(--nuit-texte); border-color: rgba(255,255,255,.32); }
.sur-nuit .btn--ligne:hover { --f: var(--nuit-texte); --t: var(--nuit); border-color: var(--nuit-texte); }

.tete-bande { max-width: 58ch; margin-bottom: clamp(2rem, 1rem + 2.6vw, 3.2rem); }
.tete-bande .chapo { margin-top: .85rem; }

/* apparition au défilement — jamais bloquante */
.js .monte { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .monte.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .monte { opacity: 1; transform: none; transition: none; } }


/* ── 02-entete-heros.css ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════ en-tête
   Blanc, mince, posé. Plus de bandeau sombre : c'est la vidéo qui fait le
   contraste, pas l'interface. */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--fond) 90%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .25s var(--ease);
}
.hdr.colle { border-bottom-color: var(--trait); }

/* Sur une page à grand héros, l'en-tête flotte SUR l'image : fond transparent,
   écriture blanche, logo blanc. Dès le premier défilement, elle redevient la
   barre blanche du reste du site.

   Elle est en position FIXE ici, pas collante. La version précédente la
   laissait collante et remontait le héros d'exactement 86 px pour passer
   dessous — un nombre écrit en dur qui devait correspondre à la hauteur réelle
   de la barre. Dès que cette hauteur changeait d'un navigateur à l'autre, il
   restait une bande blanche en haut de la page. En position fixe, la barre ne
   prend aucune place dans le flux : le héros commence à zéro, sans calcul. */
body.a-heros .hdr { position: fixed; left: 0; right: 0; top: 0; }
body.a-heros .hdr:not(.colle) {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.a-heros .hdr:not(.colle) .marque img.pour-clair { visibility: hidden; }
body.a-heros .hdr:not(.colle) .marque { position: relative; }
body.a-heros .hdr:not(.colle) .marque img.pour-nuit {
  position: absolute; inset: 0; display: block; visibility: visible;
}
.marque img.pour-nuit { display: none; }
body.a-heros .hdr:not(.colle) .nav > ul > li > a,
body.a-heros .hdr:not(.colle) .nav > ul > li > button,
body.a-heros .hdr:not(.colle) .hdr__tel { color: #fff; }
body.a-heros .hdr:not(.colle) .nav > ul > li > a:hover,
body.a-heros .hdr:not(.colle) .nav > ul > li > button:hover {
  color: #fff; background: rgba(255,255,255,.16);
}
body.a-heros .hdr:not(.colle) .burger span,
body.a-heros .hdr:not(.colle) .burger span::before,
body.a-heros .hdr:not(.colle) .burger span::after { background: #fff; }

/* Tiroir ouvert : l'en-tête reprend son encre foncée. Ces règles viennent APRÈS
   celles du mode « sur l'image » ET portent une classe de plus — sans les deux,
   elles perdent l'égalité de spécificité et le logo comme le bouton de
   fermeture restaient blancs sur le panneau blanc. Exactement le même piège que
   .nav a contre .fam__item, deux versions plus tôt. */
body.menu-ouvert .hdr { background: var(--fond); }
body.a-heros.menu-ouvert .hdr:not(.colle) .marque img.pour-clair { visibility: visible; }
body.a-heros.menu-ouvert .hdr:not(.colle) .marque img.pour-nuit { display: none; }
body.a-heros.menu-ouvert .hdr:not(.colle) .nav > ul > li > a,
body.a-heros.menu-ouvert .hdr:not(.colle) .nav > ul > li > button,
body.a-heros.menu-ouvert .hdr:not(.colle) .hdr__tel { color: var(--texte); }
body.a-heros.menu-ouvert .hdr:not(.colle) .burger span::before,
body.a-heros.menu-ouvert .hdr:not(.colle) .burger span::after { background: var(--encre); }
body.a-heros.menu-ouvert .hdr:not(.colle) .burger[aria-expanded="true"] span { background: transparent; }
.hdr__in { display: flex; align-items: center; gap: clamp(.6rem, .2rem + 1.4vw, 1.6rem);
           min-height: var(--h-entete); position: relative; }

.marque { flex: none; display: block; line-height: 0; }
.marque img { height: clamp(38px, 30px + 1.6vw, 52px); width: auto; }
/* Le lettrage fait presque six fois sa hauteur en largeur : à 320 px d'écran,
   un logo de 38 px pousse l'en-tête hors de la page. On le rétrécit, et on
   retire le téléphone de la barre — il est déjà dans la barre d'action fixe,
   en bas de l'écran, à cette taille-là. */
@media (max-width: 480px) {
  .marque img { height: 34px; }
  .hdr__tel { display: none; }
}

.nav { margin-left: auto; }
.nav > ul { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; }
/* Uniquement les liens de PREMIER niveau. Sans le « > ul > li > », cette règle
   gagne aussi sur .fam__item (0-1-1 contre 0-1-0) et écrase sa grille : les
   descriptions du menu partaient alors sur une seule ligne, hors de l'écran. */
.nav > ul > li > a, .nav > ul > li > button {
  display: inline-flex; align-items: center; gap: .35em; padding: .55em .75em;
  font-family: inherit; font-size: .89rem; font-weight: 600; letter-spacing: -.008em;
  color: var(--texte); background: none; border: 0; border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.nav > ul > li > a:hover, .nav > ul > li > button:hover,
.nav > ul > li > a[aria-current="page"] {
  color: var(--lame-fort); background: var(--lame-voile);
}
.nav .chev { width: .68em; height: .68em; transition: transform .2s var(--ease); }
.nav [aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (max-width: 1049px) { .nav { display: none; } }

/* — le menu des services : QUATRE familles, pas vingt liens — */
.fam {
  position: absolute; left: 50%; top: calc(100% - 2px);
  transform: translateX(-50%) translateY(-6px);
  width: min(980px, calc(100vw - 2rem));
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r); box-shadow: var(--ombre-fort);
  padding: .55rem;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.a-fam { position: static; }
.a-fam:hover .fam, .a-fam:focus-within .fam, .fam.ouvert {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.fam__item {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .9rem;
  padding: .9rem 1rem; border-radius: var(--r-sm); text-decoration: none;
  transition: background .16s var(--ease);
}
.fam__item:hover { background: var(--lame-voile); }
.fam__item svg { grid-row: 1 / 3; width: 34px; height: 34px; padding: 7px;
                 color: var(--lame); background: var(--lame-voile); border-radius: 9px; }
.fam__item:hover svg { background: var(--surface); }
.fam__item b { font-size: .96rem; font-weight: 700; color: var(--encre); letter-spacing: -.014em; }
.fam__item span { font-size: .83rem; line-height: 1.42; color: var(--texte-doux); }
.fam__tous {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .8rem 1rem; margin-top: .2rem;
  border-top: 1px solid var(--trait); border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: .86rem; font-weight: 700; color: var(--lame-fort); text-decoration: none;
}
.fam__tous:hover { background: var(--lame-voile); }
.fam__tous svg { width: 1em; height: 1em; }

/* — actions — */
.hdr__act { display: flex; align-items: center; gap: .45rem; flex: none; }
@media (max-width: 1049px) { .hdr__act { margin-left: auto; } }
.hdr__tel {
  display: inline-flex; align-items: center; gap: .4em; padding: .5em .7em;
  font-size: .91rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--encre); text-decoration: none; white-space: nowrap; border-radius: var(--r-sm);
}
.hdr__tel:hover { color: var(--lame-fort); background: var(--lame-voile); }
.hdr__tel svg { width: 1em; height: 1em; }
@media (max-width: 720px) { .hdr__tel span { display: none; } }

@media (max-width: 580px) { .hdr__act .btn { display: none; } }

.burger { width: 40px; height: 36px; display: none; place-items: center;
          background: none; border: 1px solid var(--trait); border-radius: var(--r-sm);
          cursor: pointer; color: var(--encre); }
@media (max-width: 1049px) { .burger { display: grid; } }
.burger span { display: block; width: 17px; height: 2px; background: currentColor;
               border-radius: 2px; position: relative; transition: background .2s; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 2px;
  background: currentColor; border-radius: 2px; transition: transform .24s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* — tiroir mobile — */
/* z-index 85, SOUS l'en-tête (90) : sinon le panneau recouvre le bouton du
   menu et il n'y a plus aucun moyen de le refermer. C'était le cas. */
.mnav { position: fixed; inset: 0; z-index: 85; background: var(--fond);
        padding: calc(var(--h-entete) + 1rem) var(--marge) 2rem;
        overflow-y: auto; overscroll-behavior: contain;
        display: none; flex-direction: column; gap: 1.4rem; }
.mnav.ouvert { display: flex; }
.mnav__fam { display: flex; flex-direction: column; gap: .5rem; }
.mnav__fam > a {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem;
  padding: .85rem 0; border-bottom: 1px solid var(--trait); text-decoration: none;
}
.mnav__fam > a svg { grid-row: 1 / 3; width: 32px; height: 32px; padding: 6px;
                     color: var(--lame); background: var(--lame-voile); border-radius: 8px; }
.mnav__fam > a b { font-size: 1.02rem; font-weight: 700; color: var(--encre); }
.mnav__fam > a span { font-size: .85rem; color: var(--texte-doux); line-height: 1.4; }
.mnav__liens { display: flex; flex-wrap: wrap; gap: .4rem; }
.mnav__liens a { font-size: .87rem; color: var(--texte-doux); text-decoration: none;
                 padding: .4em .8em; background: var(--fond-2); border-radius: var(--r-pill); }
.mnav__bas { display: grid; gap: .6rem; margin-top: auto; padding-top: 1rem; }
.mnav__bas .btn { width: 100%; padding: 1em 1.2em; }

/* ══════════════════════════════════════════════════════════════════ héros
   Plein écran, la vidéo derrière, le texte CENTRÉ par-dessus — le gabarit du
   site que le client a montré en exemple. Le titre en capitales, un bout en
   bleu, deux boutons en pastille, et la vraie note Google en dessous.

   Le site reste blanc : c'est l'IMAGE qui est sombre, pas la page. Tout ce qui
   suit le héros est sur fond clair. */
.heros { position: relative; isolation: isolate; }
/* Le contenu du héros descend sous la barre. Pas de marge négative, pas de
   nombre à faire correspondre : la barre est fixe, elle ne prend pas de place. */
body.a-heros .heros__in { padding-top: calc(var(--h-entete) + clamp(2rem, 1.4rem + 3vw, 4.5rem)); }
.heros__film { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--nuit); }
.heros__film video, .heros__film img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 46% 45%;
}
.heros__film::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,12,16,.72) 0%, rgba(10,12,16,.3) 34%,
                            rgba(10,12,16,.46) 72%, rgba(10,12,16,.82) 100%),
    radial-gradient(ellipse 80% 62% at 50% 52%, rgba(10,12,16,.5), transparent 70%);
}

.heros__in {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem) clamp(3rem, 2rem + 4vw, 5.5rem);
  gap: 1.25rem;
}
.heros__in h1 {
  color: #fff; margin: 0; max-width: 17ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
/* Le deuxième bloc du titre part sur sa propre ligne, dans un bleu assez
   clair pour tenir sur la vidéo. Le bleu marine de la marque, lui, est
   illisible sur une image sombre. */
.heros__in h1 em { display: block; color: var(--lame-vif); }

/* la pastille de lieu, avec sa puce — reprise telle quelle du modèle */
.heros__lieu {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-pill); padding: .5em 1.1em;
  backdrop-filter: blur(8px);
}
.heros__lieu::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lame-vif); flex: none;
  /* sur téléphone le texte passe sur deux lignes : la puce doit rester
     collée à la PREMIÈRE, pas flotter au milieu du bloc */
  align-self: flex-start; margin-top: .42em;
}
@media (max-width: 520px) {
  .heros__lieu { font-size: .7rem; letter-spacing: .06em; }
}

/* la licence, barre verticale à gauche */
.heros__rbq {
  margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.76);
  border-left: 2px solid var(--lame-vif); padding-left: .75em;
}

.heros__cta { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; }
.heros__cta .btn--ligne { --t: #fff; border-color: rgba(255,255,255,.4); }
.heros__cta .btn--ligne:hover { --f: #fff; --t: var(--encre); border-color: #fff; }
@media (max-width: 460px) { .heros__cta .btn { width: 100%; } }

/* la pastille d'avis Google : chiffres réels, relevés le 14 septembre 2026 */
.heros__note {
  display: inline-flex; align-items: center; gap: .6em;
  background: rgba(10,12,16,.55); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-pill); padding: .5em 1.05em;
  backdrop-filter: blur(8px); text-decoration: none;
  font-size: .8rem; color: rgba(255,255,255,.9);
}
.heros__note .etoiles { display: flex; gap: .08em; color: #F5C518; }
.heros__note .etoiles svg { width: 13px; height: 13px; }
.heros__note b { font-weight: 700; color: #fff; }

/* le bouton lecture / pause, en bas à droite de l'écran de héros */
.film__ctrl {
  position: absolute; right: clamp(1rem, 3vw, 2.2rem); bottom: clamp(1rem, 3vw, 2.2rem); z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(10,12,16,.5); color: #fff; border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r-pill); cursor: pointer; backdrop-filter: blur(6px);
  transition: background .18s var(--ease);
}
.film__ctrl:hover { background: rgba(10,12,16,.85); }
.film__ctrl svg { width: 15px; height: 15px; }
.film__ctrl .i-pause { display: none; }
.film__ctrl[data-etat="joue"] .i-lire { display: none; }
.film__ctrl[data-etat="joue"] .i-pause { display: block; }


/* ── 03-blocs.css ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════ rangée en deux temps
   Une photo qui touche le bord de l'écran d'un côté, le texte de l'autre.
   Les rangées alternent, et c'est ce qui donne son rythme à la page. */
.duo { display: grid; gap: clamp(1.8rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 940px) {
  .duo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .duo--inverse > .duo__img { order: 2; }
}
.duo__img { position: relative; border-radius: var(--r); overflow: hidden; background: var(--fond-3); }
.duo__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.duo__txt { min-width: 0; }
.duo__txt h2 { margin-bottom: .5em; }

/* la photo déborde vers le bord de l'écran : c'est la respiration du gabarit */
@media (min-width: 940px) {
  .duo--bord .duo__img { margin-left: calc(-1 * var(--fuite)); border-radius: 0 var(--r) var(--r) 0; }
  .duo--bord.duo--inverse .duo__img { margin-left: 0; margin-right: calc(-1 * var(--fuite));
                                      border-radius: var(--r) 0 0 var(--r); }
}

/* ═══════════════════════════════════════════ les quatre familles, en photo
   Une photo pleine, un voile qui fonce vers le bas, le nom en capitales et la
   flèche dans son coin. C'est la carte du site que le client a montré. */
.familles { display: grid; gap: clamp(.9rem, .5rem + 1.1vw, 1.3rem); }
@media (min-width: 700px)  { .familles { grid-template-columns: repeat(2, 1fr); } }
.famille {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r); text-decoration: none; color: #fff;
  background: var(--nuit); isolation: isolate;
  min-height: clamp(300px, 26vw, 400px);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.famille:hover { transform: translateY(-4px); box-shadow: var(--ombre-fort); }
.famille__img { position: absolute; inset: 0; z-index: -1; }
.famille__img img { width: 100%; height: 100%; object-fit: cover;
                    transition: transform .7s var(--ease); }
.famille:hover .famille__img img { transform: scale(1.05); }
.famille__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,16,.16) 0%, rgba(10,12,16,.12) 38%,
                                      rgba(10,12,16,.76) 82%, rgba(10,12,16,.92) 100%);
}
.famille__corps {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: end;
}
.famille h3 {
  grid-column: 1; margin: 0; color: #fff;
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.8rem);
  text-transform: uppercase; letter-spacing: -.012em; line-height: 1.04;
}
.famille p { grid-column: 1; margin: 0; font-size: .92rem; line-height: 1.45;
             color: rgba(255,255,255,.78); max-width: 38ch; }
.famille__liste { grid-column: 1; display: flex; flex-wrap: wrap; gap: .3rem;
                  margin: .2rem 0 0; padding: 0; list-style: none; }
.famille__liste li { font-size: .74rem; color: rgba(255,255,255,.82); padding: .28em .7em;
                     background: rgba(255,255,255,.14); border-radius: var(--r-pill); }
.famille__plus {
  grid-column: 2; grid-row: 1 / -1; align-self: end;
  display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem;
  border-radius: 50%; background: #fff; color: var(--encre); flex: none;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.famille__plus svg { width: .95rem; height: .95rem; }
.famille:hover .famille__plus { transform: translateX(4px); background: var(--lame); color: #fff; }

/* le pictogramme, discret, en haut à gauche de la carte */
.famille__corps > svg {
  position: absolute; top: clamp(-1rem, -1vw, -.8rem); left: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  display: none;
}

/* ═══════════════════════════════════════════════ « saviez-vous que… »
   Une BULLE, pas un encadré : Ti-Lame d'un côté, la bulle de l'autre, avec la
   petite queue qui pointe vers lui. Elles ne sont plus empilées dans une seule
   section noire — elles apparaissent une à une, à des endroits différents de la
   page, là où le fait tombe à propos.

   Pas de source affichée (demande du client). Les sources restent dans
   site/faits.py : un chiffre sans source est un chiffre qu'on finira par
   inventer. */
.savait {
  display: flex; align-items: flex-end; gap: clamp(.6rem, .3rem + 1vw, 1.1rem);
  max-width: 840px;
}
.savait--droite { flex-direction: row-reverse; margin-left: auto; }
.savait__lame { width: clamp(72px, 11vw, 116px); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .savait.vu .savait__lame { animation: sursaut .7s var(--ease); }
}
@keyframes sursaut {
  0% { transform: scale(.82) rotate(-12deg); }
  55% { transform: scale(1.05) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

.savait__bulle {
  position: relative; min-width: 0; flex: 1;
  background: var(--vif); color: var(--sur-vif);
  border-radius: var(--r) var(--r) var(--r) 6px;
  padding: clamp(1.15rem, .9rem + 1.2vw, 1.7rem) clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
  box-shadow: var(--ombre);
}
.savait--droite .savait__bulle { border-radius: var(--r) var(--r) 6px var(--r); }

/* la queue de la bulle, en triangle plein, tournée vers Ti-Lame */
.savait__bulle::after {
  content: ''; position: absolute; bottom: 0; left: -11px;
  border: 0 solid transparent; border-width: 0 0 16px 12px;
  border-bottom-color: var(--vif);
}
.savait--droite .savait__bulle::after { left: auto; right: -11px; border-width: 0 12px 16px 0; }

.savait__quoi {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: .68rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
  margin: 0 0 .5rem; opacity: .68;
}
.savait__chiffre {
  display: block; font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4rem); font-weight: 800;
  line-height: .95; letter-spacing: -.045em; margin-bottom: .35rem;
}
.savait__chiffre small { font-size: .32em; font-weight: 700; letter-spacing: -.005em;
                         opacity: .68; margin-left: .4em; }
.savait__txt h3 { margin-bottom: .45rem; font-size: clamp(1.05rem, .98rem + .5vw, 1.28rem);
                  color: var(--sur-vif); }
.savait__txt p { font-size: .94rem; line-height: 1.5; margin: 0; color: var(--sur-vif); opacity: .82; }

/* une seule bulle par endroit : la file empilée n'existe plus */
.savaits { display: grid; gap: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }

/* une file de petits faits, plus compacte */
.faits { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait);
         border-radius: var(--r); overflow: hidden; }
@media (min-width: 680px)  { .faits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .faits { grid-template-columns: repeat(3, 1fr); } }
.faits > div { background: var(--surface); padding: clamp(1.2rem, 1rem + 1vw, 1.7rem);
               display: flex; flex-direction: column; gap: .4rem; }
.faits b { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); font-weight: 800; line-height: 1;
           letter-spacing: -.03em; color: var(--lame); }
.faits h3 { margin: 0; font-size: .98rem; }
.faits p { font-size: .9rem; color: var(--texte-doux); margin: 0; }
.faits small { font-size: .73rem; color: var(--texte-pale); margin-top: auto; padding-top: .5rem; }

/* ═══════════════════════════════════════════════════════ page de service */
.tete-page { padding-top: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); padding-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); }
.fil { padding-top: clamp(1rem, .8rem + 1vw, 1.6rem); }
.fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem;
          margin: 0; padding: 0; list-style: none; font-size: .79rem; }
.fil li { display: flex; align-items: center; gap: .5rem; color: var(--texte-pale); }
.fil li + li::before { content: '/'; color: var(--trait-fort); }
.fil a { color: var(--texte-doux); text-decoration: none; }
.fil a:hover { color: var(--lame-fort); text-decoration: underline; }
.fil [aria-current="page"] { color: var(--encre); font-weight: 600; }

.tete-page__in { display: grid; gap: clamp(1.6rem, 1rem + 2.4vw, 3rem); align-items: end; }
@media (min-width: 940px) { .tete-page__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.tete-page h1 { margin-bottom: .4em; }
.tete-page__accroche { font-size: clamp(1.08rem, 1rem + .6vw, 1.32rem); color: var(--lame-fort);
                       font-weight: 500; line-height: 1.42; margin: 0; max-width: 34ch; }
.tete-page__img { border-radius: var(--r); overflow: hidden; background: var(--fond-3); }
.tete-page__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.lire { max-width: 64ch; font-size: clamp(1.01rem, .98rem + .25vw, 1.11rem); line-height: 1.62; }

.grille-fait { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait);
               border-radius: var(--r); overflow: hidden; }
@media (min-width: 760px) { .grille-fait { grid-template-columns: repeat(2, 1fr); } }
.grille-fait > div { background: var(--surface); padding: clamp(1.25rem, 1rem + 1vw, 1.7rem); }
.grille-fait h3 { font-size: 1rem; margin-bottom: .35rem; }
.grille-fait p { font-size: .93rem; color: var(--texte-doux); margin: 0; }

/* la plaque technique — lue comme la plaque d'une machine */
.plaque { background: var(--nuit); color: var(--nuit-texte); border-radius: var(--r);
          padding: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); }
/* Sur la plaque noire, la pastille reprend un fond translucide clair : le
   bleu pâle sur blanc que produisait l'ancienne règle tombait à 2,7:1. */
.plaque .etiq { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22);
                margin-bottom: 1.15rem; }
.plaque .etiq::before { background: #fff; box-shadow: none; }
.plaque dl { display: grid; margin: 0; }
.plaque div { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: .3rem 1.2rem;
              padding: .7rem 0; border-bottom: 1px solid var(--nuit-trait); align-items: baseline; }
.plaque div:last-child { border-bottom: 0; padding-bottom: 0; }
.plaque dt { font-size: .71rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nuit-doux); }
.plaque dd { margin: 0; font-size: .95rem; }
@media (max-width: 520px) { .plaque div { grid-template-columns: 1fr; } }

.notes { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.notes li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start;
            font-size: .95rem; color: var(--texte-doux); line-height: 1.55; }
.notes li::before { content: ''; width: 3px; min-height: 1.4em; height: 100%;
                    border-radius: 2px; background: var(--lame); opacity: .5; }

/* ═════════════════════════════════════════════════════════════════ avis */
.avis__haut { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; margin-bottom: 1.7rem; }
.avis__note { display: flex; align-items: baseline; gap: .5rem; }
.avis__note b { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem); font-weight: 800; line-height: 1;
                letter-spacing: -.035em; color: var(--encre); }
.etoiles { display: flex; gap: .1rem; color: #E0A32E; }
.etoiles svg { width: 16px; height: 16px; }
.avis__liste { display: grid; gap: clamp(.9rem, .5rem + 1vw, 1.3rem);
               grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); }
.avis__item { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r);
              padding: clamp(1.25rem, 1rem + 1vw, 1.7rem); display: flex; flex-direction: column; gap: .75rem; }
.avis__item blockquote { margin: 0; font-size: 1.01rem; line-height: 1.55; color: var(--texte); }
.avis__item blockquote::before { content: '«\00a0'; color: var(--lame); }
.avis__item blockquote::after { content: '\00a0»'; color: var(--lame); }
.avis__qui { margin-top: auto; display: flex; flex-direction: column; gap: .08rem; }
.avis__qui b { font-size: .91rem; color: var(--encre); }
.avis__qui span { font-size: .77rem; color: var(--texte-pale); }

/* ══════════════════════════════════════════════════════════ territoires */
.terr { display: grid; gap: clamp(.9rem, .5rem + 1.2vw, 1.4rem);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.terr__bloc { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r);
              padding: clamp(1.2rem, 1rem + 1vw, 1.65rem); }
.terr__bloc h3 { font-size: 1rem; margin-bottom: .7rem; padding-bottom: .55rem; border-bottom: 1px solid var(--trait); }
.terr__bloc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .32rem; }
.terr__bloc li { font-size: .81rem; color: var(--texte-doux); padding: .26em .68em;
                 background: var(--fond-2); border-radius: var(--r-pill); }

/* ══════════════════════════════════════════════════════════════ étapes */
.etapes { display: grid; gap: clamp(.9rem, .5rem + 1.2vw, 1.3rem); list-style: none; margin: 0; padding: 0;
          counter-reset: e; }
@media (min-width: 700px)  { .etapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .etapes { grid-template-columns: repeat(4, 1fr); } }
.etapes li { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r);
             padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); display: flex; flex-direction: column; gap: .45rem; }
.etapes li::before { content: none; }
.etapes h3 { margin: 0; font-size: 1rem; }
.etapes p { font-size: .91rem; color: var(--texte-doux); margin: 0; }

/* ═══════════════════════════════════════════════════════════════════ FAQ */
.faq { display: grid; gap: .6rem; max-width: 76ch; }
.faq details { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-sm);
               overflow: hidden; transition: border-color .2s var(--ease); }
.faq details[open] { border-color: var(--lame); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.2rem;
               font-weight: 700; font-size: .99rem; color: var(--encre); position: relative; letter-spacing: -.012em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 1.2rem; top: 50%; width: 10px; height: 10px;
                      margin-top: -6px; border-right: 2px solid var(--lame); border-bottom: 2px solid var(--lame);
                      transform: rotate(45deg); transition: transform .22s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--lame-fort); }
.faq__corps { padding: 0 1.2rem 1.15rem; color: var(--texte-doux); font-size: .96rem; }

/* ═══════════════════════════════════════════════════════════ formulaire */
.form { display: grid; gap: 1.05rem; }
@media (min-width: 680px) { .form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; } }
.champ { display: flex; flex-direction: column; gap: .38rem; }
.champ label { font-size: .83rem; font-weight: 700; color: var(--encre); }
.champ label .opt { font-weight: 500; color: var(--texte-pale); }
.champ input, .champ select, .champ textarea {
  font-family: inherit; font-size: 1rem; color: var(--texte);
  background: var(--surface); border: 1.5px solid var(--bord-champ); border-radius: var(--r-sm);
  padding: .8em .92em; width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.champ textarea { min-height: 136px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--lame); box-shadow: 0 0 0 3px var(--lame-voile);
}
/* champ refusé à l'envoi : le contour ET un mot, jamais la couleur toute seule */
.champ [aria-invalid="true"], .champ .fautif { border-color: var(--alerte); }
.champ [aria-invalid="true"]:focus, .champ .fautif:focus { box-shadow: 0 0 0 3px var(--alerte-voile); }

.champ--case { flex-direction: row; align-items: flex-start; gap: .7rem; }
.champ--case input { width: 19px; height: 19px; flex: none; margin-top: .18em; accent-color: var(--lame); }
.champ--case label { font-weight: 500; font-size: .88rem; color: var(--texte-doux); line-height: 1.5; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.coord { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait);
         border-radius: var(--r); overflow: hidden; }
.coord > div { background: var(--surface); padding: 1.1rem 1.3rem; }
.coord dt { font-size: .71rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
            color: var(--texte-pale); margin-bottom: .25rem; }
.coord dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--encre); }
.coord a { color: var(--encre); text-decoration: none; }
.coord a:hover { color: var(--lame-fort); }

/* ══════════════════════════════════════════════════════════════ rappel */
.rappel { position: relative; overflow: hidden; background: var(--nuit); color: var(--nuit-texte); }
.rappel__in { position: relative; display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 880px) { .rappel__in { grid-template-columns: 1.25fr auto; } }
.rappel h2 { color: var(--nuit-texte); margin-bottom: .45em; }
.rappel p { color: var(--nuit-doux); max-width: 46ch; margin: 0; }
.rappel__cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.rappel__lame { position: absolute; right: -4%; top: 50%; width: min(38vw, 300px);
                transform: translateY(-50%); opacity: .1; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════ pied de page */
.pied { background: var(--fond-2); border-top: 1px solid var(--trait);
        padding-block: clamp(2.6rem, 2rem + 3vw, 4rem) 1.8rem; }
.pied__haut { display: grid; gap: clamp(1.8rem, 1rem + 3vw, 3rem); }
@media (min-width: 900px) { .pied__haut { grid-template-columns: 1.3fr 1fr 1fr 1.05fr; } }
.pied__marque img { height: 46px; width: auto; margin-bottom: 1.1rem; }
.pied__marque p { font-size: .89rem; color: var(--texte-doux); max-width: 32ch; }
.pied h3 { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
           color: var(--texte-pale); margin-bottom: .85rem; }
.pied ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.pied ul a, .pied ul span { font-size: .88rem; color: var(--texte-doux); text-decoration: none; }
.pied ul a:hover { color: var(--lame-fort); text-decoration: underline; }
.pied__bas { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: 1.3rem;
             border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap;
             align-items: center; justify-content: space-between; gap: 1rem;
             font-size: .81rem; color: var(--texte-pale); }
.pied__bas p { margin: 0; }
.pied__bas a { color: var(--texte-pale); }


/* ══════════════════════════════════════════ la barre d'action, sur téléphone
   Deux boutons collés en bas de l'écran : soumission et appel. C'est le geste
   du site donné en exemple, et c'est ce qui convertit sur un téléphone — le
   numéro n'est plus à deux défilements de distance.

   Sur grand écran elle disparaît : l'en-tête montre déjà le numéro. */
.sos {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: grid; grid-template-columns: 1fr auto; gap: .5rem;
  padding: .55rem clamp(.6rem, 2vw, 1rem) calc(.55rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--trait);
  /* Elle n'apparaît qu'une fois le héros passé. Collée en bas dès l'arrivée,
     elle doublait les DEUX MÊMES boutons déjà affichés dans le héros, à trois
     centimètres d'écart, et en recouvrait un. */
  transform: translateY(110%);
  transition: transform .25s var(--ease);
  visibility: hidden;
}
.sos.montree { transform: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .sos { transition: none; } }

/* La barre est posée PAR-DESSUS la page : sans cette réserve en bas, elle
   recouvre la dernière ligne du pied de page — la signature ganolyk et les
   liens légaux disparaissaient dessous. */
@media (max-width: 999px) { .pied { padding-bottom: 5.5rem; } }
.sos .btn { width: 100%; padding-block: .95em; }
.sos__tel { padding-inline: 1.15em; }
/* Une icône seule ne dit pas ce que fait le bouton. Le mot reste, et c'est le
   libellé du bouton principal qui raccourcit quand la place manque. */
.sos .btn__court { display: none; }
@media (max-width: 400px) {
  .sos .btn__long { display: none; }
  .sos .btn__court { display: inline; }
}
@media (min-width: 1000px) { .sos { display: none; } }
/* le bandeau de témoins occupe le même bas d'écran : un seul des deux à la fois */
body.temoins-ouverts .sos { display: none; }

.temoins { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
           background: var(--surface); border-top: 1px solid var(--trait);
           box-shadow: 0 -8px 30px -12px rgba(16,18,21,.26);
           padding: 1rem var(--marge) calc(1rem + env(safe-area-inset-bottom)); display: none; }
.temoins.ouvert { display: block; }
.temoins__in { max-width: var(--maxw); margin-inline: auto; display: grid; gap: 1rem; align-items: center; }
@media (min-width: 820px) { .temoins__in { grid-template-columns: 1fr auto; } }
.temoins p { font-size: .87rem; color: var(--texte-doux); margin: 0; max-width: 70ch; }
.temoins__btns { display: flex; flex-wrap: wrap; gap: .55rem; }

/* ═══════════════════════════════════════════════════════════════ document */
.doc { max-width: 74ch; }
.doc h2 { font-size: clamp(1.12rem, 1rem + .65vw, 1.36rem); margin-top: 2.3rem; margin-bottom: .65rem; }
.doc h2:first-child { margin-top: 0; }
.doc ul { padding-left: 1.2rem; color: var(--texte-doux); }
.doc li { margin-bottom: .38rem; }

/* ═══════════════════════════════════════════════════════════════ impression */
@media print {
  .hdr, .sos, .temoins, .mnav, .rappel, .burger, .theme, .film__ctrl { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .bande--nuit, .plaque, .heros__film { background: #fff !important; color: #000 !important; }
  .plaque dd, .bande--nuit h2 { color: #000 !important; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  .bande { padding-block: 1.4rem; }
}

/* ═══════════════════════════════════════════ gabarits et menus espacements
   Ce fichier remplace les styles en ligne qu'il y avait dans le générateur.
   Tout se règle ici, à un seul endroit — c'est ce qui rend le site tenable
   dans deux ans, par quelqu'un d'autre. */

.sans-haut { padding-top: 0; }

/* deux ou trois colonnes qui se replient toutes seules */
.colonnes {
  display: grid; align-items: start;
  gap: clamp(1.8rem, 1rem + 3vw, 3.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.colonnes--serre { gap: clamp(1.5rem, 1rem + 2.4vw, 3rem); grid-template-columns: 1fr; }
.colonnes--deux  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.galerie {
  display: grid; gap: clamp(1.2rem, .8rem + 1.4vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.galerie figure { margin: 0; }
.galerie figcaption { padding: .9rem 0 0; font-size: .88rem; color: var(--texte-doux); }

/* la file des « saviez-vous que… » : deux de front dès qu'il y a la place */
.savaits { display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.5rem); }
@media (min-width: 1180px) {
  .savaits:has(> .savait + .savait) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .savaits:has(> .savait + .savait) .savait { grid-template-columns: 1fr; text-align: left; }
  .savaits:has(> .savait + .savait) .savait__lame { justify-self: start; width: 104px; }
}

/* espacements nommés, plutôt que des nombres semés dans le générateur */
.apres      { margin-top: 1.5rem; }
.apres--l   { margin-top: 2rem; }
.apres .btn + .btn { margin-left: .6rem; }
.chapo--espace { margin-bottom: 1.6rem; }
.lire--espace  { margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.duo--espace   { margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); }
.discret--sm   { font-size: .87rem; }
.h2--moyen  { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); margin-bottom: 1.1rem; }
.h2--apres  { margin-top: 2.4rem; }
.lien-nu    { color: inherit; text-decoration: none; }
.lien-nu:hover { color: var(--lame-fort); }
.liste-simple { padding-left: 1.2rem; color: var(--texte-doux); }
.menu-rbq   { margin-top: .7rem; font-size: .81rem; }
.savait__txt h3 { margin-bottom: .5rem; }
.avis__compte { margin: 0; }
.etapes--file { grid-template-columns: 1fr; }

/* ════════════════════════════════════ renvois entre services, format compact
   Toutes les cartes se ressemblent — pas de photo. C'est voulu : seuls 6 des
   21 services ont une vraie photo de chantier, et on ne publie pas d'images
   génériques pour boucher les trous. */
.liens-serv { display: grid; gap: clamp(.8rem, .6rem + .8vw, 1.1rem); }
@media (min-width: 620px)  { .liens-serv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .liens-serv { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lien-serv {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr;
  gap: .15rem .9rem;
  padding: clamp(1.1rem, .9rem + .7vw, 1.5rem);
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r);
  text-decoration: none; color: inherit; box-shadow: var(--ombre);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.lien-serv:hover { transform: translateY(-3px); box-shadow: var(--ombre-fort); border-color: var(--lame); }
.lien-serv > svg { grid-row: 1 / 4; width: 38px; height: 38px; padding: 8px;
                   color: var(--lame); background: var(--lame-voile); border-radius: 10px; }
.lien-serv b { font-size: 1.04rem; font-weight: 700; color: var(--encre); letter-spacing: -.016em; }
.lien-serv > span { font-size: .89rem; line-height: 1.45; color: var(--texte-doux); }
.lien-serv em { display: inline-flex; align-items: end; gap: .4em; margin-top: .55rem;
                align-self: end; justify-self: start;
                font-style: normal; font-size: .82rem; font-weight: 700; color: var(--lame-fort); }
.lien-serv em svg { width: .85em; height: .85em; transition: transform .2s var(--ease); }
.lien-serv:hover em svg { transform: translateX(3px); }

/* ═══════════════════════════════════════════ jalons de la page entreprise
   Remplace l'ancienne « fiche technique » en colonnes, que le client n'aimait
   pas : quatre chiffres, en gros, dont celui qui porte toute la page. */
.jalons { display: grid; gap: 1px; background: var(--trait);
          border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; }
@media (min-width: 620px)  { .jalons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .jalons { grid-template-columns: repeat(4, 1fr); } }
.jalons > div { background: var(--surface); padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
                display: flex; flex-direction: column; gap: .35rem; }
.jalons b { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); font-weight: 800; line-height: .95;
            letter-spacing: -.045em; color: var(--lame); }
.jalons strong { font-size: .95rem; font-weight: 700; color: var(--encre); letter-spacing: -.015em; }
.jalons p { font-size: .87rem; line-height: 1.45; color: var(--texte-doux); margin: 0; }

/* Le grand chiffre qui ouvre la page entreprise : seize ans, écrit gros une
   fois pour toutes. */
.seize {
  display: grid; gap: clamp(1.6rem, 1rem + 2.4vw, 3rem); align-items: center;
  background: var(--vif); color: var(--sur-vif);
  border-radius: var(--r); padding: clamp(1.8rem, 1.2rem + 2.6vw, 3.2rem);
}
@media (min-width: 820px) { .seize { grid-template-columns: auto minmax(0, 1fr); } }
.seize__n { display: flex; align-items: baseline; gap: .25em; line-height: .82; }
.seize__n b { font-size: clamp(5rem, 3rem + 11vw, 11rem); font-weight: 800; letter-spacing: -.06em; }
.seize__n span { font-size: clamp(1.2rem, 1rem + 1.2vw, 2rem); font-weight: 700; letter-spacing: -.03em; }
.seize__txt p { margin: 0; font-size: clamp(1.05rem, 1rem + .55vw, 1.32rem); line-height: 1.45; }
.seize__txt p + p { margin-top: .7rem; font-size: .96rem; opacity: .75; }

/* le portrait du propriétaire, en carte */
.patron { display: grid; gap: clamp(1.4rem, 1rem + 2vw, 2.6rem); align-items: center; }
@media (min-width: 860px) { .patron { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); } }
.patron__img { border-radius: var(--r); overflow: hidden; background: var(--fond-3); }
.patron__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.patron figure { margin: 0; }
.patron figcaption { padding: .8rem .2rem 0; font-size: .82rem; color: var(--texte-pale); }
.patron h2 { margin-bottom: .3em; }
.patron__role { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
                color: var(--texte-pale); margin: 0 0 1.1rem; }

/* Les liens légaux du pied de page. Le séparateur est un vrai caractère dans
   le flux, pas une puce en position absolue : une puce absolue restait accrochée
   au début d'une ligne quand la liste passait sur deux rangées, et on voyait un
   point orphelin en bord de page. */
/* Pas de séparateur du tout : sur deux rangées, n'importe quelle puce finit par
   se retrouver seule en début de ligne. Les liens sont soulignés, l'espace
   suffit. */
.pied__legal { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.1rem; }

/* ═══════════════════════════════════ la grosse lame, en filigrane sur blanc
   Elle revient de la version 5, où elle portait le bandeau de repères. Ici
   elle est posée derrière un titre de section, débordant du bord droit : une
   texture, pas une image. Le texte passe par-dessus sans jamais la subir.

   La bande qui l'accueille doit porter .bande--lame (position + overflow), et
   chaque cellule blanche posée dessus garde son fond : la lame remplit le vide
   autour du titre, pas le dessous des cartes. */
.bande--lame { position: relative; overflow: hidden; isolation: isolate; }
.filigrane {
  position: absolute; z-index: -1; pointer-events: none;
  /* Calée dans le BLANC à droite du titre de section. Descendue au milieu de
     la bande, elle passait derrière les cartes de photos et il n'en restait
     qu'un croissant. */
  width: min(54vw, 540px); height: auto;
  right: clamp(-9rem, -7vw, -3rem);
  top: clamp(-5rem, -5vw, -1.5rem);
  opacity: .95;
}
.filigrane--bas { top: auto; bottom: clamp(-9rem, -9vw, -3rem); }
@media (prefers-reduced-motion: no-preference) {
  .js .filigrane { animation: tourne 140s linear infinite; }
}
@keyframes tourne { to { rotate: 360deg; } }
@media (max-width: 900px) {
  /* Sur petit écran il n'y a aucun blanc à côté du titre. La lame ne passe donc
     pas derrière le texte : elle sort par le coin, et on n'en voit qu'un arc. */
  .filigrane { width: 88vw; right: -50vw; top: -24vw; opacity: .55; }
}

/* Le lien de retrait du consentement, dans la rangée légale : c'est un bouton
   (il agit sur la page), mais il doit se lire comme les liens voisins. */
.pied__legal button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.pied__legal button:hover { color: var(--lame-fort); }


/* ── 04-v15.css ─────────────────────────────────── */
/* ==========================================================================
   VERSION 15 : la couche « chantier vivant »
   Tout ce bloc s'ajoute par-dessus les versions précédentes, à la fin de la
   feuille : il ne réécrit rien de ce qui a été validé, il le complète.

   Ce qui est nouveau :
   · le trait de coupe du héros (la lame du logo qui file sous le titre) ;
   · la barre de progression dans l'en-tête (la coupe avance quand on lit) ;
   · le parcours « de l'appel à la coupe » : une ligne tracée à la craie que
     la lame découpe à mesure qu'on défile, sans aucun numéro ;
   · la bande marine « Pourquoi Unik » ;
   · le contour bleu qui fait le tour complet des cartes au survol ;
   · les avis avec pastille d'initiales ;
   · les photos d'en-tête de page posées sur une plaque bleue, avec la lame ;
   · la signature ganolyk standard, les pages légales avec sommaire.

   Aucune de ces animations ne cache du contenu sans JavaScript, et toutes
   s'arrêtent si la personne a demandé moins d'animation.
   ========================================================================== */

/* Deux nouveaux pictogrammes du sprite n'ont pas de dimensions dans le
   gabarit : filet de sécurité global, sinon un SVG en ligne s'étire. */
a svg, button svg, li svg, p svg, span svg { flex: none; }
.faits__ico svg, .etapes__ico svg { width: 22px; height: 22px; }

/* ══════════════════════════════════════════════ héros : le trait de coupe
   La lame du logo file de gauche à droite sous le titre et laisse derrière
   elle un trait lumineux. Une seule fois, au chargement. C'est le geste du
   logo lui-même : une lame, puis une ligne. */
.heros__lieu > span { display: inline; }
@media (max-width: 440px) {
  /* Sur téléphone, la pastille tenait sur deux lignes et la puce flottait.
     L'Assomption est dans Lanaudière : on le dit dans la section Secteurs. */
  .heros__lieu .lieu-plus { display: none; }
  .heros__lieu::before { align-self: center; margin-top: 0; }
}

.coupe {
  position: relative; width: min(500px, 78%); height: 30px;
  margin: -.35rem auto -.2rem;
}
.coupe__trait {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  border-radius: 2px; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(147,162,245,0) 0%, rgba(147,162,245,.85) 30%, #fff 100%);
  box-shadow: 0 0 14px rgba(147,162,245,.55);
}
.coupe__lame {
  position: absolute; top: -2px; left: 100%; width: 34px; height: 34px; margin-left: -17px;
  filter: drop-shadow(0 0 10px rgba(147,162,245,.55));
}

@media (prefers-reduced-motion: no-preference) {
  .js .heros__in > * { animation: v15-leve .7s var(--ease) both; }
  .js .heros__in > :nth-child(1) { animation-delay: .05s; }
  .js .heros__in > :nth-child(2) { animation-delay: .14s; }
  .js .heros__in > :nth-child(4) { animation-delay: .42s; }
  .js .heros__in > :nth-child(5) { animation-delay: .52s; }
  .js .heros__in > :nth-child(6) { animation-delay: .62s; }
  .js .heros__in > .coupe { animation: none; }
  .js .coupe__trait { animation: v15-trace 1.3s cubic-bezier(.65,.05,.36,1) .42s both; }
  .js .coupe__lame  { animation: v15-file  1.3s cubic-bezier(.65,.05,.36,1) .42s both; }
}
@keyframes v15-leve  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes v15-trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v15-file  {
  0%   { left: 0%;   rotate: 0deg;   opacity: 0; }
  10%  {                            opacity: 1; }
  100% { left: 100%; rotate: 960deg; opacity: 1; }
}

/* ═══════════════════════════════════ la coupe qui avance dans l'en-tête
   Une barre bleue au bas de l'en-tête, qui se remplit à mesure qu'on lit la
   page. Seulement là où le navigateur sait le faire sans script (Chrome,
   Edge, Safari récent) ; ailleurs, il n'y a simplement pas de barre. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hdr::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
      pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
      background: linear-gradient(90deg, var(--lame) 0%, var(--lame-clair) 100%);
      animation: v15-progres linear both; animation-timeline: scroll(root block);
    }
  }
}
@keyframes v15-progres { to { transform: scaleX(1); } }

/* ══════════════════════════════════════ le parcours, de l'appel à la coupe
   Plus de cartes numérotées. Une ligne pointillée, comme le tracé à la craie
   qu'on fait sur le béton avant de couper, relie les quatre étapes. En
   défilant, la lame descend le long du tracé et le transforme en trait de
   coupe plein ; chaque étape s'allume quand la lame l'a passée.

   Sans JavaScript ou en animation réduite : le tracé est là, les étapes
   aussi, rien ne bouge. */
.parcours { position: relative; --ico: 48px; }
.etapes--coupe { display: grid; gap: clamp(1.3rem, 1rem + 1.2vw, 2rem); }
.etapes--coupe li {
  position: relative; display: grid; grid-template-columns: var(--ico) minmax(0, 1fr);
  gap: 0 1.15rem; align-items: start;
  background: none; border: 0; border-radius: 0; padding: 0;
}
.etapes--coupe li::before { content: none; }
/* le tracé à la craie : d'une pastille à la suivante */
.etapes--coupe li:not(:last-child)::after {
  content: ''; position: absolute; left: calc(var(--ico) / 2 - 1px);
  top: calc(var(--ico) / 2);
  height: calc(100% + clamp(1.3rem, 1rem + 1.2vw, 2rem));
  width: 2px; z-index: 0;
  background: repeating-linear-gradient(180deg, var(--trait-fort) 0 7px, transparent 7px 13px);
}
.etapes__ico {
  position: relative; z-index: 2;
  width: var(--ico); height: var(--ico); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); color: var(--lame);
  border: 1.5px solid var(--trait-fort);
  box-shadow: 0 0 0 6px var(--fond-2);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease), transform .35s var(--ease);
}
.etapes__txt { padding-top: .55rem; min-width: 0; }
.etapes--coupe h3 { margin: 0 0 .3rem; font-size: 1.08rem; }
.etapes--coupe p { font-size: .95rem; color: var(--texte-doux); margin: 0; line-height: 1.55; }

/* le trait de coupe plein et la lame : seulement quand le script les pilote */
.parcours__trait, .parcours__lame { display: none; }
.js .parcours--vivant .parcours__trait {
  display: block; position: absolute; z-index: 1;
  left: calc(var(--ico) / 2 - 2px); width: 4px; border-radius: 2px;
  top: var(--rail-haut, 24px);
  height: calc(var(--rail-long, 0px) * var(--p, 0));
  background: linear-gradient(180deg, var(--lame-clair), var(--lame));
}
.js .parcours--vivant .parcours__lame {
  display: block; position: absolute; z-index: 1; pointer-events: none;
  left: calc(var(--ico) / 2); top: calc(var(--rail-haut, 24px) + var(--rail-long, 0px) * var(--p, 0));
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  rotate: var(--rot, 0deg);
  filter: drop-shadow(0 4px 10px rgba(30,42,107,.35));
}
.js .parcours--vivant li.passe .etapes__ico,
.js .parcours--fixe li .etapes__ico {
  background: var(--lame); color: #fff; border-color: var(--lame);
  box-shadow: 0 0 0 6px var(--fond-2), 0 10px 24px -8px rgba(43,58,143,.55);
}
.js .parcours--vivant li.passe .etapes__ico { transform: scale(1.04); }
.js .parcours--fixe li:not(:last-child)::after { background: var(--lame); width: 4px; left: calc(var(--ico) / 2 - 2px); }

/* ═══════════════════════════════════════════ la bande marine, Pourquoi Unik
   Le seul grand aplat de couleur du site, au milieu de l'accueil. Comme les
   sections sombres, elle REDÉFINIT SES JETONS : tout ce qu'elle contient suit,
   y compris ce qu'on y ajoutera. */
.bande--marine {
  --fond: #22307A; --fond-2: #26347F; --surface: rgba(255,255,255,.06);
  --trait: rgba(255,255,255,.16); --trait-fort: rgba(255,255,255,.34);
  --encre: #FFFFFF; --texte: rgba(255,255,255,.9); --texte-doux: rgba(255,255,255,.8);
  --texte-pale: rgba(255,255,255,.74);
  --lame: #C3CBFF; --lame-fort: #FFFFFF; --lame-voile: rgba(255,255,255,.1);
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--texte);
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(92,110,214,.5) 0%, rgba(92,110,214,0) 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(12,18,60,.55) 0%, rgba(12,18,60,0) 70%),
    linear-gradient(160deg, #2B3A8F 0%, #1E2A6B 100%);
}
.bande--marine h2 { color: #fff; }
.bande--marine h2 em { color: #C3CBFF; }
.bande--marine .etiq { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #fff; }
.bande--marine .etiq::before { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.bande--marine .chapo { color: rgba(255,255,255,.84); }
.bande--marine .duo__img { box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); background: #1E2A6B; }
.filigrane--marine { top: auto; bottom: -12rem; left: -10rem; right: auto; width: min(64vw, 620px); opacity: 1; }
@media (max-width: 900px) { .filigrane--marine { width: 120vw; left: -40vw; bottom: -30vw; right: auto; top: auto; opacity: .9; } }

.bande--marine .faits {
  background: none; border: 0; border-radius: 0; overflow: visible;
  gap: clamp(.8rem, .5rem + 1vw, 1.25rem);
}
.bande--marine .faits > div {
  position: relative; background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--r);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.bande--marine .faits > div:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.faits__ico {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: .55rem;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: #D4DAFF;
  border: 1px solid rgba(255,255,255,.16);
}
.bande--marine .faits b { color: #fff; font-size: clamp(1.7rem, 1.35rem + 1.3vw, 2.5rem); }
.bande--marine .faits h3 { color: #fff; font-size: 1.02rem; }
.bande--marine .faits p { color: rgba(255,255,255,.8); }
.bande--marine .faits a { color: #fff; }

/* ════════════════════════════════ le contour qui fait le tour complet
   Demandé dès la version 2 : au survol, la ligne bleue de la carte fait le
   tour au complet, comme une lame qui détoure une ouverture. Là où le
   navigateur ne sait pas animer l'angle, la bordure apparaît d'un coup. */
@property --v15-trace { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.lien-serv { position: relative; }
.lien-serv::after, .famille::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  padding: 2px; z-index: 3;
  background: conic-gradient(from -90deg, var(--v15-c, var(--lame)) var(--v15-trace), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: --v15-trace .75s var(--ease);
}
.famille::after { inset: 0; --v15-c: var(--lame-vif); }
.lien-serv:hover::after, .lien-serv:focus-visible::after,
.famille:hover::after, .famille:focus-visible::after { --v15-trace: 360deg; }
@media (prefers-reduced-motion: reduce) { .lien-serv::after, .famille::after { transition: none; } }

/* ═════════════════════════════════════════════════════════════ les avis */
.avis__item { position: relative; overflow: hidden; box-shadow: var(--ombre);
              transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.avis__item:hover { transform: translateY(-3px); box-shadow: var(--ombre-fort); }
.avis__item::before {
  content: '\201C'; position: absolute; right: 1.1rem; top: -.35rem;
  font-size: 7.5rem; line-height: 1; font-weight: 800; color: var(--lame-voile);
  pointer-events: none; z-index: 0;
}
.avis__item > * { position: relative; z-index: 1; }
.avis__item blockquote { font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem); font-weight: 500; color: var(--encre); }
.avis__qui { flex-direction: row; align-items: center; gap: .75rem; }
.avis__qui > div { display: flex; flex-direction: column; gap: .08rem; }
/* deux classes : « .avis__qui span » (0-1-1) repeindrait sinon la pastille
   avec la petite taille et le gris des métadonnées */
.avis__qui .avis__av {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--lame); color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: .02em;
}

/* ═══════════════════════════════════ photo d'en-tête de page, sur plaque
   La photo se pose sur une plaque bleu marine décalée, et la lame du logo
   tourne lentement dans son coin. C'est l'élément graphique du logo repris,
   pas une décoration de plus. */
.tete-page__img { position: relative; overflow: visible; background: none; isolation: isolate; }
.tete-page__img img { border-radius: var(--r); background: var(--fond-3); }
.tete-page__img::before {
  content: ''; position: absolute; z-index: -1; inset: 16px -16px -16px 16px;
  border-radius: var(--r); background: var(--lame);
}
.tete-page__img::after {
  content: ''; position: absolute; z-index: 2; left: -26px; bottom: -26px;
  width: 78px; height: 78px; pointer-events: none;
  background: url('../img/lame-disque.svg?v=8e02fcce') center / contain no-repeat;
  filter: drop-shadow(0 8px 16px rgba(22,24,28,.28));
}
@media (prefers-reduced-motion: no-preference) {
  .js .tete-page__img::after { animation: tourne 36s linear infinite; }
}
@media (max-width: 939px) {
  .tete-page__img::before { inset: 12px -10px -12px 10px; }
  .tete-page__img::after { left: 14px; bottom: -22px; width: 60px; height: 60px; }
  .tete-page__img { margin-bottom: 14px; }
}

/* ═══════════════════════════════════════════════ Ti-Lame respire un peu */
@media (prefers-reduced-motion: no-preference) {
  .savait__lame { animation: v15-flotte 5.5s ease-in-out infinite; }
  .js .savait.vu .savait__lame { animation: sursaut .7s var(--ease), v15-flotte 5.5s ease-in-out .7s infinite; }
  .rappel__lame { animation: tourne 90s linear infinite; }
}
@keyframes v15-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* ═════════════════════════════════════════════════════════ pied de page */
.pied__marque .pied__secteurs {
  margin-top: .55rem; max-width: none; white-space: nowrap;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--lame);
}
/* Un panneau masqué par l'attribut hidden doit le rester, quelle que soit la
   classe qu'il porte : .temoins.ouvert et .mnav.ouvert l'emportaient sinon
   sur le [hidden] du navigateur (le piège classique du .mnav). */
.temoins[hidden], .mnav[hidden] { display: none !important; }
.menu-rbq a { color: inherit; }

/* Signature ganolyk : composant figé, identique sur chaque site client.
   Pied de page PÂLE ici, donc logo couleur et texte foncé. Le texte est à
   62 % de noir et non 45 % : sur le béton clair du pied (#F4F4F1), 45 % ne
   donne que 3,3:1, sous le 4,5:1 exigé pour un texte de 12 px. */
.ganolyk-credit { display: inline-flex; margin: 0; }
.ganolyk-credit a {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: .01em; line-height: 1;
  text-transform: none; text-decoration: none;
  color: rgba(0,0,0,.62); transition: color .2s ease;
}
.ganolyk-credit span { white-space: nowrap; }
.ganolyk-credit img { height: 20px; width: auto; display: block; opacity: .94; transition: opacity .2s ease; }
.ganolyk-credit a:hover { color: rgba(0,0,0,.85); }
.ganolyk-credit a:hover img { opacity: 1; }
@media (max-width: 480px) {
  .ganolyk-credit a { gap: 8px; font-size: 11.5px; }
  .ganolyk-credit img { height: 18px; }
}

/* ═════════════════════════════════════════ bandeau de témoins, à égalité
   « Refuser » doit être aussi visible et aussi facile que « Accepter » : deux
   boutons pleins, même taille, côte à côte. */
.btn--encre { --f: var(--encre); --t: var(--fond); }
.btn--encre:hover { --f: #000; }
.temoins__titre { display: flex; align-items: center; gap: .55rem; margin: 0 0 .3rem;
                  font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
                  color: var(--encre); }
.temoins__titre::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lame);
                          box-shadow: 0 0 0 3px var(--lame-voile); }
.temoins__btns .btn { min-width: 8.5rem; }
@media (max-width: 520px) { .temoins__btns { display: grid; grid-template-columns: 1fr 1fr; } .temoins__btns .btn { min-width: 0; } }

/* ══════════════════════════════════════════════════════════ formulaire */
.form__avis {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
  margin: 0; padding: .95rem 1.1rem; border-radius: var(--r-sm);
  background: var(--fond-2); border: 1px solid var(--trait);
  font-size: .84rem; line-height: 1.55; color: var(--texte-doux);
}
.form__avis svg { width: 20px; height: 20px; color: var(--lame); margin-top: .1rem; }
.form__erreur {
  display: none; margin: 0; padding: .9rem 1.1rem; border-radius: var(--r-sm);
  background: rgba(179,38,30,.07); border: 1.5px solid var(--alerte);
  color: #8A1C16; font-size: .9rem; font-weight: 600;
}
.form__erreur:target, .form__erreur.visible { display: block; }
.piege input { width: 1px; height: 1px; }

/* ═══════════════════════════════════════ pages légales, avec sommaire */
.doc-grille { display: grid; gap: clamp(1.4rem, 1rem + 1.5vw, 2.4rem); align-items: start; }
@media (min-width: 1100px) {
  .doc-grille { grid-template-columns: minmax(0, 74ch) 250px; justify-content: space-between; }
  .doc-grille > .doc-toc { order: 2; position: sticky; top: calc(var(--h-entete) + 1.4rem); }
}
.doc-toc {
  background: var(--fond-2); border: 1px solid var(--trait); border-radius: var(--r);
  padding: .95rem 1.05rem;
}
.doc-toc summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--texte-pale);
}
.doc-toc summary::-webkit-details-marker { display: none; }
.doc-toc summary::after {
  content: ''; width: 8px; height: 8px; margin-right: .3rem;
  border-right: 2px solid var(--lame); border-bottom: 2px solid var(--lame);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.doc-toc[open] summary::after { transform: rotate(-135deg); }
.doc-toc ol { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .1rem; }
.doc-toc a {
  display: block; padding: .38rem .6rem; border-radius: 9px;
  font-size: .87rem; line-height: 1.35; color: var(--texte-doux); text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.doc-toc a:hover, .doc-toc a.actif { background: var(--lame-voile); color: var(--lame-fort); }
.doc-toc a.actif { font-weight: 700; }

.doc__maj { font-size: .84rem; color: var(--texte-pale); margin-bottom: .9rem; }
.doc__intro { font-size: clamp(1.04rem, 1rem + .3vw, 1.14rem); line-height: 1.6; color: var(--texte); }
.doc h2 { scroll-margin-top: calc(var(--h-entete) + 1rem); }
.doc__fiche {
  background: var(--surface); border: 1px solid var(--trait); border-left: 4px solid var(--lame);
  border-radius: var(--r-sm); padding: 1rem 1.2rem; margin: 0 0 1.05em;
  display: grid; gap: .7rem;
}
.doc__fiche p { margin: 0; }
.doc__fournisseurs li { margin-bottom: .7rem; }
.doc__historique { list-style: none; padding-left: 0; }
.doc__historique li { padding-left: 1rem; border-left: 2px solid var(--trait-fort); }

/* ══════════════════════════════════════ la carte du territoire, dans la lame
   Les 32 villes placées d'après leurs vraies coordonnées autour de l'atelier,
   à l'intérieur de la lame du logo. Anneaux à 20, 40 et 60 km. La couronne
   tourne très lentement, comme le filigrane qu'elle remplace. */
.carte-terr { margin: 0; position: relative; }
.carte-terr figcaption { margin-top: .6rem; text-align: center; font-size: .8rem; color: var(--texte-pale); }
.radar { width: 100%; height: auto; display: block; overflow: visible; }
.radar__couronne { fill: #E6E9F5; stroke: #C5CBE4; stroke-width: 1.5; }
.radar__disque   { fill: #F7F8FC; stroke: #D6DBEE; stroke-width: 1; }
.radar__fente    { stroke: #FFFFFF; stroke-width: 3.2; stroke-linecap: round; }
.radar__pastille { fill: #FFFFFF; stroke: #C5CBE4; stroke-width: 1; }
.radar__anneau   { fill: none; stroke: #AEB6DC; stroke-width: 1.3; stroke-dasharray: 3 6; }
.radar__axe      { stroke: #DDE1F1; stroke-width: 1; }
.radar__zone     { fill: #E4E8F8; stroke: #E4E8F8; stroke-width: 34; stroke-linejoin: round; }
.radar__km       { font-size: 12px; font-weight: 700; letter-spacing: .04em; fill: #535C8C; }
.radar__ville    { fill: #8F99D0; }
.radar__ville--nommee { fill: var(--lame); stroke: #FFFFFF; stroke-width: 2; }
.radar__nom {
  font-size: 13.5px; font-weight: 700; fill: var(--encre);
  paint-order: stroke; stroke: #F7F8FC; stroke-width: 4px; stroke-linejoin: round;
}
.radar__nom--centre { font-size: 15px; font-weight: 800; fill: var(--lame); }
.radar__centre { fill: var(--lame); stroke: #FFFFFF; stroke-width: 3; }
.radar__moyeu  { fill: #FFFFFF; }
.radar__onde   { fill: none; stroke: var(--lame); stroke-width: 2; opacity: 0; transform-box: view-box; transform-origin: 300px 300px; }
.radar__tour   { transform-box: view-box; transform-origin: 300px 300px; }
@media (prefers-reduced-motion: no-preference) {
  .js .radar__tour { animation: tourne 160s linear infinite; }
  .js .radar__onde { animation: v15-onde 2.8s ease-out infinite; }
}
@keyframes v15-onde { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.4); opacity: 0; } }

/* Sur téléphone la carte fait ~350 px : les étiquettes y seraient minuscules.
   On les grossit dans l'unité du dessin, et on cache les deux qui se
   chevaucheraient alors (leurs villes restent dans la liste juste dessous). */
@media (max-width: 640px) {
  .radar__nom { font-size: 21px; stroke-width: 5px; }
  .radar__nom--centre { font-size: 22px; transform: translateY(-9px); }
  .radar__nom--pc { display: none; }
  .radar__km { font-size: 17px; }
  .radar__ville--nommee { r: 7px; }
  .radar__ville { r: 5px; }
}

/* la section Territoire de l'accueil : le texte et les villes à gauche, la
   carte à droite ; sur téléphone, la carte vient entre le titre et la liste */
.terr-duo { display: grid; gap: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.terr-duo > .tete-bande { margin-bottom: 0; }
.terr-duo > .apres { margin-top: 0; }
@media (min-width: 1000px) {
  .terr-duo {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "tete carte" "blocs carte" "btn carte";
    column-gap: clamp(2.5rem, 1rem + 4vw, 5.5rem); align-items: start;
  }
  .terr-duo > .tete-bande { grid-area: tete; }
  .terr-duo > .carte-terr { grid-area: carte; align-self: center; }
  .terr-duo > .terr { grid-area: blocs; }
  .terr-duo > .apres { grid-area: btn; }
}
.terr-duo .terr { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
@media (max-width: 999px) { .carte-terr { width: 100%; max-width: 520px; margin-inline: auto; } }

/* la galerie des réalisations : la légende avait le fond gris de la photo
   et collait au bord gauche de la carte */
.galerie figure.duo__img {
  background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.galerie figure.duo__img:hover { transform: translateY(-4px); box-shadow: var(--ombre-fort); }
.galerie figure.duo__img img { transition: transform .7s var(--ease); }
.galerie figure.duo__img:hover img { transform: scale(1.04); }
.galerie figure.duo__img picture { display: block; overflow: hidden; }
.galerie figcaption { padding: .95rem 1.2rem 1.1rem; font-size: .9rem; line-height: 1.5; }

/* le bouton principal : un reflet passe dessus au survol */
.btn:not(.btn--ligne) {
  background-image: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.26) 50%, transparent 65%);
  background-size: 260% 100%; background-position: 130% 0; background-repeat: no-repeat;
  transition: background-color .18s var(--ease), background-position .7s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease);
}
.btn:not(.btn--ligne):hover { background-position: -30% 0; }

/* l'en-tête s'affine une fois qu'on a défilé, SEULEMENT quand il est fixe
   (pages à héros). Ailleurs, il est collant, donc DANS la page : le rapetisser
   faisait remonter tout le contenu de 16 px, le navigateur corrigeait le
   défilement, repassait sous le seuil de 8 px, l'en-tête regrandissait, et
   ainsi de suite : la page tremblait sans fin près du haut (29 sept. 2026). */
@media (min-width: 1050px) {
  body.a-heros .hdr__in { transition: min-height .25s var(--ease); }
  body.a-heros .hdr.colle .hdr__in { min-height: 70px; }
}

/* page Secteurs : la carte est haute, le titre se centre à côté d'elle au
   lieu de tomber au pied de la colonne */
.tete-page__in:has(> .carte-terr) { align-items: center; }
.tete-page__in > .carte-terr { max-width: 480px; justify-self: center; width: 100%; }

/* la grosse lame pâle, dans le coin des en-têtes de page qui n'ont pas de
   photo (FAQ, soumission, réalisations, pages légales, 404) */
.tete-page--lame { position: relative; overflow: hidden; isolation: isolate; }
.filigrane--tete { top: clamp(-10rem, -9vw, -3rem); right: clamp(-11rem, -9vw, -4rem); width: min(44vw, 470px); }
@media (max-width: 900px) { .filigrane--tete { width: 64vw; right: -30vw; top: -14vw; opacity: .5; } }

/* merci.html#retard : la messagerie a refusé la demande, elle est gardée sur
   le serveur ; le visiteur le sait et peut appeler. Aucun script requis. */
.merci__retard {
  display: none; margin-bottom: 1.4rem; padding: 1rem 1.2rem; border-radius: var(--r-sm);
  background: var(--lame-voile); border-left: 4px solid var(--lame); color: var(--encre);
}
.merci__retard:target { display: block; }

/* Les cartes de famille : le texte blanc était posé sur la photo, avec un
   voile calculé en % de la HAUTEUR DE LA CARTE. Sur téléphone, la carte
   s'allonge, le texte remonte là où le voile est encore clair, et « Percer rond
   et net » tombait sur la carotteuse orange (1,2:1 mesuré sur les pixels). Le
   voile suit maintenant le BLOC DE TEXTE, quelle que soit la hauteur. */
.famille__img::after {
  background: linear-gradient(180deg, rgba(10,12,16,.12) 0%, rgba(10,12,16,.08) 35%, rgba(10,12,16,.35) 100%);
}
.famille__corps {
  padding-top: clamp(4.5rem, 3.5rem + 3vw, 6rem);
  background: linear-gradient(180deg, rgba(10,12,16,0) 0%, rgba(10,12,16,.78) clamp(4.5rem, 3.5rem + 3vw, 6rem), rgba(10,12,16,.9) 100%);
}
.famille__liste li { background: rgba(255,255,255,.16); color: #fff; }

/* un numéro de téléphone ne se coupe jamais en deux (« 514 793- / 6663 ») */
a[href^="tel:"] { white-space: nowrap; }

/* ══════════════════════════════════ bas de page épuré (29 septembre 2026)
   Trois éléments seulement : le droit d'auteur à gauche, la politique de
   confidentialité au centre, la signature ganolyk à droite. Empilés sur
   téléphone. La grille à trois colonnes (1fr auto 1fr) garde le lien au vrai
   centre, peu importe la largeur des deux autres. */
.pied__bas { display: grid; grid-template-columns: 1fr; justify-items: start; gap: .75rem; }
.pied__droits, .pied__politique { margin: 0; }
@media (min-width: 760px) {
  .pied__bas { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
  .pied__politique { justify-self: center; }
  .pied__bas .ganolyk-credit { justify-self: end; }
}
.pied__politique a:hover { color: var(--lame-fort); }