/* ══ REPÈRE QUÉBEC — LES GUIDES ═════════════════════════════════════════
   Extension de home-v2.css, jamais un second système. Aucune police,
   aucune couleur, aucun rayon, aucune durée qui ne soit déjà dans la
   feuille d'accueil : ce fichier ne fait que donner une forme aux objets
   que l'accueil n'a pas — le fil d'Ariane, le sommaire, les chapitres,
   l'encart « à retenir », la FAQ.

   Il se charge TOUJOURS après home-v2.css, dont il réutilise les jetons,
   les composants (.section-heading, .method-flow, .points-scan, .offer,
   .family-list, .sources-liste, .closing) et les images-clés de mouvement
   (lever, tracer-marque, passage-scan, passage-numero).

   Le mouvement suit la même règle que l'accueil : trois gestes, chacun
   porteur d'une information, et l'état d'arrivée est toujours celui du
   repos. Si rien ne s'applique, la page est complète.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Le fil d'Ariane ─────────────────────────────────────────────────── */

/* Même famille typographique que les étiquettes du rapport : monospace,
   capitales, très petit. C'est un repère de position, pas un titre. */
.fil {
  padding-top: clamp(20px, 2vw, 26px);
}

.fil ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.fil li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-family: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
}

.fil li + li::before {
  color: rgba(16, 37, 28, 0.28);
  content: "/";
}

.fil a {
  text-decoration: none;
  transition: color 160ms ease;
}

.fil [aria-current="page"] {
  color: var(--ink);
}

/* ── L'échelle typographique du guide ────────────────────────────────── */

/* L'accueil pose 4,5 / 3,4 / 2,35 rem : un titre de quatre mots, six
   sections, une affiche. Un guide a un titre de cinquante-sept
   caractères et quatorze sections. L'échelle descend donc d'un cran —
   3,9 / 2,9 / 2,2 — en gardant exactement les mêmes rapports, 1,34 puis
   1,32. Rien d'autre ne change : même famille, même graisse, même
   approche, même chasse. */
.guide-tete h1 {
  font-size: clamp(2.9rem, 4.4vw, 3.9rem);
}

.guide-page .section-heading h2 {
  font-size: clamp(2.1rem, 3.3vw, 2.9rem);
}

.sujet-titre h2 {
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
}

/* La conclusion reste un moment d'affiche, mais sous le titre de page. */
.guide-page .closing h2 {
  font-size: clamp(2.3rem, 3.9vw, 3.4rem);
}

/* ── Les petites étiquettes ──────────────────────────────────────────── */

/* Ces quatre traitements viennent de home-v2.css et servent aussi la page
   d'accueil. Ils sont redéfinis ici pour les guides seulement : l'accueil
   garde sa maquette de rapport telle qu'elle a été validée.

   La chasse tabulaire remplace la monospace sur les numéros : l'alignement
   des colonnes est conservé sans l'effet machine à écrire. */
.guide-page .etat {
  font-family: var(--text);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.guide-page .courriel-meta {
  font-family: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.guide-page .method-flow li::before {
  font-family: var(--text);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.guide-page .points-scan li span {
  font-family: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}



/* Le fil d'Ariane, la ligne de méta et le surtitre des guides passent à la
   sans-serif principale, en casse naturelle et sans approche élargie. Les
   capitales forcées et la monospace donnaient à ces repères un air de
   sortie de machine, là où ils ne font qu'indiquer une position.

   La règle est limitée aux guides : le surtitre de l'accueil appartient à
   la V2 validée et n'est pas touché. */
.guide-page .eyebrow {
  font-family: var(--text);
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Le focus sur fond sombre ────────────────────────────────────────── */

/* La V2 bascule le contour de focus au jaune dans ses quatre contextes
   sombres — .diagnostic, .offer-complete, .closing, .site-footer. Les
   deux surfaces sombres des guides doivent rejoindre cette liste : un
   contour vert sur le vert profond ou sur le marine ne se voit pas. */
.guide-bloc-sombre :focus-visible,
.appel-carte :focus-visible {
  outline-color: var(--yellow);
}

/* ── La navigation ───────────────────────────────────────────────────── */

/* La rubrique courante porte en permanence le trait que le survol trace
   sur les autres. Aucun style neuf : c'est l'état de survol de la V2,
   figé. */
.nav-links a[aria-current] {
  background-size: 100% 2px;
  color: var(--ink);
}

.nav-panel a[aria-current] {
  color: var(--green);
}

/* ── Le chapeau du guide ─────────────────────────────────────────────── */

/* L'accueil ouvre sur une affiche : un titre de quatre mots et une photo.
   Un guide ouvre sur un sujet et son plan. La colonne de droite porte donc
   le sommaire, à la place exacte où l'accueil pose son image. */
.guide-tete {
  padding: clamp(30px, 3vw, 44px) 0 clamp(72px, 6.6vw, 100px);
}

.guide-tete-grille {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.88fr);
  gap: clamp(52px, 6.4vw, 96px);
}

.guide-tete-copie > * {
  animation: hero-copy-enter 560ms var(--ease-out) both;
}

.guide-tete-copie > :nth-child(2) {
  animation-delay: 60ms;
}

.guide-tete-copie > :nth-child(3) {
  animation-delay: 120ms;
}

.guide-tete-copie > :nth-child(4) {
  animation-delay: 180ms;
}

/* Le titre d'accueil tient en quatre mots et peut prendre 4,5 rem. Un
   titre de guide fait cinquante-sept caractères : à la même échelle il
   descend à cinq lignes dans la colonne de gauche. Un cran plus bas, il
   en fait trois, et reste au-dessus du h2 de section. La mesure est celle
   de la colonne, pas un max-width qui casserait selon la largeur. */
/* Le surligneur de l'accueil, au même tracé et au même rythme : c'est le
   geste de la marque, il se répète d'une page à l'autre. */
.guide-tete h1 mark {
  padding: 0 0.04em;
  background-color: transparent;
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-position: 0 0.52em;
  background-repeat: no-repeat;
  background-size: 100% 0.38em;
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.guide-lead {
  max-width: 46ch;
  margin-bottom: 32px;
  color: var(--body);
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  line-height: 1.65;
}

.guide-meta {
  display: flex;
  flex-wrap: wrap;
  margin: clamp(30px, 3vw, 40px) 0 0;
  padding-top: clamp(18px, 1.8vw, 24px);
  border-top: 1px solid var(--line);
  gap: 6px 26px;
  color: var(--muted);
  font-family: var(--text);
  font-size: 0.8rem;
  font-weight: 500;
}

/* ── Le sommaire ─────────────────────────────────────────────────────── */

/* Un <details> parce que sur téléphone un plan de douze entrées repousse
   le texte de six cents pixels. Au-dessus de 720 px il est ouvert et son
   libellé redevient un simple intertitre : rien à replier sur un écran
   qui a la place. */
.sommaire {
  padding-top: 6px;
}

.sommaire > summary {
  padding-bottom: 16px;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--text);
  font-size: 0.86rem;
  font-weight: 650;
  list-style: none;
}

.sommaire > summary::-webkit-details-marker {
  display: none;
}

.sommaire ol {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  counter-reset: plan;
  list-style: none;
}

.sommaire li {
  border-bottom: 1px solid var(--line);
  counter-increment: plan;
}

.sommaire a {
  display: grid;
  align-items: baseline;
  padding: 12px 0;
  color: var(--ink);
  grid-template-columns: 30px minmax(0, 1fr);
  font-family: var(--display);
  font-size: 0.96rem;
  font-stretch: 106%;
  font-weight: 640;
  letter-spacing: -0.018em;
  line-height: 1.3;
  text-decoration: none;
  transition:
    color 180ms ease,
    transform 220ms var(--ease-out);
}

.sommaire a::before {
  color: var(--muted);
  content: counter(plan, decimal-leading-zero);
  font-family: var(--text);
  font-size: 0.66rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ── Le rythme des blocs ─────────────────────────────────────────────── */

.guide-bloc {
  padding: clamp(76px, 6.4vw, 100px) 0;
}

.guide-bloc-teinte {
  background: var(--paper-deep);
}

.guide-bloc-blanc {
  background: var(--white);
}

/* Le vert profond de la section « Dix points » de l'accueil : c'est le
   même objet, la liste de ce qu'on vérifie. */
.guide-bloc-sombre {
  padding: clamp(84px, 6.6vw, 104px) 0 clamp(84px, 6.6vw, 104px);
  background: var(--green-dark);
  color: #cbdad0;
}

/* ── Les douze points à vérifier ─────────────────────────────────────── */

/* .checkpoints de l'accueil, avec une ligne d'explication sous chaque
   libellé : sur un guide, l'intitulé seul ne suffit pas. L'écart entre
   les rangées s'ouvre d'autant. */
.liste-verifs {
  gap: 28px 56px;
}

.liste-verifs li {
  min-height: 0;
}

.liste-verifs li span {
  display: block;
  margin-top: 7px;
  color: #bfd0c5;
  font-family: var(--text);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
}

/* ── La prose ────────────────────────────────────────────────────────── */

.prose > p {
  max-width: 62ch;
  margin-bottom: 17px;
  color: var(--body);
  font-size: 1.02rem;
  line-height: 1.72;
}

.prose > p:last-child {
  margin-bottom: 0;
}

.prose h3 {
  margin-top: 28px;
  margin-bottom: 10px;
  font-size: clamp(1.14rem, 1.45vw, 1.32rem);
}

.prose strong {
  color: var(--ink);
  font-weight: 650;
}

/* Le tiret court des points du rapport, pas une puce ronde : la même
   liste éditoriale que la colonne « Ce que vous recevez ». */
.prose ul {
  display: grid;
  margin: 0 0 18px;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.prose li {
  position: relative;
  max-width: 60ch;
  padding-left: 22px;
  color: var(--body);
  font-size: 0.99rem;
  line-height: 1.62;
}

.prose li::before {
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 11px;
  height: 2px;
  background: var(--green);
  content: "";
}

/* Un bloc de prose qui reprend après une maquette, une liste ou un encart.
   La CSP interdit les styles en ligne : cette respiration a donc une
   classe, comme tout le reste. */
.bloc-suite {
  margin-top: clamp(30px, 3vw, 44px);
}

/* Les noms techniques — un témoin, une variable, une balise — reviennent
   sur tous les guides. Ils prennent la monospace déjà chargée, à la même
   taille optique que le texte courant. */
.prose code,
.faq-reponse code,
.etat-detail code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--green-light);
  color: #2c5443;
  font-family: var(--mono);
  font-size: 0.84em;
  font-weight: 500;
}

/* ── L'encart « À retenir » ──────────────────────────────────────────── */

/* Le vert clair est déjà celui du bandeau du courriel : c'est la teinte
   que la marque emploie quand elle veut poser une phrase à part. */
.retenir {
  margin: clamp(26px, 2.6vw, 34px) 0 0;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--radius-card);
  background: var(--green-light);
}

.retenir-etiquette {
  margin: 0 0 10px;
  color: #2c5443;
  font-family: var(--text);
  font-size: 0.82rem;
  font-weight: 650;
}

.retenir p {
  max-width: 54ch;
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.62;
}

/* Deux natures de remarque, deux surfaces déjà présentes dans la V2 :
   le vert clair du bandeau de courriel pour ce que dit la loi, la carte
   blanche bordée de l'aperçu des sanctions pour ce que Repère recommande.
   La distinction est aussi écrite dans l'étiquette : la couleur ne la
   porte jamais seule. */
.retenir-repere {
  border: 1px solid var(--line);
  background: var(--white);
}

.retenir-repere .retenir-etiquette {
  color: var(--muted);
}

/* ── Les chapitres ───────────────────────────────────────────────────── */

/* Deux colonnes, dans la proportion de la section « Dix points » : le
   sujet et son lien à gauche, l'explication à droite. Le filet supérieur
   remplace un titre de section par sujet — on change de chapitre, pas de
   page. */
.sujets {
  display: grid;
  gap: clamp(56px, 5vw, 80px);
}

.sujet {
  display: grid;
  align-items: start;
  padding-top: clamp(28px, 2.8vw, 40px);
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(36px, 5vw, 88px);
}

.sujet-titre h2 {
  max-width: 15ch;
  margin-bottom: 16px;
}

/* Le lien du chapitre existe deux fois dans le balisage : dans la colonne
   de gauche, où il se lit avec le titre, et sous l'explication, où il se
   lit après elle. Un seul des deux s'affiche à la fois — celui de gauche
   au-dessus de 960 px, celui d'en bas en dessous, quand la colonne de
   gauche n'existe plus. */
.sujet-suite {
  margin-top: clamp(20px, 2vw, 26px);
}

@media (min-width: 961px) {
  .sujet-suite {
    display: none;
  }
}

/* ── Les services tiers ──────────────────────────────────────────────── */

/* La carte blanche des offres, et à l'intérieur la liste des dix points
   du scan : même composant, même tête de lecture. Elle dit ici ce qu'elle
   dit là-bas — le scan passe sur les services, l'un après l'autre. */
/* La composition de la section « Ce que vous recevez » : le texte tient la
   colonne étroite, la carte la large. Étirée sur les mille deux cents
   pixels de la page, la liste creusait un vide entre chaque nom et son
   étiquette. */
.services-grille {
  display: grid;
  align-items: start;
  grid-template-columns: 0.76fr 1fr;
  gap: clamp(40px, 5vw, 84px);
}

.services-texte {
  display: grid;
  gap: clamp(16px, 1.6vw, 22px);
}

.services-carte {
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--white);
}

.points-services {
  margin-top: 0;
}

.points-services li {
  flex-wrap: wrap;
  gap: 4px 13px;
}

.points-services li b {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--text);
  font-size: 0.76rem;
  font-weight: 600;
  text-align: right;
}

.services-note {
  max-width: 46ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.65;
}

/* ── Ce qui se vérifie, et ce qui ne se vérifie pas de l'extérieur ───── */

/* .duo sert à toute comparaison à deux colonnes d'un guide à l'autre :
   avant/après consentement, navigateur/serveur, boutique/caisse. Même
   grille que .verif, déclarée une seule fois. */
.verif,
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 80px);
}

.duo {
  gap: clamp(20px, 2.4vw, 32px);
}

/* Les deux panneaux d'un duo se lisent rangée par rangée. Dès qu'un objet
   de courriel passe sur deux lignes, les corps se décalent et la
   comparaison se perd. subgrid les réaligne — le même procédé que les
   trois prix et les trois montants de l'accueil, pas un nombre magique.
   Au-dessous de 720 px les cartes s'empilent : il n'y a plus rien à
   aligner. */
@media (min-width: 721px) {
  .duo {
    grid-template-rows: auto 1fr;
  }

  .duo > .courriel {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}

.verif-col {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.verif-col h3 {
  max-width: 22ch;
  margin-bottom: 20px;
}

.verif-col ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.verif-col li {
  position: relative;
  padding-left: 20px;
  color: var(--body);
  font-size: 0.99rem;
  line-height: 1.6;
}

.verif-col li::before {
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
}

/* Plein : la machine le lit. Creux : il faut aller voir. La forme dit la
   différence, la couleur ne la porte pas seule. */
.verif-lu li::before {
  background: var(--green);
}

.verif-humain li::before {
  border: 1px solid var(--muted);
}

/* ── Les maquettes ───────────────────────────────────────────────────── */

/* La carte du courriel de l'accueil sert de cadre à toutes les maquettes
   des guides : formulaire, bannière, état des traceurs. On reprend .courriel
   et .courriel-tete tels quels ; seul le corps change de nom, parce que
   .courriel-corps porte la ligne de lecture, qui ne dit rien ici. */
.maquette {
  margin: 0;
}

.maquette-corps {
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.4vw, 30px);
}

.maquette-corps > :last-child {
  margin-bottom: 0;
}

/* Un formulaire tel que le visiteur le voit. Champs inertes : la CSP
   interdit les envois, et une maquette n'a rien à soumettre. Les mesures
   sont celles des contrôles de la V2 — même rayon, même hauteur de frappe
   que .button. Réutilisable dès qu'un guide doit montrer une saisie. */
.champs {
  display: grid;
  margin: 0;
  padding: 0;
  gap: clamp(13px, 1.4vw, 17px);
  list-style: none;
}

.champs li {
  display: grid;
  gap: 6px;
}

.champs .champ-nom {
  color: var(--body);
  font-size: 0.78rem;
  font-weight: 650;
}

.champs .champ-boite {
  display: block;
  min-height: 42px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.3;
}

.champs .champ-boite-haute {
  min-height: 74px;
}

.champ-bouton {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin-top: clamp(16px, 1.8vw, 22px);
  padding: 11px 22px;
  border-radius: var(--radius-control);
  background: var(--green);
  color: var(--white);
  font-family: var(--display);
  font-size: 0.84rem;
  font-weight: 700;
}

/* Les états, dans la typographie des constats du rapport : un nom en
   Archivo, un état en monospace capitales, aligné à droite. */
.etats {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.etats li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  gap: 5px 14px;
}

.etats li:first-child {
  padding-top: 0;
}

.etats li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.etat-nom {
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.99rem;
  font-weight: 640;
  letter-spacing: -0.012em;
}

.etat-detail {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

/* Troisième état, à côté de .etat-ecart et .etat-conforme : ni écart ni
   conformité, simplement « rien ne s'est encore produit ». */
.etat-neutre {
  color: var(--muted);
}

/* Une maquette porte souvent une légende sous elle, comme la feuille de
   démonstration de l'accueil. */
.maquette-mention {
  margin: 13px 0 0;
  padding-left: 2px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ── L'appel intermédiaire ───────────────────────────────────────────── */

/* La carte marine des offres, dans la composition de la conclusion. */
.appel-carte {
  display: grid;
  align-items: end;
  padding: clamp(34px, 3.6vw, 56px);
  border-radius: var(--radius-surface);
  background: var(--navy);
  color: #c4cdd5;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(34px, 5vw, 76px);
}

.appel-carte h2 {
  max-width: 17ch;
  margin-bottom: 0;
  color: var(--white);
  font-size: clamp(1.85rem, 2.9vw, 2.6rem);
}

.appel-carte p {
  max-width: 36ch;
  margin-bottom: 24px;
  font-size: 1.04rem;
  line-height: 1.62;
}

/* ── L'index des guides ──────────────────────────────────────────────── */

/* .family-list, à l'échelle d'une table des matières : sept entrées au
   corps de l'accueil feraient une page à elles seules. */
.guide-index .family-item {
  min-height: 88px;
  padding: 22px 0;
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr) 44px;
  gap: 30px;
}

.guide-index .family-name {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  letter-spacing: -0.04em;
}

.guide-index .family-arrow {
  font-size: 1.35rem;
}

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

/* Le dépliant des sanctions, décliné en liste. */
.faq-liste {
  border-top: 1px solid var(--line);
}

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

.faq-item summary {
  padding: 22px 0;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.3vw, 1.14rem);
  font-stretch: 106%;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.35;
}

.faq-item summary::marker {
  color: var(--green);
}

.faq-reponse {
  padding: 0 0 26px;
}

.faq-reponse p {
  max-width: 68ch;
  margin: 0 0 13px;
  color: var(--body);
  font-size: 0.98rem;
  line-height: 1.72;
}

.faq-reponse p:last-child {
  margin-bottom: 0;
}

.faq-reponse a {
  color: var(--green);
  font-weight: 650;
  text-underline-offset: 4px;
}

/* ── Le pied de guide ────────────────────────────────────────────────── */

.guide-note {
  max-width: 76ch;
  margin: clamp(30px, 3vw, 40px) 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.65;
}

.guide-note strong {
  color: var(--ink);
  font-weight: 700;
}

/* ── Survol ──────────────────────────────────────────────────────────── */

@media (hover: hover) and (pointer: fine) {
  .fil a:hover {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .sommaire a:hover {
    color: var(--green);
    transform: translateX(6px);
  }
}

/* ══ MOUVEMENT ══════════════════════════════════════════════════════════
   Trois gestes, comme sur l'accueil, et aucun de plus.

   1. Le surligneur du titre se retrace toutes les neuf secondes. C'est le
      même geste, à la même cadence : d'une page à l'autre, la marque fait
      la même chose.

   2. Les douze points à vérifier se lèvent en cascade quand la liste
      entre à l'écran. Les mêmes images-clés que les dix points du scan,
      la même cascade de 45 ms, le même repli pour Firefox.

   3. La tête de lecture passe sur les services tiers. Sur l'accueil elle
      dit « le scan passe sur dix points » ; ici elle dit « le scan passe
      sur ce que votre site charge ». Elle ne tourne qu'à l'écran.

   Les images-clés viennent toutes de home-v2.css. Rien n'est réinventé,
   et l'état d'arrivée reste celui du repos.
   ═════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  .guide-tete h1 mark {
    animation-name: retracer-marque;
    animation-duration: 9s;
    animation-delay: 620ms;
    animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
    animation-iteration-count: infinite;
  }

  .js-mouvement.onglet-cache .guide-tete h1 mark {
    animation-play-state: paused;
  }
}

/* La cascade des douze points, portée par le défilement. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .liste-verifs li {
      animation: lever auto linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 58%;
    }

    .liste-verifs li:nth-child(2)  { animation-range: entry 12% entry 60%; }
    .liste-verifs li:nth-child(3)  { animation-range: entry 14% entry 62%; }
    .liste-verifs li:nth-child(4)  { animation-range: entry 16% entry 64%; }
    .liste-verifs li:nth-child(5)  { animation-range: entry 18% entry 66%; }
    .liste-verifs li:nth-child(6)  { animation-range: entry 20% entry 68%; }
    .liste-verifs li:nth-child(7)  { animation-range: entry 22% entry 70%; }
    .liste-verifs li:nth-child(8)  { animation-range: entry 24% entry 72%; }
    .liste-verifs li:nth-child(9)  { animation-range: entry 26% entry 74%; }
    .liste-verifs li:nth-child(10) { animation-range: entry 28% entry 76%; }
    .liste-verifs li:nth-child(11) { animation-range: entry 30% entry 78%; }
    .liste-verifs li:nth-child(12) { animation-range: entry 32% entry 80%; }
  }
}

/* Le repli de Firefox : mêmes images-clés, déclenchées par l'observateur. */
@media (prefers-reduced-motion: no-preference) {
  .sans-vue-native .liste-verifs.est-vu li {
    animation: lever 460ms var(--ease-out) backwards;
  }

  .sans-vue-native .liste-verifs.est-vu li:nth-child(1)  { animation-delay: 0ms; }
  .sans-vue-native .liste-verifs.est-vu li:nth-child(2)  { animation-delay: 45ms; }
  .sans-vue-native .liste-verifs.est-vu li:nth-child(3)  { animation-delay: 90ms; }
  .sans-vue-native .liste-verifs.est-vu li:nth-child(4)  { animation-delay: 135ms; }
  .sans-vue-native .liste-verifs.est-vu li:nth-child(5)  { animation-delay: 180ms; }
  .sans-vue-native .liste-verifs.est-vu li:nth-child(6)  { animation-delay: 225ms; }
  .sans-vue-native .liste-verifs.est-vu li:nth-child(7)  { animation-delay: 270ms; }
  .sans-vue-native .liste-verifs.est-vu li:nth-child(8)  { animation-delay: 315ms; }
  .sans-vue-native .liste-verifs.est-vu li:nth-child(9)  { animation-delay: 360ms; }
  .sans-vue-native .liste-verifs.est-vu li:nth-child(10) { animation-delay: 405ms; }
  .sans-vue-native .liste-verifs.est-vu li:nth-child(11) { animation-delay: 450ms; }
  .sans-vue-native .liste-verifs.est-vu li:nth-child(12) { animation-delay: 495ms; }
}

/* La tête de lecture sur douze services : le cycle reste de 4 200 ms,
   l'écart passe donc de 420 à 350 ms. Les images-clés et le pilotage par
   « tourne » viennent de home-v2.css. */
@media (prefers-reduced-motion: no-preference) {
  .points-services li:nth-child(1)::before,
  .points-services li:nth-child(1) span { animation-delay: -4200ms; }
  .points-services li:nth-child(2)::before,
  .points-services li:nth-child(2) span { animation-delay: -3850ms; }
  .points-services li:nth-child(3)::before,
  .points-services li:nth-child(3) span { animation-delay: -3500ms; }
  .points-services li:nth-child(4)::before,
  .points-services li:nth-child(4) span { animation-delay: -3150ms; }
  .points-services li:nth-child(5)::before,
  .points-services li:nth-child(5) span { animation-delay: -2800ms; }
  .points-services li:nth-child(6)::before,
  .points-services li:nth-child(6) span { animation-delay: -2450ms; }
  .points-services li:nth-child(7)::before,
  .points-services li:nth-child(7) span { animation-delay: -2100ms; }
  .points-services li:nth-child(8)::before,
  .points-services li:nth-child(8) span { animation-delay: -1750ms; }
  .points-services li:nth-child(9)::before,
  .points-services li:nth-child(9) span { animation-delay: -1400ms; }
  .points-services li:nth-child(10)::before,
  .points-services li:nth-child(10) span { animation-delay: -1050ms; }
  .points-services li:nth-child(11)::before,
  .points-services li:nth-child(11) span { animation-delay: -700ms; }
  .points-services li:nth-child(12)::before,
  .points-services li:nth-child(12) span { animation-delay: -350ms; }
}

/* La cascade de révélation des douze services, deux rangs de plus que
   l'accueil. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .points-services li:nth-child(11) { animation-range: entry 30% entry 78%; }
    .points-services li:nth-child(12) { animation-range: entry 32% entry 80%; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sans-vue-native .points-services.est-vu li:nth-child(11) { animation-delay: 450ms; }
  .sans-vue-native .points-services.est-vu li:nth-child(12) { animation-delay: 495ms; }
}

/* ══ RESPONSIVE ═════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  .guide-tete-grille {
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
    gap: 52px;
  }

  .sujet {
    grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr);
    gap: 44px;
  }
}

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

  .sommaire {
    max-width: 640px;
    padding-top: 0;
  }

  /* Le lien du chapitre passe sous l'explication : en une colonne, il
     serait annoncé avant le texte qu'il prolonge. */
  .sujet {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sujet-titre h2 {
    max-width: 24ch;
    margin-bottom: 0;
  }

  .sujet-titre .text-link {
    display: none;
  }

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

  .services-texte {
    max-width: 62ch;
  }

  .verif {
    gap: 40px;
  }

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

@media (max-width: 720px) {
  .guide-tete {
    padding: 24px 0 68px;
  }

  .guide-tete h1 {
    font-size: clamp(2.35rem, 9.6vw, 2.8rem);
  }

  .guide-page .section-heading h2 {
    font-size: clamp(1.85rem, 7.6vw, 2.25rem);
  }

  .guide-page .closing h2 {
    font-size: clamp(1.95rem, 8vw, 2.4rem);
  }

  .guide-lead {
    margin-bottom: 28px;
    font-size: 1.04rem;
  }

  .guide-tete-grille {
    gap: 46px;
  }

  /* Sur téléphone le sommaire se replie : son libellé redevient un vrai
     bouton, avec le marqueur natif du dépliant. */
  .sommaire > summary {
    padding: 17px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    list-style: revert;
  }

  .sommaire[open] > summary {
    border-bottom-color: transparent;
  }

  .sommaire > summary::-webkit-details-marker {
    display: revert;
  }

  .sommaire ol {
    border-top: 0;
  }

  .guide-bloc {
    padding-block: 72px;
  }

  .guide-bloc-sombre {
    padding-block: 80px;
  }

  .liste-verifs {
    gap: 24px;
  }

  .services-carte {
    padding: 26px 20px;
  }

  .verif,
  .duo {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .duo {
    gap: 18px;
  }

  .appel-carte {
    padding: 30px 24px;
  }

  .appel-carte .button {
    width: 100%;
  }

  .guide-index .family-item {
    min-height: 0;
    padding: 22px 0;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 12px;
  }

  .guide-index .family-name {
    font-size: clamp(1.35rem, 6.4vw, 1.7rem);
  }

  .sujets {
    gap: 52px;
  }

  /* Sous 720 px, le h2 de section descend à 32 px : sans cette marche, le
     titre de chapitre arrivait à 29,6 px et les deux niveaux se
     confondaient. */
  .sujet-titre h2 {
    font-size: clamp(1.45rem, 6vw, 1.7rem);
  }
}

/* L'étiquette de service passe sous son nom, comme l'état d'un constat. */
@media (max-width: 520px) {
  .points-services li b {
    flex-basis: 100%;
    margin-left: 0;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-tete-copie > * {
    animation: none;
  }

  .fil a,
  .sommaire a {
    transition-duration: 0.01ms;
  }
}

@media (prefers-contrast: more) {
  .fil li + li::before {
    color: var(--muted);
  }

  .verif-humain li::before {
    border-color: var(--ink);
  }
}