/* ==========================================================================
   Douce France — identité du site
   Reprise de la palette et des fontes de l'app (src/news/styles.js) : noir du
   lecteur, rose Douce France, Oswald pour les titres, SpaceMono pour les
   petites capitales. Aucune ressource distante : les fontes sont servies par
   le worker, il n'y a ni CDN ni mouchard.
   ========================================================================== */

@font-face {
  font-family: "Oswald";
  src: url("/fonts/Oswald.ttf") format("truetype");
  font-weight: 200 700;
  font-display: swap;
}

@font-face {
  font-family: "SpaceMono";
  src: url("/fonts/SpaceMono.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --noir: #0e0e12;
  --carte: #17171d;
  --carte-haut: #1e1e26;
  --blanc: #f2f2f5;
  --rose: #b83980;
  --gris: #9a9aa5;
  --gris-texte: #c9c9d2;
  --filet: #2a2a33;

  --titre: "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif;
  --capitales: "SpaceMono", ui-monospace, "SF Mono", Menlo, monospace;
  --interface: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Le corps des articles passe en serif : c'est ce qui distingue une page de
     lecture d'une page d'application. */
  --lecture: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --largeur: 1120px;
  --largeur-texte: 44rem;
}

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

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

body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--interface);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

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

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Lien d'évitement : visible seulement au clavier. */
.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--rose);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-family: var(--capitales);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}
.evitement:focus {
  left: 0;
}

/* --- En-tête -------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  /* 6 px en haut et en bas, contre 12 auparavant : les 12 px récupérés sont
     passés au logo, qui est l'élément le plus haut de la barre et en fixe donc
     la hauteur. Le total reste identique — 6 + 56 + 6 = 12 + 44 + 12. Toucher
     à l'un de ces deux nombres sans l'autre change la hauteur de l'en-tête,
     qui est collant et recouvre le haut de chaque page. */
  padding: 0.375rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(14, 14, 18, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--filet);
}

.marque {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  font-family: var(--titre);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}

.marque img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.entete nav {
  display: flex;
  /* Cinq entrées ne tiennent plus toujours sur une ligne. La navigation passe
     donc à la ligne D'ENTRE deux liens — jamais au milieu d'un libellé, d'où
     le `nowrap` sur les liens : un libellé coupé en deux se lirait comme
     deux entrées de menu. */
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: clamp(0.7rem, 2.4vw, 1.9rem);
  row-gap: 0.3rem;
}

.entete nav a {
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--capitales);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
  /* Le trait de soulignement et son rembourrage occupent 4 px SOUS le texte.
     Sans contrepartie au-dessus, centrer la boîte fait remonter le texte de
     2 px — assez pour qu'il se désaligne visiblement du texte des boutons
     voisins. Ces 4 px rétablissent la symétrie. */
  padding-top: 4px;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.entete nav a:hover,
.entete nav a.actif {
  color: var(--blanc);
  border-bottom-color: var(--rose);
}

/* --- La scène : le lecteur ------------------------------------------------ */

.scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(78vh, 780px);
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vw, 4rem) 1rem;
}

/* Le logo flouté en fond, comme l'ImageBackground de l'app. L'échelle évite
   que le flou ne laisse voir les bords. */
.scene-fond {
  position: absolute;
  inset: -60px;
  z-index: -2;
  background: url("/images/logo-transparent.png") center / cover no-repeat;
  filter: blur(28px) saturate(1.1);
  transform: scale(1.15);
  opacity: 0.55;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 14, 18, 0.55), rgba(14, 14, 18, 0.92));
}

.scene-contenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.scene-logo {
  width: clamp(180px, 40vw, 260px);
  height: auto;
  margin-bottom: -0.5rem;
}

.lecteur {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.direct {
  min-height: 7.5rem;
  padding: 1rem 1rem 1.5rem;
  font-family: var(--titre);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.direct p {
  margin: 0;
}

.direct-artiste {
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  color: #dddddd;
  margin-bottom: 0.2rem !important;
}

.direct-titre {
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  color: #fff;
}

.direct-annee {
  font-size: 1.15rem;
  color: #999;
  margin-top: 0.3rem !important;
}

/* Le bouton : 150 px de rose, exactement comme dans l'app. */
.bouton-lecture {
  width: 150px;
  height: 150px;
  border: none;
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  animation: pulsation 2s ease-in-out infinite;
  transition: transform 0.15s ease, background 0.15s ease;
}

.bouton-lecture:hover {
  background: #cc4090;
}

.bouton-lecture:active {
  transform: scale(0.96);
}

.bouton-lecture:disabled {
  background: #4a3040;
  cursor: not-allowed;
  animation: none;
}

.bouton-lecture svg {
  width: 60px;
  height: 60px;
  fill: currentColor;
}

/* L'icône affichée suit l'état réel du lecteur. Ces règles ne servent que dans
   la fenêtre `/lecteur` : c'est le seul endroit du site où du son est joué. */
.icone-pause {
  display: none;
}

.lecteur[data-etat="lecture"] .icone-play,
.lecteur[data-etat="connexion"] .icone-play,
.lecteur[data-etat="reconnexion"] .icone-play {
  display: none;
}

.lecteur[data-etat="lecture"] .icone-pause,
.lecteur[data-etat="connexion"] .icone-pause,
.lecteur[data-etat="reconnexion"] .icone-pause {
  display: block;
}

@keyframes pulsation {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bouton-lecture {
    animation: none;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}

.statut {
  margin: 1.6rem 0 0;
  font-family: var(--capitales);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  color: #999;
}

.lecteur[data-etat="lecture"] .statut {
  color: var(--rose);
}

/* --- L'accueil : présentation, jamais de lecteur --------------------------- */

.scene-devise {
  margin: 1.5rem 0 0;
  font-family: var(--titre);
  font-weight: 300;
  font-size: clamp(1.15rem, 4vw, 1.6rem);
  color: var(--gris-texte);
  letter-spacing: 0.01em;
}

.scene-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin: 2.2rem 0 0;
}

/* --- Bouton « En direct » de l'en-tête ------------------------------------ */

.bouton-soutien {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--rose);
  border-radius: 999px;
  color: var(--blanc);
  text-decoration: none;
  font-family: var(--capitales);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.bouton-soutien:hover {
  background: rgba(184, 57, 128, 0.18);
}

.bouton-soutien svg {
  width: 13px;
  height: 13px;
  fill: var(--rose);
}

/* Tout ce qui suit la marque est poussé à droite d'un seul bloc : navigation,
   soutien et bouton d'écoute forment un ensemble, séparé du logo par le vide. */
.entete > nav {
  margin-left: auto;
}

@media (max-width: 700px) {
  .bouton-soutien span {
    display: none;
  }
  .bouton-soutien {
    padding: 0.45rem 0.6rem;
  }
}

/* --- Le menu des petits écrans -------------------------------------------- */

/* Sur grand écran le bouton n'existe pas, même une fois le script passé. */
.menu-bouton {
  display: none;
}

/*
 * 900 px : en dessous, cinq entrées et deux boutons ne tiennent plus. Au-dessus,
 * la navigation se replie proprement sur deux lignes alignées à droite, ce qui
 * reste lisible — inutile de cacher un menu qui s'affiche bien.
 *
 * Tout est conditionné à `[data-menu]`, que seul le script pose : sans
 * JavaScript, aucune de ces règles ne s'applique et la navigation reste là.
 */
@media (max-width: 900px) {
  .entete[data-menu] .menu-bouton {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding: 0.5rem 0.8rem;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: var(--gris-texte);
    font-family: var(--capitales);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .entete[data-menu] .menu-bouton svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  /*
   * Les trois traits deviennent une croix : le bouton dit toujours ce qu'il
   * fera au prochain clic.
   *
   * L'ORDRE compte. En CSS la transformation la plus à DROITE s'applique la
   * première : il faut d'abord amener le trait au centre du dessin (12, 12),
   * PUIS le pivoter autour de ce centre. Écrit dans l'autre sens, chaque trait
   * pivote autour d'un centre qui n'est pas le sien et les deux branches du X
   * ne se croisent plus.
   */
  .menu-trait {
    transform-origin: center;
    transition: transform 0.18s ease, opacity 0.12s ease;
  }

  .entete[data-menu].menu-ouvert .menu-trait-haut {
    transform: rotate(45deg) translateY(5px);
  }

  .entete[data-menu].menu-ouvert .menu-trait-milieu {
    opacity: 0;
  }

  .entete[data-menu].menu-ouvert .menu-trait-bas {
    transform: rotate(-45deg) translateY(-5px);
  }

  .entete[data-menu] > nav {
    display: none;
  }

  /* Le panneau se déploie sous la barre, sur toute sa largeur : un menu
     déroulant étroit obligerait à viser, alors qu'ici chaque entrée fait la
     largeur de l'écran et se touche du pouce. */
  .entete[data-menu].menu-ouvert > nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.4rem 1.25rem 1rem;
    background: var(--noir);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    row-gap: 0;
  }

  .entete[data-menu].menu-ouvert > nav a {
    padding: 0.85rem 0;
    font-size: 0.86rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* L'entrée courante garde le rose, mais en trait plein sous toute la
     largeur plutôt qu'un soulignement de la taille du mot. */
  .entete[data-menu].menu-ouvert > nav a.actif {
    border-bottom-color: var(--rose);
  }

  .entete[data-menu].menu-ouvert > nav a:last-child {
    border-bottom: none;
  }
}

/*
 * Sur un téléphone, tout doit tenir sur UNE ligne : logo, menu, soutien,
 * écoute. La barre est collante et recouvre le haut de chaque page — deux
 * lignes, c'est un bandeau qui mange le contenu à chaque défilement.
 *
 * On récupère la place sur ce qui compte le moins : le mot « Menu » (l'icône
 * se suffit, `aria-label` la nomme pour les lecteurs d'écran), le nom écrit à
 * côté du logo, qui est déjà dans le logo, et les espaces.
 */
@media (max-width: 560px) {
  .entete {
    gap: 0.5rem;
  }

  .entete[data-menu] .menu-libelle {
    display: none;
  }

  .entete[data-menu] .menu-bouton {
    padding: 0.5rem 0.62rem;
  }

  .marque span {
    display: none;
  }

  .marque img {
    width: 48px;
    height: 48px;
  }
}

.bouton-antenne {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  background: var(--rose);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-family: var(--capitales);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.bouton-antenne:hover {
  background: #cc4090;
}

.bouton-antenne svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* --- La fenêtre du lecteur ------------------------------------------------ */

.fenetre-lecteur {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.5rem 1rem;
  text-align: center;
}

.fenetre-fond {
  position: absolute;
  inset: -60px;
  z-index: -2;
  background: url("/images/logo-transparent.png") center / cover no-repeat;
  filter: blur(30px) saturate(1.1);
  transform: scale(1.2);
  opacity: 0.5;
}

.fenetre-lecteur::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 14, 18, 0.6), rgba(14, 14, 18, 0.93));
}

.fenetre-contenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.fenetre-marque img {
  width: clamp(110px, 32vw, 150px);
  height: auto;
  margin-bottom: -0.75rem;
}

/* La fenêtre est étroite : le bouton y perd 30 pixels. */
.fenetre-lecteur .bouton-lecture {
  width: 120px;
  height: 120px;
}

.fenetre-lecteur .bouton-lecture svg {
  width: 48px;
  height: 48px;
}

.fenetre-lecteur .direct {
  min-height: 6.5rem;
  padding-bottom: 1rem;
}

.fenetre-pied {
  margin: 2rem 0 0;
  display: flex;
  gap: 0.6rem;
  font-family: var(--capitales);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #55555f;
}

.fenetre-pied a {
  color: var(--gris);
  text-decoration: none;
}

.fenetre-pied a:hover {
  color: var(--rose);
}

/* --- Sections ------------------------------------------------------------- */

.bande {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem);
}

.titre-page,
.titre-section {
  font-family: var(--titre);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.6rem;
}

.titre-page {
  font-size: clamp(2.2rem, 7vw, 3.4rem);
}

.titre-section {
  font-size: clamp(1.7rem, 5vw, 2.3rem);
}

.chapeau-section {
  max-width: var(--largeur-texte);
  margin: 0 0 2.2rem;
  color: var(--gris-texte);
}

.plus {
  margin-top: 2rem;
}

.plus a {
  font-family: var(--capitales);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  text-decoration: none;
}

.plus a:hover {
  text-decoration: underline;
}

.vide {
  padding: 2.5rem;
  background: var(--carte);
  border-radius: 4px;
  color: var(--gris);
  text-align: center;
}

/* --- Filtres de rubrique -------------------------------------------------- */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.2rem;
}

.filtres a {
  --rubrique: var(--gris);
  text-decoration: none;
  font-family: var(--capitales);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--filet);
  border-radius: 999px;
  color: var(--gris-texte);
  transition: all 0.15s ease;
}

.filtres a:hover {
  border-color: var(--rubrique);
  color: #fff;
}

.filtres a.actif {
  background: var(--rubrique);
  border-color: var(--rubrique);
  color: #fff;
}

/* --- Cartes d'article ----------------------------------------------------- */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.25rem;
}

.carte {
  --rubrique: var(--gris);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--carte);
  border-radius: 4px;
  overflow: hidden;
  transition: background 0.15s ease, transform 0.15s ease;
}

/* Le filet de couleur EST l'illustration : pas d'image, jamais. */
.carte::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--rubrique);
}

.carte:hover {
  background: var(--carte-haut);
  transform: translateY(-2px);
}

.carte-lien {
  text-decoration: none;
  padding: 1.5rem 1.5rem 0.5rem 1.9rem;
  flex: 1;
}

/* Toute la carte est cliquable, mais la cible du lecteur d'écran reste le
   titre : le lien s'étend, il ne se duplique pas. */
.carte-lien::after {
  content: "";
  position: absolute;
  inset: 0;
}

.carte-rubrique {
  margin: 0 0 0.7rem;
  font-family: var(--capitales);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rubrique);
}

.carte-titre {
  margin: 0 0 0.6rem;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.25;
}

.carte-chapo {
  margin: 0;
  color: var(--gris-texte);
  font-size: 0.95rem;
}

.carte-meta {
  margin: 0;
  padding: 0.9rem 1.5rem 1.4rem 1.9rem;
  font-family: var(--capitales);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--gris);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.fanion {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--rubrique);
  border-radius: 999px;
  color: var(--rubrique);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Un encart qui occupe une case de la grille. Il en prend la forme sans en
   prendre les codes : pas de filet de rubrique, pas d'effet au survol — ce
   n'est pas un article et il ne doit pas se faire passer pour un. */
.carte-publicite {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.4rem;
  background: var(--carte);
  cursor: default;
}

.carte-publicite::before {
  content: none;
}

.carte-publicite:hover {
  background: var(--carte);
  transform: none;
}

.carte-publicite .publicite-mention {
  align-self: flex-start;
  margin: 0 0 1rem;
}

/* Un carré de régie ne débordera pas de sa case, quelle que soit sa taille. */
.carte-publicite :is(iframe, img, ins, div) {
  max-width: 100%;
}

/*
 * ET il doit en occuper toute la largeur.
 *
 * `align-items: center` ci-dessus centre les enfants sur l'axe transversal —
 * donc sans les étirer. Un `<ins>` vide se réduit alors à une largeur de ZÉRO,
 * et une unité responsive AdSense qui mesure zéro ne se remplit JAMAIS : pas
 * d'erreur, pas de trace, juste une case vide.
 *
 * Le cas ne se posait pas dans les articles, où l'encart est dans un flux
 * normal et s'étire de lui-même. D'où un emplacement qui marchait et un autre
 * qui ne marchait pas, avec exactement le même code de régie.
 */
.carte-publicite :is(ins, div, iframe) {
  align-self: stretch;
  width: 100%;
}

/* De la place réservée avant le remplissage : la case ne saute pas quand
   l'annonce arrive, et la régie a une hauteur à travailler. */
.carte-publicite ins.adsbygoogle {
  min-height: 250px;
}

/* --- Article -------------------------------------------------------------- */

.article {
  --rubrique: var(--gris);
}

.couverture {
  background: var(--rubrique);
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1rem, 4vw, 2.5rem);
}

.couverture > * {
  max-width: var(--largeur-texte);
  margin-inline: auto;
}

.fil-ariane {
  margin: 0 0 1.5rem;
  font-family: var(--capitales);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.fil-ariane a {
  text-decoration: none;
}

.fil-ariane a:hover {
  text-decoration: underline;
}

.couverture-titre {
  margin: 0 0 1.2rem;
  font-family: var(--titre);
  font-weight: 500;
  font-size: clamp(2rem, 6.5vw, 3.2rem);
  line-height: 1.1;
  color: #fff;
}

.couverture-meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--capitales);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.85);
}

.couverture .fanion {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.article-corps {
  max-width: var(--largeur-texte);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 2.5rem) 4rem;
}

.rubriques-secondes {
  font-family: var(--capitales);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}

.pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.8rem;
}

.pastille {
  text-decoration: none;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--filet);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--gris-texte);
  transition: all 0.15s ease;
}

.pastille:hover {
  border-color: var(--rose);
  color: #fff;
}

.chapo {
  margin: 0;
  font-family: var(--lecture);
  font-size: 1.28rem;
  line-height: 1.55;
  color: #fff;
}

.filet {
  width: 60px;
  height: 3px;
  background: var(--rubrique);
  margin: 2rem 0;
}

.texte {
  font-family: var(--lecture);
  font-size: 1.13rem;
  line-height: 1.75;
  color: var(--gris-texte);
}

.texte p {
  margin: 0 0 1.4rem;
}

.texte h2,
.texte h3,
.texte h4 {
  font-family: var(--titre);
  font-weight: 500;
  color: #fff;
  line-height: 1.25;
  margin: 2.6rem 0 1rem;
}

.texte h2 {
  font-size: 1.7rem;
}
.texte h3 {
  font-size: 1.4rem;
}
.texte h4 {
  font-size: 1.2rem;
}

.texte a {
  color: #fff;
  text-decoration-color: var(--rubrique);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.texte a:hover {
  color: var(--rubrique);
}

.texte ul,
.texte ol {
  margin: 0 0 1.4rem;
  padding-left: 1.3rem;
}

.texte li {
  margin-bottom: 0.5rem;
}

.texte blockquote {
  margin: 2rem 0;
  padding-left: 1.4rem;
  border-left: 3px solid var(--rubrique);
  font-style: italic;
  color: #fff;
}

.texte code {
  font-family: var(--capitales);
  font-size: 0.9em;
  background: var(--carte);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

/* --- Espace publicitaire -------------------------------------------------- */

/* Rien n'est rendu quand l'emplacement est vide : ce bloc n'existe alors pas
   dans la page, il ne réserve aucune place et ne laisse aucun blanc. */
.publicite {
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--filet);
}

/* La mention est obligatoire, et elle doit rester lisible : une publicité qui
   ne se signale pas est une publicité déguisée. */
.publicite-mention {
  margin: 0 0 0.6rem;
  font-family: var(--capitales);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
}

/* En fin d'article, l'encart se sépare du texte par le haut, pas par le bas. */
.publicite-bas {
  margin: 3rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--filet);
  border-bottom: none;
}

/* Le code de la régie décide de sa hauteur ; il ne décidera pas de sa largeur. */
.publicite :is(iframe, img, ins, div) {
  max-width: 100%;
}

/* --- Blocs de fin d'article ---------------------------------------------- */

.bloc {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--filet);
}

.bloc-titre {
  margin: 0 0 1rem;
  font-family: var(--capitales);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
}

.sources,
.corrections {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.sources li,
.corrections li {
  margin-bottom: 0.7rem;
  color: var(--gris-texte);
}

.sources a {
  color: var(--gris-texte);
  text-underline-offset: 2px;
}

.sources a:hover {
  color: #fff;
}

.editeur {
  font-family: var(--capitales);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
  margin-right: 0.5rem;
}

.bloc-correction .corrections time {
  font-family: var(--capitales);
  font-size: 0.8rem;
  color: var(--gris);
}

/* --- Annuaire des artistes ------------------------------------------------ */

.recherche {
  margin-bottom: 2rem;
}

.recherche input {
  width: 100%;
  max-width: 26rem;
  padding: 0.85rem 1.1rem;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: 4px;
  color: var(--blanc);
  font-family: inherit;
  font-size: 1rem;
}

.recherche input::placeholder {
  color: var(--gris);
}

.recherche input:focus {
  border-color: var(--rose);
  outline: none;
}

.recherche-vide {
  margin: 1.2rem 0 0;
  color: var(--gris);
}

.annuaire {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.artiste a {
  display: block;
  padding: 0.8rem 1rem;
  background: var(--carte);
  border-radius: 4px;
  text-decoration: none;
  color: var(--gris);
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
}

.artiste a:hover {
  background: var(--carte-haut);
  color: #fff;
}

/* Un artiste qui a une actualité se distingue par le filet, jamais par un
   nombre : aucun décompte d'articles n'apparaît sur le site. */
.artiste-actif a {
  color: var(--blanc);
  border-left-color: var(--rose);
}

/* --- Page d'artiste ------------------------------------------------------- */

.biographie {
  max-width: var(--largeur-texte);
  margin: 0 0 3rem;
  font-family: var(--lecture);
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--gris-texte);
}

/* Premier mot en capitales : la biographie ouvre la page, elle mérite une
   entrée en matière typographique plutôt qu'un simple paragraphe. */
.biographie::first-line {
  color: var(--blanc);
}

.titre-actus {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
}

/* --- Coup de cœur --------------------------------------------------------- */

/* Le seul contenu du site écrit à la première personne par la radio elle-même.
   Il se distingue donc franchement des articles fabriqués par le pipeline. */
.coeur {
  max-width: var(--largeur-texte);
  margin: 0 0 3rem;
  padding: 1.8rem 2rem 2rem;
  background: var(--carte);
  border-left: 3px solid var(--rose);
  border-radius: 4px;
}

.coeur-mention {
  margin: 0 0 0.5rem;
  font-family: var(--capitales);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
}

.coeur-chanson {
  margin: 0 0 1rem;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--blanc);
}

.coeur-texte p {
  margin: 0 0 0.9rem;
  font-family: var(--lecture);
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--gris-texte);
}

.coeur-texte p:last-child {
  margin-bottom: 0;
}

/* Façade du clip : tant qu'on ne clique pas, rien n'est demandé à YouTube. */
.coeur-clip {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  margin-top: 1.6rem;
  padding: 0.9rem 1.2rem;
  background: var(--carte-haut);
  border: 1px solid var(--filet);
  border-radius: 4px;
  color: var(--blanc);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.coeur-clip:hover {
  background: #23232c;
  border-color: var(--rose);
}

.coeur-clip svg {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 8px;
  box-sizing: content-box;
  fill: #fff;
  background: var(--rose);
  border-radius: 50%;
}

.coeur-clip-libelle {
  font-family: var(--capitales);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.coeur-clip-note {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--gris);
  text-align: right;
}

@media (max-width: 560px) {
  .coeur-clip-note {
    display: none;
  }
}

/* Cadre 16/9 qui remplace la façade une fois le clip demandé. */
.coeur-cadre {
  position: relative;
  margin-top: 1.6rem;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}

.coeur-cadre iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Chansons en clip ----------------------------------------------------- */

.chansons {
  max-width: var(--largeur-texte);
  margin: 0 0 3rem;
}

.titre-chansons {
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
}

.chansons-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

/* Une ligne par chanson : un artiste peut en avoir six, des gros boutons
   d'affilée écraseraient la page. */
.chanson {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.7rem 1rem;
  background: var(--carte);
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--gris-texte);
  font-family: var(--lecture);
  font-size: 1.02rem;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chanson:hover {
  background: var(--carte-haut);
  border-color: var(--rose);
  color: #fff;
}

.chanson-titre {
  flex: 1;
}

/* Sur une page de décennie, l'interprète compte autant que le titre. */
.chanson-artiste {
  color: var(--gris);
  font-size: 0.92rem;
  text-align: right;
}

.chanson-annee {
  flex: none;
  font-family: var(--capitales);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--gris);
  min-width: 3.2rem;
  text-align: right;
}

.chanson:hover .chanson-annee,
.chanson:hover .chanson-artiste {
  color: var(--gris-texte);
}

@media (max-width: 560px) {
  .chanson-artiste {
    display: none;
  }
}

.chanson svg {
  flex: none;
  width: 14px;
  height: 14px;
  padding: 7px;
  box-sizing: content-box;
  fill: #fff;
  background: var(--rose);
  border-radius: 50%;
}

/* Le cadre remplace le bouton dans la liste : il doit en occuper la largeur. */
.chansons-liste .coeur-cadre {
  margin-top: 0;
}

/* --- Page de chanson ------------------------------------------------------ */

.bande-chanson .titre-page {
  margin-bottom: 0.35rem;
}

.chanson-interpretes {
  font-family: var(--capitales);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}

.chanson-interpretes a {
  color: var(--rose);
  text-decoration: none;
}

.chanson-interpretes a:hover {
  text-decoration: underline;
}

/* La décennie et l'année, en petites capitales sous le nom de l'interprète. */
.chanson-reperes {
  font-family: var(--capitales);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 1.6rem;
}

.chanson-reperes a {
  color: var(--gris);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 57, 128, 0.5);
}

.chanson-reperes a:hover {
  color: #fff;
  border-bottom-color: var(--rose);
}

/* Le même bouton que le coup de cœur, mais pleine largeur : ici le clip est
   le sujet de la page, pas une pièce jointe. */
.chanson-clip {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 1.2rem;
  margin-bottom: 1.8rem;
  background: var(--carte);
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fff;
  font-family: var(--capitales);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.chanson-clip:hover {
  background: var(--carte-haut);
  border-color: var(--rose);
}

.chanson-clip svg {
  flex: none;
  width: 16px;
  height: 16px;
  padding: 9px;
  box-sizing: content-box;
  fill: #fff;
  background: var(--rose);
  border-radius: 50%;
}

.chanson-texte {
  font-family: var(--lecture);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--gris-texte);
  max-width: 40rem;
}

.chanson-texte p {
  margin: 0 0 1rem;
}

/* --- Catalogue des chansons ----------------------------------------------- */

.catalogue-artiste {
  margin-top: 2.4rem;
}

.catalogue-nom {
  font-family: var(--capitales);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  margin: 0 0 0.7rem;
}

.catalogue-nom a {
  color: #fff;
  text-decoration: none;
}

.catalogue-nom a:hover {
  color: var(--rose);
}

/* --- Décennies ------------------------------------------------------------ */

.decennies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.decennies a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.1rem 1.2rem;
  background: var(--carte);
  border-left: 3px solid var(--rose);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.decennies a:hover {
  background: var(--carte-haut);
}

.decennie-libelle {
  font-family: var(--titre);
  font-size: 1.35rem;
  color: var(--blanc);
}

.decennie-compte {
  font-family: var(--capitales);
  font-size: 0.78rem;
  color: var(--gris);
}

/* La barre des autres décennies, en pied de page de rubrique. */
.filtres-decennies {
  margin: 2.5rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--filet);
}

/* --- Pages de texte ------------------------------------------------------- */

.texte-long {
  max-width: calc(var(--largeur-texte) + 5rem);
}

.texte-long h2 {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.7rem;
  margin: 2.8rem 0 0.8rem;
}

.texte-long p {
  color: var(--gris-texte);
  max-width: var(--largeur-texte);
}

.texte-long a {
  color: #fff;
  text-decoration-color: var(--rose);
  text-underline-offset: 3px;
}

.definitions {
  margin: 1.5rem 0 0;
}

.definitions dt {
  --rubrique: var(--gris);
  font-family: var(--capitales);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rubrique);
  margin-top: 1.4rem;
}

.definitions dt a {
  text-decoration: none;
}

.definitions dt a:hover {
  text-decoration: underline;
}

.definitions dd {
  margin: 0.35rem 0 0;
  color: var(--gris-texte);
  max-width: var(--largeur-texte);
}

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.bouton {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  background: var(--rose);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-family: var(--capitales);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.15s ease;
}

.bouton:hover {
  background: #cc4090;
}

.bouton-second {
  background: transparent;
  border: 1px solid var(--filet);
  color: var(--gris-texte);
}

.bouton-second:hover {
  background: var(--carte);
  color: #fff;
}

/* --- Comment écouter : les plateformes ------------------------------------ */

.famille {
  margin-top: 3rem;
}

.famille h2 {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.6rem;
  margin: 0 0 0.4rem;
}

.famille-chapeau {
  margin: 0 0 1.2rem;
  color: var(--gris);
  font-size: 0.95rem;
}

.plateformes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 0.6rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.plateformes a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  background: var(--carte);
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.plateformes a:hover {
  background: var(--carte-haut);
  border-color: var(--rose);
}

.plateforme-nom {
  color: var(--blanc);
}

.plateforme-detail {
  font-family: var(--capitales);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}

/* --- Pied de page --------------------------------------------------------- */

.pied {
  border-top: 1px solid var(--filet);
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2.5rem) 2rem;
  background: #0a0a0d;
}

.pied-colonnes {
  max-width: var(--largeur);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 2.5rem;
}

.pied-titre {
  font-family: var(--capitales);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blanc);
  margin: 0 0 1rem;
}

.pied p {
  color: var(--gris);
  font-size: 0.92rem;
  margin: 0;
}

.pied a {
  display: block;
  color: var(--gris);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.22rem 0;
}

.pied a:hover {
  color: var(--rose);
}

.pied-bas {
  max-width: var(--largeur);
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
  font-family: var(--capitales);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: #55555f !important;
}

/* --- Formulaire de contact ------------------------------------------------ */

.bande-etroite {
  max-width: 40rem;
}

.formulaire {
  margin-top: 2rem;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 1.4rem;
}

.champ label {
  font-family: var(--capitales);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}

.champ input,
.champ textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  background: var(--carte);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: #fff;
  font-family: var(--lecture);
  font-size: 1.02rem;
  line-height: 1.5;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.champ textarea {
  resize: vertical;
  min-height: 9rem;
}

.champ input:focus,
.champ textarea:focus {
  outline: none;
  background: var(--carte-haut);
  border-color: var(--rose);
}

.champ-fautif input,
.champ-fautif textarea {
  border-color: #d4553f;
}

.champ-erreur {
  font-family: var(--lecture);
  font-size: 0.92rem;
  color: #e8836f;
}

/* Le message global, en tête de formulaire. */
.alerte {
  padding: 0.85rem 1rem;
  margin: 1.5rem 0 0;
  background: rgba(212, 85, 63, 0.12);
  border-left: 3px solid #d4553f;
  border-radius: 3px;
  font-family: var(--lecture);
  color: #f0b3a5;
}

/* Le champ piège : hors de vue ET hors du parcours au clavier. `display:none`
   ne conviendrait pas — certains robots l'utilisent justement pour repérer les
   pièges, et certains navigateurs ignorent les champs masqués ainsi. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire-envoi {
  margin: 1.8rem 0 0;
}

.formulaire-envoi button,
.formulaire-envoi .bouton {
  display: inline-block;
  padding: 0.8rem 2.2rem;
  background: var(--rose);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: var(--capitales);
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.formulaire-envoi button:hover,
.formulaire-envoi .bouton:hover {
  filter: brightness(1.15);
}

.formulaire-mention {
  margin: 1.4rem 0 0;
  font-family: var(--lecture);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gris);
}

/* --- Notre application, en tête de « Comment écouter » -------------------- */

/* Encadrée et détachée du reste : les familles de plateformes qui suivent
   sont de simples listes de liens, celle-ci doit se distinguer d'elles. */
.notre-app {
  margin: 2.4rem 0 3rem;
  padding: 1.6rem 1.8rem;
  background: var(--carte);
  border-left: 3px solid var(--rose);
  border-radius: 4px;
}

.notre-app .titre-section {
  margin-top: 0;
}

.notre-app p {
  margin: 0.6rem 0 0;
}

.notre-app-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.2rem !important;
}

.notre-app-boutons .bouton {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  background: var(--rose);
  border-radius: 999px;
  color: #fff;
  font-family: var(--capitales);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 0.15s ease;
}

.notre-app-boutons .bouton:hover {
  filter: brightness(1.15);
}