/* ════════════════════════════════════════════════════════════════════════
   ALT STORE — DESIGN SYSTEM « SOLAR INK » v5 (02/10/2026)
   Feuille de thème globale : relooking complet + MODE NUIT.
   Chargée sur toutes les pages (sitebar.php + injection <head>).
   Stratégie : tokens CSS + surcharge des utilitaires Tailwind les plus
   utilisés sous html.night (spécificité supérieure → gagne la cascade).
   ════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Sora:wght@400;600;700;800&display=swap');

/* ─────────────────────────── TOKENS ─────────────────────────── */
:root {
  --ember:      #D94F1A;
  --ember-2:    #E8611C;
  --ember-grad: linear-gradient(135deg, #E8611C 0%, #F09A3E 100%);
  --gold:       #C4933A;

  /* clair */
  --page-bg:    #F2F0EA;
  --card-bg:    #FFFFFF;
  --card-line:  #EBE7DF;
  --tx:         #1B1B22;
  --tx-2:       #55565F;
  --tx-3:       #8A8B96;

  /* nuit */
  --n-page:     #0D0E12;
  --n-card:     #15161B;
  --n-elev:     #1B1D24;
  --n-input:    #191B21;
  --n-line:     rgba(255,255,255,.09);
  --n-line-2:   rgba(255,255,255,.15);
  --n-tx:       #EDEEF2;
  --n-tx-2:     #B2B5C0;
  --n-tx-3:     #878A97;
  --n-ember:    #F0703E;
}

/* ─────────────────────── PEAU DE BASE (clair) ─────────────────────── */
body {
  font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif !important;
}
* { accent-color: var(--ember); }
::selection { background: rgba(217,79,26,.22); }

/* fond des pages applicatives (body.bg-gray-50) — porcelaine chaude + halos */
body.bg-gray-50 {
  background: var(--page-bg) !important;
  position: relative;
}
body.bg-gray-50::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(720px 420px at 8% -6%, rgba(217,79,26,.075), transparent 62%),
    radial-gradient(640px 400px at 100% 0%, rgba(196,147,58,.06), transparent 60%),
    radial-gradient(900px 600px at 50% 115%, rgba(217,79,26,.05), transparent 65%);
}

/* en-têtes collants → verre dépoli */
main > header.bg-white,
header.bg-white.sticky {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

/* focus net et de marque */
*:focus-visible {
  outline: 2px solid rgba(217,79,26,.55) !important;
  outline-offset: 1px;
}

/* utilitaires de marque (utilisées par certaines pages) */
.bg-ember { background-color: var(--ember) !important; }
.bg-ember-hover { background-color: #B83F12 !important; }
.bg-ember-soft { background-color: rgba(217,79,26,.12) !important; }
.bg-ember-pale { background-color: rgba(217,79,26,.07) !important; }
.text-ember { color: var(--ember) !important; }
.border-ember { border-color: var(--ember) !important; }
.bg-gradient-ember { background: var(--ember-grad) !important; }

/* ────────────── COMPOSANTS — nouveau look (clair) ────────────── */

/* CTA jaune historique → gradient braise de la marque */
.yellow-gradient {
  background: var(--ember-grad) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 24px rgba(217,79,26,.32) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.yellow-gradient:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(217,79,26,.42) !important;
}

/* cartes KPI */
.stat-card {
  background: linear-gradient(165deg, #FFFFFF 0%, #FDFCFA 100%) !important;
  border: 1px solid var(--card-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 2px rgba(16,16,20,.04), 0 14px 34px -14px rgba(16,16,20,.14) !important;
  transition: transform .28s cubic-bezier(.34,1.4,.5,1), box-shadow .28s ease, border-color .28s ease !important;
}
.stat-card:hover {
  transform: translateY(-5px);
  border-color: #F2C6AE !important;
  box-shadow: 0 26px 52px -18px rgba(217,79,26,.28) !important;
}
.card-border-top { border-radius: 18px 18px 0 0; }

/* boutons génériques */
.btn {
  border-radius: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* badges de tendance */
.badge { border-radius: 999px !important; }
.trend-up   { background: rgba(39,161,91,.14) !important; color: #1E7A46 !important; }
.trend-down { background: rgba(220,38,38,.12) !important; color: #B91C1C !important; }

/* onglets en pilules */
.nav-tabs { gap: 6px; }
.nav-tab {
  border-radius: 999px !important;
  font-weight: 600 !important;
  transition: all .2s ease !important;
}

/* tableaux : en-têtes plus typographiques */
table th {
  font-family: 'Sora', 'Outfit', sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72em !important;
}

/* bouton flottant d'ouverture du menu (mobile) */
#sbFloatingBtn {
  background: linear-gradient(160deg, #17181D, #101115) !important;
  color: #F0703E !important;
  border: 1px solid rgba(240,112,62,.4) !important;
  border-radius: 14px !important;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR « ENCRE SOLAIRE » — sombre dans les deux modes
   ════════════════════════════════════════════════════════════════ */
.alt-sb {
  width: 264px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #16141B 0%, #0F1013 58%, #0C0D11 100%);
  border-right: 1px solid rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
  font-family: 'Sora', 'Outfit', sans-serif;
}
.alt-sb::before { /* halo braise en haut */
  content: '';
  position: absolute;
  top: -140px; left: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(217,79,26,.16) 0%, transparent 62%);
  pointer-events: none;
}
.alt-sb::after { /* trame fine */
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.alt-sb > * { position: relative; z-index: 1; }

/* — entête / marque — */
.alt-sb-head {
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.alt-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.alt-brand-logo {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--ember-grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 17px;
  box-shadow: 0 6px 20px rgba(217,79,26,.4), inset 0 1px 0 rgba(255,255,255,.25);
  flex-shrink: 0;
  overflow: hidden;
}
.alt-brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.alt-brand-name {
  color: #F5F5F8; font-weight: 800; font-size: 15.5px;
  letter-spacing: .04em; line-height: 1.1; white-space: nowrap;
}
.alt-brand-name span { color: var(--n-ember); }
.alt-brand-tag {
  color: #757884; font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; margin-top: 3px; white-space: nowrap;
}
#close-sidebar {
  display: none;
  width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05); color: #C9CCD6;
  align-items: center; justify-content: center; cursor: pointer;
}

/* — corps du menu — */
.alt-sb-nav { flex: 1; overflow-y: auto; padding: 14px 12px 18px; }
.alt-sb-nav::-webkit-scrollbar { width: 4px; }
.alt-sb-nav::-webkit-scrollbar-track { background: transparent; }
.alt-sb-nav::-webkit-scrollbar-thumb { background: rgba(240,112,62,.35); border-radius: 99px; }

.alt-nav-sec {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 8px 8px;
}
.alt-nav-sec:first-child { margin-top: 4px; }
.alt-nav-sec i { font-size: 10px; color: var(--n-ember); }
.alt-nav-sec span {
  font-size: 9.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: #6E7180; white-space: nowrap;
}
.alt-nav-sec::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.12), transparent);
}

.alt-nav-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px;
  margin-bottom: 2px;
  border-radius: 13px;
  color: #B7BAC6;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.alt-nav-item:hover {
  background: rgba(255,255,255,.055);
  color: #F2F3F7;
  transform: translateX(2px);
}
.alt-nav-ic {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  background: rgba(255,255,255,.055);
  color: inherit;
  transition: all .18s ease;
}
.alt-nav-item:hover .alt-nav-ic { background: rgba(240,112,62,.16); color: var(--n-ember); }
.alt-nav-lb {
  flex: 1; font-size: 13.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alt-nav-badge {
  background: var(--ember-grad);
  color: #fff; font-size: 10px; font-weight: 700;
  min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(217,79,26,.4);
}

/* état actif — gaufre braise + barre indicatrice */
.alt-nav-item.active {
  background: linear-gradient(135deg, rgba(232,97,28,.95), rgba(184,63,18,.92));
  color: #fff;
  box-shadow: 0 10px 26px -8px rgba(217,79,26,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
.alt-nav-item.active::before {
  content: '';
  position: absolute; left: -12px; top: 20%;
  width: 3.5px; height: 60%;
  border-radius: 99px;
  background: var(--n-ember);
  box-shadow: 0 0 12px rgba(240,112,62,.8);
}
.alt-nav-item.active .alt-nav-ic { background: rgba(255,255,255,.18); color: #fff; }
.alt-nav-item.deco:hover {
  background: rgba(239,68,68,.13);
  color: #FCA5A5;
}
.alt-nav-item.deco:hover .alt-nav-ic { background: rgba(239,68,68,.16); color: #FCA5A5; }

/* — pied : bascule jour/nuit + utilisateur — */
.alt-sb-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.07); }

.alt-theme-toggle {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
  color: #C9CCD6;
  font: 600 13px 'Sora', sans-serif;
  cursor: pointer;
  transition: all .2s ease;
  margin-bottom: 10px;
}
.alt-theme-toggle:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(240,112,62,.5);
}
.alt-theme-toggle .ic-moon { display: block; }
.alt-theme-toggle .ic-sun  { display: none; color: #FCD34D; }
html.night .alt-theme-toggle .ic-moon { display: none; }
html.night .alt-theme-toggle .ic-sun  { display: block; }
.alt-theme-toggle .tt-label::after { content: 'Mode nuit'; }
html.night .alt-theme-toggle .tt-label::after { content: 'Mode jour'; }
.alt-theme-toggle .tt-state { margin-left: auto; font-size: 10px; color: #8E92A0; font-weight: 700; letter-spacing: .08em; }
html.night .alt-theme-toggle .tt-state { color: var(--n-ember); }

.alt-user {
  display: flex; align-items: center; gap: 11px;
  padding: 10px;
  border-radius: 13px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}
.alt-user-ava {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--ember-grad);
  color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.alt-user-ava img { width: 100%; height: 100%; border-radius: 11px; object-fit: cover; }
.alt-user-meta { min-width: 0; flex: 1; }
.alt-user-name {
  color: #F2F3F7; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alt-user-mail {
  color: #757884; font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alt-user-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2BD576;
  box-shadow: 0 0 10px rgba(43,213,118,.8);
  flex-shrink: 0;
}

/* — bandeau essai gratuit / abonnement requis (pied de sidebar) — */
.alt-trial-card {
  border: 1px solid rgba(240,112,62,.35);
  background: rgba(217,79,26,.1);
  border-radius: 13px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.alt-trial-top {
  display: flex; align-items: center; gap: 8px;
  color: #F0A07A; font-size: 12px; font-weight: 600;
}
.alt-trial-top i { font-size: 12px; }
.alt-trial-top strong {
  margin-left: auto; color: #fff;
  background: var(--ember-grad); border-radius: 99px;
  font-size: 10.5px; padding: 2px 9px;
}
.alt-trial-bar {
  height: 4px; border-radius: 99px;
  background: rgba(255,255,255,.1);
  margin: 8px 0 9px; overflow: hidden;
}
.alt-trial-bar span {
  display: block; height: 100%;
  background: var(--ember-grad); border-radius: 99px;
}
.alt-trial-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--ember-grad); color: #fff !important;
  font: 700 12px 'Sora', sans-serif;
  border-radius: 10px; padding: 8px 10px;
  text-decoration: none; transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 20px rgba(217,79,26,.35);
}
.alt-trial-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(217,79,26,.45); }
.alt-trial-card.expired { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.12); }
.alt-trial-card.expired .alt-trial-top { color: #FCA5A5; }
.alt-trial-card.expired .alt-trial-btn { background: linear-gradient(135deg,#EF4444,#B91C1C); box-shadow: 0 8px 20px rgba(239,68,68,.35); }
.alt-trial-txt { color: #C9CCD6; font-size: 10.5px; line-height: 1.5; margin: 7px 0 9px; }

/* entrée « Passer à Pro » du menu */
.alt-nav-upgrade { color: #F0A07A; }
.alt-nav-upgrade .alt-nav-ic {
  background: rgba(217,79,26,.16);
  color: #F0703E;
}
.alt-nav-upgrade:hover { background: rgba(217,79,26,.14); color: #fff; }

/* bouton flottant pour les pages sans sidebar */
#altThemeFab {
  position: fixed; right: 18px; bottom: 18px; z-index: 1200;
  width: 46px; height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(150deg, #17181D, #0E0F13);
  color: #F0703E;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(10,10,14,.35), 0 2px 8px rgba(217,79,26,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
#altThemeFab:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(217,79,26,.35); }
#altThemeFab .ic-sun { display: none; }
html.night #altThemeFab .ic-sun  { display: block; }
html.night #altThemeFab .ic-moon { display: none; }

/* bascule discrète dans la navbar vitrée (landing) */
.alt-nav-theme-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.04);
  color: #555;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .2s ease;
}
.alt-nav-theme-btn:hover {
  border-color: rgba(217,79,26,.4);
  background: rgba(217,79,26,.1);
  color: var(--ember);
  transform: translateY(-1px);
}
html.night .alt-nav-theme-btn {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
  color: #FCD34D;
}
.alt-nav-theme-btn .ic-sun { display: none; }
html.night .alt-nav-theme-btn .ic-sun  { display: block; }
html.night .alt-nav-theme-btn .ic-moon { display: none; }

/* transition douce au changement de mode */
html.alt-anim, html.alt-anim body, html.alt-anim * {
  transition: background-color .3s ease, border-color .3s ease, color .2s ease !important;
}

/* ════════════════════════════════════════════════════════════════
   MODE NUIT — surcharge des utilitaires Tailwind
   (spécificité html.night .classe > .classe de Tailwind)
   ════════════════════════════════════════════════════════════════ */
html.night { color-scheme: dark; }

html.night body { background: var(--n-page) !important; color: var(--n-tx); }
html.night body.bg-gray-50 { background: var(--n-page) !important; }
html.night body.bg-gray-50::before {
  background:
    radial-gradient(720px 420px at 8% -6%, rgba(240,112,62,.07), transparent 62%),
    radial-gradient(640px 400px at 100% 0%, rgba(99,102,241,.055), transparent 60%),
    radial-gradient(900px 600px at 50% 115%, rgba(240,112,62,.045), transparent 65%);
}

/* — surfaces — */
html.night .bg-white   { background: var(--n-card) !important; }
html.night .bg-white\/95, html.night .bg-white\/90, html.night .bg-white\/85,
html.night .bg-white\/80, html.night .bg-white\/70 { background: rgba(19,20,25,.94) !important; }
html.night .bg-white\/60, html.night .bg-white\/50 { background: rgba(19,20,25,.86) !important; }
html.night .bg-white\/40 { background: rgba(255,255,255,.05) !important; }
html.night .bg-white\/30, html.night .bg-white\/20, html.night .bg-white\/10 { background: rgba(255,255,255,.08) !important; }
html.night .bg-white\/5  { background: rgba(255,255,255,.04) !important; }
html.night .bg-gray-50 { background: #101116 !important; }
html.night .bg-gray-100{ background: var(--n-elev) !important; }
html.night .bg-gray-200{ background: #24262E !important; }
html.night .bg-gray-300{ background: #31333D !important; }
html.night .bg-gray-50\/50 { background: rgba(16,17,22,.6) !important; }

/* — arrêts de dégradés restés blancs — */
html.night .from-white { --tw-gradient-from: #15161B var(--tw-gradient-from-position, ); }
html.night .to-white   { --tw-gradient-to:   #15161B var(--tw-gradient-to-position, ); }
html.night .via-white  { --tw-gradient-via:  #15161B; }
html.night [class*='bg-gradient-to'].from-white,
html.night [class*='bg-gradient-to'].to-white { background-image: none !important; }

/* — en-têtes de tableaux custom (clients, etc.) — */
html.night .table-header {
  background-color: #191B22 !important;
  border-bottom: 2px solid rgba(255,255,255,.12) !important;
}
html.night .table-row { border-bottom: 1px solid rgba(255,255,255,.07) !important; }
html.night .table-row:hover { background-color: rgba(255,255,255,.045) !important; }
html.night .bg-pattern { background-image: none !important; }

/* — textes gris — */
html.night .text-gray-900 { color: #F3F4F7 !important; }
html.night .text-gray-800 { color: #E5E7EC !important; }
html.night .text-gray-700 { color: #CDCFD8 !important; }
html.night .text-gray-600 { color: #ABAFBA !important; }
html.night .text-gray-500 { color: #8F93A0 !important; }
html.night .text-gray-400 { color: #747886 !important; }
html.night .text-gray-300 { color: #5C6070 !important; }

/* — bordures grises — */
html.night .border-gray-100 { border-color: rgba(255,255,255,.07) !important; }
html.night .border-gray-200 { border-color: rgba(255,255,255,.11) !important; }
html.night .border-gray-300 { border-color: rgba(255,255,255,.18) !important; }
html.night .border-gray-50  { border-color: rgba(255,255,255,.06) !important; }
html.night .divide-gray-200 > * { border-color: rgba(255,255,255,.09) !important; }
html.night .divide-gray-100 > * { border-color: rgba(255,255,255,.07) !important; }

/* — survols gris — */
html.night .hover\:bg-gray-50:hover  { background: rgba(255,255,255,.05) !important; }
html.night .hover\:bg-gray-100:hover { background: rgba(255,255,255,.08) !important; }
html.night .hover\:bg-gray-200:hover { background: rgba(255,255,255,.12) !important; }
html.night .hover\:text-gray-700:hover,
html.night .hover\:text-gray-900:hover { color: #E5E7EC !important; }

/* — pastelles douces (bg-*-50) → teintes translucides — */
html.night .bg-red-50     { background: rgba(239,68,68,.13)  !important; }
html.night .bg-orange-50  { background: rgba(249,115,22,.13) !important; }
html.night .bg-amber-50   { background: rgba(245,158,11,.13) !important; }
html.night .bg-yellow-50  { background: rgba(250,204,21,.12) !important; }
html.night .bg-green-50   { background: rgba(34,197,94,.13)  !important; }
html.night .bg-emerald-50 { background: rgba(16,185,129,.13) !important; }
html.night .bg-teal-50    { background: rgba(20,184,166,.13) !important; }
html.night .bg-cyan-50    { background: rgba(6,182,212,.13)  !important; }
html.night .bg-sky-50     { background: rgba(14,165,233,.13) !important; }
html.night .bg-blue-50    { background: rgba(59,130,246,.14) !important; }
html.night .bg-indigo-50  { background: rgba(99,102,241,.14) !important; }
html.night .bg-violet-50  { background: rgba(139,92,246,.14) !important; }
html.night .bg-purple-50  { background: rgba(168,85,247,.14) !important; }
html.night .bg-pink-50    { background: rgba(236,72,153,.13) !important; }
html.night .bg-rose-50    { background: rgba(244,63,94,.13)  !important; }
html.night .bg-slate-100  { background: #1D1F26 !important; }

/* — pastelles soutenues (bg-*-100) — */
html.night .bg-red-100     { background: rgba(239,68,68,.20)  !important; }
html.night .bg-orange-100  { background: rgba(249,115,22,.20) !important; }
html.night .bg-amber-100   { background: rgba(245,158,11,.20) !important; }
html.night .bg-yellow-100  { background: rgba(250,204,21,.18) !important; }
html.night .bg-green-100   { background: rgba(34,197,94,.20)  !important; }
html.night .bg-emerald-100 { background: rgba(16,185,129,.20) !important; }
html.night .bg-teal-100    { background: rgba(20,184,166,.20) !important; }
html.night .bg-cyan-100    { background: rgba(6,182,212,.20)  !important; }
html.night .bg-sky-100     { background: rgba(14,165,233,.20) !important; }
html.night .bg-blue-100    { background: rgba(59,130,246,.21) !important; }
html.night .bg-indigo-100  { background: rgba(99,102,241,.21) !important; }
html.night .bg-violet-100  { background: rgba(139,92,246,.21) !important; }
html.night .bg-purple-100  { background: rgba(168,85,247,.21) !important; }
html.night .bg-pink-100    { background: rgba(236,72,153,.20) !important; }
html.night .bg-rose-100    { background: rgba(244,63,94,.20)  !important; }

/* — textes colorés → versions claires — */
html.night .text-red-600,     html.night .text-red-700     { color: #F58B7D !important; }
html.night .text-red-500      { color: #F87171 !important; }
html.night .text-red-800,     html.night .text-red-900     { color: #FCA5A5 !important; }
html.night .text-orange-600,  html.night .text-orange-700  { color: #FDBA74 !important; }
html.night .text-orange-800   { color: #FED7AA !important; }
html.night .text-amber-600,   html.night .text-amber-700   { color: #FCD34D !important; }
html.night .text-amber-500    { color: #FBBF24 !important; }
html.night .text-amber-400    { color: #FCD34D !important; }
html.night .text-amber-800,   html.night .text-amber-900   { color: #FDE68A !important; }
html.night .text-yellow-600,  html.night .text-yellow-700  { color: #FDE047 !important; }
html.night .text-yellow-500   { color: #FACC15 !important; }
html.night .text-yellow-800   { color: #FEF08A !important; }
html.night .text-green-600,   html.night .text-green-700   { color: #7BDD97 !important; }
html.night .text-green-500    { color: #4ADE80 !important; }
html.night .text-green-800,   html.night .text-green-900   { color: #A7F3C4 !important; }
html.night .text-emerald-600, html.night .text-emerald-700 { color: #6EE7B7 !important; }
html.night .text-teal-600,    html.night .text-teal-700    { color: #5EEAD4 !important; }
html.night .text-cyan-600,    html.night .text-cyan-700    { color: #67E8F9 !important; }
html.night .text-sky-600,     html.night .text-sky-700     { color: #7DD3FC !important; }
html.night .text-blue-600,    html.night .text-blue-700    { color: #93B8F9 !important; }
html.night .text-blue-500     { color: #7DA7F6 !important; }
html.night .text-blue-800,    html.night .text-blue-900    { color: #BFDBFE !important; }
html.night .text-indigo-600,  html.night .text-indigo-700  { color: #A5B4FC !important; }
html.night .text-violet-600,  html.night .text-violet-700  { color: #C4B5FD !important; }
html.night .text-purple-600,  html.night .text-purple-700  { color: #D0A9F7 !important; }
html.night .text-purple-500   { color: #C39BF5 !important; }
html.night .text-pink-600,    html.night .text-pink-700    { color: #F9A8D4 !important; }
html.night .text-rose-600,    html.night .text-rose-700    { color: #FDA4AF !important; }
html.night .text-slate-600    { color: #ABAFBA !important; }

/* — bordures colorées — */
html.night .border-red-200,     html.night .border-red-300     { border-color: rgba(239,68,68,.32) !important; }
html.night .border-orange-200,  html.night .border-orange-300  { border-color: rgba(249,115,22,.32) !important; }
html.night .border-amber-100    { border-color: rgba(245,158,11,.22) !important; }
html.night .border-amber-200,   html.night .border-amber-300   { border-color: rgba(245,158,11,.32) !important; }
html.night .border-amber-50     { border-color: rgba(245,158,11,.16) !important; }
html.night .border-yellow-100   { border-color: rgba(250,204,21,.2) !important; }
html.night .border-yellow-200   { border-color: rgba(250,204,21,.26) !important; }
html.night .border-yellow-300,  html.night .border-yellow-400,
html.night .border-yellow-500   { border-color: rgba(250,204,21,.4) !important; }
html.night .border-green-200,   html.night .border-green-300   { border-color: rgba(34,197,94,.32) !important; }
html.night .border-emerald-200, html.night .border-emerald-300 { border-color: rgba(16,185,129,.32) !important; }
html.night .border-blue-200,    html.night .border-blue-300    { border-color: rgba(59,130,246,.34) !important; }
html.night .border-indigo-200,  html.night .border-indigo-300  { border-color: rgba(99,102,241,.34) !important; }
html.night .border-purple-200,  html.night .border-purple-300  { border-color: rgba(168,85,247,.34) !important; }
html.night .border-violet-200   { border-color: rgba(139,92,246,.34) !important; }
html.night .border-rose-200     { border-color: rgba(244,63,94,.32) !important; }

/* — survols colorés — */
html.night .hover\:bg-blue-50:hover   { background: rgba(59,130,246,.14) !important; }
html.night .hover\:bg-amber-50:hover  { background: rgba(245,158,11,.14) !important; }
html.night .hover\:bg-amber-100:hover { background: rgba(245,158,11,.2) !important; }
html.night .hover\:bg-yellow-50:hover { background: rgba(250,204,21,.13) !important; }
html.night .hover\:bg-green-50:hover  { background: rgba(34,197,94,.14) !important; }
html.night .hover\:bg-red-50:hover    { background: rgba(239,68,68,.14) !important; }
html.night .hover\:bg-ember-soft:hover{ background: rgba(217,79,26,.2) !important; }
html.night .hover\:bg-yellow-100:hover{ background: rgba(250,204,21,.18) !important; }

/* — anneaux de focus — */
html.night .focus\:ring-yellow-300:focus,
html.night .focus\:ring-yellow-400:focus,
html.night .focus\:ring-amber-400:focus { --tw-ring-color: rgba(240,112,62,.5) !important; }
html.night .focus\:ring-blue-500:focus  { --tw-ring-color: rgba(59,130,246,.5) !important; }
html.night .focus\:border-yellow-300:focus,
html.night .focus\:border-yellow-400:focus { border-color: rgba(240,112,62,.55) !important; }

/* — éléments de formulaire — */
html.night input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='submit']):not([type='button']),
html.night select,
html.night textarea {
  background-color: var(--n-input);
  color: var(--n-tx);
  border-color: var(--n-line-2);
}
html.night input::placeholder,
html.night textarea::placeholder { color: #63667330 !important; color: #636673 !important; opacity: 1; }
html.night option { background: var(--n-card); color: var(--n-tx); }
html.night input[type='date']::-webkit-calendar-picker-indicator,
html.night input[type='time']::-webkit-calendar-picker-indicator { filter: invert(.8); }

/* — structures — */
html.night table { color: #E2E4EA; }
html.night th { color: #A7AAB5 !important; }
html.night hr { border-color: rgba(255,255,255,.1); }
html.night a { text-decoration-color: currentColor; }
html.night img.transparent-dark { filter: none; }

/* — composants en nuit — */
html.night .stat-card {
  background: linear-gradient(165deg, #1B1D24 0%, #14151A 100%) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.6) !important;
}
html.night .stat-card:hover {
  border-color: rgba(240,112,62,.4) !important;
  box-shadow: 0 26px 56px -18px rgba(217,79,26,.3) !important;
}
html.night .metric-label { color: #9BA0AC !important; }
html.night .sub-label    { color: #8B8F9B !important; }
html.night .sub-val      { color: #F3F4F7 !important; }
html.night .caisse-card  { background: var(--n-card) !important; border-color: var(--n-line) !important; }
html.night .pay-pill     { background: var(--n-input) !important; border-color: var(--n-line-2) !important; }
html.night .modal-box    { background: #17181E !important; color: var(--n-tx) !important; }
html.night .overlay      { background: rgba(4,5,9,.68) !important; }
html.night .nav-tabs     { background: transparent; }
html.night main > header.bg-white,
html.night header.bg-white.sticky {
  background: rgba(16,17,22,.86) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
html.night ::-webkit-scrollbar-track { background: var(--n-page); }
html.night .trend-up   { background: rgba(39,161,91,.16) !important; color: #6EE7B7 !important; }
html.night .trend-down { background: rgba(220,38,38,.16) !important; color: #FCA5A5 !important; }
html.night .trend-neutral { background: rgba(255,255,255,.07) !important; color: #CDD0D8 !important; }
html.night .toast.success { background: rgba(23,53,38,.96) !important; color: #A7F3C4 !important; }
html.night .toast.error   { background: rgba(58,22,16,.96) !important; color: #FCA5A5 !important; }
html.night .toast.warning { background: rgba(56,42,16,.96) !important; color: #FDE68A !important; }
html.night .toast.info    { background: rgba(45,26,18,.96) !important; color: #FDBA74 !important; }

/* ════════════════════════════════════════════════════════════════
   MODE NUIT — landing (index.php) et pages charte
   (connexion / inscription : bascule des tokens --l-* / --cream…)
   ════════════════════════════════════════════════════════════════ */

/* landing : tokens */
html.night {
  --cream: #0F1014;
  --mist:  #191A20;
  --text:  #ECEDEF;
  --muted: #9DA0AA;
  --border-light: rgba(255,255,255,.08);
}
/* landing : correctifs ponctuels */
html.night .nav-glass {
  background: rgba(15,16,20,.84);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
html.night .logo-text { color: #F4F5F8; }
html.night .logo-sub { color: #8B8E9A; }
html.night .nav-links a { color: #C6C9D2; }
html.night .nav-cta { background: #F4F5F8; color: #101014; }
html.night .m-menu { background: #0F1014; }
html.night .m-close { background: #1B1C22; color: #F4F5F8; }
html.night .m-links a:hover { background: rgba(217,79,26,.14); }
html.night #loader { background: #0B0C0F; }
html.night .btn-dark,
html.night .float-badge,
html.night .sol-tab,
html.night .m-chip,
html.night .mod-card,
html.night .filter-btn,
html.night .act-card,
html.night .price-card,
html.night .price-btn.dark,
html.night .form-card { background: #16171D !important; border-color: rgba(255,255,255,.09) !important; color: #ECEDEF; }
html.night .filter-btn { color: #9DA0AA !important; }
html.night .filter-btn.active { color: #fff !important; background: rgba(217,79,26,.2) !important; }
html.night .form-ctrl { background: #101116 !important; color: #ECEDEF !important; border-color: rgba(255,255,255,.14) !important; }
html.night #solutions, html.night #activites, html.night #contact { background: #0F1014 !important; }
html.night .toggle::after { background: #ECEDEF; }
html.night .toggle.on { background: rgba(217,79,26,.85); }

/* connexion / inscription : panneau droit passe en nuit */
html.night {
  --l-bg: #0F0F12;
  --l-surface: #16171C;
  --l-border: rgba(255,255,255,.09);
  --l-text: #F0F1F4;
  --l-muted: #9A9CA6;
  --l-faint: #17181D;
  --white: #16171C;
  --off-white: #101116;
  --bg-light: #0D0E12;
  --bg-section: #101116;
  --ink: #F2F3F6;
  --ink-90: #E4E6EB;
  --ink-60: #A9ABB6;
  --ink-40: #7C7E8A;
  --ink-20: rgba(255,255,255,.16);
  --ink-08: rgba(255,255,255,.09);
  --ember-soft: rgba(217,79,26,.16);
  --gold-soft: rgba(196,147,58,.14);
  --green-soft: rgba(39,161,91,.16);
}

/* ════════════════════════════════════════════════════════════════
   MODE NUIT — pages à palette fixe (inscription, notifications)
   ════════════════════════════════════════════════════════════════ */

/* notifications.php (centre de messages) — portée via .msg-list */
html.night:has(.msg-list) { --muted: #9DA0AA; --border: rgba(255,255,255,.11); }
html.night:has(.msg-list) body { color: #E9EAEF; }
html.night:has(.msg-list) .topbar, html.night:has(.msg-list) .sidebar, html.night:has(.msg-list) .dh { background: #16171C !important; }
html.night:has(.msg-list) .detail-pane { background: #0F1014 !important; }
html.night:has(.msg-list) .back-btn { background: #1B1D24 !important; color: #C9CCD6 !important; }
html.night:has(.msg-list) .back-btn:hover { background: #24262E !important; }
html.night:has(.msg-list) .pill-all   { background: rgba(255,255,255,.07) !important; color: #CDD0D8 !important; border-color: rgba(255,255,255,.16) !important; }
html.night:has(.msg-list) .pill-red   { background: rgba(220,38,38,.15) !important;  color: #FCA5A5 !important; border-color: rgba(220,38,38,.4) !important; }
html.night:has(.msg-list) .pill-orange{ background: rgba(217,119,6,.16) !important;  color: #FCD34D !important; border-color: rgba(217,119,6,.4) !important; }
html.night:has(.msg-list) .cat-tab    { color: #8F93A0 !important; }
html.night:has(.msg-list) .cat-tab:hover:not(.active) { color: #E5E7EC !important; }
html.night:has(.msg-list) .msg-item:hover  { background: rgba(255,255,255,.045) !important; }
html.night:has(.msg-list) .msg-item.active { background: rgba(196,147,58,.12) !important; }
html.night:has(.msg-list) .dbtn-ghost { background: #1B1D24 !important; color: #C9CCD6 !important; }
html.night:has(.msg-list) .msg-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15) !important; }
html.night:has(.msg-list) .msg-item { border-bottom-color: rgba(255,255,255,.06) !important; }
html.night:has(.msg-list) .mi-titre { color: #F3F4F7 !important; }
html.night:has(.msg-list) .mi-resume { color: #8F93A0 !important; }
html.night:has(.msg-list) .chat-ts span { background: rgba(255,255,255,.08) !important; color: #C9CCD6 !important; }
html.night:has(.msg-list) .sbar { background: rgba(255,255,255,.1) !important; }
html.night:has(.msg-list) .pill-blue { background: rgba(59,130,246,.16) !important; color: #93B8F9 !important; border-color: rgba(59,130,246,.4) !important; }
html.night:has(.msg-list) .detail-empty h3 { color: #CDD0D8 !important; }
html.night:has(.msg-list) .detail-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15) !important; }
html.night:has(.msg-list) .default-message {
  background: linear-gradient(135deg, rgba(14,165,233,.16), rgba(2,132,199,.1)) !important;
  border-left-color: #38BDF8 !important;
}
html.night:has(.msg-list) .drow { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.09) !important; }
html.night:has(.msg-list) .drow-val { color: #E9EAEF !important; }
html.night .detail-pane .drow { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.09) !important; }
html.night .detail-pane .drow-val { color: #E9EAEF !important; }
html.night .detail-pane .drow-label { color: #9DA0AA !important; }
html.night .detail-pane [style*='fef2f2'] {
  background: rgba(239,68,68,.12) !important;
  border-color: rgba(239,68,68,.35) !important;
  color: #FCA5A5 !important;
}
html.night:has(.msg-list) .dh-titre { color: #F3F4F7 !important; }

/* ── nuit : bibliothèques externes (CSS cross-origin non auto-patché) ── */

/* SweetAlert2 — popups, toasts (présent sur la plupart des pages) */
html.night .swal2-popup {
  background: #1B1D24 !important;
  color: #E9EAEF !important;
  border: 1px solid rgba(255,255,255,.1);
}
html.night .swal2-title { color: #F3F4F7 !important; }
html.night .swal2-html-container { color: #B2B5C0 !important; }
html.night .swal2-input, html.night .swal2-textarea, html.night .swal2-select {
  background: #101116 !important; color: #E9EAEF !important; border-color: rgba(255,255,255,.15) !important;
}
html.night .swal2-validation-message { background: rgba(239,68,68,.14) !important; color: #FCA5A5 !important; }

/* Drawflow — organigrammes caisses/boutiques */
html.night .drawflow { background: #101116 !important; }
html.night .drawflow .drawflow-node {
  background: #1B1D24 !important;
  color: #E9EAEF !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  -webkit-box-shadow: none; box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
html.night .drawflow .drawflow-node.selected,
html.night .drawflow .drawflow-node:focus { background: #24262E !important; border-color: rgba(240,112,62,.6) !important; }
html.night .drawflow .drawflow-node .drawflow_content_node { color: inherit; }
html.night .drawflow .drawflow-node .box b, html.night .drawflow .drawflow-node .box { color: #E9EAEF; }
html.night .drawflow .connection .main-path { stroke: #6E7180 !important; }
html.night .drawflow .connection .point { border-color: #F0703E !important; background: #101116 !important; }
html.night .drawflow-delete { background: #7F1D1D !important; color: #FCA5A5 !important; }

/* ── nuit : arrêts de dégradés doux (calendrier, bandeaux) ── */
html.night .from-yellow-50 { --tw-gradient-from: rgba(250,204,21,.12) var(--tw-gradient-from-position, ); }
html.night .to-yellow-50   { --tw-gradient-to:   rgba(250,204,21,.12) var(--tw-gradient-to-position, ); }
html.night .from-amber-50  { --tw-gradient-from: rgba(245,158,11,.12) var(--tw-gradient-from-position, ); }
html.night .to-amber-50    { --tw-gradient-to:   rgba(245,158,11,.12) var(--tw-gradient-to-position, ); }
html.night .from-orange-50 { --tw-gradient-from: rgba(249,115,22,.12) var(--tw-gradient-from-position, ); }
html.night .to-orange-50   { --tw-gradient-to:   rgba(249,115,22,.12) var(--tw-gradient-to-position, ); }
html.night .from-blue-50   { --tw-gradient-from: rgba(59,130,246,.12) var(--tw-gradient-from-position, ); }
html.night .to-blue-50     { --tw-gradient-to:   rgba(59,130,246,.12) var(--tw-gradient-to-position, ); }
html.night .from-gray-50   { --tw-gradient-from: #17181D var(--tw-gradient-from-position, ); }
html.night .to-gray-50     { --tw-gradient-to:   #17181D var(--tw-gradient-to-position, ); }
html.night .from-gray-100  { --tw-gradient-from: #1B1D24 var(--tw-gradient-from-position, ); }
html.night .to-gray-100    { --tw-gradient-to:   #1B1D24 var(--tw-gradient-to-position, ); }

/* ───────────────────────── IMPRESSION ─────────────────────────
   Les documents imprimés (factures, devis) restent en clair. */
@media print {
  html.night, html.night body { background: #fff !important; color: #111 !important; }
  html.night .bg-white, html.night .stat-card { background: #fff !important; }
  html.night .text-gray-900, html.night .text-gray-800 { color: #111827 !important; }
  html.night .text-gray-700, html.night .text-gray-600 { color: #374151 !important; }
  html.night .text-gray-500, html.night .text-gray-400 { color: #6B7280 !important; }
  html.night .border-gray-200, html.night .border-gray-300 { border-color: #D1D5DB !important; }
  html.night input, html.night select, html.night textarea { background: #fff !important; color: #111 !important; }
  #altThemeFab { display: none !important; }
}

/* accessibilité : réduire les animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}