/* Le carnet qu'on feuillette : un livre Fairy Tails reconstitué page par page, dans la
   composition exacte du livre imprimé (voir app/lib/pdf-generator.ts).

   Cette feuille est partagée par l'accueil et par /exemples. Elle porte donc ses propres
   variables : elle ne doit rien attendre de la page qui l'accueille.

   Toutes les mesures des pages viennent du gabarit imprimé (A4, 595,28 pt de large) et
   sont exprimées en cqw — pourcentage de la largeur de page. La composition reste donc
   identique que le livre soit affiché sur 260 ou sur 460 pixels. */

.carnet-livre {
  --c-gold: #E8B86D;
  --c-gold-dark: #C49040;
  --c-gold-print: #C9973A;
  --c-cream: #FDF8F0;
  --c-warm: #FEF6E8;
  --c-paper: #FFFFFF;
  --c-ink: #1A1209;
  --c-ink-soft: #5A4030;
  --c-muted: #7A6548;
  --c-line: rgba(26,18,9,.10);
  --c-accent: #5B3D8F;

  min-width: 0;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--c-ink);
  text-align: left;

  /* La photo de départ à gauche, le livre à droite : le carnet reçoit ainsi toute la
     largeur disponible et s'ouvre en double page, illustration et texte face à face. */
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}
.carnet-corps { min-width: 0; }
.carnet-livre[data-accent="teal"] { --c-accent: #1D7A6B; }

/* ---------- l'enfant et sa photo ---------- */
.carnet-livre .fiche {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "legende" "photo" "nom" "mode";
  gap: 0;
  padding: .8rem .85rem 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-line);
  box-shadow: 0 6px 22px rgba(26,18,9,.1);
  /* La photo de départ doit rester sous les yeux pendant qu'on tourne les pages :
     c'est la comparaison qui convainc, pas la phrase qui l'annonce. */
  position: sticky;
  top: 16px;
  z-index: 30;
}
.carnet-livre .fiche-legende { margin-bottom: .5rem; }
.carnet-livre .fiche-nom { margin-top: .7rem; font-size: 1.15rem; }
.carnet-livre .fiche-mode { margin-top: .3rem; }
.carnet-livre .fiche-legende {
  grid-area: legende; margin: 0 0 .3rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-muted);
}
.carnet-livre .fiche-photo {
  grid-area: photo; align-self: center;
  width: 100%; height: auto; display: block;
  border-radius: 12px; border: 3px solid var(--c-paper);
  box-shadow: 0 6px 18px rgba(26,18,9,.16);
}
.carnet-livre .fiche-nom {
  grid-area: nom; align-self: end; margin: 0;
  font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 1.02rem;
}
.carnet-livre .fiche-mode {
  grid-area: mode; align-self: start; margin: .1rem 0 0;
  display: flex; align-items: center; gap: .4rem;
  font-size: .78rem; line-height: 1.35; color: var(--c-ink-soft);
}
.carnet-livre .pastille { width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); flex: none; }

.carnet-livre .livre-mode {
  margin: 0 0 .35rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-accent);
}
.carnet-livre .carnet-titre {
  margin: 0 0 1rem;
  font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.2; color: var(--c-ink);
  text-wrap: balance;
}

/* ---------- le plan sur lequel le livre est posé ---------- */
/* À l'ouverture, la couverture n'occupe que la moitié droite de la double page : la
   moitié gauche est l'endroit où les pages tournées vont s'empiler. Sans ce fond, elle
   passait pour un trou dans la mise en page. */
.carnet {
  position: relative;
  padding: clamp(.6rem, 1.6vw, 1.4rem);
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
    linear-gradient(170deg, #F4EADA, #E9DCC7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 34px rgba(26,18,9,.09);
}
.carnet-pages { margin: 0 auto; max-width: 900px; }
/* Avant que la bibliothèque ne prenne la main, les pages sont empilées dans le flux :
   sans cette règle, les vingt-six pages s'afficheraient les unes sous les autres le
   temps du chargement. Seule la couverture reste visible. */
.carnet-pages:not(.stf__parent) { max-width: 430px; }
.carnet-pages:not(.stf__parent) .pf-page { aspect-ratio: 595.28 / 841.89; position: relative; }
.carnet-pages:not(.stf__parent) .pf-page:not(:first-child) { display: none; }

.carnet-cmd {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  margin: 1rem 0 .4rem;
}
.rond {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--c-line); background: var(--c-paper); color: var(--c-ink);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  box-shadow: 0 3px 12px rgba(26,18,9,.1);
  transition: transform .15s ease, background .15s ease;
}
.rond:hover:not(:disabled) { transform: translateY(-2px); background: var(--c-warm); }
.rond:disabled { opacity: .35; cursor: default; }
.rond:focus-visible { outline: 3px solid var(--c-gold-dark); outline-offset: 3px; }
.carnet-compte {
  min-width: 11ch; text-align: center;
  font-size: .82rem; color: var(--c-muted); font-variant-numeric: tabular-nums;
}
.carnet-aide { margin: 0; text-align: center; font-size: .78rem; color: var(--c-muted); }

/* ---------- la page imprimée, reproduite ---------- */
.pf-page {
  container-type: inline-size;
  background: var(--c-paper);
  overflow: hidden;
  font-family: 'DM Sans', -apple-system, sans-serif;
  color: var(--c-ink);
  text-align: left;
}
.pf-page.--left  { box-shadow: inset -14px 0 26px -18px rgba(26,18,9,.55); }
.pf-page.--right { box-shadow: inset  14px 0 26px -18px rgba(26,18,9,.55); }
.pf-inner { position: absolute; inset: 0; overflow: hidden; }
.pf-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-page p, .pf-page h3, .pf-page h4, .pf-page ul, .pf-page li { margin: 0; }
.pf-page h3, .pf-page h4 { font-weight: 400; }
.pf-numero {
  position: absolute; left: 0; right: 0; bottom: 5.5cqw;
  text-align: center; font-size: 1.34cqw; color: #BBA090;
}
.pf-numero-clair { color: rgba(255,255,255,.72); }
.pf-etiquette {
  font-weight: 600; font-size: 1.55cqw; letter-spacing: .5cqw;
  color: var(--c-gold-print); text-align: center;
}
.pf-etiquette-serree { letter-spacing: .34cqw; font-size: 1.5cqw; }
.pf-trait { width: 40%; margin: 1.6cqw auto; border: 0; border-top: 1px solid rgba(201,151,58,.5); }
.pf-trait-court { width: 30%; margin: 3cqw auto 1.6cqw; border: 0; border-top: 1px solid rgba(201,151,58,.4); }

/* couverture */
/* Le voile sombre est un pseudo-élément, donc peint AVANT l'illustration qui le suit
   dans le document : sans z-index il disparaît sous elle et le titre blanc se perd
   dans un ciel clair. */
.pf-couv .pf-inner::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 62cqw; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.88), rgba(0,0,0,0));
}
.pf-couv-haut { position: absolute; left: 0; right: 0; top: 7cqw; z-index: 2; padding: 0 6.7cqw; text-align: center; }
.pf-couv-haut h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 5.04cqw; line-height: 1.24; color: #fff; text-wrap: balance;
}
.pf-couv-haut p { margin-top: 2cqw; font-size: 2.18cqw; font-style: italic; color: rgba(255,255,255,.85); }
.pf-couv-bas {
  position: absolute; left: 0; right: 0; bottom: 0; height: 16cqw; z-index: 2;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.62));
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5.5cqw;
}
.pf-couv-bas span {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 3.7cqw; letter-spacing: .84cqw; color: rgba(255,255,255,.96);
}

/* dédicace */
.pf-dedicace .pf-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12cqw 13.4cqw;
}
.pf-dedicace .pf-inner::before,
.pf-dedicace .pf-inner::after,
.pf-texte .pf-inner::before,
.pf-texte .pf-inner::after,
.pf-savais .pf-inner::before,
.pf-dos .pf-inner::before,
.pf-dos .pf-inner::after {
  content: ""; position: absolute; left: 0; right: 0; height: .84cqw; background: var(--c-gold-print);
}
.pf-dedicace .pf-inner::before, .pf-texte .pf-inner::before,
.pf-savais .pf-inner::before, .pf-dos .pf-inner::before { top: 3.36cqw; }
.pf-dedicace .pf-inner::after, .pf-texte .pf-inner::after, .pf-dos .pf-inner::after { bottom: 3.36cqw; }
.pf-texte .pf-inner::before, .pf-texte .pf-inner::after { height: .67cqw; }
.pf-dedicace-texte {
  font-family: 'DM Serif Display', Georgia, serif; font-style: italic;
  font-size: 2.86cqw; line-height: 1.45; color: var(--c-ink); text-align: center;
}
.pf-signature { font-size: 2.18cqw; font-style: italic; color: var(--c-ink-soft); text-align: center; }
.pf-pied-marque {
  position: absolute; left: 0; right: 0; bottom: 6cqw;
  text-align: center; font-size: 1.5cqw; color: rgba(201,151,58,.5);
}

/* page d'illustration */
.pf-illu .pf-inner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10cqw;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.45));
}
.pf-bandeau {
  position: absolute; left: 0; right: 0; top: 0; min-height: 11.8cqw;
  padding: 3.9cqw 8.74cqw 1.6cqw; background: rgba(0,0,0,.55);
}
.pf-chapitre-mini { font-weight: 600; font-size: 1.34cqw; letter-spacing: .5cqw; color: var(--c-gold-print); }
.pf-chapitre-titre {
  margin-top: .8cqw; font-family: 'DM Serif Display', Georgia, serif;
  font-size: 2.52cqw; line-height: 1.2; color: #fff;
}

/* page de texte */
.pf-texte .pf-inner { display: flex; flex-direction: column; padding: 10cqw 8.74cqw 9cqw; }
.pf-or { color: var(--c-gold-print); }
.pf-titre-chapitre {
  margin-top: 1.4cqw; font-family: 'DM Serif Display', Georgia, serif;
  font-size: 4.37cqw; line-height: 1.2; color: var(--c-ink); text-wrap: balance;
}
.pf-trait-gauche { width: 9.4cqw; margin: 2cqw 0 0; border: 0; border-top: .34cqw solid var(--c-gold-print); }
.pf-losange { text-align: center; font-size: 1.6cqw; color: rgba(201,151,58,.55); }
.pf-corps { flex: 1; display: flex; align-items: center; }
.pf-corps p { color: var(--c-ink); }
.pf-lexique { margin-top: 2cqw; padding-top: 1.6cqw; border-top: 1px solid rgba(201,151,58,.55); }
.pf-lexique p { font-size: 1.85cqw; line-height: 1.5; color: var(--c-ink-soft); }
.pf-lexique p + p { margin-top: .8cqw; }
.pf-lexique b { color: var(--c-gold-print); }

/* le savais-tu */
.pf-savais { background: var(--c-warm); }
.pf-savais .pf-inner { display: flex; flex-direction: column; padding: 9cqw 8.74cqw; }
.pf-faits {
  list-style: none; padding: 0; margin-top: 2cqw; flex: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 4cqw;
}
.pf-faits li { position: relative; padding-left: 5.7cqw; font-size: 3.02cqw; line-height: 1.4; color: var(--c-ink); }
.pf-faits li::before {
  content: ""; position: absolute; left: 0; top: .7em; width: 1.6cqw; height: 1.6cqw;
  background: var(--c-gold-print); transform: rotate(45deg);
}

/* quatrième de couverture */
.pf-dos { background: var(--c-warm); }
.pf-dos .pf-inner { display: flex; flex-direction: column; padding: 12cqw 12cqw 9cqw; text-align: center; }
.pf-dos-titre {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 5.04cqw; line-height: 1.2; color: var(--c-ink); text-wrap: balance;
}
.pf-dos-resume { font-size: 2.9cqw; font-style: italic; line-height: 1.5; color: var(--c-ink-soft); }
.pf-morale { margin-top: auto; padding-top: 4cqw; }
.pf-morale-texte {
  margin-top: 1.8cqw; font-family: 'DM Serif Display', Georgia, serif; font-style: italic;
  font-size: 3.19cqw; line-height: 1.4; color: var(--c-ink);
}
.pf-dos-pied { margin-top: 5cqw; }
.pf-dos-marque {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 2.86cqw; letter-spacing: .34cqw; color: var(--c-gold-print);
}
.pf-dos-baseline { margin-top: 1.4cqw; font-size: 1.85cqw; font-style: italic; color: rgba(90,64,48,.6); }

/* feuilles de la bibliothèque de feuilletage */
.stf__parent { position: relative; display: block; box-sizing: border-box; transform: translateZ(0); touch-action: pan-y; }
.sft__wrapper { position: relative; width: 100%; box-sizing: border-box; }
.stf__parent canvas { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.stf__block { position: absolute; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
.stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow, .stf__innerShadow, .stf__hardShadow, .stf__hardInnerShadow { position: absolute; left: 0; top: 0; }

@media (prefers-reduced-motion: reduce) {
  .rond:hover:not(:disabled) { transform: none; }
}

/* Colonne unique dès qu'il n'y a plus la place pour la photo à côté du livre : elle
   repasse en carte horizontale collée en haut, comme sur téléphone. */
@media (max-width: 860px) {
  .carnet-livre { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .carnet-livre .fiche {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "legende legende" "photo nom" "photo mode";
    gap: .1rem .85rem;
    align-items: center;
    margin-bottom: .9rem;
    padding: .6rem .8rem;
    border-radius: 16px;
    top: 12px;
  }
  .carnet-livre .fiche-legende { margin-bottom: .3rem; font-size: .6rem; }
  .carnet-livre .fiche-nom { margin-top: 0; align-self: end; font-size: 1rem; }
  .carnet-livre .fiche-mode { margin-top: .1rem; align-self: start; }
}

/* ---------- le sélecteur de livre ---------- */
.carnet-choix {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
  margin: 0 auto 1.8rem; padding: .35rem;
  border-radius: 100px; background: rgba(26,18,9,.05); width: fit-content; max-width: 100%;
}
.carnet-onglet {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.1rem; border: 0; border-radius: 100px;
  background: transparent; color: #6B5535;
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.carnet-onglet:hover { color: #1A1209; }
.carnet-onglet[aria-selected="true"] {
  background: #1A1209; color: #F5D499; box-shadow: 0 4px 16px rgba(26,18,9,.2);
}
.carnet-onglet:focus-visible { outline: 3px solid #C49040; outline-offset: 2px; }
.carnet-livre[hidden] { display: none; }