/* ── La grille MySyndicate, telephone d'abord (21/09/2026) ───────────────
   Direction validee par Michael : hierarchie Revolut/Robinhood — un chiffre
   dominant, son mouvement a cote, le reste en retrait — energie DraftKings.
   Les trois accents ont un SENS, et jamais deux sur une meme carte :
     or    #D4A94A  early : notre prix, avant le marche
     bleu  #9CBFE0  un marche existe, on se compare
     vert  #3DD68C  un mouvement favorable, et rien d'autre
   Une page qui ne parle d'aucun des trois reste achromatique : c'est le cas
   de la couverture MMA, et c'est voulu — elle ne revendique aucune
   performance, sa couleur ne doit donc rien promettre. */
:root{
  --bg:#07090C; --carte:#10141B; --bord:#242A35;
  --texte:#F3F0EA; --second:#A9B0BB; --discret:#6B717B;
  --or:#D4A94A; --bleu:#9CBFE0; --vert:#3DD68C;
  --titre:"Fraunces",Georgia,serif;
  --corps:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--texte);font-family:var(--corps);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
.enveloppe{max-width:560px;margin:0 auto;padding:0 20px 56px}

/* Barre du haut : cibles tactiles de 44 px. */
.haut{position:sticky;top:0;z-index:10;background:rgba(7,9,12,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--bord);margin:0 -20px 20px;padding:0 20px}
.haut nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.haut nav::-webkit-scrollbar{display:none}
.haut a{flex:none;min-height:44px;display:flex;align-items:center;padding:0 12px;
  color:var(--second);text-decoration:none;font-size:13px;white-space:nowrap}
.haut a:first-child{padding-left:0;color:var(--texte);font-family:var(--titre);font-weight:500}

/* Le libelle lettre au-dessus du grand chiffre. */
.etiquette{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--discret);font-weight:600;margin:0 0 6px}

/* Le chiffre dominant : un par ecran, en Mono, chiffres a chasse fixe. */
.chiffre{font-family:var(--mono);font-size:46px;line-height:1.05;font-weight:500;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:0}
.chiffre.or{color:var(--or)} .chiffre.bleu{color:var(--bleu)} .chiffre.vert{color:var(--vert)}
.mouvement{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;
  color:var(--second);margin:8px 0 0}

h1{font-family:var(--titre);font-weight:500;font-size:27px;line-height:1.22;
  letter-spacing:-.01em;margin:22px 0 10px}
h2{font-family:var(--titre);font-weight:500;font-size:19px;line-height:1.3;margin:30px 0 10px}
p{margin:0 0 13px;color:var(--second)}
p strong,li strong{color:var(--texte);font-weight:600}
main>p:first-of-type{color:var(--texte);font-size:16px}
a{color:var(--texte)}

/* Cartes a coins arrondis de 16 px. */
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:16px;
  padding:20px;margin:0 0 14px}
.carte.centre{text-align:center;padding:26px 20px}

/* Les lignes chiffrees : libelle a gauche, nombre a droite, aligne.
   Un tableau deborde en 390 px ; une pile de lignes, non. */
.lignes{display:flex;flex-direction:column;gap:0}
.ligne{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--bord)}
.ligne:last-child{border-bottom:0;padding-bottom:0}
.ligne:first-child{padding-top:0}
.ligne .l{color:var(--second);font-size:14px;min-width:0}
.ligne .v{font-family:var(--mono);font-size:16px;font-variant-numeric:tabular-nums;
  color:var(--texte);white-space:nowrap;flex:none;font-weight:500}
.ligne.fort .v{font-size:19px}
.ligne.fort .l{color:var(--texte)}

/* Pastilles en forme de gelule. */
.gelules{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.gelule{display:inline-flex;align-items:center;min-height:32px;padding:0 13px;
  border-radius:999px;border:1px solid var(--bord);background:var(--carte);
  font-size:12px;color:var(--second)}
.gelule.or{border-color:rgba(212,169,74,.42);color:var(--or)}
.gelule.bleu{border-color:rgba(156,191,224,.42);color:var(--bleu)}
.gelule.vert{border-color:rgba(61,214,140,.42);color:var(--vert)}

/* Ce que la mesure ne prouve pas : en retrait, jamais colore. */
.reserve{border-left:2px solid var(--bord);padding:2px 0 2px 15px;margin:0 0 14px}
.reserve p{color:var(--discret);font-size:14px;margin:0 0 9px}
.reserve p:last-child{margin-bottom:0}
.reserve strong{color:var(--second)}

.citation{font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--second);
  background:var(--carte);border:1px solid var(--bord);border-radius:16px;
  padding:18px;word-break:break-word;font-variant-numeric:tabular-nums}

.pied{margin-top:34px;padding-top:20px;border-top:1px solid var(--bord);
  color:var(--discret);font-size:12.5px}
.pied a{color:var(--second)}

/* Le grand chiffre respire un peu plus des l'ecran moyen. Un seul seuil :
   la page est concue pour 390 px, elle n'est pas rattrapee ensuite. */
@media(min-width:560px){ .chiffre{font-size:54px} h1{font-size:31px} }