/* ============================================================
   PlugOp — feuille de style unique.
   Outil interne dense et calme : le chrome est neutre, la couleur
   ne porte que de l'information (blocs de réservation, reset).
   Accent Plug The Jack : #F26522 — réservé aux actions.
   ============================================================ */

/* L'attribut hidden GAGNE toujours — même sur un élément dont la classe
   pose un display (leçon du 27/08 : .comment-form { display: flex }
   annulait le hidden du formulaire d'édition des signalements). */
[hidden] { display: none !important; }

:root {
    /* Accent (actions, focus) */
    --accent: #F26522;
    --accent-strong: #cf4f12;

    /* Neutres */
    --bg: #f5f4f2;
    --surface: #ffffff;
    --surface-dim: #faf9f7;
    --border: #e4e2de;
    --border-strong: #cbc8c2;
    --text: #23211f;
    --muted: #6f6b66;

    /* Couleurs d'information — sémantique métier, ne pas retoucher
       (SCHEMA.md §11.1 : mapping staffStatus, violet reset Pimcore) */
    --st-default: #FA6401;
    --st-new: rgb(102, 0, 255);
    --st-approved: green;
    --st-monitor: #f12529;
    --ban: #8a0f1a;
    --ban-dim: #fbe9ea;
    --ban-line: #b3131f;
    --reset: #9000b6;
    --reset-dim: #f7edfa;
    --nowline: #d00000;
    --ok: #1a7f37;
    --ko: #cf222e;

    /* Typographie */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.85rem;
    --fs-md: 0.95rem;
    --fs-lg: 1.1rem;
    --fs-xl: 1.3rem;

    /* Espacements */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;

    /* Divers */
    --radius: 6px;
    --touch: 2.75rem;          /* 44 px : cible tactile minimale */
    --row-h: 30px;             /* hauteur d'une heure du calendrier */
    --topbar-h: 3rem;
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-md);
    color: var(--text);
    background: var(--bg);
}

a { color: var(--accent-strong); }

button { font: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

input[type="email"], input[type="password"], input[type="date"],
select, textarea {
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3);
    min-height: 2.25rem;
}

/* ---------- Barre supérieure commune ---------- */

/* L'empilement collant (02/09) : barre PlugOp + barre de shift restent
   visibles au défilement, l'une sous l'autre — c'est l'enveloppe qui
   colle, pas chaque barre, pour que leurs hauteurs réelles (deux lignes
   possibles) n'aient pas à être devinées. Sous 900 px : voir plus bas. */
.sticky-head {
    position: sticky;
    top: 0;
    z-index: 80;
}

.topbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-4);
    min-height: var(--topbar-h);
    padding: var(--sp-1) var(--sp-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand {
    font-weight: 700;
    font-size: var(--fs-lg);
    letter-spacing: -0.01em;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

.brand::before {
    content: "";
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    border-radius: 2px;
    background: var(--accent);
    margin-right: 0.4em;
}

/* Navigation : uniquement les modules accordés au compte */
.topnav { display: flex; gap: var(--sp-1); }

.topnav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0 var(--sp-3);
    border-radius: var(--radius);
    text-decoration: none;
    font-size: var(--fs-sm);
    color: var(--muted);
    border-bottom: 2px solid transparent;
}

.topnav a:hover { background: var(--surface-dim); color: var(--text); }

.topnav a.active {
    color: var(--text);
    font-weight: 600;
    border-bottom-color: var(--accent);
}

.topbar .ctx {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.topbar .ctx form { display: flex; align-items: center; gap: var(--sp-2); }

/* Le sujet (date + centre) sur les pages sans centre — après le titre de
   la page, même rendu que le formulaire du calendrier (04/09) */
.topbar .ctx .ctx-set:not(:first-child) { margin-left: var(--sp-4); }

.topbar .spacer { flex: 1; }

.topbar .whoami {
    color: var(--muted);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.nav-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch);
    min-height: 2.25rem;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: var(--fs-lg);
    color: var(--text);
}

.nav-day:hover { background: var(--surface-dim); }

.nav-back {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 2.25rem;
    padding: 0 var(--sp-2);
    border-radius: var(--radius);
    text-decoration: none;
    font-size: var(--fs-sm);
    color: var(--text);
    white-space: nowrap;
}

.nav-back:hover { background: var(--surface-dim); }

.topbar-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    border-radius: var(--radius);
    color: var(--muted);
    vertical-align: middle;
}

.topbar-ic:hover { background: var(--surface-dim); color: var(--text); }

/* Page étroite (formulaires hors connexion) */
.narrow {
    display: flex;
    justify-content: center;
    padding: var(--sp-6) var(--sp-4);
}

.card-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font-size: var(--fs-lg);
}

.card-title .ic { color: var(--accent); }

.auth-card .success { color: var(--ok); margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }

/* ---------- Page de connexion ---------- */

.page-auth {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: var(--sp-6);
    width: min(92vw, 22rem);
}

.auth-card .brand { font-size: var(--fs-xl); }

.auth-card label {
    display: block;
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--muted);
}

.auth-card input { width: 100%; margin-top: var(--sp-1); min-height: var(--touch); }

.auth-card .error { color: var(--ko); margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch);
    padding: var(--sp-2) var(--sp-4);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    background: var(--surface-dim);
    color: var(--text);
}

.btn:hover { filter: brightness(0.97); }

.btn-primary { background: var(--accent); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--accent-strong); filter: none; }

.btn-reset { background: var(--reset); color: #fff; font-weight: 600; }

/* « Réglé » : le vert du réglé (chip settled), pas l'orange d'action —
   le bouton dit son issue */
.btn-ok { background: var(--ok); color: #fff; font-weight: 600; }

.btn-ok:hover { filter: brightness(0.92); }

/* Rouge : réservé aux actions qui marquent un client (monitor) —
   la couleur annonce la conséquence, un liseré rouge sur la fiche. */
.btn-danger { background: var(--st-monitor); color: #fff; font-weight: 600; }

.btn-danger:hover { filter: brightness(0.92); }

.btn-block { width: 100%; margin-top: var(--sp-5); }

/* ---------- Calendrier ---------- */

/* Une seule page qui défile, comme Pimcore : on descend, la grille sort de
   l'écran. Seul défilement interne restant : l'horizontal de la grille
   quand les studios dépassent la largeur. */
.cal-wrap { overflow-x: auto; }

/* La grille est pleine largeur : la zone en dessous occupe la même
   largeur — pas le gabarit centré de 72rem des autres pages. */
.page-cal .client-page { max-width: none; }

/* Deux colonnes : la principale à gauche (large), la secondaire à droite */
.day-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--sp-3);
    align-items: start;
    margin-bottom: var(--sp-3);
}

.day-main .card + .card,
.day-side .card + .card { margin-top: var(--sp-3); }

/* Sous une certaine largeur, tout retombe en une colonne — l'état puis le
   fil ; rien de plus, il s'agit seulement que rien ne casse. */
@media (max-width: 900px) {
    .day-grid { display: block; }
    .day-side { margin-top: var(--sp-3); }
}

.cal {
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    min-width: 100%;
}

.cal th, .cal td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.cal thead th { position: sticky; z-index: 30; }

.cal thead .supercat th {
    top: 0;
    height: 1.75rem;
    background: var(--text);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-right-color: rgba(255, 255, 255, 0.25);
}

.cal thead .studios th {
    top: 1.75rem;
    height: 2.25rem;
    background: var(--surface-dim);
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 0 var(--sp-2);
    border-bottom: 1px solid var(--border-strong);
}

.cal .corner { left: 0; z-index: 40; background: var(--surface-dim); }

.cal thead .studios th.studio-head { cursor: pointer; }
.cal thead .studios th.studio-head:hover { background: var(--border); }
/* À reset (Damien, 03/09 soir) : l'entre-deux entre le point discret (invisible)
   et la case pleine de Pimcore (pâteuse quand toute la ligne est à reset) —
   fond violet pâle, numéro violet, barre violette sous la case. */
.cal thead .studios th.studio-head.to-reset {
    background: var(--reset-dim);
    color: var(--reset);
    box-shadow: inset 0 -3px 0 var(--reset);
}

.cal thead .studios th.studio-head.to-reset:hover { background: #efd9f5; }

.cal td.hour {
    position: sticky;
    left: 0;
    z-index: 20;
    width: 3.4rem;
    min-width: 3.4rem;
    font-size: var(--fs-xs);
    color: var(--muted);
    text-align: right;
    padding-right: var(--sp-2);
    background: var(--surface-dim);
    border-right: 1px solid var(--border-strong);
}

.cal td.slot {
    position: relative;
    min-width: 3.6rem;
    height: var(--row-h);
    padding: 0;
}

.cal tbody { position: relative; }

.cal tbody tr:nth-child(even) td.slot { background: var(--surface-dim); }

/* #82 (Anton, Gent) : un trait épais entre les familles de studios (Rehearsal |
   DJ | Rec…), tiré de l'en-tête jusqu'en bas de la grille. */
.cal th.grp-end, .cal td.grp-end { border-right: 2px solid #8a877f; }
.cal thead .supercat th { border-right-width: 2px; }
.cal thead .supercat th:last-child, .cal th.grp-end:last-child, .cal td.grp-end:last-child { border-right-width: 1px; border-right-color: var(--border); }

/* Blocs de réservation — couleurs métier, ne pas retoucher */
.b {
    position: absolute;
    top: 0;
    left: 1px;
    right: 1px;
    z-index: 5;
    border-radius: 2px;
    background: var(--st-default);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.6);
}

.b.st-new      { background: var(--st-new); }
.b.st-approved { background: var(--st-approved); }
.b.st-monitor  { background: var(--st-monitor); }
/* Client correspondant à un banni (14/09) : hachures + liseré clair, lisible
   sans lire ; disparaît dès que l'alerte est marquée traitée. */
.b.st-banned {
    background: repeating-linear-gradient(135deg, var(--ban-line) 0 6px, #5e0a12 6px 12px);
    outline: 2px solid #ffd7da;
    outline-offset: -2px;
    box-shadow: 0 0 0 2px var(--ban-line);
    font-weight: 700;
}
.b.st-banned::before { content: "⚠ "; }

#nowline {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid var(--nowline);
    z-index: 10;
    pointer-events: none;
}

#nowline::before {
    content: "";
    position: absolute;
    left: 0;
    top: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nowline);
}

/* ---------- Barre d'état (pied de calendrier) ---------- */

.statusbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    padding: var(--sp-2) var(--sp-4);
    background: var(--surface);
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--muted);
}

.statusbar strong { color: var(--text); }

/* Le total du jour : une information qu'on lit — centrale et visible */
.statusbar-kpi { font-size: var(--fs-md); }

.statusbar-kpi strong { font-size: var(--fs-lg); font-weight: 700; }

.statusbar .legend { position: absolute; right: var(--sp-4); }

@media (max-width: 900px) {
    .statusbar { justify-content: flex-start; }
    .statusbar .legend { position: static; }
}

.legend { display: inline-flex; flex-wrap: wrap; gap: var(--sp-3); }

.legend span { display: inline-flex; align-items: center; gap: var(--sp-1); }

.legend i {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 2px;
}

/* ---------- Dialogue de reset ---------- */

dialog.reset-dialog {
    width: min(92vw, 30rem);
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
    border: 0;
    border-radius: 12px;
    padding: var(--sp-5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

dialog.reset-dialog::backdrop { background: rgba(20, 18, 16, 0.45); }

.reset-dialog h2 {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-lg);
    padding-left: var(--sp-3);
    border-left: 4px solid var(--reset);
}

.reset-dialog ul { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }

.reset-dialog li + li { margin-top: var(--sp-1); }

/* Ligne entière cliquable, cible tactile généreuse */
.check-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--touch);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius);
    cursor: pointer;
    overflow-wrap: anywhere;
    background: var(--surface-dim);
}

.check-item:hover { background: var(--border); }

.check-item input[type="checkbox"] {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    accent-color: var(--ok);
    cursor: pointer;
}

.check-item:has(input:checked) {
    background: #eaf5ec;
    color: var(--muted);
}

.check-item a { overflow-wrap: anywhere; }

.reset-dialog .lastconf {
    font-size: var(--fs-sm);
    color: var(--muted);
    border-top: 1px solid var(--border);
    padding-top: var(--sp-3);
    margin: var(--sp-3) 0;
    overflow-wrap: anywhere;
}

.reset-dialog textarea { width: 100%; min-height: 4rem; margin: var(--sp-2) 0 var(--sp-3); }

.reset-dialog .actions { display: flex; gap: var(--sp-3); justify-content: flex-end; }

/* ---------- Icônes (Tabler, SVG inline via Ui::icon) ---------- */

.ic {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.2em;
    flex: none;
}

/* ---------- Résumé de réservation (clic sur un bloc) ---------- */

.b[data-info] { cursor: pointer; }

dialog.booking-dialog {
    width: min(92vw, 20rem);
    border: 0;
    border-radius: 12px;
    padding: var(--sp-5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

dialog.booking-dialog::backdrop { background: rgba(20, 18, 16, 0.35); }

/* Édition d'un compte (Admin) en popup (02/09) : large, la carte garde
   son padding, le contenu défile DANS la popup si l'écran est bas. */
dialog.admin-edit-dialog {
    width: min(96vw, 96rem);
    max-height: 92vh;
    overflow: auto;
    border: 0;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

dialog.admin-edit-dialog::backdrop { background: rgba(20, 18, 16, 0.4); }

dialog.admin-edit-dialog > .card { margin: 0; box-shadow: none; padding-bottom: 0; }

/* Le formulaire d'édition : des BLOCS titrés qui respirent, libellés
   courts, explication en dessous, actions collées en bas de la popup. */
.admin-edit-form { margin-top: var(--sp-4); }

.admin-edit-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    display: grid;
    gap: var(--sp-4);
}

.admin-edit-fieldset:disabled { opacity: 0.6; }

.admin-group {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    background: var(--surface);
}

.admin-group > h3 {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.admin-group > h3 .hint-inline {
    margin-left: var(--sp-2);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}

.admin-group .fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--sp-4) var(--sp-5);
    align-items: start;
}

.admin-group .field label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--sp-2);
}

.admin-group .field input[type="text"],
.admin-group .field input[type="email"],
.admin-group .field input[type="date"],
.admin-group .field select { width: 100%; min-height: var(--touch); }

.admin-group .hint {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--muted);
}

.admin-edit-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-4) calc(-1 * var(--sp-5)) 0;
    padding: var(--sp-3) var(--sp-5);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.06);
    z-index: 2;
}

.admin-signin { margin-top: var(--sp-5); }

.admin-signin-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--sp-4) var(--sp-5);
}

.admin-signin-row .hint { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--muted); }

/* Suppression d'un compte (#70) : une ligne muette en bas de la popup,
   loin de Cancel/Save ; le rouge n'apparaît que dans la confirmation,
   qui exige le nom recopié */
.admin-delete-line {
    margin: var(--sp-5) 0 var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--muted);
}

.admin-delete-line .btn-link { color: var(--muted); }

.admin-delete-line .btn-link:hover { color: var(--ko); }

.admin-delete-confirm {
    display: block;
    margin: var(--sp-4) 0;
    font-size: var(--fs-sm);
}

.admin-delete-confirm input {
    display: block;
    width: 100%;
    margin-top: var(--sp-2);
    min-height: var(--touch);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font-size: var(--fs-md);
}

.booking-dialog .btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }

.booking-dialog h2 { margin: 0 0 var(--sp-4); font-size: var(--fs-lg); }

.booking-dialog .summary { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }

.booking-dialog .summary li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
}

.booking-dialog .summary .lbl { color: var(--muted); }

/* Historique du client (#68) : la valeur longue passe à droite en texte
   normal, orange dès trois commentaires */
.booking-dialog .summary li strong { text-align: right; }

.booking-dialog .summary li.is-warn strong { color: var(--accent); }

.booking-dialog .summary .code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--fs-lg);
    letter-spacing: 0.1em;
}

.booking-dialog .actions { display: flex; gap: var(--sp-3); justify-content: flex-end; }

.booking-dialog a.btn { text-decoration: none; }

/* ---------- Fiche client ---------- */

.client-page { padding: var(--sp-4); max-width: 72rem; margin: 0 auto; }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: var(--sp-4);
}

.card h2 {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-md);
    color: var(--text);
}

.card h2 .ic { color: var(--accent); }

.card-identity h2 { font-size: var(--fs-lg); }

/* Fiche client : « Lier au journal » parmi les chips — un geste, pas un état (#94) */
.chip-action {
    color: var(--accent-strong, #e8590c);
    border-color: var(--accent);
    background: #fff;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.chip-action:hover { background: #fff3e6; }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 0.15rem var(--sp-2);
    border-radius: 999px;
    background: var(--surface-dim);
    border: 1px solid var(--border);
    font-size: var(--fs-xs);
    color: var(--muted);
}

.chip-color {
    color: #fff;
    background: var(--chip);
    border-color: transparent;
}

.chip-live {
    color: #fff;
    background: var(--ok);
    border-color: transparent;
    font-weight: 600;
}

.contact { list-style: none; padding: 0; margin: 0; }

.contact li {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}

.contact .ic { color: var(--muted); }

.card-code { border-left: 3px solid var(--accent); }

.access-code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    margin: var(--sp-2) 0;
}

.access-code.none { color: var(--border-strong); }

.stats { list-style: none; padding: 0; margin: 0; }

.stats li { padding: var(--sp-1) 0; font-size: var(--fs-sm); }

.muted { color: var(--muted); }

.empty { color: var(--muted); font-size: var(--fs-sm); padding: var(--sp-3) 0; }

/* Fil de commentaires */

.comments-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-md);
}

.section-title .ic { color: var(--accent); }

/* Compteur bien visible : le signal qu'il y a de la matière à lire */
.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 var(--sp-2);
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
}

/* Commentaire épinglé : consigne d'équipe, toujours visible et distincte */
.comment.is-pinned {
    background: #fff7ef;
    border: 1px solid #f4c9a8;
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: var(--sp-3);
    margin-top: var(--sp-3);
}

.chip-pin {
    color: #fff;
    background: var(--accent);
    border-color: transparent;
    font-weight: 600;
}

.chip-pin .ic { width: 0.85em; height: 0.85em; }

.comment-form { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-4); }

.comment-form textarea { flex: 1; min-height: var(--touch); resize: vertical; }

.comment {
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--border);
}

.c-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
}

.c-head .chip { text-decoration: none; }

.c-head .edited { font-style: italic; font-size: var(--fs-xs); }

.c-spacer { flex: 1; }

/* Le texte écrit par une personne est l'objet principal : corps de lecture,
   encre normale, interligne confortable — jamais en petit gris. */
.c-text {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
}

.c-del { display: inline; }

.btn-link {
    border: 0;
    background: none;
    color: var(--accent-strong);
    cursor: pointer;
    font-size: var(--fs-xs);
    padding: var(--sp-1) var(--sp-2);
    min-height: auto;
}

.btn-link.danger { color: var(--ko); }

.c-edit { margin-top: var(--sp-2); }

.c-edit textarea { width: 100%; min-height: 4rem; }

.c-edit .actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-2); }

#show-more-comments { width: 100%; margin-top: var(--sp-3); font-size: var(--fs-sm); }

.archived-comments { margin-top: var(--sp-4); }

/* Le titre du bloc dépliant se lit comme un LIEN (#71, Naïm) : couleur de
   lien, flèche qui pivote, orange et souligné au survol */
.archived-comments summary {
    cursor: pointer;
    color: var(--accent-strong);
    font-size: var(--fs-sm);
    font-weight: 600;
    min-height: var(--touch);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    list-style: none;
}

.archived-comments summary::-webkit-details-marker { display: none; }

.archived-comments summary::before {
    content: '▸';
    display: inline-block;
    transition: transform 0.15s;
}

.archived-comments[open] summary::before { transform: rotate(90deg); }

.archived-comments summary:hover { color: var(--accent); text-decoration: underline; }

.comment.is-archived { opacity: 0.65; }

/* Onglets d'historique */

.tabs-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.tabs { display: flex; border-bottom: 1px solid var(--border); }

.tab {
    flex: 1;
    min-height: var(--touch);
    border: 0;
    background: var(--surface-dim);
    color: var(--muted);
    cursor: pointer;
    font-size: var(--fs-sm);
    border-bottom: 2px solid transparent;
}

.tab.active {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    border-bottom-color: var(--accent);
}

.tab-pane { padding: var(--sp-3) var(--sp-4); overflow-x: auto; }

table.hist { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }

.hist th {
    text-align: left;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--sp-2);
    border-bottom: 1px solid var(--border-strong);
}

.hist td { padding: var(--sp-2); border-bottom: 1px solid var(--border); }

.hist tr:last-child td { border-bottom: 0; }

.hist tbody tr[data-href] { cursor: pointer; }

.hist tbody tr[data-href]:hover td { background: var(--surface-dim); }

/* Pastille de statut client (page Clients du jour) — couleurs métier */
.st-cell { width: 1.6rem; text-align: center; }

.st-dot {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    vertical-align: middle;
}

.st-dot.st-default  { background: var(--st-default); }
.st-dot.st-new      { background: var(--st-new); }
.st-dot.st-approved { background: var(--st-approved); }
.st-dot.st-monitor  { background: var(--st-monitor); }
/* Compte rejeté dans Pimcore = banni (15/09) : pastille noire, bloc sombre,
   bandeau noir sur la fiche — visible sans ouvrir les commentaires. */
.st-dot.st-rejected { background: #111; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #111; }
.b.st-rejected { background: #1a1a1a; outline: 2px solid #000; outline-offset: -2px; text-decoration: line-through; }
.card-identity.is-banned { border-left: 4px solid #111; }
.chip.chip-banned { background: #111; color: #fff; font-weight: 700; text-transform: uppercase; }
.ban-banner {
    display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline;
    margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3);
    background: #111; color: #fff; border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 600;
}
.ban-banner .muted { color: #cfcfcf; font-weight: 400; flex-basis: 100%; }
.ban-banner.is-lifted { background: #eee; color: #333; border-left: 3px solid #111; font-weight: 500; }
.ban-todo { margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); background: #fff3cd; border-left: 3px solid #d39e00; border-radius: var(--radius); font-size: var(--fs-sm); }
.ban-todo a { margin-left: var(--sp-2); font-weight: 600; }
.summary li.is-banned strong { color: #fff; background: #111; padding: 0 6px; border-radius: 4px; }
.pw-reject summary { color: var(--st-monitor); font-weight: 600; }
.pw-future { border: 1px solid var(--line, #ddd); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; }
.pw-future-row { display: block; margin: 2px 0; }
.pw-confirm { display: block; margin: var(--sp-2) 0; font-weight: 600; }

/* Ligne correspondant à la réservation affichée dans les cartes */
.hist tbody tr.current td { background: #fdeee4; }

.hist tbody tr.current td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* Client sous surveillance : le trait rouge sur la fiche, la bannière qui
   dit qui et pourquoi — l'écrasement PlugOp du statut Pimcore */
.card-identity.is-monitored { border-left: 4px solid var(--st-monitor); }

.monitor-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: #fdeceb;
    border-left: 3px solid var(--st-monitor);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
}

.monitor-banner form { display: inline-flex; }

/* Monitor Pimcore levé dans PlugOp : un état neutre, plus une alarme */
.monitor-banner.is-lifted {
    background: var(--surface-dim);
    border-color: var(--border);
    color: var(--muted);
}

.monitor-note { margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); font-size: var(--fs-xs); }

/* Effacement (suppression douce, 26/08) */
.note-del { display: inline-flex; }

.task-del { margin-left: auto; align-self: center; }

/* L'annulation dans le bandeau « marquée faite » : le formulaire coule
   dans la phrase, le lien Annuler juste après le libellé */
.inline-undo { display: inline; }

.note-del-fiche { display: flex; justify-content: flex-end; margin: var(--sp-2) 0; }

/* La note de calendrier (direction) : sous le calendrier, avant le régulier */
.ts-note { margin-top: var(--sp-4); }

.ts-note-body { margin: 0; font-size: var(--fs-md); line-height: 1.55; overflow-wrap: anywhere; }

.ts-note-meta { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); }

.ts-note-edit { margin-top: var(--sp-2); }

.ts-note-edit summary { cursor: pointer; font-size: var(--fs-sm); }

.ts-note-edit form { margin-top: var(--sp-2); }

.ts-note-edit textarea { flex: 1; min-height: 3.2rem; }

/* La plage du dialog d'exception (congés) */
.ts-until { display: block; margin: var(--sp-3) 0 0; }

.ts-until span { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-xs); }

/* Export image des blocs Data : discret en bout de titre */
.section-title .export-img { margin-left: auto; font-size: var(--fs-xs); opacity: 0.6; }

.section-title .export-img:hover { opacity: 1; }

/* Le déclencheur EST le bouton rouge — visible d'emblée sur la fiche,
   pas caché derrière un texte gris. L'ouvrir révèle la raison + confirme. */
.monitor-set summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius);
    background: var(--st-monitor);
    color: #fff;
    font-weight: 600;
    font-size: var(--fs-sm);
}

.monitor-set summary::-webkit-details-marker { display: none; }

.monitor-set summary:hover { filter: brightness(0.92); }

.monitor-set[open] summary { display: none; }

.monitor-set form { margin-top: 0; }

/* Escalade rapide depuis la carte (store manager et plus) */
.fu-escalate {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-sm);
}

.fu-esc-form { display: inline-flex; }

/* Mention « customer comment » dans le fil */
.comment.ccomment-note { border-left: 3px solid var(--border-strong); padding-left: var(--sp-3); }

/* ---------- Highlights : messages épinglés (direction / store managers) --
   Le même langage visuel que les commentaires épinglés de la fiche client :
   fond chaud, liseré accent — une consigne, pas du bruit. */
.pin-card {
    background: #fff7ef;
    border: 1px solid #f4c9a8;
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
}

.pin-card .tr-btn.pin-tr { float: right; }
.translated-pre { white-space: pre-line; }
.pin-body {
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--text);
    overflow-wrap: anywhere;
}

.pin-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-sm);
}

.pin-meta form { display: inline-flex; }

/* Formulaire de highlight (page Management) */
.highlight-form textarea {
    width: 100%;
    min-height: 3.2rem;
    resize: vertical;
}

.highlight-targets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.highlight-targets .btn { margin-left: auto; }

/* ---------- Administration des comptes ----------
   Un écran d'administration se LIT : pleine largeur, lignes aérées,
   colonnes booléennes centrées, formulaires en grille respirante. */

.page-admin .client-page { max-width: none; }

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

.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }

.admin-table th, .admin-table td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

.admin-table th {
    color: var(--muted);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-table th.c, .admin-table td.c { text-align: center; }

.admin-table tr:hover td { background: var(--surface-dim); }

.admin-table tr.editing td { background: #fdebdf; }

.admin-table tr.inactive td { opacity: 0.55; }

.admin-table .yes { color: var(--ok); font-weight: 700; font-size: var(--fs-lg); }

.admin-table .no { color: var(--ko); font-weight: 600; }

.admin-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sp-4) var(--sp-5);
    align-items: start;
    margin-top: var(--sp-4);
}

.admin-form .field label {
    display: block;
    font-size: var(--fs-sm);
    color: var(--muted);
    margin-bottom: var(--sp-2);
}

.admin-form .field input[type="text"],
.admin-form .field input[type="email"],
.admin-form .field select { width: 100%; min-height: var(--touch); }

.admin-checks { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.admin-checks .check-item {
    min-height: var(--touch);
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
    font-size: var(--fs-md);
}

.form-actions {
    grid-column: 1 / -1;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
}

.admin-pwd { margin-top: var(--sp-5); }

.view-note.flash-err { color: var(--ko); }

.view-note code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text);
}

/* ---------- Bandeau shift (tous les écrans connectés) ---------- */

.viewas-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-1) var(--sp-4);
    background: #fff3c4;
    color: #5a4300;
    font-size: 0.9rem;
    border-bottom: 1px solid #e6cf7a;
}
.viewas-bar form { display: inline; }
.viewas-bar .btn-link { color: #5a4300; text-decoration: underline; font-weight: 600; }

.shiftbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    min-height: 2.5rem;
    padding: var(--sp-1) var(--sp-4);
    background: var(--surface-dim);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--muted);
    /* Collée au défilement (demande 27/08) — depuis le 02/09 via
       l'enveloppe .sticky-head, SOUS la barre PlugOp au lieu de la
       recouvrir. */
}

.shiftbar form { display: flex; align-items: center; gap: var(--sp-2); }

.shiftbar .btn { min-height: 1.9rem; padding: 0 var(--sp-3); font-size: var(--fs-sm); }

/* « Terminer le shift » : bordure franche et forme de pilule, comme le bouton
   jaune à côté — sans elle il se lisait comme du texte (Damien, 04/09) */
.shiftbar .btn:not(.btn-primary) {
    background: #fff;
    border: 2px solid #cfcdc7;
    border-radius: 999px;
    font-weight: 600;
}

.shiftbar .btn:not(.btn-primary):hover { background: #f3f3f1; }

.shiftbar .on { color: var(--text); font-weight: 600; }

.shiftbar .on::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ok);
    margin-right: var(--sp-1);
    vertical-align: 1px;
}

.shiftbar .shift-msg { color: var(--ko); }

/* Centre ouvert (heures réglées) sans aucun shift : l'équipe absente se
   voit — même registre de couleur que les messages d'état du shift */
.noshift-msg { color: var(--ko); font-weight: 700; }

/* Le centre affiché est tenu par quelqu'un d'autre (04/09) : un état, pas
   une alarme — même poids que « En poste à … » */
.held-msg { color: var(--text); font-weight: 600; }

/* La garde, à droite du bandeau de shift, sur tous les écrans : un lien
   vers la page sécurité, jamais une alerte — une information qui rassure */
/* « Urgence/Garde : Audrey » — lien clairement cliquable vers Aide/Urgence
   (Damien, 07/09) : couleur accent et souligné, pas un simple texte */
.shiftbar .oncall {
    margin-left: auto;
    color: var(--accent-strong);
    text-decoration: underline;
    white-space: nowrap;
    font-weight: 600;
}

.shiftbar .oncall:hover { color: var(--accent); }

.duty-elsewhere .de-place { color: var(--text); }

/* Qui est en poste ailleurs : une entrée par collègue — avec téléphone,
   le nom s'appelle d'un clic (tel:) ; le détail reste sur la page Urgence.
   Poussé à DROITE — le bloc « mon shift » vit à gauche ; quand la garde
   suit, elle se colle sans reprendre son propre poussoir. */
.duty-elsewhere { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; }

.shiftbar .duty-elsewhere ~ .oncall { margin-left: 0; }

.duty-elsewhere .duty-link { color: var(--text); text-decoration: none; white-space: nowrap; }

.duty-elsewhere .duty-link:hover { text-decoration: underline; }

.duty-elsewhere .de-meta { color: var(--muted); font-weight: 400; }

/* Le nom ouvre le profil, le numéro appelle le centre (03/09) */
.duty-elsewhere .duty-entry { white-space: nowrap; }
.duty-elsewhere .duty-tel { color: var(--text); text-decoration: none; }
.duty-elsewhere .duty-tel:hover { text-decoration: underline; }


/* Le tag d'expérience : violet, demandé tel quel — la seule information
   que porte la date d'entrée (jamais affichée elle-même) */
.chip-xp { background: #f3e9fa; color: #7d22a8; border-color: transparent; font-weight: 700; }

/* ---------- Page sécurité ---------- */

/* La réponse qu'on vient chercher : le nom en grand, le numéro énorme —
   une page d'urgence se lit à deux mètres de l'écran */
.safety-oncall .oncall-big { margin: 0; font-size: var(--fs-lg); }

.safety-oncall .oncall-phone { margin: var(--sp-2) 0 0; }

.safety-oncall .oncall-phone a {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.safety-text { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }

.safety-meta { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); }

.safety-edit textarea { width: 100%; min-height: 10rem; margin: var(--sp-2) 0; resize: vertical; }

.safety-edit .actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }

/* Qui est en poste : une ligne par shift ouvert, le téléphone cliquable */
.duty-row { padding: var(--sp-2) 0; border-top: 1px solid var(--border); }

.duty-row:first-of-type { border-top: 0; }

.duty-who { margin: 0; }

.duty-meta {
    margin: var(--sp-1) 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
}

.duty-phone { font-weight: 700; text-decoration: none; }

/* ---------- Timesheet ---------- */

.page-ts .client-page { max-width: none; padding: var(--sp-5) var(--sp-6); }

.ts-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.ts-bar .spacer { flex: 1; }

.ts-title { margin: 0; font-size: var(--fs-lg); min-width: 16rem; text-align: center; }

.ts-hint { margin: 0 0 var(--sp-3); }

.ts-wrap { overflow-x: auto; }

table.ts {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.ts th {
    padding: var(--sp-2);
    border-bottom: 1px solid var(--border-strong);
    border-right: 1px solid var(--border);
    font-size: var(--fs-sm);
    text-align: center;
    background: var(--surface-dim);
}

.ts td {
    vertical-align: top;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-1);
    width: 14.28%;
}

.ts td.is-out { background: var(--surface-dim); }

/* Aujourd'hui : le liseré accent, comme la ligne « now » du calendrier */
.ts td.is-today { box-shadow: inset 0 0 0 2px var(--accent); }

.ts-daynum {
    display: block;
    text-align: right;
    font-size: var(--fs-xs);
    color: var(--muted);
    padding: 0 var(--sp-1);
}

/* Le pavé d'un créneau : la couleur est celle de la personne (teinte
   stable par compte, comme leur Excel) ; non staffé = le seul rouge */
.ts-slot {
    position: relative;
    display: block;
    margin: 2px 0;
    padding: var(--sp-1) var(--sp-2);
    border-radius: 4px;
    background: var(--surface-dim);
    font-size: var(--fs-sm);
    min-height: 1.6rem;
}

.ts-month .ts-slot { text-align: center; font-weight: 600; }

.ts-slot.is-empty {
    color: var(--muted);
    font-weight: 400;
    background: transparent;
    border: 1px dashed var(--border);
}

.ts-slot.is-unstaffed { background: #fdecea; color: var(--ko); font-weight: 700; }

.ts-slot[data-ts] { cursor: pointer; }

.ts-slot[data-ts]:hover { outline: 2px solid var(--accent); }

.ts-hours { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }

.ts-week td { height: 10rem; }

.ts-week .ts-slot { padding: var(--sp-2); margin-bottom: var(--sp-2); font-weight: 600; }

.ts-edited { position: absolute; top: 2px; right: 4px; font-size: var(--fs-xs); color: var(--muted); }

/* Le nom en gras : la couleur du pavé est franche, le nom doit ressortir */
.ts-names { overflow-wrap: anywhere; font-weight: 700; }

/* Le régulier du centre, sous le calendrier : une ligne par jour, les deux
   créneaux en colonnes, une puce par personne (sa couleur), × pour retirer */
.ts-regular { margin-top: var(--sp-4); }

table.ts-reg { border-collapse: collapse; margin-bottom: var(--sp-4); }

.ts-reg th, .ts-reg td {
    padding: var(--sp-1) var(--sp-3);
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
    font-size: var(--fs-sm);
}

.ts-reg th.ts-reg-day { font-weight: 600; min-width: 6.5rem; }

.ts-reg-hours { font-size: var(--fs-xs); margin-right: var(--sp-2); }

.ts-reg-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin: 2px var(--sp-1) 2px 0;
    padding: 0 var(--sp-1) 0 var(--sp-2);
    border-radius: 999px;
    font-weight: 600;
}

.ts-reg-chip button {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--muted);
    font-size: var(--fs-md);
    line-height: 1;
    padding: var(--sp-1);
}

.ts-reg-chip button:hover { color: var(--ko); }

.regular-add { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }

/* Glisser-déposer (#64) : la rangée de noms à glisser, la poignée sur
   chaque nom d'un pavé, le pavé survolé pendant le glisser */
.ts-palette {
    display: flex;
    align-items: center;
    gap: var(--sp-1) var(--sp-2);
    flex-wrap: wrap;
    margin: 0 0 var(--sp-3);
}

.ts-chip {
    display: inline-block;
    padding: var(--sp-1) var(--sp-3);
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: grab;
    user-select: none;
}

.ts-chip:active { cursor: grabbing; }

.ts-name[draggable] { cursor: grab; }

.ts-slot.is-drop {
    outline: 2px dashed var(--accent);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(242, 101, 34, 0.25);
}

.ts-flash {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-3);
}

.ts-flash[hidden] { display: none; }

/* L'onglet fiche de la section Clients (#66) : le nom du client dans la
   rangée Today · Search, une croix pour le fermer comme un onglet Pimcore */
.tab-client { display: inline-flex; align-items: center; gap: var(--sp-2); }

.tab-close {
    margin-left: var(--sp-1);
    padding: 0 var(--sp-1);
    border-radius: 999px;
    color: var(--muted);
    font-size: var(--fs-md);
    line-height: 1;
    cursor: pointer;
}

.tab-close:hover { color: var(--ko); background: var(--surface-dim); }

/* Code de dépannage du jour (PTI, S1) : le code en grand, lisible à travers
   le comptoir ; la table de Gestion, les lignes envoyées en monospace */
.access-code {
    margin: var(--sp-2) 0 var(--sp-2);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.access-code .chip { font-family: inherit; font-size: var(--fs-xs); letter-spacing: 0; }

/* « Révéler le code » : orange, tactile, à côté de la fenêtre de validité ;
   chaque clic est tracé (access-reveal.php) */
.access-reveal { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-2) 0; }

.btn-reveal {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 700;
    min-height: var(--touch);
    padding: var(--sp-2) var(--sp-4);
}

.btn-reveal:hover { filter: brightness(0.92); color: #fff; }

.access-reveals { margin-top: var(--sp-1); font-size: var(--fs-xs); }

/* Appareils de confiance (07/09) : la case sur l'écran de connexion, la liste
   dans Mon profil avec « Déconnecter » par appareil */
.auth-trust { font-size: var(--fs-sm); color: var(--muted); margin: var(--sp-2) 0 0; }

/* « Continuer en tant que … » : la carte au-dessus du formulaire, un seul bouton */
.auth-continue { margin-bottom: var(--sp-4); }

/* Feuilles Maintenance / Back-office : le formulaire « nouveau to-do » sous le titre (#72) */
.sheet-add { margin: var(--sp-2) 0 var(--sp-4); }

.auth-continue .muted { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); text-align: center; }

.device-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
}

.device-row:last-of-type { border-bottom: 0; }

table.access-table { border-collapse: collapse; width: 100%; margin-bottom: var(--sp-3); }

.access-table th, .access-table td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
    font-size: var(--fs-sm);
}

.access-table th { font-weight: 600; width: 7rem; }

.access-code-cell {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.access-lines h3 { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-sm); }

.access-pre {
    margin: 0;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-dim);
    border-radius: 6px;
    font-size: var(--fs-xs);
    overflow-x: auto;
    white-space: pre;
}

@media (max-width: 900px) {
    .page-ts .client-page { padding: var(--sp-4); }
    .ts-bar { flex-wrap: wrap; }
    .ts-palette { display: none; }
}

/* Interstitiel du shift (relève, hors planning) : une question, deux
   issues — page nue, la carte au centre */
.page-plain .interstitial { max-width: 36rem; margin: 12vh auto 0; }

.interstitial .actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

/* Divergence plan/réel sur le timesheet : information + un geste */
.ts-divergence { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* Routage optionnel à l'écriture : « Pour qui ? » — une ligne, jamais un
   formulaire ; le défaut (l'équipe) ne demande aucun geste */
.fu-route-label { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-sm); color: var(--muted); }

.fu-route { display: inline-flex; gap: var(--sp-4); flex-wrap: wrap; }

/* Tuile maintenance : les non-attribués (à trier) — rouge seulement si un
   bloquant est sans adresse */
.mt-tile-unassigned { font-size: var(--fs-xs); }

.mt-tile-unassigned.has-blocking { color: var(--ko); font-weight: 700; }

/* Highlight : le détail se déplie sur place, tout clic ailleurs referme */
.pin-more { padding: 0; font-size: var(--fs-sm); }

.pin-desc {
    margin: var(--sp-2) 0;
    padding: var(--sp-2) var(--sp-3);
    background: #fffdf7;
    border-left: 3px solid #f4c9a8;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.highlight-desc { min-height: 3rem; }

/* « Lu et compris » : la carte à confirmer se distingue — elle poursuit la
   personne jusqu'au clic, puis disparaît pour elle */
.pin-card.pin-ack { border: 2px solid var(--accent); background: #fff3e6; }

.chip-ack { color: #fff; background: var(--accent); border-color: transparent; font-weight: 700; }

.pin-ack-actions { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-2) 0; }

/* #93 : la case « J'ai lu et compris » en fin de message active le bouton ;
   tant qu'elle n'est pas cochée, le bouton est gris et ne répond pas */
.pin-confirm {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-3) 0 var(--sp-1);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.pin-confirm input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); cursor: pointer; }

.pin-ack-actions .btn-primary:disabled {
    background: var(--border-strong);
    color: #fff;
    cursor: not-allowed;
    filter: none;
}

.pin-reply textarea { width: 100%; min-height: 4rem; margin: var(--sp-2) 0; resize: vertical; }

.pin-reply .actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }

/* Référence liée dans un texte du journal ([booking:…] / [client:…]) :
   une puce cliquable vers la fiche client, lisible même morte */
.ref-chip {
    display: inline-block;
    padding: 0 var(--sp-2);
    border-radius: 999px;
    background: #eef3fb;
    border: 1px solid #c4d4ee;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ref-chip:hover { background: #dfe9f8; }

.ref-chip.is-dead { background: var(--surface-dim); border-color: var(--border); color: var(--muted); }

.pin-file { margin: var(--sp-2) 0 0; }

/* Make ops better : les deux natures de contribution */
.chip-fb-bug { background: #fdecea; color: var(--ko); border-color: transparent; font-weight: 700; }

.chip-fb-idea { background: #fff7df; color: #8a6d00; border-color: transparent; font-weight: 700; }

/* Aide/Urgence par centre (signalement #11) : tronc commun + un onglet par
   ville, deux catégories par ville — les entrées respirent, l'urgence se
   lit vite */
/* Les cellules dépliables du tableau Accounts (27/08) : un + discret,
   le contenu ne sort que sur demande — la liste tient à l'écran */
.cell-fold > summary {
    cursor: pointer;
    list-style: none;
    display: inline-block;
    padding: 0 var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    font-weight: 700;
}

.cell-fold > summary::-webkit-details-marker { display: none; }

.cell-fold > summary::after { content: '+'; }

.cell-fold[open] > summary::after { content: '–'; }

.cell-fold[open] > summary { margin-right: var(--sp-2); }

/* La création de compte, repliée par défaut : un titre cliquable */
.admin-create > summary { cursor: pointer; list-style: none; }

.admin-create > summary::-webkit-details-marker { display: none; }

.admin-create > summary::before { content: '▸'; color: var(--muted); }

.admin-create[open] > summary::before { content: '▾'; }

/* La clé 2FA : grosse, espacée, copiable d'un regard */
.totp-secret code {
    display: inline-block;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-lg);
    letter-spacing: 0.08em;
    background: var(--surface-dim);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-wrap: anywhere;
}

/* Le grisage des fiches Admin hors périmètre (#12) : le fieldset est
   invisible en soi, son état disabled grise tous les champs d'un coup.
   Il occupe TOUTE la grille du formulaire et la reproduit à l'intérieur —
   sans quoi les champs s'empileraient dans une seule colonne. */
.admin-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sp-4) var(--sp-5);
    align-items: start;
}

.admin-fieldset:disabled { opacity: 0.6; }

/* La rangée d'onglets DANS la carte : pas de sticky ni de fond propre */
.tabs-incard { position: static; background: transparent; }

.contact-cat {
    margin: var(--sp-4) 0 var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.contact-row { padding: var(--sp-2) 0; border-top: 1px solid var(--border); }

.contact-row .duty-who { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.contact-del { display: inline; margin-left: auto; }

.contact-note { margin: var(--sp-1) 0 0; white-space: normal; }

/* Idée #58 (04/09) : corriger en place, replier les longues procédures */
.contact-actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-3); }
.contact-actions .contact-del { margin-left: 0; }
.contact-proc { margin: var(--sp-1) 0 0; }
.contact-proc > summary { cursor: pointer; list-style: none; font-size: var(--fs-sm); }
.contact-proc > summary::before { content: "▸ "; }
.contact-proc[open] > summary::before { content: "▾ "; }
.contact-edit-form { margin-top: var(--sp-2); }
.contact-edit-actions { display: flex; gap: var(--sp-2); }

.contact-add { margin: var(--sp-3) 0 0; }

.contact-add > summary { cursor: pointer; list-style: none; }

.contact-add-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: var(--sp-2) 0 0;
    max-width: 34rem;
}

/* Highlight daté (signalement #10) : la date en évidence sur le pavé */
.chip-until { background: #eef4fb; color: #1f5aa8; border-color: transparent; font-weight: 700; }

/* Le sort d'une entrée traitée : résolue (vert) ou classée sans suite (gris) */
.chip-fb-resolved { background: #e7f6ec; color: var(--ok); border-color: transparent; font-weight: 700; }

.chip-fb-dismissed { background: var(--surface-dim); color: var(--muted); border-color: transparent; font-weight: 700; }

/* La réponse système sous une entrée traitée — en retrait, adossée à un
   filet : on voit d'un coup d'œil qui parle (l'outil, pas l'auteur) */
.fb-response {
    margin: var(--sp-3) 0 0;
    padding: var(--sp-3) var(--sp-4);
    border-left: 3px solid var(--border);
    background: var(--surface-dim);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.fb-response .c-text { margin: var(--sp-2) 0 0; }

/* « Make ops better » : le bouton en évidence à droite du prénom —
   toujours visible, il invite à signaler et proposer sans chercher */
.btn-better {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: #ffd84d;
    color: #4a3a00;
    font-weight: 700;
    font-size: var(--fs-sm);
    text-decoration: none;
    border: 1px solid #e6b800;
    white-space: nowrap;
}

.btn-better:hover { background: #ffe27a; text-decoration: none; }

.btn-better.active { background: #4a3a00; color: #ffd84d; border-color: #4a3a00; }

/* La pastille « du nouveau » : discrète en bas À DROITE — jamais
   par-dessus la zone d'écriture ; elle s'efface d'elle-même dès que
   l'auto-refresh peut recharger sans déranger */
/* display:flex écraserait le display:none de l'attribut hidden (les styles
   auteur battent ceux du navigateur) : sans cette ligne, la pastille est
   visible en permanence dès le chargement. */
.live-banner[hidden] { display: none; }

.live-banner {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    font-size: var(--fs-sm);
}

/* La bulle « ? » : une aide de frontière, ouverte au clic (tactile),
   refermée par tout clic ailleurs — discrète tant qu'on ne la sollicite pas */
.help-wrap { position: relative; display: inline-block; }

.help-btn {
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
}

.help-btn:hover { color: var(--text); border-color: var(--text); }

.help-pop {
    position: absolute;
    top: 1.5rem;
    left: 0;
    z-index: 60;
    width: min(24rem, 80vw);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: 1.55;
    color: var(--text);
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
}

/* La bulle en coin de carte (zone d'écriture) */
.card-help { float: right; margin: 0 0 var(--sp-1) var(--sp-2); }

/* Le tableau de lecture, côté Management */
.pin-acks { margin: var(--sp-1) 0; font-size: var(--fs-sm); }

.pin-acks .pin-pending { color: var(--accent-strong); font-weight: 600; }

.highlight-people { margin: var(--sp-2) 0; }

.highlight-people summary { cursor: pointer; }
/* #83 : centres grisés quand des personnes sont visées */
.highlight-targets .check-item.is-ignored { opacity: 0.4; text-decoration: line-through; }
.places-ignored { color: #a05a00; font-weight: 600; }

/* Le bouton de changement d'utilisateur : jaune clair, bord franc arrondi
   (demande explicite) — le geste physique de la relève sur l'ordinateur
   partagé du centre */
.switch-user {
    background: #fdf3cf;
    border: 2px solid #e8c94f;
    border-radius: 999px;
    padding: var(--sp-1) var(--sp-3);
    min-height: 1.9rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

.switch-user:hover { background: #fbeaa9; }

/* Sans shift ouvert : grisé, l'infobulle explique (04/09) */
.switch-user:disabled,
.switch-user:disabled:hover {
    background: var(--bg-soft, #f3f3f1);
    border-color: #d9d9d4;
    color: var(--muted, #8a8a85);
    cursor: not-allowed;
    opacity: .75;
}

/* Shift prévu non pris : LE bandeau au-dessus du calendrier */
.uncovered-banner {
    padding: var(--sp-2) var(--sp-4);
    background: #fdecea;
    border-bottom: 2px solid var(--ko);
    color: var(--ko);
    font-weight: 700;
}

/* Alerte « client banni » : le bandeau du jour (sous le bandeau shift) et la
   boîte dans la popup de réservation. Charte de la maquette validée 14/09. */
.ban-banner {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    margin: var(--sp-3) var(--sp-4) 0;
    padding: var(--sp-3) var(--sp-4);
    background: var(--ban-dim);
    border: 1px solid var(--ban-line);
    border-left: 5px solid var(--ban-line);
    border-radius: var(--radius);
    line-height: 1.45;
}
.ban-banner .ic { font-size: 1.4rem; line-height: 1; }
.ban-banner strong { color: var(--ban); }
.ban-banner .ban-item { display: block; }
.ban-banner small { display: block; margin-top: 2px; color: var(--muted); }

.ban-box .ban-alert {
    border: 1px solid var(--ban-line);
    background: var(--ban-dim);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
}
.ban-box .ban-alert.is-handled { background: var(--surface-dim, #faf9f7); border-color: var(--border-strong, #cbc8c2); }
.ban-box .ban-alert h4 { margin: 0 0 6px; font-size: 0.95rem; color: var(--ban); }
.ban-box .ban-alert.is-handled h4 { color: var(--muted); }
.ban-box .ban-alert ul { margin: 6px 0 0 18px; padding: 0; }
.ban-box .ban-alert li { margin: 2px 0; }
.ban-box .ban-alert li b { font-weight: 600; }
.ban-box .ban-handle { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: var(--sp-3); }
.ban-box .ban-handle input[type="text"] { flex: 1 1 14rem; min-width: 0; padding: 6px 10px; border: 1px solid var(--border-strong, #cbc8c2); border-radius: 6px; font: inherit; }
.ban-box .ban-handle .btn-danger { background: #fff; border: 1px solid var(--ban-line); color: var(--ban); }

/* Partage du timesheet : l'aperçu de l'image dans le dialog */
.share-dialog { max-width: min(60rem, 92vw); }

.share-preview { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); }

/* ---------- Management data ---------- */

.page-data .client-page { max-width: none; padding: var(--sp-5) var(--sp-6); }

.data-controls {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}

/* Filtres + onglets collés ensemble sous l'empilement d'en-tête (demande
   Damien 07/09) : changer de période, de type ou d'onglet sans remonter.
   Le .tabs-row du calendrier garde son propre collant — seul celui DANS
   .data-sticky devient statique (le bloc parent colle pour les deux). */
.data-sticky {
    position: sticky;
    top: var(--sticky-head-h, 5.5rem);
    z-index: 60;
    background: var(--bg);
    padding-top: var(--sp-2);
}
.data-sticky .tabs-row { position: static; top: auto; z-index: auto; }

/* Colonnes = périodes : chiffres à droite, libellés de ligne à gauche */
table.stats-table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }

.stats-table th, .stats-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }

.stats-table th { text-align: left; color: var(--muted); font-size: var(--fs-xs); }

.stats-table th.num, .stats-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

.stats-table th.row-label { color: var(--text); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }

.stats-table tr:hover td { background: var(--surface-dim); }

/* Graphiques SVG maison : sobres, l'accent pour les barres */
.charts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--sp-4); }

.chart figcaption { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-1); }

.chart svg { width: 100%; height: auto; background: var(--surface-dim); border-radius: var(--radius); }

/* Recherche clients */
.search-form { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }

.search-form input[type="search"] { flex: 1; max-width: 32rem; }

/* ---------- Blocs Management (garde, heures) ---------- */

.oncall-current { margin: 0 0 var(--sp-3); font-size: var(--fs-md); }

.oncall-form { display: flex; align-items: center; gap: var(--sp-2); }

/* Le planning hebdo de la garde (signalement #8) : sept jours côte à côte,
   chacun son nom au-dessus de son sélecteur — la semaine se lit d'un trait */
.oncall-week-form { margin: 0 0 var(--sp-4); }

.oncall-week {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
}

.oncall-day { display: flex; flex-direction: column; gap: var(--sp-1); }

.oncall-day-name { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }

.hours-form { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; }

.hours-place { min-width: 8rem; font-weight: 600; }

/* ---------- Incidents (module center) ---------- */

.report-form { margin-bottom: var(--sp-5); }

.report-form textarea {
    width: 100%;
    min-height: 3.5rem;
    margin: var(--sp-2) 0;
    resize: vertical;
}

.report-form .field-label { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-sm); color: var(--muted); }

.urgency-choices { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-2); }

.report-form .report-row { margin: var(--sp-2) 0; }

.report-form .actions { display: flex; justify-content: flex-end; }

.incident {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border-strong);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
}

.incident + .incident { margin-top: var(--sp-3); }

/* Urgence par la couleur (une seule dimension colorée — l'ancienneté est en texte) */
.incident.u-blocking   { border-left-color: var(--ko); }
.incident.u-disruptive { border-left-color: var(--st-default); }
.incident.u-minor      { border-left-color: var(--border-strong); }

.chip-u-blocking   { color: #fff; background: var(--ko); border-color: transparent; }
.chip-u-disruptive { color: #fff; background: var(--st-default); border-color: transparent; }
.chip-u-minor      { background: var(--surface-dim); }

/* Carte de suivi : le texte d'abord, en entier ; un seul élément coloré —
   le mot Blocking (plus le liseré latéral) ; tout le reste sur une ligne
   grise sous le texte. */
.fu-blocking {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ko);
}

.fu-body {
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--text);
    overflow-wrap: anywhere;
}

.fu-meta {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-sm);
    color: var(--muted);
    overflow-wrap: anywhere;
}

.incident[data-href] { cursor: pointer; }

.incident[data-href]:hover { background: var(--surface-dim); }

/* Incidents fermés du jour, repliés — même patron que les commentaires archivés */
.closed-today { margin-top: var(--sp-4); }

.closed-today summary {
    cursor: pointer;
    color: var(--muted);
    font-size: var(--fs-sm);
    min-height: var(--touch);
    display: flex;
    align-items: center;
}

.closed-today .incident { opacity: 0.75; }

.closing-note {
    margin: var(--sp-1) 0 var(--sp-3);
    padding-left: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--muted);
    overflow-wrap: anywhere;
}

/* Journal d'un incident : chronologique, chaque kind se distingue */
.journal-block { margin-top: var(--sp-4); }

.journal-entry { padding: var(--sp-3) 0; border-top: 1px solid var(--border); }

.chip-k-attempt { background: var(--surface-dim); }

.chip-k-requalification { color: #fff; background: var(--border-strong); border-color: transparent; }

.chip-k-promotion { color: #fff; background: var(--accent); border-color: transparent; }

.chip-k-closing { color: #fff; background: var(--ok); border-color: transparent; font-weight: 600; }

.chip-k-reopening { color: #fff; background: var(--border-strong); border-color: transparent; }

/* Mention automatique dans le fil : un suivi réglé ce jour-là */
.comment.settled-note { border-left: 3px solid var(--ok); padding-left: var(--sp-3); }

/* Traduction à la demande : sous l'original, jamais à sa place */
.translated {
    margin: var(--sp-2) 0 0;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-dim);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--text);
    overflow-wrap: anywhere;
}

.translated.err { color: var(--muted); }

.tr-btn { opacity: 0.65; }

.tr-btn:hover { opacity: 1; }

/* Le bouton d'intervention sur la carte repliée — disparaît une fois dépliée */
.fu-intervene { margin: var(--sp-2) 0 0; }

details.fu-card[open] .fu-intervene { display: none; }

/* Fil long d'un suivi : les vieilles tentatives repliées */
.fu-older summary {
    cursor: pointer;
    color: var(--muted);
    font-size: var(--fs-sm);
    min-height: var(--touch);
    display: flex;
    align-items: center;
}

.requalify-form .report-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* Tâches (bloc To do) : le libellé d'abord, le reste en ligne grise.
   L'entrée de tâche est en tête, toujours visible — un geste aussi
   essentiel que l'entrée de journal. Le champ texte domine, échéance et
   attribution restent compacts. */
.task-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-3); }

.task-form input[type="text"] {
    min-height: var(--touch);
    font-size: var(--fs-md);
}

.task-form input[type="text"] { flex: 1; min-width: 12rem; }
/* #76 : le titre d'un to-do est une zone de texte d'une ligne qui grandit */
.task-label-input { flex: 1; min-width: 12rem; min-height: var(--touch); font-size: var(--fs-md); resize: none; overflow: hidden; line-height: 1.35; padding: 0.55rem 0.7rem; }
.task-label { white-space: pre-line; }

.task {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    min-height: var(--touch);
    padding: var(--sp-2) 0;
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
}

.task-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }

.task-check-form { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* Sélection en deux temps (signalement #5, v2) : le clic sur le cercle pose
   un point vert dedans et révèle le bouton Done — lui seul valide. La
   checkbox reste dans le flux clavier, invisible. */
.task-check-box {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.task-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    cursor: pointer;
    padding: 0;
}

.task-check:hover { border-color: var(--ok); background: var(--surface-dim); }

.task-check-box:checked + .task-check { border-color: var(--ok); }

.task-check-box:checked + .task-check::after {
    content: '';
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--ok);
}

.task-check-box:focus-visible + .task-check { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

.task-done-btn { display: none; min-height: auto; padding: var(--sp-1) var(--sp-3); }

.task-check-box:checked ~ .task-done-btn { display: inline-flex; }

.task-label {
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--text);
    overflow-wrap: anywhere;
}

.task.is-done .task-label { text-decoration: line-through; color: var(--muted); }

.task-meta { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }

/* Le retard : la seule couleur admise dans ce bloc */
.task-meta .is-overdue { color: var(--ko); font-weight: 600; }

/* Indicateur de suivis dans le bandeau shift : contre l'état du shift, le
   seul signal du centre hors calendrier. Une information qu'on lit quand il
   y a des suivis ouverts ; discret quand il n'y a rien (le cas normal). */
.fu-ind {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    text-decoration: none;
    color: var(--text);
    white-space: nowrap;
}

.fu-ind.has-open { font-size: var(--fs-md); font-weight: 700; }

.fu-ind .chip-u-blocking { font-size: var(--fs-sm); }

a.fu-ind:hover { text-decoration: underline; }

/* Avertissement de consultation d'une date passée */
.view-note {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-dim);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    color: var(--muted);
}

/* Pagination de l'historique par tranches de jours */
.history-nav { display: flex; justify-content: space-between; margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }

/* Zone d'écriture unique (modèle 010) */
.write-zone { align-items: stretch; }

/* ---------- La page du centre sous la grille (calendar.php) ---------- */

/* La rangée d'onglets par métier : un contenu à la fois, les compteurs des
   intitulés donnent l'état des deux sans cliquer. Collée en haut au
   défilement — elle permet de changer d'onglet sans remonter. */
.tabs-row {
    display: flex;
    align-items: stretch;
    gap: var(--sp-1);
    margin: 0 0 var(--sp-4);
    border-bottom: 1px solid var(--border);
    position: sticky;
    /* Sous l'empilement collant (barre PlugOp + barre de shift) — hauteur
       réelle publiée par Ui::topbar, repli 5.5rem */
    top: var(--sticky-head-h, 5.5rem);
    z-index: 60;
    background: var(--bg);
}

/* Retour discret vers le planning, à l'extrémité de la rangée */
.tab-top {
    margin-left: auto;
    align-self: center;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}

.tab-top:hover { color: var(--text); text-decoration: underline; }

.tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--touch);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.tab:hover { color: var(--text); }

/* Chaque métier a sa couleur de pavé : on sait où on est d'un coup d'œil.
   Day to day = orange (l'accent), Follow-ups = ambre (proto v2.6). */
.tab.active { color: var(--text); }

.tab-day.active {
    background: #fdebdf;
    border-bottom-color: var(--accent);
    border-radius: var(--radius) var(--radius) 0 0;
}

.tab-fu.active {
    background: #fbf1da;
    border-bottom-color: #de9b12;
    border-radius: var(--radius) var(--radius) 0 0;
}

.tab .chip-u-blocking { font-size: var(--fs-xs); }

/* Carte de suivi d'un autre centre que la grille : le résumé est un lien —
   l'ouvrir recharge la page et fait suivre la grille */
a.fu-card-link { display: block; text-decoration: none; color: inherit; }

a.fu-card-link:hover { background: var(--surface-dim); }

/* Carte de suivi repliable : le texte entier et sa ligne grise restent
   visibles ; seule la dernière entrée de journal s'affiche repliée, le fil
   complet se déplie au clic, sans quitter la page */
details.fu-card > summary { cursor: pointer; }

details.fu-card > summary:hover { background: var(--surface-dim); }

.fu-sum { display: block; }

.fu-last {
    margin: var(--sp-2) 0 0;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text);
    overflow-wrap: anywhere;
}

.fu-last::before { content: "↳ "; color: var(--muted); }

/* Déplié, le fil complet remplace la dernière entrée */
details.fu-card[open] .fu-last { display: none; }

.fu-open { margin: var(--sp-3) 0 0; }

/* Agir depuis la carte dépliée : une zone de texte, deux issues —
   tentative au journal, ou fermeture (le texte devient le commentaire) */
.fu-act { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }

.fu-act textarea { width: 100%; min-height: 2.6rem; resize: vertical; }

.fu-act .actions { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }

.fu-act .fu-open-link { margin-right: auto; }

.write-fields { flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); }

/* La ligne du texte : zone de saisie + Ajouter à SA hauteur (Damien, 04/09) ;
   les options (important, aussi un to-do) passent dessous, sans le bouton */
.write-linked { font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.write-linked .write-unlink { font-size: var(--fs-sm); color: var(--muted); padding: 0 var(--sp-1); min-height: 0; line-height: 1.4; }
.write-linked .write-unlink:hover { color: var(--ko); }
.write-row { display: flex; gap: var(--sp-3); align-items: stretch; }
.write-row textarea { flex: 1; }
.write-row .btn { align-self: stretch; }

.followup-question { margin-left: var(--sp-4); }

.comment[data-href] { cursor: pointer; }

.comment[data-href]:hover { background: var(--surface-dim); }

/* Relève : en-têtes de jour du bloc Handover */
.day-head {
    margin: var(--sp-4) 0 var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- Page de santé ---------- */

.page-plain { padding: var(--sp-6); }
.page-plain .ok { color: var(--ok); font-weight: 700; }
.page-plain .ko { color: var(--ko); font-weight: 700; }

/* ---------- Tablette / écrans étroits ---------- */

@media (max-width: 900px) {
    .topbar { padding: var(--sp-1) var(--sp-2); gap: var(--sp-2) var(--sp-3); }
    .topbar .whoami .name { display: none; }   /* garde « Se déconnecter » */
    .cal td.slot { min-width: 3rem; }
    /* Pas d'empilement collant sur écran étroit (un tiers de l'écran) :
       seule la barre de shift reste collée, comme avant le 02/09. */
    .sticky-head { position: static; }
    .shiftbar { position: sticky; top: 0; z-index: 80; }
    .tabs-row { top: 2.7rem; }
    /* Écran étroit : on ne colle pas les gros filtres (ils mangeraient
       l'écran) ; seule la rangée d'onglets reste collée, comme ailleurs. */
    .data-sticky { position: static; padding-top: 0; }
    .data-sticky .tabs-row { position: sticky; top: 2.7rem; z-index: 60; background: var(--bg); }
}

/* Badges d'attribution sur les cartes de suivi — doux, scannables ;
   le bloquant reste la seule couleur forte */
.fu-meta .chip { vertical-align: middle; }

.chip-asg-maintenance { background: #fbf1da; color: #a67408; border-color: transparent; font-weight: 700; }

.chip-asg-direction { background: var(--border-strong); color: #fff; border-color: transparent; font-weight: 700; }

.chip-asg-shift { background: var(--surface-dim); color: var(--muted); border-color: var(--border); font-weight: 700; }

.chip-asg-unassigned { background: #fdebdf; color: var(--accent-strong); border-color: transparent; font-weight: 700; }

/* ---------- Feuille maintenance ---------- */

/* Pleine largeur, comme le calendrier : quatre centres ont besoin d'air. */
.page-mt .client-page { max-width: none; padding: var(--sp-5) var(--sp-6); }

/* Le bandeau des centres est le SÉLECTEUR : une tuile par centre, l'ordre
   stable de la tournée ; la tuile active porte la marque d'onglet (liseré
   bas), le bloquant reste la seule couleur d'information. */
.mt-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.mt-tile {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: 3px solid transparent;
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
}

a.mt-tile:hover { background: var(--surface-dim); }

.mt-tile.is-empty { background: transparent; border-style: dashed dashed solid; }

.mt-tile.is-active {
    border-bottom-color: var(--accent);
    border-style: solid;
    background: var(--surface);
}

.mt-tile.is-active .mt-tile-name { color: var(--text); }

.mt-tile-name {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.mt-tile-count {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-size: var(--fs-xl);
    font-weight: 700;
}

.mt-tile-count.muted { font-size: var(--fs-md); font-weight: 400; }

.mt-tile-word { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }

.mt-tile .chip-u-blocking { font-size: var(--fs-sm); align-self: center; }

/* Mention de traduction automatique, en tête du bloc traduit */
.tr-tag {
    display: block;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Sélecteur de langue d'interface, dans le bandeau supérieur */
.lang-form { display: inline-flex; align-items: center; }

.lang-form select {
    min-height: 1.8rem;
    padding: 0 var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--muted);
    border-color: var(--border);
}

@media (max-width: 900px) {
    .page-mt .client-page { padding: var(--sp-4); }
    .mt-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Le Guide (onboarding) ----------
   Un guide se LIT : colonne de lecture bornée, air généreux, la coche
   verte est la seule couleur d'état — le parcours se voit d'un coup d'œil. */

.page-help .client-page { max-width: 56rem; padding: var(--sp-5) var(--sp-6); }

.page-help .card + .card { margin-top: var(--sp-4); }

/* Tête de parcours : où j'en suis + la recherche, sur une ligne qui respire */
.help-head { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }

.help-progress { flex: 1; min-width: 16rem; }

.hp-line { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); font-weight: 600; }

.hp-line.hp-done { color: var(--ok); }

.hp-bar {
    height: 0.5rem;
    background: var(--surface-dim);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.hp-fill { height: 100%; background: var(--accent); border-radius: 999px; }

.hp-fill-done { background: var(--ok); }

.help-search { margin: 0; }

.help-search input[type="search"] { min-width: 14rem; }

/* En-tête de section : le compteur lu/total en gris, l'ajout (direction)
   repoussé à droite */
.help-section .hs-count { font-size: var(--fs-sm); font-weight: 400; }

.section-title .hs-add { margin-left: auto; font-size: var(--fs-sm); font-weight: 400; }

/* Un article = une ligne repliée (coche + titre), le contenu se déplie
   sur place — même patron que les cartes de suivi */
.help-article { border-top: 1px solid var(--border); }

.ha-sum {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--touch);
    padding: var(--sp-2) 0;
    cursor: pointer;
    font-size: var(--fs-md);
}

.ha-sum:hover { background: var(--surface-dim); }

.ha-state {
    width: 1.4rem;
    height: 1.4rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.help-article.is-read .ha-state { background: var(--ok); border-color: var(--ok); }

.ha-title { font-weight: 600; overflow-wrap: anywhere; }

.help-article.is-read .ha-title { color: var(--muted); }

/* Le contenu déplié s'aligne sous le titre, pas sous la coche */
.ha-body { padding: var(--sp-2) 0 var(--sp-4) calc(1.4rem + var(--sp-3)); }

.ha-img-link { display: block; margin-bottom: var(--sp-3); }

.ha-img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); }

.ha-img-current { display: block; max-width: 20rem; margin-bottom: var(--sp-2); }

.ha-text { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }

.ha-foot { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-sm); }

.ha-read-form { display: inline-flex; }

.ha-unread { padding: 0; font-size: var(--fs-sm); color: var(--muted); }

/* Rédaction (direction) : le champ long prend toute la largeur de la grille */
.admin-form .field-wide { grid-column: 1 / -1; }

.admin-form .field textarea,
.admin-form .field input[type="number"] { width: 100%; }

.ha-editor-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }

.ha-editor-actions .btn { text-decoration: none; }

.ha-archive-form { display: flex; justify-content: flex-end; margin-top: var(--sp-2); }

/* Qui a lu quoi : la barre par personne, verte une fois le parcours bouclé */
.help-team-bar { width: 30%; min-width: 10rem; }

.help-team .hp-bar { height: 0.45rem; }

/* Mention de traduction automatique d'un article */
.ha-trnote { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); }

/* Le nudge d'onboarding : carte CENTRÉE sur un fond assombri, sur tous
   les écrans, tant que le parcours est sous 50 %. Trois sorties (×,
   Plus tard, clic sur le fond) — jamais un verrou. L'attribut hidden
   DOIT gagner (leçon de la pastille du 26/08). */
.onb-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(35, 33, 31, 0.4);
    padding: var(--sp-4);
}

.onb-overlay[hidden] { display: none; }

.onb-nudge {
    position: relative;
    width: min(26rem, 100%);
    padding: var(--sp-5) var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-top: 4px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.onb-title { margin: 0 0 var(--sp-1); font-size: var(--fs-lg); font-weight: 700; }

.onb-text { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }

.onb-nudge .hp-bar { margin-bottom: var(--sp-4); }

.onb-cta { text-decoration: none; width: 100%; }

/* Le « Plus tard » : sous le bouton principal, volontairement discret */
.onb-skip {
    display: block;
    margin: var(--sp-3) auto 0;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.onb-skip:hover { color: var(--text); }

.onb-close {
    position: absolute;
    top: var(--sp-1);
    right: var(--sp-2);
    border: 0;
    background: none;
    color: var(--muted);
    font-size: var(--fs-xl);
    line-height: 1;
    cursor: pointer;
    padding: var(--sp-1);
}

.onb-close:hover { color: var(--text); }

@media (max-width: 900px) {
    .page-help .client-page { padding: var(--sp-4); }
    .help-head { flex-direction: column; align-items: stretch; }
}

/* ---------- Tiroir de navigation mobile (signalement #48) ----------
   Sous 900 px, la rangée d'onglets débordait et se coupait : elle se
   replie derrière un burger, le tiroir reprend les mêmes liens en items
   pleine largeur, tappables au pouce. Desktop : rien ne change. */

.nav-burger { display: none; }

.nav-drawer { display: none; }

@media (max-width: 900px) {
    .topbar .topnav,
    .topbar .lang-form { display: none; }
    .topbar .whoami { margin-left: auto; }
    .topbar .whoami > a:not(.btn-better),
    .topbar .whoami .topbar-ic { display: none; }

    .nav-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.6rem;
        height: 2.6rem;
        font-size: 1.3rem;
        line-height: 1;
        background: none;
        border: 1px solid var(--border);
        border-radius: var(--radius, 8px);
        color: var(--text);
        cursor: pointer;
    }

    .nav-drawer {
        position: fixed;
        inset: 0;
        width: min(22rem, 88vw);
        height: 100%;
        max-height: none;
        margin: 0;
        padding: 0;
        border: none;
        border-right: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
    }
    .nav-drawer[open] { display: flex; flex-direction: column; }
    .nav-drawer::backdrop { background: rgba(0, 0, 0, .55); }

    .nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--sp-3) var(--sp-4);
        border-bottom: 1px solid var(--border);
    }
    .nav-drawer-close {
        width: 2.4rem;
        height: 2.4rem;
        font-size: 1.1rem;
        background: none;
        border: none;
        color: var(--muted);
        cursor: pointer;
    }

    .nav-drawer-links { display: flex; flex-direction: column; }
    .nav-drawer-links a {
        display: block;
        padding: .85rem var(--sp-4);
        font-size: 1.05rem;
        color: var(--text);
        text-decoration: none;
        border-bottom: 1px solid var(--border);
        border-left: 3px solid transparent;
    }
    .nav-drawer-links a.active {
        border-left-color: var(--accent-strong, #e8590c);
        background: var(--surface-dim);
        font-weight: 700;
    }
    .nav-drawer-always { margin-top: var(--sp-2); }

    .nav-drawer-account {
        margin-top: auto;
        padding: var(--sp-3) var(--sp-4);
        border-top: 1px solid var(--border);
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-2) var(--sp-3);
        align-items: center;
    }
    .nav-drawer-account a { color: var(--text); }
}

/* ---------- Popups de l'Horaire (signalements #45 et #47) ----------
   Le dialog générique fait 20rem : trop étroit pour le formulaire de
   changement manuel (scroll horizontal interne) et pour le partage. */

dialog#tsDialog { width: min(92vw, 30rem); }
#tsDialog select, #tsDialog input[type="text"], #tsDialog input[type="date"] { width: 100%; }
#tsDialog .field { margin-bottom: var(--sp-3); }

.share-dialog { width: min(60rem, 92vw); }
.booking-dialog .actions { flex-wrap: wrap; }

/* ---------- Popup de reset : liste-mémo + historique (signalement #38) */

.reset-dialog .rd-item {
    padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
    position: relative;
}
.reset-dialog .rd-item::before {
    content: '•';
    position: absolute;
    left: var(--sp-2);
    color: var(--muted);
}

.rd-hist { margin: 0 0 var(--sp-3); }
.rd-hist summary { color: var(--muted); cursor: pointer; font-size: var(--fs-sm); }
.rd-hist ul { list-style: none; padding: var(--sp-2) 0 0; margin: 0; }
.rd-hist li {
    padding: var(--sp-1) 0;
    font-size: var(--fs-sm);
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}

/* ---------- Clients : le mix des statuts dans l'en-tête (01/09) */

.section-title .st-summary {
    display: inline-flex;
    gap: var(--sp-3);
    margin-left: var(--sp-3);
    vertical-align: middle;
}
.st-sum {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-sm);
    color: var(--muted);
    font-weight: 600;
}

/* ---------- Highlight ciblé : l'adressage se voit (signalement #35) */

.chip-target {
    background: #fff3e6;
    color: var(--accent-strong, #e8590c);
    border-color: transparent;
    font-weight: 700;
}

/* ---------- La ✕ des popups (signalements #37/#39) : l'instinct cherche
   une croix en haut à droite — Close et Échap restent, elle s'y ajoute */

dialog.reset-dialog,
dialog.booking-dialog {
    position: relative;
}

.dlg-x {
    position: absolute;
    top: .6rem;
    right: .6rem;
    border: 0;
    background: none;
    font-size: 1.05rem;
    line-height: 1;
    padding: .35rem .5rem;
    cursor: pointer;
    color: var(--muted, #8a8377);
    border-radius: 6px;
}

.dlg-x:hover {
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
}

/* ---------- Highlight programmé (signalement #36) : la mention en Gestion */

.pin-programmed { color: var(--accent-strong, #cf4f12); }

/* ===== To do, objet unique du handover (spec Damien 03/09) ===== */
.day-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.task-row-form { display: flex; align-items: flex-start; gap: var(--sp-2); flex: 1; min-width: 0; }
.task-row-form .task-check { margin-top: 0.2rem; }

.task.is-blocking { background: #fff4f2; border-left: 4px solid var(--ko); padding-left: var(--sp-2); }
.task-label .chip { margin-left: var(--sp-1); vertical-align: middle; font-size: var(--fs-xs); }
.chip-asg-backoffice { background: var(--border-strong); color: #fff; border-color: transparent; }

.task-comment { font-size: var(--fs-sm); color: var(--text); font-style: italic; }

/* Le cercle coché révèle la fermeture : commentaire obligatoire + bouton. */
.task-close-fields { display: none; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.task-check-box:checked ~ .task-main .task-close-fields { display: flex; }
.task-close-fields textarea { width: 100%; min-height: 2.6rem; resize: vertical; }
.task-close-fields .btn-ok { align-self: flex-start; }

.task-tools {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
    flex-basis: 100%; padding-left: calc(1.4rem + var(--sp-2)); font-size: var(--fs-xs);
}
.task { flex-wrap: wrap; }
.task-tool { display: inline-flex; }
.task-edit summary { list-style: none; cursor: pointer; }
.task-edit summary::-webkit-details-marker { display: none; }
.task-edit-form { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-basis: 100%; }
.task-edit-form input[type="text"] { flex: 1; min-width: 12rem; }

.task-form { align-items: flex-start; }
.task-form .task-options { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; flex-basis: 100%; font-size: var(--fs-sm); }
.task-form .task-options select { min-height: auto; padding: var(--sp-1) var(--sp-2); }

.note-esc { display: inline-flex; }
.tab-day .chip-u-blocking { font-size: var(--fs-xs); margin-left: var(--sp-1); }

.write-options { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }

.write-todo select, .note-todo-form select { min-height: auto; padding: var(--sp-1) var(--sp-2); }
.note-todo { display: inline-block; }
.note-todo summary { list-style: none; cursor: pointer; }
.note-todo summary::-webkit-details-marker { display: none; }
.note-todo-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }
/* Déplié, « → To do » prend une ligne entière sous la ligne auteur·heure (03/09) :
   le libellé et son formulaire sur une seule rangée, jamais cassés sur deux */
.journal-feed .comment .note-todo[open] { flex-basis: 100%; order: 10; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-1); }
.journal-feed .comment .note-todo[open] .note-todo-form { margin-top: 0; }

/* Carte to-do (03/09 soir) : ligne calme + « J'interviens » ; fil et outils repliés */
.task-card .fu-sum { display: flex; align-items: flex-start; gap: var(--sp-3); }
.task-card .task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.task-card .task-intervene { flex: none; align-self: center; min-height: auto; padding: var(--sp-1) var(--sp-3); }
.task-card.is-done .task-label { text-decoration: line-through; color: var(--muted); }
.task-card .fu-last { font-size: var(--fs-sm); }
.task-tools-fold { margin-top: var(--sp-2); font-size: var(--fs-xs); }
.task-tools-fold summary { list-style: none; cursor: pointer; }
.task-tools-fold summary::-webkit-details-marker { display: none; }
.task-tools-fold .task-tools { padding-left: 0; margin-top: var(--sp-1); }
.fu-j-closing { color: var(--ok); }

.task-hand { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.task-hand select { min-height: auto; padding: var(--sp-1) var(--sp-2); }

/* Escaladés, en cours : en bas, compacts, toujours visibles */
.task-zone-title { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: var(--sp-4) 0 var(--sp-1); font-weight: 500; display: flex; align-items: center; gap: var(--sp-2); }
.task-zone-title .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.task-card.is-compact { padding-top: var(--sp-1); padding-bottom: var(--sp-1); background: var(--surface-dim); }
.task-card.is-compact .task-label { font-size: var(--fs-sm); color: var(--muted); }
.task-card.is-compact.u-blocking .task-label { color: var(--text); }
.task-card.is-compact .task-intervene { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.tab-esc { font-size: var(--fs-xs); margin-left: var(--sp-1); }

.write-options { align-items: center; }
.write-todo { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); }

/* Hiérarchie de la ligne to-do (Damien, 03/09) : le libellé seul compte */
.task-card .fu-sum { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
.task-card .task-main { gap: 0.1rem; }
.task-card .task-label { font-size: var(--fs-md); font-weight: 500; line-height: 1.35; }
.task-card .task-meta { font-size: var(--fs-xs); line-height: 1.3; }
.task-card .fu-last { font-size: var(--fs-xs); color: var(--muted); }
.task-card .fu-last::before { content: none; }
.task-card .task-intervene { background: transparent; color: var(--accent-strong); border: 1px solid var(--border); font-size: var(--fs-xs); padding: 0.15rem var(--sp-2); }
.task-card .task-intervene:hover { background: var(--surface-dim); }
.task-card .fu-full { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.task-card + .task-card { margin-top: var(--sp-2); }
.task-card.is-compact .fu-sum { padding: var(--sp-1) var(--sp-3); }

/* Journal (calendrier ET historique Center) : même hiérarchie que les cartes
   to-do (Damien, 03/09 soir) — un bloc
   par entrée, le texte d'abord et en avant, la ligne auteur·heure·actions en
   retrait dessous. L'ordre visuel est inversé par flex (le markup garde
   l'en-tête avant le texte). Importante = liseré rouge, comme un to-do bloquant. */
.journal-feed .comment {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border-strong);
    border-radius: var(--radius);
}
.journal-feed .comment + .comment { margin-top: var(--sp-2); }
/* Idée #61 (Audrey, 04/09) : l'entrée qui a un to-do ouvert porte un liseré
   orange ; « important » (rouge) garde le dessus, la puce orange reste */
.journal-feed .comment.has-todo { border-left-color: var(--accent); }
.chip-todo { color: #fff; background: var(--accent); border-color: transparent; }
.journal-feed .comment.is-important { border-left-color: var(--ko); }
.journal-feed .comment.settled-note { border-left-color: var(--ok); }
.journal-feed .comment .c-text { order: -1; margin: 0; font-size: var(--fs-md); font-weight: 500; line-height: 1.35; }
.journal-feed .comment .c-head { font-size: var(--fs-xs); line-height: 1.3; gap: var(--sp-2); align-items: center; color: var(--muted); }
.journal-feed .comment .c-head strong { font-size: var(--fs-xs); font-weight: 600; color: var(--text); }
.journal-feed .comment .c-head .chip { font-size: var(--fs-xs); padding: 0 var(--sp-2); }
.journal-feed .comment .c-head .btn-link, .journal-feed .comment .c-head .note-esc .btn-link, .journal-feed .comment .c-head .note-todo summary { font-size: var(--fs-xs); opacity: .6; }
.journal-feed .comment:hover .c-head .btn-link, .journal-feed .comment:hover .c-head .note-todo summary { opacity: 1; }
.journal-feed .comment .c-edit { margin-top: var(--sp-2); }
.journal-feed .day-head { font-size: var(--fs-xs); margin: var(--sp-3) 0 var(--sp-2); }
.journal-feed .day-head:first-of-type { margin-top: var(--sp-2); }

/* Entrée ciblée par un lien (« from the journal », digest) : mise en évidence, pas de fiche */
.journal-feed .comment:target { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(242, 101, 34, .18); }

/* Les ancres atterrissent SOUS les barres collantes (bandeau + shift + onglet), pas dessous-cachées */
.comment, .task-card, #todo, .card { scroll-margin-top: 11rem; }

/* ---------- Profil déclaré (Damien, 03/09 soir) : pop-up, page, fiche ---------- */
.whoami .whoami-profile { color: var(--accent-strong); text-decoration: underline; margin-right: var(--sp-2); }
.whoami .whoami-profile:hover { color: var(--accent); }
dialog.prof-dialog {
    width: min(92vw, 30rem);
    max-height: 85vh;
    overflow-y: auto;
    border: 0;
    border-top: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: var(--sp-5) var(--sp-6);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3);
    position: relative;
}
dialog.prof-dialog::backdrop { background: rgba(35, 33, 31, 0.4); }
dialog.prof-dialog .onb-title { text-align: center; margin-bottom: var(--sp-3); }
.prof-nudge { text-align: left; width: min(32rem, 100%); }
.prof-nudge .onb-title { text-align: center; margin-bottom: var(--sp-3); }
.prof-why { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.prof-block { margin: 0 0 var(--sp-4); }
.prof-label { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-2); }
.prof-label .prof-count { text-transform: none; letter-spacing: 0; font-weight: 400; }
.prof-skills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.prof-skills .check-item { margin: 0; }
.prof-skills .prof-none { flex-basis: 100%; }
.prof-form textarea { width: 100%; min-height: 5.5rem; resize: vertical; line-height: 1.5; }
.prof-actions { display: flex; align-items: center; gap: var(--sp-3); }
.prof-actions .onb-skip { margin: 0; }
.prof-page { flex-direction: column; align-items: center; gap: var(--sp-4); }
.prof-page .card { width: min(40rem, 100%); }
.prof-card { padding: var(--sp-2) 0; }
.prof-name { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); font-weight: 700; }
.prof-meta { margin: 0 0 var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }
.prof-chips { margin: 0; }
.prof-bio { margin: 0; line-height: 1.55; max-width: 40rem; }

/* Fiche client : les alertes « banni » au-dessus des cartes, pleine largeur. */
.ban-box-client { margin-bottom: var(--sp-3); }

/* ---------- Écritures Pimcore (14/09) : annulation dans la popup, crédits
   sur la fiche, journal ---------- */
.pw-box { margin: var(--sp-3) 0; }
.pw-box .pw-open { width: auto; }
.pw-form { display: grid; gap: var(--sp-2); }
.pw-form .pw-warn { margin: 0; padding: var(--sp-2) var(--sp-3); background: #fdecea; border-left: 4px solid var(--ko); border-radius: var(--radius); line-height: 1.45; }
.pw-form .pw-started { margin: 0; color: var(--ko); font-weight: 600; }
.pw-form input[type="text"], .pw-form input[type="number"] { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--border-strong, #cbc8c2); border-radius: 6px; font: inherit; }
.pw-form label { display: grid; gap: 4px; font-size: var(--fs-sm, 0.9rem); }
.pw-form .pw-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.pw-credit { margin-top: var(--sp-3); }
.pw-credit summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.pw-credit .pw-form { margin-top: var(--sp-2); }
.pw-hist { margin: var(--sp-2) 0 0; padding-left: 18px; font-size: var(--fs-sm, 0.9rem); color: var(--muted); }
.pw-hist li.is-err { color: var(--ko); }
.pw-table tr.is-err td { color: var(--ko); }
.admin-links { margin: 0 0 var(--sp-2); }

/* « Pas de demande d'avis » (02/10) : même geste que le monitor, sans l'alarme
   rouge — un bouton neutre, un bandeau gris quand il est posé */
.review-hold-set summary {
    background: var(--surface-dim);
    color: var(--text, inherit);
    border: 1px solid var(--border);
}

/* ---------- Management data — volet Server tracking (08/10/2026) ----------
   Deux tuiles pleine largeur (Meta, TikTok) qui respirent : un point de
   santé, les grands nombres des 30 jours, le dernier passage en toutes lettres. */
.trk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: var(--sp-5); }

.trk-tile { background: var(--surface-dim); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5) var(--sp-6); }

.trk-tile-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); font-size: var(--fs-md); }

.trk-tile-head .muted { font-size: var(--fs-xs); }

.trk-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; align-self: center; }

.trk-ok { background: var(--ok); }

.trk-ko { background: var(--ko); }

.trk-ok-text { color: var(--ok); }

.trk-ko-text { color: var(--ko); }

.trk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); }

.trk-kpis > div { display: flex; flex-direction: column; gap: var(--sp-1); }

.trk-big { font-size: 1.9rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }

.trk-lbl { font-size: var(--fs-xs); color: var(--muted); }

.trk-run { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }

/* Pourquoi une commande n'a pas abouti (14/10) : onglets Canceled / Not paid
   et carte Booking. Le libellé d'abord, le détail en dessous, l'alerte en rouge. */
.hist td.why { min-width: 16rem; }
.why-label { display: block; font-weight: 600; }
.why-label.why-alert { color: var(--ko); }
.why-detail { display: block; font-size: var(--fs-xs); margin-top: 2px; }
.why-block { border-top: 1px solid var(--border); margin-top: var(--sp-3); padding-top: var(--sp-3); }
.why-block p { margin: 0 0 var(--sp-2); }
.why-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.why-mail { display: block; font-size: var(--fs-xs); margin-top: 4px; }
.why-mail-bounced strong, .why-mail-spam strong { color: var(--ko); }