/* GARAGE LAURET — feuille unique.
   Direction « atelier clair & bleu acier ».

   Trois règles tenues partout, et c'est d'elles que vient la cohérence :

   1. LES DEUX ACCENTS ONT CHACUN LEUR SENS, ET NE DÉCORENT RIEN.
      LE BLEU ACIER DIT CE QUI COÛTE DE L'ARGENT : la zone endommagée sur le
      schéma, le taux horaire, le prix, la donnée chiffrée.
      L'AMBRE DIT CE QUI COÛTE DU TEMPS : le délai de pièce, l'immobilisation,
      la corrosion — qui n'est que le temps passé sur de la tôle.
      Les boutons d'action restent en graphite. Un accent qui ne veut rien
      dire, c'est un fond d'écran de logiciel.
   2. TOUT NOMBRE QUE LE CLIENT PEUT SE VOIR FACTURER EST EN MONO — taux, temps
      barémés, prix, délais, codes de zone. La mono est la signalétique du
      chiffre, pas un effet de style.
   3. UNE SEULE FAMILLE DE TITRAGE, TRAVAILLÉE SUR SON AXE DE LARGEUR. Archivo
      en 118 % pour les titres — le registre des plaques constructeur et des
      étiquettes de pression de pneus — et en largeur normale pour le texte.

   Aucune ombre portée, aucun arrondi, aucun dégradé. */

/* ── Jetons ──────────────────────────────────────────────────────────────── */

:root {
  --fond: #f4f6f7;
  --surface: #e8ecef;
  --blanc: #ffffff;
  --encre: #191d21;
  --encre-2: #4c555c; /* texte secondaire sur clair — 7,4:1 */
  --acier: #1f6fa8;        /* l'argent : le dégât, le chiffre, la donnée */
  --acier-clair: #6fa8cf;  /* le même, sur fond sombre */
  --acier-profond: #123a57; /* la bande des délais */
  --ambre: #c9761f;        /* le temps : le délai, l'immobilisation, la rouille */
  --ambre-clair: #e8a45c;  /* le même, sur fond sombre */
  --ambre-pale: #f6efe6;   /* bandeau tiède, en aplat */
  --rouille: #40251a;      /* la section corrosion */
  --alu: #9aa7b0;     /* filets et plaques — jamais de texte courant */
  --filet: #cdd5da;
  --filet-sombre: rgba(244, 246, 247, 0.2);
  --alerte: #a8442b;

  --titre: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texte: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --marge: clamp(1.25rem, 4vw, 3.5rem);
  --largeur: 1280px;
  --etroit: 44rem;
  --section: clamp(3.6rem, 8vw, 7rem);

  --vif: 0.18s ease;
  --plaque-fond: var(--fond);
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre-2);
  font-family: var(--texte);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--acier);
  outline-offset: 2px;
}

.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--encre);
  color: var(--blanc);
  padding: 0.8rem 1.3rem;
  text-decoration: none;
}
.saut:focus {
  left: 0;
}

/* ── Rythme ──────────────────────────────────────────────────────────────── */

.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding-inline: var(--marge);
}
.enveloppe--etroite {
  max-width: calc(var(--etroit) + 2 * var(--marge));
}
.section {
  padding-block: var(--section);
}
.section__entete {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}

/* ── La bande d'atelier ────────────────────────────────────────────────────
   Le marquage au sol d'un atelier : diagonales ambre et graphite, arêtes
   franches. Ce n'est pas un dégradé — c'est un aplat à deux couleurs répété.
   Elle ne coiffe que les deux sections qui parlent d'un risque : le délai et
   la corrosion. Ailleurs, elle ne voudrait rien dire. */

.bande-atelier {
  position: relative;
}
.bande-atelier::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 10px;
  background: repeating-linear-gradient(
    -45deg,
    var(--ambre) 0 12px,
    var(--encre) 12px 24px
  );
}

/* ── Étiquettes ── Le surtitre est un code, pas un numéro d'ordre. ───────── */

.etiquette {
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-2);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.etiquette::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  background: var(--alu);
  flex: none;
}
.etiquette--acier {
  color: var(--acier);
}
.etiquette--acier::before {
  background: var(--acier);
}

/* ── Titres ── Archivo poussée sur son axe de largeur. ───────────────────── */

.titre {
  margin: 0 0 1.3rem;
  font-family: var(--titre);
  font-stretch: 118%;
  font-weight: 700;
  font-size: clamp(1.65rem, 3.1vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--encre);
  max-width: 20ch;
  text-wrap: balance;
}
.titre--clair {
  color: var(--fond);
}

.texte {
  margin: 0 0 1.1rem;
  max-width: 60ch;
}
.texte p {
  margin: 0 0 1rem;
}
.texte p:last-child {
  margin-bottom: 0;
}
.texte--etroit {
  max-width: 52ch;
}
.texte--clair {
  color: rgba(244, 246, 247, 0.78);
}

/* ── Le chiffre ── Mono, chasse fixe, tout ce qui se facture. ────────────── */

.chiffre {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--encre);
}

.lien-souligne {
  font-weight: 600;
  text-decoration: none;
  color: var(--encre);
  border-bottom: 2px solid var(--acier);
  padding-bottom: 0.15rem;
}
.lien-souligne:hover {
  color: var(--acier);
}

/* ── Boutons ── En graphite : le bleu est réservé à la donnée. ──────────── */

.bouton {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  border: 1.5px solid var(--encre);
  background: transparent;
  color: var(--encre);
  font-family: var(--titre);
  font-stretch: 108%;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--vif), color var(--vif), border-color var(--vif);
}
.bouton--plein {
  background: var(--encre);
  color: var(--fond);
}
.bouton--plein:hover {
  background: var(--acier);
  border-color: var(--acier);
}
.bouton--fantome:hover {
  background: var(--encre);
  color: var(--fond);
}
.bouton--menu {
  padding: 0.55rem 1rem;
  font-size: 0.7rem;
}

/* ── Panneaux ── Une plaque d'étiquette à cheval sur le filet, comme rivée. ─ */

.panneau {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--filet);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.panneau__plaque {
  position: absolute;
  top: 0;
  left: 1.4rem;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 0.7rem;
  background: var(--plaque-fond);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.panneau__note {
  margin: 1.3rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--filet);
  font-size: 0.82rem;
  color: var(--encre-2);
}

/* ── Clichés ─────────────────────────────────────────────────────────────── */

.cliche {
  position: relative;
  margin: 0;
  background: var(--surface);
  overflow: hidden;
  aspect-ratio: var(--ratio, 16 / 9);
  border: 1px solid var(--filet);
}
.cliche img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cliche--portrait {
  --ratio: 4 / 5;
}
.cliche--large {
  --ratio: 16 / 9;
}
.cliche--absent img {
  display: none;
}
.cliche--absent::before {
  content: "";
  position: absolute;
  inset: 0.6rem;
  border: 1px dashed var(--alu);
}
.cliche--absent::after {
  content: attr(data-cadre);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: var(--encre-2);
}

/* ── En-tête ─────────────────────────────────────────────────────────────── */

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--fond);
  border-bottom: 1px solid var(--filet);
}
.entete__barre {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0.9rem var(--marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.entete__marque {
  text-decoration: none;
  display: grid;
  gap: 0.05rem;
}
.entete__nom {
  font-family: var(--titre);
  font-stretch: 118%;
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--encre);
}
.entete__mention {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.entete__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.8rem);
}
.lien-nav {
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--encre-2);
  padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
  transition: color var(--vif), border-color var(--vif);
}
.lien-nav:hover {
  color: var(--encre);
  border-bottom-color: var(--acier);
}
.entete__tel {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--encre);
  white-space: nowrap;
}
.entete__bascule,
.entete__ferme {
  display: none;
  background: transparent;
  border: 1.5px solid var(--encre);
  padding: 0.5rem 0.9rem;
  font-family: var(--titre);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ── Hero ── Le tableau des taux EST l'image ────────────────────────────────
   Fond graphite, et le tableau devient une plaque claire posée dessus : un
   objet vissé au mur de l'atelier, et non un cadre blanc sur fond blanc.
   C'est la seule endroit où les boutons s'inversent — sur du graphite, un
   bouton graphite ne se voit pas. */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--encre) url("../img/hero.webp") center 62% / cover no-repeat;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  --plaque-fond: var(--blanc);
}
/* Un aplat translucide, pas un dégradé : il assombrit la photo uniformément
   pour que le titre tienne partout, y compris là où l'atelier est éclairé.
   Le graphite du fond reste visible dessous si l'image ne charge pas. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(20, 24, 28, 0.74);
}
.hero__grille {
  position: relative;
}
.hero__titre {
  color: var(--fond);
}
.hero__chapo {
  color: rgba(244, 246, 247, 0.76);
}
.hero .etiquette--acier {
  color: var(--acier-clair);
}
.hero .etiquette--acier::before {
  background: var(--acier-clair);
}
.hero .panneau {
  border-color: var(--blanc);
}
/* Sur la photo, l'étiquette cesse de découper le filet : elle devient une
   languette de la plaque elle-même. */
.hero .panneau__plaque {
  color: var(--encre-2);
}
.hero .bouton--plein {
  background: var(--fond);
  border-color: var(--fond);
  color: var(--encre);
}
.hero .bouton--plein:hover {
  background: var(--ambre);
  border-color: var(--ambre);
  color: var(--encre);
}
.hero .bouton--fantome {
  color: var(--fond);
  border-color: rgba(244, 246, 247, 0.45);
}
.hero .bouton--fantome:hover {
  background: var(--fond);
  border-color: var(--fond);
  color: var(--encre);
}
.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__titre {
  margin: 0 0 1.3rem;
  font-family: var(--titre);
  font-stretch: 120%;
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 16ch;
  text-wrap: balance;
}
.hero__chapo {
  margin: 0 0 2rem;
  max-width: 48ch;
  font-size: 1.02rem;
}
.hero__actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.taux {
  margin: 0;
}
.taux__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--filet);
}
.taux__ligne:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.taux__ligne--part {
  margin-top: 0.4rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--encre);
}
.taux dt {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--encre);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.taux__cle {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--blanc);
  background: var(--acier);
  padding: 0.15rem 0.4rem;
  letter-spacing: 0.04em;
}
.taux dd {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  white-space: nowrap;
}
.taux dd span {
  font-size: 0.55em;
  color: var(--encre-2);
}

/* ── Repères ─────────────────────────────────────────────────────────────── */

.reperes {
  background: var(--ambre-pale);
  border-bottom: 1px solid var(--filet);
}
.reperes__liste {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--marge);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.reperes li {
  padding: 1.5rem 1.4rem;
  border-left: 1px solid var(--filet);
  display: grid;
  gap: 0.15rem;
}
.reperes li:first-child {
  border-left: 0;
  padding-left: 0;
}
.reperes strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--encre);
}
.reperes span {
  font-size: 0.8rem;
}

/* ── Le chiffrage ── La signature. ──────────────────────────────────────── */

.chiffrage {
  background: var(--surface);
  border-bottom: 1px solid var(--filet);
  --plaque-fond: var(--surface);
}
.chiffrage__grille {
  margin-top: clamp(2rem, 4vw, 3.2rem);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: start;
}
.panneau--schema {
  padding-top: clamp(1.8rem, 3vw, 2.4rem);
}
.schema__consigne {
  margin: 0 0 1.2rem;
  font-size: 0.84rem;
  color: var(--encre-2);
  min-height: 2.6em;
}
.html-js .schema__consigne strong {
  color: var(--encre);
}

.schema {
  width: 100%;
  height: auto;
  max-width: 26rem;
  margin: 0 auto;
  display: block;
}

/* Décor : ce qui n'est pas cliquable et ne doit pas attirer l'œil. */
.schema__vitre {
  fill: var(--surface);
  stroke: var(--alu);
  stroke-width: 1;
}
.schema__roue {
  fill: var(--alu);
}
/* Le contour repasse par-dessus les panneaux : il referme la silhouette là où
   le découpage a laissé les rectangles à vif. */
.schema__contour {
  fill: none;
  stroke: var(--encre);
  stroke-width: 2.5;
}
.schema__cap {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.22em;
  fill: var(--alu);
}

/* Zones : de vrais boutons, tabulables, avec un état annoncé. */
.zone {
  cursor: default;
}
.html-js .zone {
  cursor: pointer;
}
.zone__forme {
  fill: var(--blanc);
  stroke: var(--alu);
  stroke-width: 1.5;
  transition: fill var(--vif), stroke var(--vif);
}
.zone__code {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  fill: var(--encre-2);
  text-anchor: middle;
  pointer-events: none;
  transition: fill var(--vif);
}
.zone--mince .zone__code {
  font-size: 10px;
}
.html-js .zone:hover .zone__forme {
  fill: var(--surface);
  stroke: var(--encre-2);
}
.zone[aria-pressed="true"] .zone__forme {
  fill: url(#hachure);
  stroke: var(--encre);
  stroke-width: 2;
}
.zone[aria-pressed="true"] .zone__code {
  fill: var(--encre);
  font-weight: 500;
}
.zone:focus {
  outline: none;
}
.zone:focus-visible .zone__forme {
  stroke: var(--acier);
  stroke-width: 3.5;
}

/* ── L'ordre de réparation ── Le résultat n'est pas une carte de prix. ──── */

.panneau--ordre {
  padding-top: clamp(1.8rem, 3vw, 2.4rem);
}
.ordre__vide {
  margin: 0;
  font-size: 0.9rem;
  color: var(--encre-2);
  max-width: 42ch;
}
.ordre__lignes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ligne {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.5rem 0.9rem;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--filet);
}
.ligne:first-child {
  border-top: 1px solid var(--filet);
}
.ligne__code {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--blanc);
  background: var(--encre);
  padding: 0.2rem 0.45rem;
  letter-spacing: 0.04em;
}
.ligne__nom {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--encre);
}
.ligne__retirer {
  background: transparent;
  border: 1px solid var(--filet);
  color: var(--encre-2);
  width: 1.9rem;
  height: 1.9rem;
  line-height: 1;
  cursor: pointer;
  font-size: 1rem;
  transition: border-color var(--vif), color var(--vif);
}
.ligne__retirer:hover {
  border-color: var(--alerte);
  color: var(--alerte);
}
.ligne__degat {
  grid-column: 2 / -1;
}
.ligne__degat select {
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--filet);
  background: var(--fond);
  font-size: 0.86rem;
}
.ligne__degat select:focus {
  outline: none;
  border-color: var(--acier);
}
.ligne__temps {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--encre-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
}
.ligne__temps b {
  font-weight: 500;
  color: var(--acier);
}
/* Une pièce à commander, c'est du délai : la ligne bascule à l'ambre. */
.ligne__temps b.temps--delai {
  color: var(--ambre);
}

.ordre__bilan {
  margin-top: 1.5rem;
}
.ordre__total .etiquette {
  margin-bottom: 0.5rem;
}
.ordre__fourchette {
  margin: 0 0 0.8rem;
  font-family: var(--mono);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--encre);
  letter-spacing: -0.03em;
}
.ordre__a {
  font-family: var(--texte);
  font-size: 0.42em;
  font-weight: 400;
  color: var(--encre-2);
  padding-inline: 0.25em;
  letter-spacing: 0;
}
.ordre__immo {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--ambre-pale);
  border-left: 3px solid var(--ambre);
  font-size: 0.9rem;
  color: var(--encre);
}
.ordre__immo .chiffre {
  font-size: 1.05rem;
  color: var(--ambre);
}
.ordre__mention {
  margin: 0 0 1.3rem;
  font-size: 0.8rem;
  color: var(--encre-2);
  max-width: 46ch;
}
.ordre__suite {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.ordre__aveugle {
  margin: 1.4rem 0 0;
  padding: 1.1rem 1.2rem;
  border-left: 3px solid var(--alerte);
  background: var(--surface);
  font-size: 0.92rem;
  color: var(--encre);
}

/* ── Secours sans JavaScript ─────────────────────────────────────────────── */

.secours {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--filet);
  padding-top: 1.6rem;
  font-size: 0.9rem;
}
.html-js .secours {
  display: none;
}
.secours__titre {
  margin: 0 0 1rem;
  font-weight: 700;
  color: var(--encre);
}
.grille-prix {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.grille-prix caption {
  text-align: left;
  font-size: 0.8rem;
  color: var(--encre-2);
  padding-bottom: 0.6rem;
}
.grille-prix th,
.grille-prix td {
  text-align: right;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--filet);
  font-family: var(--mono);
  font-size: 0.82rem;
}
.grille-prix th[scope="col"] {
  font-weight: 500;
  color: var(--encre);
  border-bottom: 2px solid var(--encre);
}
.grille-prix th:first-child,
.grille-prix td:first-child {
  text-align: left;
  font-family: var(--texte);
}

/* ── Forfaits ────────────────────────────────────────────────────────────── */

.forfaits {
  border-bottom: 1px solid var(--filet);
}
.forfaits__liste {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 4rem);
}
.forfait {
  transition: background var(--vif);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.2rem 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--filet);
}
.forfait__nom {
  font-weight: 700;
  color: var(--encre);
  font-size: 0.98rem;
}
.forfait__detail {
  grid-column: 1;
  font-size: 0.82rem;
  color: var(--encre-2);
}
.forfait__prix {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  font-size: 1.35rem;
}
.forfait:hover {
  background: var(--ambre-pale);
}

/* ── Délais ── La seule bande sombre du site. ───────────────────────────── */

.delais {
  background: var(--acier-profond);
  --plaque-fond: var(--acier-profond);
  padding-top: calc(var(--section) + 10px);
}
.delais .etiquette--acier {
  color: var(--ambre-clair);
}
.delais .etiquette--acier::before {
  background: var(--ambre-clair);
}
.delais__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.delais .panneau {
  background: transparent;
  border-color: var(--filet-sombre);
}
.delais .panneau__plaque {
  color: var(--acier-clair);
}
.delais .panneau__note {
  border-top-color: var(--filet-sombre);
  color: rgba(244, 246, 247, 0.6);
}
.filiere {
  margin: 0;
  padding: 0;
  list-style: none;
}
.filiere li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--filet-sombre);
}
.filiere li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.filiere__nom {
  font-weight: 700;
  color: var(--fond);
  font-size: 0.94rem;
}
.filiere__ou {
  grid-column: 1;
  font-size: 0.8rem;
  color: rgba(244, 246, 247, 0.6);
}
.filiere__delai {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  color: var(--ambre-clair); /* un délai, c'est du temps : donc ambre */
  font-size: 1.05rem;
  white-space: nowrap;
}

/* ── L'atelier ───────────────────────────────────────────────────────────── */

.atelier__grille {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.atelier__portrait {
  position: sticky;
  top: 6.5rem;
}
.atelier__signature {
  margin: 1rem 0 0;
  display: grid;
  gap: 0.1rem;
  font-family: var(--titre);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--encre);
}
.atelier__signature span {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.atelier__chiffres {
  margin: 2.2rem 0;
  padding: 1.2rem 0;
  border-block: 1px solid var(--filet);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.atelier__chiffres li {
  display: grid;
  gap: 0.15rem;
}
.atelier__chiffres .chiffre {
  font-size: 1.5rem;
}
.atelier__chiffres span:last-child {
  font-size: 0.78rem;
  line-height: 1.4;
}

/* ── Corrosion ───────────────────────────────────────────────────────────── */

.corrosion {
  background: var(--rouille);
  --plaque-fond: var(--rouille);
  padding-top: calc(var(--section) + 10px);
}
.corrosion .titre {
  color: var(--fond);
}
.corrosion .texte {
  color: rgba(244, 246, 247, 0.76);
}
.corrosion .etiquette {
  color: var(--ambre-clair);
}
.corrosion .etiquette::before {
  background: var(--ambre-clair);
}
.corrosion .lien-souligne {
  color: var(--fond);
  border-bottom-color: var(--ambre);
}
.corrosion .lien-souligne:hover {
  color: var(--ambre-clair);
}
.corrosion .cliche {
  border-color: rgba(244, 246, 247, 0.18);
}
.corrosion__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.corrosion__grille .cliche {
  --ratio: 4 / 3;
}

/* ── Déroulé ─────────────────────────────────────────────────────────────── */

.deroule__liste {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
}
.etape {
  border-top: 2px solid var(--encre);
  padding-top: 1.1rem;
}
.etape__rang {
  font-size: 1.1rem;
  color: var(--acier);
}
.etape__nom {
  margin: 0.5rem 0 0.6rem;
  font-family: var(--titre);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--encre);
}
.etape p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ── Avis ────────────────────────────────────────────────────────────────── */

.avis {
  background: var(--ambre-pale);
  border-block: 1px solid var(--filet);
  --plaque-fond: var(--ambre-pale);
}
.avis__grille {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.6rem);
}
.avis__mot {
  margin: 0;
  padding: 1.4rem;
  background: var(--blanc);
  border: 1px solid var(--filet);
  display: flex;
  flex-direction: column;
}
.avis__mot blockquote {
  margin: 0 0 1.2rem;
}
.avis__mot p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--encre);
}
.avis__mot figcaption {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--filet);
  display: grid;
  gap: 0.1rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--encre);
}
.avis__mot figcaption span {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--encre-2);
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.faq {
  background: var(--surface);
  border-block: 1px solid var(--filet);
}
.question {
  border-bottom: 1px solid var(--filet);
}
.question:first-of-type {
  border-top: 1px solid var(--filet);
}
.question summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 2.4rem 1.1rem 0;
  position: relative;
  font-size: 1rem;
  font-weight: 700;
  color: var(--encre);
}
.question summary::-webkit-details-marker {
  display: none;
}
.question summary::before,
.question summary::after {
  content: "";
  position: absolute;
  right: 0.3rem;
  top: 50%;
  background: var(--acier);
  transition: transform var(--vif);
}
.question summary::before {
  width: 0.8rem;
  height: 2px;
  margin-top: -1px;
}
.question summary::after {
  width: 2px;
  height: 0.8rem;
  right: 0.6rem;
  margin-top: -0.4rem;
}
.question[open] summary::after {
  transform: scaleY(0);
}
.question__corps {
  padding: 0 2.4rem 1.3rem 0;
  max-width: 62ch;
}
.question__corps p {
  margin: 0;
  font-size: 0.93rem;
}

/* ── Contact ─────────────────────────────────────────────────────────────── */

.contact__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact__pratique {
  margin: 2rem 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}
.contact__pratique div {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--filet);
}
.contact__pratique dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.contact__pratique dd {
  margin: 0;
  font-size: 0.94rem;
  color: var(--encre);
}

.formulaire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  background: var(--blanc);
  border: 1px solid var(--filet);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.champ {
  display: grid;
  gap: 0.4rem;
}
.champ--large,
.formulaire__mention,
.formulaire > .bouton,
.formulaire__dit {
  grid-column: 1 / -1;
}
.champ label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--filet);
  background: var(--fond);
  font-size: 0.94rem;
  color: var(--encre);
}
.champ textarea {
  resize: vertical;
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--acier);
  box-shadow: none;
}
.champ--releve textarea {
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.6;
}
.champ[data-erreur] input,
.champ[data-erreur] select {
  border-color: var(--alerte);
}
.champ__erreur {
  margin: 0;
  font-size: 0.78rem;
  color: var(--alerte);
}
.formulaire__mention {
  margin: 0;
  font-size: 0.8rem;
}
.formulaire > .bouton {
  justify-self: start;
}
.formulaire__dit {
  margin: 0;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--acier);
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--encre);
}

/* ── Pied ────────────────────────────────────────────────────────────────── */

.pied {
  background: var(--encre);
  color: rgba(244, 246, 247, 0.68);
  padding-block: clamp(2.6rem, 5vw, 4rem) 1.8rem;
  font-size: 0.86rem;
}
.pied__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--filet-sombre);
}
.pied__bloc p {
  margin: 0 0 0.7rem;
  line-height: 1.8;
}
.pied__marque {
  font-family: var(--titre);
  font-stretch: 118%;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--fond);
}
.pied__titre {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acier-clair);
}
.pied a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pied a:hover {
  border-bottom-color: var(--acier-clair);
}
.pied__bas {
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.76rem;
}
.pied__bas p {
  margin: 0;
}
.pied__demo {
  max-width: 60ch;
}

/* ── Pages annexes ───────────────────────────────────────────────────────── */

.annexe .titre {
  max-width: 24ch;
}
.avertissement {
  margin: 0 0 2.2rem;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--acier);
  background: var(--surface);
  max-width: 62ch;
}
.avertissement p {
  margin: 0;
  font-size: 0.92rem;
}
.annexe__corps h2 {
  margin: 2.2rem 0 0.7rem;
  font-family: var(--titre);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--encre);
}
.annexe__corps p {
  max-width: 68ch;
  font-size: 0.94rem;
}
.perdu {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.perdu .titre {
  margin-inline: auto;
  max-width: 18ch;
}
.perdu__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}

/* ── Tarifs ──────────────────────────────────────────────────────────────── */

.bloc-tarif {
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
.bloc-tarif > .titre {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  margin-bottom: 0.8rem;
}
.tableau-tarif {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.2rem;
}
.tableau-tarif caption {
  text-align: left;
  font-size: 0.85rem;
  color: var(--encre-2);
  padding-bottom: 0.8rem;
  max-width: 62ch;
}
.tableau-tarif th,
.tableau-tarif td {
  padding: 0.75rem 0.8rem;
  border-bottom: 1px solid var(--filet);
  text-align: left;
  vertical-align: top;
  font-size: 0.92rem;
}
.tableau-tarif thead th {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-2);
  border-bottom: 2px solid var(--encre);
}
.tableau-tarif td:last-child,
.tableau-tarif th:last-child {
  text-align: right;
  white-space: nowrap;
}
.tableau-tarif tbody th {
  font-weight: 700;
  color: var(--encre);
}
.tableau-tarif .detail {
  display: block;
  font-size: 0.82rem;
  color: var(--encre-2);
  font-weight: 400;
}

/* ── Adaptations ─────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .deroule__liste {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem clamp(1.2rem, 3vw, 2.4rem);
  }
  .atelier__chiffres {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}

@media (max-width: 900px) {
  .entete__bascule {
    display: block;
  }
  .entete__ferme {
    display: block;
    justify-self: end;
    margin-bottom: 0.8rem;
  }
  .entete__nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(21rem, 88vw);
    background: var(--fond);
    border-left: 1px solid var(--filet);
    padding: 1.2rem var(--marge) 2rem;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 1.2rem;
    overflow-y: auto;
    z-index: 60;
  }
  .html-js .entete__nav[data-replie="oui"] {
    display: none;
  }
  /* Sans JavaScript, aucun moyen de replier ce panneau : il redevient une
     liste posée sous le logo, et les deux boutons inutiles disparaissent. */
  html:not(.html-js) .entete__barre {
    flex-wrap: wrap;
  }
  html:not(.html-js) .entete__bascule,
  html:not(.html-js) .entete__ferme {
    display: none;
  }
  html:not(.html-js) .entete__nav {
    position: static;
    width: 100%;
    border-left: 0;
    padding: 0.4rem 0 0.2rem;
    overflow: visible;
    gap: 0.9rem;
  }
  .lien-nav {
    font-size: 1.02rem;
  }

  .hero__grille,
  .section__entete,
  .chiffrage__grille,
  .delais__grille,
  .atelier__grille,
  .corrosion__grille,
  .contact__grille {
    grid-template-columns: 1fr;
  }
  .corrosion__grille .cliche {
    order: 2;
  }
  .atelier__portrait {
    position: static;
    max-width: 26rem;
  }
  .forfaits__liste {
    grid-template-columns: 1fr;
  }
  .avis {
  background: var(--ambre-pale);
  border-block: 1px solid var(--filet);
  --plaque-fond: var(--ambre-pale);
}
.avis__grille {
    grid-template-columns: 1fr;
  }
  .reperes__liste {
    grid-template-columns: repeat(2, 1fr);
  }
  .reperes li:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .pied__grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .deroule__liste,
  .reperes__liste,
  .contact__pratique,
  .formulaire {
    grid-template-columns: 1fr;
  }
  .reperes li {
    border-left: 0;
    padding: 1rem 0;
    border-top: 1px solid var(--filet);
  }
  .reperes li:first-child {
    border-top: 0;
  }
  .pied__grille {
    grid-template-columns: 1fr;
  }
  .grille-prix th,
  .grille-prix td {
    padding: 0.45rem 0.35rem;
    font-size: 0.76rem;
  }
  /* Sur mobile, la pastille de code laissait au sélecteur une colonne trop
     étroite : il débordait du panneau. Il prend toute la largeur. */
  .ligne__degat {
    grid-column: 1 / -1;
  }
}

/* ── Réduction des animations ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}