/* Système visuel des pages privées — pensé TÉLÉPHONE D'ABORD.
 *
 * Trois contraintes du mobile commandent tout ce qui suit :
 *
 * 1. PAS DE SURVOL. Une infobulle au hover n'existe pas sur un écran tactile.
 *    Toute valeur qui compte est donc écrite en clair, jamais cachée derrière
 *    un geste. Ce qui supprime aussi le besoin de deviner quoi survoler.
 *
 * 2. PAS DE TABLEAU LARGE. Sept colonnes sur 390 px, c'est soit du
 *    défilement horizontal, soit du texte à 8 px. Les tableaux sont donc
 *    remplacés par des CARTES empilées : une ligne de données = un bloc,
 *    étiquette au-dessus, valeur en dessous.
 *
 * 3. CIBLES TACTILES ≥ 44 px. Tout ce qui se touche respecte cette hauteur.
 *
 * Le reste tient en peu de règles : une seule colonne, bornée à 560 px pour
 * rester lisible sur grand écran aussi ; quatre tailles de texte (11 / 15 /
 * 17 / 32) ; un pas d'espacement de 4.
 *
 * Couleurs : --down (#d03b3b) est à 3,8:1 sur la surface — assez pour une
 * BARRE, pas pour du TEXTE (seuil 4,5:1). Les nombres négatifs portent donc
 * --down-txt (#e05252, mesuré 4,79:1). Et le signe + / − est toujours écrit :
 * la couleur ne porte jamais l'information seule.
 */

:root {
  --bg:#0c0d0f; --surface:#131519; --surface2:#171a1f; --surface3:#1c2026;
  --line:#242830; --line-fort:#2f343d;
  --text:#f2f3f5; --dim:#a8adb6; --faint:#71767f;
  --acc:#4b93e8;
  --up:#2dd4bf; --down:#d03b3b; --down-txt:#e05252; --warn:#e0a01a;
  --r:10px;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
.num { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.pos { color:var(--up); } .neg { color:var(--down-txt); }
a { color:var(--acc); text-decoration:none; }

/* ── Bandeau ───────────────────────────────────────────────────────────── */
header {
  position:sticky; top:0; z-index:30;
  background:rgba(12,13,15,.95); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top)) 16px 0;
}
header .titre {
  display:flex; align-items:baseline; gap:8px; margin-bottom:10px;
}
header h1 {
  margin:0; font-size:15px; font-weight:600; letter-spacing:.2px;
}
header .etat { font-size:11px; color:var(--faint); margin-left:auto; }

/* Onglets : la navigation entre les deux pages, au pouce. 44 px de haut. */
nav { display:flex; gap:4px; }
nav a {
  flex:1; text-align:center; padding:0 10px; height:44px; line-height:44px;
  font-size:13px; font-weight:500; color:var(--dim);
  border-bottom:2px solid transparent;
}
nav a[aria-current="page"] { color:var(--text); border-bottom-color:var(--acc); }

/* ── Corps ─────────────────────────────────────────────────────────────── */
main { max-width:560px; margin:0 auto; padding:16px 16px 56px; }
section { margin-bottom:24px; }
h2 {
  margin:0 0 4px; font-size:11px; font-weight:600; letter-spacing:.8px;
  text-transform:uppercase; color:var(--faint);
}
.intro { margin:0 0 12px; font-size:13px; color:var(--dim); }

/* ── Le chiffre qui répond ─────────────────────────────────────────────── */
.verdict {
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--down); border-radius:var(--r);
  padding:16px;
}
.verdict.ok { border-left-color:var(--up); }
.verdict .lib { font-size:11px; letter-spacing:.8px; text-transform:uppercase;
                color:var(--faint); }
.verdict .gros { font-size:32px; font-weight:650; line-height:1.15; margin-top:6px;
                 letter-spacing:-.5px; }
.verdict p { margin:10px 0 0; font-size:13px; color:var(--dim); }

/* ── Carte de données ──────────────────────────────────────────────────── */
/* Remplace la ligne de tableau. Titre, chiffre dominant, barre, puis les
   détails en paires étiquette/valeur qui se replient toutes seules. */
.carte {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 14px; margin-bottom:8px;
}
.carte.phare { border-color:var(--line-fort); background:var(--surface2); }
.carte .haut { display:flex; align-items:baseline; gap:10px; }
.carte .nom { font-size:15px; font-weight:550; flex:1; min-width:0;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.carte .val { font-size:17px; font-weight:650; white-space:nowrap; }
.carte .ss { font-size:11px; color:var(--faint); margin-top:2px; }

/* Barre ancrée au zéro : la polarité se lit sans lire le chiffre. */
.piste { position:relative; height:8px; margin:10px 0 2px;
         background:var(--surface3); border-radius:4px; overflow:hidden; }
.piste .zero { position:absolute; top:0; bottom:0; width:1px;
               background:var(--line-fort); left:50%; }
.piste .barre { position:absolute; top:0; height:8px; border-radius:4px; }

/* Paires étiquette/valeur : la grille se réduit à 2 colonnes sur petit écran
   plutôt que de déborder. */
.faits { display:grid; grid-template-columns:repeat(auto-fit,minmax(74px,1fr));
         gap:8px 10px; margin-top:10px;
         border-top:1px solid var(--line); padding-top:10px; }
.fait .l { font-size:11px; color:var(--faint); }
.fait .v { font-size:13px; font-weight:550; margin-top:1px; }

/* ── Remarque ──────────────────────────────────────────────────────────── */
.note {
  background:var(--surface2); border:1px solid var(--line);
  border-left:3px solid var(--warn); border-radius:var(--r);
  padding:12px 14px; font-size:13px; color:var(--dim); margin-top:12px;
}
.note strong { color:var(--text); }
.note.info { border-left-color:var(--acc); }

/* ── Les règles en clair ───────────────────────────────────────────────── */
/* Replié par défaut : la carte doit rester lisible d'un coup d'œil. Qui veut
   savoir COMMENT ça achète déplie. <details> est natif — accessible au
   clavier, au lecteur d'écran, et sans une ligne de JavaScript. */
.regles { margin-top:10px; border-top:1px solid var(--line); }
.regles summary {
  list-style:none; cursor:pointer; min-height:44px; display:flex;
  align-items:center; gap:6px; font-size:13px; color:var(--acc);
}
.regles summary::-webkit-details-marker { display:none; }
.regles summary::before { content:"▸"; font-size:11px; transition:transform .15s; }
.regles[open] summary::before { transform:rotate(90deg); }
.rbloc { padding:0 0 6px; }
.rtitre {
  font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase;
  color:var(--faint); margin:10px 0 6px;
}
.regle { display:grid; grid-template-columns:104px 1fr; gap:10px; padding:5px 0;
         font-size:13px; }
.regle .rq { color:var(--faint); }
.regle .rr { color:var(--dim); }
.regle .rr strong { color:var(--text); font-weight:600; }
/* La règle qui s'applique à toutes les stratégies, et qu'on oublie le plus. */
.regle.cle { background:var(--surface3); border-radius:6px;
             padding:8px 10px; margin-top:6px; grid-template-columns:1fr; gap:2px; }
.regle.cle .rq { color:var(--warn); font-weight:600; }
@media (max-width:420px) {
  .regle { grid-template-columns:1fr; gap:1px; }
  .regle .rq { font-size:11px; }
}

/* ── Historique des trades ─────────────────────────────────────────────── */
/* Une ligne par position : date + token à gauche, résultat à droite, et la
   raison de la sortie en dessous. Pas de tableau — sur 390 px, six colonnes
   deviennent illisibles. */
.jrn { margin-top:2px; }
.jl {
  display:grid; grid-template-columns:1fr auto; gap:2px 10px;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:13px;
}
.jl:last-child { border-bottom:0; }
.jl .jt { color:var(--text); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
          font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Adresse de contrat, copiable au doigt ─────────────────────────────── */
/* Un vrai <button> plutôt qu'un <span> cliquable : focalisable au clavier,
   annoncé comme actionnable par un lecteur d'écran, et activable à l'Entrée.
   La zone tactile déborde volontairement du texte (padding négatif compensé)
   pour atteindre une cible confortable sans décaler la mise en page. */
.ca {
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:0; padding:6px 6px 6px 0; margin:-6px 0 -6px 0;
  font:inherit; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px; color:var(--text); cursor:pointer; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ca::after {
  content:"⧉"; font-size:11px; color:var(--faint); flex:none;
  font-family:ui-sans-serif,system-ui,sans-serif;
}
.ca:hover, .ca:focus-visible { color:var(--acc); }
.ca:focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:4px; }
.ca.copie { color:var(--up); }
.ca.copie::after { content:"copié ✓"; color:var(--up); font-size:11px; }
.ca.rate.copie::after { content:"échec"; color:var(--down-txt); }
.jl .jr { font-weight:650; text-align:right; white-space:nowrap;
          font-variant-numeric:tabular-nums; }
.jl .jd { color:var(--faint); font-size:11px; }
.jl .jp { color:var(--faint); font-size:11px; text-align:right; white-space:nowrap;
          font-variant-numeric:tabular-nums; }
.jrn .jtot {
  display:flex; justify-content:space-between; gap:10px; padding:10px 0 2px;
  margin-top:4px; border-top:1px solid var(--line-fort); font-size:13px;
}
.jrn .jtot .l { color:var(--faint); }
.jplus {
  display:block; width:100%; min-height:44px; margin-top:8px; cursor:pointer;
  background:var(--surface3); border:1px solid var(--line-fort); border-radius:8px;
  color:var(--acc); font:inherit; font-size:13px;
}
.jcharge { color:var(--faint); font-size:13px; padding:14px 0; text-align:center; }

.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
.etiq { display:inline-block; font-size:11px; padding:1px 7px; border-radius:20px;
        background:var(--surface3); color:var(--dim); }
.etiq.chaud { color:var(--warn); }
.vide { color:var(--faint); font-size:13px; padding:20px 0; text-align:center; }
.pied { color:var(--faint); font-size:11px; margin-top:20px;
        border-top:1px solid var(--line); padding-top:12px; }

/* Repli : sur grand écran on s'autorise deux colonnes de cartes, rien de plus.
   La page reste la même, elle respire juste davantage. */
@media (min-width:720px) {
  main { max-width:900px; }
  .grille2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .grille2 .carte { margin-bottom:0; }
}