/* =============================================================
   Skeleton — Thème UI (Bootstrap 5.3 + surcharge sk-*)
   =============================================================
   Préfixes :
     .sk-*            classes du template
     [data-sk-*]      attributs pilotant layout / menu / densité / lecture
     --sk-*           variables propres au template
     --bs-*           variables Bootstrap surchargées
   ============================================================= */


/* =============================================================
   COUCHE 0 : POLICES (fonts variables woff2)
   ============================================================= */

/* Inter — sans-serif par défaut (axes opsz + wght) */
@font-face {
  font-family: 'Inter';
  src: url("../fonts/Inter-VariableFont_opsz,wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("../fonts/Inter-Italic-VariableFont_opsz,wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* GeistMono — monospace par défaut (formulaires) */
@font-face {
  font-family: 'GeistMono';
  src: url("../fonts/GeistMono-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GeistMono';
  src: url("../fonts/GeistMono-Italic-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Atkinson Hyperlegible Next — sans-serif "facile à lire" */
@font-face {
  font-family: 'AtkinsonHyperlegibleNext';
  src: url("../fonts/AtkinsonHyperlegibleNext-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AtkinsonHyperlegibleNext';
  src: url("../fonts/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Atkinson Hyperlegible Mono — monospace "facile à lire" */
@font-face {
  font-family: 'AtkinsonHyperlegibleMono';
  src: url("../fonts/AtkinsonHyperlegibleMono-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AtkinsonHyperlegibleMono';
  src: url("../fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


/* =============================================================
   COUCHE 1 : SURCHARGE DES VARIABLES --BS-*
   ============================================================= */
:root {
  --bs-primary: #3b82f6;  --bs-primary-rgb: 59,130,246;
  --bs-secondary: #64748b; --bs-secondary-rgb: 100,116,139;
  --bs-success: #10b981;  --bs-success-rgb: 16,185,129;
  --bs-danger: #ef4444;   --bs-danger-rgb: 239,68,68;
  --bs-warning: #f59e0b;  --bs-warning-rgb: 245,158,11;
  --bs-info: #06b6d4;     --bs-info-rgb: 6,182,212;
  --bs-body-font-size: 0.9375rem;
  --bs-border-radius: 6px; --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 10px; --bs-border-radius-xl: 16px;
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  --bs-box-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --bs-box-shadow-lg: 0 12px 40px rgba(0,0,0,0.2);
  --bs-focus-ring-width: 3px;
  --bs-focus-ring-opacity: 0.15;
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb),0.15);

  --sk-sidebar-width: 250px;
  --sk-sidebar-collapsed-width: 64px;
  --sk-sidebar-transition: 0.25s cubic-bezier(0.4,0,0.2,1);
  --sk-topbar-height: 48px;

  /* Borne latérale globale : 0 en mode fluide (par défaut),
     recalculée aux breakpoints quand data-sk-fluid="0" pour reproduire les
     max-width de .container Bootstrap. Appliquée à TOUT le site
     (topbar + sidebar + main) via les règles de layout plus bas. */
  --sk-side-offset: 0px;

  /* DENSITÉ — valeurs par défaut (normal) */
  --sk-cell-py: 0.625rem;
  --sk-cell-px: 0.75rem;
  --sk-row-height: auto;
  --sk-input-py: 0.375rem;
  --sk-input-px: 0.75rem;
  --sk-card-padding: 1rem;
  --sk-gap: 1.25rem;
  --sk-font-size: 0.9375rem;
  --sk-font-size-sm: 0.8125rem;
  --sk-badge-py: 0.6em;
  --sk-badge-px: 0.9em;
  --sk-badge-font: 0.75rem;

  /* LECTURE — par défaut (normal) : Inter + GeistMono */
  --sk-font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sk-font-mono: 'GeistMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  --bs-body-font-family: var(--sk-font-sans);
  --bs-font-monospace: var(--sk-font-mono);
}

/* --- LECTURE FACILE À LIRE : Atkinson Hyperlegible --- */
[data-sk-reading="easy"] {
  --sk-font-sans: 'AtkinsonHyperlegibleNext', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sk-font-mono: 'AtkinsonHyperlegibleMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Application monospace aux champs de formulaire (input/select/textarea) */
.form-control, .form-select, .input-group-text,
input, select, textarea {
  font-family: var(--sk-font-mono) !important;
  font-variant-ligatures: none;
}

/* --- DENSITÉ COMPACT --- */
[data-sk-density="compact"] {
  --sk-cell-py: 0.3rem;
  --sk-cell-px: 0.5rem;
  --sk-input-py: 0.2rem;
  --sk-input-px: 0.5rem;
  --sk-card-padding: 0.625rem;
  --sk-gap: 0.75rem;
  --sk-font-size: 0.8125rem;
  --sk-font-size-sm: 0.75rem;
  --sk-badge-py: 0.4em;
  --sk-badge-px: 0.6em;
  --sk-badge-font: 0.6875rem;
}

/* --- DENSITÉ CONFORTABLE --- */
[data-sk-density="comfortable"] {
  --sk-cell-py: 0.875rem;
  --sk-cell-px: 1rem;
  --sk-input-py: 0.5rem;
  --sk-input-px: 1rem;
  --sk-card-padding: 1.5rem;
  --sk-gap: 1.75rem;
  --sk-font-size: 1rem;
  --sk-font-size-sm: 0.875rem;
  --sk-badge-py: 0.8em;
  --sk-badge-px: 1.1em;
  --sk-badge-font: 0.8125rem;
}

/* Application de la densité aux composants */
.table > :not(caption) > * > * {
  padding: var(--sk-cell-py) var(--sk-cell-px);
}
.card-body { padding: var(--sk-card-padding); }
.card-header, .card-footer { padding: calc(var(--sk-card-padding) * 0.65) var(--sk-card-padding); }
.sk-content { padding: var(--sk-gap); font-size: var(--sk-font-size); }
.badge {
  padding: var(--sk-badge-py) var(--sk-badge-px);
  font-size: var(--sk-badge-font);
}


/* --- THÈME SOMBRE --- */
[data-bs-theme="dark"] {
  --bs-body-bg: #0f1219; --bs-body-bg-rgb: 15,18,25;
  --bs-body-color: #e2e5ea; --bs-body-color-rgb: 226,229,234;
  --bs-secondary-bg: #181d27; --bs-secondary-bg-rgb: 24,29,39;
  --bs-tertiary-bg: #1e2433; --bs-tertiary-bg-rgb: 30,36,51;
  --bs-secondary-color: rgba(226,229,234,0.65);
  --bs-tertiary-color: rgba(226,229,234,0.4);
  --bs-emphasis-color: #f8f9fa; --bs-heading-color: #f0f1f3;
  --bs-border-color: rgba(255,255,255,0.20);
  --bs-border-color-translucent: rgba(255,255,255,0.14);
  --bs-link-color: #60a5fa; --bs-link-hover-color: #93c5fd;
  --bs-primary-text-emphasis: #93c5fd; --bs-primary-bg-subtle: rgba(59,130,246,0.15); --bs-primary-border-subtle: rgba(59,130,246,0.3);
  --bs-success-text-emphasis: #6ee7b7; --bs-success-bg-subtle: rgba(16,185,129,0.15); --bs-success-border-subtle: rgba(16,185,129,0.3);
  --bs-danger-text-emphasis: #fca5a5; --bs-danger-bg-subtle: rgba(239,68,68,0.15); --bs-danger-border-subtle: rgba(239,68,68,0.3);
  --bs-warning-text-emphasis: #fcd34d; --bs-warning-bg-subtle: rgba(245,158,11,0.15); --bs-warning-border-subtle: rgba(245,158,11,0.3);
  --bs-info-text-emphasis: #67e8f9; --bs-info-bg-subtle: rgba(6,182,212,0.15); --bs-info-border-subtle: rgba(6,182,212,0.3);
  --bs-secondary-text-emphasis: #cbd5e1; --bs-secondary-bg-subtle: rgba(100,116,139,0.15);
  --bs-card-bg: #181d27; --bs-card-border-color: rgba(255,255,255,0.18); --bs-card-cap-bg: rgba(255,255,255,0.03);
  --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: rgba(255,255,255,0.16); --bs-table-hover-bg: rgba(255,255,255,0.04);
  --bs-modal-bg: #1e2433; --bs-modal-border-color: rgba(255,255,255,0.18);
  --bs-modal-header-border-color: rgba(255,255,255,0.16); --bs-modal-footer-border-color: rgba(255,255,255,0.16);
  --bs-dropdown-bg: #1e2433; --bs-dropdown-border-color: rgba(255,255,255,0.18);
  --bs-dropdown-link-color: var(--bs-secondary-color); --bs-dropdown-link-hover-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: rgba(255,255,255,0.06); --bs-dropdown-divider-bg: rgba(255,255,255,0.14);
  --bs-dropdown-header-color: var(--bs-tertiary-color);
  color-scheme: dark;
  --sk-input-bg: #252c3d; --sk-input-border: rgba(255,255,255,0.20);
  --sk-input-focus-border: var(--bs-primary); --sk-input-focus-shadow: rgba(var(--bs-primary-rgb),0.2);
  --sk-sidebar-bg: #141820; --sk-sidebar-border: rgba(255,255,255,0.16);
  --sk-sidebar-item-hover: rgba(255,255,255,0.06); --sk-sidebar-item-active: rgba(59,130,246,0.15);
  --sk-topbar-bg: #141820;
  --sk-card-gradient: linear-gradient(45deg,#012552,#001835);
}

/* --- THÈME CLAIR --- */
[data-bs-theme="light"] {
  --bs-body-bg: #f0f2f5; --bs-body-bg-rgb: 240,242,245;
  --bs-body-color: #1e293b; --bs-body-color-rgb: 30,41,59;
  --bs-secondary-bg: #ffffff; --bs-secondary-bg-rgb: 255,255,255;
  --bs-tertiary-bg: #f8f9fa;
  --bs-secondary-color: rgba(30,41,59,0.65); --bs-tertiary-color: rgba(30,41,59,0.4);
  --bs-emphasis-color: #0f172a; --bs-heading-color: #0f172a;
  --bs-border-color: rgba(0,0,0,0.20); --bs-border-color-translucent: rgba(0,0,0,0.14);
  --bs-link-color: #2563eb; --bs-link-hover-color: #1d4ed8;
  --bs-primary-text-emphasis: #1d4ed8; --bs-primary-bg-subtle: rgba(59,130,246,0.1); --bs-primary-border-subtle: rgba(59,130,246,0.25);
  --bs-success-text-emphasis: #059669; --bs-success-bg-subtle: rgba(16,185,129,0.1);
  --bs-danger-text-emphasis: #dc2626; --bs-danger-bg-subtle: rgba(239,68,68,0.1);
  --bs-warning-text-emphasis: #d97706; --bs-warning-bg-subtle: rgba(245,158,11,0.1);
  --bs-info-text-emphasis: #0891b2; --bs-info-bg-subtle: rgba(6,182,212,0.1);
  --bs-card-bg: #ffffff; --bs-card-border-color: rgba(0,0,0,0.18); --bs-card-cap-bg: rgba(0,0,0,0.02);
  --bs-table-hover-bg: rgba(0,0,0,0.03); --bs-table-border-color: rgba(0,0,0,0.16);
  --bs-modal-bg: #ffffff; --bs-modal-border-color: rgba(0,0,0,0.18);
  --bs-dropdown-bg: #ffffff; --bs-dropdown-border-color: rgba(0,0,0,0.18);
  --bs-dropdown-link-hover-bg: rgba(0,0,0,0.04);
  --sk-input-bg: #ffffff; --sk-input-border: rgba(0,0,0,0.22);
  --sk-input-focus-border: var(--bs-primary); --sk-input-focus-shadow: rgba(var(--bs-primary-rgb),0.15);
  --sk-sidebar-bg: #ffffff; --sk-sidebar-border: rgba(0,0,0,0.16);
  --sk-sidebar-item-hover: rgba(0,0,0,0.04); --sk-sidebar-item-active: rgba(59,130,246,0.1);
  --sk-topbar-bg: #ffffff;
  --sk-card-gradient: linear-gradient(-45deg, #1970e2, #4695ff);
}

/* Light + Dark : headers/footers teintés comme .sk-sidebar-link.active
   (thèmes contraste fort : non surchargés, restent neutres)
   Note : on ne passe pas par --bs-card-cap-bg car Bootstrap redéfinit cette
   variable localement sur .card, ce qui écrase une surcharge au niveau html. */
[data-bs-theme="light"] .modal-header,
[data-bs-theme="dark"]  .modal-header,
[data-bs-theme="light"] .modal-footer,
[data-bs-theme="dark"]  .modal-footer,
[data-bs-theme="light"] .card-header,
[data-bs-theme="dark"]  .card-header {
  background: var(--sk-sidebar-item-active);
}

/* --- THÈME SOMBRE CONTRASTE FORT --- */
[data-bs-theme="high-contrast-dark"] {
  --bs-body-bg: #000000; --bs-body-bg-rgb: 0,0,0;
  --bs-body-color: #ffffff; --bs-body-color-rgb: 255,255,255;
  --bs-secondary-bg: #0a0a0a; --bs-secondary-bg-rgb: 10,10,10;
  --bs-tertiary-bg: #141414; --bs-tertiary-bg-rgb: 20,20,20;
  --bs-secondary-color: rgba(255,255,255,0.9);
  --bs-tertiary-color: rgba(255,255,255,0.7);
  --bs-emphasis-color: #ffffff; --bs-heading-color: #ffffff;

  --bs-border-color: rgba(255,255,255,0.65);
  --bs-border-color-translucent: rgba(255,255,255,0.5);

  --bs-link-color: #8fc4ff; --bs-link-hover-color: #cce0ff;
  --bs-primary: #6aa8ff; --bs-primary-rgb: 106,168,255;
  --bs-success: #4ade80; --bs-success-rgb: 74,222,128;
  --bs-danger: #ff8080; --bs-danger-rgb: 255,128,128;
  --bs-warning: #fcd34d; --bs-warning-rgb: 252,211,77;
  --bs-info: #3ddfee; --bs-info-rgb: 61,223,238;

  --bs-primary-text-emphasis: #bcd9ff; --bs-primary-bg-subtle: rgba(106,168,255,0.3); --bs-primary-border-subtle: rgba(106,168,255,0.65);
  --bs-success-text-emphasis: #86efac; --bs-success-bg-subtle: rgba(74,222,128,0.3); --bs-success-border-subtle: rgba(74,222,128,0.65);
  --bs-danger-text-emphasis: #fecaca; --bs-danger-bg-subtle: rgba(255,128,128,0.3); --bs-danger-border-subtle: rgba(255,128,128,0.65);
  --bs-warning-text-emphasis: #fef08a; --bs-warning-bg-subtle: rgba(252,211,77,0.3); --bs-warning-border-subtle: rgba(252,211,77,0.65);
  --bs-info-text-emphasis: #a5f3fc; --bs-info-bg-subtle: rgba(61,223,238,0.3); --bs-info-border-subtle: rgba(61,223,238,0.65);
  --bs-secondary-text-emphasis: #f1f5f9; --bs-secondary-bg-subtle: rgba(148,163,184,0.3);

  --bs-card-bg: #0a0a0a; --bs-card-border-color: rgba(255,255,255,0.6); --bs-card-cap-bg: rgba(255,255,255,0.08);
  --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: rgba(255,255,255,0.5); --bs-table-hover-bg: rgba(255,255,255,0.12);
  --bs-modal-bg: #141414; --bs-modal-border-color: rgba(255,255,255,0.6);
  --bs-modal-header-border-color: rgba(255,255,255,0.5); --bs-modal-footer-border-color: rgba(255,255,255,0.5);
  --bs-dropdown-bg: #141414; --bs-dropdown-border-color: rgba(255,255,255,0.6);
  --bs-dropdown-link-color: rgba(255,255,255,0.9); --bs-dropdown-link-hover-color: #ffffff;
  --bs-dropdown-link-hover-bg: rgba(255,255,255,0.18); --bs-dropdown-divider-bg: rgba(255,255,255,0.45);
  --bs-dropdown-header-color: rgba(255,255,255,0.7);

  color-scheme: dark;
  --sk-input-bg: #141414; --sk-input-border: rgba(255,255,255,0.65);
  --sk-input-focus-border: var(--bs-primary); --sk-input-focus-shadow: rgba(var(--bs-primary-rgb),0.45);
  --sk-sidebar-bg: #000000; --sk-sidebar-border: rgba(255,255,255,0.5);
  --sk-sidebar-item-hover: rgba(255,255,255,0.14); --sk-sidebar-item-active: rgba(106,168,255,0.3);
  --sk-topbar-bg: #000000;
  --bs-focus-ring-opacity: 0.45;
}
[data-bs-theme="high-contrast-dark"] .text-body-secondary { color: rgba(255,255,255,0.85) !important; }
[data-bs-theme="high-contrast-dark"] .text-body-tertiary { color: rgba(255,255,255,0.7) !important; }

/* --- THÈME CLAIR CONTRASTE FORT --- */
[data-bs-theme="high-contrast-light"] {
  --bs-body-bg: #ffffff; --bs-body-bg-rgb: 255,255,255;
  --bs-body-color: #000000; --bs-body-color-rgb: 0,0,0;
  --bs-secondary-bg: #f5f5f5; --bs-secondary-bg-rgb: 245,245,245;
  --bs-tertiary-bg: #ebebeb; --bs-tertiary-bg-rgb: 235,235,235;
  --bs-secondary-color: rgba(0,0,0,0.9);
  --bs-tertiary-color: rgba(0,0,0,0.7);
  --bs-emphasis-color: #000000; --bs-heading-color: #000000;

  --bs-border-color: rgba(0,0,0,0.65);
  --bs-border-color-translucent: rgba(0,0,0,0.5);

  --bs-link-color: #0033cc; --bs-link-hover-color: #001f7a;
  --bs-primary: #0040d0; --bs-primary-rgb: 0,64,208;
  --bs-success: #006b3c; --bs-success-rgb: 0,107,60;
  --bs-danger: #b00000; --bs-danger-rgb: 176,0,0;
  --bs-warning: #a05400; --bs-warning-rgb: 160,84,0;
  --bs-info: #005266; --bs-info-rgb: 0,82,102;

  --bs-primary-text-emphasis: #001f7a; --bs-primary-bg-subtle: rgba(0,64,208,0.18); --bs-primary-border-subtle: rgba(0,64,208,0.6);
  --bs-success-text-emphasis: #003d22; --bs-success-bg-subtle: rgba(0,107,60,0.18); --bs-success-border-subtle: rgba(0,107,60,0.6);
  --bs-danger-text-emphasis: #660000; --bs-danger-bg-subtle: rgba(176,0,0,0.18); --bs-danger-border-subtle: rgba(176,0,0,0.6);
  --bs-warning-text-emphasis: #5a3000; --bs-warning-bg-subtle: rgba(160,84,0,0.18); --bs-warning-border-subtle: rgba(160,84,0,0.6);
  --bs-info-text-emphasis: #00242d; --bs-info-bg-subtle: rgba(0,82,102,0.18); --bs-info-border-subtle: rgba(0,82,102,0.6);
  --bs-secondary-text-emphasis: #1e293b; --bs-secondary-bg-subtle: rgba(71,85,105,0.18);

  --bs-card-bg: #ffffff; --bs-card-border-color: rgba(0,0,0,0.6); --bs-card-cap-bg: rgba(0,0,0,0.05);
  --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: rgba(0,0,0,0.5); --bs-table-hover-bg: rgba(0,0,0,0.08);
  --bs-modal-bg: #ffffff; --bs-modal-border-color: rgba(0,0,0,0.6);
  --bs-modal-header-border-color: rgba(0,0,0,0.5); --bs-modal-footer-border-color: rgba(0,0,0,0.5);
  --bs-dropdown-bg: #ffffff; --bs-dropdown-border-color: rgba(0,0,0,0.6);
  --bs-dropdown-link-color: rgba(0,0,0,0.9); --bs-dropdown-link-hover-color: #000000;
  --bs-dropdown-link-hover-bg: rgba(0,0,0,0.12); --bs-dropdown-divider-bg: rgba(0,0,0,0.45);
  --bs-dropdown-header-color: rgba(0,0,0,0.7);

  color-scheme: light;
  --sk-input-bg: #ffffff; --sk-input-border: rgba(0,0,0,0.65);
  --sk-input-focus-border: var(--bs-primary); --sk-input-focus-shadow: rgba(var(--bs-primary-rgb),0.3);
  --sk-sidebar-bg: #ffffff; --sk-sidebar-border: rgba(0,0,0,0.5);
  --sk-sidebar-item-hover: rgba(0,0,0,0.1); --sk-sidebar-item-active: rgba(0,64,208,0.18);
  --sk-topbar-bg: #ffffff;
  --bs-focus-ring-opacity: 0.35;
}
[data-bs-theme="high-contrast-light"] .text-body-secondary { color: rgba(0,0,0,0.85) !important; }
[data-bs-theme="high-contrast-light"] .text-body-tertiary { color: rgba(0,0,0,0.7) !important; }


/* =============================================================
   COUCHE 2 : LAYOUT
   ============================================================= */

/* Mode borné (data-sk-fluid="0") : reproduit les max-width de .container
   Bootstrap et concentre l'offset des 2 côtés de l'écran. En data-sk-fluid="1"
   (défaut), --sk-side-offset reste à 0 → pleine largeur. */
@media (min-width: 576px)  { [data-sk-fluid="0"] { --sk-side-offset: max(0px, calc((100vw - 540px)  / 2)); } }
@media (min-width: 768px)  { [data-sk-fluid="0"] { --sk-side-offset: max(0px, calc((100vw - 720px)  / 2)); } }
@media (min-width: 992px)  { [data-sk-fluid="0"] { --sk-side-offset: max(0px, calc((100vw - 960px)  / 2)); } }
@media (min-width: 1200px) { [data-sk-fluid="0"] { --sk-side-offset: max(0px, calc((100vw - 1140px) / 2)); } }
@media (min-width: 1400px) { [data-sk-fluid="0"] { --sk-side-offset: max(0px, calc((100vw - 1320px) / 2)); } }

.sk-topbar {
  position: fixed; top: 0;
  left: var(--sk-side-offset); right: var(--sk-side-offset);
  z-index: 1050;
  height: var(--sk-topbar-height);
  background: var(--sk-topbar-bg);
  border-bottom: 1px solid var(--bs-border-color);
  display: flex; align-items: center;
  padding: 0 1rem; gap: 0.5rem;
  transition: left var(--sk-sidebar-transition), right var(--sk-sidebar-transition);
}
.sk-topbar-brand {
  display: flex; align-items: center; gap: 0.625rem;
  text-decoration: none; margin-right: 0.5rem;
}
.sk-topbar-brand-logo {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--bs-border-radius);
  background: linear-gradient(135deg, var(--sk-brand-logo-from, var(--bs-primary)), var(--sk-brand-logo-to, var(--bs-success)));
  color: var(--sk-brand-logo-color, #fff); font-weight: 700; font-size: 0.875rem;
}
.sk-topbar-brand-text {
  font-weight: 700; font-size: 1.05rem; color: var(--bs-emphasis-color); white-space: nowrap;
}
.sk-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.sk-topbar-demo { position: relative; }
.sk-topbar-lg { height: 72px; }

/* Modifiers réutilisables (peuvent s'appliquer sur tout header-like) */
.sk-header-transparent { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
.sk-header-vibrant {
  background: linear-gradient(135deg, rgba(var(--bs-primary-rgb),0.12), rgba(var(--bs-success-rgb),0.08));
  backdrop-filter: blur(16px);
}

.sk-sidebar {
  position: fixed; top: var(--sk-topbar-height); left: var(--sk-side-offset); bottom: 0;
  width: var(--sk-sidebar-width);
  background: var(--sk-sidebar-bg);
  border-right: 1px solid var(--sk-sidebar-border);
  display: flex; flex-direction: column; z-index: 1040;
  transition: width var(--sk-sidebar-transition), transform var(--sk-sidebar-transition), left var(--sk-sidebar-transition);
  overflow: hidden;
}
.sk-sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.5rem; }
/* Scrollbar du menu sidebar uniquement : couleur = fond sidebar (suit le thème) */
.sk-sidebar-nav { scrollbar-width: thin; scrollbar-color: var(--sk-sidebar-bg) var(--sk-sidebar-bg); }
.sk-sidebar-nav::-webkit-scrollbar { width: 8px; }
.sk-sidebar-nav::-webkit-scrollbar-track { background: var(--sk-sidebar-bg); }
.sk-sidebar-nav::-webkit-scrollbar-thumb { background: var(--sk-sidebar-bg); border-radius: 4px; }
.sk-sidebar-section { margin-bottom: 0.25rem; }
.sk-sidebar-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: 100%; padding: 0.75rem 0.75rem 0.375rem; font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--bs-tertiary-color); white-space: nowrap; overflow: hidden;
  background: transparent; border: 0; text-align: left; cursor: pointer;
}
.sk-sidebar-heading:hover { color: var(--bs-emphasis-color); }
.sk-sidebar-chevron { font-size: 0.75rem; transition: transform 0.2s; }
.sk-sidebar-section.open .sk-sidebar-chevron { transform: rotate(180deg); }
.sk-sidebar-children { display: none; }
.sk-sidebar-section.open .sk-sidebar-children { display: block; }
.sk-sidebar-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem; border-radius: var(--bs-border-radius);
  color: var(--bs-secondary-color); text-decoration: none;
  font-size: 0.875rem; transition: all 0.15s; white-space: nowrap;
}
.sk-sidebar-link i { font-size: 1.125rem; width: 1.25rem; text-align: center; flex-shrink: 0; }
.sk-sidebar-link:hover { background: var(--sk-sidebar-item-hover); color: var(--bs-emphasis-color); }
.sk-sidebar-link.active { background: var(--sk-sidebar-item-active); color: var(--bs-primary); font-weight: 500; }
.sk-sidebar-footer { padding: 0.75rem; border-top: 1px solid var(--sk-sidebar-border); flex-shrink: 0; }

/* Mode icônes : sidebar réduite (piloté par data-sk-sidebar-pos="icon" sur <html>) */
[data-sk-sidebar-pos="icon"] .sk-sidebar { width: var(--sk-sidebar-collapsed-width); }
[data-sk-sidebar-pos="icon"] .sk-sidebar-nav { overflow-y: auto; overflow-x: hidden; }
[data-sk-sidebar-pos="icon"] .sk-sidebar-heading,
[data-sk-sidebar-pos="icon"] .sk-sidebar-link span,
[data-sk-sidebar-pos="icon"] .sk-sidebar-badge { display: none; }
[data-sk-sidebar-pos="icon"] .sk-sidebar-link { justify-content: center; padding: 0.625rem; position: relative; overflow: visible; }
/* Accordéon désactivé : enfants toujours visibles en mode icônes */
[data-sk-sidebar-pos="icon"] .sk-sidebar-children { display: block; }
/* Tooltip latéral au survol (mode icônes). Le rail scrolle désormais : un
   ::after serait rogné par overflow, donc theme.js rend la bulle sur <body>
   en position fixe et la positionne face à l'icône survolée. */
.sk-tip-float {
  position: fixed; z-index: 1060; transform: translateY(-50%);
  padding: 0.25rem 0.5rem;
  background: var(--sk-sidebar-bg); color: var(--bs-emphasis-color);
  border: 1px solid var(--sk-sidebar-border); border-radius: var(--bs-border-radius);
  font-size: 0.8125rem; font-weight: 400; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); pointer-events: none;
}

/* Masquage complet de la sidebar en desktop (toggle via bouton topbar)
   Scopé au desktop : en mobile, c'est .show sur la sidebar qui pilote la visibilité.
   Translate inclut --sk-side-offset pour disparaître entièrement même en mode borné. */
@media (min-width: 992px) {
  .sk-app.sidebar-hidden .sk-sidebar { transform: translateX(calc(-100% - var(--sk-side-offset))); }
  .sk-app.sidebar-hidden .sk-main { margin-left: var(--sk-side-offset) !important; }
}

.sk-main {
  flex: 1;
  margin-left: calc(var(--sk-sidebar-width) + var(--sk-side-offset));
  margin-right: var(--sk-side-offset);
  padding-top: var(--sk-topbar-height);
  transition: margin-left var(--sk-sidebar-transition), margin-right var(--sk-sidebar-transition);
  display: flex; flex-direction: column; min-height: 100vh;
}
[data-sk-sidebar-pos="icon"] .sk-main {
  margin-left: calc(var(--sk-sidebar-collapsed-width) + var(--sk-side-offset));
}

.sk-menubar {
  background: var(--sk-topbar-bg); border-bottom: 1px solid var(--bs-border-color);
  padding: 0 1.25rem; display: flex; align-items: center; gap: 0.25rem; height: 40px;
}
.sk-menubar .nav-link {
  font-size: var(--sk-font-size-sm); padding: 0.25rem 0.625rem; border-radius: var(--bs-border-radius);
  color: var(--bs-secondary-color); transition: all 0.15s; white-space: nowrap;
}
.sk-menubar .nav-link:hover { background: var(--sk-sidebar-item-hover); color: var(--bs-emphasis-color); }
.sk-menubar .nav-link.active { color: var(--bs-primary); font-weight: 500; }

.sk-topbar-nav {
  display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0;
}
.sk-topbar-nav .nav-link {
  font-size: var(--sk-font-size-sm); padding: 0.3rem 0.625rem; border-radius: var(--bs-border-radius);
  color: var(--bs-secondary-color); transition: all 0.15s; white-space: nowrap;
}
.sk-topbar-nav .nav-link:hover { background: var(--sk-sidebar-item-hover); color: var(--bs-emphasis-color); }
.sk-topbar-nav .nav-link.active { color: var(--bs-primary); font-weight: 500; }

/* Combinaisons layout / position menu */
[data-sk-layout="topbar"] .sk-sidebar { display: none; }
[data-sk-layout="topbar"] .sk-main { margin-left: var(--sk-side-offset) !important; }
[data-sk-layout="topbar"] .sk-topbar-sidebar-toggle { display: none !important; }
[data-sk-layout="sidebar"] .sk-topbar-nav { display: none !important; }
[data-sk-layout="sidebar"] .sk-menubar { display: none !important; }
[data-sk-menu-pos="in-bar"] .sk-menubar { display: none !important; }
[data-sk-menu-pos="under-bar"][data-sk-layout="sidebar"] .sk-menubar { display: none !important; }
[data-sk-menu-pos="under-bar"] .sk-topbar-nav { display: none !important; }

.sk-page-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--bs-border-color); }
.sk-page-title { font-weight: 600; font-size: 1.25rem; color: var(--bs-emphasis-color); margin: 0; }

.sk-content { flex: 1; }
.sk-footer {
  border-top: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
}

.sk-backdrop {
  position: fixed; top: var(--sk-topbar-height);
  left: var(--sk-side-offset); right: var(--sk-side-offset); bottom: 0;
  background: rgba(0,0,0,0.5); z-index: 1039;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.sk-backdrop.show { opacity: 1; pointer-events: all; }

/* Offcanvas réglages : au-dessus de la topbar (1050) */
.offcanvas { z-index: 1060; }
.offcanvas-backdrop { z-index: 1055; }

/* Sections conditionnelles du panneau réglages selon data-sk-layout */
[data-sk-layout="sidebar"] [data-sk-show="topbar"]  { display: none !important; }
[data-sk-layout="topbar"]  [data-sk-show="sidebar"] { display: none !important; }

@media (max-width: 991.98px) {
  .sk-sidebar { transform: translateX(calc(-100% - var(--sk-side-offset))); box-shadow: none; }
  .sk-sidebar.show {
    transform: translateX(0); width: var(--sk-sidebar-width) !important;
    box-shadow: var(--bs-box-shadow-lg);
  }
  /* Overlay mobile : on réaffiche toujours en plein même si icon-mode est actif */
  [data-sk-sidebar-pos="icon"] .sk-sidebar.show .sk-sidebar-heading,
  [data-sk-sidebar-pos="icon"] .sk-sidebar.show .sk-sidebar-link span,
  [data-sk-sidebar-pos="icon"] .sk-sidebar.show .sk-sidebar-badge { display: revert; }
  [data-sk-sidebar-pos="icon"] .sk-sidebar.show .sk-sidebar-link { justify-content: flex-start; padding: 0.5rem 0.75rem; }
  /* En overlay mobile, l'accordéon redevient actif (le tooltip flottant est
     géré côté JS et neutralisé quand la sidebar est ouverte en plein) */
  [data-sk-sidebar-pos="icon"] .sk-sidebar.show .sk-sidebar-children { display: none; }
  [data-sk-sidebar-pos="icon"] .sk-sidebar.show .sk-sidebar-section.open .sk-sidebar-children { display: block; }
  .sk-main {
    margin-left: var(--sk-side-offset) !important;
    margin-right: var(--sk-side-offset) !important;
  }
}


/* =============================================================
   COUCHE 3 : POLISH VISUEL
   ============================================================= */
.form-control, .form-select {
  background-color: var(--sk-input-bg); border-color: var(--sk-input-border);
  color: var(--bs-body-color); transition: border-color 0.15s, box-shadow 0.15s;
  padding: var(--sk-input-py) var(--sk-input-px);
  font-size: var(--sk-font-size);
}
.form-control:focus, .form-select:focus {
  background-color: var(--sk-input-bg); border-color: var(--sk-input-focus-border);
  color: var(--bs-body-color); box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--sk-input-focus-shadow);
}
.form-control::placeholder { color: var(--bs-tertiary-color); }
.input-group-text { background-color: var(--sk-input-bg); border-color: var(--sk-input-border); color: var(--bs-tertiary-color); }
.sk-input-sm { font-size: var(--sk-font-size-sm); padding: 0.3rem 0.5rem; }

.dropdown-menu { padding: 0.375rem; border-radius: var(--bs-border-radius-lg); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
.dropdown-menu .dropdown-item { border-radius: var(--bs-border-radius); padding: 0.5rem 0.75rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.625rem; transition: all 0.1s; }
.dropdown-menu .dropdown-item i { font-size: 1rem; width: 1.25rem; text-align: center; opacity: 0.5; }
.dropdown-menu .dropdown-header { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.5rem 0.75rem 0.25rem; }

.modal-content { border-radius: var(--bs-border-radius-xl); box-shadow: 0 24px 48px rgba(0,0,0,0.3); }
.table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-tertiary-color); font-weight: 600; }

.sk-btn-icon {
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--bs-border-radius); border: none; background: transparent;
  color: var(--bs-secondary-color); transition: all 0.15s; cursor: pointer;
}
.sk-btn-icon:hover { background: var(--sk-sidebar-item-hover); color: var(--bs-emphasis-color); }
.sk-btn-icon.text-primary:hover { color: var(--bs-primary) !important; }

.sk-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--sk-input-bg); border: 2px solid var(--bs-border-color);
  display: flex; align-items: center; justify-content: center;
  color: var(--bs-secondary-color); cursor: pointer; transition: border-color 0.15s;
}
.sk-avatar:hover { border-color: var(--bs-primary); }

.sk-sidebar-badge {
  font-size: 0.625rem; padding: 0.2em 0.55em; border-radius: var(--bs-border-radius-pill);
  font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; margin-left: auto;
}
.sk-sidebar-badge-new { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.sk-sidebar-badge-soon { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }

/* Séparateur d'items (item array('divider' => true) dans menu.inc.php) */
.sk-sidebar-divider {
  height: 0; margin: 0.4rem 0.75rem; border: 0;
  border-top: 1px solid var(--sk-sidebar-border); opacity: 1;
}

.sk-count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 0.375rem; border-radius: var(--bs-border-radius-pill);
  font-size: 0.75rem; font-weight: 700; background: var(--bs-success); color: #fff;
}

.sk-right-panel { width: 180px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1rem; }
.sk-right-panel-title { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-tertiary-color); margin-bottom: 0.5rem; }
.sk-right-panel .btn { width: 100%; font-size: var(--sk-font-size-sm); }
.sk-content-row { display: flex; gap: var(--sk-gap); align-items: flex-start; }
.sk-content-row > .sk-content-main { flex: 1; min-width: 0; }
@media (max-width: 1199.98px) {
  .sk-content-row { flex-direction: column; }
  .sk-right-panel { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .sk-right-panel .btn { width: auto; flex: 1; min-width: 140px; }
}


/* =============================================================
   LOGIN LOGOUT
   ============================================================= */
.bg-auth-circle-shape {
    position: absolute;
    right: -8.75rem;
    top: -5.125rem;
}
.bg-auth-circle-shape-2 {
    position: absolute;
    left: -6.25rem;
    bottom: -2.4375rem;
}
.bg-auth-circle-shape, .bg-auth-circle-shape-2 {
    display: none;
}
@media (min-width: 992px)  {
  .bg-auth-circle-shape, .bg-auth-circle-shape-2 {
      display: block;
  }
}
.bg-auth-card-shape {
  background-position: 0 100%;
}
@media (min-width: 768px) {
  .bg-auth-card-shape {
    background-position: 0 133%;
  }
}
.bg-holder {
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: bottom;
  overflow: hidden;
  will-change: transform, opacity, filter;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-repeat: no-repeat;
  z-index: 0;
}
.bg-card-gradient {
  background-image: var(--sk-card-gradient);
  background-position: center;
}

/* =============================================================
   MICRO-INTERACTIONS
   ============================================================= */

/* Pill compteur : pulse quand actif */
@keyframes sk-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(var(--bs-success-rgb), 0); }
}
.sk-count-pill[data-pulse="true"] {
  animation: sk-pulse 2s ease-in-out infinite;
}

/* Boutons icon : feedback au clic */
.sk-btn-icon {
  transition: all 0.2s ease;
}
.sk-btn-icon:active {
  transform: scale(0.9);
}

/* Sidebar links : indicateur vertical */
.sk-sidebar-link {
  position: relative;
  overflow: hidden;
}
.sk-sidebar-link::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--bs-primary);
  transform: scaleY(0);
  transition: transform 0.2s ease;
}
.sk-sidebar-link.active::before {
  transform: scaleY(1);
}

/* Cards : légère ombre au hover */
.card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
  box-shadow: var(--bs-box-shadow-sm);
}

/* Code d'erreur affiché en gros (pages 404, 500, 503…)
   Taille fluide entre 5rem et 9rem selon la largeur du viewport. */
.sk-error-code {
  font-size: clamp(5rem, 15vw, 9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--bs-secondary-color);
}


/* =============================================================
   SKELETON LOADING (placeholder animé)
   ============================================================= */
@keyframes sk-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.sk-skeleton {
  background: linear-gradient(
    90deg,
    var(--bs-tertiary-bg) 25%,
    rgba(255,255,255,0.06) 50%,
    var(--bs-tertiary-bg) 75%
  );
  background-size: 200% 100%;
  animation: sk-shimmer 1.8s ease-in-out infinite;
  border-radius: var(--bs-border-radius-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.sk-skeleton * { visibility: hidden; }
.sk-skeleton-text {
  height: 0.875em;
  margin-bottom: 0.5em;
  display: block;
}
.sk-skeleton-text:last-child { width: 60%; }
.sk-skeleton-circle {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
}
.sk-skeleton-badge {
  height: 1.4em; width: 5em;
  border-radius: var(--bs-border-radius-pill);
}
[data-bs-theme="light"] .sk-skeleton {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.06) 25%,
    rgba(0,0,0,0.02) 50%,
    rgba(0,0,0,0.06) 75%
  );
  background-size: 200% 100%;
  animation: sk-shimmer 1.8s ease-in-out infinite;
}
[data-bs-theme="high-contrast"] .sk-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.08) 25%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.08) 75%
  );
  background-size: 200% 100%;
  animation: sk-shimmer 1.8s ease-in-out infinite;
}


/* =============================================================
   BREADCRUMB INTERACTIF
   ============================================================= */
.sk-breadcrumb {
  display: flex; align-items: center; gap: 0.25rem;
  margin-top: 0.375rem;
  font-size: var(--sk-font-size-sm);
  color: var(--bs-tertiary-color);
}
.sk-breadcrumb-sep {
  color: var(--bs-tertiary-color);
  margin: 0 0.125rem;
}
.sk-breadcrumb-item {
  position: relative;
}
.sk-breadcrumb-btn {
  background: none; border: 1px solid transparent;
  color: var(--bs-secondary-color);
  padding: 0.15rem 0.5rem;
  border-radius: var(--bs-border-radius);
  font-size: var(--sk-font-size-sm);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 0.375rem;
}
.sk-breadcrumb-btn:hover {
  background: var(--sk-sidebar-item-hover);
  border-color: var(--bs-border-color);
  color: var(--bs-emphasis-color);
}
.sk-breadcrumb-btn i { font-size: 0.625rem; opacity: 0.5; }
.sk-breadcrumb-current {
  color: var(--bs-emphasis-color);
  font-weight: 500;
  padding: 0.15rem 0.25rem;
}
.sk-breadcrumb-label {
  color: var(--bs-tertiary-color);
  font-size: 0.75rem;
}