/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  /* Sidebar (fond clair) */
  --sb-w:       196px;   /* menu resserré : le contenu des pages gagne 44 px */
  --sb-bg-top:  #ffffff;
  --sb-bg-bot:  #f8fafc;
  --sb-text:    #475569;
  --sb-hover:   #f0f7ff;
  --sb-active:  #e8f4ff;
  --sb-border:  #e2e8f0;
  /* Top-content-bar (fond sombre) */
  --tcb-bg-from: #013a6b;
  --tcb-bg-to:   #0163b8;
  --tcb-text:    rgba(255,255,255,0.88);
  --tcb-hover:   rgba(255,255,255,0.15);
  --tcb-border:  rgba(255,255,255,0.22);
  /* Layout */
  --topbar-h:   46px;
  /* Repli de la couleur du domaine « listes ». Le jeton --dom-liste vient de
     base.css, que 5 gabarits ne chargent pas (accueil, admin ×2, mon_compte,
     analyse) : sans repli, `var(--dom-liste)` ne résout rien et le libellé
     « ANALYSER » retombait au gris d'encre - presque noir en thème clair,
     presque blanc sur /analyse. Repli NOMMÉ plutôt que redéfinition de
     --dom-liste : navbar.css étant chargé après base.css, redéfinir le jeton
     ferait de ce fichier la source de vérité par accident. */
  --sb-simuler: #0f766e;
}
/* Thème SOMBRE : barre latérale ET barre du haut (TCB) - la TCB devient un
   marine plus profond, dans l'esprit sombre tout en gardant l'identité. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sb-bg-top:#101c28; --sb-bg-bot:#0b1420; --sb-text:#a4b4c1;
    --sb-hover:#182632; --sb-active:#12293c; --sb-border:#233240;
    --tcb-bg-from:#041a30; --tcb-bg-to:#0a3f6d;
    --tcb-border:rgba(255,255,255,0.14);
    --sb-simuler:#2dd4bf;
  }
}
:root[data-theme="dark"] {
  --sb-bg-top:#101c28; --sb-bg-bot:#0b1420; --sb-text:#a4b4c1;
  --sb-hover:#182632; --sb-active:#12293c; --sb-border:#233240;
  --tcb-bg-from:#041a30; --tcb-bg-to:#0a3f6d;
  --tcb-border:rgba(255,255,255,0.14);
  --sb-simuler:#2dd4bf;
}

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

body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text, #1a1a2e);
  background: var(--bg);
  padding-left: var(--sb-w);
  padding-top: var(--topbar-h);
  min-height: 100vh;
}

.site-footer {
  display: block;
  margin-top: 60px;
  text-align: center;
  font-size: 13px;
  color: #94a3b8;
  padding-bottom: 24px;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR (fond clair) - démarre sous la TCB
════════════════════════════════════════════════════════════════ */
.sidebar {
  position: fixed;
  top: var(--topbar-h); left: 0;
  width: var(--sb-w);
  height: calc(100vh - var(--topbar-h));
  background: linear-gradient(180deg, var(--sb-bg-top) 0%, var(--sb-bg-bot) 100%);
  border-right: 1px solid var(--sb-border);
  box-shadow: 2px 0 8px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
}

/* ── Marque ──────────────────────────────────────────────────── */
.sidebar-brand {
  padding: 20px 16px 18px;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
/* Override l'attribut SVG inline pour le fond clair */
.sidebar-brand svg { stroke: #018ffa !important; }
.sidebar-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.sidebar-logo-main {
  font-size: 0.7rem;
  font-weight: 400;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.sidebar-logo-sub {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

/* ── Navigation ──────────────────────────────────────────────── */
.sidebar-nav {
  flex: 1;
  /* Espacements resserrés (2026-08-13) : le menu tient désormais 16 entrées et
     débordait sous la ligne de flottaison sur un portable. L'interligne des
     liens est la variable la moins coûteuse - la hauteur de frappe reste
     confortable (≈ 33 px, au-dessus des 24 px du minimum recommandé pour un
     pointeur). */
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;   /* 14 → 10 px (2026-09-10) : « Investissements DCA » tient sur une ligne */
  color: var(--sb-text);
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  transition: background 0.14s, color 0.14s;
  white-space: nowrap;
}
.sidebar-item svg { opacity: 0.45; flex-shrink: 0; transition: opacity 0.14s; }
/* Couleur de ZONE : l'item survolé/actif prend la teinte de sa section
   (bleu = Découvrir, teal = Simuler, rose = Investir), dans les deux thèmes. */
.sidebar-item--z-decouvrir { --zc: var(--blue, #0163b8); }
.sidebar-item--z-simuler   { --zc: var(--dom-liste, var(--sb-simuler)); }
.sidebar-item--z-investir  { --zc: var(--pink, #db2777); }
.sidebar-item--z-consolider { --zc: #6d28d9; }   /* violet - Consolider (2026-09-10) */
.sidebar-item:hover { background: var(--sb-hover); color: var(--zc, #018ffa); }
.sidebar-item:hover svg { opacity: 1; }
.sidebar-item.active {
  background: color-mix(in srgb, var(--zc, #018ffa) 14%, transparent);
  color: var(--zc, #018ffa);
}
.sidebar-item.active svg { opacity: 1; }
/* Conteneur de l'indicateur d'optimisation, aligné à droite du libellé du
   lien. Il portait aussi les PASTILLES de comptage, retirées du menu le
   2026-08-13 : elles sont désormais totalisées par la cloche de la barre du
   haut, qui mène à la page des actions à faire. */
.sidebar-badge-wrap {
  margin-left: auto;
  flex-shrink: 0;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Indicateur ANIMÉ d'optimisation en cours : anneau vert tournant. */
.sidebar-optim-spin {
  width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid rgba(10, 204, 58, .25); border-top-color: #0acc3a;
  display: inline-block; animation: sbOptimSpin .7s linear infinite;
}
@keyframes sbOptimSpin { to { transform: rotate(360deg); } }
/* `hidden` doit l'emporter sur display:inline-flex/inline-block. */
.sidebar-optim-spin[hidden], .sidebar-badge[hidden] { display: none; }

.sidebar-divider {
  border: none;
  border-top: 1px solid var(--sb-border);
  margin: 8px 10px;
}

.sidebar-section-label {
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sb-text-muted, var(--text-4));
  padding: 8px 12px 4px;
  margin-top: 2px;
  border-top: 1px solid var(--sb-border);
  display: flex;
  align-items: center;
  gap: 7px;
}
/* Puce colorée : code les 4 temps du parcours (Explorer · Analyser · Investir · Consolider). */
.sidebar-section-label::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: currentColor; flex: none;
}
.sidebar-section-label--first { border-top: 0; margin-top: 0; }
.sidebar-section-label--decouvrir { color: #0163b8; }   /* bleu   - Découvrir */
.sidebar-section-label--simuler   { color: var(--dom-liste, var(--sb-simuler)); }  /* palette A - domaine « listes » */
.sidebar-section-label--investir  { color: #db2777; }   /* rose   - Investir  */
.sidebar-section-label--consolider { color: #6d28d9; }  /* violet - Consolider (2026-09-10) */

/* ── Lien paramètres en bas de sidebar ───────────────────────── */
.sidebar-settings {
  flex-shrink: 0;
  padding: 10px 10px 8px;
  border-top: 1px solid var(--sb-border);
}
.sidebar-settings-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--sb-text);
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  transition: background 0.14s, color 0.14s;
  white-space: nowrap;
}
.sidebar-settings-link svg { opacity: 0.45; flex-shrink: 0; transition: opacity 0.14s; }
.sidebar-settings-link:hover { background: var(--sb-hover); color: #018ffa; }
.sidebar-settings-link:hover svg { opacity: 1; }

/* ── Zone bas (mobile uniquement) ────────────────────────────── */
.sidebar-bottom {
  flex-shrink: 0;
  padding: 8px;
  border-top: 1px solid var(--sb-border);
  display: none;
}

/* Bouton générique zone bas mobile */
.sidebar-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  color: var(--sb-text);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  transition: background 0.14s, color 0.14s;
  white-space: nowrap;
}
.sidebar-action-btn svg { opacity: 0.45; flex-shrink: 0; transition: opacity 0.14s; }
.sidebar-action-btn:hover { background: var(--sb-hover); color: #018ffa; }
.sidebar-action-btn:hover svg { opacity: 1; }

.sidebar-login-btn { background: #018ffa; color: #fff; }
.sidebar-login-btn svg { opacity: 0.9; }
.sidebar-login-btn:hover { background: #0075d1; color: #fff; }

/* ════════════════════════════════════════════════════════════════
   PANNEAU DE PARTAGE
════════════════════════════════════════════════════════════════ */
.sidebar-share { position: relative; margin-bottom: 4px; }

.share-panel {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 262px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  box-shadow: var(--sh, 0 12px 32px rgba(0,0,0,0.18));
  padding: 10px;
  z-index: 999;
  animation: sbSlideUp 0.15s ease;
}
.share-panel.show { display: block; }

.share-panel-header {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-4, #94a3b8);
  padding: 2px 4px 8px;
}
.share-panel-url {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 7px 8px;
  margin-bottom: 8px;
}
.share-url-text {
  flex: 1;
  font-size: 0.72rem;
  color: var(--text-2, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.share-copy-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--blue, #018ffa);
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.12s;
}
.share-copy-btn:hover { background: color-mix(in srgb, var(--blue, #018ffa) 12%, var(--surface, #fff)); }
.share-copy-btn.copied { color: #16a34a; }

.share-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.share-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  transition: opacity 0.12s, transform 0.1s;
}
.share-btn:hover { opacity: 0.88; transform: translateY(-1px); text-decoration: none; }
.share-btn-linkedin { background: #0a66c2; color: #fff; }
.share-btn-x        { background: #111;    color: #fff; }
.share-btn-facebook { background: #1877f2; color: #fff; }
.share-btn-email    { background: var(--bg, #f1f5f9); color: var(--text, #374151);
                      border: 1px solid var(--border, #e2e8f0); }

/* THÈME SOMBRE - les marques gardent leur couleur (c'est leur identité), mais le
   noir de X se confondrait avec le panneau sombre : on lui ajoute un liseré. Le
   vert « copié » est éclairci pour rester lisible sur fond sombre. */
:root[data-theme="dark"] .share-btn-x { background: #1c1c1e; border: 1px solid #3f3f46; }
:root[data-theme="dark"] .share-copy-btn.copied { color: #35c46a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .share-btn-x { background: #1c1c1e; border: 1px solid #3f3f46; }
  :root:not([data-theme="light"]) .share-copy-btn.copied { color: #35c46a; }
}

/* ════════════════════════════════════════════════════════════════
   DROPDOWN COMPTE (style npd-*)
════════════════════════════════════════════════════════════════ */
.nav-profile { position: relative; }

.nav-profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  color: var(--sb-text);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  transition: background 0.14s, color 0.14s;
  white-space: nowrap;
}
.nav-profile-btn:hover,
.nav-profile.is-open .nav-profile-btn {
  background: var(--sb-hover);
  color: #018ffa;
}

/* Avatar petit - sidebar fond clair */
.npd-avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8f4ff;
  border: 1.5px solid #bfdfff;
  color: #018ffa;
  font-size: 0.76rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  object-fit: cover;
}

/* Avatar petit - TCB fond sombre */
.npd-avatar-sm-dark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  object-fit: cover;
}

.nav-profile-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
  color: var(--sb-text);
  font-weight: 500;
}
/* Label TCB (fond sombre) */
.nav-profile-label-dark {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
  color: rgba(255,255,255,0.92);
  font-weight: 500;
}

.nav-profile-caret {
  color: #94a3b8;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.2s;
}
.nav-profile.is-open .nav-profile-caret { transform: rotate(180deg); }

/* Caret TCB (fond sombre) */
.nav-profile-caret-dark {
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.2s;
}
.nav-profile.is-open .nav-profile-caret-dark { transform: rotate(180deg); }

/* Dropdown panel */
.nav-profile-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 248px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  box-shadow: var(--sh, 0 12px 32px rgba(0,0,0,0.18));
  overflow: hidden;
  z-index: 999;
  animation: sbSlideUp 0.15s ease;
}
.nav-profile.is-open .nav-profile-dropdown { display: block; }

/* En-tête dégradé */
.npd-head {
  padding: 18px 16px 14px;
  background: linear-gradient(155deg, #0163b8 0%, #012f5a 100%);
  text-align: center;
}
.npd-avatar-lg {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.32);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  text-transform: uppercase;
  object-fit: cover;
}
.npd-head-name  { color: #fff; font-weight: 700; font-size: 0.95rem; line-height: 1.25; }
.npd-head-email { color: rgba(255,255,255,0.6); font-size: 0.73rem; word-break: break-all; margin-top: 3px; }

/* Items */
.npd-body { padding: 4px 0; }
.npd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 0.82rem;
  color: #374151;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.npd-item svg { opacity: 0.4; flex-shrink: 0; transition: opacity 0.12s; }
.npd-item:hover { background: #f0f7ff; color: #018ffa; text-decoration: none; }
.npd-item:hover svg { opacity: 1; }

/* Footer déconnexion */
.npd-foot { border-top: 1px solid #e2e8f0; padding: 4px 0; }
.npd-logout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #dc2626;
  text-decoration: none;
  transition: background 0.12s;
}
.npd-logout:hover { background: #fef2f2; text-decoration: none; }
.npd-logout-lhs { display: flex; align-items: center; gap: 10px; }
.npd-logout svg { opacity: 0.7; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════
   TOP CONTENT BAR (desktop - fond sombre)
════════════════════════════════════════════════════════════════ */
.top-content-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  background: linear-gradient(to right, var(--tcb-bg-from), var(--tcb-bg-to));
  z-index: 201;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 6px;
}
/* Champ « ticker ou société » calé À GAUCHE de l'espace libre (2026-09-10), juste après la marque */
.tcb-spacer { flex: 1; display: flex; align-items: center; justify-content: flex-start; min-width: 0; padding-left: 6px; }

/* Recherche d'un titre dans la TCB (2026-09-07) */
.tcb-search {
  position: relative; display: flex; align-items: center; gap: 7px;
  width: min(380px, 100%); height: 32px; padding: 0 10px; box-sizing: border-box;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px; color: rgba(255,255,255,0.75);
  transition: background 0.14s, border-color 0.14s;
}
.tcb-search:focus-within { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.45); color: #fff; }
.tcb-search svg { flex-shrink: 0; }
.tcb-search-input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  color: #fff; font: inherit; font-size: 0.84rem; padding: 0;
}
.tcb-search-input::placeholder { color: rgba(255,255,255,0.6); }
.tcb-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tcb-search-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 4px 0;
  list-style: none; background: var(--surface, #fff); color: var(--text, #0f172a);
  border: 1px solid var(--border, #e2e7ec); border-radius: 10px;
  box-shadow: 0 14px 40px rgba(15,23,42,0.22); z-index: 300; max-height: 360px; overflow-y: auto;
}
.tcb-search-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 12px; cursor: pointer;
  font-size: 0.84rem;
}
.tcb-search-item:hover, .tcb-search-item.actif { background: var(--bg, #f1f5f9); }
.tcb-search-tk {
  flex-shrink: 0; min-width: 52px; padding: 2px 8px; border-radius: 999px; text-align: center;
  background: var(--teal-dk, #14b8a6); color: #fff; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.tcb-search-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcb-search-type { flex-shrink: 0; font-size: 0.7rem; color: var(--text-3, #64748b); text-transform: uppercase; letter-spacing: 0.04em; }
.tcb-search-vide { padding: 9px 12px; font-size: 0.82rem; color: var(--text-3, #64748b); }

.tcb-sep {
  width: 1px;
  height: 20px;
  background: var(--tcb-border);
  flex-shrink: 0;
  margin: 0 4px;
}

/* Bouton générique TCB */
.tcb-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--tcb-text);
  white-space: nowrap;
  transition: background 0.14s, color 0.14s;
}
.tcb-btn svg { opacity: 0.7; flex-shrink: 0; transition: opacity 0.14s; }
.tcb-btn:hover { background: var(--tcb-hover); color: #fff; }
.tcb-btn:hover svg { opacity: 1; }

/* Bouton Connexion dans TCB */
.tcb-login-btn {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
}
.tcb-login-btn svg { opacity: 0.9; }
.tcb-login-btn:hover { background: rgba(255,255,255,0.28); color: #fff; }

/* Marque dans la TCB */
.tcb-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.14s;
}
.tcb-brand:hover { background: rgba(255,255,255,0.12); }
.tcb-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.tcb-brand-main {
  font-size: 0.65rem;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.tcb-brand-sub {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.tcb-brand-sep {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
  margin: 0 6px;
}

/* Lien Admin dans TCB */
.tcb-admin-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-sm, 8px);
  background: rgba(20,184,166,0.20);
  border: 1px solid rgba(20,184,166,0.45);
  color: #99f6e4;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.15s;
  flex-shrink: 0;
}
.tcb-admin-link:hover { background: rgba(20,184,166,0.30); color: #fff; }

/* Liens admin sidebar */
.sidebar-section-label--admin { color: #64748b; }   /* gris neutre (hors parcours) */
.sidebar-item--admin { color: #115e59; }
.sidebar-item--admin svg { color: #14b8a6; opacity: 0.8; }
.sidebar-item--admin:hover { background: rgba(20,184,166,0.12); color: #115e59; }
.sidebar-item--admin:hover svg { opacity: 1; }
/* Bouton d'action dans la sidebar (ex. « Renvoyer mes emails ») : réinitialise
   le rendu natif du <button> pour épouser un .sidebar-item. */
.sidebar-form { margin: 0; }
.sidebar-item--button {
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit; font-weight: 500; box-sizing: border-box; text-align: left;   /* métrique des liens ; border-box (width:100 % + padding) */
  padding-right: 6px;
  text-align: left;
  font-family: inherit;
}
.sidebar-item--admin.active { background: rgba(254,176,25,0.18); color: #92400e; }

/* Zone partage dans TCB */
.tcb-share { position: relative; }

/* Share panel TCB : s'ouvre vers le bas */
.tcb-share .share-panel {
  bottom: auto;
  top: calc(100% + 8px);
  left: auto;
  right: 0;
  animation: sbSlideDown 0.15s ease;
}

/* Bouton profil dans TCB */
.tcb-profile-btn {
  color: var(--tcb-text);
  width: auto;
}
.tcb-profile-btn:hover,
.nav-profile.is-open .tcb-profile-btn {
  background: var(--tcb-hover);
  color: #fff;
}

/* Dropdown compte TCB : s'ouvre vers le bas */
.nav-profile-dropdown.npd-downward {
  bottom: auto;
  top: calc(100% + 8px);
  left: auto;
  right: 0;
  animation: sbSlideDown 0.15s ease;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE - HAMBURGER DANS LA TCB + SIDEBAR EN OVERLAY
════════════════════════════════════════════════════════════════ */
.sidebar-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s;
}
/* Le hamburger n'a de sens que quand la sidebar est repliée (≤ 900 px, cf. le
   media query plus bas qui la repasse en `flex`). Cette règle vient APRÈS
   `.sidebar-toggle` : à spécificité égale, la dernière l'emporte - placée avant,
   son `display:none` était écrasé et le bouton restait visible sur grand écran. */
.tcb-hamburger { display: none; }
.sidebar-toggle:hover { background: rgba(255,255,255,0.15); }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.42);
  z-index: 190;
}
/* Le voile ne sert QUE quand la sidebar est un panneau mobile superposé.
   Sur desktop la sidebar est permanente : ne jamais assombrir la page. */

@media (max-width: 900px) {
  body { padding-left: 0; }

  /* La TCB reste affichée : hamburger à gauche du logo, compte seul à
     droite - partage, lien Admin et séparateurs masqués */
  .tcb-hamburger    { display: flex; }
  .top-content-bar .tcb-share,
  .top-content-bar .tcb-sep,
  .top-content-bar .tcb-admin-link,
  .top-content-bar .tcb-brand-sep { display: none; }
  .tcb-search { width: min(260px, 100%); }
  /* Compte : seulement la photo (ni nom, ni chevron) */
  .tcb-profile-btn .nav-profile-label-dark,
  .tcb-profile-btn .nav-profile-caret { display: none; }
  .sidebar-bottom   { display: flex; flex-direction: column; }

  /* Sur mobile la sidebar est un overlay pleine hauteur */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    top: 0;
    height: 100vh;
    z-index: 220;
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-overlay.is-open { display: block; }

  /* Dropdowns mobiles s'ouvrent vers le haut */
  .sidebar-bottom .share-panel,
  .nav-profile-mobile .nav-profile-dropdown {
    bottom: calc(100% + 8px);
    top: auto;
    left: 0;
  }
}

@media (max-width: 560px) {
  /* Pas la place pour un champ de recherche entre le logo et le compte */
  .top-content-bar .tcb-search { display: none; }
}

@media (max-width: 480px) {
  .sidebar-bottom .share-panel,
  .nav-profile-mobile .nav-profile-dropdown {
    width: 95vw;
    max-width: 280px;
  }
}

/* ════════════════════════════════════════════════════════════════
   MODALE CONNEXION / INSCRIPTION
════════════════════════════════════════════════════════════════ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.modal-content {
  background: #fff;
  padding: 32px 28px;
  border-radius: 14px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.15);
}
.modal-tabs {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 20px;
}
.modal-tab {
  flex: 1;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.modal-tab.active { color: #018ffa; border-bottom-color: #018ffa; }
.modal-tab:hover:not(.active) { color: #374151; }

.google-login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.2s, background 0.2s;
  margin-bottom: 20px;
  width: 100%;
}
.google-login-button img { width: 20px; height: 20px; }
.google-login-button:hover { background: #f8fafc; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.separator {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #94a3b8;
  font-size: 0.85rem;
  margin-bottom: 16px;
}
.separator::before, .separator::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }

.modal-content form { display: flex; flex-direction: column; gap: 10px; }
.modal-content label { font-size: 0.85rem; font-weight: 600; color: #374151; display: block; margin-bottom: 4px; }
.modal-content input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  color: #111827;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.modal-content input:focus { border-color: #018ffa; box-shadow: 0 0 0 3px rgba(1,143,250,0.12); }

.remember-me {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #4b5563;
  cursor: pointer;
  margin-bottom: 4px;
}
.remember-me input[type="checkbox"] {
  accent-color: #018ffa;
  width: 15px; height: 15px; margin: 0; flex-shrink: 0;
}
/* Neutralise le style global `.modal-content label` (display:block + marge) qui
   désalignait la case et le texte « Se souvenir de moi ». */
.remember-me label {
  display: inline; margin: 0; padding: 0; font-weight: 400;
  line-height: 1.2; color: inherit; font-size: inherit; cursor: pointer;
}

.forgot-password { text-align: right; }
.forgot-password a { font-size: 0.8rem; color: #018ffa; text-decoration: none; }
.forgot-password a:hover { text-decoration: underline; }

.submit-button {
  padding: 12px;
  background: #018ffa;
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 4px;
}
.submit-button:hover { background: #0075d1; }

.login-error-message {
  color: #dc2626;
  font-size: 0.85rem;
  margin-top: 10px;
  text-align: center;
}

/* ── Flash messages ──────────────────────────────────────────── */
.flash-container { margin-bottom: 16px; }
.flash-message {
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 8px;
}
.flash-message.success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.flash-message.warning { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.flash-message.error   { background: #fef2f2; border: 1px solid #fca5a5; color: #dc2626; }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes sbSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sbSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Curseur "chargement" pendant les navigations lourdes (module Stratégies :
   la page recalcule des backtests côté serveur) */
html.page-loading, html.page-loading * { cursor: progress !important; }

/* ── Interrupteur de thème (TCB) : lune en thème clair (propose le sombre),
   soleil en thème sombre (propose le clair). Icône seule, carrée. ─────────── */
.tcb-btn-theme { padding: 6px; }
.tcb-btn-theme svg { display: block; }
.tcb-btn-theme .ic-sun { display: none; }
.tcb-btn-theme .ic-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tcb-btn-theme .ic-moon { display: none; }
  :root:not([data-theme="light"]) .tcb-btn-theme .ic-sun  { display: block; }
}
:root[data-theme="dark"] .tcb-btn-theme .ic-moon { display: none; }
:root[data-theme="dark"] .tcb-btn-theme .ic-sun  { display: block; }

/* ---------------------------------------------------------------------------
   Tooltips ApexCharts - habillage piloté par les TOKENS (clair en thème clair,
   sombre en thème sombre) : par défaut la bulle reste blanche même en mode
   sombre, illisible. Placé ici (navbar.css chargé sur TOUTES les pages, y
   compris /admin qui ne charge pas base.css) pour couvrir tous les graphiques
   ApexCharts du site (dashboard admin, patrimoine, portefeuille opportunités,
   stratégies, ticker).
   --------------------------------------------------------------------------- */
.apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-tooltip.apexcharts-theme-dark {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--sh) !important;
}
.apexcharts-tooltip .apexcharts-tooltip-title {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.apexcharts-tooltip-text, .apexcharts-tooltip-text-y-label,
.apexcharts-tooltip-text-y-value, .apexcharts-tooltip-text-goals-label,
.apexcharts-tooltip-text-goals-value,
.apexcharts-tooltip-marker + span { color: var(--text) !important; }
.apexcharts-xaxistooltip, .apexcharts-yaxistooltip {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.apexcharts-xaxistooltip-bottom:after  { border-bottom-color: var(--surface) !important; }
.apexcharts-xaxistooltip-bottom:before { border-bottom-color: var(--border) !important; }
.apexcharts-xaxistooltip-top:after     { border-top-color: var(--surface) !important; }
.apexcharts-xaxistooltip-top:before    { border-top-color: var(--border) !important; }
.apexcharts-yaxistooltip-left:after    { border-left-color: var(--surface) !important; }
.apexcharts-yaxistooltip-left:before   { border-left-color: var(--border) !important; }

/* Entrée de menu INERTE : la place est tenue même quand la section est vide
   (le menu ne change pas de forme), mais rien n'est cliquable et l'infobulle
   explique comment la remplir. */
.sidebar-item--inerte {
  opacity: .45;
  cursor: default;
  pointer-events: auto;   /* l'infobulle title doit rester accessible */
}
.sidebar-item--inerte:hover { background: transparent; }

/* ════════════════════════════════════════════════════════════════
   TCB - boutons ICÔNE SEULE et cloche « Actions à faire »
════════════════════════════════════════════════════════════════ */
/* Sans libellé, le padding horizontal du .tcb-btn (12px, calibré sur du texte)
   donnait un rectangle large autour d'une icône de 16px : on le ramène à un
   carré, la zone de survol restant confortable (32×32). */
.tcb-btn-icone {
  padding: 8px;
  gap: 0;
  border-radius: 8px;
}

/* Cloche : lien, donc `display:flex` explicite (les .tcb-btn sont des <button>)
   et `position:relative` comme repère de la pastille. */
.tcb-notif {
  position: relative;
  text-decoration: none;
  color: var(--tcb-text);
}
/* Rien à traiter : l'icône s'efface d'un cran pour ne pas réclamer l'attention
   à vide, sans disparaître (le point d'entrée doit rester au même endroit). */
.tcb-notif-vide svg { opacity: 0.5; }

/* Pastille : ancrée au coin haut-droit de l'icône, elle DÉBORDE du bouton -
   d'où le décalage négatif. AMBRE : ni le teal des transmissions ni le rose des
   validations ni le vert des optimisations, puisqu'elle les totalise tous. */
.tcb-notif-pastille {
  position: absolute;
  /* 1 px vers l'intérieur du bouton : collée au coin, la pastille paraissait
     poussée vers la droite, le chiffre avec elle. Le glyphe, lui, est centré
     dans son disque à 0,05 px près (mesuré au pixel sur le rendu, chiffres 1 à
     12) - le décalage perçu venait du placement du disque, pas du chiffre. */
  top: 1px; right: 1px;
  /* Centrage du chiffre PAR CONSTRUCTION (2026-09-02, mesuré au pixel) :
     `text-box-trim` rogne la boîte de ligne à la hauteur de capitale (≈ 8 px à
     11 px), et un padding SYMÉTRIQUE de 3 px donne le disque de 14 px - plus de
     hauteur fixe. ⚠️ text-box-trim ne s'applique qu'aux CONTENEURS DE BLOC :
     l'ancien `display:grid; place-items:center` le rendait sans effet (le texte
     est un item anonyme) et l'encre montait de 0,5 à 0,8 px ; en bloc + padding
     3 px, le résidu tombe à +0,1 px. Deux chiffres = pilule (min-width 14).
     Repli pour les navigateurs sans text-box-trim : boîte de ligne fixée. */
  min-width: 14px; padding: 3px; box-sizing: border-box;
  display: block; text-align: center;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  border-radius: 999px;
  /* AMBRE --gold #FEB019, encre brun très foncé (contraste 7,9:1) : la pastille
     TOTALISE les trois compteurs, elle n'emprunte donc la teinte d'aucun d'eux
     (vert optimisations, teal transmissions, rose validations). L'ambre est
     par ailleurs la couleur de STATUT du site, ce qu'est exactement une cloche.
     Encre foncée et non blanche : sur un jaune aussi lumineux, le blanc tombe à
     1,8:1 - illisible. */
  background: var(--gold, #FEB019);
  /* Encre au MARINE de la barre (--tcb-bg-from) plutôt qu'au noir : le chiffre
     appartient ainsi à la palette de la barre au lieu d'y être posé. Contraste
     6,3:1 sur l'ambre - en retrait des 11,4:1 du noir, mais très au-dessus du
     seuil AA (4,5:1), et la graisse 800 compte autant que le rapport à cette
     taille. Le jeton suivant le thème, l'encre passe seule au marine nocturne
     #041a30 en thème sombre (8,4:1 sur l'ambre rabaissé). */
  color: var(--tcb-bg-from, #013a6b);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* Liseré à la couleur de la barre : détache la pastille de l'icône qu'elle
     recouvre partiellement, sans avoir à connaître le dégradé exact. */
  box-shadow: 0 0 0 1.5px var(--tcb-bg-to);
}
@supports not (text-box-trim: trim-both) {
  .tcb-notif-pastille { height: 14px; padding: 0 3px; line-height: 14px; }
}

/* Thème SOMBRE : l'ambre plein éblouit sur le marine profond de la barre de
   nuit (5,9:1 contre le fond) - un cran plus bas suffit à le poser sans lui
   ôter sa force d'appel. L'encre n'est PAS reprise ici : elle vaut
   var(--tcb-bg-from), jeton qui suit déjà le thème (#013a6b le jour,
   #041a30 la nuit). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tcb-notif-pastille { background: #f0a500; }
}
:root[data-theme="dark"] .tcb-notif-pastille { background: #f0a500; }


/* ════════════════════════════════════════════════════════════════
   CURSEUR D'ATTENTE - tant que la page n'est pas entièrement affichée
   `progress` et non `wait` : la page reste utilisable (on peut défiler,
   cliquer), elle finit seulement de se dessiner. Le sélecteur universel est
   nécessaire car chaque lien, bouton ou champ impose son propre curseur ;
   il ne s'applique que pendant le chargement, la classe étant retirée à
   `load`.
════════════════════════════════════════════════════════════════ */
html.tf-charge, html.tf-charge * { cursor: progress !important; }