/*
 * ═══════════════════════════════════════════════════════════════════════════
 * CAPTAINQSE CSS - MODE PRODUCTION
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * Environnement : production (isDev: false)
 * Host          : https://captainqse.fr
 * Build         : 2026-05-23 06:13:53
 * ETag          : "935cdfb589995cb15cd8e05719335d2b"
 * 
 * 📦 Fichiers concaténés pour performances optimales
 * 🚀 Cache navigateur : 1 an (immutable)
 * 🔍 Pour débugger : ajouter ?dev à l'URL
 * 
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 1-settings/_fonts.css (2.80 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ── Stolzl Display — police enseigne Bricorama ─────────────────────────── */
@font-face {
    font-family: 'StolzlDisplay';
    src: url('/CAPTAINQSE/assets/fonts/StolzlDisplay-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'StolzlDisplay';
    src: url('/CAPTAINQSE/assets/fonts/StolzlDisplay-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'StolzlDisplay';
    src: url('/CAPTAINQSE/assets/fonts/StolzlDisplay-Normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'StolzlDisplay';
    src: url('/CAPTAINQSE/assets/fonts/StolzlDisplay-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'StolzlDisplay';
    src: url('/CAPTAINQSE/assets/fonts/StolzlDisplay-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── Catamaran — police enseigne Mousquetaires ──────────────────────────── */
@font-face {
    font-family: 'Catamaran';
    src: url('/CAPTAINQSE/assets/fonts/Catamaran-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Catamaran';
    src: url('/CAPTAINQSE/assets/fonts/Catamaran-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Catamaran';
    src: url('/CAPTAINQSE/assets/fonts/Catamaran-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Catamaran';
    src: url('/CAPTAINQSE/assets/fonts/Catamaran-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Catamaran';
    src: url('/CAPTAINQSE/assets/fonts/Catamaran-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Catamaran';
    src: url('/CAPTAINQSE/assets/fonts/Catamaran-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Catamaran';
    src: url('/CAPTAINQSE/assets/fonts/Catamaran-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Catamaran';
    src: url('/CAPTAINQSE/assets/fonts/Catamaran-Heavy.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 1-settings/_variables.css (11.33 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* =========================
   Design Tokens - CAPTAINQSE
   Dark mode par défaut — [data-theme="light"] pour le mode clair
   ========================= */

/* ─────────────────────────────────────
   Tokens statiques (identiques dans les deux modes)
───────────────────────────────────────*/
:root {
  /* Couleur primaire (header, toujours identique) */
  --color-primary: #000042;
  --color-primary-rgb: 0, 0, 66;

  /* Rouge / danger */
  --color-danger: #e53935;
  --color-danger-rgb: 229, 57, 53;

  /* Statuts */
  --status-success: #22c55e;
  --status-success-rgb: 34, 197, 94;
  --status-success-accent: #63c267;
  --status-error: #e53935;
  --status-error-rgb: 229, 57, 53;

  /* Typographie */
  --font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Ombres */
  --shadow-soft:   0 2px 0 rgba(0,0,0,.03);
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-medium: 0 12px 30px rgba(2, 6, 23, .18);
  --shadow-strong: 0 18px 40px rgba(2,6,23,.12);
  --shadow-panel:  0 4px 20px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.15);

  /* ── Panels de données (blancs par conception) ── */
  --bg-panel:           #ffffff;
  --bg-panel-head:      #f7f8ff;
  --text-panel:         #1a1d4a;
  --text-panel-muted:   #6b75b8;
  --border-panel:       rgba(0, 0, 66, 0.08);
  --border-panel-head:  rgba(0, 0, 66, 0.1);
  --border-table:       rgba(0, 0, 66, 0.07);
  --panel-row-hover:    rgba(0, 0, 66, 0.04);
  --panel-row-selected: rgba(59, 79, 217, 0.08);

  /* ── Inputs dans panels ── */
  --input-panel-bg:     #f7f8ff;
  --input-panel-fg:     #1a1d4a;
  --input-panel-border: rgba(0, 0, 66, 0.18);

  /* ── Icônes dans panels blancs ── */
  --icon-filter-panel:  brightness(0) saturate(100%) invert(13%) sepia(47%) saturate(800%) hue-rotate(210deg);

  /* ── Statuts sémantiques ── */
  --color-ok:           #16a34a;
  --color-ok-bg:        #dcfce7;
  --color-ok-border:    #22c55e;
  --color-ok-rgb:       34, 197, 94;
  --color-warn:         #a16207;
  --color-warn-bg:      #fef9c3;
  --color-warn-border:  #eab308;
  --color-alert:        #dc2626;
  --color-alert-bg:     #fee2e2;
  --color-alert-border: #ef4444;
  --color-alert-rgb:    239, 68, 68;
  --color-info:         #4f46e5;
  --color-info-bg:      #e0e7ff;
  --color-info-rgb:     79, 70, 229;
  --color-amber:        #f59e0b;
  --color-amber-rgb:    245, 158, 11;
  --color-amber-bg:     #fef3c7;

  /* ── Tendances ── */
  --color-trend-new:      #4f46e5;
  --color-trend-improved: #16a34a;
  --color-trend-degraded: #dc2626;
  --color-trend-stable:   #6b75b8;

  /* ── Badges (calibrés pour fond blanc) ── */
  --badge-green-bg:   #dcfce7;  --badge-green-fg:   #16a34a;
  --badge-blue-bg:    #dbeafe;  --badge-blue-fg:    #2563eb;
  --badge-red-bg:     #fee2e2;  --badge-red-fg:     #dc2626;
  --badge-purple-bg:  #f3e8ff;  --badge-purple-fg:  #9333ea;
  --badge-amber-bg:   #fef3c7;  --badge-amber-fg:   #d97706;
  --badge-gray-bg:    #f1f5f9;  --badge-gray-fg:    #64748b;
  --badge-indigo-bg:  #e0e7ff;  --badge-indigo-fg:  #4338ca;
  --badge-teal-bg:    #ccfbf1;  --badge-teal-fg:    #0f766e;

  /* Boutons */
  --btn-font-size: 15px;
  --btn-radius: 8px;
  --btn-pad-y: 6px;
  --btn-pad-x: 12px;
  --btn-disabled-bg: #9ca3af;
  --btn-disabled-fg: #d1d5db;

  /* Layout */
  --header-height: 80px;
  --header-height-compact: 60px;
  --container-max-width: 1280px;
  --container-padding: 20px;
  --container-padding-mobile: 16px;
  --page-section-spacing: 2rem;
  --sidebar-width: 280px;
  --app-sidebar-width: 220px;
  --app-sidebar-collapsed-width: 64px;

  /* Composants - Dashboard */
  --tile-w: 260px;
  --tile-h: 160px;
  --tile-gap: 22px;

  /* Composants - Dock */
  --dock-offset: 5px;
  --dock-reserved-space: 80px;

  /* Composants - Table */
  --table-max-height: calc(100vh - 280px);

  /* Composants - Toast */
  --toast-offset-top: 16px;
  --toast-offset-bottom: 16px;
  --toast-success: #16a34a;
  --toast-error: #dc2626;
  --toast-warning: #f59e0b;
  --toast-info: #2563eb;

  /* Scrollbar */
  --scrollbar-size: 8px;
  --scrollbar-size-thick: 12px;
}

/* ─────────────────────────────────────
   Mode SOMBRE (défaut — pas de flash)
───────────────────────────────────────*/
:root {
  /* Fonds */
  --bg-main:    #0a0c52;
  --bg-sidebar: #07094a;
  --bg-card:    #0d0f30;
  --bg-accent:  #1a1d4a;
  --bg-muted:   #0d0f30;
  --bg-hover:   rgba(255, 255, 255, 0.05);
  --bg-primary: #06071a;
  --bg-surface: #0d0f30;
  --bg-secondary: #1a1d4a;
  --bg-tertiary:  #1a1d4a;

  /* Accent */
  --color-accent: #6366f1;
  --color-accent-rgb: 99, 102, 241;
  --color-secondary: #334155;
  --color-secondary-rgb: 51, 65, 85;

  /* Textes */
  --text-main:       #e8eaf6;
  --text-primary:    #e8eaf6;
  --text-light:      #e8eaf6;
  --text-muted:      #7b83b8;
  --text-secondary:  #7b83b8;
  --text-on-primary: #ffffff;
  --text-on-accent:  #ffffff;

  /* Texte sidebar (fond sombre) */
  --sidebar-text:        #e8eaf6;
  --sidebar-hover-bg:    rgba(255, 255, 255, 0.07);
  --sidebar-active-bg:   rgba(79, 110, 247, 0.2);
  --sidebar-active-text: #a5b4fc;
  --sidebar-subitem-text: rgba(255, 255, 255, 0.7);
  --sidebar-category-color: rgba(255, 255, 255, 0.4);
  --sidebar-tab-bg:      #0a0b2e;
  --sidebar-tab-hover:   #14164a;
  --sidebar-border:      rgba(255, 255, 255, 0.1);

  /* Bordures */
  --border-light:  rgba(255, 255, 255, 0.12);
  --border-muted:  rgba(255, 255, 255, 0.08);
  --border-color:  rgba(255, 255, 255, 0.12);

  /* Panels */
  --panel-bg:     rgba(255, 255, 255, 0.03);
  --panel-border: rgba(255, 255, 255, 0.08);

  /* Inputs */
  --ui-field-bg:     rgba(255, 255, 255, 0.06);
  --ui-field-fg:     #e8eaf6;
  --ui-field-border: rgba(255, 255, 255, 0.18);
  --ui-field-radius: .5rem;
  --ui-field-pad-y:  .625rem;
  --ui-field-pad-x:  .75rem;

  /* Selects */
  --ui-select-bg:     #1a1d4a;
  --ui-select-fg:     #e8eaf6;
  --ui-select-border: rgba(255, 255, 255, 0.18);
  --ui-select-radius: .5rem;
  --ui-select-pad-y:  .5rem;
  --ui-select-pad-x:  .75rem;
  --ui-select-chevron: #7b83b8;

  /* Header */
  --header-bg:             var(--color-primary);
  --header-text:           #ffffff;
  --header-title-color:    #ffffff;
  --header-profile-bg:     rgba(255, 255, 255, 0.10);
  --header-profile-border: rgba(255, 255, 255, 0.12);
  --header-avatar-bg:      rgba(255, 255, 255, 0.10);
  --header-role-color:     #a5b4fc;

  /* Boutons */
  --btn-fg:          #ffffff;
  --btn-bg:          #4f6ef7;
  --btn-hover-bg:    #3b5ae0;
  --btn-hover-fg:    #ffffff;
  --btn-secondary-bg:     rgba(255, 255, 255, 0.10);
  --btn-secondary-hover:  rgba(255, 255, 255, 0.18);
  --btn-secondary-fg:     #ffffff;
  --btn-secondary-border: rgba(255, 255, 255, 0.25);
  --btn-focus-ring:  rgba(79, 110, 247, .35);

  /* Composants - Dock */
  --dock-bg:     #0b1220cc;
  --dock-border: #ffffff1a;
  --dock-shadow: 0 12px 40px rgba(0,0,0,.35);

  /* Composants - Filedrop */
  --fd-bg:         rgba(255,255,255,.06);
  --fd-fg:         #e8eaf6;
  --fd-border:     rgba(255,255,255,.18);
  --fd-radius:     .75rem;
  --fd-accent-rgb: 79, 110, 247;
  --fd-danger:     #ef4444;

  /* Composants - Tile */
  --grad-tile:      linear-gradient(160deg, #1d2055 0%, #0d0f30 100%);
  --tile-glow-color: rgba(79, 110, 247, 0.12);

  /* Footer */
  --footer-bubble-bg:     rgba(255, 255, 255, .08);
  --footer-bubble-border: rgba(255, 255, 255, .12);
  --footer-link-underline: rgba(255, 255, 255, .5);

  /* Scrollbar */
  --scrollbar-track:        rgba(255, 255, 255, .05);
  --scrollbar-thumb:        rgba(255, 255, 255, .2);
  --scrollbar-thumb-hover:  rgba(255, 255, 255, .3);
  --scrollbar-thumb-active: rgba(255, 255, 255, .4);

  /* Rétrocompatibilité */
  --accent:     #4f6ef7;
  --accent-rgb: 79, 110, 247;
  --ui-accent-rgb: 79, 110, 247;
}

/* ─────────────────────────────────────
   Mode CLAIR — surcharges
───────────────────────────────────────*/
[data-theme="light"] {
  /* Fonds */
  --bg-main:    #f7f8ff;
  --bg-sidebar: #e8eaff;
  --bg-card:    #ffffff;
  --bg-accent:  #e0e4ff;
  --bg-muted:   #f0f2ff;
  --bg-hover:   rgba(0, 0, 66, 0.04);
  --bg-primary: #f7f8ff;
  --bg-surface: #ffffff;
  --bg-secondary: #e0e4ff;
  --bg-tertiary:  #e8eaf6;

  /* Accent */
  --color-accent: #6366f1;
  --color-accent-rgb: 99, 102, 241;

  /* Textes */
  --text-main:      #1a1d4a;
  --text-primary:   #1a1d4a;
  --text-light:     #1a1d4a;
  --text-muted:     #6b75b8;
  --text-secondary: #6b75b8;
  /* text-on-primary reste blanc (header toujours sombre) */

  /* Texte sidebar (fond clair) */
  --sidebar-text:         #1a1d4a;
  --sidebar-hover-bg:     rgba(0, 0, 66, 0.06);
  --sidebar-active-bg:    rgba(59, 79, 217, 0.12);
  --sidebar-active-text:  #3b4fd9;
  --sidebar-subitem-text: rgba(0, 0, 66, 0.65);
  --sidebar-category-color: rgba(0, 0, 66, 0.4);
  --sidebar-tab-bg:       #f0f2ff;
  --sidebar-tab-hover:    #e0e4ff;
  --sidebar-border:       rgba(0, 0, 66, 0.1);

  /* Bordures */
  --border-light: rgba(0, 0, 66, 0.12);
  --border-muted: rgba(0, 0, 66, 0.08);
  --border-color: rgba(0, 0, 66, 0.12);

  /* Panels */
  --panel-bg:     rgba(0, 0, 66, 0.02);
  --panel-border: rgba(0, 0, 66, 0.08);

  /* Inputs */
  --ui-field-bg:     rgba(0, 0, 66, 0.05);
  --ui-field-fg:     #1a1d4a;
  --ui-field-border: rgba(0, 0, 66, 0.18);

  /* Selects */
  --ui-select-bg:     #e8eaf6;
  --ui-select-fg:     #1a1d4a;
  --ui-select-border: rgba(0, 0, 66, 0.18);
  --ui-select-chevron: #6b75b8;

  /* Header */
  --header-bg:             var(--color-primary);
  --header-text:           #ffffff;
  --header-title-color:    #ffffff;
  --header-profile-bg:     rgba(255, 255, 255, 0.15);
  --header-profile-border: rgba(255, 255, 255, 0.25);
  --header-avatar-bg:      rgba(255, 255, 255, 0.20);
  --header-role-color:     #c5caff;

  /* Boutons */
  --btn-fg:          #ffffff;
  --btn-bg:          #3b4fd9;
  --btn-hover-bg:    #2a3cbb;
  --btn-hover-fg:    #ffffff;
  --btn-secondary-bg:     rgba(0, 0, 66, 0.08);
  --btn-secondary-hover:  rgba(0, 0, 66, 0.15);
  --btn-secondary-fg:     #1a1d4a;
  --btn-secondary-border: rgba(0, 0, 66, 0.25);
  --btn-focus-ring:  rgba(59, 79, 217, .35);

  /* Composants - Dock */
  --dock-bg:     rgba(240, 242, 255, 0.9);
  --dock-border: rgba(0, 0, 66, 0.1);
  --dock-shadow: 0 12px 40px rgba(0,0,66,.12);

  /* Composants - Filedrop */
  --fd-bg:         rgba(0,0,66,.04);
  --fd-fg:         #1a1d4a;
  --fd-border:     rgba(0,0,66,.18);
  --fd-accent-rgb: 59, 79, 217;

  /* Composants - Tile */
  --grad-tile:      linear-gradient(180deg, #ffffff, #f0f2ff);
  --tile-glow-color: #e0e4ff;

  /* Footer */
  --footer-bubble-bg:      rgba(0, 0, 66, .06);
  --footer-bubble-border:  rgba(0, 0, 66, .1);
  --footer-link-underline: rgba(0, 0, 66, .3);

  /* Scrollbar */
  --scrollbar-track:        rgba(0, 0, 66, .05);
  --scrollbar-thumb:        rgba(0, 0, 66, .2);
  --scrollbar-thumb-hover:  rgba(0, 0, 66, .3);
  --scrollbar-thumb-active: rgba(0, 0, 66, .4);

  /* Rétrocompatibilité */
  --accent:        #3b4fd9;
  --accent-rgb:    59, 79, 217;
  --ui-accent-rgb: 59, 79, 217;
}


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 2-base/_reset.css (0.79 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* =========================
   CSS Reset - Normalisation
   ========================= */

/* Reset universel */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Images responsives */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Reset listes */
ul,
ol {
  list-style: none;
}

/* Reset boutons */
button {
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* Reset champs de formulaire */
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Suppression du outline par défaut (à remplacer par focus-visible) */
:focus {
  outline: none;
}

/* Focus visible pour l'accessibilité */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 2-base/_base.css (1.10 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* =========================
   Styles de base globaux
   ========================= */

/* Reset box-sizing universel */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* HTML & Body */
html,
body {
  height: 100%;
  margin: 0;
  font-family: var(--font-family);
  background: var(--bg-main);
  color: var(--text-primary);
}

/* Sticky footer — nécessaire pour que app-shell { flex: 1 } fonctionne */
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Liens */
a {
  text-decoration: none;
  color: inherit;
  transition: color .2s ease;
}

a:hover {
  color: var(--color-accent);
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  color: var(--text-light);
  line-height: 1.2;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Sous-titre */
.tiles-subtitle {
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.6;
}

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

p {
    color: var(--text-light);
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_alerts.css (4.29 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* Corrélations */
.analysis-correlations {
  margin: 2rem 0;
}

.analysis-correlations h4 {
  margin: 0 0 1rem 0;
  color: #e5e7eb;
  font-size: 1.1rem;
  font-weight: 600;
}

.correlation-item {
  padding: 1rem;
  background: rgba(245, 158, 11, 0.1);
  border-left: 3px solid #f59e0b;
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
}

.correlation-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.correlation-item__type {
  font-weight: 600;
  color: #fcd34d;
}

.correlation-item__time {
  font-size: 0.85rem;
  color: #cbd5e1;
}

.correlation-item__message {
  color: #e5e7eb;
  font-size: 0.9rem;
}

.correlation-item__culprit {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.25rem;
  font-size: 0.85rem;
  color: #cbd5e1;
}

/* Recommandations */
.analysis-recommendations {
  margin: 2rem 0;
}

.analysis-recommendations h4 {
  margin: 0 0 1rem 0;
  color: #e5e7eb;
  font-size: 1.1rem;
  font-weight: 600;
}

.recommendation-item {
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  border-left: 4px solid;
}

.recommendation-item--critical {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

.recommendation-item--high {
  background: rgba(245, 158, 11, 0.1);
  border-color: #f59e0b;
}

.recommendation-item--medium {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
}

.recommendation-item__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.recommendation-item__icon {
  font-size: 1.25rem;
}

.recommendation-item__title {
  font-weight: 600;
  color: #e5e7eb;
  font-size: 1rem;
}

.recommendation-item__message {
  color: #cbd5e1;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.recommendation-item__action {
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  color: #e5e7eb;
  font-weight: 500;
}



/* Alertes */
.analysis-alerts {
  margin: 2rem 0;
}

.analysis-alerts h4 {
  margin: 0 0 1rem 0;
  color: #e5e7eb;
  font-size: 1.1rem;
  font-weight: 600;
}

.alert-item {
  padding: 1rem;
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid #ef4444;
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
}

.alert-item--warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: #f59e0b;
}

.alert-item--info {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
}

.alert-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.alert-item__message {
  font-weight: 600;
  color: #fca5a5;
}

.alert-item--warning .alert-item__message {
  color: #fcd34d;
}

.alert-item--info .alert-item__message {
  color: #93c5fd;
}

.alert-item__time {
  font-size: 0.85rem;
  color: #cbd5e1;
}

.alert-item__recommendation {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.25rem;
  font-size: 0.85rem;
  color: #cbd5e1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RÉSULTATS TEST NOTIFICATION
   ═══════════════════════════════════════════════════════════════════════════ */

.test-results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.test-result {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.test-result i {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.test-result--success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.test-result--error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.test-result strong {
  color: #fff;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_badges.css (8.46 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Badges
   =============================== */

/* =============================================================================
   Badge catégorie — palette positionnelle (index 1-6)
   Usage : <span class="badge-cat badge-cat-N">  N = position dans la liste
   badge-cat-0 = sans catégorie (gris neutre)
   ============================================================================= */
.badge-cat {
    display: inline-flex;
    align-items: center;
    padding: .25rem .65rem;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 600;
    border: 1.5px solid transparent;
    white-space: nowrap;
}

.badge-cat-0 { background: rgba(148,163,184,.1);  color: #64748b; border-color: rgba(148,163,184,.25); }
.badge-cat-1 { background: rgba(59,130,246,.1);   color: #3b82f6; border-color: rgba(59,130,246,.25);  }
.badge-cat-2 { background: rgba(20,184,166,.1);   color: #0d9488; border-color: rgba(20,184,166,.25);  }
.badge-cat-3 { background: rgba(245,158,11,.1);   color: #d97706; border-color: rgba(245,158,11,.25);  }
.badge-cat-4 { background: rgba(139,92,246,.1);   color: #7c3aed; border-color: rgba(139,92,246,.25);  }
.badge-cat-5 { background: rgba(244,63,94,.1);    color: #e11d48; border-color: rgba(244,63,94,.25);   }
.badge-cat-6 { background: rgba(34,197,94,.1);    color: #16a34a; border-color: rgba(34,197,94,.25);   }

/* Badge rôle dynamique — couleurs passées en inline (valeurs issues de la DB) */
.role-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.role-badge-pill i { font-size: .7rem; }
.role-badge-pill + .role-badge-pill { margin-left: .2rem; }

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Catégorie ── */
.badge-category {
    background: var(--badge-blue-bg);
    color: var(--badge-blue-fg);
}

/* ── Rôles ── */
.badge-role-admin {
    background: var(--badge-red-bg);
    color: var(--badge-red-fg);
    margin-right: 0.25rem;
}

.badge-role-manager {
    background: var(--badge-purple-bg);
    color: var(--badge-purple-fg);
    margin-right: 0.25rem;
}

.badge-role-user {
    background: var(--badge-blue-bg);
    color: var(--badge-blue-fg);
    margin-right: 0.25rem;
}

.badge-system {
    background: var(--badge-red-bg);
    color: var(--badge-red-fg);
    margin-left: 0.5rem;
    margin-top: 0.25rem;
}

/* ── Fantôme ── */
.badge-phantom {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--text-on-primary);
}

/* ── Sélecteur de rôle ── */
.role-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.role-radio {
    display: none;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 6px 14px;
    line-height: 1;
    border-radius: 99px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    border: 2.5px solid transparent;
    opacity: .55;
    transition: opacity .15s, border-color .15s, box-shadow .15s, transform .15s;
}

.role-badge span {
    display: inline;
    margin: 0;
    font-size: inherit; font-weight: inherit;
    color: inherit; text-transform: inherit; letter-spacing: inherit;
    line-height: 1;
}

.role-badge:hover {
    opacity: 1;
    transform: scale(1.04);
    box-shadow: 0 0 14px 0 currentColor;
}

.role-radio:checked + .role-badge {
    opacity: 1;
    border-color: transparent;
    box-shadow: inset 0 0 0 2.5px currentColor, 0 0 12px 0 currentColor;
    font-weight: 700;
}


/* ── Sélecteur de catégorie ── */
.category-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.category-radio {
    display: none;
}

.category-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    border-radius: 24px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
}

.category-badge:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155;
}

.category-radio:checked + .category-badge {
    background: #eef2ff;
    color: #6366f1;
    border-color: #c7d2fe;
    box-shadow: 0 1px 4px rgba(99,102,241,.15);
}

/* ── Statut actif / inactif ── */
.badge-success {
    background: var(--badge-green-bg);
    color: var(--badge-green-fg);
}

.badge-error {
    background: var(--badge-red-bg);
    color: var(--badge-red-fg);
}

/* ── Actions de logs ── */
.badge-action-created,
.badge-action-tile_created,
.badge-action-tile_activated,
.badge-action-tile_access_granted {
    background: var(--badge-green-bg);
    color: var(--badge-green-fg);
}

.badge-action-updated,
.badge-action-update,
.badge-action-tile_updated,
.badge-action-tile_reordered,
.badge-action-tile_icon_uploaded,
.badge-action-tile_icon_renamed {
    background: var(--badge-blue-bg);
    color: var(--badge-blue-fg);
}

.badge-action-deleted,
.badge-action-tile_deleted,
.badge-action-tile_deactivated,
.badge-action-tile_icon_deleted,
.badge-action-tile_access_denied {
    background: var(--badge-red-bg);
    color: var(--badge-red-fg);
}

.badge-action-role_changed {
    background: var(--badge-purple-bg);
    color: var(--badge-purple-fg);
}

.badge-action-impersonated,
.badge-action-tile_access_removed {
    background: var(--badge-amber-bg);
    color: var(--badge-amber-fg);
}

.badge-action-impersonation_stopped {
    background: var(--badge-gray-bg);
    color: var(--badge-gray-fg);
}

.badge-action-tile_restored {
    background: var(--badge-teal-bg);
    color: var(--badge-teal-fg);
}

/* ── Entités (user, tile) ── */
.badge-entity-user,
.badge-entity-tile {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    width: fit-content;
    white-space: nowrap;
}

.badge-entity-user {
    background: var(--badge-blue-bg);
    color: var(--badge-blue-fg);
}

.badge-entity-tile {
    background: var(--badge-purple-bg);
    color: var(--badge-purple-fg);
}

/* ── Statuts génériques ── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .625rem;
  border-radius: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
}

.status-badge--success {
  background: rgba(var(--status-success-rgb), .2);
  color: var(--status-success-accent);
  border: 1px solid rgba(var(--status-success-rgb), .4);
}

.status-badge--danger {
  background: rgba(var(--status-error-rgb), .2);
  color: #fca5a5;
  border: 1px solid rgba(var(--status-error-rgb), .4);
}

/* Container vivant mais service interne KO */
.status-badge--unhealthy {
  background: rgba(234,88,12,.2);
  color: #fb923c;
  border: 1px solid rgba(234,88,12,.4);
}

.status-badge--warning {
  background: rgba(var(--color-amber-rgb), .2);
  color: var(--color-amber);
  border: 1px solid rgba(var(--color-amber-rgb), .4);
}

.status-badge--leak {
  background: rgba(var(--status-error-rgb), .2);
  color: #fca5a5;
  border: 1px solid rgba(var(--status-error-rgb), .4);
  margin-left: 0.5rem;
}

/* Container running+healthy mais VPN tunnel mort */
.status-badge--zombie {
  background: rgba(245, 158, 11, .2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, .4);
}

/* ── Pays ── */
.country-badge {
  padding: .2rem .5rem;
  background: rgba(var(--color-accent-rgb), .15);
  border: 1px solid rgba(var(--color-accent-rgb), .3);
  border-radius: .375rem;
  color: var(--color-accent);
  font-size: .8rem;
  font-weight: 500;
}

/* ── Badges docker (supervision) ── */
.docker-card-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.badge--success {
  background-color: rgba(var(--status-success-rgb), 0.15);
  color: var(--color-ok-border);
  border: 1px solid rgba(var(--status-success-rgb), 0.3);
}

.badge--info {
  background-color: rgba(var(--color-accent-rgb), 0.15);
  color: var(--color-accent);
  border: 1px solid rgba(var(--color-accent-rgb), 0.3);
}

.badge--muted {
  background-color: var(--badge-gray-bg);
  color: var(--badge-gray-fg);
  border: 1px solid rgba(var(--badge-gray-fg), 0.3);
}

.badge i {
  font-size: 0.875rem;
}

.alerts-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.alerts-badge .fa-spinner {
  color: var(--badge-gray-fg);
  font-size: 0.875rem;
}


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_buttons.css (23.44 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Composant Boutons
   =============================== */

/* ══════════════════════════════════════════════════════════════════════════
   btn-card — bouton compact pour les cards (équivalent petit des btn globaux)
   Base partagée + modificateurs : --primary  --secondary  --danger
   ══════════════════════════════════════════════════════════════════════════ */
.btn-card {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    border-radius: 7px;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .13s ease;
    /* Défaut = primary (accent rempli) */
    border: 1.5px solid var(--color-accent, #6366f1);
    background: var(--color-accent, #6366f1);
    color: #fff;
}
.btn-card:hover {
    background: #fff;
    color: var(--color-accent, #6366f1);
    border-color: var(--color-accent, #6366f1);
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb, 99,102,241), .25);
    transform: translateY(-1px) scale(1.03);
}
.btn-card:active  { transform: translateY(0) scale(1); box-shadow: none; }
.btn-card:disabled { opacity: .4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ── Modificateur --primary (explicite, identique au défaut) ── */
.btn-card--primary {
    border-color: var(--color-accent, #6366f1);
    background: var(--color-accent, #6366f1);
    color: #fff;
}
.btn-card--primary:hover {
    background: #fff;
    color: var(--color-accent, #6366f1);
    border-color: var(--color-accent, #6366f1);
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb, 99,102,241), .25);
    transform: translateY(-1px) scale(1.03);
}

/* ── Modificateur --secondary (fond blanc, bordure subtile, texte sombre) ── */
.btn-card--secondary {
    border-color: #e2e8f0;
    background: #fff;
    color: #475569;
}
.btn-card--secondary:hover {
    border-color: var(--color-accent, #6366f1);
    color: var(--color-accent, #6366f1);
    background: rgba(var(--color-accent-rgb, 99,102,241), .05);
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb, 99,102,241), .15);
    transform: translateY(-1px) scale(1.03);
}

/* ══════════════════════════════════════════════════════════════════════════
   btn-service — contrôles Start / Stop / Restart pour les cards de services
   Réutilisable partout (Docker, systemd, etc.)
   ══════════════════════════════════════════════════════════════════════════ */
.service-controls {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.btn-service {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .7rem; border-radius: 7px;
    font-size: .75rem; font-weight: 600;
    border: 1.5px solid #e2e8f0;
    background: #fff; color: #475569;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .13s;
}
.btn-service:hover:not(:disabled) {
    border-color: var(--color-accent, #6366f1);
    color: var(--color-accent, #6366f1);
    background: rgba(var(--color-accent-rgb, 99,102,241), .05);
    transform: translateY(-1px);
}
.btn-service:active  { transform: translateY(0); }
.btn-service:disabled { opacity: .4; cursor: not-allowed; }

/* Variante start (vert) */
.btn-service--start {
    background: #f0fdf4; color: #16a34a; border-color: #86efac;
}
.btn-service--start:hover:not(:disabled) {
    background: #16a34a; color: #fff; border-color: #16a34a; transform: translateY(-1px);
}

/* Variante stop (rouge) */
.btn-service--stop {
    background: #fef2f2; color: #dc2626; border-color: #fca5a5;
}
.btn-service--stop:hover:not(:disabled) {
    background: #dc2626; color: #fff; border-color: #dc2626; transform: translateY(-1px);
}

/* Variante restart (orange) */
.btn-service--restart {
    background: #fffbeb; color: #d97706; border-color: #fcd34d;
}
.btn-service--restart:hover:not(:disabled) {
    background: #d97706; color: #fff; border-color: #d97706; transform: translateY(-1px);
}

/* ── Modificateur --danger ── */
.btn-card--danger {
    border-color: #dc2626;
    background: #dc2626;
    color: #fff;
}
.btn-card--danger:hover {
    background: #fff;
    color: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 4px 12px rgba(220,38,38,.25);
    transform: translateY(-1px) scale(1.03);
}

/* Bouton compact sur fond blanc (cartes, panels) */
.task-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .7rem; border-radius: 7px;
    font-size: .75rem; font-weight: 600;
    border: 1.5px solid #e2e8f0;
    background: #fff; color: #475569;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.task-btn:hover { border-color: #6366f1; color: #6366f1; background: #f5f3ff; }
.task-btn--primary { background: #6366f1; color: #fff; border-color: #6366f1; }
.task-btn--primary:hover { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.task-btn--danger { background: #fef2f2; color: #dc2626; border-color: #fca5a5; }
.task-btn--danger:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

/* ===============================
   Base commune — Boutons texte
   =============================== */

.btn,
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--btn-font-size);
  font-weight: 600;
  line-height: 1;
  border: 0;
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--btn-fg);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease;
}

/* Focus visible (accessibilité) */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem var(--btn-focus-ring);
}

/* État désactivé */
.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled,
.btn-primary:disabled,
.btn-primary[aria-disabled="true"],
.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"] {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-fg);
  opacity: .7;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* ===============================
   Variante principale (primaire)
   =============================== */

.btn-primary {
  height: 38px; padding: 0 18px; border-radius: 12px;
  border: 1.5px solid transparent;
  background: var(--color-accent); color: #fff;
  font-size: .875rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .13s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-primary:hover {
  background: #fff;
  color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(var(--color-accent-rgb), .25);
  transform: translateY(-1px) scale(1.03);
}
.btn-primary:active { transform: translateY(0) scale(1); box-shadow: none; }

/* Bouton carré (icône seule) */
.btn-primary--sq {
  padding: 0;
  width: 38px; height: 38px;
  justify-content: center;
  flex-shrink: 0;
}

/* Variante danger (rouge) */
.btn-primary--danger {
  background: #dc2626;
  border-color: transparent;
}
.btn-primary--danger:disabled,
.btn-primary--danger[aria-disabled="true"] {
  border-color: transparent;
}
.btn-primary--danger:not(:disabled):not([aria-disabled="true"]):hover {
  background: #fff;
  color: #dc2626;
  border-color: var(--color-alert-border);
  box-shadow: 0 4px 16px rgba(220, 38, 38, .25);
  transform: translateY(-1px) scale(1.03);
}

/* ===============================
   Variante secondaire (gris)
   =============================== */

.btn-secondary {
  height: 38px; padding: 0 18px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.8); font-size: .875rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .13s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-secondary:hover {
  background: rgba(255,255,255,.88);
  color: #475569;
  border-color: rgba(255,255,255,.6);
  transform: translateY(-1px) scale(1.03);
}
.btn-secondary:active { transform: translateY(0) scale(1); }

/* ===============================
   États spéciaux
   =============================== */

/* Bouton actif (onglet sélectionné, etc.) */
.btn-active {
  background: #1e40af;
  box-shadow: inset 0 0 0 2px #93c5fd;
  cursor: default;
  pointer-events: none;
}

/* Classe legacy désactivée (rétrocompatibilité) */
.btn-disabled {
  background: var(--btn-disabled-bg) !important;
  color: var(--btn-disabled-fg) !important;
  opacity: .7;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===============================
   Modificateurs utilitaires
   =============================== */

.btn--block {
  width: 100%;
}

/* ===============================
   Bouton icône (FontAwesome/SVG)
   =============================== */

.btn-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease;
  will-change: transform;
}

/* Icône FontAwesome */
.btn-icon i {
  font-size: 22px;
  line-height: 1;
  transition: transform .12s ease;
  transform-origin: center;
}

/* Fallback image */
.btn-icon img {
  width: 26px;
  height: 26px;
  display: block;
}

/* États hover/focus */
.btn-icon:hover,
.btn-icon:focus-visible {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  transform: translateY(-1px) scale(1.05);
}

.btn-icon:hover i,
.btn-icon:focus-visible i {
  transform: scale(1.08);
}

.btn-icon:active {
  transform: translateY(0) scale(.98);
}

.btn-icon:focus-visible {
  box-shadow: 0 0 0 .2rem var(--btn-focus-ring);
}

/* État désactivé */
.btn-icon:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: saturate(.2);
}

/* En mode clair : btn-icon avec icône sombre et fond subtil */
[data-theme="light"] .btn-icon {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border: 1px solid var(--btn-secondary-border);
}

[data-theme="light"] .btn-icon:hover:not(:disabled) {
  background: var(--btn-secondary-hover);
  color: var(--color-primary);
}

[data-theme="light"] .btn-icon:disabled {
  background: rgba(0, 0, 66, 0.04);
  color: rgba(0, 0, 66, 0.25);
  opacity: 1;
  filter: none;
}

/* Infobulle au survol (data-tip) */
.btn-icon[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: #111827;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.btn-icon:hover::after,
.btn-icon:focus-visible::after {
  opacity: 1;
}

/* ===============================
   Bouton icône header/topbar
   =============================== */

.iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}

.iconbtn:hover {
  background: rgba(255, 255, 255, .16);
}

.iconbtn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.iconbtn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Badge de notification sur les boutons */
.btn .badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--status-error);
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

/* ===============================
   Accessibilité
   =============================== */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-icon,
  .btn-icon i,
  .iconbtn {
    transition: none !important;
    transform: none !important;
  }
}

/* Boutons icône */
.btn-icon {
    padding: 0.5rem;
    background: var(--bg-accent);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: var(--bg-hover);
    border-color: #3b82f6;
    color: #3b82f6;
}

/* Bouton danger */
.btn-danger {
    padding: 0.625rem 1.25rem;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-danger:hover {
    background: #dc2626;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Bouton retour */
.btn-back {
    margin-top: 2rem;
}

/* Bouton ajouter icône */
.btn-add-icon {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===============================
   Bouton Impersonation
   =============================== */

.btn-impersonate {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border: none;
    transition: all 0.2s ease;
}

.btn-impersonate:hover {
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.3);
}

.btn-impersonate:active {
    transform: translateY(0);
}

/* Bouton danger (suppression) */
.btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-danger:active {
    transform: translateY(0);
}

/* Boutons d'action dans header (état désactivé visible) */
.btn-icon--action:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-secondary--compact {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}
.btn-secondary--sq {
    padding: 0;
    width: 38px;
    justify-content: center;
    flex-shrink: 0;
}

/* Bouton test de notification — orange, utilisé partout où on teste email/Telegram */
.btn-notify {
    height: 38px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1.5px solid #f59e0b;
    background: #f59e0b;
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .13s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-notify:hover {
    background: #d97706;
    border-color: #d97706;
    transform: translateY(-1px);
}
.btn-notify:active { transform: translateY(0); }

/* Badges d'actions de tuiles */
.badge-action-tile_updated {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.badge-action-tile_activated {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.badge-action-tile_deactivated {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.badge-action-tile_reordered {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.badge-action-tile_icon_uploaded {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.badge-action-tile_icon_deleted {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.badge-action-tile_icon_renamed {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

/* Header actions pour aligner bouton config + period selector */
.panel__header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(143, 113, 113, 0.2);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.375rem;
  color: #e5e7eb;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

/* Bouton Config dans les contrôles */
.ctrl-btn.ctrl-config {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
}

.ctrl-btn.ctrl-config:hover:not(:disabled) {
  background: linear-gradient(135deg, #5568d3 0%, #63408b 100%);
  transform: translateY(-1px);
}

.btn-copy {
  flex-shrink: 0;
  background: rgba(96, 165, 250, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: #60a5fa;
  padding: 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-copy:hover {
  background: rgba(96, 165, 250, 0.3);
  transform: scale(1.05);
}

.btn-copy i {
  font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTON TEST NOTIFICATION
   ═══════════════════════════════════════════════════════════════════════════ */

#testNotificationBtn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-color: #f59e0b;
}

#testNotificationBtn:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-1px);
}

#testNotificationBtn i {
  margin-right: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXTENSIONS — Variantes et composants boutons ajoutés
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tailles ──────────────────────────────────────────────────────────────── */
.btn-sm {
  font-size: .78rem;
  padding: 0 .7rem;
  min-height: 24px;
  gap: .3rem;
}

.btn-lg {
  font-size: 1rem;
  padding: 0 1.25rem;
  min-height: 40px;
}

/* ── Ghost (contour transparent) ─────────────────────────────────────────── */
.btn-ghost {
  background: transparent;
  border: 1.5px solid currentColor;
  color: var(--accent, #3b82f6);
  min-height: 30px;
  padding: 0 14px;
}
.btn-ghost:hover { background: color-mix(in srgb, var(--accent, #3b82f6) 10%, transparent); }

/* ── Danger ───────────────────────────────────────────────────────────────── */
.btn-danger {
  background: #dc2626;
  color: #fff;
  border: 1.5px solid transparent;
  min-height: 30px;
  padding: 0 14px;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .13s ease;
}
.btn-danger:disabled,
.btn-danger[aria-disabled="true"] {
  border-color: transparent;
}
.btn-danger:not(:disabled):not([aria-disabled="true"]):hover {
  background: #fff;
  color: #dc2626;
  border-color: var(--color-alert-border);
  box-shadow: 0 4px 16px rgba(220, 38, 38, .25);
  transform: translateY(-1px) scale(1.03);
}
.btn-danger:active { transform: translateY(0) scale(1); box-shadow: none; }

/* ── Split button (action + flèche dropdown) ──────────────────────────────── */
.btn-split {
  position: relative;
  display: inline-flex;
}

.btn-split__main {
  border-radius: var(--btn-radius, 6px) 0 0 var(--btn-radius, 6px) !important;
  border-right: 1px solid rgba(255, 255, 255, .25) !important;
}

.btn-split__arrow {
  border-radius: 0 var(--btn-radius, 6px) var(--btn-radius, 6px) 0 !important;
  padding-left: .5rem !important;
  padding-right: .5rem !important;
  min-width: 28px;
}

/* .btn-split__menu reçoit aussi .dropdown__menu dans le HTML pour le visuel.
   Ce bloc ne surcharge que position et largeur. */
.btn-split__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  z-index: 500;
  animation: dropdown-in .12s ease-out;
}

.btn-split__menu[hidden] { display: none; }

.btn-split__item {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 .5rem;
  width: 100%;
  padding: .6rem .9rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-panel, #e2e8f0);
  cursor: pointer;
  text-align: left;
  color: var(--text-panel, #374151);
  font-size: .875rem;
  transition: background .12s;
}
.btn-split__item:last-child { border-bottom: none; }
.btn-split__item:hover { background: var(--bg-hover, #f8fafc); }
.btn-split__item i    { grid-row: 1 / 3; color: var(--accent, #3b82f6); font-size: .9rem; align-self: center; }
.btn-split__item span { font-weight: 600; line-height: 1.3; }
.btn-split__item small { color: var(--text-panel-muted, #94a3b8); font-size: .75rem; }

/* ── Séparateur de toolbar ────────────────────────────────────────────────── */
.toolbar-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--border-subtle, rgba(255, 255, 255, .2));
  margin: 0 .25rem;
  vertical-align: middle;
  flex-shrink: 0;
  opacity: .6;
}


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_code.css (1.21 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* =============================================================================
   Code block — terminal inline réutilisable
   Fond indigo forcé, lisible sur fond blanc ou sombre
   ============================================================================= */

.code-block {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    background: #1e2060;
    border: 1px solid rgba(99,102,241,.25);
    border-radius: 8px;
    overflow-x: auto;
}

.code-block code {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: .8rem;
    color: #a5b4fc;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.5;
}

.code-block .btn-copy {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 5px;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    font-size: .72rem;
    transition: background .12s, border-color .12s, color .12s;
}

.code-block .btn-copy:hover {
    background: rgba(99,102,241,.35);
    border-color: rgba(99,102,241,.6);
    color: #a5b4fc;
}


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_cards.css (2.20 KB) */
/* ───────────────────────────────────────────────────────────────────────── */


/* Grille de cartes Docker */
.docker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 0;
}

/* Carte Docker */
.docker-card {
  padding: 1rem;
  border-radius: .5rem;
  border: 2px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  transition: all .2s ease;
}

.docker-card:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .15);
}

.docker-card.running {
  border-color: var(--status-success);
  background: rgba(var(--status-success-rgb), .08);
}

.docker-card.stopped {
  border-color: var(--status-error);
  background: rgba(var(--status-error-rgb), .08);
}

.docker-card.starting {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, .08);
}

/* Header de la carte */
.docker-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.docker-card-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light);
}

.docker-card-body {
  margin-top: 0.75rem;
  font-size: .875rem;
  color: #cbd5e1;
}

/* ── Contexte fond blanc (modal__body) ──────────────────────────────────────
   Les docker-cards utilisent rgba(white) pour fond sombre.
   Dans une modale (fond blanc), on adapte les couleurs. */
.modal__body .docker-card {
  border-color: rgba(0, 0, 66, .1);
  background: rgba(0, 0, 66, .02);
}
.modal__body .docker-card:hover {
  background: rgba(0, 0, 66, .04);
  border-color: rgba(0, 0, 66, .15);
}
.modal__body .docker-card.running {
  border-color: var(--status-success, #22c55e);
  background: rgba(var(--status-success-rgb, 34,197,94), .07);
}
.modal__body .docker-card.stopped {
  border-color: var(--status-error, #ef4444);
  background: rgba(var(--status-error-rgb, 239,68,68), .06);
}
.modal__body .docker-card.starting {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, .06);
}
.modal__body .docker-card-header h3 {
  color: var(--text-panel, #1a1d4a);
}
.modal__body .docker-card-body {
  color: var(--text-panel-muted, #6b75b8);
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_dropdown.css (4.15 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   DROPDOWN — Menu déroulant générique
   Usage : wrapper relatif + .dropdown__menu hidden/visible via JS.
   ═══════════════════════════════════════════════════════════════════════════ */

.dropdown {
  position: relative;
  display: inline-flex;
}

/* ── Menu ─────────────────────────────────────────────────────────────────── */
.dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-panel, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .15);
  z-index: 500;
  overflow: hidden;
  animation: dropdown-in .12s ease-out;
}

.dropdown__menu--right {
  left: auto;
  right: 0;
}

.dropdown__menu--up {
  top: auto;
  bottom: calc(100% + 6px);
}

.dropdown__menu[hidden] { display: none; }

@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Section (titre de groupe) ────────────────────────────────────────────── */
.dropdown__section {
  padding: .45rem .9rem .2rem;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-panel-muted, #94a3b8);
}

/* ── Séparateur ───────────────────────────────────────────────────────────── */
.dropdown__divider {
  height: 1px;
  background: var(--border-panel, #e2e8f0);
  margin: .3rem 0;
}

/* ── Item ─────────────────────────────────────────────────────────────────── */
.dropdown__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .9rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-panel, #374151);
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: background .1s;
  line-height: 1.3;
  text-align: left; /* nécessaire pour les <button> */
  font-family: inherit; /* les <button> n'héritent pas par défaut */
}

.dropdown__item:hover,
.dropdown__item:focus-visible { background: var(--bg-hover, #f8fafc); outline: none; }
.dropdown__item:active { background: var(--border-panel, #e2e8f0); }

.dropdown__item i {
  width: 1rem;
  text-align: center;
  font-size: .85rem;
  color: var(--accent, #3b82f6);
  flex-shrink: 0;
}

/* Item désactivé */
.dropdown__item:disabled,
.dropdown__item.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Item danger */
.dropdown__item--danger { color: #dc2626; }
.dropdown__item--danger i { color: #dc2626; }
.dropdown__item--danger:hover { background: #fee2e2; }

/* Item avec description */
.dropdown__item-label { font-weight: 600; font-size: .85rem; }
.dropdown__item-desc  { font-size: .75rem; color: var(--text-panel-muted, #94a3b8); margin-top: .05rem; }

/* ── Variante : dropdown sombre (sur fond sombre) ────────────────────────── */
.dropdown__menu--dark {
  background: #1e2d5a;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}

.dropdown__menu--dark .dropdown__section { color: rgba(255, 255, 255, .4); }
.dropdown__menu--dark .dropdown__divider { background: rgba(255, 255, 255, .1); }
.dropdown__menu--dark .dropdown__item    { color: rgba(255, 255, 255, .85); }
.dropdown__menu--dark .dropdown__item:hover { background: rgba(255, 255, 255, .08); }


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_charts.css (0.54 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* Graphiques - AMÉLIORATION RESPONSIVE */
.analysis-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.analysis-chart-container {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
}

.analysis-chart-container h4 {
  margin: 0 0 1.5rem 0;
  color: #e5e7eb;
  font-size: 1.1rem;
  font-weight: 600;
}

.analysis-chart-container canvas {
  max-height: 300px;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_custom-select.css (3.63 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Custom Select avec badges
   =============================== */

.custom-select {
    position: relative;
    width: fit-content;
}

.custom-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: auto;
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-light);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.custom-select__trigger:hover {
    border-color: rgba(102, 126, 234, 0.45);
}

.custom-select.is-open .custom-select__trigger {
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25);
}

.custom-select__value {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select__trigger:not(.has-value) .custom-select__value {
    opacity: 0.6;
}

.custom-select__arrow {
    flex-shrink: 0;
    font-size: 0.75rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.custom-select.is-open .custom-select__arrow {
    transform: rotate(180deg);
}

/* Dropdown */
.custom-select__dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 100%;
    width: max-content;
    z-index: 1000;
    background: var(--bg-accent);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.custom-select.is-open .custom-select__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-select__options {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(102,126,234,.35) transparent;
}

.custom-select__options::-webkit-scrollbar       { width: 5px; }
.custom-select__options::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 99px; }
.custom-select__options::-webkit-scrollbar-thumb { background: rgba(102,126,234,.55); border-radius: 99px; }
.custom-select__options::-webkit-scrollbar-thumb:hover { background: rgba(102,126,234,.8); }

.custom-select__option {
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    color: var(--text-muted);
    white-space: nowrap;
}

.custom-select__option:hover {
    background: rgba(102, 126, 234, 0.1);
    color: var(--text-light);
}

.custom-select__option.is-selected {
    padding: 0.25rem;
    background: rgba(102, 126, 234, 0.15);
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .custom-select {
        width: fit-content;
        max-width: 100%;
    }
}

/* Badge dans les options */
.custom-select__option .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
}

.custom-select__option .badge i { font-size: 0.85rem; }

.custom-select__option .badge-success { background: rgba(34,197,94,.15); color: #22c55e; }
.custom-select__option .badge-error   { background: rgba(239,68,68,.15);  color: #ef4444; }

/* Badge dans le trigger */
.custom-select__trigger .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
}

.custom-select__trigger .badge i { font-size: 0.75rem; }


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_dock.css (3.56 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Composant Dock flottant (mobile)
   Navigation type macOS/iOS
   =============================== */

/* ===============================
   Container principal (fixed)
   =============================== */

.ft-dock {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-offset) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 9500;
  width: auto;
  pointer-events: none;
}

/* ===============================
   Conteneur interne (glassmorphism)
   =============================== */

.ft-dock__inner {
  display: inline-flex;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--dock-bg);
  border: 1px solid var(--dock-border);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  box-shadow: var(--dock-shadow);
  white-space: nowrap;
  pointer-events: auto;
  /* Animation d'entrée */
  animation: dock-slide-up .3s ease;
}

/* ===============================
   Items du dock (boutons/liens)
   =============================== */

.ft-dock__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 80px;
  padding: 6px 8px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 11.5px;
  color: #e6e6e6;
  text-align: center;
  text-decoration: none;
  transition: transform .12s ease, background .2s ease, color .2s ease;
}

/* Icône */
.ft-dock__item i {
  font-size: 16px;
  line-height: 1;
}

/* États hover/focus */
.ft-dock__item:hover,
.ft-dock__item:focus-visible {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .08);
  outline: none;
}

/* ===============================
   État actif (page courante)
   =============================== */

.ft-dock__item.is-active {
  background: var(--color-accent);
  color: var(--text-on-primary);
  cursor: default;
  pointer-events: none;
  transform: none;
}

.ft-dock__item.is-active i {
  color: inherit;
}

.ft-dock__item.is-active:hover {
  background: var(--color-accent);
}

/* ===============================
   Réservation d'espace (body)
   =============================== */

/* Supprime le padding-bottom global */
body.has-dock {
  padding-bottom: 0;
}

/* Ajoute l'espace sur les conteneurs de contenu */
body.has-dock .container,
body.has-dock .ft-shell,
body.has-dock main {
  padding-bottom: calc(var(--dock-reserved-space) + env(safe-area-inset-bottom));
}

/* ===============================
   Responsive
   =============================== */

@media (max-width: 560px) {
  .ft-dock__inner {
    gap: 3px;
    padding: 6px;
  }

  .ft-dock__item {
    min-width: 65px;
    padding: 6px 7px;
    font-size: 11px;
  }

  .ft-dock__item i {
    font-size: 15px;
  }
}

/* Desktop : masquer le dock */
@media (min-width: 1024px) {
  .ft-dock {
    display: none;
  }

  /* Supprime la réservation d'espace */
  body.has-dock .container,
  body.has-dock .ft-shell,
  body.has-dock main {
    padding-bottom: 0;
  }
}

/* ===============================
   Animations
   =============================== */

@keyframes dock-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===============================
   Accessibilité
   =============================== */

@media (prefers-reduced-motion: reduce) {
  .ft-dock__item {
    transition: none;
    transform: none !important;
  }

  .ft-dock__inner {
    animation: none;
  }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_edit-modal.css (0.42 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* Éditeur de tuile avec preview */
.tile-editor {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    border-bottom: 1px solid var(--border-color);
}

/* Preview de la tuile */
.tile-editor__preview {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Champs à droite */
.tile-editor__fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_filedrop.css (6.39 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Composant Filedrop
   Zone de dépôt de fichiers (drag & drop)
   =============================== */

/* ===============================
   Container principal
   =============================== */

.filedrop {
  position: relative;
  display: grid;
  gap: .5rem;
  padding: 16px;
  color: var(--fd-fg);
  background: var(--fd-bg);
  border: 1px dashed var(--fd-border);
  border-radius: var(--fd-radius);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

/* Input masqué (accessible pour submit) */
.filedrop__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===============================
   État vide - Placeholder
   =============================== */

.filedrop__placeholder {
  min-height: 120px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .5rem;
}

.filedrop__center {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.filedrop__icon {
  width: 24px;
  height: 24px;
  opacity: .9;
}

.filedrop__text {
  display: flex;
  align-items: center;
  gap: .5rem;
  line-height: 1.25;
}

.filedrop__text strong {
  font-weight: 700;
}

.filedrop__hint {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .9rem;
  opacity: .75;
}

/* ===============================
   État rempli - Liste de fichiers
   =============================== */

.filedrop__files {
  display: block;
}

.filedrop__list {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filedrop__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--fd-border);
  border-radius: calc(var(--fd-radius) - .25rem);
  transition: background .2s ease;
  /* Animation d'entrée */
  animation: file-slide-in .3s ease;
  min-width: 0;
}

.filedrop__item:hover {
  background: rgba(255, 255, 255, .06);
}

.filedrop__item .ico {
  flex: 0 0 auto;
  width: 45px;
  height: 45px;
}

.filedrop__name {
  flex: 1;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.filedrop__size {
  margin-left: .25rem;
  font-size: .9rem;
  opacity: .85;
}

.filedrop__remove {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}

.filedrop__remove:hover {
  background: rgba(255, 255, 255, .1);
}

.filedrop__remove:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ===============================
   Preview image (fichier image sélectionné)
   =============================== */

.filedrop__item--preview {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  justify-content: center;
}

.filedrop__img-wrap {
  position: relative;
  display: inline-flex;
  border-radius: 10px;
  overflow: visible;
}

.filedrop__img-wrap img {
  max-width: 100%;
  max-height: 130px;
  border-radius: 10px;
  object-fit: contain;
  display: block;
}

.filedrop__remove--overlay {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  padding: 0;
  background: #ef4444;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s, transform .12s;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.filedrop__remove--overlay:hover {
  background: #dc2626;
  transform: scale(1.1);
}

/* ===============================
   États interactifs
   =============================== */

/* Drag over (fichier en cours de déplacement) */
.filedrop.is-dragover {
  border-color: rgba(var(--fd-accent-rgb), .9);
  background: rgba(var(--fd-accent-rgb), .10);
  box-shadow: 0 0 0 .1875rem rgba(var(--fd-accent-rgb), .25);
}

/* Indicateur de nombre de fichiers lors du drag */
.filedrop.is-dragover::after {
  content: attr(data-drop-count);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 20px;
  background: rgba(var(--fd-accent-rgb), .9);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 12px;
  pointer-events: none;
  z-index: 10;
}

/* Fichier dépassant la limite de taille */
.filedrop__item.is-oversized {
  border-color: var(--fd-danger);
  background: rgba(239, 68, 68, .05);
}

.filedrop__item.is-oversized .filedrop__name {
  color: var(--fd-danger);
}

.filedrop__item.is-oversized .filedrop__size {
  color: var(--fd-danger);
  font-weight: 700;
}

/* Messages d'erreur */
.filedrop__error {
  margin: 0;
  color: var(--fd-danger);
  font-size: .95rem;
  font-weight: 600;
}

/* ===============================
   Gestion des états vide/rempli
   =============================== */

/* État vide */
.filedrop.is-empty .filedrop__files {
  display: none;
}

.filedrop.is-empty .filedrop__placeholder {
  display: grid;
}

/* État avec fichier(s) */
.filedrop.has-file .filedrop__placeholder {
  display: none;
}

.filedrop.has-file .filedrop__files {
  display: block;
}

/* ===============================
   Animations
   =============================== */

@keyframes file-slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===============================
   Responsive
   =============================== */

@media (max-width: 560px) {
  .filedrop__placeholder {
    min-height: 100px;
  }

  .filedrop__icon {
    width: 20px;
    height: 20px;
  }

  .filedrop.is-dragover::after {
    font-size: 1.2rem;
    padding: 10px 16px;
  }
}

/* ===============================
   Accessibilité
   =============================== */

@media (prefers-reduced-motion: reduce) {
  .filedrop,
  .filedrop__item,
  .filedrop__remove {
    transition: none;
  }

  .filedrop__item {
    animation: none;
  }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_forms.css (11.90 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Composants de formulaire
   Inputs, Textarea, Select, Searchbar
   =============================== */

/* ===============================
   Variables et reset
   =============================== */

/* Ces variables sont définies dans _variables.css mais peuvent être surchargées ici si besoin */

/* ===============================
   Labels
   =============================== */

.form-label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    color: var(--text-light);
}

.form-label--icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-label--icon i {
    color: var(--color-accent);
}

/* ===============================
   Inputs - Base (UI et modales)
   =============================== */

.ui-input,
.ui-textarea,
.ui-file,
.form-input,
.modal input[type="email"],
.modal input[type="text"],
.modal input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font: inherit;
    line-height: 1.25;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

/* Variables spécifiques pour UI (compatibilité) */
.ui-input,
.ui-textarea,
.ui-file {
    color: var(--ui-field-fg, #fff);
    background: var(--ui-field-bg, rgba(255, 255, 255, 0.06));
    border-color: var(--ui-field-border, rgba(255, 255, 255, 0.18));
    border-radius: var(--ui-field-radius, 10px);
    padding: var(--ui-field-pad-y, 10px) var(--ui-field-pad-x, 12px);
}

/* État focus */
.ui-input:focus,
.ui-textarea:focus,
.ui-file:focus,
.form-input:focus,
.modal input[type="email"]:focus,
.modal input[type="text"]:focus,
.modal input[type="password"]:focus {
    border-color: rgba(255,255,255,.4);
    box-shadow: 0 0 0 2px rgba(255,255,255,.08);
    background: rgba(255,255,255,.09);
}

/* Espacement sous les inputs */
.form-input {
    margin-bottom: 1rem;
}

/* ===============================
   Textarea
   =============================== */

.ui-textarea {
    resize: vertical;
    min-height: 120px;
    margin-bottom: 1rem;
}

/* ===============================
   Input File
   =============================== */

.ui-file::file-selector-button {
    margin-right: 0.6rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ui-field-border, rgba(255, 255, 255, 0.18));
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ui-field-fg, #fff);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.ui-file::file-selector-button:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(102, 126, 234, 0.45);
}

/* ===============================
   Select - Dropdown
   =============================== */

.ui-select {
    width: auto;
    max-width: 100%;
    padding: var(--ui-select-pad-y, 0.5rem) var(--ui-select-pad-x, 0.75rem);
    padding-right: 2rem;
    border: 1px solid var(--ui-select-border, rgba(255, 255, 255, 0.18));
    border-radius: var(--ui-select-radius, 10px);
    background-color: var(--ui-field-bg, rgba(255, 255, 255, 0.06));
    color: var(--ui-select-fg, #fff);
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    
    /* Reset appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Chevron intégré */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23cbd5e1'><path d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 14px 14px;
}

.ui-select:hover {
    border-color: rgba(102, 126, 234, 0.45);
}

.ui-select:focus {
    outline: none;
    border-color: rgba(102, 126, 234, 0.85);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.ui-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ui-select option {
    background: var(--ui-select-bg, rgba(255, 255, 255, 0.06));
    color: var(--ui-select-fg, #fff);
}

/* Select multiple : retire le chevron */
.ui-select[multiple],
.ui-select[size] {
    background-image: none;
    padding-right: var(--ui-select-pad-x, 0.75rem);
    cursor: default;
}

/* ===============================
   Variantes de taille - Inputs
   =============================== */

.ui-input--sm {
    padding: 0.5rem 0.625rem;
    font-size: 0.95rem;
}

.ui-input--lg {
    padding: 0.75rem 1rem;
    font-size: 1.05rem;
}

/* ===============================
   Variantes de taille - Select
   =============================== */

.ui-select--full {
    width: 100%;
    max-width: none;
}

.ui-select--chip {
    max-width: 220px;
}

.ui-select--sm {
    --ui-select-pad-y: 0.4rem;
    font-size: 0.95rem;
}

.ui-select--lg {
    --ui-select-pad-y: 0.6rem;
    font-size: 1.05rem;
}

/* ===============================
   Variante thème clair
   =============================== */

.ui-field--light {
    --ui-field-bg: #fff;
    --ui-field-fg: #111827;
    --ui-field-border: #d7d7d7;
}

/* ===============================
   États de validation
   =============================== */

/* Succès */
.ui-input.is-valid,
.ui-textarea.is-valid,
.ui-select.is-valid {
    border-color: var(--status-success);
}

.ui-input.is-valid:focus,
.ui-textarea.is-valid:focus,
.ui-select.is-valid:focus {
    border-color: var(--status-success);
    box-shadow: 0 0 0 0.1875rem rgba(var(--status-success-rgb), 0.25);
}

/* Erreur */
.ui-input.is-invalid,
.ui-textarea.is-invalid,
.ui-select.is-invalid {
    border-color: var(--status-error);
}

.ui-input.is-invalid:focus,
.ui-textarea.is-invalid:focus,
.ui-select.is-invalid:focus {
    border-color: var(--status-error);
    box-shadow: 0 0 0 0.1875rem rgba(var(--status-error-rgb), 0.25);
}

/* ===============================
   Groupes et structure de formulaire
   =============================== */

.form-group {
    display: grid;
    gap: 0.375rem;
    margin-top: 1.5rem;
}

.form-group:first-child {
    margin-top: 0;
}

/* ===============================
   Aide / texte explicatif
   =============================== */

.form-help,
.form-helper {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: -0.75rem;
    margin-bottom: 1rem;
}

.form-group .form-help {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* États de validation pour helper text */
.form-helper.is-valid,
.form-help.is-valid {
    color: var(--status-success);
}

.form-helper.is-invalid,
.form-help.is-invalid {
    color: var(--status-error);
}

/* ===============================
   Layouts de formulaire
   =============================== */

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-bottom: 12px;
}

@media (max-width: 720px) {
    .form-row-2 {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   Searchbar
   =============================== */

.searchbar {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0.2rem;
    background: var(--bg-accent);
    border: 1px solid rgba(227, 230, 238, 0.13);
    border-radius: 0.5rem;
    backdrop-filter: blur(4px);
}

.searchbar input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 0.25rem 2rem;
    border: 0;
    background: transparent;
    color: var(--text-on-primary);
    font-size: 0.95rem;
    outline: 0;
}

.searchbar input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* Icône loupe */
.search-icon {
    position: absolute;
    left: 0.55rem;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 10-.71.71l.27.28v.79l4.25 4.25a1 1 0 001.41-1.41L15.5 14zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z'/></svg>");
    background-repeat: no-repeat;
    background-size: 18px 18px;
    opacity: 0.75;
    pointer-events: none;
}

/* Bouton clear */
.search-clear {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-on-primary);
    font-size: 18px;
    line-height: 1;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease, transform 0.05s ease, color 0.15s ease;
}

.searchbar.has-value .search-clear {
    opacity: 0.9;
    pointer-events: auto;
}

.search-clear:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-accent);
    transform: translateY(-50%) scale(1.05);
}

.search-clear:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ===============================
   Accessibilité
   =============================== */

@media (prefers-reduced-motion: reduce) {
    .ui-input,
    .ui-textarea,
    .ui-file,
    .ui-select,
    .form-input,
    .modal input,
    .ui-file::file-selector-button,
    .search-clear,
    .role-badge {
        transition: none;
    }
}

/* Sections du formulaire */
.form-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-section h4 {
  color: #60a5fa;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-section h4 i {
  font-size: 1.1rem;
}

/* Form groups */
.form-group {
  margin-bottom: 1rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group select {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 0.625rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.form-group small {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.form-help {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(96, 165, 250, 0.1);
  border-left: 3px solid #60a5fa;
  border-radius: 0.25rem;
}

/* Form row (2 colonnes) */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Checkbox custom */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  accent-color: #60a5fa;
}

.checkbox-label span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_icon-context-menu.css (1.29 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* Menu contextuel — style white panel, cohérent avec les modales */
.tile-preview-list-item { display: inline-block; }

.icon-context-menu {
    position: fixed;
    background: #fff;
    border: 1px solid var(--border-panel);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,66,.14), 0 2px 8px rgba(0,0,0,.08);
    padding: .35rem;
    z-index: 10001;
    min-width: 160px;
    animation: contextMenuIn .12s cubic-bezier(.16,1,.3,1);
}

@keyframes contextMenuIn {
    from { opacity: 0; transform: scale(.96) translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.icon-context-menu__item {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .6rem .85rem;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #1e293b;
    text-align: left;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
    transition: background .12s, color .12s;
}

.icon-context-menu__item:hover {
    background: rgba(var(--color-accent-rgb), .08);
    color: var(--color-accent);
}

.icon-context-menu__item--danger { color: #dc2626; }
.icon-context-menu__item--danger:hover {
    background: rgba(220, 38, 38, .08);
    color: #dc2626;
}

.icon-context-menu__item i {
    width: 14px;
    text-align: center;
    font-size: .875rem;
}


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_icon-picker.css (4.46 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* Surcharges spécifiques à la modale icon picker */
#iconPickerModal > .modal > .modal__body { padding: 14px; }
#iconPickerModal .icon-picker-grid { padding: 22px; }

/* Header avec recherche + bouton */
.icon-picker-header {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

.icon-picker-search {
    flex: 1;
    position: relative;
    margin-bottom: 0;
}

.icon-picker-search input {
    width: 100%;
    padding-right: 3rem;
}

/* Bouton clear de la recherche */
.icon-search-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.icon-search-clear:hover {
    background: var(--bg-hover);
    color: var(--text-light);
}

/* Grille d'icônes */
.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .75rem;
    max-height: 55vh;
    overflow-y: auto;
    padding: .25rem .25rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* Item d'icône — même style que les tiles du dashboard */
.icon-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem .75rem;
    background: var(--bg-panel);
    border: 1px solid var(--border-panel);
    border-radius: 20px;
    box-shadow: var(--shadow-panel);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
    will-change: transform, box-shadow, background-color;
}

.icon-picker-item:hover {
    transform: translateY(-2px);
    background-color: #3e56ce; /* rgba(accent,.75) composité sur --bg-main */
    border-color: rgba(var(--color-accent-rgb), 0.65);
    box-shadow: var(--shadow-strong), 0 0 0 2px rgba(var(--color-accent-rgb), 0.40);
}

.icon-picker-item.selected {
    background-color: #3e56ce;
    border-color: rgba(var(--color-accent-rgb), 0.65);
    box-shadow: var(--shadow-strong), 0 0 0 2px rgba(var(--color-accent-rgb), 0.40);
}

/* Icône affichée */
.icon-picker-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: .5rem;
}

.icon-picker-item__icon img,
.icon-picker-item__icon svg {
    width: 36px;
    height: 36px;
}

.icon-picker-item__icon img {
    filter: brightness(0) saturate(100%); /* icône sombre sur fond blanc */
}

.icon-picker-item:hover .icon-picker-item__icon img,
.icon-picker-item.selected .icon-picker-item__icon img {
    filter: brightness(0) invert(1); /* icône blanche sur fond accent */
}

.icon-picker-item__icon svg {
    stroke: var(--text-panel);
    fill: none;
    stroke-width: 2;
}

.icon-picker-item:hover .icon-picker-item__icon svg,
.icon-picker-item.selected .icon-picker-item__icon svg {
    stroke: #fff;
}

/* Nom de l'icône */
.icon-picker-item__name {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-panel);
    text-align: center;
    word-break: break-word;
}

.icon-picker-item:hover .icon-picker-item__name,
.icon-picker-item.selected .icon-picker-item__name {
    color: #fff;
}

/* État vide */
.icon-picker-empty {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

/* Forcer la couleur des SVG */
.icon-picker-item__icon svg,
.icon-picker-item__icon img[src$=".svg"] {
    filter: brightness(0) saturate(100%) invert(0%);
}

/* Sélecteur d'icône avec preview (autre composant) */
.icon-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.icon-selector__preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
}

.icon-selector__preview i {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.icon-selector__preview img,
.icon-selector__preview svg {
    width: 60px;
    height: 60px;
    margin-bottom: 0.5rem;
}

.icon-selector__preview span {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_logs-viewer.css (7.45 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* Filtres */
.logs-filters {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    margin-bottom: 1rem;
}

.logs-search {
    position: relative;
}

.logs-search input {
    width: 100%;
    padding-right: 3rem;
}

/* Timeline des logs */
.logs-timeline {
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.5rem;
}

/* Item de log (pour le log viewer uniquement, pas les tasks) */
.logs-container .log-item {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 2px solid var(--border-light);
    border-left: 4px solid var(--color-accent);
    border-radius: 12px;
    transition: all 0.2s;
}

.log-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-medium);
}

/* Couleurs par action */
.log-item--activated {
    border-left-color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}

.log-item--deactivated {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.log-item--updated {
    border-left-color: #3b82f6;
    background: rgba(59, 130, 246, 0.12);
}

.log-item--reordered {
    border-left-color: #a855f7;
    background: rgba(168, 85, 247, 0.12);
}

.log-item--icon_uploaded {
    border-left-color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}

.log-item--icon_renamed {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
}

.log-item--icon_deleted {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

/* Icône de l'action */
.log-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 1.25rem;
}

.log-item--activated .log-item__icon {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.log-item--deactivated .log-item__icon {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.log-item--updated .log-item__icon {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.log-item--reordered .log-item__icon {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.log-item--icon_uploaded .log-item__icon {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.log-item--icon_renamed .log-item__icon {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.log-item--icon_deleted .log-item__icon {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Contenu du log */
.log-item__content {
    flex: 1;
    min-width: 0;
}

.log-item__action {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.log-item__tile {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.log-item__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.log-item__user {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.log-item__date {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Détails des modifications */
.log-item__details {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    font-size: 0.875rem;
}

.log-item__details code {
    padding: 0.125rem 0.375rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    color: var(--text-light);
}

.log-item__details ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
    color: var(--text-secondary);
}

.log-item__details ul li {
    margin-bottom: 0.25rem;
}

/* Forcer les SVG en noir dans les logs */
.log-item__details img[src$=".svg"] {
    filter: brightness(0) saturate(100%) invert(0%);
}

/* État vide */
.logs-empty {
    text-align: center;
    padding: 4rem 2rem;
}

/* Bouton annuler en haut à droite */
.btn-undo {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.btn-undo:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    transform: translateY(-1px);
}

.btn-undo i {
    margin: 0; /* ← Pas de marge pour centrer parfaitement */
}

/* Logs d'annulation */
.log-item--undone_activation,
.log-item--undone_deactivation,
.log-item--undone_update {
    border-left-color: #ffc107;
    background: rgba(255, 193, 7, 0.12);
}

.log-item--undone_activation .log-item__icon,
.log-item--undone_deactivation .log-item__icon,
.log-item--undone_update .log-item__icon {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

/* Bouton pour aller au log original */
.btn-goto-log {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffc107;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.75rem;
}

.btn-goto-log:hover {
    background: #ffc107;
    border-color: #ffc107;
    color: #000;
    transform: translateX(2px);
}

/* Animation de surbrillance */
.log-highlight {
    animation: highlight-pulse 2s ease-in-out;
}

@keyframes highlight-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(255, 193, 7, 0.4);
        transform: scale(1.02);
    }
}

.log-item--undone_icon_rename {
    border-left-color: #ffc107;
    background: rgba(255, 193, 7, 0.12);
}

.log-item--undone_icon_rename .log-item__icon {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

/* Bouton annuler désactivé */
.btn-undo--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

.btn-undo--disabled:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-muted);
    transform: none;
}

.log-item--undone_icon_delete {
    border-left-color: #ffc107;
    background: rgba(255, 193, 7, 0.12);
}

.log-item--undone_icon_delete .log-item__icon {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

/* Conteneur de logs */
.logs-container {
  background: #0a0b0f;
  color: #e5e7eb;
  padding: 1rem;
  border-radius: .5rem;
  max-height: 400px;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8125rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.logs-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.logs-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .05);
  border-radius: 4px;
}

.logs-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .15);
  border-radius: 4px;
}

.logs-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .25);
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_mobile-menu.css (7.12 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Menu mobile actions
   =============================== */

.desktop-only {
    display: flex;
}

.mobile-only {
    display: none;
}

.mobile-actions-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9600;
}

.mobile-actions-menu__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.mobile-actions-menu__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem 1rem 0 0;
    max-height: 70vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.mobile-actions-menu__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-actions-menu__header h4 {
    margin: 0;
    color: #e5e7eb;
    font-size: 1.125rem;
    font-weight: 600;
}

.mobile-actions-menu__close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.mobile-actions-menu__close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

.mobile-actions-menu__body {
    padding: 1rem;
}

.mobile-action-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: #e5e7eb;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.75rem;
}

.mobile-action-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.mobile-action-item i {
    font-size: 1.25rem;
    color: #60a5fa;
}

.mobile-action-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 1rem 0;
}

.mobile-action-label {
    font-size: 0.875rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.mobile-period-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.mobile-period-btn {
    padding: 0.875rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: #e5e7eb;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-period-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.mobile-period-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: flex !important;
    }
    
    .panel__header-actions {
        justify-content: flex-end;
    }
    
    .analysis-charts {
        grid-template-columns: 1fr;
    }
    
    .consumers-grid {
        grid-template-columns: 1fr;
    }
    
    .analysis-averages {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   Menu mobile actions - Commun
   =============================== */

.mobile-actions-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9600;
}

.mobile-actions-menu__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.mobile-actions-menu__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem 1rem 0 0;
    max-height: 70vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.mobile-actions-menu__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.50rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-actions-menu__header h4 {
    margin: 0;
    color: #e5e7eb;
    font-size: 1.125rem;
    font-weight: 600;
}

.mobile-actions-menu__close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.mobile-actions-menu__close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

.mobile-actions-menu__body {
    padding: 1rem;
}

.mobile-action-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: #e5e7eb;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.75rem;
}

.mobile-action-item:last-child {
    margin-bottom: 0;
}

.mobile-action-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.mobile-action-item i {
    font-size: 1.25rem;
    color: #60a5fa;
}

.mobile-action-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 1rem 0;
}

.mobile-action-label {
    font-size: 0.875rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.mobile-period-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.mobile-period-btn {
    padding: 0.875rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: #e5e7eb;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-period-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.mobile-period-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}


/* Select dans le menu mobile */
.mobile-menu-select-wrapper {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.5rem;
}

.mobile-menu-select-wrapper label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-on-primary);
}

.mobile-menu-select-wrapper .ui-select {
  width: 100%;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_modal.css (18.29 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL — Pattern dark header #1a1a55 + container blanc flottant
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 20px;
    z-index: 10000;
}

.modal-overlay.is-open,
.modal-overlay[aria-hidden="false"] {
    display: flex;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.modal {
    all: unset;
    display: flex;
    flex-direction: column;
    width: min(560px, 94vw);
    max-height: 88vh;
    background: #1a1a55;
    border-radius: 20px;
    box-shadow: 0 32px 80px rgba(0,0,66,.6), 0 8px 24px rgba(0,0,0,.3);
    font-family: inherit;
    color: #fff;
    overflow: hidden;
    animation: modalIn .2s cubic-bezier(.16,1,.3,1);
}

@keyframes modalIn {
    from { opacity:0; transform:translateY(10px) scale(.98); }
    to   { opacity:1; transform:none; }
}

/* ── Variantes de taille ─────────────────────────────────────────────────── */
.modal--sm  { width: min(400px,  94vw); }
.modal--lg  { width: min(780px,  94vw); }
.modal--xl  { width: min(1100px, 94vw); }
.modal--large  { width: min(900px,  94vw); }
.modal--small  { width: min(500px,  94vw); }

/* ── Header (zone dark) ─────────────────────────────────────────────────── */
.modal__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem 1.5rem 1.1rem;
    flex-shrink: 0;
}

.modal__header h3 {
    flex: 1;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.modal__header h3::after {
    content: '';
    flex: 1;
    height: 3px;
    margin-left: .75rem;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--color-accent, #6366f1), rgba(99,102,241,.5) 50%, transparent);
}

.modal--danger  .modal__header h3::after { background: linear-gradient(90deg, var(--status-error) 0%, rgba(var(--status-error-rgb),.5) 50%, transparent); }
.modal--warning .modal__header h3::after { background: linear-gradient(90deg, #f59e0b 0%, rgba(245,158,11,.5) 50%, transparent); }

/* Bouton de fermeture */
.modal__close {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.7);
    cursor: pointer;
    padding: .35rem .6rem;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1;
    transition: background .15s, color .15s;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.modal__close:hover { background: rgba(255,255,255,.18); color: #fff; }
.modal__close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── Body — container blanc (clips les coins) ────────────────────────────── */
.modal__body {
    background: #fff;
    border-radius: 16px;
    margin: 0 .75rem;
    color: #1e293b;
    flex: 1;
    overflow: hidden;
    box-shadow: 0 -4px 20px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Wrapper interne scrollable */
.modal__body-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.25rem;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.modal__body-scroll::-webkit-scrollbar { width: 5px; }
.modal__body-scroll::-webkit-scrollbar-track { background: transparent; }
.modal__body-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
.modal__body-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Inputs — contexte fond blanc (modale et panel) ─────────────────────── */
.modal__body .ui-input,
.modal__body input[type="text"],
.modal__body input[type="url"],
.modal__body input[type="email"],
.modal__body input[type="number"],
.modal__body input[type="password"],
.modal__body textarea,
.modal__body select,
.panel__body .ui-input,
.panel__body input[type="text"],
.panel__body input[type="url"],
.panel__body input[type="email"],
.panel__body input[type="number"],
.panel__body input[type="password"],
.panel__body textarea,
.panel__body select {
    display: block; width: 100%; box-sizing: border-box;
    padding: 9px 13px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
    color: #1e293b;
    font-size: .9rem; font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.modal__body .ui-input:hover,
.modal__body input[type="text"]:hover,
.modal__body input[type="url"]:hover,
.modal__body input[type="email"]:hover,
.modal__body input[type="number"]:hover,
.modal__body input[type="password"]:hover,
.modal__body textarea:hover,
.panel__body .ui-input:hover,
.panel__body input[type="text"]:hover,
.panel__body input[type="url"]:hover,
.panel__body input[type="email"]:hover,
.panel__body input[type="number"]:hover,
.panel__body input[type="password"]:hover,
.panel__body textarea:hover { border-color: var(--color-accent); background: #fff; }

.modal__body .ui-input:focus,
.modal__body input[type="text"]:focus,
.modal__body input[type="url"]:focus,
.modal__body input[type="email"]:focus,
.modal__body input[type="number"]:focus,
.modal__body input[type="password"]:focus,
.modal__body textarea:focus,
.modal__body select:focus,
.panel__body .ui-input:focus,
.panel__body input[type="text"]:focus,
.panel__body input[type="url"]:focus,
.panel__body input[type="email"]:focus,
.panel__body input[type="number"]:focus,
.panel__body input[type="password"]:focus,
.panel__body textarea:focus,
.panel__body select:focus {
    border-color: var(--color-accent);
    background: #fff;
    box-shadow: 0 0 12px 0 var(--color-accent);
}
.modal__body input::placeholder,
.modal__body textarea::placeholder,
.panel__body input::placeholder,
.panel__body textarea::placeholder { color: #94a3b8; }

/* ── Labels ──────────────────────────────────────────────────────────────── */
.modal__body p,
.modal__body label { color: #1e293b; }
.modal__body label > span:first-child {
    display: block;
    font-size: .75rem; font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: .5rem;
    margin-bottom: .5rem;
}
/* Pas de margin-top sur le premier label en haut de la modale */
.modal__body-scroll > label:first-child > span:first-child,
.modal__body-scroll > :first-child > label:first-child > span:first-child {
    margin-top: 0;
}
.modal__body small { display: block; font-size: .78rem; color: #94a3b8; margin-top: 4px; }
.modal__body-scroll > small:first-child { margin-top: 0; }

/* ── field-label (généré par render_filedrop) ────────────────────────────── */
.modal__body .field-label {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
    margin-bottom: .5rem;
    font-size: .72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.modal__body .field-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* ── Filedrop dans modal — tout automatique ──────────────────────────────── */
.modal__body .filedrop {
    --fd-bg:         #fff;
    --fd-fg:         #1e293b;
    --fd-border:     rgba(var(--color-accent-rgb), .35);
    --fd-radius:     .75rem;
    --fd-accent-rgb: var(--color-accent-rgb);
    --fd-danger:     #dc2626;
    background:  var(--fd-bg);
    border-style: dashed;
    border-width: 1.5px;
    transition: border-color .15s, box-shadow .15s, background .15s;
    cursor: pointer;
}
.modal__body .filedrop:hover {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), .04);
}
.modal__body .filedrop:focus-within,
.modal__body .filedrop.is-dragover {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), .06);
    box-shadow: 0 0 12px 0 var(--color-accent);
}
.modal__body .filedrop p,
.modal__body .filedrop .filedrop__text,
.modal__body .filedrop .filedrop__hint { color: #94a3b8; }
.modal__body .filedrop .filedrop__text strong { color: #475569; }
.modal__body .filedrop__item:not(.filedrop__item--preview) {
    background: rgba(var(--color-accent-rgb), .04);
    border-color: rgba(var(--color-accent-rgb), .15);
    color: #1e293b;
}
.modal__body .filedrop__item:not(.filedrop__item--preview):hover {
    background: rgba(var(--color-accent-rgb), .08);
}

/* ── Grille 2 colonnes réutilisable dans modal ───────────────────────────── */
.modal-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

/* ── Sections ────────────────────────────────────────────────────────────── */
/* ── Helpers réutilisables dans les modales ──────────────────────────────── */
.modal-section-icon {
    color: #6366f1;
    margin-right: .35rem;
}

.text-muted-hint {
    color: var(--text-muted, #94a3b8);
    font-size: .75rem;
    display: block;
    margin-top: .2rem;
}

.modal-section { margin-top: 1rem; }
.modal-section:first-child,
.modal-section:first-of-type { margin-top: 0; }
.modal-section:last-child,
.modal-section:last-of-type { margin-bottom: 0; }

.modal-section__title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
    font-size: .72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.modal-section__title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* ── Footer (zone dark) ──────────────────────────────────────────────────── */
.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: .9rem .75rem;
    flex-shrink: 0;
}

/* btn-primary, btn-secondary, btn-primary--sq → styles globaux dans _buttons.css */

/* ── Textes utilitaires ──────────────────────────────────────────────────── */
.modal-text {
    font-size: .9rem;
    margin-bottom: 1rem;
    color: #64748b;
}

.modal-warning {
    color: var(--status-error);
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0;
}

/* ── Boîtes d'information ────────────────────────────────────────────────── */
.user-info-box {
    background: rgba(255, 193, 7, 0.15);
    border-left: 4px solid #ffc107;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 8px;
}
.user-info-box__name  { margin: 0; color: var(--text-light); font-weight: 600; }
.user-info-box__email { margin: .5rem 0 0; font-size: .9rem; color: var(--text-muted); }

/* ── Confirm variant ─────────────────────────────────────────────────────── */
.modal--confirm .modal__body {
    padding: 1.25rem 1.5rem;
}
.modal--confirm .modal-text {
    font-size: .95rem;
    color: #1e293b;
    line-height: 1.6;
    margin: 0;
}
.modal--confirm .modal__header { padding-bottom: 1rem; }

/* Icône décorative dans le body */
.confirm-body-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    margin: 0 auto .75rem;
    font-size: 1.4rem;
}
.modal--danger  .confirm-body-icon { background: rgba(220,38,38,.1);  color: #dc2626; }
.modal--warning .confirm-body-icon { background: rgba(245,158,11,.1); color: #f59e0b; }
.modal--confirm:not(.modal--danger):not(.modal--warning) .confirm-body-icon { background: rgba(var(--color-accent-rgb),.1); color: var(--color-accent); }

/* Bouton confirmation coloré selon le type */
.modal--danger  .modal__footer #confirmModalBtn { background: #dc2626; border-color: transparent; }
.modal--danger  .modal__footer #confirmModalBtn:hover {
    background: #fff;
    color: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 4px 16px rgba(220, 38, 38, .25);
    transform: translateY(-1px) scale(1.03);
}
.modal--warning .modal__footer #confirmModalBtn { background: #f59e0b; }
.modal--warning .modal__footer #confirmModalBtn:hover { background: #d97706; }

/* ── Fermeture ───────────────────────────────────────────────────────────── */
.modal-overlay.is-closing .modal {
    animation: modalOut .18s ease forwards;
}
@keyframes modalOut {
    to { opacity: 0; transform: translateY(6px) scale(0.98); }
}

/* ── Scroll lock ─────────────────────────────────────────────────────────── */
body.modal-open { overflow: hidden; }

/* ── Accessibilité ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .modal { animation: none; }
    .modal-overlay.is-closing .modal { animation: none; }
}

/* ── Tabs de configuration (modale config) ───────────────────────────────── */
.config-tabs {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid rgba(255,255,255,.1);
}
.config-tab {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.6);
    padding: .75rem 1.5rem;
    font-size: .9rem; font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all .2s;
    display: flex; align-items: center; gap: .5rem;
}
.config-tab:hover   { color: rgba(255,255,255,.9); background: rgba(255,255,255,.05); }
.config-tab.active  { color: #60a5fa; border-bottom-color: #60a5fa; }
.config-tab-content { display: none; animation: modalIn .3s ease; }
.config-tab-content.active { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY — rétrocompatibilité (ne pas modifier)
   ═══════════════════════════════════════════════════════════════════════════ */

.modal--legacy h3 {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 10px;
    font-size: 18px; font-weight: 700;
    color: var(--text-light);
}
.modal--legacy h3::after {
    content: "";
    flex: 1;
    height: 2px;
    margin-left: 8px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--color-accent-rgb),.55), rgba(var(--color-accent-rgb),0));
}
.modal--legacy p { margin: 0 0 16px; color: var(--text-light); font-size: 14px; line-height: 1.45; }
.modal--legacy .actions { display: flex; gap: 8px; justify-content: flex-end; }
.modal--legacy .btn {
    appearance: none;
    padding: 8px 14px;
    border: 1px solid var(--border-muted);
    border-radius: 10px;
    background: var(--bg-muted);
    color: var(--text-main);
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .02s, box-shadow .15s;
}
.modal--legacy .btn:hover  { background: #eceff6; }
.modal--legacy .btn:active { transform: translateY(1px); }
.modal--legacy .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb),.25); }
.modal--legacy .btn.primary { background: var(--status-success); border-color: var(--status-success); color: var(--text-on-accent); }
.modal--legacy .btn.primary:hover { background: var(--status-success-accent); filter: brightness(1.08); box-shadow: 0 0 0 3px rgba(var(--status-success-rgb),.25); }
.modal--legacy .btn.ghost { background: var(--bg-surface); color: var(--text-main); border-color: var(--border-light); }
.modal--legacy .btn.ghost:hover { background: var(--bg-card-accent); filter: brightness(1.08); }
.modal--legacy select,
.modal--legacy input[type="email"],
.modal--legacy input[type="text"],
.modal--legacy textarea {
    width: 100%; padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: #fff; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.modal--legacy select:focus,
.modal--legacy input[type="email"]:focus,
.modal--legacy input[type="text"]:focus,
.modal--legacy textarea:focus {
    border-color: rgba(var(--color-accent-rgb),.8);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb),.25);
}
.modal--legacy select option { background: var(--bg-accent); color: #fff; }


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_num-spinner.css (2.36 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ── Spinner numérique ◀ valeur ▶ ─────────────────────────────────────────
   Utilisé dans : tasks/modal-add-edit, supervision/modale seuils
   ────────────────────────────────────────────────────────────────────────── */

.num-spinner {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
}

.modal .num-spinner .num-spinner__btn,
.num-spinner .num-spinner__btn {
    width: 26px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: .58rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    box-shadow: none;
    transition: background .1s, color .1s;
    flex-shrink: 0;
}
.modal .num-spinner .num-spinner__btn:hover,
.num-spinner .num-spinner__btn:hover {
    background: #f1f5f9;
    color: #475569;
}

/* (0,0,3,0) > (0,0,2,1) de ".modal input[type=text]" dans _forms.css */
.modal .num-spinner .num-spinner__input,
.num-spinner .num-spinner__input {
    width: 48px;
    height: auto;
    line-height: 1.2;
    text-align: center;
    background: transparent;
    border: none;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    border-radius: 0;
    color: #1e293b;
    font-family: monospace;
    font-size: .88rem;
    font-weight: 700;
    padding: .3rem .1rem;
    box-shadow: none;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}
.modal .num-spinner .num-spinner__input::-webkit-inner-spin-button,
.num-spinner .num-spinner__input::-webkit-inner-spin-button,
.modal .num-spinner .num-spinner__input::-webkit-outer-spin-button,
.num-spinner .num-spinner__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
}
.modal .num-spinner .num-spinner__input:focus,
.num-spinner .num-spinner__input:focus {
    background: #f0f4ff;
}

/* Variante large — pour les modales avec plus d'espace */
.num-spinner--lg .num-spinner__btn  { width: 32px; font-size: .65rem; }
.num-spinner--lg .num-spinner__input { width: 56px; font-size: 1rem; padding: .35rem .15rem; }


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_panel.css (13.74 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Composant Panel
   Conteneurs modulaires avec header/body/footer
   =============================== */

/* ===============================
   Structure de base
   =============================== */

.panel {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-panel);
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: var(--shadow-panel);
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* ===============================
   Sections du panel
   =============================== */

.panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--color-primary);
  color: #ffffff;
  border-bottom: .25rem solid var(--color-accent);
}

/* Corps du panel — texte sombre sur fond blanc */
.panel__body {
  color: var(--text-panel);
}

/* Panel nav — hover */
.panel--nav { isolation: isolate; position: relative; }

.panel--nav:hover,
.panel--nav:focus-visible {
  border-color: transparent;
  box-shadow:
    0 0 0 2px var(--color-accent),
    0 0 0 5px rgba(var(--color-accent-rgb), .2),
    0 8px 28px rgba(0, 0, 0, .25),
    0 0 32px rgba(var(--color-accent-rgb), .14);
  transform: translateY(-2px);
  outline: none;
  position: relative;
  z-index: 5;
}

/* Barre accent : remplacée par ::before pour permettre le shine avec ::after */
.panel--nav .panel__header {
  position: relative;
  border-bottom: none; /* remplacée par pseudo-élément */
}

.panel--nav .panel__header::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: .25rem;
  background: var(--color-accent);
}

/* Shine qui traverse la barre au hover */
.panel--nav .panel__header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -60%;
  width: 40%;
  height: .25rem;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.9) 50%,
    transparent);
  opacity: 0;
}

.panel--nav:hover .panel__header::after {
  opacity: 1;
  animation: panel-nav-shine .5s ease .05s forwards;
}

@keyframes panel-nav-shine {
  from { left: -40%; }
  to   { left: 110%; }
}

/* Titre du panel */
.panel__title {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  word-wrap: break-word;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Contrôles (select + boutons) */
.panel__controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

/* Actions (boutons uniquement) */
.panel__actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}

.panel__footer {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: .75rem 1rem;
  margin-top: auto;
}

/* ===============================
   Variantes de couleur
   =============================== */

/* Primary (par défaut - bleu) */
.panel--primary .panel__header {
  border-bottom-color: var(--color-accent);
}

/* Success (vert) */
.panel--success .panel__header {
  border-bottom-color: var(--status-success);
}

/* Danger (rouge) */
.panel--danger .panel__header {
  border-bottom-color: var(--status-error);
}

/* ===============================
   Variantes de taille/style
   =============================== */

/* Compact (padding réduit) */
.panel--compact .panel__header {
  min-height: 48px;
  padding: .5rem .75rem;
}

.panel--compact .panel__body {
  padding: .5rem .75rem;
}

.panel--compact .panel__footer {
  padding: .5rem .75rem;
}

/* ===============================
   États interactifs
   =============================== */

/* Panel collapsible */
.panel--collapsed .panel__body,
.panel--collapsed .panel__footer {
  display: none;
}

.panel__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.panel__toggle:hover {
  background: var(--header-profile-bg);
}

.panel__toggle i {
  transition: transform .2s ease;
}

.panel--collapsed .panel__toggle i {
  transform: rotate(-90deg);
}

/* Panel en chargement */
.panel.is-loading {
  position: relative;
  pointer-events: none;
}

.panel.is-loading .panel__body {
  opacity: 0.5;
}

.panel.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid rgba(255, 255, 255, .2);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: panel-spin 0.8s linear infinite;
  z-index: 10;
}

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

/* Body scrollable */
.panel__body--scrollable {
  max-height: 400px;
  overflow-y: auto;
}

/* ===============================
   Grilles de panels
   =============================== */

.panels-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

/* 2 colonnes */
.panels-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* 3 colonnes */
.panels-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* Auto-fill (responsive automatique — préserve les colonnes vides) */
.panels-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Hauteur fixe uniforme pour tous les panels nav dans une grille */
.panels-grid .panel--nav {
  height: 180px;
}

/* Body flex colonne pour coller le bouton en bas à droite */
.panels-grid .panel--nav .panel__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.panels-grid .panel--nav .panel__body > div:last-child {
  display: flex;
  justify-content: flex-end;
}

/* ===============================
   Responsive
   =============================== */

@media (max-width: 68.75rem) {
  .panels-grid--2col,
  .panels-grid--3col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  /* Header responsive : titre sur toute la largeur */
  .panel__header {
    gap: 0.5rem;
  }
  
  .panel__title {
    flex-basis: 100%;
    margin-bottom: 0.25rem;
  }
  
  .panel__actions,
  .panel__controls {
    margin-left: auto;
  }
  
  /* Body scrollable */
  .panel__body--scrollable {
    max-height: 300px;
  }
}

/* ===============================
   Accessibilité
   =============================== */

@media (prefers-reduced-motion: reduce) {
  .panel,
  .panel__toggle,
  .panel__toggle i {
    transition: none;
  }

  .panel.is-loading::after {
    animation: none;
    border: 3px solid var(--color-accent);
    border-top-color: transparent;
  }
}

/* ===============================
   Header avec actions divisées
   =============================== */

.panel__header--split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.panel__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.panel__actions--left {
    flex: 0 0 auto;
}

.panel__actions--right {
    flex: 0 0 auto;
}

/* ===============================
   Barre de filtres
   =============================== */

.panel__filters {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.panel__filters .searchbar {
    flex: 1 1 300px;
    min-width: 200px;
}

@media (max-width: 768px) {
    .panel__header--split {
        flex-direction: column;
        align-items: stretch;
    }

    .panel__actions {
        justify-content: center;
    }

    .panel__filters {
        flex-direction: column;
    }

    .panel__filters .searchbar,
    .panel__filters .ui-select {
        width: 100%;
    }
}

/* Panel pleine largeur — s'étire pour remplir le conteneur flex */
.panel--full-width {
  grid-column: 1 / -1;
  flex: 1;
  min-height: 0;
}

/* Scrollable panel body — flex + thin scrollbar */
.panel__body--scrollable {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.panel__body--scrollable::-webkit-scrollbar { width: 5px; height: 5px; }
.panel__body--scrollable::-webkit-scrollbar-track { background: transparent; }
.panel__body--scrollable::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
.panel__body--scrollable::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.panel__body--scrollable::-webkit-scrollbar-corner { background: transparent; }

/* ===============================
   Panel navigation (carte cliquable)
   =============================== */

.panel--nav {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .15s ease;
}


.panel--nav .panel__chevron {
  font-size: 0.875rem;
  opacity: 0.4;
  transition: opacity .2s ease, transform .2s ease;
  flex-shrink: 0;
}

.panel--nav:hover .panel__chevron,
.panel--nav:focus-visible .panel__chevron {
  opacity: 1;
  transform: translateX(3px);
}

/* Padding par défaut du body dans un panel nav */
.panel--nav .panel__body { padding: 1rem 1.25rem; }

/* Description courte sous le titre d'un panel nav */
.panel-description {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ===============================
   Panel désactivé (À venir)
   =============================== */

.panel--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===============================
   Barre de navigation admin
   =============================== */

.admin-nav {
  display: flex;
  align-items: center;
  padding: 1rem 0 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXTENSIONS — Composants de page ajoutés
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page header : en-tête standard de page avec bouton retour ────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.page-header__back { flex-shrink: 0; }

.page-header__content { flex: 1; min-width: 0; }

.page-header__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.page-header__title i { color: var(--accent, #3b82f6); }

.page-header__subtitle {
  font-size: .875rem;
  color: rgba(255, 255, 255, .55);
  margin: 0;
  line-height: 1.5;
}

.page-header__actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-shrink: 0;
}

/* ── Section label : titre de section UPPERCASE avec ligne ────────────────── */
/* Usage : <div class="section-label">Mon titre</div>                         */
.section-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent, #3b82f6);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .7rem;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle, #e2e8f0);
}

/* Version sans ligne */
.section-label--plain::after { display: none; }

/* Sur fond sombre */
.section-label--dark {
  color: rgba(255, 255, 255, .5);
}
.section-label--dark::after { background: rgba(255, 255, 255, .1); }

/* ── Panel body avec padding standard ────────────────────────────────────── */
.panel__body--padded { padding: 1.25rem; }
.panel__body--padded-sm { padding: .75rem; }

/* ── Panel header light (fond clair, pour panels dans des pages claires) ──── */
.panel__header--light {
  background: #f8fafc;
  color: #1e293b;
  border-bottom: 1px solid #e2e8f0;
  border-bottom-width: 1px;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
/* Usage : <div class="empty-state"><i class="fas fa-inbox empty-state__icon"></i>
           <p class="empty-state__title">…</p><p class="empty-state__desc">…</p></div> */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-muted, #94a3b8);
}

.empty-state__icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 1rem;
  opacity: .3;
  color: var(--text-muted, #94a3b8);
}

.empty-state__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-panel, #374151);
  margin: 0 0 .4rem;
}

.empty-state__desc {
  font-size: .875rem;
  line-height: 1.6;
  max-width: 36ch;
  margin: 0 auto .75rem;
}

/* Sur fond sombre (dans topbar, panels sombres) */
.empty-state--dark { color: rgba(255, 255, 255, .4); }
.empty-state--dark .empty-state__title { color: rgba(255, 255, 255, .6); }
.empty-state--dark .empty-state__icon  { color: rgba(255, 255, 255, .2); }

/* Taille compacte */
.empty-state--sm { padding: 2rem 1rem; }
.empty-state--sm .empty-state__icon { font-size: 1.75rem; margin-bottom: .5rem; }


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_stats.css (1.00 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* Moyennes sur la période */
.analysis-averages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.analysis-stat {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  transition: all 0.3s;
}

.analysis-stat:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

.analysis-stat__icon {
  font-size: 2.5rem;
  line-height: 1;
}

.analysis-stat__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.analysis-stat__label {
  font-size: 0.875rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.analysis-stat__value {
  font-size: 2rem;
  font-weight: 700;
  color: #e5e7eb;
  line-height: 1;
}

.analysis-stat__max {
  font-size: 0.8rem;
  color: #64748b;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_table.css (8.80 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Composant Table
   Tableaux de données avec scroll et sticky header
   Usage: <div class="table"><table>…</table></div>
   =============================== */

/* ===============================
   Container de scroll
   =============================== */

.table {
  margin-top: 0.875rem;
  border-radius: 0.75rem;
  background: var(--bg-card);
  box-shadow: var(--shadow-soft);
  overflow: auto;
  max-height: var(--table-max-height);
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* ===============================
   Élément table
   =============================== */

.table table {
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-card);
}

/* ===============================
   Header (thead)
   =============================== */

.table thead {
  background: var(--bg-accent);
  color: var(--text-on-primary);
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 1rem 1.125rem;
  background: var(--bg-accent);
  color: var(--text-on-primary);
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}

.table thead tr:last-child th {
  border-bottom: 4px solid var(--color-accent);
}

/* ===============================
   Body (tbody)
   =============================== */

.table tbody {
  background: var(--bg-card);
}

.table th,
.table td {
  padding: 0.5rem 1.125rem;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
}

.table td {
  color: var(--text-main);
}

/* ===============================
   États des lignes
   =============================== */

.table tbody tr {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  transition: background-color .18s ease;
}

.table tbody tr:last-child {
  border-bottom: none;
}

/* Hover (seulement si clickable) */
.table tbody tr.is-clickable {
  cursor: pointer;
}

.table tbody tr.is-clickable:hover {
  background-color: rgba(var(--color-accent-rgb), .10);
}

/* Active */
.table tbody tr.is-active {
  background: rgba(var(--color-accent-rgb), .13);
}

/* Success (vert) */
.table tbody tr.is-success {
  background: rgba(var(--status-success-rgb), .08);
  border-left: 3px solid var(--status-success);
}

/* Danger (rouge) */
.table tbody tr.is-danger {
  background: rgba(var(--status-error-rgb), .08);
  border-left: 3px solid var(--status-error);
}

/* Warning (orange) */
.table tbody tr.is-warning {
  background: rgba(255, 159, 10, .08);
  border-left: 3px solid #ff9f0a;
}

/* Selected (checkbox) */
.table tbody tr.is-selected {
  background: rgba(var(--color-accent-rgb), .15);
}

/* ===============================
   Tri de colonnes
   =============================== */

.table th.is-sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 2rem;
}

.table th.is-sortable::after {
  content: "⇅";
  position: absolute;
  right: 0.75rem;
  opacity: 0.3;
  font-size: 0.875rem;
  transition: opacity .2s ease;
}

.table th.is-sortable:hover::after {
  opacity: 0.6;
}

.table th.is-sorted-asc::after {
  content: "▲";
  opacity: 1;
  color: var(--color-accent);
}

.table th.is-sorted-desc::after {
  content: "▼";
  opacity: 1;
  color: var(--color-accent);
}

/* ===============================
   Colonne Actions
   =============================== */

.table th:last-child,
.table td:last-child {
  white-space: nowrap;
}

.table td .actions {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
}

.table td .actions > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ===============================
   Colonne Checkbox
   =============================== */

.table__checkbox {
  width: 40px;
  text-align: center;
  padding-left: 1rem;
  padding-right: 0.5rem;
}

.table__checkbox input[type="checkbox"] {
  cursor: pointer;
}

/* ===============================
   Helpers de texte
   =============================== */

.table td .desc,
.table .desc {
  color: var(--text-muted);
  font-size: .95rem;
}

/* ===============================
   Empty state
   =============================== */

.table__empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 1rem;
}

.table__empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.3;
}

/* ===============================
   Loading state
   =============================== */

.table.is-loading {
  position: relative;
  pointer-events: none;
}

.table.is-loading tbody {
  opacity: 0.5;
}

.table.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 4px solid rgba(var(--color-accent-rgb), .2);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: table-spin 0.8s linear infinite;
  z-index: 10;
}

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

/* ===============================
   Variantes de style
   =============================== */

/* Striped (lignes alternées) */
.table--striped tbody tr:nth-child(even) {
  background: rgba(var(--color-accent-rgb), .03);
}

.table--striped tbody tr.is-clickable:nth-child(even):hover {
  background: rgba(var(--color-accent-rgb), .10);
}

/* Bordered (bordures complètes) */
.table--bordered table {
  border-collapse: collapse;
}

.table--bordered th,
.table--bordered td {
  border: 1px solid var(--border-light);
}

/* Compact (padding réduit) */
.table--compact th,
.table--compact td {
  padding: 0.375rem 0.75rem;
  font-size: 0.9rem;
}

/* Hoverable (hover sur toutes les lignes) */
.table--hoverable tbody tr {
  cursor: pointer;
}

.table--hoverable tbody tr:hover {
  background-color: rgba(var(--color-accent-rgb), .10);
}

/* Fixed first column */
.table--fixed-first th:first-child,
.table--fixed-first td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
}

.table--fixed-first thead th:first-child {
  z-index: 4;
}

/* ===============================
   Responsive
   =============================== */

@media (max-width: 48rem) {
  .table {
    margin-top: 0.5rem;
    border-radius: 0.5rem;
  }

  .table th,
  .table td {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }

  .table thead th {
    padding: 0.75rem;
  }
}

/* ===============================
   Accessibilité
   =============================== */

@media (prefers-reduced-motion: reduce) {
  .table tbody tr {
    transition: none;
  }

  .table.is-loading::after {
    animation: none;
    border: 4px solid var(--color-accent);
    border-top-color: transparent;
  }

  .table th.is-sortable::after {
    transition: none;
  }
}

/* ===============================
   Table standardisée — panels blancs
   Usage : <table class="data-table">
   =============================== */

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  background: var(--bg-panel-head);
  padding: .6rem .9rem;
  text-align: left;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-panel-muted);
  border-bottom: 1px solid var(--border-panel-head);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.data-table td {
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--border-table);
  vertical-align: middle;
  color: var(--text-panel);
  font-size: .875rem;
}

.data-table tbody tr:last-child td { border-bottom: none; }

.data-table tbody tr {
  transition: background .15s;
  cursor: pointer;
}

.data-table tbody tr:hover {
  background: var(--panel-row-hover);
}

.data-table tbody tr.is-selected {
  background: var(--panel-row-selected);
}

.data-table tbody tr.is-selected td {
  border-bottom-color: rgba(var(--color-accent-rgb), 0.12);
}

/* Bouton de tri dans les <th> de data-table */
.sort-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color .15s;
}
.sort-btn:hover { color: var(--color-accent); }

.sort-icon {
  font-size: .7rem;
  opacity: .35;
  transition: opacity .15s;
}
.sort-btn:hover .sort-icon { opacity: .7; }

.sort-btn.sort-asc .sort-icon,
.sort-btn.sort-desc .sort-icon { opacity: 1; color: var(--color-accent); }

.sort-btn.sort-asc .sort-icon::before  { content: "\f062"; } /* fa-arrow-up   */
.sort-btn.sort-desc .sort-icon::before { content: "\f063"; } /* fa-arrow-down */



/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_tasks_widget.css (2.74 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ============================================
   WIDGET TÂCHES PLANIFIÉES
   ============================================ */

.tasks-widget {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0.5rem;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

.task-item:hover {
    background: var(--bg-hover);
    transform: translateX(2px);
}

.task-item--success {
    border-left-color: var(--status-success);
}

.task-item--error {
    border-left-color: var(--status-error);
}

.task-item--warning {
    border-left-color: var(--toast-warning);
}

.task-item--never {
    border-left-color: var(--text-muted);
}

.task-item__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
}

.task-item__content {
    flex: 1;
    min-width: 0;
}

.task-item__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.task-item__name {
    font-weight: 500;
    color: var(--text-light);
    font-size: 0.9375rem;
}

.task-item__error-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: rgba(var(--status-error-rgb), 0.15);
    color: var(--status-error);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.task-item__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.task-item__frequency {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.task-item__last-run {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.task-item__countdown {
    flex-shrink: 0;
    text-align: right;
    min-width: 5rem;
}

.task-countdown {
    font-size: 1.125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
}

.task-countdown--expired {
    color: var(--status-error);
}

.task-countdown--pending {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.task-countdown-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.125rem;
}

/* Responsive */
@media (max-width: 768px) {
    .task-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .task-item__countdown {
        width: 100%;
        text-align: left;
    }
    
    .task-item__meta {
        flex-wrap: wrap;
    }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_tile-preview.css (1.66 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* Preview de la tuile */
.tile-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200px;
    min-height: 180px;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 2px solid var(--border-light);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    transition: all 0.2s;
}

.tile-preview:hover {
    transform: translateY(-2px);
    background-color: rgba(var(--color-accent-rgb), 0.20);
    border-color: rgba(var(--color-accent-rgb), 0.65);
    box-shadow: var(--shadow-strong), 0 0 0 2px rgba(var(--color-accent-rgb), 0.40);
}

.tile-preview__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
}

.tile-preview__icon i {
    font-size: 2.5rem;
    color: var(--text-muted);
}

.tile-preview__icon img,
.tile-preview__icon svg {
    width: 50px;
    height: 50px;
}

.tile-preview__icon svg {
    stroke: var(--color-secondary);
    fill: none;
    stroke-width: 2;
}

.tile-preview:hover .tile-preview__icon svg {
    stroke: #fff;
}

.tile-preview__title {
    font-weight: 700;
    font-size: 18px;
    color: var(--text-main);
    text-align: center;
    word-break: break-word;
}

.tile-preview:hover .tile-preview__title {
    color: #fff;
}

/* Icônes preview : blanc en dark, bleu foncé en light */
.tile-preview__icon img {
  filter: brightness(0) invert(1);
}

[data-theme="light"] .tile-preview__icon img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(47%) saturate(800%) hue-rotate(210deg);
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_toast.css (5.41 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Composant Toast
   Dark navy #1a1a55 + accent coloré par variant
   =============================== */

/* ── Container ───────────────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  z-index: 12000;
  pointer-events: none;
}

.toast-container--top-center    { top: var(--toast-offset-top, 16px); }
.toast-container--top-right     { top: var(--toast-offset-top, 16px); right: 16px; left: auto; transform: none; align-items: flex-end; }
.toast-container--bottom-center { top: auto; bottom: var(--toast-offset-bottom, 16px); }
.toast-container--bottom-right  { top: auto; bottom: 16px; right: 16px; left: auto; transform: none; align-items: flex-end; }

/* ── Base toast ──────────────────────────────────────────────────────────── */
.toast {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  max-width: min(90vw, 420px);
  padding: 12px 18px 14px;
  border-radius: 14px;
  background: #1a1a55;
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 12px 32px rgba(0,0,66,.45), 0 2px 8px rgba(0,0,0,.2);
  opacity: 0;
  transform: translateY(-10px) scale(.97);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* ── Variants — seul --t-color change ───────────────────────────────────── */
.toast--success { --t-color: #4ade80; background: #1a1a55; box-shadow: 0 12px 32px rgba(0,0,66,.45), 0 0 20px rgba(74,222,128,.15); }
.toast--error   { --t-color: #f87171; background: #1a1a55; box-shadow: 0 12px 32px rgba(0,0,66,.45), 0 0 20px rgba(248,113,113,.15); }
.toast--warning { --t-color: #fbbf24; background: #1a1a55; box-shadow: 0 12px 32px rgba(0,0,66,.45), 0 0 20px rgba(251,191,36,.15); }
.toast--info    { --t-color: #60a5fa; background: #1a1a55; box-shadow: 0 12px 32px rgba(0,0,66,.45), 0 0 20px rgba(96,165,250,.15); }

/* ── Icône ───────────────────────────────────────────────────────────────── */
.toast__icon {
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--t-color);
  filter: drop-shadow(0 0 4px var(--t-color));
}

/* ── Message ─────────────────────────────────────────────────────────────── */
.toast__message {
  flex: 1 1 auto;
  color: rgba(255,255,255,.92);
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ── Barre de progression ────────────────────────────────────────────────── */
.toast__progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--t-color);
  opacity: .55;
  transform-origin: left;
  animation: toast-progress linear forwards;
}

@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── Animations entrée/sortie ────────────────────────────────────────────── */
.toast-container--bottom-center .toast,
.toast-container--bottom-right .toast {
  transform: translateY(10px) scale(.97);
}
.toast-container--bottom-center .toast.is-visible,
.toast-container--bottom-right .toast.is-visible {
  transform: translateY(0) scale(1);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 48rem) {
  .toast { max-width: calc(100vw - 32px); padding: 10px 14px 13px; font-size: .875rem; }
  .toast-container--top-right,
  .toast-container--bottom-right { left: 50%; right: auto; transform: translateX(-50%); align-items: center; }
}

/* ── Accessibilité ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; transform: none !important; }
  .toast__progress { animation: none; }
}

/* ── Legacy ──────────────────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: var(--toast-offset-top, 16px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  z-index: 12000;
  pointer-events: none;
}
.toast, .toast-container, #toast-container, #toast, #toast-root { z-index: 12000 !important; }


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 3-components/_toggle-switch.css (1.24 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ef4444; /* Rouge quand désactivé */
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background: #22c55e; /* Vert quand activé */
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.toggle-switch.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle-switch.disabled .toggle-slider {
    cursor: not-allowed;
}

/* Toggle dans un contexte label inline */
.toggle-switch-row {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

.toggle-switch-row__label {
    font-size: .82rem;
    color: #475569;
    user-select: none;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 4-layout/_footer.css (5.30 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Layout Footer
   Footers de page avec variantes
   =============================== */

/* ===============================
   Footer simple (legacy/basique)
   =============================== */

.footer {
  max-width: 1280px;
  margin: 10px auto 0;
  padding: 0 20px;
}

.footer .logout {
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
  transition: color .2s ease;
}

.footer .logout:hover {
  color: var(--text-primary);
}

/* ===============================
   Site Footer (moderne, bulle)
   =============================== */

/* Container pleine largeur, poussé en bas */
.site-footer {
  width: 100%;
  margin-top: auto;
  background: transparent;
}

/* Rail interne centré */
.footer-rail {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0; /* Intentionnel : bulle collée en bas à droite */
  display: flex;
  justify-content: flex-end;
}

/* Bulle — toujours sur fond sombre (identique au header) */
.footer-bubble {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 12px;
  background: var(--color-primary);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px 0 0 0; /* Intentionnel : arrondi uniquement top-left */
  color: #ffffff;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4), -2px 0 12px rgba(0, 0, 0, 0.2);
  transition: opacity .25s ease, filter .25s ease;
}

.footer-bubble p,
.footer-bubble span {
  color: inherit;
}

[data-theme="light"] .footer-bubble {
  background: var(--color-primary);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: 0 -2px 12px rgba(0, 0, 66, 0.15);
}

[data-theme="light"] .footer-bubble p,
[data-theme="light"] .footer-bubble span {
  color: #ffffff;
}

[data-theme="light"] .footer-bubble a {
  color: var(--color-accent);
  border-bottom-color: rgba(59, 79, 217, 0.3);
}

.footer-bubble:hover {
  filter: brightness(1.15);
}

.footer-bubble .sep {
  margin: 0 8px;
  opacity: .7;
}

.footer-bubble a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
  transition: border-bottom-color .2s ease;
}

.footer-bubble a:hover {
  border-bottom-color: #fff;
  color: #fff;
}

/* ===============================
   Variantes de style
   =============================== */

/* Centré */
.site-footer--centered .footer-rail {
  justify-content: center;
}

.site-footer--centered .footer-bubble {
  border-radius: 14px 14px 0 0;
}

/* Fond sombre */
.site-footer--dark {
  background: var(--bg-accent);
  border-top: 1px solid var(--footer-bubble-border);
}

.site-footer--dark .footer-bubble {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .08);
}

/* Minimal (pas de bulle, juste texte) */
.site-footer--minimal .footer-bubble {
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: .7;
}

.site-footer--minimal .footer-bubble:hover {
  opacity: 1;
}

/* ===============================
   Footer avec colonnes
   =============================== */

.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 20px;
}

.footer-column h4 {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-on-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-column li {
  margin-bottom: 0.5rem;
}

.footer-column a {
  color: var(--text-light);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color .2s ease;
}

.footer-column a:hover {
  color: #fff;
}

/* ===============================
   Footer sticky (toujours visible)
   =============================== */

.site-footer--sticky {
  position: sticky;
  bottom: 0;
  z-index: 100;
}

/* ===============================
   Copyright / Mentions légales
   =============================== */

.footer-copyright {
  padding: 1rem 20px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-light);
  opacity: 0.7;
  line-height: 1.5;
}

.footer-copyright a {
  color: inherit;
  text-decoration: underline;
  transition: opacity .2s ease;
}

.footer-copyright a:hover {
  opacity: 1;
}

/* ===============================
   Responsive
   =============================== */

@media (max-width: 48rem) {
  .footer-bubble {
    font-size: 11px;
    padding: 6px 10px;
  }

  .footer-bubble .sep {
    margin: 0 4px;
  }

  .footer-columns {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem 20px;
  }

  /* En mobile, centrer la bulle si pas assez d'espace */
  .site-footer:not(.site-footer--centered) .footer-rail {
    justify-content: center;
  }

  .site-footer:not(.site-footer--centered) .footer-bubble {
    border-radius: 14px 14px 0 0;
  }
}

/* ===============================
   Accessibilité
   =============================== */

@media (prefers-reduced-motion: reduce) {
  .footer-bubble,
  .footer .logout,
  .footer-bubble a,
  .footer-column a,
  .footer-copyright a {
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 4-layout/_header.css (10.20 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Layout Header
   En-tête de page avec navigation
   =============================== */

/* ===============================
   Header principal
   =============================== */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--header-height);
  margin: 0;
  padding: 0 24px;
  color: var(--text-light);
  position: relative;
  transition: min-height .2s ease;

  background: var(--header-bg);
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 24px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

/* ===============================
   Logo (gauche)
   =============================== */

.site-header__logo {
  flex: 0 0 auto;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.site-header__brand-img {
  display: block;
  height: clamp(40px, 6.5vw, 65px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: height 0.2s ease;
}

/* Tablette : logo rectangulaire réduit */
@media (max-width: 48rem) {
  .site-header__brand-img {
    height: 44px;
  }
}

/* Mobile : médaillon rond */
@media (max-width: 30rem) {
  .site-header__brand-img {
    height: 70px;
    width: 70px;
    object-fit: cover;
    border-radius: 50%;
  }
}

.site-header__brand-text {
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
}

/* ===============================
   Titre de page (centre)
   =============================== */

.site-header__page-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  font-weight: 700;
  color: var(--header-title-color);
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}

.site-header__page-title i {
  opacity: 0.75;
  margin-right: 6px;
}


@media (max-width: 48rem) {
  .site-header__page-title {
    display: none;
  }
}

/* ===============================
   Actions (droite) : notifications + profil
   =============================== */

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

/* ===============================
   Navigation principale (optionnelle)
   =============================== */

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 auto;
}

.site-header__nav-link {
  padding: 0.5rem 1rem;
  color: var(--text-light);
  text-decoration: none;
  font-weight: 500;
  border-radius: 8px;
  transition: background .2s ease, color .2s ease;
}

.site-header__nav-link:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.site-header__nav-link.is-active {
  background: rgba(var(--color-accent-rgb), .15);
  color: var(--color-accent);
}

/* ===============================
   Search bar dans header (optionnelle)
   =============================== */

.site-header__search {
  flex: 0 1 400px;
  max-width: 400px;
}

@media (max-width: 48rem) {
  .site-header__search {
    flex: 1 1 auto;
    max-width: none;
  }
}

/* ===============================
   Notifications (dropdown)
   =============================== */

.site-header__notif-wrapper {
  position: relative;
}

.site-header__notif-menu {
  position: absolute;
  top: 52px;
  right: 0;
  z-index: 1000;
  display: none;
  min-width: 300px;
  padding: 8px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: var(--shadow-medium);
  animation: dropdown-slide-in .2s ease;
}

.site-header__notif-menu.show {
  display: block;
}

@keyframes dropdown-slide-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-header__notif-title {
  margin: 6px 10px 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.site-header__notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s ease;
}

.site-header__notif-item:hover {
  background: var(--bg-muted);
}

.site-header__notif-sub {
  color: var(--text-muted);
  font-size: 12px;
}

.site-header__notif-dot {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--status-success);
  flex-shrink: 0;
}

/* ===============================
   Profil utilisateur
   =============================== */

.site-header__profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--header-profile-border);
  border-radius: 14px;
  background: var(--header-profile-bg);
  color: #fff;
  transition: background .2s ease;
}

.site-header__profile:hover {
  background: rgba(255, 255, 255, .15);
}

.site-header__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--header-avatar-bg);
  overflow: hidden;
}

.site-header__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-header__avatar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--header-text);
  opacity: 0.9;
}

.site-header__user-info {
  line-height: 1.15;
}

.site-header__email {
  font-size: 13px;
  color: var(--header-text);
  opacity: 0.95;
}

.site-header__role {
  color: var(--header-role-color);
  font-size: 12px;
}

.site-header__logout {
  display: inline-block;
  margin-top: 6px;
  color: var(--color-accent);
  font-size: 0.85rem;
  text-decoration: none;
  transition: text-decoration .2s ease;
}

button.site-header__logout {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.site-header__logout:hover {
  text-decoration: underline;
}

/* ===============================
   Variantes de header
   =============================== */

/* Compact (hauteur réduite) */
.site-header--compact {
  min-height: var(--header-height-compact);
}

.site-header--compact .site-header__brand-img {
  height: 50px;
}

/* Sticky (fixé en haut) */
.site-header--sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
  margin: 0;
  background: var(--bg-main);
  border-bottom: 1px solid var(--header-profile-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

/* Bordered (bordure bottom) */
.site-header--bordered {
  border-bottom: 1px solid var(--header-profile-border);
  padding-bottom: 16px;
}

/* ===============================
   Burger menu (mobile)
   =============================== */

.site-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease;
}

.site-header__burger:hover {
  background: rgba(255, 255, 255, .08);
}

.site-header__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

.site-header__burger span + span {
  margin-top: 6px;
}

/* État ouvert */
.site-header--mobile-open .site-header__burger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.site-header--mobile-open .site-header__burger span:nth-child(2) {
  opacity: 0;
}

.site-header--mobile-open .site-header__burger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Navigation mobile */
.site-header__nav--mobile {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-main);
  padding: 2rem 20px;
  z-index: 999;
  overflow-y: auto;
}

.site-header--mobile-open .site-header__nav--mobile {
  display: block;
  animation: mobile-nav-slide-in .3s ease;
}

@keyframes mobile-nav-slide-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-header__nav--mobile .site-header__nav-link {
  display: block;
  padding: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
}

/* ===============================
   Responsive
   =============================== */

@media (max-width: 48rem) {
  .site-header {
    padding: 0 12px;
  }

  .site-header__actions {
    gap: 6px;
  }

  .site-header__brand-text {
    display: none;
  }

  /* Affiche le burger, cache la nav desktop */
  .site-header__burger {
    display: flex;
  }

  .site-header__nav:not(.site-header__nav--mobile) {
    display: none;
  }

  /* Profil simplifié sur mobile */
  .site-header__profile .site-header__user-info {
    display: none;
  }

  .site-header__notif-menu {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    min-width: calc(100vw - 32px);
  }
}

/* ===============================
   Bouton toggle thème (lune / soleil)
   =============================== */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: rotate(15deg);
}

.theme-toggle i {
  font-size: 0.9rem;
}

/* ===============================
   Accessibilité
   =============================== */

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__profile,
  .site-header__nav-link,
  .site-header__notif-menu,
  .site-header__notif-item,
  .site-header__burger,
  .site-header__burger span,
  .site-header__logout {
    transition: none;
  }

  .site-header__notif-menu,
  .site-header__nav--mobile {
    animation: none;
  }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 4-layout/_sidebar.css (11.31 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   App Shell
   =============================== */

.app-shell {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
}

/* ===============================
   Sidebar
   =============================== */

.app-sidebar {
    flex: 0 0 var(--app-sidebar-width);
    width: var(--app-sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--bg-sidebar);
    border-right: none;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08), 1px 0 0 var(--sidebar-border);
    transition: width 0.25s ease, flex-basis 0.25s ease, background 0.2s ease;
    overflow: visible;
    position: relative;
}

.app-sidebar.is-collapsed {
    flex-basis: var(--app-sidebar-collapsed-width);
    width: var(--app-sidebar-collapsed-width);
}

.app-sidebar__nav {
    flex: 1;
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
}
.app-sidebar__nav::-webkit-scrollbar       { width: 3px; }
.app-sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.app-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
.app-sidebar__nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }

.app-sidebar__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.app-sidebar__item:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text);
}

.app-sidebar__item.is-active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 600;
}

.app-sidebar__icon {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.95rem;
}

.app-sidebar__label {
    opacity: 1;
    transition: opacity 0.15s ease;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar.is-collapsed .app-sidebar__label {
    opacity: 0;
    pointer-events: none;
}

/* ===============================
   Séparateurs de catégorie
   =============================== */

.app-sidebar__category {
    padding: 0.6rem 0.75rem 0.2rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.app-sidebar__category-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sidebar-category-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.app-sidebar.is-collapsed .app-sidebar__category {
    padding: 0.5rem 0 0.1rem;
}

.app-sidebar.is-collapsed .app-sidebar__category-label {
    opacity: 0;
}

/* Toggle tab — languette collée sur le bord droit du sidebar */
.app-sidebar__tab {
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
    width: 14px;
    height: 52px;
    border: 1px solid var(--sidebar-border);
    border-left: none;
    border-radius: 0 6px 6px 0;
    background: var(--bg-sidebar);
    color: var(--sidebar-category-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: color 0.15s ease;
}

.app-sidebar__tab:hover {
    color: var(--sidebar-text);
}

.app-sidebar__tab i {
    font-size: 0.6rem;
    transition: transform 0.25s ease;
    display: block;
}

/* Rotation fluide de la flèche sidebar */
.app-sidebar.is-collapsed #sidebarChevron {
    transform: rotate(180deg);
}

/* ===============================
   Bouton parent (Administration)
   =============================== */

.app-sidebar__item--parent {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

.app-sidebar__submenu-chevron {
    margin-left: auto;
    font-size: 0.6rem;
    opacity: 0.4;
    flex-shrink: 0;
    transition: transform 0.2s ease, opacity 0.15s ease;
}

.app-sidebar__item--parent:hover .app-sidebar__submenu-chevron,
.app-sidebar__item--parent.is-active .app-sidebar__submenu-chevron {
    opacity: 0.8;
}

.app-sidebar__submenu-chevron.is-rotated {
    transform: rotate(-180deg);
}

/* ===============================
   Sous-menu
   =============================== */

.app-sidebar__submenu {
    max-height: 0;
    overflow: hidden;
    flex-shrink: 0;
    transition: max-height 0.25s ease;
}

.app-sidebar__submenu.is-open {
    max-height: 320px;
}

.app-sidebar.is-collapsed .app-sidebar__submenu {
    max-height: 0 !important;
}

.app-sidebar.is-collapsed .app-sidebar__submenu-chevron {
    display: none;
}

.app-sidebar__subitem {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.75rem 0.45rem 2rem;
    border-radius: 8px;
    color: var(--sidebar-subitem-text);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s ease, color 0.15s ease;
}

.app-sidebar__subitem:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text);
}

.app-sidebar__subitem.is-active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 600;
}

.app-sidebar.is-collapsed .app-sidebar__subitem {
    opacity: 0;
    pointer-events: none;
}

/* ===============================
   Icônes image (tuiles)
   =============================== */

.app-sidebar__icon--img {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-sidebar__tile-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: opacity 0.15s ease;
}

[data-theme="light"] .app-sidebar__tile-icon {
    filter: brightness(0) saturate(100%) invert(13%) sepia(47%) saturate(800%) hue-rotate(210deg);
}

.app-sidebar__item:hover .app-sidebar__tile-icon,
.app-sidebar__item.is-active .app-sidebar__tile-icon {
    opacity: 0.9;
}

/* ===============================
   Footer pinné en bas-droite sur les pages app-shell
   =============================== */

.app-shell ~ .site-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    width: auto;
    margin-top: 0;
    z-index: 50;
}

.app-shell ~ .site-footer .footer-rail {
    max-width: none;
    padding: 0;
}

/* ===============================
   Main content area
   =============================== */

.app-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding-bottom: 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-accent-rgb), .3) transparent;
}

/* Pages avec un seul panel (ou panel--full-width explicite) : layout fixe, scroll interne
   Note : .content-body > sélectionne uniquement les enfants directs — évite de déclencher
   le comportement sur des pages où panel--full-width est imbriqué (ex : supervision) */
.app-main:has(.content-body > .panel--full-width),
.app-main:has(.content-body > .panel:only-child) {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height, 80px));
    overflow: hidden;
    padding-bottom: 0;
}
.app-main:has(.content-body > .panel--full-width) .content-body,
.app-main:has(.content-body > .panel:only-child) .content-body {
    display: flex;
    flex-direction: column;
}

/* Le panel unique enfant s'étire comme panel--full-width */
.content-body > .panel:only-child {
    flex: 1;
    min-height: 0;
}
.app-main::-webkit-scrollbar       { width: 4px; }
.app-main::-webkit-scrollbar-track { background: transparent; }
.app-main::-webkit-scrollbar-thumb { background: rgba(var(--color-accent-rgb), .3); border-radius: 2px; }
.app-main::-webkit-scrollbar-thumb:hover { background: rgba(var(--color-accent-rgb), .6); }

/* ===============================
   Content header (titre + actions)
   =============================== */

.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem;
    gap: 1rem;
    flex-shrink: 0;
}

.content-header__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-light);
}

.content-header__title i {
    opacity: 0.6;
    font-size: 1rem;
}

.content-header__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--sidebar-hover-bg);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.content-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Compteur générique dans les content-header (N / total élément(s)) */
.page-count {
    font-size: .82rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.page-count strong {
    color: var(--text-light);
}

/* ===============================
   Content body
   =============================== */

.content-body {
    flex: 1;
    padding: 0 1.5rem 3rem;
    min-height: 0;
}

/* ===============================
   Responsive
   =============================== */

/* ===============================
   Titre de section — réutilisable partout
   =============================== */

.section-title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.15);
}

/* ===============================
   App Topbar — composant repliable (filtres, recherche)
   Utilisé sur users, logs, tarifs et toute page avec filtres en haut
   =============================== */

.app-topbar {
  background: #1F215C;
  border-bottom: 1px solid rgba(255,255,255,.12);
  overflow: visible;
}

.app-topbar-slide {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease;
}

.app-topbar--collapsed .app-topbar-slide {
  grid-template-rows: 0fr;
}

.app-topbar__content {
  overflow: hidden;
  min-height: 0;
  padding: 1rem 1.5rem 0;
  transition: padding-top 0.25s ease;
  font-size: .8rem;
}

.app-topbar:not(.app-topbar--collapsed) .app-topbar__content {
  overflow: visible;
}

.app-topbar--collapsed .app-topbar__content {
  padding-top: 0;
  pointer-events: none;
}

.app-topbar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 14px;
  margin: -1px auto -1.25rem;
  background: #1F215C;
  border: 1px solid rgba(255,255,255,.15);
  border-top: none;
  border-radius: 0 0 6px 6px;
  cursor: pointer;
  color: rgba(255,255,255,.5);
  transition: color .2s, background .2s;
  position: relative;
  z-index: 10;
}

.app-topbar-toggle:hover i {
  color: #fff;
  opacity: 1;
}

.app-topbar-toggle i {
  font-size: .65rem;
  opacity: .5;
  transition: transform 0.25s ease, opacity 0.15s ease;
}

.app-topbar-toggle.is-collapsed i { transform: rotate(180deg); }

/* Wrapper topbar + toggle comme un seul flex item */
.app-topbar-wrap { flex-shrink: 0; }

@media (max-width: 48rem) {
    .app-sidebar {
        display: none;
    }
}


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 4-layout/_page.css (7.63 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Layout Page
   Structure globale des pages
   =============================== */

/* ===============================
   Sticky footer layout
   =============================== */

html,
body {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

main,
.page-main {
  flex: 1 0 auto;
}

/* ===============================
   Container
   =============================== */

.container {
  max-width: var(--container-max-width);
  margin: 0; /* ← Retire 'auto' */
  padding: var(--container-padding);
  width: 100%; /* ← Ajoute cette ligne pour forcer la largeur complète */
}

/* Container fluide (pleine largeur) */
.container--fluid {
  max-width: none;
}

/* Container étroit */
.container--narrow {
  max-width: 800px;
}

/* Container large */
.container--wide {
  max-width: 1600px;
}

/* Breakout : contenu qui sort du container */
.container--breakout {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* ===============================
   Page title
   =============================== */

.page-title {
  margin: 0 20px;
  padding: .75rem 1.25rem;
  background: var(--bg-accent);
  border-radius: .75rem;
  color: var(--text-on-primary);
  font-size: clamp(1.625rem, 3vw, 2.625rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 .25rem .5rem rgba(var(--color-accent-rgb), .6);
}

/* Variantes de page-title */
.page-title--simple {
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
  padding: 1rem 0;
}

.page-title--bordered {
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
  border-bottom: 3px solid var(--color-accent);
  border-radius: 0;
  padding-bottom: 1rem;
}

.page-title--left {
  text-align: left;
}

.page-title--right {
  text-align: right;
}

/* ===============================
   Page content
   =============================== */

.page-content {
  padding: var(--container-padding) 0;
}

/* ===============================
   Page sections
   =============================== */

.page-section {
  margin-bottom: var(--page-section-spacing);
}

.page-section + .page-section {
  margin-top: var(--page-section-spacing);
}

.page-section__header {
  margin-bottom: 1.5rem;
}

.page-section__title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.page-section__description {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ===============================
   Page grid
   =============================== */

.page-grid {
  display: grid;
  gap: 1.5rem;
}

/* 2 colonnes */
.page-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* 3 colonnes */
.page-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* 4 colonnes */
.page-grid--4col {
  grid-template-columns: repeat(4, 1fr);
}

/* Auto-fit responsive */
.page-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* ===============================
   Layouts avec sidebar
   =============================== */

.page-layout {
  display: grid;
  gap: 2rem;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--container-padding);
}

/* Sidebar gauche */
.page-layout--sidebar-left {
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-areas: "sidebar content";
}

.page-layout--sidebar-left .page-sidebar {
  grid-area: sidebar;
}

.page-layout--sidebar-left .page-content-main {
  grid-area: content;
}

/* Sidebar droite */
.page-layout--sidebar-right {
  grid-template-columns: 1fr var(--sidebar-width);
  grid-template-areas: "content sidebar";
}

.page-layout--sidebar-right .page-sidebar {
  grid-area: sidebar;
}

.page-layout--sidebar-right .page-content-main {
  grid-area: content;
}

/* Sidebar sticky */
.page-sidebar--sticky {
  position: sticky;
  top: 20px;
  align-self: start;
}

.page-content-main {
  min-width: 0; /* Permet au contenu de shrink correctement */
}

/* ===============================
   Page states
   =============================== */

/* Loading */
.page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--text-muted);
}

.page-loading::before {
  content: "";
  width: 48px;
  height: 48px;
  margin-right: 1rem;
  border: 4px solid rgba(var(--color-accent-rgb), .2);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: page-loading-spin 0.8s linear infinite;
}

@keyframes page-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Empty state */
.page-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--text-muted);
}

.page-empty__icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.3;
}

.page-empty__title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.page-empty__description {
  margin: 0 0 1.5rem;
  font-size: 1rem;
}

/* Error state */
.page-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--status-error);
}

.page-error__icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
}

.page-error__title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.page-error__description {
  margin: 0 0 1.5rem;
  color: var(--text-muted);
  font-size: 1rem;
}

/* ===============================
   Spacing utilities
   =============================== */

.page-spacing--none {
  --page-section-spacing: 0;
}

.page-spacing--sm {
  --page-section-spacing: 1rem;
}

.page-spacing--md {
  --page-section-spacing: 2rem;
}

.page-spacing--lg {
  --page-section-spacing: 3rem;
}

.page-spacing--xl {
  --page-section-spacing: 4rem;
}

/* ===============================
   Responsive
   =============================== */

@media (max-width: 68.75rem) {
  /* Grilles passent en 1 colonne */
  .page-grid--2col,
  .page-grid--3col,
  .page-grid--4col {
    grid-template-columns: 1fr;
  }

  /* Layouts sidebar passent en 1 colonne */
  .page-layout--sidebar-left,
  .page-layout--sidebar-right {
    grid-template-columns: 1fr;
    grid-template-areas: "content" "sidebar";
  }

  .page-sidebar--sticky {
    position: static;
  }
}

@media (max-width: 48rem) {
  .container {
    padding: var(--container-padding-mobile);
  }

  .page-title {
    margin: 0 var(--container-padding-mobile);
    font-size: clamp(1.25rem, 5vw, 1.625rem);
    padding: 0.625rem 1rem;
  }

  .page-content {
    padding: var(--container-padding-mobile) 0;
  }

  .page-layout {
    padding: var(--container-padding-mobile);
    gap: 1.5rem;
  }

  .page-grid {
    gap: 1rem;
  }

  .page-empty,
  .page-error,
  .page-loading {
    min-height: 300px;
    padding: 2rem 1rem;
  }

  .page-empty__icon,
  .page-error__icon {
    font-size: 3rem;
  }
}

/* ===============================
   Accessibilité
   =============================== */

@media (prefers-reduced-motion: reduce) {
  .page-loading::before {
    animation: none;
    border: 4px solid var(--color-accent);
    border-top-color: transparent;
  }
}



/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 4-layout/_impersonation.css (2.46 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Bannière d'impersonation
   =============================== */

.impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.impersonation-banner__content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.impersonation-banner__content i {
    font-size: 1.25rem;
}

.impersonation-banner__text {
    font-size: 1rem;
}

.impersonation-banner__text strong {
    font-weight: 700;
}

.impersonation-banner__separator {
    opacity: 0.5;
}

.impersonation-banner__original {
    opacity: 0.9;
    font-size: 0.9rem;
}

.impersonation-banner__stop {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.impersonation-banner__stop:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.impersonation-banner__stop:active {
    transform: translateY(0);
}

/* Décaler le header quand la bannière est active */
body.is-impersonating .site-header {
    margin-top: 5.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    body.is-impersonating .site-header {
        margin-top: 8.5rem; /* Plus d'espace sur mobile car la bannière prend 2 lignes */
    }
}

/* Responsive */
@media (max-width: 768px) {
    .impersonation-banner {
        flex-direction: column;
        padding: 0.75rem 1rem;
    }
    
    .impersonation-banner__content {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .impersonation-banner__separator {
        display: none;
    }
    
    .impersonation-banner__stop {
        width: 100%;
        justify-content: center;
    }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_dashboard.css (9.07 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Page Dashboard
   Grille de tuiles/modules
   =============================== */

/* ===============================
   Section catégorie
   =============================== */

.page-container {
  padding-top: 2rem;
}

.dashboard-category {
  width: 100%;
  margin-bottom: 2.5rem;
  padding: 0 1.5rem;
}

.dashboard-category:last-child {
  margin-bottom: 0;
}

/* .dashboard-category__title → alias vers .section-title (global dans _sidebar.css) */
.dashboard-category__title { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; }
.dashboard-category__title::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.15); }

/* ===============================
   Grille de tuiles
   =============================== */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 220px));
  justify-content: start;
  gap: var(--tile-gap);
  width: 100%;
  --tile-h: 120px;
}

/* ===============================
   Tuile (module cliquable)
   =============================== */

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--tile-h);
  padding: 10px 12px;
  background-color: var(--bg-panel);
  background-image: none;
  border: 1px solid var(--border-panel);
  border-radius: 20px;
  box-shadow: var(--shadow-panel);
  text-align: center;
  text-decoration: none;
  color: var(--color-secondary);
  overflow: hidden;
  cursor: pointer;
  
  /* Optimisations performances */
  will-change: transform, box-shadow, background-color;
  backface-visibility: hidden;
  transform: translateZ(0);
  
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
  
  /* Animation d'apparition */
  animation: tile-fade-in 0.4s ease;
}

/* Délais d'animation gérés via style inline (PHP) — s'adapte à n'importe quel nombre de tuiles */

@keyframes tile-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateZ(0);
  }
  to {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
}

/* Effet de lueur décorative */
.tile::before {
  content: "";
  position: absolute;
  inset: -60% -60% auto auto;
  width: 160px;
  height: 160px;
  background: radial-gradient(closest-side, var(--tile-glow-color), transparent 70%);
  opacity: 0.7;
  transform: rotate(25deg);
  pointer-events: none;
}

/* ===============================
   États hover/focus
   =============================== */

.tile:hover,
.tile:focus-visible {
  transform: translateY(-2px);
  background-image: none;
  background-color: rgba(var(--color-accent-rgb), 0.20);
  border-color: rgba(var(--color-accent-rgb), 0.65);
  color: var(--text-on-accent);
  box-shadow:
    var(--shadow-strong),
    0 0 0 2px rgba(var(--color-accent-rgb), 0.40);
}

.tile:hover .tile__title,
.tile:focus-visible .tile__title {
  color: var(--text-on-accent);
}

.tile:hover .tile__icon svg,
.tile:focus-visible .tile__icon svg {
  stroke: var(--text-on-accent);
}

.tile:hover .tile__icon img,
.tile:focus-visible .tile__icon img {
  filter: brightness(0) invert(1);
}

/* En mode clair, hover avec fond accent plus opaque pour que le texte blanc soit lisible */
[data-theme="light"] .tile:hover,
[data-theme="light"] .tile:focus-visible {
  background-color: rgba(var(--color-accent-rgb), 0.75);
  color: var(--text-on-accent);
}

.tile:hover .tile__actions,
.tile:focus-visible .tile__actions {
  opacity: 1;
  pointer-events: auto;
}

.tile:focus,
.tile:active {
  outline: 0;
  background-color: var(--bg-panel);
  border-color: rgba(var(--color-accent-rgb), .35);
  box-shadow:
    var(--shadow-strong),
    0 0 0 2px rgba(var(--color-accent-rgb), .18);
}

/* Supprime le tap highlight sur mobile */
.tile,
.tile * {
  -webkit-tap-highlight-color: transparent;
}

/* ===============================
   Éléments de la tuile
   =============================== */

/* Icône */
.tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  transition: background-color .18s ease, border-color .18s ease;
}

.tile__icon img {
  width: 38px;
  height: 38px;
  display: block;
  filter: var(--icon-filter-panel);
}

.tile__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-panel);
  fill: none;
  stroke-width: 2;
}

/* Icônes FontAwesome dans les tuiles */
.tile__icon i {
  font-size: 2rem;
  color: var(--text-panel);
  line-height: 1;
}

.tile:hover .tile__icon i,
.tile:focus-visible .tile__icon i {
  color: var(--text-on-accent);
}

/* Titre */
.tile__title {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--text-panel);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Badge de notification */
.tile__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  background: var(--status-error);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 12px;
  z-index: 2;
}

/* Actions au hover */
.tile__actions {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 2;
}

/* ===============================
   Variantes de tuile
   =============================== */

/* Compact (plus petit) */
.tile--compact {
  min-height: calc(var(--tile-h) * 0.75);
  padding: 10px;
}

.tile--compact .tile__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}

.tile--compact .tile__icon img {
  width: 40px;
  height: 40px;
}

.tile--compact .tile__title {
  font-size: 16px;
}

/* Large (plus grand) */
.tile--large {
  min-height: calc(var(--tile-h) * 1.5);
  padding: 20px;
}

.tile--large .tile__icon {
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
}

.tile--large .tile__icon img {
  width: 70px;
  height: 70px;
}

.tile--large .tile__title {
  font-size: 24px;
}

/* Featured (mise en avant) */
.tile--featured {
  border: 2px solid var(--color-accent);
  background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.05), transparent);
  box-shadow: 
    var(--shadow-medium),
    0 0 0 1px rgba(var(--color-accent-rgb), 0.2);
}

.tile--featured .tile__badge {
  background: var(--color-accent);
}

/* ===============================
   États de tuile
   =============================== */

/* Désactivé */
.tile.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Chargement */
.tile.is-loading {
  position: relative;
  pointer-events: none;
}

.tile.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid rgba(var(--color-accent-rgb), .2);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: tile-spin 0.8s linear infinite;
  z-index: 10;
}

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

.tile.is-loading .tile__icon,
.tile.is-loading .tile__title {
  opacity: 0.3;
}

/* Sélectionné */
.tile.is-selected {
  background-color: rgba(var(--color-accent-rgb), 0.15);
  border-color: var(--color-accent);
  box-shadow:
    var(--shadow-medium),
    0 0 0 2px rgba(var(--color-accent-rgb), 0.3);
}

.tile.is-selected .tile__title {
  color: var(--color-accent);
}

/* ===============================
   Responsive
   =============================== */

@media (max-width: 56.25rem) {
  .dashboard-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 190px));
    gap: calc(var(--tile-gap) * 0.75);
  }

  .dashboard-category {
    padding: 0 1rem;
  }
}

@media (max-width: 45rem) {
  .dashboard-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .tile {
    padding: 10px;
  }

  .tile__icon {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
  }

  .tile__icon img {
    width: 32px;
    height: 32px;
  }

  .tile__title {
    font-size: 14px;
  }
}

@media (max-width: 30rem) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-category {
    padding: 0 0.75rem;
  }
}

/* ===============================
   Accessibilité
   =============================== */

@media (prefers-reduced-motion: reduce) {
  .tile,
  .tile__icon,
  .tile__actions {
    transition: none;
    animation: none;
  }

  .tile.is-loading::after {
    animation: none;
    border: 3px solid var(--color-accent);
    border-top-color: transparent;
  }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_login.css (7.69 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Page Login
   Page de connexion scopée
   =============================== */

/* ===============================
   Container de la page
   =============================== */

.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--color-primary);
  color: var(--text-on-primary);
}

/* ===============================
   Logo
   =============================== */

.login__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}

.login__logo img {
  display: block;
  width: min(800px, 90vw);
  height: auto;
}

/* ===============================
   Container du formulaire
   =============================== */

.login__container {
  width: 100%;
  max-width: 400px;
  padding: 1.5rem;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* Textes sombres à l'intérieur du container blanc */
.login__container .login__title,
.login__container .login__label,
.login__container .login__checkbox label,
.login__container .login__link {
  color: #1a1d4a;
}

.login__container .login__link:hover {
  color: #3b4fd9;
}

/* ===============================
   Titre
   =============================== */

.login__title {
  margin: 0 0 1.5rem;
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}

/* ===============================
   Formulaire
   =============================== */

.login__form {
  display: flex;
  flex-direction: column;
}

/* Champ de formulaire */
.login__field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.login__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.login__input {
  width: 100%;
  padding: 0.625rem;
  border: 1px solid #AA1429;
  border-radius: 8px;
  background: #f7f8ff;
  color: #1a1d4a;
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.login__input::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.login__input:focus {
  border-color: #AA1429;  /* Bordure rouge */
  background: #fff;
  outline: none;  /* Retire le outline bleu par défaut */
  box-shadow: 0 0 0 3px rgba(170, 20, 41, 0.2);  /* Halo rouge */
}

/* États de validation */
.login__field.is-valid .login__input {
  border-color: var(--status-success);
  padding-right: 2.5rem;
}

.login__field.is-valid::after {
  content: "✓";
  position: absolute;
  right: 1rem;
  top: 2.5rem;
  color: var(--status-success);
  font-size: 1.25rem;
  font-weight: 700;
}

.login__field.is-invalid .login__input {
  border-color: var(--status-error);
  padding-right: 2.5rem;
}

.login__field.is-invalid::after {
  content: "✗";
  position: absolute;
  right: 1rem;
  top: 2.5rem;
  color: var(--status-error);
  font-size: 1.25rem;
  font-weight: 700;
}

/* Messages d'erreur */
.login__error {
  margin: 0.25rem 0 0;
  color: var(--status-error);
  font-size: 0.85rem;
  line-height: 1.4;
}

.login__error.is-valid {
  color: var(--status-success);
}

/* ===============================
   Checkbox "Se souvenir"
   =============================== */

.login__checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.login__checkbox input[type="checkbox"] {
  width: auto;
  cursor: pointer;
}

.login__checkbox label {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
}

/* ===============================
   Bouton de soumission
   =============================== */

.login__submit {
  width: 100%;
  padding: 0.625rem;
  margin-top: 0.5rem;
  border: none;
  border-radius: 8px;
  background: #AA1429;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, transform .1s ease;
}

.login__submit:hover {
  background: #FF0000;
  transform: translateY(-1px);
}

.login__submit:active {
  transform: translateY(0);
}

.login__submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.3);
}

/* État de chargement */
.login__form.is-loading .login__submit {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.login__form.is-loading .login__submit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 3px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: login-spin 0.6s linear infinite;
}

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

/* ===============================
   Liens (mot de passe oublié, inscription)
   =============================== */

.login__links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  gap: 1rem;
}

.login__link {
  color: var(--text-primary);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color .2s ease;
}

.login__link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.login__link--forgot {
  text-align: right;
}

.login__link--register {
  text-align: left;
}

/* ===============================
   Messages de succès (utiliser toast plutôt)
   =============================== */

.login__success {
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
  background: rgba(var(--status-success-rgb), 0.1);
  border: 1px solid var(--status-success);
  border-radius: 8px;
  color: var(--status-success);
  font-size: 0.875rem;
  text-align: center;
}

/* ===============================
   Variantes de thème
   =============================== */

/* Mode clair (fond blanc) */
.login-page--light {
  background: #f5f7fa;
}

.login-page--light .login__container {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.login-page--light .login__title,
.login-page--light .login__label,
.login-page--light .login__input,
.login-page--light .login__checkbox label,
.login-page--light .login__link {
  color: #1f2937;
}

.login-page--light .login__input {
  background: #fff;
  border-color: #d1d5db;
}

.login-page--light .login__input::placeholder {
  color: #9ca3af;
}

/* Mode sombre (par défaut) */
.login-page--dark {
  background: var(--bg-main);
}

/* ===============================
   Responsive
   =============================== */

@media (max-width: 48rem) {
  .login-page {
    padding: 1rem 0.75rem;
  }

  .login__logo {
    max-width: 95vw;
    margin-bottom: 1.5rem;
  }

  .login__container {
    padding: 1.5rem;
  }

  .login__title {
    font-size: 1.25rem;
  }

  .login__links {
    flex-direction: column;
    gap: 0.75rem;
  }

  .login__link--forgot,
  .login__link--register {
    text-align: center;
  }
}

@media (max-width: 30rem) {
  .login__container {
    padding: 1.25rem;
  }

  .login__input {
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
  }

  .login__submit {
    padding: 0.75rem 1.25rem;
  }
}

/* ===============================
   Accessibilité
   =============================== */

@media (prefers-reduced-motion: reduce) {
  .login__input,
  .login__submit,
  .login__link {
    transition: none;
  }

  .login__submit:hover {
    transform: none;
  }

  .login__form.is-loading .login__submit::after {
    animation: none;
    border: 3px solid #fff;
    border-top-color: transparent;
  }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_logs.css (11.87 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Page Historique des actions
   =============================== */

/* ── Alignements colonnes ────────────────────────────────────────────────── */
.data-table .col-concerned,
.data-table th:has(.sort-btn[data-sort="user"]) { text-align: left; }

/* ── Topbar filtres ──────────────────────────────────────────────────────── */
.logs-filters-bar {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 1rem;
}

.logs-topbar-toggle { margin-bottom: -16px; }

/* ── Header compteur ────────────────────────────────────────────────────── */
.logs-header-right {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.logs-count {
    font-size: .82rem;
    color: var(--text-muted);
}

/* ═══════════════════════════════
   HEADER & STATS
   ═══════════════════════════════ */

.panel__stats {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.stat-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-hover);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-light);
}

.stat-badge i {
    font-size: 1rem;
    opacity: 0.7;
}

.stat-badge span {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-accent);
}

.stat-badge--success span {
    color: var(--color-ok-border);
}

/* ═══════════════════════════════
   TABLEAU
   ═══════════════════════════════ */

/* Colonne date */
.log-date {
    white-space: nowrap;
    min-width: 80px;
}

.log-date__date {
    font-size: .875rem;
    font-weight: 600;
    color: #1e293b;
}

.log-date__time {
    font-size: .78rem;
    color: #94a3b8;
    margin-top: .1rem;
}


/* ═══════════════════════════════
   PREVIEW MINIATURE DE TUILE
   ═══════════════════════════════ */

.tile-preview-mini {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.tile-preview-mini__icon {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; border: 1.5px solid #e2e8f0; border-radius: 6px;
}

.tile-preview-mini__icon i   { font-size: .9rem; color: #94a3b8; }
.tile-preview-mini__icon img { width: 20px; height: 20px; object-fit: contain; }
.tile-preview-mini__icon img[src$=".svg"],
.tile-preview-mini__icon img[src^="data:image/svg"] { filter: brightness(0) saturate(100%); }

.tile-preview-mini__title {
    font-size: .875rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}

/* ═══════════════════════════════
   DÉTAILS DES LOGS
   ═══════════════════════════════ */

.log-details {
    line-height: 1.8;
    font-size: 0.9rem;
}

.log-details strong { color: #1e293b; font-weight: 600; }

.log-details code {
    padding: .1rem .35rem;
    background: #f1f5f9;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: .82rem;
    color: #6366f1;
}

.log-details .badge {
    vertical-align: middle;
}

.log-details .fa-arrow-right {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* ═══════════════════════════════
   COLONNE ACTIONS
   ═══════════════════════════════ */

.log-actions-cell {
    text-align: center;
    vertical-align: middle;
    padding: 0.5rem !important;
}

.log-actions-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

/* Bouton d'annulation — style cohérent avec btn-secondary */
.btn-log-undo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    background: transparent;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.btn-log-undo:hover {
    border-color: var(--color-amber);
    color: var(--color-amber);
    background: rgba(var(--color-amber-rgb), 0.06);
}

/* Badge d'annulation */
.badge-log-undone {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: rgba(var(--color-amber-rgb), 0.15);
    color: var(--color-amber);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

.badge-log-undone i {
    font-size: 0.85rem;
}

/* Bouton "Voir l'origine" */
.btn-goto-original {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(var(--color-accent-rgb), 0.15);
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
    border-radius: 6px;
    color: var(--color-accent);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-goto-original:hover {
    background: rgba(var(--color-accent-rgb), 0.3);
    border-color: var(--color-accent);
    transform: translateX(2px);
}

.btn-goto-original i {
    font-size: 0.75rem;
}

/* ═══════════════════════════════
   ANIMATIONS
   ═══════════════════════════════ */

/* Animation de surbrillance pour le log ciblé */
@keyframes highlight-pulse {
    0% {
        background: rgba(var(--color-accent-rgb), 0.3);
        box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0.5);
    }
    50% {
        background: rgba(var(--color-accent-rgb), 0.5);
        box-shadow: 0 0 0 8px rgba(var(--color-accent-rgb), 0);
    }
    100% {
        background: rgba(var(--color-accent-rgb), 0.3);
        box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0);
    }
}

.log-row.log-highlight {
    animation: highlight-pulse 2s ease-in-out;
}

/* ═══════════════════════════════
   UTILITAIRES
   ═══════════════════════════════ */

.text-muted {
    color: var(--text-muted);
    opacity: 0.7;
}

/* ═══════════════════════════════
   RESPONSIVE
   ═══════════════════════════════ */

@media (max-width: 768px) {
    .panel__stats {
        flex-direction: column;
        width: 100%;
    }
    
    .stat-badge {
        width: 100%;
        justify-content: center;
    }
    
    .btn-log-undo {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
    
    .btn-log-undo span {
        display: none;
    }
}

/* ═══════════════════════════════
   FILTRES DE DATE
   ═══════════════════════════════ */

.filter-date-mode,
.date-input,
.date-range-separator {
    display: none;
}

.date-range-separator {
    color: var(--text-muted);
    font-weight: 600;
}

/* ═══════════════════════════════
   BADGES ENTITÉ & ACTION
   ═══════════════════════════════ */

.badge-entity-user  { background:rgba(99,102,241,.12); color:#6366f1; border:1px solid rgba(99,102,241,.25); }
.badge-entity-tile  { background:rgba(14,165,233,.12); color:#0ea5e9; border:1px solid rgba(14,165,233,.25); }

/* Actions */
.badge-action-created, .badge-action-tile_activated      { background:rgba(22,163,74,.12);  color:#16a34a; border:1px solid rgba(22,163,74,.25); }
.badge-action-deleted, .badge-action-tile_deactivated,
.badge-action-tile_icon_deleted, .badge-action-tile_access_denied { background:rgba(220,38,38,.12); color:#dc2626; border:1px solid rgba(220,38,38,.25); }
.badge-action-updated, .badge-action-update,
.badge-action-tile_updated, .badge-action-tile_icon_renamed,
.badge-action-tile_icon_uploaded                         { background:rgba(99,102,241,.12); color:#6366f1; border:1px solid rgba(99,102,241,.25); }
.badge-action-impersonated                               { background:rgba(245,158,11,.12); color:#f59e0b; border:1px solid rgba(245,158,11,.25); }
.badge-action-impersonation_stopped                      { background:rgba(100,116,139,.12);color:#64748b; border:1px solid rgba(100,116,139,.25); }
.badge-action-tile_access_granted, .badge-action-tile_access_removed { background:rgba(14,165,233,.12); color:#0ea5e9; border:1px solid rgba(14,165,233,.25); }
.badge-action-role_changed, .badge-action-tile_reordered { background:rgba(168,85,247,.12); color:#a855f7; border:1px solid rgba(168,85,247,.25); }

/* ═══════════════════════════════
   COLONNE "CONCERNÉ"
   ═══════════════════════════════ */

.col-concerned { vertical-align: middle; }

.entity-wrapper {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    align-items: flex-start;
}

.entity-details { font-size: .875rem; }

.entity-email {
    opacity: 0.7;
}

.entity-deleted,
.entity-unknown {
    opacity: 0.5;
    font-size: 0.875rem;
}

/* ═══════════════════════════════
   COLONNE ACTIONS
   ═══════════════════════════════ */

.col-actions {
    width: 120px;
}

.text-muted-action {
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0.7;
}

/* ═══════════════════════════════
   FIX STICKY HEADERS (Force absolue)
   ═══════════════════════════════ */

/* Headers sticky */

/* ═══════════════════════════════
   FORCER SVG EN NOIR DANS LES LOGS
   ═══════════════════════════════ */

/* SVG dans les détails de logs */
.log-details img[src$=".svg"],
.log-details img[src^="data:image/svg"] {
    filter: brightness(0) saturate(100%) invert(0%);
}

/* SVG dans les previews de changement d'icône */
.log-details div[style*="border-radius: 8px"] img {
    filter: brightness(0) saturate(100%) invert(0%);
}

/* Bouton annuler désactivé */
.btn-log-undo--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--panel-bg) !important;
    border-color: var(--border-muted) !important;
    color: var(--text-muted) !important;
}

.btn-log-undo--disabled:hover {
    transform: none !important;
    background: var(--panel-bg) !important;
    border-color: var(--border-muted) !important;
}


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_modal-forms.css (2.62 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Layouts de formulaires pour modales
   Classes réutilisables pour structurer les forms
   =============================== */

/* ===============================
   Layouts de grille
   =============================== */

/* 2 colonnes */
.modal-form--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

/* 3 colonnes */
.modal-form--3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 16px;
}

/* Pleine largeur (1 colonne) */
.modal-form--full-width {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

/* Stacked (espacé verticalement) */
.modal-form--stacked {
  display: grid;
  gap: 1rem;
}

/* ===============================
   Éléments de formulaire
   =============================== */

/* Champ qui prend toute la largeur */
.modal-form__field--full {
  grid-column: 1 / -1;
}

/* Label avec en-tête flexible */
.modal-form__label-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.375rem;
}

/* Textarea avec hauteur minimum */
.modal-form__textarea {
  min-height: 120px;
  resize: vertical;
}

/* ===============================
   Layout Taxonomie (cas spécifique)
   =============================== */

.modal-taxo__block {
  margin-bottom: 1.125rem;
}

.modal-taxo__label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Ligne: select + boutons alignés */
.modal-taxo__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  margin-top: 10px;
}

.modal-taxo__row select,
.modal-taxo__row .ui-select {
  flex: 1 1 auto;
  min-width: 260px;
}

.modal-taxo__row button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.modal-taxo__row button:first-of-type {
  margin-left: auto;
}

/* ===============================
   Variantes de spacing
   =============================== */

.modal-form--compact {
  gap: 0.5rem;
}

.modal-form--relaxed {
  gap: 1.5rem 2rem;
}

/* ===============================
   Responsive
   =============================== */

@media (max-width: 37.5rem) {
  /* Toutes les grilles passent en 1 colonne */
  .modal-form--2col,
  .modal-form--3col {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Taxonomie row passe en colonne */
  .modal-taxo__row {
    flex-wrap: wrap;
  }

  .modal-taxo__row select,
  .modal-taxo__row .ui-select {
    flex-basis: 100%;
    min-width: 100%;
  }

  .modal-taxo__row button:first-of-type {
    margin-left: 0;
  }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_supervision.css (6.03 KB) */
/* ───────────────────────────────────────────────────────────────────────── */


/* Top consommateurs - AMÉLIORATION RESPONSIVE */
.analysis-consumers {
  margin: 2rem 0;
}

.analysis-consumers h4 {
  margin: 0 0 1.5rem 0;
  color: #e5e7eb;
  font-size: 1.1rem;
  font-weight: 600;
}

.consumers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1rem;
}

.consumer-card {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  transition: background 0.2s;
}

.consumer-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

.consumer-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.consumer-card__name {
  font-weight: 600;
  color: #e5e7eb;
  font-size: 0.95rem;
}

.consumer-card__badge {
  padding: 0.25rem 0.5rem;
  background: rgba(59, 130, 246, 0.2);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  color: #93c5fd;
}

.consumer-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.consumer-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.consumer-stat__label {
  font-size: 0.75rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.consumer-stat__value {
  font-size: 1.25rem;
  font-weight: 700;
}

.consumer-stat__value--cpu {
  color: #60a5fa;
}

.consumer-stat__value--mem {
  color: #a78bfa;
}

.consumer-stat__max {
  font-size: 0.7rem;
  color: #64748b;
}



@media (max-width: 768px) {
  .panel__header-actions {
    width: 100%;
    gap: 0.5rem;
    flex-wrap: wrap;               /* ← Permet le retour à la ligne */
  }
  
  .btn-icon {
    order: 1;                      /* ← Config en premier */
  }
  
  .uptime-period-selector {
    order: 2;                      /* ← Période ensuite */
    flex: 1 1 100%;                /* ← Prend toute la largeur */
    display: flex;
  }
  
  .uptime-period-selector .period-btn {
    flex: 1;                       /* ← Boutons égaux */
  }
}

@media (min-width: 1400px) {
  .analysis-charts {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .consumers-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Responsive global */
@media (max-width: 768px) {
  .docker-grid {
    grid-template-columns: 1fr;
  }
  
  .vpn-info,
  .real-ip-info {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .ip-info-container {
    flex-direction: column;
  }
}


/* Conteneur des infos IP */
.ip-info-container {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 1rem;
}

/* Info VPN */
.vpn-info {
  padding: 1rem;
  background: rgba(var(--color-accent-rgb), .1);
  border: 1px solid rgba(var(--color-accent-rgb), .2);
  border-radius: .5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vpn-info strong {
  color: var(--text-light);
  font-size: .9rem;
}

.vpn-info code,
.vpn-ip-value {
  background: rgba(0, 0, 0, .3);
  color: #60a5fa;
  padding: 0.25rem 0.5rem;
  border-radius: .375rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .3px;
}

/* Info IP réelle */
.real-ip-info {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .5rem;
}

.real-ip-info strong {
  color: var(--text-light);
  font-size: .9rem;
}

/* Valeurs IP */
.ip-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #60a5fa;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMMANDES SSH
   ═══════════════════════════════════════════════════════════════════════════ */

.ssh-commands-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ssh-command-item {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 1rem;
  transition: all 0.2s ease;
}

.ssh-command-item:hover {
  border-color: rgba(96, 165, 250, 0.3);
  background: rgba(0, 0, 0, 0.4);
}

.ssh-command-item__label {
  color: #60a5fa;
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.ssh-command-item__cmd {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ssh-command-item__cmd code {
  flex: 1;
  color: #34d399;
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .modal--large {
    width: 95%;
    max-height: 90vh;
  }
  
  .config-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .config-tab {
    white-space: nowrap;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
  }
  
  .form-section {
    padding: 1rem;
  }
  
  .ssh-command-item__cmd {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn-copy {
    width: 100%;
  }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_tasks.css (33.26 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Page Centre de Tâches
   =============================== */

/* ── Modale Add/Edit ───────────────────────────────────────────────────────── */

.modal-section__title-icon  { color: #6366f1; margin-right: .35rem; }
.modal-section__title-icon--warn { color: #f59e0b; margin-right: .35rem; }

/* Identité */
.ae-identity-grid           { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: start; }
.ae-category-select         { width: 140px; }
.ae-description             { resize: vertical; margin-top: .4rem; }

/* Planification cron — champs spinners */
.ae-cron-fields             { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; align-items: flex-end; row-gap: .5rem; }
.ae-cron-field              { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.ae-cron-field__label       { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin: 0; }

/* Prévisualisation expression cron */
.ae-cron-preview            { text-align: center; margin-top: .75rem; }
#ae-expr-preview            { font-family: monospace; font-size: .82rem; background: #1e2060; color: #a5b4fc; padding: .25rem .65rem; border-radius: 6px; }
#ae-expr-human              { font-size: .72rem; color: #94a3b8; margin-top: .2rem; }

/* Options crontab */
.ae-cron-options            { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #f1f5f9; align-items: center; }
.ae-cron-option-label       { display: flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .82rem; color: #475569; }
.ae-cron-option-label--text { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: #475569; cursor: default; }
#ae-apply-crontab           { accent-color: #6366f1; }
#ae-cron-user               { width: 120px; padding: .25rem .5rem; font-size: .78rem; font-family: monospace; }
.ae-log-redirect            { margin-top: .4rem; }

/* DOW */
.ae-dow-row                 { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
#ae-dow-btns                { display: flex; gap: .2rem; }

/* Exécution */
.ae-field-label             { font-size: .78rem; color: #64748b; display: block; margin-bottom: .2rem; }
.ae-field-label--mt         { font-size: .78rem; color: #64748b; display: block; margin: .4rem 0 .2rem; }
.ae-monospace               { font-family: monospace; font-size: .78rem; }
.ae-toggles                 { display: flex; gap: 1.5rem; margin-top: .75rem; flex-wrap: wrap; }

/* SSH */
.ae-ssh-fields              { display: flex; flex-direction: column; gap: .4rem; }
.ae-ssh-field               { display: flex; flex-direction: column; gap: .15rem; }
.ae-ssh-field > span        { font-size: .75rem; color: #64748b; }

/* Notifications */
.ae-notif-grid              { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ae-notif-grid--3           { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; margin-top: .4rem; }
.ae-notif-label             { font-size: .75rem; color: #64748b; }
.ae-notif-full-row          { grid-column: 1 / -1; }
.modal-section__title-sub   { font-weight: 400; opacity: .6; }

/* ═══════════════════════════════
   STATISTIQUES GLOBALES
   ═══════════════════════════════ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent) 0%, rgba(102, 126, 234, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-card__icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(102, 126, 234, 0.15);
    border-radius: 10px;
    font-size: 1.5rem;
    color: var(--color-accent);
}

.stat-card--success .stat-card__icon {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.stat-card--error .stat-card__icon {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.stat-card--warning .stat-card__icon {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.stat-card__content {
    flex: 1;
}

.stat-card__value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-light);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-card__label {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ═══════════════════════════════
   FILTRES PAR CATÉGORIE
   ═══════════════════════════════ */

.task-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-light);
    transform: translateY(-1px);
}

.filter-btn--active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(102, 126, 234, 0.15) 100%);
    border-color: rgba(102, 126, 234, 0.6);
    color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

/* ═══════════════════════════════
   CATÉGORIES DE TÂCHES
   ═══════════════════════════════ */

.tasks-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.task-category {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.task-category__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-light);
}

.task-category__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.5rem;
    background: rgba(102, 126, 234, 0.2);
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-accent);
}

/* ═══════════════════════════════
   CARTES DE TÂCHES
   ═══════════════════════════════ */

.task-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.task-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.task-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.25);
}

.task-card--success {
    border-left-color: #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.task-card--error {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.task-card--running {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.task-card--never {
    border-left-color: var(--text-muted);
}

.task-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 0;
}

.task-card__title {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-light);
    line-height: 1.3;
}

.task-card__body {
    flex: 1;
    padding: 0.75rem 1.25rem;
}

.task-card__description {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.task-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.task-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.task-meta i {
    font-size: 0.9rem;
    opacity: 0.7;
}

.task-card__execution {
    padding: 0.875rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    backdrop-filter: blur(5px);
}

.task-execution-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-light);
}

.task-card--success .task-execution-status {
    color: #22c55e;
}

.task-card--error .task-execution-status {
    color: #ef4444;
}

.task-card--running .task-execution-status {
    color: #f59e0b;
}

.task-execution-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.task-card__actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 1.25rem;
}

.btn-task-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-task-action:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-task-action--primary {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(102, 126, 234, 0.15) 100%);
    border-color: rgba(102, 126, 234, 0.5);
    color: var(--color-accent);
}

.btn-task-action--primary:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.35) 0%, rgba(102, 126, 234, 0.25) 100%);
    border-color: rgba(102, 126, 234, 0.7);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.badge-inactive {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ═══════════════════════════════
   MODALES
   ═══════════════════════════════ */

/* ═══════════════════════════════
   MODAL DÉTAILS SSH
   ═══════════════════════════════ */

.task-detail-section {
    margin-bottom: 2rem;
}

.task-detail-section:last-child {
    margin-bottom: 0;
}

.task-detail-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-light);
}

.task-detail-text {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

.task-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.task-detail-grid > div {
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.task-detail-grid strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-light);
}

.task-detail-grid code {
    color: var(--text-muted);
}

/* .code-block → déplacé dans 3-components/_code.css */

/* ── Vue table — panel full-width sans déclencher le layout :has() ─────── */
.tasks-table-panel {
    width: 100%;
    flex-shrink: 0;
}

.tasks-table-panel .panel__body {
    overflow-x: auto;
}

/* ── Cron builder — boutons présets et jours ────────────────────────────── */
.quick-btn {
    padding: .25rem .65rem;
    border-radius: 6px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: .72rem;
    font-weight: 500;
    cursor: pointer;
    transition: .15s;
}
.quick-btn:hover { background: #eef2ff; border-color: #6366f1; color: #6366f1; }

.ae-dow-btn {
    padding: .3rem .45rem;
    border-radius: 6px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: .7rem;
    font-weight: 700;
    cursor: pointer;
    transition: .12s;
    min-width: 28px;
    text-align: center;
}
.ae-dow-btn.is-active { background: #6366f1; border-color: #6366f1; color: #fff; }

/* ── Toggle vue Cards / Table ───────────────────────────────────────────── */
.view-toggle {
    display: inline-flex;
    height: 38px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    overflow: hidden;
}

.view-toggle__btn {
    padding: 0 .75rem;
    background: none;
    border: none;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    font-size: .82rem;
    transition: background .12s, color .12s;
}

.view-toggle__btn:hover { color: #fff; background: rgba(255,255,255,.08); }

.view-toggle__btn.is-active {
    background: var(--color-accent);
    color: #fff;
}

/* ── Cron — pills compactes ─────────────────────────────────────────────── */
.task-cron-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: flex-start;
}

.task-cron-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .8rem;
    border-radius: 10px;
    font-size: .78rem;
}

.task-cron-pill > span {
    display: flex;
    flex-direction: column;
    gap: .05rem;
}

.task-cron-pill strong {
    font-weight: 700;
    font-size: .8rem;
    line-height: 1.2;
}

.task-cron-pill code {
    font-family: 'Courier New', monospace;
    font-size: .68rem;
    opacity: .65;
    line-height: 1.2;
}

.task-cron-pill--freq {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}
.task-cron-pill--freq i { color: #3b82f6; font-size: .8rem; }

.task-cron-pill--loc {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
}
.task-cron-pill--loc i { color: #94a3b8; font-size: .8rem; }

/* ── Seuils d'alerte — pills compactes ──────────────────────────────────── */
.task-alert-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.task-alert-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    background: #fff8ee;
    border: 1px solid #fed7aa;
    border-radius: 99px;
    font-size: .78rem;
    color: #92400e;
}

.task-alert-pill i {
    font-size: .7rem;
    color: #f59e0b;
}

.task-alert-pill strong {
    font-weight: 700;
    color: #78350f;
}

.btn-copy {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: .75rem;
}

.btn-copy:hover {
    background: rgba(102, 126, 234, 0.25);
    border-color: rgba(102, 126, 234, 0.5);
    color: var(--color-accent);
}

.ssh-command {
    margin-bottom: 1.5rem;
}

.ssh-command:last-child {
    margin-bottom: 0;
}

.ssh-command label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-light);
}

.btn-inline-edit {
    margin-left: auto;
    padding: 0.25rem 0.75rem;
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid rgba(102, 126, 234, 0.4);
    border-radius: 6px;
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-inline-edit:hover {
    background: rgba(102, 126, 234, 0.3);
    border-color: rgba(102, 126, 234, 0.6);
}

/* ═══════════════════════════════
   MODAL LOGS — tlog-*
   Contexte : modal__body fond blanc (#fff)
   ═══════════════════════════════ */

/* Stats bar */
.tlog-stats {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .65rem 1.25rem;
    background: #f8fafc;
    border-bottom: 1.5px solid #e2e8f0;
}

.tlog-stat {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: #64748b;
    padding: .2rem .7rem;
    background: #fff;
    border-radius: 99px;
    border: 1px solid #e2e8f0;
}

.tlog-stat i { font-size: .7rem; opacity: .65; }
.tlog-stat strong { color: #1e293b; font-weight: 700; }
.tlog-stat--success strong { color: #16a34a; }
.tlog-stat--error   strong { color: #dc2626; }

/* Filters */
.tlog-filters {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    padding: 0 0 .75rem 0;
}

.tlog-filters .ui-input {
    width: auto;
    min-width: 130px;
    padding: .4rem .65rem;
    font-size: .82rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    border-radius: 8px;
}

.tlog-filters .ui-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
    background: rgba(0,0,0,.4);
}

/* Log list */
.tlog-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

/* Log entry */
.tlog-entry {
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #cbd5e1;
    overflow: hidden;
    transition: box-shadow .15s;
}

.tlog-entry:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.tlog-entry--success { border-left-color: #22c55e; }
.tlog-entry--error   { border-left-color: #ef4444; }

/* Entry header */
.tlog-entry__header {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .75rem;
    flex-wrap: wrap;
    background: #fafafa;
    border-bottom: 1px solid #f1f5f9;
}

.tlog-entry__status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    min-width: 72px;
}

.tlog-entry--success .tlog-entry__status { color: #16a34a; }
.tlog-entry--error   .tlog-entry__status { color: #dc2626; }

.tlog-entry__date {
    font-size: .75rem;
    color: #64748b;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}

.tlog-entry__duration {
    font-size: .75rem;
    color: #64748b;
    white-space: nowrap;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* Entry output — terminal forcé dark */
.tlog-entry__output {
    position: relative;
    background: #1e2060;
    padding: .5rem 2.4rem .5rem .8rem;
}

.tlog-entry__pre {
    margin: 0;
    font-family: 'Courier New', monospace;
    font-size: .76rem;
    color: #a5b4fc;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.55;
}

.tlog-entry__pre.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
}

.tlog-entry__expand {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .35rem;
    font-size: .7rem;
    color: #818cf8;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: .8;
    transition: opacity .12s;
}

.tlog-entry__expand:hover { opacity: 1; }

.tlog-entry__copy {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: .4rem;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 5px;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    font-size: .72rem;
    transition: background .12s, border-color .12s, color .12s;
}

.tlog-entry__copy:hover {
    background: rgba(99,102,241,.35);
    border-color: rgba(99,102,241,.6);
    color: #a5b4fc;
}

/* States */
.tlog-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 2.5rem;
    color: #94a3b8;
    font-size: .875rem;
}

.tlog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 3rem;
    color: #94a3b8;
    font-size: .875rem;
}

.tlog-empty i { font-size: 2rem; }

/* ═══════════════════════════════
   RUNNING TASK TOAST
   ═══════════════════════════════ */

.running-toasts-container {
    position: fixed;
    bottom: 1.75rem;
    right: 1.75rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-end;
}

.running-toast {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1.25rem;
    background: #1a1a55;
    border: 1px solid rgba(99,102,241,.45);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,66,.45), 0 2px 8px rgba(0,0,0,.3);
    color: #fff;
    min-width: 270px;
    max-width: 340px;
    animation: running-toast-in .25s cubic-bezier(.16,1,.3,1);
}

@keyframes running-toast-in {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

.running-toast--out {
    animation: running-toast-out .3s ease forwards;
}

@keyframes running-toast-out {
    to { opacity: 0; transform: translateY(8px) scale(.96); }
}

.running-toast__icon {
    font-size: 1.2rem;
    color: var(--color-accent);
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
}

.running-toast__body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .82rem;
    line-height: 1.4;
}

.running-toast__body strong {
    font-size: .875rem;
    font-weight: 700;
}

.running-toast__body span {
    color: rgba(255,255,255,.65);
}

.running-toast__timer {
    display: block;
    font-style: normal;
    font-weight: 700;
    font-size: .85rem;
    color: #a5b4fc;
    margin-top: .1rem;
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════
   MODAL CONFIRMATION
   ═══════════════════════════════ */

.alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--text-light);
}

.alert i {
    color: #f59e0b;
}

/* ═══════════════════════════════
   FORMULAIRE ÉDITION
   ═══════════════════════════════ */

.form-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.form-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form-section__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.5rem 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-light);
}

.form-section__title i {
    color: var(--color-accent);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-light);
}

.form-help {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.ui-input,
.ui-select,
.ui-textarea {
    width: 100%;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--text-light);
    font-family: inherit;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.ui-textarea {
    resize: vertical;
    min-height: 80px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    color: var(--text-light);
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.form-actions .btn-primary,
.form-actions .btn-secondary {
    padding: 0.75rem 1.5rem;
}

/* ═══════════════════════════════
   RESPONSIVE
   ═══════════════════════════════ */

@media (max-width: 768px) {
    .task-cards {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .task-filters {
        flex-direction: column;
    }
    
    .logs-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .log-item__header {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
}

.log-item__meta .badge {
    padding: 0;
}

.select-wrapper {
    position: relative;
    display: inline-block;
}

.select-wrapper select {
    padding-right: 2.5rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.select-wrapper .select-arrow {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.task-execution-date {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.8;
}

.task-next-execution {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.countdown-timer {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 0.8rem;
}

.countdown-active {
    color: #22c55e;
}

.countdown-expired {
    color: #ef4444;
    animation: pulse 1.5s ease-in-out infinite;
}

.countdown-pending {
    color: var(--text-muted);
    font-style: italic;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Badges de type d'exécution */
.log-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 90px;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.log-badge--manual {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.15) 100%);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #f59e0b;
}

.log-badge--cron {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(102, 126, 234, 0.15) 100%);
    border: 1px solid rgba(102, 126, 234, 0.4);
    color: var(--color-accent);
}

.log-badge i {
    font-size: 0.75rem;
}

/* ── Nav-cards tâches (extrait de tasks/views/index.view.php) ─────── */
.task-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.task-nav-card {
    background: var(--bg-panel, #fff);
    border: 1px solid var(--border-panel, rgba(0,0,66,.08));
    border-radius: 16px;
    box-shadow: var(--shadow-panel);
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.task-nav-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
    border-color: rgba(var(--color-accent-rgb), .4);
}
.task-nav-card--inactive { opacity: .55; }
.task-nav-card--error    { border-color: rgba(220,38,38,.35) !important; }

.task-nav-card__body {
    padding: 1.1rem 1.25rem .75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.task-nav-card__top {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.task-nav-card__icon {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.task-nav-card__icon--success { background: #f0fdf4; color: #16a34a; }
.task-nav-card__icon--error   { background: #fef2f2; color: #dc2626; }
.task-nav-card__icon--running { background: #eff6ff; color: #3b82f6; }
.task-nav-card__icon--never   { background: #f8fafc; color: #94a3b8; }

.task-nav-card__info { flex: 1; min-width: 0; }
.task-nav-card__name {
    font-size: .9rem; font-weight: 700;
    color: var(--text-panel, #1a1d4a);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-nav-card__status {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .72rem; font-weight: 600; margin-top: .15rem;
}
.task-nav-card__status--success { color: #16a34a; }
.task-nav-card__status--error   { color: #dc2626; }
.task-nav-card__status--running { color: #3b82f6; }
.task-nav-card__status--never   { color: #94a3b8; }

.task-nav-card__desc {
    font-size: .78rem;
    color: var(--text-panel-muted, #6b75b8);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.task-nav-card__meta {
    display: flex; flex-wrap: wrap; gap: .4rem;
    margin-top: .25rem;
}
.task-nav-card__chip {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .7rem; color: #64748b;
    background: #f1f5f9; border-radius: 99px;
    padding: .15rem .55rem;
}
.task-nav-card__footer {
    padding: .65rem 1.25rem;
    border-top: 1px solid var(--border-panel, #f1f5f9);
    display: flex; align-items: center; justify-content: flex-end; gap: .4rem;
    background: #f8fafc;
    border-radius: 0 0 16px 16px;
}
.task-category-section { margin-bottom: 1.5rem; }

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_tarifs.css (74.75 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Page Alignement Tarifaire
   =============================== */

/* ===============================
   Filtres — intégrés au topbar
   =============================== */

.tarifs-filters {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.1);
  border-radius: 0;
  padding: 0 0 .875rem;
  margin-bottom: .875rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-end;
  box-shadow: none;
}

.tarifs-filters .filter-group {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 140px;
}

.tarifs-filters .filter-group label {
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.tarifs-filters select,
.tarifs-filters input[type="text"],
.tarifs-filters input[type="number"] {
  padding: .35rem .6rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  font-size: .875rem;
  background: rgba(0,0,0,.25);
  color: #fff;
}

.tarifs-filters select option { background: #1a2a80; color: #fff; }

.tarifs-filters select:focus,
.tarifs-filters input[type="text"]:focus,
.tarifs-filters input[type="number"]:focus {
  outline: none;
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 0 0 2px rgba(255,255,255,.12);
}

.tarifs-filters input[type="text"]::placeholder,
.tarifs-filters input[type="number"]::placeholder { color: rgba(255,255,255,.35); }

/* Rangée 2 : recherche + analyses + actions sur une ligne */
.filter-row-2 {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
}
.filter-row-2 .filter-group--search { flex: 1; min-width: 160px; }
.filter-row-2 .analysis-chips-row   { flex-shrink: 0; width: auto; padding-top: 0; border-top: none; margin-top: 0; }
.filter-row-2 .filter-actions       { flex-shrink: 0; margin-top: 0; }

.tarifs-filters .filter-group--search { min-width: 200px; }
.tarifs-filters .filter-group--stock  { min-width: 90px; max-width: 110px; }
.tarifs-filters .filter-group--stock input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  text-align: right;
}
.tarifs-filters .filter-group--stock input[type="number"]::-webkit-inner-spin-button,
.tarifs-filters .filter-group--stock input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* ── Analyses rapides ──────────────────────────────────────── */
.analysis-chips-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding-top: .625rem;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: .125rem;
}

.rules-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  color: rgba(255,255,255,.4); text-decoration: none;
  transition: color .15s, background .15s;
  font-size: .8rem;
}
.rules-link:hover { color: #fff; background: rgba(255,255,255,.1); }

.analysis-chips-label {
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.analysis-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .9rem;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  background: transparent;
  white-space: nowrap;
}

.analysis-chip--warn {
  border: 1.5px solid rgba(251,191,36,.5);
  color: #fbbf24;
}
.analysis-chip--warn:hover { background: rgba(251,191,36,.12); border-color: #fbbf24; }
.analysis-chip--warn.active {
  background: rgba(251,191,36,.22);
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251,191,36,.25);
}

.analysis-chip--alert {
  border: 1.5px solid rgba(248,113,113,.5);
  color: #f87171;
}
.analysis-chip--alert:hover { background: rgba(248,113,113,.12); border-color: #f87171; }
.analysis-chip--alert.active {
  background: rgba(248,113,113,.22);
  border-color: #f87171;
  box-shadow: 0 0 0 2px rgba(248,113,113,.25);
}

.filter-actions {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
  margin-left: auto;
}

/* Bouton Filtrer sur fond sombre */
.app-topbar__content .btn-primary {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
}
.app-topbar__content .btn-primary:hover {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.5);
}

.btn-import {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  border-radius: 6px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
  border: 1px solid rgba(74,222,128,.5);
  background: rgba(74,222,128,.15);
  color: #4ade80;
}

.btn-import:hover {
  background: rgba(74,222,128,.3);
  border-color: #4ade80;
  color: #fff;
  transform: translateY(-1px);
}

/* ===============================
   Barre de statut + KPI chips
   =============================== */

.tarifs-status-strip {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: .5rem;
}

/* KPI chips inline */
.tarifs-kpi-strip {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  margin-left: auto;
}

.kpi-chip {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem 1rem;
  border-right: 1px solid rgba(255,255,255,.12);
  font-size: .8125rem;
  white-space: nowrap;
}

.kpi-chip:last-child { border-right: none; }
.kpi-chip:first-child { border-left: 1px solid rgba(255,255,255,.12); }

/* Chips filtrables */
.kpi-chip--ok,
.kpi-chip--warn,
.kpi-chip--alert {
  cursor: pointer;
  border-radius: 4px;
  transition: background .15s;
}
.kpi-chip--ok:hover    { background: rgba(74,222,128,.15); }
.kpi-chip--warn:hover  { background: rgba(251,191,36,.15); }
.kpi-chip--alert:hover { background: rgba(248,113,113,.15); }
.kpi-chip--ok.active    { background: rgba(74,222,128,.25);  outline: 1px solid rgba(74,222,128,.5); }
.kpi-chip--warn.active  { background: rgba(251,191,36,.25);  outline: 1px solid rgba(251,191,36,.5); }
.kpi-chip--alert.active { background: rgba(248,113,113,.25); outline: 1px solid rgba(248,113,113,.5); }

.kpi-chip i    { font-size: .85rem; }
.kpi-chip strong { font-size: 1.1rem; font-weight: 700; color: #fff; line-height: 1; }
.kpi-chip span { color: rgba(255,255,255,.55); font-size: .75rem; }

.kpi-chip--ok    i { color: #4ade80; }
.kpi-chip--warn  i { color: #94a3b8; }
.kpi-chip--noref i { color: #94a3b8; }
.kpi-chip--loss  i { color: #f87171; }   /* rouge — vente à perte */
.kpi-chip--gap   i { color: #fb923c; }   /* orange — PV discordant */
.kpi-chip--alert i { color: #f87171; }
.kpi-chip--total i { color: #93c5fd; }

/* Rendre loss et gap cliquables comme les autres chips */
.kpi-chip--loss, .kpi-chip--gap { cursor: pointer; border-radius: 4px; transition: background .15s; }
.kpi-chip--loss:hover { background: rgba(248,113,113,.15); }
.kpi-chip--gap:hover  { background: rgba(251,146,60,.15); }

/* Fraîcheur dans la barre de statut */
.tarifs-status-strip .tarifs-freshness {
  margin: 0;
  flex-wrap: wrap;
  gap: .375rem;
}

.tarifs-status-strip .freshness-item {
  font-size: .75rem;
  padding: .3rem .65rem;
  border-radius: 6px;
}

/* Anciens styles KPI (conservés pour compatibilité externe éventuelle) */
.kpi-card { display: none; }   /* remplacés par kpi-chip */

/* ===============================
   Tableau
   =============================== */

.tarifs-table-wrap {
  background: var(--bg-panel);
  border: 1px solid var(--border-panel);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}

.tarifs-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border-panel);
  flex-wrap: wrap;
  gap: .5rem;
}

.tarifs-table-toolbar .results-count {
  font-size: .875rem;
  color: var(--text-panel-muted);
}

.tarifs-table-toolbar .toolbar-actions { display: flex; gap: .5rem; }

/* Zone de scroll du tableau — hauteur calculée par JS */
.tarifs-table-scroll {
  overflow: auto;
  /* scrollbar fine */
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-accent-rgb), .35) var(--border-table);
}
.tarifs-table-scroll::-webkit-scrollbar        { width: 6px; height: 6px; }
.tarifs-table-scroll::-webkit-scrollbar-track  { background: var(--border-table); }
.tarifs-table-scroll::-webkit-scrollbar-thumb  { background: rgba(var(--color-accent-rgb), .35); border-radius: 3px; }
.tarifs-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }
.tarifs-table-scroll::-webkit-scrollbar-corner { background: var(--bg-panel-head); }

/* ── Split button (Appliquer stratégie) ────────────────────── */
.btn-split {
  position: relative;
  display: inline-flex;
}
.btn-split__main {
  border-radius: 6px 0 0 6px !important;
  border-right: 1px solid rgba(255,255,255,.25) !important;
}
.btn-split__arrow {
  border-radius: 0 6px 6px 0 !important;
  padding-left: .5rem !important;
  padding-right: .5rem !important;
}
.btn-split__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  z-index: 500;
  overflow: hidden;
}
.btn-split__item {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 .5rem;
  width: 100%;
  padding: .6rem .9rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  font-size: .875rem;
  transition: background .12s;
}
.btn-split__item:last-child { border-bottom: none; }
.btn-split__item:hover { background: var(--bg-hover); }
.btn-split__item i {
  grid-row: 1 / 3;
  color: var(--accent);
  font-size: .9rem;
  align-self: center;
}
.btn-split__item span { font-weight: 500; line-height: 1.3; }
.btn-split__item small { color: var(--text-muted); font-size: .75rem; line-height: 1.2; }

/* ── Modal générique tarifs ─────────────────────────────────── */
.tarifs-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tarifs-modal-backdrop[hidden] { display: none; }
.tarifs-modal {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.tarifs-modal h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.tarifs-modal h3 i { color: var(--accent); }
.tarifs-modal p {
  font-size: .875rem;
  color: var(--text-secondary);
  margin: 0 0 1rem;
  line-height: 1.55;
}
.tarifs-modal__note {
  font-size: .8rem;
  color: var(--text-muted);
  background: var(--bg-hover);
  border-radius: 6px;
  padding: .5rem .75rem;
  margin-bottom: 1.25rem;
  display: flex;
  gap: .4rem;
  align-items: flex-start;
}
.tarifs-modal__note i { color: var(--accent); margin-top: .1rem; flex-shrink: 0; }
.tarifs-modal__actions {
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
}

/* Sélecteur de périmètre dans le modal d'application */
.apply-scope-wrap {
  margin-bottom: 1rem;
  background: var(--bg-hover);
  border-radius: 8px;
  padding: .65rem .9rem;
}
.apply-scope-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  display: block;
  margin-bottom: .45rem;
}
.apply-scope-options { display: flex; flex-direction: column; gap: .35rem; }
.apply-scope-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  padding: .3rem .4rem;
  border-radius: 6px;
  transition: background .12s;
}
.apply-scope-option:hover { background: var(--border-subtle); }
.apply-scope-option input[type="radio"] { display: none; }
.apply-scope-check {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  flex-shrink: 0;
  transition: border-color .15s;
  position: relative;
}
.apply-scope-option input:checked ~ .apply-scope-check {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg-hover);
}
.apply-scope-option span { display: flex; flex-direction: column; gap: .05rem; }
.apply-scope-option strong { font-size: .875rem; color: var(--text-primary); font-weight: 600; }
.apply-scope-option small  { font-size: .75rem; color: var(--text-muted); }

/* ── Toast notifications ─────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
}
.toast--visible { opacity: 1; transform: translateY(0); }

/* ── Export dropdown : position fixed comme Outils ──────── */
#btn-export-menu {
  position: fixed;
  z-index: 1000;
  min-width: 240px;
}

/* ── Export dropdown item désactivé ─────────────────────── */
.dropdown__item:disabled,
.dropdown__item[disabled] {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Barre de sélection flottante ────────────────────────── */
.selection-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #1e293b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: .65rem 1.5rem;
  z-index: 900;
  box-shadow: 0 -4px 24px rgba(0,0,0,.35);
  transform: translateY(100%);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  flex-wrap: wrap;
}
.selection-bar.is-visible { transform: translateY(0); }

.selection-bar__info {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  color: #93c5fd;
}
.selection-bar__info i { font-size: 1rem; }
.selection-bar__info strong { color: #fff; font-size: 1.05rem; }

.selection-bar__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.selection-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 600;
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.selection-bar__btn:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.selection-bar__btn--export { border-color: rgba(74,222,128,.5); color: #4ade80; }
.selection-bar__btn--export:hover { background: rgba(74,222,128,.15); border-color: #4ade80; color: #4ade80; }

.selection-bar__close {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
  cursor: pointer;
  font-size: .8rem;
  transition: background .15s, color .15s;
  margin-left: .25rem;
}
.selection-bar__close:hover { background: rgba(239,68,68,.3); color: #fca5a5; }

/* ── Bouton ⚙ Outils ─────────────────────────────────────── */
/* Bouton autonome (pas btn-primary/secondary) pour contrôle total du style */
.btn-tools-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 0 12px;
  min-height: 30px;
  border-radius: var(--btn-radius, 6px);
  border: 1.5px solid color-mix(in srgb, var(--accent) 50%, var(--border-color));
  background: color-mix(in srgb, var(--accent) 8%, var(--ui-field-bg));
  color: var(--accent);
  font-size: var(--btn-font-size, .875rem);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-tools-toggle:hover {
  background: color-mix(in srgb, var(--accent) 16%, var(--ui-field-bg));
  border-color: var(--accent);
}
/* Variante icon-only */
.btn-tools-toggle--icon { padding: 0 10px; gap: .3rem; }
.btn-tools-toggle--icon .fa-cog { font-size: 1rem; }
.btn-tools-toggle--icon .fa-chevron-down { font-size: .55rem; }

.btn-tools-toggle .fa-chevron-down {
  font-size: .6rem;
  opacity: .7;
  transition: transform .2s;
}
.btn-tools-toggle[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

/* ── Menu ⚙ Outils — override de positionnement uniquement ────────────────
   Le visuel (couleurs, items, sections) vient de 3-components/_dropdown.css.
   Seuls la position fixed (évite le clipping de overflow:hidden) et le scroll
   sont spécifiques à ce menu.
   ─────────────────────────────────────────────────────────────────────────── */
.btn-tools-wrap { position: relative; }

#btn-tools-menu {
  position: fixed;          /* évite le clipping de .tarifs-table-wrap */
  min-width: 230px;
  z-index: 1000;
  overflow-y: scroll;
  max-height: 360px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
#btn-tools-menu::-webkit-scrollbar       { width: 4px; }
#btn-tools-menu::-webkit-scrollbar-track { background: transparent; }
#btn-tools-menu::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }

/* Les liens héritent du style .tarifs-table-toolbar a.btn-secondary — on reset */
#btn-tools-menu .dropdown__item,
#btn-tools-menu .dropdown__item:hover {
  background: transparent !important;
  border: none !important;
  color: var(--text-panel, #374151) !important;
  font-weight: 500 !important;
  text-decoration: none;
}
#btn-tools-menu .dropdown__item:hover { background: var(--bg-hover, #f8fafc) !important; }

/* Séparateur vertical dans la toolbar */
.toolbar-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--border-subtle);
  margin: 0 .2rem;
  vertical-align: middle;
  opacity: .5;
}

/* Boutons secondaires dans le tableau */
.tarifs-table-toolbar .btn-secondary {
  background: var(--ui-field-bg);
  border: 1px solid var(--ui-field-border);
  color: var(--text-primary);
}
.tarifs-table-toolbar .btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-color);
}

/* Liens de navigation (Mes listes / Stratégie / Psycho) — distincts des actions */
.tarifs-table-toolbar a.btn-secondary {
  background: color-mix(in srgb, var(--accent) 6%, var(--ui-field-bg));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color));
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}
.tarifs-table-toolbar a.btn-secondary:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--ui-field-bg));
  border-color: var(--accent);
  color: var(--accent);
}

#tarifs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8125rem;
}

/* Le thead entier est sticky — les deux lignes restent visibles ensemble */
#tarifs-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
}

#tarifs-table thead th {
  background: var(--bg-panel-head);
  padding: 3px 5px;
  text-align: left;
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-panel-muted);
  border-bottom: 1px solid var(--border-panel-head);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: relative;  /* pour les handles de resize uniquement */
}

/* Conteneur flex : label + sort-icon toujours côte à côte */
#tarifs-table thead tr:last-child th .th-content {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  width: 100%;
}

/* Texte : s'étend, se tronque ou se wraps selon le mode */
#tarifs-table thead tr:last-child th .th-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flèche de tri : jamais rétrécie, toujours collée au texte */
#tarifs-table thead tr:last-child th .sort-icon {
  flex-shrink: 0;
  margin-left: .1rem;
  opacity: .35;
}

#tarifs-table thead th:hover { color: var(--text-panel); }

/* Handle de redimensionnement */
#tarifs-table thead tr:last-child th { position: relative; }

.col-resize-handle {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 5px;
  cursor: col-resize;
  z-index: 3;
  background: transparent;
  transition: background .15s;
}
.col-resize-handle:hover { background: rgba(var(--color-accent-rgb), .5); }
.col-resize-handle--resizing { background: var(--color-accent); }

#tarifs-table thead th .sort-icon {
  margin-left: .1rem;
  opacity: .35;
}

#tarifs-table thead th.sort-asc .sort-icon,
#tarifs-table thead th.sort-desc .sort-icon { opacity: 1; color: var(--color-accent); }

#tarifs-table tbody td { padding: 2px 5px; color: var(--text-panel); }

/* ── Mode lignes : crop (défaut) ──────────────────────────── */
#tarifs-table.mode-rows-crop tbody td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ── Mode lignes : wrap ───────────────────────────────────── */
#tarifs-table.mode-rows-wrap tbody td {
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  max-width: none;
}

/* ── Mode en-têtes : crop (défaut) ───────────────────────── */
#tarifs-table.mode-header-crop thead tr:last-child th .th-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ── Mode en-têtes : wrap ─────────────────────────────────── */
#tarifs-table.mode-header-wrap thead tr:last-child th .th-label {
  white-space: normal;
  overflow: visible;
}

/* Bouton actif pour les modes wrap */
#btn-header-wrap.wrap-active,
#btn-rows-wrap.wrap-active {
  background: rgba(var(--color-accent-rgb), .25);
  border-color: rgba(var(--color-accent-rgb), .5);
}

/* ── Handle resize vertical (hauteur ligne d'en-têtes) ───── */
.row-resize-handle {
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 6px;
  cursor: row-resize;
  z-index: 10;
  background: transparent;
  transition: background .15s;
}
.row-resize-handle:hover        { background: rgba(var(--color-accent-rgb), .4); }
.row-resize-handle--resizing    { background: var(--color-accent); }
/* Bouton actif pour le mode wrap */
#btn-text-mode.mode-wrap-active {
  background: rgba(var(--color-accent-rgb), .15);
  border-color: rgba(var(--color-accent-rgb), .4);
  color: var(--color-accent);
}

/* Bordure gauche selon statut */
#tarifs-table tbody tr.row-ok    { border-left: 3px solid var(--color-ok-border); }
#tarifs-table tbody tr.row-warn  { border-left: 3px solid var(--color-warn-border); }
#tarifs-table tbody tr.row-alert { border-left: 3px solid var(--color-alert-border); }

/* ===============================
   Badges statut
   =============================== */

.badge-ok    { background: var(--color-ok-bg);    color: var(--color-ok); }
.badge-loss  { background: #fee2e2; color: #991b1b; }   /* rouge foncé — vente à perte */
.badge-gap   { background: #fff7ed; color: #c2410c; }   /* orange — PV discordant */
.badge-noref { background: rgba(148,163,184,.15); color: #94a3b8; }

/* Espace entre picto et texte dans les badges */
.badge i { margin-right: 3px; }

/* ===============================
   Tendance
   =============================== */

.trend {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}

.trend-new      { color: var(--color-trend-new); }
.trend-improved { color: var(--color-trend-improved); }
.trend-degraded { color: var(--color-trend-degraded); }
.trend-stable   { color: var(--color-trend-stable); }

/* ===============================
   Écart prix
   =============================== */

.ecart { font-weight: 600; }
.ecart-ok    { color: var(--color-ok); }
.ecart-warn  { color: var(--color-warn); }
.ecart-alert { color: var(--color-alert); }

.price {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===============================
   Checkboxes
   =============================== */

#tarifs-table tbody td:first-child { width: 42px; text-align: center; }
#tarifs-table thead th:first-child  { width: 42px; }

/* ===============================
   États vide / chargement
   =============================== */

.tarifs-state {
  padding: 3rem;
  text-align: center;
  color: var(--text-panel-muted);
  font-size: .9rem;
}

.tarifs-state i {
  font-size: 2rem;
  display: block;
  margin-bottom: .75rem;
  opacity: .5;
}

/* ===============================
   Légende
   =============================== */

/* Indicateur scroll infini */
.load-more-indicator {
  text-align: center; padding: .75rem; font-size: .8rem;
  color: var(--text-panel-muted); border-top: 1px solid var(--border-table);
}

.tarifs-legend {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: .75rem;
  color: var(--text-panel-muted);
  padding: .6rem 1rem;
  border-top: 1px solid var(--border-panel);
}

.legend-item { display: flex; align-items: center; gap: .4rem; }

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-dot-ok    { background: var(--color-ok-border); }
.legend-dot-loss  { background: #ef4444; }
.legend-dot-gap   { background: #f97316; }
.legend-dot-noref { background: #94a3b8; }

.tarifs-legend-trends {
  margin-left: auto;
  display: flex;
  gap: 1rem;
}

/* ===============================
   Responsive
   =============================== */

@media (max-width: 640px) {
  .tarifs-filters { flex-direction: column; }
  .filter-actions { margin-left: 0; width: 100%; }
  .tarifs-legend-trends { margin-left: 0; }
}

/* ═══════════════════════════════
   SECTION REPLIABLE (filtres + KPIs)
   ═══════════════════════════════ */


/* Fraîcheur inline dans le KPI strip */
.tarifs-freshness-inline {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-right: .25rem;
}
.tarifs-freshness-inline .freshness-item {
  padding: .2rem .6rem;
  font-size: .78rem;
  border-radius: 6px;
  gap: .4rem;
  margin: 0;
}
.tarifs-freshness-inline .freshness-stores span {
  font-size: .75rem;
  padding: .1rem .4rem;
}
.kpi-strip-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,.15);
  margin: 0 .5rem;
  flex-shrink: 0;
}

/* Le KPI strip est un enfant direct du topbar — toujours visible même replié */
.app-topbar > .tarifs-kpi-strip {
  margin-left: 0;
  justify-content: flex-end;
  padding: .35rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

/* app-topbar, app-topbar-slide, app-topbar__content, app-topbar-toggle
   → styles globaux dans _sidebar.css */

/* ═══════════════════════════════
   FRAÎCHEUR DES DONNÉES
   ═══════════════════════════════ */

.tarifs-freshness {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.freshness-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  border-radius: 8px;
  font-size: .8125rem;
  border: 1px solid transparent;
  flex-wrap: wrap;
}

.freshness-item--ok {
  background: var(--color-ok-bg);
  border-color: rgba(var(--color-ok-rgb), .3);
  color: var(--color-ok);
}

.freshness-item--warn {
  background: var(--color-amber-bg);
  border-color: rgba(var(--color-amber-rgb), .3);
  color: #a16207;
}

.freshness-item--alert {
  background: var(--color-alert-bg);
  border-color: rgba(var(--color-alert-rgb), .3);
  color: var(--color-alert);
}

.freshness-item i { flex-shrink: 0; }

.freshness-date {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.freshness-age {
  opacity: .75;
  font-style: italic;
}

.freshness-stores {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-left: .25rem;
}

.freshness-stores span {
  padding: .125rem .5rem;
  background: rgba(0,0,0,.08);
  border-radius: 4px;
  font-size: .75rem;
  font-weight: 600;
}

/* ═══════════════════════════════
   PANNEAU COLONNES VISIBLES
   ═══════════════════════════════ */

.col-picker {
  position: fixed;
  z-index: 200;
  width: 280px;
  max-height: 50vh;
  overflow: hidden;           /* clips le contenu aux bords arrondis */
  background: var(--bg-panel);
  border: 1px solid var(--border-panel);
  border-radius: 12px;
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
}

.col-picker__body {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  /* Scrollbar fine sur le body uniquement */
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-accent-rgb), .5) var(--border-panel);
}
.col-picker__body::-webkit-scrollbar        { width: 4px; }
.col-picker__body::-webkit-scrollbar-track  { background: var(--border-panel); }
.col-picker__body::-webkit-scrollbar-thumb  { background: rgba(var(--color-accent-rgb), .5); border-radius: 2px; }
.col-picker__body::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

.col-picker__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border-panel);
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-panel-muted);
  position: sticky;
  top: 0;
  background: var(--bg-panel-head);
  border-radius: 12px 12px 0 0;
}

.col-picker__head span { flex: 1; }

.col-picker-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-panel-muted);
  padding: .25rem;
  border-radius: 4px;
  line-height: 1;
  font-size: .9rem;
  transition: color .15s, background .15s;
}
.col-picker-close:hover { color: var(--color-alert); background: var(--color-alert-bg); }

.col-picker__body { padding: .5rem; }

.col-picker-standalone {
  padding: .25rem 0 .5rem;
  border-bottom: 1px solid var(--border-table);
  margin-bottom: .5rem;
}

.col-picker-group { margin-bottom: .5rem; }

.col-picker-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .3rem .5rem;
  margin-bottom: .25rem;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-panel-muted);
  background: var(--bg-panel-head);
  border-radius: 6px;
}

.col-picker-grp-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .8rem;
  color: var(--text-panel-muted);
  padding: .1rem .3rem;
  border-radius: 4px;
  transition: color .15s, background .15s;
  line-height: 1;
}
.col-picker-grp-toggle:hover {
  color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), .1);
}

.col-picker-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .8125rem;
  color: var(--text-panel);
  transition: background .1s;
}
.col-picker-item:hover { background: var(--panel-row-hover); }
.col-picker-item input[type="checkbox"] { accent-color: var(--color-accent); cursor: pointer; }

.col-picker-footer {
  padding: .5rem;
  border-top: 1px solid var(--border-table);
  margin-top: .25rem;
}

.col-picker-reset-btn {
  width: 100%;
  padding: .4rem;
  background: none;
  border: 1px solid var(--border-panel);
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-panel-muted);
  cursor: pointer;
  transition: all .15s;
}
.col-picker-reset-btn:hover {
  background: var(--color-ok-bg);
  border-color: var(--color-ok-border);
  color: var(--color-ok);
}

/* position:relative conservé pour d'autres usages éventuels */
.tarifs-table-wrap { position: relative; }

/* ── Menu contextuel (clic droit) ────────────────────────────────────── */

.col-ctx-menu {
  position: fixed;
  z-index: 300;
  background: var(--bg-panel);
  border: 1px solid var(--border-panel);
  border-radius: 8px;
  box-shadow: var(--shadow-panel);
  padding: .25rem;
  min-width: 180px;
}

.col-ctx-menu button {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .5rem .75rem;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: .8125rem;
  color: var(--text-panel);
  cursor: pointer;
  transition: background .1s;
}
.col-ctx-menu button:hover {
  background: var(--panel-row-hover);
  color: var(--text-panel);
}

#col-ctx-rename:hover {
  background: rgba(var(--color-accent-rgb), .1);
  color: var(--color-accent);
}

#col-ctx-hide:hover {
  background: var(--color-alert-bg);
  color: var(--color-alert);
}

.col-ctx-separator {
  height: 1px;
  background: var(--border-table);
  margin: .25rem 0;
}

.col-ctx-section-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-panel-muted);
  padding: .35rem .75rem .1rem;
}

/* Input inline de renommage dans les en-têtes */
.th-rename-input {
  background: var(--bg-panel);
  border: 1px solid var(--color-accent);
  border-radius: 3px;
  color: var(--text-panel);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 3px;
  width: 100%;
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), .2);
  cursor: text;
}

/* ═══════════════════════════════
   STRATÉGIE PRICING
   ═══════════════════════════════ */

/* Chip analyse stratégie */
.analysis-chip--strategy {
  border: 1.5px solid rgba(var(--color-info-rgb), .5);
  color: var(--color-info);
}
.analysis-chip--strategy:hover { background: rgba(var(--color-info-rgb), .12); border-color: var(--color-info); }
.analysis-chip--strategy.active {
  background: rgba(var(--color-info-rgb), .22);
  border-color: var(--color-info);
  box-shadow: 0 0 0 2px rgba(var(--color-info-rgb), .25);
}

/* Colonne Règle dans le tableau principal */
.strategy-rule {
  font-size: .72rem; font-weight: 700;
  padding: .15rem .5rem; border-radius: 10px;
  background: rgba(var(--color-info-rgb), .1);
  color: var(--color-info); white-space: nowrap;
}

/* Stratégie définie via nth-child dans le bloc colorisation ci-dessous */

/* Séparateur avant stratégie */
#tarifs-table tbody td:nth-child(33),
#tarifs-table thead tr:last-child th:nth-child(33) {
  border-left: 2px solid rgba(var(--color-info-rgb), .2);
}

/* ── Arrondi psychologique ────────────────────────────────── */
.psycho-legend {
  display: flex; gap: 1.25rem; flex-wrap: wrap; padding: .6rem 1.25rem;
  background: var(--bg-panel-head); border-bottom: 1px solid var(--border-table);
  font-size: .78rem; color: var(--text-panel-muted);
}
.psycho-legend i { color: var(--color-info); }

.psycho-input {
  width: 80px; padding: .3rem .4rem;
  border: 1px solid var(--border-panel); border-radius: 6px;
  font-size: .85rem; background: var(--input-panel-bg); color: var(--input-panel-fg);
  text-align: right;
}
.psycho-input:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), .2);
}
.psycho-select {
  padding: .3rem .4rem; border: 1px solid var(--border-panel);
  border-radius: 6px; font-size: .8rem;
  background: var(--input-panel-bg); color: var(--input-panel-fg);
}
.psycho-preview { font-size: .78rem; color: var(--text-panel-muted); }

.prev-grid {
  display: flex; gap: 1rem;
}
.prev-grid > div { display: flex; flex-direction: column; }

.prev-ex {
  display: flex; align-items: center; gap: .3rem;
  padding: .1rem 0; border-bottom: 1px solid var(--border-table);
  white-space: nowrap;
}
.prev-ex:last-child { border-bottom: none; }

.prev-changed { color: var(--color-ok); }
.prev-same    { color: var(--text-panel-muted); opacity: .6; }
.psycho-delete {
  background: none; border: none; cursor: pointer; padding: .25rem .5rem;
  color: var(--text-panel-muted); border-radius: 4px; transition: all .15s;
}
.psycho-delete:hover { color: var(--color-alert); background: var(--color-alert-bg); }

/* ── Page Stratégie ───────────────────────────────────────── */
.strategy-store-bar {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem; flex-wrap: wrap;
}
.strategy-store-bar > label {
  font-size: .8rem; font-weight: 700; color: var(--text-panel-muted);
  white-space: nowrap;
}
.strategy-store-tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.strategy-store-tab {
  padding: .4rem 1rem; border-radius: 8px; font-size: .85rem; font-weight: 600;
  border: 1px solid var(--border-panel); background: var(--bg-panel);
  color: var(--text-panel-muted); text-decoration: none; transition: all .15s;
}
.strategy-store-tab:hover { border-color: var(--color-accent); color: var(--color-accent); }
.strategy-store-tab.is-active {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff;
}
.strategy-store-tab span { font-size: .75rem; opacity: .7; }

.strategy-table-wrap {
  background: var(--bg-panel); border: 1px solid var(--border-panel);
  border-radius: 12px; box-shadow: var(--shadow-panel); overflow: hidden;
}
.strategy-scroll-body {
  overflow: auto;
  max-height: calc(100vh - 260px);
}
.strategy-table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.25rem; border-bottom: 1px solid var(--border-panel);
  background: var(--bg-panel-head);
}
.strategy-status { font-size: .8rem; color: var(--text-panel-muted); }

#strategy-table {
  width: 100%; border-collapse: collapse; font-size: .875rem;
  table-layout: fixed;
}
#strategy-table thead th {
  background: var(--bg-panel-head); padding: .6rem 1rem;
  font-weight: 700; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-panel-muted);
  border-bottom: 2px solid var(--border-panel-head);
  position: sticky; top: 0; z-index: 3;
  overflow: hidden; white-space: nowrap;
  user-select: none;
}
#strategy-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Contenu th avec icône de tri */
.strategy-th-inner {
  display: flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  overflow: hidden;
}
.strategy-th-inner .sort-icon {
  font-size: .7rem;
  flex-shrink: 0;
  opacity: .4;
  transition: color .15s, opacity .15s;
}
#strategy-table thead th[data-sort]:hover .sort-icon { opacity: .75; }

/* Poignées de redimensionnement */
.strategy-col-handle {
  position: absolute; top: 0; right: 0;
  width: 5px; height: 100%;
  cursor: col-resize;
  z-index: 2;
  transition: background .1s;
}
.strategy-col-handle:hover { background: var(--accent); opacity: .5; }
.strategy-col-handle--dragging { background: var(--accent); opacity: .7; }
#strategy-table tbody tr.is-dirty { background: rgba(var(--color-amber-rgb), .07); }
#strategy-table td { padding: .6rem 1rem; color: var(--text-panel); vertical-align: middle; }

.strategy-num   { font-family: monospace; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.strategy-label { color: var(--text-panel-muted); }
.strategy-date  { font-size: .75rem; color: var(--text-panel-muted); white-space: nowrap; }
.strategy-mode-cell { text-align: center; }
.strategy-pct-cell  { text-align: center; }

/* ── Toggle switch (slide) ─────────────────────────────────── */
.mode-toggle {
  display: inline-flex; border-radius: 8px;
  border: 1px solid var(--border-panel);
  background: var(--bg-panel-head); overflow: hidden;
  padding: 2px; gap: 2px;
}
.mode-toggle__opt {
  padding: .3rem .85rem; border: none; border-radius: 6px;
  background: transparent; cursor: pointer; font-size: .78rem; font-weight: 600;
  color: var(--text-panel-muted); transition: all .2s; white-space: nowrap;
}
.mode-toggle__opt--active {
  background: var(--color-accent); color: #fff;
  box-shadow: 0 1px 4px rgba(var(--color-accent-rgb), .35);
}

/* Input % pricing */
.pct-input-wrap {
  display: inline-flex; align-items: center; gap: .25rem;
  transition: opacity .2s;
}
.pct-input-wrap--hidden { opacity: 0; pointer-events: none; }
.strategy-pct-input {
  width: 60px; padding: .3rem .4rem; border: 1px solid var(--border-panel);
  border-radius: 6px; font-size: .85rem; font-weight: 700;
  text-align: center; background: var(--input-panel-bg); color: var(--input-panel-fg);
}
.strategy-pct-input:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), .2);
}
.pct-symbol { font-size: .85rem; color: var(--text-panel-muted); font-weight: 700; }

.strategy-note-input {
  width: 100%; padding: .3rem .5rem; border: 1px solid transparent;
  border-radius: 6px; font-size: .8rem; background: transparent;
  color: var(--text-panel); transition: all .15s;
}
.strategy-note-input:hover { border-color: var(--border-panel); background: var(--bg-panel-head); }
.strategy-note-input:focus {
  outline: none; border-color: var(--color-accent); background: var(--bg-panel);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), .15);
}

/* ═══════════════════════════════
   LISTES DE PRODUITS
   ═══════════════════════════════ */

/* Modal add-to-list */
.list-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 500; display: flex; align-items: center; justify-content: center;
}
.list-modal {
  background: var(--bg-panel); border-radius: 16px; width: 440px; max-width: 95vw;
  max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-panel); overflow: hidden;
}
.list-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-panel);
  background: var(--bg-panel-head);
}
.list-modal__head h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-panel); }
.list-modal__head h3 i { color: var(--color-accent); margin-right: .5rem; }
.list-modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1rem; padding: .25rem; border-radius: 4px; }
.list-modal-close:hover { color: var(--color-alert); }
.list-modal__body { padding: 1rem 1.25rem; overflow-y: auto; flex: 1; }
.list-modal-info { font-size: .875rem; color: var(--text-panel-muted); margin-bottom: 1rem; }
.list-modal-empty { color: var(--text-panel-muted); font-size: .875rem; text-align: center; padding: 1rem 0; }

.list-pick-btn {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: .75rem 1rem; margin-bottom: .5rem;
  background: var(--input-panel-bg); border: 1px solid var(--border-panel);
  border-radius: 8px; cursor: pointer; text-align: left;
  transition: all .15s;
}
.list-pick-btn:hover { border-color: var(--color-accent); background: rgba(var(--color-accent-rgb), .05); }
.list-pick-name  { flex: 1; font-weight: 600; color: var(--text-panel); font-size: .9rem; }
.list-pick-count { font-size: .75rem; color: var(--text-panel-muted); }
.list-pick-badge { font-size: .65rem; padding: .1rem .4rem; border-radius: 10px; background: var(--bg-hover); color: var(--text-panel-muted); }

.list-modal__new { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-table); }
.btn-new-list-toggle {
  display: flex; align-items: center; gap: .4rem; background: none; border: none;
  cursor: pointer; color: var(--color-accent); font-size: .85rem; font-weight: 600;
  padding: .25rem 0; transition: opacity .15s;
}
.btn-new-list-toggle:hover { opacity: .7; }
.list-input {
  width: 100%; padding: .4rem .6rem; border: 1px solid var(--input-panel-border);
  border-radius: 6px; font-size: .875rem; background: var(--input-panel-bg);
  color: var(--input-panel-fg); margin-bottom: .5rem;
}
.list-check-label { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--text-panel); cursor: pointer; margin-bottom: .75rem; }
.list-modal__actions { display: flex; gap: .5rem; justify-content: flex-end; }

/* Page gestion listes */
.lists-grid { display: flex; flex-direction: column; gap: .75rem; }
.list-mgmt-card {
  background: var(--bg-panel); border: 1px solid var(--border-panel);
  border-radius: 10px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.list-mgmt-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.25rem;
}
.list-mgmt-card__head h3 { margin: 0 0 .25rem; font-size: 1rem; font-weight: 700; color: var(--text-panel); }
.list-mgmt-desc { font-size: .8rem; color: var(--text-panel-muted); margin: .25rem 0 0; }
.list-visibility-badge { font-size: .72rem; padding: .1rem .5rem; border-radius: 10px; background: var(--bg-hover); color: var(--text-panel-muted); }
.list-mgmt-card__actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.list-mgmt-count { font-size: .8rem; color: var(--text-panel-muted); white-space: nowrap; }
.list-mgmt-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1.25rem; background: var(--bg-panel-head);
  border-top: 1px solid var(--border-table);
}
.list-creator { font-size: .75rem; color: var(--text-panel-muted); }
.btn-use-list {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem; border-radius: 6px; font-size: .78rem; font-weight: 600;
  background: rgba(var(--color-accent-rgb), .1); color: var(--color-accent);
  border: 1px solid rgba(var(--color-accent-rgb), .3); text-decoration: none;
  transition: all .15s;
}
.btn-use-list:hover { background: rgba(var(--color-accent-rgb), .2); }

/* ═══════════════════════════════
   PAGE RÈGLES D'ANALYSE
   ═══════════════════════════════ */

.rules-header { margin-bottom: 2rem; }
.rules-back   { margin-bottom: 1rem; display: inline-flex; align-items: center; gap: .4rem; }
.rules-header h1 { font-size: 1.6rem; font-weight: 800; color: var(--text-panel); margin: .5rem 0 .5rem; }
.rules-header h1 i { color: var(--color-accent); margin-right: .5rem; }
.rules-subtitle { color: var(--text-panel-muted); font-size: .95rem; margin: 0; max-width: 700px; }

.rules-section { margin-bottom: 2.5rem; }
.rules-section > h2 {
  font-size: 1.05rem; font-weight: 700; color: var(--text-panel);
  padding-bottom: .6rem; border-bottom: 2px solid var(--border-panel);
  margin-bottom: 1.25rem; display: flex; align-items: center; gap: .6rem;
}
.rules-section > h2 i { color: var(--color-accent); }

.rule-card {
  background: var(--bg-panel); border: 1px solid var(--border-panel);
  border-radius: 12px; box-shadow: var(--shadow-panel);
  overflow: hidden; margin-bottom: 1.25rem;
}
.rule-card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-panel);
}
.rule-card--warn  .rule-card__head { background: rgba(var(--color-amber-rgb), .06); }
.rule-card--alert .rule-card__head { background: rgba(var(--color-alert-rgb), .06); }
.rule-card--neutral .rule-card__head { background: var(--bg-panel-head); }

.rule-card__body { padding: 1.25rem; }

.rule-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem 1rem; border-radius: 20px; font-weight: 700; font-size: .9rem;
}
.rule-chip--warn  { background: rgba(var(--color-amber-rgb), .15); color: #a16207; border: 1.5px solid rgba(var(--color-amber-rgb), .4); }
.rule-chip--alert { background: rgba(var(--color-alert-rgb), .12); color: var(--color-alert); border: 1.5px solid rgba(var(--color-alert-rgb), .4); }

.rule-badge {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-panel-muted);
  background: var(--bg-panel-head); padding: .25rem .7rem;
  border-radius: 20px; border: 1px solid var(--border-table);
}

.rule-row { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.rule-row:last-child { margin-bottom: 0; }
.rule-block { flex: 1; min-width: 240px; }
.rule-block h3 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-panel-muted); margin: 0 0 .5rem; }
.rule-block p  { font-size: .9rem; color: var(--text-panel); margin: 0 0 .5rem; line-height: 1.6; }
.rule-block ul { margin: 0; padding-left: 1.25rem; }
.rule-block li { font-size: .9rem; color: var(--text-panel); margin-bottom: .3rem; line-height: 1.5; }

.rule-formula {
  display: inline-block; padding: .5rem 1rem;
  background: var(--input-panel-bg); border: 1px solid var(--input-panel-border);
  border-radius: 8px; font-family: 'Courier New', monospace;
  font-size: .9rem; font-weight: 700; color: var(--text-panel);
  margin-bottom: .4rem;
}
.rule-formula-note { font-size: .78rem; color: var(--text-panel-muted); }

.rule-example {
  padding: .75rem 1rem; background: var(--bg-panel-head);
  border-radius: 8px; border: 1px solid var(--border-table);
  font-size: .85rem; line-height: 1.8;
}
.rule-example__result { margin-top: .4rem; font-weight: 700; padding-top: .4rem; border-top: 1px solid var(--border-table); }
.rule-example__result--warn  { color: #a16207; }
.rule-example__result--alert { color: var(--color-alert); }

.text-ok    { color: var(--color-ok); }
.text-alert { color: var(--color-alert); }
.text-muted { color: var(--text-panel-muted); opacity: .5; }

#rules-table {
  width: 100%; border-collapse: collapse; margin: 1rem 0;
  font-size: .875rem;
}
#rules-table th {
  background: var(--bg-panel-head); padding: .6rem .875rem;
  text-align: left; font-weight: 700; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-panel-muted); border-bottom: 2px solid var(--border-panel-head);
}
#rules-table td {
  padding: .6rem .875rem; border-bottom: 1px solid var(--border-table);
  color: var(--text-panel); vertical-align: middle;
}
#rules-table .center { text-align: center; }

.rules-note {
  font-size: .875rem; color: var(--text-panel-muted); margin-bottom: 1rem;
  padding: .75rem 1rem; background: var(--bg-panel-head);
  border-left: 3px solid var(--color-accent); border-radius: 0 6px 6px 0;
}

.rules-callout {
  display: flex; align-items: flex-start; gap: .875rem;
  padding: .875rem 1rem; border-radius: 8px; margin-top: 1rem;
  font-size: .875rem; line-height: 1.6;
}
.rules-callout i { font-size: 1.1rem; margin-top: .1rem; flex-shrink: 0; }
.rules-callout--ok   { background: var(--color-ok-bg);    border: 1px solid rgba(var(--color-ok-rgb), .3);    color: var(--color-ok); }
.rules-callout--warn { background: var(--color-amber-bg); border: 1px solid rgba(var(--color-amber-rgb), .3); color: #a16207; }
.rules-callout--info { background: var(--color-info-bg);  border: 1px solid rgba(var(--color-info-rgb), .3);  color: var(--color-info); }
.rules-callout strong { font-weight: 700; }

/* ═══════════════════════════════
   PAGE IMPORT — Wizard
   ═══════════════════════════════ */

/* ── Barre de progression ────────────────────────────────────────────────── */
.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2rem;
}

.wizard-connector {
  flex: 1;
  max-width: 80px;
  height: 2px;
  background: var(--border-panel);
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  cursor: default;
}

.wizard-step__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  border: 2px solid var(--border-panel);
  background: var(--bg-panel);
  color: var(--text-panel-muted);
  transition: all .2s;
}

.wizard-step__label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-panel-muted);
  transition: color .2s;
}

.wizard-step--active .wizard-step__num {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}
.wizard-step--active .wizard-step__label { color: var(--color-accent); }

.wizard-step--done .wizard-step__num {
  border-color: var(--color-ok-border);
  background: var(--color-ok-bg);
  color: var(--color-ok);
}
.wizard-step--done .wizard-step__num::before { content: '✓'; }
.wizard-step--done .wizard-step__label { color: var(--color-ok); }

/* ── Panel import ────────────────────────────────────────────────────────── */
.import-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-panel);
  border-radius: 12px;
  box-shadow: var(--shadow-panel);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
}

.import-panel__head {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-panel);
}

.import-panel__icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: var(--color-info-bg);
  color: var(--color-info);
  flex-shrink: 0;
}

.import-panel__icon--ok {
  background: var(--color-ok-bg);
  color: var(--color-ok);
}

.import-panel__head h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-panel);
  margin: 0 0 .25rem;
}

.import-panel__head p {
  font-size: .875rem;
  color: var(--text-panel-muted);
  margin: 0;
}

/* ── Formulaire ──────────────────────────────────────────────────────────── */
.import-form__row {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.import-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
  min-width: 200px;
}

.import-field label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-panel-muted);
}

.import-field select,
.import-field input[type="month"] {
  padding: .5rem .75rem;
  border: 1px solid var(--input-panel-border);
  border-radius: 8px;
  font-size: .875rem;
  background: var(--input-panel-bg);
  color: var(--input-panel-fg);
  transition: border-color .15s, box-shadow .15s;
}

.import-field select:focus,
.import-field input[type="month"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), .2);
}

.import-field__hint {
  font-size: .8rem;
  color: var(--text-panel-muted);
  margin: 0;
}

.import-form__actions {
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-panel);
}

/* ── Dropzone ────────────────────────────────────────────────────────────── */
.import-dropzone {
  position: relative;
  border: 2px dashed var(--input-panel-border);
  border-radius: 10px;
  background: var(--input-panel-bg);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.import-dropzone:hover,
.import-dropzone--drag {
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), .04);
}

.import-dropzone--has-file {
  border-color: var(--color-ok-border);
  border-style: solid;
}

.import-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.import-dropzone__inner {
  text-align: center;
  padding: 1.5rem;
  pointer-events: none;
  color: var(--text-panel-muted);
}

.import-dropzone__inner i.fa-file-excel {
  font-size: 2.5rem;
  color: var(--color-ok-border);
  margin-bottom: .75rem;
  display: block;
}

.import-dropzone__inner p {
  margin: .25rem 0;
  font-size: .875rem;
  color: var(--text-panel);
}

.import-dropzone__hint {
  font-size: .75rem !important;
  color: var(--text-panel-muted) !important;
}

.import-dropzone__filename {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-ok);
}

/* ── Alertes ─────────────────────────────────────────────────────────────── */
.import-alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1rem;
  border-radius: 8px;
  font-size: .875rem;
  margin-bottom: 1rem;
}

.import-alert--error {
  background: var(--color-alert-bg);
  border: 1px solid rgba(var(--color-alert-rgb), .4);
  color: var(--color-alert);
}

.import-alert--info {
  background: var(--color-info-bg);
  border: 1px solid rgba(var(--color-info-rgb), .3);
  color: var(--color-info);
}

.import-alert--warning {
  background: var(--color-amber-bg);
  border: 1px solid rgba(var(--color-amber-rgb), .4);
  color: #a16207;
}

.import-alert i { flex-shrink: 0; margin-top: .1rem; }

/* ── Étiquette de section ────────────────────────────────────────────────── */
.import-section-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-panel-muted);
  margin: 0 0 .6rem;
}

/* ── Aperçu du fichier ───────────────────────────────────────────────────── */
.import-preview-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-panel);
  border-radius: 8px;
  max-height: 260px;
  overflow-y: auto;
}

.import-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
  white-space: nowrap;
}

.import-preview-table th,
.import-preview-table td {
  padding: .4rem .6rem;
  border-bottom: 1px solid var(--border-table);
  color: var(--text-panel);
  text-align: left;
}

.import-preview-table thead .preview-col-letters th {
  background: var(--bg-panel-head);
  font-weight: 700;
  font-size: .7rem;
  color: var(--text-panel-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.import-preview-table thead .preview-header-row th {
  background: var(--input-panel-bg);
  font-weight: 600;
  color: var(--text-panel);
  border-bottom: 2px solid var(--border-panel-head);
}

.import-preview-table tbody tr:hover { background: var(--panel-row-hover); }
.import-preview-table tbody tr:last-child td { border-bottom: none; }

/* ── Mapping des colonnes ────────────────────────────────────────────────── */
.mapping-grid {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.mapping-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .625rem .875rem;
  background: var(--input-panel-bg);
  border: 1px solid var(--border-panel);
  border-radius: 8px;
}

.mapping-label {
  flex: 1;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-panel);
  min-width: 200px;
}

.mapping-label--required { color: var(--text-panel); }

.mapping-select {
  min-width: 220px;
  padding: .4rem .6rem;
  border: 1px solid var(--input-panel-border);
  border-radius: 6px;
  font-size: .875rem;
  background: var(--bg-panel);
  color: var(--input-panel-fg);
}

.mapping-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), .2);
}

/* Séparateur de section dans le formulaire de mapping */
.mapping-section-header {
  margin: 1.25rem 0 .5rem;
  padding: .375rem .75rem;
  background: var(--bg-panel-head);
  border: 1px solid var(--border-panel-head);
  border-radius: 6px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-panel-muted);
}

.mapping-section-header:first-child { margin-top: 0; }

.mapping-hint {
  display: block;
  font-size: .7rem;
  font-weight: 400;
  color: var(--text-panel-muted);
  font-style: italic;
  margin-top: .15rem;
}

/* ── Preview transformée ─────────────────────────────────────────────────── */
.import-output-preview {
  margin-top: 2rem;
  border: 1px solid var(--border-panel);
  border-radius: 10px;
  overflow: hidden;
}

.import-output-preview__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--bg-panel-head);
  border-bottom: 1px solid var(--border-panel-head);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text-panel-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.import-output-preview__legend {
  margin-left: auto;
  display: flex;
  gap: .75rem;
  font-size: .7rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.legend-src,
.legend-computed {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.legend-src::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--bg-panel);
  border: 1px solid var(--border-table);
  display: inline-block;
}

.legend-computed::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 2px;
  background: rgba(var(--color-accent-rgb), .08);
  border: 1px solid rgba(var(--color-accent-rgb), .25);
  display: inline-block;
}

/* Colonnes calculées / extraites automatiquement */
.import-preview-table th.col-computed,
.import-preview-table td.col-computed {
  background: rgba(var(--color-accent-rgb), .06);
  color: var(--color-accent);
  border-left: 1px solid rgba(var(--color-accent-rgb), .15);
  border-right: 1px solid rgba(var(--color-accent-rgb), .15);
  font-style: italic;
}

.import-preview-table th.col-computed {
  background: rgba(var(--color-accent-rgb), .1);
  font-weight: 700;
}

/* Cellule vide dans la preview */
.output-empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-panel-muted);
  font-style: italic;
  font-size: .875rem;
}

/* La preview wrap dans la section output n'a plus le border (il est sur le parent) */
.import-output-preview .import-preview-wrap {
  border: none;
  border-radius: 0;
  max-height: 300px;
}

.price--bold { font-weight: 700; }

.col-label { max-width: 260px; }

.code-cell { font-size: .78rem; }

/* Badges de règle de liste dans le tableau tarifaire */
.list-rule-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  font-size: .65rem;
  vertical-align: middle;
  margin-right: .2rem;
}
.list-rule-badge--lock_central { background: #dbeafe; color: #1d4ed8; }
.list-rule-badge--override_pct { background: #ede9fe; color: #7c3aed; }
.list-rule-badge--manual       { background: #fef3c7; color: #b45309; }
.list-rule-badge--silent       { background: #d1fae5; color: #065f46; }
.list-rule-badge--no_export    { background: #fee2e2; color: #b91c1c; }

/* Badge pour les articles sans EAN (identifiés via code SAP) */
.ean-sap-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  background: color-mix(in srgb, var(--color-warn-bg, #fff3cd) 80%, transparent);
  color: var(--color-warn, #856404);
  border: 1px solid color-mix(in srgb, var(--color-warn, #856404) 30%, transparent);
  border-radius: 3px;
  padding: 0 .3rem;
  line-height: 1.6;
  vertical-align: middle;
  margin-right: .3rem;
}

/* Cellules numériques (N° rayon, N° famille, etc.) */
.td-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  color: var(--text-panel-muted);
  white-space: nowrap;
}

/* Magasin — largeur contrainte */
.td-store { white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

/* ── En-têtes de groupes de colonnes ──────────────────────────────────── */

#tarifs-table .thead-group th {
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
  padding: .3rem .5rem;
  border-right: 2px solid var(--bg-panel);
  border-bottom: 1px solid var(--border-panel-head);
  overflow: hidden; /* texte clippé quand la cellule est réduite à 0px */
}

#tarifs-table .thead-group th:first-child {
  background: var(--bg-panel-head);
  border-right: 2px solid var(--border-panel-head);
}

/* Les couleurs des groupes sont maintenant dans le bloc "color-mix" ci-dessus */
/* Bordures droites des groupes */

/* Séparateur avant la section correction */
#tarifs-table tbody td:nth-child(35),
#tarifs-table thead tr:last-child th:nth-child(35) {
  border-left: 2px solid rgba(var(--color-ok-rgb), .2);
}

/* ── Cellule correction ──────────────────────────────────────── */
.td-correction {
  cursor: pointer;
  transition: background .15s;
  text-align: right;
  white-space: nowrap;
}

.td-correction:hover { background: rgba(var(--color-ok-rgb), .07); }

.td-correction--active {
  background: rgba(var(--color-ok-rgb), .08);
}

.corr-val {
  font-weight: 700;
  color: var(--color-ok);
  margin-right: .3rem;
}

.corr-icon {
  font-size: .65rem;
  color: var(--color-ok);
  opacity: .6;
}

.corr-hint {
  color: var(--text-panel-muted);
  opacity: .3;
  font-size: .75rem;
}

.td-correction:hover .corr-hint { opacity: .7; }

/* Cellule note */
.td-note {
  cursor: pointer;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
  color: var(--text-panel-muted);
  transition: background .15s;
}
.td-note:hover { background: rgba(var(--color-ok-rgb), .07); }
.td-note--active { color: var(--text-panel); font-style: italic; }

.note-hint { opacity: .3; font-size: .75rem; }
.td-note:hover .note-hint { opacity: .6; }

.note-input {
  width: 100%;
  min-width: 120px;
  padding: 1px 4px;
  border: 1px solid var(--color-ok-border);
  border-radius: 4px;
  background: var(--color-ok-bg);
  color: var(--text-panel);
  font-size: .78rem;
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--color-ok-rgb), .2);
}

/* ── Colonne Actions ─────────────────────────────────────────── */
.td-actions {
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
}

.btn-ignore-analysis {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .7rem;
  border-radius: 20px;
  border: 1.5px solid rgba(var(--color-ok-rgb), .5);
  background: rgba(var(--color-ok-rgb), .08);
  color: var(--color-ok);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.btn-ignore-analysis:hover {
  background: rgba(var(--color-ok-rgb), .2);
  border-color: var(--color-ok-border);
}

.ignored-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .5rem;
  border-radius: 12px;
  background: rgba(var(--color-ok-rgb), .1);
  color: var(--color-ok);
  font-size: .72rem;
  font-weight: 600;
  margin: 1px;
}

.btn-unignore-tag {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: .8rem;
  line-height: 1;
  padding: 0 1px;
  opacity: .6;
  transition: opacity .15s;
}
.btn-unignore-tag:hover { opacity: 1; }

.no-action { color: var(--text-panel-muted); opacity: .4; font-size: .75rem; }

/* Input d'édition inline */
.corr-input {
  width: 90px;
  padding: 1px 4px;
  border: 1px solid var(--color-ok-border);
  border-radius: 4px;
  background: var(--color-ok-bg);
  color: var(--color-ok);
  font-size: .8125rem;
  font-weight: 600;
  text-align: right;
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--color-ok-rgb), .2);
}

/* ── Colorisation des en-têtes — backgrounds OPAQUES via color-mix ────────
   color-mix() mélange bg-panel-head (base solide) + couleur de groupe
   → aucune transparence, le contenu ne passe pas derrière le header sticky  */

/* Nomenclature : colonnes 3 à 8 */
#tarifs-table thead tr:last-child th:nth-child(n+3):nth-child(-n+8),
#tarifs-table thead .th-group-nom {
  background: color-mix(in srgb, var(--bg-panel-head) 91%, var(--color-accent));
  color: var(--color-accent);
}
#tarifs-table thead tr:last-child th:nth-child(n+3):nth-child(-n+8):hover { color: var(--text-panel); }

/* Produit : colonnes 9 à 16 */
#tarifs-table thead tr:last-child th:nth-child(n+9):nth-child(-n+16),
#tarifs-table thead .th-group-prod {
  background: color-mix(in srgb, var(--bg-panel-head) 92%, var(--color-ok));
  color: var(--color-ok);
}
#tarifs-table thead tr:last-child th:nth-child(n+9):nth-child(-n+16):hover { color: var(--text-panel); }

/* Prix : colonnes 17 à 27 */
#tarifs-table thead tr:last-child th:nth-child(n+17):nth-child(-n+27),
#tarifs-table thead .th-group-prix {
  background: color-mix(in srgb, var(--bg-panel-head) 91%, #a16207);
  color: #a16207;
}
#tarifs-table thead tr:last-child th:nth-child(n+17):nth-child(-n+27):hover { color: var(--text-panel); }

/* Marges : colonnes 28 à 32 */
#tarifs-table thead tr:last-child th:nth-child(n+28):nth-child(-n+32),
#tarifs-table thead .th-group-marge {
  background: color-mix(in srgb, var(--bg-panel-head) 91%, var(--color-info));
  color: var(--color-info);
}
#tarifs-table thead tr:last-child th:nth-child(n+28):nth-child(-n+32):hover { color: var(--text-panel); }

/* Analyse : colonnes 33 et 34 */
#tarifs-table thead tr:last-child th:nth-child(n+33):nth-child(-n+34),
#tarifs-table thead .th-group-analyse {
  background: color-mix(in srgb, var(--bg-panel-head) 93%, var(--color-alert));
  color: var(--color-alert);
}
#tarifs-table thead tr:last-child th:nth-child(n+33):nth-child(-n+34):hover { color: var(--text-panel); }

/* Stratégie Pricing : colonnes 35-37 */
#tarifs-table thead tr:last-child th:nth-child(n+35):nth-child(-n+37),
#tarifs-table thead .th-group-strategy {
  background: color-mix(in srgb, var(--bg-panel-head) 91%, var(--color-info));
  color: var(--color-info);
}
#tarifs-table thead tr:last-child th:nth-child(n+35):nth-child(-n+37):hover { color: var(--text-panel); }

/* Correction : colonnes 38 et au-delà */
#tarifs-table thead tr:last-child th:nth-child(n+38),
#tarifs-table thead .th-group-correction {
  background: color-mix(in srgb, var(--bg-panel-head) 91%, var(--color-ok));
  color: var(--color-ok);
}
#tarifs-table thead tr:last-child th:nth-child(n+38):hover { color: var(--text-panel); }

/* Séparateurs verticaux entre groupes dans les lignes de données */
#tarifs-table tbody td:nth-child(3),
#tarifs-table thead tr:last-child th:nth-child(3) {
  border-left: 2px solid rgba(var(--color-accent-rgb), .15);
}
#tarifs-table tbody td:nth-child(9),
#tarifs-table thead tr:last-child th:nth-child(9) {
  border-left: 2px solid rgba(var(--color-ok-rgb), .15);
}
#tarifs-table tbody td:nth-child(17),
#tarifs-table thead tr:last-child th:nth-child(17) {
  border-left: 2px solid rgba(var(--color-amber-rgb), .15);
}
#tarifs-table tbody td:nth-child(28),
#tarifs-table thead tr:last-child th:nth-child(28) {
  border-left: 2px solid rgba(var(--color-info-rgb), .15);
}
#tarifs-table tbody td:nth-child(33),
#tarifs-table thead tr:last-child th:nth-child(33) {
  border-left: 2px solid rgba(var(--color-alert-rgb), .12);
}

/* ── Résumé de confirmation ──────────────────────────────────────────────── */
.import-confirm-summary {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--input-panel-bg);
  border: 1px solid var(--border-panel);
  border-radius: 10px;
}

.confirm-stat {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .875rem;
}

.confirm-stat > i {
  font-size: 1.2rem;
  color: var(--text-panel-muted);
}

.confirm-stat__label {
  display: block;
  font-size: .7rem;
  color: var(--text-panel-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}

.confirm-stat strong {
  color: var(--text-panel);
  font-size: 1rem;
}

/* ── Stats résultat ──────────────────────────────────────────────────────── */
.import-result-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.result-stat {
  flex: 1;
  min-width: 160px;
  padding: 1.25rem;
  border-radius: 10px;
  text-align: center;
  border: 1px solid var(--border-panel);
}

.result-stat--ok {
  background: var(--color-ok-bg);
  border-color: rgba(var(--color-ok-rgb), .3);
}

.result-stat--warn {
  background: var(--color-amber-bg);
  border-color: rgba(var(--color-amber-rgb), .3);
}

.result-stat__val {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: .4rem;
}

.result-stat--ok   .result-stat__val { color: var(--color-ok); }
.result-stat--warn .result-stat__val { color: #a16207; }
.result-stat--info {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.result-stat--info .result-stat__val { color: var(--accent); }

.result-stat__lbl {
  font-size: .8rem;
  color: var(--text-panel-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Étoile obligatoire ──────────────────────────────────────────────────── */
.req-star { color: var(--color-alert); margin-right: .1rem; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .import-panel { padding: 1.25rem; }
  .import-form__row { flex-direction: column; }
  .mapping-row { flex-direction: column; align-items: flex-start; }
  .mapping-select { width: 100%; min-width: 0; }
  .wizard-connector { max-width: 30px; }
  .wizard-step__label { display: none; }
}


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_tiles-legacy.css (2.18 KB) */
/* ───────────────────────────────────────────────────────────────────────── */



/* ── Tableau tuiles — alignement centré colonnes 2/3/4 ──────────────────── */
.data-table td:nth-child(2),
.data-table td:nth-child(3),
.data-table td:nth-child(4) { text-align: center; }
.data-table th:nth-child(2),
.data-table th:nth-child(3),
.data-table th:nth-child(4) { text-align: center; }

/* Texte de bienvenue */
.admin-welcome {
    color: var(--text-light);
    margin: 0 0 2rem 0;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Description dans les panels */

/* Actions dans les panels */
.panel__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Status badge */
.status-badge {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.status-badge--warning {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

/* Bouton de retour avec espacement */
.btn-back {
    margin-top: 1rem;
}

/* Prévisualisation icône tuile dans le tableau */
.tile-icon-preview {
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: .6rem;
    background: var(--bg-panel);
    border: 1px solid var(--border-panel);
    border-radius: 14px;
    box-shadow: var(--shadow-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
    cursor: pointer;
}

.tile-icon-preview:hover {
    transform: translateY(-2px);
    background-color: #3e56ce;
    border-color: rgba(var(--color-accent-rgb), .65);
    box-shadow: var(--shadow-strong), 0 0 0 2px rgba(var(--color-accent-rgb), .4);
}

.tile-icon-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%); /* icône sombre sur fond blanc */
}

.tile-icon-preview:hover img {
    filter: brightness(0) invert(1); /* icône blanche sur fond accent */
}

.tile-icon-preview i {
    filter: brightness(0) saturate(100%);
    transition: filter .18s ease;
}

.tile-icon-preview:hover i {
    filter: brightness(0) invert(1);
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_tiles-modal.css (6.73 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* =============================================================================
   TILES MODAL — Surcharges spécifiques à la modale d'édition de tuiles
   Les styles généraux de modale sont dans 3-components/_modal.css
   ============================================================================= */

/* ── Catégories — état vide ──────────────────────────────────────────────── */
.cat-empty-state {
    color: #94a3b8;
    font-size: .85rem;
    text-align: center;
    margin: 0;
    padding: .5rem 0;
}

/* ── FA Icon Picker tiles ────────────────────────────────────────────────── */
#faTileIconPicker { z-index: 10001; }

.fa-tile-search { margin-bottom: .75rem; }

#fa-tile-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: .5rem;
    height: 55vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    padding-right: 4px;
    align-content: start;
}

.fa-icon-grid-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: .5rem .25rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
    font-size: .6rem;
    color: #475569;
    transition: background .12s, color .12s;
}
.fa-icon-grid-btn i { font-size: 1.1rem; }
.fa-icon-grid-btn span {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 58px;
}
.fa-icon-grid-btn.is-active { background: #3e56ce; color: #fff; }

/* ── Boutons sélecteur icône dans la modale édition ─────────────────────── */
.tile-icon-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ── Statut toggle row ───────────────────────────────────────────────────── */
.tile-status-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .25rem;
}

.tile-status-label {
    font-size: .875rem;
    font-weight: 600;
}

/* ── Largeur spécifique ──────────────────────────────────────────────────── */
#editModal .modal {
    width: min(780px, 94vw);
}

/* ── Champs du tile-editor ───────────────────────────────────────────────── */
#editModal .tile-editor__fields { gap: .25rem; }
#editModal .tile-editor__fields label { margin-bottom: 0; }

/* ── Tile preview — fidèle au dashboard ─────────────────────────────────── */
#editModal .tile-editor__preview .tile { width: 100%; }
#editModal .tile__icon i { font-size: 2rem; color: var(--text-panel); line-height: 1; filter: brightness(0) saturate(100%); }
#editModal .tile-editor__preview .tile:hover,
#editModal .tile-editor__preview .tile:focus-visible {
    background-color: #3e56ce; /* rgba(accent,.75) composité sur --bg-main #0a0c52 */
    border-color: rgba(var(--color-accent-rgb), 0.65);
    color: var(--text-on-accent);
}
#editModal .tile-editor__preview .tile:hover .tile__icon i,
#editModal .tile-editor__preview .tile:focus-visible .tile__icon i {
    filter: brightness(0) invert(1);
}

/* ── Reset span dans les badges catégorie (spécifique editModal) ─────────── */
#editModal .category-badge span {
    display: inline;
    margin: 0;
    font-size: inherit; font-weight: inherit;
    color: inherit; text-transform: inherit; letter-spacing: inherit;
    line-height: 1;
}

/* ── Category badges ────────────────────────────────────────────────────── */
#editModal .category-badge {
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; border-radius: 99px; padding: 6px 14px;
    font-size: .82rem; font-weight: 600; cursor: pointer;
    border: 2.5px solid transparent; opacity: .55;
    transition: opacity .15s, border-color .15s, box-shadow .15s, transform .15s;
}
#editModal .category-badge:hover {
    opacity: 1; transform: scale(1.04); box-shadow: 0 0 14px 0 currentColor;
}
#editModal .category-radio:checked + .category-badge {
    opacity: 1; border-color: transparent;
    box-shadow: inset 0 0 0 2.5px currentColor, 0 0 12px 0 currentColor;
    font-weight: 700;
}

/* ── Category — palette par position ────────────────────────────────────── */
#editModal .category-selector label:nth-of-type(1) { background: rgba(59,130,246,.1);  color: #3b82f6; border-color: rgba(59,130,246,.25); }
#editModal .category-selector label:nth-of-type(2) { background: rgba(20,184,166,.1);  color: #0d9488; border-color: rgba(20,184,166,.25); }
#editModal .category-selector label:nth-of-type(3) { background: rgba(245,158,11,.1);  color: #d97706; border-color: rgba(245,158,11,.25); }
#editModal .category-selector label:nth-of-type(4) { background: rgba(139,92,246,.1);  color: #7c3aed; border-color: rgba(139,92,246,.25); }
#editModal .category-selector label:nth-of-type(5) { background: rgba(244,63,94,.1);   color: #e11d48; border-color: rgba(244,63,94,.25); }
#editModal .category-selector label:nth-of-type(6) { background: rgba(34,197,94,.1);   color: #16a34a; border-color: rgba(34,197,94,.25); }

/* ── Modale catégories ───────────────────────────────────────────────────── */
.categories-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.category-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.category-item__handle {
    color: #94a3b8;
    cursor: grab;
    padding: .25rem;
    flex-shrink: 0;
}

.category-item__handle:hover { color: var(--color-accent); }

.category-item__input {
    flex: 1;
}

.category-item__delete {
    flex-shrink: 0;
    width: 34px; height: 34px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; border: none;
    background: rgba(220,38,38,.12); color: #dc2626;
    cursor: pointer; transition: background .12s;
}
.category-item__delete:hover { background: rgba(220,38,38,.22); }

.categories-add {
    display: flex;
    gap: .5rem;
    align-items: center;
}


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_tiles-overrides.css (6.65 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════
   MODAL OVERRIDES — light theme
   ═══════════════════════════════ */

.overrides-users-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* Item utilisateur */
.override-user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .85rem 1rem;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    transition: border-color .15s, background .15s;
}

.override-user-item:hover { background: #fff; border-color: #cbd5e1; }

.override-user-item--modified {
    border-color: rgba(245,158,11,.5);
    background: rgba(245,158,11,.04);
}

/* Info utilisateur */
.override-user-info { flex: 1; display: flex; flex-direction: column; gap: .35rem; }

.override-user-name {
    display: flex; align-items: center; gap: .5rem;
    font-size: .95rem; font-weight: 600; color: #1e293b;
}
.override-user-name i { color: #94a3b8; }

.override-user-email { font-size: .8rem; color: #64748b; }

.override-user-role { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }

/* Actions */
.override-user-actions { display: flex; align-items: center; gap: .75rem; }
.override-user-controls { display: flex; align-items: center; gap: .75rem; }
.override-user-reset { display: flex; justify-content: flex-end; }

/* Bouton reset */
.btn-reset-override {
    background: #f1f5f9; border: 1px solid #e2e8f0;
    border-radius: 8px; color: #64748b;
    cursor: pointer; transition: all .15s;
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
}
.btn-reset-override:hover { background: #fef3c7; border-color: #fde68a; color: #d97706; }
.btn-reset-override-placeholder { width: 34px; height: 1px; }

/* Radio grant/deny */
.override-radio-group { display: flex; align-items: center; cursor: pointer; }
.override-radio-group input[type="radio"] { display: none; }

.override-radio {
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem .9rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: .875rem; font-weight: 600;
    transition: all .15s; opacity: .55;
}
.override-radio-group:hover .override-radio { opacity: .8; }
.override-radio-group input[type="radio"]:checked + .override-radio {
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), .12);
}

.override-radio--grant { color: #16a34a; border-color: #bbf7d0; }
.override-radio-group input[type="radio"]:checked + .override-radio--grant {
    background: #f0fdf4; border-color: #4ade80;
}

.override-radio--deny { color: #dc2626; border-color: #fecdd3; }
.override-radio-group input[type="radio"]:checked + .override-radio--deny {
    background: #fef2f2; border-color: #f87171;
}

/* ── Bannière info (rôles requis par défaut) ─────────────────────────────── */
.overrides-info-banner {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
    background: rgba(var(--color-accent-rgb), .06);
    border: 1px solid rgba(var(--color-accent-rgb), .2);
    border-radius: 9px;
    margin-bottom: .75rem;
}

.overrides-info-banner__icon {
    color: var(--color-accent);
    flex-shrink: 0;
}

.overrides-info-banner__text {
    font-size: .875rem;
    color: #475569;
}

.overrides-info-banner__text strong { color: #1e293b; }

/* ── Barre de recherche ──────────────────────────────────────────────────── */
.overrides-search-wrap {
    position: relative;
    margin-bottom: .75rem;
}

.overrides-search-icon {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: .85rem;
    pointer-events: none;
}

.overrides-search-input { padding-left: 2.25rem; }

/* ── Compteur ────────────────────────────────────────────────────────────── */
.overrides-counter {
    margin-bottom: .75rem;
    font-size: .85rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.overrides-modified-alert {
    color: #f59e0b;
    font-weight: 600;
}

/* ── État vide ───────────────────────────────────────────────────────────── */
.overrides-empty {
    text-align: center;
    padding: 2rem;
    color: #94a3b8;
}

.overrides-empty i {
    font-size: 2rem;
    margin-bottom: .75rem;
    display: block;
}

/* ── Badge override (avertissement jaune) ────────────────────────────────── */
.badge-override {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    margin-left: .5rem;
    padding: .25rem .6rem;
    border-radius: 99px;
    background: rgba(245,158,11,.2);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,.4);
    font-weight: 600;
}

/* ── Label accès (Autorisé / Refusé) ─────────────────────────────────────── */
.override-access-label {
    font-size: .8rem;
    font-weight: 600;
}

.toggle-switch--inline { margin: 0; }

/* Bouton overrides dans le tableau */
.btn-overrides {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .4rem .85rem;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    color: rgba(255,255,255,.75);
    font-size: .8rem; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.btn-overrides:hover {
    background: rgba(var(--color-accent-rgb), .15);
    border-color: var(--color-accent);
    color: #fff;
}

.btn-overrides--active::after {
    content: attr(data-count);
    position: absolute; top: -7px; right: -7px;
    display: flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: #f59e0b; color: #fff;
    border-radius: 9px; font-size: .65rem; font-weight: 700;
    box-shadow: 0 2px 6px rgba(245,158,11,.4);
}

/* Responsive */
@media (max-width: 640px) {
    .override-user-item { flex-direction: column; align-items: stretch; gap: .75rem; }
    .override-user-actions { justify-content: space-between; }
    .override-radio { flex: 1; justify-content: center; }
}


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_tiles-reorder.css (5.92 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* Info banner — centré dans le content-header */
.reorder-info {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    color: rgba(255,255,255,.8);
    font-size: .875rem;
    width: fit-content;
}

/* Catégorie */
.reorder-category {
    margin-bottom: 1.5rem;
}

.reorder-category__title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.reorder-category__title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

/* Grille de tuiles */
.reorder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 175px));
    justify-content: center;
    gap: 1.5rem;
    padding: 0.25rem;
}

/* Tuile réorganisable — même style que le dashboard */
.reorder-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 105px;
    padding: 10px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border-panel);
    border-radius: 20px;
    box-shadow: var(--shadow-panel);
    cursor: grab;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.reorder-tile:hover {
    transform: translateY(-2px);
    background-color: #3e56ce;
    border-color: rgba(var(--color-accent-rgb), .65);
    box-shadow: var(--shadow-strong), 0 0 0 2px rgba(var(--color-accent-rgb), .40);
}

/* Poignée de drag */
.reorder-tile__drag-handle {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: var(--text-muted);
    font-size: 1.25rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.reorder-tile:hover .reorder-tile__drag-handle {
    opacity: 1;
    color: var(--color-accent);
}

/* Icône de la tuile */
.reorder-tile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
}

.reorder-tile__icon img {
    width: 32px;
    height: 32px;
    filter: brightness(0) saturate(100%);
}

.reorder-tile:hover .reorder-tile__icon img {
    filter: brightness(0) invert(1);
}

.reorder-tile__icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-panel);
    fill: none;
    stroke-width: 2;
}

.reorder-tile:hover .reorder-tile__icon svg { stroke: #fff; }

/* Icônes FontAwesome dans le reorder */
.reorder-tile__icon i {
    font-size: 1.6rem;
    color: var(--text-panel);
    line-height: 1;
}

.reorder-tile:hover .reorder-tile__icon i { color: #fff; }

/* Titre de la tuile */
.reorder-tile__title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-panel);
    text-align: center;
    line-height: 1.3;
}

.reorder-tile:hover .reorder-tile__title { color: #fff; }

/* État pendant le drag - Tuile fantôme (emplacement cible) */
.reorder-tile.sortable-ghost {
    opacity: 1 !important;
    background: rgba(59, 130, 246, 0.2) !important;
    border: 2px dashed #3b82f6 !important;
    box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.3) !important;
}

.reorder-tile.sortable-ghost .reorder-tile__icon,
.reorder-tile.sortable-ghost .reorder-tile__title,
.reorder-tile.sortable-ghost .reorder-tile__drag-handle {
    opacity: 0.3;
}

/* Tuile en cours de déplacement */
.reorder-tile.sortable-drag {
    opacity: 0.9;
    transform: rotate(3deg) scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    cursor: grabbing !important;
    z-index: 9999;
    border-color: var(--color-accent);
}

/* Actions — déplacées dans content-header */

/* Responsive */
@media (max-width: 768px) {
    .reorder-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1rem;
    }
    
    .reorder-tile {
        min-height: 160px;
        padding: 1rem;
    }
}

/* Catégorie vide */
.reorder-grid--empty {
    min-height: 120px;
    border: 2px dashed rgba(var(--color-accent-rgb), .25);
    border-radius: 16px;
    position: relative;
}

.reorder-grid--empty::before {
    content: 'Glissez une tuile ici';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.3);
    font-size: .875rem;
    font-style: italic;
    pointer-events: none;
}

/* Tuile inactive */
.reorder-tile--inactive { opacity: .45; }
.reorder-tile--inactive:hover { opacity: .7; }

.reorder-tile__status {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* État pendant le drag */
.reorder-tile.sortable-ghost {
    opacity: 0.2;
    background: rgba(var(--color-accent-rgb), 0.1);
    border: 2px dashed var(--color-accent);
}

.reorder-tile.sortable-drag {
    opacity: 0.9;
    transform: rotate(3deg) scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    cursor: grabbing !important;
    z-index: 9999;
}

/* États de drag supplémentaires */
.sortable-chosen {
    opacity: 0.8;
}

/* Classe fallback pour le drag */
.sortable-fallback {
    opacity: 0.9 !important;
    transform: rotate(3deg) scale(1.05) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    cursor: grabbing !important;
    z-index: 9999 !important;
}

/* Mobile */
@media (max-width: 768px) {
    .reorder-tile {
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
    }
    .sortable-fallback {
        transform: rotate(2deg) scale(1.03) !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_roles.css (3.71 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ── Icône de prévisualisation ────────────────────────────────────────────── */
.role-icon-preview {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: transform .18s ease, box-shadow .18s ease;
}

.role-row:hover .role-icon-preview {
    transform: translateY(-2px);
}

/* ── Spinner niveau hiérarchique ─────────────────────────────────────────── */
.role-level-spinner {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    overflow: hidden;
    background: #f8fafc;
    width: 160px;
    transition: border-color .15s, box-shadow .15s;
}

.role-level-spinner:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 12px 0 var(--color-accent);
}

.role-level-spinner button {
    width: 38px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: .65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.role-level-spinner button:hover { background: rgba(0,0,0,.04); }

.role-level-spinner input[type=number] {
    flex: 1;
    border: none;
    outline: none;
    box-shadow: none !important;
    text-align: center;
    background: transparent;
    font-size: .9rem;
    font-family: inherit;
    color: #1e293b;
}

.role-level-spinner input[type=number]::-webkit-inner-spin-button,
.role-level-spinner input[type=number]::-webkit-outer-spin-button { display: none; }
.role-level-spinner input[type=number] { -moz-appearance: textfield; }

/* ── FA Icon Picker ──────────────────────────────────────────────────────── */
.fa-icon-picker-overlay { z-index: 10001; }

.fa-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: .5rem;
    max-height: 55vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    padding-right: 4px;
}

.fa-search-input { margin-bottom: .75rem; }

/* ── Formulaire rôle ─────────────────────────────────────────────────────── */
.role-form-appearance {
    display: flex;
    gap: .75rem;
    align-items: flex-end;
}

.role-color-input {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    border: 1.5px solid #e2e8f0;
    cursor: pointer;
    padding: 2px;
    display: block;
}

.role-icon-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
    color: #1e293b;
    font-size: 1.1rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.role-icon-btn:hover {
    border-color: var(--color-accent);
    background: #fff;
}

/* ── Preview rôle ────────────────────────────────────────────────────────── */
.role-preview {
    margin-top: .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.role-preview__identity {
    display: flex;
    align-items: center;
    gap: .75rem;
}


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_settings.css (1.92 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* =============================================================================
   Page Paramètres système
   ============================================================================= */

/* ── Badges statut sur les cards ─────────────────────────────────────────── */
.settings-status {
    width: 22px;
    height: 22px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-status i { font-size: .6rem; }

.settings-status--ok {
    background: rgba(74,222,128,.2);
    border: 1.5px solid rgba(74,222,128,.5);
    color: #4ade80;
}

.settings-status--warn {
    background: rgba(251,191,36,.2);
    border: 1.5px solid rgba(251,191,36,.5);
    color: #fbbf24;
}

/* ── Pied de card (bouton Tester) ────────────────────────────────────────── */
.settings-card__footer {
    margin-top: .6rem;
    display: flex;
    justify-content: flex-end;
}

/* ── Champs dans la modale ───────────────────────────────────────────────── */
.settings-field--mono {
    font-family: monospace;
    letter-spacing: .05em;
}

.settings-field__status {
    display: block;
    margin-top: .3rem;
    font-weight: 600;
}

.settings-field__status--ok      { color: #16a34a; }
.settings-field__status--missing  { color: #dc2626; }

.settings-field__desc {
    color: var(--text-muted);
    display: block;
    margin-bottom: .25rem;
}

.settings-field__updated {
    color: #94a3b8;
    display: block;
    margin-top: .2rem;
    font-size: .75rem;
}

.settings-field__updated i { font-size: .6rem; }

.settings-field__actions {
    display: flex;
    gap: .4rem;
    margin-top: .5rem;
    flex-wrap: wrap;
}


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_pdv.css (6.29 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* =============================================================================
   Page Points de Vente
   ============================================================================= */

/* ── Alignements colonnes tableau PDV ───────────────────────────────────── */
.data-table td.pdv-cell-name,
.data-table th:nth-child(2)  { text-align: left; }
.data-table td:nth-child(5)  { text-align: center; }
.data-table th:nth-child(5)  { text-align: center; }

/* ── Badges utilisateurs ─────────────────────────────────────────────────── */
.user-count-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 99px;
    font-size: .78rem;
    font-weight: 600;
    background: rgba(99,102,241,.12);
    color: #6366f1;
    border: 1.5px solid rgba(99,102,241,.3);
}

/* ── Boutons actions ligne ────────────────────────────────────────────────── */
.pdv-row-action { opacity: 0.3; transition: opacity .15s ease; }
.pdv-row-action:not([disabled]) { opacity: 1; }

/* ── Cellules tableau ─────────────────────────────────────────────────────── */
.pdv-cell-name { font-weight: 600; color: #1e293b; }

.pdv-logo-composite { max-height: 40px; max-width: 160px; display: block; border-radius: 4px; }

.pdv-logo-simple {
    max-height: 32px;
    max-width: 130px;
    display: block;
    background: #fff;
    border-radius: 4px;
    padding: .2rem .4rem;
    border: 1px solid #f1f5f9;
}

.pdv-logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 32px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #cbd5e1;
}

.pdv-logo-placeholder i { font-size: .8rem; }

.pdv-code-badge {
    font-family: monospace;
    font-size: .82rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    padding: .15rem .45rem;
    border-radius: 4px;
}

.pdv-software-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 600;
}

.pdv-software-badge--sapnoe   { background: #eff6ff; color: #3b82f6; }
.pdv-software-badge--mercalys { background: #fdf4ff; color: #a855f7; }

.pdv-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 600;
}

.pdv-status-badge--active   { background: #f0fdf4; color: #16a34a; }
.pdv-status-badge--inactive { background: #fef2f2; color: #dc2626; }

/* ── Modal liste utilisateurs ────────────────────────────────────────────── */
.pdv-users-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .5rem;
}

.pdv-user-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.pdv-user-item:hover { border-color: var(--color-accent); background: #fff; }
.pdv-user-item:has(input:checked) {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), .04);
}
.pdv-user-item input[type=checkbox] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-accent);
}
.pdv-user-item__info { flex: 1; min-width: 0; }
.pdv-user-item__name {
    font-weight: 600;
    font-size: .875rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pdv-user-item__email {
    font-size: .75rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Modal PDV ───────────────────────────────────────────────────────────── */
.modal--pdv { max-width: 600px; }

.pdv-status-toggle-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .25rem;
}

.pdv-status-label {
    font-size: .875rem;
    color: #64748b;
    font-weight: 600;
}

/* ── Logo composite ──────────────────────────────────────────────────────── */
.logo-composite {
    position: relative;
    display: inline-block;
    background: #fff;
    border-radius: 6px;
    padding: .45rem .9rem .45rem .9rem;
    line-height: 0;
}
.logo-composite img { max-height: 60px; max-width: 260px; display: block; }
.logo-composite__city { position: absolute; text-transform: uppercase; line-height: 1; }

/* ── Modal Enseignes ─────────────────────────────────────────────────────── */
.logo-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: .5rem;
    max-height: 150px;
    overflow-y: auto;
    scrollbar-width: thin;
    margin-bottom: .5rem;
}

.brand-preview-wrap {
    margin-top: .75rem;
    text-align: center;
    padding: .75rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-composite-preview {
    position: relative;
    background: #fff;
    border-radius: 6px;
    padding: .45rem .9rem 1.4rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.brand-composite-preview img {
    max-height: 50px;
    max-width: 180px;
    display: block;
    object-fit: contain;
}

.brand-preview-text {
    position: absolute;
    bottom: 4px;
    right: .85rem;
    font-size: 1rem;
    color: #2d2d2d;
    white-space: nowrap;
}

.brand-preview-hint { color: #94a3b8; font-size: .8rem; margin: 0; }


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_users.css (4.77 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Page Gestion des Utilisateurs
   =============================== */

/* ── Layout topbar ───────────────────────────────────────────────────────── */
.app-topbar-wrap { flex-shrink: 0; }
#users-topbar-toggle { margin-bottom: -16px; }

.users-filters-bar {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 1rem;
}

/* ── Centrage colonne overrides ──────────────────────────────────────────── */
.data-table td:nth-child(5) { text-align: center; }

/* ── Textes atténués ────────────────────────────────────────────────────── */
.text-no-role {
    opacity: .5;
    font-size: .8rem;
    color: #94a3b8;
}

.text-never-connected { opacity: .5; }

/* Inputs date avec icône blanche */
.date-input {
    color-scheme: dark;
    cursor: pointer;
    background: var(--ui-field-bg);
    border: 1px solid var(--ui-field-border);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
}

.date-input::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(2);
    cursor: pointer;
    opacity: 0.9;
}

.date-input:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

.date-input:focus {
    outline: none;
    border-color: rgba(var(--color-accent-rgb), 0.8);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.25);
}

/* Séparateur de date */
#dateRangeSeparator {
    display: none;
    align-items: center;
    padding: 0 0.5rem;
}

/* Options de select avec badges (simulé avec emojis) */
.ui-select--with-badges option {
    padding-left: 1.5rem;
}

/* ═══════════════════════════════
   BADGE OVERRIDES UTILISATEUR
   ═══════════════════════════════ */

.btn-overrides-user {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    background: transparent;
    border: 1.5px solid #e2e8f0;
    border-radius: 99px;
    color: #94a3b8;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.btn-overrides-user i { font-size: .72rem; }
.btn-overrides-user__count { font-size: .75rem; }

.btn-overrides-user:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), .06);
}

/* État actif (overrides présents) */
.btn-overrides-user--active {
    border-color: rgba(var(--color-amber-rgb), 0.5);
    color: var(--color-amber);
    background: rgba(var(--color-amber-rgb), 0.08);
}

.btn-overrides-user--active:hover {
    background: rgba(var(--color-amber-rgb), 0.15);
    border-color: var(--color-amber);
}

/* Icône */
.btn-overrides-user i {
    font-size: 0.9rem;
    opacity: 0.7;
}

.btn-overrides-user--active i {
    opacity: 1;
}

/* ═══════════════════════════════
   MODAL OVERRIDES UTILISATEUR
   ═══════════════════════════════ */

#userOverridesModal {
    display: none;
    align-items: center;
    justify-content: center;
}

/* Items d'override dans la liste */
.user-overrides-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.user-override-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.user-override-item--granted { border-color: rgba(22,163,74,.3); background: rgba(22,163,74,.04); }
.user-override-item--denied  { border-color: rgba(220,38,38,.3); background: rgba(220,38,38,.04); }

.user-override-tile { flex: 1; display: flex; align-items: center; gap: .75rem; }
.user-override-tile__icon {
    width: 40px; height: 40px; padding: .4rem; flex-shrink: 0;
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.user-override-tile__icon img { width: 100%; height: 100%; object-fit: contain; }
.user-override-tile__title { font-weight: 600; font-size: .875rem; color: #1e293b; }
.user-override-tile__default { font-size: .75rem; color: #94a3b8; }
.user-override-status__badge { font-weight: 600; font-size: .8rem; }

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_labels.css (6.29 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* =========================================
   Labels (Gestion BDD Étiquettes)
   ========================================= */

/* =========================================
   Codes non trouvés - Affichage amélioré
   ========================================= */

#unknown-codes-list {
    max-height: 400px;
    overflow-y: auto;
}

.code-item {
    padding: 0.875rem;
    margin-bottom: 0.75rem;
    background: var(--card-bg, rgba(255, 255, 255, 0.03));
    border-radius: 6px;
    border-left: 3px solid var(--error-color, #e74c3c);
    transition: all 0.2s ease;
}

.code-item:hover {
    background: var(--hover-bg, rgba(255, 255, 255, 0.08));
    transform: translateX(2px);
}

.code-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.code-item-code {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--error-color, #e74c3c);
}

.code-item-count {
    background: var(--primary-color, #3498db);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

.code-item-details {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-muted, #95a5a6);
    margin-bottom: 0.5rem;
}

.code-item-detail {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.code-item-detail i {
    font-size: 0.8rem;
    opacity: 0.7;
}

.code-item-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
}

.code-item-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-muted, #95a5a6);
}

.code-item-btn:hover {
    background: var(--success-color, #27ae60);
    color: white;
    transform: scale(1.1);
}

.code-item-btn i {
    font-size: 1rem;
}

.code-item-btn--resolve {
    background: var(--success-color, #27ae60);
    color: white;
}

.code-item-btn--resolve:hover {
    background: #229954;
}

/* État vide */
.codes-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted, #95a5a6);
}

.codes-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.codes-empty-state p {
    font-size: 1.1rem;
}

/* =========================================
   Historique des mises à jour
   ========================================= */

#updates-history {
    min-height: 100px;
}

.update-item {
    display: grid;
    grid-template-columns: 200px 1fr 150px 150px;
    gap: 1rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color, #3a4a5f);
    align-items: center;
}

.update-item:hover {
    background: var(--hover-bg, rgba(255, 255, 255, 0.05));
}

.update-item .filename {
    font-family: 'Courier New', monospace;
    color: var(--text-primary, #ecf0f1);
}

.update-item .uploader {
    font-size: 0.9rem;
    color: var(--text-muted, #95a5a6);
}

.update-item .date {
    font-size: 0.85rem;
    color: var(--text-muted, #95a5a6);
}

/* =========================================
   Progress bar upload
   ========================================= */

.labels-progress-bar {
    width: 100%;
    height: 20px;
    background: var(--input-bg, #2c3e50);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 1.5rem;
}

.labels-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--success-color, #27ae60);
    transition: width 0.3s ease;
}

.labels-upload-status {
    margin-top: 0.5rem;
    color: var(--text-muted, #95a5a6);
    font-size: 0.9rem;
    text-align: center;
}

/* =========================================
   Statut PC items
   ========================================= */

.labels-status-item {
    padding: 1rem;
    background: var(--card-bg, rgba(255, 255, 255, 0.05));
    border-radius: 6px;
    border-left: 3px solid var(--primary-color, #3498db);
}

.labels-status-item--success {
    border-left-color: var(--success-color, #27ae60);
}

.labels-status-label {
    font-size: 0.85rem;
    color: var(--text-muted, #95a5a6);
    margin-bottom: 0.5rem;
    display: block;
}

.labels-status-value {
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--text-light, #ecf0f1);
    display: block;
}

/* =========================================
   Espacement et loading
   ========================================= */

.labels-history-section {
    margin-top: 1.5rem;
}

.labels-loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted, #95a5a6);
}

/* =========================================
   Boutons header compacts
   ========================================= */

.labels-header-btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.labels-header-btn span {
    margin-left: 0.3rem;
}

/* =========================================
   Fix FileDrop
   ========================================= */

.labels-filedrop-fix .filedrop__center {
    max-width: 100%;
}

.labels-filedrop-fix .filedrop__browse {
    max-width: 100%;
    word-break: break-word;
}

.labels-filedrop-fix .filedrop__hint {
    font-size: 0.85rem;
    word-break: break-word;
}

/* Label FileDrop */
.labels-filedrop-fix .field-label {
    color: var(--text-light, #ecf0f1);
}

/* =========================================
   Responsive
   ========================================= */

@media (max-width: 75rem) {
    .labels-header-btn span {
        display: none;
    }
    
    .labels-header-btn {
        padding: 0.4rem 0.5rem;
    }
}

@media (max-width: 48rem) {
    .code-item-details {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .update-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* Informations secondaires (entre parenthèses) */
.labels-status-value small,
.labels-status-secondary {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted, #95a5a6);
    opacity: 0.85;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 5-pages/_rayon.css (28.77 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* =============================================================================
   RAYON MODULE — Composants réutilisables
   Utilisé par : import, planches, audit, historique, diff
   ============================================================================= */

/* ── 1. CARTE BLANCHE (fond clair contrasté sur fond sombre du site) ────────── */

.card-white {
    background: #ffffff;
    border-radius: 16px;
    padding: 1rem 2rem 1.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.12);
    margin-bottom: 2rem;
}

/* Header de carte : retour à gauche | titre centré | action à droite */
.card-white__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 1.1rem;
}

/* Titre dans le header */
.card-white__title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 .3rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.card-white__subtitle {
    font-size: .8rem;
    color: #64748b;
    margin: 0;
    font-weight: 400;
}

/* Séparateur gradient accent */
.card-white__sep {
    height: 3px;
    background: var(--accent, #4f6ef7);
    border-radius: 99px;
    margin-bottom: 0.75rem;
}

/* Séparateur interne léger (entre sections de la carte) */
.card-white hr,
.card-sep-light {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 1.25rem 0;
}

/* ── 2. BOUTON RETOUR (secondary, sur fond blanc) ───────────────────────────── */

.btn-back-light {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .85rem;
    border-radius: 8px;
    background: transparent;
    border: 1.5px solid #e2e8f0;
    color: #64748b;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    cursor: pointer;
}
.btn-back-light:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #374151;
}
.btn-back-light i { font-size: .72rem; }

/* ── 3. INPUTS ET SELECTS SUR FOND CLAIR (avec glow bleu au hover/focus) ────── */

.inp-light {
    display: block;
    width: 100%;
    padding: .65rem .9rem;
    border-radius: 9px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #1e293b;
    font-size: .9rem;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.inp-light:hover {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.inp-light:focus {
    outline: none;
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}
.inp-light option { background: #f8fafc; color: #1e293b; }

/* Label pour champs dans carte blanche */
.form-label-light {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: .4rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* ── 4. DROP ZONE FICHIER ───────────────────────────────────────────────────── */

.drop-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.drop-zone:hover,
.drop-zone.is-over {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 4px rgba(59,130,246,.08);
}
.drop-zone.has-file {
    border-color: #16a34a;
    background: #f0fdf4;
    box-shadow: 0 0 0 4px rgba(22,163,74,.07);
}
.drop-zone__icon {
    font-size: 2rem;
    color: #94a3b8;
    margin-bottom: .5rem;
    transition: color .2s, transform .2s;
}
.drop-zone:hover .drop-zone__icon  { color: #3b82f6; transform: translateY(-2px); }
.drop-zone.has-file .drop-zone__icon { color: #16a34a; transform: none; }
.drop-zone__text  { font-size: .9rem; color: #64748b; font-weight: 600; }
.drop-zone__sub   { font-size: .72rem; color: #94a3b8; margin-top: .2rem; }
.drop-zone__hint  { font-size: .7rem; color: #b0b8c9; margin-top: .45rem; font-style: italic; line-height: 1.4; }
.drop-zone.has-file .drop-zone__text { color: #15803d; }

/* Bouton reset (croix rouge, coin haut-droit de la dropzone) */
.drop-reset {
    position: absolute;
    top: .55rem; right: .55rem;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #ef4444;
    border: none; cursor: pointer;
    display: none;
    align-items: center; justify-content: center;
    color: #fff; font-size: .6rem; font-weight: 900;
    box-shadow: 0 1px 4px rgba(239,68,68,.4);
    transition: background .15s, transform .15s;
    z-index: 10;
}
.drop-reset:hover   { background: #dc2626; transform: scale(1.1); }
.drop-reset.visible { display: flex; }

/* ── 5. TABLEAU DE MAPPING COLONNES ─────────────────────────────────────────── */


.map-field-name { font-size: .88rem; font-weight: 600; color: #1e293b; }
.map-field-hint { font-size: .72rem; color: #94a3b8; margin-top: .1rem; }

.badge-req {
    display: inline-block;
    padding: .1rem .45rem; border-radius: 99px;
    font-size: .6rem; font-weight: 800;
    vertical-align: middle; margin-left: .35rem;
    background: #fee2e2; color: #b91c1c;
}
.badge-opt {
    display: inline-block;
    padding: .1rem .45rem; border-radius: 99px;
    font-size: .6rem; font-weight: 800;
    vertical-align: middle; margin-left: .35rem;
    background: #f1f5f9; color: #94a3b8;
}

/* Select de mapping */
.map-sel {
    width: 100%;
    padding: .45rem .7rem;
    border-radius: 7px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #1e293b;
    font-size: .83rem;
    appearance: none; -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.map-sel:focus    { outline: none; border-color: #6366f1; background: #eef2ff; }
.map-sel option   { background: #f8fafc; color: #1e293b; }
.map-sel.detected { border-color: #16a34a; background: #f0fdf4; }

.detect-badge          { display: inline-flex; align-items: center; gap: .25rem; font-size: .65rem; margin-top: .25rem; }
.detect-badge--ok      { color: #16a34a; }
.detect-badge--none    { color: #94a3b8; }

/* ── 6. SCROLLBARS FINES (sur fond clair) ───────────────────────────────────── */

.scrollbar-thin-light {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f8fafc;
}
.scrollbar-thin-light::-webkit-scrollbar         { width: 5px; height: 5px; }
.scrollbar-thin-light::-webkit-scrollbar-track   { background: #f8fafc; }
.scrollbar-thin-light::-webkit-scrollbar-thumb   { background: #cbd5e1; border-radius: 99px; }
.scrollbar-thin-light::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── 7. TABLEAU APERÇU (preview Excel) ─────────────────────────────────────── */

.preview-wrap {
    overflow: auto;
    border-radius: 9px;
    border: 1.5px solid #e2e8f0;
    max-height: 240px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f8fafc;
}
.preview-wrap::-webkit-scrollbar         { width: 5px; height: 5px; }
.preview-wrap::-webkit-scrollbar-track   { background: #f8fafc; }
.preview-wrap::-webkit-scrollbar-thumb   { background: #cbd5e1; border-radius: 99px; }
.preview-wrap::-webkit-scrollbar-thumb:hover { background: #94a3b8; }


/* ── 8. SECTION HEADER (icône + titre + sous-titre) ────────────────────────── */

.section-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
}
.section-head__icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; flex-shrink: 0;
}
.section-head__icon--indigo { background: #eef2ff; color: #6366f1; }
.section-head__icon--green  { background: #f0fdf4; color: #16a34a; }
.section-head__icon--blue   { background: #eff6ff; color: #3b82f6; }
.section-head__icon--purple { background: #f5f3ff; color: #7c3aed; }
.section-head__icon--amber  { background: #fffbeb; color: #d97706; }
.section-head__title        { font-size: .95rem; font-weight: 800; color: #1e293b; }
.section-head__sub          { font-size: .75rem; color: #64748b; margin-top: .1rem; }

/* ── 9. INFO BOX (bandeau bleu informatif) ──────────────────────────────────── */

.info-box-light {
    background: #eef2ff;
    border: 1.5px solid #c7d2fe;
    border-radius: 9px;
    padding: .75rem 1rem;
    font-size: .82rem;
    color: #4338ca;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}
.info-box-light i { margin-top: .1rem; flex-shrink: 0; }

/* ── 10. ALERTES SUR FOND CLAIR ─────────────────────────────────────────────── */

.alert-light         { padding: .85rem 1.1rem; border-radius: 9px; font-size: .875rem; margin-bottom: 1.25rem; }
.alert-light--ok     { background: #f0fdf4; border: 1.5px solid #bbf7d0; color: #15803d; }
.alert-light--error  { background: #fef2f2; border: 1.5px solid #fecaca; color: #b91c1c; }

/* ── 11. MODALE DE PROGRESSION (import, traitement long) ────────────────────── */

.progress-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(15,23,42,.7);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
}
.progress-modal-overlay.open { display: flex; }

.progress-modal {
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem 2.75rem 2rem;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 24px 64px rgba(0,0,0,.3);
    text-align: center;
}

.progress-modal__icon-wrap {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1.25rem;
    /* Couleur définie inline selon l'état */
}

.progress-modal__title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 .35rem;
}

.progress-modal__msg {
    font-size: .85rem;
    color: #64748b;
    margin: 0 0 1.5rem;
}

.progress-modal__track {
    background: #f1f5f9;
    border-radius: 99px;
    height: 8px;
    overflow: hidden;
    margin-bottom: .5rem;
}

.progress-modal__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6366f1, #818cf8);
    border-radius: 99px;
    transition: width 1.2s ease-out;
}

.progress-modal__bar--success { background: #16a34a; }

.progress-modal__stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .75rem;
    color: #94a3b8;
    margin-bottom: 1.25rem;
}

.progress-modal__pct     { font-weight: 700; color: #6366f1; min-width: 3rem; }
.progress-modal__eta     { font-size: .78rem; color: #475569; font-weight: 600; }

.progress-modal__note {
    font-size: .72rem;
    color: #b0b8c9;
    margin: 0 0 1.1rem;
    line-height: 1.5;
}

/* Bouton annuler dans la modale */
.progress-modal__cancel {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1.1rem;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #dc2626;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.progress-modal__cancel:hover { background: #fee2e2; border-color: #fca5a5; }

/* ── 12. BARRE DE PROGRESSION ANIMÉE (indéterminée) ────────────────────────── */

.prog-wrap {
    background: #e2e8f0;
    border-radius: 99px;
    height: 5px;
    overflow: hidden;
    margin: .5rem 0;
}
.prog-bar {
    height: 100%;
    background: var(--accent, #6366f1);
    border-radius: 99px;
    animation: pulse-bar 1.5s ease-in-out infinite;
}
@keyframes pulse-bar { 0%,100%{opacity:1} 50%{opacity:.55} }

/* ── 13. TABLEAU SUR FOND BLANC ─────────────────────────────────────────────── */


/* Pagination sur fond blanc */
.pagination-light { display: flex; gap: .35rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }
.page-btn-light {
    padding: .38rem .75rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: transparent;
    color: #64748b;
    font-size: .78rem;
    cursor: pointer;
    transition: .15s;
}
.page-btn-light.active   { background: var(--accent,#4f6ef7); border-color: var(--accent,#4f6ef7); color: #fff; }
.page-btn-light:hover:not(.active) { background: #f1f5f9; }

/* Toolbar sur fond blanc */
.toolbar-light { display: flex; gap: .75rem; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; }
.count-lbl-light { font-size: .75rem; color: #94a3b8; margin-left: auto; }

/* Badge magasin (fond blanc) */
.store-badge-light {
    display: inline-flex; align-items: center;
    padding: .18rem .55rem; border-radius: 99px;
    font-size: .72rem; font-weight: 700;
    background: #eef2ff; color: #4f46e5;
}

/* Bouton téléchargement */
.btn-dl {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .75rem; border-radius: 7px;
    font-size: .78rem; font-weight: 600;
    background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d;
    text-decoration: none; transition: .15s;
}
.btn-dl:hover { background: #dcfce7; border-color: #86efac; }
.btn-dl-off {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .75rem; border-radius: 7px;
    font-size: .78rem; font-weight: 600;
    background: #f8fafc; border: 1px solid #e2e8f0; color: #94a3b8;
    cursor: not-allowed;
}

/* ── 13. OVERLAY MODAL GÉNÉRIQUE ────────────────────────────────────────────── */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    backdrop-filter: blur(4px);
}
.modal-overlay.open { display: flex; }

/* ── 13. MODAL PRODUITS PLANCHE (fond bleu nuit) ────────────────────────────── */

.mp-modal {
    background: #1a1a55;
    border-radius: 20px;
    max-width: 920px;
    width: 95%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 80px rgba(0,0,66,.6), 0 8px 24px rgba(0,0,0,.3);
    overflow: hidden;
}

.mp-modal__header {
    padding: 1.35rem 1.5rem 1.1rem;
    flex-shrink: 0;
}

.mp-modal__header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.mp-modal__identity {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

.mp-modal__icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: #fff;
    flex-shrink: 0; margin-top: .1rem;
}

.mp-modal__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .25rem;
    line-height: 1.2;
}

.mp-modal__meta {
    font-size: .78rem;
    color: rgba(255,255,255,.5);
    margin: 0;
    line-height: 1.4;
}

.mp-modal__close {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.7);
    cursor: pointer;
    font-size: .85rem;
    padding: .4rem .7rem;
    border-radius: 8px;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.mp-modal__close:hover { background: rgba(255,255,255,.18); color: #fff; }

.mp-modal__tabs {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.mp-modal__kpi {
    display: none;
    gap: .65rem;
    margin-top: .85rem;
    flex-wrap: wrap;
}

.mp-modal__content {
    flex: 1;
    background: #fff;
    border-radius: 16px;
    margin: 0 .75rem .75rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}

.mp-modal__scroll {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #fff;
}


/* Onglets sur fond sombre */
.mp-tab {
    padding: .38rem .85rem;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.65);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: .15s;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.mp-tab.active { background: #fff; border-color: #fff; color: #1e293b; box-shadow: 0 2px 12px rgba(0,0,0,.2); }
.mp-tab:hover:not(.active) { background: rgba(255,255,255,.15); color: #fff; }

/* KPI cards cliquables */
.mp-kpi-card {
    flex: 1;
    min-width: 150px;
    cursor: pointer;
    user-select: none;
    background: rgba(255,255,255,.08);
    border: 1.5px solid rgba(255,255,255,.15);
    border-radius: 12px;
    padding: .65rem .85rem;
    transition: background .15s, border-color .15s, transform .12s;
}
.mp-kpi-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.mp-kpi-card__pct    { font-size: 1.1rem; font-weight: 800; color: #fff; }
.mp-kpi-card__bar    { height: 6px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; margin-bottom: .5rem; position: relative; }
.mp-kpi-card__footer { display: flex; align-items: center; justify-content: space-between; }
.mp-kpi-card__count  { font-size: .68rem; color: rgba(255,255,255,.5); }
.mp-kpi-card__verdict{ font-size: .68rem; font-weight: 700; padding: .1rem .4rem; border-radius: 99px; }

/* Filtres light (fond blanc) */
.filter-btn-light {
    padding: .4rem .8rem;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 600;
    border: 1.5px solid #e2e8f0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: .15s;
}
.filter-btn-light.active { background: #eef2ff; border-color: #6366f1; color: #4f46e5; }
.filter-btn-light:hover:not(.active) { background: #f1f5f9; }

/* Cellules planche */
.planche-code { font-family: monospace; font-size: .74rem; color: #94a3b8; display: block; }
.planche-name { font-weight: 700; font-size: .88rem; color: #1e293b; display: block; }
.planche-sup  { font-size: .72rem; color: #64748b; margin-top: .12rem; display: block; }

/* Dot statut travaillée */
.travaillee-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.travaillee-dot.on  { background: #16a34a; box-shadow: 0 0 5px rgba(22,163,74,.4); }
.travaillee-dot.off { background: #e2e8f0; }

/* Boutons niveau (comportement radio) */
.niv-group { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.niv-sep   { width: 1px; height: 18px; background: #e2e8f0; margin: 0 .1rem; }
.niv-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 26px; padding: 0 .6rem; border-radius: 6px; border: 1.5px solid transparent;
    font-size: .72rem; font-weight: 700; cursor: pointer; user-select: none; white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}
.niv-btn.off       { background: #f1f5f9; border-color: #e2e8f0; color: #94a3b8; }
.niv-btn.off:hover { background: #e2e8f0; border-color: #cbd5e1; color: #475569; }
.niv-btn.nt-on     { background: #fef2f2; border-color: #fecaca; color: #dc2626; font-weight: 800; }
.niv-btn.nt-on:hover { background: #fee2e2; }
.niv-btn.on { font-weight: 800; } /* couleur via inline style JS (getNivStyle) */

/* Note et stylo */
.note-cell { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; color: #64748b; }
.btn-pen   { background: none; border: none; color: #cbd5e1; cursor: pointer; font-size: .72rem; padding: .1rem .3rem; transition: .12s; }
.btn-pen:hover { color: #64748b; }

/* ── 13. INTERFACE SCAN AUDIT (dark — usage terrain Zebra) ──────────────────── */

/* Top bar */
.scan-top-bar { background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.1); padding:.75rem 1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; position:sticky; top:0; z-index:100; backdrop-filter:blur(8px); }
.scan-top-bar__planche { font-weight:700; font-size:.95rem; color:#fff; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scan-top-bar__store { font-size:.75rem; color:rgba(255,255,255,.45); }

/* Barre position ML/Rangée */
.position-bar { background:rgba(0,0,0,.25); border-bottom:1px solid rgba(255,255,255,.08); padding:.55rem 1rem; display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.pos-group { display:flex; align-items:center; gap:.5rem; }
.pos-label { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.4); }
.pos-val { font-size:1.1rem; font-weight:800; color:#fff; min-width:2ch; text-align:center; }
.pos-btn { width:28px; height:28px; border-radius:6px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; font-size:.8rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.12s; }
.pos-btn:hover { background:rgba(255,255,255,.18); }
.hint-mode { margin-left:auto; font-size:.72rem; color:rgba(255,255,255,.35); display:flex; align-items:center; gap:.3rem; }

/* Champ scan */
.scan-field-wrap { padding:.75rem 1rem; background:rgba(0,0,0,.15); border-bottom:1px solid rgba(255,255,255,.07); display:flex; align-items:center; gap:.75rem; }
.scan-icon { color:rgba(255,255,255,.4); font-size:1.2rem; }
.scan-field-hint { font-size:.75rem; color:rgba(255,255,255,.3); }
#scan-field { flex:1; padding:.55rem .85rem; border-radius:8px; border:2px solid rgba(99,102,241,.5); background:rgba(99,102,241,.1); color:#fff; font-size:1rem; font-family:monospace; letter-spacing:.05em; }
#scan-field:focus    { outline:none; border-color:#6366f1; background:rgba(99,102,241,.15); }
#scan-field.flash-ok  { border-color:#4ade80; background:rgba(74,222,128,.1); }
#scan-field.flash-err { border-color:#f87171; background:rgba(239,68,68,.1); }

/* KPI live */
.kpi-strip { display:flex; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.07); }
.kpi-strip__cell { flex:1; text-align:center; padding:.45rem .2rem; border-right:1px solid rgba(255,255,255,.07); }
.kpi-strip__cell:last-child { border-right:none; }
.kpi-strip__val { font-size:1.15rem; font-weight:800; display:block; }
.kpi-strip__lbl { font-size:.6rem; color:rgba(255,255,255,.35); display:block; margin-top:.1rem; }
.kpi--total .kpi-strip__val { color:#93c5fd; }
.kpi--ok    .kpi-strip__val { color:#4ade80; }
.kpi--warn  .kpi-strip__val { color:#fde68a; }
.kpi--err   .kpi-strip__val { color:#f87171; }

/* Items scannés */
.scan-item { display:flex; align-items:flex-start; gap:.75rem; padding:.55rem 1rem; border-bottom:1px solid rgba(255,255,255,.05); animation:slideIn .2s ease; }
@keyframes slideIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.scan-item__num   { font-size:.68rem; font-weight:700; color:rgba(255,255,255,.3); min-width:2rem; padding-top:.15rem; font-family:monospace; }
.scan-item__pos   { font-size:.65rem; color:rgba(255,255,255,.25); padding-top:.2rem; white-space:nowrap; }
.scan-item__info  { flex:1; min-width:0; }
.scan-item__ean   { font-size:.7rem; font-family:monospace; color:rgba(255,255,255,.4); }
.scan-item__label { font-size:.85rem; font-weight:600; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scan-item__planche { font-size:.72rem; color:rgba(255,255,255,.45); }
.scan-item__status  { flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; }
.status-badge    { display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .55rem; border-radius:99px; font-size:.7rem; font-weight:700; }
.status-match    { background:rgba(74,222,128,.2); color:#4ade80; }
.status-wrong    { background:rgba(253,224,71,.2); color:#fde68a; }
.status-notfound { background:rgba(239,68,68,.2); color:#f87171; }
.btn-comment { background:none; border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.4); border-radius:6px; padding:.15rem .4rem; font-size:.68rem; cursor:pointer; transition:.12s; }
.btn-comment:hover { border-color:rgba(255,255,255,.4); color:rgba(255,255,255,.8); }
.comment-area { width:100%; margin-top:.35rem; padding:.35rem .55rem; border-radius:6px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:#fff; font-size:.78rem; resize:none; }
.comment-area:focus { outline:none; border-color:#6366f1; }

/* Barre de fin */
.finish-bar { padding:.75rem 1rem; background:rgba(0,0,0,.2); border-top:1px solid rgba(255,255,255,.1); display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }

/* Carte config audit (fond blanc) */
.audit-config-card { background:#fff; border-radius:16px; padding:1.75rem; box-shadow:0 4px 20px rgba(0,0,0,.08); }
.scan-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.scan-mode-card { background:#f8fafc; border:2px solid #e2e8f0; border-radius:10px; padding:1rem; cursor:pointer; transition:.15s; }
.scan-mode-card:hover { border-color:#c7d2fe; background:#eef2ff; }
.scan-mode-card.selected { border-color:#6366f1; background:#eef2ff; }
.scan-mode-card input { display:none; }
.scan-mode-card__icon  { font-size:1.5rem; margin-bottom:.4rem; }
.scan-mode-card__title { font-weight:700; font-size:.9rem; color:#1e293b; }
.scan-mode-card__desc  { font-size:.75rem; color:#64748b; margin-top:.2rem; line-height:1.4; }

/* Hint modal (scan) */
.hint-modal { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:200; padding:1rem; }
.hint-modal__box { background:#1e293b; border:1px solid rgba(255,255,255,.15); border-radius:14px; padding:1.75rem; max-width:460px; width:100%; text-align:center; }
.hint-modal__box h2 { font-size:1.15rem; font-weight:800; color:#fff; margin-bottom:.75rem; }
.hint-modal__box p  { font-size:.85rem; color:rgba(255,255,255,.55); line-height:1.5; margin-bottom:1.25rem; }
.hint-icon { font-size:2.5rem; margin-bottom:.75rem; }

/* ── 13. GLOW DATE (animation d'auto-détection) ─────────────────────────────── */

@keyframes field-glow-blue {
    0%   { box-shadow: 0 0 0 0   rgba(59,130,246,0);    border-color: #e2e8f0; background: #f8fafc; }
    35%  { box-shadow: 0 0 0 6px rgba(59,130,246,.28);  border-color: #3b82f6; background: #eff6ff; }
    65%  { box-shadow: 0 0 0 8px rgba(59,130,246,.16);  border-color: #3b82f6; background: #eff6ff; }
    100% { box-shadow: 0 0 0 0   rgba(59,130,246,0);    border-color: #e2e8f0; background: #f8fafc; }
}
.field-glow { animation: field-glow-blue 1.8s ease-in-out forwards; }


/* ── 14. STORE PICKER (logo dropdown) ────────────────────────────────────────── */

.store-picker { position: relative; display: inline-block; }

.store-picker__trigger {
    display: inline-flex; align-items: center;
    padding: 0; border: none; background: transparent;
    cursor: pointer; line-height: 0; transition: opacity .15s;
}
.store-picker__trigger:hover { opacity: .8; }
.store-picker--single .store-picker__trigger { cursor: default; }
.store-picker--single .store-picker__trigger:hover { opacity: 1; }

.store-picker__logo { max-height: 44px; max-width: 180px; object-fit: contain; display: block; }
.store-picker__name { font-size: .85rem; font-weight: 600; color: #1e293b; line-height: 1.2; }

.store-picker__dropdown {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.12); z-index: 200;
    padding: .35rem; min-width: 160px;
}
.store-picker.is-open .store-picker__dropdown { display: block; }

.store-picker__item {
    display: flex; align-items: center; justify-content: center;
    padding: .5rem .65rem; border-radius: 8px; width: 100%;
    border: none; background: transparent; cursor: pointer;
    transition: background .1s;
}
.store-picker__item:hover { background: #f8fafc; }
.store-picker__item.is-active { background: #eef2ff; }
.store-picker__item-logo { max-height: 30px; max-width: 120px; object-fit: contain; display: block; }
.store-picker__item-name { font-size: .82rem; font-weight: 600; color: #1e293b; }


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 6-utils/_animations.css (0.19 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* Animation de chargement */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

.loading {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 6-utils/_helpers.css (7.22 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   HELPERS — Utilitaires de mise en page, texte, espacement
   Usage : classes atomiques réutilisables sur n'importe quelle page.
   Convention : préfixe implicite, noms courts et prévisibles.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Display ──────────────────────────────────────────────────────────────── */
.d-none        { display: none !important; }
.d-block       { display: block; }
.d-flex        { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid        { display: grid; }

/* ── Flex ─────────────────────────────────────────────────────────────────── */
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-1        { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow-0   { flex-grow: 0; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

.gap-0  { gap: 0; }
.gap-1  { gap: .25rem; }
.gap-2  { gap: .5rem; }
.gap-3  { gap: .75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.5rem; }
.gap-6  { gap: 2rem; }

/* ── Sizing ───────────────────────────────────────────────────────────────── */
.w-full    { width: 100%; }
.w-auto    { width: auto; }
.min-w-0   { min-width: 0; }
.h-full    { height: 100%; }

/* ── Spacing — Margin ─────────────────────────────────────────────────────── */
.m-0    { margin: 0; }
.mt-0   { margin-top: 0; }
.mt-1   { margin-top: .25rem; }
.mt-2   { margin-top: .5rem; }
.mt-3   { margin-top: .75rem; }
.mt-4   { margin-top: 1rem; }
.mt-5   { margin-top: 1.5rem; }
.mt-6   { margin-top: 2rem; }
.mb-0   { margin-bottom: 0; }
.mb-1   { margin-bottom: .25rem; }
.mb-2   { margin-bottom: .5rem; }
.mb-3   { margin-bottom: .75rem; }
.mb-4   { margin-bottom: 1rem; }
.mb-5   { margin-bottom: 1.5rem; }
.mb-6   { margin-bottom: 2rem; }
.ml-0   { margin-left: 0; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Spacing — Padding ────────────────────────────────────────────────────── */
.p-0    { padding: 0; }
.p-2    { padding: .5rem; }
.p-3    { padding: .75rem; }
.p-4    { padding: 1rem; }
.p-5    { padding: 1.5rem; }
.pt-0   { padding-top: 0; }
.pt-4   { padding-top: 1rem; }
.pt-5   { padding-top: 1.5rem; }
.pt-6   { padding-top: 2rem; }
.pb-4   { padding-bottom: 1rem; }
.pb-5   { padding-bottom: 1.5rem; }
.px-4   { padding-left: 1rem; padding-right: 1rem; }
.py-3   { padding-top: .75rem; padding-bottom: .75rem; }

/* ── Typography ───────────────────────────────────────────────────────────── */
.text-xs    { font-size: .75rem; }
.text-sm    { font-size: .875rem; }
.text-base  { font-size: 1rem; }
.text-lg    { font-size: 1.125rem; }
.text-xl    { font-size: 1.25rem; }
.text-2xl   { font-size: 1.5rem; }

.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold    { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

.uppercase    { text-transform: uppercase; }
.lowercase    { text-transform: lowercase; }
.capitalize   { text-transform: capitalize; }
.tracking-wide { letter-spacing: .05em; }
.tracking-wider { letter-spacing: .1em; }

.text-nowrap  { white-space: nowrap; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leading-snug { line-height: 1.4; }
.leading-normal { line-height: 1.6; }

/* ── Couleurs de texte ────────────────────────────────────────────────────── */
.text-primary { color: var(--text-primary, #1e293b); }
.text-muted   { color: var(--text-muted, #94a3b8); }
.text-accent  { color: var(--accent, #3b82f6); }
.text-success { color: #16a34a; }
.text-warning { color: #b45309; }
.text-danger  { color: #dc2626; }
.text-white   { color: #fff; }

/* ── Overflow ─────────────────────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ── Border radius ────────────────────────────────────────────────────────── */
.rounded-sm { border-radius: .25rem; }
.rounded    { border-radius: .5rem; }
.rounded-md { border-radius: .75rem; }
.rounded-lg { border-radius: 1rem; }
.rounded-xl { border-radius: 1.25rem; }
.rounded-full { border-radius: 9999px; }

/* ── Curseur ──────────────────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.pointer-events-none { pointer-events: none; }
.user-select-none { user-select: none; }

/* ── Opacity ──────────────────────────────────────────────────────────────── */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: .5; }
.opacity-75  { opacity: .75; }
.opacity-100 { opacity: 1; }

/* ── Position ─────────────────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }
.z-10     { z-index: 10; }
.z-50     { z-index: 50; }


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 6-utils/_responsive.css (0.93 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* Responsive */
@media (max-width: 768px) {
    /* Icon picker */
    .icon-picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 0.75rem;
    }
    
    /* Tile editor */
    .tile-editor {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .tile-preview {
        width: 100%;
    }
    
    /* Logs */
    .logs-filters {
        grid-template-columns: 1fr;
    }
    
    .log-item {
        flex-direction: column;
    }
    
    .log-item__icon {
        align-self: flex-start;
    }
    
    .log-item__meta {
        flex-direction: column;
        gap: 0.25rem;
    }
}

.desktop-only {
    display: flex;
}

.mobile-only {
    display: none;
}


/* Responsive */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: flex !important;
    }
}


/* ───────────────────────────────────────────────────────────────────────── */
/* 📄 6-utils/_scrollbar.css (4.50 KB) */
/* ───────────────────────────────────────────────────────────────────────── */

/* ===============================
   Utils Scrollbar
   Scrollbars personnalisées modernes
   =============================== */

/**
 * SCROLLBARS PERSONNALISÉES
 * 
 * Design moderne avec scrollbars fines et arrondies.
 * Compatible Firefox (scrollbar-width) et Chromium (webkit).
 * 
 * Variables utilisées:
 * --scrollbar-size         : Largeur/hauteur de la scrollbar (8px)
 * --scrollbar-size-thick   : Largeur/hauteur scrollbar épaisse (12px)
 * --scrollbar-track        : Couleur de fond (rail)
 * --scrollbar-thumb        : Couleur du curseur (normal)
 * --scrollbar-thumb-hover  : Couleur du curseur (hover)
 * --scrollbar-thumb-active : Couleur du curseur (actif)
 */

/* ===============================
   FIREFOX
   =============================== */

:root,
body {
  scrollbar-width: thin; /* "auto" pour largeur native, "thin" pour fine, "none" pour masquer */
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ===============================
   CHROME / EDGE / SAFARI (Webkit)
   =============================== */

/* Dimensions de la scrollbar */
::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

/* Rail de la scrollbar */
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 12px;
}

/* Curseur de la scrollbar */
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent; /* Espace intérieur pour l'effet arrondi */
  background-clip: padding-box;
  
  /* Transition fluide */
  transition: background-color 0.2s ease;
}

/* États interactifs du curseur */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active);
}

/* Coin entre scrollbar verticale et horizontale */
::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

/* ===============================
   VARIANTES
   =============================== */

/* Scrollbar masquée (contenu toujours scrollable) */
.scrollbar-hidden {
  scrollbar-width: none; /* Firefox */
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Scrollbar native (comportement par défaut du navigateur) */
.scrollbar-auto {
  scrollbar-width: auto; /* Firefox */
}

.scrollbar-auto::-webkit-scrollbar {
  width: auto;
  height: auto;
}

.scrollbar-auto::-webkit-scrollbar-thumb {
  background-color: initial;
  border: 0;
}

/* Scrollbar épaisse (pour zones nécessitant plus de visibilité) */
.scrollbar-thick {
  scrollbar-width: auto; /* Firefox utilise sa taille par défaut */
}

.scrollbar-thick::-webkit-scrollbar {
  width: var(--scrollbar-size-thick);
  height: var(--scrollbar-size-thick);
}

.scrollbar-thick::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
}

/* Scrollbar toujours visible (pas de fade-out) */
.scrollbar-always-visible::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
}

/* ===============================
   CONTEXTES SPÉCIFIQUES
   =============================== */

/* Scrollbar pour zones de code / pre */
pre::-webkit-scrollbar,
code::-webkit-scrollbar,
.code-block::-webkit-scrollbar {
  height: 10px;
}

pre::-webkit-scrollbar-thumb,
code::-webkit-scrollbar-thumb,
.code-block::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, .15);
}

/* Scrollbar pour modales */
.modal__body::-webkit-scrollbar {
  width: 6px;
}

/* Scrollbar pour tableaux */
.table-wrapper::-webkit-scrollbar {
  height: 6px;
}

/* ===============================
   IOS / MOBILE ENHANCEMENTS
   =============================== */

/**
 * Améliore le scroll momentum sur iOS
 * Note: iOS ne supporte pas les scrollbars personnalisées
 */
.scrollable,
.modal__body,
.table-wrapper {
  -webkit-overflow-scrolling: touch;
}

/* ===============================
   ACCESSIBILITÉ
   =============================== */

/**
 * Respect des préférences utilisateur pour les animations
 */
@media (prefers-reduced-motion: reduce) {
  ::-webkit-scrollbar-thumb {
    transition: none;
  }
}

/**
 * Mode contraste élevé
 */
@media (prefers-contrast: high) {
  ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .5);
    border: 1px solid rgba(255, 255, 255, .2);
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .7);
  }
}

/*
 * ═══════════════════════════════════════════════════════════════════════════
 * BUILD SUMMARY
 * ═══════════════════════════════════════════════════════════════════════════
 * Files loaded  : 55 / 55
 * Total size    : 430.03 KB
 * Build date    : 2026-05-23 06:13:53
 * Environment   : production
 * ═══════════════════════════════════════════════════════════════════════════
 */