/* Elevora CRM — css/navigation.css  [V18] 05/10/2026
   La barre latérale (document de Célian du 05/10/2026, §9 et §10) : une couleur douce par catégorie,
   les pages épinglées ou retirées, le menu « Plus », la barre réduite en icônes, le menu du profil.
   Comportement : js/02b-navigation.js. Les couleurs sont ici, et seulement ici : une catégorie de plus =
   deux jetons (couleur, fond) et une ligne de correspondance plus bas.

   Les couleurs aident l'œil, elles ne portent jamais seules le sens : le nom de la catégorie et l'icône
   de chaque page restent affichés. Le texte garde ses couleurs habituelles (contraste 4,5:1) ; la teinte
   ne touche que la pastille, les icônes et un fond très léger. Animations : CSS seulement, 180 ms, et
   aucune si l'appareil demande moins de mouvement (choix de Célian : pas de GSAP ici). */

/* ── Jetons : thème sombre (:root), puis thème clair (body.light) ─────────────────────────── */
:root{
  --sb-w:248px;
  --cat-pilotage:#8FA9D6;   --cat-pilotage-fond:rgba(143,169,214,.14);
  --cat-commercial:#7CC4A2; --cat-commercial-fond:rgba(124,196,162,.13);
  --cat-outils:#B3A5E0;     --cat-outils-fond:rgba(179,165,224,.14);
  --cat-compta:#E0B26E;     --cat-compta-fond:rgba(224,178,110,.13);
  --cat-admin:#A7B3C2;      --cat-admin-fond:rgba(167,179,194,.13);
}
body.light{
  --cat-pilotage:#4F6D9A;   --cat-pilotage-fond:#EEF2F8;
  --cat-commercial:#3C8565; --cat-commercial-fond:#E9F4EE;
  --cat-outils:#7563A8;     --cat-outils-fond:#F1EEF8;
  --cat-compta:#A8742A;     --cat-compta-fond:#FAF1E3;
  --cat-admin:#5B6878;      --cat-admin-fond:#EEF1F4;
}
/* Une catégorie inconnue (ajoutée demain sans jeton) prend le gris du menu. */
.nav-s,.nav-plus-menu,.tb-contexte{--cat:var(--text3);--cat-fond:var(--bg3)}
[data-group="pilotage"],#nav-body-pilotage,[data-cat="pilotage"]{--cat:var(--cat-pilotage);--cat-fond:var(--cat-pilotage-fond)}
[data-group="commercial"],#nav-body-commercial,[data-cat="commercial"]{--cat:var(--cat-commercial);--cat-fond:var(--cat-commercial-fond)}
[data-group="outils"],#nav-body-outils,[data-cat="outils"]{--cat:var(--cat-outils);--cat-fond:var(--cat-outils-fond)}
[data-group="compta"],#nav-body-compta,[data-cat="compta"]{--cat:var(--cat-compta);--cat-fond:var(--cat-compta-fond)}
[data-group="admin"],#nav-body-admin,[data-cat="admin"]{--cat:var(--cat-admin);--cat-fond:var(--cat-admin-fond)}

/* ── La barre : un peu plus large, réductible ─────────────────────────────────────────────── */
.sidebar{width:var(--sb-w);transition:width .18s ease}
.main{margin-left:var(--sb-w);transition:margin-left .18s ease}
.nav-retire{display:none!important}

.nav-cat-nom{display:inline-flex;align-items:center;gap:7px;min-width:0}
.nav-cat-point{width:7px;height:7px;border-radius:50%;background:var(--cat);flex-shrink:0}
.nav-group-body .nav-ic{color:var(--cat)}
.nav-group-body .nav-i.active{background:var(--cat-fond);color:var(--text);font-weight:600}
.nav-group-body .nav-i.active .nav-ic{color:var(--cat)}
.nav-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* « Plus » : l'allure d'une entrée du menu, avec sa flèche. */
.nav-plus{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;margin:0 0 2px;padding:7px 10px;border:0;border-radius:var(--r);background:none;color:var(--text2);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;transition:background .15s,color .15s}
.nav-plus:hover,.nav-plus[aria-expanded="true"]{background:var(--bg3);color:var(--text)}
.nav-plus.active{background:var(--glow);color:var(--accent);font-weight:500}
.nav-plus:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nav-plus-chev{margin-left:auto;color:var(--text3);flex-shrink:0}

/* Le bas de la barre : le seul bouton qui réduit ou agrandit. */
.sb-bot{padding:.5rem .75rem;border-top:1px solid var(--border)}
.sb-reduire{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:7px 10px;border:0;border-radius:var(--r);background:none;color:var(--text3);font:inherit;font-size:12.5px;cursor:pointer;transition:background .15s,color .15s}
.sb-reduire:hover{background:var(--bg3);color:var(--text)}
.sb-reduire:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sb-reduire svg{flex-shrink:0;transition:transform .18s ease}

/* Barre réduite (ordinateur seulement : le tiroir du téléphone reste entier). Les libellés sont
   cachés à l'œil, pas aux lecteurs d'écran ; une infobulle (js/02b) les montre au survol et au focus. */
body.sb-reduite{--sb-w:68px}
body.sb-reduite .sidebar .nav-txt,
body.sb-reduite .sidebar .logo-sub,
body.sb-reduite #sb-user > div:not(#sb-user-avatar){position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;margin:-1px!important;padding:0!important;border:0!important}
/* Barre réduite : le seul emblème du logo (la statue), découpé dans l'image entière. Les deux images
   (claire, sombre) n'ont pas les mêmes proportions : une découpe chacune, mesurée sur le fichier. */
body.sb-reduite .sidebar .logo{padding:.9rem 0 .55rem;overflow:hidden;display:block}
body.sb-reduite .sidebar .elv-logo-img{height:52px!important;width:auto!important;max-width:none;margin:-7px 0 -9px 14px;clip-path:inset(7px 144px 9px 2px)}
body.sb-reduite.light .sidebar .elv-logo-img{margin:-9px 0 -10px 14px;clip-path:inset(9px 129px 10px 3px)}
body.sb-reduite #sb-user{justify-content:center;padding:6px;margin:0 .6rem .6rem;width:calc(100% - 1.2rem)!important}
body.sb-reduite #sb-user > svg{display:none}
body.sb-reduite .nav-s{padding:.25rem .5rem}
body.sb-reduite .nav-group-header{justify-content:center;padding:.45rem 0;min-height:18px}
body.sb-reduite .nav-group-chev{display:none}
body.sb-reduite .nav-group-body.collapsed{max-height:600px;opacity:1;visibility:visible;pointer-events:auto;margin:initial}
body.sb-reduite .nav-i,body.sb-reduite .nav-plus,body.sb-reduite .sb-reduire{justify-content:center;padding:8px 0;position:relative}
body.sb-reduite .nav-plus-chev{display:none}
body.sb-reduite .nav-i .nav-b{position:absolute;top:2px;right:4px;margin:0;padding:0 4px;font-size:9px;line-height:14px}
body.sb-reduite .sb-reduire svg{transform:scaleX(-1)}

/* L'infobulle de la barre réduite et des épingles (js/02b) : posée sur le document, jamais rognée. */
.nav-infobulle{position:fixed;z-index:9600;pointer-events:none;background:var(--text);color:var(--bg);font-size:12px;font-weight:500;line-height:1.3;padding:5px 9px;border-radius:7px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.18)}

/* L'en-tête de la page : la pastille de sa catégorie, devant son nom. */
.tb-contexte[data-cat]::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cat);margin-right:6px;vertical-align:1px}

/* ── Le menu « Plus » ─────────────────────────────────────────────────────────────────────── */
.nav-plus-menu{position:fixed;z-index:9500;width:min(600px,calc(100vw - 24px));max-height:min(560px,calc(100vh - 24px));display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--border2);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.28);overflow:hidden;animation:navPlusEntree .16s ease-out}
.nav-plus-menu[hidden]{display:none}
@keyframes navPlusEntree{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.nav-plus-centre{left:50%!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%);animation:none}
.nav-plus-tete{display:flex;align-items:flex-start;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--border)}
.nav-plus-titre{font-size:14px;font-weight:700;margin:0;color:var(--text);white-space:nowrap}
.nav-plus-aide{flex:1;margin:0;font-size:12px;line-height:1.45;color:var(--text3)}
.nav-plus-fermer{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:8px;background:none;color:var(--text3);cursor:pointer;flex-shrink:0}
.nav-plus-fermer:hover{background:var(--bg3);color:var(--text)}
.nav-plus-cols{display:flex;min-height:min(300px,calc(100vh - 140px));flex:1}
.nav-plus-cats,.nav-plus-pages{list-style:none;margin:0;padding:8px;overflow-y:auto}
.nav-plus-cats{width:230px;flex-shrink:0;border-right:1px solid var(--border)}
.nav-plus-pages{flex:1}
.nav-plus-cat,.nav-plus-page{display:flex;align-items:center;gap:4px;border-radius:9px}
.nav-plus-cat.active{background:var(--cat-fond)}
.nav-plus-cat:hover:not(.active),.nav-plus-page:hover{background:var(--bg3)}
.nav-plus-cat-btn,.nav-plus-page-btn{flex:1;min-width:0;display:flex;align-items:center;gap:9px;min-height:38px;padding:7px 9px;border:0;background:none;color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer;border-radius:9px}
.nav-plus-cat-btn:focus-visible,.nav-plus-page-btn:focus-visible,.nav-plus-epingle:focus-visible,.nav-plus-fermer:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nav-plus-nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-plus-n{font-size:10.5px;color:var(--text3);font-family:var(--mono)}
.nav-plus-cat .nav-plus-chev{margin-left:0}
.nav-plus-pages .nav-ic{color:var(--cat);display:flex}
.nav-plus-page.ouverte .nav-plus-page-btn{font-weight:600}
/* L'épingle : visible quand la catégorie ou la page est épinglée ; sinon au survol ou au focus (et
   toujours sur un écran tactile, qui n'a pas de survol). */
.nav-plus-epingle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border:0;border-radius:8px;background:none;color:var(--text3);cursor:pointer;transition:opacity .15s,color .15s,background .15s}
.nav-plus-epingle:hover{background:var(--bg4);color:var(--text)}
.nav-plus-epingle.epinglee{color:var(--cat)}
.nav-plus-epingle.epinglee svg path:last-child{fill:currentColor}
.nav-plus-cat:not(:hover):not(:focus-within) .nav-plus-epingle:not(.epinglee),
.nav-plus-page:not(:hover):not(:focus-within) .nav-plus-epingle:not(.epinglee){opacity:0}
@media (hover:none){.nav-plus-cat .nav-plus-epingle,.nav-plus-page .nav-plus-epingle{opacity:1!important}}

/* Dans le tiroir du téléphone : un panneau sur toute la hauteur, catégories puis pages. */
.nav-plus-menu.nav-plus-tiroir{left:0!important;top:0!important;bottom:0;width:min(92vw,420px);max-height:none;border-radius:0 14px 14px 0;z-index:9700}
.nav-plus-tiroir .nav-plus-cols{flex-direction:column;overflow-y:auto}
.nav-plus-tiroir .nav-plus-cats{width:auto;border-right:0;border-bottom:1px solid var(--border);overflow:visible}
.nav-plus-tiroir .nav-plus-pages{overflow:visible}
.nav-plus-tiroir .nav-plus-cat-btn,.nav-plus-tiroir .nav-plus-page-btn{min-height:44px}
.nav-plus-tiroir .nav-plus-epingle{width:44px;height:44px}
/* Pas de barre réduite dans le tiroir : « Réduire » n'y a rien à faire. */
@media (max-width:900px){.nav-plus{min-height:44px}.sb-reduire{display:none}}
/* Téléphone : le menu du profil quitte la barre du haut (le titre garde sa place) ; « Déconnexion »
   passe en bas du tiroir, sous « Plus » (Mon menu) — la carte du profil, en haut, ouvre Mon profil. */
.sb-sortie-mob{display:none}
@media (max-width:560px){
  .topbar .tb-profil{display:none!important}
  .sb-sortie-mob{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;margin-top:8px;padding:0 12px;border:1px solid var(--border2);border-radius:8px;background:var(--bg2);color:var(--red);font:500 13px var(--font);cursor:pointer}
  .sb-sortie-mob:hover{background:var(--red-bg)}
  .sb-sortie-mob:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
}
@media (max-width:560px){.nav-plus-centre{width:calc(100vw - 16px)}.nav-plus-centre .nav-plus-cols{flex-direction:column;overflow-y:auto}.nav-plus-centre .nav-plus-cats{width:auto;border-right:0;border-bottom:1px solid var(--border);overflow:visible}}

/* ── Le menu du profil (barre du haut) ────────────────────────────────────────────────────── */
.tb-profil{position:relative}
.tb-profil[hidden]{display:none}
.tb-profil-btn{display:flex;align-items:center;gap:4px;height:40px;padding:0 6px 0 4px;border:1px solid var(--border2);border-radius:999px;background:var(--bg2);color:var(--text3);cursor:pointer;font:inherit}
.tb-profil-btn:hover,.tb-profil-btn[aria-expanded="true"]{background:var(--bg3);color:var(--text)}
.tb-profil-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tb-profil-av{width:30px;height:30px;border-radius:50%;background:var(--accent-fill);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background-size:cover;background-position:center;flex-shrink:0}
.tb-profil-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:9400;min-width:230px;padding:6px;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.22);animation:navPlusEntree .14s ease-out}
.tb-profil-menu[hidden]{display:none}
.tb-profil-nom{margin:0;padding:8px 10px 8px;font-size:12px;font-weight:600;color:var(--text3);border-bottom:1px solid var(--border);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-profil-menu [role="menuitem"]{display:flex;width:100%;min-height:44px;align-items:center;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.tb-profil-menu [role="menuitem"]:hover,.tb-profil-menu [role="menuitem"]:focus-visible{background:var(--bg3)}
.tb-profil-menu [role="menuitem"]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tb-profil-menu [role="menuitem"][hidden]{display:none}
.tb-profil-menu .tb-profil-sortie{color:var(--red)}

/* L'espace d'un agent commercial : ni « Plus », ni réduction (sa barre n'a que deux pages). */
body.espace-agent #nav-plus,body.espace-agent .sb-reduire{display:none!important}

@media (prefers-reduced-motion:reduce){
  .sidebar,.main,.sb-reduire svg,.nav-plus,.nav-plus-epingle{transition:none!important}
  .nav-plus-menu,.tb-profil-menu{animation:none!important}
}

/* ── [V19] 06/10/2026 : le mode présentation (js/00-presentation.js) ─────────────────────────────
   Un interrupteur à côté du thème ; en présentation, un bandeau discret en bas à gauche le dit et
   permet d'en sortir. La couleur ne porte jamais seule l'état : le texte du bandeau et aria-checked. */
.tb-presentation{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 10px;border:1px solid var(--border2);border-radius:999px;background:var(--bg2);color:var(--text2);font:inherit;font-size:12.5px;cursor:pointer;flex-shrink:0}
.tb-presentation:hover{background:var(--bg3);color:var(--text)}
.tb-presentation:focus-visible,.sb-presentation-mob:focus-visible,.presentation-quitter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tb-presentation-piste{position:relative;width:28px;height:16px;border-radius:999px;background:var(--bg4);border:1px solid var(--border2);flex-shrink:0}
.tb-presentation-piste::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--text3);transition:transform .15s ease}
[aria-checked="true"] > .tb-presentation-piste{background:var(--accent-fill);border-color:transparent}
[aria-checked="true"] > .tb-presentation-piste::after{transform:translateX(12px);background:var(--on-fill,#fff)}
.tb-presentation[aria-checked="true"]{color:var(--text);border-color:var(--accent)}
.sb-presentation-mob{display:none}
@media (max-width:1599px){.tb-presentation-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:560px){
  .topbar .tb-presentation{display:none}
  .sb-presentation-mob{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;margin-top:8px;padding:0 12px;border:1px solid var(--border2);border-radius:8px;background:var(--bg2);color:var(--text);font:500 13px var(--font);cursor:pointer}
  .sb-presentation-mob > span:first-of-type{flex:1;text-align:left}
}
.presentation-bandeau{position:fixed;right:16px;bottom:16px;z-index:9800;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:999px;background:var(--bg2);border:1px solid var(--accent);color:var(--text);font-size:12.5px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.presentation-point{width:8px;height:8px;border-radius:50%;background:var(--accent-fill);flex-shrink:0}
.presentation-quitter{min-height:32px;padding:0 12px;border:0;border-radius:999px;background:var(--accent-fill);color:var(--on-fill,#fff);font:inherit;font-weight:600;cursor:pointer}
@media (max-width:560px){.presentation-bandeau{left:8px;right:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px))}.presentation-quitter{min-height:44px}}
/* Le bandeau flotte : la fin de chaque page défile au-dessus de lui. Sur téléphone il se fait court (le
   bouton « Créer » flotte en bas à droite) ; « données fictives » reste lu par les lecteurs d'écran. */
body.presentation-active .content{padding-bottom:84px}
@media (max-width:560px){.presentation-detail{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .presentation-bandeau{padding:4px 4px 4px 12px;gap:8px}
  body.presentation-active .mob-creer{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){.tb-presentation-piste::after{transition:none}}

/* ── [V19] 06/10/2026 : audit responsive — la barre du haut entre 561 et 1180 px ──────────────────────
   Avec la barre latérale (248 px), le titre de la page tombait à une lettre (« A » pour Agents commerciaux,
   à 1024 px). La recherche se replie derrière la loupe, comme sur téléphone (js/71-mobile.js), et
   « Nouveau client » garde son icône (le nom reste lu par les lecteurs d'écran). Ouverte, la recherche prend
   la place du titre. */
@media (min-width:561px) and (max-width:1180px){
  .topbar .tb-recherche-btn{display:inline-flex}
  .topbar .tb-search{display:none}
  .topbar.recherche-ouverte .tb-search{display:flex;flex:1 1 auto;min-width:0}
  .topbar.recherche-ouverte .tb-titre{display:none}
  .topbar .tb-nouveau{padding:0 12px}
  .tb-nouveau-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}