/* ============================================================
   CERVIS — Feuille principale
   Parti pris : « le trait de niveau ». Filets d'un pixel, angles
   nets, et le rouge de marque employé comme un trait de crayon
   sur un plan : il mesure, il souligne, il ne décore pas.
   ============================================================ */

/* ---------------------------------------------------------------- 1. Socle */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compense la hauteur de l'en-tête collant lors des ancres */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-corps);
  font-size: var(--t-base);
  line-height: var(--lh-corps);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Pas d'overflow-x sur body : la règle d'appariement CSS forcerait aussi
     overflow-y, le body deviendrait un conteneur de rognage et fausserait
     les mesures de défilement. Le débordement se traite à la source. */
}

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

/* [hidden]{display:none} appartient à la feuille du navigateur : la moindre
   déclaration d'auteur la bat, quelle que soit sa spécificité. Sans cette
   règle, tout élément qui pose display: flex ou grid ignore purement et
   simplement l'attribut hidden. C'est ce qui faisait que les filtres de
   réalisations ne filtraient rien et que le formulaire de devis restait
   affiché sous son message de confirmation. */
[hidden] { display: none !important; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--f-titre);
  color: var(--encre-titre);
  font-weight: 700;
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--e-4); }

a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--rouge-fonce); }

ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

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

/* Un anneau de focus unique, visible partout, y compris sur fond sombre */
:focus-visible {
  outline: 3px solid var(--rouge);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

.saut-contenu {
  position: absolute; left: var(--e-4); top: -100px;
  z-index: var(--z-message);
  background: var(--bleu); color: #fff;
  padding: .75rem 1.25rem; border-radius: var(--r-2); font-weight: 600;
  transition: top var(--d-court) var(--ease-sortie);
}
.saut-contenu:focus { top: var(--e-4); color: #fff; }

.lecteur-seul {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- 2. Mise en page */
.enveloppe {
  width: min(100% - (var(--gouttiere) * 2), var(--largeur));
  margin-inline: auto;
}
/* La mesure étroite ne se fait PAS en rétrécissant le conteneur : centré,
   il démarrait 200 px plus à droite que les autres sections, si bien qu'une
   même page présentait deux bords gauche différents. Le conteneur garde
   donc sa largeur, et ce sont ses enfants qui sont plafonnés. Le bord
   gauche reste unique sur tout le site. */
.enveloppe--etroit > * { max-width: var(--largeur-etroit); }

.section { padding-block: var(--section-y); position: relative; }
.section--ample { padding-block: var(--section-y-max); }
.section--alt { background: var(--fond-alt); }
.section--sombre { background: var(--fond-sombre); color: var(--texte-sombre); }
.section--sombre h1, .section--sombre h2,
.section--sombre h3, .section--sombre h4 { color: #fff; }

/* Filet de séparation, aussi fin que sur un plan */
.section + .section:not(.section--alt):not(.section--sombre) { border-top: 1px solid var(--filet); }

.grille { display: grid; gap: var(--e-6); }
/* minmax(0, 1fr) et jamais 1fr seul : le minimum implicite auto
   fait déborder les grilles dès qu'un mot est long. */
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* ------------------------------------------------- 3. Titres de section
   Grammaire reprise de la plaquette CERVIS : intitulé en capitales,
   bleu de marque, souligné d'un trait rouge court puis d'un filet clair. */
.titre-section { margin-bottom: var(--e-7); max-width: 62ch; }

.titre-section h2 {
  font-size: var(--t-h2);
  text-transform: uppercase;
  letter-spacing: .01em;
}
.titre-section .regle {
  display: block;
  height: 3px;
  width: 100%;
  margin-top: var(--e-4);
  background: linear-gradient(to right,
    var(--rouge) 0 64px, var(--filet-fort) 64px 100%);
}
.section--sombre .titre-section .regle {
  background: linear-gradient(to right,
    var(--rouge) 0 64px, var(--filet-sombre) 64px 100%);
}
.titre-section p {
  margin-top: var(--e-5);
  font-size: var(--t-lead);
  color: var(--texte);
  max-width: var(--mesure);
}
.section--sombre .titre-section p { color: var(--texte-sombre); }

/* Libellé court en capitales. Employé avec parcimonie : sur les fiches
   d'expertise et les coordonnées, pas au-dessus de chaque section. */
.etiquette {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--rouge-fonce);
}
.section--sombre .etiquette,
.plan .etiquette,
.heros .etiquette { color: var(--rouge-clair); }

/* --------------------------------------------------------------- 4. Boutons
   Le bleu porte l'action principale : blanc sur #1e3a8a donne 10,9:1.
   Le rouge de marque plafonne à 4,39:1 avec du blanc, il reste donc
   un accent et ne porte jamais de petit libellé. */
.bouton {
  --bt-fond: var(--bleu);
  --bt-texte: #fff;
  --bt-bord: var(--bleu);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.6rem;
  background: var(--bt-fond); color: var(--bt-texte);
  border: 1px solid var(--bt-bord); border-radius: var(--r-2);
  font-weight: 600; font-size: 0.9375rem; line-height: 1.2;
  letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: background var(--d-court) var(--ease-doux),
              border-color var(--d-court) var(--ease-doux),
              color var(--d-court) var(--ease-doux),
              transform var(--d-court) var(--ease-sortie);
}
.bouton:hover { background: var(--bleu-nuit); border-color: var(--bleu-nuit); color: #fff; transform: translateY(-1px); }
.bouton:active { transform: translateY(0); }

/* Le trait rouge qui se dessine sous le bouton au survol : c'est la
   signature de marque, reprise du soulignement des titres. */
.bouton::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--rouge);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-moyen) var(--ease-sortie);
}
.bouton:hover::after { transform: scaleX(1); }

.bouton--rouge { --bt-fond: var(--rouge-fonce); --bt-bord: var(--rouge-fonce); }
.bouton--rouge:hover { background: #b30d14; border-color: #b30d14; }
.bouton--rouge::after { background: var(--bleu); }

.bouton--fantome {
  --bt-fond: transparent; --bt-texte: var(--bleu); --bt-bord: var(--filet-fort);
}
.bouton--fantome:hover { background: var(--bleu-voile); color: var(--bleu); border-color: var(--bleu); }

/* Sur photo : contour blanc franc, pas de verre dépoli */
.bouton--clair {
  --bt-fond: transparent; --bt-texte: #fff; --bt-bord: rgba(255 255 255 / .55);
  backdrop-filter: blur(2px);
}
.bouton--clair:hover { background: #fff; color: var(--bleu); border-color: #fff; }

.bouton--large { width: 100%; justify-content: center; }
.bouton .fleche { transition: transform var(--d-moyen) var(--ease-sortie); }
.bouton:hover .fleche { transform: translateX(4px); }

/* Lien fléché discret */
.lien-fleche {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: 0.9375rem; text-decoration: none;
  /* .7rem de part et d'autre : la cible atteint 44 px de haut, seuil
     en dessous duquel un doigt rate le lien une fois sur trois. */
  color: var(--bleu); padding-block: .7rem;
  border-bottom: 2px solid var(--rouge);
  transition: gap var(--d-court) var(--ease-sortie), color var(--d-court);
}
.lien-fleche:hover { gap: .85rem; color: var(--rouge-fonce); }

/* ------------------------------------------------------------- 5. En-tête */
.entete {
  position: sticky; top: 0; z-index: var(--z-entete);
  background: rgb(255 255 255 / .96);
  border-bottom: 1px solid var(--filet);
  transition: box-shadow var(--d-moyen) var(--ease-doux),
              background var(--d-moyen) var(--ease-doux);
}
@supports (backdrop-filter: blur(12px)) {
  .entete { background: rgb(255 255 255 / .82); backdrop-filter: blur(14px) saturate(1.4); }
}
.entete.est-pose { box-shadow: var(--ombre-2); }

/* Jauge de progression de lecture : un trait rouge, rien de plus */
.entete .progression {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--rouge); transform: scaleX(0); transform-origin: left;
  z-index: 1;
}

.entete__interieur {
  display: flex; align-items: center; gap: var(--e-5);
  min-height: 78px;
}
.entete__logo { display: flex; align-items: center; flex: 0 0 auto; }
.entete__logo img { height: 42px; width: auto; max-width: 44vw; }

.nav { margin-left: auto; }
.nav__liste { display: flex; align-items: center; gap: var(--e-2); }
.nav__lien {
  display: block; position: relative;
  padding: .55rem .8rem;
  font-size: 0.9375rem; font-weight: 500;
  color: var(--n-700); text-decoration: none;
  border-radius: var(--r-2);
  transition: color var(--d-court) var(--ease-doux);
}
.nav__lien::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .1rem;
  height: 2px; background: var(--rouge);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--d-moyen) var(--ease-sortie);
}
.nav__lien:hover { color: var(--bleu); }
.nav__lien:hover::after,
.nav__lien[aria-current="page"]::after { transform: scaleX(1); }
.nav__lien[aria-current="page"] { color: var(--bleu); font-weight: 600; }

/* Bloc disponibilité : une promesse forte du client, donc traitée
   comme une information et non comme un badge décoratif. */
.dispo {
  display: flex; align-items: center; gap: .55rem;
  padding-left: var(--e-5); margin-left: var(--e-3);
  border-left: 1px solid var(--filet-fort);
  font-size: var(--t-sm); line-height: 1.3; color: var(--n-600);
}
.dispo strong { display: block; color: var(--bleu); font-weight: 600; font-size: 0.8125rem; }
.dispo__point {
  width: 8px; height: 8px; border-radius: var(--r-plein);
  background: #16a34a; flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgb(22 163 74 / .18);
}
@media (prefers-reduced-motion: no-preference) {
  .dispo__point { animation: pulsation 2.6s var(--ease-doux) infinite; }
}
@keyframes pulsation {
  0%, 100% { box-shadow: 0 0 0 3px rgb(22 163 74 / .18); }
  50%      { box-shadow: 0 0 0 6px rgb(22 163 74 / .05); }
}

.entete__actions { display: flex; align-items: center; gap: var(--e-3); flex: 0 0 auto; }

.bascule-menu {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--filet-fort);
  border-radius: var(--r-2); cursor: pointer;
}
.bascule-menu span {
  display: block; width: 20px; height: 2px; background: var(--bleu);
  position: relative;
  transition: background var(--d-court) var(--ease-doux);
}
.bascule-menu span::before, .bascule-menu span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--bleu);
  transition: transform var(--d-moyen) var(--ease-sortie);
}
.bascule-menu span::before { top: -6px; }
.bascule-menu span::after  { top: 6px; }
.bascule-menu[aria-expanded="true"] span { background: transparent; }
.bascule-menu[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.bascule-menu[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Panneau mobile */
.panneau {
  position: fixed; inset: 0; z-index: var(--z-panneau);
  background: #fff;
  display: grid; grid-template-rows: auto 1fr auto;
  transform: translateY(-100%);
  transition: transform var(--d-long) var(--ease-sortie);
  visibility: hidden;
}
.panneau.est-ouvert { transform: translateY(0); visibility: visible; }
.panneau__haut {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 78px; border-bottom: 1px solid var(--filet);
  padding-inline: var(--gouttiere);
}
.panneau__haut img { height: 40px; }
.panneau__nav { padding: var(--e-6) var(--gouttiere); overflow-y: auto; }
.panneau__nav a {
  display: flex; align-items: baseline; gap: var(--e-4);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--filet);
  font-family: var(--f-titre); font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: 700; color: var(--bleu);
  letter-spacing: var(--ls-titre); text-decoration: none;
}
.panneau__nav a .n {
  /* 12 px à côté d'un libellé de 27 px : le repère ne se lisait pas. */
  font-size: 0.9375rem; font-weight: 700; color: var(--rouge-fonce);
  font-family: var(--f-titre); letter-spacing: .06em;
  min-width: 2ch;
}
.panneau__nav a[aria-current="page"] { color: var(--rouge-fonce); }
.panneau__pied {
  padding: var(--e-6) var(--gouttiere) calc(var(--e-6) + env(safe-area-inset-bottom));
  background: var(--fond-alt); border-top: 1px solid var(--filet);
  display: grid; gap: var(--e-4);
}

/* ---------------------------------------------------------------- 6. Héros */
.heros {
  position: relative;
  min-height: min(94svh, 900px);
  display: grid; align-items: end;
  background: var(--bleu-encre);
  overflow: hidden;
  isolation: isolate;
}
.heros__media { position: absolute; inset: 0; z-index: var(--z-fond); overflow: hidden; }
.heros__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Léger sur-cadrage : la parallaxe déplace l'image sans découvrir le bord */
  scale: 1.12;
  transform-origin: center 40%;
}
/* Voile bleu de marque : la photo passe sous la couleur de l'entreprise,
   le texte reste lisible quelle que soit la photo qu'on y mettra ensuite. */
.heros__voile {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgb(11 27 63 / .94) 0%, rgb(11 27 63 / .72) 38%,
                            rgb(11 27 63 / .34) 68%, rgb(11 27 63 / .28) 100%),
    linear-gradient(to right, rgb(30 58 138 / .42) 0%, rgb(30 58 138 / 0) 60%);
}
.heros__contenu {
  position: relative; z-index: var(--z-contenu);
  padding-block: clamp(3rem, 2.2rem + 5vw, 5.5rem) clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  color: #fff;
}
.heros__ligne {
  display: flex; align-items: center; gap: var(--e-4);
  margin-bottom: var(--e-5);
}
.heros__ligne .trait { height: 2px; width: 56px; background: var(--rouge); flex: 0 0 auto; }
.heros__ligne span {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: rgb(255 255 255 / .88);
}
.heros h1 {
  color: #fff;
  font-size: var(--t-display);
  line-height: var(--lh-serre);
  max-width: 16ch;
}
.heros h1 .point { color: var(--rouge); }
.heros__texte {
  margin-top: var(--e-5);
  font-size: var(--t-lead);
  color: rgb(255 255 255 / .88);
  max-width: 56ch;
}
.heros__actions {
  margin-top: var(--e-7);
  display: flex; flex-wrap: wrap; gap: var(--e-3);
}

/* Bandeau de repères en pied de héros */
.heros__reperes {
  position: relative; z-index: var(--z-contenu);
  margin-top: clamp(2.5rem, 2rem + 4vw, 4.5rem);
  border-top: 1px solid rgb(255 255 255 / .22);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.heros__repere {
  padding: var(--e-5) var(--e-5) var(--e-5) 0;
  border-right: 1px solid rgb(255 255 255 / .16);
}
.heros__repere:last-child { border-right: 0; }
.heros__repere dt {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--ls-label);
  /* #ed1b24 ne donnerait que 3,85:1 sur le bleu encre : trop faible pour
     du 12 px. La version éclaircie tient 7,1:1. */
  text-transform: uppercase; color: var(--rouge-clair);
  margin-bottom: .4rem;
}
.heros__repere dd {
  margin: 0; color: #fff; font-weight: 500; font-size: 0.9375rem; line-height: 1.45;
}

/* Indicateur de défilement */
.heros__defiler {
  position: absolute; right: max(var(--gouttiere), 1.5rem); bottom: var(--e-7); z-index: var(--z-contenu);
  padding-right: 2px;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  color: rgb(255 255 255 / .6); font-size: var(--t-xs);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  writing-mode: vertical-rl;
}
.heros__defiler i {
  display: block; width: 1px; height: 46px; background: rgb(255 255 255 / .35);
  position: relative; overflow: hidden;
}
.heros__defiler i::after {
  content: ""; position: absolute; inset: 0; background: var(--rouge);
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .heros__defiler i::after { animation: filet-descend 2.2s var(--ease-doux) infinite; }
}
@keyframes filet-descend {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
@media (max-width: 860px) { .heros__defiler { display: none; } }

/* Héros court pour les pages intérieures */
.heros--page { min-height: min(56svh, 520px); }
.heros--page h1 { font-size: var(--t-h1); max-width: 20ch; }

.fil { display: flex; gap: .5rem; align-items: center; font-size: var(--t-sm); color: rgb(255 255 255 / .7); margin-bottom: var(--e-4); }
.fil a { color: rgb(255 255 255 / .82); text-decoration: none; }
.fil a:hover { color: #fff; text-decoration: underline; }
.fil span[aria-current] { color: var(--rouge-clair); }

/* ------------------------------------------------------ 7. Bande de confiance */
.bande-confiance {
  background: var(--bleu);
  color: #fff;
  overflow: hidden;
  /* Une rangée : le texte qui défile, puis la commande. Elles ne se
     recouvrent plus, ce qui évitait de lire un cercle posé sur un mot. */
  display: flex; align-items: stretch;
}
.bande-confiance__cadre {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  padding-block: var(--e-5);
  /* Le texte s'éteint avant d'atteindre la commande, au lieu d'être coupé net. */
  mask-image: linear-gradient(to right, #000 0 92%, transparent 100%);
}
.bande-confiance__piste {
  display: flex; align-items: center; gap: var(--e-8);
  white-space: nowrap; width: max-content;
}
@media (prefers-reduced-motion: no-preference) {
  .bande-confiance__piste { animation: defile 38s linear infinite; }
  .bande-confiance:hover .bande-confiance__piste,
  .bande-confiance:focus-within .bande-confiance__piste,
  .bande-confiance.est-en-pause .bande-confiance__piste { animation-play-state: paused; }
}
/* WCAG 2.2.2 : tout mouvement automatique de plus de cinq secondes doit
   pouvoir être arrêté. Le survol souris ne suffit pas, il n'existe ni au
   doigt ni au clavier.
   La forme suit le reste du site : angles nets, pas de rond. Un cercle
   translucide portant un glyphe lecture/pause se lisait comme la commande
   d'un lecteur vidéo posée sur le bandeau. */
.bande-confiance__pause {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .5rem;
  padding-inline: clamp(.9rem, 2.4vw, 1.4rem);
  background: rgb(0 0 0 / .16); color: rgb(255 255 255 / .78);
  border: 0; border-left: 1px solid rgb(255 255 255 / .22);
  border-radius: 0;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  cursor: pointer;
  transition: background var(--d-court) var(--ease-doux), color var(--d-court) var(--ease-doux);
}
.bande-confiance__pause:hover { background: rgb(0 0 0 / .3); color: #fff; }
.bande-confiance__pause svg { flex: 0 0 auto; }
.bande-confiance__pause:focus-visible { outline-offset: -3px; }
@media (max-width: 620px) {
  /* Sous 620 px, le libellé mangerait la moitié du bandeau : le pictogramme
     suffit, le nom de l'action reste porté par aria-label. */
  .bande-confiance__pause span { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bande-confiance__pause { padding-inline: .9rem; }
}
@keyframes defile { to { transform: translateX(-50%); } }
.bande-confiance__item {
  display: inline-flex; align-items: center; gap: var(--e-3);
  font-size: 0.9375rem; font-weight: 500; color: rgb(255 255 255 / .92);
}
.bande-confiance__item .pastille {
  width: 6px; height: 6px; background: var(--rouge); border-radius: var(--r-plein);
}

/* ---------------------------------------------------- 8. Domaines d'expertise
   La plaquette CERVIS numérote ses trois domaines 01/02/03. On garde
   cette numérotation, c'est leur grammaire, mais elle ne se répand
   nulle part ailleurs sur le site. */
.domaines { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

.domaine {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r-3);
  overflow: hidden;
  transition: border-color var(--d-moyen) var(--ease-doux),
              box-shadow var(--d-moyen) var(--ease-doux),
              transform var(--d-moyen) var(--ease-sortie);
}
.domaine:hover { border-color: var(--bleu); box-shadow: var(--ombre-3); transform: translateY(-4px); }

.domaine__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--n-100); }
.domaine__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d-long) var(--ease-sortie);
}
.domaine:hover .domaine__media img { transform: scale(1.045); }
.domaine__numero {
  position: absolute; left: 0; top: 0; z-index: 1;
  background: var(--bleu); color: #fff;
  font-family: var(--f-titre); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: .06em;
  padding: .55rem .85rem;
}
.domaine__corps { padding: var(--e-6); display: flex; flex-direction: column; flex: 1; }
.domaine__corps h3 { font-size: var(--t-h3); margin-bottom: var(--e-3); }
.domaine__corps > p { font-size: 0.9375rem; margin-bottom: var(--e-5); }

.prestations { display: grid; gap: .7rem; margin-bottom: var(--e-6); }
.prestations li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: .7rem;
  align-items: start;
  font-size: 0.9375rem; line-height: 1.5;
}
.prestations li::before {
  content: ""; display: block;
  width: 10px; height: 10px; margin-top: .42em;
  border-left: 2px solid var(--rouge); border-bottom: 2px solid var(--rouge);
  transform: rotate(-45deg) translate(1px, -1px);
}
.domaine__pied { margin-top: auto; padding-top: var(--e-4); border-top: 1px solid var(--filet); }

/* --------------------------------------------------------------- 9. Chiffres */
/* Une grille de figures, pas une pile. Les filets dessinent les cases :
   c'est la grammaire du reste du site, et cela donne au bloc la tenue d'un
   tableau de relevé plutôt que d'une liste. */
.chiffres {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r-4);
  overflow: hidden;
}
.chiffre {
  padding: var(--e-6) var(--e-5);
  border-right: 1px solid var(--filet);
  position: relative;
}
.chiffre:last-child { border-right: 0; }
/* Le trait rouge en tête de case, comme sur les engagements */
.chiffre::before {
  content: ""; position: absolute; left: var(--e-5); top: 0;
  width: 34px; height: 3px; background: var(--rouge);
}

@media (max-width: 980px) {
  /* Deux colonnes : sur un téléphone, quatre cases empilées laissaient la
     moitié droite de l'écran vide et le bloc ne se lisait plus comme un
     ensemble. */
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffre:nth-child(2n) { border-right: 0; }
  .chiffre:nth-child(-n+2) { border-bottom: 1px solid var(--filet); }
}
@media (max-width: 420px) {
  .chiffre { padding: var(--e-5) var(--e-4); }
  .chiffre::before { left: var(--e-4); }
}
.chiffre__valeur {
  /* Chasse fixe : sans elle, la ligne tremble pendant que le compteur monte. */
  font-variant-numeric: tabular-nums;
  font-family: var(--f-titre); font-weight: 700;
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); line-height: .95;
  color: var(--bleu); letter-spacing: -0.035em;
  display: flex; align-items: baseline; gap: .04em; flex-wrap: wrap;
}
.chiffre__valeur .suffixe { color: var(--rouge); }
.chiffre__nom {
  margin-top: var(--e-3); font-size: 0.9375rem; font-weight: 600; color: var(--n-800);
  line-height: 1.3;
}
.chiffre__note { margin-top: .35rem; font-size: var(--t-sm); color: var(--n-600); line-height: 1.45; }
@media (max-width: 620px) {
  .chiffre__nom { font-size: .875rem; }
  .chiffre__note { font-size: .75rem; }
}
.section--sombre .chiffre { border-right-color: var(--filet-sombre); }
.section--sombre .chiffres { border-top-color: var(--filet-sombre); }
.section--sombre .chiffre__valeur { color: #fff; }
.section--sombre .chiffre__nom { color: rgb(255 255 255 / .9); }
.section--sombre .chiffre__note { color: rgb(255 255 255 / .55); }

/* ---------------------------------------------------------- 10. La méthode
   Un fil d'aplomb rouge se dessine au fil du défilement, étape par étape. */
.methode { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-8); }
@media (min-width: 940px) {
  .methode { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-10); align-items: start; }
  .methode__intro { position: sticky; top: 8rem; }
}

.etapes { position: relative; padding-left: var(--e-7); }
.etapes__rail {
  position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px;
  background: var(--filet-fort);
}
.etapes__fil {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: var(--rouge); transform-origin: top; transform: scaleY(0);
}
.etape { position: relative; padding-bottom: var(--e-8); }
.etape:last-child { padding-bottom: 0; }
.etape__puce {
  position: absolute; left: calc(var(--e-7) * -1); top: 2px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--fond); border: 2px solid var(--filet-fort);
  border-radius: var(--r-plein);
  font-size: 11px; font-weight: 700; color: var(--n-500);
  font-family: var(--f-titre);
  transition: border-color var(--d-moyen) var(--ease-doux),
              color var(--d-moyen) var(--ease-doux),
              background var(--d-moyen) var(--ease-doux);
}
.section--alt .etape__puce { background: var(--fond-alt); }
.etape.est-atteinte .etape__puce { border-color: var(--rouge); background: var(--rouge); color: #fff; }
.etape h3 { font-size: var(--t-h3); margin-bottom: var(--e-2); }
.etape .duree { font-size: var(--t-sm); color: var(--rouge-fonce); font-weight: 600; margin-bottom: var(--e-3); }
.etape p { font-size: 0.9375rem; max-width: 58ch; }

/* ------------------------------------------------------- 11. Réalisations */
/* Défilement horizontal natif : le doigt sur mobile, la molette et les
   flèches sur ordinateur. Aucune section épinglée, qui confisque le
   défilement de la page et casse l'impression comme la capture. */
.realisations-defile {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--filet-fort) transparent;
  padding-block: var(--e-2) var(--e-5);
}
.realisations-defile::-webkit-scrollbar { height: 6px; }
.realisations-defile::-webkit-scrollbar-track { background: var(--filet); }
.realisations-defile::-webkit-scrollbar-thumb { background: var(--filet-fort); border-radius: var(--r-plein); }
.realisations-defile:hover::-webkit-scrollbar-thumb { background: var(--n-300); }

.realisations-piste {
  display: flex; gap: var(--e-5);
  padding-inline: var(--gouttiere);
  width: max-content;
}
/* Le calage se fait par scroll-padding, jamais par padding : avec un
   padding, scroll-snap accroche la première carte et remet scrollLeft à
   la valeur du padding, ce qui désaligne le carrousel et allume à tort
   la flèche « précédent » dès le chargement. */
.realisations-defile { scroll-padding-left: var(--gouttiere); }
@media (min-width: 1360px) {
  .realisations-piste { padding-left: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2)); }
  .realisations-defile { scroll-padding-left: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2)); }
}
.realisations-piste .realisation { scroll-snap-align: start; }

.defile-commandes { display: flex; gap: var(--e-2); }
.defile-commandes button {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: transparent; color: var(--bleu);
  border: 1px solid var(--filet-fort); border-radius: var(--r-2);
  cursor: pointer;
  transition: all var(--d-court) var(--ease-doux);
}
.defile-commandes button:hover:not(:disabled) { border-color: var(--bleu); background: var(--bleu); color: #fff; }
.defile-commandes button:disabled { opacity: .35; cursor: default; }
@media (max-width: 1023px) { .defile-commandes { display: none; } }

.realisation {
  flex: 0 0 min(78vw, 460px);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border: 1px solid var(--filet); border-radius: var(--r-3);
  background: var(--surface); overflow: hidden;
  transition: border-color var(--d-moyen) var(--ease-doux), box-shadow var(--d-moyen) var(--ease-doux);
}
/* Sans lien, une carte ne doit pas se comporter comme si elle en avait un.
   Seule l'image respire au survol, la bordure ne s'allume plus. */
.realisation:hover .realisation__media img { transform: scale(1.05); }
.realisation__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--n-100); position: relative; }
.realisation__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-long) var(--ease-sortie); }
.realisation__type {
  position: absolute; left: 0; bottom: 0;
  background: var(--bleu); color: #fff;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .45rem .8rem;
}
.realisation__corps { padding: var(--e-5); display: grid; gap: var(--e-2); }
.realisation__corps h3 { font-size: var(--t-h4); }
.realisation__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: var(--t-sm); color: var(--texte-doux); }
.realisation__meta b { color: var(--n-700); font-weight: 600; }

/* Version grille pour la page dédiée */
.realisations-grille {
  display: grid; gap: var(--e-5);
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  /* La place est réservée avant l'injection des fiches : sans cela tout ce
     qui suit sautait d'un bloc au premier rendu (décalage mesuré à 0,82). */
  min-height: 1560px;
}
@media (min-width: 720px)  { .realisations-grille { min-height: 1080px; } }
@media (min-width: 1100px) { .realisations-grille { min-height: 760px; } }
.realisations-grille .realisation { flex: initial; }

.filtres { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-7); }
.filtre {
  padding: .55rem 1.05rem;
  background: transparent; border: 1px solid var(--filet-fort);
  border-radius: var(--r-plein);
  font-size: 0.875rem; font-weight: 500; color: var(--n-600);
  cursor: pointer;
  transition: all var(--d-court) var(--ease-doux);
}
.filtre:hover { border-color: var(--bleu); color: var(--bleu); }
.filtre[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; }

/* ------------------------------------------------------- 12. Engagements */
.engagements { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  border: 1px solid var(--filet); border-radius: var(--r-4); overflow: hidden; }
.engagement {
  /* Retrait identique dans toutes les cellules. La première en était privée,
     pour caler son texte sur la grille de la page ; depuis que le bloc est une
     carte bordée, ce texte se retrouvait collé contre le bord, et la trame de
     fond faisait croire à un retrait oublié. C'est la CARTE qui s'aligne sur
     la grille, son contenu respire à l'intérieur. */
  padding: var(--e-7) var(--e-6);
  border-right: 1px solid var(--filet);
  position: relative;
  transition: background var(--d-moyen) var(--ease-doux);
}
/* Ces retraits calent la première et la dernière colonne sur la grille de
   la page. Ils n'ont de sens QUE tant que les engagements sont côte à
   côte : empilés, le premier se retrouvait 32 px à gauche des deux
   autres. */
.engagement:last-child { border-right: 0; }
.engagement:hover { background: var(--fond-alt); }
/* Le trait rouge en tête de bloc, repris de la plaquette */
.engagement::before {
  content: ""; position: absolute; left: var(--e-6); top: -1px;
  width: 48px; height: 3px; background: var(--rouge);
  transition: width var(--d-long) var(--ease-sortie);
}
.engagement:hover::before { width: calc(100% - var(--e-6) * 2); }
.engagement h3 { font-size: var(--t-h4); margin-bottom: var(--e-3); }
.engagement p { font-size: 0.9375rem; }
@media (max-width: 720px) {
  .engagement { border-right: 0; border-bottom: 1px solid var(--filet); }
  .engagement:last-child { border-bottom: 0; }
}

/* --------------------------------------------------- 13. Vision & mission */
.enonces { display: grid; gap: var(--e-8); }
@media (min-width: 860px) { .enonces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-10); } }
.enonce h3 {
  font-size: var(--t-h3); text-transform: uppercase; letter-spacing: .01em;
  padding-bottom: var(--e-4); margin-bottom: var(--e-5);
  border-bottom: 1px solid var(--filet-sombre); position: relative;
}
.enonce h3::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 64px; height: 3px; background: var(--rouge); }
.enonce p { font-size: var(--t-lead); line-height: 1.6; color: rgb(255 255 255 / .86); }

/* --------------------------------------------------------- 14. Témoignages */
.temoignages { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.temoignage {
  padding: var(--e-6);
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-3);
  display: flex; flex-direction: column; gap: var(--e-4);
}
.temoignage blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--n-700); }
.temoignage blockquote::before { content: "«\00a0"; color: var(--rouge); font-weight: 700; }
.temoignage blockquote::after  { content: "\00a0»"; color: var(--rouge); font-weight: 700; }
.temoignage figcaption { margin-top: auto; padding-top: var(--e-4); border-top: 1px solid var(--filet); font-size: var(--t-sm); }
.temoignage figcaption b { display: block; color: var(--bleu); font-weight: 600; font-size: 0.9375rem; }
.temoignage figcaption span { color: var(--texte-doux); }

.mention-demo {
  margin-top: var(--e-5);
  padding: var(--e-4) var(--e-5);
  background: var(--bleu-voile); border-left: 3px solid var(--bleu);
  font-size: var(--t-sm); color: var(--n-700);
  border-radius: var(--r-1);
}

/* Échec d'envoi du formulaire. Le rouge assombri porte du texte sur fond
   clair sans descendre sous 4,5:1, contrairement au rouge de la charte. */
.form-erreur {
  margin-top: var(--e-4);
  padding: var(--e-4) var(--e-5);
  background: #fdf1f1; border-left: 3px solid var(--rouge-fonce);
  border-radius: var(--r-1);
  color: #7a1017; font-size: var(--t-sm); line-height: 1.55;
}

/* --------------------------------------------------------- 15. Appel final */
.appel {
  position: relative; isolation: isolate;
  background: var(--bleu-encre); color: #fff;
  overflow: hidden;
}
.appel__media { position: absolute; inset: 0; z-index: var(--z-fond); }
/* La photo était à 38 % sous un voile à 95 % : elle n'était visible qu'à
   3 %. On la rend pleinement, et c'est le voile, désormais latéral, qui
   fait la lisibilité du texte. */
.appel__media img { width: 100%; height: 100%; object-fit: cover; }
.appel__voile {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgb(11 27 63 / .95) 0%, rgb(11 27 63 / .74) 55%, rgb(30 58 138 / .58) 100%);
}
.appel__contenu { position: relative; z-index: var(--z-contenu); padding-block: var(--section-y-max); }
.appel h2 { color: #fff; font-size: var(--t-h1); max-width: 18ch; }
.appel p { margin-top: var(--e-5); font-size: var(--t-lead); color: rgb(255 255 255 / .86); max-width: 52ch; }
.appel__actions { margin-top: var(--e-7); display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* Blocs de contact directs */
.contacts-directs {
  margin-top: var(--e-8); padding-top: var(--e-6);
  border-top: 1px solid rgb(255 255 255 / .22);
  display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.contact-direct dt {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--rouge-clair); margin-bottom: .45rem;
}
.contact-direct dd { margin: 0; }
.contact-direct a, .contact-direct span {
  color: #fff; font-size: 1.0625rem; font-weight: 500; text-decoration: none;
  display: block; line-height: 1.5; padding-block: .45rem;
}
.contact-direct a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--rouge); text-decoration-thickness: 2px; }

/* ------------------------------------------------------------ 16. Formulaire */
.formulaire { display: grid; gap: var(--e-5); }
.champ { display: grid; gap: .45rem; }
.champ label { font-size: 0.875rem; font-weight: 600; color: var(--n-700); }
.champ label .requis { color: var(--rouge-fonce); }
.champ .aide { font-size: var(--t-sm); color: var(--texte-doux); }

.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: .85rem 1rem;
  font: inherit; font-size: 1rem;
  color: var(--n-800); background: var(--surface);
  border: 1px solid var(--filet-fort); border-radius: var(--r-2);
  transition: border-color var(--d-court) var(--ease-doux), box-shadow var(--d-court) var(--ease-doux);
}
.champ textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--n-400); }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--n-300); }
/* Pas de outline: none. La règle globale :focus-visible pose un anneau rouge
   de 3 px, visible au clavier ; l'ombre bleue signale en plus le champ actif. */
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible {
  border-color: var(--bleu); box-shadow: var(--ombre-focus);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--bleu);
}
.champ.est-invalide input, .champ.est-invalide select, .champ.est-invalide textarea { border-color: var(--rouge-fonce); }
.champ__erreur { font-size: var(--t-sm); color: var(--rouge-fonce); font-weight: 500; }
.champ__erreur:empty { display: none; }

.champs-2 { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

/* Choix visuels (type de projet) */
.choix { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.choix__option { position: relative; display: grid; }
.choix__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.choix__option span {
  display: block; height: 100%; padding: var(--e-4) var(--e-5);
  border: 1px solid var(--filet-fort); border-radius: var(--r-3);
  font-size: 0.9375rem; font-weight: 500; cursor: pointer;
  transition: all var(--d-court) var(--ease-doux);
}
.choix__option span small { display: block; font-weight: 400; font-size: var(--t-sm); color: var(--texte-doux); margin-top: .2rem; }
.choix__option:hover span { border-color: var(--bleu); }
.choix__option input:checked + span { border-color: var(--bleu); background: var(--bleu-voile); color: var(--bleu); box-shadow: inset 0 0 0 1px var(--bleu); }
.choix__option input:focus-visible + span { outline: 3px solid var(--rouge); outline-offset: 3px; }

/* Progression du formulaire par étapes */
.etapes-form { display: flex; gap: var(--e-2); margin-bottom: var(--e-7); }
.etapes-form li { flex: 1; }
/* display:block indispensable : un <span> reste inline, et `height` ne
   s'applique pas à une boîte inline. Sans cela la barre devenait un
   pavé rouge et les deux autres segments n'apparaissaient pas. */
.etapes-form .barre { display: block; height: 3px; background: var(--filet-fort);
                      overflow: hidden; border-radius: var(--r-plein); }
.etapes-form .barre i { display: block; height: 100%; width: 0; background: var(--rouge); transition: width var(--d-long) var(--ease-sortie); }
.etapes-form li.est-faite .barre i, .etapes-form li.est-active .barre i { width: 100%; }
.etapes-form .nom { display: block; margin-top: .6rem; font-size: var(--t-sm); font-weight: 500; color: var(--n-500); }
.etapes-form li.est-active .nom, .etapes-form li.est-faite .nom { color: var(--bleu); font-weight: 600; }
@media (max-width: 620px) { .etapes-form .nom { font-size: 11px; } }

.form-page { display: none; }
.form-page.est-active { display: grid; gap: var(--e-5); }
.form-actions { display: flex; gap: var(--e-3); flex-wrap: wrap; padding-top: var(--e-3); }

.form-succes {
  display: none;
  padding: var(--e-8) var(--e-6); text-align: center;
  border: 1px solid var(--bleu); border-radius: var(--r-2); background: var(--bleu-voile);
}
.form-succes.est-visible { display: block; }
.form-succes { border-radius: var(--r-4); }
.form-succes h3 { font-size: var(--t-h3); margin-bottom: var(--e-3); }
.form-succes .coche {
  width: 56px; height: 56px; margin: 0 auto var(--e-5);
  display: grid; place-items: center;
  border-radius: var(--r-plein); background: var(--bleu); color: #fff;
}

/* --------------------------------------------------------------- 17. Divers */
.deux-colonnes { display: grid; gap: var(--e-8); align-items: center; }
@media (min-width: 900px) {
  .deux-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-10); }
  .deux-colonnes--inverse > *:first-child { order: 2; }
}
.figure-cadre { position: relative; margin: 0; }
.figure-cadre__image { position: relative; display: block; }
.figure-cadre img { width: 100%; border-radius: var(--r-3); position: relative; z-index: 1; }
/* Équerre décalée : le trait du dessinateur, pas une ombre molle.
   Elle cadre l'image seule, la légende reste en dehors. */
.figure-cadre__image::after {
  content: ""; position: absolute; right: -14px; bottom: -14px;
  width: 58%; height: 58%;
  border-right: 3px solid var(--rouge); border-bottom: 3px solid var(--rouge);
  z-index: 0; pointer-events: none;
}
.figure-cadre figcaption { margin-top: var(--e-5); font-size: var(--t-sm); color: var(--texte-doux); }

.faq { display: grid; gap: 0; border-top: 1px solid var(--filet); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-5) 0; cursor: pointer; list-style: none;
  font-family: var(--f-titre); font-weight: 600; font-size: var(--t-h4); color: var(--bleu);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .signe { flex: 0 0 auto; position: relative; width: 16px; height: 16px; }
.faq summary .signe::before, .faq summary .signe::after {
  content: ""; position: absolute; background: var(--rouge); transition: transform var(--d-moyen) var(--ease-sortie);
}
.faq summary .signe::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq summary .signe::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.faq details[open] summary .signe::after { transform: scaleY(0); }
.faq details p { padding-bottom: var(--e-5); font-size: 0.9375rem; max-width: var(--mesure); }

/* ------------------------------------------------------------- 18. Pied de page */
.pied { background: var(--bleu-encre); color: rgb(255 255 255 / .72); padding-block: var(--e-10) var(--e-6); }
.pied__haut { display: grid; gap: var(--e-8); }
@media (min-width: 900px) { .pied__haut { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--e-7); } }
.pied__marque img { height: 46px; margin-bottom: var(--e-5); }
.pied__marque p { font-size: 0.9375rem; max-width: 34ch; color: rgb(255 255 255 / .68); }
.pied h4 {
  color: #fff; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: var(--ls-label);
  margin-bottom: var(--e-4); padding-bottom: var(--e-3); border-bottom: 1px solid var(--filet-sombre);
  position: relative;
}
.pied h4::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 32px; height: 2px; background: var(--rouge); }
.pied ul { display: grid; gap: .1rem; }
.pied li { display: flex; }
.pied a, .pied li > span {
  display: block; padding-block: .62rem;
  color: rgb(255 255 255 / .72); text-decoration: none; font-size: 0.9375rem;
  transition: color var(--d-court);
}
.pied a:hover { color: #fff; }
.pied__dispo {
  margin-top: var(--e-5); padding: var(--e-4);
  border: 1px solid var(--filet-sombre); border-radius: var(--r-2);
  display: flex; align-items: center; gap: var(--e-3);
}
.pied__dispo strong { color: #fff; display: block; font-size: 0.9375rem; }
.pied__dispo span { font-size: var(--t-sm); }
.pied__bas {
  margin-top: var(--e-9); padding-top: var(--e-5); border-top: 1px solid var(--filet-sombre);
  display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-6); align-items: center; justify-content: space-between;
  font-size: var(--t-sm);
}
.pied__bas .legal { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
.pied__bas .legal a { padding-block: .55rem; }

/* Barre d'action mobile : le téléphone est le premier canal en Côte d'Ivoire */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-flottant);
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: #fff; border-top: 1px solid var(--filet);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 20px -8px rgb(11 27 63 / .2);
}
.barre-mobile a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem .75rem; font-size: 0.9375rem; font-weight: 600; text-decoration: none;
}
.barre-mobile a:first-child { color: var(--bleu); border-right: 1px solid var(--filet); }
.barre-mobile a:last-child { background: var(--bleu); color: #fff; }

/* -------------------------------------------------- 19. Révélations au défilement
   Règle : le contenu est visible par défaut. L'état masqué n'est posé
   que si le script a démarré ET que le visiteur accepte le mouvement.
   Sans JS, sans GSAP, ou en rendu headless, la page reste complète. */
.js-motion [data-reveal] { opacity: 0; transform: translateY(22px); }
.js-motion [data-reveal="cote"] { transform: translateX(-26px); }
.js-motion [data-reveal="echelle"] { transform: scale(.965); }

/* -------------------------------------------------------- 20. Points de rupture */
/* Le seuil de la disponibilité vit dans signature.css, avec les autres
   seuils de l'en-tête, pour qu'ils se lisent ensemble. */
/* La bascule se fait par la seule feuille de style, sans attendre le
   script : sinon la barre de liens du bureau restait affichée sur
   téléphone pendant tout le temps de chargement, puis disparaissait d'un
   coup. Le cas « sans JavaScript » est traité par un <noscript> dans
   chaque page, qui remet la barre et retire le bouton du panneau. */
@media (max-width: 1040px) {
  .nav { display: none; }
  .nav__liste { flex-wrap: wrap; }
  .bascule-menu { display: flex; }
  .entete__interieur { justify-content: space-between; }
}
/* Le bouton de devis cède en dernier : sous 620 px, la barre d'action en
   pied d'écran porte déjà « Devis ». Le bouton WhatsApp part avec lui. */
@media (max-width: 620px) { .entete__devis { display: none; } }
@media (max-width: 720px) {
  .barre-mobile { display: grid; }
  body { padding-bottom: 60px; }
  .heros__repere { border-right: 0; border-bottom: 1px solid rgb(255 255 255 / .16); padding-block: var(--e-4); }
  .heros__repere:last-child { border-bottom: 0; }
  .figure-cadre__image::after { right: -8px; bottom: -8px; }
  .pied__bas { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .heros__actions .bouton { width: 100%; justify-content: center; }
}

/* À très faible hauteur utile (zoom 400 %, clavier ouvert en paysage),
   un en-tête collant et une barre fixe mangent les trois quarts de l'écran. */
@media (max-height: 420px) {
  .entete { position: static; }
  .barre-mobile { display: none; }
  body { padding-bottom: 0; }
}

/* ------------------------------------------------ 21. Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
  .heros__media img { scale: 1.02; }
}

/* ------------------------------------------------------------ 22. Impression */
@media print {
  .entete, .barre-mobile, .heros__defiler, .panneau, .bande-confiance { display: none !important; }
  body { color: #000; padding: 0; }
  .heros { min-height: auto; background: #fff; }
  .heros__voile, .heros__media { display: none; }
  .heros h1, .heros__texte { color: #000; }
  .section { padding-block: 1.5rem; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}