/* ==========================================================================
   Repère Québec
   Couleur   : vert = Repère Québec · marine = la loi · or = ce qu'on a trouvé
   Forme     : les objets s'arrondissent, les traits restent droits
   Mouvement : tout se trace de la gauche vers la droite, comme un stylo
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("./fonts/archivo-latin.woff2") format("woff2");
}

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

@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/plexmono-latin.woff2") format("woff2");
}

/* ==========================================================================
   Jetons — alignés sur l'écosystème Repère (console, espace client, Sécurité)

   Le scanner partageait déjà les trois polices ; il conservait en revanche
   l'ancienne palette : un vert plus sombre, un papier tirant sur le vert, et
   une courbe de sortie molle. Les valeurs ci-dessous sont exactement celles
   de la suite, pour qu'un visiteur qui passe du scanner au portail ne
   ressente aucune rupture.

   Les noms historiques restent : ce sont des alias vers les nouvelles
   échelles, donc les 2 300 lignes qui suivent continuent de fonctionner
   sans réécriture.
   ========================================================================== */

:root {
  /* --- Repère Québec — conformité Loi 25 --------------------------------- */
  --qc-800: #123f2e;
  --qc-700: #17553d;
  --qc-600: #1F6A4E;
  --qc-500: #2c8564;
  --qc-100: #e7f1ec;
  --qc-050: #f3f9f6;

  /* --- Repère Sécurité — présent pour le vocabulaire commun -------------- */
  --sec-700: #2C4068;
  --sec-600: #3B5488;
  --sec-100: #eaeff8;

  /* L'accent courant. Le scanner appartient à Repère Québec : il vaut le
     vert. Les composants lisent --accent, comme dans la console. */
  --accent: var(--qc-600);
  --accent-fonce: var(--qc-700);
  --accent-voile: var(--qc-100);

  --marine: #0c1b2a;

  /* Alias historiques du vert. */
  --vert: var(--qc-600);
  --vert-fonce: var(--qc-700);
  --vert-profond: var(--qc-800);
  --vert-clair: var(--qc-500);
  --vert-voile: var(--qc-100);

  --or: #d9a93c;
  --or-fonce: #8a6420;
  --or-clair: #f0d489;
  --or-voile: #f9f2e1;
  --surligneur: #fbe08f;
  --rouge: #B4402F;
  --rouge-fonce: #8f3021;
  --rouge-voile: #fbeae7;

  /* --- Neutres froids : disponibles pour tout nouveau composant, afin de
     partager le vocabulaire de la console. Ils ne définissent PAS le fond
     du scanner — voir juste en dessous. -------------------------------- */
  --n-025: #FAFBFB;
  --n-050: #F4F6F6;
  --n-100: #EBEFEF;
  --n-200: #DFE4E3;
  --n-300: #C6CFCD;
  --n-400: #9AA6A3;
  --n-500: #6C7A77;
  --n-600: #55625F;
  --n-700: #3D4A47;

  /* --- Neutres chauds : le papier du scanner -----------------------------
     La console est passée au neutre froid : elle est fixée huit heures par
     jour, et le froid y fatigue moins l'œil tout en laissant ressortir les
     statuts colorés. Le scanner est l'inverse — une page publique, regardée
     quelques minutes par une PME qui se demande si elle est en faute. Le
     tiède y rassure là où le gris froid paraît clinique.

     Les traits suivent le fond : un trait froid posé sur un papier chaud
     tire visiblement vers le bleu. Cette famille reste donc chaude, entière
     et cohérente, comme elle l'était à l'origine. */
  --papier: #eef1eb;
  --blanc: #ffffff;
  --encre: #2c3b39;
  --gris: #5e6d68;
  --gris-clair: #8b968f;
  --trait: #d3dad2;
  --trait-fort: #bcc5bb;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texte: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Échelles ---------------------------------------------------------- */
  --t-xs: 0.6875rem;
  --t-s: 0.75rem;
  --t-m: 0.8125rem;
  --t-base: 0.875rem;
  --t-l: 0.9375rem;
  --t-xl: 1.0625rem;
  --t-2xl: 1.3125rem;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-10: 40px;
  --e-12: 48px;

  /* Le scanner s'arrondit plus que la console : c'est une page publique,
     regardée quelques minutes, pas un outil de travail quotidien. */
  --r-xs: 6px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 30px;
  --r-full: 999px;

  /* --- Mouvement : les courbes de l'écosystème --------------------------- */
  --sortie: cubic-bezier(0.23, 1, 0.32, 1);
  --va-vient: cubic-bezier(0.77, 0, 0.175, 1);

  --d-1: 120ms;
  --d-2: 160ms;
  --d-3: 200ms;
  --d-4: 260ms;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

h1,
h2,
h3,
p,
ul,
ol {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--marine);
  font-family: var(--display);
  font-stretch: 116%;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 {
  margin-bottom: 26px;
  font-size: clamp(2.4rem, 4.1vw, 3.65rem);
  font-weight: 800;
  line-height: 1.04;
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(2rem, 3.4vw, 2.95rem);
  font-weight: 700;
  line-height: 1.07;
}

h3 {
  margin-bottom: 10px;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.22;
}

.container {
  width: min(100% - 48px, 1200px);
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: var(--r-s);
  background: var(--or);
  color: var(--marine);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Étiquettes qui identifient un élément dans une liste. Jamais décoratives. */
.code {
  margin-bottom: 14px;
  color: var(--vert);
  font-family: var(--display);
  font-size: 0.82rem;
  font-stretch: 106%;
  font-weight: 600;
  line-height: 1.4;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--trait);
  background: var(--papier);
}

.nav {
  display: flex;
  min-height: 80px;
  align-items: center;
  gap: 32px;
}

.brand {
  display: inline-flex;
  margin-right: auto;
  align-items: center;
}

.brand img {
  width: auto;
  height: 50px;
}

.nav-liens {
  display: flex;
  gap: 30px;
}

.nav-liens a {
  padding-bottom: 3px;
  background-image: linear-gradient(var(--or), var(--or));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-size 240ms var(--sortie), color 150ms ease;
}

.nav-liens a:hover,
.nav-liens a:focus-visible {
  background-size: 100% 2px;
  color: var(--marine);
}

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

.bouton {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border: 0;
  border-radius: var(--r-s);
  font-family: var(--display);
  font-size: 0.94rem;
  font-stretch: 106%;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--d-2) ease, transform var(--d-2) var(--sortie);
}

.bouton:active {
  transform: scale(0.97);
}

.bouton-petit {
  min-height: 46px;
  padding: 12px 22px;
  background: var(--marine);
  color: var(--blanc);
  font-size: 0.84rem;
}

@media (hover: hover) and (pointer: fine) {
  .bouton-petit:hover {
    background: var(--accent);
  }
}

.bouton-vert {
  background: var(--accent);
  color: var(--blanc);
}

@media (hover: hover) and (pointer: fine) {
  .bouton-vert:hover {
    background: var(--accent-fonce);
  }
}

.bouton-or {
  background: var(--or);
  color: var(--marine);
}

@media (hover: hover) and (pointer: fine) {
  .bouton-or:hover {
    background: var(--or-clair);
  }
}

.bouton-pleine {
  width: 100%;
}

/* .text-link est conservé pour la page politique de confidentialité. */
.lien-texte,
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--vert);
  font-weight: 700;
  text-decoration: none;
}

.lien-texte:hover,
.text-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* --- Le surligneur : l'élément signature ---------------------------------- */

mark.surligne {
  padding: 0 0.06em;
  border-radius: var(--r-xs);
  background-color: transparent;
  background-image: linear-gradient(var(--surligneur), var(--surligneur));
  background-position: 0 0.4em;
  background-repeat: no-repeat;
  background-size: 0% 0.52em;
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

h1 mark.surligne {
  animation: surligner 800ms var(--sortie) 700ms forwards;
}

/* Sans prise en charge du défilement animé, la marque reste simplement tracée. */
.surligne-defilement {
  background-size: 100% 0.52em;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .surligne-defilement {
      background-size: 0% 0.52em;
      animation: surligner auto linear forwards;
      animation-timeline: view();
      animation-range: entry 45% entry 95%;
    }
  }
}

@keyframes surligner {
  to {
    background-size: 100% 0.52em;
  }
}

/* --- Héros ---------------------------------------------------------------- */

.hero {
  padding: 84px 0 100px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(370px, 0.98fr);
  gap: 68px;
  align-items: center;
}

.hero-intro {
  max-width: 34ch;
  margin-bottom: 34px;
  font-size: clamp(1.08rem, 1.5vw, 1.24rem);
  line-height: 1.55;
}

.groupe-boutons {
  display: flex;
  align-items: center;
  gap: 28px;
}

.hero-note {
  max-width: 42ch;
  margin: 24px 0 0;
  color: var(--gris);
  font-size: 0.87rem;
}

/* --- Signature : la page annotée ------------------------------------------ */

.apercu {
  margin: 0;
}

.apercu-cadre {
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-m);
  background: var(--blanc);
}

.apercu-barre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px 14px;
  border-bottom: 1px solid var(--trait);
}

.apercu-url {
  color: var(--marine);
  font-family: var(--mono);
  font-size: 0.76rem;
}

.apercu-etat {
  color: var(--vert);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.apercu-grille {
  display: grid;
  padding: 24px 22px 26px;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  column-gap: 30px;
  row-gap: 16px;
}

.ap-bloc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-s);
}

.ap-bloc span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #dfe4e0;
}

/* En-tête du site */
.ap-entete .ap-logo {
  width: 46px;
  height: 16px;
  margin-right: auto;
  border-radius: var(--r-xs);
  background: #c9d0cb;
}

.ap-entete .ap-nav {
  width: 27px;
}

/* Bandeau d'accueil */
.ap-titre {
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  padding-block: 16px;
}

.ap-titre .ap-ligne {
  height: 13px;
  background: #ccd3ce;
}

.ap-titre .ap-ligne:first-child { width: 82%; }
.ap-titre .ap-ligne:nth-child(2) { width: 54%; }

.ap-titre .ap-cta {
  width: 76px;
  height: 21px;
  margin-top: 4px;
  border-radius: var(--r-xs);
  background: #d7dcd8;
}

/* Formulaire */
.ap-form .ap-champ {
  width: 100%;
  height: 18px;
  border: 1px solid #dde2de;
  border-radius: var(--r-xs);
  background: #f6f8f6;
}

.ap-form .ap-envoi {
  width: 64px;
  height: 20px;
  margin-top: 3px;
  border-radius: var(--r-xs);
  background: #cdd4cf;
}

/* Pied de page */
.ap-pied .ap-mini {
  width: 40px;
  height: 6px;
}

.ap-pied .ap-mini:nth-child(2) { width: 56px; }
.ap-pied .ap-mini:nth-child(3) { width: 32px; }

/* Bandeau de témoins */
.ap-banniere {
  justify-content: space-between;
}

.ap-banniere .ap-ligne {
  width: 60%;
  height: 7px;
}

.ap-banniere .ap-mini {
  width: 46px;
  height: 16px;
  border-radius: var(--r-xs);
  background: #d7dcd8;
}

/* Éléments en écart, passés au surligneur */
.ap-marque {
  background-color: transparent;
  background-image: linear-gradient(var(--surligneur), var(--surligneur));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: inset 0 0 0 1px rgba(217, 169, 60, 0.5);
}

.ap-marque span {
  background: rgba(12, 27, 42, 0.16);
}

.ap-marque .ap-champ {
  border-color: rgba(12, 27, 42, 0.16);
  background: rgba(255, 255, 255, 0.5);
}

.ap-note {
  position: relative;
  margin: 0;
  color: var(--vert-fonce);
  font-size: 0.77rem;
  line-height: 1.35;
}

.ap-note::before {
  display: block;
  margin-bottom: 4px;
  color: var(--vert);
  content: attr(data-code);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
}

.ap-note::after {
  position: absolute;
  top: 8px;
  right: 100%;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--vert-clair);
  content: "";
}

.apercu figcaption {
  margin-top: 18px;
  color: var(--gris);
  font-size: 0.77rem;
  line-height: 1.45;
}

/* Séquence d'ouverture : la page se dessine, puis on la marque, puis on l'annote. */
@media (prefers-reduced-motion: no-preference) {
  .ap-bloc {
    animation: bloc-parait 320ms var(--sortie) both;
  }

  .ap-marque {
    animation:
      bloc-parait 320ms var(--sortie) both,
      marquer 460ms var(--sortie) both;
  }

  .ap-entete { animation-delay: 260ms; }
  .ap-titre { animation-delay: 350ms; }
  .ap-form { animation-delay: 440ms, 1160ms; }
  .ap-pied { animation-delay: 530ms, 1320ms; }
  .ap-banniere { animation-delay: 620ms, 1480ms; }

  .ap-note {
    animation: note-parait 400ms var(--sortie) both;
  }

  .ap-note::after {
    animation: trait-parait 280ms var(--sortie) both;
  }

  .ap-note:nth-of-type(1) { animation-delay: 1580ms; }
  .ap-note:nth-of-type(2) { animation-delay: 1740ms; }
  .ap-note:nth-of-type(3) { animation-delay: 1900ms; }

  .ap-note:nth-of-type(1)::after { animation-delay: 1530ms; }
  .ap-note:nth-of-type(2)::after { animation-delay: 1690ms; }
  .ap-note:nth-of-type(3)::after { animation-delay: 1850ms; }
}

@keyframes bloc-parait {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
}

@keyframes marquer {
  from {
    background-size: 0% 100%;
    box-shadow: inset 0 0 0 1px rgba(217, 169, 60, 0);
  }
}

@keyframes note-parait {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
}

@keyframes trait-parait {
  from {
    width: 0;
  }
}

/* --- Rythme des sections -------------------------------------------------- */

.section {
  padding: 100px 0;
}

/* Blocs teintés posés sur le papier plutôt que bandes pleine largeur */
.bloc-pose {
  width: min(100% - 32px, 1560px);
  margin-inline: auto;
  border-radius: var(--r-l);
}

.titre-section {
  max-width: 780px;
  margin-bottom: 54px;
}

.titre-section > p:last-child {
  max-width: 64ch;
  margin-bottom: 0;
  color: var(--gris);
  font-size: 1.04rem;
}

.titre-eclate {
  display: grid;
  max-width: none;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 72px;
  align-items: end;
}

.titre-eclate h2 {
  max-width: 17ch;
  margin-bottom: 0;
}

.titre-eclate > p {
  max-width: 52ch;
  margin-bottom: 0;
  color: var(--gris);
  font-size: 1.04rem;
}

/* --- Le constat ----------------------------------------------------------- */

.constat-liste {
  --regle-couleur: var(--marine);
  --regle-epaisseur: 2px;
}

.constat {
  display: grid;
  padding: 30px 0;
  border-bottom: 1px solid var(--trait);
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.constat .code {
  margin-bottom: 0;
  padding-top: 5px;
}

.constat h3 {
  max-width: 30ch;
  margin-bottom: 8px;
}

.constat > div > p {
  max-width: 68ch;
  margin-bottom: 0;
  color: var(--gris);
  font-size: 0.96rem;
}

/* --- Ce que le scan regarde ----------------------------------------------- */

.scan-section {
  background: var(--vert-voile);
}

.points-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.point {
  padding: 30px 30px 34px;
  border: 1px solid rgba(12, 27, 42, 0.09);
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, 0.55);
}

.point .code {
  margin-bottom: 42px;
}

.point p:last-child {
  margin-bottom: 0;
  color: var(--gris);
  font-size: 0.92rem;
}

/* --- Services ------------------------------------------------------------- */

.services-grille {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.42fr);
  gap: 24px;
  align-items: start;
}

.carte-service {
  display: flex;
  padding: 40px 36px;
  border-radius: var(--r-m);
  flex-direction: column;
  justify-content: space-between;
}

.carte-service h3 {
  margin-bottom: 14px;
  font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  line-height: 1.08;
}

.carte-scan {
  border: 1px solid var(--trait-fort);
  background: var(--blanc);
}

.carte-conformite {
  background: var(--vert-profond);
  color: #cddcd3;
}

.carte-conformite h3 {
  color: var(--blanc);
}

.service-intro {
  max-width: 62ch;
  margin-bottom: 26px;
  color: var(--gris);
}

.carte-conformite .service-intro {
  color: #b6c9bd;
}

.liste-reglee {
  margin: 0 0 30px;
  padding: 0;
  border-top: 1px solid var(--trait);
  list-style: none;
}

.liste-reglee li {
  padding: 13px 2px;
  border-bottom: 1px solid var(--trait);
  font-size: 0.92rem;
}

.carte-conformite .liste-reglee,
.carte-conformite .liste-reglee li {
  border-color: rgba(255, 255, 255, 0.14);
}

.scan-pied p {
  margin: 16px 0 0;
  color: var(--gris);
  font-size: 0.79rem;
  line-height: 1.45;
}

.service-entete {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-start;
}

.delai {
  flex: 0 0 auto;
  max-width: 230px;
  margin: 6px 0 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(240, 212, 137, 0.14);
  color: var(--or-clair);
  font-size: 0.77rem;
  line-height: 1.3;
}

.service-detail {
  display: grid;
  grid-template-columns: minmax(230px, 0.95fr) minmax(280px, 1.05fr);
  gap: 40px;
}

.tarifs {
  align-self: start;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.tarif {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.tarif span {
  max-width: 220px;
  color: #b6c9bd;
  font-size: 0.83rem;
}

.tarif strong {
  flex: 0 0 auto;
  color: var(--blanc);
  font-family: var(--display);
  font-size: 1.45rem;
  font-stretch: 116%;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.service-pied {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 10px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.service-pied p {
  margin: 0;
  color: #a3b8ac;
  font-size: 0.78rem;
}

/* --- Méthode -------------------------------------------------------------- */

.methode-section {
  background: var(--vert-voile);
}

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

.etapes li {
  --regle-couleur: var(--vert);
  --regle-epaisseur: 2px;

  padding-top: 24px;
}

.etape-num {
  display: block;
  margin-bottom: 22px;
  color: var(--vert);
  font-family: var(--display);
  font-size: 3.3rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.8;
  opacity: 0.34;
}

.etapes h3 {
  max-width: 20ch;
  margin-bottom: 10px;
}

.etapes p {
  max-width: 40ch;
  margin-bottom: 0;
  color: var(--gris);
  font-size: 0.94rem;
}

/* --- À propos ------------------------------------------------------------- */

.apropos-grille {
  display: grid;
  grid-template-columns: minmax(230px, 0.55fr) minmax(0, 1.45fr);
  gap: 64px;
  align-items: center;
}

.portrait {
  margin: 0;
}

.portrait-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-m);
  object-fit: cover;
}

.portrait figcaption {
  margin-top: 14px;
  color: var(--gris);
  font-family: var(--mono);
  font-size: 0.68rem;
}

.mot-fondateur {
  max-width: 31ch;
  margin-bottom: 28px;
  color: var(--marine);
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  font-stretch: 106%;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.34;
}

/* --- Sources et sanctions ------------------------------------------------- */

.sources-section {
  padding: 100px 0;
  background: var(--blanc);
}

.document {
  width: min(100% - 48px, 1060px);
}

.document-entete {
  --regle-couleur: var(--marine);
  --regle-epaisseur: 3px;

  display: grid;
  padding-top: 32px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: start;
}

.document-entete h2 {
  max-width: 20ch;
  margin-bottom: 16px;
}

.document-entete > div > p:last-child {
  max-width: 72ch;
  margin-bottom: 0;
  color: var(--gris);
}

.document-entete img {
  width: 64px;
  height: auto;
  margin-top: 6px;
  border-radius: 3px;
}

.notes-sources {
  margin-top: 40px;
  border-top: 1px solid var(--trait);
}

.notes-sources p {
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--trait);
  font-size: 0.93rem;
}

.notes-sources strong {
  color: var(--marine);
}

.notes-sources a,
.references a {
  color: var(--vert);
  font-weight: 600;
  text-underline-offset: 4px;
}

.titre-sanctions {
  display: grid;
  margin-top: 60px;
  margin-bottom: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.6fr);
  gap: 52px;
  align-items: end;
}

.titre-sanctions h3 {
  max-width: 28ch;
  margin-bottom: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.titre-sanctions p {
  margin-bottom: 0;
  color: var(--gris);
  font-size: 0.86rem;
}

.table-enveloppe {
  --regle-couleur: var(--marine);
  --regle-epaisseur: 2px;

  overflow-x: auto;
}

.table-sanctions {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.89rem;
  line-height: 1.55;
  text-align: left;
}

.table-sanctions th,
.table-sanctions td {
  padding: 18px 16px;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}

.table-sanctions th:first-child,
.table-sanctions td:first-child {
  padding-left: 0;
}

.table-sanctions th:last-child,
.table-sanctions td:last-child {
  padding-right: 0;
}

.table-sanctions thead th {
  color: var(--gris);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.table-sanctions tbody th {
  width: 20%;
  color: var(--marine);
  font-weight: 700;
}

.table-sanctions tbody td:nth-child(2) {
  width: 30%;
}

.table-sanctions strong {
  color: var(--marine);
  font-weight: 700;
}

.note-sanctions {
  max-width: 90ch;
  margin: 26px 0 0;
  padding: 18px 22px;
  border-radius: var(--r-s);
  background: #fbf6ea;
  color: var(--gris);
  font-size: 0.83rem;
}

.note-sanctions strong {
  color: var(--marine);
}

/* --- Clôture : l'appel final et le pied forment un seul bloc marine ------- */

.appel-final {
  padding: 88px 0 0;
  border-radius: var(--r-l) var(--r-l) 0 0;
  background: var(--marine);
}

.appel-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  padding-bottom: 76px;
}

.appel-final h2 {
  max-width: 19ch;
  margin-bottom: 0;
  color: var(--blanc);
}

.appel-final .bouton {
  flex: 0 0 auto;
}

.site-footer {
  padding: 0 0 28px;
  background: var(--marine);
  color: #93a7b3;
}

.footer-principal {
  display: grid;
  padding: 44px 0 42px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  grid-template-columns: 1.5fr 1fr 0.8fr 1.1fr;
  gap: 40px;
  align-items: start;
}

.footer-identite p {
  max-width: 24ch;
  margin: 12px 0 0;
  font-size: 0.85rem;
}

.footer-marque {
  color: var(--blanc);
  font-family: var(--display);
  font-size: 1.3rem;
  font-stretch: 116%;
  font-weight: 700;
  text-decoration: none;
}

.site-footer address {
  font-size: 0.85rem;
  font-style: normal;
  line-height: 1.75;
}

.site-footer a:hover {
  color: var(--or-clair);
}

.site-footer nav {
  display: grid;
  gap: 12px;
}

.site-footer nav a,
.site-footer address a {
  color: #c3d1d9;
  font-size: 0.85rem;
  text-decoration: none;
}

.site-footer nav a:hover,
.site-footer address a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-bas {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.footer-bas p {
  max-width: 760px;
  margin: 0;
  color: #6f8290;
  font-size: 0.73rem;
}

/* --- Les filets se tracent au défilement ---------------------------------- */

.constat-liste,
.etapes li,
.document-entete,
.table-enveloppe {
  background-image: linear-gradient(var(--regle-couleur), var(--regle-couleur));
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% var(--regle-epaisseur);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .constat-liste,
    .etapes li,
    .document-entete,
    .table-enveloppe {
      animation: tracer-regle auto linear both;
      animation-timeline: view();
      animation-range: entry 15% entry 72%;
    }

    .etapes li:nth-child(2) { animation-range: entry 20% entry 77%; }
    .etapes li:nth-child(3) { animation-range: entry 25% entry 82%; }
  }
}

@keyframes tracer-regle {
  from {
    background-size: 0% var(--regle-epaisseur);
  }
}

/* --- Page politique de confidentialité ------------------------------------ */

.policy-back {
  font-size: 0.86rem;
}

.policy-main {
  padding: 80px 0 104px;
}

.policy-container {
  width: min(100% - 48px, 900px);
}

.policy-heading {
  margin-bottom: 44px;
}

.policy-heading h1 {
  max-width: 16ch;
  margin-bottom: 20px;
  font-size: clamp(2.5rem, 6vw, 4.2rem);
}

.policy-heading > p:not(.eyebrow, .policy-updated) {
  max-width: 68ch;
  color: var(--gris);
  font-size: 1.02rem;
}

.eyebrow {
  margin-bottom: 14px;
  color: var(--vert);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.policy-updated {
  margin: 18px 0 0;
  color: var(--gris);
  font-family: var(--mono);
  font-size: 0.7rem;
}

.policy-card {
  padding: 48px 54px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-m);
  background: var(--blanc);
}

.policy-card section + section {
  margin-top: 38px;
  padding-top: 36px;
  border-top: 1px solid var(--trait);
}

.policy-card h2 {
  margin-bottom: 14px;
  font-size: 1.5rem;
}

.policy-card p {
  margin-bottom: 0;
}

.policy-card p + p,
.policy-card ul + p {
  margin-top: 14px;
}

.policy-card ul {
  margin: 14px 0 0;
  padding-left: 22px;
}

.policy-card li + li {
  margin-top: 5px;
}

.policy-card a {
  color: var(--vert);
  font-weight: 600;
  text-underline-offset: 4px;
}

.policy-card .responsible-contact {
  padding: 18px 22px;
  border-radius: var(--r-s);
  background: #fbf6ea;
}

/* --- Adaptations ---------------------------------------------------------- */

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

  .point .code {
    margin-bottom: 20px;
  }
}

@media (max-width: 980px) {
  .nav-liens {
    display: none;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .hero-copy {
    max-width: 720px;
  }

  .hero-intro {
    max-width: 46ch;
  }

  .apercu {
    max-width: 620px;
  }

  .titre-eclate {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .constat {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 28px;
  }

  .services-grille {
    grid-template-columns: 1fr;
  }

  .etapes {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .etapes li {
    display: grid;
    padding-top: 22px;
    grid-template-columns: 62px minmax(0, 1fr);
    column-gap: 24px;
  }

  .etape-num {
    grid-row: span 2;
    margin-bottom: 0;
  }

  .etapes h3 {
    align-self: center;
  }

  .apropos-grille {
    gap: 48px;
  }

  .titre-sanctions {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
  }

  .footer-principal {
    grid-template-columns: 1.4fr 1fr;
    row-gap: 34px;
  }
}

@media (max-width: 720px) {
  .container,
  .document,
  .policy-container {
    width: min(100% - 32px, 1200px);
  }

  .bloc-pose {
    width: min(100% - 16px, 1560px);
    border-radius: 22px;
  }

  .nav {
    min-height: 70px;
  }

  .brand img {
    height: 42px;
  }

  .bouton-petit {
    min-height: 44px;
    padding: 11px 17px;
    font-size: 0.79rem;
  }

  .hero {
    padding: 52px 0 68px;
  }

  h1 {
    font-size: clamp(2.5rem, 11vw, 3.6rem);
  }

  h2 {
    font-size: clamp(1.85rem, 8vw, 2.6rem);
  }

  .groupe-boutons {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .groupe-boutons .bouton {
    width: 100%;
  }

  .groupe-boutons .lien-texte {
    align-self: flex-start;
  }

  .apercu-grille {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 16px 22px;
    row-gap: 12px;
  }

  .ap-vide {
    display: none;
  }

  .ap-note {
    padding-left: 16px;
  }

  .ap-note::after {
    top: 6px;
    right: auto;
    left: 0;
    width: 2px;
    height: calc(100% - 8px);
  }

  .section,
  .sources-section {
    padding: 72px 0;
  }

  .titre-section {
    margin-bottom: 38px;
  }

  .constat {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }

  .carte-service {
    padding: 32px 26px;
  }

  .service-entete,
  .service-pied,
  .appel-inner {
    align-items: stretch;
    flex-direction: column;
  }

  .delai {
    max-width: none;
    align-self: flex-start;
  }

  .service-detail {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .service-pied .bouton,
  .appel-final .bouton {
    width: 100%;
  }

  .apropos-grille {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .portrait {
    max-width: 300px;
  }

  .document-entete {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 26px;
  }

  .document-entete img {
    width: 56px;
    grid-row: 1;
  }

  .notes-sources {
    margin-top: 30px;
  }

  .titre-sanctions {
    margin-top: 46px;
  }

  .table-enveloppe {
    overflow: visible;
  }

  .table-sanctions,
  .table-sanctions tbody,
  .table-sanctions tr,
  .table-sanctions th,
  .table-sanctions td {
    display: block;
    width: 100%;
  }

  .table-sanctions thead {
    display: none;
  }

  .table-sanctions tbody tr {
    padding: 20px 0;
    border-bottom: 1px solid var(--trait);
  }

  .table-sanctions th,
  .table-sanctions td,
  .table-sanctions th:first-child,
  .table-sanctions td:first-child,
  .table-sanctions th:last-child,
  .table-sanctions td:last-child {
    padding: 0;
    border-bottom: 0;
  }

  .table-sanctions tbody th {
    margin-bottom: 12px;
  }

  .table-sanctions tbody td + td {
    margin-top: 13px;
  }

  .table-sanctions td::before {
    display: block;
    margin-bottom: 3px;
    color: var(--gris);
    content: attr(data-label);
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .appel-final {
    padding-top: 62px;
    border-radius: 22px 22px 0 0;
  }

  .appel-inner {
    padding-bottom: 54px;
  }

  .footer-principal {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .footer-identite {
    grid-column: 1 / -1;
  }

  .footer-bas {
    flex-direction: column;
    gap: 10px;
  }

  .policy-main {
    padding: 56px 0 76px;
  }

  .policy-card {
    padding: 30px 24px;
  }

  .policy-card section + section {
    margin-top: 30px;
    padding-top: 28px;
  }

  .policy-card h2 {
    font-size: 1.35rem;
  }
}

@media (max-width: 390px) {
  .container,
  .document,
  .policy-container {
    width: min(100% - 24px, 1200px);
  }

  .brand img {
    height: 38px;
  }

  .bouton-petit {
    padding-inline: 14px;
    font-size: 0.73rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  mark.surligne {
    animation: none;
    background-size: 100% 0.52em;
  }

  .bouton,
  .nav-liens a,
  .skip-link {
    transition: none;
  }
}

/* ==========================================================================
   Page scanner
   Un document à deux états, la demande puis le rapport,
   posés le long d'un rail qui occupe la marge et porte les deux jalons.
   ========================================================================== */

.rail-grille {
  display: grid;
  width: min(100% - 48px, 900px);
  margin-inline: auto;
  grid-template-columns: 190px minmax(0, 1fr);
  column-gap: 44px;
}

.lien-retour {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
}

/* --- Ouverture ------------------------------------------------------------ */

.demande {
  padding: 46px 0 40px;
}

.demande-texte {
  grid-column: 2;
}

.demande h1 {
  max-width: 20ch;
  margin-bottom: 16px;
  font-size: clamp(1.95rem, 3.6vw, 2.55rem);
}

.demande-intro {
  max-width: 52ch;
  margin-bottom: 0;
  color: var(--gris);
  font-size: 1rem;
  line-height: 1.55;
}

/* --- Le parcours : deux jalons le long d'un rail -------------------------- */

.parcours {
  position: relative;
  padding-bottom: 92px;
  row-gap: 86px;
}

.parcours::before {
  position: absolute;
  top: 10px;
  bottom: 92px;
  left: 189px;
  width: 2px;
  border-radius: 999px;
  background: var(--trait-fort);
  content: "";
  transform-origin: top center;
}

.jalon {
  padding-right: 26px;
  text-align: right;
}

.jalon-delai {
  margin-bottom: 20px;
  color: var(--gris);
  font-size: 0.87rem;
  line-height: 1.4;
}

.jalon-delai strong {
  color: var(--marine);
  font-weight: 600;
}

.jalon-num {
  margin-bottom: 6px;
  color: var(--vert);
  font-family: var(--display);
  font-size: 2.5rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.8;
  opacity: 0.34;
}

.jalon h2 {
  margin-bottom: 0;
  font-size: 1.08rem;
}

/* --- Le document : cadre commun aux deux états ---------------------------- */

.feuille {
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-m);
  background: var(--blanc);
}

.feuille-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 30px 15px;
  border-bottom: 1px solid var(--trait);
}

.feuille-titre {
  color: var(--marine);
  font-family: var(--display);
  font-size: 0.96rem;
  font-stretch: 106%;
  font-weight: 700;
}

.feuille-mention {
  color: var(--gris);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.feuille-corps {
  padding: 30px 30px 32px;
}

/* --- Formulaire ----------------------------------------------------------- */

.champ + .champ {
  margin-top: 22px;
}

.champ label {
  display: block;
  margin-bottom: 8px;
  color: var(--marine);
  font-family: var(--display);
  font-size: 0.92rem;
  font-stretch: 106%;
  font-weight: 700;
}

.saisie {
  display: flex;
  overflow: hidden;
  align-items: stretch;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-s);
  background: var(--papier);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .saisie:hover {
    border-color: var(--trait-fort);
  }
}

.saisie:focus-within {
  border-color: var(--accent);
  background: var(--blanc);
  box-shadow: 0 0 0 3px var(--accent-voile);
}

.saisie-prefixe {
  display: flex;
  align-items: center;
  padding: 0 2px 0 18px;
  color: #93a09a;
  font-family: var(--mono);
  font-size: 0.92rem;
  user-select: none;
}

.saisie input {
  width: 100%;
  min-height: 58px;
  padding: 14px 18px;
  border: 0;
  background: transparent;
  color: var(--marine);
  font-family: var(--texte);
  font-size: 1.02rem;
}

.saisie-prefixe + input {
  padding-left: 2px;
}

.saisie input:focus {
  outline: 0;
}

.saisie input::placeholder {
  color: #9aa7a1;
}

.champ-aide {
  margin: 8px 0 0;
  color: var(--gris);
  font-size: 0.8rem;
}

.formulaire .bouton {
  margin-top: 28px;
}

.consentement {
  margin: 18px 0 0;
  color: var(--gris);
  font-size: 0.79rem;
  line-height: 1.5;
}

/* Garanties, collées au formulaire plutôt qu'exilées en bas de page */
.garanties {
  display: grid;
  margin: 26px 0 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
}

.garanties li {
  padding-top: 13px;
  border-top: 2px solid var(--vert);
  color: var(--gris);
  font-size: 0.82rem;
  line-height: 1.45;
}

.garanties strong {
  display: block;
  margin-bottom: 3px;
  color: var(--marine);
  font-family: var(--display);
  font-size: 0.87rem;
  font-stretch: 106%;
  font-weight: 700;
}

/* --- Le rapport ----------------------------------------------------------- */

.rapport {
  margin: 0;
}

.rapport-ligne + .rapport-ligne {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--trait);
}

.rapport-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.rapport-ref {
  margin-bottom: 0;
  color: var(--marine);
  font-family: var(--display);
  font-size: 1.02rem;
  font-stretch: 106%;
  font-weight: 700;
}

.rapport-ref span {
  margin-right: 12px;
  color: var(--vert);
  font-size: 0.86rem;
  font-weight: 700;
}

.etat {
  flex: 0 0 auto;
  padding: 5px 15px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.etat-ecart {
  background-color: transparent;
  background-image: linear-gradient(#fbeae6, #fbeae6);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: inset 0 0 0 1px rgba(193, 75, 58, 0.35);
  color: #8e2f21;
}

.etat-conforme {
  background: var(--vert-voile);
  box-shadow: inset 0 0 0 1px rgba(27, 107, 79, 0.28);
  color: var(--vert-fonce);
}

.rapport-constat {
  margin-bottom: 8px;
  color: var(--marine);
  font-size: 0.98rem;
}

.rapport-action {
  margin-bottom: 0;
  color: var(--gris);
  font-size: 0.89rem;
}

.rapport-action strong {
  color: var(--vert);
}

/* Bandeau de résultat, calqué sur le courriel de livraison */
.resultat {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 30px 18px;
  border-bottom: 1px solid var(--trait);
  background: #fafbf9;
}

.resultat-libelle {
  margin-bottom: 5px;
  color: var(--gris);
  font-family: var(--display);
  font-size: 0.82rem;
  font-stretch: 106%;
  font-weight: 600;
}

.resultat-note {
  margin-bottom: 0;
  color: var(--marine);
  font-family: var(--display);
  font-stretch: 116%;
  line-height: 1;
}

.resultat-note strong {
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.resultat-note span {
  color: var(--gris);
  font-size: 1rem;
  font-weight: 600;
}

.resultat-detail {
  margin-bottom: 3px;
  color: var(--gris);
  font-size: 0.86rem;
  text-align: right;
}

/* Sommaire des dix points, au pied du rapport */
.index-points {
  padding: 26px 30px 28px;
  border-top: 1px solid var(--trait);
  border-radius: 0 0 calc(var(--r-m) - 1px) calc(var(--r-m) - 1px);
  background: #fafbf9;
}

.index-titre {
  margin-bottom: 14px;
  color: var(--gris);
  font-family: var(--display);
  font-size: 0.84rem;
  font-stretch: 106%;
  font-weight: 600;
}

.points-index {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: 40px;
  list-style: none;
}

.points-index li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--trait);
}

.points-index li:nth-child(5),
.points-index li:nth-child(10) {
  border-bottom: 0;
}

.pt-num {
  flex: 0 0 auto;
  color: var(--vert);
  font-family: var(--display);
  font-size: 0.82rem;
  font-stretch: 106%;
  font-weight: 700;
}

.pt-nom {
  color: var(--marine);
  font-size: 0.93rem;
}

.index-pied {
  margin: 18px 0 0;
  color: var(--gris);
  font-size: 0.83rem;
  line-height: 1.5;
}

.rapport-legende {
  margin: 16px 0 0;
  color: var(--gris);
  font-size: 0.78rem;
}

/* Le rail se trace et le rapport s'écrit à mesure qu'on descend */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .parcours::before {
      animation: tracer-rail auto linear both;
      animation-timeline: view();
      animation-range: entry 55% cover 62%;
    }

    .rapport-ligne {
      animation: ligne-parait 480ms var(--sortie) both;
      animation-timeline: view();
      animation-range: entry 25% entry 72%;
    }

    .etat-ecart {
      animation: marquer-etat auto linear both;
      animation-timeline: view();
      animation-range: entry 45% entry 85%;
    }
  }
}

@keyframes tracer-rail {
  from {
    transform: scaleY(0);
  }
}

@keyframes ligne-parait {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes marquer-etat {
  from {
    background-size: 0% 100%;
    box-shadow: inset 0 0 0 1px rgba(217, 169, 60, 0);
  }
}

/* --- Clôture -------------------------------------------------------------- */

.pied-scan {
  padding: 0 0 28px;
  border-radius: var(--r-l) var(--r-l) 0 0;
  background: var(--marine);
  color: #93a7b3;
}

.pied-scan .footer-principal {
  padding-top: 52px;
  border-top: 0;
  grid-template-columns: 1.6fr 1fr 1fr;
}

/* --- Confirmation --------------------------------------------------------- */

.confirmation {
  display: grid;
  min-height: 58vh;
  padding: 64px 0 92px;
  align-content: center;
}

.confirmation-feuille {
  grid-column: 2;
}

.confirmation .feuille-corps {
  padding: 38px 32px 36px;
}

.confirmation h1 {
  margin-bottom: 16px;
  font-size: clamp(2rem, 4vw, 2.7rem);
}

.confirmation-mot {
  max-width: 42ch;
  margin-bottom: 0;
  color: var(--gris);
  font-size: 1.04rem;
}

.confirmation-suite {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--trait);
}

.confirmation-suite p {
  margin: 0 0 14px;
  color: var(--gris);
  font-size: 0.9rem;
}

/* --- Adaptations ---------------------------------------------------------- */

@media (max-width: 980px) {
  .rail-grille {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .demande-texte,
  .confirmation-feuille {
    grid-column: 1;
  }

  .parcours {
    row-gap: 56px;
  }

  .parcours::before {
    display: none;
  }

  .jalon {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
    padding-right: 0;
    padding-bottom: 18px;
    text-align: left;
  }

  .jalon-num {
    margin-bottom: 0;
    font-size: 1.5rem;
    line-height: 1;
  }

  .jalon-delai {
    order: 3;
    margin-bottom: 0;
    margin-left: auto;
  }

  .etape {
    margin-top: -38px;
  }
}

@media (max-width: 720px) {
  .rail-grille {
    width: min(100% - 32px, 900px);
  }

  .demande {
    padding: 34px 0 32px;
  }

  .parcours {
    padding-bottom: 68px;
    row-gap: 46px;
  }

  .feuille-entete {
    padding: 15px 20px 13px;
  }

  .feuille-corps {
    padding: 24px 20px 26px;
  }

  .garanties {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .rapport-entete {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .resultat {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 16px;
  }

  .resultat-detail {
    text-align: left;
  }

  .index-points {
    padding: 22px 20px 24px;
  }

  .points-index {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  .points-index li:nth-child(5) {
    border-bottom: 1px solid var(--trait);
  }

  .pied-scan {
    border-radius: 22px 22px 0 0;
  }

  .pied-scan .footer-principal {
    padding-top: 38px;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .confirmation {
    padding: 40px 0 68px;
  }

  .confirmation .feuille-corps {
    padding: 28px 22px 26px;
  }
}

@media (max-width: 480px) {
  .jalon-delai {
    order: -1;
    width: 100%;
    margin-bottom: 8px;
    margin-left: 0;
  }

  .feuille-entete {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .feuille-mention {
    white-space: nowrap;
  }
}