/* livre3d.css — habillage du module livre3d.js (charte « Mémorial contemporain »).
   Les couleurs HÉRITENT des jetons du thème (--encre, --or-fonce, --soleil, --r-bouton…) ; les valeurs
   après la virgule ne servent que hors du site (démo). Le module hérite aussi de la police de la page.
   Angles droits partout (charte : --r-bouton: 0, « on n'arrondit que ce qui se touche »). */
.livre3d {
  --livre3d-encre: var(--encre, #15202B);
  /* 5.2.10 (audit DA 6) : plus de blanc translucide ni de bord gris ; même bouton que .papier a.action du site */
  --livre3d-trait: rgba(122, 90, 30, .55);
  --livre3d-fond-bouton: transparent;
  --livre3d-survol-fond: var(--encre, #15202B);
  --livre3d-survol-texte: var(--papier, #FAF7F1);
  --livre3d-accent: var(--or-fonce, #7A5A1E);   /* or foncé, AA sur papier */
  --livre3d-focus: var(--soleil, #F2B01E);      /* jaune soleil */
  --livre3d-rayon: var(--r-bouton, 0);
  /* le cadre suit la forme de l'objet : fermé (portrait), ouvert (double page, paysage), loupe (une page) */
  --livre3d-ratio: 1 / 1;
  --livre3d-ratio-ouvert: 4 / 3;
  --livre3d-ratio-loupe: 1 / 1;
  color: var(--livre3d-encre);
  font: inherit;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.livre3d--sombre {
  --livre3d-encre: var(--lin, #E7E0D2);
  --livre3d-trait: rgba(200, 161, 90, .55);
  --livre3d-fond-bouton: transparent;
  --livre3d-accent: var(--or-clair, #DDBB74);
  --livre3d-survol-fond: var(--lin, #E7E0D2);
  --livre3d-survol-texte: var(--nuit, #0B1826);
}
.livre3d__scene {
  position: relative;
  width: 100%;
  aspect-ratio: var(--livre3d-ratio);
  max-height: 82vh;
}
/* Téléphone : même cadre carré fermé et ouvert. Passer du portrait au paysage à l'ouverture faisait remonter les
   boutons d'environ 120 px et sortir le livre de l'écran (revue visuelle du 25/09/2026, défaut 5) ; ouvert, la double
   page reste cadrée sur la largeur, donc à la même taille. */
@media (max-width: 600px) { .livre3d { --livre3d-ratio: 1 / 1; --livre3d-ratio-ouvert: 1 / 1; --livre3d-ratio-loupe: 3 / 4; } }
/* le changement de rapport est déclenché par un geste (ouvrir, loupe) : il ne compte pas dans le CLS */
.livre3d--ouvert .livre3d__scene { aspect-ratio: var(--livre3d-ratio-ouvert); }
.livre3d--ouvert.livre3d--loupe .livre3d__scene { aspect-ratio: var(--livre3d-ratio-loupe); }
.livre3d__canvas {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  display: block; touch-action: pan-y; cursor: grab; outline: none; border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}
.livre3d__canvas:active { cursor: grabbing; }
.livre3d__canvas:focus-visible { box-shadow: 0 0 0 3px var(--livre3d-focus); }

/* image fixe : visible tant que la 3D n'est pas prête, et en repli sans WebGL 2 */
.livre3d__repli {
  position: absolute; inset: 6% 18%; width: 64%; height: 88%;
  object-fit: contain; filter: drop-shadow(0 18px 22px rgba(40, 28, 16, .28));
}
.livre3d--pret .livre3d__repli { visibility: hidden; }
.livre3d--repli .livre3d__repli { visibility: visible; }
.livre3d--repli .livre3d__canvas, .livre3d--repli .livre3d__commandes, .livre3d--repli .livre3d__aide { display: none; }

.livre3d__commandes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.livre3d__bouton {
  font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.2; color: inherit;
  min-height: 44px; min-width: 44px; padding: 10px 18px;
  background: var(--livre3d-fond-bouton); border: 1px solid var(--livre3d-trait); border-radius: var(--livre3d-rayon);
  cursor: pointer; transition: border-color .2s, background-color .2s;
}
.livre3d__bouton:hover:not(:disabled) { background: var(--livre3d-survol-fond); border-color: var(--livre3d-survol-fond); color: var(--livre3d-survol-texte); }
.livre3d__bouton:focus-visible { outline: 3px solid var(--livre3d-focus); outline-offset: 2px; }
.livre3d__bouton:disabled { opacity: .38; cursor: default; }
.livre3d__bouton--prec, .livre3d__bouton--suiv { font-size: 1.4rem; padding: 6px 0; width: 44px; }
.livre3d__bouton--ouvrir { border-color: var(--livre3d-accent); font-weight: 600; min-width: 96px; }
.livre3d__bouton[aria-pressed="true"] { border-color: var(--livre3d-accent); }
.livre3d--charge .livre3d__bouton--ouvrir { opacity: .6; }
.livre3d__legende { margin: 0; font-size: .875rem; text-align: center; min-height: 1.4em; color: var(--livre3d-accent); }
.livre3d__aide { margin: 0; font-size: .8125rem; text-align: center; opacity: .75; max-width: 46ch; min-height: 2.9em; }

.livre3d:fullscreen { background: #0E2233; padding: 16px; align-content: center;
  --livre3d-encre: #E7E0D2; --livre3d-trait: rgba(200,161,90,.55); --livre3d-fond-bouton: transparent; --livre3d-accent: #DDBB74;
  --livre3d-survol-fond: #E7E0D2; --livre3d-survol-texte: #0B1826; }
.livre3d:fullscreen .livre3d__scene { max-height: calc(100vh - 150px); aspect-ratio: auto; height: calc(100vh - 150px); }

@media (prefers-reduced-motion: reduce) { .livre3d__bouton { transition: none; } }