/* =====================================================================================================
   Il était une vie : feuille de style commune (toutes les pages).
   Direction « La page de titre » : le site se lit comme le livre qu'on offre.

   PLAN DE DESIGN (première passe)
   -------------------------------
   Concept
     Un livre de souvenirs relié, qu'une famille garde et transmet. La page d'accueil s'ouvre sur une
     page de titre, face au livre de Jeanne qui s'ouvre à la semaine 34 ; la suite se lit comme un
     ouvrage : six chapitres (une vraie suite, d'où les chiffres romains), un titre courant, des
     lettrines, des notes en marge, un sommaire dont les folios sont les lundis de l'année, un envoi et
     un achevé d'imprimer. Les autres pages sont des pages du même livre : la commande est un bulletin
     en quatre parties, la page merci un envoi avec la carte en frontispice, les pages légales du texte
     courant à articles numérotés, l'administration un registre sobre.

   Couleurs (deux thèmes, deux matières ; contrastes WCAG mesurés)
     Clair « Vergé » : papier #EEECE3 (vergeures à peine visibles) ; encre #1D1E19 (14,2:1) ; encre
       secondaire #55554B (6,4:1) ; seconde couleur d'impression, le vert de la reliure #1E4034 (9,7:1),
       pour les chiffres, les lettrines et les mots qui viennent de la commande ; filet de champ #7E7A6A
       (3,6:1). Toile #1E3A31 et or #C8A65B à #E6CE92 seulement sur le livre et sur le bouton (or sur
       toile 8,0:1), jamais en texte sur le papier.
     Sombre « Garde » : papier de garde vert très sombre #121916 ; encre #E8E3D3 (13,9:1) ; encre
       secondaire #ADA895 (7,5:1) ; la seconde couleur devient l'or #D3B470 (9,0:1). Le bouton passe à
       une toile plus claire #2B5446 cerné d'un filet d'or (7,7:1 contre le fond) : sa forme se lit.
     Le livre dessiné et la carte cadeau gardent leurs vraies matières dans les deux thèmes.

   Typographie (deux familles, licence SIL OFL, fichiers sur le site)
     Titres : IM Fell French Canon, caractère du XVIIe siècle avec son grain d'impression. Italique
       pour les titres, jamais sous 28 px ; romain (sous-ensemble : chiffres, capitales, €) pour les
       chiffres de chapitre, les lettrines, les prix. Son trait d'union touche les lettres voisines :
       il est pris dans EB Garamond (unicode-range), partout et automatiquement.
     Texte : EB Garamond, d'après Garamont, le caractère du livre français : 19 px sur téléphone,
       21 px sur ordinateur, interligne 1,5, alinéas en retrait. Tout texte saisi par un client (prénoms,
       message) est composé en EB Garamond, qui couvre le latin étendu ; IM Fell n'a que le latin.
     Petites capitales composées (capitales à 0,8 em, approche +0,14 em) là où un livre en met : marque,
       titre courant, mentions de la carte. Pas de sur-titre en capitales au-dessus des titres.
     Échelle : téléphone 40 / 34 / 24 / 19 / 16 ; ordinateur 76 (88 en très grand) / 52 / 30 / 21 / 17.

   Mise en page
     Pages liminaires centrées (page de titre, envoi) ; pages de texte asymétriques sur ordinateur :
     chiffre du chapitre suspendu, texte en 36 rem, gouttière, marge de 17 rem pour les notes.
     Titre courant collant : la marque, le chapitre en cours, « Offrir · prix » (44 px de haut au moins).
     Le bouton est une pièce de titre : toile, lettres d'or, filet intérieur.

   Mouvement
     Un seul moment orchestré, sur la page d'accueil : le livre fermé s'ouvre (1,35 s, une fois).
     Tout le reste est déclenché par le lecteur (la voix qui s'écrit, le sommaire déplié). Sans
     JavaScript, en mouvement réduit et à l'impression, tout est à son état final.

   RELECTURE CRITIQUE (deuxième passe) : retiré ou corrigé après la lecture des trois juges
     - Dorure métallique, reflet, « toile » tissée sur le livre : l'imprimeur à la demande livre une
       couverture rigide imprimée. Le plat dessiné est une couverture mate, titre imprimé à l'encre or ;
       pas d'éclat de frappe.
     - Trame en damier du bouton (moirée à 1x) : remplacée par un grain très fin.
     - Pontuseaux verticaux tous les 112 px (lus comme une grille) : contraste divisé par quatre.
     - « Justification du tirage », « Avant tirage », crédit des polices dans l'achevé d'imprimer :
       jargon qui ne vend rien. Gardés : l'objet (la pile d'exemplaires) et l'achevé d'imprimer, en
       mots simples.
     - Barre collante en bas sur mobile : écartée, le titre courant porte déjà « Offrir · prix » à
       toute hauteur de défilement, sans JavaScript ; deux appels à la fois se concurrencent.
     - Cachet postal daté sur la carte : écarté, il laisse croire à des lettres envoyées par la poste.
     - Écriture manuscrite : il n'y en a pas dans ce produit ; la dédicace est en Fell italique.
   ===================================================================================================== */

/* ------------------------------------------------------------------ Polices (licence SIL OFL 1.1, assets/fonts/OFL-*.txt) */
/* IM Fell French Canon italique (titres) : latin seul. Le trait d'union (U+002D, U+2010, U+2011) est exclu :
   il retombe sur EB Garamond, la famille suivante, dont le tiret ne touche pas les lettres. */
@font-face { font-family: "IM Fell French Canon"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/fell-french-canon-italique-latin.woff2) format("woff2"); unicode-range: U+0000-002C, U+002E-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-200F, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* IM Fell French Canon romain : sous-ensemble (chiffres, capitales accentuées, €, ponctuation) pour les chiffres
   de chapitre, les lettrines et les prix. */
@font-face { font-family: "IM Fell French Canon"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/fell-french-canon-romain-sous-ensemble.woff2) format("woff2"); unicode-range: U+20-21, U+28-29, U+2B-2C, U+2E, U+30-3B, U+3F, U+41-5A, U+A0, U+AB, U+BB, U+C0-C2, U+C4, U+C6-CF, U+D2-D4, U+D6, U+D9-DD, U+152, U+178, U+2019, U+202F, U+20AC; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/eb-garamond-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/eb-garamond-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/eb-garamond-italique-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/eb-garamond-italique-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ------------------------------------------------------------------ Jetons */
:root {
  --papier: #EEECE3;
  --papier-2: #F5F3EC;          /* champs, encadrés : le même papier, un ton plus clair */
  --vergeure: rgba(80, 66, 40, .022);
  --pontuseau: rgba(80, 66, 40, .007);
  --encre: #1D1E19;
  --encre-2: #55554B;
  --filet: #C6C0AF;             /* filets décoratifs */
  --filet-champ: #7E7A6A;       /* contour des champs et des choix (3:1) */
  --rubrique: #1E4034;          /* seconde couleur d'impression */
  --toile: #1E3A31;
  --toile-clair: #2A4C41;
  --toile-sombre: #13271F;
  --toile-bouton: #1E3A31;
  --bord-bouton: transparent;
  --or: #C8A65B;
  --or-clair: #E6CE92;
  --or-fonce: #8B6A2A;
  --page: #F5F2E9;              /* les pages du livre dessiné */
  --page-encre: #26261F;
  --page-encre-2: #5E5B50;
  --page-vert: #1F3A31;
  --tranche: #D9D2BF;
  --ombre: 24, 28, 20;
  --danger: #9A3324;
  --ok: #2F6B4F;
  --titre: "IM Fell French Canon", "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --texte: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --technique: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* identifiants, administration seule */
  --courbe-geste: cubic-bezier(.62, .02, .24, 1);
  --entree: cubic-bezier(.16, 1, .3, 1);
  --deplacement: cubic-bezier(.65, 0, .35, 1);
  --marge: 20px;
  /* Anciens noms, gardés pour les feuilles de page qui les emploient encore. */
  --paper: var(--papier); --ink: var(--encre); --muted: var(--encre-2); --cloth: var(--toile);
  --gilt: var(--rubrique); --gilt-texte: var(--rubrique); --line: var(--filet); --field-border: var(--filet-champ);
  --card: var(--papier-2); --on-cloth: var(--or-clair);
  --display: var(--titre); --body: var(--texte); --mono: var(--technique);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #121916; --papier-2: #19221E; --vergeure: rgba(240, 236, 220, .018); --pontuseau: rgba(240, 236, 220, .006);
    --encre: #E8E3D3; --encre-2: #ADA895; --filet: #33403A; --filet-champ: #6F7B73; --rubrique: #D3B470;
    --toile: #24473B; --toile-clair: #305A4C; --toile-sombre: #162E26; --toile-bouton: #2B5446; --bord-bouton: #C8A65B;
    --page: #E9E3D2; --page-encre: #26261F; --page-encre-2: #5A574C; --tranche: #BFB8A4; --ombre: 0, 0, 0;
    --danger: #E58A76; --ok: #6CC199;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #121916; --papier-2: #19221E; --vergeure: rgba(240, 236, 220, .018); --pontuseau: rgba(240, 236, 220, .006);
  --encre: #E8E3D3; --encre-2: #ADA895; --filet: #33403A; --filet-champ: #6F7B73; --rubrique: #D3B470;
  --toile: #24473B; --toile-clair: #305A4C; --toile-sombre: #162E26; --toile-bouton: #2B5446; --bord-bouton: #C8A65B;
  --page: #E9E3D2; --page-encre: #26261F; --page-encre-2: #5A574C; --tranche: #BFB8A4; --ombre: 0, 0, 0;
  --danger: #E58A76; --ok: #6CC199;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ Base : le papier vergé */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  color: var(--encre);
  background-color: var(--papier);
  /* Vergé : pontuseaux très espacés et presque invisibles, vergeures horizontales serrées, grain de fibres. */
  background-image:
    repeating-linear-gradient(90deg, transparent 0 104px, var(--pontuseau) 108px, transparent 112px),
    repeating-linear-gradient(0deg, transparent 0 3px, var(--vergeure) 3px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .2 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");
  font-family: var(--texte);
  font-size: 1.1875rem;
  line-height: 1.5;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  overflow-x: clip;
}
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h1, h2 { font-family: var(--titre); font-style: italic; line-height: 1.04; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 7vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); }
h3 { font-family: var(--texte); font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.cache, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }
.pc { text-transform: uppercase; font-size: .8em; letter-spacing: .14em; }
.muted { color: var(--encre-2); }
.petit { font-size: 1rem; }
.stack { display: grid; gap: 1rem; }
.stack-lg { display: grid; gap: 2rem; }
.wrap { max-width: 68rem; margin: 0 auto; padding-inline: var(--marge); }
.wrap.narrow { max-width: 46rem; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 40; background: var(--papier-2); color: var(--encre); padding: 10px 14px; border: 1px solid var(--filet-champ); }
.skip:focus { top: 8px; }
/* Ornement typographique (hedera) : <svg class="fleuron"><use href="#hedera"/></svg> */
.fleuron { display: block; width: 46px; height: 18px; color: var(--rubrique); }

/* ------------------------------------------------------------------ Le bouton : une pièce de titre */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: .5em 1.6em .56em;
  color: var(--or-clair);
  background-color: var(--toile-bouton);
  /* grain très fin, sans motif régulier (pas de moiré) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
  border: 0; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--bord-bouton), inset 0 0 0 4px var(--toile-bouton), inset 0 0 0 5px color-mix(in srgb, var(--or) 75%, transparent), 0 1px 1px rgba(0, 0, 0, .18), 0 6px 14px -8px rgba(var(--ombre), .5);
  font-family: var(--texte); font-weight: 600; font-size: 1.125rem; line-height: 1.1; letter-spacing: .03em;
  text-align: center; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, .35);
  cursor: pointer;
}
.btn:hover { filter: brightness(1.12); text-decoration: none; }
.btn:active { filter: brightness(.96); }
.btn:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; filter: none; }
.btn.secondary {
  color: var(--encre); background: transparent; text-shadow: none;
  box-shadow: inset 0 0 0 1px var(--filet-champ);
}
.btn.secondary:hover { filter: none; box-shadow: inset 0 0 0 2px var(--encre); }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: filter .2s ease, transform .2s ease, box-shadow .2s ease; }
  .btn:active:not([disabled]) { transform: translateY(1px); }
}
/* Le bouton du titre courant : plus petit, 44 px de haut au moins. */
.btn-tete { gap: 0; min-height: 44px; padding: .4em 1.05em .44em; font-size: 1.02rem; box-shadow: 0 0 0 1px var(--bord-bouton), inset 0 0 0 3px var(--toile-bouton), inset 0 0 0 4px color-mix(in srgb, var(--or) 70%, transparent); }
.btn-tete-prix { font-weight: 500; white-space: nowrap; }

/* Trois faits courts sous un bouton « Offrir » ou « Payer » (accueil, chapitre V, commande), composés en
   lignes comme l'adresse au pied d'une page de titre : ni puces, ni points médians. */
.faits { list-style: none; margin: 0; padding: 0; }
.faits li { font-size: .95rem; line-height: 1.36; color: var(--encre-2); text-wrap: balance; }
/* Un blanc d’une demi-ligne entre deux faits : quand l’un passe sur deux lignes, sa seconde ligne ne se lit
   pas comme un quatrième fait. */
.faits li + li { margin-top: .5em; }

/* ------------------------------------------------------------------ Titre courant (en-tête collant) */
header.top {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 56px; padding: 6px var(--marge);
  background: var(--papier);
  border-bottom: 1px solid color-mix(in srgb, var(--filet) 80%, transparent);
}
header.top .marque { justify-self: start; text-decoration: none; text-transform: uppercase; letter-spacing: .14em; font-size: .9rem; line-height: 1.2; white-space: nowrap; padding-block: 10px; }
header.top .marque:hover { text-decoration: underline; }
header.top .courant { display: none; }
header.top .btn { justify-self: end; }
header.top.sans-bouton { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------------ Formulaires (le bulletin) */
.field { display: grid; gap: .35rem; }
.field label, .field legend { font-weight: 600; font-size: 1.06rem; line-height: 1.3; }
.field .hint { color: var(--encre-2); font-size: 1rem; font-style: italic; line-height: 1.4; }
.field .error { color: var(--danger); font-size: 1rem; font-weight: 600; line-height: 1.35; padding-left: .6em; border-left: 2px solid var(--danger); }
input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="password"], input[type="search"], select, textarea {
  width: 100%; min-height: 48px; font: 400 1.1rem/1.35 var(--texte); color: var(--encre); background: var(--papier-2);
  border: 1px solid var(--filet-champ); border-radius: 2px; padding: .6rem .75rem;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--encre); outline-offset: 1px; }
::placeholder { color: var(--encre-2); opacity: 1; font-style: italic; }
textarea { min-height: 6rem; resize: vertical; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--filet-champ); background: var(--papier-2); border-radius: 2px; padding: .45rem 1rem; font-size: 1.04rem; line-height: 1.3; cursor: pointer; }
.choice input:checked + span { border-color: var(--rubrique); box-shadow: inset 0 0 0 1px var(--rubrique); color: var(--rubrique); font-weight: 600; background: color-mix(in srgb, var(--rubrique) 7%, var(--papier-2)); }
.choice input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }
.check { display: flex; gap: .65rem; align-items: flex-start; font-size: 1.04rem; line-height: 1.4; }
.check input { margin-top: .3rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

/* ------------------------------------------------------------------ Encadrés */
.card { background: var(--papier-2); border: 1px solid var(--filet); border-radius: 2px; padding: 1.4rem; }
.notice { border-left: 2px solid var(--rubrique); padding: .7rem 1rem; background: var(--papier-2); font-size: 1.02rem; }
.notice.error { border-left-color: var(--danger); }
.notice.ok { border-left-color: var(--ok); }

/* ------------------------------------------------------------------ Texte courant (pages légales) */
.prose { max-width: 38rem; display: grid; gap: 1rem; }
.prose h2 { font-size: 1.75rem; margin-top: 1.5rem; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .3rem; }
.prose table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.prose th, .prose td { border-bottom: 1px solid var(--filet); text-align: left; padding: .5rem .4rem; vertical-align: top; }
.table-scroll { overflow-x: auto; }

/* ------------------------------------------------------------------ Achevé d'imprimer (pied de page) */
footer.site { padding: 40px var(--marge) 56px; border-top: 1px solid color-mix(in srgb, var(--filet) 80%, transparent); color: var(--encre-2); font-size: 1rem; line-height: 1.45; }
footer.site .site-grille { display: grid; gap: 12px; max-width: calc(68rem - 2 * var(--marge)); margin: 0 auto; }
footer.site .site-titre { font-family: var(--titre); font-style: italic; font-size: 1.75rem; line-height: 1.1; color: var(--encre); }
footer.site nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
footer.site nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--encre); }
footer.site a { color: var(--encre); }

@media (min-width: 700px) {
  :root { --marge: 40px; }
  body { font-size: 1.25rem; }
  header.top { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem) minmax(0, 1fr); }
  header.top.sans-bouton { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem) minmax(0, 1fr); }
  header.top .courant { display: block; justify-self: stretch; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; font-size: 1.02rem; color: var(--encre-2); }
}
@media (min-width: 1000px) {
  :root { --marge: 56px; }
  body { font-size: 1.3125rem; }
}
@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 359px) {
  header.top .marque { letter-spacing: .08em; font-size: .82rem; }
}

/* ------------------------------------------------------------------ Contraste élevé (Windows) */
@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
  .choice input:checked + span { border: 3px solid Highlight; }
  .choice input:focus-visible + span { outline-color: Highlight; }
  .perso { text-decoration: underline; }
}

/* ------------------------------------------------------------------ Impression : le texte, sans l'appareil du site */
@media print {
  header.top, footer.site, .skip, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  /* Sans les fonds (réglage par défaut des navigateurs), un bouton reste lisible : texte noir, contour. */
  .btn { background: none; color: #000; box-shadow: none; border: 1px solid #000; text-shadow: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ Transitions entre les pages */
/* Seulement si le mouvement est permis : le titre courant reste en place, la page se fond. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  header.top { view-transition-name: entete; }
  ::view-transition-group(entete) { animation-duration: 0s; }
  ::view-transition-old(root) { animation: vt-sortie .2s var(--deplacement) both; }
  ::view-transition-new(root) { animation: vt-entree .45s var(--entree) both; }
  @keyframes vt-sortie { to { opacity: 0; } }
  @keyframes vt-entree { from { opacity: 0; } }
}