/* =========================================
   Fenêtre modale : choix de l'instrument
   ========================================= */

.lbdt-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.lbdt-modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.lbdt-modal-content h3 {
    margin-top: 0;
}

.lbdt-modal-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.lbdt-modal-buttons button {
    flex: 1;
    margin: 0 5px;
    padding: 10px;
    font-family: inherit;
    font-weight: normal;
    cursor: pointer;
    border: none;
    border-radius: 6px;
}

.lbdt-modal-buttons button.valider {
    background-color: #e67e22 !important;
    color: black !important;
}

.lbdt-modal-buttons button.valider:hover {
    background-color: #cf711c !important;
}

.lbdt-modal-buttons button.annuler {
    background-color: #ccc !important;
    color: #000 !important;
}

.lbdt-modal-buttons button.annuler:hover {
    background-color: #bbb !important;
}

.lbdt-modal-content input,
.lbdt-modal-content label {
    font-family: inherit;
    font-weight: normal;
}

/* =========================================
  The Events Calendar : Ajout du TABLEAU sous les 3 boutons du choix inscription
	pour la catégorie "prestation"
   ========================================== */
.lbdt-tableau-participation {
    margin-top: 0;
    overflow-x: auto;
}

.lbdt-tableau-participation table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.lbdt-tableau-participation th,
.lbdt-tableau-participation td {
    border: 1px solid #ccc;
    padding: 0.5rem;
    text-align: left;
}
.lbdt-tableau-participation th {
    text-align: center;
    font-weight: bold;
    background-color: #f5f5f5; /* Optionnel : léger fond pour contraster */
}

.lbdt-tableau-participation td {
    text-align: center;
    font-weight: normal;
}

/* =========================================
  The Events Calendar : Couleurs des pastilles -> Choix isncription membre dans le tableau
   ========================================== */
/*.lbdt-tableau-participation {*/
.lbdt-statuts {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lbdt-pastille {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.lbdt-pastille-vert { background-color: #4CAF50; }
.lbdt-pastille-orange { background-color: #808080; }
.lbdt-pastille-rouge { background-color: #F44336; }

/* =========================================
   Boutons d'inscription aux prestations
   ========================================= */

.lbdt-boutons-participation {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  	padding-top: 10px;
    padding-bottom: 10px;
}

.lbdt-bouton {
    flex: 1;
    min-width: 120px;
    padding: 10px;
    text-align: center;
    border-radius: 6px;
    border: none;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

.lbdt-bouton.lbdt-vert {
    background-color: #4CAF50;
}

/* Je ne sais pas encore
   La classe conserve son ancien nom "orange" pour éviter
   de modifier la logique JS/PHP, mais son affichage devient gris. */
.lbdt-bouton.lbdt-orange {
    background-color: #808080;
}

.lbdt-bouton.lbdt-rouge {
    background-color: #F44336;
}

.lbdt-bouton.lbdt-modifInstru {
    background-color: #E86012;
}

.lbdt-bouton:hover {
    filter: brightness(0.9);
}

.lbdt-bouton.lbdt-disabled,
.lbdt-bouton:disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.lbdt-instrument-option {
    display: block;
    margin: 5px 0;
}
/* =========================================
  Responsive des 4 boutons du tableau d'inscription aux prestations
   ========================================= */

/* Responsive */
@media (max-width: 768px) {
  .lbdt-bouton {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
  }
}

/*================================================================================================
  SYNTHÈSE DES PARTICIPATIONS
================================================================================================*/

/*
 * Zone générale affichée sous le tableau.
 *
 * Sur ordinateur : Réponses : 13    ● 10        ● 2    ● 1
 */
.lbdt-synthese-participations {

    /*
     * Espace au-dessus et au-dessous de la synthèse.
     */
    margin-top: 18px;
    margin-bottom: 18px;

    /*
     * Les deux blocs sont placés côte à côte
     * sur ordinateur.
     */
    display: flex;
    align-items: center;

    /*
     * Distance utilisée pour séparer visuellement
     * les différentes informations.
     */
    --lbdt-espace-items: 40px;

    /*
     * Espace entre :
     * bloc 1 : Réponses + Présents
     * bloc 2 : Incertains + Absents
     */
    gap: var(--lbdt-espace-items);

    /*
     * La synthèse occupe uniquement
     * la largeur nécessaire à son contenu.
     */
    width: fit-content;
}

/*================================================================================================
  BLOC 1 : RÉPONSES + PRÉSENTS
================================================================================================*/

/*
 * Structure :
 *
 * Réponses :    13    ●    10
 */
.lbdt-synthese-bloc-1 {

    display: grid;

    /*
     * Colonne 1 : "Réponses :"
     * Colonne 2 : nombre de réponses
     * Colonne 3 : pastille verte
     * Colonne 4 : nombre de présents
     */
    grid-template-columns:
        max-content
        3ch
        auto
        3ch;

    align-items: center;

    /* Espace régulier entre les éléments. */
    column-gap: 6px;
}
.lbdt-synthese-bloc-1 .lbdt-pastille-vert {

    /*
     * Crée l'espace entre : Réponses : 13    ● 10
     */
    margin-left: calc(
        var(--lbdt-espace-items) - 6px
    );
}

/*================================================================================================
  BLOC 2 : INCERTAINS + ABSENTS
================================================================================================*/

/*
 * Structure : ●    2    ●    1
 */
.lbdt-synthese-bloc-2 {

    display: grid;

    /*
     * Colonne 1 : pastille grise
     * Colonne 2 : nombre d'incertains
     * Colonne 3 : pastille rouge
     * Colonne 4 : nombre d'absents
     */
    grid-template-columns:
        auto
        3ch
        auto
        3ch;

    align-items: center;

    column-gap: 6px;
}
.lbdt-synthese-bloc-2 .lbdt-pastille-rouge {

    /*
     * Crée l'espace entre : ● 2    ● 1
     */
    margin-left: calc(
        var(--lbdt-espace-items) - 6px
    );
}

/*================================================================================================
  NOMBRES
================================================================================================*/

.lbdt-synthese-nombre {

    /*
     * Réserve la largeur approximative de trois chiffres.
     */
    min-width: 3ch;

    /*
     * Les chiffres sont alignés à droite.
     */
    text-align: left;

    /*
     * Lorsque la police utilisée le permet, chaque chiffre occupe la même largeur
     */
    font-variant-numeric: tabular-nums;
}

/*================================================================================================
  PASTILLES SYNTHÈSE
================================================================================================*/

.lbdt-synthese-participations .lbdt-synthese-pastille {

    /*
     * Le curseur indique qu'une information
     * complémentaire est disponible au survol.
     *
     * Le texte affiché provient de l'attribut title
     * défini dans le HTML :
     *
     * Présents
     * Je ne sais pas encore
     * Je ne peux pas venir
     */
    cursor: help;

    /*
     * Empêche une éventuelle réduction de la pastille
     * dans une zone étroite.
     */
    flex-shrink: 0;
}

/*================================================================================================
  AFFICHAGE PASTILLES SYNTHESE SUR SMARTPHONE
================================================================================================*/

@media (max-width: 767px) {

    /*
     * Sur smartphone, la synthèse est organisée
     * sur deux lignes grâce à une grille commune.
     */

    .lbdt-synthese-participations {

        display: grid;

        /*
         * Organisation des colonnes :
         *
         * 1 : libellé "Réponses :"
         * 2 : pastille grise
         * 3 : réponses / incertains
         * 4 : espace entre les deux groupes
         * 5 : pastille verte / rouge
         * 6 : présents / absents
         */
        grid-template-columns:
            max-content
            18px
            3ch
            30px
            18px
            3ch;

        /*
         * Petit espace horizontal entre
         * une pastille et son nombre.
         */
        column-gap: 5px;

        /*
         * Espace entre les deux lignes.
         */
        row-gap: 8px;

        align-items: center;

        width: fit-content;
    }


    /*
     * Les deux blocs HTML ne créent plus chacun leur propre grille.
     * Leurs éléments deviennent directement des éléments de la grille générale.
     */
    .lbdt-synthese-participations .lbdt-synthese-bloc {
        display: contents;
    }
    /*--------------------------------------------------------------------------------------------
      ANNULATION DES MARGES UTILISÉES SUR ORDINATEUR
    --------------------------------------------------------------------------------------------*/

    /*
     * Sur ordinateur, ces deux pastilles possèdent une marge gauche
     * permettant d'espacer les différents items de la synthèse.
     * Sur smartphone, le positionnement est entièrement géré
     * par CSS Grid : ces marges ne sont donc plus nécessaires et perturberaient l'ordre pastille → nombre.
     */
    .lbdt-synthese-participations .lbdt-pastille-vert,
    .lbdt-synthese-participations .lbdt-pastille-rouge {
        margin-left: 0;
    }

    /*--------------------------------------------------------------------------------------------
      PREMIÈRE LIGNE
    --------------------------------------------------------------------------------------------*/

    /* Libellé "Réponses :" */
    .lbdt-synthese-participations .lbdt-synthese-label {
        grid-column: 1/3;
        grid-row: 1;
		justify-self: end;
    }


    /* Nombre total de réponses */
    .lbdt-synthese-participations .lbdt-synthese-reponses {
        grid-column: 3;
        grid-row: 1;

        text-align: left;
    }


    /* Pastille verte */
    .lbdt-synthese-participations .lbdt-pastille-vert {
        grid-column: 5;
        grid-row: 1;

        /*
         * Important :
         * aucun déplacement artificiel avec transform.
         */
        transform: none;
    }


    /* Nombre de présents */
    .lbdt-synthese-participations .lbdt-synthese-presents {
        grid-column: 6;
        grid-row: 1;

        text-align: left;
    }

    /*--------------------------------------------------------------------------------------------
      DEUXIÈME LIGNE
    --------------------------------------------------------------------------------------------*/

    /* Pastille grise */
    .lbdt-synthese-participations .lbdt-pastille-orange {
        grid-column: 2;
        grid-row: 2;

        transform: none;
    }

    /*
     * Nombre d'incertains
     * Même colonne que le nombre de réponses : il sera donc exactement sous celui-ci.
     */
    .lbdt-synthese-participations .lbdt-synthese-incertains {
        grid-column: 3;
        grid-row: 2;

        text-align: left;
    }

    /* Pastille rouge */
    .lbdt-synthese-participations .lbdt-pastille-rouge {
        grid-column: 5;
        grid-row: 2;

        transform: none;
    }

    /*
     * Nombre d'absents. Même colonne que le nombre de présents
     */
    .lbdt-synthese-participations .lbdt-synthese-absents {
        grid-column: 6;
        grid-row: 2;

        text-align: left;
    }
}


/*================================================================================================
  SYNTHÈSE DES PRÉSENTS PAR INSTRUMENT - ORDINATEUR
================================================================================================*/

/*
 * La synthèse est placée entre les boutons d'inscription
 * et le tableau des participants.
 */
.lbdt-synthese-instruments {

    /*
     * Espace avec les boutons situés au-dessus
     */
    margin-top: 20px;

    /*
     * Espace avec le tableau situé en dessous.
     */
    margin-bottom: 20px;

    /*
    * Grille de 8 colonnes :
    *
    * Instrument | Nombre
    * Instrument | Nombre
    * Instrument | Nombre
    * Instrument | Nombre
    */
    display: grid;

    grid-template-columns:
        max-content 2ch
        max-content 2ch
        max-content 2ch
  		max-content 2ch;

    /*
     * Petit espace vertical entre les lignes.
     */
    row-gap: 8px;

    /*
     * Petit espace par défaut entre les colonnes.
     * Il sert notamment à séparer le nom d'un instrument de son nombre.
     */
    column-gap: 6px;

    /*
     * La synthèse ne prend que la largeur nécessaire.
     */
    width: fit-content;

    align-items: center;
}

/*================================================================================================
  ÉLÉMENT INSTRUMENT
================================================================================================*/
/*
 * Chaque instrument est créé en JavaScript sous cette forme :
 *
 * <div class="lbdt-synthese-instrument">
 *     <span>Clarinette</span>
 *     <span>2</span>
 * </div>
 *
 * display: contents permet aux deux <span>
 * de participer directement à la grille générale.
 *
 * Nous obtenons ainsi réellement :
 *
 * nom | nombre | nom | nombre | nom | nombre
 */
.lbdt-synthese-instrument {
    display: contents;
}

/*================================================================================================
  NOM DE L'INSTRUMENT
================================================================================================*/

.lbdt-synthese-instrument-nom {

    /*
     * Empêche autant que possible un retour à la ligne
     * dans le nom de l'instrument sur ordinateur.
     */
    white-space: nowrap;
}

/*================================================================================================
  NOMBRE DE PRÉSENTS
================================================================================================*/

.lbdt-synthese-instrument-nombre {

    /*
     * Une largeur correspondant approximativement 2 chiffres est réservée.
     */
    min-width: 2ch;

    /*
     * Le nombre commence immédiatement après le petit espace suivant l'instrument.
     */
    text-align: left;

    /*
     * Améliore l'alignement des chiffres lorsque la police le permet.
     */
    font-variant-numeric: tabular-nums;
}

/*================================================================================================
  ESPACEMENT ENTRE LES QUATRES GROUPES D'INSTRUMENTS
================================================================================================*/
/*
 * Le column-gap de 6px convient à : Clarinette  2
 * mais il serait trop faible entre deux instruments différents :
 * Clarinette  2      Saxophone soprano  1
 * On ajoute donc un espace supplémentaire avant
 * le deuxième et le troisième instrument de chaque ligne.
 * Avec 4 instruments par ligne, on ajoute un espace avant les instruments
 * n°2, n°3 et n°4 de chaque ligne.
 */

.lbdt-synthese-instrument:nth-child(4n + 2)
.lbdt-synthese-instrument-nom,

.lbdt-synthese-instrument:nth-child(4n + 3)
.lbdt-synthese-instrument-nom,

.lbdt-synthese-instrument:nth-child(4n)
.lbdt-synthese-instrument-nom {
    margin-left: 28px;
}

/*================================================================================================
  SYNTHÈSE DES PRÉSENTS PAR INSTRUMENT - SMARTPHONE
================================================================================================*/

/*================================================================================================
  LIBELLÉS DES INSTRUMENTS
================================================================================================*/
/*
 * Sur ordinateur, seul le nom complet est visible.
 */
.lbdt-instrument-libelle-desktop {
    display: inline;
}

/*
 * Le libellé court destiné au smartphone reste caché sur ordinateur.
 */
.lbdt-instrument-libelle-mobile {
    display: none;
}


@media (max-width: 767px) {
  
/*--------------------------------------------------------------------------------------------
  LIBELLÉS COURTS DES INSTRUMENTS
--------------------------------------------------------------------------------------------*/
/*
 * Sur smartphone, le libellé complet est masqué.
 */
.lbdt-instrument-libelle-desktop {
    display: none;
}

/*
 * Le libellé court prend sa place.
 */
.lbdt-instrument-libelle-mobile {
    display: inline;
}

/*
 * Les libellés courts sont conçus pour tenir sur une seule ligne.
 */
.lbdt-synthese-instrument-nom {
    white-space: nowrap;
}
  
    /*
     * Sur smartphone :
     *
     * 4 colonnes = Instrument | Nombre | Instrument | Nombre
     * Nous avons donc 2 instruments par ligne.
     * Avec 13 instruments :
     * - 6 lignes complètes ;
     * - 1 dernière ligne contenant uniquement le 13e instrument.
     */
    .lbdt-synthese-instruments {

        grid-template-columns:
            minmax(0, 1fr) 2ch
            minmax(0, 1fr) 2ch;

        /*
         * La grille utilise toute la largeur disponible.
         *
         * Contrairement à l'affichage ordinateur,
         * on évite width: fit-content qui pourrait provoquer
         * un débordement avec les noms d'instruments les plus longs.
         */
        width: 100%;

        /*
         * Espace vertical entre les lignes.
         */
        row-gap: 8px;

        /*
         * Petit espace entre le nom d'un instrument
         * et son nombre.
         */
        column-gap: 6px;
    }

    /*--------------------------------------------------------------------------------------------
      NOMS DES INSTRUMENTS
    --------------------------------------------------------------------------------------------*/
    .lbdt-synthese-instrument-nom {

        /*
       * Sur smartphone, les libellés courts sont également
       * conservés sur une seule ligne.
       *
       * Les abréviations définies en JavaScript permettent
       * d'éviter les débordements avec les noms d'instruments
       * les plus longs.
       */
      white-space: nowrap;
    }

    /*--------------------------------------------------------------------------------------------
      ANNULATION DES ESPACEMENTS UTILISÉS SUR ORDINATEUR
    --------------------------------------------------------------------------------------------*/
    /*
     * Sur ordinateur, une marge est ajoutée devant les instruments
     * n°2, 3 et 4 de chaque ligne.
     *
     * Cette organisation n'est plus valable sur smartphone,
     * puisqu'il n'y a maintenant que 2 instruments par ligne.
     */
    .lbdt-synthese-instruments
	.lbdt-synthese-instrument
	.lbdt-synthese-instrument-nom {
    margin-left: 0;
	}

    /*--------------------------------------------------------------------------------------------
      ESPACE ENTRE LES DEUX GROUPES D'UNE MÊME LIGNE
    --------------------------------------------------------------------------------------------*/
    /*
     * Les instruments pairs correspondent au deuxième instrument
     * de chaque ligne :
     * On ajoute donc un espace à gauche du deuxième groupe
     * afin de mieux séparer visuellement les deux instruments.
     */
    .lbdt-synthese-instrument:nth-child(2n)
    .lbdt-synthese-instrument-nom {

        margin-left: 16px;
    }

    /*--------------------------------------------------------------------------------------------
      NOMBRES
    --------------------------------------------------------------------------------------------*/
    .lbdt-synthese-instrument-nombre {

        /*
         * Le nombre reste proche du nom de l'instrument
         * et conserve une largeur prévue pour trois chiffres.
         */
        min-width: 2ch;
        text-align: left;
    }
}

/*================================================================================================
  PANNEAU "JOUABLE ?" - SYNTHÈSE PAR INSTRUMENT
  Repliable uniquement sur smartphone
================================================================================================*/

/*----------------------------------------------------------------------------------------------
  ORDINATEUR ET TABLETTE
  Le bandeau "Jouable ?" est masqué et la synthèse reste toujours visible.
----------------------------------------------------------------------------------------------*/

@media (min-width: 768px) {

    .lbdt-synthese-instruments-details > summary {
        display: none;
    }

    .lbdt-synthese-instruments-details:not([open])
    > .lbdt-synthese-instruments {
        display: grid !important;
    }

}

/*----------------------------------------------------------------------------------------------
  SMARTPHONE
----------------------------------------------------------------------------------------------*/

@media (max-width: 767px) {

    .lbdt-synthese-instruments-details {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* Bandeau cliquable "Jouable ?" */
    .lbdt-synthese-instruments-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        cursor: pointer;
        font-weight: 600;
        background-color: #f5f5f5;
        border: 1px solid #dddddd;
        border-radius: 6px;
        list-style: none;
    }

    /* Suppression de la flèche native */
    .lbdt-synthese-instruments-summary::-webkit-details-marker {
        display: none;
    }

    .lbdt-synthese-instruments-summary::marker {
        content: "";
    }

    /* Flèche personnalisée */
    .lbdt-synthese-instruments-summary::after {
        content: "▼";
        margin-left: 12px;
        font-size: 0.8em;
        transition: transform 0.2s ease;
    }

    /* Rotation de la flèche lorsque le panneau est ouvert */
    .lbdt-synthese-instruments-details[open]
    > .lbdt-synthese-instruments-summary::after {
        transform: rotate(180deg);
    }

    /* Espace entre "Jouable ?" et la synthèse ouverte */
    .lbdt-synthese-instruments-details[open]
    > .lbdt-synthese-instruments {
        margin-top: 12px;
        margin-bottom: 0;
    }

}

/*================================================================================================
  EN-TÊTES TRIABLES DU TABLEAU DES PARTICIPATIONS
================================================================================================*/

/*
 * Les boutons de tri sont placés à l'intérieur des <th>.
 * On supprime leur apparence native de bouton afin qu'ils ressemblent visuellement aux anciens titres du tableau.
 */
#tableau-participation .lbdt-bouton-tri {

    /*
     * Suppression de l'apparence native du bouton.
     */
    appearance: none;
    border: none;
    background: transparent;

    /*
     * Le bouton reprend la typographie du <th>.
     */
    font: inherit;
    font-weight: inherit;
    color: inherit;

    /*
     * Le bouton occupe toute la largeur disponible dans l'en-tête.
     */
    width: 100%;

    /*
     * Aucun espace supplémentaire : on conserve celui déjà géré par le <th>.
     */
    padding: 0;
    margin: 0;

    /*
     * Le texte et la future flèche sont placés sur une même ligne et centrés.
     */
    display: flex;
    align-items: center;
    justify-content: center;

    /*
     * Petit espace entre le titre et la future flèche.
     */
    gap: 5px;

    /*
     * Indique visuellement que l'en-tête est cliquable.
     */
    cursor: pointer;
}

/*================================================================================================
  INDICATEUR DU SENS DU TRI
================================================================================================*/
/*
 * La zone de la flèche existe dès maintenant, même si elle est encore vide.
 * Cela évitera que le texte de l'en-tête se décale
 * lorsque ↑ ou ↓ apparaîtra.
 */
#tableau-participation .lbdt-indicateur-tri {

    display: inline-block;

    /*
     * Réserve approximativement la largeur nécessaire à une flèche.
     */
    min-width: 1em;
    text-align: center;
}

/*================================================================================================
  NAVIGATION AU CLAVIER
================================================================================================*/
/*
 * Lorsqu'un utilisateur navigue au clavier, on conserve un indicateur visuel de focus.
 * Il n'apparaît pas lors d'un simple clic à la souris.
 */
#tableau-participation .lbdt-bouton-tri:focus-visible {

    outline: 2px solid currentColor;
    outline-offset: 2px;
}