/* ============================================================
   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;
    --fond-3:        #F3F4F6;
    --carte:         #FFFFFF;

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

    --bord:          #E4E7EC;
    --bord-fort:     #D0D5DD;

    --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, .05);
    --ombre-md:      0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);

    --barre:         248px;

    --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;
    --fond-3:        #232326;
    --carte:         #18181A;

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

    --bord:          #27272A;
    --bord-fort:     #3A3A3E;

    --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);
    background: var(--fond-2);
    -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(--bord);
    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(--bord);
    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; }

/* 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; }

/* ---------------- 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(--bord);
}
.pied-marque .pied-ligne { display: flex; align-items: center; gap: .6rem; }
.pied-marque small { font-size: .82rem; color: var(--texte-3); }
.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(--bord); }
.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, surlignee comme au survol.

   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. */
.nav-lien.actif,
.nav-lien.active { background: var(--fond-3); color: var(--texte); 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;
}

.barre-compte {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    border-top: 1px solid var(--bord);
    flex: none;
}
.avatar {
    width: 34px; height: 34px;
    flex: none;
    border-radius: 99px;
    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; }

/* 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(--bord);
    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(--fond-3); color: var(--texte); }
.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; }
.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(--bord);
    white-space: nowrap;
}
table.liste td { padding: .7rem 1rem; border-bottom: 1px solid var(--bord); vertical-align: middle; }
table.liste tr:last-child td { border-bottom: 0; }
table.liste tbody tr:hover { background: var(--fond-2); }

.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); }

/* ---------------- 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;
}
.btn:hover { background: var(--fond-3); }
.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); }

/* 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(--bord); }
.portail-pied-marque { display: flex; flex-direction: column; gap: .15rem; }
.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(--bord); 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); }

.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); }

.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;
}
.bloc-tete { padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--bord); background: var(--fond-2); }
.bloc-tete h2 { font-size: 1.02rem; font-weight: 600; margin-bottom: .2rem; }
.bloc-tete p { margin: 0; font-size: .88rem; color: var(--texte-2); max-width: 72ch; }
.bloc-corps { padding: 1.3rem; display: flex; flex-direction: column; gap: 1rem; }

.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-ceinture {
    width: 46px; height: 46px;
    flex: none;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .22);
}
.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; }

/* =====================================================================
   Contacts d urgence
   ===================================================================== */

/* Des cartes plutot qu un tableau : en cas d urgence on cherche UN numero,
   et un tableau se lit ligne par ligne. Le numero est le plus gros element,
   et cliquable — sur une tablette au dojo, il compose l appel. */
.urgences { display: flex; flex-wrap: wrap; gap: .7rem; }

.urgence {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    padding: .7rem .9rem;
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    background: var(--fond-1);
    cursor: pointer;
    min-width: 190px;
}

.urgence:hover { border-color: var(--marque-action); }
.urgence > .doux { font-size: .82rem; }

.urgence-tel {
    margin-top: .2rem;
    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; }

/* =====================================================================
   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(--bord);
    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(--bord);
}
.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(--marque-action);
    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. */
.alerte-reglage {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin-top: .7rem;
    padding: .8rem 1rem;
    background: var(--marque-clair);
    border: 1.5px solid var(--marque-action);
    border-radius: var(--rayon-sm);
}
.alerte-reglage svg { width: 19px; height: 19px; flex: none; color: var(--marque-action); margin-top: .12rem; }
.alerte-reglage b { display: block; color: var(--marque-fonce); 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;
}
.responsable-case input { width: 15px; height: 15px; accent-color: var(--marque-action); }
.responsable-case > span { font-weight: 400 !important; color: var(--texte-2) !important; }

@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(--bord);
    padding: .4rem .5rem;
}
.document tbody td { padding: .5rem; border-bottom: 1px solid var(--bord); 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(--bord);
    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; }

    /* 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 releve de compte ----
   La reponse en une phrase, puis une facture par bloc avec ses versements
   dessous. 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); }

.facture-membre {
    border: 1px solid var(--bord);
    border-radius: 10px;
    overflow: hidden;
}

.facture-membre-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem .9rem;
    background: var(--fond-2);
}

.facture-membre-tete > div:first-child {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.facture-membre-tete span.doux { font-size: .82rem; }
.facture-membre-tete .montant { display: block; margin-bottom: .25rem; }

/* Un versement : la date et le payeur a gauche, le montant a droite. */
.facture-membre-recu {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem .9rem;
    font-size: .85rem;
    border-top: 1px solid var(--bord);
}

/* 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; }

.puce-alerte {
    display: inline-grid;
    place-items: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--marque-action);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    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(--bord);
}
.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; }
    .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(--bord);
    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 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(--bord);
}

/* 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(--bord);
}
.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;
}

@media (max-width: 760px) {
    .mois-case { min-height: 64px; }
    .jalon { 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); }

.feuille-nom { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.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; }

/* Le symbole d alerte : il dit qu il y a quelque chose a savoir, jamais quoi.
   Le detail vit dans la fiche, ou sa consultation est journalisee. */
.feuille-alerte {
    display: inline-grid;
    place-items: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--alerte);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    flex: none;
}

/* ---- 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(--bord);
}

/* 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(--bord);
    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; }

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

/* ---- « Ce qui vous attend » : la seule zone du tableau de bord qui reclame ----
   Elle passe AVANT les statistiques et ne s affiche que si elle a quelque chose
   a dire. Une carte qui repete « rien a faire » chaque jour cesse d etre lue, et
   ne se verra plus le jour ou elle dira autre chose. */
.attente {
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    background: var(--fond-1);
    padding: .9rem 1.1rem 1rem;
    margin-bottom: 1.1rem;
}

.attente-tete h3 { font-size: .93rem; font-weight: 600; color: var(--texte-2); }

.attente-corps {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2.2rem;
    margin-top: .6rem;
}

/* Chaque tache est un LIEN vers l endroit ou elle se regle : constater sans
   pouvoir agir ferait une deuxieme liste a recopier. */
.attente-item {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    text-decoration: none;
    color: inherit;
    padding: .25rem .4rem;
    margin: -.25rem -.4rem;
    border-radius: var(--rayon-sm);
}
.attente-item:hover { background: var(--fond-3); }

.attente-item b {
    font-family: var(--police-titre);
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.attente-item span { font-size: .88rem; color: var(--texte-2); }

/* Le rouge pour ce qui coute : un impaye, un membre sans couverture. Une feuille
   oubliee se rattrape, elle ne merite pas la meme alarme. */
.attente-urgent { color: var(--jauge-plein); }

/* La portee d une carte : « 8 semaines », « 12 mois ». C etait un bouton qui
   promettait de changer la periode et n avait aucun gestionnaire. */
.carte-portee { font-size: .82rem; color: var(--texte-3); white-space: nowrap; }

.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(--bord);
}
.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; }



/* « 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 : l entonnoir et les barres d exigences ----
   Chaque segment de l entonnoir est un FILTRE : le chiffre qu on clique est la
   liste qu on obtient. */
.prog-entonnoir {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .7rem;
    margin-bottom: 1.1rem;
}

.prog-segment {
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    background: var(--fond-1);
    padding: .75rem .9rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.prog-segment:hover { border-color: var(--bord-fort); }
.prog-segment.actif { border-color: var(--marque-action); }

.prog-segment b {
    font-family: var(--police-titre);
    font-size: 1.6rem;
    font-weight: 650;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.prog-segment span { font-size: .82rem; color: var(--texte-2); }

/* 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(--alerte); }
.prog-exigence.bloque .prog-nom,
.prog-exigence.bloque .prog-valeur { color: var(--alerte); font-weight: 600; }


/* Les grades decernes, par trimestre : des colonnes sobres, la valeur au-dessus. */
.prog-trimestres {
    display: flex;
    align-items: flex-end;
    gap: .9rem;
    min-height: 110px;
}

.prog-trimestre {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
}

.prog-trimestre b { font-size: .82rem; font-variant-numeric: tabular-nums; }
.prog-colonne { width: 100%; max-width: 46px; border-radius: 4px 4px 0 0; background: var(--data-1); }
.prog-etiquette { font-size: .74rem; color: var(--texte-3); white-space: nowrap; }

/* ---------------- 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);
    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(--bord);
    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);
}

.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(--bord); }
.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(--bord);
}
.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 QUE LE CLUB SAIT FAIRE — regroupe par competence, pas par personne : c est
   la competence qu on cherche le jeudi soir, pas quelqu un en particulier. */
.prog-competence { padding: .7rem 0; border-top: 1px solid var(--bord); }
.prog-competence:first-child { border-top: 0; padding-top: 0; }
.prog-competence-tete { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.prog-competence-tete b { font-size: .95rem; font-weight: 600; }

.prog-detenteurs { list-style: none; margin: .35rem 0 0; padding: 0; }
.prog-detenteurs li { padding: .12rem 0; font-size: .88rem; }
.prog-detenteurs span { font-size: .82rem; color: var(--texte-2); margin-left: .45rem; }

/* 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:hover { background: var(--fond-3); }

/* 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;
}

/* QUI PEUT VENIR CHERCHER L ENFANT, sur la feuille de presence. En toutes
   lettres et non derriere un symbole : l instructeur qui doit rendre un enfant
   n a pas le temps d ouvrir une fiche, et « il y a quelque chose a savoir » ne
   lui dit pas s il doit le laisser partir. */
.feuille-recuperation {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin: .3rem 0 0;
    font-size: .82rem;
    color: var(--texte-2);
}
.feuille-recuperation svg { width: 14px; height: 14px; flex: none; margin-top: .15rem; }

/* 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. */
.puce-recup {
    display: inline-flex;
    align-items: center;
    margin-left: .3rem;
    color: var(--texte-3);
    vertical-align: middle;
}
.puce-recup svg { width: 13px; height: 13px; }

/* ---- Onglet Instructeurs : la carte est le bouton ----
   La grille de l horaire, mais chaque case porte un nom et se clique. Elle
   reprend le style de .carte-cours : c est le meme objet vu par l autre bout,
   et le club ne doit pas avoir a reconnaitre deux grilles. */
.carte-instructeur {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}
.carte-instructeur:hover:not(:disabled) { border-color: var(--marque-action); }
.carte-instructeur:disabled { cursor: default; }
.carte-instructeur.carte-ouverte {
    border-color: var(--marque-action);
    box-shadow: 0 0 0 2px var(--marque-action) inset;
}
/* Le nom sous le cours : c est ce qu on vient lire ici, donc il ne se fond pas
   dans le sous-titre. */
.carte-instructeur .instructeur-carte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin-top: .35rem;
    font-size: .82rem;
}
.carte-instructeur .instructeur-carte b { display: inline; font-size: .82rem; }

/* ---- Le trou se voit ----
   Une case sans instructeur est ce qu on vient chercher sur cet ecran. Du meme
   gris que les autres, il fallait lire les quinze cartes une a une. Le liserre
   de couleur du groupe reste : c est lui qui dit de quel cours il s agit. */
.carte-instructeur.sans-instructeur {
    background: var(--alerte-fond);
    border-color: var(--alerte);
}
.carte-instructeur.sans-instructeur:hover:not(:disabled) { border-color: var(--alerte); }

tr.sans-instructeur td { background: var(--alerte-fond); }

.sans-instructeur-mot { color: var(--alerte); font-weight: 600; }

/* 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;
    }

    /* L alerte devient un gris fonce : une trame orangee sur une imprimante
       laser sort en gris pale et le trou disparait justement sur le papier ou
       on le cherche. Le gras suffit a le distinguer. */
    tr.sans-instructeur td { background: none; }
    .sans-instructeur-mot { color: #000; font-weight: 700; }

    /* 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; }

/* Le crayon dit que la carte se modifie. Sans lui, rien ne distingue une
   carte cliquable d une case d horaire qu on ne fait que lire. */
.carte-instructeur { position: relative; }
.carte-instructeur .crayon {
    position: absolute;
    top: .45rem;
    right: .45rem;
    width: 13px;
    height: 13px;
    opacity: .3;
    transition: opacity .12s;
}
.carte-instructeur:hover:not(:disabled) .crayon { opacity: .9; }
.carte-instructeur:disabled .crayon { display: none; }

@media print {
    .dialogue-voile { display: none !important; }
    /* Le crayon dit « ceci se clique » : sur du papier, il ne dit rien. */
    .carte-instructeur .crayon { 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; }

/* ---- Le pli des papiers manquants ----
   Un document par ligne etait juste, mais trois lignes a « 144 n ont pas
   signe » se ressemblaient au point de noyer les vraies urgences au-dessus. */
.attente-pli { display: block; padding: 0; margin: 0; }
.attente-pli:hover { background: none; }
.attente-pli > summary {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    cursor: pointer;
    list-style: none;
    padding: .25rem .4rem;
    margin: -.25rem -.4rem;
    border-radius: var(--rayon-sm);
}
.attente-pli > summary::-webkit-details-marker { display: none; }
.attente-pli > summary:hover { background: var(--fond-3); }
/* Le chevron dit qu il y a quelque chose dessous : sans lui, la ligne se lit
   comme les autres et personne ne pense a l ouvrir. */
.attente-pli > summary::after {
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid var(--texte-3);
    border-bottom: 2px solid var(--texte-3);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .12s;
}
.attente-pli[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

.attente-pli-corps { display: flex; flex-direction: column; gap: .1rem; margin: .5rem 0 0 .2rem; }
.attente-pli-corps a {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    text-decoration: none;
    color: inherit;
    padding: .2rem .4rem;
    border-radius: var(--rayon-sm);
}
.attente-pli-corps a:hover { background: var(--fond-3); }
.attente-pli-corps b { font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.attente-pli-corps span { font-size: .88rem; color: var(--texte-2); }

/* ---- 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 catalogue des rapports ----------------
   Sept familles, une carte par rapport avec la phrase qui dit a quoi il sert.
   La carte entiere est un lien : on clique n importe ou dessus. */
.catalogue-cat { margin-bottom: 1.6rem; }
.catalogue-cat h2 { margin: 0 0 .6rem; }

.cartes-rapports {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .7rem;
}

a.carte-rapport {
    display: block;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-sm);
    padding: .8rem .95rem;
    color: inherit;
    text-decoration: none;
    transition: border-color .12s;
}
a.carte-rapport:hover { border-color: var(--marque-action); }
.carte-rapport b { display: block; margin-bottom: .25rem; font-weight: 600; }
.carte-rapport span { display: block; font-size: .8rem; color: var(--texte-2); line-height: 1.35; }

/* ---------------- 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; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-1); color: var(--texte); box-shadow: var(--ombre-md); }
.cadre-legal[open] { display: flex; flex-direction: column; }
.cadre-legal::backdrop { background: rgba(16, 24, 40, .55); }
.cadre-legal-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .7rem .6rem 1rem; border-bottom: 1px solid var(--bord); font-weight: 650; }
.cadre-legal iframe { flex: 1; width: 100%; border: 0; background: #fff; }
@media (max-width: 640px) {
    .cadre-legal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; border: 0; }
}