/* ============================================================
   DojoMasterPro — systeme de design
   Rouge de marque reserve au logo et aux actions principales.
   Les donnees et les alertes ont leurs propres teintes, pour que
   le rouge ne veuille pas dire trois choses a la fois.
   ============================================================ */

:root {
    /* Rouge preleve directement sur le logo. Reserve a l identite. */
    --marque:        #EF4F39;
    /* Variante assombrie pour tout ce qui porte du texte blanc ou sert de lien :
       le rouge du logo n a que 3:1 de contraste sur blanc, insuffisant a lire. */
    --marque-action: #CE3A23;
    --marque-fonce:  #A82C19;
    --marque-clair:  #FEF3F2;

    --fond:          #FFFFFF;
    --fond-2:        #F9FAFB;
    --page:          #F1F3F5;   /* le fond des ecrans, derriere les cadres : palette d Hakim du 27 sept. 2026 */
    --fond-3:        #F3F4F6;
    --carte:         #FFFFFF;

    /* LA TETE D UNE CARTE. Elle portait « --fond-2 », soit deux pour cent
       d ecart avec le blanc de la carte — invisible —, et en mode sombre
       EXACTEMENT la meme couleur qu elle : le titre ne se detachait pas du
       tout. Une teinte a elle, et un cran de plus au survol pour les cartes
       qui se replient. */
    --tete:          #F3F4F6;
    --tete-survol:   #E9EBEF;

    /* LE TEXTE DU BANDEAU SUIT LE THEME. Sur un bandeau clair, il doit rester
       fonce en mode clair et clair en mode sombre : en pointant les jetons de
       texte ordinaires, il se retourne tout seul et le theme sombre n a rien a
       redefinir. */
    --tete-texte:    var(--texte);
    --tete-texte-2:  var(--texte-2);
    /* Une surface posee SUR le fond : boites, fenetres, blocs mis en avant.
       Elle etait employee a huit endroits sans avoir jamais ete definie, donc
       sans valeur — et une couleur invalide laisse le fond transparent. */
    --fond-1:        #FFFFFF;

    --texte:         #101828;
    --texte-2:       #475467;
    --texte-3:       #98A2B3;

    --bord:          #E1E5EA;   /* le contour des cartes */
    --bord-fort:     #D0D5DD;
    --btn-survol:    #344054;   /* AU SURVOL, LE BOUTON FONCE : gris fonce, texte blanc (Hakim, 27 sept. 2026) */
    --separateur:    #E8EBEF;   /* les traits DANS une carte : tetes, lignes de tableau, listes */

    --btn-sombre:        #475467;
    --btn-sombre-survol: #344054;

    /* Semantique, distincte de la marque */
    --succes:        #087443;
    --succes-fond:   #ECFDF3;
    --alerte:        #B54708;
    --alerte-fond:   #FFFAEB;
    --info:          #175CD3;

    /* Le ROUGE D ALERTE — une facture echue, une rupture de stock, un refus.
       Il manquait : vingt endroits l appelaient deja et n obtenaient rien, si
       bien que « Rupture » et « En retard » sortaient en texte noir et que les
       bandeaux d erreur perdaient leur fond. Plus sourd que le corail de la
       marque, pour qu une alerte ne se confonde pas avec un bouton. */
    --danger:        #B42318;
    --danger-fond:   #FEF3F2;

    /* Donnees — jamais le rouge de marque */
    --data-1:        #2E64C8;
    --data-2:        #7F56D9;

    /* Echelle de remplissage. Elle se lit comme un feu de circulation et repond
       a « puis-je encore inscrire quelqu un ici ». Ses teintes lui sont propres :
       le rouge de marque sert a l identite, celui-ci a une mesure, et les
       confondre ferait dire deux choses a la meme couleur. */
    --jauge-creux:   #12855C;
    --jauge-normal:  #C2610A;
    --jauge-plein:   #C0261B;

    --rayon:         8px;
    --rayon-sm:      6px;
    --ombre:         0 1px 2px rgba(16, 24, 40, .06), 0 3px 10px rgba(16, 24, 40, .06);   /* une ombre tres legere sous chaque carte (Hakim, 27 sept. 2026) */
    --ombre-md:      0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);

    --barre:         248px;
    --barre-reduite: 64px;

    --police: "Segoe UI Variable Text", "Segoe UI", -apple-system, system-ui, "Helvetica Neue", sans-serif;
    --police-titre: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
}

/* LE THEME SOMBRE EST UNE AFFAIRE D ECRAN.
   Sur papier, il n a aucun sens : l impression ne remettait que le fond en
   blanc, et le texte restait en #FAFAFA — une feuille illisible et une
   cartouche videe par des cartes noires. En excluant ces jetons du media
   print, la palette claire de :root reprend la main : le papier est
   toujours clair, quel que soit le theme choisi a l ecran.

   ET DANS L APERCU AUSSI. L apercu est un ECRAN qui montre du papier : le
   media print ne l attrape pas, et il aurait affiche des cartes noires que
   l imprimante ne sortira jamais. Le :not() le range du cote du papier. */
@media screen {
:root[data-theme="sombre"]:not(.apercu-papier) {
    --marque:        #FF6B54;
    --marque-action: #F4553C;
    --marque-fonce:  #FF8B78;
    --marque-clair:  #2C1614;

    /* Un GRIS NEUTRE, pas un bleu. Les fonds tiraient sur le marine — #1D2939
       porte deux fois plus de bleu que de rouge — ce qui donnait au theme une
       teinte d application financiere et jurait avec le rouge de la marque.
       Les gris ne prennent parti pour aucune couleur, et laissent les ceintures
       etre les seules choses colorees a l ecran. */
    --fond:          #101011;
    --fond-2:        #18181A;
    --page:          #131315;
    --fond-3:        #232326;
    --carte:         #18181A;

    --tete:          #242426;
    --tete-survol:   #2C2C2F;
    --fond-1:        #18181A;

    --texte:         #FAFAFA;
    --texte-2:       #D0D0D3;
    --texte-3:       #86868B;

    --bord:          #27272A;
    --bord-fort:     #3A3A3E;
    --btn-survol:    #52525B;
    --separateur:    #27272A;

    --btn-sombre:        #3F3F46;
    --btn-sombre-survol: #52525B;

    --succes:        #47CD89;
    --succes-fond:   #0E2F20;
    --alerte:        #F79009;
    --alerte-fond:   #2E1C0B;
    --info:          #84ADFF;

    /* Clair sur fond sombre, comme les autres semantiques. */
    --danger:        #F97066;
    --danger-fond:   #3B1512;

    --data-1:        #6BA5FF;
    --data-2:        #B692F6;

    /* Eclaircies pour le fond sombre : les teintes du theme clair y perdent
       tout contraste sur une barre de quelques pixels. */
    --jauge-creux:   #47CD89;
    --jauge-normal:  #F79009;
    --jauge-plein:   #F97066;

    --ombre:         0 1px 2px rgba(0, 0, 0, .3);
    --ombre-md:      0 4px 8px -2px rgba(0, 0, 0, .4);
}
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--police);
    font-size: 15px;
    line-height: 1.5;
    color: var(--texte);
    /* GRIS CLAIR SUR TOUTE LA PAGE, cartes blanches : les sections se
       distinguent sans qu on ait a chercher leur bord. Hakim, 27 sept. 2026. */
    background: var(--page);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--police-titre); margin: 0; font-weight: 600; letter-spacing: -.01em; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; font-size: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; border-radius: 3px; }

/* Le routeur pose le focus sur le h1 a chaque page (FocusOnNavigate), pour que
   les lecteurs d ecran annoncent ou l on est. Un titre n est pas un bouton :
   le cadre rouge qui l entourait sur la page de connexion ne servait a rien. */
h1:focus-visible { outline: none; }

/* ---------------- Structure ---------------- */

.app {
    display: flex;
    min-height: 100vh;
}

.barre {
    width: var(--barre);
    flex: none;
    background: var(--fond);
    border-right: 1px solid var(--bord);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;

    /* La barre elle-meme ne roule plus : seule la liste du milieu le fait, pour
       que la marque en haut et la session en bas restent toujours en place. */
    overflow: hidden;
}

.nav-defile {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* LA MARQUE EN TETE DE BARRE — la console de l editeur seulement.

   Les clubs ne l utilisent plus : leur barre porte le club, et notre marque a
   rejoint le pied de la page principale. La console interne, elle, n a pas de
   club a montrer : c est nous qui y sommes chez nous. */
.barre-logo {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--separateur);
    flex: none;
}
.barre-logo .marque-mark {
    width: 36px; height: 36px;
    flex: none;
    object-fit: contain;
    display: block;
}
.barre-logo .nom {
    font-family: var(--police-titre);
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -.015em;
    line-height: 1.15;
}
.barre-logo .nom small {
    display: block;
    font-family: var(--police);
    font-size: .72rem;
    font-weight: 400;
    color: var(--texte-3);
    letter-spacing: 0;
}

/* ---------------- Le club, en tete de la barre ---------------- */

.barre-club {
    padding: 1.1rem 1.1rem 1.05rem;
    border-bottom: 1px solid var(--separateur);
    flex: none;
}
.barre-club .club-tete {
    display: flex;
    align-items: center;
    gap: .7rem;
}
/* PLUS GRAND QU UNE ICONE : c est une marque, et un logo de club porte souvent
   un dessin — un poing, un kanji, un ecusson — qui disparait sous trente-quatre
   pixels. */
.barre-club .club-marque {
    width: 58px; height: 58px;
    flex: none;
    border-radius: 10px;
    object-fit: contain;
    display: block;
    background: var(--fond-2);
}
/* Deux logos, un theme : le sombre ne se montre qu en theme sombre, et le
   clair s efface alors — seulement s il y a un sombre pour le remplacer. */
.barre-club .marque-sombre { display: none; }
:root[data-theme="sombre"] .barre-club .marque-sombre { display: block; }
:root[data-theme="sombre"] .barre-club .marque-claire { display: none; }

/* NOTRE marque, celle qui porte le nom. Meme bascule que le logo du club,
   mais sans etre bornee a la barre du haut : elle parait aussi sur les pages
   du portail et au pied. La largeur suit la hauteur donnee par l ecran hote,
   le rapport du fichier etant d environ 4 pour 1. */
.marque-produit { display: block; width: auto; object-fit: contain; }
/* Sur les pages du portail, la marque remplace le carre de 56 px : on tient
   la HAUTEUR et on laisse la largeur suivre, sinon le nom s ecrase. Centree
   a la main — une image en bloc ne suit pas le text-align du parent. */
.marque-produit.portail-logo { width: auto; height: 56px; margin: 0 auto .1rem; }
/* Au pied : elle signe, elle n annonce pas. Les lettres n occupent que la
   moitie de la hauteur du fichier — a 22 px, la hauteur de l ancienne icone,
   le nom sortait plus petit que le texte qu il remplace. */
.marque-produit.pied-marque-image { width: auto; height: 38px; opacity: .9; }
.marque-produit.portail-pied-image { width: auto; height: 33px; }
/* Le fichier laisse 65 px de vide sous le dessin, sur 529 : quatre pixels au
   pied, qui ecartaient la marque de « Concu au Canada ». On les reprend. Les
   deux langues sont cadrees pareil depuis le jeu aligne — une seule regle.

   MEME CHOSE A GAUCHE : 65 px de vide avant le poing, soit 4 px rendus. Le
   dessin commencait a droite du « C » de « Concu », et la colonne paraissait
   cassee. On reprend les deux bords. */
.marque-produit.pied-marque-image { margin-bottom: -5px; margin-left: -5px; }
.marque-produit.portail-pied-image { margin-bottom: -4px; margin-left: -4px; }
/* Deux classes dans le selecteur, et non une : « .pied-marque img » est plus
   specifique qu une classe seule, et les deux versions paraissaient cote a
   cote au pied. Le selecteur nomme NOTRE marque, pour ne rien changer au
   logo du club. */
.marque-produit.marque-sombre { display: none; }
:root[data-theme="sombre"] .marque-produit.marque-sombre { display: block; }
:root[data-theme="sombre"] .marque-produit.marque-claire { display: none; }

/* Sans logo televerse : les initiales du club, jamais notre marque. */
.barre-club .club-sansLogo {
    display: grid;
    place-items: center;
    background: var(--marque-clair);
    color: var(--marque-fonce);
    font-size: 1rem;
    font-weight: 700;
}
/* LE NOM SUR DEUX LIGNES, coupees au mot par le composant et non par la
   largeur : la seconde ligne est un bloc a part. */
.barre-club .club-nom {
    font-family: var(--police-titre);
    font-size: .96rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.015em;
    min-width: 0;
}
.barre-club .club-nom span { display: block; }

/* LE LOGO SEUL (Hakim, 30 septembre 2026 : « le logo se verra mieux ») : sans
   le nom a cote, il prend la largeur de la barre, centre, sans le fond gris
   des petites vignettes. Un ecusson carre sort a 96 px ; un logo en longueur
   s etend jusqu a 200. */
.barre-club.logo-seul { padding: .85rem 1rem; }
.barre-club.logo-seul .club-tete { justify-content: center; }
.barre-club.logo-seul .club-marque {
    width: 100%;
    max-width: 200px;
    height: 96px;
    border-radius: 0;
    background: none;
}

/* ---------------- La saison, en tete de l ecran de travail ---------------- */

.entete-saison {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    margin-right: auto;
    min-width: 0;
    text-decoration: none;
    color: var(--texte-2);
}
.entete-saison svg {
    width: 16px; height: 16px;
    flex: none;
    color: var(--texte-3);
    align-self: center;
}
.entete-saison b {
    font-size: .92rem;
    font-weight: 600;
    color: var(--texte);
    white-space: nowrap;
}
.entete-saison > span { font-size: .82rem; color: var(--texte-3); white-space: nowrap; }

/* Sans saison en cours, la ligne devient un lien vers l endroit ou l on repare. */
.entete-saison.saison-manque { color: var(--alerte); }
.entete-saison.saison-manque svg,
.entete-saison.saison-manque b { color: var(--alerte); }
.entete-saison.saison-manque:hover b { text-decoration: underline; }

/* ---------------- Notre marque, en pied de page ---------------- */

.pied-marque {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    margin-top: 2.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--separateur);
}
/* LA SIGNATURE, CENTREE COMME BLOC ET ALIGNEE A GAUCHE DEDANS. La marque
   etait collee au bord gauche pendant que les liens legaux restaient
   centres : deux alignements dans un pied de trois lignes. Le logo et
   « Concu au Canada » forment maintenant un bloc, centre d un seul tenant,
   et leurs deux bords gauches tombent l un sur l autre. */
.pied-signature { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
/* Dans une colonne flex, une image en bloc s etire a la largeur disponible :
   on la ramene a sa taille. */
.portail-pied-marque .marque-produit { align-self: flex-start; }
.pied-marque .pied-ligne { display: flex; align-items: center; gap: .6rem; }
.pied-marque small { font-size: .82rem; color: var(--texte-3); }
.pied-marque .pied-legal a { color: var(--texte-3); text-decoration: none; }
.pied-marque .pied-legal a:hover { color: var(--texte); text-decoration: underline; }
.pied-marque img { width: 44px; height: 44px; object-fit: contain; display: block; opacity: .9; }
.pied-marque span {
    font-family: var(--police-titre);
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--texte-3);
}

@media (max-width: 900px) {
    .entete-saison > span { display: none; }
}

.nav-groupe {
    padding: .7rem .65rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.nav-groupe + .nav-groupe { border-top: 1px solid var(--separateur); }
/* Le trait entre les deux parties du menu de l ecole (Hakim, 30 septembre
   2026) : ce qu on fait chaque jour au-dessus, l organisation et le suivi
   dessous. Plus discret que la separation entre deux groupes. */
.nav-trait { flex: none; height: 1px; margin: .4rem .7rem; background: var(--separateur); }
/* Le titre d une section du menu : « Espace dojo », « Espace famille ». */
.nav-titre {
    margin: .2rem .6rem .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texte-3);
}
.nav-pousse { margin-top: auto; }

.nav-lien {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .7rem;
    border-radius: var(--rayon-sm);
    color: var(--texte-2);
    font-size: .925rem;
    transition: background .12s, color .12s;
    border: 0;
    background: none;
    width: 100%;
    text-align: left;
}
.nav-lien:hover { background: var(--fond-3); color: var(--texte); }

/* LA SECTION OUVERTE.

   Cette regle ne visait que « .actif ». Or NavLink pose « active » — le mot
   anglais du composant — et la selection n a donc JAMAIS ete surlignee : on
   savait ou l on etait par le titre de la page, jamais par le menu. Les deux
   classes sont acceptees ; « .actif » sert ailleurs, aux onglets.

   AUX COULEURS DE LA MARQUE, et non au gris du survol. Elle portait le meme
   fond que « la souris est dessus » : sur une barre deja tres claire, les deux
   se confondaient, et le menu ne repondait plus a « ou suis-je ? ». C est le
   surlignage du menu d un dossier — meme mecanique, meme couleur. */
.nav-lien.actif,
.nav-lien.active {
    background: var(--marque-clair);
    color: var(--marque-action);
    font-weight: 600;
}
.nav-lien svg { width: 19px; height: 19px; flex: none; stroke-width: 1.7; }
.nav-lien .pastille {
    margin-left: auto;
    background: var(--marque-action);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    padding: .05rem .38rem;
    border-radius: 99px;
}

/* ---------------- La barre réduite : une colonne d'icônes ----------------

   SUR LES ÉCRANS DES MEMBRES — la liste et les dossiers — la barre se replie
   sur ses icônes et rend au contenu les 184 px qu'elle occupait : un tableau
   de vingt colonnes ou un dossier à trois panneaux s'y lisent mieux. Le
   gabarit pose « reduit » sur ces adresses ; ailleurs, rien ne change.

   ELLE S'OUVRE AU SURVOL, PAR-DESSUS LE CONTENU et non en le poussant : la
   page ne bouge pas quand la souris entre. Fixée au bord, sa place est tenue
   par une marge. Le clavier l'ouvre de même, mais seulement quand la mise au
   point est visible : un clic de souris sur un lien ne la laisse pas ouverte.

   L'icône ne bouge pas quand la barre s'ouvre : même retrait fermée ou
   ouverte, le nom se glisse à sa droite. Sur écran étroit, rien de tout
   cela : la barre y est déjà repliée derrière le bouton de menu. */
@media (min-width: 821px) {
    .app.reduit .barre {
        width: var(--barre-reduite);
        position: fixed;
        left: 0; top: 0;
        z-index: 50;
        transition: width .15s ease, box-shadow .15s ease;
    }
    .app.reduit .principal { margin-left: var(--barre-reduite); }
    .app.reduit .barre:hover,
    .app.reduit .barre:has(:focus-visible) {
        width: var(--barre);
        box-shadow: var(--ombre-md);
    }
    .app.reduit .barre:not(:hover, :has(:focus-visible)) .nav-texte,
    .app.reduit .barre:not(:hover, :has(:focus-visible)) .nav-titre,
    .app.reduit .barre:not(:hover, :has(:focus-visible)) .club-nom,
    .app.reduit .barre:not(:hover, :has(:focus-visible)) .nav-lien .pastille { display: none; }

    .app.reduit .nav-lien { white-space: nowrap; overflow: hidden; }
    .app.reduit .nav-lien svg { width: 20px; height: 20px; }
    .app.reduit .nav-defile { scrollbar-width: thin; }

    /* Le logo du club tient dans la colonne ; son nom paraît à l'ouverture. */
    .app.reduit .barre-club { padding: .85rem .625rem; }
    .app.reduit .barre-club .club-marque { width: 44px; height: 44px; font-size: .9rem; }
    .app.reduit .barre-club.logo-seul .club-tete { justify-content: flex-start; }

    /* La largeur gagnée doit servir : le plafond du contenu monte d'autant. */
    .app.reduit .contenu { max-width: 1800px; }
}

.barre-compte {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    border-top: 1px solid var(--separateur);
    flex: none;
}
.avatar {
    width: 34px; height: 34px;
    flex: none;
    border-radius: 99px;
    overflow: hidden;
    background: var(--texte);
    color: var(--fond);
    display: grid;
    place-items: center;
    font-size: .82rem;
    font-weight: 600;
}
.compte-lien {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    flex: 1;
    padding: .3rem;
    margin: -.3rem;
    border-radius: var(--rayon-sm);
    transition: background .12s;
}
.compte-lien:hover { background: var(--fond-3); }

.barre-compte .qui { min-width: 0; }
.barre-compte .qui b { display: block; font-size: .86rem; font-weight: 600; }
.barre-compte .qui span {
    display: block;
    font-size: .76rem;
    color: var(--texte-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* LA PÉRIODE D'ESSAI, en haut du contenu. Sans bouton pour la fermer : un
   bandeau qu'on referme est un bandeau qu'on ne relit jamais. */
.bandeau-essai {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1rem;
    margin-bottom: 1.1rem;
    background: var(--fond-2);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    font-size: .9rem;
    color: var(--texte-2);
}
.bandeau-essai svg { width: 18px; height: 18px; flex: none; color: var(--texte-3); }
.bandeau-essai b { color: var(--texte); font-weight: 650; }

/* Sous trois jours, ce n'est plus une information : c'est une échéance. */
.bandeau-essai.essai-presse {
    background: var(--alerte-fond);
    border-color: var(--alerte);
    color: var(--texte);
}
.bandeau-essai.essai-presse svg { color: var(--alerte); }


/* QUI JE SUIS, a droite, juste avant mes propres commandes. */
.entete-qui {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.25;
    text-align: right;
    margin-right: .35rem;
    min-width: 0;
}
.entete-qui b {
    font-size: .86rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.entete-qui span { font-size: .74rem; color: var(--texte-3); white-space: nowrap; }

.entete-sortie { display: flex; }

/* LA PHOTO DE PROFIL, ronde et recadree : dans le coin de l'entete a la place
   de l'icone, et dans la pastille de la barre de l'editeur. Un portrait en
   hauteur est coupe au centre plutot qu'ecrase. */
.entete-photo img,
.avatar img {
    width: 30px; height: 30px;
    object-fit: cover;
    border-radius: 99px;
    display: block;
}
.avatar img { width: 34px; height: 34px; }

/* Le bloc « Photo de profil » de Mon compte : l'apercu, puis les commandes. */
.photo-profil {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}
.photo-profil-cadre {
    width: 96px; height: 96px;
    flex: none;
    border-radius: 99px;
    overflow: hidden;
    background: var(--fond-3);
    border: 1px solid var(--bord);
    display: grid;
    place-items: center;
    color: var(--texte-3);
}
.photo-profil-cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-profil-cadre svg { width: 44px; height: 44px; stroke-width: 1.4; }
.photo-profil-actions {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
    flex: 1 1 260px;
}
.photo-profil-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.photo-profil-boutons label.btn { cursor: pointer; position: relative; overflow: hidden; }
/* Le champ natif reste dans la page — le navigateur en a besoin pour ouvrir le
   selecteur — mais hors de vue : sans display:none, qui casse le clic sur
   l'etiquette dans certains navigateurs. */
.photo-profil-fichier { position: absolute; inset: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-profil-actions .legende { margin: 0; }

/* Sur ecran etroit, l entete garde l essentiel : le titre et les icones. Le nom
   de la personne se retrouve en un clic sous « Mon compte ». */
@media (max-width: 900px) {
    .entete-qui { display: none; }
}

/* ---------------- Zone principale ---------------- */

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.entete {
    height: 61px;
    flex: none;
    background: var(--fond);
    border-bottom: 1px solid var(--separateur);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    padding: 0 1.4rem;
    position: sticky;
    top: 0;
    z-index: 20;
}
.icone-btn {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 0; background: none;
    border-radius: var(--rayon-sm);
    color: var(--texte-2);
}
.icone-btn:hover { background: var(--btn-survol); color: #fff; }
.icone-btn svg { width: 19px; height: 19px; stroke-width: 1.7; }

/* LE CONTENU OCCUPE LA HAUTEUR RESTANTE. Il ne s'etirait pas dans sa colonne :
   sur une page courte, le vide s'ouvrait SOUS lui, et rien ne fermait l ecran. */
.contenu {
    padding: 1.75rem 1.9rem 1.1rem;
    max-width: 1400px;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.contenu-corps { flex: 1; min-height: 0; }

.page-titre { font-size: 1.6rem; margin-bottom: .3rem; }
.page-sous { color: var(--texte-2); margin: 0 0 1.5rem; font-size: .95rem; }
.page-sous b { color: var(--texte); font-weight: 600; }

/* ---------------- Bandeau ---------------- */

.bandeau {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--alerte-fond);
    border: 1px solid color-mix(in srgb, var(--alerte) 25%, transparent);
    border-radius: var(--rayon);
    padding: .8rem 1.1rem;
    margin-bottom: 1.5rem;
    font-size: .92rem;
}
.bandeau svg { width: 19px; height: 19px; color: var(--alerte); flex: none; }

/* ---- L avis qui flotte ----
   La confirmation d un enregistrement se posait en haut de la page ; le
   bouton est en bas, et sur une fiche de deux ecrans on ne la voyait qu en
   remontant. Elle flotte donc au bas de l ecran, la ou est le regard, et
   par-dessus tout — y compris une boite ouverte. */
.avis-flottant {
    position: fixed;
    left: 50%;
    bottom: 1.2rem;
    transform: translateX(-50%);
    z-index: 90;
    width: max-content;
    max-width: min(640px, calc(100vw - 2rem));
    margin: 0;
    box-shadow: var(--ombre-md);
    animation: dialogue-entre .14s ease;
}
.avis-flottant > span { min-width: 0; }
.avis-fermer {
    margin-left: .4rem;
    padding: 0 .35rem;
    border: 0;
    background: none;
    color: var(--texte-2);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    flex: none;
}
.avis-fermer:hover { color: var(--texte); }
@media print { .avis-flottant { display: none !important; } }
.bandeau .action {
    margin-left: auto;
    color: var(--marque-action);
    font-weight: 600;
    white-space: nowrap;
}
.bandeau .action:hover { text-decoration: underline; }

/* ---------------- Cartes ---------------- */

.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }

.carte {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 1.2rem 1.3rem;
    box-shadow: var(--ombre);
    display: flex;
    flex-direction: column;
    min-height: 200px;
}
.carte-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .55rem;
}
.carte-tete h3 { font-size: .93rem; font-weight: 600; color: var(--texte-2); }
.carte-selecteur {
    font-size: .82rem;
    color: var(--texte-2);
    background: none;
    border: 0;
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .3rem;
    border-radius: 4px;
}
.carte-selecteur:hover { background: var(--fond-3); }
.carte-selecteur svg { width: 14px; height: 14px; }

.stat {
    font-family: var(--police-titre);
    font-size: 2.1rem;
    font-weight: 650;
    letter-spacing: -.025em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.stat-note { font-size: .88rem; color: var(--texte-2); margin-top: .15rem; }
.stat-note.hausse { color: var(--succes); font-weight: 550; }

.carte-viz { margin-top: auto; padding-top: 1rem; }

/* ---------------- Repartition des ceintures ---------------- */

.ceintures { display: flex; flex-direction: column; gap: .55rem; margin-top: .35rem; }
.ceinture-ligne {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 34px;
    align-items: center;
    gap: .7rem;
    font-size: .86rem;
}
.ceinture-ligne .etiq { color: var(--texte-2); }
.ceinture-ligne .piste {
    display: block;
    height: 9px;
    background: var(--fond-3);
    border-radius: 99px;
    overflow: hidden;
}
/* display:block indispensable : un span inline ignore width et height. */
/* Le liseré interne suit le THEME, pas une teinte fixe : une ceinture blanche
   disparaissait sur une piste claire, une ceinture noire sur une piste sombre.
   --texte-3 contraste avec les deux fonds, donc la barre se voit toujours. */
.ceinture-ligne .jauge { display: block; height: 100%; border-radius: 99px; min-width: 3px;
                         box-shadow: inset 0 0 0 1px var(--texte-3); }
/* A zero, AUCUN trait : le talon de 3px disait « il y en a un peu » ou il n y a personne. */
.ceinture-ligne .jauge.vide { min-width: 0; }
.ceinture-ligne .compte {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--texte);
    font-weight: 550;
}

/* ---------------- Tableaux ---------------- */

.tableau-boite {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre);
}
.defilant { overflow-x: auto; }
table.liste { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.liste th {
    text-align: left;
    font-size: .78rem;
    font-weight: 600;
    color: var(--texte-2);
    background: var(--fond-2);
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--separateur);
    white-space: nowrap;
}
table.liste td { padding: .7rem 1rem; border-bottom: 1px solid var(--separateur); vertical-align: middle; }
table.liste tr:last-child td { border-bottom: 0; }
table.liste tbody tr:hover { background: var(--fond-2); }

/* LE DETAIL D UN ENVOI sous sa ligne : qui a recu, qui n a pas recu. La ligne
   se clique, la ligne ouverte reste marquee, et le detail prend toute la
   largeur, groupe par club. */
table.liste tr.cliquable { cursor: pointer; }
table.liste tr.cliquable.ouverte td { background: var(--fond-2); }
table.liste tr.detail-envoi td { background: var(--fond-2); padding: .7rem 1rem .4rem; white-space: normal; }
table.liste tr.detail-envoi:hover { background: transparent; }
.envoi-club { margin: 0 0 .7rem; font-size: .85rem; max-width: 640px; }
.envoi-club > b { display: block; margin-bottom: .2rem; }
.envoi-ligne { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .15rem 0 .15rem .8rem; }
.envoi-adresse { min-width: 220px; }
.envoi-bon { color: var(--succes); }
.envoi-mauvais { color: var(--danger); }

/* LA CONNEXION D UN FOURNISSEUR DE PAIEMENT : un bloc par fournisseur, le nom
   et son etat sur la meme ligne, une phrase, puis les gestes. Un bouton
   grise dit qu il ne menera nulle part avant que l editeur ait fini. */
.connexion-paiement { padding: .9rem 0; border-top: 1px solid var(--separateur); }
.connexion-paiement:first-child { padding-top: 0; border-top: 0; }
.connexion-tete { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.connexion-tete b { font-size: 1rem; }
.connexion-detail { margin: .2rem 0 .5rem; }
.connexion-avertissement { color: var(--marque-action); margin: .2rem 0 .5rem; }
.connexion-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; }
.connexion-paiement .aide { display: block; }
.connexion-paiement .btn[disabled] { opacity: .5; cursor: not-allowed; }

.membre-cell { display: flex; align-items: center; gap: .65rem; }
.pastille-ceinture {
    width: 11px; height: 11px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.22);
    flex: none;
}

.etat {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 550;
    padding: .13rem .5rem;
    border-radius: 99px;
    white-space: nowrap;
}
.etat-actif { background: var(--succes-fond); color: var(--succes); }
.etat-suspendu { background: var(--alerte-fond); color: var(--alerte); }
/* Invité : le courriel est parti, personne n est encore entré. Ni vert ni
   orange — ce n est pas un problème, c est une attente. */
.etat-attente { background: var(--fond-3); color: var(--texte-2); }

/* ---------------- Boutons ---------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border-radius: var(--rayon-sm);
    font-size: .9rem;
    font-weight: 550;
    border: 1px solid var(--bord-fort);
    background: var(--fond);
    color: var(--texte);
    transition: background .12s, color .12s, border-color .12s;
}
/* UNE SEULE REGLE DE SURVOL, PARTOUT : le bouton fonce dans sa propre couleur.
   Gris -> gris fonce et texte blanc ; rouge doux -> rouge fonce ; rouge plein ->
   rouge fonce. Un gris a peine plus fonce ne se voyait pas sur l ecran d Hakim. */
.btn:hover { background: var(--btn-survol); border-color: var(--btn-survol); color: #fff; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: default; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--fond); border-color: var(--bord-fort); color: var(--texte); }
.btn svg { width: 16px; height: 16px; }
.btn-principal { background: var(--marque-action); border-color: var(--marque-action); color: #fff; }
.btn-principal:hover { background: var(--marque-fonce); border-color: var(--marque-fonce); }
.btn-principal:disabled:hover { background: var(--marque-action); border-color: var(--marque-action); color: #fff; }
/* TROIS NIVEAUX, PAS UN SEUL ROUGE (Hakim, 27 sept. 2026 : « ca fait pas un
   peu trop la meme couleur ? »). Rouge plein : le geste principal (Facturer,
   Enregistrer, Confirmer). Rouge doux : ce qui ouvre une modification
   (Modifier, Ajuster, Renommer, Changer de groupe...). Gris : tout le reste
   (Voir, Deposer, Masquer, fleches, Inscrire, Ajouter, Annuler, Retirer au
   repos — le rouge plein n arrive qu a sa confirmation). */
.btn-modifier { color: var(--marque-action); border-color: color-mix(in srgb, var(--marque-action) 45%, var(--bord-fort)); background: var(--marque-clair); }
.btn-modifier:hover { background: var(--marque-fonce); border-color: var(--marque-fonce); color: #fff; }
:root[data-theme="sombre"] .btn-modifier:not(:hover) { background: color-mix(in srgb, var(--marque-action) 14%, transparent); }

/* Le gris fonce : un bouton PLEIN, comme le principal, mais neutre. Pour le
   geste qui defait quand il doit voisiner ceux qui engagent — il se distingue
   par la couleur puisqu il ne peut pas se distinguer par la distance.
   Deux teintes, parce qu un gris fonce sur fond sombre ne se verrait plus. */
.btn-sombre {
    background: var(--btn-sombre);
    border-color: var(--btn-sombre);
    color: #fff;
}
.btn-sombre:hover { background: var(--btn-sombre-survol); border-color: var(--btn-sombre-survol); }

.champ {
    width: 100%;
    padding: .55rem .8rem;
    border: 1px solid var(--bord-fort);
    border-radius: var(--rayon-sm);
    font-family: inherit;
    font-size: .92rem;
    background: var(--fond);
    color: var(--texte);
}
.champ::placeholder { color: var(--texte-3); }

.barre-outils { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.barre-outils .recherche { flex: 1; min-width: 220px; max-width: 380px; }

/* ---------------- Portail : ecrans hors session ---------------- */

.portail {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    padding: 2rem 1.2rem;
    background: var(--fond-2);
}
.portail-boite {
    width: 100%;
    max-width: 408px;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: 12px;
    box-shadow: var(--ombre-md);
    padding: 2.1rem 2rem 1.8rem;
}
/* Le pied des ecrans hors session reprend celui du site vitrine : marque et
   pays a gauche, les liens du site a droite, droits et legal en dessous. */
.portail-pied { width: 100%; max-width: 720px; margin: .6rem 0 0; font-size: .84rem; color: var(--texte-3); }
.portail-pied-haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem 2rem; padding-top: 1.2rem; border-top: 1px solid var(--separateur); }
.portail-pied-marque { display: flex; flex-direction: column; gap: 0; }
.portail-pied-logo { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--texte); }
.portail-pied-logo img { width: 22px; height: 22px; object-fit: contain; }
.portail-pied-liens { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem; }
/* Langue et theme, comme dans la ceinture du site : une pastille FR / EN et le
   karateka. Le bouton de theme reprend l identifiant que le script attend. */
.portail-outils { display: inline-flex; align-items: center; gap: .6rem; margin-left: .4rem; }
.portail-langue { display: inline-flex; padding: 2px; border: 1px solid var(--bord); border-radius: 99px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; }
.portail-langue a, .portail-langue span { padding: .22rem .55rem; border-radius: 99px; color: var(--texte-3); text-decoration: none; }
.portail-langue .actif { background: var(--texte); color: var(--fond); }
.portail-langue a:hover { color: var(--texte); }
.portail-outils .icone-btn { width: 34px; height: 34px; }
.portail-pied a { color: var(--texte-2); text-decoration: none; font-weight: 500; }
.portail-pied a:hover { color: var(--marque); }
.portail-pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--separateur); font-size: .78rem; }
.portail-pied-bas a { color: var(--texte-3); font-weight: 400; }
@media (max-width: 560px) { .portail-pied-haut, .portail-pied-bas { flex-direction: column; align-items: flex-start; } .portail-pied-liens { flex-direction: column; gap: .5rem; } }

.portail-tete { text-align: center; margin-bottom: 1.6rem; }
.portail-logo { width: 56px; height: 56px; object-fit: contain; margin-bottom: .7rem; }
.portail-tete h1 {
    font-size: 1.42rem;
    font-weight: 650;
    letter-spacing: -.02em;
    margin-bottom: .15rem;
}
.portail-tete p { margin: 0; font-size: .89rem; color: var(--texte-2); }
/* La phrase d accueil promue en titre sur l ecran de connexion : elle garde
   le ton d une phrase, pas d une enseigne — la marque tient ce role. */
.portail-tete h1.portail-accroche {
    font-size: .92rem;
    font-weight: 450;
    letter-spacing: normal;
    color: var(--texte-2);
    margin: 0;
}

.portail-formulaire { display: flex; flex-direction: column; gap: 1rem; }
.portail-formulaire label { display: flex; flex-direction: column; gap: .32rem; }
.portail-formulaire label > span { font-size: .86rem; font-weight: 550; color: var(--texte-2); }

.portail-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: .87rem;
}
.portail-ligne a { color: var(--marque-action); font-weight: 550; }
.portail-ligne a:hover { text-decoration: underline; }

.portail-case { flex-direction: row !important; align-items: center; gap: .45rem !important; }
.portail-case > span { font-weight: 400 !important; color: var(--texte-2); }
.portail-case input { width: 15px; height: 15px; accent-color: var(--marque-action); }
/* Les deux liens de la case d acceptation doivent se voir comme des liens : on ne peut pas accepter ce qu on ne trouve pas. */
.portail-case a { color: var(--marque-action); text-decoration: underline; text-underline-offset: 2px; }
.portail-case a:hover { color: var(--marque-fonce); }

/* LE CONSENTEMENT A LA CARTE ENREGISTREE : un encadre qui dit ce qu on accepte,
   point par point, et la case en dessous. */
.portail-encadre { border: 1px solid var(--bord); border-radius: var(--rayon-sm); padding: .9rem 1rem; margin: 1rem 0 0; background: var(--fond-2); }
.portail-encadre p { margin: 0 0 .4rem; }
.portail-encadre ul { margin: 0 0 .8rem; padding-left: 1.2rem; color: var(--texte-2); font-size: .92rem; line-height: 1.5; }
.portail-encadre li { margin: .2rem 0; }
.portail-consentement .portail-case { display: flex; }

/* LES CADRES DE CLOVER : chaque champ de carte est un iframe servi par Clover,
   monte dans une boite a nous qui lui donne la place et la bordure. */
.carte-clover { margin-top: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.carte-clover label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--texte-2); }
.carte-clover-champ { height: 42px; border: 1px solid var(--bord); border-radius: var(--rayon-sm); padding: 0 .6rem; background: var(--fond); }
.carte-clover-champ iframe { height: 40px !important; width: 100% !important; }
.carte-clover-ligne { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .7rem; }
@media (max-width: 560px) { .carte-clover-ligne { grid-template-columns: 1fr; } }

.portail-bouton { width: 100%; justify-content: center; padding: .62rem 1rem; font-size: .95rem; }

.portail-erreur {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--marque-clair);
    border: 1px solid color-mix(in srgb, var(--marque-action) 35%, transparent);
    color: var(--marque-fonce);
    border-radius: var(--rayon-sm);
    padding: .65rem .85rem;
    font-size: .88rem;
    margin-bottom: 1.1rem;
}
.portail-erreur svg { width: 17px; height: 17px; flex: none; }

.portail-validation { font-size: .82rem; color: var(--marque-action); }

.portail-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.portail-duo label { min-width: 0; }

.portail-texte {
    margin: 0;
    font-size: .92rem;
    color: var(--texte-2);
    text-align: center;
    line-height: 1.6;
}
.portail-texte b { color: var(--texte); font-weight: 600; }

.portail-mention {
    margin: .2rem 0 0;
    font-size: .79rem;
    line-height: 1.5;
    color: var(--texte-3);
}

.portail-bas {
    margin: 1.4rem 0 0;
    text-align: center;
    font-size: .87rem;
    color: var(--texte-2);
}
.portail-bas a { color: var(--marque-action); font-weight: 550; }
.portail-bas a:hover { text-decoration: underline; }

.portail-demo {
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--bord-fort);
    display: flex;
    flex-direction: column;
    gap: .18rem;
    font-size: .8rem;
    color: var(--texte-3);
}
.portail-demo b { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--texte-2); margin-bottom: .2rem; }

/* ---------------- Blocs de reglages ---------------- */

.bloc {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    margin-bottom: 1.2rem;
    overflow: hidden;
}
/* LE BANDEAU DE TITRE, au gris de la charte.
   Il portait « --fond-2 » : deux pour cent d ecart avec la carte en mode
   clair, et EXACTEMENT la meme couleur en mode sombre. Le noir et le graphite
   ont ete essayes et pesaient plus que le contenu des cartes ; les gris moyens
   et les teintes, elles, sortaient de la charte. Celui-ci est un jeton du
   logiciel — le gris de fond —, et c est le trait du bas qui acheve de poser
   la bande. */
.bloc-tete {
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid var(--separateur);
    background: var(--carte);
    color: var(--tete-texte);
}
.bloc-tete h2 { font-size: 1.02rem; font-weight: 600; margin-bottom: .2rem; color: var(--tete-texte); }
.bloc-tete p { margin: 0; font-size: .88rem; color: var(--tete-texte-2); max-width: 72ch; }
.bloc-corps { padding: 1.3rem; display: flex; flex-direction: column; gap: 1rem; }

/* Un bloc qui se replie : meme tete, mais cliquable, et la bordure du bas ne
   se justifie que quand il est ouvert. */
details.bloc-pliable > summary { cursor: pointer; list-style: none; position: relative; padding-right: 2.6rem; }
details.bloc-pliable > summary::-webkit-details-marker { display: none; }
details.bloc-pliable:not([open]) > summary { border-bottom: none; }
details.bloc-pliable > summary:hover { background: var(--tete-survol); }
details.bloc-pliable > summary::after {
    content: "";
    position: absolute;
    right: 1.3rem;
    top: 1.5rem;
    width: .5rem;
    height: .5rem;
    border-right: 2px solid var(--texte-3);
    border-bottom: 2px solid var(--texte-3);
    transform: rotate(45deg);
    transition: transform .15s;
}
details.bloc-pliable[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

/* Ville / province / code postal : trois champs de largeurs tres inegales.
   Une grille en trois parts egales donnerait un code postal aussi large qu une
   ville, ce que personne n ecrit. */
.trio { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; }

/* Ville · province · code postal · pays. La province et le pays sont des codes
   a deux lettres : leur donner un quart de la largeur laisserait un menu vide
   aux trois quarts a cote d une ville qui deborde. */
.quatuor {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .9fr);
    gap: 1rem;
}

@media (max-width: 900px) {
    .trio, .quatuor { grid-template-columns: minmax(0, 1fr); }
}

.bloc-corps label { display: flex; flex-direction: column; gap: .32rem; }
.bloc-corps label > span { font-size: .85rem; font-weight: 550; color: var(--texte-2); }

.bloc-corps .barre-outils { margin-bottom: 0; }
.bloc-corps table.liste .champ { padding: .35rem .55rem; font-size: .87rem; }

.actions-pied {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: .7rem;
    padding: .9rem 0;
    background: linear-gradient(to top, var(--fond-2) 60%, transparent);
}

@media (max-width: 760px) { .duo, .trio { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- Page en chantier ---------------- */

.chantier {
    background: var(--carte);
    border: 1px dashed var(--bord-fort);
    border-radius: var(--rayon);
    padding: 3.5rem 2rem;
    text-align: center;
    color: var(--texte-2);
}
.chantier h3 { font-size: 1.05rem; color: var(--texte); margin-bottom: .4rem; }
.chantier p { margin: 0 auto; max-width: 46ch; font-size: .93rem; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

@media (max-width: 1100px) {
    .grille, .grille-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- Fiche membre ---------------- */

.fiche-tete {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
}
.fiche-tete .page-titre { margin-bottom: .1rem; }
.fiche-tete > .etat { margin-left: auto; }

/* Les personnes proposees a la recherche, en boutons plutot qu en liste :
   on en choisit une, on ne les parcourt pas. */
.candidats { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.candidats .doux { font-weight: 400; margin-left: .3rem; }

/* =====================================================================
   Famille : les responsables, une carte chacun
   ===================================================================== */

/* La reponse d abord : a qui vont les factures, en une phrase. */
.famille-payeur { margin: 0; font-size: .92rem; color: var(--texte-2); }
.famille-payeur b { color: var(--texte); }

/* Une liste de personnes, empilee : la fiche du club en a fait un tableau
   de roles (voir plus bas), mais l inscription d un nouveau membre et les
   coordonnees du portail s en servent encore. */
.responsables { display: flex; flex-direction: column; gap: .7rem; }

/* =====================================================================
   Urgence : la liste d appel, numerotee
   ===================================================================== */

/* Une ligne par personne a appeler, dans l ordre : le rang, qui, le numero —
   le plus gros element, cliquable, il compose l appel sur une tablette au
   dojo — et les fleches pour changer l ordre. */
.urgences-liste { display: flex; flex-direction: column; gap: .5rem; }
.urgence-ligne {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .4rem .9rem;
    padding: .6rem .8rem;
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    background: var(--fond-1);
}
.urgence-rang {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: var(--fond-3); font-weight: 700; font-variant-numeric: tabular-nums;
}
.urgence-qui a { color: inherit; text-decoration: none; }
.urgence-qui a:hover { text-decoration: underline; }
.urgence-qui .doux { display: block; font-size: .82rem; }
.urgence-gestes { display: flex; gap: .3rem; }
.urgence-ajout { display: flex; flex-wrap: wrap; gap: .4rem; }

.urgence-tel {
    font-size: 1.05rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--marque-action);
    text-decoration: none;
}

.urgence-tel:hover { text-decoration: underline; }

@media (max-width: 620px) {
    .urgence-ligne { grid-template-columns: auto minmax(0, 1fr); }
    .urgence-tel, .urgence-gestes { grid-column: 2; }
}

/* =====================================================================
   Photo de la fiche, et depot de fichiers
   ===================================================================== */

.photo-fiche {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding-bottom: .4rem;
}

.portrait {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--bord);
    flex: none;
}

/* Sans photo, les initiales plutot qu une silhouette generique : on reconnait
   un dossier a son nom, et un carre vide se lit comme un chargement rate. */
.portrait-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fond-3);
    color: var(--texte-3);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .04em;
}

/* Le champ de fichier natif est irregulier d un navigateur a l autre : on le
   cache et on habille son label, qui declenche la meme chose. */
.depot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.depot > label { cursor: pointer; margin: 0; }

.depot-refus {
    font-size: .85rem;
    color: var(--alerte);
}

/* Champs relevant du club : le cadenas doit se lire avant qu on essaie de taper. */
.verrou {
    font-style: normal;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--texte-3);
    background: var(--fond-3);
    padding: .06rem .34rem;
    border-radius: 3px;
    margin-left: .35rem;
}

.champ:disabled, .champ[readonly] {
    background: var(--fond-2);
    color: var(--texte-2);
    cursor: default;
}

.alerte-medicale {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    background: var(--marque-clair);
    border: 1.5px solid var(--marque-action);
    border-radius: var(--rayon);
    padding: .9rem 1.1rem;
    margin-bottom: 1.4rem;
}
.alerte-medicale svg { width: 21px; height: 21px; flex: none; color: var(--marque-action); margin-top: .1rem; }
.alerte-medicale b { display: block; color: var(--marque-fonce); margin-bottom: .15rem; }
.alerte-medicale span { display: block; font-size: .91rem; color: var(--texte); }

.ligne-consentement {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: .7rem !important;
    padding: .8rem 0;
    border-bottom: 1px solid var(--separateur);
    cursor: pointer;
}
.ligne-consentement:last-child { border-bottom: 0; padding-bottom: 0; }
.ligne-consentement input { width: 17px; height: 17px; margin-top: .15rem; flex: none; accent-color: var(--marque-action); }
.ligne-consentement b { display: block; font-weight: 600; font-size: .93rem; margin-bottom: .1rem; }
.ligne-consentement span { display: block; font-size: .85rem; color: var(--texte-2); font-weight: 400; }
.ligne-consentement input:disabled { opacity: .55; }

/* ---------------- Recherche de responsable ---------------- */

.parent-lie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--succes-fond);
    border: 1px solid color-mix(in srgb, var(--succes) 32%, transparent);
    border-radius: var(--rayon-sm);
    padding: .8rem 1rem;
}
.parent-lie b { display: block; font-weight: 600; }
.parent-lie span { display: block; font-size: .86rem; color: var(--texte-2); }

.resultats-parent {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    overflow: hidden;
}
.resultat-parent {
    text-align: left;
    border: 0;
    background: var(--carte);
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--separateur);
}
.resultat-parent:last-child { border-bottom: 0; }
.resultat-parent:hover { background: var(--fond-3); }
.resultat-parent b { display: block; font-weight: 600; font-size: .92rem; }
.resultat-parent span { display: block; font-size: .82rem; color: var(--texte-2); }

/* ---------------- Horaires ---------------- */
/* Une colonne par jour, seulement les jours qui portent un cours : une colonne
   vide occupe de la place sans rien apprendre. */

.semaine {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: .8rem;
    align-items: start;
}

.colonne-jour {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

.entete-jour {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: .1rem .2rem .4rem;
    border-bottom: 2px solid var(--bord-fort);
}
.entete-jour b { font-weight: 650; font-size: .95rem; }
.entete-jour span { font-size: .76rem; color: var(--texte-3); }

.carte-cours {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-left: 3px solid var(--data-1);
    border-radius: var(--rayon-sm);
    padding: .6rem .7rem .65rem;
    box-shadow: var(--ombre);
}
.legende-groupes {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    margin-bottom: 1rem;
}
.puce-groupe {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--texte-2);
}
/* La pastille de couleur d une cohorte, partout ou elle parait : titres de
   section des tarifs et des cours, cartes de l horaire.
   Elle n etait definie QUE dans `.puce-groupe`, donc elle mesurait 0 x 0 ailleurs
   — les titres de section portaient bien la bonne couleur, sur zero pixel. */
.point {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .18);
    flex: none;
}

.puce-groupe .point {
    width: 10px; height: 10px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .18);
}

.carte-cours .groupe-nom {
    display: block;
    margin-top: .35rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--texte-2);
}

.carte-cours .heure {
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    color: var(--texte-2);
    margin-bottom: .1rem;
}
.carte-cours b { display: block; font-size: .88rem; font-weight: 600; line-height: 1.3; }
.carte-cours .public { display: block; font-size: .77rem; color: var(--texte-3); margin-top: .1rem; }

.jauge-cours { display: flex; align-items: center; gap: .45rem; margin-top: .5rem; }
.jauge-cours .piste {
    display: block;
    flex: 1;
    height: 5px;
    background: var(--fond-3);
    border-radius: 99px;
    overflow: hidden;
}
.jauge-cours .jauge { display: block; height: 100%; border-radius: 99px; min-width: 2px; }
.jauge-cours .chiffre {
    font-size: .72rem;
    color: var(--texte-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.jour-vide {
    padding: .8rem .2rem;
    font-size: .8rem;
    color: var(--texte-3);
    font-style: italic;
}

/* ---------------- Tarifs ---------------- */
/* Un tarif se consulte cent fois et se modifie une fois par annee : la grille
   se LIT, et l edition s ouvre a la demande. Une page ou chaque cellule est un
   champ ouvert ne se lit pas, elle se remplit. */

table.tarifs td { padding: .6rem 1rem; }
table.tarifs b { font-weight: 600; }
.doux { color: var(--texte-2); }
.montant { text-align: right; font-variant-numeric: tabular-nums; }
.fort { font-weight: 600; }
.etiquette {
    display: inline-block;
    margin-left: .45rem;
    font-size: .7rem;
    letter-spacing: .03em;
    color: var(--texte-3);
    background: var(--fond-3);
    padding: .08rem .4rem;
    border-radius: 3px;
    vertical-align: middle;
}

.ligne-retiree { opacity: .52; }
.ligne-active { background: var(--fond-2); }

/* Suppression annoncee mais pas encore executee : visible avant l enregistrement. */
.ligne-a-supprimer { background: var(--marque-clair); }
.ligne-a-supprimer b { text-decoration: line-through; color: var(--texte-2); }
.ligne-edition td { padding: 0; background: var(--fond-2); }

.panneau-edition {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1rem 1.2rem;
    border-left: 3px solid var(--marque-action);
}
.champs-edition {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .85rem;
}
.champs-edition label { display: flex; flex-direction: column; gap: .3rem; }
.champs-edition > label > span { font-size: .82rem; font-weight: 550; color: var(--texte-2); }
.cases-edition { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }

.resume-rabais {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
}
.resume-rabais b { display: block; font-weight: 600; margin-bottom: .12rem; }
.resume-rabais span { display: block; font-size: .88rem; color: var(--texte-2); }

.paliers { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.palier {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .89rem;
    color: var(--texte-2);
}
.palier .mini { width: 62px; }
.palier .argent { width: 84px; text-align: right; }


/* LA PHRASE À TROUS. Le club lit sa clause et remplit les blancs, au lieu de
   traduire son contrat en réglages. Les champs vivent DANS le texte : c'est
   ce qui permet de la relire d'un trait et de la comparer au papier. */
.phrase-trous {
    margin: 1rem 0 0;
    font-size: 1rem;
    line-height: 2.1;
    color: var(--texte);
    max-width: 62ch;
}
.phrase-trous .trou {
    display: inline-block;
    width: 68px;
    padding: .25rem .4rem;
    margin: 0 .1rem;
    text-align: center;
    font-weight: 600;
    vertical-align: baseline;
}
.phrase-trous .trou.large { width: auto; min-width: 11rem; text-align: left; }

/* LA CLAUSE RECOMPOSÉE, à relire à côté du contrat papier. Volontairement
   sobre : ce n'est pas une alerte, c'est une relecture. */
.clause-mots {
    margin-top: 1rem;
    padding: .85rem 1rem;
    background: var(--fond);
    border: 1px solid var(--bord);
    border-left: 3px solid var(--bord-fort);
    border-radius: var(--rayon-sm);
}
.clause-mots b { display: block; font-size: .82rem; color: var(--texte-3); margin-bottom: .35rem; }
.clause-mots p { margin: 0 0 .35rem; font-size: .95rem; line-height: 1.55; color: var(--texte); }

/* Un réglage qui ne pourra pas s'appliquer entièrement. Dit AVANT
   l'enregistrement : après, c'est une famille qui s'en aperçoit. */
/* UN AVERTISSEMENT A LA COULEUR DES AVERTISSEMENTS, et non a celle de la
   marque. Il portait le corail du logo — la meme couleur que le bouton
   principal et que l element ouvert dans les menus —, si bien qu un reglage a
   corriger ressemblait a quelque chose qu on venait de choisir. L ambre est le
   jeton prevu pour ca, et il ne servait nulle part. */
.alerte-reglage {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin-top: .7rem;
    padding: .8rem 1rem;
    background: var(--alerte-fond);
    border: 1.5px solid var(--alerte);
    border-radius: var(--rayon-sm);
}
.alerte-reglage svg { width: 19px; height: 19px; flex: none; color: var(--alerte); margin-top: .12rem; }
.alerte-reglage b { display: block; color: var(--alerte); margin-bottom: .15rem; }
.alerte-reglage span { display: block; font-size: .88rem; line-height: 1.5; color: var(--texte); }


/* UN RETRAIT ARMÉ. Le bouton a cédé la place à la conséquence et à deux
   boutons : le geste change, donc le réflexe ne suffit plus. */
.retrait-confirme {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: .4rem .55rem;
    background: var(--marque-clair);
    border: 1px solid var(--marque-action);
    border-radius: var(--rayon-sm);
    position: relative;
    z-index: 6;
    max-width: 22rem;
    box-shadow: var(--ombre);
}
.retrait-confirme .retrait-quoi {
    flex: 1 1 100%;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--texte);
    text-align: left;
    white-space: normal;
}

/* DANS UN TABLEAU, LA PHRASE DEBORDE SUR LES COLONNES VOISINES.

   Ces boutons vivent le plus souvent dans la derniere colonne, large de trois
   mots. Laissee dedans, la phrase s y empilait deux mots par ligne ; forcee a
   elargir la colonne, elle poussait le tableau au-dela de son cadre et
   « Confirmer » partait hors de l ecran — pile le bouton qu il faut viser.

   La marge negative laisse le panneau se peindre par-dessus les cellules d a
   cote sans elargir le tableau : il ne contribue a la largeur de la colonne
   que de la difference. */
.retrait-confirme.retrait-deborde {
    width: 17rem;
    margin-left: -11rem;
}

.legende { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--texte-3); max-width: 78ch; }
.btn.petit { padding: .32rem .6rem; font-size: .83rem; }
.totaux {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-left: auto;
    width: min(340px, 100%);
    font-size: .92rem;
}
.totaux > div { display: flex; justify-content: space-between; gap: 1rem; }
.totaux b { font-variant-numeric: tabular-nums; font-weight: 600; }
.totaux .rabais b { color: var(--succes); }
.totaux .total {
    border-top: 1px solid var(--bord-fort);
    margin-top: .3rem;
    padding-top: .5rem;
    font-size: 1.05rem;
}
.totaux .total b { font-weight: 700; }

.liste-responsables { display: flex; flex-direction: column; gap: .5rem; }

.responsable-ligne {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    background: var(--fond-2);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    padding: .65rem .8rem;
}
.responsable-qui { min-width: 170px; flex: 1; }
.responsable-qui b { display: block; font-weight: 600; font-size: .93rem; }
.responsable-qui span { display: block; font-size: .82rem; color: var(--texte-2); }

.responsable-lien { width: auto; min-width: 130px; padding: .35rem .55rem; font-size: .86rem; }

.responsable-case {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: .35rem !important;
    font-size: .83rem;
    color: var(--texte-2);
    white-space: nowrap;
    cursor: pointer;
}
/* Une case suivie d une explication : le texte revient a la ligne, et la case
   s aligne sur la premiere ligne plutot qu au milieu du paragraphe. */
.responsable-case.case-avec-aide { white-space: normal; align-items: flex-start; gap: .55rem !important; }
.responsable-case.case-avec-aide input { margin-top: .2rem; }

.responsable-case input { width: 15px; height: 15px; accent-color: var(--marque-action); }
.responsable-case > span { font-weight: 400 !important; color: var(--texte-2) !important; }

/* Les groupes invites a un cours : des cases sur une ligne, a la suite. */
.cases-groupes { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; padding: .25rem 0; }
.cases-groupes .point { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .25rem; vertical-align: 1px; }

@media (max-width: 720px) {
    .responsable-ligne { align-items: stretch; }
    .responsable-qui { min-width: 100%; }
}

/* ================= Documents remis a une famille =================
   Facture, recu, releve annuel. Meme gabarit, et une seule feuille de style :
   trois en-tetes recopies auraient diverge au premier demenagement du club. */

.document {
    max-width: 760px;
    margin: 0 auto;
    background: var(--fond-1);
    border: 1px solid var(--bord);
    border-radius: 12px;
    padding: 2.2rem 2.4rem;
}

.document-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 1.2rem;
    margin-bottom: 1.6rem;
    border-bottom: 2px solid var(--texte-1);
}

.document-emetteur { display: flex; align-items: flex-start; gap: .9rem; }
.document-emetteur > div { display: flex; flex-direction: column; gap: .1rem; }
.document-emetteur b { font-size: 1.05rem; }
.document-emetteur span { font-size: .8rem; color: var(--texte-2); }

.document-logo { width: 74px; height: auto; flex: none; }

.document-titre { text-align: right; display: flex; flex-direction: column; gap: .15rem; }
.document-titre h1 { font-size: 1.35rem; margin: 0; letter-spacing: -.01em; }
.document-titre span { font-size: .82rem; color: var(--texte-2); }
.document-numero { font-variant-numeric: tabular-nums; font-size: .95rem; }

/* Les blocs internes d un document : « Remis a », « Periode », totaux. */
.document-parties {
    display: flex;
    gap: 2.5rem;
    margin-bottom: 1.4rem;
}

.document-partie { display: flex; flex-direction: column; gap: .12rem; }
.document-partie > span:first-child {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texte-3);
}

.document table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.document thead th {
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texte-3);
    border-bottom: 1px solid var(--separateur);
    padding: .4rem .5rem;
}
.document tbody td { padding: .5rem; border-bottom: 1px solid var(--separateur); vertical-align: top; }
.document tfoot td { padding: .35rem .5rem; }
.document .montant { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.document .total-final td { border-top: 2px solid var(--texte-1); font-size: 1.02rem; font-weight: 650; }

.document-note {
    margin-top: 1.4rem;
    padding: .7rem .9rem;
    border-radius: 8px;
    background: var(--fond-2);
    font-size: .8rem;
    color: var(--texte-2);
}

.document-pied {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--separateur);
    font-size: .78rem;
    color: var(--texte-2);
}

.document-signature { margin-top: 2.2rem; font-size: .85rem; line-height: 1.5; }

.document-actions {
    max-width: 760px;
    margin: 1rem auto 0;
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* « À quelle adresse ? » — la ligne du comptoir. Elle se replie sous le champ
   sur un téléphone, où la secrétaire encaisse aussi. */
.document-envoi {
    max-width: 760px;
    margin: .6rem auto 0;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .6rem;
}
.document-envoi label { flex: 1 1 16rem; }
.document-envoi .legende { flex: 1 1 100%; margin: 0; }

/* Une action secondaire qui n a pas le poids d un bouton : « à une autre
   adresse » ne se dispute pas le geste avec « Envoyer par courriel ». */
.lien-discret {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: .86rem;
    color: var(--texte-2);
    text-decoration: underline;
    cursor: pointer;
}
.lien-discret:hover { color: var(--texte); }

/* ---- L impression ----
   Tout ce qui sert a NAVIGUER disparait : la barre laterale, les onglets, les
   boutons. Ce qui reste est la feuille qu on remet. */
@media print {
    @page { margin: 14mm; }

    body { background: #fff; }

    /* LE BANDEAU NOIR N EST PAS POUR LE PAPIER : il viderait une cartouche par
       feuille, et les feuilles de presence s impriment par dizaines. */
    .bloc-tete { background: #fff !important; color: #000 !important; border-bottom: 1px solid #ccc; }
    .bloc-tete h2 { color: #000 !important; }
    .bloc-tete p { color: #333 !important; }

    /* Les noms viennent de MainLayout : nav.barre, header.entete, main.contenu.
       Une premiere version les avait devines — et masquait des classes qui
       n existent pas, donc la barre laterale s imprimait. */
    /* .pied-marque est la signature de l APPLICATION, au meme titre que la
       barre laterale : sur un horaire punaise au vestiaire, elle fait de la
       feuille du club une publicite pour le logiciel. Ce qui identifie le
       document, c est le nom du dojo en tete. */
    nav.barre, header.entete, .menu-bascule, .menu-voile, .pied-marque,
    .onglets, .document-actions, .document-envoi, .btn, .bandeau { display: none !important; }

    .app, .principal, .contenu {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    .document {
        max-width: none;
        border: none;
        border-radius: 0;
        padding: 0;
        background: #fff;
    }

    /* Une ligne de tableau ne se coupe jamais entre deux pages. */
    .document tr, .document-note, .document-signature { break-inside: avoid; }

    /* Les couleurs d arriere-plan ne s impriment pas par defaut ; on s appuie
       donc sur les bordures, pas sur les aplats. */
    .document-note { background: none; border: 1px solid #999; }
}

/* ---- Le solde d un membre, en une phrase ----
   Trois totaux cote a cote obligeaient a calculer soi-meme la seule chose
   qu on demande : est-ce que c est paye ? */
.verdict-solde {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .7rem .9rem;
    border-radius: 10px;
    border: 1px solid var(--bord);
    background: var(--fond-2);
}

.verdict-solde b { font-size: 1.02rem; }
.verdict-solde span { font-size: .85rem; color: var(--texte-2); }

.verdict-solde.verdict-ok { border-color: var(--succes); background: var(--succes-fond); }
.verdict-solde.verdict-retard { border-color: var(--danger); background: var(--danger-fond); }

/* ---- L onglet Facturation d un dossier ----
   La reponse en une phrase, les gestes en boutons a cote. Chacun ouvre sa
   fenetre : un formulaire ouvert en permanence se lit comme quelque chose a
   remplir. Sur un telephone, les boutons passent sous la phrase. */
.resume-facturation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem 1rem;
}
.resume-facturation .verdict-solde { flex: 1 1 20rem; }
.resume-facturation-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.releves-dossier { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.releves-dossier .legende { margin: 0 .3rem 0 0; }

/* Une facture par ligne. Huit mois d abonnement faisaient huit cartes a trois
   boutons, avec leurs recus dessous : l onglet se lisait comme un grand livre.
   Le montant, l etat et UN bouton ; la fenetre de la facture porte le reste. */
.factures-dossier { gap: 0; }
.facture-ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: .35rem 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--separateur);
}
.facture-ligne:last-of-type { border-bottom: 0; }
.facture-ligne > div:first-child { min-width: 0; }
.facture-ligne b { display: block; font-weight: 600; }
.facture-ligne .doux { font-size: .82rem; }
.facture-ligne .montant { text-align: right; }

/* Sur un telephone : la periode sur toute la largeur, puis le montant, l etat
   et le bouton sur une seule ligne dessous. */
@media (max-width: 620px) {
    .facture-ligne { grid-template-columns: auto minmax(0, 1fr) auto; }
    .facture-ligne > div:first-child { grid-column: 1 / -1; }
    .facture-ligne .montant { text-align: left; }
    .facture-ligne > .btn { justify-self: end; }
}

/* Champ numerique court suivi d une unite (« 17 ans »). `.mini` n etait defini
   qu a l interieur d un `.palier`, donc « champ mini » ailleurs ne faisait rien
   et le champ prenait toute la largeur de son bloc. */
.champ.court { width: 92px; flex: none; }

/* Un choix a consequences : chaque option porte son effet sur deux lignes, donc
   la puce s aligne en HAUT du texte et non au milieu. Distinct de
   .responsable-case, qui est fait pour des cases d une seule ligne. */
.choix-rabais {
    border: 1px solid var(--bord);
    border-radius: 10px;
    padding: .7rem .85rem;
    margin: .5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.choix-rabais > legend {
    padding: 0 .35rem;
    font-size: .85rem;
    font-weight: 550;
    color: var(--texte-2);
}

.choix-option {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: .5rem;
    cursor: pointer;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--texte-2);
}

.choix-option input {
    width: 15px; height: 15px;
    margin-top: .18rem;
    flex: none;
    accent-color: var(--marque-action);
}

.choix-option b { color: var(--texte-1); font-weight: 600; }

/* TROIS RONDS PAREILS — santé, famille, argent : même taille, même icône blanche ;
   la couleur dit la gravité, l icône dit le sujet. Aligné le 19 septembre 2026. */
.puce-alerte {
    display: inline-grid;
    place-items: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    vertical-align: -3px;
    flex: none;
}
.puce-alerte svg { width: 12px; height: 12px; }
/* Les papiers manquants ou perimes : ambre, comme une echeance proche. */
.puce-docs {
    display: inline-grid;
    place-items: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--alerte);
    color: #fff;
    margin-left: .3rem;
    vertical-align: -3px;
    flex: none;
    cursor: help;
}
.puce-docs svg { width: 12px; height: 12px; }
.pastille-argent {
    display: inline-grid;
    place-items: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    flex: none;
}

/* ---------------- Mon compte ---------------- */

.option-donnees {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--separateur);
}
.option-donnees:last-child { border-bottom: 0; padding-bottom: 0; }
.option-donnees b { display: block; font-weight: 600; margin-bottom: .12rem; }
.option-donnees span { font-size: .87rem; color: var(--texte-2); max-width: 62ch; display: block; }
.option-donnees .btn { flex: none; }

@media (max-width: 620px) {
    .option-donnees { flex-direction: column; align-items: stretch; gap: .7rem; }
}

/* ---------------- Console editeur ---------------- */

/* Teinte distincte : on doit savoir en un coup d oeil qu on n est pas
   dans l application d un club. */
.barre-editeur { background: var(--fond-2); }
.barre-editeur .barre-logo { background: var(--fond); }
.avatar-editeur { background: var(--marque-action); color: #fff; }

.note-mandataire {
    display: flex;
    gap: .6rem;
    padding: .85rem .9rem;
    margin: .4rem .1rem;
    background: var(--fond);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    font-size: .78rem;
    line-height: 1.45;
    color: var(--texte-3);
}
.note-mandataire svg { width: 17px; height: 17px; flex: none; color: var(--succes); margin-top: .1rem; }

.flag-mandataire {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: var(--succes-fond);
    border: 1px solid color-mix(in srgb, var(--succes) 30%, transparent);
    border-radius: var(--rayon);
    padding: 1rem 1.15rem;
    font-size: .89rem;
    line-height: 1.55;
    color: var(--texte-2);
}
.flag-mandataire svg { width: 19px; height: 19px; flex: none; color: var(--succes); margin-top: .15rem; }
.flag-mandataire b { display: block; color: var(--texte); font-weight: 600; margin-bottom: .15rem; }

/* ---------------- Menu mobile ---------------- */

.menu-bascule { position: absolute; opacity: 0; pointer-events: none; }
.menu-bouton, .menu-voile { display: none; }

.menu-bouton {
    width: 40px; height: 40px;
    place-items: center;
    border-radius: var(--rayon-sm);
    color: var(--texte-2);
    cursor: pointer;
    margin-right: auto;   /* pousse les icones de droite a leur place */
}
.menu-bouton:hover { background: var(--fond-3); color: var(--texte); }
.menu-bouton svg { width: 22px; height: 22px; }
.menu-bascule:focus-visible + .barre ~ .principal .menu-bouton,
.menu-bouton:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; }

.entete-titre { display: none; font-weight: 600; font-size: .98rem; }

@media (max-width: 820px) {
    .barre {
        position: fixed;
        left: -100%;
        top: 0;
        z-index: 60;
        transition: left .22s ease;
        box-shadow: var(--ombre-md);
        width: min(290px, 84vw);
    }
    /* La case a cocher et la barre sont soeurs dans .app : c est ce qui
       permet de piloter l ouverture sans une ligne de JavaScript. */
    .menu-bascule:checked ~ .barre { left: 0; }

    .menu-bascule:checked ~ .menu-voile {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(16, 24, 40, .45);
    }

    .menu-bouton { display: grid; }
    .entete-titre { display: block; }
    .entete { justify-content: flex-start; gap: .6rem; padding: 0 .8rem; }

    .contenu { padding: 1.2rem 1.1rem 3rem; }

    /* Cibles tactiles : 44 px est le minimum confortable au doigt. */
    .nav-lien { padding: .72rem .8rem; font-size: .97rem; }
    .icone-btn { width: 42px; height: 42px; }
    .entete-photo img { width: 34px; height: 34px; }
    .btn { padding: .62rem 1rem; }

    /* Sous 16 px, iOS zoome automatiquement a la mise au point du champ. */
    .champ, .k-saisie { font-size: 16px; }

    .page-titre { font-size: 1.35rem; }
    .stat { font-size: 1.85rem; }
    .carte { min-height: 0; }
}

@media (max-width: 520px) {
    .portail-duo { grid-template-columns: minmax(0, 1fr); }
    .portail-boite { padding: 1.6rem 1.25rem 1.4rem; }
    .k-tete { flex-direction: column; gap: .5rem; }
    .k-compteur { text-align: left; }
    .barre-outils .recherche { max-width: none; }
}

/* Blazor */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--alerte-fond);
    color: var(--texte);
    padding: .8rem 1.2rem;
    box-shadow: 0 -1px 3px rgba(0,0,0,.15);
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* =====================================================================
   Parcours de demarrage d un nouveau club
   ===================================================================== */

.fil-etapes {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.1rem;
    margin: 0 0 1.4rem;
    padding: 0;
    font-size: .84rem;
    color: var(--texte-3);
}

.fil-etapes li { display: flex; align-items: center; gap: .42rem; }
.fil-etapes li.ici { color: var(--texte); font-weight: 600; }
.fil-etapes li.fait { color: var(--texte-2); }

.fil-etapes .pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--bord);
    font-size: .74rem;
    font-weight: 600;
    background: var(--fond-2);
}

.fil-etapes li.ici .pastille {
    background: var(--marque-action);
    border-color: var(--marque-action);
    color: #fff;
}

.fil-etapes li.fait .pastille {
    background: var(--succes-fond);
    border-color: var(--succes);
    color: var(--succes);
}

/* Apercu de la progression de ceintures : une rangee qui defile plutot qu un
   tableau, parce qu on ne la lit pas, on la reconnait. */
.rangee-ceintures {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.jeton-ceinture {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .6rem .28rem .38rem;
    border: 1px solid var(--bord);
    border-radius: 999px;
    background: var(--fond-2);
    font-size: .8rem;
    color: var(--texte-2);
    white-space: nowrap;
}

.jeton-ceinture .pastille-ceinture {
    width: 15px; height: 15px;
    border-radius: 4px;
}

/* Texte d aide sous un champ. Explique la consequence du reglage, pas le reglage. */
small.aide {
    display: block;
    margin-top: .3rem;
    font-size: .77rem;
    line-height: 1.45;
    font-weight: 400;
    color: var(--texte-3);
}

small.aide a { color: var(--marque-action); font-weight: 550; }
/* =====================================================================
   Onglets de parametres, depots de logo, choix radio
   ===================================================================== */

.onglets {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    border-bottom: 1px solid var(--separateur);
    margin: 1.1rem 0 1.3rem;
}

.onglet {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem .95rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-size: .9rem;
    font-weight: 550;
    color: var(--texte-3);
    cursor: pointer;
    margin-bottom: -1px;
}

.onglet:hover { color: var(--texte); }

.onglet.actif {
    color: var(--marque-action);
    border-bottom-color: var(--marque-action);
}

/* Combien il y en a — des documents, par exemple. Neutre, contrairement a la
   pastille d alerte : « 3 documents » est une information, pas un probleme. */
.onglet-compte {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--fond-3);
    color: var(--texte-2);
    font-size: .72rem;
    font-weight: 650;
}

.onglet.actif .onglet-compte {
    background: var(--marque-clair);
    color: var(--marque-action);
}

/* Compteur de ce qui manque. Sur l onglet, pour rester visible depuis les autres. */
.pastille-alerte {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--alerte);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

/* Marqueur de champ obligatoire. */
.requis { color: var(--marque-action); font-style: normal; font-weight: 700; }

.depot-logo { display: flex; flex-direction: column; gap: .5rem; }
.depot-titre { font-size: .85rem; font-weight: 550; color: var(--texte-2); }

.depot-apercu {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 104px;
    padding: .8rem;
    border: 1px dashed var(--bord);
    border-radius: 10px;
}

/* Chaque variante est jugee sur le fond ou elle servira, sinon l apercu ne
   prouve rien : c est justement le contraste qu on veut verifier. */
.apercu-pale { background: #FFFFFF; }
.apercu-fonce { background: #16181D; }

.depot-apercu img { max-width: 100%; max-height: 84px; object-fit: contain; }
.depot-vide { font-size: .82rem; color: var(--texte-3); }
.apercu-fonce .depot-vide { color: #7A828F; }

.choix-radio {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .2rem;
    cursor: pointer;
}

.choix-radio input { margin-top: .2rem; flex: none; }

.choix-radio > span {
    font-size: .87rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--texte-2);
}

.choix-radio b { color: var(--texte); font-weight: 600; }
/* Mentions facultatives d une case d horaire, choisies sur la page meme. */
.cases-affichage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .1rem .9rem;
}

/* Le niveau se lit comme une precision du nom, pas comme un deuxieme titre. */
.niveau-cours {
    font-weight: 400;
    color: var(--texte-2);
}
.niveau-cours::before { content: " · "; color: var(--texte-3); }

/* =====================================================================
   Creneaux d un cours : les jours ou il se donne
   ===================================================================== */

.creneaux {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .7rem .8rem;
    background: var(--fond-2);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
}

.creneaux-titre { font-size: .82rem; font-weight: 550; color: var(--texte-2); }

/* Une ligne par plage horaire, en largeurs FIXES plutot qu automatiques : la
   colonne du jour ne doit pas changer de taille entre « Lundi » et « Mercredi »,
   sinon les lignes cessent de s aligner verticalement d une plage a l autre.
   La requete media porte sur le conteneur, pas sur l ecran : le panneau vit dans
   une cellule de tableau, souvent bien plus etroite que la fenetre. */
.creneau-ligne {
    display: grid;
    grid-template-columns: 8rem 6.5rem auto 4.5rem auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .4rem;
    container-type: inline-size;
}

.creneau-sep { font-size: .8rem; color: var(--texte-3); white-space: nowrap; }

.creneaux .champ { padding: .35rem .5rem; font-size: .87rem; }

.creneau-ajout {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    padding-top: .15rem;
}

.creneaux { container-type: inline-size; }

@container (max-width: 640px) {
    .creneau-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .creneau-sep { display: none; }
}
/* Temoin de modification non enregistree. Depuis que les onglets de parametres
   sont des pages distinctes, quitter la page abandonne ce qui n est pas ecrit :
   le dire pendant l edition vaut mieux que de le decouvrir apres. */
.temoin-modifie {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-right: auto;
    font-size: .86rem;
    color: var(--alerte);
}

.point-modifie {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--alerte);
    flex: none;
}

/* Les onglets sont des liens depuis qu ils naviguent : ils heritent des styles
   de <a>, il faut leur rendre l apparence d onglet. */
a.onglet { text-decoration: none; }
/* Le nom du cours et son niveau : deux champs qu on lit d abord, et un nom
   long ne rentre pas dans la colonne de 160px de la grille commune. */
.champs-titre { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }

/* Un champ qui a besoin de deux colonnes de la grille automatique. */
.champs-edition > label.deux-colonnes { grid-column: span 2; }

.paire-champs { display: flex; gap: .4rem; align-items: center; }
.paire-champs .champ { min-width: 0; flex: 1; }
.jusqua { color: var(--texte-3); font-size: .85rem; flex: none; }

/* Marque discrete pour ce qui n est pas obligatoire : l inverse du marqueur
   rouge des champs requis, et pour la meme raison — le dire avant la saisie. */
.facultatif {
    font-weight: 400;
    font-size: .74rem;
    color: var(--texte-3);
    text-transform: lowercase;
}

@media (max-width: 700px) {
    .champs-titre { grid-template-columns: minmax(0, 1fr); }
    .champs-edition > label.deux-colonnes { grid-column: auto; }
}
/* =====================================================================
   Barre de semaine de l horaire
   ===================================================================== */

.barre-semaine {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .7rem .9rem;
    margin-bottom: 1rem;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
}

.semaine-titre { min-width: 0; }
.semaine-titre b { display: block; font-size: 1rem; font-family: var(--police-titre); }
.semaine-titre span { display: block; font-size: .8rem; color: var(--texte-3); }
.semaine-titre .etiquette { margin: 0 .3rem 0 0; }

/* Les saisons servent de raccourcis : on saute a leur premiere semaine plutot
   que de cliquer seize fois sur la fleche. */
.semaine-saisons { display: flex; gap: .35rem; flex-wrap: wrap; margin-left: auto; }

.barre-semaine .btn.petit { line-height: 1; }

/* La colonne du jour courant se distingue sans crier : un liligne suffit a
   retrouver « aujourd hui » dans sept colonnes identiques. */
.colonne-jour.jour-courant .entete-jour {
    background: var(--marque-clair);
    border-radius: var(--rayon-sm) var(--rayon-sm) 0 0;
}
.colonne-jour.jour-courant .entete-jour b { color: var(--marque-action); }

/* Une seance annulee reste VISIBLE : la masquer ferait croire qu elle n a
   jamais existe, alors que des familles s y attendaient. */
.carte-cours.cours-annule { opacity: .62; }
.carte-cours.cours-annule > b { text-decoration: line-through; }

.marques-cours { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.marques-cours:empty { display: none; }

.etiquette-alerte {
    background: var(--alerte-fond);
    border-color: var(--alerte);
    color: var(--alerte);
}

/* CE QUI A DEJA MAL TOURNE : un cheque que la banque a refuse. Distinct de
   l alerte, qui dit « ca attend » — un cheque en route et un cheque revenu
   n appellent pas du tout le meme geste. */
.etiquette-danger {
    background: var(--danger-fond);
    border-color: var(--danger);
    color: var(--danger);
}

/* CE QUI VA ARRIVER, pas ce qui est arrive. Distinct du rouge, et il le faut :
   une piece qui expire dans six semaines et une piece perimee n appellent pas
   le meme geste, et les peindre pareil ferait traiter les deux en urgence — ou,
   plus surement, aucune des deux. */
.etiquette-bientot {
    background: var(--fond-3);
    border-color: var(--jauge-plein);
    color: var(--jauge-plein);
}

/* Jauge sans donnee : la piste reste, la barre non. Un zero colore se lirait
   comme une mesure, alors qu on ne sait rien. */
.jauge-vide { width: 0; }

/* =====================================================================
   Journees : en-tete cliquable, fermetures
   ===================================================================== */

/* L en-tete devient un bouton sans en avoir l air : c est un titre de colonne
   avant d etre une commande, et lui donner l allure d un bouton alourdirait
   sept colonnes pour une action qu on ne fait qu occasionnellement. */
button.entete-jour {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.entete-jour:hover {
    background: var(--fond-3);
    border-radius: var(--rayon-sm) var(--rayon-sm) 0 0;
}

/* Une journee fermee garde ses cours VISIBLES, en retrait. Les masquer ferait
   croire qu il n y en a jamais eu, alors que des familles s y attendaient — et
   le motif, lui, doit rester lisible. */
.colonne-jour.jour-ferme .carte-cours { opacity: .45; }

.jour-ferme-motif {
    font-size: .76rem;
    font-weight: 600;
    color: var(--alerte);
    background: var(--alerte-fond);
    border: 1px solid var(--alerte);
    border-radius: var(--rayon-sm);
    padding: .2rem .45rem;
    margin-bottom: .4rem;
    text-align: center;
}

/* =====================================================================
   Les saisons d un cours, dans son panneau
   ===================================================================== */

.saisons-cours {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: .7rem 0 0;
    border-top: 1px solid var(--separateur);
}

/* Chaque saison est encadree : sans le cadre, les dates de l automne et
   celles de l hiver formaient une seule colonne de champs ou l on ne voyait
   plus ou l une finissait. */
.tenue-bloc {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .7rem;
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    background: var(--fond-1);
}

/* Retrait annonce mais pas encore execute : visible avant l enregistrement. */
.tenue-a-retirer {
    background: var(--marque-clair);
    opacity: .72;
}

.fermeture-saisie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .7rem;
}

.fermeture-saisie label { display: flex; flex-direction: column; gap: .3rem; }
.fermeture-saisie label > span { font-size: .82rem; font-weight: 550; color: var(--texte-2); }
/* =====================================================================
   Calendrier mensuel des evenements
   ===================================================================== */

.mois-tete {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--separateur);
}
.mois-tete b { font-family: var(--police-titre); font-size: 1rem; text-transform: capitalize; }
.mois-tete .legende-groupes { margin: 0; }

.mois {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--bord);
    padding: 1px;
}

.mois-jour-entete {
    background: var(--fond-2);
    padding: .4rem .5rem;
    font-size: .76rem;
    font-weight: 600;
    color: var(--texte-3);
    text-align: center;
}

.mois-case {
    background: var(--carte);
    min-height: 92px;
    padding: .35rem .4rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

/* Les jours du mois voisin restent VISIBLES mais en retrait : les masquer
   couperait une semaine en deux, et un evenement du 1er du mois suivant est
   justement ce qu on veut voir venir. */
.mois-case.hors-mois { background: var(--fond-2); }
.mois-case.hors-mois .mois-quantieme { color: var(--texte-3); }

.mois-case.mois-aujourdhui { background: var(--marque-clair); }
.mois-case.mois-aujourdhui .mois-quantieme { color: var(--marque-action); font-weight: 700; }

.mois-quantieme { font-size: .78rem; color: var(--texte-2); font-variant-numeric: tabular-nums; }

.jalon {
    display: block;
    font-size: .74rem;
    line-height: 1.25;
    padding: .18rem .3rem;
    border-left: 3px solid var(--texte-3);
    background: var(--fond-3);
    border-radius: 0 3px 3px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Un jalon d EVENEMENT se clique : il ouvre la fiche dans sa boite. C est un
   vrai bouton — le clavier l atteint — habille comme les autres jalons, sans
   le chrome d un bouton. Les cours hors abonnement restent de simples marques :
   ils ne se modifient pas ici. */
button.jalon-evenement {
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: .74rem;
    line-height: 1.25;
    color: inherit;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    cursor: pointer;
}
button.jalon-evenement:hover { background: var(--fond-2); }

@media (max-width: 760px) {
    .mois-case { min-height: 64px; }
    .jalon, button.jalon-evenement { font-size: .68rem; }
}
/* ================= La feuille de présence =================
   Un seul écran pour trois postures : la secrétaire au comptoir avec un vrai
   clavier, l instructeur debout avec une tablette, et le rattrapage après coup.
   D ou deux surfaces bonnes en meme temps plutot qu un mode a basculer — les
   lignes restent des cibles de doigt meme au comptoir, et la recherche reste la
   meme sur tablette, ou l on ne s en sert simplement pas. */

.feuille-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: .8rem 1rem;
    margin-top: .6rem;
    border: 1px solid var(--bord);
    border-radius: 10px;
    background: var(--fond-2);
}

.feuille-tete b { font-size: 1.1rem; display: block; }
.feuille-tete span { font-size: .85rem; color: var(--texte-2); }

.feuille-recherche {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-top: .8rem;
}

.feuille-recherche .champ { flex: 1; font-size: 1rem; padding: .6rem .8rem; }

/* Chaque ligne est une CIBLE DE DOIGT, y compris au comptoir. Vingt-deux lignes
   tiennent large ; la densite gagnee ne vaudrait pas les touchers ratés. */
.feuille-ligne { cursor: pointer; }
.feuille-ligne td { padding: .85rem .9rem; }
.feuille-ligne:hover { background: var(--fond-2); }

/* A droite de la vignette (.membre-ligne), la rangee prend ce qui reste : sans
   min-width 0, un nom long empecherait la ligne de retrecir sur un telephone. */
.feuille-nom { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.feuille-nom b { font-weight: 550; }

.feuille-etat {
    font-size: .85rem;
    color: var(--texte-2);
    margin-right: .5rem;
}

/* Une bande de couleur a gauche plutot qu un aplat : elle se lit d un coup d oeil
   sur une liste, sans rendre le texte moins lisible. */
.feuille-present { border-left: 4px solid var(--succes); }
.feuille-retard { border-left: 4px solid var(--alerte); }
.feuille-absent { border-left: 4px solid var(--bord); opacity: .62; }

.feuille-present .feuille-etat { color: var(--succes); font-weight: 550; }

/* Les pastilles de la feuille sont celles de la liste des membres — .puce-alerte
   et .puce-recup — pour que le club n ait pas deux symboles a apprendre. Elles
   disent qu il y a quelque chose a savoir, jamais quoi : le survol le donne.
   Dans la rangee du nom, un flex, les marges d alignement en ligne de la liste
   ne servent plus. */
.feuille-nom .puce-alerte, .feuille-nom .puce-recup { margin-left: 0; vertical-align: 0; cursor: help; }

/* LA BULLE AU DOIGT. Une tablette n a pas de survol, et l attribut title n y
   repond pas : un appui sur la pastille ouvre le meme texte SOUS le nom, dans
   la ligne — pas en flottant, la boite du tableau coupe ce qui en deborde et la
   derniere ligne perdrait sa bulle. Un second appui, ou un appui sur une ligne,
   la referme. */
/* Les pastilles sont des boutons : le clavier et le lecteur d ecran les
   atteignent, sans l habit d un bouton. */
button.puce-alerte, button.puce-recup { border: 0; padding: 0; font: inherit; cursor: pointer; }

.puce-bulle {
    display: block;
    margin-top: .35rem;
    font-size: .82rem;
    font-weight: 400;
    color: var(--texte);
    background: var(--fond-3);
    border: 1px solid var(--bord);
    border-radius: 8px;
    padding: .45rem .65rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
    cursor: default;
}

/* ---- Un champ nomme dans une barre d outils ----
   Les etiquettes de champ n etaient stylees qu a l interieur d un .bloc-corps ;
   dans une barre de filtres, le nom du champ ressortait a la taille du texte
   courant et pesait plus lourd que le champ lui-meme. */
.champ-bloc { display: flex; flex-direction: column; gap: .25rem; min-width: 10rem; }
.champ-bloc > span { font-size: .82rem; font-weight: 550; color: var(--texte-2); }

/* ---- La feuille de presence sur papier ----
   Elle sert quand la tablette est prise, le reseau tombe, ou que le cours a lieu
   dehors. On coche au crayon, on reporte apres.

   Tout y est en bordures et en noir : une imprimante de bureau ne sort pas les
   aplats de couleur, et une case grise qui ne s imprime pas devient une case
   invisible. */
.feuille-papier {
    background: var(--fond-1);
    border: 1px solid var(--bord);
    border-radius: 12px;
    padding: 1.2rem 1.3rem;
    margin-bottom: 1.4rem;
}

.feuille-papier-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    padding-bottom: .7rem;
    margin-bottom: .5rem;
    border-bottom: 2px solid var(--texte);
}

.feuille-papier-tete b { display: block; font-size: 1.05rem; }
.feuille-papier-tete span { display: block; font-size: .86rem; color: var(--texte-2); }

/* LA LIGNE A REMPLIR A LA MAIN, sur une feuille vierge. Plus grande que le
   reste de l entete : c est la premiere chose qu on ecrira, et une feuille dont
   la date se perd ne se classe plus. */
.feuille-papier-tete .feuille-papier-blanc {
    font-size: .98rem;
    color: var(--texte);
    letter-spacing: .02em;
    margin-bottom: .15rem;
}

.feuille-papier-table { width: 100%; border-collapse: collapse; }

.feuille-papier-table th {
    text-align: left;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texte-2);
    padding: .3rem .5rem;
    border-bottom: 1px solid var(--separateur);
}

/* Assez haut pour qu un crayon y entre : une ligne de tableau a l ecran fait
   la moitie de ce qu il faut pour ecrire un mot a la main. */
.feuille-papier-table td {
    padding: .42rem .5rem;
    border-bottom: 1px solid var(--separateur);
    height: 1.55rem;
    font-size: .92rem;
}

.feuille-papier-table .rang { color: var(--texte-3); font-size: .8rem; width: 2.2rem; }
.feuille-papier-table th.case, .feuille-papier-table td.case { width: 2.4rem; text-align: center; }

/* La case a cocher : un carre vide, dessine a la bordure. */
.feuille-papier-table td.case::before {
    content: "";
    display: inline-block;
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid var(--texte-3);
    border-radius: 3px;
    vertical-align: middle;
}

/* Les lignes libres : l essai du samedi, le visiteur d un autre groupe. */
.feuille-papier-table tr.libre td { color: var(--texte-3); }

/* Un symbole, jamais le detail. Une feuille de presence traine sur un comptoir :
   la liste des allergies n a rien a y faire, le dossier la porte. */
.feuille-papier-alerte {
    display: inline-block;
    margin-left: .35rem;
    padding: 0 .3rem;
    border: 1px solid var(--texte);
    border-radius: 4px;
    font-size: .78rem;
    line-height: 1.3;
}

.feuille-papier-pied {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .6rem;
    font-size: .74rem;
    color: var(--texte-3);
}

@media print {
    /* Une feuille par page : deux cours sur le meme papier se melangent des
       qu on le pose sur le comptoir. La derniere ne casse pas, sinon
       l imprimante sort une page blanche. */
    .feuille-papier {
        border: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
        background: #fff;
        break-after: page;
    }

    .feuille-papier:last-of-type { break-after: auto; }

    /* Une ligne ne se coupe jamais entre deux pages, et l en-tete se repete
       en haut de chaque page d une longue liste. */
    .feuille-papier-table tr { break-inside: avoid; }
    .feuille-papier-table thead { display: table-header-group; }

    .feuille-papier-tete b, .feuille-papier-tete span,
    .feuille-papier-table td, .feuille-papier-pied { color: #000; }

    .feuille-papier-table th { color: #333; }
    .feuille-papier-table td, .feuille-papier-table th { border-bottom-color: #bbb; }
    .feuille-papier-table td.case::before { border-color: #444; }
}

/* Ce qui appartient a l ecran et non au papier : les filtres, les messages
   d attente. Distinct de .document-actions, qui est une rangee de boutons de
   760 px — s en servir pour masquer deformait la mise en page a l ecran. */
@media print { .hors-impression { display: none !important; } }

/* ---- L etat d une feuille de presences, en pastille ----
   Elle reprend le feu de circulation deja employe pour le remplissage : meme
   echelle, memes teintes, rien de nouveau a apprendre.

   Le mot reste a cote. Un homme sur douze confond le rouge et le vert — cette
   paire precisement — et la colonne lui serait muette. */
.feuille-etat-pastille {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-right: .5rem;
    font-size: .87rem;
    color: var(--texte-2);
}

.pastille-feuille { width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* La légende des pastilles, sous les boutons d une liste : chaque symbole suivi de son mot. */
/* LA LÉGENDE, repliée par défaut : un titre sur sa ligne, une flèche, et les
   symboles en dessous quand on l ouvre. Demande d Hakim, 19 septembre 2026. */
details.legende-pastilles {
    margin: -.5rem 0 1rem;
    font-size: .78rem;
    color: var(--texte-3);
}
details.legende-pastilles > summary {
    cursor: pointer;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .68rem;
    list-style: none;
    display: flex; align-items: center; gap: .4rem;
}
details.legende-pastilles > summary::-webkit-details-marker { display: none; }
details.legende-pastilles > summary::before { content: "▸"; font-size: .8rem; transition: transform .15s; }
details.legende-pastilles[open] > summary::before { transform: rotate(90deg); }
details.legende-pastilles > .legende-lignes {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1rem;
    margin: .4rem 0 0;
    align-items: center;
}
details.legende-pastilles > .legende-lignes > dt { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .68rem; }
details.legende-pastilles > .legende-lignes > dd { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
details.legende-pastilles > .legende-lignes > dd > span { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }

.pastille-faite   { background: var(--jauge-creux); }
.pastille-partiel { background: var(--jauge-normal); }
.pastille-manque  { background: var(--jauge-plein); }
.pastille-attente { background: var(--bord-fort); }

.stat-note .hausse { color: var(--succes); font-weight: 550; }
.stat-note .baisse { color: var(--jauge-plein); font-weight: 550; }
.stat-note a.baisse { text-decoration: none; }
.stat-note a.baisse:hover { text-decoration: underline; }

/* ---- La bascule clair / sombre ----
   Les deux icones vivent dans le bouton ; le theme decide laquelle se montre.
   Le bouton est en `display: grid`, ou deux enfants s empileraient sur deux
   rangees : c est `display: none` qui les departage, pas l opacite. */
#bascule-theme .karateka-sombre { display: none; }
:root[data-theme="sombre"] #bascule-theme .karateka-clair { display: none; }
:root[data-theme="sombre"] #bascule-theme .karateka-sombre { display: block; }

/* Le karateka est une image, pas un trait : il ne suit pas `currentColor` et
   ne doit donc pas heriter du dimensionnement des SVG voisins. Un peu plus
   grand qu eux — une silhouette pleine pese moins qu un contour a la meme
   taille — et un rien de transparence pour qu il ne crie pas plus fort que les
   deux icones qui l entourent. */
#bascule-theme img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: .82;
    transition: opacity .15s ease;
}
#bascule-theme:hover img { opacity: 1; }

/* Un intertitre DANS un tableau : « Necessaire au service », « Facultatif ».
   Il regroupe des lignes plutot que d en etre une, d ou l absence de bordure
   haute et le fond legerement pose. */
.ligne-categorie td {
    background: var(--fond-2);
    padding: .55rem .9rem .3rem;
    border-bottom: 1px solid var(--separateur);
}
.ligne-categorie b { font-size: .85rem; }
.ligne-categorie .doux { font-size: .82rem; }

/* ---- La grille tarifaire, dans la console SuperAdmin ----
   Ces classes etaient employees par l ecran Abonnements sans exister nulle
   part : les plans s affichaient en texte nu, empiles. */
.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .8rem;
    margin-bottom: 1.2rem;
}

.plan {
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    background: var(--fond-1);
    padding: 1.1rem 1.05rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .3rem;
}

/* L illustration du plan : un medaillon rond, sur fond blanc meme en theme
   sombre — les dessins ont un fond blanc, et un rond blanc assume vaut mieux
   qu un carre blanc qui flotte. */
.plan-image {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--bord);
    display: grid;
    place-items: center;
    margin-bottom: .35rem;
}

.plan-image img { width: 86%; height: 86%; object-fit: contain; }

.plan-tranche { font-size: .84rem; font-weight: 650; }

/* Une seule carte (le VIP) : elle garde sa largeur de carte au lieu de s etirer
   sur toute la grille. */
.plans-seul { grid-template-columns: minmax(170px, 240px); }



/* « featured » : le plan a mettre en avant. AUCUN emploi dans la console —
   se vendre son propre produit n a pas de sens — mais la classe reste pour la
   page de vente publique, le jour ou elle existera. */
.plan.featured { border-color: var(--marque-action); }

.plan-name { font-size: .95rem; font-weight: 650; color: var(--marque-action); }

.plan-price {
    font-family: var(--police-titre);
    font-size: 1.45rem;
    font-weight: 650;
    letter-spacing: -.02em;
}

.plan-price small { font-size: .8rem; font-weight: 450; color: var(--texte-3); }
.plan p { margin: 0; font-size: .86rem; color: var(--texte-2); }

/* ---- La liste des membres, sur la maquette d Hakim ----
   La vignette, le titre et le nom, « inscrit depuis », puis la ceinture EN
   BARRE : c est le langage visuel d un dojo — une ceinture se reconnait de
   loin bien avant que son nom se lise. */
.membre-ligne { display: flex; align-items: center; gap: .8rem; }

.membre-vignette {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 1px solid var(--bord);
    background: var(--fond-3);
}

.vignette-initiales {
    display: grid;
    place-items: center;
    font-weight: 650;
    font-size: .9rem;
    color: var(--texte-2);
    letter-spacing: .02em;
}

.membre-identite { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.membre-identite b { font-size: .95rem; }
.membre-identite .doux { font-size: .8rem; }

/* La bordure rend visibles les ceintures blanches et jaunes, qui sinon se
   fondent dans la page. Les barrettes s alignent a droite, comme sur la
   vraie : l extremite ou se cousent les grades. */
.barre-ceinture {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 3px;
    width: 150px;
    height: 11px;
    border-radius: 99px;
    border: 1px solid rgba(0, 0, 0, .18);
    padding: 0 10px 0 0;
    box-sizing: border-box;
    margin: .1rem 0;
}

.barre-ceinture i { width: 5px; border-radius: 1px; margin: 1px 0; }

/* ---- Progression : les barres d exigences ---- */
/* CHAQUE EXIGENCE SE NOMME ET SE CHIFFRE. Trois barres de couleur cote a
   cote ne disaient laquelle est laquelle que dans une infobulle, et on ne
   survole pas les cases d un tableau qu on balaie. Une ligne par exigence :
   son nom, sa jauge, ses chiffres. */
.prog-exigences { display: flex; flex-direction: column; gap: 3px; min-width: 230px; }

.prog-exigence {
    display: grid;
    grid-template-columns: 68px 1fr auto;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    color: var(--texte-3);
}
.prog-exigence .prog-piste {
    height: 6px;
    border-radius: 99px;
    background: var(--fond-3);
    overflow: hidden;
}
.prog-exigence i { display: block; height: 100%; border-radius: 99px; background: var(--texte-3); }
.prog-exigence .prog-valeur { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Faite : elle ne retient plus personne. Bloquante : c est celle qu on vient
   chercher, et la seule qui merite une couleur. */
.prog-exigence.faite i { background: var(--succes); }
.prog-exigence.bloque i { background: var(--danger); }
.prog-exigence.bloque .prog-nom,
.prog-exigence.bloque .prog-valeur { color: var(--danger); font-weight: 600; }



/* ---------------- Boutique : etalage du comptoir ---------------- */
/* Des boutons assez grands pour un doigt presse entre deux cours : toucher
   un article l ajoute au panier, le prix affiche est celui qu on annonce. */
.etalage {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .6rem;
}
.etalage-article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    text-align: left;
    padding: .7rem .85rem;
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    background: var(--carte);
    cursor: pointer;
}
.etalage-article:hover { background: var(--fond-3); border-color: var(--accent); }
.etalage-article b { font-size: .95rem; }
.etalage-article .doux { font-size: .8rem; }
.etalage-article .montant { margin-top: .15rem; }

/* ---------------- Rapports ---------------- */
/* Une rangee de chiffres cles, puis le detail nominatif. Les cartes du tableau
   de bord font 200 px de haut : bonnes pour un coup d oeil quotidien, trop
   hautes quand il en faut quatre au-dessus d un tableau. */
.chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .7rem;
    margin-bottom: 1.1rem;
}
.chiffre {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    box-shadow: var(--ombre);
    padding: .8rem .95rem;
}
.chiffre b {
    display: block;
    font-size: .8rem;
    font-weight: 550;
    color: var(--texte-2);
    margin-bottom: .25rem;
}
.chiffre .valeur {
    font-family: var(--police-titre);
    font-size: 1.65rem;
    font-weight: 650;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.chiffre .note { display: block; font-size: .78rem; color: var(--texte-2); margin-top: .2rem; }

/* Ce que l absence dit. Le vert n existe pas : « assidu » n a pas besoin d etre
   signale, et une liste ou tout est colore ne signale plus rien. */
/* Un CONTOUR de la meme couleur que le texte, pas seulement un fond teinte :
   sur une liste de vingt lignes, une pastille sans bord se fond dans le
   tableau et on cherche du regard ce qui manque. Le trait la detache. */
.signal { display: inline-flex; align-items: center; font-size: .76rem; font-weight: 550;
          padding: .1rem .45rem; border-radius: 99px; white-space: nowrap;
          background: var(--fond-3); color: var(--texte-2);
          border: 1px solid var(--bord-fort); }
.signal-ok { background: var(--succes-fond); color: var(--succes); border-color: var(--succes); }
.signal-ralenti { background: var(--alerte-fond); color: var(--alerte); border-color: var(--alerte); }
.signal-decroche, .signal-jamais { background: var(--danger-fond); color: var(--danger); border-color: var(--danger); }

/* La periode et le nom du rapport n existent qu au papier : a l ecran, les
   onglets et la barre de periode les disent deja. Une feuille imprimee qui ne
   dit pas ce qu elle couvre ne vaut rien dans un classeur. */
.papier-seulement { display: none; }

@media print {
    .papier-seulement { display: block; margin-bottom: 1rem; }
    .papier-seulement h2 { font-size: 1.15rem; font-weight: 650; }
    .papier-seulement p { font-size: .85rem; color: #333; }

    /* Les chiffres cles restent — c est le resume du rapport — mais a plat :
       les ombres et les fonds gris devorent l encre. */
    .chiffres { grid-template-columns: repeat(4, 1fr); gap: .5rem; }
    .chiffre { background: #fff; border-color: #bbb; }
    .chiffre .valeur, .chiffre b, .chiffre .note { color: #000; }

    .signal { background: none !important; color: #000 !important; padding: 0; font-weight: 600; }

    .tableau-boite { border: none; }
    .liste tr { break-inside: avoid; }
    .liste thead { display: table-header-group; }
    .liste td, .liste th { color: #000; border-bottom-color: #bbb; }
}

/* ---------------- Boutique : vente au comptoir ---------------- */
/* L etalage a gauche, le panier a droite et TOUJOURS visible : le total est ce
   qu on annonce a voix haute, et le chercher en defilant fait perdre la vente. */
.vente-deux {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
    gap: 1.1rem;
    align-items: start;
}
.panier-boite {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 1rem;
    position: sticky;
    top: 1rem;
}
.panier-titre { font-size: .95rem; font-weight: 600; color: var(--texte-2); }
.panier-totaux { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.panier-totaux > div { display: flex; justify-content: space-between; gap: 1rem; }
.panier-totaux > div > span { color: var(--texte-2); }
.panier-total {
    border-top: 1px solid var(--separateur);
    margin-top: .3rem;
    padding-top: .4rem;
    font-size: 1.05rem;
}
.panier-total b { font-family: var(--police-titre); font-size: 1.25rem; }

.acheteur-choisi {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border-radius: var(--rayon-sm);
    background: var(--fond-2);
    border: 1px solid var(--bord);
}
.acheteur-choisi b { display: block; font-size: .92rem; }
.acheteur-choisi .doux { display: block; font-size: .8rem; }
.acheteur-choisi > button { margin-left: auto; }

/* La vignette d un produit dans la liste. Sans photo, l initiale : une case
   vide ferait croire a une image qui n a pas charge. */
.vignette-produit {
    width: 2.4rem;
    height: 2.4rem;
    object-fit: cover;
    border-radius: var(--rayon-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vignette-vide {
    background: var(--fond-3);
    color: var(--texte-3);
    font-weight: 600;
    font-size: .95rem;
}

/* Sur un ecran etroit — une tablette au comptoir — le panier repasse dessous
   et cesse d etre colle : deux colonnes de 8 rem ne se lisent plus. */
@media (max-width: 900px) {
    .vente-deux { grid-template-columns: minmax(0, 1fr); }
    .panier-boite { position: static; }
}

/* La vignette d un article au comptoir : a cote du nom, pour que la tuile garde
   sa hauteur et que tout le catalogue tienne sur un ecran. */
.etalage-tete { display: flex; align-items: center; gap: .55rem; width: 100%; }
.etalage-photo {
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    object-fit: cover;
    border-radius: var(--rayon-sm);
}


/* ---------------------------------------------------------------------------
   TABLEAU DE BORD — un chiffre qui MENE quelque part.

   Le chiffre cliquable ne se distingue pas par une couleur de lien : la valeur
   doit rester lisible comme un nombre. C'est le survol qui le dit, plus la
   fleche qui apparait — assez pour qu'on essaie, pas assez pour qu'une grille
   de six cartes devienne un menu.
   --------------------------------------------------------------------------- */
a.chiffre-lien {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color .12s, background .12s;
}
a.chiffre-lien:hover {
    border-color: var(--marque-action);
    background: var(--fond-2);
}
a.chiffre-lien b::after {
    content: " →";
    opacity: 0;
    transition: opacity .12s;
}
a.chiffre-lien:hover b::after { opacity: .55; }

/* Des BARRES et non une courbe : chaque semaine, chaque mois est un fait
   distinct, et une ligne qui relie huit points laisse croire a une continuite
   entre deux mardis. La valeur est ecrite AU-DESSUS de la barre — lire une
   hauteur ne donne pas un nombre, et c'est le nombre qu'on vient chercher. */
.tb-barres {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    min-height: 130px;
}
.tb-barre {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    min-width: 0;
}
.tb-barre > b {
    font-size: .76rem;
    font-weight: 600;
    color: var(--texte-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tb-colonne {
    display: block;
    width: 100%;
    max-width: 3.2rem;
    border-radius: var(--rayon-sm) var(--rayon-sm) 0 0;
    background: var(--data-1);
}
.tb-etiquette {
    font-size: .72rem;
    color: var(--texte-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Les memes jauges, mais la derniere colonne porte des MONTANTS.
   34px suffisent a « 26 » ; « 33 240 $ » s y cassait en deux lignes, le
   symbole tombant sous les chiffres. */
.ceintures-montants .ceinture-ligne {
    grid-template-columns: 7rem minmax(0, 1fr) 6.5rem;
}
.ceintures-montants .ceinture-ligne .compte { white-space: nowrap; }

/* La ligne de NATURE, en tete de son groupe d articles.
   Un fond a peine marque et un filet au-dessus : assez pour que l oeil sache
   ou commence un bloc, pas assez pour concurrencer le total final. */
.liste tr.ligne-nature > td {
    background: var(--fond-2);
    border-top: 1px solid var(--bord-fort);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.liste tbody:first-of-type tr.ligne-nature > td { border-top: none; }

/* Le NOM d un article deplie ses tailles. Un chevron seul se cherche du
   regard ; le nom entier est la cible qu on vise, et le bouton se fond dans
   la cellule pour ne pas ressembler a une action de plus. */
.lien-deplier {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}
.lien-deplier:hover b { color: var(--marque-action); }
.lien-deplier .chevron {
    display: inline-block;
    color: var(--texte-3);
    transition: transform .12s;
    font-size: 1.05rem;
    line-height: 1;
}
.lien-deplier .chevron.ouvert { transform: rotate(90deg); }

/* Le chevron d une LIGNE entiere qui se deplie — la ligne est la cible, pas le
   chevron : il annonce, il ne se vise pas. */
.chevron-ligne {
    display: inline-block;
    margin-right: .35rem;
    color: var(--texte-3);
    font-size: 1.05rem;
    line-height: 1;
    transition: transform .12s;
}
.chevron-ligne.ouvert { transform: rotate(90deg); }

/* La ligne d une taille, sous son article : un fond a peine marque suffit a
   dire qu elle lui appartient. */
.liste tr.ligne-taille > td { background: var(--fond-2); }

/* Le panneau d ajustement porte deux gestes : compter ce qui est sur la
   tablette, et noter ce qui est en route. Un titre par colonne, discret —
   sans lui les deux blocs se lisent comme un seul formulaire. */
.panneau-edition .panneau-titre {
    font-size: .82rem;
    font-weight: 600;
    color: var(--texte-2);
    margin: 0 0 .5rem;
}
/* La reception se detache : c est le geste qui fait entrer du stock, et il ne
   doit pas se confondre avec la saisie de la commande juste au-dessus. */
.panneau-reception {
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px dashed var(--bord-fort);
}

/* ---------------------------------------------------------------------------
   LES ÉTIQUETTES DE TABLETTE.

   Une grille a l ecran pour se relire, des vignettes calibrees au papier a
   l impression. Dessin AU TRAIT et jamais a l aplat : les fonds ne s impriment
   pas par defaut, et une etiquette dont le cadre serait un aplat sortirait
   blanche.
   --------------------------------------------------------------------------- */
.planche-etiquettes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .6rem;
}
/* PORTEE A LA PLANCHE, et pas au mot « etiquette » en general.

   Cette regle s appelait « .etiquette » tout court. Plus bas dans la feuille
   que la petite pastille du meme nom — « Hors abonnement », « Retire », un
   prix —, elle la remplacait PARTOUT dans l application : chaque mention se
   dessinait en boite encadree de trente-cinq pixels de haut, au milieu d une
   ligne de tableau. Deux choses sans rapport portaient le meme nom, et la
   derniere ecrite gagnait. */
.planche-etiquettes .etiquette {
    border: 1px solid var(--bord-fort);
    border-radius: var(--rayon-sm);
    padding: .5rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    background: var(--carte);
    break-inside: avoid;
}
.etiquette-nom {
    font-size: .82rem;
    line-height: 1.25;
    font-weight: 600;
}
.etiquette-prix {
    font-family: var(--police-titre);
    font-size: 1.15rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.etiquette-code { margin-top: auto; }
.etiquette-code svg { display: block; width: 100%; height: auto; }
.etiquette-lisible {
    display: block;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: .68rem;
    letter-spacing: .06em;
    color: var(--texte-2);
    text-align: center;
}

@media print {
    /* Des vignettes en MILLIMETRES : c est du papier a etiquettes, et une
       largeur en rem suivrait la taille de police du navigateur. */
    @page { margin: 8mm; }

    .planche-etiquettes {
        display: grid;
        grid-template-columns: repeat(auto-fill, 48mm);
        gap: 3mm;
    }

    /* SCOPÉES À LA PLANCHE. « etiquette » sert de petite pastille partout
       dans l app — un niveau de cours, une saison, un statut. Sans le
       prefixe, imprimer n importe quel ecran transformait chacune de ces
       pastilles en vignette autocollante de 48 x 28 mm : une liste de
       cours sortait en cases vides geantes. */
    .planche-etiquettes .etiquette {
        width: 48mm;
        min-height: 28mm;
        border: 1px solid #000;
        border-radius: 0;
        background: #fff;
        color: #000;
        padding: 2mm;
    }

    .planche-etiquettes .etiquette-nom, .planche-etiquettes .etiquette-prix,
    .planche-etiquettes .etiquette-lisible { color: #000; }

    /* Le symbole garde sa LARGEUR REELLE : etire, les rapports 1:2:3:4 se
       deforment et la douchette decroche. C est la seule regle de cette feuille
       qui decide si l etiquette sert a quelque chose. */
    .planche-etiquettes .etiquette-code svg { width: auto; max-width: 100%; height: 12mm; }
}

/*
    L'ENCADRÉ « COMMENT ÇA MARCHE ».

    Réservé aux écrans dont on ne peut pas deviner l'effet en les regardant —
    celui qui décide si le logiciel écrit aux familles à la place du club. Ce
    n'est pas une aide de champ : c'est ce qui permet d'oser cocher.
*/
.explication {
    background: var(--fond-2, #f6f7f9);
    border: 1px solid var(--bord, #e5e7eb);
    border-radius: var(--rayon);
    padding: .9rem 1.1rem;
    margin: 0 0 1rem;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--texte-2);
}

/* UNE EXPLICATION QUI SE REPLIE. Quatre paragraphes ouverts en tete d une
   carte repoussent sous l ecran les reglages qu on vient faire. Le titre
   reste visible et sert de poignee ; le texte est a un clic. */
details.explication-pliable > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    color: var(--texte);
}
details.explication-pliable > summary::-webkit-details-marker { display: none; }
details.explication-pliable > summary::before {
    content: "\25B8";
    color: var(--texte-3);
    transition: transform .15s;
}
details.explication-pliable[open] > summary::before { transform: rotate(90deg); }
details.explication-pliable[open] > summary { margin-bottom: .7rem; }

.explication p { margin: 0 0 .5rem; max-width: 78ch; }
.explication p:last-child { margin-bottom: 0; }
.explication b { color: var(--texte); }
.explication ul { margin: 0; padding-left: 1.1rem; }
.explication li { margin: .2rem 0; max-width: 78ch; }

/*
    L'ÉTIQUETTE « SENSIBLE », avec son cadenas.

    Le mot seul est celui de la loi ; le cadenas se reconnaît sans lecture.
    La couleur d'alerte plutôt que le gris des autres étiquettes : ce n'est pas
    une catégorie, c'est un avertissement.
*/
.etiq-sensible {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    color: var(--alerte);
    background: var(--alerte-fond);
    cursor: help;
}

.etiq-sensible svg { width: .78em; height: .78em; }

/* ---------------- Aide ---------------- */

/* Le sommaire saute a une section sans quitter la page. Il disparait pendant
   une recherche : il designerait des sections que le filtre vient de vider. */
.aide-sommaire { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.4rem 0 1.4rem; }
.aide-sommaire a {
    font-size: .85rem;
    font-weight: 550;
    color: var(--texte-2);
    background: var(--fond-2);
    border: 1px solid var(--bord);
    border-radius: 999px;
    padding: .38rem .8rem;
    text-decoration: none;
}
.aide-sommaire a:hover { background: var(--fond-3); color: var(--texte); }

.aide-compte { font-size: .85rem; color: var(--texte-3); }

/* Chaque entree est un paragraphe autonome : un filet a gauche separe sans
   decouper la lecture, la ou une puce ferait une liste de courses. */
.aide-corps { gap: 1.35rem; }
.aide-item { border-left: 2px solid var(--bord); padding-left: .95rem; }
.aide-item h3 { font-size: .95rem; font-weight: 600; margin: 0 0 .3rem; }
.aide-item p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--texte-2); max-width: 78ch; }

/* Lire ne suffit pas : chaque explication mene a l ecran dont elle parle. */
.aide-aller {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .55rem;
    font-size: .84rem;
    font-weight: 550;
    color: var(--marque-action);
    text-decoration: none;
}
.aide-aller:hover { text-decoration: underline; }
.aide-aller svg { width: 13px; height: 13px; }

/* Le jaune du navigateur devient illisible en theme sombre. */
.aide-item mark {
    background: color-mix(in srgb, var(--marque-action) 24%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 .12em;
}

@media print {
    /* Sur papier un lien ne mene nulle part, et une entree coupee en deux se
       relit mal. */
    .aide-aller, .aide-sommaire, .aide-compte { display: none !important; }
    .aide-item { break-inside: avoid; }
}

/* Une section rejointe par le sommaire ne colle pas au bord du cadre. */
.aide-section { scroll-margin-top: 1rem; }

/* ---------------- Aide : depannage, exemples, etat ---------------- */

/* Le « ? » d un ecran. Discret par construction : il ne dispute pas
   l attention au bouton qui fait le travail de la page. */
.aide-appel {
    display: inline-flex;
    align-items: center;
    margin-left: .45rem;
    color: var(--texte-3);
    vertical-align: middle;
    text-decoration: none;
}
.aide-appel:hover { color: var(--marque-action); }
.aide-appel svg { width: 17px; height: 17px; }

/* La banniere de l aide contextuelle : ou l on est, et comment en sortir. */
.aide-cadre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
    padding: .6rem .9rem;
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    background: var(--fond-2);
    font-size: .87rem;
    color: var(--texte-2);
}
.aide-cadre a { color: var(--marque-action); font-weight: 550; text-decoration: none; }
.aide-cadre a:hover { text-decoration: underline; }

/* Les causes d un symptome : une liste, dans l ordre ou il faut verifier. */
.aide-causes { margin: .55rem 0 0; padding-left: 1.05rem; max-width: 78ch; }
.aide-causes li {
    margin-bottom: .35rem;
    font-size: .89rem;
    line-height: 1.55;
    color: var(--texte-2);
}
.aide-causes li::marker { color: var(--texte-3); }

/* Un geste se lit en etapes numerotees ; « a savoir » se detache du texte
   sans crier — c est une note, pas une alerte. */
.aide-etapes { margin: .55rem 0 0; padding-left: 1.3rem; max-width: 78ch; }
.aide-etapes li { font-size: .9rem; line-height: 1.55; color: var(--texte-2); margin: .2rem 0; }
.aide-etapes li::marker { color: var(--marque-action); font-weight: 600; }
.aide-asavoir { margin-top: .55rem !important; padding: .5rem .75rem; border-radius: var(--rayon-sm); background: var(--fond-2); }
.aide-asavoir b { color: var(--texte); font-weight: 600; margin-right: .2rem; }
.aide-etat { margin-bottom: 1.35rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--separateur); }
.aide-etat h3 { font-size: .95rem; font-weight: 600; margin: 0 0 .3rem; }
.aide-etat > p { margin: 0 0 .7rem; font-size: .9rem; color: var(--texte-2); max-width: 78ch; }

/* Un exemple chiffre se detache du texte : c est une demonstration, pas la
   suite du paragraphe. */
.aide-exemple {
    margin-top: .85rem;
    padding: .9rem 1rem 1rem;
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    background: var(--fond-2);
}
.aide-exemple-etiq {
    display: inline-block;
    font-size: .68rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--texte-3);
    margin-bottom: .35rem;
}
.aide-exemple h4 { font-size: .9rem; font-weight: 600; margin: 0 0 .3rem; }
.aide-exemple > p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--texte-2); max-width: 78ch; }
.aide-exemple-note { margin-top: .7rem !important; }

/* Un tableau large defile dans sa boite : la page, elle, ne bouge pas. */
.aide-tableau { overflow-x: auto; margin: .75rem 0 0; }
.aide-tableau table { font-size: .85rem; }
.aide-tableau th { font-weight: 600; vertical-align: bottom; }
.aide-tableau td { white-space: nowrap; }
.aide-plein { color: var(--texte-3); font-style: italic; }

/* Ce qui reste a regler. Un club en ordre ne voit jamais ce bloc. */
.aide-assistant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem .95rem;
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    background: var(--fond-2);
    font-size: .88rem;
    color: var(--texte-2);
}
.aide-reglages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.aide-reglages li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .7rem 0;
    border-bottom: 1px solid var(--separateur);
}
.aide-reglages li:last-child { border-bottom: none; padding-bottom: 0; }
.aide-reglages b { display: block; font-size: .9rem; font-weight: 600; }
.aide-reglages span { display: block; font-size: .85rem; color: var(--texte-2); margin-top: .12rem; max-width: 70ch; }

@media print {
    /* Le « ? », la banniere et la liste des reglages ne servent qu a l ecran. */
    .aide-appel, .aide-cadre, .aide-etat { display: none !important; }
    .aide-exemple { break-inside: avoid; background: none; }
}

/* Le total ferme l exemple, hors du tableau : en colonne il defilait hors de
   l ecran, et c est la seule ligne qui reglait la question. */
.aide-exemple-total { margin: .6rem 0 0; font-size: .88rem; color: var(--texte-2); }
.aide-exemple-total b { color: var(--texte); font-weight: 650; }

/* Le montant passe sous le nom : sur trois colonnes, « L aînée (enfant) · 60 $ »
   d un seul tenant poussait le tableau a defiler pour rien. */
.aide-tableau th small {
    display: block;
    font-weight: 500;
    font-size: .95em;
    color: var(--texte-3);
    margin-top: .1rem;
}

/* Entre deux saisons : ni alerte ni lien de reparation — il n y a rien a
   corriger, la suivante est deja creee. Le nom passe en gris pour qu on ne le
   lise pas comme la saison en cours. */
.entete-saison.saison-avenir b { color: var(--texte-2); font-weight: 550; }

/* ---------------- Le parcours du karateka ---------------- */

/* Un fil, pas un tableau : ce qu on lit est une suite d evenements dans le
   temps, et le trait vertical le dit mieux qu une grille. */
.parcours-fil { list-style: none; margin: 0; padding: 0; position: relative; }
.parcours-fil::before {
    content: "";
    position: absolute;
    left: 5px; top: .6rem; bottom: .6rem;
    width: 2px;
    background: var(--bord);
}
.parcours-fil li {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .6rem 0;
    position: relative;
}
.parcours-point {
    width: 12px; height: 12px;
    border-radius: 50%;
    flex: none;
    margin-top: .28rem;
    box-shadow: 0 0 0 3px var(--carte);
}
.parcours-fil b { display: block; font-size: .92rem; font-weight: 600; }
.parcours-fil li > div { flex: 1; min-width: 0; }
.parcours-fil li > div > span { font-size: .84rem; color: var(--texte-2); }

/* Le type a droite, en retrait : il classe sans se lire avant le titre. */
.parcours-type {
    font-size: .76rem;
    color: var(--texte-3);
    white-space: nowrap;
    align-self: center;
}

/* Retirer une ceinture se fait sur sa ligne : le tableau des grades a disparu,
   il disait deux fois ce que le fil dit une. */
.parcours-fil li > .btn { flex: none; align-self: center; }

/* Ce que le club a ecrit sur une journee se lit DANS la ligne de l activite,
   sous son titre et au meme poids. A la queue du detail gris, « 2e place kumite
   -60 kg » se lisait comme une option facturee de plus. */
.parcours-ecrits { list-style: none; margin: .35rem 0 0; padding: 0; }

/* « .parcours-fil li » est un selecteur de DESCENDANT : sans cette ligne, les
   entrees imbriquees heritaient du flex, du gap et du padding de la ligne du
   fil, et le titre se retrouvait a cote de sa precision au lieu d etre dessus. */
.parcours-fil .parcours-ecrits li { display: block; padding: .1rem 0; }
.parcours-ecrits b { font-size: .88rem; font-weight: 600; }
.parcours-ecrits span { font-size: .84rem; color: var(--texte-2); margin-left: .4rem; }
.parcours-ecrits .btn { margin-left: .5rem; vertical-align: middle; }

/* La saisie s ouvre DANS la ligne, pas au-dessus ni au-dessous d elle. */
.parcours-saisie { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0 .2rem; }

/* Ce qui est A FAIRE, et seulement ca : une carte perimee se relance, un role
   termine ne se relance pas. */
.prog-echu { color: var(--alerte); font-weight: 550; }
.prog-bientot { color: var(--jauge-plein); font-weight: 550; }

/* LE PANNEAU DE FILTRES de la liste des membres. Il se deplie sous la barre
   d outils : six sections ouvertes en permanence auraient repousse la liste
   sous la ligne de flottaison pour les neuf visites sur dix ou l on cherche
   simplement un nom. */
.filtres-panneau {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: 10px;
    padding: .9rem 1rem;
    margin: -.4rem 0 1rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
/* LE PANNEAU DE FILTRE EN COLONNES, quand il en compte assez pour depasser
   l ecran.

   Empile, il faisait plus de cinq cents pixels : on cochait dans sa premiere
   section et la liste filtree commencait sous le pli. Or la place manquait en
   HAUTEUR pendant qu elle restait libre en LARGEUR — une rangee de pastilles
   occupe rarement la moitie du panneau.

   auto-fit plutot qu un nombre de colonnes fixe : sur un telephone il n y en a
   qu une, et la mise en page redevient celle d avant sans qu on l ecrive deux
   fois. align-items:start pour qu une section courte ne s etire pas a la
   hauteur de sa voisine. */
.filtres-panneau.en-colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .8rem 1.4rem;
    align-items: start;
}

/* Ce qui parle du panneau ENTIER traverse les colonnes : le compte des
   resultats et le bouton qui vide tout. */
.filtres-panneau.en-colonnes > .pleine-largeur { grid-column: 1 / -1; }

.filtres-section > b { display: block; font-size: .82rem; font-weight: 600; color: var(--texte-2); margin-bottom: .4rem; }
.filtres-pastilles { display: flex; flex-wrap: wrap; gap: .4rem; }

.filtre-pastille {
    border: 1px solid var(--bord);
    background: var(--fond-2);
    color: var(--texte);
    border-radius: 999px;
    padding: .25rem .7rem;
    font-size: .84rem;
    cursor: pointer;
}
.filtre-pastille:not(.actif):hover { background: var(--btn-survol); border-color: var(--btn-survol); color: #fff; }

/* Un filtre actif se voit de loin : c est lui qui explique pourquoi la liste
   ne montre que douze personnes. */
.filtre-pastille.actif {
    background: var(--marque-action);
    border-color: var(--marque-action);
    color: #fff;
}

/* Le compte porte par la pastille : on sait avant de cliquer si ca vaut la
   peine. */
.filtre-pastille span { opacity: .65; margin-left: .3rem; font-size: .78rem; }

.filtre-case { display: flex; align-items: center; gap: .45rem; margin-top: .5rem; font-size: .84rem; }
.filtre-case input { width: auto; margin: 0; }

/* Le filtre reprend les pastilles du sommaire de l aide. */
.aide-sommaire a.actif {
    background: var(--marque-action);
    border-color: var(--marque-action);
    color: #fff;
}

/* Sur le papier, ou il n y a ni couleur ni infobulle. */
.feuille-papier-recup { font-size: .78rem; font-style: italic; margin-top: .1rem; }

/* Le symbole d une consigne de recuperation dans la liste des membres. Discret
   et neutre : il annonce qu il y a une consigne, jamais laquelle. Le rouge est
   reserve a l alerte medicale, qui est une urgence ; celle-ci est une
   instruction, et elle se lit sur la feuille de presence. */
/* Une pastille rouge a la famille, comme l alerte medicale : un petit trait
   gris sous le nom ne se voyait pas. Le survol donne la consigne. */
.puce-recup {
    display: inline-grid;
    place-items: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    margin-left: .3rem;
    vertical-align: -3px;
    flex: none;
    cursor: help;
}
.puce-recup svg { width: 12px; height: 12px; }
/* Quelqu un ne doit pas venir chercher l enfant : la pastille passe au rouge. */
.puce-recup.puce-recup-interdit { background: var(--danger-fond); color: var(--danger); border-color: var(--danger); }
/* LA PASTILLE AVEC SON MOT : plus de legende a deplier. Meme couleur, meme
   icone, et le mot qui la rend lisible sans survol. */
.puce-mot {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    width: auto;
    height: 19px;
    padding: 0 .5rem 0 .32rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}
.puce-mot.pastille-argent { padding-left: .45rem; font-size: .74rem; }
.membre-identite b .puce-alerte { margin-left: .3rem; vertical-align: -2px; }

/* ---- Qui donne le cours, sur la carte ----
   La ligne sous le nom du cours : une pastille grise avec les lettres, le
   prenom et l initiale. C est un bouton pour qui peut nommer quelqu un, un
   texte pour les familles — le meme dessin dans les deux cas, parce que la
   carte doit se lire pareil sur l affiche et sur l ecran de la direction. */
.instructeur-ligne {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .35rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .78rem;
    color: var(--texte-2);
    text-align: left;
}
button.instructeur-ligne { cursor: pointer; border-radius: var(--rayon-sm); }
button.instructeur-ligne:hover { color: var(--marque-action); }
button.instructeur-ligne:focus-visible { outline: 2px solid var(--marque-action); outline-offset: 2px; }

.initiales-instructeur {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--bord);
    background: var(--fond-3);
    font-size: .62rem;
    font-weight: 650;
    letter-spacing: .02em;
    color: var(--texte-2);
    flex: none;
}

/* La fleche dit que ce n est pas l instructeur habituel ; le nom attendu est
   au survol, pas sur la carte, ou il ne tiendrait pas. */
.instructeur-remplace { color: var(--texte-3); cursor: help; }
/* Un remplacant prevu sans constat : la fleche est la, mais en retrait. */
.instructeur-remplace.prevu { opacity: .45; }

/* ---- Le trou se voit ----
   Une carte sans nom est ce qu on cherche a la rentree ; du meme gris que les
   autres, il fallait lire les quinze cartes une a une. En rouge et non en
   ambre : ambre dit « ca attend », ici il manque quelqu un pour ce soir. */
.instructeur-a-nommer { color: var(--danger); font-weight: 600; }

/* La pastille ambre : une piece d encadrement perimee ou refusee, a relancer.
   Un petit rond et un titre au survol, pas une etiquette — sur une carte de
   120 pixels, « verification a refaire » prenait deux lignes. */
.pastille-relance {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--alerte);
    flex: none;
    cursor: help;
}

/* Visible seulement sur le papier : l en-tete qui dit de quel club et de
   quelles dates parle la feuille, puisque la barre laterale et le bandeau du
   club ne s impriment pas. */
.seulement-impression { display: none; }

@media print {
    .seulement-impression { display: block !important; }

    .entete-impression {
        margin-bottom: .6rem;
        padding-bottom: .4rem;
        border-bottom: 1px solid #000;
        font-size: 12pt;
    }

    /* Le tableau reste lisible sur plusieurs pages. */
    .defilant { overflow: visible !important; }
}

/* ---- La boite qui vient a l oeil ----
   Un panneau range en haut de la page n existe pas pour qui regarde le bas de
   la grille : on clique, il ne se passe rien. Celle-ci se pose par-dessus, au
   milieu, la ou le regard est deja. */
.dialogue-voile {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    background: rgba(16, 24, 40, .5);
    animation: voile-entre .12s ease;
}
@keyframes voile-entre { from { opacity: 0 } to { opacity: 1 } }

.dialogue {
    width: min(620px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    margin: 0;
    box-shadow: var(--ombre-md);
    animation: dialogue-entre .14s ease;
}
@keyframes dialogue-entre {
    from { opacity: 0; transform: translateY(6px) }
    to   { opacity: 1; transform: none }
}
.dialogue:focus { outline: none; }
.dialogue { position: relative; }

/* Le formulaire d une formule porte trois champs de front — nom, prix,
   periode — et la liste des groupes : 620 pixels les serraient. */
.dialogue.fenetre-formule { width: min(720px, 100%); }

/* ---- La copie d un courriel ----
   Blanche comme dans une boite de reception, meme en theme sombre : c est le
   courriel tel que la famille l a lu. Assez large pour ses 520 pixels. */
.dialogue.fenetre-courriel { width: min(680px, 100%); }

/* ---- La facture et sa caisse ----
   Plus large que les autres boites : elle porte un tableau de versements, la
   repartition ligne par ligne et un formulaire a quatre champs de front. A
   620 pixels, tout se mettait en colonne et la caisse tenait sur deux ecrans. */
.dialogue.fenetre-facture {
    width: min(1000px, 100%);
    background: var(--fond-1);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-md);
    padding: 1rem;
}
/* ---- La fiche d un evenement ----
   Plus large que les autres boites : le formulaire aligne neuf champs, et
   chaque option tarifaire tient sur une ligne avec ses cases. Le lisere du
   panneau d edition disait « ceci est ouvert sous la ligne » ; dans sa propre
   boite, il ne dit plus rien. */
.dialogue.fenetre-evenement { width: min(920px, 100%); }
.fenetre-evenement .panneau-edition { border-left: 0; padding: 0; }

.courriel-copie {
    display: block;
    width: 100%;
    height: min(60vh, 560px);
    border: 1px solid var(--bord);
    border-radius: 8px;
    background: #fff;
}

/* ---- La boite « qui donne ce cours » ----
   Trois lignes l une sous l autre, chacune son titre, son sous-titre et son
   choix. Etroite : elle tient sur un telephone a 375 pixels, parce que c est
   souvent la que l instructeur dit qu il a remplace. */
.dialogue.fenetre-instructeurs { width: min(440px, 100%); }
.instructeur-retenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0 0 1rem;
    font-size: .95rem;
}
.instructeur-retenu-etiq { color: var(--texte-3); font-size: .8rem; }
.lignes-instructeur { display: flex; flex-direction: column; gap: .9rem; }
.ligne-instructeur-titre { display: block; font-weight: 600; font-size: .9rem; }
.ligne-instructeur .legende { display: block; margin: 0 0 .35rem; }
.ligne-instructeur-valeur { display: flex; align-items: center; gap: .5rem; }
.ligne-instructeur-valeur .champ { flex: 1; min-width: 0; }

@media print {
    .dialogue-voile { display: none !important; }
    /* Sur le papier, le bouton est du texte : le nom s imprime, utile au
       vestiaire ; ce qui dit « ceci se clique » ne dit rien. */
    .instructeur-ligne { color: #000; }
    .initiales-instructeur { border-color: #999; background: none; color: #000; }
    .instructeur-a-nommer { color: #000; font-weight: 700; }
    .pastille-relance { display: none !important; }
}

/* ---- L horaire sur papier ----
   Celui qu on punaise au vestiaire et qu on remet aux parents. « Enregistrer en
   PDF » de la boite d impression donne le fichier : pas de second gabarit a
   maintenir a cote de celui-ci, qui divergerait des la premiere retouche. */
@media print {
    /* DU PAPIER COUCHE. Cinq a sept colonnes de jours sur du portrait donnent
       25 mm par jour : le nom du cours passe a la ligne trois fois. La page
       nommee ne s applique qu a la grille — le reste de l application garde le
       portrait. */
    @page paysage { size: landscape; margin: 10mm; }
    .semaine { page: paysage; }

    /* Une journee ne se coupe pas entre deux pages : une colonne dont il manque
       le bas se lit comme une journee sans cours du soir. */
    .colonne-jour, .carte-cours { break-inside: avoid; }

    /* LES COULEURS RESTENT. Le navigateur jette les aplats a l impression pour
       economiser l encre ; ici, la couleur du groupe est justement ce qui
       distingue les Minis des Ados sur le mur, et la legende ne renvoie plus a
       rien sans elle. */
    .semaine, .semaine *, .legende-groupes, .legende-groupes * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Rendre les colonnes un peu plus etroites : sept jours tiennent alors sur
       une seule feuille couchee. */
    .semaine { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 4mm; }
    .carte-cours { padding: 2mm 2.5mm; box-shadow: none; }
}

/* ---- La barre de l apercu papier ----
   Elle survit aux regles d impression injectees, qui masquent .btn et tout le
   chrome : sans classe a elle, le bouton pour SORTIR de l apercu disparaissait
   avec le reste et il ne restait plus qu a recharger la page. */
/* COLLANTE ET NON FIXE : elle occupe sa place dans le flux, donc rien ne
   passe dessous. En fixe, elle recouvrait l en-tete du papier des qu elle
   passait sur deux lignes — et sa hauteur depend de la largeur de la fenetre,
   qu aucun calage en dur ne peut suivre. */
.barre-apercu {
    position: sticky;
    top: 0;
    z-index: 90;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .55rem .9rem;
    background: #1F2937;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    font-size: .88rem;
}
.barre-apercu .titre-apercu { font-weight: 600; }
.barre-apercu .note-apercu { color: #D1D5DB; flex: 1 1 240px; }
.bouton-apercu {
    padding: .32rem .7rem;
    border-radius: var(--rayon-sm);
    border: 1px solid #4B5563;
    background: #374151;
    color: #fff;
    font: inherit;
    font-weight: 550;
    cursor: pointer;
}
.bouton-apercu:hover { background: #4B5563; }
.bouton-apercu.principal { background: var(--marque-action); border-color: var(--marque-action); }

/* La page prend la teinte du papier. */
.apercu-papier body { background: #fff; }

/* La barre elle-meme ne part pas sur le papier si l on imprime depuis l apercu. */
@media print { .barre-apercu { display: none !important; } }

/* ---- L en-tete du papier : le logo du club a cote du titre ----
   La mise en page ne vaut QUE dans le media print : posee sans condition, son
   display:flex ecrasait le display:none de .seulement-impression et l en-tete
   du papier apparaissait a l ecran. */
.logo-papier { height: 14mm; width: auto; max-width: 40mm; object-fit: contain; }

/* ---- Les fermetures d une saison ----
   Elles S IMPRIMENT : c est la seule chose qu un horaire de saison ne peut pas
   dire dans sa grille, et un parent qui se presente le 27 decembre trouve
   porte close. */
.fermetures-saison {
    margin-top: 1rem;
    padding: .7rem .9rem;
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    background: var(--fond-2);
    font-size: .88rem;
}
.fermetures-saison ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.fermetures-saison li { margin: .15rem 0; }

@media print {
    .entete-impression { display: flex !important; align-items: center; gap: .8rem; }
    .fermetures-saison { background: none; break-inside: avoid; }
    .logo-papier { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* ---- La saison sur l ecran d accueil ----
   Le meme composant que dans l en-tete, mais pose sous « Bienvenue » : il n a
   plus a se serrer contre le nom du club, et la marge auto qui le collait a
   gauche de la barre n a plus lieu d etre. */
.saison-ecran { margin: -.4rem 0 1.1rem; }
.saison-ecran .entete-saison { margin-right: 0; }

/* ---- Les evenements sur papier ----
   Le calendrier du mois se punaise au vestiaire ; la liste se remet aux
   familles. Le papier suit la vue choisie a l ecran plutot que d en imposer
   une. */
@media print {
    /* SEPT COLONNES DE JOURS SUR DU PORTRAIT donnent 25 mm par jour, et le nom
       de l evenement sort tronque. La grille du mois prend donc le meme papier
       couche que l horaire — c est la meme forme et le meme probleme. */
    .mois { page: paysage; }

    /* La navigation du mois ne sert qu a l ecran, et le mois lui-meme est deja
       dans l en-tete du papier. Mais la LEGENDE DES CATEGORIES vit dans la meme
       barre : masquer le tout aurait laisse des liseres de couleur sans rien
       pour dire ce qu ils veulent dire. Seul le titre s en va — les boutons
       sont deja masques comme tout .btn. */
    .mois-tete > b { display: none; }

    /* LES COULEURS DE CATEGORIE RESTENT. Le navigateur jette les aplats pour
       economiser l encre, mais ici le liseré est ce qui distingue une
       competition d un camp — sans lui, la legende ne renvoie plus a rien. */
    .mois, .mois *, .legende-groupes, .legende-groupes * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Une semaine ne se coupe pas entre deux pages. */
    .mois-case { break-inside: avoid; }

    /* La colonne des boutons : ses boutons sont deja masques, la colonne vide
       restait et decalait le tableau vers la gauche. */
    .table-evenements th:last-child,
    .table-evenements td:last-child { display: none; }

    /* Une fiche ouverte en edition n a rien a faire sur le papier. */
    .table-evenements .ligne-edition { display: none !important; }

    .table-evenements tr { break-inside: avoid; }
    .table-evenements thead { display: table-header-group; }
}


/* ---------------- Le cadre d un rapport ----------------
   La meme anatomie pour tous : fil d Ariane, periode, filtres, chiffres,
   liste, gestes. Ce qui suit ne fait que ranger ; les pieces (btn, champ,
   chiffres, liste) sont celles de toute l application. */
.fil { display: flex; gap: .45rem; align-items: center; font-size: .82rem; color: var(--texte-3); margin-bottom: .4rem; }
.fil a { color: var(--texte-2); text-decoration: none; }
.fil a:hover { color: var(--marque-action); text-decoration: underline; }

.rapport-periode { margin-bottom: .6rem; }
.rapport-filtres { margin-bottom: .6rem; }
.rapport-filtres label, .filtre-regrouper { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--texte-2); }
.rapport-filtres .champ { width: auto; }
.rapport-filtres input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--marque-action); margin: 0; }
.rapport-filtres input[type="number"] { width: 5.5rem; }
.rapport-quand { margin: 0 0 .9rem; }
.rapport-pied { margin-top: .8rem; }
.rapport-gestes { margin: 0 0 1rem; }

/* Un total qui ferme un tableau de rapport : la regle n existait que sous
   .document, et les rapports l ecrivaient sans qu elle s applique. */
.liste tr.total-final td { font-weight: 650; border-top: 2px solid var(--bord-fort); }

@media print {
    .rapport-pied { font-size: 9pt; }
    .rapport-quand { display: none; }
}

/* ---------------- Ceintures : progression par rang, candidats ----------------
   La cellule de l exigence qui BLOQUE se voit : c est la seule qu on vient
   chercher dans une ligne de huit colonnes. Meme couleur que la barre bloquee
   de la page Progression. */
.liste td.rce-bloque { color: var(--alerte); font-weight: 600; }
/* ---------------- Rapports de la boutique ----------------
   Deux tableaux sur une meme page — les commandes des membres, puis ce qui
   est en route — et un titre de section entre les deux pour qu ils ne se
   lisent pas comme un seul. */
.rbo-section { margin: 1.3rem 0 .5rem; }
/* ---------------- Comptabilite et fiscalite (rco-) ----------------
   Le resume de fin d exercice est une page de PAPIER : cinq tableaux titres
   qu on ne coupe pas au milieu. Et la colonne des verdicts d un envoi en lot,
   qui doit se lire ligne par ligne sans crier. */
.rco-section { margin-top: 1.2rem; }
.rco-section > h3 { margin: 0 0 .5rem; }
.rco-section > .legende { margin: 0 0 .5rem; }
.rco-programme { margin: 0 0 .8rem; }
.rco-verdict { font-size: .82rem; color: var(--texte-2); }
.rco-verdict.echec { color: var(--danger); }

@media print {
    .rco-section { break-inside: avoid; }
}

/* ---------------- Espace famille (fam-) ----------------
   Un parent, le soir, sur son telephone. Une carte par personne, larges
   boutons, et le « a faire » en tete : ce qui demande un geste se voit avant
   ce qui ne demande rien. */
.fam-afaire .bloc-corps { padding-top: .7rem; }
.fam-ok { margin: 0; color: var(--succes); font-weight: 550; }
.fam-liste-afaire { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.fam-liste-afaire li {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
    padding: .55rem .75rem; border: 1px solid var(--bord); border-radius: var(--rayon-sm); background: var(--fond-2);
}
.fam-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: .8rem;
    margin-bottom: 1.1rem;
}
.fam-carte {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: .95rem 1.05rem;
    display: flex; flex-direction: column; gap: .55rem;
}
.fam-carte header h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.fam-carte header p { margin: .15rem 0 0; font-size: .85rem; }
.fam-etiq {
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--texte-3); border: 1px solid var(--bord-fort); border-radius: 99px; padding: .05rem .45rem;
}
.fam-faits { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; font-size: .9rem; }
.fam-faits dt { color: var(--texte-3); font-weight: 500; }
.fam-faits dd { margin: 0; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.fam-groupe { border-left: 3px solid var(--bord-fort); padding-left: .4rem; font-weight: 550; }
.fam-gestes { display: flex; gap: .4rem; justify-content: flex-end; white-space: nowrap; }
.fam-jour .bloc-tete h2 { text-transform: capitalize; }

@media (max-width: 760px) {
    .fam-gestes { flex-direction: column; align-items: stretch; }
    .fam-liste-afaire li .btn { width: 100%; text-align: center; }
}

/* ---- L abonnement du club ---- */
/* Le forfait en cours se distingue des autres cartes par la couleur d action,
   pas par une etiquette seule : on le repere avant de lire. */
.plan.plan-courant { border-color: var(--marque-action); box-shadow: 0 0 0 2px color-mix(in srgb, var(--marque-action) 25%, transparent); }
.plan .btn { margin-top: .55rem; }
.bandeau-essai-lien { margin-left: .6rem; font-weight: 600; color: var(--marque-action); text-decoration: none; white-space: nowrap; }
.bandeau-essai-lien:hover { text-decoration: underline; }
.portail-texte { color: var(--texte-2); text-align: center; margin: 0 0 1.1rem; line-height: 1.5; }
.portail-bas { text-align: center; margin: .9rem 0 0; }
/* Une carte de plan qui est un lien : meme aspect, mais elle repond au survol. */
a.plan-lien { text-decoration: none; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
a.plan-lien:hover { border-color: var(--marque-action); box-shadow: 0 0 0 2px color-mix(in srgb, var(--marque-action) 20%, transparent); }

/* ---- La fenetre qui montre les conditions et la politique par-dessus l inscription ----
   Un <dialog> cree par le script de App.razor ; la page nue du site vitrine
   defile dans un cadre. Plein ecran sur telephone. */
.cadre-legal { width: min(920px, 96vw); height: 88vh; max-height: 88vh; padding: 0; overflow: hidden; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); color: var(--texte); box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .25); }
.cadre-legal[open] { display: flex; flex-direction: column; }
.cadre-legal::backdrop { background: rgba(16, 24, 40, .6); backdrop-filter: blur(2px); }
/* La barre prend --fond-3 : en theme sombre, --fond-2 valait la meme couleur
   que la fenetre et la barre disparaissait. */
.cadre-legal-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .8rem .7rem 1.1rem; border-bottom: 1px solid var(--separateur); background: var(--fond-3); }
.cadre-legal-tete span { font-weight: 650; font-size: 1.02rem; color: var(--texte); }
.cadre-legal iframe { flex: 1; width: 100%; border: 0; background: var(--carte); }
@media (max-width: 640px) {
    .cadre-legal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; border: 0; }
}

/* ---- Communication : le bouton Envoyer ----
   Rouge quand rien ne manque au message, gris des qu il manque quelque chose.
   Sans cette regle, un bouton rouge desactive restait rouge : rien ne disait
   qu il ne partirait pas. */
.btn-principal.envoyer:disabled {
    background: var(--fond-3);
    border-color: var(--bord-fort);
    color: var(--texte-3);
    cursor: not-allowed;
}

/* ---- Parametres : le carnet des instructeurs ----
   Des rangees en boites, pas un tableau : chaque modele, chaque categorie,
   chaque case porte cinq ou six gestes, et une colonne « actions » de six
   boutons ne tient pas sur un telephone. Ici les gestes passent a la ligne
   sous le nom, et la liste reste lisible a 375 px. Le grise dit « desactive »
   sans cacher : une case desactivee reste a sa place, avec « Reactiver ». */
.pcn-modele { display: flex; flex-direction: column; gap: .4rem; padding: .9rem 1rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); }
.pcn-modele-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
/* Le nom est un lien vers la fiche : souligne comme un lien, sinon on ne le devine pas. */
.pcn-modele-nom { font-weight: 650; font-size: 1.02rem; color: var(--marque-action); text-decoration: underline; text-underline-offset: 3px; }
.pcn-modele-detail { font-size: .88rem; }
.pcn-defaut { color: var(--marque-action); border-color: var(--marque-action); }
.pcn-inactif > .pcn-modele-tete, .pcn-inactif > .pcn-modele-detail,
.pcn-inactif > .pcn-categorie-tete > .pcn-nom, .pcn-element.pcn-inactif > .pcn-nom { opacity: .55; }
.pcn-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.pcn-pourquoi { font-size: .84rem; }
.pcn-ajout { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pcn-nom { flex: 1 1 200px; min-width: 0; }
.pcn-court { flex: 0 1 220px; min-width: 0; }
.pcn-categorie { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); overflow: hidden; }
.pcn-categorie-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .7rem .9rem; background: var(--fond-2); border-bottom: 1px solid var(--separateur); }
.pcn-categorie-tete .pcn-nom { font-weight: 650; }
.pcn-elements { display: flex; flex-direction: column; gap: .35rem; padding: .7rem .9rem; }
.pcn-element { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .3rem 0; border-bottom: 1px dashed var(--bord); }
.pcn-element:last-of-type { border-bottom: 0; }
.pcn-ajout-categorie { padding-top: .4rem; }
.pcn-fourni { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .8rem; border: 1px solid var(--bord); border-radius: var(--rayon); margin-bottom: .4rem; }
.pcn-cours { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .45rem 0; border-bottom: 1px solid var(--separateur); }
.pcn-cours:last-child { border-bottom: 0; }
.pcn-cours-nom { flex: 1 1 180px; }
@media (max-width: 560px) {
    .pcn-court { flex-basis: 100%; }
}

/* ---------------- Le carnet des instructeurs ---------------- */

/* Les filtres sur une ligne, dans l ordre ou l on pense : le groupe, le
   cours, l instructeur, la duree. Ils passent a la ligne sur un ecran etroit
   sans qu on l ecrive deux fois. */
.carnet-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .8rem 1.2rem;
    margin-bottom: .9rem;
}
.carnet-filtres > label, .carnet-filtre-duree { display: flex; flex-direction: column; gap: .3rem; min-width: 170px; }
.carnet-filtres > label > span, .carnet-filtre-duree > span { font-size: .82rem; font-weight: 600; color: var(--texte-2); }
.carnet-filtres .carnet-mes-cours { flex-direction: row; align-items: center; min-width: 0; margin: 0 0 .55rem; }
.carnet-filtre-recherche { margin-left: auto; }
.carnet-duree { display: flex; gap: .3rem; }

.carnet-fenetre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    margin: 0 0 .8rem;
    font-size: .88rem;
    color: var(--texte-2);
}

/* ---- Le pli ambre ----
   Ce qu on n a pas fait depuis un mois : une alerte, repliee, qui ne prend
   qu une ligne tant qu on ne l ouvre pas. Ambre comme une echeance proche,
   pas rouge : rien n est casse, quelque chose attend. */
details.carnet-delaisses {
    border: 1px solid var(--alerte);
    background: var(--alerte-fond);
    border-radius: var(--rayon);
    padding: .55rem .9rem;
    margin-bottom: .9rem;
    font-size: .88rem;
}
details.carnet-delaisses > summary { cursor: pointer; font-weight: 600; color: var(--alerte); }
details.carnet-delaisses ul { margin: .5rem 0 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
details.carnet-delaisses li { break-inside: avoid; }

/* ---- La grille ----
   La premiere colonne reste collee a gauche quand on fait defiler les
   semaines : sans elle, une case au bout de la ligne ne dit plus de quoi
   elle parle. */
.carnet-grille th, .carnet-grille td { vertical-align: top; }
.carnet-grille thead th.colonne { min-width: 160px; }
.carnet-grille thead th:focus { outline: none; }
.carnet-grille th.carnet-coin, .carnet-grille th.carnet-element {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--carte);
}
.carnet-grille th.carnet-coin { z-index: 3; background: var(--fond-2); }
.carnet-grille th.carnet-element { font-size: .88rem; font-weight: 500; color: var(--texte); border-right: 1px solid var(--bord); }
.carnet-grille tbody tr:hover th.carnet-element { background: var(--fond-2); }

.carnet-entete { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; font-weight: 500; white-space: nowrap; }
.carnet-date { font-size: .88rem; font-weight: 650; color: var(--texte); }
.carnet-heure { font-size: .78rem; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.carnet-cours { font-size: .8rem; color: var(--texte-2); border-left: 3px solid var(--bord); padding-left: .4rem; white-space: normal; }
.carnet-entete .instructeur-ligne { margin-top: .1rem; }
.carnet-entete .btn { margin-top: .2rem; }

/* Le bouton de recopie ne s impose que sur la derniere colonne : c est ce
   soir qu on recopie, pas il y a dix jours. */
.carnet-discret { opacity: .5; }
.carnet-discret:hover, .carnet-discret:focus-visible { opacity: 1; }

/* La colonne d ou l on vient, quand on arrive de l horaire ou de la feuille
   de presence : un fond et un lisere, le temps de la retrouver. */
.carnet-grille .colonne-visee { background: var(--fond-2); }
.carnet-grille thead th.colonne-visee { box-shadow: inset 0 3px 0 var(--marque-action); }

/* Une seance annulee garde sa colonne — une fiche a pu y etre commencee —
   mais s efface : rien ne s y coche. */
.carnet-grille .colonne.annulee { opacity: .55; }

/* Une couleur par categorie (--cat, posee sur la ligne) : l entete se teinte,
   ses lignes portent un lisere de la meme couleur, et tout l entete se clique. */
.carnet-categorie th {
    background: color-mix(in srgb, var(--cat, var(--texte-3)) 13%, var(--fond));
    box-shadow: inset 5px 0 0 var(--cat, var(--texte-3));
    text-align: left;
    padding: 0;
}
.carnet-categorie th button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cat, var(--texte-2));
    cursor: pointer;
    text-align: left;
}
.carnet-categorie th button:hover { background: color-mix(in srgb, var(--cat, var(--texte-3)) 10%, transparent); }
.carnet-categorie th button::before { content: "▸"; font-size: .95rem; color: var(--cat, var(--texte-3)); transition: transform .15s; }
.carnet-categorie-compte { margin-left: auto; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--texte-3); }
.carnet-grille tbody tr[style] th.carnet-element { box-shadow: inset 5px 0 0 var(--cat); }
.carnet-categorie th button[aria-expanded="true"]::before { transform: rotate(90deg); }
.carnet-categorie th button .etiquette { text-transform: none; letter-spacing: 0; }

/* L element en ambre : pas coche depuis trente jours. Le titre au survol le
   dit en mots, pour qui ne lit pas la couleur. */
.carnet-delaisse { color: var(--alerte); font-weight: 600; cursor: help; }
.carnet-inactif th.carnet-element { color: var(--texte-3); font-style: italic; }

.carnet-case { display: inline-flex; align-items: center; gap: .4rem; }
.carnet-case input[type="checkbox"], .carnet-legende-case {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--marque-action);
    cursor: pointer;
    flex: none;
}
.carnet-case input[type="checkbox"]:disabled { cursor: not-allowed; }

/* ---- La capsule ----
   Dix-huit pixels, grise dans les deux cas : le crayon invite, la bulle dit
   qu il y a quelque chose a lire. Pas de bleu, pas d ambre — la note n est
   pas une alerte, c est une marge. */
.carnet-capsule {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--fond-3);
    color: var(--texte-3);
    cursor: pointer;
    flex: none;
}
.carnet-capsule svg { width: 11px; height: 11px; }
.carnet-capsule:hover, .carnet-capsule:focus-visible { background: var(--bord-fort); color: var(--texte); }
.carnet-capsule.a-note { background: var(--texte-3); color: #fff; }
.carnet-capsule.a-note:hover, .carnet-capsule.a-note:focus-visible { background: var(--texte-2); }

.carnet-precision { display: block; margin-top: .2rem; max-width: 170px; font-size: .78rem; color: var(--texte-2); white-space: normal; }
.carnet-precision-saisie { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .35rem; max-width: 220px; }
.carnet-precision-saisie .champ { width: 100%; padding: .3rem .5rem; font-size: .85rem; }

.carnet-commentaires th, .carnet-commentaires td { border-top: 2px solid var(--bord-fort); }
.carnet-commentaires .carnet-precision { display: inline; margin: 0; }

/* La boite d une note : etroite, un champ, une phrase qui dit qui l a ecrite. */
.dialogue.fenetre-note { width: min(520px, 100%); }
.fenetre-note textarea.champ { min-height: 130px; resize: vertical; font: inherit; font-size: .92rem; line-height: 1.45; }
.fenetre-note textarea.champ[readonly] { background: var(--fond-2); color: var(--texte-2); }

/* ---- Une seule seance sur un telephone ----
   Le tableau a quinze colonnes ne tient pas dans 375 pixels, et le faire
   defiler de cote fait perdre la premiere colonne. Sous 600 px, un choix de
   date remplace les colonnes : la feuille de style masque les autres, la
   page ne fait que dire laquelle reste. */
.carnet-mobile-nav { display: none; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.carnet-mobile-nav .champ { flex: 1; min-width: 0; }

@media (max-width: 600px) {
    .carnet-mobile-nav { display: flex; }
    .carnet-grille .colonne { display: none; }
    .carnet-grille .colonne.visible { display: table-cell; }
    .carnet-grille thead th.colonne { min-width: 0; }
    .carnet-grille th.carnet-coin, .carnet-grille th.carnet-element { position: static; }
    .carnet-filtre-recherche { margin-left: 0; }
    details.carnet-delaisses ul { columns: 1; }
}

@media print {
    .carnet-capsule, .carnet-mobile-nav { display: none !important; }
    .carnet-grille .colonne { display: table-cell !important; }
}

/* =====================================================================
   LA CONNEXION PERDUE

   Blazor pose lui-meme la classe d etat sur #components-reconnect-modal.
   Sans classe, l encart reste cache : c est l etat normal, connecte.
   ===================================================================== */
#components-reconnect-modal { display: none; }

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1100;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
}

.reconnexion-boite {
    background: var(--fond);
    color: var(--texte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    padding: 1.3rem 1.5rem;
    margin: 1rem;
    max-width: 24rem;
    text-align: center;
}

/* Les trois messages cohabitent dans le meme encart ; l etat en montre un. */
.reconnexion-boite > p { display: none; margin: 0; flex-direction: column; align-items: center; gap: .9rem; }
#components-reconnect-modal.components-reconnect-show .reconnexion-pendant { display: flex; }
#components-reconnect-modal.components-reconnect-failed .reconnexion-echouee { display: flex; }
#components-reconnect-modal.components-reconnect-rejected .reconnexion-rejetee { display: flex; }
.reconnexion-compte { font-size: .85rem; color: var(--texte-3); }
/* Le serveur n a pas repondu : on le dit sous le bouton, sans quitter la page. */
.reconnexion-injoignable { font-size: .85rem; color: var(--texte-3); }
.reconnexion-injoignable[hidden] { display: none; }


/* Le titre d un sous-bloc : plus petit qu un h2, plus fort qu un paragraphe.
   Sert a nommer deux metiers qui cohabitent dans une meme section. */
.titre-sous-bloc {
    display: block;
    font-weight: 650;
    font-size: .95rem;
    color: var(--texte);
    margin-bottom: .2rem;
}

/* Deux reglages dans la phrase qu ils composent, plutot que deux boites
   etiquetees « jours » que rien ne relie. Les champs suivent le texte et
   passent a la ligne avec lui sur telephone. */
.phrase-reglages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: .9rem 0 .2rem;
    font-size: .92rem;
    color: var(--texte-2);
}
.phrase-reglages .champ { width: 4.4rem; }

/* La ligne qu on vient de suivre depuis sa facture, le temps de la reconnaitre. */
tr.ligne-visee > td { background: var(--fond-2); box-shadow: inset 3px 0 0 var(--marque-action); }

/* Journal : la personne concernée. Choisie, elle devient une puce qu on
   retire d un clic ; cherchée, une courte liste de noms sous le champ. */
.journal-personne { display: flex; flex-direction: column; gap: .32rem; margin-top: .8rem; max-width: 26rem; }
.journal-personne-titre { font-size: .85rem; font-weight: 550; color: var(--texte-2); }
.journal-puce {
    display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
    padding: .3rem .35rem .3rem .75rem; border: 1px solid var(--bord-fort);
    border-radius: 999px; background: var(--fond); color: var(--texte);
}
.journal-puce-x {
    display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem;
    border: 0; border-radius: 999px; background: transparent; color: var(--texte-2);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.journal-puce-x:hover, .journal-puce-x:focus-visible { background: var(--bord-fort); color: var(--texte); }
.journal-trouves {
    list-style: none; margin: 0; padding: .25rem; border: 1px solid var(--bord-fort);
    border-radius: var(--rayon-sm); background: var(--fond);
}
.journal-trouves button {
    display: block; width: 100%; text-align: left; padding: .45rem .6rem;
    border: 0; border-radius: var(--rayon-sm); background: transparent; color: var(--texte);
    font: inherit; cursor: pointer;
}
.journal-trouves button:hover, .journal-trouves button:focus-visible { background: var(--bord-fort); }

/* Historique : l en-tete de la liste (compte + export) et le detail qu un
   clic ouvre sous une ligne. */
.journal-entete-liste {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .6rem; margin: .2rem 0 0;
}
.journal-ligne { cursor: pointer; }
.journal-ligne:hover > td { background: var(--fond-3); }
.journal-deplier {
    display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem;
    margin: 0 .25rem 0 -.3rem; padding: 0; vertical-align: middle;
    border: 0; border-radius: var(--rayon-sm); background: transparent; color: var(--texte-2);
    cursor: pointer;
}
.journal-deplier svg { width: 14px; height: 14px; transition: transform .15s ease; }
.journal-ligne.ouverte .journal-deplier svg { transform: rotate(90deg); }
.journal-deplier:focus-visible { outline: 2px solid var(--marque-action); outline-offset: 1px; }
.journal-detail > td { background: var(--fond-3); padding-top: .2rem; }
.journal-detail dl {
    display: grid; grid-template-columns: max-content minmax(0, 1fr);
    gap: .3rem 1rem; margin: 0; font-size: .87rem;
}
.journal-detail dt { color: var(--texte-2); font-weight: 550; }
.journal-detail dd { margin: 0; overflow-wrap: anywhere; }
.journal-detail a { color: var(--marque-action); font-weight: 550; }

/* Exporter les donnees du club : l avertissement, les groupes a cocher, le
   bouton et sa ligne d explication. */
/* Meme raison que « .alerte-reglage » : un avertissement porte l ambre. */
.export-avertissement {
    margin: 0 0 1rem; padding: .7rem .9rem; border-left: 3px solid var(--alerte);
    border-radius: var(--rayon-sm); background: var(--alerte-fond); color: var(--texte); font-size: .9rem;
}
.export-groupes { margin: 0; padding: 0; border: 0; display: grid; gap: .5rem; }
.export-groupes legend { font-size: .85rem; font-weight: 550; color: var(--texte-2); margin-bottom: .4rem; }
.bloc-corps label.export-groupe { flex-direction: row; align-items: flex-start; gap: .6rem; cursor: pointer; }
.export-groupe input { margin-top: .25rem; flex: none; }
.export-groupe span { display: flex; flex-direction: column; gap: .1rem; }
.export-groupe small { font-size: .82rem; }
.export-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1.2rem; }
.export-erreur { margin: .8rem 0 0; color: var(--danger); font-weight: 550; }
.export-boutons .btn:disabled { opacity: .5; cursor: not-allowed; }

/* VOIR CE QU ON TAPE. Le mot de passe reste cache par defaut ; l oeil le
   devoile le temps de la saisie, sur l appareil de la personne. Rien n est
   affiche depuis le serveur : le logiciel ne connait aucun mot de passe. */
.champ-secret { position: relative; display: block; }
.champ-secret .champ { padding-right: 2.9rem; }
.oeil {
    position: absolute; top: 50%; right: .35rem; transform: translateY(-50%);
    display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
    padding: 0; border: 0; border-radius: var(--rayon-sm);
    background: transparent; color: var(--texte-3); cursor: pointer;
}
.oeil:hover, .oeil:focus-visible { color: var(--texte); background: var(--fond-3); }
.oeil svg { width: 18px; height: 18px; }

/* La barre oblique ne paraît que lorsque le mot de passe est visible : l icone
   dit alors « cacher », et non « montrer ». */
.oeil .barre { display: none; }
.oeil[aria-pressed="true"] .barre { display: block; }

/* =====================================================================
   Le dossier d une personne : menu en colonne, section a cote
   ===================================================================== */

/* QUINZE SECTIONS NE TIENNENT PAS DANS UNE RANGEE D ONGLETS. Elles se
   repliaient sur trois lignes, ou plus rien ne se cherchait : « Equipement »
   et « Consentements » y avaient le meme poids que « Profil », et rien ne
   disait lesquelles vont ensemble. En colonne, les quatre groupes se lisent
   d un coup d oeil et la section ouverte reste visible de partout. */
.dossier {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
    margin-top: 1.1rem;
}

.dossier-section { flex: 1 1 auto; min-width: 0; }

.rail {
    flex: 0 0 14.5rem;
    width: 14.5rem;
    position: sticky;
    /* Le menu suit le defilement : sur un long onglet Progression, changer de
       section n oblige pas a remonter. */
    top: 1rem;
}

.rail-liste { display: flex; flex-direction: column; gap: .9rem; }

.rail-groupe ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

/* Le titre d un groupe n est PAS cliquable : c est un repere, pas un ecran de
   plus. Meme graphie que les titres du menu principal, pour qu on reconnaisse
   la meme mecanique. */
.rail-titre {
    margin: 0 .6rem .3rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texte-3);
}

.rail-lien {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .65rem;
    border-radius: var(--rayon-sm);
    color: var(--texte-2);
    font-size: .9rem;
    text-decoration: none;
    transition: background .12s, color .12s;
}

.rail-lien:hover { background: var(--fond-3); color: var(--texte); }

.rail-lien.actif {
    background: var(--marque-clair);
    color: var(--marque-action);
    font-weight: 600;
}

.rail-icone { display: inline-flex; flex: none; color: var(--texte-3); }
.rail-icone svg { width: 18px; height: 18px; }
.rail-lien:hover .rail-icone, .rail-lien.actif .rail-icone { color: inherit; }

.rail-nom { flex: 1 1 auto; min-width: 0; }

/* La fleche dit « on sort du dossier » : l historique vit aux parametres. */
.rail-sortie { flex: none; font-size: .8rem; color: var(--texte-3); }

.rail-lien .pastille-alerte, .rail-lien .onglet-compte { flex: none; }

/* Le bouton de repli n existe que sur telephone. */
.rail-bascule { display: none; }

@media (max-width: 900px) {
    .dossier { display: block; }

    .rail {
        position: static;
        width: auto;
        margin-bottom: 1rem;
    }

    /* SUR TELEPHONE, LE MENU SE REPLIE DERRIERE LE NOM DE LA SECTION OUVERTE.
       Deplie, quinze entrees feraient un ecran de menu avant le dossier ;
       ferme, le bouton dit quand meme ou l on est. */
    .rail-bascule {
        display: flex;
        align-items: center;
        gap: .6rem;
        width: 100%;
        padding: .65rem .8rem;
        border: 1px solid var(--bord);
        border-radius: var(--rayon);
        background: var(--fond);
        font: inherit;
        font-size: .95rem;
        font-weight: 600;
        color: var(--texte);
        cursor: pointer;
    }

    .rail-bascule-nom { flex: 1 1 auto; text-align: left; }

    .rail-chevron {
        flex: none;
        width: .5rem; height: .5rem;
        border-right: 2px solid var(--texte-3);
        border-bottom: 2px solid var(--texte-3);
        transform: translateY(-2px) rotate(45deg);
        transition: transform .15s;
    }

    .rail-bascule[aria-expanded="true"] .rail-chevron { transform: translateY(2px) rotate(-135deg); }

    .rail-liste { display: none; padding: .6rem 0 0; }
    .rail-liste.ouvert { display: flex; }
}

@media print { .rail { display: none !important; } }

/* =====================================================================
   Le tableau des roles : qui signe, qui est facture, qui en recoit copie
   ===================================================================== */

/* UNE RANGEE PAR ADULTE, UNE COLONNE PAR DECISION. Chaque responsable etait
   une carte, et la meme explication se reecrivait sous chacune ; le
   responsable de facturation — un seul choix — s eparpillait dans les cartes,
   si bien que « qui paie ? » demandait de toutes les lire. Aligne en colonne,
   le choix se lit sans lire.

   Une grille et non un <table> : les memes cellules se replient en lignes
   nommees sur un telephone, sans changer le balisage. */
.roles { display: flex; flex-direction: column; }

.roles-tete, .role-ligne {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.5fr) 4.6rem 5.2rem 4.6rem auto;
    align-items: center;
    gap: .5rem .7rem;
}

.roles-tete {
    padding: 0 .2rem .4rem;
    border-bottom: 1px solid var(--separateur);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--texte-3);
}

.roles-centre { text-align: center; }

.role-ligne { padding: .6rem .2rem; border-bottom: 1px solid var(--separateur); }
.role-ligne:last-child { border-bottom: 0; }

.role-qui { min-width: 0; }
.role-qui a { color: var(--marque-action); font-weight: 600; text-decoration: none; }
.role-qui a:hover { text-decoration: underline; }
.role-qui .doux { display: block; font-size: .82rem; }

/* La liste « Relation » faisait la largeur de son plus long choix — « Amie ou
   ami de la famille, voisinage » — et poussait la rangee hors de l ecran. */
.role-relation { min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.role-relation .champ { width: 100%; min-width: 0; }

/* En RANGEE : « .bloc-corps label » empile les etiquettes du logiciel —
   champ au-dessus, mot en dessous — et il est plus fort qu une classe seule.
   D ou « .role-ligne .role-case », qui le rattrape : ici le mot va A COTE de
   la case. */
.role-ligne .role-case {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}
.role-ligne .role-case input { margin: 0; }
.role-geste { display: flex; justify-content: flex-end; }

/* Les cellules vides de la rangee « paie lui-meme » : elles tiennent la grille
   sur un ecran large, et disparaissent quand elle se replie. */
.role-vide { min-height: 1px; }

/* LES TROIS EXPLICATIONS, dites UNE FOIS. Elles vivaient sous chaque case de
   chaque carte, donc deux fois pour deux parents et quatre pour quatre. */
.roles-legende {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .2rem .6rem;
    margin: .9rem 0 0;
    padding-top: .7rem;
    border-top: 1px solid var(--separateur);
    font-size: .8rem;
    color: var(--texte-2);
}
.roles-legende dt { font-weight: 650; color: var(--texte); white-space: nowrap; }
.roles-legende dd { margin: 0; }

@media (max-width: 760px) {
    /* REPLIEE EN LIGNES NOMMEES. Six colonnes sur un telephone ne se lisent
       pas ; chaque cellule reprend le titre de sa colonne a gauche. */
    .roles-tete { display: none; }

    .role-ligne {
        grid-template-columns: minmax(0, 1fr);
        gap: .45rem;
        padding: .8rem .2rem;
    }

    .role-vide { display: none; }

    .role-ligne .role-case { justify-content: flex-start; gap: .55rem; }
    .role-ligne .role-case::after,
    .role-relation::before {
        content: attr(data-titre);
        font-size: .85rem;
        color: var(--texte-2);
    }
    .role-geste { justify-content: flex-start; }
    .roles-legende { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
    .roles-legende dd { margin: 0 0 .5rem; }
}

/* UNE ALERTE COLLEE SOUS SON CHAMP. Elle parle de ce qu on vient de taper — un
   numero deja pris, par exemple —, pas du champ en general : sa place est entre
   la boite de saisie et la phrase d aide, avec le triangle qui dit « regardez ».
   En ROUGE et non dans l ambre des reglages : c est un conflit, pas un conseil. */
/* « .bloc-corps label > span » colore toutes les etiquettes de champ en gris :
   il faut le rattraper, sinon l alerte sort dans la couleur d une legende. */
.bloc-corps label > .champ-alerte,
.champ-alerte {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin: .35rem 0 0;
    font-size: .8rem;
    line-height: 1.45;
    font-weight: 400;
    color: var(--danger);
}

.champ-alerte svg { width: 15px; height: 15px; flex: none; margin-top: .1rem; }

/* UN CHAMP ET SON BOUTON, sur la meme ligne. Le bouton agit sur ce qui est
   juste a cote — proposer un numero, par exemple —, et le mettre en dessous le
   detacherait de ce qu il remplit. */
.champ-avec-bouton { display: flex; align-items: center; gap: .4rem; }
.champ-avec-bouton > .champ { flex: 1 1 auto; min-width: 0; }
.champ-avec-bouton > .btn { flex: none; }

/* LE REPLI DU MENU DES PARAMETRES, par une case a cocher et non par du code.
   Ces pages ne sont pas toutes interactives : un bouton qui ne repond pas serait
   pire qu un menu deplie. C est la mecanique du menu principal, deja en place. */
.rail-case { position: absolute; opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
    .rail-case:checked ~ .rail-liste { display: flex; }
    .rail-case:checked ~ .rail-bascule .rail-chevron { transform: translateY(2px) rotate(-135deg); }
}

/* L EN-TETE D UN ECRAN DE PARAMETRES : son nom, et ce qu on y regle.
   Le grand titre dit « Parametres de l ecole » pour les dix-huit ; sans cette
   ligne, rien ne dirait lequel on regarde. Pas de carte autour — elle
   coifferait les blocs sans rien contenir, et sa bordure du bas pendrait dans
   le vide. */
.ecran-tete { margin: 0 0 1.2rem; }
.ecran-tete h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 .25rem; }
.ecran-tete p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--texte-2); max-width: 72ch; }


/* ---- Une fenetre, comme partout ailleurs ----
   LE X FERME, en haut a droite : c est la ou tout le monde le cherche. Un
   bouton « Fermer » au pied prenait la place d un geste et laissait croire
   qu il annulait quelque chose. */
.dialogue > .bloc-tete { position: relative; padding-right: 3.4rem; }

.dialogue-fermer {
    position: absolute;
    top: .8rem;
    right: .85rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--rayon-sm);
    background: transparent;
    color: var(--texte-2);
    cursor: pointer;
}
.dialogue-fermer:hover { background: var(--fond-3); color: var(--texte); }
.dialogue-fermer svg { width: 17px; height: 17px; }

/* LE PIED D UNE FENETRE. « .actions-pied » est fait pour le bas d une PAGE :
   il colle au bas de l ecran et se fond dans le fond de page par un degrade,
   ce qui, dans une carte blanche, decalait le bouton et le laissait flotter.
   Celui-ci se pose sur le bord de la fenetre, borde et aligne. */
.dialogue-pied {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.3rem;
    border-top: 1px solid var(--separateur);
    background: var(--carte);
    position: sticky;
    bottom: 0;
}

/* Un seul bouton au pied se pose a droite, comme le dernier de plusieurs. */
.dialogue-pied { justify-content: flex-end; }

/* LE GESTE NE SE COMPRIME PAS. « Emettre la facture » se pliait en deux lignes
   pour laisser sa place a la phrase de gauche : c est le bouton qu on cherche,
   il garde sa largeur et c est la phrase qui passe a la ligne. */
.dialogue-pied > .btn { flex: none; }

/* Ce qui DEFAIT va a gauche, loin du geste qu on repete. */
.dialogue-pied-gauche {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-right: auto;
}

/* UN PIED DE SOUS-FORMULAIRE, DANS UNE FENETRE. « .actions-pied » est fait
   pour le bas d une PAGE : il colle au bas de l ecran et se fond dans le fond
   de page par un degrade. Pose dans une fenetre — la caisse d une facture en
   ouvre quatre —, ce degrade tombait sur une autre couleur et le bouton
   flottait sur un halo gris. Ici, il se contente d aligner ses gestes. */
.dialogue .actions-pied {
    position: static;
    padding: .9rem 0 0;
    background: none;
}

/* LA FACTURE N A PAS DE BANDEAU DE TITRE : son resume tient lieu de titre, et
   porte deja ses gestes a droite. On leur laisse la place du X. */
.fenetre-facture > .dialogue-fermer { top: 1.05rem; right: 1.05rem; }
.fenetre-facture .resume-rabais { padding-right: 4rem; }

/* =====================================================================
   LES ONGLETS D UN DOSSIER DE PERSONNE, en ligne.

   Dix-sept sections en colonne a gauche faisaient deux menus cote a cote
   avant le contenu. Huit onglets en ligne, sous l en-tete, et le contenu
   prend toute la largeur. Meme graphie que les autres onglets de
   l application, un cran plus grand : c est la navigation principale de
   l ecran, pas un filtre.
   ===================================================================== */
.dossier-onglets { margin-top: 1.1rem; }

/* UNE BANDE, PAS UN TRAIT. Les onglets soulignes se lisaient comme une ligne
   de plus sous l en-tete ; sur une bande grise a bord, ils forment un bloc a
   eux, et l onglet ouvert s en detache en blanc. Hakim, 26 septembre 2026 :
   « on ne voit pas les separations ». */
.onglets-dossier {
    position: relative;
    display: flex;
    gap: .15rem;
    padding: .28rem;
    margin: .45rem 0 1rem;
    background: var(--fond-3);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.onglets-dossier::-webkit-scrollbar { display: none; }
/* LES BORDS QUI DISENT « IL Y EN A D AUTRES » : un fondu et une fleche,
   colles a chaque bord tant que la ligne deborde de ce cote. Les classes
   viennent de dojo.bords ; collees (sticky), elles suivent le defilement. */
.onglets-dossier::before, .onglets-dossier::after {
    display: none;
    align-items: center;
    position: sticky;
    flex: none;
    width: 2.2rem;
    z-index: 1;
    pointer-events: none;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--texte-2);
}
.onglets-dossier::before {
    content: "\2039";
    left: 0;
    margin-right: -2.2rem;
    padding-left: .35rem;
    background: linear-gradient(to right, var(--fond-3) 45%, transparent);
}
.onglets-dossier::after {
    content: "\203A";
    right: 0;
    margin-left: -2.2rem;
    justify-content: flex-end;
    padding-right: .35rem;
    background: linear-gradient(to left, var(--fond-3) 45%, transparent);
}
.onglets-dossier.deborde-g::before, .onglets-dossier.deborde-d::after { display: flex; }
.onglet-dossier {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: none;
    padding: .5rem .6rem;
    border-radius: var(--rayon-sm);
    color: var(--texte-2);
    font-size: .9rem;
    font-weight: 550;
    white-space: nowrap;
    text-decoration: none;
    transition: color .12s, background .12s;
}
.onglet-dossier:hover { color: var(--texte); background: color-mix(in srgb, var(--carte) 55%, transparent); }
.onglet-dossier.actif { color: var(--marque-action); background: var(--carte); box-shadow: var(--ombre); }
.onglet-icone { display: inline-flex; flex: none; color: var(--texte-3); }
.onglet-icone svg { width: 17px; height: 17px; }
.onglet-dossier:hover .onglet-icone, .onglet-dossier.actif .onglet-icone { color: inherit; }
/* Le cadenas de Sante : petit, a cote du mot, jamais a la place. */
.onglet-cadenas { width: 13px; height: 13px; flex: none; color: var(--texte-3); }
.onglet-dossier.actif .onglet-cadenas { color: inherit; }
.onglet-dossier .pastille-alerte { flex: none; }

/* La cible d une ancienne adresse : un point invisible ou l on descend. La
   marge le tient sous l en-tete colle (61px, la hauteur de .entete), pas
   dessous, et laisse un souffle avant le titre de la section. */
.ancre-section { height: 0; scroll-margin-top: calc(61px + 1rem); }

@media (max-width: 900px) {
    .onglets-dossier { margin: .6rem 0 1.1rem; }
    .onglet-dossier { padding: .55rem .7rem; font-size: .88rem; }
}

@media print { .onglets-dossier { display: none !important; } }

/* =====================================================================
   L EN-TETE D UN DOSSIER DE PERSONNE.

   La photo centree sur le bloc nom + puces ; la premiere ligne porte le nom,
   le statut et les gestes ; la deuxieme, la ceinture, le groupe et ce qui
   situe la personne ; la troisieme, ce qu il y a a surveiller — quand il y a
   quelque chose.
   ===================================================================== */
.entete-personne { margin: .4rem 0 0; }
/* CHAQUE ETAGE DANS SON CADRE : l identite, puis ce qu il y a a surveiller,
   puis les onglets. Sans cadre, les trois se lisaient comme une seule masse
   de meme poids ; le contenu du dossier commence apres le troisieme. */
.entete-haut {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .6rem 1rem;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
}
/* LA PHOTO PREND LA HAUTEUR DES LIGNES a cote d elle (Hakim, 28 septembre 2026) : le nom et les reperes ; avec les pastilles de ce qu il faut faire, plus grande. */
.entete-portrait { width: 84px; height: 84px; font-size: 1.55rem; align-self: flex-start; box-shadow: 0 0 0 3px var(--carte), 0 0 0 4px var(--bord); }
.entete-portrait.entete-portrait-grand { width: 130px; height: 130px; font-size: 2.1rem; }
/* UN SEUL BOUTON PLEIN, Facturer. Les autres gestes restent la, sans cadre :
   ils se lisent, ils ne pesent pas. */
.entete-actions .btn-fantome { border-color: transparent; background: none; color: var(--texte-2); }
.entete-actions .btn-fantome:hover { background: var(--btn-survol); border-color: var(--btn-survol); color: #fff; }
.entete-actions .btn-fantome:disabled { opacity: .5; }
.entete-corps { flex: 1; min-width: 0; }
.entete-ligne { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.entete-ligne .page-titre { line-height: 1.15; font-size: 1.5rem; }
.entete-actions .btn { padding-top: .32rem; padding-bottom: .32rem; }
.entete-ligne .page-titre { margin: 0; }
.entete-actions { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-left: auto; }
.entete-actions .btn svg { width: 16px; height: 16px; flex: none; }
.btn.btn-icone { width: 2.35rem; padding-left: 0; padding-right: 0; justify-content: center; }

.entete-meta { margin-top: .25rem; font-size: .9rem; color: var(--texte-2); gap: .4rem .55rem; }
.entete-meta .puce { padding: .16rem .6rem; }
.entete-sep { color: var(--texte-3); }
.entete-item { white-space: nowrap; }
.entete-item > span:not(.entete-sep) { white-space: normal; }
.entete-responsable { color: var(--texte); font-weight: 550; text-decoration: underline; text-underline-offset: 2px; }
/* LES REPERES DE L EN-TETE (27 septembre 2026) : une etiquette en petites
   capitales, la valeur dessous, un trait entre chaque — tout s aligne sur
   une ligne, et l oeil trouve la ceinture ou le numero a appeler sans lire. */
.entete-reperes { display: flex; flex-wrap: wrap; gap: .45rem 0; margin-top: .6rem; }
.repere { display: flex; flex-direction: column; gap: .12rem; min-width: 0; padding: 0 1.2rem 0 0; margin-right: 1.2rem; border-right: 1px solid var(--separateur); }
.repere:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.repere-etiq { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-3); white-space: nowrap; }
.repere-val { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; font-weight: 600; color: var(--texte); line-height: 1.3; }
.repere-val a { color: var(--marque-action); text-decoration: none; }
.repere-val a:hover { text-decoration: underline; }
.repere-val .doux { font-weight: 500; }
@media (max-width: 700px) {
    .repere { border-right: 0; margin-right: 0; padding-right: 0; flex-basis: calc(50% - .5rem); }
}

/* Une puce : un fait qu on lit d un coup, pas un bouton. */
.puce {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .26rem .7rem;
    border-radius: 999px;
    background: var(--fond-3);
    color: var(--texte);
    font-size: .85rem;
    font-weight: 550;
    white-space: nowrap;
}
/* La ceinture en barre, comme dans la liste des membres : elle se reconnait
   de loin, bien avant que son nom se lise. Les dans portent leurs barrettes. */
.puce-ceinture .ceinture, .repere-val .ceinture {
    display: inline-flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 2px;
    width: 24px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .18);
    padding: 0 2px 0 0;
    box-sizing: border-box;
    flex: none;
}
.puce-ceinture .ceinture i, .repere-val .ceinture i { width: 3px; border-radius: 1px; margin: 1px 0; }

/* Ni actif ni suspendu : inactif, parti, ou pas pratiquant du tout. */
.etat-neutre { background: var(--fond-3); color: var(--texte-2); }

/* A SURVEILLER : des puces-liens. Rouge pour ce qui ne peut pas attendre,
   orange pour ce qui manque. */
/* A SURVEILLER, dans son cadre, sur UNE ligne : deux alertes en clair, le
   reste sous « +n » qui se deplie sur place. Pas de fond de couleur : le
   rouge du texte suffit a dire le danger, et un bandeau ambre se confondait
   avec le reste de l en-tete. */
.entete-surveiller {
    display: flex;
    align-items: center;
    gap: .35rem .9rem;
    flex-wrap: wrap;
    margin-top: .45rem;
    padding: .4rem 1rem;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    font-size: .9rem;
}
.entete-surveiller > b {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--texte-2);
    margin-right: .15rem;
}
.surveiller {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--texte);
    font-weight: 550;
    text-decoration: underline;
    text-decoration-color: var(--bord-fort);
    text-underline-offset: 3px;
}
.surveiller svg { width: 14px; height: 14px; flex: none; }
.surveiller-danger { color: var(--danger); text-decoration-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.surveiller:hover { color: var(--marque-action); text-decoration-color: currentColor; }
.surveiller-reste { display: contents; }
.surveiller-reste > summary {
    list-style: none;
    cursor: pointer;
    color: var(--texte-2);
    font-size: .82rem;
    font-weight: 650;
    padding: .12rem .55rem;
    border-radius: 99px;
    background: var(--fond-3);
}
.surveiller-reste > summary::-webkit-details-marker { display: none; }
.surveiller-reste > summary:hover { background: var(--bord); color: var(--texte); }
.surveiller-reste[open] > summary { display: none; }
/* Le contenu deplie vit dans une boite a part (celle du details) : on espace les liens a la main. */
.surveiller-reste > .surveiller { margin: .15rem .9rem .15rem 0; }

/* Le menu des trois points : un <details>, rien a piloter. */
.menu-plus { position: relative; }
.menu-plus > summary { list-style: none; cursor: pointer; }
.menu-plus > summary::-webkit-details-marker { display: none; }
.menu-plus-liste {
    position: absolute;
    right: 0;
    top: calc(100% + .3rem);
    min-width: 14rem;
    padding: .3rem;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    box-shadow: var(--ombre-md);
    z-index: 30;
}
.menu-plus-liste a {
    display: block;
    padding: .5rem .7rem;
    border-radius: var(--rayon-sm);
    color: var(--texte);
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
}
.menu-plus-liste a:hover { background: var(--fond-3); }
.menu-plus-liste a.menu-danger { color: var(--danger); }
.menu-plus-liste .seulement-tel { display: none; }

@media (max-width: 700px) {
    .entete-haut { gap: .9rem; align-items: flex-start; }
    .entete-portrait, .entete-portrait.entete-portrait-grand { width: 64px; height: 64px; font-size: 1.25rem; box-shadow: 0 0 0 3px var(--carte), 0 0 0 4px var(--bord); }
    .entete-ligne .page-titre { font-size: 1.35rem; }
    /* Les gestes sur leur propre ligne, pleine largeur : quatre boutons
       courts tiennent en 390 pixels, l historique passe dans le menu. */
    .entete-actions { width: 100%; margin-left: 0; margin-top: .4rem; }
    .entete-actions .btn { padding: .38rem .6rem; font-size: .85rem; }
    /* Les mots seuls : avec leurs icones, les quatre gestes ne tiennent pas sur une ligne. */
    .entete-actions .btn:not(.btn-icone) svg { display: none; }
    /* La deuxieme ligne prend toute la largeur, sous la photo : a cote d elle,
       elle se pliait en quatre. */
    .entete-haut { flex-wrap: wrap; }
    .entete-corps { display: contents; }
    .entete-ligne:not(.entete-meta) { flex: 1; min-width: 0; }
    .entete-meta { flex-basis: 100%; margin-top: .1rem; }
    .menu-plus-liste .seulement-tel { display: block; }
    .entete-meta { font-size: .88rem; }
}
@media print { .entete-actions, .entete-surveiller { display: none !important; } }

/* =====================================================================
   LE PANNEAU LATERAL : un formulaire a droite, le dossier reste visible.
   ===================================================================== */
.panneau-voile {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(16, 24, 40, .45);
    animation: voile-entre .12s ease;
}
.panneau-lateral {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(440px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--carte);
    box-shadow: -8px 0 30px rgba(16, 24, 40, .18);
    animation: panneau-entre .16s ease;
    outline: none;
}
@keyframes panneau-entre {
    from { opacity: 0; transform: translateX(24px) }
    to   { opacity: 1; transform: none }
}
.panneau-tete {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: 1.2rem 1.4rem 1rem;
    border-bottom: 1px solid var(--separateur);
}
.panneau-titre { flex: 1; min-width: 0; }
.panneau-titre h2 { margin: 0; font-size: 1.15rem; font-weight: 600; }
.panneau-titre p { margin: .2rem 0 0; font-size: .88rem; color: var(--texte-2); }
.panneau-tete .dialogue-fermer { position: static; flex: none; }
.panneau-corps {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.3rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.panneau-corps label { display: flex; flex-direction: column; gap: .32rem; }
.panneau-corps label > span { font-size: .85rem; font-weight: 550; color: var(--texte-2); }
.panneau-pied {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: .9rem 1.4rem;
    border-top: 1px solid var(--separateur);
    background: var(--carte);
}
.panneau-pied > .btn { flex: none; }
.panneau-lateral.large { width: min(640px, 100%); }
@media (max-width: 700px) {
    .panneau-lateral, .panneau-lateral.large { width: 100%; }
}

/* ---- Compter le plein, cacher le vide ----
   Le nombre dans le titre d une carte : on sait d en haut s il y a quelque
   chose a lire. Une carte vide se dit en une ligne, pas en un encadre. */
.titre-compte {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 .45rem;
    margin-left: .35rem;
    border-radius: 999px;
    background: var(--fond-3);
    color: var(--texte-2);
    font-size: .76rem;
    font-weight: 650;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.carte-vide {
    margin: 0;
    padding: .9rem 1.3rem;
    color: var(--texte-2);
    font-size: .9rem;
}
/* Le geste d une carte, dans son bandeau de titre, a droite. */
.bloc-tete { position: relative; }
.bloc-tete .tete-action { position: absolute; top: .85rem; right: 1.1rem; }
@media (max-width: 700px) {
    .bloc-tete .tete-action { position: static; margin-top: .6rem; }
}
/* Dans un panneau, les champs se suivent en colonne : 440 pixels ne font
   pas deux colonnes lisibles. */
.panneau-corps .champs-edition { grid-template-columns: 1fr; }
.panneau-corps .champs-edition > label.deux-colonnes { grid-column: auto; }
/* Une case a cocher avec son aide se plie sur deux lignes dans le panneau. */
.panneau-corps .responsable-case { white-space: normal; align-items: flex-start; }
.panneau-corps .responsable-case input { margin-top: .2rem; flex: none; }
.panneau-corps { overflow-x: hidden; }
/* Les etiquettes d un cours suivi (propose, hors abonnement) respirent. */
.cours-suivis .mini { margin-left: .35rem; }

/* =====================================================================
   L APERCU D UN DOSSIER : neuf cartes, trois colonnes. Deux entre 700 et
   1100 pixels, une seule au telephone. Chaque carte repond a une question
   du comptoir et mene a son onglet.
   ===================================================================== */
.apercu-grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
    align-content: start;
}
@media (max-width: 1100px) { .apercu-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .apercu-grille { grid-template-columns: 1fr; } }

.apercu-carte { margin-bottom: 0; display: flex; flex-direction: column; }
.apercu-tete { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 1.2rem; }
.apercu-tete h2 { margin: 0; display: flex; align-items: center; gap: .5rem; }
/* L ICONE DE LA CARTE : celle de l onglet ou mene « Voir ». Grise et petite,
   un repere pour balayer neuf cartes, jamais un titre a elle seule. */
.apercu-icone { display: inline-flex; flex: none; color: var(--texte-3); }
.apercu-icone svg { width: 17px; height: 17px; }
.apercu-poignee .apercu-icone { margin-right: .35rem; vertical-align: -3px; }
.apercu-voir { color: var(--marque-action); font-weight: 550; font-size: .86rem; text-decoration: none; white-space: nowrap; }
.apercu-voir:hover { text-decoration: underline; }
.apercu-corps { padding: 1.1rem 1.2rem; gap: .7rem; font-size: .9rem; flex: 1; }
.apercu-corps .fort { font-weight: 600; }
.apercu-sep { height: 1px; background: var(--bord); margin: .15rem 0; }
.apercu-kv { display: flex; justify-content: space-between; gap: .8rem; }
.apercu-kv > span:first-child { color: var(--texte-2); flex: none; }
.apercu-kv > span:last-child { font-weight: 550; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.apercu-kv > span.ok { color: var(--succes); }
.apercu-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .2rem; }

/* La date en boite, comme sur un billet : le jour en gros, le mois au-dessus. */
.apercu-evenement { display: flex; align-items: center; gap: .85rem; }
.apercu-date {
    width: 52px; height: 52px; flex: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: var(--rayon-sm);
    background: var(--fond-3);
}
.apercu-date b { font-size: 1.25rem; line-height: 1; }
.apercu-date small { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-2); }

/* Les trente derniers jours, en cases : vert quand venu, vide sinon. */
.apercu-cases { display: flex; gap: .35rem; }
.apercu-cases span { width: 20px; height: 20px; border-radius: 4px; background: var(--succes); }
.apercu-cases span.absent { background: var(--carte); border: 1.5px solid var(--bord-fort); }

/* Le solde, en gros : la reponse a « est-ce que c est paye ? ». */
.apercu-solde { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.apercu-montant { font-family: var(--police-titre); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.apercu-solde.danger { color: var(--danger); }
.apercu-solde.danger span:last-child { font-weight: 600; }
.apercu-solde.ok span:last-child { color: var(--succes); font-weight: 600; }

.apercu-ceinture { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.apercu-ceinture .ceinture { width: 26px; height: 10px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .18); flex: none; }
.apercu-jauge { height: 8px; border-radius: 4px; background: var(--fond-3); overflow: hidden; }
.apercu-jauge span { display: block; height: 100%; background: var(--succes); border-radius: 4px; }

.apercu-personne { display: flex; align-items: center; gap: .7rem; }
.apercu-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--fond-3); color: var(--texte-2);
    font-size: .78rem; font-weight: 700;
}
.mini {
    display: inline-flex; align-items: center;
    padding: .1rem .5rem; border-radius: 999px;
    background: var(--fond-3); color: var(--texte-2);
    font-size: .74rem; font-weight: 600; vertical-align: middle;
}
.mini-bleu { background: #EEF4FF; color: var(--info); }
.mini-vert { background: var(--succes-fond); color: var(--succes); }
.mini-orange { background: var(--alerte-fond); color: var(--alerte); }

.apercu-alerte {
    padding: .75rem .9rem;
    border: 1px solid #FECDCA;
    border-radius: var(--rayon-sm);
    background: var(--danger-fond);
    color: var(--danger);
}
.apercu-ligne { display: flex; align-items: center; gap: .6rem; }
.apercu-ligne .point { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.apercu-ligne .point.orange { background: var(--alerte); }
.apercu-ligne .point.vert { background: var(--succes); }
.apercu-tl { display: flex; gap: .8rem; font-size: .87rem; line-height: 1.4; }
.apercu-tl > span:first-child { color: var(--texte-3); width: 3.6rem; flex: none; }
.apercu-notes { white-space: pre-wrap; line-height: 1.5; }
.apercu-etiquette { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-2); }

/* ---- Personnaliser ---- */
.onglets-droite { margin-left: auto; display: inline-flex; align-items: center; flex: none; }
.onglet-outil { background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 500; color: var(--texte-2); }
.onglet-outil:hover { color: var(--texte); }
.apercu-outils {
    display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
    padding: .7rem .9rem; margin-bottom: 1rem;
    border: 1px dashed var(--bord-fort); border-radius: var(--rayon-sm);
    background: var(--carte);
    font-size: .88rem;
}
.apercu-grille.personnalisation .apercu-carte { cursor: grab; }
.apercu-grille.personnalisation .apercu-carte.cachee { opacity: .45; }
.apercu-poignee {
    display: flex; align-items: center; gap: .4rem;
    padding: .5rem .8rem;
    background: var(--marque-clair); border-bottom: 1px solid var(--separateur);
    font-size: .85rem;
}
.apercu-poignee .poignee { font-size: 1.1rem; color: var(--texte-3); cursor: grab; }
.apercu-poignee .btn.petit { padding: .2rem .45rem; }
@media print { .apercu-outils, .apercu-poignee, .apercu-voir { display: none !important; } }

/* =====================================================================
   LA LISTE DES MEMBRES : tuiles-filtres, filtres actifs en puces, colonnes
   au choix, vue en cartes, selection multiple.
   ===================================================================== */
/* Une tuile est un bouton : elle filtre. Active, elle se cerne de la marque. */
.tuiles-membres { margin: 0 0 1rem; }
.tuile {
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color .12s, box-shadow .12s;
}
.tuile:hover { border-color: var(--bord-fort); }
.tuile.active { border-color: var(--marque-action); box-shadow: 0 0 0 2px var(--marque-clair); }
.tuile .note { display: block; margin-top: .2rem; font-size: .8rem; color: var(--texte-2); }
.tuile .valeur.danger { color: var(--danger); }
/* L IMAGE DE LA TUILE, a gauche du chiffre : quatre dessins fournis par Hakim
   le 26 septembre 2026 (icones/, reduits dans wwwroot/images/tuiles). Elle
   decore, elle ne dit rien que le titre ne dise deja : alt vide. */
.tuile { position: relative; padding-left: 4.9rem; overflow: hidden; }
.tuile-image {
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
    height: 60px;
    width: auto;
    max-width: 4.2rem;
    object-fit: contain;
    pointer-events: none;
}
@media (max-width: 700px) {
    .tuile { padding-left: 3.9rem; }
    .tuile-image { height: 46px; max-width: 3.3rem; }
}

/* Les filtres actifs, en puces qu on retire d un clic. */
.filtres-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: -.4rem 0 .9rem; }
.filtre-actif {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .35rem .2rem .65rem;
    border: 1px solid var(--bord); border-radius: 999px;
    background: var(--marque-clair); color: var(--marque-fonce);
    font-size: .82rem; font-weight: 550;
    cursor: pointer; font-family: inherit;
}
.filtre-actif:hover { border-color: var(--marque-action); }
.filtre-actif span { font-size: 1rem; line-height: 1; }

/* Le menu des colonnes : des cases, pas des liens. */
.colonnes-liste label { display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem; font-size: .88rem; white-space: nowrap; cursor: pointer; }
.colonnes-liste label:hover { background: var(--fond-3); border-radius: var(--rayon-sm); }
.bascule-vue { display: inline-flex; gap: 0; }
.bascule-vue .btn:first-child { border-radius: var(--rayon-sm) 0 0 var(--rayon-sm); }
.bascule-vue .btn:last-child { border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0; margin-left: -1px; }

/* Presences des trente jours : le chiffre et sa petite barre. */
.presences-30 { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mini-barre { display: inline-block; width: 56px; height: 6px; border-radius: 3px; background: var(--fond-3); overflow: hidden; }
.mini-barre i { display: block; height: 100%; background: var(--succes); border-radius: 3px; }

/* La case a cocher et les actions de la ligne : le clic n ouvre pas le dossier. */
.cellule-case { width: 1.8rem; }
.cellule-case input, .carte-case input { width: 15px; height: 15px; accent-color: var(--marque-action); cursor: pointer; }
.cellule-actions { width: 2.6rem; text-align: right; }
.cellule-actions .menu-plus-liste { right: 0; }
tr.selectionnee > td { background: var(--marque-clair); }

/* La vue en cartes : une par membre, la photo en grand. */
.membres-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; }
.membre-carte {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    padding: 1.1rem .9rem .9rem;
    background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
    box-shadow: var(--ombre); cursor: pointer; text-align: center;
}
.membre-carte:hover { border-color: var(--bord-fort); }
.membre-carte.selectionnee { border-color: var(--marque-action); box-shadow: 0 0 0 2px var(--marque-clair); }
.membre-carte .carte-case { position: absolute; top: .6rem; left: .6rem; margin: 0; }
.membre-carte .membre-vignette.grande { width: 64px; height: 64px; font-size: 1.2rem; }
.membre-carte b { margin-top: .2rem; }
.membre-carte .doux { font-size: .82rem; }
.membre-carte .barre-ceinture { width: 110px; }
.membre-carte .carte-pied { display: flex; align-items: center; gap: .35rem; margin-top: .3rem; }

/* QUI : le filtre qui a remplace les quatre onglets de la liste. Des pastilles,
   comme les autres filtres de l ecran, avec le compte de chacune. */
.qui-filtre { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; }
.qui-filtre .filtre-pastille { display: inline-flex; align-items: center; gap: .4rem; }
.qui-filtre .onglet-compte { margin: 0; }

/* =====================================================================
   LES CARTES DE LECTURE D UN ONGLET DU DOSSIER (option 3, 26 sept. 2026).
   Un gros titre, une ligne sous lui, puis des paires etiquette / valeur ;
   le formulaire s ouvre en panneau sur « Modifier ». Trois par rangee sur
   un grand ecran, une par rangee sur un telephone.
   ===================================================================== */
.cours-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.carte-lecture { margin-bottom: 0; display: flex; flex-direction: column; }
.carte-lecture .bloc-corps { flex: 1; display: flex; flex-direction: column; }
.carte-lecture .bloc-corps > .btn { align-self: flex-start; margin-top: auto; }
.lecture-titre { font-family: var(--police-titre); font-size: 1.4rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.2; }
.lecture-titre.doux { color: var(--texte-3); font-weight: 600; }
.lecture-sous { color: var(--texte-2); font-size: .92rem; margin-top: .2rem; }
.lecture-lignes {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .45rem 1rem;
    margin: .9rem 0 1rem;
    padding-top: .8rem;
    border-top: 1px solid var(--separateur);
    font-size: .92rem;
}
.lecture-lignes dt { color: var(--texte-2); }
.lecture-lignes dd { margin: 0; text-align: right; font-weight: 550; white-space: nowrap; }
/* Deux paires par ligne, pour les tailles : dogi et ceinture cote a cote. */
.lecture-deux { grid-template-columns: auto 1fr auto 1fr; border-top: 0; padding-top: 0; margin-top: .2rem; }
.lecture-deux dd + dt { padding-left: .8rem; }
.horaire-suivi td, .horaire-suivi th { white-space: nowrap; }
/* Une liste de lecture pleine largeur (Sante) : la valeur a gauche, sur
   plusieurs lignes s il le faut ; l etiquette garde une colonne fixe. */
.lecture-large { grid-template-columns: 12rem 1fr; margin-top: 0; padding-top: 0; border-top: 0; }
.lecture-large dd { text-align: left; white-space: normal; font-weight: 500; }
.lecture-large dd.lecture-texte { white-space: pre-line; }
.lecture-lignes dd.ok { color: var(--succes); }
/* Une liste de personnes en lecture (Famille) : le nom, le lien, le numero,
   et les roles a droite. Numerotee pour l ordre d appel. */
.lecture-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.lecture-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.lecture-roles { display: inline-flex; gap: .3rem; margin-left: auto; }
.lecture-numerotee { counter-reset: appel; }
/* LES BANDES DE CHIFFRES D UN ONGLET (Documents, Presences, Facturation) :
   trois ou quatre chiffres cote a cote, comme les tuiles de la liste. */
.chiffres-onglet { margin-bottom: 1.2rem; }   /* de l air entre les chiffres et la premiere section (Hakim, 27 sept. 2026) */
.chiffres-onglet .chiffre .valeur { font-size: 1.9rem; }
.chiffres-onglet .chiffre b { font-size: .82rem; }
/* « / session » a cote du prix d un abonnement. */
.chiffre .valeur .valeur-unite { font-size: .85rem; font-weight: 500; color: var(--texte-2); margin-left: .3rem; letter-spacing: 0; }
.carte-cote-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.carte-cote-liste li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
/* LE CAHIER DE PROGRESSION : une carte par rubrique, trois par rangee. */
.cahier-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .9rem; }
.cahier-carte { border: 1px solid var(--bord); border-radius: var(--rayon-sm); padding: .9rem 1rem; background: var(--fond-2); min-width: 0; }
.cahier-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
/* LES OUTILS PASSENT A LA LIGNE plutot que de deborder : cinq boutons sur une rubrique du club
   ne tiennent pas sur 15 rem (Hakim, 27 sept. 2026). En personnalisation, les colonnes s elargissent. */
.cahier-outils { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .75rem; padding-top: .6rem; border-top: 1px solid var(--separateur); }
.cahier-grille.personnalisation { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.cahier-outils .btn.petit { padding: .2rem .45rem; }
.cahier-grille.personnalisation .cahier-carte.cachee { opacity: .45; }
.cahier-grille.personnalisation .cahier-carte { cursor: grab; }
.cahier-tete > b { flex: 1; min-width: 0; }
.cahier-tete .poignee { font-size: 1.1rem; color: var(--texte-3); cursor: grab; flex: none; }
.cahier-carte .retrait-confirme { max-width: 100%; margin: 0; }
/* « AUCUNE » icone : un rond en pointille, de la taille des illustrations. */
.icone-vide { display: inline-block; width: 40px; height: 40px; border: 1px dashed var(--bord-fort); border-radius: 50%; flex: none; }
.choix-icone .icone-vide { width: 44px; height: 44px; }
/* LE REGLAGE D UNE RUBRIQUE dans le panneau d une carte de sante : un cadre a part, sous le texte. */
.reglage-cadre { border-top: 1px solid var(--separateur); padding-top: .9rem; display: flex; flex-direction: column; gap: 1rem; }
/* Un champ par ligne, pleine largeur, dans un panneau. */
.champs-colonne { display: flex; flex-direction: column; gap: 1.1rem; }
.champs-colonne > label { display: block; margin: 0; max-width: none; }
/* Les cours et activites d un panneau : une ligne chacun, le nom a gauche, l etat et Retirer a droite. */
.cours-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cours-liste li { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--separateur); }
.cours-liste li:last-child { border-bottom: 0; }
.cours-liste .cours-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; font-size: .93rem; }
.cours-liste .cours-nom .doux { font-size: .84rem; }
.cours-liste .cours-paiement { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; white-space: nowrap; }
.cours-liste .point-cours { margin-right: 0; flex: none; }
/* L onglet Cours (28 sept. 2026) : trois tableaux a meme la carte, memes deux
   premieres colonnes, « Frais » a droite ; defilants sur telephone. */
table.tableau-cours { table-layout: fixed; min-width: 40rem; }
table.tableau-cours col.col-nom { width: 30%; }
table.tableau-cours col.col-quand { width: 34%; }
table.tableau-cours col.col-frais { width: 18%; }
table.tableau-cours td { vertical-align: top; }
/* L ONGLET COURS (28 sept. 2026) : les trois sections cote a cote sur grand ecran,
   empilees en dessous ; chacune en liste compacte, deux lignes par element. */
.cours-trois { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: stretch; margin-bottom: 1.2rem; }
@media (min-width: 1200px) { .cours-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cours-trois > section.bloc { margin-bottom: 0; display: flex; flex-direction: column; }
.cours-trois > section.bloc > .bloc-corps { flex: 1; }
.liste-cours { list-style: none; margin: 0; padding: 0; }
.liste-cours li { padding: .9rem 1.3rem; border-top: 1px solid var(--bord); }
.liste-cours li:first-child { border-top: 0; }
.liste-cours li.passe { opacity: .6; }
.liste-cours-tete { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .5rem; font-size: .93rem; }
.liste-cours-tete .point-cours { margin-right: 0; flex: none; }
.liste-cours-frais { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; margin-top: .4rem; padding-left: 1.05rem; font-size: .86rem; }
.liste-cours-detail { color: var(--texte-2); font-size: .84rem; margin-top: .2rem; padding-left: 1.05rem; }
.liste-cours.sans-point .liste-cours-detail, .liste-cours.sans-point .liste-cours-frais { padding-left: 0; }
.liste-cours-detail .ligne { display: block; }
/* L etat d une inscription : offerte, a facturer, due ou payee, avec ses gestes. */
.frais-inscription { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
/* Un montant qui ouvre sa facture : un lien, dans la couleur de son etat. */
.frais-lien { background: none; border: 0; padding: 0; font-family: inherit; font-size: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
/* Une carte de cote etroite : l etiquette au-dessus de la valeur. */
.lecture-pile { display: flex; flex-direction: column; margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--separateur); font-size: .92rem; }
.lecture-pile dt { color: var(--texte-2); font-size: .8rem; }
.lecture-pile dd { margin: .1rem 0 .7rem; font-weight: 550; }
.lecture-pile dd:last-child { margin-bottom: 0; }
/* Le contenu d une fenetre d une seule liste : les cours inclus, payants, les activites. */
.panneau-pile { display: flex; flex-direction: column; gap: 1rem; }
/* Les options d une activite, ou le motif pour la retirer : sous sa ligne. */
.cours-liste li.avec-options { flex-wrap: wrap; }
.cours-liste .cours-options { flex-basis: 100%; display: flex; flex-direction: column; gap: .4rem; padding: .1rem 0 .15rem; }
.cours-liste .cours-options .responsable-case { margin: 0; }
/* Les horaires d un cours, a cocher : cote a cote, sous sa ligne. */
.cours-liste .cours-options.cours-horaires { flex-direction: row; flex-wrap: wrap; gap: .3rem 1.2rem; }
.cours-options-gestes { display: flex; gap: .5rem; justify-content: flex-end; }
a.frais-du { text-decoration: underline; text-underline-offset: 2px; }
/* Le geste qui ne se rattrape pas, au bas d un panneau : un trait rouge au-dessus. */
.reglage-cadre.cadre-danger { border-top: 2px solid var(--danger); margin-top: .6rem; }
.reglage-rubrique { display: flex; flex-direction: column; gap: 1rem; }
.reglage-rubrique label { display: flex; flex-direction: column; gap: .32rem; }
.reglage-rubrique label > span { font-size: .85rem; font-weight: 550; color: var(--texte-2); }
/* L ILLUSTRATION EN COULEUR : 40 px dans une carte, 44 px dans le choix, comme Hakim l a dessinee. */
.icone-rubrique-image { width: 40px; height: 40px; object-fit: contain; flex: none; }
.cahier-tete > b .icone-rubrique-image { margin: -.35rem 0; }
.choix-icone .icone-rubrique-image { width: 44px; height: 44px; }
.cahier-tete > b { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.cahier-gestes { display: inline-flex; align-items: center; gap: .3rem; flex: none; }
.cahier-gestes .btn-icone { padding: .25rem .4rem; line-height: 0; }
/* LA PASTILLE DE SANTE sur une carte : celle de la liste des membres, posee dans une tete de carte. */
.cahier-tete .puce-alerte { flex: none; }
.legende .puce-alerte { vertical-align: -2px; }
.choix-icones-titre { display: block; font-size: .85rem; font-weight: 550; color: var(--texte-2); margin-bottom: .4rem; }
.choix-icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: .35rem; }
.choix-icone {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    padding: .5rem .25rem .4rem; border: 1px solid var(--bord); border-radius: var(--rayon-sm);
    background: var(--fond); color: var(--texte-2); cursor: pointer;
    font: inherit; font-size: .66rem; line-height: 1.15; text-align: center;
}
.choix-icone:hover { border-color: var(--btn-survol); color: var(--texte); }
.choix-icone.actif { border-color: var(--marque-action); background: var(--marque-clair); color: var(--marque-action); }
.profil-cote .releves-dossier { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.profil-cote .releves-dossier > .legende { display: none; }
/* PASSAGES : la ceinture se montre par sa couleur ; le nom reste aux lecteurs d ecran. */
.ceinture-pastille { display: inline-block; width: 46px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.18); vertical-align: middle; }
.lecteur-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* PROFIL EN LECTURE : une colonne principale et une colonne de cote. Sous
   1000 px, tout passe en une colonne, la cote apres la principale. */
.profil-grille { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1rem; align-items: start; }
.profil-principal, .profil-cote { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.profil-grille .bloc { margin-bottom: 0; }
.profil-bas { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.profil-bas .bloc { margin-bottom: 0; }
.profil-identite { display: flex; gap: 1rem; align-items: flex-start; min-width: 0; }
.profil-identite .lecture-lignes { flex: 1; min-width: 0; grid-template-columns: 8.5rem 1fr; }
.portrait-profil { width: 64px; height: 64px; font-size: 1.15rem; flex: none; }
.lecture-cote { grid-template-columns: 8rem 1fr; }
.lecture-personnes { gap: .9rem; }
.personne-ligne { align-items: flex-start; flex-wrap: nowrap; }
.personne-qui { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.personne-joindre { display: flex; flex-wrap: wrap; gap: .3rem .5rem; font-size: .88rem; }
.personne-roles { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .1rem; }
.profil-formulaire .profil-colonnes { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1000px) { .profil-grille { grid-template-columns: minmax(0, 1fr); } }
/* LE PROFIL EN TROIS COLONNES (27 septembre 2026) : la personne, son
   entourage, sa place au club. La colonne du milieu, celle des contacts, est
   un peu plus large : ses cartes portent le plus de texte. Sous 1 400 px,
   deux colonnes et la troisieme descend sous la premiere ; une seule sur
   telephone. */
.profil-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .profil-deux { grid-template-columns: minmax(0, 1fr); } }
.contacts-onglet { display: flex; flex-direction: column; gap: 1rem; }
.contacts-onglet .bloc { margin-bottom: 0; }
/* CONTACTS, URGENCE ET AUTORISATIONS EN TABLEAU (27 septembre 2026, d apres
   la capture d Hakim) : une ligne par personne, six colonnes — la personne
   et son lien, telephone et courriel, autorisations en toutes lettres,
   appel en urgence avec l icone numerotee, recuperation, Modifier. Sans le
   dossier complet, la colonne des autorisations s en va ; pour un adulte,
   celle de la recuperation. La note d une personne s affiche sous sa ligne. */
.contacts-factures { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin: 0 0 .9rem; font-size: .95rem; }
.contacts-tableau { border: 1px solid var(--bord); border-radius: var(--rayon-sm); overflow-x: auto; }
/* Sous la largeur utile, le tableau defile de cote plutot que d ecraser ses colonnes. */
@media (min-width: 901px) { .contacts-tableau > .contacts-tete, .contacts-tableau > .contacts-ligne, .contacts-tableau > .contacts-note { min-width: 64rem; } }
.btn-texte.btn-texte-petit { font-size: .84rem; margin-left: .35rem; padding: 0; }
.contacts-payeur { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .8rem 0 0; font-size: .92rem; }
.contacts-payeur img { width: 26px; height: 26px; object-fit: contain; }
.contacts-tete, .contacts-ligne {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.4fr) minmax(0, 2fr) 11rem 9.5rem 7rem;
    gap: .5rem 1rem;
    align-items: start;
    padding: .75rem .9rem;
}
.contacts-tatami .contacts-tete, .contacts-tatami .contacts-ligne { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.4fr) 11rem 9.5rem 7rem; }
.contacts-adulte .contacts-tete, .contacts-adulte .contacts-ligne { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.4fr) minmax(0, 2fr) 11rem 7rem; }
.contacts-adulte.contacts-tatami .contacts-tete, .contacts-adulte.contacts-tatami .contacts-ligne { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.4fr) 11rem 7rem; }
.contacts-tete { background: var(--fond-3); font-weight: 650; font-size: .9rem; color: var(--texte); align-items: start; }
.contacts-ligne { border-top: 1px solid var(--separateur); }
.contacts-qui { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.contacts-qui a { color: var(--marque-action); text-decoration: none; font-size: 1.02rem; }
.contacts-qui a:hover { text-decoration: underline; }
.contacts-qui > b { font-size: 1.02rem; }
.contacts-qui .doux { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .3rem; }
.contacts-qui .contact-principal { margin-left: .2rem; }
.contacts-droits .icone-trait { width: 24px; height: 24px; flex: none; color: var(--texte-2); }
.contacts-joindre { display: flex; flex-direction: column; gap: .1rem; font-size: .92rem; min-width: 0; }
.contacts-joindre a { color: var(--texte); text-decoration: none; overflow-wrap: anywhere; }
.contacts-joindre a:hover { text-decoration: underline; }
.contacts-droits { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; min-width: 0; }
.contacts-droits > span { display: flex; align-items: center; gap: .5rem; }
.contacts-droits img, .contacts-recup img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.contacts-appel { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.contacts-appel > div { display: flex; flex-direction: column; gap: .1rem; }
.contacts-appel img { width: 32px; height: 32px; object-fit: contain; }
.contacts-recup { display: flex; align-items: center; gap: .5rem; }
.recup-oui { color: var(--succes); font-weight: 650; }
.contacts-geste { display: flex; justify-content: flex-end; }
.contacts-note { padding: .5rem .9rem .55rem; font-size: .88rem; line-height: 1.4; background: var(--fond-3); border-top: 1px solid var(--separateur); }
.contacts-note-rouge { background: var(--danger-fond); color: var(--danger); }
/* LE PROFIL D APRES LA CAPTURE D HAKIM (27 septembre 2026) : des rangees a
   deux cartes — la grande a gauche, la petite a droite —, les contacts en
   pleine largeur entre les deux, les notes en bas. Une carte seule dans sa
   rangee prend toute la largeur. */
.profil-rangee { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.profil-rangee > .bloc { margin-bottom: 0; }
.profil-rangee > .bloc:only-child, .profil-rangee > .profil-col:only-child { grid-column: 1 / -1; }
.profil-rangee > .profil-col > .bloc { margin-bottom: 0; }
.profil-suite { margin-top: 1rem; }
.profil-suite > .bloc { margin-bottom: 0; }
.profil-identite-colonnes > div + div { border-left: 1px solid var(--separateur); padding-left: 1.4rem; }
.lecture-deux-points dt::after { content: " :"; }
.bloc-info { display: flex; align-items: center; gap: .45rem; margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--separateur); font-size: .85rem; color: var(--texte-2); }
.bloc-info svg { width: 16px; height: 16px; color: var(--info); flex: none; }
.btn.btn-modifier { display: inline-flex; align-items: center; gap: .35rem; }
.btn-modifier svg { width: 14px; height: 14px; flex: none; }
.contacts-puces { margin: 0; padding-left: 1.05rem; font-size: .9rem; display: flex; flex-direction: column; gap: .2rem; }
.contacts-appel .doux { font-size: .82rem; }
.contacts-note { display: flex; align-items: center; gap: .5rem; }
.contacts-note svg { width: 17px; height: 17px; flex: none; }
.contacts-pied .legende svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--info); }
/* LA LISTE D APPEL de l onglet Sante : l icone numerotee, le nom et le lien, le numero a composer. */
.appel-liste { display: flex; flex-direction: column; gap: .6rem; }
.appel-ligne { display: flex; align-items: center; gap: .65rem; }
.appel-ligne img { width: 36px; height: 36px; object-fit: contain; flex: none; }
.appel-ligne > div { display: flex; flex-direction: column; gap: .05rem; min-width: 0; font-size: .95rem; }
.appel-ligne a { text-decoration: none; }
.appel-ligne a:hover { text-decoration: underline; }
.appel-ligne > div > span > a { color: var(--marque-action); }
.appel-tel { font-weight: 650; color: var(--texte); font-size: 1.02rem; }
/* LE NOUVEAU MEMBRE EN CINQ ETAPES : la ligne des etapes, cliquable en
   arriere, pas en avant ; le pied avec Precedent / Suivant / Inscrire. */
.etapes { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.etapes li { flex: 1 1 auto; min-width: 0; }
.etapes button {
    width: 100%; display: flex; align-items: center; gap: .55rem;
    padding: .5rem .8rem; border: 1px solid var(--bord); border-radius: var(--rayon-sm);
    background: var(--carte); color: var(--texte-2); font: inherit; font-size: .92rem; cursor: pointer; text-align: left;
}
.etapes button:disabled { cursor: default; opacity: .6; }
.etape-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--fond-3); color: var(--texte-2); font-weight: 700; font-size: .85rem; flex: none; }
.etape-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etapes li.active button { border-color: var(--marque-action); color: var(--texte); font-weight: 650; box-shadow: var(--ombre); }
.etapes li.active .etape-num { background: var(--marque-action); color: #fff; }
.etapes li.faite .etape-num { background: var(--succes-fond); color: var(--succes); }
.etapes li.faite button { color: var(--texte); }
.etapes-pied { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; align-items: center; margin-top: 1rem; }
.etapes-pied > .btn:first-child { margin-right: auto; }
/* L EN-TETE D UN ONGLET (28 septembre 2026) : le titre, une phrase, les gestes a droite. */
.onglet-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .8rem 1rem; margin: 0 0 1rem; }
.onglet-titre { font-family: var(--police-titre); font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; margin: 0; line-height: 1.2; }
.onglet-sous { margin: .2rem 0 0; color: var(--texte-2); font-size: .95rem; }
.onglet-gestes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.onglet-gestes .btn svg { width: 15px; height: 15px; }
/* Le prix d un abonnement, en gros ; le statut a cote d un titre de carte. */
.prix-grand { margin: .45rem 0 0; font-family: var(--police-titre); display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.prix-grand b { font-size: 1.65rem; font-weight: 700; letter-spacing: -.01em; }
.prix-grand span { color: var(--texte-2); font-size: .95rem; }
.bloc-tete h2 .etat { margin-left: .5rem; vertical-align: middle; font-size: .74rem; }
.frais-du { color: var(--danger); font-weight: 650; }
.frais-paye { color: var(--succes); font-weight: 600; }
@media (max-width: 700px) {
    .etape-nom { display: none; }
    .etapes li.active .etape-nom { display: inline; }
    .etapes li { flex: 0 1 auto; }
    .etapes li.active { flex: 1 1 auto; }
}
@media (max-width: 900px) {
    .profil-rangee { grid-template-columns: minmax(0, 1fr); }
    .profil-identite-colonnes > div + div { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
    /* Repliee en petites lignes nommees : six colonnes ne se lisent pas sur un telephone. */
    .contacts-tete { display: none; }
    .contacts-tableau .contacts-ligne { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
    .contacts-ligne > div[data-titre]::before { content: attr(data-titre); display: block; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-3); margin-bottom: .15rem; }
    .contacts-appel { align-items: flex-start; text-align: left; }
    .contacts-geste { justify-content: flex-start; }
}
.profil-trois { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.profil-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.profil-col .bloc { margin-bottom: 0; }
.profil-col .contacts-cartes { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1400px) {
    .profil-trois { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    /* Les contacts tiennent la colonne de droite sur deux rangees : la troisieme colonne vient juste sous la premiere. */
    .profil-trois > .profil-col:nth-child(2) { grid-row: 1 / span 2; grid-column: 2; }
}
@media (max-width: 900px) { .profil-trois { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .profil-identite { flex-direction: column; } .personne-ligne { flex-wrap: wrap; } }
/* PROFIL : identite a gauche, coordonnees a droite, notes en bas — un seul cadre. */
.profil-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 2.2rem; align-items: start; }
.profil-colonne { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.profil-colonne .trio { grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1fr) !important; }
.profil-notes { display: block; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--separateur); }
@media (max-width: 900px) { .profil-colonnes { grid-template-columns: minmax(0, 1fr); } }
.lecture-numerotee li::before {
    counter-increment: appel; content: counter(appel);
    display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: var(--fond-3); color: var(--texte-2); font-size: .8rem; font-weight: 650; flex: none;
}
@media (max-width: 700px) { .lecture-large { grid-template-columns: 1fr; gap: .1rem .5rem; } .lecture-large dd { margin-bottom: .5rem; } }
.point-cours { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .45rem; vertical-align: 1px; }
@media (max-width: 700px) {
    .lecture-deux { grid-template-columns: auto 1fr; }
    .lecture-deux dd + dt { padding-left: 0; }
}

/* La barre de selection flotte au bas de l ecran, au-dessus de la liste. */
.barre-selection {
    position: sticky; bottom: 1rem; z-index: 40;
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
    margin: 1rem 0 0; padding: .6rem .9rem;
    background: var(--carte); border: 1px solid var(--marque-action); border-radius: var(--rayon);
    box-shadow: var(--ombre-md);
}
.barre-selection b { margin-right: .3rem; }
@media (max-width: 700px) {
    .membres-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .barre-selection { bottom: .5rem; }
}
@media print { .tuiles-membres, .filtres-actifs, .barre-selection, .cellule-case, .cellule-actions { display: none !important; } }

/* La carte qu on glisse, et la place qu elle va prendre (SortableJS). */
.apercu-fantome { opacity: .35; outline: 2px dashed var(--marque-action); }
.apercu-grille.personnalisation .apercu-carte { cursor: default; }

/* CONTACTS, URGENCE ET AUTORISATIONS (27 septembre 2026), d apres la maquette
   d Hakim : une carte par personne — initiales, nom et relation, Modifier en
   haut a droite ; comment la joindre ; ses droits, une ligne par role avec
   son icone en couleur ; la bande verte ou rouge de la recuperation. */
.contacts-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem; }
.contact-carte { display: flex; flex-direction: column; gap: .8rem; padding: 1rem 1.1rem; }
.contact-entete { display: flex; align-items: flex-start; gap: .8rem; }
.contact-avatar {
    width: 46px; height: 46px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--marque-clair); color: var(--marque-action);
    font-size: 1rem; font-weight: 700; letter-spacing: .02em;
}
.contact-identite { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.contact-identite > b, .contact-identite > a { font-size: 1.08rem; line-height: 1.3; }
.contact-identite a { color: var(--marque-action); text-decoration: none; }
.contact-identite a:hover { text-decoration: underline; }
.contact-identite .doux { font-size: .92rem; }
.contact-identite .mini { align-self: flex-start; margin-top: .3rem; }
.contact-entete .btn { flex: none; }
.contact-joindre { display: flex; flex-direction: column; gap: .35rem; font-size: .95rem; padding-bottom: .8rem; border-bottom: 1px solid var(--separateur); }
.contact-joindre > div { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; min-width: 0; }
.contact-joindre svg { width: 17px; height: 17px; color: var(--texte-2); flex: none; }
.contact-joindre a { color: var(--texte); text-decoration: none; overflow-wrap: anywhere; }
.contact-joindre a:hover { text-decoration: underline; }
.contact-droits { display: flex; flex-direction: column; gap: .5rem; }
.contact-droit { display: grid; grid-template-columns: 26px 7.6rem minmax(0, 1fr); align-items: center; gap: .65rem; font-size: .92rem; }
.contact-droit img { width: 26px; height: 26px; object-fit: contain; }
.contact-droit > span { color: var(--texte-2); }
.contact-droit > b { font-weight: 500; color: var(--texte); min-width: 0; }
.contact-bande { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-radius: var(--rayon-sm); font-weight: 600; font-size: .93rem; }
.contact-bande img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.bande-oui { background: var(--succes-fond); color: var(--succes); }
.bande-non { background: var(--danger-fond); color: var(--danger); }
.contact-restreint { border-color: var(--danger); }
.contact-note { margin: -.2rem 0 0; font-size: .88rem; color: var(--texte-2); line-height: 1.4; }
.recup-non { color: var(--danger); font-weight: 650; }
.contacts-alerte { margin: .7rem 0 0; color: var(--texte-2); }
.contacts-vide { margin: 0; padding: .9rem 1rem; border: 1px dashed var(--bord); border-radius: var(--rayon-sm); color: var(--texte-2); }
.contacts-alerte.bloquant { color: var(--alerte); font-weight: 600; }
.contacts-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; margin-top: 1rem; }
.contact-consigne { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; font-size: .92rem; }
/* Un bouton qui se lit comme un lien : le geste secondaire du pied, en rouge, sans cadre. */
.btn-texte { background: none; border: 0; padding: .25rem 0; color: var(--marque-action); font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; }
.btn-texte:hover { text-decoration: underline; }
.btn-texte svg { width: 19px; height: 19px; flex: none; }
/* Dans le panneau d une personne, chaque role porte son icone a cote de la case. */
.responsable-case .icone-contact { width: 30px; height: 30px; object-fit: contain; flex: none; margin: -.2rem 0; }
/* LA RANGEE DES ROLES : les icones du panneau, dans son ordre. En couleur
   quand la personne a le role, grisees sinon — ce qui manque saute aux yeux. */
.contact-icones { display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.contact-icone { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 5.4rem; text-align: center; font-size: .74rem; line-height: 1.2; color: var(--texte-2); }
.contact-icone img { width: 36px; height: 36px; object-fit: contain; }
.contact-icone.actif { color: var(--texte); font-weight: 600; }
.contact-icone.eteint { color: var(--texte-3); }
.contact-icone.eteint img { filter: grayscale(1); opacity: .32; }
.contact-icone.interdit { color: var(--danger); font-weight: 650; }
/* Le contact principal se marque a cote de la relation, par son icone. */
.icone-principal { width: 22px; height: 22px; object-fit: contain; vertical-align: -6px; margin-left: .2rem; }
.contact-identite .doux { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.contact-identite .mini { align-self: flex-start; margin-top: .25rem; }
/* LES ROLES, UN PAR LIGNE : l icone du panneau et la phrase. En couleur quand
   la personne a le role, grisee quand elle ne l a pas ; le contact principal
   en tete, precede d une fleche ; l interdiction en rouge. */
.contact-roles-liste { display: flex; flex-direction: column; gap: .4rem; }
.contact-role { display: flex; align-items: center; gap: .55rem; font-size: .9rem; line-height: 1.3; color: var(--texte); padding-left: 1.45rem; }
.contact-role img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.contact-role.principal { padding-left: 0; font-weight: 650; }
/* LE CONTACT PRINCIPAL, sur la ligne du lien : « Pere  -> [icone] Contact principal ». */
.contact-principal { display: inline-flex; align-items: center; gap: .25rem; margin-left: .45rem; color: var(--texte); font-weight: 650; font-size: .82rem; white-space: nowrap; }
.contact-principal img { width: 22px; height: 22px; object-fit: contain; }
.contact-principal .fleche { width: auto; }
.contact-role { padding-left: 0; }
.contact-role .fleche { width: .9rem; flex: none; text-align: center; color: var(--marque-action); font-weight: 700; font-size: 1.05rem; }
.contact-role.eteint { color: var(--texte-3); }
.contact-role.eteint img { filter: grayscale(1); opacity: .32; }
.contact-role.interdit { color: var(--danger); font-weight: 650; }
/* LA NOTE POUR L EQUIPE : une zone en bas de chaque carte, meme vide. */
.contact-note-zone { margin-top: auto; padding: .55rem .75rem; background: var(--fond-3); border-radius: var(--rayon-sm); font-size: .88rem; line-height: 1.4; }
.contact-note-zone b { display: block; font-size: .74rem; letter-spacing: .03em; text-transform: uppercase; color: var(--texte-2); margin-bottom: .15rem; }
.contact-note-zone p { margin: 0; white-space: pre-line; }
.contact-note-zone.vide p { color: var(--texte-3); }
.contact-note-zone.restreint { background: var(--danger-fond); }
.contact-note-zone.restreint p { color: var(--danger); }

/* =====================================================================
   L'ONGLET FACTURATION (Hakim, 28 septembre 2026)
   En-tête : à qui vont les factures, et les gestes du comptoir. Trois
   cartes. Des tableaux qui deviennent des lignes sur un téléphone : la
   grille se déclenche sur la largeur de la SECTION, pas de l'écran — la
   colonne de droite en prend sa part.
   ===================================================================== */
.tete-facturation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 0 0 .9rem; }
.tete-facturation-qui { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .4rem; color: var(--texte-2); }
.tete-facturation-qui b, .tete-facturation-qui a { color: var(--texte); font-weight: 600; }
.tete-facturation-gestes { display: flex; flex-wrap: wrap; gap: .5rem; }

.chiffre .valeur.valeur-mots { font-size: 1.2rem; line-height: 1.3; }
.chiffres-onglet .chiffre .valeur.valeur-mots { font-size: 1.2rem; }
.valeur-alerte { color: var(--alerte); }
.valeur-eteinte { color: var(--texte-3); }
.chiffre .note.valeur-alerte { color: var(--alerte); }
.chiffre .note.frais-du { color: var(--danger); }
.chiffre .note.frais-paye { color: var(--succes); }

/* Deux montants dans une carte : « À payer » et « À facturer », côte à côte. */
.chiffre-lignes { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .15rem .7rem; margin-top: .1rem; }
.chiffre-lignes > span { font-size: .8rem; color: var(--texte-2); }
.chiffre-lignes > strong { font-family: var(--police-titre); font-size: 1.25rem; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
/* LE GESTE DE LA CARTE, toujours en dernière ligne, en rouge : « Changer », « Voir la facturation ». */
.chiffre .note.geste-carte { margin-top: .45rem; }
.chiffre .note.geste-carte .btn-texte-petit { margin-left: 0; text-decoration: none; }
.chiffre .note.note-appuyee { color: var(--texte); font-weight: 600; }

.factures-table { container-type: inline-size; gap: 0; }
.factures-table .filtres-pastilles { margin-bottom: .5rem; }
.ft-entete { display: none; }
.ft-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; padding: .7rem 0; border-bottom: 1px solid var(--separateur); }
.ft-ligne:last-of-type { border-bottom: 0; }
.ft-quoi { flex: 1 1 100%; min-width: 0; }
.ft-quoi b { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 0; font-weight: 600; }
.ft-quoi .doux { display: block; font-size: .82rem; }
.ft-quoi .ft-paye { color: var(--succes); }
.ft-quoi .ft-paye a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ft-cell { font-size: .88rem; font-variant-numeric: tabular-nums; }
.ft-cell .mini { display: block; font-size: .7rem; color: var(--texte-3); }
.ft-cell .etat + .etat { margin-left: .3rem; }
.ft-gestes { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.ft-bas { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .6rem; }
.ft-bas:empty { display: none; }

@container (min-width: 700px) {
    .ft-entete, .ft-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 6.2rem 6rem 6rem 7rem 8.4rem; gap: .3rem .9rem; align-items: center; }
    .ft-entete.ft-p, .ft-ligne.ft-p { grid-template-columns: minmax(0, 1fr) 6.4rem 9rem 7rem 6rem 4.2rem; }
    .ft-entete { font-size: .72rem; font-weight: 600; color: var(--texte-3); padding: .1rem 0 .45rem; border-bottom: 1px solid var(--bord); }
    .ft-cell .mini { display: none; }
    .ft-montant { text-align: right; }
    .ft-gestes { margin-left: 0; justify-content: flex-end; }
}

/* Le menu « … » d'une facture : voir, annuler. */
.menu-plus { position: relative; }
.menu-plus-bouton { min-width: 2rem; padding-inline: .45rem; letter-spacing: .05em; }
.menu-plus-liste { position: absolute; right: 0; top: calc(100% + .25rem); z-index: 20; min-width: 12rem; display: flex; flex-direction: column; padding: .3rem; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon-sm); box-shadow: var(--ombre); }
.menu-plus-liste button { text-align: left; padding: .45rem .6rem; border: 0; background: none; border-radius: var(--rayon-sm); font: inherit; font-size: .88rem; color: var(--texte); cursor: pointer; }
.menu-plus-liste button:hover, .menu-plus-liste button:focus-visible { background: var(--fond-3); }

/* Une liste à cocher : ce qui reste à facturer, les factures qu'un paiement règle. */
.liste-a-cocher { list-style: none; margin: 0; padding: 0; }
.liste-a-cocher li { border-bottom: 1px solid var(--separateur); }
.liste-a-cocher li:last-child { border-bottom: 0; }
.liste-a-cocher label { display: flex; flex-direction: row; align-items: flex-start; gap: .7rem; padding: .65rem 0; cursor: pointer; }
.liste-a-cocher input[type="checkbox"] { margin-top: .2rem; flex: none; }
.liste-a-cocher-quoi { flex: 1 1 auto; min-width: 0; }
.liste-a-cocher-quoi b { display: flex; flex-wrap: wrap; align-items: center; font-weight: 600; }
.liste-a-cocher-quoi .doux { display: block; font-size: .82rem; }
.liste-a-cocher .montant { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.liste-a-cocher-total { margin: .2rem 0 0; font-size: .86rem; color: var(--texte-2); text-align: right; }

/* =====================================================================
   AJOUTER UN MEMBRE (Hakim, 28 septembre 2026) : trois étapes reliées par
   un trait, le formulaire à gauche, où on en est et ce qui viendra plus
   tard à droite. Une colonne sur un téléphone.
   ===================================================================== */
.fil-ariane { display: flex; flex-wrap: wrap; gap: .45rem; font-size: .9rem; color: var(--texte-2); margin: 0 0 .35rem; }
.fil-ariane a { color: inherit; text-decoration: none; }
.fil-ariane a:hover { color: var(--marque-action); text-decoration: underline; }
.fil-ariane span:last-child { color: var(--texte); font-weight: 550; }
.nm-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; }
.nm-requis { font-size: .88rem; color: var(--texte-2); }

.etapes.etapes-ligne { flex-wrap: nowrap; gap: 0; margin: .6rem 0 1.3rem; }
.etapes-ligne li { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.etapes-ligne li:last-child { flex: 0 0 auto; }
.etapes-ligne li:not(:last-child)::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--bord); margin: 0 1rem; min-width: 1rem; }
.etapes-ligne button { width: auto; border: 0; background: none; padding: .2rem 0; font-size: 1rem; gap: .7rem; }
.etapes-ligne li.active button { box-shadow: none; color: var(--marque-action); }
.etapes-ligne .etape-num { width: 36px; height: 36px; font-size: .95rem; }
@media (max-width: 640px) {
    .etapes-ligne .etape-nom { display: none; }
    .etapes-ligne li.active .etape-nom { display: inline; }
}

.nm-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.2rem; align-items: start; }
@media (min-width: 1100px) { .nm-grille { grid-template-columns: minmax(0, 1fr) 21rem; } }
.nm-facultatif { font-weight: 400; color: var(--texte-2); font-size: .9em; }

/* Naissance et genre sur une ligne, comme la fenêtre du dossier. */
.nm-naissance-genre { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: flex-start; }
.nm-naissance-genre .nm-naissance { width: 11rem; flex: none; }
.nm-naissance-genre .nm-genre { flex: 1 1 15rem; min-width: 0; }
.bloc-corps label.nm-photo-bouton { position: relative; flex-direction: row; align-items: center; gap: .45rem; cursor: pointer; overflow: hidden; }
.nm-photo-bouton input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.nm-info { display: flex; align-items: flex-start; gap: .5rem; margin: .2rem 0 0; font-size: .88rem; color: var(--texte-2); }
.nm-info svg { width: 18px; height: 18px; flex: none; margin-top: .05rem; }

.nm-horaires { display: flex; flex-direction: column; gap: .45rem; margin-top: .4rem; padding-top: .8rem; border-top: 1px solid var(--separateur); }
.nm-horaires-cours > span { font-weight: 600; font-size: .9rem; }

.nm-suite, .nm-plus-tard { list-style: none; margin: 0; padding: 0; }
.nm-suite li, .nm-plus-tard li { border-bottom: 1px solid var(--separateur); }
.nm-suite li:last-child, .nm-plus-tard li:last-child { border-bottom: 0; }
.nm-suite button { width: 100%; display: flex; align-items: flex-start; gap: .8rem; padding: .75rem 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--texte); }
.nm-suite button:disabled { cursor: default; }
.nm-suite .etape-num { width: 34px; height: 34px; }
.nm-suite li.active .etape-num { background: var(--marque-action); color: #fff; }
.nm-suite li.faite .etape-num { background: var(--succes-fond); color: var(--succes); }
.nm-suite-texte { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.nm-suite-texte b { font-weight: 600; font-size: .95rem; }
.nm-suite-texte > span { font-size: .84rem; color: var(--texte-2); }
.nm-plus-tard li { display: flex; align-items: flex-start; gap: .8rem; padding: .75rem 0; }
.nm-plus-tard-icone { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--fond-3); color: var(--texte-2); display: grid; place-items: center; }
.nm-plus-tard-icone svg { width: 18px; height: 18px; }

/* =====================================================================
   LES TABLEAUX DU DOSSIER, ALIGNÉS (Hakim, 28 septembre 2026) : des
   colonnes de même largeur d'un tableau à l'autre — documents,
   consentements, autorisations : le nom, l'état, la date, qui, les
   gestes —, la première ligne de chaque case sur la même hauteur, les
   gestes à droite. Trop étroit, le tableau défile plutôt que d'écraser.
   ===================================================================== */
table.liste.tableau-aligne { table-layout: fixed; min-width: 42rem; }
table.liste.tableau-aligne td { vertical-align: top; overflow-wrap: break-word; }
.tableau-aligne td .etat, .tableau-aligne td .signal { margin-top: -.05rem; }
.tableau-aligne col.c-etat { width: 9rem; }
.tableau-aligne col.c-date { width: 7.5rem; }
.tableau-aligne col.c-date-longue { width: 11rem; }
.tableau-aligne col.c-date-heure { width: 10rem; }
.tableau-aligne col.c-qui { width: 14rem; }
.tableau-aligne col.c-methode { width: 9rem; }
.tableau-aligne col.c-geste { width: 11.5rem; }
.tableau-aligne col.c-copie { width: 7.5rem; }
.tableau-aligne td.cellule-gestes { text-align: right; }
.cellule-gestes > .btn { margin: 0 0 .3rem .3rem; }
table.liste.tableau-aligne tr.ligne-categorie > td { vertical-align: middle; }
/* Les pastilles au-dessus d'un tableau, dans le même cadre. */
.tableau-filtres { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--separateur); }
.tableau-filtres .filtres-pastilles { margin: 0; }

/* Les pastilles des sections de l'onglet Documents : une section à la fois. */
.filtres-pastilles.onglet-sections { margin: 0 0 1rem; }

/* =====================================================================
   ACCÈS EN DEUX COLONNES, CONSENTEMENT SANTÉ (Hakim, 28 septembre 2026)
   ===================================================================== */
.acces-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.2rem; align-items: start; }
@media (max-width: 900px) { .acces-colonnes { grid-template-columns: minmax(0, 1fr); } }
.acces-etat { margin: 0 0 .5rem; }
.acces-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .9rem; }
.acces-lien { display: block; margin-top: .45rem; color: var(--marque-action); font-weight: 600; font-size: .9rem; text-decoration: none; }
.acces-lien:hover { text-decoration: underline; }
.acces-equipe { margin: 0 0 1rem; font-size: .9rem; color: var(--texte-2); }
.acces-equipe a { color: var(--marque-action); font-weight: 600; margin-left: .3rem; text-decoration: none; }
.acces-equipe a:hover { text-decoration: underline; }

.consent-etat { display: flex; align-items: center; gap: .5rem; font-weight: 650; font-size: .98rem; }
.consent-etat svg { width: 20px; height: 20px; flex: none; }
.consent-etat.ok { color: var(--succes); }
.consent-etat.refus { color: var(--danger); }
.consent-etat.attente { color: var(--alerte); }
.consent-detail { margin: .35rem 0 0; font-size: .88rem; color: var(--texte-2); line-height: 1.45; }
.geste-bas { display: block; margin-top: .8rem; }
.geste-bas .btn-texte-petit { margin-left: 0; }
.cahier-signal { display: block; margin-top: .35rem; }

/* =====================================================================
   L'APERÇU, UNE CARTE PAR ONGLET (Hakim, 28 septembre 2026) : le chiffre
   clé en grand, aux couleurs de l'onglet ; les libellés en gris à gauche,
   les valeurs en gras à droite ; les cartes d'une rangée à même hauteur.
   ===================================================================== */
.apercu-grille { align-items: stretch; }
.apercu-chiffre { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem; }
.apercu-chiffre b { font-family: var(--police-titre); font-size: 1.65rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.apercu-chiffre span { color: var(--texte-2); font-size: .86rem; }
.apercu-chiffre.danger b, .apercu-chiffre.danger span { color: var(--danger); }
.apercu-chiffre.ok b, .apercu-chiffre.ok span { color: var(--succes); }
.apercu-chiffre.alerte b { color: var(--alerte); }
.apercu-kv > span.alerte { color: var(--alerte); }
.apercu-kv > span.eteint { color: var(--texte-3); font-weight: 500; }
.apercu-corps .apercu-actions { margin-top: auto; padding-top: .3rem; }

/* ---- La fenetre « Ajouter un membre de l equipe » (29 septembre 2026) ----
   Trois questions numerotees, et des choix qui disent ce qu ils font : une
   carte par fonction ou par acces, cochee en entier plutot qu une case seule
   au bout d une phrase. */
.dialogue.fenetre-equipe { width: min(700px, 100%); }
.fenetre-etape {
    margin: 1.1rem 0 .55rem;
    font-size: .8rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texte-2);
}
.fenetre-equipe .fenetre-etape:first-of-type { margin-top: 0; }
.choix-liste { display: grid; gap: .45rem; }
.choix-liste .choix {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: .65rem;
    padding: .6rem .75rem;
    border: 1px solid var(--bord);
    border-radius: 10px;
    background: var(--fond-1);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.choix-liste .choix:hover { border-color: var(--marque-action); }
.choix-liste .choix.choisi { border-color: var(--marque-action); background: var(--marque-clair); }
.choix-liste .choix input { margin-top: .22rem; flex: none; }
.choix-liste .choix > span { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.choix-liste .choix b { color: var(--texte); font-weight: 600; font-size: .92rem; }
.choix-liste .choix b .etiquette { margin-left: .35rem; font-weight: 500; }
.choix-liste .choix small { color: var(--texte-2); font-size: .82rem; line-height: 1.45; }
.choix-liste .choix:has(input:disabled) { cursor: default; opacity: .7; }

/* ---- La page Instructeurs (29 septembre 2026) ----
   Le chevron y est un vrai bouton : la ligne porte aussi des liens, et
   deplier ne doit pas ouvrir la fiche. */
button.chevron-ligne { background: none; border: 0; padding: 0 .2rem; cursor: pointer; font: inherit; font-size: 1.05rem; }
button.chevron-ligne:hover { color: var(--marque-action); }
.frais-bientot { color: var(--alerte); font-weight: 650; }

/* Une liste sans puces : un cours par ligne, son jour et ses heures dessous. */
.liste-simple { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .5rem; }
.liste-simple li b { display: block; font-weight: 600; font-size: .92rem; }
.liste-simple li .doux { font-size: .84rem; }

/* La fonction a cote du nom, dans l en-tete : elle mene a l onglet Instructeur. */
.etat-fonction { background: var(--marque-clair); color: var(--marque-action); text-decoration: none; }
a.etat-fonction:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- L instructeur et ses aides, en tete de la feuille de presence (29 septembre 2026) ----
   Deux lignes : le role a gauche, les noms au milieu, les gestes a droite.
   Sur telephone, les gestes passent sous les noms. */
.feuille-encadrement {
    display: grid;
    gap: .45rem;
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border: 1px solid var(--bord);
    border-radius: 12px;
    background: var(--fond-1);
}
.feuille-encadrement-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; }
.feuille-role {
    flex: 0 0 6.5rem;
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texte-2);
}
.feuille-noms { flex: 1 1 12rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; min-width: 0; }
.feuille-gestes { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.feuille-gestes select.champ { width: auto; min-width: 11rem; padding-top: .3rem; padding-bottom: .3rem; }
.etiquette-retirer { margin-left: .25rem; padding: 0 .15rem; border: 0; background: none; color: var(--texte-3); font-size: .95rem; line-height: 1; cursor: pointer; }
.etiquette-retirer:hover { color: var(--danger); }

/* ---- Les familles (29 septembre 2026) ----
   La carte « Personnes sans famille » ouvre leur liste : un bouton qui se
   lit comme la note des autres cartes. La regle du club, rappelee au-dessus
   de la liste, sans l alarme d un bandeau colore. */
.chiffre .lien-note { background: none; border: 0; padding: 0; margin-top: .15rem; color: var(--marque-action); font: inherit; font-size: .86rem; font-weight: 600; text-align: left; cursor: pointer; }
.chiffre .lien-note:hover { text-decoration: underline; text-underline-offset: 2px; }
.bandeau.regle-rabais { background: var(--fond-2); border-color: var(--bord); justify-content: space-between; gap: .8rem; }
.bandeau.regle-rabais b { margin-right: .3rem; }
/* Le dessin de la regle, a gauche de la phrase (29 septembre 2026). */
.bandeau.regle-rabais .regle-image { width: 40px; height: 40px; object-fit: contain; flex: none; margin: -.3rem 0; }
.bandeau.regle-rabais .regle-image + span { flex: 1; min-width: 0; }

/* Ceux qui font partie d une famille, dans son panneau : un nom par ligne, Retirer au bout. */
.liste-famille { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.liste-famille li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem .5rem; border: 1px solid var(--bord); border-radius: 8px; }
.liste-famille li .doux { font-size: .84rem; }

/* Les deux sections sous le profil — Parents et contacts, Enfants lies — respirent comme les autres. */
.profil-suite > .bloc + .bloc { margin-top: 1rem; }
/* Le nom d un enfant lie : un lien rouge, comme ceux des contacts. */
.lien-personne { color: var(--marque-action); text-decoration: none; }
.lien-personne:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- L apercu reprend les icones des onglets (29 septembre 2026) ----
   Contacts : celles du tableau Parents et contacts, le mot dans la bulle.
   Sante : celles des rubriques, a la taille d une ligne. */
.apercu-roles { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .2rem; }
.apercu-roles img { width: 22px; height: 22px; object-fit: contain; }
.apercu-roles .doux { margin-left: .25rem; font-size: .84rem; }
.apercu-sante { display: grid; grid-template-columns: 26px max-content minmax(0, 1fr); align-items: center; gap: .55rem; }
.apercu-sante .icone-rubrique-image.apercu-mini { width: 26px; height: 26px; }
.apercu-sante-nom { color: var(--texte-2); font-size: .9rem; }
.apercu-sante-valeur { text-align: right; font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.apercu-sante-alerte .apercu-sante-valeur { color: var(--danger); }

/* ---- Les gestes des cartes de l Apercu (29 septembre 2026) ----
   « Modifier » ouvre la fenetre laterale de l onglet, « Voir → » y mene ;
   le crayon d une ligne ouvre celle de cette ligne. « Personnaliser » vit
   au-dessus des cartes, plus dans la barre des onglets. */
.apercu-tete > h2 { margin-right: auto; }
.apercu-modifier { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; padding: 0; color: var(--texte-2); font: inherit; font-weight: 550; font-size: .86rem; white-space: nowrap; cursor: pointer; }
.apercu-modifier:hover { color: var(--marque-action); }
.apercu-modifier svg, .apercu-crayon svg { width: 14px; height: 14px; }
.apercu-crayon { display: inline-flex; align-items: center; justify-content: center; margin-left: .3rem; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--texte-3); cursor: pointer; vertical-align: middle; }
.apercu-crayon:hover { background: var(--fond-3); color: var(--marque-action); }
.apercu-sante { grid-template-columns: 26px max-content minmax(0, 1fr) auto; }
.apercu-barre { display: flex; justify-content: flex-end; margin: 0 0 .6rem; }
@media print { .apercu-modifier, .apercu-crayon, .apercu-barre { display: none !important; } }

/* ---- L en-tete du membre : l info et les gestes ensemble (29 septembre 2026) ----
   Les gestes suivent les reperes, dans la meme colonne, a
   gauche : une deuxieme colonne a droite surchargeait l en-tete. */
.entete-haut { align-items: flex-start; }
.entete-corps > .entete-actions { margin-left: 0; margin-top: .75rem; justify-content: flex-start; }


/* ---- Sur telephone : les onglets en menu (29 septembre 2026) ---- */
.onglets-menu { display: none; }
@media (max-width: 700px) {
    .onglets-dossier { display: none !important; }
    .onglets-menu { display: block; position: relative; margin: .6rem 0 1rem; }
    .onglets-menu > summary { list-style: none; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); color: var(--texte); font-weight: 600; cursor: pointer; }
    .onglets-menu > summary::-webkit-details-marker { display: none; }
    .onglets-menu .onglet-icone { display: inline-flex; color: var(--marque-action); }
    .onglets-menu .onglet-icone svg { width: 18px; height: 18px; }
    .onglets-menu-chevron { margin-left: auto; width: 18px; height: 18px; color: var(--texte-2); transition: transform .15s; }
    .onglets-menu[open] .onglets-menu-chevron { transform: rotate(180deg); }
    .onglets-menu-liste { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; display: grid; padding: .35rem; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-md); max-height: 70vh; overflow-y: auto; }
    .onglets-menu-liste a { display: flex; align-items: center; gap: .65rem; padding: .65rem .7rem; border-radius: 8px; color: var(--texte); text-decoration: none; font-weight: 500; }
    .onglets-menu-liste a .onglet-icone { color: var(--texte-3); }
    .onglets-menu-liste a.actif { background: var(--marque-clair); color: var(--marque-action); font-weight: 600; }
    .onglets-menu-liste a.actif .onglet-icone { color: var(--marque-action); }
    .onglets-menu-liste .pastille-alerte { margin-left: auto; }
}
/* Un long courriel se coupe plutot que de sortir du cadre de l en-tete. */
.entete-reperes .repere-val { overflow-wrap: anywhere; }

/* ---- En-tete : de vrais boutons, un verbe chacun (29 septembre 2026) ----
   Quatre gestes toujours a la meme place, puis « Plus ». Sur telephone, deux
   par ligne, pleine largeur ; « Plus » prend la ligne entiere s il est seul. */
.menu-plus-liste button { display: block; width: 100%; padding: .5rem .7rem; font-size: .9rem; white-space: nowrap; }
.menu-plus-liste button:disabled { opacity: .5; cursor: default; }
.menu-plus-liste button:disabled:hover { background: none; }
@media (max-width: 700px) {
    .entete-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: stretch; }
    .entete-actions > .btn, .entete-actions > .menu-plus > summary { width: 100%; justify-content: center; white-space: nowrap; font-size: .8rem; padding-left: .35rem; padding-right: .35rem; }
    .entete-actions > .menu-plus:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---- La carte « A regler » de l Apercu (29 septembre 2026) ----
   Une ligne par chose ; rouge pour ce qui ne peut pas attendre. */
.apercu-ligne .point.rouge { background: var(--danger); }
.a-regler-ligne { align-items: flex-start; }
.a-regler-ligne .point { margin-top: .45rem; }
.a-regler-ligne a { color: var(--texte); text-decoration: none; }
.a-regler-ligne a:hover { text-decoration: underline; }
.a-regler-ligne.danger a { color: var(--danger); }

/* ---- Les produits de DojoMasterPro, en haut (29 septembre 2026) ----
   Des onglets compacts dans la barre : le logo du produit tel quel et, en gris
   fonce, ce que fait le produit. L actif : un trait rouge arrondi et une lueur
   tres douce qui monte du bas, pas de carte. Un produit que le club n a pas :
   son logo en gris. */
.produits { display: flex; align-self: stretch; gap: .15rem; margin-right: auto; min-width: 0; }
.produit { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem; padding: 0 .8rem; text-decoration: none; white-space: nowrap; border-radius: 10px 10px 0 0; transition: background .15s; }
.produit .logo-produit { height: 30px; width: auto; transition: transform .15s; }
.produit::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background .15s; }
.produit:hover { background: var(--fond-3); }
.produit:hover::after { background: var(--bord-fort); }
.produit:hover .logo-produit { transform: translateY(-1px); }
.produit.actif { background: linear-gradient(to top, color-mix(in srgb, var(--marque-action) 9%, transparent), transparent 85%); }
.produit.actif::after { background: var(--marque-action); }
.produit-sous { font-size: .72rem; font-weight: 500; line-height: 1.1; color: var(--texte-2); }
.produit.inactif:not(.actif) .logo-produit { filter: grayscale(1); opacity: .5; }
.produit.inactif:not(.actif) .produit-sous { opacity: .72; }
/* Sous 1400 px, les onglets se serrent un peu. */
@media (max-width: 1400px) {
    .produit { padding: 0 .6rem; }
    .produit::after { left: .5rem; right: .5rem; }
}
/* Sur un ecran etroit, les logos rapetissent et perdent leur sous-titre. */
@media (max-width: 1050px) {
    .produit .produit-sous { display: none; }
    .produit .logo-produit { height: 24px; }
    .produit { padding: 0 .45rem; }
}
/* Sur le tableau de bord, la barre de gauche est pleine : le format compact arrive plus tot. */
@media (max-width: 1200px) {
    .app:not(.reduit) .produit .produit-sous { display: none; }
    .app:not(.reduit) .produit .logo-produit { height: 24px; }
    .app:not(.reduit) .produit { padding: 0 .45rem; }
}
/* Le logo d un produit, partout : la version du theme. */
.logo-produit { display: block; }
.logo-produit.logo-sombre { display: none; }
:root[data-theme="sombre"] .logo-produit.logo-clair { display: none; }
:root[data-theme="sombre"] .logo-produit.logo-sombre { display: block; }
.produits-menu { display: none; }
@media (max-width: 820px) {
    .produits { display: none; }
    .produits-menu { display: block; }
    /* Le nom du club cede sa place au produit : il reste en tete du menu. */
    .entete:has(.produits-menu) .entete-titre { display: none; }
    .produits-menu > summary { display: flex; align-items: center; gap: .45rem; padding: .35rem .55rem; border: 1px solid var(--bord); border-radius: var(--rayon-sm); font-weight: 600; font-size: .92rem; color: var(--texte); }
    .produits-menu > summary .logo-produit { height: 26px; width: auto; }
    .produits-menu > summary svg { width: 16px; height: 16px; color: var(--texte-3); }
    .produits-menu .menu-plus-liste { left: 0; right: auto; min-width: 15.5rem; max-width: calc(100vw - 5rem); }
    .produits-menu .menu-plus-liste a { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .55rem .7rem; white-space: normal; }
    .produits-menu .menu-plus-liste a .logo-produit { height: 26px; width: auto; }
    .produits-menu .menu-plus-liste a.actif { background: var(--marque-clair); }
    .produits-menu .menu-plus-liste a.inactif:not(.actif) .logo-produit { filter: grayscale(1); opacity: .5; }
    .produits-menu .menu-plus-liste a.inactif:not(.actif) small { opacity: .72; }
    .produits-menu .menu-plus-liste small { color: var(--texte-2); font-size: .78rem; font-weight: 500; }
}

/* ---- Decouvrir un produit (29 septembre 2026, refait le 30, puis en une seule carte) ----
   Une seule carte, plus deux sections : le produit en tete, ce qui s en vient
   dessous en points sans cadre, les autres produits en preparation au pied. */
.decouvrir-produit { position: relative; overflow: hidden; max-width: 1000px; padding: 2rem 2.2rem 1.4rem; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); }
.decouvrir-produit::after { content: ""; position: absolute; top: -110px; right: -110px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--marque-action) 15%, transparent) 0%, transparent 70%); pointer-events: none; }
.decouvrir-produit > * { position: relative; z-index: 1; }
.decouvrir-intro { display: grid; justify-items: start; gap: .2rem; }
.decouvrir-logo { margin: 0; }
.decouvrir-logo .logo-produit { height: 72px; width: auto; }
.decouvrir-sous { margin: .6rem 0 0; font-weight: 600; color: var(--marque-action); }
.decouvrir-desc { margin: .15rem 0 0; max-width: 62ch; font-size: 1.02rem; line-height: 1.55; }
.decouvrir-etat { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin: .9rem 0 0; }
.decouvrir-actions { display: grid; justify-items: start; gap: .45rem; margin-top: .9rem; }
.decouvrir-actions p { margin: 0; max-width: 62ch; }
.decouvrir-points { margin-top: 1.7rem; padding-top: 1.5rem; border-top: 1px solid var(--separateur); }
.decouvrir-titre { margin: 0 0 1.1rem; font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); }
.decouvrir-points ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 2.2rem; margin: 0; padding: 0; list-style: none; }
.decouvrir-points li { display: flex; align-items: flex-start; gap: .85rem; }
.decouvrir-point { display: grid; gap: .2rem; min-width: 0; }
.decouvrir-point b { font-size: .98rem; font-weight: 600; }
.decouvrir-point span { font-size: .9rem; line-height: 1.5; color: var(--texte-2); }
.decouvrir-icone { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--marque-clair); color: var(--marque-action); }
.decouvrir-icone svg { width: 21px; height: 21px; }
.decouvrir-pied { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.1rem; margin-top: 1.7rem; padding-top: 1.2rem; border-top: 1px solid var(--separateur); }
.decouvrir-pied .decouvrir-titre { margin: 0; }
.decouvrir-autres { display: flex; flex-wrap: wrap; gap: .55rem; }
.decouvrir-autre { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .75rem; background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--rayon-sm); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.decouvrir-autre:hover { border-color: var(--bord-fort); transform: translateY(-1px); }
.decouvrir-autre .logo-produit { height: 24px; width: auto; }
.decouvrir-autre small { font-size: .78rem; color: var(--texte-2); }
@media (max-width: 700px) {
    .decouvrir-produit { padding: 1.3rem 1.2rem 1.1rem; }
    .decouvrir-logo .logo-produit { height: 52px; }
    .decouvrir-points ul { grid-template-columns: minmax(0, 1fr); }
}

/* Le titre du parcours de configuration, sous le grand titre des parametres. */
.config-titre { margin: 0 0 .25rem; font-size: 1.15rem; font-weight: 600; }

/* Lu par les lecteurs d ecran, invisible a l ecran. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Mes produits (29 septembre 2026) ----
   Une ligne par produit : le logo, l abonnement, la configuration, le geste.
   Sur telephone, chaque ligne devient une carte, ses colonnes etiquetees. */
.mes-produits { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; max-width: 1000px; }
.mp-ligne { display: grid; grid-template-columns: minmax(200px, 1.4fr) 1fr 1.3fr auto; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-top: 1px solid var(--separateur); }
.mp-ligne:first-child { border-top: 0; }
.mp-tete { padding-top: .7rem; padding-bottom: .7rem; background: var(--fond-2, var(--fond)); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-3); }
.mp-produit { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.mp-produit .logo-produit { height: 32px; width: auto; }
.mp-produit small { color: var(--texte-2); font-size: .8rem; font-weight: 500; }
.mp-etiq { display: none; }
.mp-config { display: inline-flex; align-items: center; gap: .35rem; color: var(--texte-2); font-size: .9rem; }
.mp-config svg { width: 16px; height: 16px; }
.mp-config-ok { color: var(--succes); font-weight: 600; }
.mp-config-encours { color: var(--alerte); font-weight: 600; }
.mp-action { justify-self: end; display: flex; align-items: center; gap: .4rem; }
@media (max-width: 760px) {
    .mp-tete { display: none; }
    .mp-ligne { grid-template-columns: 1fr 1fr; gap: .7rem 1rem; }
    .mp-produit { grid-column: 1 / -1; }
    .mp-etiq { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-3); margin-bottom: .2rem; }
    .mp-action { grid-column: 1 / -1; justify-self: stretch; }
    .mp-action > .btn { flex: 1; justify-content: center; }
}

/* ---- Le parcours de configuration d un produit (29 septembre 2026) ----
   Des etapes numerotees, faites ou non ; la premiere qui reste est mise en
   avant. Une barre dit ou on en est. */
.config-produit { max-width: 820px; }
.config-tete { margin-bottom: 1.3rem; }
.config-logo.logo-produit { height: 40px; width: auto; margin-bottom: .6rem; }
.config-progres { height: 8px; border-radius: 99px; background: var(--fond-3); overflow: hidden; margin-top: .9rem; }
.config-progres > div { height: 100%; border-radius: 99px; background: var(--marque-action); transition: width .3s; }
.config-compte { margin: .4rem 0 0; font-size: .85rem; font-weight: 600; color: var(--texte-2); }
.bandeau-config, .config-rapide { background: var(--marque-clair); border-color: color-mix(in srgb, var(--marque-action) 30%, transparent); }
.config-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.config-etape { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.15rem; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); }
.config-etape.courante { border-color: color-mix(in srgb, var(--marque-action) 45%, var(--bord)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marque-action) 10%, transparent); }
.config-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .95rem; background: var(--fond-3); color: var(--texte-2); }
.config-etape.courante .config-num { background: var(--marque-action); color: #fff; }
.config-etape.faite .config-num { background: color-mix(in srgb, var(--succes) 16%, transparent); color: var(--succes); }
.config-num svg { width: 18px; height: 18px; }
.config-texte b { font-size: .98rem; }
.config-texte p { margin: .15rem 0 0; color: var(--texte-2); font-size: .88rem; line-height: 1.45; }
.config-statut { display: block; margin-top: .3rem; color: var(--succes); font-size: .8rem; font-weight: 600; }
.config-etape.faite .config-texte b { color: var(--texte-2); }
.config-gestes { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.config-fin { margin-top: 1.2rem; }
.config-fin .bloc-corps { display: grid; gap: .4rem; justify-items: start; }
.config-fin p { margin: 0 0 .5rem; }
@media (max-width: 640px) {
    .config-etape { grid-template-columns: auto 1fr; }
    .config-gestes { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---- Ajouter et retirer un produit (29 septembre 2026) ---- */
.menu-plus-liste button.menu-danger { color: var(--danger); }
.dialogue.fenetre-retrait { width: min(500px, 100%); }
.retrait-effets { margin: 0; padding-left: 1.15rem; display: grid; gap: .5rem; line-height: 1.5; }
/* Parametres > Boutique : ou en est la boutique, et le chemin vers Mes produits. */
.pbo-etat { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .6rem; margin: 0 0 .3rem; }
.pbo-etat a { color: var(--marque-action); font-weight: 600; text-decoration: none; }
.pbo-etat a:hover { text-decoration: underline; }
/* Le groupe « Mes produits » du menu des parametres : chaque produit par son logo. */
.rail-lien.rail-produit { padding-top: .45rem; padding-bottom: .45rem; }
.rail-logo.logo-produit { height: 22px; width: auto; }

/* Les parametres d un produit, sur sa propre page (29 septembre 2026). */
.page-parametres-produit { max-width: 860px; }

/* ---- Membres : une seule ligne d outils (29 septembre 2026) ----
   La recherche et Filtrer a gauche ; la vue, « … » et Nouveau membre a droite. */
.barre-membres { flex-wrap: nowrap; }
.barre-membres .recherche { flex: 1 1 260px; max-width: 420px; min-width: 0; }
.barre-droite { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.barre-membres .btn svg { width: 16px; height: 16px; }
.bascule-icones .btn.btn-icone { width: 2.35rem; }
.bascule-icones .btn.actif { background: var(--marque-clair); border-color: color-mix(in srgb, var(--marque-action) 45%, var(--bord-fort)); color: var(--marque-action); position: relative; z-index: 1; }
.menu-plus-titre { margin: .45rem .6rem .2rem; padding-top: .45rem; border-top: 1px solid var(--separateur); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-3); }
/* Les filtres, dans le panneau de droite : une section sous l autre. */
.panneau-filtres .filtres-panneau { background: none; border: 0; padding: 0; margin: 0; gap: 1.1rem; }
/* Les cases du filtre gardent leur texte a cote, pas dessous comme un champ de formulaire. */
.panneau-corps label.filtre-case { flex-direction: row; align-items: center; gap: .45rem; }
.panneau-corps label.filtre-case > span { font-size: .84rem; font-weight: 500; color: var(--texte); }
.filtres-actifs { margin: -.2rem 0 .9rem; }
@media (max-width: 700px) {
    .barre-membres { flex-wrap: wrap; }
    .barre-membres .recherche { flex-basis: 100%; max-width: none; }
    /* La partie droite se defait : Filtrer, la vue et « … » sur une ligne, puis
       Nouveau membre sur toute la largeur. */
    .barre-droite { display: contents; }
    .barre-droite > .bascule-vue { margin-left: auto; }
    .barre-droite > .btn-principal { flex-basis: 100%; justify-content: center; }
}

/* ---- Parents et contacts, Familles, Tous (29 septembre 2026) ----
   Les memes cartes chiffrees que les pratiquants, la meme ligne d outils, et la
   vue Cartes. Sur telephone, les tableaux cedent la place aux cartes. */
.tuile.sans-image { padding-left: .95rem; }
.tuile.tuile-fixe { cursor: default; }
.tuile.tuile-fixe:hover { border-color: var(--bord); }
.liens-enfants { display: inline-flex; flex-wrap: wrap; gap: .25rem .5rem; }
.liens-enfants a { color: var(--marque-action); font-weight: 600; text-decoration: none; }
.liens-enfants a:hover { text-decoration: underline; }
.roles-parent { display: inline-flex; flex-wrap: wrap; gap: .25rem; justify-content: center; }
.cartes-contacts .membre-carte, .cartes-tous .membre-carte { text-align: center; }
.carte-courriel { overflow-wrap: anywhere; }
.carte-famille { text-align: left; align-items: flex-start; cursor: default; }
.famille-gens { list-style: none; margin: .3rem 0; padding: 0; display: grid; gap: .15rem; font-size: .88rem; }
.famille-gens a { color: var(--texte); text-decoration: none; }
.famille-gens a.pratique { font-weight: 600; }
.famille-gens a:hover { color: var(--marque-action); text-decoration: underline; }
.carte-famille .carte-pied { flex-wrap: wrap; }
.cartes-familles { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cartes-telephone { display: none; }
@media (max-width: 700px) {
    .table-bureau { display: none; }
    .cartes-telephone { display: block; }
}

/* ---- Gestion des cours, batie comme l onglet Cours d un membre (29 septembre 2026) ----
   Les chiffres en tete, puis deux sections cote a cote : les cours inclus a
   gauche, ceux hors abonnement a droite ; memes cartes, memes listes. */
.barre-cours { flex-wrap: nowrap; align-items: center; }
.barre-cours .recherche { flex: 0 1 300px; min-width: 0; }
.barre-cours .btn svg { width: 16px; height: 16px; }
.barre-cours .filtre-groupe { flex: 0 1 220px; width: auto; min-width: 0; }
/* Le pied d une section : revoir les cours qu on ne donne plus. */
.liste-pied { padding: .65rem 1.3rem; border-top: 1px solid var(--bord); }
.liste-pied .btn-texte-petit { margin-left: 0; font-weight: 500; color: var(--texte-2); }
.etat-saison { display: inline-block; font-size: .74rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; background: var(--fond-3); color: var(--texte-2); }
.etat-saison.etat-en-cours { background: var(--succes-fond); color: var(--succes); }
.etat-saison.etat-a-venir { background: var(--marque-clair); color: var(--marque-action); }
.cours-deux { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-bottom: 1.2rem; }
@media (min-width: 1200px) { .cours-deux { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.cours-deux > section.bloc { margin-bottom: 0; }
.cours-deux .bloc-tete h2 { padding-right: 9.5rem; margin-bottom: .5rem; }
/* Les groupes en intertitres, dans la liste des cours inclus. */
.liste-par-groupe { display: flex; flex-direction: column; }
.liste-groupe { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .5rem; padding: .55rem 1.3rem; background: var(--fond-2); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }
.liste-par-groupe > .liste-groupe:first-child { border-top: 0; }
.liste-groupe-nom { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-2); }
.liste-groupe-ages { font-size: .8rem; color: var(--texte-3); }
.btn-texte.btn-texte-petit.liste-groupe-modifier { margin-left: auto; font-size: .8rem; font-weight: 500; color: var(--texte-3); }
.btn-texte.btn-texte-petit.liste-groupe-modifier:hover { color: var(--marque-action); }
/* Une ligne de cours s ouvre d un clic : un bouton qui garde la mise en page de la liste. */
.liste-cours-club li { padding: 0; }
.liste-cours-ouvrir { display: block; width: 100%; padding: .85rem 1.3rem; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.liste-cours-ouvrir:hover { background: var(--fond-2); }
.liste-cours-ouvrir .liste-cours-detail { display: block; }
.liste-cours-chevron { width: 16px; height: 16px; margin-left: auto; flex: none; color: var(--texte-3); }
.liste-cours-instructeur { display: inline-flex; align-items: center; gap: .3rem; color: var(--texte-2); }
.liste-cours-instructeur svg { width: 14px; height: 14px; flex: none; color: var(--texte-3); }
.a-nommer, .liste-cours-instructeur.a-nommer, .liste-cours-instructeur.a-nommer svg { color: var(--alerte); }
.liste-cours-club li.liste-cours-vide { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.3rem; font-size: .86rem; color: var(--texte-3); }
.liste-cours-vide .btn-texte-petit { margin-left: 0; }
.cours-alerte { color: var(--alerte); }
.cours-prix { font-size: .8rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; background: var(--marque-clair); color: var(--marque-action); white-space: nowrap; }
.lien-bouton { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--marque-action); cursor: pointer; }
.lien-bouton:hover { text-decoration: underline; }
/* Le panneau d un cours : onglets pour changer, une seule page pour creer. */
.onglets-panneau { margin: 0 0 .2rem; }
.panneau-section { margin: .6rem 0 -.3rem; font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-3); }
.panneau-corps > .panneau-section:first-child, .panneau-corps > .bandeau + .panneau-section { margin-top: 0; }
.panneau-cours label.responsable-case { flex-direction: row; align-items: center; gap: .5rem; }
/* Le panneau d un cours est large : ses champs tiennent sur deux ou trois colonnes. */
.panneau-cours .champs-edition { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.panneau-cours .champs-edition.champs-titre { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
.panneau-cours .champs-edition > label.deux-colonnes { grid-column: span 2; }
.panneau-cours .saisons-cours { border-top: 0; padding-top: 0; }
.tenue-titre { font-size: .9rem; }
/* « Ne plus donner ce cours » a gauche du pied ; sa confirmation prend le pied entier. */
.btn-texte.btn-texte-petit.pied-arreter, .btn-texte.btn-texte-petit.pied-redonner { margin: 0 auto 0 0; }
.btn-texte.pied-arreter { color: var(--danger); }
.btn-texte.pied-arreter svg, .btn-texte.pied-redonner svg { width: 16px; height: 16px; }
.pied-confirmation { flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.pied-confirmation p { margin: 0; font-size: .88rem; color: var(--texte-2); line-height: 1.45; }
.pied-confirmation p b { display: block; margin-bottom: .15rem; font-size: .95rem; color: var(--texte); }
.pied-confirmation-boutons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .2rem; }
@media (max-width: 700px) {
    .barre-cours { flex-wrap: wrap; }
    .barre-cours .recherche, .barre-cours .filtre-groupe { flex-basis: 100%; }
    .barre-cours .barre-droite { display: flex; flex-wrap: wrap; flex-basis: 100%; margin-left: 0; }
    .barre-cours .barre-droite > .btn { flex: 1; justify-content: center; white-space: nowrap; padding-inline: .55rem; font-size: .86rem; }
    .cours-deux .bloc-tete h2 { padding-right: 0; }
    .panneau-cours .champs-edition, .panneau-cours .champs-edition.champs-titre { grid-template-columns: 1fr; }
    .panneau-cours .champs-edition > label.deux-colonnes { grid-column: auto; }
}

/* ---- Horaires : la saison en menu, une ligne d outils, les chiffres en tete (29 septembre 2026) ---- */
/* Une bascule en texte : le choix actif en rouge doux, comme la vue des membres. */
.bascule-vue .btn.actif { background: var(--marque-clair); border-color: color-mix(in srgb, var(--marque-action) 45%, var(--bord-fort)); color: var(--marque-action); position: relative; z-index: 1; }
.barre-droite > .btn.actif { background: var(--marque-clair); border-color: color-mix(in srgb, var(--marque-action) 45%, var(--bord-fort)); color: var(--marque-action); }
/* Le panneau d une journee : sa saisie de fermeture passe a la ligne. */
.panneau-jour .fermeture-saisie { flex-wrap: wrap; }
@media (max-width: 700px) {
}

/* ---- Evenements : une ligne d outils, les chiffres, une liste comme chez un membre (29 septembre 2026) ---- */
.barre-evenements { flex-wrap: nowrap; align-items: center; }
.barre-evenements .recherche { flex: 0 1 280px; min-width: 0; }
.barre-evenements .filtre-type { flex: 0 1 180px; width: auto; min-width: 0; }
.barre-evenements .btn svg { width: 16px; height: 16px; }
.bloc-evenements { margin-bottom: 1.2rem; }
.liste-evenements { list-style: none; margin: 0; padding: 0; }
.evt-ligne { border-top: 1px solid var(--bord); }
.evt-ligne:first-child { border-top: 0; }
.evt-ligne.passe .evt-rangee { opacity: .6; }
/* La date en pave, comme une page de calendrier : le jour, puis le mois. */
.evt-rangee { display: flex; align-items: center; gap: .8rem; padding-right: 1.3rem; }
.evt-rangee:hover { background: var(--fond-2); }
.evt-ouvrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: .9rem; padding: .85rem 0 .85rem 1.3rem; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.evt-ouvrir:disabled { cursor: default; }
.evt-date { flex: none; width: 3.1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .35rem 0; border: 1px solid var(--bord); border-radius: var(--rayon-sm); background: var(--carte); line-height: 1.05; }
.evt-date b { font-size: 1.25rem; font-weight: 700; color: var(--texte); }
.evt-date span { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--marque-action); }
.evt-texte { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.evt-tete { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .45rem; font-size: .95rem; }
.evt-tete .etiquette { margin: 0; }
.evt-detail { font-size: .84rem; color: var(--texte-2); }
.evt-inscriptions { font-size: .82rem; color: var(--texte-3); }
.evt-inscriptions.urgent { color: var(--alerte); font-weight: 600; }
.evt-droite { flex: none; display: flex; align-items: center; gap: .8rem; }
.evt-prix { display: flex; flex-direction: column; align-items: flex-end; font-size: .74rem; color: var(--texte-3); line-height: 1.2; }
.evt-prix b { font-size: .95rem; color: var(--texte); font-variant-numeric: tabular-nums; }
.evt-inscrits { padding: 0 1.3rem 1rem 5.7rem; }
/* Le panneau d un evenement est large : ses champs tiennent sur plusieurs colonnes. */
.panneau-evenement .champs-edition { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.panneau-evenement label.responsable-case { flex-direction: row; align-items: center; gap: .5rem; }
@media (max-width: 700px) {
    .barre-evenements { flex-wrap: wrap; }
    .barre-evenements .recherche, .barre-evenements .filtre-type { flex-basis: 100%; }
    .barre-evenements .barre-droite { display: flex; flex-wrap: wrap; flex-basis: 100%; margin-left: 0; }
    .barre-evenements .barre-droite > .btn { flex: 1; justify-content: center; white-space: nowrap; }
    .evt-rangee { flex-wrap: wrap; padding: 0 1rem .8rem; }
    .evt-ouvrir { padding: .8rem 0 0; flex-basis: 100%; }
    .evt-droite { margin-left: 4rem; }
    .evt-inscrits { padding: 0 1rem 1rem; }
    .panneau-evenement .champs-edition { grid-template-columns: 1fr; }
}

/* ---- Saisons et fermetures en fenetre, comme les groupes (30 septembre 2026) ----
   Assez larges pour lire le nom d une saison et ses deux dates. */
.dialogue.fenetre-saisons, .dialogue.fenetre-fermetures { width: min(920px, 100%); }

/* ---- Horaires allege (30 septembre 2026) : une seule barre, des pastilles en phrases ---- */
.resume-horaire { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: -.3rem 0 1rem; }
/* LES COULEURS DES PASTILLES DE MEMBRES (Hakim, 30 septembre 2026) : grises au
   repos, sombres au survol, rouge plein quand elles filtrent. Ce qui demande
   un geste s ecrit en rouge, comme les montants en retard. */
.resume-puce { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border: 1px solid var(--bord); border-radius: 999px; background: var(--fond-2); font: inherit; font-size: .84rem; color: var(--texte); }
button.resume-puce { cursor: pointer; }
button.resume-puce:not(.actif):hover { background: var(--btn-survol); border-color: var(--btn-survol); color: #fff; }
.resume-puce.resume-alerte:not(.actif) { color: var(--marque-action); font-weight: 600; }
.resume-puce.resume-alerte:not(.actif):hover { color: #fff; }
.resume-puce.resume-ok { color: var(--succes); }
.resume-puce.actif { color: #fff; background: var(--marque-action); border-color: var(--marque-action); }
.filtre-pastille:disabled { opacity: .5; cursor: default; }
.filtre-pastille:disabled:hover { background: var(--fond-2); border-color: var(--bord); color: var(--texte); }
.resume-retirer { font-size: 1rem; line-height: 1; }
@media (max-width: 700px) {
}

/* ---- Horaires (30 septembre 2026, 3e version) : la periode sous le titre, calendrier ou liste ---- */
.periode { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .6rem; margin: -.3rem 0 1.1rem; }
.periode .btn.petit { line-height: 1; }
.periode-titre { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .6rem; min-width: 0; }
.periode-titre b { font-size: 1.05rem; font-family: var(--police-titre); }
.periode-titre span { font-size: .85rem; color: var(--texte-3); }
.periode .choix-saison { width: auto; min-width: 0; flex: 0 1 170px; }
.periode .periode-duree { margin-left: auto; }
.barre-horaire { flex-wrap: wrap; align-items: center; }
.barre-horaire .btn svg { width: 16px; height: 16px; }
/* La liste : un bloc par jour, une ligne par seance. */
.horaire-liste { display: flex; flex-direction: column; gap: .9rem; }
.horaire-jour { margin: 0; }
.horaire-jour-tete { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .7rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--separateur); }
.horaire-jour-tete b { font-size: .98rem; }
.horaire-jour-tete > span:not(.etiquette) { font-size: .82rem; color: var(--texte-3); }
.horaire-jour.jour-courant .horaire-jour-tete b { color: var(--marque-action); }
.horaire-jour-gerer { margin-left: auto; }
.horaire-table { margin: 0; }
.horaire-table td { vertical-align: middle; }
.horaire-heure { white-space: nowrap; font-variant-numeric: tabular-nums; }
.horaire-table .point-cours { margin-right: .4rem; }
/* Un panneau sans voile laisse la page visible et cliquable derriere lui. */
.panneau-voile.sans-voile { background: transparent; pointer-events: none; animation: none; }
.panneau-voile.sans-voile > .panneau-lateral { pointer-events: auto; }
@media (max-width: 700px) {
    .periode .periode-duree { margin-left: 0; }
    .periode-titre { flex: 1 1 calc(100% - 5rem); }
    .periode .choix-saison { flex: 1 1 140px; }
    .barre-horaire .barre-droite { display: flex; flex-wrap: wrap; flex-basis: 100%; margin-left: 0; }
    .barre-horaire .barre-droite > .btn { flex: 1 1 45%; justify-content: center; white-space: nowrap; }
}

/* ---- Saisons et fermetures : une ligne par element, sans defiler (30 septembre 2026) ----
   Chaque ligne est une grille alignee sur les titres : le nom, les deux dates,
   le compte, puis les gestes. La confirmation s ouvre sous la ligne, sur toute
   sa largeur. Quand la fenetre est etroite, les gestes passent sous les champs,
   et le compte, sans son titre, se tait. */
.reglage-liste { display: flex; flex-direction: column; gap: .5rem; container-type: inline-size; }
.reglage-entete, .reglage-ligne { display: grid; grid-template-columns: minmax(9rem, 1fr) 9.5rem 9.5rem 3.5rem var(--reglage-actions, 15.5rem); gap: .6rem; align-items: center; }
.fenetre-fermetures { --reglage-actions: 11rem; }
.reglage-entete { padding: 0 .75rem; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-3); }
.reglage-entete span:nth-child(4), .reglage-compte { text-align: right; }
.reglage-ligne { padding: .55rem .75rem; border: 1px solid var(--bord); border-radius: var(--rayon-sm); background: var(--carte); }
.reglage-ligne.active { border-color: var(--marque-action); box-shadow: 0 0 0 2px var(--marque-clair); }
.reglage-champs { display: contents; }
.reglage-champs .champ { width: 100%; min-width: 0; }
.reglage-compte { font-size: .9rem; font-weight: 600; color: var(--texte); font-variant-numeric: tabular-nums; }
.reglage-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .3rem .9rem; }
.reglage-actions .btn-texte-petit { margin-left: 0; }
.btn-texte.reglage-danger { color: var(--danger); }
.reglage-confirmation { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .7rem .85rem; border-radius: var(--rayon-sm); background: var(--alerte-fond); }
.reglage-confirmation p { margin: 0; flex: 1 1 320px; font-size: .88rem; color: var(--texte-2); }
.reglage-confirmation p b { display: block; margin-bottom: .1rem; color: var(--texte); }
@container (max-width: 820px) {
    .reglage-entete { display: none; }
    .reglage-ligne { grid-template-columns: 1fr 1fr; }
    .reglage-champs > :first-child { grid-column: 1 / -1; }
    .reglage-compte { display: none; }
    .reglage-champs input[type="date"] { padding-inline: .45rem; }
    .reglage-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---- L instructeur sur la carte : l ecart sur sa ligne (30 septembre 2026) ---- */
.carte-cours .instructeur-ligne { flex-wrap: wrap; }
.instructeur-ecart { flex-basis: 100%; padding-left: calc(22px + .3rem); font-size: .72rem; color: var(--texte-2); }
.instructeur-ecart.prevu { color: var(--alerte); font-weight: 600; }

/* ---- L horaire par heure (30 septembre 2026) ----
   Une rangee par heure de debut, une colonne par jour : ce qui se donne a
   18 h 30 se lit d un trait sur toute la semaine. Chaque case est placee par
   --colonne et --rangee ; sous 760 px de large, la grille se defait et les
   jours s empilent, l heure ecrite sur chaque carte. */
.horaire-grille-cadre { container-type: inline-size; }
.horaire-grille {
    display: grid;
    grid-template-columns: 3.4rem repeat(var(--jours), minmax(0, 1fr));
    grid-template-rows: auto repeat(var(--heures), auto);
    column-gap: .6rem;
    row-gap: .55rem;
    align-items: start;
}
.grille-heure {
    grid-column: 1;
    grid-row: var(--rangee);
    position: relative;
    z-index: 1;
    padding-top: .55rem;
    font-size: .8rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--texte-3);
    text-align: right;
}
.grille-trait {
    grid-column: 1 / -1;
    grid-row: var(--rangee);
    align-self: start;
    margin-top: -.3rem;
    border-top: 1px dashed var(--bord);
}
.grille-fond {
    grid-column: var(--colonne);
    grid-row: 1 / -1;
    margin: -.35rem -.3rem;
    border-radius: var(--rayon);
}
.grille-fond.jour-courant { background: color-mix(in srgb, var(--marque-action) 5%, transparent); }
.grille-fond.jour-ferme {
    background: repeating-linear-gradient(135deg, transparent 0 9px,
                color-mix(in srgb, var(--alerte) 9%, transparent) 9px 18px);
}
.grille-entete { grid-column: var(--colonne); grid-row: 1; position: relative; z-index: 1; min-width: 0; }
.grille-entete .jour-ferme-motif { margin: .4rem 0 0; }
.grille-case {
    grid-column: var(--colonne);
    grid-row: var(--rangee);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-width: 0;
}
.grille-case.jour-ferme .carte-cours { opacity: .45; }

/* Le numero du jour dans sa pastille ; celui d aujourd hui en rouge plein. */
.entete-jour .numero-jour {
    display: inline-block;
    min-width: 1.55em;
    padding: 0 .3em;
    border-radius: 999px;
    text-align: center;
}
.grille-entete.jour-courant .entete-jour { border-bottom-color: var(--marque-action); }
.grille-entete.jour-courant .entete-jour b { color: var(--marque-action); }
.grille-entete.jour-courant .numero-jour { background: var(--marque-action); color: #fff; }

@container (max-width: 760px) {
    .horaire-grille { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }
    .grille-heure, .grille-trait, .grille-fond { display: none; }
    .grille-entete { margin-top: .7rem; }
    .grille-case { flex-direction: row; flex-wrap: wrap; }
    .grille-case .carte-cours { flex: 1 1 220px; }
}

/* ---- Les cartes, teintees de la couleur du cours (30 septembre 2026) ----
   Le cours se reconnait a sa teinte, et la legende dit laquelle est laquelle.
   En vue frequentation, --couleur-cours porte le remplissage. */
.carte-cours {
    --couleur-cours: var(--texte-3);
    position: relative;
    background: color-mix(in srgb, var(--couleur-cours) 9%, var(--carte));
    border: 1px solid color-mix(in srgb, var(--couleur-cours) 24%, var(--bord));
    border-left: 4px solid var(--couleur-cours);
    border-radius: var(--rayon-sm);
    padding: .55rem .65rem .6rem;
    box-shadow: none;
}
.carte-cours .heure { font-size: .74rem; }
.carte-cours b { font-size: .87rem; }

/* TOUTE LA CARTE OUVRE LE COURS, pour qui les configure : le nom est un
   bouton dont l ombre couvre la carte. Le nom de l instructeur passe
   par-dessus : il ouvre son propre panneau. */
.carte-ouvrir {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.carte-ouvrir::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon-sm); }
.carte-ouvrir:focus-visible { outline: none; }
.carte-ouvrir:focus-visible::after { outline: 2px solid var(--marque-action); outline-offset: 1px; }
.carte-cours.ouvrable { transition: box-shadow .12s ease, border-color .12s ease; }
.carte-cours.ouvrable:hover {
    border-color: color-mix(in srgb, var(--couleur-cours) 50%, var(--bord));
    border-left-color: var(--couleur-cours);
    box-shadow: 0 2px 10px rgba(16, 24, 40, .1);
}
.carte-cours.ouvrable:hover .carte-ouvrir b { color: var(--marque-action); }
.carte-cours .instructeur-ligne { position: relative; z-index: 1; }

/* INSTRUCTEUR A DETERMINER : une pastille pointillee a la place des lettres. */
.resume-puce svg { width: 14px; height: 14px; flex: none; }
.entete-jour .numero-jour { font-size: inherit; color: inherit; }
.initiales-instructeur.a-determiner { background: transparent; border: 1px dashed var(--danger); color: var(--danger); }
.carte-cours .instructeur-a-nommer { font-size: .76rem; }

/* Les chiffres de la frequentation, en mots, sous la jauge. */
.carte-cours .jauge-cours { flex-wrap: wrap; row-gap: .25rem; }
.carte-cours .jauge-cours .piste { flex: 1 1 100%; }
.carte-cours .jauge-cours .chiffre { white-space: normal; font-size: .74rem; color: var(--texte-2); }
.carte-cours .jauge-cours .chiffre.doux { color: var(--texte-3); }

/* ---- La legende des cours, qui filtre (30 septembre 2026) ---- */
.legende-cours { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1rem; }
.legende-cours .pastille-cours { display: inline-flex; align-items: center; gap: .4rem; }
.legende-cours .pastille-cours .point { opacity: 1; margin: 0; width: 10px; height: 10px; border-radius: 50%; }
.legende-cours .pastille-cours.actif .point { box-shadow: 0 0 0 2px #fff; }

@media print {
    .horaire-grille { page: paysage; column-gap: 3mm; row-gap: 2.5mm; }
    .grille-case, .carte-cours { break-inside: avoid; }
    .horaire-grille, .horaire-grille *, .legende-cours, .legende-cours * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .carte-cours { padding: 2mm 2.5mm; }
    .carte-ouvrir::after { display: none; }
    .legende-cours .filtre-pastille { background: none !important; border: 0 !important; color: #000 !important; padding: 0 .6rem 0 0; }
    .legende-cours .pastille-cours.actif .point { box-shadow: none; }
}

/* ---- La couleur d un cours, choisie dans la palette (30 septembre 2026) ---- */
.champ-couleur { display: flex; flex-direction: column; gap: .4rem; }
.champ-couleur-titre { font-size: .85rem; font-weight: 550; color: var(--texte-2); }
.palette-cours { display: flex; flex-wrap: wrap; gap: .45rem; }
.palette-cours .pastille-couleur {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--carte);
    background: var(--teinte);
    box-shadow: 0 0 0 1px var(--bord-fort);
    cursor: pointer;
}
.palette-cours .pastille-couleur:hover { box-shadow: 0 0 0 2px var(--texte-3); }
.palette-cours .pastille-couleur.choisie { box-shadow: 0 0 0 2px var(--texte); }
.palette-cours .pastille-couleur:focus-visible { outline: 2px solid var(--marque-action); outline-offset: 2px; }
/* Deja prise par un autre cours : un point blanc au centre, et son nom au survol. */
.palette-cours .pastille-couleur.prise::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
/* Une couleur hors palette : l arc-en-ciel tant qu on ne l a pas choisie. */
.palette-cours .pastille-couleur.autre:not(.choisie) {
    background: conic-gradient(#E2472F, #E8963C, #C9A227, #6FCF3F, #2BB3A3, #4A90D9, #5B5BD6, #B87FE0, #D9569E, #E2472F);
}
.palette-cours .pastille-couleur.autre input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
}
.champ-couleur-alerte { color: var(--alerte); font-weight: 600; }

/* ---- Qui donne ce cours, dans un panneau a droite (30 septembre 2026) ---- */
.instructeur-reponse {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem .9rem;
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    background: var(--fond-2);
}
.instructeur-reponse-texte { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.instructeur-reponse-texte .legende { margin: 0; font-size: .78rem; }
.instructeur-reponse-texte b { display: inline-flex; align-items: center; gap: .4rem; font-size: 1rem; }
.initiales-instructeur.grand { width: 38px; height: 38px; font-size: .8rem; }
.section-instructeur { display: flex; flex-direction: column; gap: .4rem; }
.section-instructeur .panneau-section { margin: .2rem 0 0; }
.section-instructeur .legende { margin: 0; }
.section-instructeur .ligne-instructeur-valeur { min-height: 2.2rem; }
.instructeur-liens { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .9rem; border-top: 1px solid var(--separateur); }

/* ---- La semaine a gauche, la fin de semaine a droite (30 septembre 2026) ----
   Deux grilles, chacune avec ses heures : les rangees du matin ne restent
   plus vides du lundi au vendredi. Leur largeur suit leur nombre de jours.
   Sous 920 px, elles passent l une sous l autre ; sous 760 px, les jours
   s empilent. */
.horaire-grilles { display: flex; align-items: flex-start; gap: 1.2rem; }
.horaire-bloc { flex: var(--part, 1) 1 0; min-width: 0; }
.horaire-bloc.fin-de-semaine { padding-left: 1.2rem; border-left: 1px solid var(--bord); }
@container (max-width: 920px) {
    .horaire-grilles { flex-direction: column; align-items: stretch; gap: 1rem; }
    .horaire-bloc { flex: none; }
    .horaire-bloc.fin-de-semaine { padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--bord); }
}

/* ---- Des cartes plus compactes (30 septembre 2026) ----
   L heure et le nom sur la meme ligne quand la carte est assez large ; le
   public et le groupe en petit, sur une seule ligne. */
.horaire-grille { row-gap: .45rem; }
.grille-case { gap: .35rem; }
.carte-cours { padding: .45rem .55rem .5rem; }
.carte-tete { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4rem; row-gap: 0; }
.carte-tete .heure { flex: none; margin: 0; font-size: .72rem; }
.carte-tete > b, .carte-tete > .carte-ouvrir { flex: 1 1 auto; width: auto; min-width: 0; }
.carte-cours .public { font-size: .72rem; margin-top: .05rem; line-height: 1.3; }
.carte-cours .instructeur-ligne { margin-top: .25rem; }
.carte-cours .marques-cours { margin-top: .25rem; }
.carte-cours b { line-height: 1.25; }
.carte-cours .public { line-height: 1.25; }
.carte-cours .initiales-instructeur { width: 18px; height: 18px; font-size: .56rem; }
/* L en-tete d une colonne sur deux lignes : le jour et son numero, puis le
   nombre de cours. Sur une colonne etroite, rien ne passe plus a la ligne
   au hasard. */
.grille-entete .entete-jour { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .05rem; height: 100%; }
.grille-entete .entete-jour b { white-space: nowrap; }
.grille-entete { align-self: stretch; display: flex; flex-direction: column; }
.grille-entete > .entete-jour, .grille-entete > button.entete-jour { flex: 1 1 auto; }

@media print {
    .horaire-grille-cadre { page: paysage; }
    .horaire-grilles { gap: 5mm; }
    .horaire-bloc.fin-de-semaine { padding-left: 5mm; }
}

/* ---- Gestion des cours : une ligne par cours (30 septembre 2026) ----
   Les cours inclus a gauche, en colonnes qui s alignent d un cours a
   l autre ; les cours hors abonnement a droite, qui restent en place pendant
   qu on fait defiler la gauche. Sous 620 px de large, chaque ligne se replie. */
@media (min-width: 1100px) {
    .cours-deux { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .cours-deux > .cours-hors { position: sticky; top: 5rem; }
}
.lignes-cours { container-type: inline-size; }
.liste-cours-ouvrir.ligne-cours {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.15fr) minmax(0, 1.15fr) 4.4rem 16px;
    gap: .3rem .9rem;
    align-items: center;
    padding: .6rem 1.3rem;
}
.ligne-cours .lc-nom { min-width: 0; }
.ligne-cours .lc-titre { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem .45rem; font-size: .9rem; }
.ligne-cours .lc-titre b { font-weight: 600; }
.ligne-cours .lc-sous { display: block; margin: .1rem 0 0 1.05rem; font-size: .76rem; color: var(--texte-3); }
.ligne-cours .lc-horaire, .ligne-cours .lc-qui, .ligne-cours .lc-places { min-width: 0; font-size: .84rem; color: var(--texte-2); }
.ligne-cours .lc-horaire .ligne { display: block; }
.ligne-cours .lc-places { text-align: right; white-space: nowrap; }
.ligne-cours .lc-manque { color: var(--danger); font-weight: 600; }
.ligne-cours .liste-cours-chevron { margin-left: 0; }
@container (max-width: 620px) {
    .liste-cours-ouvrir.ligne-cours { grid-template-columns: minmax(0, 1fr) 16px; row-gap: .15rem; }
    .ligne-cours .liste-cours-chevron { grid-column: 2; grid-row: 1; }
    .ligne-cours .lc-horaire, .ligne-cours .lc-qui, .ligne-cours .lc-places { grid-column: 1; padding-left: 1.05rem; text-align: left; }
}

/* Les cours hors abonnement, en deux lignes : le nom et le prix, puis la date et le public. */
.liste-cours-ouvrir.ligne-hors { padding: .65rem 1.1rem; }
.ligne-hors .lh-tete { display: flex; align-items: center; gap: .45rem; font-size: .9rem; }
.ligne-hors .lh-tete b { font-weight: 600; min-width: 0; }
.ligne-hors .lh-tete .liste-cours-chevron { margin-left: auto; }
.ligne-hors .lh-prix { margin-left: auto; font-size: .86rem; font-weight: 600; white-space: nowrap; }
.ligne-hors .lh-prix + .liste-cours-chevron { margin-left: .2rem; }
.ligne-hors .lh-detail { display: block; margin-top: .15rem; padding-left: 1.05rem; font-size: .8rem; color: var(--texte-2); }
.ligne-hors .lh-detail .ligne { display: block; }

/* Les groupes sans cours, sur une seule ligne au bas de la liste. */
.groupes-sans-cours { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; padding: .7rem 1.3rem; border-top: 1px solid var(--bord); font-size: .86rem; color: var(--texte-2); }
.groupes-sans-cours .gsc-titre { font-weight: 600; color: var(--danger); }
.groupes-sans-cours .gsc-groupe { display: inline-flex; align-items: baseline; gap: .35rem; }
.groupes-sans-cours .gsc-groupe b { font-weight: 600; color: var(--texte); }
.groupes-sans-cours .btn-texte-petit { margin-left: 0; }
.ligne-cours .lc-qui span + .lc-manque { margin-left: .3rem; }
.liste-par-groupe > .liste-groupe { padding-top: .4rem; padding-bottom: .4rem; }

/* ---- Le panneau d un cours : des champs mieux ranges (30 septembre 2026) ----
   Le groupe sur toute la largeur, les ages par deux ; la saison seule, puis
   premier jour, dernier jour et places sur une ligne ; l horaire en petit
   tableau : jour, debut, fin, salle. */
.panneau-cours .champs-edition.champ-seul { grid-template-columns: minmax(0, 1fr); }
.panneau-cours .champs-edition.champs-paire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panneau-cours .tenue-bloc { gap: .75rem; }
.tenue-saison { display: flex; flex-direction: column; gap: .32rem; }
.tenue-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; align-items: end; }
.prix-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; align-items: end; }
.plages {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .65rem .75rem;
    background: var(--fond-2);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
}
.plages-tete, .plage-ligne {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) 1.9rem;
    gap: .45rem;
    align-items: center;
}
.plages-tete.sans-jour, .plage-ligne.sans-jour { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.9fr) 1.9rem; }
.plages-tete span { font-size: .76rem; font-weight: 650; color: var(--texte-3); }
.plages .champ { padding: .35rem .5rem; font-size: .87rem; }
.panneau-corps label.plage-champ { gap: .2rem; }
.plage-etiquette { display: none; }
.plage-retirer {
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    background: var(--carte);
    color: var(--texte-3);
    font: inherit;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}
.plage-retirer:hover { color: var(--danger); border-color: var(--danger); }
.plages .creneau-ajout { padding-top: .2rem; }
@media (max-width: 700px) {
    .tenue-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panneau-cours .champs-edition.champs-paire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plages-tete { display: none; }
    .plage-ligne, .plage-ligne.sans-jour { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: .5rem; border-bottom: 1px dashed var(--bord); }
    .plage-etiquette { display: block; }
    .plage-geste { grid-column: 1 / -1; justify-self: end; }
}

/* La pastille des groupes sans cours descend jusqu a leur ligne, que le
   bandeau du haut ne cache pas. */
.groupes-sans-cours { scroll-margin-top: 5.5rem; }

/* Un cours a dates precises : la date a la place du jour, un peu plus large. */
.plages-tete.avec-date, .plage-ligne.avec-date { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) 1.9rem; }
@media (max-width: 700px) {
    .plage-ligne.avec-date { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Evenements : par mois, une ligne par evenement (30 septembre 2026) ----
   Les filtres en pastilles sous la barre ; un intertitre par mois ; chaque
   ligne en colonnes : la date, le nom et son type, le lieu, l etat des
   inscriptions et les inscrits, le prix de depart. */
.evt-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; margin: 0 0 1rem; }
.evt-filtres .filtres-pastilles { margin: 0; }
.bloc-evenements { overflow: hidden; }
.evt-mois {
    padding: .45rem 1.3rem;
    background: var(--fond-2);
    border-top: 1px solid var(--bord);
    border-bottom: 1px solid var(--bord);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--texte-2);
}
.bloc-evenements > .evt-mois:first-child { border-top: 0; }
.evt-rangee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 13.5rem) 6.2rem; align-items: center; gap: .9rem; padding-right: 1.3rem; }
.evt-ouvrir { display: grid; grid-template-columns: 3.1rem minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; gap: .9rem; padding: .7rem 0 .7rem 1.3rem; }
.evt-nom { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.evt-lieu { min-width: 0; font-size: .84rem; color: var(--texte-2); }
.evt-etat { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; font-size: .84rem; }
.evt-etat .evt-inscriptions { font-size: .84rem; color: var(--texte-2); }
.evt-etat .evt-inscriptions.ouvertes { color: var(--succes); font-weight: 600; }
.evt-etat .evt-inscriptions.urgent, .evt-etat .evt-inscriptions.complet { color: var(--danger); font-weight: 600; }
.evt-inscrits-bouton { padding: 0; border: 0; background: none; font: inherit; font-size: .82rem; color: var(--texte-2); text-align: left; cursor: pointer; }
.evt-inscrits-bouton:hover { color: var(--marque-action); text-decoration: underline; }
.evt-a-facturer { color: var(--danger); font-weight: 600; }
.evt-rangee .evt-prix { align-items: flex-end; }
.evt-inscrits { padding: 0 1.3rem 1rem 5.3rem; }
/* Une pastille qui n est pas un bouton ne change pas au survol. */
span.resume-puce.resume-alerte:hover { color: var(--marque-action); }

/* Le panneau d un evenement, en blocs : le nom sur deux tiers, puis des
   paires et des trios de champs. */
.panneau-evenement .champs-edition.champs-titre { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
.panneau-evenement .champs-edition.champ-seul { grid-template-columns: minmax(0, 1fr); }
.panneau-evenement .champs-edition.champs-paire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panneau-evenement .champs-edition.champs-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }

@media (max-width: 900px) {
    .evt-rangee { grid-template-columns: minmax(0, 1fr) auto; row-gap: .2rem; padding: 0 1.1rem .7rem 0; }
    .evt-ouvrir { grid-column: 1 / -1; grid-template-columns: 3.1rem minmax(0, 1fr); padding: .7rem 0 0 1.1rem; }
    .evt-lieu { grid-column: 2; }
    .evt-etat { padding-left: 5.1rem; }
    .evt-inscrits { padding: 0 1.1rem 1rem; }
}
@media (max-width: 700px) {
    .panneau-evenement .champs-edition.champs-titre { grid-template-columns: minmax(0, 1fr); }
    .panneau-evenement .champs-edition.champs-trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Inscrire des membres : trois etapes lisibles (30 septembre 2026) ----
   Qui, ce qu ils prennent, puis le bouton, avec la reponse juste a cote. */
.participants-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem; margin: 0 0 .7rem; }
.inscrire-boite { display: flex; flex-direction: column; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid var(--bord); border-radius: var(--rayon-sm); background: var(--fond-2); }
.inscrire-titre { margin: 0; font-size: .95rem; font-weight: 650; color: var(--texte); }
.inscrire-etape { display: flex; gap: .75rem; align-items: flex-start; }
.inscrire-numero { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--marque-action); color: #fff; font-size: .8rem; font-weight: 700; }
.inscrire-contenu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.inscrire-contenu > .legende { margin: 0; }
.inscrire-choisis { display: flex; flex-wrap: wrap; gap: .35rem; }
.inscrire-candidats { display: flex; flex-direction: column; gap: .15rem; max-height: 14rem; overflow: auto; padding: .45rem .6rem; border: 1px solid var(--bord); border-radius: var(--rayon-sm); background: var(--carte); }
.inscrire-options { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.inscrire-action { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding-left: 2.35rem; }
.inscrire-message { font-size: .86rem; font-weight: 600; }
.inscrire-message.erreur { color: var(--danger); }
.inscrire-message.succes { color: var(--succes); }

/* Inscrire, sur la ligne d un evenement ou d un cours hors abonnement. */
.evt-prix .evt-inscrire { margin-top: .35rem; }
.ligne-hors-rangee { display: flex; align-items: center; }
.ligne-hors-rangee > .ligne-hors { flex: 1; min-width: 0; }
.ligne-hors-inscrire { flex: none; margin-right: 1.1rem; }

/* ---- Le calendrier du club (30 septembre 2026) ----
   La grille du mois des evenements, reprise : chaque marque teintee de sa
   couleur, la journee fermee hachuree, le quantieme qui ouvre la journee et
   la case vide qui cree un evenement. La liste range les jours un sous
   l autre, chaque chose a son heure. */
.cal-filtres { margin: 0 0 1rem; }
.cal-filtres-separateur { width: 1px; align-self: stretch; margin: .15rem .3rem; background: var(--bord); }
.cal-bloc { overflow: hidden; }
.cal-case { position: relative; }
.mois-creable { cursor: pointer; }
.mois-creable:hover { box-shadow: inset 0 0 0 1px var(--bord-fort, var(--bord)); }
.cal-fermee {
    background-image: repeating-linear-gradient(135deg, transparent 0 7px,
        color-mix(in srgb, var(--texte-3) 14%, transparent) 7px 8px);
}
.cal-quantieme {
    align-self: flex-start;
    padding: 0 .2rem;
    border: 0;
    border-radius: 3px;
    background: none;
    font: inherit;
    font-size: .78rem;
    color: var(--texte-2);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.cal-quantieme:hover, .cal-quantieme:focus-visible { background: var(--fond-3); color: var(--texte); text-decoration: underline; }
.mois-case.hors-mois .cal-quantieme { color: var(--texte-3); }
.mois-case.mois-aujourdhui .cal-quantieme { color: var(--marque-action); font-weight: 700; }

/* Le « + » du coin : au survol de la case, et au clavier. */
.mois-ajouter {
    position: absolute;
    top: .25rem;
    right: .3rem;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 1px solid var(--bord);
    border-radius: 50%;
    background: var(--carte);
    color: var(--texte-2);
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s;
}
.mois-case:hover .mois-ajouter, .mois-ajouter:focus-visible { opacity: 1; }
.mois-ajouter:hover { color: var(--marque-action); border-color: var(--marque-action); }
@media (hover: none) { .mois-ajouter { display: none; } }

/* Les marques : la couleur de ce qu elles disent, en liseré et en teinte. */
.cal-puce {
    --couleur: var(--texte-3);
    border-left-color: var(--couleur);
    background: color-mix(in srgb, var(--couleur) 11%, var(--carte));
}
button.cal-puce {
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: .74rem;
    line-height: 1.25;
    color: inherit;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    cursor: pointer;
}
button.cal-puce:hover { background: color-mix(in srgb, var(--couleur) 22%, var(--carte)); }
.cal-puce.suite { opacity: .72; }
.cal-puce.barre { text-decoration: line-through; opacity: .65; }
.cal-puce.cal-limite { color: var(--danger); font-weight: 600; }
.cal-puce.cal-fermeture { font-weight: 600; color: var(--texte-2); background: var(--fond-2); }
.cal-puce.cal-saison { font-weight: 600; }
.cal-puce.cal-reguliers { border-left-style: dashed; background: none; color: var(--texte-2); }
.cal-plus {
    align-self: flex-start;
    padding: 0 .3rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: .72rem;
    font-weight: 600;
    color: var(--texte-2);
    cursor: pointer;
}
.cal-plus:hover { color: var(--marque-action); text-decoration: underline; }

/* La liste : un intertitre par jour, une ligne par chose. */
.cal-liste { overflow: hidden; }
.cal-jour-tete {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1.3rem;
    background: var(--fond-2);
    border-top: 1px solid var(--bord);
    border-bottom: 1px solid var(--bord);
}
.cal-liste > .cal-jour-tete:first-child { border-top: 0; }
.cal-jour-tete.aujourdhui { background: var(--marque-clair); }
.cal-jour-lien {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    color: var(--texte);
    cursor: pointer;
}
.cal-jour-lien:hover { color: var(--marque-action); text-decoration: underline; }
.cal-lignes { list-style: none; margin: 0; padding: 0; }
.cal-lignes > li + li { border-top: 1px solid var(--separateur); }
.cal-ligne {
    --couleur: var(--texte-3);
    display: grid;
    grid-template-columns: 4.6rem 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .6rem 1.3rem;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
}
button.cal-ligne { cursor: pointer; }
button.cal-ligne:hover { background: var(--fond-2); }
.cal-ligne .cal-heure { font-size: .82rem; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.cal-ligne .point { width: 10px; height: 10px; border-radius: 50%; background: var(--couleur); }
.cal-ligne.cal-reguliers .point { background: none; border: 2px dashed var(--couleur); }
.cal-ligne .cal-texte { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.cal-ligne .cal-texte b { font-weight: 600; overflow-wrap: anywhere; }
.cal-ligne .cal-texte .detail { font-size: .8rem; color: var(--texte-2); }
.cal-ligne.cal-limite .cal-texte b { color: var(--danger); }
.cal-ligne.barre .cal-texte b { text-decoration: line-through; }
.cal-ligne .cal-chevron { width: 16px; height: 16px; color: var(--texte-3); }
.panneau-journee .cal-lignes { margin: 0 -1.3rem; }

@media (max-width: 700px) {
    .cal-jour-tete { padding: .5rem 1rem; }
    .cal-ligne { grid-template-columns: 3.6rem 10px minmax(0, 1fr) auto; gap: .6rem; padding: .6rem 1rem; }
}

@media print {
    .cal-puce, .cal-puce *, .cal-fermee, .cal-ligne .point {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .cal-quantieme { text-decoration: none; }
}

/* ---- « Inscrire ▾ » dans l en-tete d une personne (30 septembre 2026) ----
   Le menu part du bouton rouge, a gauche des gestes : il s ouvre vers la
   droite, sous lui. Sur telephone, il garde sa demi-ligne — la regle des
   menus impairs en pleine largeur vaut pour « Plus », pas pour lui. */
.menu-inscrire .menu-plus-liste { left: 0; right: auto; }
.menu-inscrire > summary { display: inline-flex; align-items: center; gap: .4rem; }
.menu-inscrire .menu-chevron { font-size: .75rem; line-height: 1; opacity: .85; }
.menu-inscrire[open] .menu-chevron { transform: rotate(180deg); }
@media (max-width: 700px) {
    .entete-actions > .menu-plus.menu-inscrire:nth-child(odd) { grid-column: auto; }
}

/* ---- Le lien de retour d une fiche (30 septembre 2026) ----
   « ← Revenir sur Alice Caron » : un lien, a la place de « ← Membres ». */
.fil-fiche { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .45rem; }
.fil-fiche a { color: var(--marque-action); font-weight: 550; }
.fil-fiche .fil-separateur { color: var(--texte-3); }

/* ---- Les instructeurs, comme les cours et les evenements (30 septembre 2026) ----
   Une ligne d outils ; des pastilles rouges pour ce qui est a regler ; une
   ligne par instructeur, en colonnes, qui s ouvre dans un panneau a droite. */
.barre-instructeurs { flex-wrap: wrap; align-items: center; }
.barre-instructeurs .btn svg { width: 16px; height: 16px; }
.bloc-instructeurs { overflow: hidden; }
.ins-entete, .ligne-instructeur {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.55fr) minmax(0, 1.1fr) minmax(0, .8fr) 16px;
    align-items: center;
    gap: 1rem;
    padding: .7rem 1.3rem;
}
.ins-entete {
    background: var(--fond-2);
    border-bottom: 1px solid var(--bord);
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texte-2);
}
.liste-instructeurs { list-style: none; margin: 0; padding: 0; }
.liste-instructeurs > li + li { border-top: 1px solid var(--separateur); }
.ligne-instructeur {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.ligne-instructeur:hover, .ligne-instructeur.active { background: var(--fond-2); }
.li-nom { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.li-nom b { overflow-wrap: anywhere; }
.li-fonctions { display: flex; flex-wrap: wrap; gap: .25rem; }
.li-cours { display: flex; flex-direction: column; gap: .1rem; min-width: 0; font-size: .86rem; color: var(--texte-2); }
.li-verif { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; min-width: 0; font-size: .84rem; }
.li-acces { font-size: .84rem; min-width: 0; }
.li-chevron { width: 16px; height: 16px; color: var(--texte-3); }
.ins-cours-liste { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
/* La carte Equipe, dans le panneau : sans l ombre d une carte posee sur la page. */
.panneau-instructeur .bloc { box-shadow: none; margin-top: .4rem; }

@media (max-width: 900px) {
    .ins-entete { display: none; }
    .ligne-instructeur { grid-template-columns: minmax(0, 1fr) 16px; row-gap: .35rem; padding: .75rem 1.1rem; }
    .ligne-instructeur .li-nom, .ligne-instructeur .li-cours,
    .ligne-instructeur .li-verif, .ligne-instructeur .li-acces { grid-column: 1; }
    .ligne-instructeur .li-chevron { grid-column: 2; grid-row: 1; }
}
/* « Même foyer » : des liens, séparés par des virgules que la page dessine. */
.apercu-foyer .foyer-nom + .foyer-nom::before { content: ", "; color: var(--texte-2); }

/* Dans une fiche, la colonne espace deja ses blocs (et l ancre de section compte
   pour un bloc) : les pastilles des Documents gardent leur reglage d avant. */
.profil-principal > .filtres-pastilles.onglet-sections { margin-bottom: -.4rem; }

/* ---- Les presences (30 septembre 2026) ----
   Aujourd hui en cartes, en haut ; puis la semaine, un jour sous l autre, une
   ligne par cours qui ouvre sa feuille. */
.barre-presences { flex-wrap: wrap; align-items: center; }
.barre-presences .btn svg { width: 16px; height: 16px; }
.presences-aujourdhui { display: flex; flex-direction: column; gap: .6rem; margin: 0 0 1.2rem; }
.presences-titre { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem; margin: 0; font-family: var(--police-titre); font-size: 1.05rem; }
.presences-titre span { font-family: inherit; font-size: .88rem; font-weight: 500; color: var(--texte-2); }
.presences-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; }
.presences-carte {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .85rem 1rem;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    color: inherit;
    text-decoration: none;
}
.presences-carte:hover { border-color: var(--bord-fort); }
.presences-carte.en-avant { border-color: var(--marque-action); box-shadow: 0 0 0 1px var(--marque-action), var(--ombre); }
.pc-heure { font-size: .82rem; font-weight: 650; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.pc-cours { display: flex; align-items: center; min-width: 0; }
.pc-detail { font-size: .84rem; color: var(--texte-2); }
.pc-bas { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: .45rem; }
.presences-liste { overflow: hidden; }
.presences-note { padding: .6rem 1.3rem; font-size: .84rem; color: var(--texte-2); }
.presences-jour {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem .6rem;
    padding: .5rem 1.3rem;
    background: var(--fond-2);
    border-top: 1px solid var(--bord);
    border-bottom: 1px solid var(--bord);
    font-size: .88rem;
}
.presences-liste > .presences-jour:first-child { border-top: 0; }
.presences-jour.aujourdhui { background: var(--marque-clair); }
.presences-lignes { list-style: none; margin: 0; padding: 0; }
.presences-lignes > li + li { border-top: 1px solid var(--separateur); }
.presences-ligne {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1.6fr) minmax(0, 1.1fr) 8.5rem auto;
    align-items: center;
    gap: 1rem;
    padding: .6rem 1.3rem;
    color: inherit;
    text-decoration: none;
}
.presences-ligne:hover { background: var(--fond-2); }
.presences-ligne.annulee .pl-cours b { text-decoration: line-through; color: var(--texte-2); }
.pl-heure { font-size: .84rem; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.pl-cours { display: flex; align-items: center; min-width: 0; }
.pl-groupe { display: block; font-size: .8rem; color: var(--texte-2); }
.pl-presents { font-size: .84rem; color: var(--texte-2); }
.pl-action { justify-self: end; }
.feuille-etat-pastille.urgent { color: var(--danger); font-weight: 600; }
@media (max-width: 800px) {
    .presences-ligne { grid-template-columns: 5.6rem minmax(0, 1fr) auto; row-gap: .3rem; padding: .65rem 1rem; }
    .presences-ligne .pl-presents, .presences-ligne .pl-etat { grid-column: 2; }
    .presences-ligne .pl-action { grid-column: 3; grid-row: 1 / span 3; }
}

/* ---- La feuille de presence (30 septembre 2026) ----
   Le titre et le carnet sur une ligne ; les pastilles de tri sous le compte. */
.feuille-entete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; }
.feuille-entete .page-titre { margin-bottom: 0; }
.feuille-filtres { margin: .8rem 0 0; }

/* Un jour a venir se lit, ne s ouvre pas. */
.presences-ligne.a-venir:hover { background: none; }
/* Les cours a montrer, dans la ligne d outils des presences (30 septembre 2026). */
.legende-presences { margin: 0; flex: 1 1 auto; min-width: 0; }
@media (max-width: 700px) {
    /* Sur un telephone, les cours tiennent sur une ligne qu on fait glisser :
       onze pastilles empilees repoussaient les cours du jour sous le pouce. */
    .legende-presences { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .15rem; scrollbar-width: none; }
    .legende-presences::-webkit-scrollbar { display: none; }
    .legende-presences .filtre-pastille { flex: 0 0 auto; }
}
/* ---- La page Progression (30 septembre 2026) ----
   Les pastilles d etat et des ceintures visees, puis la liste rangee par
   ceinture visee : une ligne par karateka, qui ouvre sa progression. */
.prog-etats { margin: 0 0 .9rem; }
.barre-progression { margin-bottom: .8rem; }
.prog-ceintures .pastille-ceinture { width: 16px; height: 9px; border-radius: 2px; }
.prog-groupe { padding: 0; overflow: hidden; }
.prog-groupe-tete { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--separateur); background: var(--fond-1); }
.prog-groupe-tete h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.prog-groupe-tete .pastille-ceinture { width: 24px; height: 10px; border-radius: 3px; }
.prog-lignes { list-style: none; margin: 0; padding: 0; }
.prog-lignes li + li { border-top: 1px solid var(--separateur); }
.prog-ligne { display: grid; grid-template-columns: minmax(12rem, 1.1fr) minmax(14rem, 1.4fr) minmax(10rem, .9fr); align-items: center; gap: .5rem 1.2rem; padding: .7rem 1.1rem; color: inherit; text-decoration: none; }
.prog-ligne:hover { background: var(--fond-2); }
.pg-qui { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.pg-qui b { display: block; }
.pg-qui .doux { display: block; font-size: .85rem; }
.pg-etat { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; text-align: right; }
.pg-reste { font-size: .88rem; color: var(--texte-2); }
.pg-venue { font-size: .8rem; color: var(--texte-3); }
.pg-venue.alerte { color: var(--danger); font-weight: 550; }
.prog-rythme { margin-top: 1.2rem; }
@media (max-width: 800px) {
    .prog-ligne { grid-template-columns: minmax(0, 1fr); }
    .pg-etat { align-items: flex-start; text-align: left; }
}
@media (max-width: 700px) {
    /* Sur un telephone, les pastilles tiennent sur une ligne qu on fait glisser,
       comme les cours des presences : onze ceintures empilees repoussaient la liste. */
    .prog-etats, .prog-ceintures { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .15rem; scrollbar-width: none; }
    .prog-etats::-webkit-scrollbar, .prog-ceintures::-webkit-scrollbar { display: none; }
    .prog-etats .filtre-pastille, .prog-ceintures .filtre-pastille { flex: 0 0 auto; }
}
.prog-compte { margin: 0 0 .6rem; font-size: .9rem; font-weight: 600; color: var(--texte-2); }
/* La liste a gauche, les grades decernes a droite (30 septembre 2026). */
.prog-disposition { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.2rem; align-items: start; }
.prog-principal { min-width: 0; }
.prog-cote { position: sticky; top: 1rem; }
.prog-cote .prog-rythme { margin-top: 0; }
.prog-trimestres-h { display: grid; gap: .5rem; }
.prog-trim { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) 2rem; align-items: center; gap: .55rem; font-size: .82rem; }
.prog-trim-mois { color: var(--texte-2); white-space: nowrap; }
.prog-trim-piste { height: 10px; border-radius: 99px; background: var(--fond-3); overflow: hidden; }
.prog-trim-piste i { display: block; height: 100%; border-radius: 99px; background: var(--data-1); }
.prog-trim b { text-align: right; font-variant-numeric: tabular-nums; }
.prog-ligne .membre-vignette { flex: none; }
.pg-identite { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pg-identite .barre-ceinture { width: 120px; }
@media (max-width: 1100px) {
    .prog-disposition { grid-template-columns: minmax(0, 1fr); }
    .prog-cote { position: static; }
}
/* ---- La page Facturation (30 septembre 2026) ----
   Les vues en pastilles, la reprise en bouton blanc a droite ; le retard en
   rouge, jamais en orange. */
.etat-retard { background: var(--danger-fond); color: var(--danger); }
.fac-sections { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 0 0 1rem; }
.fac-sections .filtres-pastilles { margin: 0; }
.fac-annees { margin: 0 0 0 auto; }
@media (max-width: 700px) {
    /* Sur un telephone : un montant sur une ligne, et les pastilles sur une
       ligne qu on fait glisser, comme les presences et la progression. */
    .chiffres-onglet .chiffre .valeur { font-size: 1.45rem; white-space: nowrap; }
    .fac-sections .filtres-pastilles, .fac-filtres { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .15rem; scrollbar-width: none; }
    .fac-sections .filtres-pastilles::-webkit-scrollbar, .fac-filtres::-webkit-scrollbar { display: none; }
    .fac-sections .filtre-pastille, .fac-filtres .filtre-pastille { flex: 0 0 auto; }
    .fac-sections .filtres-pastilles { flex: 1 1 100%; }
}
/* ---------------- Les rapports en six cartes (30 septembre 2026) ----------------
   Une carte par categorie : l icone, le nom, la phrase, combien de rapports.
   La carte entiere est un lien. Puis, dans une categorie, une carte par
   rapport, avec ses vues nommees dessous. */
.rapports-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem 1.2rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.rapports-tete .page-sous { margin-bottom: 0; }
.rapports-recherche { width: min(19rem, 100%); }

.categories-rapports { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
a.categorie-rapport {
    display: flex; flex-direction: column; gap: .35rem;
    background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre);
    padding: 1.25rem 1.3rem 1.05rem; color: inherit; text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.categorie-rapport:hover { border-color: var(--marque-action); box-shadow: var(--ombre-md); transform: translateY(-2px); }
.categorie-rapport-icone { width: 64px; height: 64px; margin-bottom: .45rem; }
.categorie-rapport-nom { font-family: var(--police-titre); font-size: 1.12rem; font-weight: 650; letter-spacing: -.01em; }
.categorie-rapport-desc { font-size: .86rem; color: var(--texte-2); line-height: 1.45; flex: 1; }
.categorie-rapport-pied { display: flex; align-items: center; gap: .35rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--bord); font-size: .82rem; font-weight: 600; color: var(--marque-action); }
.categorie-rapport-pied svg { width: 15px; height: 15px; margin-left: auto; transition: transform .15s; }
a.categorie-rapport:hover .categorie-rapport-pied svg { transform: translateX(3px); }

.categorie-tete { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.categorie-tete-icone { width: 56px; height: 56px; flex: none; }
.categorie-tete .page-titre { margin: 0; }
.categorie-tete .page-sous { margin: .2rem 0 0; }

.rapports-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: .8rem; }
a.rapport-carte {
    display: flex; align-items: center; gap: .9rem;
    background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre);
    padding: 1rem 1.1rem; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
a.rapport-carte:hover { border-color: var(--marque-action); box-shadow: var(--ombre-md); }
.rapport-carte-icone { width: 44px; height: 44px; flex: none; }
.rapport-carte-texte { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1; }
.rapport-carte-texte b { font-size: 1rem; font-weight: 650; }
.rapport-carte-texte > span { font-size: .84rem; color: var(--texte-2); line-height: 1.4; }
.rapport-carte-texte > .rapport-carte-ou { font-size: .76rem; color: var(--texte-3); }
.rapport-carte-vues { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.rapport-carte-vues i { font-style: normal; font-size: .74rem; color: var(--texte-2); background: var(--fond-3); border-radius: 999px; padding: .1rem .55rem; }
.rapport-carte-fleche { width: 18px; height: 18px; color: var(--texte-3); flex: none; }
a.rapport-carte:hover .rapport-carte-fleche { color: var(--marque-action); }

/* Les vues d un rapport, sous son titre ; la periode, en pastilles aussi. */
a.filtre-pastille { display: inline-flex; align-items: center; text-decoration: none; }
.rapport-vues { margin: .1rem 0 .7rem; }
.rapport-periode { align-items: center; }
@media (max-width: 640px) {
    .rapports-liste { grid-template-columns: minmax(0, 1fr); }
    .rapports-recherche { width: 100%; }
    .rapport-vues { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; }
    .rapport-vues::-webkit-scrollbar { display: none; }
    .rapport-vues .filtre-pastille { flex: 0 0 auto; }
}
/* ---------------- La vue d ensemble (30 septembre 2026) ----------------
   Les chiffres a gauche, ce qui demande l attention a droite, la tendance
   dessous. Chaque tuile est un lien vers le rapport qui la detaille. */
.ve-disposition { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.2rem; align-items: start; }
.ve-principal { min-width: 0; }
.ve-cote { position: sticky; top: 1rem; }
.ve-section { margin-bottom: 1.3rem; }
.ve-section > h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-3); margin: 0 0 .6rem; font-weight: 650; }
.ve-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .8rem; }
a.ve-tuile {
    display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 0;
    background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre);
    padding: .9rem 1rem; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
a.ve-tuile:hover { border-color: var(--marque-action); box-shadow: var(--ombre-md); }
.ve-tuile-titre { font-size: .8rem; font-weight: 600; color: var(--texte-2); }
.ve-tuile-valeur { font-family: var(--police-titre); font-size: 1.75rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ve-tuile-valeur.danger { color: var(--danger); }
.ve-tuile-note, .ve-comparaison { font-size: .77rem; color: var(--texte-2); line-height: 1.35; }
.ve-comparaison { color: var(--texte-3); }
.ve-ecart { display: inline-flex; align-items: center; gap: .2rem; font-size: .75rem; font-weight: 650; padding: .05rem .5rem; border-radius: 999px; background: var(--fond-3); color: var(--texte-2); }
.ve-ecart.bon { background: var(--succes-fond); color: var(--succes); }
.ve-ecart.mauvais { background: var(--danger-fond); color: var(--danger); }

.ve-alertes { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.ve-alertes h2 { font-size: .95rem; font-weight: 650; margin: 0; padding: .9rem 1rem .7rem; }
a.ve-alerte { display: flex; align-items: center; gap: .7rem; padding: .65rem 1rem; color: inherit; text-decoration: none; border-top: 1px solid var(--bord); font-size: .86rem; line-height: 1.35; }
a.ve-alerte:hover { background: var(--fond-2); }
.ve-alerte-compte { flex: none; min-width: 2rem; height: 2rem; padding: 0 .45rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .84rem; background: var(--fond-3); color: var(--texte); font-variant-numeric: tabular-nums; }
a.ve-alerte.urgente .ve-alerte-compte { background: var(--danger-fond); color: var(--danger); }
a.ve-alerte svg { width: 16px; height: 16px; margin-left: auto; color: var(--texte-3); flex: none; }
.ve-rien { margin: 0; padding: .7rem 1rem 1rem; font-size: .86rem; color: var(--texte-2); border-top: 1px solid var(--bord); }

.ve-courbes { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .8rem; }
.ve-courbe { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: .9rem 1rem .8rem; min-width: 0; }
.ve-courbe h3 { font-size: .86rem; font-weight: 650; margin: 0 0 .8rem; }
.ve-barres { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .3rem; align-items: end; height: 120px; border-bottom: 1px solid var(--bord); }
a.ve-barre { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; border-radius: 3px 3px 0 0; }
a.ve-barre:hover { background: var(--fond-2); }
.ve-barre i { display: block; flex: 1; max-width: 16px; border-radius: 3px 3px 0 0; background: var(--data-1); opacity: .55; }
.ve-barre i.second { background: var(--marque-action); }
.ve-barre.courant i, a.ve-barre:hover i { opacity: 1; }
.ve-mois { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .3rem; margin-top: .35rem; font-size: .66rem; color: var(--texte-3); text-align: center; white-space: nowrap; overflow: hidden; }
.ve-legende { display: flex; gap: .9rem; font-size: .74rem; color: var(--texte-2); margin-top: .55rem; }
.ve-legende i { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; background: var(--data-1); margin-right: .3rem; }
.ve-legende i.second { background: var(--marque-action); }
@media (max-width: 1100px) {
    .ve-disposition { grid-template-columns: minmax(0, 1fr); }
    .ve-cote { position: static; margin-bottom: 1.3rem; }
}
/* ---------------- Les nouveaux rapports (30 septembre 2026) ---------------- */
/* Une colonne se trie en cliquant son titre. */
th .tri-entete { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; white-space: nowrap; }
th .tri-entete:hover, th .tri-entete.actif { color: var(--marque-action); }
th .tri-fleche { font-size: .7em; margin-left: .3rem; }
th.montant .tri-entete { text-align: right; }

.rapport-sous-titre { font-size: 1rem; font-weight: 650; margin: 1.5rem 0 .6rem; }
.rapport-filtres .filtres-pastilles { margin: 0; }

/* Une part en barre couchee, le pour cent au bout. */
.rrt-barre { display: inline-flex; align-items: center; gap: .55rem; min-width: 11rem; }
.rrt-piste { flex: 1; height: 8px; border-radius: 99px; background: var(--fond-3); overflow: hidden; min-width: 6rem; }
.rrt-piste i { display: block; height: 100%; border-radius: 99px; background: var(--data-1); }
.rrt-barre b { font-variant-numeric: tabular-nums; min-width: 2.8rem; text-align: right; }

/* Le detail d une ligne en petites etiquettes : « Minis 12 · Ados 8 ». */
.rrc-details { display: flex; flex-wrap: wrap; gap: .3rem; }
.rrc-details i { font-style: normal; font-size: .76rem; color: var(--texte-2); background: var(--fond-3); border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; }
.rrc-details i b { color: var(--texte); margin-left: .2rem; font-variant-numeric: tabular-nums; }
tr.rrc-sans td { color: var(--danger); }

.rpc-groupe { display: block; font-size: .76rem; }
.rpc-avant { display: block; font-size: .72rem; }
.rex-ceinture { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.rex-commentaire { max-width: 22rem; font-size: .82rem; }
.rca-seances-filtre { margin: 0 0 .7rem; }
@media print {
    th .tri-fleche { display: none; }
    .rrc-details i { background: none; padding: 0 .4rem 0 0; }
}
/* Le classeur du comptable en tete, puis les quatre fichiers, deux par rangee. */
.rco-classeur { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.rco-classeur h3 { margin: 0 0 .3rem; }
.rco-classeur .legende { margin: 0; max-width: 46rem; }
.rco-fichiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .rco-fichiers { grid-template-columns: minmax(0, 1fr); } }
/* Les dates d une periode choisie, a la hauteur des pastilles qui les entourent. */
.rapport-periode input.champ { padding: .22rem .55rem; font-size: .84rem; border-radius: 999px; }
/* Sur un telephone : l icone de la categorie a gauche de son nom, et les
   chiffres de la vue d ensemble deux par rangee — un seul par rangee
   faisait defiler dix ecrans. */
@media (max-width: 640px) {
    a.categorie-rapport { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: .9rem; row-gap: .2rem; padding: 1rem; }
    .categorie-rapport-icone { width: 52px; height: 52px; grid-row: 1 / span 2; margin: 0; }
    .categorie-rapport-pied { grid-column: 1 / -1; margin-top: .45rem; padding-top: .55rem; }
    .ve-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    a.ve-tuile { padding: .75rem .8rem; }
    .ve-tuile-valeur { font-size: 1.4rem; }
    .categorie-tete-icone { width: 44px; height: 44px; }
}
/* ---------------- Le tableau de bord, cockpit du directeur (30 septembre 2026) ----------------
   Quatre chiffres, Aujourd hui et A votre attention cote a cote, trois
   apercus, l activite recente. Une grille de trois colonnes ; chaque
   section se deplace et se masque comme les cartes de l Apercu. */
.tdb-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem 1.5rem; flex-wrap: wrap; }
.tdb-accueil .page-sous { margin-bottom: .35rem; }
.tdb-accueil .saison-ecran { margin: 0 0 .9rem; }
.tdb-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tdb-actions .btn { display: inline-flex; align-items: center; gap: .45rem; }
.tdb-actions svg { width: 17px; height: 17px; flex: none; }

.tdb-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; grid-auto-flow: row dense; align-items: stretch; }
.tdb-l1 { grid-column: span 1; }
.tdb-l2 { grid-column: span 2; }
.tdb-l3 { grid-column: 1 / -1; }
.tdb-section.carte { min-height: 0; padding: 1rem 1.15rem; }
.tdb-grille.personnalisation .cachee { opacity: .45; }
.tdb-grille .carte > .apercu-poignee { margin: -1rem -1.15rem .8rem; border-radius: var(--rayon) var(--rayon) 0 0; }
.tdb-sans-cadre > .apercu-poignee { margin: 0 0 .6rem; border-radius: var(--rayon-sm); }
@media (max-width: 1100px) { .tdb-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tdb-l2 { grid-column: 1 / -1; } }
@media (max-width: 760px) { .tdb-grille { grid-template-columns: minmax(0, 1fr); } .tdb-l1, .tdb-l2 { grid-column: 1 / -1; } }

.tdb-indicateurs { display: flex; flex-wrap: wrap; gap: .8rem; }
.tdb-indicateurs > * { flex: 1 1 calc(25% - .6rem); min-width: 0; }
@media (max-width: 900px) { .tdb-indicateurs > * { flex-basis: calc(50% - .4rem); } }
.tdb-attente { color: var(--texte-3); }
.tdb-retard { color: var(--danger); font-weight: 600; }

.tdb-carte-tete { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin-bottom: .7rem; }
.tdb-carte-tete h3 { font-size: .95rem; font-weight: 650; margin: 0; }
.tdb-date { font-weight: 500; color: var(--texte-2); margin-left: .35rem; font-size: .88rem; }
.tdb-lien { font-size: .82rem; color: var(--marque-action); text-decoration: none; white-space: nowrap; font-weight: 600; }
.tdb-lien:hover { text-decoration: underline; }
.tdb-vide { margin: 0; font-size: .88rem; color: var(--texte-2); }
.tdb-rien { color: var(--succes); font-weight: 550; }

/* Aujourd hui : une ligne par cours, le bouton au bout. */
.tdb-cours { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tdb-cours-ligne { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) auto auto auto; align-items: center; gap: .4rem .9rem; padding: .6rem 0; border-top: 1px solid var(--separateur); }
.tdb-cours-ligne:first-child { border-top: 0; padding-top: 0; }
.tdb-cours-ligne.annulee { opacity: .55; }
.tdb-cours-heure { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .88rem; white-space: nowrap; }
.tdb-cours-quoi { display: flex; align-items: flex-start; gap: .5rem; min-width: 0; }
.tdb-cours-quoi .point-cours { margin-top: .4rem; flex: none; }
.tdb-cours-qui { display: block; font-size: .8rem; color: var(--texte-2); }
.tdb-cours-qui.manque { color: var(--danger); font-weight: 600; }
.tdb-cours-nombre { font-size: .82rem; color: var(--texte-2); white-space: nowrap; }
.tdb-anniversaires { margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid var(--separateur); font-size: .85rem; color: var(--texte-2); }
.tdb-anniversaires > span { margin-right: .3rem; }
.tdb-anniversaires { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .3rem; }
.tdb-anniversaires img { width: 30px; height: 30px; object-fit: contain; margin-right: .3rem; }
@media (max-width: 760px) {
    .tdb-cours-ligne { grid-template-columns: auto minmax(0, 1fr); }
    .tdb-cours-nombre, .tdb-cours-etat { grid-column: 2; }
    .tdb-cours-action { grid-column: 1 / -1; }
}

/* A votre attention : un compte, une phrase, une fleche. */
.tdb-alertes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tdb-alertes > li + li { border-top: 1px solid var(--separateur); }
a.tdb-alerte, details.tdb-alerte > summary { display: flex; align-items: center; gap: .65rem; padding: .5rem .25rem; color: inherit; text-decoration: none; font-size: .86rem; line-height: 1.3; cursor: pointer; border-radius: var(--rayon-sm); }
details.tdb-alerte > summary { list-style: none; }
details.tdb-alerte > summary::-webkit-details-marker { display: none; }
a.tdb-alerte:hover, details.tdb-alerte > summary:hover { background: var(--fond-2); }
.tdb-alerte-image { width: 34px; height: 34px; object-fit: contain; flex: none; }
.tdb-alerte-icone { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--fond-3); color: var(--texte-2); }
.tdb-alerte-icone svg { width: 18px; height: 18px; }
.tdb-alerte-compte { flex: none; min-width: 1.9rem; text-align: right; font-weight: 700; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.tdb-alerte.urgente .tdb-alerte-compte { color: var(--danger); }
.tdb-alerte-texte { flex: 1; min-width: 0; color: var(--texte-2); }
.tdb-alerte-fleche, .tdb-alerte-chevron { width: 16px; height: 16px; color: var(--texte-3); flex: none; transition: transform .15s; }
details.tdb-alerte[open] .tdb-alerte-chevron { transform: rotate(180deg); }
.tdb-alerte-details { display: flex; flex-direction: column; gap: .1rem; margin: 0 0 .5rem 4.9rem; }
.tdb-alerte-details a { display: flex; gap: .45rem; font-size: .82rem; color: var(--texte-2); text-decoration: none; padding: .2rem .3rem; border-radius: var(--rayon-sm); }
.tdb-alerte-details a:hover { background: var(--fond-2); color: var(--texte); }
.tdb-tout-voir { margin-top: .5rem; background: none; border: 0; padding: .2rem 0; font: inherit; font-size: .84rem; font-weight: 600; color: var(--marque-action); cursor: pointer; }
.tdb-tout-voir:hover { text-decoration: underline; }

/* Les apercus. */
.tdb-grand { font-family: var(--police-titre); font-size: 1.8rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tdb-grand span { font-size: .85rem; font-weight: 500; color: var(--texte-2); letter-spacing: 0; margin-left: .25rem; }
.tdb-note { margin: .3rem 0 0; font-size: .82rem; color: var(--texte-2); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.tdb-barres { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem; align-items: end; height: 70px; margin-top: .9rem; border-bottom: 1px solid var(--bord); }
.tdb-barre { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
.tdb-barre i { display: block; flex: 1; max-width: 14px; border-radius: 3px 3px 0 0; background: var(--data-1); }
.tdb-barre i.second { background: var(--marque-action); }
.tdb-mois { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem; margin-top: .3rem; font-size: .68rem; color: var(--texte-3); text-align: center; }
.tdb-parts { display: flex; flex-direction: column; gap: .45rem; margin-top: .8rem; }

.tdb-evenements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tdb-evenements li + li { border-top: 1px solid var(--separateur); }
.tdb-evenements a { display: flex; gap: .8rem; padding: .55rem 0; color: inherit; text-decoration: none; }
.tdb-evenements a:hover b { color: var(--marque-action); }
.tdb-ev-date { flex: none; width: 2.8rem; text-align: center; border: 1px solid var(--bord); border-radius: var(--rayon-sm); padding: .2rem 0; line-height: 1.1; align-self: flex-start; }
.tdb-ev-date b { display: block; font-size: 1.1rem; }
.tdb-ev-date span { font-size: .68rem; text-transform: uppercase; color: var(--marque-action); font-weight: 650; }
.tdb-ev-quoi { display: flex; flex-direction: column; gap: .2rem; min-width: 0; font-size: .84rem; }
.tdb-ev-piste { display: block; height: 6px; border-radius: 99px; background: var(--fond-3); overflow: hidden; max-width: 12rem; }
.tdb-ev-piste i { display: block; height: 100%; background: var(--data-1); border-radius: 99px; }
.tdb-ev-ferme { font-size: .78rem; }

/* L activite recente, sur deux colonnes quand la place le permet. */
.tdb-activite { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.4rem; }
.tdb-activite li { border-top: 1px solid var(--separateur); }
.tdb-activite a { display: grid; grid-template-columns: 7.4rem 26px minmax(0, 1fr); align-items: center; gap: .6rem; padding: .45rem 0; color: inherit; text-decoration: none; font-size: .84rem; }
.tdb-activite a:hover .tdb-act-texte { color: var(--marque-action); }
.tdb-act-quand { color: var(--texte-3); font-size: .78rem; white-space: nowrap; }
.tdb-act-icone { width: 26px; height: 26px; border-radius: 999px; background: var(--fond-3); color: var(--texte-2); display: inline-flex; align-items: center; justify-content: center; }
.tdb-act-icone svg { width: 15px; height: 15px; }
.tdb-act-icone.argent { background: var(--succes-fond); color: var(--succes); }
.tdb-act-icone.alerte { background: var(--danger-fond); color: var(--danger); }
.tdb-act-texte { min-width: 0; }
@media (max-width: 900px) { .tdb-activite { grid-template-columns: minmax(0, 1fr); } .tdb-activite a { grid-template-columns: 6.2rem 26px minmax(0, 1fr); } }

/* Encaisser depuis l accueil : on choisit qui paie. */
.tdb-payeur { width: min(34rem, calc(100vw - 2rem)); }
.tdb-payeurs { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; max-height: 22rem; overflow-y: auto; }
.tdb-payeurs button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .8rem; text-align: left; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon-sm); padding: .6rem .8rem; font: inherit; font-size: .88rem; color: inherit; cursor: pointer; }
.tdb-payeurs button:hover { border-color: var(--marque-action); }
.tdb-payeur-du { display: flex; flex-direction: column; align-items: flex-end; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tdb-payeur-du .doux { font-weight: 400; font-size: .76rem; }
@media print { .tdb-actions, .tdb-tout-voir { display: none !important; } }