/*
 * Cockpit de trading — direction visuelle (skill frontend-design)
 * ==================================================================
 *
 * Sujet : un poste de trading solo pour le matin (gaps à catalyseur,
 * exécution manuelle contre IBKR). Le vocabulaire du métier — zone
 * d'entrée, stop, cible, ratio R/R, VWAP, opening range, conviction,
 * signal — est la matière première du design, pas un habillage ajouté
 * après coup.
 *
 * Concept : un terminal de marché inversé. Les terminaux de trading
 * classiques sont sombres avec du texte mono ambre/vert ; ici la
 * décision produit impose un fond CLAIR (déjà tranchée). On garde
 * l'identité "terminal" — chiffres tabulaires en monospace, hairlines,
 * densité maîtrisée — mais sur un fond clair et froid façon papier
 * d'écran, jamais le crème chaud + serif + terracotta par défaut.
 * Chaque fiche est mise en forme comme un ticket d'ordre : bord
 * perforé (pointillé + encoches rondes) séparant l'en-tête du bloc de
 * plan chiffré, et la conviction (1-5) se lit comme un mètre de
 * signal — 5 barres verticales façon force de réception — plutôt que
 * des étoiles génériques. C'est la signature de la page : elle rend
 * explicite le vocabulaire "signal / conviction" du domaine.
 *
 * Palette (fond clair, contraste fort pour LONG/SHORT) :
 *   --c-fond        #F5F7F5  fond général, gris-vert très clair (pas de crème)
 *   --c-surface     #FFFFFF  cartes/tickets
 *   --c-ligne       #DDE3DF  hairlines, séparateurs, bordures de carte
 *   --c-encre       #12181A  texte principal
 *   --c-attenue     #57625E  texte secondaire, labels, légendes
 *   --c-long        #0B7A3B  LONG (texte/bordure)      teinte #E4F6EA
 *   --c-short       #B3261E  SHORT (texte/bordure)     teinte #FBEAE8
 *   --c-signal      #1554B3  accent (liens, focus, état "connecté")  teinte #E8EEFA
 *   --c-alerte      #8A5300  avertissements / Gateway déconnecté     teinte #FCF1DC
 *   --c-manque      #8A5A56  condition manquante (panneau des 6)     teinte #F3ECEA
 *
 * Typographie (deux rôles, empilements système — aucune ressource
 * externe) :
 *   - Mono (identité/donnée) : ticker, prix, stop, cible, ratio,
 *     labels de champ en petites capitales espacées. Porte le
 *     caractère "instrument de bord" de la page.
 *     ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace
 *   - Sans (récit) : catalyseur, sentiment, raison, texte courant.
 *     Lisible, neutre, ne rivalise pas avec le mono.
 *     -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
 *
 * Hiérarchie :
 *   1. Bandeau global (état Gateway, plage horaire, compteur) — fixe,
 *      toujours visible, c'est le tableau de bord.
 *   2. Pile de bannières de signal — transitoire, au-dessus du
 *      contenu, jamais bloquante (pas de modale).
 *   3. Contexte du jour — bande de puces compactes, lecture rapide.
 *   4. Grille de fiches-tickets — le cœur de la page, une carte par
 *      opportunité, dense mais aérée par le rythme des hairlines.
 *
 * Mouvement : sobre. Une respiration discrète sur la pastille
 * "connecté", une surbrillance ponctuelle (halo coloré) sur la carte
 * concernée par un signal. `prefers-reduced-motion` désactive les deux
 * et bascule sur un état statique équivalent.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --c-fond: #f5f7f5;
  --c-surface: #ffffff;
  --c-ligne: #dde3df;
  --c-encre: #12181a;
  --c-attenue: #57625e;

  --c-long: #0b7a3b;
  --c-long-teinte: #e4f6ea;
  --c-short: #b3261e;
  --c-short-teinte: #fbeae8;
  --c-signal: #1554b3;
  --c-signal-teinte: #e8eefa;
  --c-alerte: #8a5300;
  --c-alerte-teinte: #fcf1dc;
  --c-manque: #8a5a56;
  --c-manque-teinte: #f3ecea;

  --police-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --police-corps: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --rayon: 8px;
  --ombre-carte: 0 1px 2px rgba(18, 24, 26, 0.06);
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--c-fond);
  color: var(--c-encre);
  font-family: var(--police-corps);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd {
  margin: 0;
}

a {
  color: var(--c-signal);
}

:focus-visible {
  outline: 2px solid var(--c-signal);
  outline-offset: 2px;
}

/* L'attribut [hidden] doit toujours l'emporter, y compris sur les
   sélecteurs de classe qui posent leur propre `display` (ex. .etat-vide,
   .contexte) — même spécificité qu'un sélecteur de classe, donc sans ce
   renfort l'ordre du fichier déciderait au lieu de l'état réel. */
[hidden] {
  display: none !important;
}

/* -- Lien d'évitement ---------------------------------------------- */

.lien-evitement {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lien-evitement:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  z-index: 100;
  background: var(--c-surface);
  border: 1px solid var(--c-signal);
  border-radius: var(--rayon);
  padding: 0.5rem 0.75rem;
}

/* -- Bandeau global -------------------------------------------------- */

.bandeau {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-ligne);
}

.bandeau__gateway {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.pastille {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-attenue);
  flex-shrink: 0;
}

.pastille[data-etat="connecte"] {
  background: var(--c-long);
  animation: respiration 2.4s ease-in-out infinite;
}

.pastille[data-etat="deconnecte"] {
  background: var(--c-alerte);
}

.pastille[data-etat="erreur"] {
  background: var(--c-short);
}

@keyframes respiration {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.indice-son {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--c-alerte);
  background: var(--c-alerte-teinte);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  white-space: nowrap;
}

.bandeau__plage {
  color: var(--c-attenue);
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46ch;
}

.bandeau__compteur {
  margin-left: auto;
  font-family: var(--police-mono);
  font-size: 0.8125rem;
  color: var(--c-attenue);
  background: var(--c-signal-teinte);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

.bandeau__compteur strong {
  color: var(--c-signal);
  font-weight: 700;
}

/* -- Pile de bannières de signal -------------------------------------- */

.pile-signaux {
  position: sticky;
  top: 49px;
  z-index: 19;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1.25rem;
}

.pile-signaux:not(:empty) {
  padding-top: 0.5rem;
}

.banniere-signal {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  border-radius: var(--rayon);
  border: 1px solid;
  font-family: var(--police-mono);
  font-size: 0.875rem;
  box-shadow: var(--ombre-carte);
  animation: apparition 0.2s ease-out;
}

.banniere-signal--long {
  background: var(--c-long-teinte);
  border-color: var(--c-long);
  color: var(--c-long);
}

.banniere-signal--short {
  background: var(--c-short-teinte);
  border-color: var(--c-short);
  color: var(--c-short);
}

.banniere-signal__ticker {
  font-weight: 700;
  font-size: 1rem;
}

.banniere-signal__prix {
  margin-left: auto;
  font-weight: 700;
}

/* Signal "observé" (Task 5, stratégies hors ORB — pullback EMA,
   continuation PM) : jamais plaçable, jamais sonore. Même palette grise
   neutre que .badge-oeil (fiche "surveiller seulement" ci-dessous) plutôt
   qu'une couleur inédite — un trader qui connaît déjà ce gris = "pas
   actionnable" le reconnaît ici instantanément. Règle placée après
   .banniere-signal--long/--short (même spécificité, un seul sélecteur de
   classe) : elle gagne la cascade sans !important. */
.signal-observe {
  background: var(--c-fond);
  border-color: var(--c-attenue);
  border-style: dashed;
  color: var(--c-encre);
}

.banniere-signal__badge-observe {
  font-family: var(--police-corps);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-attenue);
  background: var(--c-surface);
  border: 1px solid var(--c-ligne);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  white-space: nowrap;
}

.banniere-signal__niveaux {
  margin-left: auto;
  font-weight: 700;
  color: var(--c-attenue);
  white-space: nowrap;
}

.banniere-signal__fermer {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0 0 0.25rem;
}

@keyframes apparition {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Bandeau doux "nouvelle manchette" — même pile, même gabarit que
   .banniere-signal, mais délibérément SANS mono ni vert/rouge : c'est
   un récit (une manchette), pas une donnée de marché chiffrée (signal),
   d'où la police sans-serif et l'accent --c-signal (déjà le bleu
   "information" du reste de la page, jamais utilisé pour LONG/SHORT). */
.banniere-nouvelle {
  background: var(--c-signal-teinte);
  border-color: var(--c-signal);
  color: var(--c-encre);
  font-family: var(--police-corps);
}

.banniere-nouvelle__ticker {
  font-family: var(--police-mono);
  font-weight: 700;
  color: var(--c-signal);
  white-space: nowrap;
}

.banniere-nouvelle__titre {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- Contexte du jour -------------------------------------------------- */

.contexte {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--c-ligne);
}

.contexte__ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.puce {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--c-attenue);
  background: var(--c-fond);
  border: 1px solid var(--c-ligne);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
}

.puce strong {
  color: var(--c-encre);
  font-weight: 600;
}

.puce--alerte {
  color: var(--c-alerte);
  background: var(--c-alerte-teinte);
  border-color: var(--c-alerte);
}

.contexte__secteur {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--c-encre);
  max-width: 80ch;
}

.contexte__secteur strong {
  color: var(--c-attenue);
  font-family: var(--police-mono);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  margin-right: 0.4rem;
}

/* -- État vide (404) ----------------------------------------------------- */

.etat-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding: 5rem 1.5rem;
  color: var(--c-attenue);
}

.etat-vide__titre {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-encre);
}

.etat-vide__detail {
  font-family: var(--police-mono);
  font-size: 0.875rem;
  max-width: 60ch;
}

/* -- Grille de fiches ------------------------------------------------- */

.grille-fiches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1.25rem;
  padding: 1.25rem;
}

.fiche-carte {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-ligne);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  padding: 1rem 1.1rem 0.9rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.fiche-carte:hover {
  box-shadow: 0 4px 14px rgba(18, 24, 26, 0.1);
  transform: translateY(-1px);
}

.fiche-carte--surbrillance-long,
.fiche-carte--surbrillance-short {
  animation: pulsation 2.4s ease-out 2;
}

.fiche-carte--surbrillance-long {
  border-color: var(--c-long);
  box-shadow: 0 0 0 3px var(--c-long-teinte);
}

.fiche-carte--surbrillance-short {
  border-color: var(--c-short);
  box-shadow: 0 0 0 3px var(--c-short-teinte);
}

@keyframes pulsation {
  0% { box-shadow: 0 0 0 0 rgba(11, 122, 59, 0.35); }
  70% { box-shadow: 0 0 0 10px rgba(11, 122, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(11, 122, 59, 0); }
}

/* Signal observé (Task 5, round 1) : halo GRIS distinct — jamais le
   vert/rouge d'un signal plaçable — et bordure pointillée pour rester
   cohérent avec .signal-observe (bandeau) et .badge-oeil. Animation
   dédiée (pulsation-observe) : même rythme, teinte grise. */
.fiche-carte--surbrillance-observe {
  animation: pulsation-observe 2.4s ease-out 2;
  border-color: var(--c-attenue);
  border-style: dashed;
  box-shadow: 0 0 0 3px var(--c-fond);
}

@keyframes pulsation-observe {
  0% { box-shadow: 0 0 0 0 rgba(87, 98, 94, 0.35); }
  70% { box-shadow: 0 0 0 10px rgba(87, 98, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(87, 98, 94, 0); }
}

.fiche-carte__ligne-haut {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.fiche-carte__ligne-haut .fiche-carte__entete {
  flex: 1 1 auto;
  min-width: 0;
}

.fiche-carte__entete {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* -- Bloc prix courant (haut droite de la carte) ----------------------- */

.fiche-carte__prix {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  flex-shrink: 0;
  font-family: var(--police-mono);
  text-align: right;
}

.fiche-carte__prix-valeur {
  font-size: 1.3125rem;
  font-weight: 700;
  color: var(--c-encre);
  border-radius: 4px;
  padding: 0 2px;
}

.fiche-carte__prix-valeur--absent {
  color: var(--c-attenue);
  font-weight: 400;
}

.fiche-carte__prix-valeur.prix-maj {
  animation: flash-prix 0.6s ease-out;
}

@keyframes flash-prix {
  0% { background-color: var(--c-signal-teinte); }
  100% { background-color: transparent; }
}

.fiche-carte__prix-variation {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.fiche-carte__prix-variation--hausse { color: var(--c-long); }
.fiche-carte__prix-variation--baisse { color: var(--c-short); }

.badge-zone {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  white-space: nowrap;
}

.badge-zone--dans_la_zone {
  color: var(--c-long);
  background: var(--c-long-teinte);
}

.badge-zone--proche {
  color: var(--c-alerte);
  background: var(--c-alerte-teinte);
}

.badge-zone--au_dessus,
.badge-zone--en_dessous {
  color: var(--c-attenue);
  background: var(--c-fond);
  border: 1px solid var(--c-ligne);
}

.fiche-carte__ticker {
  font-family: var(--police-mono);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.fiche-carte__liste {
  font-family: var(--police-mono);
  font-size: 0.6875rem;
  color: var(--c-attenue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.badge-direction {
  font-family: var(--police-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
}

.badge-direction--long {
  color: var(--c-long);
  background: var(--c-long-teinte);
}

.badge-direction--short {
  color: var(--c-short);
  background: var(--c-short-teinte);
}

.badge-oeil,
.badge-hors-marche {
  font-size: 0.75rem;
  color: var(--c-attenue);
  background: var(--c-fond);
  border: 1px solid var(--c-ligne);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
}

.metre-conviction {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
}

.metre-conviction__barre {
  width: 4px;
  background: var(--c-ligne);
  border-radius: 1px;
}

.metre-conviction__barre:nth-child(1) { height: 6px; }
.metre-conviction__barre:nth-child(2) { height: 9px; }
.metre-conviction__barre:nth-child(3) { height: 12px; }
.metre-conviction__barre:nth-child(4) { height: 15px; }
.metre-conviction__barre:nth-child(5) { height: 18px; }

.metre-conviction__barre--pleine.metre-conviction__barre--long {
  background: var(--c-long);
}

.metre-conviction__barre--pleine.metre-conviction__barre--short {
  background: var(--c-short);
}

.fiche-carte__catalyseur {
  font-size: 0.875rem;
  color: var(--c-encre);
}

.fiche-carte__manchette {
  font-size: 0.8125rem;
  color: var(--c-attenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fiche-carte__manchette a {
  color: var(--c-signal);
  text-decoration: none;
}

.fiche-carte__manchette a:hover {
  text-decoration: underline;
}

.manchette__age {
  font-family: var(--police-mono);
  font-size: 0.75rem;
}

.separateur-ticket {
  position: relative;
  height: 0;
  border-top: 2px dashed var(--c-ligne);
  margin: 0 -1.1rem;
}

.separateur-ticket::before,
.separateur-ticket::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-fond);
}

.separateur-ticket::before { left: -7px; }
.separateur-ticket::after { right: -7px; }

.plan-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1rem;
  font-family: var(--police-mono);
}

.plan-grille dt {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-attenue);
}

.plan-grille dd {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0.1rem 0 0;
}

.plan-grille dd.valeur--long { color: var(--c-long); }
.plan-grille dd.valeur--short { color: var(--c-short); }

/* Badge de calibrage (recalibré / zone trop large / ATR indisponible) —
   même patron visuel que .badge-oeil : gris neutre, pas actionnable. */
.bloc-calibrage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.badge-recalibre {
  font-size: 0.75rem;
  color: var(--c-attenue);
  background: var(--c-fond);
  border: 1px solid var(--c-ligne);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
}

.ligne-calibrage-ia {
  font-family: var(--police-mono);
  font-size: 0.6875rem;
  color: var(--c-attenue);
  margin: 0;
}

.fiche-carte__sentiment {
  font-size: 0.8125rem;
  color: var(--c-attenue);
}

.fiche-carte__raison {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--c-attenue);
  border-left: 2px solid var(--c-ligne);
  padding-left: 0.6rem;
}

.fiche-carte__pied {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.6rem;
  border-top: 1px solid var(--c-ligne);
  font-size: 0.8125rem;
}

.action-graphique {
  font-weight: 600;
  color: var(--c-signal);
}

.lien-tradingview {
  color: var(--c-attenue);
  text-decoration: none;
  font-size: 0.75rem;
}

.lien-tradingview:hover {
  color: var(--c-signal);
  text-decoration: underline;
}

/* -- Accessibilité / mouvement réduit ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pastille[data-etat="connecte"],
  .fiche-carte--surbrillance-long,
  .fiche-carte--surbrillance-short,
  .fiche-carte--surbrillance-observe,
  .banniere-signal,
  .fiche-carte,
  .fiche-carte__prix-valeur.prix-maj {
    animation: none !important;
    transition: none !important;
  }
}

/* -- Page graphique (Task 10) --------------------------------------------
 *
 * Extension de la direction établie ci-dessus, pas une nouvelle identité :
 * même palette (aucune couleur ajoutée — la boîte OR5 réutilise --c-alerte,
 * jamais utilisée jusqu'ici sur une donnée de marché elle-même, ce qui la
 * distingue naturellement de la bande d'entrée en --c-signal), même mono
 * pour les données, même motif de bandeau sticky.
 *
 * Signature de la page : le bandeau reprend le séparateur perforé du
 * ticket (fiche-carte) au lieu d'une simple ligne, pour rappeler que le
 * graphique EST la fiche, juste zoomée — pas un outil séparé. La boîte
 * OR5 est tracée en pointillé ambre directement dans le graphique (une
 * série Lightweight Charts, pas un cadre CSS) : c'est un fait du marché
 * (l'amplitude des 5 premières minutes), pas une décoration de l'écran.
 * -------------------------------------------------------------------- */

.bandeau--graphique {
  gap: 0.5rem 1.25rem;
}

.bandeau__retour,
.bandeau__lien-rapport {
  font-size: 0.8125rem;
  color: var(--c-attenue);
  text-decoration: none;
  white-space: nowrap;
}

.bandeau__retour:hover,
.bandeau__lien-rapport:hover {
  color: var(--c-signal);
  text-decoration: underline;
}


.entete-titre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.entete-titre__ticker {
  font-family: var(--police-mono);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.entete-catalyseur {
  padding: 0 1.25rem 0.75rem;
  font-size: 0.875rem;
  color: var(--c-encre);
  border-bottom: 1px dashed var(--c-ligne);
  margin: 0 0 0;
}

.entete-manchette {
  padding: 0.6rem 1.25rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--c-attenue);
  border-bottom: 1px dashed var(--c-ligne);
  margin: 0;
}

.entete-manchette a {
  color: var(--c-signal);
  text-decoration: none;
}

.entete-manchette a:hover {
  text-decoration: underline;
}

.avertissement-source {
  margin: 0.75rem 1.25rem 0;
  padding: 0.5rem 0.85rem;
  border-radius: var(--rayon);
  background: var(--c-alerte-teinte);
  border: 1px solid var(--c-alerte);
  color: var(--c-alerte);
  font-size: 0.8125rem;
}

.graphique-barre-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem 0.75rem;
}

.selecteur-resolution {
  display: inline-flex;
  border: 1px solid var(--c-ligne);
  border-radius: var(--rayon);
  overflow: hidden;
}

.bouton-resolution {
  font-family: var(--police-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-attenue);
  background: var(--c-surface);
  border: none;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}

.bouton-resolution + .bouton-resolution {
  border-left: 1px solid var(--c-ligne);
}

.bouton-resolution[aria-pressed="true"] {
  background: var(--c-signal);
  color: #ffffff;
}

.legende-graphique {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0;
  font-family: var(--police-mono);
  font-size: 0.8125rem;
}

.legende-graphique__item {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.legende-graphique__item::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 2px;
  align-self: center;
}

.legende-graphique__item--vwap::before { background: var(--c-signal); }
.legende-graphique__item--ema9::before { background: var(--c-attenue); }
.legende-graphique__item--ema20::before { background: var(--c-encre); }

.legende-graphique dt {
  color: var(--c-attenue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6875rem;
}

.legende-graphique dd {
  font-weight: 600;
  color: var(--c-encre);
}

.graphique-conteneur {
  margin: 0 1.25rem 1.25rem;
  border: 1px solid var(--c-ligne);
  border-radius: var(--rayon);
  background: var(--c-surface);
  height: min(70vh, 620px);
  min-height: 360px;
}

.graphique-chargement {
  margin: -0.5rem 1.25rem 1.25rem;
  color: var(--c-attenue);
  font-size: 0.875rem;
}

@media (max-width: 640px) {
  .graphique-barre-outils {
    flex-direction: column;
    align-items: flex-start;
  }

  .graphique-conteneur {
    margin: 0 1rem 1rem;
    height: 60vh;
  }
}

/* -- Panneau des six conditions (Task 2) ---------------------------------
 *
 * Un ticket miniature de plus (bord fin, coin arrondi, ombre de carte),
 * cohérent avec les fiches de la page liste — mais les six pastilles
 * suivent le même motif "pilule" que le badge de zone et le compteur du
 * bandeau plutôt que d'inventer une forme. Vert plein = condition remplie
 * (--c-long, déjà le "oui" du reste du site) ; gris-rouge doux (--c-manque,
 * nouvelle teinte volontairement moins alarmante que --c-short — une
 * condition qui manque n'est pas une erreur, juste "pas encore") pour une
 * condition manquante. La pastille Statut est mise en évidence : bordure
 * plus épaisse, texte plus gras, et repoussée à droite par un
 * `margin-left: auto` — elle porte la décision, les cinq autres portent
 * le pourquoi.
 * -------------------------------------------------------------------- */

.panneau-conditions {
  margin: 0.75rem 1.25rem 0;
  padding: 0.85rem 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-ligne);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
}

.panneau-conditions--grise {
  opacity: 0.55;
}

.panneau-conditions__gateway {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--c-alerte-teinte);
  color: var(--c-alerte);
  font-size: 0.8125rem;
  font-weight: 600;
}

.panneau-conditions__attente {
  margin: 0;
  color: var(--c-attenue);
  font-size: 0.875rem;
}

.panneau-conditions__synthese {
  margin: 0 0 0.6rem;
  font-family: var(--police-mono);
  font-size: 0.8125rem;
  color: var(--c-attenue);
}

.panneau-conditions__pastilles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.panneau-conditions__evaluation {
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  color: var(--c-attenue);
  border-bottom: 1px dotted var(--c-attenue);
  display: inline-block;
  cursor: help;
}

.pastille-condition {
  display: inline-block;
  font-family: var(--police-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.3rem 0.75rem;
  white-space: nowrap;
}

.pastille-condition--ok {
  color: var(--c-long);
  background: var(--c-long-teinte);
  border-color: var(--c-long);
}

.pastille-condition--manque {
  color: var(--c-manque);
  background: var(--c-manque-teinte);
  border-color: var(--c-manque);
}

.pastille-condition--statut {
  margin-left: auto;
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 0.35rem 0.9rem;
  border-width: 2px;
}

.pastille-condition--statut-arme {
  color: var(--c-signal);
  background: var(--c-signal-teinte);
  border-color: var(--c-signal);
}

.pastille-condition--statut-emis {
  color: var(--c-long);
  background: var(--c-long-teinte);
  border-color: var(--c-long);
}

.pastille-condition--statut-surveiller {
  color: var(--c-attenue);
  background: var(--c-fond);
  border-color: var(--c-ligne);
}

/* Round 1/5 (revue Task 5) : statut "signal observé" — même palette grise
   neutre que statut-surveiller (déjà "pas actionnable" dans ce panneau),
   distincte de statut-emis (vert, réservé aux signaux plaçables). */
.pastille-condition--statut-observe {
  color: var(--c-attenue);
  background: var(--c-fond);
  border-color: var(--c-attenue);
}

@media (max-width: 640px) {
  .panneau-conditions {
    margin: 0.75rem 1rem 0;
  }

  .pastille-condition--statut {
    margin-left: 0;
  }
}

/* -- Petits écrans ------------------------------------------------------ */

@media (max-width: 640px) {
  .bandeau {
    flex-direction: column;
    align-items: flex-start;
  }

  .bandeau__compteur {
    margin-left: 0;
  }

  .bandeau__plage {
    max-width: 100%;
    white-space: normal;
  }

  .grille-fiches {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
}

/* -- Page Rapport (Task 4) ------------------------------------------------
 *
 * Encore une extension de la direction établie, jamais une nouvelle
 * identité : mêmes tokens, même bandeau sticky, même carte-ticket à ombre
 * portée. Le rapprochement conceptuel de cette page avec le reste du
 * cockpit : si une fiche-carte est le ticket d'UN trade, le rapport du
 * soir est le ticket de LA JOURNÉE — d'où le même séparateur perforé entre
 * l'en-tête et le corps de la première section (« La journée en bref »),
 * repris une seule fois pour ancrer l'idée sans la répéter sur les six
 * cartes (qui casserait le rythme).
 *
 * Signature de la page : la section 6 (Proposition du jour) est la seule
 * carte à accent — bordure gauche épaisse en --c-signal, fond légèrement
 * teinté. C'est la seule ligne du rapport qui est une décision plutôt
 * qu'une mesure ; elle doit se voir avant qu'on lise le reste. Les règles
 * de garde-fou (section 5) empruntent la jauge horizontale déjà présente
 * ailleurs sur le site sous forme de mètre de conviction (barres) : ici
 * une seule barre continue, verte quand la règle a protégé (P&L évité
 * positif), rouge quand elle a coûté — vocabulaire déjà établi (--c-long /
 * --c-short) plutôt qu'une palette de graphique importée d'ailleurs.
 * -------------------------------------------------------------------- */

.valeur--long { color: var(--c-long); }
.valeur--short { color: var(--c-short); }

.bandeau--rapport {
  gap: 0.5rem 1.25rem;
}

.bandeau__titre {
  font-family: var(--police-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-encre);
  margin-right: auto;
}

.selecteur-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--c-attenue);
}

.selecteur-date select {
  font-family: var(--police-mono);
  font-size: 0.8125rem;
  color: var(--c-encre);
  background: var(--c-surface);
  border: 1px solid var(--c-ligne);
  border-radius: var(--rayon);
  padding: 0.35rem 0.6rem;
  cursor: pointer;
}

.selecteur-date select:disabled {
  color: var(--c-attenue);
  cursor: default;
}

.rapport-pannes {
  margin: 0.75rem 1.25rem 0;
  padding: 0.5rem 0.85rem;
  border-radius: var(--rayon);
  background: var(--c-alerte-teinte);
  border: 1px solid var(--c-alerte);
  color: var(--c-alerte);
  font-size: 0.8125rem;
  font-family: var(--police-mono);
}

.rapport-corps {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 920px;
  margin: 0 auto;
  padding: 1.25rem;
}

.carte-rapport {
  background: var(--c-surface);
  border: 1px solid var(--c-ligne);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  padding: 1rem 1.25rem 1.15rem;
}

.carte-rapport__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.carte-rapport h2 {
  font-family: var(--police-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-attenue);
}

.carte-rapport .separateur-ticket {
  margin: 0.85rem -1.25rem;
}

.carte-rapport__corps {
  margin-top: 0.85rem;
  font-size: 0.875rem;
}

.carte-rapport--indisponible {
  opacity: 0.55;
}

.carte-rapport__raison {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--c-attenue);
}

.carte-rapport__vide {
  font-size: 0.8125rem;
  color: var(--c-attenue);
}

/* -- Section 1 : résumé -------------------------------------------------- */

.resume-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin-bottom: 0.6rem;
}

.resume-fiches {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--c-attenue);
}

.resume-fiches strong {
  color: var(--c-encre);
  font-family: var(--police-mono);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  margin-right: 0.4rem;
}

.resume-fiche-ticker {
  font-family: var(--police-mono);
  font-weight: 700;
  color: var(--c-encre);
}

/* -- Badges d'état (pastille pleine, réutilise le vocabulaire des six
   conditions du panneau de la page graphique) ---------------------------- */

.badge-etat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--police-mono);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.2rem 0.65rem;
}

.badge-etat--ok {
  color: var(--c-long);
  background: var(--c-long-teinte);
  border-color: var(--c-long);
}

.badge-etat--manque {
  color: var(--c-manque);
  background: var(--c-manque-teinte);
  border-color: var(--c-manque);
}

.badge-etat--confirme {
  color: var(--c-long);
  background: var(--c-long-teinte);
  border-color: var(--c-long);
}

.badge-etat--divergent {
  color: var(--c-short);
  background: var(--c-short-teinte);
  border-color: var(--c-short);
}

/* -- Tableaux (rejeu, exécutions) ---------------------------------------- */

.tableau-scroll {
  overflow-x: auto;
}

.tableau-rapport {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--police-mono);
  font-size: 0.8125rem;
}

.tableau-rapport th {
  text-align: left;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-attenue);
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--c-ligne);
  white-space: nowrap;
}

.tableau-rapport td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--c-ligne);
  white-space: nowrap;
}

.tableau-rapport tbody tr:last-child td {
  border-bottom: none;
}

.tableau-rapport .colonne-numerique {
  text-align: right;
}

.tableau-rapport tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--c-ligne);
  font-weight: 700;
  padding-top: 0.55rem;
}

.badge-issue {
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  white-space: nowrap;
}

.badge-issue--cible {
  color: var(--c-long);
  background: var(--c-long-teinte);
}

.badge-issue--stop {
  color: var(--c-short);
  background: var(--c-short-teinte);
}

.badge-issue--cloture {
  color: var(--c-attenue);
  background: var(--c-fond);
  border: 1px solid var(--c-ligne);
}

/* -- Section 3 : croisement ----------------------------------------------- */

.liste-croisement {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ligne-croisement {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.65rem;
  background: var(--c-fond);
  border-radius: var(--rayon);
  font-size: 0.8125rem;
}

.ligne-croisement__ticker {
  font-family: var(--police-mono);
  font-weight: 700;
}

.ligne-croisement__detail {
  color: var(--c-attenue);
  font-family: var(--police-mono);
  font-size: 0.75rem;
}

/* -- Section 4 : exécutions ------------------------------------------------ */

.executions-ouvertes {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--rayon);
  background: var(--c-alerte-teinte);
  color: var(--c-alerte);
  font-size: 0.8125rem;
  font-family: var(--police-mono);
}

/* -- Section 5 : attribution ------------------------------------------------ */

.attribution-regle {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--c-ligne);
}

.attribution-regle:last-child {
  border-bottom: none;
}

.attribution-regle__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--police-mono);
  font-size: 0.8125rem;
  margin-bottom: 0.35rem;
}

.attribution-regle__nom {
  font-weight: 700;
  color: var(--c-encre);
}

.attribution-regle__piste {
  height: 6px;
  border-radius: 3px;
  background: var(--c-ligne);
  overflow: hidden;
}

.attribution-regle__remplissage {
  height: 100%;
  border-radius: 3px;
}

.attribution-regle__remplissage--long { background: var(--c-long); }
.attribution-regle__remplissage--short { background: var(--c-short); }

.attribution-regle__items {
  margin-top: 0.4rem;
  font-family: var(--police-mono);
  font-size: 0.75rem;
  color: var(--c-attenue);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

/* -- Section 6 : stratégies en observation ----------------------------------- */

.tableau-rapport .colonne-cumul {
  font-weight: 700;
}

.badge-cumul {
  display: inline-flex;
  font-family: var(--police-mono);
  font-weight: 700;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  background: var(--c-fond);
  border: 1px solid var(--c-ligne);
  color: var(--c-encre);
}

.badge-cumul.valeur--long {
  background: var(--c-long-teinte);
  border-color: var(--c-long);
}

.badge-cumul.valeur--short {
  background: var(--c-short-teinte);
  border-color: var(--c-short);
}

.strategie-details {
  margin-top: 0.65rem;
  font-size: 0.8125rem;
}

.strategie-details summary {
  cursor: pointer;
  font-family: var(--police-mono);
  font-size: 0.75rem;
  color: var(--c-attenue);
  padding: 0.3rem 0;
}

.strategie-details summary:hover {
  color: var(--c-encre);
}

.strategie-details .tableau-scroll {
  margin-top: 0.4rem;
}

.strategies-observees-pannes {
  margin-top: 0.85rem;
}

/* -- Section 7 : proposition ------------------------------------------------ */

.carte-rapport--proposition {
  border-left: 4px solid var(--c-signal);
  background: linear-gradient(to right, var(--c-signal-teinte), var(--c-surface) 14%);
}

.proposition-texte {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-encre);
  margin-bottom: 0.5rem;
}

.proposition-justification {
  font-size: 0.8125rem;
  color: var(--c-attenue);
  font-style: italic;
}

@media (max-width: 640px) {
  .bandeau--rapport {
    flex-direction: column;
    align-items: flex-start;
  }

  .bandeau__titre {
    margin-right: 0;
  }

  .rapport-corps {
    padding: 1rem;
  }

  .carte-rapport {
    padding: 0.85rem 1rem 1rem;
  }

  .carte-rapport .separateur-ticket {
    margin: 0.75rem -1rem;
  }
}

/* -- Pont d'ordres (Task 4) -----------------------------------------------
 *
 * Extension de la direction établie, pas une nouvelle identité : la même
 * grammaire de boutons (mono, petites capitales, coin arrondi --rayon) que
 * .bouton-resolution ; les mêmes trois couleurs de décision (--c-signal
 * pour l'action principale, --c-short pour ce qui coupe une position,
 * --c-attenue/--c-ligne pour le geste secondaire) plutôt qu'une palette de
 * boutons importée d'ailleurs.
 *
 * Signature : la modale de confirmation est un ticket de plus — même carte
 * à ombre que .fiche-carte, même séparateur pointillé que les en-têtes de
 * la page graphique (entete-catalyseur) — posée sur un fond opaque, seule
 * fenêtre bloquante du cockpit (la pile de signaux, elle, ne bloque
 * jamais). Sur le graphique, les niveaux RÉELS (entrée exécutée, stop
 * actuel, cible) sont tracés en trait plein épais (3px) tandis que les
 * niveaux du PLAN (stop/cible théoriques) repassent en pointillé fin et
 * atténué dès qu'un ordre existe pour le titre — le plan s'efface visuel-
 * lement derrière le réel sans jamais disparaître (comparaison utile).
 * -------------------------------------------------------------------- */

.bouton {
  font-family: var(--police-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--rayon);
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.bouton:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.bouton--principal {
  background: var(--c-signal);
  color: #ffffff;
  border-color: var(--c-signal);
}

.bouton--principal:hover:not(:disabled) {
  background: #0f3f8a;
  border-color: #0f3f8a;
}

.bouton--discret {
  background: var(--c-surface);
  color: var(--c-attenue);
  border-color: var(--c-ligne);
}

.bouton--discret:hover:not(:disabled) {
  color: var(--c-encre);
  border-color: var(--c-attenue);
}

.bouton--danger {
  background: var(--c-short-teinte);
  color: var(--c-short);
  border-color: var(--c-short);
}

.bouton--danger:hover:not(:disabled) {
  background: var(--c-short);
  color: #ffffff;
}

.bouton--confirmation {
  background: var(--c-alerte-teinte);
  color: var(--c-alerte);
  border-color: var(--c-alerte);
}

/* -- Bouton « Placer l'ordre papier » (bannière de signal + en-tête
   graphique) --------------------------------------------------------- */

.bouton--ordre {
  background: var(--c-signal);
  color: #ffffff;
  border-color: var(--c-signal);
  font-size: 0.6875rem;
  padding: 0.3rem 0.65rem;
}

.bouton--ordre:hover:not(:disabled) {
  background: #0f3f8a;
}

.banniere-signal__ordre {
  margin-left: 0.4rem;
}

/* -- Avertissement 15h45 (fermeture forcée à 15h50) -------------------- */

.bandeau-avertissement-ordres {
  margin: 0.5rem 1.25rem 0;
  padding: 0.6rem 0.9rem;
  border-radius: var(--rayon);
  background: var(--c-alerte-teinte);
  border: 1px solid var(--c-alerte);
  color: var(--c-alerte);
  font-size: 0.875rem;
  font-weight: 600;
}

/* -- Modale de confirmation d'ordre ------------------------------------- */

.modale-fond {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(18, 24, 26, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.modale-ordre {
  width: min(440px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--c-surface);
  border-radius: var(--rayon);
  box-shadow: 0 16px 40px rgba(18, 24, 26, 0.3);
  padding: 1.1rem 1.25rem 1.25rem;
  animation: apparition 0.18s ease-out;
}

.modale-ordre__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.modale-ordre__entete h2 {
  font-family: var(--police-mono);
  font-size: 1rem;
  font-weight: 700;
}

.modale-ordre__fermer {
  background: none;
  border: none;
  color: var(--c-attenue);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.15rem;
}

.modale-ordre__fermer:hover {
  color: var(--c-encre);
}

.modale-ordre__sous-titre {
  margin-top: 0.3rem;
  font-family: var(--police-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.modale-ordre__separateur {
  margin: 0.75rem 0;
  border: none;
  border-top: 1px dashed var(--c-ligne);
}

.modale-ordre__statut {
  color: var(--c-attenue);
  font-size: 0.875rem;
}

.modale-ordre__erreur {
  margin-top: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--rayon);
  background: var(--c-short-teinte);
  border: 1px solid var(--c-short);
  color: var(--c-short);
  font-size: 0.8125rem;
}

.modale-ordre__chiffres {
  grid-template-columns: repeat(2, 1fr);
}

.modale-ordre__pied {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

/* -- Section Positions (page liste) ------------------------------------- */

.section-positions {
  margin: 0.75rem 1.25rem 0;
}

.section-positions__titre {
  font-family: var(--police-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-attenue);
  margin-bottom: 0.5rem;
}

.liste-positions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ligne-position {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.85rem;
  padding: 0.6rem 0.85rem;
  background: var(--c-surface);
  border: 1px solid var(--c-ligne);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
}

.ligne-position__ticker {
  font-family: var(--police-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  min-width: 5ch;
}

.ligne-position__pnl {
  font-family: var(--police-mono);
  font-size: 0.875rem;
  font-weight: 700;
}

.ligne-position__pnl--positif { color: var(--c-long); }
.ligne-position__pnl--negatif { color: var(--c-short); }

.ligne-position__actions {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

.ligne-position__erreur {
  flex-basis: 100%;
  font-size: 0.8125rem;
  color: var(--c-short);
}

/* Réutilise .badge-etat (déjà défini pour la page rapport) avec de
   nouveaux modificateurs pour les six états français de l'ordre. */
.badge-etat--attente {
  color: var(--c-signal);
  background: var(--c-signal-teinte);
  border-color: var(--c-signal);
}

.badge-etat--execute {
  color: var(--c-long);
  background: var(--c-long-teinte);
  border-color: var(--c-long);
}

.badge-etat--rejete {
  color: var(--c-short);
  background: var(--c-short-teinte);
  border-color: var(--c-short);
}

.badge-etat--expire,
.badge-etat--annule,
.badge-etat--fermee {
  color: var(--c-attenue);
  background: var(--c-fond);
  border-color: var(--c-ligne);
}

@media (max-width: 640px) {
  .ligne-position__actions {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modale-ordre {
    animation: none !important;
  }
}

/* -- Page de connexion (spec 2026-08-12-infrastructure-aws) --------- */

.page-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
}

.carte-login {
  width: 100%;
  max-width: 320px;
  background: var(--c-surface);
  border: 1px solid var(--c-ligne);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.carte-login__titre {
  font-family: var(--police-mono);
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--c-encre);
}

.carte-login__soustitre {
  font-size: 13px;
  color: var(--c-attenue);
  margin-top: -8px;
}

.carte-login__erreur {
  font-size: 13px;
  color: var(--c-short);
  background: var(--c-short-teinte);
  border: 1px solid var(--c-short);
  border-radius: var(--rayon);
  padding: 8px 10px;
}

.carte-login__label {
  font-family: var(--police-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-attenue);
}

.carte-login__champ {
  font-family: var(--police-corps);
  font-size: 15px;
  color: var(--c-encre);
  background: var(--c-fond);
  border: 1px solid var(--c-ligne);
  border-radius: var(--rayon);
  padding: 10px 12px;
  margin-top: -6px;
}

.carte-login__champ:focus-visible {
  outline: 2px solid var(--c-signal);
  outline-offset: 1px;
}

.carte-login__bouton {
  font-family: var(--police-corps);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: var(--c-signal);
  border: none;
  border-radius: var(--rayon);
  padding: 10px 12px;
  cursor: pointer;
  margin-top: 4px;
}

.carte-login__bouton:hover {
  filter: brightness(1.08);
}

.carte-login__lien {
  font-family: var(--police-mono);
  font-size: 12px;
  color: var(--c-attenue);
  text-decoration: none;
}

.carte-login__lien:hover {
  color: var(--c-signal);
}