/* systeme.css — les seize composants, et eux seuls.
 *
 * Aucune règle propre à un écran ici. Aucune couleur littérale : tout vient des
 * jetons de base.css.
 */

/* ————————————————————— 1 · Icônes ————————————————————— */

.ico-svg { display: block; flex: 0 0 auto; }
.rail-nav a .ico { display: flex; align-items: center; justify-content: center; }

/* ————————————————————— 2 · Avatar ————————————————————— */

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--trait-clair);
  background: var(--nuit-relief); flex: 0 0 auto; letter-spacing: .02em;
}
.avatar.vide { color: var(--clair-terne); border-style: dashed; }

.avatars { display: flex; }
.avatars .avatar + .avatar { margin-left: -.4rem; }

/* ————————————————————— 3 · Drapeau de marché ————————————————————— */

.drapeau {
  display: inline-flex; align-items: baseline; gap: .3rem;
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux);
}
.drapeau .code {
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: 0; background: var(--nuit-relief);
  border: 1px solid var(--trait-clair); padding: .06rem .28rem; color: var(--clair);
}
.drapeau .nom-m { color: var(--clair-doux); }
.drapeau .langue { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); text-transform: uppercase; }
.drapeau.vide { color: var(--clair-terne); }

.drapeaux { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ————————————————————— 4 · Anneau ————————————————————— */

.anneau-boite { position: relative; display: inline-grid; justify-items: center; }
.anneau { display: block; }
.anneau-val {
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-58%);
  text-align: center; font-variant-numeric: tabular-nums;
}
.anneau-lib { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-top: .25rem; text-align: center; }

/* ————————————————————— 5 · Barre ————————————————————— */

.barre-l { display: grid; grid-template-columns: 1fr auto; gap: .3rem .5rem; align-items: center; margin-bottom: .3rem; }
.barre-l .b-lib { grid-column: 1 / -1; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-doux); }
.barre-l .b-piste { height: 5px; background: var(--trait); position: relative; overflow: hidden; }
.barre-l .b-piste i { position: absolute; inset: 0 auto 0 0; }
.barre-l .b-val { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); font-variant-numeric: tabular-nums; }

/* ————————————————————— 6 · Sparkline ————————————————————— */

.sparkline { display: block; }
.sparkline.vide { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); font-style: italic; }

/* ————————————————————— 7 · Répartition ————————————————————— */

.repartition { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.rep-legende { display: grid; gap: .22rem; font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); min-width: 9rem; }
.rep-l { display: flex; align-items: center; gap: .4rem; }
.rep-l .pastille { width: .5rem; height: .5rem; border-radius: 50%; flex: 0 0 auto; }
.rep-l .rep-nom { color: var(--clair-doux); }
.rep-l .rep-val { margin-left: auto; color: var(--clair-terne); font-variant-numeric: tabular-nums; }

/* ————————————————————— 8 · Fil d'étapes ————————————————————— */

.fil-etapes { margin-top: .5rem; }
.fil-etapes .points { display: flex; align-items: center; }
.fil-etapes .rond {
  width: .5rem; height: .5rem; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--trait-clair); background: var(--nuit);
}
.fil-etapes .rond.faite { background: var(--vert); border-color: var(--vert); }
.fil-etapes .rond.ici { background: var(--or); border-color: var(--or); box-shadow: 0 0 0 3px rgba(232,163,61,.18); }
.fil-etapes .lien { height: 1px; background: var(--trait); flex: 1 1 auto; min-width: .8rem; }
.fil-etapes .ou { display: block; font-size: var(--t-eti); line-height: var(--lh-eti); color: var(--or); margin-top: .3rem; letter-spacing: .04em; }

.fil-etapes.grand { margin: .2rem 0 .4rem; }
.fil-etapes.grand .points { align-items: flex-start; }
.fil-etapes.grand .etape-g { display: grid; justify-items: center; gap: .35rem; flex: 0 0 auto; }
.fil-etapes.grand .etape-g .rond { width: .95rem; height: .95rem; }
.fil-etapes.grand .etape-g .nom {
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: 0; color: var(--clair-terne);
}
.fil-etapes.grand .etape-g.faite .rond { background: var(--vert); border-color: var(--vert); }
.fil-etapes.grand .etape-g.faite .nom { color: var(--clair-doux); }
.fil-etapes.grand .etape-g.ici .rond { background: var(--or); border-color: var(--or); box-shadow: 0 0 0 4px rgba(232,163,61,.18); }
.fil-etapes.grand .etape-g.ici .nom { color: var(--or); }
.fil-etapes.grand .lien { margin-top: .45rem; }

/* ————————————————————— 9 · Carte de statistique ————————————————————— */

.stat-c { background: var(--nuit-carte); padding: .65rem .8rem .75rem; }
.stat-c .t { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: 0; color: var(--clair-terne); }
.stat-c .v { font-size: var(--t-titre); letter-spacing: var(--ls-titre); line-height: 1.1; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.stat-c .s { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-top: .15rem; }
.stat-c.alerte { border-color: rgba(217,83,74,.4); }
.stat-c.alerte .v { color: var(--bloquant-txt); }
.stat-c.vert .v { color: var(--vert); }
.stat-c.or .v { color: var(--or); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .55rem; }

/* ————————————————————— 10 · Bannière ————————————————————— */

.banniere {
  display: flex; gap: .6rem; align-items: flex-start;
  background: rgba(217, 154, 43, .1); border: 1px solid rgba(217, 154, 43, .35);
  border-left: 3px solid var(--attente); padding: .6rem .8rem; color: #e5c88c;
}
.banniere .b-ico { color: var(--attente); padding-top: .1rem; }
.banniere .b-corps { flex: 1; min-width: 0; }
.banniere .b-texte { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.45; }
.banniere.rouge { background: rgba(217,83,74,.1); border-color: rgba(217,83,74,.35);
  border-left-color: var(--bloquant-txt); color: #eaa9a3; }
.banniere.rouge .b-ico { color: var(--bloquant-txt); }
.banniere.vert { background: rgba(63,160,106,.1); border-color: rgba(63,160,106,.3);
  border-left-color: var(--vert); color: #9fd4b6; }
.banniere.vert .b-ico { color: var(--vert); }

/* ————————————————————— 11 · Mur de vignettes ————————————————————— */

.mur { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem; }
.mur-panneau { background: var(--nuit-carte); padding: .7rem; }
.mur-tete { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .55rem; }
.mur-nom { font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: 0; }
.mur-compte { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-left: auto; }
.mur-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mur-case { background: none; border: 0; padding: 0; cursor: pointer; position: relative; display: block; }
.mur-case .vignette { height: 76px; }
.mur-case:hover .vignette { border-color: var(--or); }
.mur-eti {
  position: absolute; left: 0; bottom: 0; font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); padding: .05rem .25rem;
  background: rgba(14,15,17,.82); color: var(--clair-doux);
}
.mur-pied { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); margin-top: .5rem; }

/* ————————————————————— 12 · Bande de vignettes ————————————————————— */

.strip { display: flex; gap: 4px; flex-wrap: wrap; }
.strip-case { background: none; border: 0; padding: 0; cursor: pointer; }
.strip-case .vignette { border-width: 2px; }
.strip-case.actif .vignette { border-color: var(--or); }
.strip-case:hover .vignette { border-color: var(--clair-terne); }

/* ————————————————————— 13 · Frise ————————————————————— */

.frise { display: flex; align-items: flex-start; overflow-x: auto; padding-bottom: .3rem; }
.frise-j { display: grid; justify-items: center; gap: .25rem; flex: 1 1 0; min-width: 5.5rem; position: relative; }
.frise-lien { position: absolute; top: .42rem; right: 50%; left: -50%; height: 1px; background: var(--trait); }
.frise-rond {
  width: .85rem; height: .85rem; border-radius: 50%; z-index: 1;
  border: 1px solid var(--trait-clair); background: var(--nuit);
}
.frise-j.faite .frise-rond { background: var(--vert); border-color: var(--vert); }
.frise-j.ici .frise-rond { background: var(--or); border-color: var(--or); box-shadow: 0 0 0 4px rgba(232,163,61,.18); }
.frise-date { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti); color: var(--clair); font-variant-numeric: tabular-nums; }
.frise-nom { font-size: var(--t-eti); letter-spacing: var(--ls-eti); color: var(--clair-terne); text-align: center; line-height: 1.3; }
.frise-j.ici .frise-date { color: var(--or); }

/* ————————————————————— 14 · Carte numérotée ————————————————————— */

.cartes-n { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .7rem; align-items: start; }
.carte-n { background: var(--nuit-carte); padding: .8rem .85rem .9rem; }
.carte-n.vide { border-style: dashed; }
.carte-n-tete { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .55rem; }
.carte-n-tete .n { color: var(--or); font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); }
.carte-n-tete .t { font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: 0; color: var(--clair-doux); }
.carte-n-corps { font-size: var(--t-meta); letter-spacing: var(--ls-meta); line-height: 1.5; }
.carte-n-corps .phrase-marque { font-family: var(--ecrit); font-style: italic; font-size: var(--t-titre); letter-spacing: var(--ls-titre); line-height: 1.3; color: var(--clair); }
.carte-n-corps .accent { color: var(--or); }

/* ————————————————————— 15 · Graphe ————————————————————— */

.graphe { width: 100%; height: auto; display: block; }
.graphe .g-nom { font-size: 8px; fill: var(--clair-doux); font-family: var(--affichage); }
.graphe .g-centre { font-size: 9px; fill: var(--clair); font-family: var(--affichage); }

/* ————————————————————— Communs ————————————————————— */

@media (max-width: 820px) {
  .fil-etapes.grand .etape-g .nom { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); }
  .repartition { flex-direction: column; align-items: flex-start; }
}

/* ————————————————————— Tailles de vignette ————————————————————— */

.vignette.v-case { width: 100%; height: 96px; }
.vignette.v-toile { width: 100%; height: 100%; }

/* ————————————————————— Panneau superposé ————————————————————— */

.voile.voile-dessus { z-index: 52; background: rgba(0,0,0,.5); }
.panneau.dessus { z-index: 53; width: min(520px, 100%); }

/* ————————————————————— 18 · L'état et sa conséquence ————————————————————— */

/* Le rendu par défaut d'un état : le nom court, puis ce qu'il produit ou
 * empêche. La pastille seule reste l'exception, réservée aux places serrées —
 * elle porte alors la conséquence en attribut title. */

.critere-etat { display: block; font-size: var(--t-eti); letter-spacing: var(--ls-eti); line-height: 1.4;
  color: var(--encre-terne, var(--clair-terne)); max-width: var(--mesure); }
.critere-etat b { font-weight: 500; margin-right: .4rem; }
.critere-etat.alerte b { color: var(--bloquant-txt); }
.critere-etat.attente b { color: var(--attente); }

/* ————————————————————— La modale de geste ————————————————————— */
/* Un CTA nomme un geste ; la modale dit pourquoi maintenant, ce qu'on va y
 * faire dans l'ordre, et ce que ça change. Quatre blocs, jamais plus : au
 * cinquième on ne la lit plus, et on est revenu au lien nu. */

.geste { display: grid; gap: 1rem; max-width: 60ch; }
.geste > div { color: inherit; }

.geste .gp-t, .geste .gq-t, .geste .gf-t, .geste .gc-t {
  font-size: var(--t-eti); line-height: var(--lh-eti); letter-spacing: var(--ls-eti);
  color: var(--clair-terne); margin-bottom: .25rem;
}
.geste .gp-v, .geste .gq-v, .geste .gc-v {
  font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair);
}

/* Le coût porte l'accent : c'est la seule raison d'ouvrir une modale plutôt
 * que de poser un lien. */
.geste-pourquoi { border-left: 2px solid var(--or); padding-left: .75rem; }
.geste-pourquoi .gp-t { color: var(--or); }

.geste .gf-l { list-style: none; display: grid; gap: .5rem; margin: 0; padding: 0; }
.geste .gf-l li {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: .5rem; align-items: start;
  font-size: var(--t-lire); line-height: var(--lh-lire); color: var(--clair);
}
.geste .gf-n {
  font-size: var(--t-micro); line-height: 1.5rem; text-align: center;
  color: var(--clair-terne); border: 1px solid var(--trait-clair); border-radius: 50%;
  width: 1.5rem; height: 1.5rem;
}

.geste .form-actions { margin-top: .25rem; }
.geste .form-actions .b { min-height: var(--cible); }

/* L'adresse est écrite : on sait où on va avant de cliquer, et un lien se
 * partage. Elle est en retrait — c'est une information, pas une invitation. */
.geste-ou {
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro);
  color: var(--clair-terne); border-top: 1px solid var(--trait-clair); padding-top: .5rem;
}