@charset "UTF-8";
/* ==========================================================================
   TONGUI GLOBAL — v3 « GRAND JOUR »
   --------------------------------------------------------------------------
   Le site se lit à la lumière du jour : papier clair, encre profonde,
   un seul accent — le bleu acier de la signalisation d'indication.
   Deux respirations sombres seulement : l'entrée et le pied de page.
   Le rouge n'appartient qu'aux pictogrammes réglementaires.
   Aucune bibliothèque. Aucun framework. Tout est ici.
   ========================================================================== */

/* ═════════════════════════════════════════════════════════ 1 · TOKENS ════ */
:root {
  /* --- Sol : le papier ----------------------------------------------- */
  --nuit:      #F4F6F7;   /* fond général — papier technique              */
  --asphalte:  #FFFFFF;   /* surfaces surélevées                          */
  --beton:     #FFFFFF;   /* cartes, panneaux d'interface                 */
  --rail:      #DEE3E7;   /* filets 1 px — la géométrie du plan           */
  --rail-vif:  #BEC7CE;

  /* --- Encres --------------------------------------------------------- */
  --craie:     #131B21;   /* texte principal                              */
  --acier:     #4D5860;   /* texte secondaire                             */
  --acier-bas: #6E7982;   /* mentions, légendes                           */

  /* --- Variantes de fond --------------------------------------------- */
  --jour:      #FFFFFF;
  --jour-pur:  #FFFFFF;
  --jour-bord: #E3E8EB;
  --jour-doux: #EDF0F2;
  --encre:     #131B21;
  --encre-2:   #4D5860;

  /* --- Nuances sombres (entrée, pied de page) ------------------------ */
  --sombre:    #131B22;
  --sombre-2:  #1C262E;
  --sombre-fil:#2C3742;

  /* --- Signalétique d'interface --------------------------------------- */
  --rouge:     #16537E;   /* accent unique : bleu acier d'indication      */
  --rouge-jour:#12466B;   /* la version soutenue, sur fond clair          */
  --rouge-nuit:#4A87B4;   /* la version claire, sur fond sombre           */
  --ambre:     #B0761A;   /* chantier — ocre, jamais criard               */
  --bleu:      #16537E;
  --vert:      #157050;

  /* --- La lumière ----------------------------------------------------- */
  --retro:     #16537E;   /* trait de mise au point                       */
  --halo:      rgba(22, 83, 126, .08);

  /* --- Typographie ---------------------------------------------------- */
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue Condensed",
             "Liberation Sans Narrow", Arial, sans-serif;
  --texte:   "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --data:    "Martian Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Échelle fluide — rapport 1.28, calée sur la lecture à distance */
  --t-micro: .6875rem;
  --t-mini:  .75rem;
  --t-fin:   .8125rem;
  --t-base:  .9375rem;
  --t-lu:    1.0625rem;
  --t-lead:  clamp(1.125rem, .95rem + .7vw, 1.4375rem);
  --t-h3:    clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  --t-h2:    clamp(2rem, 1.25rem + 3vw, 3.75rem);
  --t-h1:    clamp(2.85rem, 1.1rem + 6.6vw, 7rem);
  --t-geant: clamp(4rem, .5rem + 14vw, 14rem);

  /* --- Rythme --------------------------------------------------------- */
  --marge:    clamp(1.25rem, 4vw, 4rem);
  --rail-w:   72px;                       /* largeur du rail kilométrique */
  --lig:      1320px;
  --lig-large: 1680px;
  --sect:     clamp(3.75rem, 6.4vw, 7rem);

  /* --- Mouvement ------------------------------------------------------ */
  --vif:   140ms cubic-bezier(.32,.72,.28,1);
  --doux:  420ms cubic-bezier(.22,.68,.24,1);
  --lent:  780ms cubic-bezier(.16,.72,.18,1);

  /* --- Position du phare (mise à jour par le script) ------------------ */
  --px: 50%;
  --py: 34%;
  --pr: 46vmax;
  --pi: 0;                                 /* intensité 0 → 1             */

  color-scheme: light;
}

/* Bloc sombre réutilisable : l'entrée et le pied de page l'utilisent, ainsi
   que le panneau de menu plein écran mobile (.voile-nav) — son fond est
   sombre, ses textes doivent donc utiliser les tokens clairs, pas hériter
   du texte sombre de la page.
   Tous les composants héritent des tokens — rien d'autre à réécrire. */
.zone--nuit, .voile-nav {
  --nuit: var(--sombre);
  --asphalte: var(--sombre-2);
  --beton: var(--sombre-2);
  --rail: var(--sombre-fil);
  --rail-vif: #3E4A56;
  --craie: #EEF1F3;
  --acier: #9AA4AC;
  --acier-bas: #808A92;
  --jour: var(--sombre-2);
  --jour-pur: var(--sombre-2);
  --jour-bord: var(--sombre-fil);
  --jour-doux: #232E37;
  --encre: #EEF1F3;
  --encre-2: #9AA4AC;
  --rouge: var(--rouge-nuit);
  --rouge-jour: var(--rouge-nuit);
  --retro: #EEF1F3;
  --halo: rgba(255, 255, 255, .06);
  background: var(--sombre);
  color: #EEF1F3;
  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════ 2 · BASE ════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Les éléments fixes rangés hors écran (tiroir de devis) ne doivent jamais
     élargir la fenêtre de mise en page sur téléphone.
     « hidden » et non « clip » : avec clip, l'axe vertical est clippé lui
     aussi et la page ne défile plus du tout. */
  overflow-x: hidden;
  scrollbar-color: var(--rail-vif) var(--nuit);
}

body {
  margin: 0;
  background: var(--nuit);
  color: var(--craie);
  font-family: var(--texte);
  font-size: var(--t-lu);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-synthesis-weight: none;
}

/* Grain d'asphalte : casse le dégradé plat, invisible consciemment. */
body::before {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 0;
  pointer-events: none;
  opacity: .016;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

img, svg, canvas, video { display: block; max-width: 100%; }
main { padding-top: 96px; }
.route { margin-top: -96px; }
@media (max-width: 1180px) { main { padding-top: 74px; } .route { margin-top: -74px; } }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

::selection { background: var(--rouge); color: #fff; }

:focus-visible {
  outline: 2px solid var(--retro);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ═════════════════════════════════════════════════════════ 3 · TYPO ═════ */
h1, h2, h3, h4 { margin: 0; font-weight: 700; }

.titre-geant,
.titre-1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-h1);
  line-height: .84;
  letter-spacing: -.012em;
  text-transform: uppercase;
  text-wrap: balance;
}
.titre-geant { font-size: var(--t-geant); line-height: .78; }

.titre-2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: .9;
  letter-spacing: -.008em;
  text-transform: uppercase;
  text-wrap: balance;
}

.titre-3 {
  font-family: var(--texte);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.16;
  letter-spacing: -.018em;
  text-wrap: balance;
}

.plomb {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--acier);
  max-width: 34ch;
  text-wrap: pretty;
}

.corps { max-width: 68ch; color: var(--acier); }
.corps strong { color: var(--craie); font-weight: 600; }

/* Donnée technique : la texture « bureau d'études ». */
.data {
  font-family: var(--data);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--acier-bas);
}

.etiq {
  font-family: var(--data);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rouge);
}

/* Champ à compléter : impossible à oublier avant la mise en ligne. */
.vide-a-remplir {
  font-family: var(--data);
  font-size: .86em;
  letter-spacing: .01em;
  color: var(--ambre);
  background: rgba(245, 179, 1, .09);
  border-bottom: 1px dashed rgba(245, 179, 1, .5);
  padding: 0 .25em;
  /* Un placeholder long doit pouvoir passer à la ligne : sinon il déborde
     de sa colonne au lieu de se faire remarquer proprement. */
  white-space: normal;
  box-decoration-break: clone;
}

/* ══════════════════════════════════════════════ 4 · GRILLE & RAIL PK ════ */
/* RÈGLE ABSOLUE : la marge gauche est toujours égale à la marge droite.
   Aucun composant n'a le droit de décaler le contenu d'un seul côté. Le rail
   kilométrique vit dans la gouttière extérieure et n'apparaît que lorsqu'il
   y a réellement de la place pour lui — il ne facture jamais son espace au
   contenu. */
.lig {
  width: 100%;
  max-width: var(--lig);
  margin-inline: auto;
  padding-inline: var(--marge);
}
.lig--large { max-width: var(--lig-large); }
.lig--plein { max-width: none; }
.lig--fin   { max-width: 880px; }
.lig--texte { max-width: 74ch; }

.sect { position: relative; padding-block: var(--sect); }
.sect--serre { padding-block: clamp(2.75rem, 5vw, 5rem); }

/* La zone « jour » : documents, catalogue, fiches techniques.
   Sur le papier général, elle passe au blanc pur — c'est la page dans la page. */
.zone--jour {
  --nuit: #FFFFFF;
  --asphalte: #F4F6F7;
  --beton: #FFFFFF;
  --rail: var(--jour-bord);
  --rail-vif: #C6CED4;
  background: #FFFFFF;
  color: var(--encre);
  color-scheme: light;
  position: relative;
  z-index: 3;
  isolation: isolate;
}
/* Alternance : une zone jour suivie d'une autre reprend le papier,
   pour que deux blocs blancs ne se collent jamais sans respiration. */
.zone--jour + .zone--jour { --nuit: #F4F6F7; --asphalte: #FFFFFF; background: #F4F6F7; }

/* Le rail kilométrique : la colonne de gauche qui structure toute la page.
   Ce n'est pas un ornement — il numérote une séquence réelle : le trajet. */
.pk {
  position: absolute;
  left: max(var(--marge), calc((100% - var(--lig-large)) / 2 - var(--rail-w) - 18px));
  top: 0;
  bottom: 0;
  width: var(--rail-w);
  pointer-events: none;
  display: none;
}
/* Le rail n'apparaît que si la gouttière peut l'accueillir sans rien pousser. */
@media (min-width: 1820px) { .pk { display: block; } }
.pk::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(
    to bottom, var(--rail) 0 26px, transparent 26px 46px);
}
.pk__n {
  position: sticky;
  top: 46vh;
  display: block;
  font-family: var(--data);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--acier-bas);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding-block: 1.25rem;
  margin-left: calc(50% - .5em);
  background: var(--nuit);
}

/* Filet de section : une lame de jalonnement, pas une simple ligne. */
.lame {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.75rem);
}
.lame__marque {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--rouge);
  clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%);
}
.lame__marque::after {
  content: "";
  width: 7px; height: 7px;
  background: #fff;
  transform: rotate(45deg);
}
.lame__txt {
  font-family: var(--data);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--craie);
}
.lame__fil { flex: 1; height: 1px; background: var(--rail); }

/* ══════════════════════════════════════════ 5 · MOTEUR DE LUMIÈRE ══════ */
/* v3 : plus de halo porté par le pointeur. Le site se lit au grand jour. */
.phare { display: none; }

/* Surface rétroréfléchissante : ne se révèle qu'éclairée.
   Appliqué aux visuels produits, aux filets, aux chiffres clés. */
.retro {
  position: relative;
  isolation: isolate;
}
.retro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--doux);
  background: linear-gradient(115deg,
    transparent 34%,
    rgba(22,83,126,.05) 47%,
    rgba(22,83,126,.11) 50%,
    rgba(22,83,126,.05) 53%,
    transparent 66%);
  background-size: 260% 100%;
  background-position: 130% 0;
}
.retro:hover::after,
.retro:focus-within::after {
  opacity: 1;
  background-position: -30% 0;
  transition: opacity 160ms ease, background-position 900ms cubic-bezier(.2,.7,.2,1);
}

/* ═══════════════════════════════════════════════════════ 6 · BOUTONS ════ */
.b {
  --b-fond: var(--rouge);
  --b-txt: #fff;
  --b-bord: var(--rouge);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 56px;
  padding: 1rem 1.75rem;
  background: var(--b-fond);
  color: var(--b-txt);
  border: 1px solid var(--b-bord);
  font-family: var(--data);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  transition: color var(--vif), border-color var(--doux), transform var(--vif);
}
.b > * { position: relative; z-index: 2; }
.b svg { width: 17px; height: 17px; flex: none; }
/* Le remplissage balaie de la gauche — comme un phare qui passe. */
.b::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--b-txt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--doux);
}
.b:hover { color: var(--b-fond); }
.b:hover::before { transform: scaleX(1); }
.b:active { transform: translateY(1px); }

.b--fantome { --b-fond: transparent; --b-txt: var(--craie); --b-bord: var(--rail-vif); }
.b--fantome:hover { color: var(--nuit); --b-bord: var(--craie); }
.b--fantome::before { background: var(--craie); }

.b--craie { --b-fond: var(--craie); --b-txt: var(--nuit); --b-bord: var(--craie); }
.b--craie::before { background: var(--nuit); }
.b--craie:hover { color: var(--craie); }

.b--wa { --b-fond: #1DA851; --b-bord: #1DA851; }
.b--pt { min-height: 44px; padding: .6rem 1.05rem; font-size: var(--t-micro); letter-spacing: .1em; }
.b--bloc { width: 100%; }

/* Lien fléché : le chevron avance, la ligne se trace. */
.fleche {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--data);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rouge);
  padding-block: .3rem;
}
.fleche svg { width: 20px; height: 20px; transition: transform var(--doux); }
.fleche::after {
  content: "";
  height: 1px;
  width: 0;
  background: var(--rouge);
  transition: width var(--doux);
}
.fleche:hover svg { transform: translateX(6px); }
.fleche:hover::after { width: 32px; }

/* ═══════════════════════════════════════════════════ 7 · ENTÊTE / NAV ═══ */
.saut {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--rouge); color: #fff; padding: 1rem 1.5rem;
  font-family: var(--data); font-size: var(--t-mini); letter-spacing: .1em; text-transform: uppercase;
}
.saut:focus { left: 0; }

.tete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  transition: background var(--doux), border-color var(--doux), transform var(--doux);
  border-bottom: 1px solid transparent;
}
.tete.est-pose {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--rail);
}
/* Le logo n'est JAMAIS posé sur un fond sombre : ses noirs s'y dissolvent.
   L'en-tête est donc toujours une plaque de papier, sur toutes les pages. */
.tete { background: rgba(244, 246, 247, .92); backdrop-filter: blur(18px) saturate(1.15); }
.tete.est-cachee { transform: translateY(-100%); }
.tete__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 96px;
  transition: height var(--doux);
}
.tete.est-pose .tete__in { height: 70px; }
@media (max-width: 1180px) { .tete__in, .tete.est-pose .tete__in { height: 74px; } }

/* ─── LA MARQUE ───────────────────────────────────────────────────────────
   Le logo est la seule zone saturée de la page. Il n'est ni redécoupé ni
   recomposé : c'est l'en-tête qui se dimensionne sur lui. Il se contracte
   au défilement, comme un panneau qui s'éloigne dans le rétroviseur.
   Rien d'autre sur la page ne porte ce rouge : c'est ce silence autour de
   lui qui le fait exister. */
.marque {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  min-width: 0;
  padding-right: clamp(.5rem, 2vw, 2rem);
}
.marque__logo {
  height: 78px; width: auto; flex: none;
  transition: height var(--doux), transform var(--doux);
}
.tete.est-pose .marque__logo { height: 54px; }
.marque:hover .marque__logo { transform: scale(1.02); }
.marque__sous {
  display: block;
  font-family: var(--data);
  font-size: .5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acier-bas);
  white-space: nowrap;
  border-left: 1px solid var(--rail);
  padding-left: .9rem;
  line-height: 1.7;
}
@media (max-width: 1180px) { .marque__logo, .tete.est-pose .marque__logo { height: 56px; } }
@media (max-width: 680px)  { .marque__logo, .tete.est-pose .marque__logo { height: 50px; } }
@media (max-width: 460px)  { .marque__logo, .tete.est-pose .marque__logo { height: 44px; } }

.nav { display: flex; align-items: center; gap: .1rem; }
.nav__l {
  position: relative;
  padding: .65rem .8rem;
  font-family: var(--data);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acier);
  white-space: nowrap;
  transition: color var(--vif);
}
.nav__l:hover, .nav__l[aria-current="page"] { color: var(--craie); }
.nav__l::after {
  content: "";
  position: absolute;
  left: .8rem; bottom: .3rem;
  width: 5px; height: 5px;
  background: var(--rouge);
  transform: rotate(45deg) scale(0);
  transition: transform var(--doux);
}
.nav__l:hover::after, .nav__l[aria-current="page"]::after { transform: rotate(45deg) scale(1); }

.tete__act { display: flex; align-items: center; gap: .6rem; flex: none; }

@media (max-width: 1180px) { .nav, .tete__act .b--devis { display: none; } }
@media (max-width: 680px) {
  .tete__in, .voile-nav__tete { height: 64px; }
  main { padding-top: 64px; }
  .route { margin-top: -64px; }
  .marque__sig { width: 34px; height: 34px; }
  .marque__mot { font-size: 1.2rem; }
  .marque__sous { display: none; }
}

/* Bouton menu : deux traits qui deviennent une croix. */
.burger {
  width: 48px; height: 48px;
  display: none;
  place-items: center;
  border: 1px solid var(--rail-vif);
  cursor: pointer;
}
@media (max-width: 1180px) { .burger { display: grid; } }
.burger i { position: relative; width: 20px; height: 1.5px; background: var(--craie); display: block; transition: background var(--vif); }
.burger i::before, .burger i::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--craie);
  transition: transform var(--doux);
}
.burger i::before { top: -6px; }
.burger i::after  { top: 6px; }
.burger[aria-expanded="true"] i { background: transparent; }
.burger[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i::after  { transform: translateY(-6px) rotate(-45deg); }

/* Panneau mobile : plein écran, les rubriques arrivent en cascade. */
.voile-nav {
  position: fixed; inset: 0; z-index: 95;
  background: var(--nuit);
  clip-path: circle(0% at calc(100% - 44px) 44px);
  transition: clip-path 620ms cubic-bezier(.7,0,.2,1);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex; flex-direction: column;
}
.voile-nav.est-ouvert { clip-path: circle(160% at calc(100% - 44px) 44px); }
/* Le bouton WhatsApp flottant a un z-index inférieur à celui du panneau de
   menu plein écran (voir .flot plus bas), mais reste positionné en fixed :
   sans cette règle, il continue de s'afficher — et d'être cliquable — par-
   dessus les derniers liens du menu ouvert sur mobile. */
.voile-nav.est-ouvert ~ .flot { display: none; }
.voile-nav__tete { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.voile-nav__tete .marque__logo { height: 52px; }
.voile-nav__corps { padding-block: 2rem 1rem; flex: 1; }
.voile-nav__l {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--rail);
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 3.25rem);
  font-weight: 700;
  line-height: .92;
  text-transform: uppercase;
  opacity: 0; transform: translateY(14px);
}
.voile-nav.est-ouvert .voile-nav__l { animation: entree 520ms cubic-bezier(.2,.7,.2,1) forwards; }
.voile-nav__l span.data { font-size: var(--t-micro); color: var(--acier-bas); }
.voile-nav__pied { display: grid; gap: .6rem; padding-block: 1.5rem 2.5rem; }
@keyframes entree { to { opacity: 1; transform: none; } }
.voile-nav__l:nth-child(1) { animation-delay: 80ms; }
.voile-nav__l:nth-child(2) { animation-delay: 130ms; }
.voile-nav__l:nth-child(3) { animation-delay: 180ms; }
.voile-nav__l:nth-child(4) { animation-delay: 230ms; }
.voile-nav__l:nth-child(5) { animation-delay: 280ms; }
.voile-nav__l:nth-child(6) { animation-delay: 330ms; }
.voile-nav__l:nth-child(7) { animation-delay: 380ms; }
.voile-nav__l:nth-child(8) { animation-delay: 430ms; }

/* Méga-menu : une planche, pas une liste. */
.mm-hote { position: static; }
.mm {
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(255, 255, 255, .975);
  backdrop-filter: blur(20px);
  border-block: 1px solid var(--rail);
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--doux), transform var(--doux), visibility var(--doux);
}
.mm-hote:hover > .mm, .mm-hote:focus-within > .mm { opacity: 1; visibility: visible; transform: none; }
/* Fermeture forcée juste après un clic sur un lien du panneau : la souris
   n'a pas bougé, donc ":hover" resterait vrai tout seul (voir app.js) — on
   l'emporte explicitement sur ":hover"/":focus-within" le temps que la
   souris quitte vraiment la zone. */
.mm-hote.mm-fermee > .mm {
  opacity: 0 !important; visibility: hidden !important;
  transform: translateY(-10px) !important; pointer-events: none;
}
.mm__g { display: grid; grid-template-columns: repeat(4, 1fr) .95fr; gap: 0; padding-block: 2.75rem 3rem; }
.mm__c { padding-inline: 1.5rem; border-left: 1px solid var(--rail); }
.mm__c:first-child { padding-left: 0; border-left: 0; }
.mm__c h4 { margin-bottom: 1rem; }
.mm__c h4 a {
  font-family: var(--data); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rouge);
}
.mm__c a.mm__i {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  padding: .32rem 0; font-size: var(--t-base); color: var(--acier);
  transition: color var(--vif), padding-left var(--vif);
}
.mm__c a.mm__i:hover { color: var(--craie); padding-left: .35rem; }
.mm__promo { padding-inline: 1.5rem; border-left: 1px solid var(--rail); display: grid; gap: 1rem; align-content: start; }
@media (max-width: 1180px) { .mm { display: none; } }

/* ════════════════════════════════════════════════════════ 8 · L'ENTRÉE ═══ */
.route {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  /* L'entrée reste une image : encre claire sur la chaussée. */
  --craie: #F2F5F7;
  --acier: #AEB7BE;
  --acier-bas: #98A1A9;
  --rouge: var(--rouge-nuit);
  --rail: rgba(255, 255, 255, .18);
  --rail-vif: rgba(255, 255, 255, .34);
  color: #F2F5F7;
  color-scheme: dark;
}
.route__toile { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.route::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, transparent 0%, transparent 52%, rgba(9,13,17,.16) 78%, rgba(9,13,17,.44) 100%),
    linear-gradient(94deg, rgba(9,13,17,.93) 0%, rgba(9,13,17,.86) 20%, rgba(9,13,17,.52) 42%, rgba(9,13,17,.12) 58%, transparent 72%);
}
.route__in { padding-block: 8rem clamp(3rem, 8vw, 6rem); }

.route__pk {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  font-family: var(--data); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--acier);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.route__pk b { color: var(--craie); font-weight: 500; }
.route__pk i { width: 8px; height: 8px; background: var(--rouge); transform: rotate(45deg); display: block; }

@media (max-width: 560px) { .route__pk { font-size: .625rem; letter-spacing: .12em; } }

/* Le titre arrive ligne par ligne, comme des panneaux qu'on dépasse. */
.ligne { display: block; overflow: hidden; }
.ligne > span {
  display: block;
  transform: translateY(105%);
  animation: monte 940ms cubic-bezier(.16,.8,.22,1) forwards;
}
.ligne:nth-child(1) > span { animation-delay: 120ms; }
.ligne:nth-child(2) > span { animation-delay: 230ms; }
.ligne:nth-child(3) > span { animation-delay: 340ms; }
@keyframes monte { to { transform: none; } }
.titre-1 .accent { color: var(--rouge); }

.route__sous {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 46ch;
  opacity: 0;
  animation: fondu 900ms 560ms ease forwards;
}
@keyframes fondu { to { opacity: 1; } }

.route__act {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  opacity: 0; animation: fondu 900ms 700ms ease forwards;
}

/* Bandeau bas : les quatre familles, alignées comme sur un portique. */
.portique {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rail);
  margin-top: clamp(2.5rem, 6vw, 5rem);
  opacity: 0; animation: fondu 900ms 860ms ease forwards;
}
.portique a {
  padding: 1.15rem 1rem 1.15rem 0;
  border-right: 1px solid var(--rail);
  display: grid; gap: .3rem;
  transition: background var(--doux);
}
.portique a:last-child { border-right: 0; }
.portique a:hover { background: rgba(255,255,255,.05); }
.portique b {
  font-family: var(--data); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--craie);
}
.portique span { font-size: var(--t-mini); color: var(--acier-bas); }
@media (max-width: 720px) {
  .portique { grid-template-columns: repeat(2, 1fr); }
  .portique a { border-bottom: 1px solid var(--rail); padding-right: .75rem; }
  .portique a:nth-child(2n) { border-right: 0; }
}

/* Invitation à descendre : un trait qui se remplit en boucle. */
.descendre {
  position: absolute; right: var(--marge); bottom: 2rem; z-index: 3;
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--data); font-size: var(--t-micro); letter-spacing: .16em;
  text-transform: uppercase; color: var(--acier-bas);
}
.descendre i { display: block; width: 1px; height: 54px; background: var(--rail-vif); position: relative; overflow: hidden; }
.descendre i::after {
  content: ""; position: absolute; inset: 0; background: var(--rouge);
  animation: coule 2.2s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes coule { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }
@media (max-width: 900px) { .descendre { display: none; } }

/* ══════════════════════════════════════════════════ 9 · BANDE DÉFILANTE ══ */
.defile {
  border-block: 1px solid var(--rail);
  overflow: hidden;
  padding-block: .95rem;
  background: #FFFFFF;
}
.defile__p { display: flex; width: max-content; animation: glisse 46s linear infinite; }
.defile__p > span {
  display: inline-flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem;
  font-family: var(--data); font-size: var(--t-mini); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--acier-bas);
  white-space: nowrap;
}
.defile__p > span::after { content: ""; width: 5px; height: 5px; background: var(--rouge); transform: rotate(45deg); opacity: .55; }
@keyframes glisse { to { transform: translateX(-50%); } }
.defile:hover .defile__p { animation-play-state: paused; }

/* ═══════════════════════════════════════════ 10 · RANGÉES DE SOLUTIONS ══ */
/* Pas de cartes. Des rangées pleine largeur qui s'ouvrent au survol —
   comme des panneaux qui grandissent quand on s'en approche. */
.rangs { border-top: 1px solid var(--rail); }
.rang {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, .9fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: clamp(1.75rem, 3.4vw, 2.9rem);
  border-bottom: 1px solid var(--rail);
  transition: padding var(--doux);
}
.rang::before {
  content: "";
  position: absolute; inset: 0 -100vw;
  background: linear-gradient(90deg, transparent, rgba(22,83,126,.06) 22%, rgba(22,83,126,.02) 70%, transparent);
  opacity: 0; transition: opacity var(--doux);
  pointer-events: none;
}
.rang:hover { padding-block: clamp(2.1rem, 4.2vw, 3.6rem); }
.rang:hover::before { opacity: 1; }
.rang__n { font-family: var(--data); font-size: var(--t-micro); color: var(--acier-bas); letter-spacing: .1em; }
.rang__t { font-family: var(--display); font-size: clamp(1.75rem, 3.2vw, 3rem); font-weight: 700; text-transform: uppercase; line-height: .92; }
.rang__t a::after { content: ""; position: absolute; inset: 0; }
.rang__d { font-size: var(--t-base); color: var(--acier); max-width: 46ch; }
.rang__c { display: flex; align-items: center; gap: 1.25rem; }
.rang__q { font-family: var(--data); font-size: var(--t-micro); color: var(--acier-bas); white-space: nowrap; }
.rang__v {
  width: 74px; height: 74px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--rail);
  transition: border-color var(--doux), transform var(--doux);
}
.rang:hover .rang__v { border-color: var(--rouge); transform: scale(1.06); }
.rang__v svg { width: 60%; height: 60%; }
@media (max-width: 900px) {
  .rang { grid-template-columns: 3rem minmax(0,1fr) auto; row-gap: .5rem; }
  .rang__d { grid-column: 2 / -1; }
  .rang__c { grid-column: 2 / -1; }
}

/* ═════════════════════════════════════════════ 11 · CHIFFRES CARTOUCHE ══ */
/* Un cartouche de plan, pas une rangée de compteurs. */
.cartouche {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rail);
  background: var(--asphalte);
}
.cartouche__c { padding: clamp(1.5rem, 2.6vw, 2.25rem); border-right: 1px solid var(--rail); }
.cartouche__c:last-child { border-right: 0; }
.cartouche__v {
  font-family: var(--display);
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: .84;
  letter-spacing: -.01em;
  color: var(--craie);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: .1em;
}
.cartouche__v sup { font-size: .3em; color: var(--rouge); line-height: 1; }
.cartouche__v .vide-a-remplir { background: none; padding: 0; font-size: .6em;
  border-bottom-width: 2px; }
.cartouche__l { margin-top: 1rem; font-size: var(--t-base); font-weight: 600; color: var(--craie); }
.cartouche__n { margin-top: .2rem; font-size: var(--t-mini); color: var(--acier-bas); }
@media (max-width: 900px) {
  .cartouche { grid-template-columns: repeat(2, 1fr); }
  .cartouche__c:nth-child(2n) { border-right: 0; }
  .cartouche__c:nth-child(-n+2) { border-bottom: 1px solid var(--rail); }
}
@media (max-width: 460px) {
  .cartouche { grid-template-columns: 1fr; }
  .cartouche__c { border-right: 0; border-bottom: 1px solid var(--rail); }
  .cartouche__c:last-child { border-bottom: 0; }
}

/* ═══════════════════════════════════════════════ 12 · PLANCHE PRODUITS ══ */
/* Le catalogue est une planche technique : trame, cotes, références. */
/* Les filets sont portés par les fiches elles-mêmes : une ligne incomplète
   ne laisse plus de cases fantômes en fin de grille. */
.planche {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr));
  gap: 0;
  background: transparent;
  border-top: 1px solid var(--rail);
  border-left: 1px solid var(--rail);
}
.planche > .piece { border-right: 1px solid var(--rail); border-bottom: 1px solid var(--rail); }
.piece {
  position: relative;
  background: var(--nuit);
  display: flex; flex-direction: column;
  transition: background var(--doux);
}
.piece:hover { background: var(--asphalte); }
.piece__v {
  position: relative;
  aspect-ratio: 5 / 4;
  display: grid; place-items: center;
  padding: 1.35rem;
  overflow: hidden;
}
/* Trame millimétrée, révélée au survol. */
.piece__v::before {
  content: "";
  position: absolute; inset: 0;
  opacity: 0; transition: opacity var(--doux);
  background-image:
    linear-gradient(var(--rail) 1px, transparent 1px),
    linear-gradient(90deg, var(--rail) 1px, transparent 1px);
  background-size: 26px 26px;
}
.piece:hover .piece__v::before { opacity: .55; }
.piece__v svg, .piece__v img { position: relative; max-width: 128px; width: 100%; height: auto; }
.piece__v img { object-fit: contain; max-height: 100%; }
.piece__c { padding: 0 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.piece__r { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; min-width: 0; }
.piece__r .data { white-space: nowrap; flex: none; padding-top: .28rem; }
.piece__n {
  font-size: var(--t-base); font-weight: 600; line-height: 1.28;
  letter-spacing: -.012em; color: var(--craie);
}
.piece__n a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.piece__f { margin-top: auto; padding-top: .9rem; display: flex; gap: .4rem; }
.piece__f .b { flex: 1; position: relative; z-index: 2; }

.jeton {
  font-family: var(--data); font-size: .625rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acier-bas); border: 1px solid var(--rail); padding: .22rem .45rem;
  white-space: normal; line-height: 1.32; text-align: right; max-width: 56%;
}
.jeton--ok { color: var(--vert); border-color: rgba(14,122,87,.4); }

@media (max-width: 620px) {
  .planche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piece__c { padding: 0 .7rem 1rem; }
  .piece__n { font-size: var(--t-fin); }
  .piece__f { flex-direction: column; }
  .piece__v { padding: .85rem; }
  .piece__v svg, .piece__v img { max-width: 92px; }
  .piece__r .jeton { display: none; }
}

/* ═══════════════════════════════════════════════ 13 · OUTILS CATALOGUE ══ */
.catal { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 980px) { .catal { grid-template-columns: 1fr; } }

.filtres { align-self: start; position: sticky; top: 96px; }
@media (max-width: 980px) { .filtres { position: static; } }
.filtres > .repli > summary {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .95rem 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--rail-vif);
  cursor: pointer;
  list-style: none;
  font-family: var(--data);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.filtres > .repli > summary::-webkit-details-marker { display: none; }
.filtres > .repli > summary::after { content: "+"; color: var(--rouge); font-size: 1.2rem; line-height: 1; }
.filtres > .repli[open] > summary::after { content: "–"; }
@media (max-width: 980px) { .filtres > .repli > summary { display: flex; } }

.filtres__b { border-bottom: 1px solid var(--rail); padding-block: 1.1rem; }
.filtres__t {
  font-family: var(--data); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--acier-bas); margin-bottom: .8rem;
}
.fl {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; padding: .48rem .55rem; text-align: left; cursor: pointer;
  font-size: var(--t-base); color: var(--acier);
  border: 0; border-left: 2px solid transparent; background: none;
  transition: color var(--vif), border-color var(--vif), background var(--vif);
}
.fl:hover { color: var(--craie); background: rgba(255,255,255,.035); }
.fl.est-actif { color: var(--rouge); border-left-color: var(--rouge); font-weight: 600; }
.fl__n { font-family: var(--data); font-size: .625rem; color: var(--acier-bas); }
.fl-sous { padding-left: .7rem; display: grid; }
.fl-sous .fl { font-size: var(--t-fin); padding-block: .36rem; }

.outils {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 1.1rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--rail);
}
.outils > .puces { flex: 1 1 auto; margin: 0; }
.cherche { position: relative; flex: 1 1 240px; }
.cherche svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--acier-bas); }
.champ {
  width: 100%; min-height: 50px; padding: .75rem .95rem;
  font: inherit; font-size: var(--t-base);
  color: var(--craie); background: var(--asphalte);
  border: 1px solid var(--rail); border-radius: 0;
  transition: border-color var(--vif), background var(--vif);
}
.champ::placeholder { color: var(--acier-bas); }
.cherche .champ { padding-left: 2.7rem; }
.champ:hover { border-color: var(--rail-vif); }
.champ:focus { outline: none; border-color: var(--rouge); background: var(--nuit); }
select.champ {
  appearance: none; padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B949D' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 15px;
}
.zone--jour select.champ {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D767F' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.compte { font-family: var(--data); font-size: var(--t-micro); color: var(--acier-bas); white-space: nowrap; }

.puces { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.2rem; }
.puce {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .45rem .3rem .7rem;
  font-family: var(--data); font-size: .625rem; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--rail-vif); color: var(--craie); cursor: default;
}
.puce button { cursor: pointer; opacity: .6; font-size: .9rem; line-height: 1; }
.puce button:hover { opacity: 1; color: var(--rouge); }
.puce--eff { border-color: var(--rouge); color: var(--rouge); cursor: pointer; }

.rien { padding: 4.5rem 1rem; text-align: center; color: var(--acier-bas); border: 1px dashed var(--rail); }

/* ══════════════════════════════════════════════════ 14 · FICHE PRODUIT ══ */
.fil { display: flex; flex-wrap: wrap; gap: .45rem; font-family: var(--data); font-size: var(--t-micro); color: var(--acier-bas); padding-block: 1.15rem; }
.fil a:hover { color: var(--rouge); }
.fil i { font-style: normal; opacity: .45; }

.fiche { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
@media (max-width: 940px) { .fiche { grid-template-columns: 1fr; } }

/* Le produit posé sur une planche cotée. */
.plan {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--rail);
  background:
    linear-gradient(var(--rail) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, var(--rail) 1px, transparent 1px) 0 0 / 34px 100%,
    var(--asphalte);
  background-blend-mode: normal;
  display: grid; place-items: center;
  padding: clamp(2rem, 6vw, 5rem);
  overflow: hidden;
}
.plan > svg, .plan > img { position: relative; z-index: 2; width: 100%; max-width: 380px; height: auto; }
.plan__cote {
  position: absolute; z-index: 3;
  font-family: var(--data); font-size: .625rem; letter-spacing: .06em; color: var(--acier-bas);
}
.plan__cote--h { left: 50%; top: 1rem; transform: translateX(-50%); }
.plan__cote--v { left: 1rem; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }
.plan__note {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: .5rem .75rem;
  background: rgba(255,255,255,.88);
  border-top: 1px solid var(--rail);
  font-family: var(--data); font-size: .5625rem; letter-spacing: .06em;
  color: var(--acier-bas); text-align: center;
}
.zone--nuit .plan__note { background: rgba(19,27,34,.86); }
/* Quand la photographie existe, le fond quadrillé disparaît : la planche
   devient un plateau de studio, et la cote reste pour donner l'échelle. */
.plan--photo {
  padding: clamp(1rem, 2.5vw, 2rem);
  background: #FFFFFF;
}
.plan--photo > img { max-width: none; width: 100%; height: 100%; object-fit: contain; }
.plan--photo .plan__note { display: none; }
.piece__v img { mix-blend-mode: multiply; }

.fiche__ref {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--data); font-size: var(--t-micro); letter-spacing: .1em;
  border: 1px solid var(--rouge); color: var(--rouge); padding: .35rem .6rem;
}
.fiche__h { margin-block: 1.1rem .9rem; }
.fiche__d { color: var(--acier); max-width: 54ch; }

/* Configurateur : la partie où l'acheteur décide. */
.confg { margin-top: 2rem; border: 1px solid var(--rail); background: var(--asphalte); }
.confg__t {
  padding: .85rem 1.25rem; border-bottom: 1px solid var(--rail);
  font-family: var(--data); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--acier);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.confg__b { padding: 1.25rem; display: grid; gap: 1.2rem; }
.confg__l { display: grid; gap: .5rem; }
.confg__k {
  font-family: var(--data); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acier-bas);
}
.opts { display: grid; gap: .4rem; }
@media (min-width: 560px) { .opts--3 { grid-template-columns: repeat(3, 1fr); } }
.opt {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .7rem .8rem; border: 1px solid var(--rail); cursor: pointer;
  transition: border-color var(--vif), background var(--vif);
}
.opt:hover { border-color: var(--rail-vif); }
.opt input { margin-top: .2rem; width: 15px; height: 15px; accent-color: var(--rouge); flex: none; }
.opt:has(input:checked) { border-color: var(--rouge); background: rgba(22,83,126,.06); }
.opt b { display: block; font-size: var(--t-fin); font-weight: 600; color: var(--craie); }
.opt em { display: block; font-style: normal; font-size: var(--t-micro); color: var(--acier-bas); line-height: 1.35; margin-top: .1rem; }

.confg__pied { padding: 1.1rem 1.25rem; border-top: 1px solid var(--rail); display: grid; gap: .7rem; }
.qte { display: flex; align-items: center; gap: .8rem; }
.qte label { font-family: var(--data); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--acier-bas); }
.qte input { width: 104px; text-align: center; font-family: var(--data); }
.actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.actions .b { flex: 1 1 180px; }

/* Cartouche technique : la table de spécifications lue comme un plan. */
.specs { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.specs th, .specs td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--rail); vertical-align: top; }
.specs th { width: 36%; font-weight: 500; color: var(--acier-bas); font-family: var(--data); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; }
.specs td { color: var(--craie); }
.scroll-x { overflow-x: auto; }

.onglets { display: flex; border-bottom: 1px solid var(--rail); margin-bottom: 1.75rem; overflow-x: auto; }
.onglet {
  padding: .9rem 1.2rem; cursor: pointer; white-space: nowrap;
  border-bottom: 1px solid transparent; margin-bottom: -1px;
  font-family: var(--data); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acier-bas);
  transition: color var(--vif), border-color var(--vif);
}
.onglet:hover { color: var(--craie); }
.onglet.est-actif { color: var(--rouge); border-bottom-color: var(--rouge); }
.pan[hidden] { display: none; }

.puces-liste { display: grid; gap: .6rem; }
.puces-liste li { display: flex; gap: .8rem; align-items: flex-start; color: var(--acier); font-size: var(--t-base); }
.puces-liste li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .55rem; background: var(--rouge); transform: rotate(45deg); }

/* ═══════════════════════════════════════════════════════ 15 · PROJETS ═══ */
.projets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1px; background: var(--rail); border: 1px solid var(--rail); }
.projet { position: relative; background: var(--nuit); display: flex; flex-direction: column; transition: background var(--doux); }
.projet:hover { background: var(--asphalte); }
.projet__v { aspect-ratio: 3 / 2; overflow: hidden; }
.projet__v svg, .projet__v img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.16,.72,.18,1); }
.projet:hover .projet__v svg, .projet:hover .projet__v img { transform: scale(1.055); }
.projet__c { padding: 1.4rem; display: grid; gap: .6rem; }
.projet__m { font-family: var(--data); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--acier-bas); }
.projet__c h3 a::after { content: ""; position: absolute; inset: 0; }

.segm { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 2rem; }
.segm button {
  padding: .55rem 1rem; border: 1px solid var(--rail); cursor: pointer;
  font-family: var(--data); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acier);
  transition: all var(--vif);
}
.segm button:hover { border-color: var(--rail-vif); color: var(--craie); }
.segm button.est-actif { background: var(--rouge); border-color: var(--rouge); color: #fff; }

/* ═══════════════════════════════════════════════════ 16 · ENGAGEMENTS ═══ */
.engs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 1px; background: var(--rail); border: 1px solid var(--rail); }
@media (min-width: 1040px) { .engs--3 { grid-template-columns: repeat(3, 1fr); } }
.eng {
  background: var(--nuit); padding: clamp(1.6rem, 2.8vw, 2.4rem);
  display: grid; gap: .85rem; align-content: start;
  transition: background var(--doux);
}
.eng:hover { background: var(--asphalte); }
.eng__i { width: 34px; height: 34px; color: var(--rouge); }
.eng h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.015em; }
.eng p { font-size: var(--t-base); color: var(--acier); }
.eng__n { font-family: var(--data); font-size: var(--t-micro); color: var(--acier-bas); }

/* ═════════════════════════════════════════════════════ 17 · ARTICLES ════ */
.articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 1px; background: var(--rail); border: 1px solid var(--rail); }
.article { position: relative; background: var(--nuit); padding: 1.85rem; display: flex; flex-direction: column; gap: .8rem; transition: background var(--doux); }
.article:hover { background: var(--asphalte); }
.article__m { display: flex; gap: .6rem; font-family: var(--data); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--acier-bas); }
.article h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.015em; }
.article h3 a::after { content: ""; position: absolute; inset: 0; }
.article p { font-size: var(--t-base); color: var(--acier); }

.texte-long { display: grid; gap: 2.25rem; }
.texte-long h2 { font-family: var(--texte); font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 600; letter-spacing: -.02em; }
.texte-long p { color: var(--acier); max-width: 68ch; margin-top: .8rem; }

/* ══════════════════════════════════════════════════ 18 · FORMULAIRES ════ */
.form { display: grid; gap: 1.2rem; }
.form__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 680px) { .form__g { grid-template-columns: 1fr; } }
.ch { display: grid; gap: .4rem; }
.ch label { font-family: var(--data); font-size: var(--t-micro); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--acier-bas); }
.ch label .req { color: var(--rouge); }
.ch .aide { font-size: var(--t-mini); color: var(--acier-bas); }
textarea.champ { min-height: 148px; resize: vertical; font-family: var(--texte); }
.consent { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--t-mini); color: var(--acier); }
.consent input { margin-top: .25rem; width: 17px; height: 17px; accent-color: var(--rouge); flex: none; }
.miel { position: absolute; left: -9999px; width: 0; height: 0; overflow: hidden; }

.alerte { padding: 1rem 1.25rem; border-left: 2px solid var(--rouge); background: rgba(22,83,126,.07); font-size: var(--t-base); color: var(--craie); }
.alerte--ok { border-left-color: var(--vert); background: rgba(14,122,87,.1); }
.alerte[hidden] { display: none; }

.encart { border-left: 2px solid var(--rouge); padding: 1.35rem 1.6rem; background: var(--asphalte); font-size: var(--t-base); color: var(--acier); }
.encart strong { color: var(--craie); }

/* ══════════════════════════════════════════════ 19 · BON DE COMMANDE ════ */
.rideau { position: fixed; inset: 0; z-index: 110; background: rgba(3,4,6,.72); opacity: 0; visibility: hidden; transition: opacity var(--doux), visibility var(--doux); backdrop-filter: blur(3px); }
.rideau.est-ouvert { opacity: 1; visibility: visible; }

.bon {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(460px, 100%);
  background: var(--asphalte);
  border-left: 1px solid var(--rail);
  display: flex; flex-direction: column;
  transform: translateX(101%);
  transition: transform 520ms cubic-bezier(.22,.72,.2,1);
}
.bon.est-ouvert { transform: none; }
.bon__t { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--rail); }
.bon__t h2 { font-family: var(--display); font-size: 1.65rem; font-weight: 700; text-transform: uppercase; }
.bon__x { width: 42px; height: 42px; border: 1px solid var(--rail); cursor: pointer; display: grid; place-items: center; }
.bon__x:hover { border-color: var(--rouge); color: var(--rouge); }
.bon__c { flex: 1; overflow-y: auto; padding: 0 1.5rem; }
.bon__p { padding: 1.25rem 1.5rem; border-top: 1px solid var(--rail); display: grid; gap: .55rem; background: var(--nuit); }

.ligne-b { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; gap: .85rem; align-items: center; padding-block: 1rem; border-bottom: 1px solid var(--rail); }
.ligne-b__v { border: 1px solid var(--rail); padding: .25rem; display: grid; place-items: center; }
.ligne-b__n { font-size: var(--t-fin); font-weight: 600; line-height: 1.3; color: var(--craie); }
.ligne-b__o { font-family: var(--data); font-size: .625rem; color: var(--acier-bas); margin-top: .3rem; line-height: 1.4; }
.ligne-b__x { font-family: var(--data); font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--acier-bas); cursor: pointer; margin-top: .35rem; }
.ligne-b__x:hover { color: var(--rouge); }
.ligne-b input { width: 66px; min-height: 38px; text-align: center; font-family: var(--data); font-size: var(--t-mini); background: var(--nuit); border: 1px solid var(--rail); color: var(--craie); }

.recap { border: 1px solid var(--rail); background: var(--asphalte); }
.recap__l { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--rail); font-size: var(--t-fin); }
.recap__l:last-child { border-bottom: 0; }
.recap__o { display: block; font-family: var(--data); font-size: .625rem; color: var(--acier-bas); margin-top: .25rem; }
.recap__q { font-family: var(--data); font-size: var(--t-mini); color: var(--rouge); white-space: nowrap; }

/* ══════════════════════════════════════════════════════ 20 · CONTACT ════ */
.duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
@media (max-width: 940px) { .duo { grid-template-columns: 1fr; } }
.coord { display: grid; }
.coord__i { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 1rem; align-items: start; padding-block: 1.25rem; border-bottom: 1px solid var(--rail); }
.coord__i:last-child { border-bottom: 0; }
.coord__ic { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--rail); color: var(--rouge); }
.coord__ic svg { width: 18px; height: 18px; }
.coord__i h4 { font-family: var(--data); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--acier-bas); margin-bottom: .3rem; font-weight: 500; }
.coord__i a:hover { color: var(--rouge); }

/* ══════════════════════════════════════════════════════ 21 · APPELS ═════ */
/* La bande d'appel : le bleu plein, balayé par un balisage discret. */
.appel { position: relative; overflow: hidden; background: var(--rouge); color: #fff; }
.appel::before {
  content: ""; position: absolute; inset: -20% -10%;
  background: repeating-linear-gradient(118deg, rgba(255,255,255,.045) 0 30px, transparent 30px 66px);
  animation: balise 22s linear infinite;
}
@keyframes balise { to { transform: translateX(58px); } }
.appel__in { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2.5rem; align-items: center; }
.appel h2 { color: #fff; max-width: 18ch; }
.appel p { margin-top: 1rem; max-width: 50ch; color: rgba(255,255,255,.88); }
.appel .b--craie { --b-fond: #fff; --b-txt: var(--rouge); --b-bord: #fff; }
.appel .b--craie::before { background: var(--nuit); }
.appel .b--craie:hover { color: #fff; }
.appel .b--fantome { --b-txt: #fff; --b-bord: rgba(255,255,255,.5); }
.appel .b--fantome::before { background: #fff; }
.appel .b--fantome:hover { color: var(--rouge); }
@media (max-width: 900px) { .appel__in { grid-template-columns: 1fr; } }

/* ═════════════════════════════════════════════════════════ 22 · PIED ════ */
.pied {
  --nuit: var(--sombre); --asphalte: var(--sombre-2); --beton: var(--sombre-2);
  --rail: var(--sombre-fil); --rail-vif: #3E4A56;
  --craie: #EEF1F3; --acier: #9AA4AC; --acier-bas: #808A92;
  --rouge: var(--rouge-nuit);
  background: var(--sombre); color: #EEF1F3; color-scheme: dark;
  border-top: 1px solid var(--sombre);
}
.pied__h { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); padding-block: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 780px) { .pied__h { grid-template-columns: 1fr; gap: 2rem; } }
.pied h4 { font-family: var(--data); font-size: var(--t-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--acier-bas); margin-bottom: .6rem; }
.pied ul { display: grid; gap: .5rem; }
.pied a { color: var(--acier); transition: color var(--vif); font-size: var(--t-base); }
.pied a:hover { color: var(--craie); }
.pied__co { display: grid; gap: .75rem; margin-top: 1.4rem; }
.pied__co li { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-base); color: var(--acier); }
.pied__co svg { width: 15px; height: 15px; color: var(--rouge); flex: none; margin-top: .3rem; }
.pied__b { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; padding-block: 1.4rem; border-top: 1px solid var(--rail); }
.pied__b, .pied__b a { font-family: var(--data); font-size: var(--t-micro); color: var(--acier-bas); letter-spacing: .04em; }
.pied__lg { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.pied__soc { display: flex; gap: .5rem; margin-top: 1.25rem; }
.pied__soc a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--rail); transition: all var(--vif); }
.pied__soc a:hover { border-color: var(--rouge); color: var(--rouge); }
.pied__soc svg { width: 16px; height: 16px; }

/* Les trois familles de liens ne sont plus déroulées d'office : chacune
   est un sous-menu qu'on ouvre soi-même, d'un titre à la fois — le pied de
   page reste court par défaut, et complet pour qui cherche vraiment. */
.pied__grp { display: flex; flex-direction: column; }
.pied__acc { border-bottom: 1px solid var(--rail); }
.pied__acc:first-child { border-top: 1px solid var(--rail); }
.pied__acc summary {
  display: flex; align-items: center; gap: .85rem; cursor: pointer;
  list-style: none; padding-block: 1rem;
  font-family: var(--data); font-size: var(--t-mini); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--craie);
  -webkit-tap-highlight-color: transparent;
}
.pied__acc summary::-webkit-details-marker { display: none; }
.pied__acc summary:hover { color: var(--rouge); }
.pied__acc-t { flex: 1; }
.pied__acc summary .data { font-size: var(--t-micro); color: var(--acier-bas); text-transform: none; letter-spacing: normal; }
.pied__chv { position: relative; width: 11px; height: 11px; flex: none; color: var(--acier-bas); }
.pied__chv::before, .pied__chv::after { content: ""; position: absolute; background: currentColor; }
.pied__chv::before { left: 0; top: 5px; width: 11px; height: 1px; }
.pied__chv::after { top: 0; left: 5px; width: 1px; height: 11px; transition: transform .25s var(--doux, ease); }
.pied__acc[open] .pied__chv::after { transform: rotate(90deg); }
.pied__acc[open] summary { color: var(--rouge); }
.pied__acc ul { padding-bottom: 1.3rem; gap: .6rem; }
.pied__appel { margin-top: clamp(1.6rem, 3vw, 2.4rem); padding-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--rail); }
.pied__appel h4 { color: var(--craie); font-size: var(--t-lu); text-transform: none; letter-spacing: normal; font-family: var(--texte); font-weight: 600; margin-bottom: .5rem; }
.pied__appel .corps { color: var(--acier); max-width: 40ch; margin-bottom: 1.2rem; }
.pied__btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.pied__btns .b { flex: 1; min-width: 11rem; }
@media (max-width: 480px) { .pied__btns .b { min-width: 100%; } }

/* Fin de route : un trait qui s'arrête. */
.pied__fin { height: 3px; background: repeating-linear-gradient(90deg, var(--rouge) 0 42px, transparent 42px 78px); }

/* ════════════════════════════════════════════════════ 23 · FLOTTANTS ════ */
.flot { position: fixed; right: clamp(1rem, 2.5vw, 1.75rem); bottom: clamp(1rem, 2.5vw, 1.75rem); z-index: 100; display: grid; gap: .6rem; justify-items: end; }
.fab {
  position: relative; width: 56px; height: 56px; display: grid; place-items: center;
  cursor: pointer; border: 1px solid transparent;
  transition: transform var(--vif), background var(--vif);
}
.fab:hover { transform: translateY(-2px); }
.fab svg { width: 24px; height: 24px; }
.fab--wa { background: #1DA851; color: #fff; border-radius: 50%; }
.fab--wa:hover { background: #178B43; }
.fab--bon { background: var(--craie); color: var(--nuit); }
.fab--bon:hover { background: var(--rouge); color: #fff; }
.fab__b {
  position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 .3rem;
  display: grid; place-items: center; background: var(--rouge); color: #fff;
  font-family: var(--data); font-size: .625rem; font-weight: 500;
  border: 2px solid var(--nuit);
}
.fab[hidden] { display: none; }

/* Jauge de progression : la distance parcourue sur la page. */
.jauge { position: fixed; left: 0; top: 0; height: 2px; z-index: 130; background: var(--rouge); width: 0; transition: width 90ms linear; }

/* ════════════════════════════════════════════════════ 24 · APPARITION ═══ */
.vient { opacity: 0; transform: translateY(22px); }
.vient.est-la { opacity: 1; transform: none; transition: opacity 760ms cubic-bezier(.16,.72,.18,1), transform 760ms cubic-bezier(.16,.72,.18,1); }

/* Transition entre pages : un balayage de balisage. */
.bascule {
  position: fixed; inset: 0; z-index: 140; pointer-events: none;
  background: repeating-linear-gradient(118deg, var(--rouge) 0 34px, #fff 34px 68px);
  transform: scaleY(0); transform-origin: bottom;
}
.bascule.part { animation: bascule 720ms cubic-bezier(.7,0,.3,1) forwards; }
@keyframes bascule {
  0%   { transform: scaleY(0); transform-origin: bottom; }
  45%  { transform: scaleY(1); transform-origin: bottom; }
  46%  { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: top; }
}

/* ═════════════════════════════════════════════════════ 25 · DIVERS ══════ */
.entete-page { padding-block: clamp(5.5rem, 10vw, 8.5rem) clamp(1.5rem, 3vw, 2.5rem); position: relative; overflow: hidden; }
.entete-page::after {
  content: ""; position: absolute; right: -8%; top: -30%; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, rgba(22,83,126,.16) 0%, transparent 66%);
  pointer-events: none;
}
.entete-page__in { position: relative; }
.entete-page h1 { font-size: clamp(2.4rem, 1.1rem + 4.6vw, 5.25rem); }

.grille-liens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 1px; background: var(--rail); border: 1px solid var(--rail); }
.grille-liens a { position: relative; background: var(--nuit); padding: 1.4rem; display: grid; gap: .35rem; transition: background var(--doux); }
.grille-liens a:hover { background: var(--asphalte); }
.grille-liens b { font-size: var(--t-lu); font-weight: 600; letter-spacing: -.015em; }
.grille-liens span { font-family: var(--data); font-size: var(--t-micro); color: var(--acier-bas); }

.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(50%, 172px), 1fr)); gap: 1px; background: var(--rail); border: 1px solid var(--rail); }
.logo-case { background: var(--nuit); aspect-ratio: 5/2; display: grid; place-items: center; padding: 1rem; text-align: center; font-family: var(--data); font-size: .5625rem; letter-spacing: .08em; color: var(--acier-bas); }

.jalons { border-top: 1px solid var(--rail); }
.jalon { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 2.5rem; padding-block: 1.9rem; border-bottom: 1px solid var(--rail); }
@media (max-width: 720px) { .jalon { grid-template-columns: 1fr; gap: .6rem; } }
.jalon__k { font-family: var(--data); font-size: var(--t-micro); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--rouge); }
.jalon p { color: var(--acier); }

.cadre { position: relative; border: 1px solid var(--rail); overflow: hidden; aspect-ratio: 4/3; background: var(--asphalte); }
.cadre svg, .cadre img { width: 100%; height: 100%; object-fit: cover; }
.cadre__lg { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .75rem; background: rgba(19,27,34,.80); font-family: var(--data); font-size: .5625rem; letter-spacing: .06em; color: var(--acier-bas); text-align: center; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split--inv > :first-child { order: 2; }
@media (max-width: 900px) { .split--inv > :first-child { order: 0; } }

/* ═══════════════════════════════════════════ 26 · MOUVEMENT RÉDUIT ══════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ligne > span { transform: none; }
  .route__sous, .route__act, .portique { opacity: 1; }
  .vient { opacity: 1; transform: none; }
  .phare { display: none; }
}

@media print {
  .tete, .flot, .bon, .rideau, .appel, .voile-nav, .phare, .jauge, .descendre, .defile { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ═══════════════════════════════ ENTRÉE · ADAPTATION PETITS ÉCRANS ══════ */
@media (max-width: 900px) {
  .route::after {
    background:
      linear-gradient(180deg, rgba(9,13,17,.72) 0%, rgba(9,13,17,.30) 34%, rgba(9,13,17,.52) 70%, rgba(9,13,17,.80) 100%),
      linear-gradient(96deg, rgba(9,13,17,.62) 0%, rgba(9,13,17,.28) 46%, transparent 92%);
  }
}

/* Pied de page : le bouton d'appel reste le point le plus clair du bloc. */
.pied .b { --b-fond: #FFFFFF; --b-txt: var(--sombre); --b-bord: #FFFFFF; }
.pied .b::before { background: var(--rouge-nuit); }
.pied .b:hover { color: var(--sombre); }
.pied .b--wa { --b-fond: #1DA851; --b-txt: #fff; --b-bord: #1DA851; }
.pied .b--wa::before { background: #157F3D; }
.pied .b--wa:hover { color: #fff; }

/* L'entrée : le titre reste dans la moitié gauche, là où le voile porte. */
.route .titre-1 { font-size: clamp(2.6rem, 1rem + 5.3vw, 5.6rem); }
@media (min-width: 1100px) { .route .titre-1 { max-width: 15ch; } }

/* ══════════════════════════════════ PLANCHE PRODUITS (menu & mobile) ════ */
/* Le catalogue entier, visible sans cliquer : chaque référence a son visuel. */
.planche-p { display: grid; gap: 1.15rem; }
.planche-p__f { display: grid; gap: .75rem; }
.planche-p__t {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--rail);
  font-family: var(--data); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rouge);
}
.planche-p__t .data { color: var(--acier-bas); letter-spacing: .08em; }
.planche-p__t a { transition: opacity var(--vif); }
.planche-p__t a:hover { opacity: .7; }
.planche-p__g {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: .3rem;
}

.vgn {
  display: grid; gap: .25rem; justify-items: center; text-align: center;
  align-content: start;
  padding: .4rem .3rem .5rem;
  border: 1px solid transparent;
  transition: border-color var(--vif), background var(--vif), transform var(--vif);
}
.vgn:hover, .vgn:focus-visible {
  border-color: var(--rail-vif);
  background: var(--asphalte);
  transform: translateY(-2px);
}
.vgn__v {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1 / 1;
  background: #FFFFFF;
  border: 1px solid var(--rail);
  padding: .35rem;
}
.vgn__v svg, .vgn__v img {
  width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
}
.vgn__r {
  font-family: var(--data); font-size: .5625rem; letter-spacing: .06em;
  color: var(--acier-bas);
}
.vgn__n {
  font-size: .6875rem; line-height: 1.25; color: var(--craie);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Le méga-menu passe en planche : en-tête compact puis la grille complète. */
.mm--planche .lig { padding-block: 1.15rem 1.4rem; }
.mm__tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: .8rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--rail);
}
.mm__tete .data { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--acier-bas); }
.mm--planche .planche-p { max-height: min(78vh, 700px); overflow-y: auto; padding-right: .4rem; }
.mm--planche .planche-p::-webkit-scrollbar { width: 6px; }
.mm--planche .planche-p::-webkit-scrollbar-thumb { background: var(--rail-vif); }

/* Nav plein écran : la même planche, en plus dense. */
.voile-nav__prod { margin-top: 2rem; }
.voile-nav__prod > .planche-p__t { margin-bottom: 1.25rem; }
.planche-p--mob .planche-p__g { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
@media (max-width: 460px) {
  .planche-p--mob .planche-p__g { grid-template-columns: repeat(3, 1fr); }
  .vgn__n { font-size: .625rem; }
}

/* Le méga-menu garde toujours l'encre du jour, même quand l'en-tête est
   passé en encre claire au-dessus de l'image d'entrée. */
.mm {
  --craie: #131B21;
  --acier: #4D5860;
  --acier-bas: #6E7982;
  --rouge: #16537E;
  --rail: #E3E8EB;
  --rail-vif: #C6CED4;
  --asphalte: #F4F6F7;
  --beton: #FFFFFF;
  color: #131B21;
  color-scheme: light;
}

/* ══════════════════════════════════════════ CATALOGUE IMPRIMABLE ════════
   Un document, pas une page web. Ce qui s'affiche à l'écran est exactement
   ce qui sort de l'imprimante : mêmes feuilles A4, mêmes marges, mêmes
   coupes. Il n'existe pas de « version impression » séparée à maintenir.  */
/* Sur le document, l'en-tête du site s'efface : la barre du document est la
   seule chrome à l'écran. On est dans un lecteur, pas dans une page. */
.corps-imp { background: #D9DEE3; }
.corps-imp main { padding-top: 0; }
.corps-imp .tete, .corps-imp .jauge, .corps-imp .bascule { display: none; }
.imp-barre__id { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.imp-barre__id img { height: 40px; width: auto; flex: none; }
@media (max-width: 620px) { .imp-barre__id img { height: 32px; } }

.imp-barre {
  position: sticky; top: 0; z-index: 60;
  background: var(--sombre); color: #EEF1F3;
  border-bottom: 1px solid #000;
}
.imp-barre__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; padding-block: .9rem;
}
.imp-barre .data { display: block; font-size: var(--t-micro); letter-spacing: .16em;
  text-transform: uppercase; color: #8C959D; margin-bottom: .15rem; }
.imp-barre strong { font-size: var(--t-base); font-weight: 600; }
.imp-barre__act { display: flex; gap: .6rem; flex-wrap: wrap; }
.imp-barre .b { --b-fond: #FFFFFF; --b-txt: var(--sombre); --b-bord: #FFFFFF; }
.imp-barre .b::before { background: var(--bleu-cl, #4A87B4); }
.imp-barre .b:hover { color: var(--sombre); }
.imp-barre .b--fantome { --b-fond: transparent; --b-txt: #EEF1F3; --b-bord: rgba(255,255,255,.34); }
.imp-barre .b--fantome::before { background: #fff; }
.imp-barre .b--fantome:hover { color: var(--sombre); }

.doc-imp { padding: clamp(1rem, 3vw, 2.5rem) 0 4rem; }

/* La feuille : A4 exact, à l'écran comme sur le papier. */
.feuille {
  width: 210mm;
  height: 296mm;
  margin: 0 auto clamp(1rem, 2vw, 1.6rem);
  background: #FFFFFF;
  color: #131B21;
  box-shadow: 0 1px 2px rgba(9,13,17,.16), 0 14px 34px rgba(9,13,17,.14);
  position: relative;
  overflow: hidden;
}
.feuille__in {
  padding: 16mm 15mm 15mm;
  height: 296mm;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-sizing: border-box;
}
.feuille__in--duo { gap: 6mm; justify-content: flex-start; }

/* En-tête courant : discret, mais il situe la page dans le document. */
.imp-courant {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: 3mm; margin-bottom: 7mm;
  border-bottom: .4pt solid #C8D0D6;
  font-family: var(--data); font-size: 6.5pt; letter-spacing: .14em;
  text-transform: uppercase; color: #7C868E;
}

/* ── Couverture ─────────────────────────────────────────────────────── */
.feuille--couv .feuille__in {
  justify-content: space-between;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 44%, #F1F4F6 44%, #F1F4F6 100%);
}
.couv__haut { padding-top: 6mm; }
.couv__logo { height: 52mm; width: auto; }
.couv__bas { padding-bottom: 6mm; }
.couv__eyebrow {
  display: block; font-family: var(--data); font-size: 7pt; letter-spacing: .22em;
  text-transform: uppercase; color: var(--bleu); margin-bottom: 6mm;
}
.couv__t {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 40pt; line-height: .98; letter-spacing: -.005em; color: #131B21;
}
.couv__s { margin-top: 6mm; font-size: 11pt; line-height: 1.5; color: #4D5860; max-width: 78%; }
.couv__meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4mm;
  margin-top: 10mm; padding-top: 5mm; border-top: .8pt solid #131B21;
}
.couv__meta .data { display: block; font-family: var(--data); font-size: 6pt;
  letter-spacing: .16em; text-transform: uppercase; color: #7C868E; margin-bottom: 1.5mm; }
.couv__meta b { font-size: 10pt; font-weight: 600; }
.couv__filet {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4mm;
  background: repeating-linear-gradient(90deg,
    var(--bleu) 0 14mm, transparent 14mm 26mm);
}

/* ── Sommaire ───────────────────────────────────────────────────────── */
.imp-h2 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 26pt; line-height: .95; color: #131B21; margin-bottom: 6mm;
}
.imp-h3 {
  font-family: var(--data); font-size: 7.5pt; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bleu); margin: 9mm 0 3mm;
}
.imp-chapo { font-size: 12pt; line-height: 1.45; color: #131B21; margin-bottom: 5mm; max-width: 92%; }
.imp-corps { font-size: 9.5pt; line-height: 1.6; color: #3C464E; max-width: 96%; }
.imp-corps + .imp-corps { margin-top: 3mm; }
.som { list-style: none; margin: 0 0 4mm; padding: 0; }
.som li {
  display: flex; align-items: baseline; gap: 3mm;
  padding: 3.4mm 0; border-bottom: .4pt solid #D8DEE3; font-size: 11pt;
}
.som .data { font-family: var(--data); font-size: 7.5pt; color: #7C868E; }
.som__n { font-weight: 600; }
.som__f { flex: 1; border-bottom: .4pt dotted #C0C8CE; transform: translateY(-2px); }

/* ── Intercalaire de famille ────────────────────────────────────────── */
.feuille--fam .feuille__in { background: #F7F9FA; }
.imp-num {
  display: block; font-family: var(--data); font-size: 7pt; letter-spacing: .2em;
  text-transform: uppercase; color: var(--bleu); margin-bottom: 5mm;
}
.imp-sous { list-style: none; margin: 7mm 0 0; padding: 0; }
.imp-sous li {
  display: flex; justify-content: space-between; gap: 4mm;
  padding: 2.6mm 0; border-bottom: .4pt solid #D8DEE3; font-size: 9.5pt;
}
.imp-sous .data { font-family: var(--data); font-size: 7.5pt; color: #7C868E; }
.imp-planche {
  margin-top: auto; padding-top: 8mm;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 3mm;
}
.imp-vgn { text-align: center; }
.imp-vgn svg, .imp-vgn img {
  width: 100%; aspect-ratio: 1/1; object-fit: contain;
  background: #FFFFFF; border: .4pt solid #DEE3E7; padding: 1.5mm;
  mix-blend-mode: multiply;
}
.imp-vgn span {
  display: block; margin-top: 1mm;
  font-family: var(--data); font-size: 5.2pt; letter-spacing: .04em; color: #7C868E;
}

/* ── Fiche produit imprimée ─────────────────────────────────────────── */
.fimp {
  flex: 0 0 auto;
  border: .5pt solid #D2D9DE;
  padding: 5mm;
  display: flex; flex-direction: column;
  break-inside: avoid;
}
.fimp__t { border-bottom: .8pt solid #131B21; padding-bottom: 2mm; margin-bottom: 3.5mm; }
.fimp__r {
  display: inline-block; font-family: var(--data); font-size: 6.5pt; letter-spacing: .1em;
  color: #FFFFFF; background: var(--bleu); padding: .8mm 2mm; margin-bottom: 2mm;
}
.fimp__t h3 { font-size: 11.5pt; font-weight: 700; line-height: 1.18; color: #131B21; }
.fimp__s {
  display: block; margin-top: 1.2mm;
  font-family: var(--data); font-size: 6.5pt; letter-spacing: .12em;
  text-transform: uppercase; color: #7C868E;
}
.fimp__c { display: grid; grid-template-columns: 27mm minmax(0, 1fr); gap: 4.5mm; margin-bottom: 2.5mm; }
.fimp__v {
  margin: 0; aspect-ratio: 1/1; display: grid; place-items: center;
  border: .4pt solid #DEE3E7; background: #FFFFFF; padding: 2mm;
}
.fimp__v svg, .fimp__v img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.fimp__d p { font-size: 8pt; line-height: 1.45; color: #3C464E; }
.fimp__a { margin-top: 2.5mm; font-size: 7.5pt; color: #5A646C; }
.fimp__a b, .fimp__o b { font-family: var(--data); font-size: 6.5pt; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bleu); font-weight: 500; }
.fimp__sp { width: 100%; border-collapse: collapse; }
.fimp__sp tr { border-top: .4pt solid #E3E8EB; }
.fimp__sp th, .fimp__sp td { text-align: left; vertical-align: top; padding: 1mm 0; font-size: 7pt; line-height: 1.34; }
.fimp__sp th { width: 31mm; padding-right: 3mm; font-weight: 500; color: #7C868E;
  font-family: var(--data); font-size: 6.4pt; letter-spacing: .04em; text-transform: uppercase; }
.fimp__sp td { color: #29323A; }
.fimp__o { margin-top: 3mm; padding-top: 2mm; border-top: .8pt solid #131B21;
  font-size: 7.2pt; line-height: 1.4; color: #5A646C; }

/* ── Page de commande ───────────────────────────────────────────────── */
.imp-etapes { margin: 0 0 8mm; padding: 0; list-style: none; counter-reset: e; }
.imp-etapes li {
  counter-increment: e; position: relative; padding: 3.5mm 0 3.5mm 12mm;
  border-bottom: .4pt solid #D8DEE3; font-size: 9.5pt; line-height: 1.55; color: #3C464E;
}
.imp-etapes li::before {
  content: counter(e, decimal-leading-zero);
  position: absolute; left: 0; top: 3.8mm;
  font-family: var(--data); font-size: 8pt; color: var(--bleu);
}
.imp-contact {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4mm 8mm;
  padding: 6mm; background: #F1F4F6; border-left: 1.2pt solid var(--bleu);
}
.imp-contact .data { display: block; font-family: var(--data); font-size: 6pt;
  letter-spacing: .16em; text-transform: uppercase; color: #7C868E; margin-bottom: 1mm; }
.imp-contact b { font-size: 9.5pt; font-weight: 600; color: #131B21; }
.imp-mentions { margin-top: 7mm; font-size: 7pt; line-height: 1.6; color: #7C868E; }
.imp-fin-logo { margin-top: auto; height: 26mm; width: auto; align-self: center; }

/* Les placeholders restent visibles à l'impression, en gris encadré. */
.corps-imp .ph { background: none; border: .4pt solid #B9A15E; color: #7A6420; padding: 0 1mm; }

/* ── Écran étroit : la feuille se met à l'échelle sans jamais déborder ── */
@media (max-width: 860px) {
  .doc-imp { width: 100%; overflow-x: auto; padding-inline: 0; }
  .feuille { transform-origin: top center; }
}
@media (max-width: 780px) {
  .feuille { zoom: .72; }
}
@media (max-width: 560px) {
  .feuille { zoom: .5; }
  .imp-barre__in { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════ RÈGLES D'IMPRESSION ═ */
@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body { background: #FFFFFF !important; }
  .tete, .voile-nav, .rideau, .bon, .fab, .flot, .jauge, .bascule, .appel,
  .pied, .imp-barre, .defile, .descendre, .saut { display: none !important; }
  body::before { display: none !important; }
  main { padding-top: 0 !important; }
  .doc-imp { padding: 0 !important; }
  .feuille {
    width: 210mm; height: 296mm; margin: 0; box-shadow: none; overflow: hidden;
    break-after: page; page-break-after: always; zoom: 1;
  }
  .feuille:last-child { break-after: auto; page-break-after: auto; }
  .feuille__in { height: 296mm; }
  .fimp { break-inside: avoid; page-break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
  .imp-vgn svg, .imp-vgn img, .fimp__v svg, .fimp__v img,
  .couv__logo, .imp-fin-logo {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ══════════════════════════════════════════════════ LA CONSOLE (catalogue) ═
   Le catalogue n'est pas une page de marque, c'est un instrument. Pas de
   grand titre d'apparat : une barre de commande dense, le champ de recherche
   au premier plan, les six familles en rail, puis la marchandise plein cadre. */
.console {
  background: var(--sombre);
  color: #EEF1F3;
  --craie: #F2F5F7; --acier: #A8B1B8; --acier-bas: #8A939A;
  --rail: rgba(255,255,255,.15); --rail-vif: rgba(255,255,255,.3);
  --beton: rgba(255,255,255,.06);
}
.console__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 2.5vw, 1.75rem);
}
@media (min-width: 1000px) {
  .console__in {
    grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 3vw, 3rem);
  }
}
.console__id .data {
  display: block; font-family: var(--data); font-size: var(--t-micro);
  letter-spacing: .2em; text-transform: uppercase; color: var(--bleu-cl, #6FA8D0);
  margin-bottom: .5rem;
}
.console__t {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 1.1rem + 1.5vw, 2.75rem); line-height: .92;
  color: #F7F9FA; letter-spacing: -.005em;
}
.console__t span {
  display: block; margin-top: .45rem;
  font-family: var(--texte); font-size: var(--t-fin); font-weight: 400;
  letter-spacing: 0; text-transform: none; color: #A8B1B8;
}

/* Le champ : c'est l'objet principal de la page, il est traité comme tel. */
.console__ch { position: relative; display: flex; align-items: center; }
.console__ch svg {
  position: absolute; left: 1.1rem; width: 19px; height: 19px;
  color: #8A939A; pointer-events: none;
}
.console__ch .champ {
  width: 100%;
  padding: 1.05rem 1.2rem 1.05rem 3.15rem;
  font-size: var(--t-lu);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.16);
  color: #F2F5F7;
  transition: border-color var(--vif), background var(--vif);
}
.console__ch .champ::placeholder { color: #7C858D; }
.console__ch .champ:focus {
  outline: none; border-color: #6FA8D0; background: rgba(255,255,255,.09);
}
.console__meta { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.console__meta .compte {
  font-family: var(--data); font-size: var(--t-micro); letter-spacing: .12em;
  text-transform: uppercase; color: #A8B1B8; white-space: nowrap;
}
.console__pdf {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1rem;
  border: 1px solid rgba(255,255,255,.24);
  font-family: var(--data); font-size: var(--t-micro); letter-spacing: .12em;
  text-transform: uppercase; color: #EEF1F3; white-space: nowrap;
  transition: background var(--vif), border-color var(--vif);
}
.console__pdf svg { width: 15px; height: 15px; }
.console__pdf:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); }

/* Le rail des familles : la carte du catalogue, avant tout filtre. */
.console__rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,.15);
}
.rail__f {
  display: flex; align-items: center; gap: .8rem;
  padding: 1.05rem clamp(.9rem, 2vw, 1.6rem);
  border-right: 1px solid rgba(255,255,255,.15);
  color: #B5BEC5;
  transition: background var(--vif), color var(--vif);
  min-width: 0;
}
.rail__f:last-child { border-right: 0; }
.rail__f:hover { background: rgba(255,255,255,.07); color: #F2F5F7; }
.rail__p {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  background: #FFFFFF; padding: 3px;
}
.rail__p svg { width: 100%; height: 100%; }
.rail__n {
  font-size: var(--t-fin); line-height: 1.25; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.rail__q {
  margin-left: auto; font-family: var(--data); font-size: var(--t-micro);
  color: #6FA8D0; flex: none;
}
@media (max-width: 1200px) { .console__rail { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
  .console__rail { grid-template-columns: repeat(2, 1fr); }
  .rail__n { font-size: var(--t-mini); }
  .rail__f:nth-child(2n) { border-right: 0; }
}
@media (max-width: 420px) { .console__rail { grid-template-columns: 1fr; } .rail__f { border-right: 0; } }

/* La grille produits respire davantage : la page entière lui appartient. */
@media (min-width: 1500px) {
  .planche { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════ LA FICHE D'IDENTITÉ (entreprise) ═
   Un acheteur institutionnel vérifie d'abord l'existence légale du fournisseur.
   La page ne s'ouvre donc pas sur un slogan mais sur la carte d'identité — et
   chaque ligne encore vide se voit. */
.fid { background: var(--sombre); color: #EEF1F3;
  --craie: #F2F5F7; --acier: #A8B1B8; --acier-bas: #8A939A; --rail: rgba(255,255,255,.15); }
.fid__in {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem);
}
@media (min-width: 1000px) { .fid__in { grid-template-columns: 1fr 1fr; align-items: start; } }
.fid__e { display: block; font-family: var(--data); font-size: var(--t-micro);
  letter-spacing: .22em; text-transform: uppercase; color: #6FA8D0; margin-bottom: 1.25rem; }
.fid__t {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.6rem, 1rem + 4vw, 5rem); line-height: .9; color: #F7F9FA;
  letter-spacing: -.01em;
}
.fid__p { margin-top: 1.5rem; max-width: 44ch; font-size: var(--t-lead);
  line-height: 1.5; color: #B5BEC5; }
.fid__act { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.fid .b { --b-fond: #FFFFFF; --b-txt: var(--sombre); --b-bord: #FFFFFF; }
.fid .b::before { background: #6FA8D0; }
.fid .b:hover { color: var(--sombre); }
.fid .b--fantome { --b-fond: transparent; --b-txt: #EEF1F3; --b-bord: rgba(255,255,255,.34); }
.fid .b--fantome::before { background: #fff; }
.fid .b--fantome:hover { color: var(--sombre); }

.fid__d { margin: 0; border-top: 1px solid rgba(255,255,255,.15); }
.fid__l {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 1rem; padding: .72rem 0;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.fid__l dt {
  font-family: var(--data); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: #8A939A;
  padding-top: .15rem;
}
.fid__l dd { margin: 0; font-size: var(--t-base); color: #EEF1F3; }
@media (max-width: 520px) { .fid__l { grid-template-columns: 1fr; gap: .2rem; } }

/* ── Ce que nous fournissons : six lignes, pas six cartes ────────────────── */
.fam-liste { border-top: 1px solid var(--rail); }
.fam-l {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem); align-items: baseline;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
  border-bottom: 1px solid var(--rail);
  transition: padding-left var(--doux), background var(--doux);
}
.fam-l:hover { padding-left: .9rem; background: var(--asphalte); }
.fam-l__n { font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.1rem, .85rem + .6vw, 1.5rem); line-height: 1.05; color: var(--craie); }
.fam-l__d { font-size: var(--t-base); color: var(--acier); line-height: 1.5; }
.fam-l__q { font-family: var(--data); font-size: var(--t-micro); color: var(--rouge); }
@media (max-width: 820px) {
  .fam-l { grid-template-columns: minmax(0,1fr) auto; gap: .5rem 1rem; }
  .fam-l__d { grid-column: 1 / -1; }
}

/* ── La couverture : huit circonscriptions, statut assumé ────────────────── */
.zones {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--rail); border: 1px solid var(--rail);
}
.zone {
  background: var(--nuit); padding: clamp(1rem, 2.4vw, 1.6rem);
  display: grid; gap: .4rem; align-content: start;
  transition: background var(--doux);
}
.zone:hover { background: var(--asphalte); }
.zone__n { font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.05rem, .85rem + .5vw, 1.35rem); color: var(--craie); }
.zone__s { font-family: var(--data); font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--acier-bas); }
.zone--siege { background: var(--asphalte); }
.zone--siege .zone__s { color: var(--rouge); }
@media (max-width: 900px) { .zones { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .zones { grid-template-columns: 1fr; } }

/* ── Les jalons : une colonne éditoriale numérotée ───────────────────────── */
.jalons { display: grid; gap: 0; border-top: 1px solid var(--rail); }
.jalon {
  display: grid; grid-template-columns: 4rem minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--rail);
}
.jalon__i { font-family: var(--data); font-size: var(--t-micro); color: var(--rouge); padding-top: .35rem; }
.jalon__k {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.15rem, .9rem + .7vw, 1.6rem); line-height: 1.05; color: var(--craie);
}
.jalon p { font-size: var(--t-lu); line-height: 1.62; color: var(--acier); max-width: 62ch; }
@media (max-width: 900px) {
  .jalon { grid-template-columns: 3rem minmax(0, 1fr); gap: .6rem 1rem; }
  .jalon p { grid-column: 2 / -1; }
}

/* ══════════════════════════════════════════════════════ L'ENTRÉE — LE DÉFILÉ ═
   L'entrée n'est pas une image : c'est un trajet. Trois voies de panneaux
   RÉELS, détourés de leur fond de studio, défilent à trois vitesses et trois
   échelles. La profondeur ne vient d'aucun effet 3D : elle naît du seul écart
   de vitesse entre les voies — exactement ce que perçoit un conducteur.
   Le texte, lui, ne bouge pas. Seule sa dernière ligne se relaie.            */
.hero {
  position: relative;
  min-height: calc(100svh - 96px);
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 78% 8%, #1E2A35 0%, #121A22 46%, #0A0F14 100%);
  color: #EEF1F3;
  --craie: #F2F5F7; --acier: #A2ACB4; --acier-bas: #869098;
  --rail: rgba(255,255,255,.16);
}
@media (max-width: 1180px) { .hero { min-height: calc(100svh - 74px); } }

/* ── La scène ───────────────────────────────────────────────────────────── */
.hero__scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.piste { position: absolute; left: 0; right: 0; display: flex; }
.piste__d {
  display: flex; align-items: center; width: max-content;
  will-change: transform;
}
@keyframes roule { to { transform: translate3d(-50%, 0, 0); } }
.sgn { display: grid; place-items: center; flex: none; }
.sgn svg, .sgn img { width: 100%; height: 100%; object-fit: contain; }

/* Voie 3 — l'horizon : petite, lente, dessaturée, hors de la mise au point. */
.piste--3 { top: 9%; }
.piste--3 .piste__d { animation: roule 78s linear infinite; }
.piste--3 .sgn { width: 74px; height: 74px; margin-inline: 26px; }
.piste--3 { opacity: .36; filter: blur(1.6px) saturate(.6); }

/* Voie 2 — la voie médiane. */
.piste--2 { top: 29%; }
.piste--2 .piste__d { animation: roule 52s linear infinite; }
.piste--2 .sgn { width: 124px; height: 124px; margin-inline: 40px; }
.piste--2 { opacity: .62; filter: blur(.5px) saturate(.85); }

/* Voie 1 — l'accotement, à hauteur d'œil : nette, pleine, rapide. */
.piste--1 { bottom: 9%; }
.piste--1 .piste__d { animation: roule 34s linear infinite; }
.piste--1 .sgn { width: 194px; height: 194px; margin-inline: 54px; }
.piste--1 { opacity: .95; filter: drop-shadow(0 22px 34px rgba(0,0,0,.55)); }

@media (max-width: 1180px) {
  .piste--3 .sgn { width: 58px; height: 58px; margin-inline: 20px; }
  .piste--2 .sgn { width: 94px; height: 94px; margin-inline: 30px; }
  .piste--1 .sgn { width: 150px; height: 150px; margin-inline: 40px; }
}
@media (max-width: 700px) {
  .piste--3 { display: none; }
  .piste--2 { top: 8%; }
  .piste--2 .sgn { width: 72px; height: 72px; margin-inline: 22px; }
  .piste--1 { bottom: -2%; }
  .piste--1 .sgn { width: 116px; height: 116px; margin-inline: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .piste__d { animation: none !important; }
}

/* Le voile : la moitié gauche redevient de la nuit pleine pour que le texte
   n'ait jamais à lutter, la droite laisse passer la marchandise. */
.hero__voile {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(8,12,16,.97) 0%, rgba(8,12,16,.93) 30%,
      rgba(8,12,16,.66) 50%, rgba(8,12,16,.20) 70%, rgba(8,12,16,0) 86%),
    linear-gradient(180deg, rgba(8,12,16,.60) 0%, rgba(8,12,16,0) 20%,
      rgba(8,12,16,0) 66%, rgba(8,12,16,.55) 100%);
}
@media (max-width: 900px) {
  .hero__voile {
    background:
      linear-gradient(180deg, rgba(8,12,16,.72) 0%, rgba(8,12,16,.55) 34%,
        rgba(8,12,16,.86) 58%, rgba(8,12,16,.96) 100%);
  }
}

/* ── Le discours ────────────────────────────────────────────────────────── */
.hero__in {
  position: relative; z-index: 2;
  align-self: center;
  padding-block: clamp(3rem, 9vh, 6rem);
  width: 100%;
}
.hero__pk {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--data); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: #96A0A8;
  margin-bottom: clamp(1.5rem, 3.5vh, 2.5rem);
}
.hero__pk i { width: 7px; height: 7px; background: #6FA8D0; transform: rotate(45deg); display: block; }

.hero__t {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.9rem, 1rem + 6.4vw, 7.6rem);
  line-height: .90; letter-spacing: -.012em;
  color: #F7F9FA;
  max-width: 14ch;
}
/* Le masque d'apparition ne doit jamais rogner une capitale accentuée :
   on lui rend quatre centièmes de cadratin en haut, repris en marge. */
.hero__f { display: block; overflow: hidden; padding-top: .06em; margin-top: -.06em; }
.hero__f > * , .hero__f { will-change: auto; }
.hero__t .hero__f:nth-child(1) { animation: monte-h 1s cubic-bezier(.16,.8,.22,1) both; }
.hero__t .hero__f:nth-child(2) { animation: monte-h 1s .12s cubic-bezier(.16,.8,.22,1) both; }
@keyframes monte-h { from { transform: translateY(104%); } to { transform: none; } }

/* La ligne qui se relaie : trois messages, un seul emplacement. Le mouvement
   est vertical, comme une lame de jalonnement qui bascule. */
.hero__r {
  display: block; position: relative;
  height: .9em;
  color: #FFF4DE;
  text-shadow: 0 0 46px rgba(255, 240, 214, .22);
}
.hero__r i {
  position: absolute; left: 0; top: 0; right: 0;
  font-style: normal; white-space: nowrap;
  opacity: 0;
  animation: relais 15s cubic-bezier(.22,.68,.24,1) infinite;
}
.hero__r i:nth-child(1) { animation-delay: .9s; }
.hero__r i:nth-child(2) { animation-delay: 5.9s; }
.hero__r i:nth-child(3) { animation-delay: 10.9s; }
@keyframes relais {
  0%   { opacity: 0; transform: translateY(46%); clip-path: inset(0 0 100% 0); }
  4%   { opacity: 1; transform: translateY(0);   clip-path: inset(0 0 -10% 0); }
  29%  { opacity: 1; transform: translateY(0);   clip-path: inset(0 0 -10% 0); }
  34%  { opacity: 0; transform: translateY(-34%); clip-path: inset(0 0 -10% 0); }
  100% { opacity: 0; transform: translateY(46%); clip-path: inset(0 0 100% 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__r i { animation: none; }
  .hero__r i:nth-child(1) { opacity: 1; }
  .hero__t .hero__f { animation: none !important; }
}

.hero__s {
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
  max-width: 46ch; font-size: var(--t-lu); line-height: 1.55; color: #AEB8C0;
  opacity: 0; animation: fondu 900ms 700ms ease forwards;
}
.hero__act {
  display: flex; flex-wrap: wrap; gap: .7rem;
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  opacity: 0; animation: fondu 900ms 860ms ease forwards;
}
.hero .b { --b-fond: #FFFFFF; --b-txt: #0A0F14; --b-bord: #FFFFFF; }
.hero .b::before { background: #6FA8D0; }
.hero .b:hover { color: #0A0F14; }
.hero .b--fantome { --b-fond: transparent; --b-txt: #EEF1F3; --b-bord: rgba(255,255,255,.36); }
.hero .b--fantome::before { background: #fff; }
.hero .b--fantome:hover { color: #0A0F14; }

/* ── Le pied : les six familles, en socle ───────────────────────────────── */
.hero__pied {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(8, 12, 16, .55);
  backdrop-filter: blur(6px);
}
.hero__fam { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hero__fam a {
  display: flex; align-items: baseline; justify-content: space-between; gap: .7rem;
  padding: .9rem clamp(.7rem, 1.5vw, 1.3rem);
  border-left: 1px solid rgba(255,255,255,.14);
  font-size: var(--t-mini); line-height: 1.3; color: #A2ACB4; min-width: 0;
  transition: background var(--vif), color var(--vif);
}
.hero__fam a:first-child { border-left: 0; }
.hero__fam a span { min-width: 0; }
.hero__fam a:hover { background: rgba(255,255,255,.07); color: #F2F5F7; }
.hero__fam b { font-family: var(--data); font-size: var(--t-micro); color: #6FA8D0; flex: none; }
@media (max-width: 1100px) {
  .hero__fam { grid-template-columns: repeat(3, 1fr); }
  .hero__fam a:nth-child(3n+1) { border-left: 0; }
}
@media (max-width: 620px) {
  .hero__fam { grid-template-columns: repeat(2, 1fr); }
  .hero__fam a:nth-child(2n+1) { border-left: 0; }
  .hero__fam a { padding: .8rem .6rem; font-size: var(--t-mini); }
}

/* ══════════════════════════════════════════════════ LE TAMIS (catalogue) ══
   Les deux niveaux de filtre sont horizontaux : la grille n'est plus amputée
   d'une colonne latérale et occupe toute la largeur de l'écran.            */
.tamis {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
  padding-bottom: 1rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--rail);
}
.tamis__ss { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; min-width: 0; }
.tamis__g { display: contents; }
.tamis__g[hidden] { display: none; }
.tamis__a { display: flex; align-items: center; gap: 1.1rem; flex: none; }
.tamis__a .compte {
  font-family: var(--data); font-size: var(--t-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--acier-bas); white-space: nowrap;
}
.jeton-f {
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .5rem .85rem;
  border: 1px solid var(--rail);
  font-size: var(--t-fin); color: var(--acier);
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--vif), color var(--vif), background var(--vif);
}
.jeton-f b { font-family: var(--data); font-size: var(--t-micro); font-weight: 500; color: var(--acier-bas); }
.jeton-f:hover { border-color: var(--rail-vif); color: var(--craie); }
.jeton-f.est-actif {
  background: var(--rouge); border-color: var(--rouge); color: #fff; font-weight: 500;
}
.jeton-f.est-actif b { color: rgba(255,255,255,.72); }
.jeton-f--tout { font-weight: 600; }

/* La grille : cinq références par ligne dès 1250 px, jusqu'à sept en 4K. */
.planche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .planche { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 950px)  { .planche { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1250px) { .planche { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1650px) { .planche { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 2000px) { .planche { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* Le rail de familles devient un vrai filtre : état actif visible. */
.rail__f { cursor: pointer; text-align: left; font: inherit; border-top: 0; border-bottom: 0; }
.rail__f.est-actif { background: rgba(255,255,255,.12); color: #F7F9FA; }
.rail__f.est-actif .rail__q { color: #FFF4DE; }

/* ── L'entrée sur téléphone : le défilé passe en bandeau haut, le discours
      s'installe dessous, sur du noir plein. Aucun texte ne chevauche un
      panneau, aucune ligne ne déborde. ───────────────────────────────────── */
@media (max-width: 900px) {
  .hero { min-height: auto; }
  .hero__scene { bottom: auto; height: 38svh; }
  .piste--2 { top: 6%; bottom: auto; }
  .piste--1 { top: 40%; bottom: auto; }
  .hero__voile {
    background:
      linear-gradient(180deg, rgba(8,12,16,.30) 0%, rgba(8,12,16,.22) 24%,
        rgba(8,12,16,.86) 36%, #080C10 44%, #080C10 100%);
  }
  .hero__in { padding-top: calc(38svh + 1.75rem); padding-bottom: 2.5rem; }
  .hero__t { font-size: clamp(1.95rem, 8vw, 2.6rem); max-width: none; }
  .hero__r { height: .95em; }
  .hero__s { margin-top: 1.1rem; }
}
@media (max-width: 420px) {
  .hero__t { font-size: 1.8rem; }
  .piste--1 .sgn { width: 96px; height: 96px; margin-inline: 22px; }
  .piste--2 .sgn { width: 60px; height: 60px; margin-inline: 18px; }
}

/* ══════════════════════════════════════════ L'ATELIER D'IMPLANTATION ══════
   Aucun distributeur de signalisation n'aide à CHOISIR. Le visiteur ne sait
   pas quelles références commander — il sait dans quelle situation il est.
   On part de la situation, on dessine le dispositif en vue en plan (la
   convention du métier), on en déduit la liste, on la verse au devis.      */
.ate-tete {
  background: var(--sombre); color: #EEF1F3;
  --craie: #F2F5F7; --acier: #A2ACB4; --acier-bas: #869098; --rail: rgba(255,255,255,.15);
}
.ate-tete__in {
  display: grid; gap: clamp(1.75rem, 4vw, 4rem);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
  align-items: end;
}
@media (min-width: 1000px) { .ate-tete__in { grid-template-columns: 1.1fr .9fr; } }
.ate-tete__e { display: block; font-family: var(--data); font-size: var(--t-micro);
  letter-spacing: .22em; text-transform: uppercase; color: #6FA8D0; margin-bottom: 1.1rem; }
.ate-tete__t {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.2rem, .9rem + 3.2vw, 4.1rem); line-height: .94;
  letter-spacing: -.008em; color: #F7F9FA;
}
.ate-tete__t em { font-style: normal; color: #FFF4DE; }
.ate-tete__p { font-size: var(--t-lu); line-height: 1.6; color: #AEB8C0; max-width: 52ch; }

/* Les six situations : un rail d'onglets, pas un menu déroulant. */
.ate__ongl {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,.15);
}
.ate__o {
  display: grid; gap: .3rem; text-align: left; align-content: center;
  padding: 1rem clamp(.8rem, 1.6vw, 1.4rem);
  min-height: 76px;
  border-left: 1px solid rgba(255,255,255,.15);
  color: #A2ACB4; cursor: pointer; font: inherit;
  transition: background var(--vif), color var(--vif);
}
.ate__o:first-child { border-left: 0; }
.ate__o:hover { background: rgba(255,255,255,.07); color: #F2F5F7; }
.ate__o.est-actif { background: #F4F6F7; color: var(--encre); }
.ate__on { font-size: var(--t-fin); line-height: 1.25; font-weight: 500; }
.ate__oq { font-family: var(--data); font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--acier-bas); }
.ate__o.est-actif .ate__oq { color: var(--bleu); }
@media (max-width: 1100px) {
  .ate__ongl { grid-template-columns: repeat(3, 1fr); }
  .ate__o:nth-child(3n+1) { border-left: 0; }
}
@media (max-width: 640px) {
  .ate__ongl { grid-template-columns: repeat(2, 1fr); }
  .ate__o:nth-child(2n+1) { border-left: 0; }
  .ate__o { min-height: 64px; }
}

/* ── La vue en plan ─────────────────────────────────────────────────────── */
.ate__v[hidden] { display: none; }
.ate__plan { background: #F4F6F7; border-bottom: 1px solid var(--trait, #D3D9DD); }
.plan-i { width: 100%; height: auto; display: block; }
.plan-i__f { fill: #F4F6F7; }
.plan-i__ch { fill: #DCE3E8; }
.plan-i__rv { stroke: #AAB4BC; stroke-width: 2; }
.plan-i__ax { stroke: #FFFFFF; stroke-width: 3; stroke-dasharray: 26 20; }
.plan-i__sens line { stroke: #7C868E; stroke-width: 2; }
.plan-i__sens path { fill: #7C868E; }
.plan-i__sens text, .cote text {
  font-family: var(--data); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; fill: #7C868E;
}
.cote line { stroke: rgba(255,255,255,.75); stroke-width: 1; stroke-dasharray: 3 4; }
.cote text { text-anchor: middle; font-size: 10.5px; fill: #8A949C; }

.poste__m { stroke: #98A2AA; stroke-width: 2; }
.poste__a { fill: var(--bleu); }
.poste__n {
  font-family: var(--data); font-size: 12px; letter-spacing: .08em;
  fill: #5A646C; text-anchor: middle;
}

/* L'apparition : les postes se posent dans l'ordre où on les rencontre. */
.plan-i .poste, .plan-i .cote { opacity: 0; }
.plan-i.joue .poste {
  animation: poste-pose 620ms cubic-bezier(.2,.8,.24,1) both;
  animation-delay: var(--d, 0ms);
}
.plan-i.joue .cote { animation: fondu 500ms both; animation-delay: var(--d, 0ms); }
@keyframes poste-pose {
  from { opacity: 0; transform: translateY(14px) scale(.86); }
  to   { opacity: 1; transform: none; }
}
.plan-i .poste { transform-box: fill-box; transform-origin: center center; }
@media (prefers-reduced-motion: reduce) {
  .plan-i .poste, .plan-i .cote { opacity: 1; animation: none !important; }
}

/* ── Le dispositif, ligne par ligne ─────────────────────────────────────── */
.ate__bas {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}
@media (min-width: 1100px) { .ate__bas { grid-template-columns: minmax(300px, 27rem) minmax(0, 1fr); } }
.ate__txt .data { display: block; font-family: var(--data); font-size: var(--t-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--rouge); margin-bottom: .7rem; }
.ate__t {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 1rem + 1.2vw, 2.1rem); line-height: 1; color: var(--craie);
}
.ate__c { margin-top: 1rem; font-size: var(--t-base); line-height: 1.6; color: var(--acier); }
.ate__note {
  margin-top: 1.25rem; padding: 1rem 1.15rem;
  border-left: 2px solid var(--ambre);
  background: rgba(176, 118, 26, .07);
  font-size: var(--t-fin); line-height: 1.55; color: var(--acier);
}
.ate__note b { color: var(--craie); font-weight: 600; }
.ate__txt .b--bloc { margin-top: 1.25rem; }

.ate__l { width: 100%; border-collapse: collapse; }
.ate__l tr { border-top: 1px solid var(--rail); }
.ate__l tr:last-child { border-bottom: 1px solid var(--rail); }
.ate__l td { padding: .8rem .7rem; vertical-align: middle; }
.ate__l td:first-child { padding-left: 0; }
.ate__l td:last-child { padding-right: 0; }
.li__v { width: 62px; }
.li__v svg, .li__v img {
  width: 46px; height: 46px; object-fit: contain; mix-blend-mode: multiply;
}
.li__r { display: block; font-family: var(--data); font-size: var(--t-micro);
  letter-spacing: .08em; color: var(--acier-bas); }
.li__n { display: block; font-size: var(--t-base); font-weight: 500; color: var(--craie);
  margin-top: .15rem; }
.li__n:hover { color: var(--rouge); }
.li__o { display: block; font-size: var(--t-fin); color: var(--acier); margin-top: .2rem; }
.li__q { width: 96px; }
.li__q .champ { width: 84px; min-height: 40px; text-align: center;
  font-family: var(--data); font-size: var(--t-fin); }
.li__a { width: 120px; text-align: right; }
@media (max-width: 700px) {
  .ate__l td { padding: .7rem .4rem; }
  .li__v { width: 44px; } .li__v svg, .li__v img { width: 34px; height: 34px; }
  .li__q { width: 72px; } .li__q .champ { width: 64px; }
  .li__a { width: auto; }
  .li__a .b span { font-size: var(--t-micro); }
  .li__o { display: none; }
}

/* ── L'atelier sur téléphone ────────────────────────────────────────────────
   Un schéma d'implantation ne se réduit pas : il se parcourt. On le laisse à
   une taille lisible et on le fait défiler latéralement, comme un vrai plan
   qu'on déroule. La liste, elle, se réorganise en deux lignes par poste.   */
@media (max-width: 860px) {
  .ate__plan {
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .ate__plan .plan-i { min-width: 760px; }
  .ate__plan::after {
    content: "Faites glisser pour parcourir le schéma";
    display: block; padding: .5rem var(--marge) .7rem;
    font-family: var(--data); font-size: var(--t-micro); letter-spacing: .1em;
    text-transform: uppercase; color: var(--acier-bas);
    position: sticky; left: 0;
  }
}
@media (max-width: 700px) {
  .ate__l, .ate__l tbody, .ate__l tr, .ate__l td { display: block; width: auto; }
  .ate__l tr {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: .35rem .8rem; align-items: center;
    padding: 1rem 0;
  }
  .ate__l td { padding: 0; }
  .li__v { grid-row: span 2; align-self: start; }
  .li__t { min-width: 0; }
  .li__o { display: block; }
  .li__q, .li__a { grid-column: 2; width: auto; text-align: left; }
  .li__q { display: inline-block; margin-right: .6rem; }
  .li__a { display: inline-block; }
  .li__q .champ { width: 76px; min-height: 42px; }
  .ate__l tr > .li__q { margin-top: .35rem; }
}

/* Les enfants de grille doivent pouvoir rétrécir sous leur min-content :
   sans cela, un libellé de bouton insécable élargit toute la colonne. */
.ate__bas > * { min-width: 0; }
.ate__txt .b--bloc { white-space: normal; text-align: center; line-height: 1.3; }
.ate__txt .b--bloc span { white-space: normal; }

/* ══════════════════════════════════════════ L'ATELIER, SUR L'ACCUEIL ══════ */
.prom {
  background: var(--sombre); color: #EEF1F3;
  --craie: #F2F5F7; --acier: #A2ACB4; --acier-bas: #869098; --rail: rgba(255,255,255,.15);
}
.prom__in {
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  align-items: center;
}
@media (min-width: 1000px) { .prom__in { grid-template-columns: 1.05fr .95fr; } }
.prom__in > * { min-width: 0; }
.prom__e { display: block; font-family: var(--data); font-size: var(--t-micro);
  letter-spacing: .22em; text-transform: uppercase; color: #6FA8D0; margin-bottom: 1.1rem; }
.prom__t {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, .9rem + 2.6vw, 3.5rem); line-height: .95;
  letter-spacing: -.008em; color: #F7F9FA;
}
.prom__t em { font-style: normal; color: #FFF4DE; }
.prom__p { margin-top: 1.4rem; max-width: 52ch; font-size: var(--t-lu);
  line-height: 1.6; color: #AEB8C0; }
.prom .b { margin-top: 1.75rem; --b-fond: #FFFFFF; --b-txt: var(--sombre); --b-bord: #FFFFFF; }
.prom .b::before { background: #6FA8D0; }
.prom .b:hover { color: var(--sombre); }

.prom__l { border-top: 1px solid rgba(255,255,255,.15); }
.prom__l a {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 1rem; align-items: baseline;
  padding: .95rem 0;
  border-bottom: 1px solid rgba(255,255,255,.15);
  color: #B5BEC5;
  transition: padding-left var(--doux), color var(--vif), background var(--doux);
}
.prom__l a:hover { padding-left: .8rem; color: #F7F9FA; background: rgba(255,255,255,.05); }
.prom__n { font-family: var(--data); font-size: var(--t-micro); color: #6FA8D0; }
.prom__s { font-size: var(--t-lu); }
.prom__q { font-family: var(--data); font-size: var(--t-micro); color: #869098; white-space: nowrap; }
@media (max-width: 560px) {
  .prom__l a { grid-template-columns: 2.2rem minmax(0,1fr); gap: .5rem .8rem; }
  .prom__q { grid-column: 2; }
  .prom__s { font-size: var(--t-base); }
}

/* ── Les dispositifs types dans le document imprimé ─────────────────────── */
.feuille--dsp .dsp__plan {
  margin: 6mm 0 5mm; border: .4pt solid #D2D9DE; background: #F4F6F7;
}
.feuille--dsp .dsp__plan .plan-i { width: 100%; height: auto; }
.feuille--dsp .plan-i .poste, .feuille--dsp .plan-i .cote { opacity: 1; animation: none; }
.dsp__l { width: 100%; border-collapse: collapse; margin-top: auto; }
.dsp__l tr { border-top: .4pt solid #E3E8EB; }
.dsp__l td { padding: 1.8mm 2mm; vertical-align: middle; font-size: 8pt; }
.dsp__l td:first-child { padding-left: 0; }
.dsp__v { width: 12mm; }
.dsp__v svg, .dsp__v img { width: 9mm; height: 9mm; object-fit: contain; mix-blend-mode: multiply; }
.dsp__r { width: 22mm; font-family: var(--data); font-size: 6.8pt; letter-spacing: .06em; color: #7C868E; }
.dsp__n { color: #29323A; font-weight: 500; }
.dsp__n span { display: block; font-weight: 400; font-size: 7.2pt; color: #7C868E; margin-top: .6mm; }
.dsp__q { width: 14mm; text-align: right; font-family: var(--data); font-size: 9pt; color: var(--bleu); }
.dsp__note {
  margin-top: 4mm; padding: 3mm 4mm; border-left: 1pt solid #B0761A;
  background: rgba(176,118,26,.07); font-size: 7.2pt; line-height: 1.5; color: #5A646C;
}
.dsp__note b { color: #131B21; }
.dsp__ctx {
  margin-top: 7mm; max-width: 58ch;
  font-size: 12.5pt; line-height: 1.5; color: #3C464E;
}
.dsp__ctx::first-letter { font-weight: 600; }

/* ══════════════════════════════════════════════ LE SOURCING ASSUMÉ ═══════ */
.four { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) { .four { grid-template-columns: 1.05fr .95fr; } }
.four > * { min-width: 0; }
.four__d { margin: 0; border-top: 1px solid var(--rail); }
.four__l {
  display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--rail);
}
.four__l dt {
  font-family: var(--data); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--acier-bas); padding-top: .15rem;
}
.four__l dd { margin: 0; font-size: var(--t-base); color: var(--craie); line-height: 1.5; }
@media (max-width: 560px) { .four__l { grid-template-columns: 1fr; gap: .2rem; } }
.four__note {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding: 1rem 1.25rem; border-left: 2px solid var(--acier-bas);
  background: var(--asphalte);
  font-size: var(--t-fin); line-height: 1.6; color: var(--acier); max-width: 92ch;
}
.four__note b { color: var(--craie); }

/* ══════════════════════════════════════════════════ ENTRÉE PAR PROFIL ════ */
.profils {
  display: grid; gap: 1px; background: var(--rail);
  border: 1px solid var(--rail);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) { .profils { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .profils { grid-template-columns: 1fr; } }
.profil {
  background: var(--nuit);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  display: flex; flex-direction: column; gap: .55rem;
  transition: background var(--doux);
  position: relative;
}
.profil:hover { background: var(--asphalte); }
.profil__n {
  font-family: var(--data); font-size: var(--t-micro); color: var(--rouge);
  letter-spacing: .1em;
}
.profil__t {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.05rem, .85rem + .55vw, 1.4rem); line-height: 1.08;
  color: var(--craie); text-wrap: balance;
}
.profil__d { font-size: var(--t-fin); line-height: 1.55; color: var(--acier); flex: 1; }
.profil__a {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem;
  font-family: var(--data); font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--rouge);
}
.profil__a svg { width: 15px; height: 15px; transition: transform var(--doux); }
.profil:hover .profil__a svg { transform: translateX(4px); }

/* ══════════════════════════════════════════ 21 · LES SEPT SOLUTIONS ═══ */
/* La page « solution » raisonne comme un client, pas comme un catalogue :
   une situation, quatre ou cinq questions, et les références en réponse. */

/* ── Le méga-menu des solutions ───────────────────────────────────────── */
.mm__sols {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; padding-bottom: 2.4rem;
}
.mm__sol {
  display: grid; align-content: start; gap: .3rem;
  padding: 1.1rem 1.4rem 1.3rem;
  border-left: 1px solid var(--rail);
  transition: background var(--vif);
}
.mm__sol:first-child { border-left: 0; padding-left: 0; }
.mm__sol:hover { background: var(--jour-doux); }
.mm__sol-n {
  font-family: var(--data); font-size: var(--t-micro); color: var(--rouge);
  letter-spacing: .1em;
}
.mm__sol-t { font-weight: 600; color: var(--craie); line-height: 1.25; font-size: var(--t-lu); }
.mm__sol-c { font-size: var(--t-mini); color: var(--acier-bas); line-height: 1.5; }
@media (max-width: 1400px) { .mm__sols { grid-template-columns: repeat(3, 1fr); } }

/* ── Le sommaire des solutions (page hub) ─────────────────────────────── */
.sol-grille {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--rail); border: 1px solid var(--rail);
}
.sol-grille--min { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sol-c {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--beton); transition: background var(--vif);
}
.sol-c:hover { background: var(--jour-doux); }
.sol-c__v { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--jour-doux); }
.sol-c__v svg, .sol-c__v img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sol-c__b { display: grid; align-content: start; gap: .55rem; padding: 1.4rem 1.5rem 1.6rem; }
.sol-c__n { font-family: var(--data); font-size: var(--t-micro); color: var(--rouge); letter-spacing: .1em; }
.sol-c__t {
  font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 600; line-height: 1.1; color: var(--craie); text-transform: uppercase;
  letter-spacing: -.005em;
}
.sol-c__c {
  font-family: var(--data); font-size: var(--t-micro); color: var(--acier-bas);
  letter-spacing: .04em;
}
.sol-c__d { font-size: var(--t-base); color: var(--acier); line-height: 1.6; }
.sol-c__a {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .3rem;
  font-family: var(--data); font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--rouge);
}
.sol-c__a svg { width: 15px; height: 15px; transition: transform var(--vif); }
.sol-c:hover .sol-c__a svg { transform: translateX(4px); }
.sol-c--min .sol-c__v { aspect-ratio: 21/9; }
.sol-c--min .sol-c__d { display: none; }
@media (max-width: 980px) { .sol-grille, .sol-grille--min { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .sol-grille, .sol-grille--min { grid-template-columns: 1fr; } }

/* ── L'entrée d'une page solution ─────────────────────────────────────── */
.sol-tete {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(300px, 42vw, 480px);
  display: grid; align-items: end;
  background: var(--sombre);
}
.sol-tete__v { position: absolute; inset: 0; z-index: -2; }
.sol-tete__v svg, .sol-tete__v img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sol-tete::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(19,27,34,.30) 0%, rgba(19,27,34,.72) 62%, rgba(19,27,34,.90) 100%);
}
.sol-tete__in { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.sol-tete .etiq { color: #E9DFC6; border-color: rgba(233,223,198,.45); }
.sol-tete__h {
  margin-top: 1rem; color: #F5F8FA; max-width: 22ch;
  font-size: clamp(2.1rem, 5.2vw, 4.4rem); line-height: .96;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
@media (max-width: 640px) { .sol-tete__h { font-size: clamp(1.9rem, 8.5vw, 2.6rem); } }

/* ── La barre de contexte ─────────────────────────────────────────────── */
.sol-barre {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--rail);
}
.sol-barre .data { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--acier-bas); }
.sol-barre__a { text-decoration: underline; text-underline-offset: 3px; }
.sol-barre__a:hover { color: var(--rouge); }
.sol-barre .b { margin-left: auto; }

/* ── Chapô + sommaire ─────────────────────────────────────────────────── */
.sol-intro {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); margin-top: 2.6rem; align-items: start;
}
.sol-intro__t { display: grid; gap: 1.15rem; font-size: var(--t-lu); }
.sol-intro__t p:first-child { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--craie); }
.sol-som { border: 1px solid var(--rail); background: var(--beton); padding: 1.6rem 1.7rem 1.8rem; }
.sol-som__t {
  font-family: var(--data); font-size: var(--t-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--rouge); margin-bottom: 1rem;
}
.sol-som__l { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; counter-reset: som; }
.sol-som__l li { border-top: 1px solid var(--rail); }
.sol-som__l li:first-child { border-top: 0; }
.sol-som__l a {
  display: flex; gap: .9rem; align-items: baseline; padding: .7rem 0;
  font-size: var(--t-base); color: var(--acier); line-height: 1.45;
  transition: color var(--vif), padding-left var(--vif);
}
.sol-som__l a:hover { color: var(--craie); padding-left: .3rem; }
.sol-som__l .data { flex: none; color: var(--rouge); font-size: var(--t-micro); }
.sol-som__r {
  margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--rail);
  font-family: var(--data); font-size: var(--t-micro); line-height: 1.9;
  color: var(--acier-bas); letter-spacing: .02em;
}
@media (max-width: 900px) { .sol-intro { grid-template-columns: 1fr; } }

/* ── Une section de solution ──────────────────────────────────────────── */
.sol-sect { padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--rail); }
.sol-sect:nth-child(even) { background: var(--jour-doux); }
.sol-sect__h {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.sol-sect__txt h2 { max-width: 24ch; }
.sol-sect__n {
  display: block; font-family: var(--data); font-size: var(--t-micro);
  letter-spacing: .12em; color: var(--rouge); margin-bottom: .7rem;
  text-transform: none;
}
.sol-sect__c { display: grid; gap: 1.05rem; margin-top: 1.4rem; font-size: var(--t-lu); }
.sol-sect__p { margin-top: 1.6rem; }
@media (max-width: 900px) { .sol-sect__h { grid-template-columns: 1fr; } }

/* ── L'encart « services associés » ───────────────────────────────────── */
.sol-serv {
  border: 1px solid var(--rail); background: var(--beton);
  padding: 1.5rem 1.6rem 1.6rem; display: grid; gap: .8rem; align-content: start;
}
.sol-sect:nth-child(even) .sol-serv { background: var(--jour-pur); }
.sol-serv__t {
  font-family: var(--data); font-size: var(--t-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--rouge);
}
.sol-serv__d { font-size: var(--t-base); color: var(--acier); line-height: 1.65; }
.sol-serv__l { display: grid; gap: 0; margin-top: .3rem; }
.sol-serv__l a {
  display: flex; align-items: center; gap: .6rem; padding: .6rem 0;
  border-top: 1px solid var(--rail); font-size: var(--t-base); color: var(--craie);
  transition: padding-left var(--vif), color var(--vif);
}
.sol-serv__l a::before {
  content: ""; flex: none; width: 6px; height: 6px;
  background: var(--rouge); transform: rotate(45deg);
}
.sol-serv__l a:hover { padding-left: .3rem; color: var(--rouge); }

/* ── La sélection produits d'une section ──────────────────────────────── */
.sol-sect__prod { margin-top: clamp(2rem, 4vw, 3.2rem); }
.sol-sect__pt {
  font-family: var(--data); font-size: var(--t-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--acier-bas); margin-bottom: 1.2rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--rail);
}
.pieces { display: grid; gap: 1px; background: var(--rail); border: 1px solid var(--rail); }
.pieces--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pieces .piece { background: var(--beton); }
.sol-sect__cta { margin-top: 1.6rem; }
@media (max-width: 860px) { .pieces--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .pieces--3 { grid-template-columns: 1fr; } }

/* ── La FAQ ───────────────────────────────────────────────────────────── */
.faq {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.faq__l { border-top: 1px solid var(--rail); }
.faq-i { border-bottom: 1px solid var(--rail); }
.faq-i summary {
  list-style: none; cursor: pointer; padding: 1.05rem 2.4rem 1.05rem 0;
  position: relative; font-size: var(--t-lu); font-weight: 500; color: var(--craie);
  line-height: 1.45;
}
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary::after {
  content: ""; position: absolute; right: .35rem; top: 1.45rem;
  width: 11px; height: 11px; border-right: 1.5px solid var(--rouge);
  border-bottom: 1.5px solid var(--rouge); transform: rotate(45deg);
  transition: transform var(--vif);
}
.faq-i[open] summary::after { transform: rotate(-135deg); top: 1.65rem; }
.faq-i summary:hover { color: var(--rouge); }
.faq-i > div {
  padding: 0 2.4rem 1.4rem 0; font-size: var(--t-base); color: var(--acier);
  line-height: 1.75; max-width: 62ch;
}
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }

/* Nav plein écran : les sept solutions avant la planche produits. */
.voile-nav__sol { margin-top: 2rem; }
.voile-nav__sol > .planche-p__t { margin-bottom: 1rem; }
.voile-nav__sol-l { display: grid; gap: 0; }
.voile-nav__sol-l a {
  display: flex; align-items: baseline; gap: .9rem; padding: .72rem 0;
  border-top: 1px solid var(--sombre-fil); font-size: var(--t-lu); color: inherit;
}
.voile-nav__sol-l a .data { flex: none; font-size: var(--t-micro); color: var(--rouge-nuit); }
.voile-nav__sol-n { min-width: 0; flex: 1 1 auto; overflow-wrap: break-word; }

@media (max-width: 640px) {
  .sol-barre { gap: .8rem; }
  .sol-barre .jeton {
    white-space: normal; line-height: 1.5; max-width: 100%;
    overflow: visible; text-overflow: clip;
  }
  .sol-barre .b { margin-left: 0; width: 100%; }
  .sol-sect__prod { margin-top: 2rem; }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  PASSE 6 · DIRECTION ARTISTIQUE « NUIT & CRAIE »                     ║
   ║                                                                      ║
   ║  Le site n'est plus un document technique posé sur du papier gris.   ║
   ║  C'est une salle sombre dans laquelle on éclaire des planches.       ║
   ║  Trois principes tiennent toute la refonte :                         ║
   ║                                                                      ║
   ║    1. ALTERNANCE — la page respire en passant de la nuit au jour.    ║
   ║       Aucune section ne ressemble à sa voisine.                      ║
   ║    2. PROFONDEUR — rien n'est plat : filet intérieur clair, ombre    ║
   ║       portée longue et douce, dégradé de fond imperceptible.         ║
   ║    3. LUMIÈRE — un seul accent, mais il éclaire vraiment : halos,    ║
   ║       balayages, rétroréflexion. C'est le métier de l'entreprise.    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ══════════════════════════════════════════════════ 6.1 · LES ENCRES ═══ */
:root {
  /* Le papier gagne un ton et une chaleur : moins clinique, plus cher. */
  --nuit:      #F1F3F5;
  --asphalte:  #FFFFFF;
  --beton:     #FFFFFF;
  --rail:      #E1E5E9;
  --rail-vif:  #C3CBD2;
  --jour-doux: #E8ECEF;
  --jour-bord: #DDE2E6;

  /* La nuit descend : plus de contraste avec la craie, plus de matière. */
  --sombre:    #0B1116;
  --sombre-2:  #121A21;
  --sombre-3:  #18222B;
  --sombre-fil:#243039;

  /* L'accent devient une source lumineuse, pas une couleur d'interface. */
  --rouge:     #17557F;
  --rouge-jour:#0F4269;
  --rouge-nuit:#5FA8DC;
  --accent-lum:#7CC0F0;
  --ambre:     #C0872B;
  --ambre-lum: #E8B65C;

  /* Élévation : trois marches, calibrées pour le papier ET pour la nuit. */
  --ombre-1: 0 1px 2px rgba(11,17,22,.04), 0 2px 8px rgba(11,17,22,.04);
  --ombre-2: 0 2px 4px rgba(11,17,22,.05), 0 10px 26px -6px rgba(11,17,22,.10);
  --ombre-3: 0 4px 8px rgba(11,17,22,.06), 0 24px 56px -12px rgba(11,17,22,.20);
  --ombre-n1: 0 1px 0 rgba(255,255,255,.04), 0 8px 24px -8px rgba(0,0,0,.6);
  --ombre-n2: 0 1px 0 rgba(255,255,255,.06), 0 20px 56px -14px rgba(0,0,0,.75);

  /* Le filet intérieur : ce qui distingue une carte d'un rectangle. */
  --fil-int: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(11,17,22,.045);
  --fil-int-n: inset 0 1px 0 rgba(255,255,255,.055), inset 0 0 0 1px rgba(255,255,255,.03);

  /* Un rayon minuscule : industriel, jamais « app ». */
  --r: 3px;
  --r-g: 5px;

  /* Une courbe unique pour tout ce qui compte. */
  --sortie: 620ms cubic-bezier(.19,1,.22,1);
  --entree: 240ms cubic-bezier(.32,.72,.28,1);

  --t-h2:    clamp(2.15rem, 1.15rem + 3.6vw, 4.5rem);
  --t-h1:    clamp(3rem, 1rem + 7.2vw, 7.75rem);
}

.zone--nuit {
  --nuit: var(--sombre);
  --asphalte: var(--sombre-2);
  --beton: var(--sombre-2);
  --rail: var(--sombre-fil);
  --rail-vif: #33414D;
  --craie: #F2F6F8;
  --acier: #9EAAB4;
  --acier-bas: #7E8C97;
  --jour: var(--sombre-2);
  --jour-pur: var(--sombre-2);
  --jour-bord: var(--sombre-fil);
  --jour-doux: var(--sombre-3);
  --encre: #F2F6F8;
  --encre-2: #9EAAB4;
  --rouge: var(--rouge-nuit);
  --rouge-jour: var(--accent-lum);
  --retro: #F2F6F8;
  --halo: rgba(124,192,240,.10);
  --ombre-1: var(--ombre-n1);
  --ombre-2: var(--ombre-n1);
  --ombre-3: var(--ombre-n2);
  --fil-int: var(--fil-int-n);
  background: var(--sombre);
  color: #F2F6F8;
  color-scheme: dark;
}

/* Le grain se voit un peu plus : c'est lui qui empêche l'aplat numérique. */
body::before { opacity: .028; }

/* ══════════════════════════════════════════════ 6.2 · LES ZONES ════════ */
/* Une zone est une pièce. On y entre, on en sort. Le passage se voit. */
.zone { position: relative; isolation: isolate; }

/* Halo d'accent en fond de zone sombre : la salle est éclairée par un point. */
.zone--nuit::before {
  content: "";
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(95,168,220,.14) 0%, transparent 55%),
    radial-gradient(90% 70% at 92% 108%, rgba(192,135,43,.10) 0%, transparent 58%);
}
/* Trame de plan : 1 px, quasi invisible, mais l'œil la sent. */
.zone--nuit::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 78%);
}

/* La couture entre deux zones : un filet qui s'éteint sur les bords. */
.couture {
  position: relative; height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--rail) 18%, var(--rail) 82%, transparent);
}

/* Passage jour → nuit : la lumière décroît au lieu de se couper net. */
.zone--nuit + .zone--jour, .zone--jour + .zone--nuit { position: relative; }
.zone--nuit > .lig, .zone--jour > .lig { position: relative; z-index: 1; }

/* ══════════════════════════════════════════ 6.3 · LA TYPOGRAPHIE ══════ */
.titre-1, .titre-geant { letter-spacing: -.02em; }
.titre-2 { letter-spacing: -.016em; line-height: .88; }
.titre-3 { letter-spacing: -.022em; }

/* L'étiquette porte un tiret lumineux : elle annonce, elle ne décore pas. */
.etiq {
  display: inline-flex; align-items: center; gap: .7rem;
  letter-spacing: .18em;
}
.etiq::before {
  content: ""; width: 22px; height: 1px; flex: none;
  background: currentColor; opacity: .7;
  transform-origin: left; transform: scaleX(0);
  animation: etiq-trait 700ms var(--sortie) 120ms forwards;
}
@keyframes etiq-trait { to { transform: scaleX(1); } }

/* Un titre de section porte sa règle : elle se trace quand il apparaît. */
.titre-2.regle { position: relative; padding-bottom: .55em; }
.titre-2.regle::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 96px; height: 2px; background: var(--rouge);
  transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--sortie) 180ms;
}
.vient.est-la .titre-2.regle::after,
.titre-2.regle.est-la::after { transform: scaleX(1); }

/* ══════════════════════════════════════════════ 6.4 · LES BOUTONS ═════ */
/* Un bouton doit peser. Fond profond, filet intérieur clair, ombre longue,
   et un balayage d'accent qui traverse au survol — le phare qui passe. */
.b {
  min-height: 58px;
  padding: 1.05rem 1.9rem;
  border-radius: var(--r);
  letter-spacing: .13em;
  box-shadow: var(--ombre-1), inset 0 1px 0 rgba(255,255,255,.14);
  transition: color var(--entree), border-color var(--entree),
              transform var(--entree), box-shadow var(--sortie);
  will-change: transform;
}
.b::before {
  background: linear-gradient(100deg, var(--b-txt) 0%, var(--b-txt) 100%);
  transition: transform 560ms cubic-bezier(.19,1,.22,1);
}
/* Un éclat qui traverse la face au survol : la rétroréflexion. */
.b::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.30) 48%, transparent 64%);
  transform: translateX(-130%);
  transition: transform 900ms cubic-bezier(.19,1,.22,1);
}
.b:hover { transform: translateY(-2px); box-shadow: var(--ombre-2), inset 0 1px 0 rgba(255,255,255,.14); }
.b:hover::after { transform: translateX(130%); }
.b:active { transform: translateY(0); }
.b svg { transition: transform var(--sortie); }
.b:hover svg { transform: translateX(4px); }

.b--fantome {
  --b-bord: var(--rail-vif);
  box-shadow: none;
  background: color-mix(in srgb, var(--beton) 55%, transparent);
  backdrop-filter: blur(6px);
}
.b--fantome:hover { box-shadow: var(--ombre-1); }
.b--fantome::after { display: none; }

/* Le bouton de devis, présent partout : il doit être le point le plus vif. */
.b--devis {
  background: linear-gradient(180deg, #1D6396 0%, #17557F 100%);
  border-color: #1D6396;
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset,
              0 6px 18px -6px rgba(23,85,127,.55);
}
.b--devis:hover { box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 14px 34px -8px rgba(23,85,127,.6); }

.zone--nuit .b--fantome { background: rgba(255,255,255,.045); --b-bord: rgba(255,255,255,.18); }
.zone--nuit .b--fantome:hover { --b-bord: rgba(255,255,255,.5); }

/* Le lien fléché : la ligne se trace ET le chevron s'échappe. */
.fleche { letter-spacing: .14em; }
.fleche::after { height: 1px; transition: width 520ms var(--sortie); }
.fleche:hover::after { width: 44px; }

/* ═══════════════════════════════════ 6.5 · L'INDEX DES FAMILLES ═══════ */
/* Le moment fort n°2 du site, après l'entrée. Onze lignes qui se lisent
   comme un générique de film : chiffre, nom en très grand, et au survol la
   ligne s'ouvre sur ses produits réels. */
.sect--index { padding-block: clamp(4.5rem, 8vw, 9rem); }
.rangs { border-top: 1px solid var(--rail); }

.rang {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.15fr) minmax(0, .85fr) auto;
  gap: clamp(1rem, 2.6vw, 2.25rem);
  align-items: center;
  padding-block: clamp(1.6rem, 2.9vw, 2.5rem);
  padding-inline: clamp(.5rem, 1.4vw, 1.4rem);
  margin-inline: clamp(-.5rem, -1.4vw, -1.4rem);
  border-bottom: 1px solid var(--rail);
  transition: padding-block var(--sortie), background var(--sortie);
  isolation: isolate;
}
.rang__lien { position: absolute; inset: 0; z-index: 4; }

/* Le voile lumineux qui s'allume sous la ligne survolée. */
.rang::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; border-radius: var(--r);
  background:
    linear-gradient(90deg, rgba(95,168,220,.16) 0%, rgba(95,168,220,.05) 34%, transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0));
  opacity: 0; transition: opacity var(--sortie);
  pointer-events: none;
}
/* Le trait d'accent qui pousse depuis la gauche. */
.rang::after {
  content: "";
  position: absolute; left: 0; top: 12%; bottom: 12%; width: 2px; z-index: 1;
  background: linear-gradient(180deg, var(--rouge), transparent);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--sortie);
}
.rang:hover { padding-block: clamp(2rem, 3.8vw, 3.35rem); }
.rang:hover::before, .rang:hover::after { opacity: 1; transform: scaleY(1); }

.rang__n {
  font-family: var(--data); font-size: var(--t-micro);
  color: var(--acier-bas); letter-spacing: .16em;
  transition: color var(--sortie), transform var(--sortie);
}
.rang:hover .rang__n { color: var(--rouge); transform: translateX(6px); }

.rang__t {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.5vw, 3.4rem);
  font-weight: 700; text-transform: uppercase;
  line-height: .9; letter-spacing: -.022em;
  color: var(--craie);
  transition: transform var(--sortie);
}
.rang:hover .rang__t { transform: translateX(8px); }
.rang__d {
  font-size: var(--t-base); color: var(--acier); max-width: 44ch;
  transition: color var(--sortie), opacity var(--sortie);
}

/* La bande de produits : invisible au repos, elle glisse depuis la droite. */
.rang__b {
  position: absolute; right: clamp(9rem, 13vw, 13rem); top: 50%; z-index: 2;
  display: flex; gap: .5rem; align-items: center;
  transform: translate(28px, -50%); opacity: 0;
  transition: transform 700ms var(--sortie), opacity 460ms ease;
  pointer-events: none;
}
.rang__b-v {
  width: clamp(46px, 4.4vw, 62px); aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--jour-doux);
  border: 1px solid var(--rail);
  border-radius: var(--r);
  box-shadow: var(--ombre-1);
  overflow: hidden;
}
.rang__b-v img, .rang__b-v svg { width: 78%; height: 78%; object-fit: contain; }
.rang:hover .rang__b { transform: translate(0, -50%); opacity: 1; }
.rang:hover .rang__b-v:nth-child(1) { transition-delay: 0ms; }
.rang:hover .rang__b-v:nth-child(2) { transition-delay: 40ms; }
.rang:hover .rang__b-v:nth-child(3) { transition-delay: 80ms; }
.rang:hover .rang__b-v:nth-child(4) { transition-delay: 120ms; }
.rang:hover .rang__b-v:nth-child(5) { transition-delay: 160ms; }
@media (max-width: 1500px) { .rang__b { display: none; } }

.rang__c { display: flex; align-items: center; gap: 1.35rem; position: relative; z-index: 3; }
.rang__q {
  font-family: var(--data); font-size: var(--t-micro);
  color: var(--acier-bas); white-space: nowrap; letter-spacing: .08em;
}
/* La plaque du pictogramme : elle s'allume comme un panneau dans les phares. */
.rang__v {
  position: relative;
  width: clamp(62px, 5.4vw, 82px); aspect-ratio: 1; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--rail); border-radius: var(--r);
  background: var(--jour-doux);
  box-shadow: var(--fil-int);
  overflow: hidden;
  transition: border-color var(--sortie), transform var(--sortie), box-shadow var(--sortie);
}
.rang__v::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 30%, rgba(124,192,240,.30), transparent 70%);
  opacity: 0; transition: opacity var(--sortie);
}
.rang:hover .rang__v {
  border-color: var(--rouge); transform: translateY(-3px) scale(1.05);
  box-shadow: var(--ombre-2), var(--fil-int);
}
.rang:hover .rang__v::after { opacity: 1; }
.rang__v svg { position: relative; z-index: 1; width: 60%; height: 60%; }
/* Quand la plaque montre une vraie photographie plutôt qu'un pictogramme,
   elle remplit le cadre au lieu de flotter avec une marge. */
.rang__v--photo img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}

@media (max-width: 900px) {
  .rang { grid-template-columns: 2.6rem minmax(0,1fr) auto; row-gap: .55rem; }
  .rang__d { grid-column: 2 / -1; }
  .rang__c { grid-column: 2 / -1; }
  .rang:hover .rang__t, .rang:hover .rang__n { transform: none; }
}

/* ═════════════════════════════════════ 6.6 · LES CARTES / PLANCHES ════ */
/* Une carte n'est plus un rectangle bordé : c'est une planche posée sur le
   plan, avec son filet intérieur, son ombre et sa réaction au survol. */
.piece {
  position: relative;
  background: linear-gradient(180deg, var(--beton), color-mix(in srgb, var(--beton) 92%, var(--nuit)));
  border-radius: var(--r);
  box-shadow: var(--fil-int);
  transition: transform var(--sortie), box-shadow var(--sortie), background var(--sortie);
  isolation: isolate;
}
.piece::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--rouge); transform: scaleX(0); transform-origin: left;
  transition: transform var(--sortie); border-radius: 0 0 var(--r) var(--r);
}
.piece:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-3), var(--fil-int);
  z-index: 2;
}
.piece:hover::after { transform: scaleX(1); }
.piece__v { transition: background var(--sortie); }
.piece__v svg, .piece__v img { transition: transform 680ms var(--sortie); }
.piece:hover .piece__v svg, .piece:hover .piece__v img { transform: scale(1.07); }
.piece__n { transition: color var(--entree); }
.piece:hover .piece__n { color: var(--rouge); }

/* Les vignettes du méga-menu et de la planche complète. */
.vgn { border-radius: var(--r); transition: transform var(--entree), box-shadow var(--sortie), background var(--entree); }
.vgn:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); }

/* Profils, engagements, projets, solutions : même grammaire. */
.profil, .eng, .projet, .sol-c {
  border-radius: var(--r);
  transition: transform var(--sortie), box-shadow var(--sortie), background var(--sortie);
}
.profil:hover, .projet:hover, .sol-c:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-3);
}
.eng { position: relative; padding-top: 1.6rem; }
.eng::before {
  content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 2px;
  background: var(--rouge); transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--sortie);
}
.vient.est-la .eng::before, .eng.est-la::before { transform: scaleX(1); }
.eng__i { transition: transform var(--sortie), color var(--sortie); }
.eng:hover .eng__i { transform: translateY(-3px) scale(1.08); color: var(--rouge); }

/* Le cartouche des chiffres : une plaque gravée, pas un tableau. */
.cartouche {
  border-radius: var(--r-g);
  background: linear-gradient(180deg, var(--asphalte), color-mix(in srgb, var(--asphalte) 90%, var(--nuit)));
  box-shadow: var(--ombre-2), var(--fil-int);
  overflow: hidden;
}
.cartouche__c { position: relative; transition: background var(--sortie); }
.cartouche__c::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 100% at 50% 0%, var(--halo), transparent 70%);
  opacity: 0; transition: opacity var(--sortie);
}
.cartouche__c:hover::before { opacity: 1; }
.cartouche__v { position: relative; }

/* Le cadre d'ambiance : profondeur et zoom lent. */
.cadre { border-radius: var(--r-g); box-shadow: var(--ombre-2); }
.cadre img, .cadre svg { transition: transform 1400ms var(--sortie); }
.cadre:hover img, .cadre:hover svg { transform: scale(1.045); }

/* Correctif de composition : la bande de produits prend la place de la
   phrase, elle ne se superpose jamais à elle. */
.rang__b {
  right: auto; left: 0; top: 50%;
  width: 100%; justify-content: flex-end;
  padding-right: clamp(9rem, 13vw, 13.5rem);
}
.rang__d { transition: opacity 320ms ease, transform var(--sortie); }
.rang:hover .rang__d { opacity: 0; transform: translateX(-10px); }
.rang:hover .rang__b { transition-delay: 60ms; }
@media (max-width: 1500px) {
  .rang:hover .rang__d { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════ 6.7 · L'EN-TÊTE ET LE MENU ════ */
/* Verre dépoli, filet lumineux, et une jauge de lecture qui court en haut
   de la page : on sait toujours où l'on en est. */
.tete {
  background: color-mix(in srgb, var(--nuit) 78%, transparent);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background var(--sortie), border-color var(--sortie),
              box-shadow var(--sortie), height var(--sortie);
}
.tete.est-pose {
  background: color-mix(in srgb, var(--nuit) 90%, transparent);
  border-bottom-color: var(--rail);
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset,
              0 12px 34px -20px rgba(11,17,22,.5);
}
/* La jauge de lecture : un dégradé, pas un trait uni. */
.jauge {
  height: 2.5px;
  background: linear-gradient(90deg, var(--rouge-nuit) 0%, var(--rouge) 45%, var(--ambre) 100%);
  box-shadow: 0 0 14px rgba(95,168,220,.55);
  transition: width 120ms linear;
}

/* Les liens de navigation : soulignement qui se trace depuis la gauche. */
.nav__l { position: relative; }
.nav__l::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; width: auto; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 420ms var(--sortie);
}
.nav__l:hover::after, .nav__l[aria-current]::after { transform: scaleX(1); transform-origin: left; }

/* Le méga-menu devient une planche posée, pas un calque collé. */
.mm {
  background: color-mix(in srgb, var(--jour-pur) 97%, transparent);
  box-shadow: 0 30px 80px -30px rgba(11,17,22,.45), 0 1px 0 var(--rail);
  transform: translateY(-14px) scale(.995);
  transform-origin: top center;
}
.mm-hote:hover > .mm, .mm-hote:focus-within > .mm { transform: none; }
.mm__c a.mm__i, .mm__sol { border-radius: var(--r); }

/* ═══════════════════════════════════════════ 6.8 · L'ENTRÉE (HERO) ════ */
/* Vignette qui concentre le regard, halo d'accent, et un appel discret au
   défilement — l'entrée devient une image, pas un bandeau. */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(135% 105% at 50% 42%, transparent 40%, rgba(4,8,11,.58) 100%),
    linear-gradient(180deg, rgba(4,8,11,.50) 0%, transparent 26%);
}
.hero__in, .hero__pied { position: relative; z-index: 3; }
.hero__t { letter-spacing: -.025em; }
.hero__s { text-shadow: 0 1px 18px rgba(0,0,0,.4); }
.hero__act .b { box-shadow: 0 14px 40px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.16); }

/* Sur l'entrée, le bouton secondaire est un verre, pas une plaque laiteuse. */
.hero .b--fantome {
  --b-fond: transparent;
  --b-txt: #F2F6F8;
  --b-bord: rgba(255,255,255,.30);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.hero .b--fantome::before { background: #F2F6F8; }
.hero .b--fantome:hover { color: #0B1116; --b-bord: rgba(255,255,255,.75); }

/* Le trait d'appel au défilement. */
.cue {
  position: absolute; left: 50%; bottom: clamp(6.5rem, 11vw, 9rem); z-index: 4;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: .7rem;
  font-family: var(--data); font-size: var(--t-micro);
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(242,246,248,.45); pointer-events: none;
}
.cue i {
  display: block; width: 1px; height: 44px;
  background: linear-gradient(180deg, rgba(242,246,248,.65), transparent);
  transform-origin: top;
  animation: cue 2400ms cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  32%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(44px); opacity: 0; }
}
@media (max-width: 900px) { .cue { display: none; } }

/* ════════════════════════════════════ 6.9 · LES BANDES ET SÉPARATIONS ═ */
/* La lame (titre d'amorce) devient un vrai objet : pastille + trait tracé. */
.lame__fil { transform: scaleX(0); transform-origin: left; transition: transform 1100ms var(--sortie) 120ms; }
.lame.est-la .lame__fil, .vient.est-la .lame__fil { transform: scaleX(1); }
.lame__marque { box-shadow: 0 0 0 6px var(--halo); }

/* La bande défilante de mots-clés : dégradé de sortie sur les deux bords. */
.defile {
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* ═══════════════════════════════════════════ 6.10 · L'ATELIER (PROM) ══ */
.prom { position: relative; isolation: isolate; overflow: hidden; }
.prom::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 120% at 88% 0%, rgba(124,192,240,.16), transparent 60%),
    radial-gradient(60% 100% at 4% 100%, rgba(192,135,43,.12), transparent 62%);
}
.prom__l li a { border-radius: var(--r); transition: background var(--entree), padding-left var(--sortie); }
.prom__l li a:hover { padding-left: .6rem; }

/* ══════════════════════════════════════════════ 6.11 · L'APPEL FINAL ══ */
/* Le bandeau de conversion : plus une bande de couleur, une plaque éclairée. */
.appel {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(115deg, #0F4269 0%, #17557F 46%, #1D6396 100%);
}
.appel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 140% at 12% 0%, rgba(255,255,255,.16), transparent 58%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.045) 0 2px, transparent 2px 26px);
}
.appel::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; z-index: -1;
  background: linear-gradient(90deg, var(--ambre), var(--ambre-lum), var(--ambre));
  opacity: .8;
}

/* ══════════════════════════════════════════════ 6.12 · LE PIED ════════ */
.pied { position: relative; isolation: isolate; }
.pied::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 100% at 50% 0%, rgba(95,168,220,.09), transparent 58%);
}
.pied a { transition: color var(--entree), padding-left var(--entree); }
.pied ul a:hover { padding-left: .3rem; }

/* ═════════════════════════════════════ 6.13 · LA CASCADE D'ARRIVÉE ═══ */
/* Le script pose --i sur chaque enfant de grille. Le CSS l'utilise comme
   retard : les éléments arrivent en escalier, jamais tous d'un bloc. */
.vient { transform: translateY(26px) scale(.994); }
.vient.est-la {
  transform: none;
  transition: opacity 820ms var(--sortie), transform 820ms var(--sortie);
}
.planche > .vient, .pieces > .vient, .engs > .vient, .profils > .vient,
.projets > .vient, .sol-grille > .vient, .rangs > .vient {
  transition-delay: calc(var(--i, 0) * 60ms) !important;
}

/* Les visuels d'ambiance sont légèrement agrandis : la parallaxe a de la
   marge et ne laisse jamais apparaître un bord vide. */
.cadre > img, .cadre > svg, .sol-tete__v, .sol-c__v > img, .sol-c__v > svg {
  transform: scale(1.06);
  transition: none;
}

/* ═════════════════════════════════ 6.14 · LES ENTRÉES PAR PROFIL ═════ */
/* Six portes. Chacune doit donner envie d'être poussée. */
.profil {
  position: relative;
  background: linear-gradient(180deg, var(--beton), color-mix(in srgb, var(--beton) 93%, var(--nuit)));
  box-shadow: var(--fil-int);
  overflow: hidden;
}
.profil::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--rouge), transparent);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--sortie);
}
.profil::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 0% 0%, var(--halo), transparent 62%);
  opacity: 0; transition: opacity var(--sortie);
}
.profil:hover::before, .profil:hover::after { transform: scaleY(1); opacity: 1; }
.profil__n {
  color: var(--acier-bas); letter-spacing: .16em;
  transition: color var(--sortie), transform var(--sortie);
}
.profil:hover .profil__n { color: var(--rouge); transform: translateX(4px); }
.profil__t { transition: color var(--sortie); }
.profil:hover .profil__t { color: var(--rouge); }
.profil__a { transition: gap var(--sortie), color var(--sortie); }
.profil__a svg { transition: transform var(--sortie); }
.profil:hover .profil__a svg { transform: translateX(6px); }

/* ═══════════════════════════════ 6.14bis · LE CARTOUCHE DES CHIFFRES ══ */
/* Quatre cadrans gravés dans une plaque sombre. Le chiffre devient l'objet,
   pas une ligne de tableau. */
.cartouche {
  position: relative; isolation: isolate;
  background: linear-gradient(160deg, var(--sombre-2) 0%, var(--sombre) 62%, #0A1015 100%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 30px 70px -30px rgba(11,17,22,.55), inset 0 1px 0 rgba(255,255,255,.07);
  --craie: #F2F6F8; --acier: #9EAAB4; --acier-bas: #7E8C97;
  --rail: rgba(255,255,255,.10); --rouge: var(--rouge-nuit);
  color: #F2F6F8;
}
.cartouche::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(80% 130% at 8% -20%, rgba(95,168,220,.20), transparent 58%),
    radial-gradient(70% 120% at 96% 120%, rgba(192,135,43,.14), transparent 60%);
}
.cartouche__c { border-right-color: rgba(255,255,255,.10); }
.cartouche__c::after {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2px;
  background: linear-gradient(180deg, var(--rouge-nuit), transparent);
  transform: scaleY(0); transform-origin: top;
  transition: transform 820ms var(--sortie);
}
.cartouche__c.est-la::after, .vient.est-la.cartouche__c::after { transform: scaleY(1); }
.cartouche__c:first-child::after { display: none; }
.cartouche__v { font-size: clamp(3rem, 5.6vw, 5.2rem); }
.cartouche__v { color: #FFFFFF; text-shadow: 0 2px 30px rgba(95,168,220,.25); }
.cartouche__v sup { color: var(--ambre-lum); }
.cartouche__l { color: #F2F6F8; }
.cartouche__n { color: #8996A0; }
.cartouche .vide-a-remplir {
  color: var(--ambre-lum);
  background: none; padding: 0;
  border-bottom: 2px dotted rgba(232,182,92,.45);
}

/* ═══════════════════════════════ 6.14ter · CARTES À NUMÉRO (méthode,
   engagements) — un chiffre fantôme en fond, une icône sur sa plaque. ══ */
.eng {
  position: relative; isolation: isolate;
  padding: 1.75rem 1.6rem 1.7rem;
  border-radius: var(--r-g);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--beton) 96%, transparent),
    color-mix(in srgb, var(--beton) 86%, var(--nuit)));
  box-shadow: var(--fil-int);
  overflow: hidden;
  transition: transform var(--sortie), box-shadow var(--sortie);
}
.eng::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(85% 70% at 100% 0%, var(--halo), transparent 62%);
  opacity: 0; transition: opacity var(--sortie);
}
.eng:hover { transform: translateY(-4px); box-shadow: var(--ombre-3), var(--fil-int); }
.eng:hover::after { opacity: 1; }
.eng__n {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: .82;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--rail-vif);
  letter-spacing: -.02em; margin-bottom: .9rem;
  transition: -webkit-text-stroke-color var(--sortie), color var(--sortie);
}
.eng:hover .eng__n { -webkit-text-stroke-color: var(--rouge); }
.eng__i {
  width: 30px; height: 30px; margin-bottom: 1.05rem;
  color: var(--rouge);
}
.eng h3 { font-size: var(--t-h3); letter-spacing: -.018em; margin-bottom: .55rem; }
.eng p { color: var(--acier); font-size: var(--t-base); line-height: 1.68; }

/* ═══════════════════════════════ 6.14quater · LES CHANTIERS ══════════ */
.projet__c { padding-top: 1.15rem; }
.projet__m { letter-spacing: .1em; }

/* ═══════════════════════ 6.14quinquies · DE LA TRAME AUX PLANCHES ════ */
/* Les grilles à filet 1 px collaient les cartes les unes aux autres : rien
   ne pouvait se soulever. On les sépare vraiment — chaque carte devient un
   objet posé, avec son ombre et sa réaction propre. */
.profils, .engs, .logos {
  background: transparent;
  border: 0;
  gap: clamp(.7rem, 1.1vw, 1.1rem);
}
.profil {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--beton) 97%, transparent),
    color-mix(in srgb, var(--beton) 87%, var(--nuit)));
  border-radius: var(--r-g);
  padding: clamp(1.55rem, 2.7vw, 2.15rem);
  gap: .6rem;
}
.profil:hover {
  background: linear-gradient(180deg, var(--beton),
    color-mix(in srgb, var(--beton) 92%, var(--nuit)));
}
.profil__a { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--rail); }

/* Les emplacements de logo : une réserve assumée, cadrée et régulière. */
.logos { gap: clamp(.6rem, .9vw, .9rem); }
.logo-case {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--beton) 96%, transparent),
                            color-mix(in srgb, var(--beton) 84%, var(--nuit)));
  border: 1px solid var(--rail);
  border-radius: var(--r);
  box-shadow: var(--fil-int);
  position: relative;
  transition: border-color var(--sortie), transform var(--sortie), box-shadow var(--sortie);
}
.logo-case::after {
  content: ""; position: absolute; inset: 8px; border-radius: 2px;
  border: 1px dashed var(--rail-vif); opacity: .55; pointer-events: none;
  transition: border-color var(--sortie), opacity var(--sortie);
}
.logo-case:hover {
  border-color: var(--rouge); transform: translateY(-2px);
  box-shadow: var(--ombre-2), var(--fil-int);
}
.logo-case:hover::after { border-color: var(--rouge); opacity: .8; }

/* ══════════════════════ 6.14septies · LA PLANCHE DU CATALOGUE ════════ */
/* Le catalogue est la page la plus vue : elle doit être la plus soignée.
   Les fiches se détachent, le produit est posé sur une scène éclairée, et
   une seule action est mise en avant — la seconde devient un lien. */
.planche {
  gap: clamp(.7rem, 1vw, 1rem);
  background: transparent;
}
.planche > .piece {
  border: 0 !important;
  border-radius: var(--r-g);
}
.piece {
  border-radius: var(--r-g);
  overflow: hidden;
}
/* Les photographies du fabricant sont détourées sur BLANC, pas en
   transparence : la scène doit rester blanche, sinon le carré de la photo
   se voit. Le relief vient de la lumière, jamais d'un fond teinté. */
.piece__v {
  position: relative;
  background:
    radial-gradient(58% 46% at 50% 38%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 62%, #F7F9FA 100%);
  padding-block: 1.5rem 1rem;
}
/* Le halo d'accent reste très en dessous du seuil de perception du carré. */
.piece__v::before {
  background: radial-gradient(60% 50% at 50% 40%, var(--halo), transparent 74%);
  opacity: .55;
}
/* Seuls les pictogrammes vectoriels, réellement transparents, portent une
   ombre propre. Les photographies, non : elle dessinerait leur cadre. */
.piece__v svg { filter: drop-shadow(0 12px 18px rgba(11,17,22,.16)); }

/* Deux boutons pleins par fiche, c'est du bruit. Le second devient un lien. */
.piece__f { align-items: center; gap: .85rem; }
.piece__f .b--fantome {
  --b-bord: transparent;
  background: none; box-shadow: none; backdrop-filter: none;
  min-height: 0; padding: .35rem 0;
  color: var(--acier-bas);
  border: 0; border-bottom: 1px solid transparent;
  transition: color var(--entree), border-color var(--entree);
}
.piece__f .b--fantome::before, .piece__f .b--fantome::after { display: none; }
.piece__f .b--fantome:hover {
  color: var(--rouge); border-bottom-color: var(--rouge); transform: none;
}
.piece__f .b:not(.b--fantome) { flex: 1; }

/* Les jetons de sous-famille : plus légers, moins bavards. */
.piece__r .jeton {
  background: color-mix(in srgb, var(--rouge) 8%, transparent);
  border-color: transparent; color: var(--rouge-jour);
  font-size: .625rem; letter-spacing: .08em;
}

/* ═══════════════════════════ 6.14sexies · L'ÉQUILIBRE DES TITRES ═════ */
/* Un titre de section ne doit jamais dépasser quatre lignes ni écraser le
   paragraphe qui l'accompagne. */
.split > .titre-2, .split h2.titre-2 { max-width: 17ch; }
.sect .split[style*="align-items:end"] { align-items: end; }
@media (min-width: 1200px) {
  .titre-2 { font-size: clamp(2.4rem, 1.1rem + 2.6vw, 3.9rem); }
}

/* ═════════════════════════════════════ 6.15 · LES CHANTIERS ══════════ */
.projet { overflow: hidden; box-shadow: var(--fil-int); }
.projet__v { overflow: hidden; position: relative; }
.projet__v::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(11,17,22,.55) 100%);
  opacity: .8; transition: opacity var(--sortie);
}
.projet:hover .projet__v::after { opacity: .45; }
.projet__v img, .projet__v svg { transition: transform 1200ms var(--sortie); }
.projet:hover .projet__v img, .projet:hover .projet__v svg { transform: scale(1.06); }
.projet__m { color: var(--rouge); }

/* ═════════════════════════════════ 6.16 · LES EMPLACEMENTS LOGOS ═════ */
/* Un emplacement vide doit ressembler à une réserve assumée, pas à un oubli. */
.logo-case {
  position: relative;
  border-radius: var(--r);
  background:
    repeating-linear-gradient(135deg, var(--jour-doux) 0 8px, transparent 8px 16px);
  border: 1px dashed var(--rail-vif);
  transition: border-color var(--sortie), background var(--sortie);
}
.logo-case:hover { border-color: var(--rouge); }

/* ═══════════════════════════════════ 6.17 · L'EN-TÊTE DE PAGE ════════ */
/* Chaque page intérieure s'ouvre sur une composition, pas sur un titre posé. */
.entete-page { position: relative; isolation: isolate; }
.entete-page::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 120% at 88% -20%, var(--halo), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--jour-doux) 60%, transparent), transparent 65%);
}
.entete-page .titre-1 { max-width: 18ch; }

/* Le fil d'Ariane : fin, discret, mais tenu. */
.fil { font-family: var(--data); font-size: var(--t-micro); letter-spacing: .08em; }
.fil a { color: var(--acier-bas); transition: color var(--entree); }
.fil a:hover { color: var(--rouge); }
.fil i { opacity: .4; }

/* ══════════════════════════════════════ 6.18 · LA FICHE PRODUIT ══════ */
/* Le produit n'est plus posé sur une grille plate : il est éclairé, il porte
   une ombre au sol, et la planche cotée reste lisible sous lui. */
.plan {
  border-radius: var(--r-g);
  box-shadow: var(--ombre-2), var(--fil-int);
}
/* Un halo blanc au centre : il éclaire le produit sans jamais révéler le
   carré blanc des photographies du fabricant. */
.plan::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(58% 46% at 50% 40%, rgba(255,255,255,.92), rgba(255,255,255,0) 70%);
}
.plan > svg, .plan > img { transition: transform 900ms var(--sortie); }
.plan > svg { filter: drop-shadow(0 26px 34px rgba(11,17,22,.20)); }
.plan:hover > svg, .plan:hover > img { transform: translateY(-6px) scale(1.02); }

/* Même règle pour toutes les pastilles qui portent une photographie. */
.vgn { background: var(--jour-pur); }
.rang__b-v { background: #FFFFFF; border-color: rgba(255,255,255,.14); }

/* Le tableau de caractéristiques : lisible en diagonale. */
.specs tr { transition: background var(--entree); }
.specs tbody tr:hover { background: var(--jour-doux); }
.specs th { letter-spacing: .1em; }

/* ══════════════════════════════════════ 6.19 · LES FORMULAIRES ═══════ */
.champ, select, textarea, input[type="text"], input[type="email"],
input[type="tel"], input[type="search"], input[type="number"] {
  border-radius: var(--r);
  box-shadow: var(--fil-int);
  transition: border-color var(--entree), box-shadow var(--sortie), background var(--entree);
}
.champ:focus, select:focus, textarea:focus,
input[type="text"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, input[type="search"]:focus, input[type="number"]:focus {
  border-color: var(--rouge);
  box-shadow: 0 0 0 3px var(--halo), var(--fil-int);
  outline: none;
}

/* ══════════════════════════════════════ 6.20 · LES FLOTTANTS ═════════ */
.flot a, .flot button { box-shadow: var(--ombre-3); transition: transform var(--sortie), box-shadow var(--sortie); }
.flot a:hover, .flot button:hover { transform: translateY(-3px) scale(1.04); }

/* Le tiroir de devis : une planche qui sort du bord, avec sa propre ombre. */
.bon { box-shadow: -30px 0 80px -30px rgba(11,17,22,.55); }

/* ═════════════════════════════════ 6.21 · LA CONSOLE DU CATALOGUE ════ */
/* L'outil doit ressembler à un instrument, pas à un formulaire. */
.console {
  position: relative; isolation: isolate;
  box-shadow: var(--ombre-2), var(--fil-int);
  border-radius: var(--r-g);
}
.tamis input, .tamis .champ { border-radius: var(--r); }
.jeton, .jeton-f {
  border-radius: 999px;
  transition: background var(--entree), color var(--entree),
              border-color var(--entree), transform var(--entree);
}
.jeton-f:hover { transform: translateY(-1px); }
.jeton-f[aria-pressed="true"], .jeton-f.est-actif {
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--rouge) 70%, transparent);
}

/* ═════════════════════════════════ 6.22 · LES PAGES SOLUTION ═════════ */
.sol-c__v::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,17,22,.35));
  opacity: .7; transition: opacity var(--sortie);
}
.sol-c { position: relative; box-shadow: var(--fil-int); }
.sol-c:hover .sol-c__v::after { opacity: .35; }
.sol-c__v img, .sol-c__v svg { transition: transform 1100ms var(--sortie); }
.sol-c:hover .sol-c__v img, .sol-c:hover .sol-c__v svg { transform: scale(1.07); }

.sol-tete { min-height: clamp(340px, 46vw, 560px); }
.sol-tete::after {
  background: linear-gradient(180deg, rgba(8,13,17,.34) 0%, rgba(8,13,17,.74) 58%, rgba(8,13,17,.94) 100%);
}
.sol-som { border-radius: var(--r-g); box-shadow: var(--ombre-1), var(--fil-int); }
.sol-serv {
  border-radius: var(--r-g);
  box-shadow: var(--ombre-1), var(--fil-int);
  transition: box-shadow var(--sortie), transform var(--sortie);
}
.sol-serv:hover { box-shadow: var(--ombre-2), var(--fil-int); transform: translateY(-2px); }
.faq-i summary { transition: color var(--entree), padding-left var(--entree); }
.faq-i summary:hover { padding-left: .35rem; }
.faq-i[open] summary { color: var(--rouge); }

/* ══════════════════════════════════════ 6.23 · LE MENU PLEIN ÉCRAN ═══ */
/* Sur téléphone, le menu est une pièce sombre : même soin que le desktop. */
.voile-nav {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(95,168,220,.14), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(192,135,43,.10), transparent 62%),
    var(--sombre);
}
.voile-nav__l {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: -.015em;
  transition: color var(--entree), padding-left var(--entree);
}
.voile-nav__l:hover, .voile-nav__l:active { color: var(--rouge-nuit); padding-left: .4rem; }

/* ══════════════════════════════════ 6.24 · LE SOIN DU PETIT ÉCRAN ════ */
@media (max-width: 900px) {
  /* L'index des familles devient une pile de plaques, pas une liste tassée. */
  .rangs { border-top: 0; display: grid; gap: .75rem; }
  .rang {
    border-bottom: 0; border-radius: var(--r-g);
    background: linear-gradient(180deg, var(--beton), color-mix(in srgb, var(--beton) 92%, var(--nuit)));
    box-shadow: var(--fil-int), var(--ombre-1);
    margin-inline: 0;
    padding: 1.35rem 1.25rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    row-gap: .65rem;
  }
  .rang::after { top: 1.35rem; bottom: 1.35rem; transform: scaleY(1); opacity: .55; }
  .rang:hover { padding-block: 1.35rem; }
  .rang__n { grid-column: 1; font-size: .625rem; }
  .rang__c { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .rang__t { grid-column: 1; font-size: clamp(1.4rem, 6.4vw, 2rem); }
  .rang__d { grid-column: 1; font-size: var(--t-fin); }
  .rang__v { width: 58px; }
  .rang__q { display: none; }

  /* Titres : on garde l'échelle sans jamais déborder. */
  .titre-2 { font-size: clamp(1.85rem, 8.2vw, 2.8rem); }
  .titre-2.regle::after { width: 64px; }

  /* Les boutons deviennent pleine largeur là où c'est l'action attendue. */
  .hero__act { display: grid; gap: .6rem; }
  .hero__act .b { width: 100%; }

  /* Les ombres se calment : sur petit écran elles alourdissent. */
  .piece:hover, .profil:hover, .projet:hover, .sol-c:hover { transform: none; }
  .piece, .profil, .projet, .sol-c { box-shadow: var(--fil-int); }
}

@media (max-width: 620px) {
  :root { --r-g: 4px; }
  .cartouche { box-shadow: var(--ombre-1), var(--fil-int); }
  .sol-tete { min-height: 320px; }
}

/* ═════════════════════════════════════ 6.25 · MOUVEMENT RÉDUIT ═══════ */
@media (prefers-reduced-motion: reduce) {
  .b::after, .cue i, .etiq::before { animation: none !important; }
  .cue i { transform: scaleY(1); }
  .etiq::before { transform: scaleX(1); }
  .titre-2.regle::after, .lame__fil, .eng::before { transform: scaleX(1) !important; }
  .cadre > img, .cadre > svg, .sol-tete__v { transform: none !important; }
  .profil::before, .rang::after { transform: scaleY(1) !important; }
}

/* ═══════════════════════════ 6.26 · DISPOSITIFS TYPES ET ORIGINE ═════ */
/* Deux modules nés de la finalisation : ils remplacent les « réalisations »
   et les « logos clients » que l'entreprise n'a pas encore — et n'inventera
   pas. Ils montrent la compétence au lieu de revendiquer un passé. */
.dispos {
  display: grid; gap: clamp(.7rem, 1.1vw, 1.1rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) { .dispos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .dispos { grid-template-columns: 1fr; } }

.dispo {
  position: relative; isolation: isolate;
  display: grid; align-content: start; gap: .55rem;
  padding: 1.6rem 1.55rem 1.45rem;
  border-radius: var(--r-g);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--beton) 97%, transparent),
    color-mix(in srgb, var(--beton) 87%, var(--nuit)));
  box-shadow: var(--fil-int);
  overflow: hidden;
  transition: transform var(--sortie), box-shadow var(--sortie);
}
.dispo::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--rouge), transparent);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--sortie);
}
.dispo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 70% at 0% 0%, var(--halo), transparent 62%);
  opacity: 0; transition: opacity var(--sortie);
}
.dispo:hover { transform: translateY(-4px); box-shadow: var(--ombre-3), var(--fil-int); }
.dispo:hover::before { transform: scaleY(1); }
.dispo:hover::after { opacity: 1; }
.dispo__n {
  font-family: var(--data); font-size: var(--t-micro);
  letter-spacing: .16em; color: var(--acier-bas);
  transition: color var(--sortie);
}
.dispo:hover .dispo__n { color: var(--rouge); }
.dispo__t {
  font-family: var(--texte); font-weight: 600;
  font-size: var(--t-h3); line-height: 1.16; letter-spacing: -.02em;
  color: var(--craie); transition: color var(--sortie);
}
.dispo:hover .dispo__t { color: var(--rouge); }
.dispo__d { font-size: var(--t-base); color: var(--acier); line-height: 1.6; }
.dispo__f {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: .95rem; padding-top: .95rem; border-top: 1px solid var(--rail);
}
.dispo__q {
  font-family: var(--data); font-size: var(--t-micro);
  color: var(--acier-bas); letter-spacing: .05em; white-space: nowrap;
}
.dispo__q b { color: var(--craie); font-weight: 500; }
.dispo__a {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-left: auto;
  font-family: var(--data); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--rouge);
  white-space: nowrap;
}
.dispo__a svg { width: 15px; height: 15px; transition: transform var(--sortie); }
.dispo:hover .dispo__a svg { transform: translateX(5px); }
@media (max-width: 460px) { .dispo__a { margin-left: 0; width: 100%; } }

/* La plaque d'origine : quatre lignes, gravées. */
.origine {
  border-radius: var(--r-g);
  border: 1px solid var(--rail);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--beton) 96%, transparent),
    color-mix(in srgb, var(--beton) 84%, var(--nuit)));
  box-shadow: var(--ombre-1), var(--fil-int);
  overflow: hidden;
}
.origine__c {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem; align-items: baseline;
  padding: 1.05rem clamp(1.1rem, 2vw, 1.6rem);
  border-bottom: 1px solid var(--rail);
  transition: background var(--entree);
}
.origine__c:last-child { border-bottom: 0; }
.origine__c:hover { background: var(--jour-doux); }
.origine__k {
  font-family: var(--data); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--acier-bas);
}
.origine__v {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.6vw, 1.45rem); line-height: 1;
  letter-spacing: -.012em; color: var(--craie); text-align: right;
}
@media (max-width: 520px) {
  .origine__c { grid-template-columns: 1fr; gap: .3rem; }
  .origine__v { text-align: left; }
}

/* Le repère d'adresse au pied de page. */
.pied__rep {
  margin-top: 1.1rem; font-size: var(--t-fin); line-height: 1.65;
  color: var(--acier); max-width: 36ch;
}
.pied__maps {
  display: inline-block; margin-top: .35rem;
  font-family: var(--data); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--rouge);
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}

/* ══════════════════════════════════════ 6.27 · LE PETIT MENU (ENTREPRISE) ═
   Deux portes, pas une planche : le méga-menu « Solutions »/« Catalogue »
   s'étale sur toute la largeur — celui-ci reste ancré sous son
   déclencheur, étroit, comme un menu de logiciel de bureau. */
.mm-hote--ancre { position: relative; }
.mm-hote--ancre > .mm--mini {
  left: 0; right: auto; top: calc(100% + 1px);
  width: min(300px, 88vw);
  border: 1px solid var(--rail); border-top: 1px solid var(--rail);
  box-shadow: var(--ombre-2, 0 20px 45px -20px rgba(11,17,22,.28));
  border-radius: var(--r-g, 4px);
  overflow: hidden;
  padding: .4rem;
}
.mm__i-mini {
  display: grid; gap: .2rem;
  padding: .9rem 1rem; border-radius: calc(var(--r-g, 4px) - 2px);
  transition: background var(--vif);
}
.mm__i-mini:hover { background: var(--jour-doux); }
.mm__i-mini b {
  font-family: var(--texte); font-weight: 600; font-size: var(--t-base);
  color: var(--craie);
}
.mm__i-mini span {
  font-size: var(--t-mini); color: var(--acier-bas); line-height: 1.4;
}

/* ══════════════════════════════════════════ 6.28 · LA PAGE SAVOIR-FAIRE ═══
   L'argument qualité du site entier : fabrication française, continuité
   industrielle depuis 1905, précision des caractéristiques publiées.
   Les composants réutilisent presque tout du système existant (.eng,
   .dispo, .four__l) — chaque zone hérite déjà de ses propres tokens de
   couleur, il ne reste donc que ce qui est réellement nouveau. */
.sf-hero { padding-block: clamp(6.5rem, 12vw, 10rem) clamp(3rem, 6vw, 4.5rem); }
.sf-hero__trust {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.4rem; border-top: 1px solid var(--rail);
  font-family: var(--data); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--acier-bas);
  max-width: 62ch;
}

.sf-fab__badge {
  border-radius: var(--r-g); border: 1px solid var(--rail);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--beton) 96%, transparent),
    color-mix(in srgb, var(--beton) 84%, var(--nuit)));
  box-shadow: var(--ombre-1, 0 10px 30px -15px rgba(11,17,22,.25)), var(--fil-int, inset 0 1px 0 rgba(255,255,255,.05));
  padding: clamp(2rem, 4vw, 3rem);
  display: grid; gap: 1.1rem; justify-items: center; text-align: center;
}
.sf-fab__row { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.4rem); }
.sf-fab__y, .sf-fab__now {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 1rem + 3vw, 3.2rem); line-height: 1;
  letter-spacing: -.02em; color: var(--craie); white-space: nowrap;
}
.sf-fab__arrow {
  width: clamp(36px, 6vw, 64px); height: 2px; background: var(--rouge);
  position: relative; flex: none;
}
.sf-fab__arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 9px; height: 9px; border-right: 2px solid var(--rouge);
  border-top: 2px solid var(--rouge); transform: translateY(-50%) rotate(45deg);
}
.sf-fab__sub {
  font-family: var(--data); font-size: var(--t-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--acier-bas);
}
@media (max-width: 480px) {
  .sf-fab__row { flex-direction: column; gap: .5rem; }
  .sf-fab__arrow { width: 2px; height: 28px; }
  .sf-fab__arrow::after { right: 50%; top: 100%; transform: translate(50%, -50%) rotate(135deg); }
}

/* Les sept environnements réutilisent les cartes .dispo, sans pied de
   carte (ni lien, ni compteur) : ce sont des portes d'entrée thématiques,
   pas des dispositifs cliquables. */
.dispos--sf .dispo { cursor: default; }
.dispos--sf .dispo:hover { transform: none; box-shadow: var(--fil-int); }
.dispos--sf .dispo:hover::before, .dispos--sf .dispo:hover::after { transform: none; opacity: 0; }

/* La frise : trois jalons, une ligne qui les relie. */
.sf-tl {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem); position: relative; margin-top: 2rem;
}
.sf-tl::before {
  content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 1px;
  background: var(--rail);
}
.sf-tl__n { position: relative; display: grid; gap: .6rem; padding-top: 2.1rem; }
.sf-tl__d {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px;
  border-radius: 50%; background: var(--nuit); border: 2px solid var(--rouge);
}
.sf-tl__y {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: var(--t-h3); line-height: 1.05; color: var(--craie);
}
.sf-tl__n p { color: var(--acier); font-size: var(--t-base); line-height: 1.6; max-width: 32ch; }
@media (max-width: 800px) {
  .sf-tl { grid-template-columns: 1fr; gap: 2.1rem; }
  .sf-tl::before { left: 9px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .sf-tl__n { padding-top: 0; padding-left: 2.3rem; }
  .sf-tl__d { left: 0; top: 3px; }
}

/* L'étiquette « Notre mission » de l'appel final : la bande est déjà
   colorée, l'étiquette hérite du blanc plutôt que du bleu d'accent
   habituel (illisible sur un fond bleu proche). */
.appel .etiq { color: rgba(255,255,255,.78); }

.voile-nav__l--sub {
  font-size: clamp(1.05rem, 4.2vw, 1.4rem);
  font-weight: 600;
  text-transform: none;
  color: var(--acier);
  padding-top: 0;
  padding-left: 1.2rem;
}