/* ========================================
   refonte vague 1 · fondations : JETONS DE MARQUE (direction 1 « Marque »)
   Mode par défaut : clair « cuisine » (:root et .m-light). Le jeu sombre de marque (.m-dark)
   est posé par navSync() sur #app-main (en-tête compris), #bottom-nav et #nav-sheet selon le mode
   de la vue (NAV_VIEWS[vue].mode) et le réglage « Apparence » (refonte vague 2-3 · socle).
   Les anciens noms (--btn-primary, --bg-main...) restent en ALIAS : app.js s'en sert en inline.
   ======================================== */
:root {
    /* Marque (identiques dans les deux modes) */
    --o-night: #05081A;
    --o-ink: #0A0F26;
    --o-blue: #0047FF;
    --o-blue-hi: #3D7BFF;
    --o-blue-lo: #003BD6;
    --o-cyan: #28C6F4;
    --o-grad: linear-gradient(90deg, #0047FF 0%, #28C6F4 100%);
    --o-grad-btn: linear-gradient(180deg, #3D7BFF 0%, #0047FF 60%, #003BD6 100%);

    /* Typographie : Montserrat pour les titres et les chiffres, Inter pour le texte et l'interface */
    --f-title: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-text: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Rayons : 8 champs et petits boutons, 14 cartes, 20 panneaux, 999 badges et puces */
    --r-sm: 8px;
    --r-ctl: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-pill: 999px;

    /* Couleurs d'état pleines (fond plein et texte blanc), indépendantes du mode */
    --ok-solid: #047857;
    --todo-solid: #0047FF;
    --late-solid: #B45309;
    --crit-solid: #B91C1C;
    --ia-solid: #0E7490;
    --on-solid: #FFFFFF;   /* texte posé sur une couleur pleine (badge, bouton d'action) */

    /* Barre latérale : toujours sombre, quel que soit le mode de la vue */
    --s-bg: var(--o-night); --s-fg: #C3CAE2; --s-mute: #7E88AC; --s-line: rgba(255, 255, 255, 0.07);
    --s-icon: #8D97BC; --s-icon-on: #7FDCF8;

    /* Jeu SOMBRE de marque (pilotage) */
    --ad-bg: #060A1C; --ad-surface: #0D1330; --ad-surface2: #141B3D; --ad-line: rgba(160, 175, 230, 0.13);
    --ad-fg: #EEF1FA; --ad-mute: #A0A8C6; --ad-link: #86B0FF; --ad-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --ad-ok: #4ADE9F; --ad-ok-bg: rgba(52, 211, 153, 0.13);
    --ad-todo: #93B7FF; --ad-todo-bg: rgba(59, 123, 255, 0.16);
    --ad-late: #FDBA74; --ad-late-bg: rgba(251, 146, 60, 0.14);
    --ad-crit: #FCA5A5; --ad-crit-bg: rgba(248, 113, 113, 0.15);
    --ad-ia: #7FE3F7; --ad-ia-bg: rgba(40, 198, 244, 0.13);
    --ad-neu: #B5BCD6; --ad-neu-bg: rgba(160, 175, 230, 0.12);

    /* Jeu CLAIR « cuisine » (terrain) */
    --al-bg: #F3F5FA; --al-surface: #FFFFFF; --al-surface2: #EEF2F9; --al-line: #DCE2EE;
    --al-fg: #0A0F26; --al-mute: #525B73; --al-link: #0040E6;
    --al-shadow: 0 1px 2px rgba(10, 15, 38, 0.05), 0 6px 18px -8px rgba(10, 15, 38, 0.12);
    --al-ok: #047857; --al-ok-bg: #E2F5EC;
    --al-todo: #0040E6; --al-todo-bg: #E7EEFF;
    --al-late: #B45309; --al-late-bg: #FDF0E0;
    --al-crit: #B91C1C; --al-crit-bg: #FDE7E7;
    --al-ia: #0E7490; --al-ia-bg: #DFF4FA;
    --al-neu: #525B73; --al-neu-bg: #EDF0F6;

    /* Ombres communes */
    --sh-pop: 0 24px 60px -20px rgba(5, 8, 26, 0.45), 0 2px 6px rgba(5, 8, 26, 0.08);
    --sh-cta: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px -12px rgba(0, 71, 255, 0.95);
    --ring: 0 0 0 3px rgba(0, 71, 255, 0.18);

    /* Layout */
    --nav-height: 85px;
    --header-height: 70px;
}

/* Jetons sémantiques selon le mode (clair par défaut) */
:root, .m-light {
    --a-bg: var(--al-bg); --a-surface: var(--al-surface); --a-surface2: var(--al-surface2); --a-line: var(--al-line);
    --a-fg: var(--al-fg); --a-mute: var(--al-mute); --a-link: var(--al-link); --a-shadow: var(--al-shadow);
    --ok: var(--al-ok); --ok-bg: var(--al-ok-bg); --todo: var(--al-todo); --todo-bg: var(--al-todo-bg);
    --late: var(--al-late); --late-bg: var(--al-late-bg); --crit: var(--al-crit); --crit-bg: var(--al-crit-bg);
    --ia: var(--al-ia); --ia-bg: var(--al-ia-bg); --neu: var(--al-neu); --neu-bg: var(--al-neu-bg);
    --chip-on-bg: var(--o-ink); --chip-on-fg: #FFFFFF;
    --overlay: rgba(5, 8, 26, 0.5);
    color-scheme: light;
}
.m-dark {
    --a-bg: var(--ad-bg); --a-surface: var(--ad-surface); --a-surface2: var(--ad-surface2); --a-line: var(--ad-line);
    --a-fg: var(--ad-fg); --a-mute: var(--ad-mute); --a-link: var(--ad-link); --a-shadow: var(--ad-shadow);
    --ok: var(--ad-ok); --ok-bg: var(--ad-ok-bg); --todo: var(--ad-todo); --todo-bg: var(--ad-todo-bg);
    --late: var(--ad-late); --late-bg: var(--ad-late-bg); --crit: var(--ad-crit); --crit-bg: var(--ad-crit-bg);
    --ia: var(--ad-ia); --ia-bg: var(--ad-ia-bg); --neu: var(--ad-neu); --neu-bg: var(--ad-neu-bg);
    --chip-on-bg: var(--o-blue); --chip-on-fg: #FFFFFF;
    --overlay: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}

/* ALIAS des anciens noms, redéclarés sur chaque conteneur de mode pour suivre .m-dark et .m-light */
:root, .m-light, .m-dark {
    --bg-main: var(--a-bg);
    --text-main: var(--a-fg);
    --bg-card: var(--a-surface);
    --text-muted: var(--a-mute);
    --text-secondary: var(--a-mute);
    --border-color: var(--a-line);
    --border-radius: var(--r-lg);
    --shadow-premium: var(--a-shadow);
    --btn-primary: var(--o-blue);
    --btn-secondary: var(--o-ink);
    --accent-emerald: var(--ok-solid);
    --accent-orange: var(--late-solid);
    --alert-success: var(--ok-solid);
    --alert-warning: var(--late-solid);
    --alert-critical: var(--crit-solid);
    --alert-neutral: var(--neu);
    /* bordures teintées d'un état (cartes, encadrés) */
    --ok-line: color-mix(in srgb, var(--ok) 32%, transparent);
    --todo-line: color-mix(in srgb, var(--todo) 32%, transparent);
    --late-line: color-mix(in srgb, var(--late) 34%, transparent);
    --crit-line: color-mix(in srgb, var(--crit) 34%, transparent);
    --ia-line: color-mix(in srgb, var(--ia) 32%, transparent);
}
/* En sombre, les alias historiques servent à la fois de texte (sur fond sombre) et de fond
   (sous un texte blanc) : teintes intermédiaires lisibles dans les deux usages */
.m-dark {
    --btn-primary: var(--o-blue-hi);
    --btn-secondary: var(--ad-surface2);
    --accent-emerald: #059669;
    --accent-orange: #D97706;
    --alert-success: #059669;
    --alert-warning: #D97706;
    --alert-critical: #DC2626;
}
/* Conteneurs de mode : leur propre fond et leur couleur de texte (sinon ceux de #app, clairs) */
#app-main.m-dark, #app-main.m-light { background: var(--a-bg); color: var(--a-fg); }

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    -webkit-tap-highlight-color: transparent; 
}

.font-primary  { font-family: 'Montserrat', sans-serif; }
.font-secondary { font-family: 'Montserrat', sans-serif; font-weight: 900; }

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    overflow: hidden;
    user-select: none;
    font-family: 'Montserrat', 'Roboto', sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
}

/* CRITICAL: toggle visibility */
.hidden { display: none !important; }

/* App Shell Layout */
#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--bg-main);
}


/* --- Premium Utilities --- */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-md { box-shadow: var(--shadow-premium); }

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-fade-in { animation: fadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-slide-up { animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Login */
.login-overlay {
    position: fixed; inset: 0;
    background: linear-gradient(135deg, #0047FF 0%, #111827 100%);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000;
}
.login-card {
    background: #ffffff; width: 90%; max-width: 400px;
    padding: 40px; border-radius: 32px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    text-align: center;
}
.input-light {
    width: 100%; padding: 16px; border: 1px solid #e2e8f0;
    border-radius: 16px; font-family: inherit; font-size: 1rem;
    background: #f8fafc; color: var(--text-main); outline: none; transition: all 0.2s;
}
.input-light:focus { border-color: var(--btn-primary); background: #fff; box-shadow: 0 0 0 4px rgba(0, 71, 255, 0.12); }

.btn-large-primary {
    width: 100%; background: var(--btn-primary);
    color: #fff; border: none; border-radius: 16px;
    padding: 18px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all 0.2s;
    font-family: 'Montserrat', sans-serif; letter-spacing: 0.02em;
    box-shadow: 0 4px 16px rgba(0, 71, 255, 0.35);
}
.btn-large-primary:active { transform: scale(0.98); }

/* Header */
#app-header {
    height: var(--header-height); display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; gap: 8px;
    background: color-mix(in srgb, var(--a-bg) 90%, transparent); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-color); z-index: 10;
}
#header-title { font-size: 1.3rem; font-weight: 800; color: var(--btn-secondary); letter-spacing: -0.5px; }

.header-actions {
    display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; justify-content: flex-end;
}

.restaurant-dropdown {
    background-color: var(--a-surface);
    padding: 8px 28px 8px 12px;
    border-radius: 20px;
    font-size: 0.8rem; font-weight: 700; color: var(--text-main);
    border: 1px solid var(--border-color);
    outline: none; cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7' /%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 12px auto;
    box-shadow: var(--shadow-premium);
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Main Content */
#main-content {
    flex: 1; overflow-y: auto; padding: 24px;
    padding-bottom: calc(var(--nav-height) + 24px); scroll-behavior: smooth;
}
#main-content::-webkit-scrollbar { display: none; }

/* Bottom Nav */
#bottom-nav {
    position: absolute; bottom: 0; left: 0; width: 100%; height: var(--nav-height);
    background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex; justify-content: space-around; align-items: center; 
    border-top: 1px solid var(--border-color); z-index: 100;
}

.notification-badge {
    position: absolute; top: -8px; right: -10px;
    background: var(--alert-critical); color: var(--on-solid);
    font-size: 0.65rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--a-surface);
}

/* Cards */
.card {
    background: var(--bg-card); border-radius: 24px;
    padding: 20px; border: 1px solid var(--border-color); margin-bottom: 16px;
    box-shadow: var(--shadow-premium); transition: transform 0.2s;
}
.card:active { transform: scale(0.98); }

.card-title { font-weight: 800; font-size: 1.1rem; color: var(--text-main); letter-spacing: -0.3px; }
.card-subtitle { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; margin-top: 2px; }

/* Dashboard Trends */
.chart-container {
    width: 100%; height: 220px; margin-top: 16px; position: relative;
}

/* Today Hub Blocks */
.today-grid {
    display: grid; grid-template-columns: 1fr; gap: 16px;
}

.status-indicator {
    padding: 6px 12px; border-radius: 12px; font-size: 0.75rem; font-weight: 800;
    text-transform: uppercase;
}
.status-todo { background: #eff6ff; color: #2563eb; }
.status-late { background: #fef2f2; color: #dc2626; }
.status-done { background: #f0fdf4; color: #16a34a; }

/* Specific components for Audit Suspect */
.badge-suspect {
    background: #fff7ed; color: #c2410c; border: 1px solid #ffedd5;
    padding: 4px 8px; border-radius: 8px; font-size: 0.7rem; font-weight: 800;
}

/* ========================================
   RESPONSIVE : DESKTOP (768px+)
   ======================================== */
@media (min-width: 768px) {
    #app { max-width: 1000px; margin: 0 auto; box-shadow: 0 0 100px rgba(0,0,0,0.1); position: relative; }
    .today-grid { grid-template-columns: 1fr 1fr; }
    .desktop-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px;
    }
}

.flex-between { display: flex; align-items: center; justify-content: space-between; }
.section-title { font-size: 0.9rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin: 24px 0 12px 0; }

/* Modals */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(8px);
    z-index: 1000; display: flex; align-items: center; justify-content: center;
}
.modal-card {
    background: #fff; width: 90%; max-width: 450px; border-radius: 32px; padding: 32px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.btn-huge {
    border: none; border-radius: 24px; padding: 32px 16px; font-size: 1.2rem; font-weight: 800;
    cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 12px; transition: all 0.2s;
}
.btn-yes { background: #f0fdf4; color: #16a34a; }
.btn-no { background: #fef2f2; color: #dc2626; }
.btn-huge:active { transform: scale(0.95); }

.tag { padding: 4px 10px; border-radius: 8px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
.tag-urgent { background: #fee2e2; color: #ef4444; }
.tag-normal { background: #f1f5f9; color: #64748b; }
.tag-moyen { background: #fef9c3; color: #92400e; }

/* ========================================
   CLASSES UTILITAIRES ESSENTIELLES (app.js)
   ======================================== */

/* Bouton interne */
.btn-primary {
    width: 100%; padding: 14px; border: 1px solid var(--border-color);
    border-radius: 14px; font-family: inherit; font-size: 0.9rem; font-weight: 700;
    cursor: pointer; background: var(--bg-main); color: var(--text-main); transition: all 0.2s;
}
.btn-primary:hover { background: #f1f5f9; }
.btn-primary:active { transform: scale(0.98); }

/* Filtre pill */
.filter-btn {
    padding: 8px 14px; border: 1px solid var(--border-color);
    border-radius: 100px; font-family: inherit; font-size: 0.8rem; font-weight: 700;
    cursor: pointer; background: var(--bg-main); color: var(--text-muted); white-space: nowrap; transition: all 0.15s;
}
.filter-btn.active { background: var(--text-main); color: #fff; border-color: var(--text-main); }

/* Input interne */
.input-primary {
    width: 100%; padding: 14px 16px; border: 1px solid var(--border-color);
    border-radius: 14px; font-family: inherit; font-size: 0.95rem;
    background: var(--bg-main); color: var(--text-main); outline: none; transition: all 0.2s;
    -webkit-appearance: none; appearance: none;
}
.input-primary:focus { border-color: var(--btn-primary); background: #fff; box-shadow: 0 0 0 3px rgba(0,71,255,0.12); }

/* Formulaires */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }

/* Flex utilities */
.flex-row { display: flex; align-items: center; gap: 8px; }

/* Barre de filtres */
.filter-bar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; }
.filter-bar::-webkit-scrollbar { display: none; }

/* Progress bar */
.progress-bar { width: 100%; height: 8px; background: #f1f5f9; border-radius: 100px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--btn-primary); border-radius: 100px; transition: width 0.4s; }

/* Dashboard */
.dash-card {
    background: var(--bg-card); border-radius: 24px; padding: 20px;
    border: 1px solid var(--border-color); box-shadow: var(--shadow-premium);
}
.dash-score-badge { font-size: 1.8rem; font-weight: 900; }
.score-good { color: var(--alert-success); }
.score-avg { color: var(--alert-warning); }
.score-bad { color: var(--alert-critical); }
.dash-data-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-color); cursor: pointer; }
.dash-data-row:last-child { border: none; }
.dash-dtitle { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.dash-dval { font-size: 1rem; font-weight: 900; color: var(--text-main); }
.dash-dval.red { color: var(--alert-critical); }

/* Chips */
.audit-chip { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 0.7rem; font-weight: 800; }
.tag-status { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 0.7rem; font-weight: 800; }

/* Vue */
.view { padding-bottom: 24px; }

/* Lightbox */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.lightbox-close { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 1.4rem; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#lightbox-img { max-width: 92vw; max-height: 85vh; border-radius: 16px; object-fit: contain; }

/* Divers */
.photo-thumb { border-radius: 12px; }
.score-ring { font-size: 2rem; font-weight: 900; }

/* ========================================
   CLASSES MANQUANTES (audit, todo, layout)
   ======================================== */

/* Bouton / zone de capture photo dans les modales */
.photo-placeholder {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 16px; margin-bottom: 12px;
    background: #f8fafc; border: 2px dashed var(--border-color);
    border-radius: 16px; cursor: pointer; color: var(--text-muted);
    font-weight: 700; font-size: 0.9rem; transition: all 0.2s;
}
.photo-placeholder:active { background: #f1f5f9; }
.photo-placeholder.mandatory { border-color: var(--alert-warning); color: var(--alert-warning); }
.photo-placeholder.has-photo { border-color: var(--alert-success); background: #f0fdf4; color: var(--alert-success); border-style: solid; }

/* Barre de progression dans les audits et to-do actifs */
.checklist-progress {
    background: var(--bg-card); border-radius: 20px;
    padding: 16px 20px; margin-bottom: 20px;
    border: 1px solid var(--border-color); box-shadow: var(--shadow-premium);
}

/* Texte de la question d'audit */
.question-text {
    font-size: 1.15rem; font-weight: 700; color: var(--text-main);
    line-height: 1.5; margin: 20px 0;
}

/* Espaceur générique */
.spacer-16 { height: 16px; }

/* Masqué sur desktop, visible mobile */
@media (min-width: 768px) {
    .mobile-only { display: none !important; }
}
@media (max-width: 1023px) {
    .desktop-only { display: none !important; }
}

/* En-tête d'une carte de tâche */
.task-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}

/* ========================================
   PWA / MOBILE OPTIMISATIONS
   ======================================== */

/* Safe area insets pour les appareils avec notch / Dynamic Island */
@supports (padding-top: env(safe-area-inset-top)) {
    #app-header {
        padding-top: env(safe-area-inset-top);
        height: calc(var(--header-height) + env(safe-area-inset-top));
    }
    #bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(var(--nav-height) + env(safe-area-inset-bottom));
    }
    #main-content {
        padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 24px);
    }
}

/* Boutons plus tactiles sur mobile */
@media (max-width: 1023px) {
    .btn-primary {
        min-height: 48px;
    }
    .btn-large-primary {
        min-height: 54px;
    }
    .btn-yes, .btn-no {
        min-height: 72px;
    }
    /* Inputs plus grands au toucher */
    .input-primary, .input-light {
        min-height: 48px;
        font-size: 1rem;
    }
    /* Cards avec padding confortable */
    .card {
        padding: 18px;
    }
    /* Filtre bar avec scroll doux */
    .filter-bar {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding: 4px 0 10px;
    }
    .filter-btn {
        scroll-snap-align: start;
        flex-shrink: 0;
    }
}

/* Splash screen PWA : transition douce au démarrage */
@media (display-mode: standalone) {
    /* En mode app installée, retire les artefacts navigateur */
    body {
        overscroll-behavior: none;
    }
    /* Header légèrement plus haut pour le status bar */
    #app-header {
        background: color-mix(in srgb, var(--a-bg) 95%, transparent);
    }
}

/* ========================================
   ÉTIQUETTES DLC : GRILLE DE PRODUITS (cuisine, tablette et téléphone)
   ======================================== */
.lbl-chip { padding: 10px 16px; font-size: 0.9rem; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.lbl-chip-n {
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
    background: var(--btn-primary); color: #fff; font-size: 0.75rem; font-weight: 900;
    display: inline-flex; align-items: center; justify-content: center;
}
.lbl-chip-n.alert { background: var(--alert-critical); }
.filter-btn.active .lbl-chip-n { background: #fff; color: var(--text-main); }
.filter-btn.active .lbl-chip-n.alert { color: var(--alert-critical); }
.lbl-search { position: relative; margin-bottom: 12px; }
.lbl-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.lbl-search .input-light { padding-left: 44px; }

.lbl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) { .lbl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) { .lbl-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 960px) { .lbl-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.lbl-tile { position: relative; aspect-ratio: 1 / 1; }
.lbl-tile-main {
    width: 100%; height: 100%; padding: 0; display: flex; flex-direction: column;
    background: var(--bg-card); color: var(--text-main); font-family: inherit; text-align: left;
    border: 2px solid var(--border-color); border-radius: 18px; overflow: hidden; cursor: pointer;
    box-shadow: var(--shadow-premium); transition: transform 0.1s, border-color 0.15s;
}
.lbl-tile-main:active { transform: scale(0.96); }
.lbl-tile.on .lbl-tile-main { border-color: var(--btn-primary); }
.lbl-tile-img {
    position: relative; flex: 1; min-height: 0; width: 100%;
    background: var(--bg-main); display: flex; align-items: center; justify-content: center;
}
.lbl-tile-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lbl-tile-initials { font-size: 1.5rem; font-weight: 900; color: var(--text-muted); letter-spacing: 0.02em; }
/* Formulaire produit : durées proposées et banque de photos libres de droit (images-produits/) */
.pb-hint { font-size: 0.78rem; line-height: 1.45; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; background: color-mix(in srgb, var(--btn-primary) 9%, var(--bg-main)); border: 1px solid color-mix(in srgb, var(--btn-primary) 28%, transparent); }
.pb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 6px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.pb-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; max-height: 42vh; overflow-y: auto; padding: 2px; }
.pb-item { position: relative; aspect-ratio: 1; width: 100%; padding: 0; border: 2px solid var(--border-color); border-radius: 12px; overflow: hidden; background: var(--bg-main); cursor: pointer; }
.pb-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-item.on { border-color: var(--btn-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn-primary) 40%, transparent); }
.pb-item:focus-visible { outline: 2px solid var(--btn-primary); outline-offset: 2px; }
.pb-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 4px 3px; font-size: 0.62rem; font-weight: 600; line-height: 1.2; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(0, 0, 0, 0.72)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbl-tile-txt { display: block; padding: 5px 8px 7px; }
.lbl-tile-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 0.78rem; font-weight: 800; line-height: 1.2; word-break: break-word;
}
.lbl-tile-dur { display: block; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); margin-top: 1px; }
.lbl-tile-count {
    position: absolute; top: 6px; right: 6px; min-width: 32px; height: 32px; padding: 0 8px;
    border-radius: 16px; border: 2px solid #fff; background: var(--btn-primary); color: #fff;
    font-size: 1rem; font-weight: 900; display: flex; align-items: center; justify-content: center;
    pointer-events: none; box-shadow: 0 2px 8px rgba(0, 71, 255, 0.35);
}
.lbl-tile-minus {
    position: absolute; top: 0; left: 0; width: 48px; height: 48px; padding: 0;
    background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lbl-tile-minus span {
    width: 38px; height: 38px; border-radius: 50%; background: rgba(17, 24, 39, 0.82); color: #fff;
    border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.lbl-tile-minus:active span { transform: scale(0.92); }
.lbl-tile:not(.on) .lbl-tile-count, .lbl-tile:not(.on) .lbl-tile-minus { display: none; }

/* Barre d'impression : collée en bas de la zone de contenu (dont la marge basse réserve déjà
   la place de la barre de navigation), toujours visible au-dessus de la grille */
.lbl-bar {
    position: sticky; bottom: 12px; z-index: 5;
    display: flex; align-items: stretch; gap: 8px; margin-top: 16px; padding: 10px;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 22px;
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.18);
}
.lbl-bar .btn-large-primary { flex: 1; width: auto; min-width: 0; padding: 14px 12px; font-size: 1rem; }
.lbl-bar-clear {
    flex: 0 0 auto; padding: 0 18px; min-height: 54px; border-radius: 16px; cursor: pointer;
    border: 1px solid var(--border-color); background: var(--bg-main); color: var(--text-main);
    font-family: inherit; font-size: 0.95rem; font-weight: 700;
}

/* ========================================
   VUE HACCP + ÉTIQUETTES DLC : COMPACT SUR TÉLÉPHONE (< 600 px)
   Tablette et ordinateur gardent la mise en page d'origine.
   ======================================== */
.haccp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.haccp-head-txt { min-width: 0; }
.haccp-head h2 { margin: 0; }
.haccp-head-sub { color: var(--text-muted); font-size: 0.85rem; margin: 4px 0 12px; text-transform: capitalize; }
.haccp-tabs { margin-bottom: 16px; }
.lbl-subbar { display: flex; align-items: flex-start; gap: 8px; }
.lbl-subtabs { flex: 1 1 auto; min-width: 0; }
.phomemo-pill { display: none; }
.lbl-types { margin-bottom: 10px; }
.lbl-cats { margin-bottom: 12px; }
.lbl-search-toggle { display: none; }

@media (max-width: 599px) {
    /* En-tête de l'app : le logo reste entier (icône seule), le sélecteur de site se rétrécit,
       jamais de débordement à gauche sur le logo ni de défilement horizontal de la page */
    #app, #main-content { overflow-x: hidden; }
    #app-header { padding-left: 12px; padding-right: 12px; gap: 6px; min-width: 0; }
    #header-title { width: 30px; overflow: hidden; }
    #header-title img { max-width: none; }
    .header-actions { gap: 0; }
    .header-actions > button { min-width: 38px; min-height: 44px; padding: 6px 4px !important; display: inline-flex; align-items: center; justify-content: center; }
    .header-actions .restaurant-dropdown { flex: 1 1 0; width: 0; min-width: 0; max-width: 200px; margin-right: 6px; }

    /* Vue HACCP : marges resserrées */
    #main-content:has(> .haccp-view) { padding: 10px 16px calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 12px); }
    .haccp-view.view { padding-bottom: 4px; }
    .haccp-head { margin-bottom: 6px; align-items: center; }
    .haccp-head h2 { font-size: 1.2rem; line-height: 1.2; }
    .haccp-head-sub { font-size: 0.76rem; margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .haccp-head-btn { min-width: 44px; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .haccp-head-btn-txt { display: none; }
    .haccp-tabs, .lbl-subtabs, .lbl-types, .lbl-cats { padding: 2px 0; margin-bottom: 6px; }
    .haccp-tabs .filter-btn { min-height: 44px; }

    /* Sous-onglets + pastille imprimante sur la même ligne */
    .lbl-subbar { align-items: center; margin-bottom: 6px; }
    .lbl-subbar .lbl-subtabs { margin-bottom: 0; }
    .lbl-chip { padding: 8px 14px; font-size: 0.88rem; }
    .phomemo-pill {
        position: relative; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
        border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-main); color: var(--text-main);
    }
    .phomemo-pill[aria-expanded="true"] { border-color: var(--text-main); }
    .phomemo-pill-dot { position: absolute; top: 7px; right: 7px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg-main); }
    .lbl-printer-full { display: none; }
    .lbl-printer-full.open { display: block; }
    .lbl-printer-full .phomemo-status > div { margin-bottom: 8px !important; flex-wrap: wrap; }
    .lbl-printer-full .phomemo-status > div > div:first-child { flex: 1 1 100%; }

    /* Puces de type, recherche et catégories : lignes qui défilent sans retour à la ligne */
    .lbl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
    .lbl-tools .lbl-search { margin: 0; flex: 0 0 42%; min-width: 0; }
    .lbl-tools.lbl-tools-solo .lbl-search { flex: 1 1 100%; }
    .lbl-tools .lbl-search .input-light { min-height: 44px; padding: 8px 6px 8px 34px; font-size: 1rem; border-radius: 14px; }
    .lbl-tools .lbl-search i { left: 12px; }
    .lbl-tools .lbl-search.lbl-search-folded { display: none; }
    .lbl-tools .lbl-search.lbl-search-wide { order: -1; flex: 1 0 100%; }
    .lbl-search-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; font-size: 0.95rem; }
    .lbl-cats { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
    .lbl-cats .filter-btn { min-height: 44px; padding: 8px 14px; font-size: 0.85rem; }
    .lbl-grid { gap: 8px; }
    .lbl-bar { bottom: 6px; margin-top: 10px; padding: 8px; border-radius: 20px; }
    .lbl-bar .btn-large-primary { padding: 12px 8px; font-size: 0.95rem; }
    .lbl-bar .btn-large-primary i { margin-right: 6px !important; }
    .lbl-bar-clear { padding: 0 14px; }
}

/* ========================================
   MODULE PLANNING ET POINTAGE (planning.js)
   ======================================== */
.pln-chip { display: inline-block; padding: 3px 9px; border-radius: 100px; font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.pln-sub { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.pln-weekbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 16px; }
.pln-view .card:active { transform: none; }
.pln-grid-card { padding: 8px; }
.pln-grid-wrap { width: 100%; overflow-x: auto; }
.pln-grid { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.pln-grid th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.pln-grid th.pln-today { color: var(--btn-primary); }
.pln-grid td { padding: 6px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.pln-grid tfoot td { font-weight: 800; font-size: 0.78rem; color: var(--text-muted); border-bottom: none; }
.pln-group td { background: #f8fafc; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); padding: 6px 8px; }
.pln-name { min-width: 130px; }
.pln-cell { min-width: 92px; }
.pln-total { white-space: nowrap; }
.pln-shift { display: block; width: 100%; margin-bottom: 4px; padding: 5px 6px; border: none; border-radius: 8px; background: #e0e9ff; color: #0039cc; font-family: inherit; font-weight: 800; font-size: 0.78rem; cursor: pointer; text-align: left; white-space: nowrap; }
.pln-shift small { font-weight: 600; opacity: 0.75; }
.pln-shift-new { background: #fef9c3; color: #854d0e; }
.pln-add { border: 1px dashed #cbd5e1; background: none; color: var(--text-muted); border-radius: 8px; width: 28px; height: 24px; cursor: pointer; font-weight: 800; }
.pln-add:hover { border-color: var(--btn-primary); color: var(--btn-primary); }
.pln-other { font-size: 0.68rem; color: #7c3aed; font-weight: 700; margin-bottom: 4px; }
.pln-alert-line { font-size: 0.82rem; padding: 4px 0; border-top: 1px solid var(--border-color); }
.pln-dayrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.pln-dayrow:last-child { border-bottom: none; }
.pln-today-row { background: #f0f5ff; margin: 0 -10px; padding: 10px; border-radius: 10px; }
.pln-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.pln-punch { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-color); font-size: 0.85rem; flex-wrap: wrap; }
.pln-totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.pln-totals div { background: #f8fafc; border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.pln-totals span { font-size: 0.68rem; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
.pln-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 12px; }
.pln-modal-card { max-height: 88vh; overflow-y: auto; padding: 24px; }
.pln-notice h1 { font-size: 1.15rem; margin-bottom: 10px; }
.pln-notice h2 { font-size: 0.95rem; margin: 14px 0 4px; }
.pln-notice p, .pln-notice li { font-size: 0.85rem; line-height: 1.5; }
.pln-notice ul { padding-left: 18px; }
.pln-mobile { display: none; }
@media (max-width: 760px) {
    .pln-grid-card { display: none; }
    .pln-mobile { display: block; }
    .pln-ts { font-size: 0.75rem; }
}

/* Borne de pointage (tablette du site, plein écran) */
#pln-kiosk { position: fixed; inset: 0; background: var(--bg-main); z-index: 5000; overflow: auto; font-family: 'Montserrat', sans-serif; }
.pln-k-wrap { min-height: 100%; display: flex; flex-direction: column; }
.pln-k-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; background: #111827; color: #fff; flex-wrap: wrap; }
.pln-k-site { font-size: 1.3rem; font-weight: 900; }
.pln-k-head .pln-k-small { color: #cbd5e1; }
.pln-k-clock { font-size: 2.4rem; font-weight: 900; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.pln-k-status { font-weight: 800; color: #34d399; font-size: 0.9rem; }
.pln-k-status.off { color: #fbbf24; }
.pln-k-main { flex: 1; display: grid; grid-template-columns: 1fr 280px; gap: 20px; padding: 20px 24px; }
.pln-k-search { width: 100%; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--border-color); font-family: inherit; font-size: 1rem; margin-bottom: 12px; }
.pln-k-section { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin: 10px 0; }
.pln-k-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pln-k-person { background: #fff; border: 1px solid var(--border-color); border-radius: 20px; padding: 16px; text-align: left; cursor: pointer; font-family: inherit; box-shadow: var(--shadow-premium); }
.pln-k-person:active { transform: scale(0.97); }
.pln-k-name { font-size: 1.15rem; font-weight: 900; color: var(--text-main); }
.pln-k-plan { font-size: 0.85rem; font-weight: 700; color: var(--btn-primary); margin-top: 4px; }
.pln-k-last { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.pln-k-next { display: inline-block; margin-top: 10px; background: var(--btn-primary); color: #fff; border-radius: 100px; padding: 6px 14px; font-weight: 800; font-size: 0.85rem; }
.pln-k-qr { background: #fff; border-radius: 20px; padding: 16px; border: 1px solid var(--border-color); align-self: start; text-align: center; }
#pln-k-qrbox { display: flex; justify-content: center; margin: 8px 0; min-height: 220px; }
.pln-k-small { font-size: 0.78rem; color: var(--text-muted); }
.pln-k-foot { padding: 12px 24px; font-size: 0.78rem; color: var(--text-muted); display: flex; justify-content: space-between; }
.pln-k-foot button { background: none; border: none; color: var(--text-muted); text-decoration: underline; cursor: pointer; font-family: inherit; }
.pln-k-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 5100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pln-k-pad { background: #fff; border-radius: 28px; padding: 24px; width: 100%; max-width: 420px; text-align: center; }
.pln-k-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 14px 0; }
.pln-k-actions button { padding: 10px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-main); font-family: inherit; font-weight: 800; cursor: pointer; }
.pln-k-actions button.on { background: var(--btn-primary); color: #fff; border-color: var(--btn-primary); }
.pln-k-dots { display: flex; justify-content: center; gap: 10px; margin: 10px 0; }
.pln-k-dots span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #cbd5e1; }
.pln-k-dots span.on { background: var(--text-main); border-color: var(--text-main); }
.pln-k-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pln-k-keys button { height: 64px; font-size: 1.6rem; font-weight: 800; border-radius: 16px; border: 1px solid var(--border-color); background: var(--bg-main); cursor: pointer; font-family: inherit; }
.pln-k-keys button.ok { background: #16a34a; color: #fff; border-color: #16a34a; font-size: 1.2rem; }
.pln-k-cancel { margin-top: 12px; background: none; border: none; color: var(--text-muted); font-weight: 700; cursor: pointer; font-family: inherit; }
.pln-k-err { color: #dc2626; font-weight: 800; min-height: 1.2em; font-size: 0.9rem; }
.pln-k-done .pln-k-clock { color: var(--text-main); }
.pln-k-pair { max-width: 420px; margin: 10vh auto; background: #fff; border-radius: 28px; padding: 32px; text-align: center; box-shadow: var(--shadow-premium); }
.pln-k-pair h1 { font-size: 1.4rem; margin: 16px 0 8px; }
.pln-k-pair p { font-size: 0.9rem; color: var(--text-muted); }
.pln-k-pair input { width: 100%; font-size: 1.8rem; text-align: center; letter-spacing: 6px; padding: 12px; border-radius: 14px; border: 1px solid var(--border-color); margin: 16px 0; font-family: inherit; }
.pln-k-pair button { width: 100%; padding: 16px; border: none; border-radius: 14px; background: var(--btn-primary); color: #fff; font-weight: 800; font-size: 1rem; cursor: pointer; font-family: inherit; }
@media (max-width: 760px) {
    .pln-k-main { grid-template-columns: 1fr; }
    .pln-k-clock { font-size: 1.8rem; }
}

/* Mission congés : congés, absences et retards (planning_leaves.js) */
.pln-leave-cell { display: block; margin-bottom: 4px; padding: 4px 6px; border: 1px solid; border-radius: 8px; font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
.pln-leave-cell small { display: block; font-weight: 600; opacity: 0.8; }
.pln-leave-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 12px; padding: 10px 12px; font-size: 0.82rem; font-weight: 600; margin-bottom: 12px; line-height: 1.45; }
.pln-leave-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.pln-leave-row:last-child { border-bottom: none; }
.pln-leave-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pln-leave-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.pln-leave-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.pln-leave-balance { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.pln-leave-balance div { background: #f8fafc; border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.pln-leave-balance span { font-size: 0.68rem; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
.pln-leave-balance small { font-size: 0.7rem; color: var(--text-muted); }
.pln-leave-balance div:first-child { background: #ecfeff; }
.pln-leave-balance div:first-child strong { color: #0e7490; font-size: 1.05rem; }
.pln-leave-info { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; padding: 14px 16px; }
.pln-leave-sel { max-width: 190px; min-height: 0; padding: 6px 8px; font-size: 0.8rem; }
.pln-qualify-opt { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border-color); font-size: 0.88rem; cursor: pointer; }
.pln-qualify-opt small { color: var(--text-muted); font-weight: 600; }
.pln-cal th, .pln-cal td.pln-cal-day { text-align: center; padding: 4px 2px; min-width: 30px; }
.pln-cal th { font-size: 0.62rem; }
.pln-cal-sun { background: #f8fafc; }
.pln-cal-code { display: inline-block; min-width: 26px; padding: 3px 2px; border-radius: 6px; color: #fff; font-size: 0.6rem; font-weight: 900; }
.pln-cal-half { opacity: 0.6; }
.pln-cal-legends { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pln-cal-legend { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 480px) { .pln-leave-actions { grid-template-columns: 1fr; } }

/* ==============================================================
   refonte vague 1 · fondations : BASE ET COMPOSANTS (direction 1 « Marque »)
   Un seul bloc : il redéfinit l'apparence des classes existantes (même logique, mêmes noms)
   et ajoute .bd (badges d'état), .empty (état vide), .site-card et .kpi-row.
   ===================================================================== */

/* --- Typographie : Inter pour le texte et l'interface, Montserrat pour les titres et les chiffres --- */
body {
    font-family: var(--f-text);
    font-weight: 400;
    color: var(--a-fg);
    background-color: var(--a-bg);
    text-rendering: optimizeLegibility;
}
#app { background: var(--a-bg); }
button, input, select, textarea { font-family: inherit; }
/* portée limitée à l'app (les documents PDF générés hors de #app gardent leur police) */
:where(#app, #pln-kiosk, #login-container, #force-pwd-overlay) :is(h1, h2, h3, h4) { font-family: var(--f-title); letter-spacing: -0.02em; line-height: 1.2; }
:where(#app, #pln-kiosk, #login-container, #force-pwd-overlay) h2 { font-weight: 800; }
.font-primary { font-family: var(--f-text); }
.font-secondary { font-family: var(--f-title); font-weight: 800; }
/* Les graisses 900 posées en ligne dans app.js marquent des chiffres et des titres : Montserrat */
:where(#app, #pln-kiosk, #force-pwd-overlay) :is([style*="font-weight:900"], [style*="font-weight: 900"]) { font-family: var(--f-title); }
.num, .dash-score-badge, .dash-dval, .score-ring { font-family: var(--f-title); font-variant-numeric: tabular-nums; }

/* Micro-libellés en MAJUSCULES : casse normale (classes de style.css et styles en ligne des vues) */
.status-indicator, .section-title, .tag, .form-label,
.pln-grid th, .pln-group td, .pln-totals span, .pln-k-section, .pln-leave-balance span {
    text-transform: none; letter-spacing: normal;
}
:is(#main-content, #modal-content, #filter-modal-content) :is([style*="text-transform:uppercase"], [style*="text-transform: uppercase"]):not(input) {
    text-transform: none !important;
    letter-spacing: normal !important;
}
/* ces libellés étaient minuscules (9 à 10 px) parce qu'en capitales : on les rend lisibles */
:is(#main-content, #modal-content, #filter-modal-content) :is([style*="text-transform:uppercase"], [style*="text-transform: uppercase"]):is([style*="font-size:0.6rem"], [style*="font-size:0.62rem"], [style*="font-size:0.65rem"], [style*="font-size:0.68rem"]) {
    font-size: 0.75rem !important;
}

/* --- Focus clavier visible partout --- */
:is(button, a, input, select, textarea, [onclick]):focus-visible { outline: 2px solid var(--o-blue); outline-offset: 2px; }

/* --- Cartes --- */
.card, .dash-card, .checklist-progress {
    background: var(--a-surface);
    border: 1px solid var(--a-line);
    border-radius: var(--r-md);
    box-shadow: var(--a-shadow);
}
.card { padding: 18px 20px; }
.card:active { transform: none; }
.card[onclick] { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.card[onclick]:hover { border-color: color-mix(in srgb, var(--o-blue) 28%, var(--a-line)); }
.card[onclick]:active { transform: scale(0.99); }
.card-title { font-family: var(--f-title); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--a-fg); }
.card-subtitle { font-size: 0.85rem; font-weight: 500; color: var(--a-mute); }
.section-title { font-family: var(--f-text); font-size: 0.85rem; font-weight: 600; color: var(--a-mute); margin: 24px 0 10px; }

/* --- Boutons ---
   .btn-primary garde son rôle historique de bouton standard (secondaire) ; l'action principale
   d'un écran est .btn-large-primary ou .btn-solid. Variantes : .btn-secondary, .btn-ghost, .btn-danger. */
.btn-secondary, .btn-ghost, .btn-danger, .btn-solid { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-solid {
    min-height: 44px; padding: 10px 16px;
    border: 1px solid var(--a-line); border-radius: var(--r-ctl);
    background: var(--a-surface); color: var(--a-fg);
    font-family: var(--f-text); font-size: 0.9rem; font-weight: 600; line-height: 1.2;
    cursor: pointer; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.btn-primary { width: 100%; }
.btn-primary:hover, .btn-secondary:hover { background: var(--a-surface2); }
.btn-primary:active, .btn-secondary:active, .btn-ghost:active, .btn-danger:active, .btn-solid:active { transform: scale(0.98); }
.btn-solid { background: var(--o-grad-btn); color: #fff; border-color: transparent; box-shadow: var(--sh-cta); }
.btn-solid:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--a-link); }
.btn-ghost:hover { background: var(--todo-bg); }
.btn-danger { background: var(--crit-bg); border-color: transparent; color: var(--crit); }
.btn-danger:hover { background: color-mix(in srgb, var(--crit) 14%, var(--crit-bg)); }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 0.82rem; border-radius: var(--r-sm); }
.btn-auto { width: auto; }

.btn-large-primary {
    min-height: 52px; padding: 14px 20px;
    border: none; border-radius: 12px;
    background: var(--o-grad-btn); color: #fff;
    font-family: var(--f-text); font-size: 1rem; font-weight: 700; letter-spacing: 0;
    box-shadow: var(--sh-cta);
}
.btn-large-primary:hover { filter: brightness(1.06); }

.btn-huge { border-radius: 18px; font-family: var(--f-title); font-weight: 800; border: 2px solid transparent; }
.btn-yes { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.btn-no { background: var(--crit-bg); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 35%, transparent); }

/* --- Filtres en pastilles --- */
.filter-btn {
    min-height: 40px; padding: 8px 14px;
    border: 1px solid var(--a-line); border-radius: var(--r-pill);
    background: var(--a-surface); color: var(--a-mute);
    font-family: var(--f-text); font-size: 0.85rem; font-weight: 600;
}
.filter-btn:hover { color: var(--a-fg); border-color: color-mix(in srgb, var(--a-fg) 22%, var(--a-line)); }
.filter-btn.active { background: var(--chip-on-bg); color: var(--chip-on-fg); border-color: var(--chip-on-bg); }

/* --- Champs --- */
.input-primary, .input-light {
    min-height: 44px; padding: 10px 14px;
    border: 1px solid var(--a-line); border-radius: var(--r-ctl);
    background: var(--a-bg); color: var(--a-fg);
    font-family: var(--f-text); font-size: 0.95rem; font-weight: 400;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.input-primary::placeholder, .input-light::placeholder { color: color-mix(in srgb, var(--a-mute) 75%, transparent); }
.input-primary:focus, .input-light:focus { border-color: var(--o-blue); background: var(--a-surface); box-shadow: var(--ring); }
select.input-primary, select.input-light {
    appearance: none; -webkit-appearance: none; padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525B73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
textarea.input-primary, textarea.input-light { min-height: 88px; line-height: 1.45; }
.input-primary.is-error, .input-light.is-error { border-color: var(--crit); box-shadow: 0 0 0 3px var(--crit-bg); }
.form-label { font-size: 0.84rem; font-weight: 600; color: var(--a-fg); margin-bottom: 6px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--o-blue); }

/* Variantes existantes déclarées plus haut : on conserve leurs dimensions */
.filter-btn.lbl-chip { min-height: 44px; padding: 10px 16px; font-size: 0.9rem; }
.input-primary.pln-leave-sel { min-height: 0; padding: 6px 30px 6px 8px; font-size: 0.8rem; }
@media (max-width: 1023px) {
    .btn-primary { min-height: 48px; }
    .btn-large-primary { min-height: 54px; }
    .input-primary, .input-light { min-height: 48px; font-size: 1rem; }
    .card { padding: 16px; }
}
@media (max-width: 599px) {
    .filter-btn { min-height: 44px; }
    .filter-btn.lbl-chip { padding: 8px 14px; font-size: 0.88rem; }
    .filter-btn.haccp-head-btn { min-width: 44px; padding: 0 12px; }
    .filter-btn.lbl-search-toggle { width: 44px; padding: 0; }
    .lbl-cats .filter-btn { padding: 8px 14px; font-size: 0.85rem; }
}

/* --- Modale : centrée sur ordinateur, feuille du bas sur téléphone --- */
.modal-overlay { background: var(--overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 16px; }
.modal-card {
    background: var(--a-surface); color: var(--a-fg);
    width: 100%; max-width: 480px; max-height: calc(100dvh - 32px); overflow-y: auto;
    border: 1px solid var(--a-line); border-radius: var(--r-lg);
    padding: 24px; box-shadow: var(--sh-pop);
    animation: fadeInScale 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-card h3 { font-size: 1.2rem; font-weight: 800; }
@media (max-width: 599px) {
    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal-card {
        max-width: none !important; width: 100%; max-height: 92dvh;
        border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: none;
        padding: 26px 20px calc(20px + env(safe-area-inset-bottom, 0px));
        animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .modal-card::before {
        content: ''; display: block; width: 40px; height: 4px; border-radius: 99px;
        background: var(--a-line); margin: -14px auto 16px;
    }
}

/* --- Badges d'état : Conforme, À faire, En retard, Critique, À vérifier (IA) --- */
.bd {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
    border-radius: var(--r-pill); font-family: var(--f-text); font-size: 0.75rem; font-weight: 600;
    white-space: nowrap; background: var(--neu-bg); color: var(--neu); line-height: 1;
}
.bd::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.bd.ok { background: var(--ok-bg); color: var(--ok); }
.bd.todo { background: var(--todo-bg); color: var(--todo); }
.bd.late { background: var(--late-bg); color: var(--late); }
.bd.crit { background: var(--crit-bg); color: var(--crit); }
.bd.ia { background: var(--ia-bg); color: var(--ia); }
.bd.lg { height: 30px; padding: 0 12px; font-size: 0.82rem; }
.bd.nodot::before { display: none; }

/* anciennes pastilles alignées sur les états */
.status-indicator { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 600; background: var(--neu-bg); color: var(--neu); }
.status-todo { background: var(--todo-bg); color: var(--todo); }
.status-late { background: var(--crit-bg); color: var(--crit); }
.status-done { background: var(--ok-bg); color: var(--ok); }
.tag, .audit-chip, .tag-status { border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 600; padding: 3px 10px; }
.tag-urgent { background: var(--crit-bg); color: var(--crit); }
.tag-normal { background: var(--neu-bg); color: var(--neu); }
.tag-moyen { background: var(--late-bg); color: var(--late); }
.badge-suspect { background: var(--ia-bg); color: var(--ia); border: none; border-radius: var(--r-pill); font-weight: 600; font-size: 0.75rem; padding: 3px 10px; }

/* carré d'icône teinté selon l'état */
.ico-sq { width: 36px; height: 36px; border-radius: var(--r-ctl); display: inline-grid; place-items: center; flex: none; background: var(--neu-bg); color: var(--neu); font-size: 0.95rem; }
.ico-sq.ok { background: var(--ok-bg); color: var(--ok); }
.ico-sq.todo { background: var(--todo-bg); color: var(--todo); }
.ico-sq.late { background: var(--late-bg); color: var(--late); }
.ico-sq.crit { background: var(--crit-bg); color: var(--crit); }
.ico-sq.ia { background: var(--ia-bg); color: var(--ia); }

/* --- Barres de progression : dégradé de marque --- */
.progress-bar { height: 6px; background: var(--a-surface2); }
.progress-fill { background: var(--o-grad); }

/* --- État vide : halo, icône, phrase, action (helper uiEmpty dans app.js) --- */
.empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 10px; padding: 32px 20px;
    background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow);
}
.card > .empty, .empty.flat { background: none; border: none; box-shadow: none; padding: 16px 8px; }
.desktop-grid > .empty, .today-grid > .empty { grid-column: 1 / -1; }
.empty-halo {
    width: 64px; height: 64px; border-radius: var(--r-lg); display: grid; place-items: center;
    background: var(--todo-bg); color: var(--a-link); font-size: 1.5rem; margin-bottom: 6px;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--todo-bg) 45%, transparent);
}
.empty-title { font-family: var(--f-title); font-size: 1.02rem; font-weight: 700; color: var(--a-fg); margin: 0; letter-spacing: -0.01em; }
.empty-text { font-size: 0.88rem; line-height: 1.5; color: var(--a-mute); margin: 0; max-width: 38ch; }
.empty-action { margin-top: 6px; }
.empty-action .btn-primary { width: auto; }

/* --- Aujourd'hui : une carte par site (remplace les cartes beiges ou jaunes « en cours ») --- */
.site-card { padding: 16px 18px; margin-bottom: 12px; }
.site-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.site-card-name { display: flex; align-items: center; gap: 10px; font-family: var(--f-title); font-size: 1rem; font-weight: 700; color: var(--a-fg); min-width: 0; }
.site-card-name i { color: var(--a-mute); font-size: 0.9rem; }
.site-card.is-crit { border-color: color-mix(in srgb, var(--crit) 35%, var(--a-line)); }
.site-card.is-warn { border-color: color-mix(in srgb, var(--late) 28%, var(--a-line)); }
.site-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.site-stat { background: var(--a-surface2); border-radius: var(--r-ctl); padding: 10px 8px; text-align: center; }
.site-stat-l { font-size: 0.78rem; font-weight: 600; color: var(--a-mute); margin-bottom: 2px; }
.site-stat-v { font-family: var(--f-title); font-size: 1.25rem; font-weight: 800; color: var(--a-fg); font-variant-numeric: tabular-nums; }
.site-stat-v.is-ok { color: var(--ok); }
.site-stat-v.is-none { color: var(--a-mute); font-weight: 600; }
.site-stat-v.is-late { color: var(--late); }
.site-stat-v.is-crit { color: var(--crit); }
/* cartes « En retard » et « Escaladées » d'un site : liseré d'état, plus de fond beige */
.card.is-late { border-color: color-mix(in srgb, var(--late) 40%, var(--a-line)); box-shadow: inset 0 3px 0 var(--late), var(--a-shadow); }
.card.is-crit { border-color: color-mix(in srgb, var(--crit) 40%, var(--a-line)); box-shadow: inset 0 3px 0 var(--crit), var(--a-shadow); }
.card.is-late .section-title { color: var(--late); }
.card.is-crit .section-title { color: var(--crit); }
/* rappel reçu (accueil) */
.notice-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--a-surface); border: 1px solid color-mix(in srgb, var(--late) 30%, var(--a-line)); border-radius: var(--r-md); box-shadow: var(--a-shadow); }
.notice-row-k { font-size: 0.78rem; font-weight: 600; color: var(--late); }
.notice-row-t { font-weight: 600; color: var(--a-fg); margin-top: 2px; font-size: 0.92rem; }
.notice-row button { background: none; border: none; cursor: pointer; color: var(--a-mute); min-width: 44px; min-height: 44px; flex-shrink: 0; }

/* --- Tableau de bord : compteurs compacts (« Rien à signaler » quand la valeur est nulle) --- */
.kpi-strip { display: flex; flex-direction: column; gap: 8px; align-self: start; }
.kpi-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px;
    background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow);
    color: var(--a-fg); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, transform 0.1s;
}
.kpi-row:hover { border-color: color-mix(in srgb, var(--o-blue) 28%, var(--a-line)); }
.kpi-row:active { transform: scale(0.99); }
.kpi-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kpi-row-l { font-size: 0.9rem; font-weight: 600; }
.kpi-row-s { font-size: 0.8rem; color: var(--a-mute); }
.kpi-row-v { font-family: var(--f-title); font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-row.crit { border-color: color-mix(in srgb, var(--crit) 35%, var(--a-line)); }
.kpi-row.crit .kpi-row-v { color: var(--crit); }
.kpi-row.late { border-color: color-mix(in srgb, var(--late) 35%, var(--a-line)); }
.kpi-row.late .kpi-row-v { color: var(--late); }
.kpi-row.ia { border-color: color-mix(in srgb, var(--ia) 35%, var(--a-line)); background: linear-gradient(180deg, var(--ia-bg), var(--a-surface) 75%); }
.kpi-row.ia .kpi-row-v { color: var(--ia); }
.kpi-row.is-calm { min-height: 48px; padding: 6px 14px; box-shadow: none; }
.kpi-row.is-calm .ico-sq { width: 30px; height: 30px; font-size: 0.8rem; }
.kpi-row.is-calm .kpi-row-txt { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
.kpi-row.is-calm .kpi-row-s { color: var(--ok); font-weight: 500; }

/* --- Divers alignés sur les jetons --- */
.photo-placeholder { background: var(--a-surface2); border-color: var(--a-line); border-radius: var(--r-md); color: var(--a-mute); font-weight: 600; }
.photo-placeholder.mandatory { border-color: var(--late); color: var(--late); }
.photo-placeholder.has-photo { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.question-text { font-family: var(--f-title); font-weight: 700; letter-spacing: -0.015em; color: var(--a-fg); }
.dash-dtitle { font-weight: 500; color: var(--a-mute); font-size: 0.85rem; }
.dash-data-row { border-bottom-color: var(--a-line); }
.score-good { color: var(--ok); }
.score-avg { color: var(--late); }
.score-bad { color: var(--crit); }

/* --- Connexion : nuit de marque avec halo bleu, comme le site --- */
.login-overlay { background: radial-gradient(900px 520px at 85% -10%, rgba(0, 71, 255, 0.45), transparent 70%), radial-gradient(600px 400px at 0% 110%, rgba(40, 198, 244, 0.16), transparent 70%), var(--o-night); }
.login-card { border-radius: var(--r-lg); padding: 36px 28px; box-shadow: var(--sh-pop); }
/* Borne de pointage : même couple de polices */
#pln-kiosk { font-family: var(--f-text); }
.pln-k-clock, .pln-k-site, .pln-k-name { font-family: var(--f-title); }
/* fin refonte vague 1 · fondations */
/* ========================================
   refonte vague 1 · nettoyage
   Onglets du Planning (une ligne, défilement interne sur mobile, aide « ? Convention »)
   et bandeau Vigie compact (Aujourd'hui et HACCP). Variables de :root uniquement.
   ======================================== */
.pln-tabs-bar { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.pln-tabs-scroll { position: relative; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pln-tabs-scroll::-webkit-scrollbar { display: none; }
.pln-tabs-scroll.fade-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.pln-tabs-scroll.fade-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px); mask-image: linear-gradient(to right, transparent, #000 36px); }
.pln-tabs-scroll.fade-start.fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.pln-tabs { display: flex; gap: 2px; width: max-content; }
.pln-tab {
    display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px;
    border: none; border-radius: 10px 10px 0 0; background: none; cursor: pointer; white-space: nowrap;
    font-family: inherit; font-size: 0.86rem; font-weight: 700; color: var(--text-muted);
    transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.pln-tab i { font-size: 0.92em; opacity: 0.85; }
.pln-tab:hover { color: var(--text-main); background: rgba(17, 24, 39, 0.04); }
.pln-tab.active { color: var(--text-main); box-shadow: inset 0 -2px 0 var(--btn-primary); }
.pln-tab.active i { color: var(--btn-primary); opacity: 1; }
.pln-tab:focus-visible, .pln-tab-help:focus-visible { outline: 2px solid var(--btn-primary); outline-offset: -2px; }
.pln-tab-help {
    flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; padding: 0 13px; margin: 4px 0; border: 1px solid var(--border-color); border-radius: 100px;
    background: var(--bg-card); color: var(--text-muted); cursor: pointer; white-space: nowrap;
    font-family: inherit; font-size: 0.8rem; font-weight: 700; transition: color 0.15s, border-color 0.15s;
}
.pln-tab-help:hover { color: var(--text-main); border-color: rgba(17, 24, 39, 0.2); }
.pln-tab-help.active { color: var(--btn-primary); border-color: var(--btn-primary); }
@media (max-width: 600px) {
    .pln-tab { padding: 0 11px; font-size: 0.84rem; }
    .pln-tab-help { width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; border-radius: 50%; font-size: 1rem; }
    .pln-tab-help span { display: none; }
}

.vigie-bar { margin-bottom: 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-left: 3px solid var(--alert-critical); border-radius: 12px; font-size: 0.84rem; overflow: hidden; }
.vigie-bar-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-left: 12px; }
.vigie-bar-ico { flex: none; color: var(--alert-critical); font-size: 0.95rem; }
.vigie-bar-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; color: var(--text-main); }
.vigie-bar-txt strong { font-weight: 800; color: var(--crit); }
.vigie-bar-more { color: var(--text-muted); }
.vigie-bar-link, .vigie-bar-close { flex: none; min-height: 44px; border: none; background: none; cursor: pointer; font-family: inherit; }
.vigie-bar-link { padding: 0 8px; font-size: 0.82rem; font-weight: 800; color: var(--btn-primary); }
.vigie-bar-link:hover { text-decoration: underline; }
.vigie-bar-close { width: 44px; color: var(--text-muted); font-size: 0.95rem; border-left: 1px solid var(--border-color); }
.vigie-bar-close:hover { color: var(--text-main); background: rgba(17, 24, 39, 0.04); }
.vigie-bar-link:focus-visible, .vigie-bar-close:focus-visible, .vigie-bar-list button:focus-visible { outline: 2px solid var(--btn-primary); outline-offset: -2px; }
.vigie-bar-list { list-style: none; margin: 0; padding: 2px 12px 6px 36px; border-top: 1px solid var(--border-color); }
.vigie-bar-list li + li { border-top: 1px solid var(--border-color); }
.vigie-bar-list span { display: block; padding: 10px 0; font-weight: 600; color: var(--text-main); }
.vigie-bar-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: none; background: none; cursor: pointer; text-align: left; font-family: inherit; font-size: inherit; }
.vigie-bar-list button span { padding: 0; }
.vigie-bar-list button i { color: var(--text-muted); font-size: 0.75rem; }
@media (max-width: 480px) { .vigie-bar-more { display: none; } }

/* ========================================
   refonte vague 1 · navigation
   Barre latérale sombre (1024 px et plus), fine barre du haut, barre du bas à 5 entrées
   et feuille de choix (mobile), sélecteur de l'espace Tâches.
   Variables locales --nv-* reliées aux jetons de marque de :root (refonte vague 2-3 · socle) :
   --s-* pour la barre latérale (toujours sombre), --a-link pour l'onglet actif (suit le mode).
   ======================================== */
#app, #app-main, #bottom-nav, #nav-sheet {
    --nv-night: var(--s-bg);
    --nv-fg: var(--s-fg);
    --nv-mute: var(--s-mute);
    --nv-line: var(--s-line);
    --nv-icon: var(--s-icon);
    --nv-cyan: var(--s-icon-on);
    --nv-blue: var(--a-link);
    --nv-font: var(--f-text);
    --nv-title: var(--f-title);
}
#app-sidebar [hidden], #bottom-nav [hidden], #nav-sheet [hidden] { display: none !important; }

/* Colonne principale : en-tête + contenu (la barre latérale est à côté sur ordinateur) */
#app-main { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; position: relative; }
#app-sidebar { display: none; }
.topbar-title { display: none; }

/* --- Barre du bas (mobile) --- */
#bottom-nav {
    display: flex; align-items: stretch; justify-content: space-around;
    padding: 6px 4px 0; gap: 0;
    height: auto; min-height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--a-surface) 92%, transparent);
    border-top: 1px solid var(--border-color);
    color: var(--a-fg);
}
.bnav-item {
    flex: 1 1 0; min-width: 0; min-height: 56px; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 6px 1px; background: none; border: 0; border-radius: 12px; cursor: pointer;
    color: var(--text-muted); font: 600 11px/1.1 var(--nv-font); letter-spacing: -0.1px;
    transition: color .15s ease, background-color .15s ease;
}
.bnav-item:active { background: var(--todo-bg); }
.bnav-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; }
.bnav-ico i { font-size: 1.15rem; }
/* Libellé long (« Mon planning » sur petit écran) : retour à la ligne plutôt que des points de suspension */
.bnav-label { max-width: 100%; text-align: center; text-wrap: balance; }
.bnav-item.active { color: var(--nv-blue); }
.bnav-item.active::before {
    content: ''; position: absolute; top: -6px; left: 50%; width: 28px; height: 3px; margin-left: -14px;
    border-radius: 0 0 3px 3px; background: var(--nv-blue);
}
.bnav-item[aria-expanded="true"] { color: var(--nv-blue); background: var(--todo-bg); }
.bnav-ico .notification-badge { top: -6px; right: -12px; }
.bnav-item:focus-visible, .nav-sheet-item:focus-visible, .tasks-switch-btn:focus-visible { outline: 2px solid var(--nv-blue); outline-offset: 2px; }

/* --- Feuille de choix (Terrain, Équipe, Plus) --- */
.nav-sheet { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; justify-content: flex-end; }
.nav-sheet-backdrop { position: absolute; inset: 0; background: var(--overlay); animation: nvFade .18s ease; }
.nav-sheet-panel {
    position: relative; background: var(--a-surface); color: var(--a-fg); border-radius: 20px 20px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(5, 8, 26, 0.18);
    animation: nvUp .22s cubic-bezier(.2, .8, .2, 1);
    max-height: 80vh; overflow-y: auto;
}
.nav-sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--a-line); margin: 0 auto 8px; }
.nav-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.nav-sheet-head h2 { font: 800 1.1rem/1.2 var(--nv-title); margin: 0; color: var(--text-main); }
.nav-sheet-close { width: 44px; height: 44px; border: 0; background: none; border-radius: 12px; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; }
.nav-sheet-list { display: flex; flex-direction: column; gap: 4px; }
.nav-sheet-item {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 14px;
    border: 0; border-radius: 12px; background: none; cursor: pointer; text-decoration: none; text-align: left;
    color: var(--text-main); font: 600 15px/1.2 var(--nv-font);
}
.nav-sheet-item i { width: 22px; text-align: center; font-size: 1.05rem; color: var(--text-muted); }
.nav-sheet-item:active { background: var(--a-surface2); }
.nav-sheet-item.active { background: var(--todo-bg); color: var(--nv-blue); }
.nav-sheet-item.active i { color: var(--nv-blue); }
.nav-sheet-item .notification-badge { position: static; margin-left: auto; border: 0; border-radius: 999px; padding: 0 7px; width: auto; }
.nav-sheet-danger, .nav-sheet-danger i { color: var(--crit); }
@keyframes nvUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes nvFade { from { opacity: 0; } to { opacity: 1; } }

/* --- Espace « Tâches » : titre + sélecteur Plan d'action / To Do --- */
.tasks-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tasks-head h2 { margin: 0; }
.tasks-switch { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--a-surface2); border: 1px solid var(--a-line); max-width: 100%; }
.tasks-switch-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px;
    border: 0; border-radius: 9px; background: none; cursor: pointer; white-space: nowrap;
    color: var(--text-muted); font: 600 14px/1 var(--nv-font);
}
.tasks-switch-btn i { font-size: 0.85rem; }
.tasks-switch-btn.active { background: var(--a-surface); color: var(--a-fg); box-shadow: 0 0 0 1px var(--a-line), 0 1px 2px rgba(5, 8, 26, 0.08); }
@media (max-width: 1023px) {
    .tasks-switch { display: flex; width: 100%; }
    .tasks-switch-btn { flex: 1 1 0; min-height: 44px; }
}

/* --- Ordinateur : barre latérale + contenu pleine largeur --- */
@media (min-width: 1024px) {
    #app { flex-direction: row; max-width: none; margin: 0; box-shadow: none; }
    #bottom-nav, .nav-sheet { display: none !important; }

    #app-sidebar {
        display: flex; flex-direction: column; gap: 18px; flex: none; width: 256px; height: 100%;
        padding: 20px 14px 14px; overflow-y: auto; z-index: 20;
        background: radial-gradient(420px 260px at 0 0, rgba(0, 71, 255, 0.22), transparent 70%), var(--nv-night);
        color: var(--nv-fg); border-right: 1px solid var(--nv-line);
        font-family: var(--nv-font); scrollbar-width: none;
    }
    #app-sidebar::-webkit-scrollbar { display: none; }
    .side-logo { display: inline-flex; align-self: flex-start; padding: 4px 10px 2px; background: none; border: 0; cursor: pointer; border-radius: 8px; }
    .side-logo img { display: block; height: 26px; width: auto; }

    .side-site {
        display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px;
        border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .side-site-pin { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: rgba(0, 71, 255, 0.3); color: #9FDDF8; font-size: 0.85rem; }
    #app-sidebar .restaurant-dropdown {
        flex: 1; min-width: 0; max-width: none; height: 36px; padding: 0 22px 0 0;
        background-color: transparent; border: 0; border-radius: 0; box-shadow: none;
        color: #fff; font: 600 13.5px/1.2 var(--nv-font);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237E88AC'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7' /%3E%3C/svg%3E");
        background-position: right 2px center;
    }
    #app-sidebar .restaurant-dropdown:disabled { opacity: 1; cursor: default; background-image: none; }
    #app-sidebar .restaurant-dropdown option { color: #111827; background: #fff; }

    .side-nav { display: flex; flex-direction: column; gap: 18px; }
    .side-group { display: flex; flex-direction: column; gap: 2px; }
    .side-group-label { font-size: 12px; font-weight: 600; color: var(--nv-mute); padding: 0 12px 6px; }
    .side-link {
        display: flex; align-items: center; gap: 12px; width: 100%; height: 42px; padding: 0 12px;
        border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; text-decoration: none;
        color: var(--nv-fg); font: 500 14px/1 var(--nv-font);
        transition: background-color .15s ease, color .15s ease;
    }
    .side-link i { width: 18px; text-align: center; font-size: 0.95rem; color: var(--nv-icon); transition: color .15s ease; }
    .side-link:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
    .side-link.active {
        background: linear-gradient(90deg, rgba(0, 71, 255, 0.36), rgba(0, 71, 255, 0.12));
        color: #fff; box-shadow: inset 0 0 0 1px rgba(110, 150, 255, 0.32);
    }
    .side-link.active i { color: var(--nv-cyan); }
    .side-link:focus-visible, .side-logo:focus-visible, .side-user-btn:focus-visible, .side-logout:focus-visible, #app-sidebar .restaurant-dropdown:focus-visible {
        outline: 2px solid #28C6F4; outline-offset: 2px;
    }
    .side-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .side-link .side-count {
        position: static; flex: none; min-width: 22px; height: 20px; padding: 0 7px; width: auto;
        border: 0; border-radius: 999px; font: 700 11.5px/20px var(--nv-font);
    }

    .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
    .side-user { display: flex; align-items: center; gap: 4px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--nv-line); }
    .side-user-btn {
        flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 8px; min-height: 48px;
        border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; color: #fff;
    }
    .side-user-btn:hover, .side-user-btn.active { background: rgba(255, 255, 255, 0.06); }
    .side-avatar {
        width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center;
        background: var(--o-grad); color: var(--on-solid); font: 700 12px var(--nv-title);
    }
    .side-user-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .side-user-txt b { font: 600 13px/1.2 var(--nv-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .side-user-txt small { font: 500 12px/1.2 var(--nv-font); color: var(--nv-mute); }
    .side-logout {
        width: 40px; height: 40px; flex: none; border: 0; border-radius: 10px; background: none; cursor: pointer;
        color: var(--nv-icon); font-size: 0.95rem;
    }
    .side-logout:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }

    /* Fine barre du haut : titre de l'écran, synchronisation, notifications */
    #app-header { height: 60px; padding: 0 32px; flex: none; }
    #header-title { display: none !important; }
    .topbar-title { display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 14px/1.2 var(--nv-font); }
    .topbar-crumb { color: var(--text-muted); white-space: nowrap; }
    .topbar-crumb::after { content: '\203A'; margin-left: 8px; color: var(--a-mute); }
    .topbar-crumb:empty { display: none; }
    .topbar-h { font-weight: 700; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #app-header .header-actions { flex: none; gap: 6px; }
    #app-header .header-actions > button { width: 40px; height: 40px; border-radius: 10px !important; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; }
    #app-header .header-actions > button:hover { background: var(--a-surface2) !important; }

    /* Contenu : toute la largeur restante, écrans limités à 1200 px et centrés */
    #main-content { padding: 28px 32px 48px; }
    #main-content > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-sheet-panel, .nav-sheet-backdrop { animation: none; }
}

/* refonte vague 1 · corrections de recette : onglets du Planning sur deux lignes au besoin sur
   ordinateur (pas de défilement caché à la souris) ; lignes de réglages qui passent à la ligne sur mobile */
@media (min-width: 1024px) {
    .pln-tabs-scroll, .pln-tabs-scroll.fade-start, .pln-tabs-scroll.fade-end { overflow: visible; -webkit-mask-image: none; mask-image: none; }
    .pln-tabs { flex-wrap: wrap; width: auto; }
}
.pln-dayrow { flex-wrap: wrap; row-gap: 6px; }


/* ==============================================================
   refonte vague 2-3 · audits
   Liste des audits (.au-list), exécution d'un audit ou d'une mission (.au-run), transition de
   section (.au-trans), synthèse (.au-done), fenêtres anomalie et contrôle photo (.au-mod).
   Jetons --a-* et états uniquement : clair « cuisine » par défaut, lisible en sombre (.m-dark).
   ============================================================== */

/* --- Commun --- */
/* fond de la zone de contenu de ces écrans : suit le mode posé sur #app-main (clair ou sombre) */
#main-content:has(> .au-list, > .au-run, > .au-trans, > .au-done) { background: var(--a-bg); }
.au-mute { color: var(--a-mute); }
.au-small { font-size: 0.8rem; line-height: 1.45; }
.au-t-ok { color: var(--ok); }
.au-t-late { color: var(--late); }
.au-t-crit { color: var(--crit); }
.au-card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow); color: var(--a-fg); }
.au-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--a-line); }
.au-card-h h3 { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 0.95rem/1.2 var(--f-title); color: var(--a-fg); }
.au-card-h h3 i { color: var(--a-mute); font-size: 0.9rem; }
.au-card-b { padding: 14px 18px 16px; }
.au-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
    border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface); color: var(--a-fg);
    font: 600 0.9rem/1.2 var(--f-text); white-space: nowrap; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.au-btn:hover:not(:disabled) { background: var(--a-surface2); }
.au-btn:disabled { opacity: 0.45; cursor: default; }
.au-btn-sm { min-height: 36px; padding: 0 12px; font-size: 0.82rem; border-radius: var(--r-sm); }
.au-btn-lg { min-height: 52px; font-size: 0.95rem; }
.au-btn-ghost { background: transparent; border-color: transparent; color: var(--a-link); }
.au-bar { display: block; height: 8px; border-radius: var(--r-pill); background: var(--a-surface2); overflow: hidden; }
.au-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--o-grad); transition: width 0.3s ease; }
.au-bar-sm { height: 5px; margin-top: 6px; max-width: 260px; }
.au-bar-ok > i { background: var(--ok); }
.au-bar-late > i { background: var(--late); }
.au-bar-crit > i { background: var(--crit); }

/* --- Liste des audits : regroupée par site --- */
.au-list { max-width: 980px; margin-left: auto; margin-right: auto; }
.au-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.au-head h2 { margin: 0; color: var(--a-fg); }
.au-sub { margin: 4px 0 0; font-size: 0.9rem; color: var(--a-mute); }
.au-group { margin-bottom: 16px; overflow: hidden; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow); }
.au-group-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--a-line); }
.au-pin { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--todo-bg); color: var(--todo); font-size: 0.8rem; }
.au-group-h h3 { flex: 1; min-width: 0; margin: 0; font: 700 1rem/1.2 var(--f-title); color: var(--a-fg); }
.au-count { font-size: 0.8rem; color: var(--a-mute); white-space: nowrap; }
.au-rows > .au-row + .au-row { border-top: 1px solid var(--a-line); }
.au-row { display: flex; align-items: center; gap: 8px; padding-right: 14px; }
.au-row-main {
    flex: 1; min-width: 0; min-height: 68px; display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    background: none; border: 0; text-align: left; color: inherit; font: inherit;
}
button.au-row-main { cursor: pointer; transition: background 0.15s; }
button.au-row-main:hover { background: var(--a-surface2); }
.au-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--todo-bg); color: var(--todo); font-size: 1rem; }
.au-row.is-done .au-ico { background: var(--ok-bg); color: var(--ok); }
.au-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.au-row-txt b { font: 700 0.98rem/1.25 var(--f-title); color: var(--a-fg); overflow-wrap: anywhere; }
.au-row-txt small { font-size: 0.82rem; line-height: 1.35; color: var(--a-mute); }
.au-row-st { flex: none; }
.au-go { flex: none; display: inline-flex; align-items: center; gap: 8px; color: var(--a-link); font-size: 0.88rem; font-weight: 600; }
.au-go i { font-size: 0.8rem; }
.au-row-act { flex: none; display: flex; align-items: center; gap: 8px; }
.au-consult { padding: 4px 10px; border: 1px dashed var(--a-line); border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 600; color: var(--a-mute); white-space: nowrap; }
.au-sent { white-space: nowrap; }
.au-consult-page { display: none; }
@media (max-width: 599px) {
    .au-row .au-consult { display: none; }
    .au-consult-page { display: inline-block; flex: none; }
    .au-head { margin-bottom: 14px; }
    .au-group-h { padding: 12px 14px; }
    .au-row { flex-wrap: wrap; padding-right: 0; }
    .au-row-main { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; padding: 12px 14px; }
    .au-ico { grid-column: 1; grid-row: 1 / span 2; }
    .au-row-txt { grid-column: 2; grid-row: 1; }
    .au-row-st { grid-column: 2; grid-row: 2; }
    .au-go { grid-column: 3; grid-row: 1 / span 2; }
    .au-go-l { display: none; }
    .au-row-act { width: 100%; padding: 0 14px 12px 66px; flex-wrap: wrap; }
}

/* --- Exécution d'un audit ou d'une mission --- */
.au-run { display: flex; flex-direction: column; gap: 14px; }
.au-dhead, .au-secs, .au-side { display: none; }
.au-top { display: flex; align-items: center; gap: 12px; }
.au-x {
    width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px;
    border: 1px solid var(--a-line); background: var(--a-surface); color: var(--a-fg); font-size: 1.05rem; cursor: pointer;
}
.au-top-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.au-top-t b { font: 700 0.98rem/1.2 var(--f-title); color: var(--a-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-top-t small { font-size: 0.8rem; color: var(--a-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-lang { flex: none; display: flex; gap: 4px; }
.au-lang button {
    min-width: 44px; height: 44px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--a-line);
    background: var(--a-surface); color: var(--a-mute); font: 700 0.8rem var(--f-text); cursor: pointer;
}
.au-lang button.on { background: var(--a-fg); color: var(--a-bg); border-color: transparent; }
.au-prog-l { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 0.82rem; color: var(--a-mute); font-variant-numeric: tabular-nums; }
.au-q { padding: 18px; }
.au-qtag { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.82rem; color: var(--a-mute); }
.au-qtext { margin: 0; font: 700 1.3rem/1.3 var(--f-title); letter-spacing: -0.015em; color: var(--a-fg); text-wrap: balance; overflow-wrap: anywhere; }
.au-critb { margin-top: 10px; }
.au-photo {
    display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 16px; padding: 12px;
    border: 1.5px dashed var(--a-line); border-radius: 14px; background: var(--a-surface2);
}
.au-photo:has(.au-ai.ok) { border-color: color-mix(in srgb, var(--ok) 55%, var(--a-line)); background: var(--ok-bg); }
.au-photo:has(.au-ai.crit) { border-color: color-mix(in srgb, var(--crit) 55%, var(--a-line)); background: var(--crit-bg); }
.au-shot {
    position: relative; height: 96px; padding: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--a-line); border-radius: 10px; background: var(--a-surface); color: var(--a-link); font: 600 0.82rem var(--f-text); cursor: pointer;
}
.au-shot > i { font-size: 1.3rem; }
.au-shot .au-shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.au-shot.has-photo .au-shot-txt {
    position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 4px 6px; border-radius: 6px;
    background: var(--a-surface); color: var(--a-link); font-size: 0.75rem; text-align: center;
}
.au-photo-txt b { display: block; font-size: 0.88rem; color: var(--a-fg); }
.au-photo-txt p { margin: 4px 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--a-mute); }
.au-ai { margin: 0; font-size: 0.82rem; line-height: 1.4; }
.au-ai b { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; }
.au-ai p { margin: 4px 0 0; color: var(--a-mute); }
.au-ai.ok b { color: var(--ok); }
.au-ai.crit b { color: var(--crit); }
.au-ai.wait, .au-ai.mute { color: var(--a-mute); }
/* Oui / Non : 104 px de haut, espacés de 12 px (missions To Do : « Ne s'applique pas ici » en dessous, .tna-btn) */
.au-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.au-ynb {
    height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border: 2px solid transparent; border-radius: 18px; font: 800 1.25rem var(--f-title); cursor: pointer; transition: transform 0.1s, filter 0.15s;
}
.au-ynb i { font-size: 1.7rem; }
.au-ynb:active { transform: scale(0.97); }
.au-y { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.au-n { background: var(--crit-bg); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.au-foot { display: flex; margin-top: 18px; }
.au-back { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 0; background: none; border: 0; color: var(--a-link); font: 600 0.88rem var(--f-text); cursor: pointer; }
.au-dhead-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.au-dhead-row h2 { margin: 0; font-size: 1.5rem; color: var(--a-fg); }
.au-dhead-site { color: var(--a-mute); }
.au-secs-bar { padding: 12px 18px 4px; }
.au-li { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; }
.au-li-q { max-height: 52vh; overflow: auto; }
.au-li li { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; font-size: 0.88rem; color: var(--a-fg); }
.au-li li.on { background: var(--todo-bg); color: var(--a-link); font-weight: 600; }
.au-li-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-li-n { font-size: 0.78rem; color: var(--a-mute); }
.au-li li.on .au-li-n { color: var(--a-link); }
.au-ck { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--a-line); font-size: 0.65rem; }
.au-li li.on .au-ck { border-color: var(--a-link); }
.au-li li.done .au-ck { background: var(--ok); border-color: var(--ok); color: var(--a-surface); }
.au-rel-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.au-ring { --v: 0; --c: var(--ok); width: 62px; height: 62px; flex: none; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--a-surface2) 0); }
.au-ring.au-t-late { --c: var(--late); }
.au-ring.au-t-crit { --c: var(--crit); }
.au-ring b { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--a-surface); color: var(--a-fg); font: 800 1rem var(--f-title); }
.au-rel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 0.84rem; }
.au-rel li { display: flex; align-items: flex-start; gap: 8px; color: var(--a-fg); }
.au-rel li i { width: 16px; flex: none; margin-top: 2px; }
.au-rel li.ok i { color: var(--ok); }
.au-rel li.warn i { color: var(--late); }
.au-rel li.mute { color: var(--a-mute); }
.au-seg { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--a-surface2); border: 1px solid var(--a-line); }
.au-seg button { flex: 1; min-height: 40px; border: 0; border-radius: 8px; background: none; color: var(--a-mute); font: 600 0.88rem var(--f-text); cursor: pointer; }
.au-seg button.on { background: var(--a-surface); color: var(--a-fg); box-shadow: 0 0 0 1px var(--a-line); }

/* Mobile : plein écran pendant l'exécution (barre du bas et en-tête masquées, rétablies à la sortie) */
@media (max-width: 1023px) {
    body:has(#main-content .au-full) #bottom-nav, body:has(#main-content .au-full) #app-header { display: none !important; }
    #main-content:has(> .au-full) { padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(100px + env(safe-area-inset-bottom, 0px)); }
    #main-content:has(> .au-done) { padding-left: 16px; padding-right: 16px; }
    /* pied fixé en bas de la colonne de l'application (#app-main est le bloc positionné) */
    .au-run .au-foot {
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--a-surface); border-top: 1px solid var(--a-line);
    }
    .au-run .au-foot .au-btn { flex: 1; }
}
@media (max-width: 380px) {
    .au-photo { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
    .au-qtext { font-size: 1.18rem; }
}

/* Ordinateur : 3 colonnes (sections, question, fiabilité en direct) ; 2 colonnes entre 1024 et 1279 px */
@media (min-width: 1024px) {
    .au-run {
        display: grid; gap: 18px; align-items: start;
        grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto auto 1fr;
        grid-template-areas: "head head" "secs q" "side q";
    }
    .au-top, .au-prog { display: none; }
    .au-dhead { display: block; grid-area: head; }
    .au-secs { display: block; grid-area: secs; }
    .au-q { grid-area: q; padding: 24px; }
    .au-side { display: flex; flex-direction: column; gap: 18px; grid-area: side; }
    .au-qtext { font-size: 1.5rem; }
    .au-photo { grid-template-columns: 150px minmax(0, 1fr); }
}
@media (min-width: 1280px) {
    .au-run { grid-template-columns: 250px minmax(0, 1fr) 270px; grid-template-rows: auto 1fr; grid-template-areas: "head head head" "secs q side"; }
    /* Colonne de droite vide (employé sans choix de langue) : la question prend la place */
    .au-run:not(:has(.au-side > *)) { grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "head head" "secs q"; }
}

/* --- Transition de section --- */
.au-trans { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.au-trans-in { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 20px; text-align: center; }
.au-trans-ico { width: 84px; height: 84px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 24px; background: var(--todo-bg); color: var(--todo); font-size: 2.1rem; }
.au-trans-k { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--a-link); }
.au-trans h2 { margin: 0; font-size: 1.5rem; color: var(--a-fg); }
.au-trans p { margin: 0; }
.au-cta { width: 100%; max-width: 320px; margin-top: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.au-trans .au-btn-ghost { margin-top: 4px; }

/* --- Synthèse de fin --- */
.au-done { display: flex; justify-content: center; padding-top: 8px; }
.au-done-in { width: 100%; max-width: 540px; display: flex; flex-direction: column; align-items: center; padding: 28px 22px; text-align: center; }
.au-done-ico { width: 72px; height: 72px; margin-bottom: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--ok-bg); color: var(--ok); font-size: 2rem; }
.au-done-in h2 { margin: 0 0 4px; color: var(--a-fg); }
.au-done-in > p { margin: 0; }
.au-kpis { width: 100%; margin: 22px 0 18px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; overflow: hidden; border: 1px solid var(--a-line); border-radius: var(--r-md); }
.au-kpis > div { display: flex; flex-direction: column; gap: 6px; padding: 14px 8px; }
.au-kpis > div + div { border-left: 1px solid var(--a-line); }
.au-kpis b { font: 800 1.75rem/1 var(--f-title); }
.au-kpis small { font-size: 0.76rem; color: var(--a-mute); }
.au-note { width: 100%; display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; font-size: 0.86rem; text-align: left; }
.au-note > i { margin-top: 2px; }
.au-note > span { display: flex; flex-direction: column; gap: 2px; }
.au-note small { font-size: 0.78rem; color: var(--a-mute); }
.au-note.ok { background: var(--ok-bg); color: var(--ok); }
.au-note.late { background: var(--late-bg); color: var(--late); }
.au-note.ia { background: var(--ia-bg); color: var(--ia); font-weight: 600; }
.au-blocks { width: 100%; margin: 8px 0 6px; text-align: left; }
.au-blocks h3 { margin: 0 0 10px; font: 600 0.85rem var(--f-text); color: var(--a-mute); text-align: center; }
.au-blk { margin-bottom: 12px; }
.au-blk-h { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: 0.86rem; font-weight: 600; color: var(--a-fg); }
.au-blk small { display: block; margin-top: 3px; font-size: 0.74rem; color: var(--a-mute); }
.au-status { min-height: 22px; margin-top: 10px; font-size: 0.86rem; }
.au-st { color: var(--a-mute); }
.au-st.ok { color: var(--ok); font-weight: 700; }
.au-st.late { color: var(--late); font-weight: 700; }

/* --- Fenêtres : anomalie (réponse Non) et contrôle photo --- */
.au-mod-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.au-mod-h h3 { margin: 0; color: var(--a-fg); }
.au-mod-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 1rem; }
.au-mod-ico.crit { background: var(--crit-bg); color: var(--crit); }
.au-mod-ico.ia { background: var(--ia-bg); color: var(--ia); }
.au-mod-q { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.4; color: var(--a-mute); }
.au-sop { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: var(--late-bg); }
.au-sop-k { margin-bottom: 4px; font-size: 0.78rem; font-weight: 700; color: var(--late); }
.au-sop-t { font-size: 0.88rem; font-weight: 700; color: var(--a-fg); }
.au-sop-s { margin-top: 4px; font-size: 0.8rem; color: var(--a-mute); }
.au-mod .photo-placeholder { min-height: 64px; font: 600 0.9rem var(--f-text); }
.photo-placeholder .au-shot-img { width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: 8px; }
.au-mod .form-label { display: block; margin-top: 4px; }
.au-mod .input-primary { width: 100%; }
.au-mod-hint { margin: 8px 0 0; font-size: 0.8rem; color: var(--a-mute); }
.au-mod-ai { min-height: 24px; margin-top: 4px; }
.au-mod-act { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.au-mod-act button { width: 100%; min-height: 52px; }
.au-mod-act button:disabled { opacity: 0.45; cursor: not-allowed; filter: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
    .au-bar > i, .au-ynb, button.au-row-main { transition: none; }
}

/* ==============================================================
   vague 9 · todo-na : « Ne s'applique pas ici » (missions To Do)
   Bouton discret sous Oui / Non, fenêtre de raison à puces, badge neutre dans la fiche,
   encadré des signalements dans la fiche du modèle (Réglages). Jetons --a-*, --neu, --late.
   ============================================================== */
.tna-btn {
    width: 100%; min-height: 44px; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 14px; border: 1px dashed var(--a-line); border-radius: 12px; background: transparent;
    color: var(--a-mute); font: 600 0.9rem var(--f-text); cursor: pointer;
}
.tna-btn:hover { color: var(--a-fg); border-color: color-mix(in srgb, var(--a-fg) 25%, var(--a-line)); background: var(--a-surface2); }
.tna-btn:focus-visible, .tna-chip:focus-visible { outline: 2px solid var(--a-link); outline-offset: 2px; }
.au-mod-ico.tna-ico { background: var(--neu-bg); color: var(--neu); }
.tna-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.tna-chip {
    min-height: 44px; padding: 0 14px; border: 1px solid var(--a-line); border-radius: var(--r-pill);
    background: var(--a-surface); color: var(--a-fg); font: 600 0.86rem var(--f-text); cursor: pointer;
}
.tna-chip[aria-pressed="true"] { background: var(--chip-on-bg); color: var(--chip-on-fg); border-color: transparent; }
.au-note.tna-note { background: var(--neu-bg); color: var(--neu); }
.cs-ans.is-na { box-shadow: inset 3px 0 0 var(--neu); }
.cs-ans.is-na .cs-rem { background: var(--neu-bg); }
.cs-ans.is-na .cs-rem b { color: var(--neu); }
.tna-panel .tna-step { background: var(--late-bg); color: var(--late); }
.tna-list { list-style: none; margin: 0; padding: 0; }
.tna-it { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 0; }
.tna-it + .tna-it { border-top: 1px solid var(--a-line); }
.tna-it-t { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tna-it-t b { font-size: 0.9rem; color: var(--a-fg); overflow-wrap: anywhere; }
.tna-it-t small { font-size: 0.8rem; line-height: 1.4; color: var(--a-mute); }
.tna-site { display: inline-flex; align-items: center; gap: 4px; }
.tna-site .rg-i { width: 13px; height: 13px; }
.tna-it-a { display: flex; flex-wrap: wrap; gap: 8px; }
.tna-it-a:empty { display: none; }
.tna-it-a .rg-btn { min-height: 44px; }
.tna-sub { margin: 4px 0 0; font: 700 0.86rem var(--f-title); color: var(--a-mute); }
@media (max-width: 560px) { .tna-it-a, .tna-it-a .rg-btn { width: 100%; } .tna-it-a .rg-btn { justify-content: center; } }
/* fin vague 9 · todo-na */

/* ==============================================================
   refonte vague 2-3 · tableau-de-bord
   Tableau de bord et Analyse de fiabilité des équipes (direction 1, maquettes dashDesk / dashMob).
   Uniquement les jetons --a-*, --ok, --todo, --late, --crit, --ia, --neu : correct en .m-dark et en .m-light.
   Mise en page pilotée par la largeur réelle de l'écran (requêtes de conteneur sur .db-view).
   ============================================================== */
.db-view { container: db / inline-size; display: flex; flex-direction: column; gap: 18px; color: var(--a-fg); font-family: var(--f-text); }
.db-view .num { font-variant-numeric: tabular-nums; }
.db-view #global-back-bar { margin-bottom: -6px; }
.db-view #global-back-bar button { color: var(--a-link) !important; min-height: 44px; margin-bottom: 0 !important; }
.db-title { margin: 0; font-size: 1.45rem; color: var(--a-fg); }
@media (min-width: 1024px) { .db-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.db-meta { font-size: 0.8rem; color: var(--a-mute); }

/* Alertes de crise (escalades, tâches non attribuées) */
.db-alerts { display: flex; flex-direction: column; gap: 8px; }
.db-alert { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; text-align: left; cursor: pointer;
    background: var(--a-surface); color: var(--a-fg); border: 1px solid var(--a-line); border-radius: var(--r-md); font: inherit; box-shadow: var(--a-shadow); }
.db-alert.is-crit { border-color: color-mix(in srgb, var(--crit) 45%, var(--a-line)); background: linear-gradient(90deg, var(--crit-bg), var(--a-surface) 70%); }
.db-alert.is-late { border-color: color-mix(in srgb, var(--late) 45%, var(--a-line)); background: linear-gradient(90deg, var(--late-bg), var(--a-surface) 70%); }
.db-alert-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.db-alert-txt b { font-weight: 600; font-size: 0.92rem; }
.db-alert-txt small { font-size: 0.8rem; color: var(--a-mute); }
.db-alert > .fa-chevron-right { color: var(--a-mute); font-size: 0.8rem; }

/* Période : contrôle segmenté */
.db-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.db-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--a-surface); border: 1px solid var(--a-line); }
.db-seg-b { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px;
    background: transparent; color: var(--a-mute); font: 600 0.84rem/1 var(--f-text); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.db-seg-b:hover { color: var(--a-fg); }
.db-seg-b.on { background: var(--a-surface2); color: var(--a-fg); box-shadow: 0 0 0 1px var(--a-line); }
.db-seg-b .db-s { display: none; }
.db-seg-b i { font-size: 0.82rem; }
.db-range { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--a-mute); }
.db-range i { font-size: 0.8rem; }
.db-head-btn { margin-left: auto; min-height: 40px; }
.db-custom { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); gap: 10px; margin-top: -6px; }
.db-custom label { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; font-weight: 600; color: var(--a-mute); }
.db-custom .input-primary { min-height: 44px; padding: 8px 12px; font-size: 0.9rem; color-scheme: inherit; }

/* Indicateurs */
.db-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.db-kpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px; text-align: left; font: inherit; color: var(--a-fg);
    background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow); }
button.db-kpi { cursor: pointer; transition: border-color .15s, transform .1s; }
button.db-kpi:hover { border-color: color-mix(in srgb, var(--a-link) 40%, var(--a-line)); }
button.db-kpi:active { transform: scale(0.99); }
.db-kpi-t { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--a-mute); }
.db-kpi-t i { width: 16px; text-align: center; font-size: 0.85rem; }
.db-kpi-v { font: 800 2rem/1 var(--f-title); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.db-kpi-v small { font-size: 1.1rem; font-weight: 700; letter-spacing: 0; }
.db-kpi-v.is-empty { font: 600 1rem/1.25 var(--f-text); color: var(--a-mute); letter-spacing: 0; min-height: 32px; display: flex; align-items: center; }
.db-kpi.is-ok .db-kpi-v { color: var(--ok); }
.db-kpi.is-late .db-kpi-v { color: var(--late); }
.db-kpi.is-ia { border-color: color-mix(in srgb, var(--ia) 40%, var(--a-line)); background: linear-gradient(180deg, var(--ia-bg), var(--a-surface) 70%); }
.db-kpi.is-ia .db-kpi-v, .db-kpi.is-ia .db-kpi-t i { color: var(--ia); }
.db-kpi-d { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 0.78rem; color: var(--a-mute); }
.db-kpi-d b { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.db-kpi-d b i { font-size: 0.68rem; }
.db-kpi-d .is-up { color: var(--ok); }
.db-kpi-d .is-dn { color: var(--late); }
.db-kpi-d .is-flat { color: var(--a-fg); }
.db-kpi-s { font-size: 0.78rem; color: var(--a-mute); }
.db-kpi-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; min-height: 32px; padding: 0 12px; border-radius: 9px;
    border: 1px solid var(--a-line); background: var(--a-surface); color: var(--a-fg); font-size: 0.8rem; font-weight: 600; }
.db-kpi-cta i { font-size: 0.7rem; color: var(--a-mute); }
.db-spark { display: block; width: 100%; height: 34px; margin-top: auto; padding-top: 4px; overflow: visible; }
.db-spark polyline { fill: none; stroke: var(--a-link); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.db-spark.is-ok polyline { stroke: var(--ok); }
.db-spark.is-late polyline { stroke: var(--late); }
.db-skel { display: block; width: 92px; height: 26px; border-radius: 8px; background: linear-gradient(90deg, var(--a-surface2), color-mix(in srgb, var(--a-surface2) 40%, var(--a-surface)), var(--a-surface2)); background-size: 200% 100%; animation: dbSkel 1.2s linear infinite; }
@keyframes dbSkel { to { background-position: -200% 0; } }

/* Cartes */
.db-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.db-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.db-card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow); min-width: 0; color: var(--a-fg); }
.db-card-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 14px 18px; border-bottom: 1px solid var(--a-line); }
.db-card-h h3 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 700 0.98rem/1.3 var(--f-title); color: var(--a-fg); letter-spacing: -0.01em; }
.db-card-h h3 > i { color: var(--ia); font-size: 0.9rem; }
.db-card-b { padding: 16px 18px; }
.db-ct { font: 700 0.75rem/1 var(--f-text); padding: 4px 8px; border-radius: var(--r-pill); background: var(--a-surface2); color: var(--a-mute); }
.db-lk { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px; border: 0; background: none; cursor: pointer;
    color: var(--a-link); font: 600 0.82rem/1.2 var(--f-text); text-align: right; }
.db-lk i { font-size: 0.72rem; }
.db-lk:hover { text-decoration: underline; }
.db-pb { display: block; height: 6px; border-radius: 99px; background: var(--a-surface2); overflow: hidden; }
.db-pb i { display: block; height: 100%; border-radius: inherit; background: var(--a-link); }
.db-pb.is-ok i { background: var(--ok); } .db-pb.is-late i { background: var(--late); } .db-pb.is-crit i { background: var(--crit); }
.db-mini-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--a-surface2); }
.db-mini-seg button { min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--a-mute); font: 600 0.78rem/1 var(--f-text); }
.db-mini-seg button.on { background: var(--a-surface); color: var(--a-fg); box-shadow: 0 0 0 1px var(--a-line); }

/* Courbe SVG (dessinée à l'échelle 1:1) */
.db-chart-wrap { padding: 12px 14px 10px; }
.db-chart { width: 100%; min-height: 190px; }
.db-chart-svg { display: block; overflow: visible; }
.db-ch-grid { stroke: var(--a-line); stroke-width: 1; }
.db-ch-t { fill: var(--a-mute); font: 500 11px var(--f-text); font-variant-numeric: tabular-nums; }
.db-ch-area { fill: color-mix(in srgb, var(--a-link) 16%, transparent); }
.db-ch-line { fill: none; stroke: var(--a-link); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.db-ch-goal { fill: none; stroke: var(--ok); stroke-width: 1.5; stroke-dasharray: 5 5; }
.db-ch-pt { fill: var(--a-surface); stroke: var(--a-link); stroke-width: 2; cursor: default; }
.db-ch-pt:hover { stroke-width: 3.5; }
.db-ch-dot { fill: var(--a-link); stroke: var(--a-surface); stroke-width: 3; }
.db-ch-end { fill: var(--a-fg); font: 800 14px var(--f-title); paint-order: stroke; stroke: var(--a-surface); stroke-width: 4px; stroke-linejoin: round; }
.db-ch-bar { fill: color-mix(in srgb, var(--crit) 70%, transparent); }
.db-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.78rem; color: var(--a-mute); }
.db-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.db-lg-line { width: 14px; height: 3px; border-radius: 2px; background: var(--a-link); }
.db-lg-goal { width: 16px; border-top: 2px dashed var(--ok); }
.db-chart-empty { display: flex; align-items: center; gap: 14px; min-height: 120px; padding: 8px 4px; }
.db-chart-empty p { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.db-chart-empty b { font-weight: 600; }
.db-chart-empty span { font-size: 0.84rem; color: var(--a-mute); }

/* Classement des sites */
.db-rank { display: flex; flex-direction: column; gap: 14px; }
.db-rank-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 0.86rem; }
.db-rank-row.is-cur .db-rank-name { color: var(--a-link); }
.db-rank-p { font: 700 0.75rem var(--f-title); color: var(--a-mute); text-align: center; }
.db-rank-n { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.db-rank-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-rank-n small { font-size: 0.76rem; color: var(--a-mute); }
.db-rank-s { display: flex; flex-direction: column; align-items: flex-end; font: 700 0.92rem/1.1 var(--f-title); min-width: 52px; }
.db-rank-s > span { white-space: nowrap; }
.db-rank-s small { font-size: 0.72rem; font-weight: 700; }
.db-rank-s .db-rank-c { font: 500 0.7rem var(--f-text); color: var(--a-mute); margin-top: 2px; white-space: nowrap; }

/* Anneau de score */
.db-ring { --v: 0; --c: var(--neu); width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--a-surface2) 0); }
.db-ring b { width: 42px; height: 42px; border-radius: 50%; background: var(--a-surface); display: grid; place-items: center; font: 800 0.82rem var(--f-title); font-variant-numeric: tabular-nums; color: var(--a-fg); }
.db-ring.is-ok { --c: var(--ok); } .db-ring.is-late { --c: var(--late); } .db-ring.is-crit { --c: var(--crit); }

/* Audits à vérifier */
.db-susp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 18px; border-bottom: 1px solid var(--a-line); }
.db-susp-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.db-susp-b b { font-weight: 600; font-size: 0.92rem; }
.db-susp-b .db-meta { font-size: 0.78rem; }
.db-susp-b ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 0.8rem; color: var(--a-mute); }
.db-susp-b li { display: flex; gap: 7px; align-items: baseline; }
.db-susp-b li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--late); flex: none; transform: translateY(-2px); }
.db-susp-a { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.db-susp-a .btn-solid { min-height: 40px; }
.db-susp-foot { display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-size: 0.84rem; color: var(--a-mute); }

/* Anomalies ouvertes */
.db-anoms { display: flex; flex-direction: column; padding: 4px 0; }
.db-anom { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 9px 18px;
    border: 0; border-top: 1px solid var(--a-line); background: none; color: var(--a-fg); font: inherit; text-align: left; cursor: pointer; }
.db-anom:first-child { border-top: 0; }
.db-anom:hover { background: var(--a-surface2); }
.db-anom-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.db-anom-t b { font-weight: 500; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.db-anom-t small { font-size: 0.76rem; color: var(--a-mute); }
.db-calm { display: flex; align-items: center; gap: 12px; padding: 12px 18px; font-size: 0.88rem; color: var(--a-mute); }

/* Compétences (carte existante, restylée) */
.db-sk { cursor: pointer; transition: border-color .15s; }
.db-sk:hover { border-color: color-mix(in srgb, var(--a-link) 40%, var(--a-line)); }
.db-sk .db-card-h h3 > i { color: var(--a-link); }
.db-sk .db-lk { min-height: 0; font-size: 0.78rem; }
.db-sk-msg { margin: 0; font-size: 0.86rem; color: var(--a-mute); }
.db-sk-msg.is-load { text-align: center; }
.db-sk-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.db-sk-pct { font: 800 2rem/1 var(--f-title); color: var(--ok); letter-spacing: -0.03em; }
.db-sk-pct small { font-size: 1rem; }
.db-sk-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; color: var(--a-mute); }
.db-sk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.db-sk-t { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 6px; border-radius: var(--r-ctl); background: var(--a-surface2); }
.db-sk-t b { font: 800 1.2rem/1.1 var(--f-title); color: var(--a-mute); }
.db-sk-t span { font-size: 0.74rem; font-weight: 600; color: var(--a-mute); }
.db-sk-t.is-late { background: var(--late-bg); } .db-sk-t.is-late b { color: var(--late); }
.db-sk-t.is-todo { background: var(--todo-bg); } .db-sk-t.is-todo b { color: var(--todo); }
.db-sk-t.is-neu b { color: var(--a-fg); }
.db-sk-k { margin: 14px 0 4px; font-size: 0.76rem; font-weight: 600; color: var(--a-mute); }
.db-sk-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 0.84rem; }
.db-sk-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.db-sk-row b { color: var(--a-link); font-weight: 700; }
.db-sk-note { display: flex; gap: 8px; margin: 12px 0 0; padding: 9px 11px; border-radius: var(--r-ctl); background: var(--late-bg); color: var(--late); font-size: 0.8rem; line-height: 1.45; }

/* Sections pleine largeur */
.db-sec { display: flex; flex-direction: column; gap: 12px; }
.db-sec-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.db-sec-h h3 { margin: 0; font: 700 1.05rem/1.3 var(--f-title); color: var(--a-fg); }

/* Détail par site */
.db-sites { display: flex; flex-direction: column; gap: 10px; }
.db-site { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; padding: 14px 16px;
    background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow); }
.db-site.is-crit { box-shadow: inset 3px 0 0 var(--crit), var(--a-shadow); }
.db-site.is-ia { box-shadow: inset 3px 0 0 var(--ia), var(--a-shadow); }
.db-site.is-late { box-shadow: inset 3px 0 0 var(--late), var(--a-shadow); }
.db-site-h { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.db-site-n { display: flex; align-items: center; gap: 8px; min-width: 0; }
.db-site-n i { color: var(--a-mute); font-size: 0.85rem; }
.db-site-n b { font: 700 0.98rem/1.25 var(--f-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-site-m { font-size: 0.76rem; color: var(--a-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-site-sc { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.db-site-sc b { font: 800 1.45rem/1 var(--f-title); }
.db-site-sc small { font-size: 0.72rem; font-weight: 600; color: var(--a-mute); }
.db-site-sc .is-ok, .db-cell .is-ok { color: var(--ok); } .db-site-sc .is-late, .db-cell .is-late { color: var(--late); }
.db-site-sc .is-crit, .db-cell .is-crit { color: var(--crit); } .db-cell .is-ia { color: var(--ia); }
.db-site-sc .is-none, .db-cell .is-none { color: var(--a-mute); font-weight: 600; }
.db-site-none { font-size: 0.86rem; font-weight: 600; color: var(--a-mute); }
.db-cells { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.db-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 8px 4px; border: 0;
    border-radius: var(--r-ctl); background: var(--a-surface2); color: var(--a-fg); font: inherit; cursor: pointer; transition: box-shadow .15s; }
.db-cell:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a-link) 45%, transparent); }
.db-cell > b { font: 800 1.15rem/1 var(--f-title); }
.db-cell small { font-size: 0.72rem; font-weight: 600; color: var(--a-mute); text-align: center; }

/* Non-réalisations */
.db-nr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.db-nr { padding: 14px 16px; }
.db-nr h4 { margin: 0 0 6px; font: 700 0.95rem/1.3 var(--f-title); color: var(--a-fg); }
.db-nr-k { margin: 10px 0 2px; font-size: 0.75rem; font-weight: 600; color: var(--a-mute); }
.db-nr-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--a-line); font-size: 0.84rem; }
.db-nr-n { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-nr-n i { color: var(--a-mute); font-size: 0.78rem; }

/* Analyse de fiabilité des équipes */
.db-fiab-h h2 { margin: 0 0 4px; font-size: 1.45rem; color: var(--a-fg); }
.db-fiab-h p { margin: 0; font-size: 0.88rem; color: var(--a-mute); max-width: 70ch; }
.db-fsum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.db-fs { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-radius: var(--r-md); background: var(--a-surface); border: 1px solid var(--a-line); box-shadow: var(--a-shadow); }
.db-fs b { font: 800 1.6rem/1 var(--f-title); color: var(--a-mute); }
.db-fs span { font-size: 0.84rem; color: var(--a-mute); font-weight: 600; }
.db-fs.is-ok b { color: var(--ok); } .db-fs.is-late b { color: var(--late); } .db-fs.is-crit b { color: var(--crit); }
.db-fr-head { display: none; }
.db-fr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 18px; border-top: 1px solid var(--a-line); align-items: center; }
.db-card-h + .db-fr-head + .db-fr { border-top: 0; }
.db-fr-who { grid-column: 1 / 2; display: flex; align-items: center; gap: 12px; min-width: 0; }
.db-fr-who span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.db-fr-who b { font-weight: 600; font-size: 0.92rem; }
.db-fr-who small { font-size: 0.76rem; color: var(--a-mute); overflow: hidden; text-overflow: ellipsis; }
.db-fr-st { justify-self: end; }
.db-fr-m { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 10px; border-radius: var(--r-ctl); background: var(--a-surface2); }
.db-fr-m > small { font-size: 0.72rem; font-weight: 600; color: var(--a-mute); }
.db-fr-m > .num { font: 700 0.92rem/1.2 var(--f-title); }
.db-fr-m .num.is-none { font: 500 0.82rem var(--f-text); color: var(--a-mute); }
.db-fr-m .is-crit { color: var(--crit); } .db-fr-m .is-ok { color: var(--ok); }
.db-fr-m .db-fr-x { font-weight: 500; font-size: 0.7rem; }
.db-fr-m .db-pb { margin-top: 3px; }

/* Largeurs moyennes : 4 indicateurs sur une ligne, sites en ligne */
@container db (min-width: 700px) {
    .db-fsum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .db-cells { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@container db (min-width: 900px) {
    .db-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .db-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
    .db-site { grid-template-columns: minmax(170px, 1.1fr) 92px minmax(0, 3.4fr); }
    .db-cells { grid-column: auto; }
    .db-fr-head { display: grid; grid-template-columns: minmax(0, 2.2fr) 140px repeat(4, minmax(0, 1fr)); gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--a-line);
        font-size: 0.74rem; font-weight: 600; color: var(--a-mute); }
    .db-fr { grid-template-columns: minmax(0, 2.2fr) 140px repeat(4, minmax(0, 1fr)); }
    .db-card-h + .db-fr-head + .db-fr { border-top: 0; }
    .db-fr-head + .db-fr { border-top: 0; }
    .db-fr-who { grid-column: auto; }
    .db-fr-st { justify-self: start; }
    .db-fr-m { padding: 0; background: none; }
    .db-fr-m > small:first-child { display: none; }
}
/* Téléphone : libellés courts, cibles de 44 px, une seule colonne */
@container db (max-width: 560px) {
    .db-head { gap: 8px; }
    .db-seg { display: flex; width: 100%; }
    .db-seg-b { flex: 1 1 0; min-height: 44px; padding: 0 6px; }
    .db-seg-b .db-l { display: none; }
    .db-seg-b .db-s { display: inline; }
    .db-range { font-size: 0.8rem; }
    .db-head-btn { margin-left: 0; width: 100%; min-height: 44px; }
    .db-kpis { gap: 10px; }
    .db-kpi { padding: 14px; }
    .db-kpi-v { font-size: 1.65rem; }
    .db-kpi-v small { font-size: 0.95rem; }
    .db-card-h { padding: 12px 14px; }
    .db-card-b { padding: 14px; }
    .db-chart-wrap { padding: 10px 6px 6px; }
    .db-mini-seg button { min-height: 44px; padding: 0 14px; }
    .db-lk { min-height: 44px; }
    .db-susp { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
    .db-susp-a { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
    .db-susp-a .btn-solid { min-height: 44px; padding: 0 18px; }
    .db-susp-foot, .db-calm { padding: 12px 14px; }
    .db-anom { padding: 9px 14px; min-height: 56px; }
    .db-site { padding: 12px; }
    .db-fr { padding: 14px; }
    .db-fr-who { grid-column: 1 / -1; }
    .db-fr-st { grid-column: 1 / -1; justify-self: start; margin: -8px 0 0 66px; }
}
@media (prefers-reduced-motion: reduce) { .db-skel { animation: none; } }
/* fin refonte vague 2-3 · tableau-de-bord */

/* ==============================================================
   refonte vague 2-3 · aujourdhui
   Écran « Aujourd'hui » (direction 1, todayDesk / todayMob) : en-tête, file « À traiter maintenant »,
   avancement du jour, prochaines échéances, tableau « Vos sites », vue employé.
   Uniquement les jetons --a-* et d'état : correct en mode sombre de pilotage comme en clair.
   ============================================================== */
.td { display: flex; flex-direction: column; gap: 18px; color: var(--a-fg); }
.td-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.td #td-rem:empty { display: none; }
.td #td-rem .notice-row:last-child { margin-bottom: 0; }

/* En-tête */
.td-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.td-hello { min-width: 0; }
.td-hello h2 { margin: 0; font-family: var(--f-title); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--a-fg); }
.td-hello p { margin: 4px 0 0; color: var(--a-mute); font-size: 0.9rem; }
.td-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -8px 0 2px; padding: 0; border: 0; background: none; color: var(--a-link); font-family: var(--f-text); font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.td-head-r { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.td-vig { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--a-mute); }
.td-vig i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); flex: none; }
.td-vig.is-alert i { background: var(--late); box-shadow: 0 0 0 3px var(--late-bg); }
.td-cta { min-height: 44px; }

/* Cartes */
.td-card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow); min-width: 0; overflow: hidden; }
.td-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 18px; border-bottom: 1px solid var(--a-line); }
.td-card-h h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--f-title); font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; color: var(--a-fg); }
.td-ct { padding: 4px 8px; border-radius: var(--r-pill); background: var(--a-surface2); color: var(--a-mute); font: 700 0.75rem/1 var(--f-text); font-variant-numeric: tabular-nums; }
.td-note { font-size: 0.8rem; color: var(--a-mute); }
.td-card-b { padding: 16px 18px; }
.td-mute { margin: 0; font-size: 0.85rem; color: var(--a-mute); }
.td-lk { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--a-link); font-family: var(--f-text); font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.td-lk i { font-size: 0.7rem; }

/* Grille : file + colonne de droite (côte à côte sur grand écran) */
.td-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.td-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; min-width: 0; }
@media (min-width: 1280px) {
    .td-grid { grid-template-columns: minmax(0, 1fr) 300px; }
    .td-side { grid-template-columns: minmax(0, 1fr); }
}

/* File « À traiter maintenant » */
.td-list { list-style: none; margin: 0; padding: 0; }
.td-row { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 104px 150px; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--a-line); }
.td-list > .td-row:last-child { border-bottom: 1px solid var(--a-line); }
.td-q > :last-child { border-bottom: 0; }
.td-row-t { min-width: 0; }
.td-row-t b { display: block; font-size: 0.9rem; font-weight: 600; line-height: 1.3; color: var(--a-fg); overflow-wrap: anywhere; }
.td-m { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--a-mute); overflow-wrap: anywhere; }
.td-mm { display: none; }
.td-row .bd { justify-self: start; }
.td-act { justify-self: end; width: auto; min-height: 40px; white-space: nowrap; }
.td-row .td-chev { display: none; color: var(--a-mute); font-size: 0.8rem; }
.td-okrow, .td-note-row { grid-template-columns: 36px minmax(0, 1fr); font-size: 0.88rem; color: var(--a-mute); }
.td-more { display: none; }

/* Avancement et échéances */
.td-prog { display: grid; gap: 14px; }
.td-prog-l { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 0.82rem; }
.td-prog-l b { font-weight: 600; }
.td-prog-l .num { color: var(--a-mute); }
.td-pb { display: block; height: 6px; border-radius: 99px; background: var(--a-surface2); overflow: hidden; }
.td-pb i { display: block; height: 100%; border-radius: inherit; background: var(--o-grad); }
.td-pb.ok i { background: var(--ok); }
.td-pb.late i { background: var(--late); }
.td-pb.crit i { background: var(--crit); }
.td-next { list-style: none; margin: 0; padding: 0; }
.td-next li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--a-line); font-size: 0.82rem; }
.td-next li:first-child { border-top: 0; padding-top: 0; }
.td-next li:last-child { padding-bottom: 0; }
.td-next-h { font-family: var(--f-title); font-weight: 700; }
.td-next small { display: block; margin-top: 1px; font-size: 0.75rem; color: var(--a-mute); }

/* Vos sites */
.td-tbl { overflow-x: auto; }
table.td-sites { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.td-sites th, table.td-sites td { padding: 10px 18px; border-bottom: 1px solid var(--a-line); text-align: left; vertical-align: middle; }
table.td-sites thead th { font-size: 0.75rem; font-weight: 600; color: var(--a-mute); white-space: nowrap; }
table.td-sites tbody tr:last-child > * { border-bottom: 0; }
.td-srow { cursor: pointer; transition: background 0.15s; }
.td-srow:hover { background: var(--a-surface2); }
.td-srow:focus-visible { outline: 2px solid var(--o-blue); outline-offset: -2px; }
.td-nm { font-weight: 600; color: var(--a-fg); }
.td-nm span { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.td-nm i { color: var(--a-mute); font-size: 0.85rem; }
.td-mini { display: grid; grid-template-columns: 40px 64px; gap: 4px 8px; align-items: center; font-variant-numeric: tabular-nums; }
.td-mini small { grid-column: 1 / -1; font-size: 0.72rem; color: var(--a-mute); white-space: nowrap; }
.td-tk { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.td-tk small { font-size: 0.72rem; color: var(--a-mute); white-space: nowrap; }
.td-tk small.is-crit { color: var(--crit); }
.td-tk small.is-late { color: var(--late); }
.td-nil { font-size: 0.78rem; color: var(--a-mute); white-space: nowrap; }
.td-msites { display: none; list-style: none; margin: 0; padding: 0; }
.td-msite { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--a-line); background: none; color: var(--a-fg); font-family: var(--f-text); font-size: 0.82rem; text-align: left; cursor: pointer; }
.td-msites li:last-child .td-msite { border-bottom: 0; }
.td-msite b { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.9rem; font-weight: 600; }
.td-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--neu); }
.td-dot.ok { background: var(--ok); }
.td-dot.todo { background: var(--todo); }
.td-dot.late { background: var(--late); }
.td-dot.crit { background: var(--crit); }
.td-mm-m { display: inline-flex; align-items: center; gap: 4px; color: var(--a-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.td-mm-m i { font-size: 0.75rem; }

/* États vides et alertes */
.td-empty .empty, .td-onb .empty { padding: 24px 16px; }
.td-warn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0 18px 18px; justify-content: center; font-size: 0.8rem; font-weight: 600; color: var(--crit); }
.td-warn small { flex-basis: 100%; text-align: center; font-family: ui-monospace, Menlo, monospace; font-weight: 400; }
.td-onb { max-width: 520px; width: 100%; margin: 8vh auto 0; }

/* Vue employé */
.td-big { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 64px; font-size: 1.05rem; }
.td-task { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--a-line); }
.td-task:last-child { border-bottom: 0; }
.td-task-t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.td-task-t b { font-size: 0.92rem; font-weight: 600; overflow-wrap: anywhere; }
.td-task-t .td-m i { margin-right: 2px; }
.td-photo { display: block; margin-top: 6px; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-ctl); overflow: hidden; }
.td-photo img { display: block; width: 100%; max-height: 200px; object-fit: cover; }
.td-task-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 6px; }
.td-task-f .td-m { margin: 0; }
.td-task-act { margin-left: auto; min-height: 44px; }
.td-emp-pb { padding: 12px 18px; border-bottom: 1px solid var(--a-line); }
.td-mis { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 18px; border: 0; border-bottom: 1px solid var(--a-line); background: none; color: var(--a-fg); font-family: var(--f-text); text-align: left; cursor: pointer; transition: background 0.15s; }
.td-list li:last-child .td-mis { border-bottom: 0; }
.td-mis:hover { background: var(--a-surface2); }
.td-mis:focus-visible { outline: 2px solid var(--o-blue); outline-offset: -2px; }
.td-mis-t { min-width: 0; }
.td-mis-t b { display: block; font-size: 0.92rem; font-weight: 600; }
.td-mis-c { color: var(--a-mute); font-size: 0.8rem; }
.td-emp .empty { padding: 24px 16px; }

/* Missions de mon shift : bandeau qui explique le filtre (Aujourd'hui, To Do, Plan d'action) */
.shf-band { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px; background: var(--a-surface); color: var(--a-fg); border: 1px solid color-mix(in srgb, var(--todo) 30%, var(--a-line)); border-radius: var(--r-md); box-shadow: var(--a-shadow); }
.tk-view .shf-band { margin-bottom: 16px; }
.shf-band.is-all { border-color: var(--a-line); }
.shf-t { flex: 1 1 220px; min-width: 0; }
.shf-t ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.shf-t li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
.shf-t p { margin: 0; }
.shf-all, .shf-sub { font-size: 0.8rem; color: var(--a-mute); }
.shf-np { font-size: 0.92rem; font-weight: 600; }
.shf-h { white-space: nowrap; }
.shf-tg { flex: none; min-height: 44px; }
@media (max-width: 520px) { .shf-tg { flex: 1 1 100%; } }

/* Tableau des sites plus serré tant que la colonne de contenu est étroite */
@media (max-width: 1279px) {
    table.td-sites th, table.td-sites td { padding: 10px 10px; }
    table.td-sites th:first-child, table.td-sites td:first-child { padding-left: 18px; }
    .td-mini { grid-template-columns: 34px 32px; }
    table.td-sites thead th, .td-mini small, .td-tk small { white-space: normal; }
}
/* Tablette : file pleine largeur, colonnes de boutons plus étroites */
@media (max-width: 1023px) {
    .td-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; }
    .td-act { min-height: 44px; }
}

/* Téléphone : file courte (4 lignes, « Voir les N autres »), lignes entières cliquables, sites compacts */
@media (max-width: 599px) {
    .td { gap: 14px; }
    .td-body { gap: 14px; }
    .td-hello h2 { font-size: 1.5rem; }
    .td-hello p { font-size: 0.85rem; }
    .td-head-r { width: 100%; }
    .td-cta { width: 100%; }
    .td-card-h { padding: 10px 14px; }
    .td-q .td-card-h .td-note { display: none; }
    .td-card-b { padding: 14px; }
    .td-row { grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 12px; padding: 12px 14px; min-height: 60px; }
    .td-row .bd, .td-row .td-m { display: none; }
    .td-mm { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--a-mute); }
    .td-row .td-chev { display: block; grid-column: 3; grid-row: 1; justify-self: end; }
    .td-row .td-act { position: static; width: 0; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; font-size: 0; overflow: visible; grid-column: 3; grid-row: 1; }
    .td-row .td-act::after { content: ''; position: absolute; inset: 0; }
    /* ni transformation ni filtre sur le bouton : ils feraient de lui le bloc conteneur de la zone cliquable */
    .td-row .td-act, .td-row .td-act:hover, .td-row .td-act:active { transform: none; filter: none; }
    .td-row .td-act:focus-visible { outline: none; }
    .td-row:focus-within { outline: 2px solid var(--o-blue); outline-offset: -2px; }
    .td-row:active { background: var(--a-surface2); }
    .td-okrow, .td-note-row { grid-template-columns: 36px minmax(0, 1fr); }
    .td-q:not(.open) .td-xtra { display: none; }
    .td-more { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-bottom: 1px solid var(--a-line); background: none; color: var(--a-link); font-family: var(--f-text); font-size: 0.85rem; font-weight: 600; cursor: pointer; }
    .td-q.open .td-more i { transform: rotate(180deg); }
    .td-side.is-multi { display: none; }
    .td-tbl { display: none; }
    .td-msites { display: block; }
    .td-task { padding: 12px 14px; }
    .td-mis { padding: 12px 14px; grid-template-columns: 36px minmax(0, 1fr) 16px; row-gap: 6px; }
    .td-mis .bd { grid-column: 2; grid-row: 2; justify-self: start; }
    .td-mis .td-mis-c { grid-column: 3; grid-row: 1 / span 2; }
}
/* fin refonte vague 2-3 · aujourdhui */

/* ==============================================================
   refonte vague 2-3 · haccp
   Module HACCP (direction 1 « Marque », maquettes haccpDesk / haccpMob) : onglets au trait,
   créneaux du jour, saisie des relevés en ligne, panneau Étiquettes DLC, vue « tous les sites »,
   listes (étiquettes en cours, réceptions, huiles, registre, conformité, historique).
   Jetons --a-* et états (--ok, --todo, --late, --crit) uniquement : correct en .m-light et .m-dark.
   ===================================================================== */
.hc-view { color: var(--a-fg); }
.hc-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.hc-view .num { font-family: var(--f-title); font-variant-numeric: tabular-nums; }
.hc-view :is(.num, small, b, span).is-crit { color: var(--crit); }
.hc-view :is(.num, small, b, span).is-late { color: var(--late); }
.hc-view :is(.num, small, b, span).is-ok { color: var(--ok); }

/* --- En-tête --- */
.hc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hc-head-txt { min-width: 0; }
.hc-title { margin: 0; font-size: 1.45rem; color: var(--a-fg); }
.hc-sub { margin: 4px 0 0; font-size: 0.86rem; color: var(--a-mute); }
.hc-sub::first-letter { text-transform: uppercase; }
.hc-head-btn { flex: none; }
.hc-back {
    display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -8px 0 4px -6px; padding: 0 8px;
    border: 0; border-radius: var(--r-ctl); background: none; cursor: pointer;
    font: 600 0.9rem var(--f-text); color: var(--a-link);
}
.hc-back:hover { background: var(--todo-bg); }

/* --- Onglets : soulignés (tablette, ordinateur) ; trois boutons (téléphone) --- */
.hc-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--a-line); }
.hc-tab {
    display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; margin-bottom: -1px;
    border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; white-space: nowrap;
    font: 600 0.9rem var(--f-text); color: var(--a-mute); transition: color 0.15s, border-color 0.15s;
}
.hc-tab:hover { color: var(--a-fg); }
.hc-tab.on { color: var(--a-fg); border-bottom-color: var(--a-link); cursor: default; }
.hc-tab .hc-i { width: 17px; height: 17px; }
.hc-tab.on .hc-i { color: var(--a-link); }
.hc-mtabs { display: none; }

/* --- Cartes, notes, chargement --- */
.hc-card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow); min-width: 0; }
.hc-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--a-line); }
.hc-card-h h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; font-weight: 700; color: var(--a-fg); }
.hc-card-meta { font-size: 0.8rem; color: var(--a-mute); white-space: nowrap; }
.hc-card-b { padding: 16px 18px; }
.hc-loading { padding: 28px 16px; text-align: center; font-size: 0.88rem; color: var(--a-mute); }
.hc-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-ctl); font-size: 0.86rem; font-weight: 600; }
.hc-note.late { background: var(--late-bg); color: var(--late); }
.hc-note.crit { background: var(--crit-bg); color: var(--crit); }
.hc-note-in { margin: 12px 18px 0; }
.hc-note-in .hc-note { margin: 0; }
.hc-sync { color: var(--late); font-weight: 600; }
.hc-intro { margin: 0 0 14px; font-size: 0.86rem; color: var(--a-mute); }
.hc-group { display: flex; align-items: center; gap: 6px; margin: 20px 0 8px; font-size: 0.86rem; font-weight: 600; color: var(--a-mute); }
.hc-group:first-child { margin-top: 0; }
.hc-group::first-letter { text-transform: uppercase; }
.hc-group.crit { color: var(--crit); }
.hc-group.late { color: var(--late); }
.hc-group.ok { color: var(--ok); }
.hc-group .num { font-family: var(--f-text); font-weight: 500; }
.hc-chips { margin-bottom: 14px; }
.hc-chips .filter-btn { display: inline-flex; align-items: center; gap: 6px; }
.hc-chips .filter-btn .hc-i { width: 15px; height: 15px; }

/* --- Créneaux du jour --- */
.hc-slots { display: grid; grid-template-columns: repeat(var(--hc-n, 3), minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.hc-slot {
    display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px;
    background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 12px; box-shadow: var(--a-shadow);
}
.hc-slot.on { border-color: var(--a-link); box-shadow: 0 0 0 3px var(--todo-bg); }
.hc-slot.is-crit { border-color: color-mix(in srgb, var(--crit) 45%, var(--a-line)); }
.hc-slot-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-slot-txt b { font: 700 0.92rem var(--f-title); font-variant-numeric: tabular-nums; color: var(--a-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-slot-txt small { font-size: 0.8rem; color: var(--a-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-slot .bd { flex: none; }
@media (min-width: 640px) and (max-width: 1279px) {
    .hc-slot { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 6px; }
    .hc-slot .ico-sq { grid-row: span 2; }
    .hc-slot .bd { justify-self: start; }
}

/* --- Onglet Températures : saisie + panneau DLC --- */
.hc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1280px) { .hc-grid { grid-template-columns: minmax(0, 1fr) 320px; } }

.hc-entry { container-type: inline-size; overflow: hidden; }
.hc-table { display: block; }
.hc-thead { display: none; }
.hc-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 118px 52px; gap: 10px 10px; align-items: center;
    padding: 12px 14px; border-bottom: 1px solid var(--a-line);
}
.hc-row.is-crit { background: color-mix(in srgb, var(--crit-bg) 55%, transparent); }
.hc-eq { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-eq-name {
    align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
    font: 600 0.95rem/1.3 var(--f-text); color: var(--a-fg);
}
.hc-eq-name:hover { color: var(--a-link); text-decoration: underline; text-underline-offset: 3px; }
.hc-eq small { font-size: 0.8rem; color: var(--a-mute); }
.hc-eq small.is-crit { color: var(--crit); }
.hc-last { display: none; }
.hc-in { position: relative; display: flex; align-items: center; }
.hc-temp {
    width: 100%; min-width: 0; height: 52px; padding: 0 34px 0 10px;
    border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-bg); color: var(--a-fg);
    font: 800 1.25rem var(--f-title); text-align: right; font-variant-numeric: tabular-nums;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.hc-temp::placeholder { color: color-mix(in srgb, var(--a-mute) 55%, transparent); font-weight: 700; }
.hc-temp:focus { outline: none; border-color: var(--o-blue); box-shadow: var(--ring); background: var(--a-surface); }
.hc-temp.is-ok { border-color: var(--ok); }
.hc-temp.is-bad { border-color: var(--crit); box-shadow: 0 0 0 3px var(--crit-bg); color: var(--crit); }
.hc-unit { position: absolute; right: 10px; font-size: 0.82rem; color: var(--a-mute); pointer-events: none; }
.hc-row-neg { grid-template-columns: minmax(0, 1fr) 168px 52px; }
.hc-row-neg .hc-in { gap: 6px; }
.hc-row-neg .hc-unit { right: 56px; }
.hc-sign { flex: none; min-width: 44px; min-height: 44px; align-self: stretch; border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface); color: var(--a-fg); font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.hc-sign:focus-visible { outline: none; box-shadow: var(--ring); }
.hc-state { display: flex; align-items: center; justify-content: flex-start; }
.hc-state .bd { display: none; }
.hc-sq {
    width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
    background: var(--a-surface2); border: 1px solid var(--a-line); color: var(--a-mute);
}
.hc-sq.ok { background: var(--ok-solid); border-color: transparent; color: var(--chip-on-fg); }
.hc-sq.done { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.hc-sq.crit { background: var(--crit-solid); border-color: transparent; color: var(--chip-on-fg); }
.hc-corr { grid-column: 1 / -1; display: grid; gap: 6px; }
.hc-corr[hidden] { display: none; }
.hc-corr label { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--crit); }
.hc-corr label .hc-i { width: 16px; height: 16px; }
.hc-corr .input-light { width: 100%; min-height: 48px; }
.hc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; }
.hc-off { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--a-mute); }
.hc-off .hc-i { width: 16px; height: 16px; }
.hc-submit { min-width: 200px; }
.hc-submit.is-idle { background: var(--a-surface2); color: var(--a-mute); box-shadow: none; border-color: var(--a-line); }

/* Saisie : 3 colonnes (sans « Dernier relevé ») dès 520 px, tableau complet dès 720 px */
@container (min-width: 520px) {
    .hc-row { grid-template-columns: minmax(0, 1.4fr) minmax(150px, 1fr) 136px; padding: 10px 18px; }
    .hc-row-neg { grid-template-columns: minmax(0, 1.4fr) minmax(200px, 1fr) 136px; }
    .hc-state .bd { display: inline-flex; }
    .hc-state .hc-sq { display: none; }
    .hc-temp { height: 42px; font-size: 1.05rem; border-radius: var(--r-ctl); }
    .hc-corr { grid-column: 2 / -1; }
    .hc-corr .input-light { min-height: 40px; font-size: 0.88rem; padding: 6px 10px; }
}
@container (min-width: 720px) {
    .hc-thead, .hc-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(150px, 1.1fr) 136px; }
    .hc-row-neg { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(200px, 1.1fr) 136px; }
    .hc-thead { display: grid; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--a-line); font-size: 0.78rem; font-weight: 600; color: var(--a-mute); }
    .hc-last { display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; color: var(--a-mute); min-width: 0; }
    .hc-last .num { font-family: var(--f-text); }
    .hc-last small { font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hc-last.is-crit .num { color: var(--crit); font-weight: 600; }
    .hc-last-m { display: none; }
    .hc-corr { grid-column: 3 / -1; }
}

/* --- Panneau Étiquettes DLC --- */
.hc-link {
    display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 4px; border: 0; background: none; cursor: pointer;
    font: 600 0.84rem var(--f-text); color: var(--a-link);
}
.hc-link .hc-i { width: 15px; height: 15px; }
.hc-stat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--a-line); }
.hc-stat3 b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--a-fg); }
.hc-stat3 small { font-size: 0.76rem; color: var(--a-mute); }
.hc-dlc-list { display: grid; }
.hc-dlc-item { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--a-line); }
.hc-dlc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hc-dlc-top b { min-width: 0; font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-dlc-bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hc-dlc-bot small { font-size: 0.78rem; color: var(--a-mute); }
.hc-ico-btn {
    flex: none; width: 44px; height: 44px; margin: -6px -10px -6px 0; display: grid; place-items: center;
    border: 0; border-radius: var(--r-ctl); background: none; color: var(--a-mute); cursor: pointer;
}
.hc-ico-btn:hover { background: var(--a-surface2); color: var(--a-fg); }
.hc-dlc-none { margin: 14px 0 0; font-size: 0.86rem; color: var(--a-mute); }
.hc-dlc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.hc-dlc-actions button { width: 100%; }
.hc-dlc-actions button:disabled { opacity: 0.5; cursor: default; }
.hc-dlc-row { display: none; }
@media (min-width: 640px) and (max-width: 1279px) {
    .hc-dlc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}

/* --- Vue « tous les sites » --- */
.hc-sites { container-type: inline-size; overflow: hidden; }
.hc-sites-head { display: none; }
.hc-site {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; width: 100%;
    padding: 14px 16px; border: 0; border-bottom: 1px solid var(--a-line); background: none; color: var(--a-fg);
    font: inherit; text-align: left;
}
.hc-site:last-child { border-bottom: 0; }
button.hc-site { cursor: pointer; transition: background 0.15s; }
button.hc-site:hover { background: var(--a-surface2); }
.hc-site-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hc-site-name > .hc-i { color: var(--a-mute); }
.hc-site-name > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-site-name b { font: 700 0.98rem var(--f-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-site-name small { font-size: 0.8rem; color: var(--a-mute); }
.hc-site-prog, .hc-site-nc { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 0.82rem; color: var(--a-mute); }
.hc-site-prog { grid-column: 1; }
.hc-site-nc { grid-column: 2; justify-content: flex-end; }
.hc-site-v { font-size: 1rem; font-weight: 800; color: var(--a-fg); }
.hc-site-prog small { width: 100%; font-size: 0.78rem; }
.hc-bar { display: block; width: 100%; height: 6px; border-radius: 99px; background: var(--a-surface2); overflow: hidden; }
.hc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--o-grad); }
.hc-site-st { grid-column: 2; grid-row: 1; justify-self: end; }
.hc-site-go { display: none; }
.hc-site.is-empty .hc-site-add { justify-self: end; }
.hc-site.is-empty .hc-site-name > .hc-i, .hc-site.is-empty small { color: var(--a-mute); }
.hc-site-add .hc-i { width: 16px; height: 16px; }
@container (min-width: 760px) {
    .hc-sites-head, .hc-site { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) 140px 170px 24px; gap: 16px; }
    .hc-sites-head { display: grid; padding: 10px 18px; border-bottom: 1px solid var(--a-line); font-size: 0.78rem; font-weight: 600; color: var(--a-mute); }
    .hc-site { padding: 14px 18px; }
    .hc-site-prog, .hc-site-nc, .hc-site-st { grid-column: auto; grid-row: auto; }
    .hc-site-nc { justify-content: flex-start; }
    .hc-site-st { justify-self: start; }
    .hc-site-k { display: none; }
    .hc-site-go { display: block; color: var(--a-mute); }
    .hc-site.is-empty { grid-template-columns: minmax(0, 1fr) auto; }
}

/* --- Listes (étiquettes en cours, réceptions, huiles, registre, historique) --- */
.hc-list { overflow: hidden; }
.hc-li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--a-line); min-width: 0; }
.hc-li:last-child { border-bottom: 0; }
.hc-li-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-li-txt b { font-size: 0.92rem; font-weight: 600; color: var(--a-fg); overflow-wrap: anywhere; }
.hc-li-txt small { font-size: 0.8rem; color: var(--a-mute); overflow-wrap: anywhere; }
.hc-li-txt small.is-crit { color: var(--crit); }
.hc-li-act { color: var(--a-fg) !important; }
.hc-li-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hc-li-end b { font-size: 1.05rem; font-weight: 800; color: var(--a-fg); }
.hc-li-end b.is-crit { color: var(--crit); }
.hc-chart { padding: 14px; margin-bottom: 16px; }
.hc-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hc-photo { width: 52px; height: 52px; padding: 0; border: 1px solid var(--a-line); border-radius: var(--r-sm); overflow: hidden; background: var(--a-surface2); cursor: pointer; }
.hc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* étiquettes en cours */
.hc-lab { padding: 12px 16px; border-bottom: 1px solid var(--a-line); }
.hc-lab:last-child { border-bottom: 0; }
.hc-lab.is-crit { background: color-mix(in srgb, var(--crit-bg) 45%, transparent); }
.hc-lab-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hc-lab-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-lab-txt b { font-size: 0.95rem; font-weight: 600; overflow-wrap: anywhere; }
.hc-lab-txt small { font-size: 0.8rem; color: var(--a-mute); }
.hc-lab-txt small.is-late { color: var(--late); }
.hc-lab-dlc { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hc-lab-dlc small { font-family: var(--f-text); font-size: 0.78rem; color: var(--a-mute); }
.hc-lab-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.hc-lab-actions .btn-secondary { min-height: 44px; padding: 6px 8px; }
.hc-lab-actions .hc-i { width: 16px; height: 16px; }
.hc-ok-txt { color: var(--ok); }
.hc-crit-txt { color: var(--crit); }
@media (min-width: 900px) {
    .hc-lab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
    .hc-lab-actions { display: flex; margin-top: 0; }
    .hc-lab-actions .btn-secondary { min-width: 116px; }
}

/* encart d'information de l'imprimante (Bluefy, impression directe indisponible) */
.hc-info { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: var(--todo-bg); border: 1px solid color-mix(in srgb, var(--todo) 25%, transparent); color: var(--todo); }
.hc-info-t { font-size: 0.88rem; font-weight: 700; }
.hc-info-d { font-size: 0.8rem; line-height: 1.4; margin: 6px 0 10px; }
.hc-info.hc-info-d { margin: 0 0 14px; }

/* réceptions et huiles : bouton d'action */
.hc-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.hc-actions-txt { margin: 0; font-size: 0.86rem; color: var(--a-mute); }
.hc-cta { flex: none; }
.hc-fryers { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.hc-fryer { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; }
.hc-fryer.is-crit { border-color: color-mix(in srgb, var(--crit) 40%, var(--a-line)); }
.hc-fryer-n { font-size: 0.9rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-fryer-v { font-size: 1.35rem; font-weight: 800; }
.hc-fryer small { font-size: 0.76rem; color: var(--a-mute); }
/* friteuses du site : contrôle du jour, bouton « Contrôler », mise en place, autres contrôles */
.hc-fryer-bds { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-fryer-go { margin-top: 4px; align-self: stretch; justify-content: center; }
.hc-fryer-go .hc-i { width: 16px; height: 16px; }
.hc-oil-setup { margin-bottom: 16px; flex-wrap: wrap; }
.hc-oil-setup span { flex: 1 1 220px; }
.hc-oil-missed { margin-bottom: 4px; }
.hc-oil-others { margin: -2px 0 8px; font-size: 0.8rem; }
.hc-oil-off { font-weight: 400; font-size: 0.76rem; color: var(--a-mute); }

/* conformité multi-sites */
.hc-comp { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.hc-comp-site { padding: 16px 18px; }
.hc-comp-site.is-late { border-color: color-mix(in srgb, var(--late) 40%, var(--a-line)); }
.hc-comp-site.is-crit { border-color: color-mix(in srgb, var(--crit) 40%, var(--a-line)); }
.hc-comp-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.hc-comp-h b { display: inline-flex; align-items: center; gap: 8px; font: 700 0.98rem var(--f-title); }
.hc-comp-h b .hc-i { color: var(--a-mute); }
.hc-trophy { color: var(--late); }
.hc-trend { font-size: 0.8rem; font-weight: 600; color: var(--a-mute); }
.hc-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hc-kpi { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--r-ctl); background: var(--a-surface2); text-align: center; min-width: 0; }
.hc-kpi b { font-size: 1.15rem; font-weight: 800; color: var(--a-fg); }
.hc-kpi small { font-size: 0.72rem; line-height: 1.2; color: var(--a-mute); }

/* registre */
.hc-reg-tools { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.hc-reg-filters { min-width: 0; flex: 1 1 420px; }
.hc-reg-filters .hc-chips { margin-bottom: 10px; }
.hc-reg-exports { display: flex; gap: 8px; flex: none; }
.hc-reg-exports button { min-width: 140px; }
.hc-reg-time { flex: none; width: 44px; font-size: 0.86rem; font-weight: 700; color: var(--a-mute); }
.hc-reg-detail { color: var(--a-fg) !important; opacity: 0.85; }

/* --- Grille d'étiquettes : pastilles et barre alignées sur les jetons --- */
.hc-view .lbl-chip-n { color: var(--chip-on-fg); }
.hc-view .filter-btn.active .lbl-chip-n { background: var(--a-surface); color: var(--a-fg); }
.hc-view .lbl-tile-count { border-color: var(--a-surface); color: var(--chip-on-fg); box-shadow: 0 2px 8px color-mix(in srgb, var(--o-blue) 35%, transparent); }
.hc-view .lbl-tile-minus span { background: var(--a-fg); color: var(--a-surface); border-color: var(--a-surface); }
.hc-view .lbl-bar { box-shadow: var(--sh-pop); }
.hc-view .lbl-tile-main { border-width: 1px; box-shadow: var(--a-shadow); }
.hc-view .lbl-tile.on .lbl-tile-main { border-color: var(--a-link); box-shadow: 0 0 0 2px var(--a-link); }

/* --- Téléphone --- */
@media (max-width: 639px) {
    .hc-head { margin-bottom: 10px; }
    .hc-title { font-size: 1.2rem; }
    .hc-sub { font-size: 0.78rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hc-head-btn { width: 44px; min-width: 44px; padding: 0; }
    .hc-head-btn-txt { display: none; }
    .hc-tabs { display: none; }
    .hc-mtabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
    .hc-mtabs[hidden] { display: none; }
    .hc-mtabs-more { margin-top: -6px; }
    .hc-mtab {
        min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px;
        border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface); color: var(--a-mute); cursor: pointer;
        font: 600 0.84rem var(--f-text); white-space: nowrap;
    }
    .hc-mtab span { overflow: hidden; text-overflow: ellipsis; }
    .hc-mtab .hc-i { width: 16px; height: 16px; }
    .hc-mtab.on { background: var(--chip-on-bg); color: var(--chip-on-fg); border-color: transparent; }
    .hc-mtab[aria-expanded="true"]:not(.on) { color: var(--a-fg); border-color: var(--a-fg); }
    .hc-slots { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 12px; }
    .hc-slot:not(.on):not(.is-crit) { display: none; }
    .hc-grid { gap: 12px; }
    .hc-card-h { padding: 12px 14px; }
    .hc-card-meta { display: none; }
    .hc-foot { padding: 12px 14px 14px; }
    .hc-off { display: none; }
    .hc-submit { width: 100%; min-height: 54px; font-size: 1rem; }
    .hc-dlc { display: none; }
    .hc-dlc-row {
        display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px;
        border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-surface); box-shadow: var(--a-shadow);
        color: var(--a-fg); font: inherit; text-align: left; cursor: pointer;
    }
    .hc-dlc-row .hc-site-go { display: block; color: var(--a-mute); }
    .hc-actions { flex-direction: column; align-items: stretch; }
    .hc-cta { width: 100%; min-height: 52px; }
    .hc-reg-exports { width: 100%; }
    .hc-reg-exports button { flex: 1; min-width: 0; }
    .hc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hc-li { padding: 12px 14px; gap: 10px; }
    .hc-reg-time { width: 40px; }
    .hc-reg .ico-sq { display: none; }
    .hc-site-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 8px; }
    .hc-site-prog .hc-bar, .hc-site-prog small { grid-column: 1 / -1; }
    .hc-site-nc { align-self: start; flex-direction: column; align-items: flex-end; gap: 0; }
    .hc-site.is-empty { grid-template-columns: minmax(0, 1fr); }
    .hc-site.is-empty .hc-site-add { justify-self: stretch; }
    .hc-mtab.has-cur { color: var(--a-fg); border-color: var(--a-fg); }
}
@media (prefers-reduced-motion: reduce) {
    .hc-tab, .hc-temp, button.hc-site { transition: none; }
}
/* fin refonte vague 2-3 · haccp */

/* ========================================
   refonte vague 2-3 · socle
   Mode par vue (m-dark / m-light posés par navApplyMode), espace Tâches (direction 1, tasksDesk),
   onglets et titre de Réglages, cartes de Paramètres (dont « Apparence »). Jetons --a-* uniquement.
   ======================================== */
/* En-tête mobile et tablette : logo pour fond sombre en mode sombre */
#app-main.m-dark #header-title img { content: url("icons/opset-logo-pilotage-operations-terrain-dark.svg"); }
@media (max-width: 599px) { #app-main.m-dark #header-title img { content: normal; } }
#app-main .restaurant-dropdown { color: var(--a-fg); border-color: var(--a-line); }
#app-main .restaurant-dropdown option { color: var(--al-fg); background: var(--al-surface); }
#app-main.m-dark #sync-btn, #app-main.m-dark #notif-btn { color: var(--a-mute) !important; }
/* Le contenu laisse voir le fond de son mode (pas de flash au changement de vue) */
#main-content { background: transparent; }
.view h2 { color: var(--a-fg); }

/* --- Espace Tâches : barre de filtres en puces --- */
.tk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 12px; margin-bottom: 16px; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.tk-chip {
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px;
    border: 1px solid var(--a-line); border-radius: var(--r-pill); background: var(--a-surface); color: var(--a-mute);
    font: 600 0.85rem/1 var(--f-text); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.tk-chip i { font-size: 0.82rem; }
.tk-chip:hover { color: var(--a-fg); border-color: color-mix(in srgb, var(--a-fg) 22%, var(--a-line)); }
.tk-chip .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); display: inline-grid; place-items: center; font-size: 0.74rem; font-weight: 700; background: var(--a-surface2); color: var(--a-mute); font-variant-numeric: tabular-nums; }
.tk-chip.late .n { background: var(--late-bg); color: var(--late); }
.tk-chip.crit .n { background: var(--crit-bg); color: var(--crit); }
.tk-chip.on { background: var(--todo-bg); color: var(--a-link); border-color: transparent; }
.tk-chip.on .n { background: var(--a-surface); color: var(--a-link); }
.tk-select-btn { margin-left: auto; }
.tk-select-btn.on { border-color: var(--a-link); color: var(--a-link); }
.tk-selbar { align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--r-md); background: var(--todo-bg); border: 1px solid var(--todo-line); color: var(--a-fg); font-weight: 600; font-size: 0.9rem; }

/* --- Liste groupée et colonne de droite --- */
.tk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1200px) { .tk-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
.tk-list, .tk-card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow); min-width: 0; overflow: hidden; }
.tk-list > .empty { border: 0; box-shadow: none; border-radius: 0; }
.tk-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tk-side:empty { display: none; }
.tk-grp { display: flex; align-items: center; gap: 8px; padding: 12px 18px 9px; border-bottom: 1px solid var(--a-line); font: 700 0.84rem/1.2 var(--f-title); color: var(--a-fg); background: var(--a-surface); }
.tk-grp i { font-size: 0.85rem; color: var(--a-mute); }
.tk-grp.late, .tk-grp.late i { color: var(--late); }
.tk-grp.ok i { color: var(--ok); }
.tk-ct { font: 700 0.74rem/1 var(--f-text); padding: 4px 8px; border-radius: var(--r-pill); background: var(--a-surface2); color: var(--a-mute); font-variant-numeric: tabular-nums; }
.tk-item { border-bottom: 1px solid var(--a-line); }
.tk-item:last-child { border-bottom: 0; }
.tk-row {
    display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto 88px auto; gap: 14px; align-items: center;
    padding: 12px 18px; min-height: 64px; cursor: pointer; transition: background .12s;
}
.tk-row:hover, .tk-row:focus-visible { background: color-mix(in srgb, var(--a-surface2) 55%, transparent); }
.tk-item.open .tk-row { background: color-mix(in srgb, var(--a-surface2) 55%, transparent); }
.tk-item.is-done .tk-title { color: var(--a-mute); }
.tk-cb { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--a-line); background: none; padding: 0; display: inline-grid; place-items: center; color: var(--on-solid); font-size: 0.7rem; position: relative; }
button.tk-cb { cursor: pointer; }
button.tk-cb::after { content: ''; position: absolute; inset: -11px; }   /* cible tactile de 44 px */
button.tk-cb:hover { border-color: var(--ok); background: var(--ok-bg); }
.tk-cb.done { background: var(--ok-solid); border-color: var(--ok-solid); }
.tk-cb.arch { border-color: transparent; background: var(--a-surface2); color: var(--a-mute); }
.tk-cb.idle { border-style: dashed; }
.tk-check { width: 22px; height: 22px; margin: 0; cursor: pointer; }
.tk-main { min-width: 0; }
.tk-title { display: block; font-weight: 600; font-size: 0.95rem; color: var(--a-fg); line-height: 1.3; overflow-wrap: anywhere; }
.tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; font-size: 0.8rem; color: var(--a-mute); }
.tk-meta i { font-size: 0.72rem; margin-right: 4px; }
.tk-org { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 0.74rem; font-weight: 600; background: var(--a-surface2); color: var(--a-fg); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tk-org.pa { background: var(--ia-bg); color: var(--ia); }
.tk-site { display: inline-flex; align-items: center; min-width: 0; }
.tk-prio { font-weight: 700; color: var(--crit); }
.tk-av { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font: 700 0.68rem/1 var(--f-title); color: var(--on-solid); background: var(--o-grad); }
.tk-av.none { background: none; border: 1.5px dashed var(--a-line); color: var(--a-mute); font-size: 0.72rem; }
.tk-av.team { background: var(--todo-bg); color: var(--a-link); font-size: 0.7rem; }
.tk-av.more { background: var(--a-surface2); color: var(--a-mute); margin-left: -8px; box-shadow: 0 0 0 2px var(--a-surface); }
.tk-avs { display: inline-flex; align-items: center; }
.tk-avs .tk-av + .tk-av { box-shadow: 0 0 0 2px var(--a-surface); }
.tk-state { display: inline-flex; }
.tk-due { font: 700 0.84rem/1.2 var(--f-title); text-align: right; color: var(--a-fg); font-variant-numeric: tabular-nums; }
.tk-due.late { color: var(--late); }
.tk-due.ok { color: var(--ok); }
.tk-end { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.tk-end:empty { display: none; }
.tk-dur { font-size: 0.8rem; color: var(--a-mute); }
.tk-rem > * { margin-top: 0 !important; }
.tk-act { white-space: nowrap; }
.tk-more { width: 36px; height: 36px; border: 0; border-radius: var(--r-sm); background: none; color: var(--a-mute); cursor: pointer; position: relative; }
.tk-more::after { content: ''; position: absolute; inset: -4px; }
.tk-more:hover { background: var(--a-surface2); color: var(--a-fg); }
.tk-more i { transition: transform .15s; }
.tk-item.open .tk-more i { transform: rotate(180deg); }
.tk-detail { padding: 2px 18px 16px 56px; display: grid; gap: 8px; }
.tk-detail[hidden] { display: none; }
.tk-dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; font-size: 0.86rem; }
.tk-dl span { color: var(--a-mute); }
.tk-dl b { font-weight: 600; color: var(--a-fg); overflow-wrap: anywhere; }
.tk-dl b.late { color: var(--late); }
.tk-dl b.crit { color: var(--crit); }
.tk-alert { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); font-size: 0.84rem; font-weight: 600; }
.tk-alert.crit { background: var(--crit-bg); color: var(--crit); }
.tk-alert.late { background: var(--late-bg); color: var(--late); }
.tk-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-photo { width: 160px; max-width: 100%; height: 110px; object-fit: cover; border-radius: var(--r-ctl); border: 1px solid var(--a-line); cursor: pointer; }
.tk-dacts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.tk-dacts > * { margin-top: 0 !important; }
.tk-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--a-line); }
.tk-card-h h3 { margin: 0; font: 700 0.95rem/1.2 var(--f-title); color: var(--a-fg); display: flex; align-items: center; gap: 8px; }
.tk-card-h h3 i { font-size: 0.85rem; color: var(--a-mute); }
.tk-card.crit .tk-card-h h3 i { color: var(--crit); }
.tk-card.late .tk-card-h h3 i { color: var(--late); }
.tk-card > .empty { padding: 20px 18px; }
.tk-mini { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--a-line); }
.tk-mini:last-child { border-bottom: 0; }
.tk-mini .tk-main { flex: 1; }
.tk-mini > :last-child { flex: none; }
.tk-row.is-link:focus-visible { outline: 2px solid var(--o-blue); outline-offset: -2px; }

/* Tablette et téléphone : ligne sur deux niveaux (case, titre, échéance / état, actions), cibles de 44 px */
@media (max-width: 1023px) {
    .tk-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; padding: 12px 14px; }
    .tk-row > .tk-cb, .tk-row > .tk-check { order: 1; flex: none; margin-top: 1px; }
    .tk-row > .tk-main { order: 2; flex: 1 1 0; }
    .tk-row > .tk-due { order: 3; flex: none; padding-top: 2px; }
    .tk-row::before { content: ''; order: 4; flex-basis: 100%; height: 0; }
    .tk-row > .tk-state { order: 5; margin-left: 36px; align-self: center; }
    .tk-row > .tk-av, .tk-row > .tk-avs { order: 6; align-self: center; }
    .tk-row > .tk-end { order: 7; margin-left: auto; }
    .tk-row > .tk-av.none { display: none; }
    .tk-row > .tk-end .tk-act { min-height: 44px; }
    .tk-row > .tk-due:empty { display: none; }
    .tk-chip { min-height: 44px; }
    .tk-more { width: 44px; height: 44px; }
    .tk-detail { padding: 0 14px 14px 50px; }
    .tk-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .tk-grp { padding: 12px 14px 9px; }
    .tk-mini { padding: 12px 14px; flex-wrap: wrap; }
}
@media (max-width: 599px) {
    .tk-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; width: calc(100% + 32px); }
    .tk-chips::-webkit-scrollbar { display: none; }
    .tk-bar { flex-direction: column; align-items: stretch; }
    .tk-select-btn { align-self: flex-end; min-height: 44px; }
    .tk-detail { padding-left: 14px; }
    .tk-photo { width: 100%; height: 160px; }
}

/* --- Réglages : titre de page (mobile) et onglets --- */
.rg-title { margin: 0 0 12px; font-size: 1.5rem; }
@media (min-width: 1024px) { .rg-title { display: none; } }
.rg-sub { margin: 4px 0 14px; font-size: 1.15rem; color: var(--a-fg); }
.rg-tabs { margin: 0 0 16px; border-bottom: 1px solid var(--a-line); }
.rg-tabs-in { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.rg-tab {
    display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; flex: none;
    border: 0; border-radius: var(--r-ctl) var(--r-ctl) 0 0; background: none; cursor: pointer; white-space: nowrap;
    font: 600 0.88rem/1 var(--f-text); color: var(--a-mute); transition: color .15s, background-color .15s;
}
.rg-tab i { font-size: 0.85em; }
.rg-tab:hover { color: var(--a-fg); background: var(--a-surface2); }
.rg-tab.active { color: var(--a-fg); box-shadow: inset 0 -2px 0 var(--a-link); cursor: default; }
.rg-tab.active i { color: var(--a-link); }
.rg-tab:focus-visible { outline: 2px solid var(--o-blue); outline-offset: -2px; }
@media (max-width: 1023px) {
    /* une ligne qui défile DANS son conteneur, bords en fondu, onglet actif ramené dans la vue */
    .rg-tabs { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; scroll-padding: 0 16px;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
    .rg-tabs::-webkit-scrollbar { display: none; }
    .rg-tabs-in { flex-wrap: nowrap; width: max-content; padding-right: 16px; }
}
@media (min-width: 600px) and (max-width: 1023px) { .rg-tabs { margin-left: -24px; margin-right: -24px; padding: 0 24px; } }

/* --- Paramètres : cartes et réglage « Apparence » --- */
.card.st-card { margin-bottom: 16px; padding: 20px; }
.st-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 700 0.92rem/1.2 var(--f-title); color: var(--a-fg); }
.st-card-h i { color: var(--a-mute); font-size: 0.9em; }
.st-note { margin: 10px 0 0; font-size: 0.8rem; color: var(--a-mute); }
.ap-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ap-opt {
    display: flex; align-items: flex-start; gap: 12px; min-height: 64px; padding: 12px 14px; text-align: left;
    border: 1px solid var(--a-line); border-radius: var(--r-md); background: var(--a-surface); color: var(--a-fg); cursor: pointer;
    font: inherit; transition: border-color .15s, background .15s;
}
.ap-opt > i { width: 34px; height: 34px; border-radius: var(--r-ctl); display: grid; place-items: center; flex: none; background: var(--a-surface2); color: var(--a-mute); }
.ap-opt-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap-opt-txt b { font-weight: 600; font-size: 0.92rem; }
.ap-opt-txt small { font-size: 0.8rem; color: var(--a-mute); line-height: 1.35; }
.ap-opt:hover { border-color: color-mix(in srgb, var(--a-link) 40%, var(--a-line)); }
.ap-opt.active { border-color: var(--a-link); background: var(--todo-bg); box-shadow: inset 0 0 0 1px var(--a-link); }
.ap-opt.active > i { background: var(--a-link); color: var(--a-surface); }
/* fin refonte vague 2-3 · socle */

/* ========================================
   refonte vague 2-3 · planning
   Planning (planning.js, planning_leaves.js, planning_presence.js, planning_annual.js, planning_convention.js)
   et borne de pointage (app.html?borne=1). Maquettes « planDesk », « planMob », « borneTab », « borneMob »
   de la direction 1. Uniquement des jetons : le module suit la classe .m-dark / .m-light posée sur #app-main
   (sombre de pilotage par défaut) ; la borne pose elle-même sa classe sur #pln-kiosk (sombre, variante claire).
   Nouvelles classes en .pl2- ; les anciennes classes .pln- du module sont reprises ici aux jetons.
   ======================================== */
.pln-view { color: var(--a-fg); }
.pln-view > h2 { font-size: 1.6rem; margin-bottom: 14px !important; }
.pl2-mute { color: var(--a-mute); }
.pl2-warn { color: var(--late); font-weight: 600; }
.pl2-neg { color: var(--crit); font-weight: 600; }
.pl2-pos { color: var(--a-link); font-weight: 600; }
.pl2-ok { color: var(--ok); }
.pl2-wait { text-align: center; padding: 28px; color: var(--a-mute); }

/* --- Onglets de la vague 1, restylés --- */
.pln-view .pln-tabs-bar { border-bottom-color: var(--a-line); margin-bottom: 20px; }
.pln-view .pln-tab { color: var(--a-mute); font-weight: 600; font-size: 0.875rem; padding: 0 14px; border-radius: 0; }
.pln-view .pln-tab:hover { color: var(--a-fg); background: transparent; }
.pln-view .pln-tab.active { color: var(--a-fg); box-shadow: inset 0 -2px 0 var(--a-link); }
.pln-view .pln-tab.active i { color: var(--a-link); }
.pln-view .pln-tab-help { background: transparent; border-color: var(--a-line); color: var(--a-mute); font-weight: 600; }
.pln-view .pln-tab-help:hover { color: var(--a-fg); border-color: color-mix(in srgb, var(--a-fg) 30%, var(--a-line)); }
.pln-view .pln-tab-help.active { color: var(--a-link); border-color: var(--a-link); background: var(--todo-bg); }

/* --- Barre d'outils de la semaine --- */
.pl2-tool { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pl2-wk { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pl2-wk-t { margin: 0; font-family: var(--f-title); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--a-fg); white-space: nowrap; padding: 0 4px; }
.pl2-sm { display: none; }
.pl2-ib { width: 38px; height: 38px; flex: none; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--a-line); background: var(--a-surface); color: var(--a-fg); cursor: pointer; font-size: 0.85rem; transition: background 0.15s, border-color 0.15s; }
.pl2-ib:hover { background: var(--a-surface2); }
.pl2-sp { flex: 1; }
.pl2-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--a-line); background: var(--a-surface); color: var(--a-fg); font: 600 0.875rem var(--f-text); cursor: pointer; white-space: nowrap; transition: background 0.15s, filter 0.15s, transform 0.1s; }
.pl2-btn:hover { background: var(--a-surface2); }
.pl2-btn:active { transform: scale(0.98); }
.pl2-btn.p { background: var(--o-grad-btn); color: #fff; border-color: transparent; box-shadow: var(--sh-cta); }
.pl2-btn.p:hover { filter: brightness(1.07); }
.pl2-btn:disabled { opacity: 0.55; cursor: progress; }
.pl2-note-line { margin: -4px 0 14px 2px; font-size: 0.8rem; color: var(--a-mute); }

/* --- Encadrés et cartes du module --- */
.pl2-card { padding: 0; overflow: hidden; }
.pl2-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--a-line); }
.pl2-card-h h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--a-fg); }
.pl2-callout { border-left: 3px solid var(--neu); padding: 14px 16px; }
.pl2-callout.ok { border-left-color: var(--ok); } .pl2-callout.ok > i:first-child { color: var(--ok); }
.pl2-callout.todo { border-left-color: var(--a-link); background: color-mix(in srgb, var(--todo-bg) 60%, var(--a-surface)); }
.pl2-callout.late { border-left-color: var(--late); } .pl2-callout.late > i:first-child { color: var(--late); }
.pl2-callout.crit { border-left-color: var(--crit); color: var(--a-fg); } .pl2-callout.crit > i:first-child { color: var(--crit); }
.pl2-callout.ia { border-left-color: var(--ia); }
.pl2-callout .pln-alert-line { border-top-color: var(--a-line); }
.pl2-line { margin-top: 6px; font-size: 0.85rem; font-weight: 600; }
.pl2-line.crit { color: var(--crit); } .pl2-line.late { color: var(--late); }
.pl2-sub-card { background: var(--a-surface2); box-shadow: none; }
.btn-primary.pl2-solid, .btn-primary.pl2-danger, .btn-primary.pl2-okbtn { border-color: transparent; color: #fff; }
.btn-primary.pl2-solid { background: var(--o-grad-btn); box-shadow: var(--sh-cta); }
.btn-primary.pl2-danger { background: var(--crit-solid); }
.btn-primary.pl2-okbtn { background: var(--ok-solid); }
.btn-primary.pl2-solid:hover, .btn-primary.pl2-danger:hover, .btn-primary.pl2-okbtn:hover { filter: brightness(1.07); }
.btn-primary.pl2-del { color: var(--crit); }
.pl2-done-ic { font-size: 3rem; line-height: 1; color: var(--ok); margin-bottom: 10px; }
.pl2-done-ic.crit { color: var(--crit); }

/* --- Grille de la semaine (« planDesk ») --- */
.pl2-grid-wrap { width: 100%; overflow-x: auto; }
.pl2-grid { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 0.8rem; }
.pl2-grid col.pl2-c-who { width: 168px; }
.pl2-grid col.pl2-c-tot { width: 124px; }
.pl2-grid th { font: 600 0.75rem var(--f-text); color: var(--a-mute); text-align: left; padding: 12px 8px 10px; border-bottom: 1px solid var(--a-line); white-space: nowrap; }
.pl2-grid th:first-child { padding-left: 16px; }
.pl2-grid th b { display: block; font: 700 0.85rem var(--f-title); color: var(--a-fg); }
.pl2-grid th.today, .pl2-grid th.today b { color: var(--a-link); }
.pl2-grid .pl2-r { text-align: right; padding-right: 16px; }
.pl2-grid td { padding: 6px; border-bottom: 1px solid var(--a-line); vertical-align: top; }
.pl2-grid td.today { background: color-mix(in srgb, var(--a-link) 5%, transparent); }
.pl2-grid tr.pl2-grp td { padding: 14px 16px 6px; border-bottom: 0; font: 600 0.78rem var(--f-text); color: var(--a-mute); background: transparent; }
.pl2-grp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 8px; vertical-align: 1px; }
.pl2-grp-dot.k { background: var(--o-blue-hi); } .pl2-grp-dot.s { background: var(--o-cyan); } .pl2-grp-dot.n { background: var(--a-mute, #8a90a6); }
.pl2-grid tr.pl2-grp td { padding: 8px 8px 4px; }
.pl2-grp-btn { display: flex; align-items: center; gap: 0; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pl2-grp-btn:hover { background: var(--a-hover, rgba(127,127,127,.08)); }
.pl2-grp-btn:focus-visible { outline: 2px solid var(--o-blue-hi); outline-offset: 1px; }
.pl2-grp-chev { width: 14px; margin-right: 8px; font-size: 0.7rem; transition: transform .15s; }
.pl2-grp-btn[aria-expanded="false"] .pl2-grp-chev { transform: rotate(-90deg); }
.pl2-grp-btn .pl2-mute { margin-left: 5px; }
.pl2-grp-act { margin-left: auto; font-weight: 600; color: var(--a-link, var(--o-blue-hi)); }
.pl2-grid tr[data-grp][hidden] { display: none; }
.pl2-grid td.pl2-who { padding: 9px 10px 9px 16px; }
.pl2-who b { display: block; font-weight: 600; font-size: 0.85rem; color: var(--a-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl2-who small { display: block; color: var(--a-mute); font-size: 0.74rem; margin-top: 1px; }
.pl2-annu { display: inline-flex; align-items: flex-start; gap: 6px; margin-top: 5px; font-size: 0.72rem; font-weight: 600; color: var(--ia); line-height: 1.35; }
.pl2-annu > i { margin-top: 2px; }
.pl2-annu small { display: block; font-weight: 500; color: var(--a-mute); font-size: 0.7rem; }
.pl2-annu.warn { color: var(--late); }
.pl2-cell { position: relative; }
.pl2-sh { position: relative; display: flex; flex-direction: column; width: 100%; margin-bottom: 4px; padding: 5px 7px 5px 9px; border: 0; border-radius: 8px; text-align: left; cursor: pointer;
    font: 600 0.74rem/1.3 var(--f-text); font-variant-numeric: tabular-nums; color: var(--a-fg); transition: filter 0.15s, transform 0.1s; }
.pl2-sh small { font-weight: 500; color: var(--a-mute); }
.pl2-sh.k { background: color-mix(in srgb, var(--o-blue-hi) 18%, transparent); box-shadow: inset 3px 0 0 var(--o-blue-hi); }
.pl2-sh.s { background: color-mix(in srgb, var(--o-cyan) 16%, transparent); box-shadow: inset 3px 0 0 var(--o-cyan); }
.pl2-sh.new { outline: 1.5px dashed color-mix(in srgb, var(--late) 70%, transparent); outline-offset: -1.5px; }
.pl2-sh:hover { filter: brightness(0.96); }
.m-dark .pl2-sh:hover { filter: brightness(1.15); }
.pl2-sh:active { transform: scale(0.98); }
.pl2-wd { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--late); box-shadow: 0 0 0 2px var(--a-surface); pointer-events: auto; }
.pl2-wd.crit { background: var(--crit); }
.pl2-cell > .pl2-wd { top: 3px; right: 3px; }
.pl2-tot { position: relative; text-align: right; padding: 9px 16px 9px 8px !important; font-variant-numeric: tabular-nums; }
.pl2-tot b { display: block; font: 700 0.85rem var(--f-title); color: var(--a-fg); }
.pl2-tot small { display: block; color: var(--a-mute); font-size: 0.72rem; line-height: 1.35; }
.pl2-over { display: inline-block; margin-top: 3px; font-size: 0.72rem; font-weight: 600; color: var(--late); }
.pl2-tot b > .pl2-wd { position: static; display: inline-block; margin-right: 6px; vertical-align: 1px; box-shadow: none; }
.pl2-leave { position: relative; min-height: 40px; margin-bottom: 4px; display: grid; place-items: center; padding: 4px 6px; border-radius: 8px; border: 1px dashed var(--a-line); text-align: center;
    background: repeating-linear-gradient(135deg, var(--a-surface2) 0 6px, transparent 6px 12px); color: var(--a-mute); font-size: 0.72rem; font-weight: 600; line-height: 1.25; }
.pl2-leave small { display: block; font-weight: 500; }
.pl2-leave.crit { color: var(--crit); } .pl2-leave.late { color: var(--late); } .pl2-leave.ia { color: var(--ia); } .pl2-leave.todo { color: var(--a-link); }
.pl2-leave.half { min-height: 0; }
.pl2-leave.inline { display: inline-block; min-height: 0; margin: 4px 0 0; padding: 3px 8px; }
.pl2-other { font-size: 0.7rem; color: var(--ia); font-weight: 600; margin: 2px 0 4px; }
.pl2-add { display: inline-grid; place-items: center; width: 28px; height: 24px; border-radius: 7px; border: 1px dashed var(--a-line); background: transparent; color: var(--a-mute); cursor: pointer; font-size: 0.7rem; opacity: 0.5; transition: opacity 0.15s, color 0.15s, border-color 0.15s; }
.pl2-cell:hover .pl2-add, .pl2-add:focus-visible { opacity: 1; }
.pl2-cell.has > .pl2-add { position: absolute; right: 4px; bottom: 3px; width: 26px; height: 22px; opacity: 0; background: var(--a-surface); border-style: solid; z-index: 1; }
.pl2-cell.has:hover > .pl2-add, .pl2-cell.has > .pl2-add:focus-visible { opacity: 1; }
.pl2-add:hover { color: var(--a-link); border-color: var(--a-link); opacity: 1; }
@media (hover: none) { .pl2-add { opacity: 0.9; } .pl2-cell.has > .pl2-add { position: static; opacity: 0.9; background: transparent; border-style: dashed; } }
/* Glisser-déposer d'un shift (ordinateur) : puce atténuée, case visée surlignée, fantôme sous le curseur, petit menu */
.pl2-sh.pl2-dragging { opacity: 0.4; }
.pl2-dnd-on, .pl2-dnd-on * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.pl2-grid td.pl2-cell.pl2-drop { background: color-mix(in srgb, var(--a-link) 14%, transparent) !important; box-shadow: inset 0 0 0 2px var(--a-link); }
.pl2-sh.pl2-ghost { position: fixed; left: 0; top: 0; z-index: 2700; margin: 0; pointer-events: none; opacity: 0.92; transition: none; }
.pl2-sh.k.pl2-ghost { background: linear-gradient(color-mix(in srgb, var(--o-blue-hi) 18%, transparent), color-mix(in srgb, var(--o-blue-hi) 18%, transparent)) var(--a-surface); box-shadow: inset 3px 0 0 var(--o-blue-hi), var(--sh-pop); }
.pl2-sh.s.pl2-ghost { background: linear-gradient(color-mix(in srgb, var(--o-cyan) 16%, transparent), color-mix(in srgb, var(--o-cyan) 16%, transparent)) var(--a-surface); box-shadow: inset 3px 0 0 var(--o-cyan), var(--sh-pop); }
.pl2-dnd-pop { position: fixed; z-index: 2550; width: 310px; max-width: calc(100vw - 16px); padding: 12px; border-radius: 12px; border: 1px solid var(--a-line); background: var(--a-surface); color: var(--a-fg); box-shadow: var(--sh-pop); font: 500 0.82rem/1.45 var(--f-text); }
.pl2-dnd-t { margin: 0; }
.pl2-dnd-t b { font-weight: 700; }
.pl2-dnd-n { margin: 6px 0 0; color: var(--a-mute); font-size: 0.76rem; }
.pl2-dnd-acts { display: flex; gap: 6px; margin-top: 10px; }
.pl2-dnd-acts .pl2-btn { flex: 1; min-height: 34px; padding: 0 10px; font-size: 0.8rem; }
.pl2-grid tfoot td { font-weight: 600; font-size: 0.75rem; color: var(--a-mute); border-bottom: 0; padding: 10px 8px; font-variant-numeric: tabular-nums; }
.pl2-grid tfoot td:first-child { padding-left: 16px; }
.pl2-grid tfoot b { color: var(--a-fg); font-family: var(--f-title); }

/* --- Alertes légales en pied de grille --- */
.pl2-legal { padding: 12px 18px 14px; border-top: 1px solid var(--a-line); font-size: 0.84rem; }
.pl2-card > .pl2-legal:first-child { border-top: 0; }
.pl2-legal-h { font-size: 0.78rem; font-weight: 600; color: var(--late); margin-bottom: 6px; }
.pl2-legal.crit .pl2-legal-h { color: var(--crit); }
.pl2-legal ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pl2-legal-i { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; color: var(--a-fg); line-height: 1.45; }
.pl2-legal-i > i:first-child { margin-top: 3px; color: var(--late); font-size: 0.85rem; flex: none; }
.pl2-legal-i.crit > i:first-child { color: var(--crit); }
.pl2-legal-i > span { flex: 1; min-width: 0; }
.pl2-legal-i small { color: var(--a-mute); font-size: 0.74rem; }
.pl2-legal-i.go { cursor: pointer; }
.pl2-legal-i.go:hover { background: var(--a-surface2); }
.pl2-legal-go { margin-top: 4px; color: var(--a-mute); font-size: 0.75rem; }

/* --- Téléphone : jour par jour, frise des shifts (« planMob ») --- */
.pl2-mob { display: none; }
.pl2-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.pl2-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 52px; padding: 7px 0; border-radius: 12px; border: 1px solid var(--a-line); background: var(--a-surface); color: var(--a-mute); font: 600 0.72rem var(--f-text); cursor: pointer; text-transform: capitalize; }
.pl2-day b { font: 700 1rem var(--f-title); color: var(--a-fg); }
.pl2-day.today:not(.on) { border-color: color-mix(in srgb, var(--a-link) 55%, var(--a-line)); }
.pl2-day.on { background: var(--o-grad-btn); color: rgba(255, 255, 255, 0.82); border-color: transparent; box-shadow: var(--sh-cta); }
.pl2-day.on b { color: #fff; }
.pl2-day-dot { position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--late); }
.pl2-tl { display: grid; gap: 4px; padding: 10px 12px 12px; }
.pl2-tl-r { display: grid; grid-template-columns: 84px minmax(0, 1fr) 40px; gap: 8px; align-items: center; min-height: 44px; }
.pl2-tl-n { min-width: 0; }
.pl2-tl-n b { display: block; font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl2-tl-n small { display: block; font-size: 0.7rem; color: var(--a-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl2-tl-r.off .pl2-tl-n b { color: var(--a-mute); font-weight: 500; }
.pl2-trk { position: relative; height: 40px; border-radius: 8px; background: var(--a-surface2); }
.pl2-tick { position: absolute; top: 4px; bottom: 4px; width: 1px; background: var(--a-line); }
.pl2-axis { min-height: 18px; }
.pl2-axis .pl2-trk { height: 16px; background: transparent; }
.pl2-axis .pl2-trk span { position: absolute; transform: translateX(-50%); font-size: 0.66rem; font-weight: 600; color: var(--a-mute); font-variant-numeric: tabular-nums; }
.pl2-bar { position: absolute; top: 0; bottom: 0; min-width: 34px; display: flex; align-items: center; padding: 0 7px; border: 0; border-radius: 8px; cursor: pointer; overflow: visible; white-space: nowrap;
    font: 600 0.7rem var(--f-text); color: var(--a-fg); font-variant-numeric: tabular-nums; }
.pl2-bar.k { background: color-mix(in srgb, var(--o-blue-hi) 30%, transparent); box-shadow: inset 3px 0 0 var(--o-blue-hi); }
.pl2-bar.s { background: color-mix(in srgb, var(--o-cyan) 26%, transparent); box-shadow: inset 3px 0 0 var(--o-cyan); }
.pl2-bar.new { outline: 1.5px dashed color-mix(in srgb, var(--late) 70%, transparent); outline-offset: -1.5px; }
.pl2-trk > .pl2-leave { position: absolute; inset: 0; margin: 0; min-height: 0; }
.pl2-rest { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 0.7rem; color: var(--a-mute); }
.pl2-trk > .pl2-wd { top: -3px; right: -3px; }
.pl2-add.m { width: 40px; height: 40px; border-radius: 10px; opacity: 0.9; font-size: 0.8rem; }
.pl2-mob-more { font-size: 0.8rem; margin: 0 4px 12px; }

@media (max-width: 1279px) {
    .pl2-grid { min-width: 660px; }
    .pl2-grid col.pl2-c-who { width: 128px; }
    .pl2-grid col.pl2-c-tot { width: 98px; }
    .pl2-grid td.pl2-who { padding-left: 12px; }
    .pl2-sh { padding: 4px 4px 4px 8px; }
    .pl2-sh small { display: none; }
    .pl2-tot { padding-right: 12px !important; }
}
@media (max-width: 760px) {
    .pln-view .pl2-card.pln-grid-card { display: none; }
    .pl2-mob { display: block; }
    .pl2-tool .pl2-lg { display: none; }
    .pl2-tool .pl2-sm { display: inline; }
    .pl2-tool { gap: 8px; }
    .pl2-tool > .bd { margin-left: auto; }
    .pl2-tool > .pl2-sp { display: none; }
    .pl2-acts { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .pl2-acts .pl2-btn { min-height: 44px; padding: 0 10px; }
    .pl2-acts .pl2-btn.p { grid-column: 1 / -1; min-height: 48px; }
    .pl2-ib { width: 44px; height: 44px; }
    .pl2-legal { padding: 12px 14px; }
}
@media (max-width: 380px) { .pl2-tl-r { grid-template-columns: 70px minmax(0, 1fr) 40px; } }

/* --- Autres onglets : mêmes codes (barres de période, lignes, tableaux, totaux) --- */
.pln-view .card.pln-weekbar { background: transparent; border: 0; box-shadow: none; padding: 0 0 4px; margin-bottom: 12px; }
.pln-view .pln-weekbar > .flex-row > div { font-family: var(--f-title); font-weight: 700 !important; color: var(--a-fg); }
.pln-view .pln-weekbar .filter-btn:has(> .fa-chevron-left), .pln-view .pln-weekbar .filter-btn:has(> .fa-chevron-right) { width: 40px; min-height: 40px; padding: 0; border-radius: 10px; display: inline-grid; place-items: center; }
.pln-sub { color: var(--a-mute); font-weight: 500; }
.pln-dayrow, .pln-leave-row, .pln-punch, .pln-qualify-opt { border-bottom-color: var(--a-line); }
.pln-today-row { background: color-mix(in srgb, var(--a-link) 12%, transparent); box-shadow: inset 3px 0 0 var(--a-link); }
.pln-view .pln-dayrow[onclick] { margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; transition: background 0.15s; }
.pln-view .pln-dayrow[onclick]:hover { background: var(--a-surface2); }
.pln-alert-line { border-top-color: var(--a-line); color: var(--a-fg); }
.pln-grid { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.pln-grid th { font-weight: 600; font-size: 0.75rem; color: var(--a-mute); border-bottom-color: var(--a-line); background: transparent; }
.pln-grid td { border-bottom-color: var(--a-line); }
.pln-grid th.pln-today { color: var(--a-link); }
.pln-group td { background: var(--a-surface2); color: var(--a-mute); }
.pln-name { font-weight: 600; }
.pln-grid.pln-ts td { white-space: nowrap; font-size: 0.84rem; }
.pln-grid.pln-ts td:has(.bd), .pln-grid.pln-ts td:has(div.pln-sub) { white-space: normal; }
.pln-grid.pln-ts td:last-child:has(.filter-btn) { text-align: right; }
.pln-grid.pln-ts td .filter-btn { margin: 2px 0; }
.pln-totals div, .pln-leave-balance div { background: var(--a-surface2); border: 1px solid var(--a-line); }
.pln-totals strong, .pln-leave-balance strong { font-family: var(--f-title); font-variant-numeric: tabular-nums; color: var(--a-fg); }
.pln-totals span, .pln-leave-balance span { font-weight: 600; font-size: 0.74rem; }
.pln-leave-balance div:first-child { background: var(--ia-bg); border-color: transparent; }
.pln-leave-balance div:first-child strong { color: var(--ia); }
.pln-leave-warn { background: var(--late-bg); border: 1px solid color-mix(in srgb, var(--late) 30%, transparent); color: var(--late); }
.pln-leave-info { color: var(--a-mute); }
.pln-leave-dot { background: var(--neu); }
.pln-leave-dot.ok { background: var(--ok); } .pln-leave-dot.todo { background: var(--a-link); } .pln-leave-dot.late { background: var(--late); } .pln-leave-dot.crit { background: var(--crit); } .pln-leave-dot.ia { background: var(--ia); }
.pln-cal-sun { background: var(--a-surface2); }
.pln-cal-code { background: var(--neu-bg); color: var(--neu); font-weight: 700; }
.pln-cal-code.ok { background: var(--ok-bg); color: var(--ok); } .pln-cal-code.todo { background: var(--todo-bg); color: var(--todo); } .pln-cal-code.late { background: var(--late-bg); color: var(--late); }
.pln-cal-code.crit { background: var(--crit-bg); color: var(--crit); } .pln-cal-code.ia { background: var(--ia-bg); color: var(--ia); }
.pln-cal-legend { color: var(--a-mute); }
.pln-view .pln-check { color: var(--a-fg); }
.pl2-msh { display: inline-block; padding: 3px 9px 3px 10px; border-radius: 7px; font-weight: 600; font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--a-fg); }
.pl2-msh.k { background: color-mix(in srgb, var(--o-blue-hi) 18%, transparent); box-shadow: inset 3px 0 0 var(--o-blue-hi); }
.pl2-msh.s { background: color-mix(in srgb, var(--o-cyan) 16%, transparent); box-shadow: inset 3px 0 0 var(--o-cyan); }
.pl2-my-sh + .pl2-my-sh { margin-top: 4px; }

/* --- Fenêtres du module (mode de la zone de contenu) --- */
.pl2-modal .modal-card { color: var(--a-fg); }
.pl2-modal .pln-alert-line { padding: 6px 0; }

/* --- Pointage par QR sur le téléphone (« borneMob ») --- */
.pl2-ph { display: grid; gap: 12px; text-align: center; justify-items: stretch; }
.pl2-ph h3 { margin: 0; font-size: 1.35rem; }
.pl2-ph-k { margin: 0; color: var(--a-mute); font-size: 0.9rem; }
.pl2-ph-card { display: grid; gap: 8px; justify-items: center; padding: 22px 16px; border-radius: var(--r-md); border: 1px solid var(--a-line); background: var(--a-surface2); }
.pl2-ph-time { display: block; font: 800 3.6rem/1 var(--f-title); letter-spacing: -0.03em; color: var(--a-fg); }
.pl2-ph-other { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; font-size: 0.82rem; }
.pl2-ph-foot { font-size: 0.8rem; margin: 0; }

/* --- Borne de pointage (« borneTab ») --- */
#pln-kiosk { color: var(--a-fg); background: radial-gradient(760px 420px at 85% -10%, color-mix(in srgb, var(--o-blue) 26%, transparent), transparent 70%), var(--a-bg); font-family: var(--f-text); }
#pln-kiosk.m-light { background: radial-gradient(760px 420px at 85% -10%, color-mix(in srgb, var(--o-blue) 9%, transparent), transparent 70%), var(--a-bg); }
#pln-kiosk .pl2-logo-l, #pln-kiosk.m-light .pl2-logo-d { display: none; }
#pln-kiosk.m-light .pl2-logo-l { display: inline; }
/* La borne tient sur un écran : seule la liste déroulante ouverte (ou une très longue liste de prévus) défile, à l'intérieur de son cadre */
.pl2-k { height: 100%; min-height: 480px; display: flex; flex-direction: column; overflow: hidden; }
.pl2-k-head { display: flex; align-items: center; gap: 20px; padding: 20px 32px; border-bottom: 1px solid var(--a-line); flex-wrap: wrap; }
.pl2-k-logo img { display: block; height: 30px; width: auto; }
.pl2-k-id { min-width: 0; }
.pl2-k-site { font: 800 1.65rem/1.1 var(--f-title); letter-spacing: -0.02em; }
.pl2-k-small { color: var(--a-mute); font-size: 0.95rem; }
.pl2-k-clock { margin-left: auto; font: 800 4rem/1 var(--f-title); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pl2-k-clock small { font-size: 1.75rem; color: var(--a-mute); font-weight: 700; }
.pl2-k-state { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pl2-k-state .pl2-k-small { font-size: 0.8rem; color: var(--late); font-weight: 600; }
.pl2-k-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: minmax(0, 1fr); gap: 24px; padding: 24px 32px; align-items: start; }
.pl2-k-list { position: relative; height: 100%; min-height: 0; display: flex; flex-direction: column; }
.pl2-k-list > .pl2-k-grid { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px; margin: -4px; }
.pl2-k-search { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 18px; border-radius: 16px; border: 1px solid var(--a-line); background: var(--a-surface); color: var(--a-mute); font-size: 1.1rem; }
.pl2-k-search:focus-within { border-color: var(--o-blue); box-shadow: var(--ring); }
.pl2-k-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--a-fg); font: inherit; }
.pl2-k-search input::placeholder { color: var(--a-mute); }
.pl2-k-search input.pln-k-search { width: auto; padding: 0; margin: 0; border: 0; border-radius: 0; }
.pl2-k-sec { font: 700 1rem var(--f-title); margin: 22px 0 12px; color: var(--a-mute); }
.pl2-k-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.pl2-k-p { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-height: 150px; padding: 18px; border-radius: 18px; border: 1px solid var(--a-line); background: var(--a-surface); box-shadow: var(--a-shadow);
    color: var(--a-fg); font-family: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s; }
.pl2-k-p:active { transform: scale(0.98); }
.pl2-k-p b { font: 800 1.35rem/1.15 var(--f-title); letter-spacing: -0.01em; }
.pl2-k-p .pl { font-size: 0.95rem; color: var(--a-mute); font-variant-numeric: tabular-nums; }
.pl2-k-p .ls { font-size: 0.85rem; color: var(--a-mute); }
.pl2-k-p.sel { border-color: var(--o-blue-hi); box-shadow: 0 0 0 4px color-mix(in srgb, var(--o-blue-hi) 28%, transparent); }
.pl2-k-p.row { min-height: 72px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.pl2-k-p.row b { font-size: 1.15rem; }
.pl2-k-nx { margin-top: auto; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--a-line); background: var(--a-surface2); font-weight: 600; font-size: 0.9rem; color: var(--a-fg); }
.pl2-k-nx.p { background: var(--o-grad-btn); color: #fff; border-color: transparent; box-shadow: var(--sh-cta); }
.pl2-k-p.row .pl2-k-nx { margin-top: 0; }
.pl2-k-empty { padding: 24px 4px; color: var(--a-mute); font-size: 1rem; }
/* Liste déroulante « Salariés non prévus aujourd'hui » : repliée par défaut, s'ouvre par-dessus les cartes */
.pl2-k-dd { flex: none; margin-bottom: 4px; }
.pl2-k-dd-btn { display: flex; align-items: center; gap: 12px; width: 100%; height: 60px; padding: 0 18px; border-radius: 16px; border: 1px solid var(--a-line); background: var(--a-surface); color: var(--a-fg); font: 600 1.05rem var(--f-text); text-align: left; cursor: pointer; }
.pl2-k-dd-btn > i:first-child { color: var(--a-mute); }
.pl2-k-dd-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl2-k-dd-n { flex: none; min-width: 32px; padding: 3px 10px; border-radius: 999px; background: var(--a-surface2); color: var(--a-mute); font-size: 0.9rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.pl2-k-dd-chev { flex: none; color: var(--a-mute); transition: transform 0.15s; }
.pl2-k-dd.open .pl2-k-dd-btn { border-color: var(--o-blue); box-shadow: var(--ring); }
.pl2-k-dd.open .pl2-k-dd-chev { transform: rotate(180deg); }
.pl2-k-dd-panel { position: absolute; z-index: 3; left: 0; right: 0; top: 68px; max-height: calc(100% - 68px); display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 18px; border: 1px solid var(--a-line); background: var(--a-surface); box-shadow: var(--sh-pop); }
.pl2-k-dd-panel .pl2-k-search { flex: none; height: 52px; }
.pl2-k-dd-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; align-content: start; padding: 2px; }
.pl2-k-dd-list .pl2-k-p { box-shadow: none; background: var(--a-surface2); }
.pl2-k-dd-panel .pl2-k-empty { padding: 8px 4px; }
/* Beaucoup de prévus : cartes plus basses pour tout garder à l'écran */
.pl2-k-grid.dense { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pl2-k-grid.dense .pl2-k-p { min-height: 0; padding: 12px 14px; gap: 3px; border-radius: 14px; }
.pl2-k-grid.dense .pl2-k-p b { font-size: 1.1rem; }
.pl2-k-grid.dense .pl2-k-nx { min-height: 30px; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .pl2-k-dd-chev { transition: none; } }
.pl2-k-side { max-height: 100%; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 22px; border: 1px solid var(--a-line); background: var(--a-surface); box-shadow: var(--a-shadow); }
.pl2-k-side .pl2-k-sec { margin: 0; }
.pl2-k-qr { display: flex; justify-content: center; align-items: center; min-height: 232px; padding: 16px; border-radius: 16px; background: var(--al-surface); }
.pl2-k-qr .pl2-k-small { color: var(--al-mute); }
.pl2-k-hint { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--a-surface2); color: var(--a-fg); font-size: 0.95rem; }
.pl2-k-hint.big { font-size: 1.1rem; padding: 22px 16px; text-align: center; }
.pl2-k-pin-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pl2-k-pin-h h3 { margin: 2px 0 0; font-size: 1.65rem; }
.pl2-k-x { width: 48px; height: 48px; flex: none; border-radius: 14px; border: 1px solid var(--a-line); background: var(--a-surface2); color: var(--a-fg); font-size: 1.1rem; cursor: pointer; }
.pl2-k-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pl2-k-acts button { min-height: 44px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--a-line); background: transparent; color: var(--a-mute); font: 600 0.88rem var(--f-text); cursor: pointer; }
.pl2-k-acts button.on { background: var(--todo-bg); color: var(--a-link); border-color: var(--a-link); }
.pl2-k-dots { display: flex; justify-content: center; gap: 16px; padding: 4px 0; }
.pl2-k-dots i { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--a-mute); }
.pl2-k-dots i.f { background: var(--a-fg); border-color: var(--a-fg); }
.pl2-k-err { min-height: 1.3em; text-align: center; color: var(--crit); font-weight: 600; font-size: 0.95rem; }
.pl2-k-keys { flex: 1 1 302px; max-height: 302px; min-height: 172px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pl2-k-keys button { height: auto; min-height: 0; border-radius: 16px; border: 1px solid var(--a-line); background: var(--a-surface2); color: var(--a-fg); font: 700 1.75rem var(--f-title); cursor: pointer; transition: background 0.1s, transform 0.08s; }
.pl2-k-keys button:active { transform: scale(0.96); background: color-mix(in srgb, var(--a-fg) 10%, var(--a-surface2)); }
.pl2-k-keys button i { font-size: 1.5rem; }
.pl2-k-cta { width: 100%; min-height: 72px; padding: 0 20px; border: 0; border-radius: 16px; background: var(--o-grad-btn); color: #fff; box-shadow: var(--sh-cta); font: 700 1.15rem var(--f-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.pl2-k-cta:hover { filter: brightness(1.07); }
.pl2-k-cta:disabled { opacity: 0.7; cursor: progress; }
.pl2-k-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 32px; border-top: 1px solid var(--a-line); color: var(--a-mute); font-size: 0.9rem; }
.pl2-k-privacy { display: inline-flex; align-items: center; gap: 8px; color: var(--a-mute); }
.pl2-k-privacy i { color: var(--ok); }
.pl2-k-foot-r { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.pl2-k-foot-r button { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--a-mute); font: 500 0.85rem var(--f-text); cursor: pointer; }
.pl2-k-foot-r button:hover { color: var(--a-fg); border-color: var(--a-line); }
.pl2-k-overlay { position: fixed; inset: 0; z-index: 5100; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pl2-k-done { width: 100%; max-width: 440px; padding: 34px 26px; border-radius: 26px; border: 1px solid var(--a-line); background: var(--a-surface); box-shadow: var(--sh-pop); text-align: center; }
.pl2-k-done-ic { font-size: 4rem; line-height: 1; color: var(--ok); margin-bottom: 14px; }
.pl2-k-done.off .pl2-k-done-ic { color: var(--late); }
.pl2-k-done-n { font: 800 1.6rem var(--f-title); }
.pl2-k-done-t { font-size: 1.15rem; font-weight: 600; margin-top: 4px; }
.pl2-k-done-h { font: 800 3.4rem/1.1 var(--f-title); letter-spacing: -0.03em; margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
.pl2-k-pair { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.pl2-k-pair-card { width: 100%; max-width: 440px; padding: 34px 30px; border-radius: 26px; border: 1px solid var(--a-line); background: var(--a-surface); box-shadow: var(--sh-pop); text-align: center; display: grid; gap: 12px; justify-items: center; }
.pl2-k-pair-card h1 { margin: 6px 0 0; font-size: 1.5rem; }
.pl2-k-pair-card p { margin: 0; color: var(--a-mute); font-size: 0.92rem; }
.pl2-k-pair-card input { width: 100%; height: 64px; font: 700 1.8rem var(--f-title); text-align: center; letter-spacing: 6px; border-radius: 14px; border: 1px solid var(--a-line); background: var(--a-bg); color: var(--a-fg); }
.pl2-k-pair-card input:focus { outline: none; border-color: var(--o-blue); box-shadow: var(--ring); }
.pl2-k-pair-card .pl2-k-cta { min-height: 60px; }
.pl2-k-pair-card .pl2-k-privacy { font-size: 0.85rem; display: block; }
@media (max-width: 1100px) {
    .pl2-k-main { grid-template-columns: minmax(0, 1fr) 340px; padding: 20px 22px; gap: 18px; }
    .pl2-k-head, .pl2-k-foot { padding-left: 22px; padding-right: 22px; }
    .pl2-k-clock { font-size: 3.2rem; }
}
/* Écran bas (tablette en paysage, ex. Galaxy Tab A9) : en-tête, pied et cartes resserrés pour tout voir sans défiler */
@media (max-height: 820px) {
    .pl2-k-main { grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
    .pl2-k-head { padding-top: 8px; padding-bottom: 8px; gap: 14px; }
    .pl2-k-site { font-size: 1.35rem; }
    .pl2-k-clock { font-size: 2.5rem; }
    .pl2-k-clock small { font-size: 1.15rem; }
    .pl2-k-sec { margin: 14px 0 8px; }
    .pl2-k-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .pl2-k-p { min-height: 112px; padding: 12px 14px; gap: 3px; border-radius: 16px; }
    .pl2-k-p b { font-size: 1.15rem; }
    .pl2-k-nx { min-height: 32px; }
    .pl2-k-side { padding: 14px; gap: 8px; }
    .pl2-k-qr { min-height: 0; padding: 10px; }
    .pl2-k-pin-h h3 { font-size: 1.35rem; }
    .pl2-k-x { width: 44px; height: 44px; }
    .pl2-k-acts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
    .pl2-k-acts button { min-height: 44px; padding: 4px; font-size: 0.78rem; line-height: 1.15; }
    .pl2-k-dots { padding: 0; }
    .pl2-k-dots i { width: 16px; height: 16px; }
    .pl2-k-err { min-height: 1.1em; font-size: 0.85rem; }
    .pl2-k-keys { gap: 8px; }
    .pl2-k-cta { min-height: 52px; }
    .pl2-k-foot { padding-top: 4px; padding-bottom: 4px; font-size: 0.82rem; }
}
/* Téléphone ou tablette étroite : liste seule, le pavé PIN s'ouvre en feuille du bas */
@media (max-width: 860px) {
    .pl2-k-main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 16px; }
    .pl2-k-head { padding: 14px 16px; gap: 10px 14px; }
    .pl2-k-logo { display: none; }
    .pl2-k-site { font-size: 1.3rem; }
    .pl2-k-small { font-size: 0.85rem; }
    .pl2-k-clock { font-size: 2.4rem; }
    .pl2-k-clock small { font-size: 1.1rem; }
    .pl2-k-state { flex-direction: row; align-items: center; width: 100%; }
    .pl2-k-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .pl2-k-p { min-height: 128px; padding: 14px; }
    .pl2-k-p b { font-size: 1.15rem; }
    .pl2-k-side { position: static; }
    .pl2-k-side.pin { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 5050; max-height: 94dvh; overflow-y: auto; border-radius: 22px 22px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 0 0 100vmax var(--overlay); gap: 10px; }
    .pl2-k-id { flex: 1 1 170px; }
    .pl2-k-clock { flex: none; }
    .pl2-k-keys { flex: none; max-height: none; grid-template-rows: repeat(4, 60px); }
    .pl2-k-cta { min-height: 60px; }
    .pl2-k-foot { padding: 12px 16px; font-size: 0.82rem; }
    .pl2-k-dd-list { grid-template-columns: 1fr; }
    /* QR à gauche, consignes à droite : la liste des prévus garde la place */
    .pl2-k-side:not(.pin) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; align-items: center; padding: 14px; }
    .pl2-k-side:not(.pin) > .pl2-k-sec { grid-column: 1 / -1; }
    .pl2-k-side:not(.pin) > .pl2-k-qr { grid-row: span 2; min-height: 0; padding: 8px; }
    .pl2-k-side:not(.pin) > .pl2-k-hint.big { grid-column: 1 / -1; }
    .pl2-k-qr img, .pl2-k-qr canvas { width: 150px !important; height: 150px !important; }
}

/* Recette vague 2-3 : bouton « Contresigner toutes les feuilles » qui passe à la ligne sur téléphone */
.pres-bulk { white-space: normal; max-width: 100%; text-align: left; line-height: 1.3; }

/* Recette vague 2-3 : exécution d'un audit ou d'une mission */
.au-li { grid-template-columns: minmax(0, 1fr); }
.au-li li { min-width: 0; }
@media (min-width: 1024px) {
    /* Colonne de droite vide (employé sans choix de langue) : retirée de la grille, sans colonne implicite */
    .au-run:not(:has(.au-side > *)) .au-side { display: none; }
}
/* Le bandeau Vigie reste hors de l'écran d'exécution plein écran */
body:has(#main-content .au-run) #haccp-alert-banner, body:has(#main-content .au-trans) #haccp-alert-banner { display: none; }

/* Planning : shifts du salarié sur un autre site, visibles en lecture (clic : ouvre le planning de ce site) */
.pl2-sh.pl2-ext { background: repeating-linear-gradient(135deg, var(--a-surface2) 0 6px, transparent 6px 12px); box-shadow: inset 3px 0 0 var(--a-mute); color: var(--a-mute); border: 1px dashed var(--a-line); }
.pl2-ext-site { display: flex; align-items: flex-start; gap: 4px; margin-top: 2px; font-weight: 600; color: var(--a-mute); white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.pl2-ext-site i { margin-top: 2px; }
/* Planning : salarié archivé, ligne gardée pour ses shifts passés (lecture seule) */
.pl2-sh.pl2-arch, .pl2-bar.pl2-arch { cursor: default; opacity: 0.6; filter: grayscale(0.6); }
.pl2-sh.pl2-arch:hover, .pl2-sh.pl2-arch:active { filter: grayscale(0.6); transform: none; }
.pl2-arch-r .pl2-who b { color: var(--a-mute); }
.pl2-who .pl2-arch-bd { display: inline-block; margin-top: 3px; background: var(--neu-bg); color: var(--neu); }
.pl2-ext-site i { font-size: 0.62rem; }
.pl2-bar.pl2-ext { background: repeating-linear-gradient(135deg, var(--a-surface2) 0 6px, transparent 6px 12px); box-shadow: inset 3px 0 0 var(--a-mute); color: var(--a-mute); border: 1px dashed var(--a-line); }
.pl2-tl-n small.pl2-ext-n { color: var(--a-fg); }

/* ==== vague 4 · disponibilites : semaine type et indisponibilités des salariés (planning_availability.js) ==== */
.dp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Grille de la semaine : marqueur discret ; journée indisponible : case grisée (pas de hachures : réservées aux congés et aux autres sites) */
.dp-mk { display: flex; align-items: center; gap: 5px; width: 100%; margin: 0 0 4px; padding: 2px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--a-mute);
    font: 600 0.68rem/1.25 var(--f-text); text-align: left; cursor: help; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-mk span { overflow: hidden; text-overflow: ellipsis; }
.dp-mk i { font-size: 0.66rem; flex: none; }
.dp-mk:hover, .dp-mk:focus-visible { background: var(--a-surface2); color: var(--a-fg); }
.pl2-grid td.pl2-cell:has(> .dp-mk.off) { background: color-mix(in srgb, var(--a-mute) 11%, transparent); }
/* Frise du téléphone : périodes indisponibles grisées sous les shifts */
.dp-seg { position: absolute; top: 0; bottom: 0; padding: 0; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--a-mute) 24%, transparent); cursor: help; }
.dp-seg.full { display: grid; place-items: center; }
.dp-seg.full span { font-size: 0.68rem; font-weight: 600; color: var(--a-mute); }
/* Fenêtre du shift : avertissement non bloquant (hors alertes légales) */
.dp-warn { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-ctl); border: 1px solid var(--late-line); background: var(--late-bg); color: var(--a-fg); font-size: 0.85rem; line-height: 1.45; }
.dp-warn > i { margin-top: 3px; color: var(--late); flex: none; }
.dp-warn p { margin: 0 0 2px; }
.dp-warn small { display: block; margin-top: 4px; color: var(--a-mute); font-size: 0.76rem; }
/* « Mes disponibilités » */
.dp-my { display: grid; gap: 14px; color: var(--a-fg); }
.dp-my > .card { margin-bottom: 0; }
.dp-intro { display: flex; align-items: flex-start; gap: 12px; }
.dp-intro > i { margin-top: 3px; color: var(--a-link); flex: none; }
.dp-intro b { display: block; margin-bottom: 2px; }
.dp-intro p { margin: 0 0 10px; font-size: 0.86rem; line-height: 1.5; color: var(--a-mute); }
.dp-upd { margin: -2px 2px 0; font-size: 0.8rem; color: var(--a-mute); }
.dp-card { padding: 16px 18px; }
.dp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.dp-h h3 { margin: 0; font: 700 0.98rem var(--f-title); color: var(--a-fg); }
.dp-h .pl2-mute { font-size: 0.78rem; }
.dp-sub { margin: 0 0 10px; font-size: 0.82rem; color: var(--a-mute); line-height: 1.45; }
.dp-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; font-size: 0.82rem; color: var(--a-fg); line-height: 1.45; }
.dp-note > i { margin-top: 3px; color: var(--a-link); flex: none; font-size: 0.78rem; }
.dp-days { display: grid; gap: 0; margin-bottom: 12px; }
.dp-day { display: grid; grid-template-columns: 120px minmax(0, 420px); align-items: center; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--a-line); }
.dp-day:last-child { border-bottom: 0; }
.dp-dn { font-weight: 600; font-size: 0.88rem; color: var(--a-fg); }
.dp-sel { min-height: 44px; margin: 0; }
.dp-day.k-indispo .dp-sel { color: var(--a-mute); }
.dp-range { grid-column: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.84rem; color: var(--a-mute); }
.dp-range[hidden], .dp-hours[hidden] { display: none; }
.dp-range input { width: 150px; min-height: 44px; margin: 0; }
.dp-uns { list-style: none; margin: 0 0 12px; padding: 0; }
.dp-un { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--a-line); }
.dp-un:last-child { border-bottom: 0; }
.dp-un b { display: block; font-weight: 600; font-size: 0.88rem; }
.dp-un small { display: block; color: var(--a-mute); font-size: 0.78rem; overflow-wrap: anywhere; }
.dp-del { width: 44px; height: 44px; color: var(--a-mute); }
.dp-del:hover { color: var(--crit); }
.dp-del:disabled { opacity: 0.4; cursor: not-allowed; }
.dp-empty { margin: 0 0 12px; font-size: 0.84rem; color: var(--a-mute); }
.dp-card textarea { margin-bottom: 10px; }
.dp-save, .dp-add { min-height: 44px; }
.dp-privacy { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 8px; font-size: 0.8rem; color: var(--a-mute); line-height: 1.45; }
.dp-privacy > i { margin-top: 3px; color: var(--ok); flex: none; }
.dp-allday { margin-bottom: 10px; min-height: 44px; }
/* Responsable : « Disponibilités de l'équipe » (lecture seule) */
.dp-team { color: var(--a-fg); }
.dp-team-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.dp-team-h h3 { margin: 0 0 2px; font: 700 1.05rem var(--f-title); }
.dp-team-h p { margin: 0; font-size: 0.84rem; }
.dp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; align-items: start; }
.dp-p { padding: 14px; border-radius: 14px; border: 1px solid var(--a-line); background: var(--a-surface); min-width: 0; text-align: left; }
.dp-p.dp-none { border-style: dashed; padding: 10px 14px; }
.dp-p.dp-none .dp-p-h { margin-bottom: 0; align-items: center; }
.dp-p-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dp-p-n { min-width: 0; }
.dp-p-n b { display: block; font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-p-n small { display: block; font-size: 0.76rem; color: var(--a-mute); }
.dp-when { flex: none; font-size: 0.74rem; color: var(--a-mute); text-align: right; }
.dp-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dp-wd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 46px; padding: 5px 2px; border-radius: 8px; background: var(--a-surface2); text-align: center; }
.dp-wd span { font-size: 0.64rem; font-weight: 600; color: var(--a-mute); }
.dp-wd b { font-size: 0.7rem; font-weight: 700; line-height: 1.15; color: var(--a-fg); font-variant-numeric: tabular-nums; }
.dp-wd.k-journee { background: var(--ok-bg); } .dp-wd.k-journee b { color: var(--ok); }
.dp-wd.k-midi, .dp-wd.k-soir { background: var(--todo-bg); } .dp-wd.k-midi b, .dp-wd.k-soir b { color: var(--a-link); }
.dp-wd.k-plage { background: var(--ia-bg); } .dp-wd.k-plage b { color: var(--ia); }
.dp-wd.k-indispo { background: color-mix(in srgb, var(--a-mute) 18%, transparent); } .dp-wd.k-indispo b { color: var(--a-mute); }
.dp-p .dp-note { margin: 8px 0 0; }
.dp-p-un { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.82rem; }
.dp-p-un li { display: flex; align-items: flex-start; gap: 8px; }
.dp-p-un li > i { margin-top: 3px; font-size: 0.72rem; color: var(--a-mute); flex: none; }
.dp-p-un small { color: var(--a-mute); overflow-wrap: anywhere; }
.dp-p-c { margin: 10px 0 0; display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; color: var(--a-fg); overflow-wrap: anywhere; }
.dp-p-c > i { margin-top: 3px; color: var(--a-mute); flex: none; }
.dp-p .dp-empty { margin: 0; }
@media (max-width: 600px) {
    .dp-card { padding: 14px; }
    .dp-day { grid-template-columns: minmax(0, 1fr); }
    .dp-range { grid-column: 1; }
    .dp-range input { flex: 1 1 100px; width: auto; }
    .dp-save, .dp-add { width: 100%; }
    .dp-grid { grid-template-columns: minmax(0, 1fr); }
    .dp-intro .pl2-btn { min-height: 44px; }
}

/* ==== vague 4 · consultation ==== */
/* Historique et audits suspects (.cs-hist), fiche d'un audit ou d'une To Do réalisés (.cs-rec), fenêtres des Tâches
   (délégation, clôture, manuel d'exécution : .cs-mod sur .au-mod) et visionneuse photo. Jetons --a-* et états
   uniquement : clair par défaut, sombre quand la vue (Tableau de bord) ou le réglage « Apparence » le demande. */
.cs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cs-kick { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--a-mute); }
.cs-t-ok { color: var(--ok); } .cs-t-late { color: var(--late); } .cs-t-crit { color: var(--crit); } .cs-t-neu { color: var(--a-mute); }
.cs-card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow); color: var(--a-fg); min-width: 0; overflow: hidden; }
/* anneaux : valeur et signe % sur une ligne */
:is(.cs-hist, .cs-rec) .db-ring b { display: flex; align-items: center; justify-content: center; }
:is(.cs-hist, .cs-rec) .db-ring b small { font-size: 0.62em; font-weight: 700; margin-left: 1px; }
.cs-ring-lg { width: 64px; height: 64px; }
.cs-ring-lg b { width: 50px; height: 50px; font-size: 1rem; }

/* --- Historique : journée consultée --- */
.cs-day {
    display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 12px 16px; align-items: center;
    margin-bottom: 14px; padding: 14px 16px;
    background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow);
}
.cs-day-nav { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cs-day-btn {
    width: 44px; height: 44px; flex: none; display: grid; place-items: center; cursor: pointer;
    border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface); color: var(--a-fg); font-size: 0.9rem;
    transition: background .15s, border-color .15s;
}
.cs-day-btn:hover:not(:disabled) { background: var(--a-surface2); }
.cs-day-btn:disabled { opacity: 0.35; cursor: default; }
.cs-day-t { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.cs-day-t b { font: 800 1.12rem/1.25 var(--f-title); letter-spacing: -0.01em; color: var(--a-fg); }
.cs-day-pick { display: block; margin: 0; }
.cs-day-pick .input-primary { width: 100%; }
.cs-day-stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 12px; border-top: 1px solid var(--a-line); font-size: 0.86rem; color: var(--a-mute); }
.cs-day-stats b { font: 800 1rem/1 var(--f-title); color: var(--a-fg); margin-right: 5px; }
.cs-day-stats i { margin-right: 6px; font-size: 0.8rem; }
.cs-bar { margin-bottom: 14px; }
.cs-chip-ia .n { background: var(--ia-bg); color: var(--ia); }

/* --- Historique : liste plate de la journée (et des audits suspects) --- */
.cs-list { margin-bottom: 16px; overflow: hidden; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow); }
.cs-grp-s { margin-left: auto; font: 500 0.8rem/1 var(--f-text); color: var(--a-mute); }
.cs-row {
    display: grid; grid-template-columns: 52px 40px minmax(0, 1fr) auto 14px; gap: 14px; align-items: center;
    width: 100%; min-height: 76px; padding: 12px 18px;
    border: 0; border-top: 1px solid var(--a-line); background: none; color: var(--a-fg); font: inherit; text-align: left; cursor: pointer; transition: background .12s;
}
.cs-list > .tk-grp + .cs-row { border-top: 0; }
.cs-row:hover { background: color-mix(in srgb, var(--a-surface2) 60%, transparent); }
.cs-row:focus-visible { outline: 2px solid var(--o-blue); outline-offset: -2px; }
.cs-row-time { display: flex; flex-direction: column; gap: 3px; }
.cs-row-time b { font: 800 0.95rem/1 var(--f-title); color: var(--a-fg); }
.cs-row-time small { font-size: 0.76rem; color: var(--a-mute); }
.cs-row-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 1rem; background: var(--neu-bg); color: var(--neu); }
.cs-row-ico.todo { background: var(--todo-bg); color: var(--todo); }
.cs-row-ico.ia { background: var(--ia-bg); color: var(--ia); }
.cs-row-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cs-row-main > b { font: 700 0.96rem/1.3 var(--f-title); color: var(--a-fg); overflow-wrap: anywhere; }
.cs-row-main .tk-meta { margin-top: 0; }
.cs-row-st { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-row-sc { display: flex; justify-content: flex-end; }
.cs-row-go { color: var(--a-mute); font-size: 0.8rem; }
.cs-rate { min-width: 54px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cs-rate b { font: 800 1rem/1 var(--f-title); }
.cs-rate small { font-size: 0.76rem; color: var(--a-mute); white-space: nowrap; }
.cs-rate.ok b { color: var(--ok); } .cs-rate.late b { color: var(--late); } .cs-rate.crit b { color: var(--crit); }
/* audits suspects : anneau de fiabilité en tête, raisons, score à droite */
.cs-susp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin: -2px 0 12px; }
.cs-susp-h .au-back { min-height: 44px; }
.cs-susp-h .au-sub { margin: 0; }
.cs-row.cs-susp { grid-template-columns: 54px minmax(0, 1fr) auto 14px; align-items: start; }
.cs-row.cs-susp > .db-ring, .cs-row.cs-susp > .cs-row-sc, .cs-row.cs-susp > .cs-row-go { align-self: center; }
.cs-reasons { display: grid; gap: 3px; font-size: 0.8rem; color: var(--a-mute); }
.cs-reasons span { display: flex; gap: 7px; align-items: baseline; }
.cs-reasons span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--late); flex: none; transform: translateY(-2px); }

/* --- Fiche d'un audit ou d'une To Do --- */
.cs-rec-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cs-rec-top .au-back { min-height: 44px; }
.cs-rec-top .btn-sm { min-height: 40px; }
.cs-rec-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 24px; align-items: center; margin-bottom: 16px; padding: 20px 22px; }
.cs-rec-id { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.cs-rec-t { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cs-rec-t h2 { margin: 0; font-size: 1.45rem; color: var(--a-fg); overflow-wrap: anywhere; }
.cs-rec-t .tk-meta { margin: 0; font-size: 0.85rem; }
.cs-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: auto; border: 1px solid var(--a-line); border-radius: var(--r-md); overflow: hidden; }
.cs-kpi { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.cs-kpi + .cs-kpi { border-left: 1px solid var(--a-line); }
.cs-kpi > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.cs-kpi small { font-size: 0.78rem; color: var(--a-mute); }
.cs-kpi > span:last-child > b { font: 700 0.92rem/1.2 var(--f-title); }
.cs-kpi-n > b.num { min-width: 34px; font: 800 1.9rem/1 var(--f-title); text-align: center; }
.cs-ia-tag { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: var(--ia-bg); color: var(--ia); font-size: 0.7rem; font-weight: 700; }
.cs-rec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.cs-rec-side, .cs-rec-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 1200px) {
    .cs-rec-grid { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "main side"; }
    .cs-rec-grid.no-side { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
    .cs-rec-main { grid-area: main; }
    .cs-rec-side { grid-area: side; position: sticky; top: 16px; }
}
/* facteurs de fiabilité */
.cs-fac.late .tk-card-h h3 i { color: var(--late); }
.cs-fac.ok .tk-card-h h3 i { color: var(--ok); }
.cs-fac-l { list-style: none; margin: 0; padding: 4px 18px 10px; }
.cs-fac-l li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 0.86rem; color: var(--a-fg); }
.cs-fac-l li + li { border-top: 1px solid var(--a-line); }
.cs-fac-l b { font: 700 0.86rem/1.3 var(--f-title); white-space: nowrap; }
/* avis IA : cyan */
.cs-ia { border-color: var(--ia-line); background: linear-gradient(180deg, var(--ia-bg), var(--a-surface) 80%); }
.cs-ia .tk-card-h { border-bottom-color: var(--ia-line); }
.cs-ia .tk-card-h h3, .cs-ia .tk-card-h h3 i { color: var(--ia); }
.cs-ia-score { font: 800 1.1rem/1 var(--f-title); }
.cs-ia-b { display: grid; gap: 10px; padding: 12px 18px 16px; }
.cs-ia-b p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--a-fg); }
.cs-ia-flags { display: flex; flex-wrap: wrap; gap: 6px; }
/* réponses */
.cs-ans-l { list-style: none; margin: 0; padding: 0; }
.cs-ans { display: grid; gap: 10px; padding: 14px 18px; }
.cs-ans + .cs-ans { border-top: 1px solid var(--a-line); }
.cs-ans.is-non { box-shadow: inset 3px 0 0 var(--crit); }
.cs-ans-h { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.cs-ans-n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--a-surface2); color: var(--a-mute); font: 700 0.78rem/1 var(--f-title); }
.cs-ans.is-non .cs-ans-n { background: var(--crit-bg); color: var(--crit); }
.cs-ans-q { margin: 4px 0 0; font-size: 0.95rem; font-weight: 600; line-height: 1.4; color: var(--a-fg); overflow-wrap: anywhere; }
.cs-ans-h .bd { margin-top: 2px; }
.cs-rem, .cs-sop, .cs-ans-ph { margin: 0 0 0 40px; }
.cs-rem { padding: 10px 12px; border-radius: var(--r-sm); background: var(--crit-bg); color: var(--a-fg); font-size: 0.86rem; line-height: 1.45; }
.cs-rem b { margin-right: 6px; color: var(--crit); }
.cs-sop { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--a-surface2); color: var(--a-fg); font-size: 0.86rem; }
.cs-sop i { margin-top: 3px; color: var(--a-link); }
.cs-sop span { display: flex; flex-direction: column; gap: 2px; }
.cs-sop b { font-size: 0.78rem; font-weight: 600; color: var(--a-mute); }
.cs-ans-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.cs-ans-ph .au-ai { flex: 1; min-width: 180px; }
.cs-ans-ph .au-ai span { display: block; margin-top: 3px; color: var(--a-mute); }
/* vignette photo : ouvre la visionneuse */
.cs-thumb {
    position: relative; width: 128px; height: 96px; flex: none; padding: 0; overflow: hidden; cursor: zoom-in;
    border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface2);
}
.cs-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.cs-thumb:hover img { transform: scale(1.04); }
.cs-thumb > span {
    position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; display: grid; place-items: center;
    border-radius: 7px; background: color-mix(in srgb, var(--o-night) 72%, transparent); color: var(--on-solid); font-size: 0.72rem;
}

/* --- Fenêtres des Tâches : délégation, clôture, manuel d'exécution (sur la base .au-mod) --- */
.au-mod-ico.cs-ico-todo { background: var(--todo-bg); color: var(--todo); }
.au-mod-ico.cs-ico-ok { background: var(--ok-bg); color: var(--ok); }
.cs-mod .au-mod-q i { font-size: 0.8em; }
.cs-mod .form-group { margin-bottom: 14px; }
.cs-mod textarea.input-primary { min-height: 96px; }
.cs-mod .au-note { margin: 0 0 16px; }
.cs-ctx { display: grid; gap: 6px; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--a-surface2); border: 1px solid var(--a-line); }
.cs-ctx .cs-kick { color: var(--a-link); }
.cs-ctx-q { font: 700 0.95rem/1.35 var(--f-title); color: var(--a-fg); }
.cs-ctx-p { margin: 0; display: flex; gap: 8px; font-size: 0.86rem; line-height: 1.4; color: var(--a-fg); }
.cs-ctx-p i { margin-top: 3px; color: var(--late); }
.cs-ctx-none { margin: 2px 0 0; font-size: 0.8rem; color: var(--a-mute); }
.cs-thumb.cs-thumb-wide { width: 100%; height: 180px; margin-top: 6px; }
.cs-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 700; color: inherit; }
.cs-opt { font-weight: 400; color: var(--a-mute); }
.photo-placeholder.cs-proof { min-height: 96px; flex-direction: column; gap: 6px; margin-bottom: 0; border-width: 1.5px; }
.photo-placeholder.cs-proof.has-photo { flex-direction: row; justify-content: flex-start; padding: 10px 12px; }
.cs-proof-img { width: 88px; height: 66px; flex: none; object-fit: cover; border-radius: var(--r-sm); }
.btn-solid.cs-btn-ok { background: var(--ok-solid); box-shadow: none; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.cs-steps { list-style: none; margin: 0 0 18px; padding: 4px 14px; border-radius: 12px; background: var(--a-surface2); border: 1px solid var(--a-line); }
.cs-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; font-size: 0.93rem; line-height: 1.45; color: var(--a-fg); }
.cs-steps li + li { border-top: 1px solid var(--a-line); }
.cs-step-n { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--todo-bg); color: var(--todo); font: 700 0.8rem/1 var(--f-title); }
.cs-mod-one .btn-solid { width: 100%; min-height: 52px; }

/* --- Visionneuse photo (openLightbox) --- */
.lightbox-overlay { background: color-mix(in srgb, var(--o-night) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: calc(72px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); cursor: zoom-out; }
.lightbox-close {
    top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; width: 44px; height: 44px;
    background: color-mix(in srgb, var(--on-solid) 14%, transparent); color: var(--on-solid);
    border: 1px solid color-mix(in srgb, var(--on-solid) 22%, transparent); font-size: 1.2rem; transition: background .15s;
}
.lightbox-close:hover { background: color-mix(in srgb, var(--on-solid) 24%, transparent); }
#lightbox-img { max-width: min(1100px, 100%); max-height: calc(100dvh - 120px); border-radius: var(--r-md); box-shadow: var(--sh-pop); cursor: default; }

/* --- Tablette et téléphone --- */
@media (max-width: 1023px) {
    .cs-rec-h { grid-template-columns: minmax(0, 1fr); }
    .cs-kpis { grid-auto-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
    .cs-day { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    .cs-day-t b { font-size: 1rem; }
    .cs-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; align-items: start; }
    .cs-row-ico, .cs-row-go { display: none; }
    .cs-row-time { padding-top: 2px; }
    .cs-row-sc { align-self: center; }
    /* téléphone : la fiabilité reste en badge, l'anneau de gauche laisse la place au texte */
    .cs-row.cs-susp { grid-template-columns: minmax(0, 1fr) auto; }
    .cs-row.cs-susp > .db-ring { display: none; }
    .cs-rec-top .btn-sm { min-height: 44px; }
    .cs-rec-h { padding: 16px; gap: 14px; }
    .cs-rec-id .cs-row-ico { display: none; }
    .cs-rec-t h2 { font-size: 1.25rem; }
    .cs-kpi { flex-direction: column; gap: 8px; padding: 12px 6px; text-align: center; }
    .cs-kpi > span:last-child { align-items: center; }
    .cs-kpi-n > b.num { min-height: 64px; display: grid; place-items: center; }
    .cs-ans { padding: 12px 14px; }
    .cs-rem, .cs-sop, .cs-ans-ph { margin-left: 0; }
    .cs-thumb { width: 100%; height: 190px; }
    .cs-ans-ph .au-ai { min-width: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-row, .cs-thumb img, .cs-day-btn { transition: none; }
}
/* fin vague 4 · consultation */

/* ==== vague 4 · reglages ==== */
/* Sous-écrans des Réglages (hors Historique) : en-têtes de section, panneaux à lignes plates, éditeurs
   de modèles (audit, To Do), fenêtres de saisie (.rg-modal), analyse de la récurrence. Icônes au trait
   (rgIc), jetons --a-* et états uniquement : clair par défaut, lisible en .m-dark. */
.rg-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.rg-num, .rg-meta, .rg-count, .rg-stat, .rg-kpi b { font-variant-numeric: tabular-nums; }

/* --- En-tête de section : titre, sous-titre, action principale à droite --- */
.rg-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin: 4px 0 16px; }
.rg-head-t { min-width: 0; flex: 1 1 260px; }
.rg-h { margin: 0; font: 800 1.35rem/1.2 var(--f-title); letter-spacing: -0.02em; color: var(--a-fg); }
.rg-hs { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.4; color: var(--a-mute); }
.rg-head-act { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Boutons --- */
.rg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
    border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface); color: var(--a-fg);
    font: 600 0.9rem/1.2 var(--f-text); white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, filter .15s;
}
.rg-btn:hover { background: var(--a-surface2); }
.rg-btn:active { transform: scale(0.98); }
.rg-btn .rg-i { width: 17px; height: 17px; }
.rg-btn.pri { background: var(--o-grad-btn); color: var(--on-solid); border-color: transparent; box-shadow: var(--sh-cta); }
.rg-btn.pri:hover { filter: brightness(1.06); }
.rg-btn.ghost { background: transparent; border-color: transparent; color: var(--a-link); }
.rg-btn.ghost:hover { background: var(--todo-bg); }
.rg-btn.danger { color: var(--crit); }
.rg-btn.danger:hover { background: var(--crit-bg); border-color: var(--crit-line); }
.rg-btn.okc { color: var(--ok); }
.rg-btn.okc:hover { background: var(--ok-bg); border-color: var(--ok-line); }
.rg-btn.iac { color: var(--ia); }
.rg-btn.iac:hover { background: var(--ia-bg); border-color: var(--ia-line); }
.rg-btn.latec { color: var(--late); }
.rg-btn.latec:hover { background: var(--late-bg); border-color: var(--late-line); }
.rg-btn.sm { min-height: 36px; padding: 0 12px; font-size: 0.84rem; border-radius: var(--r-sm); }
.rg-btn.ico { width: 36px; padding: 0; }
.rg-btn.block { width: 100%; }
.rg-btn:disabled { opacity: .5; cursor: default; transform: none; }
label.rg-btn { user-select: none; }

/* --- Puces de filtre (même dessin que l'espace Tâches) --- */
.rg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; min-width: 0; }
.rg-usearch { position: relative; margin: 0 0 14px; max-width: 560px; }
.rg-usearch .rg-usearch-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; color: var(--a-mute); pointer-events: none; }
.rg-usearch input { width: 100%; padding-left: 42px; margin: 0; }
.rg-unomatch { padding: 22px 16px; text-align: center; color: var(--a-mute); }
.rg-unomatch p { margin: 0 0 12px; }
.rg-unomatch .rg-chips { justify-content: center; margin: 0; }
[data-users-view] .rg-row[hidden], [data-users-view] .rg-panel[hidden], .rg-unomatch[hidden] { display: none !important; }
.rg-chip {
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px;
    border: 1px solid var(--a-line); border-radius: var(--r-pill); background: var(--a-surface); color: var(--a-mute);
    font: 600 0.85rem/1 var(--f-text); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.rg-chip:hover { color: var(--a-fg); border-color: color-mix(in srgb, var(--a-fg) 22%, var(--a-line)); }
.rg-chip .rg-i { width: 15px; height: 15px; }
.rg-chip .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); display: inline-grid; place-items: center; font-size: 0.74rem; font-weight: 700; background: var(--a-surface2); color: var(--a-mute); font-variant-numeric: tabular-nums; }
.rg-chip.on { background: var(--todo-bg); color: var(--a-link); border-color: transparent; }
.rg-chip.on .n { background: var(--a-surface); color: var(--a-link); }

/* --- Panneau à lignes plates --- */
.rg-panel { margin-bottom: 16px; overflow: hidden; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow); color: var(--a-fg); }
.rg-panel-h { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 16px; border-bottom: 1px solid var(--a-line); }
.rg-panel-h h3 { flex: 1; min-width: 0; margin: 0; font: 700 0.98rem/1.25 var(--f-title); color: var(--a-fg); }
.rg-panel-h .rg-ht { flex: 1; min-width: 0; }
.rg-panel-h .rg-ht p { margin: 2px 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--a-mute); }
.rg-pin { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--todo-bg); color: var(--todo); }
.rg-pin .rg-i { width: 15px; height: 15px; }
.rg-pin.neu { background: var(--neu-bg); color: var(--neu); }
.rg-pin.ok { background: var(--ok-bg); color: var(--ok); }
.rg-pin.ia { background: var(--ia-bg); color: var(--ia); }
.rg-pin.late { background: var(--late-bg); color: var(--late); }
.rg-pin.crit { background: var(--crit-bg); color: var(--crit); }
.rg-count { font-size: 0.8rem; color: var(--a-mute); white-space: nowrap; }
.rg-panel > .empty, .rg-modal .empty { border: 0; box-shadow: none; border-radius: 0; background: none; }
#job-selector-area.rg-f[style*="block"], #resto-selector-area.rg-f[style*="block"] { display: flex !important; }
.rg-panel.is-link { cursor: pointer; transition: border-color .15s; }
.rg-panel.is-link:hover { border-color: color-mix(in srgb, var(--o-blue) 28%, var(--a-line)); }
.rg-panel-go { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--a-link); white-space: nowrap; }
.rg-panel-go .rg-i { width: 15px; height: 15px; }
.rg-rows > .rg-row + .rg-row { border-top: 1px solid var(--a-line); }
.rg-row { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 16px; }
.rg-row.is-off .rg-main > b, .rg-row.is-off .rg-ico, .rg-row.is-off .rg-av { opacity: .62; }
.rg-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--todo-bg); color: var(--todo); }
.rg-ico.ok { background: var(--ok-bg); color: var(--ok); }
.rg-ico.late { background: var(--late-bg); color: var(--late); }
.rg-ico.crit { background: var(--crit-bg); color: var(--crit); }
.rg-ico.ia { background: var(--ia-bg); color: var(--ia); }
.rg-ico.neu { background: var(--neu-bg); color: var(--neu); }
.rg-av { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--o-grad); color: var(--on-solid); font: 700 0.82rem/1 var(--f-title); }
.rg-av.neu { background: var(--neu-bg); color: var(--neu); }
.rg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rg-main > b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font: 700 0.98rem/1.3 var(--f-title); color: var(--a-fg); overflow-wrap: anywhere; }
.rg-main > b small { font: 600 0.75rem/1 var(--f-text); color: var(--a-mute); }
.rg-meta { font-size: 0.82rem; line-height: 1.4; color: var(--a-mute); overflow-wrap: anywhere; }
.rg-meta strong { font-weight: 600; color: var(--a-fg); }
.rg-ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rg-tag { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 2px 8px; border-radius: 6px; background: var(--a-surface2); color: var(--a-fg); font: 600 0.74rem/1.2 var(--f-text); max-width: 100%; overflow-wrap: anywhere; }
.rg-tag .rg-i { width: 13px; height: 13px; color: var(--a-mute); }
.rg-tag.todo { background: var(--todo-bg); color: var(--a-link); }
.rg-tag.todo .rg-i, .rg-tag.ok .rg-i, .rg-tag.crit .rg-i { color: currentColor; }
.rg-tag.ok { background: var(--ok-bg); color: var(--ok); }
.rg-tag.late { background: var(--late-bg); color: var(--late); }
.rg-tag.crit { background: var(--crit-bg); color: var(--crit); }
.rg-tag.ia { background: var(--ia-bg); color: var(--ia); }
.rg-main > .bd { align-self: flex-start; margin-top: 2px; }
.rg-st { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rg-act { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.rg-act-note { flex: none; font-size: 0.78rem; color: var(--a-mute); text-align: right; max-width: 150px; }
.rg-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--a-mute); }
.rg-stat .rg-i { width: 14px; height: 14px; }
.rg-stat.ok { color: var(--ok); }
.rg-stat.late { color: var(--late); }
.rg-stat.crit { color: var(--crit); }
.rg-kpi { flex: none; text-align: right; }
.rg-kpi b { display: block; font: 800 1.35rem/1 var(--f-title); letter-spacing: -0.02em; color: var(--a-fg); }
.rg-kpi b.crit { color: var(--crit); }
.rg-kpi b.late { color: var(--late); }
.rg-kpi b.ok { color: var(--ok); }
.rg-kpi b.mute { color: var(--a-mute); font-size: 1rem; }
.rg-kpi small { display: block; margin-top: 4px; font-size: 0.76rem; color: var(--a-mute); }
a.rg-rowlink { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; text-decoration: none; color: inherit; border-radius: var(--r-sm); }
a.rg-rowlink:hover .rg-main > b { color: var(--a-link); }

/* --- Encadrés d'information --- */
.rg-note { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--a-line); background: var(--a-surface); color: var(--a-fg); }
.rg-note > .rg-i { width: 20px; height: 20px; margin-top: 1px; }
.rg-note > div { min-width: 0; }
.rg-note b { display: block; font: 700 0.92rem/1.3 var(--f-title); }
.rg-note p { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--a-fg); }
.rg-note .rg-btn { margin-top: 10px; }
.rg-note.late { background: var(--late-bg); border-color: var(--late-line); }
.rg-note.late > .rg-i, .rg-note.late b { color: var(--late); }
.rg-note.ia { background: var(--ia-bg); border-color: var(--ia-line); }
.rg-note.ia > .rg-i, .rg-note.ia b { color: var(--ia); }

/* --- Formulaires : libellés au-dessus, groupes logiques --- */
.rg-sec { margin-bottom: 16px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow); color: var(--a-fg); }
.rg-sec-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--a-line); }
.rg-sec-h h3 { flex: 1; min-width: 0; margin: 0; font: 700 0.98rem/1.25 var(--f-title); color: var(--a-fg); }
.rg-sec-h p { flex-basis: 100%; margin: 0; padding-left: 38px; font-size: 0.82rem; line-height: 1.4; color: var(--a-mute); }
.rg-sec-b { display: grid; gap: 16px; padding: 16px 18px 18px; }
.rg-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rg-f > .form-label, .rg-modal .form-label { margin: 0; }
.rg-f .input-primary, .rg-f .input-light { width: 100%; }
.rg-opt { font-weight: 400; color: var(--a-mute); }
.rg-hint { margin: 0; font-size: 0.8rem; line-height: 1.4; color: var(--a-mute); }
.rg-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rg-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rg-mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.9rem; line-height: 1.6; }
textarea.rg-ta { min-height: 180px; resize: vertical; }
.rg-check {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; cursor: pointer;
    border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface2); color: var(--a-fg);
    font-size: 0.9rem; font-weight: 600; line-height: 1.35;
}
.rg-check input { width: 20px; height: 20px; flex: none; margin: 0; }
.rg-check .rg-i { color: var(--a-mute); }
.rg-seg { justify-self: start; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-ctl); background: var(--a-surface2); border: 1px solid var(--a-line); }
.rg-seg button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 8px; background: none; color: var(--a-mute); font: 600 0.84rem/1 var(--f-text); cursor: pointer; }
.rg-seg button:hover { color: var(--a-fg); }
.rg-seg button.on { background: var(--a-surface); color: var(--a-fg); box-shadow: 0 1px 2px rgba(5, 8, 26, 0.12); }
.rg-days { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-day { min-width: 52px; min-height: 44px; padding: 0 10px; border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface); color: var(--a-fg); font: 600 0.86rem/1 var(--f-text); cursor: pointer; }
.rg-day:hover { border-color: color-mix(in srgb, var(--a-fg) 25%, var(--a-line)); }
.rg-range { display: flex; align-items: center; gap: 10px; }
.rg-range > input { flex: 1; min-width: 0; }
.rg-range > span { color: var(--a-mute); font-size: 0.85rem; }
.rg-picks { max-height: 280px; overflow-y: auto; border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface); }
.rg-pick { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; cursor: pointer; }
.rg-pick + .rg-pick { border-top: 1px solid var(--a-line); }
.rg-pick:hover { background: var(--a-surface2); }
.rg-pick input { width: 20px; height: 20px; flex: none; margin: 0; }
.rg-pick b { min-width: 0; font-weight: 600; font-size: 0.9rem; color: var(--a-fg); overflow-wrap: anywhere; }
.rg-pick small { margin-left: auto; font-size: 0.78rem; color: var(--a-mute); white-space: nowrap; }

/* --- Éditeurs de modèles (audit, To Do) : page étroite, barre d'action en bas --- */
.rg-ed { max-width: 860px; margin-left: auto; margin-right: auto; }
.rg-ed-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.rg-back {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 14px 0 10px; flex: none;
    border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-surface); color: var(--a-fg); font: 600 0.88rem/1 var(--f-text); cursor: pointer;
}
.rg-back:hover { background: var(--a-surface2); }
.rg-ed-t { flex: 1; min-width: 0; }
.rg-ed-t small { display: block; font-size: 0.8rem; font-weight: 600; color: var(--a-mute); }
.rg-ed-t h2 { margin: 2px 0 0; font: 800 1.35rem/1.2 var(--f-title); letter-spacing: -0.02em; color: var(--a-fg); overflow-wrap: anywhere; }
.rg-step { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--todo-bg); color: var(--a-link); font: 700 0.82rem/1 var(--f-title); font-variant-numeric: tabular-nums; }
.rg-bar { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.rg-bar .btn-large-primary { width: auto; min-width: 240px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.rg-bar .btn-large-primary .rg-i { width: 19px; height: 19px; }

/* --- Fenêtres de saisie : même habillage, pied d'actions collé en bas de la fenêtre --- */
.rg-modal { display: flex; flex-direction: column; gap: 16px; }
.rg-mhead { display: flex; align-items: flex-start; gap: 12px; }
.rg-mhead > div { flex: 1; min-width: 0; }
.rg-mhead h3 { margin: 0; font: 800 1.18rem/1.25 var(--f-title); letter-spacing: -0.015em; color: var(--a-fg); overflow-wrap: anywhere; }
.rg-mhead p { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--a-mute); overflow-wrap: anywhere; }
.rg-mhead .rg-pin { width: 36px; height: 36px; border-radius: 10px; }
.rg-mhead .rg-pin .rg-i { width: 18px; height: 18px; }
.rg-mbody { display: grid; gap: 14px; }
.rg-mfoot {
    position: sticky; bottom: -24px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
    margin: 4px -24px -24px; padding: 14px 24px 24px; background: var(--a-surface); border-top: 1px solid var(--a-line);
}
.rg-mfoot .rg-btn { min-width: 120px; }
.rg-mfoot .rg-sp { flex: 1; }
.rg-mlist { display: flex; flex-direction: column; border: 1px solid var(--a-line); border-radius: var(--r-ctl); overflow: hidden; }
.rg-mlist > * + * { border-top: 1px solid var(--a-line); }
.rg-mrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 14px; font-size: 0.9rem; }
.rg-mrow b { font-weight: 600; color: var(--a-fg); min-width: 0; overflow-wrap: anywhere; }
button.rg-mrow { width: 100%; border: 0; background: var(--a-surface); color: var(--a-fg); font: inherit; text-align: left; cursor: pointer; justify-content: flex-start; }
button.rg-mrow:hover { background: var(--a-surface2); }
button.rg-mrow .rg-i { color: var(--a-mute); }
.rg-mrow .bd { margin-left: auto; }
.rg-quiz { display: grid; gap: 10px; }
.rg-quiz:empty { display: none; }
.rg-qz { padding: 12px; border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface2); display: grid; gap: 8px; }
.rg-qz-h { display: flex; align-items: center; gap: 8px; }
.rg-qz-h input { flex: 1; min-width: 0; }
.rg-qz-c { display: flex; align-items: center; gap: 10px; }
.rg-qz-c input[type="radio"] { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--ok-solid); }
.rg-qz-c input[type="text"] { flex: 1; min-width: 0; }
.rg-prog { display: grid; gap: 12px; padding: 8px 0 4px; text-align: center; }
.rg-prog .rg-pin { width: 52px; height: 52px; margin: 0 auto; border-radius: 16px; }
.rg-prog .rg-pin .rg-i { width: 24px; height: 24px; }
.rg-prog b { font: 700 1.05rem/1.3 var(--f-title); color: var(--a-fg); }
.rg-prog p { margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--a-mute); overflow-wrap: anywhere; }
.rg-prog .rg-st-l { font-size: 0.9rem; font-weight: 600; color: var(--a-link); }
#modal-content:has(> .rg-modal.wide) { max-width: 620px; }

/* --- Ordinateur large : la liste des sites et la fiabilité côte à côte --- */
.rg-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; align-items: start; }
@media (min-width: 1200px) { .rg-cols.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* --- Tablette et téléphone --- */
@media (max-width: 1023px) {
    .rg-btn.sm { min-height: 44px; }
    .rg-btn.ico { width: 44px; }
    .rg-chip { min-height: 44px; }
    .rg-seg button { min-height: 40px; }
    /* formulaire long : l'action principale reste à portée de pouce, collée au bas de la zone de contenu */
    /* #main-content garde une marge basse (barre du bas + 24 px) sous la barre du bas flottante de 64 px :
       la barre d'action se colle juste au-dessus de celle-ci */
    .rg-bar { position: sticky; bottom: calc(64px - var(--nav-height) - 24px); z-index: 6; margin: 4px -16px 0; padding: 12px 16px; background: var(--a-bg); border-top: 1px solid var(--a-line); }
    .rg-bar .btn-large-primary { flex: 1; min-width: 0; }
}
@media (min-width: 600px) and (max-width: 1023px) { .rg-bar { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; } }
@media (max-width: 599px) {
    .rg-hide-s { display: none; }
    .rg-h, .rg-ed-t h2 { font-size: 1.2rem; }
    .rg-head-act { width: 100%; }
    .rg-head-act > .rg-btn { flex: 1 1 0; min-width: 0; }
    .rg-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; }
    .rg-chips::-webkit-scrollbar { display: none; }
    .rg-row { flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; padding: 12px 14px; }
    .rg-row > .rg-main, .rg-row > a.rg-rowlink { flex: 1 1 0; }
    .rg-row > .rg-st { flex-direction: row; align-items: center; }
    .rg-row > .rg-act { width: 100%; justify-content: flex-start; padding-left: 52px; }
    .rg-row > .rg-act-note { max-width: none; width: 100%; padding-left: 52px; text-align: left; }
    .rg-row.tight { flex-wrap: nowrap; align-items: center; }
    .rg-row.tight > .rg-act { width: auto; padding-left: 0; flex-wrap: nowrap; }
    .rg-panel-h { padding: 10px 14px; }
    .rg-g2, .rg-g3 { grid-template-columns: minmax(0, 1fr); }
    .rg-sec-h { padding: 12px 14px; }
    .rg-sec-h p { padding-left: 0; }
    .rg-sec-b { padding: 14px; }
    .rg-ed-top { gap: 10px; }
    .rg-back span { display: none; }
    .rg-back { padding: 0; width: 44px; }
    .rg-mfoot { bottom: calc(-20px - env(safe-area-inset-bottom, 0px)); margin: 4px -20px calc(-20px - env(safe-area-inset-bottom, 0px)); padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
    .rg-mfoot .rg-btn { flex: 1 1 calc(50% - 4px); min-width: 0; white-space: normal; text-align: center; }
    .rg-mfoot .rg-sp { display: none; }
}
/* fin vague 4 · reglages */

/* ==== vague 4 · tracabilite ==== */
/* Traçabilité produit (onglet HACCP) : liste groupée par jour, rappel produit, saisie par photo */
.tr-view { min-width: 0; }
.tr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.tr-main { min-width: 0; }
/* « Rappel produit » toujours en bas, sous la liste (une seule colonne, ordinateur comme téléphone) */
.tr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.tr-search {
    flex: 1 1 280px; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px;
    background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-ctl); color: var(--a-mute);
}
.tr-search:focus-within { border-color: var(--a-link); box-shadow: var(--ring); }
.tr-search input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; outline: none; font: 500 0.92rem var(--f-text); color: var(--a-fg); }
.tr-search input::placeholder { color: var(--a-mute); }
.tr-periods, .tr-scope { margin-bottom: 0; padding-bottom: 0; }
.tr-periods .filter-btn, .tr-scope .filter-btn { min-height: 40px; }
.tr-err { margin-bottom: 12px; }
.tr-count { margin: 0 0 12px; font-size: 0.84rem; color: var(--a-mute); }
.tr-count b { color: var(--a-fg); }
.tr-li { align-items: flex-start; }
.tr-li.is-pending { background: color-mix(in srgb, var(--late-bg) 45%, transparent); }
.tr-thumb {
    position: relative; flex: none; width: 64px; height: 64px; padding: 0; border: 1px solid var(--a-line); border-radius: var(--r-sm);
    overflow: hidden; background: var(--a-surface2); color: var(--a-mute); display: grid; place-items: center; cursor: pointer;
}
.tr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-thumb:focus-visible { outline: none; box-shadow: var(--ring); }
.tr-thumb-n {
    position: absolute; right: 3px; bottom: 3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill);
    background: var(--chip-on-bg); color: var(--chip-on-fg); font-size: 0.72rem; font-weight: 700; display: grid; place-items: center;
}
.tr-lot {
    align-self: flex-start; display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; margin: 2px 0; padding: 3px 8px;
    border: 1px solid var(--a-line); border-radius: var(--r-sm); background: var(--a-surface2);
    font: 700 0.9rem var(--f-title); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--a-fg); overflow-wrap: anywhere;
}
.tr-lot span { font: 600 0.72rem var(--f-text); letter-spacing: 0; text-transform: uppercase; color: var(--a-mute); }
.tr-deliv { display: inline-flex; align-items: center; gap: 5px; }
.tr-deliv .hc-i { width: 14px; height: 14px; }
.tr-note { font-style: italic; }
.tr-more { width: 100%; min-height: 44px; margin-top: 14px; }

/* rappel produit */
.tr-recall { padding: 16px; }
.tr-recall-head { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin-bottom: 12px; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: inherit; }
button.tr-recall-head { min-height: 44px; align-items: center; cursor: pointer; }
.tr-recall-txt { flex: 1; min-width: 0; display: block; }
.tr-recall-title { display: block; font: 700 1rem var(--f-title); color: var(--a-fg); }
.tr-recall-chev { flex: none; color: var(--a-mute); transition: transform 0.15s; }
.tr-recall.open .tr-recall-chev { transform: rotate(180deg); }
.tr-recall-txt small { display: block; margin-top: 2px; font-size: 0.8rem; line-height: 1.4; color: var(--a-mute); }
.tr-recall-f { display: flex; gap: 8px; }
.tr-recall-f .input-light { flex: 1; min-width: 0; font-weight: 700; letter-spacing: 0.02em; }
.tr-recall-f .btn-solid { flex: none; min-height: 44px; }
.tr-recall-r { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px; border-radius: var(--r-ctl); }
.tr-recall-r > .hc-i { margin-top: 1px; }
.tr-recall-r b { display: block; font-size: 0.9rem; overflow-wrap: anywhere; }
.tr-recall-r small { display: block; margin-top: 2px; font-size: 0.8rem; line-height: 1.4; }
.tr-recall-r.ok { background: var(--ok-bg); color: var(--ok); }
.tr-recall-r.crit { background: var(--crit-bg); color: var(--crit); }
.tr-recall-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tr-recall-it {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px;
    border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface); color: var(--a-fg);
    font: inherit; text-align: left; cursor: pointer;
}
.tr-recall-it:hover { border-color: var(--a-link); }
.tr-recall-it img, .tr-recall-noimg {
    flex: none; width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; background: var(--a-surface2);
    display: grid; place-items: center; color: var(--a-mute);
}
.tr-recall-it-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-recall-it-t b { font-size: 0.84rem; font-weight: 700; }
.tr-recall-it-t small { font-size: 0.78rem; color: var(--a-mute); overflow-wrap: anywhere; }
.tr-recall-more { margin: 4px 0 0; font-size: 0.78rem; color: var(--a-mute); }
.tr-recall-load { padding: 14px 0 2px; }
.tr-recall .hc-note { margin-top: 12px; }

/* légende de la photo en grand (la visionneuse est toujours sombre : jeu sombre de marque) */
.tr-lb-cap {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(560px, calc(100% - 32px));
    display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--r-md);
    background: var(--ad-surface); border: 1px solid var(--ad-line); color: var(--ad-fg); font-family: var(--f-text); cursor: default;
}
.tr-lb-cap b { font-size: 0.98rem; overflow-wrap: anywhere; }
.tr-lb-cap span { font-size: 0.88rem; font-weight: 600; overflow-wrap: anywhere; }
.tr-lb-cap small { font-size: 0.8rem; color: var(--ad-mute); overflow-wrap: anywhere; }
.tr-lb-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.tr-lb-nav button {
    width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ad-line); border-radius: var(--r-ctl);
    background: var(--ad-surface2); color: var(--ad-fg); cursor: pointer;
}
.tr-lb-nav span { font-size: 0.82rem; color: var(--ad-mute); }

/* formulaire de saisie (modale) */
.tr-form-t { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--a-fg); }
.tr-form-sub { margin: 4px 0 14px; font-size: 0.84rem; color: var(--a-mute); }
.tr-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tr-shot-first {
    width: 100%; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border: 2px dashed var(--a-line); border-radius: var(--r-md); background: var(--a-surface2); color: var(--a-fg); cursor: pointer; font: inherit;
}
.tr-shot-first .hc-i { width: 28px; height: 28px; color: var(--a-link); }
.tr-shot-first b { font-size: 0.95rem; }
.tr-shot-first small { font-size: 0.78rem; color: var(--a-mute); }
.tr-shot, .tr-shot-add { position: relative; flex: none; width: 88px; height: 88px; border-radius: var(--r-ctl); overflow: hidden; }
.tr-shot { border: 1px solid var(--a-line); background: var(--a-surface2); }
.tr-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-shot.is-busy img { opacity: 0.5; }
.tr-shot-busy { position: absolute; inset: 0; display: grid; place-items: center; color: var(--a-fg); }
.tr-shot-x { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.tr-shot-x span {
    width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
    background: var(--a-surface); border: 1px solid var(--a-line); color: var(--a-fg); box-shadow: var(--a-shadow);
}
.tr-shot-x .hc-i { width: 14px; height: 14px; }
.tr-shot-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 2px dashed var(--a-line); background: none; color: var(--a-mute); cursor: pointer; font: inherit;
}
.tr-shot-add small { font-size: 0.75rem; font-weight: 600; }
.tr-off { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--late-bg); color: var(--late); font-size: 0.82rem; font-weight: 600; }
.tr-off[hidden] { display: none; }
.tr-f-lot .input-light { font: 700 1.05rem var(--f-title); letter-spacing: 0.03em; }
.tr-f-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tr-f-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.tr-f-actions .btn-secondary, .tr-f-actions .btn-ghost { width: 100%; min-height: 48px; }
.tr-form select:disabled { opacity: 0.75; }
@media (max-width: 639px) {
    .tr-tools { flex-direction: column; align-items: stretch; }
    .tr-search { flex: none; }
    .tr-periods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .tr-periods .filter-btn { min-width: 0; padding: 0 6px; justify-content: center; }
    .tr-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .tr-scope .filter-btn { min-width: 0; padding: 0 8px; justify-content: center; overflow: hidden; text-overflow: ellipsis; }
    .tr-thumb { width: 56px; height: 56px; }
    .tr-recall { padding: 10px 14px; }
    .tr-recall:not(.open) .tr-recall-head { margin-bottom: 0; }
    .tr-recall:not(.open) .tr-recall-body { display: none; }
    .tr-recall.open { padding-bottom: 14px; }
    .tr-search input { font-size: 0.86rem; }
    .tr-f-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .tr-recall-chev { transition: none; } }
/* Barre d'onglets HACCP à six onglets (Traçabilité ajoutée) : sans icônes sur tablette et petit
   ordinateur pour tout garder visible ; défilement horizontal en dernier recours */
@media (min-width: 640px) and (max-width: 1279px) {
    .hc-tabs:has(> .hc-tab:nth-child(6)) { overflow-x: auto; scrollbar-width: none; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--a-line); }
    .hc-tabs:has(> .hc-tab:nth-child(6))::-webkit-scrollbar { display: none; }
    .hc-tabs:has(> .hc-tab:nth-child(6)) .hc-tab { margin-bottom: 0; padding: 0 12px; }
    .hc-tabs:has(> .hc-tab:nth-child(6)) .hc-tab .hc-i { display: none; }
}

/* ==== vague 4 · assistant ==== */
/* Bouton d'en-tête (managers et admins) et panneau de discussion : volet latéral sur ordinateur,
   plein écran sur téléphone. Jetons --a-* et états uniquement ; le panneau reçoit m-dark ou m-light
   comme #app-main (assistant.js). Cibles de 44 px. */
.as-hbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 0; border: none; border-radius: var(--r-ctl); background: none; color: var(--a-mute); font-size: 1rem; cursor: pointer; }
.as-hbtn:hover, .as-hbtn[aria-expanded="true"] { color: var(--a-link); background: var(--a-surface2); }
.as-hbtn:focus-visible { outline: none; box-shadow: var(--ring); }
.as-hbtn[hidden], .header-actions > .as-hbtn[hidden] { display: none; }
.as-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 960; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--a-bg); color: var(--a-fg); border-left: 1px solid var(--a-line); box-shadow: var(--sh-pop); font-family: var(--f-text); }
.as-panel[hidden] { display: none; }
.as-head { display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top, 0px)) 6px 8px 16px; background: var(--a-surface); border-bottom: 1px solid var(--a-line); }
.as-logo { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-ctl); background: var(--o-grad); color: var(--on-solid); font-size: 0.95rem; }
.as-head-t { flex: 1; min-width: 0; }
.as-head-t h2 { margin: 0; font: 700 1rem/1.25 var(--f-title); color: var(--a-fg); }
.as-head-t small { display: block; color: var(--a-mute); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-ib { flex: none; min-width: 44px; min-height: 44px; border: none; border-radius: var(--r-ctl); background: none; color: var(--a-mute); font-size: 1.05rem; cursor: pointer; }
.as-ib:hover { background: var(--a-surface2); color: var(--a-fg); }
.as-ib:focus-visible, .as-chip:focus-visible, .as-link:focus-visible, .as-send:focus-visible { outline: none; box-shadow: var(--ring); }
.as-log { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.as-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.as-u { align-items: flex-end; }
.as-bub { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; }
.as-u .as-bub { background: var(--chip-on-bg); color: var(--chip-on-fg); border-bottom-right-radius: 6px; white-space: pre-wrap; }
.as-a .as-bub { background: var(--a-surface); color: var(--a-fg); border: 1px solid var(--a-line); border-bottom-left-radius: 6px; }
.as-md p { margin: 0 0 8px; }
.as-md p:last-child, .as-md ul:last-child, .as-md ol:last-child { margin-bottom: 0; }
.as-md ul, .as-md ol { margin: 4px 0 8px; padding-left: 20px; }
.as-md li { margin: 3px 0; }
.as-md .as-h { font: 700 0.92rem/1.4 var(--f-title); }
.as-md strong { font-weight: 700; }
.as-md code { padding: 1px 5px; border-radius: 6px; background: var(--a-surface2); font-size: 0.85em; }
.as-md a, .as-link { color: var(--a-link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.as-link { display: inline; padding: 2px 0; border: none; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.as-typing .as-bub { display: inline-flex; gap: 5px; padding: 14px 16px; }
.as-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a-mute); animation: as-blink 1.2s infinite ease-in-out; }
.as-dot:nth-child(2) { animation-delay: 0.2s; }
.as-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes as-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .as-dot { animation: none; opacity: 0.6; } }
.as-card { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--todo-line); border-radius: var(--r-md); background: var(--a-surface); box-shadow: var(--a-shadow); }
.as-card.is-done { border-color: var(--ok-line); }
.as-card.is-error { border-color: var(--crit-line); }
.as-card.is-cancelled, .as-card.is-expired, .as-card.is-used { border-color: var(--a-line); box-shadow: none; }
.as-card-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.as-card-h b { font: 700 0.95rem/1.3 var(--f-title); color: var(--a-fg); }
.as-dl { margin: 0; display: grid; grid-template-columns: minmax(78px, max-content) minmax(0, 1fr); gap: 5px 12px; font-size: 0.85rem; }
.as-dl > div { display: contents; }
.as-dl dt { color: var(--a-mute); }
.as-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.as-items { font-size: 0.85rem; }
.as-items b { display: block; margin-bottom: 4px; color: var(--a-mute); font-weight: 600; }
.as-items ol { margin: 0; padding-left: 22px; }
.as-items li { margin: 2px 0; overflow-wrap: anywhere; }
.as-card-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.as-card-act .btn-solid { min-width: 132px; }
.as-card-note { margin: 0; font-size: 0.84rem; color: var(--a-mute); }
.as-card-err { color: var(--crit); }
.as-empty h3, .as-off h3 { margin: 4px 0 6px; font: 700 1.1rem/1.3 var(--f-title); color: var(--a-fg); }
.as-empty p, .as-off p { margin: 0 0 16px; color: var(--a-mute); font-size: 0.88rem; line-height: 1.5; }
.as-off { margin: auto 0; text-align: center; padding: 24px 8px; }
.as-off > i { font-size: 1.6rem; color: var(--late); }
.as-sugg { display: flex; flex-direction: column; gap: 8px; }
.as-chip { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-align: left; border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface); color: var(--a-fg); font: 500 0.88rem/1.35 var(--f-text); cursor: pointer; }
.as-chip i { flex: none; width: 18px; text-align: center; color: var(--a-link); }
.as-chip:hover { border-color: var(--todo-line); background: var(--todo-bg); }
.as-err { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--crit-line); border-radius: var(--r-md); background: var(--crit-bg); color: var(--crit); font-size: 0.86rem; }
.as-err span { flex: 1; min-width: 160px; }
.as-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 6px; background: var(--a-surface); border-top: 1px solid var(--a-line); }
.as-form textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 140px; padding: 11px 12px; resize: none; border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-bg); color: var(--a-fg); font: 400 0.92rem/1.4 var(--f-text); outline: none; }
.as-form textarea:focus { border-color: var(--a-link); box-shadow: var(--ring); }
.as-form textarea::placeholder { color: var(--a-mute); }
.as-send { flex: none; width: 44px; height: 44px; border: none; border-radius: 12px; background: var(--o-grad-btn); color: var(--on-solid); font-size: 1rem; cursor: pointer; }
.as-send:disabled { opacity: 0.45; cursor: default; }
.as-foot { margin: 0; padding: 2px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--a-surface); color: var(--a-mute); font-size: 0.72rem; line-height: 1.4; text-align: center; }
@media (max-width: 767px) {
    .as-panel { width: 100vw; border-left: none; box-shadow: none; }
    body.as-lock { overflow: hidden; }
    .as-bub { max-width: 92%; }
}
@media (max-width: 599px) {
    .header-actions > .as-hbtn { min-width: 40px; }
}

/* ==== vague 4 · echeances ==== */
/* Module « Échéances » (direction 1) : synthèse, filtres, liste triée par échéance, fiche, formulaires et
   assistant des modèles en modale. Jetons --a-* et états uniquement : correct en .m-light et .m-dark. */
.ec-view { color: var(--a-fg); max-width: 1080px; }
.ec-view [hidden], .ec-modal [hidden] { display: none !important; }
.ec-view .num, .ec-modal .num { font-family: var(--f-title); font-variant-numeric: tabular-nums; }
.ec-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* En-tête */
.ec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ec-head-txt { min-width: 0; flex: 1 1 280px; }
.ec-title { margin: 0; font-size: 1.45rem; color: var(--a-fg); }
.ec-sub { margin: 4px 0 0; font-size: 0.86rem; color: var(--a-mute); }
.ec-head-act { display: flex; flex-wrap: wrap; gap: 8px; }
.ec-hbtn i { font-size: 0.9em; }
.ec-hbtn .ec-l-short { display: none; }

/* Synthèse : En retard / Sous 30 jours / À jour (boutons filtres) */
.ec-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ec-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 44px; padding: 14px 16px;
    background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow);
    font-family: var(--f-text); color: var(--a-fg); text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.ec-tile:hover { border-color: color-mix(in srgb, var(--a-link) 30%, var(--a-line)); }
.ec-tile:focus-visible { outline: none; box-shadow: var(--ring); }
.ec-tile-v { font-size: 1.7rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.ec-tile-l { font-size: 0.88rem; font-weight: 600; }
.ec-tile-s { font-size: 0.78rem; color: var(--a-mute); }
.ec-tile.crit .ec-tile-v { color: var(--crit); }
.ec-tile.late .ec-tile-v { color: var(--late); }
.ec-tile.ok .ec-tile-v { color: var(--ok); }
.ec-tile.crit.on { border-color: var(--crit); box-shadow: 0 0 0 3px var(--crit-bg); }
.ec-tile.late.on { border-color: var(--late); box-shadow: 0 0 0 3px var(--late-bg); }
.ec-tile.ok.on { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.ec-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; font-size: 0.84rem; color: var(--a-mute); }
.ec-note i { color: var(--a-link); margin-top: 2px; }

/* Filtres */
.ec-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.ec-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ec-seg .filter-btn { min-height: 44px; }
.ec-sel { flex: 1 1 180px; min-width: 0; max-width: 280px; }
.ec-sel select { width: 100%; }

/* Carte et liste triée par échéance */
.ec-card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow); min-width: 0; margin-bottom: 14px; overflow: hidden; }
.ec-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 18px; border-bottom: 1px solid var(--a-line); }
.ec-card-h h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; font-weight: 700; color: var(--a-fg); }
.ec-ct { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--neu-bg); color: var(--neu); font-size: 0.78rem; font-weight: 700; }
.ec-card > .empty { margin: 0; }
.ec-list { list-style: none; margin: 0; padding: 0; }
.ec-list > li + li { border-top: 1px solid var(--a-line); }
.ec-row {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto 14px; align-items: center; gap: 4px 12px;
    width: 100%; min-height: 64px; padding: 10px 18px; border: 0; background: none; color: var(--a-fg);
    font-family: var(--f-text); text-align: left; cursor: pointer; transition: background 0.15s;
}
.ec-row:hover { background: var(--a-surface2); }
.ec-row:focus-visible { outline: none; box-shadow: inset var(--ring); }
.ec-row.is-static { cursor: default; grid-template-columns: 36px minmax(0, 1fr) auto auto; }
.ec-row.is-static:hover { background: none; }
.ec-row-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ec-row-t b { font-weight: 600; font-size: 0.93rem; line-height: 1.3; overflow-wrap: anywhere; }
.ec-row-t small { font-size: 0.8rem; color: var(--a-mute); overflow-wrap: anywhere; }
.ec-row-d { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
.ec-due { font-size: 0.9rem; font-weight: 700; }
.ec-when { font-size: 0.78rem; color: var(--a-mute); }
.ec-row .bd { justify-self: end; justify-content: center; min-width: 104px; white-space: nowrap; }
.ec-row .bd.nodot { background: var(--neu-bg); color: var(--neu); }
.ec-row .ico-sq.neu, .ec-modal .ico-sq.neu { background: var(--neu-bg); color: var(--neu); }
.ec-chev { color: var(--a-mute); font-size: 0.8rem; }
.ec-rgpd { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; font-size: 0.8rem; line-height: 1.45; color: var(--a-mute); }
.ec-rgpd i { color: var(--ia); margin-top: 2px; }
.ec-foot { display: flex; justify-content: center; margin-top: 4px; }

/* Modales : fiche, « fait », pièce jointe, formulaire, assistant */
.modal-card:has(> .ec-modal.wide) { max-width: 760px; }
.ec-modal { color: var(--a-fg); text-align: left; }
.ec-modal .form-label { display: block; }
.ec-modal .input-primary { width: 100%; }
.ec-m-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ec-m-head h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; color: var(--a-fg); overflow-wrap: anywhere; }
.ec-m-sub { margin: 4px 0 0; font-size: 0.84rem; color: var(--a-mute); }
.ec-x { flex: none; width: 44px; height: 44px; margin: -10px -10px 0 0; border: 0; border-radius: var(--r-ctl); background: none; color: var(--a-mute); cursor: pointer; font-size: 1.1rem; }
.ec-x:hover { background: var(--a-surface2); color: var(--a-fg); }
.ec-m-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.ec-m-state .bd.nodot { background: var(--neu-bg); color: var(--neu); }
.ec-m-when { font-size: 0.88rem; font-weight: 600; }
.ec-callout { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--todo-bg); color: var(--a-fg); font-size: 0.85rem; line-height: 1.45; }
.ec-callout > i { color: var(--todo); margin-top: 3px; }
.ec-callout.late { background: var(--late-bg); }
.ec-callout.late > i { color: var(--late); }
.ec-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0 0 14px; }
.ec-dl dt { font-size: 0.78rem; color: var(--a-mute); }
.ec-dl dd { margin: 2px 0 0; font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
.ec-dl dd::first-letter { text-transform: uppercase; }
.ec-notes { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--a-surface2); font-size: 0.87rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ec-m-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.ec-ro { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 0.84rem; color: var(--a-mute); }
.ec-m-h4 { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 0.92rem; font-weight: 700; color: var(--a-fg); }
.ec-m-h4 .num { font-size: 0.8rem; color: var(--a-mute); }
.ec-mute { margin: 0; font-size: 0.85rem; color: var(--a-mute); }
.ec-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ec-files li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.ec-files small { flex: none; font-size: 0.78rem; color: var(--a-mute); }
.ec-file { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; font-size: 0.88rem; font-weight: 600; color: var(--a-link); text-decoration: none; overflow-wrap: anywhere; }
.ec-file:hover { text-decoration: underline; }
.ec-hist { list-style: none; margin: 0; padding: 0; }
.ec-ev { position: relative; display: flex; gap: 12px; padding: 0 0 12px; font-size: 0.86rem; }
.ec-ev::before { content: ''; position: absolute; left: 4px; top: 14px; bottom: 0; width: 2px; background: var(--a-line); }
.ec-ev:last-child::before { display: none; }
.ec-ev-dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--a-mute); }
.ec-ev-dot.ok { background: var(--ok); }
.ec-ev > div { min-width: 0; }
.ec-ev small { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--a-mute); }
.ec-ev p { margin: 4px 0 0; color: var(--a-fg); overflow-wrap: anywhere; }
.ec-ev .ec-file { min-height: 44px; }
.ec-help { margin: 6px 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--a-mute); }
.ec-help-box { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--a-surface2); color: var(--a-fg); }
.ec-m-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ec-sticky { position: sticky; bottom: -24px; z-index: 1; margin: 18px -24px -24px; padding: 12px 24px 16px; background: var(--a-surface); border-top: 1px solid var(--a-line); }
.ec-seg-full { display: flex; width: 100%; margin-bottom: 14px; }
.ec-seg-full .filter-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.ec-f-block { margin-bottom: 4px; }
.ec-f-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.ec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ec-chk, .ec-radio { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.ec-chk input, .ec-radio input { margin: 0; width: 16px; height: 16px; }
.ec-chk.active, .ec-radio.active { background: var(--todo-bg); color: var(--a-fg); border-color: var(--a-link); }
.ec-chk.is-have { opacity: 0.75; cursor: default; }
.ec-chk small { font-weight: 500; color: var(--a-mute); }
.ec-remind { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.ec-remind legend { padding: 0; }
.ec-addtype { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.ec-rgpd-in { margin-top: 14px; }
.ec-list-m { margin: 0 -24px; border-top: 1px solid var(--a-line); border-bottom: 1px solid var(--a-line); }
.ec-list-m .ec-row { padding: 10px 24px; }
.ec-w-list { display: flex; flex-direction: column; }
.ec-w-item { padding: 14px 0; border-top: 1px solid var(--a-line); }
.ec-w-item:first-child { border-top: 0; padding-top: 0; }
.ec-w-t { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.ec-w-t > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ec-w-t b { font-size: 0.93rem; font-weight: 600; overflow-wrap: anywhere; }
.ec-w-t small { font-size: 0.8rem; color: var(--a-mute); }
.ec-w-item .ec-chips { margin-bottom: 10px; }
.ec-w-item .form-group { margin-bottom: 0; }
.ec-all { min-height: 44px; }

/* Téléphone : liste sur deux lignes, synthèse compacte, boutons pleine largeur */
@media (max-width: 599px) {
    .ec-head-act { width: 100%; }
    .ec-head-act .ec-hbtn { flex: 1 1 0; min-width: 0; padding: 10px 12px; }
    .ec-head-act .ec-hbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ec-hbtn .ec-l-long { display: none; }
    .ec-hbtn .ec-l-short { display: inline; }
    .ec-sum { gap: 8px; }
    .ec-tile { padding: 12px; }
    .ec-tile-v { font-size: 1.45rem; }
    .ec-tile-l { font-size: 0.8rem; line-height: 1.25; }
    .ec-tile-s { display: none; }
    .ec-sel { flex: 1 1 calc(50% - 4px); max-width: none; }
    .ec-sel select { padding-left: 12px; padding-right: 32px; background-position: right 10px center; font-size: 0.9rem; text-overflow: ellipsis; }
    .ec-seg { width: 100%; }
    .ec-seg .filter-btn { flex: 1 1 0; }
    .ec-row { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 12px 16px; }
    .ec-row.is-static { grid-template-columns: 36px minmax(0, 1fr) auto; }
    .ec-row-d { grid-column: 2; grid-row: 2; flex-direction: row; align-items: baseline; gap: 8px; }
    .ec-row .bd { grid-column: 3; grid-row: 1; min-width: 0; }
    .ec-row .ec-chev { display: none; }
    .ec-card-h { padding: 8px 16px; }
    .ec-m-actions > * { flex: 1 1 100%; }
    .ec-m-foot > * { flex: 1 1 0; }
    .ec-sticky { bottom: calc(-20px - env(safe-area-inset-bottom, 0px)); margin: 18px -20px calc(-20px - env(safe-area-inset-bottom, 0px)); padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
    .ec-list-m { margin: 0 -20px; }
    .ec-list-m .ec-row { padding: 12px 20px; }
}
/* fin vague 4 · echeances */

/* ==== vague 4 · nettoyage : plan de nettoyage et de désinfection (HACCP, onglet Nettoyage) ==== */
/* Jetons --a-* et états uniquement : correct en .m-light et .m-dark ; cibles de 44 px ; rien ne déborde à 390 px. */
.pn { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pn h3, .pn h4 { color: var(--a-fg); }
.pn-sum { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.pn-sum-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pn-sum-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pn-sum-t h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font: 700 1.02rem var(--f-title); }
.pn-sum-t h3 .hc-i { color: var(--a-link); }
.pn-sum-t small { font-size: 0.82rem; color: var(--a-mute); overflow-wrap: anywhere; }
.pn-kpis { display: flex; gap: 18px; }
.pn-kpis div { display: flex; flex-direction: column; align-items: flex-end; }
.pn-kpis b { font: 800 1.35rem var(--f-title); color: var(--a-fg); line-height: 1.1; }
.pn-kpis b.is-late { color: var(--late); }
.pn-kpis b.is-ok { color: var(--ok); }
.pn-kpis small { font-size: 0.76rem; color: var(--a-mute); }
.pn-note { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: var(--r-ctl); font-size: 0.86rem; font-weight: 600; line-height: 1.4; background: var(--neu-bg); color: var(--a-fg); }
.pn-note .hc-i { margin-top: 1px; }
.pn-note.ok { background: var(--ok-bg); color: var(--ok); }
.pn-note.todo { background: var(--todo-bg); color: var(--todo); }
.pn-note.late { background: var(--late-bg); color: var(--late); }
.pn-note.crit { background: var(--crit-bg); color: var(--crit); }
.pn-todo-note { margin-bottom: 16px; align-items: flex-start; line-height: 1.4; }
.pn-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-acts > button { min-height: 44px; }
.pn-reset { color: var(--crit); }
.pn-hint { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 0.82rem; color: var(--a-mute); line-height: 1.45; }
.pn-hint .hc-i { width: 16px; height: 16px; margin-top: 1px; color: var(--late); }
.pn-err { margin: 0; font-size: 0.84rem; font-weight: 600; color: var(--crit); }
.pn-err:empty { display: none; }

/* panneaux intégrés à la page (dupliquer, réinitialiser, horaires, historique, suppression) */
.pn-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface2); color: var(--a-fg); }
.pn-panel p { margin: 0; font-size: 0.88rem; line-height: 1.45; }
.pn-panel.is-crit { border-color: color-mix(in srgb, var(--crit) 35%, var(--a-line)); background: var(--crit-bg); }
.pn-panel.is-crit p { color: var(--a-fg); }
.pn-panel.is-crit .btn-danger { background: var(--crit-solid); color: var(--on-solid); }
.pn-checks { display: flex; flex-direction: column; gap: 4px; }
.pn-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; cursor: pointer; font-size: 0.9rem; color: var(--a-fg); }
.pn-check input { width: 20px; height: 20px; flex: none; }
.pn-check span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.pn-check small { font-size: 0.78rem; color: var(--late); }
.pn-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.pn-slot { margin: 0; padding: 10px 12px; border: 1px solid var(--a-line); border-radius: var(--r-ctl); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
.pn-slot legend { padding: 0 4px; font-size: 0.82rem; font-weight: 700; color: var(--a-fg); }
.pn-slot label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 0.78rem; color: var(--a-mute); }
.pn-slot .input-primary { width: 100%; min-width: 0; padding: 8px 10px; color-scheme: inherit; }
.pn-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pn-hist li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--a-line); }
.pn-hist li:last-child { border-bottom: 0; }
.pn-hist b { font-size: 0.88rem; font-weight: 600; overflow-wrap: anywhere; }
.pn-hist small { font-size: 0.78rem; color: var(--a-mute); }

/* zones en accordéon */
.pn-zone { overflow: hidden; }
.pn-zone-h { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 16px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--a-fg); font-family: var(--f-text); }
.pn-zone-h:hover { background: var(--a-surface2); }
.pn-zone-h:focus-visible { outline: none; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--a-link) 35%, transparent); }
.pn-zone-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pn-zone-n b { font: 700 0.98rem var(--f-title); overflow-wrap: anywhere; }
.pn-zone-n small { font-size: 0.8rem; color: var(--a-mute); }
.pn-chev { color: var(--a-mute); transition: transform 0.15s; }
.pn-zone.is-open .pn-chev { transform: rotate(180deg); }
.pn-zone-b { border-top: 1px solid var(--a-line); }
.pn-zone-empty { margin: 0; padding: 12px 16px; font-size: 0.86rem; color: var(--a-mute); }
.pn-zone-f { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; }
.pn-zone-f .btn-ghost { min-height: 44px; }
.pn-zone-f .pn-del-zone { color: var(--crit); }
.pn-oil { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 16px 4px; padding: 8px 12px; border-radius: var(--r-ctl); background: var(--todo-bg); color: var(--todo); font-size: 0.85rem; font-weight: 600; }
.pn-oil span { flex: 1; min-width: 160px; }
.pn-oil .btn-ghost { min-height: 44px; color: var(--todo); }

/* éléments du plan */
.pn-it { border-bottom: 1px solid var(--a-line); }
.pn-it.is-late { background: color-mix(in srgb, var(--late-bg) 55%, transparent); }
.pn-it-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 6px 10px 6px 4px; }
.pn-it-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 44px; justify-content: center; padding: 6px 12px; border: 0; border-radius: var(--r-ctl); background: none; cursor: pointer; text-align: left; font-family: var(--f-text); color: var(--a-fg); }
.pn-it-t:hover { background: var(--a-surface2); }
.pn-it-t b { font-size: 0.92rem; font-weight: 600; overflow-wrap: anywhere; }
.pn-it-t small { font-size: 0.8rem; color: var(--a-mute); overflow-wrap: anywhere; }
.pn-it-st { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.pn-it-st small { font-size: 0.76rem; color: var(--a-mute); }
.pn-it-act { display: flex; gap: 4px; }
.pn-ib { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface); color: var(--a-fg); cursor: pointer; font-size: 0.9rem; }
.pn-ib:hover { background: var(--a-surface2); }
.pn-ib.crit { color: var(--crit); }
.pn-it-d { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.pn-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px; margin: 0; }
.pn-dl div { padding: 8px 10px; border-radius: var(--r-sm); background: var(--a-surface2); min-width: 0; }
.pn-dl dt { font-size: 0.74rem; color: var(--a-mute); }
.pn-dl dd { margin: 2px 0 0; font-size: 0.86rem; font-weight: 600; color: var(--a-fg); overflow-wrap: anywhere; }
.pn-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; color: var(--a-fg); line-height: 1.4; }
.pn-del { margin: 0 12px 12px; }

/* formulaire d'un élément */
.pn-form { margin: 10px 12px; padding: 14px; border: 1px solid color-mix(in srgb, var(--a-link) 35%, var(--a-line)); border-radius: var(--r-md); background: var(--a-surface2); display: flex; flex-direction: column; gap: 12px; }
.pn-form h4 { margin: 0; font: 700 0.95rem var(--f-title); }
.pn-f-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pn-f { display: flex; flex-direction: column; min-width: 0; }
.pn-f .input-primary { width: 100%; min-width: 0; }
.pn-wide { grid-column: 1 / -1; }
.pn-f[hidden], .pn-f-note[hidden] { display: none; }
.pn-f-note { margin: -4px 0 0; font-size: 0.82rem; color: var(--a-mute); }
.pn-addzone, .pn-copy { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.pn-addzone { padding: 12px 16px; }
.pn-addzone .pn-f, .pn-copy .pn-f { flex: 1; min-width: min(100%, 220px); }
.pn-addzone .btn-secondary, .pn-copy .btn-secondary { min-height: 44px; }

/* aucun plan sur le site */
.pn-empty { padding: 22px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pn-empty h3 { margin: 0; font: 700 1.05rem var(--f-title); }
.pn-empty p { margin: 0; font-size: 0.9rem; color: var(--a-mute); line-height: 1.5; max-width: 70ch; }
.pn-copy { width: 100%; padding-top: 12px; border-top: 1px solid var(--a-line); }

/* vue tous les sites */
.pn-site { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--a-line); background: none; cursor: pointer; text-align: left; color: var(--a-fg); font-family: var(--f-text); }
.pn-site:last-child { border-bottom: 0; }
.pn-site:hover { background: var(--a-surface2); }
.pn-site-st { flex: none; }
.pn-site .hc-site-go { display: block; color: var(--a-mute); }

@media (max-width: 899px) {
    .pn-f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
    .pn-sum { padding: 14px; }
    .pn-kpis { width: 100%; }
    .pn-kpis div { align-items: flex-start; }
    .pn-acts > button { flex: 1 1 calc(50% - 4px); min-width: 0; padding-left: 10px; padding-right: 10px; }
    .pn-acts > .btn-solid:first-child { flex-basis: 100%; }
    .pn-it-row { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 8px 8px 4px; row-gap: 4px; }
    .pn-it-st { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-left: 12px; text-align: left; }
    .pn-it-act { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; }
    .pn-f-grid { grid-template-columns: minmax(0, 1fr); }
    .pn-form { margin: 8px; padding: 12px; }
    .pn-site { flex-wrap: wrap; }
    .pn-site .hc-li-txt { flex-basis: calc(100% - 60px); }
    .pn-site-st { margin-left: 48px; }
    .pn-site .hc-site-go { display: none; }
}

/* ==== vague 4 · nuisibles ==== */
/* Onglet « Nuisibles » du HACCP : suivi des passages par site, bons d'intervention, contrats, fenêtres de saisie. Jetons uniquement. */
.nu-acts { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.nu-mute { color: var(--a-mute); font-size: 0.86rem; }
.nu-pre { white-space: pre-line; }
.nu-follow { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.nu-fcard { padding: 14px 16px; }
.nu-fcard.is-crit { border-color: var(--crit-line); }
.nu-fcard.is-late { border-color: var(--late-line); }
.nu-fcard-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-width: 0; }
.nu-fcard-h b { flex: 1; min-width: 0; font: 700 0.98rem var(--f-title); color: var(--a-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-fcard-h > .hc-i { color: var(--a-mute); }
.nu-dl { display: grid; gap: 0; margin: 0; }
.nu-dl > div { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--a-line); min-width: 0; }
.nu-fcard .nu-dl > div:first-child { border-top: 0; padding-top: 0; }
.nu-dl dt { font-size: 0.78rem; font-weight: 600; color: var(--a-mute); }
.nu-dl dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; color: var(--a-fg); font-size: 0.9rem; }
.nu-dd-v { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.nu-dd-v b { font-weight: 700; color: var(--a-fg); }
.nu-dd-v small { font-size: 0.8rem; color: var(--a-mute); }
.nu-dd-v small.is-crit { color: var(--crit); }
.nu-dl dd > .bd { flex: none; }
.nu-files { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.nu-file {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; padding: 6px 12px;
    border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface2); color: var(--a-link);
    font: 600 0.84rem var(--f-text); text-decoration: none; cursor: pointer;
}
.nu-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nu-file:hover { border-color: var(--a-link); }
.nu-file:focus-visible, .nu-row:focus-visible, .nu-opt:focus-within, .nu-reco-ck:focus-within, .nu-upl:focus-within { outline: none; box-shadow: var(--ring); }
button.nu-row { width: 100%; border: 0; border-bottom: 1px solid var(--a-line); background: none; color: var(--a-fg); font: inherit; text-align: left; cursor: pointer; min-height: 64px; }
button.nu-row:last-child { border-bottom: 0; }
button.nu-row:hover { background: var(--a-surface2); }
.nu-go { color: var(--a-mute); }
.nu-contract { align-items: flex-start; }
.nu-contract .nu-files { margin-top: 6px; }
.nu-c-end { gap: 8px; }
.nu-ib { min-height: 44px; }
.nu-ib .hc-i { width: 16px; height: 16px; }

/* Fenêtres (détail, intervention, contrat) */
.nu-mod { color: var(--a-fg); }
.nu-mod-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.nu-mod-h h3 { margin: 0; color: var(--a-fg); font-size: 1.12rem; }
.nu-mod-h p { margin: 4px 0 0; font-size: 0.86rem; line-height: 1.4; color: var(--a-mute); }
.nu-mod-bd { margin-bottom: 8px; }
.nu-dl-mod > div { padding: 8px 0; }
.nu-dl-mod dd { display: block; }
.nu-k { margin: 16px 0 8px; font-size: 0.84rem; font-weight: 600; color: var(--a-fg); }
.nu-k .num { color: var(--a-mute); font-weight: 500; }
.nu-hint { margin: -4px 0 10px; font-size: 0.8rem; line-height: 1.4; color: var(--a-mute); }
.nu-recos { list-style: none; margin: 0; padding: 0; border: 1px solid var(--a-line); border-radius: var(--r-md); overflow: hidden; }
.nu-recos li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--a-line); min-width: 0; }
.nu-recos li:first-child { border-top: 0; }
.nu-reco-t { flex: 1; min-width: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.nu-reco-e { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.nu-reco-e .btn-ghost { min-height: 44px; }
.nu-mod-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.nu-mod-act button { min-height: 48px; }
.nu-mod-act .hc-i { width: 16px; height: 16px; }

/* Saisie */
.nu-fld { display: grid; gap: 0; margin-top: 12px; min-width: 0; }
.nu-fld .input-light { width: 100%; min-width: 0; }
.nu-opt-t { font-weight: 400; color: var(--a-mute); }
.nu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.nu-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nu-full { grid-column: 1 / -1; }
.nu-seg, .nu-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.nu-opt {
    position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
    border: 1px solid var(--a-line); border-radius: var(--r-pill); background: var(--a-surface); color: var(--a-mute);
    font: 600 0.86rem var(--f-text); cursor: pointer; user-select: none;
}
.nu-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nu-opt:hover { color: var(--a-fg); }
.nu-opt.on { background: var(--chip-on-bg); color: var(--chip-on-fg); border-color: transparent; }
.nu-opt.on.ok { background: var(--ok-solid); color: var(--on-solid); }
.nu-opt.on.late { background: var(--late-solid); color: var(--on-solid); }
.nu-opt.on.crit { background: var(--crit-solid); color: var(--on-solid); }
.nu-row2 { display: flex; flex-wrap: wrap; gap: 8px; }
.nu-upl { position: relative; cursor: pointer; }
.nu-upl input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.nu-upl.is-busy { opacity: 0.7; cursor: progress; }
.nu-upl .hc-i, .nu-ai-btn .hc-i, .nu-add .hc-i { width: 16px; height: 16px; }
.nu-ai-btn { color: var(--ia); }
.nu-ai-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.nu-files-edit:empty { display: none; }
.nu-files-edit { margin-bottom: 8px; }
.nu-chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; padding: 0 0 0 12px;
    border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface2); color: var(--a-fg); font-size: 0.84rem;
}
.nu-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nu-chip button, .nu-x {
    flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r-ctl);
    background: none; color: var(--a-mute); cursor: pointer;
}
.nu-chip button:hover, .nu-x:hover { color: var(--crit); background: var(--crit-bg); }
.nu-chip .hc-i, .nu-x .hc-i { width: 16px; height: 16px; }
.nu-ai { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--ia-bg); color: var(--ia); font-size: 0.84rem; line-height: 1.4; }
.nu-ai .hc-i { width: 16px; height: 16px; margin-top: 1px; }
.nu-ai-err { background: var(--late-bg); color: var(--late); }
.nu-reco-ed { display: grid; gap: 8px; }
.nu-reco-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nu-reco-l .input-light { flex: 1; min-width: 0; }
.nu-reco-l.is-locked { padding: 8px 10px; border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface2); }
.nu-reco-txt { flex: 1; min-width: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.nu-reco-ck {
    position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center;
    border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface); color: transparent; cursor: pointer;
}
.nu-reco-ck input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.nu-reco-ck.on { background: var(--ok-solid); border-color: transparent; color: var(--on-solid); }
.nu-reco-l.is-locked .nu-reco-ck { width: 28px; height: 28px; cursor: default; }
.nu-reco-ck .hc-i { width: 16px; height: 16px; }
.nu-add { margin-top: 8px; min-height: 44px; }
.nu-plan { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--a-line); }
.nu-plan:first-of-type { border-top: 0; }
.nu-plan-s { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 600; }
.nu-plan-s .hc-i { width: 16px; height: 16px; color: var(--a-mute); }
.nu-plan .nu-upl, .nu-mod > .nu-upl { justify-self: start; min-height: 44px; }
@media (min-width: 600px) {
    #modal-content:has(.nu-mod) { max-width: 600px; }
}
/* Onglets du HACCP sur tablette : un onglet de plus (Nuisibles), onglets resserrés puis défilement horizontal
   plutôt qu'un débordement de la page (d'autres rubriques peuvent s'ajouter) */
@media (min-width: 640px) and (max-width: 1279px) {
    .hc-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .hc-tabs::-webkit-scrollbar { display: none; }
    .hc-tab { flex: none; gap: 6px; padding: 0 10px; margin-bottom: 0; }
}
/* Un seul site : les quatre rubriques du suivi côte à côte */
.nu-follow.is-one { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
    .nu-follow.is-one .nu-dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .nu-follow.is-one .nu-dl > div { align-content: start; padding: 0 16px; border-top: 0; border-left: 1px solid var(--a-line); }
    .nu-follow.is-one .nu-dl > div:first-child { padding-left: 0; border-left: 0; }
    .nu-follow.is-one .nu-dl dd { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; }
}
@media (max-width: 639px) {
    .nu-acts { display: grid; grid-template-columns: minmax(0, 1fr); }
    .nu-acts .btn-solid { order: -1; }
    .nu-acts button { min-height: 52px; }
    .nu-grid3 { grid-template-columns: 1fr 1fr; }
    .nu-grid3 > .nu-fld:first-child { grid-column: 1 / -1; }
    .nu-row2 > * { flex: 1 1 100%; }
    .nu-contract { flex-wrap: wrap; }
    .nu-c-end { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; padding-left: 46px; }
    .nu-mod-act { display: grid; grid-template-columns: 1fr 1fr; }
    .nu-mod-act .btn-solid:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .nu-recos li { flex-direction: column; align-items: stretch; }
    .nu-reco-e { justify-content: flex-start; }
}
/* fin vague 4 · nuisibles */

/* ==== vague 4 · pertes ==== */
/* Déclaration d'une perte (feuille #pt-sheet : produit, motif, grammage, photo), onglet « Pertes » du
   HACCP (historique, totaux, courbe, liste par jour), détail, motifs (admin), bouton de l'écran
   Aujourd'hui. Jetons --a-* et états uniquement : correct en .m-light et en .m-dark. Cibles de 44 px. */
body.pt-lock { overflow: hidden; }
.pt-sheet {
    position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: var(--overlay); color: var(--a-fg); font-family: var(--f-text);
}
.pt-sheet[hidden] { display: none; }
.pt-panel {
    display: flex; flex-direction: column; width: 100%; max-width: 620px; height: min(880px, calc(100dvh - 32px));
    background: var(--a-bg); border: 1px solid var(--a-line); border-radius: var(--r-lg); box-shadow: var(--sh-pop); overflow: hidden;
}
.pt-sh-h { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 18px; background: var(--a-surface); border-bottom: 1px solid var(--a-line); }
.pt-sh-h .pt-icon-btn:first-child { margin-left: -10px; }
.pt-sh-tt { flex: 1; min-width: 0; }
.pt-sh-tt h3 { margin: 0; font: 700 1.1rem var(--f-title); color: var(--a-fg); }
.pt-sh-tt p { margin: 2px 0 0; font-size: 0.8rem; color: var(--a-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-icon-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r-ctl); background: none; color: var(--a-fg); cursor: pointer; }
.pt-icon-btn:hover { background: var(--a-surface2); }
.pt-sh-b { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 20px; }
.pt-sh-f { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--a-surface); border-top: 1px solid var(--a-line); }
.pt-sh-f:empty { display: none; }
.pt-go { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; font-size: 1.05rem; cursor: pointer; }
.pt-go.is-idle { background: var(--a-surface2); color: var(--a-mute); box-shadow: none; }
.pt-go:disabled { opacity: 0.75; cursor: default; }
.pt-end { width: 100%; min-height: 48px; }
.pt-sheet :is(.pt-icon-btn, .pt-chip, .pt-key, .pt-tile, .pt-seg button, .pt-cam, .pt-other-btn, .pt-shot-img):focus-visible { outline: none; box-shadow: var(--ring); }

/* sections */
.pt-sec { margin-bottom: 20px; border-radius: var(--r-md); }
.pt-sec.pt-miss { padding: 10px; margin-left: -10px; margin-right: -10px; background: var(--crit-bg); box-shadow: inset 0 0 0 1px var(--crit-line); }
.pt-sec.pt-miss > .pt-lab, .pt-sec.pt-miss > .pt-lab-row .pt-lab { color: var(--crit); }
.pt-lab { margin: 0 0 8px; font-size: 0.84rem; font-weight: 700; color: var(--a-mute); }
.pt-lab-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pt-lab-row .pt-lab { margin: 0; }
.pt-req { margin-left: 4px; font-weight: 600; color: var(--crit); }
.pt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-chip {
    min-height: 44px; padding: 8px 14px; border: 1px solid var(--a-line); border-radius: var(--r-pill);
    background: var(--a-surface); color: var(--a-fg); font: 600 0.9rem var(--f-text); text-align: left; cursor: pointer;
}
.pt-chip:hover { border-color: color-mix(in srgb, var(--a-fg) 25%, var(--a-line)); }
.pt-chip.on { background: var(--chip-on-bg); color: var(--chip-on-fg); border-color: var(--chip-on-bg); }
.pt-note { width: 100%; margin-top: 10px; }
.pt-note.is-bad { border-color: var(--crit); box-shadow: 0 0 0 3px var(--crit-bg); }

/* étape 1 : produit */
.pt-search { position: relative; display: block; margin-bottom: 10px; }
.pt-search .hc-i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--a-mute); pointer-events: none; }
.pt-search input { width: 100%; min-height: 48px; padding-left: 42px; }
.pt-other { margin-bottom: 12px; border: 1px solid var(--a-line); border-radius: var(--r-md); background: var(--a-surface); }
.pt-other.on { border-color: var(--a-link); }
.pt-other-btn {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px;
    border: 0; border-radius: var(--r-md); background: none; color: var(--a-link); font: 600 0.92rem var(--f-text); text-align: left; cursor: pointer;
}
.pt-other-btn span { flex: 1; min-width: 0; }
.pt-other-btn .hc-i:last-child { color: var(--a-mute); }
.pt-other-in { padding: 0 14px 14px; }
.pt-other-in input { width: 100%; }
.pt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .pt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pt-tile {
    display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 0; overflow: hidden;
    border: 1px solid var(--a-line); border-radius: var(--r-md); background: var(--a-surface); color: var(--a-fg);
    box-shadow: var(--a-shadow); font: inherit; text-align: left; cursor: pointer; transition: transform 0.1s, border-color 0.15s;
}
.pt-tile:hover { border-color: var(--a-link); }
.pt-tile:active { transform: scale(0.97); }
.pt-tile-img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--a-surface2); color: var(--a-mute); overflow: hidden; }
.pt-tile-img img, .pt-prod-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-ini { font: 800 1.25rem var(--f-title); color: var(--a-mute); letter-spacing: 0.02em; }
.pt-tile-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    padding: 6px 8px 8px; min-height: calc(2.5em + 14px); font-size: 0.82rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere;
}
.pt-none { grid-column: 1 / -1; margin: 4px 0; font-size: 0.86rem; color: var(--a-mute); }

/* étape 2 : motif, grammage, photo, service */
.pt-prod { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; margin-bottom: 18px; border: 1px solid var(--a-line); border-radius: var(--r-md); background: var(--a-surface); }
.pt-prod-img { position: relative; flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-ctl); background: var(--a-surface2); overflow: hidden; }
.pt-prod-img .pt-ini { font-size: 0.95rem; }
.pt-prod b { flex: 1; min-width: 0; font-size: 0.98rem; font-weight: 700; overflow-wrap: anywhere; }
.pt-change { flex: none; min-height: 44px; }
.pt-seg { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--a-line); border-radius: var(--r-pill); background: var(--a-surface); }
.pt-seg button {
    min-width: 56px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-pill);
    background: none; color: var(--a-mute); font: 700 0.9rem var(--f-text); cursor: pointer;
}
.pt-seg button.on { background: var(--chip-on-bg); color: var(--chip-on-fg); }
.pt-seg-wide { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.pt-seg-wide button { min-height: 44px; }
.pt-wdisp, .pt-quick, .pt-pad { max-width: 440px; margin-left: auto; margin-right: auto; }
.pt-wdisp {
    display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; column-gap: 6px; min-height: 68px; padding: 8px 12px;
    border: 1px solid var(--a-line); border-radius: var(--r-md); background: var(--a-surface); color: var(--a-mute);
}
.pt-wdisp b { font: 800 2.1rem/1.2 var(--f-title); color: var(--a-mute); font-variant-numeric: tabular-nums; }
.pt-wdisp > span { font: 700 1.1rem var(--f-title); }
.pt-wdisp small { flex-basis: 100%; text-align: center; font-size: 0.8rem; }
.pt-wdisp.has { border-color: var(--a-link); }
.pt-wdisp.has b { color: var(--a-fg); }
.pt-wdisp.is-bad { border-color: var(--crit); }
.pt-wdisp.is-bad b { color: var(--crit); }
.pt-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; margin-bottom: 8px; }
.pt-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pt-key {
    min-height: 52px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface); color: var(--a-fg);
    font: 700 1.3rem var(--f-title); cursor: pointer; touch-action: manipulation;
}
.pt-key:active { background: var(--a-surface2); }
.pt-key:disabled { opacity: 0.35; cursor: default; }
.pt-key .hc-i { width: 24px; height: 24px; }
.pt-key-q { min-height: 44px; border-color: transparent; background: var(--todo-bg); color: var(--todo); font: 700 0.92rem var(--f-text); }
.pt-cam {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 64px;
    border: 2px dashed var(--a-line); border-radius: var(--r-md); background: var(--a-surface); color: var(--a-link);
    font: 700 1rem var(--f-text); cursor: pointer;
}
.pt-cam .hc-i { width: 24px; height: 24px; }
.pt-sec.pt-miss .pt-cam { border-color: var(--crit); color: var(--crit); }
.pt-shot { display: flex; align-items: center; gap: 14px; }
.pt-shot-img { flex: none; width: 96px; height: 96px; padding: 0; border: 1px solid var(--a-line); border-radius: var(--r-md); overflow: hidden; background: var(--a-surface2); cursor: zoom-in; }
.pt-shot-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-shot-t { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pt-shot-t small { font-size: 0.82rem; color: var(--a-mute); }
.pt-shot-t small.is-ok { color: var(--ok); font-weight: 600; }
.pt-shot-t .btn-secondary { min-height: 44px; }
.pt-shot-t .hc-i { width: 16px; height: 16px; }

/* étape 3 : confirmation */
.pt-done { padding: 40px 8px 24px; text-align: center; }
.pt-done-ic { width: 76px; height: 76px; display: inline-grid; place-items: center; margin-bottom: 16px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.pt-done-ic .hc-i { width: 38px; height: 38px; stroke-width: 2.4; }
.pt-done-ic.is-late { background: var(--late-bg); color: var(--late); }
.pt-done-t { margin: 0 0 6px; font: 800 1.35rem var(--f-title); color: var(--a-fg); }
.pt-done-s { margin: 0; font-size: 0.95rem; color: var(--a-mute); overflow-wrap: anywhere; }
.pt-done-s b { color: var(--a-fg); }
.pt-done-n { max-width: 340px; margin: 12px auto 0; font-size: 0.86rem; font-weight: 600; color: var(--late); }

@media (max-width: 599px) {
    .pt-sheet { padding: 0; align-items: stretch; }
    .pt-panel { max-width: none; height: 100%; border: 0; border-radius: 0; }
    .pt-sh-b { padding: 14px 16px 18px; }
    .pt-sh-f { padding-left: 16px; padding-right: 16px; }
    .pt-grid { gap: 8px; }
}

/* onglet Pertes : historique */
.pt-actions .hc-cta .hc-i, .pt-today-btn .hc-i { width: 20px; height: 20px; }
.pt-q { margin-bottom: 12px; }
.pt-tools { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pt-tools .hc-chips { min-width: 0; margin-bottom: 10px; }
.pt-csv { flex: none; }
.pt-csv .hc-i { width: 17px; height: 17px; }
.pt-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; align-items: end; margin-bottom: 16px; }
.pt-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pt-f > span { font-size: 0.78rem; font-weight: 600; color: var(--a-mute); }
.pt-f select { width: 100%; min-width: 0; }
.pt-clear { justify-self: start; min-height: 44px; }
.pt-clear .hc-i { width: 16px; height: 16px; }
.pt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.pt-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.pt-kpi small { font-size: 0.8rem; font-weight: 600; color: var(--a-mute); }
.pt-kpi b { font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: var(--a-fg); }
.pt-kpi span { font-size: 0.76rem; color: var(--a-mute); }
.pt-chart { padding: 14px 16px 10px; margin-bottom: 16px; }
.pt-chart-h { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pt-chart-h b { font-size: 0.95rem; font-weight: 700; color: var(--a-fg); }
.pt-chart-h small { font-size: 0.8rem; color: var(--a-mute); }
.pt-chart svg { display: block; width: 100%; height: 110px; overflow: visible; }
.pt-chart-a { fill: var(--todo-bg); stroke: none; }
.pt-chart-l { fill: none; stroke: var(--a-link); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pt-chart-x { display: flex; justify-content: space-between; margin-top: 4px; font-size: 0.76rem; color: var(--a-mute); }
.pt-break { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; margin-bottom: 4px; }
.pt-break-c .hc-card-h { padding: 12px 16px; }
.pt-break-c .hc-card-h h3 { font-size: 0.92rem; }
.pt-bars { display: grid; gap: 10px; padding: 12px 16px 14px; }
.pt-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; }
.pt-bar-l { font-size: 0.86rem; font-weight: 600; color: var(--a-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-bar-v { font-size: 0.86rem; font-weight: 700; color: var(--a-fg); white-space: nowrap; }
.pt-bar-v small { font-family: var(--f-text); font-weight: 500; color: var(--a-mute); }
.pt-bar-t { grid-column: 1 / -1; display: block; height: 6px; border-radius: 99px; background: var(--a-surface2); overflow: hidden; }
.pt-bar-t i { display: block; height: 100%; border-radius: inherit; background: var(--o-grad); }
.pt-days .hc-group:first-child { margin-top: 20px; }
.pt-list { overflow: hidden; }
.pt-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 16px; border-bottom: 1px solid var(--a-line); }
.pt-row:last-child { border-bottom: 0; }
.pt-thumb {
    flex: none; width: 56px; height: 56px; display: grid; place-items: center; padding: 0; overflow: hidden;
    border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface2); color: var(--a-mute);
}
button.pt-thumb { cursor: zoom-in; }
.pt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-row-t {
    flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 0;
    border: 0; background: none; color: inherit; font: inherit; text-align: left;
}
button.pt-row-t { cursor: pointer; border-radius: var(--r-sm); }
button.pt-row-t:hover b { color: var(--a-link); }
button.pt-row-t:focus-visible { outline: none; box-shadow: var(--ring); }
.pt-row-t b { font-size: 0.92rem; font-weight: 600; color: var(--a-fg); overflow-wrap: anywhere; }
.pt-row-t small { font-size: 0.8rem; color: var(--a-mute); overflow-wrap: anywhere; }
.pt-row-e { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pt-row-e b { font-size: 1rem; font-weight: 800; color: var(--a-fg); white-space: nowrap; }
.pt-more { width: 100%; margin-top: 12px; }

/* détail d'une déclaration (modale) */
.pt-d-title { margin: 0 0 12px; overflow-wrap: anywhere; }
.pt-d-photos { display: grid; gap: 8px; margin-bottom: 14px; }
.pt-d-photo { display: block; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden; background: var(--a-surface2); cursor: zoom-in; }
.pt-d-photo img { display: block; width: 100%; max-height: 280px; object-fit: cover; }
.pt-dl { display: grid; margin: 0 0 18px; }
.pt-dl-r { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--a-line); }
.pt-dl-r dt { font-size: 0.82rem; font-weight: 600; color: var(--a-mute); }
.pt-dl-r dd { margin: 0; font-size: 0.9rem; color: var(--a-fg); overflow-wrap: anywhere; }
.pt-dl-r dd small { color: var(--a-mute); }
.pt-dl-r dd small.hc-sync { color: var(--late); }
.pt-d-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.pt-d-act button { min-width: 130px; }
.pt-d-act .hc-i { width: 16px; height: 16px; }

/* motifs de perte (réglage admin, modale) */
.pt-cfg-intro { margin: 6px 0 12px; font-size: 0.82rem; color: var(--a-mute); }
.pt-cfg-list { display: grid; gap: 8px; margin-bottom: 12px; }
.pt-cfg-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.pt-cfg-r input[type="text"] { width: 100%; min-width: 0; }
.pt-cfg-r.off input[type="text"] { color: var(--a-mute); text-decoration: line-through; }
.pt-cfg-on { display: inline-flex; align-items: center; gap: 6px; min-width: 104px; min-height: 44px; padding: 0 4px; font-size: 0.82rem; font-weight: 600; color: var(--a-mute); white-space: nowrap; cursor: pointer; }
.pt-cfg-on input { width: 20px; height: 20px; accent-color: var(--o-blue); }
.pt-cfg-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 18px; }
.pt-cfg-add input { min-width: 0; }
.pt-cfg-add .hc-i { width: 16px; height: 16px; }
.pt-cfg-cut { display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; font-weight: 600; color: var(--a-fg); }
.pt-cfg-cut input { max-width: 170px; }
.pt-cfg-save { width: 100%; margin-top: 6px; }
.pt-cfg-cancel { width: 100%; margin-top: 6px; }

/* Aujourd'hui (employé cuisine) : bouton « Déclarer une perte » sous « Relevés HACCP » */
.pt-today-btn { margin-top: 10px; }
.pt-today-btn .hc-i { color: var(--crit); }

@media (max-width: 639px) {
    .pt-tools { flex-direction: column; align-items: stretch; gap: 0; }
    .pt-csv { width: 100%; margin-bottom: 12px; }
    .pt-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .pt-clear { grid-column: 1 / -1; justify-self: stretch; }
    .pt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .pt-kpi { padding: 12px 14px; }
    .pt-kpi b { font-size: 1.25rem; }
    .pt-row { gap: 10px; padding: 10px 14px; }
    .pt-thumb { width: 48px; height: 48px; }
    .pt-d-act button { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pt-tile { transition: none; }
}
/* fin vague 4 · pertes */

/* ==== vague 5 · contrôle : dossier contrôle sanitaire (bouton du HACCP, fenêtre de génération du PDF) ==== */
/* Jetons --a-* et états uniquement : correct en .m-light et en .m-dark ; cibles de 44 px ; rien ne déborde à 390 px. */
.cx-head-btn { flex: none; min-height: 44px; margin-left: auto; white-space: nowrap; }
.cx-head-btn .hc-i, .cx-reg-btn .hc-i, .cx-act .hc-i { width: 16px; height: 16px; }
.cx-short { display: none; }
.cx-mod { display: grid; gap: 16px; color: var(--a-fg); }
.cx-mod-h { display: flex; align-items: flex-start; gap: 12px; }
.cx-mod-h > div { flex: 1; min-width: 0; }
.cx-mod-h h3 { margin: 0; font: 800 1.15rem/1.25 var(--f-title); letter-spacing: -0.015em; color: var(--a-fg); }
.cx-mod-h p { margin: 4px 0 0; font-size: 0.86rem; line-height: 1.45; color: var(--a-mute); }
.cx-x { flex: none; width: 44px; height: 44px; margin: -8px -8px 0 0; display: grid; place-items: center; border: 0; border-radius: var(--r-ctl); background: none; color: var(--a-mute); cursor: pointer; }
.cx-x:hover { color: var(--a-fg); background: var(--a-surface2); }
.cx-fld { display: grid; min-width: 0; }
.cx-fld select { width: 100%; min-width: 0; min-height: 44px; }
.cx-fs { min-width: 0; margin: 0; padding: 0; border: 0; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--a-line); border-radius: var(--r-pill); background: var(--a-surface); color: var(--a-mute); font: 600 0.86rem var(--f-text); cursor: pointer; }
.cx-chip:hover:not(:disabled) { color: var(--a-fg); }
.cx-chip.on { background: var(--chip-on-bg); color: var(--chip-on-fg); border-color: transparent; }
.cx-chip:disabled { cursor: not-allowed; opacity: 0.6; }
.cx-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.cx-date { display: grid; gap: 4px; min-width: 0; font-size: 0.82rem; font-weight: 600; color: var(--a-mute); }
.cx-date input { width: 100%; min-width: 0; min-height: 44px; }
.cx-hint { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--a-mute); }
.cx-hint.is-err { color: var(--crit); font-weight: 600; }
.cx-secs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cx-sec {
    position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 6px 10px;
    border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface); color: var(--a-fg); font-size: 0.86rem; cursor: pointer;
}
.cx-sec input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.cx-sec:focus-within { box-shadow: var(--ring); }
.cx-sec.is-off { opacity: 0.6; cursor: not-allowed; }
.cx-ck { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid var(--a-mute); border-radius: 6px; color: transparent; }
.cx-ck .hc-i { width: 14px; height: 14px; stroke-width: 2.6; }
.cx-sec.on .cx-ck { background: var(--chip-on-bg); border-color: transparent; color: var(--chip-on-fg); }
.cx-sec-t { min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.cx-trn { margin-top: 14px; }
.cx-k { margin: 0 0 6px; font-size: 0.84rem; font-weight: 600; color: var(--a-fg); }
.cx-prog { display: grid; gap: 6px; }
.cx-prog[hidden] { display: none; }
.cx-bar { height: 8px; overflow: hidden; border-radius: var(--r-pill); background: var(--a-surface2); }
.cx-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--a-link); transition: width 0.3s ease; }
.cx-prog p { margin: 0; font-size: 0.84rem; color: var(--a-mute); }
.cx-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-ctl); font-size: 0.85rem; line-height: 1.4; }
.cx-note .hc-i { width: 16px; height: 16px; margin-top: 1px; }
.cx-note.ok { background: var(--ok-bg); color: var(--ok); }
.cx-note.late { background: var(--late-bg); color: var(--late); }
.cx-note.crit { background: var(--crit-bg); color: var(--crit); }
/* Pied collant : progression, message et actions restent visibles quand la fenêtre défile (téléphone) */
.cx-foot {
    position: sticky; bottom: -24px; z-index: 2; display: grid; gap: 10px;
    margin: 0 -24px -24px; padding: 14px 24px 24px; background: var(--a-surface); border-top: 1px solid var(--a-line);
}
.cx-foot #cx-msg:empty { display: none; }
.cx-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.cx-act button { min-height: 48px; }
.cx-act .btn-solid:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
@media (min-width: 600px) {
    #modal-content:has(> .cx-mod) { max-width: 600px; }
}
@media (max-width: 639px) {
    .cx-head-btn { padding: 0 12px; }
    .cx-long { display: none; }
    .cx-short { display: inline; }
    .hc-reg-exports { flex-wrap: wrap; }
    .hc-reg-exports .cx-reg-btn { flex-basis: 100%; }
}
@media (max-width: 599px) {
    .cx-foot { bottom: calc(-20px - env(safe-area-inset-bottom, 0px)); margin: 0 -20px calc(-20px - env(safe-area-inset-bottom, 0px)); padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 479px) {
    .cx-secs { grid-template-columns: minmax(0, 1fr); }
    .cx-act button { flex: 1 1 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cx-bar i { transition: none; }
}
/* fin vague 5 · contrôle */

/* ==== vague 4 · recette : barre d'onglets HACCP sur ordinateur, rubriques secondaires dans « Plus » ==== */
.hc-tabs-wrap { position: relative; }
.hc-tab-more .hc-caret { width: 0; height: 0; margin-left: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.7; }
.hc-dmore { position: absolute; top: calc(100% + 4px); z-index: 40; min-width: 210px; display: grid; gap: 2px; padding: 6px;
    background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-ctl); box-shadow: var(--sh-pop); }
.hc-dmore[hidden] { display: none; }
.hc-dmore-i { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
    color: var(--a-fg); font: 600 0.9rem var(--f-text); text-align: left; cursor: pointer; }
.hc-dmore-i:hover, .hc-dmore-i:focus-visible { background: var(--a-surface2); outline: none; }
.hc-dmore-i.on { color: var(--a-link); background: var(--todo-bg); }
.hc-dmore-i .hc-i { width: 18px; height: 18px; flex: none; }
.hc-tab.hc-tab-more, .hc-tab.hc-tab-more.on { cursor: pointer; }
/* Tablette : le bouton « Plus » garde un libellé court (la rubrique active reste signalée par son état) */
.hc-more-short { display: none; }
@media (max-width: 1279px) {
    .hc-tab-more .hc-more-long { display: none; }
    .hc-tab-more .hc-more-short { display: inline; }
}

/* ==== vague 6 · stockage-h0 : mention « Historique plus ancien disponible en ligne » (démarrage hors ligne) ==== */
.lh-note { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; padding: 12px 14px; border: 1px solid var(--a-line); border-radius: var(--r-ctl);
    background: var(--a-surface); color: var(--a-fg); font-size: 0.88rem; line-height: 1.4; }
.lh-note i { color: var(--a-mute); margin-top: 2px; }
.lh-note span { display: grid; gap: 2px; min-width: 0; }
.lh-note small { color: var(--a-mute); font-size: 0.8rem; }

/* ==== vague 6 · cache-p2 : bandeau « Nouvelle version disponible » (jamais de rechargement forcé) ==== */
.up-banner { position: fixed; z-index: 3500; left: 16px; right: 16px; bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 14px;
    background: var(--btn-primary); color: var(--on-solid); box-shadow: var(--sh-pop); font: 600 0.9rem var(--f-text); }
.up-banner > span { flex: 1; min-width: 0; }
.up-banner .up-btn { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-ctl); background: var(--on-solid); color: var(--btn-primary);
    font: 700 0.9rem var(--f-text); cursor: pointer; }
.up-banner .up-x { width: 44px; height: 44px; flex: none; border: 0; border-radius: var(--r-ctl); background: transparent; color: inherit; cursor: pointer; }
.up-banner button:focus-visible { outline: none; box-shadow: var(--ring); }
@media (min-width: 1024px) {
    .up-banner { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
}

/* ==== vague 7 · journal ==== */
/* Réglages › Journal : filtres en grille, lignes dépliables groupées par jour (panneaux .rg-panel), détail des
   champs changés (avant, après). Jetons --a-* et états seulement : clair par défaut, lisible en .m-dark. */
.jl .bd.neu { background: var(--neu-bg); color: var(--neu); }
.jl-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; margin: 0 0 16px; min-width: 0; }
.jl-fl { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 0.8rem; font-weight: 600; color: var(--a-mute); }
.jl-fl .input-primary { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; font-size: 0.9rem; color-scheme: inherit; }
.jl-wait { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 120px; color: var(--a-mute); font-size: 0.92rem; }
.jl-rows > .jl-row + .jl-row { border-top: 1px solid var(--a-line); }
.jl-hd {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 16px; border: 0; background: none;
    color: var(--a-fg); font: inherit; text-align: left; cursor: pointer; transition: background .15s;
}
.jl-hd:hover { background: var(--a-surface2); }
.jl-hd:focus-visible { outline: none; box-shadow: inset var(--ring); }
.jl-time { flex: none; width: 46px; font: 700 0.9rem/1.2 var(--f-title); color: var(--a-fg); font-variant-numeric: tabular-nums; }
.jl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.jl-sum { font: 600 0.94rem/1.35 var(--f-text); color: var(--a-fg); overflow-wrap: anywhere; }
.jl-meta { font-size: 0.8rem; line-height: 1.4; color: var(--a-mute); overflow-wrap: anywhere; }
.jl-st { flex: none; display: flex; align-items: center; gap: 8px; }
.jl-chev { display: inline-grid; place-items: center; width: 20px; color: var(--a-mute); transition: transform .15s; }
.jl-chev .rg-i { width: 16px; height: 16px; }
.jl-row.open .jl-chev { transform: rotate(90deg); }
.jl-row.open .jl-hd { background: var(--a-surface2); }
.jl-det { padding: 4px 16px 16px 76px; background: var(--a-surface2); }
.jl-fields { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--a-line); border-radius: var(--r-sm); background: var(--a-line); }
.jl-f { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 4px 14px; padding: 10px 12px; background: var(--a-surface); }
.jl-fk { font-size: 0.84rem; font-weight: 700; color: var(--a-fg); overflow-wrap: anywhere; }
.jl-fk small { font-weight: 500; color: var(--a-mute); }
.jl-fv { min-width: 0; font-size: 0.86rem; line-height: 1.4; color: var(--a-fg); overflow-wrap: anywhere; }
.jl-fv small { display: block; font-size: 0.72rem; font-weight: 600; color: var(--a-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.jl-fd { grid-column: 2 / -1; font-size: 0.82rem; line-height: 1.4; color: var(--a-link); overflow-wrap: anywhere; }
.jl-nil { color: var(--a-mute); font-style: italic; }
.jl-none { margin: 8px 0 0; font-size: 0.85rem; color: var(--a-mute); }
.jl-extra { margin: 10px 0 0; padding: 0 0 0 18px; font-size: 0.82rem; line-height: 1.5; color: var(--a-mute); overflow-wrap: anywhere; }
.jl-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; }
@media (max-width: 1023px) {
    .jl-hd { min-height: 64px; }
}
@media (max-width: 599px) {
    .jl-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
    .jl-hd { flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; padding: 12px 14px; }
    .jl-time { width: auto; order: 1; }
    .jl-st { order: 2; margin-left: auto; }
    .jl-main { order: 3; flex-basis: 100%; }
    .jl-det { padding: 4px 14px 14px; }
    .jl-f { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .jl-fk { grid-column: 1 / -1; }
    .jl-fd { grid-column: 1 / -1; }
    .jl-foot { flex-direction: column; align-items: stretch; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .jl-hd, .jl-chev { transition: none; } }
/* fin vague 7 · journal */

/* ==== vague 7 · mfa-s1 : double authentification (connexion, Paramètres › Sécurité, bandeau, fenêtres) ==== */
/* Jetons --a-* et états uniquement : le bandeau et la carte suivent .m-dark / .m-light de #app-main ; l'écran
   du code reprend la carte de connexion (toujours claire). Cibles de 44 px, aucun débordement à 390 px. */
.login-card.mf-on > :not(.mf-login) { display: none !important; }
.mf-login { display: grid; gap: 12px; text-align: left; }
.mf-login-ic { width: 52px; height: 52px; margin: 0 auto 4px; display: grid; place-items: center; border-radius: 16px; background: var(--todo-bg); color: var(--todo); font-size: 1.35rem; }
.mf-login-t { margin: 0; text-align: center; font: 800 1.3rem/1.2 var(--f-title); letter-spacing: -0.015em; color: var(--a-fg); }
.mf-login-s { margin: 0 0 4px; text-align: center; font-size: 0.88rem; line-height: 1.45; color: var(--a-mute); }
.mf-login-f { display: grid; gap: 8px; }
.mf-login-f .form-label { margin: 0; }
.mf-login-f .btn-large-primary { width: 100%; margin-top: 4px; }
.mf-code { width: 100%; min-height: 52px; text-align: center; font: 700 1.45rem/1 var(--f-title); letter-spacing: 0.22em; font-variant-numeric: tabular-nums; }
.mf-code-rec { font-size: 1.15rem; letter-spacing: 0.08em; text-transform: lowercase; }
.mf-code::placeholder { letter-spacing: 0.12em; font-weight: 600; }
.mf-err { margin: 0; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--crit-bg); color: var(--crit); font-size: 0.85rem; font-weight: 600; line-height: 1.4; }
.mf-err[hidden] { display: none; }
.mf-login-links { display: flex; flex-direction: column; align-items: center; }
.mf-link { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--a-link); font: 600 0.85rem/1.2 var(--f-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mf-link:focus-visible, .mf-banner button:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.mf-link-l { justify-self: start; padding: 0; }

/* Bandeau : délai de grâce (orange) puis obligation (rouge) */
.mf-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 12px 16px 0; padding: 10px 14px; border: 1px solid var(--late-line); border-radius: var(--r-md); background: var(--late-bg); color: var(--late); font-size: 0.88rem; font-weight: 600; line-height: 1.4; }
.mf-banner.crit { border-color: var(--crit-line); background: var(--crit-bg); color: var(--crit); }
.mf-banner > i { flex: none; }
.mf-banner-t { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.mf-banner-a { display: flex; gap: 8px; margin-left: auto; }
.mf-banner-btn, .mf-banner-x { min-height: 44px; padding: 0 16px; border-radius: var(--r-ctl); font: 700 0.85rem/1 var(--f-text); cursor: pointer; }
.mf-banner-btn { border: 0; background: var(--late-solid); color: var(--on-solid); }
.mf-banner.crit .mf-banner-btn { background: var(--crit-solid); }
.mf-banner-x { border: 1px solid currentColor; background: transparent; color: inherit; }

/* Carte Paramètres › Sécurité */
.mf-load { padding: 12px; text-align: center; color: var(--a-link); }
.mf-note { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--a-mute); overflow-wrap: anywhere; }
.mf-note-err { color: var(--crit); margin-bottom: 10px; }
.mf-note-late { color: var(--late); }
.mf-sec { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--a-line); }
.mf-sec:first-of-type { padding-top: 0; border-top: 0; }
.mf-h { margin: 0; font: 700 0.9rem/1.3 var(--f-title); color: var(--a-fg); }
.mf-st { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 0.85rem; color: var(--a-mute); }
.mf-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-row .rg-btn { flex: 0 1 auto; white-space: normal; text-align: center; }
.mf-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.88rem; color: var(--a-fg); cursor: pointer; }
.mf-check input { width: 20px; height: 20px; flex: none; margin: 0; }
.mf-pol { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 8px; }
.mf-pol .form-label { grid-column: 1 / -1; margin: 0; }
.mf-pol select { width: 100%; }
.mf-team { display: flex; flex-direction: column; border: 1px solid var(--a-line); border-radius: var(--r-ctl); overflow: hidden; }
.mf-mem { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-height: 52px; padding: 8px 12px; }
.mf-mem + .mf-mem { border-top: 1px solid var(--a-line); }
.mf-mem-n { flex: 1 1 140px; min-width: 0; display: grid; }
.mf-mem-n b { font-size: 0.88rem; font-weight: 600; color: var(--a-fg); overflow-wrap: anywhere; }
.mf-mem-n small { font-size: 0.75rem; color: var(--a-mute); }
.mf-mem-b { min-height: 44px; }

/* Fenêtres : activation, codes de secours, désactivation */
.mf-mod .rg-mbody { gap: 12px; }
.mf-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 0.86rem; line-height: 1.45; color: var(--a-mute); }
.mf-steps b { color: var(--a-fg); font-weight: 600; }
/* Le QR code reste noir sur blanc dans les deux modes (lecture par l'appareil photo) */
.mf-qr { width: 208px; height: 208px; margin: 0 auto; padding: 12px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--al-surface); color: var(--al-mute); border: 1px solid var(--a-line); }
.mf-qr img, .mf-qr canvas { display: block; width: 184px; height: 184px; }
.mf-qr .mf-note { color: var(--al-mute); text-align: center; }
.mf-secret { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-ctl); background: var(--a-surface2); }
.mf-secret-l { font-size: 0.8rem; color: var(--a-mute); line-height: 1.4; }
.mf-key { display: block; font: 600 0.98rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.06em; color: var(--a-fg); word-break: break-all; user-select: all; }
.mf-confirm { display: grid; gap: 8px; }
.mf-confirm .form-label { margin: 0; }
.mf-warn { margin: 0; padding: 10px 12px; border: 1px solid var(--late-line); border-radius: var(--r-ctl); background: var(--late-bg); color: var(--late); font-size: 0.84rem; line-height: 1.45; }
.mf-warn b { font-weight: 700; }
.mf-codes { margin: 0; padding: 12px 12px 12px 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; border: 1px dashed var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface2); color: var(--a-mute); font-size: 0.8rem; }
.mf-codes code { font: 600 0.95rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; color: var(--a-fg); }
@media (max-width: 380px) { .mf-codes { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1024px) { .mf-banner { margin: 16px 24px 0; } }
/* fin vague 7 · mfa-s1 */

/* ==== vague 8 · visite-guidee ==== */
/* Visite guidée et « Me guider » : 4 panneaux flous autour de la cible, anneau, bulle (feuille sous 640 px).
   Au-dessus de la navigation, des fenêtres (1000 à 2500), des toasts et des bandeaux (3500) ; sous la borne (5000)
   et l'écran « changez votre mot de passe » (9999). Jetons seulement : suit le mode clair ou sombre de la vue. */
.vg { position: fixed; inset: 0; z-index: 4000; pointer-events: none; font-family: var(--f-text); color: var(--a-fg); background: transparent; }
.vg[hidden], .vg [hidden] { display: none !important; }
.vg-pane { position: fixed; pointer-events: auto; background: var(--overlay); -webkit-backdrop-filter: blur(6px) saturate(0.85); backdrop-filter: blur(6px) saturate(0.85); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vg-pane { background: color-mix(in srgb, var(--o-night) 88%, transparent); }
}
.vg-hole { position: fixed; pointer-events: auto; background: transparent; }
.vg.is-guide .vg-hole { pointer-events: none; }   /* Me guider : la cible reste cliquable */
.vg-ring { position: fixed; pointer-events: none; border-radius: var(--r-ctl); box-shadow: 0 0 0 2px var(--o-cyan), var(--ring); animation: vgPulse 1.8s ease-in-out infinite; }
@keyframes vgPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--o-cyan), var(--ring); }
    50% { box-shadow: 0 0 0 2px var(--o-cyan), 0 0 0 9px color-mix(in srgb, var(--o-blue) 28%, transparent); }
}
.vg-pop { position: fixed; pointer-events: auto; width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 18px 18px 14px;
    background: var(--a-surface); color: var(--a-fg); border: 1px solid var(--a-line); border-radius: var(--r-lg); box-shadow: var(--sh-pop); outline: none; }
.vg-pop.is-sheet { width: auto; max-height: 60dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; padding: 16px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
.vg-pop.is-sheet.at-top { border-radius: 0 0 var(--r-lg) var(--r-lg); border-top: 0; border-bottom: 1px solid var(--a-line); padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 12px; }
.vg-bar { height: 4px; margin: 0 0 14px; border-radius: var(--r-pill); background: var(--a-surface2); overflow: hidden; }
.vg-bar i { display: block; height: 100%; border-radius: inherit; background: var(--o-grad); transition: width 0.25s ease; }
.vg-k { margin: 0 0 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--a-mute); }
.vg-pop h2 { margin: 0 0 6px; font-family: var(--f-title); font-size: 1.12rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; color: var(--a-fg); }
.vg-d { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--a-mute); }
.vg-acts { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.vg-sp { flex: 1; }
.vg-btn { min-height: 44px; min-width: 44px; padding: 10px 14px; border: 1px solid var(--a-line); border-radius: var(--r-ctl); background: var(--a-surface); color: var(--a-fg);
    font: 600 0.9rem/1.2 var(--f-text); cursor: pointer; transition: background 0.15s, transform 0.1s; }
.vg-btn:hover { background: var(--a-surface2); }
.vg-btn:active { transform: scale(0.98); }
.vg-btn.pri { background: var(--o-grad-btn); color: var(--on-solid); border-color: transparent; box-shadow: var(--sh-cta); }
.vg-btn.pri:hover { filter: brightness(1.06); }
.vg-btn.ghost { background: transparent; border-color: transparent; color: var(--a-link); padding-left: 8px; padding-right: 8px; }
.vg-btn.ghost:hover { background: var(--todo-bg); }
.vg-btn:focus-visible, .vg-pop:focus-visible { outline: 2px solid var(--o-cyan); outline-offset: 2px; }
.vg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .vg-ring { animation: none; } .vg-bar i, .vg-btn { transition: none; } }

/* Menu Aide de la barre latérale (sombre, comme la barre) */
.vg-menu { position: fixed; z-index: 1300; min-width: 250px; padding: 6px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--sh-pop); }
.vg-menu a, .vg-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: var(--r-ctl);
    background: transparent; color: var(--a-fg); font: 600 0.9rem/1.2 var(--f-text); text-decoration: none; text-align: left; cursor: pointer; }
.vg-menu a:hover, .vg-menu button:hover, .vg-menu a:focus-visible, .vg-menu button:focus-visible { background: var(--a-surface2); outline: none; }
.vg-menu i { width: 18px; text-align: center; color: var(--a-mute); }

/* Carte « Bien démarrer » sur Aujourd'hui */
.td-onb + .vg-ob { width: 100%; max-width: 720px; margin: 0 auto; }   /* organisation neuve sans site */
.vg-ob-hd { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-bottom: 1px solid var(--a-line); }
.vg-ob.is-closed .vg-ob-hd { border-bottom: 0; }
.vg-ob-hd h3 { flex: 1; min-width: 0; margin: 0; font: inherit; }
.vg-ob-tg { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px 8px; border: 0; border-radius: var(--r-ctl);
    background: transparent; color: var(--a-fg); font: inherit; text-align: left; cursor: pointer; }
.vg-ob-tg:hover { background: var(--a-surface2); }
.vg-ob-tg:focus-visible, .vg-ob-hide:focus-visible { outline: none; box-shadow: var(--ring); }
.vg-ob-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vg-ob-tt b { font-family: var(--f-title); font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; color: var(--a-fg); }
.vg-ob-tt small { font-size: 0.8rem; font-weight: 500; color: var(--a-mute); }
.vg-ob-pb { width: 120px; flex: none; }
.vg-ob-chev { flex: none; color: var(--a-mute); transition: transform 0.2s ease; }
.vg-ob.is-closed .vg-ob-chev { transform: rotate(-90deg); }
.vg-ob-hide { flex: none; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--a-link);
    font: 600 0.85rem/1 var(--f-text); cursor: pointer; }
.vg-ob-hide:hover { background: var(--todo-bg); }
.vg-ob-list { list-style: none; margin: 0; padding: 4px 0; }
.vg-ob.is-closed .vg-ob-list { display: none; }
.vg-ob-it { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.vg-ob-it + .vg-ob-it { border-top: 1px solid var(--a-line); }
.vg-ob-ck.num { font: 700 0.85rem/1 var(--f-text); font-variant-numeric: tabular-nums; }
.vg-ob-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vg-ob-tx b { font-size: 0.92rem; font-weight: 700; color: var(--a-fg); }
.vg-ob-tx > span { font-size: 0.82rem; line-height: 1.4; color: var(--a-mute); }
.vg-ob-it.is-ok .vg-ob-tx b { color: var(--a-mute); text-decoration: line-through; text-decoration-color: var(--a-line); }
.vg-ob-opt { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--a-surface2); color: var(--a-mute);
    font-size: 0.72rem; font-weight: 700; vertical-align: 1px; }
.vg-ob-go { flex: none; min-height: 44px; white-space: nowrap; }
.vg-ob-st { flex: none; }
@media (prefers-reduced-motion: reduce) { .vg-ob-chev { transition: none; } }
@media (max-width: 560px) {
    .vg-ob-pb { display: none; }
    .vg-ob-it { flex-wrap: wrap; align-items: flex-start; padding: 12px 14px; row-gap: 10px; }
    .vg-ob-tx { flex: 1 1 calc(100% - 48px); }
    .vg-ob-go, .vg-ob-st { margin-left: 48px; }
}
/* fin vague 8 · visite-guidee */

/* Planning : cumul annuel en plus ou en moins sous le total de la semaine (annualisés) */
.pl2-tot small.pl2-cumul { font-weight: 700; color: var(--a-mute); }
.pl2-tot small.pl2-cumul.plus { color: var(--late); }
.pl2-tot small.pl2-cumul.moins { color: var(--a-link); }

/* ==== vague 9 · maintenance ==== */
/* « Signaler un problème » (en-tête, Aujourd'hui de l'employé, raccourci des équipements HACCP), feuille #mt-sheet
   (plein écran sous 640 px : choix, anomalie, panne, fiche, coût, contact, prestataire) et vue « Maintenance ».
   Jetons --a-* et états uniquement : correct en .m-light et en .m-dark. Cibles de 44 px. */
body.mt-lock { overflow: hidden; }
.mt-hbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 0 10px; border: none; border-radius: var(--r-ctl); background: none; color: var(--a-mute); font: 600 0.85rem var(--f-text); cursor: pointer; }
.mt-hbtn:hover { color: var(--a-link); background: var(--a-surface2); }
.mt-hbtn:focus-visible { outline: none; box-shadow: var(--ring); }
.mt-hbtn[hidden] { display: none; }
.mt-today-btn i, .mt-eq-btn i { font-size: 0.95em; }
.mt-eq-btn { flex: none; min-height: 44px; }
@media (max-width: 1023px) { .mt-hbtn, .header-actions > .mt-hbtn { min-width: 40px; } .mt-hbtn-l { display: none; } }
@media (min-width: 1024px) { #app-header .header-actions > .mt-hbtn { width: auto; padding: 0 12px !important; color: var(--a-fg); } }

/* Feuille */
.mt-sheet { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--overlay); color: var(--a-fg); font-family: var(--f-text); }
.mt-sheet[hidden] { display: none; }
.mt-panel { display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: min(880px, calc(100dvh - 32px)); background: var(--a-bg); border: 1px solid var(--a-line); border-radius: var(--r-lg); box-shadow: var(--sh-pop); overflow: hidden; }
.mt-sh-h { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 18px; background: var(--a-surface); border-bottom: 1px solid var(--a-line); }
.mt-sh-h .mt-ibtn:first-child { margin-left: -10px; }
.mt-sh-tt { flex: 1; min-width: 0; }
.mt-sh-tt h3 { margin: 0; font: 700 1.1rem var(--f-title); color: var(--a-fg); overflow-wrap: anywhere; }
.mt-sh-tt p { margin: 2px 0 0; font-size: 0.8rem; color: var(--a-mute); overflow-wrap: anywhere; }
.mt-ibtn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r-ctl); background: none; color: var(--a-fg); cursor: pointer; }
.mt-ibtn:hover { background: var(--a-surface2); }
.mt-sh-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 20px; }
.mt-sh-f { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--a-surface); border-top: 1px solid var(--a-line); }
.mt-go { width: 100%; min-height: 52px; font-size: 1rem; text-decoration: none; }
.mt-sheet :is(.mt-ibtn, .mt-chip, .mt-choice, .mt-urg, .mt-seg-b, .mt-cam, .mt-pic, .mt-row, .mt-chk, .mt-link):focus-visible { outline: none; box-shadow: var(--ring); }
.mt-sheet .input-primary, .mt-view .input-primary { background: var(--a-surface); color: var(--a-fg); border-color: var(--a-line); }
.mt-in { width: 100%; min-height: 44px; }
textarea.mt-in { min-height: 84px; resize: vertical; }

/* Sections et contrôles du formulaire */
.mt-sec { margin-bottom: 18px; min-width: 0; }
.mt-lab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; font-size: 0.84rem; font-weight: 700; color: var(--a-mute); }
.mt-lab-sm { margin-top: 12px; }
.mt-req { font-weight: 600; font-size: 0.76rem; color: var(--crit); }
.mt-opt { font-weight: 500; font-size: 0.76rem; color: var(--a-mute); }
.mt-help { margin: 6px 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--a-mute); }
.mt-or { margin: 10px 0 8px; font-size: 0.78rem; font-weight: 600; color: var(--a-mute); }
.mt-site-fix { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.88rem; color: var(--a-mute); }
.mt-site-fix i { color: var(--a-link); }
.mt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--a-line); border-radius: var(--r-pill); background: var(--a-surface); color: var(--a-fg); font: 600 0.88rem var(--f-text); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.mt-chip i { color: var(--a-mute); }
.mt-chip:hover { border-color: color-mix(in srgb, var(--a-fg) 25%, var(--a-line)); }
.mt-chip.on { background: var(--chip-on-bg); color: var(--chip-on-fg); border-color: var(--chip-on-bg); }
.mt-chip.on i { color: inherit; }
.mt-chip-sm { min-height: 36px; padding: 4px 12px; font-size: 0.82rem; font-weight: 500; }
.mt-sugg { margin-bottom: 8px; }
.mt-urgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mt-urg, .mt-seg-b { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 56px; padding: 10px 12px; border: 1px solid var(--a-line); border-radius: var(--r-md); background: var(--a-surface); color: var(--a-fg); font-family: var(--f-text); text-align: left; cursor: pointer; }
.mt-urg b, .mt-seg-b b { font-size: 0.92rem; }
.mt-urg small, .mt-seg-b small { font-size: 0.76rem; color: var(--a-mute); line-height: 1.3; }
.mt-urg.crit b { color: var(--crit); }
.mt-urg.late b { color: var(--late); }
.mt-urg.crit.on { background: var(--crit-bg); border-color: var(--crit); box-shadow: 0 0 0 2px var(--crit-line); }
.mt-urg.late.on { background: var(--late-bg); border-color: var(--late); box-shadow: 0 0 0 2px var(--late-line); }
.mt-urg.neu.on, .mt-seg-b.on { background: var(--a-surface2); border-color: var(--a-fg); box-shadow: 0 0 0 1px var(--a-fg); }
.mt-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mt-radio { flex-direction: row; align-items: center; gap: 10px; }
.mt-radio input { width: 20px; height: 20px; accent-color: var(--a-link); }
.mt-radio:has(input:checked) { border-color: var(--a-link); box-shadow: 0 0 0 1px var(--a-link); }
.mt-chk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--a-line); border-radius: var(--r-pill); background: var(--a-surface); font-size: 0.86rem; cursor: pointer; }
.mt-chk input { width: 18px; height: 18px; accent-color: var(--a-link); }
.mt-chk:has(input:checked) { border-color: var(--a-link); }
.mt-chk-sm { min-height: 40px; font-size: 0.8rem; }
.mt-defs { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.mt-def-site b { display: block; margin-bottom: 6px; font-size: 0.84rem; }
.mt-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }

/* Photos */
.mt-shots { display: flex; flex-wrap: wrap; gap: 10px; }
.mt-shot { position: relative; width: 88px; height: 88px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--a-line); }
.mt-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-shot-x { position: absolute; top: 2px; right: 2px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--o-night) 70%, transparent); color: var(--on-solid); cursor: pointer; }
.mt-cam { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 88px; height: 88px; padding: 0 12px; border: 1.5px dashed color-mix(in srgb, var(--a-link) 55%, var(--a-line)); border-radius: var(--r-md); background: color-mix(in srgb, var(--a-link) 6%, var(--a-surface)); color: var(--a-link); font-size: 0.8rem; font-weight: 600; text-align: center; cursor: pointer; }
.mt-cam i { font-size: 1.3rem; }
.mt-pics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.mt-pic { width: 84px; height: 84px; padding: 0; border: 1px solid var(--a-line); border-radius: var(--r-md); overflow: hidden; background: var(--a-surface2); cursor: zoom-in; }
.mt-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Encadré froid */
.mt-cold { margin: 0 0 18px; padding: 12px 14px; border-radius: var(--r-md); background: var(--todo-bg); border: 1px solid var(--todo-line); color: var(--a-fg); }
.mt-cold p { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 0.88rem; }
.mt-cold p i { color: var(--todo); }
.mt-cold ol { margin: 0; padding-left: 20px; font-size: 0.84rem; line-height: 1.5; }

/* Premier choix */
.mt-choices { display: flex; flex-direction: column; gap: 12px; }
.mt-choice { display: grid; grid-template-columns: 44px minmax(0, 1fr) 14px; align-items: center; gap: 14px; width: 100%; min-height: 84px; padding: 14px 16px; border: 1px solid var(--a-line); border-radius: var(--r-md); background: var(--a-surface); color: var(--a-fg); box-shadow: var(--a-shadow); font-family: var(--f-text); text-align: left; cursor: pointer; }
.mt-choice:hover { border-color: var(--a-link); }
.mt-choice .ico-sq { width: 44px; height: 44px; font-size: 1.1rem; }
.mt-choice-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mt-choice-t b { font-size: 1rem; }
.mt-choice-t small { font-size: 0.82rem; line-height: 1.4; color: var(--a-mute); }
.mt-chev { color: var(--a-mute); font-size: 0.8rem; }

/* Fiche */
.mt-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.mt-state-t { font-size: 0.8rem; color: var(--a-mute); }
.mt-desc { margin: 0 0 14px; font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.mt-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 16px; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-md); background: var(--a-surface); border: 1px solid var(--a-line); }
.mt-dl div { min-width: 0; }
.mt-dl dt { font-size: 0.74rem; font-weight: 700; color: var(--a-mute); }
.mt-dl dd { margin: 2px 0 0; font-size: 0.88rem; overflow-wrap: anywhere; }
.mt-res { margin-bottom: 14px; }
.mt-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.mt-acts > * { min-height: 44px; }
.mt-danger { color: var(--crit); }
.mt-h4 { margin: 4px 0 8px; font-size: 0.92rem; }
.mt-hist { list-style: none; margin: 0; padding: 0; }
.mt-ev { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; padding: 8px 0; font-size: 0.86rem; }
.mt-ev + .mt-ev { border-top: 1px solid var(--a-line); }
.mt-ev small { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--a-mute); }
.mt-ev p { margin: 4px 0 0; overflow-wrap: anywhere; }
.mt-ev-dot { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--neu); }
.mt-ev-dot.ok { background: var(--ok); } .mt-ev-dot.crit { background: var(--crit); } .mt-ev-dot.late { background: var(--late); } .mt-ev-dot.ia { background: var(--ia); }
.mt-files { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mt-files li { display: flex; align-items: center; gap: 8px; }
.mt-file { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--a-link); font-size: 0.88rem; font-weight: 600; overflow-wrap: anywhere; }
.mt-upl { display: inline-flex; min-height: 44px; margin-top: 4px; cursor: pointer; }
.mt-contact { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.mt-preview { margin: 12px 0; font-size: 0.84rem; }
.mt-preview summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--a-link); font-weight: 600; }
.mt-preview pre { margin: 6px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--a-surface); border: 1px solid var(--a-line); white-space: pre-wrap; overflow-wrap: anywhere; font: 0.8rem/1.5 var(--f-text); }

/* Vue Maintenance */
.mt-view { color: var(--a-fg); max-width: 1080px; }
.mt-view .num, .mt-sheet .num { font-family: var(--f-title); font-variant-numeric: tabular-nums; }
.mt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mt-head-txt { min-width: 0; flex: 1 1 260px; }
.mt-title { margin: 0; font-size: 1.45rem; color: var(--a-fg); }
.mt-sub { margin: 4px 0 0; font-size: 0.86rem; color: var(--a-mute); }
.mt-hb { min-height: 44px; }
.mt-tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--a-line); overflow-x: auto; scrollbar-width: none; }
.mt-tab { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--a-mute); font: 600 0.9rem var(--f-text); cursor: pointer; }
.mt-tab.on { color: var(--a-fg); border-bottom-color: var(--a-link); }
.mt-tab:focus-visible { outline: none; box-shadow: inset var(--ring); }
.mt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.mt-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 14px 16px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow); color: var(--a-fg); font-family: var(--f-text); text-align: left; }
button.mt-stat { cursor: pointer; min-height: 44px; }
.mt-stat-v { font-size: 1.6rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.mt-stat.crit .mt-stat-v { color: var(--crit); }
.mt-stat-l { font-size: 0.86rem; font-weight: 600; }
.mt-stat-s { font-size: 0.76rem; color: var(--a-mute); }
.mt-stat-top ol { margin: 4px 0 0; padding: 0; list-style: none; width: 100%; counter-reset: mt; }
.mt-stat-top li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.84rem; }
.mt-link { min-height: 32px; padding: 0; border: 0; background: none; color: var(--a-link); font: 600 0.84rem var(--f-text); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.mt-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.mt-sel { flex: 1 1 150px; min-width: 0; max-width: 240px; }
.mt-sel select { width: 100%; min-height: 44px; }
.mt-card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--a-shadow); min-width: 0; margin-bottom: 14px; overflow: hidden; }
.mt-card-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-height: 52px; padding: 8px 18px; border-bottom: 1px solid var(--a-line); }
.mt-card-h h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; font-weight: 700; color: var(--a-fg); }
.mt-ct { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--neu-bg); color: var(--neu); font-size: 0.78rem; font-weight: 700; }
.mt-card > .empty { margin: 0; }
.mt-list { list-style: none; margin: 0; padding: 0; }
.mt-list > li + li { border-top: 1px solid var(--a-line); }
.mt-sheet .mt-list { border: 1px solid var(--a-line); border-radius: var(--r-md); background: var(--a-surface); overflow: hidden; }
.mt-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 14px; align-items: center; gap: 4px 12px; width: 100%; min-height: 64px; padding: 10px 18px; border: 0; background: none; color: var(--a-fg); font-family: var(--f-text); text-align: left; cursor: pointer; }
.mt-row:hover { background: var(--a-surface2); }
.mt-row:focus-visible { outline: none; box-shadow: inset var(--ring); }
.mt-row-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mt-row-t b { font-weight: 600; font-size: 0.93rem; line-height: 1.3; overflow-wrap: anywhere; }
.mt-row-t small { font-size: 0.8rem; color: var(--a-mute); overflow-wrap: anywhere; }
.mt-row-b { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.mt-k { font-size: 0.82rem; font-weight: 600; color: var(--a-mute); white-space: nowrap; }
.mt-def { color: var(--late) !important; }
.mt-def i { margin-right: 4px; }
.mt-note { font-size: 0.8rem; color: var(--a-mute); }
.mt-note i { color: var(--a-link); margin-right: 6px; }
.mt-pad { padding: 0 2px; margin: 0 0 12px; }
.mt-card .mt-pad { padding: 14px 18px; margin: 0; }
.mt-more { margin: 8px 18px 12px; }
.mt-bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.mt-eq-card { margin-top: 14px; }
.mt-tbl { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.mt-tbl th, .mt-tbl td { padding: 10px 18px; text-align: left; border-bottom: 1px solid var(--a-line); }
.mt-tbl th { font-size: 0.76rem; font-weight: 700; color: var(--a-mute); }
.mt-tbl .num { text-align: right; white-space: nowrap; }
.mt-tbl tr:last-child td { border-bottom: 0; }

@media (max-width: 899px) { .mt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
    .mt-sheet { padding: 0; align-items: stretch; }
    .mt-panel { max-width: none; max-height: none; height: 100%; border: 0; border-radius: 0; }
    .mt-urgs { grid-template-columns: 1fr; }
    .mt-urg { min-height: 52px; }
    .mt-grid2 { grid-template-columns: 1fr; }
    .mt-acts { grid-template-columns: 1fr; }
    .mt-row { grid-template-columns: 36px minmax(0, 1fr) 14px; padding: 10px 14px; }
    .mt-row-b { grid-column: 2 / 3; grid-row: 2; justify-content: flex-start; }
    .mt-row .mt-chev { grid-column: 3; grid-row: 1 / span 2; }
    .mt-card-h { padding: 8px 14px; }
    .mt-sel { flex: 1 1 calc(50% - 4px); max-width: none; }
    .mt-tbl th, .mt-tbl td { padding: 10px 14px; }
    .mt-head-act, .mt-hb { width: 100%; }
    .mt-tabs { gap: 0; }
    .mt-tab { flex: 1 1 auto; padding: 0 8px; font-size: 0.85rem; }
    .mt-head .hc-head-txt, .mt-eq-btn { width: 100%; }
}
@media (max-width: 639px) { .hc-head:has(.mt-eq-btn) { flex-wrap: wrap; } }
/* fin vague 9 · maintenance */

/* ========================================
   Mesure d'utilisation (Clarity) : bannière d'accord, voir clarity.js. Refuser et Accepter de même poids (CNIL).
   ======================================== */
.mesure-banner { position: fixed; z-index: 2100;   /* au-dessus de l'écran de connexion (2000), sous la mise à jour (3500) et la visite guidée (4000) */
    left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    max-width: 560px; margin: 0 auto; padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
    background: var(--a-surface); color: var(--a-fg); border: 1px solid var(--a-line); border-radius: var(--r-md); box-shadow: var(--sh-pop);
    font-family: var(--f-text); font-size: 14px; line-height: 1.45; }
.mesure-txt { flex: 1 1 280px; min-width: 0; margin: 0; }
.mesure-txt strong { display: block; margin-bottom: 2px; font-family: var(--f-title); }
.mesure-txt a { color: var(--a-link); }
.mesure-btns { display: flex; gap: 10px; flex: 0 0 auto; }
.mesure-btn { min-height: 44px; min-width: 110px; padding: 10px 16px; border-radius: var(--r-ctl); border: 1px solid var(--a-line);
    background: var(--a-surface2); color: var(--a-fg); font: 600 14px var(--f-text); cursor: pointer; }
.mesure-btn:hover, .mesure-btn:focus-visible { border-color: var(--o-blue-hi); outline: none; box-shadow: var(--ring); }
@media (max-width: 767px) { .mesure-banner { bottom: calc(var(--nav-height) + 8px + env(safe-area-inset-bottom, 0px)); } .mesure-btns { width: 100%; } .mesure-btn { flex: 1; } }

/* Borne : pointages hors ligne refusés à la synchronisation (planning.js, plnKRefusedHtml) */
.pl2-k-refused { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; margin: 16px 32px 0; padding: 14px 16px;
    background: var(--crit-bg); color: var(--crit); border: 1px solid var(--crit); border-radius: var(--r-md); font-size: 15px; line-height: 1.45; }
.pl2-k-refused ul { margin: 6px 0; padding-left: 18px; color: var(--a-fg); }
.pl2-k-refused span { color: var(--a-fg); }
.pl2-k-refused button { flex: 0 0 auto; min-height: 44px; padding: 10px 16px; border-radius: var(--r-ctl); border: 1px solid var(--crit);
    background: var(--a-surface); color: var(--crit); font: 700 15px var(--f-text); cursor: pointer; }
@media (max-width: 639px) { .pl2-k-refused { flex-direction: column; } .pl2-k-refused button { width: 100%; } }

/* Packs métier : inscription (choix de l'activité) et bibliothèque des Réglages (renderAdminPacks).
   L'écran d'inscription défile s'il dépasse la hauteur de l'écran (téléphone) ; sinon la carte reste centrée.
   Bibliothèque : jetons --a-* et états uniquement, correct en .m-light et en .m-dark. */
#register-container { overflow-y: auto; align-items: flex-start; padding: 16px 0; }
#register-container .login-card { margin: auto; }
.reg-hint { margin: 6px 0 0; font-size: 0.78rem; line-height: 1.45; color: #6B7280; }
@media (max-width: 599px) {
    .pk-head { flex-wrap: wrap; }
    .pk-head > .rg-ht { flex: 1 1 0; }
    .pk-head > .rg-btn { flex-basis: 100%; min-height: 44px; }
    .pk-head > .bd { margin-left: 38px; }
}
.pk-list { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; border: 1px solid var(--a-line); border-radius: var(--r-md); background: var(--a-surface); }
.pk-list .pk-blk { padding: 10px 14px 4px; font: 700 0.74rem/1.2 var(--f-text); letter-spacing: 0.04em; text-transform: uppercase; color: var(--a-mute); }
.pk-list .pk-st { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 14px; font-size: 0.9rem; line-height: 1.4; color: var(--a-fg); }
.pk-list .pk-st + .pk-st { border-top: 1px solid var(--a-line); }
.pk-list .pk-st > span { min-width: 0; overflow-wrap: anywhere; }
.pk-list .pk-st > .bd { flex: none; }
.pk-refs { font-size: 0.82rem; color: var(--a-mute); }
.pk-refs summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--a-link); }
.pk-refs ul { margin: 0; padding-left: 18px; line-height: 1.45; }
.pk-refs li + li { margin-top: 4px; }

/* Planning : couleur du restaurant (Réglages › Sites), sans barre latérale */
.pl2-sh.sc { background: color-mix(in srgb, var(--sc) 22%, transparent); box-shadow: none; }
.pl2-bar.sc { background: color-mix(in srgb, var(--sc) 32%, transparent); box-shadow: none; }
.pl2-sh.pl2-ext.sc, .pl2-bar.pl2-ext.sc { background: color-mix(in srgb, var(--sc) 12%, transparent); border: 1px dashed color-mix(in srgb, var(--sc) 60%, transparent); color: var(--a-fg); box-shadow: none; }
.pl2-sh.pl2-ext.sc .pl2-ext-site { color: var(--a-fg); }
.pl2-sh.sc.pl2-ghost { background: linear-gradient(color-mix(in srgb, var(--sc) 22%, transparent), color-mix(in srgb, var(--sc) 22%, transparent)) var(--a-surface); box-shadow: var(--sh-pop); }
.pl2-msh.sc { background: color-mix(in srgb, var(--sc) 22%, transparent); box-shadow: none; }
.rg-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.rg-swatch { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.rg-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.rg-swatch span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--a-surface, #fff); }
.rg-swatch input:checked + span { border-color: var(--a-fg); }
.rg-swatch input:focus-visible + span { outline: 2px solid var(--o-blue-hi); outline-offset: 2px; }
.rg-swatch small { font-size: 0.7rem; color: var(--a-mute); }

/* Planning : total de la semaine, détail par restaurant au clic sur la flèche */
.pl2-tot-d > summary { list-style: none; cursor: pointer; }
.pl2-tot-d > summary::-webkit-details-marker { display: none; }
.pl2-tot-chev { margin-left: 5px; font-size: 0.6rem; color: var(--a-mute); transition: transform .15s; vertical-align: 1px; }
.pl2-tot-d[open] .pl2-tot-chev { transform: rotate(180deg); }
.pl2-tot-sites { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 2px; }
.pl2-ts { display: flex; align-items: center; justify-content: flex-end; gap: 5px; font-size: 0.7rem; color: var(--a-mute); white-space: nowrap; }
.pl2-ts i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.pl2-ts b { display: inline !important; font: 600 0.7rem var(--f-text) !important; color: var(--a-fg); min-width: 44px; text-align: right; }

/* Planning : ligne « Shifts à assigner » (shifts sans salarié), en haut de la grille et de la frise du jour */
.pl2-grid tr.pl2-open-r > td { background: color-mix(in srgb, var(--late) 7%, transparent); border-bottom: 1px dashed color-mix(in srgb, var(--late) 45%, var(--a-line)); }
.pl2-grid tr.pl2-open-r > td.today { background: color-mix(in srgb, var(--late) 10%, transparent); }
.pl2-open-r .pl2-who b { display: inline; color: var(--late); }
.pl2-open-r .pl2-who b i { margin-right: 4px; }
.pl2-open-r .pl2-who .bd { margin-left: 4px; vertical-align: 1px; }
.pl2-open-r .pl2-who small { margin-top: 3px; white-space: normal; line-height: 1.3; }
.pl2-open-r .pl2-tot small { display: block; color: var(--late); font-size: 0.72rem; font-weight: 600; }
.pl2-sh.sc.pl2-open, .pl2-bar.sc.pl2-open { background: color-mix(in srgb, var(--sc) 10%, var(--a-surface)); border: 1.5px dashed color-mix(in srgb, var(--sc) 75%, transparent); box-shadow: none; }
.pl2-sh.pl2-open .pl2-open-job { display: block; font-weight: 600; color: var(--a-mute); font-size: 0.68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl2-bar.pl2-open small { margin-left: 6px; font-weight: 500; color: var(--a-mute); overflow: hidden; text-overflow: ellipsis; }
.pl2-open-sub { display: block; margin-top: 2px; font: 600 0.68rem/1.25 var(--f-text); color: var(--late); white-space: normal; }
.pl2-card-h .pl2-open-sub { text-align: right; }
.pl2-tl-r.pl2-open-r { align-items: start; padding: 6px 0; border-radius: 10px; background: color-mix(in srgb, var(--late) 7%, transparent); }
.pl2-tl-r.pl2-open-r .pl2-tl-n { padding: 4px 0 0 4px; }
.pl2-tl-r.pl2-open-r .pl2-tl-n b { color: var(--late); font-size: 0.78rem; text-overflow: clip; }
.pl2-tl-r.pl2-open-r .pl2-trk { background: transparent; }
/* « + » d'une case : Shift, Absence ou Congé */
.pl2-add-acts .pl2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* Formulaire du responsable : congé ou absence posé pour un salarié */
.pln-la-kind { margin-bottom: 12px; }
.pln-la-box { margin-bottom: 12px; font-size: 0.82rem; line-height: 1.45; }
.pln-la-list { margin: 6px 0 0; padding-left: 18px; }
.pln-la-list li { margin: 2px 0; }
.pln-la-list small { font-weight: 500; opacity: 0.85; }
.pln-leave-actions.one { grid-template-columns: minmax(0, 420px); }

/* Planning : points à vérifier repliables */
details.pl2-legal > summary.pl2-legal-h { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; margin-bottom: 0; padding: 2px 0; }
details.pl2-legal > summary.pl2-legal-h::-webkit-details-marker { display: none; }
details.pl2-legal[open] > summary.pl2-legal-h { margin-bottom: 6px; }
.pl2-legal-chev { font-size: 0.65rem; transition: transform .15s; }
details.pl2-legal:not([open]) .pl2-legal-chev { transform: rotate(-90deg); }
.pl2-legal-act { margin-left: auto; font-weight: 600; color: var(--a-link, var(--o-blue-hi)); white-space: nowrap; }
details.pl2-legal > summary.pl2-legal-h:focus-visible { outline: 2px solid var(--o-blue-hi); outline-offset: 2px; border-radius: 6px; }

/* Planning : bouton en cours (roue qui tourne), lisible pendant l'attente */
button[aria-busy="true"] { opacity: 1 !important; cursor: progress !important; filter: none !important; }
button[aria-busy="true"] .fa-spin { margin-right: 6px; }

/* Maintenance : bouton WhatsApp du « Contacter » */
.mt-go.mt-wa i { color: #25D366; }