/* ============================================================================
   UNE MERVEILLE PAR JOUR — VIVE & AUDACIEUSE
   Look affiche / magazine moderne. La couleur du domaine du jour irrigue tout.
   ========================================================================== */

:root {
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Spectral', Georgia, serif;
  --ui: 'Space Grotesk', system-ui, sans-serif;

  --paper: #fbf7f0;
  --paper-2: #f5eee2;
  --ink: #18151f;
  --ink-soft: #5d5765;
  --rule: #e7ddcc;

  --accent: #4b3fce;          /* couleur du jour (remplacée par article) */

  /* variables exposées aux planches SVG */
  --plate-bg: #251e63;
  --plate-art: #fbf3e2;
  --plate-pop: #ffc83a;
  --plate-ink: #16131c;

  --max-lecture: 46rem;
  --max-large: 76rem;
}

:root[data-theme='nuit'] {
  --paper: #141019;
  --paper-2: #1d1726;
  --ink: #f3ede2;
  --ink-soft: #b3aabc;
  --rule: #2e2738;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.15rem;
  line-height: 1.68;
  font-feature-settings: 'onum' 1;
  transition: background-color .25s, color .25s;
}

img, svg { max-width: 100%; }
a { color: inherit; }

.enveloppe { width: 100%; max-width: var(--max-large); margin: 0 auto; padding: 0 1.5rem; }
.lecture { max-width: calc(var(--max-lecture) + 3rem); }

.saut { position: absolute; left: -999px; }
.saut:focus { left: 1rem; top: 1rem; background: var(--accent); color: #fff; padding: .6rem 1rem; z-index: 100; }

/* ── En-tête ───────────────────────────────────────────────────────────── */
.site-tete { border-bottom: 2px solid var(--ink); background: var(--paper); position: sticky; top: 0; z-index: 50; }
.site-tete__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.5rem; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.logo__mark { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); flex: none; }
.logo__txt { font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1; letter-spacing: -.01em; }
.logo__txt b { font-weight: 800; }
.logo__txt span { font-weight: 600; color: var(--ink-soft); margin-left: .35rem; }
.site-nav { display: flex; align-items: center; gap: 1.3rem; font-family: var(--ui); font-size: .82rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.site-nav a { text-decoration: none; color: var(--ink-soft); padding: .2rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink); border-color: var(--accent); }
.site-nav a[aria-current='page'] { color: var(--ink); border-color: var(--accent); }
.bascule-theme { background: none; border: 2px solid var(--ink); border-radius: 999px; width: 2.3rem; height: 2.3rem; cursor: pointer; color: var(--ink); display: inline-grid; place-items: center; padding: 0; font-size: .9rem; }
.bascule-theme:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.bascule-theme__nuit { display: none; }
:root[data-theme='nuit'] .bascule-theme__jour { display: none; }
:root[data-theme='nuit'] .bascule-theme__nuit { display: inline; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { padding-top: 2.6rem; padding-bottom: .4rem; text-align: center; }
.hero__kicker { font-family: var(--ui); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--accent); margin: 0; }
.hero__kicker::before, .hero__kicker::after { content: ''; display: inline-block; width: 2rem; height: 2px; background: var(--accent); vertical-align: middle; margin: 0 .7rem; }

/* ── Article ───────────────────────────────────────────────────────────── */
.merveille { padding: 1rem 0 3rem; }
.merveille__tete { text-align: center; margin: 1.2rem auto 1.8rem; max-width: var(--max-lecture); }
.merveille__sur { display: flex; flex-wrap: wrap; gap: .7rem 1rem; justify-content: center; align-items: center; margin: 0 0 1.3rem; }
.etiquette { font-family: var(--ui); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--accent); padding: .3rem .7rem; border-radius: 3px; }
.etiquette--mini { font-size: .66rem; padding: .2rem .5rem; }
.merveille__date, .merveille__lect { font-family: var(--ui); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.merveille__titre { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1; margin: 0; letter-spacing: -.02em; text-wrap: balance; }
.merveille__accroche { font-family: var(--body); font-style: italic; font-size: clamp(1.2rem, 2.5vw, 1.5rem); line-height: 1.45; color: var(--ink-soft); max-width: 40rem; margin: 1.3rem auto 0; text-wrap: pretty; }

/* ── Planche ───────────────────────────────────────────────────────────── */
.planche { margin: 2.4rem auto; max-width: 33rem; }
.planche-svg { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--plate-bg) 80%, transparent); }

/* ── Corps ─────────────────────────────────────────────────────────────── */
.merveille__corps { max-width: var(--max-lecture); margin: 0 auto; }
.bloc { margin: 2rem 0; }
.bloc h2, .retenir h2, .sources h2 { font-family: var(--display); font-weight: 700; font-size: 1.9rem; line-height: 1.12; margin: 0 0 .7rem; letter-spacing: -.01em; text-wrap: balance; }
.bloc h2 { padding-top: .4rem; border-top: 3px solid var(--accent); display: inline-block; }
.bloc p { margin: 0 0 1.1rem; text-wrap: pretty; }
.merveille__corps > .bloc:first-of-type p:first-of-type::first-letter { font-family: var(--display); font-weight: 800; float: left; font-size: 3.8rem; line-height: .82; padding: .25rem .5rem .1rem 0; color: var(--accent); }

/* ── Le chiffre ────────────────────────────────────────────────────────── */
.chiffre { text-align: center; margin: 2.6rem 0; padding: 1.8rem 1rem; background: color-mix(in srgb, var(--accent) 10%, var(--paper)); border: 2px solid var(--accent); border-radius: 8px; }
.chiffre__val { font-family: var(--display); font-weight: 800; color: var(--accent); font-size: clamp(3.4rem, 11vw, 6rem); line-height: .95; letter-spacing: -.02em; }
.chiffre__lib { font-family: var(--ui); font-weight: 500; font-size: .92rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-top: .6rem; }

/* ── À retenir ─────────────────────────────────────────────────────────── */
.retenir { background: var(--ink); color: var(--paper); padding: 1.7rem 1.9rem; margin: 2.6rem 0; border-radius: 8px; }
.retenir h2 { font-size: 1.4rem; margin-bottom: .9rem; color: var(--plate-pop); }
.retenir ul { margin: 0; padding: 0; list-style: none; }
.retenir li { padding-left: 1.7rem; position: relative; margin: .7rem 0; }
.retenir li::before { content: '→'; position: absolute; left: 0; top: 0; color: var(--plate-pop); font-weight: 700; }

/* ── Sources ───────────────────────────────────────────────────────────── */
.sources { margin: 2.6rem 0 1.4rem; }
.sources h2 { font-size: 1.4rem; }
.sources ol { font-family: var(--ui); font-size: .9rem; line-height: 1.5; padding-left: 1.4rem; }
.sources li { margin: .5rem 0; }
.sources a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sources__ed { color: var(--ink-soft); }
.sources__ed::before { content: ' · '; }
.verif { font-family: var(--ui); font-size: .82rem; color: var(--ink-soft); border-left: 3px solid var(--accent); padding: .3rem 0 .3rem .9rem; margin: 1.4rem 0; }
.verif__pastille { color: var(--accent); font-weight: 700; }

/* ── Voisins ───────────────────────────────────────────────────────────── */
.voisins { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-top: 2px solid var(--rule); margin-top: 2.5rem; padding-top: 1.5rem; }
.voisin { text-decoration: none; display: block; padding: 1rem 1.1rem; border: 2px solid var(--rule); border-radius: 6px; }
.voisin:hover { border-color: var(--accent); }
.voisin--suiv { text-align: right; }
.voisin__sens { font-family: var(--ui); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); display: block; }
.voisin__titre { font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.voisin--vide { border: none; }

/* ── Récents / archives (mosaïque colorée) ─────────────────────────────── */
.recents { margin: 4rem auto 2rem; border-top: 2px solid var(--ink); padding-top: 2rem; }
.recents__tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.5rem; }
.recents__tete h2 { font-family: var(--display); font-weight: 800; font-size: 2rem; margin: 0; }
.recents__tete a, .archives-tete + section a { font-family: var(--ui); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; color: var(--accent); }
.grille-vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 360px)); gap: 1.8rem; justify-content: center; }
.grille-vignettes--archives { gap: 2.2rem; }
.vcarte { text-decoration: none; display: block; }
.vcarte__img { border-radius: 6px; overflow: hidden; content-visibility: auto; contain-intrinsic-size: auto 280px; box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--plate-bg) 75%, transparent); }
.vcarte__img svg { display: block; width: 100%; height: auto; transition: transform .3s; }
.vcarte:hover .vcarte__img svg { transform: scale(1.04); }
.vcarte__txt { padding: .9rem .2rem; }
.vcarte__txt .etiquette--mini { display: inline-block; margin-bottom: .5rem; }
.vcarte__txt h3 { font-family: var(--display); font-weight: 700; font-size: 1.4rem; line-height: 1.08; margin: 0 0 .35rem; letter-spacing: -.01em; text-wrap: balance; }
.vcarte__date { font-family: var(--ui); font-size: .74rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }

.archives-tete { margin: 3rem auto 2rem; max-width: var(--max-lecture); text-align: center; }
.archives-tete h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 7vw, 4rem); margin: 0 0 .5rem; letter-spacing: -.02em; }

/* ── Manifeste ─────────────────────────────────────────────────────────── */
.manifeste { margin: 4rem auto 5rem; border-top: 2px solid var(--rule); padding-top: 3rem; }
.manifeste__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem 2.5rem; }
.manifeste__num { font-family: var(--display); font-size: 3rem; font-weight: 800; color: var(--accent); display: block; line-height: 1; margin-bottom: .4rem; }
.manifeste h3 { font-family: var(--display); font-weight: 700; font-size: 1.4rem; margin: 0 0 .3rem; }
.manifeste p { font-size: 1rem; color: var(--ink-soft); margin: 0; }
.manifeste__pied { text-align: center; margin-top: 3rem; font-family: var(--ui); font-size: .9rem; color: var(--ink-soft); }
.manifeste__pied a { color: var(--accent); font-weight: 700; }

/* ── Pied (bande sombre pour le contraste) ─────────────────────────────── */
.site-pied { background: var(--ink); color: var(--paper); margin-top: 3rem; padding: 3rem 0 1.2rem; }
:root[data-theme='nuit'] .site-pied { background: #0c0910; }
.site-pied__in { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.site-pied__titre { font-family: var(--display); font-weight: 800; font-size: 1.7rem; margin: 0 0 .6rem; }
.site-pied__bloc h3 { font-family: var(--ui); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .6; margin: 0 0 .8rem; }
.site-pied__bloc p { font-size: .95rem; opacity: .82; margin: 0; max-width: 30rem; }
.site-pied__bloc ul { list-style: none; padding: 0; margin: 0; font-family: var(--ui); font-size: .9rem; }
.site-pied__bloc li { margin: .45rem 0; }
.site-pied__bloc a { color: var(--paper); text-decoration: none; border-bottom: 2px solid var(--plate-pop, #ffc83a); }
.mesure { font-size: .95rem; opacity: .82; margin: .3rem 0; }
.mesure b { font-family: var(--display); font-weight: 800; font-size: 1.6rem; opacity: 1; }
.site-pied__bas { margin-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.2rem; }
.site-pied__bas p { font-family: var(--ui); font-size: .74rem; opacity: .55; margin: 0; max-width: 46rem; }

/* ── 404 ───────────────────────────────────────────────────────────────── */
.vide { text-align: center; padding: 5rem 1.5rem; max-width: var(--max-lecture); }
.vide h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 6vw, 3rem); }
.bouton { display: inline-block; font-family: var(--ui); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; color: #fff; background: var(--accent); padding: .8rem 1.4rem; border-radius: 5px; margin-top: 1rem; }
.bouton:hover { filter: brightness(1.1); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body { font-size: 1.08rem; }
  .site-pied__in { grid-template-columns: 1fr; gap: 1.6rem; }
  .voisins { grid-template-columns: 1fr; }
  .site-nav { gap: .9rem; font-size: .74rem; }
  .merveille__titre { font-size: clamp(2.3rem, 11vw, 3.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .vcarte:hover .vcarte__img svg { transform: none; }
}