/* =====================================================================
   Conciergerie — Apple Liquid-Glass / Bento Light Theme
   ---------------------------------------------------------------------
   Inspire de macOS Sequoia / iOS 18. Light glass : cards translucides
   blanches sur un fond degrade pastel, ombres douces, coins genereux,
   couleurs systeme Apple. Le sidebar est frosted-white.
===================================================================== */

:root {
    --chrome-dark:      #111a2e;    /* rail sombre fixe du theme Moderne (cockpit) */
    /* ===== Apple System Colors (iOS 18 / macOS Sequoia) ===== */
    --sys-blue:        #007AFF;
    --sys-blue-2:      #0A84FF;
    --sys-green:       #34C759;
    --sys-indigo:      #5856D6;
    --sys-orange:      #FF9500;
    --sys-pink:        #FF2D55;
    --sys-purple:      #AF52DE;
    --sys-red:         #FF3B30;
    --sys-teal:        #30B0C7;
    --sys-mint:        #00C7BE;
    --sys-yellow:      #FFCC00;
    --sys-cyan:        #5AC8FA;
    --sys-brown:       #A2845E;

    /* Couleurs alias semantiques (Liquid Glass / Frost - accent #0A84FF) */
    --accent:          #0A84FF;
    --accent-2:        #5856D6;
    --info:            var(--sys-cyan);
    --success:         var(--sys-green);
    --warn:            var(--sys-orange);
    --danger:          var(--sys-red);
    --magic:           var(--sys-purple);

    /* Tints d'arriere-plan ariens (wallpaper lumineux flou) */
    --tint-1:          rgba(176, 208, 240, 0.55);  /* bleu ciel */
    --tint-2:          rgba(225, 219, 245, 0.45);  /* lavande pastel */
    --tint-3:          rgba(238, 243, 251, 0.55);  /* blanc nacre */
    --tint-glow:       radial-gradient(60% 50% at 20% 10%, rgba(10,132,255,0.10), transparent 70%),
                       radial-gradient(50% 40% at 85% 0%, rgba(175,82,222,0.08), transparent 70%),
                       radial-gradient(45% 35% at 90% 90%, rgba(48,176,199,0.06), transparent 70%);

    /* ===== Apple System Grays (Light Mode) ===== */
    --gray-1:          #8E8E93;
    --gray-2:          #AEAEB2;
    --gray-3:          #C7C7CC;
    --gray-4:          #D1D1D6;
    --gray-5:          #E5E5EA;
    --gray-6:          #F2F2F7;

    /* ===== Text (Liquid Glass Frost) ===== */
    --text-strong:     #1f2532;     /* texte principal */
    --text-muted:      #4A5468;     /* secondaire */
    --text-faint:      #768094;     /* tertiaire / labels */
    --text-disabled:   #B1B8C5;     /* quaternaire */

    /* ===== Backgrounds (verre blanc laiteux translucide) ===== */
    --bg-app:          #F4F6FB;     /* fond derriere le wallpaper */
    --bg-sidebar:      rgba(255, 255, 255, 0.62);
    --bg-card:         rgba(255, 255, 255, 0.32);   /* materiau translucide (depoli fort par le blur) */
    --bg-card-hover:   rgba(255, 255, 255, 0.86);
    --bg-elevated:     rgba(255, 255, 255, 0.94);

    /* Backcompat avec ancien dark theme (au cas ou) */
    --bg-card-old:     var(--bg-card);
    --bg-sidebar-old:  var(--bg-sidebar);
    --border-soft:     rgba(40, 55, 95, 0.08);
    --border-strong:   rgba(40, 55, 95, 0.16);
    --accent-soft:     rgba(10, 132, 255, 0.12);
    --success-soft:    rgba(52, 199, 89, 0.14);
    --warn-soft:       rgba(255, 149, 0, 0.14);
    --danger-soft:     rgba(255, 59, 48, 0.14);
    --info-soft:       rgba(90, 200, 250, 0.18);
    --accent-grad:     linear-gradient(135deg, #0A84FF 0%, #5856D6 100%);
    --accent-grad-soft: linear-gradient(135deg, rgba(10,132,255,0.92) 0%, rgba(88,86,214,0.88) 100%);

    /* ===== Glass system (Liquid Glass / Frost - macOS Tahoe) ===== */
    --glass-bg-1:        rgba(255, 255, 255, 0.32);   /* cartes au repos : materiau translucide (depoli fort) */
    --glass-bg-2:        rgba(255, 255, 255, 0.86);   /* dropdowns / menus (pas le survol des cartes) */
    --glass-bg-active:   rgba(10, 132, 255, 0.10);
    --glass-border:      rgba(255, 255, 255, 0.96);   /* bordure claire spec */
    --glass-border-hi:   rgba(255, 255, 255, 1);
    /* Ombre douce bleutee, profondeur subtile */
    --glass-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 0 0.5px rgba(40, 55, 95, 0.06),
        0 14px 38px -16px rgba(40, 55, 95, 0.20);
    --glass-shadow-sm:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        0 0 0 0.5px rgba(40, 55, 95, 0.05),
        0 6px 18px -10px rgba(40, 55, 95, 0.16);
    --glass-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 0 0 0.5px rgba(40, 55, 95, 0.08),
        0 22px 54px -16px rgba(40, 55, 95, 0.26);
    /* PERF (2026-06-30) : rayons de flou fortement reduits (etaient 30/40/40px).
       Le backdrop-filter se recompose a chaque frame au scroll : un grand rayon sur
       la sidebar pleine hauteur + les cartes faisait chuter les FPS sur TOUTE l'appli.
       On garde un voile depoli (look glass conserve) mais ~3x moins couteux. Reversible. */
    --glass-blur:        blur(10px) saturate(180%);   /* depoli + vibrance facon Apple */
    --glass-blur-strong: blur(14px) saturate(190%);   /* materiau frosted prononce (cartes, sidebar) */
    --glass-blur-xl:     blur(14px) saturate(185%);
    --glass-radius:      22px;     /* spec : rayons 22px */
    --glass-radius-md:   16px;
    --glass-radius-sm:   12px;
    --glass-pad:         20px;     /* spec : padding 18-22px */

    /* Reflet speculaire haut-gauche (style "loupe" iOS 26 Liquid Glass) */
    --glass-specular: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0.15) 25%,
        rgba(255, 255, 255, 0) 55%,
        rgba(255, 255, 255, 0) 100%
    );
    /* Lueur basse (refraction faible) */
    --glass-refraction: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.18) 100%
    );

    /* Iridescent border (Apple-style 1px gradient ring) */
    --iridescent-grad: linear-gradient(
        135deg,
        rgba(0, 122, 255, 0.6) 0%,
        rgba(88, 86, 214, 0.5) 30%,
        rgba(175, 82, 222, 0.4) 55%,
        rgba(255, 45, 85, 0.5) 80%,
        rgba(255, 149, 0, 0.5) 100%
    );

    /* Bootstrap override */
    --bs-body-bg:         var(--bg-app);
    --bs-body-color:      var(--text-strong);
    --bs-border-color:    var(--glass-border);
    --bs-secondary-color: var(--text-muted);
    --bs-emphasis-color:  var(--text-strong);
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    background: var(--bg-app);
    color: var(--text-strong);
    font-family:
        -apple-system, BlinkMacSystemFont,
        'SF Pro Display', 'SF Pro Text',
        'Inter', 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* Wallpaper "lumineux flou" : couches pastel diffuses superposees */
body {
    display: flex;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background:
        var(--tint-glow),
        linear-gradient(180deg, var(--tint-1) 0%, transparent 55%),
        linear-gradient(0deg,   var(--tint-2) 0%, transparent 50%),
        radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,0.55), transparent 70%),
        var(--bg-app);
}
.sidebar, main.main { position: relative; z-index: 1; }

/* Typo */
h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-strong);
    margin-top: 0;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

p { line-height: 1.5; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--sys-blue-2); }

.mono {
    font-family: 'SF Mono', 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
    font-feature-settings: 'tnum' on, 'lnum' on;
}

.text-faint   { color: var(--text-faint) !important; }
.text-muted   { color: var(--text-muted) !important; }
.text-danger  { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warn,
.text-warning { color: var(--warn) !important; }
.text-info    { color: var(--info) !important; }
small.small, .small { font-size: 0.82rem; }

/* ===== Sidebar (light glass) ===== */
.sidebar {
    width: 248px;
    flex-shrink: 0;
    padding: 1.5rem 1rem;
    background: var(--bg-sidebar);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    border-right: 0.5px solid rgba(40, 55, 95, 0.06);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden; /* le scroll est delegue a .sidebar-scroll (marque + bas figes) */
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.6);
}
.sidebar.glass-nav { /* alias historique, conserve */ }

/* =====================================================================
   Sidebar flottante - HYBRIDE Liquid Glass macOS Tahoe (sobre + pro)
   A coller APRES la regle .sidebar existante (apres la ligne 213).
   - Marge 16px sur les 4 cotes (ile flottante 360deg)
   - Coins arrondis 20px (entre carte iOS et card macOS)
   - Sticky preservee : top:16px + height:calc(100vh - 32px)
   - border-right + box-shadow inset -1px historiques annules
   - Ombre bleutee 2 couches (teinte tint-1 du wallpaper)
   - Reflet speculaire top franc (inset 0.85) pour le "pop" Tahoe
   - saturate(200%) pour exalter le wallpaper derriere le glass
   - AUCUNE modif HTML, AUCUNE modif sur main.main (flex:1 absorbe)
   ===================================================================== */
.sidebar {
    /* Detachement visuel : marge isotrope sur les 4 cotes */
    margin: 16px;

    /* Sticky : top compense la margin pour eviter 32px de vide en scroll */
    top: 16px;
    height: calc(100vh - 32px);

    /* Coins arrondis partout (annule le border-right orphelin) */
    border-radius: 20px;

    /* Trait fin global iso 0.5px (remplace le border-right ligne 206) */
    border: 0.5px solid rgba(40, 55, 95, 0.08);
    border-right: 0.5px solid rgba(40, 55, 95, 0.08); /* override explicite */

    /* Verre Tahoe : saturate boostee pour exalter le wallpaper bleu (flou reduit, perf) */
    -webkit-backdrop-filter: blur(12px) saturate(190%);
    backdrop-filter: blur(12px) saturate(190%);

    /* Ombre bleutee + reflet speculaire top + hairline (annule l'inset -1px) */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),      /* reflet speculaire top (Tahoe) */
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.18),  /* hairline interne */
        0 0 0 0.5px rgba(40, 55, 95, 0.04),           /* contour externe ultra-fin */
        0 10px 30px -12px rgba(31, 64, 140, 0.18),    /* ombre proche */
        0 24px 60px -20px rgba(31, 64, 140, 0.22);    /* ombre profonde bleutee */
}

/* Responsive : sidebar 64px, marges resserrees pour rester proportionne */
@media (max-width: 992px) {
    .sidebar {
        margin: 12px;
        top: 12px;
        height: calc(100vh - 24px);
        border-radius: 16px;
    }
}

/* Mobile etroit : aligne sur la grille 640px du projet */
@media (max-width: 640px) {
    .sidebar {
        margin: 8px;
        top: 8px;
        height: calc(100vh - 16px);
        border-radius: 14px;
    }
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.65rem 1.1rem;
    color: var(--text-strong);
    font-weight: 600;
    letter-spacing: 0;
    font-size: 1.04rem;
    text-decoration: none;
}
.sidebar-brand:hover { color: var(--text-strong); }
.sidebar-brand .brand-mark {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    /* Le logo 16corp fournit son propre fond : on arrondit juste le cadre. */
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 2px 6px -1px rgba(13, 27, 42, 0.35);
}
.sidebar-brand .brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }

.sidebar-section { margin-top: 1.1rem; }
.sidebar-section-title {
    color: var(--text-faint);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0 0.7rem 0.35rem;
}

/* ===== Domaines du menu (Finance / Gestion / Operationnel) =====
   Intertitre de niveau superieur : segmente les sections en grands
   domaines. Purement visuel (pas de repli), distinct des titres de
   section grace a un libelle suivi d'un filet horizontal. */
.sidebar-group-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 1.6rem 0 0.15rem;
    padding: 0 0.7rem;
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}
.sidebar-group-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-strong, rgba(40, 55, 95, 0.16));
}
/* Le tout premier domaine colle moins au haut du menu. */
.sidebar-group-title:first-child { margin-top: 0.4rem; }
.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0.7rem;
    margin: 1px 0;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 9px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0;
    transition: background 160ms ease, color 160ms ease;
}
.sidebar-link i { font-size: 0.95rem; opacity: 0.75; }
.sidebar-link:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-strong);
}
.sidebar-link.active {
    background: rgba(255, 255, 255, 0.95);
    color: var(--accent);
    font-weight: 600;
    box-shadow:
        0 0 0 0.5px rgba(140, 150, 175, 0.10),
        0 1px 3px rgba(31, 38, 80, 0.06);
}
.sidebar-link.active i { opacity: 1; }
/* Pastille rouge en bout de lien (ex. nb de tâches « à traiter » sur « Mes tâches »). */
.sidebar-badge {
    margin-left: auto;
    min-width: 1.2rem;
    padding: 0.02rem 0.38rem;
    font-size: 0.68rem; font-weight: 700; line-height: 1.35;
    text-align: center;
    color: #fff;
    background: var(--danger);
    border-radius: 999px;
}
/* Barre repliée (icônes seules) : la pastille passe en coin de l'icône.
   Sélecteur plus spécifique que « .sidebar-link span { display:none } » (qui masque
   le libellé) pour que la pastille, elle, reste visible. */
@media (max-width: 992px) {
    .sidebar-link .sidebar-badge {
        display: block;
        position: absolute;
        top: 2px; right: 2px;
        margin: 0;
        min-width: 1rem;
        padding: 0.01rem 0.26rem;
        font-size: 0.6rem;
        box-shadow: 0 0 0 2px var(--bg-elevated);
    }
}

/* ===== Sections repliables =====
   Le titre devient cliquable (classe .is-collapsible posee par app.js -> si le
   JS ne tourne pas, le titre reste un simple libelle, pas de chevron casse).
   Un clic bascule .collapsed sur la section parente ; l'etat est memorise. */
.sidebar-section-title.is-collapsible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    cursor: pointer;
    user-select: none;
    border-radius: 7px;
    transition: color 140ms ease, background 140ms ease;
}
.sidebar-section-title.is-collapsible:hover {
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.03);
}
/* Chevron CSS (coin bas-droit de borders, pivote) : bas = deplie, droite = replie. */
.sidebar-section-title.is-collapsible::after {
    content: "";
    flex-shrink: 0;
    width: 6px; height: 6px;
    margin-bottom: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 180ms ease;
    opacity: 0.55;
}
.sidebar-section.collapsed .sidebar-section-title.is-collapsible::after {
    transform: rotate(-45deg);
    margin-bottom: 0;
}
/* Section repliee : on masque les liens (mais pas le titre). */
.sidebar-section.collapsed .sidebar-link { display: none; }

/* ===== Main area ===== */
main.main {
    flex: 1;
    min-width: 0;
    padding: 2rem 1.5rem 3rem;
}

/* ===== Glass HERO ===== */
.glass-hero, .hero {
    position: relative;
    border-radius: var(--glass-radius);
    padding: 1.75rem 2rem 1.65rem;
    background: var(--glass-bg-1);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    box-shadow: var(--glass-shadow);
    margin-bottom: 1rem;
    overflow: hidden;
    border: 0.5px solid var(--glass-border);
}
.glass-hero h1, .glass-hero h2,
.hero h1, .hero h2 {
    margin: 0 0 0.3rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-strong);
}
.glass-hero h1, .hero h1 { font-size: 1.45rem; }
.glass-hero h2, .hero h2 { font-size: 1.3rem; }
.glass-hero p, .hero p {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 80ch;
}

/* ===== Glass CARD ===== */
.glass-card, .card, .panel {
    position: relative;
    border-radius: var(--glass-radius);
    background: var(--glass-bg-1);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    border: 0.5px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    transition: box-shadow 280ms ease, transform 280ms ease, background 280ms ease;
}
.glass-card:hover, .card:hover {
    box-shadow: var(--glass-shadow-hover);
    transform: translateY(-1px);
    /* pas de changement de fond au survol : la carte ne "blanchit" plus */
}
.glass-card .card-header,
.card .card-header {
    background: transparent;
    border-bottom: 0.5px solid rgba(40, 55, 95, 0.07);
    padding: 1.05rem 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-strong);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
}
.glass-card .card-body,
.card .card-body { padding: 1.25rem; }
.glass-card .card-body.p-0,
.card .card-body.p-0 { padding: 0; }

/* ===== Glass METRIC ===== */
.glass-metric, .metric-card {
    position: relative;
    border-radius: var(--glass-radius);
    background: var(--glass-bg-1);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    border: 0.5px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    padding: 1.25rem 1.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    transition: box-shadow 280ms ease, transform 280ms ease, background 280ms ease;
    min-height: 112px;
    height: 100%;
}
.glass-metric:hover, .metric-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--glass-shadow-hover);
    /* pas de changement de fond au survol : le bloc ne "blanchit" plus */
}
.glass-metric .metric-label,
.metric-card .metric-label {
    color: var(--text-faint);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.glass-metric .metric-value,
.metric-card .metric-value {
    font-size: 1.78rem;
    font-weight: 620;                 /* spec : 620 (pas trop gras) */
    letter-spacing: 0;
    line-height: 1.05;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' on, 'lnum' on, 'cv11' on;
}
.glass-metric .metric-sub,
.metric-card .metric-sub {
    color: var(--text-faint);
    font-size: 0.78rem;
    margin-top: 0.32rem;
    font-weight: 400;
}
.glass-metric .metric-icon,
.metric-card .metric-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
}
.metric-icon.accent  { background: var(--accent-soft);  color: var(--accent); }
.metric-icon.info    { background: var(--info-soft);    color: var(--info); }
.metric-icon.success { background: var(--success-soft); color: var(--success); }
.metric-icon.warning { background: var(--warn-soft);    color: var(--warn); }
.metric-icon.danger  { background: var(--danger-soft);  color: var(--danger); }

/* ===== Bento Grid (Apple-style varied tiles) ===== */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
}
.bento-grid > .bento-tile        { grid-column: span 3; }
.bento-grid > .bento-tile.w-4    { grid-column: span 4; }
.bento-grid > .bento-tile.w-6    { grid-column: span 6; }
.bento-grid > .bento-tile.w-8    { grid-column: span 8; }
.bento-grid > .bento-tile.w-12   { grid-column: span 12; }
.bento-grid > .bento-tile.h-2    { grid-row: span 2; }
@media (max-width: 1100px) {
    .bento-grid > .bento-tile,
    .bento-grid > .bento-tile.w-4 { grid-column: span 6; }
    .bento-grid > .bento-tile.w-6,
    .bento-grid > .bento-tile.w-8 { grid-column: span 12; }
}
@media (max-width: 640px) {
    .bento-grid > .bento-tile,
    .bento-grid > .bento-tile.w-4,
    .bento-grid > .bento-tile.w-6,
    .bento-grid > .bento-tile.w-8 { grid-column: span 12; }
}

/* Bento feature tile : tres grosse value, teinte subtile, bordure douce */
.bento-feature {
    border-radius: var(--glass-radius);
    background: var(--glass-bg-1);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 0.5px solid var(--glass-border);
    box-shadow: var(--glass-shadow-sm);
    padding: 1.6rem 1.75rem;
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: transform 260ms ease, box-shadow 260ms ease;
}
.bento-feature:hover {
    transform: translateY(-1px);
    box-shadow: var(--glass-shadow);
}
/* Teintes : leger wash de couleur dans le coin (subtil) */
.bento-feature.tinted-blue   { background:
    radial-gradient(60% 80% at 100% 0%, rgba(0, 122, 255, 0.10), transparent 70%),
    var(--glass-bg-1); }
.bento-feature.tinted-green  { background:
    radial-gradient(60% 80% at 100% 0%, rgba(52, 199, 89, 0.10), transparent 70%),
    var(--glass-bg-1); }
.bento-feature.tinted-red    { background:
    radial-gradient(60% 80% at 100% 0%, rgba(255, 59, 48, 0.10), transparent 70%),
    var(--glass-bg-1); }
.bento-feature.tinted-orange { background:
    radial-gradient(60% 80% at 100% 0%, rgba(255, 149, 0, 0.10), transparent 70%),
    var(--glass-bg-1); }
.bento-feature.tinted-purple { background:
    radial-gradient(60% 80% at 100% 0%, rgba(175, 82, 222, 0.10), transparent 70%),
    var(--glass-bg-1); }
.bento-feature .feat-label {
    color: var(--text-faint);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.bento-feature .feat-value {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.bento-feature .feat-sub {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-top: 0.6rem;
}

/* ===== Glass PILL ===== */
.glass-pill, .badge.tag-pill, .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    background: rgba(40, 55, 95, 0.07);
    color: var(--text-strong);
    border: 0.5px solid transparent;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.glass-pill.tone-success, .tag-ok       { background: var(--success-soft); color: #1F8A40; border-color: rgba(52, 199, 89, 0.20); }
.glass-pill.tone-warn,    .tag-warn     { background: var(--warn-soft);    color: #B95C00; border-color: rgba(255, 149, 0, 0.22); }
.glass-pill.tone-danger,  .tag-danger   { background: var(--danger-soft);  color: #B0241A; border-color: rgba(255, 59, 48, 0.22); }
.glass-pill.tone-info,    .tag-info     { background: var(--info-soft);    color: #006A98; border-color: rgba(90, 200, 250, 0.32); }
.glass-pill.tone-accent                  { background: var(--accent-soft);  color: var(--accent); border-color: rgba(10, 132, 255, 0.22); }
.glass-pill.tone-magic                   { background: rgba(175, 82, 222, 0.14); color: #7B3FA5; border-color: rgba(175, 82, 222, 0.24); }
.tag-muted                                { background: rgba(40, 55, 95, 0.06); color: var(--text-faint); }

/* ===== Pastille METIER (reconnaissance des entites du groupe) =====
   16 Solutions = infogerance (bleu/info)  ·  16 Logiciels = logiciel (violet/magic).
   Teintes calquees sur tone-info / tone-magic pour rester homogene. La pastille
   pleine (.glass-pill) et le sigle compact (.metier-tag, ex. menu) partagent les
   memes couleurs. */
.glass-pill.metier-infogerance,
.metier-tag.metier-infogerance { background: var(--info-soft);         color: #006A98; border-color: rgba(90, 200, 250, 0.32); }
.glass-pill.metier-logiciel,
.metier-tag.metier-logiciel    { background: rgba(175, 82, 222, 0.14); color: #7B3FA5; border-color: rgba(175, 82, 222, 0.24); }
/* 16 Communication = communication (rose). Cale sur --sys-pink #FF2D55, teinte
   assombrie pour rester lisible sur fond clair. */
.glass-pill.metier-communication,
.metier-tag.metier-communication { background: rgba(255, 45, 85, 0.12); color: #C01E43; border-color: rgba(255, 45, 85, 0.24); }

/* Sigle compact « 16S » / « 16L » : version reduite de la pastille metier, calee
   sur les intitules de menu (libelle + sigle groupes a gauche, chevron a droite). */
.sidebar-section-label { display: inline-flex; align-items: center; gap: 0.4rem; }
.metier-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.04rem 0.34rem;
    border-radius: 5px;
    border: 0.5px solid transparent;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-transform: none;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

/* Pastille de variation KPI (delta vert/rouge) - utilisable directement comme pill */
.glass-pill.delta-up    { background: var(--success-soft); color: #1F8A40; }
.glass-pill.delta-down  { background: var(--danger-soft);  color: #B0241A; }
.glass-pill.delta-flat  { background: rgba(40, 55, 95, 0.06); color: var(--text-faint); }

/* ===== Glass BUTTON ===== */
.glass-btn, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    padding: 0.55rem 1.05rem;
    border-radius: 999px;
    border: 0.5px solid var(--glass-border);
    background: rgba(255,255,255,0.78);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    color: var(--text-strong);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    cursor: pointer;
    transition: all 200ms ease;
    text-decoration: none;
    line-height: 1.3;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 1px 2px rgba(40,55,95,0.05);
}
.glass-btn:hover, .btn:hover {
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 6px 16px -6px rgba(40,55,95,0.16);
    transform: translateY(-1px);
    color: var(--text-strong);
}
.glass-btn:active, .btn:active { transform: translateY(0); }
.glass-btn.tone-primary,  .btn-primary {
    background: var(--accent-grad);
    border-color: transparent;
    color: white;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        0 6px 16px -4px rgba(10,132,255,0.40);
}
.glass-btn.tone-primary:hover, .btn-primary:hover {
    color: white;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.34),
        0 10px 22px -4px rgba(10,132,255,0.52);
}
.glass-btn.tone-success, .btn-success {
    background: linear-gradient(135deg, #34C759 0%, #30B450 100%);
    border-color: transparent; color: white;
    box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 4px 12px rgba(52,199,89,0.35);
}
.glass-btn.tone-success:hover, .btn-success:hover { color: white; }
.glass-btn.tone-danger, .btn-danger {
    background: linear-gradient(135deg, #FF3B30 0%, #E0322A 100%);
    border-color: transparent; color: white;
    box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 4px 12px rgba(255,59,48,0.30);
}
.glass-btn.tone-danger:hover, .btn-danger:hover { color: white; }
.glass-btn.tone-warn, .btn-warning {
    background: linear-gradient(135deg, #FF9F0A 0%, #F08C00 100%);
    border-color: transparent; color: white;
    box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 4px 12px rgba(255,149,0,0.30);
}
.glass-btn.tone-warn:hover, .btn-warning:hover { color: white; }
.glass-btn.tone-ghost, .btn-outline-light, .btn-outline-danger {
    background: rgba(255,255,255,0.5); border-color: var(--glass-border);
    color: var(--text-strong);
    box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}
.glass-btn.tone-ghost:hover, .btn-outline-light:hover {
    background: rgba(255,255,255,0.85); color: var(--text-strong);
}
.glass-btn.tone-ghost.tone-danger-ghost,
.btn-outline-danger { color: var(--danger); }
.glass-btn.tone-ghost.tone-danger-ghost:hover,
.btn-outline-danger:hover { color: var(--danger); background: var(--danger-soft); }
.glass-btn.sm, .btn-sm {
    padding: 0.32rem 0.78rem;
    font-size: 0.78rem;
}

/* ===== Glass INPUT / SELECT ===== */
.glass-input, .glass-select,
.form-control, .form-select {
    border-radius: 10px;
    background: #ffffff;
    /* Contraste renforce en light mode : bord 1px nettement visible (l'ancien
       0.5px sur verre pale rendait les champs difficiles a distinguer). */
    border: 1px solid rgba(40, 55, 95, 0.30);
    color: var(--text-strong);
    padding: 0.52rem 0.85rem;
    font-size: 0.9rem;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    box-shadow: none;
}
.glass-input::placeholder, .form-control::placeholder, .form-select::placeholder {
    color: rgba(40, 55, 95, 0.45);
}
.glass-input:focus, .glass-select:focus,
.form-control:focus, .form-select:focus {
    outline: none;
    background: rgba(255, 255, 255, 1);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.18);
    color: var(--text-strong);
}
.form-label {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    margin-bottom: 0.32rem;
    letter-spacing: 0.005em;
}
.form-check-input {
    background-color: rgba(255,255,255,0.9);
    border-color: var(--glass-border-hi);
}
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* ===== Glass TABLE ===== */
.glass-table, .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    color: var(--text-strong);
}
.glass-table thead th, .table thead th {
    background: rgba(255, 255, 255, 0.55);
    color: var(--text-faint);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.085em;
    padding: 0.55rem 1.05rem;
    border-bottom: 0.5px solid rgba(40, 55, 95, 0.08);
    text-align: left;
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    position: sticky;
    top: 0;
    z-index: 1;
}
.glass-table tbody td, .table tbody td {
    padding: 0.58rem 1.05rem;
    border-bottom: 0.5px solid rgba(40, 55, 95, 0.06);
    vertical-align: middle;
    font-size: 0.9rem;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.glass-table tbody tr,
.table tbody tr { transition: background 160ms ease; }
.glass-table tbody tr:hover td,
.table tbody tr:hover td { background: rgba(10, 132, 255, 0.04); }
.glass-table tbody tr:last-child td,
.table tbody tr:last-child td { border-bottom: none; }
.glass-table.table-sm tbody td,
.table.table-sm tbody td { padding: 0.55rem 0.85rem; }

/* ===== Glass Segmented (style iOS) ===== */
.glass-segmented {
    display: inline-flex;
    padding: 3px;
    background: rgba(60, 60, 67, 0.06);
    border-radius: 12px;
    gap: 2px;
}
.glass-segmented a, .glass-segmented button {
    padding: 0.32rem 0.9rem;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 180ms ease;
}
.glass-segmented a.active, .glass-segmented button.active {
    background: var(--glass-bg-2);
    color: var(--text-strong);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 1px 3px rgba(0,0,0,0.06);
}

/* ===== Priority bands (band gauche colore) ===== */
.glass-row { position: relative; }
.glass-row.priority-urgent  td:first-child { box-shadow: inset 3px 0 0 0 var(--danger); }
.glass-row.priority-medium  td:first-child { box-shadow: inset 3px 0 0 0 var(--warn); }
.glass-row.priority-low     td:first-child { box-shadow: inset 3px 0 0 0 var(--info); }
.glass-row.priority-done    td:first-child { box-shadow: inset 3px 0 0 0 var(--success); }
.glass-row.priority-done td { opacity: 0.75; }
.glass-row.priority-archive td { opacity: 0.5; }
.glass-row.priority-archive td:first-child { box-shadow: inset 3px 0 0 0 var(--gray-2); }
.glass-row.priority-archive:hover td { opacity: 0.85; }

/* ===== Glass DETAILS (expand inline) ===== */
.glass-details {
    background: rgba(255, 255, 255, 0.5);
    border-top: 0.5px solid var(--glass-border);
    padding: 1rem 1.4rem 1.25rem;
}
.glass-details > table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
    background: rgba(255,255,255,0.65);
    border-radius: var(--glass-radius-md);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.glass-details > table th {
    color: var(--text-faint);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.66rem;
    letter-spacing: 0.07em;
    padding: 0.6rem 0.85rem;
    border-bottom: 0.5px solid var(--glass-border);
    text-align: left;
    background: rgba(60, 60, 67, 0.04);
}
.glass-details > table td {
    padding: 0.5rem 0.85rem;
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.05);
}

/* ===== Flash toast ===== */
.flash-toast {
    border-radius: 14px;
    background: var(--glass-bg-1);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 0.5px solid var(--glass-border);
    padding: 0.9rem 1.15rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--glass-shadow-sm);
}
.flash-toast.flash-success { color: #1F8A40; border-color: rgba(52, 199, 89, 0.30); background: linear-gradient(180deg, rgba(52, 199, 89, 0.10), var(--glass-bg-1)); }
.flash-toast.flash-error   { color: #B0241A; border-color: rgba(255, 59, 48, 0.30); background: linear-gradient(180deg, rgba(255, 59, 48, 0.10), var(--glass-bg-1)); }
.flash-toast.flash-info    { color: #006A98; border-color: rgba(90, 200, 250, 0.40); background: linear-gradient(180deg, rgba(90, 200, 250, 0.12), var(--glass-bg-1)); }

/* ===== Stepper (anciennement utilise) ===== */
.stepper {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}
.stepper .step {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    background: rgba(255,255,255,0.5);
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    border: 0.5px solid var(--glass-border);
    opacity: 0.65;
}
.stepper .step.done { opacity: 1; background: var(--success-soft); border-color: rgba(52, 199, 89, 0.30); }
.stepper .step-mark {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--gray-5);
    color: var(--text-faint);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-size: 0.78rem;
}
.stepper .step.done .step-mark { background: var(--success); color: white; }

/* ===== Tom Select Skin (light glass) ===== */
.ts-wrapper { background: transparent !important; padding: 0 !important; }
.ts-wrapper.glass-select { padding: 0 !important; }
.ts-wrapper .ts-control {
    background: rgba(255,255,255,0.85) !important;
    border: 0.5px solid var(--glass-border) !important;
    border-radius: 10px !important;
    padding: 0.42rem 0.75rem !important;
    min-height: 36px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset;
}
.ts-wrapper .ts-control input {
    color: var(--text-strong) !important;
    font-size: 0.88rem;
}
.ts-wrapper .ts-control > .item { color: var(--text-strong); }
.ts-wrapper.focus .ts-control {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15) !important;
}
/* Variante compacte : selects recherchables issus d'un .form-select-sm
   (ex. lignes de feuille de temps) — cf. app.js, wrapperClass « ts-sm ». */
.ts-wrapper.ts-sm .ts-control {
    min-height: 31px !important;
    padding: 0.2rem 0.6rem !important;
}
.ts-wrapper.ts-sm .ts-control,
.ts-wrapper.ts-sm .ts-control input { font-size: 0.82rem; }
.ts-dropdown {
    background: rgba(255, 255, 255, 0.95) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 0.5px solid var(--glass-border-hi) !important;
    border-radius: 12px !important;
    box-shadow: var(--glass-shadow) !important;
    color: var(--text-strong) !important;
    margin-top: 4px !important;
    padding: 4px !important;
}
.ts-dropdown .option { padding: 0.5rem 0.85rem !important; border-radius: 8px; margin: 1px 0; }
.ts-dropdown .active { background: var(--accent) !important; color: white !important; }
.ts-dropdown .selected { background: rgba(0, 122, 255, 0.08) !important; }

/* ===== Bootstrap dropdowns / modals harmonises ===== */
.dropdown-menu {
    background: var(--glass-bg-2);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 0.5px solid var(--glass-border-hi);
    border-radius: 12px;
    box-shadow: var(--glass-shadow);
}

/* ===== DataTables harmonises ===== */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 8px;
    border: 0.5px solid var(--glass-border);
    background: rgba(255,255,255,0.9);
    color: var(--text-strong);
    padding: 0.32rem 0.65rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 0.5px solid var(--glass-border) !important;
    margin: 0 2px !important;
    background: rgba(255,255,255,0.7) !important;
    color: var(--text-strong) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--accent-grad) !important;
    color: white !important;
    border-color: transparent !important;
}

/* DataTables 2.x (bootstrap5) vit dans .card-body.p-0 : les .row Bootstrap
   etirent leurs gouttieres negatives jusqu'au bord de la carte, collant
   longueur / recherche / info / pagination contre les bordures. On annule la
   gouttiere, on aligne les controles sur le padding des cellules (1.15rem) et
   on aere le haut/bas. La ligne du tableau (.dt-layout-full) reste full-bleed. */
.dt-container { --bs-gutter-x: 0; }
.dt-container .dt-layout-start { padding-left: 1.15rem; }
.dt-container .dt-layout-end   { padding-right: 1.15rem; }
.dt-container > .row:first-child { padding-top: 0.5rem; }   /* + le mt-2 du haut ~= 1rem */
.dt-container > .row:last-child  { padding-bottom: 1rem; }

/* ===== Backcompat : anciennes classes ===== */
.text-strong { color: var(--text-strong); }
code { color: var(--accent); background: var(--accent-soft); padding: 0.1rem 0.4rem; border-radius: 6px; font-family: 'SF Mono', monospace; font-size: 0.84rem; }

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .sidebar { width: 64px; padding: 1rem 0.4rem; }
    .sidebar-brand span:not(.brand-mark) { display: none; }
    .sidebar-section-title { display: none; }
    .sidebar-link { justify-content: center; padding: 0.5rem; }
    .sidebar-link span { display: none; }
    /* Titres masques en mode icones -> le repli est inaccessible : on neutralise. */
    .sidebar-section.collapsed .sidebar-link { display: flex; }
    main.main { padding: 1.2rem; }
    .glass-hero { padding: 1.2rem 1.3rem; }
    .glass-metric { padding: 0.9rem 1rem; }
    .glass-metric .metric-value { font-size: 1.35rem; }
    .bento-feature { padding: 1.1rem 1.2rem; }
    .bento-feature .feat-value { font-size: 1.8rem; }
}

/* =====================================================================
   Action card (inline)
   ---------------------------------------------------------------------
   Carte d'action contextuelle a l'interieur d'un detail expand (cadences,
   doublons, atera...). Plus visible qu'un simple form label gris, avec
   un fond tonalise, un header explicite et une hint discrete.
   Variantes :
     .action-card--warn   (ambre, pour Ignorer)
     .action-card--danger (rouge, pour Supprimer)
     .action-card--info   (bleu, pour Info/Geste)
===================================================================== */
.action-card {
    border-radius: var(--glass-radius-md);
    padding: 0.95rem 1.1rem 1.05rem;
    background: rgba(40, 55, 95, 0.04);
    border: 0.5px solid rgba(40, 55, 95, 0.10);
}
.action-card--warn   { background: rgba(255, 149, 0, 0.07);  border-color: rgba(255, 149, 0, 0.18); }
.action-card--danger { background: rgba(255, 59, 48, 0.07);  border-color: rgba(255, 59, 48, 0.18); }
.action-card--info   { background: rgba(10, 132, 255, 0.06); border-color: rgba(10, 132, 255, 0.18); }

.action-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}
.action-card__title {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: 0;
}
.action-card--warn   .action-card__title i { color: #B95C00; }
.action-card--danger .action-card__title i { color: #B0241A; }
.action-card--info   .action-card__title i { color: var(--accent); }
.action-card__hint {
    font-size: 0.78rem;
    color: var(--text-faint);
}
.action-card__hint a { font-weight: 500; }

.action-card__form {
    display: flex;
    align-items: stretch;
    gap: 0.65rem;
}
.action-card__input {
    flex: 1;
    border-radius: 10px;
    border: 0.5px solid rgba(40, 55, 95, 0.14);
    background: rgba(255, 255, 255, 0.92);
    padding: 0.65rem 0.9rem;
    font-size: 0.93rem;
    color: var(--text-strong);
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.action-card__input::placeholder { color: var(--text-faint); }
.action-card__input:focus {
    outline: none;
    background: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.18);
}
.action-card__submit {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Kbd indicator (touche clavier) */
.action-card__kbd, kbd.action-card__kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 0 0.32rem;
    margin-left: 0.4rem;
    font-family: 'SF Mono', 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.22);
    border: 0.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 5px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.10);
}

@media (max-width: 720px) {
    .action-card__form { flex-direction: column; }
    .action-card__submit { width: 100%; }
}

/* =====================================================================
   Mode sombre Liquid Glass / Frost
   ---------------------------------------------------------------------
   Near-black #070810 a lueurs colorees (bleu/violet/cyan), verre noir
   laiteux translucide, ombres profondes mais douces. Pas de pur noir.

   Active via l'attribut [data-theme="dark"] pose sur <html> par le
   selecteur de theme (Clair / Auto / Sombre, voir .theme-toggle). En
   mode "auto", un petit script inline resout prefers-color-scheme et
   pose data-theme=dark|light avant le premier rendu (zero flash).
===================================================================== */
:root[data-theme="dark"] {
    /* Texte */
    --text-strong:    #ECEEF3;
    --text-muted:     #B8BFCC;
    --text-faint:     #7A8294;
    --text-disabled:  #4A5060;

    /* Fond de l'app + lueurs colorees (effet wallpaper sombre Tahoe) */
    --bg-app:         #070810;
    --tint-1:         rgba(10, 132, 255, 0.10);
    --tint-2:         rgba(88, 86, 214, 0.10);
    --tint-3:         rgba(48, 176, 199, 0.06);
    --tint-glow:      radial-gradient(60% 50% at 20% 10%, rgba(10,132,255,0.22), transparent 70%),
                      radial-gradient(50% 40% at 85% 0%, rgba(175,82,222,0.18), transparent 70%),
                      radial-gradient(45% 35% at 90% 90%, rgba(48,176,199,0.14), transparent 70%);

    /* Glass : verre fume sombre, translucide */
    --glass-bg-1:        rgba(28, 32, 44, 0.38);   /* cartes au repos : materiau translucide (depoli fort) */
    --glass-bg-2:        rgba(32, 38, 52, 0.78);
    --glass-bg-active:   rgba(10, 132, 255, 0.22);
    --glass-border:      rgba(255, 255, 255, 0.10);
    --glass-border-hi:   rgba(255, 255, 255, 0.16);

    --glass-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 0.5px rgba(255, 255, 255, 0.05),
        0 14px 38px -16px rgba(0, 0, 0, 0.60);
    --glass-shadow-sm:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 6px 18px -10px rgba(0, 0, 0, 0.50);
    --glass-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 22px 54px -16px rgba(0, 0, 0, 0.70);

    --bg-sidebar:    rgba(18, 20, 28, 0.68);
    --bg-card:       var(--glass-bg-1);
    --bg-card-hover: var(--glass-bg-2);
    --bg-elevated:   rgba(40, 46, 60, 0.92);

    --border-soft:   rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.12);
    --accent-soft:   rgba(10, 132, 255, 0.18);
    --success-soft:  rgba(52, 199, 89, 0.18);
    --warn-soft:     rgba(255, 149, 0, 0.18);
    --danger-soft:   rgba(255, 59, 48, 0.20);
    --info-soft:     rgba(90, 200, 250, 0.22);
}

[data-theme="dark"] {
    /* Pills : couleurs accentuees pour rester lisibles sur fond sombre */
    .glass-pill, .badge.tag-pill, .badge      { background: rgba(255,255,255,0.06); color: var(--text-strong); }
    .glass-pill.tone-success, .tag-ok         { color: #6BE38C; }
    .glass-pill.tone-warn,    .tag-warn       { color: #FFB95C; }
    .glass-pill.tone-danger,  .tag-danger     { color: #FF7C72; }
    .glass-pill.tone-info,    .tag-info       { color: #7FD7FF; }
    .glass-pill.tone-accent                   { color: #5DAFFF; }

    /* Boutons "fantome" : verre noir tres subtil */
    .glass-btn, .btn {
        background: rgba(40, 46, 60, 0.55);
        color: var(--text-strong);
    }
    .glass-btn:hover, .btn:hover {
        background: rgba(54, 62, 80, 0.75);
        color: var(--text-strong);
    }

    /* Tables : zebra desactive, hover bleute leger */
    .glass-table thead th, .table thead th {
        background: rgba(28, 32, 44, 0.62);
        color: var(--text-faint);
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }
    .glass-table tbody td, .table tbody td   { border-bottom-color: rgba(255, 255, 255, 0.06); }
    .glass-table tbody tr:hover td,
    .table tbody tr:hover td                 { background: rgba(10, 132, 255, 0.08); }

    /* Sidebar */
    .sidebar { box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05); border-right-color: rgba(255, 255, 255, 0.05); }
    .sidebar-link:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-strong); }
    .sidebar-link.active { background: var(--glass-bg-active); color: #5DAFFF; }

    /* Inputs */
    .glass-input, .glass-select, .form-control, .form-select {
        background: rgba(28, 32, 44, 0.6);
        border-color: rgba(255, 255, 255, 0.20);
        color: var(--text-strong);
    }
    .glass-input::placeholder, .form-control::placeholder, .form-select::placeholder {
        color: rgba(255, 255, 255, 0.40);
    }
    .glass-input:focus, .glass-select:focus, .form-control:focus, .form-select:focus {
        background: rgba(28, 32, 44, 0.85);
        border-color: var(--accent);
        box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.22);
    }

    /* Recherche globale (sidebar) : memes tonalites verre sombre que les inputs */
    .sidebar-search-input {
        background: rgba(28, 32, 44, 0.6);
        border-color: rgba(255, 255, 255, 0.20);
    }
    .sidebar-search-input::placeholder { color: rgba(255, 255, 255, 0.40); }
    .sidebar-search-input:focus {
        background: rgba(28, 32, 44, 0.85);
        box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.22);
    }
    .sidebar-search-kbd { background: rgba(255, 255, 255, 0.08); }

    /* Code inline + scrollbars */
    code { background: rgba(10, 132, 255, 0.16); }

    /* Action cards : fonds tonalises adaptes au verre sombre */
    .action-card         { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); }
    .action-card--warn   { background: rgba(255, 149, 0, 0.10);  border-color: rgba(255, 149, 0, 0.28); }
    .action-card--danger { background: rgba(255, 59, 48, 0.10);  border-color: rgba(255, 59, 48, 0.28); }
    .action-card--info   { background: rgba(10, 132, 255, 0.10); border-color: rgba(10, 132, 255, 0.28); }
    .action-card__input {
        background: rgba(28, 32, 44, 0.6);
        border-color: rgba(255, 255, 255, 0.10);
        color: var(--text-strong);
    }
    .action-card__input:focus { background: rgba(28, 32, 44, 0.9); }
    .action-card--warn   .action-card__title i { color: #FFB95C; }
    .action-card--danger .action-card__title i { color: #FF7C72; }

    /* Sidebar flottante : verre noir laiteux profond (geometrie identique
       au light). Defini apres le .sidebar ci-dessus -> override du box-shadow. */
    .sidebar {
        border: 0.5px solid rgba(255, 255, 255, 0.08);
        border-right: 0.5px solid rgba(255, 255, 255, 0.08);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            inset 0 0 0 0.5px rgba(255, 255, 255, 0.04),
            0 0 0 0.5px rgba(255, 255, 255, 0.03),
            0 14px 38px -16px rgba(0, 0, 0, 0.55),
            0 28px 70px -24px rgba(10, 30, 80, 0.45);
    }
}

/* ===== Bloc utilisateur connecte (bas de sidebar) ===== */
.sidebar { display: flex; flex-direction: column; }
/* La marque (haut) et le bloc utilisateur + theme (bas) restent figes ;
   seule la liste des sections defile au milieu. */
.sidebar-brand { flex-shrink: 0; }
.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;       /* indispensable pour activer le scroll en flex column */
    overflow-y: auto;
    /* gouttiere fine pour la scrollbar sans rogner les liens */
    margin: 0 -0.35rem;
    padding: 0 0.35rem;
}
.sidebar-user {
    flex-shrink: 0;      /* toujours visible, colle en bas */
    margin-top: 0;
    padding-top: 1rem;
    border-top: 0.5px solid rgba(40, 55, 95, 0.10);
}
.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.2rem 0.6rem;
    color: var(--text-muted);
}
.sidebar-user-info > i { font-size: 1.5rem; opacity: 0.7; }
/* Bloc utilisateur rendu cliquable (ouvre la page Profil). */
.sidebar-user-link { text-decoration: none; border-radius: 10px; transition: background 0.15s; }
.sidebar-user-link:hover { background: rgba(40, 55, 95, 0.06); }
.sidebar-user-link.active { background: rgba(40, 55, 95, 0.09); }
.sidebar-user-cog { margin-left: auto; font-size: 0.95rem; color: var(--text-faint); flex-shrink: 0; }
.sidebar-user-link:hover .sidebar-user-cog { color: var(--text-muted); }
.sidebar-user-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sidebar-user-email {
    font-size: 0.82rem; font-weight: 600; color: var(--text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px;
}
.sidebar-user-role { font-size: 0.72rem; color: var(--text-faint); }

/* Selecteur de theme : segmented control Clair / Auto / Sombre */
.theme-toggle {
    display: flex;
    gap: 2px;
    padding: 3px;
    margin-bottom: 0.6rem;
    background: rgba(120, 130, 150, 0.10);
    border: 0.5px solid var(--border-soft);
    border-radius: 11px;
}
.theme-toggle__btn {
    flex: 1 1 0;
    display: flex; align-items: center; justify-content: center;
    padding: 0.4rem 0;
    font-size: 0.95rem;
    color: var(--text-faint);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.theme-toggle__btn:hover { color: var(--text-strong); }
.theme-toggle__btn.active {
    background: var(--bg-elevated);
    color: var(--accent);
    box-shadow: var(--glass-shadow-sm);
}

.sidebar-logout {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.45rem 0.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    background: transparent;
    border: 0.5px solid rgba(40, 55, 95, 0.12);
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.sidebar-logout:hover { background: rgba(220, 53, 69, 0.08); color: var(--danger); }
@media (max-width: 992px) {
    .sidebar-user-meta, .sidebar-logout span, .sidebar-user-cog { display: none; }
    .theme-toggle { flex-direction: column; }
}

/* =====================================================================
   Filtres Analyse : barre Entité + sélecteur de PÉRIODE.
   Le sélecteur de période = contrôle segmenté (même idiome que .theme-toggle)
   pour les raccourcis, + un bouton "Précis" qui déroule un panneau verre
   (trimestres / semestres / années / perso) via <details>. Décliné
   clair/sombre par les tokens, sans JS dédié (submit GET au clic).
   ===================================================================== */
.analyse-filters {
    display: flex; flex-wrap: wrap; gap: 0.7rem 1.1rem; align-items: flex-end;
    margin-top: 0.4rem;
}
/* Le hero clippe ses coins (overflow:hidden) ; on le neutralise UNIQUEMENT
   pour ceux qui portent la barre de filtres, sinon le panneau "Précis"
   (position:absolute) serait coupé. Pas de décor en pseudo-élément à clipper. */
.glass-hero:has(.analyse-filters), .hero:has(.analyse-filters) {
    overflow: visible;
    /* relève le hero (et donc le panneau) au-dessus des tuiles bento qui
       suivent dans le DOM, sinon elles repasseraient devant le panneau. */
    z-index: 20;
}
.analyse-filters .form-label {
    display: block; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 0.3rem;
}
.analyse-filters .glass-select { min-width: 160px; }

/* Contrôle segmenté (raccourcis de période) */
.seg {
    display: inline-flex; gap: 2px; padding: 3px;
    background: rgba(120, 130, 150, 0.10);
    border: 0.5px solid var(--border-soft); border-radius: 11px;
}
.seg__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
    padding: 0.42rem 0.85rem; font-size: 0.84rem; font-weight: 500;
    color: var(--text-muted); background: transparent; border: 0; border-radius: 8px;
    cursor: pointer; white-space: nowrap;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.seg__btn:hover { color: var(--text-strong); }
.seg__btn.active {
    background: var(--bg-elevated); color: var(--accent);
    box-shadow: var(--glass-shadow-sm);
}

/* Bouton "Précis" + panneau déroulant (popover) */
.seg-more { position: relative; }
.seg-more > summary {
    list-style: none; display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.46rem 0.85rem; font-size: 0.84rem; font-weight: 500;
    color: var(--text-muted); background: rgba(120, 130, 150, 0.10);
    border: 0.5px solid var(--border-soft); border-radius: 10px;
    cursor: pointer; user-select: none;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.seg-more > summary::-webkit-details-marker { display: none; }
.seg-more > summary::marker { content: ""; }
.seg-more > summary:hover { color: var(--text-strong); }
.seg-more[open] > summary,
.seg-more > summary.active {
    color: var(--accent); background: var(--accent-soft); border-color: transparent;
}
.seg-more .chev { font-size: 0.72rem; transition: transform 0.15s; }
.seg-more[open] .chev { transform: rotate(180deg); }

.seg-pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    min-width: 340px; padding: 0.4rem 1rem 0.7rem;
    background: var(--bg-elevated);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--glass-radius-md);
    box-shadow: var(--glass-shadow-hover);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.seg-pop__row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.5rem 0; }
.seg-pop__row + .seg-pop__row { border-top: 0.5px solid var(--border-soft); }
.seg-pop__label {
    flex: 0 0 84px; font-size: 0.66rem; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-faint);
}
.seg-chip {
    padding: 0.28rem 0.62rem; font-size: 0.8rem; font-weight: 500;
    color: var(--text-muted); background: transparent;
    border: 0.5px solid var(--border-soft); border-radius: 8px; cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.seg-chip:hover { color: var(--text-strong); border-color: var(--border-strong); }
.seg-chip.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.seg-pop .glass-input { padding: 0.3rem 0.5rem; font-size: 0.8rem; width: 130px; }

@media (max-width: 640px) {
    .seg-pop { right: auto; left: 0; min-width: 260px; }
    .seg { flex-wrap: wrap; }
}

/* =====================================================================
   Navigation mobile : tiroir off-canvas + bouton hamburger
   ---------------------------------------------------------------------
   Sur tablette/telephone (<=768px) le menu lateral mange l'espace et
   devient peu lisible (rail d'icones 64px sans libelle). On le masque
   entierement et on le revele en tiroir glissant via un bouton hamburger
   flottant. Le voile (.nav-backdrop) ferme le tiroir au clic. La bascule
   est pilotee par la classe `nav-open` posee sur <body> par app.js.
   Bloc place en fin de feuille : a <=768px il l'emporte (meme specificite,
   source posterieure) sur le bloc rail-icones <=992px existant.
   ===================================================================== */
.nav-toggle { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 768px) {
    /* Bouton hamburger flottant (cible tactile 44px) */
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 1030;
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 1.35rem;
        color: var(--text-strong);
        background: var(--bg-elevated, rgba(255, 255, 255, 0.9));
        border: 0.5px solid var(--border-soft, rgba(40, 55, 95, 0.12));
        border-radius: 12px;
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        box-shadow: 0 4px 14px -4px rgba(31, 64, 140, 0.25);
        cursor: pointer;
    }
    .nav-toggle:active { transform: scale(0.94); }

    /* Voile sombre derriere le tiroir ouvert */
    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(15, 23, 42, 0.42);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

    /* La sidebar devient un tiroir off-canvas plein ecran a gauche.
       On retablit la largeur + les libelles masques par le rail <=992px. */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        width: min(82vw, 300px);
        height: 100vh;
        height: 100dvh;
        padding: 1.25rem 0.9rem;
        border-radius: 0 18px 18px 0;
        z-index: 1045;
        transform: translateX(-105%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.nav-open .sidebar { transform: translateX(0); }

    /* Retablit l'affichage complet (annule le rail-icones <=992px) */
    .sidebar-brand span:not(.brand-mark) { display: inline; }
    .sidebar-section-title { display: block; }
    .sidebar-link { justify-content: flex-start; padding: 0.42rem 0.7rem; }
    .sidebar-link span { display: inline; }
    .sidebar-user-meta { display: flex; }
    .sidebar-logout span { display: inline; }
    .theme-toggle { flex-direction: row; }

    /* Contenu principal pleine largeur, degage sous le bouton flottant */
    main.main { padding-top: 4.25rem; }

    /* Empeche le scroll de l'arriere-plan quand le tiroir est ouvert */
    body.nav-open { overflow: hidden; }
}

/* =====================================================================
   Liquid Glass refinement layer
   ---------------------------------------------------------------------
   Couche finale volontairement centralisee : elle rapproche le shell,
   les controles Bootstrap et les surfaces metier d'un vocabulaire Apple
   plus net, sans toucher aux templates.
===================================================================== */
:root {
    --font-sans:
        -apple-system, BlinkMacSystemFont,
        "SF Pro Text", "SF Pro Display",
        "Inter", "Segoe UI", Roboto, sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    --bg-app: #eef3f8;
    --tint-glow:
        linear-gradient(140deg, rgba(10, 132, 255, 0.13) 0%, rgba(255, 255, 255, 0) 36%),
        linear-gradient(42deg, rgba(52, 199, 89, 0.08) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(215deg, rgba(255, 149, 0, 0.08) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, #f7fbff 0%, #edf3f9 48%, #f5f7fb 100%);

    --text-strong: #151923;
    --text-muted: #4f5a6d;
    --text-faint: #7b8496;

    --glass-bg-1: rgba(255, 255, 255, 0.58);
    --glass-bg-2: rgba(255, 255, 255, 0.78);
    --glass-bg-active: rgba(10, 132, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.74);
    --glass-border-hi: rgba(255, 255, 255, 0.92);
    --glass-blur: blur(9px) saturate(170%);
    --glass-blur-strong: blur(13px) saturate(180%);
    --glass-radius: 18px;
    --glass-radius-md: 14px;
    --glass-radius-sm: 10px;
    --glass-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(255, 255, 255, 0.34),
        0 1px 2px rgba(22, 29, 43, 0.04),
        0 18px 48px -26px rgba(35, 55, 90, 0.38);
    --glass-shadow-sm:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 1px 2px rgba(22, 29, 43, 0.04),
        0 10px 28px -22px rgba(35, 55, 90, 0.30);
    --glass-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        inset 0 -1px 0 rgba(255, 255, 255, 0.40),
        0 2px 4px rgba(22, 29, 43, 0.05),
        0 24px 62px -28px rgba(35, 55, 90, 0.46);

    --surface-line: rgba(48, 59, 82, 0.11);
    --surface-line-strong: rgba(48, 59, 82, 0.18);
    --surface-hover: rgba(255, 255, 255, 0.70);
    --surface-pressed: rgba(226, 235, 246, 0.82);
    --control-bg: rgba(255, 255, 255, 0.68);
    --control-bg-hover: rgba(255, 255, 255, 0.86);
    --control-border: rgba(64, 76, 104, 0.18);
    --sidebar-width: 258px;

    --bs-body-font-family: var(--font-sans);
    --bs-border-color: var(--surface-line);
}

html, body {
    font-family: var(--font-sans);
    letter-spacing: 0;
}

body {
    background: var(--tint-glow);
    /* Pas de background-attachment:fixed : il force un repaint plein-viewport du
       fond a CHAQUE frame de scroll (cause majeure de saccades). Le degrade reste
       sur le fond du body (scroll-attache) et la couche de texture (body::before)
       est deja en position:fixed, composee une seule fois -> rendu quasi identique,
       scroll nettement plus fluide. */
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 28% 72%, rgba(255, 255, 255, 0.32)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0 1px, rgba(255, 255, 255, 0) 1px 92px);
    opacity: 0.55;
}

h1, h2, h3, h4 {
    letter-spacing: 0;
    font-weight: 650;
}

.sidebar-brand,
.sidebar-link,
.glass-card .card-header,
.card .card-header,
.glass-btn,
.btn,
.metric-card .metric-value,
.glass-metric .metric-value,
.bento-feature .feat-value {
    letter-spacing: 0;
}

.mono,
code,
kbd,
pre {
    font-family: var(--font-mono);
}

main.main {
    /* densite compacte : top 1.35->1rem, bas 3->1.6rem, cotes resserres */
    padding: 1rem clamp(0.9rem, 2.4vw, 2rem) 1.6rem;
}

.sidebar {
    width: var(--sidebar-width);
    padding: 1rem 0.75rem;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.64);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.46)),
        rgba(255, 255, 255, 0.46);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 -1px 0 rgba(255, 255, 255, 0.32),
        0 20px 58px -30px rgba(31, 64, 120, 0.48);
}

.sidebar-brand {
    min-height: 44px;
    padding: 0.3rem 0.6rem 0.85rem;
    font-size: 0.98rem;
}

.sidebar-brand .brand-mark {
    border-radius: 10px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.55),
        0 8px 18px -12px rgba(20, 28, 48, 0.52);
}

.sidebar-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(91, 103, 128, 0.28) transparent;
}

.sidebar-group-title {
    margin-top: 1.35rem;
    color: var(--text-faint);
    letter-spacing: 0.12em;
}

.sidebar-group-title::after {
    background: linear-gradient(90deg, var(--surface-line), transparent);
}

.sidebar-section {
    margin-top: 0.85rem;
}

.sidebar-section-title {
    color: var(--text-faint);
    letter-spacing: 0.09em;
}

.sidebar-link {
    position: relative;
    min-height: 36px;
    padding: 0.5rem 0.68rem;
    border-radius: 13px;
    color: var(--text-muted);
    transition:
        background 170ms ease,
        color 170ms ease,
        box-shadow 170ms ease,
        transform 170ms ease;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.48);
    color: var(--text-strong);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30);
}

.sidebar-link.active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.62)),
        var(--glass-bg-active);
    color: var(--accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 1px 2px rgba(31, 38, 80, 0.05),
        0 9px 24px -18px rgba(10, 132, 255, 0.54);
}

.sidebar-link.active::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 11px;
    bottom: 11px;
    width: 3px;
    border-radius: 999px;
    background: currentColor;
}

.sidebar-user {
    border-top-color: var(--surface-line);
}

.sidebar-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    background: linear-gradient(180deg, #2f8fff, #006ee6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 8px 18px -12px rgba(10, 132, 255, 0.75);
}

/* Avatar unifie d'un collaborateur : photo de profil (<img>) ou vignette generee
   (svg inline), rendu par la fonction Twig `avatar`. La taille est pilotee par
   --avatar-size (barre laterale 34px, board projets 22px, profil 96px, ...). */
.avatar {
    --avatar-size: 34px;
    width: var(--avatar-size);
    height: var(--avatar-size);
    flex: 0 0 var(--avatar-size);
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    background: var(--surface-line, #e6ebf2);
    box-shadow:
        inset 0 0 0 1px rgba(10, 30, 60, 0.06),
        0 6px 16px -12px rgba(10, 132, 255, 0.55);
}
.avatar--gen {
    line-height: 0;
}
.avatar--gen > svg {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.theme-toggle,
.seg,
.glass-segmented {
    background: rgba(120, 130, 150, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.theme-toggle__btn.active,
.seg__btn.active,
.glass-segmented a.active,
.glass-segmented button.active {
    background: rgba(255, 255, 255, 0.82);
    color: var(--accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 1px 2px rgba(21, 28, 44, 0.06),
        0 8px 18px -16px rgba(21, 28, 44, 0.30);
}

.sidebar-logout {
    border-color: var(--surface-line);
    background: rgba(255, 255, 255, 0.26);
}

.glass-hero,
.hero,
.glass-card,
.card,
.panel,
.glass-metric,
.metric-card,
.bento-feature,
.flash-toast,
.modal-content {
    position: relative;
    border: 1px solid var(--glass-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.42)),
        var(--glass-bg-1);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    box-shadow: var(--glass-shadow);
}

.glass-hero::before,
.hero::before,
.glass-card::before,
.card::before,
.panel::before,
.glass-metric::before,
.metric-card::before,
.bento-feature::before,
.modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08) 34%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.20));
    opacity: 0.78;
}

.glass-hero > *,
.hero > *,
.glass-card > *,
.card > *,
.panel > *,
.glass-metric > *,
.metric-card > *,
.bento-feature > *,
.modal-content > * {
    position: relative;
    z-index: 1;
}

.glass-hero,
.hero {
    /* densite compacte : 1.65/1.85 -> 1.05/1.4 */
    padding: 1.05rem 1.4rem;
}

.glass-card:hover,
.card:hover,
.glass-metric:hover,
.metric-card:hover,
.bento-feature:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.50)),
        var(--glass-bg-2);
    box-shadow: var(--glass-shadow-hover);
}

.glass-card .card-header,
.card .card-header {
    min-height: 40px;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--surface-line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
}

.glass-card .card-body,
.card .card-body {
    padding: 0.85rem 1rem;
}

.metric-card,
.glass-metric {
    min-height: 80px;
    padding: 0.8rem 1rem;
}

.metric-card .metric-label,
.glass-metric .metric-label {
    letter-spacing: 0.07em;
}

.metric-card .metric-value,
.glass-metric .metric-value {
    font-size: 1.42rem;
    font-weight: 680;
    letter-spacing: 0;
}

.metric-card .metric-icon,
.glass-metric .metric-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.30)),
        var(--accent-soft);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 10px 22px -18px currentColor;
}

.glass-btn,
.btn {
    min-height: 38px;
    border: 1px solid var(--control-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.60)),
        var(--control-bg);
    color: var(--text-strong);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 1px 2px rgba(21, 28, 44, 0.05),
        0 8px 18px -16px rgba(21, 28, 44, 0.38);
}

.glass-btn:hover,
.btn:hover {
    border-color: rgba(64, 76, 104, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.74)),
        var(--control-bg-hover);
}

.glass-btn:focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.glass-input:focus,
.glass-select:focus {
    outline: none;
    box-shadow:
        0 0 0 4px rgba(10, 132, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.glass-btn.tone-primary,
.btn-primary {
    border-color: rgba(0, 102, 204, 0.28);
    background: linear-gradient(180deg, #248cff, #0071e3);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 12px 26px -18px rgba(0, 113, 227, 0.85);
}

.glass-btn.tone-primary:hover,
.btn-primary:hover {
    background: linear-gradient(180deg, #3a99ff, #0879ed);
    color: #fff;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-danger,
.btn-soft,
.glass-btn.tone-ghost,
.btn-outline-light {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.48)),
        rgba(255, 255, 255, 0.42);
    border-color: var(--control-border);
    color: var(--accent);
}

.btn-outline-secondary {
    color: var(--text-muted);
}

.btn-dark {
    background: linear-gradient(180deg, #303746, #1d2431);
    border-color: rgba(21, 28, 44, 0.60);
    color: #fff;
}

.btn-link {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.btn-sm,
.glass-btn.sm,
.glass-btn-sm {
    min-height: 31px;
    padding: 0.34rem 0.74rem;
    font-size: 0.79rem;
}

.form-control,
.form-select,
.glass-input,
.glass-select,
.action-card__input,
.ts-wrapper .ts-control {
    min-height: 38px;
    border: 1px solid var(--control-border) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.58)),
        var(--control-bg) !important;
    color: var(--text-strong) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
}

.form-control:hover,
.form-select:hover,
.glass-input:hover,
.glass-select:hover {
    background: var(--control-bg-hover) !important;
}

.form-control:focus,
.form-select:focus,
.glass-input:focus,
.glass-select:focus,
.action-card__input:focus,
.ts-wrapper.focus .ts-control {
    border-color: rgba(10, 132, 255, 0.64) !important;
    box-shadow:
        0 0 0 4px rgba(10, 132, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.form-label {
    color: var(--text-faint);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.form-check-input {
    border-color: var(--control-border);
    box-shadow: inset 0 1px 1px rgba(21, 28, 44, 0.04);
}

.table,
.glass-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-strong);
    --bs-table-hover-bg: rgba(10, 132, 255, 0.055);
    color: var(--text-strong);
}

.table > :not(caption) > * > *,
.glass-table > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
    box-shadow: none;
}

.table thead th,
.glass-table thead th {
    position: static;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.26));
    border-bottom: 1px solid var(--surface-line);
    color: var(--text-faint);
    letter-spacing: 0.075em;
}

.table tbody td,
.glass-table tbody td {
    border-bottom: 1px solid rgba(48, 59, 82, 0.075);
}

.table tbody tr:hover td,
.glass-table tbody tr:hover td {
    background: var(--bs-table-hover-bg);
}

.badge,
.badge.tag-pill,
.glass-pill {
    border: 1px solid rgba(255, 255, 255, 0.45);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.24)),
        rgba(48, 59, 82, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

.dropdown-menu,
.ts-dropdown,
.seg-pop {
    border: 1px solid var(--glass-border-hi) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.70)),
        var(--glass-bg-2) !important;
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    box-shadow: var(--glass-shadow-hover) !important;
}

.seg-pop {
    padding: 0.55rem 1rem 0.8rem;
}

.modal-backdrop.show {
    opacity: 0.32;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.modal-content {
    border-radius: 22px;
    overflow: hidden;
}

.modal-header,
.modal-footer {
    border-color: var(--surface-line);
}

.btn-close {
    border-radius: 50%;
    background-color: rgba(120, 130, 150, 0.16);
    opacity: 0.72;
}

.alert,
.empty-state,
.drop-zone,
.action-card,
.glass-details {
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius-md);
    background: rgba(255, 255, 255, 0.48);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow-sm);
}

.drop-zone {
    transition: border-color 170ms ease, background 170ms ease, transform 170ms ease;
}

.drop-zone.dragover,
.drop-zone:hover {
    border-color: rgba(10, 132, 255, 0.40);
    background: rgba(255, 255, 255, 0.64);
}

.dt-container .dt-input,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--control-border) !important;
    border-radius: 11px !important;
    background: var(--control-bg) !important;
}

.dt-container .page-link {
    border-radius: 999px;
    border-color: var(--control-border);
    background: rgba(255, 255, 255, 0.54);
    color: var(--text-muted);
}

.dt-container .active > .page-link,
.page-item.active .page-link {
    background: #0071e3;
    border-color: #0071e3;
}

:root[data-theme="dark"] {
    --bg-app: #080a10;
    --tint-glow:
        linear-gradient(140deg, rgba(10, 132, 255, 0.18) 0%, rgba(0, 0, 0, 0) 34%),
        linear-gradient(42deg, rgba(52, 199, 89, 0.10) 0%, rgba(0, 0, 0, 0) 32%),
        linear-gradient(215deg, rgba(255, 149, 0, 0.10) 0%, rgba(0, 0, 0, 0) 34%),
        linear-gradient(180deg, #10131b 0%, #080a10 58%, #0d1017 100%);
    --text-strong: #f2f4f8;
    --text-muted: #bdc4d0;
    --text-faint: #848d9f;
    --glass-bg-1: rgba(28, 34, 46, 0.54);
    --glass-bg-2: rgba(35, 42, 58, 0.72);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-hi: rgba(255, 255, 255, 0.18);
    --surface-line: rgba(255, 255, 255, 0.085);
    --surface-line-strong: rgba(255, 255, 255, 0.15);
    --surface-hover: rgba(255, 255, 255, 0.08);
    --control-bg: rgba(35, 42, 58, 0.64);
    --control-bg-hover: rgba(44, 52, 70, 0.78);
    --control-border: rgba(255, 255, 255, 0.14);
    --glass-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 24px 58px -30px rgba(0, 0, 0, 0.75);
    --glass-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05),
        0 2px 4px rgba(0, 0, 0, 0.20),
        0 30px 70px -32px rgba(0, 0, 0, 0.86);
}

[data-theme="dark"] body::before {
    opacity: 0.28;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 32% 68%, rgba(255, 255, 255, 0.06)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, rgba(255, 255, 255, 0) 1px 96px);
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] .glass-hero,
[data-theme="dark"] .hero,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .glass-metric,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .bento-feature,
[data-theme="dark"] .flash-toast,
[data-theme="dark"] .modal-content {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
        var(--glass-bg-1);
}

[data-theme="dark"] .glass-hero::before,
[data-theme="dark"] .hero::before,
[data-theme="dark"] .glass-card::before,
[data-theme="dark"] .card::before,
[data-theme="dark"] .panel::before,
[data-theme="dark"] .glass-metric::before,
[data-theme="dark"] .metric-card::before,
[data-theme="dark"] .bento-feature::before,
[data-theme="dark"] .modal-content::before {
    opacity: 0.35;
}

[data-theme="dark"] .sidebar-link:hover,
[data-theme="dark"] .sidebar-link.active,
[data-theme="dark"] .theme-toggle__btn.active,
[data-theme="dark"] .seg__btn.active,
[data-theme="dark"] .glass-segmented a.active,
[data-theme="dark"] .glass-segmented button.active {
    background: rgba(255, 255, 255, 0.09);
}

[data-theme="dark"] .glass-btn,
[data-theme="dark"] .btn,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .glass-input,
[data-theme="dark"] .glass-select,
[data-theme="dark"] .action-card__input,
[data-theme="dark"] .ts-wrapper .ts-control {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)),
        var(--control-bg) !important;
    color: var(--text-strong) !important;
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .glass-table thead th {
    background: rgba(255, 255, 255, 0.035);
}

[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .ts-dropdown,
[data-theme="dark"] .seg-pop {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
        var(--glass-bg-2) !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

@media (max-width: 992px) {
    .sidebar {
        width: 68px;
        padding: 0.85rem 0.45rem;
    }

    .sidebar-group-title {
        display: none;
    }

    .sidebar-link {
        justify-content: center;
        gap: 0;
        padding: 0.55rem 0;
        font-size: 0;
    }

    .sidebar-link i {
        font-size: 1.06rem;
        margin: 0;
    }

    .sidebar-link.active::before {
        left: 4px;
        top: 12px;
        bottom: 12px;
    }

    .sidebar-user-avatar {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: min(86vw, 320px);
        border-radius: 0 24px 24px 0;
    }

    .sidebar-group-title {
        display: flex;
    }

    .sidebar-link {
        justify-content: flex-start;
        gap: 0.55rem;
        padding: 0.5rem 0.68rem;
        font-size: 0.9rem;
    }

    .sidebar-link i {
        font-size: 0.98rem;
    }

    .hero,
    .glass-hero {
        padding: 1.2rem;
    }

    .stepper {
        flex-direction: column;
        gap: 0.55rem;
    }
}

/* =====================================================================
   Apple-native polish
   ---------------------------------------------------------------------
   Deuxieme passe : moins "dashboard vitrine", plus application native.
   Materiaux plus hierarchises, source list macOS, login vibrant, controles
   calmes et fond wallpaper sans trame decorative.
===================================================================== */
:root {
    --material-ultra-thin:
        linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.24)),
        rgba(255, 255, 255, 0.30);
    --material-thin:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.36)),
        rgba(255, 255, 255, 0.42);
    --material-regular:
        linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.52)),
        rgba(255, 255, 255, 0.54);
    --material-thick:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.68)),
        rgba(255, 255, 255, 0.70);
    --native-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 1px 1px rgba(19, 27, 43, 0.035),
        0 20px 42px -30px rgba(36, 54, 84, 0.42);
    --native-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        0 1px 2px rgba(19, 27, 43, 0.045),
        0 24px 50px -32px rgba(36, 54, 84, 0.48);
    --native-control-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        inset 0 -1px 0 rgba(22, 29, 43, 0.04),
        0 1px 1px rgba(19, 27, 43, 0.035);
    --source-list-hover: rgba(255, 255, 255, 0.46);
    --source-list-active: rgba(255, 255, 255, 0.74);
    --selection-blue: #0071e3;
    --selection-blue-hover: #147ce5;
}

body {
    background:
        linear-gradient(116deg, rgba(88, 86, 214, 0.14) 0%, rgba(88, 86, 214, 0) 34%),
        linear-gradient(244deg, rgba(0, 199, 190, 0.11) 0%, rgba(0, 199, 190, 0) 38%),
        linear-gradient(22deg, rgba(255, 204, 0, 0.10) 0%, rgba(255, 204, 0, 0) 36%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fa 45%, #f7f8fb 100%);
}

body::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0) 24% 76%, rgba(255, 255, 255, 0.42)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0) 42%);
    opacity: 0.68;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 18%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 18% 82%, rgba(255, 255, 255, 0.12));
    mix-blend-mode: screen;
}

main.main {
    padding-top: 1.15rem;
}

.sidebar {
    width: var(--sidebar-width);
    padding: 0.8rem 0.62rem;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.30)),
        rgba(245, 249, 255, 0.34);
    border-color: rgba(255, 255, 255, 0.58);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        inset 0 -1px 0 rgba(255, 255, 255, 0.26),
        0 18px 46px -32px rgba(28, 51, 92, 0.54);
}

.sidebar-brand {
    min-height: 42px;
    padding: 0.25rem 0.62rem 0.72rem;
    font-size: 0.96rem;
    font-weight: 590;
}

.sidebar-brand .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.sidebar-group-title {
    margin: 1.15rem 0 0.12rem;
    padding: 0 0.66rem;
    font-size: 0.65rem;
    font-weight: 590;
    letter-spacing: 0.11em;
    color: rgba(42, 52, 70, 0.82);
}

.sidebar-group-title::after {
    opacity: 0.72;
    background: linear-gradient(90deg, rgba(42, 52, 70, 0.22), rgba(42, 52, 70, 0.04));
}

.sidebar-section {
    margin-top: 0.68rem;
}

.sidebar-section-title {
    padding-inline: 0.66rem;
    font-size: 0.64rem;
    font-weight: 540;
    color: rgba(79, 90, 109, 0.68);
}

.sidebar-link {
    min-height: 32px;
    margin: 2px 0;
    padding: 0.36rem 0.62rem;
    border-radius: 10px;
    color: rgba(30, 38, 54, 0.78);
    font-size: 0.88rem;
    font-weight: 450;
    box-shadow: none;
}

.sidebar-link i {
    width: 19px;
    font-size: 0.98rem;
    color: var(--selection-blue);
    opacity: 0.88;
    text-align: center;
}

.sidebar-link:hover {
    background: var(--source-list-hover);
    color: var(--text-strong);
    box-shadow: none;
}

.sidebar-link.active {
    background: var(--source-list-active);
    color: var(--text-strong);
    font-weight: 500;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.68),
        0 1px 1px rgba(21, 28, 44, 0.04);
}

.sidebar-link.active::before {
    display: none;
}

.sidebar-link.active i {
    color: var(--selection-blue);
}

.sidebar-user {
    padding: 0.72rem 0.16rem 0;
}

.theme-toggle,
.seg,
.glass-segmented {
    border-radius: 10px;
    background: rgba(105, 115, 132, 0.12);
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: inset 0 1px 1px rgba(20, 28, 44, 0.055);
}

.theme-toggle__btn,
.seg__btn,
.glass-segmented a,
.glass-segmented button {
    border-radius: 8px;
}

.theme-toggle__btn.active,
.seg__btn.active,
.glass-segmented a.active,
.glass-segmented button.active {
    background: rgba(255, 255, 255, 0.78);
    color: var(--text-strong);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 1px 2px rgba(21, 28, 44, 0.075);
}

.hero,
.glass-hero {
    border-radius: 24px;
    padding: 1.42rem 1.58rem;
    background: var(--material-thin);
    border-color: rgba(255, 255, 255, 0.66);
    box-shadow: var(--native-shadow);
}

.hero h1,
.hero h2,
.glass-hero h1,
.glass-hero h2 {
    font-weight: 680;
}

.hero p,
.glass-hero p {
    color: rgba(37, 47, 65, 0.72);
}

.card,
.glass-card,
.panel,
.metric-card,
.glass-metric,
.bento-feature,
.flash-toast,
.modal-content {
    background: var(--material-regular);
    border-color: rgba(255, 255, 255, 0.68);
    box-shadow: var(--native-shadow);
}

.card:hover,
.glass-card:hover,
.metric-card:hover,
.glass-metric:hover,
.bento-feature:hover {
    transform: none;
    background: var(--material-thick);
    box-shadow: var(--native-shadow-hover);
}

.card::before,
.glass-card::before,
.panel::before,
.metric-card::before,
.glass-metric::before,
.hero::before,
.glass-hero::before,
.bento-feature::before,
.modal-content::before {
    opacity: 0.46;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16));
}

.card .card-header,
.glass-card .card-header {
    min-height: 44px;
    padding: 0.82rem 1rem;
    font-size: 0.94rem;
    font-weight: 650;
    border-bottom-color: rgba(60, 72, 96, 0.10);
    background: rgba(255, 255, 255, 0.16);
}

.card .card-body,
.glass-card .card-body {
    padding: 1rem;
}

.metric-card,
.glass-metric {
    min-height: 102px;
    border-radius: 20px;
}

.metric-card .metric-label,
.glass-metric .metric-label {
    color: rgba(79, 90, 109, 0.78);
    font-size: 0.66rem;
    letter-spacing: 0.065em;
}

.metric-card .metric-value,
.glass-metric .metric-value {
    font-size: 1.62rem;
    font-weight: 700;
}

.metric-card .metric-icon,
.glass-metric .metric-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.44);
}

.btn,
.glass-btn {
    min-height: 36px;
    padding: 0.48rem 0.98rem;
    border-radius: 12px;
    background: var(--material-thick);
    border-color: rgba(80, 92, 120, 0.16);
    box-shadow: var(--native-control-shadow);
    font-weight: 560;
}

.btn:hover,
.glass-btn:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72)),
        rgba(255, 255, 255, 0.74);
    transform: none;
    box-shadow: var(--native-control-shadow);
}

.btn:active,
.glass-btn:active {
    transform: translateY(1px);
    background: var(--surface-pressed);
}

/* Bouton sombre (banniere d'impersonation, etc.) : declare APRES les regles
   generiques .btn ci-dessus, sinon le fond clair de .btn (et la regle dark
   en !important) gagne tout en gardant le texte blanc -> blanc sur blanc. */
.btn-dark,
.btn-dark:focus,
.btn-dark:active,
[data-theme="dark"] .btn-dark {
    background: linear-gradient(180deg, #303746, #1d2431) !important;
    border-color: rgba(21, 28, 44, 0.60) !important;
    color: #fff !important;
}

.btn-dark:hover,
[data-theme="dark"] .btn-dark:hover {
    background: linear-gradient(180deg, #3a4255, #242c3b) !important;
    border-color: rgba(21, 28, 44, 0.72) !important;
    color: #fff !important;
}

.btn-primary,
.glass-btn.tone-primary {
    border-color: rgba(0, 102, 204, 0.24);
    background: linear-gradient(180deg, var(--selection-blue-hover), var(--selection-blue));
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 9px 20px -16px rgba(0, 113, 227, 0.72);
}

.btn-primary:hover,
.glass-btn.tone-primary:hover {
    background: linear-gradient(180deg, #2388ee, #0879dc);
    color: #fff;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-danger,
.btn-soft,
.glass-btn.tone-ghost,
.btn-outline-light {
    background: rgba(255, 255, 255, 0.48);
    color: var(--text-strong);
}

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

.glass-btn.tone-danger,
.btn-danger {
    border-color: rgba(255, 59, 48, 0.24);
    background: linear-gradient(180deg, #ff453a, #d92d24);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 9px 20px -16px rgba(255, 59, 48, 0.68);
}

.glass-btn.tone-danger:hover,
.btn-danger:hover {
    background: linear-gradient(180deg, #ff5a50, #e0332a);
    color: #fff;
}

.form-control,
.form-select,
.glass-input,
.glass-select,
.action-card__input,
.ts-wrapper .ts-control {
    min-height: 38px;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.58)),
        rgba(255, 255, 255, 0.62) !important;
    border-color: rgba(72, 84, 108, 0.20) !important;
    box-shadow:
        inset 0 1px 1px rgba(21, 28, 44, 0.035),
        0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

.form-control:focus,
.form-select:focus,
.glass-input:focus,
.glass-select:focus,
.action-card__input:focus,
.ts-wrapper.focus .ts-control {
    border-color: rgba(0, 113, 227, 0.56) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow:
        0 0 0 3px rgba(0, 113, 227, 0.18),
        inset 0 1px 1px rgba(21, 28, 44, 0.035) !important;
}

.form-label {
    font-size: 0.67rem;
    color: rgba(79, 90, 109, 0.78);
}

.table thead th,
.glass-table thead th {
    background: rgba(255, 255, 255, 0.20);
    color: rgba(79, 90, 109, 0.74);
    border-bottom-color: rgba(60, 72, 96, 0.10);
}

.table tbody td,
.glass-table tbody td {
    border-bottom-color: rgba(60, 72, 96, 0.07);
}

.table tbody tr:hover td,
.glass-table tbody tr:hover td {
    background: rgba(0, 113, 227, 0.045);
}

.badge,
.badge.tag-pill,
.glass-pill {
    background: rgba(255, 255, 255, 0.50);
    border-color: rgba(255, 255, 255, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

.dropdown-menu,
.ts-dropdown,
.seg-pop {
    border-radius: 16px !important;
    background: var(--material-thick) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.70),
        0 22px 54px -28px rgba(24, 36, 58, 0.54) !important;
}

.modal-content {
    border-radius: 24px;
}

.modal-backdrop.show {
    opacity: 0.24;
}

.alert,
.empty-state,
.drop-zone,
.action-card,
.glass-details {
    background: var(--material-thin);
    border-color: rgba(255, 255, 255, 0.58);
}

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

.auth-body::before,
.auth-body::after {
    z-index: 0;
}

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 32px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.70);
    background: var(--material-thick);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        0 26px 70px -36px rgba(24, 36, 58, 0.62);
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.10) 36%, rgba(255, 255, 255, 0)),
        linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.18));
}

.auth-card > * {
    position: relative;
    z-index: 1;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.55rem;
    color: var(--text-strong);
    font-size: 1rem;
    font-weight: 680;
}

.auth-brand .mark {
    width: 36px;
    height: 36px;
    display: flex;
    overflow: hidden;
    border-radius: 11px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 10px 24px -18px rgba(21, 28, 44, 0.76);
}

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

.auth-card hr {
    border-color: rgba(60, 72, 96, 0.14);
    opacity: 1;
}

:root[data-theme="dark"] {
    --material-ultra-thin:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
        rgba(23, 28, 39, 0.34);
    --material-thin:
        linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.030)),
        rgba(25, 31, 43, 0.48);
    --material-regular:
        linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.040)),
        rgba(28, 35, 48, 0.58);
    --material-thick:
        linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.052)),
        rgba(34, 41, 56, 0.74);
    --source-list-hover: rgba(255, 255, 255, 0.075);
    --source-list-active: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] body {
    background:
        linear-gradient(116deg, rgba(88, 86, 214, 0.16) 0%, rgba(88, 86, 214, 0) 34%),
        linear-gradient(244deg, rgba(0, 199, 190, 0.12) 0%, rgba(0, 199, 190, 0) 38%),
        linear-gradient(22deg, rgba(255, 204, 0, 0.08) 0%, rgba(255, 204, 0, 0) 36%),
        linear-gradient(180deg, #111620 0%, #080a10 58%, #10131a 100%);
}

[data-theme="dark"] body::after {
    opacity: 0.28;
    mix-blend-mode: normal;
}

[data-theme="dark"] .sidebar {
    background: var(--material-thin);
    border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .sidebar-group-title,
[data-theme="dark"] .sidebar-section-title,
[data-theme="dark"] .form-label,
[data-theme="dark"] .metric-card .metric-label,
[data-theme="dark"] .glass-metric .metric-label {
    color: rgba(189, 196, 208, 0.70);
}

[data-theme="dark"] .sidebar-group-title {
    color: rgba(226, 232, 242, 0.78);
}

[data-theme="dark"] .sidebar-group-title::after {
    background: linear-gradient(90deg, rgba(226, 232, 242, 0.20), rgba(226, 232, 242, 0.035));
}

[data-theme="dark"] .sidebar-link {
    color: rgba(242, 244, 248, 0.78);
}

[data-theme="dark"] .sidebar-link i {
    color: #66aaff;
}

[data-theme="dark"] .hero p,
[data-theme="dark"] .glass-hero p {
    color: rgba(242, 244, 248, 0.68);
}

[data-theme="dark"] .card,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .panel,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .glass-metric,
[data-theme="dark"] .bento-feature,
[data-theme="dark"] .flash-toast,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .auth-card {
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-success,
[data-theme="dark"] .btn-outline-warning,
[data-theme="dark"] .btn-outline-info,
[data-theme="dark"] .btn-outline-danger,
[data-theme="dark"] .btn-soft,
[data-theme="dark"] .glass-btn.tone-ghost,
[data-theme="dark"] .btn-outline-light {
    background: rgba(255, 255, 255, 0.065);
    color: var(--text-strong);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .glass-input,
[data-theme="dark"] .glass-select,
[data-theme="dark"] .action-card__input,
[data-theme="dark"] .ts-wrapper .ts-control {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.060) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .glass-input:focus,
[data-theme="dark"] .glass-select:focus,
[data-theme="dark"] .action-card__input:focus,
[data-theme="dark"] .ts-wrapper.focus .ts-control {
    background: rgba(255, 255, 255, 0.085) !important;
}

@media (max-width: 992px) {
    .sidebar {
        width: 68px;
        border-radius: 24px;
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: min(86vw, 320px);
        border-radius: 0 24px 24px 0;
    }

    .auth-card {
        padding: 26px;
        border-radius: 24px;
    }
}

/* =====================================================================
   Centre de notifications « À faire »
   - .sidebar-notif  : lien dans la barre (sous le nom), avec pastille.
   - .notif-*        : page /notifications (groupes + items).
   Sévérités partagées : critique (rouge) / haute (orange) / normale (bleu) / info.
   Couleurs via variables -> s'adaptent au thème clair/sombre automatiquement.
   ===================================================================== */
.sidebar-notif {
    position: relative;
    width: 100%;
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    background: transparent;
    border: 0.5px solid rgba(40, 55, 95, 0.12);
    border-radius: 9px;
    transition: background 0.15s, color 0.15s;
}
.sidebar-notif i { font-size: 0.95rem; opacity: 0.8; }
.sidebar-notif:hover { background: var(--glass-bg-active); color: var(--accent); }
.sidebar-notif.active { background: var(--glass-bg-active); color: var(--accent); }
.sidebar-notif.has-notif i { color: var(--danger); opacity: 1; }
.notif-badge {
    margin-left: auto;
    min-width: 1.25rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.7rem; font-weight: 700; line-height: 1.3;
    text-align: center;
    color: #fff;
    background: var(--danger);
    border-radius: 999px;
}
/* Barre repliée (icônes seules) : la pastille reste visible, en coin de la cloche. */
@media (max-width: 992px) {
    .sidebar-notif { justify-content: center; }
    .sidebar-notif span:not(.notif-badge) { display: none; }
    .notif-badge {
        position: absolute;
        top: -4px; right: -4px;
        margin: 0;
        min-width: 1.05rem;
        padding: 0.02rem 0.28rem;
        font-size: 0.62rem;
        box-shadow: 0 0 0 2px var(--bg-elevated);
    }
}

/* ---- Page /notifications ---- */
.notif-total {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    font-weight: 700; font-size: 1.05rem;
    color: #fff;
    background: var(--accent-grad, var(--accent));
    border-radius: 999px;
}
.notif-group { padding: 0; overflow: hidden; }
.notif-group-head {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--glass-border);
}
.notif-group-title { font-weight: 600; display: inline-flex; align-items: center; gap: 0.45rem; }
.notif-group-title i { color: var(--accent); }
.notif-group-n {
    min-width: 1.4rem; padding: 0.05rem 0.45rem;
    font-size: 0.72rem; font-weight: 700; text-align: center;
    color: #fff; background: var(--text-faint); border-radius: 999px;
}
.notif-group-link { font-size: 0.8rem; color: var(--text-faint); white-space: nowrap; }
.notif-group-link:hover { color: var(--accent); }
.notif-list { display: flex; flex-direction: column; }
.notif-item {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.7rem 1.1rem;
    color: var(--text-strong);
    border-top: 1px solid rgba(40, 55, 95, 0.06);
    transition: background 0.12s;
}
.notif-item:first-child { border-top: 0; }
.notif-item:hover { background: var(--glass-bg-active); }
.notif-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); }
.notif-item-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.notif-item-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-item-detail { font-size: 0.78rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-item-date { font-size: 0.76rem; color: var(--text-faint); white-space: nowrap; }
.notif-tag {
    font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.45rem;
    border-radius: 6px; white-space: nowrap;
    color: var(--text-muted); background: rgba(40, 55, 95, 0.08);
}
.notif-chevron { color: var(--text-faint); opacity: 0.6; }
.notif-item-more .notif-item-title { font-size: 0.82rem; }

/* Acquittement des alertes SLA (additif). Bouton « masquer » par item + « Tout masquer » par groupe. */
.notif-group-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 0.6rem; }
.notif-dismiss-form { flex: 0 0 auto; margin: 0; line-height: 0; }
.notif-dismiss-btn {
    border: 0; background: none; cursor: pointer;
    color: var(--text-faint); padding: 0.2rem 0.4rem; border-radius: 6px;
    font-size: 0.82rem; line-height: 1;
}
.notif-dismiss-btn:hover { color: var(--danger); background: var(--danger-soft); }
.notif-dismiss-all-btn {
    border: 1px solid var(--glass-border); background: none; cursor: pointer;
    color: var(--text-muted); padding: 0.18rem 0.55rem; border-radius: 7px;
    font-size: 0.76rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.25rem;
}
.notif-dismiss-all-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Sévérités : colore la pastille de groupe, le point et le tag de l'item. */
.notif-sev-critique.notif-group-n,
.notif-dot.notif-sev-critique           { background: var(--danger); }
.notif-tag.notif-sev-critique           { color: var(--danger); background: var(--danger-soft); }
.notif-sev-haute.notif-group-n,
.notif-dot.notif-sev-haute              { background: var(--warn); }
.notif-tag.notif-sev-haute              { color: var(--warn); background: rgba(255, 149, 0, 0.14); }
.notif-sev-normale.notif-group-n,
.notif-dot.notif-sev-normale            { background: var(--accent); }
.notif-tag.notif-sev-normale            { color: var(--accent); background: var(--accent-soft); }
.notif-dot.notif-sev-info               { background: var(--text-faint); }

/* =====================================================================
   Page unifiée « Mes tâches & alertes » (fusion de Mes tâches + Notifications)
   Code couleur : TÂCHES = bleu (accent, « à faire ») / ALERTES = rouge-ambre
   (pilotage, urgence). Deux icônes distinctes dans la barre, deux sections
   color-codées sur la page.
   ===================================================================== */

/* ---- Pastilles de saut rapide dans le hero ---- */
.notif-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    font-weight: 700; font-size: 0.85rem;
    color: #fff; border-radius: 999px;
}
.notif-pill:hover { color: #fff; filter: brightness(1.08); }
.notif-pill-tasks  { background: var(--accent); }
.notif-pill-alerts { background: var(--danger); }

/* ---- Sections de la page ---- */
.notif-section { scroll-margin-top: 1rem; }
.notif-section-head {
    display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
    padding: 0 0.15rem 0.6rem;
    margin-bottom: 0.7rem;
    border-bottom: 2px solid var(--glass-border);
}
.notif-section-title {
    font-weight: 700; font-size: 1.02rem;
    display: inline-flex; align-items: center; gap: 0.5rem;
}
.notif-section-sub { font-size: 0.8rem; color: var(--text-faint); }
.notif-section-n {
    margin-left: auto;
    min-width: 1.55rem; padding: 0.1rem 0.55rem;
    font-size: 0.78rem; font-weight: 700; text-align: center;
    color: #fff; background: var(--text-faint); border-radius: 999px;
}
.notif-section-empty { opacity: 0.85; }
.notif-section-tasks  .notif-section-title i { color: var(--accent); }
.notif-section-tasks  .notif-section-head    { border-bottom-color: var(--accent); }
.notif-section-tasks  .notif-section-n       { background: var(--accent); }
.notif-section-alerts .notif-section-title i { color: var(--danger); }
.notif-section-alerts .notif-section-head    { border-bottom-color: var(--danger); }
.notif-section-alerts .notif-section-n       { background: var(--danger); }

/* ---- Tranches par échéance de « Mes tâches » (segmentation par semaine) ----
   Chaque carte = une tranche temporelle (en retard / aujourd'hui / cette semaine
   / la semaine prochaine / plus tard / sans échéance). Un liseré de gauche +
   l'icône donnent un dégradé d'urgence ; le compteur prend la couleur de gravité. */
.notif-bucket { padding: 0; overflow: hidden; }
.notif-bucket-head {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.65rem 1.1rem;
    border-bottom: 1px solid var(--glass-border);
    border-left: 4px solid var(--text-faint);
}
.notif-bucket-title {
    font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 0.45rem;
    color: var(--text-strong);
}
.notif-bucket-n {
    margin-left: auto;
    min-width: 1.4rem; padding: 0.05rem 0.45rem;
    font-size: 0.72rem; font-weight: 700; text-align: center;
    color: #fff; background: var(--text-faint); border-radius: 999px;
}
.notif-sev-critique.notif-bucket-n { background: var(--danger); }
.notif-sev-haute.notif-bucket-n    { background: var(--warn); }
.notif-sev-normale.notif-bucket-n  { background: var(--accent); }

.notif-bucket-retard            .notif-bucket-head    { border-left-color: var(--danger); }
.notif-bucket-retard            .notif-bucket-title i { color: var(--danger); }
.notif-bucket-aujourdhui        .notif-bucket-head    { border-left-color: var(--warn); }
.notif-bucket-aujourdhui        .notif-bucket-title i { color: var(--warn); }
.notif-bucket-cette_semaine     .notif-bucket-head    { border-left-color: var(--accent); }
.notif-bucket-cette_semaine     .notif-bucket-title i { color: var(--accent); }
.notif-bucket-semaine_prochaine .notif-bucket-head    { border-left-color: var(--accent); }
.notif-bucket-semaine_prochaine .notif-bucket-title i { color: var(--accent); }
.notif-bucket-plus_tard         .notif-bucket-head    { border-left-color: var(--text-faint); }
.notif-bucket-plus_tard         .notif-bucket-title i { color: var(--text-faint); }
.notif-bucket-sans_echeance     .notif-bucket-head    { border-left-color: var(--text-faint); }
.notif-bucket-sans_echeance     .notif-bucket-title i { color: var(--text-faint); }

/* Badge rappelant le module d'origine d'une tâche (une fois les items mêlés par date). */
.notif-src {
    flex: 0 0 auto; white-space: nowrap;
    font-size: 0.7rem; font-weight: 600;
    color: var(--text-muted); background: rgba(40, 55, 95, 0.07);
    padding: 0.1rem 0.5rem; border-radius: 6px;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.notif-src i { font-size: 0.78rem; opacity: 0.8; }

/* ===== Pastilles d'indicateurs internes (Documentation) ===== */
/* Marqueur rond posé manuellement par l'équipe : vide = anneau, rempli = couleur. */
.doc-badge {
    display: inline-block; width: 11px; height: 11px;
    border-radius: 50%; vertical-align: middle; box-sizing: border-box;
    padding: 0; appearance: none; -webkit-appearance: none;
    background: transparent; border: 1.5px solid var(--glass-border, rgba(127, 127, 127, 0.5));
}
.doc-badge-rouge { background: #e5484d; border-color: #e5484d; }
.doc-badge-verte { background: #30a46c; border-color: #30a46c; }
.doc-badge-bleu  { background: #3b82f6; border-color: #3b82f6; }
.hudu-badge-btn { line-height: 1; }

/* Petit menu de choix de couleur (ouvert au clic, positionné en JS). */
.hudu-badge-menu {
    position: absolute; z-index: 1080;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 11px; border-radius: 10px;
    background: var(--glass-bg-1, #fff);
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.12));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
    -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong);
}
.hudu-badge-menu .doc-badge { width: 18px; height: 18px; cursor: pointer; transition: transform 0.1s ease; }
.hudu-badge-menu .doc-badge:hover { transform: scale(1.18); }
.hudu-badge-menu .hudu-badge-remove {
    border: none; background: transparent; cursor: pointer;
    font-size: 1.1rem; line-height: 1; padding: 0 2px;
    color: var(--text-muted, #888);
}

/* Etoile "favori" (Documentation) : pleine = doree quand l'element est en favori. */
.hudu-favori-btn.is-fav,
.hudu-favori-btn .bi-star-fill { color: #f5a623; }

/* =====================================================================
   Recherche globale (champ de la barre laterale + page /recherche).
   Materiau reutilise des tokens glass existants (--glass-bg-2, --accent,
   --text-*, --border-strong) : s'adapte donc seul au theme sombre.
   Ajout SCOPE : ne modifie aucun style existant.
   ===================================================================== */
.sidebar-search {
    position: relative;
    margin: 0 0.15rem 0.35rem;
}
.sidebar-search-icon {
    position: absolute;
    left: 0.6rem; top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: var(--text-faint);
    pointer-events: none;
}
.sidebar-search-input {
    width: 100%;
    padding: 0.42rem 1.9rem 0.42rem 1.85rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--glass-radius-sm, 12px);
    background: rgba(255, 255, 255, 0.55);
    color: var(--text-strong);
    font-size: 0.85rem;
    line-height: 1.2;
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.sidebar-search-input::placeholder { color: var(--text-faint); }
.sidebar-search-input:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
/* indice clavier "/" — masque des qu'on tape ou au focus */
.sidebar-search-kbd {
    position: absolute;
    right: 0.55rem; top: 50%;
    transform: translateY(-50%);
    padding: 0.02rem 0.34rem;
    font-size: 0.66rem; font-weight: 600; line-height: 1.4;
    color: var(--text-faint);
    background: rgba(120, 130, 150, 0.12);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.sidebar-search-input:focus ~ .sidebar-search-kbd,
.sidebar-search.has-text .sidebar-search-kbd { opacity: 0; }

/* Menu deroulant des suggestions */
.sidebar-search-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    z-index: 1200;
    max-height: min(60vh, 460px);
    overflow-y: auto;
    padding: 0.3rem;
    background: var(--glass-bg-2);
    -webkit-backdrop-filter: var(--glass-blur, blur(30px) saturate(190%));
    backdrop-filter: var(--glass-blur, blur(30px) saturate(190%));
    border: 1px solid var(--border-strong);
    border-radius: var(--glass-radius-sm, 12px);
    box-shadow: var(--glass-shadow, 0 12px 32px rgba(20, 28, 60, 0.18));
}
.sidebar-search-group-title {
    padding: 0.4rem 0.5rem 0.2rem;
    font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-faint);
}
.sidebar-search-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.5rem;
    border-radius: 9px;
    color: var(--text-strong);
    text-decoration: none;
    cursor: pointer;
}
.sidebar-search-item:hover,
.sidebar-search-item.is-active {
    background: var(--accent-soft);
    color: var(--accent);
}
.sidebar-search-item-body { min-width: 0; flex: 1; }
.sidebar-search-item-ic { flex: none; font-size: 0.9rem; color: var(--text-faint); }
.sidebar-search-item.is-active .sidebar-search-item-ic { color: inherit; }
.sidebar-search-item-title {
    display: block;
    font-size: 0.82rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-search-item-sub {
    display: block;
    font-size: 0.72rem;
    color: var(--text-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-search-item.is-active .sidebar-search-item-sub { color: inherit; opacity: 0.8; }
.sidebar-search-item-badge {
    flex: none;
    font-size: 0.64rem; font-weight: 600;
    padding: 0.04rem 0.36rem;
    border-radius: 999px;
    color: var(--text-muted);
    background: rgba(120, 130, 150, 0.14);
}
.sidebar-search-empty,
.sidebar-search-hint {
    padding: 0.7rem 0.6rem;
    font-size: 0.78rem;
    color: var(--text-faint);
    text-align: center;
}
.sidebar-search-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0.2rem;
    padding: 0.45rem 0.5rem;
    border-top: 1px solid var(--border-strong);
    font-size: 0.78rem; font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    border-radius: 0 0 8px 8px;
}
.sidebar-search-all:hover { background: var(--accent-soft); }

/* ----- Page /recherche ----- */
.search-page-form { position: relative; min-width: min(280px, 60vw); }
.search-page-form .bi-search {
    position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%);
    color: var(--text-faint); pointer-events: none;
}
.search-page-form input {
    width: 100%;
    padding: 0.55rem 0.9rem 0.55rem 2.1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--glass-radius-sm, 12px);
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-strong);
    font-size: 0.92rem;
    outline: none;
}
.search-page-form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-scope-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.12rem 0.6rem;
    font-size: 0.78rem; font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
}
.search-scope-clear {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin-left: 0.5rem;
    font-size: 0.78rem; color: var(--text-faint); text-decoration: none;
}
.search-scope-clear:hover { color: var(--accent); }
.search-group-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border-strong);
}
.search-group-title { font-weight: 600; color: var(--text-strong); }
.search-group-title i { color: var(--accent); margin-right: 0.35rem; }
.search-group-n {
    margin-left: auto;
    min-width: 1.4rem; text-align: center;
    padding: 0.05rem 0.5rem;
    font-size: 0.74rem; font-weight: 700;
    color: var(--text-muted);
    background: rgba(120, 130, 150, 0.14);
    border-radius: 999px;
}
.search-list { padding: 0.4rem; }
.search-result {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    color: var(--text-strong);
    text-decoration: none;
}
.search-result:hover { background: var(--accent-soft); color: var(--accent); }
.search-result-main { min-width: 0; flex: 1; }
.search-result-title {
    display: block; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-sub {
    display: block; font-size: 0.82rem; color: var(--text-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result:hover .search-result-sub { color: inherit; opacity: 0.85; }
.search-result-badge {
    flex: none;
    font-size: 0.72rem; font-weight: 600;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    color: var(--text-muted);
    background: rgba(120, 130, 150, 0.14);
}
.search-result-go { flex: none; font-size: 1.1rem; color: var(--text-faint); }
.search-result:hover .search-result-go { color: var(--accent); }

/* ============================================================
   CRM - Vente croisee
   La page peut afficher jusqu'a 200 lignes. Le flou de fond applique a
   une grande carte/table force beaucoup de repaint au scroll ; ici on garde
   le rendu clair, mais on remplace le materiau glass par une surface opaque.
   ============================================================ */
.crm-crosssell-page .glass-card {
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    contain: paint;
}
.crm-crosssell-page .glass-card:hover {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--native-shadow);
}
.crm-crosssell-page .glass-card::before {
    display: none;
}
.crm-crosssell-page .glass-table thead th,
.crm-crosssell-page .glass-table tbody td {
    background-color: transparent;
}
.crm-crosssell-page .glass-table tbody tr {
    transition: none;
}
.crm-crosssell-page .glass-pill {
    box-shadow: none;
}
[data-theme="dark"] .crm-crosssell-page .glass-card {
    background: rgba(31, 37, 49, 0.96);
}
[data-theme="dark"] .crm-crosssell-page .glass-card:hover {
    background: rgba(37, 44, 58, 0.98);
}

/* ============================================================
   Annonces globales (bandeaux haut de page, /admin/annonce).
   Fond PLEIN et colore par niveau, texte blanc : volontairement
   bien plus visible que la carte « verre » (la surcharge glass de
   .alert applique sinon un fond blanc translucide qui aplatit
   toutes les couleurs). La specificite .app-announce.alert-* (deux
   classes) bat .alert (une classe) — donc pas besoin de !important.
   Cf. templates/layouts/base.html.twig et l'apercu de
   templates/admin/annonce.html.twig.
   ============================================================ */
.app-announce-stack {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.app-announce.alert {
    border: none;
    border-radius: var(--glass-radius-md, 16px);
    padding: 0.95rem 1.15rem;
    color: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 14px 34px -14px rgba(20, 24, 40, 0.55);
}
/* Le texte et les liens passent en blanc pour rester lisibles sur fond plein. */
.app-announce.alert,
.app-announce.alert strong,
.app-announce.alert a { color: #fff; }
.app-announce.alert a { text-decoration: underline; }
.app-announce__icon { font-size: 1.6rem; }
.app-announce__title { font-size: 1.02rem; letter-spacing: 0.01em; margin-bottom: 0.1rem; }
/* Croix de fermeture : juste un X blanc discret, sans pastille (le fond colore
   suffit). On neutralise la pastille grise globale de .btn-close ; le X garde la
   taille naturelle Bootstrap (1em) pour ne pas deformer le SVG de fond. */
.app-announce.alert .btn-close {
    flex: none;
    width: 0.75em;
    height: 0.75em;
    background-size: 0.75em;
    padding: 0.35rem;
    /* Decalee vers l'interieur (~22px) pour sortir du coin arrondi du bloc. */
    margin: 1.4rem 1.4rem auto 0.6rem;
    background-color: transparent;
    border-radius: 6px;
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 0.6;
}
.app-announce.alert .btn-close:hover {
    background-color: rgba(255, 255, 255, 0.18);
    opacity: 1;
}

/* Fonds pleins par niveau (degrade pour un rendu moins plat). */
.app-announce.alert-danger {
    background: linear-gradient(135deg, #FF453A 0%, #D70015 100%);
}
.app-announce.alert-warning {
    background: linear-gradient(135deg, #FF9F0A 0%, #E8590C 100%);
}
.app-announce.alert-info {
    background: linear-gradient(135deg, #0A84FF 0%, #0050C8 100%);
}
.app-announce.alert-success {
    background: linear-gradient(135deg, #34C759 0%, #1F9D4D 100%);
}

/* Un incident (danger) attire l'oeil avec une pulsation discrete. PERF : limitee a
   3 pulsations (etait `infinite` -> repeignait en continu = FPS en baisse sur toutes
   les pages tant qu'un bandeau d'alerte etait affiche). L'attention est captee au
   chargement, puis l'animation s'arrete (plus de recompositing permanent). */
.app-announce.alert-danger {
    animation: app-announce-pulse 2.4s ease-in-out 3;
}
@keyframes app-announce-pulse {
    0%, 100% { box-shadow: 0 14px 34px -14px rgba(215, 0, 21, 0.55); }
    50%      { box-shadow: 0 14px 40px -10px rgba(215, 0, 21, 0.85); }
}
@media (prefers-reduced-motion: reduce) {
    .app-announce.alert-danger { animation: none; }
}

/* ============================================================================
 * Tableau de bord personnel (page d'accueil) — grille de widgets réordonnables.
 * Réutilise les classes/jetons existants (.card, .glass-pill, --accent, etc.).
 * ==========================================================================*/
.dash-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.dash-hello { font-size: 1.5rem; margin: 0 0 .15rem; }
.dash-toolbar { display: flex; gap: .5rem; }
.dash-edit-hint { font-size: .82rem; margin: -.4rem 0 .9rem; }

/* Grille : colonnes auto-ajustées, les blocs « lg » occupent 2 colonnes. */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    align-items: start;
}
.dash-card { margin: 0; }                 /* .card a déjà le fond/bordure/rayon */
.dash-card.size-lg { grid-column: span 2; }
@media (max-width: 720px) {
    .dash-grid { grid-template-columns: 1fr; }
    .dash-card.size-lg { grid-column: span 1; }
}

/* Hors édition : les blocs masqués ne s'affichent pas, le badge non plus. */
.dash-card.dash-hidden { display: none; }
.dash-hidden-badge, .dash-card-tools { display: none; }

.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dash-card-title { font-weight: 600; display: inline-flex; align-items: center; min-width: 0; }
.dash-card-title i { color: var(--accent); }
.dash-card-body { display: flex; flex-direction: column; gap: .6rem; }

/* Métrique principale d'un widget. */
.dash-kpi { display: flex; align-items: baseline; gap: .45rem; }
.dash-kpi-num { font-size: 1.85rem; font-weight: 700; line-height: 1; color: var(--text-strong); }
.dash-kpi-unit { font-size: .82rem; color: var(--text-faint); }
.dash-sub { font-size: .82rem; }
.dash-sub.text-faint { color: var(--text-faint); }

/* Liste de lignes cliquables (groupes de tâches, tickets, projets…). */
.dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.dash-list li a {
    display: flex; align-items: center; gap: .5rem;
    padding: .34rem .45rem; border-radius: 9px; color: var(--text-muted);
}
.dash-list li a:hover { background: var(--accent-soft); color: var(--text-strong); }
.dash-li-icon { color: var(--text-faint); flex: 0 0 auto; }
.dash-li-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list .glass-pill { flex: 0 0 auto; }

/* Lien « voir plus » discret en pied de widget. */
.dash-more { font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; margin-top: auto; }
.dash-more-warn { color: var(--warn); }

/* Petits chiffres secondaires (prévision / pondéré, compteurs projets…). */
.dash-figs { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.dash-figs.dash-figs-3 > div { flex: 1 1 0; }
.dash-figs > div { display: flex; flex-direction: column; }
.dash-fig-num { font-size: 1.15rem; font-weight: 600; color: var(--text-strong); }
.dash-fig-lbl { font-size: .72rem; color: var(--text-faint); }
.dash-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.dash-conge-line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Barre de progression (objectif commercial). */
.dash-progress { height: 8px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.dash-progress-bar { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.dash-progress-bar.is-done { background: var(--success); }

/* État vide (« rien à traiter »). */
.dash-empty { color: var(--text-faint); font-size: .9rem; display: flex; align-items: center; gap: .4rem; padding: .25rem 0; }
.dash-empty i { color: var(--success); }

/* Bloc réconciliation (lg). */
.dash-recon-kpis { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.dash-recon-kpi { display: flex; flex-direction: column; }
.dash-recon-table { font-size: .82rem; }

/* ---- Mode édition -------------------------------------------------------- */
.dash-card-tools { align-items: center; gap: .35rem; }
.dash-editing .dash-card-tools { display: inline-flex; }
.dash-editing .dash-card { cursor: grab; border-style: dashed; }
.dash-editing .dash-card.dash-hidden { display: block; opacity: .5; }
.dash-editing .dash-card.dash-hidden .dash-hidden-badge { display: inline-flex; }
/* En édition, on neutralise les liens du corps pour éviter une navigation accidentelle en glissant. */
.dash-editing .dash-card-body { pointer-events: none; }
.dash-editing .dash-card-tools { pointer-events: auto; }
.dash-hide-btn {
    border: 0; background: transparent; color: var(--text-faint);
    padding: .1rem .3rem; border-radius: 7px; cursor: pointer; line-height: 1;
}
.dash-hide-btn:hover { color: var(--text-strong); background: var(--accent-soft); }
.dash-drag-handle { color: var(--text-faint); cursor: grab; padding: 0 .15rem; }
.dash-card.dash-dragging { opacity: .55; }
.dash-card.dash-drag-over { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* Masques par defaut (classic) : le rail/topbar/subbar n'existent
   visuellement qu'en mode cockpit (regles [data-ui="cockpit"] ci-dessous,
   plus specifiques, les re-affichent). Evite un flash d'elements non stylés. */
.app-rail, .app-topbar, .app-subnav { display: none; }

/* =====================================================================
   THÈME « COCKPIT » (data-ui="cockpit")
   ---------------------------------------------------------------------
   2e disposition de navigation, OPT-IN par compte (cf. /compte/profil).
   Rail d'icônes (domaines) tout à gauche + panneau vertical du domaine
   actif (sections + liens, se "déplie" depuis le rail) + topbar simplifiée
   (fil d'Ariane + recherche + utilisateur) au-dessus du contenu.
   ===================================================================== */
[data-ui="cockpit"] {
    --rail-w: 60px;
    --subnav-w: 212px;
    --topbar-h: 52px;
}

[data-ui="cockpit"] body {
    display: grid;
    grid-template-columns: var(--rail-w) var(--subnav-w) minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas: "rail subnav top" "rail subnav main";
    min-height: 100vh;
}

/* Repli du panneau : on reclique l'icone du domaine deja actif dans le rail
   (cf. app.js, module "Disposition Cockpit") -> le panneau se referme et le
   contenu recupere la largeur. Re-cliquer rouvre. */
[data-ui="cockpit"][data-subnav-collapsed="1"] body {
    grid-template-columns: var(--rail-w) 0px minmax(0, 1fr);
}
[data-ui="cockpit"][data-subnav-collapsed="1"] .app-subnav { display: none; }

[data-ui="cockpit"] .sidebar { display: none; }
[data-ui="cockpit"] .nav-toggle { display: none !important; }
[data-ui="cockpit"] .nav-backdrop { display: none !important; }

/* --- Rail : un bouton icone par domaine --- */
[data-ui="cockpit"] .app-rail {
    grid-area: rail; position: sticky; top: 0; align-self: start; height: 100vh; z-index: 31;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 0;
    /* Fond sombre FIXE (pas var(--bg-sidebar), qui suit le mode clair/sombre de
       l'appli et redevenait clair en mode "Clair" — rendant les icones blanches
       invisibles). Le rail reste sombre quel que soit le theme, comme la
       reference : c'est un choix de design, pas un mode couleur. Bleu marine
       plutot que noir pur. */
    background: var(--chrome-dark);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
[data-ui="cockpit"] .app-rail-brand { width: auto; padding: 0; margin: 0 0 10px; gap: 0; flex-shrink: 0; }
[data-ui="cockpit"] .app-rail-brand span:not(.brand-mark) { display: none; }
[data-ui="cockpit"] .app-rail-brand .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
[data-ui="cockpit"] .rail-btn {
    position: relative; width: 38px; height: 34px; flex-shrink: 0; border: 0; cursor: pointer;
    /* Couleur explicite (pas var(--text-muted), pensee pour fond clair) : le
       rail est sombre, il faut un gris clair/blanc garanti lisible dessus. */
    background: transparent; color: rgba(255, 255, 255, 0.55); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s, background .15s;
}
[data-ui="cockpit"] .rail-btn i { font-size: .92rem; line-height: 1; }
[data-ui="cockpit"] .rail-badge {
    position: absolute; top: 1px; right: 2px;
    min-width: 13px; height: 13px; padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.54rem; font-weight: 700; line-height: 1;
    color: #fff; background: var(--danger); border-radius: 999px;
    box-shadow: 0 0 0 2px var(--bg-sidebar); pointer-events: none;
}
[data-ui="cockpit"] .rail-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
/* Monochrome (blanc/gris sur rail sombre) : l'actif se lit dans un bloc plein
   + l'icone qui passe en blanc — pas de couleur par domaine (repere = badges
   rouges de notif + bloc actif, comme la reference). */
[data-ui="cockpit"] .rail-btn.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}
[data-ui="cockpit"] .rail-tip {
    position: absolute; left: 54px; top: 50%; transform: translateY(-50%) translateX(-4px);
    background: #1f2532; color: #fff; font-size: .74rem; font-weight: 600; white-space: nowrap;
    padding: 5px 9px; border-radius: 8px; opacity: 0; pointer-events: none;
    transition: opacity .12s, transform .12s; z-index: 60; box-shadow: 0 8px 22px -8px rgba(0,0,0,.4);
}
[data-ui="cockpit"] .rail-btn:hover .rail-tip,
[data-ui="cockpit"] .rail-btn:focus-visible .rail-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* --- Sub-nav : panneau vertical du domaine actif, "deplie" depuis le rail --- */
[data-ui="cockpit"] .app-subnav {
    display: block;
    grid-area: subnav; position: sticky; top: 0; align-self: start; height: 100vh; z-index: 30;
    overflow-y: auto;
    padding: 22px 14px 20px;
    /* Blanc franc (pas var(--bg-card), translucide/teinte) : detache nettement
       le panneau du reste de l'appli, comme la reference. */
    background: #fff;
    border-right: 1px solid var(--border-soft);
}
[data-ui="cockpit"] .app-subnav-title {
    font-size: .82rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-strong);
    margin: 0 6px 14px;
}
[data-ui="cockpit"] .app-subnav-title i { display: none; }
[data-ui="cockpit"] .app-subnav .sidebar-section { margin-bottom: 12px; }
[data-ui="cockpit"] .app-subnav .sidebar-section-title {
    margin: 0; padding: 0 6px 5px; border: 0;
    font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint);
}
[data-ui="cockpit"] .app-subnav .sidebar-link {
    display: flex; align-items: center; gap: 8px;
    padding: 6.5px 8px; border-radius: 7px;
    font-size: .765rem; font-weight: 550; color: var(--text-muted); box-shadow: none;
    line-height: 1.3;
    transition: background .15s, color .15s;
}
[data-ui="cockpit"] .app-subnav .sidebar-link i {
    font-size: .74rem; width: .9rem; text-align: center;
    /* Gris neutre meme sur le lien actif (pas bleu) : coherent avec le rail,
       l'etat "actif" se lit dans le fond + le gras, pas dans la couleur de
       l'icone — evite d'alourdir visuellement le panneau. */
    color: var(--text-faint);
}
/* Survol en bleu (teinte du rail marine) plutot que gris neutre : coherence
   graphique entre le rail et le panneau qu'il deplie. */
[data-ui="cockpit"] .app-subnav .sidebar-link:hover { background: rgba(17, 26, 46, 0.07); color: #111a2e; }
[data-ui="cockpit"] .app-subnav .sidebar-link.active {
    background: var(--accent-soft); color: var(--accent); font-weight: 650;
}
[data-ui="cockpit"] .app-subnav .sidebar-badge { margin-left: auto; font-size: .64rem; }

/* --- Topbar simplifiee : fil d'Ariane + recherche + utilisateur --- */
[data-ui="cockpit"] .app-topbar {
    grid-area: top; position: sticky; top: 0; z-index: 29;
    display: flex; align-items: center; gap: 16px; height: var(--topbar-h); padding: 0 24px;
    background: var(--bg-app);
    border-bottom: 0.5px solid var(--border-soft);
}
[data-ui="cockpit"] .app-breadcrumb {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    font-size: .84rem; color: var(--text-faint); white-space: nowrap;
}
[data-ui="cockpit"] .app-breadcrumb strong { color: var(--text-strong); font-weight: 650; }
[data-ui="cockpit"] .app-breadcrumb i { font-size: .62rem; }
[data-ui="cockpit"] .topbar-grow { flex: 1; }
[data-ui="cockpit"] .topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
[data-ui="cockpit"] .topbar-actions .sidebar-search { margin: 0; width: 240px; max-width: 32vw; }
[data-ui="cockpit"] .topbar-actions .sidebar-search-panel { z-index: 80; }
[data-ui="cockpit"] .topbar-actions .sidebar-user {
    margin: 0 !important; padding: 0; border: 0; background: none;
    display: flex; flex-direction: row; align-items: center; gap: 8px;
}
[data-ui="cockpit"] .topbar-actions .sidebar-user form { margin: 0; }
/* Le selecteur de theme clair/sombre n'a pas sa place ici : 3 boutons segmentes
   encombrants et incoherents a cote d'icones 30x30 — reste disponible dans le
   menu de gauche (sidebar repliee), pas duplique dans la barre du haut. */
[data-ui="cockpit"] .topbar-actions .sidebar-user .theme-toggle { display: none !important; }
/* Avatar / cloche / deconnexion alignes sur le meme gabarit que .icon-btn
   (30x30, bordure neutre, meme rayon) plutot que le style "lien pleine largeur"
   concu pour un empilement vertical — coherent avec le reste de l'appli. */
[data-ui="cockpit"] .topbar-actions .avatar { --avatar-size: 30px; }
[data-ui="cockpit"] .topbar-actions .sidebar-user-info { padding: 0; border-radius: 999px; }
[data-ui="cockpit"] .topbar-actions .sidebar-user-meta,
[data-ui="cockpit"] .topbar-actions .sidebar-user-cog { display: none; }
[data-ui="cockpit"] .topbar-actions .sidebar-notif {
    width: 30px; height: 30px; padding: 0; margin: 0; justify-content: center;
    border: 1px solid var(--glass-border); border-radius: 8px; background: #fff;
}
[data-ui="cockpit"] .topbar-actions .sidebar-notif:hover { background: rgba(40, 55, 95, 0.06); }
[data-ui="cockpit"] .topbar-actions .sidebar-notif.has-notif { border-color: rgba(255, 59, 48, 0.28); }
[data-ui="cockpit"] .topbar-actions .sidebar-notif > span:not(.notif-badge) { display: none; }
[data-ui="cockpit"] .topbar-actions .sidebar-notif .notif-badge { position: absolute; top: -4px; right: -4px; margin: 0; }
[data-ui="cockpit"] .topbar-actions .sidebar-logout {
    width: 30px; height: 30px; padding: 0; margin: 0; font-size: 0; gap: 0;
    border: 1px solid var(--glass-border); border-radius: 8px; background: #fff;
}
[data-ui="cockpit"] .topbar-actions .sidebar-logout:hover { background: var(--danger-soft); color: var(--danger); }
[data-ui="cockpit"] .topbar-actions .sidebar-logout i { font-size: .95rem; }

[data-ui="cockpit"] main.main { grid-area: main; padding: 24px; }
[data-theme="dark"][data-ui="cockpit"] .app-rail { box-shadow: 1px 0 0 rgba(255, 255, 255, 0.05); }
[data-theme="dark"][data-ui="cockpit"] .rail-btn:hover { background: rgba(255, 255, 255, 0.06); }

@media (max-width: 900px) {
    [data-ui="cockpit"] { --subnav-w: 200px; }
}
@media (max-width: 640px) {
    [data-ui="cockpit"] { --rail-w: 56px; }
    [data-ui="cockpit"] .topbar-actions .sidebar-search { width: 130px; }
}

/* ===== Onglets de section (buildSectionTabs, app.js) : les pages de la
   section active deviennent des onglets en haut du contenu. Repris du
   theme Moderne (cockpit). ===== */
.app-section-tabs {
    display: flex; align-items: center; gap: 2px;
    background: rgba(40, 55, 95, 0.05); padding: 4px; border-radius: 10px;
    margin-bottom: 1rem; max-width: 100%;
}
/* Bande defilante horizontale : jamais de retour a la ligne, jamais de texte
   tronque — le texte complet est TOUJOURS affiche. Quand ca deborde, les
   fleches (cf. .app-section-tabs-arrow) glissent la vue plutot que de casser
   la ligne ou raccourcir les libelles. Scrollbar native masquee (pilotee par
   les fleches + molette/trackpad). */
.app-section-tabs-scroll {
    display: flex; flex-wrap: nowrap; gap: 3px;
    overflow-x: auto; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
}
.app-section-tabs-scroll::-webkit-scrollbar { display: none; }
.app-section-tab { flex-shrink: 0; border-radius: 7px; text-decoration: none; }
/* Nomme .app-section-tab-content (et non ".tab-content") : ce dernier est la
   classe standard Bootstrap du conteneur d'onglets (.tab-content > .tab-pane),
   deja utilisee partout (boards SAV/COM/EN/Talent...) — une collision faisait
   fuiter white-space:nowrap dans tout le contenu des onglets Bootstrap
   (ex. libelles des cartes KPI tronques/debordants). */
.app-section-tab-content {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: .38rem .75rem; border-radius: 7px;
    background: transparent; color: var(--text-muted);
    font-size: .74rem; font-weight: 600;
    transition: background .15s, color .15s;
}
.app-section-tab-content i { font-size: .82rem; opacity: .8; flex-shrink: 0; }
.app-section-tab:hover .app-section-tab-content { color: var(--text-strong); }
.app-section-tab.active .app-section-tab-content { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(20, 30, 50, .08); }
.app-section-tab.active .app-section-tab-content i { opacity: 1; }

/* Fleches de defilement : n'apparaissent QUE quand il y a effectivement
   quelque chose a reveler de ce cote (cf. update() dans initSectionTabsScroll,
   app.js) — jamais affichees "au cas ou". */
.app-section-tabs-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex-shrink: 0; border: 0; border-radius: 6px;
    background: transparent; color: var(--text-faint); cursor: pointer;
    font-size: .72rem; transition: background .15s, color .15s;
}
.app-section-tabs-arrow:hover { background: rgba(40, 55, 95, 0.08); color: var(--text-strong); }
.app-section-tabs-arrow[hidden] { display: none; }

/* Ligne de section repliee dans le panneau lateral (ex-liste complete des
   pages) : une seule ligne cliquable par section, menant a sa 1re page. */
.subnav-section-link { font-weight: 650; }
.subnav-section-chev { margin-left: auto; font-size: .62rem; opacity: .5; }
[data-ui="cockpit"] .app-subnav .subnav-section-link.active .subnav-section-chev { opacity: .8; }

/* =====================================================================
   THÈME « FINDER » (data-ui="finder")
   ===================================================================== */
[data-ui="finder"] .sidebar {
    margin: 0;
    top: 0;
    height: 100vh;
    border-radius: 0;
    border: 0;
    border-right: 1px solid var(--border-strong, rgba(40, 55, 95, 0.12));
    box-shadow: none;
}

/* =====================================================================
   THÈME « FLAT » (data-ui="flat") — variante « Flat net »
   ===================================================================== */
:root[data-ui="flat"] {
    --glass-blur: none;
    --glass-blur-strong: none;
    --glass-blur-xl: none;
    --glass-radius: 5px;
    --glass-radius-md: 4px;
    --glass-radius-sm: 4px;
    --accent-grad: var(--accent);
    --accent-grad-soft: var(--accent);
    --glass-specular: none;
    --glass-refraction: none;
    --tint-glow: none;
    --bg-app: #fbfcfd;
    --bg-sidebar: #eef1f6;
    --bg-card: #ffffff;
    --bg-card-hover: #eef2f7;
    --bg-elevated: #ffffff;
    --glass-bg-1: #ffffff;
    --glass-bg-2: #ffffff;
    --glass-bg-active: rgba(10, 132, 255, 0.10);
    --glass-border: #d7dce4;
    --glass-border-hi: #c9d0db;
    --border-soft: #dfe3ea;
    --border-strong: #c9d0db;
    --glass-shadow: none;
    --glass-shadow-sm: none;
    --glass-shadow-hover: none;
}

:root[data-theme="dark"][data-ui="flat"] {
    --bg-app: #0f1116;
    --bg-sidebar: #15181f;
    --bg-card: #181b22;
    --bg-card-hover: #20242e;
    --bg-elevated: #20242e;
    --glass-bg-1: #181b22;
    --glass-bg-2: #20242e;
    --glass-bg-active: rgba(10, 132, 255, 0.22);
    --glass-border: #2b303b;
    --glass-border-hi: #3a4150;
    --border-soft: #2b303b;
    --border-strong: #3a4150;
    --glass-shadow: none;
    --glass-shadow-sm: none;
    --glass-shadow-hover: none;
}

[data-ui="flat"] body { background: var(--bg-app); }
[data-ui="flat"] body::before { display: none; }
[data-ui="flat"] *,
[data-ui="flat"] *::before,
[data-ui="flat"] *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
[data-ui="flat"] .glass-hero::before,
[data-ui="flat"] .hero::before,
[data-ui="flat"] .glass-card::before,
[data-ui="flat"] .card::before,
[data-ui="flat"] .panel::before,
[data-ui="flat"] .glass-metric::before,
[data-ui="flat"] .metric-card::before,
[data-ui="flat"] .bento-feature::before,
[data-ui="flat"] .modal-content::before {
    display: none;
}
[data-ui="flat"] .glass-card,
[data-ui="flat"] .card,
[data-ui="flat"] .panel,
[data-ui="flat"] .glass-hero,
[data-ui="flat"] .hero,
[data-ui="flat"] .glass-metric,
[data-ui="flat"] .metric-card,
[data-ui="flat"] .bento-feature,
[data-ui="flat"] .modal-content {
    border: 1px solid var(--glass-border);
    box-shadow: none;
}
[data-ui="flat"] .glass-card:hover,
[data-ui="flat"] .card:hover,
[data-ui="flat"] .glass-metric:hover,
[data-ui="flat"] .metric-card:hover,
[data-ui="flat"] .bento-feature:hover {
    transform: none;
    box-shadow: none;
}
[data-ui="flat"] .glass-metric,
[data-ui="flat"] .metric-card {
    border-top: 3px solid var(--accent);
}
[data-ui="flat"] .glass-card .card-header,
[data-ui="flat"] .card .card-header {
    background: var(--bg-card-hover);
    border-bottom: 1px solid var(--glass-border);
}
[data-ui="flat"] .sidebar {
    margin: 0;
    top: 0;
    height: 100vh;
    border-radius: 0;
    border: 0;
    border-right: 1px solid var(--border-strong);
    box-shadow: none;
    background: var(--bg-sidebar);
}
[data-ui="flat"] .sidebar-link { border-radius: 4px; }
[data-ui="flat"] .sidebar-link:hover {
    background: var(--bg-card-hover);
    box-shadow: none;
}
[data-ui="flat"] .sidebar-link.active {
    background: var(--accent);
    color: #fff;
    box-shadow: none;
}
[data-ui="flat"] .sidebar-link.active i { color: #fff; opacity: 1; }
[data-ui="flat"] .sidebar-link.active::before { display: none; }
[data-ui="flat"] .glass-btn,
[data-ui="flat"] .btn {
    border-radius: 4px;
    box-shadow: none !important;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    color: var(--text-strong);
}
[data-ui="flat"] .glass-btn:hover,
[data-ui="flat"] .btn:hover {
    transform: none;
    box-shadow: none !important;
    background: var(--bg-card-hover);
}
[data-ui="flat"] .glass-btn.tone-primary,
[data-ui="flat"] .btn-primary {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
[data-ui="flat"] .glass-btn.tone-primary:hover,
[data-ui="flat"] .btn-primary:hover { background: var(--accent); color: #fff; }
[data-ui="flat"] .glass-btn.tone-success,
[data-ui="flat"] .btn-success {
    background: var(--success); border-color: var(--success); color: #fff;
}
[data-ui="flat"] .glass-btn.tone-danger,
[data-ui="flat"] .btn-danger {
    background: var(--danger); border-color: var(--danger); color: #fff;
}
[data-ui="flat"] .glass-btn.tone-warn,
[data-ui="flat"] .btn-warning {
    background: var(--warn); border-color: var(--warn); color: #fff;
}
[data-ui="flat"] .glass-pill,
[data-ui="flat"] .badge.tag-pill,
[data-ui="flat"] .badge,
[data-ui="flat"] .metier-tag,
[data-ui="flat"] .sidebar-badge { border-radius: 4px; }
[data-ui="flat"] .glass-input,
[data-ui="flat"] .glass-select,
[data-ui="flat"] .form-control,
[data-ui="flat"] .form-select { border-radius: 4px; }

/* =====================================================================
   Sélecteur « Style d'interface » (bloc Apparence du profil)
   Réutilise l'ossature de .theme-toggle ; boutons avec libellé texte.
   ===================================================================== */
.ui-toggle { width: auto; }
.ui-toggle__btn {
    display: flex; align-items: center; justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-faint);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.ui-toggle__btn:hover { color: var(--text-strong); }
.ui-toggle__btn.active {
    background: var(--bg-elevated);
    color: var(--accent);
    box-shadow: var(--glass-shadow-sm);
}

/* =====================================================================
   DENSITÉ GLOBALE — compression de l'échelle d'espacement Bootstrap
   ---------------------------------------------------------------------
   Les utilitaires Bootstrap (.mb-4, .p-3, .g-3, .py-5…) sont en
   !important : ils ÉCHAPPAIENT à la densité posée sur les composants,
   d'où « c'est un peu partout pareil ». On rapproche ici les 3 plus gros
   crans (3 / 4 / 5) UNE fois, pour TOUT le site et tous les thèmes.
   app.css charge APRÈS bootstrap → ces règles gagnent.

   POUR RÉGLER LA DENSITÉ : ne changer QUE ces 3 valeurs.
     cran 3 : 1rem   -> 0.65rem   (mb-3, p-3, g-3, gap-3…)
     cran 4 : 1.5rem -> 0.95rem   (mb-4, p-4, g-4…)
     cran 5 : 3rem   -> 1.6rem    (py-5, my-5…)
   Crans 0/1/2 laissés tels quels (déjà serrés).
   Réversible : supprimer ce bloc rend l'espacement Bootstrap d'origine.
   Variantes responsives (mb-md-4…) volontairement non touchées.
   ===================================================================== */

/* ---- cran 3 : 1rem -> 0.65rem ---- */
.m-3  { margin: 0.65rem !important; }
.mt-3 { margin-top: 0.65rem !important; }
.mb-3 { margin-bottom: 0.65rem !important; }
.ms-3 { margin-left: 0.65rem !important; }
.me-3 { margin-right: 0.65rem !important; }
.mx-3 { margin-left: 0.65rem !important; margin-right: 0.65rem !important; }
.my-3 { margin-top: 0.65rem !important; margin-bottom: 0.65rem !important; }
.p-3  { padding: 0.65rem !important; }
.pt-3 { padding-top: 0.65rem !important; }
.pb-3 { padding-bottom: 0.65rem !important; }
.ps-3 { padding-left: 0.65rem !important; }
.pe-3 { padding-right: 0.65rem !important; }
.px-3 { padding-left: 0.65rem !important; padding-right: 0.65rem !important; }
.py-3 { padding-top: 0.65rem !important; padding-bottom: 0.65rem !important; }
.gap-3 { gap: 0.65rem !important; }
.g-3, .gx-3 { --bs-gutter-x: 0.65rem; }
.g-3, .gy-3 { --bs-gutter-y: 0.65rem; }

/* ---- cran 4 : 1.5rem -> 0.95rem ---- */
.m-4  { margin: 0.95rem !important; }
.mt-4 { margin-top: 0.95rem !important; }
.mb-4 { margin-bottom: 0.95rem !important; }
.ms-4 { margin-left: 0.95rem !important; }
.me-4 { margin-right: 0.95rem !important; }
.mx-4 { margin-left: 0.95rem !important; margin-right: 0.95rem !important; }
.my-4 { margin-top: 0.95rem !important; margin-bottom: 0.95rem !important; }
.p-4  { padding: 0.95rem !important; }
.pt-4 { padding-top: 0.95rem !important; }
.pb-4 { padding-bottom: 0.95rem !important; }
.ps-4 { padding-left: 0.95rem !important; }
.pe-4 { padding-right: 0.95rem !important; }
.px-4 { padding-left: 0.95rem !important; padding-right: 0.95rem !important; }
.py-4 { padding-top: 0.95rem !important; padding-bottom: 0.95rem !important; }
.gap-4 { gap: 0.95rem !important; }
.g-4, .gx-4 { --bs-gutter-x: 0.95rem; }
.g-4, .gy-4 { --bs-gutter-y: 0.95rem; }

/* ---- cran 5 : 3rem -> 1.6rem ---- */
.m-5  { margin: 1.6rem !important; }
.mt-5 { margin-top: 1.6rem !important; }
.mb-5 { margin-bottom: 1.6rem !important; }
.ms-5 { margin-left: 1.6rem !important; }
.me-5 { margin-right: 1.6rem !important; }
.mx-5 { margin-left: 1.6rem !important; margin-right: 1.6rem !important; }
.my-5 { margin-top: 1.6rem !important; margin-bottom: 1.6rem !important; }
.p-5  { padding: 1.6rem !important; }
.pt-5 { padding-top: 1.6rem !important; }
.pb-5 { padding-bottom: 1.6rem !important; }
.ps-5 { padding-left: 1.6rem !important; }
.pe-5 { padding-right: 1.6rem !important; }
.px-5 { padding-left: 1.6rem !important; padding-right: 1.6rem !important; }
.py-5 { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; }
.gap-5 { gap: 1.6rem !important; }
.g-5, .gx-5 { --bs-gutter-x: 1.6rem; }
.g-5, .gy-5 { --bs-gutter-y: 1.6rem; }

/* =====================================================================
   DENSITÉ — LARGEUR DES CONTRÔLES DE FORMULAIRE
   ---------------------------------------------------------------------
   Bootstrap met <select>/<input> en width:100% → ils s'étirent sur toute
   la largeur pour un contenu minuscule. On les dimensionne à leur CONTENU
   (width:auto, borné à 100%) : compact, SANS troncature ni sprawl. Le select
   prend la largeur de sa plus longue option (pas du texte tronqué).
   EXCLUS : champs .w-100, champs DANS un .input-group (gérés par le flex
   Bootstrap), champs texte/email/recherche/textarea (laissés pleine largeur).
   Réversible : supprimer ce bloc.
   ===================================================================== */
.form-select:not(.w-100):not(.ts-wrapper),
.glass-select:not(.w-100):not(.ts-wrapper),
.form-control:not(.w-100)[type="date"],   .glass-input:not(.w-100)[type="date"],
.form-control:not(.w-100)[type="time"],   .glass-input:not(.w-100)[type="time"],
.form-control:not(.w-100)[type="month"],  .glass-input:not(.w-100)[type="month"],
.form-control:not(.w-100)[type="week"],   .glass-input:not(.w-100)[type="week"],
.form-control:not(.w-100)[type="number"], .glass-input:not(.w-100)[type="number"] {
    width: auto;
    max-width: 100%;
}
.ts-wrapper:not(.w-100) { max-width: 100%; }

/* Dans un input-group : laisser le flex Bootstrap gérer la largeur (combos joints)
   et préserver les styles inline (ex. max-width des sélecteurs « matin/après-midi »). */
.input-group > .form-control,
.input-group > .form-select,
.input-group > .glass-input,
.input-group > .glass-select {
    width: 1%;
    flex: 1 1 auto;
    max-width: none;
}

/* =====================================================================
   TABLEAU DE BORD DENSE — classe réutilisable .dense-board (masonry)
   ---------------------------------------------------------------------
   À mettre autour d'un conteneur de SECTIONS-cartes (pages de type fiche /
   dashboard). Les cartes se rangent et se tassent sur autant de colonnes
   que la largeur permet (~330px/colonne). Garde-fous AUTOMATIQUES :
     - héros / page-header → pleine largeur (column-span:all)
     - toute carte (ou colonne) contenant un <table> → pleine largeur
       (les tableaux ne sont jamais comprimés en colonne étroite)
     - rangées Bootstrap de SECTION (enfants directs) neutralisées en blocs
       masonry indépendants ; les formulaires DANS les cartes sont intacts
     - .board-wide = échappatoire manuelle pour forcer la pleine largeur
   Listes hautes plafonnées (460px) avec défilement interne.
   Réversible : retirer le wrapper .dense-board d'une page la remet à plat.
   ===================================================================== */
.dense-board { column-width: 330px; column-gap: 14px; }
.dense-board > .glass-card,
.dense-board > details.glass-card,
.dense-board > .card,
.dense-board > .panel,
.dense-board > .glass-metric,
.dense-board > .metric-card,
.dense-board > .row:not(.glass-card):not(.card):not(.panel) > [class*="col-"] {
    -webkit-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid;
    width: 100%; margin: 0 0 14px !important;
    /* PAS de display:block ici : casserait le flex interne des .glass-metric
       (valeur/icône côte à côte). multicol fait couler les blocs sans ça. */
}
/* Vraie rangée de SECTION (row SANS classe carte) → ses colonnes deviennent des
   blocs masonry indépendants. Un <form>/carte qui porte AUSSI .row (formulaire en
   grille) n'est PAS éclaté : il reste une carte pleine largeur (cf. column-span plus bas). */
.dense-board > .row:not(.glass-card):not(.card):not(.panel) { display: contents; }
.dense-board > .row:not(.glass-card):not(.card):not(.panel) > [class*="col-"] {
    max-width: 100% !important; flex: none !important; padding: 0 !important;
}
.dense-board .h-100 { height: auto !important; }
/* Tout ce qui N'EST PAS une carte qui coule (héros, back-link, titres, alertes,
   formulaires nus, barres d'outils…) = PLEINE LARGEUR en tête de section. */
.dense-board > *:not(.glass-card):not(details):not(.card):not(.panel):not(.glass-metric):not(.metric-card):not(.row):not(script):not(style) {
    column-span: all;
    -webkit-column-span: all;
}
/* Cartes/colonnes contenant un <table> + échappatoire .board-wide = pleine largeur
   (les tableaux ne sont jamais comprimés dans une colonne étroite). */
.dense-board > .board-wide,
.dense-board > .glass-card.row,
.dense-board > .card.row,
.dense-board > .panel.row,
.dense-board > .glass-card:has(table),
.dense-board > details.glass-card:has(table),
.dense-board > .card:has(table),
.dense-board > .panel:has(table),
.dense-board > .row:not(.glass-card):not(.card):not(.panel) > [class*="col-"]:has(table) {
    column-span: all;
    -webkit-column-span: all;
}
/* Anti « blocs collés » (correctif GLOBAL, toutes pages .dense-board) :
   en multicol, la marge BASSE d'un élément column-span:all est escamotée au
   raccord avec les colonnes -> deux blocs pleine largeur empilés se touchent
   (héros + alerte + tableau…). La marge HAUTE, elle, est respectée par le
   navigateur au franchissement du raccord. On garantit donc l'espacement par
   une marge haute sur tout bloc pleine largeur qui n'est pas le 1er enfant.
   !important pour battre le `margin: 0 0 14px !important` des cartes ci-dessus. */
.dense-board > .board-wide:not(:first-child),
.dense-board > .glass-hero:not(:first-child),
.dense-board > .glass-card.row:not(:first-child),
.dense-board > .card.row:not(:first-child),
.dense-board > .panel.row:not(:first-child),
.dense-board > .glass-card:has(table):not(:first-child),
.dense-board > details.glass-card:has(table):not(:first-child),
.dense-board > .card:has(table):not(:first-child),
.dense-board > .panel:has(table):not(:first-child),
.dense-board > *:not(.glass-card):not(details):not(.card):not(.panel):not(.glass-metric):not(.metric-card):not(.row):not(script):not(style):not(:first-child) {
    margin-top: 14px !important;
}
/* Cartes plus compactes + listes plafonnées (tableaux exemptés du plafond) */
.dense-board .card-header { padding: .4rem .65rem; font-size: .85rem; min-height: 0; }
.dense-board .card-body   { padding: .55rem .65rem; }
/* PAS de overflow/hauteur plafonnée sur les card-body : ça COUPAIT les menus
   déroulants (tom-select, dropdowns) qui s'ouvrent dans une carte. Le masonry
   équilibre les colonnes tout seul même avec des cartes hautes. */

/* =====================================================================
   CRM Liquid Glass Apple - theme principal (classic)
   ---------------------------------------------------------------------
   Couche finale, volontairement scopee a data-ui="classic" pour ne pas
   modifier les variantes flat / finder / cockpit. Elle centralise les
   tokens effectifs du theme principal et applique le vocabulaire visuel
   aux primitives globales + a la fiche client CRM.
===================================================================== */
:root[data-ui="classic"] {
    color-scheme: light;

    --font-sans:
        -apple-system, BlinkMacSystemFont,
        "SF Pro Text", "SF Pro Display",
        "Inter", "Segoe UI", Roboto, sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    --sys-blue: #007aff;
    --sys-blue-2: #0a84ff;
    --sys-green: #34c759;
    --sys-orange: #ff9f0a;
    --sys-red: #ff3b30;
    --sys-cyan: #32ade6;
    --sys-purple: #af52de;

    --accent: var(--sys-blue);
    --accent-2: #5e5ce6;
    --success: var(--sys-green);
    --warn: var(--sys-orange);
    --danger: var(--sys-red);
    --info: var(--sys-cyan);
    --magic: var(--sys-purple);

    --accent-soft: rgba(0, 122, 255, 0.13);
    --success-soft: rgba(52, 199, 89, 0.14);
    --warn-soft: rgba(255, 159, 10, 0.16);
    --danger-soft: rgba(255, 59, 48, 0.14);
    --info-soft: rgba(50, 173, 230, 0.15);
    --magic-soft: rgba(175, 82, 222, 0.14);

    --bg-app: #f3f7fb;
    --text-strong: #151b2a;
    --text-muted: #4d5a70;
    --text-faint: #7d889a;
    --text-disabled: #a8b1c2;

    --surface-line: rgba(39, 52, 76, 0.11);
    --surface-line-strong: rgba(39, 52, 76, 0.18);
    --glass-border: rgba(255, 255, 255, 0.66);
    --glass-border-hi: rgba(255, 255, 255, 0.86);

    --glass-bg-1:
        linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.50)),
        rgba(255, 255, 255, 0.48);
    --glass-bg-2:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.66)),
        rgba(255, 255, 255, 0.64);
    --glass-bg-active: rgba(0, 122, 255, 0.12);
    --glass-sidebar:
        linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(245, 250, 255, 0.40)),
        rgba(248, 251, 255, 0.42);
    --glass-control:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.64)),
        rgba(255, 255, 255, 0.60);
    --glass-control-hover:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.76)),
        rgba(255, 255, 255, 0.72);
    --glass-control-pressed: rgba(226, 235, 246, 0.82);

    --glass-blur: blur(8px) saturate(150%);
    --glass-blur-strong: blur(12px) saturate(165%);
    --glass-blur-shell: blur(30px) saturate(175%);

    --radius-card: 22px;
    --radius-card-lg: 24px;
    --radius-control: 12px;
    --radius-control-lg: 14px;
    --radius-pill: 999px;

    --shadow-glass:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        inset 0 -1px 0 rgba(255, 255, 255, 0.22),
        0 1px 2px rgba(20, 30, 50, 0.035),
        0 18px 46px -30px rgba(36, 58, 92, 0.48);
    --shadow-glass-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -1px 0 rgba(255, 255, 255, 0.28),
        0 2px 4px rgba(20, 30, 50, 0.045),
        0 24px 58px -32px rgba(36, 58, 92, 0.54);
    --shadow-control:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(20, 30, 50, 0.035),
        0 1px 1px rgba(20, 30, 50, 0.035);
    --focus-ring: 0 0 0 4px rgba(0, 122, 255, 0.18);

    --crm-gap: clamp(16px, 1.6vw, 24px);
    --crm-rail-width: clamp(380px, 29vw, 520px);

    --bs-body-bg: var(--bg-app);
    --bs-body-color: var(--text-strong);
    --bs-body-font-family: var(--font-sans);
    --bs-border-color: var(--surface-line);
    --bs-primary: var(--accent);
    --bs-success: var(--success);
    --bs-warning: var(--warn);
    --bs-danger: var(--danger);
    --bs-info: var(--info);
}

:root[data-ui="classic"][data-theme="dark"] {
    color-scheme: dark;
    --bg-app: #090d14;
    --text-strong: #f4f7fb;
    --text-muted: #c1cad8;
    --text-faint: #8f9aac;
    --text-disabled: #687386;
    --surface-line: rgba(255, 255, 255, 0.10);
    --surface-line-strong: rgba(255, 255, 255, 0.18);
    --glass-border: rgba(255, 255, 255, 0.13);
    --glass-border-hi: rgba(255, 255, 255, 0.22);
    --glass-bg-1:
        linear-gradient(180deg, rgba(34, 42, 58, 0.76), rgba(16, 22, 34, 0.58)),
        rgba(16, 22, 34, 0.62);
    --glass-bg-2:
        linear-gradient(180deg, rgba(48, 58, 78, 0.86), rgba(24, 32, 46, 0.72)),
        rgba(24, 32, 46, 0.76);
    --glass-sidebar:
        linear-gradient(180deg, rgba(28, 36, 52, 0.74), rgba(10, 15, 24, 0.60)),
        rgba(10, 15, 24, 0.64);
    --glass-control:
        linear-gradient(180deg, rgba(42, 52, 70, 0.86), rgba(20, 28, 42, 0.70)),
        rgba(20, 28, 42, 0.78);
    --glass-control-hover:
        linear-gradient(180deg, rgba(56, 68, 90, 0.90), rgba(26, 35, 52, 0.76)),
        rgba(26, 35, 52, 0.82);
    --shadow-glass:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 1px 2px rgba(0, 0, 0, 0.20),
        0 22px 58px -34px rgba(0, 0, 0, 0.74);
    --shadow-glass-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 2px 5px rgba(0, 0, 0, 0.24),
        0 28px 66px -34px rgba(0, 0, 0, 0.82);
}

[data-ui="classic"] body {
    background:
        radial-gradient(110% 72% at 10% -12%, rgba(0, 122, 255, 0.13), rgba(0, 122, 255, 0) 58%),
        radial-gradient(96% 62% at 94% 0%, rgba(50, 173, 230, 0.10), rgba(50, 173, 230, 0) 58%),
        linear-gradient(180deg, #f9fcff 0%, #eef5fb 48%, #f7f9fc 100%);
    color: var(--text-strong);
    font-family: var(--font-sans);
}

[data-ui="classic"][data-theme="dark"] body {
    background:
        radial-gradient(100% 70% at 12% -10%, rgba(10, 132, 255, 0.18), rgba(10, 132, 255, 0) 58%),
        radial-gradient(86% 58% at 92% 0%, rgba(94, 92, 230, 0.14), rgba(94, 92, 230, 0) 62%),
        linear-gradient(180deg, #111827 0%, #080d15 58%, #0b1019 100%);
}

[data-ui="classic"] body::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0) 28% 72%, rgba(255, 255, 255, 0.34)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 36%);
    opacity: 0.58;
}

[data-ui="classic"] body::after {
    opacity: 0.22;
}

[data-ui="classic"] main.main {
    padding: clamp(1rem, 2vw, 1.35rem) clamp(1rem, 2.4vw, 2.25rem) 2.25rem;
}

[data-ui="classic"] h1,
[data-ui="classic"] h2,
[data-ui="classic"] h3,
[data-ui="classic"] h4 {
    color: var(--text-strong);
    font-weight: 660;
    letter-spacing: 0;
}

[data-ui="classic"] .tone-primary { color: var(--accent) !important; }
[data-ui="classic"] .tone-success { color: #18883c !important; }
[data-ui="classic"] .tone-warn,
[data-ui="classic"] .tone-warning { color: #a95a00 !important; }
[data-ui="classic"] .tone-danger { color: #bb241a !important; }
[data-ui="classic"] .tone-info { color: #006b9e !important; }

[data-ui="classic"][data-theme="dark"] .tone-success { color: #6ee58d !important; }
[data-ui="classic"][data-theme="dark"] .tone-warn,
[data-ui="classic"][data-theme="dark"] .tone-warning { color: #ffbf59 !important; }
[data-ui="classic"][data-theme="dark"] .tone-danger { color: #ff8a80 !important; }
[data-ui="classic"][data-theme="dark"] .tone-info { color: #84d8ff !important; }

[data-ui="classic"] .sidebar {
    position: sticky;
    width: var(--sidebar-width);
    margin: 16px;
    top: 16px;
    height: calc(100vh - 32px);
    padding: 0.68rem 0.58rem;
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    background: var(--glass-sidebar);
    -webkit-backdrop-filter: var(--glass-blur-shell);
    backdrop-filter: var(--glass-blur-shell);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.70),
        inset 0 -1px 0 rgba(255, 255, 255, 0.24),
        0 18px 48px -32px rgba(28, 51, 92, 0.56);
}

[data-ui="classic"] .sidebar-brand {
    min-height: 36px;
    padding: 0.18rem 0.56rem 0.48rem;
    font-weight: 620;
}

[data-ui="classic"] .sidebar-group-title {
    margin: 0.7rem 0 0.06rem;
    padding-inline: 0.55rem;
    color: color-mix(in srgb, var(--text-muted) 74%, transparent);
    font-size: 0.6rem;
    letter-spacing: 0.11em;
}

[data-ui="classic"] #appSidebar .sidebar-scroll > .sidebar-group-title.is-current {
    color: var(--accent);
}

[data-ui="classic"] #appSidebar .sidebar-scroll > .sidebar-group-title.is-current::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 38%, transparent), transparent);
}

[data-ui="classic"] #appSidebar .sidebar-scroll > .sidebar-section {
    margin-top: 0.28rem;
    border-radius: 10px;
    transition: background 140ms ease, box-shadow 140ms ease;
}

[data-ui="classic"] #appSidebar .sidebar-scroll > .sidebar-section:not(.collapsed) {
    background: color-mix(in srgb, var(--text-strong) 3%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-strong) 6%, transparent);
}

[data-ui="classic"] #appSidebar .sidebar-scroll > .sidebar-section > .sidebar-section-title {
    min-height: 25px;
    padding: 0.32rem 0.55rem 0.2rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 610;
    letter-spacing: 0;
    text-transform: none;
}

[data-ui="classic"] #appSidebar .sidebar-scroll > .sidebar-section:not(.collapsed) > .sidebar-section-title {
    color: var(--text-strong);
}

[data-ui="classic"] #appSidebar .sidebar-scroll > .sidebar-section.is-current > .sidebar-section-title {
    color: var(--text-strong);
}

[data-ui="classic"] .sidebar-link,
[data-ui="classic"] .sidebar-notif,
[data-ui="classic"] .sidebar-logout {
    border-radius: 9px;
}

[data-ui="classic"] .sidebar-link {
    min-height: 29px;
    padding: 0.3rem 0.56rem;
    margin-block: 0;
    color: color-mix(in srgb, var(--text-strong) 78%, transparent);
    font-size: 0.83rem;
    font-weight: 480;
}

[data-ui="classic"] .sidebar-link i {
    width: 18px;
    font-size: 0.9rem;
    color: var(--text-muted);
    opacity: 0.72;
    text-align: center;
}

[data-ui="classic"] .sidebar-link:hover,
[data-ui="classic"] .sidebar-notif:hover,
[data-ui="classic"] .sidebar-user-link:hover {
    background: rgba(255, 255, 255, 0.50);
    color: var(--text-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

[data-ui="classic"] .sidebar-link.active,
[data-ui="classic"] .sidebar-notif.active {
    background: color-mix(in srgb, var(--accent-soft) 44%, transparent);
    color: var(--accent);
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 1px 2px rgba(20, 30, 50, 0.035);
}

[data-ui="classic"] .sidebar-link.active i {
    color: var(--accent);
    opacity: 1;
}

[data-ui="classic"] .sidebar-link.active::before {
    display: block;
    left: 4px;
    top: 8px;
    bottom: 8px;
    width: 2px;
}

[data-ui="classic"] .sidebar-search-input {
    min-height: 34px;
    border: 1px solid rgba(69, 83, 111, 0.18);
    border-radius: var(--radius-control-lg);
    background: var(--glass-control);
    box-shadow: var(--shadow-control);
}

[data-ui="classic"] .sidebar-search-input:focus {
    border-color: rgba(0, 122, 255, 0.56);
    background: var(--glass-control-hover);
    box-shadow: var(--focus-ring), var(--shadow-control);
}

[data-ui="classic"] .sidebar-search-panel,
[data-ui="classic"] .dropdown-menu,
[data-ui="classic"] .ts-dropdown,
[data-ui="classic"] .seg-pop {
    border: 1px solid var(--glass-border-hi) !important;
    border-radius: 16px !important;
    background: var(--glass-bg-2) !important;
    -webkit-backdrop-filter: var(--glass-blur-shell);
    backdrop-filter: var(--glass-blur-shell);
    box-shadow: var(--shadow-glass-hover) !important;
}

[data-ui="classic"] .glass-hero,
[data-ui="classic"] .hero,
[data-ui="classic"] .glass-card,
[data-ui="classic"] .card,
[data-ui="classic"] .panel,
[data-ui="classic"] .metric-card,
[data-ui="classic"] .glass-metric,
[data-ui="classic"] .bento-feature,
[data-ui="classic"] .modal-content {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    background: var(--glass-bg-1);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-glass);
}

[data-ui="classic"] .glass-hero,
[data-ui="classic"] .hero {
    border-radius: var(--radius-card-lg);
    padding: clamp(1.25rem, 2vw, 1.7rem);
}

[data-ui="classic"] .glass-card:hover,
[data-ui="classic"] .card:hover,
[data-ui="classic"] .metric-card:hover,
[data-ui="classic"] .glass-metric:hover,
[data-ui="classic"] .bento-feature:hover {
    transform: none;
    background: var(--glass-bg-2);
    box-shadow: var(--shadow-glass-hover);
}

[data-ui="classic"] .glass-card::before,
[data-ui="classic"] .card::before,
[data-ui="classic"] .panel::before,
[data-ui="classic"] .glass-hero::before,
[data-ui="classic"] .hero::before,
[data-ui="classic"] .metric-card::before,
[data-ui="classic"] .glass-metric::before,
[data-ui="classic"] .bento-feature::before,
[data-ui="classic"] .modal-content::before {
    opacity: 0.45;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08) 34%, rgba(255, 255, 255, 0) 56%),
        linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16));
}

[data-ui="classic"] .glass-card .card-header,
[data-ui="classic"] .card .card-header {
    min-height: 46px;
    padding: 0.9rem 1.08rem;
    border-bottom: 1px solid var(--surface-line);
    background: rgba(255, 255, 255, 0.14);
    color: var(--text-strong);
    font-weight: 650;
}

[data-ui="classic"] .glass-card .card-body,
[data-ui="classic"] .card .card-body {
    padding: 1.08rem;
}

[data-ui="classic"] .btn,
[data-ui="classic"] .glass-btn {
    min-height: 38px;
    border: 1px solid rgba(69, 83, 111, 0.18);
    border-radius: var(--radius-control);
    background: var(--glass-control);
    color: var(--text-strong);
    box-shadow: var(--shadow-control);
    font-weight: 560;
}

[data-ui="classic"] .btn:hover,
[data-ui="classic"] .glass-btn:hover {
    background: var(--glass-control-hover);
    color: var(--text-strong);
    transform: none;
}

[data-ui="classic"] .btn:active,
[data-ui="classic"] .glass-btn:active {
    background: var(--glass-control-pressed);
    transform: translateY(1px);
}

[data-ui="classic"] .btn:focus-visible,
[data-ui="classic"] .glass-btn:focus-visible,
[data-ui="classic"] .form-control:focus,
[data-ui="classic"] .form-select:focus,
[data-ui="classic"] .glass-input:focus,
[data-ui="classic"] .glass-select:focus,
[data-ui="classic"] .ts-wrapper.focus .ts-control {
    outline: none;
    border-color: rgba(0, 122, 255, 0.60) !important;
    box-shadow: var(--focus-ring), var(--shadow-control) !important;
}

[data-ui="classic"] .btn-primary,
[data-ui="classic"] .glass-btn.tone-primary {
    border-color: rgba(0, 102, 204, 0.24);
    background: linear-gradient(180deg, #2f8cff, #0071e3);
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 10px 22px -16px rgba(0, 113, 227, 0.82);
}

[data-ui="classic"] .btn-primary:hover,
[data-ui="classic"] .glass-btn.tone-primary:hover {
    background: linear-gradient(180deg, #4398ff, #0879dc);
    color: #fff !important;
}

[data-ui="classic"] .btn-success,
[data-ui="classic"] .glass-btn.tone-success {
    border-color: rgba(52, 199, 89, 0.22);
    background: linear-gradient(180deg, #3bd766, #27ad4a);
    color: #fff !important;
}

[data-ui="classic"] .btn-warning,
[data-ui="classic"] .glass-btn.tone-warn {
    border-color: rgba(255, 159, 10, 0.24);
    background: linear-gradient(180deg, #ffb340, #f08a00);
    color: #fff !important;
}

[data-ui="classic"] .btn-danger,
[data-ui="classic"] .glass-btn.tone-danger {
    border-color: rgba(255, 59, 48, 0.24);
    background: linear-gradient(180deg, #ff5a50, #d92d24);
    color: #fff !important;
}

[data-ui="classic"] .btn-sm,
[data-ui="classic"] .glass-btn-sm,
[data-ui="classic"] .glass-btn.sm {
    min-height: 32px;
    padding: 0.34rem 0.74rem;
    font-size: 0.79rem;
}

[data-ui="classic"] .form-control,
[data-ui="classic"] .form-select,
[data-ui="classic"] .glass-input,
[data-ui="classic"] .glass-select,
[data-ui="classic"] .action-card__input,
[data-ui="classic"] .ts-wrapper .ts-control {
    min-height: 38px;
    border: 1px solid rgba(69, 83, 111, 0.20) !important;
    border-radius: var(--radius-control) !important;
    background: var(--glass-control) !important;
    color: var(--text-strong) !important;
    box-shadow: var(--shadow-control) !important;
}

[data-ui="classic"] textarea.form-control {
    line-height: 1.45;
}

[data-ui="classic"] .form-control:hover,
[data-ui="classic"] .form-select:hover,
[data-ui="classic"] .glass-input:hover,
[data-ui="classic"] .glass-select:hover,
[data-ui="classic"] .ts-wrapper .ts-control:hover {
    background: var(--glass-control-hover) !important;
}

[data-ui="classic"] .form-control::placeholder,
[data-ui="classic"] .glass-input::placeholder {
    color: color-mix(in srgb, var(--text-faint) 72%, transparent);
}

[data-ui="classic"] .form-label {
    color: var(--text-faint);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[data-ui="classic"] .glass-pill,
[data-ui="classic"] .badge.tag-pill,
[data-ui="classic"] .badge,
[data-ui="classic"] .metier-tag {
    border: 1px solid rgba(255, 255, 255, 0.48);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.28)),
        rgba(48, 59, 82, 0.07);
    color: var(--text-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

[data-ui="classic"] .glass-pill.tone-primary,
[data-ui="classic"] .glass-pill.tone-accent,
[data-ui="classic"] .badge.bg-primary {
    background: var(--accent-soft);
    color: #005fbf;
    border-color: rgba(0, 122, 255, 0.24);
}

/* Pastilles METIER : le theme classic aplatit toutes les pills en gris ; on
   reaffirme les teintes des sigles 16S / 16L / 16C (menu + badges) pour les
   garder lisibles et distincts. 16S = orange · 16L = bleu · 16C = rose. */
[data-ui="classic"] .metier-tag.metier-infogerance,
[data-ui="classic"] .glass-pill.metier-infogerance {
    background: rgba(255, 149, 0, 0.14);
    color: #A85700;
    border-color: rgba(255, 149, 0, 0.32);
    box-shadow: none;
}
[data-ui="classic"] .metier-tag.metier-logiciel,
[data-ui="classic"] .glass-pill.metier-logiciel {
    background: rgba(0, 122, 255, 0.13);
    color: #005FBF;
    border-color: rgba(90, 200, 250, 0.34);
    box-shadow: none;
}
[data-ui="classic"] .metier-tag.metier-communication,
[data-ui="classic"] .glass-pill.metier-communication {
    background: rgba(255, 45, 85, 0.12);
    color: #C01E43;
    border-color: rgba(255, 45, 85, 0.26);
    box-shadow: none;
}

[data-ui="classic"] .glass-pill.tone-success,
[data-ui="classic"] .tag-ok {
    background: var(--success-soft);
    color: #18883c;
    border-color: rgba(52, 199, 89, 0.24);
}

[data-ui="classic"] .glass-pill.tone-warn,
[data-ui="classic"] .tag-warn {
    background: var(--warn-soft);
    color: #a95a00;
    border-color: rgba(255, 159, 10, 0.28);
}

[data-ui="classic"] .glass-pill.tone-danger,
[data-ui="classic"] .tag-danger {
    background: var(--danger-soft);
    color: #bb241a;
    border-color: rgba(255, 59, 48, 0.24);
}

[data-ui="classic"] .glass-pill.tone-info,
[data-ui="classic"] .tag-info {
    background: var(--info-soft);
    color: #006b9e;
    border-color: rgba(50, 173, 230, 0.28);
}

[data-ui="classic"] .glass-pill.tone-magic {
    background: var(--magic-soft);
    color: #7a35a4;
    border-color: rgba(175, 82, 222, 0.26);
}

[data-ui="classic"] .table,
[data-ui="classic"] .glass-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-strong);
    --bs-table-hover-bg: rgba(0, 122, 255, 0.045);
    color: var(--text-strong);
}

[data-ui="classic"] .table thead th,
[data-ui="classic"] .glass-table thead th {
    position: static;
    background: rgba(255, 255, 255, 0.22);
    border-bottom: 1px solid var(--surface-line);
    color: var(--text-faint);
    font-size: 0.68rem;
    letter-spacing: 0.075em;
}

[data-ui="classic"] .table tbody td,
[data-ui="classic"] .glass-table tbody td {
    border-bottom: 1px solid rgba(60, 72, 96, 0.075);
}

[data-ui="classic"] .table tbody tr:hover td,
[data-ui="classic"] .glass-table tbody tr:hover td {
    background: var(--bs-table-hover-bg);
}

[data-ui="classic"] .alert:not(.app-announce),
[data-ui="classic"] .empty-state,
[data-ui="classic"] .dash-empty,
[data-ui="classic"] .drop-zone,
[data-ui="classic"] .action-card,
[data-ui="classic"] .glass-details {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control-lg);
    background: var(--glass-bg-1);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-glass);
}

[data-ui="classic"] .alert-success:not(.app-announce) {
    color: #18883c;
    border-color: rgba(52, 199, 89, 0.24);
    background: linear-gradient(180deg, rgba(52, 199, 89, 0.13), rgba(255, 255, 255, 0.52));
}

[data-ui="classic"] .alert-warning:not(.app-announce) {
    color: #8f5200;
    border-color: rgba(255, 159, 10, 0.28);
    background: linear-gradient(180deg, rgba(255, 159, 10, 0.16), rgba(255, 255, 255, 0.54));
}

[data-ui="classic"] .alert-danger:not(.app-announce) {
    color: #a92720;
    border-color: rgba(255, 59, 48, 0.26);
    background: linear-gradient(180deg, rgba(255, 59, 48, 0.14), rgba(255, 255, 255, 0.54));
}

[data-ui="classic"] .alert-info:not(.app-announce) {
    color: #006b9e;
    border-color: rgba(50, 173, 230, 0.28);
    background: linear-gradient(180deg, rgba(50, 173, 230, 0.14), rgba(255, 255, 255, 0.54));
}

[data-ui="classic"] .app-announce.alert {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    padding: 1rem 1.1rem;
    color: var(--text-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-glass);
    animation: none;
}

[data-ui="classic"] .app-announce.alert,
[data-ui="classic"] .app-announce.alert strong {
    color: var(--text-strong);
}

[data-ui="classic"] .app-announce.alert a {
    color: var(--accent);
    font-weight: 650;
}

[data-ui="classic"] .app-announce.alert-danger {
    background:
        linear-gradient(180deg, rgba(255, 59, 48, 0.18), rgba(255, 255, 255, 0.54)),
        var(--glass-bg-1);
    border-color: rgba(255, 59, 48, 0.30);
}

[data-ui="classic"] .app-announce.alert-warning {
    background:
        linear-gradient(180deg, rgba(255, 159, 10, 0.20), rgba(255, 255, 255, 0.56)),
        var(--glass-bg-1);
    border-color: rgba(255, 159, 10, 0.34);
}

[data-ui="classic"] .app-announce.alert-info {
    background:
        linear-gradient(180deg, rgba(50, 173, 230, 0.18), rgba(255, 255, 255, 0.56)),
        var(--glass-bg-1);
    border-color: rgba(50, 173, 230, 0.32);
}

[data-ui="classic"] .app-announce.alert-success {
    background:
        linear-gradient(180deg, rgba(52, 199, 89, 0.17), rgba(255, 255, 255, 0.56)),
        var(--glass-bg-1);
    border-color: rgba(52, 199, 89, 0.30);
}

[data-ui="classic"] .app-announce.alert .btn-close {
    margin: 0.2rem 0.2rem auto 0.6rem;
    filter: none;
    opacity: 0.58;
    background-color: rgba(120, 130, 150, 0.16);
    border-radius: 50%;
}

[data-ui="classic"] .app-announce-stack {
    margin-inline: 0;
}

[data-ui="classic"] body:has(.crm-account-grid) .app-announce-stack {
    max-width: calc(100% - var(--crm-rail-width) - var(--crm-gap));
}

/* Fiche CRM à plat : pas de rail → le bandeau d'annonce reprend toute la largeur. */
[data-ui="classic"] body:has(.crm-account-grid--flat) .app-announce-stack {
    max-width: none;
}

[data-ui="classic"] .app-announce--cron {
    min-height: 76px;
    align-items: center !important;
    padding: 0.9rem 1rem;
    border-color: rgba(255, 59, 48, 0.22) !important;
    background:
        linear-gradient(180deg, rgba(255, 59, 48, 0.12), rgba(255, 255, 255, 0.58)),
        rgba(255, 255, 255, 0.56) !important;
}

[data-ui="classic"] .app-announce--cron .app-announce__icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    margin-top: 0 !important;
    border: 1px solid rgba(255, 59, 48, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.54);
    color: var(--danger);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

[data-ui="classic"] .app-announce--cron .app-announce__title {
    margin-bottom: 0.16rem;
    color: #6f1410;
}

[data-ui="classic"] .app-announce--cron .alert-link {
    display: inline-flex;
    margin-top: 0.18rem;
    color: var(--accent);
    text-decoration: none;
}

[data-ui="classic"] .metric-card,
[data-ui="classic"] .glass-metric {
    min-height: 104px;
    padding: 1rem;
    border-radius: 20px;
}

[data-ui="classic"] .metric-card .metric-value,
[data-ui="classic"] .glass-metric .metric-value {
    font-size: 1.62rem;
    font-weight: 700;
}

[data-ui="classic"] .metric-card .metric-icon,
[data-ui="classic"] .glass-metric .metric-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-control-lg);
    background: rgba(255, 255, 255, 0.46);
    border: 1px solid rgba(255, 255, 255, 0.46);
}

[data-ui="classic"] .crm-account-hero {
    overflow: hidden;
    padding: 0.78rem 0.92rem;
    min-height: 64px;
}

[data-ui="classic"] .crm-account-hero__content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(0.8rem, 1.6vw, 1.35rem);
    align-items: center;
}

[data-ui="classic"] .crm-account-hero__back {
    align-self: center;
    white-space: nowrap;
}

[data-ui="classic"] .crm-account-identity {
    min-width: 0;
}

[data-ui="classic"] .crm-account-identity h1 {
    overflow-wrap: anywhere;
}

[data-ui="classic"] .crm-account-legal {
    min-width: max-content;
    line-height: 1.55;
}

[data-ui="classic"] .crm-top-row {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(210px, 1fr) minmax(280px, 1.35fr);
    gap: var(--crm-gap);
    align-items: stretch;
}

[data-ui="classic"] .crm-top-row > .glass-card {
    min-width: 0;
}

[data-ui="classic"] .crm-health-layout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

[data-ui="classic"] .crm-health-ring {
    --health-score: 0;
    position: relative;
    display: flex;
    width: clamp(86px, 7vw, 112px);
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    background:
        conic-gradient(var(--success) calc(var(--health-score) * 1%), rgba(52, 199, 89, 0.12) 0),
        rgba(255, 255, 255, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 18px 36px -28px rgba(52, 199, 89, 0.82);
}

[data-ui="classic"] .crm-health-ring::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66)),
        rgba(255, 255, 255, 0.80);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

[data-ui="classic"] .crm-health-ring span,
[data-ui="classic"] .crm-health-ring small {
    position: relative;
    z-index: 1;
}

[data-ui="classic"] .crm-health-ring span {
    font-size: clamp(1.58rem, 2.4vw, 2.1rem);
    line-height: 1;
    font-weight: 760;
    color: var(--text-strong);
}

[data-ui="classic"] .crm-health-ring small {
    margin-top: 0.12rem;
    color: var(--text-faint);
    font-size: 0.68rem;
    font-weight: 650;
}

[data-ui="classic"] .crm-health-label {
    font-weight: 720;
}

[data-ui="classic"] .crm-health-money {
    margin-top: 0.8rem;
    font-size: 1.02rem;
    font-weight: 760;
    letter-spacing: 0;
}

[data-ui="classic"] .crm-entity-list {
    display: grid;
    gap: 0.72rem;
}

[data-ui="classic"] .crm-entity-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(96px, 0.85fr);
    gap: 0.72rem;
    align-items: center;
    padding: 0.6rem 0.68rem;
    border: 1px solid rgba(69, 83, 111, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.28);
}

[data-ui="classic"] .crm-entity-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

[data-ui="classic"] .crm-entity-meter {
    display: grid;
    grid-template-columns: minmax(58px, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
}

[data-ui="classic"] .crm-entity-bar {
    --entity-score: 100;
    height: 0.42rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: rgba(70, 83, 110, 0.10);
}

[data-ui="classic"] .crm-entity-bar span {
    display: block;
    width: calc(var(--entity-score) * 1%);
    max-width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 58%, var(--info)));
}

[data-ui="classic"] .crm-top-activity .card-body {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

[data-ui="classic"] .crm-top-activity .crm-tl-scroll {
    max-height: 230px !important;
}

[data-ui="classic"] .crm-top-activity form.flex-grow-1 {
    min-width: min(260px, 100%) !important;
}

[data-ui="classic"] .crm-top-activity details form {
    max-width: 100%;
}

[data-ui="classic"] .crm-activity-compose {
    padding-top: 0.72rem;
    border-top: 1px solid var(--surface-line);
}

[data-ui="classic"] .crm-commerce-row .card-header {
    align-items: center;
}

[data-ui="classic"] .crm-commerce-row details.mb-3,
[data-ui="classic"] .crm-relation-row details.mb-3,
[data-ui="classic"] .crm-journal-row form.mb-3 {
    padding-bottom: 0.82rem;
    border-bottom: 1px solid var(--surface-line);
}

[data-ui="classic"] .crm-empty-state {
    min-height: 138px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.3rem;
    padding: 1.15rem;
    text-align: center;
    color: var(--text-faint);
    border: 1px dashed rgba(86, 100, 128, 0.20);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.24);
}

[data-ui="classic"] .crm-empty-state--large {
    min-height: 190px;
}

[data-ui="classic"] .crm-empty-state i {
    font-size: 2.15rem;
    color: rgba(79, 92, 120, 0.45);
}

[data-ui="classic"] .crm-empty-state strong {
    color: var(--text-muted);
    font-weight: 680;
}

[data-ui="classic"] .crm-empty-state span {
    max-width: 28rem;
    font-size: 0.82rem;
}

[data-ui="classic"] .crm-relation-row > [class*="col-"],
[data-ui="classic"] .crm-journal-row > [class*="col-"] {
    display: flex;
}

[data-ui="classic"] .crm-relation-row .glass-card,
[data-ui="classic"] .crm-journal-row .glass-card {
    width: 100%;
}

[data-ui="classic"] .crm-relation-row .card-body,
[data-ui="classic"] .crm-journal-row .card-body {
    overflow-wrap: anywhere;
}

[data-ui="classic"] .glass-card .card-body > .text-faint.small:only-child,
[data-ui="classic"] .card .card-body > .text-faint.small:only-child {
    min-height: 88px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--text-faint) !important;
    border: 1px dashed rgba(87, 99, 126, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.24);
}

[data-ui="classic"] .crm-account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--crm-rail-width);
    gap: var(--crm-gap);
    align-items: start;
}

/* Fiche compte CRM : disposition à plat, une seule colonne, sans rail collant
   (corrige le chevauchement). Scopé via --flat : les autres pages qui réutilisent
   .crm-account-grid (tickets SAV/Com/Talent, doc Hudu) gardent leur rail à 2 colonnes. */
[data-ui="classic"] .crm-account-grid--flat {
    grid-template-columns: minmax(0, 1fr);
}

[data-ui="classic"] .crm-account-main {
    grid-column: 1;
    min-width: 0;
}

[data-ui="classic"] .crm-account-main--below {
    grid-column: 1 / -1;
    grid-row: 2;
}

[data-ui="classic"] .crm-side-rail {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 1.15rem;
    min-width: 0;
}

[data-ui="classic"] body:has(.app-announce--cron) .crm-side-rail {
    margin-top: calc(-76px - var(--crm-gap));
}

/* Page Documentation (/coffre) : des cartes pleine largeur séparent le bandeau cron
   de la grille → le rail n'est PAS adjacent au bandeau, donc pas de remontée négative
   (sinon le bloc Articles chevauche la carte du dessus). */
[data-ui="classic"] body:has(.app-announce--cron) .crm-side-rail--doc {
    margin-top: 0;
}

[data-ui="classic"] .crm-side-rail__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.88rem;
}

[data-ui="classic"] .crm-side-widgets .row {
    --bs-gutter-x: var(--crm-gap);
    --bs-gutter-y: var(--crm-gap);
}

/* En pied de fiche, les widgets sont pleine largeur en dessous de lg, 2 par ligne au-delà. */
[data-ui="classic"] .crm-side-widgets .row > [class*="col-"] {
    width: 100%;
}

@media (min-width: 992px) {
    [data-ui="classic"] .crm-side-widgets .row > .col-lg-6 {
        width: 50%;
    }
}

[data-ui="classic"] .crm-side-widgets .glass-card {
    min-height: 112px;
    border-radius: 18px;
}

[data-ui="classic"] .crm-side-widgets .card-header {
    min-height: 42px;
    padding: 0.72rem 0.88rem;
    font-size: 0.86rem;
}

[data-ui="classic"] .crm-side-widgets .card-body {
    padding: 1rem 1.05rem;
}

[data-ui="classic"] .crm-side-widgets .glass-table {
    font-size: 0.82rem;
}

[data-ui="classic"] .crm-side-widgets .glass-table td {
    padding: 0.46rem 0.36rem;
}

[data-ui="classic"] .crm-kpi-card {
    min-height: 0;
    border-radius: 14px;
}

[data-ui="classic"] .crm-kpi-card .card-body {
    padding: 0.6rem 0.72rem;
}

[data-ui="classic"] .crm-kpi-card .text-faint.small:first-child {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted) !important;
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.15;
}

[data-ui="classic"] .crm-kpi-card .text-faint.small:first-child i {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.78rem;
}

[data-ui="classic"] .crm-kpi-card .h4 {
    font-size: clamp(0.98rem, 1.1vw, 1.12rem);
    line-height: 1.05;
    font-weight: 720;
    letter-spacing: 0;
}

[data-ui="classic"] .crm-kpi-card .text-faint.small:last-child {
    font-size: 0.7rem;
    line-height: 1.15;
}

/* Bandeau KPI compact, remonté en tête de fiche : petites cartes réparties sur la largeur. */
[data-ui="classic"] .crm-kpi-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6rem;
}

@media (max-width: 1100px) {
    [data-ui="classic"] .crm-kpi-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    [data-ui="classic"] .crm-kpi-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    [data-ui="classic"] .crm-kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Cartes repliables (Entités du groupe, Dernières factures, Impayés, Enrichir…) :
   le <summary> sert d'en-tête de carte ; on masque le marqueur natif et on fait
   pivoter le chevron à l'ouverture. */
[data-ui="classic"] details.glass-card > summary {
    list-style: none;
    cursor: pointer;
}

[data-ui="classic"] details.glass-card > summary::-webkit-details-marker {
    display: none;
}

[data-ui="classic"] details.glass-card > summary .crm-caret {
    transition: transform 0.2s ease;
}

[data-ui="classic"] details.glass-card[open] > summary .crm-caret {
    transform: rotate(180deg);
}

/* Repliée dans le rail : la carte se réduit à son en-tête (pas de min-height vide). */
[data-ui="classic"] .crm-side-widgets details.glass-card:not([open]) {
    min-height: 0;
}

/* RDV remontés en tête : la liste défile en interne pour ne pas étirer la rangée du haut. */
[data-ui="classic"] .crm-rdv-card .card-body {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

[data-ui="classic"] .crm-rdv-scroll {
    max-height: 260px;
    overflow-y: auto;
    margin-right: -0.3rem;
    padding-right: 0.3rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(91, 103, 128, 0.28) transparent;
}

[data-ui="classic"] .crm-summary-row .glass-card {
    min-height: 100%;
}

[data-ui="classic"] .crm-timeline .js-tl-item.tl-hidden {
    display: none !important;
}

[data-ui="classic"] .crm-tl-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(91, 103, 128, 0.28) transparent;
}

[data-ui="classic"] .crm-mini-bar {
    min-width: 2px;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--accent), var(--info));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

[data-ui="classic"] .chart,
[data-ui="classic"] canvas,
[data-ui="classic"] .dash-progress {
    border-radius: var(--radius-control);
}

[data-ui="classic"] .dash-progress span,
[data-ui="classic"] .progress-bar {
    background: linear-gradient(90deg, var(--accent), var(--info));
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    [data-ui="classic"] .sidebar,
    [data-ui="classic"] .glass-hero,
    [data-ui="classic"] .hero,
    [data-ui="classic"] .glass-card,
    [data-ui="classic"] .card,
    [data-ui="classic"] .panel,
    [data-ui="classic"] .metric-card,
    [data-ui="classic"] .glass-metric,
    [data-ui="classic"] .bento-feature,
    [data-ui="classic"] .modal-content,
    [data-ui="classic"] .dropdown-menu,
    [data-ui="classic"] .ts-dropdown,
    [data-ui="classic"] .app-announce.alert {
        background: rgba(255, 255, 255, 0.92) !important;
    }

    [data-ui="classic"][data-theme="dark"] .sidebar,
    [data-ui="classic"][data-theme="dark"] .glass-hero,
    [data-ui="classic"][data-theme="dark"] .hero,
    [data-ui="classic"][data-theme="dark"] .glass-card,
    [data-ui="classic"][data-theme="dark"] .card,
    [data-ui="classic"][data-theme="dark"] .panel,
    [data-ui="classic"][data-theme="dark"] .metric-card,
    [data-ui="classic"][data-theme="dark"] .glass-metric,
    [data-ui="classic"][data-theme="dark"] .bento-feature,
    [data-ui="classic"][data-theme="dark"] .modal-content,
    [data-ui="classic"][data-theme="dark"] .dropdown-menu,
    [data-ui="classic"][data-theme="dark"] .ts-dropdown,
    [data-ui="classic"][data-theme="dark"] .app-announce.alert {
        background: rgba(18, 24, 36, 0.96) !important;
    }
}

@media (min-width: 1200px) {
    [data-ui="classic"] .crm-relation-row .col-4,
    [data-ui="classic"] .crm-relation-row .col-5,
    [data-ui="classic"] .crm-relation-row .col-6,
    [data-ui="classic"] .crm-relation-row .col-7,
    [data-ui="classic"] .crm-relation-row .col-8,
    [data-ui="classic"] .crm-relation-row .col-md-6,
    [data-ui="classic"] .crm-journal-row .col-5,
    [data-ui="classic"] .crm-journal-row .col-6,
    [data-ui="classic"] .crm-journal-row .col-7,
    [data-ui="classic"] .crm-journal-row .col-md-6,
    [data-ui="classic"] .crm-journal-row .col-md-7 {
        width: 100%;
    }
}

@media (max-width: 1240px) {
    [data-ui="classic"] body:has(.crm-account-grid) .app-announce-stack {
        max-width: none;
    }

    [data-ui="classic"] .crm-account-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    [data-ui="classic"] .crm-account-main,
    [data-ui="classic"] .crm-account-main--below,
    [data-ui="classic"] .crm-side-rail {
        grid-column: 1;
        grid-row: auto;
    }

    [data-ui="classic"] .crm-side-rail {
        position: static;
        margin-top: 0 !important;
    }

    [data-ui="classic"] .crm-side-rail__grid {
        grid-template-columns: repeat(5, minmax(130px, 1fr));
    }
}

@media (max-width: 1180px) {
    [data-ui="classic"] .crm-top-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-ui="classic"] .crm-top-activity {
        grid-column: 1 / -1;
    }
}

@media (max-width: 992px) {
    [data-ui="classic"] .sidebar {
        width: 72px;
        margin: 12px;
        top: 12px;
        height: calc(100vh - 24px);
        padding: 0.9rem 0.44rem;
        border-radius: 22px;
    }

    [data-ui="classic"] .crm-side-rail__grid {
        grid-template-columns: repeat(3, minmax(132px, 1fr));
    }

    [data-ui="classic"] .crm-account-hero__content {
        grid-template-columns: auto minmax(0, 1fr);
    }

    [data-ui="classic"] .crm-account-legal {
        grid-column: 1 / -1;
        justify-self: start;
        min-width: 0;
        text-align: left !important;
    }
}

@media (max-width: 768px) {
    [data-ui="classic"] main.main {
        padding-top: 4.25rem;
        padding-inline: 0.82rem;
    }

    [data-ui="classic"] .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(84vw, 320px);
        height: 100vh;
        height: 100dvh;
        margin: 0;
        padding: 1.2rem 0.9rem;
        border-radius: 0 24px 24px 0;
        z-index: 1045;
        transform: translateX(-105%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
    }

    [data-ui="classic"] body.nav-open .sidebar {
        transform: translateX(0);
    }

    [data-ui="classic"] .sidebar-brand span:not(.brand-mark),
    [data-ui="classic"] .sidebar-link span,
    [data-ui="classic"] .sidebar-logout span {
        display: inline;
    }

    [data-ui="classic"] .sidebar-section-title {
        display: block;
    }
    /* ...mais un titre repliable doit rester en flex, sinon son chevron ::after
       (boite dont la width/height sont ignorees en display:block) se reduit a
       ses deux bordures et s'affiche comme un petit trait vertical « | ». */
    [data-ui="classic"] .sidebar-section-title.is-collapsible {
        display: flex;
    }

    [data-ui="classic"] .sidebar-section.collapsed .sidebar-link {
        display: none;
    }

    [data-ui="classic"] .sidebar-link {
        justify-content: flex-start;
    }

    [data-ui="classic"] .crm-side-rail__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-ui="classic"] .crm-top-row {
        grid-template-columns: 1fr;
    }

    [data-ui="classic"] .crm-top-activity {
        grid-column: auto;
    }
}

@media (max-width: 560px) {
    [data-ui="classic"] .glass-card .card-header,
    [data-ui="classic"] .card .card-header {
        padding: 0.78rem 0.86rem;
    }

    [data-ui="classic"] .glass-card .card-body,
    [data-ui="classic"] .card .card-body {
        padding: 0.88rem;
    }

    [data-ui="classic"] .crm-side-rail__grid {
        grid-template-columns: 1fr;
    }

    [data-ui="classic"] .crm-account-hero__content {
        grid-template-columns: 1fr;
    }

    [data-ui="classic"] .crm-account-hero__back {
        justify-self: start;
    }

    [data-ui="classic"] .crm-health-layout,
    [data-ui="classic"] .crm-entity-row {
        grid-template-columns: 1fr;
    }

    [data-ui="classic"] .crm-health-ring {
        justify-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-ui="classic"] *,
    [data-ui="classic"] *::before,
    [data-ui="classic"] *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ============================================================
   Documentation — Gestion de baies (racks 19")   [.doc-rack-*]
   Élévation visuelle d'une baie : châssis métal sombre + réglette
   U + équipements colorés posés à une position U. Composant
   AUTONOME (scopé .doc-rack-*) : n'altère aucun style existant.
   ============================================================ */
.doc-rack-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 991px) { .doc-rack-layout { grid-template-columns: 1fr; } }

.doc-rack-panel {
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-soft, rgba(40, 55, 95, 0.08));
    border-radius: 14px;
    padding: 1rem 1.1rem 1.2rem;
}
.doc-rack-faces { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; flex-wrap: wrap; }

.doc-rack-elevation { display: none; gap: 0.4rem; justify-content: center; --u: 30px; }
.doc-rack-elevation.is-active { display: flex; }

.doc-rack-numbers {
    display: grid;
    grid-template-rows: repeat(var(--u-count), var(--u));
    font-size: 0.62rem;
    color: var(--text-faint, #768094);
    user-select: none;
    flex: 0 0 auto;
}
.doc-rack-numbers span { display: flex; align-items: center; justify-content: center; line-height: 1; }

/* Le châssis : cadre métal sombre + rails à trous (toujours sombre, lisible en thème clair comme sombre). */
.doc-rack-frame {
    position: relative;
    display: grid;
    grid-template-rows: repeat(var(--u-count), var(--u));
    flex: 1 1 auto;
    max-width: 480px;
    min-width: 0;
    background: linear-gradient(180deg, #2a2f3a, #232833);
    border: 6px solid #1c2027;
    border-radius: 8px;
    padding: 0 11px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 24px rgba(15, 20, 30, 0.25);
}
.doc-rack-frame::before, .doc-rack-frame::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 9px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.20) 1.2px, transparent 1.6px);
    background-size: 9px var(--u);
    background-position: center 7px;
    opacity: 0.55; pointer-events: none;
}
.doc-rack-frame::before { left: 1px; }
.doc-rack-frame::after  { right: 1px; }

.doc-rack-slot {
    grid-column: 1;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
    position: relative; z-index: 1;
}
.doc-rack-slot.is-clickable { cursor: copy; }
.doc-rack-slot.is-clickable:hover { background: rgba(80, 140, 255, 0.16); }

.doc-rack-unit {
    grid-column: 1; z-index: 3; position: relative;
    margin: 1px 0;
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0 0.55rem;
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.20)), var(--c, #415061);
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.3);
    overflow: hidden; cursor: grab; user-select: none; min-width: 0;
}
.doc-rack-unit.is-dragging { cursor: grabbing; opacity: 0.94; z-index: 10; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.doc-rack-unit-ico { font-size: 1rem; flex: 0 0 auto; opacity: 0.95; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); }
.doc-rack-unit-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; flex: 1 1 auto; }
.doc-rack-unit.is-tall .doc-rack-unit-body { justify-content: center; }
.doc-rack-unit-name { color: #fff; font-weight: 600; font-size: 0.8rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); }
a.doc-rack-unit-name:hover { text-decoration: underline; color: #fff; }
.doc-rack-unit-meta { font-size: 0.62rem; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
.doc-rack-unit-tools { display: none; gap: 0.15rem; flex: 0 0 auto; align-items: center; }
.doc-rack-unit:hover .doc-rack-unit-tools { display: flex; }
.doc-rack-unit-tools form { display: inline; margin: 0; }
.doc-rack-unit-btn { background: rgba(0, 0, 0, 0.28); border: none; color: #fff; border-radius: 4px; width: 22px; height: 22px; font-size: 0.72rem; line-height: 1; cursor: pointer; padding: 0; }
.doc-rack-unit-btn:hover { background: rgba(0, 0, 0, 0.55); }
.doc-rack-resize { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 34px; height: 7px; cursor: ns-resize; border-radius: 3px 3px 0 0; background: rgba(255, 255, 255, 0.28); display: none; }
.doc-rack-unit:hover .doc-rack-resize { display: block; }

.doc-rack-empty {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    text-align: center; color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; padding: 0 1rem; z-index: 2;
}

/* Sous-ligne d'infos sur un équipement assez haut (IP, conso, câblage). */
.doc-rack-unit-sub {
    font-size: 0.62rem; opacity: 0.82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); margin-top: 1px;
}
.doc-rack-unit-sub i { opacity: 0.9; }

/* Bloc « Paramètres détaillés » repliable des formulaires. */
.doc-rack-more { border-top: 1px dashed var(--border-soft, rgba(40, 55, 95, 0.12)); padding-top: 0.6rem; margin-top: 0.2rem; }
.doc-rack-more > summary { cursor: pointer; list-style: revert; }
.doc-rack-more > summary:hover { color: var(--text-strong, inherit); }

/* ============================================================================
   Congés — Planning TIMELINE par salarié (conges/equipe.html.twig, vue planning)
   Une ligne par collaborateur, des barres positionnées à la journée sur le mois.
   Les barres se placent en % sur une piste ; le fond marque week-ends / fériés /
   aujourd'hui. `--tl-*` pilotent les dimensions ; les tons réutilisent la charte.
   ============================================================================ */
.cal-tl {
    --tl-name-w: 190px;   /* largeur colonne collaborateur */
    --tl-daymin: 30px;    /* largeur mini d'un jour (scroll horizontal au-delà) */
    --tl-bar-h: 26px;     /* hauteur d'une barre d'absence */
    --tl-gap: 5px;        /* espace vertical entre barres empilées */
    min-width: calc(var(--tl-name-w) + var(--ndays) * var(--tl-daymin));
}
.cal-tl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cal-tl-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-soft); }
.cal-tl-row:last-child { border-bottom: none; }

/* Colonne collaborateur (figée à gauche pendant le scroll horizontal). */
.cal-tl-name-col {
    flex: 0 0 var(--tl-name-w); width: var(--tl-name-w);
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; min-width: 0;
    position: sticky; left: 0; z-index: 3;
    background: var(--bg-elevated);
    border-right: 1px solid var(--border-soft);
}
.cal-tl-name { font-weight: 600; font-size: 0.86rem; min-width: 0; }
.cal-tl-avatar {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700; color: #fff;
    background: var(--accent-grad); letter-spacing: 0.02em;
}

/* En-tête des jours. */
.cal-tl-head { position: sticky; top: 0; z-index: 4; background: var(--bg-elevated); }
.cal-tl-head .cal-tl-name-col { z-index: 5; background: var(--bg-elevated); }
.cal-tl-head-track {
    display: grid; grid-template-columns: repeat(var(--ndays), 1fr);
    height: 42px; align-items: stretch;
}
.cal-tl-daycol {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-left: 1px solid var(--border-soft); line-height: 1.1;
}
.cal-tl-daycol .cal-tl-dow { font-size: 0.6rem; color: var(--text-faint); text-transform: uppercase; }
.cal-tl-daycol .cal-tl-dom { font-size: 0.78rem; font-weight: 600; }
.cal-tl-daycol.is-weekend { background: rgba(40, 55, 95, 0.05); }
.cal-tl-daycol.is-ferie   { background: var(--warn-soft); }
.cal-tl-daycol.is-today   { box-shadow: inset 0 -2px 0 0 var(--accent); }
.cal-tl-daycol.is-today .cal-tl-dom { color: var(--accent); }

/* Piste d'une ligne : fond en grille + barres positionnées en absolu. */
.cal-tl-track { position: relative; flex: 1 1 auto; min-width: 0; }
.cal-tl-bg {
    position: absolute; inset: 0; display: grid;
    grid-template-columns: repeat(var(--ndays), 1fr);
}
.cal-tl-cell { border-left: 1px solid var(--border-soft); }
.cal-tl-cell.is-weekend { background: rgba(40, 55, 95, 0.045); }
.cal-tl-cell.is-ferie   { background: var(--warn-soft); }
.cal-tl-cell.is-today   { background: var(--accent-soft); }

/* Barre d'absence. */
.cal-tl-bar {
    position: absolute; height: var(--tl-bar-h);
    display: flex; align-items: center; gap: 0.3rem;
    padding: 0 0.5rem; border-radius: 7px;
    font-size: 0.74rem; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden;
    box-shadow: 0 1px 3px rgba(20, 30, 60, 0.18);
    background: #8A94A6; /* défaut (tons neutres : sans_solde / autre / récup) */
    cursor: default;
}
.cal-tl-bar i { flex: 0 0 auto; font-size: 0.82rem; }
.cal-tl-bar-label { overflow: hidden; text-overflow: ellipsis; }
.cal-tl-bar.tone-primary { background: var(--accent-grad); }
.cal-tl-bar.tone-accent  { background: var(--accent); }
.cal-tl-bar.tone-success { background: var(--success); }
.cal-tl-bar.tone-warn    { background: var(--warn); }
.cal-tl-bar.tone-danger  { background: var(--danger); }
.cal-tl-bar.tone-ghost   { background: #8A94A6; }

/* Demande en attente : hachures diagonales par-dessus le ton. */
.cal-tl-bar.is-pending {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.32) 0, rgba(255, 255, 255, 0.32) 7px,
        rgba(255, 255, 255, 0) 7px, rgba(255, 255, 255, 0) 14px
    );
    box-shadow: 0 1px 3px rgba(20, 30, 60, 0.18), inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}

/* Bascule Planning / Liste. */
.cal-vue-toggle .glass-btn.is-active {
    background: var(--accent-grad); color: #fff; border-color: transparent;
}

/* Légende : puce « en attente ». */
.cal-tl-legend-pending { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--text-faint); }
.cal-tl-legend-swatch {
    width: 26px; height: 14px; border-radius: 5px; background: #8A94A6;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.4) 5px,
        rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px
    );
}

/* --- Congés / equipe : sélecteur de période + repères de mois ---------------- */
.border-top-soft { border-top: 1px solid var(--border-soft); }
.cal-date-input { width: auto; min-width: 140px; }
.cal-preset-toggle .glass-btn.is-active {
    background: var(--accent-grad); color: #fff; border-color: transparent;
}
/* Début de mois : séparateur plus marqué sur les plages multi-mois. */
.cal-tl-daycol.is-month-start,
.cal-tl-cell.is-month-start { border-left: 1px solid var(--border-strong); }

/* --- Congés / vue PAIE : récap par collaborateur ----------------------------- */
.recap-lines { display: flex; flex-direction: column; gap: 0.3rem; }
.recap-line {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.35rem 0.5rem; border-radius: 8px;
    background: rgba(40, 55, 95, 0.035);
}
.recap-line.is-pending { opacity: 0.7; }
.recap-code {
    flex: 0 0 auto; min-width: 3.2rem; text-align: center;
    font-family: 'SF Mono', ui-monospace, monospace; font-weight: 700; font-size: 0.74rem;
    padding: 0.12rem 0.45rem; border-radius: 6px;
    background: rgba(40, 55, 95, 0.10); color: var(--text-faint);
    border: 1px solid var(--border-soft);
}
.recap-code.tone-primary { background: var(--accent-soft);  color: var(--accent);  border-color: rgba(10, 132, 255, 0.22); }
.recap-code.tone-accent  { background: var(--accent-soft);  color: var(--accent);  border-color: rgba(10, 132, 255, 0.22); }
.recap-code.tone-success { background: var(--success-soft); color: #1F8A40;        border-color: rgba(52, 199, 89, 0.20); }
.recap-code.tone-warn    { background: var(--warn-soft);    color: #B95C00;        border-color: rgba(255, 149, 0, 0.22); }
.recap-code.tone-danger  { background: var(--danger-soft);  color: #B0241A;        border-color: rgba(255, 59, 48, 0.22); }
.recap-phrase { flex: 1 1 auto; min-width: 0; font-size: 0.88rem; }
.recap-nb { flex: 0 0 auto; font-weight: 600; font-size: 0.82rem; color: var(--text-faint); }

/* --- Congés / planning : saisie admin (cases cliquables + bouton « + ») ------- */
.cal-tl[data-can-add="1"] .cal-tl-cell { cursor: pointer; transition: background 0.1s ease; }
.cal-tl[data-can-add="1"] .cal-tl-cell:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.35); }
.cal-tl-add-btn {
    margin-left: auto; flex: 0 0 auto;
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-strong); background: transparent; color: var(--accent);
    font-size: 0.72rem; line-height: 1; cursor: pointer; padding: 0;
    opacity: 0; transition: opacity 0.12s ease, background 0.12s ease;
}
.cal-tl-row:hover .cal-tl-add-btn { opacity: 1; }
.cal-tl-add-btn:hover { background: var(--accent-soft); }

/* =====================================================================
   MODE DOCUMENTATION (body.doc-focus)
   Menu global de l'app REPLIABLE (tiroir masqué par défaut sur desktop,
   rouvert via le bouton flottant #navToggle) + menu latéral des CATÉGORIES
   propre à la page (.doc-catnav). Donne à la doc une nav "façon Hudu" :
   les catégories à gauche, le contenu à droite. Cf. templates hudu/*.
   Le comportement mobile natif (rail/tiroir <=992/<=768px) reste inchangé :
   les overrides desktop ci-dessous sont scopés à min-width:993px.
   ===================================================================== */

/* --- Layout deux colonnes : menu catégories + contenu --- */
.doc-shell { display: flex; align-items: flex-start; gap: 1.1rem; }
.doc-catnav {
    width: 244px;
    flex-shrink: 0;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 0.6rem;
    border-radius: 16px;
    background: var(--bg-card);
    border: 0.5px solid var(--border-soft);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    box-shadow: 0 10px 30px -14px rgba(31, 64, 140, 0.16);
}
.doc-body { flex: 1 1 auto; min-width: 0; }

.doc-catnav-head {
    display: flex; align-items: center; gap: 0.45rem;
    font-weight: 600; font-size: 0.95rem;
    color: var(--text-strong);
    padding: 0.35rem 0.55rem 0.55rem;
}
.doc-cat-folder {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.02em;
    font-weight: 600; color: var(--text-muted);
    padding: 0.55rem 0.55rem 0.25rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.doc-cat-folder i { opacity: 0.7; }
.doc-cat-link {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.42rem 0.55rem;
    border-radius: 9px;
    color: var(--text-strong);
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.12s ease, color 0.12s ease;
}
.doc-cat-link .doc-cat-name,
.doc-cat-link > span:first-child {
    display: flex; align-items: center; gap: 0.5rem;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.9rem;
}
.doc-cat-count {
    flex-shrink: 0;
    font-size: 0.75rem; font-weight: 600;
    color: var(--text-muted);
    background: var(--accent-soft);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
}
.doc-cat-link:hover { background: var(--accent-soft); color: var(--accent); }
.doc-cat-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.doc-cat-link.active .doc-cat-count { color: var(--accent); }
.doc-cat-all { margin-bottom: 0.15rem; font-weight: 600; }

/* Empilement sur écrans étroits : le menu passe au-dessus du contenu. */
@media (max-width: 900px) {
    .doc-shell { flex-direction: column; }
    .doc-catnav {
        width: auto; position: static; max-height: none;
        display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center;
    }
    .doc-catnav-head { width: 100%; }
    .doc-cat-folder { width: 100%; }
}

/* --- Menu global repliable (desktop uniquement) --- */
@media (min-width: 993px) {
    /* La sidebar de l'app quitte le flux et devient un tiroir hors-écran. */
    body.doc-focus > #appSidebar.sidebar {
        position: fixed;
        left: 0; top: 0;
        margin: 12px;
        width: 264px;
        height: calc(100vh - 24px);
        transform: translateX(calc(-100% - 20px));
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1050;
    }
    body.doc-focus.nav-open > #appSidebar.sidebar { transform: translateX(0); }

    /* Bouton flottant pour rouvrir le menu global. */
    body.doc-focus > .nav-toggle {
        display: flex; align-items: center; justify-content: center;
        position: fixed; top: 14px; left: 14px; z-index: 1035;
        width: 40px; height: 40px; padding: 0; font-size: 1.25rem;
        color: var(--text-strong);
        background: var(--bg-elevated);
        border: 0.5px solid var(--border-soft);
        border-radius: 11px; cursor: pointer;
        box-shadow: 0 4px 14px -4px rgba(31, 64, 140, 0.25);
    }
    body.doc-focus > .nav-toggle:active { transform: scale(0.94); }

    /* Voile derrière le tiroir ouvert. */
    body.doc-focus > .nav-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1045;
        background: rgba(15, 23, 42, 0.42);
        -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
        opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
    }
    body.doc-focus.nav-open > .nav-backdrop { opacity: 1; pointer-events: auto; }

    /* Le contenu récupère toute la largeur ; on réserve un couloir à gauche
       pour le bouton flottant afin qu'il ne recouvre pas le titre de page. */
    body.doc-focus > main.main { padding-left: 68px; }
}

/* Accueil Documentation : les catégories sont informatives (pas de route de
   filtre global) -> lignes statiques, sans état survol/actif. */
.doc-cat-row { cursor: default; }
.doc-cat-row:hover { background: transparent; color: var(--text-strong); }

/* =====================================================================
   NAVIGATION SIMPLIFIEE PAR ESPACES (data-nav="rail")
   ---------------------------------------------------------------------
   Huit espaces maximum dans une fine colonne (#appRail, construit par
   app.js) ; la sidebar devient un panneau ne montrant que les modules de
   l'espace actif, avec un seul module ouvert a la fois.
   Habillage = classic (data-ui reste "classic"), donc
   clair ET sombre heritent sans regle supplementaire. Desktop uniquement :
   en mobile (<=768px) on retombe sur la sidebar + bouton hamburger.
===================================================================== */
[data-nav="rail"] .app-rail {
    width: 64px;
    flex: 0 0 64px;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 0 10px;
    background: var(--bg-sidebar);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    /* Bord droit plus marque (--border-strong) : le rail et le panneau des
       modules partagent le meme fond translucide (--bg-sidebar) ; sans ce
       filet net, les deux colonnes se fondaient en une seule masse pale. */
    border-right: 1px solid var(--border-strong);
    z-index: 3;
}
[data-nav="rail"] .app-rail-brand {
    width: 38px; height: 38px;
    border-radius: 11px;
    overflow: hidden;
    display: grid; place-items: center;
    margin-bottom: 10px;
    flex: none;
    font-weight: 800; color: var(--accent);
    text-decoration: none;
}
[data-nav="rail"] .app-rail-brand:hover { transform: translateY(-1px); }
[data-nav="rail"] .app-rail-brand img { width: 100%; height: 100%; object-fit: contain; }
[data-nav="rail"] .rail-btn {
    position: relative;
    width: 46px; height: 46px;
    border: 0; background: transparent;
    border-radius: 12px;
    color: var(--text-faint);
    display: grid; place-items: center;
    cursor: pointer;
    transition: background .14s, color .14s;
}
[data-nav="rail"] .rail-btn i { font-size: 1.2rem; line-height: 1; }
/* Survol NEUTRE (--border-soft, mode-aware) vs actif ACCENT : les deux etaient
   au meme --accent-soft, l'espace courant ne se distinguait donc pas du simple
   survol. Desormais survol = gris discret, actif = teinte accent + barre. */
[data-nav="rail"] .rail-btn:hover { color: var(--text-strong); background: var(--border-soft); }
[data-nav="rail"] .rail-btn.active { color: var(--accent); background: var(--accent-soft); }
[data-nav="rail"] .rail-btn.active::before {
    content: "";
    /* left:-9px = pile le bord gauche du rail : le bouton (46px) est centre
       dans le rail (64px), soit 9px de marge. L'ancien -14px placait la barre
       5px HORS du rail -> repere d'espace actif invisible. */
    position: absolute; left: -9px; top: 9px; bottom: 9px;
    width: 3px; border-radius: 0 3px 3px 0;
    background: var(--accent);
}
[data-nav="rail"] .rail-btn[data-domain="admin"] { margin-top: auto; }
[data-nav="rail"] .rail-dot {
    position: absolute; top: 8px; right: 8px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger);
    border: 2px solid var(--bg-sidebar);
}
[data-nav="rail"] .rail-tip {
    position: absolute; left: 56px; top: 50%;
    transform: translateY(-50%) scale(.96);
    transform-origin: left center;
    background: var(--bg-elevated);
    color: var(--text-strong);
    font-size: .8rem; font-weight: 500;
    padding: 6px 10px; border-radius: 8px;
    white-space: nowrap;
    box-shadow: var(--glass-shadow-sm);
    border: 1px solid var(--border-soft);
    opacity: 0; pointer-events: none;
    transition: opacity .13s, transform .13s;
    z-index: 20;
}
[data-nav="rail"] .rail-btn:hover .rail-tip,
[data-nav="rail"] .rail-btn:focus-visible .rail-tip {
    opacity: 1; transform: translateY(-50%) scale(1);
}
/* La sidebar devient panneau : la marque vit dans le rail, les intertitres
   de domaine sont remplaces par l'entete de panneau. */
[data-nav="rail"] .sidebar-brand { display: none; }
[data-nav="rail"] .sidebar-scroll .sidebar-group-title { display: none; }
[data-nav="rail"] .rail-panel-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1px 10px;
    margin: 0 -0.35rem 0.35rem;
    padding: 8px 16px 12px;
    background: linear-gradient(180deg, var(--bg-sidebar) 78%, transparent);
}
[data-nav="rail"] .rail-panel-kicker {
    grid-column: 1 / -1;
    color: var(--text-faint);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
[data-nav="rail"] .rail-panel-title {
    min-width: 0;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-nav="rail"] .rail-panel-meta {
    color: var(--text-faint);
    font-size: 0.68rem;
    line-height: 1.3;
    white-space: nowrap;
}

@media (min-width: 769px) {
    /* Les modules fermes restent des choix lisibles, pas des sous-titres
       minuscules. Le module ouvert devient le seul niveau contenant des pages. */
    [data-nav="rail"] .sidebar-scroll > .sidebar-section {
        margin-top: 0.35rem;
        padding: 0.18rem;
        border: 1px solid transparent;
        border-radius: 12px;
    }
    [data-nav="rail"] .sidebar-scroll > .sidebar-section:not(.collapsed) {
        /* Module ouvert = vraie carte surelevee (--bg-elevated, opaque et
           mode-aware) plutot qu'un blanc a 24% qui se voyait a peine sur le
           panneau. Se detache nettement des modules fermes, en clair ET sombre. */
        background: var(--bg-elevated);
        border-color: var(--border-strong);
    }
    [data-nav="rail"] .sidebar-scroll > .sidebar-section > .sidebar-section-title {
        min-height: 36px;
        padding: 0.55rem 0.62rem;
        color: var(--text-muted);
        font-size: 0.76rem;
        font-weight: 620;
        letter-spacing: 0;
        line-height: 1.2;
        text-transform: none;
    }
    [data-nav="rail"] .sidebar-scroll > .sidebar-section.collapsed > .sidebar-section-title:hover {
        color: var(--text-strong);
        background: var(--glass-bg-active);
    }
    [data-nav="rail"] .sidebar-scroll > .sidebar-section:not(.collapsed) > .sidebar-section-title {
        color: var(--text-strong);
    }
    [data-nav="rail"] .sidebar-scroll > .sidebar-section > .sidebar-link {
        margin-inline: 0.12rem;
    }
}

/* Entre tablette et petit desktop, la sidebar historique passe normalement en
   icones seules. En mode simplifie, elle est le panneau contextuel : on conserve
   donc sa largeur et ses libelles jusqu'au vrai breakpoint mobile. */
@media (min-width: 769px) and (max-width: 992px) {
    [data-nav="rail"] .sidebar {
        width: var(--sidebar-width);
        padding: 0.8rem 0.62rem;
    }
    [data-nav="rail"] .sidebar-section-title { display: flex; }
    [data-nav="rail"] .sidebar-link {
        justify-content: flex-start;
        padding: 0.36rem 0.62rem;
    }
    [data-nav="rail"] .sidebar-link span,
    [data-nav="rail"] .sidebar-user-meta,
    [data-nav="rail"] .sidebar-logout span,
    [data-nav="rail"] .sidebar-user-cog { display: flex; }
    [data-nav="rail"] .theme-toggle { flex-direction: row; }
    [data-nav="rail"] .sidebar-notif { justify-content: flex-start; }
    [data-nav="rail"] .sidebar-notif span:not(.notif-badge) { display: inline; }
    [data-nav="rail"] .sidebar-link .sidebar-badge,
    [data-nav="rail"] .notif-badge {
        position: static;
        display: inline-block;
        margin-left: auto;
        box-shadow: none;
    }
}
@media (max-width: 768px) {
    [data-nav="rail"] .app-rail { display: none; }
    [data-nav="rail"] .sidebar-brand { display: flex; }
    [data-nav="rail"] .sidebar-scroll .sidebar-group-title { display: block; }
    [data-nav="rail"] .rail-panel-head { display: none; }
}

/* =====================================================================
   THEME « MODERNE » (data-skin="flat")  — opt-in via /compte/profil
   ---------------------------------------------------------------------
   Reprend l'identite de la refonte (redesign.patch) : accent bleu marine,
   surfaces PLATES (fini le verre depoli : degrade / flou / reflet retires)
   et rail de navigation SOMBRE facon « cockpit ».
   C'est une PEAU posee par-dessus l'habillage classic (data-ui reste
   "classic" -> tout le cascade est herite) + la navigation rail existante
   (data-nav="rail"). On ne reecrit pas l'appli, on la re-habille, et
   UNIQUEMENT dans ce mode. Fonctionne en clair ET en sombre via les tokens
   --flat-* (mode-aware) ; le rail, lui, reste marine dans les deux modes
   (parti pris de design, comme la reference).
   Hors perimetre (car cela exige un changement de HTML, pas activable par
   un theme CSS) : boutons icone seule, liseres colores card-accent, refonte
   des onglets CRM. Tout ca vit dans le patch global, pas dans ce theme.
   ===================================================================== */
html[data-skin="flat"] {
    --accent: #111a2e;
    --accent-2: #24365c;
    --accent-soft: rgba(17, 26, 46, 0.10);
    --accent-halo: 0 0 0 4px rgba(17, 26, 46, 0.16);
    --focus-ring: 0 0 0 4px rgba(17, 26, 46, 0.16);
    --glass-bg-active: rgba(17, 26, 46, 0.08);
    /* Surfaces plates reutilisees partout ci-dessous (mode-aware). */
    --flat-surface: #ffffff;
    --flat-line: rgba(40, 55, 95, 0.12);
    --flat-shadow: 0 1px 2px rgba(20, 30, 50, 0.05);
    --flat-shadow-hover: 0 4px 14px -6px rgba(20, 30, 50, 0.12);
}
html[data-skin="flat"][data-theme="dark"] {
    /* Le marine se fondrait dans un fond deja sombre : variante plus claire. */
    --accent: #5578b0;
    --accent-2: #6c8cc4;
    --accent-soft: rgba(85, 120, 176, 0.24);
    --accent-halo: 0 0 0 4px rgba(85, 120, 176, 0.24);
    --focus-ring: 0 0 0 4px rgba(85, 120, 176, 0.26);
    --glass-bg-active: rgba(85, 120, 176, 0.18);
    --flat-surface: #20242e;
    --flat-line: rgba(255, 255, 255, 0.10);
    --flat-shadow: none;
    --flat-shadow-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}

/* --- Fond de page plat (retire le « wallpaper » pastel diffus) --- */
html[data-skin="flat"] body { background: var(--bg-app) !important; }
html[data-skin="flat"] body::before { content: none !important; }

/* --- Cartes / metriques / modales : blocs plats, plus de verre --- */
html[data-skin="flat"] .glass-card,
html[data-skin="flat"] .card,
html[data-skin="flat"] .panel,
html[data-skin="flat"] .glass-metric,
html[data-skin="flat"] .metric-card,
html[data-skin="flat"] .modal-content {
    background: var(--flat-surface) !important;
    border: 1px solid var(--flat-line) !important;
    border-radius: 12px !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: var(--flat-shadow) !important;
}
html[data-skin="flat"] .glass-card::before,
html[data-skin="flat"] .card::before,
html[data-skin="flat"] .panel::before,
html[data-skin="flat"] .glass-metric::before,
html[data-skin="flat"] .metric-card::before,
html[data-skin="flat"] .glass-hero::before,
html[data-skin="flat"] .hero::before { content: none !important; }
html[data-skin="flat"] .glass-card:hover,
html[data-skin="flat"] .card:hover,
html[data-skin="flat"] .glass-metric:hover,
html[data-skin="flat"] .metric-card:hover {
    box-shadow: var(--flat-shadow-hover) !important;
    transform: none !important;
}

/* --- En-tete de page : carte plate sobre au lieu du bandeau verre --- */
html[data-skin="flat"] .glass-hero,
html[data-skin="flat"] .hero {
    background: var(--flat-surface) !important;
    border: 1px solid var(--flat-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--flat-shadow) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 12px 16px !important;
}

/* --- Boutons : aplats francs, plus de degrade / flou / ombre interne --- */
html[data-skin="flat"] .glass-btn,
html[data-skin="flat"] .btn {
    border-radius: 8px !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    background: var(--flat-surface) !important;
    border: 1px solid var(--flat-line) !important;
}
html[data-skin="flat"] .glass-btn:hover,
html[data-skin="flat"] .btn:hover {
    box-shadow: none !important;
    transform: none !important;
    background: var(--glass-bg-active) !important;
}
html[data-skin="flat"] .glass-btn.tone-primary,
html[data-skin="flat"] .btn-primary {
    background: var(--accent) !important;
    border-color: transparent !important;
    color: #fff !important;
}
html[data-skin="flat"] .glass-btn.tone-primary:hover,
html[data-skin="flat"] .btn-primary:hover {
    background: var(--accent-2) !important;
    box-shadow: var(--accent-halo) !important;
    color: #fff !important;
}
html[data-skin="flat"] .glass-btn.tone-success, html[data-skin="flat"] .btn-success { background: var(--success) !important; border-color: transparent !important; color: #fff !important; }
html[data-skin="flat"] .glass-btn.tone-danger,  html[data-skin="flat"] .btn-danger  { background: var(--danger)  !important; border-color: transparent !important; color: #fff !important; }
html[data-skin="flat"] .glass-btn.tone-warn,    html[data-skin="flat"] .btn-warning { background: var(--warn)    !important; border-color: transparent !important; color: #fff !important; }
html[data-skin="flat"] .glass-btn.tone-ghost,
html[data-skin="flat"] .btn-outline-primary,
html[data-skin="flat"] .btn-outline-secondary,
html[data-skin="flat"] .btn-outline-danger,
html[data-skin="flat"] .btn-outline-light {
    background: transparent !important;
    border-color: var(--flat-line) !important;
}
html[data-skin="flat"] .glass-btn.tone-ghost:hover,
html[data-skin="flat"] .btn-outline-primary:hover,
html[data-skin="flat"] .btn-outline-secondary:hover { background: var(--glass-bg-active) !important; }

/* --- Champs de saisie : plats, bord net, focus marine --- */
html[data-skin="flat"] .glass-input,
html[data-skin="flat"] .glass-select,
html[data-skin="flat"] .form-control,
html[data-skin="flat"] .form-select {
    border-radius: 8px !important;
    background: var(--flat-surface) !important;
    border: 1px solid var(--flat-line) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
html[data-skin="flat"] .form-control:focus,
html[data-skin="flat"] .form-select:focus,
html[data-skin="flat"] .glass-input:focus,
html[data-skin="flat"] .glass-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* --- Tableaux : en-tete plein, sans flou --- */
html[data-skin="flat"] .glass-table thead th,
html[data-skin="flat"] .table thead th {
    background: var(--bg-sidebar) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* --- Pagination epuree (page active = pastille teintee, pas un pave) --- */
html[data-skin="flat"] .page-link {
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--text-faint) !important;
    box-shadow: none !important;
}
html[data-skin="flat"] .page-item.active .page-link,
html[data-skin="flat"] .dt-container .active > .page-link {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: transparent !important;
}

/* =====================================================================
   Chrome SOMBRE du rail (identite « cockpit » de la reference). Le rail
   reste marine quel que soit le mode couleur : parti pris de design, pas
   un mode. Le panneau des modules garde l'habillage clair.
   ===================================================================== */
html[data-skin="flat"] .app-rail {
    background: #111a2e !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html[data-skin="flat"] .app-rail-brand { color: #fff; }
html[data-skin="flat"] .rail-btn { color: rgba(255, 255, 255, 0.55); }
html[data-skin="flat"] .rail-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
html[data-skin="flat"] .rail-btn.active { color: #fff; background: rgba(255, 255, 255, 0.14); }
html[data-skin="flat"] .rail-btn.active::before { background: #fff; }
html[data-skin="flat"] .rail-dot { border-color: #111a2e; }