/* ==========================================================================
   Sidebar v2 — overrides à charger APRÈS main.css
   Activée par la classe `.snav--v2` sur l'aside racine.
   N'altère pas l'ancien rendu si .snav--v2 absent.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --snavv2-navy:#0f4c5c;
  --snavv2-navy-2:#1c6a78;
  --snavv2-teal:#1a7f73;
  --snavv2-teal-2:#16685f;
  --snavv2-teal-soft:rgba(26,127,115,.10);
  --snavv2-amber-soft:rgba(217,142,43,.14);
  --snavv2-red-soft:rgba(217,75,99,.10);
  --snavv2-green-soft:rgba(47,158,111,.12);
  --snavv2-bg:#f7f8fa;
  --snavv2-text:#123840;
  --snavv2-text-2:#355058;
  --snavv2-muted:rgba(18,56,64,.62);
  --snavv2-muted-2:rgba(18,56,64,.42);
  --snavv2-line:rgba(18,56,64,.10);
  --snavv2-side-w:248px;
  --snavv2-side-w-collapsed:60px;
  /* motif 44 v2 (2026-05-03) — topbar height augmenté à 80px pour
     accommoder le logo agrandi (texte plus lisible). Avant : 56px. */
  --snavv2-tb-h:56px;
  --snavv2-font:"Manrope","Avenir Next","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --snavv2-mono:"JetBrains Mono",ui-monospace,monospace;
}

/* ============================================================
   Sprint BS+1 motif 30 (2026-05-02) — Layout v2 unification
   Quand la topbar v2 ou la sidebar v2 sont actives, on override
   les variables `--topbar-height` (108px legacy) et `--sidebar-width`
   (208px legacy) pour que `.layout` recalcule correctement
   `min-height: 100vh - 80px` et `grid-template-columns: 248px 1fr`.
   Sans ça, les pages "shared" (dashboard, prospects, etc.) gaspillent
   52px en bas et coupent 40px à droite par rapport à la sidebar v2.
   ============================================================ */
:root:has(.topbar--v2){
  --topbar-height:56px;
}
:root:has(.snav--v2){
  --sidebar-width:248px;
}
body.sidebar-collapsed:has(.snav--v2){
  --sidebar-width:60px;
}

/* Sidebar : override du padding legacy (14px) — items doivent
   s'étendre jusqu'au bord. */
.snav--v2.sidebar{padding:0 !important;}
.snav--v2 .snav{padding:8px;display:flex;flex-direction:column;gap:1px;}
.snav--v2 .snav__topline{display:none;}

/* Main : recalculer la hauteur restante par rapport au topbar 56px */
:has(.topbar--v2) .layout{min-height:calc(100vh - 56px);}
:has(.topbar--v2) .main{
  min-height:calc(100vh - 56px);
  /* Padding harmonisé avec exploitant-create-v2 (custom Chrome) :
     les pages legacy avaient `2px 5px 14px` (pad inline minuscule) qui
     collait le contenu aux bords. La fiche v2 a `18px 22px 40px` qui
     donne du souffle. On aligne tout sur la version v2. */
  padding:18px 22px 40px !important;
}

/* ============ TOPBAR v2 ============ */
.topbar.topbar--v2{
  position:sticky;top:0;z-index:30;
  height:var(--snavv2-tb-h);
  background:linear-gradient(90deg,var(--snavv2-navy),var(--snavv2-navy-2)) !important;
  color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
  font-family:var(--snavv2-font);
}
/* Brand (logo + nom) — harmonisé sur 36px */
.topbar--v2 .brand,
.topbar--v2 .topbar__brand{
  display:flex;align-items:center;gap:10px;
  color:#fff;text-decoration:none;flex:0 0 auto;
  min-width:0;
}
/* Sprint BS+1 motif 51 v2 (2026-05-04) — refonte affichage brand.
   Avant : image horizontale unique `elysiom-logo-horizontal.png` qui contenait
   à la fois le SYMBOLE et le texte "ELYSIOM FINANCE / FINANCEMENT OUTRE-MER"
   incrustés. Réduire l'image entière réduisait aussi le texte (illisible).
   Après : on découple :
     1) le SYMBOLE est rendu via un pseudo-élément `::before` sur `.brand`
        avec background-image = `elysiom-logo.png` (image quasi-carrée dont
        80% du haut est le symbole, le reste un texte minuscule qu'on rogne
        via `background-size` + `background-position: top`).
     2) le TEXTE est rendu via `.brand__text` (déjà présent dans header.html)
        à sa taille originale (15.5px / 12px) via `.brand__name` /
        `.brand__tagline` (cf. plus bas).
   Bénéfice : le symbole peut être réduit (-20% par rapport au logo v1 :
   64px → 51px) sans toucher à la lisibilité du wordmark.
   Le texte a sa taille indépendante du symbole. */
.topbar--v2 .brand img:not(.brand__logo-layer):not(.brand__logo-v2),
.topbar--v2 .topbar__brand img,
.topbar--v2 .brand__logo,
.topbar--v2 .brand-logo,
.topbar--v2 .topbar__logo,
.topbar--v2 .brand__logo-v2{
  display:none !important;
}
/* Motif 51 v4 (2026-05-05) — split logo en 2 images séparées :
   1) symbole (elysiom-logo-symbol-only.png) — petit, hauteur 36px
   2) texte   (elysiom-logo-text-only.png)   — plus gros, hauteur 44px
   Permet d'agrandir le wordmark sans grossir le symbole. */
.topbar--v2 .brand__logo-split{
  position:static !important;
  display:flex !important;
  align-items:center;
  gap:10px;
  width:auto !important;
  height:auto !important;
  flex:0 0 auto;
}
.topbar--v2 .brand__logo-split .brand__logo-layer{
  position:static !important;
  inset:auto !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:none;
  clip-path:none !important;
  transform:none !important;
  object-fit:contain;
  flex:0 0 auto;
}
.topbar--v2 .brand__logo-split .brand__logo-layer--symbol{
  height:36px !important;
  max-height:calc(var(--snavv2-tb-h, 56px) - 14px);
  width:auto !important;
}
.topbar--v2 .brand__logo-split .brand__logo-layer--wordmark{
  height:26px !important; /* 40% smaller (was 44px) */
  max-height:calc(var(--snavv2-tb-h, 56px) - 14px);
  width:auto !important;
}

/* Symbole seul, calibré pour ne montrer QUE la portion symbole (top ~75%)
   de `elysiom-logo.png` (1280x1024, ratio 1.25). Le bas (texte minuscule
   "ELYSIOM FINANCE / FINANCEMENT OUTRE-MER" baked-in) est rogné par
   l'écart entre la taille du conteneur (51px de haut) et celle de l'image
   d'arrière-plan calibrée à 68px de haut (~75% du visible) via
   `background-size: auto 68px` + `background-position: center top`.
   Conteneur 60px de large : centré, déborde de l'image (qui rendra 85px
   de large à 68px de haut, ratio 1.25), donc on voit le symbole entier
   horizontalement.
   `aria-label` sur `.brand` (déjà dans header.html) couvre l'accessibilité. */
.topbar--v2 .brand::before{
  display:none !important; /* motif 51 v3 — replaced by .brand__logo-v2 horizontal image */
}

/* Force l'affichage de `.brand__text` même quand `.brand--image` n'a pas
   `.brand--fallback` (la règle `main.css:230` masque sinon). */
.topbar--v2 .brand__text,
.topbar--v2 .brand.brand--image:not(.brand--fallback) .brand__text,
.topbar--v2 .topbar__brand-text{
  display:none !important; /* motif 51 v3 — text baked in horizontal logo image */
}
/* Sprint BS+1 motif 36 (2026-05-03) — agrandissement du texte brand
   tout en gardant le rendu net (font-smoothing + line-height confortable). */
.topbar--v2 .brand__name,
.topbar--v2 .topbar__brand-name{
  font-size:13px;font-weight:800;color:#fff;
  letter-spacing:-.005em;line-height:1.15;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  text-shadow:none;
}
.topbar--v2 .brand__tagline,
.topbar--v2 .topbar__brand-tagline{
  font-size:10.5px;font-weight:600;color:rgba(255,255,255,.94);
  letter-spacing:.005em;line-height:1.2;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Centrage search — absolu sur la fenêtre, pas sur le flex container */
.topbar--v2 .topbar__center{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  display:flex;justify-content:center;align-items:center;
  width:min(420px,40vw);
  padding:0;
  pointer-events:none;
}
.topbar--v2 .topbar__center > *{pointer-events:auto;}

/* Cache le "Bonjour Amine !" (#userGreeting / .topbar__greeting) dans la topbar v2 */
.topbar--v2 .hello,
.topbar--v2 #userGreeting,
.topbar--v2 .topbar__greeting,
.topbar--v2 .topbar__hello{display:none !important;}
.topbar--v2 .topbar__search{
  display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);border-radius:8px;
  color:rgba(255,255,255,.78);font-size:12px;cursor:pointer;
  width:100%;max-width:420px;font-family:inherit;
  transition:background .12s,border-color .12s;
}
.topbar--v2 .topbar__search:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);}
.topbar--v2 .topbar__search-lbl{flex:1;text-align:left;}
.topbar--v2 .topbar__search kbd{
  font-family:var(--snavv2-mono);font-size:10px;
  background:rgba(255,255,255,.10);padding:1px 6px;border-radius:4px;
  border:1px solid rgba(255,255,255,.14);color:#fff;
}
.topbar--v2 .topbar__iconbtn{
  height:32px;width:32px;border-radius:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;
  display:grid;place-items:center;cursor:pointer;position:relative;
}
.topbar--v2 .topbar__iconbtn:hover{background:rgba(255,255,255,.18);}
.topbar--v2 .topbar__iconbtn-dot{
  position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:999px;background:#ff7a87;
  box-shadow:0 0 0 2px var(--snavv2-navy);
}
/* motif 103g2 (2026-05-15) — Menu dropdown profil dans la sidebar. */
.snav--v2 .snav__profile-wrap{ position:relative; }
.snav--v2 .snav__profile[aria-expanded="true"] .snav__profile-chev svg{
  transform: rotate(180deg);
  transition: transform .15s ease;
}
.snav--v2 .snav__profile-chev svg{ transition: transform .15s ease; }
.snav--v2 .snav__profile-menu{
  position:absolute;
  top: calc(100% + 6px);
  left: 8px;
  right: 8px;
  z-index: 1000;
  background: #fff;
  border: 1px solid rgba(11,27,58,.10);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(9,20,41,.18), 0 2px 6px rgba(9,20,41,.08);
  padding: 4px 0;
  font-size: 13px;
  color: var(--snavv2-navy, #0b1b3a);
  animation: snavProfileMenuIn .12s ease;
}
@keyframes snavProfileMenuIn{
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.snav--v2 .snav__profile-menu[hidden]{ display: none; }
.snav--v2 .snav__profile-menu-head{
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.snav--v2 .snav__profile-menu-name{ font-weight: 800; color: var(--snavv2-navy, #0b1b3a); font-size: 13px; }
.snav--v2 .snav__profile-menu-role{ font-size: 11px; color: rgba(11,27,58,.6); font-weight: 600; }
.snav--v2 .snav__profile-menu-email{ font-size: 11px; color: rgba(11,27,58,.55); font-weight: 500; word-break: break-all; }
.snav--v2 .snav__profile-menu-sep{
  height: 1px;
  background: rgba(11,27,58,.08);
  margin: 4px 0;
}
.snav--v2 .snav__profile-menu-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--snavv2-navy, #0b1b3a);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  transition: background .12s ease;
}
.snav--v2 .snav__profile-menu-item:hover,
.snav--v2 .snav__profile-menu-item:focus-visible{
  background: rgba(26,127,115,.08);
  outline: none;
}
.snav--v2 .snav__profile-menu-ico{
  width: 18px;
  text-align: center;
  flex: 0 0 auto;
  font-size: 14px;
}
.snav--v2 .snav__profile-menu-logout{
  color: #b3261e;
}
.snav--v2 .snav__profile-menu-logout:hover{
  background: rgba(179,38,30,.08);
}

/* motif 103g0 (2026-05-15) — Pastille numérique pour le badge unread.
   motif 103g1 (2026-05-15) — Repositionnée en bas-droite (déborde
   légèrement du bouton) et taille réduite pour ne plus masquer le SVG cloche. */
.topbar--v2 .topbar__iconbtn-dot.has-count{
  top:auto;
  bottom:-3px;right:-3px;
  width:auto;height:14px;min-width:14px;
  padding:0 4px;
  border-radius:999px;
  background:#ff4d5e;
  color:#fff;
  font-size:9px;
  font-weight:800;
  line-height:14px;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 1.5px var(--snavv2-navy);
  letter-spacing:.02em;
}
.topbar--v2 .topbar__quicklinks{gap:14px;}
.topbar--v2 .topbar__quicklink{font-size:12px;color:rgba(255,255,255,.78);}
.topbar--v2 .topbar__quicklink:hover{color:#fff;}

/* Pictos handoff (motif 28) — messages + outils dans le right block */
.topbar--v2 .topbar__icons{
  display:flex;align-items:center;gap:8px;
}
.topbar--v2 .topbar__right{display:flex;align-items:center;gap:12px;}

/* ============ SIDEBAR v2 ============ */
.snav--v2{
  background:var(--snavv2-bg) !important;
  border-right:1px solid var(--snavv2-line);
  color:var(--snavv2-text);
  font-family:var(--snavv2-font);
  font-size:13px;
  display:flex;flex-direction:column;
}

/* Bloc profil */
.snav--v2 .snav__profile-wrap{padding:8px 8px 4px;border-bottom:1px solid var(--snavv2-line);}
.snav--v2 .snav__profile{
  width:100%;display:flex;align-items:center;gap:9px;padding:6px 8px;border:0;background:transparent;
  border-radius:7px;cursor:pointer;text-align:left;color:inherit;font-family:inherit;
  transition:background .15s;
}
.snav--v2 .snav__profile:hover{background:rgba(18,56,64,.05);}
.snav--v2 .snav__profile-ava{
  width:26px;height:26px;border-radius:6px;
  background:linear-gradient(135deg,var(--snavv2-navy),var(--snavv2-teal));
  color:#fff !important;font-weight:800;font-size:10.5px;
  display:grid;place-items:center;flex:0 0 auto;
  -webkit-font-smoothing:antialiased;
}
.snav--v2 .snav__profile-txt{flex:1;min-width:0;display:flex;flex-direction:column;}
/* Contraste fort sur fond clair — était parfois rendu en blanc/clair par main.css */
.snav--v2 .snav__profile-name{
  font-size:12.5px;font-weight:800;line-height:1.2;letter-spacing:-.005em;
  color:var(--snavv2-text) !important;
  -webkit-font-smoothing:antialiased;
}
.snav--v2 .snav__profile-role{
  font-size:10.5px;color:var(--snavv2-muted) !important;font-weight:600;margin-top:2px;
}
.snav--v2 .snav__profile-chev{color:var(--snavv2-muted-2);}

.snav--v2 .snav__search{
  margin-top:4px;width:100%;height:28px;padding:0 9px;border:0;
  background:transparent;color:var(--snavv2-muted);font-size:12px;font-weight:500;
  display:flex;align-items:center;gap:8px;cursor:pointer;border-radius:6px;font-family:inherit;
}
.snav--v2 .snav__search:hover{background:rgba(18,56,64,.06);color:var(--snavv2-text);}
.snav--v2 .snav__search-lbl{flex:1;text-align:left;}
.snav--v2 .snav__search kbd{
  font-family:var(--snavv2-mono);font-size:9.5px;background:rgba(18,56,64,.07);
  padding:1px 5px;border-radius:3px;color:var(--snavv2-muted);
}

/* Section header */
.snav--v2 .snav__section{margin-top:6px;}
.snav--v2 .snav__section:first-of-type{margin-top:0;padding-top:2px;}
.snav--v2 .snav__section-h{
  padding:6px 12px 3px;font-size:10.5px;color:var(--snavv2-muted-2);
  font-weight:700;letter-spacing:.02em;
}
/* Réduit l'écart profil/search ↔ premier item */
.snav--v2 .snav__profile-wrap + .snav__section,
.snav--v2 .snav__profile-wrap + .snav__nav,
.snav--v2 .snav__profile-wrap + ul,
.snav--v2 .snav__profile-wrap + nav{margin-top:2px;}

/* Items — neutralise le hover rouge de main.css */
.snav--v2 .snav__item,
.snav--v2 .snav__summaryLink{
  color:var(--snavv2-text-2) !important;
  background:transparent !important;
  font-weight:500;
  border-radius:6px;
  min-height:30px;padding:5px 8px;
  position:relative;
}
.snav--v2 .snav__item:hover,
.snav--v2 .snav__summaryLink:hover{
  background:rgba(18,56,64,.05) !important;color:var(--snavv2-text) !important;
}
.snav--v2 .snav__icon{color:var(--snavv2-muted);}
.snav--v2 .snav__icon svg{stroke-width:1.7;}

/* Active state — barre teal au lieu du fond rouge */
.snav--v2 .snav__item.is-active,
.snav--v2 .snav__summaryLink.is-active{
  background:rgba(18,56,64,.08) !important;color:var(--snavv2-text) !important;font-weight:700;
}
.snav--v2 .snav__item.is-active::before,
.snav--v2 .snav__summaryLink.is-active::before{
  content:"";position:absolute;left:-2px;top:7px;bottom:7px;width:3px;
  background:var(--snavv2-teal);border-radius:2px;
}
.snav--v2 .snav__item.is-active .snav__icon,
.snav--v2 .snav__summaryLink.is-active .snav__icon{color:var(--snavv2-teal);}
.snav--v2 .snav__group[open] > summary .snav__summaryLink,
.snav--v2 .snav__group.is-active-branch > summary .snav__summaryLink{
  color:var(--snavv2-text) !important;font-weight:700;
}

/* Sub-items */
.snav--v2 .snav__sub{
  color:var(--snavv2-muted);font-size:12.25px;font-weight:500;
  padding:4px 8px 4px 36px;min-height:26px;
  background:transparent !important;
}
.snav--v2 .snav__sub:hover{color:var(--snavv2-text) !important;background:rgba(18,56,64,.05) !important;}
.snav--v2 .snav__sub.is-active{color:var(--snavv2-teal-2) !important;font-weight:700;background:transparent !important;}

.snav--v2 .snav__sub--heading{
  color:var(--snavv2-muted-2);font-size:10px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;padding-top:8px;cursor:default;
}
.snav--v2 .snav__sub--level2{padding-left:48px;font-size:11.75px;}
.snav--v2 .snav__sub--level2::before{
  content:"";position:absolute;left:36px;top:50%;width:6px;height:1px;background:var(--snavv2-line);
}

/* Counts & badges (alignés à droite) */
.snav--v2 .snav__count{
  margin-left:auto;font-size:10px;font-weight:600;color:var(--snavv2-muted-2);
  font-family:var(--snavv2-mono);
}
.snav--v2 .snav__badge{
  margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:17px;padding:0 6px;border-radius:5px;
  font-size:9.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;
  background:rgba(18,56,64,.08);color:var(--snavv2-muted);
}
.snav--v2 .snav__badge--amber{background:var(--snavv2-amber-soft);color:#8a5a10;}
.snav--v2 .snav__badge--red  {background:var(--snavv2-red-soft);color:#9b2334;}
.snav--v2 .snav__badge--green{background:var(--snavv2-green-soft);color:#166e4c;}
.snav--v2 .snav__badge--teal {background:var(--snavv2-teal-soft);color:var(--snavv2-teal-2);}

/* Footer */
.snav--v2 + .sidebar__footer,
.snav--v2 .sidebar__footer{
  border-top:1px solid var(--snavv2-line);background:transparent;
  color:var(--snavv2-muted);
}
.snav--v2 .muted-on-navy,
.snav--v2 ~ .sidebar__footer .muted-on-navy{color:var(--snavv2-muted) !important;}

/* Tooltip collapsed (override couleur pour fond clair) */
body.sidebar-collapsed .snav--v2 .snav__tip:hover::after{
  background:var(--snavv2-navy) !important;color:#fff !important;
}

/* Footer brand line — version handoff (uniquement le numéro de version) */
.snav--v2 ~ .sidebar__footer,
.snav--v2 .sidebar__footer{
  padding:8px 14px;font-size:10.5px;
  display:flex;justify-content:flex-end;align-items:center;
  font-family:var(--snavv2-mono);
  color:var(--snavv2-muted-2);
}

/* Avatar pill admin (à droite de la topbar v2) */
.topbar--v2 .avatar-pill,
.topbar--v2 .topbar__user{
  height:30px;padding:0 4px 0 10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  display:flex;align-items:center;gap:6px;
  font-weight:700;font-size:11px;color:#fff;
}
.topbar--v2 .avatar-pill .ava,
.topbar--v2 .topbar__initials{
  height:22px;width:22px;border-radius:999px;
  background:#fff;color:var(--snavv2-navy);
  font-weight:800;font-size:10px;
  display:grid;place-items:center;
}


/* ============================================================
   public-entry-split-mutualized (motif 64 — 2026-05-05)
   Étend la structure split logo aux pages publiques (login, signup
   prospect/cgp, password reset…) qui ont la classe topbar--brand-v2
   sans topbar--v2. Override main.css legacy qui montre brand__logo-v2.
   Wordmark à 26px (-40% vs 44px) — cohérent avec les pages auth.
   ============================================================ */
.topbar--brand-v2 .brand__logo-v2{ display:none !important; }
.topbar--brand-v2 .brand__logo-split{
  position:static !important;
  display:flex !important;
  align-items:center;
  gap:8px;
  width:auto !important;
  height:auto !important;
  flex:0 0 auto;
}
.topbar--brand-v2 .brand__logo-split .brand__logo-layer{
  position:static !important;
  inset:auto !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:none;
  clip-path:none !important;
  transform:none !important;
  object-fit:contain;
  flex:0 0 auto;
}
.topbar--brand-v2 .brand__logo-split .brand__logo-layer--symbol{
  height:36px !important;
  width:auto !important;
}
.topbar--brand-v2 .brand__logo-split .brand__logo-layer--wordmark{
  height:26px !important;
  width:auto !important;
}
.topbar--brand-v2 .brand__text{ display:none !important; }