/* ==========================================================================
   SIPRID — Design System
   Systeme Integre de Pilotage, de Reporting et d'Intelligence Decisionnelle
   METFP / DIDN — Madagascar
   --------------------------------------------------------------------------
   Feuille unique servie par templates/base.html.twig.

     01. Tokens (couleurs, espacements, rayons, ombres, typographie)
     02. Alias de compatibilite (--sip-* historiques, utilises en style inline
         dans une vingtaine de templates : ne jamais les supprimer)
     03. Base & typographie
     04. Layout applicatif (shell, sidebar, topbar, contenu)
     05. Navigation laterale (rail vertical + accent, inspiration Windows 11)
     06. Composants (boutons, champs, cartes, tableaux, badges, alertes...)
     07. Ecrans d'authentification
     08. Tableau de bord
     09. Ecrans metier existants (concepteur, saisie, BI) — conserves
     10. Responsive
     11. Utilitaires & impression
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root {
    /* --- Neutres : base de toute l'interface --- */
    --sip-n0:   #ffffff;
    --sip-n25:  #fbfcfd;
    --sip-n50:  #f6f8fa;
    --sip-n100: #eff2f6;
    --sip-n200: #e3e8ef;
    --sip-n300: #cdd5e0;
    --sip-n400: #9aa5b4;
    --sip-n500: #6c7789;
    --sip-n600: #4e5966;
    --sip-n700: #384250;
    --sip-n800: #232b36;
    --sip-n900: #141a21;

    /* --- Marque : bleu institutionnel METFP --- */
    --sip-b50:  #eef3fa;
    --sip-b100: #d9e4f3;
    --sip-b500: #24619f;
    --sip-b600: #1b4f91;
    --sip-b700: #14386a;
    --sip-b800: #0f2a4f;
    --sip-b900: #0a1e3a;

    /* --- Action : bleu d'interaction (teinte historique conservee) --- */
    --sip-a50:  #edf3fe;
    --sip-a100: #dbe8fd;
    --sip-a200: #b9d0fb;
    --sip-a400: #5b90f2;
    --sip-a500: #3b7bf0;
    --sip-a600: #2f6fed;
    --sip-a700: #2159c4;
    --sip-a800: #1a479f;

    /* --- Semantiques --- */
    --sip-s50:  #e9f7f0;   --sip-s100: #d1efe1;
    --sip-s600: #1a9c5e;   --sip-s700: #0f7a46;   --sip-s800: #0a5c34;
    --sip-w50:  #fdf4e5;   --sip-w100: #fae7c4;
    --sip-w600: #d98a12;   --sip-w700: #a5670a;   --sip-w800: #7a4d07;
    --sip-d50:  #fcefed;   --sip-d100: #f8d9d5;
    --sip-d600: #d1382c;   --sip-d700: #a82a20;   --sip-d800: #7f1f17;

    /* --- Roles semantiques : a preferer aux couleurs brutes --- */
    --sip-fond:            var(--sip-n50);
    --sip-surface:         var(--sip-n0);
    --sip-surface-douce:   var(--sip-n25);
    --sip-surface-appuyee: var(--sip-n100);
    --sip-texte:           var(--sip-n800);
    --sip-texte-doux:      var(--sip-n600);
    --sip-texte-sourdine:  var(--sip-n500);
    --sip-texte-inverse:   var(--sip-n0);
    --sip-titre:           var(--sip-b800);
    --sip-trait:           var(--sip-n200);
    --sip-trait-fort:      var(--sip-n300);
    --sip-focus:           var(--sip-a600);
    --sip-focus-halo:      rgba(47, 111, 237, 0.18);

    /* --- Sidebar : surface sombre --- */
    --sip-sb-fond:        #0d2340;
    --sip-sb-fond-bas:    #0a1c33;
    --sip-sb-trait:       rgba(255, 255, 255, 0.07);
    --sip-sb-texte:       #b3c2d8;
    --sip-sb-texte-fort:  #ffffff;
    --sip-sb-texte-doux:  #7e8fab;
    --sip-sb-groupe:      #8b9dbb;
    --sip-sb-survol:      rgba(255, 255, 255, 0.05);
    --sip-sb-actif-fond:  rgba(91, 144, 242, 0.11);
    --sip-sb-accent:      #5b90f2;

    /* Geometrie de la navigation. Une seule marge gauche (--sb-marge) est
       partagee par les items et les titres de section : toute la navigation
       s'aligne donc sur une unique colonne.
       L'indicateur d'etat actif est pose a ras du bord gauche de l'item
       (--sb-accent-x = 0) : il tient la ligne de bordure. Comme il reste un
       pseudo-element de l'item, il ne peut jamais deborder de celui-ci. */
    --sb-marge:    14px;
    --sb-accent-x: 0px;
    --sb-accent-w: 3px;

    /* --- Espacements (base 4px) --- */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
    --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-7: 1.75rem;  --sp-8: 2rem;
    --sp-10: 2.5rem;  --sp-12: 3rem;    --sp-16: 4rem;

    /* --- Rayons --- */
    --r-xs: 4px;  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;
    --r-pill: 999px;

    /* --- Ombres --- */
    --om-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --om-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --om-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.05);
    --om-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.09), 0 4px 6px -2px rgba(16, 24, 40, 0.04);
    --om-xl: 0 24px 32px -8px rgba(10, 30, 58, 0.16), 0 8px 12px -6px rgba(10, 30, 58, 0.06);

    /* --- Typographie --- */
    --police: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont,
              "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
    --police-titre: "Segoe UI Variable Display", "Segoe UI", -apple-system,
              BlinkMacSystemFont, "Inter", Roboto, Arial, sans-serif;
    --police-mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

    --tx-micro: 0.6875rem;   /* 11px — libelles capitales */
    --tx-xs:    0.75rem;     /* 12px */
    --tx-sm:    0.8125rem;   /* 13px */
    --tx-base:  0.875rem;    /* 14px — corps */
    --tx-md:    0.9375rem;   /* 15px */
    --tx-lg:    1.0625rem;   /* 17px — h2 */
    --tx-xl:    1.25rem;     /* 20px — h1 */
    --tx-2xl:   1.5rem;      /* 24px */
    --tx-3xl:   1.75rem;     /* 28px — valeurs KPI */

    /* --- Structure --- */
    --sidebar-largeur: 252px;
    --sidebar-reduite: 68px;
    --topbar-hauteur: 60px;
    --contenu-max: 1600px;

    /* --- Mouvement : fluide mais discret --- */
    --t-rapide: 120ms cubic-bezier(0.2, 0, 0.2, 1);
    --t-normal: 180ms cubic-bezier(0.2, 0, 0.2, 1);
    --t-lent:   260ms cubic-bezier(0.16, 1, 0.3, 1);

    /* --- Plans --- */
    --z-sticky: 20;
    --z-topbar: 30;
    --z-voile: 45;
    --z-sidebar: 50;
    --z-popover: 60;
}

/* ==========================================================================
   02. ALIAS DE COMPATIBILITE
   Referencees en style inline dans de nombreux templates (dashboard,
   notifications, saisie, validation, exploration...). Remappees sur les
   nouveaux tokens : l'ancien code continue de fonctionner et adopte
   automatiquement la nouvelle palette.
   ========================================================================== */
:root {
    --sip-navy:          var(--sip-b800);
    --sip-navy-fonce:    var(--sip-b900);
    --sip-navy-clair:    var(--sip-b600);
    --sip-accent:        var(--sip-a600);
    --sip-vert:          var(--sip-s600);
    --sip-vert-fonce:    var(--sip-s700);
    --sip-rouge:         var(--sip-d600);
    --sip-rouge-fond:    var(--sip-d50);
    --sip-orange:        var(--sip-w600);
    --sip-orange-fond:   var(--sip-w50);
    --sip-blanc:         var(--sip-n0);
    --sip-gris-fond:     var(--sip-n50);
    --sip-gris-texte:    var(--sip-n800);
    --sip-gris-sourdine: var(--sip-n500);
    --sip-bordure:       var(--sip-n200);
}

/* ==========================================================================
   03. BASE & TYPOGRAPHIE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--police);
    font-size: var(--tx-base);
    line-height: 1.5;
    color: var(--sip-texte);
    background: var(--sip-fond);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--sip-a700); text-decoration: none; transition: color var(--t-rapide); }
a:hover { color: var(--sip-a800); text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4 {
    font-family: var(--police-titre);
    color: var(--sip-titre);
    margin: 0 0 var(--sp-3);
    line-height: 1.3;
    letter-spacing: -0.011em;
}
h1 { font-size: var(--tx-xl);   font-weight: 650; }
h2 { font-size: var(--tx-lg);   font-weight: 640; }
h3 { font-size: var(--tx-md);   font-weight: 640; }
h4 { font-size: var(--tx-base); font-weight: 640; }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

small { font-size: var(--tx-xs); }
code, pre, kbd { font-family: var(--police-mono); font-size: 0.9em; }
hr { border: 0; border-top: 1px solid var(--sip-trait); margin: var(--sp-5) 0; }

::selection { background: var(--sip-a100); color: var(--sip-b900); }

/* La topbar est collante : une cible d'ancre doit se degager sous elle
   (le lien « Cartes » pointe par exemple vers #tension-regions). */
.container [id] { scroll-margin-top: calc(var(--topbar-hauteur) + var(--sp-4)); }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Anneau de focus unifie, visible au clavier uniquement */
:focus-visible {
    outline: 2px solid var(--sip-focus);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* Barres de defilement discretes */
* { scrollbar-width: thin; scrollbar-color: var(--sip-n300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--sip-n300); border-radius: var(--r-pill);
    border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--sip-n400); background-clip: content-box; }

/* Icones : SVG en ligne, alignes sur la ligne de base du texte */
.ic { width: 18px; height: 18px; flex-shrink: 0; display: block; }
.ic-sm { width: 15px; height: 15px; }
.ic-lg { width: 22px; height: 22px; }

/* ==========================================================================
   04. LAYOUT APPLICATIF
   ========================================================================== */
.app-shell { display: flex; min-height: 100vh; }

.content-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Compense la sidebar fixe */
    margin-left: var(--sidebar-largeur);
    transition: margin-left var(--t-lent);
}
body.sidebar-reduite .content-area { margin-left: var(--sidebar-reduite); }

/* --- Barre superieure --- */
.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    min-height: var(--topbar-hauteur);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--sip-trait);
    padding: var(--sp-2) var(--sp-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}
.topbar-gauche { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.topbar-titre { min-width: 0; }
.topbar-titre .fil { display: block; font-size: var(--tx-xs); color: var(--sip-texte-sourdine); line-height: 1.35; }
.topbar h1,
.topbar-titre h1 {
    margin: 0;
    font-size: var(--tx-md);
    font-weight: 640;
    color: var(--sip-titre);
    border: none;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-actions { display: flex; align-items: center; gap: var(--sp-3); }
.topbar-user {
    font-size: var(--tx-sm);
    color: var(--sip-texte-sourdine);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

/* Bouton icone de la topbar (menu mobile, reduction, notifications) */
.btn-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--sip-texte-doux);
    cursor: pointer;
    position: relative;
    transition: background var(--t-rapide), color var(--t-rapide), border-color var(--t-rapide);
}
.btn-icone:hover { background: var(--sip-surface-appuyee); color: var(--sip-titre); text-decoration: none; }
.btn-icone:active { background: var(--sip-n200); }
.btn-icone[aria-expanded="true"] { background: var(--sip-a50); color: var(--sip-a700); }

.sep-vertical { width: 1px; height: 22px; background: var(--sip-trait); flex-shrink: 0; }

/* Les deux commandes de navigation s'excluent : le hamburger n'existe que sur
   mobile (et seulement si le JavaScript est actif, car c'est lui qui ouvre le
   tiroir), la reduction n'existe que sur desktop. */
.btn-menu { display: none; }
.btn-reduire { display: inline-flex; }

/* --- Zone de contenu --- */
.container {
    padding: var(--sp-6);
    flex: 1;
    width: 100%;
    max-width: var(--contenu-max);
    margin: 0 auto;
}

/* En-tete de page reutilisable pour toutes les futures pages */
.page-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
}
.page-entete h1 { margin: 0 0 var(--sp-1); font-size: var(--tx-2xl); font-weight: 660; }
.page-entete .sous-titre-page {
    margin: 0;
    color: var(--sip-texte-sourdine);
    font-size: var(--tx-sm);
    max-width: 68ch;
}
.page-entete-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ==========================================================================
   05. NAVIGATION LATERALE
   Inspiration Windows 11 : rail vertical continu a gauche, indicateur
   d'accent en pastille sur ce rail, icone et texte alignes sur une grille
   stricte, hauteur de ligne compacte et reguliere.
   ========================================================================== */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-largeur);
    z-index: var(--z-sidebar);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--sip-sb-fond) 0%, var(--sip-sb-fond-bas) 100%);
    color: var(--sip-sb-texte);
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    transition: width var(--t-lent), transform var(--t-lent);
}

/* --- Marque --- */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: var(--topbar-hauteur);
    padding: 0 var(--sp-4);
    flex-shrink: 0;
    border-bottom: 1px solid var(--sip-sb-trait);
    overflow: hidden;
}
.sidebar-logo {
    width: 32px; height: 32px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: var(--r-sm);
    background: #fff;
    padding: 2px;
}
.sidebar-brand .brand-texte { min-width: 0; }
.sidebar-brand .logo {
    display: block;
    color: var(--sip-sb-texte-fort);
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: var(--tx-md);
    letter-spacing: 0.06em;
    line-height: 1.15;
    white-space: nowrap;
}
.sidebar-brand .sous-logo {
    display: block;
    font-size: var(--tx-micro);
    color: var(--sip-sb-texte-doux);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* --- Zone de navigation ---
   Aucune ligne verticale continue : la navigation ne repose plus sur un rail
   mais sur une marge gauche unique (--sb-marge), partagee par les items et
   les titres de section. Aspect plus leger, moins de traits a l'ecran. */
.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--sp-2) var(--sp-3) var(--sp-4);
}

/* --- Titre de section (Collecte, Analyse, Referentiels, Administration) ---
   Traite comme un veritable titre et non comme un element de navigation :
   capitales, interlettrage large, graisse marquee. La separation entre
   groupes vient de l'ESPACE (marge haute genereuse, marge basse serree qui
   rattache le titre a son groupe), pas d'un filet horizontal — d'ou une
   sidebar qui reste calme malgre quatre sections. */
.sb-groupe {
    margin: var(--sp-4) 0 var(--sp-1);
    padding: 0 var(--sp-2) 0 var(--sb-marge);
    font-size: var(--tx-micro);
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.6;
    color: var(--sip-sb-groupe);
    white-space: nowrap;
}
/* Un groupe en tete de liste n'a rien a separer au-dessus de lui. */
.sb-groupe:first-child { margin-top: var(--sp-1); }

/* --- Item de navigation --- */
.sb-item {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    min-height: 36px;
    padding: 0 var(--sp-2) 0 var(--sb-marge);
    margin-bottom: 1px;
    border-radius: var(--r-sm);
    color: var(--sip-sb-texte);
    font-size: var(--tx-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--t-rapide), color var(--t-rapide);
}
.sb-item .ic { width: 18px; height: 18px; opacity: 0.9; }
.sb-item .sb-libelle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Indicateur d'etat : barre verticale posee A RAS du bord gauche de l'item
   (left: 0), elle tient donc la ligne de bordure au lieu de flotter en
   retrait a l'interieur. Cote bord elle est franche, cote interieur elle est
   adoucie : elle se lit comme une bordure et non comme une pastille.
   Sa hauteur reste relative a celle de l'item (100% moins un retrait fixe) :
   elle s'adapte aux items plus hauts du tiroir mobile et ne peut
   structurellement pas deborder. L'animation passe par scaleY (composition
   GPU) plutot que par la hauteur. */
.sb-item::before {
    content: "";
    position: absolute;
    left: var(--sb-accent-x);
    top: 50%;
    width: var(--sb-accent-w);
    height: calc(100% - 16px);
    border-radius: 0 2px 2px 0;
    background: var(--sip-sb-accent);
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
    transition: transform var(--t-normal), background var(--t-normal);
}

.sb-item:hover {
    background: var(--sip-sb-survol);
    color: var(--sip-sb-texte-fort);
    text-decoration: none;
}
/* Au survol : amorce discrete et neutre, qui ne se confond pas avec l'accent. */
.sb-item:hover::before {
    transform: translateY(-50%) scaleY(0.5);
    background: rgba(255, 255, 255, 0.28);
}
.sb-item:active { background: rgba(255, 255, 255, 0.03); }

/* Etat actif : la barre gauche porte l'information principale ; le fond
   legerement teinte, l'icone d'accent et le texte plus appuye ne font que
   l'accompagner. */
.sb-item.actif {
    background: var(--sip-sb-actif-fond);
    color: var(--sip-sb-texte-fort);
    font-weight: 620;
}
.sb-item.actif::before,
.sb-item.actif:hover::before {
    transform: translateY(-50%) scaleY(1);
    background: var(--sip-sb-accent);
}
.sb-item.actif:hover { background: rgba(91, 144, 242, 0.17); }
.sb-item.actif .ic { opacity: 1; color: var(--sip-sb-accent); }

.sb-item:focus-visible { outline: 2px solid var(--sip-sb-accent); outline-offset: -2px; }

/* Etat desactive : prevu pour une entree de menu pointant vers un module non
   encore construit. Aucune entree ne l'utilise aujourd'hui ; a poser avec
   aria-disabled="true" sur le lien pour rester coherent au clavier. */
.sb-item.est-desactive {
    color: var(--sip-sb-texte-doux);
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.sb-item.est-desactive::before { transform: translateY(-50%) scaleY(0); }

/* Pastille de comptage / mention dans un item */
.sb-marque {
    font-size: var(--tx-micro);
    font-weight: 650;
    padding: 1px 6px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.1);
    color: var(--sip-sb-texte-doux);
    white-space: nowrap;
}
.sb-marque-alerte { background: var(--sip-d600); color: #fff; }


/* --- Pied de sidebar : identite de l'utilisateur --- */
.sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--sip-sb-trait);
    padding: var(--sp-3);
    /* Identite et deconnexion sur une meme ligne */
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}
.sb-user {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    color: var(--sip-sb-texte);
    text-decoration: none;
    transition: background var(--t-rapide);
}
.sb-user:hover { background: var(--sip-sb-survol); color: var(--sip-sb-texte-fort); text-decoration: none; }
.sb-avatar {
    width: 32px; height: 32px;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--sip-a600), var(--sip-b600));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--tx-xs); font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.sb-user-infos { min-width: 0; }
.sb-user-nom {
    display: block;
    font-size: var(--tx-sm);
    font-weight: 600;
    color: var(--sip-sb-texte-fort);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user-role {
    display: block;
    font-size: var(--tx-micro);
    color: var(--sip-sb-texte-doux);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-deconnexion {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: var(--r-sm);
    color: var(--sip-sb-texte-doux);
    transition: background var(--t-rapide), color var(--t-rapide);
}
.sb-deconnexion:hover { background: rgba(209, 56, 44, 0.18); color: #ff9f97; text-decoration: none; }

/* --------------------------------------------------------------------------
   Mode reduit (icones seules)
   Volontairement borne a min-width: 861px. En dessous, la sidebar devient un
   tiroir coulissant qui doit TOUJOURS s'afficher en mode complet : sans cette
   borne, la classe .sidebar-reduite memorisee sur desktop (specificite plus
   forte qu'une simple classe dans une media query) reduirait aussi le tiroir.

   Geometrie : sidebar 68px, nav padding 12px/8px, item 44px -> l'item occupe
   12..56px, son centre tombe a 34px, soit exactement l'axe vertical. Le rail
   passe a 6px et l'accent (left:-6px) reste pose dessus.
   -------------------------------------------------------------------------- */
@media (min-width: 861px) {
    body.sidebar-reduite .sidebar { width: var(--sidebar-reduite); }

    body.sidebar-reduite .sidebar-brand { justify-content: center; padding: 0; }
    body.sidebar-reduite .sidebar-brand .brand-texte { display: none; }

    body.sidebar-reduite .sidebar-nav { padding-left: var(--sp-3); padding-right: var(--sp-3); }
    body.sidebar-reduite .sb-item {
        grid-template-columns: 18px;
        justify-content: center;
        padding: 0;
        width: 44px;
    }
    body.sidebar-reduite .sb-item .sb-libelle,
    body.sidebar-reduite .sb-item .sb-marque { display: none; }

    /* Faute de place pour un libelle, le titre de section se replie en un
       filet tres discret et en retrait — seul moyen de conserver la
       structure en groupes sur une colonne de 68px. */
    body.sidebar-reduite .sb-groupe {
        margin: var(--sp-3) var(--sp-3);
        padding: 0;
        height: 1px;
        overflow: hidden;
        color: transparent;
        position: relative;
    }
    body.sidebar-reduite .sb-groupe:first-child { margin-top: var(--sp-1); }
    body.sidebar-reduite .sb-groupe::after {
        content: "";
        position: absolute;
        left: 0; right: 0; top: 50%;
        height: 1px;
        background: var(--sip-sb-trait);
    }

    body.sidebar-reduite .sidebar-footer { padding: var(--sp-2); justify-content: center; }
    body.sidebar-reduite .sb-user { grid-template-columns: 1fr; justify-items: center; padding: var(--sp-1); }
    body.sidebar-reduite .sb-user-infos,
    body.sidebar-reduite .sb-deconnexion { display: none; }
}

/* --- Voile mobile --- */
.sidebar-voile {
    position: fixed;
    inset: 0;
    z-index: var(--z-voile);
    background: rgba(10, 30, 58, 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-normal), visibility var(--t-normal);
    border: 0;
    padding: 0;
    cursor: default;
}
body.sidebar-ouverte .sidebar-voile { opacity: 1; visibility: visible; }

/* Lien d'evitement (accessibilite clavier) */
.skip-lien {
    position: absolute;
    left: -9999px;
    top: var(--sp-2);
    z-index: var(--z-popover);
    background: var(--sip-surface);
    color: var(--sip-titre);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-sm);
    box-shadow: var(--om-lg);
    font-weight: 600;
}
.skip-lien:focus { left: var(--sp-2); }

/* ==========================================================================
   06. COMPOSANTS
   ========================================================================== */

/* --- 6.1 Cartes --- */
.card {
    background: var(--sip-surface);
    border: 1px solid var(--sip-trait);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    box-shadow: var(--om-xs);
}
.card > h2:first-child,
.card > h3:first-child { margin-top: 0; }

/* En-tete de carte : titre + actions alignes */
.card-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}
.card-entete h2, .card-entete h3 { margin: 0; }
.card-entete .card-note {
    font-size: var(--tx-xs);
    font-weight: 400;
    color: var(--sip-texte-sourdine);
}
.card-plate { box-shadow: none; }
.card-douce { background: var(--sip-surface-douce); }
.card-compacte { padding: var(--sp-4); }
/* Bandeau plein largeur au bas d'une carte (liste de liens, export...) */
.card-pied {
    margin: var(--sp-4) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5));
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--sip-trait);
    background: var(--sip-surface-douce);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    font-size: var(--tx-sm);
}

/* --- 6.2 Boutons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: var(--sip-a600);
    color: #fff;
    font-family: inherit;
    font-size: var(--tx-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--om-xs);
    transition: background var(--t-rapide), border-color var(--t-rapide),
                color var(--t-rapide), box-shadow var(--t-rapide), transform var(--t-rapide);
}
.btn:hover { background: var(--sip-a700); color: #fff; text-decoration: none; box-shadow: var(--om-sm); }
.btn:active { background: var(--sip-a800); box-shadow: none; transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"], .btn.disabled {
    background: var(--sip-n200);
    color: var(--sip-n400);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.btn-secondaire {
    background: var(--sip-surface);
    color: var(--sip-titre);
    border-color: var(--sip-trait-fort);
}
.btn-secondaire:hover { background: var(--sip-n50); color: var(--sip-titre); border-color: var(--sip-n400); }
.btn-secondaire:active { background: var(--sip-n100); }

.btn-fantome {
    background: transparent;
    color: var(--sip-texte-doux);
    border-color: transparent;
    box-shadow: none;
}
.btn-fantome:hover { background: var(--sip-surface-appuyee); color: var(--sip-titre); }

.btn-vert { background: var(--sip-s600); }
.btn-vert:hover { background: var(--sip-s700); }
.btn-vert:active { background: var(--sip-s800); }

.btn-danger { background: var(--sip-d600); }
.btn-danger:hover { background: var(--sip-d700); }
.btn-danger:active { background: var(--sip-d800); }

.btn-sm { min-height: 30px; padding: 0 var(--sp-3); font-size: var(--tx-xs); }
.btn-lg { min-height: 44px; padding: 0 var(--sp-6); font-size: var(--tx-base); }
.btn-bloc { width: 100%; }

/* Etat de chargement : pastille rotative, texte conserve */
.btn.est-en-chargement { pointer-events: none; color: transparent !important; position: relative; }
.btn.est-en-chargement::after {
    content: "";
    position: absolute;
    width: 16px; height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: var(--r-pill);
    animation: sip-rotation 0.65s linear infinite;
}
.btn-secondaire.est-en-chargement::after { border-color: var(--sip-n300); border-top-color: var(--sip-a600); }
@keyframes sip-rotation { to { transform: rotate(360deg); } }

/* --- 6.3 Champs de formulaire --- */
form .field { margin-bottom: var(--sp-4); }
form label,
.field-label {
    display: block;
    font-weight: 600;
    font-size: var(--tx-sm);
    color: var(--sip-titre);
    margin-bottom: var(--sp-2);
}
.field-aide {
    display: block;
    font-size: var(--tx-xs);
    color: var(--sip-texte-sourdine);
    margin-top: var(--sp-2);
}
.field-requis { color: var(--sip-d600); font-weight: 700; margin-left: 2px; }

form input[type=text], form input[type=email], form input[type=password],
form input[type=number], form input[type=date], form input[type=datetime-local],
form input[type=time], form input[type=month], form input[type=week],
form input[type=tel], form input[type=url], form input[type=search],
form select, form textarea,
.champ {
    width: 100%;
    /* Ces quatre dimensions passent par des variables a valeur de repli plutot
       que d'etre surchargees par des selecteurs plus loin dans la feuille.
       Raison : ce selecteur vaut (0,1,2) — « form input[type=email] » — et
       battait donc « .champ-groupe input » (0,1,1). Le padding reservant la
       place des icones n'etait jamais applique et le texte passait dessous.
       Une variable est resolue a l'usage : la specificite n'entre plus en jeu,
       il suffit de la poser sur un conteneur parent. */
    min-height: var(--champ-hauteur, 38px);
    padding: var(--sp-2) var(--champ-pad-droite, var(--sp-3))
             var(--sp-2) var(--champ-pad-gauche, var(--sp-3));
    font-family: inherit;
    font-size: var(--champ-taille, var(--tx-base));
    color: var(--sip-texte);
    background: var(--sip-surface);
    border: 1px solid var(--sip-trait-fort);
    border-radius: var(--r-sm);
    transition: border-color var(--t-rapide), box-shadow var(--t-rapide), background var(--t-rapide);
    appearance: none;
}
form select, .champ-select {
    /* Chevron dessine en CSS pur — aucune dependance externe */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c7789' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    padding-right: var(--sp-8);
}
form textarea { min-height: 92px; resize: vertical; line-height: 1.55; }

form input::placeholder, form textarea::placeholder { color: var(--sip-n400); }

form input:hover:not(:disabled), form select:hover:not(:disabled), form textarea:hover:not(:disabled) {
    border-color: var(--sip-n400);
}
form input:focus, form select:focus, form textarea:focus, .champ:focus {
    outline: none;
    border-color: var(--sip-focus);
    box-shadow: 0 0 0 3px var(--sip-focus-halo);
}
form input:disabled, form select:disabled, form textarea:disabled {
    background: var(--sip-n100);
    color: var(--sip-n400);
    border-color: var(--sip-trait);
    cursor: not-allowed;
}
form input[readonly] { background: var(--sip-n50); }

/* Etats de validation */
form .field.est-en-erreur input,
form .field.est-en-erreur select,
form .field.est-en-erreur textarea,
form input.est-en-erreur, form select.est-en-erreur, form textarea.est-en-erreur,
form input[aria-invalid="true"] {
    border-color: var(--sip-d600);
}
form .field.est-en-erreur input:focus,
form input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(209, 56, 44, 0.16);
}
.field-erreur {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-top: var(--sp-2);
    font-size: var(--tx-xs);
    font-weight: 500;
    color: var(--sip-d700);
}
form .field.est-valide input { border-color: var(--sip-s600); }

/* Selecteur de fichier : le bouton natif est restyle via ::file-selector-button
   (saisie de preuves photo, import de documents). */
form input[type=file] {
    width: 100%;
    font-family: inherit;
    font-size: var(--tx-sm);
    color: var(--sip-texte-doux);
    background: var(--sip-surface-douce);
    border: 1px dashed var(--sip-trait-fort);
    border-radius: var(--r-sm);
    padding: var(--sp-2);
    cursor: pointer;
    transition: border-color var(--t-rapide), background var(--t-rapide);
}
form input[type=file]:hover { border-color: var(--sip-a400); background: var(--sip-a50); }
form input[type=file]:focus { outline: none; border-color: var(--sip-focus); box-shadow: 0 0 0 3px var(--sip-focus-halo); }
form input[type=file]::file-selector-button {
    font-family: inherit;
    font-size: var(--tx-xs);
    font-weight: 600;
    color: var(--sip-titre);
    background: var(--sip-surface);
    border: 1px solid var(--sip-trait-fort);
    border-radius: var(--r-xs);
    padding: var(--sp-1) var(--sp-3);
    margin-right: var(--sp-3);
    cursor: pointer;
    transition: background var(--t-rapide), border-color var(--t-rapide);
}
form input[type=file]::file-selector-button:hover { background: var(--sip-n50); border-color: var(--sip-n400); }

/* Cases a cocher et boutons radio */
form input[type=checkbox], form input[type=radio] {
    width: 16px; height: 16px;
    accent-color: var(--sip-a600);
    cursor: pointer;
    margin: 0;
}
.champ-case {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: var(--tx-base);
    font-weight: 400;
    color: var(--sip-texte);
    cursor: pointer;
}
.champ-case input { margin-top: 3px; }

/* Groupe de champs cote a cote */
.champ-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-4);
}

/* Champ avec affixe (icone a gauche, action a droite).
   La place reservee est declaree sur le CONTENEUR : les variables sont
   heritees par le champ et echappent ainsi au probleme de specificite.
     icone  : left 12px + 15px de large = 27px  ->  40px laisse 13px d'air
     action : right 8px + 30px de large = 38px  ->  44px laisse 6px d'air */
.champ-groupe {
    position: relative;
    display: flex;
    align-items: center;
    --champ-pad-gauche: 40px;
}
.champ-groupe .champ-icone {
    position: absolute;
    left: var(--sp-3);
    color: var(--sip-n400);
    pointer-events: none;
    display: flex;
    transition: color var(--t-rapide);
}
.champ-groupe:focus-within .champ-icone { color: var(--sip-a600); }
.champ-groupe .champ-action {
    position: absolute;
    right: var(--sp-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--sip-n500);
    cursor: pointer;
    transition: background var(--t-rapide), color var(--t-rapide);
}
.champ-groupe .champ-action:hover { background: var(--sip-n100); color: var(--sip-titre); }
/* Reserve la place de l'action a droite. Classe explicite sur le conteneur
   plutot que :has(), pour rester fiable sur les navigateurs plus anciens. */
.champ-groupe-action { --champ-pad-droite: 44px; }
.champ-action span[hidden] { display: none; }

/* Barre de formulaire (actions groupees) */
.form-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding-top: var(--sp-4);
    margin-top: var(--sp-2);
    border-top: 1px solid var(--sip-trait);
}

/* --- 6.4 Tableaux --- */
.table-enveloppe {
    border: 1px solid var(--sip-trait);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--sip-surface);
    box-shadow: var(--om-xs);
}
.table-defilante { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; background: var(--sip-surface); }
th, td {
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--sip-trait);
    font-size: var(--tx-sm);
    vertical-align: middle;
}
th {
    background: var(--sip-surface-douce);
    color: var(--sip-texte-doux);
    font-weight: 640;
    font-size: var(--tx-micro);
    white-space: nowrap;
    position: relative;
}
tbody tr { transition: background var(--t-rapide); }
tbody tr:hover td { background: var(--sip-n50); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-compacte th, .table-compacte td { padding: var(--sp-2) var(--sp-3); }

/* --- 6.5 Badges / pastilles --- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-2);
    border-radius: var(--r-pill);
    font-size: var(--tx-micro);
    font-weight: 650;
    line-height: 1.5;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.pill-actif      { background: var(--sip-s50); color: var(--sip-s800); border-color: var(--sip-s100); }
.pill-inactif    { background: var(--sip-d50); color: var(--sip-d700); border-color: var(--sip-d100); }
.pill-national   { background: var(--sip-a50); color: var(--sip-a800); border-color: var(--sip-a100); }
.pill-regional   { background: var(--sip-w50); color: var(--sip-w800); border-color: var(--sip-w100); }
.pill-rouge      { background: var(--sip-d50); color: var(--sip-d700); border-color: var(--sip-d100); }
.pill-orange     { background: var(--sip-w50); color: var(--sip-w800); border-color: var(--sip-w100); }
.pill-neutre     { background: var(--sip-n100); color: var(--sip-n600); border-color: var(--sip-n200); }
.pill-vert       { background: var(--sip-s50); color: var(--sip-s800); border-color: var(--sip-s100); }

/* Mention discrete de module (utilisee dans la navigation et les titres) */
.badge-module {
    display: inline-flex;
    align-items: center;
    background: var(--sip-n100);
    color: var(--sip-n500);
    padding: 1px var(--sp-2);
    border-radius: var(--r-xs);
    font-size: var(--tx-micro);
    font-weight: 600;
    margin-left: var(--sp-1);
    white-space: nowrap;
}

/* --- 6.6 Alertes & messages flash --- */
.flash, .alerte-bloc {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--sip-trait);
    border-left-width: 3px;
    border-radius: var(--r-md);
    margin-bottom: var(--sp-3);
    font-size: var(--tx-base);
    background: var(--sip-surface);
    box-shadow: var(--om-xs);
    animation: sip-apparition var(--t-lent) both;
}
@keyframes sip-apparition {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.flash-success { background: var(--sip-s50); border-color: var(--sip-s100); border-left-color: var(--sip-s600); color: var(--sip-s800); }
.flash-danger,
.flash-error   { background: var(--sip-d50); border-color: var(--sip-d100); border-left-color: var(--sip-d600); color: var(--sip-d800); }
.flash-warning { background: var(--sip-w50); border-color: var(--sip-w100); border-left-color: var(--sip-w600); color: var(--sip-w800); }
.flash-info,
.flash-notice  { background: var(--sip-a50); border-color: var(--sip-a100); border-left-color: var(--sip-a600); color: var(--sip-a800); }

/* Alertes listees (tableau de bord, validation) */
.alerte-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-radius: var(--r-md);
    font-size: var(--tx-sm);
    margin-bottom: var(--sp-2);
    border-left: 3px solid var(--sip-trait-fort);
    background: var(--sip-n50);
    color: var(--sip-texte-doux);
}
.alerte-item:last-child { margin-bottom: 0; }
.alerte-rouge  { background: var(--sip-d50); border-left-color: var(--sip-d600); color: var(--sip-d800); }
.alerte-orange { background: var(--sip-w50); border-left-color: var(--sip-w600); color: var(--sip-w800); }
.alerte-vert   { background: var(--sip-s50); border-left-color: var(--sip-s600); color: var(--sip-s800); }
.alerte-item .ic { margin-top: 1px; }

/* --- 6.7 Etat vide --- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    color: var(--sip-texte-sourdine);
    font-size: var(--tx-sm);
}
.empty-state .ic, .empty-state .empty-icone {
    width: 34px; height: 34px;
    color: var(--sip-n300);
    margin-bottom: var(--sp-1);
}

/* --- 6.8 Motif « page de liste »
   Toutes les pages d'index partagent cette anatomie :
     .page-entete -> .resume-liste -> .table-enveloppe > table -> td.table-vide
   ------------------------------------------------------------------------- */

/* Ligne de comptage au-dessus d'un tableau : « 12 campagnes · 3 ouvertes ». */
.resume-liste {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
    font-size: var(--tx-sm);
    color: var(--sip-texte-sourdine);
}
.resume-liste strong { color: var(--sip-titre); font-weight: 640; }
.resume-liste .separateur { color: var(--sip-trait-fort); }

/* Premiere colonne : porte l'identite de la ligne. */
td.cellule-principale, .cellule-principale {
    font-weight: 600;
    color: var(--sip-titre);
}
.cellule-principale .secondaire {
    display: block;
    font-weight: 400;
    font-size: var(--tx-xs);
    color: var(--sip-texte-sourdine);
    margin-top: 1px;
}

/* Valeur technique (code, action d'audit, identifiant). */
.mono {
    font-family: var(--police-mono);
    font-size: var(--tx-xs);
    color: var(--sip-texte-doux);
    background: var(--sip-surface-appuyee);
    padding: 1px var(--sp-2);
    border-radius: var(--r-xs);
    white-space: nowrap;
}

/* Colonne d'actions : toujours a droite, jamais coupee. */
th.actions, td.actions { text-align: right; white-space: nowrap; width: 1%; }
td.actions .rangee-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-3);
}
/* Action textuelle discrete dans une ligne de tableau. */
.lien-action {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--tx-sm);
    font-weight: 600;
    color: var(--sip-a700);
    white-space: nowrap;
}
.lien-action:hover { color: var(--sip-a800); text-decoration: underline; text-underline-offset: 2px; }
.lien-action-danger { color: var(--sip-d700); }
.lien-action-danger:hover { color: var(--sip-d800); }
/* Un formulaire d'action ne doit pas casser l'alignement de la cellule. */
td.actions form { display: inline; margin: 0; }

/* Ligne d'etat vide : occupe toute la largeur du tableau. */
td.table-vide {
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    background: var(--sip-surface-douce);
}
td.table-vide .empty-state { padding: 0; }
tbody tr:hover td.table-vide { background: var(--sip-surface-douce); }

/* Groupe de badges (profils d'un utilisateur, etiquettes...). */
.pill-groupe { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* Pastille d'initiales, reutilisee dans les listes de personnes. */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    flex-shrink: 0;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--sip-a600), var(--sip-b600));
    color: #fff;
    font-size: var(--tx-micro);
    font-weight: 700;
}
.avatar-inactif { background: var(--sip-n300); color: var(--sip-n600); }
/* Cellule « personne » : avatar + identite */
.cellule-personne { display: flex; align-items: center; gap: var(--sp-3); }

/* Marqueur d'etat, pose devant un libelle de statut. */
.point-statut {
    width: 7px; height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    background: var(--sip-n400);
}
.point-vert   { background: var(--sip-s600); }
.point-orange { background: var(--sip-w600); }
.point-rouge  { background: var(--sip-d600); }
.point-bleu   { background: var(--sip-a600); }

/* --- 6.9 Arborescence (referentiel des structures)
   Meme principe que le rail de la sidebar : une ligne verticale continue
   materialise le niveau hierarchique et sert de repere d'alignement.
   ------------------------------------------------------------------------- */
.tree { list-style: none; margin: 0; padding-left: 0; }
.tree > li { margin: 0; }
.tree-root { padding-left: 0; }
.tree-root > li { margin: 0; }

/* Sous-niveaux : retrait + guide vertical */
.tree .tree {
    position: relative;
    padding-left: var(--sp-6);
    margin-left: var(--sp-2);
}
.tree .tree::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 15px;
    width: 2px;
    border-radius: 1px;
    background: var(--sip-trait);
}

/* Ligne d'un noeud */
.arbre-noeud {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    transition: background var(--t-rapide);
}
.arbre-noeud:hover { background: var(--sip-n50); }
/* Raccord horizontal vers le guide vertical du parent */
.tree .tree > li > .arbre-noeud::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--sp-6));
    top: 50%;
    width: var(--sp-5);
    height: 2px;
    border-radius: 1px;
    background: var(--sip-trait);
}
.arbre-code {
    font-family: var(--police-mono);
    font-size: var(--tx-xs);
    font-weight: 600;
    color: var(--sip-b600);
    background: var(--sip-b50);
    padding: 1px var(--sp-2);
    border-radius: var(--r-xs);
    white-space: nowrap;
}
.arbre-nom { font-weight: 500; color: var(--sip-texte); }
.arbre-noeud .arbre-actions { margin-left: auto; opacity: 0; transition: opacity var(--t-rapide); }
.arbre-noeud:hover .arbre-actions,
.arbre-noeud:focus-within .arbre-actions { opacity: 1; }
/* Sur ecran tactile il n'y a pas de survol : les actions restent visibles. */
@media (hover: none) {
    .arbre-noeud .arbre-actions { opacity: 1; }
}

/* --- 6.10 Liste de notifications --- */
.notif-liste { display: grid; gap: var(--sp-2); }
.notif-carte {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--sip-surface);
    border: 1px solid var(--sip-trait);
    border-left: 3px solid var(--sip-a600);
    border-radius: var(--r-md);
    color: var(--sip-texte);
    text-decoration: none;
    box-shadow: var(--om-xs);
    transition: border-color var(--t-rapide), box-shadow var(--t-rapide);
}
.notif-carte:hover { text-decoration: none; box-shadow: var(--om-sm); border-color: var(--sip-trait-fort); }
.notif-carte:hover .notif-titre { color: var(--sip-a700); }
.notif-carte.est-non-lue { background: var(--sip-a50); border-color: var(--sip-a100); }
.notif-carte-rouge  { border-left-color: var(--sip-d600); }
.notif-carte-orange { border-left-color: var(--sip-w600); }
.notif-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    background: var(--sip-a50);
    color: var(--sip-a700);
}
.notif-carte-rouge .notif-icone  { background: var(--sip-d50); color: var(--sip-d700); }
.notif-carte-orange .notif-icone { background: var(--sip-w50); color: var(--sip-w700); }
.notif-corps { display: block; min-width: 0; }
.notif-titre {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    font-size: var(--tx-base);
    font-weight: 620;
    color: var(--sip-titre);
    transition: color var(--t-rapide);
}
.notif-message { display: block; margin-top: var(--sp-1); font-size: var(--tx-sm); color: var(--sip-texte-doux); }
.notif-date { font-size: var(--tx-xs); color: var(--sip-texte-sourdine); white-space: nowrap; }

/* --- 6.11 Module Traitement (workflow de validation a 3 niveaux)
   ------------------------------------------------------------------------- */

/* Barre d'outils d'une file de travail : recherche + filtres, sur une ligne. */
.barre-outils {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.barre-outils .recherche { flex: 1 1 15rem; min-width: 0; }
.barre-outils .compteur-resultats {
    font-size: var(--tx-sm);
    color: var(--sip-texte-sourdine);
    white-space: nowrap;
}

/* Controle segmente : joue le role d'onglets pour filtrer une liste. */
.segmente {
    display: inline-flex;
    padding: 2px;
    background: var(--sip-surface-appuyee);
    border: 1px solid var(--sip-trait);
    border-radius: var(--r-sm);
    gap: 2px;
}
.segmente button {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    min-height: 28px;
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--sip-texte-doux);
    font-family: inherit;
    font-size: var(--tx-xs);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-rapide), color var(--t-rapide);
}
.segmente button:hover { background: rgba(255, 255, 255, 0.6); color: var(--sip-titre); }
.segmente button[aria-pressed="true"] {
    background: var(--sip-surface);
    color: var(--sip-titre);
    box-shadow: var(--om-xs);
}
.segmente .compte {
    font-size: var(--tx-micro);
    font-weight: 700;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--sip-n200);
    color: var(--sip-n600);
}
.segmente button[aria-pressed="true"] .compte { background: var(--sip-a100); color: var(--sip-a800); }

/* --- Circuit de validation : frise d'etapes ---
   Remplace le tableau de tracabilite a trois tirets : l'etat de chaque
   niveau, son acteur et son horodatage se lisent d'un coup d'oeil. */
.circuit {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    counter-reset: etape;
}
.circuit-etape {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: 0 var(--sp-3);
    counter-increment: etape;
}
.circuit-etape:first-child { padding-left: 0; }
.circuit-etape:last-child { padding-right: 0; }
/* Trait de liaison entre deux etapes, pose sur l'axe des pastilles. */
.circuit-etape::after {
    content: "";
    position: absolute;
    top: 13px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    border-radius: 1px;
    background: var(--sip-trait);
}
.circuit-etape:last-child::after { display: none; }
.circuit-etape.est-faite::after { background: var(--sip-s600); }

.circuit-pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: var(--r-pill);
    background: var(--sip-surface);
    border: 2px solid var(--sip-trait-fort);
    color: var(--sip-n400);
    font-size: var(--tx-xs);
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.circuit-etape.est-faite .circuit-pastille {
    background: var(--sip-s600);
    border-color: var(--sip-s600);
    color: #fff;
}
.circuit-etape.est-courante .circuit-pastille {
    background: var(--sip-surface);
    border-color: var(--sip-a600);
    color: var(--sip-a700);
    box-shadow: 0 0 0 4px var(--sip-a50);
}
.circuit-etape.est-rejetee .circuit-pastille {
    background: var(--sip-d600);
    border-color: var(--sip-d600);
    color: #fff;
}
.circuit-titre {
    font-size: var(--tx-sm);
    font-weight: 640;
    color: var(--sip-titre);
    margin-top: var(--sp-2);
}
.circuit-etape.est-attente .circuit-titre { color: var(--sip-texte-sourdine); font-weight: 500; }
.circuit-meta { font-size: var(--tx-xs); color: var(--sip-texte-sourdine); line-height: 1.45; }
.circuit-meta strong { color: var(--sip-texte-doux); font-weight: 600; }
.circuit-etat {
    align-self: flex-start;
    margin-top: 2px;
}

/* --- Signalement automatique (anomalie) rendu en langage utilisateur --- */
.signalement {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--sip-trait);
    border-left: 3px solid var(--sip-w600);
    border-radius: var(--r-md);
    background: var(--sip-w50);
    margin-bottom: var(--sp-2);
}
.signalement:last-child { margin-bottom: 0; }
.signalement-rouge { border-left-color: var(--sip-d600); background: var(--sip-d50); border-color: var(--sip-d100); }
.signalement-orange { border-left-color: var(--sip-w600); background: var(--sip-w50); border-color: var(--sip-w100); }
.signalement-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.7);
    color: var(--sip-w700);
    flex-shrink: 0;
}
.signalement-rouge .signalement-icone { color: var(--sip-d700); }
.signalement-titre {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    flex-wrap: wrap;
    font-size: var(--tx-base);
    font-weight: 640;
    color: var(--sip-titre);
    margin-bottom: 2px;
}
.signalement-texte { font-size: var(--tx-sm); color: var(--sip-texte-doux); line-height: 1.5; }
.signalement-conseil {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--tx-xs);
    font-weight: 600;
    color: var(--sip-texte-doux);
}

/* --- Donnees soumises ---
   L'ancien rendu utilisait un tableau a deux colonnes dont le libelle
   occupait 40 % : sur grand ecran cela laissait un vide enorme et repoussait
   les tableaux repetables tres a droite. Ici le libelle a une largeur fixe
   et les blocs larges (tableaux, media) passent en pleine largeur. */
.donnees-section { margin-bottom: var(--sp-5); }
.donnees-section:last-child { margin-bottom: 0; }
.donnees-section-titre {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--tx-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sip-texte-sourdine);
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-1);
    border-bottom: 1px solid var(--sip-trait);
}
.donnee-ligne {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: var(--sp-3) var(--sp-5);
    align-items: baseline;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--sip-n100);
}
.donnee-ligne:last-child { border-bottom: none; }
.donnee-libelle {
    font-size: var(--tx-sm);
    color: var(--sip-texte-sourdine);
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.donnee-valeur { font-size: var(--tx-base); color: var(--sip-texte); font-weight: 500; min-width: 0; }
.donnee-valeur.est-vide { color: var(--sip-n400); font-weight: 400; font-style: italic; }
/* Un champ signale par la detection automatique est repere a sa place exacte. */
.donnee-ligne.est-signalee { background: var(--sip-w50); border-radius: var(--r-sm); padding-left: var(--sp-3); padding-right: var(--sp-3); }
.donnee-ligne.est-signalee-rouge { background: var(--sip-d50); }
.marque-signal {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--tx-micro);
    font-weight: 700;
    padding: 1px var(--sp-2);
    border-radius: var(--r-xs);
    background: var(--sip-w100);
    color: var(--sip-w800);
    white-space: nowrap;
}
.marque-signal-rouge { background: var(--sip-d100); color: var(--sip-d800); }
/* Contenu large : sort de la grille a deux colonnes. */
.donnee-ligne.est-pleine { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.donnee-media {
    display: inline-block;
    border: 1px solid var(--sip-trait);
    border-radius: var(--r-md);
    background: var(--sip-surface-douce);
    padding: var(--sp-1);
    max-width: 100%;
    line-height: 0;
}
.donnee-media img, .donnee-media video { display: block; max-width: 100%; border-radius: var(--r-xs); }
.donnee-media-vignette img { max-width: 68px; max-height: 68px; object-fit: cover; }
.donnee-note {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--tx-xs);
    color: var(--sip-texte-sourdine);
}

/* --- Barre de decision : toujours atteignable, quelle que soit la longueur
   des donnees a examiner. --- */
.barre-decision {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin: var(--sp-5) 0 0;
    padding: var(--sp-4);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--sip-trait);
    border-radius: var(--r-lg);
    box-shadow: 0 -6px 20px rgba(15, 42, 79, 0.07);
}
.barre-decision-info { font-size: var(--tx-sm); color: var(--sip-texte-doux); min-width: 0; }
.barre-decision-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* Repli de rejet : ouvert a la demande, sans JavaScript (<details>). */
.repli-rejet { position: relative; }
.repli-rejet > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    min-height: 36px;
    border: 1px solid var(--sip-d100);
    border-radius: var(--r-sm);
    background: var(--sip-surface);
    color: var(--sip-d700);
    font-size: var(--tx-sm);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: background var(--t-rapide), border-color var(--t-rapide);
}
.repli-rejet > summary::-webkit-details-marker { display: none; }
.repli-rejet > summary:hover { background: var(--sip-d50); border-color: var(--sip-d600); }
.repli-rejet[open] > summary { background: var(--sip-d50); border-color: var(--sip-d600); }
.repli-rejet-corps {
    margin-top: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--sip-d100);
    border-radius: var(--r-md);
    background: var(--sip-d50);
}
.repli-rejet-corps p { font-size: var(--tx-sm); color: var(--sip-d800); }

/* --- 6.12 Divers --- */

.sous-titre { color: var(--sip-texte-sourdine); font-size: var(--tx-sm); }

/* Jauge de progression */
.jauge-progression {
    height: 6px;
    background: var(--sip-n100);
    border-radius: var(--r-pill);
    overflow: hidden;
    margin-top: var(--sp-2);
}
.jauge-progression .rempli {
    height: 100%;
    background: var(--sip-s600);
    border-radius: var(--r-pill);
    transition: width var(--t-lent);
}

/* Badge de notification de la topbar */
.notif-lien {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: var(--r-sm);
    color: var(--sip-texte-doux);
    transition: background var(--t-rapide), color var(--t-rapide);
}
.notif-lien:hover { background: var(--sip-surface-appuyee); color: var(--sip-titre); text-decoration: none; }
.notif-compteur {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: var(--sip-d600);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--sip-surface);
}

/* ==========================================================================
   07. ECRANS D'AUTHENTIFICATION
   ========================================================================== */

/* --- 7.1 Page de connexion : composition en deux panneaux --- */
.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--sip-surface);
}

/* Panneau institutionnel (gauche) */
.auth-vitrine {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--sp-10) var(--sp-12);
    color: #fff;
    background:
        radial-gradient(1100px 620px at 12% 8%, rgba(47, 111, 237, 0.30), transparent 62%),
        radial-gradient(760px 520px at 88% 92%, rgba(26, 156, 94, 0.18), transparent 60%),
        linear-gradient(155deg, #0f2a4f 0%, #0a1e3a 58%, #071528 100%);
    overflow: hidden;
    isolation: isolate;
}
/* Trame discrete : evoque la grille de donnees, sans surcharge decorative */
.auth-vitrine::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 30% 30%, #000 10%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 30% 30%, #000 10%, transparent 72%);
}
.auth-vitrine-marque { display: flex; align-items: center; gap: var(--sp-3); }
.auth-vitrine-marque img {
    width: 42px; height: 42px;
    object-fit: contain;
    background: #fff;
    border-radius: var(--r-md);
    padding: 3px;
}
.auth-vitrine-marque .nom {
    font-family: var(--police-titre);
    font-size: var(--tx-lg);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.1;
}
.auth-vitrine-marque .ministere {
    display: block;
    font-size: var(--tx-xs);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.62);
}
.auth-vitrine-corps { max-width: 30rem; margin: var(--sp-8) 0; }
.auth-vitrine-corps h2 {
    color: #fff;
    font-size: var(--tx-2xl);
    font-weight: 620;
    line-height: 1.32;
    margin-bottom: var(--sp-4);
    letter-spacing: -0.015em;
}
.auth-vitrine-corps p {
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--tx-md);
    line-height: 1.6;
}
.auth-vitrine-points {
    list-style: none;
    padding: 0;
    margin: var(--sp-6) 0 0;
    display: grid;
    gap: var(--sp-3);
}
.auth-vitrine-points li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--tx-sm);
    color: rgba(255, 255, 255, 0.8);
}
.auth-vitrine-points .puce {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #9dc0fb;
}
.auth-vitrine-pied {
    font-size: var(--tx-xs);
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
}

/* Panneau formulaire (droite) */
.auth-panneau {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--sp-8) var(--sp-6);
    background: var(--sip-surface);
}
.auth-boite { width: 100%; max-width: 25.5rem; }
.auth-logo-mobile { display: none; }
.auth-boite-entete { margin-bottom: var(--sp-7); }
.auth-boite-entete .eyebrow {
    font-size: var(--tx-micro);
    font-weight: 660;
    color: var(--sip-a700);
    margin-bottom: var(--sp-2);
    display: block;
}
.auth-boite-entete h1 {
    font-size: var(--tx-2xl);
    font-weight: 660;
    margin-bottom: var(--sp-2);
}
.auth-boite-entete p { color: var(--sip-texte-sourdine); font-size: var(--tx-sm); margin: 0; }

.auth-form .field { margin-bottom: var(--sp-4); }
.auth-form .field-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
}
/* Champs plus genereux sur l'ecran de connexion : cible tactile confortable
   et lecture facile de l'adresse saisie. Declare en variables, pour la meme
   raison de specificite que ci-dessus. */
.auth-form { --champ-hauteur: 44px; --champ-taille: var(--tx-md); }
.auth-form .btn { min-height: 44px; font-size: var(--tx-base); margin-top: var(--sp-2); }

.auth-pied {
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--sip-trait);
    font-size: var(--tx-xs);
    color: var(--sip-texte-sourdine);
    line-height: 1.6;
}
.auth-mention-securite {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}
.auth-mention-securite .ic { color: var(--sip-s600); margin-top: 1px; }

/* --- 7.2 Carte centree : MFA et ecrans d'authentification secondaires --- */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6);
    background:
        radial-gradient(900px 520px at 20% 10%, rgba(47, 111, 237, 0.22), transparent 60%),
        linear-gradient(155deg, #0f2a4f 0%, #0a1e3a 60%, #071528 100%);
}
.login-box {
    width: 100%;
    /* Certains ecrans (configuration MFA, QR code) posent une largeur inline
       plus grande : ce plafond reste au-dessus pour ne pas les comprimer. */
    max-width: 28rem;
    background: var(--sip-surface);
    border: 1px solid var(--sip-trait);
    border-radius: var(--r-xl);
    padding: var(--sp-8);
    box-shadow: var(--om-xl);
}
.login-box h1 { text-align: center; font-size: var(--tx-xl); margin-bottom: var(--sp-2); }
.login-logo {
    display: block;
    width: 56px; height: 56px;
    object-fit: contain;
    margin: 0 auto var(--sp-4);
}
.login-box .sous-titre {
    text-align: center;
    color: var(--sip-texte-sourdine);
    font-size: var(--tx-sm);
    margin: 0 0 var(--sp-6);
}
.login-box .btn { min-height: 42px; }

/* ==========================================================================
   08. TABLEAU DE BORD
   ========================================================================== */

/* --- 8.1 Barre de filtres --- */
.filtre-bar {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    align-items: flex-end;
}
.filtre-champ { min-width: 0; }
.filtre-champ label {
    display: block;
    font-size: var(--tx-micro);
    font-weight: 640;
    color: var(--sip-texte-sourdine);
    margin-bottom: var(--sp-1);
}
.filtre-champ select {
    min-width: 9.5rem;
    max-width: 15rem;
    min-height: 34px;
    padding: var(--sp-1) var(--sp-7) var(--sp-1) var(--sp-3);
    font-size: var(--tx-sm);
    border: 1px solid var(--sip-trait-fort);
    border-radius: var(--r-sm);
    background-color: var(--sip-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c7789' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-2) center;
    appearance: none;
    color: var(--sip-texte);
    transition: border-color var(--t-rapide), box-shadow var(--t-rapide);
}
.filtre-champ select:hover { border-color: var(--sip-n400); }
.filtre-champ select:focus { outline: none; border-color: var(--sip-focus); box-shadow: 0 0 0 3px var(--sip-focus-halo); }
.filtre-desactive label { color: var(--sip-n400); }
.filtre-desactive select {
    color: var(--sip-n400);
    background-color: var(--sip-n100);
    border-color: var(--sip-trait);
    cursor: not-allowed;
}
/* Le filtre reellement applique se signale par une bordure d'accent */
.filtre-champ.est-applique select {
    border-color: var(--sip-a400);
    background-color: var(--sip-a50);
    color: var(--sip-a800);
    font-weight: 600;
}

/* --- 8.2 KPI --- */
.kpi-row {
    display: grid;
    /* 10.5rem permet aux 5 KPI de tenir sur une ligne des ~880px de contenu
       utile (sidebar reduite comprise), sans laisser un orphelin en fin de rangee. */
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: 0;
    overflow: hidden;
    transition: box-shadow var(--t-normal), transform var(--t-normal), border-color var(--t-normal);
}
/* Le liseré coloré du haut devient un filet net, pose sur la bordure */
.kpi::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--sip-a600);
}
.kpi .kpi-label {
    font-size: var(--tx-micro);
    font-weight: 640;
    color: var(--sip-texte-sourdine);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}
.kpi .kpi-valeur {
    font-family: var(--police-titre);
    font-size: var(--tx-3xl);
    font-weight: 680;
    color: var(--sip-titre);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin: 2px 0 0;
}
.kpi .kpi-unite { font-size: var(--tx-lg); font-weight: 600; color: var(--sip-texte-sourdine); margin-left: 2px; }
.kpi .kpi-delta {
    font-size: var(--tx-xs);
    font-weight: 500;
    color: var(--sip-texte-sourdine);
    line-height: 1.4;
}
.kpi .kpi-delta.hausse { color: var(--sip-s700); font-weight: 600; }
.kpi .kpi-delta.baisse { color: var(--sip-d700); font-weight: 600; }
.kpi.kpi-vert::before   { background: var(--sip-s600); }
.kpi.kpi-rouge::before  { background: var(--sip-d600); }
.kpi.kpi-orange::before { background: var(--sip-w600); }
/* KPI dont le module source n'est pas construit : lecture explicitement neutre */
.kpi.kpi-na { background: var(--sip-surface-douce); border-style: dashed; box-shadow: none; }
.kpi.kpi-na::before { background: var(--sip-n300); }
.kpi.kpi-na .kpi-valeur { color: var(--sip-n400); font-size: var(--tx-2xl); }
.kpi.kpi-na .kpi-delta { color: var(--sip-n500); font-weight: 400; }
/* KPI cliquable */
a.kpi, .kpi-cliquable { text-decoration: none; }
a.kpi:hover, .kpi-cliquable:hover {
    box-shadow: var(--om-md);
    border-color: var(--sip-trait-fort);
    text-decoration: none;
}

/* --- 8.3 Grilles de tableau de bord --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.dashboard-grid > .card { margin-bottom: 0; }
.db-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: var(--sp-4);
    align-items: start;
}
.db-pile { display: grid; gap: var(--sp-4); }
.db-pile > .card { margin-bottom: 0; }

/* Zone de graphique : hauteur maitrisee, Chart.js reste responsive */
.graphe-zone { position: relative; width: 100%; }
.graphe-zone canvas { max-width: 100%; }

/* --- 8.4 Tension par region --- */
.tension-grille { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tension-pastille {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--tx-xs);
    font-weight: 500;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--sip-n50);
    border: 1px solid var(--sip-trait);
    color: var(--sip-texte-doux);
}
.tension-pastille .point {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.tension-vert   { background: var(--sip-s50); border-color: var(--sip-s100); color: var(--sip-s800); }
.tension-vert .point   { background: var(--sip-s600); }
.tension-orange { background: var(--sip-w50); border-color: var(--sip-w100); color: var(--sip-w800); }
.tension-orange .point { background: var(--sip-w600); }
.tension-rouge  { background: var(--sip-d50); border-color: var(--sip-d100); color: var(--sip-d800); }
.tension-rouge .point  { background: var(--sip-d600); }

/* Legende de graphique / de code couleur */
.legende { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--tx-xs); color: var(--sip-texte-sourdine); }
.legende span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.legende i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* --- 8.5 Raccourcis --- */
.raccourcis { display: grid; gap: var(--sp-2); }
.raccourci {
    display: grid;
    grid-template-columns: 32px 1fr 16px;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--sip-trait);
    border-radius: var(--r-md);
    background: var(--sip-surface);
    color: var(--sip-texte);
    text-decoration: none;
    transition: border-color var(--t-rapide), background var(--t-rapide),
                box-shadow var(--t-rapide), transform var(--t-rapide);
}
.raccourci:hover {
    border-color: var(--sip-a200);
    background: var(--sip-a50);
    color: var(--sip-texte);
    text-decoration: none;
    box-shadow: var(--om-xs);
}
.raccourci:active { transform: translateY(1px); }
.raccourci .raccourci-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    background: var(--sip-a50);
    color: var(--sip-a700);
    flex-shrink: 0;
    transition: background var(--t-rapide);
}
.raccourci:hover .raccourci-icone { background: var(--sip-a100); }
.raccourci-libelle { min-width: 0; }
.raccourci-libelle strong {
    display: block;
    font-size: var(--tx-sm);
    font-weight: 620;
    color: var(--sip-titre);
    line-height: 1.35;
}
.raccourci-libelle span {
    display: block;
    font-size: var(--tx-xs);
    color: var(--sip-texte-sourdine);
    line-height: 1.4;
}
.raccourci .chevron { color: var(--sip-n400); }

/* --- 8.6 Flux d'activite --- */
.flux { display: grid; gap: 0; }
.flux-item {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--sip-trait);
    text-decoration: none;
    color: var(--sip-texte);
}
.flux-item:last-child { border-bottom: none; }
.flux-item:hover { text-decoration: none; }
.flux-item:hover .flux-titre { color: var(--sip-a700); }
.flux-puce {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: var(--r-pill);
    background: var(--sip-a50);
    color: var(--sip-a700);
    flex-shrink: 0;
    margin-top: 1px;
}
.flux-puce-rouge  { background: var(--sip-d50); color: var(--sip-d700); }
.flux-puce-orange { background: var(--sip-w50); color: var(--sip-w700); }
.flux-puce-vert   { background: var(--sip-s50); color: var(--sip-s700); }
.flux-corps { min-width: 0; }
.flux-titre {
    display: block;
    font-size: var(--tx-sm);
    font-weight: 600;
    color: var(--sip-titre);
    transition: color var(--t-rapide);
}
.flux-meta { display: block; font-size: var(--tx-xs); color: var(--sip-texte-sourdine); margin-top: 1px; }
.flux-item.est-nouveau .flux-titre::after {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sip-a600);
    margin-left: var(--sp-2);
    vertical-align: middle;
}

/* --- 8.7 Liste de repartition (paires libelle / valeur) --- */
.repartition { display: grid; gap: var(--sp-3); }
.repartition-ligne { display: grid; gap: var(--sp-1); }
.repartition-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--tx-sm);
}
.repartition-entete .libelle {
    color: var(--sip-texte);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.repartition-entete .valeur { color: var(--sip-titre); font-weight: 650; font-variant-numeric: tabular-nums; }
.repartition-barre { height: 5px; background: var(--sip-n100); border-radius: var(--r-pill); overflow: hidden; }
.repartition-barre i { display: block; height: 100%; background: var(--sip-a500); border-radius: var(--r-pill); }

/* ==========================================================================
   09. ECRANS METIER EXISTANTS (conserves, harmonises sur les nouveaux tokens)
   ========================================================================== */

/* --- Concepteur de formulaires --- */
.builder-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr) 272px; gap: var(--sp-4); }
.builder-col {
    background: var(--sip-surface);
    border: 1px solid var(--sip-trait);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    box-shadow: var(--om-xs);
}
.champ-palette {
    padding: var(--sp-2) var(--sp-3);
    border: 1px dashed var(--sip-trait-fort);
    border-radius: var(--r-sm);
    margin-bottom: var(--sp-2);
    font-size: var(--tx-sm);
    cursor: grab;
    background: var(--sip-surface-douce);
    transition: border-color var(--t-rapide), background var(--t-rapide), color var(--t-rapide);
}
.champ-palette:hover { border-color: var(--sip-a400); background: var(--sip-a50); color: var(--sip-a800); }
.champ-palette:active { cursor: grabbing; }
.section-form {
    border: 1px solid var(--sip-trait);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    margin-bottom: var(--sp-3);
    background: var(--sip-surface);
}
.champ-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--sip-trait);
    border-radius: var(--r-sm);
    margin-bottom: var(--sp-2);
    background: var(--sip-surface);
    transition: border-color var(--t-rapide), box-shadow var(--t-rapide);
}
.champ-ligne:hover { border-color: var(--sip-trait-fort); box-shadow: var(--om-xs); }
.champ-ligne .type { color: var(--sip-texte-sourdine); font-size: var(--tx-xs); }
.titre-section { outline: none; }
.titre-section:focus { background: var(--sip-a50); border-radius: var(--r-xs); box-shadow: 0 0 0 3px var(--sip-focus-halo); }

/* --- Saisie de formulaire --- */
.section-saisie {
    border-top: 3px solid var(--sip-a600);
    counter-increment: section-saisie;
}
.numero-section {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--sip-a600);
    color: #fff;
    font-size: var(--tx-xs);
    font-weight: 700;
    flex-shrink: 0;
}
.section-saisie h2 { display: flex; align-items: center; gap: var(--sp-2); }
.barre-actions-saisie {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -4px 16px rgba(15, 42, 79, 0.08);
}
.champ-gps, .champ-signature {
    background: var(--sip-surface-douce);
    border: 1px solid var(--sip-trait);
    border-radius: var(--r-md);
    padding: var(--sp-3);
}
.champ-echelle { display: flex; align-items: center; }
.entete-formulaire-saisie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.fil-ariane-saisie { font-size: var(--tx-sm); color: var(--sip-texte-sourdine); margin-bottom: var(--sp-1); }
.fil-ariane-saisie a { color: var(--sip-texte-sourdine); }
.fil-ariane-saisie a:hover { color: var(--sip-a700); }

.table-groupe-repetable { width: 100%; border-collapse: collapse; margin-top: var(--sp-1); }
.table-groupe-repetable th {
    background: var(--sip-surface-douce);
    text-align: left;
    padding: var(--sp-2);
    font-size: var(--tx-micro);
    color: var(--sip-texte-sourdine);
    border-bottom: 1px solid var(--sip-trait);
}
.table-groupe-repetable td { padding: var(--sp-2); border-bottom: 1px solid var(--sip-trait); vertical-align: middle; }
/* Lignes compactes : la hauteur passe par la variable, sinon « min-height »
   perdrait contre la regle de base des champs (meme piege de specificite). */
.table-groupe-repetable { --champ-hauteur: 34px; }
.table-groupe-repetable input, .table-groupe-repetable select { width: 100%; margin: 0; }
.groupe-repetable-modele { display: none; }

.echelle-etoiles { display: inline-flex; gap: 2px; }
.echelle-etoile {
    font-size: 1.5rem;
    color: var(--sip-n300);
    cursor: pointer;
    user-select: none;
    line-height: 1;
    transition: color var(--t-rapide), transform var(--t-rapide);
}
.echelle-etoile.active { color: var(--sip-w600); }
.echelle-etoile:hover { color: var(--sip-w600); transform: scale(1.08); }

/* --- Explorateur BI --- */
.widgets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.widget-bi { margin-bottom: 0; }
.widget-export-bar {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--sip-trait);
    font-size: var(--tx-xs);
}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

/* --- Ecrans intermediaires : sidebar reduite par defaut --- */
/* Ecrans intermediaires : la sidebar se reduit d'office (borne basse a 861px
   pour ne pas empieter sur le tiroir mobile). */
@media (min-width: 861px) and (max-width: 1180px) {
    :root { --sidebar-largeur: var(--sidebar-reduite); }
    .sidebar { width: var(--sidebar-reduite); }
    .sidebar-brand { justify-content: center; padding: 0; }
    .sidebar-brand .brand-texte { display: none; }
    .sidebar-nav { padding-left: var(--sp-3); padding-right: var(--sp-3); }
    .sb-item { grid-template-columns: 18px; justify-content: center; padding: 0; width: 44px; }
    .sb-item .sb-libelle, .sb-item .sb-marque { display: none; }
    .sb-groupe {
        margin: var(--sp-3); padding: 0;
        height: 1px; overflow: hidden; color: transparent; position: relative;
    }
    .sb-groupe:first-child { margin-top: var(--sp-1); }
    .sb-groupe::after {
        content: ""; position: absolute; left: 0; right: 0; top: 50%;
        height: 1px; background: var(--sip-sb-trait);
    }
    .sidebar-footer { padding: var(--sp-2); justify-content: center; }
    .sb-user { grid-template-columns: 1fr; justify-items: center; padding: var(--sp-1); }
    .sb-user-infos, .sb-deconnexion { display: none; }
    /* Le bouton de reduction n'a plus de sens a cette largeur */
    .btn-reduire { display: none !important; }

    .db-colonnes { grid-template-columns: minmax(0, 1fr); }
    .builder-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Module Traitement : sous 900px la frise passe a la verticale et les
   donnees a une seule colonne. */
@media (max-width: 900px) {
    .circuit { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
    .circuit-etape { padding: 0 0 0 var(--sp-6); }
    .circuit-etape:first-child, .circuit-etape:last-child { padding-left: var(--sp-6); padding-right: 0; }
    /* Le trait de liaison devient vertical, sur l'axe des pastilles. */
    .circuit-etape::after {
        top: 34px;
        bottom: calc(-1 * var(--sp-4));
        left: 13px;
        right: auto;
        width: 2px;
        height: auto;
    }
    .circuit-pastille { position: absolute; top: 0; left: 0; }
    .circuit-titre { margin-top: 0; }

    .donnee-ligne { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
    .donnee-libelle { font-size: var(--tx-xs); }

    .barre-decision { flex-direction: column; align-items: stretch; }
    .barre-decision-actions { justify-content: stretch; }
    .barre-decision-actions > form, .barre-decision-actions > .repli-rejet { flex: 1 1 auto; }
    .barre-decision-actions .btn, .repli-rejet > summary { width: 100%; justify-content: center; }
}

@media (max-width: 1024px) {
    /* Une seule colonne en dessous de 1024px. Indispensable ici et non dans la
       media query 861-1180px : celle-ci est bornee en bas, elle ne couvre donc
       pas le mobile. */
    .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .db-colonnes { grid-template-columns: minmax(0, 1fr); }
    .builder-layout { grid-template-columns: minmax(0, 1fr); }
    .auth-page { grid-template-columns: 1fr; }
    .auth-vitrine { display: none; }
    .auth-logo-mobile {
        display: block;
        width: 56px; height: 56px;
        object-fit: contain;
        margin: 0 0 var(--sp-5);
    }
}

/* --- Mobile / tablette : sidebar en tiroir coulissant --- */
@media (max-width: 860px) {
    .sidebar {
        width: 264px;
        transform: translateX(-100%);
        box-shadow: none;
    }
    body.sidebar-ouverte .sidebar {
        transform: translateX(0);
        box-shadow: var(--om-xl);
    }
    /* Le tiroir garde le mode complet (icone + texte) : les regles du mode
       reduit sont bornees a min-width 861px, elles ne s'appliquent pas ici.
       Seule la cible de confort tactile est relevee. */
    .sb-item { min-height: 40px; }

    .content-area, body.sidebar-reduite .content-area { margin-left: 0; }
    html.js .btn-menu { display: inline-flex; }
    .btn-reduire { display: none; }

    /* Repli sans JavaScript : le tiroir ne pouvant pas s'ouvrir, la navigation
       reprend sa place dans le flux au-dessus du contenu — elle reste donc
       entierement accessible. */
    html:not(.js) .sidebar {
        position: static;
        transform: none;
        width: 100%;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
    html:not(.js) .app-shell { flex-direction: column; }
    html:not(.js) .sidebar-nav { max-height: 42vh; }

    .container { padding: var(--sp-4); }
    .topbar { padding: var(--sp-2) var(--sp-4); }
    .topbar-titre .fil { display: none; }
    .kpi-row { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--sp-3); }
    .kpi { padding: var(--sp-3) var(--sp-4); }
    .kpi .kpi-valeur { font-size: var(--tx-2xl); }
    .card { padding: var(--sp-4); border-radius: var(--r-md); }
    .card-pied { margin: var(--sp-4) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)); padding: var(--sp-3) var(--sp-4); }
    .page-entete h1 { font-size: var(--tx-xl); }
    .filtre-champ { flex: 1 1 100%; }
    .filtre-champ select { width: 100%; max-width: none; }
    /* Les tableaux larges defilent horizontalement plutot que de casser la page */
    table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 560px) {
    .auth-panneau { padding: var(--sp-6) var(--sp-4); }
    .auth-boite-entete h1 { font-size: var(--tx-xl); }
    .login-box { padding: var(--sp-6); border-radius: var(--r-lg); }
    .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topbar-user .pill { display: none; }
    .form-actions .btn { flex: 1 1 auto; }
}

/* --- Preferences systeme --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   11. UTILITAIRES & IMPRESSION
   ========================================================================== */
.pile { display: grid; gap: var(--sp-4); }
.pile-sm { display: grid; gap: var(--sp-2); }
.rangee { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rangee-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.texte-doux { color: var(--sip-texte-sourdine); }
.texte-xs { font-size: var(--tx-xs); }
.texte-sm { font-size: var(--tx-sm); }
.texte-centre { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: var(--sp-4); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media print {
    .sidebar, .sidebar-voile, .topbar, .filtre-bar, .btn, .page-entete-actions { display: none !important; }
    .content-area, body.sidebar-reduite .content-area { margin-left: 0 !important; }
    body { background: #fff; }
    .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
    .dashboard-grid, .db-colonnes { grid-template-columns: 1fr !important; }
}