/* ══════════════════════════════════════════════════════
   SOCLE — la palette du site, et la coquille qu'elle habille

   Ce fichier existe parce que la palette vivait recopiée dans dix-sept
   gabarits, et qu'elle avait divergé : `--bg` avait cinq valeurs, `--border`
   six, `--shadow` six, `--radius` trois. Le fond de la page de connexion
   n'était donc pas celui de l'application, et personne ne l'avait décidé.

   Trois règles, et une garde pour chacune (voir core/tests/test_interface.py,
   classe UnSeulSocleTests) :

     1. tout jeton partagé est déclaré ICI, une seule fois ;
     2. aucun gabarit, aucune autre feuille ne redéclare un jeton déclaré
        ici — un besoin local se nomme localement (`--tv-bg`, `--res-col`) ;
     3. toute page qui lit un jeton d'ici charge ce fichier.

   Les pages de l'application le reçoivent par base.html ; les vingt
   gabarits autonomes (connexion, erreurs, pages légales, invitations,
   réinitialisation de mot de passe, pages publiques, affichage téléviseur)
   le chargent eux-mêmes, avant leur propre <style>.
══════════════════════════════════════════════════════ */

:root {
    /* Aligne le rendu des widgets natifs (listes <select>, scrollbars…) sur
       le thème RÉELLEMENT actif de l'app plutôt que sur celui de l'OS. Sans
       ça, un thème app clair sur un OS en mode sombre (ou l'inverse) fait
       parfois rendre les <option> avec un contraste cassé (texte pâle sur
       fond clair) car le navigateur mélange sa palette native sombre avec
       nos couleurs claires. */
    color-scheme: light;
    --navy:          #123865;
    --navy-dark:     #0D2847;
    --navy-light:    #1E4F8C;
    --green:         #69CA45;
    --green-dark:    #4FA832;
    --bg:            #F5F4F0;
    --bg-card:       #FFFFFF;
    --bg-input:      #FFFFFF;
    --text:          #1A2B3C;
    /* Le plancher de l'encre atténuée se calibre sur la surface la plus
       exigeante, pas sur le fond de page — comme l'échelle sur navy (F1) et
       le voile de tuile (F5). #5A7090 tenait 4,59:1 sur `--bg` et tombait
       sous AA sur CINQ surfaces du socle : 3,58 sur `--border`, 4,17 sur
       `--purple-bg`, 4,23 sur `--border-light`, 4,30 sur `--gray-light`,
       4,42 sur `--danger-bg`. #4A6080 est la valeur la plus proche qui
       tienne sur les douze (4,54:1 au plus serré, sur `--border`). */
    --text-muted:    #4A6080;
    --border:        #D0DAE8;
    --border-light:  #E8EBF0;
    --shadow:        0 2px 8px rgba(18,56,101,.12);
    --shadow-lg:     0 4px 20px rgba(18,56,101,.16);
    --row-hover:     #F4F7FC;
    --row-sep:       #F0F4FA;
    --table-border:  #D0DAE8;
    --radius:        8px;
    /* ── Teintes de colonne des tableaux denses ───────────
       Un tableau de résultats distingue ses colonnes par des fonds sombres,
       sous du blanc — un vert pour les totaux, un ambre pour les pénalités, un
       navy pour la colonne qui nomme. Le RÔLE était déjà nommé par la classe
       (`th-total`, `th-pen`, `th-zone`…), mais la NUANCE était écrite dans
       chaque fichier : quatre couleurs pour la colonne « total » selon la page,
       trois pour « zone », deux pour « pénalité », réparties sur huit
       gabarits.

       Ces teintes sont sombres dans les DEUX thèmes, comme le bandeau : elles
       ne basculent pas, et c'est voulu. Les nommer ici ne change rien à l'écran
       — chaque page garde sa valeur — mais la même teinte cesse d'être écrite
       deux fois.

       Ce qui se répète vraiment, derrière ces couleurs, c'est le TABLEAU : la
       page d'administration et sa jumelle publique en rendent chacune leur
       version. C'est un travail de gabarit, pas de couleur, et il reste à
       faire. */
    --col-pilote:      #091d38;   /* la colonne qui nomme */
    --col-total:       #0d3560;   /* le total d'un tour, page Scores */
    --col-total-cumul: #1d5aa5;   /* le total d'un classement */
    --col-cumul-nuit:  #071527;   /* le cumul, affichage téléviseur */
    --col-rang:        #091c34;   /* rang, validation, grand total */
    --col-zone:        #2a5a8a;   /* une colonne de zone */
    --col-manche:      #1a3a6a;   /* un en-tête de manche */
    --col-courante:    #1a4a8a;   /* la compétition en cours */
    --col-a-venir:     #132f54;   /* la rayure d'une compétition à venir */
    --col-penalite:    #184a86;   /* la pénalité, pages Résultats */
    --col-penalite-tv: #3a2000;   /* la pénalité, affichage téléviseur */
    --col-finale:      #5a4000;   /* une colonne de finale */
    --col-finale-zone: #8a6500;   /* une zone de finale */
    --col-coef:        #ffd580;   /* l'encre d'un coefficient */
    --nav-h:         56px;
    --bottom-h:      0px;

    /* ── Texte posé sur un fond navy ───────────────────
       Le blanc translucide servait de nuancier à toute la coquille : barre
       du haut, bandeaux de titre, barre du bas, pied de page. Chaque page
       inventait son alpha — on en comptait soixante-et-onze entre 0,12 et
       0,65 — et la moitié passait sous le seuil de lisibilité. Mesurés sur
       les trois navy du projet (le plus clair, --navy-light, est le plus
       exigeant) :

         niveau            alpha   sur --navy   --navy-dark   --navy-light
         --on-navy          .95      10,81          13,53          7,61
         --on-navy-soft     .80       8,14           9,97          5,92
         --on-navy-dim      .68       6,34           7,60          4,77

       Les trois tiennent donc l'AA (4,5:1) sur n'importe lequel des trois
       fonds, --on-navy-dim de justesse : c'est le plancher, pas un choix
       libre. En dessous, c'est illisible — une garde le vérifie.

       Les trois dernières ne portent pas de texte : un filet, un fond de
       bouton fantôme, son survol. Leur alpha est bas exprès. */
    --on-navy:          rgba(255,255,255,.95);
    --on-navy-soft:     rgba(255,255,255,.80);
    --on-navy-dim:      rgba(255,255,255,.68);
    --on-navy-line:     rgba(255,255,255,.18);
    --on-navy-fill:     rgba(255,255,255,.10);
    --on-navy-fill-hi:  rgba(255,255,255,.22);

    /* ── Plancher de surface tactile ───────────────────
       36 px. Les recommandations vont de 24 px (WCAG 2.2 AA) à 44 px
       (Apple) ; 36 px est le compromis qui tient dans une barre de 52 px
       sur téléphone. Voir `.tc-theme::after` plus bas pour la façon de
       l'appliquer sans grossir le dessin. */
    --tap-min:       36px;

    /* ── Courbes d'accélération ────────────────────────
       Les courbes natives de CSS (`ease`, `ease-out`) sont molles : le
       mouvement démarre et finit sans intention. Les trois ci-dessous sont
       les courbes de référence du métier, et elles vivent ici pour que tout
       le projet en partage trois plutôt que quinze presque identiques.
         • --ease-out    ce qui entre, ce qui sort, ce qui répond à un doigt.
                         Part vite, donc l'interface paraît avoir déjà réagi.
         • --ease-in-out ce qui se déplace d'un point à un autre à l'écran.
         • --ease-drawer la courbe des tiroirs d'iOS (Ionic), réservée au
                         tiroir de navigation.
       Jamais `ease-in` sur de l'interface : il démarre lentement, pile au
       moment où l'œil regarde le plus. */
    --ease-out:      cubic-bezier(.23, 1, .32, 1);
    --ease-in-out:   cubic-bezier(.77, 0, .175, 1);
    --ease-drawer:   cubic-bezier(.32, .72, 0, 1);
    --danger:        #c0392b;
    --danger-dark:   #96281b;
    --danger-bg:     #fdecea;
    /* ── Sémantique UI ────────────────────────────────── */
    --success:       #27ae60;
    --success-dark:  #1d7831;
    --success-bg:    #edfff0;
    --warning:       #e67e22;
    --warning-dark:  #ab590a;
    --warning-bg:    #fff3e0;
    --purple:        #5325c0;
    --purple-dark:   #3d1a9c;
    --purple-bg:     #f3e5f5;
    /* Le bleu pâle — un panneau d'information, un badge neutre, une ligne
       dépliée. C'était la seule famille sémantique sans jeton, et treize
       valeurs l'écrivaient en dur : #eef2ff, #f0f4ff, #e8f4fd, #e6f1fb,
       #e8f0fe, #e8eef8, #f0f8ff, #eef3ff, #dce6f5, #cce3ff, #e3f2fd,
       #e0e7ff, #f0f5fc. */
    --navy-bg:       #E6F1FB;
    /* ── Bleu d'information ────────────────────────────
       Un bleu qui n'est pas celui de la marque : les liens en thème sombre,
       les pastilles « bientôt », la phase de qualification. Le projet
       l'écrivait avec SIX nuances d'encre (#60a5fa, #93c5fd, #bfdbfe,
       #9ec5f0, #2563eb, #1d4ed8) et TROIS alphas de voile, sans qu'aucun
       jeton ne le nomme — et la pastille « bientôt » posait, en thème
       clair, une encre bleu pâle sur un voile bleu pâle : 1,43:1.

         thème    surface          encre           rapport
         clair    --info-bg        --on-info-bg     5,81
         clair    --bg-card        --on-info-bg     6,70
         clair    --info           #fff             6,70
         sombre   --info-bg        --on-info-bg     8,87
         sombre   --bg-card        --on-info-bg     8,11
         sombre   --info           --navy-dark      5,85 */
    --info:          #1d4ed8;
    --info-bg:       #E8EFFD;
    --on-info:       #fff;
    --on-info-bg:    #1d4ed8;

    /* ── Encre des fonds colorés ───────────────────────
       F3 de l'audit : du blanc posé sur une couleur moyenne. Mesuré sur les
       44 pages — 2,07:1 sur le vert, 2,15 sur l'ambre, 1,85 sur l'or,
       2,77 sur le rouge clair du thème sombre. Et, à quinze lignes d'ici,
       `.btn-green` faisait déjà la bonne chose (`color: var(--navy-dark)`)
       pendant que `.btn-danger` écrivait `color: #fff` : la règle existait
       dans le projet, elle n'était simplement appliquée qu'une fois.

       Une surface colorée ne choisit donc plus son encre, elle la porte :
       `--on-X` est l'encre de `--X`. Les onze couples sont recalculés par
       une garde à chaque exécution (UneEncreParSurfaceTests).

         surface           thème clair        thème sombre
         --danger          #fff    5.44:1      navy    5.38:1
         --danger-dark     #fff    8.03:1      navy    7.84:1
         --success         navy    5.18:1      navy    8.54:1
         --success-dark    #fff    5.55:1      navy   10.59:1
         --warning         navy    5.22:1      navy    8.91:1
         --warning-dark    #fff    5.04:1      navy   10.32:1
         --purple          #fff    8.77:1      navy    5.47:1
         --purple-dark     #fff   11.50:1      navy    8.06:1
         --green           navy    7.18:1      navy    7.18:1
         --gold            navy    5.65:1      navy    6.68:1
         --gold-dark       #fff    4.57:1      navy    4.70:1

       En thème sombre la palette est claire : tout y prend l'encre navy.
       En thème clair, les variantes foncées prennent le blanc, les
       moyennes prennent le navy. */
    --on-danger:         #fff;
    --on-danger-dark:    #fff;
    --on-success:        var(--navy-dark);
    --on-success-dark:   #fff;
    --on-warning:        var(--navy-dark);
    --on-warning-dark:   #fff;
    --on-purple:         #fff;
    --on-purple-dark:    #fff;
    --on-green:          var(--navy-dark);
    --on-gold:           var(--navy-dark);
    --on-gold-dark:      #fff;

    /* ── Encre d'une surface teintée ───────────────────
       Les `--X-bg` sont des teintes pâles en thème clair et très sombres en
       thème sombre. Leur encre est donc la variante `--X-dark`, qui bascule
       déjà avec le thème : un seul alias suffit pour les deux, au lieu d'une
       couleur écrite en dur qui ne tient que dans un sens. Mesuré :

         surface          encre              clair    sombre
         --danger-bg      --danger-dark      7,02      9,54
         --success-bg     --success-dark     5,33     10,58
         --warning-bg     --warning-dark     4,60     12,82
         --purple-bg      --purple-dark      9,49     10,07

       Ce qui s'écrivait en dur ne tenait que d'un côté : les tuiles de
       résultat d'import portaient #0d5c2a et #7a0000, soit 1,83:1 et 1,58:1
       en thème sombre. */
    /* `--navy` est un FOND, pas une encre — le même partage de rôles que F3
       a posé pour `--danger` et `--success`, et que personne n'avait
       appliqué à la couleur de la marque. Écrit comme encre sur une surface
       qui suit le thème, il donne 1,04:1 sur `--gray-light` et 1,51 sur
       `--bg` en thème sombre, parce que le navy, lui, ne bascule pas.
       `--text-brand` est l'encre de la marque : le navy sur fond clair, le
       texte courant sur fond sombre. Il reste légitime d'écrire
       `color: var(--navy)` sur une pastille blanche posée sur le bandeau,
       qui est claire dans les deux thèmes — la garde mesure la paire, elle
       n'interdit pas un jeton. */
    --text-brand:        var(--navy);
    /* Le filet d'un panneau teinté : un cran plus soutenu que la teinte,
       un cran plus doux que la couleur pleine. Deux valeurs vivaient en dur
       (#f0c040 et #e8b4ae), chacune dans deux fichiers. */
    --warning-line:      #f0c040;
    --danger-line:       #e8b4ae;
    --on-navy-bg:        var(--navy);
    --on-danger-bg:      var(--danger-dark);
    --on-success-bg:     var(--success-dark);
    --on-warning-bg:     var(--warning-dark);
    --on-purple-bg:      var(--purple-dark);

    /* ── Fonds de tuile posés sur le navy ──────────────
       Une tuile de chiffres dans un bandeau est un voile sur le navy. Les
       cinq implémentations écrivaient ce voile en dur, à .12 pour le neutre
       et .25/.30/.35 pour les accents — trois alphas pour le même vert.

       Le voile éclaircit le fond, donc il resserre le contraste du texte
       posé dessus : `--on-navy-dim`, calibré pour le navy nu, tombe à 3,86:1
       sur une tuile verte. Le libellé d'une tuile prend donc `--on-navy-soft`
       et le chiffre du blanc pur. Mesuré sur `--navy` :

         fond de tuile          #fff   --on-navy-soft
         --on-navy-fill (.10)   8,81       6,31
         --navy-fill-warn       7,74       5,67
         --navy-fill-danger     9,07       6,53
         --navy-fill-ok         6,22       4,65
         --navy-fill-info       8,26       5,93 */
    --navy-fill-warn:    rgba(230, 126, 34, .35);
    --navy-fill-danger:  rgba(231, 76, 60, .35);
    --navy-fill-ok:      rgba(105, 202, 69, .35);
    --navy-fill-info:    rgba(41, 128, 185, .35);

    /* ── Médailles ─────────────────────────────────────
       L'or, l'argent et le bronze vivaient en dur dans cinq fichiers, avec
       des encres qui ne tenaient pas : l'or portait #7d6608 (3,69:1) et le
       bronze du blanc (3,62:1). Les trois sont des surfaces claires : elles
       portent la même encre, dans les deux thèmes (9,88 / 8,36 / 4,61). Le
       bronze est éclairci d'un cran — #ca6f1e ne portait ni blanc (3,62) ni
       navy (4,11). */
    --medal-gold:    #f4d03f;
    --medal-silver:  #bdc3c7;
    --medal-bronze:  #d77620;
    --on-medal:      var(--navy-dark);
    /* ── Alias de compatibilité (variables historiques dans les templates) ── */
    --gray-light:    #e8edf5;
    /* L'or sert sur fond clair (pastilles « finale » des pages publiques) et
       sur fond noir (affichage téléviseur) : c'est le même or sombre dans
       les deux cas. L'or clair #f0c040 d'autrefois n'était plus lu que par
       le thème sombre, qui a sa propre valeur ci-dessous. */
    --gold:          #c49a00;
    --gold-dark:     #957000;
    --muted:         var(--text-muted);

    /* ── Échelle d'empilement ──────────────────────────────
       --z-nav est la référence : la barre de navigation du bas n'existe
       que sous 768px, donc une modale déclarée en dessous passe inaperçue
       sur ordinateur et se retrouve recouverte (et traversée par les clics
       de la nav) sur téléphone. Toute surface modale doit se situer
       au-dessus de --z-nav. */
    /* Gouttière de page : les en-têtes pleine largeur l'annulent par une
       marge négative, ils doivent donc lire la même valeur que .page-wrap —
       sinon ils remontent sous la navbar sur mobile (en-tête rogné). */
    --page-pad-y:    20px;
    --page-pad-x:    20px;
    --z-sticky:      20;
    --z-nav:         990;
    --z-overlay:     1000;
    --z-modal:       1010;
    --z-dropdown:    1020;
    --z-notice:      1200;   /* bandeaux d'information en bas d'écran */
    --z-toast:       2000;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg:            #0F172A;
    --bg-card:       #1E293B;
    --bg-input:      #273548;
    --text:          #E2E8F0;
    /* Même plancher, dans l'autre sens : #94A3B8 tombait à 4,04:1 sur
       `--border` et 4,19 sur `--border-light`. #9EADC2 tient sur les douze
       (4,54:1 au plus serré). */
    --text-muted:    #9EADC2;
    --border:        #334155;
    --border-light:  #2D3F55;
    --shadow:        0 2px 8px rgba(0,0,0,.35);
    --shadow-lg:     0 4px 20px rgba(0,0,0,.5);
    --row-hover:     #243552;
    --row-sep:       #243040;
    --table-border:  #2D3F55;
    --gray-light:    #243552;
    --gold:          #d4a82a;
    --gold-dark:     #b8891e;
    --danger:        #f87171;
    --danger-dark:   #fca5a5;
    /* ── Sémantique UI (dark) ─────────────────────────── */
    --danger-bg:     #2d0a0a;
    --success:       #4ade80;
    --success-dark:  #86efac;
    --success-bg:    #0a2e14;
    --warning:       #fbbf24;
    --warning-dark:  #fcd34d;
    --warning-bg:    #1c1200;
    --purple:        #a78bfa;
    --purple-dark:   #c4b5fd;
    --purple-bg:     #1a0a30;
    --navy-bg:       #0E2238;
    /* En sombre, le bleu s'éclaircit comme le reste de la palette. */
    --info:          #60a5fa;
    --info-bg:       #11213F;
    --on-info:       var(--navy-dark);
    --on-info-bg:    #93c5fd;

    /* La palette sombre est claire : toutes ses surfaces portent l'encre
       navy, sans exception (4,70:1 au plus serré, sur --gold-dark). */
    /* Le bleu pâle du thème sombre est sombre : son encre est celle du
       texte, pas une variante navy qui s'y fondrait. */
    --text-brand:        var(--text);
    --warning-line:      var(--warning-dark);
    --danger-line:       var(--danger-dark);
    --on-navy-bg:        var(--text);
    --on-danger:         var(--navy-dark);
    --on-danger-dark:    var(--navy-dark);
    --on-success:        var(--navy-dark);
    --on-success-dark:   var(--navy-dark);
    --on-warning:        var(--navy-dark);
    --on-warning-dark:   var(--navy-dark);
    --on-purple:         var(--navy-dark);
    --on-purple-dark:    var(--navy-dark);
    --on-green:          var(--navy-dark);
    --on-gold:           var(--navy-dark);
    --on-gold-dark:      var(--navy-dark);
}

/* Les trois mesures de la coquille changent sur téléphone, et elles sont
   lues par des pages qui n'ont pas main.css : elles restent donc avec les
   autres jetons, pas dans le bloc responsive de main.css. */
@media (max-width: 768px) {
    :root {
        --nav-h:      52px;
        --bottom-h:   60px;
        --page-pad-y: 12px;
        --page-pad-x: 10px;
    }
}

/* ══════════════════════════════════════════════════════
   COMMANDES DE LA COQUILLE

   Le bouton jour/nuit et le sélecteur de langue apparaissent sur les
   quarante-cinq pages, y compris celles qui n'ont pas main.css. Leur style
   voyageait donc dans le <style> de chaque partial — une définition par
   inclusion, et deux chances de divergence. Il vit ici : une page qui
   inclut un partial charge ce fichier (règle 3 en tête de fichier).
══════════════════════════════════════════════════════ */

/* ── La marque, et les commandes qu'elle accompagne ───
   La barre du haut existait sous SEPT formes : `.navbar` (application),
   `.site-header` en deux recettes (pages légales d'un côté, résultats
   publics de l'autre), `.page-bar` (connexion et mots de passe),
   `.pub-hdr-right` (accueil public), et deux pages qui posaient le seul
   sélecteur de langue dans un coin. Avec, cinq façons d'écrire la marque —
   `.nav-logo`, `.header-brand`, `.header-logo`, `.page-bar-logo`,
   `.pub-logo` — et deux ordres de commandes : l'application posait le
   thème puis la langue, les huit pages publiques la langue puis le thème.

   La BARRE peut légitimement différer : celle de l'application porte des
   liens de navigation et un menu, celle des résultats publics un lien de
   retour. Ce qu'elle CONTIENT, non — d'où deux partials, `marque.html` et
   `controles_coquille.html`, et ces règles-ci pour les habiller. */
.tc-marque {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; flex-shrink: 0;
}
/* Le logo est sombre : chacune des six écritures lui appliquait ce
   filtre pour le rendre franchement blanc sur le navy. Le composant l'avait
   perdu, et le logo devenait presque invisible. */
.tc-marque img {
    height: 32px; flex-shrink: 0;
    filter: brightness(0) invert(1);
}
.tc-marque-nom {
    color: #fff; font-size: 15px; font-weight: 700; line-height: 1.15;
}
/* La ligne de sous-titre prend un niveau de l'échelle sur navy, et
   disparaît au téléphone : trois mots de plus y volent la place du titre
   de la page. */
.tc-marque-sous {
    display: block; color: var(--on-navy-soft);
    font-size: 10.5px; font-weight: 400;
}
@media (max-width: 768px) { .tc-marque-sous { display: none; } }
/* Sous 400 px, le nom lui-même cède la place : la barre y porte déjà
   le menu et les deux commandes. */
@media (max-width: 400px) { .tc-marque-nom { display: none; } }
/* Dans un pied de page, la marque se fait discrète : elle rappelle le
   produit, elle ne le présente pas. C'était la sixième écriture du même
   objet — `.footer-brand` dans main.css et `.pub-footer-brand` dans
   l'accueil public, toutes deux avec un sous-titre vert. */
.tc-marque-discret img { height: 26px; opacity: .7; }
.tc-marque-discret .tc-marque-nom {
    color: var(--on-navy-soft); font-size: 13px;
}
.tc-controles { display: inline-flex; align-items: center; gap: 8px; }

/* ── La carte d'une page autonome ─────────────────────
   Connexion, mot de passe, invitation : des pages sans main.css, bâties
   autour d'une seule carte dont l'en-tête navy porte le titre de la page.
   Les trois l'écrivaient, à l'identique au caractère près — et le corps de
   la carte aussi. */
.card-header { background: var(--navy); padding: 20px 24px; }
.card-header h1 {
    color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 4px;
}
.card-header p { color: var(--on-navy-soft); font-size: 13px; line-height: 1.5; }
.card-body { padding: 22px 24px; }

/* ── Bande de catégorie ───────────────────────────────
   Le nom d'une catégorie, posé en tête de son bloc dans le contenu. CINQ
   pages l'écrivaient — les deux pages de scores, le classement général, et
   leurs deux jumelles publiques — avec trois retraits (10px 16px, 10px 14px,
   8px 14px), deux fonds (`--navy` et `--navy-dark`), deux graisses, et un
   compteur en trois recettes : un voile à .18, un autre à .2, et une
   opacité de .75 qui n'était pas une pastille du tout.

   Elle vit ici et non dans main.css parce que les pages publiques, qui en
   posent deux, ne chargent que ce fichier. */
.cat-header {
    display: flex; align-items: center; gap: 10px;
    background: var(--navy); color: #fff;
    padding: 10px 16px; border-radius: 10px 10px 0 0;
    font-size: 13px; font-weight: 700;
}
.cat-header-name { font-size: 14px; font-weight: 700; }
/* Le groupe de droite d'une bande : une étiquette, un bouton « tout
   déplier » et le compteur. */
.cat-header-end {
    margin-left: auto; display: flex; align-items: center; gap: 8px;
}
/* Une catégorie de finale se distingue par l'or, comme partout ailleurs. */
.cat-header.finale { background: var(--gold); color: var(--on-gold); }

/* ── Pastille de comptage ─────────────────────────────
   « 12 pilotes », « 3 zones », « Qualification » : un chiffre, ou ce qu'il
   qualifie, posé à côté de son intitulé. SEPT écritures du même objet —
   .cat-header-count, .cat-header-tag, .pp-count-badge, .cat-divider-count,
   .count-pill, .pcount, .finalist-count, .g-fold-count — avec quatre rayons
   (20, 10, 9, 8), cinq retraits, quatre tailles, quatre fonds dont deux
   gris écrits en dur pour le thème sombre, et un fond ROUGE pour compter
   des finalistes.

   Sur l'or d'une finale, la pastille garde le voile BLANC du composant : il
   éclaircit le fond, ce qui sert l'encre navy. Un voile noir donnait
   #ac8800, soit 4,2:1 — mesuré au banc. */
.tc-compte {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--gray-light); color: var(--text-muted);
    font-size: 11px; font-weight: 600;
    padding: 2px 9px; border-radius: 10px; white-space: nowrap;
}
/* Posée sur un bandeau navy, elle prend le voile et le blanc. */
.cat-header .tc-compte, .page-banner .tc-compte {
    background: var(--on-navy-fill-hi); color: #fff;
}
.cat-header.finale .tc-compte { color: var(--on-gold); }
/* Seule au bout d'une bande, elle va à droite ; en groupe, c'est le groupe
   qui s'y rend. */
.cat-header > .tc-compte:last-child { margin-left: auto; }
/* Mise en avant : la ligne qu'elle accompagne est dépliée. */
.tc-compte.actif { background: var(--navy); color: #fff; }
[data-theme="dark"] .tc-compte.actif {
    background: var(--green); color: var(--on-green);
}
/* Le même chiffre sans pastille, quand il suit déjà un intitulé et n'a pas
   besoin d'être détouré. Cinq pages l'écrivaient, trois à l'identique. */
.tc-compte-nu { font-size: 11px; color: var(--text-muted); }

/* ── Défilement horizontal d'une table ────────────────
   Une table ne rétrécit pas sous son contenu minimum : elle étire son
   conteneur à la place, et c'est la page entière qui déborde de côté. Sous
   768 px, main.css force en plus `table { min-width: 480px }` pour garder
   les colonnes lisibles — en comptant sur un conteneur qui défile.

   Ce conteneur existait sous cinq noms (.scroll-x, .table-outer, .imt-wrap,
   .pilot-scores-wrap, .inv-table-wrap) plus un `style="overflow-x:auto"`
   posé à même le balisage. Il vit ici, et non dans main.css, parce que les
   pages légales ont huit tables et pas de main.css : c'est par elles que la
   page débordait de 64 px à 390 px.

   `.tbl-wrap`, dans main.css, est le même défilement AVEC l'ombre et les
   coins d'une carte. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Couleurs de structure ────────────────────────────
   Le bloc de date d'une compétition prend la couleur de sa structure
   organisatrice. Les huit dégradés vivaient dans une chaîne de NEUF
   `{% if sid == n %}` écrite en ligne, dans un attribut `style=` — et la
   même chaîne, à l'angle près (135° ici, 160° là), dans les deux pages qui
   listent des compétitions. Une neuvième structure demandait donc deux
   modifications dans deux gabarits, au milieu d'une ligne de 900
   caractères.

   La couleur reste attachée à l'IDENTIFIANT de la structure, ce qui est
   fragile — un identifiant n'est pas une propriété de la chose. La vraie
   réponse serait un champ `couleur` sur le modèle ; en attendant, elle est
   écrite une fois. Une structure sans couleur attribuée prend le navy. */
.tc-struct   { background: linear-gradient(135deg, var(--navy-dark), var(--navy)); }
.tc-struct-1 { background: linear-gradient(135deg, #1a5276, #2471a3); }
.tc-struct-2 { background: linear-gradient(135deg, var(--success-dark), var(--success-dark)); }
.tc-struct-3 { background: linear-gradient(135deg, #6e2f8a, #9b59b6); }
.tc-struct-4 { background: linear-gradient(135deg, #b7770d, #d4ac0d); }
.tc-struct-5 { background: linear-gradient(135deg, #922b21, var(--danger-dark)); }
.tc-struct-6 { background: linear-gradient(135deg, #0e6655, #17a589); }
.tc-struct-7 { background: linear-gradient(135deg, #1f618d, #2e86c1); }
.tc-struct-8 { background: linear-gradient(135deg, #515a5a, #717d7e); }

/* ── Plancher de surface tactile ──────────────────────
   Mesuré au banc : le sélecteur de langue faisait 20×32 px, le bouton de
   thème 26×36, le logo-lien 34×30 — sur trente à trente-six pages. On
   agrandit la surface sensible sans toucher au dessin : un pseudo-élément
   centré, transparent, porte la taille minimale. Grossir les boutons
   eux-mêmes aurait épaissi la barre du haut sur tout le site pour trois
   commandes. */
.tc-theme, .tc-langue, .tc-marque { position: relative; }
.tc-theme::after, .tc-langue::after, .tc-marque::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 100%; height: 100%;
    min-width: var(--tap-min); min-height: var(--tap-min);
    transform: translate(-50%, -50%);
}

/* ── Bouton jour / nuit ───────────────────────────────── */
.tc-theme {
    appearance: none; -webkit-appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--on-navy-fill);
    border: 1px solid var(--on-navy-line);
    color: var(--on-navy-soft);
    border-radius: 20px; padding: 5px 10px;
    font-size: 14px; line-height: 1; cursor: pointer;
    flex-shrink: 0; vertical-align: middle;
    transition: background .15s, transform .15s var(--ease-out);
}
@media (hover: hover) {
    .tc-theme:hover { background: var(--on-navy-fill-hi); }
}
/* Retour au doigt : sans souris, `:active` est le seul retour
   qu'un bouton pressé sache donner. */
.tc-theme:active { transform: scale(.94); }
.tc-theme:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

/* Une seule icône à la fois : celle du thème vers lequel le bouton bascule.
   Les sélecteurs sans `.tc-theme` servent aux pages qui posent le même
   couple d'icônes dans leur barre du bas (bib_search, pilot_score,
   zones_aide_arbitre). */
.theme-icon-sun  { display: none; }
.theme-icon-moon { display: inline; }
[data-theme="dark"] .theme-icon-sun  { display: inline; }
[data-theme="dark"] .theme-icon-moon { display: none; }

/* ── Sélecteur de langue ──────────────────────────────
   Même famille visuelle que le bouton de thème juste à côté : même fond
   translucide, même rayon, même taille de texte. Un seul objet, deux
   segments à l'intérieur — deux boutons distincts se liraient comme deux
   actions sans rapport. */
.tc-langues {
    display: inline-flex; align-items: center; margin: 0; padding: 2px;
    background: var(--on-navy-fill);
    border: 1px solid var(--on-navy-line);
    border-radius: 20px; flex-shrink: 0; vertical-align: middle;
}
.tc-langue {
    appearance: none; -webkit-appearance: none;
    background: transparent; border: 0; cursor: pointer;
    padding: 3px 9px; border-radius: 16px;
    font-family: inherit; font-size: 11px; font-weight: 700;
    letter-spacing: .4px; line-height: 1.3;
    color: var(--on-navy-dim);
    transition: background .15s, color .15s, transform .15s var(--ease-out);
}
@media (hover: hover) {
    .tc-langue:hover { color: var(--on-navy); }
}
.tc-langue.active {
    background: var(--on-navy-fill-hi); color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tc-langue:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.tc-langue:active { transform: scale(.94); }

/* ══════════════════════════════════════════════════════
   BOUTONS

   Le vocabulaire de boutons du projet. Il vivait dans main.css, que les
   vingt gabarits autonomes ne chargent pas : chacun a donc reecrit son
   bouton principal — huit redefinitions de `.btn`, avec quatre paddings —
   et la page de connexion, elle, ecrivait `class="btn btn-navy"` sans
   definition du tout. Son bouton « Se connecter » etait le bouton gris du
   navigateur, sur la page la plus visitee du site.
══════════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border: none; border-radius: var(--radius);
    font-size: 13px; cursor: pointer; text-decoration: none;
    transition: filter .15s; font-family: inherit; line-height: 1;
}
@media (hover: hover) { .btn:hover { filter: brightness(.9); } }
.btn:active { filter: brightness(.8); transform: scale(.98); }
.btn-navy    { background: var(--navy);  color: #fff; }
.btn-green   { background: var(--green); color: var(--on-green); font-weight: 700; }
.btn-outline {
    background: transparent; border: 1.5px solid var(--border); color: var(--text);
}
@media (hover: hover) { .btn-outline:hover { border-color: var(--navy); color: var(--navy); filter: none; } }
@media (hover: hover) { [data-theme="dark"] .btn-outline:hover { border-color: var(--green); color: var(--green); } }
.btn-danger { background: var(--danger); color: var(--on-danger); }
.btn-sm     { padding: 5px 10px; font-size: 12px; }
.btn-icon   { padding: 6px; border-radius: 6px; }
/* Bouton fantôme — pour boutons posés sur fond navy (headers, barres colorées) */
.btn-ghost  { background: rgba(255,255,255,.15); color: var(--on-navy); border: 1px solid rgba(255,255,255,.3); }
@media (hover: hover) { .btn-ghost:hover { filter: none; background: rgba(255,255,255,.25); } }