/* ── COULEURS DU COMPTE (2026-10-24, demande de François) ─────────────────────────────────────────
   Deux couleurs par utilisateur et par thème (défaut #3472d8 / #f97316), réglées sur /mes_parametres.
   Le script précoce de navbar.html pose sur <html> les variables --cc / --cc-aplat / --cc-vive / --cc-clair
   (principale) et --cs / --cs-aplat / --cs-vive / --cs-clair (secondaire) du thème RÉSOLU, et la classe
   `cc-actif`. Ici : l'EN-TÊTE du site (dégradé de la principale) et le MENU LATÉRAL (libellés de section et
   lien actif en principale, liseré du lien actif / survolé en secondaire). Spécificité `:not(#_)` pour
   l'emporter sur navbar.css et sur les feuilles de saison générées. Les listes et portefeuilles sans
   couleur propre reprennent ces variables (--lc* / --ls*) dans leurs gabarits. */
html.cc-actif:not(#_) {
  --cc-txt: var(--cc-aplat);
  --cc-pale: color-mix(in srgb, var(--cc) 12%, #ffffff);
  --cs-txt: var(--cs);   /* secondaire telle quelle (2026-10-24, soir) */
  --cs-trait: var(--cs);
  --tcb-bg-from: var(--cc-aplat);
  --tcb-bg-to: color-mix(in srgb, var(--cc-aplat) 72%, var(--cc-vive));
  --sb-simuler: var(--cc-aplat);
}
@media (prefers-color-scheme: dark) {
  html.cc-actif:not([data-theme="light"]):not(#_) {
    --cc-txt: var(--cc-clair); --cc-pale: color-mix(in srgb, var(--cc) 18%, #0b1420);
    --cs-txt: var(--cs); --cs-trait: var(--cs);
  }
}
html.cc-actif[data-theme="dark"]:not(#_) {
  --cc-txt: var(--cc-clair); --cc-pale: color-mix(in srgb, var(--cc) 18%, #0b1420);
  --cs-txt: var(--cs); --cs-trait: var(--cs);
}

/* Menu latéral : zones et libellés de section en principale, lien actif sur fond pâle de la
   principale avec un liseré de la SECONDAIRE ; même liseré au survol. */
html.cc-actif:not(#_) :is(.sidebar-item--z-decouvrir, .sidebar-item--z-simuler, .sidebar-item--z-investir, .sidebar-item--z-consolider) {
  --zc: var(--cc-txt);
}
html.cc-actif:not(#_) .sidebar-section-label:not(.sidebar-section-label--admin) { color: var(--cc-txt); }
html.cc-actif:not(#_) .sidebar-section-label:not(.sidebar-section-label--admin)::before { background: var(--cc-txt); }
html.cc-actif:not(#_) .sidebar-item.active:not(.sidebar-item--admin) {
  background: color-mix(in srgb, var(--cc) 14%, transparent);
  color: color-mix(in srgb, var(--cc-txt) 72%, var(--text, #0f172a));
  box-shadow: inset 3px 0 0 var(--cs-trait);
}
html.cc-actif:not(#_) :is(.sidebar-item:not(.sidebar-item--inerte):hover, .sidebar-item.active:not(.sidebar-item--inerte):hover,
  .sidebar-settings-link:hover, .sidebar-action-btn:hover):not(.sidebar-item--admin) {
  background: color-mix(in srgb, var(--cc) 22%, transparent);
  color: color-mix(in srgb, var(--cc-txt) 68%, var(--text, #0f172a));
  box-shadow: inset 3px 0 0 var(--cs-trait);
}
/* Avatar et pastilles de l'en-tête qui reprenaient le marine de la barre. */
html.cc-actif:not(#_) .tcb-notif-pastille { color: var(--cc-aplat); }

/* ── Fenêtres de l'en-tête et PAGES DE COMPTE (2026-10-24, demande de François) ──────────────────
   Les fenêtres du compte et des courtiers prennent le dégradé de la principale ; les pages de compte
   (.ac-page : Mon compte, Paramètres, Profil, Sécurité, Mes courtiers, Comptes-titres…) voient leurs jetons
   bleus (--blue*, --tf-btn) remplacés par la principale, la secondaire marquant les sélections (tuile active
   de la Sécurité, interrupteurs cochés, flèches des cartes). La fenêtre « Courtiers » centrée (ambre, posée
   par un bandeau d'alerte) garde sa couleur de notification. */
html.cc-actif:not(#_) :is(.npd-head, .tcb-cnx-head) {
  background: linear-gradient(155deg, var(--cc-aplat) 0%, color-mix(in srgb, var(--cc-aplat) 60%, #000) 100%);
}
html.cc-actif:not(#_) :is(#tcbCnxMenu, .nav-profile-dropdown, #themeMenu, .ac-page) {
  --blue: var(--cc-vive); --blue-dk: var(--cc-aplat);
  --blue-50: color-mix(in srgb, var(--cc) 10%, #ffffff); --blue-100: color-mix(in srgb, var(--cc) 28%, #ffffff);
  --tf-btn: var(--cc-aplat); --tf-btn-h: color-mix(in srgb, var(--cc-aplat) 82%, #000);
  --btn-primaire: var(--cc-aplat); --btn-primaire-h: color-mix(in srgb, var(--cc-aplat) 82%, #000);
  --navy: var(--cc-aplat);
}
@media (prefers-color-scheme: dark) {
  html.cc-actif:not([data-theme="light"]):not(#_) :is(#tcbCnxMenu, .nav-profile-dropdown, #themeMenu, .ac-page) {
    --blue: var(--cc-clair); --blue-dk: var(--cc-clair);
    --blue-50: color-mix(in srgb, var(--cc) 16%, #131f2b); --blue-100: color-mix(in srgb, var(--cc) 36%, #131f2b);
    --navy: var(--cc-clair);
  }
}
html.cc-actif[data-theme="dark"]:not(#_) :is(#tcbCnxMenu, .nav-profile-dropdown, #themeMenu, .ac-page) {
  --blue: var(--cc-clair); --blue-dk: var(--cc-clair);
  --blue-50: color-mix(in srgb, var(--cc) 16%, #131f2b); --blue-100: color-mix(in srgb, var(--cc) 36%, #131f2b);
  --navy: var(--cc-clair);
}
/* Bandeau d'accueil du compte (Mon compte, Profil) : dégradé de la principale. */
html.cc-actif:not(#_) .ac-page .ac-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cc-aplat) 70%, #000) 0%, var(--cc-aplat) 55%, var(--cc-vive) 100%);
}
/* Boutons pleins : aplat (texte blanc >= 4,5:1), jamais la variante vive. */
html.cc-actif:not(#_) .ac-page :is(.ac-btn--primary, .sx-btn-primaire, .cc-theme.actif) { background: var(--cc-aplat); color: #fff; }
html.cc-actif:not(#_) .ac-page :is(.ac-btn--primary, .sx-btn-primaire):hover { background: color-mix(in srgb, var(--cc-aplat) 82%, #000); color: #fff; }
/* Secondaire = sélection : interrupteurs cochés, tuile active de la Sécurité, flèche des cartes au survol. */
html.cc-actif:not(#_) .ac-page .ac-toggle input:checked + .ac-toggle-track { background: var(--cs-trait); }
html.cc-actif:not(#_) .ac-page .se-tuile.actif { border-color: var(--cs-trait); box-shadow: inset 3px 0 0 var(--cs-trait); background: color-mix(in srgb, var(--cs) 10%, var(--surface, #fff)); }
html.cc-actif:not(#_) .ac-page .se-tuile.actif .se-tuile-num { background: var(--cs); color: var(--cs-texte, #fff); }
html.cc-actif:not(#_) .ac-page .ac-card:hover .ac-card-arrow { color: var(--cs-txt); }