/* ==========================================================================
   Repère Maintenance — site vitrine
   maintenance.reperequebec.ca

   La fondation de cette feuille — polices, jetons, réinitialisation,
   typographie, conteneur, boutons, en-tête, pied de page — est reprise
   telle quelle de reperequebec.ca, pour que les deux sites soient le même
   univers visuel et non deux marques voisines.

   Ce qui change tient en une ligne : l'accent. Repère Québec parle de
   conformité et vaut le vert ; Repère Maintenance parle d'entretien et vaut
   le bronze. Tous les composants lisent --accent et ne savent rien du
   service qu'ils habillent.

   Le sous-domaine est servi depuis un document racine distinct : cette
   feuille et ses polices y sont donc autonomes. Si un troisième site
   apparaît, la fondation mérite d'être extraite en fichier partagé.
   ========================================================================== */

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

  /* --- Repère Maintenance — l'atmosphère ---------------------------------
     Trois services, trois températures de papier. Repère Québec est un vert
     chaud, Repère Sécurité un bleu froid ; Maintenance prend le sable. Ce
     n'est pas une nuance de goût : c'est ce qui fait qu'on sait sur quel site
     on est avant d'avoir lu un mot.

     Le bronze porte le service. Il évoque l'atelier et la régularité, jamais
     l'alerte — un entretien n'est pas un incident. */
  --mnt-800: #4a2f15;
  --mnt-700: #6d4620;
  --mnt-600: #8A5A2B;
  --mnt-500: #a6743f;
  --mnt-300: #d3b491;
  --mnt-100: #f0e5d6;
  --mnt-050: #f8f3ec;

  /* L'échelle de cadence — ce que Sécurité fait avec la sévérité, Maintenance
     le fait avec le rythme. Aucun rouge : rien ici n'est une avarie. */
  --cad-fait: #1b6b4f;
  --cad-cours: #2f5f80;
  --cad-vous: var(--mnt-600);
  --cad-calme: #7b8279;

  /* L'accent courant. Ce site parle d'entretien : il vaut le bronze. */
  --accent: var(--mnt-600);
  --accent-fonce: var(--mnt-700);
  /* Teinte de survol des boutons pleins, distincte de --accent-fonce.
     Assombrir le bronze le désature : #6d4620 tombait à 55 % de saturation
     pour 28 % de clarté et se lisait comme un brun mat. Celle-ci descend de
     trois points de clarté seulement mais monte de neuf en saturation — elle
     s'assombrit sans se ternir. Blanc dessus : 6,61:1.
     --accent-fonce reste réservé au texte, où il sert son contraste. */
  --accent-survol: #82521f;
  --accent-voile: var(--mnt-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;

  /* Le papier sable et l'encre charbon chaud : c'est là que se joue
     l'appartenance à la famille sans la copie. */
  --papier: #f2efe8;
  /* Second papier, plus chargé. La page fait 6 400 px sur un seul fond :
     deux bandes suffisent à la découper en chapitres. */
  --papier-appui: #e5ddcd;
  --blanc: #ffffff;
  --encre: #2e2a24;
  --gris: #6b655c;
  /* #9a938a tombait à 3,04:1 sur le blanc et 2,64 sur le papier : sous le
     seuil AA partout où il servait — les dates du carnet, la légende, les
     numéros de version. Ce sont des informations qu'on lit, pas des ornements.
     #736c63 est la teinte la plus claire qui tienne 4,5:1 sur le papier sable,
     mesurée à 4,51 ; elle garde le gris chaud et reste plus légère que --gris,
     donc la hiérarchie de ton subsiste. */
  --gris-clair: #736c63;
  --trait: #ddd7cc;
  --trait-fort: #c6bfb1;

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

a {
  color: inherit;
}

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

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

/* --- 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, border-color var(--d-2) ease, 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-survol);
  }
}

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

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

.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 {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--blanc);
  }
}

.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;
  /* Le vert vient de la fondation copiée du site parent : c'est la couleur de
     Repère Québec. Sur ce site l'accent est le bronze, et seule la dalle
     sombre le remplace par l'or. 5,11:1 sur le papier. */
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

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



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

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

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

/* --- 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;
}

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

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

.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;
  /* 4,37:1 sur le marine du pied : sous le seuil pour du texte de 11,7 px. */
  color: #7d90a0;
  font-size: 0.73rem;
}

/* 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;
}


/* ==========================================================================
   COMPOSANTS — REPÈRE MAINTENANCE

   Repère Sécurité montre un verdict : un score, une aiguille, des constats
   classés. Repère Maintenance montre une cadence : des lignes datées qui
   continuent. C'est la différence de fond entre les deux services, et c'est
   ce que la page doit faire sentir avant qu'on lise une phrase.

   Ce qui reste de la famille : les polices, l'échelle de rayons, le verrou de
   marque, le marine, la dalle sombre, la densité. Ce qui appartient à ce
   site : le papier sable, l'encre charbon, le bronze, le carnet, et la bande
   de cadence.
   ========================================================================== */

/* --- Verrou de marque ----------------------------------------------------- */

.marque {
  display: inline-flex;
  /* Le verrou pousse la navigation et le bouton contre le bord droit, comme
     .brand sur reperequebec.ca. Sans cette marge, les trois blocs se tassaient
     à gauche derrière les gouttières de 32 px et laissaient 198 px de vide à
     droite : l'en-tête paraissait centré alors que le reste de la famille
     range la marque à gauche et l'appel à l'action à droite. */
  margin-inline-end: auto;
  align-items: center;
  gap: var(--e-4);
  text-decoration: none;
  color: inherit;
}
/* 44 et non 50 : le verrou du site parent est un mot-image, celui-ci est un
   disque plein doublé d'un bloc de texte de 34 px. À 50 px le cercle écrasait
   la mention, rapport 1,45 ; à 44 il la porte, rapport 1,28. */
.marque img { inline-size: 44px; block-size: 44px; flex: none; }
.marque-texte { display: grid; gap: 1px; min-inline-size: 0; }
.marque-nom {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 400;
  font-stretch: 104%;
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--marine);
  white-space: nowrap;
}
.marque-nom strong { font-weight: 800; }
.marque-parent {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  /* --gris-clair donnait 3,04:1 sur le papier : sous le seuil AA pour du
     texte de cette taille. --gris monte à 5,4:1 sans alourdir la mention. */
  color: var(--gris);
  line-height: 1.2;
}

/* L'appel de l'en-tête tenait sur trois lignes à 375 px. Deux libellés, un
   seul visible : aucun script, et la CSP de ce site en interdirait un. */
.dit-court { display: none; }

/* --- Boutons -------------------------------------------------------------- */

.bouton { background: var(--accent); color: var(--blanc); }
@media (hover: hover) and (pointer: fine) {
  .bouton:hover { background: var(--accent-survol); }
}
.bouton-second {
  background: var(--blanc);
  color: var(--encre);
  border: 1px solid var(--trait-fort);
}
@media (hover: hover) and (pointer: fine) {
  /* Le bouton blanc s'inverse au survol : fond bronze, texte blanc. Le
     changement de bordure et de couleur seul se remarquait à peine sur une
     surface de cette taille. L'inversion est déjà le procédé de la page — la
     carte de forfait retenue est marine quand les autres sont blanches.
     Blanc sur bronze : 5,87:1. Le bronze de repos, et non celui de survol des
     boutons pleins, pour que les deux états restent distincts côte à côte. */
  .bouton-second:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--blanc);
  }
}

/* --- Rythme des sections ---------------------------------------------------
   L'en-tête tient sur deux colonnes : le titre à gauche, ce qu'il faut savoir
   à droite. Un grand titre seul laisse une moitié de page vide, et le vide
   d'un côté ne se lit pas comme du calme mais comme un oubli. */

/* Le site parent espace de 100 px parce que ses sections sont des blocs
   fermés. Ici l'en-tête à deux colonnes tient déjà la largeur : 72 px
   suffisent à séparer sans creuser. */
.section { padding: 72px 0; }

/* Deux sections seulement reposent sur le papier chargé, assez éloignées pour
   qu'aucune bande n'en touche une autre. Le gris est réassombri localement :
   sur ce fond il tomberait à 4,27:1, il remonte à 4,98:1. Les panneaux blancs
   et les gouttières de barres y gagnent du relief au lieu d'en perdre. */
.section-appui {
  background: var(--papier-appui);
  --gris: #615b52;
}

.entete-section {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--e-6) var(--e-12);
  align-items: end;
  padding-block-end: var(--e-6);
  margin-block-end: var(--e-10);
  border-block-end: 1px solid var(--trait-fort);
}
.entete-section .titre-section { margin: 0; max-inline-size: 19ch; }
.entete-section .section-intro { margin: 0; color: var(--gris); font-size: 1.08rem; max-inline-size: 46ch; }

.titre-section { text-align: start; margin-inline: 0; }
h1, h2 { text-wrap: balance; }


/* --- Hero ------------------------------------------------------------------ */

.hero { padding: 60px 0 84px; }
.hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: var(--e-12);
  align-items: center;
}
.hero-texte { max-inline-size: 32rem; }
.hero h1 { margin-block-end: var(--e-5); }
/* Trois promesses sur une ligne. Elles portaient chacune une pastille de
   couleur qui ne codait rien : la couleur y était mise pour en mettre. */
.hero-appuis {
  margin: var(--e-8) 0 0;
  font-size: 0.95rem;
  color: var(--gris);
  max-inline-size: 46ch;
}

/* --- Le carnet : l'objet signature ------------------------------------------
   Sécurité dessine une jauge parce qu'il mesure. Maintenance dessine un
   carnet parce qu'il consigne. La bande de mois en tête montre la régularité
   d'un coup d'œil — c'est elle qui dit « ça continue ». */

.carnet { margin: 0; }
.carnet-page {
  background: var(--blanc);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(46 42 36 / 5%), 0 26px 50px -34px rgb(46 42 36 / 30%);
}
.carnet-entete {
  padding: var(--e-5) var(--e-6);
  background: var(--mnt-050);
  border-block-end: 1px solid var(--trait);
}
.carnet-site {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--encre);
}

/* La bande des douze mois : chaque mois entretenu porte un jeton plein. */
.carnet-mois {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  padding: var(--e-5) var(--e-6) var(--e-3);
}
.carnet-mois span {
  block-size: 20px;
  border-radius: 3px;
  background: var(--mnt-100);
}
/* Les mois passés en clair, le mois courant en plein : douze blocs de la même
   couleur se lisent comme une seule barre, pas comme une régularité. */
.carnet-mois span.fait { background: var(--mnt-300); }
.carnet-mois span.encours { background: var(--accent); }

.carnet-mois-legende {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  margin: 0;
  padding: 0 var(--e-6) var(--e-4);
  border-block-end: 1px solid var(--trait);
  font-size: 0.82rem;
  color: var(--gris-clair);
}

.carnet-lignes { list-style: none; margin: 0; padding: 0; }
.carnet-lignes li {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr) auto;
  gap: var(--e-4);
  align-items: baseline;
  padding: var(--e-4) var(--e-6);
  border-block-end: 1px solid var(--trait);
}
.carnet-date { font-family: var(--mono); font-size: 0.74rem; color: var(--gris-clair); }
.carnet-fait { color: var(--encre); font-size: 1rem; }
.carnet-duree {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--gris);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.carnet-pied { padding: var(--e-5) var(--e-6); background: var(--mnt-050); }
.carnet-compte {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  margin: 0 0 var(--e-3);
  font-size: 0.86rem;
  color: var(--gris);
}
.carnet-compte strong {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.carnet-barre {
  block-size: 6px;
  border-radius: var(--r-full);
  background: var(--blanc);
  box-shadow: inset 0 0 0 1px var(--trait);
  overflow: hidden;
}
.carnet-barre span { display: block; block-size: 100%; inline-size: 62%; background: var(--accent); }
.carnet-legende {
  margin: var(--e-3) 0 0;
  font-size: 0.8rem;
  color: var(--gris-clair);
  text-align: center;
}

/* --- Cartes : le socle visuel de la page ----------------------------------
   Chaque carte porte un petit schéma. C'est ce qui distingue une page
   dessinée d'une page écrite : l'objet raconte avant le titre. Les schémas
   sont en CSS pur — aucune image à charger, aucun script. */

/* Quatre cartes se rangent en quatre ou en deux, jamais en trois : une piste
   de plus laisse toujours la dernière seule sur sa ligne. */
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-5);
}
.carte {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-6);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
}
.carte h3 { margin: 0; font-size: 1.04rem; }
.carte p { margin: 0; color: var(--gris); font-size: 1rem; }

.schema {
  block-size: 62px;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding-block-end: var(--e-4);
  border-block-end: 1px solid var(--trait);
}

/* Une version qui rattrape la suivante. */
.sch-version { display: flex; align-items: center; gap: var(--e-2); }
.sch-pastille {
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-family: var(--mono);
  font-size: 0.68rem;
  background: var(--papier);
  color: var(--gris-clair);
  box-shadow: inset 0 0 0 1px var(--trait);
}
.sch-pastille.neuve {
  background: var(--mnt-100);
  color: var(--mnt-700);
  box-shadow: inset 0 0 0 1px var(--mnt-300);
}
.sch-fleche { inline-size: 18px; block-size: 1px; background: var(--trait-fort); position: relative; }
.sch-fleche::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: -2px;
  inline-size: 5px;
  block-size: 5px;
  border-inline-end: 1px solid var(--trait-fort);
  border-block-start: 1px solid var(--trait-fort);
  transform: rotate(45deg);
}

/* Deux bulles : la vôtre, la nôtre. */
.sch-bulles { display: grid; gap: 5px; }
.sch-bulle { block-size: 13px; border-radius: 7px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--trait); }
.sch-bulle:first-child { inline-size: 78px; }
.sch-bulle:last-child { inline-size: 54px; margin-inline-start: 24px; background: var(--mnt-100); box-shadow: inset 0 0 0 1px var(--mnt-300); }

/* Trois sauvegardes empilées, la dernière vérifiée. */
.sch-piles { display: grid; gap: 4px; }
.sch-pile { inline-size: 62px; block-size: 10px; border-radius: 3px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--trait); }
.sch-pile.verifiee { background: var(--mnt-100); box-shadow: inset 0 0 0 1px var(--mnt-300); }

/* Une file de demandes qui se vide. */
.sch-file { display: grid; gap: 5px; }
.sch-tache { display: flex; align-items: center; gap: var(--e-2); }
.sch-tache i {
  inline-size: 9px; block-size: 9px; border-radius: 2px;
  background: var(--mnt-500); flex: none;
}
.sch-tache b { display: block; block-size: 7px; border-radius: 4px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--trait); }
.sch-tache:nth-child(1) b { inline-size: 64px; }
.sch-tache:nth-child(2) b { inline-size: 46px; }
.sch-tache:nth-child(3) b { inline-size: 56px; }
.sch-tache.faite i { background: var(--trait-fort); }
.sch-tache.faite b { opacity: 0.5; }

/* --- Périmètre ------------------------------------------------------------- */

.perimetre {
  display: grid;
  /* Deux panneaux, deux colonnes. `auto-fit` en créait une troisième, vide,
     dès 1024 px : les deux panneaux se serraient pour rien. */
  grid-template-columns: 1fr 1fr;
  gap: var(--e-5);
  align-items: start;
}
.perimetre-colonne {
  padding: var(--e-8) var(--e-6);
  border-radius: var(--r-m);
}
.perimetre-inclus {
  background: var(--blanc);
  border: 1px solid var(--trait-fort);
}
/* Le hors-forfait est en creux, sur le papier, avec un filet tireté : il se
   lit comme une note en marge et non comme une seconde offre. */
.perimetre-exclus {
  background: transparent;
  border: 1px dashed var(--trait-fort);
}
.perimetre-colonne h3 {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: 0 0 var(--e-5);
  font-size: 1.04rem;
}
.perimetre-colonne h3::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--trait);
}
.perimetre-exclus h3 { color: var(--gris); }
.perimetre-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.perimetre-liste li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 1.02rem;
}
.perimetre-inclus li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.28em;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: var(--mnt-100);
}
.perimetre-inclus li::after {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  inset-block-start: 0.52em;
  inline-size: 4px;
  block-size: 7px;
  border-inline-end: 1.7px solid var(--mnt-700);
  border-block-end: 1.7px solid var(--mnt-700);
  transform: rotate(42deg);
}
.perimetre-exclus li { color: var(--gris); }
.perimetre-exclus li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 0.62em;
  inline-size: 12px;
  block-size: 1px;
  background: var(--trait-fort);
}
.perimetre-note {
  margin: var(--e-6) 0 0;
  padding-block-start: var(--e-4);
  border-block-start: 1px dashed var(--trait-fort);
  font-size: 0.88rem;
  color: var(--gris);
}

/* Le renvoi vers Repère Sécurité était un filet bleu et une ligne cliquable.
   Il devient une carte de service : le verrou à gauche sur le pétrole de
   Sécurité, le propos à droite, et le bloc entier porte le lien — une cible de
   la taille de la carte plutôt que d'une ligne de texte.

   Le verrou est typographique et non une image : la CSP interdit toute image
   distante, et le vrai emblème de Sécurité n'est pas dans ce dossier. Le
   traitement « Repère + service » est celui de l'en-tête, donc il appartient
   déjà à la famille. */
.encadre-voisin {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  margin-block-start: var(--e-8);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--sec-100);
  color: inherit;
  text-decoration: none;
}
.voisin-marque {
  display: grid;
  align-content: center;
  gap: var(--e-1);
  padding: var(--e-8) var(--e-6);
  background: var(--sec-700);
}
/* L'emblème est un anneau marine sur fond transparent : posé tel quel sur le
   pétrole, il s'y noyait. Le disque blanc lui rend son contour, et reprend le
   procédé du site — un objet clair posé sur une surface colorée. */
.voisin-embleme {
  inline-size: 52px;
  block-size: 52px;
  padding: 5px;
  margin-block-end: var(--e-4);
  border-radius: 50%;
  background: var(--blanc);
}
.voisin-nom {
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 400;
  font-stretch: 104%;
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--blanc);
}
.voisin-nom strong { font-weight: 800; }
.voisin-parent {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: #b7c2d8;
}
.voisin-corps {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-8);
}
.voisin-corps h3 { margin: 0; font-size: 1.02rem; color: var(--sec-700); }
.voisin-texte { font-size: 0.95rem; }
.voisin-appel {
  margin-block-start: var(--e-2);
  font-weight: 640;
  font-size: 0.95rem;
  color: var(--sec-700);
}
.voisin-fleche { display: inline-block; transition: transform var(--d-2) var(--sortie); }

@media (hover: hover) and (pointer: fine) {
  .encadre-voisin:hover .voisin-fleche { transform: translateX(4px); }
}

/* En dessous, la carte s'empile : le verrou devient un bandeau. */
@media (max-width: 720px) {
  .encadre-voisin { grid-template-columns: 1fr; }
  .voisin-marque { padding: var(--e-5) var(--e-6); }
  .voisin-corps { padding: var(--e-6); }
}

/* --- La bande de cadence ---------------------------------------------------
   Cinq étapes sur une ligne continue. C'est le pendant de la jauge de
   Sécurité : là où elle situe un site sur une échelle, celle-ci montre que
   le service avance dans le temps et ne s'arrête pas. */

.bande { position: relative; }
.bande::before {
  content: "";
  position: absolute;
  /* Le trait joignait 8 % à 8 %, une approximation qui ne tombait sur aucun
     jeton : il démarrait 72 px après le premier et dépassait le dernier. Les
     jetons sont calés au début de leur colonne, leur centre se déduit donc de
     la grille — cinq colonnes égales, quatre gouttières. Le trait part du
     centre du premier jeton et s'arrête au centre du dernier. */
  --jeton: 24px;
  --colonne: calc((100% - 4 * var(--e-5)) / 5);
  inset-block-start: 11px;
  inset-inline-start: calc(var(--jeton) / 2);
  inset-inline-end: calc(var(--colonne) - var(--jeton) / 2);
  block-size: 2px;
  background: linear-gradient(90deg, var(--mnt-300), var(--mnt-500));
}
.bande-etapes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--e-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.bande-etapes li { display: grid; gap: var(--e-3); }
.bande-jeton {
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  background: var(--papier);
  box-shadow: inset 0 0 0 2px var(--mnt-500);
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mnt-700);
  justify-self: start;
}
.bande-etapes li:last-child .bande-jeton {
  background: var(--accent);
  box-shadow: none;
  color: var(--blanc);
}
.bande-etapes h3 { margin: 0; font-size: 1rem; min-block-size: 2.6em; }
.bande-etapes p { margin: 0; font-size: 1rem; color: var(--gris); }

/* --- Forfaits --------------------------------------------------------------
   Comparer trois offres suppose de savoir où finit l'une et commence l'autre :
   ici les cartes s'imposent. La carte retenue s'inverse en marine — le procédé
   de la famille — et porte seule l'action pleine. */

.forfaits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--e-5);
  align-items: stretch;
}
.forfait {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  padding: var(--e-8) var(--e-6);
  background: var(--blanc);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-m);
}
.forfait-tete { display: grid; gap: var(--e-1); }
/* La carte retenue est déjà marine quand les deux autres sont blanches :
   l'inversion est le signal. La mention dit seulement pourquoi, et n'a pas
   besoin d'être emballée dans une pastille pour cela. */
.forfait-marque {
  margin: 0 0 var(--e-2);
  font-size: 0.86rem;
  font-weight: 640;
  letter-spacing: 0.01em;
  color: var(--mnt-700);
}
.forfait:not(.forfait-phare) .forfait-tete::before {
  content: "";
  display: block;
  block-size: 21px;
  margin-block-end: var(--e-2);
}
.forfait-tete h3 { margin: 0; font-size: 1.28rem; }
.forfait-pour { margin: 0; font-size: 0.98rem; color: var(--gris); }
.forfait-prix {
  margin: 0;
  padding-block: var(--e-4);
  border-block: 1px solid var(--trait);
  font-size: 0.95rem;
  color: var(--gris);
}
.forfait-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-3);
  flex: 1;
  font-size: 0.94rem;
  color: var(--gris);
}
.forfait-liste li { position: relative; padding-inline-start: 18px; }
.forfait-liste li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.56em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--trait-fort);
}
.forfait-liste strong { color: var(--encre); }

.forfait-phare { background: var(--marine); border-color: var(--marine); color: #c3ccd3; }
.forfait-phare h3 { color: var(--blanc); }
.forfait-phare .forfait-pour { color: #a8b6c0; }
.forfait-phare .forfait-marque { color: var(--mnt-300); }
.forfait-phare .forfait-prix { border-color: rgb(255 255 255 / 16%); color: #a8b6c0; }
.forfait-phare .forfait-liste { color: #c3ccd3; }
.forfait-phare .forfait-liste li::before { background: var(--mnt-300); }
.forfait-phare .forfait-liste strong { color: var(--blanc); }
.forfait-phare .bouton-second {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--blanc);
}
@media (hover: hover) and (pointer: fine) {
  .forfait-phare .bouton-second:hover { background: var(--mnt-500); border-color: var(--mnt-500); }
}
.forfaits-note { margin: var(--e-8) 0 0; font-size: 0.9rem; color: var(--gris); }

/* Les trois notes de bas de bloc — sous les forfaits, sous le graphique du
   temps inclus, sous les banques — couraient sous un plafond de mesure (62,
   66 et 72 caracteres). Sur un bloc qui occupe toute la colonne, la note
   s'arretait aux deux tiers et paraissait tronquee. Elles suivent desormais la
   largeur de ce qu'elles commentent. La ligne y depasse la mesure de confort,
   mais ce sont deux phrases de legende, pas du texte courant. */

/* --- Banques d'heures ------------------------------------------------------
   Offre complémentaire, pas un quatrième forfait : deux colonnes au lieu de
   trois, une carte construite dans l'autre sens (la réserve d'abord, le titre
   ensuite) et aucune inversion marine, réservée aux forfaits. */

/* Le partage forfait / banque. Deux volets côte à côte séparés d'un filet :
   la question « qu'est-ce qui va où » se règle avant qu'on parle d'offres. */
.partage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-10);
  margin-block-end: var(--e-10);
  padding-block-end: var(--e-8);
  border-block-end: 1px solid var(--trait);
}
.partage-quoi {
  margin: 0 0 var(--e-3);
  font-family: var(--display);
  font-size: 1.06rem;
  color: var(--encre);
}
.partage-volet p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--gris);
}

.banques {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-5);
  align-items: stretch;
}
.banque {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  padding: var(--e-8) var(--e-6);
  background: var(--blanc);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-m);
}
/* La carte conseillée se signale par une arête bronze, pas par une pastille :
   les forfaits utilisent déjà l'inversion, il fallait un autre procédé. La
   mention « Meilleure valeur » porte l'information en toutes lettres, donc
   rien ne repose sur la couleur seule. */
.banque-conseillee {
  border-color: var(--accent);
  box-shadow: inset 0 3px 0 0 var(--accent);
}
.banque:not(.banque-conseillee) .forfait-marque { display: none; }

/* La réserve. Dix colonnes pour les deux cartes : cinq heures occupent la
   moitié de la largeur, dix la remplissent. Le rapport du simple au double
   est donc littéral, et il tient à toutes les tailles d'écran. */
.banque-reserve {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
}
.heure {
  block-size: 34px;
  border-radius: var(--r-xs);
  background: var(--accent);
}
/* Les deux heures offertes sont creuses, pas simplement plus claires : une
   teinte pâle tombait à 1,96:1 sur le blanc et ne se distinguait que par la
   couleur. Le contour bronze tient 5,87:1, et plein contre creux est une
   différence de forme. Avec l'intervalle qui les détache et la phrase qui les
   nomme, trois signaux portent l'information, aucun n'est la couleur seule. */
.heure-offerte {
  background: var(--blanc);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.heure + .heure-offerte { margin-inline-start: 9px; }

.banque-dispo {
  margin: 0;
  padding-block-end: var(--e-5);
  border-block-end: 1px solid var(--trait);
  font-size: 0.95rem;
  color: var(--gris);
}
.banque-dispo strong { color: var(--encre); }
.banque-tete { display: grid; gap: var(--e-1); }
.banque-tete h3 { margin: 0; font-size: 1.28rem; }
.banque-pour { margin: 0; font-size: 0.98rem; color: var(--gris); }
.banques-note { margin: var(--e-8) 0 0; font-size: 0.9rem; color: var(--gris); }

/* Le brief est explicite : jamais deux cartes côte à côte sur mobile. Le
   partage tombe en colonne au même seuil, ses volets devenant deux
   paragraphes successifs. */
@media (max-width: 780px) {
  .partage { grid-template-columns: 1fr; gap: var(--e-8); }
  .banques { grid-template-columns: 1fr; }
}

/* --- Dalle sombre --------------------------------------------------------- */

.dalle {
  background: var(--marine);
  color: #c3ccd3;
  border-radius: var(--r-l);
  padding: var(--e-12) 0;
}
.dalle .container { max-inline-size: min(1080px, calc(100% - 96px)); }
.dalle h2 { color: var(--blanc); }
.dalle .entete-section { border-block-end-color: rgb(255 255 255 / 14%); }
.dalle .section-intro { color: #a8b6c0; }
.dalle-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e-8);
}
.dalle-points li {
  padding-block-start: var(--e-4);
  border-block-start: 1px solid rgb(255 255 255 / 20%);
  font-size: 0.93rem;
  color: #a8b6c0;
}
.dalle-points strong {
  display: block;
  margin-block-end: var(--e-2);
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--blanc);
}
.dalle .lien-texte { color: var(--or-clair); }

/* --- Signature de la dalle -------------------------------------------------
   Carré au rayon de la famille, pas une vignette ronde : un rond de 40 px sur
   fond sombre, c'est l'avatar de témoignage SaaS. À 148 px, c'est un portrait.
   Le teint du visage est la seule zone chaude de la dalle marine. */
.signature {
  margin: var(--e-10) 0 0;
  padding-block-start: var(--e-8);
  border-block-start: 1px solid rgb(255 255 255 / 20%);
  display: flex;
  align-items: center;
  gap: var(--e-6);
}
.signature-photo {
  flex: none;
  inline-size: 148px;
  block-size: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-m);
}
.signature-qui {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}
.signature-qui strong {
  font-family: var(--display);
  font-size: 1.14rem;
  color: var(--blanc);
}
/* Enfant direct : la flèche du lien est un span imbriqué, elle garde l'or. */
.signature-qui > span {
  font-size: 0.93rem;
  color: #a8b6c0;
}
/* L'action n'est plus dans la légende : elle est poussée au bord droit de la
   dalle, là où la signature laissait 900 px de vide. Elle y retombe sous la
   troisième colonne de points, donc l'alignement n'est pas un hasard. */
.signature-action {
  margin-inline-start: auto;
  flex: none;
}

/* Côte à côte, la colonne de texte tombait sous 20 caractères et « Poser une
   question à Clément » cassait en trois lignes. En pile, chacun a sa largeur. */
@media (max-width: 560px) {
  .signature {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e-5);
  }
  /* En colonne, la marge automatique plaquerait le lien contre le bord droit. */
  .signature-action { margin-inline-start: 0; }
  .signature-photo { inline-size: 124px; }
}

/* --- Questions ------------------------------------------------------------- */

/* Sept questions sur une colonne étroite laissaient la moitié droite vide.
   Deux colonnes remplissent la largeur sans allonger les lignes de réponse,
   qui restent bornées par leur propre max-inline-size. */
.questions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
  align-content: start;
  /* `align-items` et non `align-content` : la première place chaque carte dans
     sa rangée, la seconde place l'ensemble des rangées dans la grille. Seule
     `align-content` était posée, donc les cartes gardaient l'étirement par
     défaut — ouvrir une question allongeait sa rangée et sa voisine fermée
     s'étirait à la même hauteur, laissant un grand bloc blanc vide. */
  align-items: start;
}
.question {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  overflow: hidden;
}
.question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-5) var(--e-6);
  min-block-size: 44px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--encre);
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  inline-size: 9px;
  block-size: 9px;
  flex: none;
  border-inline-end: 2px solid var(--accent);
  border-block-end: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--d-3) var(--sortie);
}
.question[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.question[open] summary { color: var(--accent-fonce); }
.question p { margin: 0; padding: 0 var(--e-6) var(--e-6); color: var(--gris); font-size: 0.95rem; }
@media (hover: hover) and (pointer: fine) {
  .question summary:hover { background: var(--mnt-050); }
}

/* --- Soumission ------------------------------------------------------------ */

.soumission {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
  gap: var(--e-12);
  align-items: center;
  padding: var(--e-12) var(--e-12);
  background: var(--blanc);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-l);
}
.soumission-texte h2 { margin-block-start: 0; max-inline-size: 15ch; }
.soumission-texte p { color: var(--gris); max-inline-size: 44ch; }
.soumission-carte {
  padding: var(--e-8) var(--e-6);
  background: var(--mnt-050);
  border-radius: var(--r-m);
}
.soumission-carte-titre {
  margin: 0 0 var(--e-5);
  font-size: 0.95rem;
  font-weight: 640;
  color: var(--encre);
}
.soumission-champs {
  list-style: none;
  margin: 0 0 var(--e-6);
  padding: 0;
  display: grid;
  font-size: 0.94rem;
}
/* Ces cinq lignes sont les champs d'un courriel, pas une énumération. Des
   filets les séparent comme les lignes d'un formulaire, et la pastille bronze
   qui les précédait disparaît avec le reste des points de couleur. */
.soumission-champs li {
  padding-block: var(--e-3);
  border-block-start: 1px solid var(--trait);
}
.soumission-champs li:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}
.soumission-secours { margin: var(--e-4) 0 0; text-align: center; font-size: 0.86rem; color: var(--gris); }

/* --- Le formulaire ---------------------------------------------------------
   Sans script, la validation est celle du navigateur : `required` et
   `type="email"` suffisent, et le message d'erreur natif s'affiche sous le
   champ fautif, là où il faut. Rien à recréer.

   Les libellés sont visibles et non des textes d'invite : une invite disparaît
   dès qu'on tape, et l'utilisateur ne sait plus ce qu'il remplit. */
.champ {
  display: grid;
  gap: var(--e-2);
  margin: 0 0 var(--e-5);
}
.champ label {
  font-size: 0.9rem;
  font-weight: 640;
  color: var(--encre);
}
.requis { color: var(--accent-fonce); }
.facultatif {
  margin-inline-start: var(--e-1);
  font-weight: 400;
  font-size: 0.84rem;
  color: var(--gris);
}
.champ input,
.champ select,
.champ textarea {
  /* 46 px : au-dessus du minimum tactile de 44, et le champ ne rétrécit pas
     sous la police de 16 px qui évite le zoom automatique sur iOS. */
  min-block-size: 46px;
  inline-size: 100%;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-s);
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.5;
  transition: border-color var(--d-2) ease;
}
.champ textarea { min-block-size: 7rem; resize: vertical; }
.champ select { appearance: none; padding-inline-end: var(--e-10); }
/* La flèche du menu déroulant, dessinée plutôt qu'importée : la CSP
   n'autorise que les images du domaine, et un fichier de plus pour deux
   traits n'a pas de sens. */
.champ:has(select) {
  position: relative;
}
.champ:has(select)::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--e-5);
  inset-block-end: 20px;
  inline-size: 8px;
  block-size: 8px;
  border-inline-end: 2px solid var(--gris);
  border-block-end: 2px solid var(--gris);
  transform: rotate(45deg);
  pointer-events: none;
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: var(--accent); }
/* Le champ fautif se signale au-delà de la couleur : le navigateur affiche
   déjà son message, la bordure ne fait que le confirmer. Restreint à :user-invalid
   pour ne pas marquer en rouge un champ que personne n'a encore touché. */
.champ input:user-invalid,
.champ textarea:user-invalid { border-color: #a2401f; }

.soumission-carte button[type="submit"] { inline-size: 100%; }

/* Le piège à robots. Sorti du flux plutôt que `display: none` : certains
   robots ignorent les champs masqués de cette façon, et celui-ci doit rester
   remplissable par eux. `aria-hidden` et `tabindex="-1"` le retirent du
   parcours humain, au clavier comme au lecteur d'écran. */
.piege {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Les liens du pied forment une liste de navigation : le critère qui exempte
   les liens en ligne dans une phrase ne s'y applique pas. Ils passaient à
   22 px de haut, sous le minimum de 24 px. */
.site-footer nav a {
  padding-block: 5px;
  min-block-size: 24px;
  display: inline-flex;
  align-items: center;
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 1080px) {
  .bande-etapes { grid-template-columns: repeat(3, 1fr); row-gap: var(--e-8); }
  .bande::before { display: none; }
}

@media (max-width: 980px) {
  .hero-grille,
  .soumission,
  .entete-section { grid-template-columns: 1fr; }
  .entete-section { align-items: start; }
  .entete-section .titre-section { max-inline-size: 20ch; }
  .hero-texte { max-inline-size: none; }
  .soumission { padding: var(--e-10) var(--e-8); }
  .dalle .container { max-inline-size: min(1080px, calc(100% - 56px)); }
}

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

@media (max-width: 980px) {
  /* Repris du site parent : sans ces deux paliers, la grille du pied gardait
     ses trois colonnes et sortait de l'écran sur téléphone. */
  .footer-principal { grid-template-columns: 1.4fr 1fr; row-gap: var(--e-8); }
}

@media (max-width: 780px) {
  .questions { grid-template-columns: 1fr; }
  .perimetre { grid-template-columns: 1fr; }
}

/* Quatre libelles au lieu des trois du parent : 30 px entre eux faisaient
   deborder la barre a 1024 et cassaient les libelles en deux lignes. 18 px
   les separent encore nettement et rendent les 14 px qui manquaient. */
@media (max-width: 1200px) {
  .nav-liens { gap: 18px; }
  .nav-liens a { white-space: nowrap; }
}

@media (max-width: 720px) {
  .nav-liens { display: none; }
  .marque { gap: var(--e-3); }
  .marque img { inline-size: 40px; block-size: 40px; }
  .marque-nom { font-size: 1.04rem; }
  .marque-parent { font-size: 0.58rem; letter-spacing: 0.16em; }
  .section { padding: 56px 0; }
  .hero { padding: 40px 0 56px; }
  .bande-etapes { grid-template-columns: 1fr; gap: var(--e-6); }
  /* La hauteur réservée alignait les descriptions quand les étapes étaient
     côte à côte ; empilées, elle ne fait plus qu'un trou sous chaque titre. */
  .bande-etapes h3 { min-block-size: 0; }
  .carnet-lignes li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .carnet-date { grid-column: 1 / -1; }
  .carnet-mois { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .dalle { border-radius: var(--r-m); padding: var(--e-10) 0; }
  .dalle .container { max-inline-size: calc(100% - 40px); }
  .soumission { padding: var(--e-8) var(--e-5); border-radius: var(--r-m); }
  .soumission-carte { padding: var(--e-6) var(--e-5); }
  .forfait, .perimetre-colonne { padding: var(--e-6) var(--e-5); }
  .entete-section .titre-section { max-inline-size: none; }
}

@media (max-width: 480px) {
  .groupe-boutons .bouton { inline-size: 100%; justify-content: center; }
  .grille-cartes { grid-template-columns: 1fr; }
  .footer-principal { grid-template-columns: 1fr; }
  .footer-bas { flex-direction: column; gap: var(--e-3); align-items: flex-start; }
  /* Le verrou de marque et l'appel à l'action demandaient dix pixels de plus
     que la largeur disponible : l'appel se resserre plutôt que de pousser
     l'en-tête hors de l'écran. */
  .site-header .bouton-petit { padding: 11px 16px; }
  /* Le verrou fait 197 px, le bouton 112, la gouttière 32 : 341 pour 327
     disponibles. Les liens sont masqués à cette largeur, il ne reste que deux
     blocs, et 32 px entre eux n'achète rien. En ramener 16 rend le surplus
     sans rogner ni la marque ni l'appel. */
  .nav { gap: var(--e-4); }
  .marque img { inline-size: 36px; block-size: 36px; }
  .marque-nom { font-size: 0.96rem; }
  .dit-long { display: none; }
  .dit-court { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .question summary::after { transition-duration: 1ms; }
}

/* ==========================================================================
   LA COULEUR QUI RENSEIGNE

   Trois natures de travail, trois couleurs. Ce n'est pas de l'ornement : en
   parcourant le carnet, on voit d'un coup d'œil ce qui relève de l'entretien
   courant, de la sauvegarde ou d'un correctif — sans lire une ligne.

   Aucun rouge. La correction d'un formulaire n'est pas une avarie, c'est du
   travail fait. C'est ce qui sépare ce carnet d'un journal d'incidents.
   ========================================================================== */

.type-maj        { --teinte: var(--mnt-600); --teinte-voile: var(--mnt-100); }
.type-sauvegarde { --teinte: var(--cad-fait); --teinte-voile: #e2ece6; }
.type-correction { --teinte: var(--cad-cours); --teinte-voile: #e4ecf2; }



/* --- Les schémas prennent chacun leur teinte ------------------------------
   Quatre cartes de la même couleur se lisent comme une seule. Chacune emprunte
   la teinte de ce qu'elle raconte : l'entretien au bronze, l'échange au bleu,
   la sauvegarde au vert, la file au bronze pâli de ce qui est déjà fait. */

.teinte-maj        { --teinte: var(--mnt-600); --teinte-voile: var(--mnt-100); --teinte-trait: var(--mnt-300); }
.teinte-echange    { --teinte: var(--cad-cours); --teinte-voile: #e4ecf2; --teinte-trait: #a9c2d4; }
.teinte-sauvegarde { --teinte: var(--cad-fait); --teinte-voile: #e2ece6; --teinte-trait: #9dc0ad; }
.teinte-file       { --teinte: var(--mnt-600); --teinte-voile: var(--mnt-100); --teinte-trait: var(--mnt-300); }

.sch-pastille.neuve {
  background: var(--teinte-voile);
  color: var(--teinte);
  box-shadow: inset 0 0 0 1px var(--teinte-trait);
}
.sch-bulle:last-child {
  background: var(--teinte-voile);
  box-shadow: inset 0 0 0 1px var(--teinte-trait);
}
.sch-pile.verifiee {
  background: var(--teinte-voile);
  box-shadow: inset 0 0 0 1px var(--teinte-trait);
}
.sch-tache i { background: var(--teinte); }
.sch-tache.faite i { background: var(--teinte-trait); }


@media (max-width: 720px) {
  }


/* ==========================================================================
   CE QUE DEUX HEURES REPRÉSENTENT

   « Deux heures de modifications incluses » est la seule quantité abstraite
   de la page, et c'est sur elle que se joue le choix du forfait. Quatre
   demandes courantes, leur durée réelle, et des barres à l'échelle : la
   quantité devient une image.

   La couleur y a une surface, pas la taille d'un point. C'est la différence
   entre un dessin et un voyant lumineux.
   ========================================================================== */

.allocation { margin: 0; }

.allocation-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-4);
}
.allocation-liste li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 4.2rem;
  gap: var(--e-5);
  align-items: center;
}
.allocation-quoi { font-size: 1.02rem; color: var(--encre); }
.allocation-duree {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--gris);
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.allocation-barre {
  block-size: 30px;
  border-radius: var(--r-xs);
  background: var(--blanc);
  box-shadow: inset 0 0 0 1px var(--trait);
  overflow: hidden;
}
.part {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: var(--teinte, var(--mnt-500));
  transform-origin: left center;
}
/* Les largeurs sont proportionnelles aux minutes : 40 min occupe deux fois
   l'espace de 20 min, sinon le dessin mentirait. */
.part-20 { inline-size: 50%; }
.part-40 { inline-size: 100%; }

.allocation-total {
  margin: var(--e-8) 0 0;
  padding-block-start: var(--e-5);
  border-block-start: 1px solid var(--trait-fort);
  font-size: 1rem;
  color: var(--gris);
}
.allocation-total strong {
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--encre);
}

/* Le remplissage se fait au défilement, une seule fois, quand la section
   entre dans le champ. Une quantité qui se remplit se comprend mieux qu'une
   quantité déjà pleine : c'est le seul endroit de la page où le mouvement
   explique quelque chose plutôt que d'orner.

   Aucun script — la CSP de ce site l'interdit. `animation-timeline: view()`
   fait le travail dans les navigateurs qui le connaissent ; ailleurs les
   barres sont simplement pleines, ce qui reste juste. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .part {
      animation: remplir linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 35%;
    }
    @keyframes remplir {
      from { transform: scaleX(0.04); }
      to   { transform: scaleX(1); }
    }
  }
}

@media (max-width: 720px) {
  .allocation-liste li {
    grid-template-columns: minmax(0, 1fr) 4rem;
    gap: var(--e-2) var(--e-4);
  }
  .allocation-quoi { grid-column: 1; }
  .allocation-duree { grid-column: 2; }
  .allocation-barre { grid-column: 1 / -1; block-size: 22px; }
}

/* --- Pages de retour du formulaire -----------------------------------------
   merci.html et probleme.html. Une seule colonne étroite : il n'y a qu'une
   chose à lire et une chose à faire ensuite. */
.retour { padding-block: var(--e-12) 96px; }
.retour-bloc { max-inline-size: 62ch; }
.retour h1 { font-size: clamp(2.1rem, 3.4vw, 3rem); }
.retour-intro { margin: 0 0 var(--e-5); font-size: 1.15rem; }
.retour-suite { margin: 0 0 var(--e-8); color: var(--gris); }
.retour-causes {
  list-style: none;
  margin: 0 0 var(--e-10);
  padding: 0;
  display: grid;
  gap: var(--e-5);
  color: var(--gris);
}
.retour-causes li {
  padding-block-start: var(--e-4);
  border-block-start: 1px solid var(--trait-fort);
}
.retour-causes strong { display: block; margin-block-end: var(--e-1); color: var(--encre); }
.retour-liens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-6);
  margin: 0;
}