/*
 * ILC Pro — charte commune des applications ILC (interface SaaS)
 * ------------------------------------------------------------------
 * Source de vérité : design-system/ilc-pro.css, copiée dans le dossier
 * assets/ de chaque application (Sharing, Backup Compliance, Sortie
 * Stock, BL/CAT, Suivi Dossier). Même charte que ILC Ticketing
 * (ticketing/assets/ilc-ticketing-pro.css).
 *
 * Chargée APRÈS ilc-unified.css et les feuilles propres à l'application.
 * Les feuilles historiques posent beaucoup de règles en !important :
 * le préfixe à double ID (:root:not(#ilc-a):not(#ilc-b)) permet de les
 * remplacer sans les modifier. Aucune règle métier ici.
 *
 *   body.ilc-pro       → écrans applicatifs (coque sidebar + en-tête)
 *   body.ilc-pro-auth  → pages carte centrée (connexion, suivi public)
 *
 * Les composants lisent les jetons --ux-* ; le mode clair ne fait que
 * redéfinir ces jetons (html[data-theme="light"], clé localStorage
 * "ilc_theme" commune à toutes les applications).
 */

/* ================================================================
   1. Jetons — mode sombre (défaut)
   ================================================================ */
:root {
  --ilc-corporate-bar-height: 30px;

  --ux-font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ux-mono: "JetBrains Mono", "Cascadia Mono", "Consolas", ui-monospace, monospace;

  --ux-bg: #0b0f0d;
  --ux-sidebar: #0e1310;
  --ux-surface: #121815;
  --ux-surface-2: #161d19;
  --ux-surface-3: #1c2520;
  --ux-input: #0f1512;
  --ux-border: rgba(226, 240, 230, .08);
  --ux-border-strong: rgba(226, 240, 230, .14);
  --ux-text: #e8eee9;
  --ux-text-2: #b8c3bb;
  --ux-muted: #85918a;

  --ux-brand: #22c55e;
  --ux-brand-hover: #3fd476;
  --ux-brand-ink: #03250f;
  --ux-brand-text: #5fe596;
  --ux-brand-soft: rgba(22, 216, 97, .12);
  --ux-brand-ring: rgba(22, 216, 97, .35);

  --ux-red: #f87171;      --ux-red-bg: rgba(248, 113, 113, .13);   --ux-red-bd: rgba(248, 113, 113, .28);
  --ux-orange: #fb923c;   --ux-orange-bg: rgba(251, 146, 60, .13); --ux-orange-bd: rgba(251, 146, 60, .28);
  --ux-yellow: #facc15;   --ux-yellow-bg: rgba(250, 204, 21, .12); --ux-yellow-bd: rgba(250, 204, 21, .26);
  --ux-green: #4ade80;    --ux-green-bg: rgba(74, 222, 128, .12);  --ux-green-bd: rgba(74, 222, 128, .26);
  --ux-blue: #60a5fa;     --ux-blue-bg: rgba(96, 165, 250, .13);   --ux-blue-bd: rgba(96, 165, 250, .28);
  --ux-violet: #a78bfa;   --ux-violet-bg: rgba(167, 139, 250, .14); --ux-violet-bd: rgba(167, 139, 250, .30);
  --ux-pink: #f472b6;     --ux-pink-bg: rgba(244, 114, 182, .13);  --ux-pink-bd: rgba(244, 114, 182, .28);
  --ux-slate: #a8b3ad;    --ux-slate-bg: rgba(168, 179, 173, .12); --ux-slate-bd: rgba(168, 179, 173, .24);

  --ux-overlay: rgba(3, 6, 4, .62);
  --ux-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --ux-shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .55);
  --ux-shadow-lg: 0 24px 64px -12px rgba(0, 0, 0, .70), 0 0 0 1px rgba(226, 240, 230, .06);

  --ux-r-sm: 6px;
  --ux-r: 8px;
  --ux-r-lg: 12px;
  --ux-r-xl: 16px;
  --ux-sidebar-w: 252px;
  --ux-ease: cubic-bezier(.2, .8, .2, 1);
  --ux-safe-b: env(safe-area-inset-bottom, 0px);
}

/* ================================================================
   2. Jetons — mode clair
   ================================================================ */
:root[data-theme="light"] {
  --ux-bg: #f4f6f5;
  --ux-sidebar: #ffffff;
  --ux-surface: #ffffff;
  --ux-surface-2: #f8faf9;
  --ux-surface-3: #eef2f0;
  --ux-input: #ffffff;
  --ux-border: #e3e8e5;
  --ux-border-strong: #cfd8d3;
  --ux-text: #0f1712;
  --ux-text-2: #3c4842;
  --ux-muted: #66726b;

  --ux-brand: #07841a;
  --ux-brand-hover: #066f16;
  --ux-brand-ink: #ffffff;
  --ux-brand-text: #067416;
  --ux-brand-soft: #e7f5e9;
  --ux-brand-ring: rgba(7, 132, 26, .28);

  --ux-red: #b91c1c;      --ux-red-bg: #fdecec;    --ux-red-bd: #f6c9c9;
  --ux-orange: #b45309;   --ux-orange-bg: #fef1e4; --ux-orange-bd: #f8d6b2;
  --ux-yellow: #8a6a00;   --ux-yellow-bg: #fdf7d9; --ux-yellow-bd: #efe0a0;
  --ux-green: #15803d;    --ux-green-bg: #e8f6ec;  --ux-green-bd: #bfe3c9;
  --ux-blue: #1d4ed8;     --ux-blue-bg: #eaf1fe;   --ux-blue-bd: #c3d5fb;
  --ux-violet: #6d28d9;   --ux-violet-bg: #f1ebfe; --ux-violet-bd: #d8c8fb;
  --ux-pink: #be185d;     --ux-pink-bg: #fdebf3;   --ux-pink-bd: #f6c3da;
  --ux-slate: #475569;    --ux-slate-bg: #eef1f4;  --ux-slate-bd: #d3d9e0;

  --ux-overlay: rgba(15, 23, 18, .38);
  --ux-shadow-sm: 0 1px 2px rgba(16, 24, 20, .06);
  --ux-shadow-md: 0 6px 20px -8px rgba(16, 24, 20, .16);
  --ux-shadow-lg: 0 24px 60px -16px rgba(16, 24, 20, .28), 0 0 0 1px rgba(16, 24, 20, .05);
}

/* ================================================================
   3. Base (applications et pages carte)
   ================================================================ */
html:has(body:is(.ilc-pro, .ilc-pro-auth)) {
  background: var(--ux-bg) !important;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}
html[data-theme="light"]:has(body:is(.ilc-pro, .ilc-pro-auth)) { color-scheme: light; }

:root:not(#ilc-a):not(#ilc-b) body:is(.ilc-pro, .ilc-pro-auth) {
  --text: var(--ux-text);
  --muted: var(--ux-muted);
  --green: var(--ux-brand-text);
  --green2: var(--ux-brand);
  --accent: var(--ux-brand);
  --radius: var(--ux-r-lg);
  --shadow: var(--ux-shadow-md);
  --ilc-font: var(--ux-font);
  --ilc-display: var(--ux-font);
  --ilc-text: var(--ux-text);
  --ilc-muted: var(--ux-muted);
  --ilc-line: var(--ux-border-strong);

  margin: 0;
  padding: var(--ilc-corporate-bar-height) 0 0 !important;
  background: var(--ux-bg) !important;
  color: var(--ux-text) !important;
  font-family: var(--ux-font) !important;
  font-size: 14px;
  line-height: 1.45;
  color-scheme: inherit;
  overflow-x: hidden;

  /* Décors historiques (halos, grilles, orbites) retirés */
  &::before { display: none !important; }
  & > :is(.grid, .bg-grid, .app-bg, .bgGlow, .blob, .bg-orb) { display: none !important; }

  /* Bandeau corporate ILC conservé, plus discret */
  &::after {
    height: var(--ilc-corporate-bar-height) !important;
    background: #04450a !important;
    color: rgba(255, 255, 255, .86) !important;
    font: 600 11.5px/1 var(--ux-font) !important;
    letter-spacing: .02em !important;
    box-shadow: none !important;
  }

  & :is(h1, h2, h3, h4, .title, .h1, .top-title, .brand-title, .brandText .t1) {
    font-family: var(--ux-font) !important;
    letter-spacing: -.015em;
  }
  & ::selection { background: var(--ux-brand); color: var(--ux-brand-ink); }
  & :focus-visible { outline: 2px solid var(--ux-brand) !important; outline-offset: 2px !important; }
  & a { color: var(--ux-brand-text); }
  & .muted { color: var(--ux-muted) !important; }

  & *, & { scrollbar-width: thin; scrollbar-color: var(--ux-border-strong) transparent; }
  & ::-webkit-scrollbar { width: 10px; height: 10px; }
  & ::-webkit-scrollbar-track { background: transparent !important; border: 0 !important; }
  & ::-webkit-scrollbar-thumb {
    background: var(--ux-border-strong) !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background-clip: padding-box !important;
  }
  & ::-webkit-scrollbar-corner { background: transparent !important; }
}

/* ================================================================
   4. Coque applicative : sidebar + zone principale
   ================================================================ */
:root:not(#ilc-a):not(#ilc-b) body.ilc-pro {

  & .appShell {
    display: grid !important;
    grid-template-columns: var(--ux-sidebar-w) minmax(0, 1fr);
    width: 100%;
    max-width: none !important;
    min-height: calc(100dvh - var(--ilc-corporate-bar-height));
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  & .appSidebar {
    position: sticky;
    top: var(--ilc-corporate-bar-height);
    height: calc(100dvh - var(--ilc-corporate-bar-height));
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 18px 12px 14px;
    background: var(--ux-sidebar) !important;
    border-right: 1px solid var(--ux-border);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 60;
  }

  & .appBrand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 2px 8px 16px;
    margin: 0 0 6px;
    border-bottom: 1px solid var(--ux-border);
  }
  & .appBrand .appLogo {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    padding: 4px;
    border: 1px solid var(--ux-border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
  }
  & .appBrand .appLogo img { width: 100% !important; height: 100% !important; object-fit: contain !important; filter: none !important; }
  & .appBrand .appName { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  & .appBrand .appName b { color: var(--ux-text); font-size: 15px; font-weight: 700; line-height: 1.2; }
  & .appBrand .appName small { color: var(--ux-muted); font-size: 11.5px; font-weight: 500; }

  & .sideNav { display: flex; flex-direction: column; gap: 2px; }
  & .navGroup { display: flex; flex-direction: column; gap: 2px; }
  & .navLabel {
    margin: 16px 10px 6px;
    color: var(--ux-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  & .navGroup:first-child .navLabel { margin-top: 6px; }
  & .navGroup:not(:has(> :is(.btn, a):not([hidden]):not([style*="display:none"]):not([style*="display: none"]))) { display: none; }

  & :is(.sideNav, .sideFootActions) :is(.btn, a.btn, button) {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100%;
    min-height: 36px !important;
    height: auto !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: var(--ux-r) !important;
    background: transparent !important;
    color: var(--ux-text-2) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-align: left;
    text-decoration: none !important;
    line-height: 1.3;
    box-shadow: none !important;
    animation: none !important;
  }
  & :is(.sideNav, .sideFootActions) :is(.btn, a.btn, button):hover {
    background: var(--ux-surface-3) !important;
    color: var(--ux-text) !important;
  }
  & :is(.sideNav, .sideFootActions) :is(.btn, a.btn, button) :is(svg, .ilc-ico, .ilc-svg) {
    flex: 0 0 auto;
    width: 17px !important;
    height: 17px !important;
    color: var(--ux-muted) !important;
  }
  & :is(.sideNav, .sideFootActions) :is(.btn, a.btn, button):hover :is(svg, .ilc-ico, .ilc-svg) { color: var(--ux-text) !important; }
  & .sideNav :is(.btn, a).is-active, & .sideNav .btn.primary {
    background: var(--ux-brand-soft) !important;
    color: var(--ux-brand-text) !important;
    font-weight: 600 !important;
  }
  & .sideNav :is(.btn, a).is-active :is(svg, .ilc-ico) { color: var(--ux-brand-text) !important; }
  /* Déconnexion : toujours en rouge, fond rouge léger au survol */
  & .sideFootActions :is(.danger, .btn-logout, .logout):not(#ilc-c),
  & .sideFootActions :is(.danger, .btn-logout, .logout):not(#ilc-c) :is(svg, .ilc-ico, .ilc-svg, [data-ilc-icon]) { color: var(--ux-red) !important; }
  & .sideFootActions :is(.danger, .btn-logout, .logout):not(#ilc-c):hover { background: var(--ux-red-bg) !important; }

  & .sideFoot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--ux-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  & .sideUser {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--ux-border);
    border-radius: var(--ux-r-lg);
    background: var(--ux-surface-2);
  }
  & .sideUser .name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--ux-text);
    font-size: 13.5px;
    font-weight: 600;
  }
  & .sideUser .name::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--ux-brand);
    box-shadow: 0 0 0 3px var(--ux-brand-soft);
  }
  & .sideUser .name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  & .sideUser .role {
    align-self: flex-start;
    padding: 2px 8px;
    border: 1px solid var(--ux-border);
    border-radius: 999px;
    background: var(--ux-surface);
    color: var(--ux-text-2);
    font-size: 11.5px;
    font-weight: 600;
  }
  & .sideFootActions { display: flex; flex-direction: column; gap: 2px; }

  & .appMain {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 28px 28px;
    background: transparent !important;
  }

  & .appHeader {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    position: static !important;
  }
  & .pageTitle { min-width: 0; margin-right: auto; }
  & .pageTitle h1 { margin: 0; color: var(--ux-text) !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.2; }
  & .pageTitle p { margin: 3px 0 0; color: var(--ux-muted) !important; font-size: 13px; }
  & .headerActions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

  /* Recherche d'en-tête : .appSearch = conteneur (icône + champ) */
  & .appSearch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 320px;
    max-width: 460px;
    min-width: 200px;
    height: 38px;
    margin: 0 !important;
    padding: 0 10px 0 12px !important;
    border: 1px solid var(--ux-border-strong) !important;
    border-radius: var(--ux-r) !important;
    background: var(--ux-input) !important;
    color: var(--ux-muted) !important;
    box-shadow: var(--ux-shadow-sm) !important;
  }
  & .appSearch:focus-within { border-color: var(--ux-brand) !important; box-shadow: 0 0 0 3px var(--ux-brand-ring) !important; }
  & .appSearch :is(svg, .ilc-ico, [data-ilc-icon]) { flex: 0 0 auto; color: var(--ux-muted) !important; }
  /* :not(#ilc-c) : passe devant la règle générique des champs (§6) */
  & .appSearch input:not(#ilc-c) {
    flex: 1;
    min-width: 0;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ux-text) !important;
    -webkit-text-fill-color: var(--ux-text) !important;
    font: 400 14px/1 var(--ux-font) !important;
    outline: 0 !important;
  }
  & .appSearch input::placeholder { color: var(--ux-muted) !important; -webkit-text-fill-color: var(--ux-muted) !important; opacity: 1; }

  /* Bouton menu (tiroir), visible sous 1280 px */
  & .navToggle {
    display: none !important;
    align-items: center;
    gap: 7px;
    min-height: 38px !important;
    padding: 0 12px !important;
  }
  & .appBackdrop { display: none; }
}

/* ================================================================
   5. Boutons et icônes
   ================================================================ */
:root:not(#ilc-a):not(#ilc-b) body:is(.ilc-pro, .ilc-pro-auth) {

  & :is(button, .btn, [type="submit"]) {
    font-family: var(--ux-font) !important;
    letter-spacing: 0 !important;
    border-radius: var(--ux-r) !important;
    transform: none !important;
    transition: background-color .15s var(--ux-ease), border-color .15s var(--ux-ease),
                color .15s var(--ux-ease), box-shadow .15s var(--ux-ease), opacity .15s var(--ux-ease) !important;
  }
  & :is(button, .btn, [type="submit"]):hover { transform: none !important; }
}

:root:not(#ilc-a):not(#ilc-b) body.ilc-pro {
  & :is(.btn, a.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px !important;
    min-height: 36px !important;
    height: auto;
    padding: 0 14px !important;
    border: 1px solid var(--ux-border-strong) !important;
    background: var(--ux-surface) !important;
    color: var(--ux-text) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: var(--ux-shadow-sm) !important;
    text-shadow: none !important;
    animation: none !important;
    cursor: pointer;
  }
  & :is(.btn, a.btn):hover { background: var(--ux-surface-3) !important; color: var(--ux-text) !important; }
  & :is(.btn, button):disabled { opacity: .5 !important; cursor: not-allowed !important; }
  & .btn::before, & .btn::after { animation: none !important; }

  & :is(.btn.primary, .btn-primary, .btn.btn-primary) {
    border-color: transparent !important;
    background: var(--ux-brand) !important;
    color: var(--ux-brand-ink) !important;
    font-weight: 600 !important;
  }
  & :is(.btn.primary, .btn-primary):hover { background: var(--ux-brand-hover) !important; color: var(--ux-brand-ink) !important; }

  & :is(.btn.danger, .btn-danger) {
    border-color: var(--ux-red-bd) !important;
    background: var(--ux-surface) !important;
    color: var(--ux-red) !important;
  }
  & :is(.btn.danger, .btn-danger):hover { border-color: var(--ux-red) !important; background: var(--ux-red-bg) !important; color: var(--ux-red) !important; }

  & :is(.btn.ghost, .btn-ghost) { border-color: transparent !important; background: transparent !important; box-shadow: none !important; color: var(--ux-text-2) !important; }
  & :is(.btn.ghost, .btn-ghost):hover { background: var(--ux-surface-3) !important; color: var(--ux-text) !important; }

  & .btn.mini { min-height: 30px !important; padding: 0 10px !important; font-size: 12.5px !important; gap: 5px !important; }

  /* Couleur des icônes : ilc-unified.css force .ilc-ico en !important */
  & :is(.btn, button) :is(.ilc-ico, .ilc-svg, [data-ilc-icon] svg) {
    color: var(--ux-brand-text) !important;
    -webkit-text-fill-color: currentColor !important;
    filter: none !important;
  }
  & :is(.btn.primary, .btn-primary, .btn.danger, .btn-danger, .btn.ghost) :is(.ilc-ico, .ilc-svg, [data-ilc-icon] svg) {
    color: inherit !important;
  }
}

/* ================================================================
   6. Champs de formulaire
   ================================================================ */
:root:not(#ilc-a):not(#ilc-b) body.ilc-pro {

  & :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]), select, textarea) {
    min-height: 38px !important;
    border: 1px solid var(--ux-border-strong) !important;
    border-radius: var(--ux-r) !important;
    background-color: var(--ux-input) !important;
    color: var(--ux-text) !important;
    -webkit-text-fill-color: var(--ux-text) !important;
    font: 400 14px/1.4 var(--ux-font) !important;
    box-shadow: var(--ux-shadow-sm) !important;
    transition: border-color .15s var(--ux-ease), box-shadow .15s var(--ux-ease) !important;
  }
  & :is(input, textarea)::placeholder { color: var(--ux-muted) !important; -webkit-text-fill-color: var(--ux-muted) !important; opacity: 1; }
  & :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea):hover { border-color: var(--ux-muted) !important; }
  & :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea):focus {
    border-color: var(--ux-brand) !important;
    box-shadow: 0 0 0 3px var(--ux-brand-ring) !important;
    outline: 0 !important;
  }
  & :is(input, select, textarea):is(:disabled, [readonly]) {
    background-color: var(--ux-surface-2) !important;
    color: var(--ux-text-2) !important;
    -webkit-text-fill-color: var(--ux-text-2) !important;
    border-style: solid !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }
  & input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px var(--ux-input) inset !important;
    -webkit-text-fill-color: var(--ux-text) !important;
  }

  & select:not([multiple]):not([size]), & select[size="1"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 32px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23889590' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 9px center !important;
    background-size: 16px 16px !important;
    cursor: pointer;
  }
  & select option { background: var(--ux-surface) !important; color: var(--ux-text) !important; font-weight: 400 !important; }

  /* Listes (select multiple ou size > 1) */
  & :is(select[multiple], select[size]:not([size="1"])) { padding: 6px !important; background-image: none !important; }
  & :is(select[multiple], select[size]:not([size="1"])) option { margin: 1px 0; padding: 9px 12px !important; border-radius: var(--ux-r-sm); background: transparent !important; }
  & :is(select[multiple], select[size]:not([size="1"])) option:checked {
    background: linear-gradient(var(--ux-brand-soft), var(--ux-brand-soft)) !important;
    box-shadow: inset 3px 0 0 var(--ux-brand);
    color: var(--ux-brand-text) !important;
    -webkit-text-fill-color: var(--ux-brand-text) !important;
    font-weight: 600 !important;
  }

  & :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ux-brand); }
  & textarea { min-height: 96px; resize: vertical; line-height: 1.5 !important; padding-top: 9px !important; }

  & :is(label.lbl, .lbl, .field > label, .fieldLabel) {
    color: var(--ux-text-2) !important;
    font: 600 13px/1.3 var(--ux-font) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  & :is(.lbl, label) :is(.ilc-ico, .ilc-svg, svg) { color: var(--ux-brand-text) !important; }
}

/* ================================================================
   7. Surfaces, tableaux, badges
   ================================================================ */
:root:not(#ilc-a):not(#ilc-b) body.ilc-pro {

  /* Cartes de contenu (hors modales) */
  & .appMain :is(.panel, .card, section.glass):not(.modal):not(.modalCard) {
    margin: 0 !important;
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-r-lg) !important;
    background: var(--ux-surface) !important;
    box-shadow: var(--ux-shadow-sm) !important;
    backdrop-filter: none !important;
    color: var(--ux-text) !important;
  }
  & .appMain :is(.panel, .card, .glass)::before, & .appMain :is(.panel, .card, .glass)::after { display: none !important; }
  & :is(.panel-head, .panelHead) h2 { color: var(--ux-text) !important; font-size: 15px !important; font-weight: 650 !important; }

  & .toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

  /* Tableaux HTML */
  & :is(.table-wrap, .tableWrap) {
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-r-lg) !important;
    background: var(--ux-surface) !important;
    box-shadow: none !important;
    overflow: auto;
  }
  & :is(.table-wrap, .tableWrap) table { width: 100%; border-collapse: separate !important; border-spacing: 0 !important; background: transparent !important; }
  & :is(.table-wrap, .tableWrap) :is(thead, tbody, tfoot) { background: transparent !important; }
  & :is(.table-wrap, .tableWrap) thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 11px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ux-border) !important;
    background: var(--ux-surface-2) !important;
    color: var(--ux-muted) !important;
    font: 600 11.5px/1.3 var(--ux-font) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
  }
  & :is(.table-wrap, .tableWrap) tbody td {
    padding: 11px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ux-border) !important;
    background: transparent !important;
    color: var(--ux-text) !important;
    font-size: 13.5px !important;
    vertical-align: middle;
  }
  & :is(.table-wrap, .tableWrap) tbody tr { background: transparent !important; box-shadow: none !important; }
  & :is(.table-wrap, .tableWrap) tbody tr:hover td { background: var(--ux-surface-2) !important; }
  & :is(.table-wrap, .tableWrap) tbody tr:last-child td { border-bottom: 0 !important; }

  /* Badges, puces, chips */
  & :is(.badge, .chip, .pill, .tag) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    height: auto;
    padding: 2px 9px !important;
    border: 1px solid var(--ux-border-strong) !important;
    border-radius: 999px !important;
    background: var(--ux-surface-2) !important;
    color: var(--ux-text-2) !important;
    font: 600 12px/1.2 var(--ux-font) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    animation: none !important;
  }
  & :is(.badge, .chip, .pill, .tag) :is(.ilc-ico, svg) { width: 13px !important; height: 13px !important; color: var(--ux-brand-text) !important; }
  & .dot { box-shadow: none !important; }
  & .dot.green { background: var(--ux-green) !important; }
  & .dot.blue { background: var(--ux-blue) !important; }

  /* Indicateurs (cartes KPI) : .stats .chip → carte */
  & .kpiRow { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px !important; margin: 0 !important; }
  & .kpiRow > :is(.chip, .kpi) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px !important;
    min-height: 0;
    height: auto !important;
    padding: 10px 14px 11px !important;
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-r-lg) !important;
    background: var(--ux-surface) !important;
    box-shadow: var(--ux-shadow-sm) !important;
  }
  & .kpiRow > :is(.chip, .kpi) :is(.k, .kpiLabel) { color: var(--ux-muted) !important; font-size: 12.5px !important; font-weight: 500 !important; display: flex; align-items: center; gap: 7px; }
  & .kpiRow > :is(.chip, .kpi) :is(.v, .kpiValue) { color: var(--ux-text) !important; font-size: 22px !important; font-weight: 650 !important; line-height: 1.1; font-variant-numeric: tabular-nums; }

  /* Bloc d'alerte */
  & .alert {
    padding: 10px 14px !important;
    border: 1px solid var(--ux-red-bd) !important;
    border-radius: var(--ux-r) !important;
    background: var(--ux-red-bg) !important;
    color: var(--ux-red) !important;
    font-weight: 500 !important;
  }
}

/* ================================================================
   8. Modales et toasts
   ================================================================ */
:root:not(#ilc-a):not(#ilc-b) body.ilc-pro {

  & :is(.modalOverlay, .overlay, .app-modal-backdrop, .ilc-overlay) {
    background: var(--ux-overlay) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }
  & :is(.modal, .modalCard, .app-modal-dialog, .ilc-modal) {
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-r-xl) !important;
    background: var(--ux-surface) !important;
    color: var(--ux-text) !important;
    box-shadow: var(--ux-shadow-lg) !important;
    backdrop-filter: none !important;
  }
  & :is(.modal, .modalCard, .app-modal-dialog, .ilc-modal)::before { display: none !important; }
  & :is(.modalHeader, .modalHead, .app-modal-head) {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--ux-border) !important;
    background: var(--ux-surface) !important;
    box-shadow: none !important;
  }
  & :is(.modalTitle .h, .app-modal-head h3, .modalHead h3, .modalTitle:not(:has(.h))) {
    color: var(--ux-text) !important;
    font: 650 16px/1.3 var(--ux-font) !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
  }
  & .modalTitle .s { color: var(--ux-muted) !important; font-size: 13px !important; font-weight: 400 !important; }
  & .modalBody { padding: 18px 20px !important; background: transparent !important; }
  & :is(.modalFooter, .modalFoot) {
    gap: 8px !important;
    padding: 12px 20px !important;
    border-top: 1px solid var(--ux-border) !important;
    background: var(--ux-surface-2) !important;
  }
  & :is(.modalClose, .modal-close-btn, .iconX) {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    border-radius: var(--ux-r) !important;
    background: transparent !important;
    color: var(--ux-muted) !important;
    box-shadow: none !important;
  }
  & :is(.modalClose, .modal-close-btn, .iconX):hover { background: var(--ux-surface-3) !important; color: var(--ux-text) !important; }
  & :is(.modalClose, .modal-close-btn, .iconX) :is(.ilc-ico, svg) { color: inherit !important; }

  & .toast {
    border: 1px solid var(--ux-border-strong) !important;
    border-radius: var(--ux-r-lg) !important;
    background: var(--ux-surface) !important;
    color: var(--ux-text) !important;
    box-shadow: var(--ux-shadow-lg) !important;
    backdrop-filter: none !important;
  }
}

/* ================================================================
   9. Pages carte centrée (connexion, suivi public)
   Structure commune : .wrap > .card > (.topline) .pane + .right
   ================================================================ */
:root:not(#ilc-a):not(#ilc-b) body.ilc-pro-auth {
  background:
    radial-gradient(900px 480px at 50% -10%, var(--ux-brand-soft), transparent 70%),
    var(--ux-bg) !important;

  & .wrap {
    min-height: calc(100dvh - var(--ilc-corporate-bar-height));
    max-width: none !important;
    display: grid !important;
    place-items: center;
    /* colonne = largeur disponible : la carte peut se réduire sur mobile */
    grid-template-columns: minmax(0, 1fr);
    width: 100% !important;
    margin: 0 !important;
    padding: 40px 16px calc(40px + var(--ux-safe-b)) !important;
  }
  & .card {
    width: min(460px, 100%) !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-r-xl) !important;
    background: var(--ux-surface) !important;
    box-shadow: var(--ux-shadow-lg) !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
  }
  & .card::before, & .card::after { display: none !important; }
  & .topline { display: none !important; }

  & .right { display: contents !important; }
  & .logoBox {
    order: 0;
    grid-column: 1 / -1;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 32px 36px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  & .logoBox::before, & .logoBox::after { display: none !important; }
  & .logoBox .mark {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    text-align: center;
  }
  & .logoBox .mark::after { display: none !important; }
  & .logoBox .logoPng { width: 200px !important; height: auto !important; max-width: 100% !important; max-height: none !important; margin: 0 !important; filter: none !important; }
  & .logoBox .t1 {
    color: var(--ux-muted) !important;
    font: 600 12px/1.2 var(--ux-font) !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
  }
  & .logoBox .t2 { display: none !important; }

  & .pane { order: 1; grid-column: 1 / -1; padding: 22px 36px 28px !important; background: transparent !important; border: 0 !important; }
  & .title {
    margin: 0 0 6px !important;
    color: var(--ux-text) !important;
    font: 700 22px/1.25 var(--ux-font) !important;
    letter-spacing: -.02em !important;
    text-align: center;
    text-shadow: none !important;
  }
  & .title .accent { color: inherit !important; background: none !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; }
  & .subtitle { margin: 0 auto 24px !important; max-width: 340px; color: var(--ux-muted) !important; font: 400 13.5px/1.5 var(--ux-font) !important; text-align: center; }

  & .panel { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  /* Formulaire : .authForm (applications) ou .grid (ILC Ticketing).
     .authForm évite les collisions avec les .grid historiques (tableau Compliance,
     fond décoratif fixe de Sortie Stock). */
  & .panel :is(.grid, .authForm) {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    gap: 16px !important;
    min-width: 0 !important;
    width: 100% !important;
    background: none !important;
    opacity: 1 !important;
  }
  & .field { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
  & .field label { display: flex !important; align-items: center; gap: 7px; }
  & .field label .lblIco { width: 15px; height: 15px; flex: 0 0 15px; color: var(--ux-brand-text); }
  & :is(.field label, label.lbl) { color: var(--ux-text-2) !important; font: 600 13px/1.3 var(--ux-font) !important; letter-spacing: 0 !important; text-transform: none !important; }

  & :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    width: 100%;
    min-height: 46px !important;
    padding: 0 12px !important;
    border: 1px solid var(--ux-border-strong) !important;
    border-radius: var(--ux-r) !important;
    background: var(--ux-input) !important;
    color: var(--ux-text) !important;
    -webkit-text-fill-color: var(--ux-text) !important;
    font: 400 14.5px/1.4 var(--ux-font) !important;
    box-shadow: var(--ux-shadow-sm) !important;
  }
  & :is(input, textarea)::placeholder { color: var(--ux-muted) !important; -webkit-text-fill-color: var(--ux-muted) !important; opacity: 1; }
  & :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    border-color: var(--ux-brand) !important;
    box-shadow: 0 0 0 3px var(--ux-brand-ring) !important;
    outline: 0 !important;
  }
  & input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--ux-input) inset !important; -webkit-text-fill-color: var(--ux-text) !important; }
  & input[type="checkbox"] { accent-color: var(--ux-brand); width: 16px; height: 16px; margin: 0; }

  & .inputRow { position: relative; }
  & .inputRow input { padding-right: 46px !important; }
  & .inputRow .iconbtn {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-grid;
    place-items: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--ux-r-sm) !important;
    background: transparent !important;
    color: var(--ux-muted) !important;
    box-shadow: none !important;
  }

  /* Bouton œil générique (ilc-pro.js) : .iconbtn[data-ilc-pwd] avec deux SVG .eyeOn / .eyeOff */
  & .iconbtn[data-ilc-pwd] .eyeOff { display: none; }
  & .iconbtn[data-ilc-pwd].is-shown .eyeOn { display: none; }
  & .iconbtn[data-ilc-pwd].is-shown .eyeOff { display: inline; }
  & .iconbtn:hover { background: var(--ux-surface-3) !important; color: var(--ux-text) !important; }

  & .row { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
  & .check { display: inline-flex !important; align-items: center; gap: 8px; color: var(--ux-text-2) !important; font: 500 13px/1.3 var(--ux-font) !important; letter-spacing: 0 !important; text-transform: none !important; }
  & a { color: var(--ux-brand-text) !important; font-weight: 600; text-decoration: none; }
  & a:hover { text-decoration: underline; }

  & :is(.btn, [type="submit"]):not(.iconbtn) {
    width: 100%;
    min-height: 46px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px !important;
    border: 1px solid transparent !important;
    border-radius: var(--ux-r) !important;
    background: var(--ux-brand) !important;
    color: var(--ux-brand-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    font: 600 14.5px/1 var(--ux-font) !important;
    box-shadow: var(--ux-shadow-sm) !important;
    text-shadow: none !important;
  }
  & :is(.btn, [type="submit"]):not(.iconbtn):hover { background: var(--ux-brand-hover) !important; }
  & :is(.btn, [type="submit"]) :is(.ilc-ico, svg) { color: inherit !important; -webkit-text-fill-color: currentColor !important; }

  & .msg { font: 500 13px/1.4 var(--ux-font) !important; color: var(--ux-text-2) !important; text-align: center; }
  & .msg:empty { display: none; }
  & :is(.msg.error, .msg.err) { color: var(--ux-red) !important; }
  & .msg.ok { color: var(--ux-green) !important; }
  & .hide:not(#ilc-c) { display: none !important; }
  & .panel > .footer { margin-top: 16px !important; }

  /* Double authentification (Backup Compliance) */
  & .hint { margin: -6px 0 0 !important; color: var(--ux-muted) !important; font: 400 12.5px/1.4 var(--ux-font) !important; }
  & .actions2fa { display: flex; gap: 8px; }
  & .actions2fa .btn { flex: 1 1 0; }
  & .btn.btnSecondary:not(#ilc-c) {
    border: 1px solid var(--ux-border-strong) !important;
    background: var(--ux-surface) !important;
    color: var(--ux-text) !important;
  }
  & .btn.btnSecondary:not(#ilc-c):hover { background: var(--ux-surface-3) !important; }

  & .footer { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between !important; gap: 8px; flex-wrap: wrap; margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
  & .pill { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--ux-muted) !important; font: 500 12px/1.4 var(--ux-font) !important; display: inline !important; gap: 0 !important; letter-spacing: 0 !important; text-transform: none !important; }
  /* Halos décoratifs hérités (Sortie Stock) */
  /* (.mark::before porte le logo du mode clair : non concerné) */
  & :is(.pane, .panel)::before, & :is(.pane, .panel)::after { background: none !important; box-shadow: none !important; filter: none !important; }
  & .pill b { color: var(--ux-text-2) !important; }

  & .right :is(.info, .callout) {
    order: 2;
    grid-column: 1 / -1;
    margin: 0 !important;
    padding: 14px 36px 16px !important;
    border: 0 !important;
    border-top: 1px solid var(--ux-border) !important;
    border-radius: 0 !important;
    background: var(--ux-surface-2) !important;
    box-shadow: none !important;
    color: var(--ux-muted) !important;
  }
  & .right :is(.info, .callout)::before, & .right :is(.info, .callout)::after { display: none !important; }
  & .right .info h3 { margin: 0 0 4px !important; color: var(--ux-text-2) !important; font: 600 12px/1.3 var(--ux-font) !important; letter-spacing: 0 !important; text-transform: none !important; }
  & .right .info :is(p, li) { margin: 2px 0 !important; color: var(--ux-muted) !important; font: 400 12px/1.5 var(--ux-font) !important; }
}

/* Logo : version texte blanc en sombre, version foncée en clair */
:root[data-theme="light"]:not(#ilc-a):not(#ilc-b) body.ilc-pro-auth {
  & .logoBox .logoPng { display: none !important; }
  & .logoBox .mark::before {
    content: "";
    display: block;
    width: 112px;
    height: 80px;
    background: url("ilc-logo.png") center / contain no-repeat;
  }
}

/* ================================================================
   10. Responsive : sidebar en tiroir, mobile (Android / iOS)
   ================================================================ */
@media (max-width: 1279px) {
  :root:not(#ilc-a):not(#ilc-b) body.ilc-pro {
    & .appShell { grid-template-columns: minmax(0, 1fr); }
    & .appSidebar {
      position: fixed !important;
      top: var(--ilc-corporate-bar-height);
      left: 0;
      bottom: 0;
      width: min(var(--ux-sidebar-w), 86vw);
      height: auto;
      z-index: 1200;
      padding-bottom: calc(14px + var(--ux-safe-b));
      box-shadow: var(--ux-shadow-lg);
      transform: translateX(-102%);
      visibility: hidden;
      transition: transform .22s var(--ux-ease), visibility .22s;
    }
    &.drawer-open .appSidebar { transform: none; visibility: visible; }
    &.drawer-open .appBackdrop {
      display: block;
      position: fixed;
      inset: var(--ilc-corporate-bar-height) 0 0;
      z-index: 1100;
      background: var(--ux-overlay);
    }
    & .navToggle { display: inline-flex !important; }
  }
}

@media (max-width: 900px) {
  :root:not(#ilc-a):not(#ilc-b) body.ilc-pro {
    & .appMain { padding: 14px 14px calc(20px + var(--ux-safe-b)); gap: 12px; }
    & .appHeader { gap: 10px; }
    & .pageTitle p { display: none; }
    & .appSearch { order: 3; flex: 1 1 100%; max-width: none; }
  }
}

@media (max-width: 640px) {
  :root:not(#ilc-a):not(#ilc-b) body.ilc-pro {
    /* Cibles tactiles confortables et pas de zoom auto iOS au focus */
    & :is(.btn, a.btn) { min-height: 42px !important; }
    /* même sélecteur que §6 : à spécificité égale, cette règle (plus tardive) gagne */
    & :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]), select, textarea) { min-height: 44px !important; font-size: 16px !important; }
    & .appSearch { height: 44px; }
    & .appSearch input:not(#ilc-c) { font-size: 16px !important; }
    & :is(.modal, .modalCard, .app-modal-dialog) {
      width: 100% !important;
      max-width: none !important;
      max-height: calc(100dvh - var(--ilc-corporate-bar-height) - 12px) !important;
      margin: auto 0 0 !important;
      border-radius: var(--ux-r-xl) var(--ux-r-xl) 0 0 !important;
    }
    & :is(.modalOverlay, .overlay) { padding: 0 !important; align-items: flex-end !important; }
    & :is(.modalFooter, .modalFoot) { padding-bottom: calc(12px + var(--ux-safe-b)) !important; flex-direction: row !important; flex-wrap: wrap; }
    & :is(.modalFooter, .modalFoot) .btn { flex: 1 1 140px; height: auto !important; max-height: none; }
  }
  :root:not(#ilc-a):not(#ilc-b) body.ilc-pro-auth {
    & .wrap { padding: 16px 12px calc(16px + var(--ux-safe-b)) !important; place-items: start center; }
    & .logoBox { padding: 26px 22px 0 !important; }
    & .pane { padding: 18px 22px 24px !important; }
    & .right :is(.info, .callout) { padding: 12px 22px !important; }
    & :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { min-height: 44px !important; font-size: 16px !important; }
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:not(#ilc-a):not(#ilc-b) body:is(.ilc-pro, .ilc-pro-auth) * { transition: none !important; animation: none !important; }
}