/* ==========================================================================
   Référence Info, feuille de style principale
   Structure : 1. Tokens · 2. Base · 3. En-tête · 4. Cartes · 5. Blocs
               6. Une · 7. Pages · 8. Article · 9. Pied · 10. Overlays
               11. Lecteur · 12. Responsive
   ========================================================================== */

/* 1. TOKENS ================================================================= */
:root {
  /* Trois couleurs, trois rôles.
     Rouge + vert foncé : couleurs principales.
     Dégradé jaune-orange : couleur secondaire, réservée aux accents. */
  --red:        #d6001c;
  --red-dark:   #a50016;
  --red-soft:   #fff1f2;

  --green:      #023f3b;
  --green-2:    #04544e;
  --green-dark: #012a27;
  --green-soft: #e6f0ee;

  --gold-1:     #efa152;
  --gold-2:     #de6e14;
  --gold-soft:  #fdf2e4;
  --gradient:   linear-gradient(100deg, var(--gold-1), var(--gold-2));

  --ink:        #101114;
  --ink-2:      #34353b;
  --muted:      #6a6c75;
  --line:       #e2e3e7;
  --line-2:     #ecedf0;
  --panel:      #f5f5f7;
  --bg:         #ffffff;
  --bar:        var(--green);
  --bar-2:      var(--green-2);
  --on-bar:     #ffffff;
  --on-bar-dim: #9fb8b4;

  --shadow-sm:  0 1px 2px rgba(16,17,20,.06);
  --shadow-md:  0 6px 24px rgba(16,17,20,.10);
  --shadow-lg:  0 18px 50px rgba(16,17,20,.18);

  --wrap: 1260px;
  --gut: 24px;
  --r: 3px;

  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --head: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --subnav-h: 46px;
}

[data-theme="dark"] {
  --ink:      #eef3f2;
  --ink-2:    #c3d0cd;
  --muted:    #90a3a0;
  --line:     #22403c;
  --line-2:   #1a3330;
  --panel:    #122b28;
  --bg:       #0b1e1c;
  --bar:      var(--green-dark);
  --bar-2:    #03332f;
  --red-soft: #2f1216;
  --green-soft: #103733;
  --gold-soft:  #33240f;
  --shadow-md: 0 6px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.6);
}

/* 2. BASE =================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }

/* « height: auto » n'est pas décoratif : une image qui porte width et height
   en attributs — ce que fait WordPress, et ce qui évite les sauts de mise en
   page — conserve sinon sa hauteur d'origine quand la largeur se réduit. Sur
   téléphone, une photo de 1600 × 900 s'affichait en 343 × 900, étirée. */
img { max-width: 100%; height: auto; display: block; }
/* Taille par défaut des pictogrammes : évite tout SVG géant si une règle
   de composant venait à manquer. Les règles ci-dessous restent prioritaires. */
svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 800; line-height: 1.14; letter-spacing: -.015em; margin: 0; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--red); color: #fff; padding: 12px 18px; font-weight: 700;
}
.skip:focus { left: 0; }

/* 3. EN-TÊTE ================================================================ */
.topbar { background: var(--bar); color: var(--on-bar); }
.topbar__in {
  display: flex; align-items: center; gap: 8px; height: 58px;
}

.brand { display: flex; align-items: center; gap: 11px; margin-right: 18px; flex: none; }
.brand__mark {
  width: 42px; height: 42px; background: var(--red); border-radius: 2px;
  display: grid; place-items: center; flex: none;
}
.brand__mark span {
  font-family: var(--head); font-weight: 800; font-size: 21px; color: #fff;
  letter-spacing: -.04em; line-height: 1; transform: translateY(-1px);
}
.brand__word {
  display: flex; flex-direction: column; line-height: 1;
  /* Sur l'accueil ce bloc est un h1 : sans cette remise à zéro, la marge et
     le corps par défaut du navigateur décaleraient la barre haute. */
  margin: 0; /* h1 */ font-size: inherit; font-weight: inherit;
}
.brand__word b {
  font-family: var(--head); font-weight: 800; font-size: 16px;
  letter-spacing: .01em; text-transform: uppercase; color: #fff;
}
.brand__word em {
  font-style: normal; font-size: 10.5px; color: var(--on-bar-dim);
  letter-spacing: .06em; text-transform: uppercase; margin-top: 3px;
}

.toplinks { display: flex; align-items: center; gap: 2px; }
.toplinks a {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 13px; font-size: 13.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .045em; color: var(--on-bar);
  border-radius: 2px; transition: background .15s;
}
.toplinks a:hover { background: rgba(255,255,255,.1); }
.toplinks svg { width: 15px; height: 15px; fill: currentColor; opacity: .85; }

.lives { display: flex; align-items: center; gap: 6px; margin-left: 14px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.18); }
.live-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 8px; border-radius: 40px;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--on-bar); background: rgba(255,255,255,.07); transition: background .15s;
  white-space: nowrap;
}
.live-btn:hover { background: rgba(255,255,255,.16); }
.live-btn i {
  width: 22px; height: 22px; border-radius: 50%; background: var(--red);
  display: grid; place-items: center; flex: none;
}
.live-btn i::before {
  content: ""; width: 0; height: 0; margin-left: 2px;
  border-left: 7px solid #fff; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}
.live-btn.is-playing i::before {
  border: 0; width: 8px; height: 8px; margin: 0;
  background: #fff; border-radius: 1px;
}

.topbar__end { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 2px; color: var(--on-bar); transition: background .15s;
}
.icon-btn:hover { background: rgba(255,255,255,.12); }
.icon-btn svg { width: 19px; height: 19px; fill: currentColor; }

.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border-radius: 2px; transition: background .15s;
}
.lang-btn:hover { background: rgba(255,255,255,.12); }
.lang-btn svg { width: 10px; height: 10px; fill: currentColor; opacity: .8; }

.menu-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px;
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  border-radius: 2px; transition: background .15s;
}
.menu-btn:hover { background: rgba(255,255,255,.12); }
.menu-btn span.bars { display: block; width: 18px; }
.menu-btn span.bars b { display: block; height: 2px; background: currentColor; margin: 4px 0; border-radius: 2px; }

.redline { height: 4px; background: var(--red); }

/*, barre de sections : */
.subnav {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,0);
  transition: box-shadow .2s;
}
body.is-scrolled .subnav { box-shadow: 0 4px 16px rgba(16,17,20,.09); }
.subnav__in { display: flex; align-items: center; gap: 4px; height: var(--subnav-h); }

.subnav__mark {
  width: 0; overflow: hidden; opacity: 0; flex: none;
  transition: width .22s ease, opacity .18s ease, margin .22s ease;
}
body.is-scrolled .subnav__mark { width: 30px; opacity: 1; margin-right: 14px; }
.subnav__mark a { display: block; width: 30px; height: 30px; background: var(--red); border-radius: 2px; display: grid; place-items: center; }
.subnav__mark span { font-family: var(--head); font-weight: 800; font-size: 15px; color: #fff; letter-spacing: -.04em; }

.subnav__scroll {
  display: flex; align-items: center; gap: 2px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none; flex: 1; height: 100%;
}
.subnav__scroll::-webkit-scrollbar { display: none; }
.subnav__scroll a {
  position: relative; display: inline-flex; align-items: center; height: 100%;
  padding: 0 14px; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .055em;
  color: var(--ink-2);
}
.subnav__scroll a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 3px; background: var(--red); transform: scaleX(0); transition: transform .16s;
}
.subnav__scroll a:hover { color: var(--ink); }
.subnav__scroll a:hover::after, .subnav__scroll a.is-active::after { transform: scaleX(1); }
.subnav__scroll a.is-active { color: var(--red); }

.subnav__more {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--red);
  border: 1px solid var(--line);
}
.subnav__more svg { width: 13px; height: 13px; fill: currentColor; }

/*, bandeau tendances : */
.trends { border-bottom: 1px solid var(--line-2); background: var(--bg); }
.trends__in { display: flex; align-items: center; gap: 10px; padding-block: 11px; overflow-x: auto; scrollbar-width: none; }
.trends__in::-webkit-scrollbar { display: none; }
.trends b {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); flex: none; padding-right: 4px;
}
.trends a {
  flex: none; padding: 5px 13px; border: 1px solid var(--line); border-radius: 40px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); transition: .15s;
  white-space: nowrap;
}
.trends a:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }
/* Le libellé est un lien, mais il ne doit pas ressembler aux pastilles de
   sujets qui le suivent : il garde l'allure du mot en gras qu'il était. */
.trends .trends__une {
  flex: none; padding: 0 6px 0 0; border: 0; background: none;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); text-decoration: none;
}
.trends .trends__une:hover { text-decoration: underline; background: none; border: 0; }

/* 4. CARTES ================================================================= */
.thumb {
  position: relative; display: block; overflow: hidden;
  background: var(--panel); aspect-ratio: 16 / 9;
}
.thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.card:hover .thumb img { transform: scale(1.045); }
.thumb__badge {
  position: absolute; left: 0; bottom: 0;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(10,11,13,.82); color: #fff; backdrop-filter: blur(4px);
  padding: 6px 11px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
}
.thumb__badge svg { width: 12px; height: 12px; fill: currentColor; }

.card { display: flex; flex-direction: column; gap: 9px; }
.card__kicker {
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red);
}
.card__title { font-size: 19px; line-height: 1.22; }
.card:hover .card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.card__chapo { color: var(--muted); font-size: 15.5px; margin: 0; }
.card__meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}
.card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line); }

.card--lead .card__title { font-size: 34px; letter-spacing: -.022em; }
.card--lead .card__chapo { font-size: 17.5px; color: var(--ink-2); }

.card--h { flex-direction: row; gap: 14px; align-items: flex-start; }
.card--h .thumb { width: 116px; flex: none; aspect-ratio: 1 / 1; }
.card--h .card__title { font-size: 16px; }

.card--sm .card__title { font-size: 16.5px; }

.card--bare .card__title { font-size: 17px; }
.card--bare { padding: 16px 0; border-top: 1px solid var(--line-2); }

/* 5. BLOCS ================================================================== */
main { display: block; }
.block { padding: 40px 0; border-top: 1px solid var(--line); }
.block:first-of-type { border-top: 0; }
.block__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.block__head h2 {
  font-size: 25px; letter-spacing: -.02em;
  display: inline-flex; align-items: center; gap: 9px;
}
.block__head h2 svg { width: 16px; height: 16px; fill: var(--red); }
.block__head h2 a:hover { color: var(--red); }
.block__head p { margin: 0; color: var(--muted); font-size: 14.5px; flex: 1; }
.block__head .more {
  margin-left: auto; font-size: 13px; font-weight: 700; color: var(--red);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.block__head .more:hover { text-decoration: underline; }

.grid { display: grid; gap: 28px 26px; }
.grid--1 { grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }

/* 6. LA UNE ================================================================= */
.hero { padding: 30px 0 40px; }
.hero__grid { display: grid; grid-template-columns: 1fr 344px; gap: 36px; align-items: start; }
.hero__main { display: grid; gap: 30px; }
.hero__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding-top: 26px; border-top: 1px solid var(--line); }

/* panneau direct / en continu */
.livepanel { background: var(--panel); border-top: 4px solid var(--red); }
.livepanel__head {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px;
}
.livepanel__head h2 { font-size: 20px; display: inline-flex; align-items: center; gap: 8px; }
.livepanel__head h2 svg { width: 14px; height: 14px; fill: var(--red); }
.pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none;
  box-shadow: 0 0 0 0 rgba(214,0,28,.6); animation: pulse 2s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(214,0,28,0); }
  100% { box-shadow: 0 0 0 0 rgba(214,0,28,0); }
}
.livepanel__list { padding: 0 18px 8px; max-height: 486px; overflow-y: auto; }
.livepanel__list::-webkit-scrollbar { width: 5px; }
.livepanel__list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.flash {
  display: grid; grid-template-columns: 46px 1fr; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  position: relative;
}
.flash:last-child { border-bottom: 0; }
.flash time {
  font-size: 12px; font-weight: 800; color: var(--red);
  font-variant-numeric: tabular-nums; padding-top: 2px;
}
.flash p { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.flash:hover p { text-decoration: underline; text-underline-offset: 2px; }
.flash__tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

.livepanel__foot { padding: 12px 18px 18px; }
.livepanel__foot a {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--red);
}

/* bande podcasts */
.strip { background: var(--bar); color: #fff; padding: 44px 0; }
.strip .block__head h2 { color: #fff; }
.strip .block__head h2 svg { fill: var(--red); }
.strip .block__head p { color: var(--on-bar-dim); }
.strip .block__head .more { color: #fff; }
.pod {
  display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center;
  padding: 14px; background: var(--bar-2); border-radius: 3px; transition: background .15s;
}
.pod:hover { background: #2e3036; }
.pod__cover { position: relative; width: 74px; height: 74px; border-radius: 2px; overflow: hidden; background: #000; }
.pod__cover img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.pod__cover i {
  position: absolute; inset: 0; margin: auto; width: 30px; height: 30px;
  border-radius: 50%; background: var(--red); display: grid; place-items: center;
}
.pod__cover i::before {
  content: ""; width: 0; height: 0; margin-left: 3px;
  border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.pod__show { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--red); }
.pod__title { font-family: var(--head); font-weight: 700; font-size: 15px; line-height: 1.28; margin: 5px 0 6px; }
.pod__dur { font-size: 12.5px; color: var(--on-bar-dim); }

/* newsletter */
.newsletter { background: var(--gradient); color: var(--green-dark); padding: 46px 0; }
.newsletter__in { display: grid; grid-template-columns: 1fr 460px; gap: 40px; align-items: center; }
.newsletter h2 { font-size: 28px; color: var(--green-dark); }
.newsletter p { margin: 10px 0 0; color: rgba(1,42,39,.82); font-size: 16px; max-width: 46ch; }
.nl-form { display: flex; gap: 10px; }
.nl-form input {
  flex: 1; min-width: 0; padding: 15px 16px; border: 0; border-radius: 2px;
  font: inherit; font-size: 15.5px; color: var(--ink); background: #fff;
}
.nl-form button {
  padding: 15px 24px; background: var(--green-dark); color: #fff; border-radius: 2px;
  font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .06em;
  transition: background .15s;
}
.nl-form button:hover { background: var(--green); }
.nl-note { margin-top: 12px; font-size: 12.5px; color: rgba(1,42,39,.72); }
.nl-ok { margin-top: 12px; font-size: 14.5px; font-weight: 700; }

/* 7. PAGES ================================================================== */
.pagehead { padding: 34px 0 26px; border-bottom: 1px solid var(--line); }
.pagehead h1 { font-size: 40px; letter-spacing: -.028em; }
.pagehead h1 span { color: var(--red); }
.pagehead p { margin: 12px 0 0; color: var(--muted); font-size: 17px; max-width: 66ch; }

.crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.crumb a:hover { color: var(--red); }
.crumb span { opacity: .5; }

.aside-box { border-top: 3px solid var(--ink); padding-top: 14px; }
.aside-box > h3 {
  font-size: 15px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px;
}
.aside-box + .aside-box { margin-top: 34px; }

.rank { counter-reset: r; }
.rank .card--bare { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.rank .card--bare::before {
  counter-increment: r; content: counter(r);
  font-family: var(--head); font-weight: 800; font-size: 25px; line-height: 1;
  /* Le classement porte la couleur secondaire : il hiérarchise sans concurrencer
     le rouge, qui reste réservé aux signaux éditoriaux. */
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.prog { border-top: 1px solid var(--line); }
.prog__row {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 16px; align-items: center;
  padding: 15px 0; border-bottom: 1px solid var(--line-2);
}
.prog__row.is-now { background: var(--red-soft); margin-inline: -12px; padding-inline: 12px; }
.prog__row time { font-family: var(--head); font-weight: 800; font-size: 17px; color: var(--red); font-variant-numeric: tabular-nums; }
.prog__row h3 { font-size: 16.5px; }
.prog__row p { margin: 3px 0 0; font-size: 14px; color: var(--muted); }
.prog__now { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--red); }

.live-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
  padding: 22px; background: var(--panel); border-left: 4px solid var(--red);
}
.live-card h2 { font-size: 22px; }
.live-card p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.live-card__play {
  width: 62px; height: 62px; border-radius: 50%; background: var(--red);
  display: grid; place-items: center; flex: none; transition: transform .15s;
}
.live-card__play:hover { transform: scale(1.06); }
.live-card__play::before {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 19px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.live-card.is-playing .live-card__play::before {
  border: 0; width: 18px; height: 18px; margin: 0; background: #fff; border-radius: 2px;
}

.searchbar { display: flex; gap: 10px; margin: 26px 0 8px; }
.searchbar input {
  flex: 1; padding: 15px 18px; border: 2px solid var(--line); border-radius: 2px;
  font: inherit; font-size: 17px; background: var(--bg); color: var(--ink);
}
.searchbar input:focus { border-color: var(--red); outline: none; }
.searchbar button {
  padding: 15px 26px; background: var(--red); color: #fff; border-radius: 2px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 14px;
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.filters button {
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 40px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: .15s;
}
.filters button:hover { border-color: var(--red); color: var(--red); }
.filters button.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.results-count { color: var(--muted); font-size: 14.5px; margin-bottom: 20px; }

.prose { max-width: 74ch; font-size: 17.5px; }
.prose h2 { font-size: 24px; margin: 34px 0 12px; }
.prose h3 { font-size: 19px; margin: 26px 0 8px; }
.prose ul { padding-left: 20px; margin: 0 0 1em; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 30px 0; }
.info-card { padding: 22px; background: var(--panel); border-top: 3px solid var(--red); }
.info-card h3 { font-size: 17px; margin-bottom: 8px; }
.info-card p { margin: 0; font-size: 15px; color: var(--muted); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 720px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.field input, .field textarea, .field select {
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 2px;
  font: inherit; font-size: 16px; background: var(--bg); color: var(--ink);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--red); outline: none; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px;
  background: var(--red); color: #fff; border-radius: 2px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 14px;
  transition: background .15s;
}
.btn:hover { background: var(--red-dark); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--panel); border-color: var(--ink); }

.empty { padding: 60px 0; text-align: center; color: var(--muted); }
.empty h2 { font-size: 24px; color: var(--ink); margin-bottom: 10px; }

/* 8. ARTICLE ================================================================ */
.article { padding: 26px 0 10px; }
.article__grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 48px; align-items: start; }
.article__kicker {
  font-size: 12.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--red);
  margin-bottom: 12px; display: block;
}
.article h1 { font-size: 42px; letter-spacing: -.028em; margin-bottom: 16px; }
.article__chapo { font-size: 20px; line-height: 1.45; color: var(--ink-2); font-weight: 600; margin-bottom: 22px; }

.byline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted); margin-bottom: 24px;
}
.byline b { color: var(--ink); font-weight: 700; }
.byline .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line); }
.byline .share { margin-left: auto; display: flex; gap: 6px; }
.byline .share button, .byline .share a {
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center; transition: .15s; color: var(--ink-2);
}
.byline .share button:hover, .byline .share a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.byline .share svg { width: 15px; height: 15px; fill: currentColor; }

.figure { margin: 0 0 28px; }
.figure figcaption {
  font-size: 13px; color: var(--muted); padding: 9px 0 0; line-height: 1.4;
  border-bottom: 1px solid var(--line-2); padding-bottom: 10px;
}
.figure figcaption b { color: var(--ink-2); font-weight: 700; }

.article__body { font-size: 18px; line-height: 1.72; max-width: 68ch; }

/* L'''espace entre deux paragraphes doit se voir. Faute de règle, le navigateur
   appliquait sa marge par défaut d'''une cadratine : dix-sept pixels pour un
   interligne de vingt-huit, soit six dixièmes de ligne. Le lecteur ne
   distinguait plus où un paragraphe finissait. On passe à une ligne pleine :
   le texte respire, et le regard retrouve son point de reprise. */
.article__body > p { margin: 0 0 1.62em; }
.article__body > p:last-child { margin-bottom: 0; }
.article__body > p:first-of-type::first-letter {
  float: left; font-family: var(--head); font-weight: 800; font-size: 62px;
  line-height: .82; padding: 4px 10px 0 0; color: var(--red);
}
.article__body h2 { font-size: 25px; margin: 36px 0 14px; letter-spacing: -.018em; }
.article__body ul { padding-left: 0; list-style: none; margin: 24px 0; }
.article__body ul li {
  position: relative; padding-left: 26px; margin-bottom: 11px;
}
.article__body ul li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 8px; height: 8px; background: var(--red); border-radius: 50%;
}
.pullquote {
  margin: 32px 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--red);
}
.pullquote p {
  font-family: var(--head); font-weight: 700; font-size: 23px; line-height: 1.32;
  letter-spacing: -.015em; margin: 0 0 10px;
}
.pullquote cite { font-style: normal; font-size: 14px; color: var(--muted); font-weight: 600; }
.note {
  margin: 30px 0; padding: 16px 18px; background: var(--panel);
  border-left: 3px solid var(--muted); font-size: 14.5px; color: var(--muted);
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0; }
.tags a {
  padding: 7px 14px; background: var(--panel); border-radius: 40px;
  font-size: 13.5px; font-weight: 600; transition: .15s;
}
.tags a:hover { background: var(--red); color: #fff; }

.readalso {
  margin: 30px 0; padding: 18px 20px; border: 1px solid var(--line); border-left: 4px solid var(--red);
}
.readalso b {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red); margin-bottom: 8px;
}
.readalso a { font-family: var(--head); font-weight: 700; font-size: 17.5px; line-height: 1.28; }
.readalso a:hover { text-decoration: underline; }

.article-nav {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 26px 0; border-top: 1px solid var(--line); margin-top: 30px;
}
.article-nav a { font-weight: 700; font-size: 15px; color: var(--red); }
.article-nav a:hover { text-decoration: underline; }

/* 9. PIED DE PAGE =========================================================== */
.footer { background: var(--bar); color: var(--on-bar-dim); margin-top: 20px; }
.footer__top { padding: 48px 0 36px; }
.footer__grid { display: grid; grid-template-columns: 300px repeat(4, 1fr); gap: 36px; }
.footer__brand .brand { margin: 0 0 16px; }
.footer__brand p { font-size: 14.5px; line-height: 1.55; max-width: 34ch; }
.footer h3 {
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; margin-bottom: 14px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 9px; }
.footer li a { font-size: 14.5px; transition: color .15s; }
.footer li a:hover { color: #fff; }

.social { display: flex; gap: 8px; margin-top: 18px; }
.social a {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: grid; place-items: center; transition: .15s; color: #fff;
}
.social a:hover { background: var(--red); }
.social svg { width: 17px; height: 17px; fill: currentColor; }

.langs { padding-block: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.langs__in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.langs b { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.langs a { font-size: 14px; }
.langs a:hover { color: #fff; text-decoration: underline; }

.footer__legal {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 20px 34px;
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 13px;
}
.footer__legal a:hover { color: #fff; }
.footer__legal .demo {
  width: 100%; padding: 12px 14px; background: rgba(255,255,255,.05);
  border-left: 3px solid var(--red); color: #cfd1d8; line-height: 1.5;
}

/* 10. OVERLAYS ============================================================== */
.overlay {
  /* Au-dessus de la barre d'administration de WordPress, fixée à 99999 :
     sans cela elle recouvrait la barre du menu et son bouton de fermeture, et
     la rédaction connectée se retrouvait dans un menu dont on ne sortait plus.
     Un menu plein écran est une fenêtre modale : il a le droit de tout
     couvrir le temps qu'il est ouvert. */
  position: fixed; inset: 0; z-index: 100000; background: var(--bg);
  display: none; overflow-y: auto;
}
.overlay.is-open { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(-8px); } }
.overlay__bar {
  position: sticky; top: 0; background: var(--bar); color: #fff; z-index: 2;
}
.overlay__bar .topbar__in { justify-content: space-between; }
/* Le raccourci « padding: 40px 0 70px » remettait la marge horizontale à
   zéro et effaçait celle du wrap : sur téléphone, le menu et la recherche
   collaient au bord de l'''écran. On ne touche donc qu'''au haut et au bas. */
.overlay__body { padding-top: 40px; padding-bottom: 70px; }
.mega { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.mega h3 {
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--line);
}
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li { margin-bottom: 11px; }
.mega li a { font-family: var(--head); font-weight: 700; font-size: 17px; }
.mega li a:hover { color: var(--red); }

.searchpanel { max-width: 760px; margin: 0 auto; }
.searchpanel h2 { font-size: 30px; margin-bottom: 18px; }
.qres { margin-top: 26px; display: grid; gap: 2px; }
.qres a {
  display: block; padding: 14px 16px; border-radius: 2px; transition: background .12s;
}
.qres a:hover { background: var(--panel); }
.qres span { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.qres b { font-family: var(--head); font-weight: 700; font-size: 17px; line-height: 1.3; display: block; }

/* 11. LECTEUR =============================================================== */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--bar); color: #fff; border-top: 3px solid var(--red);
  transform: translateY(110%); transition: transform .28s cubic-bezier(.2,.8,.3,1);
  box-shadow: var(--shadow-lg);
}
.player.is-on { transform: none; }
.player__in { display: flex; align-items: center; gap: 16px; height: 74px; }
.player__play {
  width: 46px; height: 46px; border-radius: 50%; background: var(--red);
  display: grid; place-items: center; flex: none; transition: transform .12s;
}
.player__play:hover { transform: scale(1.07); }
.player__play::before {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.player.is-playing .player__play::before {
  border: 0; width: 14px; height: 14px; margin: 0; background: #fff; border-radius: 2px;
}
.player__meta { min-width: 0; flex: 1; }
.player__label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red);
}
.player__title {
  font-family: var(--head); font-weight: 700; font-size: 16px; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player__wave { display: flex; align-items: flex-end; gap: 3px; height: 26px; flex: none; }
.player__wave i {
  width: 3px; background: var(--red); border-radius: 2px; height: 30%;
  animation: eq .9s ease-in-out infinite alternate; animation-play-state: paused;
}
.player.is-playing .player__wave i { animation-play-state: running; }
.player__wave i:nth-child(2) { animation-delay: .12s; }
.player__wave i:nth-child(3) { animation-delay: .24s; }
.player__wave i:nth-child(4) { animation-delay: .36s; }
.player__wave i:nth-child(5) { animation-delay: .48s; }
@keyframes eq { to { height: 100%; } }
.player__close {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: var(--on-bar-dim); flex: none;
}
.player__close:hover { background: rgba(255,255,255,.12); color: #fff; }
.player__close svg { width: 15px; height: 15px; fill: currentColor; }
.player__note { font-size: 12px; color: var(--on-bar-dim); flex: none; max-width: 260px; line-height: 1.35; }
body.player-on { padding-bottom: 74px; }

/* 12. RESPONSIVE ============================================================ */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr 300px; gap: 28px; }
  .article__grid { grid-template-columns: minmax(0,1fr) 260px; gap: 34px; }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 940px) {
  .toplinks, .lives { display: none; }
  .hero__grid { grid-template-columns: 1fr; }
  .livepanel__list { max-height: none; }
  .split, .article__grid { grid-template-columns: 1fr; }
  .newsletter__in { grid-template-columns: 1fr; }
  .mega { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .article h1 { font-size: 34px; }
  .card--lead .card__title { font-size: 28px; }
}

@media (max-width: 700px) {
  :root { --gut: 16px; }
  body { font-size: 16px; }
  .topbar__in { height: 54px; gap: 2px; }
  .brand { margin-right: 0; min-width: 0; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__mark span { font-size: 17px; }
  .brand__word { min-width: 0; }
  .brand__word b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand__word em { display: none; }
  /* Sur petit écran, la langue reste accessible depuis le menu déroulant :
     on libère la place nécessaire au bouton Menu. */
  .lang-btn { display: none; }
  .icon-btn { width: 36px; height: 36px; }
  .menu-btn { padding: 9px 8px; }
  .menu-btn span:not(.bars) { display: none; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .hero__sub { grid-template-columns: 1fr; gap: 22px; }
  .mega, .info-grid, .form-grid { grid-template-columns: 1fr; }
  .pagehead h1 { font-size: 30px; }
  .article h1 { font-size: 28px; }
  .article__chapo { font-size: 18px; }
  .article__body { font-size: 17px; }
  .card--lead .card__title { font-size: 25px; }
  .block__head { flex-wrap: wrap; gap: 8px; }
  .block__head .more { margin-left: 0; }
  .nl-form { flex-direction: column; }
  .live-card { grid-template-columns: auto 1fr; gap: 14px; }
  .live-card__meta { grid-column: 1 / -1; }
  .player__note, .player__wave { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .prog__row { grid-template-columns: 60px 1fr; }
}

@media print {
  .topbar, .subnav, .trends, .footer, .player, .overlay, .newsletter, .strip, .byline .share { display: none !important; }
  body { font-size: 12pt; }
  .article__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* 13. RÉDACTION IA ========================================================== */
.ai-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 40px; background: var(--red-soft);
  color: var(--red); border: 1px solid rgba(214,0,28,.25);
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.ai-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.ai-tag:hover { background: var(--red); color: #fff; }

.sources { margin: 34px 0 0; padding: 20px 22px; background: var(--panel); border-radius: 3px; }
.sources h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.sources p { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sources li a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 40px;
  font-size: 14px; font-weight: 600; transition: .15s;
}
.sources li a:hover { border-color: var(--red); color: var(--red); }
.sources li a svg { width: 13px; height: 13px; opacity: .55; }

/* Signature de fin d'article : le nom du reporter, son domaine, son adresse.
   Le lecteur doit pouvoir écrire à qui a écrit. */
.signature {
  margin: 30px 0 0;
  padding: 18px 20px;
  border-top: 2px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.signature__nom {
  font-family: var(--head);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .02em;
  color: var(--ink);
}
.signature__poste { font-size: 14px; color: var(--ink-2); }
.signature__mail {
  font-size: 14.5px;
  color: var(--red);
  font-weight: 600;
  text-decoration: none;
  word-break: break-all;
}
.signature__mail:hover { text-decoration: underline; }

.ai-note {
  margin: 18px 0 0; padding: 16px 20px;
  border-left: 3px solid var(--red); background: var(--red-soft);
}
.ai-note b {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red); margin-bottom: 6px;
}
.ai-note p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.ai-note a { color: var(--red); font-weight: 600; text-decoration: underline; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.step__n {
  width: 44px; height: 44px; border-radius: 50%; background: var(--gradient); color: #fff;
  display: grid; place-items: center; font-family: var(--head); font-weight: 800; font-size: 19px;
}
.step h3 { font-size: 17px; margin-bottom: 6px; }
.step p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.55; }

.reporter { padding: 20px; border: 1px solid var(--line); border-top: 3px solid var(--red); }
.reporter__head { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.reporter__avatar {
  width: 46px; height: 46px; border-radius: 50%; background: var(--green); color: #fff;
  display: grid; place-items: center; flex: none;
  font-family: var(--head); font-weight: 800; font-size: 16px; letter-spacing: .02em;
}
.reporter h3 { font-size: 17px; }
.reporter__bureau { font-size: 12.5px; color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.reporter__beat { font-size: 14.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.reporter__meta { margin: 0 0 6px; font-size: 13px; }
.reporter__meta a { color: var(--ink-2); font-weight: 600; }
.reporter__meta a:hover { color: var(--red); }
.reporter__count { margin: 0; font-size: 12.5px; color: var(--muted); }

.sourcelist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sourcelist span {
  padding: 6px 13px; background: var(--panel); border-radius: 40px;
  font-size: 13.5px; color: var(--ink-2);
}

/* 14. ANTENNE EN CONTINU ==================================================== */
.live-card--main { grid-template-columns: auto 1fr; }
.live-card__flag {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--red);
}
.headlines { list-style: none; margin: 18px 0 0; padding: 0; }
.headlines li {
  position: relative; padding: 11px 0 11px 26px; border-bottom: 1px solid var(--line-2);
  font-size: 15.5px; color: var(--ink-2);
}
.headlines li::before {
  content: ""; position: absolute; left: 4px; top: 1.15em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
}

.playlist { border-top: 1px solid var(--line); }
.track {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center;
  width: 100%; text-align: left; padding: 13px 10px; border-bottom: 1px solid var(--line-2);
  transition: background .12s;
}
.track:hover { background: var(--panel); }
.track__num { font-family: var(--head); font-weight: 800; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.track__show { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.track__title { display: block; font-family: var(--head); font-weight: 700; font-size: 16px; line-height: 1.3; margin-top: 3px; }
.track__time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.track.is-current { background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold-2); }
.track.is-current .track__num { color: var(--gold-2); }
.track.is-current .track__num::after { content: " ▶"; }

.edition-stamp {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  font-size: 12px; color: var(--muted); white-space: nowrap; flex: none;
}
.edition-stamp b { color: var(--ink-2); font-weight: 700; }

@media (max-width: 940px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .steps { grid-template-columns: 1fr; }
  .track { grid-template-columns: 30px 1fr; }
  .track__time { display: none; }
  .edition-stamp { display: none; }
}

/* 15. RÉGIE PUBLICITAIRE ==================================================== */
.ad { display: block; margin: 26px 0; text-align: center; }
.ad__label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.ad__slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px dashed var(--line); border-radius: 3px; background: var(--panel);
  color: var(--muted);
}
.ad__slot b { font-family: var(--head); font-weight: 700; font-size: 14px; color: var(--ink-2); }
.ad__slot span { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.ad--leaderboard .ad__slot { min-height: 96px; }
.ad--footer .ad__slot { min-height: 96px; }
.ad--inarticle { margin: 30px 0; }
.ad--inarticle .ad__slot { min-height: 260px; }
.ad--sidebar { margin: 0 0 34px; }
.ad--sidebar .ad__slot { min-height: 250px; }
.ad ins { display: block; }

/* 16. TEMPS RÉEL ============================================================ */
.live-btn--claim {
  background: transparent; color: var(--on-bar-dim); cursor: pointer;
  font-size: 11.5px; letter-spacing: .04em; text-transform: none; font-weight: 600;
  padding-left: 12px; max-width: 340px; overflow: hidden; text-overflow: ellipsis;
}
.live-btn--claim:hover { background: rgba(255,255,255,.1); color: #fff; }

.live-flag {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 7px 14px; border-radius: 40px; background: var(--red-soft);
  color: var(--red); font-size: 13px; font-weight: 600;
}
.live-flag b { font-variant-numeric: tabular-nums; }

.continu { border-top: 2px solid var(--ink); }
.flash--lg { grid-template-columns: 62px 1fr; padding: 18px 0; }
.flash--lg time { font-size: 14px; }
.flash--lg p { font-size: 17px; font-weight: 600; }
.flash.is-new { animation: flashIn .7s ease; }
@keyframes flashIn {
  0%   { background: var(--red-soft); transform: translateY(-6px); opacity: 0; }
  100% { background: transparent; transform: none; opacity: 1; }
}

.demo-banner {
  margin: 0 0 18px; padding: 12px 16px; border-radius: 3px;
  background: var(--panel); border-left: 3px solid var(--muted);
  font-size: 13.5px; color: var(--muted); line-height: 1.5;
}
.demo-banner b { color: var(--ink-2); }

.lang-on { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lang-soon { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; opacity: .55; }
.lang-soon em {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 6px; border: 1px solid currentColor; border-radius: 3px;
}

/* 17. SÉLECTEUR DE LANGUES ================================================== */
.langpick { position: relative; }
.langpick .lang-btn { display: inline-flex; align-items: center; gap: 6px; }
.langpick.is-open .lang-btn { background: rgba(255,255,255,.16); }
.langpick.is-open .lang-btn svg { transform: rotate(180deg); }
.langpick .lang-btn svg { transition: transform .18s; }

.langpick__menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 130;
  min-width: 232px; padding: 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: var(--shadow-lg);
  display: none;
}
.langpick.is-open .langpick__menu { display: block; animation: langIn .16s ease; }
@keyframes langIn { from { opacity: 0; transform: translateY(-6px); } }
.langpick__menu::before {
  content: ""; position: absolute; top: -6px; inset-inline-end: 18px;
  width: 10px; height: 10px; background: var(--bg);
  border-inline-start: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.langpick__head {
  display: block; padding: 6px 12px 10px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line-2); margin-bottom: 6px;
}
.langpick__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 3px; color: var(--ink); transition: background .12s;
}
.langpick__menu a:hover { background: var(--panel); }
.langpick__menu a b { font-weight: 600; font-size: 15px; }
.langpick__menu a em {
  font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--muted); padding: 3px 7px; border: 1px solid var(--line); border-radius: 3px;
}
.langpick__menu a.is-on { background: var(--red-soft); }
.langpick__menu a.is-on b { color: var(--red); font-weight: 800; }
.langpick__menu a.is-on em { color: var(--red); border-color: rgba(214,0,28,.3); }
.langpick__menu a.is-partial b { opacity: .62; }

.translated { font-style: italic; }

/* 18. ÉCRITURE DROITE-À-GAUCHE (arabe) ====================================== */
[dir="rtl"] { --head: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif; --sans: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; line-height: 1.35; }
[dir="rtl"] .card__title, [dir="rtl"] .article h1, [dir="rtl"] .pagehead h1 { letter-spacing: 0; }

[dir="rtl"] .topbar__end { margin-left: 0; margin-right: auto; }
[dir="rtl"] .brand { margin-right: 0; margin-left: 18px; }
[dir="rtl"] .lives { border-left: 0; border-right: 1px solid rgba(255,255,255,.18); padding-left: 0; padding-right: 18px; margin-left: 0; margin-right: 14px; }
[dir="rtl"] .block__head .more { margin-left: 0; margin-right: auto; }
[dir="rtl"] .byline .share { margin-left: 0; margin-right: auto; }
[dir="rtl"] .edition-stamp { margin-left: 0; margin-right: auto; }

[dir="rtl"] .thumb__badge { left: auto; right: 0; }
[dir="rtl"] .pullquote { border-left: 0; border-right: 4px solid var(--red); padding: 4px 24px 4px 0; }
[dir="rtl"] .readalso { border-left: 1px solid var(--line); border-right: 4px solid var(--red); }
[dir="rtl"] .ai-note { border-left: 0; border-right: 3px solid var(--red); }
[dir="rtl"] .note { border-left: 0; border-right: 3px solid var(--muted); }
[dir="rtl"] .demo-banner { border-left: 0; border-right: 3px solid var(--muted); }
[dir="rtl"] .live-card { border-left: 0; border-right: 4px solid var(--red); }
[dir="rtl"] .footer__legal .demo { border-left: 0; border-right: 3px solid var(--red); }

[dir="rtl"] .article__body ul li { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .article__body ul li::before { left: auto; right: 4px; }
[dir="rtl"] .headlines li { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .headlines li::before { left: auto; right: 4px; }
[dir="rtl"] .prose ul { padding-left: 0; padding-right: 20px; }

/* La lettrine et les triangles de lecture se retournent avec le texte. */
[dir="rtl"] .article__body > p:first-of-type::first-letter { float: right; padding: 4px 0 0 10px; }
[dir="rtl"] .player__play::before,
[dir="rtl"] .live-card__play::before,
[dir="rtl"] .live-btn i::before { transform: scaleX(-1); }
[dir="rtl"] .subnav__more svg, [dir="rtl"] .block__head h2 svg,
[dir="rtl"] .livepanel__foot svg { transform: scaleX(-1); }

[dir="rtl"] .flash time, [dir="rtl"] .track__num, [dir="rtl"] .track__time,
[dir="rtl"] .prog__row time { direction: ltr; }

/* 19. COULEUR SECONDAIRE ==================================================== */
/* Le dégradé jaune-orange marque ce qui relève du repère et du parcours :
   classements, étapes, éléments actifs. Le rouge reste le signal éditorial,
   le vert foncé la structure. */
.btn--gold { background: var(--gradient); color: var(--green-dark); }
.btn--gold:hover { background: var(--gold-2); color: #fff; }

.block__head h2 svg { fill: var(--red); }
.pagehead h1 span { color: var(--red); }

/* Filet secondaire sous la barre de rubriques active */
.subnav__scroll a.is-active::after { background: var(--gradient); }

/* Étiquette de rubrique sur les vignettes */
.thumb__badge { background: rgba(1,42,39,.86); }

/* Encadré latéral : le trait supérieur reprend la structure verte */
.aside-box { border-top-color: var(--green); }

/* Bandeau de tendances : la puce active passe au dégradé */
.trends a:hover { border-color: var(--gold-2); color: var(--gold-2); background: var(--gold-soft); }

/* Boutons de filtre de la recherche */
.filters button:hover { border-color: var(--gold-2); color: var(--gold-2); }
.filters button.is-on { background: var(--green); border-color: var(--green); color: #fff; }

/* Le lecteur garde le rouge pour la lecture, le vert pour le fond */
.player { border-top-color: var(--red); }
.player__wave i { background: var(--gold-2); }

/* Fiches reporters : filet supérieur vert, pas rouge */
.reporter { border-top-color: var(--green); }

/* Emplacements publicitaires : neutres, jamais colorés */
.ad__slot { background: var(--panel); }

/* 20. COULEURS DE RUBRIQUE ================================================== */
/* Chaque rubrique porte sa couleur d'accent. Elles restent de la même famille
   que les couleurs de marque : profondes, sourdes, jamais criardes, et toutes
   lisibles en petites capitales sur fond clair comme sur fond sombre.
   La structure du site (barre, pied, newsletter) reste aux trois couleurs
   principales : l'accent ne sert qu'à situer une rubrique. */
:root {
  --sec-afrique:        #d6001c;
  --sec-monde:          #0b5c56;
  --sec-economie:       #b45309;
  --sec-politique:      #9d1239;
  --sec-sport:          #0f766e;
  --sec-culture:        #8b3a62;
  --sec-environnement:  #3f6212;
  --sec-sciences-sante: #1e5f8e;
  --sec-societe:        #7c3a1d;
  --sec-education:      #3b5bab;
  --sec-justice:        #5b4380;
  --sec-publireportage: #6b6357;
}
[data-theme="dark"] {
  --sec-afrique:        #ff6b7a;
  --sec-monde:          #4bbdb0;
  --sec-economie:       #e8a94f;
  --sec-politique:      #e8859f;
  --sec-sport:          #43c3b4;
  --sec-culture:        #d98cb4;
  --sec-environnement:  #9ec858;
  --sec-sciences-sante: #79b8e8;
  --sec-societe:        #e0956a;
  --sec-education:      #8fa9e8;
  --sec-justice:        #b39ce0;
  --sec-publireportage: #b6ab99;
}

[data-sec="afrique"]        { --accent: var(--sec-afrique); }
[data-sec="monde"]          { --accent: var(--sec-monde); }
[data-sec="economie"]       { --accent: var(--sec-economie); }
[data-sec="politique"]      { --accent: var(--sec-politique); }
[data-sec="sport"]          { --accent: var(--sec-sport); }
[data-sec="culture"]        { --accent: var(--sec-culture); }
[data-sec="environnement"]  { --accent: var(--sec-environnement); }
[data-sec="sciences-sante"] { --accent: var(--sec-sciences-sante); }
[data-sec="societe"]         { --accent: var(--sec-societe); }
[data-sec="education"]       { --accent: var(--sec-education); }
[data-sec="justice"]         { --accent: var(--sec-justice); }
[data-sec="publireportage"] { --accent: var(--sec-publireportage); }

/* Surtitres et repères prennent l'accent de leur rubrique ; à défaut, le rouge. */
.card__kicker,
.article__kicker,
.flash__tag b,
.reporter__bureau { color: var(--accent, var(--red)); }

.block__head h2 svg { fill: var(--accent, var(--red)); }
.pagehead h1 span   { color: var(--accent, var(--red)); }

/* Filet de rubrique au-dessus des blocs de la une */
.block--sec > .block__head { position: relative; padding-top: 16px; }
.block--sec > .block__head::before {
  content: ""; position: absolute; top: 0; inset-inline-start: 0;
  width: 54px; height: 4px; background: var(--accent, var(--red));
}

/* Barre de navigation : la rubrique active se souligne de sa couleur */
.subnav__scroll a.is-active { color: var(--accent, var(--red)); }
.subnav__scroll a.is-active::after,
.subnav__scroll a:hover::after { background: var(--accent, var(--red)); }

/* En-tête de page de rubrique */
.pagehead--sec { border-top: 4px solid var(--accent, var(--red)); padding-top: 26px; }

/* Article : le surtitre et le filet de la colonne latérale suivent la rubrique */
.article__kicker::before {
  content: ""; display: inline-block; width: 22px; height: 3px;
  background: var(--accent, var(--red)); vertical-align: middle;
  margin-inline-end: 9px; transform: translateY(-2px);
}

/* Pastille de rubrique dans les listes de résultats et le fil */
.qres span, .flash__tag { color: var(--muted); }
.qres a { border-inline-start: 3px solid transparent; }
.qres a:hover { border-inline-start-color: var(--accent, var(--red)); }

/* 21. NAVIGATION PAR PAYS =================================================== */
.paysnav {
  display: grid; gap: 20px; margin: 26px 0 6px;
  padding: 22px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.paysnav__groupe { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: start; }
.paysnav__titre {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding-top: 9px;
}
.paysnav__liste { display: flex; flex-wrap: wrap; gap: 8px; }
.paysnav__item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 40px;
  transition: border-color .15s, background .15s, color .15s;
}
.paysnav__item b { font-weight: 600; font-size: 14.5px; }
.paysnav__item em {
  font-style: normal; font-size: 11px; font-weight: 800;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 20px;
  display: inline-grid; place-items: center;
  background: var(--sec-afrique); color: #fff;
}
.paysnav__item:hover { border-color: var(--sec-afrique); color: var(--sec-afrique); }
.paysnav__item.is-on {
  background: var(--sec-afrique); border-color: var(--sec-afrique); color: #fff;
}
.paysnav__item.is-on em { background: rgba(255,255,255,.24); }
/* Un pays sans article reste visible : la couverture est annoncée, même quand
   la rédaction n'a encore rien publié dessus. */
.paysnav__item.is-empty { opacity: .5; }
.paysnav__item.is-empty:hover { opacity: 1; }

.paysmeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 14px 0 0; font-size: 14.5px; color: var(--muted);
}
.paysmeta b {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); margin-inline-end: 5px;
}
.paysmeta a { color: var(--sec-afrique); font-weight: 600; }
.paysmeta a:hover { text-decoration: underline; }
.paysmeta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line); }

.card__pays { font-weight: 600; color: var(--ink-2); }
.byline__pays { font-weight: 700; color: var(--accent, var(--red)); }
.byline__pays:hover { text-decoration: underline; }

.tags--pays { align-items: center; }
.tags--pays b {
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin-inline-end: 4px;
}

@media (max-width: 700px) {
  .paysnav__groupe { grid-template-columns: 1fr; gap: 8px; }
  .paysnav__titre { padding-top: 0; }
  .paysnav { gap: 16px; }
}

/* 22. RADIOS ================================================================ */
.radiobloc { padding-top: 30px; }
.radiobloc .block__head h2 a:hover { color: var(--accent, var(--red)); }

.radio {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px; border: 1px solid var(--line); border-radius: 3px;
  transition: border-color .15s;
}
.radio:hover { border-color: var(--sec-afrique); }
.radio.is-on { border-color: var(--sec-afrique); background: var(--red-soft); }

.radio__head { display: flex; align-items: center; gap: 13px; }
.radio__logo {
  width: 52px; height: 52px; flex: none; border-radius: 3px; overflow: hidden;
  /* Les logos fournis par l'annuaire sont des PNG transparents au dessin
     blanc, prévus pour un fond sombre : sur un aplat clair ils disparaissent
     purement et simplement. */
  background: var(--green-dark); display: grid; place-items: center;
}
.radio__logo img { width: 100%; height: 100%; object-fit: cover; }
.radio__logo b { font-family: var(--head); font-weight: 800; font-size: 17px; color: #fff; }
.radio h3 { font-size: 16px; line-height: 1.25; }
.radio__tech {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.radio__desc { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.45; }

.radio__slot { margin: 0; }
.radio__slot iframe { width: 100%; height: 100px; border: 0; border-radius: 3px; display: block; }

.radio__play {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  padding: 9px 18px 9px 9px; border-radius: 40px;
  background: var(--sec-afrique); color: #fff;
  font-size: 13.5px; font-weight: 700; transition: background .15s;
}
.radio__play:hover { background: var(--red-dark); }
.radio__icon {
  width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.22);
  display: grid; place-items: center; flex: none;
}
.radio__icon::before {
  content: ""; width: 0; height: 0; margin-left: 3px;
  border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.radio.is-on .radio__icon::before {
  border: 0; width: 8px; height: 8px; margin: 0; background: #fff; border-radius: 1px;
}
.radio.is-on .radio__play { background: var(--green); }

.radio__via {
  font-size: 11.5px; color: var(--muted); text-decoration: underline;
  text-underline-offset: 2px;
}
.radio__via:hover { color: var(--sec-afrique); }

[dir="rtl"] .radio__play { padding: 9px 9px 9px 18px; }
[dir="rtl"] .radio__icon::before { transform: scaleX(-1); margin-left: 0; margin-right: 3px; }

/* 23. LISIBILITÉ DE LA BARRE DE RUBRIQUES =================================== */
/* Les formats (continu, radios, écoute) ouvrent la barre : relégués en fin de
   liste, ils tombaient hors écran sur la plupart des largeurs. */
.subnav__format { color: var(--red); }
.subnav__sep {
  flex: none; width: 1px; height: 20px; background: var(--line);
  margin-inline: 8px; align-self: center;
}
/* Dégradé de bord : signale qu'il reste des rubriques à droite. */
.subnav__in { position: relative; }
.subnav__in::after {
  content: ""; position: absolute; inset-inline-end: 34px; top: 0; bottom: 1px;
  width: 44px; pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--bg) 85%);
}
[dir="rtl"] .subnav__in::after { background: linear-gradient(to left, rgba(255,255,255,0), var(--bg) 85%); }
.subnav__more {
  background: var(--bg); box-shadow: -6px 0 10px -6px rgba(0,0,0,.18);
}

/* 24. BANDEAU DÉFILANT ====================================================== */
.ticker {
  display: flex; align-items: stretch;
  background: var(--green); color: #fff; overflow: hidden;
}
.ticker__label {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 0 18px; background: var(--red);
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.ticker__label .pulse { background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
.ticker__view { flex: 1; overflow: hidden; position: relative; }
.ticker__track {
  display: inline-flex; align-items: center; gap: 40px;
  padding: 11px 40px 11px 24px; white-space: nowrap;
  animation: defile 70s linear infinite;
}
.ticker:hover .ticker__track,
.ticker__track:focus-within { animation-play-state: paused; }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .ticker__track { animation-direction: reverse; }

.ticker__track a { display: inline-flex; align-items: baseline; gap: 10px; color: #fff; }
.ticker__track time {
  font-size: 11.5px; font-weight: 800; color: var(--gold-1);
  font-variant-numeric: tabular-nums; flex: none;
}
.ticker__track span { font-size: 14.5px; }
.ticker__track a:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* 25. CARROUSEL DE UNE ====================================================== */
.carousel { position: relative; }
.carousel__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel); }
.slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.slide.is-on { opacity: 1; visibility: visible; }
.slide__media { position: absolute; inset: 0; display: block; }
.slide__media img { width: 100%; height: 100%; object-fit: cover; }
.slide__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(1,42,39,.94) 4%, rgba(1,42,39,.62) 38%, rgba(1,42,39,0) 68%);
}
.slide__text {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: 30px 34px 30px; color: #fff; max-width: 74ch;
}
.slide__kicker {
  display: inline-block; padding: 4px 11px; margin-bottom: 12px;
  background: var(--accent, var(--red)); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.slide__text h2 { font-size: 34px; line-height: 1.14; letter-spacing: -.022em; }
.slide__text h2 a { color: #fff; }
.slide__text h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.slide__text p {
  margin: 12px 0 10px; font-size: 16.5px; line-height: 1.5;
  color: rgba(255,255,255,.9); max-width: 62ch;
}
.slide__meta { font-size: 12.5px; color: rgba(255,255,255,.72); }

/* Les flèches se tenaient à mi-hauteur, à 14 px du bord, là où le titre
   commence : elles en mangeaient la première lettre. Réunies en haut à
   droite, elles ne croisent plus jamais le texte, quelle que soit la
   largeur de l'écran ou la longueur du titre. */
.carousel__arrow {
  position: absolute; top: 14px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(1,42,39,.6); color: #fff; backdrop-filter: blur(4px);
  display: grid; place-items: center; transition: background .15s;
}
.carousel__arrow:hover { background: var(--red); }
.carousel__arrow svg { width: 14px; height: 14px; }
.carousel__arrow--prev { inset-inline-end: 62px; }
.carousel__arrow--prev svg { transform: rotate(180deg); }
.carousel__arrow--next { inset-inline-end: 14px; }
[dir="rtl"] .carousel__arrow--prev svg { transform: none; }
[dir="rtl"] .carousel__arrow--next svg { transform: rotate(180deg); }

.carousel__dots {
  display: flex; gap: 7px; justify-content: center;
  padding: 14px 0 0;
}
.carousel__dots button {
  /* La barre visible reste fine, mais un doigt ne vise pas quatre pixels.
     Le bouton fait vingt-quatre pixels de haut ; « background-clip:
     content-box » cantonne la couleur à la barre, si bien que la cible
     tactile grandit sans que rien ne change à l'écran. */
  width: 30px; height: 4px; border-radius: 3px; background-color: var(--line);
  padding: 10px 0; background-clip: content-box; box-sizing: content-box;
  transition: background .15s;
}
.carousel__dots button:hover { background-color: var(--muted); }
.carousel__dots button.is-on { background-color: var(--red); }

/* 26. ENTRÉES PAR ZONE ====================================================== */
.zones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.zone {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px; border: 1px solid var(--line);
  border-top: 4px solid var(--accent, var(--red));
  transition: background .15s, transform .12s;
}
.zone:hover { background: var(--panel); transform: translateY(-2px); }
.zone b { font-family: var(--head); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.zone em { font-style: normal; font-size: 13.5px; color: var(--muted); }

@media (max-width: 940px) {
  .zones { grid-template-columns: 1fr 1fr; }
  .slide__text h2 { font-size: 26px; }
  .slide__text { padding: 22px 24px; }
  .slide__text p { display: none; }
}
@media (max-width: 700px) {
  .ticker__label { padding: 0 12px; font-size: 10.5px; }
  .ticker__track { gap: 26px; }
  .carousel__frame { aspect-ratio: 4 / 3; }
  .slide__text h2 { font-size: 21px; }
  .carousel__arrow { width: 36px; height: 36px; }
  .carousel__arrow--prev { inset-inline-end: 56px; }
  .zones { grid-template-columns: 1fr 1fr; gap: 10px; }
  .zone { padding: 14px; }
  .zone b { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .slide { transition: none; }
}

/* Bandeau direct : heure de Conakry et météo, au dessus de tout le reste.
   Fin, sombre, il se distingue de la barre de navigation sans la concurrencer. */
.direct {
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  border-bottom: 2px solid var(--red);
  transition: background .4s ease;
}
.direct--annonce { background: var(--red); }
.direct__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  padding-block: 5px;
}
.direct__heure { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.direct__heure b {
  font-family: var(--head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.direct__ville { opacity: .72; font-size: 12px; }
.direct__pastille {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(220, 38, 38, .7);
  animation: direct-battement 2s infinite;
}
.direct--annonce .direct__pastille { background: #fff; box-shadow: none; animation: none; }
@keyframes direct-battement {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, .7); }
  70%  { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.direct__meteo {
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap; overflow: hidden;
}
.direct__icone { font-size: 15px; line-height: 1; }
.direct__meteo b { font-weight: 700; }
.direct__deg { font-variant-numeric: tabular-nums; font-weight: 700; }
.direct__ciel { opacity: .72; }

@media (max-width: 640px) {
  .direct__ciel, .direct__ville { display: none; }
  .direct__in { gap: 10px; }
}
[dir="rtl"] .direct__in { flex-direction: row-reverse; }

@media (prefers-reduced-motion: reduce) {
  .direct__pastille { animation: none; }
  .direct { transition: none; }
}

/* Bouton d'écoute de l'heure. Éteint par défaut : aucun son ne part sans
   que l'auditeur l'ait demandé. */
.direct__son {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 12px; line-height: 1; cursor: pointer;
  transition: background .15s;
}
.direct__son:hover { background: rgba(255,255,255,.26); }
.direct__son.is-on { background: var(--red); }
.direct__son .direct__son-on { display: none; }
.direct__son.is-on .direct__son-on { display: block; }
.direct__son.is-on .direct__son-off { display: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Brève reprise d'une autre rédaction : la flèche prévient le lecteur qu'il
   quitte le site avant qu'il ne clique. */
.flash--externe > div > p::after {
  content: "↗";
  display: inline-block;
  margin-inline-start: 6px;
  font-size: .82em;
  opacity: .55;
  vertical-align: baseline;
}
.flash--externe:hover > div > p::after { opacity: 1; color: var(--red); }
[dir="rtl"] .flash--externe > div > p::after { content: "↖"; }

/* Brève sans destination connue : elle reste lisible, mais ne feint pas
   d'être cliquable. */
.ticker__muet { display: inline-flex; align-items: center; gap: 10px; cursor: default; }

/* Mention de méthode en fin d'article. Discrète : le lecteur doit pouvoir la
   trouver, elle n'a pas à occuper le devant de la scène. */
.article__methode {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.article__methode a { color: var(--muted); text-decoration: underline; }
.article__methode a:hover { color: var(--red); }

/* Page « À l'écoute » : une pastille de lecture, un titre, rien de plus. */
.ecoute { display: grid; gap: 2px; }
.piste {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--line-2);
}
.piste h3 { font-size: 17px; line-height: 1.25; margin: 0 0 3px; }
.play--sm {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: var(--accent, var(--red)); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}

/* Radios : le lecteur officiel de chaque station, dans une grille. */
.radios { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.radio { border: 1px solid var(--line); padding: 16px; }
.radio h3 { font-size: 17px; margin: 0 0 2px; }
.radio__pays { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.radio iframe { display: block; width: 100%; border: 0; }

.page__body { max-width: 72ch; }

/* Emplacements publicitaires. Discrets, centrés, avec la mention que la loi
   exige. Vides, ils ne s'affichent pas du tout : un cadre gris sur un journal
   sans annonceur fait pauvre. */
.pub {
  display: block;
  margin: 22px 0;
  text-align: center;
}
.pub__label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pub__widget img,
.pub__widget iframe { max-width: 100%; height: auto; display: inline-block; }
.pub--sidebar { margin-top: 26px; }
.pub--inarticle { margin: 30px 0; }
.pub--leaderboard { margin: 18px 0 4px; }
.pub--footer { margin: 30px 0 10px; }

/* ---------------------------------------------------------------- Formulaire
   Un journal se juge aussi à la facilité qu'on a de lui écrire. */
.form { max-width: 60ch; }
.form__paire { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__champ { margin: 0 0 16px; }
.form__champ label {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.form__champ input,
.form__champ select,
.form__champ textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--line); background: var(--bg);
  /* Seize pixels au moins : en dessous, Safari sur iPhone agrandit la page
     dès qu'on touche un champ, et la mise en page saute sous le doigt. */
  font: inherit; font-size: 16px; color: var(--ink); border-radius: 3px;
}
.form__champ input:focus,
.form__champ select:focus,
.form__champ textarea:focus {
  outline: 2px solid var(--red); outline-offset: 1px; border-color: transparent;
}
.form__champ textarea { resize: vertical; min-height: 130px; }
/* Le piège à robots : invisible à l'œil, atteignable par un automate. */
.form__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__envoi { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form__note { font-size: 13.5px; color: var(--muted); }
.form__note a { color: var(--red); font-weight: 600; }

.note--ok { border-left: 3px solid var(--green); background: rgba(1,42,39,.06); padding: 13px 16px; }
.note--ko { border-left: 3px solid var(--red); background: var(--red-soft); padding: 13px 16px; }

.contact { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
.contact__mail { margin: 0 0 8px; font-size: 16px; font-weight: 700; word-break: break-all; }
.contact__mail a { color: var(--red); }
.contact__note { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.footer__mail { margin: 12px 0 0; }
.footer__mail a { color: #fff; font-weight: 600; word-break: break-all; }

/* ---------------------------------------------------------------- Newsletter
   Le fond en dégradé et le texte vert foncé viennent de la feuille d'origine :
   on ne les touche pas. Seuls les éléments propres au formulaire s'ajoutent. */
.newsletter__mot h2 { margin: 0; }
.newsletter__form { display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter__form input {
  flex: 1; min-width: 0; padding: 13px 15px; border: 0; border-radius: 3px;
  font: inherit; font-size: 16px; color: var(--ink); background: #fff;
}
.newsletter__form .btn { white-space: nowrap; }

/* Le message d'issue partage le fond clair du bandeau : il lui faut donc une
   couleur sombre, comme le reste du texte. Le vert et le rouge du journal
   disent l'issue sans avoir à la lire. */
.newsletter__etat {
  grid-column: 1 / -1; margin: 4px 0 0;
  font-size: 15px; font-weight: 700; color: var(--green-dark);
}
.newsletter__etat--ok { color: var(--green-dark); }
.newsletter__etat--ok::before { content: "✓ "; color: var(--green); font-weight: 800; }
.newsletter__etat--ko { color: var(--red-dark, var(--red)); }
.newsletter__etat--ko::before { content: "✕ "; font-weight: 800; }

/* ---------------------------------------------------------------------- Mag */
.mag { display: grid; grid-template-columns: 380px 1fr; gap: 48px; align-items: center; padding: 12px 0 30px; }
.mag__couv img { width: 100%; height: auto; display: block; box-shadow: 0 22px 50px rgba(0,0,0,.22); }
.mag__flag {
  display: inline-block; margin-bottom: 12px; padding: 5px 12px;
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.mag__mot h2 { font-size: 30px; line-height: 1.14; margin: 0 0 14px; }
.mag__mot p { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0 0 14px; }
.mag__mail { font-size: 14.5px; color: var(--muted); }
.mag__mail a { color: var(--red); font-weight: 600; }

/* Couverture dessinée, tant qu'aucun visuel n'est téléversé. */
.magcouv {
  aspect-ratio: 3 / 4; background: #fff; display: flex; flex-direction: column;
  box-shadow: 0 22px 50px rgba(0,0,0,.22); border: 1px solid var(--line-2);
}
.magcouv__bandeau {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: var(--green); border-top: 5px solid var(--red); border-bottom: 4px solid var(--red);
}
.magcouv__mark {
  width: 34px; height: 34px; flex: none; background: var(--red); color: #fff;
  display: grid; place-items: center;
  font-family: var(--head); font-weight: 800; font-size: 16px;
}
.magcouv__nom { display: flex; flex-direction: column; line-height: 1.1; color: #fff; }
.magcouv__nom b { font-family: var(--head); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.magcouv__nom em { font-style: normal; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .74; }
.magcouv__corps {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 18px; text-align: center;
}
.magcouv__mag {
  color: var(--red); font-family: var(--head); font-weight: 800;
  font-size: 20px; letter-spacing: .18em; text-transform: uppercase;
}
.magcouv__t1, .magcouv__t2 {
  font-family: var(--head); font-weight: 800; line-height: .88;
  font-size: clamp(34px, 9cqw, 62px); letter-spacing: -.02em; text-transform: uppercase;
}
.magcouv__t1 { color: var(--green); }
.magcouv__t2 { color: var(--red); }
.magcouv__filet { width: 62%; height: 2px; background: var(--red); margin: 14px 0 10px; }
.magcouv__bientot {
  font-family: var(--head); font-weight: 800; color: var(--green);
  font-size: 22px; letter-spacing: .06em; text-transform: uppercase;
}

@media (max-width: 900px) {
  .contact, .mag { grid-template-columns: 1fr; gap: 28px; }
  .newsletter__in { grid-template-columns: 1fr; gap: 18px; }
  .form__paire { grid-template-columns: 1fr; gap: 0; }
  .mag__couv { max-width: 320px; }
}

/* Menu déroulant : le lecteur doit toujours pouvoir rentrer chez lui. */
.overlay__nav { padding-bottom: 40px; }
.overlay__titre {
  display: block; margin: 26px 0 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.overlay__titre:first-child { margin-top: 4px; }
.overlay__menu { list-style: none; margin: 0; padding: 0; }
.overlay__menu li { border-bottom: 1px solid var(--line-2); }
.overlay__menu a {
  display: block; padding: 12px 0;
  font-family: var(--head); font-weight: 700; font-size: 20px;
  color: var(--ink);
}
.overlay__menu a:hover { color: var(--accent, var(--red)); }
.overlay__menu--pays, .overlay__menu--pages { display: flex; flex-wrap: wrap; gap: 0 22px; }
.overlay__menu--pays li, .overlay__menu--pages li { border: 0; }
.overlay__menu--pays a, .overlay__menu--pages a { font-size: 16px; padding: 7px 0; }
.overlay__mail { margin-top: 26px; font-size: 15px; }
.overlay__mail a { color: var(--red); font-weight: 600; word-break: break-all; }

/* Le logo officiel remplace les lettres dessinées. Il porte déjà son carré
   rouge : la pastille qui l'entourait ferait double emploi. */
.brand__mark { background: none; border-radius: 0; }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.subnav__mark a { display: block; line-height: 0; }
.subnav__mark img { width: 30px; height: 30px; object-fit: contain; display: block; }
.magcouv__mark { background: none; width: 38px; height: 38px; }
.magcouv__mark img { width: 100%; height: 100%; object-fit: contain; }

/* Le compte d'articles, dans les pastilles de pays. */
.paysnav__item span {
  font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--panel); padding: 1px 7px; border-radius: 20px;
}
.paysnav__item:hover { border-color: var(--red); color: var(--red); }
.paysnav__item:hover span { color: var(--red); }

/* La case de consentement de la lettre. Elle occupe toute la largeur sous le
   champ et le bouton : un consentement doit se lire, pas se deviner. */
.newsletter__accord {
  flex: 1 1 100%;
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  margin-top: .7rem;
  font-size: .82rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
.newsletter__accord input {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .12rem;
  accent-color: var(--green-dark, #14532d);
}
.newsletter__accord a { text-decoration: underline; }

/* La fiche : la fiche d'un journaliste ou d'un service, en tête de sa
   page et au bas de ses articles. La photo n'apparaît que si elle existe. */
.fiche { display: flex; gap: 1rem; align-items: flex-start; text-align: left; }
.fiche__photo {
  flex: 0 0 auto; width: 76px; height: 76px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold-1, #c8a24a);
}
.fiche__mot { min-width: 0; }
.fiche__nom { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.fiche__nom a { color: inherit; text-decoration: none; }
.fiche__nom a:hover { text-decoration: underline; }
.fiche__metier { margin: .2rem 0 0; font-size: .86rem; opacity: .78; }
.fiche__bio { margin: .5rem 0 0; font-size: .93rem; line-height: 1.55; }
.fiche__liens { margin: .5rem 0 0; font-size: .84rem; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.fiche__liens a { text-decoration: underline; }
.pagehead--reporter .fiche { justify-content: center; text-align: left; }
@media (max-width: 560px) {
  .fiche { flex-direction: column; align-items: center; text-align: center; }
  .fiche__liens { justify-content: center; }
}
.signature__bio { margin: .6rem 0 0; font-size: .9rem; line-height: 1.55; max-width: 60ch; }
.signature__profils { margin: .4rem 0 0; font-size: .84rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.signature__profils a, .signature__page { text-decoration: underline; font-size: .84rem; }
.signature__page { display: inline-block; margin-top: .45rem; }

/* Le bandeau d'un contenu sponsorisé. Il doit se voir avant le titre : une
   mention qu'on découvre après avoir lu ne vaut pas transparence. */
.bandeau-sponso {
  margin: 0 0 1.1rem;
  padding: .7rem 1rem;
  border-left: 4px solid var(--gold-1, #c8a24a);
  background: color-mix(in srgb, var(--gold-1, #c8a24a) 12%, transparent);
  font-size: .88rem;
  line-height: 1.5;
  border-radius: 0 6px 6px 0;
}

/* ---------------------------------------------------------------- recherche
   Le panneau s'ouvrait sur un champ nu de 147 pixels au milieu d'une page
   blanche : cela ressemblait à une panne. Il montre maintenant un champ à sa
   taille, des résultats à mesure de la frappe, et des pistes tant que rien
   n'est tapé. */
.q { margin: 0; }
.q__champ {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--line, #d8d8d8);
  border-radius: 10px;
  padding: 0 14px;
  background: var(--bg, #fff);
  transition: border-color .15s ease;
}
.q__champ:focus-within { border-color: var(--gold-1, #c8a24a); }
.q__loupe { width: 22px; height: 22px; flex: 0 0 auto; fill: var(--ink-2, #667); }
.q__champ input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: clamp(18px, 3.4vw, 26px);
  font-weight: 600; color: var(--ink, #14212b);
  padding: 16px 0;
}
.q__champ input[type="search"]::-webkit-search-cancel-button { display: none; }
.q__vider {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-2, #667); padding: 0 4px;
}
.q__vider:hover { color: var(--red, #c0392b); }
.q__aide { margin: 10px 2px 0; font-size: 13px; color: var(--ink-2, #667); }
.q__compte {
  margin: 26px 2px 12px; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--red, #c0392b);
}

.q__resultats { margin-top: 8px; }
.q__item {
  display: block; padding: 16px 0;
  border-bottom: 1px solid var(--line-2, #ececec);
  color: inherit; text-decoration: none;
}
.q__item:hover .q__item-titre { color: var(--red, #c0392b); }
.q__item-titre {
  display: block; font-family: var(--head, inherit);
  font-size: clamp(17px, 2.4vw, 21px); font-weight: 700; line-height: 1.28;
}
.q__item-chapo {
  display: block; margin-top: 5px; font-size: 15px; line-height: 1.5;
  color: var(--ink-2, #667);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.q__item-meta {
  display: block; margin-top: 7px; font-size: 12.5px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2, #667);
}
.q__rien { margin: 30px 0; font-size: 16px; color: var(--ink-2, #667); }
.q__resultats[aria-busy="true"] { opacity: .5; }

.q__pistes { margin-top: 38px; }
.q__titre {
  margin: 0 0 12px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--red, #c0392b);
  padding-bottom: 8px; border-bottom: 2px solid var(--line, #d8d8d8);
}
.q__pastilles { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.q__pastilles a {
  display: inline-block; padding: 8px 14px;
  border: 1px solid var(--line, #d8d8d8); border-radius: 999px;
  font-size: 14.5px; font-weight: 600; text-decoration: none; color: inherit;
}
.q__pastilles a:hover {
  border-color: var(--gold-1, #c8a24a);
  background: var(--gold-soft, rgba(200, 162, 74, .12));
}

.live-card__vieux {
  margin: .5rem 0 0; font-size: .82rem; line-height: 1.45;
  color: var(--ink-2, #667); font-style: italic;
}

/* S'abonner aux podcasts. L'adresse s'affiche en toutes lettres : les
   applications d'écoute demandent qu'on la colle, pas qu'on clique. */
.abonnement__cartes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.abonnement__carte {
  border: 1px solid var(--line, #d8d8d8); border-radius: 10px; padding: 18px;
  background: var(--bg, #fff);
}
.abonnement__carte h3 { margin: 0 0 6px; font-size: 1.05rem; }
.abonnement__carte p { margin: 0 0 12px; font-size: .9rem; color: var(--ink-2, #667); }
.abonnement__lien {
  display: block; padding: 10px 12px; border-radius: 7px;
  background: var(--green-soft, rgba(2, 63, 59, .07));
  font-size: .8rem; word-break: break-all; user-select: all;
}
.abonnement__mode { margin-top: 14px; font-size: .86rem; color: var(--ink-2, #667); }


/* Le bouton Spotify. Un lien a nous plutot que le cadre de Spotify, qui
   affiche sa propre page d'''erreur dès que l'''émission n'''est pas distribuée dans
   le pays du visiteur. */
.abonnement__spotify {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 22px 14px 18px; margin-bottom: 20px;
  border-radius: 999px; background: #1db954; color: #fff;
  text-decoration: none; transition: background .15s;
}
.abonnement__spotify:hover { background: #1ed760; color: #fff; }
.abonnement__spotify b { display: block; font-size: 1rem; line-height: 1.2; }
.abonnement__spotify small { display: block; font-size: .8rem; opacity: .85; margin-top: 2px; }

/* ------------------------------------------------------ publicité sonore
   Une barre discrète, en bas à gauche, qui laisse la place au lecteur du
   journal quand il paraît. L'arrêt reste visible tout du long : c'est ce
   qu'exigent les règles publicitaires, et c'est ce qui sépare un média
   qu'on revient lire d'un média qu'on fuit. */
.pubson {
  position: fixed; left: 14px; bottom: 14px; z-index: 180;
  display: none; align-items: center; gap: 10px;
  padding: 9px 10px 9px 13px;
  border-radius: 999px;
  background: var(--bar, #023f3b); color: #fff;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  max-width: min(92vw, 26rem);
  font-size: .84rem;
}
.pubson.is-on { display: flex; }
/* Le lecteur du journal occupe le bas de l'écran : la publicité s'efface. */
body.player-on .pubson { display: none; }
.pubson__flag {
  flex: none; font-size: .62rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-1, #efa152);
}
.pubson__nom {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.pubson__nom a { color: #fff; text-decoration: underline; }
.pubson__pause,
.pubson__stop {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: .78rem; line-height: 1; cursor: pointer;
}
.pubson__pause:hover,
.pubson__stop:hover { background: rgba(255, 255, 255, .28); }
.pubson__stop { font-size: .9rem; }
@media (max-width: 480px) {
  .pubson { left: 10px; right: 10px; bottom: 10px; max-width: none; }
}

/* La photo d'ouverture d'un article. Le rapport 16/9 est celui de la taille
   « ri-une » : le déclarer réserve la place avant le chargement, ce qui évite
   au texte de sauter sous les yeux du lecteur. */
.article__media { margin: 0 0 1.6rem; }
.article__media img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 6px; background: var(--line-2, #ececec);
}
.article__media figcaption {
  margin-top: .6rem; font-size: .82rem; line-height: 1.45;
  color: var(--ink-2, #667);
}

/* ------------------------------------------------------ la bande des confrères
   Le journal réécrit ce que d'autres rapportent : les nommer au bas du site,
   avec un lien vers leur accueil, rend une visite en échange de ce qu'on leur
   emprunte. Le ruban est écrit deux fois dans le gabarit : le défilement
   reprend au début sans que le raccord se voie. */
.confreres { border-top: 1px solid var(--line-2); background: var(--bg); padding: 26px 0 30px; overflow: hidden; }
.confreres__tete { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.confreres__titre {
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red);
}
.confreres__sous { font-size: 13px; color: var(--ink-2); }
.confreres__piste { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.confreres__ruban { display: flex; width: max-content; gap: 10px; animation: confreres 90s linear infinite; }
.confreres__piste:hover .confreres__ruban,
.confreres__piste:focus-within .confreres__ruban { animation-play-state: paused; }
.confreres__ruban a {
  flex: none; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  white-space: nowrap; transition: .15s;
}
.confreres__ruban a:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }
@keyframes confreres { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Un défilement qu'on n'a pas demandé peut gêner : on l'arrête pour qui a
   réglé son appareil en ce sens. */
@media (prefers-reduced-motion: reduce) {
  .confreres__ruban { animation: none; flex-wrap: wrap; width: auto; }
  .confreres__piste { -webkit-mask-image: none; mask-image: none; }
}

/* 21. DOCUMENTS JOINTS ======================================================
   Un publireportage vient souvent avec sa plaquette. Le lecteur doit pouvoir
   la lire sans quitter la page, et l'emporter s'il le veut. Le cadre est un
   « iframe » et non un « object » : la règle de sécurité du site interdit le
   second, et un PDF de même origine passe par le premier. */
.docs { margin: 38px 0 8px; padding-top: 26px; border-top: 3px solid var(--accent, var(--red)); }
.docs__titre { font-size: 1.15rem; margin: 0 0 16px; }
.docs__liste { list-style: none; margin: 0; padding: 0; }
.docs__ligne {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.docs__nom { font-weight: 600; text-decoration: none; }
.docs__nom:hover { text-decoration: underline; }
.docs__detail { color: var(--muted); font-size: .84rem; flex: 1; }
.docs__charger {
  flex: none; padding: 7px 15px; border-radius: 3px; text-decoration: none;
  background: var(--accent, var(--red)); color: #fff; font-size: .86rem; font-weight: 600;
}
.docs__charger:hover { filter: brightness(1.08); }
@media (max-width: 560px) {
  .docs__detail { flex-basis: 100%; order: 3; }
  .docs__apercu { height: 60vh; }
}

/* 22. LISEUSE ===============================================================
   Un document qui se feuillette. Les pages sont dessinées sur une toile, sans
   la barre d'outils grise du navigateur : le lecteur voit une publication, pas
   un fichier. */
.liseuse {
  margin: 0 0 20px; background: var(--bg-2, #f2f2f2);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  outline: none;
}
.liseuse__scene {
  display: flex; align-items: center; gap: 6px;
  padding: 18px 10px; min-height: 240px;
}
.liseuse__page {
  flex: 1; min-width: 0; display: flex; justify-content: center;
  /* Agrandie, la page dépasse le cadre : elle défile au lieu d'être rognée.
     Bornée à 100 %, le bouton « + » ne produisait rien de visible. */
  overflow: auto; -webkit-overflow-scrolling: touch;
}
.liseuse__page--zoom { justify-content: flex-start; }
/* L'ombre portée donne l'épaisseur d'un feuillet posé. */
.liseuse__toile {
  flex: none; background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
}
.liseuse__fleche {
  flex: none; width: 40px; height: 64px; border: 0; border-radius: 3px;
  background: rgba(0, 0, 0, .06); color: var(--fg);
  font-size: 1.9rem; line-height: 1; cursor: pointer;
}
.liseuse__fleche:hover:not(:disabled) { background: rgba(0, 0, 0, .13); }
.liseuse__fleche:disabled { opacity: .22; cursor: default; }
.liseuse--seule .liseuse__fleche { display: none; }

.liseuse__barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 9px 14px; border-top: 1px solid var(--line);
  background: var(--bg); font-size: .85rem;
}
.liseuse__compte { color: var(--muted); }
.liseuse__actions { display: flex; align-items: center; gap: 6px; }
.liseuse__btn {
  border: 1px solid var(--line); background: transparent; color: var(--fg);
  border-radius: 3px; padding: 4px 10px; font-size: .85rem;
  cursor: pointer; text-decoration: none; line-height: 1.6;
}
.liseuse__btn:hover { background: rgba(0, 0, 0, .06); }
.liseuse--echec .liseuse__scene { display: none; }

/* Le bloc « Fichier » de WordPress : son bouton reste, son cadre mort est
   remplacé par la liseuse. */
.wp-block-file--liseuse { display: block; }
.wp-block-file--liseuse > a:not(.wp-block-file__button) { font-weight: 600; }

@media (max-width: 640px) {
  /* La page prend toute la largeur ; les flèches se posent dessus, en retrait,
     là où le pouce les trouve sans réfléchir. */
  .liseuse__scene { position: relative; padding: 10px 6px; gap: 0; }
  .liseuse__fleche {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 34px; height: 52px; font-size: 1.5rem;
    background: rgba(255, 255, 255, .82); color: #111;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .22);
  }
  .liseuse__fleche--prec { left: 2px; }
  .liseuse__fleche--suiv { right: 2px; }
  .liseuse__fleche:disabled { opacity: 0; pointer-events: none; }
  .liseuse__barre { padding: 9px 10px; }
  .liseuse__compte { flex: 1 0 100%; }
}

/* 23. PARTAGE ===============================================================
   Sous l'article, une fois la lecture finie. WhatsApp en tête : c'est par là
   que l'information circule en Afrique de l'Ouest. */
.partage { margin: 34px 0 6px; padding-top: 22px; border-top: 1px solid var(--line); }
.partage__titre {
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px; font-weight: 700;
}
.partage__liste { display: flex; flex-wrap: wrap; gap: 9px; }
.partage__bouton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--fg);
  font: inherit; font-size: .87rem; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.partage__bouton svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.partage__bouton:hover { color: #fff; border-color: transparent; }
/* Chaque réseau garde sa couleur : on la reconnaît avant de lire le mot. */
.partage__bouton--whatsapp:hover { background: #25d366; }
.partage__bouton--facebook:hover { background: #1877f2; }
.partage__bouton--x:hover        { background: #000; }
.partage__bouton--linkedin:hover { background: #0a66c2; }
.partage__bouton--mail:hover     { background: var(--bar); }
.partage__bouton--copy:hover     { background: var(--red); }

/* Sur téléphone, les libellés s'effacent : six pastilles tiennent sur une
   ligne, six mots non. */
@media (max-width: 560px) {
  .partage__liste { gap: 8px; }
  .partage__bouton { padding: 11px; border-radius: 50%; }
  .partage__bouton span { display: none; }
  .partage__bouton svg { width: 19px; height: 19px; }
}