/* ═══════════════════════════════════════════════════════════════════════════
   PETANQUE BELGE (Pétanque Belge) — LE CLASSEMENT.

   Direction EMAIL & ACIER. Cette feuille ne pose aucune couleur en dur : elle
   n'utilise que les jetons de assets/css/app.css, si bien que Plein Cagnard et
   La Buvette s'appliquent ici sans une regle de plus.

   Trois decisions commandent tout le reste.

   1. UN SEUL CHIFFRE DOMINANT : le RANG. Il est en Big Shoulders, jusqu'a
      2,6 rem. Les points, eux, redescendent a 1,15 rem en Archivo — ils
      restent la donnee de reference, mais ils cessent de se battre avec le
      rang. C'est la hierarchie du commandement 3.

   2. LA COULEUR DES POINTS N'EST PLUS --bleu. Le marine #1A2452 faisait
      1,06:1 sur la carte de nuit : la donnee la plus importante de la page la
      plus consultee DISPARAISSAIT le dimanche soir. On passe a --chart-moi,
      qui bascule (marine sur clair, bleu clair sur nuit).

   3. table-layout: fixed. Une mise en page de tableau automatique oblige le
      navigateur a mesurer 341 lignes x 7 cellules avant de peindre la
      premiere. En fixe, il lit la ligne d'en-tete et s'arrete la. C'est le
      seul geste de performance de cette feuille, et c'est le bon : le
      diagnostic parlait du cout de rendu, pas du reseau.

   Note sur content-visibility : le rapport 03 le proposait sur les <tr>. Le
   confinement CSS ne s'applique PAS aux boites internes de tableau (spec CSS
   Containment) : la regle serait sans effet dans un navigateur conforme et
   imprevisible ailleurs. Elle n'est donc pas ecrite ici.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La hauteur de l'en-tete colle. app.css la fixe a 62 px de haut minimum sur
   tous les formats (.entete .enveloppe { min-height: 62px }). Elle est reprise
   ici en jeton local pour que le ruban « moi » et l'ancre de ma ligne se
   calent dessus sans nombre magique repete cinq fois. */
:root {
  --cl-entete: 62px;
  --cl-ruban: 52px;
}

/* Le trouble : la seule orchestration du systeme. Duree et courbe viennent de
   .travaux/jetons/mouvement.json via --duree-trouble et --louche (app.css).
   Si l'agent Socle enregistre la meme propriete de son cote, les deux
   declarations sont identiques — la derniere lue gagne, sans consequence. */
@property --trouble {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@layer pages {

  /* ═════════════════════════════════════════════════ LA BANNIERE ═══════ */

  .cl-banniere .surtitre { color: var(--sur-panneau-2); }
  .cl-banniere .sous { max-width: 62ch; }

  /* Le releve officiel a une valeur juridique dans le circuit : c'est
     l'affiche punaisee au mur de la buvette. Il ne se lit pas au milieu d'un
     paragraphe, il se lit comme un cachet. */
  .cl-releve {
    display: flex; align-items: center; gap: .6rem;
    margin: var(--r4) 0 0;
    padding: .55rem .8rem .55rem .7rem;
    border-left: 4px solid var(--jaune);
    background: rgba(255, 255, 255, .07);
    border-radius: 0 var(--arrondi) var(--arrondi) 0;
    color: var(--sur-panneau);
    font-size: .88rem; font-weight: 600;
    max-width: 58ch;
  }
  .cl-releve strong { color: var(--jaune); font-weight: 800; }
  .cl-releve .icone { flex: none; color: var(--jaune); }

  /* Les deux series. Elles ne se melangent jamais : une joueuse inscrite aux
     deux figure legitimement dans les deux classements, avec deux totaux
     distincts. Le selecteur est donc un choix, pas un filtre. */
  .cl-series { display: flex; gap: .4rem; margin-top: var(--r4); flex-wrap: wrap; }
  .cl-series a {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: .6rem 1.15rem; border-radius: 999px;
    font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap;
    border: 1.5px solid var(--marine-600);
    color: var(--sur-panneau-2); background: transparent;
    transition: border-color var(--duree-1) ease, color var(--duree-1) ease;
  }
  .cl-series a:hover { border-color: var(--jaune); color: var(--blanc); }
  .cl-series a[aria-current="true"] {
    background: var(--jaune); border-color: var(--jaune); color: var(--bleu-nuit);
  }

  /* ═════════════════════════════════════════════════ LE PODIUM ═════════ */

  .cl-podium-bloc { margin-bottom: var(--r6); }

  .cl-podium {
    display: grid; gap: var(--r3);
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    margin-top: var(--r4);
  }

  .cl-marche {
    display: grid;
    grid-template-rows: auto auto auto auto;
    justify-items: center; text-align: center;
    padding: var(--r4) var(--r3) 0;
    background: var(--panneau);
    border-radius: var(--arrondi-2) var(--arrondi-2) 0 0;
    outline: 1px solid var(--marine-600); outline-offset: -1px;
    color: var(--blanc); text-decoration: none;
    overflow: hidden;
    box-shadow: var(--ombre-2);
    transition: outline-color var(--duree-2) ease;
  }
  .cl-marche:hover { outline-color: var(--jaune); color: var(--blanc); }
  .cl-marche:focus-visible { outline: 3px solid var(--or-400); outline-offset: 2px; }

  /* La boule d'acier. Trois couches, la recette du Socle (--acier) : eclat
     dur, reflet de comptoir par le bas-droite, corps froid. C'est le SEUL
     objet qui brille de toute la page. Le podium est l'unique endroit du
     systeme ou trois boules ont le droit de se tenir cote a cote. */
  .cl-marche .boule-acier {
    width: 54px; height: 54px; border-radius: 50%; flex: none;
    background: var(--acier);
    box-shadow: var(--acier-ombre);
  }

  .cl-marche .cl-rang-podium {
    font-family: var(--titre); font-weight: 900;
    font-size: 2.6rem; line-height: .85; letter-spacing: -.02em;
    color: var(--jaune);
    margin-top: .55rem;
  }
  .cl-marche .cl-rang-podium sup { font-size: .42em; vertical-align: super; letter-spacing: 0; }

  .cl-marche .cl-nom {
    font-weight: 800; font-size: 1.02rem; line-height: 1.15;
    margin-top: .35rem; overflow-wrap: anywhere;
  }
  .cl-marche .cl-detail {
    font-size: .78rem; font-weight: 600; color: var(--sur-panneau-2);
    margin-top: .25rem;
  }
  .cl-marche .cl-pts-podium {
    font-family: var(--texte); font-weight: 800; font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    color: var(--blanc); margin-top: .45rem;
  }
  .cl-marche .cl-pts-podium span {
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--sur-panneau-2);
    margin-left: .25rem;
  }

  /* LE SOCLE — et le trouble. L'or se trouble en ivoire en 600 ms a
     l'arrivee de la page, une fois, jamais en boucle. C'est le seul
     mouvement orchestre de la page, et le podium est l'un des quatre
     endroits ou il a le droit d'exister. Sans JavaScript, le socle reste
     dore : un etat final parfaitement valable, pas un etat mort. */
  .cl-socle {
    width: 100%; margin-top: var(--r4);
    background: var(--jaune);
    border-top: 1px solid var(--or-700);
  }
  .cl-socle.se-trouble {
    background: color-mix(in oklch, var(--or-500), var(--terre-50) var(--trouble));
    transition: --trouble var(--duree-trouble) var(--louche);
  }
  .cl-socle.se-trouble.est-trouble { --trouble: 100%; }

  .cl-marche--1 .cl-socle { height: 74px; }
  .cl-marche--2 .cl-socle { height: 52px; }
  .cl-marche--3 .cl-socle { height: 38px; }

  @media (min-width: 42rem) {
    .cl-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Placement, pas « order » : l'ordre du DOM reste 1-2-3, donc l'ordre du
       clavier et du lecteur d'ecran aussi. Chaque marche porte son rang en
       toutes lettres — la disposition 2-1-3 est un decor, pas une donnee. */
    .cl-marche--1 { grid-column: 2; }
    .cl-marche--2 { grid-column: 1; }
    .cl-marche--3 { grid-column: 3; }
    .cl-marche--1 .cl-rang-podium { font-size: 3.4rem; }
    .cl-marche--1 .boule-acier { width: 62px; height: 62px; }
  }

  /* ═════════════════════════════════════════════════ MOI ══════════════ */

  .cl-moi-carte {
    background: var(--carte); border: 1px solid var(--trait);
    border-left: 5px solid var(--jaune);
    border-radius: var(--arrondi-2);
    padding: var(--r4);
    margin-bottom: var(--r5);
    box-shadow: var(--ombre-1);
  }
  .cl-moi-tete { display: flex; align-items: flex-start; gap: var(--r3); flex-wrap: wrap; }
  .cl-moi-tete .cl-moi-titre { flex: 1 1 14rem; min-width: 0; }

  .cl-moi-rang {
    display: flex; align-items: baseline; gap: .55rem;
    font-family: var(--titre); font-weight: 900;
    font-size: clamp(2.1rem, 8vw, 2.6rem); line-height: .85; letter-spacing: -.02em;
    color: var(--jaune-profond);
  }
  .cl-moi-rang sup { font-size: .38em; vertical-align: super; letter-spacing: 0; }
  .cl-moi-rang .cl-moi-nom {
    font-family: var(--texte); font-weight: 800; font-size: 1.05rem;
    line-height: 1.2; letter-spacing: 0; color: var(--encre);
    overflow-wrap: anywhere;
  }
  .cl-moi-chiffres {
    margin: .5rem 0 0; font-size: .95rem; font-weight: 600; color: var(--encre-2);
    font-variant-numeric: tabular-nums;
  }
  .cl-moi-chiffres strong { color: var(--chart-moi); font-weight: 800; }

  /* ── LE VERRE DE SAISON ────────────────────────────────────────────────
     La regle du plafond n'est plus le dernier paragraphe d'une page que
     personne ne finit : elle est dessinee, sur ma ligne, en haut.

     Le verre est gradue en JOURNEES, pas en points. C'est ce qui lui permet
     de servir les deux populations d'un seul dessin : celui qui depasse le
     plafond voit la coupure, celui qui ne l'atteint pas voit une graduation
     a atteindre. Un verre gradue avant d'avoir un contenu. */
  .cl-verre-bloc {
    display: flex; gap: var(--r4); align-items: flex-start;
    margin-top: var(--r4); padding-top: var(--r4);
    border-top: 1px solid var(--trait);
  }
  .cl-verre { flex: none; width: 76px; height: 138px; }
  .cl-verre-corps  { fill: none; stroke: var(--trait-2); stroke-width: 2; }
  .cl-verre-or     { fill: var(--chart-or); }
  .cl-verre-cercle { fill: none; stroke: var(--chart-or-trait); stroke-width: 1.5; }
  .cl-verre-eau    { fill: url(#cl-verre-hachure); }
  .cl-verre-hachure { stroke: var(--chart-eau); stroke-width: 2.4; }
  .cl-verre-barre  { stroke: var(--chart-repere); stroke-width: 2; stroke-dasharray: 5 4; }
  .cl-verre-grad   { stroke: var(--chart-grille); stroke-width: 1.5; }

  .cl-verre-texte { min-width: 0; flex: 1 1 auto; }
  .cl-verre-texte .etiquette { display: block; margin-bottom: .35rem; }
  .cl-verre-ligne {
    display: flex; align-items: baseline; gap: .5rem;
    margin: 0 0 .3rem; font-size: .92rem; font-weight: 600; color: var(--encre-2);
  }
  .cl-verre-ligne b { color: var(--encre); font-weight: 800; font-variant-numeric: tabular-nums; }
  .cl-verre-puce {
    flex: none; width: 12px; height: 12px; border-radius: 3px;
    border: 1.5px solid var(--chart-or-trait); background: var(--chart-or);
    transform: translateY(1px);
  }
  .cl-verre-puce--eau { background: var(--chart-eau); border-color: var(--chart-eau); }
  .cl-verre-phrase {
    margin: .6rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--encre);
  }
  .cl-verre-source {
    margin: .45rem 0 0; font-size: .78rem; color: var(--encre-3);
  }

  @media (max-width: 30rem) {
    .cl-verre-bloc { gap: var(--r3); }
    .cl-verre { width: 60px; height: 110px; }
  }

  /* Le ruban : ma ligne me suit des que la carte sort du champ. Pose par le
     script, donc absent tant qu'il n'a pas pris la main — un element mort se
     remarque plus qu'un element absent. */
  .cl-ruban {
    position: fixed; inset: var(--cl-entete) 0 auto 0; z-index: 35;
    background: var(--panneau); color: var(--blanc);
    border-bottom: 2px solid var(--jaune);
    box-shadow: var(--ombre-2);
  }
  .cl-ruban[hidden] { display: none; }
  .cl-ruban-corps {
    display: flex; align-items: center; gap: var(--r3);
    min-height: var(--cl-ruban); padding-block: .4rem;
  }
  .cl-ruban .cl-ruban-rang {
    font-family: var(--titre); font-weight: 900; font-size: 1.7rem; line-height: .9;
    color: var(--jaune); flex: none;
  }
  .cl-ruban .cl-ruban-rang sup { font-size: .42em; vertical-align: super; }
  .cl-ruban .cl-ruban-nom {
    font-weight: 700; font-size: .92rem; line-height: 1.2;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cl-ruban .cl-ruban-pts {
    margin-left: auto; flex: none;
    font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums;
    color: var(--jaune);
  }
  .cl-ruban .cl-ruban-pts span {
    font-size: .64rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--sur-panneau-2); margin-left: .2rem;
  }
  .cl-ruban a {
    flex: none; color: var(--jaune); font-weight: 800; font-size: .82rem;
    text-decoration: none; padding: .5rem .2rem; min-height: 44px;
    display: inline-flex; align-items: center; gap: .25rem;
  }
  .cl-ruban a:hover { color: var(--blanc); }
  @media (max-width: 30rem) {
    .cl-ruban .cl-ruban-nom { display: none; }
  }

  /* L'invitation : ce que voit un visiteur non connecte. Une seule ligne,
     jamais un mur. C'est la seule reponse mecanique aux comptes qui manquent. */
  .cl-invite {
    display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap;
    padding: var(--r3) var(--r4);
    background: var(--sol-2); border: 1px dashed var(--trait-2);
    border-radius: var(--arrondi-2);
    margin-bottom: var(--r5);
  }
  .cl-invite p { margin: 0; flex: 1 1 18rem; font-size: .93rem; color: var(--encre); }
  .cl-invite .bouton { flex: none; }

  /* ═════════════════════════════════════════════════ LA RECHERCHE ═════ */

  .cl-chercher { margin-bottom: var(--r4); }
  .cl-chercher[hidden] { display: none; }
  .cl-chercher-champ { position: relative; display: flex; align-items: center; }
  .cl-chercher-champ .icone {
    position: absolute; left: .8rem; color: var(--encre-3); pointer-events: none;
  }
  .cl-chercher input[type="search"] {
    width: 100%; min-height: 48px;
    padding: .6rem 3rem .6rem 2.6rem;
    background: var(--carte); color: var(--encre);
    border: 1.5px solid var(--trait-2); border-radius: 999px;
    font-size: 1rem; font-family: inherit;
    -webkit-appearance: none; appearance: none;
  }
  .cl-chercher input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
  .cl-chercher input:focus {
    border-color: var(--focus); outline: 3px solid var(--focus-halo); outline-offset: 1px;
  }
  .cl-effacer {
    position: absolute; right: .35rem;
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: transparent; color: var(--encre-2); cursor: pointer;
    display: grid; place-items: center; font-size: 1.35rem; line-height: 1;
  }
  .cl-effacer[hidden] { display: none; }
  .cl-effacer:hover { background: var(--sol-2); color: var(--encre); }
  .cl-compte {
    margin: .5rem 0 0 .2rem; font-size: .84rem; color: var(--encre-2);
    font-variant-numeric: tabular-nums; min-height: 1.2em;
  }

  /* ═════════════════════════════════════════════════ LE TABLEAU ═══════ */

  .cl-tableau { table-layout: fixed; width: 100%; }
  .cl-tableau th.c-rg   { width: 4.9rem; }
  .cl-tableau th.c-club { width: 5.5rem; }
  .cl-tableau th.c-pts  { width: 6.4rem; }
  .cl-tableau th.c-v    { width: 5rem; }
  .cl-tableau th.c-j    { width: 6rem; }
  .cl-tableau th.c-cout { width: 6.6rem; }

  /* LE RANG — le seul chiffre dominant de l'ecran. */
  .cl-tableau td.c-rg {
    font-family: var(--titre); font-weight: 900;
    font-size: 2.1rem; line-height: .88; letter-spacing: -.02em;
    color: var(--encre-2); text-align: left; white-space: nowrap;
  }
  .cl-tableau tr.cl-podium-ligne td.c-rg { color: var(--jaune-profond); }
  .cl-tableau tr.cl-podium-ligne td.c-rg::after {
    content: ""; display: block; width: 1.6rem; height: 3px; margin-top: .2rem;
    background: var(--jaune);
  }
  .cl-tableau td.c-rg .cl-hors { font-family: var(--texte); font-size: 1.1rem; color: var(--encre-3); }

  .cl-lien-joueur {
    display: flex; align-items: center; gap: .55rem;
    min-height: 44px; text-decoration: none; color: inherit; min-width: 0;
  }
  .cl-lien-joueur:hover .cl-nom-joueur { color: var(--lien-survol); }
  .cl-lien-joueur .jeton { width: 30px; height: 30px; font-size: .7rem; }
  .cl-nom-joueur {
    display: block; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere;
    transition: color var(--duree-1) ease;
  }
  .cl-sous-joueur {
    display: block; font-size: .76rem; color: var(--encre-2); margin-top: .1rem;
    line-height: 1.3;
  }
  .cl-sous-joueur .cl-qualifie { color: var(--jaune-profond); font-weight: 800; }

  /* LES POINTS — chiffre secondaire (1,15 rem, Archivo), et le relief du
     classement en fond. Le degrade est un background-IMAGE : la couleur de
     survol de la ligne passe dessous, et surtout il n'ajoute pas un noeud de
     plus au DOM sur 341 lignes. */
  .cl-tableau td.c-pts {
    font-family: var(--texte); font-weight: 800; font-size: 1.15rem;
    color: var(--chart-moi); font-variant-numeric: tabular-nums;
    background-image: linear-gradient(to left, var(--chart-or-voile) var(--cl-part, 0%), transparent 0);
  }
  .cl-tableau td.c-v { font-weight: 700; }
  .cl-tableau td.c-j { color: var(--encre-2); }

  /* LA COLONNE UTILE — ce que le plafond a retire. Elle remplace « Brut »,
     qui affichait le meme nombre que « Points » pour 84 % du circuit. Vide
     quand le plafond n'a rien coute : ecrire « 0 » 286 fois serait du bruit,
     et la legende sous le tableau le dit en toutes lettres. */
  .cl-tableau td.c-cout {
    color: var(--jaune-profond); font-weight: 700; font-size: .92rem;
    font-variant-numeric: tabular-nums;
  }

  /* MA LIGNE. Le voile dore ne suffit pas : en plein soleil sur du gravier,
     une difference de fond ne se lit pas. Le filet de gauche, si. */
  .cl-tableau tr.cl-moi-ligne > td { background: var(--jaune-voile); }
  .cl-tableau tr.cl-moi-ligne > td:first-child {
    box-shadow: inset 4px 0 0 var(--jaune);
  }
  .cl-tableau tr.cl-moi-ligne td.c-rg { color: var(--jaune-profond); }
  .cl-tableau tr.cl-moi-ligne:hover > td { background: var(--jaune-voile); }

  /* L'ancre. Le ruban et l'en-tete collent : sans cette marge, « Ma ligne »
     depose la ligne DERRIERE eux. */
  .cl-tableau tr[id="moi"] { scroll-margin-top: calc(var(--cl-entete) + var(--cl-ruban) + var(--r5)); }

  .cl-tableau tbody tr[hidden] { display: none; }

  /* Le filtre ne trouve rien : on le dit, on ne laisse pas un tableau vide. */
  .cl-vide td {
    padding: var(--r5) var(--r4); text-align: center; color: var(--encre-2);
  }
  .cl-vide[hidden] { display: none; }

  @media (max-width: 720px) {
    .cl-tableau th.c-rg  { width: 3.5rem; }
    .cl-tableau th.c-pts { width: 4.2rem; }
    .cl-tableau th.c-v   { width: 3.2rem; }
    .cl-tableau td.c-rg  { font-size: 1.7rem; }
    .cl-tableau td.c-pts { font-size: 1.05rem; }
    .cl-tableau td { padding: .5rem .3rem; }
    .cl-lien-joueur .jeton { display: none; }
  }

  /* La legende du plafond. Elle reste sous le tableau — mais elle n'est plus
     le seul endroit ou la regle existe : le verre la dessine tout en haut. */
  .cl-legende { margin-top: var(--r5); }
  .cl-legende dl { margin: .5rem 0 0; display: grid; gap: .3rem; }
  .cl-legende dt { font-weight: 800; }
  .cl-legende dd { margin: 0 0 .35rem; color: var(--encre-2); }

  /* ═════════════════════════════════════════════════ SANCTUAIRES ═════ */

  @media (prefers-reduced-motion: reduce) {
    /* Le fondu reste — c'est lui qui porte la donnee. Le suspense part. */
    .cl-socle.se-trouble { transition-duration: 150ms; }
    .cl-marche, .cl-series a, .cl-nom-joueur { transition: none; }
  }

  /* Le papier reste roi : le comite punaise le classement au mur de la
     buvette. Tout ce qui ne s'imprime pas sort de la feuille. */
  @media print {
    .cl-ruban, .cl-chercher, .cl-invite, .cl-series { display: none !important; }
    .cl-marche { background: #fff; color: #000; outline-color: #999; box-shadow: none; }
    .cl-marche .cl-rang-podium, .cl-marche .cl-pts-podium { color: #000; }
    .cl-marche .cl-detail { color: #444; }
    .cl-socle { background: #ccc !important; }
    .cl-socle.se-trouble { background: #ccc !important; }
    .cl-moi-carte { break-inside: avoid; }
    .cl-tableau tr { break-inside: avoid; }
    .cl-tableau td.c-pts { background-image: none; }
  }
}