/* Gabarit secondaire du Livre ouvert : carnets (index et billets) et pages
   légales. Chargée après livre.css, dont elle reprend la barre, le
   sommaire et la quatrième de couverture. Ni pivot, ni trame, ni nom en
   dos de livre.

   Sous 768px, le bandeau est la couverture courte en tête de colonne.
   À partir de 768px :
   - carnets : la page de gauche est la table des matières, fixe (titre,
     vignette, date, résumé par note) ; la page de droite est l'espace de
     lecture, vide sur l'index, et le billet y glisse par une transition de
     vue entre pages, sans script ;
   - pages légales : la page de gauche est la page de titre, fixe.
   Le h1 n'existe qu'une fois par page.

   Aucune capitale ni interlettrage ici : les libellés sont écrits en bas
   de casse dans le HTML. Seules les lignes de titre justifiées sont en
   capitales, mesurées comme telles (livre.css, [data-groupe="titre"]).

   Valeurs nouvelles, à remonter au design system (dette documentée) :
   - corps-long : 1.0625rem, interlignage 1.7, en encre ;
   - titre-billet : 2.25rem (3rem au plus en double page), graisse 800,
     largeur 62 %, interlignage 1.05 ;
   - citation : filet gauche de 2px en titre, 1.25rem, graisse 300 ;
   - code : pile monospace du système, sur papier-2, sans rayon ;
   - 42svh : hauteur minimale du bandeau en double page ; 72 % : méta sur la toile ;
   - 650 : graisse des h3 d'un billet ; 26px : monogramme de la page de
     titre, comme dans la barre ; 1.625rem : titres de la liste des notes ;
   - 0.82 : voile de la loupe ;
   - 96px et 72px : vignettes de la liste ; 3px : filet de la note
     courante ; 24px, 340ms et 160ms : glissement de la lecture. */

@layer composants {
  /* Au zoom texte, une adresse ou une URL plus longue que la colonne se
     coupe plutôt que de déborder. */
  .papier { overflow-wrap: anywhere; }

  /* ---- Bandeau : la page de titre ---- */
  .bandeau {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--e-4);
    /* Sur téléphone, le bandeau prend la hauteur de ce qu'il porte. Une
       hauteur minimale y laissait, au-dessus d'un titre court (mentions
       légales, 404), un vide bleu que rien ne justifie : la barre est en
       bas. La double page garde la sienne, voir les adaptations. */
    margin: 0;
    padding: var(--e-6) var(--gouttiere) var(--e-6);
    background: var(--grain-toile), var(--toile);
    color: var(--sur-toile);
  }
  .bandeau a { color: var(--sur-toile); }
  .bandeau :focus-visible { outline-color: var(--focus-toile); }
  .bandeau h1 { color: var(--toile-titre); margin: 0; }
  .bandeau .affirmation, .bandeau .chapo { color: var(--sur-toile); }
  .titre-page { display: grid; gap: var(--e-4); }

  /* Ligne de tête : monogramme (double page seulement) et fil. */
  .tete-page { display: flex; align-items: center; gap: var(--e-4); }
  .tete-page .marque { display: none; }
  .tete-page .marque svg { width: 26px; height: auto; }
  .fil, .retour { font-size: 0.8125rem; line-height: 1.45; font-weight: 600; }
  /* Le retour suit la grammaire du lien de suite des accueils : sans
     soulignement, un signe métal devant, ici la flèche de la barre
     tournée vers ce qu'on quitte. Le trait de survol reste celui de
     livre.css. */
  .fil a, .retour a {
    display: inline-flex; align-items: center; gap: var(--e-2);
    min-height: var(--cible); text-decoration: none;
  }
  /* Un cran d'air sous le retour : il mène ailleurs, il ne coiffe pas
     la date ni le titre qui le suivent. */
  .bandeau > .retour, .bandeau > .tete-page:has(.fil) { margin-block-end: var(--e-5); }
  /* Archivo n'a pas de flèche vers la gauche : un téléphone en
     empruntait une, maigre, à une autre police. La flèche est donc celle
     du monogramme, ↓, tournée d'un quart de tour. */
  .fil a::before, .retour a::before {
    content: "\2193" / "";
    display: inline-block;
    inline-size: 1em; text-align: center;
    transform: rotate(90deg);
    font-size: 1.15em; line-height: 1; font-weight: 700;
    color: var(--metal);
  }

  /* Méta : date, étiquette, mise à jour. */
  .dates {
    display: flex; flex-wrap: wrap; gap: 0 var(--e-3);
    font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums;
    color: color-mix(in oklch, var(--sur-toile) 72%, transparent);
  }
  .titre-billet {
    font-size: 2.25rem; line-height: 1.05; font-weight: 800; font-stretch: 62%;
    text-wrap: balance;
  }
  /* Titre en lignes justifiées (index, pages légales) : la taille et la
     graisse du h2 de l'accueil, dont il reprend les largeurs. */
  .bandeau h1:not(.titre-billet) {
    font-size: calc(var(--in) * var(--k-titre));
    line-height: 0.88;
    font-weight: 900;
  }

  /* Plan et pied : la page de gauche seulement. */
  .pied-page { display: none; }

  /* ---- Papier ---- */
  .papier { display: grid; gap: var(--e-5); padding: var(--e-7) var(--gouttiere) 0; }

  /* Liste des notes (index, et table des matières d'un billet) */
  .table-rappel, .lecture-vide { display: none; }
  /* La table de l'index couvre la quatrième, collée en bas dessous, comme
     le papier le fait sur les autres pages. */
  .table-carnets {
    position: relative; z-index: 1;
    width: var(--col); margin-inline: auto;
    background: var(--grain-sombre), var(--fond);
  }
  .liste-notes {
    display: grid; gap: var(--e-5);
    padding: var(--e-7) var(--gouttiere) 0;
    background: var(--grain-sombre), var(--fond);
  }
  .liste-notes > li + li { padding-block-start: var(--e-5); border-block-start: var(--trait) solid var(--filet); }
  .note-lien {
    display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--e-4);
    align-items: start; min-height: var(--cible-liste);
    color: var(--encre); text-decoration: none;
  }
  .note-vignette, .note-vignette img { display: block; width: 72px; height: 72px; }
  .note-vignette img { object-fit: cover; }
  .note-vignette-vide { background: var(--fond-2); }
  .note-texte { display: grid; gap: var(--e-1); }
  .note .dates { color: var(--faible); }
  .note-titre {
    margin: 0; font-size: 1.25rem; line-height: 1.15; font-weight: 800; font-stretch: 82%;
    color: var(--titre);
  }
  .note-resume { font-size: 0.9375rem; line-height: 1.45; }
  .note-lien:hover .note-titre { color: var(--survol-texte); }
  .vignette img, .prose figure img { width: 100%; height: auto; }

  /* Billet */
  .prose { display: grid; gap: var(--e-4); }
  .prose p, .prose li {
    font-size: 1.0625rem; line-height: 1.7; color: var(--encre);
  }
  .prose a:not(.bil-loupe) {
    color: var(--accent);
    text-decoration-color: var(--filet-fort);
    text-underline-offset: 0.2em;
  }
  .prose h2 {
    font-size: 1.5rem; line-height: 1.15; font-weight: 800; font-stretch: 82%;
    color: var(--titre); text-wrap: balance;
    margin-block: var(--e-5) 0;
    scroll-margin-block-start: var(--e-6);
  }
  .prose h3 {
    font-size: 1.125rem; line-height: 1.4; font-weight: 650; font-stretch: 90%;
    color: var(--encre); margin-block: var(--e-3) 0;
  }
  .prose ul, .prose ol { display: grid; gap: var(--e-2); padding-inline-start: var(--e-5); }
  .prose ul { list-style: square; }
  .prose ol { list-style: decimal; }
  .prose li::marker { color: var(--filet-fort); }
  .prose blockquote {
    margin: 0;
    padding-inline-start: var(--e-4);
    border-inline-start: var(--trait-fort) solid var(--titre);
  }
  .prose blockquote p {
    font-size: 1.25rem; line-height: 1.35; font-weight: 300; font-stretch: 72%;
    color: var(--titre);
  }
  .prose code, .prose pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875em;
    background: var(--fond-2);
    border-radius: 0;
  }
  .prose code { padding: 0.1em 0.3em; }
  .prose pre {
    margin: 0;
    padding: var(--e-4);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    line-height: 1.5;
  }
  .prose pre code { padding: 0; background: none; font-size: inherit; }
  .prose .tableau { overflow-x: auto; }
  .prose table { border-collapse: collapse; font-size: 0.875rem; }
  .prose th, .prose td { padding: var(--e-2) var(--e-3); border-block-end: var(--trait) solid var(--filet); text-align: start; }
  .prose figure { display: grid; gap: var(--e-2); margin: 0; }
  .prose figcaption {
    font-size: 0.8125rem; font-weight: 600; font-stretch: 100%; color: var(--faible);
  }
  .bil-rv a { display: grid; gap: var(--e-2); }

  /* La loupe (scripts/loupe.js) : la photo en grand sur un voile, cadre
     sur la toile, commandes carrées sur la toile, sans rayon. */
  .loupe {
    width: 100%; max-width: 100%; height: 100%; max-height: 100%;
    margin: 0; padding: 0; border: 0;
    background: none; color: var(--sur-toile);
  }
  .loupe::backdrop { background: oklch(0 0 0 / 0.82); }
  .loupe-bac {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: center;
    justify-items: center;
    gap: var(--e-3) var(--e-4);
    min-height: 100%;
    padding: var(--gouttiere);
    touch-action: pan-y;
  }
  .loupe-f { grid-column: 1 / -1; grid-row: 1; display: grid; justify-items: center; gap: var(--e-3); margin: 0; }
  .loupe-f picture { display: block; border: var(--e-2) solid var(--toile-2); background: var(--fond-2); }
  .loupe-f img {
    display: block; width: auto; height: auto;
    max-width: calc(100vw - 2 * var(--gouttiere) - 2 * var(--e-2));
    max-height: calc(100dvh - 11rem);
  }
  .loupe-f figcaption {
    font-size: 0.8125rem; font-weight: 600; text-align: center;
  }
  .loupe-nav, .loupe-x {
    display: grid; place-items: center;
    width: var(--cible); height: var(--cible);
    border: 0; background: var(--toile-2); color: var(--sur-toile);
    font-size: 1.5rem; line-height: 1; cursor: pointer;
  }
  .loupe-prec { grid-column: 1; grid-row: 2; justify-self: end; }
  .loupe-suiv { grid-column: 2; grid-row: 2; justify-self: start; }
  .loupe-x { position: fixed; inset-block-start: var(--gouttiere); inset-inline-end: var(--gouttiere); z-index: 2; font-size: 1rem; }
  .loupe :focus-visible { outline-color: var(--focus-toile); }
  .bil-loupe { display: block; cursor: zoom-in; }
  /* Les images de contenu baissent d'un cran la nuit (--filtre-image,
     none le jour). Jamais le portrait ni le monogramme. */
  .papier figure img { filter: var(--filtre-image); }

  /* ---- Pages d'offre (spec 11 : lisibilité) ----
     Pages longues, lues en diagonale sur téléphone. Trois aides au survol :
     le sommaire de page sous le chapô (replié en colonne, déplié en double
     page, repris à gauche avec la section courante), des titres de
     section numérotés en marge, et des blocs qui se distinguent (étapes,
     inclus et non inclus, FAQ). La page de titre porte « Conseil &
     projets » à la place de la fonction (l'employeur n'y est jamais
     nommé). Un seul aplat sur la toile, l'appel de la section contact ; les autres
     appels sont des liens soulignés d'un filet. Valeurs propres : 34em
     (mesure du corps, de 55 à 70 signes), 1.6 (interligne), 48px (colonne
     des numéros d'étape), 760px (seuil des deux colonnes d'inclus), 60px
     (cibles du sommaire et de la FAQ), 6px (filet des puces). */
  .fonction-page {
    font-size: 0.8125rem; line-height: 1.3; font-weight: 600;
    color: color-mix(in oklch, var(--sur-toile) 72%, transparent);
  }
  .offre .titre-page .k { font-size: 0.8125rem; font-weight: 700; color: color-mix(in oklch, var(--sur-toile) 72%, transparent); }
  .offre .titre-page .k span + span::before, .offre-section .k.meta span + span::before { content: "· "; }
  .offre .plan { display: none; }
  .offre .papier { display: block; counter-reset: titre-offre; }
  /* Sur la colonne de téléphone, le corps garde sa taille (cran corps) et
     resserre sa lettre (axe wdth à 85 %) pour tenir ses 55 signes. */
  .offre { --offre-largeur: 85%; }

  /* Mesure et corps : le cran corps, en encre, 55 à 70 signes par ligne. */
  .offre .papier .p, .offre-section li {
    max-inline-size: 28em;
    font-size: 1rem; line-height: 1.6; font-stretch: var(--offre-largeur, 100%);
    color: var(--encre);
  }
  .offre .papier .p + .p { margin-block-start: var(--e-4); }
  .offre-intro .p:first-child { font-size: 1.125rem; font-weight: 600; }
  .offre-apropos { margin-block-start: var(--e-6); padding-block-start: var(--e-5); border-block-start: var(--trait) solid var(--filet); }
  .offre .papier .k.meta { font-size: 0.75rem; font-weight: 700; color: var(--faible); margin-block-start: var(--e-2); }

  /* Appels à l'action : des liens secondaires, filet de 2px dessous. */
  .ctas { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); margin-block-start: var(--e-5); }
  .cta-lien {
    display: inline-flex; align-items: center; min-height: var(--cible);
    font-size: 0.8125rem; line-height: 1.3; font-weight: 700;
    color: var(--accent);
    text-decoration: underline var(--trait-fort) var(--filet-fort);
    text-underline-offset: 0.35em;
  }
  .cta-lien:hover { color: var(--accent-vif); text-decoration-color: var(--metal); }
  /* Le seul aplat sur la toile de la page : l'appel de la section contact. */
  .cta {
    display: inline-flex; align-items: center;
    min-height: var(--cible);
    padding: var(--e-2) var(--e-4);
    font-size: 0.875rem; line-height: 1.2; font-weight: 700;
    text-decoration: none;
  }
  .cta-principal { background: var(--toile-2); color: var(--sur-toile); }
  .cta-principal:hover { background: var(--accent-vif); color: var(--sur-accent); }

  /* Le sommaire de page. */
  .sur-page {
    margin-block-start: var(--e-6);
    border-block: var(--trait-fort) solid var(--titre);
  }
  .sur-page > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 60px;
    color: var(--titre); font-size: 0.8125rem; font-weight: 700;
  }
  .offre summary::after { content: "+" / ""; }
  .offre details[open] > summary::after { content: "\2212" / ""; }
  .sur-page[open] > summary { margin-block-end: 0; }
  .sur-page ol { padding-block-end: var(--e-3); }
  .sur-page li + li { border-block-start: var(--trait) solid var(--filet); }
  .sur-page a {
    display: flex; align-items: center; min-height: var(--cible);
    font-size: 0.9375rem; line-height: 1.3; font-weight: 600;
    color: var(--titre); text-decoration: none;
  }
  .sur-page a:hover { color: var(--accent); }

  /* Les sections et leurs titres, numérotés en marge (jamais lus). */
  .offre-section { padding-block-start: var(--e-7); }
  .offre-section > .k { font-size: 0.8125rem; font-weight: 700; color: var(--faible); margin-block-end: var(--e-2); }
  .offre-section > .h2 {
    position: relative;
    margin: 0 0 var(--e-4);
    font-size: 1.625rem; line-height: 1.1; font-weight: 800; font-stretch: 100%;
    color: var(--titre); text-wrap: balance;
    counter-increment: titre-offre;
  }
  .offre-section > .h2::before {
    content: counter(titre-offre, decimal-leading-zero) / "";
    position: absolute;
    inset-inline-end: calc(100% + min(8px, var(--gouttiere) - 15px));
    inset-block-start: 0.55em;
    font-size: 0.6875rem; line-height: 1; font-weight: 600; font-stretch: 116%;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--titre);
  }
  .offre-section .h3, .offre-section .mt {
    margin-block: var(--e-5) var(--e-2);
    font-size: 1.25rem; line-height: 1.15; font-weight: 800; font-stretch: 82%;
    color: var(--titre);
  }
  .offre-section .aparte { padding-inline-start: var(--e-4); border-inline-start: 3px solid var(--accent); }
  .offre-section .chs { display: grid; gap: var(--e-4); }

  /* Listes en blocs (situations, formes, règles) : un filet entre deux,
     sans marqueur ; un numéro déjà écrit dans le titre reste le seul. */
  .offre-section .med > li {
    max-inline-size: none;
    padding-block: var(--e-4);
    border-block-start: var(--trait) solid var(--filet);
  }
  .offre-section .med > li:first-child { border-block-start: var(--trait-fort) solid var(--titre); }
  .offre-section .med > li > .mt, .offre-section .med > li > .h3 { margin-block-start: 0; }
  .offre-section .med > li > * + * { margin-block-start: var(--e-2); }

  /* Listes à puces : un filet court en marge, alignement suspendu. */
  .offre-section .liste { display: grid; gap: var(--e-2); margin-block: var(--e-3); }
  .offre-section .liste li { position: relative; padding-inline-start: var(--e-4); }
  .offre-section .liste li::before {
    content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.8em;
    width: 6px; height: var(--trait-fort); background: var(--titre);
  }

  /* Inclus et non inclus : côte à côte dès 760px de colonne. */
  .inclus { container-type: inline-size; }
  .inclus-non { margin-block-start: var(--e-5); }
  @container (min-width: 760px) {
    .inclus-grille { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); }
    .inclus-non {
      margin-block-start: 0;
      padding-inline-start: var(--e-5);
      border-inline-start: var(--trait) solid var(--filet);
    }
    .inclus-non > .h3 { margin-block-start: 0; }
  }

  /* Les volets « Ce qui se joue » et la FAQ : style source, cible de
     60px, « + » et « − » non lus. */
  .offre-section details { border-block-start: var(--trait) solid var(--filet); }
  .offre-section details > summary { display: flex; min-height: 60px; justify-content: space-between; }
  .offre-section details.q > summary { color: var(--titre); }
  .q-titre {
    margin: 0;
    font-size: 1rem; line-height: 1.35; font-weight: 700; font-stretch: 100%;
    color: inherit;
  }
  .offre-section details > summary:hover { color: var(--accent); }
  .offre-section details[open] > summary { margin-block-end: var(--e-3); }
  .offre-section details > .p { padding-block-end: var(--e-4); }
  .offre :focus-visible { outline-offset: 2px; }

  /* ---- /creation-site-internet/ : trois motifs ----
     Situations, réponses, étapes. Aucune valeur propre : la typographie
     vient des classes de styles de texte posées dans le HTML (titre-bloc,
     source, chapo, petit), le reste des jetons d'espacement, de mesure et
     de couleur. */

  /* Les situations : une série, pas des cartes. Un filet vertical les
     relie, un rang (01 à 05, non lu) ouvre chacune, le renvoi ferme. */
  .serie {
    counter-reset: situation;
    border-inline-start: var(--trait) solid var(--filet);
  }
  .serie > li {
    position: relative;
    padding-inline-start: var(--e-5);
    counter-increment: situation;
  }
  .serie > li + li { margin-block-start: var(--e-7); }
  .serie > li::before {
    content: counter(situation, decimal-leading-zero) / "";
    display: block;
    margin-block-end: var(--e-2);
    font-size: 0.6875rem; font-weight: 600; font-stretch: 116%;
    font-variant-numeric: tabular-nums;
    color: var(--faible);
  }
  /* Le rang pose un cran de titre sur le filet de la série. */
  .serie > li::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(-1 * var(--trait-fort));
    inline-size: var(--trait-fort);
    block-size: var(--e-6);
    background: var(--titre);
  }
  .serie .titre-bloc { margin: 0 0 var(--e-3); }
  .renvoi {
    margin-block-start: var(--e-4);
    padding-block-start: var(--e-3);
    border-block-start: var(--trait) solid var(--filet);
    max-inline-size: 28em;
  }
  .renvoi .lien { font-weight: 700; }

  /* Les réponses : trois blocs successifs. Mêmes libellés dans le même
     ordre, alignés d'un bloc à l'autre en double page : on compare en
     descendant. La réponse principale (la création) est posée sur une
     bande papier-2, comme les bandes de l'accueil, sans cadre ni ombre. */
  .reponses { display: grid; gap: var(--e-6); margin-block-start: var(--e-5); }
  .reponse { border-block-start: var(--trait-fort) solid var(--titre); padding-block-start: var(--e-4); }
  .reponse-principale {
    margin-inline: calc(-1 * var(--gouttiere));
    padding: var(--e-5) var(--gouttiere);
    border-block-start-color: var(--accent);
    background: var(--grain-sombre), var(--fond-2);
  }
  .reponse .titre-bloc { margin: 0 0 var(--e-4); }
  .reponse dl { margin: 0; }
  .reponse dt { margin-block-start: var(--e-3); }
  .reponse dt:first-child { margin-block-start: 0; }
  .reponse dd {
    margin: var(--e-1) 0 0;
    padding-block-end: var(--e-3);
    border-block-end: var(--trait) solid var(--filet);
    color: var(--encre);
  }
  .reponse dd:last-child { border-block-end: 0; padding-block-end: 0; }

  /* Les étapes : un numéro dans une colonne de la largeur d'une cible,
     un fil qui les relie, le titre puis le texte. */
  .etapes { counter-reset: etape; position: relative; margin-block-start: var(--e-5); }
  .etapes > li {
    position: relative;
    display: grid;
    grid-template-columns: var(--cible) minmax(0, 1fr);
    counter-increment: etape;
    padding-block-end: var(--e-6);
  }
  .etapes > li::before {
    content: counter(etape) / "";
    font-size: 1.25rem; line-height: 1.15; font-weight: 800; font-stretch: 116%;
    font-variant-numeric: tabular-nums;
    color: var(--titre);
  }
  /* Le fil : de chaque numéro au suivant, dans la colonne des numéros. */
  .etapes > li:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block: var(--e-6) var(--e-2);
    inset-inline-start: var(--e-2);
    inline-size: var(--trait);
    background: var(--filet-fort);
  }
  .etapes .p { margin: 0; }
  .etapes .titre-bloc { display: block; margin-block-end: var(--e-1); }
  /* Le délai : la phrase qui engage, au corps du chapô, tenue par un filet
     d'accent ; vue, pas criée. */
  .delai {
    margin-block-start: var(--e-2);
    padding-inline-start: var(--e-4);
    border-inline-start: var(--trait-fort) solid var(--accent);
    max-inline-size: 28em;
  }
  .hors-forfait {
    margin-block-start: var(--e-6);
    padding-block-start: var(--e-3);
    border-block-start: var(--trait) solid var(--filet);
    max-inline-size: 34em;
    color: var(--corps);
  }

  /* ---- Page 404 ----
     La page de titre (« Page introuvable » en lignes justifiées), un
     paragraphe en trois langues et trois portes. Pas de quatrième. */
  .erreur-code { font-size: 0.8125rem; font-weight: 700; color: color-mix(in oklch, var(--sur-toile) 72%, transparent); }
  .erreur-texte { display: grid; gap: var(--e-3); }
  .erreur-portes { display: grid; border-block-start: var(--trait-fort) solid var(--titre); }
  .erreur-portes a {
    display: flex; align-items: center; min-height: var(--cible-liste);
    border-block-end: var(--trait) solid var(--filet);
    color: var(--titre); font-size: 1.25rem; font-weight: 800; font-stretch: 82%;
    text-decoration: none;
  }
  .erreur-portes a:hover { color: var(--accent); }
  .erreur .papier { padding-block-end: var(--e-8); }

  /* Pages légales */
  .legal { display: grid; gap: var(--e-4); }
  .legal h3 {
    font-size: 1.5rem; line-height: 1.15; font-weight: 800; font-stretch: 82%;
    color: var(--titre); margin-block-start: var(--e-4);
  }
  .legal a { color: var(--accent); text-decoration-color: var(--filet-fort); text-underline-offset: 0.2em; }

}

@layer adaptations {
  @media (min-width: 768px) and (min-height: 501px) {
    .pages { min-height: 100svh; }
    .bandeau { min-height: 42svh; padding-block-start: var(--e-7); }
    .papier { padding-block-start: var(--e-7); }
    .tete-page .marque { display: inline-flex; align-items: center; min-height: var(--cible); }
    .pied-page { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-5); font-size: 0.8125rem; font-weight: 600; }
    .pied-page a { display: inline-flex; align-items: center; min-height: var(--cible); }
    .pied-page .contact-metal {
      margin-inline-start: auto;
      padding-inline: var(--e-4);
      background: var(--aplat-toile-fond);
      color: var(--aplat-toile-texte);
      text-decoration: none;
    }
    .pied-page .contact-metal:hover { background: var(--metal-vif); color: var(--sur-metal); }
    .pied-page .bascule {
      display: inline-flex; min-height: var(--cible);
      padding: 0; background-color: transparent; border: 0; color: var(--sur-toile);
    }
    .pied-page .bascule:hover { color: var(--survol-texte); }

    /* ---- Pages légales : la page de titre, fixe à gauche ---- */
    .legale .bandeau {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      z-index: 2;
      width: var(--gauche);
      height: 100svh; height: 100dvh;
      min-height: 0;
      justify-content: flex-start;
      gap: var(--e-5);
      padding: 40px;
      overflow-y: auto;
      background: var(--grain-toile), var(--toile-2);
    }
    .legale .retour { display: none; }
    .legale .titre-page { margin-block-start: auto; }
    .legale .bandeau h1:not(.titre-billet) { font-size: calc((var(--gauche) - 80px) * var(--k-titre)); }

    /* ---- Pages d'offre : la page de titre porte le plan de la page ---- */
    .offre { --offre-largeur: 100%; }
    /* Réponses : libellé à gauche, valeur à droite. Les libellés étant les
       mêmes dans les trois blocs, leur colonne a la même largeur partout. */
    .reponse dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--e-5); }
    .reponse dt, .reponse dd { padding-block: var(--e-3); border-block-end: var(--trait) solid var(--filet); margin: 0; }
    .reponse dt:last-of-type, .reponse dd:last-child { border-block-end: 0; }
    .offre .titre-page { margin-block-start: 0; }
    .offre .titre-billet { font-size: clamp(2.25rem, 0.75rem + 2.3vw, 3rem); }
    .offre .tete-page { flex-wrap: wrap; }
    .offre .plan { display: block; margin-block-start: auto; }
    .offre .plan ol { border-block-start: var(--trait-fort) solid var(--sur-toile); }
    .offre .plan li { border-block-end: var(--trait) solid var(--toile-filet); }
    .offre .plan a {
      position: relative;
      display: flex; align-items: center; min-height: 2.75rem;
      font-size: 0.875rem; font-weight: 700; text-decoration: none;
    }
    .offre .plan a:hover { color: var(--survol-texte); }
    /* La section courante (scripts/sur-page.js), comme sur l'accueil. */
    .offre .plan a[aria-current="true"]::before {
      content: "";
      position: absolute;
      inset-block: 25%;
      inset-inline-start: calc(-1 * var(--e-3));
      width: 3px;
      background: var(--metal);
    }
    /* ---- Carnets : la table des matières à gauche, la lecture à droite ---- */
    .table-carnets, .table-rappel {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: var(--e-5);
      width: var(--gauche);
      height: 100svh; height: 100dvh;
      margin: 0;
      padding: 40px;
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--grain-toile), var(--toile-2);
      color: var(--sur-toile);
      view-transition-name: carnets-liste;
    }
    .table-carnets a { color: var(--sur-toile); }
    /* En double page, la table est sur la toile : le survol de la toile. */
    .table-carnets {
      --survol-texte: var(--sv-toile-texte);
      --survol-trait: var(--sv-toile-trait);
      --survol-epaisseur: 2px;
    }
    .table-carnets .pied-page a:not(.contact-metal):hover,
    .table-carnets .table-titre a:hover { color: var(--survol-texte); }
    .table-carnets :focus-visible { outline-color: var(--focus-toile); }
    .table-tete { display: grid; gap: var(--e-3); }
    /* L'en-tête de la table est le même sur l'index et dans un billet, à
       l'espacement près : la liste ne saute pas d'une page à l'autre. */
    .carnets-index .table-tete {
      display: grid; gap: var(--e-3);
      min-height: 0; padding: 0; background: none;
    }
    .carnets-index .table-tete .tete-page { display: block; }
    .table-tete .marque { display: inline-flex; align-items: center; min-height: var(--cible); }
    .carnets-index .retour { display: none; }
    .carnets-index .titre-page { gap: var(--e-3); }
    .table-tete h1, .table-titre {
      margin: 0;
      font-size: calc((var(--gauche) - 80px) * var(--k-titre));
      line-height: 0.88;
      font-weight: 900;
      color: var(--toile-titre);
    }
    .table-titre a { text-decoration: none; }
    .table-tete .affirmation { color: var(--sur-toile); }
    .table-tete .marque svg { width: 26px; height: auto; }

    .table-carnets .liste-notes { padding: 0; background: none; gap: 0; }
    .table-carnets .liste-notes > li + li { padding-block-start: 0; border-block-start: 0; }
    .table-carnets .liste-notes > li { border-block-end: var(--trait) solid var(--toile-filet); }
    .table-carnets .note-lien {
      grid-template-columns: 96px minmax(0, 1fr);
      padding: var(--e-4) var(--e-3);
      border-inline-start: 3px solid transparent;
      color: var(--sur-toile);
    }
    .table-carnets .note-lien[aria-current="page"] { border-inline-start-color: var(--metal); }
    .table-carnets .note-vignette, .table-carnets .note-vignette img { width: 96px; height: 96px; }
    .table-carnets .note-vignette-vide { background: color-mix(in oklch, var(--sur-toile) 12%, transparent); }
    .table-carnets .note .dates { color: color-mix(in oklch, var(--sur-toile) 72%, transparent); }
    .table-carnets .note-titre {
      font-size: 1.625rem; line-height: 1.05; font-weight: 800; font-stretch: 62%;
      color: var(--sur-toile);
    }
    .table-carnets .note-resume {
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
      overflow: hidden; font-size: 0.8125rem; line-height: 1.45;
    }
    .table-carnets .note-lien:hover .note-titre { color: var(--survol-texte); }
    .table-carnets .pied-page { margin-block-start: auto; }

    /* La lecture : l'en-tête du billet passe sur le papier, à droite. */
    .carnets .pages { view-transition-name: carnets-lecture; }
    .carnets .quatrieme { view-transition-name: carnets-fin; }
    .carnets-billet .bandeau {
      min-height: 0;
      padding: var(--e-7) var(--gouttiere) 0;
      background: none;
      color: var(--encre);
    }
    .carnets-billet .tete-page { display: none; }
    .carnets-billet .bandeau h1 { color: var(--titre); }
    .carnets-billet .bandeau .dates { color: var(--faible); }
    .carnets-billet .bandeau .chapo { color: var(--encre); }
    .carnets-billet .titre-billet { font-size: clamp(2.25rem, 0.75rem + 2.3vw, 3rem); }
    .carnets-billet .bandeau :focus-visible { outline-color: var(--accent); }
    .carnets-billet .papier { padding-block-start: var(--e-6); }

    /* L'index : rien à lire, une invitation au centre, pas de quatrième. */
    .carnets-index .lecture-vide {
      display: grid;
      align-content: center;
      min-height: 100svh;
      padding-block: 0;
    }
    .carnets-index .lecture-vide .affirmation {
      padding-block-start: var(--e-4);
      border-block-start: var(--trait-fort) solid var(--titre);
    }
    .carnets-index .quatrieme, .carnets-index .cran { display: none; }
    .erreur .papier { min-height: 100svh; align-content: center; }
  }
}

@layer adaptations {
  /* Paysage court : la colonne de 720px laisse au corps sa largeur pleine. */
  @media (max-height: 500px) {
    .offre { --offre-largeur: 100%; }
  }
}

@layer mouvement {
  /* Le fil des étapes se teinte à mesure qu'on les lit. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .etapes > li:not(:last-child)::after {
        transform-origin: 50% 0;
        animation: fil-etape linear both;
        animation-timeline: view();
        animation-range: entry 40% cover 55%;
      }
    }
  }
  @keyframes fil-etape { from { transform: scaleY(0); } }

  /* Transition de vue entre pages : la liste reste en place (même nom des
     deux côtés), la lecture glisse. La racine n'est pas capturée : entre
     deux pages légales, rien ne bouge. */
  @view-transition { navigation: auto; }
  :root { view-transition-name: none; }
  ::view-transition-group(carnets-liste),
  ::view-transition-old(carnets-liste),
  ::view-transition-new(carnets-liste) { animation: none; }
  ::view-transition-old(carnets-liste) { display: none; }
  ::view-transition-group(carnets-lecture) { animation: none; }
  ::view-transition-old(carnets-lecture) { animation: 160ms var(--courbe) both lecture-sort; }
  ::view-transition-new(carnets-lecture) { animation: 340ms var(--courbe) both lecture-entre; }
  /* La quatrième, collée sous la lecture, transparaîtrait pendant que
     celle-ci apparaît : elle reste masquée le temps du glissement. */
  ::view-transition-group(carnets-fin) { animation: none; }
  ::view-transition-old(carnets-fin) { display: none; }
  ::view-transition-new(carnets-fin) { animation: 340ms steps(1, end) both lecture-masque; }
  @keyframes lecture-masque { from, to { opacity: 0; } }
  @keyframes lecture-sort { to { opacity: 0; } }
  @keyframes lecture-entre { from { opacity: 0; transform: translateX(24px); } }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(carnets-lecture), ::view-transition-new(carnets-lecture),
    ::view-transition-new(carnets-fin) { animation-duration: 0s; }
  }
}