/* PharmaPlanni — feuille de style d'interface (thème « chaleureux »).
   Remplace le bloc <style> de templates/plannings/base.html ET celui de
   planning_hebdo.html. Aucune classe n'a été renommée : les gabarits et les
   tests existants continuent de fonctionner.
   Chargement : <link rel="stylesheet" href="{% static 'css/theme.css' %}">
   (fichier servi depuis le dépôt, aucun CDN — cf. CLAUDE.md § Conventions). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------------- Thèmes ----------------
   Deux axes indépendants, posés par base.html sur <html> :
     data-theme  la palette   (sepia, ardoise, sauge, lavande)
     data-mode   jour ou nuit (clair, sombre, auto = réglage du système)

   Chaque palette déclare SES DEUX JEUX de valeurs — `--c-*` en clair, `--s-*`
   en sombre. Les blocs de mode, eux, ne contiennent aucune couleur : ils se
   contentent de brancher l'un des deux jeux sur les jetons que le reste de la
   feuille consomme. C'est ce qui permet d'ajouter une palette sans toucher au
   mode, et un mode sans retoucher les palettes.

   ⚠️ Toute couleur écrite en dur dans un gabarit échappe au thème et restera
   claire sur fond sombre. Un test (tests/test_theme.py) échoue si un gabarit
   non destiné à l'impression réintroduit un littéral hexadécimal. */

:root, [data-theme="sepia"] {
    /* Palette par défaut : Sépia, la teinte d'origine du projet. Le sélecteur
       porte les deux formes — `:root` seul sert de repli quand aucun thème
       n'est posé, `[data-theme="sepia"]` sert aux vignettes de l'écran
       Apparence, qui doivent rendre Sépia même sur une page d'une autre
       palette. */
    /* clair */
    --c-bg: #FBF7F2;
    --c-surface: #FFFDFB;
    --c-surface-sunk: #F6F0E8;
    --c-surface-track: #F4EFE7;
    --c-surface-form: #FBF3E4;
    --c-surface-hover: #F3EDE4;
    --c-border: #E7DED2;
    --c-border-strong: #DED4C6;
    --c-accent-border: #EEDDBE;
    --c-text: #2E2A26;
    --c-text-soft: #4C453E;
    --c-text-muted: #8A8177;
    --c-text-faint: #A79D92;
    --c-primary: #A4552E;
    --c-primary-hover: #8C4525;
    --c-primary-soft: #F6EEE1;
    --c-primary-soft-text: #7A5320;
    /* sombre */
    --s-bg: #191612;
    --s-surface: #221E19;
    --s-surface-sunk: #2B2620;
    --s-surface-track: #322C25;
    --s-surface-form: #2A241C;
    --s-surface-hover: #322C25;
    --s-border: #3A332B;
    --s-border-strong: #4A4237;
    --s-accent-border: #5A4B33;
    --s-text: #EFE8DE;
    --s-text-soft: #D6CDC0;
    --s-text-muted: #A69C8D;
    --s-text-faint: #857C6F;
    --s-primary: #D08A5C;
    --s-primary-hover: #E09C6E;
    --s-primary-soft: #3A2C1E;
    --s-primary-soft-text: #E8B57E;
}

/* Sélecteurs sans `:root` : une vignette de l'écran Apparence porte son
   propre `data-theme` et doit obtenir SES valeurs, pas celles de la page. */
[data-theme="ardoise"] {
    /* clair */
    --c-bg: #F6F7F9;
    --c-surface: #FFFFFF;
    --c-surface-sunk: #EDF0F4;
    --c-surface-track: #E9EDF2;
    --c-surface-form: #F2F6FB;
    --c-surface-hover: #E8ECF2;
    --c-border: #DCE1E8;
    --c-border-strong: #CBD2DC;
    --c-accent-border: #C9D6E6;
    --c-text: #1F2933;
    --c-text-soft: #3E4C59;
    --c-text-muted: #7B8794;
    --c-text-faint: #9AA5B1;
    --c-primary: #3E6B8C;
    --c-primary-hover: #2F5470;
    --c-primary-soft: #E7EFF6;
    --c-primary-soft-text: #2B4A6E;
    /* sombre */
    --s-bg: #12161B;
    --s-surface: #1A1F26;
    --s-surface-sunk: #232A33;
    --s-surface-track: #2A323C;
    --s-surface-form: #1E2630;
    --s-surface-hover: #2A323C;
    --s-border: #333C47;
    --s-border-strong: #45505E;
    --s-accent-border: #3E5670;
    --s-text: #E4E9EF;
    --s-text-soft: #C6CFD9;
    --s-text-muted: #94A0AE;
    --s-text-faint: #737E8B;
    --s-primary: #6FA8CE;
    --s-primary-hover: #86B9DC;
    --s-primary-soft: #1F303D;
    --s-primary-soft-text: #9CC6E2;
}

[data-theme="sauge"] {
    /* clair */
    --c-bg: #F5F8F4;
    --c-surface: #FFFFFF;
    --c-surface-sunk: #E9F0E7;
    --c-surface-track: #E4EDE1;
    --c-surface-form: #F0F6EE;
    --c-surface-hover: #E5EDE2;
    --c-border: #D8E2D4;
    --c-border-strong: #C6D3C1;
    --c-accent-border: #C3D8BD;
    --c-text: #222A22;
    --c-text-soft: #3D4A3B;
    --c-text-muted: #7C8A78;
    --c-text-faint: #9AA797;
    --c-primary: #4A7A52;
    --c-primary-hover: #3A6141;
    --c-primary-soft: #E6F0E4;
    --c-primary-soft-text: #2F5A3A;
    /* sombre */
    --s-bg: #131711;
    --s-surface: #1B211A;
    --s-surface-sunk: #242C22;
    --s-surface-track: #2B342A;
    --s-surface-form: #1F2A1D;
    --s-surface-hover: #2B342A;
    --s-border: #343E32;
    --s-border-strong: #465244;
    --s-accent-border: #40603F;
    --s-text: #E6EDE4;
    --s-text-soft: #C8D2C6;
    --s-text-muted: #93A090;
    --s-text-faint: #737F71;
    --s-primary: #7FB388;
    --s-primary-hover: #94C49C;
    --s-primary-soft: #1F3020;
    --s-primary-soft-text: #A8D2AE;
}

[data-theme="lavande"] {
    /* clair */
    --c-bg: #F8F6FB;
    --c-surface: #FFFFFF;
    --c-surface-sunk: #EFEBF6;
    --c-surface-track: #EAE5F2;
    --c-surface-form: #F4F0FA;
    --c-surface-hover: #EBE6F4;
    --c-border: #E0D9EC;
    --c-border-strong: #CFC5E0;
    --c-accent-border: #CFC2E6;
    --c-text: #262233;
    --c-text-soft: #453D57;
    --c-text-muted: #837A96;
    --c-text-faint: #A199B0;
    --c-primary: #6B4E9E;
    --c-primary-hover: #563E80;
    --c-primary-soft: #EDE7F7;
    --c-primary-soft-text: #4B3A66;
    /* sombre */
    --s-bg: #16131C;
    --s-surface: #1E1A26;
    --s-surface-sunk: #272231;
    --s-surface-track: #2E2939;
    --s-surface-form: #241E30;
    --s-surface-hover: #2E2939;
    --s-border: #383046;
    --s-border-strong: #4A4059;
    --s-accent-border: #524270;
    --s-text: #EAE6F2;
    --s-text-soft: #CDC6DB;
    --s-text-muted: #9A92AC;
    --s-text-faint: #7A7289;
    --s-primary: #A98BD8;
    --s-primary-hover: #BB9FE4;
    --s-primary-soft: #2A2038;
    --s-primary-soft-text: #C4AEE8;
}

/* Jetons de sens — statuts, types de créneau, ombres. Ils portent une
   signification (validé, refusé, comptoir…), pas une identité visuelle :
   ils ne changent donc pas d'une palette à l'autre, seulement d'un mode à
   l'autre. */
:root {
    --c-on-primary: #FFF8F2;
    --s-on-primary: #16120E;
    --c-danger: #9E3A32;
    --s-danger: #E08A82;
    --c-success: #2F5A3A;
    --s-success: #7FC08F;
    --c-warning: #C98A2B;
    --s-warning: #E0AC5E;
    --c-ok-bg: #E4EFE2;
    --s-ok-bg: #1F3324;
    --c-ok-fg: #2F5A3A;
    --s-ok-fg: #8ED3A0;
    --c-ok-bd: #CFE0CB;
    --s-ok-bd: #2F5A3A;
    --c-warn-bg: #F6EEE1;
    --s-warn-bg: #33280F;
    --c-warn-fg: #7A5320;
    --s-warn-fg: #E5BE7C;
    --c-danger-bg: #F7E5E3;
    --s-danger-bg: #3A1F1D;
    --c-danger-fg: #9E3A32;
    --s-danger-fg: #F0A9A2;
    --c-danger-bd: #EBCBC7;
    --s-danger-bd: #6E3A34;
    --c-info-bg: #EDF1F6;
    --s-info-bg: #1B2A3A;
    --c-info-fg: #2B4A6E;
    --s-info-fg: #9CC6E2;
    --c-anniv-bg: #FBF1F4;
    --s-anniv-bg: #33202A;
    --c-anniv-fg: #8C4059;
    --s-anniv-fg: #E7A5BC;
    --c-zebra: rgba(0, 0, 0, .022);
    --s-zebra: rgba(255, 255, 255, .035);
    --c-backdrop: rgba(46, 42, 38, .35);
    --s-backdrop: rgba(0, 0, 0, .6);
    --c-shadow-sm: 0 1px 2px rgba(46, 42, 38, .10);
    --s-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --c-shadow-md: 0 6px 18px rgba(46, 42, 38, .08);
    --s-shadow-md: 0 6px 18px rgba(0, 0, 0, .40);
    --c-t-comptoir-bg: #DDEBD9;
    --s-t-comptoir-bg: #223527;
    --c-t-comptoir-fg: #2F5A3A;
    --s-t-comptoir-fg: #A8D8B4;
    --c-t-comptoir-bd: #79A183;
    --s-t-comptoir-bd: #3F6B4C;
    --c-t-back-bg: #DBE5F1;
    --s-t-back-bg: #1E2C3D;
    --c-t-back-fg: #2B4A6E;
    --s-t-back-fg: #A6C8E8;
    --c-t-back-bd: #7695BE;
    --s-t-back-bd: #3D5A7C;
    --c-t-garde-bg: #E5DEEE;
    --s-t-garde-bg: #2A2438;
    --c-t-garde-fg: #4B3A66;
    --s-t-garde-fg: #C3B4E0;
    --c-t-garde-bd: #9585B6;
    --s-t-garde-bd: #574A78;
    --c-t-livr-bg: #F3E5CE;
    --s-t-livr-bg: #33291A;
    --c-t-livr-fg: #6A4A1E;
    --s-t-livr-fg: #E0BC85;
    --c-t-livr-bd: #C79B5B;
    --s-t-livr-bd: #7A5F33;
}

/* Branchement du jeu selon le mode — aucune valeur ici, uniquement des
   renvois. La liste est répétée trois fois (défaut, sombre explicite, et
   sombre hérité du système) parce qu'une règle et une media query ne
   peuvent pas partager un même bloc de déclarations en CSS. */
/* Le branchement vaut aussi pour tout élément portant un `data-theme` :
   une propriété personnalisée se résout sur l'élément qui la déclare, donc
   sans ces sélecteurs une vignette de palette hériterait du `--bg` déjà
   calculé sur :root et afficherait la palette courante, pas la sienne. */
:root, :root[data-mode="clair"], :root:not([data-mode="sombre"]) [data-theme] {
    color-scheme: light;
    --bg: var(--c-bg);
    --surface: var(--c-surface);
    --surface-sunk: var(--c-surface-sunk);
    --surface-track: var(--c-surface-track);
    --surface-form: var(--c-surface-form);
    --surface-hover: var(--c-surface-hover);
    --border: var(--c-border);
    --border-strong: var(--c-border-strong);
    --accent-border: var(--c-accent-border);
    --text: var(--c-text);
    --text-soft: var(--c-text-soft);
    --text-muted: var(--c-text-muted);
    --text-faint: var(--c-text-faint);
    --primary: var(--c-primary);
    --primary-hover: var(--c-primary-hover);
    --primary-soft: var(--c-primary-soft);
    --primary-soft-text: var(--c-primary-soft-text);
    --on-primary: var(--c-on-primary);
    --danger: var(--c-danger);
    --success: var(--c-success);
    --warning: var(--c-warning);
    --ok-bg: var(--c-ok-bg);
    --ok-fg: var(--c-ok-fg);
    --ok-bd: var(--c-ok-bd);
    --warn-bg: var(--c-warn-bg);
    --warn-fg: var(--c-warn-fg);
    --danger-bg: var(--c-danger-bg);
    --danger-fg: var(--c-danger-fg);
    --danger-bd: var(--c-danger-bd);
    --info-bg: var(--c-info-bg);
    --info-fg: var(--c-info-fg);
    --anniv-bg: var(--c-anniv-bg);
    --anniv-fg: var(--c-anniv-fg);
    --zebra: var(--c-zebra);
    --backdrop: var(--c-backdrop);
    --shadow-sm: var(--c-shadow-sm);
    --shadow-md: var(--c-shadow-md);
    --t-comptoir-bg: var(--c-t-comptoir-bg);
    --t-comptoir-fg: var(--c-t-comptoir-fg);
    --t-comptoir-bd: var(--c-t-comptoir-bd);
    --t-back-bg: var(--c-t-back-bg);
    --t-back-fg: var(--c-t-back-fg);
    --t-back-bd: var(--c-t-back-bd);
    --t-garde-bg: var(--c-t-garde-bg);
    --t-garde-fg: var(--c-t-garde-fg);
    --t-garde-bd: var(--c-t-garde-bd);
    --t-livr-bg: var(--c-t-livr-bg);
    --t-livr-fg: var(--c-t-livr-fg);
    --t-livr-bd: var(--c-t-livr-bd);
}

:root[data-mode="sombre"], :root[data-mode="sombre"] [data-theme] {
    color-scheme: dark;
    --bg: var(--s-bg);
    --surface: var(--s-surface);
    --surface-sunk: var(--s-surface-sunk);
    --surface-track: var(--s-surface-track);
    --surface-form: var(--s-surface-form);
    --surface-hover: var(--s-surface-hover);
    --border: var(--s-border);
    --border-strong: var(--s-border-strong);
    --accent-border: var(--s-accent-border);
    --text: var(--s-text);
    --text-soft: var(--s-text-soft);
    --text-muted: var(--s-text-muted);
    --text-faint: var(--s-text-faint);
    --primary: var(--s-primary);
    --primary-hover: var(--s-primary-hover);
    --primary-soft: var(--s-primary-soft);
    --primary-soft-text: var(--s-primary-soft-text);
    --on-primary: var(--s-on-primary);
    --danger: var(--s-danger);
    --success: var(--s-success);
    --warning: var(--s-warning);
    --ok-bg: var(--s-ok-bg);
    --ok-fg: var(--s-ok-fg);
    --ok-bd: var(--s-ok-bd);
    --warn-bg: var(--s-warn-bg);
    --warn-fg: var(--s-warn-fg);
    --danger-bg: var(--s-danger-bg);
    --danger-fg: var(--s-danger-fg);
    --danger-bd: var(--s-danger-bd);
    --info-bg: var(--s-info-bg);
    --info-fg: var(--s-info-fg);
    --anniv-bg: var(--s-anniv-bg);
    --anniv-fg: var(--s-anniv-fg);
    --zebra: var(--s-zebra);
    --backdrop: var(--s-backdrop);
    --shadow-sm: var(--s-shadow-sm);
    --shadow-md: var(--s-shadow-md);
    --t-comptoir-bg: var(--s-t-comptoir-bg);
    --t-comptoir-fg: var(--s-t-comptoir-fg);
    --t-comptoir-bd: var(--s-t-comptoir-bd);
    --t-back-bg: var(--s-t-back-bg);
    --t-back-fg: var(--s-t-back-fg);
    --t-back-bd: var(--s-t-back-bd);
    --t-garde-bg: var(--s-t-garde-bg);
    --t-garde-fg: var(--s-t-garde-fg);
    --t-garde-bd: var(--s-t-garde-bd);
    --t-livr-bg: var(--s-t-livr-bg);
    --t-livr-fg: var(--s-t-livr-fg);
    --t-livr-bd: var(--s-t-livr-bd);
}

@media (prefers-color-scheme: dark) {
    :root[data-mode="auto"], :root[data-mode="auto"] [data-theme] {
        color-scheme: dark;
        --bg: var(--s-bg);
        --surface: var(--s-surface);
        --surface-sunk: var(--s-surface-sunk);
        --surface-track: var(--s-surface-track);
        --surface-form: var(--s-surface-form);
        --surface-hover: var(--s-surface-hover);
        --border: var(--s-border);
        --border-strong: var(--s-border-strong);
        --accent-border: var(--s-accent-border);
        --text: var(--s-text);
        --text-soft: var(--s-text-soft);
        --text-muted: var(--s-text-muted);
        --text-faint: var(--s-text-faint);
        --primary: var(--s-primary);
        --primary-hover: var(--s-primary-hover);
        --primary-soft: var(--s-primary-soft);
        --primary-soft-text: var(--s-primary-soft-text);
        --on-primary: var(--s-on-primary);
        --danger: var(--s-danger);
        --success: var(--s-success);
        --warning: var(--s-warning);
        --ok-bg: var(--s-ok-bg);
        --ok-fg: var(--s-ok-fg);
        --ok-bd: var(--s-ok-bd);
        --warn-bg: var(--s-warn-bg);
        --warn-fg: var(--s-warn-fg);
        --danger-bg: var(--s-danger-bg);
        --danger-fg: var(--s-danger-fg);
        --danger-bd: var(--s-danger-bd);
        --info-bg: var(--s-info-bg);
        --info-fg: var(--s-info-fg);
        --anniv-bg: var(--s-anniv-bg);
        --anniv-fg: var(--s-anniv-fg);
        --zebra: var(--s-zebra);
        --backdrop: var(--s-backdrop);
        --shadow-sm: var(--s-shadow-sm);
        --shadow-md: var(--s-shadow-md);
        --t-comptoir-bg: var(--s-t-comptoir-bg);
        --t-comptoir-fg: var(--s-t-comptoir-fg);
        --t-comptoir-bd: var(--s-t-comptoir-bd);
        --t-back-bg: var(--s-t-back-bg);
        --t-back-fg: var(--s-t-back-fg);
        --t-back-bd: var(--s-t-back-bd);
        --t-garde-bg: var(--s-t-garde-bg);
        --t-garde-fg: var(--s-t-garde-fg);
        --t-garde-bd: var(--s-t-garde-bd);
        --t-livr-bg: var(--s-t-livr-bg);
        --t-livr-fg: var(--s-t-livr-fg);
        --t-livr-bd: var(--s-t-livr-bd);
    }
}

/* Géométrie — indépendante du thème. */
:root {
    --radius: 9px;
    --radius-lg: 13px;
    --radius-pill: 20px;
}

body {
    font-family: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    font-feature-settings: "tnum" 1;   /* chiffres de même largeur : les heures s'alignent */
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }

/* ---------------- Coquille : barre latérale + zone principale ---------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 244px; flex-shrink: 0;
    background: var(--surface); border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    padding: 18px 12px; gap: 4px;
    position: fixed; top: 0; left: 0; bottom: 0;
    overflow-y: auto; z-index: 200;
}
.sidebar .brand {
    font-weight: 700; font-size: 16px; letter-spacing: -.01em;
    color: var(--text); text-decoration: none;
    padding: 0 6px 14px; display: flex; align-items: center; gap: 9px;
}
.sidebar .brand::before {
    content: "P";
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--primary); color: var(--on-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}
.sidebar-block { display: flex; flex-direction: column; gap: 1px; }
/* Le premier bloc (compte / officine / notifications) devient une carte. */
.sidebar-block:first-of-type {
    background: var(--surface-sunk); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 6px 5px; gap: 4px; margin-bottom: 12px;
}
.sidebar-sep { border: none; border-top: 1px solid var(--border); margin: 12px 6px; }

.sidebar-info { padding: 6px 8px; }
.sidebar-info .label {
    font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-faint); font-weight: 600;
}
.sidebar-info .value { font-size: 12.5px; font-weight: 600; word-break: break-word; }
.sidebar-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-faint); font-weight: 600; padding: 4px 9px 2px;
}

.sidebar a, .sidebar .logout {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    color: var(--text-soft); text-decoration: none;
    font-size: 13px; padding: 7px 9px; border-radius: var(--radius);
    background: none; border: none; width: 100%; text-align: left;
    font-family: inherit; cursor: pointer;
}
.sidebar a:hover, .sidebar .logout:hover { background: var(--surface-hover); color: var(--text); }
.sidebar a.actif {
    background: var(--primary-soft); color: var(--primary-soft-text); font-weight: 600;
    box-shadow: inset 3px 0 0 var(--primary);
}
.sidebar .logout { color: var(--danger); }
.sidebar .badge {
    background: var(--primary); color: var(--on-primary); font-size: 10px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
}
.sidebar .badge.vide { background: var(--border); color: var(--text-muted); }
.sidebar .spacer { flex: 1 1 auto; min-height: 8px; }
.sidebar .cgu { font-size: 11px; color: var(--text-muted); }
.sidebar-pharmacy-select {
    width: 100%; padding: 5px 7px; border: 1px solid var(--border-strong);
    border-radius: 7px; font-size: 12.5px; font-family: inherit; font-weight: 600;
    background: var(--surface); color: var(--text);
}

.app-main { flex: 1 1 auto; min-width: 0; margin-left: 244px; }
.app-shell-anon .app-main { margin-left: 0; }
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

main { max-width: 1440px; margin: 0 auto; padding: 22px 26px 30px; }
.main-anon { max-width: 1440px; margin: 0 auto; padding: 22px 26px; }

/* ---------------- Mobile ---------------- */
@media (max-width: 767px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 2px 0 18px rgba(46,42,38,.18); }
    #nav-toggle:checked ~ .app-shell .sidebar { transform: translateX(0); }
    #nav-toggle:checked ~ .app-shell .sidebar-backdrop {
        display: block; position: fixed; inset: 0; background: var(--backdrop); z-index: 150;
    }
    .app-main { margin-left: 0; }
    main { padding: 14px 12px 22px; }
    .mobile-topbar {
        display: flex; align-items: center; gap: 10px;
        height: 52px; padding: 0 12px;
        background: var(--surface); border-bottom: 1px solid var(--border);
        position: sticky; top: 0; z-index: 100;
    }
    .mobile-topbar .hamburger {
        font-size: 22px; line-height: 1; cursor: pointer; color: var(--text);
        background: none; border: none; padding: 4px 8px;
    }
    .mobile-topbar .brand { font-weight: 700; color: var(--text); font-size: 15px; }

    /* Les actions passent sous le titre : le séparateur pendrait en bout de
       ligne, et la légende n'a plus de côté droit où se caler. */
    .planning-head-actions { padding-top: 4px; }
    .head-sep { display: none; }
    .week-bar .legende { margin-left: 0; }
}

/* ---------------- Titre de page ---------------- */
h1 {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 32px; font-weight: 400; line-height: 1.12; letter-spacing: -.01em;
    margin-bottom: 14px;
}
h1 .h1-soft { color: var(--text-faint); }
h2 { font-size: 15px; }

/* ---------------- En-tête de la page Planning ----------------
   Trois bandes : titre + actions, rail de semaines + utilitaires, ligne
   d'état. Le titre ne répète plus l'officine — elle passe en surtitre. */
.planning-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.planning-head h1 { margin-bottom: 0; }
.page-eyebrow {
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--text-faint); margin-bottom: 2px;
}
.planning-head-actions {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    /* Aligné sur la ligne de base du titre, pas sur le surtitre. */
    padding-top: 14px;
}
/* Sépare les actions de lecture (imprimer, exporter) de celles qui écrivent. */
.head-sep { width: 1px; height: 22px; background: var(--border-strong); }

.week-bar {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; margin-bottom: 12px;
}
.week-goto { display: inline-flex; align-items: center; gap: 6px; }
.week-goto input[type="date"] {
    padding: 7px 10px; border: 1px solid var(--border-strong);
    border-radius: var(--radius); font-size: 13px; font-family: inherit;
    background: var(--surface); color: var(--text-soft);
}
/* La légende ferme la ligne, poussée à droite. */
.week-bar .legende { margin-bottom: 0; margin-left: auto; }

/* ---------------- Barre d'actions de semaine ---------------- */
.week-nav {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
}
.week-nav .week-label { font-weight: 600; font-size: 15px; white-space: nowrap; }
.week-nav a, .week-nav button {
    padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--text-soft); text-decoration: none; cursor: pointer;
    font-size: 13px; font-weight: 600; font-family: inherit;
}
.week-nav a:hover, .week-nav button:hover { background: var(--surface-hover); }

.pharmacy-selector { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.pharmacy-selector a {
    padding: 5px 12px; border-radius: var(--radius-pill); text-decoration: none; font-size: 12px;
    border: 1px solid var(--border); color: var(--text-soft); background: var(--surface);
}
.pharmacy-selector a.active { border-color: var(--primary); color: var(--primary); font-weight: 600; }

/* ---------------- Grille classique ---------------- */
.grid-wrapper {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
table.grid { width: 100%; border-collapse: collapse; background: var(--surface); }
table.grid th, table.grid td { border: 1px solid var(--border); padding: 7px 9px; vertical-align: top; min-width: 108px; }
table.grid th {
    background: var(--surface-sunk); font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
    text-align: center; white-space: nowrap;
}
table.grid th.employee-col { min-width: 152px; text-align: left; }
table.grid td { font-size: 12px; }
table.grid tbody tr:hover td { background: var(--surface-hover); }

.cell { min-height: 52px; cursor: pointer; position: relative; border-radius: 6px; }
.cell:hover { background: var(--primary-soft); }
.cell-consultation, .cell-consultation .creneau-pill { cursor: default; }
.cell-consultation:hover { background: transparent; }

/* Couleur par TYPE de créneau — garder en phase avec Creneau.TYPE_CHOICES,
   avec la légende de planning_hebdo.html et avec planning_print.html. */
.creneau-pill {
    display: block; padding: 4px 8px; margin: 3px 0; border-radius: 7px;
    background: var(--surface-track); color: var(--text);
    font-size: 11.5px; font-weight: 600; line-height: 1.3;
}
.creneau-comptoir    { background: var(--t-comptoir-bg); color: var(--t-comptoir-fg); box-shadow: inset 3px 0 0 var(--t-comptoir-bd); }
.creneau-back_office { background: var(--t-back-bg);     color: var(--t-back-fg);     box-shadow: inset 3px 0 0 var(--t-back-bd); }
.creneau-garde       { background: var(--t-garde-bg);    color: var(--t-garde-fg);    box-shadow: inset 3px 0 0 var(--t-garde-bd); }
.creneau-livraison   { background: var(--t-livr-bg);     color: var(--t-livr-fg);     box-shadow: inset 3px 0 0 var(--t-livr-bd); }

.legende { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; font-size: 11.5px; color: var(--text-muted); }
.legende span { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.legende i {
    width: 9px; height: 12px; border-radius: 3px; display: inline-block;
    border-left: 3px solid;
}
.absence-pill {
    display: block; padding: 4px 8px; margin: 3px 0; border-radius: 7px;
    background: repeating-linear-gradient(45deg, var(--surface-track), var(--surface-track) 6px, var(--border) 6px, var(--border) 12px);
    color: var(--text-muted); font-size: 11px; font-style: italic;
}
.hs-pill {
    display: block; padding: 4px 8px; margin: 3px 0; border-radius: 7px;
    background: var(--primary-soft); color: var(--primary-soft-text); font-size: 11px; font-weight: 700;
}
.emp-emoji { font-style: normal; }

/* ---------------- Formulaires et boutons ---------------- */
.form-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.form-inline .form-group { display: flex; flex-direction: column; gap: 3px; }
.form-inline label {
    font-size: 10px; font-weight: 700; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .06em;
}
.form-inline input, .form-inline select {
    padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 7px;
    font-size: 12.5px; font-family: inherit; background: var(--surface); color: var(--text);
}
.form-inline input:focus, .form-inline select:focus { outline: none; border-color: var(--primary); }
/* Couple d'heures (début / fin) sur une seule ligne du formulaire en ligne.
   La disposition vit ici et non dans un attribut `style` : le script qui
   masque le bloc en mode « horaires d'ouverture » remettait le style à vide,
   ce qui emportait le `display` et empilait les deux champs. */
.heures-plage { display: inline-flex; gap: 8px; align-items: end; }
.heures-plage[hidden] { display: none; }
input[type="checkbox"] { accent-color: var(--primary); }

.btn {
    padding: 8px 14px; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
    font-size: 13px; font-family: inherit; font-weight: 600;
}
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-danger { background: var(--danger); color: var(--on-primary); }
.btn-secondary { background: var(--surface); color: var(--text-soft); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--surface-hover); }
a.btn { text-decoration: none; display: inline-block; }

.alert { padding: 10px 14px; border-radius: var(--radius); font-size: 13px; margin: 10px 0; font-weight: 500; }
.alert-success { background: var(--ok-bg); color: var(--success); }
.alert-error { background: var(--danger-bg); color: var(--danger); }
.alert-warning { background: var(--warn-bg); color: var(--primary-soft-text); }

.duplicate-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.duplicate-panel label { font-size: 12px; font-weight: 600; }
.duplicate-panel input { padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 7px; font-size: 12.5px; }
.duplicate-panel input[type="number"] { width: 56px; }

.employee-grid { display: flex; flex-direction: column; gap: 10px; }
.employee-day {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px;
}
.employee-day h3 { font-size: 14px; margin-bottom: 6px; color: var(--text); }
.empty-state { text-align: center; padding: 26px; color: var(--text-muted); font-size: 13px; }

/* ---------------- Planning hebdo : en-tête, semaines, mémo ---------------- */
.hours-col { min-width: 66px; font-size: 13px; }

.planning-status { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.badge-pharmacien {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 12px; border-radius: var(--radius); font-size: 12.5px; font-weight: 600;
}
.badge-pharmacien::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: currentColor; flex-shrink: 0; }
.badge-ph-ok      { background: var(--ok-bg); color: var(--success); border: 1px solid var(--ok-bd); }
.badge-ph-partiel { background: var(--warn-bg); color: var(--primary-soft-text); border: 1px solid var(--accent-border); }
.badge-ph-aucun   { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-bd); }

.week-pills-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.week-pills-bar {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    background: var(--surface-sunk); border: 1px solid var(--border); border-radius: 11px; padding: 4px;
}
.week-pill {
    padding: 5px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
    text-decoration: none; color: var(--text-muted); background: transparent; border: none;
}
.week-pill:hover { background: var(--surface); color: var(--text); }
.week-pill.active { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.week-pill.current:not(.active) { color: var(--primary); background: var(--surface); }
/* Flèches semaine précédente / suivante intégrées au même rail. */
.week-step {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; text-decoration: none; color: var(--text-muted); font-size: 14px; font-weight: 700;
}
.week-step:hover { background: var(--surface); color: var(--text); }

.memo-epingle {
    flex: 1; min-width: 300px;
    background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary);
    border-radius: var(--radius); padding: 8px 12px; font-size: 12.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.memo-epingle-titre { font-weight: 700; }
.memo-epingle-texte { color: var(--text-muted); margin-left: 6px; }

.btn-shortcut-ponctuel {
    background: var(--primary-soft); color: var(--primary-soft-text); border: 1px solid var(--accent-border);
}
.btn-shortcut-ponctuel:hover { background: var(--accent-border); }
.btn-shortcut-absence {
    background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary);
}
.btn-shortcut-absence:hover { background: var(--primary-hover); }

.options-panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 12px 16px; margin-top: 16px;
}
.options-panel > summary { list-style: none; color: var(--primary); }
.options-panel > summary::-webkit-details-marker { display: none; }
.emp-toggle {
    transition: background .15s, color .15s;
    background: var(--surface); color: var(--text-soft);
    border: 1px solid var(--border-strong) !important; border-radius: var(--radius-pill);
    font-family: inherit; font-weight: 600;
}
.emp-toggle:hover { background: var(--surface-hover); }
.emp-toggle.masked { background: var(--surface-sunk); color: var(--text-faint); text-decoration: line-through; }
/* Bascule de mode : un seul groupe segmenté. */
.mode-toggle {
    padding: 5px 13px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
    border: none; cursor: pointer; background: transparent; color: var(--text-muted);
    font-family: inherit;
}
.mode-toggle.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ---------------- Mode frise : une carte par jour ---------------- */
.frise-day {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--text);
    margin: 0; padding: 11px 16px; border-bottom: 1px solid var(--border);
}
.frise-day .frise-date { font-size: 12.5px; color: var(--text-faint); font-weight: 600; }
.frise-day.today { background: var(--surface); }
.frise-tag {
    font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-pill);
    background: var(--surface-sunk); color: var(--text-muted);
}
.frise-tag-ferie { background: var(--primary-soft); color: var(--primary-soft-text); }
.frise-tag-vac { background: var(--info-bg); color: var(--info-fg); }
.frise-tag-today { background: var(--primary); color: var(--on-primary); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.frise-resume { margin-left: auto; font-size: 11.5px; color: var(--text-muted); font-weight: 600; }

.frise-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 14px;
}
.frise-card.today { background: var(--surface); border-color: var(--border-strong); }
.frise-day-block { position: relative; padding: 10px 16px 13px; }
.frise-axis, .frise-row { display: flex; align-items: center; }
.frise-gutter, .frise-label { width: 150px; flex-shrink: 0; }
.frise-label {
    display: flex; align-items: center; justify-content: flex-end; gap: 7px;
    padding-right: 12px; overflow: hidden; text-align: right;
}
.frise-label .frise-nom {
    display: flex; flex-direction: column; align-items: flex-end; min-width: 0;
}
.frise-label .frise-nom b {
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 108px;
}
.frise-label .frise-nom small { font-size: 10px; color: var(--text-faint); font-weight: 600; white-space: nowrap; }
.frise-label .frise-avatar {
    width: 22px; height: 22px; border-radius: 7px; background: var(--surface-hover);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
}
.frise-axis-track { position: relative; flex: 1; height: 15px; }
.frise-axis-mark {
    position: absolute; top: 0;
    font-size: 10px; font-weight: 600; color: var(--text-faint); white-space: nowrap;
}

.frise-row { padding: 3px 0; border-radius: 8px; position: relative; z-index: 1; }
.frise-row:hover { background: var(--surface-hover); }
.frise-track { position: relative; flex: 1; height: 26px; background: var(--surface-track); border-radius: 7px; }
/* Ligne d'un membre sans créneau ce jour-là : la ligne reste affichée pour que
   les employés restent alignés d'un jour à l'autre. */
.frise-track.repos::before {
    content: "Repos";
    position: absolute; inset: 0; display: flex; align-items: center; padding-left: 10px;
    font-size: 10.5px; font-weight: 600; color: var(--text-faint); letter-spacing: .04em;
}
.frise-track.ferme {
    background: repeating-linear-gradient(45deg, var(--surface-track), var(--surface-track) 6px, var(--border) 6px, var(--border) 12px);
}
.frise-seg {
    position: absolute; top: 0; height: 26px; min-width: 3px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px; font-size: 11px; font-weight: 600; overflow: hidden;
}
.frise-seg-txt { padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
/* Les segments réutilisent .creneau-<type> : le liseré passe par box-shadow
   (le border-left décalerait le positionnement en %). */
.frise-seg.creneau-comptoir, .frise-seg.creneau-back_office,
.frise-seg.creneau-garde, .frise-seg.creneau-livraison { border-left: none; }

@media (max-width: 600px) {
    .week-nav .week-label { white-space: normal; font-size: 13px; }
    h1 { font-size: 24px; }
    table.grid th, table.grid td { padding: 5px 6px; min-width: 84px; }
    .frise-gutter, .frise-label { width: 96px; }
    .frise-label .frise-nom b { max-width: 62px; font-size: 11.5px; }
    .frise-label .frise-avatar { display: none; }
    .frise-seg { font-size: 9.5px; }
    .frise-day-block { padding: 8px 10px 10px; }
    .frise-day { padding: 9px 10px; }
}

/* ---------------- Historique des changements ---------------- */
/* Trois colonnes : catégorie (motif), détail, actions. La catégorie sert de
   colonne de balayage — on lit la page en la parcourant, sans lire chaque
   ligne en entier. */
/* Une entrée = une ligne. Un mois chargé dépasse les 150 entrées : tout ce qui
   ajoute une deuxième ligne (traçabilité, note) double la hauteur de la page.
   La note passe en fin de ligne, la traçabilité dans une pastille. */
.changements-table {
    /* `fixed` est indispensable : il y a une table par employé, et sans lui
       chacune se dimensionne sur son propre contenu — les colonnes ne
       s'alignent plus d'un membre à l'autre et la pastille part hors écran. */
    table-layout: fixed;
    width: 100%; border-collapse: collapse; font-size: 13px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
}
.changements-table td {
    padding: 6px 12px; border-bottom: 1px solid var(--border);
    vertical-align: middle; white-space: normal; overflow-wrap: anywhere;
}
.changements-table tr:last-child td { border-bottom: none; }
/* Zebrures : sur des lignes courtes et nombreuses, elles guident l'œil bien
   mieux qu'un filet clair sur fond clair. */
.changements-table tr:nth-child(even) td { background: var(--zebra); }

.chg-categorie { width: 190px; font-weight: 600; }
.chg-detail { width: auto; }
.chg-trace-cell { width: 36px; text-align: center; }
.chg-actions { width: 168px; text-align: right; }
/* Sans `nowrap`, la colonne étroite du mobile coupe « Supprimer » lettre par
   lettre, en colonne verticale. */
.chg-actions .btn { white-space: nowrap; }
/* Une journée « 09:00-12:00 14:00-18:00 » doit pouvoir passer à la ligne
   ENTRE deux plages, jamais au milieu d'un horaire. La cellule autorise la
   coupure n'importe où (overflow-wrap: anywhere, pour les vieux résumés) : on
   la remet à `normal` ici, seuls les espaces restent des points de coupure.
   En `nowrap`, la plage débordait sous la pastille de traçabilité. */
.chg-avant, .chg-apres { overflow-wrap: normal; word-break: keep-all; }
.chg-detail .chg-jour { white-space: nowrap; }

/* L'ancien état en rouge, le nouveau en vert : la nature du changement se voit
   avant d'être lue. */
.chg-avant { color: var(--danger); }
.chg-apres { color: var(--success); }
.chg-fleche { color: var(--text-muted); }
.chg-note { color: var(--text-muted); font-size: 12px; }
/* Écart d'heures de la journée : grisé quand le motif ne l'alimente pas le
   compteur mensuel (formation, correction…) — le solde le lit ou non. */
.chg-delta { color: var(--text-soft); font-size: 11.5px; font-weight: 600; }
.chg-delta-muet { color: var(--text-faint); font-weight: 400; }

/* Pastille de traçabilité : « Modifié le … par … » au survol. */
.chg-trace {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--border); color: var(--text-muted);
    font-size: 11px; font-style: italic; font-weight: 700;
    cursor: help; user-select: none;
}
.chg-trace:hover, .chg-trace:focus { background: var(--text-muted); color: var(--surface); }

@media (max-width: 600px) {
    .changements-table td { padding: 6px 8px; }
    .chg-categorie { width: 104px; font-size: 12px; }
    .chg-trace-cell { width: 28px; }
    /* Les deux boutons s'empilent : côte à côte, ils ne tiennent pas. */
    .chg-actions { width: 86px; }
    .chg-actions > div { flex-direction: column; align-items: flex-end; }
}

/* ---------------- Impression ---------------- */
@media print {
    .sidebar, .mobile-topbar, .week-nav, .week-pills-row, .options-panel { display: none !important; }
    .app-main { margin-left: 0; }
    body { background: var(--on-primary); }
    main { max-width: none; padding: 0; }
    .frise-card, .grid-wrapper { break-inside: avoid; box-shadow: none; }
}

/* ---------------- Écran Apparence ---------------- */
.apparence-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.apparence-mode {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 9px 14px; font-size: 13px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.apparence-mode.choisi, .apparence-theme.choisi {
    border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary);
}

.apparence-themes {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
/* La vignette porte son propre `data-theme`, donc ses pastilles rendent la
   palette réelle : aucune couleur n'est recopiée dans le gabarit. */
.apparence-theme {
    display: flex; flex-direction: column; gap: 8px; cursor: pointer;
    padding: 12px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.apparence-theme input, .apparence-mode input { accent-color: var(--primary); }
.apparence-theme input { align-self: flex-start; }
.apparence-pastilles { display: flex; gap: 5px; }
.apparence-pastilles .pastille {
    width: 26px; height: 26px; border-radius: 7px;
    border: 1px solid var(--border-strong);
}
.apparence-nom { font-size: 13px; font-weight: 600; }
