@import url("../fonts/fonts.css");

/* ============================================================
   RUPTURE CO — design system
   Dérivé de la DA du podcast : dégradé cyan → menthe, noir dense,
   typo grotesque lourde, motif « sticker » (contour blanc).
   ============================================================ */

:root {
  /* Couleurs de marque, échantillonnées sur les visuels du podcast */
  --cyan: #23dbdc;
  --mint: #64d5b0;
  --cyan-deep: #0e9fa6;
  --grad: linear-gradient(150deg, var(--cyan) 0%, var(--mint) 100%);
  --grad-flat: linear-gradient(105deg, var(--cyan) 0%, var(--mint) 100%);

  --ink: #07100f;
  --bg: #080d0d;
  --bg-2: #0e1616;
  --surface: #121c1c;
  --surface-2: #172424;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);

  --text: #f2f7f6;
  --text-muted: #8fa5a2;
  --text-on-light: #07100f;

  --radius: 18px;
  --radius-lg: 28px;
  --shell: 1220px;
  --gutter: clamp(20px, 5vw, 56px);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); line-height: 0.95; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--cyan); color: var(--ink); }

/* ---------- primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: "wdth" 92, "wght" 900;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 100, "wght" 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: var(--cyan);
}
.eyebrow--dark { color: rgba(7, 16, 15, 0.62); }

.section { padding-block: clamp(72px, 11vw, 132px); position: relative; }
.section--tight { padding-block: clamp(56px, 8vw, 92px); }

.section-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head h2 {
  font-size: clamp(34px, 6vw, 62px);
  margin-block: 14px 18px;
}
.section-head p { color: var(--text-muted); font-size: clamp(16px, 1.6vw, 19px); max-width: 62ch; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
    border-color 0.18s ease, opacity 0.18s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--grad-flat);
  color: var(--ink);
  box-shadow: 0 10px 30px -12px rgba(35, 219, 220, 0.75);
}
.btn--primary:hover { box-shadow: 0 16px 38px -12px rgba(35, 219, 220, 0.9); }

.btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.32); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { box-shadow: 0 14px 34px -14px rgba(7, 16, 15, 0.8); }

.btn[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.5);
}

.btn__icon { width: 17px; height: 17px; flex: none; }

/* ---------- passerelle vers Studio Rouge Pomme ----------
   Seul élément du site qui n'est PAS dans la DA Rupture Co :
   il porte les couleurs du studio (rouge #CE0026, crème #FFFDF7)
   pour se lire immédiatement comme une autre marque.           */
:root {
  --rps-red: #ce0026;
  --rps-red-deep: #8d001b;
  --rps-red-dark: #38050f;
  --rps-cream: #fffdf7;
}

.btn-rps {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 16px 8px 13px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--rps-cream);
  background: linear-gradient(135deg, var(--rps-red) 0%, var(--rps-red-deep) 100%);
  border: 1px solid rgba(255, 253, 247, 0.16);
  box-shadow: 0 10px 26px -14px rgba(206, 0, 38, 0.9);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  white-space: nowrap;
}
.btn-rps:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 16px 34px -14px rgba(206, 0, 38, 1);
}
.btn-rps img { height: 24px; width: auto; flex: none; }
.btn-rps__text { display: flex; flex-direction: column; line-height: 1.1; }
.btn-rps__text small {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;
}
.btn-rps__text strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.btn-rps__arrow { width: 15px; height: 15px; flex: none; opacity: 0.75; }

/* En dessous de 1080 px, le header garde les deux boutons mais
   la passerelle se réduit à la pomme + la flèche. */
@media (max-width: 1080px) {
  .btn-rps__text small { display: none; }
  .btn-rps__text strong { font-size: 13px; }
}
@media (max-width: 700px) {
  .btn-rps { padding: 9px 12px; gap: 8px; }
  .btn-rps__text { display: none; }
  .btn-rps img { height: 22px; }
}

/* ---------- header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(14px);
  background: rgba(8, 13, 13, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.header.is-stuck { border-bottom-color: var(--line); background: rgba(8, 13, 13, 0.92); }
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
}
.header__logo { display: flex; align-items: center; }
.header__logo img { height: 34px; width: auto; }
.header__nav { display: flex; align-items: center; gap: 30px; }
.header__nav a {
  text-decoration: none;
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.18s ease;
}
.header__nav a:hover { color: var(--text); }
.header__nav a { white-space: nowrap; }
.header__cta { display: flex; align-items: stretch; gap: 12px; }
.header__cta > * { min-height: 48px; }

/* Deux boutons dans le header : la navigation cède la place avant de se casser. */
@media (max-width: 1180px) {
  .header__nav { gap: 22px; }
}
@media (max-width: 1080px) {
  .header__nav { display: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(56px, 9vw, 104px);
  padding-bottom: 0;
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 780px;
  background: radial-gradient(
      ellipse 60% 55% at 50% 0%,
      rgba(35, 219, 220, 0.3),
      transparent 70%
    ),
    radial-gradient(ellipse 45% 45% at 78% 18%, rgba(100, 213, 176, 0.22), transparent 70%);
  pointer-events: none;
  filter: blur(6px);
}
.hero__inner { position: relative; text-align: center; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  color: var(--text-muted);
}
.badge__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(35, 219, 220, 0.16);
}

.hero h1 {
  font-size: clamp(46px, 11.5vw, 148px);
  margin-block: 26px 0;
  font-variation-settings: "wdth" 88, "wght" 900;
}
.hero h1 .grad {
  background: var(--grad-flat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__tagline {
  margin: 26px auto 0;
  max-width: 30ch;
  font-size: clamp(17px, 2.1vw, 22px);
  color: var(--text-muted);
  line-height: 1.5;
}
.hero__actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* bandeau d'invités découpés */
.strip {
  position: relative;
  overflow: hidden; /* sinon la piste en max-content élargit toute la page */
  margin-top: clamp(40px, 6vw, 74px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.strip__track {
  display: flex;
  align-items: flex-end;
  gap: clamp(18px, 3vw, 42px);
  width: max-content;
  animation: slide 56s linear infinite;
}
.strip:hover .strip__track { animation-play-state: paused; }
.strip__track img {
  height: clamp(130px, 20vw, 230px);
  width: auto;
  filter: grayscale(1) contrast(1.06) brightness(0.94);
  opacity: 0.55;
  transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}
.strip__track img:hover {
  filter: none;
  opacity: 1;
  transform: translateY(-8px);
}
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .strip__track { animation: none; }
}

/* ---------- section claire, dégradé de marque ---------- */
.brandband {
  background: var(--grad);
  color: var(--text-on-light);
  position: relative;
  overflow: hidden;
}
.brandband h2, .brandband h3 { color: var(--ink); }

.manifeste {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 96, "wght" 800;
  font-size: clamp(26px, 4.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 20ch;
}
.manifeste > span { display: block; }
.manifeste > span + span { margin-top: 0.42em; }
.manifeste > span:last-child { color: rgba(7, 16, 15, 0.6); }

.manifeste-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.manifeste-grid img { width: 100%; height: auto; display: block; }

.cover-sticker {
  margin: 0;
  transform: rotate(-3deg);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.cover-sticker:hover { transform: rotate(-1deg) scale(1.015); }
.cover-sticker img {
  border-radius: 20px;
  border: 8px solid #fff;
  box-shadow: 0 34px 60px -26px rgba(7, 16, 15, 0.5), 0 4px 12px rgba(7, 16, 15, 0.14);
}
.cover-sticker figcaption {
  margin-top: 18px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(7, 16, 15, 0.55);
}

@media (max-width: 900px) {
  .manifeste-grid { grid-template-columns: 1fr; }
  .cover-sticker { max-width: 300px; margin-inline: auto; }
}

/* ---------- chiffres ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-2);
}
.stat { padding: clamp(24px, 3.6vw, 40px); border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: "wdth" 86, "wght" 900;
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--grad-flat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
@media (max-width: 780px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

/* ---------- grille d'épisodes ---------- */
.grid-eps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
}

.epcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.epcard:hover {
  transform: translateY(-6px);
  border-color: rgba(35, 219, 220, 0.4);
  box-shadow: 0 26px 60px -32px rgba(35, 219, 220, 0.55);
}

/* La vignette est le vrai visuel de l'épisode, tel que publié.
   Les deux saisons n'ont pas la même DA : c'est voulu, c'est une archive. */
.epcard__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-2);
}
.epcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.epcard:hover .epcard__thumb img { transform: scale(1.04); }
.epcard__lang {
  position: absolute;
  z-index: 2;
  right: 14px;
  top: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink);
  background: var(--grad-flat);
  padding: 5px 10px;
  border-radius: 999px;
}

.epcard__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.epcard__meta {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
}
.epcard__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 96, "wght" 800;
  font-size: 21px;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.epcard__role { font-size: 14px; color: var(--text-muted); line-height: 1.45; }
.epcard__hook {
  font-size: 15px;
  color: rgba(242, 247, 246, 0.82);
  line-height: 1.5;
  margin-top: 4px;
}
.epcard__foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted);
}
.epcard__go { color: var(--cyan); font-weight: 600; }

/* ---------- hôte ---------- */
.host {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(30px, 6vw, 76px);
  align-items: center;
}
.host__photo {
  border-radius: var(--radius-lg);
  background: var(--grad);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 4 / 5;
}
.host__photo img { height: 96%; width: auto; object-fit: contain; object-position: bottom; }
.host h2 { font-size: clamp(32px, 5vw, 54px); margin-bottom: 20px; }
.host p { color: var(--text-muted); }
.host p:first-of-type { color: var(--text); font-size: 19px; }
@media (max-width: 860px) {
  .host { grid-template-columns: 1fr; }
  .host__photo { max-width: 340px; }
}

/* ---------- fin ---------- */
.outro {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5.5vw, 68px);
  background: linear-gradient(160deg, var(--surface-2), var(--bg-2));
  position: relative;
  overflow: hidden;
}
.outro::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  background: var(--grad-flat);
}
.outro h2 { font-size: clamp(30px, 5vw, 54px); margin-bottom: 20px; }
.outro p { color: var(--text-muted); max-width: 68ch; font-size: 17px; }

/* ---------- question signature ---------- */
.question {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: "wdth" 82, "wght" 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.92;
  font-size: clamp(34px, 8.5vw, 108px);
  background: var(--grad-flat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- plateformes ---------- */
.platforms { display: flex; flex-wrap: wrap; gap: 12px; }
.platform {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.platform:hover { background: rgba(255, 255, 255, 0.09); transform: translateY(-2px); }
.platform svg { width: 18px; height: 18px; }
.platform[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* ---------- page épisode ---------- */
.ep-hero { padding-top: clamp(38px, 6vw, 68px); position: relative; overflow: hidden; }
.ep-hero__grid {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ep-hero h1 {
  font-size: clamp(40px, 7.5vw, 92px);
  margin-block: 18px 0;
  font-variation-settings: "wdth" 86, "wght" 900;
}
.ep-hero__role {
  margin-top: 18px;
  font-size: clamp(17px, 2vw, 21px);
  color: var(--text-muted);
  max-width: 34ch;
}
.ep-hero__hook {
  margin-top: 26px;
  padding-left: 20px;
  border-left: 3px solid var(--cyan);
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.35;
  font-weight: 500;
}
.ep-hero__visual {
  border-radius: var(--radius-lg);
  background: var(--grad);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.ep-hero__visual img { height: 90%; width: auto; object-fit: contain; object-position: bottom; filter: drop-shadow(0 26px 40px rgba(7,16,15,.3)); }
@media (max-width: 900px) {
  .ep-hero__grid { grid-template-columns: 1fr; }
  .ep-hero__visual { order: -1; max-width: 420px; }
}

.ep-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.chip--accent { border-color: transparent; background: var(--grad-flat); color: var(--ink); font-weight: 700; }

.ep-body { max-width: 68ch; font-size: 18px; line-height: 1.72; }
.ep-body p { color: rgba(242, 247, 246, 0.86); margin-bottom: 1.25em; }

.ep-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ep-nav a {
  display: block;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ep-nav a:hover { border-color: rgba(35, 219, 220, 0.45); background: var(--surface); }
.ep-nav small { display: block; color: var(--text-muted); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.ep-nav strong { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.ep-nav .is-right { text-align: right; }
@media (max-width: 620px) { .ep-nav { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 76px) 40px; }
.footer__top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 44px;
}
.footer__brand img { height: 40px; width: auto; margin-bottom: 18px; }
.footer__brand p { color: var(--text-muted); font-size: 15px; max-width: 34ch; }
.footer h4 {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 16px;
  font-variation-settings: "wdth" 100, "wght" 700;
}
.footer li + li { margin-top: 10px; }
.footer li a { color: var(--text-muted); text-decoration: none; font-size: 15px; transition: color 0.18s ease; }
.footer li a:hover { color: var(--cyan); }
.footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--text-muted);
}
.footer__bottom a { color: var(--text-muted); text-decoration: none; }
.footer__bottom a:hover { color: var(--cyan); }
@media (max-width: 780px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }

/* ---------- apparition au scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- accessibilité ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cyan);
  color: var(--ink);
  padding: 12px 18px;
  z-index: 100;
  border-radius: 0 0 10px 0;
  font-weight: 700;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   AJOUTS — modèle de données réel (flux RSS)
   Ce bloc est en fin de fichier : il prime sur ce qui précède.
   ============================================================ */

:root { color-scheme: dark; }

/* Un seul thème sur tout le site. La seule bascule claire est la bande
   de marque (dégradé cyan/menthe), volontaire et unique. */

/* ---------- rectifications ---------- */
.cover-sticker img { border-radius: var(--radius-lg); }
.platform[aria-disabled="true"] { opacity: 0.62; }
.platform[aria-disabled="true"] span { color: var(--text-muted); }
.footer li .is-off { color: rgba(143, 165, 162, 0.55); font-size: 15px; }

.sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%;
       background: currentColor; opacity: 0.5; margin-inline: 9px; vertical-align: middle; }

.footer__num, .ep-nav__num {
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  margin-right: 10px;
}
.ep-nav__num { opacity: 0.75; }

/* ---------- cartes d'épisode ---------- */
.epcard__sujet { font-size: 14.5px; color: var(--text-muted); line-height: 1.5; }
.epcard__meta { display: flex; align-items: center; }


/* ---------- saisons ---------- */
.season { padding-block: clamp(38px, 5vw, 62px); }
.season__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}
.season__head h2 { font-size: clamp(28px, 4vw, 46px); }
.season__meta { font-size: 14px; color: var(--text-muted); display: flex; align-items: center; }

/* ---------- bande « qui pose les questions » ----------
   Composition volontairement différente de la bande de marque :
   colonne de texte étroite, portrait détouré qui déborde, pas de carte. */
.hostband {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 9vw, 118px) 0;
  border-top: 1px solid var(--line);
}
.hostband__glow {
  position: absolute;
  right: -6%;
  bottom: -18%;
  width: min(720px, 78vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(35, 219, 220, 0.26), transparent 66%);
  pointer-events: none;
}
.hostband__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}
.hostband__text { padding-bottom: clamp(64px, 9vw, 110px); max-width: 56ch; }
.hostband__text h2 { font-size: clamp(32px, 5.2vw, 58px); margin-block: 14px 22px; }
.hostband__text p { color: var(--text-muted); }
.hostband__text p:first-of-type { color: var(--text); font-size: 19px; }
.hostband__photo {
  justify-self: end;
  width: auto;
  max-height: clamp(320px, 42vw, 520px);
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5));
}
@media (max-width: 900px) {
  .hostband__inner { grid-template-columns: 1fr; }
  .hostband__text { padding-bottom: 0; }
  .hostband__photo { justify-self: center; max-height: 340px; }
}

/* ---------- page épisode ---------- */
.ep-hero__visual { margin: 0; border-radius: var(--radius-lg); overflow: hidden;
                   background: var(--surface-2); aspect-ratio: 1; }
.ep-hero__visual img { width: 100%; height: 100%; object-fit: cover; }
.ep-hero__sujet {
  margin-top: 16px;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.32;
  color: var(--text);
  max-width: 30ch;
  font-weight: 500;
}

.ep-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) { .ep-layout { grid-template-columns: 1fr; } }

.ep-aside { display: grid; gap: 18px; position: sticky; top: 96px; }
@media (max-width: 900px) { .ep-aside { position: static; } }

.ep-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  background: var(--bg-2);
}
.ep-block h2 {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 100, "wght" 700;
  color: var(--text);
  margin-bottom: 14px;
}
.ep-block__note { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }

.ep-themes li {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}
.ep-themes li + li { margin-top: 12px; }
.ep-themes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 1.5px;
  background: var(--cyan);
}

.ep-chapters { counter-reset: c; padding: 0; list-style: none; margin: 0; }
.ep-chapters li { display: flex; gap: 12px; font-size: 15px; line-height: 1.45; }
.ep-chapters li + li { margin-top: 11px; }
.ep-chap__t {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  font-size: 13px;
  padding-top: 2px;
  min-width: 42px;
}
.ep-chap__l { color: var(--text-muted); }

/* ---------- lecteur audio ---------- */
.player { margin-top: 30px; }
.player audio {
  width: 100%;
  max-width: 520px;
  height: 44px;
  border-radius: 999px;
  background: var(--surface-2);
}
.player audio::-webkit-media-controls-panel { background: var(--surface-2); }


/* ---------- ressources de l'invité ---------- */
.ep-res li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.ep-res li + li { margin-top: 11px; }
.ep-res__label {
  flex: none;
  min-width: 92px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ep-res a { color: var(--cyan); text-decoration: none; word-break: break-word; }
.ep-res a:hover { text-decoration: underline; }

/* ---------- bloc repliable (longues listes de chapitres) ---------- */
.ep-block--fold { padding: 0; }
.ep-block--fold summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
}
.ep-block--fold summary::-webkit-details-marker { display: none; }
.ep-block--fold summary h2 { margin: 0; }
.ep-fold__n {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--grad-flat);
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 700;
}
.ep-block--fold[open] summary { border-bottom: 1px solid var(--line); }
.ep-block--fold .ep-chapters { padding: 20px 24px 22px; }
.ep-block--fold summary:hover .ep-fold__n { filter: brightness(1.08); }

/* ============================================================
   BANDEAU DE POCHETTES
   Deux rangées de couvertures d'épisode qui défilent vers la gauche.
   Grisées au repos, en couleur au survol : la couleur devient le
   signal « il y a quelqu'un là-dessous », pas une décoration.
   ============================================================ */
.covers {
  position: relative;
  margin-top: clamp(38px, 5.5vw, 68px);
  display: grid;
  gap: clamp(8px, 1vw, 14px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.covers__row { overflow: hidden; }
.covers__track {
  display: flex;
  gap: clamp(8px, 1vw, 14px);
  width: max-content;
  animation: defile var(--vitesse, 60s) linear infinite;
}
.covers__row:nth-child(even) .covers__track { animation-direction: reverse; }
.covers__row:hover .covers__track { animation-play-state: paused; }

.cover {
  position: relative;
  display: block;
  flex: none;
  width: clamp(120px, 15vw, 208px);
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  outline: 1px solid rgba(255, 255, 255, 0.06);
  outline-offset: -1px;
}
.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.62) contrast(1.05);
  transition: filter 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow 0.3s ease;
  pointer-events: none;
}
.cover:hover img,
.cover:focus-visible img { filter: none; transform: scale(1.06); }
.cover:hover::after,
.cover:focus-visible::after { box-shadow: inset 0 0 0 2px var(--cyan); }

@keyframes defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .covers__track { animation: none; }
  .covers { overflow-x: auto; }
}

/* ============================================================
   AVANT / APRÈS
   Le concept du podcast en une lecture : la colonne de gauche est
   ce qu'ils faisaient, celle de droite ce qu'ils font. Rien d'autre.
   ============================================================ */
.switches { border-top: 1px solid var(--line); }

.switches__head {
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  gap: 0;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.switches__col {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.switches__col--apres { grid-column: 3; color: var(--cyan); }

.switch {
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  align-items: baseline;
  gap: 0;
  padding: 14px 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  transition: background 0.22s ease, padding 0.22s ease;
}
.switch:hover { background: rgba(255, 255, 255, 0.035); }

.switch__avant,
.switch__apres {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 94, "wght" 800;
  font-size: clamp(19px, 2.5vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.switch__avant { color: var(--text-muted); }
.switch__apres {
  background: var(--grad-flat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.switch__fleche {
  font-size: clamp(15px, 1.8vw, 20px);
  color: var(--line-strong);
  text-align: center;
  transition: color 0.22s ease, transform 0.22s ease;
}
.switch:hover .switch__fleche { color: var(--cyan); transform: translateX(3px); }

.switch__qui {
  grid-column: 3;
  font-size: 13px;
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  margin-top: 4px;
}
.switch:hover .switch__qui,
.switch:focus-visible .switch__qui { opacity: 1; transform: none; }

.switches__note {
  margin-top: 26px;
  font-size: 15px;
  color: var(--text-muted);
  max-width: 60ch;
}

/* Sur mobile la colonne se lit de haut en bas : avant, flèche, après. */
@media (max-width: 720px) {
  .switches__head { display: none; }
  .switch {
    grid-template-columns: 24px 1fr;
    row-gap: 2px;
    padding: 16px 0;
  }
  .switch__avant { grid-column: 1 / -1; font-size: 17px; }
  .switch__fleche { grid-column: 1; text-align: left; }
  .switch__apres { grid-column: 2; font-size: 21px; }
  .switch__qui { grid-column: 2; opacity: 1; transform: none; }
}

/* ============================================================
   HERO PLEIN ÉCRAN
   Tout ce qui compte tient dans le premier écran : titre, promesse,
   bouton, et la bande de pochettes qui prouve le propos.
   svh (et non vh) pour ne pas sauter avec la barre d'URL iOS.
   ============================================================ */
.hero {
  min-height: calc(100svh - 74px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(20px, 3vh, 44px);
  padding-bottom: 0;
}
.hero__inner {
  flex: 0 1 auto;
  padding-bottom: clamp(18px, 3vh, 40px);
}
.hero h1 {
  font-size: clamp(42px, min(10.5vw, 15vh), 132px);
  margin-block: clamp(14px, 2.4vh, 26px) 0;
}
.hero__tagline {
  margin-top: clamp(14px, 2.2vh, 26px);
  font-size: clamp(16px, min(2vw, 2.4vh), 21px);
}
.hero__actions { margin-top: clamp(18px, 3vh, 34px); }
.badge { font-size: clamp(12px, 1.6vh, 13px); }

.covers {
  margin-top: 0;
  margin-bottom: 0;
  flex: 0 0 auto;
}
.cover { width: clamp(96px, min(12vw, 17vh), 168px); }

/* Écran très bas (portable 13 pouces posé sur les genoux) :
   une seule rangée de pochettes, la deuxième passerait sous la ligne. */
@media (max-height: 700px) {
  .covers__row:nth-child(2) { display: none; }
}
@media (max-width: 720px) {
  .hero { min-height: calc(100svh - 74px); }
  .covers__row:nth-child(2) { display: block; }
  .cover { width: clamp(92px, 26vw, 130px); }
}

/* Ajustement fin : la bande de pochettes doit se terminer AU-DESSUS
   du bas de l'écran, pas être coupée par lui. */
.hero { overflow: hidden; }
.hero h1 { font-size: clamp(40px, min(9.8vw, 12.5vh), 124px); }
.hero__inner { padding-bottom: clamp(14px, 2.2vh, 30px); }
.cover { width: clamp(84px, min(10.5vw, 13vh), 152px); }
.covers { padding-bottom: clamp(10px, 1.6vh, 22px); }

/* ============================================================
   SOMMAIRE DÉROULANT
   Un seul point d'entrée vers toutes les sous-parties, à toutes
   les largeurs. <details> natif : clavier et sans JavaScript.
   ============================================================ */
.header__nav { display: none; }

.menu { position: relative; margin-right: auto; margin-left: 8px; }
.menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 13.5px;
  color: var(--text);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.32); }
.menu__chevron { width: 15px; height: 15px; transition: transform 0.22s ease; }
.menu[open] > summary { background: rgba(255, 255, 255, 0.09); }
.menu[open] .menu__chevron { transform: rotate(180deg); }

.menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 26px;
  padding: 24px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: rgba(14, 22, 22, 0.97);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  animation: menu-in 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.menu__group h3 {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 12px;
  font-variation-settings: "wdth" 100, "wght" 700;
}
.menu__group li + li { margin-top: 9px; }
.menu__group a {
  display: block;
  font-size: 15px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.16s ease, transform 0.16s ease;
}
.menu__group a:hover { color: var(--text); transform: translateX(3px); }

@media (max-width: 560px) {
  .menu > summary span { display: none; }
  .menu > summary { padding: 10px 12px; }
  .menu__panel { grid-template-columns: 1fr; gap: 20px; padding: 20px; min-width: 240px; }
}
@media (prefers-reduced-motion: reduce) { .menu__panel { animation: none; } }

/* ============================================================
   BANDEAU AVANT / APRÈS DANS LE HERO
   Le concept passe ici, en une ligne discrète juste au-dessus des
   pochettes. La liste complète vit sur la page des épisodes.
   ============================================================ */
.ticker {
  overflow: hidden;
  padding-block: clamp(10px, 1.8vh, 18px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: defile 74s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.tick {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-inline: clamp(14px, 2vw, 26px);
  font-size: clamp(12.5px, 1.5vh, 14.5px);
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.tick__a { color: rgba(143, 165, 162, 0.72); }
.tick__f { color: var(--line-strong); }
.tick__b { color: var(--cyan); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* Hauteur de la bande de pochettes bornée : les deux rangées entrent
   toujours en entier, quelle que soit la hauteur d'écran. */
.covers {
  display: grid;
  grid-template-rows: 1fr 1fr;
  height: min(330px, 38svh);
  padding-bottom: 0;
}
.covers__row { min-height: 0; }
.covers__track { height: 100%; }
.cover { width: auto; height: 100%; aspect-ratio: 1; }

@media (max-height: 700px) {
  .covers { grid-template-rows: 1fr; height: min(190px, 26svh); }
}
@media (max-width: 720px) {
  .covers { grid-template-rows: 1fr 1fr; height: min(260px, 32svh); }
}

/* Le bloc de texte absorbe l'espace libre ; la bande de pochettes garde
   sa hauteur et reste toujours entière, jamais rognée par le bas. */
.hero { justify-content: flex-start; }
.hero__inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ticker { flex: 0 0 auto; }

/* En colonne flex, la pastille s'étirait sur toute la largeur. */
.hero__inner { align-items: center; }
.hero__inner > * { max-width: 100%; }
.hero h1 { width: 100%; }

/* ============================================================
   LE JOURNAL
   Colonne de lecture étroite, chiffres détachés en marge,
   sources traitées comme du contenu et non comme une note de bas
   de page : c'est ce qui sépare un article d'un billet d'opinion.
   ============================================================ */
.grid-art {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
}
.artcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 30px 26px;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.artcard:hover {
  transform: translateY(-5px);
  border-color: rgba(35, 219, 220, 0.4);
  box-shadow: 0 24px 56px -32px rgba(35, 219, 220, 0.5);
}
.artcard--featured {
  grid-column: 1 / -1;
  background: linear-gradient(150deg, var(--surface-2), var(--bg-2));
  padding: clamp(30px, 4vw, 48px);
}
.artcard__meta {
  display: flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
}
.artcard__titre {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 96, "wght" 800;
  font-size: 22px;
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.artcard--featured .artcard__titre { font-size: clamp(26px, 3.4vw, 42px); max-width: 22ch; }
.artcard__chapo { font-size: 15px; color: var(--text-muted); line-height: 1.55; }
.artcard--featured .artcard__chapo { font-size: 17px; max-width: 62ch; }
.artcard__foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.artcard__pilier {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  background: var(--grad-flat);
  padding: 4px 11px;
  border-radius: 999px;
}
.artcard__go { color: var(--cyan); font-weight: 600; font-size: 14px; margin-left: auto; }

/* ---------- page article ---------- */
.art-shell { max-width: 780px; margin-inline: auto; }
.art-hero { padding-top: clamp(38px, 6vw, 72px); }
.art-hero h1 {
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.02;
  margin-block: 20px 0;
  font-variation-settings: "wdth" 94, "wght" 900;
  text-transform: none;
}
.art-chapo {
  margin-top: 22px;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  color: var(--text-muted);
}

.art-corps { font-size: 18px; line-height: 1.72; }
.art-corps p { color: rgba(242, 247, 246, 0.86); margin-bottom: 1.2em; }
.art-corps h2 {
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  font-variation-settings: "wdth" 98, "wght" 800;
  margin-block: clamp(38px, 5vw, 56px) 18px;
}
.art-liste { margin-block: 0 1.4em; }
.art-liste li {
  position: relative;
  padding-left: 24px;
  color: rgba(242, 247, 246, 0.86);
  margin-bottom: 12px;
}
.art-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 11px;
  height: 2px;
  background: var(--cyan);
}

.art-chiffre {
  display: flex;
  gap: 22px;
  align-items: baseline;
  margin-block: clamp(26px, 3.5vw, 38px);
  padding: 24px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  background: var(--bg-2);
}
.art-chiffre__v {
  flex: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: "wdth" 88, "wght" 900;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--grad-flat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.art-chiffre__t { font-size: 16px; line-height: 1.5; color: var(--text); }
.art-chiffre__src {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.art-cite {
  margin: clamp(26px, 3.5vw, 38px) 0;
  padding-left: 24px;
  border-left: 3px solid var(--cyan);
}
.art-cite p {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 98, "wght" 700;
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.32;
  color: var(--text);
  margin-bottom: 10px;
}
.art-cite cite {
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- sources ---------- */
.art-sources {
  margin-top: clamp(44px, 6vw, 68px);
  padding: clamp(26px, 3.4vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
}
.art-sources h2 {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 8px;
  font-variation-settings: "wdth" 100, "wght" 700;
}
.art-sources__note { font-size: 14px; color: var(--text-muted); margin-bottom: 22px; }
.art-sources ol { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.art-sources li {
  counter-increment: s;
  position: relative;
  padding-left: 34px;
  font-size: 15px;
  line-height: 1.5;
}
.art-sources li + li { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.art-sources li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink);
  background: var(--grad-flat);
  border-radius: 999px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.art-sources li + li::before { top: calc(0.1em + 16px); }
.art-src__ed {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.art-sources a { color: var(--cyan); text-decoration: none; }
.art-sources a:hover { text-decoration: underline; }
.art-src__note { display: block; font-size: 13.5px; color: var(--text-muted); margin-top: 4px; }

/* Le journal n'a plus de vitrine sur l'accueil : il vit dans le pied de page. */
@media (max-width: 980px) { .footer__top { grid-template-columns: 1fr 1fr; } }



/* ============================================================
   THÈME CLAIR — le podcast est présenté comme vivant
   Bascule par data/site.json -> "mode": "en-cours" | "archive",
   qui pose data-theme="clair" ou "sombre" sur <html>.
   Le dégradé cyan/menthe reste le même : c'est la marque. Ce qui
   change, c'est le fond, l'encre, et un accent assez foncé pour
   rester lisible sur clair (WCAG AA sur texte courant).
   ============================================================ */
:root[data-theme="clair"] {
  color-scheme: light;

  --bg: #f6faf9;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef6f4;

  --line: rgba(7, 16, 15, 0.1);
  --line-strong: rgba(7, 16, 15, 0.2);

  --text: #08120f;
  --text-muted: #4e6360;

  /* Le cyan de marque est trop clair pour du texte sur blanc :
     on garde un cyan foncé pour tout ce qui doit se lire. */
  --accent-lisible: #086e74;
  --voile: rgba(7, 16, 15, 0.04);
  --voile-fort: rgba(7, 16, 15, 0.08);
  --verre: rgba(246, 250, 249, 0.82);
  --verre-dense: rgba(246, 250, 249, 0.95);
  --panneau: rgba(255, 255, 255, 0.98);
  --ombre: rgba(7, 16, 15, 0.1);
}

:root[data-theme="sombre"] {
  --accent-lisible: var(--cyan);
  --voile: rgba(255, 255, 255, 0.04);
  --voile-fort: rgba(255, 255, 255, 0.09);
  --verre: rgba(8, 13, 13, 0.72);
  --verre-dense: rgba(8, 13, 13, 0.92);
  --panneau: rgba(14, 22, 22, 0.97);
  --ombre: rgba(0, 0, 0, 0.6);
}

/* ---------- surfaces translucides ---------- */
.header { background: var(--verre); }
.header.is-stuck { background: var(--verre-dense); }
.btn--ghost,
.badge,
.platform,
.menu > summary { background: var(--voile); }
.btn--ghost:hover,
.platform:hover,
.menu > summary:hover,
.menu[open] > summary { background: var(--voile-fort); }
.menu__panel { background: var(--panneau); box-shadow: 0 30px 70px -30px var(--ombre); }

/* ---------- accents lisibles ---------- */
:root[data-theme="clair"] .eyebrow,
:root[data-theme="clair"] .epcard__meta,
:root[data-theme="clair"] .epcard__go,
:root[data-theme="clair"] .artcard__meta,
:root[data-theme="clair"] .artcard__go,
:root[data-theme="clair"] .jt__cat,
:root[data-theme="clair"] .footer__num,
:root[data-theme="clair"] .ep-nav__num,
:root[data-theme="clair"] .ep-chap__t,
:root[data-theme="clair"] .menu__group h3,
:root[data-theme="clair"] .tick__b,
:root[data-theme="clair"] .ep-res a,
:root[data-theme="clair"] .art-sources a { color: var(--accent-lisible); }

:root[data-theme="clair"] .ep-themes li::before,
:root[data-theme="clair"] .art-liste li::before { background: var(--accent-lisible); }
:root[data-theme="clair"] .ep-hero__hook,
:root[data-theme="clair"] .art-cite,
:root[data-theme="clair"] .art-chiffre { border-color: var(--accent-lisible); }
:root[data-theme="clair"] :focus-visible { outline-color: var(--accent-lisible); }
:root[data-theme="clair"] ::selection { background: var(--mint); color: var(--ink); }

/* Le texte en dégradé vire au pâle sur fond clair : version foncée. */
:root[data-theme="clair"] .hero h1 .grad,
:root[data-theme="clair"] .stat__value,
:root[data-theme="clair"] .question,
:root[data-theme="clair"] .switch__apres,
:root[data-theme="clair"] .art-chiffre__v {
  background: linear-gradient(105deg, #0a7f86 0%, #2b9c7c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- corps de texte ---------- */
:root[data-theme="clair"] .ep-body p,
:root[data-theme="clair"] .art-corps p,
:root[data-theme="clair"] .art-liste li,
:root[data-theme="clair"] .epcard__hook { color: rgba(8, 18, 15, 0.82); }

/* ---------- composants ---------- */
:root[data-theme="clair"] .hero__glow {
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(35, 219, 220, 0.26), transparent 70%),
    radial-gradient(ellipse 45% 45% at 78% 18%, rgba(100, 213, 176, 0.22), transparent 70%);
}
:root[data-theme="clair"] .hostband__glow {
  background: radial-gradient(circle, rgba(35, 219, 220, 0.22), transparent 66%);
}
:root[data-theme="clair"] .hostband__photo { filter: drop-shadow(0 26px 44px rgba(7, 16, 15, 0.22)); }

:root[data-theme="clair"] .epcard,
:root[data-theme="clair"] .artcard {
  box-shadow: 0 1px 2px rgba(7, 16, 15, 0.04), 0 12px 28px -20px rgba(7, 16, 15, 0.18);
}
:root[data-theme="clair"] .epcard:hover {
  border-color: rgba(10, 127, 134, 0.42);
  box-shadow: 0 22px 48px -28px rgba(10, 127, 134, 0.5);
}
:root[data-theme="clair"] .artcard:hover {
  border-color: rgba(10, 127, 134, 0.42);
  box-shadow: 0 22px 48px -28px rgba(10, 127, 134, 0.45);
}
:root[data-theme="clair"] .artcard--featured,
:root[data-theme="clair"] .outro,
:root[data-theme="clair"] .journal-teaser {
  background: linear-gradient(160deg, #ffffff, var(--surface-2));
}

/* Les pochettes restent grisées au repos, mais éclaircies : sur fond
   clair, un gris sombre ferait des trous dans la page. */
:root[data-theme="clair"] .cover { outline-color: rgba(7, 16, 15, 0.08); }
:root[data-theme="clair"] .cover img {
  filter: grayscale(1) brightness(1.06) contrast(0.92) opacity(0.62);
}
:root[data-theme="clair"] .cover:hover img,
:root[data-theme="clair"] .cover:focus-visible img { filter: none; }
:root[data-theme="clair"] .cover:hover::after,
:root[data-theme="clair"] .cover:focus-visible::after { box-shadow: inset 0 0 0 2px var(--accent-lisible); }

:root[data-theme="clair"] .switch { border-bottom-color: rgba(7, 16, 15, 0.07); }
:root[data-theme="clair"] .switch:hover { background: rgba(7, 16, 15, 0.03); }
:root[data-theme="clair"] .tick { border-right-color: rgba(7, 16, 15, 0.09); }

:root[data-theme="clair"] .player audio { background: var(--surface-2); }
:root[data-theme="clair"] .ep-hero__visual,
:root[data-theme="clair"] .epcard__thumb { background: var(--surface-2); }

:root[data-theme="clair"] .btn--primary { color: #04211f; }
:root[data-theme="clair"] .thumb__num { background: #fff; }
:root[data-theme="clair"] .footer li .is-off { color: rgba(78, 99, 96, 0.6); }

/* Les titres d'articles du pied de page sont des ancres de référencement :
   ils s'affichent en entier, sur plusieurs lignes si nécessaire. */
.footer__top > div:nth-child(3) li a { line-height: 1.35; display: block; }
.footer__top > div:nth-child(3) li + li { margin-top: 14px; }

/* ---------- mentions légales ---------- */
.ml-titre {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-lisible);
  margin-block: clamp(34px, 4.5vw, 50px) 14px;
  font-variation-settings: "wdth" 100, "wght" 700;
}
.ml-liste { margin: 0; }
.ml-ligne {
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.ml-ligne dt { color: var(--text-muted); }
.ml-ligne dd { margin: 0; }
.ml-p { font-size: 16px; line-height: 1.65; color: var(--text-muted); max-width: 68ch; }
.ml-p a { color: var(--accent-lisible); }
@media (max-width: 620px) { .ml-ligne { grid-template-columns: 1fr; gap: 2px; } }

/* ============================================================
   AURORA
   Motif adapté de « aurora-background » d'Aceternity / 21st.dev
   (@manuarora700) : deux dégradés répétitifs superposés, floutés,
   qui dérivent lentement. Palette strictement maison, cyan et menthe,
   aucune teinte importée.
   ============================================================ */
@keyframes aurora-derive {
  from { background-position: 50% 50%, 50% 50%; }
  to   { background-position: 350% 50%, 350% 50%; }
}

.aurora {
  position: absolute;
  inset: -14px;
  pointer-events: none;
  z-index: 0;
  --aurora-bandes: repeating-linear-gradient(
    100deg,
    var(--cyan) 0%, var(--cyan) 7%,
    transparent 10%, transparent 12%,
    var(--cyan) 16%
  );
  --aurora-lueur: repeating-linear-gradient(
    100deg,
    var(--mint) 10%,
    #7fe3d6 15%,
    var(--cyan) 20%,
    #d8f7ef 25%,
    var(--mint) 30%
  );
  background-image: var(--aurora-bandes), var(--aurora-lueur);
  background-size: 300% 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(34px) saturate(1.25);
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at 60% 0%, black 26%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 0%, black 26%, transparent 78%);
  animation: aurora-derive 62s linear infinite;
}
/* Sur fond sombre, l'aurora doit éclaircir ; sur clair, elle doit teinter. */
:root[data-theme="sombre"] .aurora {
  mix-blend-mode: screen;
  opacity: 0.34;
  filter: blur(40px) saturate(1.4) contrast(1.1);
}
@media (prefers-reduced-motion: reduce) { .aurora { animation: none; } }

/* Le contenu du hero passe au-dessus de la texture. */
.hero__inner, .ticker, .covers { position: relative; z-index: 1; }

/* Aurora recadrée : elle habille le titre et s'éteint avant la bande de
   pochettes, qui doit rester neutre pour que le survol en couleur se voie. */
.aurora {
  inset: -14px -14px auto -14px;
  height: min(560px, 62svh);
  filter: blur(30px) saturate(1.45);
  opacity: 0.62;
  mask-image: radial-gradient(ellipse 96% 62% at 58% 4%, black 18%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 96% 62% at 58% 4%, black 18%, transparent 74%);
}

/* ============================================================
   TEINTES DE SECTION
   Le site alternait un seul fond du haut en bas. Chaque grande
   section reçoit sa propre teinte, toutes tirées des deux couleurs
   de marque : rien d'importé, juste des dilutions.
   ============================================================ */
:root[data-theme="clair"] {
  --teinte-cyan: #e6f6f8;
  --teinte-menthe: #eaf7f2;
  --teinte-neutre: #fbfdfc;
}
:root[data-theme="sombre"] {
  --teinte-cyan: #0a1719;
  --teinte-menthe: #0a1815;
  --teinte-neutre: #0b1211;
}

.section--teinte-cyan { background: var(--teinte-cyan); }
.section--teinte-menthe { background: var(--teinte-menthe); }
.section--neutre { background: var(--teinte-neutre); }

/* La section « question » devient un vrai palier de couleur, avec sa
   propre lueur, plutôt qu'un titre posé sur du vide. */
.question-band {
  position: relative;
  overflow: hidden;
  background: var(--teinte-cyan);
}
.question-band::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 190%;
  background:
    radial-gradient(ellipse 46% 52% at 22% 40%, rgba(35, 219, 220, 0.3), transparent 68%),
    radial-gradient(ellipse 44% 48% at 82% 62%, rgba(100, 213, 176, 0.32), transparent 68%);
  filter: blur(16px);
  pointer-events: none;
}
.question-band .shell { position: relative; z-index: 1; }

.hostband { background: var(--teinte-menthe); }
.stats { background: var(--bg-2); }

/* ============================================================
   MISE EN VALEUR DES MOTS
   Un trait de surligneur aux couleurs de marque, posé derrière le
   mot. Écrire **mot** dans les données suffit.
   ============================================================ */
.hl {
  position: relative;
  background-image: linear-gradient(105deg, rgba(35, 219, 220, 0.55) 0%, rgba(100, 213, 176, 0.55) 100%);
  background-repeat: no-repeat;
  background-size: 100% 46%;
  background-position: 0 78%;
  padding-inline: 2px;
  border-radius: 2px;
  color: inherit;
  font-weight: 500;
}
:root[data-theme="sombre"] .hl {
  background-image: linear-gradient(105deg, rgba(35, 219, 220, 0.34) 0%, rgba(100, 213, 176, 0.34) 100%);
  color: var(--text);
}
/* Dans un titre, le surligneur monte plus haut et s'épaissit. */
.display .hl, h1 .hl, h2 .hl { background-size: 100% 32%; background-position: 0 86%; font-weight: inherit; }

/* L'aurora tenait sur une bande nette en haut du hero, ce qui se lisait
   comme un bandeau coloré. Elle occupe maintenant toute la hauteur utile
   et s'éteint en dégradé souple avant les pochettes. */
.aurora {
  height: min(760px, 82svh);
  filter: blur(46px) saturate(1.55);
  opacity: 0.72;
  mask-image:
    radial-gradient(ellipse 120% 78% at 50% -6%, black 6%, rgba(0,0,0,0.55) 44%, transparent 82%);
  -webkit-mask-image:
    radial-gradient(ellipse 120% 78% at 50% -6%, black 6%, rgba(0,0,0,0.55) 44%, transparent 82%);
}
/* Deuxième nappe, décalée et plus lente : c'est ce décalage qui donne
   l'impression de profondeur plutôt qu'un simple dégradé animé. */
.aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--aurora-lueur);
  background-size: 260% 180%;
  opacity: 0.5;
  animation: aurora-derive 94s linear infinite reverse;
}
@media (prefers-reduced-motion: reduce) { .aurora::after { animation: none; } }

/* Un flou de 46 px lissait les bandes jusqu'à ne plus donner qu'un aplat
   dégradé. On desserre pour que les rubans de l'aurora se lisent. */
.aurora { filter: blur(24px) saturate(1.5); opacity: 0.66; }

/* ============================================================
   EFFETS DU JOURNAL
   Repris du blog Studio Rouge Pomme, transposés en cyan et menthe :
   halo de curseur, spotlight de carte, machine à écrire.
   Tous désactivés sous prefers-reduced-motion et sur écran tactile.
   ============================================================ */
.halo {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(35, 219, 220, 0.14) 0%, rgba(100, 213, 176, 0.07) 40%, transparent 70%);
}

.spot { position: relative; }
.spot::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: 0;
  border-radius: calc(var(--radius-lg) + 12px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%),
    rgba(35, 219, 220, 0.16), transparent 70%);
}
.spot:hover::before { opacity: 1; }
.spot > .artcard { position: relative; z-index: 1; }

.machine { position: relative; white-space: nowrap; }
.machine--active::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  height: 0.82em;
  margin-left: 0.06em;
  vertical-align: -0.06em;
  background: var(--accent-lisible);
  animation: curseur 1s steps(2) infinite;
}
@keyframes curseur { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .machine--active::after { animation: none; } }

/* ---------- couverture d'article ---------- */
.artcard { padding: 0; overflow: hidden; }
.artcard__couv {
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.artcard__couv img {
  width: 100%;
  height: auto;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.artcard:hover .artcard__couv img { transform: scale(1.04); }
.artcard__meta,
.artcard__titre,
.artcard__chapo,
.artcard__foot { margin-inline: 26px; }
.artcard__meta { margin-top: 22px; }
.artcard__foot { margin-bottom: 24px; }
.artcard--featured { padding: 0; }
.artcard--featured .artcard__meta,
.artcard--featured .artcard__titre,
.artcard--featured .artcard__chapo,
.artcard--featured .artcard__foot { margin-inline: clamp(26px, 3.4vw, 44px); }

/* En vedette : couverture à gauche, texte à droite. */
/* En vedette : la couverture occupe toute la colonne de gauche, le texte
   s'empile dans celle de droite. Sans placement explicite, les cinq enfants
   de la carte se répartissent en zigzag sur les deux colonnes. */
@media (min-width: 900px) {
  .une .artcard--featured {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-auto-rows: min-content;
    align-content: center;
    gap: 0;
  }
  .une .artcard__couv {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .une .artcard__couv img { height: 100%; object-fit: cover; }
  .une .artcard__meta,
  .une .artcard__titre,
  .une .artcard__chapo,
  .une .artcard__foot { grid-column: 2; }
  .une .artcard__meta { margin-top: clamp(28px, 3.4vw, 44px); }
  .une .artcard__titre { font-size: clamp(24px, 2.6vw, 34px); margin-top: 10px; }
  .une .artcard__chapo { margin-top: 12px; }
  .une .artcard__foot { margin-top: 20px; margin-bottom: clamp(28px, 3.4vw, 44px); }
}

/* ---------- navigation par catégorie ---------- */
.cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.cat-nav a {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--voile);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cat-nav a:hover {
  background: var(--voile-fort);
  border-color: var(--accent-lisible);
  transform: translateY(-2px);
}

.cat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  padding-bottom: 18px;
  margin-bottom: clamp(22px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
}
.cat-head h2 { font-size: clamp(24px, 3.4vw, 38px); }
.cat-head p { color: var(--text-muted); font-size: 15px; margin: 0; }

.une { margin-bottom: clamp(10px, 2vw, 20px); }

/* Bandeau de brouillon : visible en prévisualisation, absent du site publié. */
.brouillon {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 16px;
  border-radius: 999px;
  background: #ffe9a8;
  color: #6b4c00;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   BLOC D'AIDE
   Obligatoire sur les articles qui parlent de santé mentale.
   Volontairement distinct du reste : ce n'est pas du contenu
   éditorial, ce sont des numéros qui servent.
   ============================================================ */
.aide {
  margin-top: clamp(40px, 5.5vw, 62px);
  padding: clamp(26px, 3.4vw, 38px);
  border: 1px solid var(--accent-lisible);
  border-radius: var(--radius-lg);
  background: var(--teinte-cyan);
}
.aide h2 {
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 14px;
  font-variation-settings: "wdth" 100, "wght" 800;
  color: var(--text);
}
.aide p { font-size: 15.5px; color: var(--text-muted); margin-bottom: 20px; max-width: 68ch; }
.aide li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text);
}
.aide li + li { margin-top: 14px; }
.aide li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 10px;
  height: 2px;
  background: var(--accent-lisible);
}
.aide a { color: var(--accent-lisible); font-weight: 600; }

/* Entrée du journal en pied de page : une destination, pas une ligne de plus. */
.footer__phare { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.footer__phare a {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 98, "wght" 800;
  font-size: 17px;
  color: var(--text) !important;
  letter-spacing: -0.01em;
}
.footer__phare a span {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13.5px;
  color: var(--text-muted);
  letter-spacing: 0;
}
.footer__phare a:hover { color: var(--accent-lisible) !important; }

/* ============================================================
   INDEX DU JOURNAL — resserrage
   Les cartes reprenaient une couverture qui contient déjà le titre :
   l'information était donnée deux fois et la page s'étirait sans rien
   gagner. La couverture ne reste que sur l'article à la une.
   ============================================================ */
.grid-art { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: clamp(14px, 1.6vw, 20px); }

.artcard { padding: 22px 24px 20px; gap: 8px; }
.artcard__meta,
.artcard__titre,
.artcard__chapo,
.artcard__foot { margin-inline: 0; }
.artcard__meta { margin-top: 0; font-size: 11.5px; }
.artcard__titre { font-size: 19px; line-height: 1.18; }
.artcard__chapo {
  font-size: 14.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.artcard__foot { margin-bottom: 0; padding-top: 12px; }
.artcard__go { font-size: 13.5px; }

/* Les sections de catégorie se suivent de plus près. */
.grid-art + .grid-art, .season + .season { margin-top: 0; }
.cat-head { padding-bottom: 12px; margin-bottom: clamp(16px, 2vw, 22px); }
.cat-head h2 { font-size: clamp(21px, 2.6vw, 30px); }
.cat-head p { font-size: 14px; }

/* La carte à la une garde sa couverture et reste la seule respiration. */
.artcard--featured { padding: 0; }
.une { margin-bottom: clamp(26px, 3.5vw, 44px); }
@media (min-width: 900px) {
  .une .artcard--featured { grid-template-columns: 1fr 1fr; }
  .une .artcard__meta,
  .une .artcard__titre,
  .une .artcard__chapo,
  .une .artcard__foot { margin-inline: clamp(24px, 3vw, 40px); }
  .une .artcard__chapo { -webkit-line-clamp: 4; }
}
@media (max-width: 899px) {
  .artcard--featured { padding: 0 0 20px; }
  .artcard--featured .artcard__meta,
  .artcard--featured .artcard__titre,
  .artcard--featured .artcard__chapo,
  .artcard--featured .artcard__foot { margin-inline: 24px; }
  .artcard--featured .artcard__meta { margin-top: 20px; }
}

/* La couverture de l'article à la une doit remplir sa colonne : sans hauteur
   explicite sur l'image, la colonne s'étirait et laissait un vide dessous. */
@media (min-width: 900px) {
  .une .artcard__couv { display: block; min-height: 100%; overflow: hidden; }
  .une .artcard__couv img { display: block; width: 100%; height: 100%; object-fit: cover; }
}

/* Recadrer la couverture coupait son propre titre en plein mot. On garde
   son format d'origine et on centre les deux colonnes : un léger vide vaut
   mieux qu'un titre tranché. */
@media (min-width: 900px) {
  .une .artcard--featured { align-items: center; }
  .une .artcard__couv { min-height: 0; align-self: center; border-right: 1px solid var(--line); }
  .une .artcard__couv img { height: auto; object-fit: fill; }
}