/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Lot VC — LES THÈMES DU CRM (Imad, 17 oct. 2026 : « je garde ce thème-là… un thème de Club Internet avec les couleurs
   de Club Internet… quelque chose de wow, quelque chose de vif »).
   ─ Le sélecteur (palette de la barre du haut, js/theme.js) : styles communs aux deux thèmes.
   ─ « Classique » : aucune règle ici — la page reste exactement celle de css/style.css.
   ─ « Club Internet » : tout est sous html[data-theme]. Les couleurs sont celles de la marque (site
     clubinternet.ca) : marine #0a1f44 (nuit #061334, #12305f), bleu #2f6df6, rouge #e2231a, orange #ff7a1a, et la jauge
     du logo (vert #3fae2a → jaune #f5c400 → orange #f28c00 → rouge #e2231a). Titres en Sora, texte en Inter.
   ═════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap');

/* ── Sélecteur de thème (les deux thèmes) ─────────────────────────────────────────────────────────────────── */
.theme-choix { position: relative; display: flex; align-items: center; }
.theme-choix-bouton svg { width: 19px !important; height: 19px !important; }
.theme-choix.ouvert .theme-choix-bouton { background: var(--topbar-active); color: #fff; }
.theme-choix-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1001;
  width: 290px; padding: 8px;
  background: #fff; border: 1px solid #dde3ec; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(10, 31, 68, .22), 0 2px 6px rgba(10, 31, 68, .08);
  animation: themeMenuIn .16s ease;
}
.theme-choix-menu[hidden] { display: none; }
@keyframes themeMenuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.theme-choix-titre {
  padding: 6px 10px 8px; font-size: .68rem; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: #8492a8;
}
.theme-choix-option {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px; border: 1px solid transparent; border-radius: 10px;
  background: none; text-align: left; cursor: pointer; color: #0f1a2e;
  transition: background .15s, border-color .15s;
}
.theme-choix-option + .theme-choix-option { margin-top: 4px; }
.theme-choix-option:hover { background: #f3f6fb; }
.theme-choix-option:focus-visible { outline: 2px solid #2f6df6; outline-offset: 1px; }
.theme-choix-option[aria-checked="true"] { background: #eef3ff; border-color: #c9d8fb; }
.theme-choix-apercu {
  display: flex; flex-shrink: 0; width: 46px; height: 32px; border-radius: 8px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(10, 31, 68, .12);
}
.theme-choix-apercu i { flex: 1; }
.theme-choix-clubinternet .theme-choix-apercu {
  background: linear-gradient(135deg, #061334 0%, #0a1f44 50%, #12305f 100%);
  position: relative;
}
.theme-choix-clubinternet .theme-choix-apercu i { display: none; }
.theme-choix-clubinternet .theme-choix-apercu::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, #3fae2a, #f5c400 45%, #f28c00 75%, #e2231a);
}
.theme-choix-textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.theme-choix-textes strong { font-size: .86rem; font-weight: 700; }
.theme-choix-textes small { font-size: .72rem; color: #64748b; }
.theme-choix-coche { flex-shrink: 0; color: #2f6df6; visibility: hidden; }
.theme-choix-option[aria-checked="true"] .theme-choix-coche { visibility: visible; }
@media (max-width: 767.98px) {
  .theme-choix-bouton { width: 44px !important; height: 44px !important; }
  .theme-choix-menu { position: fixed; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 8px); right: 8px; left: 8px; width: auto; }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════
   LES THÈMES MODERNES — structure commune sous html[data-theme] (tout thème autre que « Classique ») : cartes arrondies,
   tuiles, bandeau, boutons, onglets… Les couleurs viennent des variables --ci-* : celles de « Club Internet » d'abord,
   puis « Aurore boréale » (lot VE, plus bas) qui redéfinit la palette et ajoute ses propres effets.
   ═════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
html[data-theme="clubinternet"] {
  --ci-marine: #0a1f44;
  --ci-marine-fonce: #061334;
  --ci-marine-clair: #12305f;
  --ci-bleu: #2f6df6;
  --ci-bleu-fonce: #1f56d6;
  --ci-bleu-doux: #5b8cff;
  --ci-bleu-clair: #e9f0ff;
  --ci-rouge: #e2231a;
  --ci-rouge-fonce: #b91b13;
  --ci-orange: #ff7a1a;
  --ci-jaune: #f5c400;
  --ci-vert: #22c55e;
  --ci-texte: #0f1a2e;
  --ci-texte-doux: #55627a;
  --ci-bord: #e3e8f1;
  --ci-fond: #f5f7fb;
  --ci-titres: 'Sora', 'Inter', 'Segoe UI', sans-serif;
  --ci-jauge: linear-gradient(90deg, #3fae2a 0%, #f5c400 45%, #f28c00 75%, #e2231a 100%);
  --ci-feu: linear-gradient(120deg, #e2231a 0%, #ff7a1a 100%);
  --ci-nuit: linear-gradient(115deg, #061334 0%, #0a1f44 52%, #12305f 100%);
  --ci-ciel: linear-gradient(135deg, #12305f 0%, #2f6df6 100%);
  --ci-ombre: 0 1px 2px rgba(10, 31, 68, .04), 0 8px 24px rgba(10, 31, 68, .06);
  --ci-ombre-forte: 0 18px 44px rgba(10, 31, 68, .16);

  /* Les variables du CRM (css/style.css) prennent les couleurs de la marque : tout ce qui les lit suit. */
  --topbar-bg: #0a1f44;
  --topbar-text: #c9d6ee;
  --topbar-hover: rgba(255, 255, 255, .08);
  --topbar-active: rgba(255, 255, 255, .14);
  --sidebar-bg: #ffffff;
  --sidebar-border: #e3e8f1;
  --sidebar-title-bg: transparent;
  --sidebar-title-color: #8492a8;
  --sidebar-link: #0a1f44;
  --sidebar-link-hover: #2f6df6;
  --content-bg: #f5f7fb;
  --panel-bg: #ffffff;
  --panel-border: #e3e8f1;
  --panel-header-bg: #fbfcfe;
  --panel-header-color: #0a1f44;
  --accent: #2f6df6;
  --accent-hover: #1f56d6;
  --accent-light: #e9f0ff;
  --success: #16a34a;
  --danger: #d61f17;
  --danger-light: #fde8e7;
  --warning: #f28c00;
  --warning-light: #fff4e5;
  --info: #2f6df6;
  --info-light: #e9f0ff;
  --text-primary: #0f1a2e;
  --text-secondary: #55627a;
  --text-muted: #8492a8;
  --border: #dbe3ef;
  --input-border: #d3dceb;
  --input-focus: #2f6df6;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(10, 31, 68, .04), 0 8px 24px rgba(10, 31, 68, .06);
  --shadow-md: 0 18px 44px rgba(10, 31, 68, .16);
}
@media (min-width: 768px) {
  html[data-theme] { --topbar-h: 46px; }
}

html[data-theme] ::selection { background: rgba(47, 109, 246, .22); }
html[data-theme] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme] ::-webkit-scrollbar-thumb { background: #c6d1e3; border-radius: 8px; }
html[data-theme] ::-webkit-scrollbar-thumb:hover { background: #9fb1cf; }

/* ── Fond : un voile bleu en haut à droite, une braise rouge en bas à gauche ── */
html[data-theme] body {
  background:
    radial-gradient(1100px 520px at 100% -8%, rgba(47, 109, 246, .10), transparent 62%),
    radial-gradient(900px 520px at -8% 108%, rgba(226, 35, 26, .06), transparent 60%),
    #f5f7fb;
  background-attachment: fixed;
}
html[data-theme] a { color: var(--ci-bleu); }
html[data-theme] a:hover { color: var(--ci-bleu-fonce); }

/* ── Barre du haut : la nuit Club Internet, soulignée par la jauge du logo ── */
html[data-theme] .topbar {
  background: var(--ci-nuit);
  box-shadow: 0 8px 28px rgba(6, 19, 52, .35);
}
html[data-theme] .topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--ci-jauge); pointer-events: none;
}
html[data-theme] .topbar-logo {
  gap: 10px; padding: 0 16px 0 14px;
  background: rgba(255, 255, 255, .03);
  border-right: 1px solid rgba(255, 255, 255, .07);
}
/* La jauge du logo remplace l'icône du globe. */
html[data-theme] .topbar-logo .logo-icon {
  width: 34px; height: 25px; border-radius: 0; font-size: 0; color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 8 68 44'%3E%3Cdefs%3E%3ClinearGradient id='j' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%233fae2a'/%3E%3Cstop offset='.45' stop-color='%23f5c400'/%3E%3Cstop offset='.75' stop-color='%23f28c00'/%3E%3Cstop offset='1' stop-color='%23e2231a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 44A28 28 0 0 1 64 44' fill='none' stroke='url(%23j)' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M36 46L58 15' stroke='%23fff' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='36' cy='46' r='4.5' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 6px rgba(242, 140, 0, .35));
}
/* « Club » en blanc, « Internet » en rouge-orangé, comme le logo. */
html[data-theme] .topbar-logo .logo-text {
  font-size: 0; line-height: 1; letter-spacing: -.3px; white-space: nowrap;
}
html[data-theme] .topbar-logo .logo-text::before,
html[data-theme] .topbar-logo .logo-text::after {
  font-family: var(--ci-titres); font-size: 1.04rem; font-weight: 800;
}
html[data-theme] .topbar-logo .logo-text::before { content: 'Club' / ''; color: #fff; }
html[data-theme] .topbar-logo .logo-text::after { content: 'Internet' / ''; color: #ff5a3c; }
html[data-theme] .topbar-logo .logo-sub {
  display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 999px;
  background: rgba(255, 122, 26, .16); color: #ffb37a;
  font-size: .56rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
}
html[data-theme] .topbar-nav-item > a,
html[data-theme] .topbar-nav-item > button {
  position: relative; font-weight: 600; letter-spacing: .1px; padding: 0 14px;
}
html[data-theme] .topbar-nav-item > a::after,
html[data-theme] .topbar-nav-item > button::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px; border-radius: 2px;
  background: var(--ci-feu); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
html[data-theme] .topbar-nav-item:hover > a::after,
html[data-theme] .topbar-nav-item:hover > button::after,
html[data-theme] .topbar-nav-item.active > a::after,
html[data-theme] .topbar-nav-item.active > button::after { transform: scaleX(1); }
html[data-theme] .topbar-right .topbar-nav-item > button::after { display: none; }
html[data-theme] .topbar-icon-btn { border-radius: 10px; }
html[data-theme] .topbar-icon-btn:hover { background: rgba(255, 255, 255, .10); }
/* Menus déroulants : cartes arrondies, survol bleu clair. */
html[data-theme] .topbar-dropdown {
  border: 1px solid var(--ci-bord); border-radius: 14px; padding: 6px;
  box-shadow: 0 24px 60px rgba(10, 31, 68, .22), 0 2px 6px rgba(10, 31, 68, .08);
}
html[data-theme] .topbar-dropdown a,
html[data-theme] .topbar-dropdown .dropdown-item {
  border-radius: 9px; color: var(--ci-texte); font-weight: 500; background: transparent;
}
html[data-theme] .topbar-dropdown a:hover,
html[data-theme] .topbar-dropdown .dropdown-item:hover,
html[data-theme] .has-submenu:hover > .dropdown-item,
html[data-theme] .has-submenu:hover > a {
  background: var(--ci-bleu-clair); color: var(--ci-bleu-fonce);
}
html[data-theme] .has-submenu > .topbar-dropdown { top: -7px; margin-left: 6px; }

/* ── Barre de gauche : liens en pastilles, le lien actif marqué d'un trait rouge ── */
html[data-theme] .sidebar {
  background: rgba(255, 255, 255, .92); border-right: 1px solid var(--ci-bord);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html[data-theme] .sidebar-section { border-bottom: none; padding: 4px 0 6px; }
html[data-theme] .sidebar-section-title {
  background: none; border-bottom: none; padding: 12px 14px 5px;
  font-size: .64rem; letter-spacing: 1px; color: #8492a8;
}
html[data-theme] .sidebar-section-title i,
html[data-theme] .sidebar-section-title svg { color: var(--ci-rouge); opacity: 1; }
html[data-theme] .sidebar-link,
html[data-theme] .quick-link {
  margin: 1px 8px; padding: 6px 10px; border-radius: 9px;
  color: var(--ci-marine); font-weight: 500;
  transition: background .15s, color .15s, box-shadow .15s;
}
html[data-theme] .sidebar-link:hover,
html[data-theme] .quick-link:hover { background: var(--ci-bleu-clair); color: var(--ci-bleu-fonce); }
html[data-theme] .sidebar-link.active {
  background: linear-gradient(90deg, rgba(226, 35, 26, .10), rgba(255, 122, 26, .03));
  color: var(--ci-rouge-fonce); font-weight: 700; box-shadow: inset 3px 0 0 var(--ci-rouge);
}
html[data-theme] .sidebar-link-sub { color: var(--ci-texte-doux); }
html[data-theme] .quick-link svg,
html[data-theme] .quick-link i { color: var(--ci-bleu); }
html[data-theme] .sidebar-search input,
html[data-theme] .sidebar-search select { border-radius: 9px; border-color: var(--input-border); padding: 6px 9px; }
html[data-theme] .sidebar-search input:focus,
html[data-theme] .sidebar-search select:focus { border-color: var(--ci-bleu); box-shadow: 0 0 0 3px rgba(47, 109, 246, .16); outline: none; }
html[data-theme] .sidebar-search button {
  border-radius: 999px; padding: 6px; background: var(--ci-feu);
  box-shadow: 0 6px 16px rgba(226, 35, 26, .25);
}
html[data-theme] .sidebar-search button:hover { background: var(--ci-feu); filter: brightness(1.06); }
html[data-theme] .sidebar-footer { border-top: 1px solid var(--ci-bord); }
html[data-theme] .sidebar-user { background: #f7f9fd; border-top-color: var(--ci-bord); border-radius: 10px; margin: 4px 8px; }

/* ── Contenu : titres en Sora, soulignés par la jauge ── */
html[data-theme] .main-content { padding: 20px 22px; }
html[data-theme] .page-header { margin-bottom: 18px; }
html[data-theme] .page-header h1 {
  font-family: var(--ci-titres); font-weight: 800; font-size: 1.5rem; letter-spacing: -.4px; color: var(--ci-marine);
}
html[data-theme] .page-header h1::after {
  content: ''; display: block; width: 52px; height: 4px; margin-top: 7px; border-radius: 4px; background: var(--ci-jauge);
}
html[data-theme] .breadcrumb a { color: var(--ci-bleu); }

/* ── Panneaux : cartes arrondies et légères ── */
html[data-theme] .panel,
html[data-theme] .dash-panel,
html[data-theme] .profile-block,
html[data-theme] .stat-box,
html[data-theme] .plan-card,
html[data-theme] .team-card,
html[data-theme] .kanban-col {
  border-radius: 16px; border-color: var(--ci-bord); box-shadow: var(--ci-ombre);
}
html[data-theme] .panel { overflow: visible; }
html[data-theme] .panel-header { border-radius: 16px 16px 0 0; background: linear-gradient(180deg, #fff, #fbfcfe); border-bottom-color: #edf1f7; padding: 12px 16px; }
html[data-theme] .panel-footer { border-radius: 0 0 16px 16px; background: #fbfcfe; border-top-color: #edf1f7; }
html[data-theme] .panel-title,
html[data-theme] .dash-panel-hdr,
html[data-theme] .profile-block-header,
html[data-theme] .modal-header h3,
html[data-theme] .kanban-col-title {
  font-family: var(--ci-titres); color: var(--ci-marine); letter-spacing: -.1px;
}
html[data-theme] .dash-panel-hdr {
  background: linear-gradient(180deg, #fff, #fbfcfe); border-bottom-color: #edf1f7; padding: 11px 14px; font-size: .84rem;
}
html[data-theme] .panel-title svg,
html[data-theme] .dash-panel-hdr > svg,
html[data-theme] .dash-panel-hdr > i,
html[data-theme] .profile-block-header svg { color: var(--ci-bleu); }
html[data-theme] .profile-block-header { background: linear-gradient(180deg, #fff, #fbfcfe); border-bottom-color: #edf1f7; border-radius: 16px 16px 0 0; }
html[data-theme] .stat-box::before { background: var(--stat-color, var(--ci-feu)); width: 5px; }
html[data-theme] .stat-box-value { font-family: var(--ci-titres); color: var(--ci-marine); }

/* ── Boutons : l'action principale en dégradé rouge-orange, comme « Voir les forfaits » du site ── */
html[data-theme] .btn { border-radius: 999px; font-weight: 600; transition: transform .12s ease, box-shadow .15s ease, filter .15s ease, background .15s ease; }
html[data-theme] .btn:active { transform: translateY(1px); }
html[data-theme] .btn-primary {
  background: var(--ci-feu); border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px rgba(226, 35, 26, .24);
}
html[data-theme] .btn-primary:hover {
  background: var(--ci-feu); filter: brightness(1.06); box-shadow: 0 10px 24px rgba(226, 35, 26, .32); transform: translateY(-1px);
}
html[data-theme] .btn-secondary { background: #fff; color: var(--ci-marine); border-color: #d3dceb; }
html[data-theme] .btn-secondary:hover { background: #f5f8ff; color: var(--ci-bleu-fonce); border-color: var(--ci-bleu-doux); }
html[data-theme] .btn-success {
  background: linear-gradient(120deg, #16a34a, #22c55e); border-color: transparent; box-shadow: 0 6px 16px rgba(22, 163, 74, .22);
}
html[data-theme] .btn-success:hover { background: linear-gradient(120deg, #15803d, #16a34a); }
html[data-theme] .btn-danger { background: #d61f17; border-color: transparent; box-shadow: 0 6px 16px rgba(214, 31, 23, .22); }
html[data-theme] .btn-danger:hover { background: var(--ci-rouge-fonce); }
html[data-theme] .btn-warning { background: linear-gradient(120deg, #f28c00, #f5c400); border-color: transparent; color: #3b2600; }
html[data-theme] .btn:disabled,
html[data-theme] .btn[disabled] { filter: grayscale(.4); box-shadow: none; transform: none; }

/* ── Champs ── */
html[data-theme] .form-input,
html[data-theme] .filter-select,
html[data-theme] .search-box input,
html[data-theme] .wf-input input,
html[data-theme] .wf-input select,
html[data-theme] .wf-input textarea {
  border-radius: 10px; border-color: var(--input-border);
  transition: border-color .15s, box-shadow .15s;
}
html[data-theme] .form-input:focus,
html[data-theme] .filter-select:focus,
html[data-theme] .search-box input:focus,
html[data-theme] .wf-input input:focus,
html[data-theme] .wf-input select:focus,
html[data-theme] .wf-input textarea:focus {
  border-color: var(--ci-bleu); box-shadow: 0 0 0 3px rgba(47, 109, 246, .16); outline: none;
}
html[data-theme] .toggle-switch input:checked + .toggle-track,
html[data-theme] .wf-toggle-wrap input:checked + .toggle-track { background: var(--ci-feu); }

/* ── Tableaux : en-têtes discrets en petites capitales, survol bleuté ── */
html[data-theme] thead tr { background: #f7f9fd; }
html[data-theme] thead th,
html[data-theme] .whmcs-table th {
  color: #55627a; font-size: .68rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  border-bottom: 1px solid var(--ci-bord);
}
html[data-theme] .whmcs-table th { background: #f7f9fd; }
html[data-theme] tbody tr { border-bottom-color: #eef2f7; }
html[data-theme] tbody tr:hover { background: #f3f7ff; }
html[data-theme] .whmcs-table tr:nth-child(even) td { background: #fafbfe; }

/* ── Pastilles ── */
html[data-theme] .badge { border-radius: 999px; padding: 2px 9px; font-weight: 700; letter-spacing: .1px; }

/* ── Onglets : l'onglet actif souligné de feu ── */
html[data-theme] .nav-tabs,
html[data-theme] .profile-tabs { border-bottom: 1px solid var(--ci-bord); gap: 2px; }
html[data-theme] .nav-tabs li a,
html[data-theme] .profile-tab {
  background: transparent; border: none; border-radius: 10px 10px 0 0; color: var(--ci-texte-doux); font-weight: 600;
  position: relative; transition: color .15s, background .15s;
}
html[data-theme] .nav-tabs li a:hover,
html[data-theme] .profile-tab:hover { background: #eef3ff; color: var(--ci-bleu-fonce); text-decoration: none; }
html[data-theme] .nav-tabs li.active a,
html[data-theme] .profile-tab.active { background: #fff; color: var(--ci-marine); font-weight: 700; border: none; }
html[data-theme] .nav-tabs li.active a::after,
html[data-theme] .profile-tab.active::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--ci-feu);
}

/* ── Fenêtres : voile marine flouté, carte arrondie ── */
html[data-theme] .modal-overlay { background: rgba(6, 19, 52, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html[data-theme] .modal { border-radius: 18px; border-color: var(--ci-bord); box-shadow: 0 30px 80px rgba(6, 19, 52, .35); }
html[data-theme] .modal-header { background: #fff; border-radius: 18px 18px 0 0; border-bottom-color: #edf1f7; padding: 14px 18px; }
html[data-theme] .modal-header::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 18px 18px 0 0; background: var(--ci-jauge);
}
html[data-theme] .modal-header { position: relative; }
html[data-theme] .modal-footer { border-top-color: #edf1f7; }
html[data-theme] .toast { border-radius: 12px; box-shadow: var(--ci-ombre-forte); }

/* ═════════ Tableau de bord ═════════ */
/* Le titre devient un bandeau de nuit : lueurs bleue et rouge, la jauge du logo en grand à droite, l'horloge en pastille. */
html[data-theme] .main-content:has(> #dash-live-clock) { position: relative; }
html[data-theme] #dash-live-clock {
  position: absolute; top: 34px; right: 268px; z-index: 2;
  color: #dbe5f7 !important; padding: 4px 12px !important; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html[data-theme] #dash-live-clock + .page-header {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 118px; padding: 24px 28px; margin-bottom: 16px; border-radius: 22px; align-items: flex-end;
  background:
    radial-gradient(620px 280px at 86% -30%, rgba(47, 109, 246, .60), transparent 62%),
    radial-gradient(520px 260px at -4% 130%, rgba(226, 35, 26, .40), transparent 60%),
    linear-gradient(115deg, #061334 0%, #0a1f44 55%, #12305f 100%);
  box-shadow: 0 20px 48px rgba(6, 19, 52, .28);
}
html[data-theme] #dash-live-clock + .page-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%);
}
html[data-theme] #dash-live-clock + .page-header::after {
  content: ''; position: absolute; z-index: -1; right: 26px; bottom: -6px; width: 210px; height: 136px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 8 68 44'%3E%3Cdefs%3E%3ClinearGradient id='j' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%233fae2a'/%3E%3Cstop offset='.45' stop-color='%23f5c400'/%3E%3Cstop offset='.75' stop-color='%23f28c00'/%3E%3Cstop offset='1' stop-color='%23e2231a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 44A28 28 0 0 1 64 44' fill='none' stroke='url(%23j)' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M36 46L58 15' stroke='%23fff' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='36' cy='46' r='4.5' fill='%23fff'/%3E%3C/svg%3E") center bottom / contain no-repeat;
  filter: drop-shadow(0 10px 30px rgba(242, 140, 0, .35));
}
html[data-theme] #dash-live-clock + .page-header > div::before {
  content: 'Club Internet · Gestion'; display: block; margin-bottom: 8px;
  color: #ffb37a; font-size: .7rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
}
html[data-theme] #dash-live-clock + .page-header h1 { color: #fff; font-size: 1.85rem; letter-spacing: -.6px; }
html[data-theme] #dash-live-clock + .page-header h1::after { width: 64px; margin-top: 10px; }
@media (max-width: 991.98px) {
  html[data-theme] #dash-live-clock { right: 40px; }
  html[data-theme] #dash-live-clock + .page-header::after { opacity: .35; right: -10px; }
}
@media (max-width: 767.98px) {
  html[data-theme] #dash-live-clock { position: static; display: inline-block; margin: 0 0 8px; color: #55627a !important; background: #fff; border-color: var(--ci-bord); }
  html[data-theme] #dash-live-clock + .page-header { min-height: 0; padding: 20px; }
  html[data-theme] #dash-live-clock + .page-header h1 { font-size: 1.4rem; }
}
/* Tuiles de chiffres : des cartes séparées, icônes en dégradés de la marque, chiffres en Sora. */
html[data-theme] .whmcs-kpi-row { gap: 12px; border: none; border-radius: 0; overflow: visible; margin-bottom: 12px; }
html[data-theme] .whmcs-kpi,
html[data-theme] #kpi-grid .whmcs-kpi:first-child,
html[data-theme] #kpi-grid .whmcs-kpi:last-child,
html[data-theme] #kpi-grid-services .whmcs-kpi:first-child,
html[data-theme] #kpi-grid-services .whmcs-kpi:last-child {
  border: 1px solid var(--ci-bord); border-radius: 16px; background: #fff; box-shadow: var(--ci-ombre);
  padding: 13px 14px; gap: 12px; position: relative;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
html[data-theme] .whmcs-kpi:hover {
  background: #fff; transform: translateY(-2px); box-shadow: var(--ci-ombre-forte); border-color: #d3ddf0;
}
/* Lot VD (capture d'Imad, 17 oct. 2026) : la tuile soulevée forme sa propre couche — sans ceci, sa bulle de détail passait
   SOUS la rangée de tuiles suivante. La tuile survolée (ou dont la bulle est ouverte) passe au-dessus de toute la grille. */
html[data-theme] .whmcs-kpi:hover,
html[data-theme] .whmcs-kpi:focus-within,
html[data-theme] .whmcs-kpi:has(.kpi-popover.ouvert) { z-index: 80; }
html[data-theme] .whmcs-kpi-num {
  font-family: var(--ci-titres); font-weight: 800; font-size: 1.62rem; letter-spacing: -.6px; color: var(--ci-marine);
}
html[data-theme] .whmcs-kpi-label { color: var(--ci-texte-doux); font-weight: 500; margin-top: 4px; }
html[data-theme] .whmcs-kpi-icon {
  width: 42px; height: 42px; border-radius: 13px; color: #fff;
  box-shadow: 0 8px 18px rgba(10, 31, 68, .18), inset 0 1px 0 rgba(255, 255, 255, .25);
}
html[data-theme] .whmcs-kpi-icon svg { width: 20px !important; height: 20px !important; }
html[data-theme] .whmcs-kpi-icon.green  { background: linear-gradient(135deg, #3fae2a, #22c55e); box-shadow: 0 8px 18px rgba(34, 197, 94, .30); }
html[data-theme] .whmcs-kpi-icon.pink   { background: linear-gradient(135deg, #e2231a, #ff7a1a); box-shadow: 0 8px 18px rgba(226, 35, 26, .30); }
html[data-theme] .whmcs-kpi-icon.orange { background: linear-gradient(135deg, #f28c00, #f5c400); box-shadow: 0 8px 18px rgba(242, 140, 0, .30); }
html[data-theme] .whmcs-kpi-icon.teal   { background: linear-gradient(135deg, #12305f, #2f6df6); box-shadow: 0 8px 18px rgba(47, 109, 246, .30); }
html[data-theme] .whmcs-kpi-icon.blue   { background: linear-gradient(135deg, #2f6df6, #5b8cff); box-shadow: 0 8px 18px rgba(47, 109, 246, .30); }
html[data-theme] .whmcs-kpi-icon.purple { background: linear-gradient(135deg, #0a1f44, #2f6df6); box-shadow: 0 8px 18px rgba(10, 31, 68, .30); }
html[data-theme] .whmcs-kpi-icon.red    { background: linear-gradient(135deg, #b91b13, #e2231a); box-shadow: 0 8px 18px rgba(226, 35, 26, .30); }
html[data-theme] .whmcs-kpi { min-width: 0; }
@media (max-width: 767.98px) {
  html[data-theme] .whmcs-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html[data-theme] .whmcs-kpi { padding: 12px 10px; gap: 10px; }
  html[data-theme] .whmcs-kpi-num { font-size: 1.28rem; }
  html[data-theme] .whmcs-kpi-icon { width: 36px; height: 36px; border-radius: 11px; }
}
/* Les tuiles Vidéotron / modems (lignes plus longues). */
html[data-theme] #kpi-grid-videotron,
html[data-theme] #kpi-grid-retour-modem { gap: 12px; }

/* « À traiter maintenant » : une carte marquée de feu. */
html[data-theme] .a-traiter {
  border-radius: 16px; border: 1px solid var(--ci-bord); border-left: 5px solid var(--ci-orange);
  box-shadow: var(--ci-ombre); overflow: hidden;
}
html[data-theme] .a-traiter.at-vide { border-left-color: var(--ci-vert); }
html[data-theme] .a-traiter-entete { background: linear-gradient(90deg, #fff4e5, #fff); border-bottom-color: #f6e3c9; }
html[data-theme] .a-traiter.at-vide .a-traiter-entete { background: linear-gradient(90deg, #e9f9ef, #fff); border-bottom-color: #d4efdc; }
html[data-theme] .a-traiter-titre { font-family: var(--ci-titres); color: var(--ci-marine); }

/* Listes du jour. */
html[data-theme] .ca-name { color: var(--ci-marine); }
html[data-theme] .ca-name a:hover { color: var(--ci-bleu); }
html[data-theme] .ca-ip { color: var(--ci-bleu); }
html[data-theme] .ca-ip-va {
  display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 6px;
  background: #f1f5fd; color: var(--ci-marine-clair); font-size: .7rem;
}
html[data-theme] .ca-item { border-bottom-color: #eef2f7; }
html[data-theme] .dash-hdr-note strong { color: var(--ci-vert); }
html[data-theme] .cron-ligne svg { color: var(--ci-bleu) !important; }
html[data-theme] #today-tx-total { background: linear-gradient(120deg, #16a34a, #22c55e) !important; box-shadow: 0 4px 10px rgba(22, 163, 74, .25); }
html[data-theme] #overdue-count,
html[data-theme] #arrets-service-compte { background: var(--ci-feu) !important; box-shadow: 0 4px 10px rgba(226, 35, 26, .25); }
html[data-theme] #reseller-req-count { background: linear-gradient(120deg, #f28c00, #f5c400) !important; }
html[data-theme] .dash-vide-icone { background: linear-gradient(135deg, #3fae2a, #22c55e); color: #fff; box-shadow: 0 8px 18px rgba(34, 197, 94, .28); }
html[data-theme] .dash-vide strong { font-family: var(--ci-titres); color: var(--ci-marine); }
html[data-theme] .dash-etat-pastille.actif { background: #e3f8ea; color: #15803d; }
html[data-theme] .kpi-popover { border-radius: 14px; border-color: var(--ci-bord); box-shadow: var(--ci-ombre-forte); }
html[data-theme] .staff-avatar { background: var(--ci-ciel); }

/* ═════════ Page de connexion ═════════ */
html[data-theme] body:has(.login-container) {
  background:
    radial-gradient(900px 520px at 85% 8%, rgba(47, 109, 246, .45), transparent 60%),
    radial-gradient(700px 460px at 8% 92%, rgba(226, 35, 26, .30), transparent 60%),
    linear-gradient(160deg, #061334 0%, #0a1f44 55%, #12305f 100%);
  background-attachment: fixed;
  font-family: 'Inter', system-ui, sans-serif;
}
html[data-theme] .login-container {
  border-radius: 22px; padding: 34px 38px 30px; position: relative; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .40);
}
html[data-theme] .login-container::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--ci-jauge);
}
/* Le logo de la page de connexion : la jauge, « Club » marine et « Internet » rouge, comme sur le site. */
html[data-theme] .login-logo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 0; color: transparent; margin-bottom: 18px;
}
html[data-theme] .login-logo::before {
  content: ''; width: 52px; height: 38px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 8 68 44'%3E%3Cdefs%3E%3ClinearGradient id='j' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%233fae2a'/%3E%3Cstop offset='.45' stop-color='%23f5c400'/%3E%3Cstop offset='.75' stop-color='%23f28c00'/%3E%3Cstop offset='1' stop-color='%23e2231a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 44A28 28 0 0 1 64 44' fill='none' stroke='url(%23j)' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M36 46L58 15' stroke='%230a1f44' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='36' cy='46' r='4.5' fill='%230a1f44'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-theme] .login-logo::after {
  content: 'Club Internet' / ''; font-family: var(--ci-titres); font-size: 1.9rem; font-weight: 800; letter-spacing: -.6px;
  background: linear-gradient(90deg, #0a1f44 0 37.5%, #e2231a 37.5% 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme] #titre-etape { color: var(--ci-texte-doux) !important; font-family: var(--ci-titres); }
html[data-theme] .login-container h1,
html[data-theme] .login-container h2 { font-family: var(--ci-titres); color: var(--ci-marine); }
html[data-theme] .btn-login {
  background: var(--ci-feu) !important; border: none !important; border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(226, 35, 26, .30); font-weight: 700;
}
html[data-theme] .btn-login:hover { filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .whmcs-kpi,
  html[data-theme] .btn,
  html[data-theme] .topbar-nav-item > a::after,
  html[data-theme] .topbar-nav-item > button::after,
  .theme-choix-menu { transition: none; animation: none; }
  html[data-theme] .whmcs-kpi:hover,
  html[data-theme] .btn-primary:hover { transform: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Lot VE — THÈME « AURORE BORÉALE » (Imad, 17 oct. 2026 : « rajoute-moi un troisième thème… quelque chose de wow…
   quelque chose de ouf »). Le ciel du Nord : barre du haut et menu de gauche couleur de nuit, rideaux d'aurore (vert,
   turquoise, violet, rose) qui dérivent lentement derrière la page, cartes de verre, chiffres en dégradé, boutons
   qui glissent d'une couleur à l'autre, bandeau du tableau de bord étoilé. Même structure que les autres thèmes
   modernes (html[data-theme], plus haut) ; ici la palette, puis les effets propres. Aucun flou derrière les cartes du
   contenu (un flou ferait d'une carte le repère des fenêtres fixes qu'elle contient) : le verre vient de la transparence
   au-dessus de l'aurore, déjà douce.
   ═════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
html[data-theme="aurore"] {
  --ci-marine: #1e1b4b;
  --ci-marine-fonce: #070b1f;
  --ci-marine-clair: #312e81;
  --ci-bleu: #7c3aed;
  --ci-bleu-fonce: #6d28d9;
  --ci-bleu-doux: #a78bfa;
  --ci-bleu-clair: #f1ebff;
  --ci-rouge: #ec4899;
  --ci-rouge-fonce: #be185d;
  --ci-orange: #8b5cf6;
  --ci-jaune: #fbbf24;
  --ci-vert: #10b981;
  --ci-texte: #1e1b4b;
  --ci-texte-doux: #5b5f86;
  --ci-bord: rgba(124, 58, 237, .14);
  --ci-fond: #f4f3ff;
  --ci-titres: 'Sora', 'Inter', 'Segoe UI', sans-serif;
  --ci-jauge: linear-gradient(90deg, #2ef2a0 0%, #22d3ee 30%, #818cf8 64%, #ec4899 100%);
  --ci-feu: linear-gradient(120deg, #06b6d4 0%, #7c3aed 50%, #ec4899 100%);
  --ci-nuit: linear-gradient(115deg, #05081a 0%, #0d1333 48%, #1c0f42 100%);
  --ci-ciel: linear-gradient(135deg, #22d3ee 0%, #7c3aed 100%);
  --ci-ombre: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 12px 32px rgba(76, 29, 149, .10);
  --ci-ombre-forte: 0 24px 56px rgba(76, 29, 149, .22);

  --topbar-bg: #070b1f;
  --topbar-text: #c7d2fe;
  --topbar-hover: rgba(167, 139, 250, .14);
  --topbar-active: rgba(167, 139, 250, .24);
  --sidebar-bg: #0a0f26;
  --sidebar-border: rgba(167, 139, 250, .14);
  --sidebar-title-bg: transparent;
  --sidebar-title-color: #5eead4;
  --sidebar-link: #c7d2fe;
  --sidebar-link-hover: #ffffff;
  --content-bg: #f4f3ff;
  --panel-bg: rgba(255, 255, 255, .82);
  --panel-border: rgba(124, 58, 237, .14);
  --panel-header-bg: rgba(255, 255, 255, .6);
  --panel-header-color: #1e1b4b;
  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --accent-light: #f1ebff;
  --success: #059669;
  --danger: #e11d48;
  --danger-light: #ffe4ec;
  --warning: #d97706;
  --warning-light: #fff4e0;
  --info: #0891b2;
  --info-light: #e0f7fb;
  --text-primary: #1e1b4b;
  --text-secondary: #5b5f86;
  --text-muted: #8b8fb5;
  --border: rgba(124, 58, 237, .18);
  --input-border: rgba(124, 58, 237, .22);
  --input-focus: #7c3aed;
  --radius: 12px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 12px 32px rgba(76, 29, 149, .10);
  --shadow-md: 0 24px 56px rgba(76, 29, 149, .22);
}
html[data-theme="aurore"] ::selection { background: rgba(124, 58, 237, .22); }
html[data-theme="aurore"] ::-webkit-scrollbar-thumb { background: #c4b5fd; }
html[data-theme="aurore"] ::-webkit-scrollbar-thumb:hover { background: #a78bfa; }

/* ── L'aurore derrière la page : quatre lueurs qui dérivent lentement ── */
html[data-theme="aurore"] body { background: #f4f3ff; }
html[data-theme="aurore"] body::before {
  content: ''; position: fixed; inset: -25% -15%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 18% 22%, rgba(46, 242, 160, .30), transparent 70%),
    radial-gradient(34% 30% at 80% 12%, rgba(34, 211, 238, .28), transparent 70%),
    radial-gradient(40% 36% at 72% 80%, rgba(167, 139, 250, .34), transparent 70%),
    radial-gradient(32% 30% at 22% 86%, rgba(244, 114, 182, .22), transparent 70%);
  animation: aurore-derive 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes aurore-derive {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3%, -2%, 0) rotate(4deg) scale(1.06); }
  100% { transform: translate3d(-3%, 2%, 0) rotate(-3deg) scale(1.02); }
}

/* ── Barre du haut : la nuit, et un ruban d'aurore qui coule ── */
html[data-theme="aurore"] .topbar { background: var(--ci-nuit); box-shadow: 0 10px 34px rgba(7, 11, 31, .45); }
html[data-theme="aurore"] .topbar::after {
  background: linear-gradient(90deg, #2ef2a0, #22d3ee, #818cf8, #ec4899, #22d3ee, #2ef2a0);
  background-size: 300% 100%;
  animation: aurore-ruban 12s linear infinite;
  box-shadow: 0 0 14px rgba(34, 211, 238, .55), 0 0 28px rgba(167, 139, 250, .35);
}
@keyframes aurore-ruban { to { background-position: 300% 0; } }
html[data-theme="aurore"] .topbar-logo .logo-icon { filter: drop-shadow(0 0 8px rgba(34, 211, 238, .55)); }
html[data-theme="aurore"] .topbar-logo .logo-text::after {
  background: linear-gradient(90deg, #2ef2a0, #22d3ee 45%, #a78bfa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="aurore"] .topbar-logo .logo-sub { background: rgba(46, 242, 160, .14); color: #5eead4; }

/* ── Menu de gauche : la nuit, liens lumineux, le lien actif en verre violet bordé d'aurore ── */
html[data-theme="aurore"] .sidebar,
html[data-theme="aurore"] .sidebar[style*="background"] {
  background: radial-gradient(120% 40% at 0% 0%, rgba(46, 242, 160, .10), transparent 60%),
              radial-gradient(120% 50% at 100% 100%, rgba(124, 58, 237, .22), transparent 60%),
              linear-gradient(180deg, #0a0f26 0%, #120c33 100%) !important;
  border-right: 1px solid rgba(167, 139, 250, .16) !important;
  color: #c7d2fe;
}
html[data-theme="aurore"] .sidebar-section-title { color: #5eead4; }
html[data-theme="aurore"] .sidebar-section-title i,
html[data-theme="aurore"] .sidebar-section-title svg { color: #2ef2a0; }
html[data-theme="aurore"] .sidebar-link,
html[data-theme="aurore"] .quick-link { color: #c7d2fe; }
html[data-theme="aurore"] .sidebar-link:hover,
html[data-theme="aurore"] .quick-link:hover { background: rgba(167, 139, 250, .16); color: #fff; }
html[data-theme="aurore"] .sidebar-link.active {
  background: linear-gradient(90deg, rgba(124, 58, 237, .50), rgba(236, 72, 153, .16));
  color: #fff; box-shadow: inset 3px 0 0 #2ef2a0, 0 0 22px rgba(124, 58, 237, .35);
}
html[data-theme="aurore"] .sidebar-link-sub { color: #a5b4fc; }
html[data-theme="aurore"] .quick-link svg,
html[data-theme="aurore"] .quick-link i { color: #5eead4; }
html[data-theme="aurore"] .sidebar-search input,
html[data-theme="aurore"] .sidebar-search select {
  background: rgba(255, 255, 255, .06); border-color: rgba(167, 139, 250, .28); color: #e0e7ff;
}
html[data-theme="aurore"] .sidebar-search input::placeholder { color: #8b8fb5; }
html[data-theme="aurore"] .sidebar-search option { color: #1e1b4b; background: #fff; }
html[data-theme="aurore"] .sidebar-search input:focus,
html[data-theme="aurore"] .sidebar-search select:focus { border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34, 211, 238, .22); }
html[data-theme="aurore"] .sidebar-search button,
html[data-theme="aurore"] .sidebar button[style*="background"] {
  background: linear-gradient(120deg, #06b6d4, #7c3aed 55%, #ec4899) !important; border-color: transparent !important; color: #fff;
  box-shadow: 0 8px 22px rgba(124, 58, 237, .40);
}
html[data-theme="aurore"] .sidebar [style*="color:#666"],
html[data-theme="aurore"] .sidebar [style*="color: #666"] { color: #a5b4fc !important; }
html[data-theme="aurore"] .sidebar-footer { color: #8b8fb5; border-top: 1px solid rgba(167, 139, 250, .14); }
html[data-theme="aurore"] .sidebar-user { background: rgba(255, 255, 255, .05); color: #c7d2fe; }

/* ── Contenu : cartes de verre ── */
html[data-theme="aurore"] .panel,
html[data-theme="aurore"] .dash-panel,
html[data-theme="aurore"] .profile-block,
html[data-theme="aurore"] .stat-box,
html[data-theme="aurore"] .plan-card,
html[data-theme="aurore"] .team-card,
html[data-theme="aurore"] .kanban-col,
html[data-theme="aurore"] .a-traiter,
html[data-theme="aurore"] .whmcs-kpi,
html[data-theme="aurore"] #kpi-grid .whmcs-kpi:first-child,
html[data-theme="aurore"] #kpi-grid .whmcs-kpi:last-child,
html[data-theme="aurore"] #kpi-grid-services .whmcs-kpi:first-child,
html[data-theme="aurore"] #kpi-grid-services .whmcs-kpi:last-child {
  background: rgba(255, 255, 255, .80);
  border-color: rgba(255, 255, 255, .95);
  box-shadow: var(--ci-ombre);
}
html[data-theme="aurore"] .a-traiter { border-left-color: #8b5cf6; }
html[data-theme="aurore"] .a-traiter.at-vide { border-left-color: #10b981; }
html[data-theme="aurore"] .panel-header,
html[data-theme="aurore"] .dash-panel-hdr,
html[data-theme="aurore"] .profile-block-header,
html[data-theme="aurore"] .panel-footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .38));
  border-color: rgba(124, 58, 237, .10);
}
html[data-theme="aurore"] .page-header h1::after { box-shadow: 0 0 12px rgba(34, 211, 238, .45); }

/* ── Tuiles : un liseré d'aurore au survol, chiffres en dégradé, icônes qui rayonnent ── */
html[data-theme="aurore"] .whmcs-kpi::before {
  content: ''; position: absolute; left: 16px; right: 16px; top: -1px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--ci-jauge); opacity: 0; transition: opacity .2s ease;
}
html[data-theme="aurore"] .whmcs-kpi:hover::before { opacity: 1; }
html[data-theme="aurore"] .whmcs-kpi:hover { background: rgba(255, 255, 255, .95); }
html[data-theme="aurore"] .whmcs-kpi-num {
  background: linear-gradient(100deg, #1e1b4b 0%, #4c1d95 55%, #7c3aed 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="aurore"] .whmcs-kpi-icon.green  { background: linear-gradient(135deg, #059669, #2ef2a0); box-shadow: 0 10px 24px rgba(16, 185, 129, .40); }
html[data-theme="aurore"] .whmcs-kpi-icon.pink   { background: linear-gradient(135deg, #ec4899, #a855f7); box-shadow: 0 10px 24px rgba(236, 72, 153, .38); }
html[data-theme="aurore"] .whmcs-kpi-icon.orange { background: linear-gradient(135deg, #f59e0b, #ec4899); box-shadow: 0 10px 24px rgba(245, 158, 11, .38); }
html[data-theme="aurore"] .whmcs-kpi-icon.teal   { background: linear-gradient(135deg, #0891b2, #22d3ee); box-shadow: 0 10px 24px rgba(34, 211, 238, .40); }
html[data-theme="aurore"] .whmcs-kpi-icon.blue   { background: linear-gradient(135deg, #6366f1, #22d3ee); box-shadow: 0 10px 24px rgba(99, 102, 241, .38); }
html[data-theme="aurore"] .whmcs-kpi-icon.purple { background: linear-gradient(135deg, #7c3aed, #c084fc); box-shadow: 0 10px 24px rgba(124, 58, 237, .40); }
html[data-theme="aurore"] .whmcs-kpi-icon.red    { background: linear-gradient(135deg, #e11d48, #f472b6); box-shadow: 0 10px 24px rgba(225, 29, 72, .36); }

/* ── Boutons : l'action principale glisse du turquoise au rose ── */
html[data-theme="aurore"] .btn-primary,
html[data-theme="aurore"] .btn-primary:hover {
  background: linear-gradient(120deg, #06b6d4 0%, #7c3aed 45%, #ec4899 90%) 0% 50% / 180% 100%;
  box-shadow: 0 8px 22px rgba(124, 58, 237, .32);
  transition: background-position .5s ease, transform .12s ease, box-shadow .2s ease;
}
html[data-theme="aurore"] .btn-primary:hover { background-position: 100% 50%; box-shadow: 0 12px 30px rgba(236, 72, 153, .36); }
html[data-theme="aurore"] .btn-success { background: linear-gradient(120deg, #059669, #10b981 50%, #2ef2a0); box-shadow: 0 8px 20px rgba(16, 185, 129, .30); }
html[data-theme="aurore"] .btn-danger { background: linear-gradient(120deg, #e11d48, #f43f5e); box-shadow: 0 8px 20px rgba(225, 29, 72, .28); }
html[data-theme="aurore"] .btn-secondary { background: rgba(255, 255, 255, .85); color: #1e1b4b; border-color: rgba(124, 58, 237, .22); }
html[data-theme="aurore"] .btn-secondary:hover { background: #fff; color: #6d28d9; border-color: #a78bfa; }

/* ── Tableaux, champs, fenêtres ── */
html[data-theme="aurore"] thead tr,
html[data-theme="aurore"] .whmcs-table th { background: rgba(245, 243, 255, .85); }
html[data-theme="aurore"] thead th,
html[data-theme="aurore"] .whmcs-table th { color: #5b5f86; border-bottom-color: rgba(124, 58, 237, .14); }
html[data-theme="aurore"] tbody tr:hover { background: rgba(124, 58, 237, .05); }
html[data-theme="aurore"] .whmcs-table tr:nth-child(even) td { background: rgba(245, 243, 255, .5); }
html[data-theme="aurore"] .form-input:focus,
html[data-theme="aurore"] .filter-select:focus,
html[data-theme="aurore"] .search-box input:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .18); }
html[data-theme="aurore"] .modal-overlay { background: rgba(7, 11, 31, .60); }
html[data-theme="aurore"] .modal { box-shadow: 0 30px 80px rgba(28, 15, 66, .40); }
html[data-theme="aurore"] .ca-ip-va { background: rgba(124, 58, 237, .08); color: #4c1d95; }
html[data-theme="aurore"] .dash-hdr-note strong { color: #059669; }
html[data-theme="aurore"] #today-tx-total { background: linear-gradient(120deg, #059669, #2ef2a0) !important; box-shadow: 0 4px 12px rgba(16, 185, 129, .35); }
html[data-theme="aurore"] #overdue-count,
html[data-theme="aurore"] #arrets-service-compte { background: linear-gradient(120deg, #e11d48, #ec4899) !important; box-shadow: 0 4px 12px rgba(225, 29, 72, .30); }
html[data-theme="aurore"] #reseller-req-count { background: linear-gradient(120deg, #f59e0b, #ec4899) !important; }
html[data-theme="aurore"] .dash-vide-icone { background: linear-gradient(135deg, #10b981, #22d3ee); box-shadow: 0 0 0 6px rgba(46, 242, 160, .12), 0 10px 24px rgba(16, 185, 129, .35); }

/* ── Bandeau du tableau de bord : un ciel étoilé où ondulent les rideaux d'aurore ── */
html[data-theme="aurore"] #dash-live-clock + .page-header {
  background:
    radial-gradient(12% 175% at 20% 118%, rgba(46, 242, 160, .80), transparent 70%),
    radial-gradient(9% 190% at 33% 112%, rgba(34, 211, 238, .62), transparent 70%),
    radial-gradient(13% 165% at 47% 120%, rgba(46, 242, 160, .55), transparent 70%),
    radial-gradient(11% 185% at 62% 115%, rgba(129, 140, 248, .70), transparent 70%),
    radial-gradient(10% 160% at 77% 118%, rgba(236, 72, 153, .52), transparent 70%),
    radial-gradient(70% 70% at 45% 125%, rgba(46, 242, 160, .30), transparent 70%),
    linear-gradient(180deg, #05081a 0%, #0b1030 55%, #1c0f42 100%);
  background-size: 125% 100%, 125% 100%, 125% 100%, 125% 100%, 125% 100%, 100% 100%, 100% 100%;
  animation: aurore-rideaux 14s ease-in-out infinite alternate;
  box-shadow: 0 24px 60px rgba(28, 15, 66, .38), inset 0 0 0 1px rgba(167, 139, 250, .20);
}
@keyframes aurore-rideaux {
  0%   { background-position: 0% 0%, 100% 0%, 0% 0%, 100% 0%, 0% 0%, 0 0, 0 0; }
  100% { background-position: 100% 0%, 0% 0%, 100% 0%, 0% 0%, 100% 0%, 0 0, 0 0; }
}
html[data-theme="aurore"] #dash-live-clock + .page-header::before {
  opacity: .85; -webkit-mask-image: none; mask-image: none;
  background-image:
    radial-gradient(1.3px 1.3px at 22px 28px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 84px 74px, rgba(255, 255, 255, .85) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 152px 18px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 206px 96px, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 262px 52px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 118px 108px, rgba(199, 210, 254, .9) 50%, transparent 51%);
  background-size: 300px 128px;
  animation: aurore-etoiles 5s ease-in-out infinite alternate;
}
@keyframes aurore-etoiles { from { opacity: .45; } to { opacity: .95; } }
html[data-theme="aurore"] #dash-live-clock + .page-header::after { filter: drop-shadow(0 0 18px rgba(34, 211, 238, .55)) drop-shadow(0 10px 30px rgba(167, 139, 250, .45)); }
html[data-theme="aurore"] #dash-live-clock + .page-header > div::before { color: #5eead4; }
html[data-theme="aurore"] #dash-live-clock + .page-header h1 { text-shadow: 0 0 24px rgba(167, 139, 250, .55); }

/* ── Connexion : nuit d'aurore, carte de verre ── */
html[data-theme="aurore"] body:has(.login-container) {
  background:
    radial-gradient(800px 480px at 80% 10%, rgba(34, 211, 238, .30), transparent 60%),
    radial-gradient(700px 460px at 10% 90%, rgba(46, 242, 160, .25), transparent 60%),
    radial-gradient(600px 420px at 95% 95%, rgba(236, 72, 153, .25), transparent 60%),
    linear-gradient(160deg, #05081a 0%, #0d1333 55%, #1c0f42 100%);
  background-attachment: fixed;
}
html[data-theme="aurore"] .login-container {
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .45), 0 0 60px rgba(124, 58, 237, .25);
}
html[data-theme="aurore"] .login-logo::after {
  background: linear-gradient(90deg, #1e1b4b 0 37.5%, #7c3aed 37.5%, #ec4899 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="aurore"] .login-logo::before { filter: drop-shadow(0 0 10px rgba(34, 211, 238, .45)); }
html[data-theme="aurore"] .btn-login {
  background: linear-gradient(120deg, #06b6d4 0%, #7c3aed 45%, #ec4899 90%) 0% 50% / 180% 100% !important;
  box-shadow: 0 12px 30px rgba(124, 58, 237, .40);
  transition: background-position .5s ease;
}
html[data-theme="aurore"] .btn-login:hover { background-position: 100% 50% !important; }

/* ── Aperçu du thème dans le sélecteur ── */
.theme-choix-aurore .theme-choix-apercu {
  position: relative;
  background:
    radial-gradient(70% 90% at 20% 100%, rgba(46, 242, 160, .9), transparent 60%),
    radial-gradient(60% 90% at 80% 0%, rgba(167, 139, 250, .95), transparent 60%),
    radial-gradient(50% 80% at 100% 100%, rgba(236, 72, 153, .8), transparent 60%),
    #070b1f;
}
.theme-choix-aurore .theme-choix-apercu i { display: none; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="aurore"] body::before,
  html[data-theme="aurore"] .topbar::after,
  html[data-theme="aurore"] #dash-live-clock + .page-header,
  html[data-theme="aurore"] #dash-live-clock + .page-header::before { animation: none; }
}