/* Carrosserie du Rivage : feuille de style.
   Univers : la cabine de peinture et le néon de l'atelier. Fond « schiste »
   (le noir bleuté des terrils), sections « apprêt » (le gris clair du primaire),
   une seule couleur d'action, le cyan du reflet d'un néon dans un vernis frais.
   Titres en Hubot Sans large, plaques et numéros en Hubot Sans étroit, texte en
   IBM Plex Sans. Rayons de 4 px au plus, aucun verre, aucun halo. */

@font-face {
  font-family: "Hubot Sans Large";
  src: url("fonts/hubot-sans-large-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hubot Sans Etroit";
  src: url("fonts/hubot-sans-etroit-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Matières */
  --schiste: #101316;
  --schiste-2: #181d20;
  --schiste-3: #21272b;
  --pied: #0b0d0f;
  --tole: #373e42;
  --tole-clair: #5b666c;
  --acier: #a3acb1;
  --neon: #edf2f3;
  --appret: #dde1df;
  --appret-2: #cdd2d0;
  --appret-ligne: #b3bab8;
  --encre: #101316;
  --encre-douce: #4e555a;

  /* Action : le cyan du reflet */
  --cyan: #39d4e4;
  --cyan-vif: #74e4ef;
  --cyan-sombre: #006776;
  --cyan-encre: #061a1d;
  --erreur: #ff9c8f;
  --erreur-clair: #a3262a;

  /* Plan de carrosserie */
  --plan-fond: #1a1f23;
  --plan-trait: #66737a;
  --plan-vitre: #26323a;
  --plan-appret: #8d9498;
  --plan-cataphorese: #090a0b;

  /* Typographie */
  --police-titre: "Hubot Sans Large", "Arial Black", Arial, sans-serif;
  --police-plaque: "Hubot Sans Etroit", "Arial Narrow", Arial, sans-serif;
  --police-texte: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --pas--1: clamp(0.84rem, 0.8rem + 0.18vw, 0.94rem);
  --pas-0: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  --pas-1: clamp(1.18rem, 1.06rem + 0.5vw, 1.45rem);
  --pas-2: clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem);
  --pas-3: clamp(1.85rem, 1.35rem + 2.1vw, 3.05rem);
  --pas-4: clamp(2.3rem, 1.5rem + 3.6vw, 4.5rem);

  /* Rythme */
  --gouttiere: clamp(16px, 4vw, 40px);
  --colonne: 1240px;
  --section: clamp(56px, 8vw, 112px);
  --entete: 72px;
  --rayon: 3px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ligne-sombre: rgba(237, 242, 243, 0.14);
  --ligne-claire: rgba(16, 19, 22, 0.16);
}

[hidden] {
  display: none !important;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--entete) + var(--brnsg-barre, 0px) + 16px);
  background: var(--schiste);
}

body {
  margin: 0;
  background: var(--schiste);
  color: var(--neon);
  font-family: var(--police-texte);
  font-size: var(--pas-0);
  line-height: 1.6;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--cyan);
  color: var(--cyan-encre);
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-color: var(--cyan);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.section--appret :focus-visible,
.page-tete--clair :focus-visible {
  outline-color: var(--cyan-sombre);
}

p {
  margin: 0 0 1em;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p,
li,
dd,
figcaption {
  text-wrap: pretty;
}

strong {
  font-weight: 650;
}

.colonne {
  width: min(100% - 2 * var(--gouttiere), var(--colonne));
  margin-inline: auto;
}

.lien-evitement {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10000;
  padding: 10px 14px;
  background: var(--cyan);
  color: var(--cyan-encre);
  font-weight: 700;
  border-radius: var(--rayon);
}

.lien-evitement:focus {
  top: calc(var(--brnsg-barre, 0px) + 8px);
}

/* ------------------------------------------------------------------ */
/* Boutons et liens                                                     */
/* ------------------------------------------------------------------ */

.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.75em 1.3em;
  overflow: hidden;
  border: 0;
  border-radius: var(--rayon);
  background: var(--cyan);
  color: var(--cyan-encre);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.22);
  font-family: var(--police-titre);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Le reflet du néon qui file sur le bouton au survol. */
.bouton::after {
  content: "";
  position: absolute;
  inset: -2px auto -2px 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none;
}

.bouton:hover {
  background: var(--cyan-vif);
}

.bouton:hover::after {
  transform: translateX(320%) skewX(-18deg);
  transition: transform 0.7s var(--ease);
}

.bouton:active {
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.22);
}

.bouton[disabled],
.bouton[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}

.bouton[disabled]:not([aria-busy="true"]) {
  cursor: not-allowed;
  opacity: 0.45;
}

.bouton--petit {
  min-height: 42px;
  padding: 0.55em 1em;
  font-size: 0.9rem;
}

.bouton--large {
  min-height: 54px;
  padding-inline: 1.6em;
}

.bouton--fantome {
  background: transparent;
  color: var(--neon);
  box-shadow: inset 0 0 0 1px var(--tole-clair);
}

.bouton--fantome:hover {
  background: var(--schiste-3);
  box-shadow: inset 0 0 0 1px var(--cyan);
}

.bouton--fantome::after {
  display: none;
}

.bouton .icone {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bouton-lien {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: var(--cyan);
  text-underline-offset: 3px;
  cursor: pointer;
}

.bouton-lien:hover {
  text-decoration-thickness: 2px;
}

.lien-simple {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--cyan);
  text-underline-offset: 4px;
}

.section--appret .lien-simple,
.section--appret a {
  text-decoration-color: var(--cyan-sombre);
}

.lien-fleche {
  margin: 1.5rem 0 0;
}

.lien-fleche a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--cyan);
  padding-bottom: 2px;
}

.section--appret .lien-fleche a {
  border-bottom-color: var(--cyan-sombre);
}

.lien-fleche a:hover {
  border-bottom-width: 2px;
}

.icone {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icone-fleche {
  transition: transform 0.25s var(--ease);
}

.lien-fleche a:hover .icone-fleche {
  transform: translateX(4px);
}

.lien-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-family: var(--police-texte);
  text-decoration: none;
  min-height: 48px;
}

.lien-tel .icone {
  fill: currentColor;
  stroke: none;
}

.lien-tel:hover span {
  text-decoration: underline;
  text-decoration-color: var(--cyan);
  text-underline-offset: 4px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.75rem;
}

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

.entete {
  position: sticky;
  top: var(--brnsg-barre, 0px);
  z-index: 900;
  background: var(--schiste);
  border-bottom: 1px solid var(--ligne-sombre);
  transition: transform 0.35s var(--ease);
}

.entete--cachee {
  transform: translateY(calc(-100% - 2px));
}

.entete-grille {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--entete);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  color: var(--neon);
  text-decoration: none;
}

.logo-marque {
  width: 36px;
  height: 36px;
}

.logo-pastille {
  fill: var(--cyan);
}

.logo-reflet {
  fill: var(--neon);
  opacity: 0.88;
}

.logo-reflet--fin {
  opacity: 0.55;
}

.logo-texte {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.logo-nom {
  font-family: var(--police-titre);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.logo-lieu {
  margin-top: 3px;
  color: var(--acier);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.nav {
  margin-left: auto;
}

.nav-liste {
  display: flex;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-liste a {
  display: inline-block;
  padding: 0.6rem 0;
  white-space: nowrap;
  color: var(--neon);
  font-size: 0.93rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.nav-liste a:hover {
  border-bottom-color: var(--tole-clair);
}

.nav-liste a[aria-current="page"] {
  border-bottom-color: var(--cyan);
}

.entete-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.entete-tel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--neon);
  text-decoration: none;
  line-height: 1.2;
}

.entete-tel-numero {
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 0.98rem;
  white-space: nowrap;
}

.entete-statut {
  color: var(--acier);
  font-size: 0.76rem;
  white-space: nowrap;
}

.entete-devis {
  white-space: nowrap;
}

.entete-tel:hover .entete-tel-numero {
  text-decoration: underline;
  text-decoration-color: var(--cyan);
  text-underline-offset: 3px;
}

[data-brnsg-horaires][data-etat="ouvert"]::before,
[data-brnsg-horaires][data-etat="ferme"]::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 0.08em;
  background: var(--acier);
}

[data-brnsg-horaires][data-etat="ouvert"]::before {
  background: var(--cyan);
}

.menu-bouton {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1px solid var(--tole-clair);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--neon);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.menu-bouton-traits,
.menu-bouton-traits::before,
.menu-bouton-traits::after {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease);
}

.menu-bouton-traits {
  position: relative;
}

.menu-bouton-traits::before,
.menu-bouton-traits::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-bouton-traits::before {
  top: -5px;
}

.menu-bouton-traits::after {
  top: 5px;
}

.menu-bouton[aria-expanded="true"] .menu-bouton-traits {
  background: transparent;
}

.menu-bouton[aria-expanded="true"] .menu-bouton-traits::before {
  transform: translateY(5px) rotate(45deg);
}

.menu-bouton[aria-expanded="true"] .menu-bouton-traits::after {
  transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 1220px) {
  .menu-bouton {
    display: inline-flex;
  }

  .entete-devis {
    display: none;
  }

  .nav {
    position: fixed;
    inset: calc(var(--entete) + var(--brnsg-barre, 0px)) 0 0 0;
    z-index: 880;
    display: none;
    padding: 1.5rem var(--gouttiere) 6rem;
    overflow-y: auto;
    background: var(--schiste);
  }

  .nav--ouverte {
    display: block;
  }

  .nav-liste {
    flex-direction: column;
    gap: 0;
  }

  .nav-liste a {
    display: block;
    padding: 1rem 0;
    font-family: var(--police-titre);
    font-size: 1.35rem;
    border-bottom: 1px solid var(--ligne-sombre);
  }

  .nav-liste a[aria-current="page"] {
    color: var(--cyan);
    border-bottom-color: var(--ligne-sombre);
  }

  .entete-actions {
    margin-left: auto;
  }

  body.menu-ouvert {
    overflow: hidden;
  }
}

@media (max-width: 560px) {
  :root {
    --entete: 64px;
  }

  .entete-grille {
    gap: 0.75rem;
  }

  .logo-marque {
    width: 30px;
    height: 30px;
  }

  .logo-nom {
    font-size: 0.86rem;
    max-width: 8.6em;
  }

  .logo-lieu {
    display: none;
  }

  .entete-actions {
    gap: 0.6rem;
  }

  .entete-tel-numero {
    font-size: 0.88rem;
  }

  .entete-statut {
    display: none;
  }

  .menu-bouton-texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .menu-bouton {
    width: 44px;
    justify-content: center;
    padding: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Sections                                                             */
/* ------------------------------------------------------------------ */

.section {
  padding-block: var(--section);
}

.section--serre {
  padding-block: clamp(40px, 5vw, 64px);
}

.section--tole {
  background: var(--schiste-2);
}

.section--appret {
  background: var(--appret);
  color: var(--encre);
}

.section--outil {
  background: var(--schiste-2);
  border-block: 1px solid var(--ligne-sombre);
}

.section-tete {
  max-width: 46rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.titre-section {
  font-size: var(--pas-3);
}

.titre-section--petit {
  font-size: var(--pas-1);
  margin-bottom: 0.9rem;
}

.section-chapo {
  margin-top: 1rem;
  font-size: var(--pas-1);
  line-height: 1.5;
  color: var(--acier);
}

.section--appret .section-chapo {
  color: var(--encre-douce);
}

.note {
  font-size: var(--pas--1);
  color: var(--acier);
}

.section--appret .note {
  color: var(--encre-douce);
}

.note--cadre {
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--cyan);
  background: var(--schiste-3);
  color: var(--neon);
}

.section--appret .note--cadre {
  background: var(--appret-2);
  color: var(--encre);
  border-left-color: var(--cyan-sombre);
}

.source {
  margin: 0.6rem 0 0;
  font-size: 0.86rem;
  color: var(--acier);
}

.section--appret .source {
  color: var(--encre-douce);
}

.liste-simple {
  margin: 0;
  padding: 0;
  list-style: none;
}

.liste-simple li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.2rem;
}

.liste-simple li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 8px;
  height: 2px;
  background: var(--cyan);
}

.section--appret .liste-simple li::before {
  background: var(--cyan-sombre);
}

/* ------------------------------------------------------------------ */
/* Hero de l'accueil                                                    */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(calc(100svh - var(--entete) - var(--brnsg-barre, 0px)), 820px);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-media picture,
.hero-media img {
  width: 100%;
  height: 100%;
}

.hero-media img {
  object-fit: cover;
  object-position: 62% 50%;
}

.hero-voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16, 19, 22, 0.94) 0%, rgba(16, 19, 22, 0.82) 30%, rgba(16, 19, 22, 0.25) 62%, rgba(16, 19, 22, 0) 80%),
    linear-gradient(0deg, rgba(16, 19, 22, 0.86) 0%, rgba(16, 19, 22, 0) 38%);
}

.hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}

.hero-texte {
  max-width: 41rem;
}

.hero-etat {
  margin-bottom: 1.1rem;
  font-size: 0.9rem;
  color: var(--acier);
}

.hero-titre {
  font-size: var(--pas-4);
  line-height: 1.01;
}

.hero-chapo {
  max-width: 36rem;
  margin-top: 1.3rem;
  font-size: var(--pas-1);
  line-height: 1.5;
  color: #d3dadc;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 1.9rem;
}

.hero-faits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 2rem 0 0;
  padding: 1.1rem 0 0;
  list-style: none;
  border-top: 1px solid var(--ligne-sombre);
  font-size: 0.92rem;
  color: var(--acier);
}

.hero-faits strong {
  color: var(--neon);
  font-weight: 700;
}

.hero-suivi {
  padding: 1.4rem 1.4rem 1.2rem;
  background: var(--schiste-2);
  border: 1px solid var(--ligne-sombre);
  border-top: 3px solid var(--cyan);
  border-radius: var(--rayon);
}

@media (max-width: 960px) {
  .hero {
    display: block;
    min-height: 0;
    padding-top: 0;
  }

  .hero-media {
    position: relative;
    z-index: 0;
    aspect-ratio: 1 / 1;
    max-height: 62svh;
    margin-bottom: -4.5rem;
  }

  .hero-media img {
    object-position: 50% 50%;
  }

  .hero-voile {
    background: linear-gradient(0deg, rgba(16, 19, 22, 1) 0%, rgba(16, 19, 22, 0.55) 30%, rgba(16, 19, 22, 0) 58%);
  }

  .hero-grille {
    position: relative;
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* Formulaire « suivre mon véhicule » : la plaque                       */
/* ------------------------------------------------------------------ */

.suivi-form-titre {
  margin-bottom: 0.9rem;
  font-family: var(--police-titre);
  font-size: var(--pas-1);
  line-height: 1.15;
}

.suivi-champs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem;
}

.suivi-form .champ {
  margin: 0;
}

.suivi-form label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.suivi-aide {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: var(--acier);
}

.suivi-erreur:empty {
  display: none;
}

.dossier-saisie,
.plaque-saisie {
  display: inline-flex;
  align-items: stretch;
  height: 54px;
  overflow: hidden;
  background: #f3f5f4;
  border: 2px solid #0a0c0d;
  border-radius: 4px;
  color: #101316;
  box-shadow: 0 0 0 1px rgba(237, 242, 243, 0.12);
}

.dossier-saisie:focus-within,
.plaque-saisie:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.dossier-prefixe,
.plaque-masque {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-left: 0.6rem;
  font-family: var(--police-plaque);
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  color: #6b7378;
  user-select: none;
}

.plaque-masque {
  padding-left: 0.45rem;
  letter-spacing: 0.02em;
}

.champ .dossier-saisie input[type="text"],
.champ .plaque-saisie input[type="text"] {
  width: 4.4ch;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0 0.5rem 0 0.15rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: #101316;
  font-family: var(--police-plaque);
  font-size: 1.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  outline: none;
}

.champ .plaque-saisie input[type="text"] {
  width: 2.9ch;
  padding-right: 0.3rem;
}

.champ .dossier-saisie input:focus-visible,
.champ .plaque-saisie input:focus-visible {
  outline: none;
}

.champ .dossier-saisie input[aria-invalid="true"],
.champ .plaque-saisie input[aria-invalid="true"] {
  box-shadow: none;
}

.dossier-saisie:has([aria-invalid="true"]),
.plaque-saisie:has([aria-invalid="true"]) {
  border-color: var(--erreur-clair);
  box-shadow: 0 0 0 2px var(--erreur);
}

.dossier-saisie input::placeholder,
.plaque-saisie input::placeholder {
  color: #6b7378;
  opacity: 1;
}

.plaque-bande {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 26px;
  padding-bottom: 5px;
  background: #1f3fa6;
  color: #ffffff;
  font-family: var(--police-texte);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.plaque-bande--dep {
  justify-content: center;
  padding-bottom: 0;
}

.plaque-etoiles {
  width: 16px;
  height: 16px;
  margin-bottom: 6px;
  background: radial-gradient(circle, #ffd400 0 1.1px, transparent 1.3px) 0 0 / 5.33px 5.33px;
  -webkit-mask: radial-gradient(circle, transparent 0 4.6px, #000 4.7px 7.6px, transparent 7.7px);
  mask: radial-gradient(circle, transparent 0 4.6px, #000 4.7px 7.6px, transparent 7.7px);
}

.suivi-bouton {
  height: 54px;
}

.suivi-form--compact .suivi-champs {
  gap: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* Le parcours de réparation (accueil)                                  */
/* ------------------------------------------------------------------ */

.parcours {
  position: relative;
  border-top: 1px solid var(--ligne-sombre);
}

.parcours-tete {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.parcours-tete .titre-section,
.parcours-tete .section-chapo {
  max-width: 48rem;
}

.parcours-scene {
  position: relative;
}

.parcours-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* La frise des six étapes : un point par étape sur une ligne, l'étape montrée en cyan. */
.parcours-etapes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.parcours-etapes::before,
.parcours-etapes::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  height: 2px;
}

.parcours-etapes::before {
  right: calc(100% / 6 - 7px);
  background: var(--tole);
}

.parcours-etapes::after {
  width: calc(var(--avance, 0) * (100% - 100% / 6));
  background: var(--cyan);
  transition: width 0.45s var(--ease);
}

.parcours-etape {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 64px;
  padding: 1.6rem 0.75rem 0.4rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--acier);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.parcours-etape::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 16px;
  height: 16px;
  border: 2px solid var(--tole-clair);
  border-radius: 50%;
  background: var(--schiste);
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}

.parcours-etape[data-fait="oui"]::before {
  border-color: var(--neon);
  background: var(--neon);
}

.parcours-etape[aria-pressed="true"]::before {
  border-color: var(--cyan);
  background: var(--cyan);
  transform: scale(1.25);
}

.parcours-etape:hover .parcours-etape-nom {
  color: var(--neon);
  text-decoration: underline;
  text-decoration-color: var(--cyan);
  text-underline-offset: 4px;
}

.parcours-etape[aria-pressed="true"] {
  color: var(--neon);
}

.parcours-etape-nom {
  font-family: var(--police-titre);
  font-size: 0.98rem;
  line-height: 1.2;
}

.nom-court {
  display: none;
}

.parcours-etape-quand {
  margin-top: 3px;
  font-size: 0.8rem;
  color: var(--acier);
}

.parcours-etape-quand:empty {
  display: none;
}

.parcours-visuel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
}

.parcours-detail {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.parcours-detail-etape {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--pas-2);
  line-height: 1.1;
}

.parcours-compteur {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--police-plaque);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
}

.parcours-detail-texte {
  margin: 0;
  color: var(--acier);
}

.parcours-exemple {
  margin: 0 0 0.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--ligne-sombre);
  font-size: 0.86rem;
  color: var(--acier);
}

.parcours-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 2rem;
}

.parcours-pied .actions {
  margin-top: 0;
}

@media (min-width: 1001px) {
  .parcours-visuel {
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
  }
}

/* En mouvement : la scène est épinglée et le défilement fait avancer les étapes. */
.js-motion .parcours[data-epingle="oui"] .parcours-scene {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--entete) - var(--brnsg-barre, 0px));
  padding-block: 1.25rem;
  background: var(--schiste);
}

.js-motion .parcours[data-epingle="oui"] .plan-cadre {
  max-width: min(100%, calc((100svh - var(--entete) - var(--brnsg-barre, 0px) - 175px) * 1.11));
}

@media (min-width: 1001px) {
  .js-motion .parcours[data-epingle="oui"] .parcours-visuel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .js-motion .parcours[data-epingle="oui"] .plan-cadre {
    justify-self: end;
    width: 100%;
  }
}

@media (max-width: 1000px) {
  .js-motion .parcours[data-epingle="oui"] .plan-cadre {
    max-width: min(100%, calc((100svh - var(--entete) - var(--brnsg-barre, 0px) - 380px) * 1.11));
    margin-inline: auto;
  }
}

@media (max-width: 900px) {
  .parcours-etapes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .parcours-etapes::before,
  .parcours-etapes::after {
    display: none;
  }

  .parcours-etape {
    min-height: 46px;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--tole);
    border-radius: var(--rayon);
  }

  .parcours-etape::before {
    display: none;
  }

  .parcours-etape[data-fait="oui"] {
    border-color: var(--tole-clair);
    color: var(--neon);
  }

  .parcours-etape[aria-pressed="true"] {
    border-color: var(--cyan);
    background: var(--schiste-3);
  }

  .parcours-etape-nom {
    font-size: 0.9rem;
  }

  .nom-long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .nom-court {
    display: inline;
  }

  .parcours-etape-quand {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Le plan de carrosserie                                               */
/* ------------------------------------------------------------------ */

.plan-cadre {
  margin: 0;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  background: var(--schiste-2);
  border: 1px solid var(--ligne-sombre);
  border-radius: var(--rayon);
  --fond-plan: var(--schiste-2);
}

.section--tole .plan-cadre,
.section--outil .plan-cadre {
  background: var(--schiste);
  --fond-plan: var(--schiste);
}

.plan-cadre-legende {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--acier);
}

.plan {
  width: 100%;
  height: auto;
  overflow: visible;
}

.plan--etroit {
  display: none;
}

.legende-etroite {
  display: none;
}

@media (max-width: 760px) {
  .plan--large {
    display: none;
  }

  .plan--etroit {
    display: block;
    max-width: 440px;
    margin-inline: auto;
  }

  .legende-large {
    display: none;
  }

  .legende-etroite {
    display: inline;
  }
}

.plan-zone path {
  fill: var(--plan-fond);
  stroke: var(--plan-trait);
  stroke-width: 1.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill 0.45s var(--ease), stroke 0.45s var(--ease);
}

.plan-vitres path {
  fill: var(--plan-vitre);
  stroke: var(--plan-trait);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.plan-passage {
  fill: var(--fond-plan, var(--schiste-2));
}

.plan-pneu {
  fill: #07090a;
  stroke: var(--plan-trait);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.plan-jante {
  fill: none;
  stroke: #46505a;
  stroke-width: 7;
}

.plan-roues {
  pointer-events: none;
}

.motif-fond {
  fill: #1a1f23;
}

.motif-trait {
  fill: #e4e9ea;
}

.motif-fond-choix {
  fill: #0e3237;
}

.motif-trait-choix {
  fill: var(--cyan);
}

/* États d'une zone dans le suivi : dégât, pièce commandée, apprêt, cataphorèse, teinte. */
.plan .plan-zone[data-etat="neutre"] path {
  fill: color-mix(in srgb, var(--teinte, #1a1f23) 13%, #171b1e);
}

.plan .plan-zone[data-etat="degat"] path {
  fill: var(--hachures);
  stroke: var(--neon);
  stroke-width: 1.8;
}

.plan .plan-zone[data-etat="commande"] path {
  fill: #12161a;
  stroke: var(--neon);
  stroke-width: 1.8;
  stroke-dasharray: 7 5;
}

.plan .plan-zone[data-etat="appret"] path {
  fill: var(--plan-appret);
  stroke: #c3c9cb;
}

.plan .plan-zone[data-etat="cataphorese"] path {
  fill: var(--plan-cataphorese);
  stroke: #a8b1b6;
  stroke-width: 1.8;
}

.plan .plan-zone[data-etat="peinte"] path {
  fill: var(--teinte, var(--cyan));
  stroke: color-mix(in srgb, var(--teinte, #39d4e4) 55%, #ffffff);
}

.plan-reflet {
  pointer-events: none;
}

.plan-reflet-bande {
  display: none;
}

.plan[data-reflet="oui"] .plan-reflet-bande {
  display: inline;
  animation: reflet-neon 3.4s var(--ease) 0.5s infinite;
}

@keyframes reflet-neon {
  0% {
    transform: skewX(-18deg) translateX(0);
  }

  55%,
  100% {
    transform: skewX(-18deg) translateX(1500px);
  }
}

/* Plan cliquable du devis */
.plan--interactif .plan-zone {
  cursor: pointer;
}

.plan--interactif .plan-zone:hover path {
  fill: #253036;
  stroke: var(--cyan);
}

.plan--interactif .plan-zone[data-choisi="oui"] path {
  fill: var(--choix);
  stroke: var(--cyan);
  stroke-width: 2.4;
}

.plan--interactif .plan-zone[data-survol="oui"] path {
  stroke: var(--cyan);
  stroke-width: 3;
}

.plan-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--acier);
}

.plan-legende li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.plan-pastille {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid var(--plan-trait);
}

.plan-pastille--degat {
  background: repeating-linear-gradient(45deg, #e4e9ea 0 2px, #1a1f23 2px 6px);
  border-color: var(--neon);
}

.plan-pastille--commande {
  background: #12161a;
  border: 1px dashed var(--neon);
}

.plan-pastille--appret {
  background: var(--plan-appret);
}

.plan-pastille--cataphorese {
  background: var(--plan-cataphorese);
  border-color: #a8b1b6;
}

.plan-pastille--peinte {
  background: linear-gradient(120deg, var(--teinte, #1f7a86) 0 55%, color-mix(in srgb, var(--teinte, #1f7a86) 45%, #ffffff) 62%, var(--teinte, #1f7a86) 70%);
}

/* ------------------------------------------------------------------ */
/* SMS                                                                  */
/* ------------------------------------------------------------------ */

.sms {
  position: relative;
  max-width: 30rem;
  padding: 0.75rem 0.95rem 0.85rem;
  background: #e6ecee;
  color: #101316;
  border-radius: 4px 4px 4px 0;
  font-size: 0.94rem;
  line-height: 1.45;
}

.sms::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  border-left: 10px solid #e6ecee;
  border-bottom: 8px solid transparent;
}

.sms-tete {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  color: #4b5358;
}

.sms-expediteur {
  font-family: var(--police-plaque);
  letter-spacing: 0.08em;
  color: #101316;
}

.sms-texte {
  margin: 0;
}

.sms-texte:empty::before {
  content: "\00a0";
}

/* ------------------------------------------------------------------ */
/* Duo texte et image, tarifs                                           */
/* ------------------------------------------------------------------ */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.duo--large {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.duo--haut {
  align-items: start;
}

.duo--inverse > :first-child {
  order: 2;
}

.duo-image {
  margin: 0;
  overflow: hidden;
  border-radius: var(--rayon);
}

.duo-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.duo-image--haute img {
  aspect-ratio: 4 / 5;
}

.duo-image figcaption,
.image-large figcaption,
.portrait-encart figcaption {
  padding: 0.85rem 0 0;
  font-size: 0.9rem;
  color: var(--acier);
}

.section--appret .duo-image figcaption {
  color: var(--encre-douce);
}

.duo-texte > p {
  max-width: 38rem;
}

.duo-texte .titre-section + p {
  margin-top: 1.1rem;
}

@media (max-width: 860px) {
  .duo,
  .duo--large {
    grid-template-columns: 1fr;
  }

  .duo--inverse > :first-child {
    order: 0;
  }
}

.tarif {
  margin: 1.5rem 0 0;
}

.tarif-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ligne-sombre);
}

.section--appret .tarif-ligne {
  border-bottom-color: var(--ligne-claire);
}

.tarif-ligne:first-child {
  border-top: 1px solid var(--ligne-sombre);
}

.section--appret .tarif-ligne:first-child {
  border-top-color: var(--ligne-claire);
}

.tarif-ligne dt {
  display: flex;
  flex-direction: column;
}

.tarif-nom {
  font-weight: 600;
}

.tarif-precision {
  font-size: 0.86rem;
  color: var(--acier);
}

.section--appret .tarif-precision {
  color: var(--encre-douce);
}

.tarif-prix {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.tarifs-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.tarifs-note {
  grid-column: 1 / -1;
  margin: 0;
}

@media (max-width: 860px) {
  .tarifs-grille {
    grid-template-columns: 1fr;
  }
}

.frais,
.prestations,
.trajets,
.horaires-liste,
.chiffres {
  margin: 0;
}

.frais > div,
.prestations > div,
.trajets > div {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--ligne-claire);
}

.section--tole .prestations > div,
.trajets > div {
  border-bottom-color: var(--ligne-sombre);
}

.frais dt,
.prestations dt,
.trajets dt {
  font-weight: 650;
}

.frais dd,
.prestations dd,
.trajets dd {
  margin: 0.2rem 0 0;
  color: var(--encre-douce);
}

.section--tole .prestations dd,
.trajets dd {
  color: var(--acier);
}

.portrait-encart {
  margin: 0;
}

.portrait-encart img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rayon);
}

.portrait-encart figcaption strong {
  color: var(--neon);
}

/* ------------------------------------------------------------------ */
/* Assurance, obligations                                               */
/* ------------------------------------------------------------------ */

.assurance-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

@media (max-width: 860px) {
  .assurance-grille {
    grid-template-columns: 1fr;
  }
}

.procedure {
  counter-reset: procedure;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.procedure li {
  counter-increment: procedure;
  position: relative;
  padding: 0.95rem 0 0.95rem 3rem;
  border-bottom: 1px solid var(--ligne-sombre);
}

.procedure li::before {
  content: counter(procedure);
  position: absolute;
  left: 0;
  top: 0.95rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--cyan);
  border-radius: var(--rayon);
  font-family: var(--police-plaque);
  font-size: 1.05rem;
  color: var(--cyan);
}

.obligations {
  margin-bottom: 0;
  border-top: 1px solid var(--ligne-sombre);
}

/* Une obligation par ligne : le titre à gauche, le texte et sa source à droite. */
.obligation {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 0.75rem clamp(1.5rem, 4vw, 4rem);
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--ligne-sombre);
}

.obligation-titre {
  font-size: var(--pas-1);
  line-height: 1.2;
}

.obligation-corps {
  max-width: 46rem;
}

.obligation-corps > p:first-child {
  margin-bottom: 0.6rem;
}

.obligation-corps .liste-simple li {
  font-size: 0.97rem;
}

@media (max-width: 760px) {
  .obligation {
    grid-template-columns: 1fr;
  }
}

.piec-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 2.5rem;
  margin: 1rem 0;
}

.section--appret .obligations,
.section--appret .obligation {
  border-color: var(--ligne-claire);
}

.piec-titre {
  margin-bottom: 0.4rem;
  font-weight: 650;
}

@media (max-width: 760px) {
  .piec-grille {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* Formulaires : champs communs                                         */
/* ------------------------------------------------------------------ */

.champ {
  margin-bottom: 1.1rem;
}

.champ label,
.champ-titre {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.champ-optionnel {
  font-weight: 400;
  color: var(--acier);
}

.champ input[type="text"],
.champ input[type="tel"],
.champ input[type="email"],
.champ input[type="password"],
.champ textarea,
.select-enveloppe select {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 0.85rem;
  border: 1px solid #aab2b5;
  border-radius: var(--rayon);
  background: #f3f5f4;
  color: #101316;
  font: inherit;
  font-size: 1rem;
}

.champ textarea {
  min-height: 96px;
  resize: vertical;
}

.champ input::placeholder,
.champ textarea::placeholder {
  color: #6b7378;
  opacity: 1;
}

.champ input:focus-visible,
.champ textarea:focus-visible,
.select-enveloppe select:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-color: #101316;
}

.champ [aria-invalid="true"] {
  border-color: var(--erreur-clair);
  box-shadow: 0 0 0 2px var(--erreur);
}

.champ-aide {
  margin: 0 0 0.5rem;
  font-size: 0.86rem;
  color: var(--acier);
}

.champ-aide--mention {
  margin: 0.3rem 0 1rem 2.1rem;
}

.champ-erreur {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--erreur);
}

.formulaire-erreur:empty {
  display: none;
}

.champ-rangee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 1rem;
}

@media (max-width: 640px) {
  .champ-rangee {
    grid-template-columns: 1fr;
  }
}

.champ-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.select-enveloppe {
  position: relative;
  display: block;
}

.select-enveloppe select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
}

.select-enveloppe::after {
  content: "";
  position: absolute;
  right: 0.95rem;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid #101316;
  border-bottom: 2px solid #101316;
  transform: rotate(45deg);
  pointer-events: none;
}

.case,
.radio,
.consentement {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0.4rem 0;
  cursor: pointer;
  line-height: 1.45;
}

.case input,
.radio input,
.consentement input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0.05rem 0 0;
  accent-color: var(--cyan);
  cursor: pointer;
}

.consentement {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--acier);
}

.consentement a {
  color: var(--neon);
}

.radios {
  display: grid;
  gap: 0.25rem;
}

.radios--ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.formulaire-succes {
  padding: 1.6rem;
  background: var(--schiste-3);
  border-left: 3px solid var(--cyan);
  border-radius: var(--rayon);
}

.formulaire-succes:focus {
  outline: none;
}

.formulaire-succes-titre {
  font-family: var(--police-titre);
  font-size: var(--pas-1);
  line-height: 1.25;
}

/* ------------------------------------------------------------------ */
/* Devis carrosserie                                                    */
/* ------------------------------------------------------------------ */

.devis-form {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.devis-plan {
  position: sticky;
  top: calc(var(--entete) + var(--brnsg-barre, 0px) + 1rem);
}

.devis-suite {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}

.devis-suite .devis-bloc:last-child {
  grid-column: 1 / -1;
}

.devis-bloc {
  margin: 0 0 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--ligne-sombre);
  border-radius: var(--rayon);
  background: var(--schiste);
  min-width: 0;
}

.devis-suite .devis-bloc {
  margin: 0;
}

.devis-legende {
  display: block;
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0;
  font-family: var(--police-titre);
  font-size: var(--pas-1);
  line-height: 1.2;
}

/* Une légende de fieldset flotte pour se comporter comme un titre ordinaire. */
legend.devis-legende {
  float: left;
}

legend.devis-legende ~ * {
  clear: both;
}

.puces-groupe {
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.puces-legende {
  margin-bottom: 0.4rem;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--acier);
}

.puces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.puce {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.puce input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.puce span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--tole-clair);
  border-radius: var(--rayon);
  font-size: 0.9rem;
  line-height: 1.2;
  transition: background-color 0.2s, border-color 0.2s;
}

.puce:hover span,
.puce[data-survol="oui"] span {
  border-color: var(--cyan);
}

.puce input:checked + span {
  border-color: var(--cyan);
  background: rgba(57, 212, 228, 0.16);
  color: var(--neon);
}

.puce input:checked + span::before {
  content: "";
  width: 9px;
  height: 5px;
  margin-right: 0.5rem;
  border-left: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(-45deg) translateY(-2px);
}

.puce input:focus-visible + span {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.devis-vide {
  margin: 0;
  color: var(--acier);
  font-size: 0.92rem;
}

.choisies {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.choisie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 12rem) 44px;
  gap: 0.5rem;
  align-items: center;
  padding: 0.35rem 0.35rem 0.35rem 0.75rem;
  border-left: 3px solid var(--cyan);
  background: var(--schiste-3);
  border-radius: var(--rayon);
}

.choisie-nom {
  font-weight: 600;
  font-size: 0.95rem;
}

.choisie .select-enveloppe select {
  min-height: 42px;
  padding-block: 0.4rem;
  font-size: 0.92rem;
}

.choisie-retirer {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  background: transparent;
  color: var(--acier);
  cursor: pointer;
}

.choisie-retirer:hover {
  color: var(--neon);
  background: var(--tole);
}

@media (max-width: 520px) {
  .choisie {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .choisie .select-enveloppe {
    grid-column: 1;
    grid-row: 2;
  }

  .choisie-retirer {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.devis-envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
}

.devis-recap {
  margin: 0;
  color: var(--acier);
  font-size: 0.92rem;
}

@media (max-width: 1080px) {
  .devis-form {
    grid-template-columns: 1fr;
  }

  .devis-plan {
    position: static;
  }

  .devis-suite {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* Rendez-vous                                                          */
/* ------------------------------------------------------------------ */

.rdv-grille {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

@media (max-width: 960px) {
  .rdv-grille {
    grid-template-columns: 1fr;
  }
}

.rdv-carte {
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background: var(--schiste);
  border: 1px solid var(--ligne-sombre);
  border-radius: var(--rayon);
}

.rdv-fil {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 0 0 1rem;
  list-style: none;
  border-bottom: 1px solid var(--ligne-sombre);
  font-size: 0.88rem;
  color: var(--acier);
}

.rdv-fil-etape[aria-current="step"] {
  color: var(--neon);
  font-weight: 650;
  box-shadow: 0 3px 0 var(--cyan);
}

.rdv-fil-etape.est-faite {
  color: var(--neon);
}

.rdv-etape {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.prestations-choix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.6rem;
}

.prestation-choix {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--tole-clair);
  border-radius: var(--rayon);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.prestation-choix input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.prestation-choix:hover,
.prestation-choix:has(input:checked) {
  border-color: var(--cyan);
}

.prestation-choix:has(input:checked) {
  background: rgba(57, 212, 228, 0.12);
}

.prestation-choix:has(input:focus-visible) {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.prestation-nom {
  font-weight: 650;
  line-height: 1.3;
}

.prestation-info {
  font-size: 0.85rem;
  color: var(--acier);
}

.rdv-rappel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--schiste-3);
  border-radius: var(--rayon);
}

.jours {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 0.4rem;
}

.jour {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  padding: 0.4rem 0.2rem;
  border: 1px solid var(--tole-clair);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--neon);
  font: inherit;
  line-height: 1.15;
  cursor: pointer;
}

.jour-nom {
  font-size: 0.78rem;
  color: var(--acier);
}

.jour-chiffre {
  font-size: 1.35rem;
  font-weight: 700;
}

.jour-mois {
  font-size: 0.75rem;
  color: var(--acier);
}

.jour:hover:not([disabled]) {
  border-color: var(--cyan);
}

.jour[aria-pressed="true"] {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--cyan-encre);
}

.jour[aria-pressed="true"] .jour-nom,
.jour[aria-pressed="true"] .jour-mois {
  color: var(--cyan-encre);
}

.jour[disabled] {
  cursor: not-allowed;
  border-style: dashed;
  border-color: var(--tole);
  color: #7f898e;
}

.jour[disabled] .jour-nom,
.jour[disabled] .jour-mois {
  color: #7f898e;
}

.creneaux-zone {
  margin-top: 1.5rem;
}

.creneaux-titre {
  font-weight: 650;
}

.creneaux-titre:empty {
  display: none;
}

.creneaux-groupe {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.creneaux-groupe legend {
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  color: var(--acier);
}

.creneaux {
  display: block;
}

.creneaux-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.4rem;
}

.creneau {
  position: relative;
  display: block;
  cursor: pointer;
}

.creneau input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.creneau span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid var(--tole-clair);
  border-radius: var(--rayon);
  font-size: 1rem;
  font-weight: 650;
}

.creneau:hover span {
  border-color: var(--cyan);
}

.creneau input:checked + span {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--cyan-encre);
}

.creneau input:focus-visible + span {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.creneau input:disabled + span {
  cursor: not-allowed;
  border-style: dashed;
  border-color: var(--tole);
  color: #7f898e;
  text-decoration: line-through;
}

.rdv-suite {
  margin-top: 1.25rem;
}

.rdv-etape > .note {
  margin-top: 1.25rem;
}

@media (max-width: 520px) {
  .jours {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 0.3rem;
  }

  .jour {
    min-height: 60px;
  }

  .jour-chiffre {
    font-size: 1.15rem;
  }
}

.rdv-aside .contact-carte {
  margin: 1.5rem 0;
}

/* ------------------------------------------------------------------ */
/* Suivi de mon véhicule                                                */
/* ------------------------------------------------------------------ */

.section--suivi {
  padding-top: clamp(32px, 5vw, 56px);
  background: var(--schiste-2);
  border-top: 1px solid var(--ligne-sombre);
}

.suivi-tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
}

.suivi-numero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  margin: 0 0 0.5rem;
  color: var(--acier);
}

.suivi-numero > span:first-child {
  font-family: var(--police-plaque);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--neon);
}

.suivi-teinte,
.essai-teinte {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--teinte, var(--cyan));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.suivi-etape-titre {
  font-size: var(--pas-3);
}

.suivi-etape-titre:focus {
  outline: none;
}

.suivi-restitution {
  margin: 0.75rem 0 0;
  font-size: var(--pas-1);
}

.suivi-restitution:empty,
.suivi-maj:empty {
  display: none;
}

.suivi-maj {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  color: var(--acier);
}

.suivi-grille {
  display: grid;
  grid-template-columns: minmax(0, 7.5fr) minmax(0, 4.5fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .suivi-grille {
    grid-template-columns: 1fr;
  }
}

.suivi-sous-titre {
  margin-bottom: 0.75rem;
  font-size: var(--pas-1);
}

.suivi-sous-titre + .sms {
  margin-bottom: 1rem;
}

.travaux {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.travaux li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--ligne-sombre);
}

.travaux-nom {
  font-weight: 650;
}

.travaux-ops {
  font-size: 0.88rem;
  color: var(--acier);
}

.travaux-etat {
  flex-basis: 100%;
  font-size: 0.84rem;
  color: var(--cyan);
}

.frise {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.frise-etape {
  position: relative;
  padding: 2.1rem 1rem 0 0;
}

.frise-etape::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 2px;
  background: var(--tole);
}

.frise-etape[data-statut="faite"]::before {
  background: var(--neon);
}

.frise-etape[data-statut="en-cours"]::before {
  background: linear-gradient(90deg, var(--cyan) 0 50%, var(--tole) 50%);
}

.frise-point {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--tole-clair);
  border-radius: 50%;
  background: var(--schiste-2);
}

.frise-etape[data-statut="faite"] .frise-point {
  border-color: var(--neon);
  background: var(--neon);
}

.frise-etape[data-statut="en-cours"] .frise-point {
  border-color: var(--cyan);
  background: var(--cyan);
  transform: scale(1.2);
}

.frise-nom {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 1rem;
  line-height: 1.2;
}

.frise-etape[data-statut="a-venir"] .frise-nom {
  color: var(--acier);
}

.frise-quand {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--acier);
}

.frise-etape[data-statut="en-cours"] .frise-quand {
  color: var(--cyan);
}

.frise-detail {
  margin: 0.5rem 0 0;
  font-size: 0.86rem;
  color: var(--acier);
}

.frise-sms {
  margin-top: 0.6rem;
  font-size: 0.86rem;
}

.frise-sms summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--cyan);
  text-underline-offset: 3px;
}

.sms--frise {
  margin-top: 0.4rem;
  font-size: 0.84rem;
}

@media (max-width: 900px) {
  .frise {
    grid-template-columns: 1fr;
  }

  .frise-etape {
    padding: 0 0 1.4rem 2.2rem;
  }

  .frise-etape::before {
    left: 8px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
  }

  .frise-etape[data-statut="en-cours"]::before {
    background: linear-gradient(180deg, var(--cyan) 0 40%, var(--tole) 40%);
  }

  .frise-etape:last-child::before {
    display: none;
  }
}

.suivi-questions {
  margin: 2rem 0 0;
  color: var(--acier);
}

.essais {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 960px) {
  .essais {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .essais {
    grid-template-columns: 1fr;
  }
}

.essai-bouton {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.25rem 0.6rem;
  width: 100%;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--ligne-sombre);
  border-radius: var(--rayon);
  background: var(--schiste);
  color: var(--neon);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s;
}

.essai-bouton:hover {
  border-color: var(--cyan);
}

.essai-numero {
  font-family: var(--police-plaque);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
}

.essai-plaque {
  justify-self: end;
  font-size: 0.82rem;
  color: var(--acier);
}

.essai-vehicule {
  grid-column: 1 / -1;
  font-size: 0.9rem;
  color: var(--acier);
}

.essai-etape {
  grid-column: 1 / -1;
  font-family: var(--police-titre);
  font-size: 0.95rem;
  color: var(--cyan);
}

.methode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: methode;
  border-top: 1px solid var(--ligne-sombre);
}

.methode-etape {
  counter-increment: methode;
  padding: 1.25rem 1.5rem 1.25rem 0;
  border-bottom: 1px solid var(--ligne-sombre);
}

.methode-nom {
  margin: 0 0 0.35rem;
  font-family: var(--police-titre);
  font-size: 1.05rem;
}

.methode-nom::before {
  content: counter(methode) " ";
  margin-right: 0.35rem;
  font-family: var(--police-plaque);
  color: var(--cyan);
}

.methode-etape p:last-child {
  margin: 0;
  color: var(--acier);
  font-size: 0.95rem;
}

.methode--compacte {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.methode--compacte .methode-etape {
  padding-block: 0.85rem;
}

@media (max-width: 760px) {
  .methode {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* Espace atelier                                                       */
/* ------------------------------------------------------------------ */

.encart-brnsg {
  max-width: 46rem;
  margin: 1.5rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 0;
  background: #0a0a0a;
  color: #f4f4f2;
  font: 13px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 0 0 1px #2c2c2c;
}

.atelier-code {
  max-width: 24rem;
}

.atelier-statut {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  background: var(--schiste-3);
  border-left: 3px solid var(--cyan);
  border-radius: var(--rayon);
}

.dossiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 900px) {
  .dossiers {
    grid-template-columns: 1fr;
  }
}

.dossier {
  display: grid;
  gap: 0.9rem;
  padding: 1.25rem;
  background: var(--schiste-2);
  border: 1px solid var(--ligne-sombre);
  border-radius: var(--rayon);
  --fond-plan: var(--schiste-2);
}

.dossier[data-modifie="oui"] {
  border-color: var(--cyan);
}

.dossier-numero {
  margin: 0;
  font-family: var(--police-plaque);
  font-size: 1.35rem;
  letter-spacing: 0.05em;
}

.dossier-plaque {
  margin-left: 0.5rem;
  font-size: 1rem;
  color: var(--acier);
}

.dossier-vehicule {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.2rem 0 0;
  color: var(--acier);
  font-size: 0.92rem;
}

.dossier-plan {
  max-width: 420px;
}

.dossier-jauge {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dossier-jauge-pas {
  padding-top: 0.45rem;
  border-top: 4px solid var(--tole);
  font-size: 0.72rem;
  color: var(--acier);
  text-align: center;
  line-height: 1.2;
}

.dossier-jauge-pas[data-fait="oui"] {
  border-top-color: var(--cyan);
  color: var(--neon);
}

.dossier-etat {
  margin: 0;
  font-weight: 650;
}

.dossier-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}

.dossier-envoi .sms::after {
  content: "Envoyé au client";
  position: absolute;
  right: 0.9rem;
  bottom: -1.5rem;
  font-size: 0.75rem;
  color: var(--acier);
}

.dossier-envoi {
  margin-bottom: 1rem;
}

.dossier-lien {
  margin: 0;
  font-size: 0.92rem;
}

/* ------------------------------------------------------------------ */
/* Équipe, avis, accès                                                  */
/* ------------------------------------------------------------------ */

.portraits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1000px) {
  .portraits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .portraits {
    grid-template-columns: 1fr;
  }
}

.portrait-image {
  overflow: hidden;
  margin-bottom: 1rem;
  border-radius: var(--rayon);
}

.portrait-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.portrait-nom {
  font-size: var(--pas-1);
}

.portrait-role {
  margin: 0.3rem 0 0.6rem;
  color: var(--cyan);
  font-size: 0.92rem;
  font-weight: 600;
}

.portrait p:last-child {
  color: var(--acier);
  font-size: 0.95rem;
}

.chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--ligne-sombre);
  border: 1px solid var(--ligne-sombre);
}

.chiffres > div {
  padding: 1.25rem;
  background: var(--schiste-2);
}

.chiffres dt {
  font-size: var(--pas-2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.chiffres dd {
  margin: 0.35rem 0 0;
  color: var(--acier);
  font-size: 0.92rem;
}

.section--image {
  padding: 0;
}

.image-large {
  margin: 0;
}

.image-large img {
  width: 100%;
  max-height: 86svh;
  object-fit: cover;
}

.image-large figcaption {
  width: min(100% - 2 * var(--gouttiere), var(--colonne));
  margin-inline: auto;
}

.avis-entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}

.avis-synthese {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
}

.avis-chiffre {
  font-family: var(--police-titre);
  font-size: var(--pas-4);
  line-height: 1;
  color: var(--cyan);
}

.avis-detail {
  color: var(--acier);
}

.avis-liste {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Le premier avis est mis en avant, les suivants se rangent à côté. */
.avis-liste > .avis-carte:first-child {
  grid-row: span 2;
  justify-content: space-between;
}

.avis-liste > .avis-carte:first-child .avis-texte p {
  font-size: var(--pas-1);
  font-weight: 500;
  line-height: 1.5;
}

.avis-liste--complete {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.avis-liste--complete > .avis-carte:first-child {
  grid-row: auto;
}

.avis-liste--complete > .avis-carte:first-child .avis-texte p {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

@media (max-width: 860px) {
  .avis-liste,
  .avis-liste--complete {
    grid-template-columns: 1fr;
  }

  .avis-liste > .avis-carte:first-child {
    grid-row: auto;
  }
}

.avis-carte {
  display: flex;
  flex-direction: column;
  padding: 1.35rem;
  border: 1px solid var(--ligne-sombre);
  border-radius: var(--rayon);
  background: var(--schiste-2);
}

.avis-note-unitaire {
  margin: 0 0 0.6rem;
  font-family: var(--police-plaque);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.avis-texte {
  flex: 1;
  margin: 0;
}

.avis-texte p {
  margin: 0;
}

.avis-auteur {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.8rem;
  margin: 1rem 0 0;
  font-size: 0.86rem;
  color: var(--acier);
}

.avis-nom {
  color: var(--neon);
  font-weight: 650;
}

.acces-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

@media (max-width: 860px) {
  .acces-grille {
    grid-template-columns: 1fr;
  }
}

.horaires-liste > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--ligne-sombre);
}

.horaires-liste dt {
  font-weight: 650;
}

.horaires-liste dd {
  margin: 0;
  text-align: right;
  color: var(--acier);
}

.horaires-etat {
  margin: 1rem 0;
  font-weight: 600;
}

.contact-carte {
  margin-bottom: 1.5rem;
}

.contact-tel {
  margin: 0 0 0.35rem;
  font-size: var(--pas-2);
  font-weight: 700;
}

.contact-tel a {
  text-decoration: none;
}

.contact-tel a:hover {
  text-decoration: underline;
  text-decoration-color: var(--cyan);
}

.contact-statut {
  color: var(--acier);
}

.contact-adresse {
  margin-bottom: 0.6rem;
  font-style: normal;
  font-weight: 600;
}

.contact-acces {
  color: var(--acier);
  font-size: 0.95rem;
}

.faq-grille {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

@media (max-width: 860px) {
  .faq-grille {
    grid-template-columns: 1fr;
  }
}

.faq-item {
  border-bottom: 1px solid var(--ligne-claire);
}

.faq-item:first-child {
  border-top: 1px solid var(--ligne-claire);
}

.faq-question {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 0.9rem 0;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-signe {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.faq-signe::before,
.faq-signe::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  background: var(--cyan-sombre);
  transition: transform 0.25s var(--ease);
}

.faq-signe::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-signe::after {
  transform: rotate(0);
}

.faq-reponse p {
  margin: 0 0 1rem;
  color: var(--encre-douce);
}

.appel-grille {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 3rem;
}

.appel-grille p {
  max-width: 34rem;
  margin: 1rem 0 0;
}

.appel-grille .actions {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Têtes de pages intérieures                                           */
/* ------------------------------------------------------------------ */

.page-tete {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
}

.page-tete-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.page-titre {
  font-size: var(--pas-4);
}

.page-chapo {
  max-width: 40rem;
  margin-top: 1.25rem;
  font-size: var(--pas-1);
  line-height: 1.5;
  color: #d3dadc;
}

.page-tete-image {
  overflow: hidden;
  border-radius: var(--rayon);
}

.page-tete-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-tete-image--portrait img {
  aspect-ratio: 1 / 1;
  object-position: 50% 30%;
}

.page-tete--simple .suivi-form {
  margin-top: 2rem;
  max-width: 44rem;
}

.page-tete--simple .note {
  margin-top: 1rem;
}

.page-tete--404 {
  min-height: 56svh;
}

.code-erreur {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
}

@media (max-width: 860px) {
  .page-tete-grille {
    grid-template-columns: 1fr;
  }
}

.texte-legal {
  max-width: 48rem;
}

.texte-legal h2 {
  margin: 2rem 0 0.75rem;
  font-size: var(--pas-1);
}

.texte-legal h2:first-child {
  margin-top: 0;
}

.texte-legal a {
  text-decoration-color: var(--cyan-sombre);
}

/* ------------------------------------------------------------------ */
/* Pied de page et barre d'actions mobile                               */
/* ------------------------------------------------------------------ */

.pied {
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
  background: var(--pied);
  border-top: 1px solid var(--ligne-sombre);
  font-size: 0.94rem;
}

.pied-grille {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 900px) {
  .pied-grille {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .pied-grille {
    grid-template-columns: 1fr;
  }
}

.pied-titre {
  margin-bottom: 0.75rem;
  font-family: var(--police-titre);
  font-size: 0.98rem;
}

.pied-adresse {
  margin: 1.25rem 0 0.5rem;
  font-style: normal;
}

.pied-tel a {
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
}

.pied-horaires,
.pied-liens {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pied-horaires li {
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0;
}

.pied-horaires li span:last-child {
  color: var(--acier);
}

.pied-liens li {
  padding: 0.2rem 0;
}

.pied-liens a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  text-decoration: none;
}

.pied-liens a:hover {
  text-decoration: underline;
  text-decoration-color: var(--cyan);
}

.pied-liens--texte li {
  color: var(--acier);
}

.pied-statut {
  margin-top: 0.75rem;
  color: var(--acier);
}

.pied-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ligne-sombre);
  font-size: 0.86rem;
  color: var(--acier);
}

.pied-legal p {
  margin: 0;
}

.pied-legal a {
  display: inline-block;
  padding-block: 0.4rem;
}

.barre-actions {
  display: none;
}

@media (max-width: 760px) {
  .barre-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--brnsg-onglet, 0px);
    z-index: 800;
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    gap: 1px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--tole);
    border-top: 1px solid var(--tole);
  }

  .barre-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 54px;
    background: var(--schiste);
    color: var(--neon);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
  }

  .barre-actions .icone {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: none;
  }

  .barre-actions-devis {
    background: var(--cyan) !important;
    color: var(--cyan-encre) !important;
  }

  body {
    padding-bottom: calc(56px + var(--brnsg-onglet, 0px) + env(safe-area-inset-bottom, 0px));
  }
}

/* ------------------------------------------------------------------ */
/* Mouvement                                                            */
/* ------------------------------------------------------------------ */

/* Opacité nulle plutôt que visibility: hidden, pour que les titres restent dans
   l'arbre d'accessibilité (ordre des titres) avant leur animation. */
.js-motion [data-titre-anime],
.js-motion .hero-titre {
  opacity: 0;
}

.js-motion .hero-chapo,
.js-motion .hero-actions,
.js-motion .hero-faits,
.js-motion .hero-suivi,
.js-motion .hero-etat {
  opacity: 0;
}

.js-motion [data-revele]:not(.est-revele) {
  clip-path: inset(0 0 100% 0);
}

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

  .plan[data-reflet="oui"] .plan-reflet-bande {
    animation: none;
    display: none;
  }

  .bouton::after {
    display: none;
  }
}

@media print {
  .entete,
  .barre-actions,
  .pied {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}