/* ==========================================================================
   Élan — feuille de style principale
   Reprise de la maquette BFM à l'identique, colorimétrie Élan.
   Référence de construction : maquette 1040 px exportée depuis un canevas
   1440 px (facteur 1,3846). Toutes les valeurs ci-dessous sont en px 1440.
   ========================================================================== */

/* -------------------------------------------------- Fontes */
@font-face {
  font-family: 'Helvetica Neue LT';
  src: url('../fonts/HelveticaNeue-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT';
  src: url('../fonts/HelveticaNeue-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT';
  src: url('../fonts/HelveticaNeue-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT';
  src: url('../fonts/HelveticaNeue-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT';
  src: url('../fonts/HelveticaNeue-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}

/* -------------------------------------------------- Jetons */
:root {
  /* Charte Élan — valeurs issues des SVG fournis */
  --bleu:          #1955A7;   /* bleu principal, fonds clairs */
  --bleu-fonce:    #124080;
  --bleu-clair:    #BCDAE4;   /* accent sur fond sombre (remplace le jaune) */
  --bleu-pale:     #EAF2F6;

  --noir:          #000000;
  --blanc:         #FFFFFF;
  --gris-900:      #111111;
  --gris-600:      #6B6B6B;
  --gris-400:      #9A9A9A;
  --gris-200:      #DCDCDC;
  --gris-100:      #F0F0F0;
  --rouge-live:    #E8232A;

  /* Gabarit */
  --page:          1440px;
  --gouttiere:     24px;
  --col-gap:       12px;
  --header-h:      56px;

  /* Typographie */
  --font: 'Helvetica Neue LT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fs-section:    64px;   /* Derniers articles, Top 5… */
  --fs-hero:       62px;
  --fs-titre-lg:   30px;
  --fs-titre-md:   19px;
  --fs-titre-sm:   17px;
  --fs-corps:      16px;
  --fs-nav:        15px;
  --fs-meta:       13px;
  --fs-micro:      12px;
}

/* -------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-corps);
  color: var(--noir);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

ul { list-style: none; margin: 0; padding: 0; }

:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.sombre :focus-visible { outline-color: var(--bleu-clair); }

.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;
}

.contenu {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* ==========================================================================
   Barre de navigation, deux niveaux
   ========================================================================== */
:root { --barre-haut: 46px; --barre-bas: 60px; --header-compact: 46px; }

.barre {
  position: sticky; top: 0; z-index: 60;
  background: var(--blanc);
  color: var(--noir);
}

.barre__inner {
  height: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ---- niveau haut : bleu, direct et connexion ---- */
.barre__haut {
  height: var(--barre-haut);
  background: var(--bleu);
  color: var(--blanc);
  overflow: hidden;
  transition: height .3s cubic-bezier(.4, 0, .2, 1), opacity .22s ease;
}

/* ---- niveau bas : blanc, logo et rubriques ---- */
.barre__bas {
  height: var(--barre-bas);
  border-bottom: 1px solid var(--gris-200);
  transition: height .3s cubic-bezier(.4, 0, .2, 1), background .3s ease, border-color .3s ease;
}

.barre__logo { flex: none; display: flex; align-items: center; position: relative; }
.barre__logo img {
  height: 30px; width: auto;
  transition: height .3s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}
.barre__logo--clair { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }

/* ---- état compact ---- */
.barre.est-compacte .barre__haut { height: 0; opacity: 0; }
.barre.est-compacte .barre__bas {
  height: var(--header-compact);
  background: var(--bleu);
  border-bottom-color: transparent;
}
.barre.est-compacte .barre__logo img { height: 17px; }
.barre.est-compacte .barre__logo--sombre { opacity: 0; }
.barre.est-compacte .barre__logo--clair { opacity: 1; }
.barre.est-compacte .nav__lien { color: var(--blanc); }
.barre.est-compacte .nav__lien::after { border-color: var(--blanc); }
.barre.est-compacte .barre__burger span,
.barre.est-compacte .barre__burger span::before,
.barre.est-compacte .barre__burger span::after { background: var(--blanc); }

/* ---- lecteur direct ---- */
.direct { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }

.direct__play {
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blanc);
  color: var(--bleu);
  display: grid; place-items: center;
  transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), background .2s ease;
}
.direct__play:hover { transform: scale(1.12); background: var(--bleu-clair); }
.direct__play svg { width: 10px; height: 10px; fill: currentColor; }

.direct__pastille {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rouge-live);
  animation: battement 2.4s ease-in-out infinite;
}
@keyframes battement {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.direct__label { flex: none; color: var(--blanc); font-size: var(--fs-meta); font-weight: 500; }
.direct__titre {
  min-width: 0; font-size: var(--fs-meta); color: #DCE8F5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.direct__grille { flex: none; font-size: var(--fs-meta); color: var(--blanc); }
.direct__sep { flex: none; opacity: .5; font-size: var(--fs-meta); }

/* ---- rubriques ---- */
.nav { display: flex; align-items: center; gap: 26px; flex: none; margin-left: auto; }
.barre__bas .chercher { margin-left: 18px; flex: none; }
.nav__item { position: relative; }

.nav__lien {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-nav); font-weight: 500;
  height: 100%;
  color: var(--noir);
  white-space: nowrap;
  position: relative;
  transition: color .25s ease;
}
.nav__lien:hover { text-decoration: none; }
.nav__lien::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}
.nav__lien:hover::before,
.nav__item.est-ouvert .nav__lien::before { transform: scaleX(1); }
.nav__lien::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.3px solid currentColor;
  border-bottom: 1.3px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s ease;
}
.nav__item.est-ouvert .nav__lien::after { transform: translateY(1px) rotate(225deg); }

.barre__fin { display: flex; align-items: center; gap: 18px; flex: none; margin-left: auto; }

.cta {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 17px;
  background: var(--blanc); color: var(--bleu);
  font-size: var(--fs-meta); font-weight: 700;
  border-radius: 999px;
  transition: background .22s ease, color .22s ease, transform .14s ease;
}
.cta:hover { background: var(--bleu-clair); color: var(--bleu-fonce); text-decoration: none; }
.cta:active { transform: translateY(1px); }

.barre__burger { display: none; }

/* ==========================================================================
   Méga-menu
   ========================================================================== */
.megamenu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bleu-fonce);
  color: var(--blanc);
  z-index: 55;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s .22s;
}
.megamenu.est-ouvert {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .22s ease, transform .22s ease;
}

.megamenu__inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: 26px var(--gouttiere) 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 444px;
  gap: 48px;
}

.megamenu__titre {
  display: inline-flex; align-items: flex-start; gap: 6px;
  font-size: 30px; font-weight: 500; margin: 0 0 14px;
  text-decoration: underline; text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.megamenu__titre svg { width: 13px; height: 13px; margin-top: 6px; fill: currentColor; }

.megamenu__desc {
  margin: 0; max-width: 330px;
  font-size: var(--fs-nav); line-height: 1.5; color: #C9DCEF;
}

.megamenu__listes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 0 44px;
  align-content: start;
}
.megamenu__listes a { display: block; padding: 4px 0; font-size: var(--fs-nav); color: #DCE8F5; }
.megamenu__listes a:hover { color: var(--bleu-clair); }

/* ==========================================================================
   Héros
   ========================================================================== */
.heros {
  position: relative;
  height: 734px;
  color: var(--blanc);
  overflow: hidden;
  background: var(--noir);
}

.heros__media { position: absolute; inset: 0; }
.heros__media img,
.heros__media video { width: 100%; height: 100%; object-fit: cover; }

.heros__voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.1) 35%, rgba(0,0,0,.72) 100%);
}

.heros__contenu {
  position: relative; height: 100%;
  max-width: var(--page); margin-inline: auto;
  padding: 0 var(--gouttiere) 64px;
  display: flex; flex-direction: column; justify-content: flex-end;
}

.heros__titre {
  margin: 0 0 22px;
  font-size: var(--fs-hero);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--blanc);
  max-width: 1150px;
}

.heros__meta { display: flex; align-items: center; gap: 14px; }

.bouton-lecture {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bleu-clair); color: var(--bleu);
  display: grid; place-items: center; flex: none;
  transition: transform .15s ease;
}
.bouton-lecture:hover { transform: scale(1.06); }
.bouton-lecture svg { width: 15px; height: 15px; fill: currentColor; margin-left: 2px; }

.heros__infos { display: flex; align-items: center; gap: 10px; font-size: var(--fs-meta); }
.heros__infos .rubrique { font-style: italic; }
.heros__infos .point { opacity: .7; }
.heros__actions { display: flex; align-items: center; gap: 12px; margin-left: 6px; }
.heros__actions svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }

.heros__transport {
  position: absolute; right: var(--gouttiere); bottom: 74px;
  display: flex; align-items: center; gap: 12px;
}
.heros__transport button {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.8);
  display: grid; place-items: center;
}
.heros__transport svg { width: 10px; height: 10px; fill: var(--blanc); }

/* Diapositives */
.heros__diapo,
.vedette__diapo {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .55s ease, visibility 0s .55s;
}
.heros__diapo.est-active,
.vedette__diapo.est-active {
  opacity: 1; visibility: visible;
  transition: opacity .55s ease;
}

/* Progression du carrousel */
.progression {
  padding: 0;
  position: absolute; left: var(--gouttiere); right: var(--gouttiere); bottom: 26px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px;
}
.progression > * {
  height: 2px; background: rgba(255,255,255,.35); display: block;
  position: relative; overflow: hidden;
}
.progression > * i {
  position: absolute; inset: 0 auto 0 0;
  width: 0; background: var(--blanc); display: block;
}
.progression > *.est-vue i { width: 100%; }
.progression > *.est-active i { animation: remplir var(--duree, 8s) linear forwards; }

@keyframes remplir { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .progression > *.est-active i { animation: none; width: 100%; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: 56px 0; }
.section--serre { padding-block-start: 40px; }
.section--aeree { padding-block: 78px 20px; }
.section--aeree .section__tete { margin-bottom: 40px; }
.section--aeree .grille-trois { gap: 0 32px; }
.section--aeree .carte { padding-block: 26px; grid-template-columns: 132px 1fr; gap: 22px; }
.section--aeree .carte__img { width: 132px; height: 132px; }
.section--aeree .grille-trois .carte:nth-child(3n+2),
.section--aeree .grille-trois .carte:nth-child(3n) { padding-left: 32px; }

.section__tete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 26px;
}

.section__titre {
  margin: 0;
  font-size: var(--fs-section);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.025em;
}
.section__titre sup,
.vedette__etiquette sup {
  font-size: .32em; font-weight: 400; letter-spacing: 0;
  vertical-align: super; margin-left: .18em;
  font-variant-numeric: lining-nums;
}
.vedette__etiquette sup { font-size: .55em; }

.fleches { display: flex; gap: 14px; flex: none; padding-bottom: 8px; }
.fleches button { font-size: 20px; line-height: 1; color: var(--gris-600); }
.fleches button:hover { color: var(--noir); }

/* ==========================================================================
   Liste d'articles (ex « Continue listening »)
   ========================================================================== */
.liste { border-top: 1px solid var(--gris-200); }

.liste__ligne {
  display: grid;
  grid-template-columns: 44px 68px 1fr 180px 70px 90px 24px;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gris-200);
}

.liste__play {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.2px solid var(--noir);
  display: grid; place-items: center;
}
.liste__play svg { width: 10px; height: 10px; fill: var(--noir); margin-left: 1px; }
.liste__ligne:hover .liste__play { background: var(--bleu); border-color: var(--bleu); }
.liste__ligne:hover .liste__play svg { fill: var(--blanc); }

.liste__vignette { width: 68px; height: 44px; object-fit: cover; }

.liste__titre { font-size: var(--fs-titre-sm); font-weight: 500; line-height: 1.25; }

.liste__rubrique { font-size: var(--fs-meta); font-style: italic; color: var(--gris-600); text-align: right; }
.liste__date { font-size: var(--fs-meta); font-style: italic; color: var(--gris-600); text-align: right; }

.jauge { width: 76px; height: 2px; background: var(--gris-200); position: relative; }
.jauge i { position: absolute; inset: 0 auto 0 0; background: var(--noir); display: block; }

.favori svg { width: 14px; height: 18px; stroke: var(--noir); fill: none; stroke-width: 1.4; }
.favori[aria-pressed="true"] svg { fill: var(--noir); }

/* ==========================================================================
   Grande carte pleine largeur (ex « Top 5 this week »)
   ========================================================================== */
.vedette {
  position: relative;
  height: 690px;
  color: var(--blanc);
  overflow: hidden;
  background: var(--noir);
}
.vedette img { width: 100%; height: 100%; object-fit: cover; }
.vedette__voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.75) 100%);
}
.vedette__etiquette {
  position: absolute; top: 26px; left: 32px;
  font-size: 22px; font-weight: 500;
}
.vedette__bas {
  position: absolute; left: 32px; right: 32px; bottom: 56px;
}
.vedette__titre {
  margin: 0 0 20px;
  font-size: var(--fs-hero); line-height: 1.06; font-weight: 700;
  letter-spacing: -.015em; max-width: 1180px;
}

/* ==========================================================================
   Grille des derniers articles
   ========================================================================== */
.grille-une {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--col-gap);
  margin-bottom: 26px;
}

.carte-image {
  position: relative; overflow: hidden; color: var(--blanc);
  aspect-ratio: 690 / 452;
}
.carte-image img { width: 100%; height: 100%; object-fit: cover; }
.carte-image__voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.78) 100%);
}
.carte-image__bas { position: absolute; left: 26px; right: 26px; bottom: 24px; }
.carte-image__titre {
  margin: 0 0 16px; font-size: var(--fs-titre-lg); line-height: 1.16;
  font-weight: 700; letter-spacing: -.01em;
}
.carte-image__meta { display: flex; align-items: center; gap: 12px; font-size: var(--fs-meta); }

.carte-texte {
  position: relative;
  background: var(--bleu);
  color: var(--blanc);
  padding: 116px 44px 24px;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 690 / 452;
}
.carte-texte__titre {
  margin: 0 0 12px; font-size: var(--fs-titre-lg); line-height: 1.2; font-weight: 500;
  letter-spacing: -.01em;
}
.carte-texte__chapo {
  margin: 0 0 20px; font-size: var(--fs-corps); line-height: 1.45; color: #D9E6F5;
  max-width: 640px;
}
.carte-texte__meta { display: flex; align-items: center; gap: 12px; font-size: var(--fs-meta); }
.carte-texte .bouton-lecture { background: var(--blanc); color: var(--bleu); width: 34px; height: 34px; }
.carte-texte .bouton-lecture svg { width: 12px; height: 12px; }
.carte-texte .favori svg { stroke: var(--blanc); }
.carte-texte .favori[aria-pressed="true"] svg { fill: var(--blanc); }
.carte-texte .favori { position: absolute; top: 22px; right: 26px; }

.grille-trois {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--col-gap);
}

.carte {
  display: grid; grid-template-columns: 96px 1fr; gap: 16px;
  padding: 18px 20px 18px 0;
  border-bottom: 1px solid var(--gris-200);
}
.carte + .carte { }
.grille-trois .carte:nth-child(3n+2),
.grille-trois .carte:nth-child(3n) { padding-left: 20px; border-left: 1px solid var(--gris-200); }
.grille-trois .carte:nth-last-child(-n+3) { border-bottom: 0; }

.carte__img { width: 96px; height: 96px; object-fit: cover; }
.carte__corps { min-width: 0; }
.carte__meta { font-size: var(--fs-meta); font-style: italic; color: var(--gris-600); margin-bottom: 6px; }
.carte__titre { margin: 0 0 8px; font-size: var(--fs-titre-sm); line-height: 1.25; font-weight: 500; }
.carte__chapo { margin: 0; font-size: var(--fs-meta); line-height: 1.4; color: var(--gris-600); }
.carte__duree { display: flex; align-items: center; gap: 10px; font-size: var(--fs-meta); font-style: italic; color: var(--gris-600); }
.carte .liste__play { width: 26px; height: 26px; }

/* ==========================================================================
   Carrousel vertical (ex « Allegedly viral »)
   ========================================================================== */
.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--col-gap)) / 3.6);
  gap: var(--col-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 40px;
}
.rail::-webkit-scrollbar { display: none; }

.tuile { scroll-snap-align: start; }
.tuile__media { position: relative; aspect-ratio: 520 / 700; overflow: hidden; background: var(--gris-100); }
.tuile__media img { width: 100%; height: 100%; object-fit: cover; }
.tuile__reseau { position: absolute; top: 14px; right: 14px; }
.tuile__reseau svg { width: 16px; height: 16px; fill: var(--blanc); }
.tuile .bouton-lecture { position: absolute; left: 16px; bottom: 16px; width: 38px; height: 38px; }
.tuile .bouton-lecture svg { width: 13px; height: 13px; }
.tuile__titre {
  margin: 12px 0 0; font-size: var(--fs-titre-sm); line-height: 1.28; font-weight: 500;
}

/* ==========================================================================
   Bandeau défilant
   ========================================================================== */
.bandeau {
  background: var(--bleu-fonce); color: var(--blanc);
  overflow: hidden; padding: 58px 0;
  margin-top: 90px;
}
.bandeau__piste {
  display: flex; align-items: center; gap: 0;
  white-space: nowrap;
  animation: defile 38s linear infinite;
}
.bandeau__groupe { display: flex; align-items: center; flex: none; }
.bandeau__mot {
  font-size: 60px; font-weight: 700; letter-spacing: -.02em;
  color: #5C85C4; padding-right: 22px;
}
.bandeau__mot--marque { color: var(--blanc); display: flex; align-items: center; gap: 14px; }
.bandeau__mot--marque img { height: 46px; width: auto; }

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

/* ==========================================================================
   Pied de page
   ========================================================================== */
.pied {
  background: var(--bleu); color: var(--blanc);
  padding-block: 54px 34px;
}

/* logo du pied, sous le plan de site */
.pied__marque { display: block; flex: none; }
.pied__marque img { height: 26px; width: auto; display: block; }
.pied__grille {
  display: grid;
  grid-template-columns: 210px 210px 210px 1fr 220px;
  gap: 40px;
}
.pied__titre {
  margin: 0 0 22px; font-size: 22px; font-weight: 400; color: #AFC8E6;
}
.pied__liens a { display: block; font-size: var(--fs-meta); font-weight: 500; padding: 5px 0; }
.pied__liens a:hover { color: var(--bleu-clair); }

.infolettre { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.4); max-width: 330px; }
.infolettre input {
  flex: 1; background: none; border: 0; color: var(--blanc);
  font-family: inherit; font-size: var(--fs-meta); padding: 8px 0;
}
.infolettre input::placeholder { color: #B6CCE8; }
.infolettre input:focus { outline: none; }
.infolettre button { color: #C5D8EE; padding: 8px 4px; }
.infolettre button:hover { color: var(--bleu-clair); }

.pied__app {
  display: inline-flex; align-items: flex-start; gap: 4px;
  color: var(--bleu-clair); font-size: 21px; font-weight: 700;
  justify-self: end;
}
.pied__app svg { width: 11px; height: 11px; fill: currentColor; margin-top: 4px; }

.pied__bas {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  margin-top: 84px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: var(--fs-micro); font-style: italic; color: #C5D8EE;
}

/* ==========================================================================
   Page article
   ========================================================================== */
.fil {
  display: flex; justify-content: center; gap: 6px;
  padding: 26px 0 0; font-size: var(--fs-meta); color: var(--gris-900);
}
.fil a:hover { color: var(--bleu); }
.fil span { color: var(--gris-400); }

.article-tete { max-width: 1000px; margin: 0 auto; padding: 22px var(--gouttiere) 0; text-align: center; }

.article-tete__titre {
  margin: 0 0 24px;
  font-size: 68px; line-height: 1.05; font-weight: 700; letter-spacing: -.025em;
}
.article-tete__chapo {
  margin: 0 auto 22px; max-width: 700px;
  font-size: 19px; line-height: 1.45; font-weight: 700;
}
.article-tete__signature {
  display: flex; justify-content: center; gap: 10px;
  font-size: var(--fs-meta); font-style: italic;
}
.article-tete__signature a { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

.figure { margin: 30px 0 0; }
.figure img { width: 100%; height: auto; }

/* ouverture d'article : bandeau large, jamais plein écran */
.article > .contenu > .figure img {
  aspect-ratio: 2.1 / 1;
  max-height: 70vh;
  object-fit: cover;
}
.figure figcaption {
  margin-top: 8px; text-align: center;
  font-size: var(--fs-micro); font-style: italic; color: var(--gris-600);
}
.figure figcaption a { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; color: var(--noir); }

.article-corps {
  display: grid;
  grid-template-columns: 240px minmax(0, 690px) 240px;
  justify-content: center;
  gap: 60px;
  padding: 44px var(--gouttiere) 0;
  align-items: start;
}

.aside__titre { margin: 0 0 18px; font-size: var(--fs-titre-md); font-weight: 700; }

.aside-liste li { border-left: 1px solid var(--gris-200); padding: 0 0 22px 16px; }
.aside-liste .rubrique { font-size: var(--fs-micro); font-style: italic; color: var(--gris-600); }
.aside-liste .titre { display: block; margin: 4px 0 12px; font-size: var(--fs-meta); font-weight: 500; line-height: 1.35; }
.aside-liste .duree { display: flex; align-items: center; gap: 10px; font-size: var(--fs-micro); font-style: italic; color: var(--gris-600); }

.article-corps > .aside { position: sticky; top: calc(var(--header-compact) + 28px); }

.encart {
  position: sticky; top: calc(var(--header-compact) + 28px);
  display: block; background: var(--bleu); color: var(--blanc);
  padding: 18px 20px 20px; text-align: center;
}
.encart:hover { text-decoration: none; }
.encart__titre { font-size: var(--fs-titre-md); font-weight: 700; margin: 0 0 6px; transition: color .32s ease; }
.encart__texte { font-size: var(--fs-meta); font-weight: 500; line-height: 1.35; margin: 0; }
.encart__fleche { position: absolute; top: 10px; right: 12px; width: 10px; height: 10px; fill: currentColor; }

.prose p {
  margin: 0 0 28px;
  font-size: var(--fs-corps); line-height: 1.55;
}
.prose p:last-child { margin-bottom: 0; }

.prose .exergue {
  font-size: 30px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em;
  margin: 40px 0 44px;
}

.prose .figure { margin: 8px 0 34px; }

.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 30px; }
.etiquettes a {
  display: inline-block; padding: 5px 14px;
  border: 1px solid var(--gris-400); border-radius: 999px;
  font-size: var(--fs-micro); color: var(--gris-900);
}
.etiquettes a:hover { border-color: var(--bleu); color: var(--bleu); text-decoration: none; }

.partage { display: flex; align-items: center; gap: 22px; padding-bottom: 46px; }
.partage__label { font-size: var(--fs-micro); font-style: italic; color: var(--gris-600); }
.partage a svg { width: 17px; height: 17px; fill: var(--noir); }
.partage a:hover svg { fill: var(--bleu); }

.separateur { border: 0; border-top: 1px solid var(--gris-200); margin: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablette large */
@media (max-width: 1200px) {
  :root { --fs-section: 52px; --fs-hero: 46px; }
  .heros { height: 620px; }
  .vedette { height: 560px; }
  .article-corps { grid-template-columns: 200px minmax(0, 620px); gap: 40px; }
  .article-corps .encart { display: none; }
  .article-tete__titre { font-size: 54px; }
  .pied__grille { grid-template-columns: repeat(2, 1fr) 1fr; row-gap: 40px; }
  .pied__app { justify-self: start; }
}

/* Tablette */
@media (max-width: 1000px) {
  .direct__titre, .direct__grille, .direct__sep { display: none; }
  .nav { display: none; }
  .barre__bas .barre__inner { justify-content: space-between; }
  .barre__burger {
    display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto;
  }
  .barre__burger span {
    display: block; width: 20px; height: 1.5px; background: var(--noir);
    position: relative; transition: background .3s ease;
  }
  .barre__burger span::before,
  .barre__burger span::after {
    content: ''; position: absolute; left: 0; width: 20px; height: 1.5px;
    background: var(--noir); transition: background .3s ease;
  }
  .barre__burger span::before { top: -6px; }
  .barre__burger span::after { top: 6px; }


  .grille-trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-trois .carte:nth-child(3n+2),
  .grille-trois .carte:nth-child(3n) { padding-left: 0; border-left: 0; }
  .grille-trois .carte:nth-child(2n) { padding-left: 20px; border-left: 1px solid var(--gris-200); }
  .grille-trois .carte:nth-last-child(-n+3) { border-bottom: 1px solid var(--gris-200); }

  .rail { grid-auto-columns: calc((100% - var(--col-gap)) / 2.2); }

  .liste__ligne { grid-template-columns: 40px 60px 1fr 120px 60px 24px; }
  .liste__ligne .jauge { display: none; }

  .article-corps { grid-template-columns: minmax(0, 690px); }
  .article-corps .aside { display: none; }
}

/* Mobile */
@media (max-width: 680px) {
  /* les retours forcés des titres ne valent que sur grand écran */
  .heros__titre br,
  .vedette__titre br,
  .carte-image__titre br,
  .carte-texte__titre br { display: none; }

  :root {
    --gouttiere: 16px;
    --fs-section: 36px;
    --fs-hero: 30px;
    --fs-titre-lg: 22px;
    --fs-corps: 16px;
  }

  .barre__logo img { height: 22px; }
  :root { --barre-bas: 52px; }
  .direct { flex: none; }
  .direct__label { font-size: var(--fs-micro); }

  .megamenu__inner { grid-template-columns: 1fr; gap: 26px; padding-bottom: 32px; }
  .megamenu__titre { font-size: 24px; }
  .megamenu__listes { grid-template-columns: 1fr 1fr; gap: 0 20px; }

  .heros { height: 520px; }
  .heros__contenu { padding-bottom: 54px; }
  .heros__titre { margin-bottom: 16px; }
  .heros__transport { display: none; }
  .heros__infos .rubrique,
  .heros__infos .point { font-size: var(--fs-micro); }

  .section { padding-block-start: 40px; }
  .section__tete { margin-bottom: 18px; }

  /* Liste : la vignette et le titre seuls */
  .liste__ligne {
    grid-template-columns: 34px 54px 1fr 22px;
    gap: 12px; padding: 12px 0;
  }
  .liste__rubrique, .liste__date { display: none; }
  .liste__titre { font-size: 15px; }
  .liste__vignette { width: 54px; height: 38px; }
  .liste__play { width: 26px; height: 26px; }

  .vedette { height: 460px; }
  .vedette__etiquette { top: 16px; left: 16px; font-size: 17px; }
  .vedette__bas { left: 16px; right: 16px; bottom: 40px; }

  .grille-une { grid-template-columns: 1fr; gap: 0; }
  .carte-image { aspect-ratio: 4 / 3; }
  .carte-image__bas { left: 16px; right: 16px; bottom: 16px; }
  .carte-texte { aspect-ratio: auto; padding: 24px 16px; }
  .carte-texte .favori { top: 16px; right: 16px; }

  .grille-trois { grid-template-columns: 1fr; }
  .grille-trois .carte:nth-child(2n) { padding-left: 0; border-left: 0; }
  .carte { grid-template-columns: 84px 1fr; gap: 12px; padding: 14px 0; }
  .carte__img { width: 84px; height: 84px; }
  .carte__chapo { display: none; }

  .rail { grid-auto-columns: 62%; padding-bottom: 28px; }

  .bandeau { padding: 34px 0; }
  .bandeau__mot { font-size: 34px; padding-right: 14px; }
  .bandeau__mot--marque img { height: 26px; }

  .pied { padding-block-start: 38px; }
  .pied__marque img { height: 20px; }
  .pied__grille { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .pied__titre { font-size: 18px; margin-bottom: 14px; }
  .pied__bas { margin-top: 44px; }
  .infolettre { max-width: none; }

  .article-tete { padding-top: 14px; }
  .article-tete__titre { font-size: 32px; }
  .article-tete__chapo { font-size: 16px; }
  .article-corps { padding-top: 28px; }
  .prose .exergue { font-size: 22px; margin: 28px 0 30px; }
  .partage { gap: 18px; }
}

/* Très petits écrans */
@media (max-width: 380px) {
  .barre__inner { gap: 10px; }
  .direct__label { display: none; }
  .barre__fin { gap: 12px; }
  .barre__fin a { font-size: var(--fs-meta); }
}

/* Le pied ne doit jamais élargir la page */
.pied__grille > * { min-width: 0; }
.infolettre input { min-width: 0; width: 100%; }

/* ==========================================================================
   Écran de chargement
   ========================================================================== */
.chargement {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bleu);
  display: flex; align-items: center; justify-content: center;
  overscroll-behavior: contain;
}
.chargement[hidden] { display: none; }

.chargement__scene {
  display: flex; align-items: center;
}

/* le disque : une jauge circulaire */
.chargement__disque {
  position: relative;
  width: 96px; height: 96px;
  flex: none;
  transform-origin: 50% 50%;
}
.chargement__disque svg { width: 100%; height: 100%; display: block; }

.chargement__vide { opacity: .22; }
.chargement__plein {
  position: absolute; inset: 0;
  -webkit-mask-image: conic-gradient(from -90deg, #000 var(--avance, 0%), transparent 0);
          mask-image: conic-gradient(from -90deg, #000 var(--avance, 0%), transparent 0);
}

/* le mot, révélé par un volet */
.chargement__mot {
  overflow: hidden;
  width: 0;
  margin-left: 2px;
  flex: none;
}
.chargement__mot svg { height: 108px; width: 228px; display: block; }

/* ---- phases ---- */
.chargement.est-pivot .chargement__disque {
  transform: rotate(360deg);
  transition: transform 1.15s cubic-bezier(.1, .88, .18, 1);
}
.chargement.est-pivot .chargement__mot {
  width: 228px;
  transition: width .7s cubic-bezier(.22, 1, .36, 1) .42s;
}

.chargement.est-sortie {
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .chargement__disque,
  .chargement__mot,
  .chargement { transition: none !important; }
}

@media (max-width: 680px) {
  .chargement__disque { width: 70px; height: 70px; }
  .chargement__mot svg { height: 80px; width: 168px; }
  .chargement.est-pivot .chargement__mot { width: 168px; }
}

/* ==========================================================================
   Barre de progression de lecture
   ========================================================================== */
.lecture {
  position: absolute; left: 0; bottom: -1px;
  height: 3px; width: 100%;
  z-index: 62;
  pointer-events: none;
}
.lecture i {
  display: block; height: 100%; width: 0;
  background: var(--bleu);
  transition: width .1s linear;
}
.barre.est-compacte .lecture i { background: var(--bleu-clair); }

/* compteur au survol */
.lecture__valeur {
  position: absolute; top: 6px;
  transform: translateX(-50%) translateY(-4px);
  background: var(--bleu); color: var(--blanc);
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  white-space: nowrap;
}
.lecture.est-actif:hover .lecture__valeur,
.barre:hover .lecture.est-actif .lecture__valeur {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   Mouvement
   ========================================================================== */

/* --- les titres de section se lèvent derrière un masque --- */
.section__titre,
.vedette__etiquette {
  display: inline-block;
  clip-path: inset(0 0 0 0);
}
.masque { overflow: hidden; display: inline-block; vertical-align: bottom; }
.masque > * {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .72s cubic-bezier(.16, 1, .3, 1);
}
.masque.est-vu > * { transform: none; }

/* --- mouvement lent sur les images fixes du héros --- */
.heros__diapo img,
.vedette__diapo img {
  transform: scale(1.001);
  transition: transform .6s ease;
}
.heros__diapo.est-active img,
.vedette__diapo.est-active img {
  animation: ample 9s linear forwards;
}
@keyframes ample {
  from { transform: scale(1.001); }
  to   { transform: scale(1.075); }
}

@media (prefers-reduced-motion: reduce) {
  .barre { transition: none; }
  .masque > * { transform: none; transition: none; }
  .heros__diapo.est-active img,
  .vedette__diapo.est-active img { animation: none; }
}

/* ==========================================================================
   Bandeau de consentement
   ========================================================================== */
.consentement {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 180;
  background: var(--blanc);
  border-top: 3px solid var(--bleu);
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .14);
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  max-height: 84vh;
  overflow-y: auto;
}
.consentement.est-visible { transform: none; }
.consentement[hidden] { display: none; }

.consentement__inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: 26px var(--gouttiere) 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: start;
}

.consentement__titre {
  margin: 0 0 12px;
  font-size: 22px; font-weight: 700; letter-spacing: -.01em;
}

.consentement__texte {
  margin: 0 0 16px;
  font-size: var(--fs-meta); line-height: 1.55; color: #3A3A3A;
  columns: 2; column-gap: 44px;
}
@media (max-width: 1100px) { .consentement__texte { columns: 1; max-width: 78ch; } }
.consentement__texte a {
  color: var(--bleu); text-decoration: underline; text-underline-offset: 2px;
}

.consentement__sous {
  margin: 0;
  font-size: var(--fs-micro); line-height: 1.5; color: var(--gris-600);
}
.consentement__sous a {
  color: var(--bleu); text-decoration: underline; text-underline-offset: 2px;
}
.consentement__sous strong { color: var(--noir); font-weight: 500; }

.consentement__actions {
  display: grid; gap: 10px;
  position: sticky; top: 0;
}

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px;
  font-size: var(--fs-nav); font-weight: 700;
  border: 1.5px solid var(--bleu);
  border-radius: 999px;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.bouton:hover { text-decoration: none; }
.bouton:active { transform: translateY(1px); }
.bouton--plein { background: var(--bleu); color: var(--blanc); }
.bouton--plein:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.bouton--ligne { background: transparent; color: var(--bleu); }
.bouton--ligne:hover { background: var(--bleu-pale); }
.bouton--nu {
  border-color: transparent; color: var(--gris-900); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
.bouton--nu:hover { color: var(--bleu); }

/* détail des finalités */
.consentement__finalites { display: none; margin-top: 16px; }
.consentement.est-detaille .consentement__finalites { display: block; }

.finalite {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--gris-200);
}
.finalite__texte { flex: 1; min-width: 0; }
.finalite__nom { display: block; font-size: var(--fs-meta); font-weight: 500; }
.finalite__desc { margin: 3px 0 0; font-size: var(--fs-micro); color: var(--gris-600); line-height: 1.45; }

/* interrupteur */
.bascule { flex: none; position: relative; width: 42px; height: 24px; }
.bascule input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bascule span {
  display: block; width: 100%; height: 100%;
  background: var(--gris-200); border-radius: 999px;
  transition: background .2s ease;
}
.bascule span::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--blanc);
  transition: transform .2s cubic-bezier(.3, 1.4, .5, 1);
}
.bascule input:checked + span { background: var(--bleu); }
.bascule input:checked + span::after { transform: translateX(18px); }
.bascule input:disabled + span { background: var(--bleu-clair); }
.bascule input:disabled + span::after { transform: translateX(18px); }
.bascule input:focus-visible + span { outline: 2px solid var(--bleu); outline-offset: 2px; }

@media (max-width: 900px) {
  .consentement__inner { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; }
  .consentement__actions { position: static; grid-template-columns: 1fr 1fr; }
  .consentement__actions .bouton--nu { grid-column: 1 / -1; }
  .consentement__titre { font-size: 18px; }
}

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

/* ==========================================================================
   Survols
   ========================================================================== */

/* --- cartes à image : l'image respire, le titre se souligne --- */
.carte-image img,
.tuile__media img,
.carte__img {
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.carte-image:hover img,
.tuile:hover .tuile__media img,
.carte:hover .carte__img { transform: scale(1.04); }

.carte-image__titre a,
.carte-texte__titre a,
.carte__titre a,
.tuile__titre a,
.liste__titre a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .42s cubic-bezier(.22, 1, .36, 1);
  text-decoration: none;
}
.carte-image:hover .carte-image__titre a,
.carte-texte:hover .carte-texte__titre a,
.carte:hover .carte__titre a,
.tuile:hover .tuile__titre a,
.liste__ligne:hover .liste__titre a { background-size: 100% 1px; }

.carte-image__titre a:hover,
.carte-texte__titre a:hover,
.carte__titre a:hover,
.tuile__titre a:hover,
.liste__titre a:hover { text-decoration: none; }

/* --- lignes de « À la une » --- */
.liste__ligne {
  position: relative;
  transition: background .38s ease;
}
.liste__ligne::before {
  content: '';
  position: absolute; inset: 0 calc(var(--gouttiere) * -1);
  background: var(--bleu-pale);
  opacity: 0;
  transition: opacity .38s ease;
  z-index: -1;
}
.liste__ligne:hover::before { opacity: 1; }
.liste__ligne > * { position: relative; }

.liste__vignette,
.liste__play { transition: transform .4s cubic-bezier(.22, 1, .36, 1), background .3s ease, border-color .3s ease; }
.liste__ligne:hover .liste__vignette { transform: translateX(4px); }
.liste__ligne:hover .liste__play { background: var(--bleu); border-color: var(--bleu); transform: scale(1.06); }
.liste__ligne:hover .liste__play svg { fill: var(--blanc); }

/* --- favoris en bleu profond --- */
.favori svg { transition: fill .3s ease, stroke .3s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.favori:hover svg { stroke: var(--bleu); transform: translateY(-2px); }
.favori[aria-pressed="true"] svg { fill: var(--bleu-fonce); stroke: var(--bleu-fonce); }
.carte-texte .favori[aria-pressed="true"] svg { fill: var(--blanc); stroke: var(--blanc); }
.carte-texte .favori:hover svg { stroke: var(--bleu-clair); }

/* --- tuiles du carrousel : voile bleu qui monte --- */
.tuile__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(25, 85, 167, .55) 0%, rgba(25, 85, 167, 0) 62%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.tuile:hover .tuile__media::after { opacity: 1; }
.tuile .bouton-lecture { transition: transform .4s cubic-bezier(.3, 1.3, .5, 1), background .3s ease; z-index: 2; }
.tuile:hover .bouton-lecture { transform: scale(1.08); background: var(--blanc); }

/* --- boutons de lecture --- */
.bouton-lecture { transition: transform .35s cubic-bezier(.3, 1.3, .5, 1), background .28s ease, color .28s ease; }
.bouton-lecture:hover { transform: scale(1.09); }

/* le bouton du héros signale sa présence, une seule fois */
.heros__diapo.est-active .bouton-lecture { animation: pulsation 1.6s ease-out 1.1s 1; }
@keyframes pulsation {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
  70%  { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* --- liens du pied de page --- */
.pied__liens a {
  transition: color .28s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}
.pied__liens a:hover { color: var(--bleu-clair); transform: translateX(3px); text-decoration: none; }

.pied__app { transition: transform .3s cubic-bezier(.22, 1, .36, 1), color .25s ease; }
.pied__app:hover { color: var(--blanc); transform: translateX(3px); text-decoration: none; }

/* --- encart publicitaire --- */
.encart {
  transition: background .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1),
              box-shadow .32s ease;
}
.encart:hover {
  background: var(--bleu-fonce);
  color: var(--blanc);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(18, 64, 128, .28);
}
.encart:hover .encart__titre { color: var(--bleu-clair); }

/* --- étiquettes de l'article --- */
.etiquettes a { transition: border-color .25s ease, color .25s ease, background .25s ease; }
.etiquettes a:hover { background: var(--bleu-pale); }

/* --- méga-menu : fondu croisé entre rubriques --- */
.megamenu.est-sortant {
  visibility: visible;
  opacity: 0;
  transform: none;
  transition: opacity .18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carte-image img, .tuile__media img, .carte__img,
  .liste__vignette, .liste__play, .bouton-lecture,
  .pied__liens a, .pied__app, .encart, .favori svg { transition: none; }
  .heros__diapo.est-active .bouton-lecture { animation: none; }
  .direct__pastille { animation: none; }
}

/* Consentement sur petit écran : les boutons doivent rester atteignables */
@media (max-width: 680px) {
  .consentement { max-height: 72vh; }
  .consentement__inner { padding-bottom: 20px; }
  .consentement__texte {
    columns: auto;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .consentement.est-detaille .consentement__texte {
    display: block;
    -webkit-line-clamp: unset;
  }
  .consentement__sous { display: none; }
  .consentement.est-detaille .consentement__sous { display: block; }
  .consentement__titre { font-size: 17px; margin-bottom: 8px; }
}

/* ==========================================================================
   Pages éditoriales (À propos, Conditions)
   ========================================================================== */
.page-tete { padding-block: 44px 0; }
.page-tete--centre { max-width: 900px; margin-inline: auto; }
.page-tete__titre {
  margin: 0 0 18px;
  font-size: var(--fs-section); line-height: 1; font-weight: 700; letter-spacing: -.025em;
}
.page-tete__chapo {
  margin: 0; max-width: 62ch;
  font-size: 19px; line-height: 1.45; font-weight: 500;
}
.page-tete__chapo--alerte { color: var(--bleu); font-weight: 700; margin-top: 10px; }

.colonnes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px; padding-block: 52px 0;
  align-items: start;
}
.colonnes--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.colonne__titre {
  margin: 0 0 16px; font-size: 26px; font-weight: 500; letter-spacing: -.01em;
}
.colonne p {
  margin: 0 0 14px; font-size: var(--fs-meta); line-height: 1.55; color: #2E2E2E;
}
.colonne p strong { font-weight: 700; color: var(--noir); }
.colonne p:last-child { margin-bottom: 0; }
.colonne ul { margin: 0 0 14px; }
.colonne li {
  font-size: var(--fs-meta); line-height: 1.55; color: #2E2E2E;
  padding-left: 14px; position: relative;
}
.colonne li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--bleu);
}

/* encarts de la colonne latérale */
.fiche {
  border: 1px solid var(--gris-200);
  padding: 20px 22px 22px;
  margin-top: 22px;
}
.fiche--pleine { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }
.fiche__libelle { margin: 0 0 3px; font-size: var(--fs-meta); font-weight: 700; }
.fiche__valeur { margin: 0 0 16px; font-size: var(--fs-micro); line-height: 1.5; }
.fiche--pleine .fiche__valeur { color: #D9E6F5; }
.fiche__valeur:last-child { margin-bottom: 0; }
.fiche__valeur a { text-decoration: underline; text-underline-offset: 2px; }

/* formulaire de contact */
.contact { border: 1px solid var(--gris-200); padding: 24px 24px 26px; margin-top: 12px; }
.contact--pleine {
  background: var(--bleu); border-color: var(--bleu); color: var(--blanc);
}
.contact--pleine .contact__intro { color: #D9E6F5; }
.contact--pleine .champ span { color: #BFD4EC; }
.contact--pleine .champ input,
.contact--pleine .contact--pleine .champ textarea { color: var(--blanc); }
.contact--pleine .champ input,
.contact--pleine .champ textarea {
  color: var(--blanc); border-bottom-color: rgba(255,255,255,.35);
}
.contact--pleine .champ input:focus,
.contact--pleine .champ textarea:focus { border-bottom-color: var(--blanc); }
.contact--pleine .bouton--plein {
  background: var(--blanc); color: var(--bleu); border-color: var(--blanc);
}
.contact--pleine .bouton--plein:hover { background: var(--bleu-clair); border-color: var(--bleu-clair); color: var(--bleu-fonce); }
.contact__titre { margin: 0 0 8px; font-size: 22px; font-weight: 500; text-align: center; }
.contact__intro {
  margin: 0 0 20px; font-size: var(--fs-micro); line-height: 1.5;
  color: var(--gris-600); text-align: center;
}
.champ { display: block; margin-bottom: 18px; }
.champ span {
  display: block; font-size: var(--fs-micro); font-weight: 500; margin-bottom: 4px;
  color: var(--gris-600);
}
.champ input,
.champ textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--gris-200);
  background: none; font-family: inherit; font-size: var(--fs-meta);
  padding: 6px 0; color: var(--noir);
  transition: border-color .25s ease;
}
.champ textarea { resize: vertical; min-height: 54px; }
.champ input:focus,
.champ textarea:focus { outline: none; border-bottom-color: var(--bleu); }
.contact .bouton { width: 100%; }

/* ==========================================================================
   Équipe
   ========================================================================== */
.equipe {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--col-gap);
}
.membre { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--gris-100); }
.membre img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.membre:hover img { transform: scale(1.04); }

.membre__carte {
  position: absolute; inset: 0;
  background: var(--blanc);
  padding: 22px 24px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .32s ease, visibility 0s .32s;
}
.membre:hover .membre__carte,
.membre:focus-within .membre__carte {
  opacity: 1; visibility: visible; transition: opacity .32s ease;
}
.membre__nom { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.15; }
.membre__role { margin: 0 0 14px; font-size: 22px; font-weight: 500; color: var(--bleu); line-height: 1.15; }
.membre__bio { margin: 0; font-size: var(--fs-micro); line-height: 1.5; color: var(--gris-600); }
.membre__liens { margin-top: auto; display: flex; gap: 14px; }
.membre__liens a {
  font-size: var(--fs-micro); font-style: italic;
  text-decoration: underline; text-underline-offset: 3px;
}
.membre__liens a:hover { color: var(--bleu); }

/* ==========================================================================
   Questions fréquentes
   ========================================================================== */
.faq { max-width: 900px; margin-inline: auto; padding-block: 20px 0; }
.faq__item { border-bottom: 1px solid var(--gris-200); }
.faq__bouton {
  width: 100%; text-align: left;
  display: flex; align-items: flex-start; gap: 24px;
  padding: 20px 0;
  font-size: var(--fs-titre-sm); font-weight: 500; line-height: 1.35;
}
.faq__bouton:hover { color: var(--bleu); }
.faq__bouton span { flex: 1; }
.faq__bouton::after {
  content: ''; flex: none; margin-top: 6px;
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.faq__item.est-ouvert .faq__bouton::after { transform: rotate(225deg); }

.faq__reponse {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .36s cubic-bezier(.22, 1, .36, 1);
}
.faq__item.est-ouvert .faq__reponse { grid-template-rows: 1fr; }
.faq__reponse > div { overflow: hidden; }
.faq__reponse p {
  margin: 0 0 14px; font-size: var(--fs-meta); line-height: 1.6; color: #2E2E2E;
}
.faq__reponse p:last-child { padding-bottom: 20px; margin-bottom: 0; }
.faq__reponse a { color: var(--bleu); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Page rubrique
   ========================================================================== */
.rubrique-tete { padding-block: 26px 0; }
.rubrique-tete__titre {
  margin: 0 0 6px; font-size: var(--fs-section); line-height: 1.05;
  font-weight: 700; letter-spacing: -.025em;
}
.rubrique-tete__titre em { font-style: normal; color: var(--bleu); }
.rubrique-tete__desc {
  margin: 0; max-width: 60ch; font-size: 22px; line-height: 1.35; font-weight: 400;
}

.collections {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--col-gap)) / 4.3);
  gap: var(--col-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-block: 34px 0;
}
.collections::-webkit-scrollbar { display: none; }
.collection { scroll-snap-align: start; }
.collection__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--gris-100); }
.collection__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.collection:hover .collection__media img { transform: scale(1.04); }
.collection__nom { margin: 10px 0 2px; font-size: var(--fs-titre-sm); font-weight: 500; }
.collection__compte { margin: 0; font-size: var(--fs-micro); color: var(--gris-600); }

/* barre de filtres */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filtre {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 15px;
  border: 1px solid var(--gris-200); border-radius: 999px;
  font-size: var(--fs-meta);
  transition: border-color .22s ease, background .22s ease, color .22s ease;
}
.filtre:hover { border-color: var(--bleu); color: var(--bleu); }
.filtre.est-actif { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.filtre__fleche {
  width: 7px; height: 7px;
  border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.plus { display: flex; justify-content: center; padding-block: 34px 0; }

@media (max-width: 1000px) {
  .colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .equipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collections { grid-auto-columns: calc((100% - var(--col-gap)) / 2.3); }
}

@media (max-width: 680px) {
  .page-tete { padding-block-start: 28px; }
  .page-tete__chapo { font-size: 16px; }
  .colonnes { grid-template-columns: 1fr; padding-block-start: 34px; }
  .colonne__titre { font-size: 22px; }
  .equipe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .membre__carte { padding: 14px 15px; }
  .membre__nom, .membre__role { font-size: 16px; }
  .membre__bio { display: none; }
  .faq__bouton { font-size: 15px; padding: 16px 0; gap: 16px; }
  .rubrique-tete__desc { font-size: 17px; }
  .collections { grid-auto-columns: 62%; }
}

/* ==========================================================================
   Favori : remplissage progressif et confirmation
   ========================================================================== */
.favori { position: relative; }
.favori svg { overflow: visible; }
.favori .remplissage {
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}
.favori[aria-pressed="true"] .remplissage { transform: scaleY(1); }
.favori[aria-pressed="true"] { animation: soubresaut .42s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes soubresaut {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* message de confirmation */
.note {
  position: fixed; left: 50%; bottom: 28px; z-index: 170;
  transform: translate(-50%, 16px);
  background: var(--noir); color: var(--blanc);
  font-size: var(--fs-meta); font-weight: 500;
  padding: 12px 22px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}
.note.est-visible { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Carrousel : bord dégradé et flèches désactivées
   ========================================================================== */
.rail-boite { position: relative; }
.rail-boite::before,
.rail-boite::after {
  content: '';
  position: absolute; top: 0; bottom: 40px; width: 90px;
  pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity .35s ease;
}
.rail-boite::before {
  left: 0;
  background: linear-gradient(90deg, var(--blanc) 0%, rgba(255,255,255,0) 100%);
}
.rail-boite::after {
  right: 0;
  background: linear-gradient(270deg, var(--blanc) 0%, rgba(255,255,255,0) 100%);
}
.rail-boite.a-gauche::before { opacity: 1; }
.rail-boite.a-droite::after  { opacity: 1; }

.fleches button {
  transition: color .25s ease, opacity .25s ease;
}
.fleches button[disabled] { opacity: .28; cursor: default; }
.fleches button[disabled]:hover { color: var(--gris-600); }

/* ==========================================================================
   Images : arrivée en fondu sur une teinte moyenne
   ========================================================================== */
img[data-fond] {
  background-color: var(--fond, var(--gris-100));
  opacity: 0;
  transition: opacity .4s ease;
}
img[data-fond].est-chargee { opacity: 1; }

/* ==========================================================================
   Retour en haut
   ========================================================================== */
.remonter {
  position: fixed; right: 24px; bottom: 24px; z-index: 100;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--bleu); color: var(--blanc);
  display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(18, 64, 128, .3);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1), background .22s ease;
}
.remonter.est-visible { opacity: 1; transform: none; pointer-events: auto; }
.remonter:hover { background: var(--bleu-fonce); }
.remonter svg { width: 14px; height: 14px; fill: currentColor; }

@media (max-width: 680px) {
  .remonter { right: 14px; bottom: 14px; width: 40px; height: 40px; }
  .note { bottom: 18px; font-size: var(--fs-micro); padding: 10px 18px; }
}

/* ==========================================================================
   Contenu premium
   ========================================================================== */
.premium {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 11px;
  background: var(--bleu); color: var(--blanc);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px;
  vertical-align: middle;
}
.premium::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--bleu-clair);
}

/* le texte suivant existe mais reste illisible */
.prose__coupe {
  position: relative;
  filter: blur(5px);
  opacity: .55;
  user-select: none;
  pointer-events: none;
  max-height: 260px;
  overflow: hidden;
  margin-bottom: -40px;
}
.prose__coupe::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--blanc) 88%);
}

.paywall { position: relative; z-index: 2; margin: 0 0 12px; }
.paywall__boite {
  border: 1px solid var(--gris-200);
  border-top: 3px solid var(--bleu);
  padding: 32px 36px 34px;
  text-align: center;
  background: var(--blanc);
  box-shadow: 0 14px 40px rgba(18, 64, 128, .10);
}
.paywall__marque { margin: 0 0 14px; }
.paywall__titre {
  margin: 0 0 10px; font-size: 27px; font-weight: 700; letter-spacing: -.015em;
  line-height: 1.15;
}
.paywall__texte {
  margin: 0 auto 22px; max-width: 42ch;
  font-size: var(--fs-meta); line-height: 1.55; color: var(--gris-600);
  text-align: center;
}
.paywall__boite > * { text-align: center; }
.paywall__offres { text-align: start; }
.paywall__offres {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 0 0 18px;
}
.offre {
  border: 1px solid var(--gris-200); padding: 15px 12px 17px;
  text-align: center; cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.offre:hover { border-color: var(--bleu); background: var(--bleu-pale); }
.offre.est-choisie { border-color: var(--bleu); border-width: 2px; padding: 14px 11px 16px; }
.offre__nom { display: block; font-size: var(--fs-meta); font-weight: 500; }
.offre__prix { display: block; font-size: 27px; font-weight: 700; margin: 3px 0 2px; letter-spacing: -.02em; }
.offre__detail { display: block; font-size: var(--fs-micro); color: var(--gris-600); }
.offre__gain {
  display: inline-block; margin-top: 7px; padding: 2px 9px;
  background: var(--bleu-pale); color: var(--bleu);
  font-size: 11px; font-weight: 700; border-radius: 999px;
}
.paywall__action { width: 100%; }
.paywall__lien {
  margin: 14px 0 0;
  font-size: var(--fs-micro); color: var(--gris-600);
}
.paywall__lien a { color: var(--bleu); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 680px) {
  .paywall__boite { padding: 24px 16px 26px; }
  .paywall__titre { font-size: 21px; }
  .paywall__offres { grid-template-columns: 1fr; }
  .prose__coupe { max-height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .favori .remplissage, .note, .remonter, img[data-fond] { transition: none; }
  .favori[aria-pressed="true"] { animation: none; }
}

/* ==========================================================================
   Menu mobile
   ========================================================================== */
.barre__burger span {
  transition: background .2s ease .12s;
}
.barre__burger span::before,
.barre__burger span::after {
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), top .2s ease .14s;
}
.barre__burger[aria-expanded="true"] span { background: transparent !important; }
.barre__burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.barre__burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.tiroir {
  position: fixed; inset: 0; z-index: 58;
  background: var(--bleu);
  color: var(--blanc);
  padding: calc(var(--barre-haut) + var(--barre-bas) + 18px) var(--gouttiere) 34px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s .3s;
  display: none;
}
.tiroir.est-ouvert { opacity: 1; visibility: visible; transition: opacity .3s ease; }

.tiroir__rubrique {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-size: 26px; font-weight: 500; letter-spacing: -.01em;
  opacity: 0; transform: translateY(14px);
}
.tiroir.est-ouvert .tiroir__rubrique {
  opacity: 1; transform: none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.tiroir.est-ouvert .tiroir__rubrique:nth-child(1) { transition-delay: .04s; }
.tiroir.est-ouvert .tiroir__rubrique:nth-child(2) { transition-delay: .08s; }
.tiroir.est-ouvert .tiroir__rubrique:nth-child(3) { transition-delay: .12s; }
.tiroir.est-ouvert .tiroir__rubrique:nth-child(4) { transition-delay: .16s; }
.tiroir.est-ouvert .tiroir__rubrique:nth-child(5) { transition-delay: .20s; }
.tiroir.est-ouvert .tiroir__rubrique:nth-child(6) { transition-delay: .24s; }
.tiroir.est-ouvert .tiroir__rubrique:nth-child(7) { transition-delay: .28s; }
.tiroir__rubrique:hover { text-decoration: none; color: var(--bleu-clair); }

.tiroir__bas {
  margin-top: 30px;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-size: var(--fs-meta);
}
.tiroir__bas a { color: #CFE0F2; }
.tiroir__cta { margin-top: 26px; }
.tiroir__cta .bouton {
  width: 100%; background: var(--blanc); color: var(--bleu);
  border-color: var(--blanc);
}

@media (max-width: 1000px) {
  .tiroir { display: block; }
  body.tiroir-ouvert { overflow: hidden; }
}

/* ==========================================================================
   Direct : titre défilant et compte à rebours
   ========================================================================== */
.direct__piste { min-width: 0; overflow: hidden; flex: 1; }
.direct__titre {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}
.direct__titre.defile { animation: titre-defile var(--duree-titre, 18s) linear infinite; }
@keyframes titre-defile {
  0%, 8%    { transform: translateX(0); }
  92%, 100% { transform: translateX(var(--course, 0px)); }
}

.direct__compte {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  font-size: var(--fs-micro); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.direct__compte span { opacity: .75; }

/* ==========================================================================
   Bande de cotations
   ========================================================================== */
.cotations {
  background: var(--noir); color: var(--blanc);
  height: 34px;
  overflow: hidden;
  position: relative;
  contain: layout paint size;
  width: 100%;
  max-width: 100vw;
}
.cotations__piste {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; height: 100%;
  white-space: nowrap; will-change: transform;
}
.cotations__groupe { display: flex; align-items: center; flex: none; }

.cote {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 0 20px;
  font-size: var(--fs-micro);
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.cote__nom { font-weight: 500; color: #E4E4E4; }
.cote__valeur { font-variant-numeric: tabular-nums; color: var(--blanc); }
.cote__delta { font-variant-numeric: tabular-nums; font-weight: 500; }
.cote__delta.monte { color: #3FCF7F; }
.cote__delta.baisse { color: #FF6B6B; }
.cote__delta.monte::before { content: '▲ '; font-size: 8px; }
.cote__delta.baisse::before { content: '▼ '; font-size: 8px; }

.barre.est-compacte + .cotations,
.cotations.est-repliee { height: 0; }
.cotations { transition: height .28s cubic-bezier(.4, 0, .2, 1); }

@media (max-width: 680px) { .cotations { height: 30px; } }

/* ==========================================================================
   Fraîcheur des articles
   ========================================================================== */
.frais {
  display: inline-flex; align-items: center;
  margin-left: 7px; padding: 1px 7px;
  background: var(--bleu); color: var(--blanc);
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  border-radius: 999px; vertical-align: 1px;
  font-style: normal;
}

/* ==========================================================================
   Recherche
   ========================================================================== */
.chercher {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  transition: background .22s ease, color .22s ease;
}
.chercher svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.chercher:hover { background: var(--bleu-pale); color: var(--bleu); }
.barre.est-compacte .chercher { color: var(--blanc); }
.barre.est-compacte .chercher:hover { background: rgba(255,255,255,.18); color: var(--blanc); }

.recherche {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility 0s .28s;
  overflow-y: auto;
}
.recherche.est-ouverte { opacity: 1; visibility: visible; transition: opacity .28s ease; }

.recherche__inner {
  max-width: 900px; margin-inline: auto;
  padding: 90px var(--gouttiere) 60px;
}
.recherche__fermer {
  position: absolute; top: 26px; right: 30px;
  width: 40px; height: 40px; display: grid; place-items: center;
  font-size: 26px; line-height: 1; color: var(--gris-600);
}
.recherche__fermer:hover { color: var(--noir); }

.recherche__champ {
  display: flex; align-items: center; gap: 14px;
  border-bottom: 2px solid var(--noir);
  padding-bottom: 12px;
}
.recherche__champ svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--noir); stroke-width: 1.7; }
.recherche__champ input {
  flex: 1; border: 0; background: none;
  font-family: inherit; font-size: 34px; font-weight: 500;
  letter-spacing: -.02em; color: var(--noir);
  padding: 0;
}
.recherche__champ input:focus { outline: none; }
.recherche__champ input::placeholder { color: var(--gris-400); }

.recherche__compte {
  margin: 16px 0 0; font-size: var(--fs-meta); color: var(--gris-600);
  font-variant-numeric: tabular-nums;
}

.recherche__suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.recherche__suggestions button {
  padding: 7px 15px; border: 1px solid var(--gris-200); border-radius: 999px;
  font-size: var(--fs-meta);
  transition: border-color .22s ease, color .22s ease, background .22s ease;
}
.recherche__suggestions button:hover { border-color: var(--bleu); color: var(--bleu); background: var(--bleu-pale); }

.resultats { margin-top: 30px; }
.resultat {
  display: grid; grid-template-columns: 110px 1fr; gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--gris-200);
  opacity: 0; transform: translateY(8px);
  animation: monte .34s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes monte { to { opacity: 1; transform: none; } }
.resultat img { width: 110px; height: 74px; object-fit: cover; }
.resultat__meta { font-size: var(--fs-micro); font-style: italic; color: var(--gris-600); margin: 0 0 5px; }
.resultat__titre { margin: 0 0 6px; font-size: var(--fs-titre-sm); font-weight: 500; line-height: 1.3; }
.resultat__titre mark { background: var(--bleu-pale); color: var(--bleu); padding: 0 2px; }
.resultat__chapo { margin: 0; font-size: var(--fs-meta); color: var(--gris-600); line-height: 1.45; }

.rien { padding: 40px 0; text-align: center; }
.rien__titre { margin: 0 0 8px; font-size: 22px; font-weight: 500; }
.rien__texte { margin: 0; font-size: var(--fs-meta); color: var(--gris-600); }

@media (max-width: 680px) {
  .recherche__inner { padding-top: 74px; }
  .recherche__champ input { font-size: 22px; }
  .resultat { grid-template-columns: 84px 1fr; gap: 12px; }
  .resultat img { width: 84px; height: 58px; }
}

/* ==========================================================================
   Commentaires
   ========================================================================== */
.commentaires { max-width: 690px; margin: 0 auto; padding-block: 10px 0; }
.commentaires__tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; margin-bottom: 8px;
}
.commentaires__titre { margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -.015em; }
.commentaires__regle {
  margin: 0 0 22px; font-size: var(--fs-micro); color: var(--gris-600); line-height: 1.5;
}
.commentaires__regle a { color: var(--bleu); text-decoration: underline; text-underline-offset: 2px; }

.saisie { border: 1px solid var(--gris-200); padding: 16px 18px 18px; margin-bottom: 26px; }
.saisie textarea {
  width: 100%; border: 0; background: none; resize: vertical;
  font-family: inherit; font-size: var(--fs-meta); line-height: 1.5;
  min-height: 62px; color: var(--noir);
}
.saisie textarea:focus { outline: none; }
.saisie__bas { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; }
.saisie__compte { font-size: var(--fs-micro); color: var(--gris-400); font-variant-numeric: tabular-nums; }
.saisie .bouton { height: 38px; padding: 0 22px; font-size: var(--fs-meta); }
.saisie .bouton[disabled] { opacity: .4; cursor: default; }

.commentaire { padding: 18px 0; border-top: 1px solid var(--gris-200); }
.commentaire__tete { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.commentaire__pastille {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--bleu-pale); color: var(--bleu);
  display: grid; place-items: center;
  font-size: var(--fs-micro); font-weight: 700;
}
.commentaire__nom { font-size: var(--fs-meta); font-weight: 500; }
.commentaire__date { font-size: var(--fs-micro); color: var(--gris-400); }
.commentaire__corps { margin: 0 0 10px; font-size: var(--fs-meta); line-height: 1.55; }
.commentaire__actions { display: flex; align-items: center; gap: 18px; }
.commentaire__actions button {
  font-size: var(--fs-micro); color: var(--gris-600);
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .22s ease;
}
.commentaire__actions button:hover { color: var(--bleu); }
.commentaire__actions button.est-actif { color: var(--bleu); font-weight: 500; }

.commentaire--attente {
  border-left: 3px solid var(--bleu); padding-left: 16px; background: var(--bleu-pale);
  padding-top: 14px; padding-bottom: 14px; border-top: 0;
}
.commentaire--attente .commentaire__etat {
  display: inline-block; margin-top: 8px;
  font-size: var(--fs-micro); font-style: italic; color: var(--bleu);
}

/* ==========================================================================
   Espaces publicitaires
   ========================================================================== */
.pub {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-inline: auto;
}
.pub__mention {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gris-400);
}
.pub__cadre {
  display: grid; place-items: center;
  width: 100%; background: var(--gris-100);
  border: 1px dashed var(--gris-200);
  color: var(--gris-400); font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
}
.pub--banniere { max-width: 970px; padding-block: 34px; }
.pub--banniere .pub__cadre { height: 250px; max-width: 970px; }
.pub--pied .pub__cadre { height: 90px; max-width: 728px; }
.pub--pied { max-width: 728px; padding-block: 28px; }
.pub--pave .pub__cadre { height: 250px; max-width: 300px; }
.pub--grand .pub__cadre { height: 600px; max-width: 300px; }
.pub--colonne { margin-top: 26px; }

@media (max-width: 680px) {
  .pub--banniere .pub__cadre { height: 100px; }
  .pub--pied .pub__cadre { height: 100px; }
  .pub--banniere, .pub--pied { padding-block: 22px; }
}

/* ==========================================================================
   Web TV
   ========================================================================== */
.antenne {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--noir); color: var(--blanc);
}
.antenne video, .antenne img { width: 100%; height: 100%; object-fit: cover; }
.antenne__voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.8) 100%);
}
.antenne__etat {
  position: absolute; top: 20px; left: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px; border-radius: 999px;
  background: var(--rouge-live); color: var(--blanc);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .03em;
}
.antenne__etat i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--blanc);
  animation: battement 2s ease-in-out infinite;
}
.antenne__spectateurs {
  position: absolute; top: 20px; right: 22px;
  font-size: var(--fs-micro); font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,.45); padding: 5px 12px; border-radius: 999px;
}
.antenne__bas { position: absolute; left: 26px; right: 26px; bottom: 24px; }
.antenne__titre { margin: 0 0 8px; font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.antenne__sous { margin: 0; font-size: var(--fs-meta); color: #DCE8F5; }

.grille-tv { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }

.programme__ligne {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: 16px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--gris-200);
  transition: background .3s ease;
}
.programme__ligne:first-child { border-top: 1px solid var(--gris-200); }
.programme__ligne.est-en-cours { background: var(--bleu-pale); }
.programme__heure { font-size: var(--fs-meta); font-weight: 500; font-variant-numeric: tabular-nums; }
.programme__nom { font-size: var(--fs-meta); font-weight: 500; }
.programme__desc { margin: 2px 0 0; font-size: var(--fs-micro); color: var(--gris-600); }
.programme__badge {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--rouge-live);
}

@media (max-width: 1000px) {
  .grille-tv { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 680px) {
  .antenne__titre { font-size: 20px; }
  .antenne__bas { left: 14px; right: 14px; bottom: 14px; }
  .antenne__etat, .antenne__spectateurs { top: 12px; }
  .antenne__etat { left: 12px; }
  .antenne__spectateurs { right: 12px; }
  .commentaires__titre { font-size: 21px; }
}

/* ==========================================================================
   Réglages fins
   ========================================================================== */

/* --- survols d'images : plus lents, plus doux --- */
.carte-image img,
.tuile__media img,
.carte__img,
.collection__media img,
.membre img,
.resultat img {
  transition: transform 1.05s cubic-bezier(.16, .84, .28, 1);
}
.carte-image:hover img,
.tuile:hover .tuile__media img,
.carte:hover .carte__img,
.collection:hover .collection__media img,
.membre:hover img { transform: scale(1.035); }
.tuile__media::after { transition: opacity .8s ease; }
.carte-image__voile, .vedette__voile { transition: opacity .8s ease; }

/* --- les masques ne coupent plus les jambages --- */
.masque {
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

/* --- boutons de lecture : tous réactifs --- */
.bouton-lecture,
.liste__play,
.direct__play {
  transition: transform .42s cubic-bezier(.22, 1, .36, 1),
              background .34s ease, color .34s ease, border-color .34s ease,
              box-shadow .34s ease;
}
.bouton-lecture:hover,
.liste__play:hover,
.direct__play:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.liste__play:hover { background: var(--bleu); border-color: var(--bleu); }
.liste__play:hover svg { fill: var(--blanc); }
.bouton-lecture:active,
.liste__play:active { transform: scale(1.02); }

/* --- carte bleue de la grille --- */
.carte-texte {
  transition: background .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1),
              box-shadow .5s ease;
}
.carte-texte:hover {
  background: var(--bleu-fonce);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(18, 64, 128, .22);
}

/* --- dégradé du carrousel, plus discret --- */
.rail-boite::before,
.rail-boite::after { width: 54px; }
.rail-boite::before {
  background: linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 100%);
}
.rail-boite::after {
  background: linear-gradient(270deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 100%);
}

/* --- pastille « Nouveau » : elle tient sur la ligne --- */
.liste__ligne { grid-template-columns: 44px 68px 1fr 170px 132px 90px 24px; }
.liste__date { white-space: nowrap; }
.liste__date .frais { margin-left: 8px; }
@media (max-width: 1000px) {
  .liste__ligne { grid-template-columns: 40px 60px 1fr 120px 118px 24px; }
}

/* --- pied : logo plus grand, champ réactif --- */
.pied__marque img { height: 44px; }
.pied__bas { align-items: center; }

.infolettre {
  border-bottom-color: rgba(255, 255, 255, .4);
  transition: border-color .34s ease;
}
.infolettre:hover,
.infolettre:focus-within { border-bottom-color: var(--blanc); }
.infolettre input { transition: color .3s ease; }
.infolettre button { transition: color .3s ease, transform .34s cubic-bezier(.22,1,.36,1); }
.infolettre:hover button,
.infolettre:focus-within button { color: var(--blanc); transform: translateX(3px); }

/* --- encarts bleus : titres blancs, champs réactifs --- */
.fiche--pleine .fiche__libelle { color: var(--blanc); font-weight: 700; }
.contact--pleine .contact__titre { color: var(--blanc); font-weight: 700; }

.champ input,
.champ textarea {
  transition: border-color .32s ease, background .32s ease;
  padding-inline: 2px;
}
.champ:hover input,
.champ:hover textarea { border-bottom-color: var(--bleu); }
.contact--pleine .champ:hover input,
.contact--pleine .champ:hover textarea { border-bottom-color: var(--blanc); }
.champ input:focus,
.champ textarea:focus { background: rgba(0, 0, 0, .03); }
.contact--pleine .champ input:focus,
.contact--pleine .champ textarea:focus { background: rgba(255, 255, 255, .12); }
.contact--pleine .champ input::placeholder,
.contact--pleine .champ textarea::placeholder { color: #A9C4E4; }

.saisie { transition: border-color .32s ease; }
.saisie:hover, .saisie:focus-within { border-color: var(--bleu); }

/* --- filtres réellement actionnables --- */
.filtre { cursor: pointer; }
.carte.est-masquee { display: none; }

/* --- Web TV : lignes de la grille --- */
.programme__ligne {
  position: relative;
  transition: background .4s ease, padding-left .4s cubic-bezier(.22,1,.36,1);
  padding-inline: 10px;
  margin-inline: -10px;
}
.programme__ligne:hover { background: var(--bleu-pale); padding-left: 20px; }
.programme__ligne:hover .programme__nom { color: var(--bleu); }
.programme__nom { transition: color .34s ease; }

/* --- pastille d'antenne, style présence --- */
.antenne__etat {
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  color: var(--blanc);
  font-weight: 500; letter-spacing: .04em;
  padding: 6px 15px;
}
.antenne__etat i {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rouge-live);
  animation: none;
}
.antenne__etat i::after {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--rouge-live);
  animation: halo 2.2s ease-out infinite;
}
@keyframes halo {
  0%   { transform: scale(1); opacity: .7; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}
.programme__badge {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--bleu); font-weight: 700;
}
.programme__badge:not(:empty)::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rouge-live);
  box-shadow: 0 0 0 3px rgba(232, 35, 42, .18);
}

/* --- commentaires du direct --- */
.flux {
  position: absolute; left: 26px; bottom: 96px;
  width: min(360px, 46%);
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 8px;
  pointer-events: none;
  z-index: 3;
}
.flux__mot {
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(6px);
  border-left: 2px solid var(--bleu-clair);
  padding: 9px 13px;
  font-size: var(--fs-micro); line-height: 1.45;
  color: #F0F4FA;
  opacity: 0; transform: translateY(8px);
  animation: flux-entree .7s cubic-bezier(.22, 1, .36, 1) forwards;
}
.flux__mot.part { animation: flux-sortie .7s ease forwards; }
.flux__nom { display: block; font-weight: 700; color: var(--bleu-clair); margin-bottom: 2px; }
@keyframes flux-entree { to { opacity: 1; transform: none; } }
@keyframes flux-sortie { to { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 680px) {
  .flux { left: 14px; bottom: 76px; width: 70%; }
  .flux__mot { font-size: 11px; padding: 7px 10px; }
  .pied__marque img { height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .flux__mot { animation: none; opacity: 1; transform: none; }
  .antenne__etat i::after { animation: none; }
}

/* Très petits écrans : le direct se réduit au strict nécessaire */
@media (max-width: 420px) {
  .direct { min-width: 0; }
  .direct__piste { display: none; }
  .direct__compte { margin-left: 2px; }
  .direct__compte span { display: none; }
}
@media (max-width: 340px) {
  .direct__compte { display: none; }
}

/* La liste reprend sa forme courte sur mobile */
@media (max-width: 680px) {
  .liste__ligne { grid-template-columns: 34px 54px 1fr 22px; }
  .liste__rubrique, .liste__date { display: none; }
}

/* ==========================================================================
   Multilingue
   ========================================================================== */
@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/IBMPlexSansArabic-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/IBMPlexSansArabic-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

html[lang="ar"] body {
  font-family: 'Plex Arabic', var(--font);
  line-height: 1.7;
}
html[lang="ar"] .section__titre,
html[lang="ar"] .heros__titre,
html[lang="ar"] .vedette__titre,
html[lang="ar"] .article-tete__titre,
html[lang="ar"] .page-tete__titre,
html[lang="ar"] .rubrique-tete__titre { letter-spacing: 0; line-height: 1.25; }
html[lang="ar"] .prose p { line-height: 1.85; }
html[lang="ar"] .liste__titre,
html[lang="ar"] .carte__titre,
html[lang="ar"] .tuile__titre { line-height: 1.5; }

/* chiffres, heures et cotations restent de gauche à droite */
html[dir="rtl"] .jauge,
html[dir="rtl"] .cotations,
html[dir="rtl"] .progression,
html[dir="rtl"] .lecture,
html[dir="rtl"] .offre__prix,
html[dir="rtl"] .direct__compte,
html[dir="rtl"] .programme__heure,
html[dir="rtl"] .saisie__compte { direction: ltr; }
html[dir="rtl"] .programme__heure { text-align: right; }

/* les triangles de lecture ne se retournent pas */
html[dir="rtl"] .bouton-lecture svg,
html[dir="rtl"] .liste__play svg,
html[dir="rtl"] .direct__play svg { transform: scaleX(1); }

/* les flèches, si */
html[dir="rtl"] .fleches button { transform: scaleX(-1); }
html[dir="rtl"] .bandeau__piste { direction: ltr; }
html[dir="rtl"] .nav__lien::after { transform: translateY(-2px) rotate(45deg); }

/* sélecteur de langue */
.langues { display: flex; align-items: center; gap: 2px; flex: none; }
.langue {
  padding: 4px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: rgba(255, 255, 255, .62);
  transition: color .25s ease, background .25s ease;
}
.langue:hover { color: var(--blanc); text-decoration: none; }
.langue.est-active { background: rgba(255, 255, 255, .2); color: var(--blanc); }

@media (max-width: 420px) { .langues .langue { padding: 4px 6px; } }

/* ==========================================================================
   Panneau de compte
   ========================================================================== */
.voile-panneau {
  position: fixed; inset: 0; z-index: 165;
  background: rgba(10, 24, 46, .5);
  opacity: 0; visibility: hidden;
  transition: opacity .34s ease, visibility 0s .34s;
}
.voile-panneau.est-ouvert { opacity: 1; visibility: visible; transition: opacity .34s ease; }

.panneau {
  position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 166;
  width: min(430px, 100%);
  background: var(--blanc);
  box-shadow: -20px 0 50px rgba(0, 0, 0, .18);
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
  overflow-y: auto;
  padding: 34px 34px 40px;
}
html[dir="rtl"] .panneau { transform: translateX(-100%); box-shadow: 20px 0 50px rgba(0,0,0,.18); }
.panneau.est-ouvert { transform: none; }

.panneau__fermer {
  position: absolute; top: 20px; inset-inline-end: 22px;
  width: 34px; height: 34px; display: grid; place-items: center;
  font-size: 24px; line-height: 1; color: var(--gris-600);
}
.panneau__fermer:hover { color: var(--noir); }

.panneau__logo { display: block; height: 26px; width: auto; margin-bottom: 26px; }
.panneau__titre { margin: 0 0 8px; font-size: 26px; font-weight: 700; letter-spacing: -.015em; }
.panneau__intro { margin: 0 0 24px; font-size: var(--fs-meta); color: var(--gris-600); line-height: 1.5; }

.panneau__etape { display: none; }
.panneau__etape.est-active { display: block; animation: monte .34s cubic-bezier(.22,1,.36,1) forwards; opacity: 0; }

.panneau__rappel {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bleu-pale); padding: 11px 14px; margin-bottom: 20px;
  font-size: var(--fs-meta);
}
.panneau__rappel button { font-size: var(--fs-micro); color: var(--bleu); text-decoration: underline; text-underline-offset: 2px; }
.panneau .bouton { width: 100%; margin-top: 6px; }
.panneau__lien { display: block; margin-top: 14px; text-align: center; font-size: var(--fs-micro); color: var(--gris-600); }
.panneau__lien a, .panneau__lien button { color: var(--bleu); text-decoration: underline; text-underline-offset: 2px; font-size: var(--fs-micro); }

.panneau__avantages { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--gris-200); }
.panneau__avantages li {
  position: relative; padding-inline-start: 22px; margin-bottom: 9px;
  font-size: var(--fs-meta); color: var(--gris-900);
}
.panneau__avantages li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 7px;
  width: 9px; height: 5px; border-inline-start: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu);
  transform: rotate(-45deg);
}

/* pastille de compte dans la barre */
.moi {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--blanc); color: var(--bleu);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  transition: transform .3s cubic-bezier(.22,1,.36,1), background .25s ease;
}
.moi:hover { transform: scale(1.06); background: var(--bleu-clair); text-decoration: none; }

/* ==========================================================================
   Espace personnel
   ========================================================================== */
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--gris-200); margin-bottom: 30px; flex-wrap: wrap; }
.onglet {
  position: relative; padding: 13px 18px;
  font-size: var(--fs-meta); font-weight: 500; color: var(--gris-600);
  transition: color .28s ease;
}
.onglet::after {
  content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
  background: var(--bleu); transform: scaleX(0); transform-origin: center;
  transition: transform .36s cubic-bezier(.22, 1, .36, 1);
}
.onglet:hover { color: var(--noir); }
.onglet.est-actif { color: var(--bleu); }
.onglet.est-actif::after { transform: scaleX(1); }

.volet { display: none; }
.volet.est-actif { display: block; animation: monte .36s cubic-bezier(.22,1,.36,1) forwards; opacity: 0; }

.resume {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin-bottom: 30px;
}
.resume__case { border: 1px solid var(--gris-200); padding: 18px 20px; }
.resume__nombre { display: block; font-size: 32px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.resume__label { display: block; font-size: var(--fs-micro); color: var(--gris-600); margin-top: 2px; }

.reglage {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--gris-200);
}
.reglage__nom { display: block; font-size: var(--fs-meta); font-weight: 500; }
.reglage__desc { margin: 3px 0 0; font-size: var(--fs-micro); color: var(--gris-600); line-height: 1.45; }

@media (max-width: 680px) {
  .resume { grid-template-columns: 1fr; }
  .panneau { padding: 28px 20px 34px; }
  .panneau__titre { font-size: 21px; }
}

/* ==========================================================================
   Abonnement
   ========================================================================== */
.etapes { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; flex-wrap: wrap; }
.etape {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-meta); color: var(--gris-400);
}
.etape__num {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid currentColor; display: grid; place-items: center;
  font-size: var(--fs-micro); font-weight: 700;
}
.etape.est-active { color: var(--bleu); font-weight: 500; }
.etape.est-faite { color: var(--bleu); }
.etape.est-faite .etape__num { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.etapes__trait { flex: 1; min-width: 20px; height: 1px; background: var(--gris-200); }

.formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.formule {
  border: 1px solid var(--gris-200); padding: 28px 26px 30px;
  display: flex; flex-direction: column;
  cursor: pointer; text-align: start;
  transition: border-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.formule:hover { border-color: var(--bleu); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(18,64,128,.12); }
.formule.est-choisie { border-color: var(--bleu); border-width: 2px; padding: 27px 25px 29px; }
.formule__ruban {
  align-self: flex-start; margin-bottom: 12px;
  background: var(--bleu); color: var(--blanc);
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 3px 10px; border-radius: 999px;
}
.formule__nom { font-size: 21px; font-weight: 700; margin: 0 0 4px; }
.formule__cible { margin: 0 0 18px; font-size: var(--fs-micro); color: var(--gris-600); }
.formule__prix { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.formule__unite { font-size: var(--fs-meta); color: var(--gris-600); margin: 6px 0 20px; }
.formule__liste { margin: 0 0 22px; }
.formule__liste li {
  position: relative; padding-inline-start: 22px; margin-bottom: 8px;
  font-size: var(--fs-meta); line-height: 1.45;
}
.formule__liste li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 7px;
  width: 9px; height: 5px; border-inline-start: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu);
  transform: rotate(-45deg);
}
.formule .bouton { margin-top: auto; width: 100%; }

.reprise {
  display: flex; align-items: center; gap: 12px;
  background: var(--bleu-pale); padding: 14px 18px; margin-bottom: 26px;
  font-size: var(--fs-meta);
}
.reprise svg { width: 17px; height: 17px; flex: none; fill: var(--bleu); }

.paiement { max-width: 560px; }
.paiement__resume {
  border: 1px solid var(--gris-200); padding: 20px 22px; margin-bottom: 24px;
}
.paiement__ligne { display: flex; justify-content: space-between; gap: 16px; font-size: var(--fs-meta); padding: 5px 0; }
.paiement__ligne--total { border-top: 1px solid var(--gris-200); margin-top: 8px; padding-top: 12px; font-weight: 700; font-size: var(--fs-titre-sm); }
.paiement__note {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--fs-micro); color: var(--gris-600); line-height: 1.5; margin-top: 16px;
}

.fini { text-align: center; padding: 40px 0; }
.fini__rond {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 22px;
  background: var(--bleu); display: grid; place-items: center;
  animation: soubresaut .5s cubic-bezier(.3, 1.5, .5, 1);
}
.fini__rond svg { width: 26px; height: 20px; fill: none; stroke: var(--blanc); stroke-width: 2.6; }

@media (max-width: 900px) { .formules { grid-template-columns: 1fr; } }

/* Web TV : titre en haut, commentaires en bas à gauche */
.antenne__haut {
  position: absolute; inset-inline-start: 26px; inset-inline-end: 26px; top: 62px;
  max-width: 62%;
}
.antenne__voile {
  background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.12) 34%, rgba(0,0,0,.05) 58%, rgba(0,0,0,.66) 100%);
}
.flux {
  inset-inline-start: 26px;
  bottom: 24px;
  top: auto;
}
@media (max-width: 680px) {
  .antenne__haut { inset-inline-start: 14px; inset-inline-end: 14px; top: 48px; max-width: none; }
  .flux { inset-inline-start: 14px; bottom: 14px; }
}

/* Espace personnel et arabe : rien ne déborde sur petit écran */
@media (max-width: 680px) {
  .onglets { gap: 0; }
  .onglet { padding: 11px 12px; font-size: var(--fs-micro); }
  .resume__case { padding: 14px 16px; }
  .resume__nombre { font-size: 26px; }
  .volet[data-volet="favoris"] .grille-trois { grid-template-columns: 1fr !important; gap: 0 !important; }
  .volet[data-volet="historique"] .liste__ligne { grid-template-columns: 34px 54px 1fr 22px; }
  .volet[data-volet="historique"] .jauge { display: none; }
  .paiement__ligne { font-size: var(--fs-micro); }
  .etapes { gap: 6px; }
  .etape { font-size: var(--fs-micro); }
}
html[dir="rtl"] .prose__coupe,
html[dir="rtl"] .article-tete,
html[dir="rtl"] .commentaires { max-width: 100%; }
html[dir="rtl"] .etiquettes a { direction: ltr; }

/* La barre ne s'élargit jamais, quelle que soit la langue */
.barre__inner { min-width: 0; }
.barre__fin { min-width: 0; }
.barre__logo { min-width: 0; }
@media (max-width: 420px) {
  .langues { gap: 0; }
  .langue { padding: 4px 5px; font-size: 10px; }
  .cta { padding: 0 12px; }
  .barre__inner { gap: 8px; }
}

/* Le compteur de lecture reste dans le cadre, y compris en RTL */
.lecture { overflow: hidden; }
.lecture__valeur { top: 5px; }
html[dir="rtl"] .lecture i { margin-inline-start: auto; }

/* Direct : titre en bas à gauche, commentaires en bas à droite */
.antenne__haut { display: none; }
.antenne__bas {
  position: absolute;
  inset-inline-start: 26px;
  inset-inline-end: auto;
  bottom: 24px;
  max-width: 48%;
}
.flux {
  inset-inline-start: auto;
  inset-inline-end: 26px;
  bottom: 24px;
  width: min(340px, 40%);
  align-items: flex-end;
}
.flux__mot {
  border-inline-start: 0;
  border-inline-end: 2px solid var(--bleu-clair);
  text-align: start;
  width: 100%;
}

/* sous 900 px, le direct empile : commentaires en haut du bloc, titre en bas */
@media (max-width: 900px) {
  .antenne__bas {
    max-width: none;
    inset-inline-start: 18px;
    inset-inline-end: 18px;
    bottom: 16px;
  }
  .antenne__titre { font-size: 22px; }
  .flux {
    inset-inline-start: 18px;
    inset-inline-end: 18px;
    width: auto;
    bottom: auto;
    top: 58px;
    max-height: 42%;
    overflow: hidden;
  }
}
@media (max-width: 680px) {
  .antenne__bas { inset-inline-start: 12px; inset-inline-end: 12px; bottom: 12px; }
  .antenne__titre { font-size: 17px; }
  .antenne__sous { font-size: 11px; }
  .flux { inset-inline-start: 12px; inset-inline-end: 12px; top: 46px; max-height: 38%; }
  .flux__mot { font-size: 10px; padding: 6px 9px; }
}

/* Très petit écran : un seul commentaire à la fois au-dessus du titre */
@media (max-width: 420px) {
  .flux { top: 40px; max-height: 30%; }
  .flux__mot:not(:last-child) { display: none; }
  .antenne__sous { display: none; }
}

/* ==========================================================================
   Bascule connexion / création
   ========================================================================== */
.bascule-cx {
  display: none;
  position: relative;
  background: var(--gris-100);
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 22px;
}
.panneau.montre-bascule .bascule-cx { display: grid; grid-template-columns: 1fr 1fr; }

.bascule-cx__curseur {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  background: var(--bleu);
  border-radius: 999px;
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
}
.bascule-cx[data-position="creation"] .bascule-cx__curseur { transform: translateX(100%); }
html[dir="rtl"] .bascule-cx[data-position="creation"] .bascule-cx__curseur { transform: translateX(-100%); }

.bascule-cx button {
  position: relative; z-index: 1;
  height: 36px;
  font-size: var(--fs-meta); font-weight: 500;
  color: var(--gris-600);
  border-radius: 999px;
  transition: color .3s ease;
}
.bascule-cx button.est-actif { color: var(--blanc); font-weight: 700; }

/* écran de récupération */
.panneau__succes {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bleu-pale); padding: 16px 18px;
  font-size: var(--fs-meta); line-height: 1.5;
  margin-bottom: 20px;
}
.panneau__succes svg { width: 18px; height: 18px; flex: none; fill: var(--bleu); margin-top: 1px; }

/* Mobile : zones tactiles confortables */
@media (max-width: 680px) {
  .liste__play, .favori, .carte__duree .liste__play {
    position: relative;
  }
  .liste__play::after, .favori::after, .tuile__reseau::after {
    content: '';
    position: absolute; inset: -9px;
  }
  .liste__ligne { padding-block: 14px; }
  .commentaire__actions button { padding-block: 6px; }
  .pied__liens a { padding-block: 8px; }
  .megamenu__listes a { padding-block: 8px; }
}

/* ==========================================================================
   Page auteur et page d'erreur
   ========================================================================== */
.auteur {
  display: grid; grid-template-columns: 180px 1fr; gap: 34px;
  align-items: start; padding-block: 30px 0;
}
.auteur__portrait { width: 180px; height: 180px; object-fit: cover; border-radius: 50%; }
.auteur__role { margin: 4px 0 16px; font-size: var(--fs-titre-md); color: var(--bleu); font-weight: 500; }
.auteur__bio { margin: 0 0 18px; max-width: 62ch; font-size: var(--fs-corps); line-height: 1.55; }
.auteur__liens { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; font-size: var(--fs-meta); }
.auteur__liens a { color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; }

.erreur { text-align: center; padding-block: 70px 30px; }
.erreur__code {
  margin: 0; font-size: 110px; font-weight: 700; line-height: 1;
  letter-spacing: -.04em; color: var(--bleu-pale);
}
.erreur__titre { margin: -18px 0 12px; font-size: 40px; font-weight: 700; letter-spacing: -.025em; }
.erreur__texte { margin: 0 auto 28px; max-width: 46ch; font-size: var(--fs-corps); color: var(--gris-600); }
.erreur__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

@media (max-width: 680px) {
  .auteur { grid-template-columns: 1fr; gap: 20px; }
  .auteur__portrait { width: 120px; height: 120px; }
  .erreur { padding-block: 44px 20px; }
  .erreur__code { font-size: 76px; }
  .erreur__titre { font-size: 26px; margin-top: -10px; }
}

/* Confirmations de formulaire */
.infolettre__ok {
  margin: 0; max-width: 330px;
  font-size: var(--fs-meta); line-height: 1.5; color: var(--bleu-clair);
  border-inline-start: 2px solid var(--bleu-clair); padding-inline-start: 12px;
}
.bouton[disabled] { opacity: .5; cursor: default; }

/* ==========================================================================
   Espace personnel : navigation latérale
   ========================================================================== */
.espace {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.espace__nav {
  position: sticky; top: calc(var(--header-compact) + 24px);
  display: grid; gap: 2px;
}
.espace__nav .onglet {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 8px;
  font-size: var(--fs-meta); font-weight: 500; color: var(--gris-600);
  text-align: start;
  transition: background .24s ease, color .24s ease;
}
.espace__nav .onglet::after { display: none; }
.espace__nav .onglet:hover { background: var(--bleu-pale); color: var(--bleu); }
.espace__nav .onglet.est-actif { background: var(--bleu); color: var(--blanc); }
.espace__nav .onglet span {
  margin-inline-start: auto; font-size: var(--fs-micro); font-weight: 700;
  opacity: .7; font-variant-numeric: tabular-nums;
}

.espace__nav-pied {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--gris-200);
}
.espace__deconnexion {
  display: block; width: 100%; text-align: start;
  padding: 11px 14px; border-radius: 8px;
  font-size: var(--fs-meta); color: var(--gris-600);
  transition: background .24s ease, color .24s ease;
}
.espace__deconnexion:hover { background: var(--gris-100); color: var(--noir); }

/* cartes de favoris : une bordure propre, pas de traits orphelins */
.cartes-favoris {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.cartes-favoris .carte {
  border: 1px solid var(--gris-200);
  border-radius: 10px;
  padding: 16px 18px;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: start;
  transition: border-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.cartes-favoris .carte:hover {
  border-color: var(--bleu);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(18, 64, 128, .1);
}
.cartes-favoris .carte__img { width: 96px; height: 72px; border-radius: 6px; }
.cartes-favoris .carte:nth-child(n) { padding-left: 18px; border-left: 1px solid var(--gris-200); }

@media (max-width: 1000px) {
  .espace { grid-template-columns: 1fr; gap: 24px; }
  .espace__nav {
    position: static;
    grid-auto-flow: column; grid-auto-columns: max-content;
    overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--gris-200); padding-bottom: 6px;
  }
  .espace__nav::-webkit-scrollbar { display: none; }
  .espace__nav-pied { display: none; }
  .cartes-favoris { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Mobile — corrections ciblées
   ========================================================================== */

/* 1. Barre : la loupe rejoint le menu, à droite */
@media (max-width: 1000px) {
  .barre__bas .chercher { margin-inline-start: auto; }
  .barre__burger { margin-inline-start: 12px; }
}

/* 2. Pied : une seule colonne sur téléphone, plus lisible et sans trou */
@media (max-width: 680px) {
  .pied__grille { grid-template-columns: 1fr; gap: 30px; }
}

/* 3. Héros sur téléphone : la vidéo entière, le titre dessous.
      Un cadre 16:9 recadré en plein écran ne montrait que des jambes. */
@media (max-width: 760px) {
  .heros { height: auto; background: var(--bleu-fonce); }

  .heros__diapo {
    position: relative; inset: auto;
    display: none;
  }
  .heros__diapo.est-active {
    display: block;
    opacity: 1; visibility: visible;
  }

  .heros__media {
    position: relative; inset: auto;
    aspect-ratio: 16 / 9;
  }
  .heros__media img,
  .heros__media video { position: static; }

  .heros__voile {
    top: auto; height: 34%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent);
  }

  .heros__contenu {
    position: relative; height: auto;
    padding: 18px var(--gouttiere) 20px;
    background: var(--bleu-fonce);
  }
  .heros__titre {
    font-size: 24px; line-height: 1.18; margin-bottom: 16px;
  }
  .heros__titre br { display: none; }

  /* sur tactile on fait défiler au doigt : les commandes de diapositive
     n'apportent rien et gênaient le bouton de lecture */
  .heros > .heros__transport,
  .heros > .progression { display: none; }
}

/* 4. Web TV : le direct occupe toute la largeur de l'écran */
@media (max-width: 760px) {
  .antenne {
    margin-inline: calc(var(--gouttiere) * -1);
    width: calc(100% + var(--gouttiere) * 2);
    aspect-ratio: 16 / 9;
  }
  .antenne__titre { font-size: 17px; line-height: 1.22; }
  .antenne__sous { display: none; }
  .antenne__etat, .antenne__spectateurs { font-size: 10px; padding: 4px 10px; top: 12px; }
  .antenne__etat { inset-inline-start: 12px; }
  .antenne__spectateurs { inset-inline-end: 12px; }

  /* un seul commentaire, en haut, jamais devant les visages ni le titre */
  .flux {
    top: 44px; bottom: auto;
    inset-inline: 12px;
    width: auto; max-height: 46px; overflow: hidden;
    align-items: flex-start;
  }
  .flux__mot {
    font-size: 10px; padding: 5px 9px;
    background: rgba(0, 0, 0, .55);
    border-inline-end: 0;
    border-inline-start: 2px solid var(--bleu-clair);
  }
  .flux__mot:not(:last-child) { display: none; }
  .antenne__bas { inset-inline: 12px; bottom: 10px; max-width: none; }
}

/* 5. Grilles de cartes sur téléphone : toutes les lignes alignées.
      Les filets verticaux et les décalages d'une grille à trois colonnes
      n'ont plus de sens quand il n'y en a qu'une. */
@media (max-width: 680px) {
  .grille-trois {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .grille-trois .carte,
  .grille-trois .carte:nth-child(2n),
  .grille-trois .carte:nth-child(3n+2),
  .grille-trois .carte:nth-child(3n),
  .section--aeree .grille-trois .carte,
  .section--aeree .grille-trois .carte:nth-child(3n+2),
  .section--aeree .grille-trois .carte:nth-child(3n) {
    padding-left: 0;
    border-left: 0;
    border-bottom: 1px solid var(--gris-200);
    padding-block: 18px;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  .grille-trois .carte:last-child { border-bottom: 0; }
  .grille-trois .carte__img {
    width: 96px; height: 72px;
    border-radius: 4px;
  }
  .grille-trois .carte__titre { font-size: var(--fs-titre-sm); line-height: 1.32; }
  .grille-trois .carte__chapo { display: none; }
}

/* ==========================================================================
   Héros : actions visibles dès le premier écran
   ========================================================================== */
.heros__cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 22px;
}
.heros__cta .bouton { height: 46px; padding: 0 26px; font-size: var(--fs-meta); }

.bouton--clair {
  background: var(--blanc); color: var(--bleu); border-color: var(--blanc);
}
.bouton--clair:hover {
  background: var(--bleu-clair); border-color: var(--bleu-clair); color: var(--bleu-fonce);
}
.bouton--contour-clair {
  background: transparent; color: var(--blanc);
  border-color: rgba(255, 255, 255, .7);
}
.bouton--contour-clair:hover {
  background: rgba(255, 255, 255, .12); border-color: var(--blanc);
}

@media (max-width: 760px) {
  .heros__cta { margin-top: 18px; gap: 10px; }
  .heros__cta .bouton { flex: 1; height: 44px; padding: 0 14px; }
}

/* ==========================================================================
   Consentement : une carte compacte au lieu d'un bandeau plein écran.
   Refuser reste aussi accessible qu'accepter, comme l'exige la CNIL.
   ========================================================================== */
.consentement {
  left: auto; right: auto;
  inset-inline-start: auto;
  inset-inline-end: 24px;
  bottom: 24px;
  width: min(420px, calc(100% - 48px));
  max-height: calc(100vh - 48px);
  border-top: 0;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(10, 24, 46, .24);
  transform: translateY(calc(100% + 40px));
}
.consentement.est-visible { transform: none; }
.consentement.est-detaille { width: min(620px, calc(100% - 48px)); }

.consentement__inner {
  display: block;
  max-width: none;
  padding: 22px 22px 18px;
}
.consentement__titre { font-size: 17px; margin: 0 0 8px; }

.consentement__court {
  margin: 0 0 16px;
  font-size: 13px; line-height: 1.5; color: #3A3A3A;
}
.consentement__court a {
  color: var(--bleu); text-decoration: underline; text-underline-offset: 2px;
}

/* le texte réglementaire complet n'apparaît qu'en mode « Personnaliser » */
.consentement__texte,
.consentement__sous { display: none; }
.consentement.est-detaille .consentement__court { display: none; }
.consentement.est-detaille .consentement__texte {
  display: block; columns: auto; max-width: none;
  font-size: 12px; line-height: 1.5; margin-bottom: 12px;
  -webkit-line-clamp: unset;
}
.consentement.est-detaille .consentement__sous { display: block; margin-bottom: 4px; }

.consentement__actions {
  position: static;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.consentement__actions .bouton { height: 40px; padding: 0 12px; font-size: 14px; }
.consentement__actions .bouton--nu { grid-column: 1 / -1; height: 30px; font-size: 13px; }

.consentement.est-detaille .consentement__actions {
  position: sticky; bottom: -18px;
  background: var(--blanc);
  padding: 12px 0 6px; margin-top: 8px;
}

@media (max-width: 680px) {
  .consentement {
    inset-inline-start: 10px;
    inset-inline-end: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
    max-height: 80vh;
    border-radius: 12px;
  }
  .consentement.est-detaille { width: calc(100% - 20px); }
  .consentement__inner { padding: 18px 16px 14px; }
  .consentement__titre { font-size: 16px; }
  .consentement__court { font-size: 12.5px; margin-bottom: 14px; }
}

/* ==========================================================================
   Publicités : formats IAB exacts, proportions tenues à toutes les largeurs
   Ordinateur : 970×250 (billboard), 728×90 (leaderboard), 300×250 (pavé)
   Téléphone  : 320×100 (grande bannière), 320×50 (bannière), 300×250
   ========================================================================== */
.pub { width: 100%; }
.pub__cadre { width: 100%; height: auto; margin-inline: auto; }
.pub--banniere .pub__cadre { max-width: 970px; aspect-ratio: 970 / 250; height: auto; }
.pub--pied .pub__cadre     { max-width: 728px; aspect-ratio: 728 / 90;  height: auto; }
.pub--pave .pub__cadre     { max-width: 300px; aspect-ratio: 300 / 250; height: auto; }
.pub--grand .pub__cadre    { max-width: 300px; aspect-ratio: 300 / 600; height: auto; }
.pub__taille--mobile { display: none; }

@media (max-width: 760px) {
  .pub--banniere .pub__cadre { max-width: 320px; aspect-ratio: 320 / 100; }
  .pub--pied .pub__cadre     { max-width: 320px; aspect-ratio: 320 / 50; }
  .pub__taille--large  { display: none; }
  .pub__taille--mobile { display: inline; }
}

/* la colonne de droite de l'article accueille un vrai pavé de 300 px */
@media (min-width: 1201px) {
  .article-corps { grid-template-columns: 240px minmax(0, 690px) 300px; gap: 44px; }
}

/* ==========================================================================
   Paywall : le texte hérité de l'article ne doit pas écraser le bloc
   ========================================================================== */
.prose .paywall .paywall__texte {
  margin: 0 auto 22px; max-width: 44ch;
  font-size: var(--fs-meta); line-height: 1.55;
  color: var(--gris-600); text-align: center;
}
.prose .paywall .paywall__lien {
  margin: 14px 0 0; text-align: center;
  font-size: var(--fs-micro); line-height: 1.5; color: var(--gris-600);
}
.prose .paywall .paywall__marque { margin: 0 0 14px; }

/* ==========================================================================
   Barre du direct : les langues et la connexion ne sont jamais poussées
   hors de l'écran, quelle que soit la longueur du titre
   ========================================================================== */
.barre__haut .barre__fin { flex: none; }
.barre__haut .direct { overflow: hidden; }

@media (max-width: 760px) {
  /* sur téléphone, le titre défilant est illisible : on garde l'essentiel */
  .direct__piste, .direct__sep, .direct__grille { display: none; }
  .direct__compte span { display: none; }
}

/* les langues sont aussi dans le menu, toujours accessibles sur téléphone */
.tiroir__langues { display: flex; gap: 8px; margin-top: 22px; }
.tiroir__langues .langue {
  flex: 1; height: 42px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35);
  color: var(--blanc); font-size: var(--fs-meta);
}
.tiroir__langues .langue.est-active { background: var(--blanc); color: var(--bleu); border-color: var(--blanc); }

.article-tete__langue {
  display: inline-block; margin: 0 0 14px; padding: 5px 12px;
  background: var(--bleu-pale); color: var(--bleu);
  border-radius: 999px; font-size: var(--fs-micro); font-weight: 500;
}

/* ==========================================================================
   Écouter l'article
   ========================================================================== */
.ecoute {
  display: flex; align-items: center; gap: 14px;
  max-width: 460px; margin: 22px 0 0;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--gris-200); border-radius: 999px;
  background: var(--blanc);
}
.ecoute__bouton {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--bleu); color: var(--blanc);
  display: grid; place-items: center;
  transition: transform .25s ease, background .25s ease;
}
.ecoute__bouton:hover { transform: scale(1.06); background: var(--bleu-fonce); }
.ecoute__bouton svg { width: 12px; height: 14px; fill: currentColor; }
.ecoute__play { margin-inline-start: 2px; }
.ecoute__pause, .ecoute.est-en-lecture .ecoute__play { display: none; }
.ecoute.est-en-lecture .ecoute__pause { display: block; }
.ecoute__corps { flex: 1; min-width: 0; display: grid; gap: 7px; }
.ecoute__titre { font-size: var(--fs-micro); font-weight: 500; color: var(--noir); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecoute__piste { height: 3px; background: var(--gris-200); border-radius: 3px; overflow: hidden; }
.ecoute__piste i { display: block; height: 100%; width: 0; background: var(--bleu); transition: width .3s linear; }
.ecoute__vitesse {
  flex: none; min-width: 44px; height: 30px; padding: 0 8px; border-radius: 999px;
  font-size: var(--fs-micro); font-weight: 600; color: var(--bleu); background: var(--bleu-pale);
}
html[dir="rtl"] .ecoute { padding: 10px 10px 10px 14px; }
html[dir="rtl"] .ecoute__play { margin-inline-start: 0; transform: scaleX(-1); }
@media (max-width: 680px) { .ecoute { max-width: none; } }

/* ==========================================================================
   Paiement : carte ou Mobile Money
   ========================================================================== */
.moyens {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 5px; margin: 0 0 18px;
  background: var(--gris-100); border-radius: 999px;
}
.moyen {
  height: 40px; border-radius: 999px;
  font-size: var(--fs-meta); font-weight: 600; color: var(--gris-600);
  transition: background .25s ease, color .25s ease;
}
.moyen.est-actif { background: var(--blanc); color: var(--bleu); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.moyen__volet { display: none; }
.moyen__volet.est-actif { display: block; }
.operateurs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.operateurs span {
  font-size: var(--fs-micro); font-weight: 600; color: var(--gris-600);
  padding: 5px 10px; border: 1px solid var(--gris-200); border-radius: 999px;
}
.periodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; }
.periode {
  display: grid; gap: 4px; padding: 14px 8px; text-align: center;
  border: 1px solid var(--gris-200); border-radius: 10px; background: var(--blanc);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.periode b { font-size: var(--fs-meta); }
.periode span { font-size: var(--fs-micro); color: var(--gris-600); }
.periode.est-choisie { border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu); }
.periode.est-choisie span { color: var(--bleu); font-weight: 600; }
.paiement__etat {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 8px;
  background: var(--bleu-pale); color: var(--bleu); font-size: var(--fs-micro); line-height: 1.5;
}
.paiement__etat.est-erreur { background: #FDF0EF; color: #B42318; }
@media (max-width: 420px) { .periode { padding: 12px 4px; } }

/* le lecteur suit l'axe centré de l'en-tête d'article */
.article-tete .ecoute { margin: 22px auto 0; }
@media (max-width: 680px) {
  .article-tete .ecoute { width: 100%; max-width: 460px; margin-inline: auto; }
}

/* ==========================================================================
   Confort de lecture, reprise, sujets suivis, carte de citation
   ========================================================================== */

/* taille du texte de l'article */
html[data-lecture-taille="0"] .prose p, html[data-lecture-taille="0"] .article-tete__chapo { font-size: .94em; }
html[data-lecture-taille="2"] .prose p, html[data-lecture-taille="2"] .article-tete__chapo { font-size: 1.14em; }
html[data-lecture-taille="3"] .prose p, html[data-lecture-taille="3"] .article-tete__chapo { font-size: 1.3em; }
html[data-lecture-taille="2"] .article-tete__titre { font-size: 1.08em; }
html[data-lecture-taille="3"] .article-tete__titre { font-size: 1.16em; }

/* fond de lecture */
html[data-lecture-fond="creme"] body { background: #FBF7EF; }
html[data-lecture-fond="creme"] .prose p, html[data-lecture-fond="creme"] .article-tete__titre,
html[data-lecture-fond="creme"] .article-tete__chapo { color: #1A1710; }
html[data-lecture-fond="sombre"] body { background: #0E1116; }
html[data-lecture-fond="sombre"] .contenu, html[data-lecture-fond="sombre"] .article-tete { background: transparent; }
html[data-lecture-fond="sombre"] .prose p, html[data-lecture-fond="sombre"] .prose h2,
html[data-lecture-fond="sombre"] .article-tete__titre, html[data-lecture-fond="sombre"] .article-tete__chapo,
html[data-lecture-fond="sombre"] .retenir li { color: #F2F4F7; }
html[data-lecture-fond="sombre"] .article-tete__signature, html[data-lecture-fond="sombre"] .figure figcaption { color: #9AA3AE; }
html[data-lecture-fond="sombre"] .retenir { background: #161C24; }

.lecture-reglages { position: relative; display: flex; justify-content: flex-end; margin-top: 10px; }
.lecture-reglages__bouton {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--gris-200); background: var(--blanc);
  font-weight: 700; font-size: 15px; color: var(--noir);
}
.lecture-reglages__bouton:hover { border-color: var(--bleu); color: var(--bleu); }
.lecture-panneau {
  position: absolute; top: 50px; inset-inline-end: 0; z-index: 30;
  width: 280px; padding: 16px; border-radius: 16px; background: var(--blanc);
  box-shadow: 0 18px 40px rgba(10, 31, 68, .18); border: 1px solid var(--gris-200);
  display: grid; gap: 8px; text-align: start;
}
.lecture-panneau[hidden] { display: none; }
.lecture-panneau__titre { font-size: var(--fs-micro); font-weight: 700; margin: 4px 0 0; }
.lecture-panneau__ligne { display: flex; gap: 6px; }
.lecture-panneau__ligne button {
  flex: 1; height: 38px; border-radius: 10px; border: 1px solid var(--gris-200);
  background: var(--blanc); font-size: var(--fs-micro); font-weight: 700; color: var(--bleu);
}
.lecture-panneau__ligne button.est-choisi { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.lecture-fond { display: grid; gap: 2px; height: 58px !important; }
.lecture-fond span { font-size: 10px; font-weight: 500; }
.lecture-fond--creme { background: #FBF7EF !important; color: #1A1710 !important; }
.lecture-fond--sombre { background: #0E1116 !important; color: #F2F4F7 !important; }
.lecture-fond.est-choisi { outline: 2px solid var(--bleu); outline-offset: 1px; }

.barre.est-cachee { transform: translateY(-100%); transition: transform .3s ease; }

.reprise {
  display: flex; align-items: center; gap: 14px;
  margin: 24px auto 0; padding: 14px 18px; border-radius: 14px;
  background: var(--bleu-fonce); color: var(--blanc); text-decoration: none;
}
.reprise:hover { background: var(--bleu); }
.reprise__rond { width: 30px; height: 30px; border-radius: 50%; background: var(--bleu-clair); flex: none; position: relative; }
.reprise__rond::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--bleu-fonce); }
.reprise__texte { display: grid; gap: 2px; flex: 1; min-width: 0; }
.reprise__texte strong { font-size: var(--fs-micro); color: var(--bleu-clair); }
.reprise__texte span { font-size: var(--fs-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reprise__fleche { font-size: 18px; }

.etiquette-suivi {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gris-200);
  background: var(--blanc); font-size: var(--fs-micro); color: var(--gris-600);
}
.etiquette-suivi.est-suivi { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }

.fil-suivi { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fil-suivi__item { display: grid; gap: 8px; text-decoration: none; color: inherit; }
.fil-suivi__item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.fil-suivi__item em { font-style: normal; font-size: var(--fs-micro); color: var(--bleu); }
.fil-suivi__item strong { display: block; font-size: var(--fs-meta); line-height: 1.35; }
.fil-suivi__note { margin-top: 12px; font-size: var(--fs-micro); color: var(--gris-600); }

.retenir {
  margin: 0 0 26px; padding: 20px; border-radius: 14px; background: var(--bleu-pale);
  border-inline-start: 3px solid var(--bleu);
}
.retenir__titre { margin: 0 0 10px; font-size: var(--fs-micro); font-weight: 700; color: var(--bleu); text-transform: none; }
.retenir ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 8px; }
.retenir li { font-size: var(--fs-meta); line-height: 1.55; }

.citation-bulle {
  position: absolute; z-index: 60; padding: 9px 16px; border-radius: 999px;
  background: var(--noir); color: var(--blanc); font-size: var(--fs-micro); font-weight: 600;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.citation-bulle[hidden] { display: none; }

/* ==========================================================================
   Web TV : la page prend le sombre de l'application
   ========================================================================== */
.page-tv { background: #05070C; color: #F2F5F8; }
.page-tv .section, .page-tv .contenu { background: transparent; }
.page-tv .section__titre, .page-tv h2, .page-tv h3 { color: #F2F5F8; }
.page-tv .carte__titre, .page-tv .carte a, .page-tv .titre { color: #F2F5F8; }
.page-tv .carte__meta, .page-tv .rubrique, .page-tv .duree, .page-tv p { color: #9BA5B1; }
.page-tv .carte { background: #131922; border-color: rgba(255, 255, 255, .1); border-radius: 16px; overflow: hidden; }
.page-tv .tv-source > .programme__ligne { display: none; }   /* la liste d'origine sert de source à la grille */
.page-tv .pub__cadre { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: #6E7885; }

.tv-grille { overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; scrollbar-width: thin; max-width: 100%; min-width: 0; }
.page-tv .grille-tv > div { min-width: 0; }
.tv-grille__piste { position: relative; height: 190px; }
.tv-grille__heure { position: absolute; top: 0; z-index: 0; font-size: var(--fs-micro); color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.tv-grille__heure::after { content: ""; position: absolute; inset-inline-start: 0; top: 22px; width: 1px; height: 160px; background: rgba(255, 255, 255, .14); }
.tv-creneau {
  position: absolute; top: 30px; z-index: 1; height: 140px; display: grid; gap: 6px; align-content: start;
  padding: 14px; border-radius: 14px; background: #141A24;
  border: 1px solid rgba(255, 255, 255, .16); overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
.tv-creneau strong { font-size: var(--fs-meta); line-height: 1.3; }
.tv-creneau__heure { font-size: var(--fs-micro); color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
.tv-creneau__desc { font-size: var(--fs-micro); color: rgba(255, 255, 255, .55); }
.tv-creneau.est-passe { opacity: .45; }
.tv-creneau.est-en-cours { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.tv-creneau.est-en-cours .tv-creneau__heure { color: var(--rouge-live, #E8232A); font-weight: 700; }
.tv-creneau.est-en-cours .tv-creneau__desc { color: var(--gris-600); }
.tv-creneau__heure i { width: 7px; height: 7px; border-radius: 50%; background: #E8232A; display: inline-block; }
.tv-maintenant { position: absolute; z-index: 2; top: 24px; bottom: 6px; width: 2px; background: #E8232A; }
.tv-maintenant i { position: absolute; top: -5px; inset-inline-start: -4px; width: 10px; height: 10px; border-radius: 50%; background: #E8232A; }

.tv-apres { margin-top: 22px; display: grid; gap: 2px; }
.tv-apres__titre { font-size: var(--fs-micro); font-weight: 700; color: var(--bleu-clair); margin-bottom: 8px; }
.tv-apres__ligne {
  display: flex; align-items: baseline; gap: 14px; padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.tv-apres__heure { width: 54px; flex: none; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .55); font-size: var(--fs-micro); }
.tv-apres__nom { font-size: var(--fs-meta); font-weight: 700; }
.tv-apres__desc { color: rgba(255, 255, 255, .55); font-size: var(--fs-micro); }

.tv-suivre {
  max-width: 100%; min-width: 0; flex-wrap: wrap;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-bottom: 18px; padding: 16px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
}
.tv-suivre:empty { display: none; }
.tv-suivre strong { display: block; font-size: var(--fs-meta); }
.tv-suivre__label { font-size: var(--fs-micro); color: var(--bleu-clair); }
.tv-suivre__compte { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 680px) { .tv-grille__piste { height: 170px; } .tv-creneau { height: 122px; } }

/* parallaxe : l'image bouge dans son cadre, jamais la mise en page */
.parallaxe { display: block; position: relative; overflow: hidden; border-radius: inherit; }
.parallaxe > img { display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform; transition: transform .12s linear; }
@media (prefers-reduced-motion: reduce) { .parallaxe > img { transform: none !important; } }

/* le réglage de lecture, posé dans la ligne de partage */
.lecture-reglages--partage { margin: 0 0 0 auto; }
.lecture-reglages--partage .lecture-panneau { top: auto; bottom: 52px; }

/* le mini-lecteur qui suit la navigation */
.mini-lecteur {
  position: fixed; inset-inline: 16px; bottom: 16px; z-index: 70;
  max-width: 560px; margin-inline: auto;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-radius: 18px;
  background: var(--bleu); color: var(--blanc);
  box-shadow: 0 16px 40px rgba(10, 31, 68, .35);
}
.mini-lecteur[hidden] { display: none; }
.mini-lecteur__bouton {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--blanc); color: var(--bleu); display: grid; place-items: center;
}
.mini-lecteur__bouton svg { width: 12px; height: 14px; fill: currentColor; }
.mini-lecteur__corps { flex: 1; min-width: 0; display: grid; gap: 4px; }
.mini-lecteur__titre { font-size: var(--fs-micro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-lecteur__etat { font-size: 11px; color: var(--bleu-clair); }
.mini-lecteur__piste { height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.mini-lecteur__piste i { display: block; height: 2px; background: var(--blanc); width: 0; }
.mini-lecteur__fermer { color: rgba(255, 255, 255, .75); font-size: 18px; line-height: 1; }

/* le mini-lecteur : boutons complets, arrivée et sortie glissées */
.mini-lecteur { transform: translateY(120%); opacity: 0; transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .28s ease; }
.mini-lecteur.est-entre { transform: translateY(0); opacity: 1; }
.mini-lecteur__saut { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.85); }
.mini-lecteur__saut:hover { background: rgba(255,255,255,.15); color: var(--blanc); }
.mini-lecteur__saut svg { width: 13px; height: 13px; fill: currentColor; }
.mini-lecteur__vitesse {
  min-width: 42px; height: 28px; padding: 0 8px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: var(--blanc);
  font-size: var(--fs-micro); font-weight: 700;
}
@media (max-width: 520px) { .mini-lecteur__saut { display: none; } }

/* choix de la voix, dans le panneau de lecture */
.lecture-voix { width: 100%; height: 38px; border-radius: 10px; border: 1px solid var(--gris-200); background: var(--blanc); font-size: var(--fs-micro); padding: 0 8px; color: var(--noir); }