/* ===== Agenda Le CAP — charte graphique officielle =====
   Bleu nuit  #1a2347 (couleur principale, titres)
   Bleu ciel  #37a0d7 (accents, Bureau)
   Brun foncé #483e37 (texte courant)
   Rouge      #b40b28 (accent / suppression)
   Orange MSS #ef7c00 (Gymnase)
   Blanc      #ffffff
   Polices    : Montserrat (titres) / Lato (texte courant)
*/

* { box-sizing: border-box; }

body {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: #F2F4F8;
    color: #483E37;
    margin: 0;
    padding: 0;
    line-height: 1.45;
    font-size: 16px;
}

h1, h2, button, .bouton-nav {
    font-family: 'Montserrat', -apple-system, sans-serif;
}

.conteneur {
    max-width: 840px;
    margin: 0 auto;
    padding: 24px 16px 60px;
}

.conteneur-large { max-width: 1360px; }

.conteneur-etroit {
    max-width: 400px;
    margin-top: 48px;
    text-align: center;
}

.conteneur-etroit form { text-align: left; }

.logo {
    height: 28px;
    width: auto;
    display: block;
    margin: 0 auto 10px;
}

.entete-marque {
    display: flex;
    align-items: center;
    gap: 10px;
}

.entete-marque .logo { height: 42px; margin: 0; }

.entete-marque a { display: inline-flex; line-height: 0; }

h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1A2347;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.sous-titre {
    margin: 0 0 8px;
    color: #6B6058;
    font-size: 0.95rem;
    font-family: 'Lato', sans-serif;
}

h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 12px;
    color: #1A2347;
}

.entete {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid #DDE3EC;
    padding-bottom: 16px;
    margin-bottom: 8px;
}

.entete-droite {
    font-size: 0.92rem;
    text-align: right;
    font-family: 'Lato', sans-serif;
}

.entete-droite a {
    color: #37A0D7;
    text-decoration: none;
    font-weight: 700;
}

.entete-droite a:hover { text-decoration: underline; }

form {
    background: #fff;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid #DDE3EC;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.formulaire-reservation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.pleine-largeur { grid-column: 1 / -1; }

label {
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 10px;
    color: #6B6058;
    font-family: 'Lato', sans-serif;
}

input, select, button, textarea {
    padding: 11px 12px;
    font-size: 1.05rem;
    border-radius: 8px;
    border: 1px solid #C9D2DE;
    font-family: 'Lato', sans-serif;
    width: 100%;
    background: #fff;
    color: #483E37;
}

/* Les cases à cocher et boutons radio ne doivent jamais hériter de la
   largeur 100% / du padding ci-dessus : sur certains navigateurs (Safari
   iOS en particulier), ça les transforme en gros blocs mal positionnés qui
   chevauchent le texte à côté. On leur redonne une taille native normale. */
input[type="checkbox"], input[type="radio"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    accent-color: #37A0D7;
}

textarea {
    resize: vertical;
    min-height: 44px;
}

input:focus, select:focus, button:focus-visible, textarea:focus {
    outline: 2px solid #37A0D7;
    outline-offset: 1px;
}

button {
    background: #1A2347;
    color: #fff;
    border: none;
    cursor: pointer;
    margin-top: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

button:hover { background: #121933; }

.message {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 0.94rem;
}

.message-erreur { background: #FBEAEC; color: #B40B28; }
.message-succes { background: #E9F3EF; color: #1E7A5F; }

.avertissement {
    background: #FDF1E3;
    color: #8A5A00;
    padding: 12px 14px;
    border-radius: 8px;
    margin-top: 20px;
    font-size: 0.94rem;
}

.texte-intro {
    color: #6B6058;
    font-size: 0.95rem;
}

.formulaire-profil { max-width: 460px; }

.lien-inscription {
    text-align: center;
    font-size: 0.9rem;
    margin-top: 14px;
}

.lien-inscription a {
    color: #37A0D7;
    text-decoration: none;
    font-weight: 700;
}

.lien-inscription a:hover { text-decoration: underline; }

/* Case à cocher "Toute la journée" / "Répéter" */
.etiquette-case {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    margin-top: 10px !important;
    cursor: pointer;
}

.case-journee, .case-recurrence { width: auto; }

/* Masque les champs horaires quand "Toute la journée" est coché */
.formulaire-reservation:has(.case-journee:checked) .champ-horaire {
    display: none;
}

.champ-recurrence { margin-top: 10px; }

.options-recurrence {
    display: none;
    gap: 8px;
    margin-top: 6px;
}

.champ-recurrence:has(.case-recurrence:checked) .options-recurrence {
    display: flex;
}

.options-recurrence > div { flex: 1; }

.ligne-intervalle-recurrence {
    display: flex;
    gap: 6px;
}

.ligne-intervalle-recurrence input[type="number"] {
    width: 56px;
    flex-shrink: 0;
}

.ligne-intervalle-recurrence select {
    flex: 1;
    min-width: 0;
}

.aide-recurrence {
    display: none;
    font-size: 0.74rem;
    color: #9AA6B8;
    margin: 6px 0 0;
}

.champ-recurrence:has(.case-recurrence:checked) .aide-recurrence {
    display: block;
}
/* Créneau APA partagé, vu par une diététicienne : le détail (horaires,
   APA) n'apparaît qu'une fois le créneau déplié d'un clic. */
.chip-details-partage { display: none; }
.chip-deplie .chip-details-partage {
    display: block;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(26, 35, 71, 0.12);
    font-size: 0.72rem;
    color: #6B6058;
    white-space: normal;
}
.chip-details-partage span { display: block; }
.chip-details-partage .chip-details-partage-info { color: #9AA6B8; font-style: italic; margin-top: 2px; }
/* « Visible par les diététiciennes » : l'explication s'affiche quand la case est cochée. */
.champ-visible-diet:has(input:checked) .aide-recurrence {
    display: block;
}

/* --- Navigation d'une période (jour/semaine/mois) --- */
.navigation-semaine {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 4px;
}

.navigation-semaine .label-semaine {
    font-weight: 700;
    font-size: 1rem;
    color: #1A2347;
}

/* Regroupe ← Préc. / Aujourd'hui / Suiv. → ensemble, du même côté de
   l'écran, plutôt que d'avoir les deux flèches aux deux extrémités. */
.groupe-nav-boutons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.bouton-nav {
    padding: 8px 14px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #C9D2DE;
    color: #1A2347;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

.bouton-nav:hover { background: #EAF3FA; }

.lien-aujourdhui {
    display: inline-block;
    margin: 4px 0 12px;
    font-size: 0.86rem;
    color: #37A0D7;
    text-decoration: none;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
}

.lien-aujourdhui:hover { text-decoration: underline; }

.navigation-semaine-fixe {
    margin: 0;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid #DDE3EC;
}

.navigation-semaine-fixe .lien-aujourdhui {
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ===== Grille agenda hebdomadaire (positionnement, plus tableau HTML) ===== */

.agenda-disposition {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.agenda-tiroir-filtres {
    flex-shrink: 0;
    position: relative;
}

.agenda-tiroir-onglet {
    display: flex;
    align-items: center;
    gap: 6px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 14px 8px;
    background: #1A2347;
    color: #fff;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: 'Montserrat', sans-serif;
    list-style: none;
    user-select: none;
    white-space: nowrap;
}

.agenda-tiroir-onglet::-webkit-details-marker { display: none; }

.agenda-tiroir-onglet:hover { background: #263259; }

.agenda-tiroir-icone { writing-mode: horizontal-tb; font-size: 1rem; }

.agenda-tiroir-filtres[open] .agenda-tiroir-onglet {
    writing-mode: horizontal-tb;
    border-radius: 10px 10px 0 0;
    justify-content: flex-start;
    padding: 10px 14px;
}

.agenda-tiroir-contenu {
    width: 236px;
    max-width: 60vw;
    background: #fff;
    border: 1px solid #DDE3EC;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agenda-tiroir-contenu .filtre-agenda { margin: 4px 0; }

/* Le tableau des personnes a besoin de plus de place (des totaux qui
   peuvent monter dans les milliers) que le tiroir des filtres. */
.agenda-tiroir-personnes .agenda-tiroir-contenu,
.agenda-tiroir-archives .agenda-tiroir-contenu,
.agenda-tiroir-rappels .agenda-tiroir-contenu {
    width: 420px;
    max-width: 90vw;
}

.formulaire-ajout-rappel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.formulaire-ajout-rappel input[type="text"] {
    padding: 6px 8px;
    border: 1px solid #DDE3EC;
    border-radius: 6px;
    font-size: 0.85rem;
}

.ligne-ajout-rappel-details {
    display: flex;
    gap: 6px;
}

.ligne-ajout-rappel-details input[type="date"],
.ligne-ajout-rappel-details select {
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 6px;
    border: 1px solid #DDE3EC;
    border-radius: 6px;
    font-size: 0.8rem;
}

.formulaire-ajout-rappel button {
    align-self: flex-start;
    padding: 6px 14px;
    background: #1A2347;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
}

.formulaire-ajout-rappel button:hover { background: #37A0D7; }

.liste-rappels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ligne-rappel {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    border-bottom: 1px solid #F2F4F8;
}

.ligne-rappel-due .rappel-contenu { color: #B40B28; font-weight: 700; }

.rappel-traiter {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid #DDE3EC;
    color: #C7D0DE;
    text-decoration: none;
    font-size: 0.7rem;
}

.rappel-traiter:hover { border-color: #37A0D7; color: #37A0D7; }

.rappel-contenu {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.82rem;
    color: #3A3530;
}

.rappel-echeance {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: #9AA6B8;
}

.agenda-tiroirs-colonne {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.agenda-tiroir-note {
    margin: 2px 0;
    font-size: 0.76rem;
    color: #9AA6B8;
}

.formulaire-ajout-personne {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    border: none;
    background: transparent;
}

.formulaire-ajout-personne button { margin-top: 2px; }

.filtre-liste-personnes {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.8rem;
    border-radius: 6px;
    margin-bottom: 4px;
}

.tableau-personnes-referentiel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
    max-height: 260px;
    display: block;
    overflow-y: auto;
}

.tableau-personnes-referentiel thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
}

.ligne-lettre-groupe {
    position: sticky;
    top: 22px;
    z-index: 1;
}

.ligne-lettre-groupe td {
    background: #EAF3FA;
    color: #37A0D7;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 2px 4px;
    border-bottom: 1px solid #DDE3EC;
    white-space: nowrap;
}

.tableau-personnes-referentiel thead, .tableau-personnes-referentiel tbody, .tableau-personnes-referentiel tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.tableau-personnes-referentiel th {
    text-align: left;
    font-size: 0.68rem;
    text-transform: uppercase;
    color: #9AA6B8;
    padding: 4px 2px;
    border-bottom: 1px solid #DDE3EC;
}

.tableau-personnes-referentiel td {
    padding: 3px 2px;
    border-bottom: 1px solid #F2F4F8;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tableau-personnes-actives th:nth-child(1), .tableau-personnes-actives td:nth-child(1) { width: 34%; }
.tableau-personnes-actives th:nth-child(2), .tableau-personnes-actives td:nth-child(2) { width: 13%; text-align: center; }
.tableau-personnes-actives th:nth-child(3), .tableau-personnes-actives td:nth-child(3) { width: 15%; text-align: center; }
.tableau-personnes-actives th:nth-child(4), .tableau-personnes-actives td:nth-child(4) { width: 16%; text-align: center; }
.tableau-personnes-actives th:nth-child(5), .tableau-personnes-actives td:nth-child(5) { width: 13%; text-align: center; }
.tableau-personnes-actives th:nth-child(6), .tableau-personnes-actives td:nth-child(6) { width: 9%; text-align: center; }

.tableau-personnes-archivees th:nth-child(1), .tableau-personnes-archivees td:nth-child(1) { width: 38%; }
.tableau-personnes-archivees th:nth-child(2), .tableau-personnes-archivees td:nth-child(2) { width: 16%; text-align: center; }
.tableau-personnes-archivees th:nth-child(3), .tableau-personnes-archivees td:nth-child(3) { width: 16%; text-align: center; }
.tableau-personnes-archivees th:nth-child(4), .tableau-personnes-archivees td:nth-child(4) { width: 12%; text-align: center; }
.tableau-personnes-archivees th:nth-child(5), .tableau-personnes-archivees td:nth-child(5) { width: 18%; text-align: center; }

/* Archives : ↺ (restaurer) et ✕ (supprimer définitivement) côte à côte */
.actions-archive .lien-supprimer-personne { margin-left: 8px; }

.colonne-annulees { color: #B47EDE; }

.lien-archiver-personne {
    color: #9AA6B8;
    text-decoration: none;
    font-size: 0.78rem;
}

.lien-archiver-personne:hover { color: #B40B28; }

/* ===== Tableau Statistiques ===== */
.titre-statistiques {
    margin-top: 28px;
}

/* ===== Vue historique d'une personne ===== */
.lien-historique-personne {
    color: #1A2347;
    text-decoration: none;
    border-bottom: 1px dashed #9AA6B8;
}

.lien-historique-personne:hover { color: #37A0D7; border-bottom-color: #37A0D7; }

.lien-suggestion-historique {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #37A0D7;
    text-decoration: none;
}

.lien-suggestion-historique:hover { text-decoration: underline; }

.historique-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.lien-retour-historique {
    color: #37A0D7;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
}

.lien-retour-historique:hover { text-decoration: underline; }

.tableau-historique-personne {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 10px;
}

.tableau-historique-personne th, .tableau-historique-personne td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #EDF1F6;
}

.tableau-historique-personne thead th {
    background: #EAF3FA;
    font-family: 'Montserrat', sans-serif;
    color: #1A2347;
}

.pastille-statut-historique {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}

.statut-realisee { background: #E3F3EA; color: #2E7D4F; }
.statut-annulee { background: #FBE4E7; color: #B40B28; }
.statut-a-venir { background: #EAF3FA; color: #37A0D7; }
.statut-non-renseignee { background: #F2F4F8; color: #9AA6B8; }

.lien-telecharger-sauvegarde {
    display: inline-block;
    margin: 8px 0 4px;
    padding: 10px 18px;
    font-weight: 700;
}

.tableau-stats-scroll {
    overflow-x: auto;
    border: 1px solid #DDE3EC;
    border-radius: 10px;
}

.tableau-statistiques {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    min-width: 620px;
}

.tableau-statistiques th, .tableau-statistiques td {
    padding: 7px 10px;
    text-align: center;
    border-bottom: 1px solid #EDF1F6;
}

.tableau-statistiques th:first-child, .tableau-statistiques td:first-child {
    text-align: left;
    font-weight: 700;
    color: #1A2347;
}

.tableau-statistiques thead th {
    background: #EAF3FA;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #1A2347;
    white-space: nowrap;
}

.colonne-total-stats {
    font-weight: 700;
    background: #FAFBFD;
    border-left: 2px solid #DDE3EC;
}

.tableau-statistiques .sous-entete {
    display: block;
    font-size: 0.62rem;
    font-weight: 400;
    text-transform: none;
    color: #6B6058;
}

.tableau-statistiques tbody tr:hover { background: #FAFBFD; }

.form-paiements-personne { padding: 0; border: none; background: transparent; }

.form-paiements-personne input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    padding: 2px 3px;
    font-size: 0.76rem;
    border-radius: 5px;
}

.colonne-realisees { text-align: center; color: #6B6058; }

.ligne-personne-alerte td:first-child { color: #B40B28; }
.ligne-personne-alerte .lien-historique-personne { color: #B40B28; }

/* Ratio "réalisées / payées" affiché en face d'un participant */
.ratio-seances {
    font-size: 0.68rem;
    font-weight: 700;
    color: #6B6058;
    margin-left: 4px;
}

.ratio-seances-alerte { color: #B40B28; }

/* Sélection des participants (APA), avec autocomplétion + pastilles */
.ajout-participant-liste {
    display: flex;
    gap: 6px;
}

.ajout-participant-liste input[type="text"] { flex: 1 1 0; min-width: 0; }

.ajout-participant-liste button {
    width: auto;
    white-space: nowrap;
    margin-top: 0;
}

.chips-participants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.chip-participant {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #EAF3FA;
    color: #1A2347;
    border-radius: 999px;
    padding: 3px 6px 3px 10px;
    font-size: 0.8rem;
}

.chip-participant-retirer {
    border: none;
    background: transparent;
    color: #1A2347;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0 2px;
    width: auto;
    margin: 0;
}

.chip-participant-retirer:hover { color: #B40B28; background: transparent; }

.agenda-contenu-principal {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 14px;
}

@media (max-width: 700px) {
    .agenda-disposition { flex-direction: column; }
    .agenda-tiroir-onglet {
        writing-mode: horizontal-tb;
        border-radius: 10px;
        width: 100%;
        justify-content: center;
        padding: 10px;
    }
    .agenda-tiroir-filtres[open] .agenda-tiroir-onglet { border-radius: 10px 10px 0 0; }
    .agenda-tiroir-contenu { width: 100%; max-width: none; }
    .agenda-contenu-principal { margin-left: 0; margin-top: 12px; }
}

.agenda-scroll-h {
    overflow-x: auto;
    border: 1px solid #DDE3EC;
    border-radius: 10px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.agenda-grille { display: block; }

.agenda-ligne-entete, .agenda-corps {
    display: flex;
}

.agenda-coin {
    flex: 0 0 60px;
    width: 60px;
}

.agenda-jour-entete, .agenda-jour-colonne {
    flex: 1 1 0;
    min-width: 0;
}

.agenda-scroll-v {
    overflow-y: auto;
    max-height: calc(100vh - 170px);
    min-height: 360px;
}

.agenda-entete-fixe {
    position: sticky;
    top: 0;
    z-index: 20;
}

.agenda-ligne-entete {
    background: #EAF3FA;
    border-bottom: 1px solid #DDE3EC;
}

.agenda-coin {
    padding: 10px 6px;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1A2347;
    font-family: 'Montserrat', sans-serif;
}

.agenda-jour-entete {
    padding: 8px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
}

.agenda-jour-entete-libelle {
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1A2347;
    font-family: 'Montserrat', sans-serif;
}

.agenda-jour-entete-aujourdhui {
    background: #A9D3EE;
    box-shadow: inset 0 -3px 0 #37A0D7;
}

/* Pastille de notes du jour, intégrée à l'entête de chaque colonne */
.notes-jour-pastille-conteneur {
    position: relative;
    display: inline-block;
}

.notes-jour-pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #DDE3EC;
    color: #1A2347;
    font-size: 0.66rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.notes-jour-pastille::-webkit-details-marker { display: none; }

.notes-jour-pastille:hover { background: #C7D0DE; }

.notes-jour-pastille-actives {
    background: #B40B28;
    color: #fff;
}

.notes-jour-pastille-actives:hover { background: #93091F; }

.notes-jour-pastille-traitees {
    background: #DDE3EC;
    color: #6B6058;
}

.notes-jour-pastille-traitees:hover { background: #C7D0DE; }

.notes-jour-panneau {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    background: #fff;
    border: 1px solid #DDE3EC;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(26, 35, 71, 0.18);
    padding: 8px;
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-transform: none;
}

.note-jour-ligne-groupe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}

.note-jour-agrandir {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid #DDE3EC;
    background: #fff;
    color: #9AA6B8;
    font-size: 0.68rem;
    cursor: pointer;
}

.note-jour-agrandir:hover { border-color: #37A0D7; color: #37A0D7; }

.note-jour-texte-complet {
    flex-basis: 100%;
    width: 100%;
    margin: 2px 0 0;
    padding: 6px 8px;
    background: #F2F4F8;
    border-radius: 6px;
    font-size: 0.78rem;
    color: #3A3530;
    white-space: pre-wrap;
    word-break: break-word;
}

.note-jour-traiter {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid #DDE3EC;
    color: #C7D0DE;
    text-decoration: none;
    font-size: 0.7rem;
}

.note-jour-traiter:hover { border-color: #37A0D7; color: #37A0D7; }

.note-jour-traiter-actif {
    background: #4FAE7C;
    border-color: #4FAE7C;
    color: #fff;
}

.note-jour-traiter-actif:hover { background: #3d9268; color: #fff; }

.champ-note-jour-traitee {
    color: #9AA6B8;
    text-decoration: line-through;
}

.form-note-jour-ligne {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: transparent;
    flex: 1 1 0;
    min-width: 0;
}

.form-note-jour-ligne .champ-note-jour { flex: 1 1 0; min-width: 0; }

.champ-note-jour {
    width: 100%;
    padding: 5px 8px;
    font-size: 0.8rem;
    border-radius: 6px;
    background: #fff;
}

/* Créneaux "toute la journée", épinglés en haut de la colonne du jour
   plutôt que dans une ligne séparée */
.chip-journee-epingle {
    position: absolute;
    left: 3px;
    right: 3px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.68rem;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 3;
}

.chip-journee-epingle .chip-horaire, .chip-journee-epingle .chip-nom {
    display: inline;
    font-size: 0.68rem;
}

.chip-journee-epingle .chip-horaire::after { content: " · "; }

/* Il manquait l'équivalent de ".chip-horaire-pos.chip-deplie" pour un
   créneau "toute la journée" : la classe "chip-deplie" était bien posée au
   clic (en JS), mais rien ne changeait visuellement faute de cette règle —
   d'où l'impression que le clic ne faisait rien. */
.chip-journee-epingle.chip-deplie {
    height: auto;
    min-height: 18px;
    overflow: visible;
    z-index: 20;
    white-space: normal;
    box-shadow: 0 4px 14px rgba(26, 35, 71, 0.2);
    border-radius: 6px;
}


.agenda-corps { position: relative; align-items: flex-start; }

.ligne-heure-actuelle {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #B40B28;
    z-index: 6;
    pointer-events: none;
}

.chip-passe {
    opacity: 0.55;
    filter: saturate(0.85);
}

/* Une fois dépliée (participants, "Modifier"...), la bulle redevient
   pleinement lisible même pour un créneau passé — l'atténuation ne sert
   qu'à la distinguer d'un coup d'œil tant qu'elle est repliée. */
.chip-passe.chip-deplie,
.chip-passe:has(details[open]) {
    opacity: 1;
    filter: none;
}

.agenda-gouttiere {
    position: relative;
    flex: 0 0 60px;
    width: 60px;
    background: #fff;
}

.agenda-heure-label {
    position: absolute;
    left: 0;
    right: 6px;
    transform: translateY(-50%);
    text-align: right;
    color: #6B6058;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    font-size: 0.78rem;
}

.agenda-jour-colonne {
    position: relative;
    border-right: 1px solid #EDF1F6;
}

.agenda-jour-colonne-aujourdhui { background: #E1F0FA; }

.tranche-heure {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #EDF1F6;
    border-radius: 0;
    cursor: pointer;
    z-index: 1;
    color: transparent;
}

.tranche-heure:hover, .tranche-heure:focus-visible {
    background: rgba(55, 160, 215, 0.08);
    outline: none;
}

/* ===== Vue mensuelle ===== */
.agenda-mois {
    border: 1px solid #DDE3EC;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.agenda-mois-entete-jours {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #EAF3FA;
    border-bottom: 1px solid #DDE3EC;
}

.agenda-mois-entete-jour {
    padding: 8px 4px;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1A2347;
    font-family: 'Montserrat', sans-serif;
}

.agenda-mois-grille {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.agenda-mois-jour {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 96px;
    padding: 5px 4px;
    border-right: 1px solid #EDF1F6;
    border-bottom: 1px solid #EDF1F6;
    text-decoration: none;
    color: inherit;
    background: #fff;
}

.agenda-mois-grille .agenda-mois-jour:nth-child(7n) { border-right: none; }

.agenda-mois-jour:hover { background: #F7FAFD; }

.agenda-mois-jour-hors-mois { background: #FAFBFD; }
.agenda-mois-jour-hors-mois:hover { background: #F2F4F8; }
.agenda-mois-jour-hors-mois .agenda-mois-jour-numero { color: #C9D2DE; }

.agenda-mois-jour-aujourdhui { background: #BFDFF2; box-shadow: inset 0 0 0 2px #37A0D7; }
.agenda-mois-jour-aujourdhui:hover { background: #B0D7EE; }

.agenda-mois-jour-ferme { background: #FAFBFD; }

.agenda-mois-jour-numero {
    font-weight: 700;
    font-size: 0.85rem;
    color: #1A2347;
    font-family: 'Montserrat', sans-serif;
}

.agenda-mois-chip {
    display: block;
    border-left: 3px solid #37A0D7;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.68rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1A2347;
}

.agenda-mois-plus {
    font-size: 0.66rem;
    font-weight: 700;
    color: #37A0D7;
}

@media (max-width: 600px) {
    .agenda-mois-jour { min-height: 60px; padding: 3px; }
    .agenda-mois-entete-jour { font-size: 0.62rem; padding: 6px 2px; }
    .agenda-mois-jour-numero { font-size: 0.76rem; }
    .agenda-mois-chip { font-size: 0.6rem; padding: 1px 3px; }
    .agenda-mois-plus { font-size: 0.58rem; }
}

.chip {
    border-left: 3px solid #999;
    background: #F2F4F8;
    border-radius: 5px;
    padding: 4px 6px;
    line-height: 1.3;
    box-sizing: border-box;
}

.chip-journee { margin-bottom: 4px; }

/* Trait vertical associé à un créneau "toute la journée" : court sur toute
   la hauteur visible de la grille, fin pour ne pas gêner les créneaux
   horaires classiques à côté, cliquable (voir basculerChipAssocie en JS). */
.trait-journee-entiere {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 2px;
    z-index: 2;
    cursor: pointer;
}

.chip-horaire-pos {
    position: absolute;
    z-index: 2;
    /* Par défaut, la case est cadrée strictement sur la durée réelle du
       rendez-vous (hauteur fixe passée en style inline via --hauteur-duree)
       et le contenu qui dépasse est masqué. Elle ne s'agrandit qu'au survol,
       au focus, ou quand une liste (participants / ajouter / suppression)
       est ouverte à l'intérieur — voir les règles ci-dessous. */
    overflow: hidden;
    padding: 2px 6px;
}

.chip-horaire-pos .chip-horaire,
.chip-horaire-pos .chip-nom {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Le survol de la souris ne déclenche plus rien : seul un clic (voir
   gererClicEnteteChip en JS, qui bascule la classe "chip-deplie") déplie ou
   réduit le créneau. :focus-within a volontairement été retiré d'ici : une
   fois l'en-tête cliqué, il garde le focus au clavier même après un 2ème
   clic qui retire "chip-deplie" — :focus-within resterait alors vrai tout
   seul et empêcherait la bulle de jamais se réduire. Un détail natif resté
   ouvert (ex. "+ ajouter") garde quand même le créneau déplié. */
.chip-horaire-pos:has(details[open]),
.chip-horaire-pos.chip-deplie {
    left: 2px !important;
    width: calc(100% - 4px) !important;
    z-index: 15;
    height: auto !important;
    min-height: var(--hauteur-duree);
    overflow: visible;
    box-shadow: 0 4px 14px rgba(26, 35, 71, 0.2);
    border-radius: 6px;
}

.chip-horaire-pos:has(details[open]) .chip-horaire, .chip-horaire-pos:has(details[open]) .chip-nom,
.chip-horaire-pos.chip-deplie .chip-horaire, .chip-horaire-pos.chip-deplie .chip-nom {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.chip-horaire { display: block; font-weight: 700; color: #1A2347; font-size: 0.76rem; }
.chip-nom     { display: block; color: #6B6058; font-size: 0.76rem; margin-top: 1px; }

/* Zone cliquable (heure + nom) qui ouvre le créneau en modification */
.chip-lien-modifier {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.chip-lien-modifier:focus-visible .chip-nom {
    text-decoration: underline;
}

.chip-supprimer {
    color: #B40B28;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.72rem;
    cursor: pointer;
}

/* Chip "Salle occupée" (créneau d'un autre groupe, détail masqué) */
.chip-occupe .chip-nom {
    font-style: italic;
    color: #9A9088;
}

/* Filtre Bureau / Gymnase / Tout au-dessus de l'agenda */
.filtre-agenda {
    display: flex;
    gap: 8px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.pilule-filtre {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid #C9D2DE;
    background: #fff;
    color: #1A2347;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.86rem;
}

.pilule-filtre:hover { background: #EAF3FA; }

.pilule-filtre-active {
    background: #1A2347;
    color: #fff;
    border-color: #1A2347;
}

.filtre-agenda-praticiens {
    margin-top: -2px;
    align-items: center;
}

.filtre-agenda-etiquette {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #6B6058;
    font-family: 'Lato', sans-serif;
    margin: 6px 0 2px;
}

.pilule-filtre-praticien {
    font-size: 0.8rem;
    padding: 5px 13px;
    border-style: dashed;
}

.pilule-filtre-praticien.pilule-filtre-active {
    border-style: solid;
}

/* Sélecteur de vue Jour / Semaine / Mois, juste au-dessus des filtres */
.filtre-vue {
    margin-bottom: 14px;
}

.recherche-agenda {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 0 auto;
    flex: 0 1 220px;
}

.recherche-agenda input[type="search"] {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    font-size: 0.86rem;
    border-radius: 999px;
}

.recherche-agenda button {
    padding: 7px 14px;
    margin-top: 0;
    border-radius: 999px;
    font-size: 0.8rem;
    width: auto;
    white-space: nowrap;
}

.lien-effacer-recherche {
    color: #B40B28;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0 4px;
}

@media (max-width: 700px) {
    .recherche-agenda {
        flex-basis: 100%;
        margin-left: 0;
    }
}

/* Bouton "+" pour ajouter un créneau directement depuis une case de la grille */
.bouton-plus {
    display: block;
    width: 100%;
    padding: 3px;
    background: transparent;
    border: 1px dashed #C9D2DE;
    color: #9AA6B8;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    opacity: 0.55;
}

.bouton-plus:hover, .bouton-plus:focus-visible {
    opacity: 1;
    border-color: #37A0D7;
    color: #37A0D7;
    background: #EAF3FA;
}

/* Ajouter un participant à une réservation déjà créée (repliée, ouverte au clic/tap) */
.chip-ajout {
    margin-top: 3px;
}

.chip-ajout summary {
    cursor: pointer;
    font-size: 0.72rem;
    color: #37A0D7;
    font-weight: 700;
    list-style: none;
}

.chip-ajout summary::-webkit-details-marker { display: none; }

.mini-form-ajout {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    padding: 0;
    border: none;
    background: transparent;
}

.mini-form-ajout input[type="text"] {
    padding: 4px 6px;
    font-size: 0.76rem;
    border-radius: 5px;
    flex: 1;
    min-width: 0;
    width: auto;
}

.mini-form-ajout button {
    padding: 4px 8px;
    font-size: 0.76rem;
    margin-top: 0;
    border-radius: 5px;
    width: auto;
}

/* Liste des participants d'un créneau (repliée par défaut, ouverte au clic/tap) */
.chip-participants {
    margin-top: 3px;
}

.chip-participants-titre {
    margin: 0;
    font-size: 0.72rem;
    color: #37A0D7;
    font-weight: 700;
}

.chip-participants-titre::before { content: "👥 "; }

.chip-participants ul {
    margin: 4px 0 0;
    padding-left: 16px;
    font-size: 0.74rem;
    color: #6B6058;
}

.chip-participants li {
    display: flex;
    align-items: center;
    gap: 6px;
}

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

.participant-absent .nom-participant {
    text-decoration: line-through;
    color: #B0A89F;
}

.participant-venu .nom-participant {
    color: #2E9A5C;
    font-weight: 700;
}

.statut-participant {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.case-statut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.7rem;
    opacity: 0.35;
    filter: grayscale(1);
}

.case-statut:hover { opacity: 0.7; }

.case-statut-active {
    opacity: 1;
    filter: none;
    background: #F0F4F8;
}

.lien-reduire {
    display: block;
    margin: 4px 0 0;
    padding: 0;
    background: transparent;
    border: none;
    color: #37A0D7;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.7rem;
    font-family: 'Lato', sans-serif;
    cursor: pointer;
    width: auto;
}

.lien-reduire:hover { text-decoration: underline; }

.lien-modifier-chip {
    display: block;
    margin: 4px 0 0;
    padding: 0;
    background: transparent;
    border: none;
    color: #37A0D7;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.7rem;
    font-family: 'Lato', sans-serif;
    cursor: pointer;
    width: auto;
    list-style: none;
}

.lien-modifier-chip::-webkit-details-marker { display: none; }
.lien-modifier-chip:hover { text-decoration: underline; }

.lien-suppr-participant {
    color: #B40B28;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* Choix "ce créneau seulement / celui-ci et les suivants" pour un créneau récurrent */
.menu-suppression { display: inline-block; margin-top: 3px; }

.menu-suppression summary {
    list-style: none;
    display: inline;
}

.menu-suppression summary::-webkit-details-marker { display: none; }

.options-suppression {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
}

.options-suppression a {
    font-size: 0.7rem;
    color: #B40B28;
    text-decoration: none;
    font-weight: 700;
}

.options-suppression a:hover { text-decoration: underline; }

/* Choix "ce créneau seulement / celui-ci et les suivants" avant modification
   d'un créneau récurrent — même apparence que le lien simple tant qu'il n'est
   pas ouvert. */
.menu-modification { display: block; }

.menu-modification summary::-webkit-details-marker { display: none; }

.menu-modification:hover .chip-nom,
.menu-modification[open] .chip-nom {
    text-decoration: underline;
}

.options-modification {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
}

.options-modification a {
    font-size: 0.7rem;
    color: #37A0D7;
    text-decoration: none;
    font-weight: 700;
}

.options-modification a:hover { text-decoration: underline; }

.aide-date-serie {
    font-size: 0.7rem;
    color: #9AA6B8;
    margin: 4px 0 0;
}

/* --- Tableau utilisateurs --- */
.tableau-utilisateurs {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #DDE3EC;
    border-radius: 10px;
    overflow: hidden;
}

.tableau-utilisateurs th, .tableau-utilisateurs td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #EDF1F6;
    font-size: 0.92rem;
}

.tableau-utilisateurs th {
    background: #EAF3FA;
    font-size: 0.78rem;
    text-transform: uppercase;
    color: #1A2347;
    letter-spacing: 0.03em;
    font-family: 'Montserrat', sans-serif;
}

.actions-demande { white-space: nowrap; }

.lien-approuver, .lien-refuser {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.8rem;
    margin-right: 6px;
}

.lien-approuver { background: #E9F3EF; color: #1E7A5F; }
.lien-approuver:hover { background: #D9EEE4; }

.lien-refuser { background: #FBEAEC; color: #B40B28; }
.lien-refuser:hover { background: #F7DBDE; }

.lien-changer-role {
    color: #37A0D7;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
}

.lien-changer-role:hover { text-decoration: underline; }

.form-couleur {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.case-couleur {
    width: 38px;
    height: 30px;
    padding: 2px;
    border-radius: 6px;
    cursor: pointer;
}

.form-couleur .lien-changer-role {
    font-size: 0.76rem;
    white-space: nowrap;
}

.badge-admin {
    display: inline-block;
    background: #1A2347;
    color: #fff;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    vertical-align: middle;
}

.badge-notif {
    display: inline-block;
    background: #B40B28;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    vertical-align: middle;
    min-width: 16px;
    text-align: center;
}

/* --- Page Transmissions --- */
.formulaire-transmission { gap: 6px; }

.liste-destinataires {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 6px 0 12px;
    padding: 10px 12px;
    background: #FAFBFD;
    border: 1px solid #EDF1F6;
    border-radius: 8px;
}

.sous-groupe-destinataires {
    flex-basis: 100%;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9AA6B8;
    font-family: 'Montserrat', sans-serif;
    margin-top: 4px;
}

.sous-groupe-destinataires:first-child { margin-top: 0; }

.etiquette-tout-selectionner {
    flex-basis: 100%;
    font-style: italic;
    color: #37A0D7;
    padding-bottom: 4px;
    border-bottom: 1px dashed #DDE3EC;
}

.liste-transmissions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.transmission {
    background: #fff;
    border: 1px solid #DDE3EC;
    border-left: 4px solid #999;
    border-radius: 8px;
    padding: 10px 14px;
}

.transmission-non-lue {
    background: #F5F8FC;
    box-shadow: inset 0 0 0 1px #C9D2DE;
}

.pastille-non-lue {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #B40B28;
    flex-shrink: 0;
}

.transmission summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    list-style: none;
}

.transmission summary::-webkit-details-marker { display: none; }
.transmission summary::after { content: "▸"; margin-left: auto; font-size: 0.7rem; color: #9AA6B8; }
.transmission[open] summary::after { content: "▾"; }

.transmission-auteur {
    font-weight: 700;
    color: #1A2347;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92rem;
}

.transmission-date {
    font-size: 0.78rem;
    color: #9AA6B8;
    white-space: nowrap;
}

.transmission-contenu {
    margin: 10px 0 0;
    font-size: 0.94rem;
    color: #483E37;
    white-space: pre-line;
}

.transmission-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #EDF1F6;
}

.transmissions-envoyees {
    margin-top: 26px;
}

.titre-envoyees {
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #1A2347;
    list-style: none;
    padding-bottom: 8px;
}

.titre-envoyees::-webkit-details-marker { display: none; }
.titre-envoyees::after { content: " ▸"; font-size: 0.8rem; color: #9AA6B8; }
.transmissions-envoyees[open] .titre-envoyees::after { content: " ▾"; }

.transmission-envoyee {
    border-left-color: #C9D2DE;
    background: #FAFBFD;
}

.transmission-entete-envoyee {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.78rem;
    color: #9AA6B8;
}

.transmission-destinataires { text-align: right; }

/* --- Page Discussions --- */
.liste-discussions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.carte-discussion {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #DDE3EC;
    border-left: 4px solid #C9D2DE;
    border-radius: 8px;
    overflow: hidden;
}

.carte-discussion-lien {
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
}

.carte-discussion:hover { background: #FAFBFD; }

.carte-discussion-non-lue {
    border-left-color: #1A2347;
    background: #F5F8FC;
}

.lien-marquer-non-lue {
    display: inline-block;
    margin: 0 14px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #37A0D7;
    text-decoration: none;
}

.lien-marquer-non-lue:hover { text-decoration: underline; }

.carte-discussion-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.carte-discussion-nom {
    font-weight: 700;
    color: #1A2347;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.98rem;
}

.carte-discussion-apercu {
    margin: 4px 0 0;
    font-size: 0.86rem;
    color: #6B6058;
}

.carte-discussion-vide { font-style: italic; color: #9AA6B8; }

.carte-discussion-meta {
    margin-top: 6px;
    font-size: 0.74rem;
    color: #9AA6B8;
}

.lien-retour-discussions {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0.86rem;
    color: #37A0D7;
    text-decoration: none;
    font-weight: 700;
}

.lien-retour-discussions:hover { text-decoration: underline; }

.entete-discussion {
    background: #fff;
    border: 1px solid #DDE3EC;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.titre-discussion { margin: 0 0 4px; }

.formulaire-renommer {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 0;
    border: none;
    background: transparent;
    margin: 0 0 4px;
}

.formulaire-renommer input[type="text"] { flex: 1; }
.formulaire-renommer button { margin-top: 0; width: auto; white-space: nowrap; }

.actions-discussion {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #EDF1F6;
}

/* Ajouter des personnes à une discussion existante (créateur uniquement) */
.ajout-participants-discussion {
    margin-top: 10px;
}

.declencheur-discussion {
    cursor: pointer;
    list-style: none;
}

.declencheur-discussion::-webkit-details-marker { display: none; }

.formulaire-ajout-participants {
    margin-top: 8px;
    padding: 0;
    border: none;
    background: transparent;
}

.formulaire-ajout-participants button {
    margin-top: 8px;
    width: auto;
}

.fil-discussion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 480px;
    overflow-y: auto;
    padding: 4px;
    margin-bottom: 10px;
}

.message-discussion {
    background: #fff;
    border: 1px solid #DDE3EC;
    border-left: 4px solid #999;
    border-radius: 8px;
    padding: 8px 12px;
}

.message-discussion-moi { background: #EAF3FA; }

.message-discussion-entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.message-discussion-auteur {
    font-weight: 700;
    color: #1A2347;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.86rem;
}

.message-discussion-date {
    font-size: 0.72rem;
    color: #9AA6B8;
    white-space: nowrap;
}

.message-discussion-contenu {
    margin: 4px 0 0;
    font-size: 0.92rem;
    color: #483E37;
    white-space: pre-line;
}

.formulaire-message-discussion {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
    padding: 10px;
}

.formulaire-message-discussion textarea { flex: 1; }
.formulaire-message-discussion button { margin-top: 0; width: auto; white-space: nowrap; }

@media (max-width: 600px) {
    .formulaire-renommer, .formulaire-message-discussion {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Fenêtre "Nouveau créneau" ouverte depuis la grille */
dialog#modale-creneau {
    border: none;
    border-radius: 14px;
    padding: 0;
    width: min(500px, 92vw);
    max-height: 88vh;
    overflow: auto;
}

dialog#modale-creneau::backdrop {
    background: rgba(26, 35, 71, 0.45);
}

dialog#modale-creneau form {
    border: none;
    padding: 20px;
}

.titre-modale { margin-top: 0; }

.boutons-modale {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.boutons-modale button { margin-top: 0; }

.bouton-annuler {
    background: #fff;
    color: #1A2347;
    border: 1px solid #C9D2DE;
}

.bouton-annuler:hover { background: #EAF3FA; }

@media (max-width: 600px) {
    .formulaire-reservation { grid-template-columns: 1fr; }
    .entete { flex-direction: column; }
    .entete-droite { text-align: left; }
}

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

.titre-historique-section {
    margin: 18px 0 4px;
    font-size: 0.95rem;
    color: #1A2347;
}

.tableau-historique-ajouts { max-width: 420px; }

/* Séances payées retirées (correction d'une erreur) : en rouge */
.ligne-retrait-seances td:last-child { color: #B40B28; font-weight: 700; }

.tableau-heures-travail td:first-child { font-weight: 700; }

/* Total du mois (du 1er au dernier jour) à droite du total de la semaine */
.tableau-statistiques .colonne-total-mois {
    background: #EAF3FA;
    color: #1A2347;
    font-weight: 800;
    white-space: nowrap;
}

.tableau-statistiques thead th.colonne-total-mois { background: #D9ECF6; }

/* Récapitulatif mensuel (vue Mois) : petit tableau à 2 colonnes */
.tableau-heures-mois { min-width: 0; max-width: 460px; }

.form-mdp-utilisateur {
    display: flex;
    gap: 4px;
    align-items: center;
}

.form-mdp-utilisateur input[type="password"] {
    width: 130px;
    padding: 3px 6px;
    font-size: 0.78rem;
    border: 1px solid #DDE3EC;
    border-radius: 5px;
}

.form-mdp-utilisateur button {
    background: none;
    border: 1px solid #DDE3EC;
    border-radius: 5px;
    padding: 3px 7px;
    cursor: pointer;
}

.cellule-heures-travail { white-space: nowrap; }

.cellule-heures-interieur {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.cellule-heures-interieur .champ-heures {
    width: 34px;
    padding: 3px 2px;
    text-align: center;
    border: 1px solid #DDE3EC;
    border-radius: 5px;
    font-size: 0.8rem;
}

.cellule-heures-interieur .etiquette-heures {
    font-size: 0.75rem;
    color: #6B6058;
}

.cellule-heures-interieur .champ-minutes {
    width: 46px;
    padding: 3px 2px;
    border: 1px solid #DDE3EC;
    border-radius: 5px;
    font-size: 0.8rem;
}

.tableau-compteurs-historique {
    max-width: 360px;
    margin: 10px 0 14px;
}

.tableau-compteurs-historique input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    padding: 3px 4px;
    font-size: 0.8rem;
    border: 1px solid #DDE3EC;
    border-radius: 5px;
}

.case-reservation-bureau {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    cursor: pointer;
}

.case-reservation-bureau input { width: auto; margin: 0; }

/* "Tous les [X] semaines" dans le formulaire de rappel */
.ligne-intervalle-rappel {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #6B6058;
}

.ligne-intervalle-rappel label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 400;
}

.ligne-intervalle-rappel input[type="number"] {
    width: 58px;
    padding: 5px 6px;
    border: 1px solid #DDE3EC;
    border-radius: 6px;
    font-size: 0.8rem;
    text-align: center;
}

.ligne-fin-rappel { display: flex; flex-direction: column; gap: 3px; }

.ligne-fin-rappel label { font-size: 0.72rem; color: #6B6058; }

.ligne-fin-rappel input[type="date"] {
    padding: 5px 6px;
    border: 1px solid #DDE3EC;
    border-radius: 6px;
    font-size: 0.8rem;
}

/* Onglet "Rappels" : tout l'onglet passe au rouge dès qu'il y a au moins un
   rappel à traiter, avec le nombre écrit dans le même sens que le texte de
   l'onglet (vertical quand l'onglet est fermé). */
.agenda-tiroir-onglet.onglet-rappels-urgent { background: #B40B28; }
.agenda-tiroir-onglet.onglet-rappels-urgent:hover { background: #8F0A20; }

.rappels-compteur-onglet {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
}

.rappels-titre {
    margin: 4px 0 2px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #B40B28;
}

.rappels-a-venir { margin-top: 10px; }

.rappels-a-venir-titre {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    color: #37A0D7;
    margin-bottom: 4px;
}

.rappels-a-venir-titre:hover { text-decoration: underline; }

/* Rubrique « Traité » : ce qui a été coché ces 31 derniers jours. */
.rappels-traites { margin-top: 6px; }
.rappels-traites .rappels-a-venir-titre { color: #2E7D4F; }
.ligne-rappel-traitee .rappel-contenu { color: #6B7688; }
.rappel-fait {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #E6F4EA;
    color: #2E7D4F;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ===== Jours fériés : date en rouge ===== */
.date-ferie,
.agenda-jour-entete-libelle.date-ferie,
.agenda-mois-jour-numero.date-ferie { color: #B40B28; }

.nom-ferie {
    font-family: 'Lato', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    color: #B40B28;
    text-transform: none;
}

@media (max-width: 600px) {
    .nom-ferie { display: none; }
}

/* ===== Créneaux S1 : petit liseré rouge systématique ===== */
.chip.chip-s1,
.agenda-mois-chip.chip-s1 {
    outline: 2px solid #B40B28;
    outline-offset: -2px;
}

/* ===== Vigilance créneau (APA) : liseré rouge plus épais ===== */
/* Placé après la règle S1 : un S1 coché "Vigilance" prend le liseré épais. */
.chip.chip-vigilance,
.agenda-mois-chip.chip-vigilance {
    outline: 4px solid #B40B28;
    outline-offset: -3px;
}

/* Un créneau passé reste atténué, mais son liseré rouge reste bien visible */
.chip-passe.chip-vigilance,
.chip-passe.chip-s1 { opacity: 0.75; }

.case-vigilance { color: #B40B28; }
.case-vigilance input { accent-color: #B40B28; }

/* ===== Sélecteur de date dans la barre de navigation ===== */
.form-aller-date {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.etiquette-aller-date {
    margin: 0;
    font-size: 0.95rem;
    cursor: pointer;
}

.form-aller-date input[type="date"] {
    width: auto;
    padding: 6px 8px;
    font-size: 0.85rem;
    border-radius: 8px;
    color: #1A2347;
    font-weight: 700;
}

@media (max-width: 600px) {
    .groupe-nav-boutons { flex-wrap: wrap; }
    .form-aller-date input[type="date"] { font-size: 0.8rem; padding: 5px 6px; }
}

/* ===== Renommer une personne (page de ses séances) ===== */
.renommer-personne { margin: 4px 0 12px; }

.renommer-personne summary {
    cursor: pointer;
    list-style: none;
    display: inline-block;
}

.renommer-personne summary::-webkit-details-marker { display: none; }

.form-renommer-personne {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    max-width: 460px;
    margin-top: 8px;
    padding: 10px;
}

.form-renommer-personne input[type="text"] { flex: 1 1 auto; min-width: 0; }
.form-renommer-personne button { margin-top: 0; width: auto; white-space: nowrap; }

/* ============================================================
   Pastilles de navigation à côté du logo (Agenda / Groupes)
   ============================================================ */
.pastille-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid #C9D2DE;
    background: #fff;
    color: #1A2347;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
    line-height: 1.2 !important;
    white-space: nowrap;
}

.pastille-nav:hover { background: #EAF3FA; border-color: #37A0D7; }

.pastille-nav-active,
.pastille-nav-active:hover {
    background: #1A2347;
    border-color: #1A2347;
    color: #fff;
}

/* ============================================================
   ESPACE GROUPES (groupes.php)
   ============================================================ */
.grp-onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; border-bottom: 2px solid #1A2347; }

.grp-onglet {
    padding: 8px 16px;
    border-radius: 10px 10px 0 0;
    background: #fff;
    border: 1px solid #DDE3EC;
    border-bottom: none;
    color: #1A2347;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
}

.grp-onglet:hover { background: #EAF3FA; }
.grp-onglet-actif, .grp-onglet-actif:hover { background: #1A2347; color: #fff; border-color: #1A2347; }

.grp-ligne-choix { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.grp-etiquette { font-size: 0.8rem; font-weight: 700; color: #6B6058; min-width: 76px; }
.grp-pilule-ajout { border-style: dashed; color: #37A0D7; }

.grp-encart {
    margin: 14px 0;
    background: #fff;
    border: 1px solid #DDE3EC;
    border-left: 5px solid #B40B28;
    border-radius: 10px;
    padding: 12px 14px;
}

.grp-encart h3 { margin: 0 0 8px; font-size: 0.95rem; color: #B40B28; font-family: 'Montserrat', sans-serif; }
.grp-liste-encaisser { display: flex; flex-wrap: wrap; gap: 8px; }
.grp-item-encaisser { background: #FBE4E7; color: #B40B28; border-radius: 8px; padding: 5px 10px; font-size: 0.85rem; font-weight: 700; }
.grp-item-encaisser span { font-weight: 400; color: #6B6058; }
.grp-item-garantie { background: #FDF1E3; color: #8A5A00; }
.grp-rien { color: #2E7D4F; font-weight: 700; font-size: 0.85rem; }

.grp-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 12px 0 14px; }
.grp-tuile { background: #fff; border: 1px solid #DDE3EC; border-radius: 10px; padding: 10px 14px; }
.grp-valeur { font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 800; color: #1A2347; }
.grp-libelle { font-size: 0.78rem; color: #6B6058; }
.grp-tuile-alerte .grp-valeur { color: #B40B28; }

.grp-tableau-scroll { overflow-x: auto; background: #fff; border: 1px solid #DDE3EC; border-radius: 10px; }
.grp-tableau { border-collapse: collapse; width: 100%; min-width: 1100px; font-size: 0.82rem; }
.grp-tableau th, .grp-tableau td { padding: 6px 4px; border-bottom: 1px solid #EDF1F6; text-align: center; vertical-align: middle; }
.grp-tableau thead th { background: #EAF3FA; color: #1A2347; font-family: 'Montserrat', sans-serif; font-size: 0.74rem; white-space: nowrap; }
.grp-date { display: block; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 0.68rem; color: #6B6058; }
.grp-tableau .grp-col-paiement { background: #FFF8F0; }
.grp-tableau thead .grp-col-paiement { background: #FDEBD3; }
.grp-tableau .grp-prochaine { background: #D9ECF6; }
.grp-tableau thead .grp-prochaine { background: #A9D3EE; }
.grp-tableau .grp-col-nom { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; min-width: 200px; border-right: 1px solid #DDE3EC; }
.grp-tableau thead .grp-col-nom { background: #EAF3FA; z-index: 2; }

.grp-nom {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: auto;
    font-family: 'Lato', sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    color: #1A2347;
    border-bottom: 1px dashed #9AA6B8;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
}

.grp-nom:hover { color: #37A0D7; background: none; }
.grp-sous-nom { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.grp-mini { font-size: 0.66rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.grp-mini-ok { background: #E3F3EA; color: #2E7D4F; }
.grp-mini-ko { background: #FBE4E7; color: #B40B28; }
.grp-mini-neutre { background: #F2F4F8; color: #6B6058; }

.grp-badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-weight: 700; font-size: 0.72rem; white-space: nowrap; }
.grp-badge-trimestre { background: #EAF3FA; color: #1F6FA0; }
.grp-badge-annee { background: #F0E8FA; color: #7B4FB5; }
.grp-badge-ok { background: #E3F3EA; color: #2E7D4F; }
.grp-badge-attente { background: #FBE4E7; color: #B40B28; }
.grp-badge-neutre { background: #F2F4F8; color: #9AA6B8; }
.grp-reglement { font-size: 0.74rem; color: #6B6058; white-space: nowrap; }

/* Les boutons du tableau ne doivent pas hériter du style des gros boutons */
.grp-tableau button.grp-presence,
.grp-tableau button.grp-paie {
    width: auto;
    margin: 0;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0;
}

.grp-presence { min-width: 28px; height: 26px; padding: 0 6px; border-radius: 7px; border: none; font-weight: 800; font-size: 0.85rem; cursor: pointer; }
.grp-presence-present, .grp-presence-present:hover { background: #E3F3EA; color: #2E7D4F; }
.grp-presence-absent, .grp-presence-absent:hover { background: #FBE4E7; color: #B40B28; }
.grp-presence-excuse, .grp-presence-excuse:hover { background: #FDF1E3; color: #8A5A00; }
.grp-presence-avenir, .grp-presence-avenir:hover { background: #F2F4F8; color: #C7D0DE; }
.grp-presence-noncote, .grp-presence-noncote:hover { background: #FFF4DC; color: #B07D00; outline: 1px dashed #E0A800; outline-offset: -1px; }

.grp-paie { border: none; border-radius: 7px; padding: 4px 7px; font-weight: 800; font-size: 0.74rem; cursor: pointer; white-space: nowrap; }
.grp-paie-paye, .grp-paie-paye:hover { background: #E3F3EA; color: #2E7D4F; }
.grp-paie-du, .grp-paie-du:hover { background: #B40B28; color: #fff; }
.grp-paie-avenir, .grp-paie-avenir:hover { background: #F2F4F8; color: #9AA6B8; }
.grp-vide { color: #C9D2DE; }
.grp-inclus { font-size: 0.7rem; color: #7B4FB5; font-weight: 700; }

.grp-abs-1 { color: #2E7D4F; font-weight: 800; }
.grp-abs-0 { color: #B40B28; font-weight: 800; }
.grp-total { font-weight: 800; white-space: nowrap; }
.grp-total-ok { color: #2E7D4F; }
.grp-total-manque { color: #B40B28; }
.grp-texte-rouge { color: #B40B28; font-weight: 700; font-size: 0.75rem; }

.grp-legende { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 2px 4px; font-size: 0.78rem; color: #6B6058; }
.grp-legende span { display: inline-flex; align-items: center; gap: 5px; }
.grp-legende i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.grp-astuce { font-size: 0.8rem; color: #6B6058; margin: 4px 2px 0; }

/* Fiche d'un inscrit (fenêtre) */
dialog.grp-fiche {
    border: none;
    border-radius: 14px;
    padding: 0;
    width: min(620px, 94vw);
    max-height: 90vh;
    overflow: auto;
}

dialog.grp-fiche::backdrop { background: rgba(26, 35, 71, 0.45); }
dialog.grp-fiche form { border: none; padding: 20px; }
dialog.grp-fiche h3 { margin: 0 0 4px; color: #1A2347; font-family: 'Montserrat', sans-serif; }

.grp-grille-form { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.grp-pleine { grid-column: 1 / -1; }
.grp-sous-grille { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) {
    .grp-grille-form, .grp-sous-grille { grid-template-columns: 1fr; }
}

.grp-boutons-fiche { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.grp-boutons-fiche button { width: auto; margin-top: 0; padding: 9px 18px; }
.grp-retirer { margin-left: auto; }

.grp-bloc-inscrire { margin: 16px 0; }
.grp-bloc-inscrire > summary { cursor: pointer; list-style: none; display: inline-block; font-size: 0.95rem; }
.grp-bloc-inscrire > summary::-webkit-details-marker { display: none; }
.grp-form-inscrire, .grp-form-tarifs { max-width: 760px; margin-top: 8px; }
.grp-form-inscrire button, .grp-form-tarifs button, .grp-form-dates button { width: auto; align-self: flex-start; padding: 9px 18px; }

.grp-recherche { max-width: 320px; margin: 4px 0 10px; padding: 8px 12px; font-size: 0.9rem; border-radius: 999px; }
.grp-tableau-inscrits { min-width: 760px; }
.grp-tableau-inscrits td { text-align: left; }
.grp-cellule-inscriptions { font-size: 0.75rem; color: #6B6058; }

/* Réglages : un bloc par groupe */
.grp-carte { background: #fff; border: 1px solid #DDE3EC; border-radius: 12px; padding: 12px 16px; margin: 10px 0; }
.grp-carte-active { border-color: #37A0D7; box-shadow: 0 0 0 2px #EAF3FA; }
.grp-carte-entete { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.grp-carte-entete strong { font-family: 'Montserrat', sans-serif; color: #1A2347; font-size: 1rem; }
.grp-carte-entete span { color: #6B6058; font-size: 0.86rem; }
.grp-carte details { margin: 6px 0; }
.grp-carte summary { cursor: pointer; }
.grp-trimestre-reglage { background: #FAFBFD; border: 1px solid #EDF1F6; border-radius: 8px; padding: 8px 10px; }
.grp-form-dates { padding: 10px; margin: 8px 0; }
.grp-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 12px; }
.grp-date-seance { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #1A2347; margin: 0; flex-wrap: wrap; }
.grp-date-seance input { width: auto; padding: 5px 6px; font-size: 0.85rem; }

/* ===== Espace Groupes — numéros, listes déroulantes, planning, attente ===== */
.grp-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-right: 5px;
    padding: 0 4px;
    border-radius: 999px;
    background: #1A2347;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    vertical-align: middle;
}

.grp-numero-cellule { font-weight: 800; color: #1A2347; text-align: center !important; width: 34px; }
.grp-compteur-onglet { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: #37A0D7; color: #fff; font-size: 0.7rem; text-align: center; }
.grp-onglet-actif .grp-compteur-onglet { background: #fff; color: #1A2347; }
.grp-mini-attente { background: #FDF1E3; color: #8A5A00; }
.grp-nowrap { white-space: nowrap; }

/* Listes déroulantes « en pastille » dans les tableaux (formule, règlement,
   garantie, ordonnance) : on clique dessus pour changer la valeur. */
select.grp-select, select.grp-select-mini {
    -webkit-appearance: none;
    appearance: none;
    width: auto;
    margin: 0;
    padding: 3px 22px 3px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: 'Lato', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239AA6B8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-color: #F2F4F8;
    color: #483E37;
}

select.grp-select-mini { font-size: 0.66rem; padding: 1px 18px 1px 7px; background-position: right 6px center; }
select.grp-select:hover, select.grp-select-mini:hover { border-color: #37A0D7; }
select.grp-select-trimestre { background-color: #EAF3FA; color: #1F6FA0; }
select.grp-select-annee { background-color: #F0E8FA; color: #7B4FB5; }
select.grp-select-reglement { background-color: #fff; border-color: #DDE3EC; color: #483E37; font-weight: 400; }
select.grp-select-garantie-ok { background-color: #E3F3EA; color: #2E7D4F; }
select.grp-select-garantie-attente { background-color: #FBE4E7; color: #B40B28; }
select.grp-select-garantie-neutre { background-color: #F2F4F8; color: #9AA6B8; }
select.grp-select-ordo-oui { background-color: #E3F3EA; color: #2E7D4F; }
select.grp-select-ordo-non { background-color: #FBE4E7; color: #B40B28; }
select.grp-select-ordo-nr { background-color: #F2F4F8; color: #6B6058; }
select.grp-select:disabled, select.grp-select-mini:disabled { opacity: 0.5; }
.grp-enregistre { outline: 2px solid #4FAE7C !important; outline-offset: 1px; }

/* Liste d'attente */
.grp-tableau-attente { min-width: 1080px; }
.grp-tableau-attente td { text-align: left; }
.grp-input-preferences { width: 100%; min-width: 200px; padding: 5px 8px; font-size: 0.82rem; border-radius: 6px; }
.grp-form-ligne { display: flex; flex-direction: row; gap: 6px; align-items: center; padding: 0; border: none; background: transparent; }
.grp-form-ligne select.grp-select { max-width: 330px; }
.grp-form-ligne button { width: auto; margin: 0; padding: 5px 10px; font-size: 0.78rem; white-space: nowrap; }

/* Planning de tous les groupes (vue mois) */
.grp-nav-planning { border: 1px solid #DDE3EC; border-radius: 10px 10px 0 0; }
.grp-legende-groupes { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 2px; font-size: 0.82rem; color: #483E37; }
.grp-legende-groupes span { display: inline-flex; align-items: center; gap: 6px; }
.grp-legende-groupes i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.grp-planning-scroll { overflow-x: auto; border: 1px solid #DDE3EC; border-radius: 10px; background: #fff; }
.grp-planning { display: grid; grid-template-columns: repeat(6, minmax(140px, 1fr)); min-width: 840px; }
.grp-planning-entete { background: #EAF3FA; padding: 8px 4px; text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.75rem; color: #1A2347; text-transform: uppercase; border-bottom: 1px solid #DDE3EC; }
.grp-planning-jour { min-height: 104px; padding: 5px; border-right: 1px solid #EDF1F6; border-bottom: 1px solid #EDF1F6; display: flex; flex-direction: column; gap: 4px; }
.grp-planning-jour:nth-child(6n) { border-right: none; }
.grp-planning-hors-mois { background: #FAFBFD; }
.grp-planning-hors-mois .grp-planning-numero { color: #C9D2DE; }
.grp-planning-aujourdhui { background: #D9ECF6; box-shadow: inset 0 0 0 2px #37A0D7; }
.grp-planning-numero { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.82rem; color: #1A2347; }
.grp-planning-chip { display: block; border-left: 4px solid #37A0D7; border-radius: 6px; padding: 4px 6px; text-decoration: none; color: #1A2347; font-size: 0.72rem; line-height: 1.3; }
.grp-planning-chip:hover { filter: brightness(0.96); box-shadow: 0 2px 8px rgba(26, 35, 71, 0.15); }
.grp-planning-chip strong { display: block; font-size: 0.74rem; }
.grp-planning-chip span { display: block; color: #483E37; }
.grp-planning-detail { font-weight: 700; color: #6B6058 !important; }

/* Séances d'un groupe qui ne sont plus dans l'agenda principal */
.grp-alerte-agenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 10px 0 4px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #FBE4E7;
    color: #B40B28;
    font-size: 0.85rem;
    font-weight: 700;
}

.grp-alerte-agenda .pilule-filtre { font-size: 0.8rem; }

/* ============================================================
   Catégories de personnes (association, remise...) : pastille
   colorée avec pictogramme, à côté du nom
   ============================================================ */
.badge-categorie {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    padding: 0 5px;
    min-width: 18px;
    height: 17px;
    border-radius: 999px;
    border: 1.5px solid var(--couleur-categorie, #37A0D7);
    background: #fff;
    background: color-mix(in srgb, var(--couleur-categorie, #37A0D7) 22%, #fff);
    color: #1A2347;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    font-family: 'Lato', sans-serif;
}

.badge-categorie-nom { font-weight: 700; font-size: 0.68rem; }
h2 .badge-categorie { height: 22px; font-size: 0.8rem; padding: 0 8px; }
h2 .badge-categorie-nom { font-size: 0.78rem; }
.chip-horaire .badge-categorie { height: 15px; font-size: 0.6rem; margin-left: 3px; padding: 0 3px; }

/* Choix des catégories sur la page d'une personne (cliquer = attribuer / retirer) */
.bloc-categories-personne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 6px 0 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #DDE3EC;
    border-radius: 10px;
}

.etiquette-categories { font-weight: 700; font-size: 0.85rem; color: #1A2347; margin-right: 4px; }

.choix-categorie {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto;
    margin: 0;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1.5px dashed var(--couleur-categorie, #37A0D7);
    background: #fff;
    color: #483E37;
    font-family: 'Lato', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    letter-spacing: 0;
}

.choix-categorie:hover { background: #F7FAFD; }

.choix-categorie-active,
.choix-categorie-active:hover {
    border-style: solid;
    background: color-mix(in srgb, var(--couleur-categorie, #37A0D7) 25%, #fff);
    color: #1A2347;
}

.details-categorie { flex-basis: 100%; }
.details-categorie summary { cursor: pointer; display: inline-block; list-style: none; font-size: 0.85rem; }
.details-categorie summary::-webkit-details-marker { display: none; }

.form-categorie {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 8px;
    background: #FAFBFD;
}

.form-categorie input[type="text"] { width: auto; flex: 1 1 160px; padding: 6px 8px; font-size: 0.85rem; }
.form-categorie select { width: auto; padding: 5px 6px; font-size: 1rem; }
.form-categorie input[type="color"] { width: 40px; height: 32px; padding: 2px; }
.form-categorie button { width: auto; margin: 0; padding: 7px 14px; font-size: 0.82rem; }
.ligne-gestion-categorie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ligne-gestion-categorie .form-categorie { flex: 1 1 auto; }

/* Filtre par catégorie dans le tiroir « Personnes » */
.filtre-categories-personnes { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 6px; }
.filtre-categories-personnes .choix-categorie { font-size: 0.72rem; padding: 3px 8px; }
.nb-categorie { font-size: 0.66rem; color: #6B6058; font-weight: 400; }
/* Pastilles placées AVANT le nom (toujours visibles, même si le nom est coupé) */
.badges-avant .badge-categorie { margin: 0 3px 0 0; }
.badges-avant { display: inline; }

/* ============================================================
   Barre « À faire payer aujourd'hui » au-dessus du calendrier
   ============================================================ */
.barre-paiements {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #DDE3EC;
    background: #EAF3FA;
    color: #1A2347;
    font-size: 0.85rem;
}

.barre-paiements-titre { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.85rem; margin-right: 4px; }

.barre-paiements-alerte {
    background: #B40B28;
    border-color: #B40B28;
    color: #fff;
}

.barre-paiements-personne {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    color: #1A2347;
    text-decoration: none;
    font-size: 0.82rem;
}

.barre-paiements-personne:hover { background: #FBE4E7; }
.barre-paiements-heure { font-size: 0.72rem; font-weight: 700; color: #6B6058; }
.barre-paiements-nom { font-weight: 700; }
.barre-paiements-ratio { font-size: 0.74rem; font-weight: 700; color: #B40B28; }
.barre-paiements-personne .badges-avant .badge-categorie { margin: 0; }

/* Barre « À faire payer » : réduite sur téléphone (flèche), ouverte sur ordinateur */
details.barre-paiements { display: block; }
.barre-paiements-resume {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
    list-style: none;
    vertical-align: middle;
}
.barre-paiements-resume::-webkit-details-marker { display: none; }
.barre-paiements-resume .barre-paiements-titre { margin-right: 0; }
.barre-paiements-fleche { display: none; font-size: 1rem; line-height: 1; transition: transform 0.15s; }
.barre-paiements-liste { display: inline-flex; flex-wrap: wrap; gap: 8px; vertical-align: middle; }

@media (min-width: 701px) {
    /* Sur ordinateur, la barre reste ouverte : le titre n'est pas cliquable. */
    .barre-paiements-resume { pointer-events: none; cursor: default; }
}

@media (max-width: 700px) {
    /* Flèche juste après le titre (et non tout à droite) pour qu'elle reste
       visible même si la page est plus large que l'écran du téléphone. */
    .barre-paiements-resume { display: flex; width: 100%; justify-content: flex-start; margin: 0; cursor: pointer; }
    .barre-paiements-fleche { display: inline-block; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); }
    details.barre-paiements:not([open]) .barre-paiements-fleche { transform: rotate(-90deg); }
    .barre-paiements-liste { display: flex; margin-top: 8px; }
}

/* ============================================================
   Sécurité & RGPD
   ============================================================ */
.mention-rgpd-connexion {
    margin-top: 18px;
    font-size: 0.78rem;
    color: #6B6058;
    line-height: 1.45;
}
.texte-discret { color: #6B6058; font-size: 0.82rem; }
.bouton-secondaire { background: #fff; color: #1A2347; border: 1.5px solid #1A2347; }
.bouton-secondaire:hover { background: #EAF3FA; }
.bouton-lien { background: none; color: #37A0D7; padding: 4px 0; margin-top: 6px; text-decoration: underline; font-weight: 400; }
.bouton-lien:hover { background: none; color: #1A2347; }
.bouton-danger { background: #B40B28; color: #fff; }
.bouton-danger:hover { background: #8E0820; }
.bouton-petit { padding: 5px 10px; font-size: 0.8rem; margin-top: 0; }

.encart-2fa {
    background: #fff;
    border: 1px solid #DDE3EC;
    border-left: 5px solid #37A0D7;
    border-radius: 10px;
    padding: 12px 16px;
    max-width: 560px;
}
.qr-2fa { margin: 8px 0 12px; }
.qr-2fa svg { width: 210px; height: 210px; display: block; background: #fff; }
.cle-2fa { font-family: monospace; font-size: 1rem; letter-spacing: 0.06em; word-break: break-all; }

.page-rgpd h3 { margin: 6px 0 8px; font-family: 'Montserrat', sans-serif; color: #1A2347; font-size: 1rem; }
.rgpd-filtres { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin: 10px 0 14px; }
.rgpd-filtres label { font-size: 0.82rem; font-weight: 700; color: #1A2347; display: flex; flex-direction: column; gap: 4px; }
.rgpd-filtres select { min-width: 200px; }
.rgpd-recherche { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 560px; }
.rgpd-recherche input { flex: 1 1 240px; }
.rgpd-recherche button { margin-top: 0; }
.rgpd-barre-actions { margin: 14px 0 6px; }
.rgpd-defilement { overflow-x: auto; }
.tableau-journal td { font-size: 0.85rem; vertical-align: top; }
.tableau-compact th, .tableau-compact td { padding: 6px 9px; font-size: 0.84rem; }
.pastille-journal { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: #EDF1F6; color: #1A2347; }
.pastille-journal-ok { background: #E9F3EF; color: #1E7A5F; }
.pastille-journal-alerte { background: #FBEAEC; color: #B40B28; }
.pastille-journal-info { background: #EAF3FA; color: #1A5C8A; }
.rgpd-bloque { display: inline-block; margin: 4px 10px 0 0; padding: 3px 9px; border-radius: 8px; background: #FBEAEC; color: #B40B28; font-weight: 700; }
.rgpd-fiche {
    background: #fff;
    border: 1px solid #DDE3EC;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 12px 0;
}
.rgpd-liste { margin: 4px 0 10px 18px; padding: 0; font-size: 0.9rem; line-height: 1.5; }
.rgpd-effacer { margin-top: 10px; }
.cellule-securite { font-size: 0.85rem; }

@media print {
    .rgpd-pas-imprime, .entete, .grp-onglets { display: none !important; }
    body { background: #fff; }
    .rgpd-fiche { border: 1px solid #999; break-inside: avoid; }
}
/* Formulaires « légers » (sans carte blanche autour) */
.rgpd-filtres, .rgpd-recherche, .rgpd-effacer, .encart-2fa form, .page-rgpd td form, .form-leger {
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
}
.rgpd-filtres { flex-direction: row; align-items: flex-end; }
.rgpd-filtres select { width: auto; }
.rgpd-recherche { flex-direction: row; }
.rgpd-recherche input { width: auto; flex: 1 1 220px; }
.rgpd-recherche button { width: auto; flex: 0 0 auto; }
.rgpd-effacer button, .page-rgpd form > .bouton-danger, .rgpd-barre-actions button { width: auto; }
.page-rgpd .bouton-danger { width: auto; padding: 9px 16px; }
.encart-2fa form { max-width: 320px; margin-top: 4px; }
.encart-2fa .bouton-lien { width: auto; border: none; }
.rgpd-effacer, .rgpd-barre-actions, .page-rgpd form { align-items: flex-start; }
.rgpd-recherche { align-items: center; }

/* Double authentification : choix SMS / email / application */
.case-memoriser { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 0.86rem; margin-top: 8px; cursor: pointer; }
.case-memoriser input { margin-top: 3px; flex: 0 0 auto; }
.formulaire-choix-2fa { max-width: 560px; }
.choix-2fa { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin-top: 10px; padding: 10px 12px; border: 1px solid #DDE3EC; border-radius: 10px; cursor: pointer; line-height: 1.4; }
.choix-2fa input { margin-top: 3px; flex: 0 0 auto; }
.choix-2fa:has(input:checked) { border-color: #37A0D7; background: #EAF3FA; }
.choix-2fa-indisponible { opacity: 0.55; cursor: not-allowed; }
.champ-2fa { margin: 6px 0 0 28px; }
.details-2fa { margin: 10px 0; }
.details-2fa summary { cursor: pointer; color: #37A0D7; font-weight: 700; margin-bottom: 8px; }
.titre-appareils { margin: 18px 0 6px; font-family: 'Montserrat', sans-serif; color: #1A2347; font-size: 1rem; }
.liste-appareils { margin: 4px 0 10px 18px; padding: 0; font-size: 0.9rem; line-height: 1.6; }
.form-leger { margin-top: 4px; }
.form-leger .bouton-secondaire, .form-leger .bouton-lien { width: auto; }
.form-leger { align-items: flex-start; }

/* Menu « Gestion Admin » dans l'en-tête */
.menu-admin { display: inline-block; position: relative; }
.menu-admin summary { display: inline; cursor: pointer; color: #37A0D7; font-weight: 700; list-style: none; }
.menu-admin summary::-webkit-details-marker { display: none; }
.menu-admin summary::after { content: ' ▾'; font-size: 0.85em; }
.menu-admin[open] summary::after { content: ' ▴'; }
.menu-admin summary:hover { text-decoration: underline; }
.menu-admin-liste {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    min-width: 200px;
    background: #fff;
    border: 1px solid #DDE3EC;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(26, 35, 71, 0.15);
    padding: 6px;
    text-align: left;
    display: flex;
    flex-direction: column;
}
.entete-droite .menu-admin-liste a { padding: 9px 12px; border-radius: 6px; color: #1A2347; }
.entete-droite .menu-admin-liste a:hover { background: #EAF3FA; text-decoration: none; }
.entete-droite .menu-admin-liste a.menu-admin-deconnexion { border-top: 1px solid #EDF1F6; border-radius: 0 0 6px 6px; margin-top: 4px; color: #B40B28; }
@media (max-width: 600px) {
    .menu-admin-liste { min-width: 180px; }
}