/* ══════════════════════════════════════════════════════════════════════
   BLOG PUBLIC — pages rendues côté serveur par la fonction blogPublic.
   Feuille autonome : ces pages ne chargent ni le <style> de blog-admin.html
   (réservé à l'éditeur) ni brand.css, dont l'essentiel ne s'applique pas.
   Les jetons de couleur et de typographie restent ceux du site.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #111118;
  --surface: #191924;
  --surface-2: #222232;
  --lavender: #b8a8e8;
  --lavender-light: #d4caf5;
  --sage: #8ec4a0;
  --cream: #f5f1e8;
  --cream-soft: #e2ddd4;
  --muted: #8e8aa8;
  --muted-light: #b0accc;
  --line: rgba(184, 168, 232, 0.22);
  --line-strong: rgba(184, 168, 232, 0.4);
  /* Jetons attendus par navbar.js, qui injecte ses styles sur toutes les
     pages du site : sans eux, le point doré de l'entrée courante est
     transparent et les transitions perdent la courbe maison. */
  --gold: #d4a84c;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

/* Colonne pleine hauteur : sans elle, une page courte (blog vide, 404)
   laisse le pied de page flotter au milieu de l'écran. */
body {
  background: var(--ink);
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > .b-footer { margin-top: auto; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--lavender-light); }

/* ── Fil d'Ariane ── */
.b-crumb { font-size: 12px; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 26px; }
.b-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.b-crumb li + li::before { content: '/'; margin-right: 8px; color: var(--muted); }
.b-crumb a { color: var(--muted-light); text-decoration: none; }
.b-crumb a:hover { color: var(--lavender-light); }
.b-crumb [aria-current] {
  max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── En-tête ── */
.b-hero, .b-article-head {
  padding: 160px 56px 64px;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}
/* `width: 100%` n'est pas décoratif : ces blocs sont des enfants directs du
   <body>, qui est un conteneur flex en colonne. Sur un élément flex, des
   marges auto sur l'axe transversal neutralisent l'étirement et ramènent la
   largeur au contenu — le dégradé du hero se retrouvait alors en bande
   flottante au milieu de la page. Avec une largeur définie, les marges auto
   se contentent de centrer, et `max-width` reprend la main. */
.b-hero, .b-list { width: 100%; }
.b-hero {
  max-width: none;
  /* La colonne de 860 est portée par le remplissage du hero, pas par des
     marges auto sur chaque enfant : ces marges centraient chaque bloc
     séparément, et le chapô — volontairement plus étroit que le titre —
     repartait au milieu de la page au lieu de s'aligner sous lui.
     Le max() garde les 56 px de respiration sous 972 px de large. */
  padding-left: max(56px, calc(50% - 430px));
  padding-right: max(56px, calc(50% - 430px));
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 80% at 70% 45%, rgba(184, 168, 232, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse 45% 45% at 12% 78%, rgba(142, 196, 160, 0.14) 0%, transparent 55%),
    linear-gradient(160deg, #111118 0%, #1a1844 60%, #111120 100%);
}

.b-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 18px;
}

h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h1 em { font-style: italic; color: var(--lavender-light); }

.b-sub {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--cream-soft);
  max-width: 62ch;
}

.b-meta {
  margin-top: 24px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted-light);
}

/* ── Liste d'articles ──
   972 = les 860 de la colonne du hero + les 56 de marge intérieure de chaque
   côté : les cartes démarrent exactement sous le titre de la page. À 1080,
   elles débordaient de 54 px à gauche comme à droite. */
.b-list {
  max-width: 972px;
  margin: 0 auto;
  padding: 72px 56px 110px;
  display: grid;
  /* min(320px, 100%) et non 320px : sur un écran de 320px, la piste
     réclamait 320px à l'intérieur d'un conteneur qui n'en offrait que 272
     une fois les marges retirées, et la page débordait. Le min() laisse la
     piste se réduire quand l'écran est plus étroit que la carte idéale. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 26px;
}
/* ── État vide ──
   Un blog sans article reste une page d'entrée : plutôt qu'une phrase
   perdue dans le noir, on renvoie vers ce qui répond déjà aux questions. */
/* Même largeur que la grille : seul l'agencement change. */
.b-list--empty { display: block; }

.b-empty {
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(ellipse 80% 120% at 0% 0%, rgba(184, 168, 232, 0.1) 0%, transparent 62%),
    rgba(255, 255, 255, 0.03);
  padding: 44px 40px 36px;
}
.b-empty-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 10px;
}
.b-empty-text { font-size: 15.5px; line-height: 1.75; color: var(--cream-soft); }
.b-empty-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}
.b-empty-links a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.3s, background 0.3s, transform 0.25s;
}
.b-empty-links a:hover {
  border-color: var(--line-strong);
  background: rgba(184, 168, 232, 0.06);
  transform: translateX(3px);
}
.b-empty-links strong {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--lavender-light);
}
.b-empty-links span { font-size: 13.5px; line-height: 1.6; color: var(--muted-light); }

.b-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.35s, background 0.35s, transform 0.35s;
}
.b-card:hover {
  border-color: var(--line-strong);
  background: rgba(184, 168, 232, 0.05);
  transform: translateY(-3px);
}
.b-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.b-thumb img { width: 100%; height: 100%; object-fit: cover; }
.b-card-body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.b-cat {
  align-self: flex-start;
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
}
.b-card h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.25;
}
.b-card h2 a { color: var(--cream); text-decoration: none; }
.b-card h2 a:hover { color: var(--lavender-light); }
.b-card p { font-size: 14.5px; line-height: 1.75; color: var(--cream-soft); }
.b-card .b-meta { margin-top: auto; padding-top: 6px; font-size: 12px; }

/* ── Article ── */
.b-article { padding-bottom: 40px; }
/* Même largeur que .b-body, .b-cta et .b-related : l'article n'a qu'une
   colonne. À 860, le titre et le chapô partaient 70 px à gauche du texte
   qu'ils annoncent, seuls contre le reste de la page. */
.b-article-head { padding-top: 150px; max-width: 720px; }

.b-cover {
  max-width: 980px;
  margin: 0 auto 56px;
  padding: 0 56px;
}
.b-cover img { border-radius: 16px; border: 1px solid var(--line); }

.b-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 56px 40px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--cream-soft);
  /* Le corps d'article vient de la base : il peut contenir une URL longue,
     que le navigateur traite comme un mot insécable et laisse déborder de
     l'écran. On l'autorise à se couper là où il faut. Sans effet sur .a-code,
     qui est en white-space: pre et défile déjà horizontalement. */
  overflow-wrap: anywhere;
}
.b-body > * + * { margin-top: 26px; }
.b-body p { font-size: 17px; line-height: 1.85; }
.b-body strong { color: var(--cream); font-weight: 500; }
.b-body a { color: var(--lavender-light); }

.b-body h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(27px, 3.4vw, 38px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--cream);
  margin-top: 56px;
  letter-spacing: -0.01em;
}
.b-body h3 {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lavender-light);
  margin-top: 40px;
}

.b-body ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.b-body li { position: relative; padding-left: 22px; }
.b-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
}

.b-body blockquote {
  border-left: 2px solid var(--lavender);
  padding: 4px 0 4px 26px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-style: italic;
  line-height: 1.5;
  color: var(--cream);
}
.b-body blockquote cite {
  display: block;
  margin-top: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--muted-light);
}

.a-highlight {
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(184, 168, 232, 0.07);
  padding: 24px 26px;
}
.a-highlight p { font-size: 16px; color: var(--cream); }

.a-callout {
  border-left: 3px solid var(--sage);
  background: rgba(142, 196, 160, 0.07);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
}
.a-callout p { font-size: 15.5px; }

.a-code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--cream);
}

.a-figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted-light);
}
.a-figure img { border-radius: 12px; border: 1px solid var(--line); }

.b-body hr { border: none; border-top: 1px solid var(--line); margin: 48px 0; }

/* ── Appel à l'action ── */
.b-cta {
  max-width: 720px;
  margin: 72px auto 0;
  padding: 44px 40px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(ellipse 80% 120% at 0% 0%, rgba(184, 168, 232, 0.13) 0%, transparent 62%),
    rgba(255, 255, 255, 0.03);
  text-align: center;
}
.b-cta h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 14px;
}
.b-cta p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--cream-soft);
  margin-bottom: 28px;
}
.b-btn {
  display: inline-block;
  background: var(--lavender);
  color: var(--ink);
  padding: 14px 30px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.3s, transform 0.2s;
}
.b-btn:hover { background: var(--lavender-light); transform: translateY(-2px); }

/* ── À lire aussi ── */
.b-related {
  max-width: 720px;
  margin: 64px auto 0;
  padding: 0 0 20px;
  border-top: 1px solid var(--line);
  padding-top: 40px;
}
.b-related h2 {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 20px;
}
.b-related ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.b-related a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  color: var(--cream);
  text-decoration: none;
}
.b-related a:hover { color: var(--lavender-light); }

/* ── Pied de page ── */
.b-footer {
  margin-top: 100px;
  padding: 56px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
}
.b-brand { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.1em; }
.b-tagline { font-size: 13px; color: var(--muted-light); margin-top: 6px; }
.b-footer address {
  font-style: normal;
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted-light);
  margin-top: 10px;
}
.b-footer address a { color: var(--muted-light); text-decoration: none; }
.b-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.b-links a {
  font-size: 13px;
  color: var(--muted-light);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.3s;
}
.b-links a:hover { color: var(--lavender-light); }

/* ── Mobile ── */
@media (max-width: 760px) {
  .b-hero, .b-article-head { padding: 120px 24px 48px; }
  .b-list { padding: 48px 24px 80px; gap: 20px; }
  .b-body, .b-cover { padding-left: 24px; padding-right: 24px; }
  .b-cta { margin-left: 24px; margin-right: 24px; padding: 34px 26px; }
  .b-related { margin-left: 24px; margin-right: 24px; }
  .b-footer { padding: 40px 24px; flex-direction: column; }
  .b-body { font-size: 16.5px; }
  .b-empty { padding: 32px 24px 28px; }
  .b-empty-title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .b-card, .b-btn { transition: none; }
}
