/* Style minimal partagé — Cotplan */

/* Système de design (2026-09-08) — toutes les couleurs de l'habillage général (fonds, textes,
   boutons, bordures) vivent ici en variables CSS, avec une variante par mode. Bascule pilotée par
   l'attribut data-theme sur <html> (assets/js/theme.js) — voir CLAUDE.md, "Système de design".
   Les couleurs MÉTIER déjà en place ailleurs (couleur d'une assistante/d'un praticien, badges de
   statut congé/récup/pointage, étapes du bouton de pointage...) sont volontairement laissées EN
   DEHORS de ce système : elles ne varient jamais selon le thème.
   --marque-texte est une constante (PAS une paire clair/sombre) : texte foncé systématique sur tout
   fond de la couleur de marque ou d'un statut (succès/alerte/erreur) plein — dans les deux modes, ces
   fonds sont trop clairs/saturés pour un texte blanc lisible (voir CLAUDE.md pour le raisonnement). */
:root {
    --fond-principal: #F7FBFC;
    --surface: #FFFFFF;
    --surface-secondaire: #EAF7F7;
    --marque: #33CCCC;
    --marque-survol: #1EAAAA;
    --marque-actif: #168B8B;
    --marque-texte: #102B2E;
    --texte-principal: #202E34;
    --texte-secondaire: #50646B;
    --bordures: #D5E6E8;
    --succes: #1F9D75;
    --alerte: #C97920;
    --erreur: #C94C5D;
}

:root[data-theme="dark"] {
    --fond-principal: #101B20;
    --surface: #16272D;
    --surface-secondaire: #1D333B;
    --marque-survol: #5BDBD5;
    --marque-actif: #1CAAAA;
    --texte-principal: #F7FCFC;
    --texte-secondaire: #B2C7CB;
    --bordures: #2B4650;
    --succes: #4CC9A5;
    --alerte: #FFC56E;
    --erreur: #FF8F9D;
}

* { box-sizing: border-box; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color: var(--texte-principal);
    background: var(--fond-principal);
    margin: 0;
    padding: 0;
}

a {
    color: var(--marque-actif);
}

a:hover {
    color: var(--marque-survol);
}

header.site-header {
    background: var(--surface);
    color: var(--texte-principal);
    border-bottom: 1px solid var(--bordures);
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header.site-header a {
    color: var(--texte-principal);
    text-decoration: none;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.logo-icone {
    height: 1.9rem;
    width: auto;
    display: block;
}

.logo-icone-sombre { display: none; }
[data-theme="dark"] .logo-icone-clair { display: none; }
[data-theme="dark"] .logo-icone-sombre { display: block; }

header.site-header nav {
    display: flex;
    align-items: center;
}

header.site-header nav a {
    margin-right: 1rem;
    color: var(--texte-secondaire);
}

header.site-header nav a:hover {
    color: var(--marque);
}

.btn-theme-toggle {
    background: none;
    border: 1px solid var(--bordures);
    border-radius: 999px;
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--texte-principal);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.btn-theme-toggle:hover {
    background: var(--surface-secondaire);
}

.btn-theme-toggle svg {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}

.icone-lune { display: none; }
[data-theme="dark"] .icone-soleil { display: none; }
[data-theme="dark"] .icone-lune { display: block; }

.badge-nav {
    display: inline-block;
    background: var(--erreur);
    color: var(--marque-texte);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
}

/* Navigation mobile (2026-09-13) — hamburger + panneau coulissant, composant partagé par toutes les
   pages admin/assistante (voir CLAUDE.md, "Navigation mobile"). .btn-nav-toggle est caché en desktop
   (nav déjà en ligne dans le header) ; sous 768px, la nav devient un panneau fixe qui coulisse depuis
   la droite, piloté par assets/js/nav.js (classe .nav-ouverte) + un voile (.nav-overlay, injecté en
   JS) qui referme le panneau au clic à l'extérieur. z-index élevé (500+) pour rester au-dessus des
   modales (.modal-overlay, z-index 10) et du header lui-même. */
.btn-nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--bordures);
    border-radius: 6px;
    width: 2.3rem;
    height: 2.3rem;
    align-items: center;
    justify-content: center;
    color: var(--texte-principal);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.btn-nav-toggle svg {
    width: 1.3rem;
    height: 1.3rem;
    display: block;
}

.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 490;
}

.nav-overlay.nav-overlay-visible {
    display: block;
}

@media (max-width: 767px) {
    header.site-header {
        position: relative;
        z-index: 495;
        padding: 0.65rem 1rem;
    }

    .btn-nav-toggle {
        display: inline-flex;
    }

    header.site-header nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(78vw, 300px);
        background: var(--surface);
        flex-direction: column;
        align-items: stretch;
        gap: 0.1rem;
        padding: 4.5rem 1.25rem 1.5rem;
        box-shadow: -2px 0 16px rgba(0,0,0,0.18);
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 500;
        overflow-y: auto;
    }

    header.site-header nav.nav-ouverte {
        transform: translateX(0);
    }

    header.site-header nav a {
        margin-right: 0;
        padding: 0.9rem 0.3rem;
        border-bottom: 1px solid var(--bordures);
        font-size: 1rem;
    }

    header.site-header nav .btn-theme-toggle {
        align-self: flex-start;
        margin-top: 0.9rem;
    }
}

main {
    max-width: 960px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

th, td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--bordures);
}

th {
    background: var(--surface-secondaire);
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--texte-secondaire);
}

tr.inactive td {
    color: var(--texte-secondaire);
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 2px solid var(--bordures);
    object-fit: cover;
    vertical-align: middle;
    flex-shrink: 0;
    transition: width 0.25s ease, height 0.25s ease, font-size 0.25s ease;
}

.avatar-grande {
    width: 5.5rem;
    height: 5.5rem;
    border-width: 3px;
}

.avatar-grande.avatar-initiales {
    font-size: 2.2rem;
}

.avatar-initiales {
    background: #cccccc;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}

.avatar-petit {
    width: 0.9rem;
    height: 0.9rem;
    border-width: 1px;
}

.avatar-petit.avatar-initiales {
    font-size: 0.5rem;
}

.col-avatar {
    width: 2.6rem;
}

/* admin/equipe.php — boutons de l'en-tête (« Envoyer les identifiants à toutes les actives » +
   « Ajouter une assistante ») ; empilés sous 768px (voir le bloc mobile de cette page). */
.actions-equipe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.apercu-photo-ligne {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.apercu-photo-ligne input[type="file"] {
    flex: 1;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.8rem;
}

.badge-active { background: color-mix(in srgb, var(--succes) 18%, var(--surface)); color: var(--succes); }
.badge-inactive { background: color-mix(in srgb, var(--erreur) 18%, var(--surface)); color: var(--erreur); }

button, .btn {
    cursor: pointer;
    border: none;
    border-radius: 4px;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
}

/* Boutons pleins sur fond de marque/statut : texte TOUJOURS foncé (--marque-texte), jamais blanc —
   ces fonds (marque, succès, alerte, erreur) sont trop clairs/saturés en mode sombre notamment pour
   un texte blanc lisible. Voir CLAUDE.md, "Système de design". */
.btn-primary { background: var(--marque); color: var(--marque-texte); }
.btn-primary:hover { background: var(--marque-survol); }
.btn-primary:active { background: var(--marque-actif); }

.btn-danger { background: var(--erreur); color: var(--marque-texte); }
.btn-danger:hover { background: color-mix(in srgb, var(--erreur) 85%, black); }

.btn-secondary { background: var(--surface-secondaire); color: var(--texte-principal); }
.btn-secondary:hover { background: var(--bordures); }

.btn-small { padding: 0.3rem 0.6rem; font-size: 0.8rem; }

/* Modale simple */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.modal-overlay.open {
    display: flex;
}

.modal {
    background: var(--surface);
    border-radius: 6px;
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1.5rem 0 0;
}

.modal h2 {
    margin: 0 1.5rem 1rem;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.modal form {
    overflow-y: auto;
    min-height: 0;
    padding: 0 1.5rem;
}

.form-field {
    margin-bottom: 0.9rem;
}

.form-field label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: var(--texte-secondaire);
}

/* Base pour TOUS les <select>/<option> du site (2026-09-08) — les éléments de formulaire ne
   suivent pas automatiquement `color`/`background` de la page dans la plupart des navigateurs
   (rendu natif indépendant de la cascade), d'où un texte noir illisible sur fond sombre sans cette
   règle explicite. Volontairement en dehors de .form-field pour couvrir aussi les <select> "libres"
   (fabrique de planning, filtres...) qui n'ont jamais été dans un .form-field. Spécificité faible
   (élément seul) : toute règle plus spécifique ci-dessous ou ailleurs (ex. la teinte inline par
   assistante posée par assets/js/fabrique-planning.js sur .select-clinique, qui ne fixe QUE le
   fond) garde la main sur le fond — mais le texte, jamais fixé par ce fond dynamique, reste lisible
   grâce à cette règle. */
select,
option {
    color: var(--texte-principal);
    background-color: var(--surface);
}

.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--bordures);
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--surface);
    color: var(--texte-principal);
}

.form-field textarea {
    resize: vertical;
}

.form-field input[type="color"] {
    padding: 0.15rem;
    height: 2.3rem;
    width: 100%;
}

/* Case à cocher + label sur une seule ligne, jamais superposés (cf. règle générale ci-dessus
   qui met les <input> en width:100% — explicitement exclue pour les checkboxes) */
.checkbox-ligne {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
    cursor: pointer;
}

.checkbox-ligne input[type="checkbox"] {
    width: auto;
    height: auto;
    margin: 0;
    flex-shrink: 0;
}

.liste-roles-checkbox {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.liste-jours-recup {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ligne-jour-recup {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ligne-jour-recup .checkbox-ligne {
    min-width: 6.5rem;
}

.liste-quotas-conges {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.ligne-quota-conges {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ligne-quota-conges input {
    width: 6rem;
}

.select-parite-recup {
    width: auto;
    flex: 1;
}

.select-parite-recup:disabled {
    opacity: 0.4;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    position: sticky;
    bottom: 0;
    background: var(--surface);
    margin: 1.2rem -1.5rem 0;
    padding: 0.75rem 1.5rem 1.5rem;
    border-top: 1px solid var(--bordures);
}

.modal-actions-triple {
    flex-direction: column;
    align-items: stretch;
}

.modal-actions-triple .btn {
    width: 100%;
    text-align: center;
}

.message {
    margin-bottom: 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.message-error, .message-error-longue { background: color-mix(in srgb, var(--erreur) 18%, var(--surface)); color: var(--erreur); }
.message-success { background: color-mix(in srgb, var(--succes) 18%, var(--surface)); color: var(--succes); }
.message-error-longue ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

/* Fabrique planning / planning type / vue assistante */

.main-large {
    max-width: 100%;
    padding: 0 1.5rem;
}

.tabs {
    display: flex;
    gap: 0.5rem;
}

.dropdown-boost {
    position: relative;
}

.panneau-boost {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 20;
    width: 320px;
    background: var(--surface);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    padding: 0.9rem;
}

.panneau-boost-cachee {
    display: none;
}

.panneau-boost .sous-titre {
    margin-top: 0;
}

.panneau-boost > .texte-discret {
    margin-bottom: 0.6rem;
}

.liste-boost-assistantes {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 0.75rem;
}

.ligne-boost-assistante {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
}

.nom-boost-assistante {
    flex: 1;
}

.input-boost-cible {
    width: 3.5rem;
}

.input-boost-cible:disabled {
    opacity: 0.4;
}

.panneau-boost .btn {
    width: 100%;
}

.dropdown-calendrier {
    position: relative;
}

.panneau-calendrier {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 20;
    width: 280px;
    background: var(--surface);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    padding: 0.9rem;
}

.panneau-calendrier-cachee {
    display: none;
}

.calendrier-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    font-weight: bold;
    font-size: 0.88rem;
}

.calendrier-entete button {
    background: none;
    border: none;
    font-size: 1rem;
    padding: 0.1rem 0.4rem;
    cursor: pointer;
    color: var(--marque-actif);
}

.calendrier-grille {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.2rem;
    text-align: center;
}

.calendrier-jour-nom {
    font-size: 0.7rem;
    color: var(--texte-secondaire);
    padding-bottom: 0.2rem;
}

.calendrier-jour {
    border: 2px solid transparent;
    background: var(--surface-secondaire);
    border-radius: 4px;
    padding: 0.3rem 0;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--texte-principal);
}

.calendrier-jour:hover {
    border-color: var(--marque);
}

.calendrier-jour-hors-mois {
    opacity: 0.35;
}

.calendrier-jour-active {
    border-color: var(--marque);
}

/* Statut du planning (publié/brouillon) : mêmes teintes générales que .badge-active/.badge-inactive
   (statut générique), converties en variables — férié/fermeture restent la palette MÉTIER dédiée
   (jamais de variable, cohérente avec .etiquette-ferie/.etiquette-fermeture ailleurs sur le site). */
.calendrier-jour-publie { background: color-mix(in srgb, var(--succes) 18%, var(--surface)); color: var(--succes); }
.calendrier-jour-brouillon { background: color-mix(in srgb, var(--erreur) 18%, var(--surface)); color: var(--erreur); }
.calendrier-jour-ferie { background: #fdeecb; color: #92650a; }
.calendrier-jour-fermeture { background: #e9e2f5; color: #5b3aa8; }

/* Calendrier de sélection du module Heures supplémentaires (admin/pointages.php) — code couleur
   volontairement DISTINCT du calendrier de sélection de semaine ci-dessus (dont le vert/rouge a une
   signification inversée : ici, brouillon = vert = recommandé, publié = orange/alerte = possible mais
   nécessitera un Republier). Jour inéligible = grisé, non cliquable (disabled). */
.calendrier-heures-sup-jour-brouillon { background: color-mix(in srgb, var(--succes) 18%, var(--surface)); color: var(--succes); }
.calendrier-heures-sup-jour-publie { background: color-mix(in srgb, var(--alerte) 18%, var(--surface)); color: var(--alerte); }
.calendrier-heures-sup-jour-inelig {
    background: var(--surface-secondaire);
    color: var(--texte-secondaire);
    cursor: not-allowed;
}
.calendrier-heures-sup-jour-inelig:hover {
    border-color: transparent;
}

.calendrier-legende {
    margin-top: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.72rem;
    color: var(--texte-secondaire);
}

.calendrier-legende-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.calendrier-legende-pastille {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    display: inline-block;
}

.statut-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.table-scroll {
    overflow-x: auto;
}

/* assistantes/mon-temps.php — libellés d'en-tête courts, affichés uniquement sous 767px (voir le
   correctif mobile de .table-historique-temps plus bas) ; en desktop `.th-abrege` reste caché ici. */
.th-abrege {
    display: none;
}

#table-modele th, #table-modele td {
    vertical-align: top;
}

.cell-modele {
    min-width: 140px;
}

.checkbox-praticien {
    display: block;
    font-size: 0.85rem;
    font-weight: normal;
    text-transform: none;
    color: var(--texte-principal);
    padding: 0.1rem 0;
    white-space: nowrap;
}

.zone-planning-resultat {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.grille-planning {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    flex: 1;
    min-width: 0;
}

.colonne-jour {
    flex: 0 0 240px;
    min-width: 240px;
}

.colonne-jour h2 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.badges-jour {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.badges-jour .btn-icone {
    border: 1px dashed var(--bordures);
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
    font-size: 0.72rem;
}

.etiquette-ferie {
    background: #fdeecb;
    color: #92650a;
}

.etiquette-fermeture {
    background: #e9e2f5;
    color: #5b3aa8;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.date-jour {
    font-weight: normal;
    color: var(--texte-secondaire);
    font-size: 0.85rem;
}

.cellule-demi {
    background: var(--surface);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.cellule-demi h3 {
    font-size: 0.85rem;
    margin: 0 0 0.5rem;
    color: var(--texte-secondaire);
}

.sous-titre {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--texte-secondaire);
    margin: 0.6rem 0 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-icone {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--texte-secondaire);
    cursor: pointer;
    text-transform: none;
}

.btn-icone:hover {
    color: var(--marque-actif);
}

.liste-praticiens-checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
    margin-bottom: 0.4rem;
}

.liste-praticiens-cachee {
    display: none;
}

.bandeau-absences {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.6rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--bordures);
}

.etiquette-absence {
    font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

/* Bandeau d'absences de admin/fabrique-planning.php (2026-09-13, correctif dark mode — même souci
   structurel que .case-recup/.case-conges/.case-recup-heures-sup de assistantes/planning.php, mais
   code CSS distinct : pas de variable dédiée "bleu" dans le système de design, .etiquette-recup
   réutilise donc --marque/--marque-actif (couple déjà documenté pour "texte accentué sur fond
   --surface" — voir CLAUDE.md, tableau des variables) plutôt que d'introduire une 13e variable pour
   un seul badge. Code couleur distinctif conservé : rouge (congé), ambre pâle (maladie), turquoise
   (récup normale — anciennement bleu, faute de variable bleue dans le système), ambre soutenu (récup
   heures sup). */
.etiquette-conge {
    background: color-mix(in srgb, var(--erreur) 18%, var(--surface));
    color: var(--erreur);
}

.etiquette-conge-maladie {
    background: color-mix(in srgb, var(--alerte) 18%, var(--surface));
    color: var(--alerte);
}

.etiquette-recup {
    background: color-mix(in srgb, var(--marque) 18%, var(--surface));
    color: var(--marque-actif);
}

.etiquette-recup-heures-sup {
    background: color-mix(in srgb, var(--alerte) 28%, var(--surface));
    color: var(--alerte);
}

/* Petit cadenas discret en surimpression d'une récup verrouillée (voir CLAUDE.md, « Verrouillage
   des récups ») — l'info-bulle (title natif) porte l'explication précise, pas de texte visible ici
   pour rester discret dans le bandeau. */
.cadenas-recup {
    cursor: help;
    font-size: 0.85em;
    opacity: 0.75;
}

.etiquette-non-assignee {
    background: var(--surface-secondaire);
    color: var(--texte-secondaire);
}

.ligne-clinique {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    font-size: 0.85rem;
}

.ligne-clinique select {
    max-width: 130px;
    font-size: 0.8rem;
}

.select-clinique {
    border: 1px solid var(--bordures);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

.select-clinique-groupe {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.ligne-admin {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    font-size: 0.82rem;
    padding: 0.2rem 0;
}

.role-admin-nom {
    color: var(--texte-secondaire);
    white-space: nowrap;
}

.chips-assistantes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.chip-assistante {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--bordures);
    border-radius: 999px;
    padding: 0.05rem 0.4rem 0.05rem 0.3rem;
    font-size: 0.78rem;
}

/* Glisser-déposer pour échanger deux affectations (voir assets/js/fabrique-planning.js). */
.chip-echangeable {
    cursor: grab;
}

.chip-en-glissement {
    opacity: 0.4;
}

.chip-drop-cible {
    box-shadow: 0 0 0 3px var(--marque);
}

/* Mode tactile « toucher-toucher » (admin/fabrique-planning.php, sous 768px uniquement — seul le JS
   mobile pose ces classes et affiche le bandeau, voir assets/js/fabrique-planning.js) : puce
   sélectionnée (anneau plein), puces/zones cibles possibles (anneau pointillé), bandeau d'aide fixé
   en bas d'écran. */
.chip-selection-tactile {
    box-shadow: 0 0 0 3px var(--marque), 0 0 0 5px var(--surface);
}

.chip-cible-tactile {
    outline: 2px dashed var(--marque);
    outline-offset: 2px;
}

.recup-liste-cible-tactile {
    box-shadow: inset 0 0 0 2px var(--marque);
    background: color-mix(in srgb, var(--marque) 10%, var(--surface));
}

.bandeau-selection-tactile {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 480;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
    border-radius: 8px;
    background: var(--surface);
    color: var(--texte-principal);
    border: 2px solid var(--marque);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    font-size: 0.88rem;
}

.bandeau-selection-tactile-texte {
    flex: 1;
}

.bandeau-selection-tactile .btn {
    flex-shrink: 0;
    min-height: 2.5rem;
}

.bandeau-selection-tactile-cache {
    display: none;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Checkpoint de l'étape 1 (voir CLAUDE.md, « Workflow en 2 étapes ») : effectif requis + récups de
   chaque jour, avant de passer à l'étape 2. */
.panneau-checkpoint-recups {
    background: var(--surface);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}

.panneau-checkpoint-recups .titre-repliable {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.panneau-checkpoint-recups .chevron-repli {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--texte-secondaire);
    transition: transform 0.15s;
}

.panneau-checkpoint-recups.checkpoint-repliee .chevron-repli {
    transform: rotate(-90deg);
}

.panneau-checkpoint-recups.checkpoint-repliee #contenu-checkpoint-recups {
    display: none;
}

.grille-checkpoint-recups {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    margin-top: 0.6rem;
}

.checkpoint-jour {
    flex: 0 0 240px;
    min-width: 240px;
    background: var(--surface-secondaire);
    border-radius: 6px;
    padding: 0.6rem 0.7rem;
}

.checkpoint-jour h3 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
}

.checkpoint-jour-neutre {
    background: color-mix(in srgb, var(--texte-secondaire) 12%, var(--surface));
}

.effectif-requis-checkpoint {
    font-size: 0.78rem;
    color: var(--texte-secondaire);
    margin: 0 0 0.5rem;
    line-height: 1.5;
}

.checkpoint-recup-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-height: 1.8rem;
    border-radius: 4px;
    padding: 0.2rem;
}

.recup-liste-drop-cible {
    box-shadow: inset 0 0 0 2px var(--marque);
    background: color-mix(in srgb, var(--marque) 12%, var(--surface));
}

.chip-recup {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: #e6f0fa;
    color: #2c5f8a;
    border: 1px solid #bcdcff;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.78rem;
}

.chip-recup-echangeable {
    cursor: grab;
}

.chip-assistante .btn-icone {
    font-size: 0.7rem;
}

.chip-assistante .avatar-petit,
.select-clinique-groupe .avatar-petit {
    width: 0.75rem;
    height: 0.75rem;
    border-width: 1px;
}

.ajout-admin {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.ajout-admin-cachee {
    display: none;
}

.ajout-admin select {
    font-size: 0.78rem;
    max-width: 100px;
}

.publier-bar {
    justify-content: flex-end;
    margin-top: 1rem;
}

.colonne-resultats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 0 0 300px;
    width: 300px;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.panneau-resultat-assignation {
    background: var(--surface);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 1rem 1.2rem;
}

.panneau-suggestion-compensation {
    background: color-mix(in srgb, var(--marque) 10%, var(--surface));
    border: 1px solid var(--bordures);
}

.panneau-suggestion-compensation h2 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.liste-suggestion-compensation {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ligne-suggestion-compensation {
    background: var(--surface);
    border-radius: 4px;
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ligne-suggestion-compensation .btn {
    align-self: flex-start;
}

.panneau-alerte-heures-sup {
    background: color-mix(in srgb, var(--marque) 10%, var(--surface));
    border: 1px solid var(--bordures);
}

.panneau-alerte-heures-sup h2 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.liste-alerte-heures-sup {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ligne-alerte-heures-sup {
    background: var(--surface);
    border-radius: 4px;
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

.panneau-resultat-cachee {
    display: none;
}

.panneau-relecture-planning .controles-relecture {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.panneau-relecture-planning select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--bordures);
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: inherit;
}

.jour-relecture {
    font-size: 0.85rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--bordures);
}

.jour-relecture:last-child {
    border-bottom: none;
}

.jour-relecture strong {
    display: block;
    margin-bottom: 0.15rem;
}

.ligne-relecture {
    color: var(--texte-secondaire);
    padding-left: 0.3rem;
}

.liste-relecture-role {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Mode « Par jour d'absence » du panneau de relecture (2026-09-25, affichage épuré le 2026-09-27) :
   2 lignes fixes par assistante — « Nom — X% », puis 3 cases fixes (récup, congé, présence) portant
   chacune son nombre de jours. Récup teinte de marque (même famille que .etiquette-recup), congé
   --erreur (même famille que .etiquette-conge), présence gris neutre ; texte foncé constant
   (--marque-texte) sur les fonds pleins, comme partout ailleurs sur le site. */
.liste-jour-absence {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.nom-jour-absence {
    font-size: 0.85rem;
    font-weight: 600;
}

.cases-jour-absence {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.2rem;
}

.case-jour-absence {
    min-width: 2.2rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.case-jour-absence-recup { background: var(--marque); color: var(--marque-texte); }
.case-jour-absence-conge { background: var(--erreur); color: var(--marque-texte); }
.case-jour-absence-presence { background: color-mix(in srgb, var(--texte-secondaire) 35%, var(--surface)); color: var(--texte-principal); }

.panneau-resultat-assignation h2 {
    font-size: 1.05rem;
    margin: 0 0 0.3rem;
}

.resume-resultat-assignation {
    color: var(--texte-secondaire);
    font-size: 0.85rem;
    margin: 0 0 0.6rem;
}

.liste-resultat-assignation {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.liste-resultat-assignation li {
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.ligne-resultat-orange {
    background: color-mix(in srgb, var(--alerte) 18%, var(--surface));
    color: var(--alerte);
}

.ligne-resultat-rouge {
    background: color-mix(in srgb, var(--erreur) 18%, var(--surface));
    color: var(--erreur);
}

/* Vue assistante */

.grille-lecture .colonne-jour {
    flex: 0 0 220px;
    min-width: 220px;
}

.ligne-assistante {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--bordures);
    min-width: 0;
}

.ligne-assistante:last-child {
    border-bottom: none;
}

.ligne-moi {
    background: color-mix(in srgb, var(--marque) 14%, var(--surface));
    border-radius: 4px;
    padding-left: 0.3rem;
    font-weight: 600;
}

.nom-assistante {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-assistante {
    color: var(--texte-secondaire);
    font-size: 0.72rem;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

/* Séparation marquée entre le bloc clinique et les rôles administratifs (assistantes/planning.php) :
   plus épaisse et plus espacée que .separateur-roles-leger ci-dessous, qui distingue seulement des
   sous-groupes à l'intérieur du bloc administratif (desk / téléphone / libre). */
.separateur-roles {
    height: 2px;
    background: var(--bordures);
    border-radius: 1px;
    margin: 0.6rem 0;
}

.separateur-roles-leger {
    height: 1px;
    background: color-mix(in srgb, var(--bordures) 50%, var(--surface));
    margin: 0.3rem 0;
}

/* Fonds/textes en variables CSS (2026-09-13, correctif dark mode) — ces cadres restaient sur des
   couleurs littérales figées (fond gris/rouge pâle, texte gris/rouge saturé), illisibles une fois le
   texte environnant basculé en clair par le mode sombre (fond resté clair = faible contraste). Code
   couleur distinctif conservé (neutre pour récup, rouge pour congé, jaune/ambre pour récup heures
   sup) mais recalculé via les variables du système de design pour s'adapter aux deux modes — même
   principe que .message-error/.badge-inactive (color-mix contre --surface) plutôt qu'un chiffre pâle
   codé en dur par mode.
   Exception assumée à la classification "couleurs métier restées littérales" de CLAUDE.md (Système de
   design, État de l'audit) : demande explicite de l'utilisateur portant sur CES cadres précis. */
.case-recup,
.case-conges,
.case-recup-heures-sup {
    margin-top: 0.5rem;
    padding: 0.35rem 0.4rem;
    border-radius: 4px;
}

.case-recup {
    background: var(--surface-secondaire);
}

.case-conges {
    background: color-mix(in srgb, var(--erreur) 18%, var(--surface));
}

.case-recup-heures-sup {
    background: color-mix(in srgb, var(--alerte) 20%, var(--surface));
    /* Bordure propre (2026-09-13, retour utilisateur) — .case-recup/.case-conges n'en ont pas
       (volontairement non touchées : correctes telles quelles) mais cette case, plus récente,
       bénéficie d'un contour supplémentaire pour affirmer son identité de "cadre" à part entière. */
    border: 1px solid color-mix(in srgb, var(--alerte) 45%, var(--surface));
}

.case-recup-titre,
.case-conges-titre,
.case-recup-heures-sup-titre {
    margin: 0 0 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.case-recup-titre {
    color: var(--texte-secondaire);
}

.case-conges-titre {
    color: var(--erreur);
}

.case-recup-heures-sup-titre {
    color: var(--alerte);
}

.ligne-assistante-case {
    border-bottom: none;
    padding: 0.15rem 0;
}

/* Congés / récupérations */

.solde-conges {
    background: var(--surface);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 0.9rem 1.2rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.solde-conges strong {
    font-size: 1.4rem;
    color: var(--marque-actif);
}

.liste-historique {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.carte-demande {
    background: var(--surface);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 0.75rem 0.9rem;
    cursor: pointer;
}

.carte-demande:hover {
    box-shadow: 0 1px 6px rgba(0,0,0,0.2);
}

.carte-demande-surbrillance {
    animation: surbrillance-carte-demande 3s ease;
}

@keyframes surbrillance-carte-demande {
    0%, 70% {
        background: color-mix(in srgb, var(--alerte) 25%, var(--surface));
        box-shadow: 0 0 0 3px var(--alerte);
    }
    100% {
        background: var(--surface);
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
}

.carte-demande-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.carte-demande-assistante {
    font-weight: 600;
    margin: 0 0 0.2rem;
    font-size: 0.9rem;
}

.carte-demande-dates {
    margin: 0 0 0.2rem;
    font-size: 0.88rem;
}

.duree-plage {
    color: var(--texte-secondaire);
    font-size: 0.8rem;
}

.compteur-jours-sous-categorie {
    color: var(--texte-secondaire);
    font-weight: normal;
    font-size: 0.82rem;
}

.carte-demande-motif {
    margin: 0;
    font-size: 0.8rem;
    color: var(--texte-secondaire);
}

/* Aide à la décision (2026-09-20, colonne Attente) — même formule color-mix() que .badge-statut-*
   juste en dessous (fond teinté + texte dans la couleur pleine), appliquée à toute la ligne plutôt
   qu'à un badge ponctuel puisque c'est ici la ligne entière qui porte l'information. */
.carte-demande-effectif {
    margin: 0.35rem 0 0;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    line-height: 1.4;
}

.carte-demande-effectif-verte {
    background: color-mix(in srgb, var(--succes) 16%, var(--surface));
    color: var(--succes);
}

.carte-demande-effectif-orange {
    background: color-mix(in srgb, var(--alerte) 20%, var(--surface));
    color: var(--alerte);
}

.carte-demande-effectif-rouge {
    background: color-mix(in srgb, var(--erreur) 18%, var(--surface));
    color: var(--erreur);
}

.carte-demande-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.6rem;
    cursor: default;
}

.badge-type {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-type-conge {
    background: #e0e9f7;
    color: #2c4f8a;
}

.badge-type-recuperation {
    background: #eae0f7;
    color: #5a2c8a;
}

.badge-type-maladie {
    background: #fdf0d5;
    color: #a3701e;
}

.badge-statut {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
}

.badge-statut-attente {
    background: color-mix(in srgb, var(--alerte) 20%, var(--surface));
    color: var(--alerte);
}

.badge-statut-valide {
    background: color-mix(in srgb, var(--succes) 18%, var(--surface));
    color: var(--succes);
}

.badge-statut-refuse {
    background: color-mix(in srgb, var(--erreur) 18%, var(--surface));
    color: var(--erreur);
}

.avertissement-hors-regle {
    color: var(--alerte);
    font-size: 0.78rem;
    font-weight: 600;
}

.colonnes-conges {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.colonne-conges {
    flex: 1;
    min-width: 0;
}

.colonne-conges h2 {
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.liste-cartes-conges {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ligne-vide-colonne {
    color: var(--texte-secondaire);
    font-size: 0.85rem;
}

/* Filtres de la colonne "Attente" (2026-09-18, admin/conges.php) — assistante + échéance (menus
   déroulants) + type (cases à cocher, réutilise .filtre-type-demande déjà défini ci-dessus pour
   assistantes/mes-conges.php, même composant générique). Purement client (voir assets/js/conges-admin.js
   ::appliquerFiltresAttente()), jamais de requête serveur. */
.filtres-attente {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.filtres-attente .form-field {
    margin: 0;
    min-width: 150px;
    flex: 1;
}

.filtres-attente .filtre-type-demande {
    margin: 0 0 0.55rem;
}

/* Distinct de .ligne-vide-colonne (qui signale "aucune demande du tout" et que
   assets/js/conges-admin.js::retirerLigneVide()/ajouterLigneVideSiVide() ciblent spécifiquement par
   cette classe) — cette ligne-ci reste TOUJOURS dans le DOM (juste masquée), pour ne jamais être
   supprimée par erreur par ces deux fonctions génériques qui ne connaissent que .ligne-vide-colonne. */
.ligne-vide-filtres {
    color: var(--texte-secondaire);
    font-size: 0.85rem;
}

.ligne-vide-filtres-cachee {
    display: none;
}

.sous-categorie-conges {
    margin-bottom: 1.3rem;
}

.sous-categorie-entete {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.4rem 0.5rem;
    margin: -0.4rem -0.5rem 0.3rem;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
}

.sous-categorie-entete:hover {
    background: var(--surface-secondaire);
}

.sous-categorie-entete h3 {
    font-size: 0.95rem;
    color: var(--texte-secondaire);
    margin: 0;
}

.liste-sous-categorie-cachee {
    display: none;
}

/* Filtre Congés/Récupérations par sous-catégorie (2026-09-13, assistantes/mes-conges.php) — n'existe
   que pendant que la sous-catégorie est dépliée, voir .filtre-type-demande-cachee ci-dessous
   (basculée en même temps que .liste-sous-categorie-cachee par assets/js/mes-conges.js). */
.filtre-type-demande {
    display: flex;
    gap: 1.2rem;
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    color: var(--texte-secondaire);
}

.filtre-type-demande-cachee {
    display: none;
}

.filtre-type-option {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.carte-demande-filtree {
    display: none;
}

.pastille-notification {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--erreur);
}

.badge-annulation-demandee {
    background: color-mix(in srgb, var(--alerte) 20%, var(--surface));
    color: var(--alerte);
}

/* Congés admin : liste par assistante, détail dépliant, module d'ajout direct */

/* En-tête du module "Par assistante" avec sa navigation par année (2026-09-18) — même composant
   .nav-annee-feries que admin/jours-feries.php/assistantes/mes-conges.php, simplement juxtaposé au
   titre plutôt que seul sur sa propre ligne. */
.entete-par-assistante-conges {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.entete-par-assistante-conges h2 {
    margin: 0;
}

/* Flèches rapprochées du titre (2026-09-18, correctif — .justify-content: space-between les
   repoussait auparavant tout à droite de la barre, trop loin du titre) et légèrement agrandies pour
   une meilleure lisibilité/zone de clic — scopé à ce module précis, .nav-annee-feries de base
   (admin/jours-feries.php, assistantes/mes-conges.php...) reste inchangé. */
.entete-par-assistante-conges .nav-annee-feries {
    margin-bottom: 0;
    gap: 0.5rem;
}

.entete-par-assistante-conges .nav-annee-feries .btn-icone {
    font-size: 1.15rem;
    padding: 0.15rem 0.3rem;
}

.liste-assistantes-conges {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bloc-assistante-conges {
    background: var(--surface);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ligne-assistante-conges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.6rem 0.9rem;
    font: inherit;
    /* Un <button> n'hérite pas `color` (couleur système du navigateur) — sans ça, nom presque noir
       illisible en mode sombre (correctif 2026-09-25, toutes largeurs). */
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
}

.ligne-assistante-conges:hover {
    background: var(--surface-secondaire);
}

.nom-assistante-conges {
    flex: 1;
}

.badge-ratio-conges {
    background: color-mix(in srgb, var(--marque) 15%, var(--surface));
    color: var(--marque-actif);
}

.badge-ratio-conges.badge-quota-indefini {
    background: color-mix(in srgb, var(--erreur) 18%, var(--surface));
    color: var(--erreur);
}

.detail-assistante-conges {
    padding: 0 0.9rem 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    border-top: 1px solid var(--bordures);
    margin-top: -1px;
    padding-top: 0.8rem;
}

.detail-conges-cachee {
    display: none;
}

.section-detail-conges {
    flex: 1;
    min-width: 180px;
}

.section-detail-conges h4 {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    color: var(--texte-secondaire);
}

.section-detail-conges ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.82rem;
}

/* Code couleur par ligne dans les colonnes "Congés"/"Récupérations" du module "Par assistante"
   (2026-09-18) — toutes les demandes de la colonne, tous statuts confondus, apparaissent ensemble
   triées par date ; seule cette couleur de fond distingue le statut, jamais de sous-groupe séparé
   (voir CLAUDE.md). Mêmes variables/formule color-mix() que .badge-statut-attente/-valide/-refuse
   (déjà le code couleur générique attente/validé/refusé du site) — jamais réutilisées directement en
   classe ici pour ne pas coupler visuellement un badge compact à une ligne de liste pleine largeur.
   Volontairement absent de la colonne "Congés maladie" (pas de circuit validé/refusé, voir CLAUDE.md). */
.ligne-demande-statut {
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.ligne-demande-attente {
    background: color-mix(in srgb, var(--alerte) 20%, var(--surface));
    color: var(--alerte);
}

.ligne-demande-valide {
    background: color-mix(in srgb, var(--succes) 18%, var(--surface));
    color: var(--succes);
}

.ligne-demande-refuse {
    background: color-mix(in srgb, var(--erreur) 18%, var(--surface));
    color: var(--erreur);
}

.compteur-jours-categorie {
    font-variant-numeric: tabular-nums;
}

.module-nouvelle-demande {
    background: var(--surface);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 1.2rem 1.5rem;
    margin-top: 1.5rem;
    max-width: 520px;
}

.module-nouvelle-demande h2 {
    font-size: 1.1rem;
    margin-top: 0;
}

/* admin/conges.php — adaptation mobile (2026-09-25, voir CLAUDE.md « Adaptation mobile »). Tout est
   scopé sous .colonnes-conges-admin, MODIFICATEUR posé sur le seul conteneur de cette page : .carte-demande
   (et ses sous-classes) est partagée avec assistantes/mes-conges.php (lib/conges.php::rendre_cartes_sous_categorie()),
   jamais redéfinie directement ici. */
@media (max-width: 767px) {
    .colonnes-conges-admin {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    /* 1. Calendrier mensuel : simplement masqué (pas de version responsive, demande explicite).
       assets/js/conges-calendrier.js ne fait plus défiler la page vers lui quand il est masqué. */
    .colonnes-conges-admin .calendrier-mois-conges {
        display: none;
    }

    /* 2. Filtres de la colonne Attente : 2 menus côte à côte, types sur une ligne dessous. */
    .colonnes-conges-admin .filtres-attente {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.5rem 0.6rem;
        align-items: end;
    }

    .colonnes-conges-admin .filtres-attente .form-field {
        min-width: 0;
    }

    .colonnes-conges-admin .filtres-attente select {
        width: 100%;
        min-height: 2.5rem;
        font-size: 0.9rem;
    }

    .colonnes-conges-admin .filtres-attente .filtre-type-demande {
        grid-column: 1 / -1;
        margin: 0;
        font-size: 0.85rem;
    }

    .colonnes-conges-admin .filtres-attente .checkbox-ligne {
        min-height: 2.25rem;
        align-items: center;
    }

    /* Cartes de demande compactes : nom + badge de type sur la même ligne (grille), le reste en
       dessous pleine largeur ; motif tronqué sur une ligne ; aide à la décision gardée à sa taille. */
    .colonnes-conges-admin .carte-demande {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 0.5rem;
        align-items: center;
        padding: 0.5rem 0.65rem;
    }

    .colonnes-conges-admin .carte-demande > * {
        grid-column: 1 / -1;
    }

    .colonnes-conges-admin .carte-demande-assistante {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        font-size: 0.88rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .colonnes-conges-admin .carte-demande-entete {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        justify-content: flex-end;
    }

    .colonnes-conges-admin .carte-demande .badge-type,
    .colonnes-conges-admin .carte-demande .badge {
        font-size: 0.7rem;
        padding: 0.1rem 0.4rem;
    }

    .colonnes-conges-admin .carte-demande-dates {
        margin: 0.1rem 0 0;
        font-size: 0.82rem;
    }

    .colonnes-conges-admin .carte-demande-motif {
        margin-top: 0.1rem;
        font-size: 0.75rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .colonnes-conges-admin .carte-demande-effectif {
        margin-top: 0.3rem;
        padding: 0.25rem 0.45rem;
        font-size: 0.74rem;
    }

    .colonnes-conges-admin .carte-demande-actions {
        margin-top: 0.45rem;
    }

    .colonnes-conges-admin .carte-demande-actions .btn {
        flex: 1;
        min-height: 2.25rem;
    }

    .colonnes-conges-admin .module-nouvelle-demande {
        max-width: none;
        padding: 1rem;
        margin-top: 1.2rem;
    }

    /* 3. Par assistante : titre + navigation par année sur une ligne (flèches en vrais boutons tactiles,
       .nav-annee-feries-boutons), ligne d'assistante plus haute, badge jamais écrasé par un nom long,
       détail en colonne unique. */
    .colonnes-conges-admin .entete-par-assistante-conges {
        justify-content: space-between;
        margin-bottom: 0.6rem;
    }

    .colonnes-conges-admin .entete-par-assistante-conges .nav-annee-feries .btn-icone {
        padding: 0;
        font-size: 1.3rem;
        text-decoration: none;
    }

    .colonnes-conges-admin .ligne-assistante-conges {
        min-height: 3rem;
        padding: 0.55rem 0.75rem;
    }

    .colonnes-conges-admin .nom-assistante-conges {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .colonnes-conges-admin .badge-ratio-conges {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 0.82rem;
    }

    .colonnes-conges-admin .detail-assistante-conges {
        flex-direction: column;
        gap: 0.9rem;
        padding: 0.7rem 0.75rem 0.8rem;
    }

    .colonnes-conges-admin .section-detail-conges {
        min-width: 0;
    }

    .colonnes-conges-admin .section-detail-conges h4 {
        font-size: 0.8rem;
    }

    .colonnes-conges-admin .section-detail-conges ul {
        font-size: 0.85rem;
    }
}

/* admin/equipe.php, admin/praticiens.php, admin/modele-planning.php — adaptation mobile (2026-09-25,
   voir CLAUDE.md « Adaptation mobile »). Scopé par l'id propre à chaque table (#table-assistantes,
   #table-praticiens, #table-modele) ou par un MODIFICATEUR posé sur cette seule page
   (.modal-overlay-tactile, .table-scroll-modele) — jamais de redéfinition directe de table/th/td,
   .modal, .table-scroll... partagés avec le reste du site. */
@media (max-width: 767px) {
    /* --- Tables transformées en liste de cartes (equipe + praticiens) --- */
    #table-assistantes,
    #table-assistantes tbody,
    #table-praticiens,
    #table-praticiens tbody {
        display: block;
        background: none;
        box-shadow: none;
    }

    #table-assistantes thead,
    #table-praticiens thead {
        display: none;
    }

    #table-assistantes tr[data-id],
    #table-praticiens tr[data-id] {
        display: grid;
        align-items: center;
        column-gap: 0.7rem;
        background: var(--surface);
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 0.75rem 0.85rem;
        margin-bottom: 0.6rem;
    }

    #table-assistantes tr[data-id] > td,
    #table-praticiens tr[data-id] > td {
        display: block;
        border: none;
        padding: 0;
        min-width: 0;
    }

    #table-assistantes tr.inactive,
    #table-praticiens tr.inactive {
        opacity: 0.75;
    }

    /* Carte assistante : avatar | prénom · statut / nom / identifiant · quota, puis actions dessous. */
    #table-assistantes tr[data-id] {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    /* min-width : la colonne garde sa place quand la photo part dans le module de stats ouvert. */
    #table-assistantes .col-avatar { grid-column: 1; grid-row: 1 / span 3; width: auto; min-width: 2.2rem; }
    #table-assistantes .col-prenom { grid-column: 2; grid-row: 1; font-weight: 600; }
    #table-assistantes .col-statut { grid-column: 3; grid-row: 1; text-align: right; }
    #table-assistantes .col-nom { grid-column: 2 / span 2; grid-row: 2; font-size: 0.88rem; }
    #table-assistantes .col-identifiant { grid-column: 2; grid-row: 3; font-size: 0.8rem; color: var(--texte-secondaire); }
    #table-assistantes .col-quota { grid-column: 3; grid-row: 3; font-size: 0.8rem; color: var(--texte-secondaire); text-align: right; white-space: nowrap; }

    #table-assistantes .col-quota::before {
        content: "Quota ";
    }

    /* Même spécificité que `tr[data-id] > td` ci-dessus (+ la classe), sinon display:block l'emporte. */
    #table-assistantes tr[data-id] > td.col-actions,
    #table-praticiens tr[data-id] > td.col-actions {
        grid-column: 1 / -1;
        display: grid;
        gap: 0.4rem;
        margin-top: 0.6rem;
    }

    /* Équipe : Modifier | Désactiver, puis « Se connecter en tant que » pleine largeur. */
    #table-assistantes tr[data-id] > td.col-actions {
        grid-template-columns: 1fr 1fr;
    }

    #table-assistantes .col-actions .btn-connexion-en-tant-que,
    #table-assistantes .col-actions .btn-envoyer-identifiants {
        grid-column: 1 / -1;
    }

    /* En-tête : titre puis les deux boutons d'action empilés pleine largeur. */
    .actions-bar:has(> .actions-equipe) {
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .actions-equipe {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    /* Praticiens : un seul bouton, sur la même ligne que le nom et le statut. */
    #table-praticiens tr[data-id] > td.col-actions {
        grid-column: 3;
        margin-top: 0;
    }

    #table-assistantes .col-actions .btn,
    #table-praticiens .col-actions .btn {
        min-height: 2.5rem;
    }

    /* Carte praticien : nom · statut · bouton, sur une seule ligne. */
    #table-praticiens tr[data-id] {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    #table-praticiens .btn-toggle-details {
        min-height: 2.5rem;
    }

    /* Modules dépliants (stats assistante, détails praticien) : bloc pleine largeur sous la carte.
       :not(.ligne-details-cachee) — la classe de masquage (spécificité plus faible) doit continuer à
       l'emporter quand le module est fermé. */
    #table-assistantes tr.ligne-stats:not(.ligne-details-cachee),
    #table-praticiens tr.ligne-details:not(.ligne-details-cachee) {
        display: block;
        margin: -0.3rem 0 0.8rem;
    }

    #table-assistantes tr.ligne-stats > td,
    #table-praticiens tr.ligne-details > td {
        display: block;
        border: none;
        border-radius: 8px;
        padding: 0.9rem 0.85rem;
    }

    /* equipe.php — statistiques : photo agrandie ramenée de 5.5rem à 4rem, sections en colonne unique. */
    #table-assistantes .photo-slot {
        width: 4rem;
        height: 4rem;
    }

    #table-assistantes .avatar-grande {
        width: 4rem;
        height: 4rem;
    }

    #table-assistantes .avatar-grande.avatar-initiales {
        font-size: 1.6rem;
    }

    #table-assistantes .entete-stats-assistante {
        gap: 0.9rem;
        margin-bottom: 0.9rem;
    }

    #table-assistantes .titre-stats-assistante {
        font-size: 1.15rem;
    }

    #table-assistantes .corps-stats-assistante {
        flex-direction: column;
        gap: 1.1rem;
    }

    #table-assistantes .stats-section {
        min-width: 0;
    }

    #table-assistantes .stats-nav-ligne .btn-icone {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    /* equipe.php — modales Ajouter/Modifier au doigt (scroll interne de .modal form conservé tel quel). */
    /* z-index 496 : au-dessus de header.site-header (495 sous 767px, voir « Navigation mobile »),
       qui recouvrait sinon le haut de la modale ; toujours sous le panneau de nav (500). */
    .modal-overlay-tactile {
        padding: 0.75rem;
        z-index: 496;
    }

    .modal-overlay-tactile .modal {
        max-height: 92vh;
        padding-top: 1.1rem;
    }

    .modal-overlay-tactile .modal h2 {
        margin: 0 1rem 0.8rem;
    }

    .modal-overlay-tactile .modal form {
        padding: 0 1rem;
    }

    .modal-overlay-tactile .form-field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
    .modal-overlay-tactile .form-field select,
    .modal-overlay-tactile .form-field textarea {
        min-height: 2.75rem;
        font-size: 1rem;
    }

    .modal-overlay-tactile input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* `.form-field label { display: block }` l'emporte sinon sur .checkbox-ligne (spécificité) :
       case et libellé ne seraient pas centrés l'un par rapport à l'autre sur la ligne agrandie. */
    .modal-overlay-tactile .form-field .checkbox-ligne {
        display: flex;
        align-items: center;
        min-height: 2.5rem;
        margin-bottom: 0;
    }

    .modal-overlay-tactile .apercu-photo-ligne {
        flex-wrap: wrap;
    }

    .modal-overlay-tactile .ligne-quota-conges input {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    .modal-overlay-tactile .btn-icone {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    .modal-overlay-tactile .form-field .btn-small {
        min-height: 2.5rem;
    }

    .modal-overlay-tactile .modal-actions {
        margin: 1rem -1rem 0;
        padding: 0.75rem 1rem 1rem;
    }

    .modal-overlay-tactile .modal-actions .btn {
        flex: 1;
        min-height: 2.75rem;
    }

    /* praticiens.php — module dépliant : colonnes empilées, formulaire d'absence au doigt. */
    #table-praticiens .details-praticien {
        flex-direction: column;
        gap: 1.2rem;
    }

    #table-praticiens .bloc-stats,
    #table-praticiens .bloc-absences {
        flex: 1 1 auto;
        min-width: 0;
    }

    #table-praticiens .mode-absence {
        gap: 0.5rem;
    }

    #table-praticiens .choix-mode {
        flex: 1;
        min-height: 2.75rem;
        padding: 0 0.6rem;
        border: 1px solid var(--bordures);
        border-radius: 6px;
        background: var(--surface);
    }

    #table-praticiens .choix-mode:has(input:checked) {
        border-color: var(--marque);
        background: color-mix(in srgb, var(--marque) 14%, var(--surface));
    }

    #table-praticiens .choix-mode input[type="radio"] {
        width: 1.1rem;
        height: 1.1rem;
    }

    #table-praticiens .form-absence input:not([type="radio"]),
    #table-praticiens .form-absence select {
        min-height: 2.75rem;
        font-size: 1rem;
    }

    /* Mode Jour ponctuel : Date et Demi-journée l'une sous l'autre (« Journée entière » tronqué sinon) ;
       la plage Du/Au reste côte à côte (deux dates, assez courtes). */
    #table-praticiens .champs-mode-jour .form-field {
        flex-basis: 100%;
    }

    #table-praticiens .form-absence button[type="submit"] {
        width: 100%;
        min-height: 2.75rem;
        font-size: 0.95rem;
    }

    #table-praticiens .btn-retirer-absence {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    /* modele-planning.php — empilement vertical JOUR PAR JOUR (même choix que assistantes/planning.php) :
       le tableau devient une colonne de cartes, réordonnées via --ordre-mobile (posé en PHP sur chaque
       case : Lundi matin, Lundi après-midi, Mardi matin...), en-têtes remplacés par data-libelle. */
    .table-scroll-modele {
        overflow-x: visible;
    }

    #table-modele {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        background: none;
        box-shadow: none;
    }

    #table-modele thead,
    #table-modele tbody th {
        display: none;
    }

    #table-modele tbody,
    #table-modele tr {
        display: contents;
    }

    /* Cases praticiens en grille 2 colonnes à l'intérieur de chaque carte. */
    #table-modele td.cell-modele {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
        order: var(--ordre-mobile);
        min-width: 0;
        background: var(--surface);
        border: none;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 0.65rem 0.75rem 0.75rem;
    }

    /* Espace supplémentaire après l'après-midi : sépare visuellement un jour du suivant. */
    #table-modele td.cell-modele-apres_midi {
        margin-bottom: 0.7rem;
    }

    #table-modele td.cell-modele::before {
        content: attr(data-libelle);
        grid-column: 1 / -1;
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 0.1rem;
    }

    #table-modele .checkbox-praticien {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 2.75rem;
        padding: 0 0.6rem;
        border: 1px solid var(--bordures);
        border-radius: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }

    #table-modele .checkbox-praticien:has(input:checked) {
        border-color: var(--marque);
        background: color-mix(in srgb, var(--marque) 14%, var(--surface));
    }

    #table-modele .checkbox-praticien input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
        margin: 0;
        flex-shrink: 0;
    }
}

/* admin/fabrique-planning.php — adaptation mobile (2026-09-25, voir CLAUDE.md « Adaptation mobile »).
   Tout est scopé sous .main-fabrique, MODIFICATEUR posé sur le <main> de cette seule page :
   .grille-planning/.colonne-jour/.cellule-demi sont partagées avec assistantes/planning.php
   (.grille-lecture), .tabs/.actions-bar/.dropdown-calendrier/.panneau-calendrier avec d'autres pages. */
@media (max-width: 767px) {
    .main-fabrique {
        padding: 0 0.9rem;
    }

    /* --- En-tête : titre, puis barre d'actions en grille --- */
    .main-fabrique > .actions-bar:first-child {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .main-fabrique > .actions-bar:first-child h1 {
        margin: 0;
    }

    /* Grille à 6 colonnes : ← | 📅 Choisir une semaine | → sur la 1re ligne, puis les 4 boutons
       d'action deux par deux. position: relative ici + dropdowns en static : les panneaux calendrier
       et boost s'ouvrent sur toute la largeur de la barre (même principe que .tabs-semaine-lecture de
       assistantes/planning.php). */
    .main-fabrique .actions-bar .tabs {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 0.45rem;
        position: relative;
    }

    .main-fabrique .actions-bar .tabs > * {
        grid-column: span 3;
        min-width: 0;
    }

    .main-fabrique .actions-bar .tabs > .btn-nav-semaine-fabrique {
        grid-column: span 1;
        font-size: 1.15rem;
        text-decoration: none;
    }

    .main-fabrique .actions-bar .tabs > .dropdown-calendrier {
        grid-column: span 4;
    }

    .main-fabrique .texte-nav-semaine-fabrique {
        display: none;
    }

    .main-fabrique .actions-bar .tabs .btn {
        width: 100%;
        min-height: 2.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0.35rem 0.5rem;
        font-size: 0.85rem;
        line-height: 1.2;
    }

    .main-fabrique .dropdown-calendrier,
    .main-fabrique .dropdown-boost {
        position: static;
    }

    /* Sélecteur de semaine : pleine largeur, cases de jour agrandies. */
    .main-fabrique .panneau-calendrier,
    .main-fabrique .panneau-boost {
        left: 0;
        right: 0;
        width: auto;
    }

    .main-fabrique .calendrier-entete button {
        min-width: 2.75rem;
        min-height: 2.75rem;
        font-size: 1.2rem;
    }

    .main-fabrique .calendrier-grille {
        gap: 0.3rem;
    }

    .main-fabrique .calendrier-jour {
        padding: 0.65rem 0;
        font-size: 0.95rem;
    }

    /* Boost libre : lignes tactiles, liste plus haute. */
    .main-fabrique .liste-boost-assistantes {
        max-height: 50vh;
        gap: 0.2rem;
    }

    .main-fabrique .ligne-boost-assistante {
        min-height: 2.75rem;
        font-size: 0.95rem;
    }

    .main-fabrique .cb-boost-assistante {
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
    }

    .main-fabrique .input-boost-cible {
        width: 4rem;
        min-height: 2.5rem;
        font-size: 1rem;
        text-align: center;
    }

    .main-fabrique .panneau-boost .btn {
        min-height: 2.75rem;
    }

    .main-fabrique .statut-bar {
        flex-wrap: wrap;
        gap: 0.4rem 0.75rem;
    }

    /* --- Checkpoint des récups : pleine largeur (déjà), jours empilés --- */
    .main-fabrique .panneau-checkpoint-recups {
        padding: 0.85rem 0.9rem;
    }

    .main-fabrique .panneau-checkpoint-recups .titre-repliable {
        min-height: 2.5rem;
        font-size: 1.15rem;
    }

    .main-fabrique .grille-checkpoint-recups {
        flex-direction: column;
        overflow-x: visible;
    }

    .main-fabrique .checkpoint-jour {
        flex: none;
        min-width: 0;
        width: 100%;
    }

    .main-fabrique .checkpoint-recup-liste {
        min-height: 2.75rem;
        gap: 0.4rem;
        padding: 0.3rem;
    }

    .main-fabrique .chip-recup {
        min-height: 2.25rem;
        padding: 0.3rem 0.75rem;
        font-size: 0.88rem;
    }

    /* --- Structure : grille puis colonne de résultats, empilées dans le même ordre que desktop --- */
    .main-fabrique .zone-planning-resultat {
        flex-direction: column;
        align-items: stretch;
    }

    .main-fabrique .colonne-resultats {
        flex: none;
        width: auto;
        position: static;
        max-height: none;
        overflow: visible;
    }

    /* --- Grille : 5 jours empilés pleine largeur (même principe que .grille-lecture) --- */
    .main-fabrique .grille-planning {
        flex-direction: column;
        overflow-x: visible;
        padding-bottom: 0;
    }

    .main-fabrique .colonne-jour {
        flex: none;
        min-width: 0;
        width: 100%;
    }

    .main-fabrique .colonne-jour h2 {
        font-size: 1.1rem;
    }

    .main-fabrique .badges-jour .btn-icone {
        min-height: 2.25rem;
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }

    .main-fabrique .btn-toggle-praticiens {
        min-width: 2.25rem;
        min-height: 2.25rem;
        font-size: 1rem;
    }

    .main-fabrique .liste-praticiens-checkbox {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .main-fabrique .liste-praticiens-cachee {
        display: none;
    }

    .main-fabrique .liste-praticiens-checkbox .checkbox-praticien {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 2.5rem;
        padding: 0 0.5rem;
        border: 1px solid var(--bordures);
        border-radius: 6px;
    }

    .main-fabrique .cb-presence {
        width: 1.2rem;
        height: 1.2rem;
        margin: 0;
    }

    /* Menus clinique : pleine largeur disponible, 16px (pas de zoom Safari iOS), 2.75rem de haut —
       la teinte inline par assistante (fond + bordure, posée par renderCell()) reste appliquée. */
    .main-fabrique .ligne-clinique {
        gap: 0.5rem;
        padding: 0.25rem 0;
        font-size: 0.95rem;
    }

    .main-fabrique .ligne-clinique .nom-praticien {
        flex: 0 0 4.5rem;
        font-weight: 600;
    }

    .main-fabrique .select-clinique-groupe {
        flex: 1;
        min-width: 0;
        gap: 0.5rem;
    }

    .main-fabrique .ligne-clinique select {
        flex: 1;
        min-width: 0;
        max-width: none;
        min-height: 2.75rem;
        font-size: 1rem;
        padding: 0.3rem 0.75rem;
    }

    /* Pastille clinique = poignée d'échange : agrandie en vraie zone tactile. */
    .main-fabrique .select-clinique-groupe .avatar-petit {
        width: 2rem;
        height: 2rem;
        border-width: 2px;
        flex-shrink: 0;
    }

    /* Rôles administratifs : puces plus grandes, corbeille tactile. */
    .main-fabrique .ligne-admin {
        align-items: center;
        gap: 0.4rem 0.5rem;
        font-size: 0.9rem;
        padding: 0.3rem 0;
    }

    .main-fabrique .chips-assistantes {
        gap: 0.4rem;
    }

    .main-fabrique .chip-assistante {
        min-height: 2.5rem;
        padding: 0.2rem 0.2rem 0.2rem 0.6rem;
        gap: 0.4rem;
        font-size: 0.9rem;
    }

    .main-fabrique .chip-assistante .avatar-petit {
        width: 0.9rem;
        height: 0.9rem;
    }

    .main-fabrique .chip-assistante .btn-icone {
        min-width: 2.1rem;
        min-height: 2.1rem;
        font-size: 0.9rem;
    }

    /* Mini-formulaire d'ajout : assistante | rôle | +. `.ajout-admin-cachee` doit continuer à
       l'emporter (spécificité égale à la règle de base, d'où le :not()). */
    .main-fabrique .ajout-admin:not(.ajout-admin-cachee) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        gap: 0.4rem;
        margin-top: 0.6rem;
    }

    .main-fabrique .ajout-admin select {
        max-width: none;
        min-width: 0;
        min-height: 2.75rem;
        font-size: 1rem;
    }

    .main-fabrique .btn-ajouter-admin {
        min-width: 2.75rem;
        min-height: 2.75rem;
        font-size: 1.2rem;
    }

    .main-fabrique .etiquette-absence {
        font-size: 0.8rem;
        padding: 0.2rem 0.5rem;
    }

    /* --- Colonne de résultats --- */
    .main-fabrique .panneau-resultat-assignation {
        padding: 0.9rem;
    }

    .main-fabrique .controles-relecture select {
        min-height: 2.75rem;
        font-size: 1rem;
    }

    .main-fabrique .ligne-alerte-heures-sup .btn,
    .main-fabrique .ligne-suggestion-compensation .btn {
        min-height: 2.5rem;
    }

    /* --- Publier / Republier / Exporter en PDF : pleine largeur --- */
    .main-fabrique .publier-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        margin-bottom: 5rem; /* place pour le bandeau tactile fixé en bas d'écran */
    }

    .main-fabrique .publier-bar .btn {
        min-height: 2.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
    }
}

/* admin/jours-feries.php et admin/pointages.php — adaptation mobile (2026-09-25, voir CLAUDE.md
   « Adaptation mobile »). Scopé sous .main-jours-feries / .main-pointages (MODIFICATEURS posés sur le
   <main> de ces seules pages) et .table-cartes (MODIFICATEUR posé sur chaque <table> concernée de
   admin/pointages.php) — jamais de redéfinition de table/th/td, .nav-annee-feries, .panneau-calendrier...
   partagés avec le reste du site. Flèches d'année/mois/jour : .nav-annee-feries-boutons (même
   modificateur que assistantes/conges-praticiens.php, déjà défini plus haut, ajouté dans le HTML). */
@media (max-width: 767px) {
    /* --- Flèches de navigation (<a>) : jamais soulignées --- */
    .main-jours-feries .nav-annee-feries-boutons .btn-icone,
    .main-pointages .nav-annee-feries-boutons .btn-icone {
        text-decoration: none;
    }

    /* --- jours-feries.php --- */
    .main-jours-feries .nav-annee-feries {
        margin-top: 0.9rem;
    }

    .main-jours-feries .liste-jours-feries li {
        flex-wrap: wrap;
        min-height: 2.75rem;
        padding: 0.55rem 0.8rem;
        font-size: 0.92rem;
    }

    .main-jours-feries .ligne-ferie-compensation {
        min-height: 3rem;
        padding: 0.65rem 0.8rem;
    }

    .main-jours-feries .ligne-ferie-compensation .badge {
        flex-shrink: 0;
    }

    .main-jours-feries .detail-ferie-compensation {
        padding: 0.7rem 0.8rem 0.8rem;
    }

    .main-jours-feries .liste-compensation-assistantes {
        gap: 0.5rem;
    }

    /* Une ligne par assistante : nom sur toute la largeur, puis date + « Marquer placée » (à placer)
       ou date placée + ↩ (placée) sur la ligne suivante. */
    .main-jours-feries .liste-compensation-assistantes li {
        flex-wrap: wrap;
        gap: 0.4rem 0.6rem;
        padding: 0.55rem 0.6rem;
        background: var(--surface);
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    }

    .main-jours-feries .nom-compensation-assistante {
        flex: 1 1 100%;
        font-weight: 600;
    }

    /* Déjà placée : nom · date · ↩ tiennent sur une seule ligne. */
    .main-jours-feries .liste-compensation-assistantes li:has(.btn-annuler-placement) .nom-compensation-assistante {
        flex: 1 1 auto;
    }

    .main-jours-feries .liste-compensation-assistantes li:has(.btn-annuler-placement) .date-compensation-placee {
        flex: 0 0 auto;
    }

    .main-jours-feries .liste-compensation-assistantes input[type="date"] {
        flex: 1;
        min-width: 0;
        min-height: 2.75rem;
        font-size: 1rem;
        padding: 0.3rem 0.5rem;
        border: 1px solid var(--bordures);
        border-radius: 4px;
        background: var(--surface);
        color: var(--texte-principal);
    }

    .main-jours-feries .btn-marquer-placee-individuelle {
        min-height: 2.75rem;
    }

    .main-jours-feries .date-compensation-placee {
        flex: 1;
    }

    .main-jours-feries .btn-annuler-placement {
        min-width: 2.75rem;
        min-height: 2.75rem;
        font-size: 1.2rem;
        border: 1px solid var(--bordures);
        border-radius: 8px;
        background: var(--surface);
    }

    /* --- pointages.php : tables en cartes empilées --- */
    .main-pointages .table-scroll {
        overflow-x: visible;
    }

    .table-cartes,
    .table-cartes tbody {
        display: block;
        background: none;
        box-shadow: none;
    }

    .table-cartes thead {
        display: none;
    }

    /* Carte = grille 2 colonnes par défaut : titre (nom) à gauche + statut à droite sur la 1re ligne,
       puis les valeurs, chacune précédée de son libellé (data-label). */
    .table-cartes tbody > tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 0.8rem;
        align-items: start;
        background: var(--surface);
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 0.75rem 0.85rem;
        margin-bottom: 0.6rem;
    }

    .table-cartes tbody > tr > td {
        display: block;
        border: none;
        padding: 0;
        min-width: 0;
        font-size: 0.92rem;
    }

    .table-cartes td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--texte-secondaire);
        margin-bottom: 0.1rem;
    }

    .table-cartes td[colspan],
    .table-cartes .carte-pleine-largeur {
        grid-column: 1 / -1;
    }

    .table-cartes .carte-titre {
        font-weight: 600;
        font-size: 1rem;
        align-self: center;
    }

    .table-cartes .carte-statut {
        justify-self: end;
        align-self: center;
        text-align: right;
    }

    .table-cartes .carte-valeur-forte {
        font-size: 1.05rem;
        font-weight: 700;
    }

    .table-cartes .carte-vide {
        display: none;
    }

    /* Vue en direct : nom · statut, puis dernier pointage sur toute la largeur. */
    .table-cartes-vue-directe td[data-label] {
        grid-column: 1 / -1;
    }

    .table-cartes-vue-directe td[data-label]::before {
        display: inline;
        margin-right: 0.4rem;
    }

    /* Corrections : actions Valider/Refuser pleine largeur, à parts égales. */
    .table-cartes-corrections tbody > tr > td.carte-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin-top: 0.2rem;
    }

    .table-cartes-corrections .carte-actions .btn {
        min-height: 2.75rem;
        font-size: 0.95rem;
    }

    /* Historique : nom · statut, puis les 4 pointages sur une ligne, puis temps travaillé · delta. */
    .table-cartes-historique tbody > tr {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .table-cartes-historique .carte-titre,
    .table-cartes-historique .carte-statut,
    .table-cartes-historique .carte-moitie {
        grid-column: span 2;
    }

    .table-cartes-historique .carte-pointage-heure {
        text-align: center;
        background: var(--surface-secondaire);
        border-radius: 6px;
        padding: 0.3rem 0.2rem;
    }

    /* Résumé mensuel + tableau Heures sup : nom sur toute la largeur, puis 3 valeurs. */
    .table-cartes-trois tbody > tr {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Heures sup : ligne de détail dépliable = bloc pleine largeur sous sa carte ;
       :not(.ligne-details-cachee) pour que le masquage (moins spécifique) l'emporte toujours. */
    .table-cartes tbody > tr.ligne-details.ligne-details-cachee {
        display: none;
    }

    .table-cartes tbody > tr.ligne-details:not(.ligne-details-cachee) {
        display: block;
        margin: -0.3rem 0 0.8rem;
        padding: 0;
        background: var(--surface-secondaire);
    }

    .table-cartes tbody > tr.ligne-details > td {
        padding: 0.85rem;
    }

    .main-pointages #table-heures-sup .btn-toggle-details {
        min-height: 2.5rem;
    }

    .main-pointages .details-heures-sup {
        flex-direction: column;
        gap: 1.2rem;
    }

    .main-pointages .bloc-attribution-heures-sup,
    .main-pointages .bloc-historique-heures-sup {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Formulaire d'attribution : bouton calendrier pleine largeur, calendrier (vert/orange) ouvert sur
       toute la largeur du formulaire, choix Matin/Après-midi/Journée en vraies zones tactiles. */
    .main-pointages .form-attribution-heures-sup .dropdown-calendrier {
        position: relative;
    }

    /* Fond --surface + bordure : .btn-secondary (--surface-secondaire) se confondait sinon avec le
       fond du panneau dépliant, lui aussi --surface-secondaire. */
    .main-pointages .btn-choisir-date-heures-sup {
        width: 100%;
        min-height: 2.75rem;
        background: var(--surface);
        border: 1px solid var(--bordures);
    }

    .main-pointages .form-attribution-heures-sup .panneau-calendrier {
        left: 0;
        right: 0;
        width: auto;
    }

    .main-pointages .form-attribution-heures-sup .calendrier-jour {
        padding: 0.6rem 0;
        font-size: 0.95rem;
    }

    .main-pointages .form-attribution-heures-sup .calendrier-entete button {
        min-width: 2.75rem;
        min-height: 2.75rem;
        font-size: 1.2rem;
    }

    .main-pointages .choix-demi-heures-sup .choix-mode {
        flex-wrap: wrap;
        min-height: 2.75rem;
        padding: 0.45rem 0.6rem;
        border: 1px solid var(--bordures);
        border-radius: 6px;
        background: var(--surface);
    }

    .main-pointages .choix-demi-heures-sup .choix-mode:has(input:checked) {
        border-color: var(--marque);
        background: color-mix(in srgb, var(--marque) 14%, var(--surface));
    }

    .main-pointages .choix-demi-heures-sup input[type="radio"] {
        width: 1.1rem;
        height: 1.1rem;
    }

    .main-pointages .form-attribution-heures-sup button[type="submit"] {
        width: 100%;
        min-height: 2.75rem;
    }

    /* Uniquement les récups accordées (porteuses d'une corbeille) — les lignes d'ajustement manuel,
       faites de plusieurs fragments de texte en ligne, restent en flux normal. */
    .main-pointages .liste-historique-heures-sup li[data-attribution-id] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .main-pointages .btn-supprimer-attribution-heures-sup {
        min-width: 2.5rem;
        min-height: 2.5rem;
        flex-shrink: 0;
    }

    /* Navigation de l'historique : ‹ [date] › — le champ date prend la place restante. */
    .main-pointages #input-date-histo {
        flex: 1;
        min-width: 0;
        min-height: 2.75rem;
        font-size: 1rem;
        padding: 0.3rem 0.5rem;
        border: 1px solid var(--bordures);
        border-radius: 8px;
        background: var(--surface);
        color: var(--texte-principal);
    }

    /* Ajustement manuel : champs pleine largeur, mois + année et heures + minutes côte à côte. */
    .main-pointages .bloc-ajustement-manuel-heures-sup {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
        padding: 0.85rem;
    }

    .main-pointages .bloc-ajustement-manuel-heures-sup .form-field {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem;
    }

    .main-pointages .bloc-ajustement-manuel-heures-sup .form-field label {
        flex: 1 1 100%;
        margin: 0;
    }

    .main-pointages .bloc-ajustement-manuel-heures-sup select,
    .main-pointages .bloc-ajustement-manuel-heures-sup input {
        min-height: 2.75rem;
        font-size: 1rem;
    }

    .main-pointages .bloc-ajustement-manuel-heures-sup select,
    .main-pointages #ajustement-motif {
        flex: 1;
        min-width: 0;
    }

    .main-pointages #ajustement-annee,
    .main-pointages #ajustement-heures,
    .main-pointages #ajustement-minutes {
        width: 5.5rem !important; /* l'emporte sur le style inline de largeur desktop */
    }

    .main-pointages .bloc-ajustement-manuel-heures-sup button[type="submit"] {
        min-height: 2.75rem;
    }
}

/* Praticiens : détails dépliables (absences + statistiques) */

.btn-toggle-details {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    padding: 0.3rem 0.55rem;
    margin: -0.3rem -0.55rem;
    border-radius: 4px;
    font: inherit;
    color: var(--marque-actif);
    cursor: pointer;
}

.btn-toggle-details .nom-praticien-lien {
    text-decoration: underline;
}

.btn-toggle-details:hover {
    background: color-mix(in srgb, var(--marque) 15%, var(--surface));
    color: var(--marque-actif);
}

.chevron-details {
    display: inline-block;
    font-size: 0.7em;
    color: var(--texte-secondaire);
    transition: transform 0.15s ease;
}

.btn-toggle-details.details-ouvertes .chevron-details,
.btn-toggle-assistante-conges.details-ouvertes .chevron-details,
.sous-categorie-entete.sous-categorie-ouverte .chevron-details,
.btn-toggle-praticien-conges.details-ouvertes .chevron-details,
.btn-toggle-ferie.details-ouvertes .chevron-details {
    transform: rotate(90deg);
}

.ligne-details-cachee {
    display: none;
}

.ligne-details td {
    background: var(--surface-secondaire);
    padding: 1rem 1.2rem;
}

.details-praticien {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

/* Navigation par année du module dépliant (2026-09-22) — une seule instance partagée par les 3
   sections (Statistiques/Absences/Présences supplémentaires), placée sur sa propre ligne pleine
   largeur au-dessus des deux colonnes flex (flex-basis: 100% dans le conteneur flex-wrap du parent,
   qui force .bloc-stats/.bloc-absences à repasser à la ligne suivante) — "à côté" des deux titres au
   sens où elle les surplombe directement, sans dupliquer le widget une fois par section. Réutilise
   .nav-annee-feries (même composant que admin/jours-feries.php, etc.) pour la cohérence visuelle,
   juste avec une marge basse réduite vu l'espacement déjà généreux de .details-praticien. */
.nav-annee-praticien-detail {
    flex: 1 1 100%;
    margin-bottom: 0;
}

.bloc-stats {
    flex: 0 0 260px;
}

.bloc-absences {
    flex: 1;
    min-width: 280px;
}

.details-praticien h4 {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--texte-secondaire);
}

.stats-contenu {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.stat-ligne {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    background: var(--surface);
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.stat-ligne strong {
    color: var(--marque-actif);
}

.form-absence {
    margin-bottom: 0.8rem;
}

.mode-absence {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.7rem;
}

.choix-mode {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: normal;
    cursor: pointer;
}

.choix-mode input[type="radio"] {
    width: auto;
    margin: 0;
}

.champs-mode {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.champs-mode-cachee {
    display: none;
}

.champs-mode .form-field {
    flex: 1;
    min-width: 130px;
    margin-bottom: 0.6rem;
}

.liste-absences,
.liste-presences-supp {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.liste-absences + h4 {
    margin-top: 1rem;
}

.liste-absences li,
.liste-presences-supp li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    font-size: 0.83rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.liste-absences li {
    background: color-mix(in srgb, var(--erreur) 12%, var(--surface));
}

.liste-presences-supp li {
    background: color-mix(in srgb, var(--succes) 12%, var(--surface));
}

.absence-vide,
.presence-supp-vide {
    color: var(--texte-secondaire);
    font-size: 0.83rem;
    box-shadow: none !important;
    background: none !important;
    padding: 0.2rem 0 !important;
}

/* Équipe : module de statistiques dépliable par assistante */

.avatar-cliquable,
.nom-cliquable {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0.3rem 0.5rem;
    margin: -0.3rem -0.5rem;
    border-radius: 4px;
    font: inherit;
    cursor: pointer;
}

.avatar-cliquable:hover,
.nom-cliquable:hover {
    background: color-mix(in srgb, var(--marque) 15%, var(--surface));
}

.nom-cliquable {
    color: var(--marque-actif);
    text-decoration: underline;
}

.nom-cliquable:hover {
    color: var(--marque-survol);
}

/* Case vide pendant que la photo est agrandie dans le module ouvert juste en dessous */
.slot-avatar-ligne:empty {
    display: inline-block;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 2px dashed var(--bordures);
}

.ligne-stats td {
    background: var(--surface-secondaire);
    padding: 1.2rem 1.5rem;
}

.entete-stats-assistante {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
    cursor: pointer;
}

.photo-slot {
    flex-shrink: 0;
    width: 5.5rem;
    height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.titre-stats-assistante {
    margin: 0;
    font-size: 1.3rem;
    cursor: pointer;
}

.entete-stats-assistante:hover .titre-stats-assistante {
    text-decoration: underline;
    color: var(--marque-actif);
}

.corps-stats-assistante {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
}

.stats-section {
    flex: 1;
    min-width: 220px;
}

.stats-section h4 {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--texte-secondaire);
}

.stats-nav-ligne {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.4rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.stats-nav-libelle {
    flex: 1;
    font-size: 0.85rem;
    text-align: center;
}

.stats-valeur {
    color: var(--marque-actif);
}

.texte-discret {
    color: var(--texte-secondaire);
    font-size: 0.83rem;
    margin: 0;
}

.bloc-section {
    margin-bottom: 2rem;
}

.bloc-section h2 {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
}

.liste-jours-feries {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.liste-jours-feries li {
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid var(--bordures);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.liste-jours-feries li:last-child {
    border-bottom: none;
}

.liste-feries-compensation {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bloc-ferie-compensation {
    border: 1px solid var(--bordures);
    border-radius: 6px;
}

.ligne-ferie-compensation {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.7rem 0.9rem;
    font: inherit;
    /* Un <button> n'hérite pas `color` — titre presque noir illisible en mode sombre sinon
       (correctif 2026-09-25, toutes largeurs, même défaut que .ligne-assistante-conges). */
    color: inherit;
    cursor: pointer;
    text-align: left;
}

/* Sélecteurs de date natifs en mode sombre (icône calendrier et panneau du navigateur) — scopé aux
   deux pages traitées le 2026-09-25, jamais un color-scheme global. */
:root[data-theme="dark"] .main-jours-feries input[type="date"],
:root[data-theme="dark"] .main-pointages input[type="date"] {
    color-scheme: dark;
}

.ligne-ferie-compensation:hover {
    background: var(--surface-secondaire);
}

.nom-ferie-compensation {
    flex: 1;
    font-weight: 600;
}

.detail-ferie-compensation {
    padding: 0 0.9rem 0.9rem;
    border-top: 1px solid var(--bordures);
    margin-top: -1px;
    padding-top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Spécificité renforcée : .ligne-details-cachee (display:none) est définie plus haut dans ce fichier
   et perdrait sinon la cascade face au display:flex ci-dessus (même spécificité, ordre de source). */
.detail-ferie-compensation.ligne-details-cachee {
    display: none;
}

.liste-compensation-assistantes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.liste-compensation-assistantes li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
}

.nom-compensation-assistante {
    flex: 1;
}

.date-compensation-placee {
    color: var(--texte-secondaire);
}

.liste-compensation-assistantes input[type="date"] {
    font-size: 0.85rem;
    width: auto;
}

.nav-annee-feries {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.annee-affichee-feries {
    font-weight: 600;
}

.barre-repartition {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
}

.barre-jour-nom {
    width: 4.2rem;
    flex-shrink: 0;
    color: var(--texte-secondaire);
}

.barre-fond {
    flex: 1;
    background: var(--bordures);
    border-radius: 3px;
    height: 0.6rem;
    overflow: hidden;
}

.barre-remplie {
    background: var(--marque);
    height: 100%;
    border-radius: 3px;
}

.barre-pct {
    width: 2.8rem;
    flex-shrink: 0;
    text-align: right;
    color: var(--texte-secondaire);
}

.stat-ligne-cliquable {
    cursor: pointer;
}

.stat-ligne-cliquable:hover {
    background: var(--surface-secondaire);
}

.stat-ligne-cliquable.details-ouvertes .chevron-details {
    transform: rotate(90deg);
}

.liste-detail-conges {
    list-style: none;
    margin: 0.2rem 0 0.6rem;
    padding: 0 0 0 1.5rem;
    font-size: 0.8rem;
    color: var(--texte-secondaire);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.liste-detail-conges-cachee {
    display: none;
}

/* Calendrier mensuel des congés (admin/conges.php, colonne "Par assistante") */

.calendrier-mois-conges {
    position: relative;
    margin-bottom: 1.25rem;
    padding: 0.75rem 0.85rem;
    background: var(--surface-secondaire);
    border-radius: 6px;
    border: 1px solid var(--bordures);
}

.calendrier-mois-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.55rem;
}

.calendrier-mois-entete h2 {
    margin: 0;
}

.calendrier-mois-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: bold;
    font-size: 0.85rem;
}

.grille-jours-mois-conges {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 68px;
    gap: 2px;
}

.jour-cal-nom {
    font-size: 0.68rem;
    color: var(--texte-secondaire);
    text-align: center;
    line-height: 1.6;
}

.jour-cal-mois-conges {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
    background: var(--surface);
    border-radius: 3px;
    cursor: pointer;
    padding: 3px 0 3px;
    font-family: inherit;
    overflow: hidden;
}

.jour-cal-mois-conges:hover {
    outline: 2px solid var(--marque);
    outline-offset: -2px;
}

.jour-cal-hors-mois {
    opacity: 0.4;
}

.jour-cal-weekend-bg {
    background: var(--surface-secondaire);
}

.jour-cal-ferie-bg {
    background: #fdeecb;
}

.jour-cal-fermeture-bg {
    background: #e9e2f5;
}

.jour-cal-surligne {
    animation: pulse-jour-surligne 2.2s ease-out 1;
}

@keyframes pulse-jour-surligne {
    0% { box-shadow: inset 0 0 0 3px var(--marque); background-color: color-mix(in srgb, var(--marque) 25%, var(--surface)); }
    65% { box-shadow: inset 0 0 0 3px var(--marque); background-color: color-mix(in srgb, var(--marque) 25%, var(--surface)); }
    100% { box-shadow: inset 0 0 0 0 transparent; background-color: transparent; }
}

.jour-cal-mois-numero {
    font-size: 0.75rem;
    color: var(--texte-secondaire);
    line-height: 1;
}

/* Compteur de praticiens présents (2026-09-20) — en absolu dans le coin haut-droit de la case
   (`.jour-cal-mois-conges` est déjà `position: relative`) : n'occupe aucune place dans le flux normal,
   donc ne touche ni la taille de la case ni la mécanique des zones de pastilles juste en dessous. */
.jour-cal-effectif-praticiens {
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--texte-secondaire);
    line-height: 1;
}

.zone-pastilles-assistantes {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    gap: 2px;
    width: 100%;
    padding: 1px 2px;
}

.zone-pastilles-praticiens {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    justify-items: center;
    width: 100%;
    margin-top: auto;
    padding: 1px 1px 0;
}

.pastille-assistante-initiale {
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    border-radius: 40%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    flex-shrink: 0;
}

.pastille-praticien-initiale {
    min-width: 13px;
    height: 13px;
    padding: 0 1px;
    border-radius: 40%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.42rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    flex-shrink: 0;
}

.legende-calendrier-mois {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.65rem;
    font-size: 0.72rem;
    color: var(--texte-secondaire);
}

.legende-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.legende-pastille-echantillon {
    width: 14px;
    height: 14px;
    border-radius: 40%;
    background: var(--texte-secondaire);
    display: inline-block;
}

/* Couleur fixe, PAS une variable de thème : reflète COULEUR_PRATICIEN_UNIFORME
   (assets/js/conges-calendrier.js) — la pastille praticien réelle a un texte blanc fixe par-dessus,
   couleur métier "marqueur praticien uniforme" au même titre que .avatar-initiales. */
.legende-barre-echantillon {
    width: 12px;
    height: 12px;
    border-radius: 40%;
    background: #37474f;
    display: inline-block;
}

.legende-case-echantillon {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
}

.legende-case-weekend {
    background: var(--surface-secondaire);
}

.legende-case-ferie {
    background: #fdeecb;
}

.legende-case-fermeture {
    background: #e9e2f5;
}

.popover-jour-calendrier {
    position: absolute;
    z-index: 30;
    width: 240px;
    background: var(--surface);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    padding: 0.7rem 0.85rem;
}

.popover-jour-cachee {
    display: none;
}

.popover-jour-date {
    margin: 0 0 0.4rem;
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: capitalize;
}

.popover-jour-neutre {
    margin: 0 0 0.4rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.78rem;
    display: inline-block;
}

.popover-jour-ferie {
    background: #fdeecb;
    color: #92650a;
}

.popover-jour-fermeture {
    background: #e9e2f5;
    color: #5b3aa8;
}

.popover-jour-liste {
    list-style: none;
    margin: 0 0 0.4rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.82rem;
}

.popover-jour-liste li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.popover-jour-liste-praticiens {
    padding-top: 0.35rem;
    border-top: 1px dashed var(--bordures);
}

.popover-jour-motif {
    color: var(--texte-secondaire);
    font-size: 0.76rem;
}

.popover-pastille-initiale {
    min-width: 20px;
    height: 20px;
    font-size: 0.65rem;
}

/* Pointage horaire */

.carte-dashboard,
.carte-pointage {
    background: var(--surface);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 1rem 1.2rem;
    margin-bottom: 1.2rem;
}

.titre-pointage {
    font-size: 1.05rem;
    margin: 0 0 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.titre-pointage-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--marque) 16%, var(--surface));
    color: var(--marque-actif);
}

.titre-pointage-icone svg {
    width: 0.95rem;
    height: 0.95rem;
}

.case-role-pointage {
    border-bottom: none;
    padding: 0 0 0.8rem;
}

.chrono-pointage {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-height: 2.4rem;
    margin-bottom: 0.8rem;
}

.chrono-label {
    color: var(--texte-secondaire);
    font-size: 0.85rem;
}

.chrono-valeur {
    font-size: 1.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.chrono-valeur.chrono-fige {
    color: var(--texte-secondaire);
}

.recap-pointage {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
}

.recap-pointage-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.recap-pointage-item .chrono-valeur {
    font-size: 1.3rem;
}

.chrono-total {
    color: var(--marque-actif);
}

.ecart-pointage {
    font-size: 0.85rem;
    margin-left: 0.3rem;
}

.ecart-positif { color: #1e7b3a; }
.ecart-negatif { color: #a33; }

/* Delta pointage réel/théorique (admin/pointages.php) : bleu si positif, rouge si négatif —
   distinct de .ecart-positif/-negatif (vert/rouge) utilisé côté assistante. */
.delta-positif { color: #2c78c4; font-weight: 600; }
.delta-negatif { color: #a33; font-weight: 600; }

/* Mode sombre (correctif 2026-09-25, toutes largeurs) : #a33/#2c78c4 trop sombres sur --surface
   sombre (~2,9:1 pour le rouge). Même code bleu/rouge, teintes éclaircies — le rouge réutilise
   --erreur, déjà la teinte d'erreur lisible sur fond sombre. */
:root[data-theme="dark"] .delta-positif { color: #6fb0ee; }
:root[data-theme="dark"] .delta-negatif { color: var(--erreur); }

.btn-pointage {
    font-size: 1rem;
    padding: 0.7rem 1.4rem;
}

/* Poste de pointage enregistré, navigateur non reconnu (voir CLAUDE.md "Poste de pointage") :
   remplace le bouton par un message sobre. */
.message-poste-pointage {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    background: var(--surface-secondaire);
    border: 1px solid var(--bordures);
    font-size: 0.9rem;
}

.btn-pointage-vert { background: #2e9e4f; color: #fff; }
.btn-pointage-vert:hover { background: #25823f; }

.btn-pointage-orange { background: #e08a1e; color: #fff; }
.btn-pointage-orange:hover { background: #c1740f; }

.btn-pointage-jaune { background: #f0c94d; color: #4a3b00; }
.btn-pointage-jaune:hover { background: #ddb52f; }

.resume-jour-dashboard {
    background: var(--surface);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 0.4rem 1.2rem;
}

.ligne-resume-jour {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--bordures);
}

.ligne-resume-jour:last-child {
    border-bottom: none;
}

.libelle-demi-resume {
    color: var(--texte-secondaire);
    font-size: 0.85rem;
}

.badge-statut-pointage {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.78rem;
}

.badge-statut-pointage-pas_arrivee { background: #f3e3e3; color: #a33; }
.badge-statut-pointage-au_travail { background: #e3f6e9; color: #1e7b3a; }
.badge-statut-pointage-en_pause { background: #fdf0d5; color: #a3701e; }
.badge-statut-pointage-partie { background: #e5e5e5; color: #555; }
.badge-statut-pointage-weekend { background: #e8edf3; color: #4a6178; }
.badge-statut-pointage-ferme { background: #e9e2f5; color: #5b3aa8; }
.badge-statut-pointage-conge { background: #e0e9f7; color: #2c4f8a; }
.badge-statut-pointage-recup { background: #eae0f7; color: #5a2c8a; }

/* Tableau de bord assistante (assistantes/dashboard.php) */

.dashboard-entete {
    margin-bottom: 1.2rem;
}

.dashboard-date {
    color: var(--texte-secondaire);
    font-size: 0.9rem;
    margin: 0 0 0.2rem;
    text-transform: capitalize;
}

.dashboard-entete h1 {
    margin: 0;
}

.carte-dashboard h2 {
    font-size: 1.05rem;
    margin: 0 0 0.7rem;
}

.presences-jour {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.presences-groupe {
    flex: 1;
    min-width: 220px;
}

.presences-groupe h3 {
    font-size: 0.78rem;
    text-transform: uppercase;
    color: var(--texte-secondaire);
    margin: 0 0 0.6rem;
}

.presences-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.presence-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: 4.4rem;
    text-align: center;
}

.presence-item .nom-presence {
    font-size: 0.72rem;
    color: var(--texte-secondaire);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Assistantes ABSENTES dans "Présences du jour" (admin/dashboard.php, 2026-09-18) — ajoutées à la
   suite des présentes dans la MÊME .presences-liste (donc le même flex-wrap "~4 par ligne" en mobile,
   aucune règle de grille dédiée à écrire) ; désaturées + assombries pour rester nettement distinctes
   au premier coup d'œil, quel que soit le mode clair/sombre (grayscale fonctionne identiquement dans
   les deux). La raison (Congé/Récup/Non assignée) est aussi reprise en `title` (tooltip) sur
   .presence-item-absente elle-même, pour rester lisible même si `.presence-raison` est tronqué par
   la largeur compacte (4.4rem) de l'item. */
.presence-item-absente {
    filter: grayscale(1);
    opacity: 0.55;
}

.presence-raison {
    font-size: 0.6rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.semaine-dashboard {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
}

.jour-dashboard {
    flex: 1 1 0;
    min-width: 0;
    background: var(--surface-secondaire);
    border-radius: 6px;
    padding: 0.5rem 0.5rem;
}

.jour-dashboard-aujourdhui {
    background: color-mix(in srgb, var(--marque) 14%, var(--surface));
    box-shadow: inset 0 0 0 1px var(--marque);
}

.jour-dashboard h3 {
    margin: 0 0 0.1rem;
    font-size: 0.9rem;
}

.jour-dashboard .date-jour {
    display: block;
    margin-bottom: 0.4rem;
}

.demi-dashboard {
    font-size: 0.75rem;
    padding: 0.3rem 0.4rem;
    border-radius: 4px;
    margin-bottom: 0.3rem;
    background: var(--surface);
}

.demi-dashboard:last-child {
    margin-bottom: 0;
}

.demi-dashboard-libelle {
    display: block;
    color: var(--texte-secondaire);
    font-size: 0.68rem;
    text-transform: uppercase;
    margin-bottom: 0.1rem;
}

.demi-dashboard-recup { background: #eae0f7; color: #5a2c8a; }
.demi-dashboard-conge { background: #e0e9f7; color: #2c4f8a; }

.actions-rapides {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dashboard-conges-heures-sup {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.dashboard-conges-heures-sup .solde-conges {
    flex: 1;
    min-width: 240px;
    margin-bottom: 0;
}

.dashboard-solde-titre {
    margin-bottom: 0.3rem;
}

.dashboard-planning-disponible {
    margin-top: 0.4rem;
}

.planning-derniere-modification {
    margin-top: 1rem;
}

/* Mobile (assistantes/dashboard.php, 2026-09-13, restylé 2026-09-14 — voir CLAUDE.md, "Tableau de
   bord assistante"). "Ma semaine" : sans ce bloc, .jour-dashboard (flex:1 1 0; min-width:0) se
   contente de RÉTRÉCIR les 5 colonnes pour tenir sur l'écran — illisible sur un téléphone. On bascule
   donc en largeur fixe pour forcer .semaine-dashboard (déjà overflow-x:auto) à défiler horizontalement
   à la place, avec un léger effet d'ancrage (scroll-snap) pour que chaque jour se cale proprement —
   l'indice de défilement lui-même (.semaine-scroll-indicateur) est désormais graphique et visible sur
   toutes les largeurs, voir plus bas. */
@media (max-width: 767px) {
    .carte-pointage {
        padding: 1.1rem 1rem;
    }

    .titre-pointage {
        font-size: 1.15rem;
    }

    .btn-pointage {
        width: 100%;
        min-height: 3.1rem;
        font-size: 1.05rem;
    }

    .semaine-dashboard {
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .jour-dashboard {
        flex: 0 0 150px;
        min-width: 150px;
        scroll-snap-align: start;
    }
}

/* Tableau de bord admin (admin/dashboard.php, 2026-09-13) */

.texte-succes {
    color: var(--succes);
}

/* Outil de simulation de date — discret par défaut (form), mais le bandeau qui accompagne une
   simulation active est volontairement plus visible (teinté --alerte) pour ne jamais laisser croire
   par erreur qu'on regarde la vraie date du jour. */
.simulation-date-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
}

.simulation-date-form input[type="date"] {
    background: var(--surface);
    color: var(--texte-principal);
    border: 1px solid var(--bordures);
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    font: inherit;
}

.bandeau-simulation {
    background: color-mix(in srgb, var(--alerte) 18%, var(--surface));
    color: var(--alerte);
    border-radius: 4px;
    padding: 0.5rem 0.7rem;
    margin: 0 0 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Connexion "en tant que" (admin → assistante) : bandeau en tête des pages assistante tant que la
   bascule est active — même teinte d'avertissement que .bandeau-simulation (voir auth.php). */
.bandeau-connexion-en-tant-que {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    background: color-mix(in srgb, var(--alerte) 18%, var(--surface));
    color: var(--alerte);
    border-radius: 4px;
    padding: 0.5rem 0.7rem;
    margin: 0 0 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Pastille de statut de pointage, en surimpression de l'avatar (module "Présences du jour") —
   5 couleurs "coup d'œil", toutes dérivées des variables du système de design (voir
   lib/pointages.php::couleur_statut_pointage_dashboard()) : gris = pas encore pointée mais rien
   d'anormal, vert = au travail, orange = en pause, rouge = absente alors qu'attendue (heure de prise
   de poste dépassée sans pointage), noir = journée terminée (les 4 pointages faits) — pas de variable
   "noir" dédiée dans le système à 12 variables, --texte-principal joue ce rôle : toujours la teinte la
   plus contrastée contre --surface quel que soit le mode (foncé en clair, clair en sombre), ce qui la
   distingue nettement des 4 autres pastilles dans les deux modes. */
.avatar-avec-statut {
    position: relative;
    display: inline-flex;
}

.pastille-statut-pointage {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    border: 2px solid var(--surface);
}

.pastille-statut-gris { background: var(--texte-secondaire); }
.pastille-statut-vert { background: var(--succes); }
.pastille-statut-orange { background: var(--alerte); }
.pastille-statut-rouge { background: var(--erreur); }
.pastille-statut-noir { background: var(--texte-principal); }

.planning-jour-demis {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.planning-jour-cellule {
    flex: 1 1 260px;
    margin-bottom: 0;
}

/* Met en évidence la ligne clinique de P-A (praticien-admin connecté à ce dashboard) — même principe
   que .ligne-moi côté assistante (couleur de marque + fond teinté), avec en plus une bordure gauche
   pour rester repérable même sans la police en gras d'une ligne "moi" habituelle. */
.ligne-assistante-pa {
    background: color-mix(in srgb, var(--marque) 14%, var(--surface));
    border-left: 3px solid var(--marque);
    border-radius: 4px;
    padding-left: 0.3rem;
    font-weight: 600;
}

.conges-semaine-groupes {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.conges-semaine-groupe {
    flex: 1;
    min-width: 220px;
}

.conges-semaine-groupe h3 {
    font-size: 0.78rem;
    text-transform: uppercase;
    color: var(--texte-secondaire);
    margin: 0 0 0.6rem;
}

.liste-conges-semaine {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.85rem;
}

.liste-echeances {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.liste-echeances li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bordures);
    font-size: 0.85rem;
}

.liste-echeances li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.echeance-libelle {
    font-weight: 600;
}

.echeance-detail {
    flex: 1 1 auto;
}

/* "Échéances à traiter" / "Prochaine échéance calendrier" côte à côte (2026-09-13) — deux cartes
   pleines (pas une carte unique divisée), chacune garde son .carte-dashboard habituel (fond/ombre/
   margin-bottom propres), seule la largeur est contrainte à la moitié via ce conteneur flex. */
.dashboard-deux-colonnes {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.dashboard-colonne-moitie {
    flex: 1 1 0;
    min-width: 0;
}

/* Statut du planning (2026-09-13) — 4 prochaines semaines, une ligne par semaine avec un badge de
   statut réutilisant .badge-active/.badge-inactive (déjà établis comme code couleur GÉNÉRIQUE
   publié/vide, voir CLAUDE.md "Système de design") ; .badge-neutre est nouveau, pour le 3e état
   "Vide" (aucun planning créé pour cette semaine) qui n'avait pas encore de badge générique gris. */
.liste-statut-planning {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.liste-statut-planning li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--bordures);
    font-size: 0.85rem;
}

.liste-statut-planning li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.badge-neutre {
    background: var(--surface-secondaire);
    color: var(--texte-secondaire);
}

/* Mobile (admin/dashboard.php, 2026-09-13) — voir CLAUDE.md, "Tableau de bord admin".
   1) Toutes les paires de cartes côte à côte repassent en une seule colonne empilée, dans le même
      ordre que sur desktop (.dashboard-deux-colonnes n'a par ailleurs aucun wrap/min-width ; les deux
      autres ont déjà un wrap naturel via min-width sur grand écran mais on le force explicitement ici
      pour un comportement garanti quelle que soit la largeur exacte du téléphone).
   2) Simulation de date : bouton compact (.btn-simulation-toggle, cf. assets/js/dashboard-admin.js)
      qui révèle le formulaire au clic, plutôt que le champ + boutons toujours visibles de desktop.
   3) Statut du planning : autorise le retour à la ligne entre le libellé de semaine et le badge, pour
      qu'un libellé long ne pousse jamais le badge hors champ ni ne le coupe. */
@media (max-width: 767px) {
    .dashboard-deux-colonnes,
    .presences-jour,
    .conges-semaine-groupes {
        flex-direction: column;
        gap: 1rem;
    }

    .presences-groupe,
    .conges-semaine-groupe {
        min-width: 0;
    }

    .btn-simulation-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 0.6rem;
    }

    .simulation-date-form {
        display: none;
    }

    .simulation-date-form.simulation-date-form-ouverte {
        display: flex;
    }

    .simulation-date-form input[type="date"] {
        font-size: 1rem;
    }

    .liste-statut-planning li {
        flex-wrap: wrap;
        row-gap: 0.3rem;
    }
}

@media (min-width: 768px) {
    .btn-simulation-toggle {
        display: none;
    }
}

/* Mobile (assistantes/planning.php, assistantes/mes-conges.php, assistantes/mon-temps.php,
   2026-09-13) — voir CLAUDE.md, "Adaptation mobile". Toutes les classes ci-dessous sont des
   MODIFICATEURS ajoutés en plus des classes déjà partagées avec d'autres pages (`.grille-planning`/
   `.colonne-jour` avec `admin/fabrique-planning.php`, `.actions-bar`/`.tabs` partout sur le site,
   `.panneau-calendrier`/`.calendrier-jour` avec `admin/fabrique-planning.php` ET le calendrier heures
   sup de `admin/pointages.php`, `.nav-annee-feries` avec `admin/jours-feries.php`/`admin/pointages.php`)
   — jamais une redéfinition des classes de base, précisément pour ne changer le rendu mobile QUE sur
   les 3 pages assistante visées ici, aucune des pages admin qui partagent ces mêmes classes de base
   n'étant concernée par ce chantier (voir CLAUDE.md, "Adaptation mobile" — périmètre volontairement
   limité, même principe que le premier chantier mobile du 2026-09-13). */
@media (max-width: 767px) {
    /* assistantes/planning.php — les 5 colonnes de jours (.grille-lecture, scoping propre à cette
       page — voir "Vue assistante du planning" plus bas) passent d'un déroulement horizontal
       (comportement desktop, comme la fabrique de planning) à un empilement vertical PLEINE LARGEUR,
       lundi à vendredi dans l'ordre — page de consultation principale du planning, contrairement à
       "Ma semaine" du dashboard (aperçu compact, défilement horizontal accepté là-bas) : un
       empilement complet est ici préférable. Tri par rôle, cadres récup/congé/récup heures sup et
       ordre fixe des praticiens : aucune logique touchée, purement une largeur de colonne différente. */
    .grille-lecture {
        flex-direction: column;
        overflow-x: visible;
        gap: 1rem;
    }

    .grille-lecture .colonne-jour {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }

    /* En-tête (titre de semaine + Semaine précédente/Choisir une semaine/Semaine suivante) : les 3
       contrôles empilés pleine largeur plutôt que compressés en ligne — .actions-bar-semaine-lecture/
       .tabs-semaine-lecture sont des classes AJOUTÉES en plus de .actions-bar/.tabs (jamais une
       redéfinition de ces dernières, partagées par le reste du site). */
    .actions-bar-semaine-lecture {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    /* Correctif 2026-09-17 : les 3 boutons restaient empilés sur 3 lignes (flex-direction: column
       d'origine) — repassés sur UNE SEULE ligne compacte, icône seule (texte masqué via
       .texte-bouton-nav-semaine, wrapper ajouté dans le HTML autour du libellé), `aria-label` sur
       chaque bouton pour préserver l'accessibilité malgré le texte visuel masqué. */
    .tabs-semaine-lecture {
        flex-direction: row;
        gap: 0.5rem;
        position: relative;
    }

    .tabs-semaine-lecture > .btn,
    .tabs-semaine-lecture > .dropdown-calendrier {
        flex: 1 1 0;
        width: auto;
    }

    .tabs-semaine-lecture > .dropdown-calendrier > .btn {
        width: 100%;
    }

    /* Correctif 2026-09-17 (bis) : `.panneau-calendrier` (position: absolute) se positionnait par
       rapport à `.dropdown-calendrier` (son parent `position: relative` le plus proche) — devenu
       un simple tiers de la ligne depuis la compaction ci-dessus, le panneau n'héritait donc plus
       que de CETTE largeur au lieu de toute la barre. `.dropdown-calendrier` repasse en `position:
       static` sous ce breakpoint (uniquement ici, scopé à .tabs-semaine-lecture — ne touche pas le
       même dropdown sur admin/fabrique-planning.php) pour laisser `.tabs-semaine-lecture` (position:
       relative ci-dessus) servir de référence : le panneau (déjà width:100%/left:0/right:0 juste en
       dessous) s'étend alors sur la largeur des 3 boutons réunis, sous la ligne entière. */
    .tabs-semaine-lecture > .dropdown-calendrier {
        position: static;
    }

    .tabs-semaine-lecture .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.65rem 0.3rem;
        font-size: 1.15rem;
    }

    .tabs-semaine-lecture .texte-bouton-nav-semaine {
        display: none;
    }

    /* Le mini-calendrier de sélection de semaine (dropdown ouvert depuis "📅 Choisir une semaine")
       s'élargit à toute la largeur disponible (au lieu des 280px fixes desktop) et ses cases de jour
       s'agrandissent — reste utilisable au doigt sans viser un pavé de quelques millimètres. Scopé à
       .tabs-semaine-lecture pour ne jamais toucher le même calendrier sur admin/fabrique-planning.php
       ni celui, structurellement identique mais fonctionnellement distinct, du module Heures
       supplémentaires de admin/pointages.php. */
    .tabs-semaine-lecture .panneau-calendrier {
        width: 100%;
        left: 0;
        right: 0;
        box-sizing: border-box;
    }

    .tabs-semaine-lecture .calendrier-jour {
        padding: 0.65rem 0;
        font-size: 0.95rem;
    }

    /* assistantes/mes-conges.php (navigation par année) et assistantes/mon-temps.php (navigation par
       mois) : barre pleine largeur, chaque flèche devient une zone cliquable couvrant toute sa moitié
       de la barre (flex + min-height généreux, pas seulement l'icône elle-même) plutôt qu'une petite
       cible délicate à viser du pouce. .nav-annee-feries-tactile est un MODIFICATEUR ajouté en plus de
       .nav-annee-feries, qui reste inchangée telle quelle sur admin/jours-feries.php et
       admin/pointages.php (hors périmètre de ce chantier). */
    .nav-annee-feries.nav-annee-feries-tactile {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: stretch;
        gap: 0;
        background: var(--surface);
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 0.3rem;
    }

    /* grid-template-columns: 1fr auto 1fr — chaque flèche occupe toute SA moitié de la barre (le 1fr
       qui lui est propre), le libellé central ne prenant que sa largeur naturelle (auto) au milieu —
       zone cliquable nettement plus grande que la seule icône d'origine, comme demandé. */
    .nav-annee-feries-tactile .btn-icone {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 3.2rem;
        font-size: 1.6rem;
    }

    .nav-annee-feries-tactile .annee-affichee-feries {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 0.5rem;
        white-space: nowrap;
    }

    /* assistantes/conges-praticiens.php — flèches de navigation par année transformées en vrais
       boutons individuels visibles (correctif 2026-09-18, demande explicite : « trop petit/discret
       pour un usage mobile confortable »). Traitement DÉLIBÉRÉMENT différent de .nav-annee-feries-tactile
       ci-dessus (qui fait de chaque flèche une zone cliquable invisible couvrant toute sa moitié de
       barre, sans fond propre) : ici chaque flèche porte SON PROPRE fond/bordure/ombre, pour être
       identifiable comme un bouton au premier coup d'œil, pas seulement une zone cliquable généreuse
       mais visuellement nue. .nav-annee-feries-boutons est un MODIFICATEUR de plus posé sur
       .nav-annee-feries, scopé à cette seule page — ne touche ni .nav-annee-feries de base (admin/
       jours-feries.php, admin/pointages.php), ni .nav-annee-feries-tactile (mes-conges.php,
       mon-temps.php), ni la version desktop d'aucune de ces pages (règles sous cette même media query
       max-width:767px uniquement). */
    .nav-annee-feries-boutons .btn-icone {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 2.75rem;
        min-height: 2.75rem;
        font-size: 1.3rem;
        background: var(--surface);
        border: 1px solid var(--bordures);
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    }

    .nav-annee-feries-boutons .annee-affichee-feries {
        font-size: 1.05rem;
    }

    /* assistantes/mon-temps.php — tableau d'historique des pointages (correctif 2026-09-17) : 9
       colonnes (Jour, 4 heures pointées, Temps travaillé, Théorique, Écart, icône de correction) —
       la police/le padding par défaut de table/th/td (génériques, partagés site-wide, jamais
       redéfinis directement) faisaient déborder chaque ligne sur 2 lignes (date + écart repoussés
       en dessous). .table-historique-temps est un MODIFICATEUR posé sur ce seul <table>, même
       principe de scoping que le reste de ce chantier mobile — n'affecte aucune autre table du site.
       Seuls les <td> sont forcés en `nowrap` : les en-têtes (plus longs — « Départ pause », « Temps
       travaillé »...) peuvent retourner à la ligne sans conséquence, seules les LIGNES de données
       doivent tenir sur une seule ligne comme demandé. */
    .table-historique-temps th,
    .table-historique-temps td {
        padding: 0.3rem 0.15rem;
        font-size: 0.68rem;
    }

    .table-historique-temps td {
        white-space: nowrap;
    }

    .table-historique-temps th {
        font-size: 0.6rem;
        line-height: 1.15;
    }

    /* Libellés d'en-tête abrégés sous 767px (Arr./Pause/Retour/Réel/Théo.) : un mot un peu long en
       toutes lettres (« Théorique », « travaillé »...) forçait sinon, à lui seul, une colonne bien
       plus large que ce que sa propre ligne de données réclame (essayé d'abord en autorisant la
       coupure en milieu de mot — overflow-wrap/word-break — mais rendu illisible, « THÉO/RIQUE » sur
       deux lignes). `.th-complet`/`.th-abrege`, un couple de `<span>` par `<th>` concerné (voir
       mon-temps.php), bascule proprement au lieu de casser le mot — desktop non concerné, il garde
       les libellés complets (`.th-abrege` restant caché par défaut, voir hors media query ci-dessous). */
    .table-historique-temps .th-complet {
        display: none;
    }

    .table-historique-temps .th-abrege {
        display: inline;
    }
}

/* Heures supplémentaires (admin/pointages.php) */

.details-heures-sup {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.details-heures-sup h4 {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--texte-secondaire);
}

.bloc-attribution-heures-sup {
    flex: 1;
    min-width: 280px;
}

.bloc-historique-heures-sup {
    flex: 0 0 280px;
}

.choix-demi-heures-sup {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.choix-mode-desactive {
    color: var(--texte-secondaire);
}

.choix-mode-desactive input[type="radio"] {
    cursor: not-allowed;
}

.liste-historique-heures-sup {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.historique-heures-sup-vide {
    color: var(--texte-secondaire);
}

.bloc-ajustement-manuel-heures-sup {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin: 1rem 0 1.4rem;
    padding: 0.9rem 1rem;
    background: var(--surface-secondaire);
    border: 1px solid var(--bordures);
    border-radius: 6px;
}

.bloc-ajustement-manuel-heures-sup h3 {
    flex-basis: 100%;
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
}

/* Connexion (login.php) — page publique, sans nav, mais avec la même bascule clair/sombre que le
   reste du site (voir CLAUDE.md, "Système de design"). */

.barre-theme-connexion {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.5rem 0;
}

.page-connexion {
    min-height: calc(100vh - 3.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.carte-connexion {
    background: var(--surface);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 380px;
}

.carte-connexion .logo-icone {
    height: 2.6rem;
    margin: 0 auto 1.5rem;
}

.carte-connexion h1 {
    text-align: center;
    margin: 0 0 1.5rem;
}

.carte-connexion form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.carte-connexion .btn-primary {
    margin-top: 0.4rem;
    width: 100%;
    padding: 0.6rem 0.9rem;
}

.lien-mdp-oublie {
    text-align: center;
    margin: 1.2rem 0 0;
    font-size: 0.85rem;
}

/* Mobile (login.php) — carte déjà centrée/fluide par nature (.page-connexion + .carte-connexion
   max-width:380px, width:100%), ce bloc ajuste uniquement le confort tactile : padding réduit pour
   laisser plus de largeur utile au contenu sur un écran ~375-414px, champs/bouton plus grands
   (min-height ~44px, recommandation Apple/Material pour une zone cliquable confortable au doigt),
   et taille de police des champs remontée à 16px — sous ce seuil, Safari iOS zoome automatiquement
   la page au focus d'un champ, un comportement gênant qu'on évite en restant à 16px minimum. */
@media (max-width: 480px) {
    .carte-connexion {
        padding: 2rem 1.25rem;
        border-radius: 10px;
    }

    .carte-connexion .form-field input {
        min-height: 2.75rem;
        font-size: 1rem;
    }

    .carte-connexion .btn-primary {
        min-height: 2.75rem;
        font-size: 1rem;
    }
}

.bloc-ajustement-manuel-heures-sup .form-field {
    margin-bottom: 0;
}

/* ==========================================================================
   Refonte visuelle assistantes/dashboard.php (2026-09-14) — voir CLAUDE.md,
   "Tableau de bord assistante". Toutes les classes ci-dessous sont NOUVELLES et
   propres à cette page (aucune ne redéfinit une classe déjà partagée avec
   admin/dashboard.php ou une autre page — même principe de scoping que le reste
   du site, voir CLAUDE.md "Adaptation mobile"/"Principe de scoping systématique").
   ========================================================================== */

/* Utilitaire générique (texte pour lecteur d'écran seulement) — nouveau, réutilisable ailleurs. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* En-tête de carte générique (icône dans un badge rond + titre + chevron optionnel si la carte
   renvoie vers une page dédiée) — voir maquette fournie par l'utilisateur. */
.carte-entete {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 0.9rem;
    text-decoration: none;
    color: inherit;
}

.carte-entete h2 {
    margin: 0;
    flex: 1;
}

.carte-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--marque) 16%, var(--surface));
    color: var(--marque-actif);
}

.carte-icone svg {
    width: 1.2rem;
    height: 1.2rem;
}

.carte-chevron {
    color: var(--texte-secondaire);
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

a.carte-entete-lien:hover .carte-chevron {
    color: var(--marque);
}

/* État vide illustré (icône discrète + message), remplace un cadre vide sur "Ma journée" et
   "Présences du jour" quand il n'y a rien à afficher (week-end, jour non travaillé...). */
.etat-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1rem 0 0.4rem;
    color: var(--texte-secondaire);
}

.etat-vide-icone {
    display: inline-flex;
    width: 2.6rem;
    height: 2.6rem;
    opacity: 0.55;
}

.etat-vide-icone svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.4;
}

.etat-vide p {
    margin: 0;
}

/* Accueil : date + "Bonjour [Prénom]" + courte phrase contextuelle. */
.dashboard-salutation {
    margin: 0.1rem 0 0.15rem;
}

.dashboard-phrase {
    margin: 0;
}

/* Icône soleil/lune devant "Matin"/"Après-midi" sur la carte "Ma journée". */
.icone-demi {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 0.3rem;
    color: var(--marque-actif);
}

.icone-demi svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* "Présences du jour" — avatars + nom, praticiens et assistantes dans deux sous-groupes séparés par
   une fine ligne verticale discrète (.presences-separateur, 2026-09-15 — les deux groupes semblaient
   mélangés dans la même rangée avant ce correctif) plutôt que deux groupes pleinement étiquetés —
   classes propres à cette page, N'affectent PAS admin/dashboard.php qui garde sa propre grille
   .presences-jour/.presences-groupe/.presence-item, inchangée. */
.presences-jour-liste {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.1rem;
}

.presences-sous-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.presences-separateur {
    width: 1px;
    align-self: stretch;
    background: var(--bordures);
    flex-shrink: 0;
}

.presence-avatar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 4.4rem;
    text-align: center;
}

.presence-avatar-item .avatar {
    width: 2.6rem;
    height: 2.6rem;
}

.presence-avatar-item .nom-presence {
    font-size: 0.72rem;
    color: var(--texte-secondaire);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* "Ma semaine" — indicateur de défilement graphique (petit trait arrondi), visible sur toutes les
   largeurs (contrairement à l'ancien indice textuel, mobile uniquement) : purement décoratif, un
   texte équivalent pour lecteur d'écran est fourni à côté (.sr-only). */
.semaine-scroll-indicateur {
    width: 2.6rem;
    height: 0.28rem;
    border-radius: 999px;
    background: var(--bordures);
    margin: 0.8rem auto 0;
}

/* "Actions rapides" — 3 cartes carrées avec icône + libellé, plutôt que des boutons en ligne. */
.actions-rapides {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
}

.action-rapide-carte {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 0.9rem 0.5rem;
    border-radius: 8px;
    background: var(--surface-secondaire);
    text-decoration: none;
    color: var(--texte-principal);
    font-size: 0.8rem;
    line-height: 1.25;
}

.action-rapide-carte:hover {
    background: color-mix(in srgb, var(--marque) 12%, var(--surface-secondaire));
}

.action-rapide-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--marque) 16%, var(--surface));
    color: var(--marque-actif);
}

.action-rapide-icone svg {
    width: 1.15rem;
    height: 1.15rem;
}

/* "Congés" / "Heures supplémentaires" — mini en-tête icône + libellé au-dessus de la valeur, à
   l'intérieur des deux .solde-conges déjà côte à côte via .dashboard-conges-heures-sup. */
.carte-mini-icone .carte-entete {
    margin-bottom: 0.5rem;
}

.carte-mini-icone .carte-icone {
    width: 1.9rem;
    height: 1.9rem;
}

.carte-mini-icone .carte-icone svg {
    width: 1rem;
    height: 1rem;
}

.carte-mini-icone .dashboard-solde-titre {
    margin: 0;
}

/* Modules "Congés"/"Heures supplémentaires" cliquables (2026-09-18) — .carte-mini-icone n'est utilisée
   QUE par ces deux cartes (voir plus haut), jamais par .solde-conges seule (bannière non cliquable de
   assistantes/mes-conges.php et assistantes/mon-temps.php) : scoper la remise à zéro des styles de lien
   ET le survol ici, pas sur .solde-conges, évite tout effet de bord sur ces deux autres pages. Même
   principe que .action-rapide-carte (lien de bloc pleine carte, pas seulement l'en-tête) — cohérent
   avec "rends cliquable le module" plutôt qu'un simple en-tête. */
a.carte-mini-icone {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.carte-mini-icone:hover {
    background: color-mix(in srgb, var(--marque) 8%, var(--surface));
}

/* ==========================================================================
   Panneau de menu enrichi (icônes par lien, état actif, bascule thème en
   interrupteur, déconnexion regroupée) — utilisé par les 5 pages de l'espace
   assistante (dashboard, planning, mes-conges, mon-temps, changer-mot-de-passe
   — généralisé le 2026-09-18, auparavant `assistantes/dashboard.php` seul) ET,
   depuis le même jour (second correctif, plus tard dans la journée), par les 9
   pages `admin/*.php` — demande explicite ("même bouton de bascule mode sombre
   que côté assistante", "Se déconnecter en bas du menu, exactement comme côté
   assistante") sur `admin/dashboard.php`, étendue au reste de l'espace admin
   puisque `header.site-header`/`nav` y est le même composant partagé (markup
   dupliqué à l'identique par page, pas un include central, mais une seule et
   même recette visuelle/comportementale — voir CLAUDE.md, "Navigation mobile").
   `.header-menu-permanent` couvre donc désormais les 14 pages admin+assistante
   qui portent une nav (toutes sauf les pages publiques sans authentification :
   login.php, pointage-nfc.php, reset-password.php, mot-de-passe-oublie.php).
   Réutilise le MÊME mécanisme (assets/js/nav.js, classe .nav-ouverte, voile
   .nav-overlay) que le menu mobile générique déjà en place ailleurs (voir
   CLAUDE.md, "Navigation mobile") — seule la présentation change, jamais
   dupliqué.

   RESPONSIVE (correctif 2026-09-18 — auparavant le panneau coulissant restait
   affiché à TOUTES les largeurs, y compris desktop, un bug puisque le hamburger
   ne devrait exister que sous 768px comme le reste du site) : les règles
   communes ci-dessous (icônes, interrupteur) s'appliquent à toutes les
   largeurs ; celles spécifiques à chaque mise en page sont sous media query —
   `@media (min-width: 768px)` pour la barre horizontale classique,
   `@media (max-width: 767px)` pour le panneau coulissant plein-hauteur. Même
   DOM des deux côtés, seule la présentation CSS change. */

/* --- Base, toutes largeurs --- */
.nav-lien-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    flex-shrink: 0;
    color: var(--texte-secondaire);
}

.nav-lien-icone svg {
    width: 1.15rem;
    height: 1.15rem;
}

.nav-lien-actif .nav-lien-icone {
    color: var(--marque-actif);
}

.nav-lien-deconnexion .nav-lien-icone {
    color: var(--erreur);
}

/* Bascule de thème, ligne "Mode sombre" + interrupteur visuel sur mobile (voir media query plus
   bas) — même bouton .btn-theme-toggle partout (assets/js/theme.js gère le clic sans connaître son
   contenu), icônes soleil/lune déjà togglées en CSS par data-theme (voir "Système de design"). */
.switch-visuel {
    position: relative;
    width: 2.3rem;
    height: 1.3rem;
    border-radius: 999px;
    background: var(--bordures);
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.switch-curseur {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: transform 0.2s ease;
}

[data-theme="dark"] .switch-visuel {
    background: var(--marque);
}

[data-theme="dark"] .switch-curseur {
    transform: translateX(1rem);
}

/* --- Desktop (>=768px) : barre horizontale classique, comme les 13 autres pages admin/assistante,
   simplement avec une petite icône devant chaque lien pour la cohérence visuelle avec le panneau
   mobile (même contenu, même DOM). --- */
@media (min-width: 768px) {
    header.site-header.header-menu-permanent .btn-nav-toggle {
        display: none;
    }

    header.site-header.header-menu-permanent nav {
        position: static;
        width: auto;
        background: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0;
        padding: 0;
        box-shadow: none;
        transform: none;
        transition: none;
        overflow: visible;
    }

    .nav-panel-entete {
        display: none;
    }

    header.site-header.header-menu-permanent nav a.nav-lien,
    header.site-header.header-menu-permanent nav button.nav-lien {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        width: auto;
        margin: 0 1rem 0 0;
        padding: 0;
        border: none;
        background: none;
        color: var(--texte-secondaire);
        font: inherit;
        font-size: 1rem;
        cursor: pointer;
    }

    header.site-header.header-menu-permanent nav a.nav-lien:hover {
        color: var(--marque);
    }

    header.site-header.header-menu-permanent nav a.nav-lien-actif {
        background: none;
        color: var(--marque-actif);
        font-weight: 600;
    }

    header.site-header.header-menu-permanent nav a.nav-lien-deconnexion {
        margin-top: 0;
        margin-right: 0;
    }

    /* Thème : bouton rond classique (identique aux 13 autres pages), texte "Mode sombre" et
       interrupteur visuel masqués — inutiles hors du panneau mobile. */
    header.site-header.header-menu-permanent nav .btn-theme-toggle.nav-lien-theme {
        width: 2.1rem;
        height: 2.1rem;
        border: 1px solid var(--bordures);
        border-radius: 999px;
        justify-content: center;
        margin-right: 0;
    }

    header.site-header.header-menu-permanent .nav-lien-theme-texte,
    header.site-header.header-menu-permanent .switch-visuel {
        display: none;
    }
}

/* --- Mobile (<768px) : panneau coulissant plein-hauteur --- */
@media (max-width: 767px) {
    header.site-header.header-menu-permanent .btn-nav-toggle {
        display: inline-flex;
    }

    header.site-header.header-menu-permanent nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(82vw, 320px);
        background: var(--surface);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1.4rem 1.25rem 1.5rem;
        box-shadow: -2px 0 16px rgba(0,0,0,0.18);
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 500;
        overflow-y: auto;
    }

    header.site-header.header-menu-permanent nav.nav-ouverte {
        transform: translateX(0);
    }

    .nav-panel-entete {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.6rem;
        margin-bottom: 1.1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--bordures);
    }

    .nav-panel-logo {
        display: flex;
        align-items: center;
        gap: 0.55rem;
    }

    .nav-panel-logo .logo-icone {
        height: 1.7rem;
    }

    .nav-panel-logo strong {
        display: block;
        color: var(--texte-principal);
    }

    .nav-panel-soustitre {
        display: block;
        font-size: 0.72rem;
    }

    .btn-fermer-nav {
        background: none;
        border: none;
        color: var(--texte-secondaire);
        cursor: pointer;
        padding: 0.2rem;
        flex-shrink: 0;
        line-height: 0;
    }

    .btn-fermer-nav svg {
        width: 1.2rem;
        height: 1.2rem;
    }

    header.site-header.header-menu-permanent nav a.nav-lien,
    header.site-header.header-menu-permanent nav button.nav-lien {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        width: 100%;
        margin: 0;
        padding: 0.85rem 0.3rem;
        border: none;
        border-bottom: 1px solid var(--bordures);
        border-radius: 0;
        background: none;
        color: var(--texte-principal);
        font: inherit;
        font-size: 0.95rem;
        text-align: left;
        cursor: pointer;
    }

    header.site-header.header-menu-permanent nav a.nav-lien-actif {
        background: color-mix(in srgb, var(--marque) 14%, var(--surface));
        color: var(--marque-actif);
        font-weight: 600;
        border-radius: 6px;
        border-bottom: none;
    }

    header.site-header.header-menu-permanent nav .btn-theme-toggle.nav-lien-theme {
        width: 100%;
        height: auto;
        justify-content: flex-start;
    }

    .nav-lien-theme-texte {
        flex: 1;
    }

    header.site-header.header-menu-permanent nav a.nav-lien-deconnexion {
        margin-top: auto;
        color: var(--erreur);
        border-bottom: none;
    }

    .actions-rapides {
        gap: 0.5rem;
    }

    .action-rapide-carte {
        font-size: 0.74rem;
        padding: 0.8rem 0.4rem;
    }
}

/* ==========================================================================
   Cloche de notifications (2026-09-18) — voir CLAUDE.md, "Système de
   notification". Un item .nav-lien de plus dans <nav> (même styles de base
   que les autres liens/boutons de nav, desktop et mobile) ; seuls le badge et
   le panneau déroulant ci-dessous sont propres à ce composant. */
.notif-cloche-conteneur {
    position: relative;
}

.btn-cloche-notif {
    position: relative;
}

.badge-notif {
    position: absolute;
    top: 0.1rem;
    left: 0.9rem;
    background: var(--erreur);
    color: var(--marque-texte);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.3;
    min-width: 1.1rem;
    padding: 0 0.3rem;
    text-align: center;
}

@media (min-width: 768px) {
    .badge-notif {
        top: -0.3rem;
        left: 0.75rem;
    }
}

.panneau-notifications {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    width: min(320px, 85vw);
    max-height: 60vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--bordures);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    z-index: 600;
}

.panneau-notifications-cachee {
    display: none;
}

.panneau-notifications-liste {
    display: flex;
    flex-direction: column;
}

.panneau-notifications-vide {
    padding: 0.9rem;
    margin: 0;
}

.notif-item {
    display: block;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--bordures);
    text-decoration: none;
    color: var(--texte-principal);
}

.notif-item:last-child {
    border-bottom: none;
}

a.notif-item:hover {
    background: color-mix(in srgb, var(--marque) 8%, var(--surface));
}

.notif-message {
    margin: 0 0 0.2rem;
    font-size: 0.88rem;
}

.notif-date {
    font-size: 0.75rem;
}

.notif-non-lue {
    background: color-mix(in srgb, var(--marque) 10%, var(--surface));
}

.notif-non-lue .notif-message {
    font-weight: 600;
}

/* Sous 768px, le panneau coulissant de nav est déjà en position:fixed plein-écran — le panneau de
   notifications reprend alors une position ancrée à l'intérieur de ce panneau plutôt que sous un
   bouton devenu pleine largeur. */
@media (max-width: 767px) {
    .panneau-notifications {
        position: fixed;
        top: auto;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        width: auto;
    }
}

/* ==========================================================================
   assistantes/conges-praticiens.php — module par praticien repliable (2026-09-18,
   même principe que .btn-toggle-details de admin/praticiens.php) et formulaire
   "présence en plus" (voir CLAUDE.md, "Délégation congés praticiens"). */
.btn-toggle-praticien-conges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.corps-praticien-conges-cachee {
    display: none;
}

.btn-toggle-praticien-conges h2 {
    flex: 1;
}

.sous-titre-absences-praticien {
    margin-top: 1.2rem;
    font-size: 0.95rem;
}

.ligne-presence-supp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}