/* ══════════════════════════════════════════════════════════════════════════
   HISTOIRE — LIVRE D'OR DES 25 ANS  •  Système de classes bk-*
   Carnet de souvenirs interactif Optinove · vanilla CSS/HTML/JS
   Ton : chaleureux, convivial, premium, humain. Pas un musée.

   Structure DOM (injectée par histoire-book.js) :
     .bk-stage
       .bk-nav.bk-prev
       .bk(.bk--closed|.bk--open)
         .bk-spread(.bk-spread--closed-front|--closed-back|--open)
           .bk-half.bk-half--left(.bk-half--hidden|.bk-half--back)
             .bk-page(.bk-page--blank|--coverinner|--photo|--back|--cover)
           .bk-half.bk-half--right(.bk-half--hidden|.bk-half--cover)
             .bk-page(...)
       .bk-nav.bk-next
     .bk-meta
       .bk-progress  #bkProgCurr  .bk-sep
       .bk-hint
     .bk-progressbar
       .bk-progressbar-fill
   ══════════════════════════════════════════════════════════════════════════ */

/* Police manuscrite pour annotations (chargée depuis Google Fonts dans le head) */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&family=Kalam:wght@300;400&display=swap');


/* ═════════════════════════════════════════════════════════════════════════
   1. SECTION CONTAINER
   ═════════════════════════════════════════════════════════════════════════ */
.ch-book-section {
  position: relative;
  padding: clamp(80px, 12vw, 140px) 0 clamp(60px, 8vw, 100px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(60,30,12,.20), transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(40,20,8,.10) 50%, transparent 100%);
}
[data-theme="light"] .ch-book-section {
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(198,168,91,.12), transparent 70%),
    linear-gradient(180deg, #F4F1EA 0%, #EBE5D6 50%, #F4F1EA 100%);
}
/* Texture tartan ultra-subtile derrière le carnet */
.ch-book-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--rs-tartan-url);
  background-size: clamp(60px, 5vw, 90px) clamp(60px, 5vw, 90px);
  background-repeat: repeat;
  opacity: .07;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] .ch-book-section::before {
  opacity: .14;
  mix-blend-mode: multiply;
}
.ch-book-section > .w {
  position: relative;
  z-index: 1;
}


/* ═════════════════════════════════════════════════════════════════════════
   2. INTRO TEXTE — Ton chaleureux
   ═════════════════════════════════════════════════════════════════════════ */
.ch-book-intro {
  max-width: 600px;
  margin: 28px auto 60px;
  text-align: center;
  font-size: 1.04rem;
  line-height: 1.78;
  color: var(--tx2);
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .01em;
}


/* ═════════════════════════════════════════════════════════════════════════
   3. STAGE — Table chaleureuse, lumière de soirée
   ═════════════════════════════════════════════════════════════════════════ */
.bk-stage {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  perspective: 2200px;
  padding: clamp(20px, 4vw, 56px) 0;
}
/* Halo lumière chaude de bougie au-dessus du carnet */
.bk-stage::before {
  content: '';
  position: absolute;
  top: -16%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 70%;
  background:
    radial-gradient(ellipse 55% 60% at 50% 0%, rgba(255,210,120,.22), transparent 72%),
    radial-gradient(ellipse 90% 80% at 50% 0%, rgba(255,180,80,.06), transparent 75%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] .bk-stage::before {
  background:
    radial-gradient(ellipse 55% 60% at 50% 0%, rgba(255,200,90,.36), transparent 72%),
    radial-gradient(ellipse 90% 80% at 50% 0%, rgba(220,160,60,.10), transparent 75%);
}


/* ═════════════════════════════════════════════════════════════════════════
   4. BK — Le carnet lui-même
   ═════════════════════════════════════════════════════════════════════════ */
.bk {
  position: relative;
  width: 100%;
  /*
   * --bk-ar-spread injecté par le probe JS = double-page VOLONTAIREMENT plus
   * verticale (pages étroites/hautes, façon carnet) pour la lisibilité.
   * Fallback 129/100 ≈ deux pages étroites (~0.645:1) côte à côte si le
   * probe échoue. max-height élevé : le livre occupe plus de hauteur →
   * pages plus grandes, écriture plus lisible.
   */
  aspect-ratio: var(--bk-ar-spread, 129/100);
  max-width: 980px;
  max-height: 88vh;
  margin: 0 auto;
  /*
   * Pas d'overflow:hidden ici — l'ombre portée (.bk::after) et les box-shadows
   * des états fermés (.bk-spread--closed-*) doivent rester visibles.
   * Le clipping du contenu se fait sur .bk-spread (overflow:hidden).
   */
  transform-style: preserve-3d;
  transition:
    aspect-ratio .85s cubic-bezier(.45,.05,.25,.95),
    max-width    .85s cubic-bezier(.45,.05,.25,.95),
    transform    .85s cubic-bezier(.45,.05,.25,.95);
  z-index: 1;
}

/*
 * Livre fermé — proportions portrait du vrai format collector.
 * --bk-ar-cover injecté par le probe JS (1086/1448 ≈ 3/4).
 *
 * HAUTEUR PILOTÉE PAR LE VIEWPORT → la couverture tient TOUJOURS à l'écran,
 * de façon strictement identique en light et en dark (la taille ne dépend
 * d'aucun thème). On fixe la HAUTEUR (vh) et on laisse la LARGEUR en découler
 * via aspect-ratio (width:auto) : aucune distorsion, aucune bande, aucun
 * artefact de recalcul. Plafond px = ancienne taille sur très grands écrans.
 */
.bk.bk--closed {
  aspect-ratio: var(--bk-ar-cover, 3/4);
  height: min(80vh, 587px);   /* 587 ≈ 440 × 4/3 (plafond grands écrans) */
  width: auto;
  max-width: 92vw;             /* sécurité écrans étroits */
  max-height: none;
  transform: perspective(1400px) rotateY(-3deg);
  cursor: pointer;
}
.bk.bk--open:hover {
  transform: translateY(-2px);
}
.bk.bk--closed:hover {
  transform: perspective(1400px) rotateY(-1.5deg) translateY(-4px);
}

/* Ombre portée chaude — comme posé sur une nappe */
.bk::after {
  content: '';
  position: absolute;
  left: 3%; right: 3%;
  bottom: -5.5%;
  height: 36px;
  background:
    radial-gradient(ellipse 100% 100% at 50% 0%, rgba(15,6,1,.66) 0%, transparent 66%);
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
}
[data-theme="light"] .bk::after {
  background:
    radial-gradient(ellipse 100% 100% at 50% 0%, rgba(50,20,6,.44) 0%, transparent 66%);
}

/* (Épaisseur / tranche de pages retirée : cadre artificiel non souhaité —
   on ne veut voir que les pages.) */


/* ═════════════════════════════════════════════════════════════════════════
   5. SPREAD
   ═════════════════════════════════════════════════════════════════════════ */
.bk-spread {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow: hidden;        /* clip tout le contenu interne */
  border-radius: 2px;
  transform-style: preserve-3d;
  /* Aucun contour / cadre autour des pages : on ne veut voir QUE les pages.
     (Les ombres de reliure et de gouttière, elles, sont conservées.) */
}

/* Reliure / tranche au centre — crease profond */
.bk-spread::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 34px;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.22)   0%,
      rgba(12,5,1,.46)  28%,
      rgba(35,14,2,.62) 50%,
      rgba(12,5,1,.46)  72%,
      rgba(0,0,0,.22)   100%);
  z-index: 10;
  pointer-events: none;
  mix-blend-mode: multiply;
}
/* Fil de lumière doré sur la couture */
.bk-spread::after {
  content: '';
  position: absolute;
  left: 50%; top: 8%; bottom: 8%;
  width: 2px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg,
      transparent            4%,
      rgba(255,218,130,.36) 10%,
      rgba(255,218,130,.24) 50%,
      rgba(255,218,130,.36) 90%,
      transparent            96%);
  z-index: 11;
  pointer-events: none;
}


/* ═════════════════════════════════════════════════════════════════════════
   6. HALVES — Conteneurs gauche / droite
   ═════════════════════════════════════════════════════════════════════════ */
.bk-half {
  position: relative;
  width: 50%;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
  /*
   * backface-visibility: hidden — clé pour le rendu correct du flip.
   * Sans cela, quand une demi-page tourne (rotateY 0→-180°), son VERSO est
   * visible en miroir sur le côté opposé. Avec hidden, le verso est
   * transparent → seule la face avant est rendue.
   */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* Demi-page masquée (état fermé, côté non visible) */
.bk-half--hidden {
  display: none !important;
}

/* Pleine largeur quand le livre est fermé */
.bk-half--cover,
.bk-half--back {
  width: 100%;
}

/*
 * Pivot 3D correct pour chaque côté.
 * La page droite pivote depuis son bord GAUCHE (= la reliure).
 * La page gauche pivote depuis son bord DROIT  (= la reliure).
 */
.bk-half--right {
  transform-origin: left center;
  z-index: 2;
}
.bk-half--left {
  transform-origin: right center;
  z-index: 1;
}


/* ═════════════════════════════════════════════════════════════════════════
   7. PAGE BASE — Papier crème chaleureux
   ═════════════════════════════════════════════════════════════════════════ */
.bk-page {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 80% at 30% 20%, rgba(255,250,232,.40), transparent 60%),
    #F8F1DA;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Texture papier : grain naturel */
.bk-page::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 30% 24% at 18% 88%, rgba(180,130,60,.06), transparent 70%),
    radial-gradient(ellipse 24% 18% at 82% 12%, rgba(180,130,60,.05), transparent 70%),
    repeating-linear-gradient(98deg,
      rgba(180,130,60,.020) 0 1px,
      transparent 1px 4px);
  pointer-events: none;
  z-index: 2;
}


/* ═════════════════════════════════════════════════════════════════════════
   8. OMBRES DE RELIURE — Profondeur du pli central
   ═════════════════════════════════════════════════════════════════════════ */

/*
 * IMPORTANT — pas d'isolation:isolate sur les pages.
 * isolation:isolate crée un contexte de composition opaque : les
 * mix-blend-mode:multiply des ombres de reliure (::after) se composeraient
 * alors UNIQUEMENT dans le contexte de la page, pas contre l'arrière-plan.
 * Résultat : ombres blanchies, spine invisible. On ne l'utilise pas ici.
 */

/* Page droite : ombre vient du GAUCHE (spine côté gauche) */
.bk-half--right .bk-page::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 110px;
  background: linear-gradient(90deg,
    rgba(0,0,0,.70)  0%,
    rgba(8,3,1,.46)  12%,
    rgba(8,3,1,.22)  30%,
    rgba(8,3,1,.08)  52%,
    transparent      78%);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: multiply;
}

/* Page gauche : ombre vient du DROIT (spine côté droit) */
.bk-half--left .bk-page::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 110px;
  background: linear-gradient(270deg,
    rgba(0,0,0,.62)  0%,
    rgba(8,3,1,.38)  14%,
    rgba(8,3,1,.16)  34%,
    transparent      72%);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: multiply;
}

/* Pas d'ombre de reliure sur les demi-pages pleines largeur (fermé) */
.bk-half--cover .bk-page::after,
.bk-half--back  .bk-page::after {
  display: none !important;
}


/* ═════════════════════════════════════════════════════════════════════════
   9. ÉCLAIRAGE DES TRANCHES EXTERNES
   Lumière rasante sur le bord extérieur de chaque page.
   ═════════════════════════════════════════════════════════════════════════ */
/* Liserés / lumières de tranche internes supprimés : aucun cadre autour des
   pages. Seules les vraies ombres (reliure, gouttière, portée) subsistent. */
.bk-half--right .bk-page { box-shadow: none; }
.bk-half--left  .bk-page { box-shadow: none; }


/* ═════════════════════════════════════════════════════════════════════════
   10. PAGE GAUCHE — Papier ivoire légèrement plus jauni / passif
   Le différentiel renforce perceptivement quel côté est le recto (droit).
   ═════════════════════════════════════════════════════════════════════════ */
.bk-half--left .bk-page--blank,
.bk-half--left .bk-page--coverinner {
  background:
    radial-gradient(ellipse 85% 72% at 25% 18%, rgba(255,242,210,.48), transparent 62%),
    radial-gradient(ellipse 55% 50% at 82% 88%, rgba(120,78,30,.09), transparent 64%),
    #EFE2BE;   /* ivoire légèrement plus foncé / ocre que #F9F2DD du recto */
}


/* ═════════════════════════════════════════════════════════════════════════
   11. PAGE DROITE — Espace reliure (padding côté binding)
   ═════════════════════════════════════════════════════════════════════════ */
.bk-half--right .bk-page--blank,
.bk-half--right .bk-page--coverinner,
.bk-half--right .bk-page--back {
  padding-left:  clamp(18px, 3.5%, 34px);   /* côté reliure */
  padding-right: clamp(8px,  1.5%, 18px);   /* côté tranche */
}
/* Pour les photos : pas de padding (image inset:0 + ombre gradient) */


/* ═════════════════════════════════════════════════════════════════════════
   12. COVER PAGE — Vraie photo PNG avec masquage de bureau
   ═════════════════════════════════════════════════════════════════════════ */
.bk-page--cover {
  padding: 0;
  background: #0E0805;           /* fallback sombre si image charge mal */
  overflow: hidden;
  border-radius: 3px 5px 5px 3px;
}

/*
 * Vignette multiply fondue dans la photo — sections de couverture.
 * Réactive le ::before que la page de base définit, mais avec un contenu
 * différent (vignette coin + ombrages haut/bas).
 */
.bk-page--cover::before {
  display: block !important;
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 88% 84% at 50% 50%,
      transparent 56%, rgba(0,0,0,.16) 100%),
    linear-gradient(180deg, rgba(0,0,0,.07) 0%, transparent 14%),
    linear-gradient(0deg,   rgba(0,0,0,.09) 0%, transparent 14%);
  mix-blend-mode: multiply;
  z-index: 2;
  pointer-events: none;
}
/* Supprime le ::after de base (les ombres spine sur cover se gèrent via .bk-half) */
.bk-page--cover::after {
  display: none !important;
}

/*
 * L'image remplit exactement la page.
 * MASK FOND : La photo originale présente une fine bande de bureau.
 * Deux gradients CSS intersectés masquent proprement ces bandes.
 */
.bk-cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /*
   * object-fit: CONTAIN — le livre est visible EN INTÉGRALITÉ, jamais rogné.
   *
   * Pourquoi contain et non cover ?
   * • cover rogne l'image si le ratio du conteneur ne correspond pas exactement
   *   → haut/bas coupés sur certains viewports, INTERDICTION demandée
   * • contain garantit l'affichage intégral à la bonne taille
   * • Le probe JS injecte --bk-ar-cover = ratio EXACT de la PNG → aucune barre
   *   latérale visible (conteneur = image) ; contain ≡ cover dans ce cas
   *
   * Fallback 3/4 ≈ ratio réel 1086/1448 = 0.7499 → quasi-identique, aucune barre
   */
  object-fit: contain;
  object-position: center;
  display: block;
  z-index: 1;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  /*
   * MASQUE GAUCHE UNIQUEMENT — supprime la bande de bureau (~40 px) à gauche.
   *
   * POURQUOI on ne masque PAS les 3 autres côtés :
   * Les masques top/right/bottom créaient une dégradation visible aux bords
   * qui ressemblait à un recadrage ("le haut est coupé, le bas est coupé").
   * Le bureau n'est présent que sur le bord gauche de l'image originale.
   * Droite / haut / bas = tranche et bords naturels du livre → à préserver.
   */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5.5%);
      mask-image: linear-gradient(to right, transparent 0%, black 5.5%);
}

/* Reflet glossy subtil sur la couverture */
.bk-cover-gloss {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.08) 0%,
      transparent 40%,
      rgba(255,255,255,.03) 100%);
}


/* ═════════════════════════════════════════════════════════════════════════
   13. PAGE PHOTO INTÉRIEURE — Image pleine page imprimée dans le papier
   ═════════════════════════════════════════════════════════════════════════ */
.bk-page--photo {
  padding: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255,250,232,.55), transparent 70%),
    #F5EDDA;
  overflow: hidden;
}
/* Pas de surcouche sur les pages photo (galbe décoratif retiré).
   La texture de base est gérée par .bk-page-grain ; on ne veut voir que la page. */
.bk-page--photo::before { display: none !important; }

/* Wrapper qui remplit exactement la page photo */
.bk-page-paper {
  position: absolute;
  inset: 0;
}

/* Image : couvre exactement le container, aucun crop si probe correct */
.bk-photo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /*
   * PHOTO = PAGE. object-fit: cover → la photo remplit la page BORD À BORD,
   * sans marge de papier crème autour : elle EST la surface de la page, pas
   * une image posée dessus. La géométrie du livre est calée sur le ratio réel
   * des scans (3:4, cf. probe JS) : la grande majorité des pages remplit donc
   * la page EXACTEMENT, sans aucune coupe. Les rares scans au ratio légèrement
   * différent (contreplat, dernière page) ne perdent que quelques % au centre,
   * imperceptibles — le réalisme « page imprimée » prime sur le liseré.
   */
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 1;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  /*
   * AUCUN filtre colorimétrique : couleurs, encres et écritures du livre
   * d'or restituées telles quelles. Versions finales, fidélité absolue.
   */
}

/*
 * Grain papier imprimé dans l'image — mix-blend-mode:multiply
 * Fondé directement dans la photo comme une vraie impression offset.
 * IMPORTANT : ne pas mettre isolation:isolate sur les parents,
 * sinon multiply se compose dans le contexte local → effet blanc/nul.
 */
.bk-page-grain {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  /*
   * Très subtil : UNIQUEMENT une légère profondeur de page reliée (coins
   * et bords à peine assombris). AUCUNE fibre colorée, aucune teinte —
   * les couleurs et encres du scan restent fidèles (cf. interdictions du
   * brief : ne pas modifier les couleurs, ne pas appliquer de filtres).
   * Le réalisme « papier » vient surtout de l'ombre de reliure (gutter) et
   * de la lumière de tranche, pas d'une surcouche qui dénature la photo.
   */
  background:
    radial-gradient(ellipse 92% 88% at 50% 50%, transparent 72%, rgba(18,11,4,.11) 100%);
  mix-blend-mode: multiply;
}


/* ═════════════════════════════════════════════════════════════════════════
   14. PAGE BLANCHE — Papier ivoire premium, texturé
   ═════════════════════════════════════════════════════════════════════════ */
.bk-page--blank {
  background:
    radial-gradient(ellipse 90% 70% at 22% 14%, rgba(255,250,232,.62), transparent 60%),
    radial-gradient(ellipse 60% 50% at 88% 92%, rgba(120,80,38,.08), transparent 65%),
    #F9F2DD;
}
.bk-page--blank::before {
  background:
    /* Vignette — coins légèrement brunis */
    radial-gradient(ellipse 82% 78% at 50% 50%,
      transparent 52%, rgba(100,60,20,.10) 100%),
    /* Éclairage chaud haut-gauche */
    radial-gradient(ellipse 70% 55% at 20% 12%, rgba(255,250,232,.52), transparent 65%),
    /* Coin opposé légèrement ombré */
    radial-gradient(ellipse 55% 45% at 86% 90%, rgba(110,70,30,.07), transparent 68%),
    /* Fibres papier horizontales */
    repeating-linear-gradient(92deg,
      rgba(150,110,48,.020) 0 1px, transparent 1px 3px),
    /* Fibres verticales */
    repeating-linear-gradient(2deg,
      rgba(150,110,48,.011) 0 1px, transparent 1px 5px),
    /* Tâches jaunies */
    radial-gradient(ellipse 22% 16% at 14% 90%, rgba(180,130,60,.07), transparent 75%),
    radial-gradient(ellipse 18% 14% at 88%  8%, rgba(180,130,60,.05), transparent 75%);
}

/* Verso technique — hérite de blank, aucun style additionnel */
.bk-page--verso { /* intentionnellement vide */ }


/* ═════════════════════════════════════════════════════════════════════════
   15. CONTREPLAT INTÉRIEUR — Page de garde ouverte (verso couverture)
   Quand la couverture est sur la gauche d'un spread ouvert.
   ═════════════════════════════════════════════════════════════════════════ */
.bk-page--coverinner {
  background:
    radial-gradient(ellipse 65% 55% at 48% 36%, rgba(255,252,238,.78), transparent 72%),
    radial-gradient(ellipse 70% 60% at 18% 82%, rgba(160,110,48,.07), transparent 65%),
    #EDE1C8;
  overflow: hidden;
}
/* Grain du papier de garde */
.bk-page--coverinner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(93deg,
      rgba(130,92,36,.018) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(3deg,
      rgba(130,92,36,.010) 0 1px, transparent 1px 6px);
  pointer-events: none;
  z-index: 2;
}
/* Ornement central délicat — règle dorée comme dans un livre de luxe */
.bk-page--coverinner::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(40px, 8%, 68px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(160,112,40,.50) 30%,
    rgba(196,154,36,.72) 50%,
    rgba(160,112,40,.50) 70%,
    transparent);
  pointer-events: none;
  z-index: 3;
}


/* ═════════════════════════════════════════════════════════════════════════
   16. QUATRIÈME DE COUVERTURE — Page élégante avec dédicace
   ═════════════════════════════════════════════════════════════════════════ */
.bk-page--back {
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(255,250,232,.45), transparent 65%),
    radial-gradient(ellipse 60% 60% at 50% 100%, rgba(120,80,38,.08), transparent 65%),
    #F9F2DD;
  padding: clamp(28px, 5vw, 56px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.bk-back-content {
  position: relative; z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3vw, 28px);
  max-width: 320px;
  margin: 0 auto;
  text-align: center;
}
.bk-back-rule {
  width: 60px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(120,72,28,.50), transparent);
}
.bk-back-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(.96rem, 1.6vw, 1.08rem);
  line-height: 1.72;
  color: #4A2E10;
  margin: 0;
  letter-spacing: .01em;
}


/* ═════════════════════════════════════════════════════════════════════════
   17. ÉTATS FERMÉS — Couverture seule / Quatrième seule
   ═════════════════════════════════════════════════════════════════════════ */

/* Supprimer l'encadrement double-page et la reliure centrale */
.bk-spread--closed-front,
.bk-spread--closed-back {
  background: transparent;
}
/* Cache la reliure et le fil de couture */
.bk-spread--closed-front::before,
.bk-spread--closed-front::after,
.bk-spread--closed-back::before,
.bk-spread--closed-back::after {
  display: none;
}

/* Coins de la couverture cartonnée */
.bk-spread--closed-front {
  border-radius: 3px 6px 6px 3px;
}
.bk-spread--closed-back {
  border-radius: 6px 3px 3px 6px;
}

/*
 * Ombres livre fermé — ombre portée douce, sans bande colorée.
 *
 * SUPPRESSION INTENTIONNELLE des ombres directionnelles solides
 * (ex : -8px 2px 0 rgba(60,30,8,.90)) qui généraient une bande brune
 * verticale visible à gauche de la couverture.
 * La couverture PNG contient déjà ses propres ombres/reflets naturels.
 * On ajoute seulement une ombre portée diffuse pour ancrer le livre.
 */
.bk-spread--closed-front {
  box-shadow:
    0 12px 40px rgba(0,0,0,.56),     /* ombre portée principale */
    0  3px 10px rgba(0,0,0,.30),     /* ombre proche */
    inset 0 0 0 1px rgba(120,72,28,.06);
}
.bk-spread--closed-back {
  box-shadow:
    0 12px 40px rgba(0,0,0,.56),
    0  3px 10px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(120,72,28,.06);
}


/* ═════════════════════════════════════════════════════════════════════════
   18. NAVIGATION — Boutons élégants
   ═════════════════════════════════════════════════════════════════════════ */
.bk-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(42px, 5vw, 58px);
  height: clamp(42px, 5vw, 58px);
  border-radius: 50%;
  background: linear-gradient(145deg, #5A2E0A 0%, #3A1C04 100%);
  border: 1px solid rgba(198,168,91,.54);
  color: #FCF5E0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.7rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  z-index: 12;
  transition: background .28s, border-color .28s, transform .22s, opacity .28s, box-shadow .28s;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    inset 0 1px 0 rgba(255,220,140,.22),
    0 4px 12px rgba(40,20,8,.36);
}
[data-theme="light"] .bk-nav {
  background: linear-gradient(145deg, #A6743A 0%, #6E3F12 100%);
  border-color: rgba(198,168,91,.62);
  color: #FCF5E0;
}
.bk-nav:hover {
  background: linear-gradient(145deg, #C8102E 0%, #9A0D24 100%);
  border-color: rgba(255,220,140,.74);
  transform: translateY(-50%) scale(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,220,140,.32),
    0 6px 18px rgba(200,16,46,.36);
}
.bk-nav:disabled {
  opacity: .26;
  cursor: not-allowed;
  transform: translateY(-50%) scale(1);
}

.bk-prev { left: clamp(-18px, -2vw, -12px); }
.bk-next { right: clamp(-18px, -2vw, -12px); }

@media (min-width: 901px) {
  .bk-prev { left: -30px; }
  .bk-next { right: -30px; }
}


/* ═════════════════════════════════════════════════════════════════════════
   19. META — Numérotation chic
   ═════════════════════════════════════════════════════════════════════════ */
.bk-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: clamp(24px, 3.5vw, 40px);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: .96rem;
  letter-spacing: .12em;
  color: var(--tx3);
  text-transform: uppercase;
  font-style: italic;
}
.bk-progress {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
/* Page courante — numéro mis en valeur */
#bkProgCurr {
  color: var(--r);
  font-weight: 500;
  font-size: 1.10rem;
  font-style: normal;
}
[data-theme="light"] #bkProgCurr {
  color: #9E0B0F;
}
.bk-sep {
  opacity: .42;
}
.bk-hint {
  font-size: .74rem;
  opacity: .54;
  letter-spacing: .14em;
}
.bk-hint kbd {
  display: inline-block;
  padding: 2px 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(198,168,91,.22);
  border-radius: 3px;
  font-family: 'Outfit', sans-serif;
  font-size: .70rem;
  margin: 0 2px;
}
[data-theme="light"] .bk-hint kbd {
  background: rgba(120,72,28,.06);
  border-color: rgba(120,72,28,.32);
  color: var(--tx2);
}


/* ═════════════════════════════════════════════════════════════════════════
   20. PROGRESS BAR — Filet doré
   ═════════════════════════════════════════════════════════════════════════ */
.bk-progressbar {
  position: relative;
  width: clamp(220px, 28%, 380px);
  height: 1.5px;
  background: rgba(120,72,28,.20);
  margin: 22px auto 0;
  overflow: hidden;
  border-radius: 1px;
}
.bk-progressbar-fill {
  height: 100%;
  background: linear-gradient(90deg,
    rgba(220,180,100,.86) 0%,
    var(--r) 50%,
    rgba(120,8,18,.92) 100%);
  transition: width .8s cubic-bezier(.45,.05,.25,.95);
  box-shadow: 0 0 8px rgba(220,180,100,.42);
}


/* ═════════════════════════════════════════════════════════════════════════
   21. ANIMATIONS
   ═════════════════════════════════════════════════════════════════════════ */

/* Flip page droite (next) : rotation autour du bord gauche (spine) */
@keyframes pageFlipRight {
  0%   { transform: rotateY(0deg);    box-shadow: -2px 0 8px rgba(0,0,0,.06); }
  50%  {                              box-shadow: -16px 0 32px rgba(0,0,0,.40); }
  100% { transform: rotateY(-180deg); box-shadow: -8px 0 16px rgba(0,0,0,.20); }
}
/* Flip page gauche (prev) : rotation autour du bord droit (spine) */
@keyframes pageFlipLeft {
  0%   { transform: rotateY(-180deg); box-shadow: 2px 0 8px rgba(0,0,0,.06); }
  50%  {                              box-shadow: 16px 0 32px rgba(0,0,0,.40); }
  100% { transform: rotateY(0deg);    box-shadow: 8px 0 16px rgba(0,0,0,.20); }
}

/* Animation d'entrée — fade-in doux comme on pose le carnet */
@keyframes bookEntrance {
  from { opacity: 0; transform: translateY(24px) scale(.96) rotateX(-4deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); }
}

/* Flottement idle — subtil, comme une respiration */
@keyframes bookIdleFloat {
  0%, 100% {
    transform: perspective(1400px) rotateY(-3deg) translateY(0px);
  }
  50% {
    transform: perspective(1400px) rotateY(-2.2deg) translateY(-7px);
  }
}

/* Flip suivant : anime la demi-page droite */
.bk-spread.bk-turning-next .bk-half--right {
  animation: pageFlipRight .7s cubic-bezier(.45,.05,.25,.95) forwards;
  z-index: 8;
}
/* Flip précédent : anime la demi-page gauche */
.bk-spread.bk-turning-prev .bk-half--left {
  animation: pageFlipLeft .7s cubic-bezier(.45,.05,.25,.95) forwards;
  z-index: 8;
}


/* ═════════════════════════════════════════════════════════════════════════
   21bis. FEUILLE TOURNANTE — vrai feuilletage (2 faces, pivot reliure)
   Injectée par le JS (buildLeaf). Pivote en 3D autour de la reliure pendant
   que la page révélée est déjà rendue dessous → aucun "rechargement", le
   contenu se dévoile progressivement et reste visible toute la rotation.
   ═════════════════════════════════════════════════════════════════════════ */
.bk-leaf {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  z-index: 9;                 /* au-dessus des demi-pages (1/2), sous la reliure (10/11) */
  will-change: transform;
  pointer-events: none;
}
/* La feuille "next" recouvre la page droite et pivote depuis la reliure (bord gauche). */
.bk-leaf--next { right: 0; transform-origin: left center; }
/* La feuille "prev" recouvre la page gauche et pivote depuis la reliure (bord droit). */
.bk-leaf--prev { left: 0;  transform-origin: right center; }

.bk-leaf-face {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #F8F1DA;        /* fallback papier, masqué par la photo plein cadre */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* La face arrière est pré-tournée : lisible une fois la feuille à 180°. */
.bk-leaf-face--back { transform: rotateY(180deg); }

/* La face occupe toute la feuille ; la photo y est plein cadre comme une page. */
.bk-leaf-face .bk-page { width: 100%; height: 100%; }

/* Ombre de reliure (gutter) sur chaque face, du bon côté (côté couture). */
.bk-leaf--next .bk-leaf-face--front,
.bk-leaf--prev .bk-leaf-face--back {
  box-shadow: inset 64px 0 72px -36px rgba(0,0,0,.5);   /* reliure à gauche */
}
.bk-leaf--next .bk-leaf-face--back,
.bk-leaf--prev .bk-leaf-face--front {
  box-shadow: inset -64px 0 72px -36px rgba(0,0,0,.5);  /* reliure à droite */
}

/* Voile d'ombre qui renforce la courbure quand la feuille se soulève. */
.bk-leaf-shade {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateZ(2px);   /* devant la face avant pendant la 1re moitié du tour */
  background: linear-gradient(105deg, rgba(0,0,0,.30), rgba(0,0,0,.06) 40%, transparent 70%);
}
.bk-leaf--prev .bk-leaf-shade {
  background: linear-gradient(255deg, rgba(0,0,0,.30), rgba(0,0,0,.06) 40%, transparent 70%);
}

/* Déclenchement (classe bk-leaf--go posée au frame suivant par le JS) */
.bk-leaf--next.bk-leaf--go { animation: leafTurnNext .72s cubic-bezier(.42,.04,.30,.98) forwards; }
.bk-leaf--prev.bk-leaf--go { animation: leafTurnPrev .72s cubic-bezier(.42,.04,.30,.98) forwards; }
.bk-leaf--go .bk-leaf-shade { animation: leafShade .72s ease-in-out forwards; }

@keyframes leafTurnNext { from { transform: rotateY(0deg); }   to { transform: rotateY(-180deg); } }
@keyframes leafTurnPrev { from { transform: rotateY(0deg); }   to { transform: rotateY(180deg); } }
@keyframes leafShade    { 0% { opacity: 0; } 40% { opacity: .9; } 70% { opacity: .55; } 100% { opacity: 0; } }

/* ── RABAT DE COUVERTURE (ouverture du livre) ─────────────────
   Feuille de couverture posée sur .bk (non clippée), taille portrait
   figée par le JS. Pivote autour de la reliure (charnière gauche). */
.bk-cover-leaf {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotateY(0deg);
  transform-origin: left center;
  transform-style: preserve-3d;
  z-index: 20;                 /* au-dessus de tout pendant l'ouverture */
  will-change: transform;
  pointer-events: none;
  border-radius: 3px 6px 6px 3px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
}
.bk-cover-leaf.bk-cover-go { animation: coverOpen .82s cubic-bezier(.42,.04,.22,1) forwards; }
.bk-cover-leaf.bk-cover-go .bk-leaf-shade { animation: leafShade .82s ease-in-out forwards; }

@keyframes coverOpen {
  from { transform: translateY(-50%) rotateY(0deg); }
  to   { transform: translateY(-50%) rotateY(-162deg); }
}

/* Accessibilité — mouvement réduit : tours quasi instantanés, pas de voile. */
@media (prefers-reduced-motion: reduce) {
  .bk-leaf--next.bk-leaf--go,
  .bk-leaf--prev.bk-leaf--go,
  .bk-cover-leaf.bk-cover-go { animation-duration: .001s; }
  .bk-leaf-shade { display: none; }
}

/* Entrée du livre une fois chargé */
.bk-stage.bk-loaded .bk {
  animation: bookEntrance 1.6s cubic-bezier(.22,.7,.36,1) both;
}
/* Livre fermé au démarrage : entrée + flottement infini */
.bk-stage.bk-loaded .bk.bk--closed {
  animation:
    bookEntrance 1.6s cubic-bezier(.22,.7,.36,1) both,
    bookIdleFloat 7s ease-in-out 1.6s infinite;
}
/*
 * Retour sur la couverture après ouverture (flag .bk--was-opened posé par JS).
 * L'animation d'entrée (bookEntrance) NE DOIT PAS se rejouer — elle causerait
 * un zoom parasite (opacity 0→1 + scale .96→1 combiné à la transition
 * aspect-ratio qui rétrécit le livre).
 * On laisse seulement le flottement idle reprendre.
 */
.bk-stage.bk-loaded .bk.bk--closed.bk--was-opened {
  animation: bookIdleFloat 7s ease-in-out 0s infinite;
}


/* ═════════════════════════════════════════════════════════════════════════
   22. INTÉGRATION SECTION — .book-zone (fond de la section 25 ans)
   ═════════════════════════════════════════════════════════════════════════ */
.book-zone {
  position: relative;
  padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 70px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(60,30,12,.22), transparent 70%),
    radial-gradient(ellipse 60% 60% at 20% 80%, rgba(40,18,4,.12), transparent 65%);
}
[data-theme="light"] .book-zone {
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(198,168,91,.14), transparent 70%),
    radial-gradient(ellipse 60% 60% at 20% 80%, rgba(160,120,60,.08), transparent 65%);
}
/* Texture tartan nappe en fond */
.book-zone::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(192,24,42,.09) 0px, rgba(192,24,42,.09) 8px,
      transparent 8px, transparent 24px,
      rgba(192,24,42,.05) 24px, rgba(192,24,42,.05) 32px,
      transparent 32px, transparent 48px),
    repeating-linear-gradient(90deg,
      rgba(192,24,42,.09) 0px, rgba(192,24,42,.09) 8px,
      transparent 8px, transparent 24px,
      rgba(192,24,42,.05) 24px, rgba(192,24,42,.05) 32px,
      transparent 32px, transparent 48px);
  background-size: 48px 48px;
  opacity: .60;
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] .book-zone::before { opacity: .35; }
.book-zone > * { position: relative; z-index: 1; }


/* ═════════════════════════════════════════════════════════════════════════
   23. MOBILE — Double-page conservée (vrai livre), feuille tournante active
   ─────────────────────────────────────────────────────────────────────────
   IMPORTANT : on NE masque PLUS la page gauche. Depuis le passage en vrai
   livre (2 pages par double-page), la masquer rendait invisibles la moitié
   des témoignages. On garde donc la double-page complète, ajustée à l'écran.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .bk,
  .bsw-book-col .bk {
    aspect-ratio: var(--bk-ar-spread, 2034/1490);  /* double-page conservée */
    max-width: 96vw;
    max-height: none;
    transition: transform .6s ease;
  }
  /* Sur mobile : couverture pilotée par la LARGEUR (écran étroit et haut) —
     on neutralise le pilotage par hauteur (vh) du desktop. */
  .bk.bk--closed,
  .bsw-book-col .bk.bk--closed {
    transform: none;
    width: min(330px, 84vw);
    height: auto;
    max-width: min(330px, 84vw);
    max-height: none;
    aspect-ratio: var(--bk-ar-cover, 3/4);
  }
  .bk.bk--closed:hover { transform: none; }

  /* Reliure conservée (réalisme) mais affinée à l'échelle du mobile. */
  .bk-spread::before { width: 20px; }

  /* Boutons sous le livre */
  .bk-prev, .bk-next {
    bottom: -68px;
    top: auto;
    transform: none;
  }
  .bk-nav:hover    { transform: scale(1.08); }
  .bk-nav:disabled { transform: scale(1); }
  .bk-prev { left: 30%; }
  .bk-next { right: 30%; }
  .bk-meta { margin-top: 88px; }
}


/* ═════════════════════════════════════════════════════════════════════════
   24. INTÉGRATION IMMERSIVE — Livre pleine largeur dans .bsw-book-col
   Sizing override massif : 560px fermé / 1240px ouvert (grand format).
   ═════════════════════════════════════════════════════════════════════════ */
.bsw-book-col #histBook {
  position: relative;
  z-index: 2;
  width: 100%;
}
.bsw-book-col .bk-stage {
  padding: clamp(16px, 3vw, 40px) 0 clamp(28px, 4vw, 48px);
  max-width: none;
  width: 100%;
}
/* Désactive le halo de bougie interne (le glow vient de .bsw-book-glow) */
.bsw-book-col .bk-stage::before { display: none; }

/* Ouvert : double-page plus haute (lisibilité) — limite de hauteur relevée. */
.bsw-book-col .bk {
  max-width: 1240px;
  max-height: 90vh;
}
/*
 * Fermé (format immersif) : HAUTEUR pilotée par le viewport → la couverture
 * est TOUJOURS entièrement visible, sans scroll, à l'identique en light/dark.
 * width:auto + aspect-ratio → la largeur découle de la hauteur (aucune
 * distorsion, aucune bande). 747px ≈ 560 × (1448/1086) = plafond grands écrans.
 */
.bsw-book-col .bk.bk--closed {
  height: min(80vh, 747px);
  width: auto;
  max-width: 92vw;
  max-height: none;
}

/* Boutons dégagés autour du grand livre */
.bsw-book-col .bk-prev { left: clamp(-22px, -1.5vw, -10px); }
.bsw-book-col .bk-next { right: clamp(-22px, -1.5vw, -10px); }
@media (min-width: 901px) {
  .bsw-book-col .bk-prev { left: -32px; }
  .bsw-book-col .bk-next { right: -32px; }
}
@media (min-width: 1320px) {
  .bsw-book-col .bk-prev { left: -56px; }
  .bsw-book-col .bk-next { right: -56px; }
}

/* Meta / progress — élégants sous le grand livre */
.bsw-book-col .bk-meta {
  margin-top: clamp(28px, 3vw, 44px);
  flex-wrap: wrap;
  gap: 22px;
}
.bsw-book-col .bk-progressbar {
  margin-top: 18px;
  width: clamp(260px, 32%, 480px);
}

/* Mobile dans la vitrine */
@media (max-width: 860px) {
  .bsw-book-col .bk-prev { left: 28%; bottom: -58px; top: auto; }
  .bsw-book-col .bk-next { right: 28%; bottom: -58px; top: auto; }
  .bsw-book-col .bk-meta { margin-top: 72px; }
}


/* ═════════════════════════════════════════════════════════════════════════
   4ᵉ DE COUVERTURE — Suppression des marges blanches du scan physique
   ─────────────────────────────────────────────────────────────────────────
   DIAGNOSTIC : l'image PNG (1086×1448) a exactement le même ratio que le
   conteneur (--bk-ar-cover = 1086/1448). Avec object-fit:cover il ne peut
   pas y avoir de fond CSS visible. La bordure blanche vient des PIXELS BLANCS
   du scan lui-même — le livre a été photographié avec un espace blanc autour.
   CORRECTION : zoom discret (scale 1.035 ≈ 1.75 % par côté) qui « déborde »
   légèrement hors du conteneur ; overflow:hidden de .bk-page--photo clippe
   l'excédent. Les marges du scan disparaissent, l'image du livre remplit
   exactement la page. Seul .bk-half--back est ciblé (état exclusif de la
   4ᵉ de couverture) — aucune autre page n'est affectée.
   ═════════════════════════════════════════════════════════════════════════ */

/* Fond sombre de secours : si un sous-pixel de marge restait visible,
   il apparaîtrait comme le navy du livre (pas comme du blanc/crème). */
.bk-half--back .bk-page--photo {
  background: #0C0D15;
}

/* Zoom discret : rogne les marges blanches du scan sans recadrer le contenu */
.bk-half--back .bk-photo-img {
  transform: scale(1.035);
  transform-origin: center center;
}