/* =========================================================
   Anthologia — feuille de style partagée (pages articles)
   Mobile-first, Flexbox/Grid, tokens communs avec la landing page
   ========================================================= */

:root{
  --bg:            #F1F4F1;
  --surface:       #FFFFFF;
  --surface-alt:   #E7EEE9;
  --ink:           #142019;
  --ink-soft:      #47564E;
  --ink-faint:     #6B7A72;
  --line:          #D7DED9;
  --primary:       #0B4A43;
  --primary-dark:  #082F2B;
  --primary-tint:  #DCEAE6;
  --accent:        #B8863B;
  --accent-tint:   #F2E6CC;
  --verified:      #5E8C6E;
  --verified-tint: #E1EDE3;
  --warning:       #A15226;
  --warning-tint:  #F5E4D6;
  --focus:         #1E6E9C;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3: clamp(1.9rem, 1.55rem + 1.8vw, 2.9rem);

  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.75rem;
  --space-l: 3rem;
  --space-xl: 5rem;

  --radius-s: 6px;
  --radius-m: 12px;
  --container: 74rem;
  --measure: 40rem; /* ~70-80 caractères pour le corps de l'article */
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img, svg{ max-width: 100%; display: block; }
a{ color: inherit; }
h1, h2, h3, h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 0; color: var(--primary-dark); }
p{ margin: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input{ font: inherit; }
:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

.container{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-s); }
@media (min-width: 60rem){ .container{ padding-inline: var(--space-l); } }

.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;
}
.skip-link{
  position: absolute; left: var(--space-s); top: -3rem;
  background: var(--primary); color: #fff; padding: 0.75rem 1.25rem;
  border-radius: var(--radius-s); z-index: 100; transition: top 0.15s ease;
}
.skip-link:focus{ top: var(--space-s); }

/* ---------- Barre de progression de lecture (décorative) ---------- */
.reading-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--accent); z-index: 60; transition: width 0.1s linear;
}

/* ---------- Header (identique à la landing page) ---------- */
.site-header{
  position: sticky; top: 0; z-index: 40;
  background: rgba(241,244,241,0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .container{ display: flex; align-items: center; justify-content: space-between; padding-block: 0.9rem; gap: var(--space-s); }
.brand{ display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand-mark{ width: 34px; height: 34px; flex: none; }
.brand-name{ font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--primary-dark); }

.nav-toggle{ display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--surface); }
.nav-toggle svg{ width: 20px; height: 20px; }

.main-nav{
  position: fixed; inset: 0 0 0 auto; width: min(20rem, 86vw);
  background: var(--surface); padding: 5.5rem var(--space-m) var(--space-m);
  box-shadow: -12px 0 30px rgba(8, 20, 15, 0.12); transform: translateX(100%);
  transition: transform 0.28s ease; overflow-y: auto;
}
.main-nav[data-open="true"]{ transform: translateX(0); }
.main-nav ul{ display: flex; flex-direction: column; gap: 0.25rem; }
.main-nav a{ display: block; padding: 0.85rem 0.25rem; text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line); }
.main-nav a[aria-current="page"]{ color: var(--primary); }
.nav-cta{ margin-top: var(--space-m); }
.nav-backdrop{ position: fixed; inset: 0; background: rgba(8,20,15,0.35); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 30; }
.nav-backdrop[data-open="true"]{ opacity: 1; pointer-events: auto; }

@media (min-width: 62rem){
  .nav-toggle{ display: none; } .nav-backdrop{ display: none; }
  .main-nav{ position: static; width: auto; transform: none; box-shadow: none; padding: 0; background: transparent; overflow: visible; }
  .main-nav ul{ flex-direction: row; align-items: center; gap: 1.6rem; }
  .main-nav a{ border-bottom: 0; padding: 0.4rem 0.1rem; position: relative; }
  .main-nav a[aria-current="page"]::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--primary); }
  .nav-cta{ margin-top: 0; }
}

.btn{ display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.4rem; border-radius: var(--radius-s); font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; white-space: nowrap; }
.btn-primary{ background: var(--primary); color: #fff; }
.btn-primary:hover{ background: var(--primary-dark); }
.btn-ghost{ border-color: var(--primary); color: var(--primary); }
.btn-ghost:hover{ background: var(--primary-tint); }

/* ---------- Fil d'Ariane ---------- */
.breadcrumb{ padding-block: var(--space-s); font-size: 0.85rem; color: var(--ink-faint); }
.breadcrumb ol{ display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.breadcrumb a{ text-decoration: none; color: var(--ink-soft); font-weight: 600; }
.breadcrumb a:hover{ text-decoration: underline; }
.breadcrumb li:not(:last-child)::after{ content: "/"; margin-left: 0.35rem; color: var(--line); }
.breadcrumb li[aria-current="page"]{ color: var(--ink-faint); }

/* ---------- En-tête d'article ---------- */
.article-header{ padding-block: var(--space-m) var(--space-l); }
.article-header .container{ max-width: 46rem; }
.tag{ font-size: 0.78rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 999px; display: inline-block; }
.tag-cancer{ background: var(--accent-tint); color: #7A5A20; }
.tag-nutrition{ background: var(--primary-tint); color: var(--primary-dark); }
.tag-activite{ background: var(--verified-tint); color: #3C6349; }

.article-header h1{ font-size: var(--step-3); margin-top: var(--space-s); max-width: 22ch; }
.article-dek{ margin-top: var(--space-s); font-size: var(--step-1); color: var(--ink-soft); max-width: 42ch; }

.article-byline{
  margin-top: var(--space-m); display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem;
  padding-top: var(--space-m); border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--ink-faint);
}
.review-badge{ display: inline-flex; align-items: center; gap: 0.45rem; color: var(--verified); font-weight: 700; }
.review-badge svg{ width: 16px; height: 16px; }

/* ---------- Résumé / TL;DR ---------- */
.tldr{ background: var(--primary-tint); border-radius: var(--radius-m); padding: var(--space-m); margin-block: var(--space-l); }
.tldr h2{ font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; color: var(--primary-dark); }
.tldr ul{ margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
.tldr li{ display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ink); }
.tldr li svg{ width: 18px; height: 18px; flex: none; margin-top: 0.15rem; color: var(--primary); }

/* ---------- Sommaire ---------- */
.toc{ border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-s) var(--space-m); background: var(--surface); }
.toc h2{ font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; }
.toc ol{ margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.45rem; counter-reset: toc; }
.toc li{ counter-increment: toc; padding-left: 1.5rem; position: relative; font-size: 0.92rem; }
.toc li::before{ content: counter(toc); position: absolute; left: 0; color: var(--accent); font-weight: 700; font-family: var(--font-display); }
.toc a{ text-decoration: none; color: var(--ink-soft); }
.toc a:hover{ color: var(--primary); text-decoration: underline; }

/* ---------- Corps de l'article ---------- */
.article-body{ padding-block: var(--space-l); }
.article-body .container{ display: flex; flex-direction: column; gap: var(--space-l); max-width: 46rem; }
.prose{ display: flex; flex-direction: column; gap: var(--space-m); max-width: var(--measure); }
.prose h2{ font-size: var(--step-2); scroll-margin-top: 5.5rem; }
.prose h3{ font-size: 1.2rem; scroll-margin-top: 5.5rem; }
.prose p{ color: var(--ink); }
.prose p + h2, .prose p + h3{ margin-top: var(--space-xs); }
.prose a{ color: var(--primary); text-decoration-thickness: 1.5px; }
.prose a:hover{ color: var(--primary-dark); }
.prose strong{ color: var(--ink); }
.prose ul, .prose ol{ display: flex; flex-direction: column; gap: 0.5rem; padding-left: 1.3rem; }
.prose ul{ list-style: disc; }
.prose ol{ list-style: decimal; }
.prose li::marker{ color: var(--accent); }

/* Encadré chiffre-clé */
.stat-callout{
  display: flex; flex-direction: column; gap: 0.3rem;
  border-left: 4px solid var(--accent); background: var(--accent-tint);
  padding: var(--space-s) var(--space-m); border-radius: 0 var(--radius-s) var(--radius-s) 0;
  max-width: var(--measure);
}
.stat-callout .stat-num{ font-family: var(--font-display); font-size: 2rem; color: #7A5A20; line-height: 1; }
.stat-callout p{ font-size: 0.92rem; color: #5E4718; }

/* Encadré points de vigilance */
.warning-box{
  border: 1px solid #E3C3A6; background: var(--warning-tint); border-radius: var(--radius-m);
  padding: var(--space-m); max-width: var(--measure); display: flex; flex-direction: column; gap: 0.7rem;
}
.warning-box h3{ font-size: 1rem; color: var(--warning); display: flex; align-items: center; gap: 0.5rem; }
.warning-box h3 svg{ width: 20px; height: 20px; flex: none; }
.warning-box p{ color: #6B3A1B; font-size: 0.92rem; }

/* Citation / verbatim d'expert (paraphrasé, jamais copié mot pour mot d'une source) */
.pullquote{ border-left: 4px solid var(--primary); padding-left: var(--space-m); max-width: var(--measure); }
.pullquote p{ font-family: var(--font-display); font-size: 1.3rem; color: var(--primary-dark); font-style: italic; }
.pullquote cite{ display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.85rem; color: var(--ink-faint); }

/* ---------- Références / sources ---------- */
.references{ border-top: 1px solid var(--line); padding-top: var(--space-m); max-width: var(--measure); }
.references h2{ font-size: 1.2rem; }
.references p.lead{ color: var(--ink-soft); font-size: 0.92rem; margin-top: 0.5rem; }
.references ol{ margin-top: var(--space-s); display: flex; flex-direction: column; gap: 0.7rem; counter-reset: refs; }
.references li{ counter-increment: refs; padding-left: 1.8rem; position: relative; font-size: 0.9rem; color: var(--ink-soft); }
.references li::before{ content: "[" counter(refs) "]"; position: absolute; left: 0; color: var(--verified); font-weight: 700; }
.references a{ color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.references a:hover{ color: var(--primary-dark); }

/* ---------- Bandeau méthode / relecture ---------- */
.method-note{ display:flex; gap:1rem; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-m); max-width: var(--measure); }
.method-note svg{ width: 30px; height: 30px; flex: none; color: var(--primary); }
.method-note h3{ font-size: 1rem; color: var(--ink); }
.method-note p{ color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.3rem; }
.method-note a{ color: var(--primary); font-weight: 600; }

/* ---------- Disclaimer médical ---------- */
.medical-disclaimer{
  background: var(--surface-alt); border-radius: var(--radius-m); padding: var(--space-m);
  font-size: 0.88rem; color: var(--ink-soft); max-width: var(--measure); line-height: 1.6;
}
.medical-disclaimer strong{ color: var(--ink); }

/* ---------- Articles liés ---------- */
.related{ padding-block: var(--space-l); border-top: 1px solid var(--line); }
.related .section-head{ max-width: 44rem; margin-bottom: var(--space-m); }
.related h2{ font-size: var(--step-2); }
.related-grid{ display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
@media (min-width: 40rem){ .related-grid{ grid-template-columns: repeat(3, 1fr); } }
.related-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-m); display: flex; flex-direction: column; gap: 0.6rem; }
.related-card h3{ font-size: 1.05rem; }
.related-card h3 a{ text-decoration: none; }
.related-card h3 a:hover{ text-decoration: underline; }
.related-card p{ color: var(--ink-soft); font-size: 0.88rem; }

/* ---------- Newsletter (réutilisée) ---------- */
.newsletter{ background: var(--surface-alt); border-radius: var(--radius-m); padding: var(--space-l) var(--space-m); margin-inline: auto; }
.newsletter .container-inner{ max-width: 40rem; margin-inline: auto; }
.newsletter h2{ font-size: var(--step-2); }
.newsletter p{ color: var(--ink-soft); margin-top: 0.5rem; }
.newsletter-form{ display: flex; flex-direction: column; gap: 0.8rem; margin-top: var(--space-m); }
.field label{ display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.field input{ width: 100%; padding: 0.85rem 1rem; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--surface); }
.field input:invalid[data-touched="true"]{ border-color: #B3413B; }
.newsletter-note{ font-size: 0.82rem; color: var(--ink-faint); margin-top: 0.4rem; }
.form-status{ font-size: 0.9rem; font-weight: 600; margin-top: 0.5rem; }
.form-status[data-state="success"]{ color: var(--verified); }
.form-status[data-state="error"]{ color: #B3413B; }
@media (min-width: 40rem){ .newsletter-form{ flex-direction: row; align-items: flex-end; } .field{ flex: 1; } }

/* ---------- Footer (identique à la landing page) ---------- */
.site-footer{ background: var(--primary-dark); color: #CFE0D8; margin-top: var(--space-xl); }
.footer-top{ padding-block: var(--space-l); display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
@media (min-width: 50rem){ .footer-top{ grid-template-columns: 2fr repeat(3, 1fr); } }
.footer-brand p{ color: #A9C1B6; margin-top: 0.8rem; max-width: 30ch; font-size: 0.92rem; }
.footer-col h3{ font-family: var(--font-body); font-size: 0.85rem; color: #fff; font-weight: 700; margin-bottom: 0.8rem; }
.footer-col ul{ display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a{ color: #CFE0D8; text-decoration: none; font-size: 0.92rem; }
.footer-col a:hover{ text-decoration: underline; }
.footer-disclaimer{ border-top: 1px solid rgba(255,255,255,0.15); padding-block: var(--space-m); font-size: 0.85rem; color: #A9C1B6; line-height: 1.6; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,0.15); padding-block: var(--space-s); display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: space-between; align-items: center; font-size: 0.82rem; color: #A9C1B6; }
.social-links{ display: flex; gap: 0.9rem; }
.social-links a{ display: flex; }
.social-links svg{ width: 20px; height: 20px; }

/* ---------- Retour en haut ---------- */
.back-to-top{
  position: fixed; right: var(--space-s); bottom: var(--space-s); z-index: 35;
  background: var(--primary); color: #fff; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 8px 20px rgba(8,20,15,0.25);
}
.back-to-top[data-visible="true"]{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top svg{ width: 20px; height: 20px; }

.section-kicker{ color: var(--accent); font-weight: 700; font-size: 0.9rem; }