/* Feuille commune aux pages hors almanach : la page du livre et la page bonus.
   Reprend le vocabulaire de l'almanach — mêmes couleurs, mêmes polices. */
:root{
  color-scheme:dark;
  --ink:#251C2C;
  --night:#302639;
  --raised:#3C3047;
  --parchment:#EFE3CC;
  --parchment-dim:#C6B9A2;
  --candle:#F2A03D;
  --verdigris:#6FA88A;
  --plum:#A33B5C;
  --line:rgba(239,227,204,.14);
  --display:"IM Fell English", "Hoefler Text", Georgia, serif;
  --body:"Karla", "Avenir Next", system-ui, sans-serif;
  --util:"Courier Prime", ui-monospace, "Courier New", monospace;
  --pad:clamp(16px, 4vw, 40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background-color:#251C2C; min-height:100%}
body{
  margin:0; background-color:#251C2C; color:var(--parchment);
  font-family:var(--body); font-size:16px; line-height:1.6; overflow-x:hidden; min-height:100vh;
}
.backdrop{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-color:#251C2C;
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(242,160,61,.22), transparent 62%),
    radial-gradient(80% 50% at 100% 100%, rgba(163,59,92,.16), transparent 72%);
}
.wrap{position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:0 var(--pad) 80px}

/* ---------- EN-TÊTE ---------- */
.retour{
  display:inline-block; margin:clamp(20px,5vw,36px) 0 0;
  font-family:var(--util); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--parchment-dim); text-decoration:none;
}
.retour:hover{color:var(--candle)}
.eyebrow{
  font-family:var(--util); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--candle); margin:28px 0 10px;
}
h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(34px, 8vw, 62px); line-height:.98; letter-spacing:-.01em;
  margin:0; color:var(--parchment);
}
h1 em{font-style:italic; color:var(--candle)}
.accroche{
  margin:16px 0 0; max-width:46ch; font-size:17px; color:var(--parchment-dim);
}

/* ---------- MISE EN PAGE ---------- */
.duo{display:grid; gap:clamp(24px,5vw,44px); align-items:start; margin-top:clamp(28px,6vw,46px)}
@media (min-width:820px){ .duo{grid-template-columns:minmax(0,340px) minmax(0,1fr)} }
.couv{
  width:100%; height:auto; display:block; border-radius:10px;
  border:1px solid rgba(242,160,61,.35);
  box-shadow:0 18px 46px rgba(0,0,0,.5);
}
.legende{
  margin:10px 0 0; font-family:var(--util); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--parchment-dim); text-align:center;
}

h2{
  font-family:var(--display); font-weight:400; font-size:clamp(26px,5vw,34px);
  line-height:1.05; margin:0 0 14px; color:var(--candle);
}
h3{
  font-family:var(--util); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--candle); margin:34px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--line);
}
.contenu{margin:0; padding:0; list-style:none; display:grid; gap:9px}
.contenu li{position:relative; padding-left:22px; font-size:15px; color:var(--parchment)}
.contenu li::before{
  content:""; position:absolute; left:2px; top:10px;
  width:5px; height:5px; border-radius:50%; background:var(--candle);
}
.contenu li em{font-style:normal; color:var(--candle)}

.fiche{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 4px; padding:0; list-style:none}
.fiche li{
  font-family:var(--util); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:4px; padding:4px 9px; color:var(--parchment-dim);
}
.fiche li.prix{color:#241A22; background:var(--candle); border-color:var(--candle); font-weight:700}

/* ---------- BOUTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; text-decoration:none;
  background:var(--candle); color:#1B1208; border:none; border-radius:999px;
  font-family:var(--util); font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:14px 24px; transition:.2s;
}
.btn:hover{filter:brightness(1.1)}
.btn:focus-visible{outline:2px solid var(--parchment); outline-offset:3px}
.btn.ghost{background:transparent; color:var(--parchment); border:1px solid rgba(242,160,61,.5)}
.btn.ghost:hover{border-color:var(--candle); color:var(--candle); filter:none}
.btn[aria-disabled="true"]{opacity:.55; cursor:default}
.btn[aria-disabled="true"]:hover{filter:none}
.bientot{
  margin:10px 0 0; font-family:var(--util); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--parchment-dim);
}

/* ---------- ENCARTS ---------- */
.encart{
  margin-top:26px; padding:18px 18px 16px; border-radius:12px;
  border:1px dashed rgba(242,160,61,.45); background:rgba(242,160,61,.05);
}
.encart-tag{
  display:block; font-family:var(--util); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--candle); margin:0 0 8px;
}
.encart p{margin:0; font-size:14px; line-height:1.55; color:var(--parchment-dim)}
.encart p + p{margin-top:12px}
.encart strong{color:var(--parchment); font-weight:700}

.bloc{
  margin:0 0 18px; padding:22px 20px; border-radius:14px;
  background:var(--night); border:1px solid var(--line);
}
.bloc h2{margin:0 0 8px; color:var(--parchment); font-size:clamp(24px,5vw,30px)}
.bloc p{margin:0 0 18px; color:var(--parchment-dim); font-size:15px}

.sep{display:flex; align-items:center; gap:16px; margin:44px 0 6px}
.sep span{flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(242,160,61,.45) 20%, rgba(242,160,61,.45) 80%, transparent)}
.sep i{width:9px; height:9px; border-radius:1px; background:var(--candle); transform:rotate(45deg); opacity:.9; flex:0 0 auto}

/* ---------- PIED DE PAGE ---------- */
.pied{
  margin-top:46px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
}
.sig-mark{font-family:var(--display); font-size:26px; letter-spacing:.03em; color:var(--candle); line-height:1}
.sig-line{
  font-family:var(--util); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--parchment-dim);
}
.pied a{color:var(--parchment-dim); text-decoration:underline; text-underline-offset:4px}
.pied a:hover{color:var(--candle)}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }