/* ─── FONTS AUTO-HÉBERGÉES ────────────────────────────────── */
/* RGPD-compliant — aucun transfert vers Google              */

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/dm-mono-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-latin-standard-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-latin-standard-italic.woff2') format('woff2');
}

/* ─── TOKENS ──────────────────────────────────────────────── */
:root {
  /* Fonds */
  --creme:         #EDE3D0;
  --vert-encre:    #1E3028;
  --bordeaux-prof: #3D1520;

  /* Accents rubriques */
  --terra:  #C4614A;   /* Essay, Playlist, numéros sur crème */
  --or:     #C9963A;   /* Deep Cut */
  --peche:  #EAB48E;   /* Question (texte sur bordeaux) */
  --bordeaux: #6B2D3A; /* 1977 */

  /* Texte */
  --ink:       #1E2620;  /* sur crème */
  --ink-light: rgba(30,38,32,0.55);

  /* Typo */
  --f-body:  'Cormorant Garamond', Georgia, serif;
  --f-title: 'Fraunces', Georgia, serif;
  --f-mono:  'DM Mono', monospace;

  /* Spacing */
  --gap: clamp(40px, 6vw, 96px);
  --px:  clamp(32px, 5.5vw, 120px);}

/* ─── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--creme);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }

/* ─── SECTION HEADER PATTERN ──────────────────────────────── */
/* Le "03  DEEP CUT ————" qui ouvre chaque section */
/* Le numéro géant déborde à gauche hors du viewport */
.s-header {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(48px, 7vh, 96px);
  overflow: visible;
}
.s-num {
  font-family: var(--f-title);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(50px, 9vw, 100px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  /* Sort du viewport à gauche */
  margin-left: calc(-1 * var(--px) - 0.3em);
  flex-shrink: 0;
}
.s-rule-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  padding-bottom: 6px;
}
.s-label {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.38;
}
.s-rule {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.12;
}

/* ─── REVEAL ──────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.10s; }
.d2 { transition-delay: 0.22s; }
.d3 { transition-delay: 0.36s; }

/* ─── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--creme); }
::-webkit-scrollbar-thumb { background: var(--terra); }
::selection { background: rgba(196,97,74,0.25); }

/* ─── TOKENS RUBRIQUES SUPPLÉMENTAIRES ───────────────────── */
:root {
  --bleu-parasocial: #3B6EA5;   /* Never Met */
  --violet-self:     #6B3FA0;   /* Sound of Self */
}

/* ─── COULEURS CATÉGORIES — explore.html uniquement ─────── */
/* Ne pas utiliser sur les pages d'issues.                   */
/* Palette distincte des tokens de fond/accent ci-dessus.   */
:root {
  --cat-moved:   #C05870;   /* Moved */
  --cat-brain:   #3878B8;   /* Your Brain on Music */
  --cat-never:   #6C3898;   /* Never Met */
  --cat-pit:     #A02828;   /* The Pit */
  --cat-self:    #5C9E78;   /* Sound of Self */
  --cat-record:  #3D2952;   /* Off Record */
  --cat-angle:   #6B2D3A;   /* The Angle Nobody Tells */
}
/* ─── NAV COMMUNE ─────────────────────────────────────────── */
/* Partagée par home.css, article.css et toutes les pages     */
.logo-notes {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 0.5;
  padding-top: 5px;
  align-content: center;
}
.logo-listening {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--vert-encre);
}
.nav-wordmark { display: flex; flex-direction: column; gap: 2px; }

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px var(--px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: background 0.2s, padding 0.35s;
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo img { height: 40px; width: auto; }
.nav-logo-text { display: flex; flex-direction: column; gap: 1px; line-height: 1; }
.nav-logo-text .top {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 400;
  color: var(--vert-encre);
  opacity: 0.55;
  letter-spacing: 0.04em;
}
.nav-logo-text .bottom {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.20em;
  color: var(--vert-encre);
}
.nav.nav-top  { opacity: 1; pointer-events: auto; transform: none; }
.nav.nav-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  background: var(--creme);
  padding: 12px var(--px);
}
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(24px, 4vw, 40px);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 40px);
  justify-content: flex-end;
}
.nav-links li { display: flex; align-items: center; }
.nav-links a {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--vert-encre);
  opacity: 0.75;
  position: relative;
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--terra);
  transition: width 0.35s ease-out;
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { width: 100%; }
.nav-link-soon { opacity: 0.28 !important; pointer-events: none; cursor: default; }

/* Bouton menu mobile */
.nav-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}
.nav-menu-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink);
  opacity: 0.75;
  transition: opacity 0.2s;
}
.nav-menu-btn:hover .nav-menu-label { opacity: 1; }

/* Panneau mobile */
.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--vert-encre);
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 5vh, 52px) var(--px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1),
              transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.nav-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.nav-panel-inner { display: flex; flex-direction: column; height: 100%; }
.nav-panel-close {
  align-self: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--creme);
  opacity: 0.45;
  padding: 4px 0;
  transition: opacity 0.2s;
  margin-bottom: clamp(48px, 8vh, 80px);
}
.nav-panel-close:hover { opacity: 1; }
.nav-panel-toc { display: flex; flex-direction: column; gap: clamp(10px, 2vh, 18px); }
.nav-panel-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--f-title);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(22px, 4.5vw, 36px);
  line-height: 1;
  color: var(--creme);
  opacity: 0.55;
  letter-spacing: -0.02em;
  transition: opacity 0.2s;
  text-decoration: none;
}
.nav-panel-item::before {
  content: attr(data-num);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.12em;
  opacity: 0.5;
  flex-shrink: 0;
  padding-bottom: 4px;
}
.nav-panel-item:hover { opacity: 1; }
.nav-panel-item--small {
  font-family: var(--f-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--creme);
  opacity: 0.35;
  display: flex;
  align-items: baseline;
  gap: 12px;
  transition: opacity 0.2s;
  text-decoration: none;
}
.nav-panel-item--small:hover { opacity: 0.75; }
.nav-panel-sep {
  height: 0.5px;
  background: rgba(237,227,208,0.12);
  margin: clamp(10px, 1.5vh, 16px) 0;
}
.nav-panel-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--creme);
  opacity: 0.28;
  margin-top: auto;
  padding-top: clamp(20px, 3vh, 32px);
}

/* Barre de progression lecture */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--terra);
  z-index: 51;
  opacity: 0;
  transition: opacity 0.3s, width 0.1s linear;
  pointer-events: none;
}
.read-progress.visible { opacity: 1; }

/* Back to top */
.back-top {
  position: fixed;
  bottom: clamp(24px, 3vw, 40px);
  right: clamp(24px, 3vw, 40px);
  z-index: 40;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.35s cubic-bezier(0.16,1,0.3,1),
              transform 0.35s cubic-bezier(0.16,1,0.3,1);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.back-top.visible { opacity: 1; pointer-events: auto; transform: none; }
.back-top svg {
  width: 20px; height: 20px;
  stroke: var(--vert-encre);
  opacity: 0.35;
  transition: opacity 0.2s, transform 0.2s;
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.back-top:hover svg { opacity: 0.7; transform: translateY(-2px); }

/* Breakpoint mobile nav */
@media (max-width: 600px) {
  .nav-links { display: none !important; }
  .nav-menu-btn { display: block !important; }
}

/* ─── FOCUS VISIBLE ───────────────────────────────────────── */
/* WCAG 2.4.7 — navigation clavier visible                   */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 2px;
}
.nav-panel :focus-visible,
.question-dark :focus-visible {
  outline-color: var(--peche);
}

/* ─── PREFERS-REDUCED-MOTION ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nav-drawer,
  .nav-panel,
  .read-progress,
  .back-top {
    transition: none;
  }
  html { scroll-behavior: auto; }
}

/* ─── SCREEN READER ONLY ─────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ─── SKIP LINK — WCAG 2.4.1 ─────────────────────────────── */
/* Invisible jusqu'au focus clavier, devient visible en haut  */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--px);
  z-index: 200;
  background: var(--terra);
  color: var(--creme);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 10px; }