/* ==========================================================================
   Planning — Tennis Club de La Garde
   Complement a Bootstrap 5 : grille du planning, blocs de cours, impression.
   ========================================================================== */

:root {
    --tclg-vert: #14532d;
    --tclg-vert-clair: #166534;
    --tclg-terre: #c2410c;

    /* Grille : le pas d'affichage est de 30 min, decoupe en lignes de 5 min
       pour placer au minute pres des cours de duree libre. */
    --g-ligne5: 8px;          /* hauteur d'une tranche de 5 minutes */
    --g-entete: 44px;         /* hauteur de la ligne d'en-tete (terrains) */
    --g-gouttiere: 54px;      /* largeur de la colonne des heures */
    --g-col: 130px;           /* largeur minimale d'une colonne terrain */
}

body {
    -webkit-text-size-adjust: 100%;
}

.bg-tclg { background-color: var(--tclg-vert) !important; }

.btn-tclg {
    background-color: var(--tclg-vert);
    border-color: var(--tclg-vert);
    color: #fff;
}
.btn-tclg:hover, .btn-tclg:focus {
    background-color: var(--tclg-vert-clair);
    border-color: var(--tclg-vert-clair);
    color: #fff;
}

.page-connexion { background: #f6f8f7; }

.puce-prof {
    font-weight: 600;
    padding: .45em .8em;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Messages flottants
   -------------------------------------------------------------------------- */
.zone-messages {
    position: fixed;
    top: .75rem;
    right: .75rem;
    left: .75rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
}
.zone-messages .alert {
    pointer-events: auto;
    margin: 0 0 0 auto;
    max-width: min(34rem, 100%);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
}

/* --------------------------------------------------------------------------
   Onglets des jours
   -------------------------------------------------------------------------- */
.onglets-jours {
    gap: .35rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.onglets-jours .nav-link {
    white-space: nowrap;
    color: var(--tclg-vert);
    border: 1px solid #d7e0da;
    min-height: 44px;
    line-height: 1.15;
}
.onglets-jours .nav-link.active {
    background-color: var(--tclg-vert);
    border-color: var(--tclg-vert);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Grille du planning
   -------------------------------------------------------------------------- */
.grille-cadre {
    overflow: auto;
    max-height: calc(100vh - 13rem);
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* Vue lecture : une grille par jour, on ne borne pas la hauteur. */
.grille-cadre.grille-auto { max-height: none; }

.grille {
    display: grid;
    grid-template-columns: var(--g-gouttiere) repeat(var(--nb-cols), minmax(var(--g-col), 1fr));
    position: relative;
    min-width: max-content;
    background: #fff;
}

/* Les cellules doivent tenir EXACTEMENT dans leur piste de grille, sinon
   l'en-tete deborde sur la premiere ligne d'heures. On ne se repose pas sur
   la remise a zero de Bootstrap. */
.grille > * {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
}

/* En-tetes */
.g-coin,
.g-entete-terrain {
    position: sticky;
    top: 0;
    background: #f1f5f2;
    border-bottom: 2px solid #cfd8d2;
    font-weight: 600;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .25rem;
    overflow: hidden;
    z-index: 5;   /* la hauteur vient de la piste de grille (etirement) */
}
.g-coin {
    left: 0;
    z-index: 7;
    border-right: 2px solid #cfd8d2;
}
.g-entete-terrain { border-right: 1px solid #e6ebe8; }
.g-entete-terrain.inactif { color: #adb5bd; text-decoration: line-through; }

/* Colonne des heures */
.g-heure {
    position: sticky;
    left: 0;
    z-index: 4;
    background: #f8faf9;
    border-right: 2px solid #cfd8d2;
    border-top: 1px solid #e6ebe8;
    font-size: .72rem;
    color: #55605a;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 2px 6px 0 2px;
    font-variant-numeric: tabular-nums;
}
.g-heure.pleine { font-weight: 700; color: #2f3a34; border-top-color: #c9d2cc; }

/* Cases cliquables */
.g-case {
    border-top: 1px dotted #e9edeb;
    border-right: 1px solid #eef2f0;
    background: transparent;
    cursor: pointer;
    z-index: 1;
}
.g-case.pleine { border-top: 1px solid #dfe6e2; }
.g-case:hover { background: rgba(20, 83, 45, .07); }
.g-case:active { background: rgba(20, 83, 45, .14); }
.grille.lecture .g-case { cursor: default; }
.grille.lecture .g-case:hover { background: transparent; }

/* Blocs de cours.
   La hauteur vient UNIQUEMENT de la piste de grille (durée du cours) : le
   contenu ne l'agrandit jamais. À l'intérieur : un en-tête fixe, puis la liste
   des joueurs qui prend la place restante et défile. */
.bloc {
    position: relative;
    z-index: 3;
    margin: 1px;
    border-radius: .35rem;
    padding: .3rem .4rem;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    border: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.15;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
    min-width: 0;
}
/* Creneau a deux enseignants : liser� a la couleur du second (pose en JS). */
.bloc.duo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }

/* Bouton « + » d'inscription rapide, posé sur la ligne enseignant/jauge */
.bloc .bloc-ajout {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: -2px -2px -2px 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    color: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}
.bloc .bloc-ajout:hover { background: rgba(255, 255, 255, .55); }
.bloc .bloc-ajout:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

@media (max-width: 767.98px) {
    .bloc .bloc-ajout { width: 26px; height: 26px; font-size: 1.1rem; }
}
@media print { .bloc .bloc-ajout { display: none; } }

.bloc:hover { filter: brightness(1.08); }
.bloc:focus-visible { outline: 3px solid #000; outline-offset: -3px; }
.bloc .bloc-libelle {
    font-weight: 700;
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bloc .bloc-detail {
    font-size: .7rem;
    opacity: .92;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Ligne compacte enseignant + jauge, juste sous le libelle. */
.bloc .bloc-ligne {
    display: flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
}
.bloc .bloc-ligne .bloc-detail { flex: 1 1 auto; min-width: 0; }

.bloc .bloc-jauge {
    font-size: .7rem;
    font-weight: 600;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: 0 .4rem;
}

/* En-tête fixe du bloc : ne rétrécit jamais au profit de la liste. */
.bloc .bloc-entete {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 0 0 auto;
    min-width: 0;
}

/* Noms des joueurs inscrits : zone défilable à l'intérieur du bloc
   (molette à la souris, glissement du doigt sur mobile). */
.bloc .bloc-joueurs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-top: 2px;
    padding-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, .28);
    font-size: .63rem;
    line-height: 1.32;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .5) transparent;
}
.bloc .bloc-joueurs::-webkit-scrollbar { width: 5px; }
.bloc .bloc-joueurs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .5);
    border-radius: 3px;
}
/* Quand la liste déborde réellement, son défilement reste confiné au bloc :
   arrivé en bas, on ne fait pas défiler la grille ni la page. Posé uniquement
   dans ce cas, sinon un bloc à deux noms bloquerait le défilement de la page. */
.bloc.defilable .bloc-joueurs { overscroll-behavior: contain; }
.bloc .bloc-joueurs > span {
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Indice qu'il reste des noms plus bas : léger dégradé, qui disparaît une
   fois la liste arrivée en bas (classe posée par grille.js). */
.bloc::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 16px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .35));
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}
.bloc.a-suite::after { opacity: 1; }
/* « +N autres » : réservé au papier. */
.bloc .bloc-joueurs-suite { display: none; }
.bloc.complet .bloc-jauge { background: rgba(0, 0, 0, .3); }
.bloc.court { flex-direction: row; align-items: center; gap: .35rem; padding: .15rem .35rem; }
.bloc.court .bloc-entete { flex-direction: row; align-items: center; gap: .35rem; flex: 1 1 auto; }
.bloc.court .bloc-libelle { font-size: .72rem; }
.bloc.court .bloc-detail { font-size: .66rem; }
.bloc.court .bloc-ligne { flex: 1 1 auto; }
.bloc.court .bloc-joueurs { display: none; }

/* --------------------------------------------------------------------------
   Couleur choisie d'un créneau (palette APP_COULEURS_COURS)
   Les variables --cc-<code> sont injectées dans :root par vues/entete.php
   depuis le tableau PHP : aucune valeur hex ici. grille.js pose sur le bloc
   la classe « colore », une classe cc-<code> par couleur, et les variables
   --cc-a / --cc-b (moitié gauche / moitié droite d'un bloc scindé).
   -------------------------------------------------------------------------- */
.bloc.colore {
    /* Fond uni : une seule variable. */
    background: var(--cc-a);
    /* La couleur de l'enseignant reste lisible : liseré épais à gauche
       (posé en JS, --cc-prof = couleur du prof principal). */
    border-left: 6px solid var(--cc-prof, #555);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
/* Bloc scindé : deux arrêts nets, moitié gauche / moitié droite. */
.bloc.colore.scinde {
    background: linear-gradient(to right, var(--cc-a) 0 50%, var(--cc-b) 50% 100%);
}
/* Second enseignant sur un bloc coloré : le bord gauche est pris par le
   prof principal, le second passe sur le bord droit. */
.bloc.colore.duo { border-right: 5px solid var(--cc-prof2, #555); }
/* Le blanc se fondrait dans la grille : bordure nette. */
.bloc.colore.cc-blanc { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45); }

/* Texte foncé (blanc, jaune, orange, vert) : les habillages blancs
   translucides deviennent invisibles, on passe en noir translucide. */
.bloc.texte-sombre { color: #111; }
.bloc.texte-sombre .bloc-jauge { background: rgba(0, 0, 0, .12); }
.bloc.texte-sombre.complet .bloc-jauge { background: rgba(0, 0, 0, .25); }
.bloc.texte-sombre .bloc-ajout { background: rgba(0, 0, 0, .12); }
.bloc.texte-sombre .bloc-ajout:hover { background: rgba(0, 0, 0, .25); }
.bloc.texte-sombre .bloc-ajout:focus-visible { outline-color: #111; }
.bloc.texte-sombre .bloc-joueurs { border-top-color: rgba(0, 0, 0, .25); scrollbar-color: rgba(0, 0, 0, .4) transparent; }
.bloc.texte-sombre .bloc-joueurs::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .4); }
.bloc.texte-sombre::after { background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6)); }
.bloc.texte-sombre:focus-visible { outline-color: #111; }

/* Bloc scindé : le texte repose sur un bandeau semi-opaque pour rester
   lisible sur les deux moitiés, quelle que soit la combinaison. Clair avec
   texte foncé par défaut ; foncé avec texte blanc si les deux couleurs sont
   foncées (violet + rouge). */
.bloc.scinde .bloc-entete,
.bloc.scinde .bloc-joueurs {
    background: rgba(255, 255, 255, .72);
    border-radius: .25rem;
    padding-left: .25rem;
    padding-right: .25rem;
}
.bloc.scinde .bloc-entete { margin: -.1rem -.15rem 0; padding-top: .1rem; padding-bottom: .1rem; }
.bloc.scinde .bloc-joueurs { margin-left: -.15rem; margin-right: -.15rem; padding-bottom: .1rem; }
.bloc.scinde.bandeau-sombre .bloc-entete,
.bloc.scinde.bandeau-sombre .bloc-joueurs { background: rgba(0, 0, 0, .5); }
.bloc.scinde.court .bloc-entete { margin: 0; }

/* Pastilles de choix de couleur dans le panneau du cours.
   Tapables au doigt (44 px), une classe « choisie » par pastille retenue,
   « choisie-1 » / « choisie-2 » pour l'ordre (1 = moitié gauche). */
.pastilles-couleur {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.pastille-couleur {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, .25);
    background: var(--cc, #ccc);
    padding: 0;
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    color: #111;
    outline-offset: 3px;
}
.pastille-couleur.auto {
    background: var(--cc, #555);
    color: #fff;
    text-shadow: 0 0 2px rgba(0, 0, 0, .6);
}
.pastille-couleur:focus-visible { outline: 2px solid var(--tclg-vert); }
.pastille-couleur.choisie {
    border-color: var(--tclg-vert);
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--tclg-vert);
}
.pastille-couleur .rang {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tclg-vert);
    color: #fff;
    font-size: .68rem;
    line-height: 18px;
    text-align: center;
    display: none;
}
.pastille-couleur.choisie .rang { display: block; }

/* Aperçu du bloc tel qu'il apparaîtra sur la grille. */
.apercu-couleur {
    margin-top: .5rem;
    height: 52px;
    max-width: 16rem;
}
.apercu-couleur .bloc { position: static; height: 100%; margin: 0; cursor: default; }
.apercu-couleur .bloc:hover { filter: none; }

/* --------------------------------------------------------------------------
   Déplacement par glissement
   -------------------------------------------------------------------------- */
.bloc { touch-action: pan-x pan-y; }

body.glissement-actif {
    user-select: none;
    -webkit-user-select: none;
    cursor: grabbing;
}
body.glissement-actif .bloc { cursor: grabbing; }

/* Le bloc d'origine s'efface, mais garde ses pointer-events : la capture du
   pointeur en depend, et le ciblage dans la grille se fait par calcul. */
.bloc.glisse-source { opacity: .3; }

/* Rectangle de destination, posé dans la grille */
.cible-glisse {
    z-index: 4;
    margin: 1px;
    border-radius: .35rem;
    border: 2px dashed var(--tclg-vert);
    background: rgba(20, 83, 45, .16);
    pointer-events: none;
}
.cible-glisse.conflit {
    border-color: #b02a37;
    background: rgba(176, 42, 55, .2);
}

/* Étiquette qui suit le doigt */
.etiquette-glisse {
    position: fixed;
    z-index: 1090;
    transform: translate(-50%, -230%);
    background: var(--tclg-vert);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    padding: .25rem .6rem;
    border-radius: 999px;
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .3);
    pointer-events: none;
}
.etiquette-glisse.conflit { background: #b02a37; }

/* Onglet de jour ou zone « À recaser » survolés pendant le glissement */
.cible-onglet {
    outline: 3px solid var(--tclg-vert);
    outline-offset: 2px;
    background: rgba(20, 83, 45, .12) !important;
}

/* --------------------------------------------------------------------------
   Zone « à recaser »
   -------------------------------------------------------------------------- */
.carte-recaser-item {
    border-left: 4px solid #ffc107;
    background: #fffdf5;
    border-radius: .35rem;
    padding: .5rem .6rem;
    margin-bottom: .4rem;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border-top: 1px solid #f1e6c4;
    border-right: 1px solid #f1e6c4;
    border-bottom: 1px solid #f1e6c4;
    min-height: 44px;
}
.carte-recaser-item:hover { background: #fff8e6; }
.carte-recaser-item .titre { font-weight: 600; font-size: .9rem; }
.carte-recaser-item .motif { font-size: .75rem; color: #856d14; }

/* --------------------------------------------------------------------------
   Autocomplétion
   -------------------------------------------------------------------------- */
.autocomplete-liste {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 .375rem .375rem;
    max-height: 15rem;
    overflow-y: auto;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
}
.autocomplete-liste button {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: .55rem .75rem;
    font-size: .9rem;
    min-height: 44px;
}
.autocomplete-liste button:hover,
.autocomplete-liste button:focus { background: #eef4f0; }
.autocomplete-liste .creer { color: var(--tclg-vert); font-weight: 600; }

.offcanvas-cours { width: min(30rem, 100%); }

/* --------------------------------------------------------------------------
   Cartes des vues « mon planning » et lecture seule
   -------------------------------------------------------------------------- */
.jour-titre {
    background: var(--tclg-vert);
    color: #fff;
    padding: .35rem .75rem;
    border-radius: .35rem;
    font-weight: 600;
}
.pastille {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    vertical-align: -1px;
}

/* --------------------------------------------------------------------------
   Mobile : blocs et boutons tapables au doigt
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    :root {
        --g-ligne5: 7px;
        --g-col: 108px;
        --g-gouttiere: 46px;
    }
    .grille-cadre { max-height: calc(100vh - 15rem); }
    .btn, .nav-link, .list-group-item-action { min-height: 44px; }
    .bloc .bloc-libelle { font-size: .74rem; }
    .zone-messages { top: .5rem; right: .5rem; left: .5rem; }
}

/* --------------------------------------------------------------------------
   Impression (vue lecture seule / affichage au club)
   -------------------------------------------------------------------------- */
@media print {
    @page { size: A4 landscape; margin: 8mm; }

    /* Grille resserree : une journee complete (9h–22h) tient sur une page. */
    :root {
        --g-ligne5: 4.2px;
        --g-entete: 26px;
        --g-gouttiere: 42px;
        --g-col: 90px;
    }

    .no-print,
    .navbar,
    footer,
    .offcanvas,
    .modal,
    .btn { display: none !important; }

    body { background: #fff; font-size: 10pt; }

    .grille-cadre {
        overflow: visible !important;
        max-height: none !important;
        border: none;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .grille { min-width: 0; }
    .bloc {
        box-shadow: none;
        border: 1px solid #333 !important;
        padding: 1px 3px;
        /* On force l'impression des aplats de couleur des profs. */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .bloc .bloc-libelle { font-size: 7pt; }
    .bloc .bloc-detail  { font-size: 6pt; }
    .bloc .bloc-jauge   { font-size: 6pt; }
    /* Pas de défilement sur papier : premiers noms puis « +N autres »
       (le découpage est calculé par grille.js avec ces mêmes mesures). */
    .bloc .bloc-joueurs { font-size: 5.5pt; line-height: 1.2; overflow: hidden; }
    .bloc .bloc-joueurs > .bloc-joueur-sup { display: none; }
    .bloc .bloc-joueurs-suite { display: block; font-style: italic; }
    .bloc::after { display: none; }
    .g-coin, .g-entete-terrain, .g-heure {
        position: static !important;
        font-size: 7pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .bloc-jauge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* Couleur choisie : on garde l'aplat et le liseré du prof. Si l'imprimante
       sort en noir et blanc, le liseré épais et le libellé suffisent. */
    .bloc.colore {
        border-left: 6px solid var(--cc-prof, #333) !important;
        border-top: 1px solid #333 !important;
        border-bottom: 1px solid #333 !important;
        border-right: 1px solid #333 !important;
    }
    .bloc.colore.duo { border-right: 5px solid var(--cc-prof2, #333) !important; }
    .bloc.scinde .bloc-entete,
    .bloc.scinde .bloc-joueurs {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .jour-impression { page-break-after: always; break-after: page; }
    .jour-impression:last-child { page-break-after: auto; break-after: auto; }
}

/* --------------------------------------------------------------------------
   Module « Inscriptions & Offres »
   -------------------------------------------------------------------------- */

/* Pastille de couleur d'un groupe d'offres, dans les compteurs de l'annuaire. */
.pastille-groupe {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    vertical-align: baseline;
}

/* Cartes-compteurs cliquables de la vue Inscriptions. */
.carte-compteur {
    background: #fff;
    border: 1px solid #dfe6e2 !important;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}

.carte-compteur:hover {
    border-color: var(--tclg-vert) !important;
}

.carte-compteur:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

/* Les badges d'offres peuvent être longs : on les laisse passer à la ligne. */
#listeAnnuaire .badge,
#listeInscriptions .badge {
    white-space: normal;
    text-align: left;
    font-weight: 500;
}

/* Étiquettes d'offres dans l'autocomplétion des joueurs. */
.autocomplete-liste .badge {
    font-weight: 500;
    font-size: .65rem;
}

/* --------------------------------------------------------------------------
   Modale d'édition d'une fiche (profs) : boutons-cases comme la page publique
   -------------------------------------------------------------------------- */
.edition-fiche .choix-boutons { display: flex; flex-wrap: wrap; gap: .4rem; }
.edition-fiche .choix-bouton { position: relative; cursor: pointer; margin: 0; }
.edition-fiche .choix-bouton input { position: absolute; opacity: 0; width: 0; height: 0; }
.edition-fiche .choix-bouton span {
    display: inline-flex; align-items: center; min-height: 2.5rem;
    padding: .4rem .8rem; border: 1px solid #cfd8d3; border-radius: .6rem;
    background: #fff; font-size: .9rem; line-height: 1.2;
}
.edition-fiche .choix-bouton input:checked + span {
    background: var(--tclg-vert); border-color: var(--tclg-vert); color: #fff; font-weight: 600;
}
.edition-fiche .choix-bouton input:focus-visible + span { outline: 3px solid #0d6efd; outline-offset: 2px; }
.edition-fiche .titre-groupe { color: var(--tclg-vert); margin-top: .75rem; margin-bottom: .5rem; }

/* --------------------------------------------------------------------------
   Appel d'un cours (v16) : un gros bouton par joueur, rouge quand absent.
   -------------------------------------------------------------------------- */
.appel-date { max-width: 11rem; }
.appel-joueur {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    min-height: 3.5rem; padding: .6rem 1rem; font-size: 1.05rem; text-align: left;
    border: 2px solid #ced4da; background: #fff; color: #212529; border-radius: .5rem;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.appel-joueur .appel-nom { font-weight: 600; min-width: 0; }
.appel-joueur .appel-etat { text-align: right; font-size: .9rem; color: #198754; white-space: nowrap; }
.appel-joueur:hover, .appel-joueur:focus-visible { border-color: #adb5bd; color: #212529; }
.appel-joueur.absent { background: #dc3545; border-color: #b02a37; color: #fff; }
.appel-joueur.absent .appel-etat { color: #fff; font-weight: 700; }
.appel-joueur.absent:hover, .appel-joueur.absent:focus-visible { background: #bb2d3b; color: #fff; }
.appel-joueur:disabled { opacity: .7; }
/* Blocs cliquables de « Mon planning » : ouvrent l'appel. */
.grille.lecture .bloc[role="button"] { cursor: pointer; }

/* --------------------------------------------------------------------------
   Stages (v17) : liste des participants (telephone d'abord) et impression.
   -------------------------------------------------------------------------- */
.stage-participant .stage-paye .form-check-input { width: 2.4em; height: 1.3em; }
.stage-participant .stage-note { max-width: 100%; }
@media (min-width: 768px) {
    .stage-participant { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
    .stage-participant > .d-flex { flex: 1 1 24rem; }
    .stage-participant .stage-note { flex: 1 1 16rem; margin-top: 0 !important; }
}
@media print {
    #pageStages .no-print, #pageStages #stagesAjout, #zoneMessages { display: none !important; }
    #stagesImpression { display: block !important; }
    .stages-impression th, .stages-impression td { padding: .3rem .4rem; font-size: 11pt; }
    .stages-impression td:nth-child(5) { width: 3.5rem; text-align: center; }
    .stages-impression td:nth-child(6) { width: 32%; }
}