/* =============================================================================================
   cclub-front-chart.css -- LES COMPOSANTS SERVIS DES DEUX COTES.

   POURQUOI CETTE FEUILLE EXISTE, ET POURQUOI ELLE N'EST NI UNE COPIE NI UN DEPLACEMENT ARBITRAIRE.

   Trois briques du catalogue sont rendues A LA FOIS par des shortcodes publics ET par des ecrans
   d'administration : la BARRE proportionnelle, l'HISTOGRAMME/PYRAMIDE, et les CARRES de resultat.
   Leurs regles vivaient dans `cclub-front-common.css`, qui n'est mise en file que cote public --
   c'est exactement le defaut du registre 6774, vu depuis l'autre bout.

   /!\ ET ON NE POUVAIT PAS SIMPLEMENT CHARGER LA FEUILLE DU FRONT EN ADMINISTRATION.
   Mesure du 2026-09-17 : les deux feuilles partagent QUATORZE selecteurs, et les QUATORZE ont des
   valeurs DIFFERENTES -- `.cclub-chip`, `.cclub-muted`, les six `.cclub-phase-*` et les cinq
   `.cclub-subphase-*`. Charger l'une par-dessus l'autre aurait redefini ces quatorze sur tous les
   ecrans Chess Club de l'administration.
   *Deux feuilles qui se recouvrent ne se completent pas : la derniere chargee gagne, et personne
   n'a decide laquelle ce serait.*

   Une TROISIEME feuille, chargee des deux cotes, ne recopie rien et n'ecrase rien. C'est la seule
   forme qui tienne pour un composant partage.

   LES JETONS DES BARRES VOYAGENT AVEC LEURS REGLES : sans eux, la hauteur et la teinte de piste
   arrivent vides du cote qui ne porte pas la feuille du front.
   ============================================================================================= */

/* ══════════════════════════════════════════════════════════════════════════════
   FS-4 — BARRE PROPORTIONNELLE (`Cclub_Front_Bar`) ET CE QUI L'ENTOURE
   ══════════════════════════════════════════════════════════════════════════════
   Le motif était écrit DEUX FOIS, à l'identique dans sa structure et divergent dans
   son détail : piste `#e8eef4` / hauteur 10 / rayon 2 pour la tendance du club, piste
   teintée selon le sens / hauteur 14 / rayon 3 pour les progressions. *Un motif recopié
   deux fois avec deux valeurs différentes n'est pas une duplication, c'est une
   divergence : la seconde copie a déjà commencé à s'écarter.*

   LA PISTE SE TEINTE DU SENS, en très clair — c'est ce que faisaient les progressions,
   et c'est une bonne idée qu'on garde : la piste vide d'une baisse ne doit pas se lire
   comme la piste vide d'une hausse. Les valeurs passent en jetons pour que la charte
   puisse enfin les atteindre. */
:root {
    --cclub-pbar-h:        14px;
    --cclub-pbar-h-fine:   10px;
    --cclub-pbar-radius:   3px;
    --cclub-pbar-track:    #f5f5f5;
    --cclub-pbar-track-up: #edf7ed;
    --cclub-pbar-track-dn: #fef0f0;
    --cclub-pbar-track-bl: #e8eef4;
}

.cclub-pbar {
    flex: 1; min-width: 60px; overflow: hidden;
    height: var(--cclub-pbar-h);
    border-radius: var(--cclub-pbar-radius);
    background: var(--cclub-pbar-track);
}

.cclub-pbar--fine { height: var(--cclub-pbar-h-fine); border-radius: 2px; }

.cclub-pbar__fill { height: 100%; border-radius: inherit; background: var(--cclub-color-muted, #6c757d); }

.cclub-pbar--hausse { background: var(--cclub-pbar-track-up); }

.cclub-pbar--baisse { background: var(--cclub-pbar-track-dn); }

.cclub-pbar--bleu   { background: var(--cclub-pbar-track-bl); }

.cclub-pbar--hausse .cclub-pbar__fill { background: var(--cclub-color-success, #2e7d32); }

.cclub-pbar--baisse .cclub-pbar__fill { background: var(--cclub-color-danger, #721c24); }

.cclub-pbar--bleu   .cclub-pbar__fill { background: var(--cclub-fstat-accent, #2271b1); }

.cclub-pbar-row     { display: flex; align-items: center; gap: 8px; }

.cclub-pbar__v      { flex: 0 0 auto; font-weight: 700; font-size: 13px; }

.cclub-res--ok     { background: var(--cclub-color-success, #2e7d32); }

.cclub-res--warn   { background: var(--cclub-color-warning, #856404); }

.cclub-res--danger { background: var(--cclub-color-danger, #721c24); }

.cclub-res-serie { display: inline-flex; flex-wrap: wrap; gap: 1px; align-items: center; }

.cclub-res-case     { display: flex; flex-direction: column; align-items: center; gap: 1px; }

.cclub-res-case__no { font-size: 9px; color: var(--cclub-color-muted, #6c757d); line-height: 1; }

.cclub-fchart__row       { display: flex; align-items: center; gap: 8px; }

.cclub-fchart__label     { flex: 0 0 34%; min-width: 0; font-size: 13px;
                           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cclub-fchart__row > .cclub-pbar-row { flex: 1; min-width: 0; }

.cclub-fchart__row > .cclub-pbar-row .cclub-pbar__v { width: 62px; text-align: right; }

.cclub-fchart__note      { flex: 0 0 auto; font-size: 11px; color: var(--cclub-color-muted, #6c757d); }

.cclub-fchart__row--hl .cclub-fchart__label { font-weight: 700; }

.cclub-fchart-bloc       { margin: 0 0 18px; }

.cclub-fpyr__head {
    display: flex;
    justify-content: space-between;
    max-width: 640px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
}

.cclub-fpyr__side-l { color: var(--cclub-color-primary, #0073aa); }

.cclub-fpyr__side-r { color: var(--cclub-color-femme, #8b3fd4); }

.cclub-fpyr__row  { display: flex; align-items: center; gap: 6px; padding: 1px 0; }

.cclub-fpyr__row--top .cclub-fpyr__age { font-style: italic; }

/* L'AILE GAUCHE NE S'INVERSE PLUS PAR `row-reverse` -- correctif du 2026-09-17, signale a
   l'ecran par le president. L'ordre du DOM etait deja le bon (nombre, puis barre) ; `row-reverse`
   le retournait et posait le NOMBRE contre l'axe central, la barre a l'exterieur. Une pyramide
   se lit dans l'autre sens : les effectifs aux extremites, les barres qui CONVERGENT vers l'axe.
   *Inverser l'ordre visuel d'une ligne ne retourne pas la figure : cela deplace ses reperes.* */
.cclub-fpyr__side--l { flex-direction: row; }

/* 🔴 ET VOICI LE DEFAUT QUE L'INVERSION CACHAIT, PLUS GRAVE QU'ELLE.
   `flex: 0 1 auto` empechait la piste de prendre la place disponible : sans contenu propre, elle
   retombait sur le `min-width: 60px` de `.cclub-pbar`. Les remplissages etant des POURCENTAGES
   DE LA PISTE, toutes les ailes se calculaient donc sur 60 px au lieu de la demi-largeur --
   l'echelle etait juste en proportion et fausse en grandeur, identique quelle que soit la
   largeur de l'ecran.
   *Une barre proportionnelle dont la piste ne remplit pas son espace reste proportionnelle : elle
   cesse seulement d'etre comparable.* C'est pour cela que personne ne l'avait vu -- la figure
   gardait sa forme, elle perdait sa taille. */
.cclub-fpyr__side .cclub-pbar { flex: 1; min-width: 0; }

/* La barre de GAUCHE se remplit vers la DROITE (elle touche l'axe), celle de droite vers la
   gauche. C'est la seule difference entre les deux ailes. */
.cclub-fpyr__side--l .cclub-pbar { display: flex; justify-content: flex-end; }
.cclub-fpyr__side--r .cclub-pbar { display: flex; justify-content: flex-start; }
.cclub-pbar--pyr .cclub-pbar__fill { flex: 0 0 auto; }

.cclub-fpyr__n {
    flex: 0 0 26px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--cclub-color-muted, #6c757d);
}

.cclub-fpyr__side--l .cclub-fpyr__n { text-align: right; }

.cclub-fpyr__side--r .cclub-fpyr__n { text-align: left; }

/* Une tranche vide GARDE sa colonne : a `flex: 0 0 0` elle s'effondrait, et la ligne se
   decalait par rapport aux autres -- l'axe central cessait d'etre un axe. */
.cclub-fpyr__vide { flex: 1; }

.cclub-fpyr__mid {
    flex: 0 0 118px;
    text-align: center;
    font-size: 11px;
    line-height: 1.2;
}

.cclub-fpyr__age  { font-size: 12px; }

.cclub-fpyr__cat  { color: var(--cclub-color-muted, #6c757d); }

.cclub-fpyr__band { color: var(--cclub-color-muted, #6c757d); }

.cclub-pbar--pyr .cclub-pbar__fill { border-radius: 2px; }

.cclub-pbar--pyr-l .cclub-pbar__fill { background: var(--cclub-color-primary, #0073aa); }

.cclub-pbar--pyr-r .cclub-pbar__fill { background: var(--cclub-color-femme, #8b3fd4); }

.cclub-fpyr__mid    { flex: 0 0 84px; font-size: 10px; }

.cclub-fchart__label { flex: 0 0 42%; }

/* Le TITRE de la pyramide -- il portait `.cclub-agepyr__title`, defini cote back-office
   seulement. Apres le branchement de la figure, il serait reste seul sans style cote public :
   *un correctif a moitie applique est plus trompeur qu'un defaut entier, parce que la partie
   corrigee fait croire que le reste l'est.* */
.cclub-fpyr__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0 10px;
    font-size: 15px;
    font-weight: 600;
}
.cclub-fpyr__title-sub { font-weight: 400; color: var(--cclub-color-muted, #6c757d); }

/* -------------------------------------------------------------------------------------------
   LES VALEURS DE REPLI, ET POURQUOI ELLES NE SONT PAS UNE DUPLICATION.

   /!\ Cette feuille est chargee des DEUX cotes, mais les jetons `--cclub-color-*` ne sont
   definis que dans `cclub-front-common.css`, qui n'existe pas en administration. Mesure du
   2026-09-17 : SEPT jetons employes ici valaient front=1 / admin=0. Sans repli, la pyramide
   serait arrivee en administration avec ses regles mais sans ses couleurs -- c'est-a-dire le
   defaut 6774 deplace d'un cote a l'autre au lieu d'etre ferme.

   `var(--jeton, valeur)` garde la charte partout ou elle existe et degrade proprement ailleurs.
   *Redefinir un jeton dans deux feuilles cree deux verites ; lui donner un repli n'en cree
   aucune -- le repli ne s'applique que la ou il n'y en avait pas du tout.*
   ------------------------------------------------------------------------------------------- */

.cclub-pbar--neutre { background: var(--cclub-pbar-track); }

.cclub-res {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 1px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    vertical-align: middle;
}

.cclub-res--muted {
    background: transparent;
    color: var(--cclub-color-muted, #6c757d);
    border: 1px dashed var(--cclub-color-muted, #6c757d);
}

.cclub-res-parcours { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }

.cclub-fchart            { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }

.cclub-fpyr {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 640px;
}

.cclub-fpyr__row--sep { border-top: 1px dashed var(--cclub-color-border, #ddd); }

.cclub-fpyr__side { flex: 1; display: flex; align-items: center; gap: 5px; min-width: 0; }

/* La piste de l aile est TRANSPARENTE : une piste grise dessinerait un rectangle sur toute la
   demi-largeur et la figure ne se lirait plus. Le  est celui de la regle de contexte
   ci-dessus -- on ne le contredit pas ici. */
.cclub-pbar--pyr { background: transparent; }