@charset "utf-8";
/* ==========================================================================
   Auto Pare-Brise — v2, refonte éditoriale
   Contrat : specs/002-refonte-editoriale/contracts/design-system.md
   Toute valeur graphique vient de ce contrat.

   Deux règles qui gouvernent ce fichier :
   1. Aucune propriété animée hors `transform` et `opacity`.
   2. L'état masqué des révélations n'existe QUE sous `html.js`, et il est
      annulé par `prefers-reduced-motion`. Sans script : tout est visible.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. JETONS
   -------------------------------------------------------------------------- */
:root {
  /* primitives */
  --c-noir:        #0a0a0a;
  --c-noir-2:      #131313;
  --c-bord:        #2A2A29;   /* séparateur DÉCORATIF uniquement */
  --c-bord-champ:  #6A6A67;   /* bordure porteuse d'information (3,65:1) */
  --c-blanc:       #EDEBE4;   /* 16,60:1 sur noir */
  --c-gris:        #9A998F;   /*  6,91:1 sur noir */
  --c-jaune:       #f2e94b;   /* 15,59:1 sur noir — INTERDIT sur craie (1,08) */
  --c-craie:       #EFEDE6;
  --c-encre:       #0F0F0E;   /* 16,37:1 sur craie */
  --c-gris-encre:  #5C5B54;   /*  5,82:1 sur craie */
  --c-jaune-fonce: #5F5600;   /*  6,36:1 sur craie */

  /* sémantique */
  --fond: var(--c-noir);
  --texte: var(--c-blanc);
  --texte-2: var(--c-gris);
  --signal: var(--c-jaune);

  /* espacement, base 4 */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px;
  --e-5:24px; --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px;
  --e-section: clamp(72px, 13vw, 140px);
  --e-gouttiere: clamp(20px, 5vw, 48px);
  --largeur-max: 1240px;
  --barre-h: 76px;
  /* Hauteur de l'en-tête, exposée en variable : le bandeau réserve cette
     hauteur et les ancres s'y décalent. Trois valeurs codées en dur avaient
     été laissées en v2 — l'en-tête grandissant, elles auraient désaligné
     toutes les ancres du site. */
  --entete-h: 92px;
  /* Écart unique, partagé par l'en-tête et le bloc d'appel : l'égalité des
     espacements est ainsi garantie par construction, et non par réglage. */
  --appel-gap: 16px;

  /* mouvement */
  --d-rapide: 160ms;
  --d-bloc:   500ms;
  --d-titre:  560ms;
  --d-chiffre:620ms;
  --courbe:   cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   2. REMISE À ZÉRO
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--fond);
  color: var(--texte);
  font-family: 'Public Sans', 'Public Sans Repli', system-ui, -apple-system, sans-serif;
  font-size: clamp(1rem, 2.6vw, 1.0625rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px));
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE — trois registres
   Titres : Big Shoulders Display (signalétique industrielle)
   Texte  : Public Sans (neutre)
   Mono   : IBM Plex Mono (surtitres, chiffres, étiquettes)
   -------------------------------------------------------------------------- */

/* Replis calibrés : le basculement `swap` ne doit décaler aucune mise en page. */
@font-face {
  font-family: 'Big Shoulders Repli';
  src: local('Haettenschweiler'), local('Impact'), local('Arial Narrow Bold'), local('Arial');
  size-adjust: 62%; ascent-override: 145%; descent-override: 28%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Public Sans Repli';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  size-adjust: 99%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Plex Mono Repli';
  src: local('Consolas'), local('Menlo'), local('Courier New');
  size-adjust: 96%;
}

.t-monument, .t-titre, .t-chiffre, .t-intertitre {
  font-family: 'Big Shoulders Display', 'Big Shoulders Repli', 'Arial Narrow', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}
/* Le corps du titre monumental dépend de la LARGEUR **et** de la HAUTEUR
   disponibles. Sans le terme en `vh`, un écran large et bas (1280 × 720,
   très courant sur portable) pousse l'offre et les boutons sous la ligne de
   flottaison — ce que le principe VIII interdit. Constaté à la mesure. */
.t-monument {
  font-size: clamp(2.4rem, min(13vw, 11vh), 7.5rem);
  line-height: .84;
  letter-spacing: -.02em;
}
.t-titre {
  font-size: clamp(2.4rem, 8vw, 5rem);
  line-height: .88;
  letter-spacing: -.015em;
}
.t-chiffre {
  font-size: clamp(3.5rem, 12vw, 7rem);
  line-height: .8;
  letter-spacing: -.03em;
  text-transform: none;
  font-variant-numeric: lining-nums tabular-nums;
}
.t-intertitre {
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.005em;
}

.t-surtitre, .t-etiquette {
  font-family: 'IBM Plex Mono', 'Plex Mono Repli', ui-monospace, monospace;
  font-weight: 500;
  text-transform: uppercase;
}
.t-surtitre { font-size: .6875rem; letter-spacing: .24em; line-height: 1.4; }
.t-etiquette { font-size: .625rem; letter-spacing: .18em; line-height: 1.4; }

.t-chapo {
  font-size: clamp(1.0625rem, 3vw, 1.25rem);
  line-height: 1.5;
  color: var(--texte-2);
}
.t-action {
  font-family: 'Public Sans', 'Public Sans Repli', system-ui, sans-serif;
  font-weight: 600;
  font-size: .9375rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
}

.mesure { max-width: 60ch; }

/* --------------------------------------------------------------------------
   4. FOCUS — un seul style, valide sur noir ET sur craie
   Le jaune seul ne fait que 1,08:1 sur craie : c'est le liseré noir qui lui
   donne son contraste. Le jaune assure le contraste sur fond sombre.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--c-jaune);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--c-noir);
  border-radius: 1px;
}
/* `outline: none` est interdit dans tout le projet. */

.saut-contenu {
  position: absolute;
  left: var(--e-4); top: var(--e-3);
  z-index: 300;
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: var(--e-3) var(--e-4);
  background: var(--c-jaune); color: var(--c-noir);
  transform: translateY(-160%);
  transition: transform var(--d-rapide) ease-out;
}
.saut-contenu:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   5. MISE EN PAGE
   -------------------------------------------------------------------------- */
.enveloppe {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--e-gouttiere);
}

.section { padding-block: var(--e-section); position: relative; }
.section[id] { scroll-margin-top: calc(var(--entete-h) + 8px); }

/* La seule respiration claire du site : la pose à domicile. */
.section--craie { background: var(--c-craie); color: var(--c-encre); }
.section--craie .t-chapo { color: var(--c-gris-encre); }
.section--craie .t-surtitre { color: var(--c-jaune-fonce); }

/* Ouverture de section : marqueur + surtitre, puis grand titre. */
.ouverture { margin-bottom: var(--e-8); }
.ouverture__sur {
  display: flex; align-items: center; gap: var(--e-3);
  color: var(--signal);
  margin-bottom: var(--e-5);
}
.section--craie .ouverture__sur { color: var(--c-jaune-fonce); }
.ouverture__sur svg { flex: none; }

/* --------------------------------------------------------------------------
   6. MOTIF SIGNATURE — l'étoile d'impact, trois emplois
   Extraite de impact-macro.jpg. Un seul motif, décliné.
   -------------------------------------------------------------------------- */

/* 6.1 — Le marqueur, devant chaque surtitre. */
.impact { width: 13px; height: 13px; }
.impact line, .impact path { stroke: currentColor; stroke-width: 1.2; }
.impact circle { fill: currentColor; }

/* 6.2 — La fêlure, en séparateur de blocs. */
.felure { width: 100%; height: 30px; display: block; }
.felure__base { stroke: var(--c-bord); stroke-width: 1; }
.felure__eclat { stroke: var(--signal); stroke-width: 1; fill: none; }
.felure__pt { fill: var(--signal); }

/* 6.3 — Le filigrane, derrière les grands chiffres. */
.filigrane { position: relative; display: inline-grid; place-items: center; }
.filigrane > svg {
  position: absolute;
  width: 210%; height: 210%;
  opacity: .22;
  pointer-events: none;
}
.filigrane > svg path { stroke: var(--signal); stroke-width: .55; fill: none; }
.filigrane > * { position: relative; }
.section--craie .filigrane > svg path { stroke: var(--c-jaune-fonce); }

/* --------------------------------------------------------------------------
   7. RÉVÉLATIONS AU DÉFILEMENT
   L'état masqué n'est appliqué QUE si le script a marqué le document.
   Sans JavaScript, aucune de ces règles ne s'active : tout est visible.
   -------------------------------------------------------------------------- */

/* Bloc : opacité + translation. */
.js .rvl { opacity: 0; transform: translateY(20px); }
.js .rvl.vu {
  opacity: 1; transform: none;
  transition: opacity var(--d-bloc) ease-out, transform var(--d-bloc) ease-out;
}

/* Titre : ligne par ligne, sous masque. */
.js .rvl-titre .ln { display: block; overflow: hidden; }
.js .rvl-titre .ln > i { display: block; font-style: normal; transform: translateY(104%); }
.js .rvl-titre.vu .ln > i { transform: none; transition: transform var(--d-titre) var(--courbe); }
.js .rvl-titre.vu .ln:nth-child(2) > i { transition-delay: 70ms; }
.js .rvl-titre.vu .ln:nth-child(3) > i { transition-delay: 140ms; }
.js .rvl-titre.vu .ln:nth-child(4) > i { transition-delay: 210ms; }

/* Grand chiffre. */
.js .rvl-chiffre { opacity: 0; transform: translateY(24px); }
.js .rvl-chiffre.vu {
  opacity: 1; transform: none;
  transition: opacity var(--d-chiffre) ease-out, transform var(--d-chiffre) var(--courbe);
}
.js .rvl-chiffre.vu:nth-of-type(2) { transition-delay: 90ms; }
.js .rvl-chiffre.vu:nth-of-type(3) { transition-delay: 180ms; }
.js .rvl-chiffre.vu:nth-of-type(4) { transition-delay: 270ms; }

/* --------------------------------------------------------------------------
   8. EN-TÊTE
   -------------------------------------------------------------------------- */
.entete {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(10,10,10,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-bord);
}
.entete__in {
  display: flex; align-items: center; justify-content: flex-start;
  gap: var(--appel-gap); min-height: var(--entete-h);
}
.marque { display: flex; align-items: center; gap: var(--e-3); min-height: 44px; flex: none; }
.ecusson {
  width: 34px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--c-jaune); color: var(--c-noir);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  font-family: 'Big Shoulders Display', 'Big Shoulders Repli', sans-serif;
  font-weight: 800; font-size: .8125rem; letter-spacing: .02em;
  padding-bottom: 7px;
}
.marque__nom {
  font-family: 'Big Shoulders Display', 'Big Shoulders Repli', sans-serif;
  font-weight: 800; font-size: 1.125rem; text-transform: uppercase;
  line-height: 1; letter-spacing: .005em;
}
.marque__metier { display: block; color: var(--texte-2); margin-top: 3px; }

.nav__liste { display: flex; align-items: center; gap: var(--e-5); }
.nav__lien {
  color: var(--texte-2); font-size: .8125rem;
  font-family: 'IBM Plex Mono', 'Plex Mono Repli', monospace;
  text-transform: uppercase; letter-spacing: .12em;
  padding-block: var(--e-2);
  border-bottom: 1px solid transparent;
  transition: opacity var(--d-rapide) ease-out;
}
.nav__lien:hover { color: var(--texte); }
.nav__lien[aria-current="true"] { color: var(--signal); border-bottom-color: var(--signal); }

.nav__bascule {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--c-bord-champ);
  flex: none;
}

/* --------------------------------------------------------------------------
   8 bis. BLOC D'APPEL — composant
   Signalé deux fois par le client comme « pas bien droit ». Mesure faite :
   les boîtes étaient alignées (centres à 39 px, hauteurs à 44), mais les
   ÉCARTS étaient irréguliers — 82 px, puis 12, puis 8. Cause : `.appel`
   portait `margin-left: auto` alors que le parent était en `space-between`.
   Les deux mécanismes se contredisaient et l'espace résiduel s'accumulait
   en un seul point.

   Reprise : une grille nommée à un seul `column-gap` et un seul `row-gap`.
   Les écarts sont donc réguliers par construction, non par réglage.
   -------------------------------------------------------------------------- */
.appel {
  display: grid;
  grid-template-areas:
    "mobile wa"
    "fixe   wa";
  grid-template-columns: auto auto;
  column-gap: var(--appel-gap);
  row-gap: var(--e-1);
  align-items: center;
  justify-items: end;
  flex: none;
}

.appel__num  { grid-area: mobile; }
.appel__fixe { grid-area: fixe; }
.appel__wa   { grid-area: wa; align-self: center; }

/* Les deux liens partagent la même structure : icône ou étiquette, puis
   chiffres. Hauteur de cible identique, donc centres verticaux confondus. */
.appel__num,
.appel__fixe {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  white-space: nowrap;
  transition: opacity var(--d-rapide) ease-out;
}
.appel__num:hover, .appel__fixe:hover { opacity: .85; }

.appel__chiffres {
  font-family: 'Big Shoulders Display', 'Big Shoulders Repli', sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.005em;
  font-variant-numeric: lining-nums tabular-nums;
  /* Big Shoulders place le centre optique de ses capitales au-dessus du
     centre de la boîte de ligne. Sans cette correction, un centrage
     géométriquement juste paraît décalé vers le haut. Valeur mesurée. */
  transform: translateY(.045em);
}

.appel__num  { color: var(--c-jaune); }
.appel__num .appel__chiffres  { font-size: clamp(1.3rem, 4.2vw, 1.9rem); }

.appel__fixe { color: var(--c-gris); }
.appel__fixe .appel__chiffres { font-size: clamp(.9rem, 2.8vw, 1.15rem); }
.appel__fixe:hover { color: var(--c-blanc); }
.appel__k { color: var(--c-bord-champ); }

.appel__ico { width: 17px; height: 17px; flex: none; }

.appel__wa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--c-bord-champ);
  color: var(--c-blanc);
  /* `opacity` seule : animer `border-color` déclencherait un repaint et
     contrevient au principe IV. Le changement de bordure reste instantané. */
  transition: opacity var(--d-rapide) ease-out;
}
.appel__wa svg { width: 20px; height: 20px; }
.appel__wa:hover { opacity: .85; border-color: var(--c-jaune); }

/* Très petits écrans : l'icône de téléphone cède la place aux chiffres, et
   l'étiquette « Fixe » disparaît — le second numéro reste identifiable par
   sa taille et sa couleur, et son aria-label le nomme. */
@media (max-width: 379px) {
  :root { --appel-gap: 12px; }
  .appel__ico { display: none; }
  .appel__k { display: none; }
}

/* --------------------------------------------------------------------------
   8 ter. NAVIGATION ET RÉPARTITION DE L'EN-TÊTE
   Un seul `margin-inline-start: auto` sépare le groupe gauche du groupe
   droit. C'est le mécanisme idiomatique ; le défaut venait de l'avoir
   combiné avec `space-between`, pas de l'avoir employé.
   -------------------------------------------------------------------------- */
.appel { margin-inline-start: auto; }

/* Sans JavaScript, la navigation reste visible et dans le flux. */
.js .nav--repliable { display: none; }
.js .nav--repliable.ouvert { display: block; }
html:not(.js) .nav__bascule { display: none; }

@media (max-width: 899px) {
  /* La marque se réduit à l'écusson : le numéro doit dominer, et il n'y a pas
     la place pour les deux à pleine taille sur 360 px. */
  .marque__nom, .marque__metier { display: none; }

  .nav--repliable {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--c-noir-2);
    border-bottom: 1px solid var(--c-bord);
    padding: var(--e-4) var(--e-gouttiere) var(--e-5);
  }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lien { padding-block: var(--e-4); border-bottom: 1px solid var(--c-bord); }

  html:not(.js) .entete { position: static; }
  html:not(.js) .entete__in { flex-wrap: wrap; padding-bottom: var(--e-3); }
  html:not(.js) .nav--repliable {
    position: static; flex-basis: 100%; background: none; border: 0; padding: 0;
  }
  html:not(.js) .nav__liste { flex-direction: row; flex-wrap: wrap; gap: var(--e-4); }
  html:not(.js) .nav__lien { border: 0; padding-block: var(--e-2); }
}

@media (min-width: 900px) {
  .nav__bascule { display: none; }
  .js .nav--repliable { display: block; }
  /* Au-delà, c'est la navigation qui prend la séparation : le bloc d'appel
     la suit avec l'écart normal, au lieu d'être isolé au bord droit. */
  .nav--repliable { margin-inline-start: auto; }
  .appel { margin-inline-start: 0; }
}

/* --------------------------------------------------------------------------
   9. PREMIER ÉCRAN
   Pleine hauteur. AUCUNE révélation ici : tout est peint au premier rendu.
   Sous 700 px de hauteur, c'est le TITRE qui rétrécit — jamais l'offre,
   jamais les actions.
   -------------------------------------------------------------------------- */
.accueil {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: flex-end;
  padding-top: var(--entete-h);
  /* Le contenu est aligné en bas : sans cette réserve, les actions passent
     derrière la barre d'appel fixe. Constaté à 360 × 640. */
  padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}
@media (min-width: 900px) { .accueil { padding-bottom: 0; } }
.accueil__fond { position: absolute; inset: 0; z-index: 0; }
.accueil__fond img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.accueil__fond::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,10,10,.72) 0%, rgba(10,10,10,.30) 34%, rgba(10,10,10,.86) 78%, var(--c-noir) 100%),
    linear-gradient(100deg, rgba(10,10,10,.80) 0%, rgba(10,10,10,.30) 62%, transparent 100%);
}
/* Rythme vertical propre au bandeau, indexé sur la hauteur d'écran. Les gaps
   de l'échelle générale (32 px fixes) faisaient déborder le bandeau de 36 px
   à 1280 × 720 : la preuve sociale passait sous la ligne de flottaison. */
.accueil { --e-h: clamp(12px, 2.6vh, 32px); }
.accueil__in {
  position: relative; z-index: 1; width: 100%;
  padding-block: clamp(20px, 4vh, 96px) clamp(20px, 4vh, 64px);
}
.accueil__sur { display: flex; align-items: center; gap: var(--e-3); color: var(--signal); margin-bottom: var(--e-4); }

.accueil h1 { max-width: 15ch; }
.accueil h1 em { font-style: normal; display: block; color: var(--signal); }

.accueil__offre {
  display: inline-block;
  margin-top: var(--e-h);
  background: var(--c-jaune); color: var(--c-noir);
  padding: var(--e-3) var(--e-4);
  font-family: 'Big Shoulders Display', 'Big Shoulders Repli', sans-serif;
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.25rem, 4.6vw, 1.75rem);
  line-height: 1; letter-spacing: -.01em;
}
.accueil__precision { display: block; margin-top: var(--e-2); color: var(--texte-2); font-size: .9375rem; }
.accueil__dom { margin-top: var(--e-h); max-width: 34ch; }
.accueil__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-h); }

.preuves {
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5);
  margin-top: var(--e-h); padding-top: var(--e-h);
  border-top: 1px solid var(--c-bord);
  color: var(--texte-2);
}
.preuves li { display: flex; align-items: center; gap: var(--e-2); }
.preuves b { color: var(--texte); }
.preuves .pt { width: 5px; height: 5px; background: var(--signal); flex: none; }

/* Arbitrage validé par le client : sous 700 px de hauteur, c'est le TITRE qui
   rétrécit. L'offre, les actions et la mention domicile gardent leur taille —
   ce sont elles qui convertissent. */
@media (max-height: 700px) {
  .accueil h1 { font-size: clamp(1.9rem, min(10vw, 9vh), 3.2rem); }
  .accueil__offre { font-size: clamp(1.15rem, 4vw, 1.4rem); }
}

/* Sur téléphone, la barre d'appel fixe occupe les 76 px du bas : la preuve
   sociale y disparaîtrait. On la sort du premier écran plutôt que de la
   laisser masquée. La note 5,0 / 276 reste affichée en grand section Avis. */
@media (max-width: 899px) and (max-height: 760px) {
  .preuves { display: none; }
}
@media (max-height: 600px) {
  .accueil h1 { font-size: clamp(1.7rem, min(9vw, 8vh), 2.6rem); }
  .accueil__dom { display: none; }   /* redite du bandeau de preuve */
}
@media (min-width: 900px) {
  .accueil h1 { max-width: 13ch; }
}

/* --------------------------------------------------------------------------
   10. ACTIONS
   -------------------------------------------------------------------------- */
.action {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 50px; min-width: 44px;
  padding: var(--e-3) var(--e-5);
  border-radius: 0;
  transition: opacity var(--d-rapide) ease-out, transform var(--d-rapide) ease-out;
}
.action--p { background: var(--c-jaune); color: var(--c-noir); }
.action--s { border: 1px solid var(--c-bord-champ); color: var(--texte); }
.section--craie .action--s { border-color: var(--c-gris-encre); color: var(--c-encre); }
.action:hover { opacity: .86; }
.action:active { transform: translateY(1px); }
.action svg { width: 17px; height: 17px; flex: none; }

/* --------------------------------------------------------------------------
   11. PHOTOGRAPHIE PLEIN CADRE
   -------------------------------------------------------------------------- */
.plein {
  position: relative;
  overflow: hidden;
  background: var(--c-noir);
}
.plein img {
  width: 100%;
  height: clamp(280px, 56vw, 620px);
  object-fit: cover;
  will-change: auto;
}
.plein--large img { height: clamp(200px, 34vw, 420px); }   /* impact macro, 21:9 */
.plein::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,10,10,.34), transparent 30%, transparent 62%, rgba(10,10,10,.5));
}
.plein__legende {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--e-5) var(--e-gouttiere);
  color: var(--texte-2);
}

/* Crédit d'image — principe IX. Discret, mais présent partout où une image
   d'illustration pourrait être prise pour une photographie du client. */
.credit { color: var(--c-gris-encre); margin-top: var(--e-2); }
.credit--accueil {
  position: absolute; right: var(--e-gouttiere); bottom: var(--e-4); z-index: 2;
  color: var(--c-gris); opacity: .55;
}
.section--craie .credit { color: var(--c-gris-encre); }

/* --------------------------------------------------------------------------
   12. PRESTATIONS
   -------------------------------------------------------------------------- */
/* Tête de pôle. Les deux pôles sont de longueurs très inégales (3 contre 6
   entrées) : ils sont donc empilés et non mis en colonnes, ce qui éviterait
   une colonne à moitié vide. */
.pole { margin-top: var(--e-8); }
.pole:first-of-type { margin-top: 0; }
.pole__titre {
  display: flex; align-items: baseline; gap: var(--e-4);
  flex-wrap: wrap;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
}
.pole__n { color: var(--signal); flex: none; }

.prestations { border-top: 1px solid var(--c-bord); margin-top: var(--e-5); }
.prestation {
  display: grid; gap: var(--e-3);
  padding-block: var(--e-6);
  border-bottom: 1px solid var(--c-bord);
}
.prestation__num { color: var(--texte-2); }
.prestation__txt { color: var(--texte-2); }
/* Pictogramme de prestation. Dessiné dans la grammaire du jeu d'icônes du
   site : grille 24, tracé plein, couleur héritée. Il est indexé sur le corps
   du titre, jamais sur une taille fixe, pour suivre le clamp typographique.
   Le décalage vertical rattrape le centre optique : le titre est en Big
   Shoulders, dont les capitales ne sont pas centrées dans leur boîte. */
.prestation__ico {
  /* La remise à zéro met TOUS les svg en `display: block`. Sans cette ligne,
     le pictogramme prend sa propre ligne et le titre passe de 27 à 42 px de
     haut. Constaté à la mesure, pas supposé. */
  display: inline-block;
  width: .82em;
  height: .82em;
  margin-right: .38em;
  vertical-align: -.04em;
  flex: none;
}
.prestation__lieu {
  justify-self: start;
  margin-top: var(--e-2);
  padding: var(--e-1) var(--e-3);
  border: 1px solid currentColor;
}
/* La disponibilité est portée par le TEXTE, jamais par la couleur seule. */
.prestation__lieu--dom { color: var(--signal); }
.prestation__lieu--atl { color: var(--texte-2); }

@media (min-width: 760px) {
  .prestation {
    grid-template-columns: 4rem 1fr 12rem;
    align-items: baseline;
    gap: var(--e-5);
  }
  .prestation__lieu { justify-self: end; margin-top: 0; }
}

/* Bloc distinctif de la cabine de peinture. Traité comme un argument, pas
   comme une ligne de liste. Aucune photographie ne documente ce pôle : la
   distinction passe donc par la typographie et le chant jaune. */
.cabine {
  margin-top: var(--e-8);
  border-left: 4px solid var(--signal);
  padding: var(--e-6) var(--e-6) var(--e-6) var(--e-5);
  background: var(--c-noir-2);
}
.cabine__sur { display: flex; align-items: center; gap: var(--e-3); color: var(--signal); }
.cabine__t { margin-top: var(--e-4); }
.cabine__d { margin-top: var(--e-4); color: var(--texte-2); max-width: 46ch; }
.cabine__fig { margin-top: var(--e-6); }
.cabine__fig img { border: 1px solid var(--c-bord); }
@media (min-width: 860px) {
  .cabine {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--e-8); align-items: center;
    padding-block: var(--e-7);
  }
  .cabine__fig { margin-top: 0; }
}

/* Visuel intercalé dans une section, borné à la largeur du contenu — par
   opposition aux photographies plein cadre, qui débordent l'enveloppe. */
.visuel { margin-top: var(--e-8); }
.visuel img {
  border: 1px solid var(--c-bord);
  width: 100%;
  height: clamp(200px, 38vw, 420px);
  object-fit: cover;
}

/* Engagements — quatre mentions en texte. Aucune icône : la rangée d'icônes
   génériques est un motif proscrit. Quatre colonnes, pas trois. */
.engagements {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
  margin-top: var(--e-8);
  padding-top: var(--e-6);
  border-top: 1px solid var(--c-bord);
}
.engagements li { display: flex; align-items: baseline; gap: var(--e-3); }
.engagements__n { color: var(--signal); flex: none; }
@media (min-width: 620px)  { .engagements { grid-template-columns: 1fr 1fr; gap: var(--e-5); } }
@media (min-width: 1000px) { .engagements { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   13. POSE À DOMICILE — la bande claire
   -------------------------------------------------------------------------- */
.domicile__grille { display: grid; gap: var(--e-7); }
@media (min-width: 900px) {
  .domicile__grille { grid-template-columns: 1.05fr .95fr; gap: var(--e-9); align-items: center; }
}
.domicile__photo { border: 1px solid #DAD8D0; }
.domicile__chiffres { display: flex; flex-wrap: wrap; gap: var(--e-7); margin-top: var(--e-7); }
.section--craie .chiffre__v { color: var(--c-jaune-fonce); }
.section--craie .chiffre__l { color: var(--c-gris-encre); }

/* Bandeau défilant des zones — s'arrête au survol ET au focus. */
.defile {
  overflow: hidden;
  border-block: 1px solid var(--c-bord);
  background: var(--c-noir-2);
  padding-block: var(--e-4);
}
.defile__piste {
  display: flex; width: max-content; gap: var(--e-6);
  animation: glisse 45s linear infinite;
}
.defile__piste li { display: flex; align-items: center; gap: var(--e-6); color: var(--texte-2); white-space: nowrap; }
.defile__piste li::after { content: ""; width: 5px; height: 5px; background: var(--signal); flex: none; }
/* Marqueur de rupture géographique. Le bandeau enchaîne deux ensembles qui
   n'ont rien à voir : sans étiquette, la lecture continue laisserait croire à
   une zone unique. La distinction passe par le texte, la couleur ne fait que
   l'appuyer. */
.defile__piste li.defile__zone { color: var(--texte); }
.defile:hover .defile__piste,
.defile:focus-within .defile__piste { animation-play-state: paused; }
@keyframes glisse { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   14. ASSURANCE — parcours 01 → 04
   -------------------------------------------------------------------------- */
.parcours { display: grid; gap: var(--e-7); }
@media (min-width: 700px)  { .parcours { grid-template-columns: 1fr 1fr; gap: var(--e-8) var(--e-7); } }
@media (min-width: 1080px) { .parcours { grid-template-columns: repeat(4, 1fr); gap: var(--e-6); } }

.etape { border-top: 1px solid var(--c-bord); padding-top: var(--e-5); }
.etape__num { color: var(--signal); margin-bottom: var(--e-4); }
.etape__t { margin-bottom: var(--e-3); }
.etape__d { color: var(--texte-2); font-size: .9375rem; }

.offre-encart {
  margin-top: var(--e-9);
  background: var(--c-jaune); color: var(--c-noir);
  padding: var(--e-7) var(--e-6);
  display: grid; gap: var(--e-4);
}
@media (min-width: 760px) {
  .offre-encart { grid-template-columns: auto 1fr; align-items: center; gap: var(--e-8); }
}
.offre-encart .t-chiffre { color: var(--c-noir); }
.offre-encart p { font-weight: 600; }
/* « Sous conditions » : visible, mais nettement en retrait de l'offre.
   Sur l'aplat jaune, un noir à 62 % d'opacité donne encore 8,4:1 — très
   au-dessus du seuil AA — tout en marquant la hiérarchie. */
.offre-encart__note {
  display: block;
  margin-top: var(--e-2);
  font-weight: 400;
  font-size: .8125rem;
  color: rgba(10, 10, 10, .62);
}

/* --------------------------------------------------------------------------
   15. AVIS
   -------------------------------------------------------------------------- */
.note { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-4); }
.chiffre__v { display: block; color: var(--signal); }
.chiffre__l { display: block; margin-top: var(--e-3); color: var(--texte-2); }
.etoiles { color: var(--signal); letter-spacing: .1em; font-size: 1.125rem; }

.avis-liste { display: grid; gap: var(--e-6); margin-top: var(--e-8); }
@media (min-width: 900px) { .avis-liste { grid-template-columns: repeat(3, 1fr); gap: var(--e-7); } }
.avis {
  border-top: 1px solid var(--c-bord);
  padding-top: var(--e-5);
  display: grid; gap: var(--e-4);
}
.avis blockquote { color: var(--texte); font-size: .9375rem; line-height: 1.62; }
.avis figcaption { color: var(--texte-2); }
.avis__nom { color: var(--texte); }

.avis-lien {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: var(--e-7);
  color: var(--signal);
  border-bottom: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   16. CONTACT
   -------------------------------------------------------------------------- */
.contact__grille { display: grid; gap: var(--e-8); }
@media (min-width: 960px) { .contact__grille { grid-template-columns: 1fr 1fr; gap: var(--e-9); align-items: start; } }
.contact__photo { border: 1px solid var(--c-bord); }

.coord { display: grid; gap: var(--e-5); margin-top: var(--e-6); }
.coord__l { display: flex; gap: var(--e-4); align-items: flex-start; }
.coord__i { color: var(--signal); flex: none; width: 18px; height: 18px; margin-top: 4px; }
.coord__k { display: block; color: var(--texte-2); margin-bottom: var(--e-1); }
.coord__v { font-size: 1.0625rem; font-weight: 600; }
a.coord__v {
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 1px solid var(--c-bord-champ);
}
a.coord__v:hover { border-bottom-color: var(--signal); }
.coord__2 { display: flex; }
.reseaux { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.reseaux a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--c-bord-champ);
  font-size: .8125rem;
}
.reseaux a:hover { border-color: var(--signal); }

/* --------------------------------------------------------------------------
   17. FORMULAIRE
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--e-5); margin-top: var(--e-6); }
.champ { display: grid; gap: var(--e-2); }
.champ label, .groupe legend { color: var(--texte-2); }
.champ input, .champ textarea {
  width: 100%; min-height: 50px;
  padding: var(--e-3) var(--e-4);
  font: inherit; font-size: 16px;   /* sous 16 px, iOS zoome à la mise au point */
  color: var(--texte);
  background: var(--c-noir-2);
  border: 1px solid var(--c-bord-champ);   /* jamais --c-bord : 1,38:1 */
  border-radius: 0;
}
.champ textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
.groupe { border: 0; display: grid; gap: var(--e-3); }
.groupe__opts { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.opt {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 50px; padding: var(--e-2) var(--e-4);
  border: 1px solid var(--c-bord-champ); cursor: pointer;
}
.opt input { width: 17px; height: 17px; accent-color: var(--c-jaune); }
.opt:has(input:checked) { border-color: var(--signal); background: var(--c-noir-2); }

/* Piège à spam — retiré par positionnement, JAMAIS display:none. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.confirmation {
  display: none;
  background: var(--c-jaune); color: var(--c-noir);
  padding: var(--e-4) var(--e-5); font-weight: 600;
  margin-bottom: var(--e-5);
}
.confirmation.visible { display: block; }
.mention { color: var(--texte-2); font-size: .8125rem; }

/* --------------------------------------------------------------------------
   18. BARRE D'APPEL FIXE
   -------------------------------------------------------------------------- */
.barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
  display: flex; gap: var(--e-2);
  min-height: var(--barre-h);
  padding: var(--e-3);
  padding-bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
  background: var(--c-noir-2);
  border-top: 1px solid var(--c-bord);
}
.barre .action { flex: 1; min-height: 50px; padding-inline: var(--e-3); white-space: nowrap; }
.barre .action--s { flex: 0 0 auto; padding-inline: var(--e-4); }
@media (max-width: 359px) { .barre__num { display: none; } }
@media (min-width: 900px) { .barre { display: none; } body { padding-bottom: 0; } }

/* --------------------------------------------------------------------------
   19. PIED DE PAGE
   -------------------------------------------------------------------------- */
.pied {
  border-top: 1px solid var(--c-bord);
  padding-block: var(--e-7);
  color: var(--texte-2); font-size: .875rem;
}
.pied__val { color: var(--signal); margin-top: var(--e-3); }
/* Signature d'entreprise — composée en grand, elle ferme la page. */
.pied__signature {
  color: var(--signal);
  margin-top: var(--e-6);
  font-size: clamp(1.5rem, 5vw, 2.6rem);
}

/* --------------------------------------------------------------------------
   20. UTILITAIRES
   -------------------------------------------------------------------------- */
.hors-ecran {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   21. MOUVEMENT RÉDUIT
   Annule TOUTES les animations de défilement. La page reste complète :
   aucun contenu ne dépend d'une animation pour devenir visible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .rvl, .js .rvl-chiffre { opacity: 1 !important; transform: none !important; }
  .js .rvl-titre .ln > i { transform: none !important; }
  .defile__piste { animation: none !important; }
  .plein img { transform: none !important; }
}

/* --------------------------------------------------------------------------
   21. PAGES LÉGALES — texte long
   Tout ici est DÉRIVÉ. Aucune déclaration n'entre dans :root, aucune couleur,
   aucune famille et aucune durée nouvelle n'est introduite. Les classes de
   titre (.t-titre, .t-intertitre) et les pas d'espacement (--e-*) sont ceux
   de la page d'accueil, employés tels quels.
   -------------------------------------------------------------------------- */
.legal { padding-block: var(--e-8) var(--e-9); }

/* Mesure de lecture. Dérivée de `.mesure` (60ch), même mécanique et même
   unité — mais calibrée par la mesure, pas par le calcul.
   `ch` vaut la chasse du zéro, plus large qu'un caractère français moyen :
   à 64ch, une phrase réelle des mentions légales tenait à 80 caractères par
   ligne, au-dessus du plafond de 75.
   La chasse variant d'une phrase à l'autre, trois phrases réelles des deux
   pages ont servi de sonde. À 54ch elles tiennent en 69, 73 et 70 caractères :
   toutes dans la fourchette 65–75 demandée. */
.legal__corps { max-width: 54ch; }

/* Rythme vertical. L'écart entre sections (--e-8) est très supérieur à
   l'interligne du corps : c'est lui qui donne la respiration demandée. */
.legal__corps > * + * { margin-top: var(--e-5); }
.legal__corps > h2 { margin-top: var(--e-8); }
.legal__corps > h3 { margin-top: var(--e-7); }
.legal__corps > h2 + *, .legal__corps > h3 + * { margin-top: var(--e-4); }

/* Un filet sous chaque titre de section, comme les listes de prestations de
   l'accueil : même couleur de séparateur décoratif, même rôle. */
.legal__corps > h2 {
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--c-bord);
}

/* Les listes retrouvent leurs puces : la remise à zéro les avait ôtées pour
   les listes de navigation, mais un texte légal en a besoin. */
.legal__corps ul { list-style: disc; padding-left: 1.4em; }
.legal__corps li + li { margin-top: var(--e-2); }

/* Liens dans le corps. Même traitement que les coordonnées de la section
   contact : soulignement porteur d'information, jamais la couleur seule. */
.legal__corps a {
  border-bottom: 1px solid var(--c-bord-champ);
}
.legal__corps a:hover { border-bottom-color: var(--signal); }

/* Retour vers l'accueil, en haut et en bas. Cible tactile pleine. */
.legal__retour {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 44px;
  color: var(--texte-2);
}
.legal__retour:hover { color: var(--texte); }
.legal__bas { margin-top: var(--e-9); padding-top: var(--e-6); border-top: 1px solid var(--c-bord); }

/* Lien dans une mention de formulaire. La remise à zéro ôte le soulignement
   à tous les liens : sans cette règle, le lien vers la confidentialité serait
   indiscernable du texte qui l'entoure — donc invisible et jamais cliqué.
   Bloc à part pour que la cible tactile fasse ses 44 px sans étirer la
   ligne de texte. */
/* Lien DANS le fil de la phrase — et non libellé posé en fin de ligne.
   Un `min-height` en `inline-flex` casserait ici la ligne : mesuré, il portait
   le paragraphe à 69 px et décalait la ligne de base du lien de 15 px sous
   celle du point final. La cible tactile vient donc d'un `padding-block`, qui
   agrandit la zone cliquable sans toucher à la hauteur de ligne. */
.mention a {
  display: inline;
  /* 16 px de corps de ligne + 2 × 14 = 44 px de zone cliquable, mesurée par
     test de touche sur toute la hauteur. */
  padding-block: 14px;
  color: var(--texte);
  border-bottom: 1px solid var(--c-bord-champ);
}
.mention a:hover { border-bottom-color: var(--signal); }

/* Liens légaux du pied de page. Discrets — ils reprennent la couleur de texte
   secondaire du pied — mais soulignés, donc repérables sans la couleur, et
   hauts de 44 px pour être atteints au doigt. */
.pied__legal {
  display: flex; flex-wrap: wrap;
  gap: 0 var(--e-6);
  /* Sous la signature composée en grand, un simple écart ne suffirait pas à
     marquer la subordination : le filet la porte. Même couleur de séparateur
     décoratif que le `border-top` du pied lui-même. */
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid var(--c-bord);
}
.pied__legal a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--c-bord-champ);
}
.pied__legal a:hover { border-bottom-color: var(--signal); color: var(--texte); }

/* --------------------------------------------------------------------------
   22. IMPRESSION
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; padding-bottom: 0; }
  .entete, .barre, .accueil__fond, .plein, .felure, .form, .defile { display: none; }
  .accueil { min-height: auto; }
  .section { padding-block: 12pt; }
  .section--craie, .offre-encart { background: #fff; color: #000; }
  .chiffre__v, .etape__num, .avis-lien, .pied__val, .ouverture__sur { color: #000; }
  a[href^="tel:"]::after, a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}