/* ════════════════════════════════════════════════════════════════════════════
   SMASH YUZU — identité « affiche imprimée »
   Chargée après le <style> de chaque page : elle redéfinit les tokens, la typo
   et les composants communs. Principes : papier plutôt qu'écran noir, aplats
   plutôt que dégradés, filets plutôt que cadres colorés, encre plutôt que néon.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Papier */
  --paper:    #f4efe3;
  --paper-2:  #eee7d8;
  --card:     #fffdf8;

  /* Encre */
  --ink:      #17140f;
  --ink-2:    #4b4436;
  --ink-3:    #857c6b;
  --rule:     #ddd4c2;
  --rule-2:   #cabfa8;

  /* Deux couleurs, pas douze */
  --vermilion: #c1441a;
  --yuzu:      #cf8a00;

  /* Tokens hérités des pages — réécrits ici pour tout repeindre d'un coup */
  --bg:       var(--paper);
  --surface:  var(--card);
  --surface2: #f7f2e7;
  --surface3: #efe8d9;
  --border:   var(--rule);
  --accent:   var(--vermilion);
  --accent2:  var(--yuzu);
  --text:     var(--ink);
  --muted:    var(--ink-3);
  --gold:     #a8791d;
  --silver:   #8b8f97;
  --bronze:   #9c6330;
  --green:    #2f7245;
  --red:      #b8392b;
  --purple:   #6a3fa5;

  --font-display: 'Anton', 'Bebas Neue', Impact, sans-serif;
  --font-ui:      'Libre Franklin', 'Space Grotesk', system-ui, sans-serif;
  --font-num:     'JetBrains Mono', ui-monospace, monospace;

  --radius: 2px;
}

/* ── LE FOND ────────────────────────────────────────────────────────────────
   Quatre couches imprimées, aucune lueur : la trame de points d'un journal,
   une réglure horizontale très pâle, un liseré diagonal vermillon, et le grain
   du papier posé par-dessus en multiply. */
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(23, 20, 15, .062) 1px, transparent 0),
    repeating-linear-gradient(0deg, transparent 0 43px, rgba(23, 20, 15, .03) 43px 44px),
    repeating-linear-gradient(122deg, rgba(193, 68, 26, .035) 0 1px, transparent 1px 9px);
  background-size: 19px 19px, auto, auto;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  mix-blend-mode: multiply; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)' opacity='.09'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

/* ── TYPOGRAPHIE ───────────────────────────────────────────────────────────── */
h1, h2, h3,
.section-title, .sec-title, .page-title, .tier-name, .hero h1, .page-header h1 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .01em;
  text-transform: uppercase;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.player-pts, .rank-num, .card-pts, .stat-num, .stat-box .val,
.hero-stat .n, .card-rank, .elo-value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
}

a { color: inherit; }
::selection { background: rgba(207, 138, 0, .3); }
:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Aucune lueur nulle part : ce qui reste doit tenir par le trait. */
* { box-shadow: none !important; text-shadow: none !important; }

/* ── MARQUE ────────────────────────────────────────────────────────────────── */
.logo {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; background: none; letter-spacing: normal;
  -webkit-text-fill-color: currentColor;
}
.logo-mark { width: 34px; height: 34px; flex: none; filter: none; }
.logo-word { display: flex; flex-direction: column; }
.logo-word-1 {
  font-family: var(--font-ui); font-size: .55rem; font-weight: 700;
  letter-spacing: .34em; text-transform: uppercase; color: var(--ink-3);
}
.logo-word-2 {
  font-family: var(--font-display); font-size: 1.3rem; line-height: .88;
  letter-spacing: .04em; color: var(--ink);
}
.logo:hover .logo-word-2 { color: var(--vermilion); }

.brand-lockup { display: flex; align-items: center; gap: 1rem; }
.brand-lockup .logo-mark { width: 84px; height: 84px; }
.brand-lockup .logo-word-1 { font-size: .78rem; letter-spacing: .44em; }
.brand-lockup .logo-word-2 { font-size: 3.6rem; letter-spacing: .02em; }

/* ── NAV ───────────────────────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  backdrop-filter: none;
  padding: .8rem 1.6rem;
}
nav::after { display: none; }

/* ── BOUTONS ───────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-ui); font-weight: 700;
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--radius);
  padding: .5rem 1rem;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); transform: none; opacity: 1; }

.btn-primary { background: var(--vermilion); border-color: var(--vermilion); color: #fff8ef; }
.btn-primary:hover { background: #a83914; border-color: #a83914; color: #fff8ef; filter: none; }

.btn-ghost, .btn-ranking { background: transparent; border-color: var(--rule-2); color: var(--ink-2); }
.btn-ghost:hover, .btn-ranking:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn-shop { background: transparent; border-color: var(--purple); color: var(--purple); }
.btn-shop::before { display: none; }
.btn-shop:hover { background: var(--purple); color: #fff8ef; border-color: var(--purple); }

.btn-discord { background: #4a56d6; border-color: #4a56d6; color: #fff; }
.btn-discord:hover { background: #3a45b8; border-color: #3a45b8; color: #fff; }

.btn-danger { background: transparent; border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff8ef; }

/* ── PASTILLES ─────────────────────────────────────────────────────────────── */
.season-chip, .top10-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-ui); font-size: .62rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--vermilion);
  background: transparent;
  border: 1px solid var(--vermilion);
  border-radius: 0;
  padding: .26rem .6rem .22rem;
}
.season-chip::before { display: none; }
.season-chip.is-preseason { color: var(--ink-3); border-color: var(--rule-2); }

.placement-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-num); font-size: .68rem; font-weight: 700;
  color: var(--ink-2); background: var(--paper-2);
  border: 1px solid var(--rule-2); border-radius: 0;
  padding: .1rem .4rem;
}
.placement-badge::before { display: none; }
.placement-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.placement-dots i { width: 13px; height: 3px; background: var(--rule-2); display: inline-block; }
.placement-dots i.done { background: var(--vermilion); }

/* ── CARTES & LIGNES ───────────────────────────────────────────────────────── */
.player-row, .lfm-card, .player-card, .match-card, .report-card, .stat-box,
.season-box, .hof-card, .see-all-banner, .whatsup-stage, .tier-section {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.player-row { border-left: 1px solid var(--rule); transition: background .15s ease; }
.player-row:hover { background: var(--paper-2); border-color: var(--rule-2); transform: none; }
.player-row.rank-1, .player-row.rank-2, .player-row.rank-3 { border-left: 1px solid var(--rule); }
.player-row-banner img { opacity: .1 !important; }

.rank-num { color: var(--ink-3); font-size: 1.3rem; }
.rank-num::before { content: '#'; font-size: .6em; opacity: .5; }
.rank-1 .rank-num { color: var(--vermilion); }
.rank-2 .rank-num, .rank-3 .rank-num { color: var(--ink-2); }

.player-name { font-weight: 700; color: var(--ink); }
.player-record, .card-sub, .player-char { color: var(--ink-3); }
.player-pts { color: var(--ink); }
.player-pts span, .card-pts span { font-family: var(--font-ui); font-size: .7rem; color: var(--ink-3); }

.wr-bar { background: var(--paper-2); border: 1px solid var(--rule); height: 6px; }
.wr-fill { background: var(--vermilion); }

/* ── ONGLETS ───────────────────────────────────────────────────────────────── */
.tabs, .section-nav { border-bottom: 1px solid var(--ink); gap: 0; }
.tab, .section-tab, .filter-tab {
  font-family: var(--font-ui); font-weight: 700; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); background: transparent; border: 0; border-radius: 0;
  padding: .75rem 1rem;
}
.tab.active, .section-tab.active, .filter-tab.active {
  color: var(--ink); background: transparent;
  border-bottom: 3px solid var(--vermilion); margin-bottom: -1px;
}
.tab::after { display: none; }
.tab:hover, .section-tab:hover, .filter-tab:hover { color: var(--ink); background: transparent; }

/* ── FORMULAIRES ───────────────────────────────────────────────────────────── */
input, select, textarea {
  font-family: var(--font-ui) !important;
  background: var(--card) !important;
  border: 1px solid var(--rule-2) !important;
  color: var(--ink) !important;
  border-radius: var(--radius) !important;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { border-color: var(--ink) !important; outline: none; }

/* ── OUVERTURE DE L'ACCUEIL ────────────────────────────────────────────────── */
.hero-v2 {
  position: relative; overflow: hidden;
  padding: 3.2rem 2rem 0;
  border-bottom: 1px solid var(--ink);
}
/* Filigrane : la marque agrandie, imprimée en pâle dans l'angle */
.hero-v2::before {
  content: '';
  position: absolute; top: -14%; right: -5%;
  width: 30rem; height: 30rem;
  background: url('/static/logo.svg') center/contain no-repeat;
  opacity: .07;
  transform: rotate(-9deg);
  pointer-events: none;
}
.hero-inner {
  position: relative; max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 2rem;
}
.hero-brand { max-width: 46rem; }
.hero-brand .season-chip { margin-bottom: 1.1rem; }
.hero-tag {
  font-size: 1rem; color: var(--ink-2); max-width: 44ch;
  margin-top: 1.1rem; line-height: 1.6;
}
.hero-tag b { color: var(--vermilion); font-weight: 700; }
.hero-side { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
@media (min-width: 900px) { .hero-side { align-items: flex-end; } }
.hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.3rem; }

.hero-rules { list-style: none; margin: 0; padding: 0; max-width: 30rem; }
.hero-rules li {
  display: flex; gap: .7rem; align-items: baseline; padding: .45rem 0;
  font-size: .88rem; color: var(--ink-2); border-top: 1px solid var(--rule);
}
.hero-rules li:first-child { border-top: 0; }
.hero-rules span { font-family: var(--font-num); font-size: .7rem; color: var(--vermilion); flex: none; }

.stat-strip {
  position: relative; max-width: 1200px; margin: 2.4rem auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--ink);
}
.stat-cell { padding: 1rem 1.2rem 1.1rem; border-right: 1px solid var(--rule); }
.stat-cell:last-child { border-right: 0; }
.stat-num { display: block; font-size: 1.9rem; line-height: 1; }
.stat-lab {
  display: block; margin-top: .4rem; font-size: .62rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.stat-cell.is-live .stat-num { color: var(--vermilion); }

/* ── SECTIONS ──────────────────────────────────────────────────────────────── */
.section-title, .sec-title { display: flex; align-items: center; gap: .8rem; }
.sec-title::after, .section-title::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

.page-header { padding: 3.2rem 2rem 1.6rem; }
.page-header h1 { font-size: 3.8rem; color: var(--ink); }
.page-header h1::after {
  content: ''; display: block; width: 3rem; height: 3px; margin: .8rem auto 0;
  background: var(--vermilion);
}
.page-header p, .page-sub { color: var(--ink-3); letter-spacing: .18em; }
.page-header-bg, .hero-bg { display: none; }

/* ── TIERS ─────────────────────────────────────────────────────────────────── */
.tier-section { background: transparent; border: 0; }
.tier-header {
  background: var(--card); border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
}
.tier-icon {
  font-family: var(--font-display); font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 2.4rem;
  background: var(--ink); color: var(--paper); border: 0; border-radius: 0;
}
.tier-name { color: var(--ink) !important; }
.tier-range, .tier-empty { color: var(--ink-3); }
.tier-count {
  background: transparent; border: 1px solid var(--rule-2); color: var(--ink-2) !important;
  border-radius: 0; font-family: var(--font-ui); font-size: .64rem; letter-spacing: .14em;
}
.legend-pill {
  font-family: var(--font-ui); font-weight: 700; font-size: .72rem;
  letter-spacing: .06em; border-radius: 0;
  border: 1px solid var(--rule-2) !important; color: var(--ink-2) !important;
  background: var(--card) !important;
}
.legend-pill:hover { background: var(--ink) !important; color: var(--paper) !important; }
.card-rank { color: var(--vermilion); }
.card-pts { color: var(--ink); }

/* ── PALMARÈS ──────────────────────────────────────────────────────────────── */
.hof { max-width: 1200px; margin: 2rem auto 0; padding: 0 2rem;
       display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.hof-card { padding: 1rem 1.1rem; clip-path: none; }
.hof-season {
  font-family: var(--font-display); font-size: .95rem; letter-spacing: .1em; color: var(--ink);
  border-bottom: 1px solid var(--rule); padding-bottom: .5rem; margin-bottom: .6rem;
}
.hof-row { display: flex; align-items: center; gap: .55rem; padding: .2rem 0; font-size: .9rem; }
.hof-pos { font-family: var(--font-num); font-size: .72rem; width: 1.4rem; color: var(--ink-3); }
.hof-row.p1 .hof-pos { color: var(--vermilion); }
.hof-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-pts { font-family: var(--font-num); font-size: .78rem; color: var(--ink-3); }

/* ── PLACEMENTS ────────────────────────────────────────────────────────────── */
.placement-strip {
  border: 1px dashed var(--rule-2); background: var(--paper-2);
  border-radius: var(--radius); padding: .9rem 1.1rem; margin-top: 1.2rem;
}
.placement-strip-title {
  font-family: var(--font-ui); font-size: .62rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .7rem;
}
.placement-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.placement-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--card); border: 1px solid var(--rule-2); border-radius: 999px;
  padding: .25rem .7rem .25rem .28rem; font-size: .85rem; text-decoration: none; color: var(--ink);
}
.placement-pill img { width: 22px; height: 22px; border-radius: 50%; }
.placement-pill:hover { border-color: var(--ink); }

/* ── ENJEU DU SET ──────────────────────────────────────────────────────────── */
.stakes {
  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;
  gap: .5rem; margin: 0 auto 1.4rem; max-width: none;
}
.stakes-line {
  font-family: var(--font-ui); font-size: .76rem; font-weight: 600;
  color: var(--ink-2); background: var(--card);
  border: 1px solid var(--rule-2); border-radius: 0; padding: .35rem .7rem;
}
.stakes-line b { font-family: var(--font-num); color: var(--ink); }
.stakes-line.warn { border-color: var(--vermilion); color: var(--vermilion); background: var(--card); }
.stakes-line.warn b { color: var(--vermilion); }
.stakes-line.dim { color: var(--ink-3); }

/* ── ADMIN : SAISON ────────────────────────────────────────────────────────── */
.season-panel { display: grid; gap: 1.2rem; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.2fr); align-items: start; }
.season-box { padding: 1.4rem; }
.season-box h3 { font-family: var(--font-display); font-size: 1rem; letter-spacing: .1em; color: var(--ink); margin-bottom: .8rem; }
.season-current { font-family: var(--font-display); font-size: 2.8rem; line-height: 1; color: var(--vermilion); }
.season-meta { color: var(--ink-3); font-size: .88rem; margin-top: .5rem; }
.season-warn {
  border: 1px solid var(--rule-2); border-left: 3px solid var(--vermilion);
  background: var(--paper-2); color: var(--ink-2);
  padding: .85rem 1rem; margin: 1rem 0; font-size: .9rem;
}
.season-warn ul { margin: .5rem 0 0 1.1rem; }

/* ── DIVERS ────────────────────────────────────────────────────────────────── */
.profile-rank { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--ink-3); }
.see-all-banner { border-left: 3px solid var(--vermilion); }
.see-all-text strong { color: var(--vermilion); }
.empty, .tier-empty { color: var(--ink-3); }
.unread-bell { background: var(--card); border: 1px solid var(--rule-2); color: var(--ink-2); }
.unread-bell:hover { border-color: var(--ink); }
.unread-bell-count { background: var(--vermilion); color: #fff8ef; }
.unread-panel { background: var(--card); border: 1px solid var(--rule-2); }
.nav-rcoin-badge {
  background: transparent; border: 1px solid var(--purple); color: var(--purple);
  border-radius: 999px; font-family: var(--font-num); font-size: .8rem; letter-spacing: 0;
}
.nav-rcoin-badge:hover { background: var(--purple); color: #fff8ef; }
.notif-popup { background: var(--card) !important; border: 1px solid var(--ink) !important; color: var(--ink) !important; }

@media (max-width: 760px) {
  nav { flex-wrap: wrap; gap: .5rem; padding: .65rem .9rem; }
  nav > *, .nav-left, .nav-right, .nav-links, .nav-center { flex-wrap: wrap; gap: .45rem; }
  .btn { font-size: .72rem; padding: .42rem .7rem; }
  .brand-lockup .logo-word-2 { font-size: 2.4rem; }
  .brand-lockup .logo-mark { width: 58px; height: 58px; }
  .hero-v2 { padding: 2.2rem 1.1rem 0; }
  .hero-v2::before { width: 18rem; height: 18rem; opacity: .05; }
  .season-panel { grid-template-columns: 1fr; }
  .page-header h1 { font-size: 2.6rem; }
}

/* Le liseré coloré des trois premières places devient une simple barre d'encre
   pour le leader, rien pour les autres : la couleur reste l'exception. */
.player-row::before { background: transparent !important; width: 3px; }
.player-row.rank-1::before { background: var(--ink) !important; }
.player-row.rank-1, .player-row.rank-2, .player-row.rank-3 {
  border-color: var(--rule) !important; background: var(--card);
}
.player-row:hover { border-color: var(--rule-2) !important; }
.player-avatar, .card-avatar, .profile-avatar { border: 1px solid var(--rule-2) !important; }

/* ── Corrections de contraste sur fond papier ──────────────────────────────── */
/* Cartes RCoins : le texte redevient de l'encre, le violet n'est plus qu'un filet */
.balance-card, .coin-pack, .info-card, .pack-badge, .rcoin-card {
  background: var(--card) !important;
  border: 1px solid var(--rule-2) !important;
  color: var(--ink) !important;
}
.balance-amount, .pack-coins, .pack-price, #rcoin-balance { color: var(--ink) !important; }
.balance-amount .r-prefix, .pack-coins span { color: var(--purple) !important; }
.balance-label, .balance-sub, .pack-label { color: var(--ink-3) !important; }
.coin-pack.best-value { border-color: var(--yuzu) !important; }
.pack-badge { background: var(--yuzu) !important; border-color: var(--yuzu) !important; color: #1b1400 !important; }
.btn-buy-coins, .btn-buy, .btn-equip-dash, .btn-equip-lb {
  background: var(--ink) !important; border: 1px solid var(--ink) !important; color: var(--paper) !important;
}
.btn-buy-coins:hover, .btn-buy:hover { background: var(--vermilion) !important; border-color: var(--vermilion) !important; }
.balance-card::before, .coin-pack::before { display: none !important; }

/* Statistiques du profil : une seule encre, les libellés en gris */
.stat-box .val, .stat-box.pts .val, .stat-box.peak .val, .stat-box.wins .val,
.stat-box.losses .val, .stat-box.stocks .val { color: var(--ink) !important; }
.stat-box .lbl { color: var(--ink-3) !important; }

/* Plus de liseré coloré sur les grandes cartes */
.profile-card, .profile-header, .dash-card, .info-card, .lfm-card, .match-card {
  border-left-color: var(--rule) !important;
}
.claim-card { background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: var(--radius); }

/* Textes hérités du thème sombre qui restaient blancs sur le papier */
.fighter-name { color: var(--ink) !important; }
.rcoin-amount, .price-tag, .pack-preview-coins, .coins-added { color: var(--ink) !important; }
.wu-slide-text { color: var(--ink) !important; }
.whatsup-stage { background: var(--card); border: 1px solid var(--rule); }
.tab-badge { background: var(--vermilion) !important; color: var(--paper) !important; }
/* Les superpositions plein écran gardent un fond sombre : le blanc y reste juste */
.mfo-name, .match-found-overlay * { }

/* ── Manchette ─────────────────────────────────────────────────────────────
   Double filet sous la nav, ligne de date en petites capitales, tampon de
   saison légèrement de travers : les codes de l'imprimé plutôt que ceux de
   l'écran. */
nav { border-bottom: 3px solid var(--ink); }
nav::after {
  display: block; content: '';
  position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--ink); opacity: 1;
}

.dateline {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
  font-size: .64rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: .9rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.dateline span + span::before { content: '·'; margin-right: .9rem; color: var(--rule-2); }
.dateline span:last-child { color: var(--ink-2); font-family: var(--font-num); letter-spacing: .1em; }

.hero-brand .season-chip { transform: rotate(-1.4deg); transform-origin: left center; }

/* Grain un peu plus franc : on doit sentir le papier sans gêner la lecture */
body { background-image:
  radial-gradient(circle at 1px 1px, rgba(23, 20, 15, .085) 1px, transparent 0),
  repeating-linear-gradient(0deg, transparent 0 43px, rgba(23, 20, 15, .035) 43px 44px),
  repeating-linear-gradient(122deg, rgba(193, 68, 26, .045) 0 1px, transparent 1px 9px); }

@media (max-width: 760px) {
  .dateline { gap: .5rem 1rem; font-size: .58rem; }
  .dateline span + span::before { content: none; }
}

/* ── MODE NUIT ─────────────────────────────────────────────────────────────
   Basculer entre papier (jour) et encre (nuit) : inverser la palette sans
   sacrifier la lisibilité. Les tokens papier/encre échangent leurs rôles. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:    #1a1714;
    --paper-2:  #252018;
    --card:     #0f0d0a;
    --ink:      #f4efe3;
    --ink-2:    #c9bfaa;
    --ink-3:    #8d8271;
    --rule:     #3a3428;
    --rule-2:   #4d4639;
  }
}

[data-theme="dark"] {
  --paper:    #1a1714;
  --paper-2:  #252018;
  --card:     #0f0d0a;
  --ink:      #f4efe3;
  --ink-2:    #c9bfaa;
  --ink-3:    #8d8271;
  --rule:     #3a3428;
  --rule-2:   #4d4639;
}

[data-theme="light"] {
  --paper:    #f4efe3;
  --paper-2:  #eee7d8;
  --card:     #fffdf8;
  --ink:      #17140f;
  --ink-2:    #4b4436;
  --ink-3:    #857c6b;
  --rule:     #ddd4c2;
  --rule-2:   #cabfa8;
}

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem;
  background: transparent; border: 1px solid var(--rule-2);
  color: var(--ink);
  cursor: pointer; border-radius: var(--radius);
  transition: background .15s ease, border-color .15s ease;
  font-size: .9rem;
}
.theme-toggle:hover { background: var(--rule); border-color: var(--ink-2); }

/* Grain léger en nuit aussi, juste plus subtil */
[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(244, 239, 227, .04) 1px, transparent 0),
    repeating-linear-gradient(0deg, transparent 0 43px, rgba(244, 239, 227, .015) 43px 44px),
    repeating-linear-gradient(122deg, rgba(193, 68, 26, .02) 0 1px, transparent 1px 9px);
}