@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap');
:root{color-scheme:dark;--or:#dfbd80}*{box-sizing:border-box}body{margin:0;background:#0c0b12;color:#f5e9d0;font-family:Georgia,serif}
.bibliotheque{min-height:100vh;padding:28px clamp(16px,5vw,70px) 70px;background:linear-gradient(180deg,#090812b5 0%,#09081280 40%,#090812a8 100%),url('../images/bibliotheque.png') center center/cover fixed}
.intro{text-align:center;max-width:1100px;margin:auto}.retour{display:block;text-align:left;color:#ead2a0;text-decoration:none;font-size:14px}.retour:hover{text-decoration:underline}.surtitre{margin:44px 0 12px;text-transform:uppercase;letter-spacing:.23em;font-size:12px;color:#e5c88e}
h1{font-family:Cinzel,serif;font-size:clamp(28px,4.3vw,51px);font-weight:400;color:#f4dfb5;text-shadow:0 4px 18px #000;margin:0}.accroche{font:italic clamp(20px,2.6vw,28px) 'Cormorant Garamond',serif;text-shadow:0 2px 8px #000}
.rayonnage{max-width:1100px;margin:65px auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,3vw,36px);align-items:stretch}
.livre{position:relative;isolation:isolate;aspect-ratio:3/4.5;min-height:280px;border:7px solid #6d4a2b;border-left-width:16px;border-radius:5px 12px 12px 5px;padding:23px 12px;color:#e9d3a3;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:space-around;text-align:center;box-shadow:inset 7px 0 9px #0009,inset -4px 0 7px #fff2,0 12px 22px #000d,5px 6px 0 #ad9063;transition:transform .25s,filter .25s;font-family:Cinzel,Georgia,serif}
.livre:before{content:"";position:absolute;inset:9px;border:2px solid #caa665;border-radius:2px;pointer-events:none;box-shadow:inset 0 0 0 5px #b48a3d38}.livre:after{content:"";position:absolute;inset:17px;border:1px solid #b8955a77;pointer-events:none}
.bordeaux{background:radial-gradient(ellipse at 70% 35%,#783c49,#2a101b 78%)}.bleu{background:radial-gradient(ellipse at 70% 35%,#345579,#101b32 78%)}.violet{background:radial-gradient(ellipse at 70% 35%,#604475,#24142d 78%)}.vert{background:radial-gradient(ellipse at 70% 35%,#3b6650,#14271f 78%)}
.livre:hover,.livre:focus-visible{transform:translateY(-12px) rotate(-1deg);filter:brightness(1.2);outline:2px solid #f2d89c;outline-offset:5px}
.ornement{font-size:34px;color:#e4c78b}.livre-titre{font-size:clamp(14px,1.45vw,20px);line-height:1.55;text-shadow:0 2px 5px #000}.filet{width:40%;border-top:1px solid #b89a63}.livre-bas{font:italic clamp(13px,1.5vw,18px) 'Cormorant Garamond',serif}
.instruction,footer{text-align:center;color:#eddbb7;text-shadow:0 2px 8px #000}.instruction{margin:30px 0 80px;font-style:italic}footer{font:italic 22px 'Cormorant Garamond',serif}
dialog{padding:0;border:2px solid #ad8753;max-width:min(1050px,94vw);max-height:90vh;overflow:auto;background:#e7d6ac;color:#382719;box-shadow:0 20px 80px #000}dialog::backdrop{background:#05040bcf;backdrop-filter:blur(5px)}
.livre-ouvert{position:relative;display:grid;grid-template-columns:42% 58%;min-height:460px;background:linear-gradient(90deg,#cbb489,#f1e2c2 39%,#ab875b 42%,#f4e6c9 44%,#e5d2a9 100%)}
.page{padding:clamp(24px,4vw,48px)}.page-gauche{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid #9b754e}.page-gauche h2{font:500 clamp(23px,3vw,37px) Cinzel,serif;line-height:1.4}.page-label{letter-spacing:.16em;text-transform:uppercase;font-size:11px}.motif{font-size:48px;color:#92652e}.deco{color:#92652e}.page-droite{font:21px/1.5 'Cormorant Garamond',Georgia,serif;overflow-y:auto;max-height:80vh}.page-droite p{margin:0 0 18px}.page-droite a{color:#644221}.fermer{position:absolute;z-index:2;right:8px;top:5px;background:#39271c;color:#f4dfb7;border:1px solid #8e663d;border-radius:50%;width:34px;height:34px;font-size:24px;cursor:pointer}
@media(max-width:800px){.rayonnage{grid-template-columns:repeat(2,minmax(0,1fr));max-width:600px;gap:26px}.livre{min-height:260px}.livre-titre{font-size:18px}}
@media(max-width:600px){.bibliotheque{background-attachment:scroll}.rayonnage{gap:16px;margin-top:38px}.livre{min-height:220px;padding:18px 7px;border-width:5px;border-left-width:12px}.livre-titre{font-size:clamp(12px,3.6vw,17px)}.ornement{font-size:24px}.livre-ouvert{grid-template-columns:1fr}.page-gauche{min-height:180px;border-right:0;border-bottom:1px solid #9b754e}.page-gauche h2{margin:10px}.page-droite{max-height:55vh}.page{padding:24px}.page-droite{font-size:19px}}
@media(prefers-reduced-motion:reduce){.livre{transition:none}}
/* Cinquième livre : Petites anecdotes */

.livre.cuivre {
  background: radial-gradient(
    ellipse at 70% 35%,
    #a66a58,
    #4a2523 78%
  );
}

/* Liste des anecdotes */

.liste-anecdotes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bouton-anecdote {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #a78658;
  border-radius: 5px;
  background: #e0cba4;
  color: #51351f;
  font-family: Georgia, serif;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}

.bouton-anecdote:hover,
.bouton-anecdote:focus-visible {
  background: #f5e4bf;
}

.retour-anecdotes {
  margin-top: 22px;
  padding: 9px 14px;
  background: #62452e;
  border: 1px solid #a78658;
  border-radius: 5px;
  color: #fff0d3;
  cursor: pointer;
}

.texte-anecdote h3 {
  color: #694321;
  font-size: 23px;
  margin-top: 0;
}
/* Bibliothèque : 3 livres en haut, 2 centrés en bas */

.rayonnage {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-width: 850px;
  gap: 22px;
  margin-top: 35px;
}

.rayonnage .livre {
  grid-column: span 2;
  min-height: 0;
  width: 100%;
}

.rayonnage .livre:nth-child(4) {
  grid-column: 2 / span 2;
}

.rayonnage .livre:nth-child(5) {
  grid-column: 4 / span 2;
}

/* On conserve une disposition adaptée aux petits écrans */

@media (max-width: 800px) {
  .rayonnage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 600px;
  }

  .rayonnage .livre,
  .rayonnage .livre:nth-child(4),
  .rayonnage .livre:nth-child(5) {
    grid-column: auto;
  }

  .rayonnage .livre:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 11px);
    justify-self: center;
  }
}

/* Sous-titres des livres sur téléphone */

@media (max-width: 600px) {

    .livre-bas {
        font-size: 11px;
        line-height: 1.3;
        text-align: center;
        max-width: 100%;
        overflow-wrap: break-word;
    }

}

/* Supprimer la reliure verticale sur téléphone */

@media (max-width: 600px) {

    .livre-ouvert {
        background: linear-gradient(
            180deg,
            #f1e2c2,
            #e5d2a9
        );
    }

}
.illustration-postit {
  display: block;
  width: 85%;
  max-width: 450px;
  height: auto;
  margin: 25px auto;
  border-radius: 4px;
}
.illustration-postit {
  display: block;
  width: 50%;
  max-width: 250px;
  height: auto;
  margin: 25px auto;
  border-radius: 4px;
}