/* Direction — spécifique, complète app.css */

/* ── Module Contrats & Dossier Enfant ─────────────────────────────────── */
[data-theme="direction"] .contrat-stepper {
    display: flex; overflow-x: auto; gap: 4px; padding-bottom: 4px; margin-bottom: 4px;
}
[data-theme="direction"] .contrat-step {
    flex: 1 0 84px; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px; border: none; background: #f7f8fa; border-radius: 8px; cursor: pointer;
    font-family: var(--font); text-align: center;
}
[data-theme="direction"] .contrat-step-num {
    width: 22px; height: 22px; border-radius: 50%; background: #e2e5ea; color: var(--text-muted);
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
[data-theme="direction"] .contrat-step-label { font-size: 9px; color: var(--text-muted); font-weight: 600; line-height: 1.2; }
[data-theme="direction"] .contrat-step.done .contrat-step-num { background: var(--success); color: #fff; }
[data-theme="direction"] .contrat-step.done .contrat-step-label { color: var(--success); }
[data-theme="direction"] .contrat-step.active { background: #eaf2ff; }
[data-theme="direction"] .contrat-step.active .contrat-step-num { background: var(--primary); color: #fff; }
[data-theme="direction"] .contrat-step.active .contrat-step-label { color: var(--primary); font-weight: 800; }

[data-theme="direction"] .piece-row {
    display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px;
}
[data-theme="direction"] .piece-row:last-child { border-bottom: none; }
[data-theme="direction"] .piece-row-info { flex: 1 1 auto; min-width: 0; }
[data-theme="direction"] .piece-req { color: var(--error); font-weight: 800; margin-left: 3px; }
[data-theme="direction"] .piece-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
[data-theme="direction"] .piece-row-actions .icon-btn { width: 26px; height: 26px; cursor: pointer; }
[data-theme="direction"] .piece-row-actions input[type="file"] { display: none; }

/* ── Harmonisation charte Dashboard — composants partagés Demandes / Liste
   d'attente / Attributions (chantier suivant le Dashboard V2). Réutilise
   .dash-actions-card/.dash-actions-head/.dash-pill-*/.dash-avatar déjà
   posés pour le Dashboard — seuls les éléments réellement nouveaux sont
   ajoutés ici. ── */
[data-theme="direction"] .dash-view-header { margin-bottom: 16px; }
[data-theme="direction"] .dash-view-header h1 { font-size: 20px; font-weight: 800; color: var(--primary); margin: 0 0 2px; line-height: 1.25; }
[data-theme="direction"] .dash-view-header p { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.4; }

/* Icône dorée pour les headers navy des 3 nouvelles vues — classe séparée de
   .dash-actions-head/.dash-widget-head (restés blancs sur le Dashboard,
   volontairement non modifiés) pour ne rien changer au Dashboard validé. */
[data-theme="direction"] .icon-accent-gold { color: #c9a84c; }

/* Segmented control compact (ex. "À traiter | Liste d'attente | Toutes") —
   distinct de .nav-pills (pills rondes, classe partagée avec d'autres
   écrans, non modifiée) et de .dash-actions-tabs (tabs sur fond navy). */
[data-theme="direction"] .dash-segmented {
    display: inline-flex; background: #f1f5f9; border-radius: 8px; padding: 3px; gap: 2px;
}
[data-theme="direction"] .dash-segmented button {
    border: none; background: none; cursor: pointer; padding: 7px 14px; border-radius: 6px;
    font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
[data-theme="direction"] .dash-segmented button.active { background: #fff; color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
[data-theme="direction"] .dash-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

/* Ligne dense "une demande = une ligne" (vue Demandes) — grille plutôt que
   table, pour laisser chaque bloc se comprimer sans imposer de scroll
   horizontal. Reprend .dash-avatar/.dash-pill déjà existants. */
[data-theme="direction"] .dmd-item { border-bottom: 1px solid #f1f5f9; }
[data-theme="direction"] .dmd-item:last-child { border-bottom: none; }
[data-theme="direction"] .dmd-item:hover { background: #f8fafc; }
/* Largeurs FIXES (px), pas de fr/auto : avec des colonnes relatives, chaque
   .dmd-row calcule sa propre grille indépendamment des autres lignes — une
   ligne "Validée" (moins de boutons dans la dernière colonne, donc plus
   compacte) ne s'aligne alors plus sous une ligne "Auto prévu" (2 boutons).
   Des largeurs fixes garantissent la même grille pour toutes les lignes,
   colonne vide ou non. */
[data-theme="direction"] .dmd-row {
    display: grid;
    grid-template-columns: 230px 150px 160px 170px 140px 150px;
    align-items: center; gap: 14px;
    padding: 12px 16px;
}
[data-theme="direction"] .dmd-famille { display: flex; align-items: center; gap: 10px; min-width: 0; }
[data-theme="direction"] .dmd-famille .dash-actions-nom { font-size: 13px; }
[data-theme="direction"] .dmd-date { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
[data-theme="direction"] .dmd-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; line-height: 1.3; }
[data-theme="direction"] .dmd-kpi { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-secondary); }
[data-theme="direction"] .dmd-kpi strong { color: var(--text); font-weight: 700; }
/* Retour aux carrés colorés (bordure verte/orange/rouge, fond blanc) déjà
   utilisés ailleurs (.presence-item) — juste sans la marge verticale de
   .presence-row, superflue dans une cellule de tableau dense. */
/* Brief F.2 — nowrap : à 100% de zoom, la colonne du tableau "file
   d'actions" est trop étroite pour Arr/Pic/Dép côte à côte, ce qui les
   empilait sur 2 lignes (héritage de .presence-row { flex-wrap: wrap }) ;
   ici on force la ligne unique et on laisse chaque item rétrécir plutôt
   que forcer un min-width fixe. */
[data-theme="direction"] .dmd-presence-row { margin: 0; gap: 6px; flex-wrap: nowrap; }
[data-theme="direction"] .dmd-presence-row .presence-item { min-width: 0; flex-shrink: 1; padding: 3px 6px; }
[data-theme="direction"] .dmd-presence-row .presence-item .nb { font-size: 14px; }
[data-theme="direction"] .dmd-actions { display: flex; align-items: center; gap: 6px; justify-self: end; }
@media (max-width: 1200px) {
    [data-theme="direction"] .dmd-row { grid-template-columns: 1.6fr 1.2fr 1fr; row-gap: 8px; }
    [data-theme="direction"] .dmd-kpi, [data-theme="direction"] .dmd-raison { grid-column: 1 / -1; }
}

/* ── Refonte dashboard V2 (KPI cards / file d'actions / agenda 7 jours / widgets) ── */
/* Brief F.2 — flex/nowrap forcé (plutôt que grid) : les 4 cards restent
   sur une seule ligne à 100% de zoom, quitte à rétrécir chacune (flex:1 1 0
   + min-width:0 sur les cards), plutôt que de wrapper ou déborder. */
[data-theme="direction"] .dash-kpi-grid { display: flex; flex-wrap: nowrap; gap: 16px; margin-bottom: 24px; }
/* Retour utilisateur (Bug 3) : plus cliquables (cf. HTML — @click et
   flèches ">" retirés), donc plus de curseur pointer ni d'effet hover
   "carte cliquable". */
[data-theme="direction"] .dash-kpi-card {
    background: #fff; border-radius: 14px; box-shadow: 0 2px 8px rgba(13,27,62,.06);
    padding: 14px 18px; display: flex; align-items: center; gap: 12px;
    flex: 1 1 0; min-width: 0;
}
[data-theme="direction"] .dash-kpi-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
[data-theme="direction"] .dash-kpi-icon-gold { background: #fef3c7; color: #c9a84c; }
[data-theme="direction"] .dash-kpi-icon-blue { background: #dbeafe; color: #3498db; }
[data-theme="direction"] .dash-kpi-icon-green { background: #d1fae5; color: #27ae60; }
[data-theme="direction"] .dash-kpi-icon-purple { background: #ede4f5; color: #8e44ad; }
[data-theme="direction"] .dash-kpi-body { flex: 1; min-width: 0; }
[data-theme="direction"] .dash-kpi-title { font-size: 12px; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: 2px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="direction"] .dash-kpi-value { font-size: 28px; font-weight: 800; color: var(--primary); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="direction"] .dash-kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Brief F.3 — KPI "CA sécurisé" : le montant annuel devient la valeur
   principale (grande/grasse via .dash-kpi-value déjà en place), le montant
   du mois passe en sous-ligne bleue plutôt qu'en second bloc à côté. */
[data-theme="direction"] .dash-kpi-sub-accent { color: #3498db; font-weight: 600; }
@media (max-width: 1280px) { [data-theme="direction"] .dash-kpi-value { font-size: 24px; } }

/* Retour utilisateur (corrigé) : "File d'actions" doit s'aligner sur le bas
   de "Pipeline d'opportunités" (2e widget), pas sur le bas de toute la
   colonne droite (3 widgets). Un simple stretch de 2 colonnes flex ne peut
   pas cibler un widget précis au milieu d'une pile — grid 2x2 explicite à
   la place : ligne 1 = File d'actions / (CA+Pipeline groupés dans
   .dash-widget-toprow), ligne 2 = Prochains jours / Familles actives.
   Chaque ligne du grid s'étire (comportement par défaut) à la hauteur de
   son élément le plus haut, donc les 2 éléments de la ligne 1 finissent
   exactement à la même hauteur — sans deviner de valeur en pixels. */
[data-theme="direction"] .dash-main-grid {
    display: grid; grid-template-columns: 60% 1fr; grid-template-rows: auto auto; gap: 24px;
}
[data-theme="direction"] .dash-grid-actions { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-height: 0; }
[data-theme="direction"] .dash-widget-toprow { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
[data-theme="direction"] .dash-grid-agenda { grid-column: 1; grid-row: 2; }
[data-theme="direction"] .dash-grid-familles { grid-column: 2; grid-row: 2; }
@media (max-width: 1024px) {
    [data-theme="direction"] .dash-main-grid { grid-template-columns: 1fr; grid-template-rows: none; }
    [data-theme="direction"] .dash-kpi-grid { flex-wrap: wrap; }
    [data-theme="direction"] .dash-kpi-card { flex: 1 1 calc(50% - 8px); }
}

[data-theme="direction"] .dash-actions-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(13,27,62,.06); }
@media (min-width: 1025px) {
    [data-theme="direction"] .dash-grid-actions .dash-actions-table-wrap {
        flex: 1 1 auto; max-height: none; min-height: 0;
    }
    [data-theme="direction"] .dash-grid-actions .coming-soon {
        flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0;
    }
}
[data-theme="direction"] .dash-actions-head { background: #0d1b3e; padding: 16px 20px 0; }
[data-theme="direction"] .dash-actions-head h3 { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 17px; margin: 0 0 12px; line-height: 1.25; }
/* Fix Brief J — le bouton "Absences & validées" (global, un seul pour toute
   la section) partage cette ligne avec les onglets plutôt que d'être répété
   dans chaque box jour. */
[data-theme="direction"] .dash-actions-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; }
[data-theme="direction"] .dash-actions-tabs-row .faw-toggle { color: #cbd5e1; margin-bottom: 10px; }
[data-theme="direction"] .dash-actions-tabs-row .faw-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }
[data-theme="direction"] .dash-actions-tabs { display: flex; gap: 18px; flex-wrap: nowrap; }
[data-theme="direction"] .dash-actions-tabs button {
    background: none; border: none; cursor: pointer; padding: 0 0 10px;
    font-size: 13px; font-weight: 600; color: #94a3b8; white-space: nowrap;
    border-bottom: 3px solid transparent; display: flex; align-items: center; gap: 8px;
    font-family: var(--font);
}
[data-theme="direction"] .dash-actions-tabs button:hover { color: #fff; }
[data-theme="direction"] .dash-actions-tabs button.active { color: #fff; border-bottom-color: #c9a84c; }
[data-theme="direction"] .dash-tab-badge { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 10px; background: rgba(255,255,255,.15); color: #cbd5e1; font-size: 11px; font-weight: 700; text-align: center; }
[data-theme="direction"] .dash-actions-tabs button.active .dash-tab-badge { background: #c9a84c; color: #0d1b3e; }
/* Contreparties mobile (voir @media max-width:768px) — masquées par défaut
   en desktop ; déclarées ici, AVANT le bloc media, pour que la règle de
   base ne l'emporte pas sur l'override media à spécificité égale (bug déjà
   rencontré sur .header-burger/.mobile-structure-bar : à spécificité
   identique, l'ordre de déclaration source tranche, pas l'imbrication
   @media). */
[data-theme="direction"] .dash-actions-tabs-mobile-icons { display: none; }
[data-theme="direction"] .dash-actions-statut-mobile { display: none; }
[data-theme="direction"] .dir-tabs-mobile-icons { display: none; }
[data-theme="direction"] .dash-actions-legende { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 20px 0; font-size: 11px; color: var(--text-muted); }
[data-theme="direction"] .dash-actions-legende span { display: inline-flex; align-items: center; gap: 5px; }
[data-theme="direction"] .dash-actions-legende-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
[data-theme="direction"] .dash-actions-table-wrap { overflow-x: auto; overflow-y: auto; max-height: 360px; padding: 4px 20px 0; }
/* Vue Demandes dédiée — plus de place que le Dashboard compact, pas besoin
   de plafonner la hauteur visible ni de scroller la liste. */
[data-theme="direction"] .dash-actions-table-wrap-vue { max-height: none; overflow-y: visible; }
[data-theme="direction"] .dash-actions-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; line-height: 1.3; }
[data-theme="direction"] .dash-actions-table th {
    text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
    color: var(--text-muted); padding: 12px 12px 10px; border-bottom: 1px solid var(--border); vertical-align: middle;
}
[data-theme="direction"] .dash-actions-table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; box-sizing: border-box; }
[data-theme="direction"] .dash-actions-table tbody tr:hover { background: #f8fafc; }
/* Retour utilisateur : lignes "Liste d'attente active" cliquables → Demandes. */
[data-theme="direction"] .dash-actions-table tbody tr.dash-actions-row-link { cursor: pointer; }
[data-theme="direction"] .dash-actions-table tbody tr:last-child td { border-bottom: none; }
/* Densité (ajustement) : 4-5 lignes visibles sans scroll — hauteur de ligne
   réduite (58px, avatar 36px) par rapport à la 1re version du tableau. */
[data-theme="direction"] .dash-actions-table-dense td { height: 58px; }
[data-theme="direction"] .dash-actions-table-dense .dash-avatar { width: 36px; height: 36px; font-size: 12px; }
[data-theme="direction"] .dash-actions-table-dense .dash-actions-nom { font-size: 13px; }
[data-theme="direction"] .dash-actions-kpi { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
[data-theme="direction"] .dash-pill {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
[data-theme="direction"] .dash-pill-ok { background: #d1fae5; color: #166534; }
[data-theme="direction"] .dash-pill-warn { background: #fef3c7; color: #92400e; }
[data-theme="direction"] .dash-pill-danger { background: #fee2e2; color: #991b1b; }
[data-theme="direction"] .dash-pill-neutral { background: #f1f5f9; color: var(--text-secondary); }
/* Brief G/H — badge "Nature" (Réservation/Annulation résa/Annulation absence),
   colonne commune à "À valider"/"Actions auto"/"Récemment traité". Brief H
   point 3 — "Réservation" distingué en fond bleu foncé/texte blanc/bordure
   (au lieu du même style pastel que les 2 autres natures). */
[data-theme="direction"] .dash-pill-nature-reservation { background: #1e3a8a; color: #fff; border: 1px solid #1d4ed8; }
[data-theme="direction"] .dash-pill-nature-annulation-resa { background: #ffedd5; color: #9a3412; }
[data-theme="direction"] .dash-pill-nature-annulation-absence { background: #ede4f5; color: #6b21a8; }
/* Brief H point 5 — 4e nature, propre aux onglets Liste d'attente (pas une
   des 3 natures de type_demande). */
[data-theme="direction"] .dash-pill-nature-liste-attente { background: #fef9c3; color: #854d0e; }
/* Brief G — bandeau KPI "Qualité des recommandations", onglet Actions auto. */
[data-theme="direction"] .dash-actions-kpi-reco {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 14px 20px; background: #f7f8fa; border-bottom: 1px solid var(--border);
}
[data-theme="direction"] .dash-actions-kpi-reco-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
[data-theme="direction"] .dash-actions-kpi-reco strong { font-size: 22px; font-weight: 800; color: var(--primary); }
[data-theme="direction"] .dash-actions-kpi-reco-sub { font-size: 12px; color: var(--text-muted); }
/* Retour utilisateur — badge "X familles informées" cliquable : reset des
   styles natifs de bouton, .dash-pill garde la même apparence que les
   badges non cliquables ailleurs. */
[data-theme="direction"] button.dash-pill { border: none; font-family: var(--font); cursor: pointer; }
[data-theme="direction"] button.dash-pill:not(:disabled):hover { filter: brightness(0.95); }
[data-theme="direction"] button.dash-pill:disabled { cursor: default; }

/* Retour utilisateur — modale "Relancer les familles" alignée sur la charte
   de l'app : header navy + icône dorée (même motif que .dash-actions-head/
   .dash-agenda-head), au lieu d'un simple <h3> texte. .modal-box gère son
   padding/scroll de façon uniforme (24px 20px, overflow-y:auto) — ici
   remplacé par un header pleine largeur + un corps qui porte son propre
   padding et son propre scroll, pour que le bandeau navy touche les bords
   arrondis de la modale. */
[data-theme="direction"] .modal-box.modal-box-navy { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
[data-theme="direction"] .modal-box-navy .modal-navy-head {
    background: #0d1b3e; padding: 18px 22px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
[data-theme="direction"] .modal-box-navy .modal-navy-head h3 {
    margin: 0; color: #fff; font-size: 17px; display: flex; align-items: center; gap: 10px;
}
[data-theme="direction"] .modal-box-navy .modal-navy-head h3 svg { color: #c9a84c; }
[data-theme="direction"] .modal-box-navy .modal-navy-head .modal-close { float: none; color: rgba(255,255,255,.7); }
[data-theme="direction"] .modal-box-navy .modal-navy-head .modal-close:hover { color: #fff; }
[data-theme="direction"] .modal-box-navy .modal-body { padding: 20px 22px 22px; overflow-y: auto; }

/* Lignes famille bien espacées : checkbox à gauche, nom/email empilés au
   centre, badge "Déjà notifiée" nettement détaché à droite — corrige le
   chevauchement causé par .alertes-toggle-row (scopé sous .field, donc
   sans effet ici : le flex ne s'appliquait jamais). */
[data-theme="direction"] .relance-famille-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 4px;
    border-top: 1px solid #f1f5f9; cursor: pointer;
}
[data-theme="direction"] .relance-famille-row:first-child { border-top: none; }
[data-theme="direction"] .relance-famille-row input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; }
[data-theme="direction"] .relance-famille-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
[data-theme="direction"] .relance-famille-nom { font-weight: 700; font-size: 14px; color: var(--text); }
[data-theme="direction"] .relance-famille-email { font-size: 12px; color: var(--text-muted); }
[data-theme="direction"] .relance-famille-row .dash-pill { flex-shrink: 0; }
[data-theme="direction"] .dash-actions-famille { display: flex; align-items: center; gap: 10px; }
[data-theme="direction"] .dash-avatar {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; color: #0d1b3e;
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
[data-theme="direction"] .dash-actions-nom { font-weight: 700; font-size: 14px; color: var(--text); line-height: 1.3; }
[data-theme="direction"] .dash-actions-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.3; }
/* Colonne "Créneau" sur 2 lignes (retour utilisateur) : jour abrégé + date
   en avant (gras, plus visible), heures en second plan (.dash-actions-sub,
   déjà défini juste au-dessus). */
[data-theme="direction"] .dash-actions-jour { font-weight: 700; font-size: 13px; color: var(--text); line-height: 1.3; }
[data-theme="direction"] .dash-actions-action { position: relative; display: flex; align-items: center; gap: 8px; }
[data-theme="direction"] .btn-valider-action {
    background: #fff; border: 1.5px solid var(--primary); color: var(--primary);
    font-family: var(--font); font-size: 13px; font-weight: 700; padding: 7px 15px;
    line-height: 1.2; border-radius: 20px; cursor: pointer;
}
[data-theme="direction"] .btn-valider-action:hover { background: var(--primary); color: #fff; }
/* Refuser/Supprimer — visible en permanence à côté de Valider/Attribuer
   (retour utilisateur : caché derrière un menu ⌄, personne ne le trouvait).
   Même padding/hauteur que .btn-valider-action pour un alignement parfait. */
[data-theme="direction"] .btn-refuser-action {
    background: #fff; border: 1.5px solid var(--error); color: var(--error);
    font-family: var(--font); font-size: 13px; font-weight: 700; padding: 7px 15px;
    line-height: 1.2; border-radius: 20px; cursor: pointer;
}
[data-theme="direction"] .btn-refuser-action:hover { background: var(--error-bg); }
[data-theme="direction"] .dash-actions-chevron {
    width: 28px; height: 28px; border-radius: 50%; border: none; background: none;
    color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
[data-theme="direction"] .dash-actions-chevron:hover { background: #f1f5f9; color: var(--text); }
[data-theme="direction"] .dash-actions-dropdown {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 10;
    background: #fff; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.15); overflow: hidden; min-width: 110px;
}
[data-theme="direction"] .dash-actions-dropdown button {
    display: block; width: 100%; padding: 10px 14px; border: none; background: none;
    text-align: left; font-family: var(--font); font-size: 13px; color: var(--error); cursor: pointer;
}
[data-theme="direction"] .dash-actions-dropdown button:hover { background: var(--error-bg); }
[data-theme="direction"] .dash-actions-foot { padding: 16px 20px 20px; text-align: center; }

/* ── Brief I — widget "File d'actions" : vue unifiée par jour ─────────────
   Porte le visuel de .la-day-card/.la-row (page Demandes, onglet Liste
   d'attente, css ~1245-1315) sous un préfixe distinct (.faw- — "File
   d'Actions Widget") : les 2 implémentations sont indépendantes (composants
   DOM différents), un préfixe propre évite tout partage de classe accidentel
   entre elles. */
[data-theme="direction"] .faw-jours { display: flex; flex-direction: column; gap: 18px; padding: 4px 20px 16px; overflow-y: auto; }
[data-theme="direction"] .faw-day-card {
    background: #fff; border-radius: 12px; border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(13,27,62,.05); overflow: hidden;
}
[data-theme="direction"] .faw-day-card-head {
    display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px;
    padding: 13px 16px; background: #f7f8fa; border-bottom: 1px solid var(--border);
}
[data-theme="direction"] .faw-day-card-headtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
[data-theme="direction"] .faw-day-card-title { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
[data-theme="direction"] .faw-day-card-title strong { font-size: 13px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .03em; }
[data-theme="direction"] .faw-day-count { font-weight: 600; font-size: 13px; color: var(--text-muted); }
[data-theme="direction"] .faw-day-card-capacite { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
[data-theme="direction"] .faw-day-card-capacite strong { color: var(--text); }
[data-theme="direction"] .faw-day-card-rows { display: flex; flex-direction: column; }

/* Brief J point 2 — bouton discret (pas de fond/bordure primary), toujours
   en haut à droite de la box (align-items:flex-start sur le head ci-dessus). */
[data-theme="direction"] .faw-toggle {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    background: none; border: none; cursor: pointer; padding: 3px 4px;
    font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--text-muted);
    border-radius: 6px; white-space: nowrap;
}
[data-theme="direction"] .faw-toggle:hover { background: rgba(13,27,62,.06); color: var(--text); }
[data-theme="direction"] .faw-toggle-icon { transition: transform .15s ease; }
[data-theme="direction"] .faw-toggle-icon-open { transform: rotate(180deg); }

/* Brief J point 3 — section lecture seule (pas de bouton d'action, pas de
   toggle par ligne), séparateur fin entre les 2 sous-sections. */
[data-theme="direction"] .faw-collapsible { padding: 4px 16px 12px; background: #fbfbfc; border-bottom: 1px solid var(--border); }
[data-theme="direction"] .faw-collapsible-section { padding: 8px 0; }
[data-theme="direction"] .faw-collapsible-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 6px; }
[data-theme="direction"] .faw-collapsible-sep { height: 1px; background: var(--border); margin: 0; }
[data-theme="direction"] .faw-collapsible-vide { padding: 10px 0; font-size: 12px; color: var(--text-muted); }

/* Colonnes Nature 8% / Enfant 28% / Créneau 14% / Présence 18% /
   Commentaire-Reco 20% / Action 12% (brief). Fix — unités fr (pas %) : des
   pourcentages purs ignorent le gap dans le calcul des pistes, la somme
   100% + 5×8px de gap dépassait la largeur réelle de la ligne et poussait
   la dernière colonne (Action) hors cadre — fr répartit l'espace après
   soustraction des gaps, dans les mêmes proportions. */
[data-theme="direction"] .faw-row {
    display: grid; grid-template-columns: 8fr 28fr 14fr 18fr 20fr 12fr;
    align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #f1f5f9;
}
[data-theme="direction"] .faw-day-card-rows .faw-row:last-child { border-bottom: none; }
[data-theme="direction"] .faw-col-nature { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
[data-theme="direction"] .faw-position { font-size: 11px; font-weight: 700; color: var(--text-muted); }
[data-theme="direction"] .faw-col-enfant { display: flex; align-items: center; gap: 8px; min-width: 0; }
[data-theme="direction"] .faw-col-creneau { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-theme="direction"] .faw-col-presence { min-width: 0; display: flex; align-items: center; gap: 6px; }
/* Brief N — loupe détail journée (vue Demandes) : à côté des KPI Arr/Pic/Dép
   quand présents (.faw-col-presence en flex ci-dessus les met déjà côte à
   côte), seule sinon. Même gabarit compact que .faw-updown .icon-btn. */
[data-theme="direction"] .faw-col-presence .faw-loupe { width: 26px; height: 26px; flex-shrink: 0; }
/* Brief #9 — colonne Présence (lignes sans KPI Arr/Pic/Dép individuel :
   Ann. résa/Ann. abs./Attente) : 3 box KPI journée compactes à la place
   d'une icône générique "voir la journée" — situation du jour visible
   directement dans la ligne, sans clic. Mêmes couleurs que
   .detail-modal-impact-box (toggles détail), format condensé inline. */
[data-theme="direction"] .faw-kpi-mini { display: flex; gap: 4px; }
[data-theme="direction"] .faw-kpi-mini-box {
    display: flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; border-radius: 6px; padding: 0 4px;
    font-size: 11px; font-weight: 800; cursor: default;
}
[data-theme="direction"] .faw-kpi-mini-capacite { background: #fff4cf; color: #b88618; }
[data-theme="direction"] .faw-kpi-mini-absence { background: #f1edff; color: #7c5ce7; }
[data-theme="direction"] .faw-kpi-mini-dispo { background: #e9f5fd; color: #2684c7; }
[data-theme="direction"] .faw-col-reco { min-width: 0; }
[data-theme="direction"] .faw-col-action { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }
[data-theme="direction"] .faw-col-action .dash-actions-action { flex-wrap: wrap; justify-content: flex-end; }
[data-theme="direction"] .faw-col-action .btn-valider-action,
[data-theme="direction"] .faw-col-action .btn-refuser-action { font-size: 12px; padding: 5px 12px; }
/* Fix — boutons Valider/Refuser (Ann. abs. notamment, colonne Reco plus
   haute que la colonne Action) recentrés verticalement dans leur cellule. */
[data-theme="direction"] .faw-col-action { align-items: center; align-self: center; }
[data-theme="direction"] .faw-col-action .dash-actions-action { align-items: center; }
/* Fix — les boutons Valider/Refuser débordaient à droite (item de grille
   min-width:auto par défaut, refuse de rétrécir sous la largeur de son
   contenu) : min-width:0 laisse la cellule respecter réellement la piste
   de 12%/12fr, overflow:hidden en garde-fou visuel. */
[data-theme="direction"] .faw-col-action { min-width: 0; overflow: hidden; }

/* Fix — ligne de titres de colonnes (affichée une fois, 1re box jour) :
   même grille .faw-row, typographie de th (cf. .dash-actions-table th). */
[data-theme="direction"] .faw-row-titles {
    background: #f7f8fa; border-bottom: 1px solid var(--border);
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
    color: var(--text-muted); padding-top: 8px; padding-bottom: 8px;
}
[data-theme="direction"] .faw-row-titles .faw-col-action { justify-content: flex-end; }

/* Fix — section collapsible : mêmes lignes .faw-row que la file active,
   toute la ligne grisée (lecture seule, aucune action possible). */
[data-theme="direction"] .faw-row-muted { opacity: .55; }
[data-theme="direction"] .faw-row-muted:hover { opacity: .55; }

/* Badge Nature — bordure gauche colorée (brief), plutôt que le fond plein
   des .dash-pill-nature-* existants (réservés à "Actions auto"/"Récemment
   traité", inchangés). */
[data-theme="direction"] .faw-badge { border-radius: 4px; border-left: 3px solid; padding: 3px 8px 3px 7px; }
[data-theme="direction"] .faw-badge-resa { background: #dbeafe; color: #1e3a8a; border-left-color: #1e3a8a; }
[data-theme="direction"] .faw-badge-attente { background: #f1f5f9; color: var(--text-secondary); border-left-color: #94a3b8; }
[data-theme="direction"] .faw-badge-annulation-resa { background: #ffedd5; color: #9a3412; border-left-color: #ea580c; }
[data-theme="direction"] .faw-badge-annulation-absence { background: #ede4f5; color: #6b21a8; border-left-color: #8e44ad; }
/* Fix — badges de la section collapsible, même style compact (bordure
   gauche) que les badges Nature actifs ci-dessus. */
[data-theme="direction"] .faw-badge-absence-declaree { background: #f1f5f9; color: var(--text-secondary); border-left-color: #94a3b8; }
[data-theme="direction"] .faw-badge-validee { background: #d1fae5; color: #166534; border-left-color: #16a34a; }

/* Poignée de glisser-déposer (desktop, >1024px) — seule draggable, pas la
   ligne entière (n'interfère pas avec les clics sur les boutons/KPI
   présence). Remplacée par les boutons ↑/↓ en dessous de 1024px, la
   tablette étant la seule largeur restante pour ce widget hors du bloc
   mobile dédié (.dash-mobile-dashboard, non touché par ce brief).
   Brief #3 — couleur or #c9a84c (au lieu de gris) : le handle passait
   inaperçu, confondu avec un élément décoratif plutôt qu'une vraie poignée
   de réordonnancement. */
[data-theme="direction"] .faw-drag-handle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px; color: #c9a84c; cursor: grab; flex-shrink: 0;
}
[data-theme="direction"] .faw-drag-handle:hover { background: #fdf6e3; color: #b8963e; }
[data-theme="direction"] .faw-updown { display: none; flex-shrink: 0; gap: 2px; }
[data-theme="direction"] .faw-updown .icon-btn { width: 26px; height: 26px; color: #c9a84c; }
[data-theme="direction"] .faw-updown .icon-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
/* Brief #3 — numéro de priorité (#1, #2…) assorti à la couleur du handle :
   les deux ensemble signalent "cette ligne se glisse-dépose", cohérent avec
   la nouvelle mise en évidence ci-dessus. */
[data-theme="direction"] .faw-position { color: #c9a84c; font-weight: 800; }
/* Brief #3 — colonne Action : largeur identique quelle que soit la ligne
   (Ann. résa/Ann. abs. sans réordonnancement vs file numérotée avec
   handle+↑/↓) — sans ça, les boutons Valider/Refuser n'étaient pas alignés
   verticalement d'une ligne à l'autre (le handle/↑↓ grignotait l'espace
   disponible différemment selon la ligne, dans la même colonne de grille à
   largeur fixe). Réservée sur TOUTES les lignes, vide quand non applicable
   (space-reservation, pas juste visibility:hidden — évite tout décalage
   même infime). Largeur = le plus large des deux widgets mutuellement
   exclusifs (.faw-updown, 2×26px+gap ≈ 54px), qu'ils s'affichent ou non
   selon la largeur d'écran (cf. @media 1024px plus bas). */
[data-theme="direction"] .faw-col-reorder { flex: 0 0 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
/* Brief "Correctifs dashboard fil d'action" #3 — numéro de priorité déplacé
   depuis .faw-col-nature (badge Resa/Attente) vers .faw-col-reorder, sous
   l'icône de poignée : les deux informations (poignée + rang) doivent être
   lues ensemble, pas dispersées dans 2 colonnes différentes de la ligne. */
[data-theme="direction"] .faw-col-reorder .faw-position { font-size: 10px; line-height: 1; }

@media (max-width: 1200px) {
    [data-theme="direction"] .faw-row { grid-template-columns: 10fr 26fr 16fr 16fr 20fr 12fr; }
}
@media (max-width: 1024px) {
    [data-theme="direction"] .faw-drag-handle { display: none; }
    [data-theme="direction"] .faw-updown { display: flex; }
}

[data-theme="direction"] .dash-agenda-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(13,27,62,.06); }
[data-theme="direction"] .dash-agenda-head { background: #0d1b3e; padding: 16px 20px; }
[data-theme="direction"] .dash-agenda-head h3 { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 16px; margin: 0; line-height: 1.25; }

/* Retour utilisateur — mini-calendrier 5 jours (remplace "Prochains points
   d'attention" texte) : .cal-grid/.cal-cell réutilisés tels quels (même
   visuel que la vue Calendrier), juste le padding horizontal de la carte
   qui manque hors contexte .dir-content. */
[data-theme="direction"] .dash-mini-cal { padding: 14px 20px 0; margin-bottom: 0; }
/* Bug 8 (lot bugs post-tests) : le mini-calendrier dashboard réutilise
   .cal-cell tel quel, y compris les teintes d'événement etat-liste/
   etat-demande/etat-absence (violet/rose/tan) — pertinentes en pleine page
   Calendrier, mais dans ce widget compact "vue d'ensemble" elles masquent à
   tort le vert "dispo" d'un jour dont la capacité est en réalité disponible,
   dès qu'une simple demande/absence existe ce jour-là. Neutralisées ici
   uniquement : ce widget reste piloté par le remplissage réel
   (.cal-cell-figure.rempl-*, inchangé), pas par les événements. */
[data-theme="direction"] .dash-mini-cal .cal-cell.etat-liste,
[data-theme="direction"] .dash-mini-cal .cal-cell.etat-demande,
[data-theme="direction"] .dash-mini-cal .cal-cell.etat-absence {
    background: #fff;
    border-color: var(--border);
}

/* Bug 9 (lot bugs post-tests) : mini-calendrier dashboard agrandi (~25%) —
   scopé à .dash-mini-cal uniquement pour ne pas affecter la grille mensuelle
   de la page Calendrier, qui partage les mêmes classes .cal-cell-*. */
[data-theme="direction"] .dash-mini-cal.cal-grid { gap: 8px; }
[data-theme="direction"] .dash-mini-cal .cal-cell { min-height: 100px; }
/* Brief H point 4 — "Lundi 24/08" (jour en toutes lettres) ne tient plus
   dans le rond 22px d'origine : pastille auto-largeur avec padding. */
[data-theme="direction"] .dash-mini-cal .cal-cell-num { width: auto; height: 20px; padding: 0 7px; font-size: 11px; border-radius: 10px; white-space: nowrap; }
[data-theme="direction"] .dash-mini-cal .cal-ind { width: 19px; height: 19px; }
[data-theme="direction"] .dash-mini-cal .cal-ind svg { width: 11px; height: 11px; }
[data-theme="direction"] .dash-mini-cal .cal-cell-body { padding: 4px 10px 9px; }
[data-theme="direction"] .dash-mini-cal .cal-cell-figure { font-size: 19px; }
[data-theme="direction"] .dash-mini-cal .cal-cell-bar { height: 4px; margin: 6px auto; }
[data-theme="direction"] .dash-mini-cal .cal-cell-subtext { font-size: 12px; }
/* Ajustement dashboard — bloc compact "Prochains points d'attention"
   (remplace les cards "7 prochains jours", 120-150px visés hors header). */
[data-theme="direction"] .dash-attention-list { padding: 8px 12px; max-height: 150px; overflow-y: auto; }
[data-theme="direction"] .dash-attention-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 10px; border: none; background: none; border-radius: 8px;
    text-align: left; font-family: var(--font); font-size: 13px; color: var(--text); cursor: pointer;
}
[data-theme="direction"] .dash-attention-item:hover { background: #f8fafc; }
[data-theme="direction"] .dash-attention-chevron { margin-left: auto; color: var(--text-muted); flex-shrink: 0; }
[data-theme="direction"] .dash-attention-vide { padding: 14px 10px; font-size: 13px; color: var(--text-muted); }

[data-theme="direction"] .dash-agenda-evt-ico {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
[data-theme="direction"] .dash-agenda-evt-gold { background: #fef3c7; color: #c9a84c; }
[data-theme="direction"] .dash-agenda-evt-purple { background: #ede4f5; color: #8e44ad; }
[data-theme="direction"] .dash-agenda-evt-blue { background: #dbeafe; color: #3498db; }

[data-theme="direction"] .dash-widget { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(13,27,62,.06); }
[data-theme="direction"] .dash-widget-head { background: #0d1b3e; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; }
[data-theme="direction"] .dash-widget-head h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0; color: #fff; line-height: 1.25; }
[data-theme="direction"] .dash-widget-body { padding: 6px 20px 16px; }
[data-theme="direction"] .dash-widget-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #f1f5f9; font-size: 13px; color: var(--text-secondary); line-height: 1.3; }
[data-theme="direction"] .dash-widget-row:first-child { border-top: none; }
[data-theme="direction"] .dash-widget-ico { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
[data-theme="direction"] .dash-widget-ico-gold { background: #fef3c7; color: #c9a84c; }
[data-theme="direction"] .dash-widget-ico-blue { background: #dbeafe; color: #3498db; }
[data-theme="direction"] .dash-widget-ico-green { background: #d1fae5; color: #27ae60; }
[data-theme="direction"] .dash-widget-ico-purple { background: #ede4f5; color: #8e44ad; }
[data-theme="direction"] .dash-widget-label { flex: 1; }
[data-theme="direction"] .dash-widget-row strong { color: var(--text); font-size: 13px; font-weight: 700; flex-shrink: 0; }
[data-theme="direction"] .dash-widget-progress-row { padding: 10px 0; border-top: 1px solid #f1f5f9; }
[data-theme="direction"] .dash-widget-progress-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; line-height: 1.3; }
[data-theme="direction"] .dash-widget-progress-head strong { color: var(--text); font-weight: 700; }
[data-theme="direction"] .dash-widget-progress-track { height: 6px; border-radius: 3px; background: #f1f5f9; overflow: hidden; }
[data-theme="direction"] .dash-widget-progress-fill { height: 100%; border-radius: 3px; }
[data-theme="direction"] .dash-widget-progress-green { background: #27ae60; }
[data-theme="direction"] .dash-widget-progress-purple { background: #8e44ad; }

/* ── Refonte dashboard V2 — shell : sidebar pleine hauteur + topbar séparé ──
   .app-header (logo + sélecteur + burger, plus haut dans le HTML) reste la
   présentation MOBILE, cachée ici en desktop — .dir-sidebar/.dir-topbar la
   remplacent uniquement ≥769px. Bascule inverse dans le @media ci-dessous. */
[data-theme="direction"] body { background: #f8fafc; }
[data-theme="direction"] .app-header { display: none; }
[data-theme="direction"] .dir-mobile-tabs { display: none; }
/* Brief B — Dashboard mobile (4 sections empilées + nav sticky) : masqué en
   desktop par défaut, réaffiché uniquement dans le @media (max-width:768px)
   ci-dessous, même convention que .app-header/.dir-mobile-tabs. */
[data-theme="direction"] .faw-mobile { display: none; }
/* Brief B-fix — titre de section (vue Demandes) et bouton flottant "+" :
   mobile uniquement, même convention par défaut masquée. */
[data-theme="direction"] .dir-gestion-tab-titre { display: none; }
[data-theme="direction"] .mobile-fab-wrap { display: none; }
/* Fix — ces 5 règles vivaient plus loin dans le fichier (après la fermeture
   de la media query mobile principale, ~L660-1335) : à spécificité égale,
   une règle non scopée déclarée APRÈS une règle scopée l'emporte dans la
   cascade quel que soit le viewport — leurs display:none écrasaient
   silencieusement le display:flex/inline-flex mobile correspondant,
   masquant en permanence le bouton "Filtrer", "Se déconnecter", le footer
   sticky Valider/Refuser, le contenu enrichi de la modale détail demande et
   la bottom nav bar entière. Remontées ici, dans la même section que les
   autres "masqué par défaut, réaffiché en mobile" déjà correctement
   placées avant la media query. */
[data-theme="direction"] .gestion-filtrer-btn {
    display: none; align-items: center; gap: 6px;
    background: #fff; border: 1px solid var(--border); border-radius: 10px;
    font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--text);
    padding: 8px 14px; cursor: pointer; margin-bottom: 16px;
}
[data-theme="direction"] .dir-bottom-nav { display: none; }
/* Brief — vue Demandes mobile simplifiée : 2 boutons de création, masqués
   par défaut (desktop), réaffichés uniquement en mobile ci-dessous. */
[data-theme="direction"] .gestion-mobile-simple { display: none; }
/* Fix (harmonisation desktop) — le contenu enrichi de la modale détail
   demande (header navy/meta/alerte/impact/arrpicdep/footer Valider-Refuser)
   n'est plus mobile-only : stylé pour le desktop juste en dessous (mêmes
   couleurs que mobile), donc plus dans la liste "masqué par défaut,
   réaffiché en mobile" ci-dessus. L'ancien titre h3 desktop
   (.detail-modal-title-desktop) devient inutile (doublon avec le nouveau
   header) et passe à son tour masqué par défaut. */
[data-theme="direction"] .modal-box .detail-modal-title-desktop { display: none; }

/* Fix — harmonisation modale détail demande DESKTOP avec le style mobile
   déjà en place (mêmes couleurs partout, valeurs dupliquées depuis le bloc
   mobile équivalent — @media (max-width:768px) non modifié, contrainte de
   ce brief). .modal-box (app.css) garde son padding 24px 20px sur les deux
   tailles d'écran, donc la même astuce de "bleed" (marge négative) marche
   à l'identique ici. */
[data-theme="direction"] .modal-box-detail-demande { position: relative; }
[data-theme="direction"] .modal-box-detail-demande .modal-close {
    position: absolute; top: 17px; right: 14px; float: none;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border-radius: 50%;
    background: rgba(255,255,255,.15); color: #fff;
}
[data-theme="direction"] .modal-box-detail-demande .modal-close::after { content: none; }
[data-theme="direction"] .detail-modal-header {
    display: flex; align-items: center; gap: 10px;
    margin: -24px -20px 16px -20px; padding: 16px 44px 16px 20px;
    background: var(--primary);
    border-radius: 16px 16px 0 0;
    min-height: 68px; box-sizing: border-box;
}
[data-theme="direction"] .detail-modal-header-id { min-width: 0; }
[data-theme="direction"] .detail-modal-header-nom { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.3; }
[data-theme="direction"] .detail-modal-header-parent { font-size: 12px; color: rgba(255,255,255,.7); }
[data-theme="direction"] .detail-modal-meta {
    display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
[data-theme="direction"] .detail-modal-meta span { display: flex; align-items: center; gap: 6px; }
[data-theme="direction"] .detail-modal-meta svg { color: var(--text-muted); }
[data-theme="direction"] .detail-modal-alerte { display: block; margin-bottom: 16px; }
[data-theme="direction"] .detail-modal-alerte .dash-pill-warn { background: #fff2c7; color: #9a5c00; border-radius: 999px; border: none; }
[data-theme="direction"] .detail-modal-alerte p { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
[data-theme="direction"] .detail-modal-impact { display: block; margin-bottom: 18px; }
[data-theme="direction"] .detail-modal-impact-titre { font-size: 12px; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
[data-theme="direction"] .detail-modal-impact-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
[data-theme="direction"] .detail-modal-impact-box {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: #f7f8fa; border-radius: 10px; padding: 12px 4px;
    text-align: center;
}
[data-theme="direction"] .detail-modal-impact-box svg { width: 16px; height: 16px; padding: 7px; border-radius: 50%; box-sizing: content-box; }
[data-theme="direction"] .detail-modal-impact-box:nth-child(1) svg { color: #b88618; background: #fff4cf; }
[data-theme="direction"] .detail-modal-impact-box:nth-child(2) svg { color: #2563eb; background: #eaf2ff; }
[data-theme="direction"] .detail-modal-impact-box:nth-child(3) svg { color: #7c5ce7; background: #f1edff; }
[data-theme="direction"] .detail-modal-impact-box:nth-child(4) svg { color: #24965e; background: #e8f8ef; }
[data-theme="direction"] .detail-modal-impact-box:nth-child(5) svg { color: #2684c7; background: #e9f5fd; }
[data-theme="direction"] .detail-modal-impact-box strong { font-size: 16px; color: var(--primary); margin-top: 2px; }
[data-theme="direction"] .detail-modal-impact-box span { font-size: 10px; color: var(--text-muted); font-weight: 600; line-height: 1.2; }
[data-theme="direction"] .detail-modal-arrpicdep { margin-bottom: 18px; }
[data-theme="direction"] .detail-modal-arrpicdep .presence-row { justify-content: center; margin: 0; }
[data-theme="direction"] .detail-modal-synthese-titre { display: block; font-size: 12px; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
[data-theme="direction"] .table-detail-journee td.cell-auto { background: #dcf5e7; color: #198754; }
[data-theme="direction"] .table-detail-journee td.cell-palier { background: #fff0df; color: #c35f00; font-weight: 700; }
/* Footer Valider/Refuser — normal flow (pas de position:fixed/sticky : le
   modal desktop centré n'a pas la contrainte viewport du mobile), même
   couleurs que mobile, scopé au footer (les classes restent outline
   navy/rouge partout ailleurs dans l'app). */
[data-theme="direction"] .modal-footer-sticky {
    display: flex; gap: 10px;
    background: #fff; border-top: 1px solid #e2e8f0;
    padding: 16px 0 0; margin-top: 6px;
}
[data-theme="direction"] .modal-footer-sticky .btn-valider-action,
[data-theme="direction"] .modal-footer-sticky .btn-refuser-action { flex: 1; min-height: 42px; }
[data-theme="direction"] .modal-footer-sticky .btn-valider-action {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
[data-theme="direction"] .modal-footer-sticky .btn-valider-action:hover,
[data-theme="direction"] .modal-footer-sticky .btn-valider-action:active { background: #16295c; border-color: #16295c; }
[data-theme="direction"] .modal-footer-sticky .btn-refuser-action {
    background: #fff; border-color: #dc3d32; color: #dc3d32;
}
[data-theme="direction"] .modal-footer-sticky .btn-refuser-action:hover { background: #fff3f2; }

/* Brief — Refonte modale "Détail journée" (calendrier) : header navy même
   recette que .detail-modal-header (bleed sur le padding 24px 20px de
   .modal-box), close button même recette que .modal-box-detail-demande —
   dupliqué plutôt que partagé (convention déjà en place dans ce projet).
   max-width élargi (720px, au lieu des 520px par défaut de .modal-box) :
   la grille .faw-row à 6 colonnes (Nature/Enfant/Créneau/Présence/Reco/
   Action) a besoin de plus de place que le résumé compact d'avant ; sur
   mobile, .cal-day-modal-box (@media plus bas, non touché) reprend la main
   avec width:calc(100vw - 32px). */
[data-theme="direction"] .modal-box-cal-jour { position: relative; max-width: 720px; }
[data-theme="direction"] .modal-box-cal-jour .modal-close {
    position: absolute; top: 17px; right: 14px; float: none;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border-radius: 50%;
    background: rgba(255,255,255,.15); color: #fff;
}
[data-theme="direction"] .modal-box-cal-jour .modal-close::after { content: none; }
[data-theme="direction"] .cal-jour-header {
    display: flex; align-items: center;
    margin: -24px -20px 16px -20px; padding: 16px 44px 16px 20px;
    background: var(--primary);
    border-radius: 16px 16px 0 0;
    min-height: 68px; box-sizing: border-box;
}
[data-theme="direction"] .cal-jour-header-date { font-size: 15px; font-weight: 800; color: #fff; text-transform: capitalize; }
/* Brief — simplification liste événements (modale détail journée calendrier) :
   remplace la grille .faw-row (avatar/présence/boutons) par une ligne plate
   badge + nom + créneau, consultation seule. */
[data-theme="direction"] .cal-event-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 4px; border-bottom: 1px solid #f1f5f9;
}
[data-theme="direction"] .cal-event-list .cal-event-row:last-child { border-bottom: none; }
[data-theme="direction"] .cal-event-row-muted { opacity: .6; }
[data-theme="direction"] .cal-event-nom { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); }
[data-theme="direction"] .cal-event-creneau { font-size: 12px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
/* Enfants accueillis — chips pastel (même esprit que .detail-modal-impact-box). */
[data-theme="direction"] .cal-enfants-grid { display: flex; flex-wrap: wrap; gap: 8px; }
[data-theme="direction"] .cal-enfant-chip {
    display: flex; align-items: center; gap: 8px;
    background: #f7f8fa; border-radius: 10px; padding: 8px 12px;
}
[data-theme="direction"] .dir-shell { min-height: 100vh; }
[data-theme="direction"] .dir-sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 240px;
    height: 100vh;
    background: #0d1b3e;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 18px 12px;
    overflow-y: auto;
    z-index: 30;
}
[data-theme="direction"] .dir-sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 8px 14px; margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
[data-theme="direction"] .dir-sidebar-logo { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
[data-theme="direction"] .dir-sidebar-brand-name { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.25; }
[data-theme="direction"] .dir-sidebar-brand-tagline { font-size: 9px; font-weight: 600; letter-spacing: .04em; color: #c9a84c; text-transform: uppercase; margin-top: 2px; }

[data-theme="direction"] .dir-page { margin-left: 240px; min-height: 100vh; display: flex; flex-direction: column; }
[data-theme="direction"] .dir-topbar {
    background: #0d1b3e;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 20;
}
[data-theme="direction"] .dir-content { flex: 1; padding: 24px 28px 40px; }

[data-theme="direction"] .dir-topbar-structure-wrap { position: relative; margin-right: auto; }
[data-theme="direction"] .dir-topbar-structure {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.05);
    color: #fff; font-family: var(--font); font-size: 13px; font-weight: 600;
    cursor: default;
}
[data-theme="direction"] .dir-topbar-structure.clickable { cursor: pointer; }
[data-theme="direction"] .dir-topbar-structure.clickable:hover { background: rgba(255,255,255,.09); }
[data-theme="direction"] .dir-topbar-user { display: flex; align-items: center; gap: 12px; }
[data-theme="direction"] .dir-topbar-username { color: #fff; font-family: var(--font); font-size: 13px; font-weight: 600; }
/* Brief H point 2 — lien texte simple plutôt que le bouton icône rond
   (peu clair, retour utilisateur), même position à côté du nom. */
[data-theme="direction"] .dir-topbar-logout-link {
    color: #94a3b8; font-family: var(--font); font-size: 13px; font-weight: 600;
    text-decoration: underline; cursor: pointer; flex-shrink: 0;
}
[data-theme="direction"] .dir-topbar-logout-link:hover { color: #fff; }

[data-theme="direction"] .dir-sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
[data-theme="direction"] .dir-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0 8px 8px 0;
    background: none;
    text-align: left;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
[data-theme="direction"] .dir-sidebar-link:hover { background: rgba(255,255,255,.06); color: #fff; }
[data-theme="direction"] .dir-sidebar-link.active { background: rgba(201,168,76,.14); color: #c9a84c; border-left-color: #c9a84c; font-weight: 700; }
[data-theme="direction"] .dir-sidebar-icon { flex-shrink: 0; }
/* Brief F.6 — masquer Communication/Rapports (desktop sidebar + menu mobile
   bottom-tabs), sans toucher navItems() (direction.js) ni le template x-for
   qui les génère : ciblés via l'icône (unique par item) plutôt qu'un
   attribut dédié, pour rester purement CSS comme demandé. */
[data-theme="direction"] .dir-sidebar-link:has(use[href="#icon-message-square"]),
[data-theme="direction"] .dir-sidebar-link:has(use[href="#icon-bar-chart-3"]),
[data-theme="direction"] .dir-mobile-tab:has(use[href="#icon-message-square"]),
[data-theme="direction"] .dir-mobile-tab:has(use[href="#icon-bar-chart-3"]) { display: none; }
/* Retour utilisateur — sous-menu accordéon "Demandes" : chevron qui
   pivote quand la vue Demandes est active, sous-liens indentés sous
   l'entrée parente, visibles uniquement dans ce cas (cf. x-if côté HTML,
   pas juste masqués en CSS). */
[data-theme="direction"] .dir-sidebar-chevron { flex-shrink: 0; margin-left: auto; transition: transform .15s ease; }
[data-theme="direction"] .dir-sidebar-chevron-open { transform: rotate(180deg); }
[data-theme="direction"] .dir-sidebar-submenu { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px 34px; }
[data-theme="direction"] .dir-sidebar-sublink {
    display: block; width: 100%; padding: 6px 10px; border: none; border-radius: 6px;
    background: none; text-align: left; font-family: var(--font); font-size: 12px;
    font-weight: 500; color: #94a3b8; cursor: pointer; transition: background .15s ease, color .15s ease;
}
[data-theme="direction"] .dir-sidebar-sublink:hover { background: rgba(255,255,255,.06); color: #fff; }
[data-theme="direction"] .dir-sidebar-sublink.active { background: rgba(201,168,76,.14); color: #c9a84c; font-weight: 700; }
[data-theme="direction"] .dir-sidebar-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px 4px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.12);
}
[data-theme="direction"] .dir-sidebar-avatar {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #c9a84c;
    color: #0d1b3e;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}
/* Retour utilisateur (Priorité 5) — photo de profil, même gabarit que les
   initiales qu'elle remplace. */
[data-theme="direction"] .dir-sidebar-avatar-img { background: none; object-fit: cover; }

/* Retour utilisateur (Priorité 5) — upload avatar profil / logo structure,
   même mise en page (aperçu + bouton "Changer"). */
[data-theme="direction"] .profil-avatar-row { display: flex; align-items: center; gap: 16px; }
[data-theme="direction"] .profil-avatar-preview {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
    flex-shrink: 0; background: #f1f5f9;
}
[data-theme="direction"] .profil-avatar-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-size: 22px; font-weight: 700;
}
[data-theme="direction"] .profil-avatar-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin-top: 8px; font-size: 12px; padding: 6px 12px; }
[data-theme="direction"] .logo-preview {
    width: 64px; height: 64px; border-radius: 10px; object-fit: contain;
    flex-shrink: 0; background: #f8fafc; border: 1px solid var(--border-light);
}
[data-theme="direction"] .logo-preview-empty { display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-muted); text-align: center; padding: 4px; }
[data-theme="direction"] .dir-sidebar-name { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.3; }
[data-theme="direction"] .dir-sidebar-role { font-size: 12px; color: #94a3b8; line-height: 1.3; }

/* Mobile (≤768px) : bascule inverse — .app-header/.mobile-structure-bar/
   .header-mobile-menu redeviennent la présentation, .dir-sidebar/.dir-topbar
   disparaissent (chantier responsive séparé, comportement mobile inchangé). */
@media (max-width: 768px) {
    /* Brief B-fix — .app-header hérite de .radius-card (app.css, pensé pour
       un header "flottant" desktop) : sur mobile le header est pleine
       largeur en haut de l'écran, les coins arrondis laissaient apparaître
       le fond de page aux 2 coins supérieurs ("coins blancs"). */
    [data-theme="direction"] .app-header { display: flex; border-radius: 0; overflow: hidden; margin-bottom: 0; }
    /* Brief B-fix — sélecteur de structure intégré au bandeau navy (pas une
       carte blanche flottante en dessous) : même fond que .app-header,
       texte + flèche blancs, pas de marge/ombre qui le détache visuellement.
       Brief B-fix2 — !important nécessaire : la règle non scopée par media
       .mobile-structure-bar (~L1790, margin:-8px 0 16px) a la même
       spécificité et est déclarée plus loin dans le fichier, donc l'emportait
       silencieusement malgré cette règle-ci (le "flottement" hors du header
       constaté par l'utilisateur). */
    [data-theme="direction"] .mobile-structure-bar { margin: 0 !important; }
    [data-theme="direction"] .mobile-structure-trigger {
        background: var(--primary);
        color: #fff;
        box-shadow: none;
        border-radius: 0;
        justify-content: center;
        padding: 6px 14px 14px;
    }
    [data-theme="direction"] .mobile-structure-trigger .brand-structure-chevron { color: #fff; }
    [data-theme="direction"] .dir-sidebar { display: none; }
    [data-theme="direction"] .dir-topbar { display: none; }
    [data-theme="direction"] .dir-page { margin-left: 0; }
    [data-theme="direction"] .dir-content { padding: 16px; }
    /* Brief — Fix modales calendrier mobile : garde-fou, empêche tout
       débordement résiduel (modale ou composant interne) de créer un scroll
       horizontal sur toute la page ; les scrolls internes dédiés
       (.dir-mobile-tabs, .planning-semaine-wrap, .table-detail-journee-wrap…)
       restent inchangés, chacun ayant déjà son propre overflow-x:auto. */
    [data-theme="direction"] body { overflow-x: hidden; }
    /* Modale "détail journée" (calendrier gestionnaire) : dépassait la
       largeur d'écran (scroll horizontal sur toute la page). Largeur
       explicitement bornée au viewport plutôt que dépendante du contenu.
       .modal-box-cal-jour (même élément) porte un max-width:720px non scopé
       mobile pour le desktop — !important pour garantir la priorité sur
       mobile quelle que soit la source du conflit. */
    [data-theme="direction"] .cal-day-modal-box,
    [data-theme="direction"] .modal-box-cal-jour {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        left: 16px !important;
        right: 16px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    /* Brief — le tableau "Synthèse de présence" (quart d'heure) dépassait
       aussi, sa propre scrollabilité (.table-detail-journee-wrap, règle de
       base plus bas dans ce fichier) écrasée par un conflit non identifié —
       réaffirmée ici, scopée + !important, pour garantir la priorité dans
       cette modale précise. */
    [data-theme="direction"] .modal-box-cal-jour .table-detail-journee-wrap {
        overflow-x: auto !important;
        max-width: 100% !important;
    }
    /* Brief — lisibilité de la liste événements simplifiée (.cal-event-row)
       sur mobile : noms longs qui ne wrappaient pas naturellement pouvaient
       forcer la ligne (et donc la modale) plus large que l'écran. */
    [data-theme="direction"] .cal-event-nom {
        font-size: 12px;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    [data-theme="direction"] .cal-event-creneau { font-size: 11px; }
    /* Vue enfant — calendrier (Planning semaine) : même débordement ;
       max-width additionnel en garde-fou, le scroll reste interne au wrap. */
    [data-theme="direction"] .planning-semaine-wrap { max-width: 100%; overflow-x: auto; }
    [data-theme="direction"] .planning-semaine-table { min-width: 0; }
    /* Brief — vues Demandes/Absences (gestionTab) mobile : conteneur et
       cartes condensées bornés au viewport. */
    [data-theme="direction"] .dash-actions-card { max-width: 100%; overflow-x: hidden; }
    [data-theme="direction"] .cond-card, [data-theme="direction"] .cond-day-group { max-width: 100%; }
    /* Brief — simplification totale vue Demandes mobile : tabs/filtres/listes
       (.gestion-desktop-content, tout le contenu existant du gestionTab actif)
       masqués, remplacés par 2 boutons de création directe, centrés. */
    [data-theme="direction"] .gestion-desktop-content { display: none; }
    [data-theme="direction"] .gestion-mobile-simple {
        display: flex; flex-direction: column; align-items: center; gap: 14px;
        padding: 48px 20px;
    }
    [data-theme="direction"] .gestion-mobile-simple .btn { width: 100%; max-width: 320px; }
    /* Brief — vue Familles mobile : les flèches/actions (.famille-actions,
       4 boutons flex-shrink:0) dépassaient de l'écran, le bloc nom/email à
       gauche ne rétrécissant jamais (pas de min-width:0). overflow:hidden en
       garde-fou sur le conteneur (brief) + min-width:0 pour que le texte
       cède réellement la place plutôt que de pousser les boutons hors cadre. */
    [data-theme="direction"] .famille-card { overflow: hidden; }
    [data-theme="direction"] .famille-head > div:first-child { min-width: 0; }
    [data-theme="direction"] .famille-name, [data-theme="direction"] .famille-sub { overflow: hidden; text-overflow: ellipsis; }
    [data-theme="direction"] .famille-actions { flex-wrap: wrap; justify-content: flex-end; }
    /* Vue dépliée (clic sur la flèche) — même problème, même fix. */
    [data-theme="direction"] .enfants-list { overflow: hidden; }
    [data-theme="direction"] .mobile-nav-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
    [data-theme="direction"] .mobile-nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px;
        border: none;
        border-radius: 6px;
        background: none;
        text-align: left;
        font-family: var(--font);
        font-size: 13px;
        font-weight: 600;
        color: var(--text-secondary);
        cursor: pointer;
    }
    [data-theme="direction"] .mobile-nav-item:hover { background: #f7fafc; }
    [data-theme="direction"] .mobile-nav-item.active { color: var(--primary); background: #f0f2f7; }
    [data-theme="direction"] .mobile-nav-profile {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        margin-bottom: 4px;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    /* Brief M point 1 — barre de pills sous le header remplacée par la bottom
       nav fixe (.dir-bottom-nav, plus bas dans ce fichier) : masquée plutôt
       que supprimée (navItems()/le HTML restent en place, réutilisables si
       besoin). */
    [data-theme="direction"] .dir-mobile-tabs {
        display: none;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 14px;
        margin: -8px 0 12px;
        scrollbar-width: none;
    }
    [data-theme="direction"] .dir-mobile-tabs::-webkit-scrollbar { display: none; }
    [data-theme="direction"] .dir-mobile-tab {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        padding: 8px 14px;
        border: none;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.1);
        font-family: var(--font);
        font-size: 13px;
        font-weight: 600;
        color: var(--text-secondary);
        cursor: pointer;
        white-space: nowrap;
    }
    [data-theme="direction"] .dir-mobile-tab.active { background: var(--primary); color: #fff; }

    /* Retour utilisateur (chantier mobile, point 1) — simplification
       radicale : sur mobile, le Dashboard gestionnaire = uniquement les
       actions à traiter ("qu'est-ce que je dois faire maintenant ?").
       KPI cards, widgets colonne droite (CA/Pipeline/Familles actives) et
       mini-calendrier "Prochains jours" retirés — réservés au desktop, où
       il y a la place et le contexte pour les lire tranquillement. */
    [data-theme="direction"] .dash-kpi-grid,
    [data-theme="direction"] .dash-widget-toprow,
    [data-theme="direction"] .dash-grid-familles,
    [data-theme="direction"] .dash-grid-agenda { display: none; }
    [data-theme="direction"] .dash-main-grid { display: block; }

    /* File d'actions desktop (tab-switcher + grille .faw-row) remplacée sur
       mobile par .faw-mobile (même concept par jour, cf. plus bas) : masquée
       ici au même titre que les autres widgets desktop-only ci-dessus. */
    [data-theme="direction"] .dash-grid-actions { display: none; }
    [data-theme="direction"] .faw-mobile { display: block; }

    /* File d'actions mobile — 1) les 4 tabs empilés en haut de carte
       prenaient la moitié de l'écran : remplacés par un select unique
       (~40px). 2) le tableau (min-width:720px, scroll horizontal) devient
       une pile de cartes verticales, en repositionnant les <td> existants
       par position (:nth-child) plutôt qu'en dupliquant le markup par
       onglet — l'ordre des colonnes est stable : 1=identité (+ badge statut
       si onglet "demandes"), 2=créneau, 3=KPI/statut, 4=raison/pill,
       5=action. Même DOM/données Alpine, aucune logique métier touchée. */
    [data-theme="direction"] .dash-actions-tabs { display: none; }
    /* Retour utilisateur (chantier mobile, point 2 — validé) : le select
       ("Demandes à valider (4)" + chevron) ne signalait pas qu'il y avait
       PLUSIEURS catégories cachées derrière — remplacé par 4 mini-tabs
       icône + badge, toutes visibles sans interaction (pas de scroll, pas
       besoin d'ouvrir un menu pour découvrir les autres). Icônes seules
       (déjà cohérentes avec le reste de l'app), aria-label complet pour
       l'accessibilité + title natif pour un premier usage moins opaque
       (tooltip au survol/appui long). */
    [data-theme="direction"] .dash-actions-tabs-mobile-icons { display: flex; gap: 8px; margin-bottom: 8px; }
    [data-theme="direction"] .dash-tab-mini {
        flex: 1 1 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        height: 40px;
        border: 1.5px solid rgba(255,255,255,.3);
        border-radius: 10px;
        background: rgba(255,255,255,.08);
        color: #cbd5e1;
        cursor: pointer;
    }
    [data-theme="direction"] .dash-tab-mini svg { width: 15px; height: 15px; }
    [data-theme="direction"] .dash-tab-mini.active { background: rgba(201,168,76,.2); border-color: #c9a84c; color: #fff; }
    /* Badge à 0 : légèrement grisé, cette catégorie n'a rien à traiter. */
    [data-theme="direction"] .dash-tab-mini.dash-tab-mini-empty { opacity: .5; }
    [data-theme="direction"] .dash-tab-mini-badge { font-size: 10px; font-weight: 700; line-height: 1; }
    [data-theme="direction"] .dash-tab-mini.active .dash-tab-mini-badge { color: #c9a84c; }

    /* Retour utilisateur (suite chantier mobile, point 2) — 6 onglets de la
       vue Demandes : même composant .dash-tab-mini que le Dashboard, réutilisé
       tel quel (icône/badge/layout), mais avec un thème clair (le Dashboard
       est sur fond navy, cette zone est sur fond page blanc) et largeur fixe +
       scroll horizontal au lieu d'un partage égal en 4 — 6 tabs ne tiendraient
       pas sur une largeur d'écran mobile sans ça. */
    /* Brief B-fix2 — !important nécessaire : la règle .dir-tabs non scopée
       par media (~L1899, display:flex) a la même spécificité et est déclarée
       plus loin dans le fichier, donc l'emportait silencieusement malgré ce
       display:none (libellés texte affichés en double avec les icônes). */
    [data-theme="direction"] .dir-tabs { display: none !important; }
    [data-theme="direction"] .dir-tabs-mobile-icons {
        display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
        margin-bottom: 14px; padding-bottom: 2px; scrollbar-width: none;
    }
    [data-theme="direction"] .dir-tabs-mobile-icons::-webkit-scrollbar { display: none; }
    [data-theme="direction"] .dir-tabs-mobile-icons .dash-tab-mini {
        flex: 0 0 auto; width: 48px;
        border: 1.5px solid var(--border-light);
        background: #fff;
        color: var(--text-muted);
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }
    [data-theme="direction"] .dir-tabs-mobile-icons .dash-tab-mini.active { background: #0d1b3e; border-color: #0d1b3e; color: #fff; }
    [data-theme="direction"] .dir-tabs-mobile-icons .dash-tab-mini-badge { color: inherit; }
    [data-theme="direction"] .dir-tabs-mobile-icons .dash-tab-mini.active .dash-tab-mini-badge { color: #c9a84c; }

    /* Légende masquée sur mobile : elle explique la colonne "Raison", elle-
       même déjà masquée sur mobile (nth-child(4), cf. règle plus bas). */
    [data-theme="direction"] .dash-actions-legende { display: none; }

    [data-theme="direction"] .dash-actions-table-wrap { overflow-x: visible; max-height: 65vh; padding: 4px 12px 0; }
    [data-theme="direction"] .dash-actions-table { min-width: 0; }
    [data-theme="direction"] .dash-actions-table thead { display: none; }
    [data-theme="direction"] .dash-actions-table tbody { display: block; }
    /* Retour utilisateur : carte mobile commune Dashboard/Demandes — la
       ligne (tr) passe en flex-wrap plutôt que block, pour que la date/
       créneau (colonne 2) et le KPI (colonne 3) partagent la même ligne
       au lieu d'empiler 3 lignes distinctes. La colonne identité (1) grandit
       pour occuper toute la largeur disponible (flex-grow), ce qui pousse
       naturellement les colonnes suivantes à la ligne d'après (pas besoin
       de forcer un saut de ligne explicite). */
    /* Retour utilisateur (chantier mobile, point 3) — carte épurée :
       espacement vertical resserré (padding/gap/margin réduits, viser
       -30% de hauteur totale par carte), et un SEUL badge de statut au
       lieu de deux qui se répétaient ("Validation requise" en colonne 1
       + "Seuil 12→13 enfants" en colonne 4) — le badge "Seuil X→Y" garde
       l'info utile (dashboardRaisonBadge()) et devient visible, le badge
       générique statutAffiche() ("Validation requise") est retiré :
       la présence même des boutons Valider/Refuser l'implique déjà. */
    [data-theme="direction"] .dash-actions-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 8px;
        row-gap: 4px;
        background: #fff;
        border: 1px solid #f1f5f9;
        border-radius: 10px;
        padding: 8px 10px;
        margin-bottom: 6px;
    }
    [data-theme="direction"] .dash-actions-table tbody tr:last-child { margin-bottom: 0; }
    [data-theme="direction"] .dash-actions-table td,
    [data-theme="direction"] .dash-actions-table-dense td {
        display: block;
        height: auto;
        padding: 0;
        border-bottom: none;
    }
    /* Ligne 1 : identité seule (occupe toute la largeur — force le saut de
       ligne suivant). Le badge statutAffiche() qui s'y affichait
       (redondant avec la colonne 4) est retiré. */
    [data-theme="direction"] .dash-actions-table tbody td:nth-child(1) { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex: 1 1 100%; }
    [data-theme="direction"] .dash-actions-statut-mobile { display: none; }
    /* Ligne 2 : date/créneau, KPI et badge "Seuil X→Y" sur la même ligne
       (poussés à droite), plus compacts qu'avant. */
    [data-theme="direction"] .dash-actions-table tbody td:nth-child(2) { flex: 0 1 auto; font-size: 11px; color: var(--text-muted); }
    [data-theme="direction"] .dash-actions-table tbody td:nth-child(3) { flex: 0 1 auto; margin-left: auto; }
    [data-theme="direction"] .dash-actions-table tbody td:nth-child(3) .dmd-presence-row .presence-item { min-width: 24px; padding: 1px 3px; }
    [data-theme="direction"] .dash-actions-table tbody td:nth-child(3) .dmd-presence-row .presence-item .nb { font-size: 11px; }
    [data-theme="direction"] .dash-actions-table tbody td:nth-child(3) .dmd-presence-row .presence-item .lb { font-size: 7px; }
    /* Ligne 3 : actions plein largeur côte à côte. Valider/Refuser sont
       désormais tous deux visibles en permanence (plus de menu ⌄), scopé à
       .dash-actions-table (Dashboard) — .dash-actions-chevron/.dash-actions-
       dropdown restent utilisés tels quels par la vue Liste d'attente. */
    [data-theme="direction"] .dash-actions-table tbody td:nth-child(5) { flex: 1 1 100%; }
    [data-theme="direction"] .dash-actions-table .dash-actions-action { width: 100%; }
    [data-theme="direction"] .dash-actions-table .btn-valider-action,
    [data-theme="direction"] .dash-actions-table .btn-refuser-action { flex: 1; }

    /* Brief G — la colonne Nature ajoutée en tête sur "À valider"/"Actions
       auto"/"Récemment traité" change le nombre de colonnes : plutôt que
       ré-accorder toute la chorégraphie nth-child ci-dessus (pensée pour
       l'ancien nombre de colonnes de chaque onglet), ces 3 onglets repassent
       en empilement simple (chaque cellule pleine largeur, dans l'ordre du
       tableau) — moins dense que l'ancien agencement à 2-3 cellules par
       ligne, mais robuste au nouveau nombre de colonnes, quel qu'il soit.
       :nth-child(n) matche toutes les cellules ; même poids de spécificité
       que les règles génériques ci-dessus (classe + pseudo-classe), donc
       l'ordre (après, dans ce fichier) suffit à les emporter sans !important.
       "Liste d'attente" (colonnes inchangées) continue d'utiliser la
       chorégraphie générique telle quelle. */
    [data-theme="direction"] .dash-actions-table-demandes tbody td:nth-child(n),
    [data-theme="direction"] .dash-actions-table-actionsAuto tbody td:nth-child(n),
    [data-theme="direction"] .dash-actions-table-recent tbody td:nth-child(n) {
        display: block; flex: 1 1 100%; margin-left: 0; font-size: 12px; color: var(--text);
    }
    [data-theme="direction"] .dash-actions-table-demandes tbody td:nth-child(1),
    [data-theme="direction"] .dash-actions-table-actionsAuto tbody td:nth-child(1),
    [data-theme="direction"] .dash-actions-table-recent tbody td:nth-child(1) { margin-bottom: 2px; }
    [data-theme="direction"] .dash-actions-table-demandes .dash-actions-action,
    [data-theme="direction"] .dash-actions-table-actionsAuto .dash-actions-action { width: 100%; }

    /* Retour utilisateur — BUG : à ≤1200px (règle plus haut dans ce fichier)
       .dmd-row passait déjà en 3 colonnes fractionnaires (1.6fr/1.2fr/1fr)
       sans jamais repasser en carte empilée sous 768px — sur mobile, nom et
       date se partageaient 2 colonnes trop étroites et débordaient l'une sur
       l'autre (texte qui se chevauche). Remplacé ici par le même patron flex-
       wrap que .dash-actions-table ci-dessus (carte mobile commune Dashboard/
       Demandes) : identité en pleine largeur (force le saut de ligne), badge
       statut repositionné sur cette même ligne 1 via order (élément déjà
       existant, pas de nouveau markup), date + KPI sur la ligne 2, actions
       en pleine largeur. */
    [data-theme="direction"] .dmd-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 10px;
        row-gap: 6px;
        padding: 10px 12px;
    }
    [data-theme="direction"] .dmd-famille { order: 1; flex: 1 1 auto; min-width: 0; }
    [data-theme="direction"] .dmd-row > div:nth-child(5) { order: 2; flex: 0 0 auto; }
    [data-theme="direction"] .dmd-row > div:nth-child(2) { order: 3; flex: 0 1 auto; }
    [data-theme="direction"] .dmd-kpi { order: 4; flex: 0 1 auto; margin-left: auto; }
    [data-theme="direction"] .dmd-presence-row .presence-item { min-width: 28px; padding: 2px 4px; }
    [data-theme="direction"] .dmd-presence-row .presence-item .nb { font-size: 12px; }
    [data-theme="direction"] .dmd-presence-row .presence-item .lb { font-size: 8px; }
    /* Raison masquée sur mobile — pas essentielle à la décision rapide,
       même consigne que la colonne équivalente du Dashboard. */
    [data-theme="direction"] .dmd-raison { display: none; }
    [data-theme="direction"] .dmd-actions { order: 5; flex: 1 1 100%; }
    [data-theme="direction"] .dmd-actions .btn-valider-action { flex: 1; }

    /* Liste d'attente mobile — même logique que File d'actions/Demandes :
       le jour passe d'une colonne latérale à un bandeau horizontal, les
       lignes deviennent des cartes empilées (1 colonne) ; les 3 actions
       (Attribuer/Supprimer/Détail), côte à côte en desktop, passent en
       pile verticale (retour utilisateur point 2) — chacune garde sa
       largeur naturelle, pas de flex:1 uniforme. */
    [data-theme="direction"] .la-tabs { gap: 16px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    [data-theme="direction"] .la-tab { white-space: nowrap; flex-shrink: 0; }
    /* Retour utilisateur (suite chantier mobile, point 1) — bandeau
       recherche + plage de dates masqué sur mobile, sur tous les onglets
       de la vue Demandes (.la-filters partagé) : réservé au desktop où il
       y a la place de le consulter sans gêner l'action rapide. */
    [data-theme="direction"] .la-filters { display: none; }
    [data-theme="direction"] .la-day-count { margin-left: 0; width: 100%; }

    /* Retour utilisateur (suite chantier mobile, point 3) — carte Liste
       d'attente réduite à l'essentiel : L1 rang+avatar+prénom/âge (famille
       retirée, doublon avec l'avatar), L2 date+horaire (forcé sur sa propre
       ligne), L3 badge de compatibilité + bouton d'action. Le détail
       ("Absence — X") reste accessible via la loupe — cf. enrichissement
       de la modale Détail journée. */
    [data-theme="direction"] .la-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "demande demande" "opp action";
        row-gap: 4px;
        padding: 10px 12px;
    }
    [data-theme="direction"] .la-row-demande { grid-area: demande; border: none; padding: 0; flex-wrap: wrap; row-gap: 2px; }
    [data-theme="direction"] .la-opportunite { grid-area: opp; border: none; padding: 0; align-items: center; }
    [data-theme="direction"] .la-status-action { grid-area: action; padding: 0; }
    [data-theme="direction"] .la-status-action .dash-actions-action { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; }

    /* L1 : famille retirée (doublon). */
    [data-theme="direction"] .la-famille-sub { display: none; }
    /* L2 : le créneau grandit à 100% de la largeur → force son propre saut
       de ligne (même technique que .dash-actions-table ailleurs dans ce
       fichier), aligné sous l'avatar plutôt que sous le rang. */
    [data-theme="direction"] .la-identity { flex: 1 1 auto; }
    [data-theme="direction"] .la-creneau { flex: 1 1 100%; padding-left: 30px; }
    /* L3 : uniquement le badge de compatibilité (Compatible/Pas compatible) —
       titre/sous-texte détaillés retirés (l'icône du card aussi, plus de
       place pour rien). */
    [data-theme="direction"] .la-opp-card { padding: 0; background: none !important; }
    [data-theme="direction"] .la-opp-card svg { display: none; }
    [data-theme="direction"] .la-opp-title,
    [data-theme="direction"] .la-opp-sub,
    [data-theme="direction"] .la-opp-action { display: none; }
    /* Badge de statut propre à la colonne action (Attribuée/À attribuer/En
       attente) retiré — redondant avec le badge de compatibilité juste à
       gauche et avec les boutons eux-mêmes (activé = compatible, "—" = pas
       compatible). */
    [data-theme="direction"] .la-status-action > .dash-pill { display: none; }

    /* Retour utilisateur (chantier mobile, point 4) — cellule jour du
       calendrier : le texte "X places disponibles" sous le ratio/la barre
       est redondant avec le code couleur sur mobile (grille déjà dense) —
       retiré de la grille, reste disponible au clic (détail du jour). */
    [data-theme="direction"] .cal-cell-subtext { display: none; }

    /* Retour utilisateur (chantier mobile, point 5) — navigation secondaire
       (titre + sous-titre + onglets, ex. vue Demandes) beaucoup trop
       espacée verticalement : gap réduit, et surtout row-gap distinct de
       column-gap sur .dir-tabs — un flex gap unique (28px) s'appliquait
       aussi À LA VERTICALE entre les 2 lignes d'onglets repliées, d'où le
       gros espace signalé. */
    [data-theme="direction"] .dash-view-header { margin-bottom: 10px; }
    [data-theme="direction"] .dash-view-header h1 { font-size: 18px; }
    /* !important nécessaire : la marge de .dir-tabs est fixée en style
       inline dans direction.html (style="margin-bottom:16px"), qui gagne
       sur toute classe CSS sans lui — seul cas justifié dans ce fichier. */
    [data-theme="direction"] .dir-tabs { column-gap: 16px; row-gap: 2px; margin-bottom: 10px !important; }
    [data-theme="direction"] .dir-tabs a { padding-bottom: 8px; font-size: 13px; }

    /* ── File d'actions mobile (.faw-mobile) — même concept que le widget
       desktop (une carte par jour, même ordre annulations résa → annulations
       absence → file numérotée), sans les KPI (pas de capacité/dispo en
       en-tête, pas de mini-tableau Présence par ligne) : uniquement les
       jours et les actions à valider, orienté CTA (boutons toujours
       visibles, pas de menu à ouvrir). ── */
    [data-theme="direction"] .faw-mobile { padding: 4px 16px 24px; }
    [data-theme="direction"] .faw-mobile-empty {
        display: flex; flex-direction: column; align-items: center; gap: 8px;
        padding: 40px 16px; color: var(--text-muted); text-align: center;
    }
    [data-theme="direction"] .faw-mobile-empty svg { color: #16a34a; }
    [data-theme="direction"] .faw-mobile-empty p { margin: 0; font-size: 14px; font-weight: 600; }

    [data-theme="direction"] .faw-mobile-day { margin-bottom: 22px; }
    [data-theme="direction"] .faw-mobile-day:last-of-type { margin-bottom: 12px; }
    [data-theme="direction"] .faw-mobile-day-head {
        display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
        padding: 0 2px 10px; font-size: 13px;
    }
    [data-theme="direction"] .faw-mobile-day-head strong { font-size: 13px; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .03em; }
    [data-theme="direction"] .faw-mobile-day-head span { color: var(--text-muted); font-weight: 600; }

    [data-theme="direction"] .faw-mobile-card {
        background: #fff; border-radius: 14px; border: 1px solid var(--border-light);
        box-shadow: 0 1px 4px rgba(13,27,62,.06); padding: 14px; margin-bottom: 10px;
    }
    [data-theme="direction"] .faw-mobile-card:last-child { margin-bottom: 0; }
    [data-theme="direction"] .faw-mobile-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    [data-theme="direction"] .faw-mobile-card-top .faw-badge { flex-shrink: 0; }
    [data-theme="direction"] .faw-mobile-card-id { min-width: 0; }
    [data-theme="direction"] .faw-mobile-card-nom { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
    [data-theme="direction"] .faw-mobile-card-sub { font-size: 12px; color: var(--text-muted); line-height: 1.3; }
    [data-theme="direction"] .faw-mobile-card-meta {
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        font-size: 12px; color: var(--text-secondary); font-weight: 600; margin-bottom: 12px;
    }
    [data-theme="direction"] .faw-mobile-card-meta .dash-pill { font-size: 11px; padding: 3px 9px; }

    /* CTA — toujours visibles, jamais derrière un menu (cœur du "orienté
       CTA" demandé) : Valider/Refuser en pleine largeur, ↑/↓ en dessous
       uniquement pour les lignes de la file (pas les annulations). */
    [data-theme="direction"] .faw-mobile-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    [data-theme="direction"] .dash-mobile-btn-primary,
    [data-theme="direction"] .dash-mobile-btn-outline {
        flex: 1 1 auto; min-height: 46px; border-radius: 10px; font-size: 13px; font-weight: 700;
        display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
        transition: transform .1s ease;
    }
    [data-theme="direction"] .dash-mobile-btn-primary:active,
    [data-theme="direction"] .dash-mobile-btn-outline:active { transform: scale(.97); }
    [data-theme="direction"] .dash-mobile-btn-primary { border: none; background: #0d1b3e; color: #fff; }
    [data-theme="direction"] .dash-mobile-btn-outline { border: 2px solid #d1d5db; background: #fff; color: var(--text); }
    [data-theme="direction"] .faw-mobile-updown { display: flex; gap: 6px; flex: 0 0 auto; width: 100%; justify-content: flex-end; }
    [data-theme="direction"] .faw-mobile-updown .icon-btn {
        width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--border-light);
        background: #fff; color: var(--text-secondary);
    }
    [data-theme="direction"] .faw-mobile-updown .icon-btn:disabled { opacity: .35; }

    /* Historique (Actions auto / Récemment traité) — replié par défaut,
       visuellement détaché de la file à traiter (bordure + fond neutre). */
    [data-theme="direction"] .faw-mobile-history { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border-light); }
    [data-theme="direction"] .faw-mobile-history-toggle {
        display: flex; align-items: center; justify-content: space-between; width: 100%;
        border: none; background: #f7f8fa; border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
        font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--text-secondary); cursor: pointer;
    }
    [data-theme="direction"] .faw-mobile-history-toggle span { display: flex; align-items: center; gap: 7px; }
    [data-theme="direction"] .faw-mobile-history-list { padding: 2px 2px 14px; }
    [data-theme="direction"] .faw-mobile-empty-text { margin: 0 0 10px; padding: 0 4px; font-size: 12px; color: var(--text-muted); }
    [data-theme="direction"] .faw-mobile-history-row {
        display: flex; align-items: center; gap: 10px; padding: 9px 4px;
        border-bottom: 1px solid #f5f5f5;
    }
    [data-theme="direction"] .faw-mobile-history-row:last-child { border-bottom: none; }
    [data-theme="direction"] .faw-mobile-history-row .dash-avatar { width: 34px; height: 34px; font-size: 11px; }
    [data-theme="direction"] .faw-mobile-history-body { min-width: 0; flex: 1; }
    [data-theme="direction"] .faw-mobile-history-nom { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }

    /* ── Brief B point 3 — Calendrier mobile : garde grille + indicateurs + tap détail ── */
    [data-theme="direction"] .view-calendrier .dash-view-header,
    [data-theme="direction"] .cal-toolbar-controls { display: none; }

    /* ── Brief B point 4 — Demandes mobile : filtres masqués (mini-tabs déjà icône seule) ── */
    /* Brief B-fix2 — !important nécessaire : la règle .la-filters non scopée
       par media (~L1130, display:flex) a la même spécificité et est déclarée
       plus loin dans le fichier, donc l'emportait silencieusement malgré ce
       display:none (barre recherche/dates toujours visible en haut). */
    [data-theme="direction"] .la-filters { display: none !important; }

    /* Lot 2 (Brief L) — bouton "Filtrer" (vues Demandes/Absences), ouvre la
       modale de filtres (.filtres-modal) en repli des filtres desktop
       masqués ci-dessus. Caché en desktop (défaut display:none, hors media
       query — cf. règle de base plus bas dans ce fichier). */
    [data-theme="direction"] .gestion-filtrer-btn { display: inline-flex; }

    /* Brief M point 5 — vues Demandes/Absences (gestionTab) : grille desktop
       .faw-day-card/.faw-row masquée, remplacée par les cartes condensées
       .cond-mobile-only ci-dessus (déjà visibles via la classe partagée
       .faw-mobile, display:none par défaut / display:block ici). */
    [data-theme="direction"] .faw-jours { display: none; }

    /* Brief M point 1 — bottom navigation bar fixe, remplace .dir-mobile-tabs
       (masquée ci-dessus). padding-bottom sur .dir-content pour que le
       contenu ne passe jamais sous la barre (hauteur 64px + marge). */
    [data-theme="direction"] .dir-content { padding-bottom: 80px; }
    [data-theme="direction"] .dir-bottom-nav {
        display: flex; position: fixed !important; left: 0; right: 0; bottom: 0 !important; height: 64px;
        background: #0d1b3e; z-index: 9999 !important;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* Brief — 6e item "Paramètres" : flex:1 (5 items) aurait juste rétréci
       chaque bouton proportionnellement plutôt que de scroller (.dir-bottom-nav
       a déjà overflow-x:auto depuis un brief précédent) — flex-shrink:0 +
       largeur minimale garantit un vrai scroll horizontal avec des cibles
       tactiles correctes, plutôt que 6 icônes trop resserrées pour être
       fiables au clic. */
    [data-theme="direction"] .dir-bottom-nav-item {
        flex: 0 0 auto; min-width: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        position: relative; border: none; background: none; color: #94a3b8;
        font-family: var(--font); font-size: 10px; font-weight: 700; cursor: pointer;
    }
    [data-theme="direction"] .dir-bottom-nav-item svg { width: 20px; height: 20px; }
    [data-theme="direction"] .dir-bottom-nav-item.active { color: #c9a84c; }
    [data-theme="direction"] .dir-bottom-nav-badge {
        position: absolute; top: 2px; right: calc(50% - 22px);
        min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
        background: #dc2626; color: #fff; font-size: 9px; font-weight: 800;
        display: flex; align-items: center; justify-content: center;
    }

    /* Brief M point 3 — modales plein écran sur mobile, toutes confondues
       (générique par design, comme demandé) : pas de composant nouveau,
       juste la modale existante (.modal-bg/.modal-box) redimensionnée.
       padding-bottom réservé au footer sticky Valider/Refuser (ajouté sur
       la modale détail demande uniquement, cf. .modal-footer-sticky).
       Brief M-fix — la modale détail demande revient sur un pop-up centré
       (.modal-box-detail-demande ci-dessous, spécificité supérieure) :
       toutes les AUTRES modales (Nouvelle demande, filtres, drawer…)
       restent plein écran, seule celle-ci change d'avis. */
    [data-theme="direction"] .modal-box {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        margin: 0 !important;
        overflow-y: auto;
        padding-bottom: 88px;
    }
    [data-theme="direction"] .modal-close {
        top: 14px; left: 14px; right: auto;
        display: flex; align-items: center; gap: 6px; width: auto; height: auto;
        padding: 6px 10px 6px 4px; border-radius: 8px; background: none;
    }
    [data-theme="direction"] .modal-close::after { content: "Retour"; font-size: 13px; font-weight: 600; }
    [data-theme="direction"] .modal-box h3 { margin-top: 44px; }

    /* Brief — vue dédiée "+ Nouveau", simplifiée : plus de header (le
       bandeau navy utilisait un bleed en marge négative calqué sur
       .cal-jour-header/.modal-box, qui a sa propre marge de manœuvre —
       appliqué ici directement sur .dir-content, déjà au bord de l'écran,
       le bleed dépassait le viewport et forçait un scroll horizontal).
       Juste 2 boutons taille normale (pas pleine largeur), centrés. */
    [data-theme="direction"] .view-nouveau-mobile {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        min-height: 60vh; gap: 16px;
    }
    [data-theme="direction"] .nouveau-btn {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        width: 80%; max-width: 280px; border-radius: 12px; padding: 14px 18px;
        background: var(--primary); border: none; color: #fff;
        font-family: var(--font); font-size: 15px; font-weight: 600; cursor: pointer;
    }
    [data-theme="direction"] .nouveau-btn svg { color: #fff; }

    /* Brief M-fix — modale détail demande : pop-up centré, pas plein écran
       (revert ciblé des règles génériques ci-dessus, .modal-box.modal-box-
       detail-demande a une spécificité supérieure à .modal-box seul). */
    [data-theme="direction"] .modal-box.modal-box-detail-demande {
        position: relative;
        width: 90vw !important; max-width: 420px !important; height: auto !important;
        max-height: 90vh; border-radius: 16px !important; margin: 16px !important;
        box-shadow: 0 20px 60px rgba(0,0,0,.3);
        /* Fix — footer repassé en position:fixed sous la modale (pas dedans,
           cf. .modal-footer-sticky plus bas) : la modale gardait le tableau
           de synthèse trop serré avec le footer sticky intégré. Padding
           réservé pour que le contenu scrollable ne finisse pas caché
           derrière le footer fixe (~78px de haut + marge de sécurité). */
        padding-bottom: 90px;
    }
    [data-theme="direction"] .modal-box-detail-demande h3 { margin-top: 0; }
    /* .modal-close est un descendant de .modal-box (pas un sibling) : le
       sélecteur générique .modal-close (::after "Retour", coin haut-gauche)
       s'applique à toutes les modales plein écran par défaut — cette modale
       repasse sur un bouton fermeture standard (croix, coin haut-droit,
       sans texte), spécificité 2 classes > 1 donc pas de !important requis. */
    [data-theme="direction"] .modal-box-detail-demande .modal-close {
        position: absolute; top: 17px; left: auto; right: 14px; float: none;
        display: flex; align-items: center; justify-content: center;
        width: 30px; height: 30px; padding: 0; border-radius: 50%;
        background: rgba(255,255,255,.15); color: #fff;
    }
    [data-theme="direction"] .modal-box-detail-demande .modal-close::after { content: none; }

    /* Brief M-fix — contenu enrichi (header/meta/alerte/impact/synthèse). */
    [data-theme="direction"] .detail-modal-title-desktop { display: none; }
    /* Finition premium — bandeau navy en tête de modale (mêmes infos, même
       ordre : badge/avatar/nom/parent, juste "bleedé" jusqu'aux bords de la
       carte via marge négative égale au padding de .modal-box (24px 20px,
       app.css) pour épouser les coins arrondis supérieurs sans changer le
       padding du reste du contenu). Hauteur compacte (~68px), pas un gros
       bandeau. */
    [data-theme="direction"] .detail-modal-header {
        display: flex; align-items: center; gap: 10px;
        margin: -24px -20px 16px -20px; padding: 16px 44px 16px 20px;
        background: var(--primary);
        border-radius: 16px 16px 0 0;
        min-height: 68px; box-sizing: border-box;
    }
    [data-theme="direction"] .detail-modal-header-id { min-width: 0; }
    [data-theme="direction"] .detail-modal-header-nom { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.3; }
    [data-theme="direction"] .detail-modal-header-parent { font-size: 12px; color: rgba(255,255,255,.7); }
    [data-theme="direction"] .detail-modal-meta {
        display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
        font-size: 13px; font-weight: 600; color: var(--text-secondary);
    }
    [data-theme="direction"] .detail-modal-meta span { display: flex; align-items: center; gap: 6px; }
    [data-theme="direction"] .detail-modal-meta svg { color: var(--text-muted); }
    [data-theme="direction"] .detail-modal-alerte { display: block; margin-bottom: 16px; }
    /* Finition premium — pill "Ajustement planning professionnel" (dash-pill-
       warn), scopée à cette modale pour ne pas changer la teinte partagée
       par les autres écrans (desktop/liste d'attente/etc). */
    [data-theme="direction"] .detail-modal-alerte .dash-pill-warn {
        background: #fff2c7; color: #9a5c00; border-radius: 999px; border: none;
    }
    [data-theme="direction"] .detail-modal-alerte p { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
    [data-theme="direction"] .detail-modal-impact { display: block; margin-bottom: 18px; }
    [data-theme="direction"] .detail-modal-impact-titre { font-size: 12px; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
    [data-theme="direction"] .detail-modal-impact-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
    [data-theme="direction"] .detail-modal-impact-box {
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        background: #f7f8fa; border-radius: 10px; padding: 8px 2px;
        text-align: center;
    }
    /* Finition premium — icône colorée + petit fond pastel en cercle,
       uniquement le pictogramme (la carte reste gris/blanc, le chiffre
       reste navy) : 5 couleurs distinctes par position, une par KPI
       (Capacité/Planning/Absence/Validées/Places dispo, dans cet ordre
       fixe côté HTML). */
    [data-theme="direction"] .detail-modal-impact-box svg {
        width: 14px; height: 14px; padding: 6px; border-radius: 50%; box-sizing: content-box;
    }
    [data-theme="direction"] .detail-modal-impact-box:nth-child(1) svg { color: #b88618; background: #fff4cf; }
    [data-theme="direction"] .detail-modal-impact-box:nth-child(2) svg { color: #2563eb; background: #eaf2ff; }
    [data-theme="direction"] .detail-modal-impact-box:nth-child(3) svg { color: #7c5ce7; background: #f1edff; }
    [data-theme="direction"] .detail-modal-impact-box:nth-child(4) svg { color: #24965e; background: #e8f8ef; }
    [data-theme="direction"] .detail-modal-impact-box:nth-child(5) svg { color: #2684c7; background: #e9f5fd; }
    [data-theme="direction"] .detail-modal-impact-box strong { font-size: 14px; color: var(--primary); margin-top: 2px; }
    [data-theme="direction"] .detail-modal-impact-box span { font-size: 9px; color: var(--text-muted); font-weight: 600; line-height: 1.2; }
    /* Fix — 3 boxes Arr/Pic/Dép (feux tricolores), entre Impact journée et
       Synthèse de présence. Réutilise .presence-row/.presence-item tels
       quels (app.css, déjà utilisés sur les KPI desktop) — juste centrées
       et espacées comme les autres sections de cette modale. */
    [data-theme="direction"] .detail-modal-arrpicdep { margin-bottom: 18px; }
    [data-theme="direction"] .detail-modal-arrpicdep .presence-row { justify-content: center; margin: 0; }
    [data-theme="direction"] .detail-modal-synthese-titre { display: block; font-size: 12px; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
    /* Finition premium — harmonisation des 2 teintes du tableau Synthèse de
       présence (mobile uniquement, la media query suffit à ne pas toucher
       desktop — .cell-depasse/rouge non touché, "pas de couleur
       supplémentaire"). */
    [data-theme="direction"] .table-detail-journee td.cell-auto { background: #dcf5e7; color: #198754; }
    [data-theme="direction"] .table-detail-journee td.cell-palier { background: #fff0df; color: #c35f00; font-weight: 700; }

    /* Fix — footer Valider/Refuser repassé en position:fixed SOUS la modale
       (pas dedans) : le position:sticky rendait la modale trop serrée et
       cachait le tableau de synthèse. Le padding-bottom de
       .modal-box-detail-demande (ci-dessus) réserve la place pour que le
       contenu scrollable ne finisse pas caché derrière. Masqué en desktop
       par défaut (display:none hors media query). */
    [data-theme="direction"] .modal-footer-sticky {
        display: flex; gap: 10px;
        position: fixed; bottom: 0; left: 0; right: 0;
        background: #fff; border-top: 1px solid #e2e8f0;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 1001;
    }
    [data-theme="direction"] .modal-footer-sticky .btn-valider-action,
    [data-theme="direction"] .modal-footer-sticky .btn-refuser-action { flex: 1; min-height: 46px; }
    /* Finition premium — CTA principal (Valider, plein navy) / action
       secondaire destructive (Refuser, contour rouge) — scopé au footer de
       cette modale, .btn-valider-action/.btn-refuser-action restent en
       outline navy/rouge partout ailleurs dans l'app (non touché). Pas
       d'icône (contrainte "pas de HTML" de ce brief — les boutons n'en
       avaient pas avant, seulement du texte). */
    [data-theme="direction"] .modal-footer-sticky .btn-valider-action {
        background: var(--primary); border-color: var(--primary); color: #fff;
    }
    [data-theme="direction"] .modal-footer-sticky .btn-valider-action:hover,
    [data-theme="direction"] .modal-footer-sticky .btn-valider-action:active { background: #16295c; border-color: #16295c; }
    [data-theme="direction"] .modal-footer-sticky .btn-refuser-action {
        background: #fff; border-color: #dc3d32; color: #dc3d32;
    }
    [data-theme="direction"] .modal-footer-sticky .btn-refuser-action:hover,
    [data-theme="direction"] .modal-footer-sticky .btn-refuser-action:active { background: #fff3f2; }

    /* Brief M point 2/4/5 — carte condensée 2 lignes, composant partagé par
       les 4 listes mobile (Actions/Historique/Demandes/Absences). Réutilise
       .dash-pill/.faw-badge/.dash-avatar/.icon-btn existants — seule la
       structure de carte est nouvelle. */
    [data-theme="direction"] .cond-day-group { margin-bottom: 20px; }
    [data-theme="direction"] .cond-day-group:last-child { margin-bottom: 4px; }
    [data-theme="direction"] .cond-day-head {
        font-size: 12px; font-weight: 800; color: var(--primary); text-transform: uppercase;
        letter-spacing: .02em; padding: 0 2px 8px;
    }
    [data-theme="direction"] .cond-card {
        background: #fff; border: 1px solid var(--border-light); border-radius: 12px;
        padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(13,27,62,.05);
    }
    [data-theme="direction"] .cond-card:last-child { margin-bottom: 0; }
    [data-theme="direction"] .cond-row1 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    [data-theme="direction"] .cond-nom { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    [data-theme="direction"] .cond-updown { display: flex; gap: 4px; flex-shrink: 0; }
    [data-theme="direction"] .cond-updown .icon-btn { width: 28px; height: 28px; }
    [data-theme="direction"] .cond-row2 { display: flex; align-items: center; gap: 8px; }
    [data-theme="direction"] .cond-heure { font-size: 12px; color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
    [data-theme="direction"] .cond-row2 .dash-pill { font-size: 11px; padding: 3px 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Fix — bulle Resa/Attente cliquable (vue Actions), même cible que
       "Voir →" (voirDetail()). */
    [data-theme="direction"] .cond-badge-clickable { cursor: pointer; }
    [data-theme="direction"] .cond-voir {
        margin-left: auto; flex-shrink: 0; border: none; background: none; color: var(--primary);
        font-family: var(--font); font-size: 12px; font-weight: 700; padding: 4px 2px; cursor: pointer;
    }

    /* ── Brief B-fix — Demandes mobile : titre "Demandes" + sous-titre
       retirés, remplacés par le nom de l'onglet actif sous les mini-tabs
       (seul repère textuel restant, cf. libelleGestionTab()). ── */
    [data-theme="direction"] .view-gestion .dash-view-header { display: none; }
    [data-theme="direction"] .dir-gestion-tab-titre {
        display: block; text-align: center; font-weight: 700; font-size: 13px;
        color: var(--primary); margin: -6px 0 12px;
    }

    /* ── Brief B-fix — bouton flottant "+" (vue Demandes/Absences mobile) ── */
    /* Brief M point 5 — FAB flottant retiré : la vue Demandes/Absences
       mobile a désormais son propre bouton "+" en haut à droite de la
       carte (.cond-header-add), le drawer bottom nav couvrait déjà le
       coin bas-droit. */
    [data-theme="direction"] .mobile-fab-wrap { display: none; }
    [data-theme="direction"] .mobile-fab {
        width: 56px; height: 56px; border-radius: 50%;
        background: #0d1b3e; border: 3px solid #c9a84c; color: #fff;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 12px rgba(0,0,0,.25); cursor: pointer;
        transition: transform .15s ease;
    }
    [data-theme="direction"] .mobile-fab.open { transform: rotate(45deg); }
    [data-theme="direction"] .mobile-fab-menu {
        position: absolute; bottom: 68px; right: 0;
        display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px;
    }
    [data-theme="direction"] .mobile-fab-option {
        display: flex; align-items: center; gap: 8px; white-space: nowrap;
        background: #fff; color: var(--primary); border: 1px solid var(--border);
        border-radius: 24px; padding: 10px 16px; font-size: 13px; font-weight: 700;
        box-shadow: 0 2px 8px rgba(0,0,0,.15); cursor: pointer;
    }
    [data-theme="direction"] .mobile-fab-option .icon { color: #c9a84c; }

    /* ── Brief B point 5 — débordement horizontal planning semaine (fix
       repris et complété plus haut, cf. Brief modales calendrier mobile) ── */

    /* ── Brief B point 6 — boutons semaine du Planning, alignés sur la
       compacité de .cal-nav-btn (calendrier mensuel) sans perdre le texte. ── */
    [data-theme="direction"] .cal-nav { flex-wrap: wrap; gap: 8px; }
    [data-theme="direction"] .cal-nav .btn { padding: 6px 10px; font-size: 12px; }

    /* ── Brief B point 7 — Rapports masqué entièrement sur mobile (routing Alpine inchangé) ── */
    [data-theme="direction"] .view-rapports { display: none; }
}

/* ── Fiche famille : préférences d'alertes ─────────────────────────────
   Deux bugs cumulés :
   1. .field label (app.css, 0-1-1) impose display:block, plus spécifique
      qu'une classe seule (0-1-0) — d'où les sélecteurs préfixés .field ici.
   2. .field input (app.css, 0-1-1) impose width:100%/padding:10px 12px/
      border à TOUS les <input> d'un .field, y compris les checkboxes —
      elles s'étiraient en pleine largeur. Reset explicite ci-dessous. */
.field .alertes-toggle-row { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.field .alertes-toggle-row input[type="checkbox"],
.field .jours-notif-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    box-sizing: border-box;
    accent-color: var(--primary);
}
.jours-notif-grid { display: flex; gap: 16px; }
.field .jours-notif-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; }
/* Retour utilisateur (Priorité 7, point 2) — jour où un enfant de la famille
   est déjà présent contractuellement : case bloquée, grisée. */
.field .jours-notif-item.disabled { opacity: .45; cursor: not-allowed; }
.field .jours-notif-item.disabled input[type="checkbox"] { cursor: not-allowed; }

.famille-card { }
.famille-card .famille-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.famille-card .famille-name { font-weight: 700; font-size: 15px; color: var(--text); }
.famille-card .famille-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.famille-card .famille-actions { display: flex; gap: 6px; flex-shrink: 0; }
.famille-card .famille-actions button {
    border: none; background: none; cursor: pointer; font-size: 13px;
    color: var(--text-muted); padding: 4px 6px;
}
.famille-card .famille-actions button:hover { color: var(--primary); }
.famille-card .famille-actions button.danger:hover { color: var(--error); }

.enfants-list { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.enfant-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px;
}
.enfant-row:last-child { border-bottom: none; }
.enfant-row .enfant-name { font-weight: 600; }
.enfant-row .enfant-age { color: var(--text-secondary); font-size: 12px; margin-left: 6px; }
.enfant-row .enfant-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.enfant-row .enfant-actions button {
    border: none; background: none; cursor: pointer; font-size: 12px; color: var(--text-muted);
}
.enfant-row .enfant-actions button:hover { color: var(--primary); }

.btn-add-enfant {
    margin-top: 8px;
    background: none;
    border: 1px dashed var(--border-light);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--primary);
    cursor: pointer;
    width: 100%;
    font-family: var(--font);
}
.btn-add-enfant:hover { background: #f0f4f6; }

.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

.form-section-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); margin: 14px 0 8px;
}
.form-section-label:first-child { margin-top: 0; }

/* ── Encadrement — cards de sélection du mode (Étape 1) ───────────────── */
.encadrement-mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
@media (max-width: 560px) {
    .encadrement-mode-cards { grid-template-columns: 1fr; }
}
.encadrement-mode-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    text-align: left;
    padding: 16px;
    border: 2px solid var(--border-light);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-family: var(--font);
    transition: border-color .15s ease, background .15s ease;
}
.encadrement-mode-card .ico { color: var(--primary); margin-bottom: 2px; }
.encadrement-mode-card strong { font-size: 14px; color: var(--text); }
.encadrement-mode-card p { font-size: 12px; color: var(--text-secondary); margin: 0; }
.encadrement-mode-card .muted { font-size: 11px; }
.encadrement-mode-card:hover { border-color: var(--border); }
.encadrement-mode-card.active { border-color: var(--cta); background: #f7f9ff; }

/* ── Calendrier ────────────────────────────────────────────────────── */
.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.cal-nav strong { color: var(--primary); font-size: 15px; text-transform: capitalize; }

/* ── Planning semaine (Familles) ──────────────────────────────────── */
.planning-semaine-table { width: 100%; border-collapse: collapse; background: #fff; }
.planning-semaine-table th, .planning-semaine-table td {
    border: 1px solid var(--border);
    padding: 8px 10px;
    text-align: center;
    font-size: 13px;
    white-space: nowrap;
}
.planning-semaine-table thead th { background: #f7f8fa; color: var(--primary); font-size: 12px; }
.planning-semaine-table tbody td:first-child,
.planning-semaine-table thead th:first-child { text-align: left; font-weight: 600; }
.planning-semaine-cell { cursor: pointer; transition: background .1s; }
.planning-semaine-cell:hover { background: var(--info-bg); }

/* ── Dashboard : tableau Liste d'attente ─────────────────────────────
   overflow-x:auto sur le wrapper (pas sur la table elle-même) : la table
   garde sa largeur naturelle et scrolle horizontalement sur mobile plutôt
   que d'écraser ses colonnes. */
.table-liste-attente-wrap { overflow-x: auto; }
.table-liste-attente { width: 100%; min-width: 780px; border-collapse: collapse; background: #fff; font-size: 13px; }
.table-liste-attente th, .table-liste-attente td {
    border: 1px solid var(--border);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}
.table-liste-attente thead th { background: #f7f8fa; color: var(--primary); font-size: 12px; font-weight: 600; white-space: nowrap; }
.table-liste-attente td.jour-cell { font-weight: 600; color: var(--primary); white-space: nowrap; }
.table-liste-attente td.muted-cell { color: var(--text-muted); }

/* ── Écran dédié Liste d'attente — classes .onglet(s)-liste-attente/
   .filtres-liste-attente/.table-liste-attente(-wrap) ci-dessous devenues
   orphelines après la refonte visuelle (remplacées par .la-* plus bas,
   regroupement par jour + onglet Opportunités) ; laissées en l'état
   (mort inoffensif) plutôt que supprimées, au cas où un autre écran les
   réutiliserait un jour. ─────────────────────────────────────────────── */
.onglets-liste-attente { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.onglet-liste-attente {
    background: none; border: none; cursor: pointer;
    padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--text-secondary);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.onglet-liste-attente:hover { color: var(--primary); }
.onglet-liste-attente.active { color: var(--cta); border-bottom-color: var(--cta); }
.onglet-liste-attente .onglet-count {
    display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 10px;
    background: var(--border); color: var(--text-secondary); font-size: 12px; font-weight: 700;
}
.onglet-liste-attente.active .onglet-count { background: var(--cta); color: #fff; }
.filtres-liste-attente { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtres-liste-attente input[type="text"] { flex: 1; min-width: 220px; }
.filtres-liste-attente input[type="date"] { max-width: 170px; }
.btn-lien { background: none; border: none; cursor: pointer; color: var(--cta); font-size: 13px; font-weight: 600; padding: 6px 4px; white-space: nowrap; }
.btn-lien:hover { text-decoration: underline; }

/* ── Liste d'attente — refonte visuelle (regroupement par jour) ────────
   Habillage seul : rang/compatibilité/mode Auto-Manuel/actions Attribuer-
   Supprimer viennent du même endpoint/logique qu'avant (DemandeController::
   listeAttente()), .dash-avatar/.dash-pill/.dash-actions-action/
   .btn-valider-action/.dash-actions-chevron/.dash-actions-dropdown sont
   réutilisés tels quels (mêmes classes que le Dashboard/Demandes). */
/* Retour utilisateur (harmonisation) — Liste d'attente vit désormais dans
   une .dash-actions-card (bandeau navy ajouté) : ces éléments n'avaient
   pas de padding horizontal propre (ils vivaient directement dans la
   page). Scope .dash-actions-card pour ne pas affecter .la-filters,
   réutilisé tel quel (hors carte) par les 3 autres onglets harmonisés. */
[data-theme="direction"] .dash-actions-card .la-tabs { padding: 14px 22px 0; }
[data-theme="direction"] .dash-actions-card .la-filters { padding: 14px 22px 0; }
[data-theme="direction"] .dash-actions-card .cal-legende-v2 { padding-left: 22px; padding-right: 22px; }
[data-theme="direction"] .dash-actions-card .la-groups { padding: 0 22px 20px; }
[data-theme="direction"] .la-tabs { display: flex; gap: 28px; border-bottom: 2px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
[data-theme="direction"] .la-tab {
    background: none; border: none; cursor: pointer; padding: 0 0 12px;
    font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--text-muted);
    border-bottom: 3px solid transparent; display: flex; align-items: center; gap: 8px;
    margin-bottom: -2px;
}
[data-theme="direction"] .la-tab:hover { color: var(--primary); }
[data-theme="direction"] .la-tab.active { color: var(--primary); font-weight: 800; border-bottom-color: #c9a84c; }
[data-theme="direction"] .la-tab-count {
    display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 10px;
    background: #f1f5f9; color: var(--text-secondary); font-size: 11px; font-weight: 700; text-align: center;
}
[data-theme="direction"] .la-tab.active .la-tab-count { background: #c9a84c; color: #fff; }

[data-theme="direction"] .la-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
[data-theme="direction"] .la-filter-search {
    flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; height: 40px; color: var(--text-muted);
}
[data-theme="direction"] .la-filter-search input { flex: 1; border: none; outline: none; font-family: var(--font); font-size: 13px; height: 100%; background: none; color: var(--text); }
[data-theme="direction"] .la-filter-dates {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; height: 40px; color: var(--text-muted);
}
[data-theme="direction"] .la-filter-dates input[type="date"] { border: none; outline: none; font-family: var(--font); font-size: 13px; background: none; color: var(--text); }
[data-theme="direction"] .la-filter-reset {
    display: flex; align-items: center; gap: 6px; margin-left: auto;
    background: none; border: none; cursor: pointer; color: var(--text-secondary);
    font-family: var(--font); font-size: 13px; font-weight: 600; padding: 8px 4px;
}
[data-theme="direction"] .la-filter-reset:hover { color: var(--primary); }

/* Lot 2 (Brief L) — select statut dans .la-filters (Demandes/Absences),
   même gabarit que .la-filter-dates (hauteur/bordure/rayon) pour rester
   visuellement cohérent avec le reste de la barre de filtres. */
[data-theme="direction"] .la-filters select {
    height: 40px; padding: 0 12px; background: #fff; border: 1px solid var(--border);
    border-radius: 10px; font-family: var(--font); font-size: 13px; color: var(--text);
}

/* Fil d'action (Lot 1 refonte menu) — sélecteur de période (7j/30j/3m/Tout)
   + plage personnalisée, au-dessus des box jour .faw-day-card. Boutons
   dédiés plutôt que .dash-tab-mini (réservé aux mini-tabs icône mobile,
   non stylé en desktop). Charte : bouton inactif fond blanc/bordure
   #e2e8f0/texte navy, bouton actif fond navy/texte blanc, picker de dates
   même hauteur/bordure — une seule ligne, gap 8px, alignée à gauche. */
[data-theme="direction"] .fa-periode-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin-bottom: 20px; padding: 14px 22px 0; }
[data-theme="direction"] .fa-periode-boutons { display: flex; gap: 8px; }
[data-theme="direction"] .fa-periode-btn {
    box-sizing: border-box; height: 32px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer;
    font-family: var(--font); font-size: 13px; font-weight: 600; color: #0d1b3e;
    padding: 6px 14px; white-space: nowrap;
}
[data-theme="direction"] .fa-periode-btn.active { background: #0d1b3e; border-color: #0d1b3e; color: #fff; }
[data-theme="direction"] .fa-periode-row .la-filter-dates {
    box-sizing: border-box; height: 32px;
    border: 1px solid #e2e8f0; border-radius: 6px;
}

[data-theme="direction"] .la-groups { display: flex; flex-direction: column; gap: 18px; }

/* Rapport (Lot 3 Brief L) — tableau agrégé mensuel/famille, pas un composant
   .faw-* (pas une liste d'événements par jour). */
[data-theme="direction"] .rap-panel { padding: 20px 22px; }
[data-theme="direction"] .rap-toolbar { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; }
[data-theme="direction"] .rap-toolbar .btn { margin-left: auto; }
[data-theme="direction"] .rap-toolbar .btn.disabled { pointer-events: none; opacity: .5; }
[data-theme="direction"] tr.rap-total-row { font-weight: 700; background: #f8fafc; }
[data-theme="direction"] tr.rap-total-row td { border-top: 2px solid var(--border); }

/* Retour utilisateur : "1 jour = 1 carte" — le jour redevient un vrai
   conteneur (fond blanc, bordure, ombre) qui regroupe toutes ses demandes,
   plutôt qu'un simple séparateur au-dessus de cartes-lignes individuelles. */
[data-theme="direction"] .la-day-card {
    background: #fff; border-radius: 12px; border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(13,27,62,.05); overflow: hidden;
}
[data-theme="direction"] .la-day-card-head {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    padding: 13px 16px; background: #f7f8fa; border-bottom: 1px solid var(--border);
    font-size: 13px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .03em;
}
[data-theme="direction"] .la-day-count { font-weight: 600; color: var(--text-muted); text-transform: none; letter-spacing: normal; margin-left: auto; }

/* Retour utilisateur : densité — hauteur de ligne réduite d'environ 30%
   (padding/gap resserrés, avatar 34px au lieu de 40px), polices 12-13px,
   pour afficher 6-8 lignes sans scroll au lieu de 4-5. Séparateurs
   verticaux fins (1px, #f1f5f9) entre les 3 zones Demande/Places
   libérées/Statut-action plutôt que des colonnes de grille espacées. Les
   lignes n'ont plus leur propre carte (regroupées dans .la-day-card
   ci-dessus) — juste un filet horizontal entre elles. */
[data-theme="direction"] .la-day-card-rows { display: flex; flex-direction: column; }
/* Retour utilisateur : colonnes élargies (mieux remplir la largeur de page
   disponible) — la 3e colonne (statut/action) passe de 150 à 190px pour
   respirer davantage. */
[data-theme="direction"] .la-row {
    display: grid; grid-template-columns: minmax(260px, 1.6fr) minmax(200px, 1.3fr) minmax(230px, 1fr);
    align-items: stretch; border-bottom: 1px solid #f1f5f9;
}
[data-theme="direction"] .la-day-card-rows .la-row:last-child { border-bottom: none; }
[data-theme="direction"] .la-row-demande { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px 10px 10px; border-right: 1px solid #f1f5f9; }
/* Retour utilisateur : l'identité ne s'étire plus (flex:1 retiré) — les
   horaires suivent immédiatement le bloc nom/famille au lieu d'être
   plaqués tout à droite de la colonne. */
[data-theme="direction"] .la-identity { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
[data-theme="direction"] .la-row .dash-avatar { width: 36px; height: 36px; font-size: 12px; }
/* Retour utilisateur (harmonisation) : mêmes tailles/graisses que la
   colonne Famille/Enfant de "Demandes de réservation" (dash-actions-nom
   15px/700, dash-actions-sub 12px/muted) — plus de valeurs propres à
   cet onglet. */
[data-theme="direction"] .la-enfant-nom { font-weight: 700; font-size: 15px; color: var(--text); }
[data-theme="direction"] .la-famille-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
/* Retour utilisateur (harmonisation) : créneau = date en gras au-dessus
   (comme dash-actions-jour), horaires en second plan en dessous (comme
   dash-actions-sub), même tailles/graisses que "Demandes de réservation". */
[data-theme="direction"] .la-creneau { flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
[data-theme="direction"] .la-creneau-date { font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; }
[data-theme="direction"] .la-horaires { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-theme="direction"] .la-horaires .icon { color: var(--text-muted); }

[data-theme="direction"] .la-opportunite { display: flex; align-items: center; min-width: 0; padding: 8px 12px; border-right: 1px solid #f1f5f9; }
[data-theme="direction"] .la-opp-card { display: flex; align-items: flex-start; gap: 6px; padding: 4px 8px; border-radius: 8px; }
[data-theme="direction"] .la-opp-ok { background: #ecfdf5; color: #166534; }
[data-theme="direction"] .la-opp-ok svg { color: #27ae60; flex-shrink: 0; margin-top: 1px; }
[data-theme="direction"] .la-opp-vide { background: #f7f8fa; color: var(--text-muted); }
[data-theme="direction"] .la-opp-vide svg { color: #cbd5e1; flex-shrink: 0; margin-top: 1px; }
[data-theme="direction"] .la-opp-title { font-size: 12px; font-weight: 700; }
[data-theme="direction"] .la-opp-sub { font-size: 11px; margin: 1px 0 3px; }
[data-theme="direction"] .la-opp-card .dash-pill { font-size: 11px; padding: 2px 8px; }

[data-theme="direction"] .la-status-action { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; padding: 10px 12px; }
[data-theme="direction"] .la-status-action .dash-pill { font-size: 11px; }

/* Retour utilisateur : retour aux 3 boutons directs, toujours visibles
   (Attribuer / Supprimer / Détail) — le menu kebab posait un problème
   d'affichage de l'icône en prod. Desktop : côte à côte, alignés à
   droite, largeurs libres (pas de flex:1 forcé). Mobile : empilés,
   cf. règle .la-status-action .dash-actions-action ci-dessous (media
   query "Liste d'attente mobile"). */
[data-theme="direction"] .la-status-action .btn-valider-action,
[data-theme="direction"] .la-status-action .btn-refuser-action { font-size: 12px; padding: 5px 12px; }
[data-theme="direction"] .la-status-action .btn-valider-action[disabled] { opacity: .55; cursor: default; pointer-events: none; }
[data-theme="direction"] .la-status-action .dash-actions-action { flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
[data-theme="direction"] .la-status-action .icon-btn { width: 30px; height: 30px; }

/* ── P1 — Historique des périodes de planning (modal Planning) ──────── */
.periode-planning-item {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 6px;
    margin-bottom: 6px;
}
.periode-planning-item.active { border-left-color: var(--success); background: var(--success-bg); }
.periode-planning-dates { font-size: 13px; font-weight: 600; color: var(--primary); }

.cal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; }
.cal-head { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-secondary); padding: 4px 0; }

/* ── Cellule calendrier — remplie de la couleur du taux de remplissage,
   harmonisée avec le calendrier famille (public/parent.css). "Convention
   inversée" déjà en place, conservée : plus la couleur est foncée/chaude,
   moins il reste de places (vert plein = complet, jaune = tension). ────── */
.cal-cell {
    position: relative;
    min-height: 78px;
    border-radius: 8px;
    overflow: hidden;
    cursor: default;
}
.cal-cell.vide { visibility: hidden; }
.cal-cell.cliquable { cursor: pointer; }
.cal-cell.cliquable:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.cal-cell-inner { position: relative; width: 100%; height: 100%; min-height: 78px; }

/* Numéro du jour : petit cercle gris semi-opaque plutôt qu'un simple texte
   gris — reste lisible quel que soit le fond (y compris "plein", vert plein
   avec texte blanc dessous). */
.cal-cell-num {
    position: absolute;
    top: 4px; left: 4px;
    width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.75);
    color: #6b7280;
    font-size: 9px; font-weight: 700;
    z-index: 2;
}

.cal-cell-fill {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border-left: 4px solid transparent;
}
.cal-cell-split { position: absolute; inset: 0; display: flex; flex-direction: column; }
.cal-cell-half {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border-left: 4px solid transparent;
}
.cal-cell-half:first-child { border-bottom: 1px solid rgba(255,255,255,.5); }

.cal-cell-compteur { font-size: 20px; font-weight: 800; }
.cal-cell-compteur-sm { font-size: 12px; font-weight: 700; }

/* Palette basée sur les vrais paliers d'encadrement (statut VERT/ORANGE/
   ROUGE de Presence::evaluerDemande(), cf. RemplissageController et
   direction.js::remplissageClasse()) plutôt qu'un seuil générique fixe :
   - dispo : sous la capacité, palier de pros inchangé.
   - validation : ORANGE, cette place franchirait un palier de pros.
   - plein : dernière place, même palier (pas d'approbation nécessaire).
   - complet : au-delà de la capacité, liste d'attente. */
.cal-cell-fill.rempl-dispo, .cal-cell-half.rempl-dispo { background: #D5F5E3; color: #1E8449; border-left-color: #1E8449; }
.cal-cell-fill.rempl-validation, .cal-cell-half.rempl-validation { background: #FEF9E7; color: #B7950B; border-left-color: #B7950B; }
.cal-cell-fill.rempl-proche, .cal-cell-half.rempl-proche { background: #A8D5B5; color: #1A5C35; border-left-color: #1A5C35; }
.cal-cell-fill.rempl-plein, .cal-cell-half.rempl-plein { background: #27AE60; color: #fff; border-left-color: #1E8449; }
.cal-cell-fill.rempl-complet, .cal-cell-half.rempl-complet { background: #FADBD8; color: #C0392B; border-left-color: #C0392B; }

/* Barre de progression du remplissage — proportion de pic_journee/pic_matin/
   pic_apmidi par rapport à seuil_max (direction.js::pourcentageRemplissage()). */
.cal-cell-progress { width: 60%; max-width: 70px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.15); overflow: hidden; }
.cal-cell-progress-fill { height: 100%; border-radius: 2px; }
.cal-cell-progress-fill.rempl-dispo { background: #1E8449; }
.cal-cell-progress-fill.rempl-validation { background: #B7950B; }
.cal-cell-progress-fill.rempl-proche { background: #1A5C35; }
.cal-cell-progress-fill.rempl-plein { background: #fff; }
.cal-cell-progress-fill.rempl-complet { background: #C0392B; }

/* Cloche unique en haut à droite — remplace les 3 points d'indicateurs
   (absences/demandes/liste d'attente) par une seule pastille colorée par
   priorité (plusieurs types simultanés = rouge vif). */
.cal-cell-bell {
    position: absolute;
    top: 6px; right: 6px;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    font-size: 12px;
    line-height: 1;
    z-index: 2;
}
.cal-cell-bell.cloche-absence { color: #E67E22; }
.cal-cell-bell.cloche-demande { color: #8E44AD; }
.cal-cell-bell.cloche-liste { color: #C0392B; }
.cal-cell-bell.cloche-multi { color: #E63946; animation: dirNavPillPulse 1.4s ease-in-out infinite; }

.cal-legende { display: flex; gap: 14px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; align-items: center; }
.cal-legende .cal-dot { width: 10px; min-width: 10px; height: 10px; padding: 0; margin-right: 4px; border-radius: 50%; display: inline-block; vertical-align: middle; }
.cal-legende .cal-dot.abs { background: #E67E22; }
.cal-legende .cal-dot.dem { background: #8E44AD; }
.cal-legende .cal-dot.liste { background: #C0392B; }

.pic-vue-toggle { display: flex; gap: 6px; margin-bottom: 14px; }
.pic-vue-toggle button {
    flex: 1;
    padding: 7px 4px;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
}
.pic-vue-toggle button.active { border-color: var(--primary); background: #f0f9f9; color: var(--primary); }

.cal-pic-dot {
    width: 10px; min-width: 10px; height: 10px; border-radius: 3px;
    display: inline-block; margin-right: 4px; vertical-align: middle;
}
.cal-pic-dot.rempl-dispo { background: #D5F5E3; border: 1px solid #1E8449; }
.cal-pic-dot.rempl-validation { background: #FEF9E7; border: 1px solid #B7950B; }
.cal-pic-dot.rempl-proche { background: #A8D5B5; border: 1px solid #1A5C35; }
.cal-pic-dot.rempl-plein { background: #27AE60; border: 1px solid #1E8449; }
.cal-pic-dot.rempl-complet { background: #FADBD8; border: 1px solid #C0392B; }

/* ══════════════════════════════════════════════════════════════════════
   REFONTE UI/UX — Attributions/Calendrier (charte Dashboard, section 1-14
   du brief). Aucune classe métier existante retirée : .rempl-*/statut_*/
   remplissageClasse() etc. inchangés, uniquement de nouvelles classes de
   présentation + une nouvelle palette pastel sur les classes .rempl-*
   existantes (mêmes noms, nouvelles couleurs — zéro JS à toucher pour la
   palette). .cal-nav/.pic-vue-toggle ci-dessus deviennent orphelines
   (remplacées par .cal-toolbar-*/.dash-segmented), laissées en l'état. */

[data-theme="direction"] .cal-container {
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 2px 10px rgba(13,27,62,.05); padding: 20px 22px;
}

[data-theme="direction"] .cal-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 18px;
}
/* Brief F.4 — sélecteur (Jour/Demi-journée/Places dispo/occupées) à
   gauche, navigation mois à droite : inversion purement visuelle via
   `order`, le DOM (et donc le focus/tab clavier) garde la nav en premier. */
[data-theme="direction"] .cal-toolbar-nav { order: 2; }
[data-theme="direction"] .cal-toolbar-controls { order: 1; }
[data-theme="direction"] .cal-toolbar-nav { display: flex; align-items: center; gap: 10px; }
[data-theme="direction"] .cal-nav-btn {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
    background: #fff; color: var(--primary); font-size: 15px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
[data-theme="direction"] .cal-nav-btn:hover { background: #f7f8fa; }
[data-theme="direction"] .cal-nav-label { font-size: 15px; font-weight: 800; color: var(--primary); text-transform: capitalize; min-width: 130px; }
[data-theme="direction"] .cal-nav-today {
    border: 1px solid var(--border); background: #fff; color: var(--text-secondary);
    font-family: var(--font); font-size: 12px; font-weight: 600; padding: 6px 12px;
    border-radius: 8px; cursor: pointer;
}
[data-theme="direction"] .cal-nav-today:hover { border-color: var(--primary); color: var(--primary); }
[data-theme="direction"] .cal-toolbar-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Grille — cellule premium : chiffre du jour discret en haut à gauche,
   indicateurs en haut à droite, donnée principale centrée. Densité (retour
   utilisateur, passe 2) : hauteur réduite ~13% (92→80px). */
[data-theme="direction"] .cal-cell {
    border: 1px solid var(--border); border-radius: 10px; background: #fff;
    min-height: 80px; transition: box-shadow .15s ease, border-color .15s ease;
}
[data-theme="direction"] .cal-cell.cliquable:hover { box-shadow: 0 2px 8px rgba(13,27,62,.08); transform: none; }

[data-theme="direction"] .cal-cell-topline { display: flex; align-items: flex-start; justify-content: space-between; padding: 5px 6px 0; }
/* Brief F.4/F.5 — "24/08" (JJ/MM) au lieu de "24" : la pastille passe de
   cercle fixe à pilule (largeur auto + padding horizontal), sans quoi le
   texte plus long déborde du rond de 18px. */
[data-theme="direction"] .cal-cell-num {
    position: static; width: auto; min-width: 18px; height: 18px; padding: 0 5px;
    font-size: 9px; white-space: nowrap; border-radius: 9px;
    background: rgba(255,255,255,.6); color: var(--text-secondary);
}
[data-theme="direction"] .cal-cell-indicateurs { display: flex; gap: 2px; }
/* Pastilles pastel (retour utilisateur, passe 2) — plus de rond blanc plat,
   chaque icône a son propre fond pastel assorti à sa couleur d'accent. */
[data-theme="direction"] .cal-ind {
    width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
[data-theme="direction"] .cal-ind svg { width: 9px; height: 9px; }
[data-theme="direction"] .cal-ind-validation { background: #FFF6DD; color: #9c7a12; }
[data-theme="direction"] .cal-ind-liste { background: #FCEEF3; color: #a34866; }
[data-theme="direction"] .cal-ind-demande { background: #F3EFFA; color: #6b4fa0; }
[data-theme="direction"] .cal-ind-absence { background: #FFF3E9; color: #b5651d; }
[data-theme="direction"] .cal-ind-more { background: var(--primary); color: #fff; font-size: 8px; font-weight: 800; box-shadow: none; }

/* Corps de cellule — figure principale centrée + barre + sous-texte, pour
   les 2 modes de lecture (occupées/disponibles) et les 2 granularités
   (journée pleine largeur / demi-journée scindée). */
[data-theme="direction"] .cal-cell-body { padding: 2px 8px 7px; text-align: center; }
[data-theme="direction"] .cal-cell-figure { font-size: 15px; font-weight: 800; line-height: 1.2; }
/* Barre fine (retour utilisateur : "pas de grosse progress bar"). */
[data-theme="direction"] .cal-cell-bar { height: 3px; border-radius: 2px; background: rgba(0,0,0,.07); overflow: hidden; margin: 4px auto; width: 65%; }
[data-theme="direction"] .cal-cell-bar-fill { height: 100%; border-radius: 2px; }
[data-theme="direction"] .cal-cell-subtext { font-size: 10px; font-weight: 600; opacity: .85; }

[data-theme="direction"] .cal-cell-demi { display: flex; flex-direction: column; }
[data-theme="direction"] .cal-cell-demi-half { flex: 1; padding: 3px 6px; border-radius: 0 0 9px 9px; }
[data-theme="direction"] .cal-cell-demi-half:first-child { border-bottom: 1px dashed rgba(0,0,0,.08); border-radius: 9px 9px 0 0; }
[data-theme="direction"] .cal-cell-demi-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .7; }
[data-theme="direction"] .cal-cell-demi-figure { font-size: 12px; font-weight: 800; }

/* État "Fermé" (section 3) — cellule neutre atténuée plutôt qu'un grand
   vide ; couvre aussi bien un jour hors horaires d'ouverture qu'une période
   de fermeture (les deux cas donnent seuil_max===null côté données, cf.
   estJourFerme() JS). */
[data-theme="direction"] .cal-cell.ferme { cursor: default; }
[data-theme="direction"] .cal-cell.ferme:hover { box-shadow: none; }
[data-theme="direction"] .cal-cell-ferme-body {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    height: 100%; min-height: 50px; color: #9aa3b0; font-size: 11px; font-weight: 600;
}

/* ── Palette pastel (retour utilisateur, passe 2) ─────────────────────────
   Deux axes distincts, volontairement superposables :
   1) .cal-cell-figure/.cal-cell-demi-figure/.cal-cell-bar-fill.rempl-* —
      MÊMES classes que remplissageClasse() (JS inchangé), pilotent le
      chiffre et la barre : reflètent toujours l'état de capacité réel.
   2) .cal-cell.etat-* (nouveau, cf. etatJourCarte() JS) — pilote le fond/
      la bordure de la cellule en mode "Jour" : priorité validation > liste
      d'attente > demande > absence, repli sur le remplissage si aucun
      événement. Le chiffre garde sa couleur de capacité réelle même quand
      le fond de la carte est teinté par un événement (double lecture
      volontaire, cf. brief). */
[data-theme="direction"] .cal-cell-figure.rempl-dispo,
[data-theme="direction"] .cal-cell-demi-figure.rempl-dispo { color: #1f7a46; }
/* Brief C1 — moteur de décision unifié à 3 couleurs exactement (vert/jaune/
   rouge, même logique que la case calendrier) : les paliers intermédiaires
   rempl-plein/rempl-proche (recalculés côté client à partir de pic/seuil_max)
   sont retirés, remplacés partout par le statut serveur VERT/ORANGE/ROUGE
   direct. */
[data-theme="direction"] .cal-cell-figure.rempl-validation,
[data-theme="direction"] .cal-cell-demi-figure.rempl-validation { color: #92700c; }
[data-theme="direction"] .cal-cell-figure.rempl-complet,
[data-theme="direction"] .cal-cell-demi-figure.rempl-complet { color: #9c3b2e; }

[data-theme="direction"] .cal-cell-demi-half.rempl-dispo { background: #EEF8F2; }
[data-theme="direction"] .cal-cell-demi-half.rempl-validation { background: #FFF6DD; }
[data-theme="direction"] .cal-cell-demi-half.rempl-complet { background: #FFF0EE; }

[data-theme="direction"] .cal-cell-bar-fill.rempl-dispo { background: #7CC99A; }
[data-theme="direction"] .cal-cell-bar-fill.rempl-validation { background: #D9A441; }
[data-theme="direction"] .cal-cell-bar-fill.rempl-complet { background: #E8836F; }

/* Fond/bordure dominants de la cellule (mode "Jour"), hex exacts du brief. */
[data-theme="direction"] .cal-cell.etat-dispo { background: #EEF8F2; border-color: #B9DFC8; }
[data-theme="direction"] .cal-cell.etat-complet { background: #FFF0EE; border-color: #F0C1BB; }
[data-theme="direction"] .cal-cell.etat-validation { background: #FFF6DD; border-color: #DFC06A; }
[data-theme="direction"] .cal-cell.etat-demande { background: #F3EFFA; border-color: #D5C7EC; }
[data-theme="direction"] .cal-cell.etat-liste { background: #FCEEF3; border-color: #EBC5D3; }
[data-theme="direction"] .cal-cell.etat-absence { background: #FFF3E9; border-color: #F1C7A5; }
[data-theme="direction"] .cal-cell.etat-ferme { background: #F4F5F7; border-color: #E1E4E8; }

/* Sélection (section 7) : conserve le fond métier, contour navy + ombre +
   accent or sur le numéro — déclaré APRÈS les .etat-* ci-dessus pour gagner
   sur border-color à spécificité égale (2 classes chacun). */
[data-theme="direction"] .cal-cell.selected {
    border: 2px solid var(--primary); box-shadow: 0 0 0 3px rgba(13,27,62,.08);
}
[data-theme="direction"] .cal-cell.selected .cal-cell-num { background: #c9a84c; color: #fff; }

/* Barres de progression réutilisées dans le panel "Remplissage" (.dash-
   widget-progress-fill), même mapping de couleur que .cal-cell-bar-fill. */
[data-theme="direction"] .dash-widget-progress-fill.rempl-dispo { background: #7CC99A; }
[data-theme="direction"] .dash-widget-progress-fill.rempl-validation { background: #D9A441; }
[data-theme="direction"] .dash-widget-progress-fill.rempl-complet { background: #E8836F; }

/* Légende compacte (section 11) — corrige le doublon "Liste d'attente"
   (l'ancien .cal-pic-dot.rempl-complet portait le même libellé qu'un
   concept différent, .cal-dot.liste) en distinguant clairement remplissage
   (pastilles rondes) et événements (icônes). */
[data-theme="direction"] .cal-legende-v2 { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 11px; color: var(--text-muted); padding-top: 12px; margin-top: 4px; border-top: 1px solid #f1f5f9; }
[data-theme="direction"] .cal-legende-v2 span { display: inline-flex; align-items: center; gap: 5px; }
[data-theme="direction"] .cal-legende-v2 .cal-legende-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
[data-theme="direction"] .cal-legende-v2 svg { width: 11px; height: 11px; }
/* Retour utilisateur (Priorité 3) — légende calendrier, tooltip détaillé au
   survol de chaque entrée : réutilise .info-tooltip-bubble (déjà établi,
   Paramètres) pour la bulle, avec un déclencheur adapté à la taille
   naturelle des entrées de légende (texte + icône), au lieu du bouton
   16x16px de .info-tooltip. */
[data-theme="direction"] .cal-legende-tip {
    position: relative; display: inline-flex; align-items: center; gap: 5px;
    background: none; border: none; padding: 0; margin: 0;
    font-family: var(--font); font-size: 11px; color: var(--text-muted); cursor: help;
}
[data-theme="direction"] .cal-legende-tip:hover .info-tooltip-bubble,
[data-theme="direction"] .cal-legende-tip:focus .info-tooltip-bubble,
[data-theme="direction"] .cal-legende-tip:focus-within .info-tooltip-bubble {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* Colonne contextuelle (section 8) — 73/27 desktop. */
[data-theme="direction"] .cal-layout { display: flex; align-items: flex-start; gap: 20px; margin-top: 18px; }
[data-theme="direction"] .cal-layout-main { flex: 0 0 73%; min-width: 0; }
[data-theme="direction"] .cal-layout-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 1200px) {
    [data-theme="direction"] .cal-layout { flex-direction: column; }
    [data-theme="direction"] .cal-layout-main { flex-basis: auto; width: 100%; }
    [data-theme="direction"] .cal-layout-side { flex-direction: row; flex-wrap: wrap; width: 100%; }
    [data-theme="direction"] .cal-layout-side .dash-widget { flex: 1 1 260px; }
}

@media (max-width: 768px) {
    [data-theme="direction"] .cal-container { padding: 14px 12px; border-radius: 12px; max-width: 100vw; overflow-x: hidden; }
    [data-theme="direction"] .cal-toolbar { gap: 10px; }
    /* Brief B-fix2 — retour utilisateur : les 4 toggles (Jour/Demi-journée/
       Places dispo/occupées) prenaient toute la largeur en scroll horizontal
       sur mobile ; masqués (comportement par défaut conservé). */
    [data-theme="direction"] .cal-toolbar-controls { display: none; }
    [data-theme="direction"] .cal-nav-label { min-width: 0; font-size: 13px; }
    [data-theme="direction"] .cal-cell { min-height: 64px; }
    /* Brief F.5 — pastille "JJ/MM" resserrée sur mobile (padding/font réduits). */
    [data-theme="direction"] .cal-cell-num { padding: 0 4px; font-size: 8px; }
    [data-theme="direction"] .cal-cell-figure { font-size: 12px; }
    [data-theme="direction"] .cal-cell-subtext { font-size: 9px; }
    /* Brief — le calendrier (grille 5 colonnes) dépassait la largeur d'écran ;
       .cal-wrapper/.cal-table n'existent pas dans ce projet (noms donnés par
       le brief), gardés quand même en garde-fou. overflow-x:hidden (plutôt
       qu'auto, insuffisant d'après le retour utilisateur) — la grille est
       en display:grid avec des colonnes en fr, elle n'a pas besoin de
       scroller, juste de ne jamais dépasser le viewport. */
    [data-theme="direction"] .cal-wrapper,
    [data-theme="direction"] .cal-grid,
    [data-theme="direction"] .cal-table {
        max-width: 100vw;
        overflow-x: hidden;
    }
    /* Brief — boxes "À valider"/"Opportunités" sous le calendrier : masquées
       sur mobile (redondantes avec la bottom nav Actions/Demandes). */
    [data-theme="direction"] .cal-layout-side { display: none; }
}

/* ── Gestion : sous-onglets, filtres ──────────────────────────────── */
.demande-card { margin-bottom: 10px; }

/* ── Mode bêta (migration 023) — section "À valider — recommandées" ──── */
[data-theme="direction"] .demandes-beta-section {
    margin-bottom: 20px;
    padding: 14px;
    background: var(--success-bg);
    border: 1px solid var(--success);
    border-radius: var(--radius-card);
}
[data-theme="direction"] .demandes-beta-titre { margin: 0 0 12px; font-size: 14px; color: var(--success); font-weight: 700; }
[data-theme="direction"] .demande-card-beta { border-left: 4px solid var(--success); background: #fff; margin-bottom: 10px; }
[data-theme="direction"] .demande-card-beta:last-child { margin-bottom: 0; }
[data-theme="direction"] .badge-beta { background: var(--success); color: #fff; }
[data-theme="direction"] .chip-suggestion {
    padding: 6px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill, 20px);
    background: #fff;
    color: #4a5568;
    font-family: var(--font);
    font-size: 12px;
    cursor: pointer;
}
[data-theme="direction"] .chip-suggestion:hover { border-color: var(--primary); color: var(--primary); }
[data-theme="direction"] .chip-suggestion.active { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="direction"] .badge-mode-beta { padding: 4px 10px; border-radius: var(--radius-pill, 20px); font-size: 12px; font-weight: 700; white-space: nowrap; }
[data-theme="direction"] .badge-mode-beta-auto { background: var(--success-bg); color: var(--success); }
[data-theme="direction"] .badge-mode-beta-validation { background: var(--warning-bg); color: var(--warning); }
[data-theme="direction"] .stat-box.cliquable { cursor: pointer; transition: background .15s ease; }
[data-theme="direction"] .stat-box.cliquable:hover { background: #e2e8f0; }

/* ── Paramètres > Encadrement — table des règles de validation par palier
   (migration 023) — même motif que .table-liste-attente. ─────────────── */
[data-theme="direction"] .regles-validation-table-wrap { overflow-x: auto; margin-bottom: 10px; }
[data-theme="direction"] .regles-validation-table { width: 100%; min-width: 420px; border-collapse: collapse; background: #fff; font-size: 13px; }
[data-theme="direction"] .regles-validation-table th,
[data-theme="direction"] .regles-validation-table td {
    border: 1px solid var(--border);
    padding: 6px 8px;
    text-align: left;
}
[data-theme="direction"] .regles-validation-table thead th { background: #f7f8fa; color: var(--primary); font-size: 11px; font-weight: 700; white-space: nowrap; }
[data-theme="direction"] .regles-validation-table select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-family: var(--font);
    font-size: 13px;
}

/* ── Dashboard : indicateurs de présence sur une demande ─────────── */
/* Brief C1-fix — align-items: stretch (au lieu de center) : les 3 boxes
   Arr/Pic/Dép ont un contenu de hauteur différente (Pic a un nombre en plus)
   sans ça ; stretch + flex column/justify-content:center sur .presence-item
   uniformise leur hauteur tout en gardant le contenu centré verticalement. */
.presence-row { display: flex; align-items: stretch; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.presence-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    text-align: center; min-width: 42px; padding: 4px 8px; border: 2px solid var(--border); border-radius: 6px;
}
.presence-item .nb { font-size: 16px; font-weight: 800; color: var(--primary); }
.presence-item .lb { font-size: 9px; color: var(--text-muted); }
.presence-item.alerte { border-color: var(--warning); }
.presence-item.alerte .nb { color: var(--warning); }
/* Brief C1-fix — KPI Arr/Pic/Dép cliquables (ouvrent le détail journée,
   remplacent le bouton loupe séparé). */
.presence-item-clickable { cursor: pointer; }

/* ── KPI colorés selon la règle applicable (mode bêta) — la couleur portée
   sur .presence-item elle-même (pas juste .nb) pour que l'icône (stroke:
   currentColor) suive aussi, cf. Brief C1-fix feu tricolore ; .nb garde en
   plus sa règle explicite (spécificité égale à ".presence-item .nb",
   gagnerait sinon sur la couleur héritée du parent). */
.presence-item.regle-vert { border-color: var(--success); color: var(--success); }
.presence-item.regle-vert .nb { color: var(--success); }
.presence-item.regle-orange { border-color: var(--warning); color: var(--warning); }
.presence-item.regle-orange .nb { color: var(--warning); }
.presence-item.regle-rouge { border-color: var(--error); color: var(--error); }
.presence-item.regle-rouge .nb { color: var(--error); }

/* ── Détail journée (carte demande, à côté d'Arr./Pic/Dép.) ─────────── */
.table-detail-journee-wrap { overflow-x: auto; margin-top: 8px; }
.table-detail-journee { border-collapse: collapse; font-size: 12px; }
.table-detail-journee th, .table-detail-journee td {
    border: 1px solid var(--border);
    padding: 4px 6px;
    text-align: center;
    min-width: 34px;
}
.table-detail-journee thead th { background: #f7f8fa; color: var(--primary); font-size: 10px; white-space: nowrap; }
.table-detail-journee tbody th { background: #f7f8fa; color: var(--primary); text-align: left; white-space: nowrap; font-size: 11px; }
.dj-th-sub { font-weight: 400; color: var(--text-muted); font-size: 10px; white-space: nowrap; }
.table-detail-journee td.cell-depasse { background: var(--error-bg); color: var(--error); font-weight: 700; }
.table-detail-journee td.cell-palier { background: var(--warning-bg); color: var(--warning); font-weight: 700; }
.table-detail-journee td.cell-auto { background: var(--success-bg); color: var(--success); }

/* ── Planning contractuel (modale) ────────────────────────────────── */
.planning-jour-block { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border-light); }
.planning-jour-block:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.planning-jour-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.planning-jour-label { width: 84px; font-size: 13px; font-weight: 600; color: var(--text); flex-shrink: 0; }
.planning-jour-row input[type=time] {
    flex: 1;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--font);
}
.planning-sep { color: var(--text-muted); flex-shrink: 0; }
.planning-creneaux-rapides { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-left: 92px; }
.planning-creneaux-rapides button {
    padding: 5px 2px;
    font-size: 11px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    font-family: var(--font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.planning-creneaux-rapides button:hover { border-color: var(--primary); color: var(--primary); }

/* ── Header : cloche + avatar + dropdown ──────────────────────────────── */
.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.header-bell {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,.1);
    font-size: 17px;
    cursor: not-allowed;
    opacity: .7;
}
.header-avatar-wrap { position: relative; }
.header-avatar {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: var(--cta);
    color: var(--cta-text);
    font-size: 13px; font-weight: 800;
    cursor: pointer;
    transition: transform .15s;
}
.header-avatar:hover { transform: scale(1.05); }
.header-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    overflow: hidden;
    z-index: 40;
}
.header-dropdown a {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    color: #2d3748;
    text-decoration: none;
}
.header-dropdown a:hover { background: #f7fafc; }

/* Navigation principale (.dir-nav-wrap / .dir-nav / .dir-nav-pill / .dir-dropdown)
   déplacée vers app.css — partagée avec le menu parent (public/parent.html),
   qui reprend le même système de pills scrollables. */

/* ── Navigation gestionnaire — wrap statique par défaut ───────────────────
   Par défaut (donc sur tout écran non-mobile, aucune media query ici) : les
   pills wrappent naturellement, pas de scroll, pas de flèches. L'exception
   mobile ci-dessous restaure le comportement scrollable d'origine. Scopé
   [data-theme="direction"] partout pour ne rien changer côté parent.html,
   qui partage les mêmes classes .dir-nav / .app-wrap dans app.css. Le style
   des pills elles-mêmes (couleur, police, taille, fond actif) n'est jamais
   touché ici, il reste celui défini par .dir-nav-pill/.dir-nav-pill.active
   dans app.css, identique à mobile.

   .dir-dropdown n'a volontairement AUCUNE règle display ici : forcer
   display:none !important le sortirait du contrôle de x-show (Alpine bat un
   style inline non-important, mais jamais une règle !important) — au
   rechargement de la page en mode mobile il faudrait alors ré-annuler ce
   !important, ce qui est fragile. À la place, seule la flèche caret qui
   déclenche le dropdown est masquée (elle n'a pas de x-show, donc aucun
   conflit possible) : sans déclencheur, dropdownOuvert ne devient jamais
   vrai, donc le dropdown reste fermé — plus simple et tout aussi fiable. */
[data-theme="direction"] .app-wrap {
    max-width: 1100px;
}

[data-theme="direction"] .dir-nav {
    flex-wrap: wrap;
    overflow-x: visible;
    cursor: default;
}
[data-theme="direction"] .dir-nav.dir-nav-dragging { cursor: default; }

[data-theme="direction"] .dir-nav-pill-caret { display: none; }
[data-theme="direction"] .dir-nav-arrow { display: none; }

/* ── Header (2026-08) — hamburger mobile + menu déplié ───────────────────
   BUG CRITIQUE (corrigé) : ces deux règles de base (display:none) doivent
   être déclarées AVANT le @media mobile qui les réaffiche (display:flex/
   block) — même sélecteur des deux côtés ([data-theme="direction"] .xxx),
   donc à spécificité égale, la cascade CSS retient la dernière règle
   déclarée dans le fichier, peu importe qu'elle soit dans un @media ou non.
   Ces deux blocs vivaient plus bas dans le fichier (après le @media), ce
   qui les rendait TOUJOURS display:none, y compris sur mobile — plus aucun
   moyen d'ouvrir le menu de navigation sur téléphone. */
[data-theme="direction"] .header-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}
[data-theme="direction"] .header-burger svg { width: 20px; height: 20px; }
/* B14 — sélecteur de structure mobile : caché par défaut (desktop, où le
   sélecteur inline du bandeau suffit), réaffiché par le @media ci-dessous. */
[data-theme="direction"] .mobile-structure-bar {
    display: none;
    position: relative;
    margin: -8px 0 16px;
}

/* ── Exception mobile — comportement scrollable d'origine conservé ──────── */
@media (max-width: 767px) {
    [data-theme="direction"] .app-wrap { max-width: 720px; }

    [data-theme="direction"] .dir-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        cursor: grab;
    }
    [data-theme="direction"] .dir-nav.dir-nav-dragging { cursor: grabbing; }

    /* Caret et flèches réaffichés : le dropdown Événements/Structure et le
       défilement (avec ses flèches déclenchées par navOverflow via x-show)
       redeviennent utilisables exactement comme avant — la consigne d'origine
       « mobile reste inchangé » couvrait aussi ces deux comportements, même
       si seuls flex-wrap/overflow-x/max-width/flèches étaient listés
       explicitement ici. */
    [data-theme="direction"] .dir-nav-pill-caret { display: flex; }
    [data-theme="direction"] .dir-nav-arrow { display: flex; }

    /* Refonte nav (2026-08) — sur mobile la nav principale reste le
       scroll-pills d'origine : on restaure ici verbatim les valeurs de
       .dir-nav-pill telles que définies dans app.css, pour que la sobriété
       desktop ci-dessous (hors media query) ne s'applique pas en dessous de
       767px. */
    [data-theme="direction"] .dir-nav .dir-nav-pill {
        padding: 10px 20px;
        border-radius: 20px;
        border: 1px solid #e2e8f0;
        background: transparent;
        color: #4a5568;
        font-weight: 600;
        border-bottom: none;
    }
    [data-theme="direction"] .dir-nav .dir-nav-pill:hover {
        background: #f7fafc;
        box-shadow: 0 2px 4px rgba(0,0,0,.08);
        color: #4a5568;
    }
    [data-theme="direction"] .dir-nav .dir-nav-pill.active {
        background: var(--primary);
        color: #fff;
        border-color: transparent;
        font-weight: 600;
    }
    [data-theme="direction"] .dir-nav .dir-nav-pill.active:hover { box-shadow: none; }
    [data-theme="direction"] .dir-nav-pill-wrap:has(.dir-nav-pill-icon) { margin-left: 0; }
    [data-theme="direction"] .dir-nav .dir-nav-pill-icon { padding: 10px 16px; }

    [data-theme="direction"] .brand-structure-wrap { display: none; }

    /* Retour au pattern d'origine : plus de hamburger/drawer, la
       déconnexion reste directement dans le header (.header-actions). */
    [data-theme="direction"] .header-actions { display: flex; }

    /* B14 : sélecteur de structure toujours visible sous le bandeau. */
    [data-theme="direction"] .mobile-structure-bar { display: block; }
}

/* ── Refonte nav (2026-08) — Modification 1 : nav principale sobre ────────
   Desktop uniquement (l'exception mobile ci-dessus restaure le style pill
   d'origine). Seuls les .dir-nav-pill DANS .dir-nav sont concernés — les
   filtres secondaires (.nav-pills, .dir-tabs) gardent leur propre style. */
[data-theme="direction"] .dir-nav .dir-nav-pill {
    padding: 8px 4px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #4a5568;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    box-shadow: none !important;
}
[data-theme="direction"] .dir-nav .dir-nav-pill:hover {
    background: transparent;
    color: #0d1b3e;
}
[data-theme="direction"] .dir-nav .dir-nav-pill.active {
    background: transparent;
    color: #0d1b3e;
    font-weight: 700;
    border-bottom-color: #0d1b3e;
}
[data-theme="direction"] .dir-nav .dir-nav-pill.active:hover { box-shadow: none; }

/* Pill engrenage (Paramètres) : icône seule, calée à droite du groupe de
   liens texte via :has() (motif déjà utilisé par app.css pour
   .dir-nav-pill:has(.dir-nav-pill-caret)). */
[data-theme="direction"] .dir-nav-pill-wrap:has(.dir-nav-pill-icon) { margin-left: auto; }
[data-theme="direction"] .dir-nav .dir-nav-pill-icon {
    padding: 8px;
    border-bottom-color: transparent;
}
[data-theme="direction"] .dir-nav .dir-nav-pill-icon svg { width: 18px; height: 18px; }
[data-theme="direction"] .dir-nav .dir-nav-pill-icon.active { border-bottom-color: #0d1b3e; }

/* ── Modifications 2 & 3 — sous-nav en tabs avec underline (Places,
   Familles) : nouvelle classe .dir-tabs, n'affecte ni .nav-pills (filtres
   inférieurs, restent en pills) ni parent.html (classe inutilisée là-bas). */
/* Retour utilisateur : uniformisé avec .la-tabs/.la-tab (Liste d'attente,
   déjà dans la vue Demandes) — même hauteur/soulignement or plutôt que
   l'ancien soulignement navy, pour une seule charte d'onglets dans l'app. */
[data-theme="direction"] .dir-tabs {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}
[data-theme="direction"] .dir-tabs a {
    padding: 0 0 12px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
[data-theme="direction"] .dir-tabs a:hover { color: #0d1b3e; }
[data-theme="direction"] .dir-tabs a.active {
    color: #0d1b3e;
    font-weight: 800;
    border-bottom-color: #c9a84c;
}

/* ── Header (2026-08) — sélecteur de structure inline + dropdown ─────────
   Réutilise structure.nom / structureChoices / selectStructure() déjà
   chargés (modales Équipe) ; masqué sur mobile (media query ci-dessus, menu
   hamburger). Le bouton .brand-structure n'est cliquable (curseur, chevron,
   dropdown) que pour un gestionnaire — un compte "utilisateur" voit
   seulement le nom, comme l'ancien lien "Changer de structure". */
[data-theme="direction"] .brand-structure-wrap { position: relative; margin-top: 2px; }
[data-theme="direction"] .brand-structure {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font);
    font-size: 13px;
    color: #fff;
    cursor: default;
}
[data-theme="direction"] .brand-structure.clickable { cursor: pointer; }
[data-theme="direction"] .brand-structure.clickable:hover { opacity: .85; }
[data-theme="direction"] .brand-structure-sep { opacity: .4; }
[data-theme="direction"] .brand-structure-chevron { opacity: .7; font-size: 11px; }
[data-theme="direction"] .brand-structure-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    overflow: hidden;
    z-index: 40;
}
[data-theme="direction"] .brand-structure-dropdown button {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    text-align: left;
    font-family: var(--font);
    font-size: 13px;
    color: #2d3748;
    cursor: pointer;
}
[data-theme="direction"] .brand-structure-dropdown button:hover { background: #f7fafc; }
[data-theme="direction"] .brand-structure-dropdown button.active { color: var(--primary); font-weight: 700; }

/* ── Header (2026-08) — bouton "Se déconnecter" sobre (remplace cloche +
   badge initiales) ────────────────────────────────────────────────────── */
/* Icône seule, sobre — même gabarit compact/circulaire que .header-burger
   (remplace l'ancien bouton pill "Se déconnecter" avec libellé, jugé trop
   imposant dans le header). */
[data-theme="direction"] .header-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease;
}
[data-theme="direction"] .header-logout svg { width: 18px; height: 18px; flex-shrink: 0; }
[data-theme="direction"] .header-logout:hover { background: rgba(255,255,255,.2); }

[data-theme="direction"] .header-mobile-menu {
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    margin: -8px 0 16px;
    padding: 8px;
}
[data-theme="direction"] .mobile-structure-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    cursor: default;
}
[data-theme="direction"] .mobile-structure-trigger.clickable { cursor: pointer; }
[data-theme="direction"] .mobile-structure-bar .brand-structure-dropdown { left: 0; right: 0; width: auto; }
[data-theme="direction"] .header-mobile-logout {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 6px;
    background: none;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    color: var(--error, #c0392b);
    cursor: pointer;
}
[data-theme="direction"] .header-mobile-logout svg { width: 16px; height: 16px; }
[data-theme="direction"] .header-mobile-logout:hover { background: #f7fafc; }

/* ── Paramètres — refonte visuelle (charte Dashboard, brief dédié) ────────
   Aucune logique touchée : x-model/@submit/@click identiques, uniquement
   la présentation. Le point d'accroche est .param-accordion (déjà posé sur
   la racine .card.accordion de chaque section) et .param-accordion-header
   (déjà l'étiquette cliquable de l'accordéon 100% CSS existant,
   .accordion-check:checked ~ .accordion-body) — aucune des deux classes
   globales .card/.accordion-header/.accordion-body (app.css, partagées par
   toute l'app) n'est modifiée. */

/* Grille 2 colonnes desktop — alternance ligne par ligne (pas un vrai
   masonry), suffisant pour des cartes de hauteur variable sans JS. */
[data-theme="direction"] .param-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1024px) {
    [data-theme="direction"] .param-grid { grid-template-columns: 1fr; }
}

/* Carte accordéon : coquille premium (radius/ombre/bordure), padding remis
   à zéro pour laisser l'en-tête (ci-dessous) occuper toute la largeur en
   aplat navy — le contenu (accordion-body-inner) reprend son propre
   padding séparément. */
[data-theme="direction"] .param-accordion {
    padding: 0; overflow: hidden; margin-bottom: 0;
    border-radius: 14px; border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(13,27,62,.06);
}
[data-theme="direction"] .param-widget { margin-bottom: 0; }
[data-theme="direction"] .param-widget-body form .field:last-of-type,
[data-theme="direction"] .param-widget-body > form { margin-bottom: 0; }

/* En-tête d'accordéon → bandeau navy premium (mêmes proportions que
   .dash-actions-head/.dash-widget-head déjà validés sur le Dashboard).
   Le chevron .accordion-arrow et l'ouverture/fermeture restent 100% gérés
   par le CSS pur existant (.accordion-check:checked ~ ...), aucune règle
   dupliquée — seule l'apparence change. */
[data-theme="direction"] .param-accordion-header.param-accordion-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d1b3e;
    padding: 16px 20px;
    margin: 0;
}
[data-theme="direction"] .param-accordion-icon { flex-shrink: 0; display: flex; color: #c9a84c; }
[data-theme="direction"] .param-accordion-icon svg { width: 20px; height: 20px; }
[data-theme="direction"] .param-accordion-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
[data-theme="direction"] .param-accordion-titles h3 { margin: 0; font-size: 15px; color: #fff; }
[data-theme="direction"] .param-accordion-summary { font-size: 12px; font-weight: 400; color: #94a3b8; }
[data-theme="direction"] .param-accordion-header .accordion-arrow { color: #fff; opacity: .75; }

/* Corps de carte : padding propre (la carte elle-même est à 0 désormais). */
[data-theme="direction"] .param-accordion .accordion-body-inner { padding: 18px 20px 20px; }

/* Champs — labels plus nets, inputs plus premium, focus or discret (section
   17). Scopé à .param-accordion/.param-widget-body pour ne pas déborder
   sur .field ailleurs dans l'app (modales Famille/Absence/etc., globales). */
[data-theme="direction"] .param-accordion .field label,
[data-theme="direction"] .param-widget-body .field label {
    font-size: 11px; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px;
}
[data-theme="direction"] .param-accordion .field input,
[data-theme="direction"] .param-accordion .field select,
[data-theme="direction"] .param-widget-body .field input {
    border-radius: 8px; border: 1px solid #e2e8f0; font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
[data-theme="direction"] .param-accordion .field input:focus,
[data-theme="direction"] .param-accordion .field select:focus,
[data-theme="direction"] .param-widget-body .field input:focus {
    border-color: #c9a84c; box-shadow: 0 0 0 3px rgba(201,168,76,.15); outline: none;
}
[data-theme="direction"] .param-accordion .field-grid-2 { gap: 0 14px; }

/* Toggles premium (section 11/17) — switch pastille plutôt que la checkbox
   native brute. x-model et le binding Alpine restent inchangés (toujours
   un <input type="checkbox"> réel) ; scopé à .param-accordion pour ne pas
   affecter .alertes-toggle-row côté fiche famille (préférences d'alertes,
   hors périmètre de cette refonte). */
[data-theme="direction"] .param-accordion .alertes-toggle-row input[type="checkbox"],
[data-theme="direction"] .horaire-jour-toggle input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; margin: 0;
    width: 34px; height: 20px; min-width: 34px; border-radius: 10px;
    background: #dde3ec; position: relative; cursor: pointer;
    transition: background .15s ease; flex-shrink: 0;
}
[data-theme="direction"] .param-accordion .alertes-toggle-row input[type="checkbox"]::before,
[data-theme="direction"] .horaire-jour-toggle input[type="checkbox"]::before {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; transition: transform .15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
[data-theme="direction"] .param-accordion .alertes-toggle-row input[type="checkbox"]:checked,
[data-theme="direction"] .horaire-jour-toggle input[type="checkbox"]:checked { background: #0d1b3e; }
[data-theme="direction"] .param-accordion .alertes-toggle-row input[type="checkbox"]:checked::before,
[data-theme="direction"] .horaire-jour-toggle input[type="checkbox"]:checked::before { transform: translateX(14px); }
[data-theme="direction"] .horaire-jour-toggle { width: auto; gap: 8px; }

/* Listes Fermetures/Accès & droits (sections 12/13) — icône ou avatar à
   gauche, actions plus discrètes ; réutilise .enfant-row déjà existant. */
[data-theme="direction"] .param-list-row { gap: 12px; }
[data-theme="direction"] .param-list-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    background: #FFF3E9; color: #b5651d;
    display: flex; align-items: center; justify-content: center;
}
[data-theme="direction"] .param-equipe-avatar { width: 34px; height: 34px; font-size: 12px; }
[data-theme="direction"] .param-list-row .enfant-actions { flex-wrap: wrap; justify-content: flex-end; }
[data-theme="direction"] .param-list-row .enfant-actions button:not(.icon-btn) {
    background: none; border: none; color: var(--text-secondary);
    font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 6px;
}
[data-theme="direction"] .param-list-row .enfant-actions button:not(.icon-btn):hover { color: var(--primary); text-decoration: underline; }

@media (max-width: 640px) {
    [data-theme="direction"] .param-accordion-header.param-accordion-header { padding: 14px 16px; }
    [data-theme="direction"] .param-accordion .accordion-body-inner { padding: 14px 16px 16px; }
}

/* ── Paramètres — Horaires par jour, ligne compacte ──────────────────────
   Jour | ON/OFF | Ouverture | Fermeture, sur une seule ligne (au lieu du
   bloc empilé d'origine) — mêmes x-model, aucun changement de logique. */
[data-theme="direction"] .horaire-jour-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
    flex-wrap: wrap;
}
[data-theme="direction"] .horaire-jour-row:last-of-type { border-bottom: none; }
[data-theme="direction"] .horaire-jour-label { width: 76px; flex-shrink: 0; font-weight: 600; font-size: 13px; }
[data-theme="direction"] .horaire-jour-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); width: 70px; flex-shrink: 0; }
[data-theme="direction"] .horaire-jour-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }
[data-theme="direction"] .horaire-jour-row input[type="time"] {
    width: auto;
    max-width: 110px;
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-family: var(--font);
    font-size: 13px;
}
[data-theme="direction"] .horaire-jour-row input[type="time"]:disabled { opacity: .4; }
[data-theme="direction"] .horaire-jour-sep { color: var(--text-muted); font-size: 12px; }