/* LE DESK DES TRADERS -- trois onglets (Lionel, 23/09/2026).
   Même ambiance que les autres bureaux : nuit bleue, or, verre dépoli.
   Tout est préfixé par #page-traders : rien ne déborde sur les autres pages. */

#page-traders .desk-onglets {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 26px 12px 104px;
}
#page-traders .desk-onglet {
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 12px;
  font-size: 13px;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(200, 214, 245, 0.7);
  border: 1px solid rgba(200, 214, 245, 0.14);
  transition: all 0.15s;
}
#page-traders .desk-onglet:hover { color: #dfe8ff; border-color: rgba(225, 185, 110, 0.35); }
#page-traders .desk-onglet--actif {
  background: rgba(225, 185, 110, 0.14);
  color: #e1b96e;
  border-color: rgba(225, 185, 110, 0.6);
  font-weight: 600;
}
/* LES CASES DES AGENTS SONT LES BOUTONS (Lionel, 30/09). Un clic sur la case
   ouvre la fenêtre de l'agent ; la case de la fenêtre ouverte est allumée.
   La case Radar ouvre « Mon graphique » (30/09 après-midi). */
#page-traders #postes-traders .poste {
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#page-traders #postes-traders .poste:hover {
  border-color: rgba(225, 185, 110, 0.55);
}
#page-traders[data-onglet-desk="desk"] #postes-traders .poste[data-activite="grego"],
#page-traders[data-onglet-desk="money"] #postes-traders .poste[data-activite="money"],
#page-traders[data-onglet-desk="arthur"] #postes-traders .poste[data-activite="arthur"],
#page-traders[data-onglet-desk="midas"] #postes-traders .poste[data-activite="midas"],
#page-traders[data-onglet-desk="turbo"] #postes-traders .poste[data-activite="turbo"],
#page-traders[data-onglet-desk="graphique"] #postes-traders .poste[data-activite="radar"] {
  border-color: rgba(225, 185, 110, 0.95);
  box-shadow: 0 0 0 1px rgba(225, 185, 110, 0.55), 0 0 18px rgba(225, 185, 110, 0.22);
}
#page-traders .desk-onglets__note {
  margin-left: auto;
  font-size: 11px;
  color: rgba(200, 214, 245, 0.45);
}

/* Les quatre du desk tiennent sur UNE rangee : leur role en une ligne. */
#page-traders .bureau__postes { flex-wrap: nowrap; overflow-x: auto; }
#page-traders .poste { flex: 1 1 0; min-width: 0; }
#page-traders .poste__role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 25/09 : sans cette ligne, le bloc du nom refusait de retrecir et le role
   debordait sur la case voisine (« … il active ou retire » par-dessus Money)
   au lieu de finir par « … ». */
#page-traders .poste > div:last-child { min-width: 0; }

#page-traders .desk-panneau { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#page-traders .desk-panneau[hidden] { display: none; }

/* ---------- Onglet 1 : le bandeau des marchés ---------- */
#page-traders .desk-bandeau {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 26px 12px 26px;
}
#page-traders .desk-tuile {
  flex: 1 1 110px;
  min-width: 104px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  cursor: pointer;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(12, 16, 32, 0.7);
  border: 1px solid rgba(225, 185, 110, 0.14);
  color: #dfe8ff;
  font: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
#page-traders .desk-tuile:hover { border-color: rgba(225, 185, 110, 0.5); transform: translateY(-1px); }
#page-traders .desk-tuile--commun { border-color: rgba(185, 140, 255, 0.45); }
#page-traders .desk-tuile--vide { cursor: default; opacity: 0.6; }
#page-traders .desk-tuile__nom { font-size: 11px; letter-spacing: 0.08em; color: rgba(225, 185, 110, 0.9); }
#page-traders .desk-tuile__nom em {
  font-style: normal; margin-left: 6px; padding: 0 5px; border-radius: 6px; font-size: 9px;
  background: rgba(185, 140, 255, 0.2); color: #cdb2ff; letter-spacing: 0.04em;
}
#page-traders .desk-tuile__prix { font-size: 16px; font-weight: 600; }
#page-traders .desk-tuile__prix small { font-size: 10px; font-weight: 400; color: rgba(200, 214, 245, 0.5); }
#page-traders .desk-tuile__var { font-size: 12px; }
#page-traders .desk-tuile__note { font-size: 10px; color: rgba(200, 214, 245, 0.45); }
#page-traders .desk-bandeau__pied { width: 100%; font-size: 10.5px; color: rgba(200, 214, 245, 0.45); }

/* Les stratégies de Radar */
#page-traders .desk-strat {
  border: 1px solid rgba(200, 214, 245, 0.1);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.02);
}
#page-traders .desk-strat summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#page-traders .desk-strat__qui { font-size: 11px; color: rgba(200, 214, 245, 0.55); }
#page-traders .desk-strat__regles { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 10px 0 4px; }
#page-traders .desk-strat__regles dt { font-size: 12px; color: rgba(225, 185, 110, 0.9); }
#page-traders .desk-strat__regles dd { margin: 0; font-size: 13.5px; line-height: 1.45; color: #dfe8ff; }
#page-traders .desk-strat__cle { font-size: 10px; color: rgba(200, 214, 245, 0.35); text-align: right; }
#page-traders .desk-jury { margin: 4px 0 0; padding-left: 16px; }
#page-traders .desk-jury li { margin: 3px 0; font-size: 12px; line-height: 1.4; }
#page-traders .desk-jury em { color: rgba(225, 185, 110, 0.8); font-style: normal; font-size: 11.5px; }
#page-traders .desk-etat { font-size: 11px; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.03em; }
#page-traders .desk-etat--ok { background: rgba(61, 220, 151, 0.18); color: #3ddc97; }
#page-traders .desk-etat--attention { background: rgba(255, 201, 138, 0.18); color: #ffc98a; }
#page-traders .desk-etat--essai { background: rgba(127, 220, 255, 0.15); color: #7fdcff; }
#page-traders .desk-etat--eteint { background: rgba(200, 214, 245, 0.08); color: rgba(200, 214, 245, 0.5); }

/* Le portefeuille */
#page-traders .desk-total {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 4px 0 10px; border-bottom: 1px solid rgba(200, 214, 245, 0.08); margin-bottom: 6px;
}
#page-traders .desk-total strong { font-size: 20px; color: #fff; }
#page-traders .desk-total span:first-child { font-size: 11px; color: rgba(225, 185, 110, 0.85); }
#page-traders .desk-note { font-style: normal; font-size: 10px; color: rgba(255, 201, 138, 0.8); }
#page-traders .desk-etat--rouge { background: rgba(255, 122, 138, 0.16); color: #ff8a98; }
#page-traders .desk-pf-groupe {
  margin: 10px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(225, 185, 110, 0.9);
}
#page-traders .desk-pf {
  border-bottom: 1px solid rgba(200, 214, 245, 0.07);
  padding: 6px 2px;
}
#page-traders .desk-pf summary {
  cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px;
}
#page-traders .desk-pf__nom { flex: 1 1 150px; color: #dfe8ff; }
#page-traders .desk-pf__val { font-variant-numeric: tabular-nums; color: rgba(223, 232, 255, 0.85); }
/* 28/09 : UN PEU PLUS GROS (Lionel : « ça force un peu mes yeux ») -- pas gros, juste plus lisible. */
#page-traders .desk-pf-note { font-size: 13px; line-height: 1.45; color: rgba(214, 226, 250, 0.8); margin: 6px 0; }
#page-traders .desk-pf-clair { color: #eef3ff; }
#page-traders .desk-pf-lexique { margin-top: 12px; padding: 8px 10px; border-radius: 8px;
  background: rgba(225, 185, 110, 0.06); border: 1px solid rgba(225, 185, 110, 0.18); }
#page-traders .desk-pf-lexique strong { color: #e1b96e; font-weight: 600; }
/* LE SIGNAL CLAIR (25/09) : les reperes coches par le code, une ligne chacun. */
#page-traders .desk-conds { list-style: none; margin: 4px 0 0; padding: 0; }
#page-traders .desk-cond { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 3px 0; border-bottom: 1px solid rgba(160, 190, 255, 0.07); }
#page-traders .desk-cond__marque { flex: 0 0 14px; font-weight: 700; text-align: center; }
#page-traders .desk-cond--ok .desk-cond__marque { color: #5fd08a; }
#page-traders .desk-cond--non .desk-cond__marque { color: #e07a6a; }
#page-traders .desk-cond--inconnu .desk-cond__marque { color: rgba(200, 214, 245, 0.45); }
#page-traders .desk-cond__nom { flex: 1 1 140px; color: #dfe8ff; }
#page-traders .desk-cond__val { font-variant-numeric: tabular-nums; color: rgba(223, 232, 255, 0.85); }
#page-traders .desk-cond__regle { flex: 1 1 100%; padding-left: 22px; font-size: 12px; color: rgba(200, 214, 245, 0.65); }
#page-traders .desk-cond__total { font-size: 12.5px; color: rgba(200, 214, 245, 0.8); }
#page-traders .desk-cond__resume { font-size: 12.5px; color: rgba(200, 214, 245, 0.75); font-variant-numeric: tabular-nums; white-space: nowrap; }
#page-traders .desk-pf-rappel { font-size: 11.5px; color: rgba(200, 214, 245, 0.55); margin-top: 10px; font-style: italic; }

/* ---------- Onglet 2 : le grand graphique ---------- */
#page-traders .desk-barre {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 0 26px 10px 26px;
  font-size: 12px;
  color: rgba(200, 214, 245, 0.75);
}
#page-traders .desk-choix select {
  margin-left: 6px;
  background: #0d1320;
  color: #dfe8ff;
  border: 1px solid rgba(225, 185, 110, 0.35);
  border-radius: 8px;
  padding: 5px 8px;
  font: inherit;
}
#page-traders .desk-unites, #page-traders .desk-vues { display: inline-flex; gap: 4px; }
#page-traders .desk-bouton {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(120, 160, 255, 0.2);
  color: rgba(220, 228, 248, 0.8);
  border-radius: 8px;
  font-size: 11.5px;
  padding: 5px 10px;
}
#page-traders .desk-bouton--actif { color: #e1b96e; border-color: rgba(225, 185, 110, 0.6); background: rgba(225, 185, 110, 0.12); }
#page-traders .desk-calques { display: inline-flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
#page-traders .desk-calques label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
#page-traders .desk-calques i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; }
#page-traders .desk-calques--eteint { opacity: 0.35; pointer-events: none; }

#page-traders .desk-graphique {
  position: relative;
  flex: 0 0 auto;
  height: 52vh;
  margin: 0 26px 12px 26px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(225, 185, 110, 0.18);
  background: #0b1120;
}
#page-traders .desk-chart { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#page-traders .desk-chart[hidden] { display: none; }
#page-traders .desk-chart__etat {
  position: absolute; left: 12px; top: 10px; right: 12px;
  font-size: 12.5px; color: #ffc98a; pointer-events: none; z-index: 3;
}
#page-traders .desk-chart__etat--discret { color: rgba(200, 214, 245, 0.45); font-size: 10.5px; top: 6px; }

#page-traders .desk-sous-graphique {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 14px;
  padding: 0 26px 22px 26px;
  overflow-y: auto;
}
#page-traders .desk-explications { flex: 1.5 1 0; min-width: 0; }
#page-traders .desk-entrees { flex: 1 1 0; min-width: 0; }
#page-traders .desk-h3 {
  font-family: Georgia, "Palatino Linotype", serif;
  font-weight: normal; font-size: 15px; color: #e1b96e; margin: 4px 0 10px;
}
#page-traders .desk-h4 { font-size: 11.5px; letter-spacing: 0.04em; color: rgba(225, 185, 110, 0.85); margin: 14px 0 6px; font-weight: 600; }
#page-traders .desk-cartes-texte { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
#page-traders .desk-texte {
  padding: 10px 13px; border-radius: 12px;
  background: rgba(12, 16, 32, 0.7); border: 1px solid rgba(200, 214, 245, 0.1);
}
#page-traders .desk-texte h4 { margin: 0 0 5px; font-size: 12.5px; color: #dfe8ff; }
#page-traders .desk-texte p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(220, 228, 248, 0.86); }
#page-traders .desk-position {
  padding: 10px 12px; border-radius: 12px; margin-bottom: 8px;
  background: rgba(12, 16, 32, 0.7); border: 1px solid rgba(185, 140, 255, 0.25);
  font-size: 13px; color: #dfe8ff;
}
#page-traders .desk-position ul { margin: 6px 0; padding-left: 18px; line-height: 1.6; }
#page-traders .desk-these { font-size: 11.5px; color: rgba(200, 214, 245, 0.6); }

/* ---------- Onglet 3 : les deux traders côte à côte ---------- */
#page-traders .desk-duo {
  flex: 1 1 auto; min-height: 0; display: flex; gap: 14px; padding: 0 26px 22px 26px;
}
#page-traders .desk-trader {
  flex: 1 1 0; min-width: 0; overflow-y: auto;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(12, 16, 32, 0.7); backdrop-filter: blur(12px);
  border: 1px solid rgba(225, 185, 110, 0.16);
}
#page-traders .desk-trader__tete { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
#page-traders .desk-trader__tete strong {
  font-family: Georgia, "Palatino Linotype", serif; font-weight: normal; font-size: 22px; color: #e1b96e;
}
#page-traders .desk-trader__tete span { font-size: 11.5px; color: rgba(200, 214, 245, 0.55); }
#page-traders .desk-avis {
  font-size: 12px; color: #ffc98a; padding: 7px 10px; border-radius: 10px; margin-bottom: 10px;
  background: rgba(255, 201, 138, 0.08); border: 1px solid rgba(255, 201, 138, 0.25);
}
#page-traders .desk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#page-traders .desk-stat {
  display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(200, 214, 245, 0.08);
}
#page-traders .desk-stat__val { font-size: 16px; font-weight: 600; color: #fff; }
#page-traders .desk-stat__nom { font-size: 11px; color: rgba(225, 185, 110, 0.85); }
#page-traders .desk-stat__aide { font-size: 10px; color: rgba(200, 214, 245, 0.45); line-height: 1.3; }

/* ---------- Le téléphone ---------- */
@media (max-width: 760px) {
  html #page-traders .desk-onglets {
    padding: 0 12px 10px; position: sticky; top: 0; z-index: 5;
    background: linear-gradient(#030a1c 70%, rgba(3, 10, 28, 0));
  }
  html #page-traders .desk-onglet { flex: 1 1 0; padding: 10px 6px; font-size: 12px; text-align: center; }
  html #page-traders .desk-onglets__note { display: none; }
  /* plus aucun bouton (30/09) : la rangee vide ne laisse pas une bande sombre */
  html #page-traders .desk-onglets--vide { display: none; }
  html #page-traders .desk-bandeau { padding: 0 12px 10px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html #page-traders .desk-tuile { flex: 0 0 118px; }
  html #page-traders .desk-barre { padding: 0 12px 8px; }
  html #page-traders .desk-calques { margin-left: 0; }
  html #page-traders .desk-graphique { height: 46vh; margin: 0 8px 10px; }
  html #page-traders .desk-sous-graphique { flex-direction: column; padding: 0 12px 16px; overflow: visible; }
  html #page-traders .desk-cartes-texte { grid-template-columns: 1fr; }
  html #page-traders .desk-duo { flex-direction: column; padding: 0 12px 16px; }
  html #page-traders .desk-trader { overflow: visible; }
  html #page-traders .desk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html #page-traders .desk-strat__regles { grid-template-columns: 1fr; }
}

/* 24/09 : les mises en garde ecrites par le code (surchauffe, lignes qui bougent ensemble) */
.desk-pf-attention { color: #e0a83a; }

/* TELEPHONE (Lionel, 25/09) : « les barres de chaque nom sont trop petites,
   il faudrait les faire un peu plus longues ». Quatre cases sur une rangee
   de 390 px, c'etait 80 px chacune. Sur le telephone : deux rangees de
   deux, chaque case prend la moitie de la largeur. L'ordinateur ne change pas. */
@media (max-width: 640px) {
  #page-traders .bureau__postes { flex-wrap: wrap; overflow-x: visible; gap: 8px; }
  #page-traders .poste { flex: 1 1 calc(50% - 4px); min-width: 0; box-sizing: border-box; }
}

/* ── LE DESK SUR TÉLÉPHONE, ET SEULEMENT LE TÉLÉPHONE (Lionel, 27/09/2026) ──
   Il l'a dit clairement : « je parle de sur mon téléphone, pas du laptop ».
   L'écran d'ordinateur est parfait — on n'y touche pas. TOUT ce bloc est
   enfermé dans @media (max-width: 640px), donc rien ne bouge au-dessus.

   Sur son téléphone : les fenêtres sont trop grandes pour ce qu'elles disent,
   et « Parler à Grégo » (avec son bouton Envoyer) est mangée par le bas de
   l'écran, même en défilant à fond. */
@media (max-width: 640px) {
  /* LA VRAIE CAUSE de la carte coupée : #page-traders fait height:100vh, et
     l'appli est en box-sizing content-box par défaut — donc son padding-bas
     s'AJOUTE aux 100vh et tombe SOUS l'écran, emportant la dernière carte avec
     lui. On passe ce conteneur en border-box : les 100vh INCLUENT le padding,
     qui devient de l'air À L'INTÉRIEUR du défilement. Assez pour dégager
     « Parler à Grégo » et le bouton or du chat qui flotte en bas. */
  html #page-traders.page--active { box-sizing: border-box; padding-bottom: 96px; }

  /* Les cartes suivent leur contenu (finies les cartes à moitié vides), la
     page défile d'un seul geste (pas de défilement imbriqué). */
  html #page-traders .bureau-carte { max-height: none; }
  html #page-traders .bureau-carte__corps { max-height: none !important; }
  html #page-traders .console { max-height: 40vh !important; }  /* la console peut être longue : on la borne, elle seule */
  html #page-traders .directe__fil { min-height: 60px; }

  /* Les tuiles des marchés, compactes : trop grandes pour un simple prix.
     « à blanc » est déjà dit dans la barre d'onglets — inutile sur chacune. */
  html #page-traders .desk-tuile { padding: 6px 10px; gap: 1px; }
  html #page-traders .desk-tuile__nom { font-size: 10px; letter-spacing: 0.05em; }
  html #page-traders .desk-tuile__prix { font-size: 14px; }
  html #page-traders .desk-tuile__var { font-size: 11px; }
  html #page-traders .desk-tuile__note { display: none; }
  /* 28/09 : la phrase du pied, prise dans la rangée qui défile de côté,
     étirait toutes les tuiles à sa hauteur (190 px pour un prix). */
  html #page-traders .desk-bandeau { align-items: flex-start; }
  html #page-traders .desk-bandeau__pied { flex: 0 0 240px; align-self: center; }
}

/* ── LE DESK SUR ORDINATEUR (Lionel, 27/09/2026, après le téléphone) ─────
   « sur le laptop aussi ça déborde » : sur un portable courant (1366 x 768,
   ou un écran avec le zoom Windows), le bouton Envoyer de « Parler à Grégo »
   tombait sous le bas de l'écran. Ce bloc ne vaut QUE quand les deux colonnes
   sont côte à côte (au-dessus de 1080 px, voir bureaux.css) ; le téléphone et
   les fenêtres étroites ne changent pas.
   L'idée : la colonne de droite REMPLIT l'écran sans déborder. « Mon
   portefeuille » prend la place qui reste et défile en lui-même ; « Session »
   et « Parler à Grégo » gardent leur taille et restent TOUJOURS visibles. */
@media (min-width: 1081px) {
  /* Les tuiles des marchés, compactes : de la place gagnée en hauteur. */
  #page-traders .desk-bandeau { padding: 0 26px 8px 26px; gap: 6px; }
  #page-traders .desk-tuile { padding: 5px 10px 6px; gap: 1px; }
  #page-traders .desk-tuile__nom { font-size: 10px; letter-spacing: 0.06em; }
  #page-traders .desk-tuile__prix { font-size: 14px; }
  #page-traders .desk-tuile__var { font-size: 11px; }
  #page-traders .desk-tuile__note { display: none; }

  /* Colonne de gauche : des hauteurs plus sobres (elles sont écrites sur
     l'élément par le JS, d'où le !important -- seul moyen de les défaire). */
  #page-traders #desk-strategies { max-height: 26vh !important; }
  #page-traders #traders-activite { max-height: 14vh !important; }
  #page-traders #traders-console { max-height: 14vh !important; }
  /* Si l'écran est petit, ces cartes RÉTRÉCISSENT (leur contenu défile en
     elles-mêmes) au lieu de pousser la dernière sous le bord. */
  #page-traders .bureau__col--large > .bureau-carte:not(.bureau-carte--plein) { flex: 0 1 auto; min-height: 84px; }
  #page-traders .bureau__col--large > .bureau-carte--plein { min-height: 84px; }

  /* Colonne de droite : l'ancre (portefeuille) prend le reste, Grégo reste visible. */
  #page-traders #traders-session { max-height: 16vh !important; }
  #page-traders .bureau__col--etroite { overflow: hidden; }
  #page-traders .bureau__col--etroite > .bureau-carte { flex: 0 0 auto; }
  #page-traders .bureau__col--etroite > .bureau-carte:first-child { flex: 1 1 auto; min-height: 130px; }
  #page-traders .bureau__col--etroite > .bureau-carte:first-child .bureau-carte__corps { max-height: none !important; }
  #page-traders .bureau__col--etroite > .bureau-carte:last-child { min-height: 150px; }
}

/* ── UN ONGLET PAR TRADER (Lionel, 28/09) ─────────────────────────────────
   En haut : son portefeuille de 500 € de la semaine, et le graphique de SON
   marché (entrées ▲ / sorties ▼, stop et objectif de ses positions).
   En dessous : ses chiffres, ses stratégies, ses positions, ses trades. */
#page-traders .desk-trader-page { display: flex; flex-direction: column; gap: 14px; padding: 0 26px 22px 26px; min-height: 0; }
#page-traders .desk-trader-haut { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 14px; }
#page-traders .desk-wallet, #page-traders .desk-mini {
  padding: 14px 16px; border-radius: 14px; background: rgba(12, 16, 32, 0.7);
  backdrop-filter: blur(12px); border: 1px solid rgba(225, 185, 110, 0.16);
}
#page-traders .desk-wallet__titre { font-size: 12.5px; color: rgba(225, 185, 110, 0.9); margin-bottom: 6px; }
#page-traders .desk-wallet__solde { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
#page-traders .desk-wallet__solde strong { font-size: 30px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
#page-traders .desk-wallet__solde span { font-size: 14px; }
#page-traders .desk-wallet__jauge { position: relative; height: 8px; margin: 10px 0 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); }
#page-traders .desk-wallet__jauge i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px;
  background: linear-gradient(90deg, #e1b96e, #3ddc97); transition: width .6s ease; }
#page-traders .desk-wallet__jauge em { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: rgba(255, 255, 255, 0.5); }
#page-traders .desk-wallet__latent { font-size: 13px; color: #ffc98a; margin: 6px 0; }
#page-traders .desk-wallet__chemin { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; margin-top: 6px; color: rgba(214, 226, 250, 0.8); }
#page-traders .desk-wallet__note { font-size: 11.5px; color: rgba(200, 214, 245, 0.5); margin-top: 8px; font-style: italic; }
#page-traders .desk-mini__tete { font-size: 12.5px; color: rgba(225, 185, 110, 0.9); margin-bottom: 6px; }
#page-traders .desk-mini__chart { height: 280px; border-radius: 10px; overflow: hidden; }
#page-traders .desk-mini__etat { font-size: 11px; color: rgba(200, 214, 245, 0.45); margin-top: 4px; }
#page-traders .desk-trader-page .desk-trader { flex: 0 0 auto; overflow: visible; }

/* ── LE COURS DE TRADING (Lionel, 28/09) : une leçon à la fois ─────────── */
#page-traders .cours-lecon { border-bottom: 1px solid rgba(200, 214, 245, 0.08); padding: 7px 2px; }
#page-traders .cours-lecon summary { cursor: pointer; font-size: 14px; color: #dfe8ff; list-style: none; }
#page-traders .cours-lecon summary::before { content: "▸ "; color: #e1b96e; }
#page-traders .cours-lecon[open] summary::before { content: "▾ "; }
#page-traders .cours-corps { padding: 8px 4px 4px; }
#page-traders .cours-corps p { font-size: 14px; line-height: 1.55; color: rgba(223, 232, 255, 0.92); margin: 8px 0; }
#page-traders .cours-exemple { color: #ffe3a8 !important; }
#page-traders .cours-note { font-size: 11.5px; font-style: italic; color: rgba(200, 214, 245, 0.5); margin-top: 10px; }
#page-traders .cours-svg { width: 100%; max-width: 330px; height: auto; display: block; margin: 0 auto;
  background: #0b1120; border-radius: 10px; }
#page-traders .cours-legende { font-size: 8px; fill: rgba(223, 232, 255, 0.75); }
#page-traders .cours-trace { fill: none; stroke: #7fdcff; stroke-width: 2.5; stroke-dasharray: 400; stroke-dashoffset: 400;
  animation: coursTrace 2.6s ease forwards; }
#page-traders .cours-trace--lent { stroke-width: 3; animation-duration: 3.4s; }
#page-traders .cours-trace--2 { stroke: #b98cff; animation-delay: .3s; }
#page-traders .cours-pop { opacity: 0; animation: coursPop .4s ease forwards; }
#page-traders .cours-pop--1 { animation-delay: .9s; }
#page-traders .cours-pop--2 { animation-delay: 2.2s; }
#page-traders .cours-grandit { transform-origin: 110px 82px; animation: coursGrandit 1.6s ease both; }
#page-traders .cours-balle { animation: coursBalle 3.2s ease-in-out infinite; }
#page-traders .cours-aiguille { transform-origin: 110px 80px; animation: coursAiguille 2.8s ease-in-out infinite alternate; }
@keyframes coursTrace { to { stroke-dashoffset: 0; } }
@keyframes coursPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes coursGrandit { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes coursBalle { 0% { transform: translate(20px, 50px); } 45% { transform: translate(200px, 20px); }
  55% { transform: translate(200px, 20px); } 100% { transform: translate(20px, 50px); } }
@keyframes coursAiguille { from { transform: rotate(-60deg); } to { transform: rotate(52deg); } }
@media (prefers-reduced-motion: reduce) {
  #page-traders .cours-trace, #page-traders .cours-pop, #page-traders .cours-grandit,
  #page-traders .cours-balle, #page-traders .cours-aiguille { animation: none; stroke-dashoffset: 0; opacity: 1; }
}
@media (max-width: 760px) {
  html #page-traders .desk-trader-page { padding: 0 12px 16px; }
  html #page-traders .desk-trader-haut { grid-template-columns: 1fr; }
  html #page-traders .desk-mini__chart { height: 220px; }
  html #page-traders .desk-onglet { font-size: 11.5px; padding: 9px 4px; }
}

/* ── LA PAGE DES TRADERS, COMME LA PAGE MÉDIA (Lionel, 08/10/2026) ─────────
   Maquette validée : maquette_page_traders.html. Plus de Grégo. La 1re page
   est « Mon portfolio » ; les traders et Radar sont EN BAS, chacun ouvre sa
   fenêtre pleine page. Les cases des agents en haut sont retirées (doublon). */
#page-traders #postes-traders { display: none !important; }
#page-traders .desk-panneau { overflow-y: auto; }
#page-traders .dk-pf {
  display: grid; gap: 12px; padding: 0 26px 16px 26px;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "a b b" "c d e";
}
#page-traders .dk-pf__a { grid-area: a; min-width: 0; }
#page-traders .dk-pf__b { grid-area: b; min-width: 0; }
#page-traders .dk-pf__c { grid-area: c; min-width: 0; }
#page-traders .dk-pf__d { grid-area: d; min-width: 0; }
#page-traders .dk-pf__e { grid-area: e; min-width: 0; }
#page-traders .dk-pf .bureau-carte { height: 100%; box-sizing: border-box; }
#page-traders .dk-tab { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center;
  padding: 6px 2px; font-size: 12.5px; white-space: nowrap; border-bottom: 1px solid rgba(160, 190, 255, 0.07); font-variant-numeric: tabular-nums; }
#page-traders .dk-tab--tete { font-size: 10px; letter-spacing: 0.08em; color: rgba(200, 214, 245, 0.45); }
#page-traders .dk-tab__nom { color: #dfe8ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-traders .dk-consigne { flex: 1 1 100%; font-size: 12.5px; line-height: 1.4; color: #ffe3a8; }
#page-traders .dk-aj { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 10px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid rgba(160, 190, 255, 0.07); font-size: 13px; }
#page-traders .dk-typ { font-size: 10px; letter-spacing: 0.06em; color: rgba(200, 214, 245, 0.5); }
#page-traders .dk-hz { font-size: 10px; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 8px; white-space: nowrap; }
#page-traders .dk-hz--long { background: rgba(127, 220, 255, 0.14); color: #7fdcff; }
#page-traders .dk-hz--court { background: rgba(225, 185, 110, 0.16); color: #e1b96e; }
#page-traders .dk-cons { font-size: 12px; color: #5fd08a; margin-bottom: 6px; }
#page-traders .dk-mk { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
#page-traders .dk-m { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 10px; cursor: pointer;
  font: inherit; text-align: left; color: #dfe8ff; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(225, 185, 110, 0.16); }
#page-traders .dk-m:hover { border-color: rgba(225, 185, 110, 0.55); }
#page-traders .dk-m__n { font-size: 10px; letter-spacing: 0.06em; color: rgba(225, 185, 110, 0.9); }
#page-traders .dk-m b { font-size: 13px; }
#page-traders .dk-m small { font-size: 10px; color: rgba(200, 214, 245, 0.5); }

/* La fenêtre d'un trader : en-tête, son wallet, son graphique en large, puis trois cartes. */
#page-traders .dk-tr { display: grid; gap: 12px; grid-template-columns: minmax(250px, 1fr) minmax(0, 3fr);
  grid-template-areas: "t t" "w g" "x x"; padding: 0 26px 16px 26px; }
#page-traders .dk-tr__tete { grid-area: t; display: flex; align-items: baseline; gap: 12px; }
#page-traders .dk-tr__tete strong { font: italic 700 22px Georgia, "Palatino Linotype", serif; color: #f2dcab; }
#page-traders .dk-tr__tete span { font-size: 11.5px; letter-spacing: 0.06em; color: rgba(200, 214, 245, 0.55); }
#page-traders .dk-tr__tete--radar { padding: 0 26px 10px 26px; }
#page-traders .dk-wallet { grid-area: w; min-width: 0; }
#page-traders .dk-graph { grid-area: g; min-width: 0; }
#page-traders .dk-graph .desk-mini__chart { height: 340px; }
#page-traders .dk-trio { grid-area: x; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
#page-traders .dk-or { border-color: rgba(225, 185, 110, 0.55) !important; }
#page-traders .dk-pos { padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; font-size: 13px; cursor: pointer;
  background: rgba(225, 185, 110, 0.09); border: 1px solid rgba(225, 185, 110, 0.45); color: #f5e6c4; }
#page-traders .dk-pos__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 3px; }
#page-traders .dk-etat { font-size: 10px; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 6px; background: #e1b96e; color: #1a1408; font-weight: 700; }
#page-traders .dk-hist { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
#page-traders .dk-radar-bas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; padding: 0 26px 16px 26px; }
#page-traders .desk-panneau[data-panneau="graphique"] .desk-sous-graphique { flex: 0 0 auto; overflow: visible; }

/* L'onglet de Radar (08/10) : son bilan, ses conseils verifies, ses deux paniers, ses erreurs. */
#page-traders .dk-rad { padding: 0 26px 14px 26px; display: flex; flex-direction: column; gap: 12px; }
#page-traders .dk-rad__bilan { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
#page-traders .dk-rad__t { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 12px; flex: 1 1 150px;
  background: rgba(12, 16, 32, 0.7); border: 1px solid rgba(225, 185, 110, 0.16); font-size: 11px; color: rgba(200, 214, 245, 0.6); }
#page-traders .dk-rad__t b { font-size: 17px; color: #fff; }
#page-traders .dk-rad__t b.dk-or-t { color: #e1b96e; }
#page-traders .dk-rad__regle { flex: 1 1 100%; font-size: 11.5px; color: rgba(200, 214, 245, 0.55); font-style: italic; }
#page-traders .dk-rad__grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: start; }
#page-traders .dk-rad__droite { display: grid; gap: 12px; min-width: 0; }
#page-traders .dk-rc { display: grid; grid-template-columns: 52px minmax(0, 1.6fr) minmax(0, 1.1fr) 84px minmax(0, 0.9fr); gap: 8px;
  padding: 7px 0; font-size: 12.5px; border-bottom: 1px solid rgba(160, 190, 255, 0.07); align-items: start; }
#page-traders .dk-rc--tete { font-size: 10px; letter-spacing: 0.08em; color: rgba(200, 214, 245, 0.45); }
#page-traders .dk-rc small { color: rgba(200, 214, 245, 0.55); }
#page-traders .dk-rc__preuve { font-size: 11px; color: rgba(200, 214, 245, 0.6); overflow-wrap: anywhere; }
#page-traders .dk-encours { color: #e1b96e; }
#page-traders .dk-vert { border-color: rgba(79, 208, 138, 0.35) !important; }
#page-traders .dk-rouge { border-color: rgba(255, 125, 110, 0.35) !important; }
#page-traders .dk-panier { padding: 7px 0; border-bottom: 1px solid rgba(160, 190, 255, 0.07); font-size: 12.5px; line-height: 1.45; }

/* La barre du bas : ta page, les 4 traders, Radar (comme les gens de la page Média). */
#page-traders .dk-gens { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 26px 14px 26px; overflow-x: auto;
  border-top: 1px solid rgba(225, 185, 110, 0.14); background: rgba(3, 10, 28, 0.85); }
#page-traders .dk-gen { display: inline-flex; align-items: center; gap: 9px; flex: 1 1 0; min-width: 120px; text-align: left; font: inherit; padding: 8px 12px; }
#page-traders .dk-gen i { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-size: 12px; font-weight: 700; background: rgba(225, 185, 110, 0.16); color: #e1b96e; }
#page-traders .dk-gen span { display: flex; flex-direction: column; min-width: 0; }
#page-traders .dk-gen b { font-size: 13px; color: #dfe8ff; }
#page-traders .dk-gen small { font-size: 10.5px; color: rgba(200, 214, 245, 0.5); }
#page-traders .dk-gen__chiffre { margin-left: auto; font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; }

@media (max-width: 1080px) {
  #page-traders .dk-pf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "c d" "e e"; }
  #page-traders .dk-trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  html #page-traders .dk-pf { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e"; padding: 0 12px 16px; }
  html #page-traders .dk-tr { grid-template-columns: 1fr; grid-template-areas: "t" "w" "g" "x"; padding: 0 12px 16px; }
  html #page-traders .dk-trio, html #page-traders .dk-radar-bas { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; }
  html #page-traders .dk-radar-bas { padding: 0 12px 16px; }
  html #page-traders .dk-graph .desk-mini__chart { height: 240px; }
  html #page-traders .desk-panneau { overflow: visible; }
  /* Sur le telephone, la barre passe EN HAUT, sous le titre (la page defile d'un seul geste ; en bas elle
     cachait le contenu et le bouton du chat). */
  html #page-traders .desk-panneau { order: 1; }
  html #page-traders .dk-gens { order: 0; padding: 0 12px 10px; gap: 6px; border-top: 0; background: none; }
  html #page-traders .dk-gen { flex: 0 0 auto; min-width: 74px; padding: 6px 10px; flex-direction: column; align-items: flex-start; gap: 0; }
  html #page-traders .dk-gen i, html #page-traders .dk-gen small { display: none; }
  html #page-traders .dk-gen__chiffre { margin-left: 0; font-size: 11px; }
  html #page-traders .dk-aj { grid-template-columns: 1fr; }
  html #page-traders .dk-rad { padding: 0 12px 12px; }
  html #page-traders .dk-rad__grille { grid-template-columns: 1fr; }
  html #page-traders .dk-rc { grid-template-columns: 1fr; gap: 2px; }
  html #page-traders .dk-rc--tete { display: none; }
}

/* ── MAQUETTE VALIDÉE PAR LIONEL LE 08/10 (« oui ») ───────────────────────────
   Mon portfolio : le portefeuille prend juste la hauteur de ses lignes, et le cours de trading se met DESSOUS.
   Radar : le graphique (marchés, barre, bougies) se met DANS LE TROU sous « Ses conseils vérifiés » ; la longue
   liste reste à droite ; tout ce qui était dessous remonte. Le cours n'est plus en bas de l'onglet Radar. */
#page-traders .dk-pf__a { display: flex; flex-direction: column; gap: 12px; }
#page-traders .dk-pf .dk-pf__a .bureau-carte { height: auto; }
#page-traders .dk-pf__a #desk-cours { max-height: 300px !important; overflow-y: auto; }   /* les leçons défilent dans la fenêtre */
#page-traders .dk-rad__gauche { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#page-traders .dk-rad__graph { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px;
  border-radius: 14px; border: 1px solid rgba(225, 185, 110, 0.18); background: rgba(8, 12, 26, 0.6); }
#page-traders .dk-rad__graph .desk-bandeau, #page-traders .dk-rad__graph .desk-barre { padding: 0 0 6px 0; }
#page-traders .dk-rad__graph .desk-graphique { height: 360px; margin: 0; }
#page-traders .dk-radar-bas { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
  html #page-traders .dk-rad__graph { padding: 8px; }
  html #page-traders .dk-rad__graph .desk-graphique { height: 46vh; margin: 0; }
  html #page-traders .dk-rad__graph .desk-bandeau, html #page-traders .dk-rad__graph .desk-barre { padding: 0 0 6px 0; }
}

/* LA BULLE « PARLER A GREGO » (Lionel, 09/10 : « sur le desk, c'est Grego »). Fermee, elle se pose AU-DESSUS de la
   barre des traders (sinon elle cachait l'onglet Radar, vu a 1366x768) ; ouverte, la fenetre reprend sa place
   normale, par-dessus la barre. Au telephone (<= 760 px) la barre est en haut : rien a changer. */
@media (min-width: 761px) {
  #page-traders > .bulle-chef:not(:has(.directe--ouvert)) { bottom: 84px; }
}

/* LA CHAINE DE RADAR (13/10, maquette_radar_v2 validee) */
.dk-ch{display:flex;flex-direction:column;gap:14px;margin:0 0 16px}
.dk-ch-f{border-radius:16px;background:linear-gradient(180deg,rgba(14,18,48,.92),rgba(8,10,30,.95));box-shadow:0 0 0 1px rgba(160,140,255,.5),0 0 16px rgba(162,125,255,.35);min-width:0}
.dk-ch-haut{display:flex;align-items:center;gap:8px;padding:10px 14px 4px}
.dk-ch-nom{letter-spacing:2px;text-transform:uppercase;font-size:11px;font-weight:700}
.dk-ch-compte{margin-left:auto;font-size:12px;color:#9aa3c7}
.dk-ch-c{padding:4px 14px 14px;max-height:52vh;overflow:auto}
.dk-ch-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:900px){.dk-ch-grille{grid-template-columns:1fr}}
.dk-ch-direct{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dk-ch-et{padding:6px 10px;border-radius:10px;background:#141a45;font-size:12.5px;color:#9aa3c7;border:1px solid transparent}
.dk-ch-et.fait{color:#7df0b8}
.dk-ch-et.ici{color:#ffe2a8;border-color:#e8c27a;background:rgba(232,194,122,.1);box-shadow:0 0 10px rgba(232,194,122,.3)}
.dk-ch-proch{margin-left:auto}
.dk-ch-fl{color:#4a5185}
.dk-ch-prog{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.dk-ch-pr{flex:1;min-width:150px;border-radius:12px;background:rgba(120,130,200,.1);padding:8px 10px}
.dk-ch-pr b{display:block;font-size:18px;color:#fff}.dk-ch-pr b.gain{color:#7df0b8}
.dk-ch-pr span{font-size:11.5px;color:#9aa3c7}
.dk-ch-s{border-radius:12px;padding:9px 11px;margin:0 0 8px;background:rgba(120,130,200,.08);border-left:3px solid #5b6cff}
.dk-ch-s.v{border-left-color:#7df0b8}.dk-ch-s.o{border-left-color:#e8c27a}.dk-ch-s.r{border-left-color:#ff8f8f;opacity:.9}
.dk-ch-s p{margin:0;font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.dk-ch-s small{display:block;color:#9aa3c7;font-size:12px;margin-top:2px}
.dk-ch-tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:99px;margin:4px 4px 0 0;background:#1d2357;color:#cfd8ff}
.dk-ch-tag.v{background:rgba(125,240,184,.15);color:#7df0b8}.dk-ch-tag.r{background:rgba(255,143,143,.15);color:#ff9b9b}
.dk-ch-voix{margin:6px 0 0;padding:0;list-style:none;font-size:12px}
.dk-ch-voix li{margin:2px 0;color:#cfd8ff}.dk-ch-voix i{font-style:normal;font-weight:700;margin-right:4px}
.dk-ch-oui{color:#7df0b8}.dk-ch-non{color:#ff9b9b}.dk-ch-rev{color:#ffe2a8}
.dk-ch-tour{font-size:11.5px;color:#e8c27a;margin-top:4px}
.dk-ch-note{font-size:11.5px;color:#9aa3c7;margin:8px 0 0}
.dk-ch-deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 16px}
@media(max-width:900px){.dk-ch-deux{grid-template-columns:1fr}}
.dk-ch-ln{display:grid;grid-template-columns:minmax(70px,1.2fr) 1fr 44px 1fr 44px 40px;align-items:center;gap:6px;font-size:12.5px;margin:4px 0}
.dk-ch-ln span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-ch-ln--t{font-size:11px;color:#9fd0ff;text-transform:uppercase;letter-spacing:1px}
.dk-ch-bar{height:10px;border-radius:99px;background:#1b1f45;overflow:hidden;display:block}
.dk-ch-bar i{display:block;height:100%;border-radius:99px}
.dk-ch-ln em{font-style:normal;text-align:right;color:#cfd8ff}
.dk-ch-ln b{text-align:right;font-size:11.5px}