/* Comptes et exchanges (spec comptes, maquettes Penpot page 5 « Comptes et exchanges — desktop clair ») — v0.2.0.
   Mêmes jetons Atelier que graphique.css ; mesures reprises des écrans A1 à E6. */
:root { --ombre-forte: 0 10px 28px rgba(0, 0, 0, 0.14); }

body { display: block; }
.app { display: flex; height: 100%; }
.page { flex: 1; min-width: 0; min-height: 0; }
.page-graphique { display: flex; flex-direction: column; }
.barre .groupe--premier { padding-left: 0; border-left: 0; }
/* le menu prend 248 px : la barre du graphique se resserre pour tenir sur une ligne à 1 440 px */
.page-graphique .barre { gap: 6px; padding: 10px; }
.page-graphique .groupe { padding-left: 8px; gap: 4px; }
/* 0.2.2 : l'exchange et Spot / Perpétuel s'ajoutent ; boutons d'outils un peu plus petits pour garder une ligne */
.page-graphique #outils .bouton, .page-graphique #tout-voir, .page-graphique #direct { min-width: 32px; width: 32px; height: 32px; padding: 0; }
.page-graphique .segments button { padding: 5px 6px; }
/* ce qui appartient au graphique ne se montre que sur sa page */
body:not([data-page="graphique"]) .legendes-indicateurs,
body:not([data-page="graphique"]) .reglage-indicateur,
body:not([data-page="graphique"]) .fenetre-indicateurs { display: none !important; }
body:not([data-page="acces"]) .ecran-acces { display: none; }

/* ── Menu de gauche ─────────────────────────────────────────────────────────────────────────────────────────── */
.navigation {
  width: 248px; flex: none; display: flex; flex-direction: column; gap: 6px; padding: 24px 16px;
  background: var(--surface); border-right: 1px solid var(--ligne);
}
.nav-marque { display: flex; align-items: center; gap: 10px; padding: 4px 8px; margin-bottom: 18px; font-weight: 700; font-size: 17px; }
.nav-signe, .acces-signe { width: 36px; height: 36px; display: block; flex: none; } /* pièce ZeremIA (MQ-2) */
.nav-signe svg { width: 20px; height: 20px; }
.nav-item {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 12px;
  background: none; color: var(--doux); font: 500 14px "Manrope", sans-serif; text-align: left; cursor: pointer;
}
.nav-item svg { width: 20px; height: 20px; flex: none; }
.nav-item:hover { color: var(--texte); }
.nav-item.actif { background: var(--fond); color: var(--texte); font-weight: 700; }
.nav-pousse { flex: 1; }
.nav-compte {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px;
  background: var(--surface2); border: 1px solid var(--ligne);
}
.nav-avatar {
  width: 34px; height: 34px; border-radius: 17px; flex: none; display: flex; align-items: center; justify-content: center;
  background: rgba(79, 91, 213, 0.14); color: var(--objectif); font-weight: 700; font-size: 14px;
}
.nav-identite { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nav-identite b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-identite span { font-size: 12px; font-weight: 500; color: var(--doux); }
/* pastille « Service » (spec service SV-15, maquette Penpot N1) */
.nav-service {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; margin-bottom: 6px; border-radius: 14px;
  background: var(--surface2); border: 1px solid var(--ligne);
}
.nav-service > i { width: 8px; height: 8px; border-radius: 4px; flex: none; background: var(--gain); }
.nav-service.arrete { border-color: var(--perte); }
.nav-service.arrete > i { background: var(--perte); }
.nav-service .nav-identite b { font-size: 13px; }
.nav-service .nav-identite span { font-size: 11px; white-space: normal; }
.nav-relancer {
  flex: none; padding: 5px 10px; border: 0; border-radius: 999px; background: var(--texte); color: var(--surface);
  font: 700 12px "Manrope", sans-serif; cursor: pointer;
}
.nav-sortir {
  width: 32px; height: 32px; border: 0; border-radius: 10px; background: none; color: var(--doux); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.nav-sortir:hover { background: var(--surface); color: var(--texte); }
.nav-sortir svg { width: 18px; height: 18px; }

/* ── A1 à A3 : accès ────────────────────────────────────────────────────────────────────────────────────────── */
.ecran-acces {
  position: fixed; inset: 0; overflow-y: auto; background: var(--fond);
  display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 24px; padding: 24px 16px;
}
.acces-marque { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 22px; }
.acces-signe { width: 56px; height: 56px; }
.acces-signe svg { width: 24px; height: 24px; }
.carte-acces {
  width: 460px; max-width: 100%; display: flex; flex-direction: column; gap: 18px; padding: 32px;
  background: var(--surface); border-radius: 24px; box-shadow: var(--ombre-forte);
}
.onglets { display: flex; gap: 4px; padding: 4px; border-radius: 22px; background: var(--surface2); border: 1px solid var(--ligne); }
.onglets button {
  flex: 1; padding: 9px; border: 0; border-radius: 18px; background: none; cursor: pointer;
  font: 700 14px "Manrope", sans-serif; color: var(--doux);
}
.onglets button.actif { background: var(--principal); color: var(--sur-principal); }
.titres h1 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.2; }
.titres p, .fen-haut p { margin: 6px 0 0; font-size: 13px; font-weight: 500; color: var(--doux); line-height: 1.4; }
.zone-erreur:empty { display: none; }
.acces-pied { font-size: 12px; font-weight: 500; color: var(--doux); }
.regles {
  list-style: none; margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
  border-radius: 14px; background: var(--surface2); border: 1px solid var(--ligne);
}
.regles li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--doux); }
.regles li svg { width: 16px; height: 16px; flex: none; }
.regles li.ok { color: var(--texte); font-weight: 600; }
.regles li.ok svg { color: var(--gain); }

/* champs, encadrés, boutons (pièces Atelier de la page 2) */
.champ-a { display: flex; flex-direction: column; gap: 6px; }
.champ-a label { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: var(--doux); }
.saisie {
  display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 12px;
  background: var(--surface2); border: 1px solid var(--ligne);
}
.saisie:focus-within { border-color: var(--entree); box-shadow: 0 0 0 0.5px var(--entree); }
.saisie.erreur { border-color: var(--perte); box-shadow: 0 0 0 0.5px var(--perte); }
.saisie > svg { width: 18px; height: 18px; color: var(--doux); flex: none; }
.saisie { cursor: text; }
.saisie input { flex: 1; align-self: stretch; min-width: 0; border: 0; outline: none; background: none; font: 400 15px "Manrope", sans-serif; color: var(--texte); }
.saisie input::placeholder { color: var(--doux); }
.saisie input[type="password"] { font-family: "JetBrains Mono", monospace; letter-spacing: 1px; }
.saisie input[type="password"]:placeholder-shown { font-family: "Manrope", sans-serif; letter-spacing: 0; }
.saisie input[readonly] { color: var(--doux); }
.oeil { display: flex; padding: 0; border: 0; background: none; color: var(--doux); cursor: pointer; }
.oeil svg { width: 18px; height: 18px; }
.champ-a .aide-champ { font-size: 12px; font-weight: 500; color: var(--doux); }
.champ-a .erreur-champ { font-size: 12px; font-weight: 600; color: var(--perte); }
.encadre { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 13px; font-weight: 500; line-height: 1.4; }
.encadre svg { width: 18px; height: 18px; flex: none; }
.encadre--perte { background: rgba(224, 70, 94, 0.10); } .encadre--perte svg { color: var(--perte); }
.encadre--attention { background: rgba(217, 154, 6, 0.10); } .encadre--attention svg { color: var(--attention); }
.encadre--gain { background: rgba(18, 163, 127, 0.10); } .encadre--gain svg { color: var(--gain); }
.bouton-plein, .bouton-second, .bouton-texte {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 22px;
  font: 700 14px "Manrope", sans-serif; cursor: pointer; white-space: nowrap;
}
.bouton-plein { border: 0; background: var(--principal); color: var(--sur-principal); padding: 12px 18px; }
.bouton-plein:hover { background: #343a42; }
.bouton-plein:disabled { opacity: 0.85; cursor: default; }
.bouton-plein:disabled:not(.en-cours) { opacity: 0.4; }
.bouton-plein.danger { background: var(--perte); }
.bouton-plein.danger:hover { background: #c93a51; }
.bouton-second { border: 1px solid var(--ligne); background: var(--surface); color: var(--texte); }
.bouton-second:hover { background: var(--surface2); }
.bouton-texte { border: 0; background: none; color: var(--perte); padding: 11px 6px; }
.bouton-large { width: 100%; }
.bouton-plein svg, .bouton-second svg, .bouton-texte svg { width: 16px; height: 16px; }
.tourne { display: inline-flex; } .tourne svg { animation: tourne 1s linear infinite; }

/* ── E1 : page Exchanges ────────────────────────────────────────────────────────────────────────────────────── */
.page-exchanges { overflow-y: auto; padding: 36px 40px; display: flex; flex-direction: column; gap: 24px; }
.ex-entete { display: flex; align-items: center; gap: 16px; }
.ex-entete .titres { flex: 1; }
.ex-entete h1 { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.15; }
.bande {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 16px 20px;
  border-radius: 18px; background: var(--surface2); border: 1px solid var(--ligne);
}
.etape { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 500; line-height: 1.4; }
.pastille { width: 30px; height: 30px; border-radius: 15px; flex: none; display: flex; align-items: center; justify-content: center; }
.pastille svg { width: 17px; height: 17px; }
.pastille--objectif { background: rgba(79, 91, 213, 0.14); color: var(--objectif); }
.pastille--gain { background: rgba(18, 163, 127, 0.14); color: var(--gain); }
.pastille--doux { background: rgba(107, 114, 128, 0.14); color: var(--doux); }
.pastille--sortie { background: rgba(240, 138, 36, 0.14); color: var(--sortie); }
.pastille--perte { background: rgba(224, 70, 94, 0.14); color: var(--perte); }
.ligne-ex .pastille { width: 32px; height: 32px; border-radius: 16px; }
.ligne-ex .pastille svg { width: 16px; height: 16px; }
.pastille--grande { width: 48px; height: 48px; border-radius: 24px; }
.pastille--grande svg { width: 26px; height: 26px; }
.cartes-ex { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 20px; align-items: start; }
.carte-ex {
  display: flex; flex-direction: column; gap: 14px; padding: 22px;
  background: var(--surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-douce);
}
.carte-vide { gap: 6px; } .carte-vide b { font-size: 16px; } .carte-vide span { font-size: 13px; color: var(--doux); }
.cex-haut { display: flex; align-items: center; gap: 14px; }
.monogramme {
  width: 44px; height: 44px; border-radius: 22px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--ligne); font-weight: 700; font-size: 15px;
}
.monogramme--petit { width: 34px; height: 34px; border-radius: 17px; font-size: 13px; }
.cex-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cex-nom b { font-size: 18px; font-weight: 700; }
.mono { font: 400 12px "JetBrains Mono", monospace; color: var(--doux); }
.cex-nom .demande { font-size: 12px; font-weight: 500; color: var(--doux); }
.pilule-ok {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 14px; flex: none;
  background: rgba(18, 163, 127, 0.14); color: var(--gain); font-size: 13px; font-weight: 700;
}
.pilule-ok svg { width: 14px; height: 14px; }
.bouton-rond {
  width: 38px; height: 38px; border-radius: 19px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--ligne); color: var(--texte); cursor: pointer;
}
.bouton-rond:hover { background: var(--surface2); }
.bouton-rond svg { width: 18px; height: 18px; }
.section-ex { display: flex; flex-direction: column; gap: 8px; }
.etiq { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: var(--doux); text-transform: uppercase; }
.vide { font-size: 13px; font-weight: 500; color: var(--doux); }
.ligne-ex {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px;
  background: var(--surface2); border: 1px solid var(--ligne); font: inherit; color: inherit; text-align: left;
}
.ligne-ex.nouveau { background: rgba(18, 163, 127, 0.08); border-color: var(--gain); }
.textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.textes b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.textes > span { font-size: 12px; font-weight: 500; color: var(--doux); }
.textes > .mono { font-weight: 400; }
.bouton-petit {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 16px; flex: none; cursor: pointer;
  background: var(--surface); border: 1px solid var(--ligne); font: 700 13px "Manrope", sans-serif; color: var(--texte);
}
.bouton-petit:hover { background: var(--surface2); }
.bouton-petit svg { width: 14px; height: 14px; }
.ajouter {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; border-radius: 14px;
  border: 1.5px dashed var(--ligne); background: none; font: 500 13px "Manrope", sans-serif; color: var(--doux); cursor: pointer;
}
.ajouter:hover { color: var(--texte); border-color: var(--doux); }
.ajouter svg { width: 14px; height: 14px; }
.icone-bouton { display: flex; padding: 4px; border: 0; border-radius: 8px; background: none; color: var(--doux); cursor: pointer; }
.icone-bouton:hover { background: var(--surface); color: var(--texte); }
.icone-bouton svg { width: 18px; height: 18px; }
.menu-ex {
  position: fixed; z-index: 25; width: 260px; padding: 8px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--ligne); box-shadow: var(--ombre-forte);
}
.menu-ex button {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 10px;
  background: none; font: 600 14px "Manrope", sans-serif; color: var(--perte); cursor: pointer;
}
.menu-ex button:hover { background: var(--surface2); }
.menu-ex svg { width: 16px; height: 16px; }
.menu-ex .vide { display: block; padding: 6px 8px; }

/* ── Fenêtres E2 à E6 sur un voile ──────────────────────────────────────────────────────────────────────────── */
.voile {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(30, 35, 41, 0.32);
}
.fenetre {
  max-width: 100%; max-height: calc(100vh - 48px); overflow-y: auto; display: flex; flex-direction: column; gap: 16px;
  padding: 28px; background: var(--surface); border-radius: 24px; box-shadow: var(--ombre-forte);
}
.fen-form { display: flex; flex-direction: column; gap: 16px; }
.fen-haut { display: flex; align-items: flex-start; gap: 12px; }
.fen-haut .titres { flex: 1; }
.fen-haut h2, .fen-titre { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.fen-haut p { margin-top: 4px; }
.fen-texte { margin: 0; font-size: 13px; font-weight: 500; color: var(--doux); line-height: 1.45; }
.fen-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.fen-actions .gauche { margin-right: auto; }
.liste-ex { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.choix-ex {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid transparent; background: none; font: inherit; color: inherit; text-align: left;
}
.choix-ex:hover { background: var(--surface2); }
.choix-ex.deja { cursor: default; } .choix-ex.deja:hover { background: none; }
.choix-ex.choisi { background: rgba(18, 163, 127, 0.08); border-color: var(--entree); }
.choix-ex .textes b { font-size: 14px; }
.choix-ex .champs { font-size: 12px; font-weight: 500; color: var(--doux); text-align: right; flex: none; max-width: 230px; }
.coche { display: flex; color: var(--entree); } .coche svg { width: 20px; height: 20px; }
.choix-acces { display: flex; flex-direction: column; gap: 8px; }
.radio { width: 100%; cursor: pointer; }
.radio > svg { width: 16px; height: 16px; color: var(--gain); flex: none; }
.radio b { font-size: 15px; }
.radio.choisi { background: rgba(18, 163, 127, 0.08); border-color: var(--entree); box-shadow: 0 0 0 0.5px var(--entree); }
.rond { width: 20px; height: 20px; border-radius: 10px; border: 2px solid var(--ligne); flex: none; display: flex; align-items: center; justify-content: center; }
.radio.choisi .rond { border-color: var(--entree); }
.radio.choisi .rond::after { content: ""; width: 10px; height: 10px; border-radius: 5px; background: var(--entree); }

/* message en bas de l'écran (E4) */
.toast {
  position: fixed; bottom: 30px; left: calc(248px + (100vw - 248px) / 2); transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 22px;
  background: var(--principal); color: var(--sur-principal); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.toast svg { width: 18px; height: 18px; color: var(--entree); }
.toast--perte svg { color: #F06A80; }

/* ── Live et démo (spec comptes K-13, maquettes D1 à D5) — v0.2.1 ──────────────────────────────────────────── */
.pilule-mode {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 12px; flex: none;
  background: rgba(30, 35, 41, 0.08); color: var(--principal); font-size: 12px; font-weight: 700;
}
.pilule-mode svg { width: 13px; height: 13px; }
.pilule-mode--demo { background: rgba(217, 154, 6, 0.16); color: var(--attention); }
.titre-mode { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cex-nom .demo-possible { font-size: 12px; font-weight: 600; color: var(--attention); }
.choix-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-ex {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  background: var(--surface2); border: 1px solid var(--ligne); font: inherit; color: var(--doux);
}
.mode-ex svg { width: 18px; height: 18px; flex: none; }
.mode-ex > span { display: flex; flex-direction: column; gap: 1px; }
.mode-ex b { font-size: 14px; font-weight: 700; }
.mode-ex b + span { font-size: 12px; font-weight: 500; color: var(--doux); }
.mode-ex.actif { color: var(--texte); background: rgba(30, 35, 41, 0.06); border-color: var(--principal); box-shadow: 0 0 0 0.5px var(--principal); }
.mode-ex.actif svg { color: var(--principal); }
.mode-ex--demo.actif { background: rgba(217, 154, 6, 0.12); border-color: var(--attention); box-shadow: 0 0 0 0.5px var(--attention); }
.mode-ex--demo.actif svg { color: var(--attention); }
.mode-ex:disabled { cursor: default; opacity: 0.45; }
.mode-ex.actif:disabled { opacity: 1; }
.aide-mode:empty, .note-mode:empty { display: none; }
.radio .pilule-mode { margin-left: 2px; }

/* 0.2.2 : favoris (K-17) — étoile de E2 (maquette G3) */
.section-ex { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: var(--doux); text-transform: uppercase; padding: 8px 2px 2px; }
.etoile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 14px; color: var(--doux); cursor: pointer; background: none; border: 0; padding: 0; }
.etoile:hover { background: var(--surface2); color: var(--texte); }
.etoile.pleine { color: #E2A008; }
.etoile svg { width: 18px; height: 18px; }


/* 0.3.0 : trader (spec trader, maquettes T1 à T6) — panneau à droite du graphique */
.corps-graphique { flex: 1; min-height: 0; display: flex; }
.corps-graphique > .zone { flex: 1; min-width: 0; }
.panneau-trader {
  width: 384px; flex: none; overflow-y: auto; padding: 20px 20px 28px; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border-left: 1px solid var(--ligne);
}
.panneau-trader[hidden] { display: none; }
.tr-entete h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.2px; }
.tr-entete p { margin: 4px 0 0; font-size: 13px; color: var(--doux); }
.tr-label { font-size: 12px; font-weight: 700; color: var(--doux); margin-top: 4px; }
.tr-vide { color: var(--doux); font-size: 13px; }
.tr-simule { margin: 0; display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 600; color: var(--attention); }
.tr-simule svg { width: 14px; height: 14px; }
.tr-compte {
  display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--ligne); background: var(--surface2); font: inherit; color: var(--texte); text-align: left;
}
.tr-compte > svg { width: 18px; height: 18px; color: var(--doux); flex: none; }
.tr-compte b { font-size: 15px; }
.tr-compte .tr-paire { margin-left: auto; font: 500 12px "JetBrains Mono", monospace; color: var(--doux); }
.tr-liste-comptes { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--ligne); border-radius: 14px; padding: 4px; }
.tr-liste-comptes[hidden] { display: none; }
.tr-liste-comptes button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.tr-liste-comptes button:hover { background: var(--surface2); }
.tr-liste-comptes button > svg { width: 16px; height: 16px; color: var(--doux); }
.tr-liste-comptes button span:not(.pilule-mode) { color: var(--doux); font-size: 12px; margin-left: auto; }
.tr-segments { display: flex; }
.tr-segments.tr-plein { width: 100%; }
.tr-segments.tr-plein button { flex: 1; }
.panneau-trader .tr-segments button { padding: 7px 10px; }
.panneau-trader .tr-segments button:disabled { opacity: 0.4; cursor: not-allowed; }
.tr-sens button[data-v="achat"].actif { background: rgba(18, 163, 127, 0.16); color: var(--entree); }
.tr-sens button[data-v="vente"].actif { background: rgba(224, 70, 94, 0.14); color: var(--perte); }
.tr-rangee { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.tr-levier { display: flex; align-items: center; gap: 4px; font: 700 13px "Manrope", sans-serif; color: var(--doux); }
.tr-levier input { width: 52px; height: 32px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface2); text-align: center; font: 600 14px "JetBrains Mono", monospace; color: var(--texte); outline: none; }
.tr-carte { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--ligne); background: #FBFAF6; }
.tr-carte-haut { display: flex; align-items: center; gap: 8px; }
.tr-carte-haut > svg { width: 18px; height: 18px; }
.tr-carte-haut b { font-size: 15px; }
.tr-carte-haut span:last-child:not(.pilule-mode) { margin-left: auto; font-size: 12px; color: var(--doux); }
.tr-entree .tr-carte-haut { color: var(--entree); }
.tr-sortie .tr-carte-haut { color: var(--sortie); }
.tr-contrainte .tr-carte-haut { color: var(--contrainte); }
.tr-carte-haut b, .tr-carte-haut > svg { color: inherit; }
.tr-champ { display: flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--ligne); background: var(--surface); }
.tr-champ:focus-within { border-color: var(--entree); }
.tr-champ input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: 500 15px "JetBrains Mono", monospace; color: var(--texte); }
.tr-champ span { font-size: 13px; font-weight: 600; color: var(--doux); }
.tr-ligne { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.tr-ligne span { color: var(--doux); }
.tr-ligne b { font: 600 13px "JetBrains Mono", monospace; text-align: right; }
.tr-ligne b.gain { color: var(--gain); } .tr-ligne b.perte { color: var(--perte); }
.tr-doux span:last-child { color: var(--doux); font-size: 12px; }
.tr-module, .tr-prot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--ligne); }
.tr-prot.tr-sortie { border-left: 3px solid var(--sortie); }
.tr-prot.tr-contrainte { border-left: 3px solid var(--contrainte); }
.tr-rond { width: 34px; height: 34px; border-radius: 17px; flex: none; display: flex; align-items: center; justify-content: center; }
.tr-rond svg { width: 18px; height: 18px; }
.tr-sortie .tr-rond, .tr-rond.tr-sortie { background: rgba(240, 138, 36, 0.14); color: var(--sortie); }
.tr-contrainte .tr-rond, .tr-rond.tr-contrainte { background: rgba(224, 70, 94, 0.12); color: var(--contrainte); }
.tr-module-textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-module-textes b { font-size: 14px; }
.tr-module-textes span { font: 500 12px "JetBrains Mono", monospace; color: var(--doux); }
.tr-ecart { width: 40px; border: 0; border-bottom: 1px dashed var(--doux); background: none; font: 600 12px "JetBrains Mono", monospace; color: var(--texte); text-align: center; outline: none; padding: 0; }
.tr-ecart:focus { border-bottom-color: var(--entree); }
.tr-lien { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: 600 12px "Manrope", sans-serif; color: var(--doux); cursor: pointer; text-align: left; }
.tr-lien:hover { color: var(--texte); }
.tr-lien svg { width: 14px; height: 14px; }
.tr-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--doux); }
.tr-alerte { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: rgba(217, 154, 6, 0.10); font-size: 12px; font-weight: 600; color: var(--texte); }
.tr-alerte.erreur { background: rgba(224, 70, 94, 0.10); color: var(--perte); }
.tr-alerte svg { width: 16px; height: 16px; flex: none; }
.tr-alerte span { flex: 1; min-width: 0; }
.tr-envoyer { margin-top: 6px; height: 48px; border-radius: 24px; font-size: 15px; justify-content: center; }
.tr-envoyer.vente { background: var(--perte); }
.tr-fermer { color: var(--perte); border-color: rgba(224, 70, 94, 0.4); justify-content: center; }
.tr-suivi { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--doux) !important; }
.tr-suivi .point { width: 8px; height: 8px; border-radius: 4px; background: var(--attention); flex: none; }
.tr-suivi.direct { color: var(--entree) !important; }
.tr-suivi.direct .point { background: var(--entree); }
.tr-puce { flex: none; padding: 3px 9px; border-radius: 10px; font-size: 11px; font-weight: 700; background: var(--surface2); color: var(--doux); }
.tr-puce.posee { background: rgba(217, 154, 6, 0.14); color: var(--attention); }
.tr-puce.executee { background: rgba(18, 163, 127, 0.14); color: var(--entree); }
.tr-puce.refusee { background: rgba(224, 70, 94, 0.12); color: var(--perte); }
.tr-evenements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tr-evenements li { font-size: 12px; line-height: 1.4; color: var(--texte); }
.tr-evenements li span { display: block; font: 500 11px "JetBrains Mono", monospace; color: var(--doux); }
.tr-autres { display: flex; flex-direction: column; gap: 4px; }
.tr-autres button { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface); font: 600 12px "Manrope", sans-serif; color: var(--texte); cursor: pointer; }
.tr-autres button svg { width: 14px; height: 14px; margin-left: auto; transform: rotate(-90deg); color: var(--doux); }
.tr-centre { align-items: center; text-align: center; padding: 22px 18px; }
.tr-centre > svg { width: 28px; height: 28px; color: var(--doux); }
.tr-centre p { margin: 0; font-size: 13px; color: var(--doux); }
.tr-resume { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: var(--surface2); margin-bottom: 14px; }
.tr-modules { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.panneau-trader .tr-segments.tr-plein button { padding: 7px 4px; white-space: nowrap; }

/* 0.3.1 : journal de trading (spec journal, maquettes J1 à J6) */
.page-journal { overflow-y: auto; padding: 30px 36px 40px; display: flex; flex-direction: column; gap: 14px; }
.page-journal[hidden] { display: none; }
.jr-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.jr-entete h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.4px; }
.jr-entete p { margin: 4px 0 0; font-size: 13px; color: var(--doux); }
.jr-actions { display: flex; gap: 8px; }
.jr-filtres { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jr-segments button { padding: 7px 14px; }
.jr-segments button:disabled { opacity: 0.4; cursor: not-allowed; }
.jr-pousse { flex: 1; }
.jr-periode { display: flex; align-items: center; gap: 10px; }
.jr-periode b { font-size: 15px; min-width: 160px; text-align: center; }
.jr-lectures { display: flex; flex-wrap: wrap; gap: 8px; }
.jr-lectures span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--ligne); font-size: 12px; color: var(--doux); }
.jr-lectures span svg { width: 14px; height: 14px; color: var(--entree); }
.jr-lectures span.erreur { color: var(--perte); border-color: rgba(224, 70, 94, 0.35); }
.jr-lectures span.erreur svg { color: var(--perte); }
.jr-metriques { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.jr-metrique { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--ligne); }
.jr-metrique span { font-size: 12px; color: var(--doux); }
.jr-metrique b { font: 600 22px "JetBrains Mono", monospace; }
.jr-metrique small { font: 500 12px "JetBrains Mono", monospace; color: var(--doux); }
.jr-metrique b.gain, .jr-mois b.gain, .jr-jour b.gain, .jr-total b.gain, .jr-ligne .gain { color: var(--gain); }
.jr-metrique b.perte, .jr-mois b.perte, .jr-jour b.perte, .jr-total b.perte, .jr-ligne .perte { color: var(--perte); }
.jr-annee { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.jr-mois { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--ligne); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.jr-mois:hover, .jr-jour:hover, .jr-total:hover { border-color: var(--doux); }
.jr-mois span { font-weight: 700; font-size: 15px; }
.jr-mois b { font: 600 16px "JetBrains Mono", monospace; }
.jr-mois small, .jr-jour small, .jr-total small { font-size: 12px; color: var(--doux); }
.jr-doux { color: var(--doux) !important; font-family: "Manrope", sans-serif !important; font-size: 13px !important; }
.jr-grille { display: flex; flex-direction: column; gap: 6px; }
.jr-grille-tete, .jr-semaine { display: grid; grid-template-columns: repeat(7, 1fr) 1.2fr; gap: 6px; }
.jr-grille-tete span { font-size: 12px; font-weight: 700; color: var(--doux); padding: 0 8px; }
.jr-jour, .jr-total { min-height: 74px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 8px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--ligne); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.jr-jour span { font-weight: 700; font-size: 13px; }
.jr-jour b, .jr-total b { font: 600 13px "JetBrains Mono", monospace; }
.jr-jour.dehors { opacity: 0.4; }
.jr-jour.aujourdhui { border-color: var(--entree); }
.jr-total { background: var(--surface2); }
.jr-total span { font-weight: 700; font-size: 12px; color: var(--doux); }
.jr-table { display: flex; flex-direction: column; border-radius: 18px; background: var(--surface); border: 1px solid var(--ligne); overflow: hidden; }
.jr-ligne { display: grid; grid-template-columns: 70px 1.3fr 0.8fr 0.7fr 1.6fr 1fr 0.9fr 0.9fr 60px; gap: 10px; align-items: center; padding: 12px 18px; border: 0; border-bottom: 1px solid var(--ligne); background: none; font: 500 13px "JetBrains Mono", monospace; color: var(--texte); text-align: left; cursor: pointer; }
.jr-ligne:hover { background: rgba(79, 91, 213, 0.05); }
.jr-ligne > span:nth-child(3), .jr-ligne > span:nth-child(6) { font-family: "Manrope", sans-serif; }
.jr-ligne > span:nth-child(4) { font: 700 13px "Manrope", sans-serif; }
.jr-tete { cursor: default; font: 700 12px "Manrope", sans-serif; color: var(--doux); }
.jr-tete:hover { background: none; }
.jr-jour-ligne { padding: 10px 18px; background: var(--surface2); font: 700 13px "Manrope", sans-serif; color: var(--texte); border: 0; border-bottom: 1px solid var(--ligne); text-align: left; cursor: pointer; }
.jr-jour-ligne:hover { color: var(--objectif); }
.jr-pastille { display: inline-block; padding: 3px 9px; border-radius: 10px; font: 700 11px "Manrope", sans-serif; }
.jr-pastille.app { background: rgba(79, 91, 213, 0.12); color: var(--objectif); }
.jr-pastille.horsapp { background: var(--surface2); color: var(--doux); }
.jr-note { display: flex; color: var(--doux); }
.jr-note.oui { color: var(--objectif); }
.jr-note svg { width: 18px; height: 18px; }
.jr-texte { width: 100%; min-height: 180px; resize: vertical; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ligne); background: var(--surface2); font: 500 14px/1.5 "Manrope", sans-serif; color: var(--texte); outline: none; box-sizing: border-box; }
.jr-texte:focus { border-color: var(--entree); }
.jr-apercu { max-height: 280px; overflow: auto; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface2); font: 500 12px/1.5 "JetBrains Mono", monospace; white-space: pre-wrap; }
.tr-note svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }

/* 0.4.0 : tâches et registre (spec tâches, maquettes Penpot page 8, M1 à M4) */
.page-taches, .page-registre { overflow-y: auto; padding: 30px 40px 40px; display: flex; flex-direction: column; gap: 18px; }
.page-taches[hidden], .page-registre[hidden] { display: none; }
.ta-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ta-entete h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.4px; }
.ta-entete p { margin: 4px 0 0; font-size: 13px; color: var(--doux); }
.ta-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.ta-fil { display: flex; gap: 6px; align-items: center; }
.ta-fil button { border: 0; background: none; padding: 0; font: inherit; color: var(--doux); cursor: pointer; }
.ta-fil button:hover { color: var(--texte); }
.ta-titre { margin-top: 4px; width: 640px; max-width: 100%; border: 0; border-bottom: 1px dashed var(--ligne); background: none; font: 800 30px "Manrope", sans-serif; color: var(--texte); outline: none; padding: 2px 0; }
.ta-titre:disabled { border-bottom-color: transparent; }
.ta-titre-ligne { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.ta-sous { font: 400 12px "JetBrains Mono", monospace; color: var(--doux); }
.ta-comptes { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.ta-compte { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--ligne); }
.ta-compte div { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.ta-compte span { font: 400 12px "JetBrains Mono", monospace; color: var(--doux); }
.ta-pastille { display: inline-block; padding: 2px 8px; border-radius: 10px; font: 700 11px "Manrope", sans-serif; }
.ta-pastille.live { background: rgba(224, 70, 94, 0.12); color: var(--perte); }
.ta-pastille.demo { background: rgba(79, 91, 213, 0.12); color: var(--objectif); }
.ta-surveillance { flex: 1; min-width: 320px; display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 14px; background: #FBF3DF; }
.ta-surveillance i, .ta-encours i { width: 8px; height: 8px; border-radius: 4px; background: var(--attention); flex: none; }
.ta-surveillance div, .ta-encours div { display: flex; flex-direction: column; gap: 3px; }
.ta-surveillance b, .ta-encours b { font-size: 13px; }
.ta-surveillance span, .ta-encours span { font-size: 12px; color: var(--doux); font-weight: 500; }
.ta-encours { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 14px; background: #E7F5EF; }
.ta-encours i { background: var(--entree); }
.ta-filtres { display: flex; gap: 8px; flex-wrap: wrap; }
.ta-filtre { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 18px; border: 1px solid var(--ligne); background: var(--surface); font: 600 13px "Manrope", sans-serif; color: var(--texte); cursor: pointer; }
.ta-filtre.actif { background: var(--principal); color: var(--sur-principal); border-color: var(--principal); }
.ta-filtre i, .ta-etat i { width: 8px; height: 8px; border-radius: 4px; background: var(--doux); }
.ta-filtre i.entree, .ta-etat.entree i, .ta-filtre i.encours { background: var(--entree); }
.ta-filtre i.attention, .ta-etat.attention i { background: var(--attention); }
.ta-filtre i.objectif, .ta-etat.objectif i { background: var(--objectif); }
.ta-filtre i.contrainte, .ta-etat.contrainte i { background: var(--contrainte); }
.ta-filtre i.sortie { background: var(--sortie); }
.ta-vide { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px; border-radius: 18px; background: var(--surface); border: 1px dashed var(--ligne); color: var(--doux); text-align: center; }
.ta-vide svg { width: 32px; height: 32px; }
.ta-vide b { color: var(--texte); font-size: 15px; }
.ta-vide span { max-width: 520px; font-size: 13px; }
.ta-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ta-carte { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 18px; background: var(--surface); box-shadow: var(--ombre-douce); cursor: pointer; }
.ta-carte:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }
.ta-haut { display: flex; align-items: center; gap: 10px; }
.ta-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ta-nom div { display: flex; align-items: center; gap: 10px; }
.ta-nom b { font-size: 18px; font-weight: 700; }
.ta-style { padding: 3px 9px; border-radius: 10px; background: #EFE9DD; font: 700 11px "Manrope", sans-serif; color: #5B5446; white-space: nowrap; }
.ta-etat { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 14px; font: 700 13px "Manrope", sans-serif; white-space: nowrap; flex: none; }
.ta-etat.entree { background: rgba(18, 163, 127, 0.12); color: var(--entree); }
.ta-etat.attention { background: rgba(217, 154, 6, 0.14); color: var(--attention); }
.ta-etat.objectif { background: rgba(79, 91, 213, 0.12); color: var(--objectif); }
.ta-etat.contrainte { background: rgba(224, 70, 94, 0.12); color: var(--contrainte); }
.ta-regles { display: flex; flex-direction: column; gap: 8px; }
.ta-ligne { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.ta-ligne svg { width: 16px; height: 16px; flex: none; }
.ta-ligne.entree svg { color: var(--entree); } .ta-ligne.sortie svg { color: var(--sortie); }
.ta-ligne.objectif svg { color: var(--objectif); } .ta-ligne.contrainte svg { color: var(--contrainte); }
.ta-mesure { display: flex; flex-direction: column; gap: 6px; }
.ta-mesure small, .ta-bas small { font: 400 12px "JetBrains Mono", monospace; color: var(--doux); }
.ta-mesure small.perte { color: var(--perte); }
.ta-barre { height: 8px; border-radius: 4px; background: var(--ligne); overflow: hidden; }
.ta-barre span { display: block; height: 100%; border-radius: 4px; }
.ta-message { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; font-weight: 600; color: var(--attention); }
.ta-message svg { width: 14px; height: 14px; flex: none; }
.ta-bas { display: flex; align-items: center; gap: 8px; }
.ta-bas small { flex: 1; }
/* M2 / M2b */
.ta-ligne-champs { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ta-ligne-champs.fige, .ta-champ.fige { opacity: 0.55; }
.ta-champ { display: flex; flex-direction: column; gap: 6px; min-width: 120px; }
.ta-champ label { font: 700 12px "Manrope", sans-serif; color: var(--doux); text-transform: uppercase; }
.ta-champ select, .ta-champ > input { height: 41px; padding: 0 12px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface2); font: 400 15px "JetBrains Mono", monospace; color: var(--texte); outline: none; }
.ta-champ > input { width: 160px; }
.ta-champ small { font-size: 12px; font-weight: 500; color: var(--doux); }
.ta-champ small.attention { color: #B7791F; }
.ta-seg button { padding: 8px 12px; }
.ta-seg button:disabled { opacity: 0.4; cursor: not-allowed; }
.ta-perp { display: flex; align-items: center; gap: 6px; }
.ta-perp select { height: 41px; }
.ta-perp input { width: 56px; height: 41px; padding: 0 10px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface2); font: 400 15px "JetBrains Mono", monospace; }
.ta-saisie { display: flex; align-items: center; gap: 8px; height: 41px; padding: 0 12px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface2); }
.ta-saisie input { flex: 1; min-width: 60px; border: 0; background: none; outline: none; font: 400 15px "JetBrains Mono", monospace; color: var(--texte); }
.ta-saisie span { font-size: 13px; font-weight: 500; color: var(--doux); }
.ta-options { display: flex; gap: 8px; }
.ta-options button { display: inline-flex; align-items: center; gap: 8px; height: 41px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface2); font: 600 14px "Manrope", sans-serif; color: var(--texte); cursor: pointer; }
.ta-options button i { width: 14px; height: 14px; border-radius: 7px; border: 1.5px solid #9CA3AF; background: var(--surface); box-sizing: border-box; }
.ta-options button.actif { border: 1.5px solid var(--principal); background: var(--surface); }
.ta-options button.actif i { border: 4px solid var(--principal); }
.ta-corps { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 24px; align-items: start; }
.ta-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ta-case { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--surface2); border: 1px solid var(--ligne); }
.ta-case.active.entree { border-color: var(--entree); } .ta-case.active.sortie { border-color: var(--sortie); }
.ta-case.active.objectif { border-color: var(--objectif); } .ta-case.active.contrainte { border-color: var(--contrainte); }
.ta-case.verrou .ta-piece { opacity: 0.45; }
.ta-case-titre { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ta-case-titre svg { width: 18px; height: 18px; }
.ta-case.entree .ta-case-titre { color: var(--entree); } .ta-case.sortie .ta-case-titre { color: var(--sortie); }
.ta-case.objectif .ta-case-titre { color: var(--objectif); } .ta-case.contrainte .ta-case-titre { color: var(--contrainte); }
.ta-verrou { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 10px; background: #EFE9DD; font: 700 11px "Manrope", sans-serif; color: #5B5446; }
.ta-verrou svg { width: 12px; height: 12px; }
.ta-piece { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--ligne); cursor: pointer; }
.ta-piece.choisie { border-color: var(--entree); }
.ta-case.sortie .ta-piece.choisie { border-color: var(--sortie); } .ta-case.objectif .ta-piece.choisie { border-color: var(--objectif); } .ta-case.contrainte .ta-piece.choisie { border-color: var(--contrainte); }
.ta-piece > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ta-piece b { font-size: 15px; }
.ta-piece small { font: 400 12px "JetBrains Mono", monospace; color: var(--doux); }
.ta-piece.petite { padding: 7px 12px; cursor: default; }
.ta-piece.petite b { font-size: 14px; }
.ta-rond { width: 34px; height: 34px; border-radius: 17px; flex: none; display: flex; align-items: center; justify-content: center; }
.ta-rond svg { width: 19px; height: 19px; }
.ta-rond.entree { background: rgba(18, 163, 127, 0.14); color: var(--entree); }
.ta-rond.sortie { background: rgba(240, 138, 36, 0.14); color: var(--sortie); }
.ta-rond.objectif { background: rgba(79, 91, 213, 0.14); color: var(--objectif); }
.ta-rond.contrainte { background: rgba(224, 70, 94, 0.14); color: var(--contrainte); }
.ta-rond.neutre { background: #FBF3DF; color: #5B5446; border: 1px solid var(--ligne); }
.ta-rond.grand { width: 72px; height: 72px; border-radius: 36px; } .ta-rond.grand svg { width: 34px; height: 34px; }
.ta-rond.tres-grand { width: 140px; height: 140px; border-radius: 70px; } .ta-rond.tres-grand svg { width: 64px; height: 64px; }
.ta-retirer { border: 0; background: none; color: var(--doux); cursor: pointer; padding: 4px; display: flex; }
.ta-retirer svg { width: 16px; height: 16px; }
.ta-params { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--ligne); }
.ta-params > b { font-size: 12px; color: var(--doux); }
.ta-params label { font: 700 12px "Manrope", sans-serif; color: var(--doux); text-transform: uppercase; }
.ta-params label small { text-transform: none; font-weight: 500; }
.ta-indice { font-size: 12px; font-weight: 500; color: var(--doux); }
.ta-ajouter { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border-radius: 14px; border: 1.5px dashed var(--ligne); background: none; font: 500 13px "Manrope", sans-serif; color: var(--doux); cursor: pointer; }
.ta-ajouter svg { width: 14px; height: 14px; }
.ta-registre { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 18px; background: var(--surface); position: sticky; top: 0; }
.ta-registre h3 { margin: 0; font-size: 18px; }
.ta-registre p { margin: 0; font-size: 13px; font-weight: 500; color: var(--doux); }
.ta-recherche { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface2); }
.ta-recherche svg { width: 16px; height: 16px; color: var(--doux); }
.ta-recherche input { flex: 1; border: 0; background: none; outline: none; font: 500 13px "Manrope", sans-serif; }
.ta-recherche.large { width: 300px; border-radius: 22px; background: var(--surface); }
.ta-places { display: flex; flex-wrap: wrap; gap: 6px; }
.ta-place, .ta-chip { padding: 5px 10px; border-radius: 12px; border: 0; font: 700 12px "Manrope", sans-serif; cursor: pointer; }
.ta-chip { cursor: default; font-size: 11px; padding: 4px 9px; }
.ta-place.entree, .ta-chip.entree { background: rgba(18, 163, 127, 0.14); color: var(--entree); }
.ta-place.sortie, .ta-chip.sortie { background: rgba(240, 138, 36, 0.14); color: var(--sortie); }
.ta-place.objectif, .ta-chip.objectif { background: rgba(79, 91, 213, 0.14); color: var(--objectif); }
.ta-place.contrainte, .ta-chip.contrainte { background: rgba(224, 70, 94, 0.14); color: var(--contrainte); }
.ta-place.actif.entree { background: var(--entree); color: #fff; } .ta-place.actif.sortie { background: var(--sortie); color: #fff; }
.ta-place.actif.objectif { background: var(--objectif); color: #fff; } .ta-place.actif.contrainte { background: var(--contrainte); color: #fff; }
.ta-liste { display: flex; flex-direction: column; gap: 6px; }
.ta-mod { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; border: 1px solid transparent; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ta-mod:hover { border-color: var(--ligne); background: var(--surface2); }
.ta-mod > div { display: flex; flex-direction: column; gap: 2px; }
.ta-mod b { font-size: 14px; }
.ta-mod small { font-size: 11px; color: var(--doux); }
/* M2c, M3b, confirmation */
.ta-resume { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--surface2); }
.ta-resume div { display: grid; grid-template-columns: 18px 90px 1fr; gap: 8px; align-items: start; font-size: 13px; }
.ta-resume svg { width: 16px; height: 16px; }
.ta-resume span { font: 400 12px "JetBrains Mono", monospace; color: var(--texte); }
.ta-refus { display: flex; gap: 14px; align-items: flex-start; }
.ta-refus h2 { margin: 0 0 6px; font-size: 18px; }
.ta-refus p { margin: 0; font-size: 13px; line-height: 1.5; color: #4B5563; }
.ta-etapes { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.45; }
.ta-choix { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 10px; font: 700 12px "Manrope", sans-serif; }
.ta-choix.garder { background: #E7F5EF; color: var(--entree); }
.ta-choix.vendre { background: rgba(240, 138, 36, 0.14); color: var(--sortie); }
/* M3 */
.ta-surveillance.large { flex: none; }
.ta-fin { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-radius: 14px; font-size: 13px; font-weight: 600; }
.ta-fin svg { width: 16px; height: 16px; }
.ta-fin.objectifatteint { background: rgba(79, 91, 213, 0.10); color: var(--objectif); }
.ta-fin.arretee { background: rgba(224, 70, 94, 0.10); color: var(--perte); }
.ta-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ta-tuile { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 18px; background: var(--surface); }
.ta-tuile > span { display: flex; align-items: center; gap: 8px; font: 700 12px "Manrope", sans-serif; color: var(--doux); text-transform: uppercase; }
.ta-tuile > span svg { width: 16px; height: 16px; color: var(--texte); }
.ta-tuile b { font: 500 22px "JetBrains Mono", monospace; }
.ta-tuile b.gain { color: var(--gain); } .ta-tuile b.perte { color: var(--perte); }
.ta-tuile small { font-size: 13px; font-weight: 500; color: var(--doux); }
.ta-suivi-corps { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 20px; align-items: stretch; }
.ta-graphique { height: 440px; display: flex; flex-direction: column; min-width: 0; }
.ta-graphique .cadre { height: 100%; box-shadow: none; }
.ta-direct { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 18px; background: var(--surface); max-height: 440px; overflow-y: auto; box-sizing: border-box; }
.ta-direct h3 { margin: 0 0 4px; font-size: 16px; display: flex; align-items: baseline; gap: 8px; }
.ta-direct h3 small { font: 400 11px "JetBrains Mono", monospace; color: var(--doux); }
.ta-bloc { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: 700 12px "Manrope", sans-serif; }
.ta-bloc svg { width: 14px; height: 14px; }
.ta-bloc.entree { color: var(--entree); } .ta-bloc.sortie { color: var(--sortie); } .ta-bloc.objectif { color: var(--objectif); } .ta-bloc.contrainte { color: var(--contrainte); }
.ta-ok { color: var(--doux); display: flex; } .ta-ok.oui { color: var(--entree); }
.ta-ok svg { width: 20px; height: 20px; }
.ta-journal { display: flex; flex-direction: column; padding: 12px 18px; border-radius: 18px; background: var(--surface); }
.ta-jl { display: grid; grid-template-columns: 130px 60px 1fr; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--ligne); font: 400 13px "JetBrains Mono", monospace; }
.ta-jl span:last-child { font-family: "Manrope", sans-serif; font-weight: 500; }
.ta-jl.tete { font: 700 12px "Manrope", sans-serif; color: var(--doux); text-transform: uppercase; }
.ta-jl:last-child { border-bottom: 0; }
/* M3 : bloc « Après l'ouverture » et journal (spec tâches TA-24 à TA-26) */
.ta-tuile small em { font-style: normal; font-weight: 700; }
.ta-tuile small em.gain, .ta-mv em.gain { color: var(--gain); } .ta-tuile small em.perte, .ta-mv em.perte { color: var(--perte); }
.ta-mv em { font-style: normal; }
.ta-mvs { display: flex; flex-direction: column; padding: 14px 18px; border-radius: 18px; background: var(--surface); }
.ta-mv-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding-bottom: 8px; }
.ta-mv-titre { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ta-mv-titre b { font: 800 16px "Manrope", sans-serif; }
.ta-mv-titre small, .ta-mv-legende small { font: 500 12px "Manrope", sans-serif; color: var(--doux); }
.ta-mv-legende { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 500 12px "Manrope", sans-serif; color: var(--doux); }
.ta-mv-legende .ta-badge { margin-left: 6px; }
.ta-badge { display: inline-block; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; font: 800 11px "Manrope", sans-serif; font-style: normal; letter-spacing: 0.02em; }
.ta-badge.ouvre { color: var(--entree); } .ta-badge.ferme { color: var(--sortie); }
.ta-badge.plein.ouvre { background: var(--entree); border-color: var(--entree); color: #fff; }
.ta-badge.plein.ferme { background: var(--sortie); border-color: var(--sortie); color: #fff; }
/* grille infinie (GI-35) : une couleur par sorte d'ordre ; vert et orange comme les lignes d'achat et de vente du graphique */
.ta-badge.achat { color: var(--entree); } .ta-badge.vente { color: var(--sortie); }
.ta-badge.gain-usdt { color: var(--gain-usdt); } .ta-badge.gain-pieces { color: var(--gain-pieces); }
.ta-badge.plein.achat { background: var(--entree); border-color: var(--entree); color: #fff; }
.ta-badge.plein.vente { background: var(--sortie); border-color: var(--sortie); color: #fff; }
.ta-badge.plein.gain-usdt { background: var(--gain-usdt); border-color: var(--gain-usdt); color: #fff; }
.ta-badge.plein.gain-pieces { background: var(--gain-pieces); border-color: var(--gain-pieces); color: #fff; }
.ta-mv { display: grid; grid-template-columns: 124px 44px 104px 92px 70px minmax(0, 1fr) 76px minmax(0, 220px); gap: 14px; align-items: center;
  padding: 7px 8px; border-bottom: 1px solid var(--ligne); font: 500 13px "Manrope", sans-serif; }
.ta-mv > span:nth-child(-n+3), .ta-mv > span:nth-child(7) { font: 400 13px "JetBrains Mono", monospace; }
.ta-mv.tete { font: 700 12px "Manrope", sans-serif; color: var(--doux); text-transform: uppercase; }
.ta-mv.tete > span { font: inherit; }
.ta-mv.execute { border-radius: 8px; font-weight: 600; }
.ta-mv.execute.ouvre { background: rgba(18, 163, 127, 0.10); } .ta-mv.execute.ferme { background: rgba(240, 138, 36, 0.12); }
.ta-mv.execute.ouvre .mv-etat { color: var(--entree); font-weight: 700; } .ta-mv.execute.ferme .mv-etat { color: var(--sortie); font-weight: 700; }
.ta-mv.execute.achat { background: rgba(18, 163, 127, 0.10); } .ta-mv.execute.vente { background: rgba(240, 138, 36, 0.12); }
.ta-mv.execute.gain-usdt { background: rgba(43, 123, 228, 0.10); } .ta-mv.execute.gain-pieces { background: rgba(155, 81, 224, 0.10); }
.ta-mv.execute.achat .mv-etat { color: var(--entree); font-weight: 700; } .ta-mv.execute.vente .mv-etat { color: var(--sortie); font-weight: 700; }
.ta-mv.execute.gain-usdt .mv-etat { color: var(--gain-usdt); font-weight: 700; } .ta-mv.execute.gain-pieces .mv-etat { color: var(--gain-pieces); font-weight: 700; }
.ta-mv.pose .mv-etat, .ta-mv.pose .mv-ordre, .ta-mv.pose .mv-res { color: var(--doux); }
.ta-mv.annule, .ta-mv.refuse { color: var(--doux); }
.ta-mv.annule .ta-badge, .ta-mv.refuse .ta-badge { color: var(--doux); }
.ta-mv .mv-res { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-mv-vide { margin: 4px 0; font: 500 13px "Manrope", sans-serif; color: var(--doux); }
.ta-plus { align-self: center; margin-top: 10px; padding: 6px 14px; border: 1px solid var(--ligne); border-radius: 999px; background: none; color: var(--texte); font: 600 13px "Manrope", sans-serif; cursor: pointer; }
.ta-jl.groupe { width: 100%; border: 0; border-bottom: 1px solid var(--ligne); background: none; color: var(--doux); text-align: left; cursor: pointer; }
.ta-jl.groupe:hover span:last-child { text-decoration: underline; }
/* M4 */
.ta-reg-corps { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.ta-reg-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ta-reg-carte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ta-reg-carte.choisi { border-color: var(--entree); }
.ta-reg-carte b { font-size: 16px; }
.ta-reg-carte small { font: 400 12px "JetBrains Mono", monospace; color: var(--doux); }
.ta-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ta-reg-detail { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 18px; background: var(--surface); position: sticky; top: 0; }
.ta-reg-detail h2 { margin: 0; font-size: 24px; font-weight: 800; }
.ta-reg-detail p { margin: 0; font-size: 14px; color: var(--doux); line-height: 1.5; }
.ta-signature { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--ligne); }
.ta-signature small { font: 700 11px "Manrope", sans-serif; color: var(--doux); }
.ta-signature label { margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--doux); }
.ta-signature code { font: 400 12px "JetBrains Mono", monospace; color: var(--texte); white-space: normal; }
.ta-place-en { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--doux); }
.ta-utilise { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ta-utilise small { font: 700 11px "Manrope", sans-serif; color: var(--doux); }
/* 0.4.1 : grille (spec grille GR-12) */
.ta-indice.gain { color: var(--gain); font-weight: 600; }
.ta-indice.perte { color: var(--perte); font-weight: 600; }
/* 0.4.2 : règles du marché et vérifications de la grille (spec grille GR-14 à GR-16, maquette M2d) */
.ta-regles-marche { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--ligne); }
.ta-regles-titre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ta-regles-titre svg { width: 16px; height: 16px; color: #5B5446; }
.ta-regles-titre b { font-size: 13px; }
.ta-regles-titre span { font-size: 12px; font-weight: 500; color: var(--doux); }
.ta-regles-valeurs { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ta-regle { display: flex; flex-direction: column; gap: 3px; }
.ta-regle small { font: 700 11px "Manrope", sans-serif; color: var(--doux); }
.ta-regle b { font: 500 13px "JetBrains Mono", monospace; }
.ta-regle b.attention { color: #B7791F; }
.ta-verifs { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 10px; background: var(--surface2); }
.ta-verifs small { font: 700 10px "Manrope", sans-serif; color: var(--doux); }
.ta-verifs div { display: flex; gap: 6px; align-items: flex-start; font-size: 11px; font-weight: 500; }
.ta-verifs i { font-style: normal; font-weight: 700; width: 12px; flex: none; }
.ta-verifs .ok i { color: var(--gain); } .ta-verifs .refus i, .ta-verifs .refus span { color: var(--perte); }
.ta-verifs .attention i { color: #B7791F; } .ta-verifs .info i { color: var(--objectif); }
/* 0.6.0 : grille infinie intelligente (spec grille infinie GI-24 ; maquettes Penpot M2g, M3g) */
.gi-tf { display: flex; align-items: center; height: 40px; font: 500 13px "Manrope", sans-serif; color: var(--doux); }
.gi-corps { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.gi-gauche, .gi-droite { display: flex; flex-direction: column; gap: 16px; }
.gi-carte { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--ligne); }
.gi-titre { display: flex; align-items: baseline; gap: 12px; }
.gi-titre b, .gi-avance summary b { font-size: 16px; font-weight: 800; }
.gi-titre small, .gi-avance summary small { font-size: 12px; font-weight: 500; color: var(--doux); }
.gi-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ta-saisie.gi input { min-width: 0; }
.gi-minimum { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ligne); background: var(--surface2); }
.gi-minimum svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.gi-minimum > div { display: flex; flex-direction: column; gap: 4px; }
.gi-minimum b { font-size: 14px; }
.gi-minimum small { font: 400 11px "JetBrains Mono", monospace; color: var(--doux); }
.gi-minimum.ok { border-color: var(--entree); background: #E8F6F1; } .gi-minimum.ok svg, .gi-minimum.ok b { color: #0E7C61; }
.gi-minimum.refus { border-color: var(--contrainte); background: #FDEDEF; } .gi-minimum.refus svg, .gi-minimum.refus b { color: var(--contrainte); }
.gi-minimum.attente span { font-size: 12px; color: var(--doux); }
.gi-minimum.avert { border-color: var(--attention); background: #FDF6E3; } .gi-minimum.avert svg, .gi-minimum.avert b { color: #B7791F; }
.gi-minimum small i { font-style: normal; font-weight: 700; } .gi-minimum small i.ok { color: #0E7C61; } .gi-minimum small i.avert { color: #B7791F; } .gi-minimum small i.refus { color: var(--contrainte); }
.gi-marge { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px dashed var(--ligne); }
.gi-marge > b { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--objectif); }
.gi-marge > b svg { width: 16px; height: 16px; }
.gi-avance summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; }
.gi-avance summary::before { content: "▸"; font-size: 13px; color: var(--doux); }
.gi-avance[open] summary::before { content: "▾"; }
.gi-sous { font: 700 11px "Manrope", sans-serif; color: var(--doux); text-transform: uppercase; margin-top: 4px; }
.gi-cci { display: grid; grid-template-columns: 34px 110px repeat(6, minmax(0, 1fr)) 120px; gap: 6px; align-items: center; }
.gi-cci b { font-weight: 800; }
.gi-cci small { font-size: 11px; color: var(--doux); }
.gi-ecarts { display: grid; grid-template-columns: 54px repeat(4, minmax(0, 1fr)); gap: 6px; align-items: center; }
.gi-ecarts small { font: 700 11px "Manrope", sans-serif; color: var(--doux); }
.gi-json { min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--ligne); background: var(--surface2); font: 400 12px "JetBrains Mono", monospace; resize: vertical; }
.gi-regles { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.4; }
.gi-regles li::marker { color: var(--entree); }
.gi-module { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--ligne); background: var(--surface2); }
.gi-module small { font: 700 11px "Manrope", sans-serif; }
.gi-module b { font-size: 14px; } .gi-module span { font-size: 12px; color: var(--doux); }
.gi-module.entree { border-color: var(--entree); } .gi-module.entree small { color: var(--entree); }
.gi-module.sortie { border-color: var(--sortie); } .gi-module.sortie small { color: var(--sortie); }
.gi-module.contrainte { border-color: var(--contrainte); } .gi-module.contrainte small { color: var(--contrainte); }
.gi-ligne { display: flex; gap: 8px; align-items: baseline; padding: 4px 2px; font: 400 12px "JetBrains Mono", monospace; }
.gi-ligne b { min-width: 30px; font-weight: 700; }
.gi-ligne.achat { color: #0E7C61; } .gi-ligne.vente { color: #B5641A; } .gi-ligne.perte { color: var(--perte); }
.gi-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.gi-ctrl { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.gi-ctrl svg { width: 16px; height: 16px; }
.gi-ctrl.ok { color: #0E7C61; } .gi-ctrl.refus { color: var(--perte); }
/* M2s : mode simple de la grille infinie (spec GI-26 à GI-33, maquette Penpot M2s) */
.gs-saisies { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.15fr) minmax(0, 1.15fr); }
.gs-pm { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 4px; }
.gs-pm .ta-saisie { padding: 0 10px; }
.gs-bouton { height: 41px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface2); font: 700 16px "Manrope", sans-serif; color: var(--texte); cursor: pointer; }
.gs-bouton:hover { border-color: var(--principal); }
.gs-valeur { font-size: 13px; font-weight: 600; }
.gs-table { display: flex; flex-direction: column; gap: 4px; }
.gs-entete, .gs-ligne { display: grid; grid-template-columns: 1fr 0.8fr 1.5fr 1.5fr 0.9fr; gap: 8px; align-items: center; padding: 6px 12px; }
.gs-entete span { font: 700 11px "Manrope", sans-serif; color: var(--doux); text-transform: uppercase; }
.gs-ligne { border: 1px solid transparent; border-radius: 8px; background: var(--surface2); font: 400 13px "JetBrains Mono", monospace; color: var(--texte); text-align: left; cursor: pointer; }
.gs-ligne:nth-child(odd) { background: var(--surface); }
.gs-ligne:hover { border-color: var(--ligne); }
.gs-ligne.choisi { border-color: var(--entree); background: #E8F6F1; color: #0E7C61; font-weight: 700; }
.gs-ligne small { font: 700 11px "Manrope", sans-serif; color: #0E7C61; }
.gs-lecture { font: 500 13px "Manrope", sans-serif; }
.gs-lecture.morte { color: var(--perte); } .gs-lecture.moyen { color: #B7791F; } .gs-lecture.bon { color: #0E7C61; } .gs-lecture.dort { color: #B7791F; }
.gs-note { font-size: 12px; color: var(--doux); line-height: 1.5; }
.gs-lien { border: 0; padding: 0; background: none; font: 600 12px "Manrope", sans-serif; color: var(--principal); cursor: pointer; text-decoration: underline; }
.gs-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.gs-boite { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface2); }
.gs-boite b { font: 400 13px "JetBrains Mono", monospace; line-height: 1.5; }
.gs-boite small { font-size: 11px; color: var(--doux); }
.gs-boite > b:first-child { font: 700 13px "Manrope", sans-serif; }
.gs-proj span { font-size: 12px; font-weight: 600; }
.gs-proj b { font: 400 15px "JetBrains Mono", monospace; color: #0E7C61; }
.gs-reserve { display: flex; gap: 8px; align-items: baseline; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--ligne); font-size: 12px; font-weight: 600; }
.gs-reserve.ok { border-color: var(--entree); background: #E8F6F1; color: #0E7C61; }
.gs-reserve.avert { border-color: var(--attention); background: #FDF6E3; color: #B7791F; }
.gs-reserve i { font-style: normal; font-weight: 800; }
.gs-cas { font-size: 12px; font-weight: 600; color: var(--doux); }
.gs-avert { font-size: 12px; font-weight: 600; color: #B7791F; }
.gs-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gs-actions button { justify-content: center; }
.gs-etat { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--principal); }
.gs-marge { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); gap: 14px; align-items: end; padding-top: 10px; border-top: 1px dashed var(--ligne); }
.gs-marge > small { font-size: 12px; color: var(--doux); line-height: 1.5; padding-bottom: 4px; }
.gs-marge > small b { color: #B7791F; }
.ta-tuile b.gain { color: var(--gain); } .ta-tuile b.perte { color: var(--perte); }
.ta-tuile small em.gain { color: var(--gain); font-style: normal; } .ta-tuile small em.perte { color: var(--perte); font-style: normal; }