/* ============================================================
   BAHAMA MAMAS — Custom CSS
   Thème : Noir profond + Violet néon
   ============================================================ */

/* ─── Variables CSS ─────────────────────────────────────── */
:root {
  --neon:         #5aa8dc;
  --neon-bright:  #8fc7ec;
  --neon-dark:    #1f5c86;
  --neon-glow:    0 0 8px #5aa8dc88, 0 0 20px #5aa8dc44;
  --neon-glow-lg: 0 0 12px #5aa8dcaa, 0 0 35px #5aa8dc55, 0 0 60px #5aa8dc22;
  --gold:         #f0c15c;
  --gold-dim:     #c9a227;

  --bg-base:      #060d16;
  --bg-card:      #13293f;
  --bg-card2:     #1b3654;
  --bg-surface:   #1f3f60;
  --bg-input:     #0f2438;

  --text-primary: #e8f2fb;
  --text-muted:   #93b3c9;
  --text-dim:     #6b8ba3;

  --border:       #244a6b;
  --border-neon:  #5aa8dc44;

  --danger:       #ef4444;
  --success:      #3ecf8e;
  --warning:      #ffbe0b;
  --info:         #38bdf8;

  --violet:        #9b6dff;
  --violet-bright: #b794ff;
  --violet-dark:   #4c2f8c;
  --violet-surface:var(--violet-dark);
  --violet-glow:   0 0 10px #9b6dff88, 0 0 24px #9b6dff44;

  /* Palette accent élargie (badges de rôle, statuts, éléments décoratifs) */
  --pink:   #f472b6;
  --orange: #fb923c;
  --teal:   #2dd4bf;
  --sky:    #60a5fa;
  --slate:  #94a3b8;

  /* Couleurs "encre" : version texte de chaque couleur sémantique,
     lisible quel que soit le fond sur lequel elle est posée. En mode
     sombre elles reprennent la couleur vive normale ; en mode clair
     elles sont assombries pour garder un contraste correct (cf.
     override dans [data-bs-theme="light"] ci-dessous). */
  --danger-ink:  var(--danger);
  --success-ink: var(--success);
  --warning-ink: var(--warning);
  --info-ink:    var(--info);
  --gold-ink:    var(--gold);
  --pink-ink:    var(--pink);
  --orange-ink:  var(--orange);
  --teal-ink:    var(--teal);
  --sky-ink:     var(--sky);
  --slate-ink:   var(--slate);

  --radius:       12px;
  --radius-lg:    18px;
  --radius-pill:  999px;

  --transition:   0.25s cubic-bezier(.4,0,.2,1);
}

/* ─── Palette mode clair ────────────────────────────────── */
/* Le mode sombre (par défaut) garde toute l'identité "Bahama Mamas" :
   fond photo, néon, dégradés. Le mode clair repasse sur une palette
   claire/pro tout en gardant les couleurs de marque (néon, or…) comme
   simples couleurs d'accent — la quasi-totalité des règles ci-dessous
   utilisent ces variables, donc le thème se propage automatiquement. */
[data-bs-theme="light"] {
  --bg-base:      #f4f5f7;
  --bg-card:      #ffffff;
  --bg-card2:     #f1f3f5;
  --bg-surface:   #eef1f4;
  --bg-input:     #ffffff;

  --text-primary: #1b1f24;
  --text-muted:   #55626d;
  --text-dim:     #5f6b76;

  --border:       #dde1e6;
  --border-neon:  rgba(90,168,220,.35);

  /* Le bleu néon d'origine est trop clair pour rester lisible sur fond
     blanc (texte de nav, titres, liens…) : on le fonce nettement tout
     en gardant la même teinte. Idem pour le violet, utilisé comme
     couleur de texte sur les primes acquises de la fiche de paie. */
  --neon:          #1d64c9;
  --neon-bright:   #0f4f9c;
  --neon-glow:     0 0 0 transparent;
  --neon-glow-lg:  0 4px 20px rgba(29,100,201,.25);
  --violet-bright: #6d28d9;
  --violet-glow:   0 0 0 transparent;
  /* Fond de l'en-tête "fiche de paie" : on remplace le violet foncé
     (illisible avec du texte sombre) par une teinte lavande claire. */
  --violet-surface: #efe9fb;

  /* Couleurs "encre" assombries pour rester lisibles sur fond clair,
     tout en gardant les couleurs vives d'origine pour les fonds/boutons
     pleins (toujours associés à du texte blanc ou noir explicite). */
  --danger-ink:  #c2262f;
  --success-ink: #0a7a4e;
  --warning-ink: #946200;
  --info-ink:    #0d6fa8;
  --gold-ink:    #8a5a00;
  --pink-ink:    #c0267e;
  --orange-ink:  #a84a0a;
  --teal-ink:    #0c6f60;
  --sky-ink:     #0d6fa8;
  --slate-ink:   #4b5768;
}

/* ─── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background-color: var(--bg-base);
  background-image:
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(90,168,220,.16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 100% 10%, rgba(240,193,92,.07), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(155,109,255,.09), transparent 60%),
    radial-gradient(ellipse 40% 35% at 0% 85%, rgba(45,212,191,.06), transparent 60%),
    linear-gradient(to bottom, rgba(6,13,22,.55), rgba(15,36,55,.4) 45%, rgba(6,13,22,.75)),
    var(--bg-photo-dark, url("https://imgg.fr/r/939ptaXW.png"));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100%;
  /* overflow-x: hidden retiré ici — il casse position:sticky sur la navbar */
}

/* Mode clair : par défaut pas de photo (juste les dégradés), fond uni.
   Si une image de fond clair est configurée (§ Apparence), elle est
   ajoutée comme dernière couche via --bg-photo-light. */
html[data-bs-theme="light"] {
  background-image:
    radial-gradient(ellipse 60% 45% at 10% 0%, rgba(29,100,201,.07), transparent 60%),
    radial-gradient(ellipse 45% 40% at 100% 15%, rgba(240,193,92,.08), transparent 60%),
    radial-gradient(ellipse 45% 35% at 90% 95%, rgba(155,109,255,.06), transparent 60%),
    var(--bg-photo-light, none);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: var(--bg-base);
}

body {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 400;
  font-size: 15px;
  background: transparent !important;
  color: var(--text-primary);
  min-height: 100vh;
  letter-spacing: .02em;
  overflow-x: hidden; /* overflow-x géré ici sur body, pas sur html */
  display: flex;
  flex-direction: column;
}

/* Override Bootstrap dark theme variables */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--bg-base);
  --bs-body-color: var(--text-primary);
  color-scheme: dark;
}
[data-bs-theme="light"] {
  --bs-body-bg: var(--bg-base);
  --bs-body-color: var(--text-primary);
  color-scheme: light;
}

/* Fond grain subtil (mode sombre uniquement, sur la photo) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: .6;
}
[data-bs-theme="light"] body::before { display: none; }

@media print {
  /* Sinon Chrome rasterise ce fond (filtre SVG) en plein écran sur
     chaque page imprimée, ce qui fait gonfler énormément le PDF. */
  body::before { display: none !important; content: none !important; }
  html { background: #fff !important; }
}

/* NE PAS mettre position:relative + z-index sur body > * :
   cela crée une stacking context qui piège le backdrop Bootstrap
   et empêche l'interaction avec les modals.
   Le grain de fond est géré via pointer-events:none. */

/* ─── Typography ────────────────────────────────────────── */
h1, h2, h3, .brand-font {
  font-family: 'Cinzel', serif;
  letter-spacing: .05em;
}

h1 { font-size: clamp(1.6rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.3rem, 3vw, 2rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); }

.text-neon   { color: var(--neon-bright); }
.text-gold   { color: var(--gold-ink); }
.text-muted  { color: var(--text-muted) !important; }
.text-danger { color: var(--danger-ink) !important; }
.text-success{ color: var(--success-ink) !important; }

/* ─── Navbar ────────────────────────────────────────────── */
.navbar {
  background: rgba(7,7,9,.92) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-neon);
  padding: .6rem 1rem;
  box-shadow: 0 2px 30px rgba(90,168,220,.12);
}
[data-bs-theme="light"] .navbar {
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 2px 20px rgba(20,30,40,.08);
}

.navbar-brand {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--neon-bright) !important;
  text-shadow: var(--neon-glow);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.navbar-brand-logo {
  height: 44px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 10px rgba(90,168,220,.5));
}

.nav-link {
  color: var(--text-muted) !important;
  font-weight: 500;
  font-size: .88rem;
  letter-spacing: .05em;
  padding: .4rem .7rem !important;
  border-radius: 6px;
  transition: var(--transition);
  position: relative;
}
.nav-link:hover,
.nav-link.active {
  color: var(--neon-bright) !important;
  text-shadow: var(--neon-glow);
  background: rgba(90,168,220,.08);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%; right: 50%;
  height: 2px;
  background: var(--neon);
  border-radius: 2px;
  transition: var(--transition);
  opacity: 0;
}
.nav-link:hover::after, .nav-link.active::after {
  left: 8%; right: 8%; opacity: 1;
}

.dropdown-menu {
  background: var(--bg-card2);
  border: 1px solid var(--border-neon);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(90,168,220,.2), var(--neon-glow);
  padding: .4rem;
  min-width: 180px;
}
/* Bootstrap fixe --bs-zindex-sticky à 1020, au-dessus du z-index par
   défaut des dropdowns (1000). Résultat : un élément .sticky-top (ex.
   carte de la page Caisse) passait devant les menus déroulants de la
   navbar. On remonte la navbar et ses dropdowns au-dessus de tout ce
   qui est sticky/fixed dans la page. */
.navbar {
  position: relative;
  z-index: 1030;
}
.navbar .dropdown-menu {
  z-index: 1051;
}

/* La navbar a été remontée à z-index:1030 ci-dessus (pour passer devant
   les éléments sticky/fixed) : cela suffit à passer devant une modale
   Bootstrap dans certains cas, ce qui cache le haut de la popup (titre +
   bouton fermer) derrière la navbar et la rend inutilisable. On force donc
   la modale et son fond assombri à toujours rester strictement au-dessus
   de la navbar et de tout le reste de l'interface. */
.modal {
  z-index: 2000 !important;
}
.modal-backdrop {
  z-index: 1990 !important;
}
.dropdown-item {
  color: var(--text-muted);
  border-radius: 8px;
  padding: .5rem .9rem;
  font-size: .86rem;
  font-weight: 500;
  transition: var(--transition);
}
.dropdown-item:hover {
  background: rgba(90,168,220,.12);
  color: var(--neon-bright);
}
.dropdown-divider { border-color: var(--border); }

/* Ouverture au survol des catégories du menu (ex. "Comptabilité") sur les
   écrans où la navbar est déployée en ligne (≥ lg, navbar-expand-lg) : sur
   mobile, la navbar repasse en liste repliée (collapse) où le survol n'a
   pas de sens, on garde donc le clic normal de Bootstrap dans ce cas.
   On ne touche pas au JS de Bootstrap : le clic continue de fonctionner
   normalement (utile au clavier/tactile), le survol vient juste s'ajouter
   par-dessus en forçant l'affichage du menu déroulant. */
@media (min-width: 992px) {
  .navbar-nav .dropdown-menu {
    margin-top: 0; /* pas de "trou" entre le lien et le menu : évite que
                       le menu se referme si la souris passe par cet
                       interstice en descendant vers les sous-liens */
  }
  .navbar-nav .dropdown:hover > .dropdown-menu {
    display: block;
  }
}

.navbar-toggler {
  border: 1px solid var(--border-neon);
  border-radius: 8px;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23b347ff' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Badge notif */
.notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--danger);
  color: #fff;
  border-radius: 50%;
  width: 18px; height: 18px;
  font-size: .65rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  box-shadow: 0 0 8px var(--danger);
}

/* Avatar user navbar */
.user-avatar-nav {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--neon);
  object-fit: cover;
  box-shadow: var(--neon-glow);
}



/* ─── Cards ─────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
.card:hover {
  border-color: var(--border-neon);
  box-shadow: 0 4px 30px rgba(90,168,220,.15);
}
.card-header {
  background: var(--bg-card2);
  border-bottom: 1px solid var(--border);
  font-family: 'Cinzel', serif;
  font-size: .9rem;
  letter-spacing: .06em;
  color: var(--neon-bright);
  padding: .9rem 1.2rem;
}
.card-body { padding: 1.25rem; }
.card-footer {
  background: var(--bg-card2);
  border-top: 1px solid var(--border);
}

/* Stat cards */
.stat-card {
  background: linear-gradient(135deg, var(--bg-card2), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.2rem;
  transition: var(--transition);
  position: relative;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent, var(--neon)), transparent);
}
.stat-card:hover {
  border-color: var(--border-neon);
  box-shadow: var(--neon-glow);
}
.stat-card .stat-icon {
  font-size: 1.8rem;
  margin-bottom: .5rem;
}
.stat-card .stat-value {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent, var(--neon-bright));
  text-shadow: var(--neon-glow);
  line-height: 1;
}
/* Quand plusieurs stat-card se suivent (tableau de bord), on fait
   tourner une palette d'accents pour éviter un mur de cartes toutes
   bleues — chaque carte garde un contraste texte/fond identique,
   seule la teinte d'accent change. */
.stat-card:nth-of-type(5n+1) { --accent: var(--neon-bright); }
.stat-card:nth-of-type(5n+2) { --accent: var(--gold-ink); }
.stat-card:nth-of-type(5n+3) { --accent: var(--violet-bright); }
.stat-card:nth-of-type(5n+4) { --accent: var(--teal-ink); }
.stat-card:nth-of-type(5n+5) { --accent: var(--pink-ink); }
.stat-card .stat-label {
  font-size: .78rem;
  color: var(--text-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: .3rem;
}

/* ─── Buttons ───────────────────────────────────────────── */
.btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: .06em;
  border-radius: var(--radius);
  transition: var(--transition);
  font-size: .88rem;
  padding: .5rem 1.2rem;
}

.btn-neon {
  background: transparent;
  color: var(--neon-bright);
  border: 1px solid var(--neon);
  box-shadow: 0 0 8px rgba(90,168,220,.3), inset 0 0 0 0 rgba(90,168,220,0);
}
.btn-neon:hover {
  background: var(--neon);
  color: #fff;
  box-shadow: var(--neon-glow-lg);
  border-color: var(--neon-bright);
}

.btn-neon-solid {
  background: linear-gradient(135deg, var(--neon-dark), var(--neon));
  color: #fff;
  border: none;
  box-shadow: 0 4px 20px rgba(90,168,220,.4);
}
.btn-neon-solid:hover {
  background: linear-gradient(135deg, var(--neon), var(--neon-bright));
  box-shadow: var(--neon-glow-lg);
  color: #fff;
  transform: translateY(-1px);
}

.btn-gold {
  background: linear-gradient(135deg, #b8860b, var(--gold));
  color: #111;
  border: none;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(255,215,0,.3);
}
.btn-gold:hover {
  background: linear-gradient(135deg, var(--gold), #fff176);
  box-shadow: 0 4px 24px rgba(255,215,0,.5);
  color: #111;
}

.btn-danger-neon {
  background: transparent;
  color: var(--danger-ink);
  border: 1px solid var(--danger);
}
.btn-danger-neon:hover {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 0 12px rgba(255,77,109,.5);
}

.btn-success-neon {
  background: transparent;
  color: var(--success-ink);
  border: 1px solid var(--success);
}
.btn-success-neon:hover {
  background: var(--success);
  color: #111;
  box-shadow: 0 0 12px rgba(34,211,160,.4);
}

.btn-sm { padding: .3rem .8rem; font-size: .8rem; }
.btn-lg { padding: .75rem 2rem; font-size: 1rem; }

/* ─── Icône config contextuelle (⚙️) ────────────────────── */
.btn-icone-config-conteneur {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .6rem .75rem .5rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

.btn-icone-config-conteneur .btn-icone-config {
  border-color: var(--border);
  color: var(--text-primary);
  background: var(--bg-surface);
}
.btn-icone-config-conteneur .btn-icone-config:hover,
.btn-icone-config-conteneur .btn-icone-config:focus {
  background: var(--neon);
  border-color: var(--neon-bright);
  color: #fff;
}

.btn-icone-config-conteneur small.text-muted {
  color: var(--text-primary) !important;
  opacity: .8;
}

/* ─── Forms ─────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius);
  font-family: 'Rajdhani', sans-serif;
  font-size: .9rem;
  padding: .6rem 1rem;
  transition: var(--transition);
}
.form-control:focus, .form-select:focus {
  background: var(--bg-input);
  border-color: var(--neon);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(90,168,220,.2), var(--neon-glow);
  outline: none;
}
.form-control::placeholder { color: var(--text-dim); }
.form-select option { background: var(--bg-card2); color: var(--text-primary); }

.form-label {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .4rem;
}

.form-check-input {
  background-color: var(--bg-input);
  border-color: var(--border);
}
.form-check-input:checked {
  background-color: var(--neon);
  border-color: var(--neon);
}

.input-group-text {
  background: var(--bg-card2);
  border-color: var(--border);
  color: var(--neon);
}

/* ─── Tables ────────────────────────────────────────────── */
.table {
  color: var(--text-primary);
  border-color: var(--border);
}
.table thead th {
  background: var(--bg-card2);
  color: var(--neon-bright);
  border-bottom: 2px solid var(--border-neon);
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .75rem 1rem;
  white-space: nowrap;
}
.table tbody tr {
  border-color: var(--border);
  transition: var(--transition);
}
.table tbody tr:nth-of-type(even) {
  background: rgba(90,168,220,.07);
}
.table tbody tr:hover {
  background: rgba(90,168,220,.15) !important;
}
.table td { vertical-align: middle; padding: .7rem 1rem; }
.table-responsive { border-radius: var(--radius-lg); border: 1px solid var(--border); }
/* Neutralise le rayures Bootstrap natives (.table-striped), trop
   discrètes sur le thème sombre, au profit de l'alternance ci-dessus
   qui s'applique uniformément à toutes les tables. */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: transparent !important;
}

/* ─── Badges ────────────────────────────────────────────── */
.badge {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: .05em;
  font-size: .75rem;
  padding: .35em .7em;
  border-radius: 6px;
}
.role-badge.bg-purple      { background: rgba(90,168,220,.25) !important; color: var(--neon-bright); border: 1px solid rgba(90,168,220,.4); }
.role-badge.bg-pink        { background: rgba(236,72,153,.25) !important; color: var(--pink-ink); border: 1px solid rgba(236,72,153,.4); }
.role-badge.bg-pink-light  { background: rgba(236,72,153,.14) !important; color: var(--pink-ink); border: 1px solid rgba(236,72,153,.3); }
.role-badge.bg-orange      { background: rgba(249,115,22,.25) !important; color: var(--orange-ink); border: 1px solid rgba(249,115,22,.4); }
.role-badge.bg-orange-light{ background: rgba(249,115,22,.14) !important; color: var(--orange-ink); border: 1px solid rgba(249,115,22,.3); }
.role-badge.bg-teal        { background: rgba(20,184,166,.25) !important; color: var(--teal-ink); border: 1px solid rgba(20,184,166,.4); }
.role-badge.bg-teal-light  { background: rgba(20,184,166,.14) !important; color: var(--teal-ink); border: 1px solid rgba(20,184,166,.3); }
.role-badge.bg-blue        { background: rgba(59,130,246,.25) !important; color: var(--sky-ink); border: 1px solid rgba(59,130,246,.4); }
.role-badge.bg-blue-light  { background: rgba(59,130,246,.14) !important; color: var(--sky-ink); border: 1px solid rgba(59,130,246,.3); }
.role-badge.bg-danger      { background: rgba(255,77,109,.25) !important; color: var(--danger-ink); border: 1px solid rgba(255,77,109,.4); }

.badge-status-valide   { background: rgba(34,211,160,.15); color: var(--success-ink); border: 1px solid rgba(34,211,160,.3); }
.badge-status-attente  { background: rgba(255,190,11,.15); color: var(--warning-ink); border: 1px solid rgba(255,190,11,.3); }
.badge-status-refuse   { background: rgba(255,77,109,.15); color: var(--danger-ink); border: 1px solid rgba(255,77,109,.3); }
.badge-status-suspendu { background: rgba(148,163,184,.15); color: var(--slate-ink); border: 1px solid rgba(148,163,184,.3); }

/* ─── Alerts ────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius);
  border: none;
  font-size: .88rem;
}
.alert-success { background: rgba(34,211,160,.12); color: var(--success-ink); border-left: 3px solid var(--success); }
.alert-danger  { background: rgba(255,77,109,.12);  color: var(--danger-ink);  border-left: 3px solid var(--danger); }
.alert-warning { background: rgba(255,190,11,.12);  color: var(--warning-ink); border-left: 3px solid var(--warning); }
.alert-info    { background: rgba(56,189,248,.12);  color: var(--info-ink);    border-left: 3px solid var(--info); }

/* ─── Hero Section ──────────────────────────────────────── */
.hero {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 4rem 1rem;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(90,168,220,.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(90,168,220,.1) 0%, transparent 50%);
}
.hero-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 700;
  color: var(--text-primary);
  text-shadow: var(--neon-glow-lg);
  letter-spacing: .15em;
  margin-bottom: .3rem;
}
.hero-subtitle {
  color: var(--neon);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 300;
}

/* ─── Page layout ───────────────────────────────────────── */
.main-content {
  flex: 1;
  width: 100%;
  padding: 2rem 1.5rem 3rem;
}

.page-title {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  color: var(--text-primary);
  letter-spacing: .08em;
  margin-bottom: 0;
}
.page-title-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.page-title-bar .icon {
  font-size: 1.8rem;
}

/* ─── Page Effectifs ────────────────────────────────────── */
.eff-title-bar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  margin-bottom: 1.5rem !important;
  gap: .5rem;
}
.eff-title-icon { font-size: 2.5rem; }
.eff-title-h1 { font-size: 2rem; }
.btn-gold-md {
  padding: .55rem 1.1rem;
  font-size: .95rem;
  border-radius: 10px;
}
.pole-tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .9rem;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  text-decoration: none;
  white-space: nowrap;
  transition: all .15s;
}
.pole-tab:hover { color: var(--text-primary); border-color: var(--border-neon); }
.pole-tab.active {
  color: var(--neon-bright);
  background: rgba(90,168,220,.14);
  border-color: var(--border-neon);
  box-shadow: var(--neon-glow);
}
.search-box {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  padding: .45rem .9rem;
  font-size: .85rem;
  min-width: 240px;
}
.search-box:focus {
  outline: none;
  border-color: var(--border-neon);
  box-shadow: var(--neon-glow);
}
.employe-picker-wrap { position: relative; }
.employe-picker-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-neon);
  border-radius: 10px;
  box-shadow: var(--neon-glow-lg);
}
.employe-picker-item {
  padding: .5rem .75rem;
  cursor: pointer;
  font-size: .85rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}
.employe-picker-item:last-child { border-bottom: none; }
.employe-picker-item:hover,
.employe-picker-item.active {
  background: var(--bg-card2);
}
.employe-picker-item .pole-grade {
  display: block;
  font-size: .72rem;
  color: var(--text-muted);
}
.employe-picker-empty {
  padding: .5rem .75rem;
  font-size: .8rem;
  color: var(--text-muted);
}
.eff-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.eff-table { width: 100%; margin-bottom: 0; }
.eff-table th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  padding: .75rem .9rem;
  white-space: nowrap;
}
.eff-table td {
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-primary);
}
.eff-table tbody tr:last-child td { border-bottom: none; }
.eff-table tbody tr:nth-of-type(even) { background: rgba(90,168,220,.07); }
.eff-table tbody tr:hover { background: rgba(90,168,220,.15) !important; }
.emp-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(90,168,220,.4);
}
.emp-name { font-weight: 600; color: var(--text-primary); font-size: .9rem; }
.emp-role { margin-top: .15rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.badge-responsable {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .68rem;
  font-weight: 600;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: rgba(250,204,21,.12);
  color: var(--gold-ink);
  border: 1px solid rgba(250,204,21,.3);
}
.eff-empty-state, .empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.eff-empty-state .icon, .empty-state .icon { font-size: 2.2rem; margin-bottom: .5rem; }

/* Sidebar-style section headers */
.section-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: .5rem 0 .3rem;
  margin-bottom: .2rem;
}

/* ─── Auth pages ────────────────────────────────────────── */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(90,168,220,.2) 0%, transparent 60%),
    var(--bg-base);
}
.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border-neon);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(90,168,220,.15), 0 4px 20px rgba(0,0,0,.5);
}
.auth-logo {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--neon-bright);
  text-shadow: var(--neon-glow-lg);
  letter-spacing: .15em;
  text-align: center;
  margin-bottom: .3rem;
}
.auth-tagline {
  color: var(--text-muted);
  font-size: .78rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 2rem;
}

/* ─── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--neon-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon); }

/* ─── Animations ────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes pulse-neon {
  0%, 100% { box-shadow: var(--neon-glow); }
  50%       { box-shadow: var(--neon-glow-lg); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in-up { animation: fadeInUp .4s ease both; }
.fade-in-up:nth-child(1) { animation-delay:.05s; }
.fade-in-up:nth-child(2) { animation-delay:.1s; }
.fade-in-up:nth-child(3) { animation-delay:.15s; }
.fade-in-up:nth-child(4) { animation-delay:.2s; }
.fade-in-up:nth-child(5) { animation-delay:.25s; }

.neon-pulse { animation: pulse-neon 2s ease-in-out infinite; }

/* ─── Divider ────────────────────────────────────────────── */
.divider-neon {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  margin: 1.5rem 0;
}

/* ─── Tarif cards ────────────────────────────────────────── */
.tarif-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.5rem;
  text-align: center;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.tarif-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent, var(--neon)), transparent);
  opacity: 0;
  transition: var(--transition);
}
.tarif-card:hover { border-color: var(--border-neon); box-shadow: var(--neon-glow); }
.tarif-card:hover::after { opacity: 1; }
.tarif-card .tarif-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.tarif-card .tarif-name { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--text-primary); margin-bottom: .4rem; }
.tarif-card .tarif-price { font-family: 'Cinzel', serif; font-size: 1.8rem; font-weight: 700; color: var(--accent, var(--neon-bright)); text-shadow: var(--neon-glow); }
.tarif-card .tarif-desc { font-size: .8rem; color: var(--text-muted); margin-top: .4rem; }
.tarif-card:nth-of-type(4n+1) { --accent: var(--neon-bright); }
.tarif-card:nth-of-type(4n+2) { --accent: var(--gold-ink); }
.tarif-card:nth-of-type(4n+3) { --accent: var(--violet-bright); }
.tarif-card:nth-of-type(4n+4) { --accent: var(--teal-ink); }

/* ─── Debrief cards ──────────────────────────────────────── */
.debrief-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent, var(--neon));
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.5rem;
  margin-bottom: 1rem;
  transition: var(--transition);
}
.debrief-card:hover { border-color: var(--border-neon); border-left-color: var(--accent, var(--neon-bright)); }
.debrief-card:nth-of-type(4n+1) { --accent: var(--neon); }
.debrief-card:nth-of-type(4n+2) { --accent: var(--gold-ink); }
.debrief-card:nth-of-type(4n+3) { --accent: var(--violet); }
.debrief-card:nth-of-type(4n+4) { --accent: var(--teal-ink); }

/* ─── Progress bars ──────────────────────────────────────── */
.progress {
  background: var(--bg-surface);
  border-radius: var(--radius-pill);
  height: 6px;
}
.progress-bar {
  background: linear-gradient(90deg, var(--neon-dark), var(--neon-bright));
  box-shadow: 0 0 8px rgba(90,168,220,.5);
}

/* ─── Mobile helpers ─────────────────────────────────────── */
@media (max-width: 576px) {
  .auth-card { padding: 2rem 1.2rem; }
  .stat-card  { padding: 1rem; }
  .stat-card .stat-value { font-size: 1.4rem; }
  .table-responsive .table { font-size: .82rem; }
  .btn { font-size: .82rem; }
  .page-title { font-size: 1.2rem; }
}

/* ─── Footer ─────────────────────────────────────────────── */
footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border-neon);
  padding: 1.5rem;
  text-align: center;
  color: var(--text-dim);
  font-size: .78rem;
  letter-spacing: .05em;
}
footer span { color: var(--neon); }
/* ============================================================
   Bahamas ERP — Adaptation de la DA « Bahama Mamas » ci-dessus
   aux classes Bootstrap standard utilisées dans les vues de
   l'ERP (btn-primary, badges bg-*…), sans toucher aux gabarits
   PHP : tout composant Bootstrap existant hérite du thème.
   ============================================================ */

/* ─── Boutons sémantiques Bootstrap ─────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--neon-dark), var(--neon));
  border-color: var(--neon);
  color: #fff;
  box-shadow: 0 4px 20px rgba(90,168,220,.4);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: linear-gradient(135deg, var(--neon), var(--neon-bright)) !important;
  border-color: var(--neon-bright) !important;
  box-shadow: var(--neon-glow-lg);
  color: #fff !important;
}
.btn-outline-primary {
  color: var(--neon-bright);
  border-color: var(--neon);
  background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background: var(--neon) !important;
  border-color: var(--neon-bright) !important;
  color: #fff !important;
  box-shadow: var(--neon-glow-lg);
}

.btn-success {
  background: var(--success);
  border-color: var(--success);
  color: #0b1f18;
}
.btn-success:hover, .btn-success:focus {
  background: #33e0a1 !important;
  border-color: #33e0a1 !important;
  color: #0b1f18 !important;
}
.btn-outline-success {
  color: var(--success-ink);
  border-color: var(--success);
  background: transparent;
}
.btn-outline-success:hover, .btn-outline-success:focus {
  background: var(--success) !important;
  color: #0b1f18 !important;
}

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover, .btn-danger:focus {
  background: #ff6b83 !important;
  border-color: #ff6b83 !important;
}
.btn-outline-danger {
  color: var(--danger-ink);
  border-color: var(--danger);
  background: transparent;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
  background: var(--danger) !important;
  color: #fff !important;
}

.btn-warning {
  background: linear-gradient(135deg, #b8860b, var(--gold));
  border-color: var(--gold-dim);
  color: #111;
  font-weight: 700;
}
.btn-warning:hover, .btn-warning:focus {
  background: linear-gradient(135deg, var(--gold), #fff176) !important;
  color: #111 !important;
}
.btn-outline-warning {
  color: var(--gold-ink);
  border-color: var(--gold-dim);
  background: transparent;
}
.btn-outline-warning:hover, .btn-outline-warning:focus {
  background: var(--gold) !important;
  color: #111 !important;
}

.btn-secondary {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-primary);
}
.btn-secondary:hover, .btn-secondary:focus {
  background: var(--bg-card2) !important;
  border-color: var(--border-neon) !important;
}
.btn-outline-secondary, .btn-outline-light, .btn-outline-dark {
  color: var(--text-muted);
  border-color: var(--border);
  background: transparent;
}
.btn-outline-secondary:hover, .btn-outline-light:hover, .btn-outline-dark:hover {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-neon) !important;
}
.btn-link { color: var(--neon-bright); }
.btn-link:hover { color: var(--neon); }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

/* Badge "Origine" de la facture (bot Discord / saisie manuelle) : le
   text-dark de Bootstrap reste illisible sur fond sombre, on force du
   blanc en mode sombre uniquement (le mode clair garde text-dark). */
[data-bs-theme="dark"] .badge.text-dark { color: #fff !important; }

/* ─── Badges sémantiques Bootstrap ──────────────────────── */
.badge.bg-primary        { background: rgba(90,168,220,.25) !important;  color: var(--neon-bright); border: 1px solid rgba(90,168,220,.4); }
.badge.bg-primary-subtle { background: rgba(90,168,220,.14) !important;  color: var(--neon-bright); }
.badge.bg-secondary      { background: rgba(148,163,184,.2) !important; color: var(--slate-ink); border: 1px solid rgba(148,163,184,.35); }
.badge.bg-success        { background: rgba(34,211,160,.15) !important;  color: var(--success-ink); border: 1px solid rgba(34,211,160,.3); }
.badge.bg-danger         { background: rgba(255,77,109,.15) !important;  color: var(--danger-ink); border: 1px solid rgba(255,77,109,.3); }
.badge.bg-warning        { background: rgba(255,190,11,.15) !important;  color: var(--warning-ink); border: 1px solid rgba(255,190,11,.3); }
.badge.bg-info           { background: rgba(56,189,248,.15) !important;  color: var(--info-ink); border: 1px solid rgba(56,189,248,.3); }
.badge.bg-info-subtle    { background: rgba(56,189,248,.14) !important;  color: var(--info-ink); }
.badge.bg-light          { background: var(--bg-surface) !important;     color: var(--text-primary); border: 1px solid var(--border); }
.badge.bg-dark           { background: #05090f !important;               color: #c9d6e3; border: 1px solid var(--border); }

/* ─── Adaptations mobiles héritées de l'ERP ─────────────── */
@media (max-width: 576px) {
    .btn, .form-control, .form-select {
        min-height: 44px;
    }
}

/* ─── Navigation semaine précédente / suivante (réutilisable) ──── */
.week-nav{ display:flex; align-items:center; gap:.4rem; position:relative; z-index:1; }
.week-nav a, .week-nav span.week-nav-disabled{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.65); text-decoration:none; font-size:.95rem; transition:all .15s;
}
.week-nav a:hover{ background:rgba(90,168,220,.16); border-color:#5aa8dc; color:#fff; }
.week-nav span.week-nav-disabled{ opacity:.25; }
.week-nav .week-nav-select select{ min-width:220px; }
.week-nav-badge-passee{
  display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(184,102,255,.14); border:1px solid rgba(184,102,255,.4);
  border-radius:20px; padding:.25rem .8rem; font-size:.68rem; font-weight:700;
  color:#d580ff; white-space:nowrap;
}

/* ─── Fiche de paie (§16) ───────────────────────────────── */
.fp-carte {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  overflow: hidden;
}

.fp-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, var(--violet-surface), var(--bg-card2));
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.fp-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--violet-bright);
  box-shadow: var(--violet-glow);
  background: var(--bg-surface);
}

.fp-nom { font-size: 1.15rem; font-weight: 600; color: var(--text-primary); }

.fp-badge-patron {
  display: inline-block; font-size: .68rem; font-weight: 600;
  padding: .12rem .55rem; border-radius: 999px; margin-top: .15rem;
  background: rgba(240,193,92,.2); color: var(--gold-ink); border: 1px solid rgba(240,193,92,.45);
}

.fp-corps { padding: 1.1rem 1.25rem; }

.fp-section-titre {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); margin: 1.4rem 0 .6rem; display: flex; align-items: center; justify-content: space-between;
}
.fp-section-titre:first-child { margin-top: 0; }

.fp-ligne {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; padding: .55rem 0; border-bottom: 1px dashed var(--border);
}
.fp-ligne:last-child { border-bottom: none; }
.fp-ligne-libelle { font-weight: 500; color: var(--text-primary); }
.fp-ligne-sous { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
.fp-ligne-montant { font-weight: 700; white-space: nowrap; color: var(--text-primary); }
.fp-ligne-montant.text-gold { color: var(--gold-ink); }

.fp-prime-item { padding: .6rem 0; border-bottom: 1px dashed var(--border); opacity: .55; }
.fp-prime-item:last-child { border-bottom: none; }
.fp-prime-item.est-acquise { opacity: 1; }

.fp-prime-tete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.fp-prime-nom { font-size: .85rem; color: var(--text-primary); }
.fp-prime-item.est-acquise .fp-prime-nom { color: var(--violet-bright); font-weight: 600; }
.fp-prime-detail { font-size: .72rem; color: var(--text-dim); }
.fp-prime-montant { font-size: .82rem; font-weight: 700; color: var(--violet-bright); white-space: nowrap; }

.fp-barre { height: 6px; border-radius: 999px; background: var(--bg-input); overflow: hidden; }
.fp-barre-remplissage { height: 100%; border-radius: 999px; background: var(--gold-dim); }
.fp-prime-item.est-acquise .fp-barre-remplissage { background: linear-gradient(90deg, var(--violet-dark), var(--violet-bright)); box-shadow: var(--violet-glow); }

.fp-alerte-plafond {
  margin-top: .6rem; padding: .6rem .8rem; border-radius: var(--radius);
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35);
  color: var(--danger-ink); font-size: .8rem;
}

.fp-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.25rem; background: var(--bg-surface); border-top: 1px solid var(--border);
}
.fp-pied-total { font-size: 1.6rem; font-weight: 800; color: var(--gold-ink); text-shadow: 0 0 14px rgba(240,193,92,.35); }
.fp-pied-meta { font-size: .78rem; color: var(--text-dim); text-align: right; }

/* ─── Caisse : grille catalogue façon "boutique" ────────────── */
.caisse-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.caisse-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.caisse-pill:hover { border-color: var(--border-neon); color: var(--text-primary); }
.caisse-pill.active {
  background: linear-gradient(135deg, var(--neon-dark), var(--neon));
  border-color: var(--neon);
  color: #fff;
  box-shadow: 0 4px 16px rgba(90,168,220,.35);
}
.caisse-pill-count {
  background: var(--bg-surface);
  color: var(--text-dim);
  border-radius: var(--radius-pill);
  padding: .05rem .45rem;
  font-size: .72rem;
}
.caisse-pill.active .caisse-pill-count { background: rgba(255,255,255,.2); color: #fff; }

.caisse-section { margin-top: 2rem; }
.caisse-section:first-of-type { margin-top: 1.25rem; }
.caisse-section-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.caisse-section-icon { font-size: 1.05rem; line-height: 1; }
.caisse-section-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--text-primary);
  margin: 0;
  text-transform: uppercase;
}
.caisse-section-count { font-size: .75rem; color: var(--text-dim); }

.caisse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .75rem;
}

.caisse-card-wrap { position: relative; display: flex; flex-direction: column; }

.caisse-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: .3rem;
  padding: .85rem .85rem .7rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  min-height: 122px;
  width: 100%;
  transition: var(--transition);
  cursor: pointer;
}
.caisse-card:hover:not(:disabled) {
  border-color: var(--border-neon);
  box-shadow: 0 6px 20px rgba(90,168,220,.18);
  transform: translateY(-2px);
}
.caisse-card:disabled { cursor: default; opacity: .9; }
.caisse-card-top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; gap: .35rem; }
.caisse-card-icon { font-size: 1.3rem; line-height: 1; }
.caisse-card-nom { font-size: .84rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.caisse-card-prix { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700; color: var(--gold-ink); }
.caisse-card-prix--du { font-size: .85rem; }
.caisse-card-prix--du span {
  display: block; font-size: .64rem; font-weight: 500;
  color: var(--text-dim); font-family: 'Rajdhani', sans-serif; text-transform: none; letter-spacing: 0;
}
.caisse-card-occupant { font-size: .72rem; color: var(--text-muted); line-height: 1.2; }
.caisse-card-footer {
  margin-top: auto;
  padding-top: .4rem;
  font-size: .68rem;
  color: var(--text-dim);
  letter-spacing: .02em;
}

.caisse-badge {
  font-size: .6rem;
  font-weight: 700;
  padding: .18rem .5rem;
  border-radius: var(--radius-pill);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.caisse-badge-rupture  { background: rgba(239,68,68,.18);  color: var(--danger-ink); border: 1px solid rgba(239,68,68,.4); }
.caisse-badge-illimite { background: rgba(240,193,92,.2); color: var(--gold-ink); border: 1px solid rgba(240,193,92,.4); }
.caisse-badge-occupe   { background: rgba(255,190,11,.2); color: var(--warning-ink); border: 1px solid rgba(255,190,11,.4); }

.caisse-card.est-occupe {
  border-color: rgba(255,190,11,.35);
  background: linear-gradient(160deg, var(--bg-card), rgba(255,190,11,.07));
}

.caisse-card-liberer {
  align-self: stretch;
  margin-top: .4rem;
  padding: .35rem .6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--neon);
  background: transparent;
  color: var(--neon-bright);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.caisse-card-liberer:hover { background: var(--neon); color: #fff; }

.caisse-card-modifier-prix {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  width: 1.65rem;
  height: 1.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: .78rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  transition: var(--transition);
}
.caisse-card-wrap:hover .caisse-card-modifier-prix,
.caisse-card-modifier-prix:focus-visible {
  opacity: 1;
}
.caisse-card-modifier-prix:hover { background: var(--neon); border-color: var(--neon); color: #fff; }
@media (hover: none) {
  .caisse-card-modifier-prix { opacity: 1; }
}

.caisse-card-ajouter {
  align-items: center;
  justify-content: center;
  gap: .25rem;
  border: 1px solid #22c55e;
  background: #22c55e;
  color: #fff;
}
.caisse-card-ajouter:hover {
  background: #1ea34e;
  border-color: #1ea34e;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34,197,94,.35);
}
.caisse-card-ajouter-icone {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 700;
}
.caisse-card-ajouter-texte {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 576px) {
  .caisse-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
  .caisse-pill { font-size: .76rem; padding: .4rem .8rem; }
  .caisse-card { min-height: 110px; padding: .7rem .7rem .6rem; }
}

/* ════════════════════════════════════════════════════════════
   CAISSE — ONGLET STOCK (reprise du design bahamas_v9)
   ════════════════════════════════════════════════════════════ */
.stocks-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stocks-table-card table { margin-bottom: 0; }
.stocks-table-card thead th {
  background: var(--bg-card2);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: .6rem 1rem;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.stocks-table-card tbody tr {
  border-bottom: 1px solid var(--border);
  background: transparent;
  transition: var(--transition);
}
.stocks-table-card tbody tr:hover { background: var(--bg-surface); }
.stocks-table-card tbody td { padding: .65rem 1rem; vertical-align: middle; border: none; }
.stocks-table-card tbody tr.illimite-row { background: rgba(240,193,92,.05) !important; }
.stocks-table-card tbody tr.illimite-row:hover { background: rgba(240,193,92,.09) !important; }
.stocks-table-card tbody tr.rupture-row { background: rgba(239,68,68,.05); }
.stocks-table-card tbody tr.rupture-row:hover { background: rgba(239,68,68,.09); }

.stock-produit-nom { font-weight: 700; color: var(--text-primary); font-size: .86rem; }
.stock-gestion-tag { font-size: .68rem; color: var(--text-dim); }

.stock-mini-bar {
  height: 5px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
  margin-top: .3rem;
  width: 90px;
}
.stock-mini-bar-fill { height: 100%; border-radius: 3px; transition: width .4s ease; background: var(--success); }
.stock-mini-bar-fill.bas    { background: var(--warning); }
.stock-mini-bar-fill.rupture{ background: var(--danger); }

.stock-valeur { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1rem; color: var(--neon-bright); }
.stock-illim-val { font-weight: 700; color: var(--gold-ink); font-size: .82rem; letter-spacing: .03em; }

.stock-alert-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 700;
  background: rgba(255,190,11,.12);
  color: var(--warning-ink);
  border: 1px solid rgba(255,190,11,.3);
  border-radius: var(--radius-pill);
  padding: .18rem .55rem;
}
.stock-alert-pill.danger { background: rgba(239,68,68,.12); color: var(--danger-ink); border-color: rgba(239,68,68,.35); }
.stock-alert-pill.ok     { background: rgba(62,207,142,.12); color: var(--success-ink); border-color: rgba(62,207,142,.3); }

.stock-actions { display: flex; gap: .35rem; flex-wrap: nowrap; }
.btn-stock-action {
  padding: .3rem .65rem;
  font-size: .72rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-neon);
  background: transparent;
  color: var(--neon-bright);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
}
.btn-stock-action:hover { background: var(--neon); color: #fff; border-color: var(--neon); }
.btn-stock-action.ajuster { border-color: var(--border); color: var(--text-muted); }
.btn-stock-action.ajuster:hover { background: var(--bg-card2); color: var(--text-primary); border-color: var(--text-dim); }

/* ════════════════════════════════════════════════════════════
   CAISSE — ONGLET DANSES (reprise du design bahamas_v9)
   ════════════════════════════════════════════════════════════ */
.danse-form-card {
  border: 1.5px solid var(--border-neon) !important;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.danse-form-card .card-header {
  background: rgba(90,168,220,.08);
  color: var(--neon-bright);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}

.danse-recap-montant {
  padding: .65rem .8rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  font-size: .84rem;
}
.danse-recap-montant strong { color: var(--gold-ink); font-family: 'Cinzel', serif; }

.danse-active-card {
  border: 1.5px solid var(--success) !important;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: 0 0 20px rgba(62,207,142,.15);
  overflow: hidden;
  margin-bottom: .9rem;
}
.danse-active-card .danse-active-header {
  background: rgba(62,207,142,.08);
  color: var(--success-ink);
  font-weight: 700;
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.danse-active-body { padding: 1.1rem 1rem 1.3rem; text-align: center; }
.danse-active-icone { font-size: 2.2rem; margin-bottom: .2rem; line-height: 1; }
.danse-active-titre { font-family: 'Cinzel', serif; color: var(--success-ink); font-size: 1.05rem; font-weight: 700; }
.danse-active-lieu  { color: var(--text-muted); font-size: .82rem; margin: .2rem 0; }

.danse-chrono-label {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: .5rem;
}
.danse-chrono {
  font-family: 'Cinzel', serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--success-ink);
  text-shadow: 0 0 16px rgba(62,207,142,.55);
  margin: .1rem 0 .6rem;
  letter-spacing: .06em;
}
.danse-chrono.warn { color: var(--warning-ink); text-shadow: 0 0 16px rgba(255,190,11,.55); }
.danse-chrono.overtime { color: var(--danger-ink); text-shadow: 0 0 20px rgba(239,68,68,.7); animation: danseChronoOvertime 1s ease-in-out infinite; }
@keyframes danseChronoOvertime { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.danse-progress {
  height: 8px;
  max-width: 320px;
  margin: 0 auto .6rem;
  background: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.danse-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success), var(--neon));
  transition: width 1s linear, background .5s;
}
.danse-progress-fill.warn { background: linear-gradient(90deg, var(--warning), #ffd45c); }
.danse-progress-fill.overtime { background: linear-gradient(90deg, var(--danger), #ff8080); width: 100% !important; }

.danse-vendue-par { font-size: .78rem; color: var(--text-muted); }
.danse-badge-carre { background: rgba(56,189,248,.15); color: var(--info-ink); border: 1px solid rgba(56,189,248,.35); }
.danse-badge-sans  { background: var(--bg-card2); color: var(--text-dim); border: 1px solid var(--border); }

.danse-terminee-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .6rem .8rem;
  margin-bottom: .5rem;
  transition: var(--transition);
}
.danse-terminee-item:hover { border-color: var(--border-neon); background: var(--bg-surface); }

/* ============================================================
   CONTRATS — rendu Markdown (contrat.php / _config_contrats.php)
   ============================================================ */
.contrat-rendu {
  color: var(--text-primary);
  line-height: 1.65;
}
.contrat-rendu p { margin-bottom: .9rem; }
.contrat-rendu strong { color: var(--neon-bright); font-weight: 600; }
.contrat-rendu em { color: var(--text-muted); }
.contrat-rendu code {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .1rem .35rem;
  color: var(--gold);
}
.contrat-titre {
  color: var(--neon-bright);
  font-weight: 700;
  margin: 1.6rem 0 .8rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--border-neon);
}
.contrat-rendu h2.contrat-titre { font-size: 1.35rem; }
.contrat-rendu h3.contrat-titre { font-size: 1.15rem; }
.contrat-rendu h4.contrat-titre { font-size: 1rem; border-bottom: none; color: var(--gold); }
.contrat-rendu h5.contrat-titre { font-size: .95rem; border-bottom: none; color: var(--text-primary); }
.contrat-hr {
  border: 0;
  border-top: 1px solid var(--border-neon);
  margin: 1.4rem 0;
}
.contrat-rendu ul { margin: 0 0 .9rem 0; padding-left: 1.3rem; }
.contrat-rendu ul li { margin-bottom: .3rem; }
.contrat-rendu .table-responsive { margin-bottom: 1.1rem; }
.contrat-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.contrat-table th, .contrat-table td {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.contrat-table th {
  background: var(--bg-card2);
  color: var(--neon-bright);
  font-weight: 600;
}
.contrat-table tr:last-child td { border-bottom: none; }

/* Aperçu en direct du template (config contrats) */
.contrat-editeur { display: flex; gap: 1rem; flex-wrap: wrap; }
.contrat-editeur > div { flex: 1 1 360px; min-width: 300px; }
.contrat-apercu {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  max-height: 480px;
  overflow-y: auto;
}
.contrat-textarea {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: .82rem;
  max-height: 480px;
}