/* ==========================================================================
   entete.css — en-tête, menu, bandeau du direct, aperçu

   Chargée après layout.css : ce qui est ici fait autorité sur l'en-tête.
   ========================================================================== */

/* ---------------------------------------------------------- en-tête ----- */

.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--papier) 84%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ligne);
}

.entete__rangee {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: 58px;
}

.entete__marque {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex: none;
}

/* Deux fichiers fournis par la direction artistique : magenta sur fond
   clair, blanc sur fond sombre. On bascule en CSS plutot qu'en JavaScript,
   pour que le bon logo soit deja la au premier rendu. */
.entete__logo {
  height: 20px;
  width: auto;
}

.entete__logo--sombre {
  display: none;
}

:root[data-theme="sombre"] .entete__logo--clair {
  display: none;
}

:root[data-theme="sombre"] .entete__logo--sombre {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .entete__logo--clair {
    display: none;
  }
  :root:not([data-theme="clair"]) .entete__logo--sombre {
    display: block;
  }
}

/* ------------------------------------------- bascule clair / sombre -----

   Un seul dessin pour les deux etats : un disque, une morsure et huit
   rayons. En thema sombre la morsure entre dans le disque et le transforme
   en croissant, les rayons se retractent en pivotant. C'est la meme
   animation que celle du centre de controle d'iOS, faite a la main.
   ------------------------------------------------------------------------ */

.bouton-astre {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--encre-douce);
  transition: background var(--duree-courte) var(--doux),
    color var(--duree-courte) var(--doux);
}

.bouton-astre:hover {
  background: var(--surface-2);
  color: var(--encre);
}

.astre {
  width: 21px;
  height: 21px;
  overflow: visible;
}

.astre__corps {
  fill: currentColor;
  transition: r var(--duree) var(--ressort);
}

.astre__morsure {
  transition: cx var(--duree) var(--ressort), cy var(--duree) var(--ressort);
}

.astre__rayons {
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  transform-origin: 12px 12px;
  transition: transform var(--duree) var(--ressort),
    opacity var(--duree-courte) var(--doux);
}

/* Etat sombre : croissant, rayons rentres. */
:root[data-theme="sombre"] .astre__corps {
  r: 7.2;
}

:root[data-theme="sombre"] .astre__morsure {
  cx: 17.5;
  cy: 6.5;
}

:root[data-theme="sombre"] .astre__rayons {
  transform: rotate(-35deg) scale(0);
  opacity: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .astre__corps {
    r: 7.2;
  }
  :root:not([data-theme="clair"]) .astre__morsure {
    cx: 17.5;
    cy: 6.5;
  }
  :root:not([data-theme="clair"]) .astre__rayons {
    transform: rotate(-35deg) scale(0);
    opacity: 0;
  }
}

/* Le clic donne une impulsion, que le theme parte vers le clair ou le
   sombre : le bouton repond avant meme que la page ait change. */
.bouton-astre:active .astre {
  transform: scale(0.86);
  transition: transform 120ms var(--doux);
}

@media (prefers-reduced-motion: reduce) {
  .astre__corps,
  .astre__morsure,
  .astre__rayons {
    transition: none;
  }
}

.entete__titre {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

/* Badge de chantier : assez visible pour prévenir, assez sobre pour ne pas
   voler la vedette au titre. */
.badge-chantier {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--llb-magenta) 45%, transparent);
  background: color-mix(in srgb, var(--llb-magenta) 8%, transparent);
  color: var(--llb-magenta);
  font-size: var(--t-micro);
  font-weight: 600;
  white-space: nowrap;
}

.badge-chantier::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
  transform: rotate(45deg);
}

.entete__outils {
  display: flex;
  align-items: center;
  gap: var(--e1);
  margin-left: auto;
}

/* --------------------------------------------------- horloges et météo -- */

.outils {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--t-micro);
  color: var(--encre-douce);
  white-space: nowrap;
}

.outils__date {
  font-weight: 600;
  text-transform: capitalize;
}

.outils__horloge {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.outils__horloge b {
  font-weight: 600;
  color: var(--encre-faible);
}

.outils__horloge time {
  font-weight: 600;
  color: var(--encre);
}

.outils__meteo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: var(--t-micro);
  color: var(--encre-douce);
  white-space: nowrap;
}

.outils__meteo-valeur {
  font-weight: 600;
  color: var(--encre);
}

.outils__meteo-ville {
  color: var(--encre-faible);
}

/* Petits pictogrammes dessinés en CSS, pour ne charger aucune icône. */
.outils__meteo-icone {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex: none;
  background: var(--encre-faible);
}

.outils__meteo[data-icone="clair"] .outils__meteo-icone {
  background: #e8a33d;
  box-shadow: 0 0 0 2px color-mix(in srgb, #e8a33d 28%, transparent);
}

.outils__meteo[data-icone="eclaircies"] .outils__meteo-icone {
  background: linear-gradient(120deg, #e8a33d 45%, #b9c4d8 45%);
}

.outils__meteo[data-icone="couvert"] .outils__meteo-icone,
.outils__meteo[data-icone="brouillard"] .outils__meteo-icone {
  background: #9aa6bd;
  border-radius: 6px 6px 5px 5px;
}

.outils__meteo[data-icone="pluie"] .outils__meteo-icone {
  background: linear-gradient(180deg, #9aa6bd 55%, #4f7bc4 55%);
  border-radius: 6px 6px 3px 3px;
}

.outils__meteo[data-icone="neige"] .outils__meteo-icone {
  background: linear-gradient(180deg, #9aa6bd 55%, #eef2f8 55%);
  border-radius: 6px 6px 3px 3px;
}

.outils__meteo[data-icone="orage"] .outils__meteo-icone {
  background: linear-gradient(180deg, #6c7b9c 55%, #e8a33d 55%);
  border-radius: 6px 6px 2px 2px;
}

@media (max-width: 1080px) {
  .outils__horloge[title="Bruxelles"],
  .outils__date {
    display: none;
  }
}

@media (max-width: 860px) {
  .outils,
  .outils__meteo,
  .badge-chantier {
    display: none;
  }
}

/* ------------------------------------------------------ menu bureau ----- */

.entete__nav {
  border-top: 1px solid var(--ligne);
}

.nav__piste {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav__piste::-webkit-scrollbar {
  display: none;
}

.nav__lien {
  position: relative;
  padding: 11px 13px;
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--encre-douce);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duree-courte) var(--doux);
}

.nav__lien::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 0;
  height: 2px;
  background: var(--llb-magenta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duree) var(--ressort);
}

.nav__lien:hover {
  color: var(--encre);
}

.nav__lien[data-courant="oui"] {
  color: var(--llb-magenta);
}

.nav__lien[data-courant="oui"]::after {
  transform: scaleX(1);
}

@media (max-width: 860px) {
  .entete__nav {
    display: none;
  }
}

/* ------------------------------------------------------ menu mobile ----- */

.bouton-burger {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  place-items: center;
  color: var(--encre);
}

.bouton-burger span {
  display: block;
  width: 17px;
  height: 1.8px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--duree) var(--ressort),
    opacity var(--duree-courte) var(--doux);
}

.bouton-burger span + span {
  margin-top: 4px;
}

.bouton-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.8px) rotate(45deg);
}

.bouton-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.bouton-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.8px) rotate(-45deg);
}

@media (max-width: 860px) {
  .bouton-burger {
    display: grid;
  }
}

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: color-mix(in srgb, var(--papier) 96%, transparent);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  padding: calc(66px + env(safe-area-inset-top, 0px)) var(--marge) var(--e4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 280ms var(--doux), transform 420ms var(--ressort),
    visibility 0s linear 420ms;
  overflow-y: auto;
}

.menu-mobile[data-ouvert="oui"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

body[data-menu-ouvert="oui"] {
  overflow: hidden;
}

.menu-mobile__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-mobile__liste li {
  border-bottom: 1px solid var(--ligne);
}

.menu-mobile__lien {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 2px;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  color: var(--encre);
  text-decoration: none;
}

.menu-mobile__lien::before {
  content: counter(rang, decimal-leading-zero);
  counter-increment: rang;
  font-family: var(--texte);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--encre-faible);
}

.menu-mobile__liste {
  counter-reset: rang;
}

.menu-mobile__lien[data-courant="oui"] {
  color: var(--llb-magenta);
}

/* Les entrées entrent en cascade, comme une feuille iOS. Le décalage vient
   du rang dans la liste, pas d'un style inline. */
.menu-mobile[data-ouvert="oui"] .menu-mobile__liste li {
  animation: menu-entree 460ms var(--ressort) backwards;
  animation-delay: 80ms;
}

.menu-mobile[data-ouvert="oui"] .menu-mobile__liste li:nth-child(2) { animation-delay: 118ms; }
.menu-mobile[data-ouvert="oui"] .menu-mobile__liste li:nth-child(3) { animation-delay: 156ms; }
.menu-mobile[data-ouvert="oui"] .menu-mobile__liste li:nth-child(4) { animation-delay: 194ms; }
.menu-mobile[data-ouvert="oui"] .menu-mobile__liste li:nth-child(5) { animation-delay: 232ms; }
.menu-mobile[data-ouvert="oui"] .menu-mobile__liste li:nth-child(6) { animation-delay: 270ms; }
.menu-mobile[data-ouvert="oui"] .menu-mobile__liste li:nth-child(7) { animation-delay: 308ms; }

@keyframes menu-entree {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.menu-mobile__pied {
  margin-top: var(--e4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  font-size: var(--t-micro);
  color: var(--encre-douce);
}

/* -------------------------------------------- bandeau du direct (ticker) */

.ticker {
  display: flex;
  align-items: stretch;
  background: var(--llb-magenta);
  color: #fff;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, #000 18%, var(--llb-magenta));
}

.ticker[hidden] {
  display: none;
}

.ticker__etiquette {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 0 16px;
  background: color-mix(in srgb, #000 22%, var(--llb-magenta));
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}

.ticker__point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: pouls 2s var(--doux) infinite;
}

.ticker__piste {
  position: relative;
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

/* Voile aux deux bouts : le texte naît et meurt au lieu d'être coupé net. */
.ticker__piste::before,
.ticker__piste::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  z-index: 1;
  pointer-events: none;
}

.ticker__piste::before {
  left: 0;
  background: linear-gradient(90deg, var(--llb-magenta), transparent);
}

.ticker__piste::after {
  right: 0;
  background: linear-gradient(270deg, var(--llb-magenta), transparent);
}

.ticker__ruban {
  display: flex;
  width: max-content;
  animation: defilement var(--duree-defilement, 60s) linear infinite;
}

.ticker__ruban[data-pause="oui"],
.ticker__ruban[data-fige="oui"] {
  animation-play-state: paused;
}

.ticker__ruban[data-fige="oui"] {
  transform: none;
}

@keyframes defilement {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

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

.ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 10px 22px;
  font-size: var(--t-petit);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

.ticker__item + .ticker__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.ticker__heure {
  font-size: var(--t-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0.78;
}

.ticker__item--lien .ticker__texte {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 3px;
}

.ticker__item--lien:hover .ticker__texte {
  text-decoration-color: #fff;
}

.ticker__fleche {
  font-size: 0.8rem;
  opacity: 0.8;
  transition: transform var(--duree-courte) var(--ressort);
}

.ticker__item--lien:hover .ticker__fleche {
  transform: translateX(3px);
}

@media (max-width: 560px) {
  .ticker__etiquette {
    padding: 0 11px;
    letter-spacing: 0.04em;
  }
  .ticker__item {
    padding: 9px 16px;
  }
}

/* ------------------------------------------- dégradé animé du hero ------

   Quatre masses de couleur qui dérivent, respirent et se déforment. Le
   « liquide » vient de la déformation du rayon de bordure : chaque coin
   suit sa propre courbe, et les quatre durées sont premières entre elles
   pour que les masses ne se resynchronisent jamais. Aucune image, aucun
   canvas, quatre éléments et trois animations.
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
}

.hero__halo {
  position: absolute;
  inset: -25% -12% -40%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(180deg, #000 58%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent);
}

.hero__tache {
  position: absolute;
  filter: blur(64px);
  will-change: transform, border-radius;
  mix-blend-mode: multiply;
  animation-timing-function: var(--doux);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

:root[data-theme="sombre"] .hero__tache {
  mix-blend-mode: screen;
}

.hero__tache--1 {
  width: 48vw;
  height: 44vw;
  min-width: 340px;
  min-height: 310px;
  left: -8%;
  top: -14%;
  background: var(--llb-marine);
  opacity: 0.4;
  animation-name: derive-1, respire-a;
  animation-duration: 23s, 17s;
}

.hero__tache--2 {
  width: 42vw;
  height: 46vw;
  min-width: 300px;
  min-height: 320px;
  right: -6%;
  top: -20%;
  background: var(--llb-magenta);
  opacity: 0.38;
  animation-name: derive-2, respire-b;
  animation-duration: 29s, 19s;
}

.hero__tache--3 {
  width: 36vw;
  height: 33vw;
  min-width: 260px;
  min-height: 240px;
  left: 38%;
  top: 26%;
  background: color-mix(in srgb, var(--llb-magenta) 45%, var(--llb-marine));
  opacity: 0.3;
  animation-name: derive-3, respire-c;
  animation-duration: 37s, 13s;
}

.hero__tache--4 {
  width: 30vw;
  height: 34vw;
  min-width: 220px;
  min-height: 250px;
  right: 22%;
  top: 44%;
  background: color-mix(in srgb, var(--llb-marine) 60%, var(--llb-magenta));
  opacity: 0.24;
  animation-name: derive-4, respire-a;
  animation-duration: 41s, 23s;
}

:root[data-theme="sombre"] .hero__tache--1,
:root[data-theme="sombre"] .hero__tache--2 {
  opacity: 0.5;
}

:root[data-theme="sombre"] .hero__tache--3,
:root[data-theme="sombre"] .hero__tache--4 {
  opacity: 0.34;
}

/* --- dérives : des trajets lents, aucun retour au point de départ --- */

@keyframes derive-1 {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50% { transform: translate3d(9%, 7%, 0) scale(1.12) rotate(22deg); }
  100% { transform: translate3d(17%, 13%, 0) scale(1.2) rotate(-14deg); }
}

@keyframes derive-2 {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50% { transform: translate3d(-11%, 9%, 0) scale(0.92) rotate(-26deg); }
  100% { transform: translate3d(-19%, 16%, 0) scale(0.84) rotate(17deg); }
}

@keyframes derive-3 {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50% { transform: translate3d(-14%, -6%, 0) scale(1.16) rotate(31deg); }
  100% { transform: translate3d(-25%, -15%, 0) scale(1.28) rotate(-9deg); }
}

@keyframes derive-4 {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50% { transform: translate3d(13%, -11%, 0) scale(1.1) rotate(-19deg); }
  100% { transform: translate3d(21%, -4%, 0) scale(0.95) rotate(28deg); }
}

/* --- respirations : la forme se déforme comme une goutte d'huile --- */

@keyframes respire-a {
  0% { border-radius: 62% 38% 46% 54% / 58% 44% 56% 42%; }
  33% { border-radius: 41% 59% 67% 33% / 39% 63% 37% 61%; }
  66% { border-radius: 55% 45% 32% 68% / 66% 35% 65% 34%; }
  100% { border-radius: 36% 64% 58% 42% / 47% 57% 43% 53%; }
}

@keyframes respire-b {
  0% { border-radius: 47% 53% 61% 39% / 44% 62% 38% 56%; }
  33% { border-radius: 68% 32% 39% 61% / 57% 33% 67% 43%; }
  66% { border-radius: 33% 67% 55% 45% / 63% 51% 49% 37%; }
  100% { border-radius: 59% 41% 44% 56% / 36% 59% 41% 64%; }
}

@keyframes respire-c {
  0% { border-radius: 51% 49% 37% 63% / 62% 41% 59% 38%; }
  33% { border-radius: 39% 61% 64% 36% / 35% 66% 34% 65%; }
  66% { border-radius: 66% 34% 48% 52% / 54% 38% 62% 46%; }
  100% { border-radius: 44% 56% 59% 41% / 48% 57% 43% 52%; }
}

/* Mouvement réduit : les masses restent, elles cessent de bouger. Le fond
   garde sa profondeur, le lecteur garde son confort. */
@media (prefers-reduced-motion: reduce) {
  .hero__tache {
    animation: none;
    border-radius: 50%;
  }
}

/* --------------------------------------------------- aperçu du hero -----

   Deux repères seulement : le score des deux chambres est déjà lisible dans
   les jauges juste au-dessus, le répéter allongeait le hero pour rien.
   ------------------------------------------------------------------------ */

.apercu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: var(--e2) 0 0;
}

.apercu__tuile {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ligne);
  background: color-mix(in srgb, var(--papier) 72%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
  transition: transform var(--duree) var(--ressort),
    border-color var(--duree-courte) var(--doux);
}

.apercu__tuile:hover {
  transform: translateY(-1px);
  border-color: var(--encre-douce);
}

.apercu__etiquette {
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--encre-faible);
  order: 2;
}

.apercu__valeur {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: -0.01em;
  order: 1;
}

.apercu__detail {
  font-size: var(--t-micro);
  color: var(--encre-douce);
  order: 3;
}

.apercu__maj {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-size: var(--t-micro);
  color: var(--encre-faible);
}

.apercu__heure {
  font-variant-numeric: tabular-nums;
}

/* Le trait de majorité quand le filibuster s'invite. */
.jauge__seuil[data-filibuster="oui"] {
  background: var(--llb-magenta);
  transition: left 900ms var(--ressort);
}

.jauge__seuil[data-filibuster="oui"]::after {
  color: var(--llb-magenta);
  font-weight: 700;
}

/* ==========================================================================
   Tabbar mobile

   Pilule flottante en bas d'écran, façon iOS : le pouce y arrive sans
   traverser la page, et elle ne mange pas la barre du haut.
   ========================================================================== */

.tabbar {
  display: none;
}

@media (max-width: 860px) {
  .tabbar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 75;
    display: flex;
    gap: 2px;
    padding: 6px;
    border-radius: 21px;
    border: 1px solid var(--ligne);
    background: color-mix(in srgb, var(--papier) 88%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: var(--ombre-2);
  }

  .tabbar__lien {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    display: grid;
    place-items: center;
    gap: 3px;
    padding: 6px 4px;
    border-radius: 15px;
    color: var(--encre-douce);
    text-decoration: none;
    transition: background-color var(--duree-courte) var(--doux),
      color var(--duree-courte) var(--doux);
  }

  .tabbar__lien svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
  }

  .tabbar__lien span {
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .tabbar__lien[data-courant="oui"] {
    background: var(--llb-magenta);
    color: #fff;
  }

  .tabbar__plus[aria-expanded="true"] {
    background: var(--surface-2);
    color: var(--encre);
  }

  /* La pilule ne doit pas recouvrir la fin de la page. */
  body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .bulle {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================ ajustements mobiles généraux */

@media (max-width: 860px) {
  .entete__rangee {
    min-height: 52px;
  }

  /* Sommaire du haut masqué : c'est la tabbar qui navigue. */
  .entete__nav {
    display: none;
  }

  .menu-mobile {
    padding-top: calc(70px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  }

  .hero {
    padding-top: var(--e4);
  }

  .apercu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .apercu__valeur {
    font-size: 1.45rem;
  }

  .jauges {
    gap: 12px;
  }

  .jauge {
    padding: var(--e2);
  }

  .jauge__score b {
    font-size: 1.85rem;
  }

  .section {
    padding: var(--e5) 0;
  }

  .carte-bloc {
    gap: var(--e2);
  }

  .panneau {
    position: static;
    min-height: 0;
  }

  .barre-outils {
    gap: 8px;
  }

  .segments {
    flex: 1 1 auto;
  }

  .segments__bouton {
    flex: 1 1 0;
    padding: 8px 10px;
    text-align: center;
  }

  .series {
    gap: 12px;
  }

  .favori {
    grid-template-columns: 44px 1fr;
    row-gap: 6px;
  }

  .favori__etat {
    grid-column: 2;
    justify-self: start;
  }

  .fil {
    grid-template-columns: minmax(0, 1fr);
  }

  .synthese {
    padding-left: 14px;
  }
}

@media (max-width: 460px) {
  .apercu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tabbar__lien span {
    font-size: 0.6rem;
  }

  .entete__titre {
    font-size: 0.88rem;
  }
}

/* --------------------------------------- ligne de mise à jour de l'aperçu */

.apercu__maj {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: var(--t-micro);
  color: var(--encre-faible);
}

.apercu__heure {
  font-variant-numeric: tabular-nums;
}

/* Pastille discrète : un bouton, pas un lien perdu. */
.bouton-pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--ligne);
  background: var(--papier);
  color: var(--encre-douce);
  font-size: var(--t-micro);
  font-weight: 600;
  transition: border-color var(--duree-courte) var(--doux),
    color var(--duree-courte) var(--doux),
    background var(--duree-courte) var(--doux);
}

.bouton-pastille:hover {
  border-color: var(--llb-magenta);
  color: var(--llb-magenta);
  background: color-mix(in srgb, var(--llb-magenta) 7%, var(--papier));
}

.bouton-pastille__icone {
  width: 13px;
  height: 13px;
  fill: currentColor;
  transition: transform var(--duree) var(--ressort);
}

.bouton-pastille:hover .bouton-pastille__icone {
  transform: rotate(-90deg);
}

.bouton-pastille[data-occupe="oui"] .bouton-pastille__icone {
  animation: tourne 900ms linear infinite;
}

@keyframes tourne {
  to {
    transform: rotate(-360deg);
  }
}

.bouton-pastille:disabled {
  opacity: 0.5;
}

/* ------------------------------------ bandeau permanent, hors direct ----- */

.ticker[data-statut="avant"],
.ticker[data-statut="termine"] {
  background: var(--llb-marine);
  border-top-color: color-mix(in srgb, #000 20%, var(--llb-marine));
}

.ticker[data-statut="avant"] .ticker__etiquette,
.ticker[data-statut="termine"] .ticker__etiquette {
  background: color-mix(in srgb, #000 24%, var(--llb-marine));
}

.ticker[data-statut="avant"] .ticker__piste::before,
.ticker[data-statut="termine"] .ticker__piste::before {
  background: linear-gradient(90deg, var(--llb-marine), transparent);
}

.ticker[data-statut="avant"] .ticker__piste::after,
.ticker[data-statut="termine"] .ticker__piste::after {
  background: linear-gradient(270deg, var(--llb-marine), transparent);
}

/* Le point ne clignote que pendant le direct. */
.ticker:not([data-statut="direct"]) .ticker__point {
  animation: none;
  opacity: 0.6;
}