/* Bannière défilante 441 — couleurs 441 : fond sombre, texte clair,
   accent émeraude. Hauteur fixe 38 px, réservée SEULEMENT quand la
   bannière est active (.b441-on, posée par banniere.js après un JSON
   valide et non vide) : avant cela, display:none, aucun espace
   fantôme (voir l'espace réservé ci-dessous).
   ÉPINGLÉE (correctif 2026-11-06, remplace le sticky du lot langue) :
   `position: sticky` s'est révélé fragile en réel — il casse dès
   qu'un ancêtre de la page porte un `overflow` non visible, ce que
   certaines de nos pages générées font, et la bannière suivait la
   page sur iPhone malgré la règle présente côté serveur. Le
   conteneur passe donc en `position: fixed; top:0; left:0; right:0`
   (référentiel = la fenêtre, insensible aux ancêtres), z-index 9000 :
   au-dessus du contenu des pages, sous le bouton de langue (.l441,
   z-index 10001, décalé à top:48px donc juste sous la bannière) et
   sous les modaux. Fond déjà opaque (#0b100e), hauteur inchangée.
   ESPACE RÉSERVÉ : un élément fixé sort du flux — sans compensation,
   le contenu passerait dessous. À l'activation, banniere.js insère
   donc dans le flux, immédiatement avant le conteneur, un
   `.b441-espace` dont il synchronise la hauteur sur la hauteur réelle
   du conteneur fixé (38 px en mode défilant ; hauteur mesurée en mode
   statique, où la bannière peut s'enrouler). Aucun chevauchement,
   aucun saut de contenu après l'activation. JSON absent/vide : ni
   espace, ni bannière.
   LIENS TOUCHABLES (v4, 2026-11-06) : chaque item est une ancre dont
   la zone de touche fait TOUTE la hauteur de la bannière
   (.b441-item : min-height 38 px, contenu centré verticalement,
   cursor: pointer) — combinée à la pause dès le premier toucher
   (banniere.js v4), un titre se laisse enfin viser au doigt. */
.b441 {
  display: none;
  background: #0b100e;
  color: #e8f5ee;
  border-bottom: 2px solid #10b981;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
}
.b441-on {
  display: block;
  height: 38px;
  overflow: hidden;
}
/* Espace réservé en flux (inséré par banniere.js juste avant le
   conteneur fixé, seulement quand la bannière est active). La hauteur
   de base est 38 px ; le JS la synchronise en ligne sur la hauteur
   réelle du conteneur (mode statique notamment). */
.b441-espace {
  display: none;
  height: 38px;
}
.b441-espace-on {
  display: block;
}
.b441-piste {
  display: flex;
  width: max-content;
  height: 38px;
  animation: b441-defile 40s linear infinite;
}
.b441:hover .b441-piste,
.b441-piste.b441-pause {
  animation-play-state: paused;
}
.b441-serie {
  display: flex;
  align-items: center;
  height: 38px;
}
.b441-item {
  display: flex;
  align-items: center;
  min-height: 38px;
  cursor: pointer;
  gap: 0.5em;
  color: #e8f5ee;
  text-decoration: none;
  white-space: nowrap;
  padding: 0 0.4em;
}
.b441-item:hover,
.b441-item:focus {
  color: #6ee7a7;
  text-decoration: underline;
}
.b441-date {
  color: #34d399;
  font-size: 0.82em;
  font-variant-numeric: tabular-nums;
}
.b441-sep {
  color: #10b981;
  font-size: 0.6em;
  padding: 0 0.6em;
}
@keyframes b441-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Mode statique (prefers-reduced-motion) : aucun défilement, les items
   s'affichent en ligne, enroulés si besoin, hauteur libre. */
.b441-statique {
  height: auto;
}
.b441-statique .b441-piste {
  animation: none;
  width: auto;
  height: auto;
  flex-wrap: wrap;
}
.b441-statique .b441-serie {
  height: auto;
  flex-wrap: wrap;
  padding: 6px 4px;
}
@media (prefers-reduced-motion: reduce) {
  .b441-piste { animation: none; }
}