@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Libre+Franklin:wght@400;500;600;700&display=swap");

/* =============================================================================
   PÉYI GUYANE — gabarit du site public
   Registre : média éditorial (l'information prime sur la décoration).
   Stratégie couleur : RETENUE. Canevas neutre teinté vert, le vert PÉYI est la
   seule couleur d'interface, le rouge est réservé au direct et à l'urgence.
   La polychromie de la marque n'apparaît que sur le filet de 3px du bandeau.
   ========================================================================== */

/* ---------- Jetons (repli hexadécimal, puis OKLCH sur navigateurs récents) --- */
:root {
  /* Marque (charte imposée) */
  --peyi-vert: #0C8737;
  --peyi-vert-fonce: #0A6E2C;
  --peyi-vert-clair: #A2C537;
  --peyi-jaune: #F4DC60;
  --peyi-orange: #E45A2B;
  --peyi-rouge: #C7334D;
  --peyi-rouge-fonce: #B11930;

  /* Neutres, tous teintés vers le vert de marque */
  --canvas: #F4F6F4;
  --surface: #FDFEFD;
  --surface-2: #F8FAF8;
  --sombre: #171A18;
  --sombre-2: #21251F;
  --encre: #1A1D1B;
  --encre-2: #4A504C;
  --encre-3: #6E7570;
  --ligne: #E2E6E3;
  --ligne-2: #EDF0EE;

  /* Rythme typographique — raison 1.25 minimum entre les crans */
  --pas-0: 0.8125rem;
  --pas-1: 0.9375rem;
  --pas-2: 1.0625rem;
  --pas-3: clamp(1.25rem, 0.9rem + 1vw, 1.5rem);
  --pas-4: clamp(1.5rem, 1rem + 2vw, 2rem);
  --pas-5: clamp(2rem, 1.2rem + 3.4vw, 3rem);
  --pas-6: clamp(2.5rem, 1.3rem + 5vw, 4.25rem);

  /* Espace, rayons, mouvement */
  --gouttiere: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --sortie: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
  --ombre: 0 1px 2px rgba(23, 26, 24, 0.04), 0 8px 24px -12px rgba(23, 26, 24, 0.18);
}

@supports (color: oklch(0.5 0.1 150)) {
  :root {
    --peyi-vert: oklch(0.525 0.146 151);
    --peyi-vert-fonce: oklch(0.455 0.129 151);
    --peyi-vert-clair: oklch(0.783 0.153 123);
    --peyi-jaune: oklch(0.888 0.128 99);
    --peyi-orange: oklch(0.632 0.183 41);
    --peyi-rouge: oklch(0.547 0.163 17);
    --peyi-rouge-fonce: oklch(0.470 0.166 19);

    --canvas: oklch(0.972 0.005 151);
    --surface: oklch(0.994 0.002 151);
    --surface-2: oklch(0.981 0.004 151);
    --sombre: oklch(0.215 0.008 151);
    --sombre-2: oklch(0.262 0.010 151);
    --encre: oklch(0.235 0.008 151);
    --encre-2: oklch(0.455 0.009 151);
    --encre-3: oklch(0.600 0.008 151);
    --ligne: oklch(0.906 0.006 151);
    --ligne-2: oklch(0.944 0.004 151);
  }
}

/* ---------- Base ---------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas);
  color: var(--encre);
  font-family: 'Libre Franklin', system-ui, -apple-system, sans-serif;
  font-size: var(--pas-2);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 84px; /* place du player permanent */
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--peyi-vert); color: var(--surface); }

/* Cible tactile confortable, exigée par l'usage mobile à une main */
.btn, button, a[role="button"] { min-height: 44px; }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--peyi-vert);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.conteneur { max-width: 1320px; margin: 0 auto; padding: 0 var(--gouttiere); }

.titre {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.04;
  text-wrap: balance;
}
.kicker {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--pas-0);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Rubrique : le mot lui-même porte la couleur, sans pastille ni filet latéral */
.rubrique {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--peyi-vert);
}
.rubrique.urgent { color: var(--peyi-rouge); }
.date { font-size: var(--pas-0); color: var(--encre-3); }

/* ---------- Bandeau ------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--ligne);
}
/* Unique apparition de la polychromie de marque */
.header-filet {
  height: 3px;
  background: linear-gradient(90deg, var(--peyi-vert-clair), var(--peyi-jaune) 35%, var(--peyi-orange) 65%, var(--peyi-rouge));
}
.header-bar {
  max-width: 1320px; margin: 0 auto;
  padding: 10px var(--gouttiere);
  display: flex; align-items: center; gap: 10px;
}
.header-logo { height: 44px; width: auto; }
.header-espace { flex: 1 1 auto; }

/* Boutons d'en-tête : pas de cadre, l'icône porte le sens et le survol suffit
   à signaler la zone cliquable. La hauteur reste tactile (40 px). */
.btn-menu, .btn-tete, .btn-icone {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 9px;
  border: 0; border-radius: var(--r-sm);
  background: transparent;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  transition: background 180ms var(--sortie), color 180ms var(--sortie);
}
.btn-menu:hover, .btn-tete:hover, .btn-icone:hover { background: var(--surface-2); }
.btn-icone { width: 40px; padding: 0; }
.btn-menu { width: 40px; padding: 0; gap: 0; }
.btn-menu .barres { display: grid; gap: 4px; }
.btn-menu .barres span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; }

.pastille-direct {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--peyi-rouge);
  animation: peyi-pulse 1.6s var(--sortie) infinite;
}
@keyframes peyi-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Icône du direct : le pictogramme porte le sens, la pastille rouge signale
   que ça diffuse en ce moment. */
.icone-tete { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.icone-tete .pastille-direct { position: absolute; top: -2px; right: -3px; }
.btn-tete .libelle-court { display: none; }

.header-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 860px) {
  /* En mobile on garde un mot court : l'icône seule reste ambiguë entre
     « écouter » et « regarder ». */
  .btn-tete .libelle { display: none; }
  .btn-tete .libelle-court { display: inline; }
  .btn-tete { padding: 0 11px; gap: 7px; }
}
@media (max-width: 420px) {
  .btn-tete .libelle-court { display: none; }
  .btn-tete { width: 44px; padding: 0; }
  .header-actions { gap: 6px; }
}

/* ---------- Menu latéral (panneau glissant) ------------------------------- */
.menu-voile {
  position: fixed; inset: 0; z-index: 88;
  background: rgba(23, 26, 24, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 280ms var(--sortie);
}
.menu-voile.ouvert { opacity: 1; pointer-events: auto; }
.menu-panneau {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 92;
  width: min(420px, 100%);
  background: var(--surface);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 320ms var(--sortie);
  overflow-y: auto;
  box-shadow: 0 0 60px rgba(23, 26, 24, 0.25);
}
.menu-panneau.ouvert { transform: translateX(0); }
.menu-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ligne);
}
.menu-tete img { height: 40px; width: auto; }
.menu-nav { padding: 8px 20px 4px; }
.menu-entree {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 62px; padding: 0;
  border-bottom: 1px solid var(--ligne-2);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--pas-4); font-weight: 700; letter-spacing: -0.015em;
  text-align: left;
}
.menu-entree:hover { color: var(--peyi-vert); }
.menu-entree .chevron {
  font-size: 1.4rem; color: var(--encre-3);
  transition: transform 220ms var(--sortie);
}
.menu-entree[aria-expanded="true"] .chevron { transform: rotate(90deg); }
/* Repli : on anime la grille, jamais la hauteur */
.menu-sous { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--sortie); }
.menu-sous.ouvert { grid-template-rows: 1fr; }
.menu-sous > ul { overflow: hidden; margin: 0; padding: 0; list-style: none; }
.menu-sous a {
  display: block; padding: 10px 0 10px 2px;
  font-size: var(--pas-2); font-weight: 600; color: var(--encre-2);
}
.menu-sous a:hover { color: var(--peyi-vert); }
/* Avis d'obsèques et annonces légales sont très consultés : ils gardent la
   typographie des rubriques. Les autres restent des liens utilitaires. */
.menu-services { padding: 0 20px 4px; }
.menu-services ul { margin: 0; padding: 0; list-style: none; display: grid; }
.menu-services > ul > li > a { display: block; padding: 9px 0; font-size: var(--pas-1); font-weight: 600; color: var(--encre-3); }
.menu-services > ul > li > a:hover { color: var(--encre); }
.menu-services li.majeur > a {
  display: flex; align-items: center;
  min-height: 62px; padding: 0;
  border-bottom: 1px solid var(--ligne-2);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--pas-4); font-weight: 700; letter-spacing: -0.015em;
  color: var(--encre);
}
.menu-services li.majeur > a:hover { color: var(--peyi-vert); }
/* Les liens utilitaires reprennent après le dernier service mis en avant. */
.menu-services li.majeur + li:not(.majeur) a { padding-top: 16px; }
.menu-pied {
  margin-top: auto; padding: 18px 20px 26px;
  border-top: 1px solid var(--ligne);
  display: flex; gap: 10px;
}
.menu-pied a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--ligne); border-radius: 50%;
  transition: background 180ms var(--sortie), border-color 180ms var(--sortie);
}
.menu-pied a:hover { background: var(--peyi-vert); border-color: var(--peyi-vert); color: var(--surface); }

/* ---------- Le direct (radio + TV, traitement strictement identique) ------- */
.direct-grille {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
  margin: 22px 0 34px;
}
@media (min-width: 900px) { .direct-grille { grid-template-columns: 5fr 7fr; } }

.direct-carte {
  background: var(--sombre);
  color: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.direct-tete {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--sombre-2);
}
.badge-direct {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 8px; border-radius: var(--r-sm);
  background: var(--peyi-rouge); color: var(--surface);
  font-family: 'Archivo', sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em;
}
.badge-direct .point { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: peyi-pulse 1.6s var(--sortie) infinite; }
.direct-tete .support { font-family: 'Archivo', sans-serif; font-weight: 700; letter-spacing: 0.16em; font-size: var(--pas-0); color: var(--peyi-vert-clair); }
.direct-tete .capter { margin-left: auto; font-size: var(--pas-0); color: rgba(253, 254, 253, 0.62); }

.direct-corps { display: flex; gap: 16px; padding: 18px 16px; align-items: center; flex: 1 1 auto; }
.direct-visuel {
  flex: 0 0 96px; height: 96px; border-radius: var(--r-md);
  background: var(--sombre-2); object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; color: rgba(253, 254, 253, 0.45); text-align: center;
}
.direct-infos { min-width: 0; }
.direct-creneau { margin: 0 0 4px; font-family: 'Archivo', sans-serif; font-size: var(--pas-0); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--peyi-vert-clair); }
.direct-titre { margin: 0 0 6px; font-size: var(--pas-4); }
.direct-desc { margin: 0 0 14px; font-size: var(--pas-1); color: rgba(253, 254, 253, 0.68); }

.btn-primaire {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 20px; border-radius: var(--r-sm);
  background: var(--peyi-vert); color: var(--surface);
  font-family: 'Archivo', sans-serif; font-size: var(--pas-1); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 180ms var(--sortie);
}
.btn-primaire:hover { background: var(--peyi-vert-fonce); color: var(--surface); }
.btn-secondaire {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 20px; border-radius: var(--r-sm);
  border: 1px solid var(--ligne); background: var(--surface);
  font-family: 'Archivo', sans-serif; font-size: var(--pas-1); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 180ms var(--sortie), border-color 180ms var(--sortie);
}
.btn-secondaire:hover { background: var(--surface-2); border-color: var(--encre-3); }
/* Sur fond sombre (cartes du direct), le bouton reste lisible : contour clair, fond transparent */
.direct-carte .btn-secondaire {
  background: transparent; color: var(--surface);
  border-color: rgba(253, 254, 253, 0.28);
}
.direct-carte .btn-secondaire:hover { background: rgba(253, 254, 253, 0.1); border-color: var(--peyi-vert-clair); color: var(--peyi-vert-clair); }

.tv-cadre { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0B0D0B; }
.tv-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.tv-pied .encours { margin: 0; font-family: 'Archivo', sans-serif; font-size: var(--pas-0); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--peyi-vert-clair); }
.tv-pied .prog { margin: 2px 0 0; font-family: 'Archivo', sans-serif; font-size: var(--pas-3); font-weight: 800; }

/* ---------- En-têtes de section ------------------------------------------- */
.sec { margin-bottom: clamp(28px, 4vw, 44px); }
.sec-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.sec-titre {
  margin: 0; font-family: 'Archivo', sans-serif; font-size: var(--pas-4);
  font-weight: 800; letter-spacing: -0.02em;
  text-wrap: balance; /* évite les titres hachés en colonne étroite */
}
.sec-tete { flex-wrap: wrap; }
.sec-tete .trait { flex: 1 1 auto; height: 1px; background: var(--ligne); }
.sec-tete .trait.accent { height: 2px; background: var(--peyi-vert); }
.sec-tete .plus { font-family: 'Archivo', sans-serif; font-size: var(--pas-1); font-weight: 700; color: var(--peyi-vert); }

/* ---------- À la une ------------------------------------------------------ */
.une { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .une { grid-template-columns: 7fr 5fr; } }

.une-main { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-lg); overflow: hidden; }
.une-media { position: relative; aspect-ratio: 16 / 9; background: var(--ligne-2); }
.une-media img { width: 100%; height: 100%; object-fit: cover; }
.une-corps { padding: clamp(18px, 2.4vw, 26px); }
.une-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.une-titre { margin: 0 0 12px; font-size: var(--pas-5); max-width: 22ch; }
.une-chapo { margin: 0 0 18px; font-size: var(--pas-3); line-height: 1.45; color: var(--encre-2); max-width: 68ch; text-wrap: pretty; }
.une-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--ligne-2); }
.lien-lire { font-family: 'Archivo', sans-serif; font-size: var(--pas-2); font-weight: 700; color: var(--peyi-vert); border-bottom: 2px solid currentColor; padding-bottom: 2px; }

.une-cote { display: grid; gap: 12px; align-content: start; }
.breve {
  display: flex; gap: 14px; padding: 12px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-md);
  transition: border-color 180ms var(--sortie), background 180ms var(--sortie);
}
.breve:hover { border-color: var(--peyi-vert); background: var(--surface-2); }
.breve-media { flex: 0 0 104px; height: 78px; border-radius: var(--r-sm); overflow: hidden; background: var(--ligne-2); }
.breve-media img { width: 100%; height: 100%; object-fit: cover; }
.breve-titre { margin: 6px 0 5px; font-family: 'Archivo', sans-serif; font-size: var(--pas-2); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }

/* ---------- Partage ------------------------------------------------------- */
.partage { display: flex; align-items: center; gap: 8px; }
.partage .libelle { font-family: 'Archivo', sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-3); }
.partage a, .partage button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  border: 1px solid var(--ligne); border-radius: var(--r-sm);
  color: var(--encre-3);
  transition: color 180ms var(--sortie), border-color 180ms var(--sortie);
}
.partage a:hover, .partage button:hover { color: var(--peyi-vert); border-color: var(--peyi-vert); }
.carte .partage { opacity: 0; transition: opacity 200ms var(--sortie); }
.carte:hover .partage, .carte:focus-within .partage { opacity: 1; }
@media (hover: none) { .carte .partage { opacity: 1; } }

/* ---------- Filtres de rubrique ------------------------------------------- */
.filtres { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: none; }
.filtres::-webkit-scrollbar { display: none; }
.filtre {
  flex: 0 0 auto; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--ligne); border-radius: 999px;
  background: var(--surface);
  font-family: 'Archivo', sans-serif; font-size: var(--pas-1); font-weight: 600;
  transition: background 180ms var(--sortie), color 180ms var(--sortie), border-color 180ms var(--sortie);
}
.filtre:hover { border-color: var(--encre-3); }
.filtre.actif { background: var(--encre); color: var(--surface); border-color: var(--encre); }

/* ---------- Grille d'actualités ------------------------------------------- */
.actus { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
/* Bloc « Dernières actualités » de la home : trois lignes, quel que soit le
   filtre. `auto-fill` ne permet pas de compter les colonnes, donc on les fixe
   par palier et on masque ce qui dépasse la troisième ligne. Le bouton
   « Toutes les actualités » prend le relais. */
.actus.trois-lignes { grid-template-columns: 1fr; }
.actus.trois-lignes > :nth-child(n + 4) { display: none; }
@media (min-width: 620px) {
  .actus.trois-lignes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actus.trois-lignes > :nth-child(n + 4) { display: flex; }
  .actus.trois-lignes > :nth-child(n + 7) { display: none; }
}
@media (min-width: 900px) {
  .actus.trois-lignes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .actus.trois-lignes > :nth-child(n + 7) { display: flex; }
  .actus.trois-lignes > :nth-child(n + 10) { display: none; }
}
@media (min-width: 1280px) {
  .actus.trois-lignes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .actus.trois-lignes > :nth-child(n + 10) { display: flex; }
  .actus.trois-lignes > :nth-child(n + 13) { display: none; }
}
.carte {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 180ms var(--sortie), transform 180ms var(--sortie);
}
.carte:hover { border-color: var(--peyi-vert); }
.carte-media {
  /* L'image est sortie du flux : sinon sa hauteur intrinsèque sert de taille de
     base au conteneur flex et prend le pas sur l'aspect-ratio — les visuels de
     la grille n'ont alors plus tous la même hauteur. */
  position: relative; display: block; aspect-ratio: 16 / 10;
  overflow: hidden; flex: 0 0 auto; background: var(--ligne-2);
}
.carte-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.carte-corps { display: flex; flex-direction: column; gap: 8px; padding: 14px 15px 12px; flex: 1 1 auto; }
.carte-titre { margin: 0; font-family: 'Archivo', sans-serif; font-size: var(--pas-3); font-weight: 700; line-height: 1.12; letter-spacing: -0.012em; }
.carte-chapo { margin: 0; font-size: var(--pas-1); line-height: 1.45; color: var(--encre-2); }
.carte-date { margin: auto 0 0; }
/* La barre de partage d'une carte n'apparaît qu'au survol : en pleine taille
   elle creusait un vide sous la date. On la garde compacte. */
.carte-corps { padding-bottom: 8px; }
.carte-pied { padding: 0 15px 9px; }
.carte .partage { gap: 6px; }
.carte .partage .libelle { display: none; }
.carte .partage a, .carte .partage button { min-width: 30px; height: 30px; padding: 0 7px; }

.centre { display: flex; justify-content: center; padding-top: 22px; }

/* ---------- Rails horizontaux (replays, émissions) ------------------------ */
.rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--ligne); border-radius: 999px; }
.rail > * { flex: 0 0 300px; scroll-snap-align: start; }
.rail.serre > * { flex: 0 0 210px; }

.video-carte {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--ligne);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color 180ms var(--sortie);
}
.video-carte:hover { border-color: var(--peyi-vert); }
/* `.video-media` est un lien, donc inline par défaut : sans `display: block`
   son aspect-ratio était ignoré et la vignette YouTube s'affichait en 4:3,
   bandes noires comprises. L'image est sortie du flux pour que le cadrage
   16/9 recadre ces bandes au lieu de les montrer. */
.video-media {
  position: relative; display: block; aspect-ratio: 16 / 9;
  overflow: hidden; flex: 0 0 auto; background: var(--sombre);
}
.video-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.video-duree {
  position: absolute; right: 8px; bottom: 8px;
  padding: 3px 7px; border-radius: 3px;
  background: rgba(23, 26, 24, 0.78); color: var(--surface);
  font-size: 0.6875rem; font-weight: 600;
}
.video-lecture {
  position: absolute; left: 8px; top: 8px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); color: var(--encre);
  display: flex; align-items: center; justify-content: center;
}
.video-corps { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; flex: 1 1 auto; }
.video-titre {
  margin: 1px 0 0; font-family: 'Archivo', sans-serif;
  font-size: var(--pas-2); font-weight: 700; line-height: 1.16;
  /* Les titres YouTube sont longs : on borne à trois lignes pour que toutes
     les vignettes du rail gardent la même allure. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.video-chapo {
  margin: 0; font-size: var(--pas-0); line-height: 1.4; color: var(--encre-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.video-date { margin: auto 0 0; padding-top: 4px; }

.emission-carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-md); overflow: hidden; }
.emission-visuel {
  aspect-ratio: 4 / 3; background: var(--ligne-2);
  display: flex; align-items: center; justify-content: center;
}
.emission-vide { font-size: var(--pas-0); color: var(--encre-3); }
.emission-creneau {
  margin: 0 0 3px;
  font-family: 'Archivo', sans-serif; font-size: var(--pas-1);
  font-weight: 700; color: var(--peyi-vert);
}
.emission-visuel img { width: 100%; height: 100%; object-fit: cover; }
.emission-corps { padding: 12px 14px 16px; border-top: 2px solid var(--peyi-vert); }
.emission-nom { margin: 0 0 4px; font-family: 'Archivo', sans-serif; font-size: var(--pas-3); font-weight: 700; line-height: 1.05; }
.emission-horaire { margin: 0; font-size: var(--pas-0); color: var(--encre-3); }

/* ---------- Podcasts ------------------------------------------------------ */
/* Duo : la liste de podcasts porte le contenu, le rail d'émissions accompagne.
   `minmax(0, …)` est indispensable — sans lui, le rail en défilement horizontal
   force l'élargissement de sa colonne et écrase celle de gauche. */
.duo { display: grid; gap: 24px; grid-template-columns: 1fr; }
.duo > * { min-width: 0; }
@media (min-width: 1040px) { .duo { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }
.podcasts { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.podcast {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-md);
  transition: border-color 180ms var(--sortie);
}
.podcast:hover { border-color: var(--peyi-vert); }
.btn-lire {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--peyi-vert); color: var(--peyi-vert);
  transition: background 180ms var(--sortie), color 180ms var(--sortie);
}
.btn-lire:hover { background: var(--peyi-vert); color: var(--surface); }
.podcast-corps { flex: 1 1 auto; min-width: 0; }
.podcast-emission {
  margin: 0 0 3px;
  font-family: 'Archivo', sans-serif; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--encre-3);
}
.podcast-titre {
  margin: 0; font-family: 'Archivo', sans-serif; font-size: var(--pas-2);
  font-weight: 700; line-height: 1.2;
}
.podcast-meta {
  flex: 0 0 auto; text-align: right; font-size: var(--pas-0);
  color: var(--encre-3); white-space: nowrap;
}

/* ---------- Services : obsèques et WhatsApp ------------------------------- */
.service {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-lg);
  padding: clamp(18px, 2.5vw, 28px);
  display: grid; gap: 14px;
}
.service h2 { margin: 0; font-family: 'Archivo', sans-serif; font-size: var(--pas-4); font-weight: 800; }
.service p { margin: 0; color: var(--encre-2); max-width: 62ch; }
.service-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.champ {
  min-height: 46px; padding: 0 14px;
  border: 1px solid var(--ligne); border-radius: var(--r-sm);
  background: var(--surface); font: inherit; color: var(--encre);
  min-width: 200px;
}
.champ::placeholder { color: var(--encre-3); }
.duo-services { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .duo-services { grid-template-columns: 1fr 1fr; } }

/* Blocs de service : pleine largeur, plus affirmés que de simples cartes */
.bloc-service {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.6vw, 30px);
}
.bloc-service-grille {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}
.bloc-service-titre {
  margin: 0 0 8px;
  font-family: 'Archivo', sans-serif; font-size: var(--pas-4); font-weight: 800; letter-spacing: -0.02em;
}
.bloc-service-texte { margin: 0; font-size: var(--pas-2); line-height: 1.5; color: var(--encre-2); max-width: 60ch; }
.bloc-service-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bloc-service-actions .champ { flex: 1 1 160px; }

/* WhatsApp : teinte verte franche, sans aplat plein écran ni filet latéral */
.bloc-whatsapp {
  border: 1px solid var(--peyi-vert);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.6vw, 30px);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(12, 135, 55, 0.09), transparent 60%),
    var(--surface);
}
.wa-texte { display: flex; gap: 16px; align-items: flex-start; }
.wa-icone {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--peyi-vert); color: var(--surface);
}
.bloc-whatsapp .kicker { color: var(--peyi-vert); font-size: var(--pas-1); }
.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--r-sm);
  background: #1FA855; color: #FDFEFD;
  font-family: 'Archivo', sans-serif; font-weight: 700; letter-spacing: 0.04em;
  transition: background 180ms var(--sortie);
}
.btn-whatsapp:hover { background: #17843F; color: #FDFEFD; }

/* ---------- Pied de page -------------------------------------------------- */
.site-footer {
  background: var(--sombre); color: var(--surface);
  margin-top: clamp(28px, 5vw, 56px);
  padding: clamp(28px, 4vw, 44px) 0 32px;
}
.footer-grille { display: grid; gap: 28px; grid-template-columns: 1fr; }
/* La dernière colonne porte les catégories et les services : on lui donne
   plus de place pour les répartir, au lieu d'une liste qui descend seule. */
@media (min-width: 900px) { .footer-grille { grid-template-columns: 1.1fr 1.1fr 0.9fr 1.5fr; } }
.footer-titre {
  margin: 0 0 12px;
  font-family: 'Archivo', sans-serif; font-size: var(--pas-0); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(253, 254, 253, 0.55);
}
.footer-logo { height: 52px; width: auto; background: var(--surface); border-radius: var(--r-sm); padding: 6px 10px; }
.site-footer p { color: rgba(253, 254, 253, 0.72); }

.freqs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.freq {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: 1px solid rgba(253, 254, 253, 0.14); border-radius: var(--r-sm);
}
.freq .ville { font-size: var(--pas-0); }
.freq .mhz { font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--peyi-vert-clair); }

.canaux { display: grid; gap: 8px; }
.canal {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border: 1px solid rgba(253, 254, 253, 0.14); border-radius: var(--r-sm);
}
.canal .operateur { display: inline-flex; align-items: center; gap: 10px; font-size: var(--pas-1); }
/* Emplacement réservé aux logos officiels des opérateurs */
.canal .logo-op {
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; min-width: 58px; padding: 0 8px;
  border: 1px dashed rgba(253, 254, 253, 0.28); border-radius: 3px;
  font-size: 0.625rem; letter-spacing: 0.08em; color: rgba(253, 254, 253, 0.6);
}
.canal .num { font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--peyi-vert-clair); }
.footer-liens { display: grid; gap: 2px; }
/* Quatorze catégories en file indienne allongeaient le pied de page sans
   raison : on les répartit dès qu'il y a la largeur. */
@media (min-width: 620px) {
  .footer-liens.deux-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}
.footer-liens a { display: inline-flex; align-items: center; min-height: 34px; color: rgba(253, 254, 253, 0.78); font-size: var(--pas-1); }
.footer-liens a:hover { color: var(--surface); }
.footer-bas {
  margin-top: 28px; padding-top: 18px;
  border-top: 1px solid rgba(253, 254, 253, 0.12);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: var(--pas-0); color: rgba(253, 254, 253, 0.55);
}
.reseaux { display: flex; gap: 8px; }
.reseaux a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid rgba(253, 254, 253, 0.18); border-radius: 50%;
  font-family: 'Archivo', sans-serif; font-size: var(--pas-0); font-weight: 700;
  transition: background 180ms var(--sortie);
}
.reseaux a:hover { background: var(--peyi-vert); border-color: var(--peyi-vert); }

/* ---------- Player radio permanent ---------------------------------------- */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  /* Dégradé + ombre portée vers le haut : la barre se détache du contenu au
     lieu d'être posée à plat contre le bas de l'écran. */
  background: linear-gradient(180deg, var(--sombre-2) 0%, var(--sombre) 100%);
  color: var(--surface);
  border-top: 1px solid rgba(253, 254, 253, 0.08);
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.34);
}
.player-bar {
  max-width: 1320px; margin: 0 auto;
  padding: 8px var(--gouttiere);
  display: flex; align-items: center; gap: 12px;
}
.player-visuel {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: var(--r-sm);
  background: var(--sombre-2); object-fit: cover;
}
.player-infos { flex: 1 1 auto; min-width: 0; }
.player-emission {
  font-family: 'Archivo', sans-serif; font-size: var(--pas-2); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-emission a:hover { color: var(--peyi-vert-clair); }
.player-sous { display: flex; align-items: center; gap: 7px; font-size: var(--pas-0); color: rgba(253, 254, 253, 0.6); }
.player-sous .point { width: 6px; height: 6px; border-radius: 50%; background: var(--peyi-rouge); animation: peyi-pulse 1.6s var(--sortie) infinite; }
.btn-play {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--peyi-vert); color: var(--surface);
  transition: background 180ms var(--sortie);
}
.btn-play:hover { background: var(--peyi-vert-fonce); }
.player-volume { display: none; align-items: center; gap: 8px; flex: 0 0 150px; color: rgba(253, 254, 253, 0.7); }
@media (min-width: 780px) { .player-volume { display: flex; } }
.player-grille { display: none; }
@media (min-width: 980px) {
  .player-grille {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    border: 1px solid rgba(253, 254, 253, 0.2); border-radius: var(--r-sm);
    font-family: 'Archivo', sans-serif; font-size: var(--pas-1); font-weight: 700;
  }
  .player-grille:hover { border-color: var(--peyi-vert-clair); color: var(--peyi-vert-clair); }
}
/* Pendant la TV, la barre reste pleinement opaque : la rendre translucide
   la faisait « baver » sur le contenu et devenait illisible. Seul le bouton
   de lecture s'atténue pour signaler que la radio est en pause. */
.player.tv-active .btn-play { background: var(--sombre-2); color: rgba(253, 254, 253, 0.55); }
.player-note { font-size: var(--pas-0); color: rgba(253, 254, 253, 0.6); }

/* ---------- Personne à l'antenne (player) --------------------------------- */
.player-anime { display: none; }
@media (min-width: 900px) {
  .player-anime {
    display: flex; align-items: center; gap: 10px;
    flex: 0 0 auto; max-width: 240px;
    padding-left: 14px; margin-left: 2px;
    border-left: 1px solid rgba(253, 254, 253, 0.16);
  }
}
.player-anime-photo {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; background: var(--sombre-2);
}
.player-anime-photo.vide { display: block; }
.player-anime-texte { display: grid; min-width: 0; }
.player-anime-role {
  font-family: 'Archivo', sans-serif; font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(253, 254, 253, 0.55);
}
.player-anime-nom {
  font-family: 'Archivo', sans-serif; font-size: var(--pas-1); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.volume-piste { flex: 1 1 auto; height: 4px; border-radius: 2px; background: rgba(253, 254, 253, 0.2); position: relative; cursor: pointer; }
.volume-niveau { position: absolute; inset: 0 auto 0 0; width: 70%; border-radius: 2px; background: var(--surface); }
.volume-niveau::after {
  content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%; background: var(--surface);
}

/* ---------- Mouvement réduit ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Pages intérieures --------------------------------------------- */
.fil {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 16px 0 4px; font-size: var(--pas-0); color: var(--encre-3);
}
.fil a:hover { color: var(--peyi-vert); }

/* Article — mise en page de presse : titre pleine largeur, puis 2 colonnes */
.article { padding: 8px 0 24px; }
.article-entete {
  display: grid; gap: 12px;
  padding-bottom: 22px; margin-bottom: 26px;
  border-bottom: 1px solid var(--ligne);
}
.article-entete .rubrique { justify-self: start; }
/* Le titre occupe toute la largeur du bandeau : c'est lui qui porte la page. */
.article-titre { font-size: var(--pas-5); max-width: none; }

.article-grille { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.article-principal { min-width: 0; }
.article-aside { min-width: 0; display: grid; gap: 20px; align-content: start; }
@media (min-width: 1040px) {
  .article-grille { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; }
  /* La colonne suit la lecture sans jamais dépasser la hauteur d'écran */
  .article-aside { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
}

/* Colonne de droite */
.aside-bloc { }
.aside-titre {
  margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 2px solid var(--peyi-vert);
  font-family: 'Archivo', sans-serif; font-size: var(--pas-1);
  font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.aside-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.aside-lien {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--ligne-2);
}
.aside-lien:hover .aside-nom { color: var(--peyi-vert); }
.aside-vignette {
  flex: 0 0 84px; height: 60px; border-radius: var(--r-sm);
  background: var(--ligne-2); overflow: hidden; display: block;
}
.aside-vignette img { width: 100%; height: 100%; object-fit: cover; }
.aside-nom {
  display: block; margin-top: 3px;
  font-family: 'Archivo', sans-serif; font-size: var(--pas-1);
  font-weight: 700; line-height: 1.25;
}
.aside-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.encart-direct { padding: 16px; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-md); }
.encart-direct .aside-titre { border-bottom-color: var(--peyi-vert); }
.plus-lus.compact li { padding: 10px 0; }
.plus-lus.compact a { font-size: var(--pas-1); }
.article-figure { margin: 0 0 20px; }
.article-figure img { width: 100%; border-radius: var(--r-lg); }
.article-chapo {
  margin: 0; font-size: var(--pas-3); line-height: 1.5;
  color: var(--encre-2); font-weight: 500; max-width: 72ch;
}
.article-corps { margin-top: 18px; display: grid; gap: 16px; max-width: 68ch; }
.article-corps p { margin: 0; font-size: var(--pas-2); line-height: 1.65; color: var(--encre-2); }
.article-corps h2 { margin: 10px 0 0; font-family: 'Archivo', sans-serif; font-size: var(--pas-4); font-weight: 800; }
.article-corps a { color: var(--peyi-vert); text-decoration: underline; }
.article-corps img { max-width: 100%; border-radius: var(--r-md); }
.article-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--ligne);
}

/* Les plus lus / dernières */
.plus-lus { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; counter-reset: n; }
.plus-lus li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--ligne-2);
}
.plus-lus .rang {
  font-family: 'Archivo', sans-serif; font-size: var(--pas-3); font-weight: 800;
  color: var(--peyi-vert); min-width: 1.4em;
}
.plus-lus a { font-family: 'Archivo', sans-serif; font-weight: 600; line-height: 1.2; }
.plus-lus a:hover { color: var(--peyi-vert); }

/* Grille des programmes */
.grille { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.creneau {
  display: flex; align-items: center; gap: 16px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-md);
}
.creneau.en-cours { border-color: var(--peyi-vert); background: var(--surface-2); }
.creneau-heure {
  flex: 0 0 64px; font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: var(--pas-1); color: var(--encre-2); line-height: 1.3;
}
.creneau-visuel {
  flex: 0 0 64px; height: 64px; border-radius: var(--r-sm);
  background: var(--ligne-2); overflow: hidden;
}
.creneau-visuel img { width: 100%; height: 100%; object-fit: cover; }
.creneau-infos { flex: 1 1 auto; min-width: 0; }
.creneau-nom { margin: 0 0 2px; font-family: 'Archivo', sans-serif; font-size: var(--pas-3); font-weight: 700; }
.etiquette-direct {
  flex: 0 0 auto; padding: 4px 10px; border-radius: 999px;
  background: var(--peyi-rouge); color: var(--surface);
  font-family: 'Archivo', sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}

/* Fréquences (page dédiée) */
.freqs-claires { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.freq-carte {
  display: grid; gap: 2px; padding: 16px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-md);
}
.freq-ville { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: var(--pas-1); }
.freq-mhz { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: var(--pas-4); color: var(--peyi-vert); line-height: 1; }

/* Étapes (annonces légales) */
.etapes { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.etape {
  display: flex; gap: 14px; padding: 14px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-md);
}
.etape-num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--peyi-vert); color: var(--surface);
  font-family: 'Archivo', sans-serif; font-weight: 800;
}
.etape-titre { margin: 4px 0 4px; font-family: 'Archivo', sans-serif; font-size: var(--pas-2); font-weight: 700; }

/* Formulaires */
.formulaire { display: grid; gap: 10px; margin-top: 14px; }
.champ.zone { min-height: 140px; padding: 12px 14px; line-height: 1.5; resize: vertical; }

/* ---------- Avis d'obsèques : registre sobre ------------------------------ */
/* Ton apaisé, aucun rouge, pas d'animation : le contexte l'impose. */
.sobre .rubrique, .sobre .badge-direct { color: var(--encre-2); }
.avis-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.avis {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-md);
  transition: border-color 180ms var(--sortie);
}
.avis:hover { border-color: var(--encre-3); }
.avis-photo {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%;
  background: var(--ligne-2); overflow: hidden;
}
.avis-photo.grande { flex-basis: 104px; width: 104px; height: 104px; }
.avis-photo img { width: 100%; height: 100%; object-fit: cover; }
.avis-nom { margin: 0 0 2px; font-family: 'Archivo', sans-serif; font-size: var(--pas-2); font-weight: 700; }

.avis-fiche {
  max-width: 720px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 34px);
}
.avis-entete { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.avis-titre { margin: 0 0 4px; font-family: 'Archivo', sans-serif; font-size: var(--pas-4); font-weight: 700; letter-spacing: -0.01em; }
.avis-texte { font-size: var(--pas-2); line-height: 1.7; color: var(--encre-2); max-width: 62ch; }
.avis-encarts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 22px; }
.avis-encart { padding: 14px 16px; border: 1px solid var(--ligne); border-radius: var(--r-md); background: var(--surface-2); }
.avis-encart .kicker { color: var(--encre-3); display: block; margin-bottom: 6px; }
.avis-encart p { margin: 0; font-size: var(--pas-1); }
.avis-pied { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--ligne); }

/* ---------- « À l'antenne aujourd'hui » ------------------------------------
   Liste verticale plutôt qu'un carrousel : même rythme que la colonne
   podcasts, et l'information utile en tête (ce qui passe maintenant). */
.antenne { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.antenne-ligne {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-md);
  transition: border-color 180ms var(--sortie);
}
.antenne-ligne:hover { border-color: var(--encre-3); }
.antenne-ligne.en-cours { border-color: var(--peyi-vert); background: var(--surface-2); }
.antenne-heure {
  flex: 0 0 auto; min-width: 3.4em;
  font-family: 'Archivo', sans-serif; font-size: var(--pas-2); font-weight: 800;
  color: var(--peyi-vert); font-variant-numeric: tabular-nums;
}
.antenne-infos { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.antenne-nom {
  font-family: 'Archivo', sans-serif; font-size: var(--pas-2); font-weight: 700;
  line-height: 1.2;
}
.antenne-fin { flex: 0 0 auto; font-size: var(--pas-0); color: var(--encre-3); white-space: nowrap; }
.antenne-badge {
  flex: 0 0 auto; padding: 4px 10px; border-radius: 999px;
  background: var(--peyi-rouge); color: var(--surface);
  font-family: 'Archivo', sans-serif; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}

/* ---------- Lecteurs externes (Ausha, YouTube) ---------------------------- */
.lecteur-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--sombre); border-radius: var(--r-lg); overflow: hidden; }
.lecteur-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lecteur-audio { width: 100%; border-radius: var(--r-md); overflow: hidden; }
.lecteur-audio iframe { width: 100%; height: 220px; border: 0; display: block; }
/* Vignette des replays dans la liste */
/* Le cadre suit le format de la source, pour ne rien rogner :
   16:9 pour les miniatures YouTube, carré pour les pochettes Ausha (1400×1400). */
.podcast-vignette {
  flex: 0 0 112px; width: 112px; aspect-ratio: 16 / 9;
  border-radius: var(--r-sm); overflow: hidden; background: var(--ligne-2);
}
.podcast-vignette img { width: 100%; height: 100%; object-fit: cover; }

/* Pochette de podcast : carrée, donc affichée telle quelle */
.podcast-vignette.carree { flex: 0 0 72px; width: 72px; aspect-ratio: 1 / 1; }
@media (max-width: 560px) {
  .podcast-vignette { display: none; } /* la place manque : on garde titre et bouton */
}

/* ---------- Logos des opérateurs TV --------------------------------------
   Fichiers officiels affichés tels quels. Chaque logo porte sa propre couleur
   de marque (Orange orange, CANAL+ noir, SFR rouge) : une pastille blanche les
   isole du fond, sombre en pied de page comme clair sur les pages intérieures. */
.operateur-logo {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  background: #FFFFFF;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.operateur-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.operateur-nom { font-family: 'Archivo', sans-serif; font-weight: 700; }

/* Carte « diffuseur » (pages Télé Péyi et Fréquences) */
.diffuseur { display: grid; gap: 10px; justify-items: start; align-content: start; }
.diffuseur .operateur-logo { border: 1px solid var(--ligne); }
.diffuseur-canal {
  margin: 0; font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: var(--pas-3); color: var(--peyi-vert);
}

/* Icônes de marque (réseaux et partage) : monochromes, elles héritent de la
   couleur du texte et passent au vert au survol, comme le reste des liens. */
.reseaux a svg, .partage a svg, .partage button svg { display: block; }
.partage a:hover svg, .partage button:hover svg { color: var(--peyi-vert); }

/* Mention de l'éditeur, en pied de page */
.footer-editeur {
  padding: 10px 0 18px;
  font-size: 11.5px;
  opacity: .5;
  text-align: center;
}

/* Crédit photo et publications intégrées */
.article-figure { margin: 0 0 18px; }
.article-credit { margin-top: 6px; font-size: 11.5px; opacity: .6; text-align: right; }
.publication { margin: 22px 0; }
.publication iframe { width: 100%; border: 0; border-radius: 12px; display: block; }
.publication--video iframe { aspect-ratio: 16 / 9; height: auto; }
.publication--post iframe { min-height: 520px; }
.publication--insta iframe { min-height: 560px; max-width: 540px; margin: 0 auto; }

/* Les deux grilles du jour sont EMPILÉES : côte à côte, elles écrasaient les
   titres sur trois lignes dans une colonne déjà étroite. */
.antennes { display: grid; gap: 26px; }

/* Version compacte : une ligne par créneau, sans repli du titre */
.antenne--compacte .antenne-ligne { padding: 9px 12px; gap: 10px; align-items: center; }
.antenne--compacte .antenne-heure { font-size: 13px; min-width: 44px; flex-shrink: 0; }
.antenne--compacte .antenne-nom {
  font-size: 14px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.antenne--compacte .antenne-infos { min-width: 0; }
.antenne--compacte .antenne-fin { font-size: 12px; opacity: .55; flex-shrink: 0; }
.antenne--compacte .antenne-badge { font-size: 10px; padding: 3px 8px; flex-shrink: 0; }
.antenne--compacte .en-cours .antenne-nom { white-space: normal; }

/* ============================================================
   RECHERCHE — panneau déroulant du bandeau
   ============================================================ */
.recherche-panneau {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 44px rgba(0,0,0,.14);
  z-index: 90;
  padding: 16px 0 20px;
}
.recherche-barre {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid rgba(0,0,0,.1); border-radius: 14px; padding: 10px 14px;
}
.recherche-barre input { flex: 1; border: 0; outline: none; font-size: 16px; background: transparent; }
.recherche-fermer { border: 0; background: none; font-size: 26px; line-height: 1; color: #999; cursor: pointer; }
.recherche-resultats {
  margin-top: 14px; display: grid; gap: 4px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  max-height: 62vh; overflow: auto;
}
.recherche-vide { color: #888; padding: 10px 2px; margin: 0; }
.recherche-ligne {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px; border: 0; border-radius: 10px; background: none;
  cursor: pointer; text-align: left;
}
.recherche-ligne:hover { background: rgba(0,0,0,.04); }
.recherche-visuel {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden; background: rgba(0,0,0,.06);
}
.recherche-visuel img { width: 100%; height: 100%; object-fit: cover; }
.recherche-infos { min-width: 0; flex: 1; }
.recherche-titre {
  display: block; font-weight: 700; font-size: 14.5px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recherche-meta { display: block; font-size: 12px; opacity: .6; }
.recherche-type {
  flex-shrink: 0; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(12,135,55,.1); color: #0C8737;
}

/* Créneaux cliquables : la radio lance le direct, la TV ouvre le live */
.antenne-ligne--cliquable {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
  transition: background .15s, transform .15s;
}
.antenne-ligne--cliquable:hover { background: rgba(12, 135, 55, .07); }
.antenne-ligne--cliquable:active { transform: scale(.995); }
.antenne-ligne--cliquable:focus-visible { outline: 2px solid #0C8737; outline-offset: 2px; }
.antenne li { list-style: none; }

/* ============================================================
   CORPS D'ARTICLE — contenus repris de l'ancien site
   ============================================================ */

/* Citations : filet coloré et retrait, comme sur l'ancien site.
   Les articles importés utilisent <blockquote>, souvent avec de l'italique. */
.article-corps blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 4px solid #F5C518;
  font-style: italic;
  font-size: 1.06em;
  line-height: 1.6;
  color: inherit;
}
.article-corps blockquote p { margin: 0 0 10px; }
.article-corps blockquote p:last-child { margin-bottom: 0; }

/* Images insérées dans le texte : jamais débordantes, légende centrée */
.article-corps img {
  max-width: 100%; height: auto; display: block;
  margin: 22px auto; border-radius: 10px;
}
.article-corps figure { margin: 22px 0; }
.article-corps figcaption {
  margin-top: 6px; font-size: 12.5px; opacity: .6; text-align: center;
}

/* Vidéos et intégrations : ratio 16/9 sur toute la largeur */
.article-corps iframe {
  width: 100%; aspect-ratio: 16 / 9; height: auto;
  border: 0; border-radius: 10px; margin: 22px 0; display: block;
}
/* Les anciens articles enveloppent parfois l'iframe dans un conteneur figé */
.article-corps .embed-responsive,
.article-corps .video-container { position: static; padding: 0; height: auto; }

/* Tableaux et contenus larges : défilement propre plutôt que débordement */
.article-corps table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.article-corps td, .article-corps th { padding: 8px 10px; border: 1px solid rgba(0,0,0,.1); }

/* ---------- « Les plus lus » dans la colonne de la une --------------------- */
.plus-lus-bloc {
  background: var(--surface); border: 1px solid var(--ligne);
  border-radius: var(--r-md); padding: 16px 18px 14px;
}
.plus-lus-bloc .sec-tete { margin-bottom: 10px; }
.sec-titre.petit { font-size: var(--pas-2); }
.plus-lus-bloc .plus-lus a { font-size: var(--pas-1); }

/* ---------- VIGNETTES ----------
   Deux blocs, deux formats assumés : les émissions en 16/9, celui que le
   back-office conseille pour leurs visuels ; l'équipe en portrait, cadrage
   naturel d'une photo de studio. Défilement horizontal dans les deux cas,
   pour ne pas repousser le reste de la page. */
.vignettes {
  display: grid; grid-auto-flow: column;
  gap: 18px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.vignettes > * { scroll-snap-align: start; }

/* --- Émissions : carte 16/9, titre dessous --- */
.vignettes--emissions { grid-auto-columns: minmax(210px, 1fr); }
@media (min-width: 900px) { .vignettes--emissions { grid-auto-columns: minmax(248px, 1fr); } }
.vignette { display: flex; flex-direction: column; gap: 10px; color: inherit; }
.vignette-media {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--ligne);
  transition: transform 220ms var(--sortie), border-color 220ms var(--sortie);
}
.vignette-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette-vide {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--ligne) 100%);
}
a.vignette:hover .vignette-media { transform: translateY(-3px); border-color: var(--peyi-vert); }
.vignette-nom {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--pas-2); font-weight: 700; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--encre);
}
a.vignette:hover .vignette-nom { color: var(--peyi-vert); }

/* --- Équipe : portrait 4/5, nom et fonction posés sur l'image ---
   Le texte est dans l'image plutôt qu'en dessous : les cartes gardent une
   hauteur identique quelle que soit la longueur du nom, ce qui n'était pas le
   cas avec la légende sous la photo. */
.vignettes--equipe { grid-auto-columns: minmax(164px, 1fr); }
@media (min-width: 900px) { .vignettes--equipe { grid-auto-columns: minmax(196px, 1fr); } }
.portrait {
  position: relative; margin: 0;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--sombre);
  transition: transform 220ms var(--sortie), box-shadow 220ms var(--sortie);
}
.portrait-media { display: block; width: 100%; aspect-ratio: 4 / 5; }
.portrait-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  display: block;
  transition: transform 400ms var(--sortie);
}
.portrait:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16); }
.portrait:hover .portrait-media img { transform: scale(1.04); }
.portrait-vide {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--ligne) 100%);
}
/* Voile sombre du bas : il porte le texte sans assombrir le visage. */
.portrait-legende {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 34px 14px 12px;
  background: linear-gradient(180deg, rgba(10, 12, 10, 0) 0%, rgba(10, 12, 10, 0.82) 62%, rgba(10, 12, 10, 0.94) 100%);
  color: var(--surface);
}
.portrait-nom {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--pas-2); font-weight: 700; line-height: 1.2;
  letter-spacing: -0.01em;
  /* Un nom long reste sur deux lignes plutôt que d'être coupé. */
  overflow-wrap: anywhere;
}
.portrait-role {
  font-size: 0.78rem; font-weight: 600; line-height: 1.2;
  color: var(--peyi-vert-clair, #9BD8A6);
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* Crédit photo : posé sur le visuel, en bas à gauche, en blanc.
   Un voile en dégradé le rend lisible quelle que soit la photo, sans
   assombrir l'ensemble de l'image. */
.article-figure,
.une-media { position: relative; }
.credit-photo {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 34px 14px 10px;
  font-size: 0.74rem; line-height: 1.3; font-weight: 500;
  color: #FFFFFF;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  background: linear-gradient(180deg, rgba(10, 12, 10, 0) 0%, rgba(10, 12, 10, 0.55) 70%, rgba(10, 12, 10, 0.72) 100%);
  pointer-events: none;
}
/* Les visuels ont un coin arrondi : le voile doit suivre, sinon il déborde. */
.article-figure .credit-photo,
.une-media .credit-photo {
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
}
@media (max-width: 620px) {
  .credit-photo { font-size: 0.68rem; padding: 26px 10px 8px; }
}

/* Justification du corps d'article.
   Les 1 548 articles repris de l'ancien site portent `text-align:justify` en
   dur dans leur HTML ; les nouveaux, non. Plutôt que de réécrire le HTML de
   chacun, on justifie ici : anciens et nouveaux se ressemblent enfin, et le
   jour où la rédaction change d'avis, cela se règle en une ligne.
   `hyphens` évite les rivières blanches que produit une justification sans
   césure sur une colonne étroite. */
.article-corps p { text-align: justify; hyphens: auto; }
/* L'alignement choisi dans l'éditeur reste prioritaire. */
.article-corps p[style*='text-align'] { hyphens: auto; }
.article-corps [style*='text-align:center'],
.article-corps [style*='text-align: center'] { text-align: center !important; }

/* Vidéo insérée dans le corps depuis l'éditeur : TipTap enveloppe l'iframe
   dans un `div[data-youtube-video]`, qui n'a pas de dimension propre. */
.article-corps [data-youtube-video] { margin: 22px 0; }
.article-corps [data-youtube-video] iframe {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  border: 0; border-radius: var(--r-md); display: block;
}

/* Publication insérée dans le corps depuis l'éditeur : le bloc est enfant de
   `.article-corps`, qui contraint la largeur du texte. On l'en affranchit pour
   que le lecteur garde ses proportions. */
.article-corps .publication { margin: 24px 0; }
.article-corps .publication iframe { width: 100%; border: 0; border-radius: var(--r-md); display: block; }
.article-corps .publication--video iframe { aspect-ratio: 16 / 9; height: auto; }
.article-corps .publication--post iframe { min-height: 520px; }
.article-corps .publication--insta iframe { min-height: 560px; max-width: 540px; margin: 0 auto; }
.article-corps .publication-lien { margin: 18px 0; }


/* ---------- OBSÈQUES ----------
   Univers propre, distinct du vert de l'antenne : un violet sourd, sans
   contraste agressif. Les avis n'ont jamais de photo — c'est le pictogramme
   qui tient la vignette, ce qui donne des cartes de hauteur régulière. */
:root {
  --avis-violet: #6D5A9C;
  --avis-violet-clair: #EDE9F5;
  --avis-violet-encre: #4A3D6B;
}

.icone-avis {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; border-radius: 50%;
  background: var(--avis-violet-clair);
  color: var(--avis-violet);
}

/* --- Accueil : les trois natures côte à côte --- */
.avis-colonnes { display: grid; gap: 26px; grid-template-columns: 1fr; margin-bottom: 40px; }
@media (min-width: 780px) { .avis-colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.avis-colonne-tete {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 2px solid var(--avis-violet-clair);
}
.avis-colonne-titre {
  margin: 0; font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--pas-3); font-weight: 800; letter-spacing: -0.02em;
  color: var(--avis-violet-encre);
}
.avis-colonne-lien {
  margin-left: auto; font-size: 0.82rem; font-weight: 700;
  color: var(--avis-violet); text-decoration: none;
}
.avis-colonne-lien:hover { text-decoration: underline; }
.avis-vide { color: var(--encre-3); font-size: var(--pas-1); }

/* --- Cartes --- */
.avis-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 780px) {
  .avis-liste--large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.avis-carte-lien {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--ligne);
  color: inherit; text-decoration: none;
  transition: border-color 180ms var(--sortie), transform 180ms var(--sortie);
}
.avis-carte-lien:hover { border-color: var(--avis-violet); transform: translateY(-2px); }
.avis-carte-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.avis-carte-nom {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--pas-1); font-weight: 700; line-height: 1.3; color: var(--encre);
  /* `anywhere` coupait au milieu d'un mot alors que la ligne suivante était
     libre : on ne casse que les mots qui dépassent réellement. */
  overflow-wrap: break-word;
}
.avis-carte-age { font-size: 0.8rem; color: var(--encre-3); }
.avis-carte-date { font-size: 0.8rem; color: var(--encre-3); white-space: nowrap; }
.avis-carte-etiquette { color: var(--avis-violet); font-weight: 600; }
.avis-carte-chevron {
  flex-shrink: 0; align-self: center;
  font-size: 1.6rem; line-height: 1; color: var(--avis-violet);
  transition: transform 180ms var(--sortie);
}
.avis-carte-lien:hover .avis-carte-chevron { transform: translateX(3px); }

/* --- Fiche détaillée --- */
.avis-fiche { max-width: 760px; margin: 0 auto 44px; }
.avis-fiche-embleme { display: flex; justify-content: center; margin-bottom: 18px; }
.avis-fiche-entete {
  padding: 26px 24px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--ligne);
  text-align: center;
}
.avis-fiche-nature {
  margin: 0 0 8px; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--avis-violet);
}
.avis-fiche-nom {
  margin: 0; font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--pas-5); font-weight: 800; line-height: 1.15;
  letter-spacing: -0.025em; color: var(--encre);
  overflow-wrap: anywhere;
}
.avis-fiche-infos {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  margin: 18px 0 0; padding-top: 18px;
  border-top: 1px solid var(--avis-violet-clair);
}
.avis-fiche-info { display: flex; flex-direction: column; gap: 2px; }
.avis-fiche-info dt {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--avis-violet);
}
.avis-fiche-info dd {
  margin: 0; font-size: var(--pas-1); font-weight: 600; color: var(--encre);
}
.avis-fiche-texte {
  margin-top: 28px; display: grid; gap: 15px;
  font-size: var(--pas-2); line-height: 1.7; color: var(--encre-2);
}
.avis-fiche-texte p { margin: 0; }
.avis-fiche-pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--ligne);
}
.avis-fiche-partage-libelle {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--encre-3);
}
.avis-fiche-partage {
  border-radius: 999px; padding: 7px 14px;
  background: var(--avis-violet-clair); color: var(--avis-violet-encre);
  font-size: 0.82rem; font-weight: 700; text-decoration: none;
}
.avis-fiche-partage:hover { background: var(--avis-violet); color: var(--surface); }

/* Sous-entrées d'un service (les trois natures d'avis d'obsèques).
   Nettement en retrait, avec un filet vertical : on doit lire d'un coup d'œil
   qu'elles dépendent de l'entrée du dessus, et non qu'elles sont ses égales. */
/* Le repli anime la grille, jamais la hauteur — même mécanisme que les
   rubriques. Aucun filet vertical : les sous-menus d'Actualités et d'Émissions
   n'en ont pas, le retrait suffit à marquer la dépendance. */
.menu-services .menu-sous > ul.menu-services-sous {
  margin: 0; padding: 0 0 8px 2px;
  list-style: none; display: grid;
  overflow: hidden;
}
/* Un service à sous-entrées : même barre que les rubriques, avec chevron. */
.menu-service-bascule {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 62px; padding: 0;
  border-bottom: 1px solid var(--ligne-2);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--pas-4); font-weight: 700; letter-spacing: -0.015em;
  text-align: left; color: var(--encre);
}
.menu-service-bascule:hover { color: var(--peyi-vert); }
.menu-service-bascule .chevron {
  font-size: 1.4rem; color: var(--encre-3);
  transition: transform 220ms var(--sortie);
}
.menu-service-bascule[aria-expanded='true'] .chevron { transform: rotate(90deg); }
.menu-services .menu-services-sous a {
  display: block; min-height: 0; padding: 10px 0 10px 2px; border-bottom: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--pas-2); font-weight: 600; letter-spacing: 0;
  color: var(--encre-2);
}
.menu-services .menu-services-sous a:hover { color: var(--peyi-vert); }

/* ---------- ANNONCES LÉGALES ----------
   Registre administratif : plus sobre que l'éditorial, sans couleur d'accent
   inutile. La lisibilité prime sur l'effet. */
/* Deux paragraphes côte à côte en grand écran : la colonne unique laissait la
   moitié droite vide et coupait les lignes très tôt. Chaque colonne garde une
   mesure de lecture confortable. */
.al-intro { display: grid; gap: 14px 44px; max-width: 74ch; }
@media (min-width: 1040px) {
  .al-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 118ch; }
}
.al-intro p {
  margin: 0; font-size: var(--pas-2); line-height: 1.7; color: var(--encre-2);
  /* Évite les lignes orphelines d'un ou deux mots en fin de paragraphe. */
  text-wrap: pretty;
}
.al-sous-titre {
  margin: 0 0 12px; font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--pas-3); font-weight: 800; letter-spacing: -0.02em; color: var(--encre);
}
.al-note { margin: 0 0 16px; max-width: 88ch; font-size: var(--pas-1); color: var(--encre-3); line-height: 1.6; text-wrap: pretty; }

/* Bandeau d'attente, à retirer à l'ouverture du service. */
.al-bientot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 118ch;
  margin: 26px 0 0; padding: 14px 16px;
  border-radius: var(--r-md); border: 1px solid var(--ligne);
  background: var(--surface-2);
  font-size: var(--pas-1); color: var(--encre-2);
}
.al-pastille {
  border-radius: 999px; padding: 4px 11px;
  background: var(--peyi-vert); color: var(--surface);
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em;
}

/* --- Recherche --- */
.al-recherche {
  padding: 22px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--ligne);
}
.al-form { display: grid; gap: 18px; }
.al-form-ligne { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .al-form-ligne { grid-template-columns: 2fr 1fr; } }
.al-champ { display: grid; gap: 6px; }
.al-label {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--encre-3);
}
.al-familles { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.al-familles-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.al-famille {
  border-radius: 999px; padding: 8px 14px;
  border: 1px solid var(--ligne); background: var(--surface);
  font-size: 0.84rem; font-weight: 600; color: var(--encre-2);
  cursor: default;
}
.al-famille--active { background: var(--encre); border-color: var(--encre); color: var(--surface); }
.al-form[aria-disabled='true'] .al-famille { opacity: 0.55; }

/* --- Liste : une ligne par annonce, jamais le texte intégral --- */
.al-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.al-ligne {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 15px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--ligne);
}
.al-ligne--fantome { opacity: 0.5; }
.al-ligne-principal { display: grid; gap: 3px; flex: 1; min-width: 190px; }
.al-societe {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--pas-1); font-weight: 700; color: var(--encre);
}
.al-rubrique { font-size: 0.82rem; color: var(--peyi-vert); font-weight: 600; }
.al-meta { display: flex; gap: 14px; font-size: 0.82rem; color: var(--encre-3); }
.al-ref { font-variant-numeric: tabular-nums; }
.al-ligne-action {
  margin-left: auto; font-size: 0.84rem; font-weight: 700; color: var(--encre-2);
  white-space: nowrap;
}

/* --- Questions fréquentes --- */
.faq { display: grid; gap: 10px; max-width: 80ch; }
.faq-item { border-radius: var(--r-md); border: 1px solid var(--ligne); background: var(--surface); }
.faq-item.ouverte { border-color: var(--encre-3); }
.faq-question { margin: 0; }
.faq-question button {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 16px 18px; background: none; border: 0; text-align: left; cursor: pointer;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--pas-1); font-weight: 700; color: var(--encre);
}
.faq-question button:hover { color: var(--peyi-vert); }
.faq-signe {
  margin-left: auto; flex-shrink: 0;
  font-size: 1.3rem; font-weight: 400; line-height: 1; color: var(--encre-3);
}
.faq-reponse {
  padding: 0 18px 18px; display: grid; gap: 12px;
  font-size: var(--pas-1); line-height: 1.7; color: var(--encre-2);
}
.faq-reponse p { margin: 0; }
.faq-reponse ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* Phrase d'introduction d'une rubrique : plus longue que la mesure de lecture
   courante (60ch), mais c'est une seule ligne — la couper au tiers de l'écran
   n'apporte rien. */
.bloc-service-texte.intro-large { max-width: 104ch; }

/* Rubrique pas encore ouverte : la colonne annonce l'échéance au lieu d'un
   lien « Tout voir » qui ne mènerait nulle part. */
.avis-colonne-attente {
  margin-left: auto;
  border-radius: 999px; padding: 3px 10px;
  background: var(--avis-violet-clair); color: var(--avis-violet-encre);
  font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
}
/* Carte d'exemple : la mise en page réelle, sans affordance de clic. */
.avis-carte-lien--exemple { cursor: default; opacity: 0.62; }
.avis-carte-lien--exemple:hover { border-color: var(--ligne); transform: none; }