/* Musique militaire · système de design
   Kaki et orange de signal. IBM Plex Sans pour l'interface, Newsreader pour la lecture.
   Échelle typographique volontairement large : le lectorat est âgé. */

:root {
  --papier:     #EFF0E8;
  --surface:    #F7F8F2;
  --encre:      #171A13;
  --encre-2:    #3E453A;
  --gris:       #5E6557;
  --filet:      #C5C9BA;
  --filet-doux: #DCDFD2;
  --kaki:       #434C38;
  --kaki-clair: #6E7A5D;
  --orange:     #BC5613;
  --orange-2:   #9C470E;

  --colonne: 1220px;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --teinte: #434C38;          /* aplat par défaut des marques */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #12150E; --surface: #1B1F16; --encre: #EAECE1; --encre-2: #BAC0B0;
    --gris: #929985; --filet: #333A2B; --filet-doux: #252B1F;
    --kaki: #97A486; --kaki-clair: #ACB99C; --orange: #E68F42; --orange-2: #F2A860;
  }
}
:root[data-theme="dark"] {
  --papier: #12150E; --surface: #1B1F16; --encre: #EAECE1; --encre-2: #BAC0B0;
  --gris: #929985; --filet: #333A2B; --filet-doux: #252B1F;
  --kaki: #97A486; --kaki-clair: #ACB99C; --orange: #E68F42; --orange-2: #F2A860;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--colonne); margin-inline: auto; padding-inline: 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; background: var(--encre); color: var(--papier); padding: 14px 20px; font-family: var(--sans); font-weight: 600; z-index: 200; }
.skip:focus { left: 0; top: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
a { color: var(--kaki); text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }

.material-symbols-outlined {
  font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; direction: ltr; vertical-align: -.18em; visibility: hidden;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.icones-ok .material-symbols-outlined { visibility: visible; }

.etiquette {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--gris);
}

/* ---------- en-tête, réapparaît quand on remonte ---------- */
.site-head {
  background: var(--kaki); color: #F4F5EE;
  position: sticky; top: 0; z-index: 120;
  transition: transform .28s ease;
}
:root[data-theme="dark"] .site-head, :root:not([data-theme="light"]) .site-head { background: #222A1A; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .site-head { background: var(--kaki); } }
.site-head.cachee { transform: translateY(-100%); }
.site-head.flottante { box-shadow: 0 6px 22px rgba(0,0,0,.22); }

.head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 30px; padding-block: 14px;
}
.marque-lien { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
/* Le sigle est un caractère, pas une image : ALT+14, la double croche du jeu
   de caractères d’origine. Il se charge avec la page et reste net à toute taille. */
.marque-logo {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  background: var(--orange); color: #fff; border-radius: 2px;
  font-family: var(--sans); font-size: 30px; line-height: 1; padding-bottom: 2px;
}
.marque-nom { display: block; font-family: var(--sans); font-weight: 600; font-size: 22px; letter-spacing: -.015em; line-height: 1.05; }
.marque-sous { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; opacity: .72; margin-top: 3px; }

.omni { position: relative; display: flex; }
.omni input {
  flex: 1; min-width: 0; font-family: var(--sans); font-size: 17px;
  padding: 13px 16px; border: 0; background: rgba(255,255,255,.95); color: #171A13;
}
.omni button {
  font-family: var(--sans); font-weight: 600; font-size: 15px; padding: 13px 18px;
  border: 0; background: var(--orange); color: #fff; cursor: pointer; min-height: 50px;
  display: inline-flex; align-items: center; gap: 7px;
}
.omni button:hover { background: var(--orange-2); }
.omni-sug {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 140; margin: 0; padding: 0;
  list-style: none; background: var(--surface); box-shadow: 0 12px 34px rgba(0,0,0,.26);
  max-height: 64vh; overflow-y: auto;
}
.omni-sug li + li { border-top: 1px solid var(--filet-doux); }
.omni-sug a { display: block; padding: 12px 16px; text-decoration: none; color: var(--encre); font-family: var(--sans); font-size: 17px; }
.omni-sug a:hover, .omni-sug a:focus { background: var(--papier); }
.omni-sug .s-type { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }

/* Le menu tient sur une ligne : six entrées, pas d'icône, et la recherche
   réduite à une loupe qui mène à sa page. */
.nav-top { display: flex; align-items: center; gap: 26px; flex-wrap: nowrap; }
.nav-top a {
  font-family: var(--sans); font-size: 17px; font-weight: 500; color: inherit;
  text-decoration: none; white-space: nowrap;
  padding-block: 9px; border-bottom: 2px solid transparent;
}
.nav-top a:hover, .nav-top a:focus-visible { border-bottom-color: var(--orange); }
.nav-loupe {
  display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none;
  background: var(--orange); border-bottom: 0 !important; border-radius: 2px; margin-left: 4px;
}
.nav-loupe:hover { background: var(--orange-2); }
.nav-loupe .material-symbols-outlined { font-size: 24px; color: #fff; }

/* l'autocomplétion vit maintenant sur la page de recherche */
.omni-page { position: relative; }

/* ---------- panneaux de marque ----------
   Les dessins remplacent les photographies : marque en grand sur un aplat
   dont la teinte varie par arme, dans la gamme militaire. */
.panneau {
  background: var(--teinte); color: #F3F4EC; position: relative; overflow: hidden;
}
.panneau-in {
  position: relative; z-index: 1; max-width: var(--colonne); margin-inline: auto;
  padding: 44px 24px 40px; display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 20px 38px; align-items: center;
}
.panneau h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 6.4vw, 66px);
  line-height: 1.03; letter-spacing: -.02em; margin: 12px 0 14px;
}
.panneau .etiquette { color: #F0B078; }
.panneau-sous { font-family: var(--sans); font-size: 20px; margin: 0; opacity: .94; max-width: 44ch; }
.panneau-alias { font-family: var(--sans); font-size: 16px; margin: 14px 0 0; opacity: .74; }
.panneau-marque { width: clamp(140px, 22vw, 260px); filter: brightness(0) invert(1); opacity: .96; }

.teinte-legion       { --teinte: #3D4A34; }
.teinte-marine       { --teinte: #23384A; }
.teinte-air          { --teinte: #2E4652; }
.teinte-parachutistes{ --teinte: #4A4230; }
.teinte-cavalerie    { --teinte: #4B3A2C; }
.teinte-artillerie   { --teinte: #3A3B2C; }
.teinte-genie        { --teinte: #384034; }
.teinte-infanterie   { --teinte: #434C38; }
.teinte-chasseurs    { --teinte: #2F3E33; }
.teinte-alpins       { --teinte: #36444A; }
.teinte-ecoles       { --teinte: #40392E; }
.teinte-gendarmerie  { --teinte: #2C3340; }
.teinte-troupes-de-marine { --teinte: #32433E; }
.teinte-transmissions{ --teinte: #34423F; }

/* ---------- accueil ---------- */
.hero { position: relative; min-height: 460px; display: flex; align-items: flex-end; background: #171A13; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.hero-in { position: relative; padding-block: 68px 52px; width: 100%; color: #F2F3EC; }
.hero h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 7vw, 76px);
  line-height: 1.02; letter-spacing: -.02em; margin: 0 0 20px; max-width: 15ch;
}
.hero-dek { font-size: 23px; max-width: 52ch; margin: 0 0 34px; opacity: .93; }
.hero-search { display: flex; max-width: 680px; }
.hero-search input {
  flex: 1; min-width: 0; font-family: var(--sans); font-size: 19px; padding: 18px 20px;
  border: 0; background: rgba(255,255,255,.97); color: #171A13;
}
.hero-search button {
  font-family: var(--sans); font-weight: 600; font-size: 17px; padding: 18px 26px;
  border: 0; background: var(--orange); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.hero-search button:hover { background: var(--orange-2); }

.bandeau-chiffres { background: var(--surface); }
.compteurs {
  display: flex; flex-wrap: wrap; gap: 8px 62px; list-style: none; margin: 0;
  padding: 26px 24px; max-width: var(--colonne); margin-inline: auto;
}
.c-n { display: block; font-family: var(--sans); font-weight: 600; font-size: 36px; font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--orange); }
.c-l { font-family: var(--sans); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }

.bloc { padding-block: 52px 20px; }
.bloc-titre {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px 22px;
  flex-wrap: wrap; border-bottom: 2px solid var(--encre); padding-bottom: 12px; margin-bottom: 30px;
}
.bloc-titre h2 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; margin: 0; }
.bloc-titre a { font-family: var(--sans); font-size: 17px; text-decoration: none; white-space: nowrap; }

.cartes { list-style: none; margin: 0 0 44px; padding: 0; display: grid; gap: 34px 30px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.carte a { text-decoration: none; color: inherit; display: block; }
.carte-vignette {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; background: var(--teinte); margin-bottom: 15px; position: relative; overflow: hidden;
}
.carte-vignette img { width: 52%; filter: brightness(0) invert(1); opacity: .95; }
.carte-eyebrow { font-family: var(--sans); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); display: block; margin-bottom: 7px; }
.carte-titre { display: block; font-family: var(--serif); font-weight: 500; font-size: 27px; line-height: 1.18; letter-spacing: -.012em; }
.carte a:hover .carte-titre { color: var(--kaki); }
.carte-sous { display: block; font-family: var(--sans); font-size: 16px; color: var(--gris); margin-top: 8px; line-height: 1.45; }

.index-liste { list-style: none; margin: 0; padding: 0; }
.index-liste li { border-bottom: 0; }
.index-liste a {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 28px; align-items: baseline;
  padding: 17px 14px; text-decoration: none; color: var(--encre); border-radius: 2px;
}
.index-liste a:hover { background: var(--surface); }
.index-titre { font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1.2; }
.index-sous { font-family: var(--sans); font-size: 16px; color: var(--gris); }
.index-liste a:hover .index-titre { color: var(--kaki); }
.index-liste a.avec-signe { grid-template-columns: 76px 1fr auto; gap: 6px 22px; align-items: center; }
.signe {
  font-family: var(--sans); font-size: 54px; line-height: 1; color: var(--orange);
  flex: none; display: inline-block; width: 76px; text-align: center;
}

.fil { font-family: var(--sans); font-size: 16px; color: var(--gris); padding-block: 20px 0; }
.fil a { color: var(--gris); }
.compte { font-family: var(--sans); font-size: 17px; color: var(--gris); margin: 0 0 26px; }
.vide { color: var(--encre-2); font-style: italic; }
.titre-page {
  font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 5.6vw, 58px);
  letter-spacing: -.02em; line-height: 1.04; margin: 0 0 12px;
}

/* ---------- fiche ---------- */
.fiche { padding-block: 0 76px; }
.chapo { font-size: 25px; line-height: 1.5; margin: 42px 0 38px; max-width: 32em; }
.fiche h2 {
  font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gris);
  margin: 58px 0 22px; padding-bottom: 11px; border-bottom: 2px solid var(--encre);
}

.ecoute { margin: 0 0 48px; }
.ecoute-cadre { position: relative; aspect-ratio: 16 / 9; background: #000; max-width: 820px; }
.ecoute-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ecoute-note { font-family: var(--sans); font-size: 15px; color: var(--gris); margin: 12px 0 0; }

table.faits { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 19px; line-height: 1.5; }
table.faits th, table.faits td { text-align: left; padding: 17px 26px 17px 0; border-bottom: 1px solid var(--filet-doux); vertical-align: top; }
table.faits th { width: 32%; font-weight: 600; font-size: 14px; letter-spacing: .09em; text-transform: uppercase; color: var(--gris); padding-top: 20px; }
table.faits tr:last-child th, table.faits tr:last-child td { border-bottom: 0; }
.tableau { overflow-x: auto; }

.historique { background: var(--surface); margin-top: 60px; padding-block: 54px 46px; }
.historique h2 { margin-top: 0; border-bottom-color: var(--filet); }
.hist-grille { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
.hist-texte { columns: 2; column-gap: 42px; font-size: 20px; line-height: 1.66; text-align: justify; hyphens: auto; }
.hist-texte p { margin: 0 0 17px; break-inside: avoid-column; }
.hist-texte p:first-of-type::first-letter {
  font-family: var(--serif); float: left; font-size: 3.5em; line-height: .82;
  padding: .06em .1em 0 0; font-weight: 500; color: var(--kaki);
}
.renvoi { font-family: var(--sans); font-size: .6em; vertical-align: super; color: var(--orange); text-decoration: none; font-weight: 600; }
.hist-media { margin: 0; }
.hist-media .vignette-marque {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4; background: var(--teinte);
}
.hist-media .vignette-marque img { width: 58%; filter: brightness(0) invert(1); opacity: .95; }
.hist-media figcaption { font-family: var(--sans); font-size: 14px; color: var(--gris); margin-top: 11px; line-height: 1.45; }

/* ---------- paroles ---------- */
.paroles-zone { max-width: 34em; }
.marque-droits { font-family: var(--sans); font-size: 15px; color: var(--gris); margin: 0 0 20px; display: flex; align-items: center; gap: 8px; }
.marque-droits .material-symbols-outlined { font-size: 20px; color: var(--kaki); }
.outils-paroles { display: flex; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.paroles { font-size: var(--taille-paroles, 23px); line-height: 1.72; }
.paroles p { margin: 0 0 20px; }
.paroles h3 { font-family: var(--sans); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin: 32px 0 10px; }
.paroles .refrain { font-style: italic; padding-left: 1.2em; border: 0; }
body.mode-chant .paroles { --taille-paroles: 34px; line-height: 1.95; }
body.mode-chant .historique, body.mode-chant .ecoute { display: none; }

.sources-liste { font-family: var(--sans); font-size: 17px; line-height: 1.6; padding-left: 24px; }
.sources-liste li { margin-bottom: 15px; }
.src-nature { color: var(--orange); font-weight: 600; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; }
.src-droits { color: var(--gris); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; }

.bouton {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans);
  font-weight: 600; font-size: 17px; padding: 15px 26px; min-height: 52px;
  background: var(--kaki); color: #F4F5EE; border: 0; cursor: pointer; text-decoration: none;
}
.bouton:hover { background: var(--orange); color: #fff; }
.lien { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--sans); font-size: 16px; color: var(--kaki); text-decoration: underline; text-underline-offset: 3px; }
.manque { font-family: var(--sans); font-size: 17px; color: var(--encre-2); background: var(--surface); padding: 18px 22px; margin: 0 0 28px; }
.fiche-pied { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--filet); font-family: var(--sans); font-size: 15px; color: var(--gris); }

/* ---------- unités, formations, époques ---------- */
.signe-xl {
  font-family: var(--sans); font-size: clamp(86px, 12vw, 156px); line-height: .82;
  color: #F0B078; margin: 0; grid-row: span 1; align-self: center;
}
.periode-xl {
  font-family: var(--sans); font-weight: 600; font-size: clamp(28px, 4.4vw, 46px);
  letter-spacing: .01em; margin: 0 0 6px; color: #F0B078; font-variant-numeric: tabular-nums;
}
.carte-periode {
  font-family: var(--sans); font-weight: 600; font-size: 24px; color: var(--orange);
  display: block; margin-bottom: 6px; font-variant-numeric: tabular-nums;
}

/* ---------- retour en haut ---------- */
.haut {
  position: fixed; right: 22px; bottom: 22px; z-index: 130;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  padding: 14px 20px; min-height: 52px;
  background: var(--encre); color: var(--papier); text-decoration: none;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.haut.visible { opacity: 1; visibility: visible; }
.haut:hover { background: var(--orange); color: #fff; }

/* ---------- pied ---------- */
.site-foot { background: var(--kaki); color: #EDEFE6; margin-top: 70px; }
:root[data-theme="dark"] .site-foot, :root:not([data-theme="light"]) .site-foot { background: #222A1A; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .site-foot { background: var(--kaki); } }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 34px; padding-block: 50px 44px; }
.foot-grid h2 { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin: 0 0 13px; }
.foot-grid a, .foot-grid .lien { display: block; font-family: var(--sans); font-size: 17px; color: inherit; text-decoration: none; padding-block: 6px; text-align: left; }
.foot-grid a:hover { text-decoration: underline; }
.foot-note { grid-column: 1 / -1; font-family: var(--sans); font-size: 15px; opacity: .74; margin: 8px 0 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); }

.mm-consent { position: fixed; inset: auto 0 0 0; z-index: 999; background: var(--encre); color: var(--papier); padding: 20px 24px; font-family: var(--sans); font-size: 17px; }
.mm-consent p { margin: 0 auto; max-width: var(--colonne); }
.mm-consent a { color: inherit; }
.mm-consent-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px !important; }
.mm-consent button { font-family: var(--sans); font-weight: 600; font-size: 16px; padding: 13px 24px; min-height: 50px; cursor: pointer; background: var(--orange); color: #fff; border: 0; }
.mm-consent button + button { background: transparent; color: inherit; border: 1px solid currentColor; }

@media (max-width: 960px) {
  .hist-grille { grid-template-columns: 1fr; gap: 30px; }
  .hist-texte { columns: 1; text-align: left; }
  .hist-media .vignette-marque { aspect-ratio: 16 / 9; }
  .head-row { flex-wrap: wrap; justify-content: flex-start; }
  .nav-top { flex-wrap: wrap; gap: 6px 20px; width: 100%; }
  .nav-loupe { margin-left: auto; }
  .panneau-in { grid-template-columns: auto 1fr; gap: 18px 24px; }
  .panneau-marque { width: 120px; grid-column: 1 / -1; }
  .signe-xl { font-size: 76px; }
}
@media (max-width: 560px) {
  body { font-size: 19px; }
  .hero { min-height: 400px; }
  .compteurs { gap: 10px 34px; }
  table.faits th { width: auto; display: block; padding-bottom: 2px; border: 0; }
  table.faits td { display: block; padding-top: 0; }
  .index-liste a.avec-signe { grid-template-columns: 56px 1fr; }
  .signe { font-size: 40px; width: 56px; }
  .haut { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Un seul filet sous un titre de bloc, pas deux */
.bloc-titre + .index-liste { border-top: 0; }
.fiche h2 + .index-liste, .bloc h2 + .index-liste { border-top: 0; }

/* Autres interprétations d’un même chant */
.ecoute-titre{font-family:var(--sans);font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--encre-2);margin:1.6rem 0 .6rem}
.ecoute-liste{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ecoute-liste li{font-size:1.02rem;line-height:1.45}
.ecoute-liste a{text-decoration-thickness:1px;text-underline-offset:3px}
.ecoute-chaine{display:block;font-family:var(--sans);font-size:.86rem;color:var(--encre-2)}

.index-lettre { font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: .18em; color: var(--orange); margin: 34px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--encre); }
.index-lettre:first-of-type { margin-top: 0; }

/* ─── La radio ────────────────────────────────────────────────────────────
   Le lecteur reste visible, réduit mais réel : les conditions de YouTube
   interdisent de le masquer, et voir la source rassure autant qu'elle crédite. */
.radio-dock[hidden] { display: none; }
.radio-dock {
  position: fixed; right: 18px; bottom: calc(18px + var(--bas-consent, 0px)); z-index: 60;
  width: min(380px, calc(100vw - 36px));
  display: grid; grid-template-columns: 176px 1fr; gap: 0;
  background: var(--teinte, #3A4232); color: #fff;
  border-radius: 2px; box-shadow: 0 10px 34px rgba(0,0,0,.34);
  border-top: 3px solid var(--orange);
}
.radio-ecran { background: #000; }
.radio-ecran > div, .radio-ecran iframe { width: 176px; height: 99px; display: block; border: 0; }
.radio-corps { padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.radio-rang {
  font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 4px; opacity: .68; font-variant-numeric: tabular-nums;
}
.radio-titre {
  font-family: var(--serif); font-size: 19px; line-height: 1.18; color: #fff;
  text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.radio-titre:hover { text-decoration: underline; text-underline-offset: 3px; }
.radio-sous {
  font-family: var(--sans); font-size: 13px; margin: 3px 0 0; opacity: .7;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.radio-boutons { display: flex; align-items: center; gap: 2px; margin-top: 8px; }
.radio-b {
  appearance: none; background: none; border: 0; color: #fff; cursor: pointer;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 2px; padding: 0;
}
.radio-b:hover { background: rgba(255,255,255,.14); }
.radio-b .material-symbols-outlined { font-size: 26px; }
.radio-b-play { background: var(--orange); }
.radio-b-play:hover { background: #C9601F; }
.radio-b-fin { margin-left: auto; opacity: .6; }
.radio-b-fin:hover { opacity: 1; }
.radio-active .haut { bottom: calc(150px + var(--bas-consent, 0px)); }

@media (max-width: 700px) {
  .radio-dock {
    right: 0; left: 0; bottom: var(--bas-consent, 0px); width: 100%;
    grid-template-columns: 120px 1fr; border-radius: 0;
  }
  .radio-ecran > div, .radio-ecran iframe { width: 120px; height: 68px; }
  .radio-corps { padding: 8px 10px; }
  .radio-titre { font-size: 17px; }
  .radio-sous { display: none; }
  .radio-boutons { margin-top: 4px; }
  .radio-b { width: 40px; height: 40px; }
  .radio-active .haut { bottom: calc(88px + var(--bas-consent, 0px)); }
  .radio-active body { padding-bottom: 70px; }
}

/* bouton d'appel dans la page */
.radio-appel {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--sans); font-size: 17px; font-weight: 600;
  background: var(--orange); color: #fff; border: 0; border-radius: 2px;
  padding: 14px 22px; text-decoration: none;
}
.radio-appel:hover { background: #C9601F; }
.radio-appel .material-symbols-outlined { font-size: 24px; }
.radio-piste {
  appearance: none; background: none; border: 0; cursor: pointer; color: var(--kaki);
  font-family: var(--sans); font-size: 15px; display: inline-flex; align-items: center; gap: 6px; padding: 0;
}
.radio-piste:hover { text-decoration: underline; text-underline-offset: 3px; }

/* emplacements publicitaires : jamais collés au texte, jamais déguisés */
.pub { margin: 40px 0; min-height: 1px; }
.pub-mention {
  font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris); margin: 0 0 8px;
}

/* page radio */
.chapeau { font-size: 1.15rem; line-height: 1.55; max-width: 62ch; }
.note-radio { font-family: var(--sans); font-size: 15px; color: var(--gris); max-width: 70ch; margin-top: 18px; }
.radio-liste { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.radio-liste li {
  display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 16px;
  padding: 14px 4px; border-bottom: 1px solid var(--filet);
}
.radio-num { font-family: var(--mono); font-size: 15px; color: var(--gris); font-variant-numeric: tabular-nums; }
.radio-cell { min-width: 0; }
.radio-fiche { font-family: var(--serif); font-size: 1.22rem; color: var(--encre); text-decoration: none; }
.radio-fiche:hover { text-decoration: underline; text-underline-offset: 3px; }
.radio-detail { display: block; font-family: var(--sans); font-size: 14px; color: var(--gris); margin-top: 2px; }
@media (max-width: 560px) {
  .radio-liste li { grid-template-columns: 34px 1fr; gap: 10px; }
  .radio-piste { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* ─── Filtres d’index ─────────────────────────────────────────────────────
   Trois vrais menus déroulants, bâtis sur <details> : ils s’ouvrent sans
   JavaScript, se ferment à Échap, et leurs entrées sont des liens indexables.
   Le chevron est tracé en CSS et ne dépend donc d’aucune fonte d’icônes. */
.filtres {
  margin: 0 0 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.filtres-intitule {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris); margin-right: 6px;
}
.filtre { position: relative; }
.filtre > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0;
  background: var(--surface); border: 1px solid var(--filet); border-radius: 2px;
  font-family: var(--sans); font-size: 17px; color: var(--encre);
  min-height: 54px; padding: 0 0 0 20px; white-space: nowrap; user-select: none;
}
.filtre > summary::-webkit-details-marker { display: none; }
.filtre > summary:hover { border-color: var(--kaki); background: var(--papier); }
.filtre > summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.filtre-nom { font-weight: 600; }
.filtre-val { color: var(--kaki); }
.filtre-val::before { content: " : "; color: var(--gris); font-weight: 400; }
.filtre-poignee {
  display: grid; place-items: center; width: 48px; align-self: stretch;
  margin-left: 16px; border-left: 1px solid var(--filet);
}
.filtre-fleche {
  width: 9px; height: 9px; border-right: 2px solid var(--kaki); border-bottom: 2px solid var(--kaki);
  transform: translateY(-3px) rotate(45deg); transition: transform .18s ease;
}
.filtre[open] > summary { border-color: var(--kaki); background: var(--papier); }
.filtre[open] .filtre-fleche { transform: translateY(2px) rotate(-135deg); }
.filtre-actif > summary { background: var(--kaki); border-color: var(--kaki); color: #fff; }
.filtre-actif > summary .filtre-val, .filtre-actif > summary .filtre-val::before { color: rgba(255,255,255,.82); }
.filtre-actif .filtre-poignee { border-left-color: rgba(255,255,255,.3); }
.filtre-actif .filtre-fleche { border-color: #fff; }

.filtre-panneau {
  position: absolute; z-index: 130; top: calc(100% + 8px); left: 0;
  width: max(100%, 400px); max-height: 60vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--filet);
  box-shadow: 0 22px 50px rgba(23,26,19,.28); border-radius: 2px; padding: 8px 0;
  animation: filtre-ouvre .16s ease-out;
}
@keyframes filtre-ouvre { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .filtre-panneau { animation: none; } .filtre-fleche { transition: none; } }
.filtre-panneau a {
  display: flex; align-items: baseline; gap: 16px; padding: 14px 20px;
  font-family: var(--sans); font-size: 18px; color: var(--encre); text-decoration: none;
}
.filtre-panneau a:hover, .filtre-panneau a:focus { background: var(--papier); }
.filtre-panneau a[aria-current="true"] { background: var(--kaki); color: #fff; font-weight: 600; }
.filtre-panneau a[aria-current="true"] .filtre-n { color: rgba(255,255,255,.74); }
.filtre-panneau .filtre-n { margin-left: auto; font-size: 15px; color: var(--gris); font-variant-numeric: tabular-nums; }
.filtre-sep { height: 1px; background: var(--filet-doux); margin: 8px 0; }

.filtres-actifs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 28px; }
.filtres-actifs .puce-off {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 15px;
  background: var(--kaki); color: #fff; border-radius: 2px; padding: 9px 13px; text-decoration: none;
}
.filtres-actifs .puce-off:hover { background: var(--orange); }
@media (max-width: 620px) {
  .filtres-intitule { width: 100%; margin-bottom: -2px; }
  .filtre { flex: 1 1 100%; }
  .filtre > summary { width: 100%; justify-content: space-between; }
  .filtre-panneau { width: 100%; }
}

/* ─── Bandeau radio de la page d’accueil ──────────────────────────────────
   Pleine largeur, orange, un dessin en grand : c’est l’appel le plus visible
   du site, parce que la radio est ce qui fait rester. */
.bandeau-radio {
  background: var(--orange); color: #fff; position: relative; overflow: hidden;
}
.bandeau-radio-in {
  position: relative; display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 40px; padding-block: 52px;
}
.bandeau-radio .etiquette { color: rgba(255,255,255,.82); }
.bandeau-radio h2 {
  font-family: var(--serif); font-weight: 400; color: #fff;
  font-size: clamp(30px, 4.2vw, 50px); line-height: 1.06; margin: 10px 0 0;
  letter-spacing: -.012em;
}
.bandeau-radio-dek {
  font-size: 1.12rem; line-height: 1.5; max-width: 54ch; margin: 16px 0 0; color: rgba(255,255,255,.94);
}
.bandeau-radio-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin: 26px 0 0; }
.bouton-sombre {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--sans); font-size: 18px; font-weight: 600;
  background: #171A13; color: #FFFFFF; border: 0; border-radius: 2px; padding: 16px 26px;
}
.bouton-sombre:hover, .bouton-sombre:focus-visible { background: #000; color: #FFFFFF; }
.bouton-sombre .material-symbols-outlined { font-size: 24px; }
.bandeau-radio-lien { font-family: var(--sans); font-size: 17px; color: #fff; text-underline-offset: 4px; }
.bandeau-radio-dessin {
  width: clamp(150px, 22vw, 260px); filter: brightness(0) invert(1); opacity: .95; justify-self: end;
}
@media (max-width: 760px) {
  .bandeau-radio-in { grid-template-columns: 1fr; gap: 14px; padding-block: 38px; }
  .bandeau-radio-dessin { width: 130px; justify-self: start; order: -1; }
  .bandeau-radio-actions { gap: 16px; }
}

/* ─── Partage ─────────────────────────────────────────────────────────────
   De simples liens vers les fenêtres de partage : aucun script tiers,
   donc aucun mouchard chargé avant que le visiteur ne clique. */
.partage {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 46px 0 0; padding-top: 22px; border-top: 1px solid var(--filet);
}
.partage-quoi {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris); margin-right: 6px;
}
.partage-b {
  font-family: var(--sans); font-size: 15px; line-height: 1; color: var(--encre);
  background: var(--surface); border: 1px solid var(--filet); border-radius: 2px;
  padding: 12px 16px; text-decoration: none; cursor: pointer; min-height: 44px;
  display: inline-flex; align-items: center;
}
.partage-b:hover { border-color: var(--kaki); background: var(--papier); }
.partage-copie[data-fait] { background: var(--kaki); border-color: var(--kaki); color: #fff; }
@media (max-width: 560px) { .partage-quoi { width: 100%; margin-bottom: 2px; } }

/* ─── Bandeau des grandes familles, page d’accueil ────────────────────── */
.familles { background: var(--kaki); color: #F3F4EC; }
.familles-in { padding-block: 48px; }
.familles h2 {
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; margin: 0 0 26px; color: rgba(243,244,236,.78);
}
.familles-grille {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.famille a {
  display: grid; gap: 14px; text-decoration: none; color: inherit; height: 100%;
  background: rgba(0,0,0,.20); padding: 26px 22px 24px; border-radius: 2px;
  transition: background .18s ease;
}
.famille a:hover, .famille a:focus-visible { background: rgba(0,0,0,.38); }
.famille a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.famille img { width: 92px; filter: brightness(0) invert(1); opacity: .95; }
.famille-nom { font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; }
.famille-n { font-family: var(--sans); font-size: 14px; color: rgba(243,244,236,.66); }