/**
 * Cali&Co / Calisun — Layout Sidebar moderne
 * À inclure APRÈS style.css pour override les anciennes règles.
 *
 * Stratégie sans toucher au HTML des pages :
 * - .sticky-top devient la sidebar verticale fixed à gauche (240px).
 * - .app-header passe en `display: contents` pour libérer ses enfants
 *   dans le flex container .sticky-top, qu'on réordonne avec `order`.
 * - .main-content reçoit margin-left + max-width.
 * - Mobile : .sticky-top devient off-canvas (slide-in via .nav-open).
 */

/* ===============================================================
   1. SIDEBAR — desktop (≥ 1024px)
   =============================================================== */
@media (min-width: 1024px) {
    /* En desktop, le user-menu mobile (rendu dans nav.php pour la sidebar
       mobile) est inutile : on le cache au profit de l'instance originale
       rendue dans <header class="app-header">. */
    .sidebar-user-menu {
        display: none !important;
    }

    .sticky-top {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-width, 240px);
        height: 100vh;
        background: var(--surface-elevated);
        border-right: 1px solid var(--border-subtle);
        box-shadow: var(--shadow-xs);
        z-index: var(--z-sticky);
        display: flex;
        flex-direction: column;
        padding: var(--space-4) var(--space-3) var(--space-3);
        gap: var(--space-2);
        overflow: hidden;
    }

    /* Libère les enfants de .app-header dans le flex container parent.
       !important pour neutraliser le `.app-header { display:flex }` legacy. */
    .app-header {
        display: contents !important;
    }

    /* Logo + nom produit — en haut */
    .app-header .brand {
        order: 1;
        flex-direction: row;
        align-items: center;
        gap: var(--space-2-5);
        padding: var(--space-2) var(--space-2) var(--space-4);
        color: var(--text-primary);
    }

    .app-header .brand img {
        height: 32px;
        width: auto;
        filter: none;
    }

    /* On masque visuellement le H1 redondant avec le logo (qui contient déjà
       le nom de marque). Pattern sr-only pour rester accessible. */
    .app-header .brand h1 {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Navigation principale — au milieu, scrollable */
    .nav-primary {
        order: 2;
        flex: 1;
        background: transparent;
        border: 0;
        padding: 0;
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
    }

    .nav-primary::-webkit-scrollbar {
        width: 6px;
    }
    .nav-primary::-webkit-scrollbar-thumb {
        background: var(--neutral-200);
        border-radius: var(--radius-full);
    }

    .nav-tabs {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 0;
        /* En desktop, la sidebar est TOUJOURS ouverte — on force flex et on
           neutralise le `display: none` legacy de style.css. */
        display: flex !important;
        width: 100%;
    }

    /* User-menu — en bas, séparé par un trait */
    .app-header .user-menu {
        order: 3;
        margin-top: 0;
        padding-top: var(--space-3);
        border-top: 1px solid var(--border-subtle);
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }

    /* Le burger est caché en desktop */
    .nav-burger {
        display: none !important;
    }

    /* Décale tout le contenu pour libérer la place de la sidebar.
       Pleine largeur (zéro vide à droite) — style Power BI / Salesforce. */
    .main-content {
        margin-left: var(--sidebar-width, 240px);
        max-width: none;
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }

    /* Bannière consultation : ajuster le décalage si présente */
    .consultation-banner {
        margin-left: var(--sidebar-width, 240px);
    }
}

/* ===============================================================
   2. APPARENCE DES ITEMS DE NAV (toutes tailles d'écran)
   =============================================================== */

/* Items principaux — liens directs */
.nav-tabs > a {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-2) var(--space-3);
    margin: 0;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-sans);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    position: relative;
    white-space: nowrap;
    border: 0;
}

.nav-tabs > a .nav-icon {
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: color var(--duration-fast) var(--ease-out);
}

.nav-tabs > a:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

.nav-tabs > a:hover .nav-icon {
    color: var(--text-primary);
}

.nav-tabs > a.active {
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: var(--font-weight-semibold);
}

.nav-tabs > a.active .nav-icon {
    color: var(--brand-600);
}

/* Badge (notifications, validations en attente) */
.nav-tabs > a .nav-badge,
.nav-dropdown-toggle .nav-badge,
.nav-dropdown-menu .nav-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--error-500);
    color: var(--neutral-0);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 20px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    position: static;
}

/* Dropdowns (Rapports, Gestion, Administration) — convertis en accordéons */
.nav-dropdown {
    display: block;
    position: static;
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-sans);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.nav-dropdown-toggle .nav-icon {
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.nav-dropdown-toggle:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

.nav-dropdown-toggle.active {
    color: var(--text-primary);
}

.nav-dropdown-toggle .nav-caret {
    margin-left: auto;
    color: var(--text-tertiary);
    transition: transform var(--duration-base) var(--ease-out);
    display: inline-flex;
    align-items: center;
}

.nav-dropdown.open .nav-dropdown-toggle .nav-caret {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    display: none;
    position: static;
    flex-direction: column;
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: var(--space-1) 0 var(--space-1) var(--space-6);
    margin: 0;
    border-radius: 0;
    gap: 1px;
}

.nav-dropdown.open .nav-dropdown-menu {
    display: flex;
}

.nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    position: relative;
    line-height: 1.4;
    border: 0;
    background: transparent;
}

.nav-dropdown-menu a:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

.nav-dropdown-menu a.active {
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: var(--font-weight-semibold);
}

.nav-dropdown-menu a .nav-icon {
    flex-shrink: 0;
    color: var(--text-tertiary);
    width: 16px;
    height: 16px;
}

/* ===============================================================
   3. USER-MENU — apparence dans la sidebar
   =============================================================== */
@media (min-width: 1024px) {
    .app-header .header-extra-links {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
    }

    .app-header .header-extra-links a {
        color: var(--text-secondary);
        font-size: var(--text-sm);
        padding: var(--space-1-5) var(--space-2);
        border-radius: var(--radius-md);
        opacity: 1;
        transition: background var(--duration-fast) var(--ease-out);
    }

    .app-header .header-extra-links a:hover {
        background: var(--surface-subtle);
        text-decoration: none;
        color: var(--text-primary);
    }

    .app-header .header-agence-form {
        margin: 0;
        width: 100%;
    }

    .app-header .agence-selector {
        width: 100%;
        background: var(--surface-elevated);
        border: 1px solid var(--border-default);
        color: var(--text-primary);
        padding: var(--space-2) var(--space-2-5);
        border-radius: var(--radius-md);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' 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 var(--space-2) center;
        padding-right: var(--space-7);
        transition: border-color var(--duration-fast) var(--ease-out),
                    box-shadow var(--duration-fast) var(--ease-out);
    }

    .app-header .agence-selector:hover {
        border-color: var(--border-strong);
    }

    .app-header .agence-selector:focus {
        outline: none;
        border-color: var(--brand-500);
        box-shadow: var(--ring-brand);
    }

    .app-header .user-menu > span {
        font-size: var(--text-sm);
        color: var(--text-primary);
        font-weight: var(--font-weight-medium);
        padding: var(--space-1) var(--space-2);
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .app-header .btn-logout {
        background: transparent;
        border: 1px solid var(--border-default);
        color: var(--text-secondary);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        font-family: var(--font-sans);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        transition: background var(--duration-fast) var(--ease-out),
                    border-color var(--duration-fast) var(--ease-out),
                    color var(--duration-fast) var(--ease-out);
    }

    .app-header .btn-logout:hover {
        background: var(--surface-subtle);
        border-color: var(--border-strong);
        color: var(--text-primary);
    }
}

/* ===============================================================
   4. MAIN CONTENT — Layout fluide
   =============================================================== */
.main-content {
    background: transparent;
}

@media (min-width: 1024px) {
    body {
        background: var(--surface-page);
    }
}

/* ===============================================================
   5. MOBILE — off-canvas (< 1024px)
   =============================================================== */
@media (max-width: 1023.98px) {
    .sticky-top {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        background: var(--surface-elevated);
        border-right: 1px solid var(--border-subtle);
        box-shadow: var(--shadow-lg);
        z-index: var(--z-modal);
        display: flex;
        flex-direction: column;
        padding: calc(var(--space-4) + env(safe-area-inset-top)) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
        gap: var(--space-2);
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(-100%);
        transition: transform var(--duration-medium) var(--ease-out);
    }

    .sticky-top.nav-open,
    .sticky-top .nav-primary.nav-open,
    body.sidebar-open .sticky-top {
        transform: translateX(0);
    }

    /* État ouvert via classe ajoutée sur le burger ou wrapper */
    .nav-primary.nav-open ~ * .sticky-top,
    .nav-primary.nav-open {
        transform: none;
    }

    /* Réorganisation en mobile : on libère les enfants de .app-header dans le
       flex container parent .sticky-top. !important pour neutraliser le legacy
       `.app-header { display:flex }` de style.css qui sinon écrase tout le menu
       à droite (invisible en sidebar 280px). */
    .app-header {
        display: contents !important;
    }

    .app-header .brand {
        order: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-2-5);
        padding: var(--space-2) var(--space-2) var(--space-4);
        background: transparent;
        color: var(--text-primary);
    }

    .app-header .brand img {
        height: 32px;
    }

    .app-header .brand h1 {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .nav-primary {
        order: 2;
        flex: 1;
        background: transparent;
        border: 0;
        padding: 0;
        display: block;
        overflow-y: auto;
    }

    /* CRITIQUE : style.css legacy met `.nav-tabs { display:none }` et attend
       la classe .nav-open sur .nav-primary pour l'afficher. Or notre JS pose
       .nav-open sur .sticky-top. Donc en mobile, la nav-tabs restait CACHÉE.
       On force ici la visibilité, en colonne, pour le tiroir off-canvas. */
    .nav-tabs {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 2px;
        padding: 0;
        box-shadow: none;
        background: transparent;
    }

    /* Liens nav plus tactiles dans le tiroir mobile */
    .nav-tabs > a,
    .nav-dropdown-toggle,
    .nav-dropdown-menu a {
        min-height: 44px;
        font-size: var(--text-base);
        padding: var(--space-2-5) var(--space-3);
    }

    /* Le `display:none` legacy sur .nav-tabs concernait aussi .nav-primary
       qui pouvait avoir `display:flex; justify-content:flex-end` par défaut
       et masquer ses enfants. On reset pour le drawer. */
    .nav-primary {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* user-menu :
       - L'original (.app-header .user-menu) est CACHÉ en mobile pour éviter
         les soucis avec display:contents sur Safari iOS.
       - À la place, nav.php rend une instance dédiée `.sidebar-user-menu`
         directement dans .nav-primary, garantie d'être visible en bas du
         drawer mobile. */
    .app-header .user-menu {
        display: none !important;
    }
    .sidebar-user-menu {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
        margin-top: var(--space-4);
        padding-top: var(--space-3);
        border-top: 1px solid var(--border-subtle);
        width: 100%;
    }
    .sidebar-user-menu .agence-selector,
    .sidebar-user-menu .btn-logout {
        background: var(--surface-elevated) !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--border-default) !important;
        padding: var(--space-2) var(--space-3) !important;
        font-size: var(--text-sm);
        text-decoration: none;
        display: block;
        text-align: center;
        min-height: 44px;
        line-height: 1.5;
        width: 100%;
        box-sizing: border-box;
    }
    .sidebar-user-menu .btn-logout {
        background: var(--error-50, #fef2f2) !important;
        color: var(--error-600, #dc2626) !important;
        border-color: var(--error-100, #fee2e2) !important;
        font-weight: var(--font-weight-semibold);
    }
    .sidebar-user-menu__name,
    .sidebar-user-menu .header-agence-label {
        color: var(--text-primary) !important;
        font-size: var(--text-sm);
        padding: var(--space-1) 0;
        text-align: center;
    }
    .sidebar-user-menu .header-agence-form {
        display: block !important;
        width: 100%;
    }
    .sidebar-user-menu .header-agence-form .agence-selector {
        width: 100%;
    }

    /* Burger button — flottant en haut à gauche, hors sidebar (déplacé via JS
       au DOM root pour échapper au transform translateX du drawer off-canvas).
       Décalé sous le notch iOS via safe-area-inset-top.
       z-index > sidebar (400) pour rester cliquable même quand le drawer est ouvert. */
    .nav-burger {
        position: fixed;
        top: calc(var(--space-2) + env(safe-area-inset-top));
        left: var(--space-3);
        right: auto;
        z-index: 500;
        width: 44px;
        height: 44px;
        background: var(--surface-elevated);
        border: 1px solid var(--border-default);
        box-shadow: var(--shadow-md);
        border-radius: var(--radius-md);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: left 0.18s var(--ease-out, ease),
                    right 0.18s var(--ease-out, ease);
    }
    /* Quand la sidebar est ouverte (X de fermeture), on déplace le burger à
       droite de l'écran pour qu'il ne chevauche plus le logo du drawer. */
    body.sidebar-open .nav-burger {
        left: auto;
        right: var(--space-3);
    }

    .nav-burger .nav-burger-lines {
        width: 18px;
        height: 14px;
        position: relative;
    }

    .nav-burger .nav-burger-lines span {
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--text-primary);
        border-radius: var(--radius-full);
        transition: transform var(--duration-base) var(--ease-out),
                    opacity var(--duration-base) var(--ease-out);
    }

    .nav-burger .nav-burger-lines span:nth-child(1) { top: 0; }
    .nav-burger .nav-burger-lines span:nth-child(2) { top: 50%; transform: translateY(-50%); }
    .nav-burger .nav-burger-lines span:nth-child(3) { bottom: 0; }

    .nav-burger[aria-expanded="true"] .nav-burger-lines span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    .nav-burger[aria-expanded="true"] .nav-burger-lines span:nth-child(2) {
        opacity: 0;
    }
    .nav-burger[aria-expanded="true"] .nav-burger-lines span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* Décalage du contenu pour laisser place à la topbar mobile */
    .main-content {
        padding-top: calc(56px + env(safe-area-inset-top) + var(--space-3));
        padding-left: var(--space-4);
        padding-right: var(--space-4);
        padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    }

    /* Overlay sombre quand la sidebar mobile est ouverte */
    body.sidebar-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.5);
        z-index: calc(var(--z-modal) - 1);
        animation: fadeIn var(--duration-medium) var(--ease-out);
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    body.sidebar-open {
        overflow: hidden;
    }

    /* ===========================================================
       Mobile Topbar — barre fixe en haut avec logo + nom de page.
       Injectée dynamiquement par includes/nav.php (script en bas).
       Donne un repère visuel constant : « où je suis, comment revenir ».
       =========================================================== */
    .mobile-topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        /* z-index : au-dessus du contenu (1-200), sous l'overlay sombre (--z-overlay = 300)
           pour que le drawer ouvert masque visuellement la topbar via l'overlay. */
        z-index: 250;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        height: calc(56px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) var(--space-3) 0;
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
        border-bottom: 1px solid var(--border-subtle);
        /* Auto-hide au scroll vers le bas (toggle via JS .is-hidden) */
        transform: translateY(0);
        transition: transform 0.22s var(--ease-out, ease);
        will-change: transform;
    }
    .mobile-topbar.is-hidden {
        transform: translateY(-100%);
    }
    /* Le burger suit la topbar pour un mouvement cohérent. */
    .mobile-topbar.is-hidden + .nav-burger,
    .nav-burger.is-hidden {
        transform: translateY(-72px);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.22s var(--ease-out, ease), opacity 0.18s ease;
    }
    .mobile-topbar__spacer {
        width: 44px;
        flex-shrink: 0;
    }
    .mobile-topbar__center {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        min-width: 0;
        line-height: 1.15;
    }
    /* En mobile : on retire le logo de la topbar pour gagner de la place et
       laisser le titre + l'agence respirer. L'identité Cali&Co reste visible
       via le drawer (qui contient le logo en grand) et via l'icône PWA. */
    .mobile-topbar__logo {
        display: none;
    }
    .mobile-topbar__title {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        max-width: 100%;
    }
    .mobile-topbar__agence {
        font-size: 0.7rem;
        font-weight: var(--font-weight-medium);
        color: var(--text-tertiary, #6b7280);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        max-width: 100%;
        letter-spacing: 0.01em;
    }
    .mobile-topbar__actions {
        width: 44px;
        flex-shrink: 0;
    }
}

/* Sur desktop on cache la topbar mobile (juste au cas où elle est injectée) */
@media (min-width: 1024px) {
    .mobile-topbar {
        display: none !important;
    }
}

/* Réduction des proportions sur très petit écran */
@media (max-width: 480px) {
    .mobile-topbar__logo {
        height: 20px;
    }
    .mobile-topbar__title {
        font-size: 13px;
        max-width: 70vw;
    }
    .mobile-topbar__agence {
        max-width: 70vw;
    }
}

/* ===============================================================
   6. RESET DE L'ANCIEN BANDEAU BLEU MARINE (.app-header)
   On annule les styles bleus en desktop ET mobile.
   =============================================================== */
.app-header {
    background: transparent;
    color: var(--text-primary);
    padding: 0;
    gap: 0;
}

/* ===============================================================
   7. PAGE HEADER (dans .main-content) — typo refondue
   =============================================================== */
.main-content .page-header {
    align-items: flex-start;
    margin-top: var(--space-8);
    margin-bottom: var(--space-6);
}

.main-content .page-header h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

/* ===============================================================
   8. CONSULTATION-BANNER — repositionnement pour le layout sidebar
   =============================================================== */
.consultation-banner {
    background: var(--warning-50);
    color: var(--warning-700);
    border-bottom: 1px solid var(--warning-100);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    padding: var(--space-2) var(--space-4);
    gap: var(--space-2);
}

.consultation-banner-icon {
    display: inline-flex;
    align-items: center;
}

@media (min-width: 1024px) {
    .consultation-banner {
        order: 99; /* en bas de la sidebar (après user-menu) */
        margin: var(--space-2) calc(var(--space-3) * -1) calc(var(--space-3) * -1);
        padding: var(--space-2) var(--space-3);
        border-bottom: 0;
        border-top: 1px solid var(--warning-100);
        border-radius: 0;
        text-align: left;
        line-height: 1.4;
        font-size: var(--text-xs);
    }
}

/* Mobile : la bannière reste visible sous la topbar fixe pour ne jamais
   oublier qu'on est en mode consultation, même quand on scrolle. */
@media (max-width: 767.98px) {
    .consultation-banner {
        position: sticky;
        top: calc(56px + env(safe-area-inset-top));
        z-index: 240;
        font-size: 0.78rem;
        padding: var(--space-2) var(--space-3);
        text-align: center;
        justify-content: center;
    }
}

/* ===============================================================
   9. AJUSTEMENTS COMPATIBILITÉ — fond page & .filtre-periode-card
   Pour conserver une cohérence visuelle avec les composants existants.
   =============================================================== */
body {
    background: var(--surface-page);
    color: var(--text-primary);
}

.filtre-periode-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--border-subtle);
}

/* ===============================================================
   10. TABLEAUX — Audit global (vertical-align, tabular-nums,
   colonnes numériques, cellules vides, boutons d'action)
   Auto-appliqué à tous les <table> dans .main-content.
   =============================================================== */
.main-content table {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'cv11' 1;
    font-family: var(--font-sans);
}

.main-content table th,
.main-content table td {
    vertical-align: middle;
    font-family: var(--font-sans);
}

.main-content table th {
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* Sous-libellés en cellule (ex: "Terrain, Rendez-vous" sous l'heure) */
.main-content table td small,
.main-content table td .text-muted {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-weight: var(--font-weight-regular);
    line-height: 1.35;
}

/* Classes utilitaires — auto-appliquées par table-enhance.js
   !important ciblé pour battre les éventuels text-align:left héritage et
   les <style> inline injectés par certains partials (modales, etc.). */
.main-content table th.col-num,
.main-content table td.col-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.main-content table th.col-center,
.main-content table td.col-center {
    text-align: center !important;
}

.main-content table td.empty-cell,
.main-content table td .empty-cell {
    color: var(--text-tertiary) !important;
    font-weight: var(--font-weight-regular);
}

/* ===============================================================
   11. BOUTONS DANGER (Supprimer) — Adoucissement
   Passe de "fond rouge agressif permanent" à "outline rouge discret"
   pour réduire le stress visuel sur les lignes de tableau.
   =============================================================== */
/* Ces overrides utilisent !important car .btn-danger dans style.css définit
   un background plein et notre objectif est de neutraliser ça partout dans
   les tableaux denses, sans aller refondre tout le système de boutons. */
.main-content table .btn-danger,
.main-content table .admin-btn-del-comm,
.main-content table .admin-btn-del-prosp {
    background: transparent !important;
    color: var(--error-600) !important;
    border: 1px solid var(--error-100) !important;
    box-shadow: none;
    font-weight: var(--font-weight-medium);
}

.main-content table .btn-danger:hover,
.main-content table .admin-btn-del-comm:hover,
.main-content table .admin-btn-del-prosp:hover {
    background: var(--error-50) !important;
    border-color: var(--error-500) !important;
    color: var(--error-700) !important;
}

/* Bouton "Modifier" — secondaire neutre, plus discret */
.main-content table .admin-btn-edit-comm,
.main-content table .admin-btn-edit-prosp {
    background: var(--surface-elevated) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: none;
    font-weight: var(--font-weight-medium);
}

.main-content table .admin-btn-edit-comm:hover,
.main-content table .admin-btn-edit-prosp:hover {
    background: var(--surface-subtle) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}

/* Badge RDV (.btn-rdv-prospects-num) — défini en <style> inline dans
   includes/rdv_prospects_modal.php. On le neutralise pour qu'il devienne
   un simple lien numérique cliquable cohérent avec les autres chiffres. */
.main-content table .btn-rdv-prospects-num,
.main-content table .btn-prospection-types-num {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: var(--brand-700) !important;
    font: inherit !important;
    cursor: pointer;
    text-decoration: none;
    font-weight: var(--font-weight-semibold) !important;
}

.main-content table .btn-rdv-prospects-num:hover,
.main-content table .btn-prospection-types-num:hover {
    background: transparent !important;
    color: var(--brand-800) !important;
    text-decoration: underline;
}

/* Groupe d'actions en fin de ligne : espacement homogène */
.main-content table td > .btn + .btn,
.main-content table td > button + button {
    margin-left: var(--space-2);
}

/* ===============================================================
   12. AÉRATION ET LISIBILITÉ DES LIGNES
   =============================================================== */
.main-content table tbody tr {
    transition: background var(--duration-fast) var(--ease-out);
}

.main-content table tbody tr:hover {
    background: var(--surface-subtle);
}

/* ===============================================================
   13. SLIDE-OVER (panneau latéral droit pour drill-down)
   Pattern unifié : tout chiffre cliquable d'un tableau de pilotage
   ouvre ce panneau. Voir assets/js/slide-over.js + api/drill.php.
   =============================================================== */
.slide-over-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    pointer-events: none;
    visibility: hidden;
}

.slide-over-overlay.open {
    pointer-events: auto;
    visibility: visible;
}

.slide-over-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-out);
}

.slide-over-overlay.open .slide-over-backdrop {
    opacity: 1;
}

.slide-over-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 560px;
    background: var(--surface-elevated);
    box-shadow: var(--shadow-xl);
    transform: translateX(100%);
    transition: transform 280ms var(--ease-out);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.slide-over-overlay.open .slide-over-panel {
    transform: translateX(0);
}

.slide-over-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.slide-over-close:hover,
.slide-over-close:focus-visible {
    background: var(--surface-subtle);
    color: var(--text-primary);
    outline: none;
}

.slide-over-close:focus-visible {
    box-shadow: var(--ring-brand);
}

.slide-over-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-8) var(--space-6) var(--space-6);
    -webkit-overflow-scrolling: touch;
}

.slide-over-loading,
.slide-over-error {
    padding: var(--space-10) var(--space-4) var(--space-8);
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.slide-over-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--brand-600);
    animation: slide-over-spin 700ms linear infinite;
}

@keyframes slide-over-spin {
    to { transform: rotate(360deg); }
}

/* ─── Skeleton de chargement (squelette gris animé) ──────────────── */
.slide-over-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.slide-over-skeleton .sk-line,
.slide-over-skeleton .sk-kpi,
.slide-over-skeleton .sk-row {
    background: linear-gradient(
        90deg,
        var(--neutral-100) 0%,
        var(--neutral-50) 50%,
        var(--neutral-100) 100%
    );
    background-size: 200% 100%;
    animation: sk-shimmer 1400ms ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.slide-over-skeleton .sk-eyebrow {
    height: 10px;
    width: 38%;
    margin-bottom: var(--space-1);
}

.slide-over-skeleton .sk-title {
    height: 24px;
    width: 65%;
    border-radius: var(--radius-md);
}

.slide-over-skeleton .sk-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-page);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

.slide-over-skeleton .sk-kpi {
    height: 56px;
    border-radius: var(--radius-md);
}

.slide-over-skeleton .sk-table {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.slide-over-skeleton .sk-row {
    height: 32px;
    border-radius: var(--radius-sm);
}

.slide-over-skeleton .sk-row-head {
    height: 24px;
    opacity: 0.8;
}

@keyframes sk-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Respecte les utilisateurs en reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .slide-over-skeleton .sk-line,
    .slide-over-skeleton .sk-kpi,
    .slide-over-skeleton .sk-row {
        animation: none;
        background: var(--neutral-100);
    }
    .slide-over-spinner {
        animation-duration: 1600ms;
    }
}

/* ─── État d'erreur du slide-over ──────────────────────────────── */
.slide-over-error-icon {
    color: var(--error-500);
}

.slide-over-error-title {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
}

.slide-over-error-code {
    color: var(--text-tertiary);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-sm);
    margin-left: var(--space-1);
}

.slide-over-error-msg {
    color: var(--text-secondary);
    max-width: 340px;
    line-height: var(--leading-snug);
}

.slide-over-retry {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--brand-600);
    color: var(--neutral-0);
    border: 0;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
}

.slide-over-retry:hover {
    background: var(--brand-700);
}

.slide-over-retry:focus-visible {
    outline: none;
    box-shadow: var(--ring-brand);
}

/* Bloque le scroll du body quand le slide-over est ouvert */
body.slide-over-active {
    overflow: hidden;
}

@media (max-width: 768px) {
    .slide-over-panel { max-width: 100%; }
    .slide-over-content { padding: var(--space-10) var(--space-4) var(--space-4); }
}

/* ===============================================================
   14. DRILL PANEL — contenu standard d'un drill-down
   (header + KPIs + tableau + footer). Tout est rendu côté serveur
   par views/drill/{metric}.php.
   =============================================================== */
.drill-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.drill-header {
    padding-right: 2.5rem; /* laisse la place au bouton close */
}

.drill-header-eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-tertiary);
    margin-bottom: var(--space-1);
}

.drill-header-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

.drill-header-meta {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.drill-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-page);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

.drill-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    min-width: 0;
}

.drill-kpi-value {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
}

/* ─── Décomposition Terrain / Phoning / RDV (drill h_prospection) ─────── */
.drill-split {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-page);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}
.drill-split-title {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}
.drill-split-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}
.drill-split-item {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-2-5) var(--space-3);
    background: #fff;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border-subtle);
}
.drill-split-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.drill-split-item--terrain .drill-split-dot { background: #16A34A; }
.drill-split-item--phoning .drill-split-dot { background: #006EB9; }
.drill-split-item--rdv     .drill-split-dot { background: #FFBC00; }
.drill-split-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drill-split-value {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.drill-split-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.2;
}
@media (max-width: 640px) {
    .drill-split-grid { grid-template-columns: 1fr; gap: var(--space-2); }
    .drill-split-item { padding: var(--space-2) var(--space-2-5); }
}

/* Quand la table affiche aussi le split, la première colonne reste compacte */
.drill-table--split th, .drill-table--split td { padding-left: var(--space-2); padding-right: var(--space-2); }

.drill-kpi-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--font-weight-medium);
}

.drill-info {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    padding: var(--space-2-5) var(--space-3);
    background: var(--info-50);
    border-left: 3px solid var(--info-500);
    border-radius: var(--radius-sm);
    line-height: var(--leading-snug);
}

.drill-info strong {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

/* Badge mode de paiement (drill CA : comptant / financement). */
.drill-badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    padding: 1px 8px;
    border-radius: var(--radius-pill, 999px);
    line-height: 1.6;
    white-space: nowrap;
}
.drill-badge--cpt { background: var(--info-50, #e8f1fb); color: var(--info-600, #1565c0); }
.drill-badge--fin { background: #fff3e0; color: #b26a00; }

.drill-empty {
    padding: var(--space-12) var(--space-4);
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    background: var(--surface-page);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border-subtle);
}

.drill-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.drill-table th,
.drill-table td {
    padding: var(--space-2-5) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
    vertical-align: middle;
}

.drill-table thead th {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
}

.drill-table .col-num {
    text-align: right !important;
}

.drill-table tbody tr:hover {
    background: var(--surface-subtle);
}

.drill-table tfoot td {
    font-weight: var(--font-weight-semibold);
    background: var(--surface-page);
    border-top: 2px solid var(--border-default);
    border-bottom: 0;
    color: var(--text-primary);
}

.drill-row-weekend td {
    color: var(--text-tertiary);
    background: rgba(0, 0, 0, 0.015);
}

.drill-date-dow {
    display: inline-block;
    width: 2.25em;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
}

.drill-date-num {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.drill-footer {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.drill-error {
    padding: var(--space-6);
    color: var(--error-700);
    background: var(--error-50);
    border: 1px solid var(--error-100);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

/* ===============================================================
   15. DRILL-LINK — cellule cliquable dans un tableau de pilotage
   Pattern unifié : un seul rendu visuel pour tous les chiffres
   drillables (Devis, BC, CA, RDV, Portes, Jours, H. prospection).
   =============================================================== */
.main-content a.drill-link,
.slide-over a.drill-link,
.drill-panel a.drill-link {
    color: var(--brand-700) !important;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transition: color var(--duration-fast) var(--ease-out);
    font-variant-numeric: tabular-nums;
}

.main-content a.drill-link:hover,
.main-content a.drill-link:focus-visible {
    color: var(--brand-800) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    outline: none;
}

.main-content a.drill-link:focus-visible {
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--ring-brand);
}

/* Mobile : agrandir la hitbox des drill-links pour viser au doigt sans
   rater. On garde l'aspect texte (pas de fond, pas de border) mais on
   ajoute un padding et une min-height qui élargit la zone tactile. */
@media (max-width: 768px) {
    .main-content a.drill-link,
    .slide-over a.drill-link,
    .drill-panel a.drill-link {
        display: inline-block;
        min-height: 44px;
        min-width: 44px;
        padding: 0.4rem 0.3rem !important;
        line-height: 1.5;
        vertical-align: middle;
    }
}

.main-content .drill-empty-value {
    color: var(--text-disabled);
    font-variant-numeric: tabular-nums;
}

.drill-empty-value {
    color: var(--text-disabled);
    font-variant-numeric: tabular-nums;
}

/* Liste de prospects (vue RDV) */
.drill-prospects {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
}

.drill-prospects li {
    font-size: var(--text-xs);
    color: var(--text-primary);
    line-height: 1.4;
}

.drill-prospects li::before {
    content: "·";
    color: var(--brand-500);
    margin-right: var(--space-1-5);
    font-weight: var(--font-weight-bold);
}

/* Calendrier (vue Jours saisis) */
.drill-calendar {
    background: var(--surface-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

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

.drill-calendar-head {
    margin-bottom: var(--space-1);
}

.drill-cal-th {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    text-align: center;
    padding: var(--space-1);
}

.drill-cal-day {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    cursor: default;
    transition: transform var(--duration-fast) var(--ease-out);
}

.drill-cal-day.drill-cal-empty {
    background: transparent;
    border: 0;
}

.drill-cal-num {
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

.drill-cal-tick {
    position: absolute;
    top: 4px;
    right: 6px;
    color: var(--success-600);
    font-weight: var(--font-weight-bold);
    font-size: 10px;
    line-height: 1;
}

.drill-cal-day.drill-cal-ok {
    background: var(--success-50);
    border-color: rgba(16, 185, 129, 0.35);
    color: var(--success-700);
}

.drill-cal-day.drill-cal-miss {
    background: var(--surface-elevated);
    border-color: var(--border-subtle);
    color: var(--text-tertiary);
}

.drill-cal-day.drill-cal-miss .drill-cal-num {
    text-decoration: line-through;
    text-decoration-color: var(--border-default);
}

.drill-cal-day.drill-cal-we {
    background: var(--surface-subtle);
    border-color: var(--border-subtle);
    color: var(--text-disabled);
}

.drill-cal-day:hover:not(.drill-cal-empty) {
    transform: scale(1.05);
    z-index: 1;
}

.drill-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.drill-calendar-legend > span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
}

.drill-cal-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.drill-cal-swatch.drill-cal-ok {
    background: var(--success-50);
    border-color: rgba(16, 185, 129, 0.35);
}
.drill-cal-swatch.drill-cal-miss {
    background: var(--surface-elevated);
}
.drill-cal-swatch.drill-cal-we {
    background: var(--surface-subtle);
}

/* ===============================================================
   16. COMMAND PALETTE (⌘K) — Recherche/navigation globale
   Inspiré : Linear, Notion, Stripe Dashboard, GitHub.
   Composant : assets/js/command-palette.js + api/command-palette-data.php
   =============================================================== */

.cmdk-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) + 10);
    pointer-events: none;
    visibility: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}

.cmdk-overlay.open {
    pointer-events: auto;
    visibility: visible;
}

.cmdk-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity var(--duration-medium) var(--ease-out);
}

.cmdk-overlay.open .cmdk-backdrop {
    opacity: 1;
}

.cmdk-modal {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 var(--space-4);
    background: var(--surface-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl, 14px);
    box-shadow: var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    opacity: 0;
    transform: translateY(-12px) scale(0.985);
    transition: opacity var(--duration-medium) var(--ease-out),
                transform var(--duration-medium) var(--ease-out);
}

.cmdk-overlay.open .cmdk-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ─── Input ───────────────────────────────────────────── */
.cmdk-input-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.cmdk-input-icon {
    flex-shrink: 0;
    color: var(--text-tertiary);
    display: inline-flex;
}

.cmdk-input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    color: var(--text-primary);
    padding: var(--space-1) 0;
    min-width: 0;
}

.cmdk-input::placeholder {
    color: var(--text-tertiary);
    font-weight: var(--font-weight-regular);
}

.cmdk-kbd-hint {
    flex-shrink: 0;
    background: var(--surface-page);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
    font-size: var(--text-xs);
    padding: 2px 6px;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.cmdk-kbd-hint:hover {
    background: var(--surface-subtle);
    color: var(--text-secondary);
}

/* ─── Liste de résultats ───────────────────────────────── */
.cmdk-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2) 0;
    -webkit-overflow-scrolling: touch;
}

.cmdk-group-label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    padding: var(--space-2-5) var(--space-4) var(--space-1);
}

.cmdk-group-label:first-child {
    padding-top: var(--space-1);
}

.cmdk-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-4);
    cursor: pointer;
    color: var(--text-primary);
    font-size: var(--text-sm);
    line-height: 1.35;
    border-left: 2px solid transparent;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.cmdk-item.is-active {
    background: var(--surface-subtle);
    border-left-color: var(--brand-500);
}

.cmdk-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background: var(--surface-page);
    color: var(--text-secondary);
}

.cmdk-item.is-active .cmdk-icon {
    background: var(--brand-50);
    color: var(--brand-700);
}

.cmdk-label {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdk-label mark {
    background: var(--brand-50);
    color: var(--brand-800);
    padding: 0 2px;
    border-radius: 2px;
}

.cmdk-hint {
    flex-shrink: 0;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    margin-left: var(--space-3);
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── État vide ──────────────────────────────────────── */
.cmdk-empty {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

/* ─── Footer (raccourcis clavier) ────────────────────── */
.cmdk-footer {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-page);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    align-items: center;
}

.cmdk-footer kbd {
    display: inline-block;
    background: var(--surface-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
    margin-right: 4px;
    font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
    font-size: 10px;
    line-height: 14px;
    color: var(--text-secondary);
    box-shadow: 0 1px 0 var(--border-subtle);
}

body.cmdk-active {
    overflow: hidden;
}

@media (max-width: 640px) {
    .cmdk-overlay {
        padding-top: 8vh;
    }
    .cmdk-modal {
        margin: 0 var(--space-3);
        max-height: 80vh;
    }
    .cmdk-hint {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cmdk-modal,
    .cmdk-backdrop {
        transition: none;
    }
}

/* ─── Bouton ⌘K dans la sidebar / header ─────────────── */
.cmdk-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--surface-page);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    padding: var(--space-1-5) var(--space-2-5);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    width: 100%;
    text-align: left;
}

.cmdk-trigger:hover {
    background: var(--surface-subtle);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.cmdk-trigger:focus-visible {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: var(--ring-brand);
}

.cmdk-trigger-icon {
    color: var(--text-tertiary);
    flex-shrink: 0;
    display: inline-flex;
}

.cmdk-trigger-label {
    flex: 1;
    color: inherit;
}

.cmdk-trigger-kbd {
    flex-shrink: 0;
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
    font-size: 11px;
    line-height: 1.4;
}

/* Position dans la sidebar : juste après le user-menu */
@media (min-width: 1024px) {
    .cmdk-trigger-wrap {
        order: 1.5; /* entre brand (1) et nav (2) */
        padding: 0 var(--space-2) var(--space-2);
    }
}

@media (max-width: 1023.98px) {
    .cmdk-trigger-wrap {
        padding: 0 var(--space-2) var(--space-2);
    }
}

/*
 * Sur smartphone, le raccourci ⌘K n'a pas d'utilité (pas de clavier physique
 * et un menu off-canvas suffit). On masque pour gagner de la place dans le
 * tiroir de navigation.
 */
@media (max-width: 767.98px) {
    .cmdk-trigger-wrap {
        display: none;
    }
}

/* ============================================================
   PWA — Bannière d'installation (Android/Chrome + iOS)
   Apparaît une seule fois, en bas d'écran, dismissible 30 jours.
   ============================================================ */
.cali-install-banner {
    position: fixed;
    left: 50%;
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    transform: translate(-50%, 24px);
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--surface-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    box-shadow: 0 18px 40px rgba(0, 53, 92, 0.18), 0 4px 12px rgba(0, 53, 92, 0.06);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-3);
    width: min(92vw, 480px);
    opacity: 0;
    pointer-events: none;
    transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out);
}
.cali-install-banner--in {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}
.cali-install-banner--leaving {
    transform: translate(-50%, 12px);
    opacity: 0;
}
.cali-install-banner__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-50);
    color: var(--brand-700);
    border-radius: var(--radius-md);
}
.cali-install-banner__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cali-install-banner__body strong {
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.cali-install-banner__body span {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.35;
}
.cali-install-banner__actions {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}
.cali-install-banner__cta {
    background: var(--brand-600);
    color: var(--neutral-0);
    border: 0;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    min-height: 40px;
}
.cali-install-banner__cta:hover {
    background: var(--brand-700);
}
.cali-install-banner__dismiss {
    background: transparent;
    color: var(--text-tertiary);
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.cali-install-banner__dismiss:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}
@media (max-width: 480px) {
    .cali-install-banner {
        width: calc(100vw - var(--space-4));
        bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
    }
    .cali-install-banner__body span {
        font-size: 11px;
    }
}

/* ============================================================
   PWA — Pill « N saisie(s) en attente de synchro »
   Visible en bas à droite uniquement quand la queue contient
   au moins une saisie.
   ============================================================ */
.cali-sync-pill {
    position: fixed;
    right: var(--space-3);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    z-index: 8500;
    display: none;
    align-items: center;
    gap: var(--space-2);
    background: var(--surface-elevated);
    color: var(--text-primary);
    border: 1px solid var(--warning-300, #fcd34d);
    border-radius: var(--radius-full);
    padding: var(--space-1-5) var(--space-2-5);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    font-size: var(--text-xs);
    max-width: calc(100vw - var(--space-4));
}
.cali-sync-pill--visible {
    display: inline-flex;
    animation: caliSyncIn 260ms var(--ease-out);
}
.cali-sync-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--warning-500, #f59e0b);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
    animation: caliSyncPulse 1.8s ease-in-out infinite;
}
.cali-sync-pill--syncing .cali-sync-pill__dot {
    background: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(31, 137, 232, 0.18);
}
.cali-sync-pill__label {
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}
.cali-sync-pill__action {
    background: transparent;
    border: 0;
    color: var(--brand-700);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
}
.cali-sync-pill__action:hover {
    background: var(--brand-50);
}
.cali-sync-pill--syncing .cali-sync-pill__action {
    pointer-events: none;
    opacity: 0.5;
}

@keyframes caliSyncIn {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes caliSyncPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
}

@media (max-width: 480px) {
    .cali-sync-pill {
        left: var(--space-2);
        right: var(--space-2);
        justify-content: center;
        bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
    }
    .cali-sync-pill__label {
        white-space: normal;
        font-size: 12px;
    }
}

/* ============================================================
   PWA — Variante "queued" pour l'écran de succès du wizard
   (cas hors-ligne : la saisie est en attente)
   ============================================================ */
.wizard-success-screen--queued .wizard-success-icon {
    color: var(--warning-600, #d97706);
    background: var(--warning-50, #fffbeb);
}

/* ============================================================
   OBJECTIFS — Page Direction
   admin/objectifs/direction.php
   ============================================================ */

.objectifs-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.objectifs-page-header h2 {
    margin: var(--space-1) 0 var(--space-1);
    font-size: var(--text-2xl);
    color: var(--text-primary);
}

.objectifs-page-header .page-subtitle {
    color: var(--text-secondary);
    margin: 0;
    max-width: 56ch;
    font-size: var(--text-sm);
}

.page-eyebrow {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
}

/* Mini résumé */
.obj-summary {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.obj-summary-period,
.obj-summary-coverage {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
}

.obj-summary-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-tertiary);
    font-weight: var(--font-weight-semibold);
}

.obj-summary-value {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.obj-summary-pct {
    font-size: var(--text-xs);
    background: var(--brand-50);
    color: var(--brand-700);
    border-radius: var(--radius-full);
    padding: 2px 8px;
    font-weight: var(--font-weight-semibold);
}

/* Le formulaire principal */
.obj-direction-form {
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

/* Grille des plafonds */
.obj-grid {
    display: grid;
    grid-template-columns:
        minmax(180px, 1.4fr)   /* Agence */
        repeat(4, minmax(90px, 1fr))  /* Commerciaux : RDV, Ventes, CA, Fin */
        repeat(2, minmax(90px, 1fr))  /* Prospecteurs : RDV, Avis */
        minmax(140px, auto);   /* Action */
    column-gap: var(--space-3);
    row-gap: 0;
}

/* Headers (2 lignes) */
.obj-grid-header,
.obj-grid-subheader {
    display: contents;
}

.obj-h,
.obj-sh {
    padding: var(--space-3) var(--space-2);
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--font-weight-semibold);
}

.obj-h {
    padding-top: var(--space-3);
    padding-bottom: var(--space-1);
    border-bottom: none;
    background: var(--neutral-100);
}

.obj-h-agence {
    grid-column: 1;
}
.obj-h-section.obj-h-comm {
    grid-column: 2 / span 4;
    background: var(--brand-50);
    color: var(--brand-700);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    text-align: center;
}
.obj-h-section.obj-h-prosp {
    grid-column: 6 / span 2;
    background: var(--accent-50);
    color: var(--accent-700);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    text-align: center;
}
.obj-h-action {
    grid-column: 8;
    background: var(--neutral-100);
}

.obj-sh {
    text-align: center;
    background: var(--surface-elevated);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-2) var(--space-2);
}
.obj-sh-comm  { color: var(--brand-700);  background: var(--brand-50);   }
.obj-sh-prosp { color: var(--accent-700); background: var(--accent-50);  }

/* Rangées */
.obj-grid-row {
    display: contents;
}

/*
 * Wrappers sémantiques (Objectifs commerciaux / prospecteurs).
 * En desktop on utilise `display: contents` pour que les enfants directs
 * (les `.obj-cell` ou `.obj-cell-indiv`) participent à la grille parent
 * sans wrapper visible. En mobile, on bascule en `display: block` pour
 * obtenir une vraie hiérarchie de cartes.
 */
.obj-row-section {
    display: contents;
}
.obj-row-section-header {
    display: none;
}

/* Cellule indiv : positionnement en grille pilotée par les classes (plus de styles inline) */
.obj-cell-indiv-comm  { grid-column: 2 / span 4; }
.obj-cell-indiv-prosp { grid-column: 6 / span 2; }

.obj-cell {
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-elevated);
    display: flex;
    align-items: center;
    transition: background var(--duration-fast) var(--ease-out);
}

.obj-grid-row:hover .obj-cell {
    background: var(--neutral-50);
}

.obj-cell-agence {
    padding-left: var(--space-4);
    gap: var(--space-2);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.obj-cell-agence-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.obj-agence-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Selects de mode (Par agence / Par RC ou RP) */
.obj-mode-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-1);
}

.obj-mode-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 8px;
    background: var(--neutral-50);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    cursor: pointer;
}

.obj-mode-chip-label {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.obj-mode-select {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    padding: 0 2px 0 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 6px) 50%, calc(100% - 3px) 50%;
    background-size: 3px 3px, 3px 3px;
    background-repeat: no-repeat;
    padding-right: 12px;
}

.obj-mode-select:focus {
    outline: 2px solid var(--brand-300);
    outline-offset: 2px;
    border-radius: 4px;
}

/* État "individuel" : remplace les inputs par un message + CTA */
.obj-cell-indiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    background: linear-gradient(0deg, rgba(99, 102, 241, 0.04), rgba(99, 102, 241, 0.04)), var(--surface-elevated);
    border-bottom: 1px solid var(--border-subtle);
    border-left: 3px solid var(--brand-300);
}

.obj-cell-indiv-prosp {
    background: linear-gradient(0deg, rgba(245, 158, 11, 0.05), rgba(245, 158, 11, 0.05)), var(--surface-elevated);
    border-left-color: var(--accent-300);
}

.obj-indiv-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.obj-indiv-eyebrow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
}

.obj-indiv-sum {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.35;
}

.obj-indiv-sum strong {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

.obj-indiv-cta {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* La version mobile complète (cards par agence) est gérée plus bas
 * dans `@media (max-width: 980px)` — voir la section dédiée. */

.obj-agence-badge {
    color: var(--success-500);
    font-size: var(--text-xs);
    line-height: 1;
}

.obj-cell-comm,
.obj-cell-prosp {
    justify-content: center;
}

.obj-cell input {
    width: 100%;
    text-align: center;
    padding: 6px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-page);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-primary);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow  var(--duration-fast) var(--ease-out);
}

.obj-cell input:hover {
    border-color: var(--border-default);
}

.obj-cell input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: var(--ring-brand);
}

.obj-row-defined .obj-cell-agence {
    border-left: 3px solid var(--success-500);
    padding-left: calc(var(--space-4) - 3px);
}

.obj-cell-action {
    padding-right: var(--space-4);
    justify-content: flex-end;
    position: relative;
}

/* Pills d'action (Répartir RC / RP) */
.obj-cell-action {
    gap: var(--space-1);
}

.obj-action-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 28px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border: 1px solid;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
    letter-spacing: var(--tracking-wide);
}

.obj-action-pill-comm {
    background: var(--brand-50);
    color: var(--brand-700);
    border-color: var(--brand-200);
}
.obj-action-pill-comm:hover {
    background: var(--brand-100);
    border-color: var(--brand-300);
}

.obj-action-pill-prosp {
    background: var(--accent-50);
    color: var(--accent-700);
    border-color: var(--accent-200);
}
.obj-action-pill-prosp:hover {
    background: var(--accent-100);
    border-color: var(--accent-300);
}

/* Sticky footer du formulaire */
.obj-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-subtle);
    border-top: 1px solid var(--border-subtle);
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
}

.obj-form-footer-hint {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ==========================================================
   Pills d'action : badges courts (desktop) / boutons longs (mobile)
   ========================================================== */
.obj-action-pill-long { display: none; }
.obj-action-pill-short { display: inline; }

/* ==========================================================
   Responsive : repli en mode "cards par agence" sous 980px
   ========================================================== */
@media (max-width: 980px) {
    /* Le formulaire devient transparent : les cards (= rows) ont leur propre cadre */
    .obj-direction-form {
        background: transparent;
        border: none;
        box-shadow: none;
        overflow: visible;
    }

    .obj-grid {
        display: block;
        column-gap: 0;
        padding: 0;
    }

    .obj-grid-header,
    .obj-grid-subheader {
        display: none !important;
    }

    .obj-grid-row {
        display: block;
        background: var(--surface-elevated);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-xs);
        margin-bottom: var(--space-3);
        overflow: hidden;
    }
    .obj-row-defined {
        border-left: 3px solid var(--success-500);
    }

    /* Reset des cellules */
    .obj-cell {
        background: transparent !important;
        border-bottom: 0;
        padding: 0;
        position: relative;
    }
    .obj-grid-row:hover .obj-cell {
        background: transparent !important;
    }

    /* ─── Header de carte : nom agence + sélecteurs de modes ─── */
    .obj-cell-agence {
        background: var(--surface-subtle) !important;
        padding: var(--space-3) var(--space-4) !important;
        gap: var(--space-3);
        border-bottom: 1px solid var(--border-subtle);
        border-left: 0 !important;
        flex-direction: column;
        align-items: stretch;
    }
    .obj-cell-agence-head {
        font-size: var(--text-base);
        font-weight: var(--font-weight-semibold);
        gap: var(--space-2);
    }
    .obj-agence-name {
        font-size: var(--text-base);
        white-space: normal;
        text-overflow: clip;
    }
    .obj-row-defined .obj-cell-agence {
        border-left: 0 !important;
        padding-left: var(--space-4) !important;
    }

    /* Mode chips : empilés, occupent toute la largeur, taille tactile */
    .obj-mode-chips {
        flex-direction: column;
        gap: var(--space-2);
        margin-top: var(--space-1);
    }
    .obj-mode-chip {
        padding: 10px 12px;
        min-height: 44px;
        font-size: 13px;
        background: var(--surface-elevated);
        border-radius: var(--radius-md);
        gap: var(--space-2);
        justify-content: space-between;
    }
    .obj-mode-chip-label {
        font-size: 11px;
        color: var(--text-tertiary);
        font-weight: var(--font-weight-semibold);
    }
    .obj-mode-select {
        font-size: 14px;
        font-weight: var(--font-weight-semibold);
        text-align: right;
        padding-right: 14px;
        background-position: calc(100% - 4px) 50%, calc(100% - 1px) 50%;
        background-size: 4px 4px, 4px 4px;
        min-height: 28px;
    }

    /* ─── Sections : commerciaux / prospecteurs deviennent des blocs ─── */
    .obj-row-section {
        display: block;
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--border-subtle);
    }
    .obj-row-section--prosp {
        background: linear-gradient(0deg, rgba(245, 158, 11, 0.04), rgba(245, 158, 11, 0.04));
    }
    .obj-row-section-header {
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        font-weight: var(--font-weight-semibold);
        color: var(--text-tertiary);
        margin-bottom: var(--space-2-5);
    }
    .obj-row-section--comm .obj-row-section-header { color: var(--brand-700); }
    .obj-row-section--prosp .obj-row-section-header { color: var(--accent-700); }

    /* Inputs avec leur libellé court (data-label) */
    .obj-cell-comm,
    .obj-cell-prosp {
        display: grid;
        grid-template-columns: minmax(110px, 0.8fr) 1fr;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) 0 !important;
        min-height: 48px;
    }
    .obj-cell-comm + .obj-cell-comm,
    .obj-cell-prosp + .obj-cell-prosp {
        border-top: 1px dashed var(--border-subtle);
    }
    .obj-cell-comm::before,
    .obj-cell-prosp::before {
        content: attr(data-label);
        font-size: var(--text-sm);
        color: var(--text-secondary);
        font-weight: var(--font-weight-medium);
        position: static;
        text-transform: none;
        letter-spacing: 0;
    }
    .obj-cell input {
        height: 44px;
        padding: 8px 12px;
        font-size: 16px; /* Évite le zoom auto iOS */
        text-align: right;
    }

    /* Bloc indiv (mode "individuel") : carte interne avec CTA pleine largeur */
    .obj-cell-indiv {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding: var(--space-3) !important;
        border-radius: var(--radius-md);
        border-bottom: 0;
        margin: 0;
        grid-column: auto !important; /* override desktop grid-column */
    }
    .obj-cell-indiv .obj-indiv-cta {
        width: 100%;
        text-align: center;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: var(--text-sm);
    }
    .obj-indiv-sum {
        font-size: var(--text-sm);
    }

    /* ─── Footer de carte : actions slide-over ─── */
    .obj-cell-action {
        display: flex !important;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4) !important;
        background: var(--surface-subtle) !important;
        justify-content: stretch;
    }
    .obj-action-pill {
        width: 100%;
        min-height: 44px;
        height: auto;
        font-size: var(--text-sm);
        padding: 0 var(--space-3);
    }
    .obj-action-pill-short { display: none; }
    .obj-action-pill-long  { display: inline; }

    /* ─── Footer global du formulaire : bouton plein largeur sticky ─── */
    .obj-form-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        margin-top: var(--space-2);
        border-top: 0;
        border-radius: var(--radius-lg);
        background: var(--surface-elevated);
        border: 1px solid var(--border-subtle);
        box-shadow: var(--shadow-sm);
        position: sticky;
        bottom: env(safe-area-inset-bottom, 0);
    }
    .obj-form-footer .btn {
        width: 100%;
        min-height: 48px;
        font-size: var(--text-base);
    }
    .obj-form-footer-hint {
        font-size: var(--text-xs);
        line-height: 1.4;
        color: var(--text-tertiary);
    }

    /* Résumé d'en-tête : plus compact et lisible */
    .obj-summary {
        gap: var(--space-3);
        padding: var(--space-3);
        border-radius: var(--radius-lg);
    }
    .obj-summary-period,
    .obj-summary-coverage {
        flex: 1 1 auto;
        min-width: 140px;
    }
    .obj-summary-value {
        font-size: var(--text-base);
    }
}

/* Smartphone strict : encore plus dense, et mode "Comm./Prosp." reste lisible */
@media (max-width: 480px) {
    .obj-cell-agence {
        padding: var(--space-3) !important;
    }
    .obj-row-section {
        padding: var(--space-3);
    }
    .obj-cell-action {
        padding: var(--space-3) !important;
    }
    .obj-mode-chip-label {
        flex: 0 0 56px;
    }
}

/* ============================================================
   OBJECTIFS — Slide-over d'attribution (RC/RP)
   api/objectifs-attribuer.php
   ============================================================ */

.obj-attr-panel {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Mode « inline » : panneau utilisé directement dans la page (pas dans un slide-over). */
.obj-attr-panel-inline {
    min-height: 0;
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    padding: var(--space-5) var(--space-6);
}

.obj-attr-panel-inline .obj-attr-footer {
    position: static;
    background: transparent;
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--space-4);
}

.obj-attr-panel-inline #slide-over-title {
    font-size: var(--text-xl);
}

/* ============================================================
   OBJECTIFS — Page Membre (consultation pure)
   admin/objectifs/perso.php
   ============================================================ */

.obj-perso-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.obj-perso-card {
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-5);
    box-shadow: var(--shadow-xs);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--duration-fast) var(--ease-out);
}

.obj-perso-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
}

.obj-perso-card:hover {
    box-shadow: var(--shadow-sm);
}

.obj-perso-card-label {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

.obj-perso-card-value {
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--space-1);
}

.obj-perso-card-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.obj-perso-footnote {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    text-align: center;
    margin-top: var(--space-5);
    padding: var(--space-3);
    background: var(--surface-subtle);
    border-radius: var(--radius-md);
}

/* État vide */
.obj-perso-empty {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
}

.obj-perso-empty-icon {
    display: inline-flex;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--warning-50);
    color: var(--warning-600);
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
}

.obj-perso-empty h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xl);
    color: var(--text-primary);
}

.obj-perso-empty p {
    color: var(--text-secondary);
    margin: 0 0 var(--space-1);
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
}

.obj-perso-empty-hint {
    color: var(--text-tertiary) !important;
    font-size: var(--text-sm);
}

.obj-attr-header {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-4);
}

.obj-attr-warning {
    background: var(--warning-50);
    border: 1px solid var(--warning-500);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    color: var(--warning-700);
    margin-bottom: var(--space-4);
}
.obj-attr-warning p { margin: 0; }
.obj-attr-warning-hint { font-size: var(--text-sm); margin-top: var(--space-1) !important; opacity: 0.85; }

/* Note explicative en mode "individuel" (Par RC / Par RP) */
.obj-attr-mode-note {
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    background: var(--brand-50);
    border-left: 3px solid var(--brand-400, var(--brand-500));
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
.obj-attr-mode-note strong {
    color: var(--brand-700);
    font-weight: var(--font-weight-semibold);
}

/* En mode individuel : le footer "Total agence (calculé)" est neutre (pas de plafond) */
.obj-attr-panel-individuel .obj-attr-totals th {
    color: var(--text-secondary);
}
.obj-attr-panel-individuel .obj-attr-sum-over {
    /* Inactive le style "dépassement" en mode individuel */
    color: inherit !important;
    background: transparent !important;
}

/* État « lecture seule » : RC/RP qui consulte des objectifs fixés par le DC */
.obj-equipe-readonly-banner {
    margin-bottom: var(--space-4);
}
.obj-attr-panel-readonly .obj-attr-input {
    background: var(--neutral-50, #f8fafc) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-subtle) !important;
    cursor: not-allowed;
}
.obj-attr-panel-readonly .obj-attr-input:hover,
.obj-attr-panel-readonly .obj-attr-input:focus {
    border-color: var(--border-subtle) !important;
    box-shadow: none !important;
}
.obj-equipe-panel-readonly .obj-attr-section {
    opacity: 0.95;
}

/* Rappel des plafonds */
.obj-attr-caps {
    margin-bottom: var(--space-5);
}

.obj-attr-caps-title {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

.obj-attr-caps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-2);
}

.obj-attr-cap {
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
}

.obj-attr-cap-label {
    font-size: var(--text-xs);
    color: var(--brand-700);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--font-weight-semibold);
}

.obj-attr-cap-value {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--brand-800);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* Section table */
.obj-attr-section-title {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

.obj-attr-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: var(--space-3);
}

.obj-attr-table th,
.obj-attr-table td {
    padding: var(--space-2) var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
}

.obj-attr-table thead th {
    background: var(--surface-subtle);
    text-align: center;
    color: var(--text-tertiary);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-xs);
    padding-top: var(--space-2-5);
    padding-bottom: var(--space-2-5);
}

.obj-attr-th-name { text-align: left !important; }

.obj-attr-name {
    text-align: left;
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.obj-attr-input {
    width: 100%;
    text-align: center;
    padding: 6px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-elevated);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-primary);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow  var(--duration-fast) var(--ease-out);
}

.obj-attr-input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: var(--ring-brand);
}

/* ==========================================================
   OBJ-ATTR — Mobile : transformation tableau → cards par membre
   ========================================================== */
@media (max-width: 640px) {
    .obj-attr-table,
    .obj-attr-table thead,
    .obj-attr-table tbody,
    .obj-attr-table tfoot {
        display: block;
        width: 100%;
    }
    .obj-attr-table thead { display: none; }
    .obj-attr-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        padding: 0.85rem 0.85rem 0.7rem;
        background: var(--surface-elevated);
        border: 1px solid var(--border-subtle, #e2e8f0);
        border-radius: 12px;
        margin-bottom: 0.6rem;
    }
    .obj-attr-table tbody td {
        padding: 0;
        position: relative;
        border-bottom: 0;
    }
    .obj-attr-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.72rem;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 0.2rem;
        font-weight: var(--font-weight-semibold);
    }
    .obj-attr-table tbody tr > th.obj-attr-name {
        grid-column: 1 / -1;
        font-weight: 700;
        font-size: 0.95rem;
        padding: 0 0 0.3rem;
        color: var(--text-primary);
        text-align: left !important;
        border-bottom: 1px solid var(--border-subtle, #f0f4f8);
        margin-bottom: 0.15rem;
    }
    .obj-attr-input {
        font-size: 16px;
        padding: 0.6rem 0.5rem;
        min-height: 44px;
    }

    /* Totaux : grille 2 colonnes, header full-width au-dessus */
    .obj-attr-table tfoot tr.obj-attr-totals {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        padding: 0.7rem 0.85rem 0.85rem;
        margin-top: 0.4rem;
        border-radius: 12px;
    }
    .obj-attr-table tfoot tr.obj-attr-totals th {
        grid-column: 1 / -1;
        text-align: left;
        padding: 0 0 0.2rem;
        font-weight: var(--font-weight-semibold);
        font-size: 0.85rem;
        background: transparent;
        border-bottom: 1px solid var(--border-default, #e2e8f0);
        margin-bottom: 0.15rem;
    }
    .obj-attr-table tfoot tr.obj-attr-totals td {
        padding: 0;
        border-bottom: 0;
        background: transparent;
        text-align: left;
        font-size: 0.95rem;
    }
    .obj-attr-table tfoot tr.obj-attr-totals td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 0.15rem;
        font-weight: var(--font-weight-semibold);
    }

    /* Footer actions du panel */
    .obj-attr-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 0.5rem;
    }
    .obj-attr-footer .btn {
        width: 100%;
        min-height: 48px;
    }

    /* Panneau inline (page équipe RC) : padding plus compact */
    .obj-attr-panel-inline {
        padding: var(--space-3) var(--space-3);
        border-radius: var(--radius-lg);
    }
    .obj-attr-panel-inline #slide-over-title {
        font-size: var(--text-lg);
    }

    /* Rappel des plafonds : 2 colonnes plus lisibles */
    .obj-attr-caps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
    }
    .obj-attr-cap {
        padding: var(--space-2) var(--space-3);
    }
    .obj-attr-cap-value {
        font-size: var(--text-lg);
    }

    /* Note explicative en mode individuel : plus compact */
    .obj-attr-mode-note {
        font-size: var(--text-xs);
        padding: var(--space-2);
        line-height: 1.4;
    }
}

/* Footer du tableau : sommes */
.obj-attr-totals th,
.obj-attr-totals td {
    background: var(--neutral-50);
    border-top: 2px solid var(--border-default);
    border-bottom: none;
    text-align: center;
    font-weight: var(--font-weight-semibold);
    padding: var(--space-3) var(--space-2);
}

.obj-attr-totals th { text-align: left; color: var(--text-secondary); }

.obj-attr-sum {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    transition: color var(--duration-fast) var(--ease-out);
}

.obj-attr-sum-over {
    color: var(--error-600);
}

.obj-attr-sum-sep { color: var(--text-tertiary); margin: 0 2px; }
.obj-attr-cap-inline { color: var(--text-tertiary); font-weight: var(--font-weight-medium); }

/* Statut (idle / error / saving / success) */
.obj-attr-status {
    margin-top: var(--space-3);
    min-height: 1.5em;
    font-size: var(--text-sm);
    white-space: pre-line;
}

.obj-attr-status[data-status="idle"]    { color: transparent; }
.obj-attr-status[data-status="saving"]  { color: var(--text-secondary); }
.obj-attr-status[data-status="success"] {
    color: var(--success-700);
    background: var(--success-50);
    border: 1px solid var(--success-100);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-weight: var(--font-weight-medium);
}
.obj-attr-status[data-status="error"] {
    color: var(--error-700);
    background: var(--error-50);
    border: 1px solid var(--error-100);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-weight: var(--font-weight-medium);
}

.obj-attr-status-msg { margin: 0; }

/* Footer du panel */
.obj-attr-footer {
    margin-top: auto;
    padding-top: var(--space-4);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    border-top: 1px solid var(--border-subtle);
    position: sticky;
    bottom: 0;
    background: var(--surface-elevated);
}

.obj-attr-saving { opacity: 0.8; pointer-events: none; }

/* Boutons : variantes utilisées */
.btn-danger {
    background: var(--error-600);
    color: var(--text-inverted);
    border: 1px solid var(--error-700);
    padding: 8px 14px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    transition: background var(--duration-fast) var(--ease-out);
}
.btn-danger:hover { background: var(--error-700); }
.btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-secondary {
    background: var(--surface-subtle);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    padding: 8px 14px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
}
.btn-secondary:hover { background: var(--neutral-200); }

/* Bouton "Permissions" dans la liste utilisateurs admin :
   teinte indigo (distinct des CRUD users) sans inline style.
   ========================================================== */
.btn-permissions {
    background: var(--info-600, #6366f1);
    color: var(--text-inverted, #fff);
    border: 1px solid var(--info-700, #4f46e5);
}
.btn-permissions:hover {
    background: var(--info-700, #4f46e5);
    color: var(--text-inverted, #fff);
}

/* Liste utilisateurs admin : colonne actions compacte.
   ========================================================== */
.admin-users-actions {
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Mobile : actions empilées full-width pour pouce confortable.
   On vise iPhone Pro Max (430px) et plus petit, en s'alignant sur le
   breakpoint global du pattern table-mobile-cards. */
@media (max-width: 768px) {
    .admin-users-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        white-space: normal;
    }
    .admin-users-actions .btn,
    .admin-users-actions form,
    .admin-users-actions form .btn {
        width: 100%;
    }
    .admin-users-actions form {
        display: block !important;
    }
}

/* ──────────────────────────────────────────────────────────────
   Admin Users — sélecteur d'agences (réutilisé create + edit)
   Remplace les inline styles dupliqués des checkboxes par entité.
   ────────────────────────────────────────────────────────────── */
.admin-users-agences-wrapper { margin-top: 0.75rem; }
.admin-users-agences-entreprise { margin-bottom: 1rem; }
.admin-users-agences-entreprise-name {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--brand-500, #006EB9);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.admin-users-agences-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem 1.5rem;
    padding: 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-subtle, #fafbfc);
}
.admin-users-agence-label {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin: 0;
}
.admin-users-agence-label input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .admin-users-agences-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Sous-section "Assignation d'équipe" du form création.
   ========================================================== */
.admin-users-assignation-section {
    display: none;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}
.admin-users-assignation-section.is-visible { display: flex; }
.admin-users-assignation-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
    max-height: 240px;
    overflow-y: auto;
    padding: 0.25rem;
}
/* On force display:flex + width:auto avec une spécificité supérieure aux
   règles globales .form-group label / .form-group input — sinon l'option
   s'empile verticalement avec la checkbox en pleine largeur (cf bug Step 4). */
.form-group .admin-users-assignation-option,
label.admin-users-assignation-option {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin: 0;
    padding: 0.4rem 0.55rem;
    font-weight: 400;
    font-size: 0.9rem;
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-sm, 6px);
    transition: background 0.12s, border-color 0.12s;
    line-height: 1.3;
}
.form-group .admin-users-assignation-option:hover,
label.admin-users-assignation-option:hover {
    background: var(--surface-soft, #f9fafb);
    border-color: var(--primary-300, #93c5fd);
}
.form-group .admin-users-assignation-option input[type="checkbox"],
label.admin-users-assignation-option input[type="checkbox"] {
    width: auto !important;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}
.admin-users-form-block { margin-top: 1rem; }

/* ──────────────────────────────────────────────────────────────
   Toggle « Compte administrateur système ».
   Volontairement isolé du select de rôle classique pour éliminer
   les erreurs (un DA qui validait par mégarde "Administrateur").
   ────────────────────────────────────────────────────────────── */
.admin-account-toggle {
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--warning-300, #fbbf24);
    background: var(--warning-50, #fffbeb);
    border-radius: var(--radius-md);
}
.admin-account-toggle__label {
    display: flex !important;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    margin: 0;
}
.admin-account-toggle__label input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    accent-color: var(--warning-600, #d97706);
}
.admin-account-toggle__title {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--warning-800, #92400e);
    margin-bottom: 0.2rem;
}
.admin-account-toggle__desc {
    display: block;
    font-size: 0.85rem;
    color: var(--warning-700, #b45309);
    line-height: 1.4;
}
.admin-account-toggle.is-active {
    border-color: var(--error-500, #ef4444);
    background: var(--error-50, #fef2f2);
}
.admin-account-toggle.is-active .admin-account-toggle__title { color: var(--error-700, #b91c1c); }
.admin-account-toggle.is-active .admin-account-toggle__desc  { color: var(--error-600, #dc2626); }

/* Indication visuelle quand le select rôle est neutralisé par le toggle admin */
select.is-locked-by-admin-toggle {
    opacity: 0.55;
    pointer-events: none;
}

/* Petite indication sous un champ */
.form-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    line-height: 1.4;
}

/* ──────────────────────────────────────────────────────────────
   Toolbar de filtres de la liste utilisateurs (admin/index.php).
   Cherche → role → statut → expand/collapse all.
   ────────────────────────────────────────────────────────────── */
.users-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--surface-soft, #fafafa);
}
@media (max-width: 640px) {
    .users-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }
    .users-toolbar__filters {
        gap: 0.4rem;
        flex-wrap: wrap;
    }
    /* Les boutons "Tout déplier / replier" sont du confort desktop ; en mobile
       on les masque pour gagner de la place — l'utilisateur peut toujours
       déplier individuellement via les `<details>`. */
    #users-expand-all,
    #users-collapse-all {
        display: none;
    }
    .users-toolbar__select {
        flex: 1;
        min-width: 0;
    }
}
.users-toolbar__search {
    flex: 1 1 240px;
    min-width: 200px;
}
.users-toolbar__input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    background: #fff;
}
.users-toolbar__input:focus {
    outline: none;
    border-color: var(--primary-500, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.users-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.users-toolbar__select {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 0.9rem;
}
.users-toolbar__status {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-sm);
    padding: 0.15rem;
    gap: 0.15rem;
}
.status-chip {
    border: 0;
    background: transparent;
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
    border-radius: calc(var(--radius-sm) - 2px);
    cursor: pointer;
    color: var(--text-muted, #6b7280);
    transition: background 0.15s, color 0.15s;
}
.status-chip:hover { color: var(--text-strong, #111827); }
.status-chip.is-active {
    background: var(--primary-500, #2563eb);
    color: #fff;
    font-weight: 600;
}

.users-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted, #6b7280);
    font-style: italic;
}

/* Compteur global à côté du titre */
.users-count-pill {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--primary-50, #eff6ff);
    color: var(--primary-700, #1d4ed8);
    font-size: 0.78rem;
    font-weight: 600;
    vertical-align: middle;
}

/* Accordéons par agence */
#users-groups { display: block; }
.users-group {
    border-top: 1px solid var(--border-color, #e5e7eb);
}
.users-group:first-child { border-top: 0; }
.users-group[hidden] { display: none; }
.users-group__summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    color: var(--text-strong, #111827);
    list-style: none;
    background: #fff;
    transition: background 0.12s;
}
.users-group__summary::-webkit-details-marker { display: none; }
.users-group__summary::before {
    content: '▸';
    font-size: 0.85rem;
    color: var(--text-muted, #6b7280);
    transition: transform 0.15s;
    display: inline-block;
}
.users-group[open] > .users-group__summary::before {
    transform: rotate(90deg);
}
.users-group__summary:hover {
    background: var(--surface-soft, #f9fafb);
}
.users-group__title { flex: 1 1 auto; }
.users-group__count {
    background: var(--surface-muted, #f3f4f6);
    color: var(--text-muted, #6b7280);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.users-group__table {
    margin: 0;
}

/* Pill rouge pour mettre en évidence les comptes admin dans la liste */
.role-admin-pill {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    background: var(--error-50, #fef2f2);
    color: var(--error-700, #b91c1c);
    border: 1px solid var(--error-200, #fecaca);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Row utilisateur cachée par les filtres */
.user-row[hidden] { display: none; }

/* ──────────────────────────────────────────────────────────────
   Section "Utilisateurs orphelins" — page admin/equipes.php
   ────────────────────────────────────────────────────────────── */
.card--orphans {
    border: 1px solid var(--warning-300, #fbbf24);
    background: var(--warning-50, #fffbeb);
}
.card-header--warning {
    background: var(--warning-100, #fef3c7) !important;
    border-bottom: 1px solid var(--warning-300, #fbbf24) !important;
}
.card-header--warning h3 {
    color: var(--warning-800, #92400e);
    margin: 0;
}
.card--orphans .equipe-section-intro {
    padding: 0.75rem 1rem 0;
    margin: 0;
}
.orphans-list {
    padding: 0.5rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.orphan-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(200px, 1.6fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: #fff;
    border: 1px solid var(--warning-200, #fde68a);
    border-radius: var(--radius-sm);
}
.orphan-row__user { display: flex; flex-direction: column; gap: 0.1rem; }
.orphan-row__name { font-weight: 600; color: var(--text-strong, #111827); }
.orphan-row__role { font-size: 0.8rem; color: var(--text-muted, #6b7280); }
.orphan-row__select {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 0.9rem;
}
.orphan-row__nomgr {
    grid-column: 2 / span 2;
    font-size: 0.85rem;
    color: var(--error-700, #b91c1c);
    font-style: italic;
}
@media (max-width: 640px) {
    .orphan-row {
        grid-template-columns: 1fr;
    }
    .orphan-row__nomgr { grid-column: 1; }
}

/* ──────────────────────────────────────────────────────────────
   Admin Équipes — blocs d'affectation manager → membres.
   Remplace les inline styles dupliqués dans admin/equipes.php.
   ────────────────────────────────────────────────────────────── */
.equipe-filter-row {
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.equipe-section-intro {
    padding: 0 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
}

.equipe-block {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin: 0 1rem 1rem;
    background: var(--surface-elevated, #fff);
}

.equipe-block-title {
    margin: 0 0 0.5rem 0;
}
.equipe-block-title .equipe-block-role {
    font-weight: normal;
    color: var(--text-muted, #666);
}

.equipe-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.5rem;
}
.equipe-members-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.equipe-member-card {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm, 6px);
}
.equipe-member-card input[type="checkbox"] { margin-top: 0.2rem; }
.equipe-member-name { font-weight: 600; }
.equipe-member-role {
    color: var(--text-muted, #666);
    font-size: 0.88rem;
    display: block;
}
.equipe-member-subcount {
    color: var(--info-500, #3b82f6);
    font-size: 0.8rem;
}

.equipe-member-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.equipe-save-btn { margin-top: 1rem; }

/* ==========================================================
   STATUS BADGES (centralisation des indicateurs de statut)
   Remplace les <span style="background:#fff3cd;color:#856404;..."> inline
   qui traînaient dans saisie.php, validations.php, etc.
   ========================================================== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}
.status-badge--pending {
    background: var(--warning-50);
    color: var(--warning-700);
    border-color: var(--warning-100);
}
.status-badge--validated {
    background: var(--success-50);
    color: var(--success-700);
    border-color: var(--success-100);
}
.status-badge--refused {
    background: var(--error-50);
    color: var(--error-700);
    border-color: var(--error-100);
}
.status-badge--neutral {
    background: var(--neutral-100);
    color: var(--neutral-700);
    border-color: var(--neutral-200);
}

/* ==========================================================
   WIZARD DE SAISIE — Améliorations B.1
   Barre de progression, boutons dynamiques, et sortie des
   inline styles des composants oui_non / rdv_prospects /
   prospection_split.
   ========================================================== */

/* Barre de progression visuelle (remplace le texte "3 / 8") */
.wizard-progress-bar {
    height: 6px;
    background: var(--surface-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-2);
}
.wizard-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
    border-radius: var(--radius-full);
    transition: width var(--duration-medium) var(--ease-out);
}
.wizard-progress-text {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-align: right;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

/* Bouton "Enregistrer" (dernière étape) : visuel plus engageant */
.modal-btn-next.wizard-btn-final {
    background: var(--success-600);
    border-color: var(--success-700);
}
.modal-btn-next.wizard-btn-final:hover {
    background: var(--success-700);
}

/* ==========================================================
   ADMIN SAISIE (C.5) — Tableau d'admin + modal d'édition.
   Remplace les inline styles d'includes/admin_saisie_ui.php et
   includes/admin_saisie_modal.php.
   ========================================================== */

/* Header du bloc admin saisie */
.admin-saisie-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.admin-saisie-section-title {
    margin: var(--space-4) 0 var(--space-2);
    padding: 0 var(--space-1);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
}
.admin-saisie-section-title--spaced {
    margin-top: var(--space-6);
}
.text-center { text-align: center; }

/* Modal admin saisie */
.admin-saisie-modal {
    max-width: min(100vw - 2rem, 700px);
}
.admin-saisie-modal-body {
    overflow-y: auto;
    max-height: 85vh;
}
.admin-saisie-title {
    margin-top: 0;
}

/* Champs (label + input) */
.admin-saisie-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.admin-saisie-field--block {
    margin-bottom: var(--space-4);
}
.admin-saisie-field label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.admin-saisie-field input,
.admin-saisie-field select {
    width: 100%;
}

.admin-saisie-subgroup {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding-left: var(--space-3);
    border-left: 3px solid var(--brand-200);
}
.admin-saisie-subgroup label {
    min-width: auto;
    margin-right: 0;
}
.admin-saisie-subgroup input {
    width: 4rem !important;
    text-align: center;
}

/* Grilles de champs */
.admin-saisie-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.admin-saisie-form-grid--multi {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

/* Bloc heures de prospection */
.admin-saisie-h-block {
    margin-top: var(--space-3);
}
.admin-saisie-h-label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
    display: block;
    margin-bottom: var(--space-2);
}
.admin-saisie-h-table {
    border-collapse: collapse;
    width: auto;
}
.admin-saisie-h-table thead th {
    text-align: center;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
}
.admin-saisie-h-table thead th:first-child {
    text-align: left;
    padding-left: 0;
}
.admin-saisie-h-table tbody td {
    padding: var(--space-1) var(--space-2);
}
.admin-saisie-h-table tbody td:first-child {
    padding-left: 0;
    padding-right: var(--space-3);
}
.admin-saisie-h-input {
    width: 4.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Wrap RDV (prospects) — affiché dynamiquement via .style.display par le JS */
.admin-saisie-rdv-wrap {
    margin-top: var(--space-3);
}
.admin-rdv-row {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    align-items: flex-end;
    flex-wrap: wrap;
}
.admin-rdv-index {
    opacity: 0.75;
    min-width: 1rem;
    color: var(--text-secondary);
}
.admin-rdv-row input.admin-rdv-p,
.admin-rdv-row input.admin-rdv-n {
    flex: 1;
    min-width: 100px;
}

/* Footer d'actions */
.admin-saisie-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
    justify-content: flex-end;
}

/* ==========================================================
   ADMIN SAISIE — Mobile (≤640px)
   Plein écran "feuille modale" comme le wizard ; une seule
   colonne pour les grilles ; tableau heures en cards ;
   actions footer empilées et full-width.
   ========================================================== */
@media (max-width: 640px) {
    /* Plein écran edge-to-edge (l'overlay global est patché en style.css) */
    .admin-saisie-modal {
        max-width: 100%;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }
    .admin-saisie-modal-body {
        max-height: none;
        flex: 1;
        overflow-y: auto;
        padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
    }
    .admin-saisie-title {
        padding-top: max(0, env(safe-area-inset-top));
    }

    /* Grilles → 1 colonne, plus aéré */
    .admin-saisie-form-grid,
    .admin-saisie-form-grid--multi {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    .admin-saisie-field input,
    .admin-saisie-field select {
        font-size: 16px;
        padding: 0.65rem 0.75rem;
        min-height: 44px;
    }
    .admin-saisie-field label { font-size: 0.9rem; }

    /* Tableau heures → cards verticales (même pattern que wizard-split) */
    .admin-saisie-h-table {
        display: block;
        width: 100%;
    }
    .admin-saisie-h-table thead { display: none; }
    .admin-saisie-h-table tbody { display: block; width: 100%; }
    .admin-saisie-h-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 0.6rem;
        row-gap: 0.4rem;
        align-items: end;
        background: var(--surface-subtle, #f8fafc);
        padding: 0.75rem 0.8rem;
        border: 1px solid var(--border, #e2e8f0);
        border-radius: 12px;
        margin-bottom: 0.5rem;
    }
    .admin-saisie-h-table tbody td {
        padding: 0;
        position: relative;
    }
    .admin-saisie-h-table tbody td:first-child {
        grid-column: 1 / -1;
        font-weight: 600;
        font-size: 0.9rem;
        padding: 0;
        color: var(--text-primary);
    }
    .admin-saisie-h-input {
        width: 100%;
        font-size: 16px;
        padding: 0.6rem 0.5rem;
        min-height: 44px;
    }

    /* Lignes RDV → empilage prénom puis nom, inputs full-width */
    .admin-rdv-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
        padding: 0.6rem 0.75rem;
        background: var(--surface-subtle, #f8fafc);
        border-radius: 10px;
        border: 1px solid var(--border, #e2e8f0);
    }
    .admin-rdv-row input.admin-rdv-p,
    .admin-rdv-row input.admin-rdv-n {
        flex: none;
        width: 100%;
        font-size: 16px;
        min-height: 42px;
    }

    /* Actions footer empilées full-width pour pouce confortable */
    .admin-saisie-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 0.6rem;
        margin-top: var(--space-4);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .admin-saisie-actions .btn,
    .admin-saisie-actions button {
        width: 100%;
        min-height: 48px;
    }
}

/* Widget compact "raccourci validations" — utilisé sur rapports-rc.php (DC) */
.validation-shortcut-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--brand-500);
    background: var(--surface-elevated);
}
.validation-shortcut-card--empty {
    border-left-color: var(--success-500);
}
.validation-shortcut-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-50);
    color: var(--brand-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.validation-shortcut-card--empty .validation-shortcut-icon {
    background: var(--success-50);
    color: var(--success-600);
}
.validation-shortcut-body {
    flex: 1;
    min-width: 0;
}
.validation-shortcut-title {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}
.validation-shortcut-desc {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Étape récap finale (B.3) — tableau "label · valeur · Modifier" */
.wizard-recap-intro {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.wizard-recap-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-elevated);
}
.wizard-recap-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 2fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--duration-medium) var(--ease-out);
}
.wizard-recap-row:last-child {
    border-bottom: none;
}
.wizard-recap-row:hover {
    background: var(--surface-subtle);
}
.wizard-recap-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}
.wizard-recap-value {
    font-size: var(--text-base);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}
.wizard-recap-value strong {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}
.recap-empty {
    color: var(--text-tertiary);
    font-style: italic;
    font-size: var(--text-sm);
}
.wizard-recap-edit {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-medium) var(--ease-out);
    white-space: nowrap;
}
.wizard-recap-edit:hover {
    background: var(--brand-50);
    border-color: var(--brand-500);
    color: var(--brand-700);
}
@media (max-width: 600px) {
    .wizard-recap-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "label edit" "value value";
        row-gap: var(--space-1);
    }
    .wizard-recap-label { grid-area: label; }
    .wizard-recap-edit  { grid-area: edit; }
    .wizard-recap-value { grid-area: value; }
}

/* Écran de succès final (B.4) — propose Fermer ou Saisir un autre jour */
.wizard-success-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-3) 0 var(--space-2);
    animation: wizardSuccessIn var(--duration-medium) var(--ease-out);
}
.wizard-success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--success-50);
    color: var(--success-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
}
.wizard-success-msg {
    margin: 0 0 var(--space-5);
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: 1.5;
}
.wizard-success-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
}
@keyframes wizardSuccessIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Indicateur "Brouillon sauvegardé" — fade in/out lors de l'autosave */
.wizard-saved-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0 auto 0 var(--space-2);
    font-size: var(--text-xs);
    color: var(--success-600);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--duration-medium) var(--ease-out),
                transform var(--duration-medium) var(--ease-out);
    pointer-events: none;
}
.wizard-saved-indicator.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.wizard-saved-indicator svg {
    flex-shrink: 0;
}

/* Étape oui_non */
.wizard-oui-non {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    justify-content: flex-start;
}

/* Étape rdv_prospects (liste des prospects rencontrés) */
.rdv-prospect-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
    align-items: flex-end;
}

/* Chips de suggestion (prénoms/noms récemment saisis) — meilleur UX
   mobile/iOS que `<datalist>` natif qui est souvent masqué par le clavier.
   Au tap : remplit l'input et donne le focus pour valider d'un Entrée. */
.rdv-suggest-chips {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}
.rdv-suggest-chip {
    appearance: none;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--neutral-50, #f8fafc);
    color: var(--text-secondary, #475569);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rdv-suggest-chip:hover {
    background: var(--neutral-100, #f1f5f9);
    border-color: var(--primary, #2563eb);
    color: var(--primary, #2563eb);
}
.rdv-suggest-chip:active {
    transform: scale(0.96);
}
@media (max-width: 640px) {
    .rdv-suggest-chip {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
        min-height: 32px;
    }
}

/* Chips de date rapide (Aujourd'hui / Hier / Avant-hier) sur l'étape
   "Pour quelle date ?" du wizard. Affichées au-dessus de l'input date. */
.wizard-date-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.85rem 0;
}
.wizard-date-chip {
    appearance: none;
    border: 1.5px solid var(--border, #e2e8f0);
    background: #fff;
    color: var(--text-secondary, #475569);
    border-radius: 999px;
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease,
                color 0.12s ease, transform 0.08s ease;
    min-height: 40px;
    -webkit-tap-highlight-color: transparent;
}
.wizard-date-chip:hover {
    border-color: var(--primary, #2563eb);
    color: var(--primary, #2563eb);
}
.wizard-date-chip:active {
    transform: scale(0.97);
}
.wizard-date-chip.is-active {
    background: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
    color: #fff;
}
@media (max-width: 640px) {
    .wizard-date-chips {
        gap: 0.45rem;
        margin-bottom: 0.75rem;
    }
    .wizard-date-chip {
        flex: 1 1 30%;
        min-height: 44px;
        padding: 0.6rem 0.7rem;
        font-size: 0.95rem;
        text-align: center;
    }
}

.rdv-prospect-index {
    min-width: 1.5rem;
    opacity: 0.75;
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}
.rdv-prospect-field {
    margin: 0;
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.rdv-prospect-field label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

/* Étape prospection_split (tableau heures terrain / phoning / RDV) */
.wizard-split-table {
    border-collapse: collapse;
    width: 100%;
    margin-top: var(--space-1);
}
.wizard-split-table thead th {
    text-align: center;
    padding: var(--space-2) var(--space-2);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--border-subtle);
}
.wizard-split-table thead th:first-child {
    text-align: left;
    padding-left: 0;
}
.wizard-split-label {
    padding: var(--space-2) var(--space-3) var(--space-2) 0;
    font-size: var(--text-base);
    color: var(--text-primary);
}
.wizard-split-cell {
    padding: var(--space-2);
    text-align: center;
}
.wizard-split-input {
    width: 4.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.wizard-split-hint {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.wizard-split-rdv-realises {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}
.wizard-split-rdv-realises .wizard-split-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-3);
}
.wizard-split-rdv-realises .wizard-split-row label {
    font-weight: 600;
    font-size: var(--text-base);
    white-space: nowrap;
}
.wizard-split-rdv-realises .wizard-split-row label small {
    font-weight: 400;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}
.wizard-split-rdv-realises .wizard-split-input {
    width: 5rem;
    text-align: center;
    font-size: var(--text-lg);
    padding: var(--space-2) var(--space-3);
}
.wizard-split-total {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-1);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-light, #eee);
}

/* ──────────────────────────────────────────────────────────────────────
   PARTAGES — Bouton ghost « 🤝 Partagé avec un collègue » inline
   sous chaque métrique partageable du wizard (RDV pris/réalisés, devis,
   BC, CA). Au clic : expansion d'un mini-formulaire (quantité + collègue).
   Bandeau « déjà attribué » côté B et card historique partages reçus.

   Approche mobile-first : tap targets ≥ 44px, single column < 600px,
   transitions raccourcies si prefers-reduced-motion.
   ────────────────────────────────────────────────────────────────────── */

.partage-inline-wrap {
    margin-top: var(--space-3);
}
.partage-inline {
    display: block;
}

/* Bouton ghost : sobre au repos, accentué au survol/focus. */
.partage-ghost {
    --pg-color: var(--brand-600, #2563eb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: auto;
    min-height: 44px; /* tap target Apple HIG / Material */
    padding: 0.55rem 1rem;
    border: 1px dashed var(--border-color, #d1d5db);
    border-radius: var(--radius-md, 8px);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(37, 99, 235, 0.1);
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}
.partage-ghost:hover,
.partage-ghost:focus-visible {
    color: var(--pg-color);
    border-color: var(--pg-color);
    background: var(--brand-50, #eff5ff);
    outline: none;
    transform: translateY(-1px);
}
.partage-ghost:active {
    transform: translateY(0);
    background: var(--brand-100, #dbeafe);
}
.partage-ghost__icon {
    flex-shrink: 0;
}

/* Mobile : full-width pour confort de tap, sans casser le style ghost. */
@media (max-width: 600px) {
    .partage-ghost {
        width: 100%;
        padding: 0.7rem 1rem;
    }
}

/* Bloc expansé : remplace le bouton ghost une fois cliqué. */
.partage-inline-block {
    border: 1px solid var(--brand-300, #99bdff);
    background: var(--brand-50, #eff5ff);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-3);
    animation: partage-fade-in 180ms ease-out;
}
@keyframes partage-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .partage-inline-block { animation: none; }
    .partage-ghost { transition: none; }
}
.partage-inline-block__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--brand-700, #1d4ed8);
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}
.partage-inline-block__title {
    flex: 1;
    min-width: 0;
}
.partage-inline-close {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-size: 1.4rem;
    line-height: 1;
    width: 36px; /* tap target confortable */
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
    transition:
        background-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
}
.partage-inline-close:hover,
.partage-inline-close:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
    outline: none;
}
.partage-inline-block__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    align-items: end;
    gap: var(--space-3);
}
/* Lignes supplémentaires : séparateur léger entre collègues. */
.partage-inline-block__fields + .partage-inline-block__fields {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--brand-300, #99bdff);
}
/* Mobile : single column, inputs full-width. */
@media (max-width: 600px) {
    .partage-inline-block__fields {
        grid-template-columns: 1fr auto;
        gap: var(--space-2);
    }
    .partage-field:first-child {
        grid-column: 1 / -1;
    }
}
/* Bouton « retirer ce collègue » (×) sur chaque ligne. */
.partage-row-remove {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-size: 1.4rem;
    line-height: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
    transition:
        background-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
}
.partage-row-remove:hover,
.partage-row-remove:focus-visible {
    background: rgba(211, 47, 47, 0.1);
    color: #d32f2f;
    outline: none;
}
/* Bouton « + Ajouter un collègue ». */
.partage-row-add {
    margin-top: var(--space-3);
    background: transparent;
    border: 1px dashed var(--brand-400, #5b8def);
    color: var(--brand-700, #1d4ed8);
    font-weight: 600;
    font-size: var(--text-sm);
    border-radius: var(--radius-md, 8px);
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    width: 100%;
    min-height: 44px;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
}
.partage-row-add:hover,
.partage-row-add:focus-visible {
    background: var(--brand-100, #dbe7ff);
    border-color: var(--brand-500, #3b6fe0);
    outline: none;
}
.partage-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.partage-field label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.partage-field .partage-qty,
.partage-field .partage-target {
    width: 100%;
    min-height: 44px; /* tap target mobile */
}
.partage-field .partage-qty.error,
.partage-field .partage-target.error {
    border-color: #d32f2f;
    box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.15);
}
.partage-inline-error {
    color: #d32f2f;
    font-size: var(--text-sm);
    margin: var(--space-2) 0 0;
    line-height: 1.4;
}

/* Mention « 🤝 dont X partagé avec Y » dans le récap. */
.wizard-recap-partage {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-md, 8px);
    background: var(--brand-50, #eff5ff);
    color: var(--brand-700, #1d4ed8);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.45;
    white-space: normal;
    max-width: 100%;
}
.wizard-recap-partage svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.wizard-recap-partage__lines {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.wizard-recap-partage__line {
    display: block;
    overflow-wrap: anywhere;
}

/* Bandeau « partagé par X » dans le modal du wizard côté B. */
.wizard-partages-banner {
    background: linear-gradient(90deg, #fff7e6 0%, #fffbf0 100%);
    border: 1px solid #f0c87a;
    border-radius: var(--radius-md, 8px);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    color: #6b3e00;
    font-size: var(--text-sm);
    line-height: 1.5;
}
.wizard-partages-banner__title {
    font-weight: 700;
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.wizard-partages-banner__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.wizard-partages-banner__list li {
    line-height: 1.5;
    word-break: break-word;
}
.wizard-partages-banner__list li strong {
    color: #4a2900;
    margin-right: 0.15rem;
}
@media (max-width: 600px) {
    .wizard-partages-banner {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }
    .wizard-partages-banner__title {
        font-size: var(--text-sm);
    }
}

/* Card partages reçus dans saisie.php */
.card-partages-recus {
    border-left: 4px solid #f0c87a;
}
.card-partages-recus .card-subtitle {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}
.card-partages-recus .card-header h2 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.row-partage-recu {
    background: linear-gradient(90deg, #fafbfc 0%, transparent 100%);
    color: var(--text-secondary);
}
.row-partage-recu td:first-child {
    font-weight: 600;
}
.row-partage-recu td:nth-child(3) strong {
    color: var(--text-primary);
}

/* Lien inline standard (utilisé dans le texte courant) */
.text-link {
    color: var(--text-link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.text-link:hover {
    color: var(--brand-700);
    border-bottom-color: var(--brand-300);
}

/* ==========================================================
   UI TOASTS (window.UI.toast)
   ========================================================== */
.ui-toast-container {
    position: fixed;
    /* `env(safe-area-inset-top)` : évite que les toasts soient masqués par
       l'encoche / la Dynamic Island sur iPhone récent. Sur Android et
       desktop, `env()` vaut 0 → comportement identique. */
    top: calc(var(--space-4) + env(safe-area-inset-top));
    right: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
    max-width: min(420px, calc(100vw - 2rem));
}
.ui-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2-5);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--neutral-400);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    transform: translateX(120%);
    opacity: 0;
    transition: transform var(--duration-medium) var(--ease-out),
                opacity var(--duration-medium) var(--ease-out);
}
.ui-toast.is-visible {
    transform: translateX(0);
    opacity: 1;
}
.ui-toast__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--neutral-500);
}
.ui-toast__msg {
    flex: 1 1 auto;
    word-break: break-word;
    padding-top: 1px;
}
.ui-toast__close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--neutral-500);
    padding: 2px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.ui-toast__close:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}
.ui-toast--success {
    border-left-color: var(--success-500);
}
.ui-toast--success .ui-toast__icon { color: var(--success-600); }
.ui-toast--error {
    border-left-color: var(--error-500);
}
.ui-toast--error .ui-toast__icon { color: var(--error-600); }
.ui-toast--warning {
    border-left-color: var(--warning-500);
}
.ui-toast--warning .ui-toast__icon { color: var(--warning-600); }
.ui-toast--info {
    border-left-color: var(--info-500);
}
.ui-toast--info .ui-toast__icon { color: var(--info-600); }

/* Toast cliquable (ex. "Nouvelle version disponible — cliquez pour MAJ") */
.ui-toast--clickable {
    cursor: pointer;
    transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}
.ui-toast--clickable:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-xl);
}

/* ==========================================================
   FAB « + Saisir » — bouton flottant mobile/tablette portrait
   Visible uniquement ≤1023px, en bas à droite, persistant entre
   les pages. Click → saisie.php?openWizard=1.
   ========================================================== */
.cali-fab {
    position: fixed;
    z-index: 350; /* au-dessus de la topbar (250), sous overlay sidebar (300)
                     car le drawer ouvert doit le couvrir */
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    right: calc(1.25rem + env(safe-area-inset-right));
    display: inline-flex; /* visible sur tous les écrans */
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500, #2563eb), var(--brand-700, #1e40af));
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35), 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.12s var(--ease-out, ease),
                box-shadow 0.18s var(--ease-out, ease),
                background-color 0.15s var(--ease-out, ease);
    -webkit-tap-highlight-color: transparent;
}
.cali-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.42), 0 3px 8px rgba(0, 0, 0, 0.12);
    color: #fff;
}
.cali-fab:active {
    transform: translateY(0) scale(0.97);
}
.cali-fab:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
}
.cali-fab__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}
.cali-fab__icon svg { width: 24px; height: 24px; }

/* Quand la sidebar mobile est ouverte, on masque le FAB pour ne pas
   gêner la navigation au-dessus du drawer. */
body.sidebar-open .cali-fab {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.85) translateY(8px);
    transition: opacity 0.15s, transform 0.18s;
}

/* En desktop (≥1024px), on tient compte du sidebar à gauche : le FAB reste
   à droite mais on évite qu'il chevauche le contenu utile. */
@media (min-width: 1024px) {
    .cali-fab {
        bottom: 1.75rem;
        right: 1.75rem;
    }
}

/* ==========================================================
   Empty states unifiés
   Composant réutilisable : illustration SVG + titre + description
   + (optionnel) bouton d'action. Trois "tones" : neutral, success, info.
   ========================================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--text-secondary, #475569);
}
.empty-state__illu {
    width: 96px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neutral-50, #f8fafc), var(--neutral-100, #f1f5f9));
    border: 1px solid var(--border-subtle, #e2e8f0);
    color: var(--text-secondary, #64748b);
    margin-bottom: 0.25rem;
}
.empty-state__illu svg {
    width: 44px;
    height: 44px;
}
.empty-state--success .empty-state__illu {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-color: #a7f3d0;
    color: var(--success-700, #15803d);
}
.empty-state--info .empty-state__illu {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-color: #bfdbfe;
    color: var(--primary, #2563eb);
}
.empty-state--warning .empty-state__illu {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-color: #fde68a;
    color: #b45309;
}
.empty-state__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 0;
    line-height: 1.25;
}
.empty-state__desc {
    font-size: 0.92rem;
    color: var(--text-secondary, #64748b);
    max-width: 420px;
    margin: 0;
    line-height: 1.5;
}
.empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.25rem;
}
.empty-state .btn {
    min-height: 40px;
}
/* Variante compacte (placée dans une card existante) */
.empty-state--compact {
    padding: 1.5rem 1rem;
    gap: 0.6rem;
}
.empty-state--compact .empty-state__illu {
    width: 64px;
    height: 64px;
}
.empty-state--compact .empty-state__illu svg {
    width: 30px;
    height: 30px;
}
.empty-state--compact .empty-state__title {
    font-size: 0.98rem;
}
.empty-state--compact .empty-state__desc {
    font-size: 0.88rem;
}
@media (max-width: 640px) {
    .empty-state {
        padding: 2rem 0.9rem;
    }
    .empty-state__illu {
        width: 84px;
        height: 84px;
    }
    .empty-state__illu svg {
        width: 38px;
        height: 38px;
    }
    .empty-state__actions {
        width: 100%;
        flex-direction: column;
    }
    .empty-state__actions .btn {
        width: 100%;
    }
}

/* ==========================================================
   Pull-to-refresh indicator (mobile dashboard)
   Géré par assets/js/pull-refresh.js. Visible uniquement quand
   on tire la page vers le bas en haut du scroll.
   ========================================================== */
.pull-refresh-indicator {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(-60px);
    z-index: 400;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 1rem;
    background: rgba(255, 255, 255, 0.96);
    color: var(--text-primary, #0f172a);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.08);
    border: 1px solid var(--border, #e2e8f0);
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    will-change: transform, opacity;
}
.pull-refresh-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #2563eb);
    transition: transform 0.18s ease;
}
.pull-refresh-indicator.is-ready .pull-refresh-spinner {
    transform: rotate(180deg);
    color: var(--success-600, #16a34a);
}
.pull-refresh-indicator.is-refreshing .pull-refresh-spinner svg {
    animation: pull-refresh-spin 0.7s linear infinite;
}
@keyframes pull-refresh-spin {
    to { transform: rotate(360deg); }
}
.pull-refresh-label {
    line-height: 1;
    color: var(--text-secondary, #475569);
}
.pull-refresh-indicator.is-ready .pull-refresh-label {
    color: var(--success-700, #15803d);
}

@media (max-width: 480px) {
    .ui-toast-container {
        /* Sur petit écran on étire la zone entre les bords + safe-area ;
           la topbar mobile occupe le haut, donc on positionne les toasts
           juste en dessous pour éviter le chevauchement. */
        top: calc(56px + env(safe-area-inset-top) + var(--space-2));
        right: var(--space-3);
        left: var(--space-3);
        max-width: none;
    }
}

/* ==========================================================
   UI CONFIRM DIALOG (window.UI.confirm)
   ========================================================== */
.ui-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    transition: opacity var(--duration-medium) var(--ease-out);
}
.ui-confirm-overlay.is-visible { opacity: 1; }
.ui-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
}
.ui-confirm-dialog {
    position: relative;
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-6);
    width: 100%;
    max-width: 440px;
    transform: scale(0.96) translateY(8px);
    transition: transform var(--duration-medium) var(--ease-out);
}
.ui-confirm-overlay.is-visible .ui-confirm-dialog {
    transform: scale(1) translateY(0);
}
.ui-confirm-title {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.ui-confirm-message {
    margin: 0 0 var(--space-5) 0;
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}
.ui-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}
body.ui-confirm-active { overflow: hidden; }

/* ==========================================================
   WIDGET « MON RAPPORT MENSUEL AU DC » (dashboard, RC/RP)
   ========================================================== */
.rapport-mensuel-widget {
    background: linear-gradient(135deg, var(--brand-50) 0%, var(--surface-elevated) 100%);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
}
.rapport-mensuel-widget__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.rapport-mensuel-widget__title {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.rapport-mensuel-widget__subtitle {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-snug);
    max-width: 60ch;
}
.rapport-mensuel-widget__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.rapport-mensuel-widget__period {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.rapport-mensuel-widget__period select {
    padding: var(--space-1-5) var(--space-2-5);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
}
.rapport-mensuel-widget__period select:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: var(--ring-brand);
}
.rapport-mensuel-widget__buttons {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .rapport-mensuel-widget__head,
    .rapport-mensuel-widget__actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================
   TABLETTE PORTRAIT (768–1023px)
   Sidebar compacte 64px d'icônes permanente — comme Linear/Notion.
   On override le mode mobile (max-width: 1023.98px) qui était basé
   sur un drawer off-canvas avec burger.
   ========================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
    /* On masque tout ce qui appartient au mode mobile drawer */
    .mobile-topbar { display: none !important; }
    .nav-burger    { display: none !important; }
    body.sidebar-open::before {
        display: none !important;
    }

    /* Sidebar : 64px, fixed, toujours visible, pas de transform.
       overflow:visible obligatoire pour ne pas clipper les flyouts qui
       sortent à droite. Le scroll vertical éventuel est délégué à
       .nav-primary (avec une astuce pour ne pas couper les flyouts). */
    .sticky-top {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 64px !important;
        max-width: none !important;
        height: 100vh !important;
        background: var(--surface-elevated) !important;
        border-right: 1px solid var(--border-subtle) !important;
        box-shadow: var(--shadow-xs) !important;
        z-index: var(--z-sticky) !important;
        display: flex !important;
        flex-direction: column !important;
        padding: calc(var(--space-3) + env(safe-area-inset-top)) 0 calc(var(--space-3) + env(safe-area-inset-bottom)) !important;
        gap: var(--space-2) !important;
        overflow: visible !important;
        transform: none !important;
        transition: width 0.18s var(--ease-out) !important;
    }

    /* Quand body.sidebar-open est posé par le JS du burger (ne devrait pas
       arriver puisque le burger est caché, mais on neutralise par sécurité). */
    body.sidebar-open .sticky-top {
        transform: none !important;
    }

    /* Header : on libère les enfants comme en desktop */
    .app-header { display: contents !important; }

    /* Brand : juste le logo, centré, pas de h1 */
    .app-header .brand {
        order: 1 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 0 var(--space-3) 0 !important;
        gap: 0 !important;
    }
    .app-header .brand img {
        height: 28px !important;
        width: auto !important;
        filter: none !important;
    }
    .app-header .brand h1 {
        position: absolute !important;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }

    /* Nav principale : occupe la place restante. overflow:visible (et NON
       auto) car les flyouts doivent pouvoir sortir à droite. Avec un nombre
       d'items raisonnable (7-8) sur une hauteur de tablette ≥768px, pas
       besoin de scroll. */
    .nav-primary {
        order: 2 !important;
        flex: 1 !important;
        background: transparent !important;
        border: 0 !important;
        padding: 0 6px !important;
        width: 100% !important;
        overflow: visible !important;
        min-height: 0 !important;
    }

    .nav-tabs {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 2px !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Items principaux : icônes seules, centrées */
    .nav-tabs > a,
    .nav-dropdown-toggle {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        gap: 0 !important;
        min-height: 44px !important;
        border-radius: 10px !important;
    }
    .nav-tabs > a .nav-icon,
    .nav-dropdown-toggle .nav-icon {
        flex-shrink: 0;
    }
    .nav-tabs > a .nav-icon svg,
    .nav-dropdown-toggle .nav-icon svg {
        width: 22px !important;
        height: 22px !important;
    }
    .nav-tabs > a .nav-label,
    .nav-dropdown-toggle > .nav-label,
    .nav-dropdown-toggle .nav-caret {
        display: none !important;
    }

    /* Badge en petit cercle dans le coin */
    .nav-tabs > a .nav-badge,
    .nav-dropdown-toggle .nav-badge {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        margin: 0 !important;
        min-width: 16px !important;
        height: 16px !important;
        padding: 0 4px !important;
        font-size: 10px !important;
        line-height: 16px !important;
        box-shadow: 0 0 0 2px var(--surface-elevated, #fff);
    }

    /* Dropdown : son menu devient un FLYOUT à droite, ouvert au clic */
    .nav-dropdown { position: relative !important; }
    .nav-dropdown .nav-dropdown-menu {
        display: none !important;
        position: absolute !important;
        left: calc(100% + 6px) !important;
        top: 0 !important;
        width: 220px !important;
        max-width: 220px !important;
        background: var(--surface-elevated, #fff) !important;
        border: 1px solid var(--border, #e2e8f0) !important;
        border-radius: var(--radius-md, 10px) !important;
        box-shadow: var(--shadow-lg) !important;
        padding: var(--space-2) !important;
        z-index: 60 !important;
        margin: 0 !important;
        flex-direction: column !important;
        gap: 2px !important;
    }
    .nav-dropdown.open .nav-dropdown-menu {
        display: flex !important;
    }
    .nav-dropdown.open .nav-dropdown-menu a {
        padding: 8px 10px !important;
        font-size: var(--text-sm) !important;
        border-radius: 8px !important;
    }
    /* La flèche caret est cachée en mode compact */
    .nav-dropdown .nav-caret { display: none !important; }

    /* En tablette portrait on cache l'instance mobile (.sidebar-user-menu)
       et on RÉ-affiche l'instance originale (cachée en mobile pur) qu'on
       compacte ensuite à 64px (icône uniquement). */
    .sidebar-user-menu {
        display: none !important;
    }

    /* User menu : compact en bas, icône seule */
    .app-header .user-menu {
        display: flex !important;
        order: 3 !important;
        margin: 0 !important;
        padding: var(--space-2) 6px !important;
        border-top: 1px solid var(--border-subtle) !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }
    .app-header .user-menu .user-info {
        display: none !important;
    }
    .app-header .user-menu .btn,
    .app-header .user-menu a,
    .app-header .user-menu button {
        justify-content: center !important;
        padding: 10px !important;
        gap: 0 !important;
        min-height: 44px !important;
    }
    .app-header .user-menu .btn .nav-label,
    .app-header .user-menu a .nav-label,
    .app-header .user-menu button .nav-label,
    .app-header .user-menu .btn span:not(.nav-icon),
    .app-header .user-menu a span:not(.nav-icon) {
        display: none !important;
    }

    /* Décale le contenu pour libérer la place de la sidebar */
    .main-content {
        margin-left: 64px !important;
        max-width: none !important;
        padding-top: var(--space-4) !important;
        padding-left: var(--space-5) !important;
        padding-right: var(--space-5) !important;
    }
    .consultation-banner {
        margin-left: 64px !important;
        position: relative !important;
        top: 0 !important;
    }

    /* Le FAB reste affiché en tablette, mais on le décale pour ne pas qu'il
       chevauche la sidebar à gauche (il est à droite, donc pas de souci).
       En revanche on harmonise sa taille. */
    .cali-fab {
        bottom: 1.5rem;
        right: 1.5rem;
    }

    /* Pull-to-refresh désactivé en tablette portrait (peu pertinent avec
       sidebar fixe + écran plus grand, c'est un geste mobile pur). */
    .pull-refresh-indicator { display: none !important; }
}