/* Ma Trading by Mademoiselle Ma — DA de la landing (dark + golden hour) */
@import url("/fonts/fonts.css?v=2");
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
:root {
  --bg: #0a0a0b;
  --bg2: #0f0f11;
  --bg3: #141417;
  --line: rgba(255, 255, 255, .08);
  --txt: #f4f3f0;
  --muted: #86837c;
  --orange: #f37021;
  --orange-soft: #e98a4a;
  --glow: rgba(243, 112, 33, .30);
  --red: #d64836;
  --blue: #4d90e0;
  --ease: cubic-bezier(.22, .61, .27, 1);
}
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--txt);
  font: 400 14px/1.6 "Schibsted Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; touch-action: manipulation; } /* pas de zoom double-tap */
input { font: inherit; }

/* l'incrément de taille du texte : les surcharges qui s'en servent sont en
   fin de feuille (elles doivent passer APRÈS les tailles d'origine) */
:root { --fs: 0px; }
html[data-taille="grand"] { --fs: 2px; }
html[data-taille="tresgrand"] { --fs: 4px; }

/* Marque : « Ma Trading » en Fraunces, « Ma » en italique orange (signature),
   avec la baseline « by Mademoiselle Ma ». */
.brand-block { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1; }
.brand {
  font-family: "Fraunces", Georgia, serif; font-weight: 500;
  letter-spacing: -.015em; color: var(--txt); font-size: 26px;
}
.brand i { color: var(--orange); font-style: italic; }
.brand-tag {
  font-size: 9.5px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}
.brand-block.small .brand { font-size: 17px; }
.brand-block.small .brand-tag { font-size: 8px; letter-spacing: .2em; }

/* Logo néon « Ma . Trading » (PNG détouré, halo dans l'image) */
.brand-img {
  display: block; width: 396px; max-width: 100%;
  filter: drop-shadow(0 0 16px rgba(243, 112, 33, .22));
}
.brand-block.small .brand-img { width: auto; height: 40px; }

.center-view { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.card {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 14px;
  padding: 32px; width: 460px; max-width: calc(100vw - 28px); text-align: center;
  box-shadow: 0 0 60px rgba(243, 112, 33, .06);
}
.card h1 { font-size: 26px; margin-bottom: 20px; }
.card .brand-block { margin-bottom: 20px; align-items: center; }
.card h2 { font-family: "Fraunces", Georgia, serif; font-weight: 500; color: var(--txt); margin-bottom: 8px; font-size: 20px; letter-spacing: -.01em; }
.card p { color: var(--muted); margin-bottom: 16px; }
.tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.tab {
  flex: 1; padding: 8px; background: none; border: none;
  color: var(--muted); border-bottom: 2px solid var(--line);
}
.tab.active { color: var(--orange); border-color: var(--orange); }
form input {
  width: 100%; margin-bottom: 10px; padding: 10px 12px;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 8px;
  color: var(--txt); outline: none;
}
form input:focus { border-color: var(--orange); }
form textarea {
  width: 100%; margin-bottom: 10px; padding: 10px 12px;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 8px;
  color: var(--txt); outline: none; resize: vertical; font: inherit;
}
form textarea:focus { border-color: var(--orange); }
/* L'étiquette d'un champ de la carte d'authentification : au-dessus, alignée
   à gauche, et elle reste quand le champ se remplit. Un placeholder seul
   laisse l'élève qui relit devant des rectangles identiques (§1.1). */
.champ {
  display: block; text-align: left; margin-bottom: 5px;
  font-size: 13px; color: var(--txt);
}
.champ small {
  display: block; margin-top: 2px;
  font-size: 11.5px; color: var(--muted); line-height: 1.45;
}
/* « Serveur : … » entre un champ et un bouton se prend pour un champ qu'on a
   oublié de remplir : encadrée, elle s'annonce comme une information (§1.4) */
.hint-info {
  text-align: left; padding: 8px 12px; border-radius: 8px; line-height: 1.5;
  background: var(--bg3); border: 1px dashed var(--line);
}
.hint-info b { color: var(--txt); }
.hint { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
/* l'explication du compte démo : un vrai paragraphe, pas une note de bas de
   page — c'est là que le débutant décroche s'il ne comprend pas ce qu'on lui
   demande */
.hint-block {
  /* aligné à gauche : la carte est centrée, mais un paragraphe de cinq lignes
     centré se lit mal — et c'est celui qui doit être lu */
  text-align: left; line-height: 1.55; padding: 10px 12px; border-radius: 8px;
  background: var(--bg3); border: 1px solid var(--line);
}
.hint-block b { color: var(--txt); }
.guide-link { text-align: center; margin-top: 14px; font-size: 12.5px; }
.guide-link a { color: var(--muted); text-decoration: underline dotted; text-underline-offset: 3px; }
.guide-link a:hover { color: var(--orange); }
/* le sélecteur d'instrument de l'onglet Trade : réservé au mobile (sur
   desktop la topbar a le sien), et seulement s'il y a un choix à faire */
#symbol-block-m { display: none; }
#symbol-sel-m {
  width: 130px; padding: 6px 8px;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 6px; color: var(--txt);
}
/* .card .error aussi : sans lui, « .card p » (plus spécifique) repeint en
   gris l'erreur de connexion — un message d'erreur gris n'existe pas */
.error, .card .error { color: var(--red); min-height: 1.2em; margin-top: 10px; font-size: 13px; }

.btn {
  padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg3); color: var(--txt); font-weight: 500;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s, color .25s;
}
.btn.primary {
  width: 100%; background: var(--orange); border-color: var(--orange);
  color: var(--bg); font-weight: 600; margin-bottom: 8px;
  box-shadow: 0 10px 30px -12px var(--glow);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -14px var(--glow); }
.btn.ghost { background: none; }
.btn.ghost:hover { border-color: var(--txt); color: var(--txt); }
/* bouton bascule enclenché (ex. Décompte) : l'état doit se voir sans survol */
.btn.ghost.active {
  border-color: var(--orange); color: var(--orange);
  background: rgba(243, 112, 33, .12);
}
.btn.buy { flex: 1; background: var(--blue); border-color: var(--blue); color: #061423; font-weight: 800; }
.btn.sell { flex: 1; background: var(--red); border-color: var(--red); color: #17070a; font-weight: 800; }

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; background: var(--bg2); border-bottom: 1px solid var(--line);
  /* Au-dessus des panneaux plein écran (z-index 200) : sans ça, ouvrir le
     carnet enferme l'élève, qui n'a plus que la croix pour en sortir. */
  position: relative; z-index: 210;
}
.symbol { color: #fff; font-weight: 700; }
.price { color: var(--orange); font-weight: 700; font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }

/* La barre de navigation parle en texte nu : huit boîtes bordées de même
   poids faisaient crier la navigation plus fort que le graphique (06/10).
   La bordure reste réservée à l'action primaire. */
.topbar .btn.ghost, .abar .btn.ghost { border-color: transparent; }
.topbar .btn.ghost:hover, .abar .btn.ghost:hover {
  border-color: transparent; background: rgba(255, 255, 255, .06);
}

/* Le menu replié de la barre (☰ côté élève, ⋯ côté admin) : les gestes
   rares y vivent — un menu compte pour un clic, la loi des trois clics
   tient. Ancré sur la barre (position: relative sur .topbar / .abar). */
.topmenu {
  position: absolute; top: calc(100% - 6px); right: 10px; z-index: 260;
  display: flex; flex-direction: column; min-width: 215px; padding: 6px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .85);
}
.topmenu button {
  padding: 9px 12px; text-align: left; background: none; border: none;
  border-radius: 7px; color: var(--txt); font-size: 13.5px;
}
.topmenu button:hover { background: rgba(255, 255, 255, .06); }
.topmenu hr { border: none; border-top: 1px solid var(--line); margin: 5px 4px; }

.layout {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 300px;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

/* Desktop : l'application tient dans la fenêtre, un point c'est tout.
   La hauteur du bloc graphique se déduisait de la topbar par un calcul écrit à
   la main — calc(100vh - 53px) — jamais remis à jour depuis que la marque a
   gagné sa baseline « by Mademoiselle Ma » : la barre mesure 71 px, l'écart de
   18 px poussait l'axe des heures SOUS le bord de l'écran et il fallait faire
   défiler la page pour lire l'heure des bougies. La colonne flex mesure la
   topbar (et la barre du replay) telle qu'elle est, quoi qu'on y ajoute
   demain. Sur téléphone rien ne change : la topbar y est masquée et la page
   défile volontairement (voir @media (max-width: 900px)). */
@media (min-width: 901px) {
  #view-app:not([hidden]) {
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh; overflow: hidden;
  }
  .topbar, #replay-bar { flex: 0 0 auto; }
  .layout { flex: 1 1 auto; min-height: 0; }
}

/* Barre du mode replay (backtest) : lecture, pas-à-pas, vitesse, horloge simulée */
#replay-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px; background: rgba(243, 112, 33, .08);
  border-bottom: 1px solid rgba(243, 112, 33, .5);
}
/* Les commandes défilent si elles ne tiennent pas ; « Quitter » ne défile
   jamais (flex-shrink: 0 sur lui, min-width: 0 sur la piste). */
.rp-tools {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rp-tools::-webkit-scrollbar { display: none; }
.rp-tools > * { flex-shrink: 0; }
.rp-exit { flex-shrink: 0; }
.rp-badge {
  color: var(--orange); font-weight: 800; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
}
.rp-btn {
  min-width: 40px; padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg3);
  color: var(--txt); font-size: 14px; line-height: 1.4;
}
.rp-btn:hover:not(:disabled), .rp-btn.active { color: var(--orange); border-color: var(--orange); }
.rp-btn:disabled { opacity: .4; cursor: default; }
#rp-speed {
  padding: 5px 8px; border-radius: 8px;
  background: var(--bg3); border: 1px solid var(--line); color: var(--txt);
}
#rp-clock { color: var(--txt); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-exit { padding: 4px 12px; font-size: 12.5px; }

/* Barre d'outils de dessin (verticale à gauche du chart).
   Seize outils dans une colonne : les boutons sont donc courts (38 px) et la
   colonne défile si la fenêtre est basse — un outil hors de l'écran, sans
   moyen d'y aller, c'est un outil qui n'existe pas. */
#drawbar {
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  padding: 7px 3px; background: var(--bg2); border-right: 1px solid var(--line);
  overflow-y: auto; scrollbar-width: none;
}
#drawbar::-webkit-scrollbar { display: none; }
#drawbar hr {
  width: 34px; border: none; border-top: 1px solid var(--line);
  margin: 3px 0; flex: 0 0 auto;
}
.dtool {
  flex: 0 0 auto;
  width: 58px; height: 38px; border-radius: 9px; border: 1px solid transparent;
  background: none; color: var(--muted); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: color .12s var(--ease), background .12s var(--ease), border-color .12s var(--ease);
}
.dtool .ic { font-size: 16px; line-height: 1; display: grid; place-items: center; height: 18px; }
/* Les icônes sont des svg au trait : la couleur suit celle du bouton, donc le
   survol et l'état armé les allument sans qu'on ait à les redessiner. */
.dtool .ic svg {
  width: 18px; height: 18px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.dtool .ic svg .f { fill: currentColor; stroke: none; }
/* nowrap : « TENDANCE » ne tenait pas dans le bouton et se cassait en
   « TENDAN / CE ». Un libellé coupé en plein mot donne à toute la barre l'air
   abîmé, et c'est la première chose que l'élève voit à gauche du graphique. */
.dtool .lb {
  font-size: 8.5px; font-weight: 600; line-height: 1; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap;
}
.dtool:hover { color: var(--txt); background: rgba(255, 255, 255, .05); }
/* Desktop : icônes seules, l'étiquette vit dans l'infobulle (title) et dans
   la visite guidée — seize mots en capitales faisaient un mur de texte
   (06/10). Sur mobile les étiquettes restent : pas de survol au doigt. */
@media (min-width: 901px) {
  .dtool { width: 40px; height: 34px; }
  .dtool .lb { display: none; }
  #drawbar hr { width: 26px; }
}
/* Les gestes d'entretien rares (cacher, verrou, tout effacer) se replient
   sous ⋯ ; gomme et annuler, quotidiens, restent à demeure. */
#drawbar .dplus { display: none; }
#drawbar.plus .dplus { display: flex; }
#drawbar .dmore.open { color: var(--txt); background: rgba(255, 255, 255, .08); }
.dtool.active {
  color: var(--orange); border-color: rgba(243, 112, 33, .7);
  background: rgba(243, 112, 33, .12);
  box-shadow: 0 0 0 1px rgba(243, 112, 33, .18), 0 2px 10px rgba(243, 112, 33, .16);
}
.dtool[data-tool="long"] .ic { color: var(--blue); }
.dtool[data-tool="short"] .ic { color: var(--red); }
.dtool[data-mod="trash"]:hover { color: var(--red); }
/* « Annuler » sans rien en réserve : visiblement inerte plutôt que trompeur */
.dtool[data-mod="undo"].off { opacity: .35; cursor: default; }
.dtool[data-mod="undo"].off:hover { color: var(--muted); background: none; }

/* Calque de dessin au-dessus du chart : transparent aux événements par défaut,
   draw.js l'active quand un outil est armé ou qu'un tracé est survolé. */
.drawcv { position: absolute; inset: 0; z-index: 5; pointer-events: none; touch-action: none; }
#charts {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr);
  gap: 1px; background: var(--line);
  min-width: 0; min-height: 0; overflow: hidden;
  /* ancre le repère de tracé, posé en absolu par-dessus les panneaux */
  position: relative;
}

/* Repère « Maj = tracé droit » : discret tant que la touche n'est pas tenue,
   franc dès qu'elle l'est, pour que l'élève voie ce que fait le raccourci.
   Hors du flux de la grille : il ne doit pas créer de colonne de chart. */
#draw-hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 5; pointer-events: none; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(10, 10, 11, .82); border: 1px solid var(--line);
  color: var(--muted); font-size: 12px; letter-spacing: .01em;
  backdrop-filter: blur(4px);
  transition: color .12s var(--ease), border-color .12s var(--ease), background .12s var(--ease);
}
#draw-hint.on {
  color: var(--txt); border-color: var(--orange); background: rgba(243, 112, 33, .16);
}
#draw-hint[hidden] { display: none; }

/* Options de trait du dessin sélectionné (couleur, épaisseur, style).
   Posée en haut du graphique, hors du flux de la grille. */
#draw-style {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  z-index: 6; display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 10px;
  background: rgba(15, 15, 17, .94); border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
#draw-style[hidden] { display: none; }
#draw-style .ds-group { display: flex; align-items: center; gap: 4px; }
#draw-style .ds-group + .ds-group { padding-left: 10px; border-left: 1px solid var(--line); }
#draw-style button {
  border: 1px solid transparent; background: transparent; cursor: pointer;
  border-radius: 6px; padding: 0; color: var(--muted);
  transition: border-color .12s var(--ease), background .12s var(--ease), color .12s var(--ease);
}
#draw-style button:hover { border-color: var(--muted); }
#draw-style button.on { border-color: var(--orange); background: rgba(243, 112, 33, .14); color: var(--txt); }

#draw-style .ds-color { width: 18px; height: 18px; border-radius: 50%; border-width: 2px; }
#draw-style .ds-color.on { box-shadow: 0 0 0 2px rgba(243, 112, 33, .5); }

#draw-style .ds-width { width: 26px; height: 22px; display: grid; place-items: center; }
#draw-style .ds-width span { display: block; width: 16px; background: currentColor; border-radius: 2px; }
#draw-style .ds-width.on span, #draw-style .ds-width:hover span { background: var(--txt); }

#draw-style .ds-dash { width: 26px; height: 22px; font-size: 14px; line-height: 1; }

#draw-style .ds-size, #draw-style .ds-bold, #draw-style .ds-bg {
  width: 26px; height: 22px; font-family: "Schibsted Grotesk", sans-serif; font-weight: 700;
}
#draw-style .ds-bold { font-weight: 800; }

/* « Ton lot » : une étiquette et un petit champ décimal, au ton de la barre */
#draw-style .ds-lot label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); white-space: nowrap;
}
#draw-style .ds-lot input {
  width: 52px; padding: 2px 6px; border-radius: 6px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
  color: var(--txt); font: 600 12px "Schibsted Grotesk", sans-serif;
}
#draw-style .ds-lot input:focus { outline: none; border-color: var(--orange); }
#draw-style .ds-group[hidden] { display: none; }
/* le premier groupe visible ne porte pas de séparateur : un trait vertical
   flottant au bord de la barre se remarque plus que le groupe qu'il sépare */
#draw-style .ds-group.premier { padding-left: 0; border-left: none; }
.pane { display: flex; flex-direction: column; background: var(--bg); min-width: 0; min-height: 0; position: relative; }
.pane:fullscreen { background: var(--bg); padding: 4px; }

/* le menu ⚙ du graphique : couleurs des bougies, espace à droite */
.pane-menu {
  position: absolute; top: 38px; right: 8px; z-index: 60;
  width: 250px; padding: 12px 14px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
.pane-menu h5 {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin: 10px 0 7px;
}
.pane-menu h5:first-child { margin-top: 0; }
.pane-menu .row { display: flex; flex-direction: column; gap: 5px; }
.pane-menu .opt {
  text-align: left; padding: 7px 10px; border-radius: 8px; cursor: pointer;
  background: var(--bg3); border: 1px solid var(--line); color: var(--txt);
  font: 500 12.5px "Schibsted Grotesk", sans-serif;
}
.pane-menu .opt:hover { border-color: var(--orange); }
.pane-menu .opt.active { border-color: var(--orange); color: var(--orange); background: rgba(243, 112, 33, .08); }

/* « revenir au prix actuel » : n'apparaît que si on a défilé le passé */
.chart-now {
  position: absolute; right: 80px; bottom: 40px; z-index: 8;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  background: rgba(10, 10, 12, .92); border: 1px solid rgba(243, 112, 33, .55);
  color: var(--orange); font: 700 12px "Schibsted Grotesk", sans-serif;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
}
.chart-now:hover { background: rgba(243, 112, 33, .14); }

/* L'annotation en cours de frappe (outil Texte du rail de dessin) : la boîte
   s'écrit DÉJÀ comme elle s'affichera — police, taille, couleur et fond sont
   ceux du dessin final, réglés par la petite barre posée au-dessus. */
.dtext-wrap { position: absolute; z-index: 12; display: flex; flex-direction: column; gap: 4px; }
.dtext-bar {
  display: flex; align-items: center; gap: 3px; align-self: flex-start;
  padding: 4px 6px; border-radius: 9px;
  background: rgba(15, 15, 17, .97); border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.dtext-bar button {
  min-width: 20px; height: 20px; padding: 0 3px; cursor: pointer;
  border: 1px solid transparent; border-radius: 6px; background: none;
  color: var(--muted); font: 700 12px "Schibsted Grotesk", sans-serif; line-height: 1;
}
.dtext-bar button:hover { color: var(--txt); border-color: var(--muted); }
.dtext-bar button.on { color: var(--txt); border-color: var(--orange); background: rgba(243, 112, 33, .16); }
.dtext-bar .dt-color { width: 15px; height: 15px; min-width: 0; border-radius: 50%; border-width: 2px; }
.dtext-bar .dt-color.on { box-shadow: 0 0 0 2px rgba(243, 112, 33, .55); }
.dtext-bar .dt-ok { color: var(--orange); font-size: 13px; }
.dtext-bar .dt-sep { width: 1px; height: 15px; background: var(--line); margin: 0 3px; }
.dtext-input {
  min-width: 130px; max-width: 320px; min-height: 22px;
  padding: 4px 8px; border-radius: 8px;
  border: 1px dashed var(--orange);
  font-family: "Schibsted Grotesk", sans-serif; line-height: 1.35;
  outline: none; white-space: pre-wrap; overflow-wrap: anywhere;
}
.dtext-input:empty::before { content: attr(data-vide); color: var(--muted); font-weight: 500; }

/* la palette de l'outil Émoji : six colonnes, rangées par usage */
.emoji-pal {
  position: fixed; z-index: 320;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  padding: 8px; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
.emoji-pal button {
  border: none; background: none; cursor: pointer;
  font-size: 20px; padding: 4px 6px; border-radius: 8px;
  transition: background .1s var(--ease), transform .1s var(--ease);
}
.emoji-pal button:hover { background: rgba(243, 112, 33, .16); transform: scale(1.18); }
.pane-bar {
  display: flex; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.pane-bar::-webkit-scrollbar { display: none; }
.pane-bar .tf { flex-shrink: 0; }
.tf {
  padding: 3px 9px; border-radius: 6px; border: 1px solid transparent;
  background: none; color: var(--muted); font-size: 12px; font-weight: 600;
}
.tf.active { color: var(--orange); border-color: var(--orange); background: rgba(243, 112, 33,.08); }
/* le filet entre les gestes d'affichage (⟲ ⛶ ▢ ⧉) et les réglages (⏱ 🔔 ⚙) */
.pane-bar .tfsep { flex: 0 0 1px; height: 16px; align-self: center; background: var(--line); }
.chart { flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: none; }
.chart-overlay {
  position: absolute; top: 6px; left: 8px; z-index: 6; pointer-events: none;
  font-size: 12px; font-weight: 600; color: #cfd3dd;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

/* Décompte de la bougie : contre la colonne de prix, sous l'étiquette du prix
   courant (placerCountdown pose left/top — Ma, 02/10 : « en haut à gauche
   c'est relou »). Chiffres à chasse fixe pour qu'il ne tressaute pas. */
.chart-countdown {
  position: absolute; z-index: 6; pointer-events: none;
  padding: 1px 7px; border-radius: 5px;
  background: rgba(10, 10, 11, .72); border: 1px solid var(--line);
  font: 600 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.chart-countdown[hidden] { display: none; }
.chart-countdown.urgent { color: var(--orange); border-color: var(--orange); }
/* boutons réservés au mobile (TF courant repliable, outils de dessin,
   décompte : sur desktop la topbar porte déjà ces commandes) */
.tfcur, .ttools { display: none; }
/* le décompte se règle sur le graphique, à tout écran (il vivait dans la
   barre du haut, loin de la bougie qu'il mesure) */
.tclock { font-size: 14px; }
.tfgroup { display: flex; gap: 4px; }

.side {
  border-left: 1px solid var(--line); background: var(--bg2);
  display: flex; flex-direction: column; overflow-y: auto;
}
.block { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.block-out { border-bottom: none; }
.block-out .btn { width: 100%; }
@media (min-width: 901px) {
  /* ce bloc n'existe que pour mobile, où la topbar est masquée : sur
     desktop, Mon compte / Se déconnecter vivent déjà dans le menu ☰ —
     affiché partout, l'écran les portait en double (06/10) */
  .block-out { display: none; }
}
.block.grow { flex: 1; }
.block h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
.risk-note { font-size: 11.5px; line-height: 1.45; color: var(--muted); margin-top: 8px; }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 2px 0; }
.kv b { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Balance et Équité affichaient deux montants différents sans un mot : la
   glose tient sous le libellé, pas seulement au survol (au doigt, le survol
   n'existe pas) — §3.1. Elle ne s'affiche QU'EN mode découverte : pour qui
   vient de MT5, trois sous-titres dans le panneau sont du bruit. */
.kv span { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.kv span small { display: none; font-size: 10.5px; color: var(--muted); opacity: .85; }
html[data-decouverte="1"] .kv span small { display: block; }
.block label { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--muted); font-size: 13px; }
.block label input { width: 130px; padding: 6px 8px; background: var(--bg3); border: 1px solid var(--line); border-radius: 6px; color: var(--txt); }
/* Libellé sur deux lignes : le sigle, puis ce qu'il veut dire. « SL » ne dit
   rien à un débutant, et le survol qui l'expliquait n'existe pas au doigt. */
.block label .fl { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.block label .fl small { font-size: 10.5px; color: var(--muted); opacity: .8; }
.row { display: flex; gap: 8px; margin-top: 6px; }

table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { color: var(--muted); text-align: left; font-weight: 600; padding: 4px 2px; }
td { padding: 5px 2px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
td .mini { padding: 2px 7px; font-size: 11px; border-radius: 5px; }
/* Positions en cartes (gestion type MT5) : entête sens+lots+P&L, sous-ligne
   entrée→courant + SL/TP, actions dépliées au tap (toujours visibles desktop) */
.pos-list { display: flex; flex-direction: column; gap: 8px; }
.pos-empty { color: var(--muted); font-size: 12px; }
/* cumul en tête de liste : PnL flottant total + lots, et « Tout fermer » */
.pos-cumul {
  display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 11px;
}
.pos-cumul .pos-pnl { font-size: 15px; }
.pos-cumul-sub { flex: 1; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pos-close-all { border-color: var(--red); color: var(--red); }
.pos-card { background: var(--bg3); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }
/* position épinglée : la carte s'allume comme ses lignes sur le graphique */
.pos-card.visee { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange) inset; }
.pos-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.pos-id { flex: 1; display: flex; align-items: baseline; gap: 7px; font-size: 13px; }
.pos-sym { color: #fff; }
.pos-id .pos-buy, .pos-id .pos-sell { font-size: 12px; text-transform: uppercase; }
.pos-pnl { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.pos-caret { color: var(--muted); font-size: 13px; transition: transform .15s var(--ease); }
.pos-card.open .pos-caret { transform: rotate(180deg); }
.pos-sub {
  display: flex; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap;
  color: var(--muted); font-size: 11.5px; margin-top: 2px; font-variant-numeric: tabular-nums;
}
.pos-actions { display: none; gap: 4px; margin-top: 9px; }
.pos-card.open .pos-actions { display: flex; }
.pos-actions .mini { flex: 1; padding: 6px 0; text-align: center; }
@media (min-width: 901px) {
  /* desktop : tous les boutons visibles en permanence sous chaque position */
  .pos-actions { display: flex; }
  .pos-caret { display: none; }
}
.pos-buy { color: var(--blue); font-weight: 700; }
.pos-sell { color: var(--red); font-weight: 700; }
.pnl-pos { color: var(--blue); }
.pnl-neg { color: var(--red); }

/* Modales maison */
/* Une modale et une feuille d'actions sont des QUESTIONS : elles doivent être
   répondues, donc elles passent au-dessus de la barre du haut et des onglets
   (210). Les panneaux, eux, sont des PAGES : ils restent dessous, pour qu'on
   puisse toujours naviguer ailleurs. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(4, 6, 10, .72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .12s ease;
}
.modal {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; width: 400px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 40px); overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 40px rgba(243, 112, 33,.07);
  animation: pop .15s ease;
}
@keyframes pop { from { transform: scale(.95) translateY(8px); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }
.modal-title { font-family: "Fraunces", Georgia, serif; font-weight: 500; color: var(--txt); font-size: 18px; letter-spacing: -.01em; margin-bottom: 4px; }
.modal-msg { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.modal-field { margin-bottom: 10px; text-align: left; }
.modal-field input { margin-bottom: 0; }
.modal-label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.modal-hint { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.radio-cards { display: flex; gap: 8px; }
.radio-card {
  flex: 1; display: flex; gap: 8px; align-items: flex-start;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px; cursor: pointer; font-size: 12px; color: var(--txt);
}
.radio-card b { color: #fff; font-size: 12px; }
.radio-card small { display: block; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.radio-card input { width: auto; margin: 2px 0 0; accent-color: var(--orange); }
.radio-card:has(input:checked) { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange), 0 0 14px rgba(243, 112, 33,.15); }
.radio-cards.vertical { flex-direction: column; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
/* Les trois registres d'une fenêtre qui avertit (audit œil-70ans, point 02) :
   le FAIT en gros, l'ALERTE encadrée, l'APAISEMENT en petit gris. Aplatis en
   un seul paragraphe, ils se lisaient comme un mur et l'avertissement qui
   comptait se perdait au milieu. */
.modal-fort { color: var(--txt); font-size: calc(17px + var(--fs)); line-height: 1.35; font-weight: 600; }
.modal-fort-sous { color: var(--muted); font-size: calc(13px + var(--fs)); line-height: 1.45; margin-top: 3px; }
.modal-encadre {
  margin: 4px 0 2px; padding: 11px 13px; border-radius: 8px; text-align: left;
  background: rgba(243, 112, 33, .07); border: 1px solid rgba(243, 112, 33, .45);
  color: var(--txt); font-size: calc(14px + var(--fs)); line-height: 1.5;
}
.modal-note { color: var(--muted); font-size: calc(12px + var(--fs)); line-height: 1.5; }
/* le lien discret du bas : il faut le viser pour l'atteindre */
.modal-lien {
  display: block; margin: 12px auto 0; padding: 4px 6px;
  background: none; border: none; color: var(--muted); font: inherit;
  font-size: calc(12px + var(--fs));
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.modal-lien:hover { color: var(--orange); }
.modal-pied { margin-top: 10px; color: var(--muted); font-size: calc(11.5px + var(--fs)); line-height: 1.5; }
.modal .btn.primary { width: auto; margin-bottom: 0; }
.btn.primary.danger { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 0 18px rgba(229,72,77,.35); }

/* Feuille d'actions d'une position (appui long sur sa ligne / clic droit) */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 310;
  background: rgba(4, 6, 10, .55); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .12s ease;
}
.sheet {
  width: 100%; max-width: 480px;
  background: #101014; border: 1px solid var(--line); border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .65);
  animation: slideUp .18s var(--ease);
}
@keyframes slideUp { from { transform: translateY(30%); opacity: .5; } }
.sheet .grab { width: 38px; height: 4px; border-radius: 2px; background: #2a2d38; margin: 0 auto 12px; }
.s-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.s-head .pos-buy, .s-head .pos-sell { font-size: 15px; }
.s-sym { color: #fff; font-weight: 700; flex: 1; }
.s-pnl { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.s-sub { color: var(--muted); font-size: 12px; margin: 4px 0 14px; }
.s-row { display: flex; gap: 8px; margin-bottom: 8px; }
.s-btn {
  flex: 1; padding: 13px 0; text-align: center; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg3);
  color: var(--txt); font-size: 14px; font-weight: 600;
}
.s-btn small { display: block; color: var(--muted); font-size: 10px; font-weight: 500; margin-top: 2px; }
.s-btn.be { border-color: var(--orange); color: var(--orange); }
.s-btn.be small { color: rgba(243, 112, 33, .75); }
.s-btn.danger { background: rgba(214, 72, 54, .12); border-color: var(--red); color: var(--red); font-weight: 800; }
.s-btn.cancel { background: none; border-color: transparent; color: var(--muted); }

#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--bg3); border: 1px solid var(--orange); color: #fff;
  padding: 10px 18px; border-radius: 10px; z-index: 400;
  box-shadow: 0 0 24px rgba(243, 112, 33,.3);
}

/* Admin */
.admin-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.admin-wrap h2 { font-family: "Fraunces", Georgia, serif; font-weight: 500; color: var(--txt); margin: 26px 0 12px; font-size: 19px; letter-spacing: -.01em; }
.badge { padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge.pending { background: rgba(243, 112, 33,.15); color: var(--orange); }
.badge.active { background: rgba(77,144,224,.15); color: var(--blue); }
.badge.blocked { background: rgba(229,72,77,.15); color: var(--red); }
.badge.expired { background: rgba(123,130,150,.2); color: var(--muted); }
.admin-wrap td, .admin-wrap th { padding: 8px 6px; font-size: 13px; }
.limit-hit { color: var(--red); font-weight: 700; }

/* Fiche marché (réels 8h30 / 19h) — panneau admin */
.brief-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.brief-bar select {
  background: var(--bg3); color: var(--txt); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px;
}
#brief-script {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; white-space: pre-wrap; word-break: break-word;
  font: inherit; line-height: 1.7; user-select: text;
}
.brief-out { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.brief-out #brief-script { flex: 1 1 340px; margin: 0; }
.brief-charts { flex: 1 1 380px; display: flex; flex-direction: column; gap: 14px; }
.brief-fig { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.brief-fig canvas {
  width: 100%; height: auto;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  cursor: zoom-in;
}
/* plein écran au clic, comme les captures des élèves (.msg-shot.zoom) */
.brief-fig canvas.zoom {
  position: fixed; inset: 0; z-index: 120; width: 100vw; height: 100vh;
  object-fit: contain; background: rgba(5, 6, 10, .95);
  cursor: zoom-out; border: none; border-radius: 0;
}

/* Kanban admin */
.board-wrap { padding: 18px 16px 6px; overflow-x: auto; }
.board { display: flex; gap: 14px; align-items: flex-start; min-height: 300px; }
.board-hint { color: var(--muted); font-size: 12px; margin: 10px 2px 0; }
.col {
  width: 280px; min-width: 280px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
}
.col.special { border-color: rgba(243, 112, 33, .45); }
.col-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--line); }
.col-title {
  display: flex; justify-content: space-between; align-items: center;
  color: #fff; font-weight: 700; font-size: 14px;
}
.col.special .col-title { color: var(--orange); }
.col-title .count {
  color: var(--muted); font-weight: 600; font-size: 12px;
  background: var(--bg3); border-radius: 10px; padding: 0 7px; margin-left: 6px;
}
.col-cards {
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
  min-height: 70px; border-radius: 0 0 12px 12px;
}
.col-cards.dragover { outline: 2px dashed var(--orange); outline-offset: -6px; background: rgba(243, 112, 33,.06); }
.col-empty {
  color: var(--muted); font-size: 12px; text-align: center;
  padding: 16px 8px; border: 1px dashed var(--line); border-radius: 8px;
}
.kcard {
  background: var(--bg3); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px; cursor: grab;
}
.kcard:active { cursor: grabbing; }
.kcard.dragging { opacity: .45; }
.kcard .mail { color: #fff; font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.kcard .meta {
  color: var(--muted); font-size: 12px; margin-top: 5px;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.kcard .actions { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.chip {
  display: inline-block; background: rgba(243, 112, 33,.1); color: var(--orange);
  border-radius: 12px; padding: 1px 8px; font-size: 11px; margin: 4px 3px 0 0;
}
.chip.muted { background: var(--bg); color: var(--muted); }
.col-new {
  background: none; border: 1px dashed var(--line); color: var(--muted);
  min-height: 90px; font: inherit; font-weight: 600; cursor: pointer; border-radius: 12px;
}
.col-new:hover { border-color: var(--orange); color: var(--orange); }
.btn.mini { padding: 3px 8px; font-size: 11px; border-radius: 6px; }

/* Messages des élèves (admin) : question + capture du graphique */
.msg-list { display: flex; flex-direction: column; gap: 10px; }
.msg-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.msg-card.unread { border-color: var(--orange); box-shadow: 0 0 14px rgba(243, 112, 33, .12); }
.msg-head { display: flex; align-items: center; gap: 10px; }
.msg-head b { color: #fff; overflow-wrap: anywhere; }
.msg-head .meta { color: var(--muted); font-size: 12px; flex: 1; }
.msg-body { margin: 6px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-shot {
  display: block; width: 100%; max-width: 340px;
  border: 1px solid var(--line); border-radius: 8px; cursor: zoom-in;
}
.msg-shot.zoom {
  position: fixed; inset: 0; z-index: 120; width: 100vw; height: 100vh;
  max-width: none; object-fit: contain; background: rgba(5, 6, 10, .95);
  cursor: zoom-out; border: none; border-radius: 0;
}
/* carte kanban d'un élève avec question non lue */
.kcard.has-msg {
  border-color: var(--orange); background: rgba(243, 112, 33, .07);
  box-shadow: 0 0 12px rgba(243, 112, 33, .18);
}

/* visible uniquement sur écran tactile (là où le drag & drop n'existe pas) */
.touch-only { display: none; }
@media (hover: none), (pointer: coarse) {
  .touch-only { display: inline-block; }
}

/* ---------- Mobile ---------- */
.mobile-bar { display: none; }
#mobile-tabs { display: none; }

@media (max-width: 900px) {
  /* barre d'ordre fixe : BUY/SELL toujours sous le pouce, prix en direct */
  .mobile-bar {
    display: flex; gap: 8px; align-items: stretch;
    position: fixed; left: 0; right: 0; z-index: 60;
    bottom: calc(48px + env(safe-area-inset-bottom)); /* au-dessus des onglets */
    padding: 8px 12px;
    background: rgba(13, 15, 20, .93); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
  }

  /* Onglets bas type MT5 : logo à gauche, icônes orange, barre compacte */
  #mobile-tabs {
    display: flex; align-items: center; gap: 4px;
    /* z-index au-dessus des panneaux (200) : sur mobile le carnet occupe tout
       l'écran, et sans cette barre l'élève n'a aucun moyen d'aller ailleurs. */
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
    height: calc(48px + env(safe-area-inset-bottom));
    padding: 0 12px env(safe-area-inset-bottom);
    background: rgba(13, 15, 20, .97); border-top: 1px solid var(--line);
  }
  #mobile-tabs .tabs-logo {
    height: 30px; width: auto; margin-right: 8px;
    filter: drop-shadow(0 0 8px rgba(243, 112, 33, .3));
  }
  #mobile-tabs button {
    flex: 1; height: 100%; background: none; border: none; color: var(--muted);
    font-size: 10px; font-weight: 600; letter-spacing: .03em;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  }
  #mobile-tabs .ic { width: 20px; height: 20px; color: var(--orange); opacity: .45; }
  #mobile-tabs button.active { color: var(--orange); }
  #mobile-tabs button.active .ic { opacity: 1; }

  /* un seul écran à la fois, comme MT5 */
  #view-app.m-chart .side { display: none; }
  #view-app.m-trade #drawbar, #view-app.m-trade #charts, #view-app.m-trade .mobile-bar { display: none; }

  /* (la minuterie ma-minute remplace les anciens boutons flottants « Ma » :
     sa position mobile vit dans ma-minute.css) */
  /* façon MT5 : SELL | lots | BUY, boutons compacts */
  .mobile-bar input {
    width: 76px; text-align: center; font-size: 16px;
    background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; color: var(--txt);
  }
  .mobile-bar .btn {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 0; padding: 4px 6px; font-size: 13px; line-height: 1.3;
  }
  .mobile-bar .btn small { font-size: 10.5px; font-weight: 600; opacity: .85; font-variant-numeric: tabular-nums; }
  .side { padding-bottom: calc(60px + env(safe-area-inset-bottom)); } /* pas sous les onglets */

  /* façon MT5 : pas de topbar, le chart occupe tout l'écran */
  .topbar { display: none; }

  /* App élève : chart au-dessus (plein écran utile), panneau en dessous,
     la page défile verticalement. */
  .layout { display: flex; flex-direction: column; height: auto; overflow: visible; }
  /* rail de dessin masqué par défaut, affiché via l'icône ✎ (objets MT5) */
  #drawbar {
    display: none;
    flex-direction: row; border-right: none; border-bottom: 1px solid var(--line);
    padding: 4px 8px; overflow-x: auto; scrollbar-width: none;
  }
  body.show-drawbar #drawbar { display: flex; }
  #drawbar::-webkit-scrollbar { display: none; }
  #drawbar .dtool { flex: 0 0 auto; }
  #drawbar hr { width: auto; height: 40px; border-top: none; border-left: 1px solid var(--line); margin: 0 4px; flex: 0 0 auto; }
  #charts { grid-auto-flow: row; min-height: 0; }
  /* onglet Graphique : chart plein écran (il ne reste que la barre BUY/SELL
     et les onglets en bas), sans défilement */
  .pane { height: calc(100dvh - 100px - env(safe-area-inset-bottom)); min-height: 300px; }
  /* la barre replay reste visible en haut (la topbar, elle, est masquée) */
  #view-app.replay-on .pane { height: calc(100dvh - 100px - 44px - env(safe-area-inset-bottom)); }
  #replay-bar { padding: 6px 10px; gap: 8px; }
  .rp-tools { gap: 6px; }
  /* barre compacte : tout doit tenir sans écraser le graphique */
  .rp-btn { padding: 3px 8px; font-size: 12px; }
  .rp-btn.wide { padding: 3px 8px; font-size: 11.5px; }
  #rp-speed { padding: 2px 4px; font-size: 11.5px; }
  #rp-clock { font-size: 11.5px; }
  .rp-exit { padding: 3px 10px; font-size: 11.5px; }
  .rp-badge { display: none; } /* l'onglet Replay actif suffit comme repère */
  /* barre unique compacte : TF courant repliable + outils + ⟲ + split */
  .tf { padding: 8px 12px; font-size: 13px; }
  .tffit { padding: 5px 14px; }
  .tsplit { display: none; } /* le split n'a pas de sens sur un écran de téléphone */
  .tfcur {
    display: inline-flex; align-items: center;
    font-weight: 700; color: var(--txt); border-color: var(--line); background: var(--bg3);
  }
  .ttools { display: inline-flex; align-items: center; font-size: 15px; padding: 5px 12px; }
  .tclock { display: inline-flex; align-items: center; font-size: 15px; padding: 5px 12px; }
  .tfgroup { display: none; }
  .pane-bar.open .tfgroup { display: flex; gap: 4px; }
  .side { border-left: none; border-top: 2px solid var(--line); overflow: visible; }
  #symbol-block-m:not([hidden]) { display: block; }
  .block label input { width: 46vw; max-width: 200px; padding: 9px 10px; }
  /* cartes de position : P&L bien lisible, gros boutons d'action */
  .pos-card { padding: 11px 12px; }
  .pos-pnl { font-size: 16px; }
  .pos-actions { gap: 6px; flex-wrap: wrap; }
  .pos-actions .mini { padding: 12px 0; font-size: 13px; min-width: 52px; }
}

@media (max-width: 700px) {
  /* évite le zoom automatique iOS sur les champs */
  form input, .block label input { font-size: 16px; }

  /* (topbar déjà masquée sur mobile) */

  /* Kanban admin : colonnes empilées — tous les élèves se lisent en faisant
     défiler la page, sans balayage horizontal à découvrir */
  .board { flex-direction: column; align-items: stretch; min-height: 0; }
  .board-wrap { overflow-x: visible; }
  .col { width: auto; min-width: 0; }
  /* une colonne « En attente » vide n'apprend rien : elle passe derrière,
     les groupes remplis d'élèves arrivent sous le pouce en premier —
     et « + Nouveau groupe » ferme toujours la liste */
  .col.special:has(.col-empty) { order: 9; }
  .col-new { order: 10; }
  .radio-cards { flex-direction: column; }
  .admin-wrap { overflow-x: auto; }
}

/* ---------- niveaux Ma-Methode ---------- */
.modal { max-height: 88vh; overflow-y: auto; }
.modal-heading { color: var(--txt); font-size: 13px; font-weight: 600; margin-top: 6px; padding-top: 10px; border-top: 1px solid #232837; }
.check-line { display: flex; align-items: center; gap: 8px; color: var(--txt); font-size: 13px; cursor: pointer; }
.check-line input { width: auto; margin: 0; accent-color: var(--orange); }
.tffit {
  margin-left: auto; font-size: 19px; line-height: 1;
  padding: 2px 12px; color: var(--txt);
  border-color: var(--line); background: var(--bg3);
}
.tffit:hover { color: var(--orange); border-color: var(--orange); }
.tsplit {
  font-size: 15px; line-height: 1; padding: 3px 11px;
  color: var(--txt); border-color: var(--line); background: var(--bg3);
}
.tsplit:hover, .tsplit.active { color: var(--orange); border-color: var(--orange); }

/* ---------- multi-écran : graphique détaché ---------- */

.tdetach {
  font-size: 14px; line-height: 1; padding: 3px 11px;
  color: var(--txt); border-color: var(--line); background: var(--bg3);
}
.tdetach:hover { color: var(--orange); border-color: var(--orange); }

/* pastilles « graphique parti sur l'autre écran » (clic = rattacher) */
.det-chips { display: flex; gap: 8px; }
.det-chip {
  padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--orange); background: rgba(243, 112, 33, .08);
  border: 1px solid rgba(243, 112, 33, .45);
}
.det-chip:hover { background: rgba(243, 112, 33, .18); }

#charts-empty {
  align-self: center; justify-self: center; text-align: center;
  color: var(--muted); font-size: 13px; line-height: 1.7; padding: 20px;
}

/* Fenêtre détachée : le graphique et ses outils, rien d'autre — elle se pilote
   depuis la fenêtre principale (ordres, positions, règles du jour). */
body.detached .layout { grid-template-columns: 68px minmax(0, 1fr); }
body.detached .side,
body.detached .mobile-bar,
body.detached #mobile-tabs,
body.detached #btn-journal,
body.detached #btn-account,
body.detached .symbol-sel,
body.detached .tsplit,
body.detached #btn-replay,
/* se déconnecter depuis une fenêtre détachée invaliderait la session de la
   fenêtre principale : on ne l'y propose pas */
body.detached #btn-logout { display: none; }
body.detached .topbar { padding: 8px 14px; }

/* le détachement suppose plusieurs écrans : sans objet sur un téléphone */
@media (max-width: 900px) {
  .tdetach, .det-chips { display: none; }
}

/* ---------- ajouts V2 : journal, ordres programmés, panneaux ---------- */

/* lien discret sous le formulaire de connexion */
.linkish {
  display: block; margin: 10px auto 0; padding: 0;
  background: none; border: none; color: var(--muted);
  font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--orange); }

/* sélecteur d'instrument dans la topbar (masqué s'il n'y a qu'un symbole) */
.symbol-sel {
  background: var(--bg3); color: #fff; font-weight: 700;
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px;
}
.symbol-sel:disabled { opacity: 1; border-color: transparent; background: none; -webkit-appearance: none; appearance: none; }

/* segmenté « Marché / Limite / Stop » */
.seg { display: flex; gap: 4px; margin-bottom: 10px; }
.seg button {
  flex: 1; padding: 5px 0; font-size: 12px; border-radius: 7px;
  background: var(--bg3); border: 1px solid var(--line); color: var(--muted);
}
.seg button.active { color: var(--orange); border-color: var(--orange); background: rgba(243, 112, 33, .08); }
.ord-note { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--muted); }

/* ordres en attente */
.pending-card .pend-price { color: var(--orange); font-weight: 700; font-variant-numeric: tabular-nums; }
.pos-actions.always { display: flex; gap: 6px; margin-top: 8px; }

/* badge de réponses non lues (porté par la minuterie ma-minute, en fixed,
   qui ancre aussi le badge) */
.ma-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--orange); color: var(--bg);
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
/* badge « retour de Ma » sur le bouton Cours — même habit que .ma-badge,
   classe à part : refreshMaBadge écrit les .ma-badge avec le compte du fil */
.copies-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--orange); color: var(--bg);
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
#btn-cours, #btn-cours-m { position: relative; }
/* le badge des devoirs de replay (panels.js) emprunte le même habit */
#btn-replay, #btn-replay-m { position: relative; }
/* ---------- alertes de prix (panneau 🔔) ---------- */
.alerte-form { display: flex; gap: 8px; margin: 10px 0 14px; }
.alerte-form input:first-child { width: 110px; }
.alerte-form input { flex: 1; background: var(--bg2, #16171c); color: inherit;
  border: 1px solid var(--line, #2a2c33); border-radius: 8px; padding: 8px 10px; font: inherit; }
.alerte-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 4px 0;
  border: 1px solid var(--line, #2a2c33); border-radius: 8px; background: rgba(255, 255, 255, .04);
}
.alerte-row .alerte-quoi { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alerte-row .alerte-etat { color: var(--muted, #9aa0ae); font-size: 12.5px; white-space: nowrap; }
.alerte-row.sonnee { opacity: .75; }
.alerte-row.sonnee .alerte-etat { color: #e8b04c; }
/* l'interrupteur de la sonnerie : au-dessus de la liste, avec le formulaire */
.alerte-son {
  display: flex; align-items: center; gap: 8px; margin: -6px 0 12px;
  color: var(--muted, #9aa0ae); font-size: 13px; cursor: pointer;
}
.alerte-son input { accent-color: var(--orange, #f37021); cursor: pointer; }
/* le badge du 🔔 emprunte l'habit de .copies-badge — le bouton doit l'ancrer */
#btn-alertes { position: relative; }
/* les devoirs de backtest, côté admin */
.bt-assign {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 6px 0;
  border: 1px solid var(--line, #2a2c33); border-radius: 8px;
}
.bt-assign span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- panneaux plein écran (carnet, fil, compte) ---------- */

.panel-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px);
}
.panel {
  width: min(980px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 30px 80px -30px #000;
}
.panel-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.panel-head h2 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 19px; }
.panel-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.panel-close {
  margin-left: auto; background: none; border: 1px solid var(--line);
  color: var(--muted); border-radius: 8px; padding: 3px 9px;
}
.panel-close:hover { color: var(--txt); border-color: var(--txt); }
.panel-body { padding: 16px 18px 22px; overflow: auto; }
.panel-controls { display: flex; gap: 6px; margin-bottom: 14px; }
.panel-empty { color: var(--muted); font-size: 13px; padding: 18px 0; }

/* tuiles de statistiques */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.stat {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 10px;
}
.stat-l { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stat-v { font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.stat.pos .stat-v { color: var(--blue); }
.stat.neg .stat-v { color: var(--red); }

/* courbe de résultat cumulé */
.equity-box { margin-top: 16px; }
.equity-box h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.equity { width: 100%; height: 150px; display: block; }
.equity-line { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.equity-line.pos { stroke: var(--blue); }
.equity-line.neg { stroke: var(--red); }
.equity-fill { stroke: none; opacity: .16; }
.equity-fill.pos { fill: var(--blue); }
.equity-fill.neg { fill: var(--red); }
.equity-pt.pos { fill: var(--blue); }
.equity-pt.neg { fill: var(--red); }
.equity-depart { fill: var(--bg2); stroke: var(--muted); stroke-width: 1.5; }
.equity-lib { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.equity-lib.end { text-anchor: end; fill: var(--txt); font-weight: 600; font-size: 12px; }
.equity-zero { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* le pire creux, marqué sur la courbe (28/09) : la bande dit OÙ, la descente
   redit COMBIEN — le chiffre du bilan devient vérifiable à l'œil */
.equity-dd-zone { fill: var(--red); opacity: .1; }
.equity-dd-line { fill: none; stroke: var(--red); stroke-width: 3; vector-effect: non-scaling-stroke; opacity: .85; }
.equity-dd-fond { fill: var(--red); stroke: var(--bg2); stroke-width: 1.5; }

/* ── le bilan : un verdict, puis les chiffres (24/09) ────────────────────
   Douze tuiles du même poids ne disaient pas par où commencer : la hiérarchie
   est maintenant dans le CSS autant que dans le texte. */
.bilan-verdict {
  display: flex; align-items: center; gap: 22px; padding: 15px 17px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(77, 144, 224, .13), rgba(77, 144, 224, .02));
  border: 1px solid rgba(77, 144, 224, .3);
}
.bilan-verdict.perd {
  background: linear-gradient(90deg, rgba(214, 72, 54, .13), rgba(214, 72, 54, .02));
  border-color: rgba(214, 72, 54, .3);
}
.bilan-verdict.plat { background: var(--bg3); border-color: var(--line); }
.bilan-net {
  font-size: 32px; font-weight: 600; line-height: 1; color: var(--blue);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bilan-verdict.perd .bilan-net { color: var(--red); }
.bilan-verdict.plat .bilan-net { color: var(--txt); }
.bilan-net small {
  display: block; font-size: 10.5px; font-weight: 400; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; margin-top: 7px;
}
.bilan-say b { font-size: 16px; }
.bilan-say p { color: var(--muted); font-size: 13px; margin-top: 2px; }
.bilan-pills { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.bilan-pill { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.bilan-pill.g { border-color: rgba(77, 144, 224, .4); color: var(--blue); }
.bilan-pill.r { border-color: rgba(214, 72, 54, .4); color: var(--red); }

.bilan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.bilan-card { background: var(--bg3); border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; }
.bilan-card-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.bilan-card-h b { font-size: 13.5px; }
.bilan-cnt { font-size: 13px; color: var(--muted); }
.bilan-tot { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.bilan-card dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 13px; }
.bilan-card dt { color: var(--muted); }
.bilan-card dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bilan-none { color: var(--muted); font-size: 12.8px; }

/* Le pire creux (Anthony, 28/09) : posé sous la courbe, du même poids qu'une
   carte de gains — c'est le chiffre qui explique les méthodes coupées trop
   tôt. Teinté rouge quand il y a eu un creux, neutre quand il n'y en a pas :
   une courbe qui n'a jamais reculé n'est pas un avertissement. */
.bilan-dd {
  margin-top: 12px; padding: 11px 14px; border-radius: 11px; font-size: 13px;
  background: rgba(214, 72, 54, .07); border: 1px solid rgba(214, 72, 54, .3);
}
.bilan-dd.calme { background: var(--bg3); border-color: var(--line); }
.bilan-dd-h { display: flex; align-items: baseline; gap: 10px; }
.bilan-dd-lib { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.bilan-dd-h b { font-size: 18px; font-variant-numeric: tabular-nums; }
.bilan-dd p { color: var(--muted); font-size: 12.8px; margin-top: 4px; }

.bilan-tenue {
  margin-top: 12px; padding: 10px 14px; background: var(--bg3); border: 1px solid var(--line);
  border-radius: 11px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 5px 22px;
}
.bilan-tenue b { font-variant-numeric: tabular-nums; }
.bilan-k { color: var(--muted); }

/* Le bilan des annonces (Anthony, 27/09) : ce que la fenêtre des news coûte,
   en face de ce que rapporte le reste. */
.bilan-eco {
  margin-top: 12px; padding: 11px 14px; border-radius: 11px;
  background: rgba(77, 144, 224, .06); border: 1px solid rgba(77, 144, 224, .26);
}
.bilan-eco-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.bilan-eco-h b { font-size: 13.5px; }
.bilan-eco-ic { font-size: 14px; }
.bilan-eco-say { margin: 0; font-size: 13px; }
.bilan-eco-paliers {
  margin-top: 10px; display: grid; gap: 7px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.bilan-eco-pal {
  padding: 7px 10px; border-radius: 9px; background: var(--bg3); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px; font-size: 12.5px;
}
.bilan-eco-lib { color: var(--muted); font-size: 11.5px; }
.bilan-eco-net { font-variant-numeric: tabular-nums; }
.bilan-eco-garde { margin: 9px 0 0; font-size: 12px; color: var(--muted); }

.bilan-garde {
  margin-top: 12px; display: flex; gap: 11px; padding: 10px 14px; border-radius: 11px;
  background: rgba(243, 112, 33, .08); border: 1px solid rgba(243, 112, 33, .28); font-size: 13px;
}
.bilan-ic { color: var(--orange); font-size: 15px; line-height: 1.3; }

.bilan-detail { margin-top: 12px; background: var(--bg3); border: 1px solid var(--line); border-radius: 11px; }
.bilan-detail summary { cursor: pointer; padding: 10px 14px; font-size: 13px; color: var(--muted); list-style: none; }
.bilan-detail summary::-webkit-details-marker { display: none; }
.bilan-detail summary::before { content: "▸ "; color: var(--orange); }
.bilan-detail[open] summary::before { content: "▾ "; }
.bilan-detail-in { padding: 0 14px 14px; }
.bilan-detail dl { display: grid; grid-template-columns: 190px 110px 1fr; gap: 8px 14px; font-size: 13px; align-items: baseline; }
.bilan-detail dt { color: var(--txt); }
.bilan-val { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.bilan-detail dd { color: var(--muted); font-size: 12.5px; }
@media (max-width: 760px) {
  .bilan-verdict { flex-direction: column; align-items: flex-start; gap: 10px; }
  .bilan-cards { grid-template-columns: 1fr; }
  .bilan-detail dl { grid-template-columns: 1fr auto; }
  .bilan-detail dd { grid-column: 1 / -1; }
}

/* tableau des trades */
.trade-table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 13px; }
.trade-table th {
  text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.trade-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.trade-table tr.open-row td { color: var(--muted); font-style: italic; }
.trade-table .pnl-pos { color: var(--blue); font-weight: 600; }
.trade-table .pnl-neg { color: var(--red); font-weight: 600; }
/* comment le trade s'est fermé, d'après le deal broker (SL / TP / SO) */
.exit-why {
  margin-left: 6px; padding: 1px 5px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; vertical-align: 1px;
  background: rgba(154, 160, 173, .18); color: var(--muted);
}
.exit-why.exit-sl { background: rgba(231, 76, 56, .15); color: var(--red); }
.exit-why.exit-tp { background: rgba(86, 156, 240, .15); color: var(--blue); }
.exit-why.exit-so { background: rgba(231, 76, 56, .3); color: var(--red); }

/* fil de discussion avec Ma */
/* mon compte */
.account-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.account-card { background: var(--bg3); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.account-card h3 { font-size: 13px; margin-bottom: 6px; color: #fff; }
.account-card p { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }

/* barre replay : boutons texte (aller à, rejouer, bilan) */
.rp-btn.wide { padding: 3px 10px; font-size: 12px; }

@media (max-width: 900px) {
  .panel-overlay { padding: 0; }
  .panel { max-height: 100vh; height: 100%; border-radius: 0; border: none; }
  .panel-body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .trade-table { font-size: 12px; }
  .trade-table th:nth-child(5), .trade-table td:nth-child(5),
  .trade-table th:nth-child(6), .trade-table td:nth-child(6) { display: none; }
}

/* ---------- admin : réponses aux messages, actions sensibles ---------- */

.msg-reply {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: rgba(243, 112, 33, .07); border-left: 3px solid var(--orange);
}
.msg-reply b { color: var(--orange); font-size: 12px; }
.msg-reply p { white-space: pre-wrap; margin: 4px 0 8px; }
.msg-card .btn.mini { margin-top: 10px; padding: 4px 12px; font-size: 12px; }
.danger-mini { color: var(--red) !important; border-color: rgba(214, 72, 54, .5) !important; }
.danger-mini:hover { background: rgba(214, 72, 54, .12) !important; }
.panel-note {
  margin-top: 12px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px;
  color: var(--orange); background: rgba(243, 112, 33, .08);
}

/* ordre en attente : rappeler qu'il vit chez le broker, pas dans l'app */
.pend-where { margin-top: 4px; font-size: 11px; color: var(--muted); }

/* ---------- accordéon d'un trade dans le carnet ---------- */

.trade-row { cursor: pointer; }
.trade-row:hover td { background: rgba(255, 255, 255, .03); }
.trade-row.is-open td { background: rgba(243, 112, 33, .07); }
.trade-row:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

.trade-drawer > td { padding: 0 !important; background: rgba(0, 0, 0, .25); }
.trade-details { padding: 14px 16px 18px; }

.trade-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 12px;
  font-size: 12px; color: var(--muted);
}
.trade-meta span {
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg3); border: 1px solid var(--line);
}

/* Chronologie : une note par événement, la barre de gauche donne la nature */
.trade-events { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.trade-events li {
  display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: baseline;
  padding: 6px 10px; border-left: 3px solid var(--line); border-radius: 0 6px 6px 0;
  background: rgba(255, 255, 255, .02); font-size: 12.5px;
}
.trade-events .ev-when { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.trade-events .ev-txt { color: #d8dbe4; }
.trade-events li.ev-in { border-left-color: var(--blue); }
.trade-events li.ev-mod { border-left-color: var(--orange); }
.trade-events li.ev-part { border-left-color: #b07de0; }
.trade-events li.ev-out { border-left-color: #5ec26a; }
.trade-events li.ev-hard { border-left-color: var(--red); }

.trade-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.trade-shot { margin: 0; }
.trade-shot img {
  width: 100%; display: block; border-radius: 8px; cursor: zoom-in;
  border: 1px solid var(--line); background: #0b0d12;
}
.trade-shot figcaption {
  margin-top: 5px; font-size: 11.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.trade-noshot { font-size: 12.5px; color: var(--muted); margin: 0; }

/* L'annotation d'un trade (Ma, 26/09) : la zone du tiroir, le ✎ de la ligne */
.trade-note { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.trade-note-inp {
  flex: 1; padding: 8px 10px; background: var(--bg3);
  border: 1px solid var(--line); border-radius: 8px; color: var(--txt);
  outline: none; resize: vertical; font: inherit; font-size: 12.5px;
}
.trade-note-inp:focus { border-color: var(--orange); }
.trade-note-ro {
  margin: 0 0 12px; padding: 8px 10px; font-size: 12.5px; color: #d8dbe4;
  background: rgba(255, 255, 255, .02); border-left: 3px solid var(--orange);
  border-radius: 0 6px 6px 0;
}
.trade-note-crayon { color: var(--orange); }
.trade-note-dot { margin-left: 6px; color: var(--orange); font-size: 11px; }

/* Le contexte d'annonce (Anthony, 27/09) : un FAIT, pas un jugement — d'où le
   bleu neutre. Le rouge est réservé aux deux minutes autour de la publication,
   le violet à une position tenue à travers l'annonce. */
.trade-eco {
  margin: 0 0 12px; padding: 8px 11px; font-size: 12.5px; color: #d8dbe4;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  background: rgba(77, 144, 224, .07); border-left: 3px solid var(--blue);
  border-radius: 0 6px 6px 0;
}
.trade-eco.chaud { background: rgba(214, 72, 54, .09); border-left-color: var(--red); }
.trade-eco.trav { background: rgba(176, 125, 224, .08); border-left-color: #b07de0; }
.trade-eco small { color: var(--muted); font-size: 11.5px; }
.trade-eco-ic { font-size: 13px; }
.trade-eco-dot { margin-left: 5px; font-size: 10.5px; opacity: .75; }
.trade-eco-dot.chaud { opacity: 1; }

/* Les trois journaux (Anthony, 27/09) : backtests · démo · réel */
.jt-onglets { display: flex; gap: 6px; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
.jt-onglet {
  padding: 7px 14px; border: 0; background: none; cursor: pointer;
  color: var(--muted); font: 600 13px "Schibsted Grotesk", sans-serif;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.jt-onglet:hover { color: var(--txt); }
.jt-onglet.on { color: var(--orange); border-bottom-color: var(--orange); }

/* Les annonces US 3 étoiles (Ma, 27/09) : ligne verticale + bulle au survol */
.eco-rail { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.eco-ligne {
  position: absolute; top: 0; width: 0;
  border-left: 1px dashed rgba(243, 112, 33, .55);
}
.eco-ligne::before {
  content: '📢'; position: absolute; top: 2px; left: -7px;
  font-size: 10px; opacity: .8;
}
.eco-ligne.eco-passee { border-left-color: rgba(243, 112, 33, .32); }

/* Les coutures de session (Anthony, 27/09) : marché fermé entre deux
   bougies — barre rouge à la fermeture (bord gauche), à l'ouverture (bord
   droit), fond colorié ; le week-end appuie plus fort que la nuit */
.seance-fermee {
  position: absolute; top: 0;
  background: rgba(214, 48, 49, .17);
  border-left: 1.5px solid rgba(214, 48, 49, .85);
  border-right: 1.5px solid rgba(214, 48, 49, .85);
}
.seance-fermee.seance-weekend {
  background: repeating-linear-gradient(135deg,
    rgba(214, 48, 49, .16) 0 6px, rgba(214, 48, 49, .28) 6px 12px);
}
.eco-bulle {
  position: fixed; z-index: 10000; pointer-events: none; max-width: 280px;
  background: #12151d; border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 0; font-size: 12.5px; color: var(--txt);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.eco-bulle .eco-annonce { display: grid; gap: 2px; padding: 6px 12px; }
.eco-bulle .eco-annonce + .eco-annonce { border-top: 1px solid var(--line); }
.eco-bulle small { color: var(--muted); }
.eco-bulle span b { color: var(--orange); font-weight: 700; }

/* Les cases de la méthode (Ma, 26/09) : une ligne par question, des pilules */
.trade-crit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.trade-crit-lib { font-size: 12px; color: var(--muted); min-width: 130px; }
.crit-opt {
  padding: 3px 10px; border-radius: 999px; font-size: 12px; cursor: pointer;
  background: var(--bg3); border: 1px solid var(--line); color: var(--muted);
}
.crit-opt:hover { border-color: var(--orange); color: var(--txt); }
.crit-opt.on { border-color: var(--orange); color: var(--orange); background: rgba(243, 112, 33, .12); }
.trade-crit-ro span { border-color: var(--orange); color: var(--txt); }
.trade-crit-ro .crit-ro-non { border-color: var(--red); color: var(--red); }

@media (max-width: 900px) {
  .trade-events li { grid-template-columns: 1fr; gap: 2px; }
  .trade-shots { grid-template-columns: 1fr; }
}

/* LE BADGE DE L'INDICATEUR — façon TradingView : le nom en haut à gauche du
   graphique, sous l'étiquette du symbole et le décompte. Gris discret au
   repos, BLANC au survol (demande d'Anthony, 22/09), et un petit menu pour
   masquer l'indicateur par morceaux. */
.ind-badge { position: absolute; top: 44px; left: 8px; z-index: 7; }
.ind-nom {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 12px/1.5 "Schibsted Grotesk", system-ui, sans-serif;
  color: #6f7686; text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
  transition: color .12s;
}
.ind-badge:hover .ind-nom, .ind-nom:focus-visible { color: #fff; }
/* indicateur entièrement masqué : le nom se barre, comme l'œil fermé de TV */
.ind-badge.eteint .ind-nom { text-decoration: line-through; opacity: .55; }
/* familles masquées par le badge : l'écart se dit sans survol — un
   « Cacher le quadrillage » oublié laissait un écran que rien n'expliquait
   (photo de Ma, 24/09) */
.ind-etat {
  margin-left: 6px;
  font: 600 10.5px/1.5 "Schibsted Grotesk", system-ui, sans-serif;
  color: #f0a04b;
}
.ind-etat[hidden] { display: none; }
.ind-menu {
  position: absolute; top: 20px; left: 0; min-width: 178px; padding: 4px;
  background: rgba(14, 15, 18, .97); border: 1px solid var(--line);
  border-radius: 7px; box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; gap: 1px;
}
.ind-menu[hidden] { display: none; }
.ind-opt {
  background: none; border: 0; border-radius: 5px; cursor: pointer;
  padding: 6px 9px 6px 24px; text-align: left; position: relative;
  font: 500 12.5px/1.4 "Schibsted Grotesk", system-ui, sans-serif;
  color: #c8ccd6;
}
.ind-opt:hover { background: rgba(255, 255, 255, .07); color: #fff; }
/* coché = ce que l'option masque est effectivement caché */
.ind-opt.on::before { content: '✓'; position: absolute; left: 8px; color: #f0a04b; }
.ind-sep { height: 1px; margin: 3px 2px; background: var(--line); }

/* le panneau « Couleurs et épaisseurs » — la fenêtre de réglages TradingView
   en réduit : une ligne par palier (couleur, épaisseur, trait), la grille se
   repeint en direct, et un bouton rend le style de Marine */
.ind-regl {
  position: absolute; top: 20px; left: 0; width: 296px; padding: 7px;
  background: rgba(14, 15, 18, .97); border: 1px solid var(--line);
  border-radius: 7px; box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; gap: 5px;
}
.ind-regl[hidden] { display: none; }
.ind-regl-titre {
  padding: 1px 2px 3px; font: 600 10.5px/1.4 "Schibsted Grotesk", system-ui, sans-serif;
  color: var(--muted); text-transform: uppercase; letter-spacing: .07em;
}
.ind-regl-vide { padding: 4px 2px; font-size: 12px; color: var(--muted); }
.ind-ligne {
  display: grid; grid-template-columns: 1fr 28px 52px 58px; gap: 5px;
  align-items: center;
}
.ind-lib {
  font: 500 12px/1.3 "Schibsted Grotesk", system-ui, sans-serif;
  color: #c8ccd6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ind-ligne input[type=color] {
  width: 26px; height: 20px; padding: 1px; cursor: pointer;
  background: #171a21; border: 1px solid var(--line); border-radius: 4px;
}
.ind-ligne select {
  height: 20px; padding: 0 1px; cursor: pointer; font-size: 11px;
  background: #171a21; color: #c8ccd6; border: 1px solid var(--line);
  border-radius: 4px;
}
.ind-reset {
  margin-top: 2px; padding: 5px 8px; cursor: pointer; border-radius: 5px;
  background: none; border: 1px solid var(--line);
  font: 500 12px/1.3 "Schibsted Grotesk", system-ui, sans-serif; color: #c8ccd6;
}
.ind-reset:hover { background: rgba(255, 255, 255, .07); color: #fff; }

/* « ANALYSES » : le panneau du fork (analyses.js). Même fenêtre que celle des
   couleurs, deux colonnes de plus — le nombre de lignes au-dessus et en
   dessous du prix, qui n'existe que là. */
.ana-regl { width: 352px; }
.ana-ligne { grid-template-columns: 1fr 34px 34px 28px 52px 58px; }
.ana-entete {
  display: grid; grid-template-columns: 1fr 34px 34px 28px 52px 58px; gap: 5px;
  font: 600 10.5px/1 "Schibsted Grotesk", system-ui, sans-serif;
  color: var(--muted); text-align: center;
}
.ana-n {
  width: 100%; height: 20px; padding: 0 2px; text-align: center; font-size: 11px;
  background: #171a21; color: #c8ccd6; border: 1px solid var(--line); border-radius: 4px;
}
/* le menu du clic droit sur une ligne : posé au curseur, donc en position
   fixe — il doit pouvoir déborder du graphique comme n'importe quel menu */
.ana-menu {
  position: fixed; z-index: 60; min-width: 232px; padding: 4px;
  background: rgba(14, 15, 18, .97); border: 1px solid var(--line);
  border-radius: 7px; box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; gap: 1px;
}
.ana-menu-titre {
  padding: 4px 8px 5px; font: 600 11px/1.3 "Schibsted Grotesk", system-ui, sans-serif;
  color: #f0f2f6; border-bottom: 1px solid var(--line); margin-bottom: 2px;
}
.ana-item {
  background: none; border: 0; border-radius: 5px; cursor: pointer;
  padding: 6px 9px; text-align: left;
  font: 500 12.5px/1.4 "Schibsted Grotesk", system-ui, sans-serif; color: #c8ccd6;
}
.ana-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.ana-menu-style { display: flex; gap: 5px; padding: 3px 6px 2px; }
.ana-menu-style input[type=color] {
  width: 26px; height: 20px; padding: 1px; cursor: pointer;
  background: #171a21; border: 1px solid var(--line); border-radius: 4px;
}
.ana-menu-style select {
  height: 20px; padding: 0 1px; cursor: pointer; font-size: 11px;
  background: #171a21; color: #c8ccd6; border: 1px solid var(--line); border-radius: 4px;
}

/* ---------- accès coachés : ce qui est fermé n'existe pas à l'écran ----------
   Les classes sans-* sont posées sur <body> par poserAcces (panels.js)
   d'après /api/me. Le serveur refuse de toute façon les gestes fermés :
   ici on range seulement l'écran — un nouvel élève voit un poste simple,
   pas une armurerie verrouillée. */
.sans-trading #ord-block, .sans-trading #pending-block,
.sans-trading .mobile-bar, .sans-trading .block-risk { display: none !important; }
.sans-replay #btn-replay, .sans-replay #btn-replay-m { display: none !important; }

/* ---------- écran formatrice (/?formatrice=1) ---------- */
/* Ma s'entraîne avec l'écran élève ; le chrome qui n'a pas de sens pour elle
   disparaît : cours élève, messages « à Ma », compte démo. Le Journal RESTE :
   en replay il suit la session de backtest (app.js, ouvrirJournal). */
body.formatrice #btn-cours,
body.formatrice #btn-account { display: none; }
body.formatrice .topbar .brand-tag::after { content: ' · entraînement'; color: #f0a04b; }

/* ---------- backtests archivés (panneau « Mes backtests ») ---------- */
.bt-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.bt-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  border-radius: 8px; color: inherit; font: inherit;
}
.bt-row:hover { background: rgba(255, 255, 255, .08); }
.bt-when { white-space: nowrap; color: #9aa0ae; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bt-name { font-weight: 600; white-space: nowrap; max-width: 30%; overflow: hidden; text-overflow: ellipsis; }
.bt-name.vide { font-weight: 400; color: var(--muted); font-style: italic; }
.bt-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.bt-net { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* l'archive rangée par JOUR DE TRAVAIL : un en-tête par journée, son total */
.bt-day {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 7px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
}
.bt-day:first-child { margin-top: 4px; }
.bt-day-rule { flex: 1; height: 1px; background: var(--line); }
.bt-day-cnt { white-space: nowrap; }
.bt-day-net { font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; font-size: 13px; }
.bt-strip {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; background: var(--bg3);
  border: 1px solid var(--line); border-radius: 11px; font-size: 13px; margin-bottom: 4px;
}
.bt-strip div { padding-right: 18px; border-right: 1px solid var(--line); }
.bt-strip div:last-child { border-right: 0; }
.bt-strip small { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.bt-strip b { font-variant-numeric: tabular-nums; }
/* « ⏮ Revoir » : l'action la plus utile du tiroir, elle cesse d'avoir l'air
   d'une étiquette grise entre quatre autres */
.bt-revoir { border-color: rgba(243, 112, 33, .55) !important; color: var(--orange-soft) !important; }
/* ✎ nommer le backtest — un span, pas un button : la ligne EST un button */
.bt-note { padding: 0 4px; opacity: .55; }
.bt-note:hover { opacity: 1; color: var(--orange, #f37021); }

/* ── Taille du texte (⚙ → « Taille du texte ») ────────────────────────────
   Tout l'écran vivait entre 11,5 et 14 px, sans aucun réglage : la formation
   s'adresse aussi à des élèves qui lisent mal de près (§5.1 de l'audit
   mockup/oeil-70ans/). Un seul incrément --fs, posé sur <html> par
   lexique.js ; chaque surface de LECTURE dont la taille est écrite en dur le
   reprend ici, tout le reste hérite de body. Ce bloc vit en FIN de feuille :
   à spécificité égale, c'est la dernière règle qui gagne.

   Les graphiques sont volontairement hors du réglage : leur fonte est posée
   en JS (layout.fontSize) et leurs canvas se mesurent en pixels. */
body { font-size: calc(14px + var(--fs)); }
.block h3, .hint, .tf, td .mini, .btn.mini { font-size: calc(12px + var(--fs)); }
.block label, .champ, .modal-msg, table { font-size: calc(13px + var(--fs)); }
.risk-note, .pos-sub, .champ small { font-size: calc(11.5px + var(--fs)); }
.block label .fl small, .kv span small { font-size: calc(10.5px + var(--fs)); }
.modal-title { font-size: calc(18px + var(--fs)); }
.guide-link { font-size: calc(12.5px + var(--fs)); }
/* La légende qui présente les sept sigles de durée (§3.8). Elle ne s'affiche
   qu'en mode découverte et sur grand écran : la barre du graphique est le
   territoire de l'habitué, on n'y pose pas un mot de plus que nécessaire. */
.tflegende { display: none; }
html[data-decouverte="1"] .tflegende {
  display: inline; align-self: center; margin-right: 4px; white-space: nowrap;
  color: var(--muted); font-size: calc(10.5px + var(--fs)); opacity: .75;
}
@media (max-width: 1100px) { html[data-decouverte="1"] .tflegende { display: none; } }
/* la ligne de repère chiffré sous « Lots » : utile quand on débute, bruit
   pour qui sait ce qu'est un lot (§3.3) */
.block label .fl small.dec { display: none; }
html[data-decouverte="1"] .block label .fl small.dec { display: block; }
/* la phrase qui dit ce que le mode découverte change, sous son interrupteur */
.menu-aide {
  margin: 6px 2px 0; max-width: 230px;
  font-size: calc(11px + var(--fs)); line-height: 1.45; color: var(--muted);
}

/* La porte nommée du menu ⚙ vers « Mon compte » : la taille du texte et le
   mode découverte règlent la LECTURE de toute l'application, pas ce pane —
   les laisser ici refaisait du ⚙ un menu de douze options (point 07). */
.menu-porte {
  display: block; width: 100%; margin-top: 10px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--bg3);
  color: var(--txt); font: inherit; font-size: calc(12.5px + var(--fs)); text-align: left;
}
.menu-porte:hover { border-color: var(--orange); color: var(--orange); }
/* la carte « Lisibilité et explications », dans « Mon compte » */
.lisibilite { margin-top: 14px; }
.lisibilite h3 { font-size: calc(15px + var(--fs)); color: var(--txt); margin-bottom: 4px; }
.lisibilite h5 {
  margin: 14px 0 6px; font-size: calc(11.5px + var(--fs)); color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.lisibilite .row { display: flex; gap: 7px; flex-wrap: wrap; }
.lisibilite .opt {
  padding: 7px 13px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--bg3); color: var(--txt); font: inherit; font-size: calc(13px + var(--fs));
}
.lisibilite .opt.active { border-color: var(--orange); color: var(--orange); background: rgba(243,112,33,.08); }
.lisibilite .hint { margin-top: 10px; }

/* Le « ? » en fin de ligne : il ouvre la définition courte du mot, par-dessus
   le graphique. Au doigt, le survol n'existe pas et un title ne suffit pas
   (audit œil-70ans, points 09 et 10). Il ne s'affiche qu'en mode découverte :
   un habitué n'a pas besoin qu'on lui propose « c'est quoi un lot ». */
.mot-aide {
  display: none; margin-left: 6px; padding: 0; width: 15px; height: 15px;
  flex: 0 0 auto; align-self: center; border-radius: 50%;
  border: 1px solid var(--line); background: none; color: var(--muted);
  font: inherit; font-size: 10px; line-height: 1;
}
html[data-decouverte="1"] .mot-aide { display: inline-flex; align-items: center; justify-content: center; }
.mot-aide:hover { border-color: var(--orange); color: var(--orange); }
.kv[data-mot] { align-items: center; }
.kv[data-mot] > span { flex: 1; }
/* le panneau « Les mots du trading » */
.mots-liste { margin: 0; }
.mots-liste dt {
  color: var(--txt); font-weight: 600; font-size: calc(14.5px + var(--fs));
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
}
.mots-liste dt:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.mots-liste dt.vise { color: var(--orange); }
.mots-liste dd { margin: 5px 0 0; color: var(--muted); font-size: calc(13.5px + var(--fs)); line-height: 1.6; }

/* ---------- la vignette d'aide des outils (bulles.js, 09/10) ----------
   Ancrée SOUS le bouton survolé : le curseur ne peut pas couvrir le texte,
   contrairement à l'infobulle native qui naît au bout du pointeur. */
.outil-bulle {
  position: fixed;
  z-index: 300;
  max-width: 340px;
  padding: 7px 11px;
  background: #11141b;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
  pointer-events: none; /* elle ne vole jamais le survol du bouton */
}