/* ========================================
   PLANNING ÉQUIPE HEBDO V4
   Répartition praticiens, esthétique « cartes » (reprise de
   planning_equipe_hebdo) — cartes par jour à TOUTES les largeurs, avec la
   hiérarchie 🦷 praticien → 👤 salariés et des pastilles d'horaires
   colorées par la couverture. Le modal détail, la barre flottante, les listes
   de disponibilité et le toast sont stylés par repartition_praticiens(_3).css.
======================================== */

/* --- BODY OVERRIDE (identique à hebdo) --- */
body.planning-equipe-hebdo {
    display: block;
    padding: 0;
    margin: 0;
    align-items: initial;
    justify-content: initial;
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* --- HEADER PRINCIPAL --- */
.peh4 .nav-header {
    background: linear-gradient(135deg, #007ca1 0%, #005f7a 100%);
    color: white;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    height: 80px;
    position: sticky;
    top: 0;
    z-index: 101;
}
.peh4 .nav-header h1 {
    margin: 0;
    font-size: 1.6em;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: white;
    /* Titre centré dans la barre, entre la pastille ← et le monogramme
       (la barre sticky est positionnée → l'absolu s'y ancre). Vaut pour
       les deux pages planning : hebdo (.peh4) et individuel (.piv2 aussi
       porte .peh4). Ellipse si nom/titre long. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 120px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.nav-title-mobile { display: none; }
.nav-title-desktop { display: inline; }

.peh4 .nav-links { display: flex; gap: 1rem; align-items: center; }
.peh4 .nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    line-height: 1;
    color: white;
    text-decoration: none;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.peh4 .nav-links a:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* --- BARRE NAVIGATION SEMAINE (redéfinit .week-nav du CSS v1) ---
   Sticky SOUS le header principal (lui-même sticky, 80px desktop / 60px mobile) :
   avec top:0 elle glissait dessous (z-index inférieur) et semblait ne pas coller. */
.peh4 .week-nav {
    position: sticky;
    top: 80px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(135deg, #005f7a 0%, #003d4f 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    flex-wrap: wrap;
    gap: 8px;
}
.peh4 .week-nav-center { display: flex; align-items: center; gap: 12px; flex: 1; justify-content: center; }
.peh4 .week-nav-right { display: flex; align-items: center; gap: 8px; }
.peh4 .week-nav-title { font-size: 1.1em; font-weight: 600; margin: 0; white-space: nowrap; }
/* Pastille rouge d'alertes de la semaine AFFICHÉE, « façon notification d'app » :
   superposée au coin haut-droit du titre (élément frère du h2 dans le wrapper
   positionné, créé en JS : le titre est écrasé à chaque rendu). En absolu, elle
   ne prend aucune largeur — l'année reste lisible sur mobile. Redondance voulue
   avec le badge du bouton 📋, qui annonce lui le total des 3 prochains mois. */
/* margin-right : réserve l'espace où déborde la pastille (right négatif + anneau),
   pour qu'elle ne recouvre ni le dernier chiffre de l'année ni le bouton › voisin. */
.peh4 .week-nav-title-wrap { position: relative; display: flex; min-width: 0; margin-right: 8px; }
.peh4 .peh4-week-pill {
    position: absolute;
    top: -8px;
    right: -16px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}
.peh4 .week-nav-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.peh4 .week-nav-btn:hover { background: rgba(255, 255, 255, 0.3); }

/* Bouton « Aujourd'hui » : juste l'emoji cible, sans halo/cercle,
   à la même taille que le bouton d'aide « ? » (26px). */
.peh4 #peh4-today {
    width: auto;
    height: auto;
    padding: 0 2px;
    background: transparent;
    border-radius: 0;
    font-size: 24px;
    line-height: 1;
}
.peh4 #peh4-today:hover { background: transparent; transform: scale(1.12); }
.peh4 .week-nav-btn-today {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.3s ease;
}
.peh4 .week-nav-btn-today:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

/* --- LÉGENDE DE COUVERTURE --- */
/* --- LÉGENDE (affichée dans un BadouDialog via le bouton d'aide « ? ») --- */
.peh4-legend-dialog { text-align: left; color: #334155; }
.peh4-legend-dialog .pld-section + .pld-section { margin-top: 1.1rem; }
.peh4-legend-dialog .pld-section-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    font-weight: 700;
    margin: 0 0 0.5rem 0.15rem;
}
.peh4-legend-dialog .pld-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 9px;
    background: #f8fafc;
}
.peh4-legend-dialog .pld-row + .pld-row { margin-top: 0.4rem; }
.peh4-legend-dialog .pld-ind {
    flex: 0 0 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.peh4-legend-dialog .pld-emoji { font-size: 1.25rem; line-height: 1; }
.peh4-legend-dialog .pld-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.peh4-legend-dialog .pld-text strong { font-size: 0.95rem; color: #1e293b; }
.peh4-legend-dialog .pld-desc { font-size: 0.82rem; color: #64748b; }
/* échantillon « barre de couverture » */
.peh4-legend-dialog .legend-cov {
    display: inline-block;
    width: 2.2rem;
    height: 1.3rem;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-sizing: border-box;
}
.peh4-legend-dialog .legend-cov.cov-partial { box-shadow: inset 0 -3px 0 #f59e0b; }
.peh4-legend-dialog .legend-cov.cov-none { box-shadow: inset 0 -3px 0 #dc2626; }
.peh4-legend-dialog .legend-cov.cov-solo { box-shadow: inset 0 -3px 0 #38bdf8; }
.peh4-legend-dialog .legend-cov.sal-solo { box-shadow: inset 0 -3px 0 #8b5cf6; }
/* échantillon « horaire modifié » */
.peh4-legend-dialog .legend-modif-txt {
    background: linear-gradient(135deg, #fef9c3, #fde047);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.82rem;
    font-weight: 600;
}

/* --- WRAPPER + APP --- */
.peh4 .hebdo-wrapper { padding: 16px; max-width: 560px; margin: 0 auto; }
/* La barre flottante (#rep3-bottombar) ne doit pas masquer la dernière carte */
#peh4-app { padding-bottom: 6rem; }
#peh4-loading { text-align: center; color: #475569; padding: 2rem 0; }

/* --- CARTES PAR JOUR (cartes à toutes les largeurs) --- */
.day-card {
    background: white;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.day-card.today {
    border: 2px solid red;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}
.day-card-header {
    padding: 12px 16px;
    background: #f8fafb;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 0.98em;
    color: #333;
}
.day-card.weekend .day-card-header,
.day-card.holiday .day-card-header { background: #f0f0f0; color: #999; }
.day-card-body { padding: 8px 8px 4px; }
.day-card-empty {
    padding: 16px;
    text-align: center;
    color: #999;
    font-style: italic;
}

/* Jour écoulé (non-admin) : carte estompée, données jamais reçues du serveur */
.peh4-day-past { opacity: 0.6; }
.peh4-day-past .day-card-header { cursor: default; }

/* Jour vide (week-end ou jour sans présence) : carte compacte, corps mince
   réduit au pied « + Ajouter ». */
.day-card.peh4-day-compact { opacity: 0.92; }
.day-card.peh4-day-compact .day-card-body { padding: 6px 8px; }

/* En-tête de jour cliquable → ajouter un praticien / salarié. Tout l'en-tête est
   cliquable ; un « ＋ » discret à droite signale l'action. */
.day-card-header.peh4-day-head {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.day-card-header.peh4-day-head:hover { background: #eef2f7; }
.day-card.weekend .day-card-header.peh4-day-head:hover,
.day-card.holiday .day-card-header.peh4-day-head:hover { background: #e8e8e8; }
.peh4-day-add-icon {
    color: #007ca1;
    font-weight: 700;
    font-size: 1.05em;
    line-height: 1;
    opacity: 0.45;
    transition: opacity 0.15s ease;
}
.day-card-header.peh4-day-head:hover .peh4-day-add-icon { opacity: 1; }

/* Liste de sélection (praticien / salarié) dans BadouDialog. */
.peh4-pick-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 50vh;
    overflow-y: auto;
}
.peh4-pick-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.peh4-pick-item:hover { background: #f1f5f9; border-color: #94a3b8; }
.peh4-pick-name { font-weight: 600; color: #1e293b; }
.peh4-pick-sub { font-size: 0.8em; color: #64748b; }
/* Item non sélectionnable (ex. praticien « Déjà présent ce jour ») */
.peh4-pick-item.is-disabled { opacity: 0.55; cursor: default; }
.peh4-pick-item.is-disabled:hover { background: #fff; border-color: #e2e8f0; }

/* --- GROUPE PRATICIEN (cliquable → modal détail) ---
   Chaque praticien + ses salariés forment un bloc encadré distinct :
   séparation nette entre praticiens, accent à gauche qui « tient »
   ensemble le praticien et ses salariés. */
.peh4-prat-group {
    cursor: pointer;
    /* Écart inter-groupes aligné sur celui des en-têtes de salle (demande
       Quentin 06/08) : le même souffle vertical, salles affichées ou non. */
    margin-bottom: 21px;
    border: 1px solid #e3e9f0;
    border-left: 4px solid #3b82f6;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.15s ease, border-left-color 0.15s ease;
}
.peh4-prat-group:last-child { margin-bottom: 4px; }
.peh4-prat-group:hover {
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.18);
    border-left-color: #2563eb;
}

/* Encadré des salariés « sans praticien » (sans en-tête depuis le 07/08) :
   neutre, accent gris — c'est ce liseré qui le distingue d'un groupe praticien. */
.peh4-libre-group {
    margin-bottom: 21px;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
    background: #fcfcfd;
}
.peh4-libre-group:last-child { margin-bottom: 4px; }

/* --- LIGNE EMPLOYÉ --- */
.emp-row {
    display: flex;
    align-items: center;
    padding: 7px 16px;
    gap: 10px;
}
/* Nom sur DEUX lignes (colonne FIXE) : prénom au-dessus (tronqué « … » s'il est
   trop long), 3 premières lettres du nom de famille en dessous. */
.emp-row-name {
    flex: 0 0 102px;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
    overflow: hidden;
    font-size: 0.97em;
    color: #333;
}
.nm-prenom {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nm-nom {
    font-size: 0.86em;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nm-suffix { font-weight: 700; }

/* Colonnes Matin / Après-midi : occupent TOUTE la largeur restante (après la
   colonne nom fixe), partagée à parts égales → toujours alignées d'une ligne à
   l'autre. Horaires sur une seule ligne. */
.emp-row-slots { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; }
.emp-row-slot { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }

/* En-tête de colonnes « Matin / Après-midi » (une fois par carte) */
.peh4-cols-head {
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid #eef1f4;
}
.peh4-col-label {
    font-size: 0.62em;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    text-align: center;
}
.emp-row-slot-value {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 4px;
    border-radius: 7px;
    font-size: 0.94em;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;   /* début–fin toujours sur la même ligne */
    min-height: 1.4em;
}

/* Ligne du praticien : fond bleu léger, nom 🦷 en évidence */
.peh4-prat-row { background: #eff6ff; }
.peh4-prat-row .emp-row-name { color: #1e3a8a; font-weight: 700; }

/* Lignes salariés : l'indentation + le rail sont INTERNES à la colonne nom
   (largeur fixe) → seules les étiquettes de nom sont décalées, les colonnes
   Matin/Après-midi restent alignées avec celles du praticien. */
.peh4-sal-row .emp-row-name {
    position: relative;
    padding-left: 18px;
    font-size: 0.88em;
    color: #475569;
}
.peh4-sal-row .emp-row-name::before {
    content: '';
    position: absolute;
    left: 5px;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: #c7d6e6;
}
/* Petite patte horizontale du rail vers le nom du salarié */
.peh4-sal-row .emp-row-name::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    width: 7px;
    height: 2px;
    background: #c7d6e6;
}

/* En-tête léger d'un groupe dont le praticien est masqué dans la Vue
   (🧑‍⚕️ Nom) — l'ex-libellé « 👥 Sans praticien » a disparu le 07/08. */
.peh4-libre-head {
    padding: 6px 16px 2px;
    font-size: 0.72em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}
.peh4-libre-row { background: #fcfcfd; }

/* --- Salles légères : regroupement 🚪 Salle → praticien → salariés --- */
/* En-tête de groupe salle (toggle « Salles » du dialog Vue) : une ligne alignée
   sur les colonnes Matin / Après-midi — chaque demi-journée porte SA salle
   (praticien en salle A le matin et B l'après-midi → deux cellules), une seule
   cellule pleine largeur quand la salle ne change pas. */
/* L'écart au-dessus vient de la marge du groupe précédent (21px, uniforme) :
   l'en-tête reste au ras de SON groupe. */
.peh4-salle-row { padding-top: 0; padding-bottom: 3px; }
.peh4-salle-cell {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: 0.72em;
    font-weight: 800;
    color: #0f5c74;
    background: rgba(0, 124, 161, 0.08);
    border-radius: 6px;
    padding: 3px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.peh4-salle-cell--vide { background: none; color: #cbd5e1; font-weight: 600; }
.peh4-salle-cell--sans { background: #f8fafc; color: #94a3b8; font-weight: 600; }

/* Salles libres (sous-option ⚙️ du toggle Salles) : ligne en fin de carte,
   même langage que les en-têtes de salle, en vert « disponible ». */
.peh4-salles-libres-row { padding-bottom: 6px; }
.peh4-salles-libres-lab {
    font-size: 0.68em;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.peh4-salle-cell--libre { background: #f0fdf4; color: #166534; }
/* Le salarié orphelin placé en salle n'a plus de chip 🚪 dédiée : il se range
   sous le bandeau de SA salle, comme un praticien (retour Quentin 07/08). */

/* --- HORAIRES : pas de fond, juste le texte ---
   Couverture : l'horaire est SOULIGNÉ (vert) quand la demi-journée est bien
   couverte. Modification : l'horaire passe en ROUGE quand le réel ≠ prévu. */
.emp-row-slot-value { color: #1f2937; }              /* couleur de base de l'heure */
.emp-row-slot-value.not-scheduled { color: #bbb; }   /* « — » : rien de prévu */
.emp-row-slot-value .absence-icon { font-size: 1.05em; }
.emp-row-slot-value.peh4-slot-empty { color: transparent; }

/* Demande d'absence EN ATTENTE superposée sur le créneau de l'équipe (⏳) : fond
   ambré pointillé pour la distinguer d'une absence validée (.absent). Cliquable
   (curseur main) côté admin pour valider/refuser sur place. */
.emp-row-slot-value.peh4-pending {
    background: #fef3c7;
    border: 1px dashed #f59e0b;
    border-radius: 6px;
    position: relative;
}
.emp-row-slot-value.peh4-pending-actionable { cursor: pointer; }
.emp-row-slot-value.peh4-pending-actionable:hover { background: #fde68a; }
.emp-row-slot-value.peh4-pending .peh4-pending-badge {
    font-size: 0.7em;
    margin-left: 1px;
    vertical-align: super;
}

/* Mise en évidence one-shot de la carte-jour ciblée par la passerelle « Voir dans
   l'agenda » (?date=) : halo ambré pulsé après le défilement automatique. */
/* Surbrillance du jour ciblé par une alerte : halo ROUGE pulsé bien visible +
   bordure épaisse + léger voile rouge — l'utilisateur arrive par scroll depuis
   le centre d'alertes, la cible doit sauter aux yeux sans ouvrir de modal. */
@keyframes peh4DayFocusPulse {
    0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.65); }
    100% { box-shadow: 0 0 0 20px rgba(220, 38, 38, 0); }
}
.day-card.peh4-day-focus {
    border: 2px solid #dc2626;
    background: #fef2f2;
    animation: peh4DayFocusPulse 1.1s ease-out 3;
}
/* Surbrillance de LIGNE (salarié / praticien concernés par l'alerte cliquée) :
   pulse d'appel (~3 s) puis fond teinté + liseré gauche qui RESTENT — repère
   maintenu 30 s (ou jusqu'au premier clic sur la carte), géré par focusDayCard. */
@keyframes peh4RowFocusPulse {
    0%   { box-shadow: inset 3px 0 0 #dc2626, 0 0 0 0 rgba(220, 38, 38, 0.55); }
    100% { box-shadow: inset 3px 0 0 #dc2626, 0 0 0 12px rgba(220, 38, 38, 0); }
}
.emp-row.peh4-row-focus {
    background: #fef2f2;
    box-shadow: inset 3px 0 0 #dc2626; /* liseré gauche, persiste après le pulse */
    border-radius: 6px;
    animation: peh4RowFocusPulse 1.1s ease-out 3;
}
@media (prefers-reduced-motion: reduce) {
    .emp-row.peh4-row-focus { animation: none; }
}

/* Indicateur flottant « N décisions à notifier » (récap différé des décisions prises
   une par une sur l'agenda). Clic → dialogue Envoyer maintenant / Plus tard. */
.peh4-recap-pill {
    position: fixed; right: 18px; bottom: 84px; z-index: 9000;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px; border: none; border-radius: 999px; cursor: pointer;
    background: #007ca1; color: #fff; font-size: 0.9rem; font-weight: 600;
    box-shadow: 0 6px 18px rgba(0, 124, 161, 0.4);
    animation: peh4RecapIn 0.25s ease-out;
}
.peh4-recap-pill:hover { background: #00688a; box-shadow: 0 8px 22px rgba(0, 124, 161, 0.5); }
@keyframes peh4RecapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* 🆕 Badge des types « horaires réels » (Formation) : l'emoji signale la formation
   à côté d'heures NORMALES — jour de travail + badge, rien d'autre ne change.
   Toujours HORS du flux (absolu) : il ne consomme pas de largeur, les heures
   restent centrées et alignées verticalement avec les jours sans badge.
   Desktop : à gauche des heures (50% + demi-largeur d'un « 09:00 - 12:00 »). */
.emp-row-slot-value { position: relative; }
.piv2-formation-badge {
    position: absolute;
    right: calc(50% + 3.4em);
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    pointer-events: none;   /* le clic va aux heures, pas au badge */
}
/* Badge CLIQUABLE (planning individuel, éditeurs) : l'entrée du retrait de la
   formation — les jetons d'heures gardent leur clic d'édition. */
.piv2-formation-badge-btn { pointer-events: auto; cursor: pointer; }
/* Mobile : au-dessus des heures, centré sur sa demi-journée. */
@media (max-width: 768px) {
    .piv2-formation-badge {
        right: auto;
        left: 50%;
        top: -0.5em;
        transform: translateX(-50%);
        font-size: 0.7em;
    }
}

/* 🆕 Demande d'absence EN ATTENTE de validation admin (⏳) :
   emoji du type atténué + petit sablier en exposant. */
.emp-row-slot-value.piv2-slot-pending { background: rgba(245, 158, 11, 0.10); border-radius: 6px; }
.absence-icon.piv2-abs-pending { position: relative; opacity: 0.5; filter: grayscale(30%); }
.absence-icon.piv2-abs-pending .piv2-abs-wait {
    position: absolute; top: -0.35em; right: -0.7em;
    font-size: 0.62em; opacity: 1; filter: none;
    line-height: 1; pointer-events: none;
}

/* 🆕 SÉLECTION PANIER (salarié, pas encore envoyée) — distinct du ⏳ :
   contour pointillé bleu + coche verte. */
.emp-row-slot-value.piv2-slot-cart {
    background: rgba(37, 99, 235, 0.08);
    border: 1px dashed #2563eb; border-radius: 6px;
}
.absence-icon.piv2-abs-cart { position: relative; }
.absence-icon.piv2-abs-cart .piv2-cart-check {
    position: absolute; top: -0.35em; right: -0.7em;
    font-size: 0.6em; line-height: 1; color: #16a34a; pointer-events: none;
}

/* Sélection panier — RETRAIT (clic du même type pour retirer) : contour pointillé
   rouge + emoji barré + 🗑. */
.emp-row-slot-value.piv2-slot-cart-remove {
    background: rgba(198, 40, 40, 0.07);
    border: 1px dashed #c62828; border-radius: 6px;
}
.absence-icon.piv2-abs-cart-remove { position: relative; opacity: 0.6; }
.absence-icon.piv2-abs-cart-remove .piv2-cart-check {
    position: absolute; top: -0.35em; right: -0.7em;
    font-size: 0.6em; line-height: 1; pointer-events: none;
}

/* Chip « type actif = bouton Changer » (fusion emoji + bouton, gain de place) */
.rep3-paint-type-btn { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; padding: 4px 8px; line-height: 1; }
.rep3-paint-type-btn .piv2-brush-ico { font-size: 1.25em; }
.rep3-paint-type-btn .rep3-paint-caret { font-size: 0.7em; color: #94a3b8; }

/* Barre du bas — panier salarié */
#rep3-cart-validate.rep3-cart-validate,
#rep3-fact-validate.rep3-cart-validate { background: #16a34a; color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
#rep3-cart-validate.rep3-cart-validate:disabled,
#rep3-fact-validate.rep3-cart-validate:disabled { opacity: 0.5; cursor: not-allowed; }
#rep3-cart-list,
#rep3-fact-list {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: 76px; z-index: 1000;
    background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    max-height: 50vh; overflow-y: auto; width: min(360px, 92vw); padding: 8px;
}
.rep3-cart-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-bottom: 1px solid #f1f5f9; font-size: 0.9rem; }
.rep3-cart-item:last-child { border-bottom: none; }
.rep3-cart-rm { border: none; background: #fee2e2; color: #b91c1c; border-radius: 6px; width: 24px; height: 24px; cursor: pointer; }
.rep3-cart-empty { padding: 10px; color: #78909c; text-align: center; font-size: 0.9rem; }
.rep3-cart-total { padding: 8px 10px; margin-bottom: 4px; background: #e1f5fe; border-radius: 6px; color: #0277bd; font-size: 0.9rem; text-align: center; }
/* Ligne éphémère (feedback d'un clic) : fondu entrant puis sortant sur ~2 s. */
#rep3-cart-list.rep3-cart-flash { animation: rep3-cart-flash-fade 2s ease forwards; }
.rep3-cart-removed { color: #94a3b8; }
@keyframes rep3-cart-flash-fade {
    0%   { opacity: 0; transform: translateX(-50%) translateY(6px); }
    8%   { opacity: 1; transform: translateX(-50%) translateY(0); }
    80%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}

/* --- 🆕 Pré-bilan CP live du panier (décompte paie) --- */
/* Le planning équipe n'a pas de boîte « Total Année » (le planning individuel,
   lui, bascule la sienne) : pendant la pose de CP, une RANGÉE s'ajoute au bas de
   la barre semaine sticky — « 🏖️ Marie — CP 2026→27 : 12 j pris → ~18 j (+6) › ».
   Seule la projection attend le moteur. Tap → bilan CP (BadouDialog). */
#rep3-cp-livebar {
    display: none;
    flex-basis: 100%; order: 99;         /* rangée à part, sous ‹ titre › (flex-wrap) */
    align-items: center; justify-content: center; gap: 5px;
    margin: 2px -16px -10px;             /* pleine largeur : annule le padding 10px 16px de la barre */
    padding: 7px 12px;
    border: none; border-top: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.10);
    color: #fff; font-family: inherit; font-size: 0.92rem; font-weight: 600;
    line-height: 1.3; cursor: pointer; white-space: nowrap;
}
#rep3-cp-livebar.rep3-cpb-on { display: flex; }
#rep3-cp-livebar:hover { background: rgba(255, 255, 255, 0.18); }
#rep3-cp-livebar::after { content: ' ›'; font-size: 1.2em; opacity: 0.85; }
/* Recalcul moteur en vol : la dernière projection reste affichée, estompée. */
.rep3-cpb-wait { opacity: 0.55; }
/* Pulse à chaque changement de valeur — le compteur « vit » sous les clics.
   (Keyframes aussi utilisées par la boîte des totaux du planning individuel.) */
@keyframes rep3-cp-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}
.rep3-cpb-pulse { display: inline-block; animation: rep3-cp-pulse 0.45s ease; }
/* Cellule FANTÔME : demi-journée que la paie comptera avec le bloc du panier mais
   que personne n'a cliquée (samedi, jour off, autre demi d'un jour cliqué) —
   hachuré translucide + pointillés, cliquer la matérialise. */
.emp-row-slot-value.piv2-slot-cp-ghost {
    background: repeating-linear-gradient(135deg,
        rgba(37, 99, 235, 0.14) 0 5px, rgba(37, 99, 235, 0.04) 5px 10px);
    border: 1px dashed #93c5fd;
    border-radius: 6px;
}
.emp-row-slot-value.piv2-slot-cp-ghost .absence-icon { opacity: 0.45; }
/* En-tête « pré-bilan » de la liste du panier : lignes par période (et par
   personne côté équipe), alignées à gauche dans la pilule bleue standard. */
.rep3-cart-cp-head { text-align: left; }
.rep3-cart-cp-head .rep3-cart-cp-grise-note { color: #92400e; margin-top: 2px; }

/* Couverture du praticien : barre sous l'horaire, même épaisseur (3px).
   Couvert = AUCUNE marque (décision Quentin 23/09/2026 : le vert n'apprend rien),
   orange = partiel, rouge = non couvert, bleu = travaille seul (vacation assumée
   sans salarié, pas une anomalie). */
.emp-row-slot-value.cov-partial { box-shadow: inset 0 -3px 0 #f59e0b; }
.emp-row-slot-value.cov-solo { box-shadow: inset 0 -3px 0 #38bdf8; }
/* Salarié « travaille seul » (assumé sans praticien) : liseré violet discret,
   pendant du liseré bleu ciel cov-solo du praticien. */
.emp-row-slot-value.sal-solo { box-shadow: inset 0 -3px 0 #8b5cf6; }
/* Non couvert : la barre rouge pulse doucement pour attirer l'œil sur le problème */
.emp-row-slot-value.cov-none {
    box-shadow: inset 0 -3px 0 #dc2626;
    animation: peh4-cov-blink 1.2s ease-in-out infinite;
}
@keyframes peh4-cov-blink {
    0%, 100% { box-shadow: inset 0 -3px 0 #dc2626; }
    50%      { box-shadow: inset 0 -3px 0 #fca5a5; }
}
@media (prefers-reduced-motion: reduce) {
    .emp-row-slot-value.cov-none { animation: none; }
}
/* Horaire modifié (réel ≠ prévu) : SURLIGNEUR JAUNE sur l'heure concernée
   uniquement (début ou fin), pas sur toute la demi-journée. Jaune = « modifié »
   (convention diff/post-it) — le rouge pâle historique se lisait comme une
   erreur. Plus saturé que l'ambre « à compléter » (.peh4-partial) pour ne pas
   les confondre. */
.emp-row-slot-value .h-part.peh4-modif {
    background: linear-gradient(135deg, #fef9c3, #fde047);
    border-radius: 4px;
    padding: 1px 3px;
}
/* Horaires SUPPRIMÉS (réel vide alors que le théorique prévoit la demi-journée) :
   une suppression EST une modification → même surligneur jaune, sur le « — ». */
.emp-row-slot-value.not-scheduled.peh4-deleted {
    background: linear-gradient(135deg, #fef9c3, #fde047);
    border-radius: 4px;
    color: #854d0e;
}
.emp-row-slot-value .h-sep { margin: 0 1px; color: #94a3b8; }
/* Demi-journée incomplète (une seule heure saisie) : fond ambre « à compléter »
   + « ? » à la place de l'heure manquante. Ne pas confondre avec un créneau valide. */
.emp-row-slot-value.peh4-partial { background: #fef3c7; box-shadow: inset 0 -3px 0 #f59e0b; border-radius: 4px; }
.emp-row-slot-value .h-part.h-missing { color: #b45309; font-weight: 700; }

/* --- Mode pointeuse : provenance des créneaux (3 états), rendu SOBRE ---
   Le pointé est la NORME du régime pointeuse → il ne se signale pas (pas de
   fond, heure nue) ; prévisionnel = théorique, rien d'anormal (estompé +
   italique) ; à pointer = attendu non pointé (pointillé ambre — pointillé =
   « en attente », vs la barre pleine du « à compléter »). Un créneau
   partiellement pointé garde son signal « à compléter » (partial).
   (Choix arrêté le 04/09/2026 après essai A/B classique/sobre — l'ancien rendu
   vert/fond ambre et son bouton ?ptgstyle= ont été retirés.) */
.emp-row-slot-value.ptg-prevu { font-style: italic; color: rgba(31, 41, 55, .55); }
.emp-row-slot-value.ptg-prevu .h-sep { color: rgba(148, 163, 184, .7); }
/* --- Provenance PAR HEURE (régime pointeuse, ligne agenda) — cf. hoursHtml / hourTok :
   - .ptg-prevu-h : heure notée d'avance par l'admin, pas encore pointée (prévision :
     italique estompé, jamais de jaune « écart » — le jaune n'a de sens que sur une
     heure acquise) ;
   - .peh4-adm    : heure écrite par l'admin (présente sans pointage borne) — crayon
     en badge dans le coin haut-droit, HORS du flux. Largeur nulle : mesuré le
     15/09/2026, la cellule « 10h30-13h00 » surlignée n'a que 4 px de marge sur un
     écran de 360 px, un crayon dans le flux déborde de 21 px. Estompage par la
     couleur (pas l'opacité) pour que le badge reste plein sur une heure prévue.
   Les deux se cumulent (prévision de l'admin), et le crayon se cumule avec le jaune
   (correction adossée qui s'écarte de l'habitude). */
.h-part.ptg-prevu-h { font-style: italic; color: rgba(31, 41, 55, .55); }
.h-part.peh4-adm { position: relative; }
.h-part.peh4-adm::after {
    content: "";
    position: absolute;
    top: -5px;
    right: -6px;
    width: 10px;
    height: 10px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23475569' d='M11.5 1.2l3.3 3.3L6 13.3H2.7V10z'/%3E%3Cpath fill='%23fff' d='M10.2 3.9l1.9 1.9-1 1-1.9-1.9z' opacity='.55'/%3E%3C/svg%3E") no-repeat center / contain;
}
.emp-row-slot-value.ptg-manquant {
    outline: 1px dashed #f59e0b;
    outline-offset: -1px;
    border-radius: 4px;
    color: #92400e;
    font-style: italic;
}
/* Échantillons de la légende (dialog « ? ») : mêmes recettes que la grille. */
.pld-ptg-pointe { font-weight: 600; }
.pld-ptg-prevu { opacity: .55; font-style: italic; font-weight: 600; }
.pld-ptg-manquant { outline: 1px dashed #f59e0b; border-radius: 4px; padding: 1px 6px; color: #92400e; font-style: italic; font-weight: 600; }

/* --- Ligne ajoutée (commentaire + heures sup) --- */
/* Reprend la grille des lignes (colonne nom vide en spacer) pour aligner le texte
   à DROITE, sous les horaires — pas sous le nom. Cliquable pour éditer. */
.peh4-adj-row {
    padding: 1px 16px 6px;
    margin-top: -4px;
    cursor: pointer;
}
.peh4-adj-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-style: italic;
    font-size: 0.82em;
    color: #64748b;
    line-height: 1.2;
    overflow-wrap: anywhere;   /* un commentaire long ne doit pas élargir la carte */
}
.peh4-adj-hours {
    font-style: normal;
    font-weight: 700;
    color: #28a745;
}
/* Prorata / ajustement NÉGATIF : rouge — le vert laisserait croire à un crédit */
.peh4-adj-hours.peh4-adj-neg {
    color: #c62828;
}
/* Commentaire d'un PRATICIEN : même enveloppe bleue que sa ligne (fond #eff6ff),
   collé à elle (pas d'espace), pour qu'il lui appartienne visuellement. */
.peh4-adj-prat {
    background: #eff6ff;
    margin-top: 0;
    padding-top: 0;
}
.peh4-adj-prat .peh4-adj-text { color: #475569; }
.peh4-adj-row:hover .peh4-adj-text { text-decoration: underline; }

/* Pastilles « Tous / Aucun » et lignes « libellé + interrupteur » (toggle iOS)
   du dialog Vue : styles extraits dans assets/css/badou-toggle.css (composant
   partagé avec le dialog d'activation du hub Équipe et le wizard). */

/* Nom cliquable des panneaux du modal détail du jour : vrai BOUTON qui mène au
   planning individuel de la personne (même affordance que « Vue & plannings »).
   La couleur du texte hérite de l'en-tête hôte (violet salarié / bleu praticien). */
button.peh4-goto-planning {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.2rem 0.5rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
button.peh4-goto-planning:hover { background: #e6f6fb; border-color: #007ca1; }
button.peh4-goto-planning:active { transform: scale(0.99); }
button.peh4-goto-planning .peh4-goto-ico { opacity: 0.85; font-size: 0.9em; }

/* Ligne d'une personne dans le dialog « Vue & plannings » (admin) : le nom est un
   vrai BOUTON (ouvre son planning individuel), + interrupteur de visibilité tout
   à droite. */
.peh4-view-row { display: flex; align-items: center; gap: 0.5rem; }
.peh4-view-row > label { flex: 1 1 auto; min-width: 0; }
.peh4-view-row > label.peh4-view-switch-only { flex: 0 0 auto; }
.peh4-view-goto-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.35rem 0.55rem;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: #005f7a;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
}
.peh4-view-goto-name .peh4-view-name-txt {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.peh4-view-goto-name .peh4-view-goto-ico { flex-shrink: 0; opacity: 0.85; }
.peh4-view-goto-name:hover { background: #e6f6fb; border-color: #007ca1; }
.peh4-view-goto-name:active { transform: scale(0.99); }

/* ============================================================
   Dialog 📋 « À traiter » : onglets Couverture / Congés — même composant
   segmenté que le sélecteur Semaine / Mois / 3 mois (.rep3-seg + pastilles).
   ============================================================ */
.rep3-tab-content { display: none; }
.rep3-tab-content.active { display: block; }

/* États vides des onglets : ✅/🎉 centrés ; nudge (aucun praticien / demandes
   désactivées) = encart centré avec bouton d'action. */
.rep3-aff-empty-ok { text-align: center; color: #16a34a; margin: 1rem 0; font-weight: 600; }
.rep3-aff-empty {
    text-align: center;
    color: #475569;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 1rem 0.8rem;
    margin: 0.6rem 0;
}
.rep3-aff-empty-cta {
    display: inline-block;
    background: #007ca1;
    color: #fff;
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}
.rep3-aff-empty-cta:hover { background: #006a8a; color: #fff; }

/* Onglet Congés : liste des lots + détail (mêmes codes que la page Demandes) */
.rep3-da-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.5rem;
    font-family: inherit;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.rep3-da-summary:hover { background: #e9f7fd; border-color: #007ca1; }
.rep3-da-ava { font-size: 1.3em; flex-shrink: 0; }
.rep3-da-sumtext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rep3-da-summeta { color: #64748b; font-size: 0.82rem; font-weight: 500; }
.rep3-da-chev { color: #94a3b8; font-size: 1.3em; flex-shrink: 0; }
.rep3-da-back {
    background: none;
    border: none;
    padding: 0 0 0.5rem;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: #007ca1;
    cursor: pointer;
}
.rep3-da-detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.rep3-da-motif-demande { margin: 0 0 0.6rem; color: #475569; font-size: 0.85rem; font-style: italic; }
.rep3-da-allactions { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; }
.rep3-da-type {
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--da-color, #64748b);
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.6rem;
}
.rep3-da-type-head { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; color: #334155; margin-bottom: 0.35rem; }
.rep3-da-type-name { flex: 1 1 auto; min-width: 0; }
.rep3-da-retrait { font-size: 0.75rem; font-weight: 600; color: #b45309; background: #fef3c7; border-radius: 999px; padding: 2px 8px; }
.rep3-da-type-count { background: #e2e8f0; color: #475569; border-radius: 999px; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; }
.rep3-da-day {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
    border-top: 1px solid #f1f5f9;
    font-size: 0.88rem;
    color: #334155;
}
.rep3-da-day-date { flex: 1 1 auto; min-width: 0; }
.rep3-da-day-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.rep3-da-btn {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.rep3-da-btn:hover { background: #f1f5f9; }
.rep3-da-btn.rep3-da-ok { color: #15803d; border-color: #86efac; }
.rep3-da-btn.rep3-da-ok:hover { background: #f0fdf4; border-color: #16a34a; }
.rep3-da-btn.rep3-da-ko { color: #b91c1c; border-color: #fca5a5; }
.rep3-da-btn.rep3-da-ko:hover { background: #fef2f2; border-color: #dc2626; }
.rep3-da-motif { background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 0.6rem 0.7rem; margin-top: 0.6rem; }
.rep3-da-motif label { display: block; font-size: 0.85rem; font-weight: 600; color: #7f1d1d; margin-bottom: 0.3rem; }
.rep3-da-motif textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
    font-family: inherit;
    font-size: 0.88rem;
    resize: vertical;
}
.rep3-da-motif-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.45rem; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    /* Garantir un défilement uniquement vertical sur mobile. `clip` plutôt que
       `hidden` : hidden fait de body un conteneur de défilement et CASSE tous les
       position:sticky de la page (header + barre semaine) ; clip coupe sans ça.
       (hidden conservé en repli pour les vieux navigateurs.) */
    html, body.peh4 { overflow-x: hidden; overflow-x: clip; }
    /* Barre semaine collée sous le header mobile (60px) */
    .peh4 .week-nav { top: 60px; }
    /* Le titre de semaine (nowrap) est un flex-item : sans min-width:0 il refuse
       de rétrécir et élargit la barre au-delà du viewport. */
    .peh4 .week-nav-center { min-width: 0; }
    .peh4 .week-nav-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

    .peh4 .nav-header { padding: 0.8rem 1rem; height: 60px; min-height: 60px; }
    .peh4 .nav-header h1 { font-size: 1em; line-height: 1.2; }
    .nav-title-desktop { display: none; }
    .nav-title-mobile { display: inline; }
    .peh4 .nav-links { gap: 0.5em; }
    .peh4 .nav-links a {
        flex-direction: column;
        gap: 0.1em;
        padding: 0.5em 0.8em;
        font-size: 0.8em;
        border-radius: 4px;
    }
    .peh4 .nav-links .nav-emoji { font-size: 1.4em; line-height: 1; }

    .peh4 .week-nav { padding: 8px 12px; }
    .peh4 .week-nav-title { font-size: 0.9em; }

    .peh4 .hebdo-wrapper { padding: 8px; }

    .emp-row { padding: 8px; gap: 6px; }
    .emp-row-name { flex-basis: 92px; font-size: 0.92em; }
    .peh4-sal-row .emp-row-name { padding-left: 14px; }
    .emp-row-slot-value { font-size: 0.9em; padding: 4px 3px; }
    .peh4-col-label { font-size: 0.6em; }
}

/* ========================================================================
   CONTRÔLES PARTAGÉS — repliés depuis les ex-CSS repartition_praticiens(_3)
   après suppression des pages V1/V2/V3. Seuls les sélecteurs réellement
   produits par planning_equipe_hebdo.js/.php sont conservés ici.
   Charte planning : teal #007ca1.
======================================================================== */

/* --- Chargement + liste des disponibilités (modal détail) --- */
#peh4-loading.rep-loading,
.rep-loading { text-align: center; color: #6c757d; padding: 2rem 0; }

.rep-avail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-top: 0.4rem;
    font-size: 0.88rem;
}
.rep-avail-item.available { border-color: #bbf7d0; background: #f0fdf4; }
.rep-avail-item .rep-avail-detail { font-size: 0.8rem; }

/* ---------- Pavé horaire #peh4-hour-modal (repris du planning V2) ---------- */
/* Modal de saisie d'une heure (#peh4-hour-modal) : composant partagé — DOM et
   styles injectés par js/modules/HourModal.js. */

/* ============================================================
   Alerte de couverture — COMPOSANT UNIQUE (modal praticien + centre
   d'alertes 📋). Mêmes libellés/couleurs que la grille Affectations.
   Classes globales (le composant vit dans deux hôtes différents).
   ============================================================ */
.peh4-cov-card {
    border: 1px solid #e2e8f0;
    border-left: 4px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.5rem;
    background: #f8fafc;
}
.peh4-cov-card.is-covered { border-left-color: #16a34a; background: #f0fdf4; }
.peh4-cov-card.is-partial { border-left-color: #f59e0b; background: #fffbeb; }
.peh4-cov-card.is-gap { border-left-color: #dc2626; background: #fef2f2; }
.peh4-cov-card.clickable { cursor: pointer; transition: box-shadow 0.15s ease, transform 0.1s ease; }
.peh4-cov-card.clickable:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
.peh4-cov-card.clickable:active { transform: scale(0.985); }

/* Bouton-pilule « aller voir » des cartes d'alerte cliquables : libellé explicite
   sur fond plein — un œil seul est lu comme une icône d'info, pas comme une action
   (surtout sur mobile, sans survol). Décoratif (pointer-events:none inline) : le
   clic bulle vers la carte, qui reste cliquable partout. */
.eye-button--labeled {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: #fff;
    background: #64748b;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Bouton « Corriger » des cartes du jour (dialog 📋) : sous les lignes,
   centré, fond assorti à l'état de la carte. */
.peh4-cov-card .peh4-cov-card-eye { display: flex; width: fit-content; margin: 0.45rem auto 0; }
.peh4-cov-card.is-gap .peh4-cov-card-eye { background: #dc2626; }
.peh4-cov-card.is-partial .peh4-cov-card-eye { background: #f59e0b; }
.peh4-cov-card.clickable:hover .peh4-cov-card-eye { filter: brightness(1.08); }
.peh4-cov-card-head { font-weight: 700; color: #334155; font-size: 0.9rem; margin-bottom: 0.35rem; }
.peh4-cov-row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.12rem 0; font-size: 0.85rem; }
.peh4-cov-demi { flex: 0 0 82px; font-weight: 600; color: #475569; }
.peh4-cov-state { flex: 1 1 auto; min-width: 0; font-weight: 600; display: flex; flex-direction: column; }
.peh4-cov-sub { font-weight: 500; font-size: 0.78rem; color: #64748b; }
.peh4-cov-full .peh4-cov-state { color: #15803d; }
.peh4-cov-partial .peh4-cov-state { color: #c2410c; }
.peh4-cov-none .peh4-cov-state { color: #b91c1c; }
.peh4-cov-solo .peh4-cov-state { color: #0369a1; }

/* Carte structurelle (ambre) — partagée modal + 📋. Bloc (pas flex) : le bouton
   « Corriger » se place sous le texte, centré. */
.peh4-cov-struct {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    display: block;
}
.peh4-cov-struct .peh4-cov-struct-eye { display: flex; width: fit-content; margin: 0.45rem auto 0; }
.peh4-cov-struct-main { flex: 1; min-width: 0; }
.peh4-cov-struct-main strong { color: #b45309; }
.peh4-cov-struct-text { color: #92400e; font-size: 0.85rem; margin: 0.2rem 0 0; }
.peh4-cov-struct-chevron { color: #f59e0b; font-size: 1.6rem; font-weight: 700; line-height: 1; flex-shrink: 0; }

/* Badge 🃏 « semaine joker » sur les lignes praticien/salarié (suffixe du nom) */
.peh4-joker-badge { font-size: 0.95em; margin-left: 2px; cursor: help; }

/* Badge « +35min » : écart du JOUR d'un salarié/praticien vs ses horaires
   habituels (même calcul serveur que le planning individuel), affiché sur chaque
   carte — admin uniquement. Cliquable → propose son planning individuel. Sur sa
   PROPRE ligne sous le nom : la colonne nom (102px, ellipsis) tronquerait un
   badge inline placé après le nom de famille. */
.peh4-delta-badge {
    display: block;
    width: fit-content;
    margin-top: 2px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    font-family: inherit;
}
.peh4-delta-badge.pos {
    color: #166534;
    border: 1px solid #86efac;
    background: #f0fdf4;
}
.peh4-delta-badge.neg {
    color: #b91c1c;
    border: 1px solid #fca5a5;
    background: #fef2f2;
}
.peh4-delta-badge:hover { filter: brightness(0.94); }

/* Notification « salarié en semaine joker » : carte NEUTRE (bleu clair) — couverture
   réduite expliquée, pas une anomalie à corriger. Partagée modal + 📋. */
.peh4-cov-joker-note {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #60a5fa;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.5rem;
}
.peh4-cov-joker-note.clickable { cursor: pointer; }
.peh4-cov-joker-note.clickable:hover { background: #dbeafe; }
.peh4-cov-joker-note-text { color: #1e40af; font-size: 0.85rem; }
.peh4-cov-joker-note-text strong { color: #1d4ed8; }

/* « Travaille seul » PONCTUEL (modal détail du jour) : encart actif + bouton de pose,
   même bleu que le statut solo (pas une anomalie). */
.peh4-solo-day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    background: #e0f2fe;
    border: 1px solid #38bdf8;
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    margin-bottom: 0.5rem;
}
.peh4-solo-day-txt { font-size: 0.85rem; color: #0c4a6e; }
/* Variante SALARIÉ (« travaille seul(e) », sans praticien) : violet, pour la
   distinguer du bleu ciel du solo praticien. */
.peh4-solo-day--sal { background: #f5f3ff; border-color: #a78bfa; }
.peh4-solo-day--sal .peh4-solo-day-txt { color: #5b21b6; }
/* Variante FORMATION (ligne 🎓 sous une grille d'heures du détail du jour) :
   neutre — les heures s'éditent dans la grille SANS retirer la formation,
   le ✕ ouvre le dialog de retrait (récurrence + sort des horaires). */
.peh4-solo-day--formation { background: #f8fafc; border-color: #cbd5e1; margin-top: 0.45rem; }
.peh4-solo-day--formation .peh4-solo-day-txt { color: #475569; }
/* « Au planning type mais pas ce jour » (détail du jour) : salariés prévus avec
   ce praticien mais écartés ce jour par un remplacement — « enlevé(e) » (❌) ou
   rattaché(e) ailleurs. Gris pointillé : pas une anomalie, un geste de l'admin,
   rendu visible et réversible (↩ Rétablir, bleu = retour au planning type). */
.peh4-susp-block { margin: 0 0 0.6rem; }
.peh4-susp-title { font-size: 0.8rem; color: #64748b; margin: 0 0 0.3rem; }
.peh4-susp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.35rem;
}
.peh4-susp-txt { font-size: 0.85rem; color: #475569; }
.peh4-susp-restore {
    border: 1px solid #93c5fd;
    background: #fff;
    color: #1d4ed8;
    font-weight: 700;
    font-size: 0.78rem;
    border-radius: 8px;
    padding: 0.25rem 0.55rem;
    cursor: pointer;
    white-space: nowrap;
}
.peh4-susp-restore:hover { background: #dbeafe; }
/* Cellule d'horaire d'une demi-journée en FORMATION : éditable comme un jour
   normal, le liseré pointillé la signale (pendant du badge de la grille hebdo). */
.cap-cell.cap-formation { outline: 1px dashed #94a3b8; outline-offset: -1px; }
.peh4-solo-day-cancel,
.peh4-salsolo-day-cancel,
.peh4-cap-form-remove {
    border: 1px solid #fca5a5;
    background: #fff;
    color: #b91c1c;
    font-weight: 700;
    font-size: 0.78rem;
    border-radius: 8px;
    padding: 0.25rem 0.55rem;
    cursor: pointer;
    white-space: nowrap;
}
.peh4-solo-day-cancel:hover,
.peh4-salsolo-day-cancel:hover,
.peh4-cap-form-remove:hover { background: #fee2e2; }
/* CTA sous les horaires : un VRAI bouton (fond blanc, bordure pleine, ombre,
   hover qui soulève) — le dashed pleine largeur se lisait comme un bandeau d'info. */
.peh4-solo-day-cta { text-align: center; margin: -0.3rem 0 0.8rem; }
/* Dans la carte d'un salarié (CTA « travaille seul(e) » sous sa grille d'heures),
   le margin négatif ci-dessus ferait chevaucher la grille → espacement normal. */
.cap-sal .peh4-solo-day-cta { margin: 0.5rem 0 0.1rem; }
.peh4-solo-day-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid #38bdf8;
    background: #fff;
    color: #0369a1;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 999px;
    padding: 0.4rem 1rem;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.peh4-solo-day-btn:hover {
    background: #e0f2fe;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    transform: translateY(-1px);
}
.peh4-solo-day-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
/* CTA « salarié travaille seul(e) » (modal du jour) : même bouton-pilule, en violet. */
.peh4-salsolo-day-add { border-color: #a78bfa; color: #6d28d9; }
.peh4-salsolo-day-add:hover { background: #f5f3ff; box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25); }
/* Les deux issues de l'alerte orpheline, empilées et centrées sous la grille */
.peh4-salorphan-cta { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
/* CTA « rattacher à un autre praticien » : pilule ambre (couleur des 🔁 remplacements du jour) */
.peh4-salattach-day-btn { border-color: #fbbf24; color: #b45309; }
.peh4-salattach-day-btn:hover { background: #fef3c7; box-shadow: 0 2px 6px rgba(180, 83, 9, 0.25); }
/* Dialog « Rattacher X » : lignes praticien (base rep-avail-item, hors modal jour
   → styles autonomes). Détail vert = « sans salarié » (choix idéal). */
.peh4-attach-row { cursor: pointer; text-align: left; }
.peh4-attach-row:hover { filter: brightness(0.97); }
.peh4-attach-name { font-weight: 600; color: #0f172a; }
.peh4-attach-detail { font-size: 0.8rem; }
.peh4-attach-go { font-size: 1.05rem; }

/* Carte « salarié disponible sans praticien » (📋) : violet — anomalie de
   planification (le salarié est là « pour rien »), distincte du rouge/orange
   (trous de couverture) et du bleu (joker, solo praticien). */
.peh4-orphan-card {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-left: 4px solid #8b5cf6;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.5rem;
}
.peh4-orphan-card.clickable { cursor: pointer; }
.peh4-orphan-card.clickable:hover { background: #ede9fe; }
.peh4-orphan-card.clickable:active { transform: scale(0.985); }
.peh4-orphan-text { color: #5b21b6; font-size: 0.85rem; }
.peh4-orphan-text strong { color: #6d28d9; }
/* Bouton « Voir » de la carte : sous le contenu, centré (même pattern que la
   notification joker). Les actions (travaille seul / rattacher) vivent dans le
   modal du jour, pas sur la carte. */
.peh4-orphan-card .peh4-orphan-eye { display: flex; width: fit-content; margin: 0.45rem auto 0; background: #8b5cf6; }
.peh4-orphan-card.clickable:hover .peh4-orphan-eye { filter: brightness(1.08); }

/* --- Modal « détail du jour » (#rep3-day-detail) --- */
#rep3-day-detail .cap-sal { border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 8px; padding: 0.5rem 0.6rem; margin-bottom: 0.5rem; }
#rep3-day-detail .cap-sal.is-override { border-color: #c4b5fd; background: #f5f3ff; }
#rep3-day-detail .cap-sal-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
#rep3-day-detail .cap-sal-name { font-weight: 600; color: #065f46; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rep3-day-detail .cap-sal.is-override .cap-sal-name { color: #5b21b6; }
#rep3-day-detail .cap-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: #dee2e6;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
}
#rep3-day-detail .cap-head {
    background: #007ca1;
    color: #fff;
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.15;
    text-align: center;
    padding: 0.45rem 0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
#rep3-day-detail .cap-cell { background: #fff; display: flex; align-items: center; justify-content: center; min-width: 0; }
#rep3-day-detail .cap-modif { background: linear-gradient(135deg, #fef9c3, #fde047); } /* heure réelle ≠ théorique — surligneur jaune « modifié » */
/* Créneau incomplet (une seule des deux heures saisie) : ambre « à compléter ».
   Placé après .cap-modif pour primer en cas de double classe. */
#rep3-day-detail .cap-partial { background: linear-gradient(135deg, #fef3c7, #fde68a); box-shadow: inset 0 0 0 1.5px #f59e0b; }
#rep3-day-detail .cap-off { background: #f1f5f9; }
/* Cellule vide « rattachable » (le prat travaille ce créneau) : cliquable →
   propose le rattachement du salarié, en heures sup s'il est en repos. */
#rep3-day-detail .cap-off.cap-off-attach { cursor: pointer; transition: background 0.15s; }
#rep3-day-detail .cap-off.cap-off-attach:hover { background: #e2e8f0; box-shadow: inset 0 0 0 1px #94a3b8; }
#rep3-day-detail .cap-abs { background: #fff; font-size: 1.1rem; min-height: 2.4rem; }
#rep3-day-detail .prat-edit-h {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 600;
    color: #334155;
    padding: 0.6rem 0.15rem;
    font-family: inherit;
    cursor: pointer;
    caret-color: transparent;
}
#rep3-day-detail .prat-edit-h:focus { outline: none; background: rgba(0, 124, 161, 0.08); box-shadow: inset 0 0 0 2px #007ca1; }
#rep3-day-detail .prat-edit-h:hover { background: rgba(0, 124, 161, 0.06); }
#rep3-day-detail .prat-edit-h::placeholder { color: #cbd5e1; }
/* ❌ Enlever un salarié (ce jour) — ouvre le choix matin / après-midi / journée */
#rep3-day-detail .cap-remove {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    flex-shrink: 0;
}
#rep3-day-detail .cap-remove:hover { background: #fee2e2; }
/* ＋ / 🔁 Rattacher (liste des disponibilités) — rond teal comme le planning prat */
#rep3-day-detail .cap-add {
    background: #007ca1;
    border: 0;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
#rep3-day-detail .cap-add:hover { background: #005f7a; }
/* Ligne fantôme « ➕ Ajouter un salarié » — carte vide en pointillés sous la liste */
#rep3-day-detail .cap-ghost-add {
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.65rem 1rem;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    background: transparent;
    color: #007ca1;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
}
#rep3-day-detail .cap-ghost-add:hover { background: rgba(0, 124, 161, 0.06); border-color: #007ca1; }

/* --- BadouDialog : plus haut + actions collées en bas --- */
.badou-dialog-overlay .badou-dialog { max-height: 96vh; }
.badou-dialog-overlay .badou-dialog-content { max-height: calc(96vh - 160px); }
.badou-dialog-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 0.6rem 0;
    box-shadow: 0 -8px 12px -10px rgba(0, 0, 0, 0.35);
}

/* --- Segment Poser / Retirer (modale absences) --- */
.rep3-seg {
    display: flex;
    border: 2px solid #007ca1;
    border-radius: 10px;
    overflow: hidden;
}
.rep3-seg button {
    flex: 1;
    padding: 0.6rem 0.5rem;
    border: 0;
    background: #fff;
    color: #007ca1;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.rep3-seg button:hover { background: rgba(0, 124, 161, 0.08); }
.rep3-seg button.active {
    background: linear-gradient(135deg, #007ca1 0%, #005f7a 100%);
    color: #fff;
}
/* Contrôles de l'onglet Couverture (dialog 📋) : horizon centré, puis plage
   « Du … au … » en petit lien CENTRÉ EN DESSOUS — même empilement sur desktop
   que sur mobile (côte à côte, la plage se lisait comme un contrôle séparé). */
.rep3-aff-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.7rem;
}
/* Pilule d'horizon ALLÉGÉE : largeur naturelle, track gris, bouton actif blanc —
   le bleu plein reste réservé à la pilule d'onglets au-dessus (hiérarchie). */
.rep3-seg--light {
    border: 1px solid #cbd5e1;
    background: #e2e8f0;
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
}
.rep3-seg--light button {
    flex: 0 0 auto;
    /* Largeur minimale commune : la pastille d'alertes vit en haut à droite DANS
       le bouton (absolute) — sans min-width, les libellés courts (« Mois ») font
       des boutons étroits où elle mange le texte. */
    min-width: 8.5rem;
    text-align: center;
    padding: 0.5rem 1.25rem;
    box-sizing: border-box;
    font-size: 0.95rem;
    font-weight: 600;
    color: #475569;
    background: transparent;
    border-radius: 999px;
}
/* Petits écrans : min-width réduite pour tenir sur la ligne, mais toujours
   assez large pour que la pastille en haut à droite ne touche pas le texte */
@media (max-width: 430px) {
    .rep3-seg--light button { min-width: 6.6rem; padding: 0.5rem 0.5rem; }
}
.rep3-seg--light button:hover { background: rgba(255, 255, 255, 0.6); }
.rep3-seg--light button.active {
    background: #fff;
    color: #007ca1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
/* Plage « Du … au … » : petit lien texte, input date transparent superposé
   (clic/tap = calendrier natif) ; ↩ = retour à la semaine affichée. */
.rep3-aff-rangewrap { display: inline-flex; align-items: center; gap: 0.35rem; }
.rep3-aff-range {
    position: relative;
    cursor: pointer;
    font-size: 0.95rem;
    color: #475569;
    padding: 0.3rem 0; /* cible tactile plus haute */
}
.rep3-aff-range strong { color: #0f172a; font-weight: 700; }
.rep3-aff-range:hover { color: #007ca1; }
.rep3-aff-range input[type="date"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
}
#rep3-aff-range-reset {
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    font: inherit;
    font-size: 0.95rem;
    color: #475569;
    cursor: pointer;
}
#rep3-aff-range-reset:hover { background: #f1f5f9; color: #007ca1; }
/* Aide « ? » du dialog Affectations : en bas à droite du HEADER du dialog (barre
   de titre « Affectations », déjà en position:relative dans BadouDialog). */
.badou-dialog-header .rep3-aff-help { position: absolute; right: 10px; bottom: 8px; }

/* Pastille d'alertes par période sur les boutons du sélecteur (Semaine / Mois /
   3 mois), alimentée par le scan de fond. Dans le bouton (position relative) →
   non clippée par l'overflow:hidden du conteneur ; anneau blanc pour rester
   lisible sur le fond dégradé du bouton actif. */
.rep3-seg button { position: relative; }
.rep3-seg .rep3-seg-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 0 0 1.5px #fff;
}

/* --- Titre d'une semaine dans le dialog 📋 Affectations (vues Mois / 3 mois) --- */
.rep3-aff-week-title {
    font-weight: 700;
    color: #334155;
    margin: 0.8rem 0 0.3rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
}
#rep3-aff-weeks > div:first-child .rep3-aff-week-title {
    margin-top: 0.2rem;
    padding-top: 0;
    border-top: 0;
}

/* --- Vignettes de choix d'un type d'absence (assistant + mode pinceau) --- */
.piv2-brush-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 10px;
}
.piv2-brush-pick {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    aspect-ratio: 1 / 1; padding: 8px 6px;
    border: 2px solid #e2e8f0; border-radius: 14px;
    background: #fff; color: #334155; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; text-align: center; transition: all 0.15s;
}
.piv2-brush-pick:hover { border-color: var(--brush-color); background: #f8fafc; }
.piv2-brush-pick[aria-current="true"] {
    border-color: var(--brush-color); background: var(--brush-color); color: #fff;
}
.piv2-brush-ico { font-size: 1.6rem; line-height: 1; }
.piv2-brush-lbl { white-space: normal; line-height: 1.15; word-break: break-word; }

/* Petit spinner inline (ex. « Vérifications… » pendant un chargement). */
.piv2-inline-spinner {
    display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 6px;
    border: 2px solid #cbd5e1; border-top-color: #007ca1; border-radius: 50%;
    animation: piv2-inline-spin 0.7s linear infinite;
}
@keyframes piv2-inline-spin { to { transform: rotate(360deg); } }

/* Overlay de chargement centré (au-dessus de tout, y compris BadouDialog). */
#piv2-loading-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999;
    display: none; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.35);
}
#piv2-loading-overlay .piv2-loading-box {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    background: #fff; padding: 22px 28px; border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28); color: #334155; font-weight: 600;
}
#piv2-loading-overlay .piv2-inline-spinner { width: 30px; height: 30px; border-width: 3px; margin: 0; }

/* Message bref centré (erreurs de validation d'un dialog). */
#piv2-flash {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999;
    display: none; align-items: center; justify-content: center; pointer-events: none;
}
#piv2-flash .piv2-flash-box {
    max-width: 80%; background: linear-gradient(135deg, #dc3545, #c82333); color: #fff;
    font-weight: 600; padding: 14px 22px; border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3); text-align: center;
}

/* --- Barre flottante d'actions en bas de page --- */
#rep3-bottombar {
    position: fixed;
    bottom: 1.8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 7000; /* sous le modal détail (8500), le pavé horaire et BadouDialog (9000+) */
    display: flex;
    gap: 0.25rem;
    padding: 0.35rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #007ca1 0%, #005f7a 100%);
    box-shadow: 0 8px 25px rgba(0, 124, 161, 0.4);
}
#rep3-bottombar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.85rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
}
/* Mode 💶 « facturer au clic » : libellé (billet + aide) dans la barre (même
   gabarit que les boutons, non cliquable) + curseur explicite sur les jours. */
#rep3-bottombar .rep3-facture-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.2rem;
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.2;
    white-space: nowrap;
}
/* Le billet à la taille des icônes de la barre (.bar-ico), pas du corps de texte. */
#rep3-bottombar .rep3-facture-billet { font-size: 1.5rem; line-height: 1; }
/* Bouton d'aide « ? » : rond de 18px (taille inline) — neutraliser le padding
   générique des boutons de la barre qui l'écrasait en ovale. */
#rep3-bottombar .help-button { padding: 0; flex: 0 0 auto; }
.piv2-facture-mode .piv2-day-row,
.peh4-facture-mode .peh4-prat-group,
.peh4-facture-mode .emp-row[data-sal-row] { cursor: cell; }
/* Journée au panier 💶 (rien n'est encore enregistré) : liseré teal en pointillés,
   même signal « sélection en cours » que le panier d'absences. */
.piv2-day-row.piv2-fact-selected,
.emp-row.peh4-fact-selected {
    outline: 2px dashed #0f766e;
    outline-offset: -2px;
    background: #f0fdfa;
}
#rep3-bottombar button:hover { background: rgba(255, 255, 255, 0.16); }
#rep3-bottombar .bar-ico { font-size: 1.5rem; line-height: 1; }

/* Pastille de notification « façon iPhone » sur le bouton 📋 Affectations : total
   des alertes de couverture des 3 prochains mois (« … » pendant l'analyse),
   anneau de la couleur de la barre. */
#rep3-bar-affect { position: relative; }
#rep3-bar-affect .rep3-bar-badge {
    position: absolute;
    top: 1px;
    right: 3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #006380;
    pointer-events: none;
}

/* Teaser upsell (plans non-Pro) : bouton 📋 atténué avec un petit badge « Pro ».
   Signale la fonctionnalité praticiens sans l'activer. Admin uniquement. */
#rep3-bar-affect-locked { position: relative; opacity: 0.85; }
#rep3-bar-affect-locked .bar-ico { filter: grayscale(0.35); }
#rep3-bar-affect-locked .rep3-bar-pro {
    position: absolute;
    top: -1px;
    right: 0;
    padding: 1px 5px;
    border-radius: 999px;
    background: #f59e0b;
    color: #3d2600;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.4;
    box-shadow: 0 0 0 2px #006380;
    pointer-events: none;
}

/* Carte récurrente cliquable (modal + dialog Affectations) : élévation au survol +
   bouton-pilule « Corriger » (module EyeButton à libellé) sur fond ambre pour
   signaler clairement qu'elle mène vers la page d'affectations. */
.rep3-struct-card { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.rep3-struct-card:hover, .rep3-struct-card:focus-visible {
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.28);
    transform: translateY(-1px);
    outline: none;
}
.rep3-struct-card:active { transform: scale(0.985); }
.rep3-struct-card .peh4-cov-struct-eye { background: #f59e0b; }
.rep3-struct-card:hover .peh4-cov-struct-eye,
.rep3-struct-card:focus-visible .peh4-cov-struct-eye { filter: brightness(1.08); }
.rep3-struct-chevron { transition: transform 0.15s ease; }
.rep3-struct-card:hover .rep3-struct-chevron,
.rep3-struct-card:focus-visible .rep3-struct-chevron { transform: translateX(3px); }

/* Bouton « Corriger » de la notification joker (bleue) : sous le texte, centré. */
.peh4-cov-joker-note .peh4-cov-joker-eye { display: flex; width: fit-content; margin: 0.45rem auto 0; background: #3b82f6; }
.peh4-cov-joker-note.clickable:active { transform: scale(0.985); }
.peh4-cov-joker-note.clickable:hover .peh4-cov-joker-eye { filter: brightness(1.08); }

/* Mobile : cible tactile plus confortable, mais le bouton garde sa largeur
   naturelle (pleine largeur, il redevenait une bannière d'info). */
@media (max-width: 768px) {
    .eye-button--labeled {
        padding: 0.55rem 0.9rem;
        font-size: 0.85rem;
    }
}

/* Faces de la barre : normale / mode peinture (pose au clic). */
#rep3-bar-default, #rep3-bar-paint-mode, #rep3-bar-facture-mode { display: flex; align-items: center; gap: 0.25rem; }
#rep3-bar-paint-mode { gap: 0.4rem; padding: 0 0.3rem; }
/* Face 💶 : une seule ligne, toujours (les éléments se compactent sur mobile),
   et aucun retour à la ligne DANS les boutons (« Valider (−0:30) »). */
#rep3-bar-facture-mode { gap: 0.3rem; padding: 0 0.3rem; flex-wrap: nowrap; }
#rep3-bar-facture-mode button { white-space: nowrap; }
@media (max-width: 480px) {
    #rep3-bar-facture-mode button { padding: 0.45rem 0.55rem; font-size: 0.82rem; }
    #rep3-fact-validate.rep3-cart-validate { padding: 7px 10px; }
    #rep3-bottombar .rep3-facture-label { padding: 0.4rem 0.1rem; }
}
@media (max-width: 390px) {
    /* Très petit écran : le chip 🛒 est redondant avec « Valider (total) ». */
    #rep3-fact-chip { display: none; }
}
#rep3-bottombar #rep3-paint-type { display: inline-flex; align-items: center; gap: 0.25rem; color: #fff; padding: 0 0.3rem; font-weight: 600; }
#rep3-bottombar #rep3-paint-type .piv2-brush-ico { font-size: 1.4rem; }
#rep3-bottombar #rep3-paint-change { background: rgba(255, 255, 255, 0.16); font-weight: 600; font-size: 0.85rem; }
#rep3-bottombar #rep3-paint-change:hover { background: rgba(255, 255, 255, 0.28); }
#rep3-bottombar #rep3-paint-done { background: #22c55e; color: #06310f; font-weight: 700; font-size: 0.85rem; }
#rep3-bottombar #rep3-paint-done:hover { background: #22c55e; filter: brightness(1.06); }

/* Mode peinture : teinte douce des demi-journées cliquables (pose au clic). */
#peh4-cards.peh4-paint-mode .emp-row-slot[data-period] { cursor: pointer; }
#peh4-cards.peh4-paint-mode .emp-row-slot[data-period] .emp-row-slot-value {
    background: rgba(0, 124, 161, 0.10); border-radius: 6px; transition: background 0.12s;
}
#peh4-cards.peh4-paint-mode .emp-row-slot[data-period]:hover .emp-row-slot-value {
    background: rgba(0, 124, 161, 0.22);
}
/* Les marques du panier admin réutilisent la sélection panier du salarié
   (.piv2-slot-cart / .piv2-slot-cart-remove, plus haut dans ce fichier) — le fond
   pointillé doit rester visible par-dessus la teinte du mode peinture. */
#peh4-cards.peh4-paint-mode .emp-row-slot[data-period] .emp-row-slot-value.piv2-slot-cart {
    background: rgba(37, 99, 235, 0.10);
}
#peh4-cards.peh4-paint-mode .emp-row-slot[data-period] .emp-row-slot-value.piv2-slot-cart-remove {
    background: rgba(198, 40, 40, 0.09);
}

/* --- Toast de sauvegarde --- */
#rep3-toast {
    position: fixed;
    bottom: 6.2rem; /* au-dessus de la barre flottante */
    left: 50%;
    transform: translateX(-50%);
    background: #16a34a;
    color: #fff;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    z-index: 9500;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
#rep3-toast.show { opacity: 1; }

/* --- Pavé horaire au-dessus du dialog Affectations --- */
#modal-overlay { z-index: 9100 !important; }
#modal-horaire { z-index: 9101 !important; }

/* --- Responsive des contrôles partagés --- */
@media (max-width: 768px) {
    .badou-dialog-content .badou-dialog-actions {
        flex-direction: row;
        gap: 0.6rem;
    }
    .badou-dialog-content .badou-dialog-actions .badou-dialog-button {
        width: auto;
        flex: 1;
        min-width: 0;
        padding: 12px 10px;
    }
    /* Dialog « Commentaire et Proratas » (3 boutons) : empilés pleine largeur, pour
       ne pas tronquer « Supprimer » / « Enregistrer » dans une rangée trop étroite. */
    .piv2-adj-dialog .badou-dialog-actions { flex-direction: column; }
    .piv2-adj-dialog .badou-dialog-actions .badou-dialog-button { width: 100%; flex: none; min-width: 0; }
    /* Pilule flottante aussi sur mobile, jamais pleine largeur */
    #rep3-bottombar {
        bottom: calc(1.4rem + env(safe-area-inset-bottom));
        max-width: calc(100% - 1.5rem);
    }
    #rep3-toast { bottom: calc(5.8rem + env(safe-area-inset-bottom)); }
}

/* ── Modal-sélecteur « Agendas » (.piv2-ag-*) ───────────────────────────────────
   Picker « choisir un membre » partagé (window.PlanningShared.openAgendasPicker),
   utilisé par la V2 individuelle ET la répartition équipe. Cartes compactes,
   regroupées par section (salariés / praticiens). */
.badou-dialog.piv2-ag-dialog { max-width: 360px; }   /* place pour les colonnes 🕒/🏖️ */
.piv2-ag-section-title {
    font-size: 0.95rem; font-weight: 700; color: #005f7a;
    margin: 30px 0 8px; text-align: left;   /* gros écart entre Salariés et Praticiens */
}
.piv2-ag-section-title:first-child { margin-top: 0; }
.piv2-ag-grid { display: flex; flex-direction: column; gap: 6px; }
/* Onglet « Inactifs » : replié par défaut, déployé au clic. */
.piv2-ag-inactives { margin-top: 8px; }
.piv2-ag-inactives > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 6px;
    font-size: 0.82rem; font-weight: 600; color: #64748b; padding: 6px 2px;
}
.piv2-ag-inactives > summary::-webkit-details-marker { display: none; }
.piv2-ag-inactives > summary::before { content: "▸"; color: #94a3b8; transition: transform 0.2s; }
.piv2-ag-inactives[open] > summary::before { transform: rotate(90deg); }
.piv2-ag-inactives > summary:hover { color: #007ca1; }
.piv2-ag-inactives > .piv2-ag-grid { margin-top: 6px; }
.piv2-ag-card {
    display: flex; align-items: center; gap: 6px; width: 100%;
    padding: 9px 12px; border: 1px solid #e2e8f0; border-radius: 10px;
    background: #f8fafc; cursor: pointer; text-align: left;
    font-family: inherit; transition: all 0.15s;
}
.piv2-ag-card:hover { background: #e9f7fd; border-color: #007ca1; }
.piv2-ag-card .piv2-ag-name {
    font-weight: 600; color: #1e293b; font-size: 0.95rem; min-width: 0; flex: 1 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Totaux 🕒/🏖️ (même visuel que le hub Plannings) : colonnes de largeur FIXE,
   l'emoji calé à gauche est l'ancre d'alignement, la valeur se colle après lui.
   Placeholders « … » remplis par agpFillTotals APRÈS l'ouverture du dialog
   (vidés en cas d'échec — la ligne reste navigable). Praticiens : espaceur à
   la place du CP pour garder 🕒 et › en colonne. */
.piv2-ag-tot {
    flex: 0 0 auto; display: inline-flex; align-items: baseline;
    justify-content: flex-start; gap: 4px; white-space: nowrap;
    font-size: 0.85rem; color: #475569;
}
.piv2-ag-tot .piv2-ag-tot-val { font-variant-numeric: tabular-nums; }
.piv2-ag-tot[data-ag-kind="hsup"] { width: 62px; }
.piv2-ag-tot[data-ag-kind="cp"], .piv2-ag-tot-spacer { width: 50px; }
.piv2-ag-card .piv2-ag-chevron {
    flex: 0 0 auto; color: #94a3b8; font-size: 1.2em; line-height: 1;
    transition: transform 0.15s, color 0.15s;
}
.piv2-ag-card:hover .piv2-ag-chevron { transform: translateX(2px); color: #007ca1; }
.piv2-ag-card.piv2-ag-inactive { opacity: 0.7; }
.piv2-ag-card.piv2-ag-inactive .piv2-ag-name::after { content: ' • inactif'; color: #dc3545; font-weight: 500; font-size: 0.85em; }
/* Collaborateur affiché actuellement : repère, non cliquable. */
.piv2-ag-card.piv2-ag-current {
    background: #007ca1; border-color: #007ca1; cursor: default;
}
.piv2-ag-card.piv2-ag-current .piv2-ag-name { color: #fff; display: flex; flex-direction: column; }
.piv2-ag-card.piv2-ag-current .piv2-ag-name::after { content: 'Vue actuelle'; opacity: 0.85; font-weight: 500; font-size: 0.78em; }
.piv2-ag-card.piv2-ag-current .piv2-ag-tot { color: rgba(255, 255, 255, 0.9); }
/* Chevron rendu mais invisible (carte non cliquable) : il réserve sa colonne
   pour que les 🕒/🏖️ restent alignés avec les autres lignes. */
.piv2-ag-card.piv2-ag-current .piv2-ag-chevron { visibility: hidden; }
.piv2-ag-empty { text-align: center; color: #94a3b8; padding: 18px 0; }
/* Accès rapide au planning de toute l'équipe, en tête du picker. Même fond que
   les cartes salariés/praticiens (le bleu plein est réservé à « Vue actuelle »,
   il faisait passer ce bouton pour l'élément sélectionné) ; le chevron garde la
   lecture « ceci mène quelque part », le gras appuyé le distingue des lignes
   nominatives (même hiérarchie que le hub Plannings). */
.piv2-ag-card.piv2-ag-team { margin-bottom: 14px; padding: 12px; }
.piv2-ag-card.piv2-ag-team .piv2-ag-name { font-weight: 700; font-size: 1rem; }
.piv2-ag-card.piv2-ag-team .piv2-ag-chevron { font-size: 1.35em; }

/* ── Vue équipe en LECTURE SEULE (salarié) ──────────────────────────────────────
   La grille reste consultable mais aucune zone n'est éditable : on neutralise les
   curseurs « cliquables » des points d'entrée d'édition (groupes praticien, lignes
   salarié, en-têtes de jour, lignes d'ajustement). */
body.peh4-readonly .peh4-prat-group,
body.peh4-readonly .emp-row[data-sal-row],
body.peh4-readonly .peh4-day-head,
body.peh4-readonly .peh4-adj-row { cursor: default; }

/* ── Dialog « Total Année » (styles PARTAGÉS individuel + équipe) ──────────────
   Panneau bleu clair + items « libellé à gauche / valeur à droite », repris du
   pied de page « Total du mois » du planning individuel. Rendu par
   PlanningShared.openTotauxAnneeDialog — utilisé par la boîte des totaux du
   planning individuel ET par la barre « total année » du planning équipe (d'où
   leur présence ici, le seul CSS chargé par les deux pages). Le planning
   individuel réutilise aussi .piv2-month-foot pour son récap de fin de mois. */
.piv2-month-foot {
    margin: 18px auto 26px; max-width: none;
    background: #e3f2fd;
    color: #0f2c3f;
    border: 1px solid #b8dcf0;
    border-top: 3px solid #007ca1;   /* accent teal */
    border-radius: 12px; padding: 12px 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    text-align: center;
}
.piv2-month-foot-label {
    display: block; font-weight: 700; font-size: 0.95rem; color: #005f7a;
    margin-bottom: 8px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 124, 161, 0.18);
}
/* Une info par ligne (libellé à gauche, valeur à droite), desktop comme mobile. */
.piv2-month-foot-vals {
    display: flex; flex-direction: column; gap: 6px; align-items: stretch;
    font-size: 0.95rem;
}
.piv2-mf-item { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; }
.piv2-mf-item strong { font-weight: 700; color: #005f7a; }
.piv2-mf-item strong.piv2-hs-pos { color: #1a8a3a; }
.piv2-mf-item strong.piv2-hs-neg { color: #c62828; }
/* Couleurs signées des heures sup (vert V1 / rouge V1), partagées elles aussi. */
.piv2-hs-pos { color: #1a8a3a; }
.piv2-hs-neg { color: #c62828; }
/* Variante « dialog » : items toujours empilés, quel que soit l'écran. */
.piv2-totals-dialog .piv2-month-foot-vals { flex-direction: column; gap: 6px; align-items: stretch; }
.piv2-totals-dialog .piv2-mf-item { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; }

/* ── Barre « total année » (H.Sup annuelles d'un salarié, barre semaine) ───────
   CALQUE de la boîte « Total Année » du planning individuel (#boite-total-annee,
   styles dans planning_individuel.php), le prénom du salarié à la place de
   l'année + flèches ‹ › pour changer de salarié.
   Desktop : dans le groupe CENTRAL de la barre semaine, avant ‹ Semaine › —
   transparent sur le dégradé, texte blanc, centré avec la navigation.
   Mobile : bandeau FIXE pleine largeur sous le header (top 60px, dégradé teal),
   la barre semaine est poussée dessous (body.peh4-tb-on). */
#peh4-total-bar {
    display: flex; align-items: center; gap: 2px;
    background: transparent; color: #fff;
    font-size: 0.95em; line-height: 1.2;
}
/* Flèches ‹ › de changement de salarié : discrètes, sans pastille (la boîte
   individuelle n'en a pas — elles ne doivent pas concurrencer ‹ Semaine ›). */
#peh4-total-bar .peh4-tb-arrow {
    background: transparent; border: none; color: #fff; cursor: pointer;
    font-size: 1.25em; line-height: 1; padding: 2px 6px; border-radius: 6px;
    font-family: inherit; opacity: 0.75;
}
#peh4-total-bar .peh4-tb-arrow:hover { background: rgba(255, 255, 255, 0.18); opacity: 1; }
/* Prénom (bouton, encadré par les flèches) et total (bouton) : les DEUX ouvrent
   le dialog. Même gabarit que la boîte individuelle (prénom en gras 1.05em =
   .total-annee-label, total + chevron = .hsup-avec-details). */
#peh4-total-bar .peh4-tb-name-btn,
#peh4-total-bar .peh4-tb-main {
    display: flex; align-items: center; min-width: 0;
    background: transparent; border: none; color: #fff; cursor: pointer;
    font-family: inherit; font-size: 1em; line-height: 1.2; padding: 2px 4px;
    transition: filter 0.15s;
}
#peh4-total-bar .peh4-tb-name-btn:hover,
#peh4-total-bar .peh4-tb-main:hover { filter: brightness(1.18); }
/* Écart prénom↔total : le même 14px que le gap de .totaux-container. */
#peh4-total-bar .peh4-tb-main { margin-left: 10px; }
/* Prénom raccourci : jamais plus large que ça — l'ellipse fait le reste. */
#peh4-total-bar .peh4-tb-name {
    font-weight: 700; font-size: 1.05em; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 130px;
}
#peh4-total-bar .peh4-tb-hs { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
/* « ▾ » (et pas le « › » de la boîte individuelle) : ici les flèches ‹ › changent
   de salarié — un chevron horizontal de plus se lirait comme une navigation.
   Le triangle bas garde l'affordance « ceci ouvre un panneau ». */
#peh4-total-bar .peh4-tb-hs::after { content: ' ▾'; font-size: 0.85em; opacity: 0.85; }
@media (max-width: 768px) {
    /* Bandeau fixe sous le header (60px), même recette que le planning individuel :
       hauteur fixe 40px = l'espace réservé par la barre semaine en dessous. */
    #peh4-total-bar {
        position: fixed; top: 60px; left: 0; right: 0;
        width: 100%; height: 40px; box-sizing: border-box;
        margin: 0; padding: 6px 12px; z-index: 999;
        background: linear-gradient(135deg, #007ca1, #005f7a);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
        justify-content: center; gap: 6px;
    }
    /* La barre semaine descend sous le bandeau : top = 60 (header) + 40 (bandeau),
       et le margin-top réserve la hauteur du bandeau (fixed, hors flux). */
    .peh4.peh4-tb-on .week-nav { top: 100px; margin-top: 40px; }
}

/* Total d'heures sup annuel dans le dialog « Vue & plannings » : calé à droite du
   nom, juste avant le 📅. Teinte neutre (le vert/rouge signé viendrait charger la
   liste), chiffres tabulaires pour un alignement stable pendant le chargement. */
.peh4-view-goto-name .peh4-view-tot {
    flex-shrink: 0;
    font-weight: 700; font-size: 0.88em;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   VUE MOIS — grille calendrier des absences (bascule Semaine / Mois du bandeau,
   décision Quentin 23/09/2026). Grille CSS : 7 colonnes, 1re ligne = numéros
   (hauteur réservée), puis une ligne par « couloir » de barres. Les cases
   (.peh4-m-day) couvrent toutes les lignes de leur colonne ; les barres se posent
   par-dessus (grid-column s/e, grid-row = couloir). ZOOM (classe peh4-mzoom-N sur
   #peh4-month — pincement de la grille à deux doigts) : 0 « Noms » = barres fines
   avec le prénom, emoji du type dès que la barre est assez large (défaut téléphone),
   1 « Détail » = icône + nom + matin/ap-m (défaut desktop ; sur téléphone la
   semaine garde toute la largeur, le texte des barres passe à la ligne). Un niveau
   « Traits » (traits sans texte) a été essayé puis retiré le 23/09/2026. Barre d'UN
   jour (.d1) : prénom (+ initiale du nom en « Détail », span .peh4-m-ini), jamais de
   retour à la ligne, emoji et initiale masqués sur téléphone (Quentin 24/09/2026 : le
   nom entier faisait gonfler la case en hauteur). Mois sans aucune absence : encart
   .peh4-m-empty au-dessus de la grille, seulement dans ce cas.
   ========================================================================== */
.peh4-mode-mois #peh4-cards, .peh4-mode-mois #peh4-loading, .peh4-mode-mois #peh4-empty { display: none !important; }
/* touch-action sans pinch-zoom : le pincement revient au JS (zoom de la vue), le
   navigateur garde le défilement. */
#peh4-month { display: none; touch-action: pan-y; } /* pan-y seul : l'horizontal est à nous (balayage) */
.peh4-mode-mois #peh4-month { display: block; }
/* Mois sans aucune absence (demande Quentin 24/09/2026) : la grille nue se lisait
   comme un planning vide — encart court au-dessus, dans ce seul cas (rien au-dessus
   de la grille sinon, décision du 23/09). « ouvrez la semaine » = bouton en lien. */
.peh4-m-empty { margin: 0 0 10px; padding: 10px 14px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px; color: #475569; font-size: 0.9rem; line-height: 1.45; text-align: center; }
.peh4-m-empty strong { color: #1e293b; }
.peh4-m-empty-week { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: #007ca1; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.peh4-m-empty-week:hover, .peh4-m-empty-week:focus-visible { color: #005f7a; }
/* Changement de mois : la grille GLISSE latéralement, comme on passe d'un écran à
   l'autre sur un téléphone (demande Quentin 23/09/2026). Le JS enveloppe #peh4-month
   dans .peh4-m-viewport, pose une copie figée du mois quittant (.peh4-m-ghost, hors
   de #peh4-month pour ne pas doubler ses cases) et anime les deux transformations.
   Pendant le chargement du nouveau mois, la copie est légèrement estompée. */
.peh4-m-viewport { position: relative; overflow: hidden; }
.peh4-m-ghost { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 2; }
/* Balayage au doigt : panneau du mois voisin, découvert à côté de la grille qui suit le doigt */
.peh4-m-peek { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 2; }
.peh4-m-peek-cal { min-height: inherit; background: #f8fafc; display: flex; justify-content: center; align-items: flex-start; padding-top: 56px; }
.peh4-m-peek-title { font-size: 1.05rem; font-weight: 600; color: #64748b; }
.peh4-m-sliding .peh4-m-peek { transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1); }
@keyframes peh4MonthArrive { from { opacity: 0.35; } to { opacity: 1; } }
.peh4-m-arrive { animation: peh4MonthArrive 0.18s ease-out; }
.peh4-m-ghost.peh4-m-ghost-wait { opacity: 0.55; transition: opacity 0.2s; }
.peh4-m-sliding #peh4-month, .peh4-m-sliding .peh4-m-ghost { transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1); will-change: transform; }
@media (prefers-reduced-motion: reduce) {
    .peh4-m-sliding #peh4-month, .peh4-m-sliding .peh4-m-ghost, .peh4-m-sliding .peh4-m-peek { transition: none; }
    .peh4-m-arrive { animation: none; }
}
.peh4-m-cal { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; }
.peh4-m-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #f8fafc; }
.peh4-m-dow div { padding: 8px 6px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; text-align: center; font-weight: 600; }
.peh4-m-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 36px; grid-auto-rows: auto; border-top: 1px solid #e2e8f0; padding-bottom: 6px; }
.peh4-m-day { grid-column: var(--col, auto); grid-row: 1 / span var(--rows, 2); position: relative; z-index: 0; border-right: 1px solid #e2e8f0; min-height: 104px; padding: 5px 6px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; outline: none; }
.peh4-m-day:nth-child(7) { border-right: 0; }
.peh4-m-day:hover { background: #e0f1f6; }
.peh4-m-day:focus-visible { box-shadow: inset 0 0 0 2px #ff9800; }
.peh4-m-day.we, .peh4-m-day.out { background: #f8fafc; }
.peh4-m-day.out .peh4-m-num { opacity: 0.45; }
.peh4-m-day.past { background: #f1f5f9; }
.peh4-m-day.past .peh4-m-num { opacity: 0.45; }
/* Salarié connecté : ses jours travaillés (après .we/.out/.past pour gagner) */
.peh4-m-day.me { background: #eef8fb; }
/* Jour férié : JAUNE, mêmes teintes que le planning individuel (piv2-holiday) et
   le PDF mensuel — même code couleur d'une vue à l'autre (Quentin 23/09/2026).
   Après .we/.out/.past/.me pour gagner ; le rouge d'aujourd'hui garde le dessus
   sur le numéro (règle .today plus bas). */
.peh4-m-day.holiday { background: #fff8b3; }
.peh4-m-day.holiday .peh4-m-num { background: #ffe680; color: #7a5c00; }
.peh4-m-day.holiday .peh4-m-tag { color: #7a5c00; }
.peh4-m-dhead { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.peh4-m-num { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; font-variant-numeric: tabular-nums; font-size: 0.86rem; font-weight: 600; color: #334155; }
/* Aujourd'hui : entouré en rouge, même code que la carte du jour en vue semaine
   (.day-card.today) — anneau intérieur pour rester dans la case (demande Quentin
   23/09/2026). Le focus clavier (orange) garde le dessus. */
.peh4-m-day.today { box-shadow: inset 0 0 0 2px red; }
.peh4-m-day.today:focus-visible { box-shadow: inset 0 0 0 2px #ff9800, inset 0 0 0 4px red; }
.peh4-m-day.today .peh4-m-num { color: red; font-weight: 700; }
/* Pastille de couverture : orange partiel, rouge personne — couvert = pas de pastille
   (fiche du jour : seuls les problèmes, dans un encart). */
.peh4-m-cov { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.peh4-m-cov.warn { background: #f59e0b; }
.peh4-m-cov.ko { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25); }
.peh4-m-tag { font-size: 0.68rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
.peh4-m-bar { grid-row: var(--lane); grid-column: var(--s) / var(--e); position: relative; z-index: 1; margin: 2px 3px 0; padding: 2px 7px; border: 0; border-left: 3px solid var(--c); border-radius: 6px; background: color-mix(in srgb, var(--c) 17%, #fff); color: #1e293b; text-align: left; font: inherit; font-size: 0.78rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; min-height: 22px; }
.peh4-m-bar:hover { background: color-mix(in srgb, var(--c) 30%, #fff); }
.peh4-m-bar:focus-visible { outline: 2px solid #ff9800; outline-offset: 1px; }
.peh4-m-bar.pending { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, #fff) 0 6px, transparent 6px 12px); border: 1px dashed var(--c); border-left: 3px solid var(--c); }
.peh4-m-bar.half-matin { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, #fff) 0 50%, #f1f5f9 50%); }
.peh4-m-bar.half-aprem { background: linear-gradient(90deg, #f1f5f9 0 50%, color-mix(in srgb, var(--c) 22%, #fff) 50%); }
.peh4-m-bar.mine { box-shadow: 0 0 0 2px rgba(0, 124, 161, 0.55); }
.peh4-m-bar.peh4-m-joker { background: linear-gradient(135deg, #fef9c3, #fde047); border: 0; color: #6b5300; font-size: 0.72rem; padding: 1px 7px; min-height: 18px; border-radius: 4px; }
.peh4-m-more { grid-row: var(--lane); grid-column: var(--s) / var(--e); z-index: 1; margin: 2px 3px 0; padding: 1px 6px; font: inherit; font-size: 0.72rem; color: #64748b; background: transparent; border: 0; text-align: left; cursor: pointer; }
.peh4-m-more:hover { color: #007ca1; }
/* Fiches (BadouDialog) de la vue mois */
.peh4-m-covline { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin: 2px 0; }
.peh4-m-covbox { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; }
/* Sections de la fiche du jour : titre discret + compte, lignes homogènes */
.peh4-m-sect { display: flex; align-items: center; gap: 6px; margin: 12px 0 6px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; }
.peh4-m-sect:first-child { margin-top: 2px; }
.peh4-m-sect-n { background: #f1f5f9; color: #334155; border-radius: 999px; padding: 1px 7px; font-size: 0.7rem; letter-spacing: 0; }
.peh4-m-off { color: #64748b; font-size: 0.88rem; margin: 0; line-height: 1.45; }
.peh4-m-list { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.peh4-m-row { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; padding: 8px 10px; cursor: pointer; font: inherit; color: #1e293b; min-height: 44px; }
.peh4-m-row:hover { border-color: #007ca1; background: #e0f1f6; }
.peh4-m-row.static { cursor: default; min-height: 40px; padding: 6px 10px; }
.peh4-m-row.static:hover { border-color: #e2e8f0; background: #fff; }
.peh4-m-row .badge + .badge { margin-left: 6px; }
.peh4-m-row .who { font-weight: 600; }
.peh4-m-row .what { color: #64748b; font-size: 0.84rem; }
.peh4-m-row .badge { margin-left: auto; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; background: #f1f5f9; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.peh4-m-callout { background: #e0f1f6; border-radius: 10px; padding: 10px 12px; font-size: 0.92rem; margin: 0 0 8px; }
.peh4-m-callout strong { color: #005f7a; }
.peh4-m-muted { color: #64748b; font-size: 0.86rem; margin: 6px 0 0; }
.peh4-m-warn { color: #1e293b; font-size: 0.88rem; margin: 6px 0 0; }
/* Légende (dialog « ? ») : repères de la vue mois */
.peh4-legend-dialog .pld-m-bar { display: inline-block; width: 26px; height: 12px; border-radius: 4px; border-left: 3px solid #28a745; background: rgba(40, 167, 69, 0.2); }
.peh4-legend-dialog .pld-m-bar.pld-m-half { background: linear-gradient(90deg, rgba(40, 167, 69, 0.25) 0 50%, #f1f5f9 50%); }
.peh4-legend-dialog .pld-m-bar.pld-m-pending { background: repeating-linear-gradient(135deg, rgba(40, 167, 69, 0.25) 0 3px, transparent 3px 6px); border: 1px dashed #28a745; border-left: 3px solid #28a745; }
.peh4-legend-dialog .pld-m-bar.pld-m-joker { border: 0; background: linear-gradient(135deg, #fef9c3, #fde047); }
.peh4-legend-dialog .pld-m-dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 3px; }
.peh4-legend-dialog .pld-m-dots i:nth-child(1) { background: #f59e0b; }
.peh4-legend-dialog .pld-m-dots i:nth-child(2) { background: #dc2626; }
.peh4-legend-dialog .pld-m-me { display: inline-block; width: 26px; height: 16px; border-radius: 4px; background: #eef8fb; border: 1px solid #cfe7ef; }
/* Zoom 0 « Noms » (défaut téléphone) : barre fine avec le prénom (le nom entier dès
   que la barre couvre plusieurs jours), mêmes codes qu'en « Détail » : teinte du
   type, moitié pleine, hachures. */
.peh4-mzoom-0 .peh4-m-bar { min-height: 16px; padding: 1px 4px; margin: 2px 2px 0; border-left-width: 2px; border-radius: 4px; font-size: 0.66rem; line-height: 1.3; }
.peh4-mzoom-0 .peh4-m-bar.pending { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, #fff) 0 4px, transparent 4px 8px); border-left-width: 2px; }
.peh4-mzoom-0 .peh4-m-bar.peh4-m-joker { min-height: 14px; padding: 0 4px; font-size: 0.62rem; }
.peh4-mzoom-0 .peh4-m-more { font-size: 0.68rem; padding: 0 3px; margin: 2px 2px 0; line-height: 1.2; }
.peh4-m-ico { margin-right: 3px; }
/* Zoom 1 « Détail » = les styles de base ci-dessus. */
@media (max-width: 640px) {
    .peh4-m-dow div { padding: 6px 2px; font-size: 0.68rem; letter-spacing: 0.02em; }
    .peh4-m-week { grid-template-rows: 32px; }
    .peh4-m-day { min-height: 74px; padding: 4px 3px; gap: 3px; }
    .peh4-m-num { width: 24px; height: 24px; font-size: 0.82rem; }
    .peh4-mzoom-0 .peh4-m-tag { display: none; }
    /* L'emoji du type reste sur les barres de 2 jours et plus ; sur une barre d'un
       seul jour (≈ 40 px de texte) il coûterait 4 lettres du prénom — l'initiale du
       nom (« Détail ») aussi. À tous les niveaux de zoom. */
    .peh4-m-bar.d1 .peh4-m-ico, .peh4-m-bar.d1 .peh4-m-ini { display: none; }
    /* « Détail » sur téléphone : la semaine garde toute la largeur de l'écran, pas
       de défilement horizontal (décision Quentin 23/09/2026) — le texte des barres
       passe à la ligne (mot entier quand il tient, sinon coupé), les barres et
       leurs couloirs prennent la hauteur qu'il faut. SAUF la barre d'un seul jour :
       prénom seul, une ligne, points de suspension (Quentin 24/09/2026 : la case
       gonflait en hauteur). */
    .peh4-mzoom-1 .peh4-m-bar { white-space: normal; overflow-wrap: break-word; font-size: 0.68rem; line-height: 1.25; padding: 2px 4px; margin: 2px 2px 0; border-left-width: 2px; border-radius: 4px; }
    .peh4-mzoom-1 .peh4-m-bar.d1 { white-space: nowrap; overflow-wrap: normal; }
    .peh4-mzoom-1 .peh4-m-bar.pending { border-left-width: 2px; }
    .peh4-mzoom-1 .peh4-m-bar.peh4-m-joker { font-size: 0.64rem; padding: 1px 4px; }
}