/* Crème & Cie — Horaire
   Système visuel « Comptoir » : interface sans-serif dense (Manrope), rayons de 8 à 14 px,
   blocs de liste plutôt que cartes flottantes, accent bleu du logo. Même direction que le
   portail interne — les deux applications doivent être indiscernables.
   Voir Design/« Design - Plano » pour la spécification complète. */

:root {
    /* Encres du logo */
    --color-accent: #12789e;       /* bleu du logo, assombri pour le contraste */
    --color-accent-100: #e6f2f8;   /* teinte de fond : ligne active, pastille, survol */
    --color-accent-200: #afd5e7;   /* bordure d'accent, contour de bouton secondaire */
    --color-accent-300: #7fc3de;
    --color-accent-600: #0d6183;   /* survol / pressé */
    --color-accent-700: #0b4a63;   /* texte sur teinte claire, titres forts */
    --brand-sky: #38c2ec;          /* bleu clair du logo — bâtons « disponible » UNIQUEMENT */
    --brand-orange: #ef8022;       /* orange du logo — « nouveau », anniversaire, RARE */
    --brand-orange-100: #fdf1e5;
    --brand-orange-200: #fadfc4;
    --brand-orange-700: #96601a;   /* texte orange lisible sur blanc */
    --brand-brick: #b8232f;        /* rouge du logo — rôle propriétaire, suppression confirmée */

    /* Surfaces */
    --color-bg: #f5f7f7;
    --color-surface: #ffffff;
    --color-surface-alt: #fafbfb;  /* en-tête de tableau, survol de ligne */
    --color-divider: #e4e8e8;      /* TOUTES les bordures et séparateurs */
    --color-line-strong: #dce1e1;  /* bordure de champ */

    /* Texte */
    --color-text: #14181a;
    --color-text-mid: #5b6668;     /* secondaire, >= 4.5:1 sur blanc */
    --color-text-soft: #8c9799;    /* labels, méta — 12 px minimum */

    /* Rampe neutre — alignée sur les surfaces ci-dessus. Le spec ne la mentionne pas, mais
       elle est référencée dans toute la feuille : ses valeurs sont retendues vers le gris
       froid du nouveau système plutôt que supprimées. */
    --color-neutral-100: #f5f7f7;
    --color-neutral-200: #edf0f0;
    --color-neutral-300: #e4e8e8;
    --color-neutral-400: #c6cdcd;
    --color-neutral-500: #a4adae;
    --color-neutral-600: #8c9799;
    --color-neutral-700: #5b6668;
    --color-neutral-800: #394245;
    --color-neutral-900: #14181a;

    /* États — il n'y a PAS de vert d'état. « Fait / approuvé / en poste » se dit en accent. */
    --color-danger: #b4463c;
    --color-danger-100: #fdf2f1;
    --color-danger-200: #f0dad7;
    --color-warn: #96601a;
    --color-warn-100: #fbf2e3;

    /* Typo */
    --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    /* Formes */
    --radius-sm: 8px;   /* pastille, case, petit bouton */
    --radius-md: 10px;  /* bouton, champ */
    --radius-lg: 14px;  /* carte, bloc de liste */
    --shadow-sm: 0 1px 2px rgba(20, 24, 26, .06);
    --shadow-md: 0 4px 16px rgba(20, 24, 26, .08);
    --shadow-lg: 0 18px 44px -18px rgba(20, 24, 26, .28);

    /* Rythme — multiples de 4 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Surfaces */
        --color-bg: #101416;
        --color-surface: #181d20;
        --color-surface-alt: #1e2427;
        --color-divider: #272e31;
        --color-line-strong: #333b3f;

        /* Texte */
        --color-text: #f0f3f1;
        --color-text-mid: #b4bec0;
        --color-text-soft: #8a9497;

        /* Rampe neutre — dérivée des surfaces ci-dessus (non fournie par le spec, mais
           référencée partout dans la feuille ; la retirer casserait chaque composant). */
        --color-neutral-100: #181d20;
        --color-neutral-200: #1e2427;
        --color-neutral-300: #272e31;
        --color-neutral-400: #333b3f;
        --color-neutral-500: #5a6568;
        --color-neutral-600: #8a9497;
        --color-neutral-700: #b4bec0;
        --color-neutral-800: #d9e0e0;
        --color-neutral-900: #f0f3f1;

        /* Accent */
        --color-accent: #4fc0ea;
        --color-accent-100: #0f2b39;
        --color-accent-200: #17435a;
        --color-accent-300: #1f5d7c;
        --color-accent-600: #7ad2f1;
        --color-accent-700: #a7e2f6;

        /* États */
        --color-danger: #e58a80;
        --color-danger-100: #33201e;
        --color-danger-200: #4a2a27;
        --color-warn: #e0a76a;
        --color-warn-100: #33261a;

        /* Encres du logo */
        --brand-sky: #4fc0ea;
        --brand-orange: #f79542;
        /* Les trois valeurs suivantes ne sont pas dans le spec : dérivées sur le même principe
           que les rampes sombres (100 = surface teintée, 700 = texte lisible dessus), sinon
           elles retomberaient sur leurs valeurs claires et seraient illisibles. */
        --brand-orange-100: #33261a;
        --brand-orange-200: #4a3720;
        --brand-orange-700: #f9b478;
        --brand-brick: #ee8a8f;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
        --shadow-lg: 0 18px 44px -18px rgba(0, 0, 0, 0.7);
    }
}

:root[data-theme="dark"] {
    /* Surfaces */
    --color-bg: #101416;
    --color-surface: #181d20;
    --color-surface-alt: #1e2427;
    --color-divider: #272e31;
    --color-line-strong: #333b3f;

    /* Texte */
    --color-text: #f0f3f1;
    --color-text-mid: #b4bec0;
    --color-text-soft: #8a9497;

    /* Rampe neutre — dérivée des surfaces ci-dessus (non fournie par le spec, mais
       référencée partout dans la feuille ; la retirer casserait chaque composant). */
    --color-neutral-100: #181d20;
    --color-neutral-200: #1e2427;
    --color-neutral-300: #272e31;
    --color-neutral-400: #333b3f;
    --color-neutral-500: #5a6568;
    --color-neutral-600: #8a9497;
    --color-neutral-700: #b4bec0;
    --color-neutral-800: #d9e0e0;
    --color-neutral-900: #f0f3f1;

    /* Accent */
    --color-accent: #4fc0ea;
    --color-accent-100: #0f2b39;
    --color-accent-200: #17435a;
    --color-accent-300: #1f5d7c;
    --color-accent-600: #7ad2f1;
    --color-accent-700: #a7e2f6;

    /* États */
    --color-danger: #e58a80;
    --color-danger-100: #33201e;
    --color-danger-200: #4a2a27;
    --color-warn: #e0a76a;
    --color-warn-100: #33261a;

    /* Encres du logo */
    --brand-sky: #4fc0ea;
    --brand-orange: #f79542;
    /* Les trois valeurs suivantes ne sont pas dans le spec : dérivées sur le même principe
       que les rampes sombres (100 = surface teintée, 700 = texte lisible dessus), sinon
       elles retomberaient sur leurs valeurs claires et seraient illisibles. */
    --brand-orange-100: #33261a;
    --brand-orange-200: #4a3720;
    --brand-orange-700: #f9b478;
    --brand-brick: #ee8a8f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 18px 44px -18px rgba(0, 0, 0, 0.7);
}


* {
    box-sizing: border-box;
}

/* Material Symbols Rounded (§4) — le glyphe est le contenu de l'élément (ligature), donc
   `.icon` doit rester en ligne et ne jamais hériter d'une transformation de casse. */
.icon {
    font-family: 'Material Symbols Rounded';
    font-weight: 300;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-variant-ligatures: none;
    -webkit-font-smoothing: antialiased;
}

.icon-lg { font-size: 24px; }
.icon-sm { font-size: 18px; }

body {
    margin: 0;
    font-family: var(--font-ui);
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    transition: background .35s ease, color .35s ease;
}

h1, h2, h3, h4 {
    font-family: var(--font-ui);
    font-weight: 700;
    margin: 0;
}

h1 {
    letter-spacing: -.02em;
}

/* §3 : tout chiffre est tabulaire — heures, dates, totaux, taux, montants. Sans ça les
   colonnes de la grille et des feuilles de temps ne s'alignent pas. */
.tnum,
.num,
.hero-num,
td,
th,
time {
    font-variant-numeric: tabular-nums;
}

a {
    color: var(--color-accent-700);
    text-decoration: none;
}

a:hover {
    color: var(--color-danger);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 1rem;
    color: inherit;
}

/* §6.11 : l'étiquette est un sur-titre. */
label {
    display: block;
    margin-top: var(--space-3);
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}

/* §6.11 : 16 px sur mobile pour empêcher le zoom automatique d'iOS. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="color"],
input[type="file"],
input[type="search"],
input[type="number"],
select,
textarea {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

textarea {
    padding: var(--space-2) var(--space-3);
    min-height: auto;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(18, 120, 158, .15);
    outline: none;
}

button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: var(--space-4);
    min-height: 44px;
    padding: 0 16px;
    background: var(--color-accent);
    color: #fff;
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

button:hover,
.button:hover {
    background: var(--color-accent-600);
}

button:active,
.button:active {
    opacity: .92;
}

button:disabled,
.button:disabled,
button[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/* §6.3 : la famille de boutons. `button` nu garde l'allure « primaire » pour les pages
   qui n'ont pas de classe ; .btn* donne les quatre variantes du spec. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    font: 700 15px/1 var(--font-ui);
    border: 1.5px solid transparent;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary {
    background: var(--color-accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--color-accent-600);
}

.btn-outline {
    background: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent-200);
}

.btn-outline:hover {
    background: var(--color-accent-100);
}

.btn-quiet {
    background: transparent;
    color: var(--color-text-mid);
}

.btn-quiet:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

/* §2.3 : refuser n'est jamais un bouton plein rouge — le rouge n'arrive qu'au survol. */
.btn-refuse {
    background: transparent;
    color: var(--color-text-mid);
    border-color: var(--color-divider);
}

.btn-refuse:hover {
    background: var(--color-danger-100);
    border-color: var(--color-danger-200);
    color: var(--color-danger);
}

.btn-block {
    width: 100%;
}

.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-sm);
}

/* §6.3 : sur bureau, les boutons de barre d'outils descendent d'un cran. */
@media (min-width: 1024px) {
    .pagehead-tools .btn,
    .hz-weekactions .btn,
    .toolbar .btn {
        min-height: 40px;
        font-size: 13px;
    }
}

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

button.secondary,
.button.secondary {
    background: transparent;
    color: var(--color-accent);
    border: 1.5px solid var(--color-accent-200);
}

button.secondary:hover,
.button.secondary:hover {
    background: var(--color-accent-100);
    color: var(--color-accent);
}

/* §6.11 : une ligne avec son filet, jamais un bloc de trois lignes. */
.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
    font-size: 13px;
    font-weight: 500;
}

.alert .icon {
    font-size: 18px;
}

.alert-error {
    background: var(--color-danger-100);
    border-color: var(--color-danger-200);
    color: var(--color-danger);
}

/* §2.2 : pas de vert. Un succès se dit en accent. */
.alert-success {
    background: var(--color-accent-100);
    border-color: var(--color-accent-200);
    color: var(--color-accent-700);
}

/* §2.4 : l'ambre est réservé aux congés et aux attentes. */
.alert-warning {
    background: var(--color-warn-100);
    border-color: var(--color-warn);
    color: var(--color-warn);
    border-left-width: 1px;
}

/* Pages d'authentification (connexion / inscription) — voir aussi .auth-split plus bas. */
.auth-form input:disabled {
    background: var(--color-neutral-200);
    color: var(--color-neutral-700);
    cursor: not-allowed;
}

/* S : la page d'inscription regroupe ce qui est fixé par la gestion et ce que l'employé
   remplit lui-même — la séparation visuelle rend la frontière évidente. */
.reg-fieldset {
    border: none;
    border-top: 1px solid var(--color-divider);
    padding: var(--space-4) 0 0;
    margin: var(--space-5) 0 0;
}

.reg-fieldset legend {
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-neutral-700);
    font-weight: 600;
    padding: 0 var(--space-2) 0 0;
}

.reg-fieldset .reg-bound {
    margin-top: 0;
}

/* Champs verrouillés de l'inscription (S) : renseignés par la gestion, non modifiables. */
.auth-form input:disabled {
    background: var(--color-neutral-200);
    color: var(--color-neutral-700);
    cursor: not-allowed;
}

.field-hint {
    font-size: 0.85rem;
    color: var(--color-neutral-600);
    margin-top: 4px;
}

/* Coquille applicative : barre latérale, qui devient un rail d'icônes sous 940 px */
.app-shell {
    min-height: 100vh;
    display: flex;
}

.sidebar {
    width: 232px;
    flex: 0 0 232px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-divider);
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* §5 : le logo complet, seul, aligné à gauche — ni plaque, ni cercle, ni texte en double.
   Le sur-titre « HORAIRE » se pose dessous. */
.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 0 4px;
}

.sidebar-brand .brand-logo {
    width: 132px;
    height: auto;
    display: block;
}

.sidebar-brand .kicker {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    font-weight: 600;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* §6.1 : une ligne simple. Pas de barre d'accent à gauche, pas de fond plein saturé —
   l'état actif se dit par la teinte --color-accent-100 et la graisse du libellé. */
.sidebar-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 42px;
    padding: 0 11px;
    border-radius: var(--radius-sm);
    color: var(--color-text-mid);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.sidebar-nav a:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.sidebar-nav a.active {
    background: var(--color-accent-100);
    color: var(--color-accent);
    font-weight: 700;
}

/* La pastille est un élément de la ligne, pas une superposition : posée en absolu comme le
   proposait le handoff, elle recouvrait la fin du libellé « Demandes de congé ». En
   `margin-left: auto`, elle réserve sa place d'elle-même. Le rail mobile, lui, la repasse
   bien en absolu (elle se pose alors sur l'icône, il n'y a plus de libellé à protéger). */
.sidebar-nav .badge {
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 20px;
    min-height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--color-danger-100);
    border: 1px solid var(--color-danger-200);
    color: var(--color-danger);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-nav .icon {
    font-size: 21px;
    flex: 0 0 auto;
}

.sidebar-nav .nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-section-label {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
    margin: var(--space-2) 0 4px;
    padding: 0 var(--space-2);
}

.sidebar-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Onglets des échanges (handoff 3.5) : segmented control avec compteurs. */
/* §6.6 : sur téléphone un segmenté sur piste --color-surface-alt ; sur bureau des onglets
   soulignés. Jamais des blocs pleins. */
.ech-tabs .tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-mid);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}

.ech-tabs .tab.on {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: none;
}

@media (min-width: 1024px) {
    .ech-tabs {
        background: transparent;
        padding: 0;
        border-bottom: 1px solid var(--color-divider);
        border-radius: 0;
    }
    .ech-tabs .tab {
        border-radius: 0;
        border-bottom: 2.5px solid transparent;
        padding: 0 4px;
        margin-right: var(--space-5);
    }
    .ech-tabs .tab.on {
        background: transparent;
        border-bottom-color: var(--color-accent);
        color: var(--color-accent);
    }
}

/* Segmented control 3 états des disponibilités (handoff 3.4). Des boutons radio
   déguisés : la page reste utilisable sans JavaScript, le script ne fait que rafraîchir
   le résumé et montrer les deux champs d'heures. */
/* §6.5 : trois options courtes — Journée · Plage · Pas dispo. `nowrap` est indispensable :
   un libellé qui passe à la ligne casse la rangée sur téléphone. */
.dispo-seg .seg-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 13px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-mid);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.dispo-seg .seg-opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.dispo-seg .seg-opt.on {
    background: var(--color-accent);
    color: #fff;
}

/* « Pas dispo » est le seul segment rouge — c'est un refus, pas un choix comme un autre. */
.dispo-seg .seg-opt[data-mode="non"].on {
    background: var(--color-danger);
}

.dispo-seg .seg-opt:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Sélecteur de rôle du pied de barre latérale (handoff §2) — segmented control :
   piste --color-neutral-200, segment actif sur --color-bg avec une ombre. */
.role-preview .lbl {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
    margin-bottom: 5px;
}

.role-preview .rolegrid {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--radius-md);
    background: var(--color-neutral-200);
}

.role-preview .rolegrid button {
    flex: 1;
    min-height: 32px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-neutral-600);
    font-family: var(--font-ui);
    font-size: 13px;
    cursor: pointer;
    box-shadow: none;
}

.role-preview .rolegrid button.on {
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-2) 4px;
    min-width: 0;
}

/* §6.1 : carré arrondi, pas un rond, et l'accent plein avec les initiales en blanc. */
.sidebar-user .avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .02em;
}

.sidebar-user .who {
    min-width: 0;
}

.sidebar-user .name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user .role {
    color: var(--color-text-soft);
    font-size: 11px;
    font-weight: 500;
}

/* Ligne de deux boutons outline : thème + déconnexion (icône seule). */
.sidebar-actions {
    display: flex;
    gap: var(--space-2);
}

.sidebar-actions .theme-toggle {
    flex: 1;
    min-width: 0;
}

.sidebar-actions form {
    flex: 0 0 auto;
}

.sidebar-actions .theme-toggle,
.sidebar-actions .logout-link {
    min-height: 36px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm);
    color: var(--color-text-mid);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    justify-content: center;
    width: auto;
    padding: 0 var(--space-2);
}

.sidebar-actions .theme-toggle:hover,
.sidebar-actions .logout-link:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

/* Déconnexion : icône seule, libellé conservé pour les lecteurs d'écran. */
.sidebar-actions .logout-link {
    width: 36px;
    height: 36px;
    padding: 0;
}

/* Même raison que plus bas dans le rail : le glyphe est un <span class="icon"> depuis le
   passage aux Material Symbols, il ne doit pas être masqué avec le libellé. */
.sidebar-actions .logout-link span:not(.icon) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.theme-toggle,
.logout-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-2);
    border: 0;
    background: transparent;
    color: var(--color-neutral-700);
    font-family: var(--font-ui);
    font-size: 16px;
    cursor: pointer;
    border-radius: var(--radius-md);
    width: 100%;
    text-align: left;
    margin: 0;
    text-decoration: none;
}

.theme-toggle:hover,
.logout-link:hover {
    background: var(--color-neutral-200);
    color: var(--color-text);
}

.topbar {
    display: none;
}

/* §7 : contenu fluide, 26 px sur 30 px au-dessus de 1024 px. */
.main {
    flex: 1;
    min-width: 0;
    padding: 26px 30px var(--space-8);
    max-width: 1320px;
}

/* §6.1 : la topbar. Surface, filet en bas, collante — pas d'ombre portée, pas de fond
   foncé. Le padding haut absorbe l'encoche sur iPhone. */
.pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0 0 var(--space-5);
    flex-wrap: wrap;
}

/* §5 : le logo de la topbar ne sert que quand la barre latérale est un rail sans marque. */
.pagehead .topbar-logo {
    display: none;
    width: 56px;
    height: auto;
    object-fit: contain;
    flex: 0 0 auto;
}

.pagehead .kicker {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    font-weight: 600;
    margin-bottom: 5px;
}

.pagehead h1 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
}

.pagehead .subtitle {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-mid);
    max-width: 60ch;
    text-wrap: pretty;
}

.pagehead-tools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pagehead-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    color: var(--color-text-soft);
}

.pagehead-search input {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    min-height: 0;
    width: 150px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}

.pagehead-search input:focus {
    outline: none;
}

.bell-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
    text-decoration: none;
}

.bell-btn:hover {
    background: var(--color-neutral-200);
}

.bell-btn .dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-danger);
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4) var(--space-8);
}

.container-wide {
    max-width: 1200px;
}

/* §6.2 : une seule ombre dans toute l'app — aucune. --shadow-md est réservé au dialogue
   et au menu flottant. La carte se tient par son filet, pas par une élévation. */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    box-shadow: none;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.card h1 {
    font-size: 21px;
}

.card h2 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-3);
}

/* §6.2 : les listes de personnes, de quarts, de documents et de fils sont UN bloc aux
   lignes séparées d'un filet — jamais N cartes flottantes espacées. */
.list {
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.list > * {
    min-height: 64px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-divider);
}

.list > *:last-child {
    border-bottom: none;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

th, td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-divider);
}

/* §6.9 : en-tête de tableau sur --color-surface-alt, jamais un bandeau plein bleu. */
thead th {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    font-weight: 600;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-divider);
}

tbody tr:hover {
    background: var(--color-surface-alt);
}

.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.badge-invite {
    background: var(--color-danger-100);
    color: var(--color-danger);
}

.badge-actif {
    background: var(--color-accent-100);
    color: var(--color-accent-700);
}

.badge-inactif {
    background: var(--color-neutral-200);
    color: var(--color-neutral-700);
}

/* S : lien d'inscription périmé — à traiter, pas juste une information de statut. */
.badge-expired {
    background: var(--color-neutral-200);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
}

.link-box {
    background: var(--color-surface);
    border: 1px dashed var(--color-divider);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font-size: 0.85rem;
    word-break: break-all;
}

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

.stat-tile {
    text-align: left;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-neutral-100);
    padding: var(--space-4);
    cursor: pointer;
    min-height: 90px;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text);
    width: 100%;
    margin: 0;
    transition: transform .15s ease;
}

.stat-tile:hover {
    transform: translateY(-2px);
    background: var(--color-neutral-100);
}

.stat-tile .icon {
    font-size: 32px;
    color: var(--color-accent);
}

.stat-tile .value {
    display: block;
    font-family: var(--font-ui);
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
}

.stat-tile .label {
    display: block;
    font-size: 15px;
    color: var(--color-neutral-700);
}

.avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    background: var(--color-accent-100);
    color: var(--color-accent-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
}

/* Calendrier */
.cal-tabs {
    display: flex;
    gap: 3px;
    padding: 3px;
    border-radius: var(--radius-md);
    background: var(--color-neutral-200);
    width: fit-content;
    margin: var(--space-3) 0;
}

.cal-tabs a {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-neutral-700);
    font-size: 15px;
}

.cal-tabs a.active {
    background: var(--color-accent);
    color: #fff;
}

.cal-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.cal-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--color-divider);
    border: 1px solid var(--color-divider);
}

.cal-weekday {
    background: var(--color-neutral-200);
    padding: 6px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-neutral-600);
    text-align: center;
}

.cal-day-cell {
    background: var(--color-bg);
    min-height: 5rem;
    padding: 6px;
    font-size: 0.78rem;
    text-decoration: none;
    color: var(--color-text);
    display: block;
}

.cal-day-cell:hover {
    background: var(--color-neutral-200);
}

.cal-day-cell.other-month {
    background: var(--color-neutral-100);
    color: var(--color-neutral-500);
}

.cal-day-cell.today {
    box-shadow: inset 0 0 0 2px var(--color-accent);
}

.cal-day-cell.closed {
    background: var(--color-danger-100);
}

.cal-day-num {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 17px;
}

.cal-day-shifts {
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--color-neutral-700);
}

.cal-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    margin-right: 4px;
}

.cal-year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.cal-mini-month {
    padding: var(--space-2);
}

.cal-mini-month h3 {
    margin: 0 0 var(--space-2);
    font-size: 18px;
    text-align: center;
}

.cal-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cal-mini-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
    position: relative;
}

.cal-mini-day:hover {
    background: var(--color-neutral-200);
}

.cal-mini-day.other-month {
    color: var(--color-neutral-400);
}

.cal-mini-day.has-shifts::after {
    content: "";
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-accent);
}

.cal-week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-2);
}

.cal-week-day {
    border-radius: var(--radius-md);
    background: var(--color-neutral-100);
    padding: var(--space-3) var(--space-2);
    min-height: 8rem;
}

.cal-week-day.closed {
    background: var(--color-danger-100);
}

.cal-shift-item {
    background: var(--color-accent-100);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    margin-bottom: 6px;
    font-size: 0.85rem;
}

/* Grille d'horaire style Agendrix (employés en lignes, jours en colonnes) */
/* §6.4 : 168 px de colonne employé, 78 px de total. */
.hz-grid {
    display: grid;
    grid-template-columns: 168px repeat(7, minmax(0, 1fr)) 78px;
    min-width: 1040px;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.hz-head {
    background: var(--color-surface-alt);
    padding: 9px 10px;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text);
    font-weight: 700;
    border-bottom: 1px solid var(--color-divider);
    border-right: 1px solid var(--color-divider);
}

/* La sous-ligne d'ouverture, sous le nom du jour. */
.hz-head .hz-head-sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-soft);
    margin-top: 2px;
}

/* Colonne du jour courant, repérable d'un coup d'œil dans une grille de sept. */
.hz-head.is-today {
    background: var(--color-accent-100);
    color: var(--color-accent);
}

.hz-head.is-today .hz-head-sub {
    color: var(--color-accent);
}

/* Q : anniversaire — un accent discret, jamais une alerte. §2.5 : c'est l'un des deux
   seuls emplois de l'orange du logo. */
.hz-birthday {
    color: var(--brand-orange);
    font-size: 14px;
    vertical-align: -2px;
}

.hz-birthday-note {
    margin: 0 0 var(--space-3);
    font-size: 13px;
    font-weight: 500;
    color: var(--brand-orange-700);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hz-row-label {
    padding: 9px 10px;
    border-bottom: 1px solid var(--color-divider);
    border-right: 1px solid var(--color-divider);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hz-row-label {
    gap: 3px;
}

.hz-row-label .total {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}

.hz-row-label .who {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* §6.4 : avatar carré de 30 px sur --color-surface-alt. */
.hz-row-label .avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    font-size: 11px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
}

.hz-row-label .name {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hz-row-label .total {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}

.hz-row-label.open-row {
    color: var(--color-danger);
}

.hz-cell {
    position: relative;
    min-height: 66px;
    padding: 7px 6px;
    border-bottom: 1px solid var(--color-divider);
    border-right: 1px solid var(--color-divider);
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--color-surface);
}

/* §6.4 : la rangée « À combler » prend un fond à peine teinté, pas un aplat rouge. */
.hz-cell.open-cell {
    background: color-mix(in srgb, var(--color-danger-100) 45%, var(--color-surface));
}

.hz-cell.is-today {
    background: color-mix(in srgb, var(--color-accent-100) 40%, var(--color-surface));
}

.hz-cell.drop-target {
    background: var(--color-accent-100);
    box-shadow: inset 0 0 0 2px var(--color-accent);
}

/* §6.4 : total à droite, tabulaire ; en rouge si la rangée dépasse les heures voulues. */
.hz-total-cell {
    padding: 9px 10px;
    border-bottom: 1px solid var(--color-divider);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.hz-total-cell.is-over {
    color: var(--color-danger);
}

/* §6.4 : tuile assignée — teinte d'accent, filet de 3 px à gauche, heure en 13/700. */
.hz-tile {
    position: relative;
    background: var(--color-accent-100);
    border-left: 3px solid var(--color-accent);
    border-radius: 7px;
    padding: 6px 7px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-accent-700);
    font-variant-numeric: tabular-nums;
}

/* Poste (et nom dans la rangée « à combler ») sous l'heure : même encre, à 85 %. */
.hz-tile-sub,
.hz-tile-open .hz-tile-sub {
    font-size: 11px;
    font-weight: 500;
    color: inherit;
    opacity: .85;
}

.hz-tile[draggable="true"] {
    cursor: grab;
}

.hz-tile[draggable="true"]:active {
    cursor: grabbing;
}

.hz-tile.status-annule {
    opacity: 0.55;
    text-decoration: line-through;
}

.hz-tile-open {
    position: relative;
    background: var(--color-danger-100);
    border-left: 3px solid var(--color-danger);
    border-radius: 7px;
    padding: 6px 7px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-danger);
    font-variant-numeric: tabular-nums;
}

.hz-tile-open[draggable="true"] {
    cursor: grab;
}

.hz-tile-open[draggable="true"]:active {
    cursor: grabbing;
}

/* Bâton de disponibilité, collé au bord gauche de la case. Position et hauteur = la plage
   déclarée, sur l'échelle de la journée ; les heures exactes sont dans l'infobulle. */
/* §6.4 : 4 px de haut. --brand-sky = disponible, #D7DCDC = indisponible. Rien d'autre
   dans l'application ne porte ces deux couleurs (§2.2 : il n'y a plus de vert). */
.hz-dispo-bar {
    position: absolute;
    top: 2px;
    height: 4px;
    min-width: 6px;
    border-radius: 2px;
    cursor: help;
}

.hz-dispo-bar:hover {
    height: 6px;
}

/* Le nom de l'employé garde son total et ses heures voulues, l'un sous l'autre. */
.hz-row-label .total strong {
    font-family: var(--font-ui);
    color: var(--color-text);
}

/* §6.4 : un brouillon se dit par un contour tireté et un fond transparent — le hachurage
   en dégradé du système précédent est retiré (§1 : plus aucun linear-gradient). */
.hz-tile-draft {
    background: transparent;
    border: 1.5px dashed var(--color-accent-200);
    border-left: 3px solid var(--color-accent-200);
}

.hz-tile-time {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
}

/* A2 : indicateur permanent de conflit d'indisponibilité sur une tuile assignée. */
.hz-tile-conflict {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    font-weight: 600;
    font-size: 11px;
    color: var(--color-danger);
}

/* A8 : note visible sur la tuile, distincte du poste (italique, plus discrète). */
.hz-tile-note {
    display: flex;
    align-items: flex-start;
    gap: 3px;
    margin-top: 2px;
    font-size: 11px;
    font-style: italic;
    color: inherit;
    opacity: 0.85;
    overflow-wrap: anywhere;
}

.hz-add {
    margin-top: auto;
    border: 1px dashed var(--color-divider);
    background: transparent;
    color: var(--color-neutral-600);
    border-radius: var(--radius-sm);
    font-size: 11px;
    padding: 2px 0;
    min-height: 22px;
    cursor: pointer;
    opacity: 0.5;
}

.hz-cell:hover .hz-add {
    opacity: 1;
}

.hz-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
    font-size: 13px;
    color: var(--color-neutral-700);
}

.hz-legend .swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 5px;
    vertical-align: -1px;
}

/* Les deux entrées de disponibilité montrent un bâton, pas un carré. */
.hz-legend .swatch-bar {
    display: inline-block;
    width: 16px;
    height: 4px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: 3px;
}

/* Dialogue d'ajout/modification de quart */
/* §6.11 : le dialogue est l'un des deux seuls endroits qui portent une ombre. */
dialog.hz-dialog {
    border: 0;
    border-radius: 16px;
    padding: var(--space-6);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 420px;
}

dialog.hz-dialog::backdrop {
    background: rgba(20, 24, 26, .5);
}

/* §6.11 : sous 600 px le panneau s'ancre en bas de l'écran. */
@media (max-width: 600px) {
    dialog.hz-dialog {
        margin: auto auto 0;
        max-width: none;
        border-radius: 16px 16px 0 0;
        padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
    }
}

dialog.hz-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

dialog.hz-dialog h3 {
    font-size: 22px;
    margin-bottom: 4px;
}

/* Messagerie */
.chat-thread {
    max-height: 52vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--space-2) 0;
    margin-bottom: var(--space-3);
}

/* §6.7 : les bulles sont conservées, seulement recalibrées. Reçue = surface avec filet,
   coin de queue à 5 px à gauche ; envoyée = accent plein, coin de queue à droite. */
.chat-bubble {
    align-self: flex-start;
    max-width: 75%;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 16px 16px 16px 5px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
}

.chat-bubble.mine {
    align-self: flex-end;
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    border-radius: 16px 16px 5px 16px;
}

.chat-bubble .chat-auteur {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-soft);
    margin-bottom: 2px;
}

.chat-bubble .chat-meta {
    font-size: 11px;
    opacity: .75;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-variant-numeric: tabular-nums;
}

/* §6.7 : séparateur de jour, centré et discret. */
.chat-jour {
    align-self: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    margin: var(--space-2) 0;
}

.chat-bubble.mine .chat-meta {
    justify-content: flex-end;
}

/* Liste des fils */
.thread-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thread {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
}

.thread:hover {
    background: var(--color-neutral-100);
}

.thread.is-active {
    background: var(--color-accent-100);
}

.thread .nom {
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.thread .extrait {
    display: block;
    font-size: 13px;
    color: var(--color-neutral-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thread .avatar-groupe {
    background: var(--brand-orange);
    color: #fff;
}

.thread .nonlus {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--color-danger);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Barre de saisie */
.chat-send {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    margin-top: 0;
}

.chat-send textarea {
    flex: 1;
    min-height: 44px;
    margin: 0;
    resize: vertical;
}

.chat-send button {
    margin: 0;
    width: 44px;
    min-height: 44px;
    padding: 0;
    flex: 0 0 44px;
    font-size: 18px;
}

@media (max-width: 1010px) {
    .col2, .col2-wide {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .col4, .col3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* §7 : sous 1024 px la barre latérale se réduit au rail d'icônes de 58 px — elle ne
   disparaît jamais. La barre d'onglets du bas reste supprimée. */
@media (max-width: 1023px) {
    .sidebar {
        width: 58px;
        flex: 0 0 58px;
        padding: var(--space-3) 4px;
        gap: var(--space-3);
        align-items: center;
    }
    /* `:not(.icon)` est indispensable : depuis le passage aux Material Symbols le glyphe
       est lui aussi un <span>, et la règle le faisait disparaître avec le libellé — les
       deux boutons du bas devenaient deux carrés vides. */
    .sidebar .nav-label,
    .sidebar .sidetext,
    .sidebar .sidebar-user .who,
    .sidebar .sidebar-brand .kicker,
    .sidebar .theme-toggle span:not(.icon),
    .sidebar .logout-link span:not(.icon) {
        display: none;
    }
    /* Le logo complet ne tient pas dans 58 px : c'est la topbar qui porte la marque. */
    .sidebar-brand {
        display: none;
    }
    /* §6.1 : cible de 42 x 42 dans une colonne de 58, carré actif en teinte d'accent. */
    .sidebar-nav {
        align-self: stretch;
        align-items: center;
    }
    .sidebar-nav a {
        width: 42px;
        height: 42px;
        min-height: 42px;
        justify-content: center;
        padding: 0;
        border-radius: var(--radius-sm);
        color: var(--color-text-soft);
    }
    .sidebar-nav a.active {
        background: var(--color-accent-100);
        color: var(--color-accent);
    }
    /* Plus de libellé à protéger : la pastille se réduit à un point posé sur l'icône. */
    .sidebar-nav .badge {
        position: absolute;
        top: 6px;
        right: 6px;
        margin: 0;
        width: 7px;
        min-width: 7px;
        height: 7px;
        min-height: 7px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--color-danger);
        font-size: 0;
        color: transparent;
        overflow: hidden;
    }
    .sidebar-user {
        justify-content: center;
        padding: 4px 0;
    }
    .sidebar-actions {
        flex-direction: column;
    }
    /* Le sélecteur de rôle disparaît du rail : « Propriétaire » ne tient pas dans 58 px,
       même empilé. Il reste disponible dès que la barre latérale reprend sa largeur. */
    .sidebar .role-preview {
        display: none;
    }
    .sidebar-actions .theme-toggle,
    .sidebar-actions .logout-link {
        width: 36px;
        padding: 0;
    }
    .main {
        padding: 0 var(--space-4) var(--space-6);
    }
    /* §6.1 : la topbar porte le logo et colle en haut, encoche comprise. */
    .pagehead {
        position: sticky;
        top: 0;
        z-index: 30;
        align-items: center !important;
        gap: var(--space-3);
        margin: 0 calc(-1 * var(--space-4)) var(--space-4);
        padding: var(--space-3) var(--space-4);
        padding-top: calc(var(--space-3) + env(safe-area-inset-top));
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-divider);
    }
    .pagehead .topbar-logo {
        display: block;
    }
    .pagehead h1 {
        font-size: 19px;
        line-height: 1.1;
    }
    .pagehead .kicker {
        margin-bottom: 2px;
    }
    .pagehead .subtitle {
        display: none;
    }
    .pagehead-tools {
        margin-left: auto;
    }
    .pagehead-search {
        display: none;
    }
    /* « Ta semaine » : les 7 colonnes deviennent une bande défilable (handoff 3.1) */
    .weekstrip {
        grid-auto-flow: column;
        grid-auto-columns: 132px;
        grid-template-columns: none !important;
        overflow-x: auto;
    }
    .hidemob {
        display: none !important;
    }
    .cal-week-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .cal-month-grid .cal-day-shifts {
        display: none;
    }
    .chat-bubble {
        max-width: 90%;
    }
}

/* M : dossier employé, onglets sur le côté (Rôle / Horaire / Taux horaire / Documents / Notes). */
.dossier-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
}

.dossier-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 190px;
    min-width: 170px;
    position: sticky;
    top: var(--space-4);
}

/* Sous 1024 px les onglets deviennent une rangée défilable, sans barre visible. */
@media (max-width: 1023px) {
    .dossier-tabs {
        flex-direction: row;
        position: static;
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .dossier-tabs::-webkit-scrollbar {
        display: none;
    }
    .dossier-tab-btn {
        flex: 0 0 auto;
    }
}

/* §6.8 : des pastilles — actif en teinte d'accent, inactif en contour neutre. */
.dossier-tab-btn {
    text-align: left;
    background: transparent;
    border: 1px solid var(--color-divider);
    border-radius: 999px;
    padding: 0 14px;
    margin: 0;
    height: 34px;
    min-height: 34px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-mid);
    cursor: pointer;
    white-space: nowrap;
}

.dossier-tab-btn.active {
    background: var(--color-accent-100);
    border-color: var(--color-accent-200);
    color: var(--color-accent);
    font-weight: 700;
}

.dossier-panels {
    flex: 1 1 480px;
    min-width: 0;
}

@media (max-width: 720px) {
    .dossier-layout {
        flex-direction: column;
    }
    .dossier-tabs {
        flex-direction: row;
        overflow-x: auto;
        width: 100%;
        flex: 0 0 auto;
        position: static;
        border-bottom: 1px solid var(--color-divider);
    }
    .dossier-tab-btn {
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }
    .dossier-tab-btn.active {
        border-bottom-color: var(--color-accent);
    }
}

/* --- Phase 13 : vue mobile de l'horaire ------------------------------------------------
   La grille hebdomadaire reste la vue de bureau ; sur un téléphone elle imposait un
   défilement horizontal dans une colonne de 110 px. En dessous de 920 px (le même point de
   bascule que la barre latérale vers la barre d'onglets), on montre à la place une liste par
   journée, découpée en trois onglets. Les tuiles sont exactement les mêmes — même rendu,
   même dialogue d'édition au toucher. */
.hz-mobile {
    display: none;
}

/* §7 : la grille reste la vue de bureau ET de tablette — elle est visible de 600 px à
   l'infini, avec défilement horizontal entre 600 et 1024 px. En dessous de 600 px seulement,
   elle cède la place à la liste par journée. Le palier était à 940 px, ce qui donnait la vue
   téléphone sur un iPad en portrait (768 px) et sur une fenêtre de portable réduite. */
@media (max-width: 600px) {
    .hz-desktop {
        display: none;
    }
    .hz-mobile {
        display: block;
    }
}

.hz-mtabs {
    display: flex;
    gap: 3px;
    padding: 3px;
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    margin-bottom: var(--space-4);
    position: sticky;
    top: 0;
    z-index: 5;
}

.hz-mtabs button {
    flex: 1;
    min-height: 42px;
    margin: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-mid);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.hz-mtabs button.active {
    background: var(--color-accent);
    color: #fff;
}

.hz-m-lead {
    margin: 0 0 var(--space-4);
    font-size: 15px;
    color: var(--color-neutral-700);
}

.hz-m-lead strong {
    font-family: var(--font-ui);
    font-size: 26px;
    color: var(--color-text);
}

.hz-m-dayhead {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-2) 0 6px;
    border-bottom: 2px solid var(--color-text);
    margin-top: var(--space-4);
}

.hz-m-dayhead .d {
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 600;
}

/* Aujourd'hui : un repère, pas une alerte. */
.hz-m-dayhead.is-today .d {
    color: var(--color-accent-700);
}

.hz-m-dayhead.is-today::after {
    content: "aujourd'hui";
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent-700);
}

.hz-m-dayhead .cake {
    font-size: 13px;
    color: var(--color-danger);
}

.hz-m-day {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) 0 var(--space-2);
}

/* Les tuiles sont partagées avec la grille : sur mobile elles occupent toute la largeur et
   gagnent la surface de touche qu'une cellule de 110 px ne pouvait pas offrir. */
.hz-m-day .hz-tile,
.hz-m-day .hz-tile-open {
    width: 100%;
    font-size: 15px;
    padding: var(--space-3);
}

.hz-m-day .hz-tile-time {
    font-size: 17px;
}

.hz-m-empty,
.hz-m-sub {
    margin: 0;
    font-size: 14px;
    color: var(--color-neutral-600);
}

.hz-m-sub {
    color: var(--color-danger);
    font-weight: 600;
}

.hz-m-add {
    margin: var(--space-2) 0 0;
    min-height: 44px;
    background: transparent;
    border: 1px dashed var(--color-divider);
    border-radius: var(--radius-md);
    color: var(--color-neutral-700);
    font-size: 15px;
    cursor: pointer;
}

.hz-m-sumrow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-divider);
}

.hz-m-sumrow.is-total {
    border-bottom: none;
    border-top: 2px solid var(--color-text);
}

.hz-m-sumrow .who {
    flex: 1;
    min-width: 0;
    font-size: 16px;
}

.hz-m-sumrow .val {
    font-family: var(--font-ui);
    font-size: 17px;
    white-space: nowrap;
    text-align: right;
}

.hz-m-sumrow .val .cost {
    display: block;
    font-size: 14px;
    color: var(--color-neutral-700);
}

/* Phase 13 : le dialogue d'édition de quart débordait sur un écran étroit — les trois boutons
   sur une seule ligne coupaient « Supprimer ». Sans conséquence sur grand écran, où ils
   tiennent déjà. */
.hz-dialog .row-wrap {
    flex-wrap: wrap;
}

@media (max-width: 940px) {
    /* Les onglets de vue et les actions de semaine prenaient trois blocs pleine largeur avant
       le moindre quart : compactés, l'horaire commence beaucoup plus haut. */
    .cal-tabs {
        width: 100%;
    }
    .cal-tabs a {
        flex: 1;
        justify-content: center;
    }
    .hz-weekactions button {
        min-height: 40px;
        padding: 0 var(--space-3);
        font-size: 14px;
    }
}

/* Phase 13 : libellés courts sur téléphone. Le texte complet reste la version par défaut —
   c'est la version courte qui est masquée, pas l'inverse — pour qu'un écran non prévu ici
   affiche toujours l'intitulé explicite plutôt qu'une abréviation. */
.lbl-short {
    display: none;
}

@media (max-width: 940px) {
    .lbl-full {
        display: none;
    }
    .lbl-short {
        display: inline;
    }
    .hz-weekactions {
        flex-wrap: nowrap;
    }
    .hz-weekactions form {
        flex: 1;
        min-width: 0;
    }
    .hz-weekactions button {
        width: 100%;
        justify-content: center;
    }
}

/* =======================================================================================
   REFONTE UI (handoff Claude Design) — micro-interactions
   Ajoutées ici plutôt qu'en remplacement : les états existants (focus clavier, hover,
   disabled) restent ceux du projet.
   ======================================================================================= */

/* §8 : aucun transform: scale() au :active — seulement l'opacité. */
.press {
    transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

.press:active {
    opacity: .92;
}

.lift {
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

/* §6.2 : l'élévation ne se dit plus par une ombre mais par le filet qui prend l'accent. */
.lift:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent-200);
}

@keyframes scrIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.screen {
    animation: scrIn .26s ease both;
}

@keyframes pulseRing {
    0% { box-shadow: 0 0 0 0 rgba(18, 120, 158, .36); }
    70% { box-shadow: 0 0 0 14px rgba(18, 120, 158, 0); }
    100% { box-shadow: 0 0 0 0 rgba(18, 120, 158, 0); }
}

/* --- Utilitaires de mise en page du handoff -------------------------------------------
   Les pages statiques du handoff (`pages/*.html`) portent leurs styles en ligne, sauf ces
   quelques classes définies dans leur <style> commun. Elles sont reprises telles quelles.
   ------------------------------------------------------------------------------------ */

/* Bande défilable horizontalement (chips « Avec toi aujourd'hui », onglets, grille large) */
.scrollx {
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
}

/* Largeur plancher de la grille d'horaire, pour forcer le défilement plutôt que l'écrasement */
.matrix {
    min-width: 1040px;
}

/* Exigé par le handoff, et de toute façon la bonne pratique : personne ne doit subir ces
   animations si son système demande à les réduire. */
@media (prefers-reduced-motion: reduce) {
    .press,
    .lift,
    .screen,
    body {
        transition: none !important;
        animation: none !important;
    }
    .press:active,
    .lift:hover {
        transform: none;
    }
}

/* =======================================================================================
   REFONTE UI — composants partagés
   Briques réutilisées par plusieurs écrans du handoff (chips, segmented control, cartes de
   statistique, lignes d'information). Définies une fois ici plutôt qu'en styles en ligne
   répétés sur chaque page.
   ======================================================================================= */

/* --- Chips / pastilles ---------------------------------------------------------------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-divider);
    color: var(--color-text-mid);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.chip-accent {
    background: var(--color-accent-100);
    border-color: var(--color-accent-200);
    color: var(--color-accent-700);
}

.chip-alert,
.chip-danger {
    background: var(--color-danger-100);
    border-color: var(--color-danger-200);
    color: var(--color-danger);
}

/* §2.4 : « en attente », « à signer », « invité » — l'ambre des congés et des attentes. */
.chip-warn {
    background: var(--color-warn-100);
    border-color: var(--color-warn-100);
    color: var(--color-warn);
}

/* §2.5 : l'orange du logo reste décoratif et rare — « Nouveau », anniversaire. */
.chip-orange {
    background: var(--brand-orange-100);
    border-color: var(--brand-orange-100);
    color: var(--brand-orange-700);
}

.chip .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 7px;
}

/* Point « en poste maintenant » : le seul élément qui pulse. */
.chip .dot.pulse {
    background: var(--color-accent);
    animation: pulseRing 2.4s ease-out infinite;
}

.chip .dot-live {
    background: var(--color-accent);
    animation: pulseRing 2.4s ease-out infinite;
}

/* --- Segmented control ---------------------------------------------------------------- */
.seg {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border-radius: var(--radius-md);
    background: var(--color-neutral-200);
}

.seg a,
.seg button {
    margin: 0;
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-neutral-700);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.seg a:hover,
.seg button:hover {
    background: transparent;
    color: var(--color-text);
}

.seg a.active,
.seg button.active {
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

/* --- Cartes de statistique (KPI) ------------------------------------------------------ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (max-width: 720px) {
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    box-shadow: none;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: inherit;
    display: block;
}

/* §6.2 : sur-titre + icône de 18 px en tête, puis le chiffre, puis une ligne de 13 px. */
.stat-card .head,
.stat-card .kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-text-soft);
}

.stat-card .head i,
.stat-card .head .icon {
    font-size: 18px;
}

.stat-card .num {
    font-family: var(--font-ui);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
}

.stat-card .sub {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-soft);
    margin-top: 4px;
}

/* §6.2 : seul le compteur critique se teinte — par sa bordure et son chiffre, pas par un
   aplat qui ferait de la carte une alerte. */
.stat-card.is-alert {
    background: var(--color-surface);
    border-color: var(--color-danger-200);
}

.stat-card.is-alert .num {
    color: var(--color-danger);
}

.stat-card.is-orange .head {
    color: var(--brand-orange-700);
}

/* --- Avatars -------------------------------------------------------------------------- */
.avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-divider);
    color: var(--color-text-mid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 13px;
}

/* Quelqu'un en poste en ce moment : l'accent plein, comme dans la barre latérale. */
.avatar-accent {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.avatar-lg {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    font-size: 24px;
    background: var(--color-accent);
    color: #fff;
}

.avatar-on {
    background: var(--color-accent);
    color: #fff;
}

/* --- Lignes d'information (dossier, préférences) -------------------------------------- */
.info-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-divider);
}

.info-row:last-child {
    border-bottom: 0;
}

.info-row .ico {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.info-row .body {
    flex: 1;
    min-width: 0;
}

.info-row .lbl {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
    font-weight: 600;
}

.info-row .val {
    font-size: 16px;
    margin-top: 2px;
}

/* --- Barre d'outils d'écran ------------------------------------------------------------ */
.toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.toolbar .spacer {
    margin-left: auto;
}

.icon-btn {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    flex: 0 0 40px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    text-decoration: none;
    font-size: 18px;
}

.icon-btn:hover {
    background: var(--color-neutral-200);
}

.range-title {
    font-family: var(--font-ui);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0 var(--space-2) 0 0;
}

@media (max-width: 940px) {
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .range-title {
        font-size: 18px;
        width: 100%;
        order: -1;
    }
}

/* --- REFONTE : tableaux de bord (handoff 3.1 / 3.2) ------------------------------------ */
.card-label {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
    font-weight: 600;
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.section-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.empty-note {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-soft);
}

.dash-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: stretch;
}

.hero-num {
    font-family: var(--font-ui);
    font-size: clamp(40px, 5.6vw, 62px);
    font-weight: 600;
    line-height: .95;
    letter-spacing: -.035em;
    margin-top: var(--space-2);
}

/* Tuiles cliquables de la colonne de droite */
.tile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-neutral-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    flex: 1;
}

.tile .ico {
    font-size: 26px;
    color: var(--color-accent);
    flex: 0 0 auto;
}

.tile .body {
    flex: 1;
    min-width: 0;
}

.tile .num {
    display: block;
    font-family: var(--font-ui);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
}

.tile .lbl {
    display: block;
    font-size: 14px;
    color: var(--color-neutral-700);
}

.tile .chev {
    font-size: 18px;
    color: var(--color-neutral-500);
}

/* « Avec toi aujourd'hui » : bande de chips défilable */
.mate-row {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: 4px;
}

.mate {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    border-radius: 999px;
    background: var(--color-neutral-100);
    white-space: nowrap;
    flex: 0 0 auto;
}

.mate.is-on {
    background: var(--color-accent-100);
}

.mate .nom {
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.mate .hrs {
    display: block;
    font-size: 13px;
    color: var(--color-neutral-700);
}

.mate.is-on .hrs {
    color: var(--color-accent-700);
}

/* « Ta semaine » : 7 colonnes, bande défilable sur téléphone */
.week-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.week-cell {
    background: var(--color-neutral-100);
    border-radius: var(--radius-md);
    padding: 10px;
    min-height: 106px;
}

.week-cell.is-today {
    background: var(--color-accent-100);
    box-shadow: inset 0 0 0 2px var(--color-accent);
}

.week-cell .d {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
    font-weight: 600;
}

.week-cell.is-today .d {
    color: var(--color-accent-700);
}

.week-cell .h {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    margin-top: 6px;
}

.week-cell .p {
    font-size: 13px;
    color: var(--color-neutral-700);
}

.week-cell .off {
    font-size: 13px;
    color: var(--color-neutral-500);
    margin-top: 6px;
}

/* « Quarts à prendre » */
.offer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: var(--space-3);
}

.offer-card {
    background: var(--color-neutral-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--color-accent);
    padding: var(--space-3) var(--space-4);
}

.offer-card .d {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
    font-weight: 600;
}

.offer-card .h {
    font-family: var(--font-ui);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    margin: 4px 0 2px;
}

.offer-card .m {
    font-size: 14px;
    color: var(--color-neutral-700);
}

/* §6.11 : le bandeau tient sur une ligne de 13 px avec son icône — jamais un bloc de
   trois lignes. Le rouge y est de l'information, pas une action (§2.3). */
.banner-alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 11px 14px;
    background: var(--color-danger-100);
    border: 1px solid var(--color-danger-200);
    border-radius: var(--radius-md);
}

.banner-alert > .icon {
    font-size: 20px;
    color: var(--color-danger);
    flex: 0 0 auto;
}

.banner-alert .banner-body {
    flex: 1;
    min-width: 0;
}

.banner-alert .banner-line {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-danger);
    text-wrap: pretty;
}

.banner-alert .banner-line strong {
    font-weight: 700;
}

/* Les noms se suivent sur la ligne, séparés par un point médian posé en CSS. */
.banner-alert .banner-item + .banner-item::before {
    content: " · ";
}

.banner-alert .banner-item:first-of-type::before {
    content: " — ";
}

.banner-alert .banner-meta {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-soft);
    margin-top: 2px;
}

.banner-alert .btn {
    flex: 0 0 auto;
}

/* Sur téléphone, la liste des noms ferait cinq lignes : elle est bornée à deux, et la note
   sur le délai de grâce passe en infobulle — sinon le bandeau redevient le bloc de trois
   lignes que le §6.11 refuse. */
@media (max-width: 600px) {
    .banner-alert .banner-line {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .banner-alert .banner-meta {
        display: none;
    }
}

/* --- « En poste maintenant » : une ligne par personne (§6.2) --------------------------- */
.poste-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.poste-row .poste-who {
    flex: 1;
    min-width: 0;
}

.poste-row .poste-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poste-row .poste-meta {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-soft);
}

.poste-row .poste-time {
    flex: 0 0 auto;
    text-align: right;
}

.poste-row .poste-time .hours {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.poste-row.is-on .poste-time .hours {
    color: var(--color-accent);
}

.poste-row .poste-time .state {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-soft);
}

.poste-row .poste-time .state.is-danger {
    color: var(--color-danger);
}

/* --- « À approuver » : une ligne par demande (§6.6) ------------------------------------ */
.approve-row .approve-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.approve-row .kick {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.approve-row .approve-age {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-soft);
    white-space: nowrap;
}

.approve-row .approve-who {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    margin: 4px 0 2px;
}

.approve-row .approve-detail {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-mid);
    text-wrap: pretty;
}

.approve-row .approve-actions {
    display: flex;
    gap: 8px;
    margin-top: var(--space-3);
}

.approve-row .approve-actions form:first-child {
    flex: 1;
    display: flex;
}

.approve-row .approve-actions .btn {
    min-height: 40px;
}

/* « En poste maintenant » */
.person-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    gap: var(--space-2);
}

.person-card {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-neutral-100);
    box-shadow: var(--shadow-sm);
}

.person-card.is-on {
    background: var(--color-accent-100);
}

.person-card .nom {
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 600;
}

.person-card .hrs {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
}

.person-card.is-on .hrs {
    color: var(--color-accent-700);
}

.person-card .meta {
    font-size: 13px;
    color: var(--color-neutral-700);
}

@media (max-width: 940px) {
    .dash-hero {
        grid-template-columns: minmax(0, 1fr);
    }
    .week-strip {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 132px;
        grid-template-columns: none;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .banner-alert {
        flex-wrap: wrap;
    }
}

/* --- REFONTE : notifications (handoff 3.10) -------------------------------------------- */
.notif-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-width: 760px;
}

.notif {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-neutral-100);
    text-decoration: none;
    color: inherit;
}

.notif.is-unread {
    background: var(--color-accent-100);
}

.notif .ico {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-neutral-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.notif.is-unread .ico {
    color: var(--color-accent);
}

.notif .body {
    flex: 1;
    min-width: 0;
}

.notif .ttl {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.notif .txt {
    display: block;
    font-size: 15px;
    color: var(--color-neutral-700);
    margin-top: 2px;
}

.notif .when {
    font-size: 12px;
    color: var(--color-neutral-600);
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- REFONTE : annonces (handoff 3.9) --------------------------------------------------- */
.annonce {
    margin-bottom: 0;
    scroll-margin-top: var(--space-4);
}

.annonce-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.annonce-head .rond {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    background: var(--brand-orange-100);
    color: var(--brand-orange-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.annonce-head .ttl {
    font-family: var(--font-ui);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-top: 6px;
}

.annonce-head .lus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-accent-700);
    white-space: nowrap;
    flex: 0 0 auto;
}

.annonce .corps {
    font-size: 17px;
    line-height: 1.5;
    color: var(--color-neutral-700);
    margin-top: var(--space-3);
}

/* Chip de réaction : reprend le « j'aime » qui existait déjà, sans nouvelle table. */
.react {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 18px;
    border: 1px solid var(--color-divider);
    background: transparent;
    color: var(--color-neutral-700);
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
}

.react:hover {
    background: var(--color-neutral-200);
}

.react.is-on {
    background: var(--color-accent-100);
    border-color: var(--color-accent-300);
    color: var(--color-accent-700);
}

/* Bouton « Nouvelle conversation » : un <details> déguisé en bouton plein (handoff 3.8). */
.new-conv > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.new-conv > summary::-webkit-details-marker {
    display: none;
}

.new-conv > summary:hover {
    background: var(--color-accent-600);
}

/* --- REFONTE : échanges (handoff 3.5) --------------------------------------------------- */
.swap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-3);
}

.swap-card {
    background: var(--color-neutral-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3) var(--space-4) var(--space-4);
}

.swap-card .tete {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.swap-card .nom {
    font-size: 16px;
    font-weight: 600;
}

.swap-card .encart {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-3);
}

.swap-card .encart .h {
    font-family: var(--font-ui);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
}

.swap-card .encart .d {
    font-size: 14px;
    color: var(--color-neutral-700);
}

.swap-card .motif {
    font-style: italic;
    font-size: 15px;
    color: var(--color-neutral-700);
    margin: var(--space-2) 0 0;
}

/* --- REFONTE : dossier (handoff 3.7) ---------------------------------------------------- */
.dossier-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.dossier-head .nom {
    font-family: var(--font-ui);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.dossier-head .meta {
    font-size: 15px;
    color: var(--color-neutral-700);
    margin: 2px 0 4px;
}

.dossier-head .stats {
    display: flex;
    gap: var(--space-6);
    text-align: right;
}

.dossier-head .stats .v {
    font-family: var(--font-ui);
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
}

.dossier-head .stats .k {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
    font-weight: 600;
    margin-top: 4px;
}

.dossier-tab-btn.active {
    border-left-color: var(--color-accent);
}

/* --- REFONTE : liste d'équipe ----------------------------------------------------------- */
.emp-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background .15s ease;
}

.emp-row:hover {
    background: var(--color-neutral-100);
}

/* --- REFONTE : écran de connexion (handoff 3.11) ---------------------------------------- */
/* §5 : fond de page en aplat --color-accent (aucun dégradé), formulaire en carte blanche.
   Les trois écrans — connexion, inscription, onboarding — partagent exactement la même
   composition, pour qu'on ne sente aucune rupture d'un écran à l'autre. */
.auth-split,
.auth-solo {
    display: flex;
    min-height: 100vh;
    margin: 0;
    background: var(--color-accent);
}

/* §5 : le logo centré en tête de la carte, à 150 px, « HORAIRE » en légende, un filet
   dessous. Jamais posé sur le fond bleu — le bleu du logo s'y noierait. */
.auth-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-divider);
}

.auth-logo img {
    width: 150px;
    height: auto;
    display: block;
}

.auth-logo .k {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    font-weight: 600;
}

/* §1 : aplat, plus de dégradé. Le panneau ne porte plus la marque (elle est dans la
   carte) — seulement l'accroche. */
.auth-brand {
    flex: 0 0 46%;
    background: var(--color-accent);
    color: #fff;
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-8);
}

.auth-brand .marque {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.auth-brand .plate {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: var(--radius-md);
    background: #fff;
    overflow: hidden;
    display: block;
}

.auth-brand .plate img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.auth-brand .n {
    display: block;
    font-family: var(--font-ui);
    font-size: 22px;
    font-weight: 600;
}

.auth-brand .k {
    display: block;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .85;
}

.auth-brand .accroche h2 {
    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.03em;
    margin: 0;
}

.auth-brand .accroche p {
    font-size: 17px;
    line-height: 1.5;
    opacity: .9;
    max-width: 46ch;
}

.auth-brand .chiffres {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.auth-brand .chiffres {
    font-size: 14px;
    opacity: .88;
}

.auth-brand .chiffres .v {
    display: block;
    font-family: var(--font-ui);
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
}

/* Le mot sous le chiffre reste en bas de casse : c'est une phrase, pas une étiquette
   (le .k majuscule du bloc de marque, lui, en est une). */
.auth-brand .chiffres .k {
    display: inline;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
    opacity: 1;
}

.auth-form {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    background: transparent;
}

/* La carte blanche : c'est elle qui tient le formulaire, posée sur l'aplat bleu. */
.auth-form .inner {
    width: 100%;
    max-width: 400px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
}

.auth-form .kick {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    font-weight: 600;
    margin: 0;
}

.auth-form h1 {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -.025em;
    margin: 6px 0 var(--space-4);
}

.auth-form input[type="text"],
.auth-form input[type="password"] {
    min-height: 50px;
    background: var(--color-neutral-100);
}

.auth-form .aide {
    margin: var(--space-4) 0 0;
    font-size: 14px;
    color: var(--color-neutral-700);
}

.auth-form .astuce {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-neutral-100);
    font-size: 14px;
    color: var(--color-neutral-700);
}

.auth-form .astuce i {
    font-size: 20px;
    color: var(--color-accent);
    flex: 0 0 auto;
}

@media (max-width: 940px) {
    .auth-brand {
        display: none;
    }
}

/* La page d'inscription est plus longue que la connexion : la colonne de droite défile
   seule, le panneau de marque reste fixe. */
.auth-form {
    overflow-y: auto;
    max-height: 100vh;
}

.auth-form .reg-fieldset:first-of-type {
    margin-top: var(--space-3);
}

/* --- REFONTE : disponibilités (handoff 3.4) --------------------------------------------- */
.stepper-form {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.stepper button {
    width: 44px;
    height: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    font-size: 22px;
    font-weight: 600;
}

.stepper button:hover {
    background: var(--color-neutral-200);
}

.stepper .val {
    text-align: center;
    min-width: 96px;
}

.stepper .val input {
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: var(--font-ui);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
}

.stepper .val .u {
    display: block;
    font-size: 12px;
    color: var(--color-neutral-600);
    margin-top: 2px;
}

.stepper-form > button[type="submit"] {
    margin: 0;
}

/* Une ligne par jour plutôt qu'un tableau : la semaine se lit d'un coup d'œil. */
.dispo-days {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-4);
}

.dispo-day {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: 12px var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-neutral-100);
}

.dispo-day.is-free {
    background: var(--color-accent-100);
}

.dispo-day .jour {
    flex: 0 0 110px;
    font-size: 17px;
    font-weight: 600;
}

.dispo-day .detail {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--color-neutral-700);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dispo-day .entree {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lien-suppr {
    margin: 0;
    min-height: 26px;
    width: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-neutral-600);
    font-size: 14px;
}

.lien-suppr:hover {
    background: var(--color-danger-100);
    color: var(--color-danger);
}

/* --- §6.9 Feuilles de temps ------------------------------------------------------------ */
.ft-table th.num,
.ft-table td.ft-heures,
.ft-table td.ft-etat,
.ft-table td.ft-actions {
    text-align: right;
}

.ft-table td.ft-cle {
    font-weight: 700;
}

.ft-table td.ft-prevu {
    color: var(--color-text-mid);
    font-variant-numeric: tabular-nums;
}

.ft-table td.ft-pointe {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ft-table td.ft-heures {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* §6.9 : rangée de total. */
.ft-table tfoot td {
    background: var(--color-surface-alt);
    font-weight: 700;
}

/* §6.9 : sous 720 px, des cartes empilées — jamais un tableau à défilement horizontal.
   Le `data-label` de chaque cellule reprend l'en-tête de colonne, qui disparaît ici. */
@media (max-width: 720px) {
    .ft-table,
    .ft-table tbody,
    .ft-table tr,
    .ft-table td {
        display: block;
        width: auto;
    }
    .ft-table thead {
        display: none;
    }
    .ft-table tr {
        background: var(--color-surface);
        border: 1px solid var(--color-divider);
        border-radius: var(--radius-lg);
        padding: var(--space-3) var(--space-4);
        margin-bottom: var(--space-2);
    }
    .ft-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: 5px 0;
        border: 0;
        text-align: right;
    }
    .ft-table td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--color-text-soft);
        text-align: left;
    }
    .ft-table td.ft-cle {
        font-size: 16px;
        padding-bottom: var(--space-2);
        margin-bottom: var(--space-2);
        border-bottom: 1px solid var(--color-divider);
    }
    .ft-table tr:hover {
        background: var(--color-surface);
    }
}

/* --- Aperçu du rôle -------------------------------------------------------------------
   Le bandeau doit rester repérable sans crier : c'est un état, pas une alerte. L'ambre du
   §2.4 — « ce qui est en attente, ce qui n'est pas l'état normal » — convient exactement. */
.apercu-banniere {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: 11px 14px;
    margin-bottom: var(--space-4);
    background: var(--color-warn-100);
    border: 1px solid var(--color-warn);
    border-radius: var(--radius-md);
    color: var(--color-warn);
    font-size: 13px;
    font-weight: 500;
}

.apercu-banniere > .icon {
    font-size: 20px;
    flex: 0 0 auto;
}

.apercu-banniere span {
    min-width: 0;
}

.apercu-banniere form {
    margin-left: auto;
}

.apercu-banniere .btn {
    min-height: 36px;
    font-size: 13px;
    color: var(--color-warn);
    border-color: var(--color-warn);
}

.apercu-banniere .btn:hover {
    background: var(--color-surface);
}

/* Le sélecteur est un <form> depuis qu'il est branché : il ne doit pas hériter des marges
   de formulaire, il vit dans le pied de la barre latérale. */
.role-preview {
    margin: 0;
}