/* LES BUREAUX (Lionel 2026-07-29) -- 4 pages où il REGARDE l'équipe travailler.
   Sa demande, mot pour mot : les traders « sur un bureau » avec un TradingView
   « pour que je puisse voir l'action se faire » ; les codeurs avec « un écran
   genre PowerShell que je vois en fait dans la fenêtre où tu les vois coder » ;
   le média pour les voir bosser et voir le code du montage vidéo ; la tech avec
   « tous les scripts... que j'ai accès en fait pour voir le problème ».

   Règle de fond imposée par Lionel : « toutes les pages devraient avoir le même
   fond d'écran, trois d, style étoile ». Le ciel est rendu par
   bureaux/starfield.js dans #bureaux-starfield (canvas fixe, z-index 0) -- donc
   ICI tout est TRANSPARENT et posé au-dessus (z-index 1). Aucun fond opaque
   plein écran, sinon on masquerait les étoiles.

   Famille visuelle : celle qui existe déjà (verre sombre bleuté + liseré or
   rgba(225,185,110,...), titres Georgia italique). On n'invente pas une
   deuxième charte.

   RÈGLE ABSOLUE DU PROJET, rappelée ici parce que ces pages affichent des
   chiffres : aucune donnée inventée. Tout ce qui s'affiche vient du backend
   (/bureau) ou est marqué explicitement comme non branché. Un tableau vide qui
   dit « rien pour l'instant » vaut mille fois mieux qu'un faux chiffre. */

#bureaux-starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none; /* allumé par starfield.js uniquement sur les pages bureaux */
  pointer-events: none; /* décor : il ne doit jamais intercepter un clic */
}

/* Les 4 pages bureaux : colonne pleine hauteur, fond transparent (les étoiles
   passent derrière), contenu au-dessus du canvas. */
#page-traders.page--active,
#page-codeurs.page--active,
#page-media.page--active,
#page-tech.page--active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* ---------- En-tête de bureau ---------- */

/* Décalage à gauche de 104px sur les deux premières rangées : #page-nav est une
   colonne fixe en haut à gauche (7 onglets depuis l'arrivée des bureaux), elle
   descend jusqu'à ~140px. Sans ce décalage, la plaque du bureau et les postes
   passeraient dessous. */
.bureau__header {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 34px 26px 10px 104px;
}

.bureau__plaque {
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.08em;
  color: rgba(225, 185, 110, 0.92);
  text-shadow: 0 0 12px rgba(225, 185, 110, 0.25);
}

.bureau__sous-titre {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  color: rgba(200, 214, 245, 0.5);
}

/* Pastille d'état de la liaison backend. Trois états seulement, et jamais de
   vert optimiste : gris tant qu'on ne sait pas, or quand les données sont
   arrivées, rouge quand le backend ne répond pas. */
.bureau__lien {
  margin-left: auto;
  font-size: 11px;
  font-family: system-ui, -apple-system, sans-serif;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(160, 180, 220, 0.25);
  color: rgba(200, 214, 245, 0.55);
  white-space: nowrap;
}
.bureau__lien--ok {
  border-color: rgba(225, 185, 110, 0.45);
  color: rgba(225, 185, 110, 0.85);
}
.bureau__lien--ko {
  border-color: rgba(255, 120, 120, 0.5);
  color: rgba(255, 150, 150, 0.9);
}
/* « connexion… » pendant les essais (2026-08-04). En BLEU, pas en rouge : tant
   qu'on réessaie, il n'y a pas de problème à signaler à Lionel. Le rouge doit
   rester rare, sinon il ne veut plus rien dire. */
.bureau__lien--attente {
  border-color: rgba(120, 180, 255, 0.45);
  color: rgba(160, 200, 255, 0.9);
}

/* ---------- Le bureau : la rangée de postes ---------- */

.bureau__postes {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  padding: 4px 26px 14px 104px;
  flex-wrap: wrap;
}

.poste {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(12, 16, 32, 0.66);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(225, 185, 110, 0.18);
}
.poste--chef {
  border-color: rgba(225, 185, 110, 0.42);
  box-shadow: 0 0 16px rgba(225, 185, 110, 0.08);
}

/* Le « siège » : un rond lumineux, pas une photo inventée. */
.poste__siege {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(225, 185, 110, 0.85), rgba(120, 90, 40, 0.25) 62%, transparent 75%);
}
.poste--chef .poste__siege {
  background: radial-gradient(circle at 35% 30%, rgba(255, 225, 170, 0.95), rgba(180, 140, 70, 0.35) 62%, transparent 75%);
}

.poste__nom {
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
  color: rgba(235, 240, 255, 0.92);
}
.poste__role {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 10.5px;
  line-height: 1.35;
  color: rgba(200, 214, 245, 0.55);
}

/* ---------- Corps : colonnes ---------- */

.bureau__corps {
  flex: 1 1 auto;
  display: flex;
  gap: 14px;
  padding: 0 26px 22px 26px;
  min-height: 0; /* indispensable pour que les enfants puissent défiler */
}

.bureau__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  min-width: 0;
}
.bureau__col--large { flex: 1.55 1 0; }
.bureau__col--etroite { flex: 1 1 0; }

/* Filet de sécurité : si la somme des hauteurs d'une colonne dépasse l'écran
   (petit portable, zoom Windows à 125 %), la colonne défile au lieu d'écraser
   la dernière carte à zéro pixel. Constaté au test du 29/07 sur la page Tech. */
.bureau__col { overflow-y: auto; overflow-x: hidden; }
.bureau__col::-webkit-scrollbar { width: 6px; }
.bureau__col::-webkit-scrollbar-thumb { background: rgba(225, 185, 110, 0.18); border-radius: 3px; }

.bureau-carte {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 14px;
  background: rgba(12, 16, 32, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(225, 185, 110, 0.16);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.bureau-carte--plein { flex: 1 1 auto; }

.bureau-carte__titre {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(225, 185, 110, 0.12);
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: rgba(225, 185, 110, 0.82);
}
.bureau-carte__note {
  font-family: system-ui, -apple-system, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0;
  color: rgba(200, 214, 245, 0.45);
}

.bureau-carte__corps {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 14px 14px 14px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(226, 233, 250, 0.86);
}
.bureau-carte__corps--serre { padding: 0; }

/* Ascenseurs discrets, assortis (Chromium/Electron). */
.bureau-carte__corps::-webkit-scrollbar { width: 8px; }
.bureau-carte__corps::-webkit-scrollbar-thumb {
  background: rgba(225, 185, 110, 0.2);
  border-radius: 8px;
}
.bureau-carte__corps::-webkit-scrollbar-track { background: transparent; }

/* ---------- Lignes de données ---------- */

.ligne {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ligne:last-child { border-bottom: none; }

.ligne__cle {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ligne__val {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: rgba(225, 185, 110, 0.85);
}
.ligne__quand {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: rgba(200, 214, 245, 0.4);
  font-variant-numeric: tabular-nums;
}

/* Vert / rouge UNIQUEMENT pour un résultat de trade réellement calculé. */
.gain { color: rgba(120, 220, 160, 0.95); }
.perte { color: rgba(255, 140, 140, 0.95); }
.neutre { color: rgba(200, 214, 245, 0.6); }

/* ── L'ARGENT DU BUREAU DU MARKETING (2026-08-01) ───────────────────────────
   Regle de Lionel, mot pour mot :

     « je voudrais aussi que tous les montants qui ne sont pas en live sur le
       dashboard soient a zero aussi »

   Donc un montant n'est JAMAIS un tiret ni un « bientot ». Il vaut zero, il
   affiche zero, et il se voit au premier coup d'oeil que c'est un zero force
   et non un vrai chiffre tombe a zero. D'ou trois styles et pas un seul :

     .argent--live   un chiffre mesure pour de vrai  -> lisible, dore, net.
     .argent--zero   un zero force, faute de source  -> gris, efface, barre.
     .argent--total  un total de colonne             -> plus gros, en avant.

   Si un jour une ligne se branche, elle passe toute seule de --zero a --live :
   c'est bureaux_api._ligne_argent() qui decide, pas la feuille de style. */

.argent--live {
  color: rgba(235, 200, 120, 0.95);
  font-weight: 600;
  font-size: 13px;
}

.argent--zero {
  color: rgba(200, 214, 245, 0.32);
  font-weight: 400;
  font-size: 13px;
  text-decoration: line-through;
  text-decoration-color: rgba(200, 214, 245, 0.22);
}

.argent--total {
  color: rgba(225, 235, 255, 0.95);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.etiquette {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.03em;
  border: 1px solid rgba(225, 185, 110, 0.3);
  color: rgba(225, 185, 110, 0.8);
  white-space: nowrap;
}
.etiquette--ouvert {
  border-color: rgba(120, 220, 160, 0.4);
  color: rgba(120, 220, 160, 0.9);
}
.etiquette--muet {
  border-color: rgba(160, 180, 220, 0.22);
  color: rgba(200, 214, 245, 0.5);
}

/* Message honnête quand il n'y a rien à montrer. On ne remplit JAMAIS avec de
   l'exemple : on dit qu'il n'y a rien, et pourquoi. */
.vide {
  padding: 16px 2px;
  font-size: 12px;
  font-style: italic;
  color: rgba(200, 214, 245, 0.45);
  line-height: 1.6;
}

/* ---------- La console (page Codeurs, et réutilisée en Tech) ---------- */
/* « un écran genre PowerShell que je vois en fait dans la fenêtre où tu les
   vois coder » -- fond noir bleuté, texte mono, comme un vrai terminal. */

.console {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 12px 14px;
  background: rgba(2, 6, 18, 0.88);
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(214, 228, 255, 0.9);
  white-space: pre-wrap;
  word-break: break-word;
}
.console::-webkit-scrollbar { width: 9px; }
.console::-webkit-scrollbar-thumb { background: rgba(120, 160, 230, 0.28); border-radius: 9px; }
.console::-webkit-scrollbar-track { background: transparent; }

.console__invite { color: rgba(120, 220, 160, 0.85); }
.console__agent { color: rgba(225, 185, 110, 0.9); }
.console__heure { color: rgba(140, 165, 210, 0.55); }
.console__texte { color: rgba(214, 228, 255, 0.85); }
.console__alerte { color: rgba(255, 150, 150, 0.95); }
.console__bloc { display: block; padding: 4px 0 10px 0; }

/* ---------- TradingView (page Traders) ---------- */

.tv-cadre {
  flex: 1 1 auto;
  min-height: 260px;
  border: none;
  width: 100%;
  background: rgba(2, 6, 18, 0.6);
  /* Sans ceci, le document VIDE de l'iframe (pendant le chargement, ou si
     TradingView est injoignable) se peint en BLANC et fait un grand carré
     clair au milieu du ciel étoilé. Constaté au test du 29/07. */
  color-scheme: dark;
}

.tv-choix {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.tv-choix button {
  background: none;
  border: 1px solid rgba(225, 185, 110, 0.22);
  border-radius: 999px;
  padding: 2px 10px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 10.5px;
  color: rgba(200, 214, 245, 0.6);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tv-choix button:hover { color: rgba(225, 185, 110, 0.9); border-color: rgba(225, 185, 110, 0.5); }
.tv-choix button.actif {
  color: rgba(225, 185, 110, 0.95);
  border-color: rgba(225, 185, 110, 0.7);
  background: rgba(225, 185, 110, 0.08);
}

/* ---------- Page Tech : les scripts ---------- */

.script {
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.script:last-child { border-bottom: none; }
.script__tete { display: flex; align-items: baseline; gap: 8px; }
.script__nom {
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
  font-size: 11.5px;
  color: rgba(235, 240, 255, 0.92);
}
.script__quoi {
  font-size: 11px;
  color: rgba(200, 214, 245, 0.6);
  margin: 3px 0 5px 0;
  line-height: 1.45;
}
/* La commande de lancement : sélectionnable, c'est fait pour être copié-collé
   dans PowerShell quand quelque chose ne tourne pas. */
.script__cmd {
  display: block;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(2, 6, 18, 0.8);
  border: 1px solid rgba(120, 160, 230, 0.16);
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
  font-size: 11px;
  color: rgba(150, 220, 190, 0.9);
  user-select: text;
  cursor: text;
  overflow-x: auto;
  white-space: pre;
}

.pastille {
  flex: 0 0 auto;
  font-size: 10px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(160, 180, 220, 0.25);
  color: rgba(200, 214, 245, 0.55);
}
.pastille--vif { border-color: rgba(120, 220, 160, 0.45); color: rgba(120, 220, 160, 0.9); }
.pastille--mort { border-color: rgba(255, 130, 130, 0.45); color: rgba(255, 150, 150, 0.9); }

/* ---------- Média : la vignette des fichiers produits ---------- */

.media-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 9px;
}
.media-vignette {
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid rgba(225, 185, 110, 0.16);
  background: rgba(2, 6, 18, 0.55);
}
.media-vignette img,
.media-vignette video {
  display: block;
  width: 100%;
  height: 84px;
  object-fit: cover;
  background: #05070f;
}
.media-vignette__nom {
  padding: 4px 6px;
  font-size: 9.5px;
  color: rgba(200, 214, 245, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- L'ECRAN YOUTUBE (Lionel 2026-08-01) ----------------------------
   « je voudrais que l'ecran au niveau video soit au meme design que celui de
     YouTube, que je vois exactement le rendu... un genre de faux YouTube ou
     j'appuie play. »
   Le panneau prend le fond sombre de YouTube (#0f0f0f) A L'INTERIEUR de la
   carte : le fond d'ecran 3D etoile de la page, lui, ne bouge pas.        */

.yt {
  background: #0f0f0f;
  border-radius: 12px;
  padding: 10px 10px 12px;
  font-family: "Roboto", "Segoe UI", Arial, sans-serif;
  color: #f1f1f1;
}
.yt__ecran {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.yt__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* comme YouTube : on ne recadre jamais, on laisse les bandes */
  background: #000;
}
/* Le voile + le gros bouton rouge : c'est la qu'il appuie. */
.yt__voile {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.18);
  transition: opacity 0.15s ease;
}
.yt--joue .yt__voile { opacity: 0; pointer-events: none; }
.yt__gros-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 48px;
  border-radius: 14px;
  background: #ff0000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  padding-left: 3px;
}
.yt__voile:hover .yt__gros-play { background: #ff2222; }
/* La barre du bas : cachee, elle apparait quand la souris entre. */
.yt__barre {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Le voile sombre monte haut, comme sur YouTube : sinon, sur une image
     claire, on ne lit plus ni le temps ni les boutons. */
  padding: 26px 12px 8px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.6) 42%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.15s ease;
}
.yt__ecran:hover .yt__barre { opacity: 1; }
.yt__piste {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  margin-bottom: 4px;
}
.yt__progres {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: #ff0000;
}
.yt__boutons {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.yt__btn {
  background: none;
  border: 0;
  padding: 2px;
  color: #fff;
  cursor: pointer;
  line-height: 0;
  opacity: 0.92;
}
.yt__btn:hover { opacity: 1; }
.yt__temps { font-size: 11.5px; color: #ddd; }
.yt__espace { flex: 1 1 auto; }

.yt__titre {
  margin: 11px 2px 3px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: #f1f1f1;
}
.yt__meta {
  margin: 0 2px 8px;
  font-size: 12px;
  color: #aaa;
}
.yt__montre {
  margin: 0 2px 8px;
  font-size: 12px;
  color: #e1b96e;
}
.yt__chaine {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}
.yt__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #3ea6ff;
  color: #0f0f0f;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.yt__chaine-txt { display: flex; flex-direction: column; line-height: 1.25; }
.yt__chaine-nom { font-size: 13.5px; font-weight: 600; color: #f1f1f1; }
.yt__chaine-sous { font-size: 11.5px; color: #aaa; }
/* Le bouton « S'abonner » et les pilules sont du DECOR : ils ne cliquent
   rien et n'affichent aucun chiffre. Pas de curseur main, expres -- on ne
   fait pas croire a un bouton qui marche. */
.yt__abo {
  margin-left: 6px;
  padding: 6px 13px;
  border-radius: 18px;
  background: #f1f1f1;
  color: #0f0f0f;
  font-size: 12.5px;
  font-weight: 600;
}
.yt__pilule {
  padding: 6px 12px;
  border-radius: 18px;
  background: #272727;
  color: #f1f1f1;
  font-size: 12.5px;
}
.yt__note {
  margin: 9px 2px 0;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(200, 214, 245, 0.55);
}

/* ---------- La planche de miniatures (2026-08-01) ----------
   Plusieurs versions cote a cote sous le lecteur. Le liseré doré dit
   « celle-ci est en grand », le vert dit « celle-ci est deja notee comme
   choisie ». Deux informations differentes, deux couleurs differentes :
   on ne fait pas croire qu'un clic a valide quoi que ce soit. */
.planche { margin: 12px 2px 0; }
.planche__titre {
  font-size: 12px;
  color: rgba(200, 214, 245, 0.75);
  margin-bottom: 8px;
}
.planche__rang {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.planche__case {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 148px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: rgba(12, 18, 34, 0.55);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.planche__case:hover { border-color: rgba(225, 185, 110, 0.45); }
.planche__case--grand {
  border-color: rgba(225, 185, 110, 0.9);
  box-shadow: 0 0 0 1px rgba(225, 185, 110, 0.35);
}
.planche__case--choisie {
  border-color: #3fbf7f;
  box-shadow: 0 0 0 1px rgba(63, 191, 127, 0.45);
}
.planche__img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  background: #000;
}
.planche__num {
  font-size: 11.5px;
  font-weight: 600;
  color: #f1f1f1;
}
.planche__angle {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(200, 214, 245, 0.65);
}
.planche__note {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(200, 214, 245, 0.55);
}

/* La vignette actuellement dans le lecteur. */
.media-vignette { cursor: pointer; }
.media-vignette:hover { border-color: rgba(225, 185, 110, 0.45); }
.media-vignette--choisie {
  border-color: #ff0000;
  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.55);
}

/* ---------- Deux graphiques + la loupe (page Traders, 2026-08-02) ---------- */
/* Lionel : « il faudrait peut-être les faire un petit peu plus petits. Deux
   graphiques qui a moyen en fait de zoomer dessus, genre un petit, un petit
   symbole pour zoomer. » Un écran par trader, côte à côte et plus bas que
   l'ancien écran unique ; la loupe agrandit la CARTE, jamais l'iframe --
   déplacer un iframe dans le DOM le recharge. */

.tv-duo {
  display: flex;
  flex: 0 0 auto;
  gap: 14px;
  min-height: 0;
}
.tv-duo > .bureau-carte { flex: 1 1 0; min-width: 0; }
/* Plus petits : 24vh chacun, au lieu d'un cadre unique qui mangeait toute la
   colonne. La place rendue va aux trades clos, ceux qu'il vient relire. */
.tv-duo .tv-cadre { flex: 0 0 auto; height: 24vh; min-height: 170px; }

.tv-repere {
  font-family: system-ui, -apple-system, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0;
  color: rgba(200, 214, 245, 0.42);
  align-self: center;
}

.tv-zoom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: 1px solid rgba(225, 185, 110, 0.22);
  border-radius: 6px;
  color: rgba(200, 214, 245, 0.6);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tv-zoom:hover { color: rgba(225, 185, 110, 0.95); border-color: rgba(225, 185, 110, 0.6); }

/* Agrandi : la carte se pose par-dessus la page. On garde 110 px à gauche pour
   ne jamais couvrir le menu des pages (#page-nav), et on reste sous son
   z-index (100) : règle de la maison, rien de cliquable sous un bandeau. */
/* UNE FENETRE QUI PREND LA TAILLE DE SON CONTENU (Lionel, 2026-08-05) :
   « j'ai zoomé sur une autre fenêtre, le message était tout petit mais la
     fenêtre était vachement grande ouverte [...] je ne veux pas forcément
     avoir d'espace vide. Comme la fenêtre du Tableau sur la page 1. »

   AVANT : la carte agrandie était toujours plein écran (top/right/bottom/left
   fixés). Un message de deux lignes flottait donc au milieu d'un grand vide.

   MAINTENANT : elle est posée au centre, et sa taille SUIT le contenu.
     - largeur  : `max-content` = la largeur que le contenu prendrait sans
                  aller à la ligne. Trois mots -> étroite. Une liste de mails
                  ou un tableau -> large, jusqu'à la limite de l'écran.
     - hauteur  : `auto`, plafonnée à 94vh. Au-delà, c'est le corps qui
                  défile — jamais la fenêtre qui déborde.
   On garde 110 px à gauche pour ne jamais couvrir le menu des pages
   (#page-nav) et on reste sous son z-index : règle de la maison, rien de
   cliquable sous un bandeau. */
.bureau-carte--zoom {
  position: fixed;
  top: 50%;
  left: calc(110px + (100vw - 110px) / 2);
  transform: translate(-50%, -50%);
  right: auto;
  bottom: auto;
  width: max-content;
  min-width: min(420px, calc(100vw - 140px));
  max-width: calc(100vw - 140px);
  height: auto;
  max-height: 94vh;
  z-index: 60;
  display: flex;
  flex-direction: column;
  border-color: rgba(225, 185, 110, 0.4);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.65);
}
/* Le corps prend ce qu'il lui faut, et PAS PLUS (flex-grow 0) : c'est lui qui
   évite l'espace vide. S'il dépasse, il défile — la fenêtre, elle, s'arrête
   à 94vh. */
.bureau-carte--zoom > .bureau-carte__corps,
.bureau-carte--zoom > .console {
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
}
/* Une image, une vidéo ou un graphique agrandi ne dépasse jamais la fenêtre. */
.bureau-carte--zoom img,
.bureau-carte--zoom video,
.bureau-carte--zoom canvas { max-width: 100%; height: auto; }
/* Sauf les deux cadres qui DOIVENT remplir : TradingView et le lecteur vidéo
   n'ont pas de taille naturelle, ils prennent ce qu'on leur donne. */
.bureau-carte--zoom .tv-cadre { flex: 1 1 auto; height: auto; min-height: 0; }

/* ---------- Revoir un trade (page Traders, 2026-08-02) ---------- */

.ligne--trade { cursor: pointer; border-radius: 6px; }
.ligne--trade:hover { background: rgba(225, 185, 110, 0.07); }
.ligne--trade:focus-visible { outline: 1px solid rgba(225, 185, 110, 0.7); outline-offset: 1px; }

.fiche {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  align-items: center;
  justify-content: center;
  padding: 6vh 4vw 6vh 120px;
  background: rgba(2, 5, 14, 0.62);
}
.fiche--ouverte { display: flex; }

.fiche__boite {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  width: min(560px, 100%);
  border-radius: 14px;
  background: rgba(10, 14, 30, 0.96);
  border: 1px solid rgba(225, 185, 110, 0.35);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.fiche__fermer {
  margin-left: auto;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: 1px solid rgba(225, 185, 110, 0.22);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1;
  color: rgba(200, 214, 245, 0.65);
  cursor: pointer;
}
.fiche__fermer:hover { color: rgba(225, 185, 110, 0.95); border-color: rgba(225, 185, 110, 0.6); }
.fiche__rien { color: rgba(200, 214, 245, 0.4); font-style: italic; }
.fiche__these { padding-top: 10px; }
.fiche__texte {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(226, 233, 250, 0.82);
  white-space: pre-wrap;
}

/* ---------- La ligne directe avec le chef de salle (2026-08-02) ---------- */
/* « une ligne directe avec le chef d'equipe ». Le fil en haut, le champ en
   bas, collé au fond de la carte : il écrit sans avoir à faire défiler. */

.directe {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}
.directe__fil {
  flex: 1 1 auto;
  min-height: 64px;
  overflow-y: auto;
  padding: 8px 14px 4px 14px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}
.directe__fil::-webkit-scrollbar { width: 8px; }
.directe__fil::-webkit-scrollbar-thumb {
  background: rgba(120, 160, 230, 0.28);
  border-radius: 8px;
}
.directe__fil::-webkit-scrollbar-track { background: transparent; }

.directe__ligne { display: flex; gap: 8px; padding: 3px 0; }
.directe__qui {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  padding-top: 1px;
  color: rgba(225, 185, 110, 0.85);
}
.directe__txt {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  color: rgba(226, 233, 250, 0.86);
}
.directe__ligne--moi .directe__qui { color: rgba(150, 200, 255, 0.85); }
/* Le message qui n'est PAS parti se voit tout de suite : il ne doit jamais
   pouvoir passer pour un message envoyé. */
.directe__ligne--rate .directe__txt {
  font-style: italic;
  color: rgba(255, 150, 150, 0.9);
}

.directe__forme {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  padding: 8px 14px 12px 14px;
  border-top: 1px solid rgba(225, 185, 110, 0.14);
}
.directe__champ {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(225, 185, 110, 0.22);
  background: rgba(2, 6, 18, 0.6);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  color: rgba(232, 238, 255, 0.95);
}
.directe__champ::placeholder { color: rgba(200, 214, 245, 0.35); }
.directe__champ:focus {
  outline: none;
  border-color: rgba(225, 185, 110, 0.6);
}
.directe__envoi {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(225, 185, 110, 0.35);
  background: rgba(225, 185, 110, 0.1);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(235, 205, 145, 0.95);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.directe__envoi:hover {
  background: rgba(225, 185, 110, 0.2);
  border-color: rgba(225, 185, 110, 0.7);
}

/* ---------- Fenêtre étroite : on passe en une seule colonne ---------- */

@media (max-width: 1080px) {
  .bureau__corps { flex-direction: column; overflow-y: auto; }
  .bureau__col { flex: 0 0 auto; }
  .bureau-carte { max-height: 46vh; }
  /* Les deux graphiques se mettent l'un sous l'autre plutôt que de se réduire
     à une bande de 200 px de large où on ne lit plus rien. */
  .tv-duo { flex-direction: column; }
  .tv-duo .tv-cadre { height: 30vh; }
  /* Sinon la règle .bureau-carte ci-dessus rabaisserait la carte agrandie.
     On garde le plafond à 94vh (2026-08-05) : « max-height: none » laissait
     la fenêtre déborder de l'écran sur un petit écran, et le bas devenait
     inatteignable. */
  .bureau-carte--zoom { max-height: 94vh; }
  .fiche { padding: 4vh 4vw 4vh 100px; }
  /* Sinon la carte tombe a 46vh et le fil de la conversation disparait
     presque entierement derriere le champ de saisie. */
  .directe__fil { min-height: 90px; }
}

/* ===================================================================
   LE TÉLÉPHONE (2026-08-05, demande de Lionel)

   Ses mots : « sur mon téléphone, tout ça paraît beaucoup trop en bordel,
   beaucoup trop gros, je ne vois pas des choses. Par exemple sur la fenêtre
   des traders je ne vois rien du tout, je vois plus TradingView alors que
   TradingView sur mon ordinateur il est tout petit. Sur la page d'Émilie je
   vois à peine mes emails. Et c'est pour ça que j'avais pensé au bouton
   Zoom, parce que ça me permettait surtout de zoomer dans mon téléphone. »

   « L'écran de l'ordinateur il est parfait et je ne veux rien changer. »
   -> TOUT ce qui suit est enfermé dans @media (max-width: 640px). Au-dessus
   de 640px, pas une seule de ces règles ne s'applique. Le rendu PC est
   intouchable, et c'est vérifié par un test (_test_telephone.py).

   POURQUOI 640px ET PAS 1080px. La règle 1080px existait déjà : elle range
   les colonnes l'une sous l'autre quand la fenêtre est étroite. Elle est
   bonne pour une fenêtre PC réduite, mais elle laisse les cartes à 46vh --
   sur un téléphone, 46vh c'est trois lignes de mail. On garde donc 1080px
   pour la fenêtre étroite, et on ajoute 640px pour le vrai téléphone.
   =================================================================== */

/* LA FORCE DES REGLES -- PIEGE DEJA RENCONTRE LE 2026-08-05, ET IL REVIENT.
   bureaux.js injecte ses styles avec document.head.appendChild : ils arrivent
   donc APRES cette feuille. A force egale, le dernier gagne -- toutes les
   regles ci-dessous seraient donc muettes sur .mail__de, .tv-cadre, .console,
   qui sont definis la-bas.
   On prefixe chaque selecteur par `html` : un element + une classe bat une
   classe seule, quel que soit l'ordre. Pas de !important a distribuer partout ;
   il reste reserve aux hauteurs ecrites DIRECTEMENT sur l'element par le JS
   (style="max-height:18vh"), que rien d'autre ne peut defaire. */
@media (max-width: 640px) {

  /* --- L'EN-TÊTE : il mangeait le tiers de l'écran ------------------- */
  /* 104px de marge à gauche servaient à contourner le menu des pages, qui
     est une colonne. Sur téléphone le menu est plus gros (15px au lieu de
     11px, voir styles.css) : on descend le contenu SOUS lui au lieu de le
     contourner, sinon il ne reste plus rien en largeur. */
  /* LE DEFILEMENT (retour de Lionel, 2026-08-05 au soir) :
     « sur l'ecran d'Emilie, ca s'arrete a sa journee. Il y a d'autres
       fenetres plus bas et je ne peux pas descendre. »
     LA CAUSE, trouvee en cherchant : `html, body { overflow: hidden }`
     (constellation.css, ligne 4). Rien ne peut donc descendre nulle part.
     Sur ordinateur ce n'est pas genant -- tout tient a l'ecran. Sur
     telephone, tout ce qui depasse etait simplement inatteignable.
     LA CORRECTION : c'est la PAGE qui defile, et elle seule. On ne met pas
     un deuxieme defilement dans .bureau__corps : deux zones qui defilent
     l'une dans l'autre, au doigt, c'est le meilleur moyen de rester
     coince dans la mauvaise. */
  html #page-emilie.page--active,
  html #page-sage.page--active,
  html #page-traders.page--active,
  html #page-codeurs.page--active,
  html #page-media.page--active,
  html #page-marketing.page--active,
  html #page-tech.page--active {
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* de quoi respirer sous la derniere carte, sinon on croit que c'est
       la fin alors qu'il reste une ligne cachee par le bord de l'ecran */
    padding-bottom: 40px;
  }

  /* LES TITRES DE PAGE -- TOUTES LES PAGES, pas seulement Emilie.
     Lionel : « je pense que tous les titres sont beaucoup trop grands sur
     chaque page ». « Le bureau d'Emilie » en 26px mangeait une ligne
     entiere de son telephone. */
  html .bureau__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 58px 12px 6px 12px;
  }
  html .bureau__plaque { font-size: 15px; letter-spacing: 0.04em; }
  html .bureau__sous-titre { font-size: 10.5px; }
  html .bureau__lien { font-size: 10.5px; }

  /* Les postes (les agents de la salle) : une bande qui défile du doigt,
     au lieu d'un pavé qui prend la moitié de la hauteur. */
  html .bureau__postes {
    padding-left: 12px;
    padding-right: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  html .poste { flex: 0 0 auto; }

  /* --- LES CARTES : une seule colonne, et de la vraie hauteur -------- */
  html .bureau__corps {
    flex-direction: column;
    overflow: visible;      /* c'est la PAGE qui defile, pas le corps */
    padding: 0 12px 16px;
    gap: 12px;
  }
  /* .bureau__col porte `overflow-y: auto` (ligne 179) : c'est une DEUXIEME
     zone de defilement imbriquee dans la page. Au doigt, on se retrouve a
     faire glisser la mauvaise et on croit que c'est bloque -- exactement le
     probleme qu'on repare. On la neutralise : la page defile, elle seule. */
  html .bureau__col {
    flex: 0 0 auto;
    width: 100%;
    overflow: visible;
    min-height: 0;
  }

  /* .fiche (le detail d'un trade) est FIXE a l'ecran et son cadre porte
     `overflow: hidden` : un texte long y est coupe net, et il n'y a aucun
     moyen d'aller voir la suite. Sur telephone c'est certain d'arriver --
     la these d'un trade fait plusieurs lignes. On la rend defilante. */
  html .fiche__boite {
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Meme chose pour la fenetre agrandie : elle est fixee entre le haut et le
     bas de l'ecran, donc tout ce qui depasse doit pouvoir defiler DEDANS. */
  html .bureau-carte--zoom > .bureau-carte__corps,
  html .bureau-carte--zoom > .console {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* `!important` assumé, et seulement ici : bureaux.js écrit la hauteur
     DIRECTEMENT sur l'élément (style="max-height:18vh"). Une hauteur écrite
     sur l'élément bat toutes les feuilles de style ; c'est le seul moyen de
     la défaire. Même leçon qu'avec les mails d'Émilie le 2026-08-05. */
  html .bureau-carte {
    max-height: none !important;
    width: 100%;
  }
  html .bureau-carte__corps { max-height: none !important; }

  /* --- TRADINGVIEW : petit, et EN DERNIER ---------------------------- */
  /* « je vois plus TradingView alors que sur mon ordinateur il est tout
     petit ». Sur téléphone son iframe s'étirait et écrasait tout le reste.
     On le borne à 26vh et on l'envoie en bas de la colonne : ce que Lionel
     veut voir d'abord, ce sont SES traders, pas un graphique générique.
     La loupe reste là pour l'agrandir quand il le veut -- c'était son idée. */
  html .tv-cadre { height: 26vh; min-height: 180px; }
  html .tv-duo { flex-direction: column; }
  html .tv-duo .tv-cadre { height: 30vh; }
  html #tv-live { order: 99; }

  /* --- LES DEUX BOÎTES MAIL D'ÉMILIE -------------------------------- */
  /* « je vois à peine mes emails ». Côte à côte sur un écran de téléphone,
     chaque boîte fait 45 % de la largeur : l'objet d'un mail tient en trois
     mots. On les met l'une SOUS l'autre, pleine largeur. Elles restent
     visuellement séparées (or / bleu) : les deux boîtes ne se mélangent
     jamais, c'est la règle. */
  html #emilie-boites { flex-direction: column; }
  html #emilie-boites > .bureau-carte { max-height: none !important; }
  html #emilie-boites .boite-corps { max-height: none !important; }
  html .mail__de { font-size: 13px; }
  html .mail__objet { font-size: 12.5px; }
  html .mail__quand { font-size: 11px; }
  html .mail { padding: 9px 2px; }

  /* --- LE ZOOM : c'est SA solution, il doit être facile à viser ------ */
  /* Une cible de 20px se rate au doigt. 40px, c'est confortable. */
  html .tv-zoom {
    width: 40px;
    height: 40px;
    font-size: 17px;
    border-color: rgba(225, 185, 110, 0.45);
  }

  /* Agrandi sur téléphone = VRAIMENT plein écran. Sur PC la fenêtre prend la
     taille de son contenu (width: max-content) pour ne pas laisser de vide ;
     sur un écran de 6 pouces, ce même réglage donne une fenêtre étroite au
     milieu du noir -- l'inverse de ce qu'il demande. On revient donc à un
     plein écran franc, et on efface la marge de 110px : le menu des pages
     est en HAUT sur téléphone, plus sur le côté. */
  html .bureau-carte--zoom {
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    transform: none;
    width: auto !important;
    max-width: none;
    min-width: 0;
    height: auto;
    max-height: none;
  }
  html .bureau-carte--zoom .bureau-carte__corps { max-height: none !important; }
  html .bureau-carte--zoom .mail__de { font-size: 16px; }
  html .bureau-carte--zoom .mail__objet { font-size: 15px; }
  html .bureau-carte--zoom .mail__extrait { font-size: 13.5px; }

  /* --- LA LIGNE DIRECTE AVEC LE CHEF -------------------------------- */
  /* 16px sur le champ : en dessous, iOS zoome tout seul à la saisie et
     Lionel se retrouve avec une page décalée qu'il doit repincer. */
  html .directe__fil { min-height: 110px; max-height: 30vh; }
  html .directe input, html .directe textarea { font-size: 16px; }
  html .chat-or { width: 42px; height: 42px; font-size: 19px; }

  /* --- LES GRILLES ET LES TABLEAUX ---------------------------------- */
  /* RIEN NE DEBORDE EN LARGEUR. Une image, un graphique ou un tableau plus
     large que l'ecran pousse toute la page de cote : on se retrouve a faire
     glisser a droite pour lire, et la moitie du texte sort du cadre. C'est le
     defaut le plus courant sur telephone, on le ferme d'entree. */
  html .bureau-carte img,
  html .bureau-carte video,
  html .bureau-carte canvas,
  html .bureau-carte iframe,
  html .bureau-carte table { max-width: 100%; }

  html .media-grille { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  html .console { font-size: 11.5px; max-height: 50vh !important; }
  html .ligne { font-size: 12.5px; }
  html .fiche { padding: 3vh 5vw 3vh 5vw; }
}