/* ==========================================================================
   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

   Les trois polices étaient déjà les bonnes. Ce qui divergeait : un vert plus
   sombre que celui de la console et de l'espace client, et une courbe de
   sortie molle. Les valeurs ci-dessous sont exactement celles de la suite,
   pour qu'un visiteur qui passe du site au scanner puis au portail ne
   ressente aucune rupture.

   Le papier reste chaud. La console est passée au neutre froid parce qu'on
   la fixe huit heures par jour ; une page publique, elle, doit rassurer une
   PME qui se demande si elle est en faute — et le tiède y réussit mieux que
   le gris. Même arbitrage que sur le scanner.

   Les noms historiques deviennent des alias : les 1 700 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 site public parle de conformité : il vaut le vert. */
  --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;
  --surligneur: #fbe08f;

  /* Neutres chauds : le papier de la façade publique. */
  --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 ---------------------------------------------------------- */
  --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;

  --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(--accent);
  color: var(--blanc);
  font-size: 0.84rem;
}

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

.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);
  }
}

/* Action secondaire : même gabarit que le bouton principal, poids réduit.
   Le trait remplace l'aplat — c'est ce qui la distingue sans la faire
   disparaître, là où un simple lien texte l'aurait effacée. */
.bouton-second {
  border: 1px solid var(--trait-fort);
  background: var(--blanc);
  color: var(--marine);
}

@media (hover: hover) and (pointer: fine) {
  .bouton-second:hover {
    border-color: var(--accent);
    color: var(--accent-fonce);
  }
}

.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(--display);
  font-size: 0.78rem;
  font-stretch: 106%;
  font-weight: 600;
}

.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-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: 72px;
  list-style: none;
  border-top: 1px solid rgba(12, 27, 42, 0.14);
}

.points-index li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(12, 27, 42, 0.14);
}

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

.pt-nom {
  color: var(--marine);
  font-family: var(--display);
  font-size: 1.08rem;
  font-stretch: 106%;
  font-weight: 600;
  letter-spacing: -0.006em;
}

/* --- 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;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
}

.delai {
  margin: 8px 0 0;
  color: var(--or-clair);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  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: 4px 0 4px 18px;
  border-left: 3px solid var(--or);
  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: 860px) {
  .points-index {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

@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;
  }
}

/* ==========================================================================
   Cibles tactiles du pied de page

   Les liens du pied mesuraient 16 à 23 px de haut : sous les 24 px que
   demande WCAG 2.5.8, et désagréables au pouce. Un peu de rembourrage
   vertical suffit à les amener à la bonne hauteur sans toucher à la mise en
   page — le texte ne bouge pas, seule la zone cliquable s'étend.

   Les liens de « notes-sources » ne sont pas concernés : ils sont en ligne
   dans une phrase, cas explicitement exempté par le critère.
   ========================================================================== */

.site-footer nav a,
.site-footer address a,
.footer-marque {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 2px;
}

/* ==========================================================================
   Renvois entre le scan et les corrections

   Quatre des six corrections répondent exactement à quatre des dix points
   vérifiés gratuitement. C'était la meilleure démonstration commerciale de
   la page, et rien ne la montrait : les deux listes vivaient dans deux
   sections séparées avec la tarification entre elles. Le numéro fait le
   pont — il existait déjà dans « Ce que le scan regarde », il est seulement
   rappelé ici.

   Le « + » marque les deux corrections qui ne répondent à aucun point
   public : elles vont plus loin que ce qu'une analyse extérieure peut
   constater. Le dire évite de laisser croire que le scan voit tout.
   ========================================================================== */

.renvoi-point {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  border-radius: var(--r-xs);
  background: var(--vert-voile);
  color: var(--vert-fonce);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  vertical-align: 1px;
}

/* Ce qui dépasse le scan ne porte pas la couleur du scan. */
.renvoi-hors {
  background: var(--papier);
  color: var(--gris);
}

.renvoi-legende {
  margin-top: 14px;
  color: var(--gris);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Masquage réservé aux lecteurs d'écran : le numéro seul n'a aucun sens à
   l'oreille, il lui faut sa phrase. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Le fondateur

   Sur un produit de conformité vendu par une personne nommée, c'est la seule
   preuve qu'on ne peut pas fabriquer — et c'était la plus petite section de
   la page. On ne lui ajoute pas un mot : on lui donne de la place.
   ========================================================================== */

.apropos-section {
  padding-block: clamp(72px, 9vw, 128px);
}

.apropos-grille {
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  max-width: 1040px;
  margin-inline: auto;
}

.apropos-copie h2,
.apropos-copie .mot-fondateur {
  max-width: 24ch;
}

.apropos-copie .mot-fondateur {
  font-size: clamp(1.12rem, 1.6vw, 1.34rem);
  line-height: 1.5;
  max-width: 42ch;
}

.portrait figcaption {
  margin-top: 12px;
  color: var(--gris);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

@media (max-width: 720px) {
  .apropos-grille { grid-template-columns: 1fr; }
  .portrait-photo { max-width: 220px; }
}

/* --- Renvois sur la carte foncée ------------------------------------------
   La carte « mise en conformité » est en vert profond. La pastille conçue
   pour un fond clair y disparaissait, et la légende passait en gris sur
   vert — un contraste insuffisant. Sur fond sombre, la pastille s'éclaircit
   et la légende remonte sous la liste plutôt que dans la colonne des tarifs.
   -------------------------------------------------------------------------- */

.carte-conformite .renvoi-point {
  background: rgba(255, 255, 255, 0.14);
  color: #d8e6dd;
}

.carte-conformite .renvoi-hors {
  background: rgba(255, 255, 255, 0.06);
  /* 4,43:1 sur le fond composé — juste sous le seuil AA. Éclairci pour
     passer sans discuter, le « + » restant visuellement plus discret que
     les numéros grâce à son fond plus sombre. */
  color: #bccec2;
}

/* La légende appartient à la liste, pas à la grille des tarifs. */
/* Les inclusions et les tarifs étaient deux colonnes de rangées séparées par
   des filets : même traitement, donc l'œil lisait un tableau de neuf lignes.
   Or l'une énumère ce qu'on reçoit, l'autre demande de se situer. Le prix
   n'est pas une liste parallèle — c'est la conclusion de la liste. Il passe
   donc dessous, sur toute la largeur.

   Effet secondaire voulu : le bloc de tarifs, calé en haut d'une colonne plus
   courte que sa voisine, laissait un grand vide sous lui. Il n'y a plus de
   colonne courte. */
.service-detail {
  grid-template-columns: 1fr;
  grid-template-areas: "liste" "legende" "tarifs";
  gap: 0;
}

.service-detail > .liste-reglee {
  grid-area: liste;
  columns: 2;
  column-gap: 40px;
}

.service-detail > .renvoi-legende { grid-area: legende; }
.service-detail > .tarifs { grid-area: tarifs; margin-top: 28px; }

/* Une liste en colonnes ne doit pas couper un item en deux. */
.service-detail > .liste-reglee li {
  break-inside: avoid;
}

.tarifs-titre {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

.carte-conformite .tarifs-titre { color: #a8bdb0; }

@media (max-width: 720px) {
  .service-detail > .liste-reglee { columns: 1; }
}

.carte-conformite .renvoi-legende {
  color: #a8bdb0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 14px;
}

@media (max-width: 860px) {
  .service-detail {
    grid-template-columns: 1fr;
    grid-template-areas: "liste" "legende" "tarifs";
  }
}

/* --- Les trois paliers : un choix, pas un menu ----------------------------
   En rangées pleine largeur, l'étiquette et le montant se retrouvaient
   séparés par six cents pixels de vide — l'œil doit alors relier deux
   éléments distants pour lire une seule information. Trois paliers, c'est
   une comparaison : ça se pose côte à côte, chaque bloc portant son étiquette
   au-dessus de son montant. On les compare d'un regard au lieu de balayer
   trois lignes.
   -------------------------------------------------------------------------- */

.tarifs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 18px;
}

.tarifs-titre {
  grid-column: 1 / -1;
  margin-bottom: 14px;
}

.tarif {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0;
  border-bottom: 0;
}

.tarif span {
  max-width: none;
  min-height: 2.6em;
}

.tarif strong {
  font-size: 1.55rem;
}

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

  /* En colonne unique, la comparaison redevient une liste : on rétablit la
     lecture étiquette-à-gauche / montant-à-droite, qui tient sur une ligne. */
  .tarif {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .tarif span { min-height: 0; }
  .tarif strong { font-size: 1.35rem; }
}