/* =====================================================================================================
   Il était une vie : page d'accueil, « La page de titre ».
   Le plan de design et sa relecture critique sont en tête de style.css. Ici : la page de titre et le
   livre de Jeanne qui s'ouvre (le seul mouvement orchestré), les six chapitres, l'envoi, la table.
   Tout état de départ caché est sous html.anim (posée par anim.js) et sous prefers-reduced-motion:
   no-preference : sans JavaScript, en mouvement réduit et à l'impression, la page est à son état final.
   ===================================================================================================== */

/* ------------------------------------------------------------------ Ouverture : page de titre et frontispice */
.ouverture {
  display: grid;
  grid-template-areas: "pour" "titre" "livre" "argument" "offre" "pied";
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding: 12px var(--marge) 36px;
  text-align: center;
}
.page-de-titre { display: contents; }
.ouverture .pour { grid-area: pour; font-style: italic; font-size: 1.06rem; line-height: 1.3; color: var(--encre); text-wrap: balance; }
.ouverture h1 {
  grid-area: titre;
  margin-top: 4px; max-width: 11em;
  font-size: clamp(2.05rem, 9.2vw, 2.5rem); line-height: 1; letter-spacing: -.005em;
}
.ouverture .fleuron { display: none; }
.ouverture .argument { grid-area: argument; margin-top: 4px; max-width: 23em; font-size: 1.02rem; line-height: 1.42; text-wrap: pretty; }
.offre-titre { grid-area: offre; display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 12px; }
.prix { display: grid; justify-items: end; text-align: right; line-height: 1.1; }
.prix .montant { font-family: var(--titre); font-size: 2.4rem; line-height: 1; letter-spacing: -.01em; }
.prix .inclus { font-style: italic; font-size: 1rem; color: var(--encre-2); white-space: nowrap; }
.prix .lancement { font-size: .9rem; line-height: 1.2; white-space: nowrap; color: var(--encre-2); }
.btn-titre { min-width: 160px; min-height: 52px; font-size: 1.2rem; }
.lancement { font-style: italic; }
/* Les trois faits sous le bouton (style.css) : ici leur place dans la page de titre. */
.faits-titre { grid-area: pied; margin-top: 12px; max-width: 25em; }

/* Le frontispice : aussi grand que la hauteur d'écran le permet sur téléphone, pour que le prix et le
   bouton restent dans le premier écran (390 x 700, 360 x 640, 390 x 620). La marge réservée au-dessus et
   au-dessous du livre (8 % de sa largeur) reçoit le plat quand il se dresse pendant l'ouverture, et laisse
   encore un blanc d'au moins 3,8 % de la largeur entre le plat et le titre ou la légende. */
.frontispice {
  grid-area: livre;
  width: clamp(220px, calc((100svh - 392px) * 1.2), 440px);
  max-width: 100%;
  margin: 0;
}
/* Sous 400 px de large, le livre cède 30 à 50 px de hauteur pour que le premier des trois faits (« Carte
   cadeau immédiate ») entre lui aussi dans le premier écran (390 x 700, 360 x 640). Ses marges et sa
   perspective ne changent pas : le plat dressé garde le même blanc avec le titre et la légende. */
@media (max-width: 399px) and (min-height: 601px) {
  .frontispice { width: clamp(220px, calc((100svh - 436px) * 1.2), 440px); }
}
/* La ligne de dédicace tient sur une ligne jusqu’à 360 px, même avec « de Noël » : un retour à la ligne
   coûterait au premier écran la hauteur que le livre vient de céder. */
@media (max-width: 379px) {
  .ouverture .pour { font-size: 1rem; }
}
.frontispice figcaption { margin-top: 2px; font-style: italic; font-size: .9rem; line-height: 1.3; color: var(--encre-2); }

/* ------------------------------------------------------------------ Le livre dessiné (vue de dessus) */
/* Proportions : page 17 x 24 cm, chasse de la couverture 3 mm, tout en cqw (largeur de la double page).
   Couverture rigide imprimée, mate : un vert profond et un titre à l'encre or, sans dorure ni toile. */
.livre { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 100 / 71.6; margin: 8% 0; forced-color-adjust: none; }
/* La perspective est posée sous le conteneur (sur .livre, 1cqw viserait la fenêtre). Assez lointaine et
   centrée pour que le plat dressé ne dépasse que de 4,2 % au-dessus et au-dessous du livre. */
.livre-corps { position: absolute; inset: 0; transform-style: preserve-3d; perspective: 480cqw; perspective-origin: 50% 50%; }
.moitie { position: absolute; top: 0; width: 50%; height: 100%; }
.moitie-droite { left: 50%; }
.moitie-gauche { left: 0; transform-origin: 100% 50%; transform-style: preserve-3d; transform: translateZ(1px) rotateY(0deg); }
.plat {
  position: absolute; inset: 0;
  background-color: var(--toile);
  background-image:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
.moitie-droite .plat { border-radius: 0 .6cqw .6cqw 0; box-shadow: 1.2cqw 1.6cqw 3cqw -1cqw rgba(var(--ombre), .45), .2cqw .2cqw .3cqw rgba(var(--ombre), .3); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face-verso .plat { border-radius: .6cqw 0 0 .6cqw; box-shadow: -1.2cqw 1.6cqw 3cqw -1cqw rgba(var(--ombre), .45), -.2cqw .2cqw .3cqw rgba(var(--ombre), .3); }
/* Les pages : un peu plus petites que les plats (la chasse), bloc de pages visible sur la tranche. */
.feuille { position: absolute; top: 1.4cqw; bottom: 1.4cqw; background: var(--page); color: var(--page-encre); overflow: hidden; }
.moitie-droite .feuille { left: 0; right: 1.4cqw; box-shadow: .25cqw 0 0 -.05cqw var(--tranche), .5cqw .05cqw 0 -.1cqw var(--tranche), .75cqw .1cqw 0 -.15cqw color-mix(in srgb, var(--tranche) 80%, #000); }
.face-verso .feuille { right: 0; left: 1.4cqw; box-shadow: -.25cqw 0 0 -.05cqw var(--tranche), -.5cqw .05cqw 0 -.1cqw var(--tranche), -.75cqw .1cqw 0 -.15cqw color-mix(in srgb, var(--tranche) 80%, #000); }
/* Le pli : ombre et reflet de la courbure de la page près du dos. */
.moitie-droite .feuille::before, .face-verso .feuille::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.moitie-droite .feuille::before { background: linear-gradient(90deg, rgba(40, 30, 10, .30), rgba(40, 30, 10, .10) 2.4%, rgba(255, 255, 255, .25) 6%, transparent 13%, transparent 92%, rgba(40, 30, 10, .05)); }
.face-verso .feuille::before { background: linear-gradient(270deg, rgba(40, 30, 10, .34), rgba(40, 30, 10, .12) 2.6%, rgba(255, 255, 255, .22) 6.5%, transparent 14%, transparent 92%, rgba(40, 30, 10, .05)); }
.feuille::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E"); }

/* Les deux pages du livre de Jeanne. Sur téléphone, la question est lisible (16 px et plus) et la page de
   droite ne garde qu'un paragraphe ; le second paragraphe vient quand le livre est grand. */
.p-contenu { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; padding: 3.6cqw 4cqw 2.6cqw 4.8cqw; font-family: var(--texte); }
.face-verso .p-contenu { padding: 3.6cqw 4.8cqw 2.6cqw 4cqw; text-align: center; }
.p-courant { font-size: 1.5cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--page-encre-2); text-align: center; }
.p-folio { margin-top: auto; font-size: 1.7cqw; color: var(--page-encre-2); text-align: center; }
.p-semaine { margin-top: 9cqw; font-style: italic; font-size: 2.3cqw; line-height: 1.3; color: var(--page-encre-2); }
.p-question { margin-top: 2.2cqw; font-family: var(--titre); font-style: italic; font-size: 5.3cqw; line-height: 1.06; color: var(--page-vert); text-wrap: balance; }
.p-fleuron { width: 8cqw; height: 3.2cqw; margin: 3cqw auto 0; color: var(--page-vert); }
.p-texte { margin-top: 2.4cqw; font-size: 2.62cqw; line-height: 1.36; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.p-texte .p-lettrine { float: left; font-family: var(--titre); font-size: 7.1cqw; line-height: .8; margin: .3cqw .6cqw 0 0; color: var(--page-vert); }
.p-photo { margin: 2.2cqw auto 0; width: 30cqw; }
.p-photo svg { display: block; width: 100%; height: auto; }
.p-legende { margin-top: .6cqw; font-style: italic; font-size: 1.9cqw; color: var(--page-encre-2); text-align: center; }
.p-texte-suite { display: none; margin-top: 2cqw; }
@container (min-width: 520px) {
  .p-courant { font-size: 1.15cqw; }
  .p-folio { font-size: 1.45cqw; }
  .p-semaine { margin-top: 10.5cqw; font-size: 1.9cqw; }
  .p-question { font-size: 4.6cqw; }
  .p-texte { margin-top: 3.2cqw; font-size: 1.86cqw; line-height: 1.42; }
  .p-texte .p-lettrine { font-size: 5.2cqw; }
  .p-photo { width: 26cqw; margin-top: 2.6cqw; }
  .p-legende { font-size: 1.4cqw; }
  .p-texte-suite { display: block; }
}

/* Le plat : couverture imprimée, mors, titre à l'encre or. */
.face-plat { transform: rotateY(180deg); }
.face-plat .plat { border-radius: 0 .6cqw .6cqw 0; box-shadow: 1.2cqw 1.6cqw 3cqw -1cqw rgba(var(--ombre), .5), .3cqw .3cqw 0 -.05cqw var(--toile-sombre); }
.face-plat .dos { position: absolute; top: 0; bottom: 0; left: 0; width: 3.6cqw; background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(255, 255, 255, .05) 70%, rgba(0, 0, 0, .1)); }
.face-plat .mors { position: absolute; top: 0; bottom: 0; left: 3.6cqw; width: .9cqw; background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .07) 60%, transparent); }
.titre-plat { position: absolute; left: 4.5cqw; right: 0; top: 18cqw; display: grid; justify-items: center; gap: 1.4cqw; color: var(--or); }
.titre-plat .t-prenom { font-family: var(--titre); font-style: italic; font-size: 8.4cqw; line-height: .9; }
.titre-plat .t-vie { font-family: var(--titre); font-style: italic; font-size: 4.2cqw; line-height: 1; margin-top: -.6cqw; }
.titre-plat .t-filet { width: 13cqw; height: 1.6cqw; }
.titre-plat .t-annee { font-family: var(--texte); font-size: 1.6cqw; letter-spacing: .24em; text-transform: uppercase; }
/* La lumière pendant l'ouverture : l'ombre du plat passe sur la page de droite, les faces s'assombrissent
   selon leur angle (même durée, même courbe que la rotation, environ 1 - cos(angle)). Ombre chaude. */
.moitie-droite .ombre-plat { position: absolute; inset: 1.4cqw 1.4cqw 1.4cqw 0; z-index: 5; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(48, 34, 16, .55), rgba(48, 34, 16, .2) 45%, transparent 80%); }
.face .assombrir { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(30, 20, 8, .92), rgba(22, 16, 8, 1)); }

/* États de départ, seulement quand le mouvement est permis (html.anim posée par anim.js). Des animations
   (et non des transitions) : les enregistrements d'aperçu peuvent les figer image par image. */
@media screen and (prefers-reduced-motion: no-preference) {
  html.anim .livre:not(.ouvert) .moitie-gauche { transform: translateZ(1px) rotateY(180deg); }
  html.anim .livre:not(.ouvert) .livre-corps { transform: translateX(-25%); }
  html.anim .livre.ouvert .livre-corps { animation: livre-glisse 1.35s var(--courbe-geste) .25s both; }
  html.anim .livre.ouvert .moitie-gauche { animation: livre-ouvre 1.35s var(--courbe-geste) .25s both; }
  html.anim .livre.ouvert .ombre-plat { animation: ombre-plat 1.35s var(--courbe-geste) .25s both; }
  html.anim .livre.ouvert .face-verso .assombrir { animation: assombrir-verso 1.35s var(--courbe-geste) .25s both; }
  html.anim .livre.ouvert .face-plat .assombrir { animation: assombrir-plat 1.35s var(--courbe-geste) .25s both; }
  html.anim .livre.sans-transition * { animation: none !important; }
}
@keyframes livre-glisse { from { transform: translateX(-25%); } to { transform: translateX(0); } }
@keyframes livre-ouvre { from { transform: translateZ(1px) rotateY(180deg); } to { transform: translateZ(1px) rotateY(0deg); } }
@keyframes ombre-plat { 0% { opacity: .9; } 50% { opacity: .5; } 80% { opacity: .14; } 100% { opacity: 0; } }
@keyframes assombrir-verso { 0%, 50% { opacity: .55; } 62% { opacity: .34; } 75% { opacity: .16; } 88% { opacity: .04; } 100% { opacity: 0; } }
@keyframes assombrir-plat { 0% { opacity: 0; } 25% { opacity: .12; } 40% { opacity: .28; } 50%, 100% { opacity: .4; } }

/* ------------------------------------------------------------------ Pour Noël : le bandeau d'un livre neuf */
/* Seulement en saison (bloc « si saisonNoel » du build). La toile verte et l'or de la couverture, deux
   doubles filets imprimés, et trois dates pour folios, avec les points de conduite du sommaire. */
.noel {
  position: relative; padding: 38px var(--marge) 40px;
  background-color: var(--toile);
  background-image:
    radial-gradient(120% 140% at 20% 0%, rgba(255, 255, 255, .05), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  color: #F1EBDD;
  forced-color-adjust: auto;
}
.noel::before, .noel::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-top: 1px solid var(--or); border-bottom: 1px solid color-mix(in srgb, var(--or) 55%, transparent); pointer-events: none; }
.noel::before { top: 12px; }
.noel::after { bottom: 12px; }
.noel-cadre { max-width: 31rem; margin: 0 auto; }
.noel h2 { font-family: var(--titre); font-style: italic; font-size: 2.3rem; line-height: 1; color: var(--or-clair); text-align: center; }
.noel-dates { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; }
.noel-dates li { display: flex; align-items: last baseline; gap: .45em; }
.noel-dates .quoi { flex: 0 1 auto; }
.noel-dates .points { background-image: radial-gradient(circle, var(--or) .7px, transparent 1.1px); opacity: .9; }
.noel-dates .quand { flex: none; font-style: italic; color: var(--or-clair); white-space: nowrap; }
.noel-note { margin-top: 16px; font-size: 1rem; line-height: 1.45; color: #D9D2C0; text-align: center; text-wrap: balance; }

/* ------------------------------------------------------------------ Chapitres */
.chapitre { position: relative; padding: 60px var(--marge) 52px; }
.chapitre + .chapitre { border-top: 1px solid color-mix(in srgb, var(--filet) 55%, transparent); }
.tete { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 16px; margin-bottom: 24px; }
.numero { font-family: var(--titre); font-size: 3.4rem; line-height: .8; color: var(--rubrique); }
.chapitre h2 { font-size: 2.1rem; }
.texte { max-width: 34em; }
.texte > p + p { text-indent: 1.3em; }
.lettrine { display: flow-root; min-height: 3lh; } /* la lettrine de trois lignes ne déborde jamais sur la suite */
.lettrine::first-letter { font-family: var(--titre); font-style: normal; color: var(--rubrique); }
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .lettrine::first-letter { -webkit-initial-letter: 3; initial-letter: 3; margin-right: .1em; }
}
@supports not ((initial-letter: 3) or (-webkit-initial-letter: 3)) {
  .lettrine::first-letter { float: left; font-size: 4.25em; line-height: .78; margin: .07em .08em 0 0; }
}
/* Initiale de deux lignes des pages du livre (un élément, pour que les mots puissent apparaître un à un). */
/* La lettrine de l’extrait reste un <span> (« C’était » : ::first-letter agrandirait aussi l’apostrophe, et
   la démonstration anime la lettrine) ; le mot entier est lu une fois dans un .cache, les morceaux visibles
   sont aria-hidden (index.html). */
.initiale { float: left; font-family: var(--titre); font-style: normal; font-size: 3.05em; line-height: .8; margin: .06em .06em 0 0; color: var(--page-vert); }
.note { margin: 22px 0 0; padding-left: 14px; border-left: 1px solid var(--filet); font-style: italic; font-size: 1.02rem; line-height: 1.42; color: var(--encre-2); max-width: 30em; }
.note b { font-style: normal; font-weight: 600; color: var(--encre); }
.perso { font-style: normal; color: var(--rubrique); font-weight: 600; }
/* Groupe de sens d'un titre-phrase (les trois phrases de la maison) : la ligne se coupe avant ou après lui,
   et dedans seulement s'il ne tient pas dans la largeur (un bloc en ligne ne déborde jamais). */
.sens { display: inline-block; }
/* Points de conduite, comme dans une table des matières. */
.points { flex: 1 1 1.2em; min-width: 1.2em; height: 1px; transform: translateY(-.3em); background-image: radial-gradient(circle, var(--encre-2) .7px, transparent 1.1px); background-size: 6px 2px; background-repeat: repeat-x; background-position: left center; opacity: .85; }

/* I. L'année */
.cinquante-deux { margin-top: 30px; display: flex; align-items: baseline; gap: .25em; line-height: .9; }
.cinquante-deux .chiffre { font-family: var(--titre); font-size: 5.6rem; letter-spacing: -.02em; color: var(--rubrique); }
.cinquante-deux .unite { font-family: var(--titre); font-style: italic; font-size: 2.3rem; }
.periode { margin-top: 10px; max-width: 30em; font-style: italic; color: var(--encre-2); font-size: 1.04rem; }
.calendrier { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 26px; max-width: 34em; }
.calendrier li { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--filet) 70%, transparent); }
.calendrier .quand { font-family: var(--titre); font-style: italic; font-size: 1.5rem; line-height: 1.12; color: var(--rubrique); }
.calendrier h3 { font-size: 1.19rem; }

/* II. La voix devient une page */
.sequence { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 30px; max-width: 30rem; }
.sequence > li { display: grid; gap: 10px; align-content: start; }
.seq-legende { font-style: italic; font-size: 1rem; color: var(--encre-2); }
.feuillet { padding: 16px 18px 18px; background: var(--papier-2); border: 1px solid var(--filet); box-shadow: 0 10px 22px -18px rgba(var(--ombre), .5); }
.f-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--filet); font-size: .94rem; color: var(--encre-2); }
.f-de { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; line-height: 1.9; color: var(--encre); }
.f-semaine { margin-top: 12px; font-style: italic; font-size: .96rem; color: var(--encre-2); }
.f-question { margin-top: 4px; font-family: var(--titre); font-style: italic; font-size: 1.7rem; line-height: 1.08; color: var(--rubrique); }
.f-actions { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 1rem; }
.f-parler { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 7px; border-radius: 2px; background: var(--toile-bouton); color: var(--or-clair); font-weight: 600; box-shadow: 0 0 0 1px var(--bord-bouton); }
.f-parler::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #E58A76; }
.f-ecrire { font-style: italic; color: var(--encre-2); }
.vocal { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; max-width: 24rem; border: 1px solid var(--filet-champ); border-radius: 28px; background: var(--papier-2); font-size: .95rem; }
.vocal .rond { width: 34px; height: 34px; border-radius: 50%; background: var(--rubrique); position: relative; }
.vocal .rond::after { content: ""; position: absolute; left: 13px; top: 11px; border-left: 10px solid var(--papier-2); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.vocal .onde { position: relative; display: block; height: 26px; color: var(--encre-2); }
.vocal .onde svg { display: block; width: 100%; height: 100%; }
.vocal .tete-lecture { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; background: var(--rubrique); opacity: 0; }
.vocal .duree { font-variant-numeric: tabular-nums; color: var(--encre-2); }
.btn-transcrire { justify-self: start; min-height: 44px; padding-inline: 1.1em; font-size: 1rem; }
.extrait { position: relative; margin: 0; padding: 22px 22px 18px; background: var(--page); color: var(--page-encre); box-shadow: 0 1px 1px rgba(var(--ombre), .12), 0 14px 26px -18px rgba(var(--ombre), .55); }
.extrait-photo { width: 72%; margin: 0 auto 14px; forced-color-adjust: none; }
.extrait-photo svg { display: block; width: 100%; height: auto; }
.extrait-texte { font-size: 1.1rem; line-height: 1.46; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.extrait figcaption { margin-top: 10px; font-size: .95rem; font-style: italic; color: var(--page-encre-2); text-align: right; }
.extrait figcaption i { font-style: normal; }
/* La démonstration (déclenchée par le bouton, jamais toute seule) : la tête de lecture parcourt le message,
   les mots arrivent sur la page dans l'ordre. Sous html.anim seulement. */
@media screen and (prefers-reduced-motion: no-preference) {
  html.anim .vocal.lecture .tete-lecture { animation: tete-lecture var(--duree-demo, 3.6s) linear both; }
  html.anim .extrait.transcription .mot { animation: mot-arrive .32s var(--entree) both; animation-delay: calc(var(--i) * var(--pas-demo, 70ms) + 250ms); }
  html.anim .extrait.transcription .initiale { animation: mot-arrive .32s var(--entree) .2s both; }
}
@keyframes tete-lecture { 0% { left: 0; opacity: 1; } 96% { opacity: 1; } 100% { left: calc(100% - 2px); opacity: 0; } }
@keyframes mot-arrive { from { opacity: 0; } to { opacity: 1; } }

/* L'essai : un souvenir du visiteur, composé en page (essai.js). Sans JavaScript, rien à essayer : caché. */
html:not(.js) .essai { display: none; }
.essai { margin-top: 48px; display: grid; grid-template-areas: "titre" "intro" "page" "champ" "suite"; gap: 14px; max-width: 34rem; }
/* Le titre, une phrase de la maison, se coupe au fil du sens : « Il suffit d’une question » / « pour qu’une
   histoire commence. » La taille suit la largeur sur téléphone pour que la seconde moitié tienne sur sa ligne
   dès 320 px. */
.essai-titre { grid-area: titre; font-family: var(--titre); font-style: italic; font-size: clamp(1.3rem, 6.6vw, 1.75rem); font-weight: 400; line-height: 1.12; text-wrap: balance; }
.essai-intro { grid-area: intro; font-size: 1.02rem; color: var(--encre-2); max-width: 32em; text-wrap: pretty; }
.essai-champ { grid-area: champ; }
.essai-champ textarea { min-height: 7.2rem; }
.essai-suite { grid-area: suite; font-style: italic; font-size: 1.04rem; }
/* La page : 17 x 24, comme celles du livre ; tailles en cqw de la page. Elle grandit si le texte déborde
   (texte agrandi), au lieu de le couper. */
.essai-page {
  grid-area: page; justify-self: center; position: relative; isolation: isolate;
  container-type: inline-size; width: min(100%, 250px); aspect-ratio: 17 / 24;
  display: flex; flex-direction: column;
  background: var(--page); color: var(--page-encre);
  box-shadow: inset 12px 0 16px -14px rgba(40, 30, 10, .45), 0 1px 1px rgba(var(--ombre), .14), 0 18px 30px -20px rgba(var(--ombre), .6);
  font-family: var(--texte); forced-color-adjust: none;
}
.essai-page::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E"); }
/* Les unités cqw d'un conteneur visent son ancêtre : la marge de la page est posée sur son contenu. */
.ep-contenu { flex: 1 0 auto; display: flex; flex-direction: column; padding: 9cqw 9cqw 6cqw; }
.ep-courant { font-size: 3.1cqw; letter-spacing: .18em; text-transform: uppercase; color: var(--page-encre-2); text-align: center; }
.ep-question { margin-top: 9cqw; font-family: var(--titre); font-style: italic; font-size: 7.4cqw; line-height: 1.08; color: var(--page-vert); text-align: center; text-wrap: balance; }
.ep-fleuron { display: block; width: 12cqw; height: 4.8cqw; margin: 4cqw auto 0; color: var(--page-vert); }
/* Une trentaine de signes par ligne : au fer à gauche, comme les pages du livre sur téléphone (pas de grands blancs). */
.ep-texte { margin-top: 6cqw; font-size: 5.1cqw; line-height: 1.4; text-align: left; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.ep-texte p + p { text-indent: 1.2em; }
.ep-texte .ep-lettrine { float: left; font-family: var(--titre); font-style: normal; font-size: 2.95em; line-height: .8; margin: .05em .07em 0 0; color: var(--page-vert); }
.ep-texte .ep-vide { font-style: italic; color: var(--page-encre-2); text-align: center; text-wrap: balance; }
.ep-folio { margin-top: auto; padding-top: 4cqw; font-size: 3.6cqw; color: var(--page-encre-2); text-align: center; }

/* III. Le sommaire du livre de Jeanne */
.sommaire-tete { margin-top: 36px; }
.sommaire-tete h3 { font-family: var(--titre); font-style: italic; font-size: 1.75rem; font-weight: 400; line-height: 1.1; }
.sommaire-tete p { margin-top: 8px; font-size: 1.02rem; color: var(--encre-2); max-width: 32em; }
.sommaire { list-style: none; margin: 18px 0 0; padding: 0; max-width: 40rem; font-size: 1.06rem; line-height: 1.35; }
.sommaire li { position: relative; display: flex; align-items: last baseline; gap: .45em; padding: 7px 0 7px 2.1em; }
.sommaire .sem { position: absolute; left: 0; top: 7px; font-family: var(--titre); line-height: inherit; color: var(--encre-2); }
.sommaire .q { flex: 0 1 auto; text-wrap: pretty; }
.sommaire .date { flex: none; font-style: italic; color: var(--encre-2); white-space: nowrap; }
.sommaire-complet { margin-top: 16px; max-width: 40rem; }
.sommaire-complet summary { cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-style: italic; font-size: 1.1rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; list-style: none; }
.sommaire-complet summary::-webkit-details-marker { display: none; }
.sommaire-complet summary::before { content: "+"; font-style: normal; font-family: var(--titre); font-size: 1.4rem; line-height: 1; color: var(--rubrique); width: .8em; }
.sommaire-complet[open] summary::before { content: "\2212"; }
.sommaire-complet .sommaire { margin-top: 6px; }
.sommaire-action { margin-top: 22px; }
.sommaire-action .btn { min-height: 48px; font-size: 1.06rem; }

/* IV. Feuilleter le livre de Jeanne ------------------------------------------------------------------ */
/* Géométrie en cqw du conteneur .livre-ouvert (la largeur de la double page) : couverture de 100 x 71,6,
   chasse de 1,4, pages de 48,6 x 68,8 (17 x 24). Sur téléphone, le livre déborde des marges du texte
   (8 px du bord de l'écran) pour que ses pages restent lisibles. Sans JavaScript, et à l'impression, les
   sept doubles pages se suivent. */
.feuilletage { margin-top: 44px; }
/* Le titre, une phrase de la maison, au fil du sens : « Ses mots, dans un livre » / « que vous garderez » /
   « toute votre vie. » (deux lignes dès que la seconde moitié tient, jamais plus d'une ligne entière). */
.feuilletage h3 { max-width: 20em; font-family: var(--titre); font-style: italic; font-size: 1.75rem; font-weight: 400; line-height: 1.12; text-wrap: balance; }
.feuilletage-aide { margin-top: 10px; font-size: 1.02rem; color: var(--encre-2); max-width: 32em; text-wrap: pretty; }
html:not(.js) .aide-geste { display: none; }
.livre-ouvert { container-type: inline-size; margin-top: 18px; max-width: 900px; }
.planches { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.double { position: relative; aspect-ratio: 100 / 71.6; }
.double::before, .plateau::before {
  content: ""; position: absolute; inset: 0; border-radius: .6cqw;
  background-color: var(--toile);
  background-image: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .06), transparent 60%);
  box-shadow: 0 1.6cqw 3cqw -1cqw rgba(var(--ombre), .45), 0 .2cqw .3cqw rgba(var(--ombre), .3);
  forced-color-adjust: none;
}
.legende-planche, .legende-courante { margin-top: 10px; font-style: italic; font-size: .98rem; line-height: 1.35; color: var(--encre-2); text-align: center; text-wrap: balance; }

/* Une page du livre. isolation : les ombres et le grain restent sous le texte, même sur la feuille qui tourne. */
.feuilletage .page {
  position: absolute; top: 1.4cqw; width: 48.6cqw; height: 68.8cqw; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; padding: 12px 11px 8px;
  background: var(--page); color: var(--page-encre); font-family: var(--texte);
  forced-color-adjust: none;
}
.feuilletage .page.gauche { left: 1.4cqw; box-shadow: -.25cqw 0 0 -.05cqw var(--tranche), -.5cqw .05cqw 0 -.1cqw var(--tranche), -.75cqw .1cqw 0 -.15cqw color-mix(in srgb, var(--tranche) 80%, #000); }
.feuilletage .page.droite { left: 50cqw; box-shadow: .25cqw 0 0 -.05cqw var(--tranche), .5cqw .05cqw 0 -.1cqw var(--tranche), .75cqw .1cqw 0 -.15cqw color-mix(in srgb, var(--tranche) 80%, #000); }
/* Le pli près du dos, et le grain du papier. */
.feuilletage .page::before, .feuilletage .page::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.feuilletage .page.droite::before { background: linear-gradient(90deg, rgba(40, 30, 10, .30), rgba(40, 30, 10, .10) 2.4%, rgba(255, 255, 255, .25) 6%, transparent 13%, transparent 92%, rgba(40, 30, 10, .05)); }
.feuilletage .page.gauche::before { background: linear-gradient(270deg, rgba(40, 30, 10, .34), rgba(40, 30, 10, .12) 2.6%, rgba(255, 255, 255, .22) 6.5%, transparent 14%, transparent 92%, rgba(40, 30, 10, .05)); }
.feuilletage .page::after { opacity: .6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E"); }
/* Papier de garde imprimé : le fleuron du site, en vert sur vert. */
.feuilletage .page.garde {
  background-color: #1C362C;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='40' viewBox='0 0 46 40'%3E%3Cg fill='%232C4C3F'%3E%3Cpath transform='translate(4 3) scale(.42)' d='M15.2 9c0-4.1 3.9-6.6 7.6-4.4 2.6-2.9 8.3-2.4 11.1 1.4 2.2 2.9 5.6 2.9 10.6 3-5 .1-8.4.1-10.6 3-2.8 3.8-8.5 4.3-11.1 1.4-3.7 2.2-7.6-.3-7.6-4.4z'/%3E%3Cpath transform='translate(27 23) scale(.42)' d='M15.2 9c0-4.1 3.9-6.6 7.6-4.4 2.6-2.9 8.3-2.4 11.1 1.4 2.2 2.9 5.6 2.9 10.6 3-5 .1-8.4.1-10.6 3-2.8 3.8-8.5 4.3-11.1 1.4-3.7 2.2-7.6-.3-7.6-4.4z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: max(30px, 4.4cqw) auto;
}
.feuilletage .page.garde::after { opacity: .5; }
.feuilletage .page.gauche.garde::before { background: linear-gradient(270deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .12) 4%, transparent 14%); }
.feuilletage .page.droite.garde::before { background: linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .12) 4%, transparent 14%); }

/* Le texte des pages. Sur téléphone (livre de moins de 560 px), des tailles fixes et lisibles : questions
   de 16,5 px, réponses de 12,5 px ; au-delà, des tailles proportionnelles à la double page. */
.pg-courant { font-size: 8.5px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--page-encre-2); text-align: center; white-space: nowrap; }
.pg-folio, .ps-folio { font-size: 10px; color: var(--page-encre-2); }
.pg-folio { margin-top: auto; padding-top: 4px; text-align: center; }
.pg-semaine { margin-top: 16%; font-style: italic; font-size: 11px; line-height: 1.3; color: var(--page-encre-2); text-align: center; }
.pg-semaine span { display: block; }
.pg-question { margin-top: 8px; font-family: var(--titre); font-style: italic; font-size: clamp(16px, 4.45cqw, 16.5px); line-height: 1.08; color: var(--page-vert); text-align: center; text-wrap: balance; }
.pg-fleuron, .pa-fleuron { display: block; flex: none; width: 28px; height: 11px; margin: 10px auto 0; color: var(--page-vert); }
.pg-texte { margin-top: 9px; font-size: clamp(12px, 3.35cqw, 12.5px); line-height: 1.34; text-align: left; hyphens: auto; -webkit-hyphens: auto; }
/* Lettrine composée par ::first-letter : le premier mot reste un seul mot pour un lecteur d’écran (une
   lettrine en <span> flottant le coupait en « O h »). Aucune de ces réponses ne commence par une lettre
   suivie d’une ponctuation, que ::first-letter agrandirait avec elle. */
.pg-lettrine::first-letter { float: left; font-family: var(--titre); font-style: normal; font-size: 2.85em; line-height: .8; margin: .06em .07em 0 0; color: var(--page-vert); }
.pg-photo { margin: 8px auto 0; width: min(82%, 30cqw); }
.pg-photo svg { display: block; width: 100%; height: auto; }
.pg-legende { margin-top: 2px; font-style: italic; font-size: 10px; line-height: 1.25; color: var(--page-encre-2); text-align: center; }
.page-photo .pg-texte { margin-top: 7px; }
/* Page de titre */
.page-titre { align-items: center; text-align: center; color: var(--page-vert); }
.pt-prenom { margin-top: 24%; font-family: var(--titre); font-style: italic; font-size: 27px; line-height: 1; }
.pt-vie { font-family: var(--titre); font-style: italic; font-size: 15px; line-height: 1.2; }
.pt-fleuron { width: 30px; height: 12px; margin-top: 10px; }
.pt-annee { margin-top: 10px; font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--page-encre-2); }
.pt-maison { margin-top: auto; font-family: var(--titre); font-style: italic; font-size: 11px; color: var(--page-encre-2); }
/* Verso de la page de titre : les droits, en pied de page (CGV 12). */
.page-droits { justify-content: flex-end; }
.pd-texte { margin-bottom: 8%; font-size: 9.5px; line-height: 1.4; font-style: italic; color: var(--page-encre-2); text-align: center; text-wrap: balance; }
/* Sommaire */
.ps-titre { margin-top: 6%; font-family: var(--titre); font-style: italic; font-size: 15px; line-height: 1.1; color: var(--page-vert); text-align: center; }
.ps-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 10px; line-height: 1.3; }
.ps-liste li { display: flex; align-items: last baseline; gap: 3px; }
.ps-sem { flex: none; width: 1.3em; font-family: var(--titre); color: var(--page-encre-2); align-self: first baseline; }
.ps-q { flex: 0 1 auto; text-wrap: pretty; }
.ps-points { flex: 1 1 .8em; min-width: .8em; height: 1px; transform: translateY(-.25em); background-image: radial-gradient(circle, var(--page-encre-2) .6px, transparent .9px); background-size: 4px 2px; background-repeat: repeat-x; }
.ps-folio { flex: none; font-style: italic; }
.ps-liste .ps-suite { display: none; }
/* Achevé d'imprimer */
.page-acheve { justify-content: center; text-align: center; }
.pa-fleuron { margin: 0 auto 10px; }
.pa-titre { font-family: var(--titre); font-style: italic; font-size: 14px; line-height: 1.1; color: var(--page-vert); }
.pa-texte { margin-top: 4px; font-size: 11px; line-height: 1.35; }
.pa-fabrication { margin-top: 10px; font-size: 9.5px; line-height: 1.4; font-style: italic; color: var(--page-encre-2); text-wrap: balance; }

@container (min-width: 560px) {
  .feuilletage .page { padding: 4.2cqw 4.4cqw 2.4cqw; }
  .pg-courant { font-size: 1.12cqw; letter-spacing: .2em; }
  .pg-folio, .ps-folio { font-size: 1.4cqw; }
  .pg-semaine { font-size: 1.85cqw; }
  .pg-question { margin-top: 1.5cqw; font-size: 3.9cqw; }
  .pg-fleuron, .pa-fleuron { width: 6.6cqw; height: 2.6cqw; margin-top: 2.6cqw; }
  .pg-texte { margin-top: 2.6cqw; font-size: 1.9cqw; line-height: 1.42; text-align: justify; }
  .pg-photo { margin-top: 2.4cqw; width: 84%; }
  .pg-legende { margin-top: .5cqw; font-size: 1.4cqw; }
  .page-photo .pg-texte { margin-top: 1.8cqw; }
  .pt-prenom { font-size: 6cqw; }
  .pt-vie { font-size: 3.1cqw; }
  .pt-fleuron { width: 7cqw; height: 2.8cqw; margin-top: 2cqw; }
  .pt-annee { margin-top: 2.2cqw; font-size: 1.15cqw; }
  .pt-maison { font-size: 1.7cqw; }
  .pd-texte { font-size: 1.4cqw; }
  .ps-titre { font-size: 3cqw; }
  .ps-liste { margin-top: 2.2cqw; gap: 1cqw; font-size: 1.5cqw; }
  .ps-liste li { gap: .5cqw; }
  .ps-points { background-size: 5px 2px; }
  .ps-liste .ps-suite { display: flex; }
  .pa-fleuron { margin: 0 auto 2.2cqw; }
  .pa-titre { font-size: 2.6cqw; }
  .pa-texte { margin-top: .8cqw; font-size: 1.8cqw; }
  .pa-fabrication { margin-top: 2cqw; font-size: 1.4cqw; }
}

/* Les commandes, montrées par feuilletage.js. */
.feuilleter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "compteur compteur" "prec suiv"; align-items: center; gap: 4px 10px; margin-top: 6px; }
.feuilleter .btn { min-height: 48px; padding-inline: .6em; font-size: 1.02rem; }
#page-precedente { grid-area: prec; }
#page-suivante { grid-area: suiv; }
.feuilleter .compteur { grid-area: compteur; text-align: center; }
@media (min-width: 560px) {
  .feuilleter { grid-template-columns: 1fr auto 1fr; grid-template-areas: "prec compteur suiv"; gap: 10px; margin-top: 12px; }
  .feuilleter .btn { padding-inline: 1.1em; }
  #page-precedente { justify-self: start; }
  #page-suivante { justify-self: end; }
}
.feuilleter .btn[aria-disabled="true"] { color: color-mix(in srgb, var(--encre-2) 75%, var(--papier)); cursor: default; box-shadow: inset 0 0 0 1px var(--filet); }
.compteur { font-style: italic; font-size: .98rem; color: var(--encre-2); white-space: nowrap; font-variant-numeric: lining-nums; }

/* Sur le plateau (feuilletage.js pose .actif) : les planches empilées, une seule visible au repos ; pendant
   qu'une feuille tourne, la page gauche de la double page de départ et la page droite de celle d'arrivée.
   La réserve au-dessus et au-dessous reçoit la feuille dressée (perspective de 300 cqw). */
@media screen {
  .feuilletage.actif .planches { display: block; }
  .feuilletage.actif .plateau { position: relative; aspect-ratio: 100 / 71.6; margin: 6cqw 0; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .feuilletage.actif .plateau.glisse { cursor: grabbing; }
  .feuilletage.actif .planches { position: absolute; inset: 0; z-index: 1; }
  .feuilletage.actif .planche { position: absolute; inset: 0; visibility: hidden; }
  .feuilletage.actif .double { position: absolute; inset: 0; aspect-ratio: auto; }
  .feuilletage.actif .double::before, .feuilletage.actif .legende-planche { display: none; }
  .feuilletage.actif .planche.courante,
  .feuilletage.actif .planche.voit-g .page.gauche,
  .feuilletage.actif .planche.voit-d .page.droite { visibility: visible; }
  .feuilletage.actif .page svg { pointer-events: none; }
  .feuilletage .legende-courante { margin-top: 0; }
}
.feuilletage:not(.actif) .plateau::before { display: none; }
/* La prise : un coin corné, fixe, en bas de la page de droite. Il montre qu’on peut tourner la page (au
   doigt comme à la souris) sans aucun mouvement. Seulement sur la double page au repos qui a une suite, et à
   l’écran : pendant le tour il s’efface (la feuille se soulève), et sans JavaScript ou à l’impression les
   doubles pages se lisent à la suite. Le rabat (moitié haute) est le verso du papier, la moitié basse la
   page de dessous ; forced-color-adjust: none, comme les pages, pour rester visible en contraste élevé. */
@media screen {
  .feuilletage.actif .planche.courante:not(:last-child) .double::after {
    --coin: clamp(18px, 6.4cqw, 40px);
    content: ""; position: absolute; z-index: 1; pointer-events: none; forced-color-adjust: none;
    left: calc(98.6cqw - var(--coin)); top: calc(70.2cqw - var(--coin)); width: var(--coin); height: var(--coin);
    border-top-left-radius: 3px;
    background:
      linear-gradient(315deg, transparent 36%, rgb(40 30 10 / .2) 50%, transparent 50%),
      linear-gradient(315deg, color-mix(in srgb, var(--tranche) 62%, var(--page)) 50%, color-mix(in srgb, var(--page) 72%, #fff) 50%, color-mix(in srgb, var(--page) 78%, var(--tranche)));
    filter: drop-shadow(-1px -1px 1.2px rgb(40 30 10 / .3));
  }
}

/* La feuille qui tourne : six bandes imbriquées, chacune avec son recto et son verso (des copies de la page),
   qui donnent sa courbure à la feuille. --t va de 0 (à plat à droite) à 1 (à plat à gauche) en 650 ms ;
   une transition repart toujours de la valeur en cours, d'où l'inversion à mi-course. La courbure suit
   sin(2πt) : le bord libre mène pendant la levée, puis traîne quand la feuille retombe ; aucune bande ne
   passe sous le plan des pages. L'ombrage de chaque bande est un dégradé entre les angles de ses deux bords. */
@property --t { syntax: "<number>"; inherits: true; initial-value: 0; }
.vol {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  perspective: 300cqw; perspective-origin: 50% 50%;
  --theta: calc(var(--t) * -180deg);
  --beta: calc(sin(var(--t) * 360deg) * -6deg);
  transition: --t var(--duree-page, 650ms) cubic-bezier(.45, .05, .35, 1);
}
.vol .bande { position: absolute; transform-origin: 0 50%; transform-style: preserve-3d; }
.vol > .bande { left: 50%; top: 1.4cqw; width: 8.1cqw; height: 68.8cqw; transform: translateZ(1px) rotateY(var(--theta)); }
.vol .bande .bande { left: 100%; top: 0; width: 100%; height: 100%; transform: rotateY(var(--beta)); }
/* Chaque face déborde de 1,5 px sur la bande suivante, qui porte le même morceau de page : sans ce
   recouvrement, le bord lissé de chaque bande laisse voir le fond en filets verticaux. */
.vol .face { position: absolute; top: 0; left: 0; width: calc(100% + 1.5px); height: 100%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.vol .face.verso { transform-origin: 4.05cqw 50%; transform: rotateY(180deg); }
.vol .face > .page.page { top: 0; box-shadow: none; visibility: visible; }
.vol .face.recto > .page.page { left: calc(var(--k) * -8.1cqw); }
.vol .face.verso > .page.page { left: calc((var(--k) - 5) * 8.1cqw); }
.vol .face::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.vol .recto::after {
  background: linear-gradient(90deg,
    rgb(30 22 8 / calc(.36 * (1 - cos(var(--theta) + (var(--k) - .5) * var(--beta))))),
    rgb(30 22 8 / calc(.36 * (1 - cos(var(--theta) + (var(--k) + .5) * var(--beta))))));
}
.vol .verso::after {
  background: linear-gradient(90deg,
    rgb(30 22 8 / calc(.36 * (1 + cos(var(--theta) + (var(--k) + .5) * var(--beta))))),
    rgb(30 22 8 / calc(.36 * (1 + cos(var(--theta) + (var(--k) - .5) * var(--beta))))));
}
/* Ombres portées par la feuille sur les pages fixes, au droit de son bord libre (projection : la somme des
   cosinus des six bandes). À droite pendant la levée, à gauche pendant la retombée. */
.vol .ombre { position: absolute; top: 1.4cqw; height: 68.8cqw; width: 48.6cqw; overflow: hidden; pointer-events: none;
  --bord: calc((cos(var(--theta)) + cos(var(--theta) + var(--beta)) + cos(var(--theta) + 2 * var(--beta)) + cos(var(--theta) + 3 * var(--beta)) + cos(var(--theta) + 4 * var(--beta)) + cos(var(--theta) + 5 * var(--beta))) / 6); }
.vol .ombre::before { content: ""; position: absolute; top: 0; bottom: 0; width: 70%; }
.vol .ombre-d { left: 50%; }
.vol .ombre-d::before { left: 0; background: linear-gradient(90deg, rgb(30 22 8 / .5), rgb(30 22 8 / .18) 35%, rgb(30 22 8 / 0)); transform-origin: 0 50%; transform: translateX(calc(var(--bord) * 48.6cqw)) scaleX(calc(.15 + .85 * max(0, sin(-1 * var(--theta))))); opacity: max(0, sin(-2 * var(--theta))); }
.vol .ombre-g { left: 1.4cqw; }
.vol .ombre-g::before { right: 0; background: linear-gradient(270deg, rgb(30 22 8 / .5), rgb(30 22 8 / .18) 35%, rgb(30 22 8 / 0)); transform-origin: 100% 50%; transform: translateX(calc(var(--bord) * 48.6cqw)) scaleX(calc(.15 + .85 * max(0, sin(-1 * var(--theta))))); opacity: max(0, sin(2 * var(--theta))); }

/* IV. Le livre : la fiche et les exemplaires */
.fiche-titre { margin-top: 44px; font-family: var(--titre); font-style: italic; font-size: 1.75rem; font-weight: 400; line-height: 1.1; }
.fiche { margin: 16px 0 0; max-width: 34rem; }
.fiche > div { display: grid; grid-template-columns: minmax(0, 7.4em) minmax(0, 1fr); gap: 14px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--filet) 70%, transparent); }
.fiche > div:last-child { border-bottom: 1px solid color-mix(in srgb, var(--filet) 70%, transparent); }
.fiche dt { font-style: italic; color: var(--encre-2); }
.fiche dd { margin: 0; }
.exemplaires { margin-top: 40px; max-width: 30rem; }
.exemplaires h3 { font-family: var(--titre); font-style: italic; font-size: 1.75rem; font-weight: 400; line-height: 1.1; }
.pile { margin: 18px 0 0; }
.pile ol { list-style: none; margin: 0; padding: 0; display: grid; }
.pile li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
/* Dos d'un livre couché : titre imprimé, qui se lit de bas en haut comme sur un livre français. */
.dos-livre {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 34px; padding: 0 12px;
  background-color: var(--toile);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 30%, transparent 70%, rgba(0, 0, 0, .26));
  border-radius: 3px / 10px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 6px 10px -8px rgba(var(--ombre), .6);
  forced-color-adjust: none;
}
.pile li:nth-child(1) .dos-livre { margin-left: 10px; margin-right: -4px; }
.pile li:nth-child(2) .dos-livre { margin-left: 0; margin-right: 6px; }
.pile li:nth-child(3) .dos-livre { margin-left: 16px; margin-right: -10px; }
.pile li:nth-child(4) .dos-livre { margin-left: 4px; margin-right: 2px; }
.dos-livre .filets { height: 60%; width: 4px; border-left: 1px solid color-mix(in srgb, var(--or) 80%, transparent); border-right: 1px solid color-mix(in srgb, var(--or) 80%, transparent); justify-self: start; margin-left: 8px; }
.dos-livre .filets:last-child { justify-self: end; margin: 0 8px 0 0; }
.dos-livre .titre-dos { font-family: var(--titre); font-style: italic; font-size: 1.12rem; line-height: 1; padding-top: 2px; color: var(--or); white-space: nowrap; }
.pile .pour-qui { font-style: italic; font-size: 1rem; color: var(--encre-2); white-space: nowrap; min-width: 6.6em; }
.pile .pour-qui b { font-style: normal; font-weight: 600; color: var(--encre); }
.pile figcaption { margin-top: 16px; font-size: 1.02rem; }
.pile figcaption b { font-family: var(--titre); font-weight: 400; font-size: 1.3em; color: var(--rubrique); }

/* V. Offrir */
.ligne-prix { display: flex; align-items: last baseline; gap: .5em; margin-top: 26px; max-width: 34rem; }
.ligne-prix .quoi { font-family: var(--titre); font-style: italic; font-size: 1.6rem; line-height: 1.1; }
.ligne-prix .points { transform: translateY(-.4em); }
.ligne-prix .combien { font-family: var(--titre); font-size: 2.7rem; line-height: 1; }
.compris { list-style: none; margin: 14px 0 0; padding: 0; max-width: 34rem; display: grid; gap: 4px; }
.compris li { display: flex; align-items: last baseline; gap: .45em; }
.compris .quoi { flex: 0 1 auto; }
.compris .valeur { flex: none; font-style: italic; color: var(--encre-2); }
.offrir-action { display: grid; gap: 10px; margin-top: 26px; max-width: 34rem; }
.btn-large { min-height: 56px; font-size: 1.2rem; }
.offrir-action .btn { width: 100%; }
.offrir-action .lancement { color: var(--encre-2); font-size: 1.02rem; }
.faits-offre { margin-top: 18px; max-width: 34rem; }
.faits-offre li { font-size: 1.02rem; }
.paiement { margin-top: 16px; max-width: 34rem; font-size: 1rem; color: var(--encre-2); }
/* Le livre ouvert à sa page de titre, la carte cadeau glissée dedans (dans sa pochette, qui porte la pose de
   biais : l'enveloppe et la carte tournent ensemble). */
.carte-glissee { position: relative; margin: 40px 0 0; max-width: 21rem; padding: 0 0 0 0; }
.page-titre-livre {
  position: relative; width: 72%; aspect-ratio: 17 / 24; margin-left: 4%;
  display: grid; align-content: start; justify-items: center; padding-top: 16%;
  background: var(--page); color: var(--page-vert);
  box-shadow: inset 10px 0 14px -12px rgba(40, 30, 10, .45), 0 1px 1px rgba(var(--ombre), .14), 0 16px 26px -18px rgba(var(--ombre), .55);
  forced-color-adjust: none;
}
.ptl-prenom { font-family: var(--titre); font-style: italic; font-size: 2rem; line-height: 1; }
.ptl-vie { font-family: var(--titre); font-style: italic; font-size: 1.1rem; line-height: 1.2; }
.ptl-fleuron { width: 38px; height: 15px; margin-top: 10px; }
.ptl-pied { margin-top: 10px; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--page-encre-2); }
.carte-pochette { position: relative; isolation: isolate; width: 82%; margin: -38% 0 0 18%; transform: rotate(-3deg); }
.carte-recto {
  position: relative; z-index: 1; width: 100%;
  aspect-ratio: 2480 / 1748; container-type: inline-size;
  display: grid; align-content: center; justify-items: center; text-align: center;
  background-color: #1E3A31; color: #F1EBDD;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 16px 26px -14px rgba(var(--ombre), .65);
  forced-color-adjust: none;
}
.carte-recto::before { content: ""; position: absolute; inset: 3.7cqw; border: .25cqw solid #C8A65B; }
.carte-recto::after { content: ""; position: absolute; inset: 4.6cqw; border: .12cqw solid rgba(200, 166, 91, .6); }
/* Les unités cqw d'un conteneur visent son ancêtre : les écarts sont donc posés sur les enfants. */
.carte-recto > span + span { margin-top: 1.7cqw; }
.carte-recto .c-marque { font-size: 2.6cqw; letter-spacing: .3em; text-transform: uppercase; color: #C8A65B; }
.carte-recto .c-pour { font-family: var(--texte); font-style: italic; font-weight: 500; font-size: 8.6cqw; line-height: 1; color: #E6CE92; }
.carte-recto .c-titre { font-family: var(--titre); font-style: italic; font-size: 4.2cqw; line-height: 1.1; }
.carte-recto .c-orne { display: block; width: 7cqw; height: 2.8cqw; color: #C8A65B; }
.carte-recto .c-orne svg { display: block; width: 100%; height: 100%; }
.carte-recto .c-offert { font-style: italic; font-size: 3.4cqw; color: #E6CE92; }
.carte-recto .c-debut { font-size: 2.3cqw; letter-spacing: .12em; text-transform: uppercase; color: #C8A65B; }
.carte-recto > .c-debut { margin-top: 3cqw; }
.carte-glissee figcaption { margin-top: 20px; font-style: italic; font-size: 1rem; color: var(--encre-2); }
/* La carte sort une fois de son enveloppe quand elle devient visible (motion.js pose .sortie), comme sur la
   page de confirmation : rangée dans l'enveloppe (doublure ocre derrière, poche devant), elle monte de 30 %,
   se pose, puis l'enveloppe s'efface en glissant vers le bas. Sans mouvement : posée, sans enveloppe. */
@media screen and (prefers-reduced-motion: no-preference) {
  html.anim .carte-pochette::before, html.anim .carte-pochette::after { content: ""; position: absolute; left: -2.5%; right: -2.5%; bottom: -3%; pointer-events: none; opacity: 0; }
  html.anim .carte-pochette::before {
    z-index: 0; top: 16%;
    clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 100%, 0 100%);
    background:
      repeating-linear-gradient(135deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 11px),
      linear-gradient(180deg, color-mix(in srgb, var(--or) 70%, var(--papier-2)), color-mix(in srgb, var(--or-fonce) 70%, var(--papier-2)));
  }
  html.anim .carte-pochette::after {
    z-index: 2; top: 44%;
    border: 1px solid var(--filet); border-radius: 0 0 2px 2px;
    background: linear-gradient(180deg, var(--papier-2), color-mix(in srgb, var(--papier-2) 92%, var(--encre)));
    box-shadow: 0 -10px 18px -14px rgba(0, 0, 0, .45), 0 18px 34px -26px rgba(0, 0, 0, .5);
  }
  html.anim .carte-glissee:not(.sortie) .carte-pochette::before, html.anim .carte-glissee:not(.sortie) .carte-pochette::after { opacity: 1; }
  html.anim .carte-glissee:not(.sortie) .carte-recto { translate: 0 30%; clip-path: inset(-3rem -3rem 27% -3rem); }
  html.anim .carte-glissee.sortie .carte-recto { animation: carte-sort-v 1.45s both; }
  html.anim .carte-glissee.sortie .carte-pochette::before, html.anim .carte-glissee.sortie .carte-pochette::after { animation: enveloppe-part-v 1.45s both; }
  html.anim .carte-glissee.sans-transition .carte-recto, html.anim .carte-glissee.sans-transition .carte-pochette::before, html.anim .carte-glissee.sans-transition .carte-pochette::after { animation: none; }
}
@keyframes carte-sort-v {
  0%, 6% { translate: 0 30%; clip-path: inset(-3rem -3rem 27% -3rem); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  56% { translate: 0 0; clip-path: inset(-3rem -3rem -3% -3rem); }
  100% { translate: 0 0; clip-path: inset(-3rem -3rem -4rem -3rem); }
}
@keyframes enveloppe-part-v {
  0%, 50% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  90%, 100% { opacity: 0; transform: translateY(8%); }
}

/* Un mot de la maison : l'avertissement de l'éditeur, signé comme lui, à droite. Le titre, une phrase de la
   maison, se coupe au fil du sens, jamais dans la réplique entre guillemets : « Ses souvenirs méritent
   mieux » / « qu’un “tu te souviens ?” » / « entre deux plats. » Sur téléphone, la taille suit la largeur pour
   que chaque groupe tienne sur sa ligne dès 320 px ; il reste en deçà des titres de chapitre. */
.mot-maison h2 { max-width: 15em; font-size: clamp(1.4rem, 7.2vw, 2.1rem); line-height: 1.1; }
/* Une lettre : une soixantaine de signes par ligne, la signature calée sur la fin des lignes (même mesure en rem). */
.mot-corps { margin-top: 22px; max-width: 34rem; }
.mot-corps > p { text-wrap: pretty; }
.mot-corps > p + p { text-indent: 1.3em; }
.signature { margin-top: 16px; max-width: 34rem; text-align: right; font-family: var(--titre); font-style: italic; font-size: 1.45rem; line-height: 1.2; color: var(--rubrique); }

/* VI. Questions et réponses, composées comme un entretien */
.entretien { margin: 26px 0 0; max-width: 34em; display: grid; gap: 26px; }
.entretien dt { font-style: italic; font-size: 1.22rem; line-height: 1.3; font-weight: 500; }
.entretien dd { margin: 6px 0 0; }

/* ------------------------------------------------------------------ Envoi (appel final), comme une dédicace à remplir */
.envoi { padding: 64px var(--marge) 76px; text-align: center; display: grid; justify-items: center; border-top: 1px solid color-mix(in srgb, var(--filet) 55%, transparent); }
.dedicace { font-family: var(--titre); font-style: italic; font-size: clamp(1.1rem, 5.4vw, 1.45rem); line-height: 1.5; color: var(--encre-2); white-space: nowrap; }
.dedicace .blanc { display: inline-block; width: 2.8em; height: 1px; vertical-align: baseline; border-bottom: 1px dotted currentColor; }
.envoi h2 { margin-top: 18px; font-size: 2.3rem; max-width: 11em; }
.envoi .envoi-prix { margin: 12px 0 22px; font-style: italic; color: var(--encre-2); max-width: 22em; }
.envoi .btn { width: 100%; max-width: 24rem; }

/* ------------------------------------------------------------------ Achevé d'imprimer */
footer.acheve .table-nav { display: none; }
footer.acheve .site-grille { max-width: 65.5rem; }
.table { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.table a { display: grid; grid-template-columns: 2.4em 1fr; gap: 6px; padding: 6px 0; text-decoration: none; color: var(--encre); }
.table a:hover span:last-child { text-decoration: underline; }
.table .n { font-family: var(--titre); color: var(--rubrique); }
.colophon { display: grid; gap: 8px; align-content: start; }
.colophon .site-titre { margin-bottom: 4px; }

/* ------------------------------------------------------------------ Petits écrans en hauteur : le livre passe sous l'offre */
@media (max-width: 699px) and (max-height: 600px) {
  .ouverture { grid-template-areas: "pour" "titre" "argument" "offre" "pied" "livre"; }
  .ouverture h1 { font-size: clamp(1.9rem, 8.4vw, 2.2rem); }
  .frontispice { width: min(100%, 420px); margin-top: 18px; }
}

/* ------------------------------------------------------------------ Téléphone : le livre à feuilleter déborde des marges */
@media (max-width: 699px) {
  .livre-ouvert { margin-inline: calc(8px - var(--marge)); }
}

/* ------------------------------------------------------------------ Tablette */
@media (min-width: 700px) {
  .noel { padding: 46px var(--marge) 50px; }
  .noel h2 { font-size: 2.9rem; }
  .noel-dates { margin-top: 22px; gap: 8px; font-size: 1.12rem; }
  .noel-note { margin-top: 20px; }
  .essai { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 15.5rem); grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "titre page" "intro page" "champ page" "suite page" ". page"; column-gap: 40px; align-items: start; }
  .essai-page { width: 100%; }
  .ouverture { padding-top: 30px; }
  .ouverture .pour { font-size: 1.15rem; }
  .ouverture h1 { font-size: 3.4rem; max-width: 12em; }
  .ouverture .argument { font-size: 1.12rem; }
  .frontispice { width: clamp(300px, calc((100svh - 430px) * 1.2), 600px); }
  .chapitre { padding-top: 84px; padding-bottom: 76px; }
  .tete { column-gap: 22px; }
  .numero { font-size: 4.6rem; }
  .chapitre h2 { font-size: 2.9rem; }
  .mot-maison h2 { font-size: 2.4rem; }
  .sequence { max-width: 34rem; }
  footer.acheve .table-nav { display: block; }
  footer.acheve .site-grille { grid-template-columns: 1fr 1.3fr; gap: 48px; }
  .offrir-action { grid-template-columns: auto 1fr; align-items: center; gap: 18px; }
  .offrir-action .btn { width: auto; min-width: 18rem; }
  .envoi .btn { width: auto; min-width: 20rem; }
}

/* ------------------------------------------------------------------ Ordinateur : frontispice et page de titre en vis-à-vis, notes en marge */
@media (min-width: 1000px) {
  .ouverture {
    grid-template-areas: none;
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
    align-items: center; column-gap: clamp(40px, 5vw, 96px);
    max-width: 1440px; margin: 0 auto;
    min-height: calc(100svh - 57px); padding: 20px var(--marge) 32px;
  }
  .frontispice { grid-area: auto; grid-column: 1; grid-row: 1; width: 100%; max-width: min(760px, calc((100svh - 170px) * 1.2)); justify-self: center; }
  .page-de-titre { display: grid; grid-column: 2; grid-row: 1; justify-items: center; align-content: center; padding: 10px 0; }
  .ouverture .page-de-titre > * { grid-area: auto; }
  .ouverture .pour { font-size: 1.2rem; }
  .ouverture h1 { margin-top: 22px; font-size: clamp(3.4rem, 4.6vw, 4.75rem); line-height: 1; }
  .ouverture .fleuron { display: block; margin: 26px auto 0; width: 56px; height: 22px; }
  .ouverture .argument { margin-top: 22px; font-size: 1.3rem; max-width: 21em; }
  .offre-titre { margin-top: 30px; gap: 26px; }
  .prix .montant { font-size: 2.9rem; }
  .faits-titre { margin-top: 18px; max-width: 26em; }
  .faits-titre li { font-size: 1rem; }

  .chapitre { padding: 104px var(--marge) 100px; }
  .chapitre > .cadre {
    display: grid; max-width: 1180px; margin: 0 auto;
    grid-template-columns: [num] 8.5rem [texte] minmax(0, 36rem) [goutte] 4rem [marge] minmax(0, 17rem) [fin];
    justify-content: center;
    grid-auto-flow: row dense;
  }
  .cadre > * { grid-column: texte; }
  .cadre > .note, .cadre > .en-marge { grid-column: marge; margin-top: 0; align-self: start; }
  .cadre > .tete { grid-column: num / goutte; display: grid; grid-template-columns: 8.5rem 1fr; column-gap: 0; margin-bottom: 32px; }
  .numero { font-size: 5.6rem; }
  .chapitre h2 { font-size: 3.3rem; }
  .mot-maison h2 { font-size: 2.6rem; }
  .feuilletage h3, .essai-titre { font-size: 2rem; }
  .note { padding-left: 0; border-left: 0; border-top: 1px solid var(--filet); padding-top: 12px; font-size: 1.04rem; }
  /* La note de marge s'aligne sur le début du texte du chapitre. */
  #annee .note, #voix .note, #questions .note { grid-row: 2; }
  #offrir .en-marge { grid-row: 2 / span 2; }
  .calendrier { gap: 30px; }
  .sequence { grid-column: texte / fin; max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 44px; }
  .seq-page .extrait-photo { width: 84%; }
  .extrait-texte { font-size: 1.04rem; }
  .carte-glissee { margin-top: 0; }
  .envoi { padding: 96px var(--marge) 104px; }
  .envoi h2 { font-size: 3.4rem; }
  .dedicace { font-size: 1.8rem; }
  .dedicace .blanc { width: 4.2em; }
  .fiche > div { grid-template-columns: 10em minmax(0, 1fr); }
  .essai { grid-column: texte / fin; grid-template-columns: minmax(0, 36rem) minmax(0, 17rem); column-gap: 4rem; }
  .feuilletage { grid-column: texte / fin; }
  .livre-ouvert { max-width: 800px; margin-inline: auto; }
  .feuilletage .legende-courante, .feuilletage .feuilleter { max-width: 800px; margin-inline: auto; }
}
@media (min-width: 1000px) and (max-height: 760px) {
  .ouverture h1 { font-size: 3.6rem; }
  .ouverture .argument { font-size: 1.2rem; }
}
@media (min-width: 1600px) {
  .ouverture h1 { font-size: 5.5rem; }
}

/* ------------------------------------------------------------------ Contraste élevé */
@media (forced-colors: active) {
  .points { background: none; border-bottom: 1px dotted CanvasText; height: 0; }
  .vocal .tete-lecture { forced-color-adjust: none; background: CanvasText; }
  .vocal .rond { forced-color-adjust: none; background: CanvasText; }
  .vocal .rond::after { border-left-color: Canvas; }
  .feuillet, .extrait { border: 1px solid CanvasText; }
  .f-parler { border: 1px solid CanvasText; }
  .sommaire-complet summary::before { color: CanvasText; }
}

/* ------------------------------------------------------------------ Impression : le livre ouvert, à plat, et tout le texte */
@media print {
  .ouverture { display: block; min-height: 0; padding: 0 0 12pt; text-align: center; }
  .frontispice { width: 12cm; max-width: 100%; margin: 12pt auto; }
  .livre-corps, .moitie-gauche { transform: none !important; }
  .livre { break-inside: avoid; }
  .chapitre { padding: 18pt 0; break-inside: auto; }
  .chapitre h2, .tete { break-after: avoid; }
  .sequence, .fiche, .pile, .carte-glissee, .extrait { break-inside: avoid; }
  .btn-transcrire, .table-nav, .offrir-action .btn, .envoi .btn, .offre-titre .btn { display: none !important; }
  .essai, .sommaire-action, .feuilleter, .legende-courante, .vol, .aide-geste, .plateau::before { display: none !important; }
  .planche, .double { break-inside: avoid; }
  /* Deux doubles pages par feuille A4 (15 cm de large : les tailles du grand livre, texte justifié). */
  .livre-ouvert { width: 15cm; max-width: 100%; margin: 12pt auto 0; }
  .planche + .planche { margin-top: 14pt; }
  .noel { background: none; color: #000; padding: 12pt 0; }
  .noel::before, .noel::after { border-color: #000; }
  .noel h2, .noel-dates .quand, .noel-note { color: #000; }
  .carte-pochette::before, .carte-pochette::after { display: none !important; }
  .envoi { padding: 18pt 0; }
}