/* LFSKIN-V 1179 */
/* ^ garde anti-cache : ce numero DOIT egaler le ?v= de head.tpl. Le flow
   qa-wolf 842 compare les deux : un deploy du CSS sans bump du ?v= (fix
   invisible pour les navigateurs, incident 2026-07-10) casse le QA. */
/* ============================================================================
   LaFactory skin - charte graphique (Purple #667eea > #764ba2, Dark #0A0A0F).
   Pilote par data-theme : LIGHT par defaut, DARK sur toggle "Lights?" allure.
   Tout passe par variables -> le switch dark/light fonctionne reellement.
   ============================================================================ */
/* SOMMAIRE
   1  Palette (tokens light/dark)          9  Statuts & semantique (chips)
   2  Base : fond, polices, titres        10  KPI / tuiles dashboard
   3  Chrome : sidebar, topbar            11  Panels dashboard maison (hook)
   4  Menu vertical + icones + toggle     12  Homepage publique .pub-home
   5  Cartes, panels, boutons             13  Checkout / panier / store
   6  Formulaires                         14  Facture (viewinvoice)
   7  Tables + DataTables                 15  LOGIN / auth (handoff) - NE PAS
   8  Composants Bootstrap (passe v6/v7)      PERDRE lors d'un futur sweep
                                          16  Register / erreurs 404 residus */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');

/* ---- 1. PALETTE charte, theme-responsive ---- */
:root {
  /* LIGHT (defaut) */
  --bg: #f6f6fb; --bg-1: #ffffff; --bg-2: #f0f0f7; --bg-3: #e7e7f1;
  --border: rgba(90,80,140,0.16); --border-strong: rgba(90,80,140,0.30);
  --text: #16161f; --text-dim: #45455c; --text-mute: #6c6c86;
  --lf-accent: #5b62d6; --lf-accent-2: #764ba2;
  --accent-grad: linear-gradient(180deg, #667eea, #764ba2);
  --accent-soft: linear-gradient(180deg, rgba(102,126,234,0.14), rgba(118,75,162,0.05));
  --accent-brd: rgba(102,126,234,0.5);
  /* vert HANDOFF (Francis 2026-07-10 : "le vert du handoff est accepte",
     seul le vert allure/bootstrap est banni). Statuts et success uniquement,
     JAMAIS les boutons (les CTA handoff sont accent). Token unique dark/light
     comme dans styles.css du handoff. */
  --good: oklch(0.78 0.2 150);
  --good-soft: oklch(0.4 0.18 150 / 0.2);
  --good-brd: oklch(0.5 0.15 150 / 0.4);
  /* remap variables allure sur la charte */
  --white:#fff;
  --neutral-50:var(--bg-2);--neutral-100:var(--bg-2);--neutral-200:var(--bg-3);--neutral-300:#dcdce8;
  --neutral-400:#b6b6c8;--neutral-500:var(--text-mute);--neutral-600:#55556c;--neutral-700:var(--text-dim);
  --neutral-800:#2a2a38;--neutral-900:var(--text);--neutral-950:var(--text);
  --primary:var(--lf-accent);--primary-lifted:#4d54c4;--primary-accented:var(--lf-accent-2);
  --primary-500:var(--lf-accent);--primary-600:var(--lf-accent);--primary-700:#4d54c4;
  --bg-lifted:var(--bg-1);--bg-accented:var(--bg-2);--bg-muted:var(--bg-2);--bg-inverted:var(--text);
  --border-lifted:var(--border-strong);--border-accented:var(--accent-brd);--border-muted:var(--border);
}
html[data-theme="dark"] {
  /* DARK (charte : Dark #0A0A0F + purple accent) */
  --bg: #0a0a0f; --bg-1: #13131c; --bg-2: #1b1b28; --bg-3: #242433;
  --border: rgba(130,120,200,0.16); --border-strong: rgba(150,140,215,0.30);
  --text: #f5f5fa; --text-dim: #bcbccf; --text-mute: #8a8aa5;
  --lf-accent: #7e8cf2; --lf-accent-2: #9a6fc4;
  --accent-grad: linear-gradient(180deg, #667eea, #764ba2);
  --accent-soft: linear-gradient(180deg, rgba(102,126,234,0.22), rgba(118,75,162,0.08));
  --accent-brd: rgba(126,140,242,0.55);
}

/* ---- 2. Base : fond de page + polices (via variables -> switch OK) ---- */
html, body, body.allure-body, body.primary-bg-color { background: var(--bg) !important; color: var(--text-dim); }
body, body.allure-body { font-family: 'Manrope', system-ui, -apple-system, sans-serif; font-feature-settings: "ss01","cv11"; -webkit-font-smoothing: antialiased; }
h1,h2,h3,.allure-body h1,.allure-body h2,.allure-body h3,.page-header h1,.page-title,.card-title { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
.mono, code, kbd, pre { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---- 3. Chrome : sidebar verticale repeinte + topbar ---- */
.sidebar, .allure-sidebar, #sidebar, aside.sidebar {
  background: linear-gradient(180deg, var(--bg-1), var(--bg)) !important;
  border-right: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
/* item de menu actif -> pastille violette + glow */
.sidebar .active > a, .sidebar li.active > a,
.nav-sidebar .active > a, .menu-item.active {
  color: var(--text) !important;
  background: var(--accent-soft) !important;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.02), 0 8px 24px -16px var(--lf-accent);
  border-radius: 10px;
}
.sidebar a:hover, .nav-sidebar a:hover { color: var(--text) !important; }

/* topbar / header */
.topbar, .header, #header, .navbar-top, .allure-header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
/* texte + icones topbar : allure les code en blanc (invisibles sur fond clair,
   date et icones fantomes constatees en mode light 2026-07-10) */
.allure-header .allure-date-time,
.allure-header .allure-menu-toggle i, .allure-header .allure-mobile-menu i,
.allure-header .allure-header-links a, .allure-header .allure-header-links i,
.allure-header a.btn {
  color: var(--text-dim) !important;
}
.allure-header .allure-header-links a:hover, .allure-header a.btn:hover { color: var(--text) !important; }

/* ---- 4. MENU VERTICAL (allure-nav) -> forme mockup + icones + fond +
   toggle theme "Lights?" + bouton compte header ---- */
.allure-nav { padding: 8px 0; }
.allure-nav .allure-menu, #mobile-nav .allure-menu { list-style: none; margin: 0; padding: 0 12px; display: flex; flex-direction: column; gap: 3px; }
.allure-nav .allure-menu > li > a, #mobile-nav .allure-menu > li > a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text-dim) !important; font-size: 14px; font-weight: 500; border: 1px solid transparent; transition: all .18s ease; text-decoration: none; }
.allure-nav .allure-menu > li > a:hover { background: var(--bg-2) !important; color: var(--text) !important; }
.allure-nav .allure-menu > li.selected > a, .allure-nav .allure-menu > li.active > a, .allure-nav .allure-menu > li.current > a { background: var(--accent-soft) !important; border-color: var(--border-strong) !important; color: var(--text) !important; box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.03), 0 8px 24px -14px var(--lf-accent); }
.allure-nav .allure-menu > li > a::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; display: inline-block; background: currentColor; opacity: .78; -webkit-mask: no-repeat center / 18px 18px; mask: no-repeat center / 18px 18px; }
.allure-nav .allure-menu > li.selected > a::before, .allure-nav .allure-menu > li.active > a::before { opacity: 1; background: var(--lf-accent); }
.allure-nav .allure-menu > li > a > i { display: none !important; }
.allure-nav .allure-menu > li.has-children > a::after { content: ""; width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; background: currentColor; opacity: .5; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018l6-6-6-6%22/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018l6-6-6-6%22/%3E%3C/svg%3E") no-repeat center / contain; }
.allure-nav h2, .allure-menu-title { font-size: 10px !important; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mute) !important; padding: 14px 22px 6px; margin: 0; font-weight: 600; }
.allure-nav .allure-menu > li > a .badge { margin-left: auto; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: rgba(102,126,234,0.22) !important; color: var(--text) !important; border: 1px solid var(--border-strong); }

#Primary_Navbar-Home > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h7v7H3z%22/%3E%3Cpath%20d%3D%22M14%203h7v5h-7z%22/%3E%3Cpath%20d%3D%22M14%2012h7v9h-7z%22/%3E%3Cpath%20d%3D%22M3%2014h7v7H3z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h7v7H3z%22/%3E%3Cpath%20d%3D%22M14%203h7v5h-7z%22/%3E%3Cpath%20d%3D%22M14%2012h7v9h-7z%22/%3E%3Cpath%20d%3D%22M3%2014h7v7H3z%22/%3E%3C/svg%3E"); }
#Primary_Navbar-Store > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3%207l3-4h12l3%204%22/%3E%3Cpath%20d%3D%22M8%2011h8%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3%207l3-4h12l3%204%22/%3E%3Cpath%20d%3D%22M8%2011h8%22/%3E%3C/svg%3E"); }
#Primary_Navbar-Announcements > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%208a6%206%200%200112%200c0%207%203%207%203%209H3c0-2%203-2%203-9z%22/%3E%3Cpath%20d%3D%22M10%2021a2%202%200%20004%200%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%208a6%206%200%200112%200c0%207%203%207%203%209H3c0-2%203-2%203-9z%22/%3E%3Cpath%20d%3D%22M10%2021a2%202%200%20004%200%22/%3E%3C/svg%3E"); }
#Primary_Navbar-Knowledgebase > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205a2%202%200%20012-2h13v16H6a2%202%200%2000-2%202z%22/%3E%3Cpath%20d%3D%22M4%2019a2%202%200%20012-2h13%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205a2%202%200%20012-2h13v16H6a2%202%200%2000-2%202z%22/%3E%3Cpath%20d%3D%22M4%2019a2%202%200%20012-2h13%22/%3E%3C/svg%3E"); }
#Primary_Navbar-Network_Status > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h4l3%208%204-16%203%208h4%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h4l3%208%204-16%203%208h4%22/%3E%3C/svg%3E"); }
#Primary_Navbar-Affiliates > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.2%22/%3E%3Cpath%20d%3D%22M2.5%2020a6.5%206.5%200%200113%200%22/%3E%3Cpath%20d%3D%22M16%204.5a4%204%200%20010%207.5%22/%3E%3Cpath%20d%3D%22M22%2020a6.5%206.5%200%2000-5-6.3%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.2%22/%3E%3Cpath%20d%3D%22M2.5%2020a6.5%206.5%200%200113%200%22/%3E%3Cpath%20d%3D%22M16%204.5a4%204%200%20010%207.5%22/%3E%3Cpath%20d%3D%22M22%2020a6.5%206.5%200%2000-5-6.3%22/%3E%3C/svg%3E"); }
#Primary_Navbar-Contact_Us > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3%207l9%207%209-7%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3%207l9%207%209-7%22/%3E%3C/svg%3E"); }
#Primary_Navbar-Services > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%227%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%223%22%20y%3D%2213%22%20width%3D%2218%22%20height%3D%227%22%20rx%3D%221.5%22/%3E%3Cpath%20d%3D%22M7%207.5h.01M7%2016.5h.01%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%227%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%223%22%20y%3D%2213%22%20width%3D%2218%22%20height%3D%227%22%20rx%3D%221.5%22/%3E%3Cpath%20d%3D%22M7%207.5h.01M7%2016.5h.01%22/%3E%3C/svg%3E"); }
#Primary_Navbar-Domains > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M3%2012h18%22/%3E%3Cpath%20d%3D%22M12%203a14%2014%200%20010%2018%22/%3E%3Cpath%20d%3D%22M12%203a14%2014%200%20000%2018%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M3%2012h18%22/%3E%3Cpath%20d%3D%22M12%203a14%2014%200%20010%2018%22/%3E%3Cpath%20d%3D%22M12%203a14%2014%200%20000%2018%22/%3E%3C/svg%3E"); }
#Primary_Navbar-Billing > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M2%2010h20M6%2015h4%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M2%2010h20M6%2015h4%22/%3E%3C/svg%3E"); }
#Primary_Navbar-Support > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a8%208%200%2001-12.5%206.5L3%2020l1.5-5.5A8%208%200%201121%2012z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a8%208%200%2001-12.5%206.5L3%2020l1.5-5.5A8%208%200%201121%2012z%22/%3E%3C/svg%3E"); }
#Primary_Navbar-Open_Ticket > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209a2%202%200%20002-2V5h14v2a2%202%200%20002%202v6a2%202%200%2000-2%202v2H5v-2a2%202%200%2000-2-2z%22/%3E%3Cpath%20d%3D%22M9%205v14%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209a2%202%200%20002-2V5h14v2a2%202%200%20002%202v6a2%202%200%2000-2%202v2H5v-2a2%202%200%2000-2-2z%22/%3E%3Cpath%20d%3D%22M9%205v14%22/%3E%3C/svg%3E"); }
/* ---- 17b. fix overlap icone/label : forcer flex + reset span ---- */
.allure-nav .allure-menu > li > a, #mobile-nav .allure-menu > li > a {
  display: flex !important; align-items: center !important; gap: 12px !important;
  text-indent: 0 !important; padding: 10px 12px !important;
}
.allure-nav .allure-menu > li > a > span, #mobile-nav .allure-menu > li > a > span {
  position: static !important; padding: 0 !important; margin: 0 !important; left: auto !important;
}
.allure-nav .allure-menu > li > a::before { position: static !important; }
nav.allure-nav, .allure-nav {
  background: var(--bg) !important;
  border-right: 1px solid var(--border) !important;
}
.allure-container, .allure-main, .allure-content { background: var(--bg) !important; }
.allure-nav h2.spacer,
.allure-menu h2.spacer,
nav.allure-nav .spacer {
  font-size: 10px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute) !important;
  font-weight: 700 !important;
  margin: 16px 20px 6px !important;
  border: 0 !important;
  background: none !important;
}
.allure-lightsout { padding: 2px 20px 14px !important; }
.allure-lightsout label {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  cursor: pointer;
}
.allure-lightsout .bootstrap-switch { display: none !important; }
.allure-lightsout input[name="allure-lightsout"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none;
}
.allure-lightsout .lf-tt {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  transition: background 0.25s ease, border-color 0.25s ease;
  flex: 0 0 auto;
}
.allure-lightsout .lf-tt::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff center / 12px 12px no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23764ba2'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s ease;
}
.allure-lightsout input[name="allure-lightsout"]:checked + .lf-tt {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: transparent;
}
.allure-lightsout input[name="allure-lightsout"]:checked + .lf-tt::after {
  transform: translateX(22px);
}
#Secondary_Navbar-Account > .btn.dropdown-toggle,
#Secondary_Navbar-Account .btn.dropdown-toggle {
  background: var(--accent-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px -8px var(--lf-accent) !important;
}
#Secondary_Navbar-Account .allure-anim-1,
#Secondary_Navbar-Account .allure-anim-2,
#Secondary_Navbar-Account [class*="allure-anim"] {
  background: var(--lf-accent) !important;
}

/* ---- 5. Cartes / panels / boutons ---- */
.card, .panel, .well, .tile, .widget {
  background: linear-gradient(180deg, var(--bg-1), var(--bg)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px;
  color: var(--text-dim);
}
.card:hover, .panel:hover {
  border-color: var(--accent-brd) !important;
  box-shadow: 0 20px 60px -30px var(--lf-accent), 0 0 0 1px rgba(102,126,234,0.25);
}

/* ---- 5. Boutons pill + glow violet ---- */
.btn-primary, .btn.btn-primary, button.primary {
  background: var(--accent-grad) !important;
  border: 1px solid var(--accent-brd) !important;
  color: #fff !important;
  border-radius: 999px;
  box-shadow: 0 8px 26px -10px var(--lf-accent), inset 0 1px 0 oklch(1 0 0 / 0.18);
}
.btn-primary:hover { box-shadow: 0 12px 30px -8px var(--lf-accent), inset 0 1px 0 oklch(1 0 0 / 0.18); }
/* Boutons SECONDAIRES : surface liftee (bg-3) + bordure forte -> visibles sur
   carte blanche (light) comme sombre (dark). Fix 2026-07-25 : bg-2 se
   confondait avec la carte (bg-1) et la bordure 0.16 disparaissait -> les
   boutons "Afficher les details / Ask a Question / My Invoices / Nouveau
   contact / Transferer / Precedent-Suivant" se lisaient comme du texte. */
.btn-default, .btn.btn-secondary, .btn-light, .btn.btn-light {
  background: var(--bg-3) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  border-radius: 999px;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.05);
}
.btn-default:hover, .btn.btn-secondary:hover, .btn-light:hover, .btn.btn-light:hover {
  background: var(--bg-2) !important;
  border-color: var(--accent-brd) !important;
  color: var(--lf-accent) !important;
}
a, .link { color: var(--lf-accent); }
/* TOUS les .btn-success -> charte purple, aucun vert (Francis 2026-07-10 :
   "tout ce qui est vert doit disparaitre"). Continue, Checkout, Pay Now,
   Update : meme CTA violet. */
.btn-success, .btn.btn-success, .btn-success.btn-checkout {
  background: var(--accent-grad) !important;
  border: 1px solid var(--accent-brd) !important;
  color: #fff !important;
  border-radius: 999px;
  box-shadow: 0 8px 26px -10px var(--lf-accent), inset 0 1px 0 oklch(1 0 0 / 0.18);
}
.panel-footer, .panel > .panel-footer, .card-footer, .well-footer {
  background: var(--bg-1) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
}
.panel-body, .panel-heading { background: transparent !important; color: var(--text-dim); }
.panel-heading { border-bottom: 1px solid var(--border) !important; }
/* KPI tiles : battre .client-home-panels .highlight.bg-color-X */
.client-home-panels .highlight.bg-color-blue,
.client-home-panels .highlight.bg-color-green,
.client-home-panels .highlight.bg-color-gold,
.client-home-panels .highlight.bg-color-red,
.highlight.bg-color-blue, .highlight.bg-color-green,
.highlight.bg-color-gold, .highlight.bg-color-red {
  background: linear-gradient(180deg, var(--bg-1), var(--bg)) !important;
  color: var(--text) !important;
}
.client-home-panels .highlight * { color: var(--text) !important; }

/* Titres de panels / sections : forcer texte clair (allure hardcode du hex sombre) */
.panel-title, .panel-heading, .panel-heading > *,
.panel-title a, .panel-heading a,
h1, h2, h3, h4, h5,
.card h3, .well h3, .page-header, .page-header h1 {
  color: var(--text) !important;
}
.panel-title .fa, .panel-heading .fa, .panel-title i, .panel-heading i { color: var(--lf-accent) !important; }

/* Secondary sidebar (Your Info/Contacts/Shortcuts) : surfaces sombres homogenes */
#secondary-sidebar .panel, .secondary-sidebar .panel, .sidebar-widget, .client-sidebar .panel {
  background: linear-gradient(180deg, var(--bg-1), var(--bg)) !important;
  border: 1px solid var(--border) !important;
}

/* ---- 6. Formulaires ---- */
/* 9. coches iCheck : sprite bleu bootstrap -> teinte accent violette */
.iradio_square-blue, .icheckbox_square-blue { filter: hue-rotate(30deg) saturate(0.85); }
/* 10. saisie lisible partout */
.form-control, input.form-control, select.form-control, textarea.form-control {
  color: var(--text) !important;
  background-color: var(--bg-1) !important;
  border-color: var(--border) !important;
}
.form-control::placeholder { color: var(--text-mute) !important; }
#stripeElements .form-group, .StripeElement { background: var(--bg-1) !important; }
/* 11. marqueur champs requis (etoile posee par lafactory_checkout_ux.php).
   ROUGE convention (--bad handoff) : l'accent violet se camouflait dans une
   UI violette, et les etoiles des libelles carte wrappaient a la ligne
   (etoile orpheline sous "Expiry Date") - Francis 2026-07-10. */
.lf-req-wrap { position: relative; }
.lf-req-star {
  position: absolute;
  top: 7px;
  right: 12px;
  color: oklch(0.7 0.22 25);
  font-weight: 700;
  pointer-events: none;
}
.lf-req-star-inline { position: static; margin-left: 2px; }
#stripeElements label, #stripeElements .control-label { white-space: nowrap; }
.form-control, input, select, textarea {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 12px;
}
.form-control:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--lf-accent) !important;
  box-shadow: 0 0 0 3px rgba(102,126,234,0.18) !important;
}

/* ---- 7. Tables ---- */
.table, table.list, .tbl {
  background: var(--bg-1) !important;
  color: var(--text-dim);
  border-radius: 18px; overflow: hidden;
}
.table thead th, table.list th {
  background: var(--bg-2) !important;
  color: var(--text-mute) !important;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px;
  border-bottom: 1px solid var(--border) !important;
}
.table td, .table th { border-color: var(--border) !important; }
.table tbody tr:hover td { background: var(--bg-2) !important; }

/* ---- 8. Composants Bootstrap recurrents (passe exhaustive v6 + v7) ---- */
/* Footer externe */
.allure-footer {
  background: linear-gradient(180deg, var(--bg-1), var(--bg)) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-mute) !important;
}
.allure-footer a { color: var(--text-dim) !important; }
.allure-footer a:hover { color: var(--lf-accent) !important; }

/* Alerts */
.alert { border-radius: 14px !important; border: 1px solid var(--border) !important; background: var(--bg-1) !important; color: var(--text) !important; }
/* success = vert HANDOFF --good (allure/bootstrap banni) */
.alert-success { background: var(--good-soft) !important; border-color: var(--good-brd) !important; color: var(--good) !important; }
.alert-success i { color: var(--good) !important; }
/* info = accent (coherence charte, Francis 2026-07-10) */
.alert-info    { background: var(--accent-soft) !important; border-color: var(--accent-brd) !important; color: var(--text) !important; }
.alert-info i, .alert-info a { color: var(--lf-accent) !important; }
.alert-warning { background: oklch(0.6 0.15 80 / 0.14) !important; border-color: oklch(0.6 0.15 80 / 0.4) !important; color: oklch(0.86 0.16 80) !important; }
.alert-danger  { background: oklch(0.5 0.15 25 / 0.14) !important; border-color: oklch(0.5 0.15 25 / 0.4) !important; color: oklch(0.8 0.2 25) !important; }

/* Onglets */
.nav-tabs, .nav-pills { border-bottom: 1px solid var(--border) !important; }
.nav-tabs > li > a, .nav-pills > li > a { color: var(--text-mute) !important; border-radius: 10px 10px 0 0 !important; border: 0 !important; background: transparent !important; }
.nav-tabs > li.active > a, .nav-tabs > li > a:hover, .nav-pills > li.active > a {
  color: var(--text) !important; background: var(--bg-2) !important;
  border: 1px solid var(--border) !important; border-bottom-color: transparent !important;
}
.nav-pills > li.active > a { background: var(--accent-grad) !important; border-radius: 999px !important; }
.tab-content { background: transparent !important; color: var(--text-dim); }

/* List groups */
.list-group, .list-group-item { background: var(--bg-1) !important; border-color: var(--border) !important; color: var(--text-dim) !important; }
.list-group-item.active { background: var(--accent-soft) !important; border-color: var(--accent-brd) !important; color: var(--text) !important; }

/* Pagination (bordure forte : les liens Precedent/Suivant se confondaient
   avec la carte, fix 2026-07-25) */
.pagination > li > a, .pagination > li > span { background: var(--bg-3) !important; border-color: var(--border-strong) !important; color: var(--text) !important; }
.pagination > li.active > a, .pagination > li.active > span { background: var(--accent-grad) !important; border-color: var(--accent-brd) !important; color: #fff !important; }

/* Modales */
.modal-content { background: linear-gradient(180deg, var(--bg-1), var(--bg)) !important; border: 1px solid var(--border) !important; border-radius: 18px !important; color: var(--text-dim) !important; }
.modal-header, .modal-footer { border-color: var(--border) !important; background: transparent !important; }
.modal-backdrop { background: var(--bg) !important; }

/* Dropdowns */
.dropdown-menu { background: var(--bg-1) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; }
.dropdown-menu > li > a { color: var(--text-dim) !important; }
.dropdown-menu > li > a:hover { background: var(--bg-2) !important; color: var(--text) !important; }
.dropdown-menu .divider { background: var(--border) !important; }

/* Breadcrumb */
.breadcrumb { background: var(--bg-1) !important; border: 1px solid var(--border) !important; border-radius: 999px !important; }
.breadcrumb > .active, .breadcrumb a { color: var(--text-dim) !important; }

/* Progress */
.progress { background: var(--bg-2) !important; border-radius: 999px !important; }
.progress-bar { background: linear-gradient(90deg, var(--lf-accent), var(--lf-accent-2)) !important; }

/* Definition lists / labels */
dl dt, .dl-horizontal dt { color: var(--text-mute) !important; }
dl dd, .dl-horizontal dd { color: var(--text) !important; }

/* Input group addons */
.input-group-addon, .input-group-text { background: var(--bg-2) !important; border-color: var(--border) !important; color: var(--text-dim) !important; }

/* Order form / panier / cartes produits & plans */
#order-standard_cart, .order-summary, .cart-summary, .checkout,
.product, .package, .pricing, .plan, .cartbox {
  background: linear-gradient(180deg, var(--bg-1), var(--bg)) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
  border-radius: 16px;
}
#order-standard_cart .form-control { background: var(--bg) !important; }

/* Landing-page upsell : forcer les blancs hardcodes en sombre */
.allure-content .landing-page, .allure-content .landing-page .hero,
.allure-content .landing-page.bg-white, .allure-content .landing-page .features,
.allure-content .landing-page .plans .plan {
  background: var(--bg) !important; color: var(--text-dim) !important;
}

/* Datatables / listes generiques */
.dataTables_wrapper, .table-container { color: var(--text-dim); }
table.dataTable thead th { background: var(--bg-2) !important; color: var(--text-mute) !important; }

/* Secondary sidebar panels : degager tout liseret clair d'entete */
.panel > .panel-heading { background: var(--bg-1) !important; }
/* 14. editeur markdown (contact / ticket) -> palette (Francis 2026-07-10,
   sweep 844). theme.min.css cible avec combinateur enfant :
   [data-theme=dark] .md-editor>.btn-toolbar{#424242!important} (specificite
   0,3,0) et .btn-default (0,4,0). On EGALE la meme forme pour gagner sur le
   tie (lfneon charge apres theme.min.css). */
[data-theme="dark"] .md-editor > .btn-toolbar, .md-editor > .btn-toolbar,
[data-theme="dark"] .md-editor > .md-header, .md-editor > .md-header,
[data-theme="dark"] .md-editor > .md-footer, .md-editor > .md-footer {
  background-color: var(--bg-2) !important;
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
}
[data-theme="dark"] .md-editor > .btn-toolbar .btn-default,
.md-editor > .btn-toolbar .btn-default,
[data-theme="dark"] .md-editor > .btn-toolbar .btn,
.md-editor > .btn-toolbar .btn {
  background-color: var(--bg-1) !important;
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
}
[data-theme="dark"] .md-editor > textarea, .md-editor > textarea {
  background-color: var(--bg-1) !important; color: var(--text) !important;
}
/* ---- 15. Correctifs v7 : conteneurs de contenu blancs recurrents ---- */
/* wrapper de contenu principal (order, contact, beaucoup de pages) */
.allure-padded-content {
  background: linear-gradient(180deg, var(--bg-1), var(--bg)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  color: var(--text-dim) !important;
}
/* DataTables (factures, services, domaines...) */
.dataTables_wrapper {
  background: linear-gradient(180deg, var(--bg-1), var(--bg)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important; padding: 6px !important;
}
.dataTables_info, .dataTables_paginate, .dataTables_length, .dataTables_filter { background: transparent !important; color: var(--text-mute) !important; }
.dataTables_empty { background: transparent !important; color: var(--text-mute) !important; }
table.dataTable, table.dataTable tbody, table.dataTable tr, table.dataTable td { background: transparent !important; color: var(--text-dim) !important; border-color: var(--border) !important; }
table.dataTable tbody tr:hover td { background: var(--bg-2) !important; }

/* deco order flow / markdown editor */
.img-container, .domain-promo-box { background: var(--bg-2) !important; border: 1px solid var(--border) !important; border-radius: 12px; }
.row.tld-row, .tld-row { background: transparent !important; border-color: var(--border) !important; }
.md-header, .md-header.btn-toolbar, .md-editor, .md-editor > textarea, .md-preview {
  background: var(--bg-2) !important; border-color: var(--border) !important; color: var(--text) !important;
}
/* radios/checkboxes labels order flow lisibles */
.allure-padded-content label, .allure-padded-content p, .allure-padded-content .radio, .allure-padded-content li { color: var(--text-dim) !important; }
/* 13. bouton retour-haut : gris neutre allure rgb(117,117,117) -> palette */
.allure-back-top {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--lf-accent) !important;
  border-radius: 12px;
}
.allure-back-top:hover { border-color: var(--accent-brd) !important; color: var(--text) !important; }

/* ---- 9. Statuts & semantique : chips palette handoff ----
   (vert handoff --good accepte, vert allure/bootstrap banni - Francis
   2026-07-10 ; audit 2026-07-12 : Active/Pending/Unpaid ajoutes) ---- */
.text-success,
.invoice-status .paid, span.paid,
[data-theme="dark"] .invoice-status .paid { color: var(--good) !important; }
/* le domaine dans le panier n'est PAS un statut : accent (allure le rendait
   lime ; le handoff l'affiche en texte neutre) */
.item-domain { color: var(--lf-accent) !important; }
/* toggle : controle, pas un statut -> reste accent (le handoff n'a pas de
   controles verts, seulement des pastilles/chips de statut) */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch-handle-on.bootstrap-switch-success {
  background: var(--accent-grad) !important;
  color: #fff !important;
}
.label-success, .badge-success, .label.label-success, .status-paid {
  background: var(--good-soft) !important;
  color: var(--good) !important;
  border: 1px solid var(--good-brd) !important;
}
.label, .badge, .status {
  border-radius: 999px; font-weight: 600;
}
.label-warning, .badge-warning { background: oklch(0.6 0.15 80 / 0.2) !important; color: oklch(0.82 0.18 80) !important; }
.label-danger,  .badge-danger  { background: oklch(0.5 0.15 25 / 0.2) !important; color: oklch(0.7 0.22 25) !important; }
/* labels de statut natifs restants (audit handoff 2026-07-12) : Active restait
   en lime allure #94bd31, Pending/Unpaid en rouge material #f44336 (DataTables
   services/domains/invoices). Semantique handoff : actif = good, attente =
   violet doux, impaye/suspendu/expire = ambre doux, perdu = rouge doux. */
.label.status.status-active {
  background: var(--good-soft) !important;
  color: var(--good) !important;
  border: 1px solid var(--good-brd) !important;
}
.label.status.status-pending, .label.status.status-pendingtransfer,
.label.status.status-pendingregistration {
  background: oklch(0.55 0.20 305 / 0.16) !important;
  color: oklch(0.80 0.16 310) !important;
  border: 1px solid oklch(0.55 0.20 305 / 0.4) !important;
}
.label.status.status-unpaid, .label.status.status-suspended,
.label.status.status-expired, .label.status.status-overdue,
.label.status.status-grace, .label.status.status-redemption {
  background: oklch(0.75 0.15 75 / 0.16) !important;
  color: oklch(0.83 0.14 80) !important;
  border: 1px solid oklch(0.75 0.15 75 / 0.4) !important;
}
.label.status.status-terminated, .label.status.status-cancelled,
.label.status.status-fraud, .label.status.status-collections {
  background: oklch(0.50 0.19 25 / 0.16) !important;
  color: oklch(0.75 0.17 25) !important;
  border: 1px solid oklch(0.50 0.19 25 / 0.4) !important;
}

/* ---- 10. KPI home tiles + tuiles dashboard ---- */
.highlight, .client-home-panels .highlight {
  background: linear-gradient(180deg, var(--bg-1), var(--bg)) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 16px;
  position: relative; overflow: hidden;
}
.highlight::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--lf-accent); box-shadow: 0 0 14px var(--lf-accent); }
/* Tuiles KPI : accent par defaut ; le strip GREEN reprend le vert handoff
   --good (statut positif, comme .status.ok du handoff). */
.highlight.bg-color-blue::after,
.highlight.bg-color-gold::after, .highlight.bg-color-red::after { background: var(--lf-accent); box-shadow: 0 0 14px var(--lf-accent); }
.highlight.bg-color-green::after { background: var(--good); box-shadow: 0 0 14px var(--good); }
.highlight .number, .highlight h3, .highlight .stat { color: var(--text) !important; font-family: 'DM Serif Display', serif; }
.highlight i, .highlight .fa, .highlight svg { color: var(--lf-accent) !important; opacity: 0.85; }
/* la couleur vive est sur .tiles .tile a (et variantes par tuile) */
.tiles .tile a,
.tiles .tile.services a, .tiles .tile.domains a, .tiles .tile.quotes a,
.tiles .tile.affiliates a, .tiles .tile.tickets a, .tiles .tile.invoices a {
  background: linear-gradient(180deg, var(--bg-1), var(--bg)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  color: var(--text) !important;
}
.tiles .tile a .stat  { font-family: 'DM Serif Display', serif !important; color: var(--text) !important; }
.tiles .tile a .title { color: var(--text-mute) !important; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; }
/* icones de tuile : TOUTES en accent (monochrome handoff), plus de bleu/or/rouge.
   Couvre .tiles .tile (help/account tiles) ET .tile bare (home dashboard). */
.tiles .tile a .icon,
.tiles .tile.services a .icon, .tiles .tile.domains a .icon,
.tiles .tile.affiliates a .icon, .tiles .tile.quotes a .icon,
.tiles .tile.tickets a .icon, .tiles .tile.invoices a .icon,
.tile .icon, .tile .icon i,
.tile.services .icon, .tile.services .icon i,
.tile.domains .icon, .tile.domains .icon i,
.tile.tickets .icon, .tile.tickets .icon i,
.tile.invoices .icon, .tile.invoices .icon i {
  color: var(--lf-accent) !important; opacity: 0.9;
}
.tiles .tile a:hover { border-color: var(--accent-brd) !important; box-shadow: 0 20px 60px -30px var(--lf-accent); }
.tiles .tile a:hover .title, .tiles .tile a:hover .icon { color: var(--text) !important; }

/* bandeaux blancs hardcodes (article header greeting, hero, bg-white) */
.allure-article-header { background: transparent !important; border-bottom: 1px solid var(--border); }
.landing-page.bg-white, .landing-page .hero, .bg-white {
  background: var(--bg) !important;
}
.allure-article-header h1, .allure-article-header .page-title { color: var(--text) !important; }

/* ---- 11. Panels dashboard maison (hook lafactory_client_home) ---- */
.lf-quick-actions .btn { display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.lf-quick-actions .btn:last-child { margin-bottom:0; }
.lf-next-due { text-align:center; }
.lf-due-amount { font-family:'DM Serif Display',Georgia,serif; font-size:30px; color:var(--text); line-height:1.1; }
.lf-due-date { color:var(--text-mute); font-size:12px; margin:4px 0 10px; }
.lf-due-more { color:var(--text-mute); font-size:11px; margin-bottom:8px; }
.lf-last-login { color:var(--text-dim); font-size:13px; }
.lf-last-login .lf-login-ip { color:var(--text-mute); font-size:12px; margin-top:2px; }
.lf-last-login .lf-login-hint { color:var(--text-mute); font-size:11px; margin-top:8px; }
.lf-last-login a, .lf-due-date a { color:var(--lf-accent) !important; }

/* ---- 13. Protection homepage .pub-home (v5) : forcer dark-neon coherent + ----
   ---- annuler la fuite du skin global (titres/cartes) dans ce composant scope -- */
.pub-home {
  --bg: var(--bg); --bg-1: var(--bg-1);
  --bg-2: var(--bg-2); --bg-3: var(--bg-3);
  --border: var(--border); --border-strong: var(--border-strong);
  --text: var(--text); --text-dim: var(--text-dim); --text-mute: var(--text-mute);
  --accent: var(--lf-accent); --accent-2: var(--lf-accent-2); --accent-deep: var(--lf-accent);
  background: var(--bg) !important;
}
html[data-theme="dark"] .pub-home .ph-halo, .pub-home .ph-halo { opacity: 0.45; mix-blend-mode: screen; }
/* titres homepage : reprendre le token --text du composant (annule le global clair force) */
.pub-home h1, .pub-home h2, .pub-home h3,
.pub-home .pub-hero-title, .pub-home .pub-section-head h2, .pub-home .pub-tile h3 {
  color: var(--text) !important;
}
.pub-home .pub-hero-title em { color: var(--accent) !important; }
.pub-home .pub-section-head p, .pub-home .pub-hero-lead { color: var(--text-dim) !important; }
/* cartes/tuiles homepage : reprendre le style scope (annule .card global) */
.pub-home .card, .pub-home .pub-tile, .pub-home .domain-search-wrap {
  background: linear-gradient(180deg, var(--bg-1), var(--bg)) !important;
  border: 1px solid var(--border) !important;
}
.pub-home .ext-pill { background: var(--bg-2) !important; border: 1px solid var(--border) !important; }
.pub-home .ext-tld { color: var(--accent) !important; }

/* ---- 13. Checkout / panier / store (orderform allure_cart) ---- */
/* bloc produit du recap (allure : gris neutre plat) -> surface palette */
.summary-container, #producttotal {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  color: var(--text-dim) !important;
}
/* boutons "success" (Continue, Checkout, Pay Now) : vert bootstrap -> charte */
.btn-success, .btn.btn-success, button.btn-success {
  background: var(--accent-grad) !important;
  border: 1px solid var(--accent-brd) !important;
  color: #fff !important;
  border-radius: 999px;
  box-shadow: 0 8px 26px -10px var(--lf-accent), inset 0 1px 0 oklch(1 0 0 / 0.18);
}
.btn-success:hover { box-shadow: 0 12px 30px -8px var(--lf-accent), inset 0 1px 0 oklch(1 0 0 / 0.18); }
/* boutons "info" (Already Registered?) : bleu bootstrap -> secondaire palette */
.btn-info, .btn.btn-info {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  border-radius: 999px;
}
/* Empty Cart : lien discret, pas un bloc gris */
#btnEmptyCart, .btn.btn-link {
  background: transparent !important;
  color: var(--text-mute) !important;
  border: 0 !important;
}
/* 6. panier : bloc produits */
.view-cart-items-header {
  background: var(--bg-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0;
}
.view-cart-items .item, .view-cart-items {
  background: var(--bg-1) !important;
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
}
/* 7. actions discretes du panier */
#btnEmptyCart, #continueShopping, .btn-continue-shopping {
  color: var(--text-dim) !important;
}
#btnEmptyCart:hover, #continueShopping:hover, .btn-continue-shopping:hover {
  color: var(--text) !important;
  text-decoration: underline;
}
/* 8. titres de section checkout (personal info, billing, domain registrant...)
   couvre .primary-bg-color ET tout header .sub-heading (grise par theme) */
.sub-heading .primary-bg-color, span.primary-bg-color,
#order-standard_cart .sub-heading, #order-standard_cart .sub-heading span,
[data-theme="dark"] #order-standard_cart .sub-heading,
[data-theme="dark"] #order-standard_cart .sub-heading span {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 17px;
  letter-spacing: 0.01em;
}
/* 15. label/badge info (cyan bootstrap #2ca1c3) + account summary du checkout
   (#order-standard_cart .account.active #424242) -> palette (sweep 842) */
.label-info, .badge-info, [data-theme="dark"] .label-info, [data-theme="dark"] .badge-info {
  background: var(--accent-soft) !important;
  color: var(--lf-accent) !important;
  border: 1px solid var(--accent-brd) !important;
}
#order-standard_cart .account-select-container div.account,
#order-standard_cart .account-select-container div.account.active,
[data-theme="dark"] #order-standard_cart .account-select-container div.account,
[data-theme="dark"] #order-standard_cart .account-select-container div.account.active {
  background-color: var(--bg-2) !important;
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
}
/* ---- 16. Correctif v8 : domain checker (vert allure) -> surface sombre ---- */
.domain-checker-bg, .domain-checker-container, .domain-checker, .domain-checker-advanced {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
}
.domain-checker-bg *, .domain-checker-container * { color: var(--text); }
/* pastilles categories TLD lisibles */
.tld-categories .btn, .domain-lookup-categories .btn { background: var(--bg-2) !important; border: 1px solid var(--border) !important; color: var(--text-dim) !important; }
/* ---- 20. STORE (orderform allure_cart) : cartes produit -> grille de plans mockup ---- */
#order-standard_cart .products .row { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; }
#order-standard_cart .products .col-md-6 { flex: 1 1 300px; max-width: none; width: auto; padding: 0; }
@media (min-width: 992px){ #order-standard_cart .products .col-md-6 { flex-basis: calc(33.333% - 12px); } }
#order-standard_cart .product {
  position: relative; background: linear-gradient(180deg, var(--bg-1), var(--bg)) !important;
  border: 1px solid var(--border) !important; border-radius: 18px !important;
  padding: 26px 24px !important; height: 100%; transition: border-color .2s, box-shadow .3s, transform .2s;
}
#order-standard_cart .product:hover { border-color: var(--accent-brd) !important; box-shadow: 0 20px 60px -30px var(--lf-accent); transform: translateY(-2px); }
#order-standard_cart .product > header { border: 0 !important; padding: 0 0 12px !important; }
#order-standard_cart .product > header span { font-family: 'DM Serif Display', serif !important; font-size: 24px !important; color: var(--text) !important; font-weight: 400; }
#order-standard_cart .product-desc { color: var(--text-dim) !important; }
#order-standard_cart .product-desc p { color: var(--text-dim) !important; font-size: 14px; }
#order-standard_cart .product-desc ul { list-style: none !important; padding: 0 !important; margin: 14px 0 !important; }
#order-standard_cart .product-desc ul li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0 !important; color: var(--text-dim) !important; font-size: 13px; border: 0 !important; }
#order-standard_cart .product-desc ul li::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; background: var(--good);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206L9%2017l-5-5%22/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206L9%2017l-5-5%22/%3E%3C/svg%3E") no-repeat center/contain;
}
#order-standard_cart .product-desc ul li .feature-value { color: var(--text) !important; font-weight: 600; }
#order-standard_cart .product > footer { border: 0 !important; padding: 16px 0 0 !important; }
#order-standard_cart .product-pricing { color: var(--text-mute) !important; font-size: 12px; }
#order-standard_cart .product-pricing .price { font-family: 'DM Serif Display', serif !important; font-style: italic; font-size: 32px !important; color: var(--lf-accent) !important; display: inline-block; }
#order-standard_cart .product .btn, #order-standard_cart .product a.btn {
  background: var(--accent-grad) !important; border: 1px solid var(--accent-brd) !important;
  color: #fff !important; border-radius: 999px !important; box-shadow: 0 8px 26px -10px var(--lf-accent);
}
/* badge "le plus choisi" / recommended */
#order-standard_cart .product .recommended, #order-standard_cart .product .ribbon, #order-standard_cart .product.featured::after {
  background: var(--accent-grad) !important; color: #fff !important;
}
/* sidebar categories (familles de services) */
#order-standard_cart .sidebar-categories, .cart-sidebar { background: var(--bg-1) !important; border: 1px solid var(--border) !important; border-radius: 16px; }
/* ============================================================
   21. Order form: champs custom REQUIS mis en evidence + bloquants
   Fix "Admin Password is required" invisible (commande hosting cassee).
   La form-group recoit .lf-required-field (configureproduct.tpl) quand
   le custom field est required ; le JS de l'order form ajoute required.
   ============================================================ */
.lf-required-field > label {
  font-weight: 700 !important;
  color: var(--lf-accent) !important;
}
.lf-required-field .form-control,
.lf-required-field input,
.lf-required-field select,
.lf-required-field textarea {
  border: 1px solid var(--lf-accent) !important;
  box-shadow: 0 0 0 2px rgba(126, 140, 242, 0.22) !important;
}
/* tant que vide (placeholder visible), on signale en rouge charte */
.lf-required-field .form-control:placeholder-shown,
.lf-required-field input:placeholder-shown {
  border-color: #e0654e !important;
  box-shadow: 0 0 0 2px rgba(224, 101, 78, 0.28) !important;
}

/* ---- 14. Page FACTURE (viewinvoice) ---- */
body.invoice, body.viewinvoice, .invoice-container, #invoicecontainer, .invoice-body,
.allure-invoice, .invoice-wrapper, body[class*="invoice"], .allure-article.invoice {
  background: var(--bg) !important; color: var(--text-dim) !important;
}
.invoice-header, .invoice-details, .invoice-payto, .invoice-items, .invoice-notes,
.invoice-transactions, .invoice-summary, .invoice .panel, .invoice-page {
  background: var(--bg-1) !important; border-color: var(--border) !important; color: var(--text-dim) !important;
}
.invoice-header h1, .invoice h1, .invoice h2, .invoice h3 { color: var(--text) !important; }
.invoice .table, .invoice-items .table, table.invoice-items, .invoice table { background: transparent !important; color: var(--text-dim) !important; }
.invoice .table td, .invoice .table th, .invoice-items td, .invoice-items th { border-color: var(--border) !important; color: var(--text-dim) !important; }
.invoice .table .strong, .invoice .total { color: var(--text) !important; }
/* la boite blanche residuelle du sous-total/total */
.invoice-items tfoot td, .invoice tfoot td, .invoice .subtotal, .invoice .total-row { background: var(--bg-2) !important; }

/* ============================================================================
   15. LOGIN / auth = design handoff whmcs.html (carte glassy centree sur
   halos, tokens oklch du handoff). Remplace le split teal allure.
   GARDE : section perdue par le sweep du 2026-07-10 (base stale), restauree
   le 2026-07-12 ; toute reecriture du skin part de CE fichier et la conserve.
   Le ?v= de head.tpl ET le LFSKIN-V en ligne 1 se bumpent a chaque deploy.
   ============================================================================ */
/* couche de halos plein ecran (rendue {if showingLoginPage} par footer.tpl) */
.lf-login-halos { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.lf-halo { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; mix-blend-mode: screen; }
.lf-h1 { width: 600px; height: 600px; left: -200px; top: -150px; background: oklch(0.55 0.30 305); }
.lf-h2 { width: 540px; height: 540px; right: -180px; top: 30%; background: oklch(0.55 0.28 330); }
.lf-h3 { width: 480px; height: 480px; left: 30%; bottom: -200px; background: oklch(0.50 0.25 280); }
html[data-theme="light"] .lf-halo { opacity: .30; mix-blend-mode: multiply; }

/* shell auth : plein ecran, carte centree (cible les pages showingLoginPage) */
#main-area:has(.lf-login-halos) { display: block; position: relative; min-height: 100vh; }
#main-area:has(.lf-login-halos) #main-body.allure-article {
  width: 100%; max-width: none; min-height: 100vh; background: transparent !important;
  display: grid; place-items: center; padding: 40px 20px;
}
#main-area:has(.lf-login-halos) .allure-content,
#main-area:has(.lf-login-halos) .main-content {
  width: 100%; background: transparent !important; padding: 0;
  display: grid; place-items: center;
}
/* plus de panneau lateral */
.allure-login-bg { display: none !important; }

/* la carte = .logincontainer */
.logincontainer {
  position: relative; z-index: 1; width: 100%; max-width: 440px; text-align: left;
  padding: 38px 34px; border-radius: 24px;
  border: 1px solid oklch(0.30 0.04 295 / 0.6);
  background: linear-gradient(180deg, oklch(0.18 0.03 295 / 0.85), oklch(0.13 0.02 295 / 0.70));
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px -30px oklch(0.72 0.24 305 / 0.55), inset 0 0 0 1px oklch(1 0 0 / 0.03);
}
html[data-theme="light"] .logincontainer {
  background: linear-gradient(180deg, oklch(1 0 0 / 0.95), oklch(0.98 0.005 295 / 0.85));
  border-color: oklch(0.85 0.015 295 / 0.9);
}

/* en-tete : eyebrow + serif welcome + subtitle */
.lf-login-head .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: oklch(0.60 0.02 295); margin-bottom: 14px;
}
.lf-login-head .eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.72 0.24 305); box-shadow: 0 0 10px oklch(0.72 0.24 305);
}
.lf-login-welcome {
  font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: 38px; line-height: 1.05; margin: 6px 0 14px; color: oklch(0.97 0.005 295);
}
.lf-login-welcome em { font-style: italic; color: oklch(0.72 0.24 305); }
.lf-login-sub { color: oklch(0.78 0.015 295); font-size: 14px; margin: 0 0 26px; }
html[data-theme="light"] .lf-login-welcome { color: oklch(0.16 0.02 295); }
html[data-theme="light"] .lf-login-sub { color: oklch(0.38 0.02 295); }

/* champs */
.logincontainer .form-group { margin-bottom: 14px; }
.logincontainer label:not(.sr-only) { font-size: 12px; font-weight: 600; color: oklch(0.78 0.015 295); }
.logincontainer .form-control {
  height: auto; padding: 11px 14px; border-radius: 12px; font-size: 14px;
  background: oklch(0.16 0.025 295); color: oklch(0.97 0.005 295);
  border: 1px solid oklch(0.30 0.04 295 / 0.6); box-shadow: none;
}
.logincontainer .form-control::placeholder { color: oklch(0.60 0.02 295); }
.logincontainer .form-control:focus {
  border-color: oklch(0.72 0.24 305); box-shadow: 0 0 0 3px oklch(0.55 0.20 305 / 0.18);
}
html[data-theme="light"] .logincontainer .form-control {
  background: oklch(1 0 0); color: oklch(0.16 0.02 295); border-color: oklch(0.85 0.015 295 / 0.9);
}

/* ligne remember / forgot : spread */
.logincontainer .checkbox { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px; }
.logincontainer .checkbox > label { font-size: 13px; color: oklch(0.78 0.015 295); font-weight: 500; }
.logincontainer a { color: oklch(0.72 0.24 305) !important; }
.logincontainer a:hover { color: oklch(0.78 0.20 320) !important; }
.logincontainer .allure-forgot-password a { color: oklch(0.72 0.24 305) !important; font-size: 12px; text-decoration: none; }

/* boutons empiles (primary + register), pill handoff. Les !important sont
   PORTEURS : ils battent .btn-primary/.btn-success globaux (aussi !important,
   specificite inferieure) ; custom.css qui s'en chargeait est replie ici. */
.login-form .text-center:has(#login) { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.logincontainer #login.btn,
.logincontainer .btn-primary,
.logincontainer .btn-primary:link,
.logincontainer .btn-primary:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 18px; border-radius: 999px !important; font-size: 14px; font-weight: 600 !important;
  color: #fff !important; border: 1px solid oklch(0.55 0.20 305 / 0.6) !important;
  background: linear-gradient(180deg, oklch(0.36 0.14 305), oklch(0.28 0.12 305)) !important;
  box-shadow: 0 8px 26px -10px oklch(0.72 0.24 305), inset 0 1px 0 oklch(1 0 0 / 0.18) !important;
  transition: all .18s ease !important;
}
.logincontainer #login.btn:hover, .logincontainer .btn-primary:hover, .logincontainer .btn-primary:focus {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -8px oklch(0.72 0.24 305), inset 0 1px 0 oklch(1 0 0 / 0.18) !important;
}
.logincontainer .btn-success,
.login-form .btn-success {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: oklch(0.19 0.03 295) !important; color: oklch(0.97 0.005 295) !important;
  border: 1px solid oklch(0.30 0.04 295 / 0.6) !important; box-shadow: none !important; transition: all .18s ease;
}
.logincontainer .btn-success:hover { border-color: oklch(0.45 0.06 300 / 0.7) !important; transform: translateY(-1px); }
html[data-theme="light"] .logincontainer .btn-success { background: oklch(0.97 0.008 295) !important; color: oklch(0.16 0.02 295) !important; }

/* footer copyright de la carte : discret centre (le border-top vivait dans la
   regle .allure-footer du groupe 8, rapatrie ici) */
.allure-login-footer { color: oklch(0.60 0.02 295) !important; font-size: 12px; text-align: center; margin-top: 22px; background: transparent !important; border-top: 1px solid var(--border) !important; }

/* ---- 16. Register / client-area / pages erreur : residus gris allure ---- */
[data-theme="dark"] .allure-container .allure-article-header { background: var(--bg-1) !important; border-top-color: var(--border) !important; }
html[data-theme="dark"] .text-muted { color: var(--text-mute) !important; }
#containerNewUserSignup, #containerNewUserSecurity, .marketing-email-optin { background: var(--bg-1) !important; }
.sub-heading span { background: var(--bg) !important; color: var(--text-dim) !important; }
/* page erreur 404/500 (error.tpl) : conteneur gris allure #424242 -> surface */
.error-container, .error-container.boxed { background: var(--bg-1) !important; }