/* Cœur de Cendres — page du roman. Même palette et mêmes polices que la carte. */

@font-face{font-family:"Cardo";font-style:normal;font-weight:400;
  src:url(../fonts/Cardo-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Cardo";font-style:italic;font-weight:400;
  src:url(../fonts/Cardo-Italic.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Cardo";font-style:normal;font-weight:700;
  src:url(../fonts/Cardo-Bold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Cinzel Decorative";font-style:normal;font-weight:700;
  src:url(../fonts/CinzelDecorative-Bold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Alegreya SC";font-style:normal;font-weight:400;
  src:url(../fonts/AlegreyaSC-Regular.ttf) format("truetype");font-display:swap}

:root{
  --red:#8e2f1e; --red2:#c0521f; --parch:#f1e5c4; --leather:#0d0b08;
  --line:#4a3d28; --gold:#b8873a; --txt:#e6d9b6; --dim:#a1906c;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;
  background:radial-gradient(120% 70% at 50% -10%,#241c12 0%,#0d0b08 60%) fixed,var(--leather);
  color:var(--txt);
  font:17px/1.68 "Cardo","Iowan Old Style",Georgia,serif;
}
.page{max-width:720px;margin:0 auto;padding:16px 20px 70px}
a{color:var(--gold);text-decoration:none;border-bottom:1px solid #b8873a44}
a:hover{color:#d8a854}

/* --------------------------------------------------------------- retour --- */
.retour{display:flex;gap:20px;align-items:baseline;padding:4px 2px 16px;
  border-bottom:1px solid var(--line);margin-bottom:34px;font-size:14.5px}
.retour .ici{color:var(--dim);border-bottom-color:transparent}

/* ----------------------------------------------------------- couverture --- */
.couverture{text-align:center;margin-bottom:38px}
.kicker{font-family:"Alegreya SC",Georgia,serif;font-size:12.5px;letter-spacing:.3em;
  color:var(--dim);margin:0 0 14px;text-transform:uppercase}
.couverture h1{font:700 46px/1.08 "Cinzel Decorative",Palatino,Georgia,serif;
  color:#e8cfa0;letter-spacing:.1em;margin:0 0 10px;text-shadow:0 0 40px #b8873a1f}
.tome{font-family:"Alegreya SC",Georgia,serif;font-size:19px;letter-spacing:.2em;
  color:var(--gold);margin:0 0 6px}
.auteur{font-style:italic;color:#dccfae;margin:0;letter-spacing:.06em}

.epi{margin:0 0 34px;padding:0 0 0 20px;border-left:3px solid #4a3d2866}
.epi q{display:block;font-style:italic;font-size:17px;color:#c8b78f}
.epi span{display:block;font-family:"Alegreya SC",Georgia,serif;font-size:12px;
  letter-spacing:.22em;color:var(--dim);margin-top:8px}

/* --------------------------------------------------------------- pitch --- */
.pitch p{margin:0 0 17px;color:#ded1b0}
.chapeau{font-size:20px;color:#e8cfa0!important;line-height:1.45}

/* ------------------------------------------------------------- extrait --- */
.extrait{margin:46px 0 0}
h2{font:700 21px/1.3 "Cinzel Decorative",Georgia,serif;color:#e8cfa0;
  letter-spacing:.06em;margin:0 0 6px}
.chap{font-family:"Alegreya SC",Georgia,serif;font-size:13px;letter-spacing:.24em;
  color:var(--dim);margin:0 0 22px}
.texte p{margin:0 0 16px;color:#e4d8b8;hyphens:auto}
.texte p:first-of-type::first-letter{font:700 58px/0.82 "Cinzel Decorative",Georgia,serif;
  float:left;margin:6px 10px 0 0;color:var(--red2)}
.coupe{text-align:center;color:var(--line);margin:26px 0 10px;letter-spacing:1em;
  font-size:13px}
.suite{text-align:center;color:var(--dim);font-style:italic;margin:0}

/* -------------------------------------------------------------- achat --- */
.achat{text-align:center;margin:40px 0;padding:26px 18px;border:1px solid var(--line);
  border-radius:8px;background:#15100a99}
.achat.bas{margin-top:46px}
.bouton{display:inline-block;background:linear-gradient(#5a2a12,#33170a);
  border:1px solid var(--red2);color:#ffdfae;font:400 17px "Alegreya SC",Georgia,serif;
  letter-spacing:.12em;padding:13px 30px;border-radius:5px;transition:.2s;
  border-bottom:1px solid var(--red2)}
.bouton:hover{background:linear-gradient(#753716,#451f0c);box-shadow:0 0 26px #c0521f55;
  color:#fff2d4}
.bouton.clair{background:transparent;border:1px solid var(--gold);color:#e8cfa0;
  font-size:15px;padding:10px 20px;margin:0 5px 8px}
.bouton.clair:hover{background:#21180d;box-shadow:0 0 18px #b8873a33}
.fiche{margin:12px 0 0;font-size:13px;color:var(--dim)}

/* -------------------------------------------------------------- monde --- */
.monde{margin-top:52px;border-top:1px solid var(--line);padding-top:28px}
.monde p{color:#ded1b0}
.liens{text-align:center;margin:24px 0 18px}
.note{font-size:13.5px;color:var(--dim);font-style:italic}

.pied{margin-top:46px;border-top:1px solid #2c2318;padding-top:16px;font-size:12.5px;
  color:#6f6247;text-align:center;line-height:1.6}

/* ------------------------------------------------- réservation d'exemplaire --- */
.reserver{margin:42px 0 0;padding:26px 22px;border:1px solid var(--line);border-radius:9px;
  background:linear-gradient(#19130799,#15100a99)}
.reserver .pourquoi{color:#ded1b0;margin:0 0 18px}
.reserver .pourquoi b{color:#e8cfa0}
.compteur{color:#f0dcae;font-size:15.5px;margin:0 0 16px;padding:9px 13px;
  border-left:3px solid var(--red2);background:#2a140b66}
.compteur b{color:#ffcf9e}
.merci{margin:0 0 16px;padding:11px 14px;border-radius:6px;font-size:15px}
.merci.bon{border:1px solid #4d6b3a;background:#16220f;color:#cfe0b8}
.merci.mauvais{border:1px solid var(--red2);background:#2a120b;color:#ffcf9e}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.reserver label{display:block;color:var(--dim);font-size:13px;margin:0 0 12px}
.reserver label.large{grid-column:1/-1;margin-top:2px}
.reserver input,.reserver select,.reserver textarea{display:block;width:100%;margin-top:5px;
  font:inherit;color:var(--txt);background:#0f0c08;border:1px solid var(--line);
  border-radius:5px;padding:8px 10px}
.reserver input:focus,.reserver select:focus,.reserver textarea:focus{
  outline:2px solid var(--gold);outline-offset:1px}
.reserver textarea{resize:vertical;min-height:64px;font-family:inherit}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.case{display:flex!important;gap:10px;align-items:flex-start;color:#cbbc98!important;
  font-size:13.5px;line-height:1.5;margin:6px 0 18px}
.case input{width:auto!important;margin:3px 0 0!important;flex:0 0 auto}
.reserver .bouton{border:1px solid var(--red2);cursor:pointer}
.reserver .bouton[disabled]{opacity:.6;cursor:progress}
.note-perso{margin:16px 0 0;font-size:12.5px;color:var(--dim)}

@media (max-width:560px){
  .couverture h1{font-size:32px}
  .page{padding:14px 15px 50px}
  .chapeau{font-size:18px}
  body{font-size:16.5px}
  .champs{grid-template-columns:1fr}
  .reserver{padding:20px 15px}
}