/* ================= SCÈNE DU GRIMOIRE ================= */
.grimoire-section {
  /* géométrie des pages — pilotée par le JS selon la taille d'écran */
  --page-w: 560px;
  --page-h: 780px;
  --page-mx: 52px;
  --page-mt: 44px;
  --page-inner-h: 660px;
  --gutter: 70px;

  background: #fff;
  padding: 26px 0 40px 0;
  overflow: hidden;
}

.grimoire-titre {
  font-family: "IM Fell English SC", serif;
  color: #281b07;
  text-align: center;
  font-size: 2.3rem;
  margin-bottom: 4px;
}

.grimoire-sous-titre {
  font-family: "IM Fell English", serif;
  font-style: italic;
  color: #6d5325;
  text-align: center;
  font-size: 1.05rem;
  margin-bottom: 14px;
}

/* --------- Barre de recherche --------- */
.recherche-sort {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.recherche-sort input {
  width: min(420px, 88vw);
  background: linear-gradient(180deg, #efe2bd, #e2d0a2);
  border: 2px solid #6b501f;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18), inset 0 0 14px rgba(90, 60, 20, .25);
  font-family: "IM Fell English", serif;
  font-style: italic;
  color: #3b2a15;
  font-size: 1.05rem;
  padding: 6px 14px;
  outline: none;
}

.recherche-sort input::placeholder { color: #8a7148; }
.recherche-sort input:focus { border-color: #b8912f; box-shadow: 0 0 0 3px rgba(184, 145, 47, .35); }

/* --------- Mise à l'échelle --------- */
.book-scene {
  position: relative;
}

/* fenêtre d'affichage : en mobile elle ne laisse voir qu'une page du livre */
.book-viewport {
  position: relative;
  margin: 0 auto;
  z-index: 1;
}

.book-scale {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  transition: transform .45s ease;
}

.book-wrap {
  width: calc(var(--page-w) * 2);
  height: var(--page-h);
  position: relative;
  perspective: 2800px;
}

/* ================= LE LIVRE ================= */
.book {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .9s ease;
}

.book.ferme-avant { transform: translateX(-25%); }
.book.ferme-arriere { transform: translateX(25%); }

/* ombre portée du livre */
.book::before {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -26px;
  height: 46px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .45), transparent 70%);
  z-index: 0;
}

.sheet {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--page-w);
  height: var(--page-h);
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.35, .1, .25, 1);
}

.sheet.flipped { transform: rotateY(-180deg); }

.page {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  border-radius: 2px 10px 10px 2px;
}

.page.back {
  transform: rotateY(180deg);
  border-radius: 10px 2px 2px 10px;
}

/* --------- Parchemin --------- */
.parchemin {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.055'/></svg>"),
    radial-gradient(ellipse at 18% 12%, rgba(122, 86, 38, .13), transparent 46%),
    radial-gradient(ellipse at 84% 86%, rgba(110, 74, 32, .16), transparent 42%),
    radial-gradient(ellipse at 70% 25%, rgba(133, 94, 40, .09), transparent 38%),
    radial-gradient(ellipse at 50% 45%, rgba(255, 250, 232, .55), transparent 65%),
    linear-gradient(105deg, #e6d5aa, #f1e4c0 32%, #e9dab2 64%, #e0cfa2);
  box-shadow: inset 0 0 60px rgba(96, 66, 26, .38), inset 0 0 8px rgba(80, 52, 18, .28);
  color: #3a2915;
}

/* taches d'usure */
.parchemin::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 14%, rgba(101, 67, 24, .10) 0 26px, transparent 42px),
    radial-gradient(circle at 12% 78%, rgba(90, 58, 20, .12) 0 18px, transparent 34px),
    radial-gradient(circle at 55% 96%, rgba(101, 67, 24, .08) 0 30px, transparent 48px);
  filter: blur(1px);
}

/* ombre côté reliure */
.page.front .parchemin-ombre,
.page.front::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: var(--gutter);
  background: linear-gradient(90deg, rgba(60, 38, 12, .38), rgba(60, 38, 12, .12) 45%, transparent);
  pointer-events: none;
}

.page.back::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: var(--gutter);
  background: linear-gradient(-90deg, rgba(60, 38, 12, .38), rgba(60, 38, 12, .12) 45%, transparent);
  pointer-events: none;
}

/* --------- Couverture cuir --------- */
.cuir {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.12'/></svg>"),
    radial-gradient(ellipse at 50% 40%, rgba(120, 75, 28, .35), transparent 75%),
    linear-gradient(120deg, #2c1b09, #402611 45%, #2a1a09 90%);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .75), inset 0 0 12px rgba(0, 0, 0, .6);
  color: #d8b96a;
}

.couverture-cadre {
  position: absolute;
  inset: 24px;
  border: 3px double #9a7a33;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(216, 185, 106, .18), inset 0 0 12px rgba(216, 185, 106, .12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
}

.couverture-coin {
  position: absolute;
  font-size: 26px;
  color: #b8912f;
  text-shadow: 0 0 6px rgba(216, 185, 106, .5);
  line-height: 1;
}

.coin-hg { top: 8px; left: 10px; }
.coin-hd { top: 8px; right: 10px; }
.coin-bg { bottom: 8px; left: 10px; }
.coin-bd { bottom: 8px; right: 10px; }

.couverture-titre {
  font-family: "IM Fell English SC", serif;
  font-size: 58px;
  line-height: 1.12;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .9), 0 0 18px rgba(216, 185, 106, .25);
  margin: 18px 0;
}

.couverture-orne {
  font-size: 30px;
  color: #b8912f;
  letter-spacing: 12px;
}

.couverture-marque {
  font-family: "IM Fell English", serif;
  font-style: italic;
  font-size: 20px;
  color: #a8905e;
  margin-top: 26px;
}

.couverture-hint {
  position: absolute;
  bottom: 40px;
  left: 0; right: 0;
  text-align: center;
  font-family: "IM Fell English", serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(216, 185, 106, .65);
  animation: pulse-hint 2.4s ease-in-out infinite;
}

@keyframes pulse-hint {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

/* --------- Contenu des pages --------- */
.page-inner {
  position: relative;
  height: var(--page-inner-h);
  margin: var(--page-mt) var(--page-mx) 0 var(--page-mx);
  overflow: hidden;
  font-family: "Cormorant Garamond", serif;
}

.page-num {
  position: absolute;
  bottom: 26px;
  left: 0; right: 0;
  text-align: center;
  font-family: "IM Fell English", serif;
  font-style: italic;
  font-size: 15px;
  color: #6d5325;
}

.blk { padding-bottom: 14px; }

.fam-titre {
  font-family: "IM Fell English SC", serif;
  font-size: 33px;
  text-align: center;
  line-height: 1.15;
  padding-top: 2px;
  text-shadow: 0 1px 0 rgba(255, 245, 220, .6);
}

.fam-orne {
  text-align: center;
  font-size: 19px;
  letter-spacing: 9px;
  margin-top: 2px;
  opacity: .85;
}

.fam-suite {
  font-family: "IM Fell English", serif;
  font-style: italic;
  font-size: 15px;
  text-align: center;
  color: #7a5f2c;
  padding-bottom: 10px;
}

.sec-titre {
  font-family: "IM Fell English SC", serif;
  font-size: 21.5px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  margin-bottom: 6px;
}

.sec-intro {
  font-size: 16px;
  font-style: italic;
  color: #57401f;
  line-height: 1.3;
  margin-bottom: 6px;
}

.sort { position: relative; }

.sort-entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.sort-nom {
  font-weight: 700;
  font-size: 19px;
  font-variant: small-caps;
  letter-spacing: .4px;
  color: #33240f;
}

.sort-cout {
  font-family: "IM Fell English", serif;
  font-size: 15px;
  color: #7c1f14;
  white-space: nowrap;
  flex-shrink: 0;
}

.sort-desc {
  font-size: 16.5px;
  line-height: 1.32;
  color: #46331a;
}

.sort-desc p { margin: 0; }

.sort.sort-hit {
  background: rgba(216, 172, 60, .35);
  outline: 2px solid rgba(155, 108, 16, .65);
  outline-offset: 3px;
  border-radius: 3px;
  transition: background 1.2s ease, outline-color 1.2s ease;
}

/* grilles élémentaires */
.grille {
  display: grid;
  gap: 2px;
  justify-content: center;
  margin: 7px 0 3px 0;
}

.grille-foudre { grid-template-columns: repeat(5, 40px); }
.grille-vent { grid-template-columns: repeat(5, 52px); }

.grille .case {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 700;
  border: 1px solid rgba(90, 62, 22, .55);
  background: rgba(255, 248, 228, .45);
  color: #4a3315;
}

.grille .case.vide { border: none; background: transparent; }
.grille .case.centre { background: rgba(158, 43, 37, .28); border-color: #7c1f14; }

.grille-legende {
  text-align: center;
  font-size: 13.5px;
  font-style: italic;
  color: #6d5325;
  margin-bottom: 4px;
}

/* --------- Sommaire --------- */
.sommaire-titre {
  font-family: "IM Fell English SC", serif;
  font-size: 38px;
  text-align: center;
  color: #4a3315;
  padding-top: 20px;
}

.sommaire-intro {
  font-family: "IM Fell English", serif;
  font-style: italic;
  font-size: 16px;
  text-align: center;
  color: #6d5325;
  padding: 4px 10px 22px 10px;
  line-height: 1.35;
}

.sommaire-ligne {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 21px;
  padding: 7px 4px;
  cursor: pointer;
  color: #3a2915;
  text-decoration: none;
}

.sommaire-ligne:hover .sommaire-nom { color: #7c1f14; }

.sommaire-nom {
  font-variant: small-caps;
  font-weight: 700;
  white-space: nowrap;
}

.sommaire-points {
  flex: 1;
  border-bottom: 2px dotted rgba(90, 62, 22, .55);
  transform: translateY(-4px);
}

.sommaire-page {
  font-family: "IM Fell English", serif;
  font-size: 17px;
  color: #6d5325;
}

.sommaire-pastille {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, .4);
}

/* --------- Pages de garde --------- */
.garde-contenu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px;
  font-family: "IM Fell English", serif;
  font-style: italic;
  color: #6d5325;
  font-size: 19px;
  line-height: 1.6;
}

.garde-orne { font-size: 30px; letter-spacing: 10px; margin: 18px 0; font-style: normal; }

/* --------- Marque-pages --------- */
.bookmarks {
  position: absolute;
  top: 52px;
  right: -34px;
  width: 34px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 0;
  transition: opacity .5s ease;
}

.book.ferme-avant .bookmarks,
.book.ferme-arriere .bookmarks { opacity: 0; pointer-events: none; }

.bookmark {
  width: 58px;
  height: 78px;
  margin-left: -24px;
  border: none;
  clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%);
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(255, 248, 230, .95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .3);
  cursor: pointer;
  transition: transform .25s ease;
  padding: 0;
}

.bookmark:hover { transform: translateX(7px); }

/* marque-pages en barre horizontale sous le livre (mobile) */
.bookmarks-bar { display: none; }

.bookmarks-bar .bookmarks {
  position: static;
  width: auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  opacity: 1;
}

.bookmarks-bar .bookmark {
  width: auto;
  height: auto;
  margin-left: 0;
  padding: 5px 12px;
  clip-path: none;
  border-radius: 4px;
  writing-mode: horizontal-tb;
  font-size: 12px;
}

.bookmarks-bar .bookmark:hover { transform: none; }

/* --------- Flèches de navigation --------- */
.nav-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid #6b501f;
  background: linear-gradient(180deg, #efe2bd, #dcc998);
  color: #4a3315;
  font-size: 30px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .35);
  transition: transform .2s ease, opacity .3s ease;
  z-index: 30;
  user-select: none;
  padding: 0 0 4px 0;
}

.nav-fleche:hover { transform: translateY(-50%) scale(1.12); }
.nav-fleche:disabled { opacity: .25; cursor: default; transform: translateY(-50%); }

/* position de repli : le JS les recale sur les bords du livre selon l'échelle */
.fleche-gauche { left: 6px; }
.fleche-droite { right: 6px; }

/* Barre des flèches sous le livre : utilisée en mobile seulement,
   où les flèches recouvriraient le texte des pages. */
.nav-bar { display: none; }

.grimoire-aide {
  text-align: center;
  font-family: "IM Fell English", serif;
  font-style: italic;
  color: #7a6340;
  font-size: .95rem;
  margin-top: 30px;
  padding: 0 12px;
}

/* coin de page cliquable (indice visuel) */
.coin-corne {
  position: absolute;
  bottom: 0;
  width: 46px;
  height: 46px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}

.page:hover .coin-corne { opacity: 1; }

.page.front .coin-corne {
  right: 0;
  background: linear-gradient(315deg, rgba(70, 46, 14, .30) 0 50%, transparent 50%);
}

.page.back .coin-corne {
  left: 0;
  background: linear-gradient(45deg, rgba(70, 46, 14, .30) 0 50%, transparent 50%);
}

/* ================= MOBILE : livre en page unique ================= */
@media (max-width: 899.98px) {
  .grimoire-section { padding: 16px 0 28px 0; }
  .book-viewport { overflow: hidden; }
  .grimoire-titre { font-size: 1.6rem; padding: 0 12px; }
  .grimoire-sous-titre { font-size: .95rem; padding: 0 14px; }
  .recherche-sort { margin-bottom: 14px; }

  .bookmarks-bar { display: flex; justify-content: center; margin: 14px auto 0; padding: 0 10px; }

  /* les flèches quittent les bords du livre pour une barre sous celui-ci :
     elles ne recouvrent plus le texte et tombent sous le pouce */
  .nav-bar {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 14px;
  }

  .nav-bar .nav-fleche {
    position: static;
    transform: none;
    width: 52px;
    height: 52px;
    font-size: 27px;
  }

  .nav-bar .nav-fleche:hover { transform: none; }
  .nav-bar .nav-fleche:disabled { transform: none; }

  .couverture-cadre { inset: 14px; padding: 16px; }
  .couverture-titre { font-size: 34px; margin: 10px 0; }
  .couverture-orne { font-size: 21px; letter-spacing: 8px; }
  .couverture-marque { font-size: 15px; margin-top: 16px; }
  .couverture-hint { bottom: 22px; font-size: 13px; }
  .couverture-coin { font-size: 18px; }

  .garde-contenu { padding: 26px; font-size: 16px; }
  .garde-orne { font-size: 24px; margin: 12px 0; }

  .sommaire-titre { font-size: 30px; padding-top: 8px; }
  .sommaire-intro { font-size: 14px; padding-bottom: 12px; }
  .sommaire-ligne { font-size: 17px; padding: 5px 2px; }
  .sommaire-page { font-size: 15px; }

  .fam-titre { font-size: 26px; }
  .fam-orne { font-size: 16px; letter-spacing: 7px; }
  .sec-titre { font-size: 19px; }

  .grimoire-aide { margin-top: 20px; font-size: .85rem; }

  /* --------- Allègement du rendu mobile (maximal) ---------
     Un GPU de téléphone peine là où celui d'un PC (même en « vue mobile »)
     ne bronche pas. On réduit donc au strict nécessaire, en mobile seulement,
     le coût de peinture de chaque page d'une scène 3D animée :
       - plus de filtre SVG feTurbulence (bruit du parchemin et du cuir) ;
       - dégradés ramenés à un dégradé de base (+ une lueur centrale douce) ;
       - taches d'usure supprimées : c'est un calque plein-page DE PLUS par
         feuille, invisible dans le feuilletage mais cher à composer ;
       - ombres réduites à un seul inset au flou modéré.
     Le PC garde le rendu riche complet. */
  .parchemin {
    background:
      radial-gradient(ellipse at 50% 45%, rgba(255, 250, 232, .4), transparent 70%),
      linear-gradient(105deg, #e6d5aa, #f1e4c0 40%, #e4d1a4);
    box-shadow: inset 0 0 14px rgba(96, 66, 26, .3);
  }

  .parchemin::before { display: none; }

  .cuir {
    background: linear-gradient(120deg, #2c1b09, #402611 45%, #2a1a09 90%);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .7);
  }
}