/* ============================================================================
   MONTLAO — bandeau.css
   (c) 2026 MontLao Sole Co., Ltd

   Bandeau des cours. Version du 22 août 2026 : hauteur doublée,
   fond orange, écritures sombres.

   Tous les sélecteurs restent préfixés .mtl-b- ou .mtl-bandeau :
   aucune règle existante n'est touchée. Aucune modification de
   bandeau.js n'est nécessaire — le fichier ne compose aucune
   couleur, il ne pose que des classes.

   ----------------------------------------------------------------
   CONTRASTES MESURÉS sur l'orange le plus sombre du dégradé
   (#E8871A), qui est le cas le pire. Seuil exigé : 4,5 pour un
   texte courant, 3,0 pour un gros caractère.

       encre       #151515    6,88
       libellé     #000000    7,91
       unité       #4A2A05    4,87
       hausse      #04240F    6,26
       baisse      #63100C    4,91
       stable      #3A2408    5,51

   Le vert et le rouge sont volontairement FONCÉS. Un vert vif ou
   un rouge vif sur orange descendent sous 4 et deviennent
   illisibles en défilement — c'est le piège de ce fond.

   Ils sont en outre séparés de 1,27 EN LUMINOSITÉ l'un de
   l'autre : une hausse et une baisse restent distinguables pour
   qui ne perçoit pas la différence entre le vert et le rouge.
   La flèche que pose bandeau.js reste le signal principal.
   ============================================================== */

.mtl-bandeau {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;                       /* au-dessus des en-têtes, sous les avis */
  display: flex;
  align-items: stretch;
  height: 68px;                       /* était 34 : volume doublé */

  background: linear-gradient(180deg, #F09A2B, #E8871A);
  border-bottom: 2px solid rgba(0, 0, 0, .40);
  color: #151515;
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 14px;                    /* la hauteur double, la lecture suit */
  user-select: none;
}

.mtl-b-titre {
  display: flex; align-items: center;
  padding: 0 18px;
  background: #151515;
  color: #F5A93B;                     /* 9,2 sur le noir */
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .24em;
  flex: none;
}

.mtl-b-fenetre { position: relative; flex: 1; overflow: hidden; }

.mtl-b-fenetre::after {          /* estompe à droite : le ruban ne se coupe pas net */
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; width: 56px;
  background: linear-gradient(90deg, rgba(232, 135, 26, 0), #E8871A);
  pointer-events: none;
}

.mtl-b-ruban {
  --duree: 40s;
  display: flex;
  width: max-content;
  height: 100%;
  animation: mtl-b-defile var(--duree) linear infinite;
}

.mtl-bandeau.arret .mtl-b-ruban,
.mtl-bandeau.survol .mtl-b-ruban { animation-play-state: paused; }

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

.mtl-b-suite { display: flex; align-items: center; }

.mtl-b-cours {
  display: flex; align-items: baseline; gap: 9px;
  padding: 0 22px;
  white-space: nowrap;
  border-right: 1px solid rgba(0, 0, 0, .22);
}

.mtl-b-cours b {
  font-family: var(--sans, "Inter Tight", system-ui, sans-serif);
  font-weight: 600;
  font-size: 15px;
  color: #000;
}
.mtl-b-cours .v { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; color: #151515; }
.mtl-b-cours .u { font-size: 11px; color: #4A2A05; letter-spacing: .06em; }
.mtl-b-cours .d { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }

/* La date de clôture, discrète mais toujours là. */
.mtl-b-cours .j {
  font-size: 10.5px;
  color: #4A2A05;
  border: 1px solid rgba(0, 0, 0, .30);
  border-radius: 2px;
  padding: 2px 5px;
}

.mtl-b-cours.hausse .d { color: #04240F; }
.mtl-b-cours.baisse .d { color: #63100C; }
.mtl-b-cours.stable .d { color: #3A2408; }

.mtl-b-vide {
  display: flex; align-items: center; height: 100%;
  padding: 0 22px;
  color: #3A2408;
  font-size: 13.5px;
}

/* ----------------------------------------------------------------
   SOURCE EN DIFFICULTÉ

   Dans la version verte, l'alerte se signalait par un liseré et un
   bloc de titre passés en TERRE. Sur un fond orange, terre sur
   orange ne se voit pas : le signal disparaissait purement et
   simplement.

   Il est donc refait autrement, et de trois façons à la fois pour
   ne dépendre d'aucune perception de couleur :
     · le bloc de titre passe en hachures noir et orange ;
     · le liseré du bas s'épaissit en noir plein ;
     · la mention « SOURCE EN DIFFICULTÉ » s'écrit à la suite de
       COURS.

   La mention est ajoutée par la feuille de style parce que le bloc
   de titre est déjà aria-hidden dans bandeau.js — l'information
   réelle reste portée par l'attribut title du bandeau, que le
   script renseigne avec le motif exact de la difficulté.
   ---------------------------------------------------------------- */

.mtl-bandeau.alerte { border-bottom: 4px solid #151515; }

.mtl-bandeau.alerte .mtl-b-titre {
  color: #FFD9A0;
  background: repeating-linear-gradient(
    -45deg, #151515 0 11px, #7A4A08 11px 22px);
}
.mtl-bandeau.alerte .mtl-b-titre::after {
  content: " · SOURCE EN DIFFICULTÉ";
  letter-spacing: .14em;
}

.mtl-b-pause {
  flex: none;
  width: 46px;
  background: none;
  border: 0;
  border-left: 1px solid rgba(0, 0, 0, .28);
  color: #151515;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
.mtl-b-pause:hover { color: #000; background: rgba(0, 0, 0, .12); }
.mtl-b-pause:focus-visible { outline: 2px solid #151515; outline-offset: -3px; }

@media (max-width: 640px) {
  .mtl-bandeau { height: 60px; font-size: 12.5px; }
  .mtl-b-titre { padding: 0 11px; letter-spacing: .12em; font-size: 10px; }
  .mtl-b-cours { padding: 0 15px; gap: 6px; }
  .mtl-b-cours b, .mtl-b-cours .v { font-size: 13.5px; }
  .mtl-b-cours .u { display: none; }     /* l'unité passe à la trappe avant le cours */
  /* Sur un écran étroit, la mention d'alerte ferait déborder le
     bloc de titre : les hachures et le liseré noir suffisent. */
  .mtl-bandeau.alerte .mtl-b-titre::after { content: " !"; }
}

/* Le défilement s'arrête. Les cours restent lisibles : on les fait
   simplement tenir sur la largeur, en les laissant déborder au
   défilement manuel plutôt qu'en animation. */
@media (prefers-reduced-motion: reduce) {
  .mtl-b-ruban { animation: none; }
  .mtl-b-fenetre { overflow-x: auto; }
  .mtl-b-suite:nth-child(2) { display: none; }
  .mtl-b-pause { display: none; }
}