/* ============================================================================
 * Ultime Quest — site vitrine
 *
 * Palette héritée du thème « donjon » de la PWA (themes.css) — cohérence
 * visuelle complète entre vitrine et appli. Polices : Cinzel pour les titres
 * (small-caps), Merriweather pour le corps (serif littéraire).
 *
 * Couleurs : le :root ci-dessous = valeurs de SECOURS (donjon), surchargées par
 * palette.css (chargée cross-origin depuis play.*) via body.theme-* .
 * ============================================================================ */

/* Polices auto-hébergées (mêmes WOFF2 que la PWA) → métrique identique, pas de
 * dépendance Google Fonts, pas de FOUT lié au CDN. */
@font-face { font-family:'EB Garamond'; src:url('fonts/eb-garamond-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'EB Garamond'; src:url('fonts/eb-garamond-italic.woff2')  format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'EB Garamond'; src:url('fonts/eb-garamond-bold.woff2')    format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Merriweather'; src:url('fonts/merriweather-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Merriweather'; src:url('fonts/merriweather-italic.woff2')  format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Merriweather'; src:url('fonts/merriweather-bold.woff2')    format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Atkinson Hyperlegible'; src:url('fonts/atkinson-hyperlegible-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Atkinson Hyperlegible'; src:url('fonts/atkinson-hyperlegible-italic.woff2')  format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Atkinson Hyperlegible'; src:url('fonts/atkinson-hyperlegible-bold.woff2')    format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Cinzel'; src:url('fonts/cinzel-regular.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Cinzel'; src:url('fonts/cinzel-bold.woff2')    format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  --bg:          #0c1118;
  --surface:     #141d2a;
  --card:        #182231;
  --border:      #2a3a55;
  --fg:          #d8dce8;
  --fg-muted:    #7a8499;
  --accent:      #c08a3e;
  --accent-soft: rgba(192, 138, 62, 0.14);
  --accent-glow: rgba(192, 138, 62, 0.45);
  --success:     #6db58e;
  --danger:      #b03a40;
  --wine:        #6c2030;

  --font-display: 'Cinzel', Georgia, serif;
  --font-body:    'Merriweather', Georgia, 'Times New Roman', serif;
  --font-ui:      system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 8px 28px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* La palette partagée expose --gold-glow par thème ; le www consomme
 * --accent-glow. On alias pour que la lueur suive le thème actif (fallback
 * donjon si la palette n'est pas encore chargée). */
body { --accent-glow: var(--gold-glow, rgba(192, 138, 62, 0.45)); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Taille de police : knob racine unique (--ui-font-size, en px) partagé avec la
 * PWA, réglé par les boutons Réduire / Par défaut / Aggrandir (pas de 0.25rem,
 * cumulatif), persisté via le cookie uq_fontsize, INDÉPENDANT du thème. Tout le
 * texte est en rem → dérive de cette racine (taille de référence). */
html { font-size: var(--ui-font-size, 20px); }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);                    /* base = racine (taille de référence) */
  line-height: var(--theme-leading, 1.6);
  letter-spacing: var(--theme-tracking, 0);
  font-variant-ligatures: none;       /* ligatures désactivées (lisibilité) */
  font-feature-settings: "liga" 0, "clig" 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/* Réglages typo par thème (interlignage --theme-leading + letter-spacing
 * --theme-tracking) : centralisés dans la palette partagée (palette.css),
 * un seul jeu de valeurs pour play ET www. Rien à surcharger ici. */

/* Texture parchemin subtile sur tout le body */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 18% 18%, var(--accent-soft) 0%, transparent 35%),
    radial-gradient(circle at 82% 88%, rgba(108, 32, 48, 0.08) 0%, transparent 38%);
  mix-blend-mode: screen;
}
body > * { position: relative; z-index: 1; }

a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: color-mix(in srgb, var(--accent) 70%, white); }
img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 0;
}

/* ---- Header ---------------------------------------------------------- */
/* Grid 3 colonnes : brand à gauche, menu centré au MILIEU ABSOLU de la page,
   bouton Jouer collé à droite. La colonne centrale prend la largeur du menu
   (auto), les colonnes 1 et 3 partagent le reste à parts égales (1fr 1fr)
   — c'est ce qui garantit le centrage symétrique. */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.4rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(8px);
  position: sticky; top: 0;
  z-index: 50;
}
.site-header > .site-lead { justify-self: start; display: flex; align-items: center; gap: 0.5rem; }
.site-header > .site-nav { justify-self: center; }
/* Cluster d'actions à droite (⚙ préférences + CTA Jouer) — 3e colonne de la
 * grille pour rester aligné à droite sur une seule ligne. */
.site-header > .site-actions { justify-self: end; display: flex; align-items: center; gap: 0.7rem; }

/* ---- Bouton burger (mobile uniquement) ----------------------------- */
/* Calqué sur le ⚙ .prefs-btn : paire d'icônes ronde cohérente (sinon le bouton
   nu prend le fond blanc par défaut du navigateur → boîte blanche). */
.burger {
  display: none;
  width: 38px; height: 38px; border-radius: 999px;
  align-items: center; justify-content: center;
  color: var(--accent); background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.burger:hover, .burger:focus-visible { border-color: var(--accent); }

/* ---- Préférences (popover ⚙ : thème + taille) ---------------------- */
.prefs { position: relative; }
.prefs-btn {
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); background: var(--surface);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.prefs-btn:hover, .prefs-btn:focus-visible { border-color: var(--accent); }
.prefs-popover {
  position: absolute; top: calc(100% + 0.5rem); right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 0.8rem; min-width: 220px; z-index: 60;
}
.prefs-popover[hidden] { display: none; }
.theme-swatch {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.6rem; min-height: 44px; border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--fg);
  text-align: left; width: 100%; border: none; background: none; cursor: pointer;
}
.theme-swatch:hover, .theme-swatch:focus-visible { background: var(--accent-soft); color: var(--accent); }
.theme-swatch[aria-checked="true"] { color: var(--accent); font-weight: 700; }
.theme-swatch-dot { width: 16px; height: 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); flex: 0 0 auto; }
.theme-swatch-label { text-transform: capitalize; letter-spacing: 0.03em; }
/* Pastille = couleur d'accent indicative de chaque thème. */
.theme-swatch-dot.theme-forge     { background: #e0903a; }
.theme-swatch-dot.theme-grimoire  { background: #d4a857; }
.theme-swatch-dot.theme-donjon    { background: #c08a3e; }
.theme-swatch-dot.theme-saga      { background: #9c7440; }
.theme-swatch-dot.theme-pirate    { background: #c89a3c; }
.theme-swatch-dot.theme-futuriste { background: #00d2ff; }
.theme-swatch-dot.theme-clair     { background: #7a4a14; }
.theme-swatch-dot.theme-donjon-clair      { background: #95611f; }
.theme-swatch-dot.theme-pirate-clair      { background: #8a5e16; }
.theme-swatch-dot.theme-lisibilite-clair  { background: #14489e; }
.theme-swatch-dot.theme-lisibilite-sombre { background: #7fb2ff; }

/* Sections du panneau de préférences (popover ⚙ + drawer mobile) */
.prefs-section + .prefs-section { margin-top: 0.9rem; }
.prefs-label {
  margin: 0 0 0.5rem; font-family: var(--font-ui);
  font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted);
}
.prefs-themes { display: grid; gap: 0.1rem; }
.prefs-sizes { display: flex; gap: 0.4rem; }
.fontsize-btn {
  flex: 1; padding: 0.45rem 0.3rem; min-height: 44px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--card);
  color: var(--fg); font-family: var(--font-ui); font-size: var(--fs-sm); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.fontsize-btn:hover, .fontsize-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.fontsize-btn[aria-checked="true"] { background: var(--accent); color: #1a120a; border-color: var(--accent); font-weight: 700; }

/* ---- Panneau latéral mobile (nav + préférences) -------------------- */
.nav-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.55); }
.nav-scrim[hidden] { display: none; }
/* Drawer de NAVIGATION, ancré à GAUCHE (le ⚙ réglages reste à droite, en popover).
   Symétrie avec la PWA : ☰ → nav depuis la gauche, ⚙ → réglages depuis la droite. */
.nav-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 91;
  width: min(82vw, 320px);
  background: var(--surface); border-right: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.2rem; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1.2rem;
}
.nav-drawer[hidden] { display: none; }
.drawer-nav { display: flex; flex-direction: column; gap: 0.2rem; }
.drawer-nav .nav-link { font-size: var(--fs-base); padding: 0.6rem 0.2rem; }
body.drawer-open { overflow: hidden; }

/* Taille de texte : pilotée par le knob racine --ui-font-size (style inline sur
 * <html>, posé par header.php depuis le cookie uq_fontsize). Plus de presets. */

/* ---- Responsive header : burger ≤768px (nav à gauche), ⚙ réglages à droite --- */
/* Mobile = même grammaire que la PWA : ☰ ⚜ … ⚙ (pas de CTA dans la barre, il vit
   dans le hero / le catalogue). Le ⚙ devient donc le dernier élément → plein-droite,
   et son popover (ancré right:0) s'ouvre dans l'écran au lieu de déborder à gauche. */
@media (max-width: 768px) {
  .burger { display: inline-flex; }
  .site-header > .site-nav { display: none; }
  .site-actions .site-nav-cta { display: none; }
  /* .site-nav masquée → l'auto-placement mettrait .site-actions en colonne 2
     (milieu). On la pin en colonne 3 pour que le ⚙ soit plein-droite et que son
     popover (right:0) s'ouvre dans l'écran. */
  .site-header > .site-actions { grid-column: 3; }
}
@media (min-width: 769px) {
  .nav-drawer, .nav-scrim { display: none !important; }
}

.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display);
  font-variant: small-caps; letter-spacing: 0.08em;
  font-size: var(--fs-base); color: var(--accent);
}
.brand-mark {
  font-size: var(--fs-xl); line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
}
.brand-word { font-weight: 700; }
.site-nav {
  display: flex;
  gap: 1.4rem;
  align-items: center;
}

/* Liens du menu principal du header. Style sobre, gold à l'accent. */
.nav-link {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--fg);
  padding: 0.45rem 0.2rem;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-bottom-color 0.15s ease;
  white-space: nowrap;
}
.nav-link:hover,
.nav-link:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.nav-link[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Tablette : on resserre les gaps */
@media (max-width: 980px) {
  .site-nav { gap: 0.7rem; }
  .nav-link { font-size: var(--fs-sm); padding: 0.45rem 0.15rem; }
}

/* Mobile : on cache la nav centrale (à reprendre avec un burger ultérieurement),
   on garde la brand à gauche et le bouton "Jouer" à droite pour la conversion.
   La grid 3 colonnes collapse naturellement (col 2 = auto = 0 si nav vide). */
@media (max-width: 768px) {
  .site-header > .site-nav { display: none; }
}

/* ---- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--fs-md); font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn-lg { font-size: var(--fs-base); padding: 0.85rem 1.6rem; }
.btn-primary {
  background: var(--accent);
  color: #1a120a;
  box-shadow: 0 4px 18px var(--accent-glow);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 85%, white);
  color: #1a120a;
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-ghost:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---- Hero ------------------------------------------------------------ */
.hero {
  position: relative;
  padding: clamp(3rem, 9vw, 6rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 8vw, 5rem);
  text-align: center;
  overflow: hidden;
}
.hero-inner { max-width: 800px; margin: 0 auto; }
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--accent);
  margin: 0 0 1.4rem;
}
.hero-punch {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 1.4rem;
  color: var(--fg);
}
.hero-punch span {
  display: inline-block;
  margin: 0 0.3em;
  background: linear-gradient(180deg, var(--fg) 0%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--fg);
  margin: 0 0 0.5rem;
}
.hero-baseline {
  font-family: var(--font-display);
  font-variant: small-caps; letter-spacing: 0.12em;
  font-size: var(--fs-xl);
  line-height: 1.35;
  color: var(--accent);
  margin: 0 0 2.5rem;
  /* Réserve 2 lignes en permanence : évite la troncature mobile quand la
     baseline passe sur 2 lignes (le bloc ne grandit pas brutalement). */
  min-height: calc(1.3rem * 1.35 * 2);
}
.hero-cta {
  display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center;
}
.hero-ornament {
  display: flex; justify-content: center; align-items: center;
  gap: 0.6rem;
  margin-top: 3rem;
}
.hero-ornament span {
  display: block;
  width: 3px; height: 3px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0.6;
}
.hero-ornament span:nth-child(2) { width: 5px; height: 5px; opacity: 1; }

/* ---- Heritage -------------------------------------------------------- */
.heritage {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1rem, 4vw, 3rem);
}
.heritage-inner { max-width: 880px; margin: 0 auto; }
.heritage-lead {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: var(--fg);
  text-align: center;
  margin: 0 0 2.8rem;
  line-height: 1.7;
}
.heritage-lead em {
  font-style: normal; font-weight: 600;
  color: var(--accent);
}
.heritage-facts {
  max-width: 720px;
  margin: 2.8rem auto 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--fg-muted);
  font-size: 0.97rem;
  line-height: 1.7;
}
.heritage-facts strong { color: var(--fg); font-weight: 600; }
.pillar-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pillar-list li {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 1rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pillar-mark {
  font-family: var(--font-display);
  font-size: var(--fs-2xl); line-height: 1;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.pillar-list strong { color: var(--accent); font-weight: 700; }

/* ---- Catalogue ------------------------------------------------------- */
.catalogue {
  padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 4vw, 3rem);
  max-width: 1100px; margin: 0 auto;
}
.section-head { text-align: center; margin-bottom: 2.4rem; }
.section-head h2 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 0 0 0.5rem;
}
.section-sub {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  color: var(--fg-muted);
  margin: 0;
}
.adventure-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: stretch;
}

/* Adventure card */
.adv-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}
/* Hauteur uniforme garantie sur toute la rangée (règle projet permanente). */
.adv-card { height: 100%; }
.adv-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--accent-glow);
}
.adv-banner {
  height: 6px;
  background: linear-gradient(90deg, var(--accent), var(--wine));
}
.adv-banner.style-pirate    { background: linear-gradient(90deg, #c89a3c, #8b1e3f); }
.adv-banner.style-futuriste { background: linear-gradient(90deg, #00d2ff, #ff0055); }
.adv-banner.style-fantasy   { background: linear-gradient(90deg, #c08a3e, #6c2030); }
/* Cover optionnel (champ `cover`) en tête de carte. Les covers sont au format
   16/10 → contenant calé sur ce ratio pour afficher l'image entière sans rogner
   (plancher 16/9 si jamais une rangée force plus court). Ratio fixe → cartes de
   même hauteur dans une rangée. La stripe d'accent .adv-banner reste par-dessus. */
.adv-cover {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--card);
}
.adv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adv-body {
  padding: 1.3rem 1.4rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  flex: 1;
}
.adv-title {
  font-family: var(--font-display);
  font-variant: small-caps; letter-spacing: 0.06em;
  font-size: var(--fs-xl);
  color: var(--accent);
  margin: 0;
  line-height: 1.2;
}
.adv-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.adv-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.adv-chip.difficulty-easy   { color: var(--success); border-color: color-mix(in srgb, var(--success) 50%, var(--border)); }
.adv-chip.difficulty-medium { color: var(--accent);  border-color: color-mix(in srgb, var(--accent)  50%, var(--border)); }
.adv-chip.difficulty-hard   { color: var(--danger);  border-color: color-mix(in srgb, var(--danger)  50%, var(--border)); }
.adv-chip.price-free   { color: var(--success); }
.adv-chip.price-paid   { color: var(--accent); }
.adv-chip.price-reward { color: var(--fg-muted); font-style: italic; }
.adv-desc {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg);
  margin: 0;
  flex: 1;
}
.adv-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
}
.adv-author {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  font-style: italic;
}
.adv-cta {
  font-family: var(--font-display);
  font-variant: small-caps; letter-spacing: 0.08em;
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--accent);
}
.adv-cta::after { content: ' →'; transition: margin-left 0.15s ease; }
.adv-card:hover .adv-cta::after { margin-left: 0.2rem; }

/* Card link wrapper */
a.adv-card { color: inherit; text-decoration: none; }
a.adv-card:hover .adv-title { color: color-mix(in srgb, var(--accent) 80%, white); }

/* Skeleton (loading) */
.adv-skeleton {
  height: 230px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.adv-skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Error / empty state */
.adv-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2.5rem 1rem;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--fg-muted);
  font-style: italic;
}
.adv-state strong { color: var(--fg); font-style: normal; }

/* ---- Footer ---------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 2.5rem clamp(1rem, 4vw, 3rem);
  margin-top: 4rem;
}
.footer-inner {
  max-width: 880px; margin: 0 auto;
  text-align: center;
}
.footer-brand {
  font-family: var(--font-display);
  font-variant: small-caps; letter-spacing: 0.1em;
  color: var(--accent);
  margin: 0 0 0.4rem;
  font-size: var(--fs-base);
}
.footer-tagline {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--fg-muted);
  margin: 0 0 1rem;
}
.footer-meta {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0;
}

/* ---- Mobile ---------------------------------------------------------- */
@media (max-width: 540px) {
  .site-header { padding: 1rem; }
  .brand-word  { display: none; }
  /* Sur mobile, chaque mot du punch va sur sa propre ligne — plus de
     troncature et un effet mantra/incantation très lisible. */
  .hero-punch  { font-size: clamp(2.4rem, 11vw, 3.4rem); line-height: 1.1; }
  .hero-punch span { display: block; margin: 0; }
  .hero-cta .btn { width: 100%; }
  /* Chaque span de tagline = une ligne propre sur mobile. Permet de forcer
     un retour ligne par segment sans toucher au HTML (juste réordonner/scinder
     les <span> dans index.php). */
  .hero-sub span,
  .hero-baseline span { display: block; }
}

/* ---- A11y utility --------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- Adventure card (button variant pour les paid) ------------------ */
button.adv-card {
  font: inherit; color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
button.adv-card:hover .adv-title {
  color: color-mix(in srgb, var(--accent) 80%, white);
}
.adv-card-paid { position: relative; }
.adv-card-paid::before {
  content: 'À soutenir';
  position: absolute; top: 12px; right: 12px;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  background: var(--accent);
  color: #1a120a;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* ---- Picker (Quelle aventure pour toi ?) ---------------------------- */
.picker {
  padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 4vw, 3rem);
  background: linear-gradient(180deg, transparent 0%, var(--surface) 100%);
}
.picker-inner { max-width: 1100px; margin: 0 auto; }
.picker-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 0.5rem;
}
.picker-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex; flex-direction: column; gap: 0.8rem;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.picker-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.picker-card h3 {
  font-size: var(--fs-lg);
  line-height: 1.3;
  color: var(--fg);
  margin: 0;
  padding-right: 2.6rem; /* laisse la place au §-mark décoratif (::before) */
}
.picker-card p {
  margin: 0;
  color: var(--fg);
  font-size: var(--fs-base);
}
.picker-card p strong {
  color: var(--accent);
  font-weight: 700;
}
.picker-cta {
  font-family: var(--font-display);
  font-variant: small-caps; letter-spacing: 0.08em;
  font-size: var(--fs-sm); font-weight: 700;
  margin-top: auto;
  align-self: flex-start;
}

/* ---- FAQ ------------------------------------------------------------- */
.faq {
  padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 4vw, 3rem);
}
.faq-inner { max-width: 880px; margin: 0 auto; }
.faq-list {
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1rem;
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem 1.3rem;
}
.faq-item dt {
  font-family: var(--font-display);
  font-variant: small-caps; letter-spacing: 0.05em;
  font-size: var(--fs-base);
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.faq-item dd {
  margin: 0;
  color: var(--fg);
  font-size: var(--fs-base);
  line-height: 1.65;
}
.faq-item dd em {
  font-style: italic;
  color: color-mix(in srgb, var(--accent) 70%, var(--fg));
}

/* ---- Modal "Bientôt disponible" ------------------------------------- */
.modal {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: modal-fade 0.18s ease-out;
}
.modal[hidden] { display: none; }
.modal-overlay {
  position: absolute; inset: 0;
  background: rgba(6, 9, 14, 0.75);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.modal-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 0 1px var(--accent-glow);
  padding: 2.2rem 1.8rem 1.8rem;
  max-width: 460px;
  width: 100%;
  text-align: center;
  animation: modal-rise 0.22s cubic-bezier(.2,.7,.3,1);
}
.modal-close {
  position: absolute; top: 0.6rem; right: 0.8rem;
  background: transparent;
  border: none;
  color: var(--fg-muted);
  font-size: var(--fs-2xl); line-height: 1;
  cursor: pointer;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.modal-close:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.modal-mark {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  color: var(--accent);
  text-shadow: 0 0 18px var(--accent-glow);
  margin-bottom: 0.6rem;
  line-height: 1;
}
.modal-title {
  font-size: var(--fs-2xl);
  margin: 0 0 0.8rem;
}
.modal-desc {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg);
  margin: 0 0 1.6rem;
  line-height: 1.55;
}
.modal-desc [data-soon-title] {
  color: var(--accent);
  font-style: italic;
  font-weight: 600;
}
.modal-desc em {
  color: var(--accent);
  font-style: italic;
}
.modal-desc-foot {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: -0.6rem 0 1.4rem;
  text-align: center;
  font-style: italic;
}
.modal-actions {
  display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center;
}
body.modal-open { overflow: hidden; }

@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ============================================================================
 * POLISH PASS — micro-typo, motion, layout, brand details
 * Bloc final cohérent : toutes les améliorations validées via askuser.
 * Ordre : utilitaires globaux → puis spécifiques par section.
 * ============================================================================ */

/* ---- Paper grain texture (subtle noise overlay) --------------------- */
/* Inline SVG fractal noise, alpha basse. Mix-blend-mode overlay sur les
   surfaces sombres → grain de papier / parchemin. ::after car ::before
   est déjà utilisé pour les radial gradients. */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  opacity: 0.04;
  mix-blend-mode: overlay;
}

/* ---- Focus rings (custom gold, accessibilité clavier) --------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible,
a.adv-card:focus-visible,
button.adv-card:focus-visible,
.picker-cta:focus-visible,
.modal-close:focus-visible {
  outline-offset: 4px;
}

/* ---- Section dividers ornementaux ----------------------------------- */
/* Remplace les borders plats entre sections par un divider ⚜/❦/✦ ailé
   de deux lignes en fondu. Réduit l'effet "blocs empilés", ajoute du
   souffle façon édition reliée. */
.section-divider {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 880px;
  margin: 0 auto;
  padding: 1.4rem clamp(1rem, 4vw, 3rem);
  color: var(--accent);
  opacity: 0.7;
}
.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 50%, transparent) 50%,
    transparent 100%);
}
.divider-mark {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1;
  text-shadow: 0 0 14px var(--accent-glow);
  flex-shrink: 0;
}

/* Le divider remplace visuellement la séparation entre sections.
   On annule les borders plats du bloc heritage. */
.heritage {
  border-top: 0;
  border-bottom: 0;
}

/* ---- Sticky compact nav (au scroll) --------------------------------- */
.site-header {
  transition: padding 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.site-header.compact {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.site-header.compact .brand-mark { font-size: var(--fs-lg); }
.site-header.compact .brand-word { font-size: var(--fs-md); }
.site-header.compact .btn {
  padding: 0.45rem 1rem;
  font-size: var(--fs-sm);
}

/* ---- Scroll-cue chevron --------------------------------------------- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(0.8rem, 2.5vw, 1.6rem);
  transform: translateX(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.65;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.scroll-cue:hover { opacity: 1; }
.scroll-cue.dismissed {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
}
.scroll-cue-chevron {
  display: block;
  width: 12px; height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: rotate(45deg) translate(-3px, -3px); }
  50%      { transform: rotate(45deg) translate(2px, 2px); }
}

/* ---- Hero punch : kerning serré + stagger reveal -------------------- */
/* Override de la règle plus haut : letter-spacing réduit pour densité
   monumentale, stagger reveal à l'arrivée (chaque mot fade-up). */
.hero-punch {
  letter-spacing: 0.02em;
}
.hero-punch span {
  opacity: 0;
  transform: translateY(10px);
  animation: hero-word-rise 0.65s cubic-bezier(.2,.7,.3,1) forwards;
}
.hero-punch span:nth-child(1) { animation-delay: 0.15s; }
.hero-punch span:nth-child(2) { animation-delay: 0.30s; }
.hero-punch span:nth-child(3) { animation-delay: 0.45s; }
@keyframes hero-word-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Labels small-caps : letter-spacing aéré pour respiration. */
.adv-cta,
.picker-cta,
.footer-brand,
.brand {
  letter-spacing: 0.14em;
}

/* ---- Heritage : lettrine (drop cap) --------------------------------- */
.heritage-lead::first-letter {
  font-family: var(--font-display);
  font-size: 4.2em;
  line-height: 0.82;
  float: left;
  margin: 0.12em 0.14em 0 0;
  color: var(--accent);
  font-weight: 700;
  text-shadow: 0 0 18px var(--accent-glow);
}

/* ---- Dice icon hover : roulement 3D --------------------------------- */
/* Le 🎲 (3e pillar) tourne et scale au survol de sa carte. */
.pillar-list li:nth-child(3) .pillar-mark {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(.2,.7,.3,1);
  transform-origin: center;
}
.pillar-list li:nth-child(3):hover .pillar-mark {
  animation: dice-roll 0.7s cubic-bezier(.2,.7,.3,1);
}
@keyframes dice-roll {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(110deg) scale(1.18); }
  55%  { transform: rotate(245deg) scale(1.10); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ---- Picker cards : paragraph numbers ------------------------------- */
.picker-card { position: relative; }
.picker-card::before {
  content: attr(data-paragraph);
  position: absolute;
  top: 0.85rem; right: 1rem;
  font-family: var(--font-display);
  font-variant: small-caps;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.06em;
  opacity: 0.55;
  pointer-events: none;
}

/* ---- Adventure cards : tabular nums + 3D tilt ----------------------- */
/* Tabular nums sur les chips → durées/§ s'alignent verticalement. */
.adv-chip {
  font-variant-numeric: tabular-nums;
}

/* Tilt 3D : les CSS vars sont set par app.js sur mousemove. */
.adv-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  will-change: transform;
}
.adv-card:hover {
  /* Combine la lift translateY existante AVEC le tilt CSS-var. */
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-3px);
}

/* ---- Featured first card (catalogue, desktop ≥768px) ---------------- */
@media (min-width: 768px) {
  .adventure-grid > .adv-card:first-child {
    grid-column: span 2;
  }
  .adventure-grid > .adv-card:first-child .adv-banner {
    height: 10px;
  }
  .adventure-grid > .adv-card:first-child .adv-title {
    font-size: var(--fs-2xl);
  }
  .adventure-grid > .adv-card:first-child .adv-body {
    padding: 1.6rem 1.8rem 1.8rem;
  }
}

/* ---- Loading text sous skeletons ------------------------------------ */
.adv-loading-text {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--fg-muted);
  margin: 0;
  padding: 0.4rem 0;
  letter-spacing: 0.02em;
}

/* ---- FAQ 2 colonnes sur desktop ------------------------------------- */
@media (min-width: 900px) {
  .faq-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .faq-inner { max-width: 1100px; }
}

/* ---- Scroll-reveal sections (IntersectionObserver côté JS) ---------- */
/* Scopé sous .js-reveal pour fallback no-JS : si le script ne tourne pas,
   .js-reveal n'est pas sur <html> et les sections restent visibles. */
.js-reveal .section-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-reveal .section-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Overlay de continuité vers l'app (anti-flash inter-origines) --- */
.app-transition {
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease;
}
.app-transition.is-active { opacity: 1; pointer-events: all; }
.app-transition-mark {
  font-family: var(--font-display); font-variant: small-caps; letter-spacing: 0.14em;
  color: var(--accent); font-size: var(--fs-2xl); text-shadow: 0 0 18px var(--accent-glow);
}

/* ---- Barre de progression de lecture (pages .has-read-progress) ---- */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
  z-index: 80; transition: width 0.1s linear;
}

/* ---- Motion override (étendu) --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .app-transition { transition: none; }
  .read-progress { transition: none; }
  .adv-card, .btn, .picker-card { transition: none; }
  .adv-skeleton::after { animation: none; }
  .modal, .modal-card { animation: none; }
  .hero-punch span { animation: none; opacity: 1; transform: none; }
  .scroll-cue-chevron { animation: none; }
  .pillar-list li:nth-child(3):hover .pillar-mark { animation: none; }
  .section-reveal { opacity: 1; transform: none; transition: none; }
  .site-header { transition: none; }
}

/* ============================================================================
 * LECTURE IMMERSIVE — passe de refonte visuelle (validée askuser)
 *
 *  - Dark uniforme : suppression des BG alternés heritage/picker
 *  - Texture parchemin plus visible (grain opacity ↑)
 *  - Sections collées : paddings -40%
 *  - Section dividers : fins, étroits, mark plus petit (« entre-paragraphes »)
 *  - Banner cards horizontal → stripe verticale 5px (tranche de livre par genre)
 *  - Boutons : uppercase + letter-spacing fort + double encadrement gold
 * ============================================================================ */

/* Dark uniforme — la texture parchemin devient plus présente */
body::after { opacity: 0.10; }

/* Sections : pas d'alternance BG, paddings ~ -40% */
.heritage {
  background: transparent;
  padding: clamp(1.4rem, 4vw, 2.8rem) clamp(1rem, 4vw, 3rem);
}
.picker {
  background: transparent;
  padding: clamp(1.6rem, 4.5vw, 3rem) clamp(1rem, 4vw, 3rem);
}
.catalogue {
  padding: clamp(1.6rem, 4.5vw, 3rem) clamp(1rem, 4vw, 3rem);
}
.faq {
  padding: clamp(1.6rem, 4.5vw, 3rem) clamp(1rem, 4vw, 3rem);
}

/* Dividers fins et étroits (filets type « ornement entre paragraphes ») */
.section-divider {
  padding: 0.45rem 0;
  gap: 0.7rem;
  max-width: 360px;
  margin: 0 auto;
  opacity: 0.55;
}
.divider-mark {
  font-size: var(--fs-md);
  text-shadow: 0 0 8px var(--accent-glow);
}

/* Cards catalogue — banner horizontal → stripe verticale « tranche de livre »
   On repurpose .adv-banner (absolute, 5px width, full height) avec une
   couleur solide par genre. Pas d'ajout côté JS : l'élément existait déjà. */
.adv-banner {
  position: absolute;
  top: 0; left: 0;
  width: 5px;
  height: 100%;
  background: var(--accent);
  z-index: 1;
}
.adv-banner.style-pirate    { background: #8b1e3f; }
.adv-banner.style-futuriste { background: #00d2ff; }
.adv-banner.style-fantasy   { background: var(--accent); }

/* Featured first card : on annule le height: 10px hérité (la stripe est verticale) */
@media (min-width: 768px) {
  .adventure-grid > .adv-card:first-child .adv-banner {
    height: 100%;
  }
}

/* Boutons — uppercase + letter-spacing fort sur tous */
.btn {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}

/* Primary : double encadrement gold (border interne + outline externe + gap) */
.btn-primary {
  background: var(--accent);
  color: #1a120a;
  border: 1px solid color-mix(in srgb, var(--accent) 65%, black);
  outline: 1px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 4px 20px var(--accent-glow);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, white);
  outline-offset: 4px;
  transform: translateY(-1px);
}

/* Ghost : outline secondaire en accent translucide (rappel du double-encadrement) */
.btn-ghost {
  outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  outline-offset: 3px;
}
.btn-ghost:hover {
  outline-offset: 4px;
}

/* ============================================================================
 * PAGES AVENTURE — /aventures/<key>.html
 * Une page riche par aventure, ciblée SEO long-tail. Hérite de la palette
 * vitrine mais autorise un --adv-main local pour la couleur d'accent.
 * ============================================================================ */

.page-adventure main { max-width: 820px; margin: 0 auto; padding: 1.5rem 1.2rem 4rem; }

.breadcrumb {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0.5rem 0 2rem;
  font-family: var(--font-ui);
}
.breadcrumb a { color: var(--fg-muted); border-bottom: 1px dotted color-mix(in srgb, var(--fg-muted) 60%, transparent); }
.breadcrumb a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.breadcrumb span[aria-current] { color: var(--accent); }
.breadcrumb span[aria-hidden] { margin: 0 0.4em; opacity: 0.6; }

.adv-hero {
  text-align: center;
  padding: 2rem 1rem 2.4rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
  position: relative;
}
/* Cover optionnel (champ `cover`) en bannière de fiche, au-dessus du titre. */
.adv-hero-cover {
  margin: 0 auto 1.6rem;
  max-width: 720px;
  /* Cover source en 16/10 → contenant aligné pour afficher l'image entière. */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.adv-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adv-hero::before {
  content: '';
  display: block;
  width: 64px; height: 1px;
  margin: 0 auto 1.2rem;
  background: linear-gradient(90deg, transparent, var(--adv-main, var(--accent)), transparent);
  opacity: 0.7;
}
.adv-hero h1 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--adv-main, var(--accent));
  margin-bottom: 0.5rem;
  text-shadow: 0 0 22px color-mix(in srgb, var(--adv-main, var(--accent)) 40%, transparent);
}
.adv-tagline {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0 0 1.5rem;
}
.adv-lead {
  font-size: var(--fs-lg);
  color: var(--fg);
  max-width: 640px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}
.adv-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.adv-price {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  font-style: italic;
}

.adv-section {
  padding: 1.5rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.adv-section:last-child { border-bottom: none; }
.adv-section h2 {
  font-size: var(--fs-lg);
  margin-bottom: 1rem;
  color: var(--accent);
}
.adv-prose p { margin: 0 0 1rem; line-height: 1.7; }
.adv-prose p:last-child { margin-bottom: 0; }

.adv-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}
.adv-checklist li {
  padding: 0.6rem 0.9rem 0.6rem 2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
  font-size: var(--fs-md);
}
.adv-checklist li::before {
  content: '✦';
  position: absolute;
  left: 0.75rem; top: 0.55rem;
  color: var(--adv-main, var(--accent));
}

.adv-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 0;
}
.adv-info-grid > div {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
}
.adv-info-grid dt {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  margin-bottom: 0.25rem;
}
.adv-info-grid dd { margin: 0; color: var(--fg); font-weight: 600; }

.adv-cta-final {
  text-align: center;
  background: linear-gradient(180deg, transparent, var(--card));
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  margin-top: 1rem;
}

.adv-related .related-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.related-card { margin: 0; display: flex; }
.related-link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem;
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg);
  transition: border-color 0.15s, transform 0.15s;
}
.related-link:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  color: var(--fg);
}
.related-eyebrow {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.related-title {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--accent);
  font-size: var(--fs-base);
}
.related-meta { font-size: var(--fs-sm); color: var(--fg-muted); }
.related-all {
  text-align: center;
  margin-top: 1.2rem;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 1.2rem;
  text-align: center;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}
.site-footer p { margin: 0.3rem 0; }

/* ============================================================================
 * CATALOGUE — Cards 2-CTA footer
 *   - Découvrir l'histoire → fiche éditoriale (lien texte gold, SEO long-tail)
 *   - Commencer → action principale (pill button gold)
 * La carte est devenue un <article> non-cliquable : chaque CTA est explicite.
 * ============================================================================ */

/* Author : remonte au-dessus du footer (paragraphe propre) */
.adv-author {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  font-style: italic;
  margin: 0.2rem 0 0;
}

/* Footer : 2 CTA, espacés. flex-wrap pour mobile très étroit. */
.adv-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-top: 0.8rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
}

/* CTA secondaire : lien éditorial vers la fiche.
   Style sobre, gold subtle, underline-on-hover. */
.adventure-link {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.adventure-link:hover,
.adventure-link:focus-visible {
  color: var(--accent);
  border-bottom-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* CTA primaire : action « Commencer / Bientôt ».
   Pill gold outline + small-caps. Hover : fond gold soft + lift. */
.adv-cta {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.10em;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  /* Reset button defaults au cas où */
  font-family: var(--font-display);
  -webkit-appearance: none;
  appearance: none;
}
.adv-cta::after {
  content: ' →';
  display: inline-block;
  margin-left: 0.15rem;
  transition: margin-left 0.15s ease;
}
.adv-cta:hover,
.adv-cta:focus-visible {
  background: var(--accent-soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-glow);
}
.adv-cta:hover::after,
.adv-cta:focus-visible::after {
  margin-left: 0.35rem;
}

/* Variante paid : « Bientôt » → ton plus muted (rappel : pas encore jouable) */
.adv-card-paid .adv-cta {
  color: color-mix(in srgb, var(--accent) 75%, var(--fg-muted));
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.adv-card-paid .adv-cta:hover {
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
}

/* L'article n'est plus cliquable globalement — on annule le effet hover qui
   ciblait le titre quand la carte entière était un lien. On le garde via JS
   tilt + border-color accent (déjà en place). */
.adv-card:hover .adv-title {
  color: color-mix(in srgb, var(--accent) 90%, white);
  transition: color 0.18s ease;
}

/* ============================================================================
 * SUPPORT PAGES — soutenir.html, pourquoi.html, changelog.html, mur.html
 *
 * Ton MONETISATION.md : artisanal, "facultatif" partout, jamais "premium".
 * Hérite des tokens existants (--accent, --card, etc.). Pas de nouvelle palette.
 *
 * Sections :
 *  - layout commun : .page-narrow, .btn-sm
 *  - soutenir.html  : .support-*, .tiers-*, .tier-*, .books-*, .funds-*, .wall-preview-*
 *  - pourquoi.html  : .pourquoi-*, .cost-breakdown
 *  - changelog.html : .changelog-*, .cl-*
 *  - mur.html       : .wall-*
 *  - jauge commune  : .cost-gauge*
 *  - footer enrichi : .footer-links, .footer-social
 * ============================================================================ */

/* ---- Layout commun --------------------------------------------------- */
.page-narrow main,
main.page-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 1.5rem 1.2rem 4rem;
}

.btn-sm {
  font-size: var(--fs-sm);
  padding: 0.4rem 0.9rem;
}

/* ---- Footer enrichi -------------------------------------------------- */
.footer-links,
.footer-social {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 1.4rem;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}
.footer-links a,
.footer-social a {
  color: var(--fg-muted);
  border-bottom: 1px dotted color-mix(in srgb, var(--fg-muted) 50%, transparent);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-links a:hover,
.footer-social a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.footer-social {
  margin-top: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
}

/* ============================================================================
 * Jauge de coûts (mock UI) — réutilisée sur soutenir.html et pourquoi.html
 * ============================================================================ */
.cost-gauge {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 1.4rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cost-gauge-label {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg);
  margin: 0 0 0.9rem;
  line-height: 1.5;
}
.cost-gauge-label strong { color: var(--accent); font-weight: 700; }

.cost-gauge-bar {
  width: 100%;
  height: 12px;
  background: color-mix(in srgb, var(--bg) 80%, var(--border));
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.cost-gauge-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--wine)));
  border-radius: 999px;
  box-shadow: 0 0 14px var(--accent-glow);
  transition: width 0.6s cubic-bezier(.2,.7,.3,1);
}
.cost-gauge-meta {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0.8rem 0 0;
}

/* ============================================================================
 * soutenir.html
 * ============================================================================ */

/* Hero */
.support-hero {
  text-align: center;
  padding: 2rem 1rem 1.4rem;
  max-width: 720px;
  margin: 0 auto;
}
.support-h1 {
  font-size: clamp(2rem, 5.5vw, 2.8rem);
  margin: 0.4rem 0 1rem;
}
.support-lead {
  font-size: var(--fs-lg);
  color: var(--fg);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}
.support-lead em {
  font-style: italic;
  color: var(--accent);
}
/* CTA principal au-dessus de la ligne de flottaison (hero soutenir). */
.support-hero-cta {
  margin: 1.4rem auto 0.9rem;
}
.support-fineprint {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.55;
}
.support-fineprint em {
  font-style: italic;
  color: var(--accent);
}

/* Section jauge */
.support-gauge-section {
  padding: 1rem clamp(1rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
/* CTA "Participer librement" dans le bloc jauge (sous la barre). */
.cost-gauge-cta {
  margin: 1.1rem 0 0;
}
/* Lien "Pourquoi 35 € ?" déplacé sous le bloc jauge (hors .cost-gauge). */
.support-gauge-section > .cost-gauge-meta {
  margin-top: 0.9rem;
}

/* Tiers */
.support-tiers {
  padding: clamp(1.6rem, 4.5vw, 3rem) clamp(1rem, 4vw, 3rem);
  max-width: 1000px;
  margin: 0 auto;
}
/* Grille 3 rangées partagée entre toutes les cartes (CSS subgrid) :
   L1 = prix, L2 = libellé, L3 = complément. Chaque card hérite des
   rows du parent → alignement vertical exact entre les 4 cartes,
   quelle que soit la longueur des textes. */
.tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  grid-template-rows: auto auto auto;
  gap: 1rem;
  margin: 1.4rem 0;
}
.tier-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0.5rem;
  align-items: center;
  justify-items: center;
  text-align: center;
  padding: 1.4rem 1rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.tier-card:hover,
.tier-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--accent-glow);
  color: var(--fg);
}
.tier-amount {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 18px var(--accent-glow);
}
.tier-label {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--fg);
}
.tier-sub {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--fg-muted);
  font-style: italic;
  line-height: 1.4;
}

/* Tier mis en avant (5€) */
.tier-featured {
  border-color: var(--accent);
  box-shadow: 0 4px 16px var(--accent-glow);
  position: relative;
}
.tier-featured::before {
  content: 'Recommandé';
  position: absolute;
  top: -10px; right: 12px;
  background: var(--accent);
  color: #1a120a;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}

/* Lien "autre montant" (remplace l'ancien form custom — incompatible avec
   le système "café à 3€" de BMC). On délègue le choix du montant à BMC. */
.tier-custom-line {
  margin-top: 1.6rem;
  text-align: center;
}

.support-disclaimer {
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  color: var(--fg-muted);
  margin: 1.4rem auto 0;
  max-width: 600px;
}
.support-disclaimer strong {
  color: var(--accent);
  font-style: normal;
}

/* Books — aventures à soutenir */
.support-books {
  padding: clamp(1.6rem, 4.5vw, 3rem) clamp(1rem, 4vw, 3rem);
  max-width: 1000px;
  margin: 0 auto;
}
.books-list {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}
.book-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease;
  display: flex;
}
.book-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.book-card-banner {
  position: absolute;
  top: 0; left: 0;
  width: 5px;
  height: 100%;
  background: var(--accent);
}
.book-card-banner.style-pirate    { background: #8b1e3f; }
.book-card-banner.style-futuriste { background: #00d2ff; }
.book-card-banner.style-fantasy   { background: var(--accent); }
.book-card-inner {
  padding: 1.2rem 1.4rem 1.3rem;
  padding-left: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.book-card-title {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: var(--fs-lg);
  color: var(--accent);
  margin: 0;
}
.book-card-meta {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0;
  letter-spacing: 0.04em;
}
.book-card-text {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--fg);
  margin: 0;
  line-height: 1.5;
}
.book-card-text strong { color: var(--accent); }

.book-card-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
  margin-top: auto;
}
.support-books-note {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--fg-muted);
  text-align: center;
  max-width: 640px;
  margin: 1.6rem auto 0;
  line-height: 1.6;
  font-size: var(--fs-md);
}
.support-books-note em { color: var(--accent); }

/* Empty state — pas encore de livres paid */
.book-card-empty {
  border-style: dashed;
  text-align: center;
}
.book-card-empty .book-card-inner {
  align-items: center;
  padding: 1.5rem;
}
.book-empty-mark {
  font-size: var(--fs-3xl);
  margin: 0;
  opacity: 0.7;
}

/* Mock illustration future */
.book-card-mock {
  opacity: 0.78;
}
.book-mock-tag {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-2xs);
  color: var(--fg-muted);
  margin: 0;
}

/* Funds */
.support-funds {
  padding: clamp(1.6rem, 4.5vw, 3rem) clamp(1rem, 4vw, 3rem);
  max-width: 880px;
  margin: 0 auto;
}
.funds-list {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: grid;
  gap: 0.9rem;
}
.funds-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.funds-mark {
  font-size: var(--fs-xl);
  line-height: 1.2;
  flex-shrink: 0;
}
.funds-list strong {
  color: var(--accent);
  font-weight: 700;
}
.funds-link {
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  margin-top: 1rem;
}

/* Coulisses (BTS) */
.support-coulisses {
  padding: clamp(1.6rem, 4.5vw, 3rem) clamp(1rem, 4vw, 3rem);
  max-width: 880px;
  margin: 0 auto;
  /* Ancre #coulisses : décale le scroll pour ne pas passer sous la topbar sticky. */
  scroll-margin-top: 6rem;
}
.coulisses-intro {
  margin: 1.2rem 0 0;
}
.coulisses-list {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: grid;
  gap: 0.9rem;
}
.coulisses-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.coulisses-mark {
  font-size: var(--fs-xl);
  line-height: 1.2;
  flex-shrink: 0;
}
.coulisses-list strong {
  display: block;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.coulisses-cta {
  text-align: center;
  margin-top: 1.6rem;
}
.coulisses-cta-note {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin-top: 0.6rem;
}

/* Wall preview */
.support-wall-preview {
  padding: clamp(1.6rem, 4.5vw, 3rem) clamp(1rem, 4vw, 3rem);
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.wall-preview-grid {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.wall-chip {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  padding: 0.35rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg);
}
.wall-preview-link {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  margin-top: 0.6rem;
}

/* Support FAQ section */
.support-faq {
  padding: clamp(1.6rem, 4.5vw, 3rem) clamp(1rem, 4vw, 3rem);
  max-width: 880px;
  margin: 0 auto;
}

/* Final */
.support-final {
  padding: clamp(1.8rem, 5vw, 3rem) clamp(1rem, 4vw, 3rem) clamp(1.6rem, 4vw, 2.4rem);
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.support-final-text {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--fg);
  margin: 0 0 1.2rem;
}
.support-final-cta { margin: 0 0 0.9rem; }
.support-final-foot {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  color: var(--fg-muted);
}
.support-final-foot em {
  color: var(--accent);
  font-style: italic;
}

/* ============================================================================
 * pourquoi.html
 * ============================================================================ */
.pourquoi-article {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.pourquoi-header {
  text-align: center;
  padding: 1rem 0 0.8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.pourquoi-h1 {
  font-size: clamp(2.2rem, 6vw, 3rem);
  margin: 0.4rem 0 0.8rem;
}
.pourquoi-lead {
  font-size: var(--fs-lg);
  color: var(--fg);
  max-width: 600px;
  margin: 0 auto 1rem;
  line-height: 1.6;
}
.pourquoi-facts {
  max-width: 640px;
  margin: 1.2rem auto 0;
  color: var(--fg-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}
.pourquoi-facts strong { color: var(--fg); font-weight: 600; }

.pourquoi-section {
  padding: 1.2rem 0;
}
.pourquoi-section h2 {
  font-size: var(--fs-lg);
  margin-bottom: 0.8rem;
  color: var(--accent);
}
.pourquoi-section p {
  line-height: 1.7;
  margin: 0 0 0.9rem;
}
.pourquoi-section p:last-child { margin-bottom: 0; }
.pourquoi-section strong { color: var(--accent); font-weight: 700; }
.pourquoi-section em { color: color-mix(in srgb, var(--accent) 75%, var(--fg)); font-style: italic; }

.pourquoi-note {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--fg-muted);
}

/* Coût détaillé */
.cost-breakdown {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1.2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 0.8rem 0 1rem;
}
.cost-breakdown > div {
  display: contents;
}
.cost-breakdown dt {
  font-family: var(--font-body);
  color: var(--fg);
}
.cost-breakdown dd {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  text-align: right;
  margin: 0;
}
.cost-breakdown .cost-total dt,
.cost-breakdown .cost-total dd {
  border-top: 1px dashed var(--border);
  padding-top: 0.4rem;
  margin-top: 0.2rem;
}
.cost-breakdown .cost-total dt { color: var(--accent); font-weight: 700; }
.cost-breakdown .cost-total dd strong { color: var(--accent); }

/* Listes Pourquoi */
.pourquoi-checklist,
.pourquoi-priorities,
.pourquoi-social {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 1.4rem;
  display: grid;
  gap: 0.5rem;
}
.pourquoi-checklist li,
.pourquoi-priorities li {
  position: relative;
  padding: 0.55rem 0.9rem 0.55rem 2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.pourquoi-checklist li::before {
  content: '✦';
  position: absolute;
  left: 0.7rem; top: 0.55rem;
  color: var(--accent);
}
.pourquoi-priorities {
  counter-reset: pri;
}
.pourquoi-priorities li {
  counter-increment: pri;
}
.pourquoi-priorities li::before {
  content: counter(pri) '.';
  position: absolute;
  left: 0.8rem; top: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
}
.pourquoi-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.pourquoi-social li {
  list-style: none;
}
.pourquoi-social a {
  display: inline-block;
  padding: 0.45rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
}
.pourquoi-social a:hover {
  border-color: var(--accent);
}

.pourquoi-cta {
  text-align: center;
  padding: 2rem 1rem;
  background: linear-gradient(180deg, transparent, var(--card));
  border-radius: var(--radius);
  margin-top: 1rem;
}
.pourquoi-cta-text {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--fg);
  margin: 0 0 1rem;
}
.pourquoi-cta-foot {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0.8rem 0 0;
}

/* ============================================================================
 * changelog.html
 * ============================================================================ */
.changelog-header {
  text-align: center;
  padding: 1.2rem 0 1.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  margin-bottom: 1.8rem;
}
.changelog-h1 {
  font-size: clamp(2rem, 5.5vw, 2.8rem);
  margin: 0.4rem 0 0.8rem;
}
.changelog-lead {
  font-size: var(--fs-base);
  color: var(--fg);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Feed timeline */
.changelog-feed {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.4rem;
  position: relative;
}
.cl-entry {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
  padding: 0.6rem 0 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.cl-entry:last-child { border-bottom: 0; }
.cl-date {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-top: 0.25rem;
}
.cl-entry article {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cl-title {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: var(--fs-lg);
  color: var(--accent);
  margin: 0;
}
.cl-funded {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--accent-soft);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  align-self: flex-start;
}
.cl-entry p {
  margin: 0;
  line-height: 1.65;
}
.cl-thanks {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin-top: 0.2rem !important;
}
.cl-credit {
  display: inline-block;
  margin: 0 0.15rem;
  padding: 0.08rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg);
  font-size: var(--fs-sm);
}

.changelog-cta {
  text-align: center;
  margin-top: 2.4rem;
  padding: 1.6rem 1rem;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.changelog-cta p { margin: 0.4rem 0; }

@media (max-width: 640px) {
  .cl-entry {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .cl-date { padding-top: 0; }
}

/* ============================================================================
 * mur-de-remerciements.html
 * ============================================================================ */
.wall-header {
  text-align: center;
  padding: 1.2rem 0 1.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  margin-bottom: 1.4rem;
}
.wall-h1 {
  font-size: clamp(2rem, 5.5vw, 2.8rem);
  margin: 0.4rem 0 0.8rem;
}
.wall-lead {
  font-size: var(--fs-base);
  color: var(--fg);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.6;
}

.wall-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.6rem 0 1.8rem;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}
.wall-filter-label {
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}
.wall-select {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  padding: 0.45rem 0.8rem;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  appearance: none;
}
.wall-select:focus-visible {
  border-color: var(--accent);
  outline-offset: 2px;
}

.wall-group {
  margin-bottom: 2.2rem;
}
.wall-group-header {
  text-align: center;
  margin-bottom: 1rem;
  position: relative;
}
.wall-month {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: var(--fs-xl);
  color: var(--accent);
  margin: 0 0 0.2rem;
}
.wall-month-meta {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0;
  letter-spacing: 0.04em;
}

.wall-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
}
.wall-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  text-align: center;
  transition: border-color 0.18s, transform 0.18s;
}
.wall-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.wall-card-pseudo {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg);
  letter-spacing: 0.02em;
}
.wall-card-anon .wall-card-pseudo {
  color: var(--fg-muted);
  font-style: italic;
}
.wall-card-first {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--accent-soft) 50%, var(--card)));
}

.wall-cta {
  text-align: center;
  padding: 2rem 1rem;
  background: linear-gradient(180deg, transparent, var(--card));
  border-radius: var(--radius);
  margin-top: 1.6rem;
}
.wall-cta-text {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--fg);
  margin: 0 0 1rem;
}
.wall-cta-foot {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0.8rem 0 0;
}
.wall-cta-foot em { color: var(--accent); }

/* ============================================================================
 * Éléments narratifs (manifeste, mot du créateur, intros de sections)
 * Ajoutés pour donner du blabla conforme à MONETISATION.md.
 * ============================================================================ */

/* Sous-lead du hero (soutenir) */
.support-sublead {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg-muted);
  max-width: 600px;
  margin: 0.8rem auto 0;
  line-height: 1.6;
}

/* Manifeste (soutenir) — encart distinct du reste */
.support-manifesto {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1rem, 4vw, 3rem);
}
.manifesto-title {
  font-size: var(--fs-xl);
  text-align: center;
  margin: 0 0 1.2rem;
}
.manifesto-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}
.manifesto-list li {
  padding: 0.85rem 1.1rem;
  background: var(--card);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  line-height: 1.55;
}
.manifesto-list strong {
  display: block;
  color: var(--accent);
  font-weight: 700;
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
  font-size: var(--fs-base);
}

/* Intros de sections sur soutenir.html */
.tiers-intro,
.funds-intro,
.wall-preview-intro {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg);
  max-width: 640px;
  margin: 0 auto 1.4rem;
  line-height: 1.6;
}
.wall-preview-intro {
  font-style: italic;
  color: var(--fg-muted);
}

/* Other ways — alternatives non-payantes */
.support-other {
  padding: clamp(1.6rem, 4.5vw, 3rem) clamp(1rem, 4vw, 3rem);
  max-width: 880px;
  margin: 0 auto;
}
.other-ways {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: grid;
  gap: 0.9rem;
}
.other-ways li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  line-height: 1.55;
}
.other-mark {
  font-size: var(--fs-xl);
  line-height: 1.2;
  flex-shrink: 0;
}
.other-ways strong {
  color: var(--accent);
  font-weight: 700;
  display: block;
  margin-bottom: 0.15rem;
}

/* Aside final (soutenir) */
.support-final-aside {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg-muted);
  max-width: 560px;
  margin: 0 auto 1.4rem;
  line-height: 1.65;
  font-style: italic;
}

/* Liste des choix écartés (pourquoi.html) */
.pourquoi-choices {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 1rem;
  display: grid;
  gap: 0.7rem;
}
.pourquoi-choices li {
  position: relative;
  padding: 0.8rem 1.1rem 0.8rem 2.2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  line-height: 1.6;
}
.pourquoi-choices li::before {
  content: '✗';
  position: absolute;
  left: 0.85rem; top: 0.75rem;
  color: var(--danger);
  font-weight: 700;
  font-family: var(--font-display);
}
.pourquoi-choices strong {
  color: var(--accent);
}

/* Mot du créateur (mur) */
.wall-word {
  max-width: 720px;
  margin: 1.4rem auto;
  padding: 1.6rem 1.6rem 1.2rem;
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--accent-soft) 35%, var(--card)));
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.wall-word-text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--fg);
  margin: 0 0 0.9rem;
}
.wall-word-text strong { color: var(--accent); }
.wall-word-signature {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: var(--fs-md);
  color: var(--accent);
  text-align: right;
  margin: 0.4rem 0 0;
}

/* Section "Comment ça marche" (mur) */
.wall-meaning {
  max-width: 720px;
  margin: 0 auto 1.4rem;
  padding: 0.6rem 0;
}
.wall-meaning-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.wall-meaning-list li {
  padding: 0.7rem 1rem;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  line-height: 1.55;
}
.wall-meaning-list strong {
  color: var(--accent);
  display: inline-block;
  margin-right: 0.3rem;
}

/* Sous-lead du changelog */
.changelog-sublead {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--fg-muted);
  max-width: 580px;
  margin: 0.8rem auto 0;
  line-height: 1.65;
  font-size: var(--fs-base);
}

/* ============================================================================
 * Encart soutien sur les fiches éditoriales d'aventure
 * (www/aventures/<key>.html) — discret, après le CTA principal.
 * ============================================================================ */
.adv-support-encart {
  border-bottom: none !important;
  margin-top: 1rem;
}
.adv-support-card {
  text-align: center;
  padding: 1.6rem 1.4rem 1.4rem;
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--accent-soft) 30%, var(--card)));
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--radius);
}
.adv-support-mark {
  font-size: var(--fs-2xl);
  margin: 0 0 0.5rem;
  line-height: 1;
}
.adv-support-text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg);
  max-width: 540px;
  margin: 0 auto 1rem;
  line-height: 1.6;
}
.adv-support-text em {
  color: var(--accent);
  font-style: italic;
}
.adv-support-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8rem 1.2rem;
  margin: 0;
}
.adv-support-link {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  border-bottom: 1px dotted color-mix(in srgb, var(--fg-muted) 50%, transparent);
  padding-bottom: 1px;
}
.adv-support-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ============================================================================
 * Pages éditoriales SEO (/ldvelh.php, /mode-hors-ligne.php, listicle…) et hub
 * catalogue (/aventures/). Classes NON préfixées « adv- » (les adblockers
 * masquent .adv-*), réutilisant le système de design existant.
 * ============================================================================ */

/* ---- Pages éditoriales (calque .pourquoi-*) ---------------------------- */
.editorial {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.editorial-header {
  text-align: center;
  padding: 1rem 0 0.8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.editorial-h1 {
  font-size: clamp(2rem, 5.5vw, 2.9rem);
  margin: 0.4rem 0 0.8rem;
  line-height: 1.15;
}
.editorial-lead {
  font-size: var(--fs-lg);
  color: var(--fg);
  max-width: 620px;
  margin: 0 auto 1rem;
  line-height: 1.6;
}
.editorial-section {
  padding: 1.1rem 0;
}
.editorial-section h2 {
  font-size: var(--fs-lg);
  margin-bottom: 0.8rem;
  color: var(--accent);
}
.editorial-section h3 {
  font-size: var(--fs-base);
  margin: 1rem 0 0.4rem;
  color: color-mix(in srgb, var(--accent) 85%, var(--fg));
}
.editorial-section p {
  line-height: 1.75;
  margin: 0 0 0.9rem;
}
.editorial-section p:last-child { margin-bottom: 0; }
.editorial-section strong { color: var(--accent); font-weight: 700; }
.editorial-section em { color: color-mix(in srgb, var(--accent) 75%, var(--fg)); font-style: italic; }
.editorial-section a,
.editorial-cta-text a {
  color: var(--accent);
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 50%, transparent);
}
.editorial-section a:hover { border-bottom-style: solid; }
.editorial-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 1.2rem;
  display: grid;
  gap: 0.5rem;
}
.editorial-list li {
  position: relative;
  padding: 0.55rem 0.9rem 0.55rem 2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  line-height: 1.6;
}
.editorial-list li::before {
  content: '✦';
  position: absolute;
  left: 0.7rem; top: 0.55rem;
  color: var(--accent);
}
.editorial-cta {
  text-align: center;
  padding: 1.4rem 0 0.4rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.editorial-cta-text {
  font-size: var(--fs-lg);
  margin-bottom: 1rem;
}

/* ---- Hub catalogue (/aventures/) -------------------------------------- */
.catalogue-header {
  text-align: center;
  padding: 1rem 0 1.2rem;
}
.catalogue-h1 {
  font-size: clamp(2rem, 5.5vw, 2.9rem);
  margin: 0.4rem 0 1rem;
  line-height: 1.15;
}
.catalogue-intro {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}
.catalogue-intro p {
  line-height: 1.75;
  margin: 0 0 0.9rem;
}
.catalogue-intro strong { color: var(--accent); font-weight: 700; }
.catalogue-intro em { font-style: italic; color: color-mix(in srgb, var(--accent) 75%, var(--fg)); }
.catalogue-facts {
  margin-top: 1.4rem !important;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 0.97rem;
}

.catalogue-grid {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: stretch;
}
.catalogue-card { display: flex; margin: 0; }
.catalogue-card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%; /* hauteur uniforme sur la rangée (règle projet permanente) */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.catalogue-card-link:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--accent-glow);
}
.catalogue-card-cover {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface);
  display: block;
}
.catalogue-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catalogue-card-cover.is-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--surface), var(--card));
}
.catalogue-card-mark {
  font-size: 2.4rem;
  color: color-mix(in srgb, var(--accent) 55%, var(--fg-muted));
  opacity: 0.7;
}
.catalogue-card-body {
  padding: 1.2rem 1.3rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  flex: 1;
}
.catalogue-card-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.catalogue-card-title {
  font-family: var(--font-display);
  font-variant: small-caps; letter-spacing: 0.06em;
  font-size: var(--fs-xl);
  color: var(--accent);
  line-height: 1.2;
}
.catalogue-card-link:hover .catalogue-card-title {
  color: color-mix(in srgb, var(--accent) 80%, white);
}
.catalogue-card-tagline {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg);
  flex: 1;
}
.catalogue-card-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.catalogue-chip {
  display: inline-flex; align-items: center;
  padding: 0.15rem 0.55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.catalogue-chip-price { color: var(--success); }
.catalogue-card-cta {
  font-family: var(--font-display);
  font-variant: small-caps; letter-spacing: 0.08em;
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--accent);
  margin-top: 0.3rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--border);
}
.catalogue-empty {
  text-align: center;
  color: var(--fg-muted);
  padding: 2rem 0;
}
.catalogue-more {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.catalogue-more h2 {
  font-size: var(--fs-lg);
  color: var(--accent);
  margin-bottom: 0.8rem;
}
.catalogue-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.catalogue-links a {
  display: block;
  padding: 0.6rem 0.9rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg);
  text-decoration: none;
}
.catalogue-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- Bandeau différenciateurs sous le hero (home) --------------------- */
.hero-usp {
  list-style: none;
  margin: 1.6rem auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.6rem;
  max-width: 640px;
}
.hero-usp li {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  padding: 0.28rem 0.7rem;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.hero-usp li::before {
  content: '✓ ';
  color: var(--accent);
  font-weight: 700;
}

/* ---- Skip-link (a11y, WCAG 2.4.1) : caché jusqu'au focus clavier ------ */
.skip-link {
  position: absolute;
  left: 0.6rem;
  top: 0.6rem;
  z-index: 200;
  transform: translateY(-160%);
  background: var(--accent);
  color: #1a120a;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}