/* ==========================================================================
   PaperTrade — COMPOSANTS DU SYSTÈME (refonte visuelle, 16/09/2026)
   --------------------------------------------------------------------------
   Chargé après theme.css. Un seul vocabulaire pour toute l'application :
   panneaux, cartes (instrument, portefeuille, compétition, watchlist),
   pastilles de marché, badges de performance, en-têtes de section, tableaux,
   formulaires, fenêtres, états vides, capsules d'information, animations.
   ========================================================================== */

/* --- 1. En-tête de page et de section ------------------------------------ */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e4);
}
.page-head h1 { font-size: var(--t-2xl); font-weight: 650; letter-spacing: -.03em; margin: 0; }
.page-head .sub, .page-head .hint { color: var(--texte-dim); font-size: var(--t-md); margin-top: 6px; max-width: 92ch; }
.page-tools { display: flex; gap: var(--e2); flex-wrap: wrap; }

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); margin: var(--e5) 0 var(--e3);
}
.section-head h2 { font-size: var(--t-lg); font-weight: 600; margin: 0; display: flex; align-items: center; gap: var(--e2); }
.section-head .sub { color: var(--texte-faible); font-size: var(--t-sm); }
.section-head a { font-size: var(--t-sm); color: var(--bleu-clair); white-space: nowrap; }
.section-head .trait { flex: 1 1 auto; height: 1px; background: var(--ligne); }
.section-title {
  display: flex; align-items: center; gap: var(--e3); margin: var(--e5) 0 var(--e3);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--texte-faible);
}
.section-title::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--ligne); }

/* --- 2. Panneaux et cartes génériques ------------------------------------ */
.panel {
  position: relative;
  border: 1px solid var(--ligne); border-radius: var(--r-lg);
  background: var(--degrade-surface), var(--surface);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e4) var(--e5); border-bottom: 1px solid var(--ligne);
}
.panel-head h2 { font-size: var(--t-md); font-weight: 600; letter-spacing: .01em; margin: 0; }
.panel-head .sub { font-size: var(--t-sm); color: var(--texte-faible); }
.panel-body { padding: var(--e4) var(--e5); }
.panel-body > * + * { margin-top: var(--e3); }
.card, .mkt-card, .pp-card, .cp-card {
  border: 1px solid var(--ligne); border-radius: var(--r-lg);
  background: var(--degrade-surface), var(--surface);
  box-shadow: var(--ombre-carte);
}
.card { transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans); }
.card:hover { transform: translateY(-2px); border-color: var(--ligne-bleue); box-shadow: var(--ombre-haute); }
.enveloppe { display: flex; flex-direction: column; gap: var(--e4); }

/* --- 3. HERO (accueil) --------------------------------------------------- */
/* `:not(.kpi)` : `.kpi.hero` désigne la carte de statistiques principale du
   détail de partie (styles.css). Sans cette exclusion, la carte héritait de la
   grille à deux colonnes, de la hauteur minimale, du fond illustré et de
   l'`overflow: hidden` du hero d'accueil — sa valeur était écrasée et coupée. */
.hero:not(.kpi) {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--e5); min-height: 210px;
  padding: var(--e6);
  border: 1px solid var(--ligne-forte); border-radius: var(--r-xl);
  background-image: url("/assets/horizon.svg"), var(--degrade-hero);
  background-size: cover, cover; background-position: center, center;
  box-shadow: var(--ombre-haute);
}
.hero:not(.kpi)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 12, 24, .92) 0%, rgba(7, 12, 24, .55) 52%, rgba(7, 12, 24, .18) 100%);
}
.hero-contenu { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--e3); justify-content: center; }
.hero-etiquette {
  display: inline-flex; align-items: center; gap: var(--e2); align-self: flex-start;
  padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid rgba(139, 92, 246, .45); background: rgba(139, 92, 246, .14);
  color: var(--violet-clair); font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.hero h1 {
  font-size: var(--t-hero); line-height: 1.06; font-weight: 700; letter-spacing: -.035em; margin: 0;
}
.hero h1 .accent {
  background: linear-gradient(100deg, var(--bleu-clair), var(--violet-clair) 60%, var(--corail) 110%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { margin: 0; color: var(--texte-dim); font-size: var(--t-lg); max-width: 48ch; }
.hero-actions { display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e2); }

/* Trois chiffres clés du hero : capital de départ, argent réel, simulation. */
.hero-chiffres { display: flex; flex-wrap: wrap; gap: var(--e5); margin-top: var(--e2); }
.hero-chiffre { display: flex; flex-direction: column; gap: 3px; }
.hero-chiffre .v {
  font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--texte);
}
.hero-chiffre .l {
  font-size: var(--t-xs); color: var(--texte-faible);
  text-transform: uppercase; letter-spacing: .09em;
}
.hero-slogan {
  position: relative; z-index: 1; align-self: end; justify-self: end;
  display: flex; gap: var(--e3); flex-wrap: wrap; justify-content: flex-end;
  font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--texte-faible);
}
.hero-slogan span + span::before { content: "·"; margin-right: var(--e3); color: var(--bleu-clair); }
@media (max-width: 900px) {
  .hero:not(.kpi) { grid-template-columns: minmax(0, 1fr); padding: var(--e5) var(--e4); min-height: 0; }
  .hero h1 { font-size: clamp(26px, 7.4vw, 34px); }
  .hero p { font-size: var(--t-md); }
  .hero-slogan { justify-content: flex-start; }
}

/* --- 4. Indicateurs de performance -------------------------------------- */
.perf { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; font-weight: 600; }
.perf.hausse { color: var(--vert-clair); }
.perf.baisse { color: var(--corail-clair); }
.perf.neutre { color: var(--texte-dim); }
.perf .fleche { font-size: .85em; }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
  border: 1px solid var(--ligne-forte); color: var(--texte-dim); background: rgba(255, 255, 255, .05);
}
.badge.hausse { color: var(--vert-clair); border-color: rgba(16, 185, 129, .4); background: rgba(16, 185, 129, .13); }
.badge.baisse { color: var(--corail-clair); border-color: rgba(255, 107, 107, .4); background: rgba(255, 107, 107, .13); }
.badge.actif { color: var(--vert-clair); border-color: rgba(16, 185, 129, .45); background: rgba(16, 185, 129, .16); }
.badge.info { color: var(--bleu-clair); border-color: rgba(59, 130, 246, .45); background: rgba(59, 130, 246, .15); }
.badge.accent { color: var(--violet-clair); border-color: rgba(139, 92, 246, .45); background: rgba(139, 92, 246, .15); }
.badge.alerte { color: var(--corail-clair); border-color: rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .15); }
.tag { background: rgba(255, 255, 255, .06); border: 1px solid var(--ligne); border-radius: var(--r-xs); padding: 2px 8px; font-size: var(--t-xs); }
.tag.buy, .tag.up { color: var(--vert-clair); background: rgba(16, 185, 129, .14); border-color: rgba(16, 185, 129, .3); }
.tag.sell, .tag.down { color: var(--corail-clair); background: rgba(255, 107, 107, .14); border-color: rgba(255, 107, 107, .3); }
.pill { border-radius: var(--r-pill); border: 1px solid var(--ligne-forte); background: rgba(255, 255, 255, .05); padding: 3px 10px; font-size: var(--t-xs); }
.pill.info { color: var(--bleu-clair); border-color: rgba(59, 130, 246, .4); background: rgba(59, 130, 246, .14); }
.pill.ok { color: var(--vert-clair); border-color: rgba(16, 185, 129, .4); background: rgba(16, 185, 129, .14); }
.pill.warn { color: #fbbf24; border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .12); }
.up { color: var(--vert-clair); }
.down { color: var(--corail-clair); }

/* --- 5. Pastilles de marché (chips) ------------------------------------ */
.filtres {
  display: flex; gap: var(--e2); flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 10px;
  scrollbar-width: none;
}
.filtres::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  height: 38px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1px solid var(--ligne); background: rgba(255, 255, 255, .04);
  color: var(--texte-dim); font-size: var(--t-sm); font-weight: 550; font-family: var(--police);
  cursor: pointer; transition: all var(--trans); white-space: nowrap;
}
.chip:hover { color: var(--texte); border-color: var(--ligne-forte); background: rgba(255, 255, 255, .07); }
.chip.active {
  color: #fff; border-color: transparent; background: var(--degrade-bleu-violet);
  box-shadow: 0 8px 20px -10px rgba(59, 130, 246, .8);
}
.chip .ico { display: inline-flex; }
.chips { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* --- 6. Grilles ---------------------------------------------------------- */
.grille-instruments { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--e3); }
/* Pages d'instruments : la grille de cartes remplace le tableau. Le tableau reste
   sur les pages réellement tabulaires (positions, historique, classements, admin). */
body[data-page="marches"] .liste-desktop,
body[data-page="actions"] .liste-desktop,
body[data-page="watchlist"] .liste-desktop { display: none; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--e3); }
.grille-parties { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--e3); }
@media (max-width: 860px) {
  .grille-instruments { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--e2); }
  .grille-cartes, .grille-parties { grid-template-columns: minmax(0, 1fr); }
}

/* --- 7. Carte d'instrument (langage unique bureau + mobile) ------------- */
.ic {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nom var" "sym prix" "spark delta";
  column-gap: var(--e3); row-gap: 3px; align-items: center;
  min-height: 96px; padding: 12px 14px;
  border: 1px solid var(--ligne); border-radius: var(--r-lg);
  background: var(--degrade-surface), var(--surface);
  box-shadow: var(--ombre-carte);
  cursor: pointer; transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.ic:hover { transform: translateY(-2px); border-color: var(--ligne-bleue); box-shadow: var(--ombre-haute); }
.ic:active { transform: translateY(0); }
.ic-avec-action {
  grid-template-columns: minmax(0, 1fr) auto 40px;
  grid-template-areas: "nom var action" "sym prix action" "spark delta action";
}
.ic-nom { grid-area: nom; font-size: var(--t-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-var { grid-area: var; font-size: var(--t-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
.ic-sym { grid-area: sym; font-size: var(--t-xs); color: var(--texte-faible); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-prix { grid-area: prix; font-size: var(--t-md); font-weight: 550; font-variant-numeric: tabular-nums; }
.ic-spark { grid-area: spark; display: flex; align-items: center; min-height: 22px; }
.ic-spark > * { width: 100%; height: 22px; display: block; }
.ic-delta { grid-area: delta; font-size: var(--t-xs); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--texte-dim); }
.ic-quand { margin-left: var(--e1); }
.ic-action { grid-area: action; display: flex; align-items: center; justify-content: center; }
.ic-action .star-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.spark { display: block; }
.spark-empty { display: block; height: 22px; border-radius: var(--r-xs); background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }
.spark-up, .spark-haut { stroke: var(--vert-clair); }
.spark-down, .spark-bas { stroke: var(--corail-clair); }
.spark-fill { fill: rgba(16, 185, 129, .16); stroke: none; }
.spark-fill.down { fill: rgba(255, 107, 107, .14); }

/* --- 8. Carte de portefeuille / partie ---------------------------------- */
.carte-partie {
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e4) var(--e4) var(--e3);
  border: 1px solid var(--ligne); border-radius: var(--r-lg);
  background: var(--degrade-surface), var(--surface);
  box-shadow: var(--ombre-carte);
  transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.carte-partie:hover { transform: translateY(-2px); border-color: var(--ligne-bleue); box-shadow: var(--ombre-haute); }
.carte-partie.actif { border-color: var(--ligne-bleue); box-shadow: var(--halo-bleu); }
.carte-partie-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e2); }
.carte-partie-tete .nom { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.02em; }
.carte-partie-tete .meta { font-size: var(--t-xs); color: var(--texte-faible); margin-top: 3px; }
.carte-partie-valeur { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; }
.carte-partie-valeur .montant { font-size: var(--t-2xl); font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.carte-partie .courbe { height: 44px; }
.carte-partie-pied { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); font-size: var(--t-xs); color: var(--texte-faible); }
.carte-partie-actions { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* --- 9. Carte de compétition -------------------------------------------- */
.cp-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--e3); }
.cp-carte {
  border: 1px solid var(--ligne); border-radius: var(--r-lg);
  background: var(--degrade-surface), var(--surface); box-shadow: var(--ombre-carte);
  transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.cp-carte:hover { transform: translateY(-2px); border-color: rgba(139, 92, 246, .45); box-shadow: var(--ombre-haute); }
.cp-carte-lien { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4); color: inherit; }
.cp-carte-tete { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.cp-carte-tete b { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.02em; }
.cp-carte-tete .trophee { color: #fbbf24; display: inline-flex; }
.cp-carte-meta { font-size: var(--t-sm); color: var(--texte-dim); }
.cp-carte-meta.faint { font-size: var(--t-xs); color: var(--texte-faible); }
.cp-carte-resultat { font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--texte-dim); border-top: 1px dashed var(--ligne); padding-top: var(--e2); }
.cp-bandeau {
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  padding: var(--e4); border-radius: var(--r-lg);
  border: 1px solid rgba(139, 92, 246, .32);
  background: linear-gradient(100deg, rgba(59, 130, 246, .16), rgba(139, 92, 246, .1) 60%, transparent);
}
.cp-compte { font-size: var(--t-2xl); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cp-moi { background: rgba(59, 130, 246, .1); }
.cp-moi td:first-child { box-shadow: inset 3px 0 0 var(--bleu); }

/* --- 10. Tableaux -------------------------------------------------------- */
.table-scroll { overflow-x: auto; overflow-y: clip; border-radius: var(--r-lg); }
table { width: 100%; border-collapse: collapse; }
thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 11px var(--e3); text-align: left;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-faible); background: var(--surface-2); border-bottom: 1px solid var(--ligne);
}
thead th[data-sort], thead th.sortable { cursor: pointer; }
tbody td { padding: 11px var(--e3); border-bottom: 1px solid var(--ligne); font-size: var(--t-md); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(255, 255, 255, .03); }
tbody tr.clickable { cursor: pointer; }
.sym { font-weight: 600; }
.sub-name { font-size: var(--t-xs); color: var(--texte-faible); }
.admin-table { min-width: 720px; }

/* --- 11. Champs et formulaires ------------------------------------------ */
input, select, textarea {
  min-height: 44px; padding: 10px 14px;
  border-radius: var(--r-sm); border: 1px solid var(--ligne-forte);
  background: rgba(255, 255, 255, .04); color: var(--texte);
  font-family: var(--police); font-size: var(--t-md);
}
input:focus, select:focus, textarea:focus { border-color: var(--ligne-bleue); outline: none; box-shadow: var(--halo-bleu); background: rgba(59, 130, 246, .06); }
input[type="number"] { font-variant-numeric: tabular-nums; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field > span:first-child { font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-faible); }
.field .hint, .field .sub { font-size: var(--t-xs); color: var(--texte-faible); }
.field.error input { border-color: rgba(255, 107, 107, .6); }
.cp-form { display: flex; flex-direction: column; gap: var(--e4); }
.cp-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e4); }
.cp-marches { display: flex; flex-wrap: wrap; gap: var(--e2); }
.cp-marche { display: inline-flex; align-items: center; gap: var(--e2); padding: 8px 12px; border: 1px solid var(--ligne); border-radius: var(--r-pill); background: rgba(255,255,255,.04); font-size: var(--t-sm); }
.cp-marche input { min-height: 0; }
.cp-message { font-size: var(--t-sm); color: var(--texte-dim); }
.cp-message.ok { color: var(--vert-clair); }
.cp-message.ko { color: var(--corail-clair); }

/* --- 12. Fenêtres, aide, infobulles ------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-flottant);
  display: grid; place-items: center; padding: var(--e4);
  background: rgba(4, 8, 18, .74); backdrop-filter: blur(6px);
  overflow-y: auto; overscroll-behavior: contain;
}
.modal {
  width: 100%; max-width: 420px;
  max-height: 85vh; max-height: calc(100dvh - 2 * var(--e4));
  display: flex; flex-direction: column;
  border: 1px solid var(--ligne-forte); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--ombre-haute);
}
.modal > .panel-head, .modal > .modal-head { flex: 0 0 auto; }
.modal > .panel-body, .modal > .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.aide-panneau { max-width: 720px; }
.aide-panneau dt { font-weight: 600; color: var(--texte); margin-top: var(--e3); }
.aide-panneau dd { margin: 3px 0 0; color: var(--texte-dim); font-size: var(--t-sm); line-height: 1.55; }
.aide-entree { background: none; border: 0; color: var(--bleu-clair); font: inherit; cursor: pointer; text-decoration: underline; }
.aide-puce {
  display: inline-flex; align-items: center; justify-content: center;
  /* Discrétion (25/09) : c'était un bouton de 22 px très contrasté au milieu des
     phrases, qui attirait l'œil plus que le texte qu'il explique. Elle reste
     lisible, mais s'efface au repos ; la zone tactile est élargie en permanence
     (et plus seulement sur téléphone), donc elle reste facile à viser au doigt. */
  width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--ligne); background: transparent;
  color: var(--texte-faible); font-size: var(--t-xs); line-height: 1; cursor: help;
  vertical-align: super; margin-left: 3px; position: relative; opacity: .75;
}
.aide-puce::after { content: ""; position: absolute; inset: -13px; }
.aide-puce:hover, .aide-puce:focus-visible { color: #fff; border-color: var(--violet); background: rgba(139, 92, 246, .2); opacity: 1; }
.aide-bulle {
  display: none; margin-top: 6px; padding: 10px 12px;
  border-left: 2px solid var(--violet); border-radius: var(--r-xs);
  background: var(--surface-3); color: var(--texte-dim); font-size: var(--t-sm); max-width: 60ch;
}
.aide-bulle.ouverte { display: block; }
@media (max-width: 860px) { .aide-puce { position: relative; } .aide-puce::after { content: ""; position: absolute; inset: -11px; } }

/* --- 13. Capsule d'information (Story) ---------------------------------- */
.capsule {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) var(--e4); border-radius: var(--r-lg);
  border: 1px solid rgba(59, 130, 246, .28);
  background: linear-gradient(100deg, rgba(59, 130, 246, .12), rgba(139, 92, 246, .07) 70%, transparent);
  color: var(--texte-dim); font-size: var(--t-sm); line-height: 1.5;
}
.capsule .capsule-ico { flex: 0 0 auto; color: var(--bleu-clair); }
.capsule b, .capsule strong { color: var(--texte); }
.capsule .capsule-plus { display: block; margin-top: 4px; color: var(--bleu-clair); font-size: var(--t-xs); }
.depuis-visite { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: center; }
.cmp-ligne { display: flex; justify-content: space-between; gap: var(--e3); padding: 6px 0; border-bottom: 1px dashed var(--ligne); font-size: var(--t-sm); }
.cmp-ligne:last-child { border-bottom: 0; }

/* --- 14. États vides, squelettes, notifications ------------------------- */
.empty, .etat-vide {
  display: flex; flex-direction: column; gap: var(--e2); align-items: flex-start;
  padding: var(--e5); color: var(--texte-dim); font-size: var(--t-sm); line-height: 1.55;
}
.empty::before { content: ""; width: 40px; height: 3px; border-radius: var(--r-pill); background: var(--degrade-bleu-violet); }
.empty .hint { color: var(--texte-faible); font-size: var(--t-xs); }
.load-strip { height: 3px; border-radius: var(--r-pill); background: linear-gradient(90deg, transparent, var(--bleu), var(--violet), transparent); background-size: 240px 100%; animation: charge 1.1s linear infinite; }
.load-block { height: 84px; margin-top: var(--e3); border-radius: var(--r-lg); background: linear-gradient(90deg, rgba(255,255,255,.045), rgba(255,255,255,.02), rgba(255,255,255,.045)); background-size: 300px 100%; animation: charge 1.4s linear infinite; }
@keyframes charge { from { background-position: -240px 0; } to { background-position: 240px 0; } }
.toast-root { position: fixed; right: var(--e4); bottom: var(--e4); z-index: calc(var(--z-flottant) + 10); display: flex; flex-direction: column; gap: var(--e2); max-width: 360px; }
.toast {
  padding: var(--e3) var(--e4); border-radius: var(--r); border: 1px solid var(--ligne-forte);
  background: var(--surface-2); color: var(--texte); font-size: var(--t-sm); box-shadow: var(--ombre-haute);
  animation: arrivee .28s cubic-bezier(.32,.72,.28,1);
}
.toast.success, .toast.ok { border-left: 3px solid var(--vert); }
.toast.error { border-left: 3px solid var(--corail); }
.toast.info { border-left: 3px solid var(--bleu); }
.warn-banner { padding: var(--e3) var(--e4); border-radius: var(--r); border: 1px solid rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .1); color: #fde68a; font-size: var(--t-sm); }

/* --- 15. Graphiques ----------------------------------------------------- */
.chart-wrap { position: relative; border-radius: var(--r); }
.chart-legend {
  display: inline-block; min-width: 200px; margin: 0 0 var(--e2); padding: 8px 12px;
  border: 1px solid var(--ligne); border-radius: var(--r-sm); background: var(--surface-2);
  color: var(--texte-dim); font-size: var(--t-xs); line-height: 1.5; white-space: pre-line;
}
.chart-note, .data-info { font-size: var(--t-xs); color: var(--texte-faible); }
.range-btn {
  min-height: 34px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--ligne); background: transparent; color: var(--texte-dim);
  font-family: var(--police); font-size: var(--t-sm); cursor: pointer; transition: all var(--trans);
}
.range-btn:hover { color: var(--texte); background: rgba(255, 255, 255, .06); }
.range-btn.active { color: #fff; border-color: transparent; background: var(--degrade-bleu-violet); }

/* --- 16. Panneau d'ordres ---------------------------------------------- */
.order-panel { border: 1px solid var(--ligne); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.order-switch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); padding: var(--e3) var(--e3) 0; }
.order-switch button {
  min-height: 46px; border-radius: var(--r-sm); border: 1px solid var(--ligne-forte);
  background: rgba(255, 255, 255, .04); color: var(--texte-dim);
  font-family: var(--police); font-size: var(--t-sm); font-weight: 700; letter-spacing: .08em; cursor: pointer;
  transition: all var(--trans);
}
.order-switch button.buy.active { background: rgba(16, 185, 129, .18); border-color: var(--vert); color: var(--vert-clair); }
.order-switch button.sell.active { background: rgba(255, 107, 107, .16); border-color: var(--corail); color: var(--corail-clair); }
.order-body { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4); }
.order-actions { padding: 0 var(--e4) var(--e4); }
.quote-box, #order-lines { display: flex; flex-direction: column; gap: 6px; padding: var(--e3); border-radius: var(--r-sm); background: rgba(255, 255, 255, .03); font-size: var(--t-sm); color: var(--texte-dim); }
.quote-box .line, #order-lines .line { display: flex; justify-content: space-between; gap: var(--e3); }
.quote-box .line.total, #order-lines .line.total { color: var(--texte); font-weight: 600; }
.quote-box b, #order-lines b { font-variant-numeric: tabular-nums; color: var(--texte); }
.stepper { display: flex; align-items: center; gap: var(--e2); }
.stepper button { width: 44px; min-height: 44px; border-radius: var(--r-sm); border: 1px solid var(--ligne-forte); background: rgba(255,255,255,.05); color: var(--texte); font-size: 18px; cursor: pointer; }
.stepper input { flex: 1 1 auto; }

/* --- 17. Authentification ---------------------------------------------- */
.auth-page { display: grid; place-items: center; min-height: 100vh; padding: var(--e5) var(--e4); }
.auth-carte, .auth-form, .page-auth {
  width: 100%; max-width: 460px; padding: var(--e6);
  border: 1px solid var(--ligne-forte); border-radius: var(--r-xl);
  background: var(--degrade-surface), var(--surface); box-shadow: var(--ombre-haute);
}
.auth-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--e4); border-radius: var(--r-pill); background: rgba(255, 255, 255, .05); }
.auth-tabs button {
  min-height: 38px; padding: 0 18px; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--texte-dim); font-family: var(--police); font-size: var(--t-sm); font-weight: 600; cursor: pointer;
}
.auth-tabs button.active { color: #fff; background: var(--degrade-bleu-violet); }
.auth-page h1, .auth-carte h1 { font-size: var(--t-2xl); letter-spacing: -.03em; }
.auth-page .sub { color: var(--texte-dim); }
.auth-submit { width: 100%; }

/* --- 18. Tutoriel (bandeau actionnel) --------------------------------- */
.tuto-barre {
  position: fixed; z-index: calc(var(--z-rail) + 5); left: 50%; transform: translateX(-50%);
  right: auto; width: min(560px, calc(100vw - 24px));
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  padding: var(--e4); border: 1px solid var(--ligne-forte); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-2) 96%, transparent); backdrop-filter: blur(12px);
  box-shadow: var(--ombre-haute); max-height: 60vh; overflow-y: auto; overscroll-behavior: contain;
}
.tuto-barre h3 { font-size: var(--t-lg); margin: 2px 0 6px; }
.tuto-barre p { font-size: var(--t-sm); color: var(--texte-dim); line-height: 1.55; }
.tuto-pas { font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-clair); }
.tuto-passer { background: none; border: 0; color: var(--texte-faible); font: inherit; font-size: var(--t-xs); text-decoration: underline; cursor: pointer; min-height: 32px; }
.tuto-consigne { display: flex; align-items: center; gap: 6px; margin: var(--e2) 0; color: var(--bleu-clair); font-size: var(--t-xs); }
.tuto-attente { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.tuto-barre-pied { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin-top: var(--e3); }
.tuto-cible { position: relative; z-index: calc(var(--z-rail) + 6); outline: 2px solid var(--violet); outline-offset: 3px; border-radius: var(--r-sm); box-shadow: none; }
@media (min-width: 861px) { .tuto-barre { left: var(--e6); transform: none; bottom: var(--e6); } }

/* --- 19. Barre d'horaires de marché ------------------------------------ */
.msbar {
  display: flex; align-items: center; gap: var(--e2); padding: 8px var(--e5);
  border-bottom: 1px solid var(--ligne); background: rgba(255, 255, 255, .02);
  overflow-x: auto; scrollbar-width: none;
}
.msbar::-webkit-scrollbar { display: none; }
.ms-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  min-height: 30px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--ligne); background: rgba(255, 255, 255, .04);
  font-size: var(--t-xs); color: var(--texte-dim); white-space: nowrap;
}
.ms-pill.ouvert { color: var(--vert-clair); border-color: rgba(16, 185, 129, .35); }
.ms-pill.ferme { color: var(--texte-faible); }
.ms-link { color: var(--bleu-clair); font-size: var(--t-xs); white-space: nowrap; }
.ms-close { background: none; border: 0; color: var(--texte-faible); cursor: pointer; }

/* --- 20. Sélecteur de partie et compte (en-tête) ---------------------- */
.party-btn {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 42px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--ligne-forte); background: rgba(255, 255, 255, .05); color: var(--texte);
  font-family: var(--police); font-size: var(--t-sm); cursor: pointer; transition: all var(--trans);
}
.party-btn:hover { border-color: var(--ligne-bleue); background: rgba(59, 130, 246, .12); }
.party-btn .pb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }
.party-btn .pb-label { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-faible); }
.party-btn .pb-name { font-weight: 600; }
.party-btn .pb-value { font-variant-numeric: tabular-nums; color: var(--texte-dim); }
.party-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-flottant);
  min-width: 280px; padding: 6px; border: 1px solid var(--ligne-forte); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--ombre-haute);
}
.party-menu .pm-head { padding: 8px 12px; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-faible); }
.party-menu .pm-item { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; }
.party-menu .pm-item:hover { background: rgba(255, 255, 255, .06); }
.party-menu .pm-item.current { background: rgba(59, 130, 246, .14); box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .3); }
.party-menu .pm-name { font-weight: 600; font-size: var(--t-sm); }
.party-menu .pm-meta { font-size: var(--t-xs); color: var(--texte-faible); }
.btn-compte, .account-btn {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 42px; padding: 0 12px 0 8px; border-radius: var(--r-pill);
  border: 1px solid var(--ligne); background: rgba(255, 255, 255, .04); color: var(--texte);
  font-family: var(--police); font-size: var(--t-sm); cursor: pointer;
}
.avatar, .compte-initiales {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--degrade-bleu-violet); color: #fff; font-size: var(--t-xs); font-weight: 700;
}
.supervision { font-size: var(--t-xs); color: var(--texte-faible); }
.sources { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--ligne); font-size: var(--t-xs); color: var(--texte-dim); }
.sources .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); }

/* --- 21. Pied de page --------------------------------------------------- */
.footer {
  display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); align-items: center; justify-content: space-between;
  padding: var(--e4) var(--e6); border-top: 1px solid var(--ligne);
  color: var(--texte-faible); font-size: var(--t-xs);
}
.footer b { color: var(--texte-dim); }

/* --- 22. KPI (compatibilité : harmonisation visuelle) ------------------ */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--e3); }
.kpi {
  padding: var(--e4); border: 1px solid var(--ligne); border-radius: var(--r-lg);
  background: var(--degrade-surface), var(--surface-2);
}
.kpi-label { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-faible); }
.kpi-value { font-size: var(--t-xl); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: 4px; }
.kpi-sub { font-size: var(--t-xs); color: var(--texte-dim); margin-top: 2px; }
.kpi.hero .kpi-value, .heros .valeur { font-size: var(--t-3xl); }
.heros { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e3); }
.heros .delta { font-size: var(--t-lg); }

/* --- 23. Animations d'apparition --------------------------------------- */
@keyframes arrivee { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cartes-instruments > *, .grille-instruments > *, .grille-cartes > *, .grille-parties > *, .cp-liste > * {
  animation: arrivee var(--trans-lente) both;
}
.grille-instruments > *:nth-child(n+8), .cartes-instruments > *:nth-child(n+8) { animation-delay: .04s; }

/* ==========================================================================
   24. CORRECTIFS D'AUDIT POST-REFONTE (16/09/2026)
   --------------------------------------------------------------------------
   1) Listes d'instruments visibles à TOUTES les largeurs sur Marchés, Actions
      et Watchlist. `refonte.css` (§21.2) masquait `.cartes-instruments` hors
      mobile — convention d'origine « les cartes sont l'affichage téléphone » —
      alors que ce fichier (§6) masque le tableau `.liste-desktop` sur ces trois
      pages à toutes les largeurs. Au-dessus de 760 px, les DEUX conteneurs
      étaient donc masqués : ces pages ne montraient plus aucun instrument
      (42 instruments chargés, 0 visible). Le composant est unique (`.ic`) :
      seuls la disposition du conteneur et le nombre de colonnes changent.
   ========================================================================== */
body[data-page="marches"] .cartes-instruments,
body[data-page="actions"] .cartes-instruments,
body[data-page="watchlist"] .cartes-instruments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--e3);
}
@media (max-width: 860px) {
  body[data-page="marches"] .cartes-instruments,
  body[data-page="actions"] .cartes-instruments,
  body[data-page="watchlist"] .cartes-instruments {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--e2);
  }
}
/* Téléphone : liste verticale compacte de 82 px — celle qui fonctionne déjà,
   avec les surcharges `.ic` de refonte.css (§21.2). */
@media (max-width: 760px) {
  body[data-page="marches"] .cartes-instruments,
  body[data-page="actions"] .cartes-instruments,
  body[data-page="watchlist"] .cartes-instruments {
    display: flex; flex-direction: column; gap: 6px; padding: 8px;
  }
}

/* --------------------------------------------------------------------------
   2) Carte de statistiques principale (détail de partie) : sa valeur n'est
      jamais coupée. Elle était en 40 px dans une carte de 266 px (347 px de
      texte) et l'ancien `.kpis { overflow: hidden }` masquait le reste.
   -------------------------------------------------------------------------- */
.kpis { overflow: visible; }
.kpis > * { min-width: 0; }
.kpi.hero .kpi-value { font-size: clamp(1.6rem, 1rem + 2vw, var(--t-3xl)); line-height: 1.15; }
@media (min-width: 1001px) {
  /* la valeur principale reçoit la largeur dont elle a besoin, les trois
     autres cartes se partagent le reste */
  .kpis { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi.hero { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   3) Barre supérieure sur téléphone : rien ne dépasse l'écran. Le groupe de
      droite mesurait 423 px (partie + compte + pastille + rafraîchir) dans une
      barre de 390 px : toute la page gagnait 45 px de défilement horizontal.
      Aucune fonction n'est retirée (le nom du compte est dans son menu, la
      valeur de la partie sur l'accueil et « Ma partie ») : la barre se
      contente de tenir dans l'écran.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .appbar { gap: var(--e2); padding: 8px var(--e3); }
  .appbar .search { flex: 1 1 auto; min-width: 0; max-width: none; }
  .appbar .search input[type="search"] { padding-right: 16px; }
  .appbar .raccourci { display: none; }        /* Ctrl+K n'existe pas au doigt */
  .appbar-right { flex: 0 1 auto; min-width: 0; gap: var(--e2); }
  .party-host, .account-host { min-width: 0; }
  .party-btn { min-width: 0; max-width: 148px; }
  .party-btn .pb-name { display: block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-btn { min-width: 0; padding: 6px; }
  .account-btn .acc-nom, .account-btn .acc-role { display: none; }
  /* la navigation basse se partage la largeur de l'écran au lieu de la dépasser */
  .bottomnav { max-width: 100vw; overflow: hidden; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bottomnav > * { min-width: 0; }
  .bottomnav a, .bottomnav .bn-plus { min-width: 0; padding-left: 2px; padding-right: 2px; }
}

/* --------------------------------------------------------------------------
   4) Panneau d'aide (et toute modale) : jamais plus large que l'écran. Le
      panneau mesurait 401 px dans un écran de 390 : le texte du glossaire était
      tronqué à droite, sans moyen de le lire. La largeur de lecture du bureau
      (720 px) est conservée.
   -------------------------------------------------------------------------- */
.aide-panneau { max-width: min(720px, calc(100vw - 24px)); }
.modal-backdrop { padding: 12px; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 760px) {
  .modal { max-height: calc(100dvh - 24px); }
  .modal .panel-body { padding: var(--e4); }
}

/* --------------------------------------------------------------------------
   5) Tableaux en mode « cartes empilées » sur téléphone : plus de défilement
      latéral, et surtout des VALEURS visibles. styles.css (§ responsive,
      antérieur au mode cartes) impose `min-width: 640px` à tous les tableaux
      sous 760 px : dans un cadre de 364 px, la moitié droite — c'est-à-dire les
      valeurs — sortait de l'écran (page Parties : « Capital de départ », etc.
      sans aucun montant en face). Les tableaux qui restent de vrais tableaux
      gardent, eux, leur défilement horizontal.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .table-scroll table.table-cards { min-width: 0; }
  .table-cards td { overflow-wrap: anywhere; }
}

/* --------------------------------------------------------------------------
   5 bis) Page « Mes parties » : cartes au lieu d'un tableau de neuf colonnes.
      Mesuré le 24/09 : le tableau faisait 1 549 px dans un cadre de 1 106 px
      sur bureau — les actions et une partie des valeurs sortaient de l'écran,
      et il fallait défiler horizontalement pour lire sa propre performance.
      La même information tient dans une carte, comme sur la page Marchés.
   -------------------------------------------------------------------------- */
.parties-grille {
  list-style: none; margin: 0; padding: var(--e4);
  display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.carte-partie {
  display: flex; flex-direction: column; gap: var(--e2); min-width: 0;
  padding: var(--e4); border: 1px solid var(--ligne); border-radius: var(--r);
  background: var(--surface-2);
}
.carte-partie--active { border-color: var(--ligne-bleue); box-shadow: var(--halo-bleu); }
.cp-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.cp-tete h3 { margin: 0; overflow-wrap: anywhere; }
.cp-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e2);
  font-size: var(--t-xs); overflow-wrap: anywhere;
}
.cp-actions { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: auto; padding-top: var(--e2); }
.cp-actions .btn { min-height: 40px; }

@media (max-width: 760px) {
  .parties-grille { grid-template-columns: 1fr; padding: var(--e3); }
}

/* --------------------------------------------------------------------------
   6) Lignes secondaires des cellules numériques : elles héritaient du
      `white-space: nowrap` des colonnes de chiffres. La ligne de fraîcheur du
      prix (« il y a 25 s · prix du 16/09/2026 13:47 · marché ouvert ») faisait
      373 px insécables dans un cadre de 364 px : le tableau des positions
      débordait de 200 px et sa dernière colonne était coupée.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .table-cards .sub-name, .table-cards .freshness { white-space: normal; overflow-wrap: anywhere; }
}