/* =============================================================================
   SULKYLAND 7 — FEUILLE DE STYLE UNIQUE
   Chargee par App.razor avec un suffixe anti-cache. Les classes maison sont
   prefixees « slk- » ; ce qui ne l'est pas vient de Bootstrap ou du gabarit
   Blazor, et est regroupe en fin de fichier.

   ---------------------------------------------------------------------------
   SOMMAIRE
     1. Reglages generaux ......... taille de police, constantes non colorees
     2. Chartes graphiques ........ TOUTES les couleurs, une charte par bloc
     3. Surcharges Bootstrap liees a la charte
     4. Socle ..................... ascenseurs, html/body, liens, tableaux
     5. Mise en page .............. grille, panneaux, presentations v6 et v7
     6. Composants ................ menu, listes, filtres, cartes, fiches...
     7. Ecrans particuliers ....... genetique, piste, medailles, petits jeux
     8. Reprises du gabarit Blazor et de Bootstrap

   ---------------------------------------------------------------------------
   AJOUTER UNE CHARTE GRAPHIQUE — trois gestes, pas un de plus :

     1. Copier un bloc [data-bs-theme="..."] de la section 2, lui donner un
        nouveau nom, changer les valeurs. Aucune couleur ne vit ailleurs : tout
        ce que l'ecran affiche passe par un de ces jetons.
     2. Ajouter la charte dans Utilities/Charte.cs — code, nom de l'attribut,
        cle de traduction. La liste d'options du compte se construit toute seule
        a partir de la.
     3. Ajouter la cle de traduction en base.

     Une seule exception : la section 3 contient trois surcharges de variables
     Bootstrap propres a la charte sombre, qu'une charte sombre future devrait
     dupliquer. Elles n'ont pas pu passer en jetons parce qu'elles n'existent
     pas dans la charte claire, ou Bootstrap applique ses valeurs par defaut.

   ---------------------------------------------------------------------------
   REGLE DE LISIBILITE — tenue par des mesures, pas par du gout :
     Toute paire texte/fond doit atteindre 4,5 : 1 (3 : 1 suffit pour du gros
     texte). Et aucune information ne doit reposer sur la seule opposition
     vert/orange : une part des joueurs ne la distingue pas. Doubler toujours la
     couleur par une forme, une position ou un libelle -- c'est ce que fait la
     barre d'accent a gauche de l'entree de menu courante.
     La planche mockups/look.html calcule ces rapports et simule les daltonismes.
   ============================================================================= */

/* =============================================================================
   1. REGLAGES GENERAUX
   ============================================================================= */
/* Taille de police choisie par le joueur (option du compte).
   L'attribut est posé sur le conteneur du jeu, comme data-bs-theme, mais la taille doit
   atterrir sur html : le rem se calcule toujours sur la racine, et Bootstrap écrit ses
   tailles en rem. D'où le :has(), qui remonte de l'attribut jusqu'à html.
   Navigateur trop ancien pour :has() = règle ignorée, taille normale, rien de cassé. */
html:has([data-slk-police="petite"]) {
    font-size: 87.5%; /* 14 px, la taille par défaut de la v6 */
}

html:has([data-slk-police="grande"]) {
    font-size: 112.5%; /* 18 px */
}

/* Largeur de reference du contenu des listes : tableaux, filtres, barre selecteur/filtre,
   et les modales qui presentent une liste. Elle etait recopiee en dur a six endroits. */
:root {
    --slk-largeur-max: 950px;

    /* Le dessin de la croix de fermeture, servi a un masque et non a un fond : voir la regle
       .btn-close plus bas. Pas de couleur ici -- un masque n'en tient pas compte. */
    --slk-croix-fermer: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");

    /* La coche d'une case et la pastille d'un interrupteur. Bootstrap ne les sert qu'en blanc,
       ce qui suppose un fond fonce -- faux sur deux de nos chartes, ou le fond de la case est
       clair. On garde donc les deux dessins, et chaque charte choisit le sien plus bas.
       Contrairement a la croix ci-dessus, ce sont de vraies images de fond : la couleur doit
       etre dans le SVG, un masque effacerait aussi le fond de la case. */
    --slk-coche-blanche: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --slk-coche-noire: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --slk-pastille-blanche: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    --slk-pastille-noire: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23111111'/%3e%3c/svg%3e");
}

/* =============================================================================
   2. CHARTES GRAPHIQUES
   Toutes les couleurs du jeu sont ici, et nulle part ailleurs.
   ============================================================================= */
[data-bs-theme="slk-blanc"] {
    --slk-badge-alerte-bg: #CC0000;
    --slk-badge-alerte-texte: #FFFFFF;
    --slk-fond-bg: #FFFFFF;
    --slk-cadre-bg: rgba(240,229,200,0.95); /* #F0E5C8*/
    --slk-texte: #000000;
    /* Assombri : #CC6600 donnait 3,44 : 1 sur une ligne de tableau, et 2,25 en
       vision deuteranope. La, 6,12 et 4,31. */
    /* Assombri d'un cran de plus : sur la ligne survolee et sur la selection, l'ancien
       #8F4700 tombait a 4,39 et 3,83 en deuteranomalie. La, 5,22 et 4,56. */
    --slk-link: #7F3F00;
    --slk-link-dark: #444;
    --slk-link-alerte: #33f;
    --slk-logo-background: #FFFFFF;
    --slk-btn-picto-background: #FFFFFF;
    --slk-btn-picto-border: #808080;
    --slk-btn-picto-border-hover: #C0C0C0;
    --slk-btn-background-start: #E88D00;
    --slk-btn-background-end: #CE6D00;
    --slk-btn-background-hover: #669900;
    --slk-btn-background-secondaire: #EEEEEE;
    --slk-btn-background-secondaire-hover: #CCCCCC;
    /* ATTENTION, defaut connu et assume : le blanc sur l'orange ne donne que 2,55 au
       depart du degrade et 3,61 a la fin, pour un seuil de 4,5. Le texte sombre reglait
       le probleme (5,41 au pire) mais Daniel le trouve laid, et assombrir l'orange
       jusqu'a #B05F00 abimerait l'identite de la v6. On garde donc le blanc en le
       sachant. Ne pas « corriger » sans en reparler. */
    --slk-btn-color: #FFFFFF;
    --slk-menu-bg: #064601;
    --slk-menu-text: #AAAAAA;
    --slk-menu-link: #E0E0E0;
    /* Eclairci : #43810A sur le vert du menu ne donnait que 2,33 : 1 -- du vert
       sur du vert. La, 7,69, et 9,87 en vision deuteranope : la difference tient
       a la clarte, pas a la teinte, donc elle survit au daltonisme. */
    --slk-menu-link-actif: #B7E48C;
    --slk-menu-link-hover: #FF9900;
    --slk-clock-bg: #303030;
    --slk-clock-bg-hover: #606060;
    --slk-clock-text: #FFFFFF;
    --slk-clock-shadow: 0 0 5px #000000;
    --slk-modal-degrade-debut: #D6E5AE;
    --slk-modal-degrade-fin: #FBFDF8;
    --slk-modal-bg: #FFF;
    --slk-scrollbar-color: #F0F0F0;
    --slk-scrollbarthumb-color: #C0C0C0;
    --slk-scrollbarthumb-hover-color: #D0D0D0;
    --slk-filtre-bg: #CBC2AB;
    --slk-filtre-header-bg: rgba(0,0,0,0.10);
    /* Onglet inactif : un cran plus sombre que la feuille du contenu, pour qu'il se lise
       « derriere ». Dans les chartes sombres c'est l'inverse -- pres du noir, l'ecart de
       clarte ne se voit qu'en montant. Tenu a 1,20 : 1 au moins face a --slk-table-bg.

       Le fond de survol a son propre jeton. Il empruntait --slk-btn-picto-border-hover, dont
       le role est la bordure d'un bouton-picto : il ne tenait ses 4,5 : 1 face au libelle dans
       aucune charte, et en charte flashy il valait EXACTEMENT --slk-link -- l'onglet survole
       devenait un aplat ou le picto disparaissait. Mesure faite dans les quatre chartes face a
       --slk-link (le libelle) et a --slk-texte. */
    --slk-onglet-bg: #E3D7B8;
    --slk-onglet-bg-hover: #CFC4A7;   /* 4,63:1 face a --slk-link */
    --slk-check-bg: #aaa;
    --slk-check-bgactif: #666;
    --slk-coche: var(--slk-coche-blanche); /* 5,74:1 */
    --slk-pastille: var(--slk-pastille-blanche);
    --slk-light-grey: #ccc;
    --slk-medium-grey: #888;
    --slk-dark-grey: #444;
    --slk-table-bg: #F9F2DF;
    /* Fond d'une boite posee sur le panneau : le corps d'un message, la zone de
       confirmation. Elle prenait --slk-table-bg, ce qui marche tant que le panneau est
       d'une autre teinte -- dans les deux chartes sombres les deux valaient la meme
       couleur, et la boite disparaissait. Tenu a 1,20 : 1 au moins face au panneau. */
    --slk-message-bg: #F9F2DF;
    --slk-table-color: #000000;
    --slk-table-head-bg: #064601;
    --slk-table-select-color: #CFE0B8;
    --slk-td-hover-bg: #E9E2CF;
    --slk-biorythme-legende: rgba(255,255,255,0.90);
    /* a mettre en dark */
    /* modification directe bootstrap */
    --bs-btn-hover-color: var(--slk-texte);

    /* --- Etats et mise au point --- */
    --slk-focus: #336600;
    --slk-focus-halo: #FFFFFF;
    --slk-valide: #26b050;
    --slk-invalide: #e50000;
    --slk-bordure: rgba(0,0,0,0.5);
    --slk-backdrop: #000000;

    /* --- Ombres --- */
    --slk-ombre-filtre: 0 6px 12px rgba(0,0,0,0.25);
    --slk-ombre-deroulant: 0 6px 18px rgba(0,0,0,0.55);
    --slk-ombre-menu: 4px 0 14px rgba(0,0,0,0.5);
    --slk-ombre-fiche: 0 12px 40px rgba(0,0,0,0.6);
    --slk-ombre-photo: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    --slk-ombre-relief: #444;
    --slk-survol-voile: rgba(0,0,0,0.28);

    /* --- Genetique : bon / moyen / mauvais --- */
    --slk-gene-bon-1: #11C38F;
    --slk-gene-bon-2: #087754;
    --slk-gene-bon-texte: #FFFFFF;
    --slk-gene-moyen-1: #FED000;
    --slk-gene-moyen-2: #F19907;
    --slk-gene-moyen-texte: #000000;
    --slk-gene-mauvais-1: #FB3100;
    --slk-gene-mauvais-2: #9F0C01;
    --slk-gene-mauvais-texte: #FFFFFF;
    --slk-gene-restant: #dddddd;
    --slk-gene-max: #333333;

    /* --- Ecrans particuliers --- */
    --slk-piste-fond: #d8e6c7;
    --slk-box-bleu: #3d8bfd;
    --slk-box-vert: #198754;
    --slk-box-texte: #FFFFFF;
    --slk-course-texte: #FFFFFF;
    --slk-course-bordure: #F2AB32;
    --slk-course-survol-texte: #8CC134;
    --slk-course-survol-bordure: #79D528;
    --slk-photo-cadre: #FFFFFF;
    --slk-slot-fond: #cdcdcd;
    --slk-slot-degrade-1: #bbbbbb;
    --slk-slot-degrade-2: #eeeeee;
    --slk-slot-bord-haut: #777777;
    --slk-slot-bord-cote: #999999;
    --slk-slot-bord-bas: #666666;
    --slk-slot-gain-fond: #FFD700;
    --slk-slot-gain-texte: #666666;
    --slk-slot-gain-bord: #000000;
    --slk-slot-gain-ombre: #555555;
    --slk-roue-pointeur: #cc0000;
    --slk-dropzone-drag: #016E9E;
    --slk-dropzone-apercu: #999999;
    --slk-dropzone-bord: #000000;
    --slk-checkbox-bordure: #929292;
    --slk-medaille-texte: #FFFFFF;
    --slk-slot-image-fond: #FFFFFF;
    --slk-btn-primary-fond: #1b6ec2;
    --slk-btn-primary-bordure: #1861ac;
    --slk-btn-primary-texte: #FFFFFF;
    --slk-survol-voile-clair: rgba(255,255,255,0.10);
    --slk-ombre-haute: 0 6px 18px rgba(0,0,0,0.30);
    --slk-piste-choix-fond: #f7f7f7;
    --slk-piste-choix-bordure: #d7d7d7;
    --slk-table-head-texte: #E0E0E0;
    --slk-table-head-lien: #FFD27F;
    --slk-pagination-1: #336600;
    --slk-pagination-2: #254A00;
    --slk-pagination-texte: #FFFFFF;
    --slk-pagination-survol: #4A8A0A;
    --slk-selection-accent: #064601;
    --slk-focus-anneau: rgba(51,102,0,0.28);
    --slk-ombre-creux: inset 0 2px 4px rgba(0,0,0,0.14);
    /* Second vert du degrade du menu, utile des que les effets sont actifs. */
    --slk-menu-bg-2: #043201;
    --slk-card-pied-bg: var(--slk-table-bg);
    /* Le fond de la zone de chat reste CLAIR dans toutes les chartes, y compris les
       sombres. Ce n'est pas un oubli : chaque joueur choisit sa couleur d'ecriture,
       librement et par defaut en noir. Un fond sombre rendrait donc invisibles les
       messages de tous ceux qui ont garde le noir ou choisi une teinte foncee.
       C'est la seule surface du jeu qui echappe volontairement a la charte. */
    --slk-chat-fond: #EEEEEE;
    --slk-chat-texte: #333333;
    --slk-chat-systeme: #6B6B6B;
    --slk-chat-alerte: #B3261E;
    --slk-voile-modale: rgba(0,0,0,0.50);
}

/* ---------------------------------------------------------------------------
   Charte « v7-1 » : pastel, nature et sport.
   Le vert foret et l eau, le jaune soleil pour l action.

   Contrainte tenue : aucune information ne repose sur l opposition vert/orange.
   L accent d action est jaune et la selection bleue -- deux teintes qu une vision
   deuteranope separe du vert, alors qu elle confond l orange avec lui.

   Point de vigilance propre au pastel : des fonds si clairs se distinguent mal
   entre eux. Ligne normale contre ligne survolee, l ecart n est que de 1,22 pour
   un repere de 1,20. C est pour cela que la selection est bleue -- elle se
   distingue par la teinte et non par la clarte -- et qu elle porte une barre.
   --------------------------------------------------------------------------- */
[data-bs-theme="slk-v7-1"] {
    --slk-badge-alerte-bg: #CC0000;
    --slk-badge-alerte-texte: #FFFFFF;
    --slk-fond-bg: #DFE9E3;
    --slk-texte: #1F2A2E;
       vision deuteranope. La, 6,12 et 4,31. */
    --slk-link: #15616D;
    --slk-link-dark: #586A70;
    --slk-link-alerte: #0F5561;
    --slk-logo-background: #FFFFFF;
    --slk-btn-picto-background: #FFFFFF;
    --slk-btn-picto-border: #B8CCC5;
    --slk-btn-picto-border-hover: #7FA79B;
    --slk-btn-background-start: #F0B429;
    --slk-btn-background-end: #DE9B12;
    --slk-btn-background-hover: #FFC44D;
    --slk-btn-background-secondaire: #E9EFEC;
    --slk-btn-background-secondaire-hover: #D6E2DC;
    --slk-btn-color: #2B2011;
    --slk-menu-bg: #1E4D46;
    --slk-menu-text: #A9BEB7;
    --slk-menu-link: #E4EFEA;
       sur du vert. La, 7,69, et 9,87 en vision deuteranope : la difference tient
       a la clarte, pas a la teinte, donc elle survit au daltonisme. */
    --slk-menu-link-actif: #9FE0C7;
    --slk-menu-link-hover: #FFD166;
    --slk-clock-bg: #16302B;
    --slk-clock-bg-hover: #1E4D46;
    --slk-clock-text: #E4EFEA;
    --slk-clock-shadow: 0 0 5px #000000;
    --slk-modal-degrade-debut: #DCEAE3;
    --slk-modal-degrade-fin: #FFFFFF;
    --slk-modal-bg: #FFFFFF;
    --slk-scrollbar-color: #EDF2F0;
    --slk-scrollbarthumb-color: #B8CCC5;
    --slk-scrollbarthumb-hover-color: #9FB8AF;
    --slk-filtre-bg: #DDE8E3;
    --slk-filtre-header-bg: rgba(30,77,70,0.14);
    --slk-onglet-bg: #D5E4DD;
    --slk-onglet-bg-hover: #C4D2CB;   /* 4,53:1 face a --slk-link */
    --slk-check-bg: #8FA9A1;
    --slk-check-bgactif: #15616D;
    --slk-coche: var(--slk-coche-blanche); /* 7,09:1 */
    --slk-pastille: var(--slk-pastille-blanche);
    --slk-light-grey: #ccc;
    --slk-medium-grey: #888;
    --slk-dark-grey: #444;
    --slk-table-color: #1F2A2E;
    --slk-table-head-bg: #1E4D46;
    --slk-table-select-color: #CFE4F2;
    --slk-biorythme-legende: rgba(255,255,255,0.90);
    --bs-btn-hover-color: var(--slk-texte);

    --slk-focus: #15616D;
    --slk-focus-halo: #FFFFFF;
    --slk-valide: #26b050;
    --slk-invalide: #e50000;
    --slk-bordure: rgba(30,77,70,0.35);
    --slk-backdrop: #000000;

    --slk-ombre-filtre: 0 6px 12px rgba(31,42,46,.14);
    --slk-ombre-deroulant: 0 8px 20px rgba(31,42,46,.22);
    --slk-ombre-menu: 4px 0 14px rgba(31,42,46,.25);
    --slk-ombre-fiche: 0 12px 40px rgba(31,42,46,.28);
    --slk-ombre-photo: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    --slk-ombre-relief: #7FA79B;
    --slk-survol-voile: rgba(0,0,0,0.28);

    --slk-gene-bon-1: #11C38F;
    --slk-gene-bon-2: #087754;
    --slk-gene-bon-texte: #FFFFFF;
    --slk-gene-moyen-1: #FED000;
    --slk-gene-moyen-2: #F19907;
    --slk-gene-moyen-texte: #000000;
    --slk-gene-mauvais-1: #FB3100;
    --slk-gene-mauvais-2: #9F0C01;
    --slk-gene-mauvais-texte: #FFFFFF;
    --slk-gene-restant: #dddddd;
    --slk-gene-max: #333333;

    --slk-piste-fond: #d8e6c7;
    --slk-box-bleu: #3d8bfd;
    --slk-box-vert: #198754;
    --slk-box-texte: #FFFFFF;
    --slk-course-texte: #FFFFFF;
    --slk-course-bordure: #F2AB32;
    --slk-course-survol-texte: #8CC134;
    --slk-course-survol-bordure: #79D528;
    --slk-photo-cadre: #FFFFFF;
    --slk-slot-fond: #cdcdcd;
    --slk-slot-degrade-1: #bbbbbb;
    --slk-slot-degrade-2: #eeeeee;
    --slk-slot-bord-haut: #777777;
    --slk-slot-bord-cote: #999999;
    --slk-slot-bord-bas: #666666;
    --slk-slot-gain-fond: #FFD700;
    --slk-slot-gain-texte: #666666;
    --slk-slot-gain-bord: #000000;
    --slk-slot-gain-ombre: #555555;
    --slk-roue-pointeur: #cc0000;
    --slk-dropzone-drag: #016E9E;
    --slk-dropzone-apercu: #999999;
    --slk-dropzone-bord: #000000;
    --slk-checkbox-bordure: #929292;
    --slk-medaille-texte: #FFFFFF;
    --slk-slot-image-fond: #FFFFFF;
    --slk-btn-primary-fond: #1b6ec2;
    --slk-btn-primary-bordure: #1861ac;
    --slk-btn-primary-texte: #FFFFFF;
    --slk-survol-voile-clair: rgba(255,255,255,0.12);
    --slk-ombre-haute: 0 1px 2px rgba(31,42,46,.06), 0 10px 28px rgba(31,42,46,.12);
    --slk-piste-choix-fond: #F2F7F5;
    --slk-piste-choix-bordure: #C7DCD4;
    --slk-table-head-texte: #E4EFEA;
    --slk-table-head-lien: #FFD166;
    --slk-pagination-1: #5A7D8C;
    --slk-pagination-2: #456575;
    --slk-pagination-texte: #FFFFFF;
    --slk-pagination-survol: #6B90A0;
    --slk-selection-accent: #15616D;

    /* Second vert du degrade du menu. */
    --slk-menu-bg-2: #163A34;
    --slk-focus-anneau: rgba(21,97,109,0.28);
    --slk-ombre-creux: inset 0 2px 5px rgba(31,42,46,0.16);
    /* Le cadre blanc et la ligne de tableau se confondaient : l'ecran etait trop
       blanc. La ligne prend une teinte, et le survol suit pour rester distinct. */
    --slk-cadre-bg: rgba(255,255,255,0.96);
    --slk-table-bg: #F1F7F4;
    --slk-message-bg: #F1F7F4;
    --slk-td-hover-bg: #D4E5DC;
    --slk-card-pied-bg: var(--slk-table-bg);
    /* Le fond de la zone de chat reste CLAIR dans toutes les chartes, y compris les
       sombres. Ce n'est pas un oubli : chaque joueur choisit sa couleur d'ecriture,
       librement et par defaut en noir. Un fond sombre rendrait donc invisibles les
       messages de tous ceux qui ont garde le noir ou choisi une teinte foncee.
       C'est la seule surface du jeu qui echappe volontairement a la charte. */
    --slk-chat-fond: #F1F7F4;
    --slk-chat-texte: #1F2A2E;
    --slk-chat-systeme: #586A70;
    --slk-chat-alerte: #B3261E;
    --slk-voile-modale: rgba(31,42,46,0.50);
}


[data-bs-theme="slk-noir"] {
    /* Mode sombre de CONFORT, et non style sombre. Ses cibles sont inhabituelles :
       le contraste du texte vise 10 a 13 et non le maximum -- au-dela de 15, le texte
       clair bave sur le fond (halation), ce qui fatigue justement dans l'obscurite.
       Les grandes surfaces sont desaturees (moins de 0,15), et l'elevation se lit a la
       clarte et non a l'ombre, une ombre ne se voyant pas sur du sombre.
       L'ancienne version faisait l'inverse : blanc pur sur noir pur a 21 : 1, avec un
       fond de tableau vert sature a 0,77. */
    /* Assombri : le blanc sur l'ancien #DD3333 ne donnait que 3,59 en deuteranomalie. */
    --slk-badge-alerte-bg: #A33A3A;
    --slk-badge-alerte-texte: #F2EFE7;
    --slk-fond-bg: #0A0C0A;
    --slk-cadre-bg: rgba(26,30,25,0.97);
    --slk-texte: #DFE3DB;
    /* Eclairci : sur le fond de ligne survolee et sur la selection, l'ancien #4AF
       tombait a 3,65 et 3,45 en vision deuteranomale. La, 5,83 et 5,51. */
    --slk-link: #7FBDD6;
    --slk-link-dark: #9AA396;
    --slk-link-alerte: #D9B96A;
    --slk-logo-background: #FFFFFF;
    --slk-btn-picto-background: #FFFFFF;
    --slk-btn-picto-border: #4A5245;
    --slk-btn-picto-border-hover: #6B7565;
    --slk-btn-background-start: #8A6021;
    --slk-btn-background-end: #6E4C17;
    --slk-btn-background-hover: #4C6739;
    --slk-btn-background-secondaire: #272C25;
    --slk-btn-background-secondaire-hover: #333A30;
    --slk-btn-color: #F2EFE7;
    --slk-menu-bg: #161A15;
    --slk-menu-text: #9AA396;
    --slk-menu-link: #CBD2C6;
    --slk-menu-link-actif: #8FC98A;
    --slk-menu-link-hover: #D9B96A;
    --slk-clock-bg: #20241F;
    --slk-clock-bg-hover: #2B312A;
    --slk-clock-text: #DFE3DB;
    --slk-clock-shadow: 0 0 5px #000000;
    --slk-modal-degrade-debut: #232A21;
    --slk-modal-degrade-fin: #1A1E19;
    --slk-modal-bg: #1A1E19;
    --slk-scrollbar-color: #191D18;
    --slk-scrollbarthumb-color: #3A4238;
    --slk-scrollbarthumb-hover-color: #4C5549;
    --slk-filtre-bg: #20241F;
    --slk-filtre-header-bg: rgba(255,255,255,0.08);
    --slk-onglet-bg: #2A3129;
    --slk-onglet-bg-hover: #3F463E;   /* 4,71:1 face a --slk-link */
    --slk-check-bg: #4A5245;
    --slk-check-bgactif: #7FBDD6;
    /* Fond de case clair : la coche blanche tombait a 2,07:1. En noir, 9,13:1. */
    --slk-coche: var(--slk-coche-noire);
    --slk-pastille: var(--slk-pastille-noire);
    --slk-light-grey: #333;
    --slk-medium-grey: #888;
    --slk-dark-grey: #BBB;
    --slk-table-bg: #191D18;
    --slk-message-bg: #272D26;
    --slk-table-color: #DFE3DB;
    --slk-table-head-bg: #232A21;
    --slk-table-select-color: #242F3A;
    --slk-biorythme-legende: rgba(30,30,30,0.90);
    --slk-td-hover-bg: #232821;
    /* spécifiques au dark-mode*/
    --bs-body-color: #EEEEEE;
    --bs-body-bg: #666666;
    --bs-body-color-rgb: 230, 230, 230;
    --bs-tertiary-bg: #261A10;
    --bs-danger-rgb: 230,230,20;
    --bs-secondary-bg: #393c3f;
    --bs-secondary-color: #cccccc;
    /* modification directe bootstrap */
    --bs-btn-hover-color: var(--slk-texte);

    /* --- Etats et mise au point --- */
    --slk-focus: #7FBDD6;
    --slk-focus-halo: #FFFFFF;
    --slk-valide: #26b050;
    --slk-invalide: #e50000;
    /* Etait rgba(0,0,0,0.5), recopie de la charte claire : du noir sur des surfaces
       presque noires, soit 1,13 : 1 -- autant dire pas de bordure du tout. C'est ce qui
       rendait les onglets, les cartes et les encadres indistincts en mode sombre. Un gris
       clair translucide donne 3,01, du meme ordre que les 3,88 de la charte par defaut. */
    --slk-bordure: rgba(223,227,219,0.38);
    --slk-backdrop: #000000;

    /* --- Ombres --- */
    --slk-ombre-filtre: 0 6px 12px rgba(0,0,0,0.25);
    --slk-ombre-deroulant: 0 6px 18px rgba(0,0,0,0.55);
    --slk-ombre-menu: 4px 0 14px rgba(0,0,0,0.5);
    --slk-ombre-fiche: 0 12px 40px rgba(0,0,0,0.6);
    --slk-ombre-photo: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    --slk-ombre-relief: #444;
    --slk-survol-voile: rgba(0,0,0,0.28);

    /* --- Genetique : bon / moyen / mauvais --- */
    --slk-gene-bon-1: #11C38F;
    --slk-gene-bon-2: #087754;
    --slk-gene-bon-texte: #FFFFFF;
    --slk-gene-moyen-1: #FED000;
    --slk-gene-moyen-2: #F19907;
    --slk-gene-moyen-texte: #000000;
    --slk-gene-mauvais-1: #FB3100;
    --slk-gene-mauvais-2: #9F0C01;
    --slk-gene-mauvais-texte: #FFFFFF;
    --slk-gene-restant: #dddddd;
    --slk-gene-max: #333333;

    /* --- Ecrans particuliers --- */
    --slk-piste-fond: #d8e6c7;
    --slk-box-bleu: #3d8bfd;
    --slk-box-vert: #198754;
    --slk-box-texte: #FFFFFF;
    --slk-course-texte: #FFFFFF;
    --slk-course-bordure: #F2AB32;
    --slk-course-survol-texte: #8CC134;
    --slk-course-survol-bordure: #79D528;
    --slk-photo-cadre: #FFFFFF;
    --slk-slot-fond: #cdcdcd;
    --slk-slot-degrade-1: #bbbbbb;
    --slk-slot-degrade-2: #eeeeee;
    --slk-slot-bord-haut: #777777;
    --slk-slot-bord-cote: #999999;
    --slk-slot-bord-bas: #666666;
    --slk-slot-gain-fond: #FFD700;
    --slk-slot-gain-texte: #666666;
    --slk-slot-gain-bord: #000000;
    --slk-slot-gain-ombre: #555555;
    --slk-roue-pointeur: #cc0000;
    --slk-dropzone-drag: #016E9E;
    --slk-dropzone-apercu: #999999;
    --slk-dropzone-bord: #000000;
    --slk-checkbox-bordure: #929292;
    --slk-medaille-texte: #FFFFFF;
    --slk-slot-image-fond: #FFFFFF;
    --slk-btn-primary-fond: #1b6ec2;
    --slk-btn-primary-bordure: #1861ac;
    --slk-btn-primary-texte: #FFFFFF;
    --slk-survol-voile-clair: rgba(255,255,255,0.10);
    --slk-ombre-haute: 0 6px 18px rgba(0,0,0,0.30);
    --slk-piste-choix-fond: #1F241E;
    --slk-piste-choix-bordure: #39402F;
    --slk-table-head-texte: #DFE3DB;
    --slk-table-head-lien: #C7B27A;
    --slk-pagination-1: #39473A;
    --slk-pagination-2: #2B372C;
    --slk-pagination-texte: #F2EFE7;
    --slk-pagination-survol: #48584A;
    --slk-selection-accent: #7FBDD6;
    --slk-focus-anneau: rgba(127,189,214,0.30);
    --slk-ombre-creux: inset 0 2px 4px rgba(0,0,0,0.45);
    --slk-menu-bg-2: #111410;
    --slk-card-pied-bg: var(--slk-table-bg);
    /* Le fond de la zone de chat reste CLAIR dans toutes les chartes, y compris les
       sombres. Ce n'est pas un oubli : chaque joueur choisit sa couleur d'ecriture,
       librement et par defaut en noir. Un fond sombre rendrait donc invisibles les
       messages de tous ceux qui ont garde le noir ou choisi une teinte foncee.
       C'est la seule surface du jeu qui echappe volontairement a la charte. */
    --slk-chat-fond: #DCDCD6;
    --slk-chat-texte: #2A2A26;
    --slk-chat-systeme: #5E5E58;
    --slk-chat-alerte: #A32620;
    --slk-voile-modale: rgba(0,0,0,0.65);
}

/* ---------------------------------------------------------------------------
   Charte « v7-2 » : fluo, esprit e-sport.
   Vert, bleu et rouge fluo sur du noir. Ces couleurs saturees sont parfaitement
   lisibles ici -- 13,76 : 1 pour le vert, 11,98 pour le cyan -- parce que le fond
   est noir ; les memes sur du blanc seraient inutilisables.

   Le rouge et le vert s y cotoient, ce qui serait interdit s ils portaient une
   information l un contre l autre. Ce n est pas le cas : le rouge est la couleur
   des boutons, reconnaissables a leur forme, et le vert celle de l entree courante
   du menu, doublee par sa barre d accent.

   A ne pas confondre avec le mode sombre : celui-ci est un STYLE, contraste pousse
   et saturation maximale ; le mode sombre est un REGLAGE DE CONFORT, assourdi.
   --------------------------------------------------------------------------- */
[data-bs-theme="slk-v7-2"] {
       le contraste du texte vise 10 a 13 et non le maximum -- au-dela de 15, le texte
       clair bave sur le fond (halation), ce qui fatigue justement dans l'obscurite.
       Les grandes surfaces sont desaturees (moins de 0,15), et l'elevation se lit a la
       clarte et non a l'ombre, une ombre ne se voyant pas sur du sombre.
       L'ancienne version faisait l'inverse : blanc pur sur noir pur a 21 : 1, avec un
    --slk-badge-alerte-bg: #C00030;
    --slk-badge-alerte-texte: #FFFFFF;
    --slk-fond-bg: #000000;
    --slk-cadre-bg: #0E1420;
    --slk-texte: #EAF2FF;
    --slk-link: #00E5FF;
    --slk-link-dark: #8FA3BF;
    --slk-link-alerte: #39FF6A;
    --slk-logo-background: #FFFFFF;
    --slk-btn-picto-background: #FFFFFF;
    --slk-btn-picto-border: #2A3A52;
    --slk-btn-picto-border-hover: #00E5FF;
    --slk-btn-background-start: #F5003C;
    --slk-btn-background-end: #C00030;
    --slk-btn-background-hover: #DA0036;
    --slk-btn-background-secondaire: #172234;
    --slk-btn-background-secondaire-hover: #213247;
    --slk-btn-color: #FFFFFF;
    --slk-menu-bg: #0A0F19;
    --slk-menu-text: #8FA3BF;
    --slk-menu-link: #C6D6EC;
    --slk-menu-link-actif: #39FF6A;
    --slk-menu-link-hover: #00E5FF;
    --slk-clock-bg: #0E1420;
    --slk-clock-bg-hover: #172234;
    --slk-clock-text: #00E5FF;
    --slk-clock-shadow: 0 0 5px #000000;
    --slk-modal-degrade-debut: #141C2B;
    --slk-modal-degrade-fin: #0E1420;
    --slk-modal-bg: #0E1420;
    --slk-scrollbar-color: #0E1420;
    --slk-scrollbarthumb-color: #2A3A52;
    --slk-scrollbarthumb-hover-color: #00E5FF;
    --slk-filtre-bg: #121A28;
    --slk-filtre-header-bg: rgba(0,229,255,0.12);
    --slk-onglet-bg: #212E44;
    --slk-onglet-bg-hover: #374357;   /* 6,49:1 face a --slk-link */
    --slk-check-bg: #2A3A52;
    --slk-check-bgactif: #00E5FF;
    /* Fond de case tres clair : la coche blanche tombait a 1,54:1. En noir, 12,28:1. */
    --slk-coche: var(--slk-coche-noire);
    --slk-pastille: var(--slk-pastille-noire);
    --slk-light-grey: #333;
    --slk-medium-grey: #888;
    --slk-dark-grey: #BBB;
    --slk-table-bg: #0E1420;
    --slk-message-bg: #1C283C;
    --slk-table-color: #EAF2FF;
    --slk-table-head-bg: #141C2B;
    --slk-table-select-color: #0E2A3E;
    --slk-biorythme-legende: rgba(30,30,30,0.90);
    --slk-td-hover-bg: #172234;
    --bs-body-color: #EEEEEE;
    --bs-body-bg: #666666;
    --bs-body-color-rgb: 230, 230, 230;
    --bs-tertiary-bg: #261A10;
    --bs-danger-rgb: 230,230,20;
    --bs-secondary-bg: #393c3f;
    --bs-secondary-color: #cccccc;
    --bs-btn-hover-color: var(--slk-texte);

    --slk-focus: #00E5FF;
    --slk-focus-halo: #FFFFFF;
    --slk-valide: #26b050;
    --slk-invalide: #e50000;
    --slk-bordure: rgba(0,229,255,0.25);
    --slk-backdrop: #000000;

    --slk-ombre-filtre: 0 6px 12px rgba(0,0,0,0.25);
    --slk-ombre-deroulant: 0 6px 18px rgba(0,0,0,0.55);
    --slk-ombre-menu: 4px 0 14px rgba(0,0,0,0.5);
    --slk-ombre-fiche: 0 12px 40px rgba(0,0,0,0.6);
    --slk-ombre-photo: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    --slk-ombre-relief: #444;
    --slk-survol-voile: rgba(0,0,0,0.28);

    --slk-gene-bon-1: #11C38F;
    --slk-gene-bon-2: #087754;
    --slk-gene-bon-texte: #FFFFFF;
    --slk-gene-moyen-1: #FED000;
    --slk-gene-moyen-2: #F19907;
    --slk-gene-moyen-texte: #000000;
    --slk-gene-mauvais-1: #FB3100;
    --slk-gene-mauvais-2: #9F0C01;
    --slk-gene-mauvais-texte: #FFFFFF;
    --slk-gene-restant: #dddddd;
    --slk-gene-max: #333333;

    --slk-piste-fond: #d8e6c7;
    --slk-box-bleu: #3d8bfd;
    --slk-box-vert: #198754;
    --slk-box-texte: #FFFFFF;
    --slk-course-texte: #FFFFFF;
    --slk-course-bordure: #F2AB32;
    --slk-course-survol-texte: #8CC134;
    --slk-course-survol-bordure: #79D528;
    --slk-photo-cadre: #FFFFFF;
    --slk-slot-fond: #cdcdcd;
    --slk-slot-degrade-1: #bbbbbb;
    --slk-slot-degrade-2: #eeeeee;
    --slk-slot-bord-haut: #777777;
    --slk-slot-bord-cote: #999999;
    --slk-slot-bord-bas: #666666;
    --slk-slot-gain-fond: #FFD700;
    --slk-slot-gain-texte: #666666;
    --slk-slot-gain-bord: #000000;
    --slk-slot-gain-ombre: #555555;
    --slk-roue-pointeur: #cc0000;
    --slk-dropzone-drag: #016E9E;
    --slk-dropzone-apercu: #999999;
    --slk-dropzone-bord: #000000;
    --slk-checkbox-bordure: #929292;
    --slk-medaille-texte: #FFFFFF;
    --slk-slot-image-fond: #FFFFFF;
    --slk-btn-primary-fond: #1b6ec2;
    --slk-btn-primary-bordure: #1861ac;
    --slk-btn-primary-texte: #FFFFFF;
    --slk-survol-voile-clair: rgba(255,255,255,0.10);
    --slk-ombre-haute: 0 0 0 1px rgba(0,229,255,0.14), 0 14px 34px rgba(0,0,0,0.85);
    --slk-piste-choix-fond: #111722;
    --slk-piste-choix-bordure: #2A3A52;
    --slk-table-head-texte: #EAF2FF;
    --slk-table-head-lien: #00E5FF;
    --slk-pagination-1: #26364F;
    --slk-pagination-2: #1A2536;
    --slk-pagination-texte: #EAF2FF;
    --slk-pagination-survol: #33415A;
    --slk-selection-accent: #00E5FF;
    --slk-focus-anneau: rgba(0,229,255,0.35);
    --slk-ombre-creux: inset 0 2px 4px rgba(0,0,0,0.45);
    --slk-menu-bg-2: #060A11;
    --slk-card-pied-bg: var(--slk-table-bg);
    /* Le fond de la zone de chat reste CLAIR dans toutes les chartes, y compris les
       sombres. Ce n'est pas un oubli : chaque joueur choisit sa couleur d'ecriture,
       librement et par defaut en noir. Un fond sombre rendrait donc invisibles les
       messages de tous ceux qui ont garde le noir ou choisi une teinte foncee.
       C'est la seule surface du jeu qui echappe volontairement a la charte. */
    --slk-chat-fond: #D8DEE6;
    --slk-chat-texte: #1B2430;
    --slk-chat-systeme: #55606E;
    --slk-chat-alerte: #A8102F;
    --slk-voile-modale: rgba(0,0,0,0.75);
}

/* =============================================================================
   3. SURCHARGES BOOTSTRAP LIEES A LA CHARTE
   A dupliquer pour toute nouvelle charte sombre.
   ============================================================================= */
    [data-bs-theme="slk-noir"] .list-group {
        --bs-list-group-action-hover-color: #aaa;
    }

    /* Le bloc [data-bs-theme="slk-noir"] .nav-tabs a ete retire : il rattrapait a la main
       la couleur du libelle des onglets pour la seule charte sombre. Les deux valeurs
       viennent maintenant de --slk-link et --slk-texte, donc de la charte, et les quatre
       suivent sans rattrapage. */

@font-face {
    font-family: 'Dseg7';
    src: url('dseg7-classic-latin-400-normal.woff');
    font-weight: 400;
    font-style: normal;
}

/* Valeurs de repli (tons clairs) pour les pages sans thème slk (public : accueil, mentions…),
   où les variables ne sont pas définies : sans elles l'ascenseur est transparent/invisible. */
/* =============================================================================
   4. SOCLE
   ============================================================================= */
::-webkit-scrollbar {
    background-color: var(--slk-scrollbar-color, #F0F0F0);
}

::-webkit-scrollbar-thumb {
    background-color: var(--slk-scrollbarthumb-color, #C0C0C0);
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--slk-scrollbarthumb-hover-color, #D0D0D0);
    }

.slk-card-conteneur {
    flex-grow: 1;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-width: var(--slk-largeur-max);
}

.slk-card-contenu {
    display: grid;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
}

.slk-card-scrollable {
    overflow: auto;
    height: 100%;
    min-height: 0;
}

.slk-card-conteneur-global-scroll {
    /* Meme retrait qu'en tableau : c'est ce que la barre collante compense. */
    --slk-table-global-sticky-offset: 6px;
    flex-grow: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
}

    .slk-card-conteneur-global-scroll .slk-card-contenu {
        height: auto;
    }

.slk-card-scrollable-global {
    width: 100%;
    min-width: 0;
    min-height: 0;
}

.slk-table-conteneur {
    flex-grow: 1;
    width: 100%;
    min-width: 0;
    min-height: 0;
}

    .slk-table-conteneur table {
        white-space: nowrap;
    }

    .slk-table-conteneur th {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .slk-table-conteneur th:first-child {
            position: sticky;
            left: 0;
            z-index: 2;
        }

.slk-tr-sticky td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* La colonne collante ne porte plus ni plafond de largeur ni retour a la ligne.

   Elle en a eu : max-width a la moitie de l'ecran, white-space normal, overflow-wrap anywhere.
   L'idee etait qu'une colonne qui reste devant les yeux pendant le defilement horizontal ne
   mange pas la place. Le prix etait trop lourd : « anywhere » fait compter le plus long mot
   pour une seule lettre dans la largeur minimale de la colonne, et comme toutes les autres
   colonnes sont en nowrap et ne peuvent pas ceder un pixel, c'est celle-ci qui encaissait tout
   des que le tableau ne tenait plus. Mesure a 380 px de large : l'en-tete tombait a 28 px,
   « Che val Sign ale ti que » sur six lignes.

   Le retour a la ligne est donc rendu aux seules colonnes qui en ont besoin -- celles dont le
   contenu est un texte libre qui peut etre vraiment long, annonces en tete. Elles se declarent
   avec .slk-col-large, sur le <td> comme sur le <th>. */

.slk-table-contenu {
    display: grid;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
}

.slk-table-scrollable {
    overflow: auto;
    height: 100%;
    min-height: 0;
}

.slk-table-conteneur-global-scroll {
    --slk-table-global-sticky-offset: 6px;
    flex-grow: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
}

    .slk-table-conteneur-global-scroll .slk-table-contenu {
        height: auto;
    }

/* Dans une modale, le retrait a compenser est le rembourrage de la modale, pas les 6 px que
   la colonne de liste laisse en haut. La variante CARTES manquait a cette regle : elle gardait
   ses 6 px alors que la modale en laisse seize, et la barre collante ne repeignait donc que
   six pixels d'une bande de seize. La liste defilait dans les dix restants, au-dessus du
   filtre. */
.modal-body .slk-table-conteneur-global-scroll,
.modal-body .slk-card-conteneur-global-scroll {
    --slk-table-global-sticky-offset: var(--bs-modal-padding);
}

/* Et ce que la barre masque dans une modale, c'est la modale : son fond de panneau y peignait
   la mauvaise couleur, translucide de surcroit. */
.modal-body .slk-liste-barre {
    background-color: var(--slk-modal-bg);
}

.slk-table-conteneur-global-scroll th {
    /* Sous la barre de filtre et d'actions, dont la hauteur est mesuree en JS. */
    top: calc(var(--slk-barre-hauteur, 0px) - var(--slk-table-global-sticky-offset));
    box-shadow: 0 calc(-1 * var(--slk-table-global-sticky-offset)) 0 var(--slk-table-head-bg);
}

.slk-table-scrollable-global {
    overflow-x: clip;
    overflow-y: visible;
    width: 100%;
    min-width: 0;
    min-height: 0;
    scrollbar-width: none;
    /* le scroll vertical reste natif (page), les gestes horizontaux sont gérés en JS
       pour permettre le swipe horizontal n'importe où sur le tableau */
    touch-action: pan-y;
}

    .slk-table-scrollable-global table {
        transform: translateX(var(--slk-table-scroll-x, 0px));
    }

    .slk-table-scrollable-global th:first-child,
    .slk-table-scrollable-global .slk-tr-sticky td:first-child {
        transform: translateX(var(--slk-table-sticky-x, 0px));
    }

    .slk-table-scrollable-global::-webkit-scrollbar {
        height: 0;
    }

/* Barre de filtre et d'actions d'une liste : une seule ligne, collee en haut pendant le
   defilement. Le filtre prend la place disponible, les actions restent a droite. */
.slk-liste-barre {
    position: sticky;
    /* La zone de defilement laisse un retrait en haut. La barre se colle donc au-dessus de zero
       et repeint ce retrait par son remplissage, sinon le contenu defile dans cette bande.
       Meme procede que l'en-tete de tableau, avec la meme mesure. */
    top: calc(-1 * var(--slk-table-global-sticky-offset, 0px));
    z-index: 6;
    padding-top: var(--slk-table-global-sticky-offset, 0px);
    padding-bottom: 0.5rem;
    background-color: var(--slk-cadre-bg);
}

/* La barre elle-meme reste pleine largeur : c'est son fond qui masque la liste defilant
   dessous, et les cartes sont plus larges que le tableau. Seul son contenu est bride, pour
   s'aligner sur le tableau. */
.slk-liste-barre-contenu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    max-width: var(--slk-largeur-max);
    /* Repere de position du filtre deplie, pour qu'il se cale sur cette largeur-la. */
    position: relative;
}

/* Une barre collante ne colle que jusqu'au bas de son bloc conteneur. Or le conteneur de liste
   est un element flex a min-height:0 : il se laisse comprimer sous la taille de son contenu, qui
   deborde alors visiblement. La barre se decollait donc apres environ un ecran de defilement.
   L'empecher de retrecir lui redonne la hauteur de la liste entiere. */
.slk-liste-avec-barre {
    flex-shrink: 0;
}

.slk-liste-barre-filtre {
    flex: 1 1 auto;
    min-width: 0;
}

.slk-liste-barre-actions {
    flex: 0 0 auto;
}

/* Filtre deplie : le selectionneur s'efface, et le filtre reste donc seul sur la rangee -- il
   en prend toute la largeur, sans quoi ses lignes de criteres devenaient illisibles sur un
   petit ecran. On ne selectionne pas pendant qu'on filtre : lui garder sa place couterait une
   ligne d'ecran a une fonction qui n'est pas celle en cours. Il n'est que masque, les cases
   deja cochees sont toujours la quand le filtre se referme.
   Navigateur trop ancien pour :has() = regle ignoree, filtre etroit comme avant, rien de casse. */
.slk-liste-barre-contenu:has(.slk-filtre-contenu.d-block) .slk-liste-barre-actions {
    display: none;
}

/* Filtre deplie dans la barre : il repousse la liste vers le bas, et se borne en hauteur pour
   lui laisser la place. Au-dela, c'est le filtre qui defile -- on peut donc empiler les criteres
   sans perdre le resultat de vue, ce qui compte surtout en filtrage instantane, ou l'on regarde
   la liste changer pendant qu'on tape.

   La barre grandit donc en s'ouvrant. L'en-tete du tableau suit sans qu'on ait rien a faire :
   slk.initBarreListe mesure la barre en continu avec un ResizeObserver. */
.slk-liste-barre-filtre .slk-filtre-contenu.d-block {
    max-height: 40vh;
    overflow-y: auto;
}

/* Telephone couche : la liste n'a plus de hauteur a ceder, un filtre qui la repousse ne
   laisserait rien a voir. Il repasse donc PAR-DESSUS elle, et la barre garde sa hauteur.
   Meme condition que le reste de la feuille pour ce cas-la : un ecran tactile et bas. */
@media (pointer: coarse) and (max-height: 520px) {
    .slk-liste-barre-filtre .slk-filtre-contenu.d-block {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1;
        max-height: 60vh;
        background-color: var(--slk-filtre-bg);
        box-shadow: var(--slk-ombre-filtre);
    }

    /* Pour que le panneau se cale sur la rangee entiere et non sur la seule largeur du filtre,
       il faut que .slk-filtre cesse d'etre son repere de position : il est declare
       position:relative pour son usage habituel, hors de la barre. Le repere devient alors
       .slk-liste-barre-contenu, dont il epouse la largeur bridee. */
    .slk-liste-barre-filtre .slk-filtre {
        position: static;
    }
}

/* Barre de pagination, au-dessus et au-dessous de la liste. Elle reste sur une ligne et defile
   horizontalement si les numeros ne tiennent pas, plutot que de passer a la ligne. */
/* Le nombre de boutons est ajuste a la place disponible par slk.initPagination. Le retour a la
   ligne reste la pour les cas extremes — un libelle traduit tres long, par exemple — car un
   ascenseur horizontal sous la liste est plus genant qu'une seconde ligne. */
.slk-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0;
}

.slk-pagination-total {
    flex: 0 0 auto;
    margin-right: 0.5rem;
    white-space: nowrap;
}

.slk-pagination .btn {
    flex: 0 0 auto;
}

.slk-table-horizontal-scrollbar {
    position: sticky;
    bottom: calc(-1 * var(--slk-table-global-sticky-offset, 0px));
    z-index: 3;
    overflow-x: auto;
    overflow-y: hidden;
    height: calc(16px + var(--slk-table-global-sticky-offset, 0px));
    padding-top: var(--slk-table-global-sticky-offset, 0px);
    background-color: var(--slk-cadre-bg);
}

    .slk-table-horizontal-scrollbar > div {
        height: 1px;
    }

@media (max-width: 767.98px), (pointer: coarse) and (max-height: 520px) {
    .slk-table-conteneur,
    .slk-table-contenu,
    .slk-table-scrollable {
        height: auto;
        min-height: 0;
    }

    .slk-table-scrollable {
        overflow-x: auto;
        overflow-y: visible;
    }

    .slk-table-conteneur th:first-child {
        left: auto;
        z-index: 1;
    }

    .slk-tr-sticky td:first-child {
        position: static;
        left: auto;
        z-index: auto;
    }

    /* indispensable : sans ça, la contre-translation
       (.slk-table-scrollable-global ...:first-child) continue de figer
       la 1re colonne horizontalement -> sticky "à moitié" */
    .slk-table-scrollable-global th:first-child,
    .slk-table-scrollable-global .slk-tr-sticky td:first-child {
        transform: none;
    }
}

.slk-table-blocnote {
    padding: 0px !important;
}

/* Les boutons de pagination ne sont pas des actions : ils deplacent le regard, ils ne
   font rien au jeu. Une autre couleur que l'orange des actions, donc -- la page
   courante restant, elle, en couleur d'action. */
.slk-pagination .slk-table-btn {
    background: linear-gradient(var(--slk-pagination-1), var(--slk-pagination-2));
    color: var(--slk-pagination-texte);
}

    .slk-pagination .slk-table-btn:hover {
        background: linear-gradient(var(--slk-pagination-survol), var(--slk-pagination-survol));
        color: var(--slk-pagination-texte);
    }

.slk-table-btn {
    width: 32px;
    height: 32px;
    padding: 2px !important;
    /* Même raison que .slk-btn-picto : boîte fixe, contenu centré par flex. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--slk-btn-color);
    background: linear-gradient(var(--slk-btn-background-start), var(--slk-btn-background-end));
}

    .slk-table-btn:hover {
        color: var(--slk-btn-color);
        background: linear-gradient(var(--slk-btn-background-hover), var(--slk-btn-background-hover));
    }

/* Colonne de texte libre : une devise de clan, un libelle d'ecriture, tout ce qu'un joueur
   saisit sans limite de longueur. Le nowrap general du tableau la laisserait s'etaler sur
   mille pixels et ecraser les autres colonnes. Meme plafond que la colonne collante -- la
   moitie de l'ecran, sans depasser la moitie de la largeur de reference d'une liste -- et le
   texte y passe a la ligne. A poser sur le <td> ET sur son <th>. */
.slk-col-large {
    max-width: min(50vw, calc(var(--slk-largeur-max) / 2));
    white-space: normal !important;
    overflow-wrap: anywhere;
}

.table {
    --bs-table-bg: var(--slk-table-bg) !important;
    --bs-table-color: var(--slk-table-color) !important;
}

    /* L'en-tete a sa propre couleur de texte : une charte peut lui donner un fond
       sombre, ce que la couleur de texte du corps ne suivrait pas. */
    .table thead th {
        color: var(--slk-table-head-texte) !important;
        background-color: var(--slk-table-head-bg) !important;
        vertical-align: top;
    }

.slk-fond {
    background-color: var(--slk-fond-bg);
    color: var(--slk-texte);
}

/* Le fond de page est fixe : blanc en thème clair, noir en thème sombre, par --slk-fond-bg
   sur .slk-fond. Les images d'illustration par rubrique et les dix fonds unis ont été
   retirés -- les testeurs n'aimaient pas les images, et la couleur unie se voyait si peu
   qu'elle ne valait pas une option. */

.slk-page {
    /* La hauteur etait un vh-100 pose dans le balisage. Elle est ici pour que la grille prenne
       ce que le bandeau de maintenance lui laisse, au lieu de reclamer 100vh et de deborder
       d'un conteneur qui, lui, ne defile pas.

       width: 100% est INDISPENSABLE depuis que le conteneur est une colonne flex. La grille
       porte margin-inline: auto, qui la centre quand une largeur maximale s'applique ; or une
       marge automatique sur l'axe transversal annule l'etirement d'un element flex, qui retombe
       alors sur la largeur de son contenu. La mise en page se mettait donc a epouser ce qu'elle
       contenait au lieu de tenir toute la largeur. */
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: var(--slk-page-padding);
    /* Le bandeau ne contient que du pixel (logo, bouton picto de 48 px + marges) : il peut

       grandir avec la police, jamais descendre sous ce que son contenu occupe. */

    --slk-header-height: max(3.7rem, 59.2px);
    --slk-page-padding: 10px;
    --slk-layout-gap: 6px;
    --slk-menu-width: 280px;
    /* Largeur plancher de la fiche, et son plafond. Entre les deux elle prend ce que la
       liste ne consomme pas : celle-ci ne depasse jamais --slk-largeur-max. */
    --slk-fiche-width: 420px;
    --slk-fiche-max: 840px;
    /* Largeur maximale d'un bloc de contenu d'une fiche : une ligne « libelle / valeur »,
       une carte. La fiche plancher fait 420 px, soit environ 390 utiles ; au-dela elle
       s'elargit, mais le contenu primaire s'arrete la plutot que de s'etirer sur toute la
       largeur, ou l'oeil ne relie plus le libellé à sa valeur. C'est aussi ce qui permet a
       deux blocs de tenir cote a cote des que la fiche depasse 780 px. */
    --slk-bloc-max: 380px;
    /* Plancher d'une carte de fiche : en dessous son contenu se casse. */
    --slk-bloc-min: 320px;
}

/* =============================================================================
   5. MISE EN PAGE
   ============================================================================= */
/* Colonne : le bandeau de maintenance en haut quand il est la, la grille en dessous qui prend
   le reste. Sans bandeau le rendu est exactement celui d'avant, la grille etant seule. */
.slk-layout-container {
    max-width: none;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.slk-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--slk-layout-gap);
    min-height: 0;
    overflow: hidden;
    /* Centre la surface utile des qu'une largeur maximale s'applique : au-dela, mieux vaut
       du vide reparti des deux cotes qu'un bloc colle a gauche. */
    margin-inline: auto;
}

/* Trois colonnes. La fiche n'a plus de largeur fixe : elle prend ce qui reste une fois la
   liste servie a --slk-largeur-max, entre son plancher et son plafond. La liste garde le
   1fr, donc elle absorbe le reliquat -- et la largeur maximale de la grille est calculee
   pour que ce reliquat vaille exactement --slk-largeur-max sur un tres grand ecran.
   Sans elle, la fiche plafonnerait a 840 et l'espace vide reviendrait dans la liste. */
.slk-layout-all {
    grid-template-columns:
        var(--slk-menu-width)
        minmax(0, 1fr)
        clamp(var(--slk-fiche-width),
              100% - var(--slk-menu-width) - var(--slk-largeur-max) - 2 * var(--slk-layout-gap),
              var(--slk-fiche-max));
    max-width: calc(var(--slk-menu-width) + var(--slk-largeur-max) + var(--slk-fiche-max)
                    + 2 * var(--slk-layout-gap) + 2 * var(--slk-page-padding));
}

.slk-layout-menu-list {
    grid-template-columns: var(--slk-menu-width) minmax(0, 1fr);
}

/* Liste et fiche, le menu s'etant efface : meme regle, sans la colonne du menu. */
.slk-layout-list-fiche {
    grid-template-columns:
        minmax(0, 1fr)
        clamp(var(--slk-fiche-width),
              100% - var(--slk-largeur-max) - var(--slk-layout-gap),
              var(--slk-fiche-max));
    max-width: calc(var(--slk-largeur-max) + var(--slk-fiche-max)
                    + var(--slk-layout-gap) + 2 * var(--slk-page-padding));
}

.slk-layout-single {
    grid-template-columns: minmax(0, 1fr);
}

/* Presentation v6 : la fiche flotte au lieu d'occuper une colonne, mais la surface utile
   reste la meme -- la liste a gauche et la place ou la fiche vient se poser a droite. */
.slk-layout-v6 {
    max-width: calc(var(--slk-largeur-max) + var(--slk-fiche-max) + 2 * var(--slk-page-padding));
}

.slk-pane-visible {
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.slk-pane-hidden {
    display: none;
}

@media (max-width: 767.98px) {
    .slk-layout,
    .slk-layout-all,
    .slk-layout-menu-list,
    .slk-layout-list-fiche,
    .slk-layout-single {
        grid-template-columns: minmax(0, 1fr);
    }
}

.slk-cadre {
    background-color: var(--slk-cadre-bg);
}

.slk-header-spacer {
    height: var(--slk-header-height);
    border-bottom: 3px solid var(--slk-fond-bg);
}

/* =============================================================================
   6. COMPOSANTS
   ============================================================================= */
.slk-menu {
    margin-right: 0;
}

.slk-menu-contenu {
    height: calc(100% - var(--slk-header-height));
    padding: 6px;
}

.slk-menu-header {
    height: var(--slk-header-height);
    padding-right: 6px;
}

.slk-menu-menu {
    background-color: var(--slk-menu-bg);
    color: var(--slk-menu-text);
    padding: 6px 6px 20px 6px;
}

/* Les selecteurs du menu disent « :is(a, button) » : l'entree qui navigue est un lien, le
   deplieur d'un groupe est un bouton -- il ouvre et ferme, il ne va nulle part. Les deux
   doivent se presenter pareil. */
.slk-menu-item :is(a, button) {
    color: var(--slk-menu-link);
    font-size: 1.2rem;
    text-decoration: none;
    width: 100%;
    overflow: hidden;
    display: block;
    white-space: nowrap;
    cursor: pointer;
}

    .slk-menu-item :is(a, button):hover {
        color: var(--slk-menu-link-hover);
    }

.slk-menu-actif :is(a, button) {
    color: var(--slk-menu-link-actif);
}

.slk-menu-deplier svg {
    transform: rotate(180deg);
}

.slk-menu-replier svg {
    transform: rotate(0deg);
}

.slk-menu-group .slk-menu-item :is(a, button) {
    padding-left: 20px;
}

.slk-logo {
    display: inline-block;
    background-color: var(--slk-logo-background);
    border: 2px solid var(--slk-btn-picto-border);
    border-radius: 5px;
    margin: 1px;
}

    .slk-logo:hover {
        border-color: var(--slk-btn-picto-border-hover);
    }

/* Pastille du nombre d'alertes, posee sur le logo du menu. Le logo devient le repere
   positionnant : la pastille deborde volontairement sur son coin. */
.slk-logo-alerte {
    position: relative;
}

.slk-badge-alerte {
    position: absolute;
    /* Centree sur la hauteur du logo : debordait en haut, et l'en-tete la coupait. */
    top: 50%;
    transform: translateY(-50%);
    right: -8px;
    min-width: 1.25rem;
    padding: 0 0.25rem;
    background-color: var(--slk-badge-alerte-bg);
    color: var(--slk-badge-alerte-texte);
    border-radius: 0.75rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    text-align: center;
    font-weight: bold;
    pointer-events: none;
}

.slk-clock {
    background: var(--slk-clock-bg);
    width: 150px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 20px;
    margin-top: 10px;
    box-shadow: var(--slk-clock-shadow);
    cursor: pointer;
}

    .slk-clock:hover {
        background: var(--slk-clock-bg-hover);
    }

.slk-heure {
    display: block;
    float: left;
    width: 115px;
    height: 40px;
}

.slk-heure-contenu {
    /* Afficheur de taille fixe (150 x 40 px) : sa police reste en pixels, sinon le texte
       déborde sur le picto météo à sa droite quand le joueur agrandit la police. */
    font-size: 19.2px;
    color: var(--slk-clock-text);
    padding-left: 5px;
    padding-top: 5px;
}

    .slk-heure-contenu span {
        font-family: Dseg7, "Lucida Console", "Courier New", monospace;
        color: var(--slk-clock-text);
        font-size: 19.2px;
    }

.slk-meteo {
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    margin-top: 4px;
}

.slk-btn-picto {
    width: 48px;
    height: 48px;
    margin: 3px;
    /* Boîte fixe, contenu centré par flex : sans ça le picto se décale quand la police
       grandit, la marge intérieure de .btn étant exprimée en rem. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--slk-btn-color);
    background: linear-gradient(var(--slk-btn-background-start), var(--slk-btn-background-end));
}

    .slk-btn-picto:hover {
        color: var(--slk-btn-color);
        background: linear-gradient(var(--slk-btn-background-hover), var(--slk-btn-background-hover));
    }

/* Le picto et le libelle sont deux elements voisins dans le balisage, separes par un simple
   retour a la ligne -- que Razor supprime, les noeuds blancs entre deux elements etant elagues
   a la compilation. Ils se retrouvaient donc colles. Un flex avec gap les separe pour de bon,
   et les centre l'un sur l'autre ; quand la barre se compacte et masque le libelle, il n'y a
   plus qu'un element et le gap ne laisse aucun vide. */
.slk-btn-text {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 3px;
    color: var(--slk-btn-color);
    background: linear-gradient(var(--slk-btn-background-start), var(--slk-btn-background-end));
}

    .slk-btn-text:hover {
        color: var(--slk-btn-color);
        background: linear-gradient(var(--slk-btn-background-hover), var(--slk-btn-background-hover));
        text-decoration: none;
    }

/* .slk-btn-text-important a ete retiree : cinq usages pour deux intentions
   differentes -- l'action principale d'un formulaire, que .slk-btn-text dit deja,
   et l'appel a l'inscription, obtenu maintenant en passant « connexion » en
   secondaire. Deux niveaux de bouton suffisent. */

.slk-btn-text-secondaire {
    margin: 3px;
    color: var(--slk-texte);
    background-color: var(--slk-btn-background-secondaire);
    border: 1px solid var(--slk-btn-background-secondaire-hover);
}

    .slk-btn-text-secondaire:hover {
        color: var(--slk-texte);
        background: var(--slk-btn-background-secondaire-hover);
        text-decoration: none;
    }

/* Le troisieme niveau : un bouton qui ressemble a un lien. Pour une action posee au milieu
   d'une phrase -- « Nom : Bucephale - modifier » -- ou un vrai bouton casserait la ligne.
   Hors du texte, une action isolee prend .slk-btn-text.

   C'est bien un <button> : le <a href=""> qu'on ecrivait jusqu'ici mentait sur ce qu'il
   fait. Ctrl+clic ou clic milieu rouvrait la page courante, donc un second circuit Blazor
   pour rien ; le clavier et les lecteurs d'ecran annoncaient une navigation ; et
   @onclick:preventDefault etait la pour empecher justement ce que l'element promettait.

   La couleur vient de --slk-link et non du bleu de Bootstrap : celui-ci, jamais surcharge,
   ne tient les 4,5:1 que sur le fond blanc de la charte par defaut -- il tombe a 3,62 sur
   le fond pastel et a 3,79 sur le fond des tableaux de la charte sombre. */
.slk-lien-action {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: var(--slk-link);
    text-decoration: none;
    /* Un bouton n'herite ni la police ni l'alignement du texte qui l'entoure. */
    font: inherit;
    text-align: inherit;
    vertical-align: baseline;
    cursor: pointer;
    /* Pour le cas des en-tetes de carte : la classe est posee avec .stretched-link, dont
       le ::after deborde de la boite pour couvrir tout l'en-tete. Certains navigateurs
       rognent le debordement d'un bouton, ce qu'ils ne font pas d'un lien -- d'ou cette
       ligne, qui n'a pas d'autre role. */
    overflow: visible;
}

    /* Le trait n'apparait qu'au survol : la couleur suffit a signaler l'action, et une page
       de fiche en compte parfois dix. Il vient aussi au clavier, ou il n'y a pas de survol
       pour le montrer. */
    .slk-lien-action:hover,
    .slk-lien-action:focus-visible {
        color: var(--slk-link);
        text-decoration: underline;
    }

    .slk-lien-action:focus-visible {
        outline: 2px solid var(--slk-focus);
        outline-offset: 2px;
    }

.slk-fiche {
    margin-left: 0;
}

.slk-fiche-header {
    height: var(--slk-header-height);
    padding-right: 6px;
}

.slk-fiche-contenu {
    height: calc(100% - var(--slk-header-height));
    padding: 6px;
}

/* Ce qui vaut pour toute fiche, quelle que soit la presentation : la colonne de droite de
   la v7 et le panneau flottant de la v6 sont deux habillages du meme contenu. Les regles
   sont ici plutot que dans le gabarit de chaque fiche : une fiche nouvelle en herite sans
   qu'on ait a y penser. */
.slk-fiche-contenu,
.slk-fiche-flottante-contenu {
    /* Le contenu primaire s'arrete a la largeur d'une fiche plancher. */
    --slk-ligne-max: var(--slk-bloc-max);
}

    /* Les boutons d'une fiche se centrent : ils sont sous la photo, elle-meme centree.
       Ailleurs -- listes, modales, pages -- la barre reste calee a gauche. */
    .slk-fiche-contenu > .slk-barre-boutons,
    .slk-fiche-flottante-contenu > .slk-barre-boutons {
        justify-content: center;
    }

    /* Les cartes d'une fiche. Une par rangee tant que la fiche est etroite, deux des qu'elle
       s'elargit : elle va jusqu'a 840 px, deux blocs de 380 y tiennent. Une carte ne
       descend pas sous --slk-bloc-min, en dessous de quoi son contenu se casse ; le
       min(100%) evite qu'elle deborde d'une fiche plus etroite que ce plancher.

       align-items: stretch (le defaut de la grille, laisse explicite parce qu'il compte
       ici) : deux cartes cote a cote prennent la hauteur de la plus haute, et leurs bas
       s'alignent. La carte etant un flex vertical chez Bootstrap et .card-body un
       flex:1 1 auto, c'est le corps qui absorbe la hauteur en trop -- les pieds de carte
       se retrouvent donc alignes eux aussi. */
    .slk-fiche-contenu > .slk-fiche-blocs,
    .slk-fiche-flottante-contenu > .slk-fiche-blocs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--slk-bloc-min)), var(--slk-bloc-max)));
        justify-content: center;
        align-items: stretch;
    }

    /* La zone d'onglets de tete -- l'avatar et les couleurs de la fiche membre : meme
       plafond et meme centrage que le reste, sans quoi elle s'etire seule sur une fiche
       large. Les onglets d'une modale ou d'une page ne sont pas concernes. */
    .slk-fiche-contenu > .slk-ongletgroup,
    .slk-fiche-flottante-contenu > .slk-ongletgroup {
        max-width: var(--slk-bloc-max);
        margin-inline: auto;
    }

.slk-liste-header {
    height: var(--slk-header-height);
}

/* Le contenu de l'en-tete suit la meme largeur que le tableau en dessous. Etale sur toute
   la colonne, ses boutons se retrouvaient a des metres les uns des autres. */
.slk-liste-header-contenu {
    max-width: var(--slk-largeur-max);
}

.slk-liste-contenu {
    height: calc(100% - var(--slk-header-height));
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.slk-checkgroup-lg {
    padding-left: 1.7em;
}

.slk-checkbox-lg {
    transform: scale(1.3);
}

.slk-checkbox-xlg {
    transform: scale(1.6);
    margin-right: 7px;
    margin-top: 7px;
}

/* Ligne « libelle / valeur » du composant LigneInfo -- la presentation de fond des fiches,
   des blocs et des modales.

   align-items: baseline aligne la premiere ligne de texte des deux cotes. C'est ce qui
   repond aux deux cas reels : un libelle qui passe sur deux lignes face a une valeur d'une
   seule, et l'inverse. Il rattrape aussi le bouton pose dans la valeur -- « partager » a
   cote du code -- qui grandit la ligne de la valeur : sans lui, le libelle reste en haut
   pendant que sa valeur descend.

   Les gouttieres Bootstrap sont annulees pour que la ligne occupe exactement la largeur
   qu'on lui donne, sans les marges negatives de .row qui la debordent des deux cotes ;
   l'ecart entre le libelle et la valeur est repris en padding sur le libelle. */
.slk-ligne {
    --bs-gutter-x: 0;
    align-items: baseline;
    /* Plafond pose par le contexte : les fiches le donnent, une modale large ou une page
       n'en veulent pas. */
    max-width: var(--slk-ligne-max, none);
    /* Sans plafond, sans effet : la ligne occupe deja toute la largeur. Avec, elle se centre
       comme la photo, les boutons et les cartes -- sur une fiche large, un bloc de 380 px
       colle a gauche laisserait un vide qui ne veut rien dire. */
    margin-inline: auto;
}

    /* Un .slk-card-containerN est une GRILLE. Un element de grille dont les marges en ligne
       valent auto n'est pas etire : il se dimensionne sur son contenu, puis se centre. Comme
       .slk-ligne pose margin-inline: auto, ses colonnes s'ecrasaient des qu'on posait une
       ligne directement dans un de ces conteneurs -- vu sur /admindev/transfert, ou les
       libelles se coupaient en deux. La largeur explicite retablit l'etirement sans rien
       changer en contexte bloc, ou une largeur auto remplit deja le parent. */
    [class*="slk-card-container"] > .slk-ligne {
        width: 100%;
    }

    .slk-ligne > .col-5 {
        padding-right: 0.5rem;
    }

    /* La genetique et le biorythme d'une carte de cheval : ce sont des jauges, pas des
       valeurs. Elles n'ont pas de libelle a leur gauche et se lisent centrees, sur toute la
       largeur de la carte. */
    .slk-cheval-genetique {
        text-align: center;
        margin-bottom: 0.25rem;
    }

    /* Dans une carte, la ligne se separe de la suivante par un filet et respire un peu :
       une carte est une liste de faits, et c'est ce qui lui donne la lecture d'un tableau.
       Dans une fiche, rien de tout ca -- l'alignement suffit, et il y a bien trop de lignes
       pour les souligner toutes. */
    .slk-card .slk-ligne {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

        .slk-card .slk-ligne + .slk-ligne {
            border-top: 1px solid var(--slk-filtre-header-bg);
        }

.slk-card {
    background-color: var(--slk-table-bg);
    color: var(--slk-table-color);
    margin-left: 0.25rem !important;
    margin-top: 0.25rem !important;
    margin-right: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

    .slk-card.slk-card-centered {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* L'en-tete de carte est l'equivalent de l'en-tete de tableau : memes couleurs, et
       la meme couleur de lien -- sans quoi le nom de la course, ecrit en couleur de
       lien, disparaissait sur un en-tete sombre. */
    .slk-card .card-header {
        background-color: var(--slk-table-head-bg);
        color: var(--slk-table-head-texte);
    }

        /* Un en-tete de carte, comme un en-tete de tableau, est une bande sombre : ce qui y
           est cliquable prend --slk-table-head-lien et non la couleur des liens du corps,
           qui n'y serait pas lisible. Le bouton est vise autant que le lien depuis que les
           en-tetes cliquables sont des <button class="slk-lien-action stretched-link">. */
        .slk-card .card-header a,
        .slk-card .card-header .slk-lien-action,
        .table thead th a,
        .table thead th .slk-lien-action {
            color: var(--slk-table-head-lien);
        }

    /* Le pied, lui, ne titre rien : il ne porte le plus souvent qu'un bouton. Une bande
       aussi coloree que l'en-tete pesait donc autant qu'un titre pour bien moins. Il
       reste dans le ton du corps, separe par un simple filet. Le jeton permet a une
       charte d'en decider autrement sans toucher a cette regle. */
    .slk-card .card-footer {
        background-color: var(--slk-card-pied-bg);
        color: var(--slk-table-color);
        border-top: 1px solid var(--slk-filtre-header-bg);
    }

[data-bs-theme="slk-noir"] .slk-card {
    border-color: var(--slk-table-head-bg);
}

.slk-card-multibody .card-body {
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

.slk-card-container0 {
    /* pour annuler un container1 mis par défaut */
    display: block !important;
}

.slk-card-container1 {
    display: grid;
    grid-template-columns: 1fr;
}

.slk-card-container2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.slk-card-container3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.slk-card-container4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.slk-card-container-center {
    justify-content: center;
}

/* Conteneur de cartes d'une liste. Le nombre de colonnes n'est plus decide par le serveur
   d'apres la resolution : la largeur reellement disponible le dit mieux, et sans decalage.
   Une carte ne descend pas sous 320 px, en dessous de quoi elle devient illisible ; la
   surface plafonne a --slk-largeur-max comme les tableaux, ce qui donne au plus deux
   colonnes (trois demanderaient 960 px) et une carte de 475 px au maximum. */
/* Page sans tableau ni cartes -- tableau de bord, petits jeux : rien en elle ne porte la
   largeur de reference, son contenu s'etalait donc sur toute la colonne. Le plafond est ici
   et non sur le conteneur de defilement : la barre de defilement resterait sinon plantee au
   milieu de l'ecran au lieu du bord du panneau. */
.slk-page-etroite {
    max-width: var(--slk-largeur-max);
}

.slk-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    max-width: var(--slk-largeur-max);
}

/* Vignette de genetique compacte : un picto puis une valeur, cote a cote.

   En flex plutot qu'en deux inline-block cales par vertical-align: middle. L'ancien montage
   ne tenait qu'a une taille de police : le picto est une image centree dans sa boite, la
   valeur du texte pose sur sa ligne de base, et « middle » place chaque boite par rapport a
   la police du parent. Les deux se decalaient donc l'un par rapport a l'autre des que le
   joueur changeait la taille de police. align-items: center les centre l'un sur l'autre,
   quelle que soit la police. */
.slk-genecompacte {
    display: inline-flex;
    align-items: center;
    margin-right: 1px;
}

/* =============================================================================
   7. ECRANS PARTICULIERS
   ============================================================================= */
.slk-gene-vert {
    color: var(--slk-gene-bon-texte);
    background: linear-gradient(var(--slk-gene-bon-1), var(--slk-gene-bon-2));
}

.slk-gene-orange {
    color: var(--slk-gene-moyen-texte);
    background: linear-gradient(var(--slk-gene-moyen-1), var(--slk-gene-moyen-2));
}

.slk-gene-rouge {
    color: var(--slk-gene-mauvais-texte);
    background: linear-gradient(var(--slk-gene-mauvais-1), var(--slk-gene-mauvais-2));
}

/* Largeur reservee a la valeur, exprimee en ch -- la largeur d'un chiffre dans la police
   courante. Elle suit donc la taille de police au lieu d'un nombre de pixels fige sur
   celle par defaut : quatre chiffres sur Almina et Bezir, deux sur Chorus. Ni hauteur ni
   vertical-align : c'est le flex du parent qui centre. */
.slk-gene-valeur-almina {
    min-width: 4ch;
    padding-right: 3px;
}

.slk-gene-valeur-chorus {
    min-width: 2ch;
    padding-right: 3px;
}

/* Le picto reste en pixels : c'est une image, elle n'a pas a grandir avec le texte. */
.slk-gene-picto {
    flex: 0 0 auto;
    width: 16px;
    height: 24px;
    margin-left: 2px;
    margin-right: 2px;
    background-repeat: no-repeat;
    background-position-y: center;
}

.slk-gene-pictorouge {
    background-image: url('images/base/gene-rouge.png');
}

.slk-gene-pictoorange {
    background-image: url('images/base/gene-jaune.png');
}

.slk-gene-pictovert {
    background-image: url('images/base/gene-vert.png');
}

.slk-gene-bloc {
}

.slk-gene-ligne {
    display: block;
    width: 280px;
    height: 55px;
    position: relative;
    background-color: transparent;
    margin: auto;
    margin-bottom: 2px;
}

.slk-gene-label {
    position: absolute;
    height: 24px;
    text-align: center;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
}

.slk-gene-util {
    position: absolute;
    height: 30px;
    top: 25px;
}

.slk-gene-restant {
    position: absolute;
    height: 30px;
    top: 25px;
    background-color: var(--slk-gene-restant);
}

.slk-gene-max {
    position: absolute;
    height: 30px;
    top: 25px;
    background-color: var(--slk-gene-max);
}

/* La bulle de la vue detaillee porte le meme couple picto + valeur que la vignette
   compacte, et se centre de la meme facon. Sa police est fixee a 16 px : la jauge derriere
   elle est dessinee en pixels, elle ne peut pas suivre l'option de taille sans deborder. */
.slk-gene-bulle-valeur {
    position: absolute;
    width: 65px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 16px;
    top: 28px;
    padding-right: 3px;
}

.slk-gene-chorus .slk-gene-bulle-valeur {
    width: 50px;
    margin-left: 15px;
}

.slk-gene-bulle-max {
    position: absolute;
    width: 45px;
    background-color: var(--slk-gene-max);
    color: white;
    border-radius: 8px;
    display: inline-block;
    font-size: 16px;
    text-align: left;
    top: 28px;
    padding-left: 5px;
}

.slk-gene-chorus .slk-gene-bulle-max {
    width: 30px;
}

/* Les six classes .slk-card-partie* ont ete retirees. Elles dessinaient l'ancienne carte :
   une rubrique par bande, un picto a gauche, une action collee a droite. Le picto manquait
   pour la moitie des rubriques et l'action se rattachait a une information plutot qu'a
   l'objet. Une carte est maintenant faite de lignes .slk-ligne, comme une fiche, et ses
   actions vivent dans un .card-footer avec une .slk-barre-boutons centree. */

.slk-card-ellipsis {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Le bandeau qui porte les onglets n'a pas de fond a lui : il laisse voir le panneau qui le
   porte -- la fiche, la modale, la page. Il prenait --slk-modal-bg, c'est-a-dire du blanc
   plaque au milieu du beige de la fiche ; et dans les deux chartes sombres ce meme jeton
   valait la couleur de la feuille de contenu a 1,01 : 1 pres, d'ou des onglets qui ne se
   detachaient plus de rien. */
.slk-ongletgroup {
    background-color: transparent;
    padding: 2px;
}

.slk-onglet-picto .nav-link {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
}

.slk-onglet-contenu {
    background-color: var(--slk-table-bg);
    padding: 1rem 1rem;
    border-left: 1px var(--slk-bordure) solid;
    border-right: 1px var(--slk-bordure) solid;
    border-bottom: 1px var(--slk-bordure) solid;
    border-end-end-radius: 7px;
    border-end-start-radius: 7px;
    --bs-nav-tabs-border-radius: 12px;
}

.slk-onglet-ouvert-contenu {
    margin-bottom: 1rem;
    border-top: 1px var(--slk-bordure) solid;
    border-radius: 7px;
}

    .slk-onglet-ouvert-contenu:last-child {
        margin-bottom: 0;
    }

.slk-onglet-ouvert-titre {
    margin: -1rem -1rem 1rem -1rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
    background-color: var(--slk-table-head-bg);
    border-start-start-radius: 7px;
    border-start-end-radius: 7px;
}

.slk-photo-cheval {
    width: 204px;
    height: 154px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.slk-photo-joueur {
    width: 154px;
    height: 204px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.slk-photo-clan {
    width: 204px;
    height: 204px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

/* Éditeur de couleurs (casaques) : reproduction de la disposition v6 (jockey.aspx). */
.slk-vestiaire-grille {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.slk-vestiaire-piece {
    position: relative;
    width: 300px;
    height: 225px;
    background: url('images/vestiaire/fond.png') no-repeat;
    /* Cadre autour de la zone (équivalent du cadre v6), gris moyen valable en clair et sombre. */
    border: 2px solid var(--slk-medium-grey);
    border-radius: 6px;
    overflow: hidden;
}

    .slk-vestiaire-piece .slk-vestiaire-jockey {
        position: absolute;
        left: 8px;
        bottom: 7px;
    }

    .slk-vestiaire-piece .slk-vestiaire-motif {
        position: absolute;
        left: 120px;
        top: 25px;
        width: 120px;
        height: 120px;
    }

    .slk-vestiaire-piece .slk-vestiaire-fleche {
        position: absolute;
        top: 45px;
        border: 0;
        background: none;
        padding: 0;
        cursor: pointer;
    }

    .slk-vestiaire-piece .slk-vestiaire-fg {
        left: 69px;
    }

    .slk-vestiaire-piece .slk-vestiaire-fd {
        left: 240px;
    }

    .slk-vestiaire-piece .slk-vestiaire-couleur {
        position: absolute;
        top: 155px;
        width: 75px;
        height: 40px;
        cursor: pointer;
    }

    .slk-vestiaire-piece .slk-vestiaire-c1 {
        left: 100px;
    }

    .slk-vestiaire-piece .slk-vestiaire-c2 {
        left: 187px;
    }

.slk-vestiaire-resultat {
    width: 300px;
    height: 225px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slk-photo-multi {
    width: 204px;
    height: 204px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

    .slk-photo-cheval img, .slk-photo-joueur img, .slk-photo-clan img, .slk-photo-multi img,
    .slk-photo-clan canvas, .slk-photo-joueur canvas {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 3px solid var(--slk-photo-cadre);
        box-shadow: var(--slk-ombre-photo);
    }

.slk-modal-overall {
    z-index: 1500 !important;
}

.slk-modal-confirm {
    z-index: 1600 !important;
}

.slk-backdrop-confirm {
    z-index: 1599 !important;
}

/* Les menus déroulants et boîtes de dialogue de TinyMCE sont rendus dans .tox-tinymce-aux, ajouté
   directement au <body> avec un z-index par défaut de 1300. Dans une modal (slk-modal-overall = 1500)
   ils passeraient derrière la zone de saisie : on les remonte au-dessus des modals. */
.tox-tinymce-aux {
    z-index: 1700 !important;
}

.slk-card.slk-bloc-select {
    box-shadow: 0 0 0 0.1rem var(--slk-focus-halo), 0 0 0 0.25rem var(--slk-focus);
}

tr.slk-bloc-select td {
    background-color: var(--slk-table-select-color);
}

.slk-selecteur-fiche {
    margin-bottom: 0.5rem;
    font-size: 1.25rem
}

.slk-filtre {
    background-color: var(--slk-filtre-bg);
    border: 1px solid var(--slk-filtre-header-bg);
    border-radius: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .slk-filtre .row {
        --bs-gutter-x: 5px !important;
    }

.slk-filtre-titre {
    font-size: larger;
    background-color: var(--slk-filtre-header-bg);
    padding: 4px;
    color: var(--slk-btn-color);
}

    .slk-filtre-titre a {
        color: var(--slk-btn-color);
    }

    .slk-filtre-titre:hover {
        color: var(--slk-link);
    }

    .slk-filtre-titre a:hover {
        color: var(--slk-link);
    }

.slk-filtre-contenu {
}

.slk-filtre-form:first-child {
    margin-top: 4px;
}

.slk-select-compare {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
    padding-top: 0.75rem !important;
    background-position: right 0.25rem center;
}

.slk-lien-dark {
    color: var(--slk-link-dark);
}

/* .slk-lien-bold a ete retiree. Elle mettait en gras une centaine de liens -- les pseudos,
   les dates de course, les gains -- au point que le gras ne signalait plus rien. Le seul
   endroit ou il porte du sens est la valeur de biorythme : le gras est donc passe sur
   .slk-bio et .slk-bio-alerte, plus bas, qui ne sont produites que par BioPositiveClass. */

.slk-link-alerte {
    color: var(--slk-link-alerte);
}

/* Équivalent du lienPlus2 de la v6 : posé sur un bloc (p, div…), ne met en évidence
   que les liens qu'il contient, jamais le texte courant. */
.slk-liens-alerte a {
    color: var(--slk-link-alerte);
}

/* La valeur de biorythme. Les deux classes ne sont posees que par BioPositiveClass, donc
   nulle part ailleurs : elles peuvent porter le gras, seul endroit du jeu ou il reste. */
.slk-bio {
    color: var(--slk-link);
    font-weight: bold;
}

.slk-bio-alerte {
    color: var(--slk-link-alerte);
    font-weight: bold;
}

.slk-border-top {
    border-top: 1px solid var(--slk-medium-grey);
}

.slk-border-bottom {
    border-bottom: 1px solid var(--slk-medium-grey);
}

.slk-barre-boutons {
    display: flex;
    flex-wrap: nowrap;
}

    .slk-barre-boutons .btn {
    }

    .slk-barre-boutons.compact .btn-label {
        display: none;
    }

    .slk-barre-boutons .barre-text-large {
        display: flex;
        align-items: center;
    }

    .slk-barre-boutons.compact .barre-text-large {
        display: none;
    }

    .slk-barre-boutons .barre-text-small {
        display: none;
    }

    .slk-barre-boutons.compact .barre-text-small {
        display: flex;
        align-items: center;
    }

.slk-btn-dropdown {
}

.slk-dropdown-end {
    right: 0px;
}

.slk-dropdown-up {
    bottom: 28px;
    left: 0px;
}

.slk-dropdown-menu {
    background-color: var(--slk-btn-background-start);
}

.slk-dropdown-item-secondary {
    --bs-dropdown-link-color: var(--slk-btn-color);
    --bs-dropdown-link-hover-bg: var(--slk-btn-background-start);
    --bs-dropdown-link-hover-color: var(--slk-btn-color);
    border: 1px solid transparent;
}

/* Le corps d'un message, dans la fiche comme dans le fil d'une conversation. Il se detache
   du panneau par son fond, pas par sa bordure : celle-ci ne fait que 1,44 : 1 meme en charte
   claire, c'est un liseré, pas une frontiere. En charte sombre le fond monte d'un cran au
   lieu de descendre -- pres du noir, l'ecart de clarte ne se voit qu'en montant. */
.slk-message {
    background-color: var(--slk-message-bg);
    border: 1px solid var(--slk-light-grey);
    padding: 5px;
}

.slk-menu-disabled {
    opacity: 0.5;
    color: gray;
}

/* Meme objet que .slk-message : une boite posee sur le panneau, donc le meme jeton. */
.slk-zone-confim {
    background-color: var(--slk-message-bg);
    border: 1px solid var(--slk-light-grey);
    padding: 5px;
}
/* icones */
/* Style de base pour toutes les icônes */
a.slk-link {
    text-decoration: none; /* on désactive le underline natif */
}

    a.slk-link:hover,
    a.slk-link:focus-visible {
        text-decoration: none;
        box-shadow: inset 0 -1px 0 currentColor; /* la "ligne" */
    }

.slk-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

    .slk-icon::before {
        content: "";
        display: block; /* plus fiable que inline-block pour les masks */
        width: 16px;
        height: 16px;
        background-color: currentColor; /* la couleur vient du texte */
        margin-bottom: -2px;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
    }

    /* ============================= */
    /*           FLÈCHES             */
    /* ============================= */

    /* Flèche gauche */
    .slk-icon.arrow-left::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8'/%3E%3C/svg%3E");
    }

    /* Flèche droite */
    .slk-icon.arrow-right::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 1 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 1 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8'/%3E%3C/svg%3E");
    }

    /* Flèche bas (ton arrow-down) */
    .slk-icon.arrow-down::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1'/%3E%3C/svg%3E");
    }

    /* Flèche haut (ton arrow-up) */
    .slk-icon.arrow-up::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15a.5.5 0 0 1-.5-.5V2.707L4.354 5.854a.5.5 0 1 1-.708-.708l4-4a.5.5 0 0 1 .708 0l4 4a.5.5 0 1 1-.708.708L8.5 2.707V14.5a.5.5 0 0 1-.5.5'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15a.5.5 0 0 1-.5-.5V2.707L4.354 5.854a.5.5 0 1 1-.708-.708l4-4a.5.5 0 0 1 .708 0l4 4a.5.5 0 1 1-.708.708L8.5 2.707V14.5a.5.5 0 0 1-.5.5'/%3E%3C/svg%3E");
    }

/* Piste */
/* Rapatrie depuis Pages/Gerant/Pistes.razor, ou ces regles vivaient dans une balise
   <style> : des classes slk-, donc leur place est ici, avec le reste. */
.slk-piste-switch,
.slk-piste-toolbar,
.slk-piste-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.slk-piste-choice {
    background: var(--slk-piste-choix-fond);
    border: 1px solid var(--slk-piste-choix-bordure);
    border-radius: 0.75rem;
    padding: 0.5rem;
}

    .slk-piste-choice img {
        display: block;
        width: 81px;
        height: 81px;
    }

.slk-piste-up {
    transform: rotate(-90deg);
}

.slk-piste-down {
    transform: rotate(90deg);
}

.slk-piste-left {
    transform: rotate(180deg);
}

.slk-piste-right {
    transform: rotate(0deg);
}

.slk-piste-mirroir {
    transform: scaleX(-1);
}

.slk-piste-canvas {
    display: block;
    width: 100%;
    max-width: 700px;
    height: auto;
    margin: 0 auto;
    border-radius: 0.75rem;
    background: var(--slk-piste-fond);
    touch-action: none;
}

.slk-prepare-row-hover td {
    background-color: var(--slk-td-hover-bg);
}

.slk-td-min150 {
    min-width: 150px;
}

.slk-flex-equal {
    flex: 1 1 0;
    min-width: 0;
}

.slk-box-blue {
    background-color: var(--slk-box-bleu);
    color: var(--slk-box-texte);
}

.slk-box-green {
    background-color: var(--slk-box-vert);
    color: var(--slk-box-texte);
}

.slk-voir-course {
    margin-top: 10px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
    color: var(--slk-course-texte);
    border: 5px solid var(--slk-course-bordure);
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    background: url(../images/base/voirCourse.png) no-repeat top center;
    /* C'est un <button> depuis qu'il a cesse d'etre un faux lien : il faut donc lui reprendre
       ce qu'un bouton ne tient pas du texte qui l'entoure. */
    font-family: inherit;
    padding: 0;
    cursor: pointer;
}

    .slk-voir-course:hover {
        color: var(--slk-course-survol-texte);
        text-decoration: none;
        border: 5px solid var(--slk-course-survol-bordure);
    }

/* Mode dark */
[data-bs-theme="slk-noir"] .slk-box-blue {
    background-color: #3d8bfd; /* bleu plus lumineux */
    color: #000;
}

[data-bs-theme="slk-noir"] .slk-box-green {
    background-color: #25c06d; /* vert plus lisible */
    color: #000;
}

/* Médailles */
.slk-photo-medaille {
    width: 150px;
    height: 150px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
/* --- Conteneur + wrapping --- */
.slk-medaille-presentoir {
    background-image: url("/images/medailles/presentoir-wood-tile.png");
    background-position: 0 0;
    background-repeat: repeat;
    background-size: 250px 250px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

/* Un item = (médaille ou coupe) + plaque texte */
.slk-medaille-item {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    height: 250px;
    padding-left: 16px;
    padding-right: 16px;
}

/* --- Poser des coupes sur une étagère --- */
.slk-medaille-item--coupe {
    position: relative;
    padding-top: 0px;
}

    .slk-medaille-item--coupe > .slk-medaille-medal-ico {
        position: absolute;
        width: 150px;
        left: 50%;
        top: 68px;
        transform: translateX(-50%);
        filter: drop-shadow(5px 5px 5px var(--slk-ombre-relief));
    }

.slk-medaille-item--medaille {
    position: relative;
    padding-top: 0px;
}

    .slk-medaille-item--medaille > .slk-medaille-ring {
        width: 22px;
        height: 22px;
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
        background-image: url("/images/medailles/ring.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .slk-medaille-item--medaille > .slk-medaille-strap {
        width: 18px;
        height: 18px;
        position: absolute;
        top: 62px;
        left: 50%;
        transform: translateX(-50%);
        background-image: url("/images/medailles/strap.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .slk-medaille-item--medaille > .slk-medaille-medal-ico {
        position: absolute;
        width: 80px;
        left: 50%;
        top: 75px;
        transform: translateX(-50%);
        filter: drop-shadow(5px 5px 5px var(--slk-ombre-relief));
    }
/* --- Plaque auto-ajustable (3 couches) --- */
.slk-medaille-plaque {
    --cap-w: 30px;
}

.slk-medaille-plaque {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    height: 48px;
    /* on ajoute de la place pour les embouts */
    padding-left: var(--cap-w);
    padding-right: var(--cap-w);
    color: var(--slk-medaille-texte);
    font-weight: 600;
    min-width: 150px;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    /* SEULEMENT le centre en background (répétition horizontale) */
    background-image: url("/images/medailles/plaque-mid.png");
    background-position: center;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-origin: content-box; /* <-- clé */
    background-clip: content-box; /* <-- clé */
    filter: drop-shadow(5px 5px 5px var(--slk-ombre-relief));
}

    /* Embout gauche */
    .slk-medaille-plaque::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--cap-w);
        background-image: url("/images/medailles/plaque-left.png");
        background-position: left center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    /* Embout droit */
    .slk-medaille-plaque::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: var(--cap-w);
        background-image: url("/images/medailles/plaque-right.png");
        background-position: right center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

/* Micro-typographie */
.slk-medaille-plaque-titre {
    font-size: .95rem;
}

.slk-medaille-plaque-date {
    font-size: .82rem;
    opacity: .9;
}

/* La carte de mise des trois petits jeux. Elle portait .slk-card-centered sans largeur
   maximale : elle n'avait donc rien a centrer et s'etalait sur toute la colonne, avec un
   selecteur de mise large de neuf cents pixels pour y ecrire « 100 Sulkies ». Les 500 px
   sont ceux du tableau des derniers gains, juste en dessous, et cadrent avec les 526 px du
   ticket : les trois blocs de la page s'alignent enfin. */
.slk-tinygame-carte {
    max-width: 500px;
}

.slk-ticket-fond {
    margin-left: auto;
    margin-right: auto;
    max-width: 526px;
    position: relative;
}

.slk-ticket-ticket {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.slk-slotmachine {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    height: 200px;
    min-height: 200px;
    background-color: var(--slk-slot-fond);
    background-image: -webkit-linear-gradient(var(--slk-slot-degrade-1),var(--slk-slot-degrade-2),var(--slk-slot-degrade-1));
    background-image: -moz-linear-gradient(var(--slk-slot-degrade-1),var(--slk-slot-degrade-2),var(--slk-slot-degrade-1));
    background-image: linear-gradient(var(--slk-slot-degrade-1),var(--slk-slot-degrade-2),var(--slk-slot-degrade-1));
    border: 10px solid;
    border-color: var(--slk-slot-bord-haut) var(--slk-slot-bord-cote) var(--slk-slot-bord-bas) var(--slk-slot-bord-cote);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.slk-triangle1 {
    position: absolute;
    left: 0px;
    top: 0;
    background-image: url(../images/slot/triangle1.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 32px;
    height: 180px;
}

.slk-canvas1 {
    position: absolute;
    left: 32px;
    top: 0;
}

.slk-canvas2 {
    position: absolute;
    left: 104px;
    top: 0;
}

.slk-canvas3 {
    position: absolute;
    left: 176px;
    top: 0;
}

.slk-triangle2 {
    position: absolute;
    left: 248px;
    top: 0;
    background-image: url(../images/slot/triangle2.png);
    background-repeat: no-repeat;
    width: 32px;
    height: 180px;
}

.slk-slotgain {
    color: var(--slk-slot-gain-texte);
    font-size: 32px;
    font-weight: bold;
    position: absolute;
    text-align: center;
    width: 100px;
    top: 2px;
    left: 50%;
    margin-left: -50px;
    background-color: var(--slk-slot-gain-fond);
    border: solid 1px var(--slk-slot-gain-bord);
    -webkit-box-shadow: 1px 1px 12px var(--slk-slot-gain-ombre);
    -moz-box-shadow: 1px 1px 12px var(--slk-slot-gain-ombre);
    box-shadow: 1px 1px 12px var(--slk-slot-gain-ombre);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    opacity: 0.9;
}

.slk-slotbig {
    font-size: 48px;
}

.slk-slogimg {
    width: 64px;
    height: 64px;
    background-color: var(--slk-slot-image-fond);
}

.slk-wheelmachine {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 340px;
    height: 340px;
    min-height: 340px;
    background-color: var(--slk-slot-fond);
    background-image: linear-gradient(var(--slk-slot-degrade-1),var(--slk-slot-degrade-2),var(--slk-slot-degrade-1));
    border: 10px solid;
    border-color: var(--slk-slot-bord-haut) var(--slk-slot-bord-cote) var(--slk-slot-bord-bas) var(--slk-slot-bord-cote);
    border-radius: 5px;
    overflow: hidden;
}

/* Pointeur fixe en haut (triangle) */
.slk-wheel-pointer {
    position: absolute;
    top: 2px;
    left: 50%;
    margin-left: -12px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 18px solid var(--slk-roue-pointeur);
    z-index: 10;
}

.slk-wheel-canvas {
    position: absolute;
    top: 0;
    left: 0;
}

/* add-on */
/* =============================================================================
   8. REPRISES DU GABARIT BLAZOR ET DE BOOTSTRAP
   Repris plus que choisi : a passer au crible un jour.
   ============================================================================= */
.dropzone-control {
    border: 1px solid var(--slk-dark-grey);
    background-color: var(--slk-btn-background-secondaire);
    color: var(--slk-texte);
    font-size: 1rem;
    width: 99%;
}

.dropzone {
    padding: 25px 5px 5px 5px;
    cursor: pointer;
    display: flex;
    position: relative;
}

    .dropzone:hover {
        background-color: var(--slk-btn-background-secondaire-hover);
    }

    .dropzone input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        left: 0;
        top: 0;
    }

.dropzone-drag {
    background-color: var(--slk-dropzone-drag);
}

.dropzone-apercu {
    width: 128px;
    height: 128px;
    background-color: var(--slk-dropzone-apercu);
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.dropzone-bottom {
    border-top: 2px solid var(--slk-dropzone-bord);
}

/* bootstrap rewrite*/
/* Les onglets. L'onglet actif prend le fond de la feuille de contenu et s'y raccorde par le
   bas ; les autres prennent --slk-onglet-bg et se lisent derriere. Le libelle vient de
   --slk-link : Bootstrap laissait son bleu brut, qui ne tenait ses 4,5:1 que sur le fond
   blanc de la charte par defaut. */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--slk-bordure);
    --bs-nav-tabs-link-active-bg: var(--slk-table-bg);
    --bs-nav-tabs-link-active-border-color: var(--slk-bordure);
    --bs-nav-tabs-link-active-color: var(--slk-texte);
    --bs-nav-link-color: var(--slk-link);
    --bs-nav-link-hover-color: var(--slk-link);
    --bs-nav-tabs-border-radius: 12px;
    padding-left: 10px;
}

/* Selecteur a deux classes, et non le seul .nav-link : Bootstrap ecrit les bordures des
   onglets sous « .nav-tabs .nav-link », qui pesait plus lourd. Nos bordures n'etaient donc
   jamais dessinees, et un onglet inactif n'avait ni fond ni contour -- il ne restait que
   son picto, pose dans le vide. Le bas reste transparent : c'est par la que passe le trait
   du bandeau, que seul l'onglet actif vient couvrir. */
.nav-tabs .nav-link {
    background-color: var(--slk-onglet-bg);
    border-left: 1px var(--slk-bordure) solid;
    border-right: 1px var(--slk-bordure) solid;
    border-top: 1px var(--slk-bordure) solid;
}

    /* :not(.active) -- l'onglet courant garde le fond de la feuille de contenu meme sous la
       souris. Le repeindre rompait le raccord par lequel il s'y rattache, et le faisait
       passer une seconde pour un onglet comme les autres. */
    .nav-tabs .nav-link:not(.active):hover {
        background-color: var(--slk-onglet-bg-hover);
    }

    .nav-tabs .nav-link:not(.active):focus-visible {
        background-color: var(--slk-onglet-bg-hover);
        box-shadow: none;
    }

    .nav-tabs .nav-link.active:focus-visible {
        box-shadow: none;
    }

.nav-tabs .nav-link.active {
    border-bottom: 1px var(--slk-table-bg) solid !important;
}

.form-check-input {
    background-color: var(--slk-check-bg);
    border-color: var(--slk-check-bgactif);
}

    /* Bootstrap pose au focus une bordure bleue et un halo bleu, quelle que soit la charte.
   Notre feuille etant chargee apres la sienne, ces deux lignes suffisent a les reprendre.
   Contrairement aux boutons, on garde :focus et non :focus-visible : dans un champ de
   saisie, savoir ou va le texte qu'on tape est utile meme quand on y est venu a la souris. */
.form-control:focus,
.form-select:focus {
    border-color: var(--slk-focus);
    box-shadow: 0 0 0 0.2rem var(--slk-focus-anneau);
}

.form-check-input:checked {
        background-color: var(--slk-check-bgactif);
        border-color: var(--slk-check-bg);
    }

/* Bootstrap dessine la coche et la pastille en blanc quelle que soit la charte. Sur « sombre »
   et « flashy », le fond de la case est clair : on ne voyait presque plus la coche (2,07:1 et
   1,54:1 mesures). Chaque charte choisit desormais son dessin.
   Les deux variables de Bootstrap sont distinctes -- la case lit --bs-form-check-bg-image, que
   le bouton radio partage, d'ou le [type="checkbox"] ; l'interrupteur lit --bs-form-switch-bg. */
.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: var(--slk-coche);
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: var(--slk-pastille);
}

a, .btn-link {
    color: var(--slk-link);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.modal-header {
    background: linear-gradient(var(--slk-modal-degrade-debut), var(--slk-modal-degrade-fin));
}

/* La croix de fermeture d'une modale.

   Bootstrap la pose en IMAGE de fond, un SVG noir, et ne l'eclaircit que sous
   [data-bs-theme="dark"] -- un attribut que nos chartes n'utilisent pas, la leur valant
   slk-noir ou slk-v7-2. Elle restait donc noire sur noir.

   Un masque plutot qu'un filtre d'inversion : la croix prend alors currentColor, c'est-a-dire
   la couleur du texte de l'en-tete, et suit la charte sans qu'aucune n'ait a declarer quoi que
   ce soit. Le color: inherit est indispensable -- .btn-close pose lui-meme
   color: var(--bs-btn-close-color), c'est-a-dire du noir, et currentColor vaudrait ca.

   L'opacite passe de 0,5 a 0,75 : mesure faite, a 0,5 la croix ne tenait meme pas ses 3:1 de
   contraste sur les chartes CLAIRES (2,89 et 2,95). A 0,75 le pire des quatre est a 5,75:1,
   contre le plus defavorable des deux tons du degrade. */
.btn-close {
    color: inherit;
    background: none;
    background-color: currentColor;
    -webkit-mask: var(--slk-croix-fermer) center / 1em auto no-repeat;
    mask: var(--slk-croix-fermer) center / 1em auto no-repeat;
    opacity: 0.75;
}

    .btn-close:hover {
        opacity: 1;
    }

    /* Bootstrap pose au focus un halo bleu fixe, etranger a la charte. */
    .btn-close:focus-visible {
        opacity: 1;
        outline: 2px solid var(--slk-focus);
        outline-offset: 2px;
        box-shadow: none;
    }

    .btn-close:focus:not(:focus-visible) {
        box-shadow: none;
    }

.modal-footer {
    background: linear-gradient(var(--slk-modal-degrade-fin), var(--slk-modal-degrade-debut));
}

.modal-content {
    background-color: var(--slk-modal-bg);
}

textarea {
    cursor: auto;
}
/* defaut blazor */
#blazor-error-ui {
    display: none;
    width: 75%;
    margin: auto;
}

/* L'interface de reconnexion. Blazor ne fait que poser une classe sur le conteneur ; c'est
   d'ici que depend tout le reste. Cache tant qu'aucun etat n'est pose, et cache aussi sur
   « hide », qui est l'etat pose au retour de la connexion.

   Au-dessus de tout, y compris des menus TinyMCE (1700) et du bandeau de maintenance (1650) :
   quand le circuit est perdu, plus rien d'autre ne repond, il ne faut pas qu'un panneau
   quelconque reste devant. */
#components-reconnect-modal {
    display: none;
    position: relative;
    z-index: 1800;
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: block;
    }

    #components-reconnect-modal.components-reconnect-hide {
        display: none;
    }

    /* Deux messages dans le meme panneau : « on essaie » pendant les tentatives, « c'est
       perdu » avec le bouton une fois qu'elles sont epuisees ou que le serveur a refuse --
       ce second cas est celui d'une publication, le circuit d'avant n'existant plus. */
    #components-reconnect-modal .slk-reconnexion-echec {
        display: none;
    }

    #components-reconnect-modal.components-reconnect-failed .slk-reconnexion-attente,
    #components-reconnect-modal.components-reconnect-rejected .slk-reconnexion-attente {
        display: none;
    }

    #components-reconnect-modal.components-reconnect-failed .slk-reconnexion-echec,
    #components-reconnect-modal.components-reconnect-rejected .slk-reconnexion-echec {
        display: block;
    }

        /* La barre de boutons reste un flex quand elle se montre. */
        #components-reconnect-modal.components-reconnect-failed .slk-barre-boutons.slk-reconnexion-echec,
        #components-reconnect-modal.components-reconnect-rejected .slk-barre-boutons.slk-reconnexion-echec {
            display: flex;
        }

/* defaut - a valider */
.btn-primary {
    color: var(--slk-btn-primary-texte);
    background-color: var(--slk-btn-primary-fond);
    border-color: var(--slk-btn-primary-bordure);
}

/* :focus-visible et non :focus -- le navigateur ne le pose alors qu'apres une
   navigation au clavier, pas apres un clic. Le halo n'entoure donc plus de bleu le
   menu qu'on vient d'ouvrir a la souris, tout en restant la ou il est indispensable :
   pour qui se deplace au clavier. */
.btn:focus-visible, .btn-link.nav-link:focus-visible, .form-control:focus-visible, .form-check-input:focus-visible {
    box-shadow: 0 0 0 0.1rem var(--slk-focus-halo), 0 0 0 0.25rem var(--slk-focus);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--slk-valide);
}

.invalid {
    outline: 1px solid var(--slk-invalide);
}

.validation-message {
    color: rgba(var(--bs-danger-rgb),1);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--slk-checkbox-bordure);
}

.modal {
    background-color: transparent !important;
}

.modal-backdrop {
    background-color: var(--slk-backdrop) !important;
}

.table td {
    border-bottom-width: 0 !important;
}

.table tr {
    border-bottom: var(--bs-border-width) solid var(--bs-border-color) !important;
}


/* =====================================================================
   Presentation « look v6 » : le menu passe en deux barres au-dessus d'une
   liste pleine largeur, et la fiche devient un panneau flottant.

   Aucune couleur nouvelle : tout vient des jetons deja definis plus haut,
   donc les deux themes clair et sombre suivent sans rien de plus.
   ===================================================================== */

.slk-v6 {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Les barres ne defilent pas : seule la liste, en dessous, a un ascenseur.
   C'est le meme principe que l'en-tete de la v7, et #scroll-liste reste
   l'element qui defile -- le virtualiseur et le bouton « haut de page »
   continuent de fonctionner sans y toucher. */
.slk-menu-barres {
    flex: 0 0 auto;
}

/* Tout ce qui vient sous les barres. C'est le repere de position de la fiche flottante :
   elle prend ainsi toute la hauteur disponible sans qu'on ait a retrancher la hauteur des
   barres, qui varie -- la barre des roles peut se replier, et celle de l'administration
   n'existe que pour les admins. */
.slk-v6-zone {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

.slk-v6-contenu {
    height: 100%;
    padding: 6px;
}

.slk-barre {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    /* Les barres de menus se replient sur une rangee de plus quand les libelles ne tiennent
       pas -- c'est ce qui attend l'allemand, dont les textes sont plus longs. Mieux vaut une
       rangee en plus qu'un menu coupe. */
    flex-wrap: wrap;
}

/* Barre 1 : le joueur. Posee sur le cadre, comme l'en-tete v7 d'aujourd'hui. Elle ne se
   replie pas : logo, horloge et boutons y sont dimensionnes en pixels, et elle a ete
   calibree pour tenir a 992 px avec pseudo et clan a 20 caracteres. */
.slk-barre-1 {
    min-height: var(--slk-header-height);
    border-bottom: 1px solid var(--slk-medium-grey);
    /* Le logo ouvre la barre : sans cette marge il se colle au bord du cadre. */
    padding-left: 12px;
    /* Meme largeur que le tableau en dessous : l'espace souple pousse les deux boutons de
       droite, qui finissaient a l'autre bout de l'ecran sur une large fenetre. Le repli
       reste autorise ici, comme filet : mieux vaut une seconde rangee qu'un bouton coupe
       si un pseudo, un nom de clan et un solde tres longs se cumulent. */
    max-width: var(--slk-largeur-max);
}

/* Barre 2 : les roles, et barre 3 : l'administration. Elles reprennent le fond du menu v7. */
.slk-barre-2,
.slk-barre-3 {
    background-color: var(--slk-menu-bg);
    border-bottom: 3px solid var(--slk-fond-bg);
}

.slk-barre-espace {
    flex: 1 1 auto;
    min-width: 4px;
}

/* Le logo de la barre est un bouton Bootstrap : sans ces regles, .btn remet son fond a
   transparent des le survol, ce qui faisait disparaitre le logo -- surtout en mode sombre.
   On reprend donc les couleurs de .slk-logo et on les tient dans tous les etats. */
.slk-barre-logo,
.slk-barre-logo:hover,
.slk-barre-logo:focus,
.slk-barre-logo:active,
.slk-barre-logo.show {
    padding: 1px 3px;
    background-color: var(--slk-logo-background);
    border: 2px solid var(--slk-btn-picto-border);
    border-radius: 5px;
    box-shadow: none;
}

    .slk-barre-logo:hover {
        border-color: var(--slk-btn-picto-border-hover);
    }

/* La pastille d'alertes deborde de 8 px a droite du logo : sans cette marge elle touche
   l'horloge. */
.slk-barre-logo {
    margin-right: 16px;
}


/* Une entree de barre : le titre d'un menu deroulant, ou une entree isolee. */
.slk-barre-entree {
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 4px 9px;
    white-space: nowrap;
    text-decoration: none;
}

.slk-barre-1 .slk-barre-entree {
    color: var(--slk-link);
    font-weight: 600;
}

    .slk-barre-1 .slk-barre-entree:hover {
        color: var(--slk-texte);
        background-color: var(--slk-filtre-header-bg);
    }

.slk-barre-2 .slk-barre-entree,
.slk-barre-3 .slk-barre-entree {
    color: var(--slk-menu-link);
}

    .slk-barre-2 .slk-barre-entree:hover,
    .slk-barre-3 .slk-barre-entree:hover {
        color: var(--slk-menu-link-hover);
        background-color: var(--slk-survol-voile);
    }

.slk-barre .slk-barre-entree.slk-menu-actif {
    color: var(--slk-menu-link-actif);
    font-weight: 600;
}

/* Les deroulants des barres reprennent le fond et les liens du menu v7. */
.slk-barre-deroulant {
    background-color: var(--slk-menu-bg);
    border: none;
    box-shadow: var(--slk-ombre-deroulant);
}

    .slk-barre-deroulant .dropdown-item {
        color: var(--slk-menu-link);
        white-space: nowrap;
    }

        .slk-barre-deroulant .dropdown-item:hover,
        .slk-barre-deroulant .dropdown-item:focus {
            color: var(--slk-menu-link-hover);
            background-color: transparent;
        }

        .slk-barre-deroulant .dropdown-item.slk-menu-actif {
            color: var(--slk-menu-link-actif);
        }

/* Sous 992 px les barres ne tiennent plus : on repose sur le menu en colonne
   de la v7, pose par-dessus la liste plutot qu'a cote. */
.slk-v6-vertical {
    background-color: var(--slk-menu-bg);
    position: absolute;
    top: var(--slk-header-height);
    left: 0;
    bottom: 0;
    width: var(--slk-menu-width);
    z-index: 150;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
    box-shadow: var(--slk-ombre-menu);
}

.slk-v6-vertical-ouvert {
    display: block;
}

.slk-v6-vertical-pleine {
    width: 100%;
}

/* ---------------------------------------------------------------------
   La fiche flottante.

   Ce n'est volontairement pas une modale : une fiche ouvre elle-meme des
   modales (contrat, achat...), qui passent donc simplement par-dessus,
   sans empilement de modales a arbitrer. Et le joueur peut la deplacer
   pour garder la liste visible, comme les popups de la v6.
   --------------------------------------------------------------------- */
.slk-fiche-flottante {
    position: absolute;
    top: 8px;
    /* Calee a droite a la premiere ouverture : la liste reste lisible a gauche. Des que le
       joueur la deplace, le script lui pose un « left » en dur, qui l'emporte sur ce
       « right » -- la position choisie tient donc jusqu'a la fermeture. */
    right: 8px;
    width: min(var(--slk-fiche-max), calc(100% - 24px));
    /* Toute la hauteur disponible, comme la colonne fiche de la v7. */
    height: calc(100% - 16px);
    z-index: 140;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--slk-cadre-bg);
    border: 2px solid var(--slk-menu-bg);
    border-radius: 7px;
    box-shadow: var(--slk-ombre-fiche);
}

.slk-fiche-flottante-tete {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    background-color: var(--slk-menu-bg);
}

/* La zone d'attrape : tout l'espace libre de la barre de titre. */
.slk-fiche-flottante-poignee {
    flex: 1 1 auto;
    align-self: stretch;
    cursor: move;
}

.slk-fiche-flottante-contenu {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px;
}

/* .slk-btn-picto-mini a ete retiree : elle refaisait .slk-table-btn a deux pixels
   pres. Le bouton-icone carre n'a plus que deux tailles, 48 px et 32 px. */

/* Sans Popper, un deroulant se pose sous son bouton et part vers la droite : les derniers
   de la barre des roles depasseraient du cadre. On les aligne donc sur leur bord droit.
   La barre 3 n'est pas concernee : ses deux entrees sont collees a gauche. */
.slk-barre-2 > .dropdown:nth-last-child(-n+3) .slk-barre-deroulant {
    right: 0;
    left: auto;
}

/* Le bandeau d'annonce de mise a jour. Il reprend le couple de jetons deja mesure des badges
   d'alerte -- rouge et texte clair dans les quatre chartes -- plutot que d'en inventer un.
   Pas de position: sticky ni fixed : il est dans le flux d'un conteneur qui ne defile jamais,
   donc toujours a l'ecran, et il ne peut recouvrir aucun bouton. */
.slk-bandeau-maintenance {
    flex: 0 0 auto;
    /* Au-dessus des modales, et surtout de leur voile.

       Le bandeau reste DANS LE FLUX -- position: relative ne l'en sort pas -- donc il continue
       de pousser la page vers le bas et ne peut masquer aucun bouton. Mais sans z-index, le
       voile d'une modale le recouvrait et l'assombrissait comme le reste : l'annonce ne sautait
       plus aux yeux au moment ou elle compte le plus, celui ou le joueur est en train de saisir
       quelque chose.

       L'echelle du jeu : voile 1050, modale 1055, .slk-modal-overall 1500, voile de
       confirmation 1599, .slk-modal-confirm et la modale d'erreur 1600, menus TinyMCE 1700.
       1650 passe donc devant toutes les modales et leurs voiles. */
    position: relative;
    z-index: 1650;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background-color: var(--slk-badge-alerte-bg);
    color: var(--slk-badge-alerte-texte);
    font-weight: bold;
    text-align: center;
}

    /* Le picto d'alerte est dessine au trait, fond transparent : son stroke vaut deja
       currentColor, il suit donc la couleur du bandeau sans qu'on y touche. Surtout ne pas lui
       poser de fill, le triangle se remplirait. */
    .slk-bandeau-maintenance svg,
    .slk-bandeau-version svg {
        flex: 0 0 auto;
    }

/* Le bandeau « nouvelle version disponible ». Meme dessin et memes couleurs que celui de
   maintenance -- elles sont les seules dont le contraste ait ete mesure sur les quatre chartes,
   et inventer une paire de plus reviendrait a inventer un defaut. Un cran en dessous en
   z-index : si les deux paraissent ensemble, c'est la maintenance qui prime, parce qu'elle
   annonce une perte de saisie imminente. */
.slk-bandeau-version {
    flex: 0 0 auto;
    position: relative;
    z-index: 1649;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background-color: var(--slk-badge-alerte-bg);
    color: var(--slk-badge-alerte-texte);
    font-weight: bold;
    text-align: center;
}

    /* Le bouton emprunte sa couleur au bandeau (currentColor) : il herite donc du contraste
       deja mesure, et suit chaque charte sans une ligne de plus. */
    .slk-bandeau-version button {
        flex: 0 0 auto;
        padding: 0.05rem 0.6rem;
        border: 1px solid currentColor;
        border-radius: 0.25rem;
        background: transparent;
        color: inherit;
        font: inherit;
        font-weight: bold;
        cursor: pointer;
    }

        .slk-bandeau-version button:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .slk-bandeau-version button:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: 2px;
        }

/* =============================================================================
   9. EFFETS
   Ombres, transitions au survol, reliefs. Tout est enferme sous .slk-effets, que
   le conteneur du jeu porte quand la charte les demande (cf. Utilities/Charte.cs) :
   une charte peut donc reprendre les couleurs sans le relief, et l'inverse.

   Regles suivies -- un jeu de gestion, pas une vitrine :
     - rien ne bouge tout seul, aucune animation en boucle ;
     - le mouvement ne repond qu'au survol, et il est bref (0,16 s) ;
     - un deplacement se fait en « transform », jamais en marge : la boite ne
       bouge pas, donc la mise en page ne peut pas etre entrainee ;
     - le decalage vers la droite est reserve a ce qui navigue, pour qu'il veuille
       dire quelque chose.
   ============================================================================= */

/* ---- Les panneaux se detachent du fond au lieu d'y flotter ----
   L'ombre est portee par le panneau lui-meme et non par le cadre a l'interieur :
   le panneau est en overflow:hidden, il aurait rogne l'ombre de son propre contenu.
   Elle deborde dans les 10 px de marge de .slk-page, qui lui laissent la place avant
   que la grille ne coupe a son tour. */
.slk-effets .slk-pane-visible {
    box-shadow: var(--slk-ombre-haute);
    border-radius: 0.375rem;
}

.slk-effets .slk-cadre {
    border: 1px solid var(--slk-filtre-header-bg);
}

/* ---- Menu : le fond gagne un degrade, les entrees repondent au survol ---- */
.slk-effets .slk-menu-menu {
    background: linear-gradient(160deg, var(--slk-menu-bg), var(--slk-menu-bg-2, var(--slk-menu-bg)));
}

/* Toutes les entrees, quel que soit leur niveau, partagent la meme assise : un coin
   arrondi et un retrait a gauche. Ce retrait n'est pas decoratif -- c'est la place ou
   la barre d'accent de la page courante vient se loger sans toucher le texte.

   Sans quoi le menu montrait trois styles differents : le monde et les connectes, qui
   ne sont dans aucun groupe, n'avaient aucun retrait ; les titres de groupe non plus ;
   seules les feuilles en avaient un. */
.slk-effets .slk-menu-item :is(a, button) {
    padding-left: 10px;
    border-radius: 5px;
    transition: background-color .16s, color .16s, padding-left .16s;
}

/* Le soulignement vient de la regle generale « a:hover », ecrite plus bas dans le
   fichier et de meme poids que celle du menu : elle l'emportait. Dans un menu, un
   lien souligne au survol fait bouger la ligne pour rien. */
.slk-effets .slk-menu-item :is(a, button):hover {
    text-decoration: none;
}

/* Ce qui mene a une page se decale vers la droite au survol. */
.slk-effets .slk-menu-item :is(a, button):hover {
    background-color: var(--slk-survol-voile-clair);
    padding-left: 16px;
}

.slk-effets .slk-menu-group .slk-menu-item :is(a, button) {
    padding-left: 22px;
}

    .slk-effets .slk-menu-group .slk-menu-item :is(a, button):hover {
        padding-left: 28px;
    }

/* Les entrees de niveau 1 ouvrent un groupe, elles ne menent nulle part : leur survol
   se distingue par un fond plus marque, et surtout par l'absence de decalage. */
/* .slk-menu-item est indispensable ici : le filtre reutilise slk-menu-deplier et
   slk-menu-replier pour faire pivoter sa fleche (cf. Filtre.razor), et sans cette
   precision il heritait du fond et du retrait des titres de groupe du menu. */
.slk-effets .slk-menu-item.slk-menu-deplier :is(a, button):hover,
.slk-effets .slk-menu-item.slk-menu-replier :is(a, button):hover {
    background-color: var(--slk-survol-voile);
    padding-left: 10px;
}

/* La page courante : la couleur seule ne suffit pas -- une part des joueurs ne
   distingue pas le vert de l'orange -- donc une barre d'accent la double. */
.slk-effets .slk-menu-actif :is(a, button) {
    position: relative;
    background-color: var(--slk-survol-voile-clair);
    font-weight: 600;
}

    .slk-effets .slk-menu-actif :is(a, button)::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 15%;
        bottom: 15%;
        width: 3px;
        border-radius: 2px;
        background-color: var(--slk-menu-link-actif);
    }

/* ---- Boutons : ils se soulevent au survol et se reposent au clic ----
   « transform » et non « margin » : la boite reste ou elle est, rien ne se
   decale autour. Seule l'ombre etendue peut etre rognee par un conteneur en
   overflow:hidden, ce qui se voit tout de suite si ca arrive. */
.slk-effets .slk-btn-picto,
.slk-effets .slk-btn-text,
.slk-effets .slk-btn-text-secondaire,
.slk-effets .slk-table-btn {
    box-shadow: 0 1px 2px var(--slk-filtre-header-bg);
    transition: transform .16s, box-shadow .16s, filter .16s, background .16s;
}

    .slk-effets .slk-btn-picto:hover,
    .slk-effets .slk-btn-text:hover,
    .slk-effets .slk-btn-text-secondaire:hover,
    .slk-effets .slk-table-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--slk-ombre-filtre);
        filter: brightness(1.05);
    }

    .slk-effets .slk-btn-picto:active,
    .slk-effets .slk-btn-text:active,
    .slk-effets .slk-btn-text-secondaire:active,
    .slk-effets .slk-table-btn:active {
        transform: translateY(0);
        box-shadow: 0 1px 2px var(--slk-filtre-header-bg);
    }

/* Le logo n'est pas un bouton : il ne se souleve pas, sa bordure suffit. */
.slk-effets .slk-logo {
    box-shadow: 0 1px 2px var(--slk-filtre-header-bg);
    transition: border-color .16s;
}

/* ---- La barre de filtre devient une surface, au lieu d'une bande ---- */
.slk-effets .slk-liste-barre-contenu {
    transition: box-shadow .18s;
}

.slk-effets .slk-filtre {
    border-radius: 5px;
    border: 1px solid var(--slk-filtre-header-bg);
    transition: box-shadow .18s, border-color .18s;
}

    .slk-effets .slk-filtre:hover {
        box-shadow: var(--slk-ombre-filtre);
    }

/* ---- Tableaux : la ligne survolee se teinte, pour suivre une ligne jusqu'au bout ---- */
.slk-effets .table tbody tr {
    transition: background-color .13s;
}

.slk-effets .table tbody tr:hover > td {
    background-color: var(--slk-td-hover-bg);
}

/* ---- Selection : une teinte ne suffit pas ----
   Le fond d'une ligne selectionnee doit se distinguer de la ligne normale ET de la
   ligne survolee, tout en laissant lisible un lien deja sombre. Les trois contraintes
   ensemble ne laissent presque aucune teinte possible. Une barre d'accent porte donc
   le signal, et la teinte n'a plus qu'a l'accompagner -- meme procede que pour l'entree
   de menu courante. */
.slk-effets tr.slk-bloc-select td:first-child {
    box-shadow: inset 3px 0 0 var(--slk-selection-accent);
}

/* La carte selectionnee disait la meme chose en bleu, une couleur etrangere a la
   charte et heritee du halo de focus. */
.slk-effets .slk-card.slk-bloc-select {
    box-shadow: 0 0 0 2px var(--slk-selection-accent);
}

/* ---- Cartes ---- */
.slk-effets .slk-card {
    transition: box-shadow .16s, transform .16s;
}

    .slk-effets .slk-card:hover {
        box-shadow: var(--slk-ombre-filtre);
    }

/* ---- Les deroulants des barres v6 tombent au lieu d'apparaitre ---- */
.slk-effets .slk-barre-deroulant.show {
    animation: slk-tombe .14s ease-out;
}

@keyframes slk-tombe {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   10. VOLUME
   Le second niveau d'effets, sous .slk-volume, qui s'ajoute a .slk-effets.
   La ou le relief detache les surfaces, le volume leur donne une matiere :
   ce qui s'enfonce se remplit, ce qui depasse se clique, ce qui glisse dessous
   projette une ombre. Toujours aucune animation en boucle.
   ============================================================================= */

/* ---- L'en-tete collant projette une ombre des qu'il y a du contenu dessous ----
   C'est le seul effet reellement informatif du lot : il repond a « suis-je en haut
   de la liste ? ». La classe slk-defile est posee par slk.suivreDefilement.

   Un degrade en pseudo-element et non un box-shadow : les cellules d'un tableau a
   bordures fusionnees ne dessinent pas les ombres de facon fiable. Et le th porte
   deja un box-shadow, qui bouche le retrait au-dessus de lui. */
.slk-volume .table thead th {
    position: sticky;
}

    .slk-volume .table thead th::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 12px;
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s;
        background: linear-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0));
    }

.slk-volume .slk-defile .table thead th::after {
    opacity: 1;
}

/* ---- Ce qui se remplit est en creux, ce qui se clique est en relief ---- */
.slk-volume .form-control,
.slk-volume .form-select {
    box-shadow: var(--slk-ombre-creux);
}

    /* Au focus, le creux reste et l'anneau s'y ajoute : le champ ne doit pas changer
       de matiere quand on y entre, seulement se signaler. */
    .slk-volume .form-control:focus,
    .slk-volume .form-select:focus {
        box-shadow: var(--slk-ombre-creux), 0 0 0 0.2rem var(--slk-focus-anneau);
    }

/* ---- Le bouton s'enfonce vraiment au clic, au lieu de simplement redescendre ---- */
.slk-volume .slk-btn-picto:active,
.slk-volume .slk-btn-text:active,
.slk-volume .slk-btn-text-secondaire:active,
.slk-volume .slk-table-btn:active {
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.28);
    filter: brightness(0.96);
}

/* ---- La carte pointee se designe par un lisere, sans bouger ----
   Bouger la carte survolee decalerait ses voisines : dans une liste, c'est genant. */
.slk-volume .slk-card {
    border-left: 3px solid transparent;
    transition: box-shadow .18s, border-left-color .18s;
}

    .slk-volume .slk-card:hover {
        border-left-color: var(--slk-selection-accent);
    }

/* ---- Le logo grandit d'un cheveu au survol : rien ne dit qu'il est cliquable ---- */
.slk-volume .slk-logo {
    transition: transform .18s, box-shadow .18s, border-color .16s;
}

    .slk-volume .slk-logo:hover {
        transform: scale(1.04);
    }

/* =============================================================================
   11. LUEUR
   Le troisieme niveau d'effets, sous .slk-lueur, qui s'ajoute aux deux autres.
   La ou le volume simule une matiere eclairee d'en haut, la lueur simule des
   surfaces qui emettent leur propre lumiere -- le vocabulaire e-sport.

   Deux differences de fond avec les niveaux precedents :
     - les transitions passent a 0,10 s : c'est ce qui donne l'impression de
       nervosite, bien plus que les couleurs ;
     - sur un fond tres sombre une ombre ne se voit pas, ce sont donc des aretes
       lumineuses qui detachent les surfaces.
   Toujours rien qui bouge sans qu'on le provoque.
   ============================================================================= */

.slk-lueur .slk-btn-picto,
.slk-lueur .slk-btn-text,
.slk-lueur .slk-btn-text-secondaire,
.slk-lueur .slk-table-btn {
    transition: transform .10s, box-shadow .10s, filter .10s;
}

    .slk-lueur .slk-btn-picto:hover,
    .slk-lueur .slk-btn-text:hover,
    .slk-lueur .slk-table-btn:hover {
        transform: translateY(-1px);
        filter: none;
        box-shadow: 0 0 0 1px var(--slk-btn-background-hover),
                    0 0 16px -2px var(--slk-btn-background-hover);
    }

    .slk-lueur .slk-btn-text-secondaire:hover {
        box-shadow: 0 0 0 1px var(--slk-link), 0 0 14px -4px var(--slk-link);
    }

/* L'entree courante du menu : sa barre d'accent rayonne au lieu d'etre posee. */
.slk-lueur .slk-menu-actif :is(a, button)::before {
    box-shadow: 0 0 10px 0 var(--slk-menu-link-actif);
}

/* La ligne survolee s'allume par la gauche. La barre se pose d'un coup : elle n'a plus de
   transition, et il ne faut pas lui en redonner.

   Bootstrap peint le fond de chaque cellule par une ombre interne de 9999 px
   (--bs-table-accent-bg). Le box-shadow pose ici remplace donc CETTE ombre, et la transition
   qu'il y avait interpolait sa portee de 9999 px vers 0 : pendant un dixieme de seconde,
   toute la premiere cellule se lavait de la couleur du lien a demi opaque avant de se reduire
   a la barre. Un eclair clair, tres visible en charte flashy ou le lien est un cyan vif.

   Egaliser les deux listes d'ombres reglerait l'interpolation, mais il faudrait declarer un
   box-shadow au repos -- ce qui prendrait le pas, ici, sur la barre d'accent de la ligne
   selectionnee (.slk-bloc-select, de poids plus faible). La barre survolee ne perd rien a
   etre instantanee : la teinte de la ligne, elle, l'est deja. */
.slk-lueur .table tbody tr:hover td:first-child {
    box-shadow: inset 2px 0 0 var(--slk-link);
}

/* Le champ actif rayonne au lieu de s'entourer. */
.slk-lueur .form-control:focus,
.slk-lueur .form-select:focus {
    box-shadow: var(--slk-ombre-creux),
                0 0 0 1px var(--slk-focus), 0 0 14px -3px var(--slk-focus);
}

/* Les panneaux sont cernes d'un filet d'accent : sur du noir, seule une arete
   lumineuse detache une surface. */
.slk-lueur .slk-cadre,
.slk-lueur .slk-v6 {
    border-color: var(--slk-bordure);
}

/* =============================================================================
   12. LE CHAT
   Rapatrie de Pages/Communiquer/Chats.razor et Fiches/FicheChatConnectes.razor,
   ou ces regles vivaient dans des balises style.

   Deux defauts corriges au passage :
     - la zone des messages ecrivait son fond et son texte en dur, #eee sur #333 :
       une boite claire au milieu d'une interface sombre, avec un gris de message
       systeme a 3,86 : 1 dessus. Elle passe par des jetons, donc par la charte ;
     - le survol d'un salon reprenait l'ancien halo de focus bleu de Bootstrap,
       ecrit en dur lui aussi.
   ============================================================================= */

.chat-v7 {
    display: grid;
    grid-template-rows: auto auto minmax(500px, 1fr);
    gap: 8px;
    min-height: calc(100vh - 150px);
    min-height: calc(100dvh - 150px);
}
.chat-v7-main {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 500px;
    color: var(--slk-table-color);
}

.chat-v7-list {
    display: grid;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 4px 4px 24px;
}

.chat-v7-create {
    display: flex;
    justify-content: center;
}

.chat-v7-room-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    background: var(--slk-table-bg);
    color: inherit;
    padding: 8px;
    text-align: left;
}
.chat-v7-room-row:hover{
        box-shadow: 0 0 0 0.1rem var(--slk-focus-halo), 0 0 0 0.25rem var(--slk-focus);
}
.chat-v7-room-theme {
    grid-column: 1 / -1;
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-v7-rights {
    display: grid;
    gap: 8px;
}

.chat-v7-right-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 8px;
}

.chat-v7-right-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

@media (max-width: 700px) {
    .chat-v7-right-row {
        grid-template-columns: 1fr;
    }

    .chat-v7-right-actions {
        justify-content: flex-start;
    }
}

.chat-v7-messages {
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    background-color: var(--slk-chat-fond);
    color: var(--slk-chat-texte);
    padding: 8px;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.chat-v7-message {
    overflow-wrap: anywhere;
    margin-bottom: 4px;
}

.chat-v7-pseudo {
    font-weight: 700;
    margin-right: 6px;
}

.chat-v7-system {
    color: var(--slk-chat-systeme);
    font-style: italic;
}

.chat-smiley {
    width: 19px;
    height: 19px;
    vertical-align: text-bottom;
}

.chat-alerte {
    color: var(--slk-chat-alerte);
    font-weight: 700;
}

.chat-lien {
    overflow-wrap: anywhere;
}

.chat-v7-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.chat-connected-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.chat-connected-list {
    display: grid;
    gap: 6px;
}

.chat-connected-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    background-color: var(--slk-table-bg);
    padding: 8px;
}

.chat-connected-row.current-room {
    background-color: var(--slk-table-select-color);
}

.chat-connected-status {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

.chat-connected-room {
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-connected-actions {
    grid-column: 1 / -1;
    white-space: nowrap;
}

@media (max-width: 800px) {
    .chat-connected-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .chat-connected-room,
    .chat-connected-actions {
        grid-column: 1 / -1;
    }

    .chat-connected-actions {
        justify-content: flex-start;
    }
}

/* =============================================================================
   13. LES MENTIONS LEGALES
   Rapatrie de Account/Shared/MentionsModal.razor. Ce composant s'affiche a trois
   endroits -- la page d'accueil, l'inscription et les options du compte -- donc
   sous les deux mises en page ; la feuille commune est bien sa place.

   Sa fenetre se pilote sans JavaScript, par une case a cocher masquee et le
   selecteur « :checked ~ » : elle fonctionne donc aussi sur les pages rendues
   sans circuit interactif, ce qui est justement le cas de l'inscription.

   Ses couleurs venaient des variables de Bootstrap, avec un bleu de lien en
   valeur de repli : elles suivent maintenant la charte.
   ============================================================================= */

.slk-mentions-toggle {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.slk-mentions-lien {
    cursor: pointer;
    text-decoration: underline;
    color: var(--slk-link);
    margin-left: .7rem;
}

/* libellé simple à côté d'une grosse case (même écart que le lien, sans le style lien) */
.slk-check-texte {
    margin-left: .7rem;
}

/* cases d'acceptation agrandies pour le tactile (surcharge slk-checkbox-lg : scale 1.8) */
#slk-accept, #slk-age {
    transform: scale(1.8);
    transform-origin: left center;
    cursor: pointer;
}

.slk-mentions-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
}

.slk-mentions-toggle:checked ~ .slk-mentions-overlay {
    display: block;
}

.slk-mentions-overlay .slk-mentions-backdrop {
    position: absolute;
    inset: 0;
    background: var(--slk-voile-modale);
    cursor: pointer;
}

.slk-mentions-overlay .slk-mentions-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 720px;
    max-height: 85vh;
    margin: 5vh auto;
    padding: 1.5rem 2rem;
    background: var(--slk-modal-bg);
    color: var(--slk-texte);
    border-radius: .5rem;
    box-shadow: var(--slk-ombre-fiche);
}

/* seul le corps défile : en-tête (croix) et pied (bouton) restent visibles */
.slk-mentions-overlay .slk-mentions-corps {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: .5rem;
}

.slk-mentions-overlay .slk-mentions-close {
    position: absolute;
    top: .5rem;
    right: 1rem;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
}

.slk-mentions-overlay .slk-mentions-pied {
    flex: 0 0 auto;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--slk-filtre-header-bg);
    text-align: center;
}


/* ---------- L'AIDE ----------
   Le contenu d'une rubrique est du HTML saisi dans l'administration : il porte des captures
   d'ecran du jeu, prises en pleine largeur. Sans la contrainte ci-dessous elles debordent de
   la modale sur un telephone, et la font defiler en largeur. */
.slk-aide-contenu img {
    max-width: 100%;
    height: auto;
    border-radius: .25rem;
    /* Une capture d'ecran se detache mal d'un fond de meme couleur : le liset la delimite,
       quelle que soit la charte. */
    border: 1px solid var(--slk-filtre-header-bg);
}

.slk-aide-contenu table {
    max-width: 100%;
}

/* Les titres saisis dans l'editeur ne doivent pas rivaliser avec celui de la modale. */
.slk-aide-contenu h1,
.slk-aide-contenu h2 {
    font-size: 1.15rem;
    font-weight: 600;
}

.slk-aide-contenu h3,
.slk-aide-contenu h4 {
    font-size: 1.05rem;
    font-weight: 600;
}

/* ---------- L'ADMINISTRATION DE L'AIDE ----------
   Une ligne du sommaire : le titre, les pastilles de langue, les fleches de rangement. */
.slk-aide-admin-ligne {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
}

/* min-width: 0 est indispensable, pas cosmetique. Un element flex a min-width:auto par
   defaut, c'est-a-dire qu'il refuse de devenir plus etroit que son contenu : un titre long
   faisait deborder la ligne de sa colonne, et la colonne voisine se peignait par-dessus.
   Avec min-width:0 le titre accepte de retrecir, et l'ellipse fait le reste. */
.slk-aide-admin-titre {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

/* La ligne choisie, mise en evidence pendant que sa fiche est ouverte. slk.UpdateSelected pose
   la meme classe que sur les cartes, mais la regle des cartes ne vise que .slk-card. */
.slk-aide-admin-ligne.slk-bloc-select {
    border-radius: 4px;
    box-shadow: 0 0 0 0.1rem var(--slk-focus-halo), 0 0 0 0.25rem var(--slk-focus);
}

/* ---------------------------------------------------------------------
   LE PANNEAU D'AIDE.

   Ni une modale, ni un panneau flottant : une bande ANCREE EN BAS, posee dans le flux du
   conteneur de mise en page, juste apres la grille.

   Les deux formes essayees avant celle-ci recouvraient la page, l'une avec un voile, l'autre
   sans. Dans les deux cas, ce que l'aide cachait etait le bas du formulaire qu'elle expliquait,
   et l'ascenseur de la page ne permettait pas d'aller le chercher. Ici la bande prend sa
   place : la grille se retrecit d'autant, et la page defile jusqu'a son dernier bouton.

   Aucun z-index, aucun position : c'est un element ordinaire de la colonne flex qu'est
   .slk-layout-container, comme le bandeau de maintenance a l'autre bout.
   --------------------------------------------------------------------- */
.slk-aide-panneau {
    flex: 0 0 auto;
    /* vh et non % : le conteneur fait 100vh, et une hauteur en pourcentage aurait pris en
       compte ce que le bandeau de maintenance occupe deja. */
    height: 40vh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--slk-cadre-bg);
    border-top: 2px solid var(--slk-menu-bg);
    box-shadow: var(--slk-ombre-fiche);
}

    /* Agrandie pour lire un texte long. Au-dela, la page au-dessus ne servirait plus a rien --
       autant fermer l'aide. */
    .slk-aide-panneau.slk-aide-grand {
        height: 70vh;
    }

    /* Repliee : la barre de titre seule. L'aide reste a un clic pendant qu'on agit, et la page
       recupere toute la hauteur. */
    .slk-aide-panneau.slk-aide-reduit {
        height: auto;
    }

        .slk-aide-panneau.slk-aide-reduit .slk-aide-panneau-contenu {
            display: none;
        }

.slk-aide-panneau-tete {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    background-color: var(--slk-menu-bg);
    /* Le fond de la barre est celui du menu : son texte prend donc la couleur de texte du
       menu, mesuree pour les quatre chartes, et non celle du cadre. */
    color: var(--slk-menu-link);
}

.slk-aide-panneau-titre {
    flex: 0 1 auto;
    min-width: 0;
    padding-left: 4px;
    font-weight: 600;
}

/* Pousse les boutons a droite de la barre de titre. */
.slk-aide-panneau-espace {
    flex: 1 1 auto;
    min-width: 12px;
}

.slk-aide-panneau-contenu {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px;
}

/* La largeur de LECTURE. La bande tient toute la largeur de l'ecran ; son texte, non : sur un
   grand ecran une ligne de 2000 px se suit tres mal, l'oeil perdant le debut de la ligne
   suivante. Meme raison que --slk-bloc-max pour les blocs de fiche. */
.slk-aide-panneau-corps {
    max-width: 900px;
}

/* ---- Les modales, quand l'aide est ouverte ----

   Une modale recouvrait la bande d'aide : impossible de lire l'aide d'une modale tout en la
   remplissant, ce qui est pourtant le moment ou on en a le plus besoin. La modale et son voile
   s'arretent donc au-dessus de l'aide, et les deux surfaces se partagent l'ecran.

   --slk-aide-hauteur est tenue a jour par slk.suivreHauteurAide, qui mesure le panneau. Elle
   vaut 0 quand l'aide est fermee : le repli de var() rend alors ces deux regles neutres, sans
   qu'il y ait de classe a poser ni a retirer.

   .modal-dialog n'a rien a corriger : bootstrap l'exprime deja en pourcentage de .modal, il
   suit donc tout seul -- y compris modal-dialog-scrollable, dont le corps redevient defilant
   des que la place manque. */
.modal {
    height: calc(100% - var(--slk-aide-hauteur, 0px));
}

.modal-backdrop {
    height: calc(100vh - var(--slk-aide-hauteur, 0px));
}

/* Le repere de l'administration, au pied du panneau d'aide : quelle rubrique l'ecran courant
   reclame. Discret, et separe du contenu -- ce n'est pas de l'aide, c'est un outil. */
.slk-aide-repere {
    margin-top: 1rem;
    padding-top: .5rem;
    border-top: 1px solid var(--slk-filtre-header-bg);
    font-size: .85em;
}

/* Le chevron qui replie un groupe du sommaire de l'aide. Un bouton nu : c'est le titre a cote
   qui porte le sens, le chevron n'est qu'une poignee -- mais une poignee assez large pour le
   pouce, d'ou les 28 px. */
.slk-aide-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}