/* Pages de lecture : « 404 » (page introuvable) et « Politique de confidentialité ».
   Les textes viennent des pages approuvées du 8 octobre ; la mise en page suit l'accueil (AGENTS.md).
   Aucune couleur ni police en dur : tout passe par styles/jetons.css. */

/* Un crochet est un trou à combler avec MA : on le repère d'un coup d'œil. */
.crochet { background: color-mix(in srgb, var(--accent) 22%, transparent); padding-inline: 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.jour .crochet { background: color-mix(in srgb, var(--accent) 52%, transparent); }

/* ---------- 404 : le fil reprend ici ---------- */
/* Le H au repos (toile « appel ») : la toile commence sous la barre. */
.perdue__toile { position: absolute; inset: var(--barre) 0 0 0; z-index: -1; width: 100%; height: calc(100% - var(--barre)); }
@media (min-width: 1100px) { .perdue__toile { height: 900px; } }
.perdue { padding-top: calc(var(--barre) + clamp(32px, 3.4vw, 48px)); padding-bottom: clamp(56px, 7vw, 96px); }
.perdue__corps { display: grid; gap: clamp(28px, 2.6vw, 36px); }
.perdue__corps > * { max-width: 56rem; }
.perdue h1 { max-width: 16ch; }
.perdue .t-intro { margin-top: var(--e-6); max-width: 30ch; }
.chemins { margin: 0; padding: 0; list-style: none; border-bottom: var(--trame) solid color-mix(in srgb, var(--texte) 16%, transparent); }
.chemins li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-6); row-gap: var(--e-1); align-items: center; padding-block: clamp(12px, 1.2vw, 16px); border-top: var(--trame) solid color-mix(in srgb, var(--texte) 16%, transparent); }
/* Les quatre chemins sont ce que cherche le visiteur : ils entrent au chargement, un à un, sans attendre le défilement. */
@keyframes chemin-entre { from { opacity: 0; transform: translateY(24px); } }
.js-mouvement .chemins li { animation: chemin-entre 800ms var(--courbe-sortie) both; animation-delay: calc(var(--i, 0) * 90ms + 600ms); }
/* Toute la rangée se clique : le lien est le titre, sa zone d'appui s'étend à la rangée. */
.chemins a { grid-column: 1; font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(1.375rem, calc(1rem + 1.3vw), 2.125rem); letter-spacing: -0.03em; line-height: 1.05; text-decoration: none; transition: color var(--duree) var(--courbe); }
.chemins a::after { content: ""; position: absolute; inset: 0; }
.chemins p { grid-column: 1; max-width: 72ch; color: var(--texte-doux); }
.chemins svg { grid-column: 2; grid-row: 1 / span 2; width: 24px; height: 24px; transition: transform var(--duree) var(--courbe), color var(--duree) var(--courbe); }
.chemins li:hover a, .chemins a:focus-visible { color: var(--accent); }
.chemins li:hover svg { transform: translateX(6px); color: var(--accent); }
/* Au clavier, c'est toute la rangée qui s'encadre ; un navigateur sans :has() garde l'encadré du lien. */
@supports selector(:has(a)) {
  .chemins a:focus-visible { outline: none; }
  .chemins li:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 5px; }
  .chemins li:has(a:focus-visible) svg { transform: translateX(6px); color: var(--accent); }
}

/* ---------- Politique de confidentialité ---------- */
.confidentialite h1 { max-width: 16ch; }
.confidentialite .tete-page__meta span { white-space: normal; }
.confidentialite__projet { max-width: 54ch; color: var(--texte-doux); }
.lecture__grille { display: block; }
@media (min-width: 1100px) {
  .lecture__grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(48px, 6vw, 112px); align-items: start; }
}
/* Le sommaire : une barre qui défile de côté sous la barre du haut sur petit écran, une liste collante à gauche sur grand écran.
   Les liens s'allument seuls (scripts/site.js). Les numéros sont dessinés par la feuille de style. */
.lecture .sommaire { counter-reset: plan; margin-bottom: var(--e-8); margin-inline: calc(var(--gouttiere) * -1); }
.lecture .sommaire ol { width: auto; margin: 0; padding-inline: var(--gouttiere); }
.lecture .sommaire li { counter-increment: plan; }
.lecture .sommaire a::before { content: counter(plan, decimal-leading-zero); font-family: var(--police-donnees); font-weight: 400; font-size: 0.75rem; color: var(--texte-doux); }
.lecture .sommaire a.est-actif::before { color: var(--texte); }
@media (min-width: 1100px) {
  .lecture .sommaire { position: sticky; top: calc(var(--barre) + 32px); z-index: auto; margin: 0; background: transparent; border: 0; align-self: start; }
  .lecture .sommaire ol { display: grid; gap: 0; overflow: visible; padding: 0; }
  .lecture .sommaire a { align-items: baseline; min-height: 0; padding: 12px 0 12px 18px; white-space: normal; box-shadow: none; border-left: var(--trame) solid var(--bordure); line-height: 1.3; }
  .lecture .sommaire a.est-actif { box-shadow: none; border-left: 3px solid var(--accent); padding-left: 16px; }
}
.lecture__corps { counter-reset: bloc; min-width: 0; }
.lecture__bloc { counter-increment: bloc; padding-block: clamp(28px, 3.4vw, 52px); border-top: var(--trame) solid var(--bordure); }
.lecture__bloc:first-child { padding-top: 0; border-top: 0; }
.lecture__bloc::before { content: counter(bloc, decimal-leading-zero); content: counter(bloc, decimal-leading-zero) / ""; display: block; margin-bottom: var(--e-3); font-family: var(--police-donnees); font-size: var(--t-donnees); color: var(--texte-doux); }
/* Le défilement garde déjà la place de la barre (scroll-padding de site.css) : on ajoute celle du sommaire collant et du numéro. */
.lecture__bloc h2 { margin-bottom: var(--e-6); font-size: clamp(1.75rem, calc(1rem + 2.2vw), 3.25rem); letter-spacing: -0.035em; line-height: 1.04; max-width: 20ch; scroll-margin-top: 100px; }
@media (min-width: 1100px) { .lecture__bloc h2 { scroll-margin-top: 56px; } }
.lecture__texte { max-width: 34em; font-size: var(--t-m); line-height: 1.6; }
.lecture__texte > * + * { margin-top: 1em; }
.lecture__texte a { text-decoration-thickness: 0.08em; }
.lecture__texte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-3); }
.lecture__texte li { position: relative; padding-left: 28px; }
.lecture__texte li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; background: var(--texte); }
.lecture__texte table { width: 100%; border-collapse: collapse; font-size: var(--t-s); line-height: 1.45; }
.lecture__texte th, .lecture__texte td { padding: 14px 20px 14px 0; text-align: left; vertical-align: top; border-top: var(--trame) solid var(--bordure); }
.lecture__texte tbody tr:last-child > * { border-bottom: var(--trame) solid var(--bordure); }
.lecture__texte thead th { padding-block: 10px; font-family: var(--police-interface); font-weight: 400; font-size: var(--t-donnees); color: var(--texte-doux); border-top: 0; border-bottom: var(--trame) solid var(--texte); }
.lecture__texte tbody th { width: 52%; font-family: var(--police-interface); font-weight: var(--graisse-interface); }
.lecture__texte td { padding-right: 0; }
.chemins a { display: inline-flex; align-items: center; min-height: var(--cible); }