/* ════════════════════════════════════════════════════════════════
   navigation-v1-colle.css — COLLE de la barre de navigation « direction 11 » dans l'app (tâche 11.112, lots N2 → N4 ; plan
   docs/plans/2026-10-30-navigation-11-112.md). Chaque règle est déclarée (outil/maquettes/navigation.mjs) et ne vaut que sous
   `html.nav-v2` (posée par js/navigation-app.js derrière l'interrupteur) : sans elle, rien ne change.
   La feuille de la maquette (navigation-v1.css, générée) dessine une page entière ; dans l'app, la barre du haut garde le conteneur
   `#mx-nav-app` (fixe, verre, hauteur, zones sûres) et ses nœuds VIVANTS (logo, cloches, compte), habillés aux valeurs de la maquette.
   ════════════════════════════════════════════════════════════════ */

/* ① conteneur de l'app gardé (verre, filet, hauteur, zone du haut, bordures d'encoche) ; la largeur et les marges sont celles de
   `.nv-top-in` (1376 px, 32 px) ; anciens onglets et boutons de l'app masqués (les cloches et le compte en sont sortis) */
html.nav-v2 nav:where(#mx-nav-app) { padding-left: 0; padding-right: 0; justify-content: flex-start; }
html.nav-v2 #mx-nav-app > .nav-links { display: none; }
/* ② racines `.nv` : jamais la hauteur d'une page entière (la maquette enveloppe la page) */
html.nav-v2 #nv-haut.nv { min-height: 0; flex: 1 1 auto; align-self: stretch; display: flex; min-width: 0; }
html.nav-v2 #nv-bas.nv { min-height: 0; }
/* ③ barres de la maquette DANS le conteneur : ni position collée, ni second verre, ni second filet (ceux de #mx-nav-app restent) */
html.nav-v2 #nv-haut .nv-top { position: static; height: 100%; flex: 1 1 auto; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }
html.nav-v2 #nv-haut .nv-mtop { flex: 1 1 auto; min-height: 0; height: 100%; border-bottom: 0; }
html.nav-v2 #nv-haut .nv-logo-slot { display: flex; align-items: center; min-width: 0; }
/* ④ cloches VIVANTES = entrées `.nv-i--u` de la maquette : 44 px sur téléphone, 40 px sur ordinateur, sans bordure, couleur atténuée */
html.nav-v2 #nv-haut .notif-bell-wrap, html.nav-v2 #nv-haut .nav-avatar-wrap { margin-left: 0; }
html.nav-v2 #nv-haut .notif-bell-btn.nv-i { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--mx-muted); }
html.nav-v2 #nv-haut .notif-bell-btn.nv-i:hover { color: var(--mx-ink); }
/* l'icône est celle de la maquette (24 px) : les règles « .notif-bell-btn svg » de l'app (16 / 15 / 14 px sur téléphone) ne s'appliquent pas */
html.nav-v2 #nv-haut .notif-bell-btn .nv-ic { width: 24px; height: 24px; }
@media (min-width: 1024px) {
  /* N6 (maquette du 30/10) : 38 px et icône de 20 px sur ordinateur */
  html.nav-v2 #nv-haut .notif-bell-btn.nv-i { width: 38px; height: 38px; min-height: 38px; }
  html.nav-v2 #nv-haut .notif-bell-btn.nv-i:hover { background: var(--mx-bg-2); }
  html.nav-v2 #nv-haut .notif-bell-btn .nv-ic { width: 20px; height: 20px; }
}
/* ⑤ pastilles VIVANTES (mêmes nœuds, mêmes rédacteurs) aux valeurs de `.nv-b--n` / `.nv-b--d` : l'ancienne règle `.notif-badge`
   (marges, police 9 px) ne s'ajoute pas ; le point des messages ne montre pas de chiffre (lu par le nom de la cloche) */
html.nav-v2 #nv-haut .notif-badge.nv-b--n { padding: 0 4px; font-size: 10.5px; line-height: 1; }
html.nav-v2 #nv-haut .notif-badge.nv-b--d { padding: 0; min-width: 0; font-size: 0; color: transparent; }
@media (min-width: 1024px) { html.nav-v2 #nv-haut .notif-badge.nv-b--n { font-size: 10px; } }   /* N6 : 10 px sur ordinateur */
/* ⑥ compte VIVANT (photo ou initiales posées par updateAvatarDisplay) = `.nv-avc` de la maquette : rond encre de 32 px dans 40 / 44 px */
html.nav-v2 #nv-haut #nav-avatar-btn { width: 32px; height: 32px; margin: 6px; border-radius: 50%; background: var(--mx-ink); color: var(--mx-on-ink); font-size: 11.5px; font-weight: var(--mx-fw-bold); letter-spacing: 0; overflow: visible; }
html.nav-v2 #nv-haut #nav-avatar-btn:hover, html.nav-v2 #nv-haut #nav-avatar-btn[aria-expanded="true"] { transform: none; box-shadow: 0 0 0 2px var(--mx-bg), 0 0 0 4px var(--mx-line-ui); }
@media (min-width: 1024px) { html.nav-v2 #nv-haut #nav-avatar-btn { width: 34px; height: 34px; margin: 4px; font-size: 12px; } }   /* N6 : 34 px dans 42 */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) { html.nav-v2 #nv-haut #nav-avatar-btn:hover { transform: scale(1.05); } }
/* ⑦ pilule = la barre du bas de l'app réaffectée : au-dessus du contenu comme avant (coach 9998, client 900 : sous le détail d'une
   séance et la séance live) ; la page garde sous son contenu la place de la pilule (12 + 60 + 12 px et la zone du bas) */
html.nav-v2 #nv-bas #mx-bbar.nv-bot { z-index: 9998; }
html.nav-v2 #nv-bas #ca-bottom-nav.nv-bot { z-index: 900; }
@media (max-width: 1023.98px) {
  html.nav-v2 body.mx-has-bbar, html.nav-v2 body:has(#nv-bas #ca-bottom-nav:not([style*="display: none"])) { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
html.nav-v2 body.in-live-session #nv-bas { display: none; }
@media print { html.nav-v2 #nv-bas { display: none; } }
/* ⑧ menu du compte VIVANT (#avatar-dropdown : entrées et conditions d'updateNav inchangées, plan § 2.4) aux valeurs de `.nv-menu`
   de la maquette — seul le style vient d'elle (CTO 28/10) : 15rem, marge 6 px, rayon 12, entrées de 40 px (44 sur téléphone), 14 px */
html.nav-v2 #nv-haut .avatar-dropdown { top: calc(100% + 8px); min-width: 15rem; padding: 6px; border: 1px solid var(--mx-line); border-radius: 12px; background: var(--mx-surface); box-shadow: var(--mx-e-3); overflow: visible; }
html.nav-v2 #nv-haut .avatar-dropdown.open { display: flex; flex-direction: column; animation: nvIn 180ms cubic-bezier(.2, .8, .2, 1); }
html.nav-v2 #nv-haut .avatar-dropdown-header { padding: 8px 10px; }
html.nav-v2 #nv-haut .avatar-dropdown-name { font-size: 14px; }
html.nav-v2 #nv-haut .avatar-dropdown-item { min-height: 40px; padding: 0 10px; gap: 10px; border-radius: 8px; font-size: 14px; color: var(--mx-ink); }
html.nav-v2 #nv-haut .avatar-dropdown-item:hover { background: var(--mx-bg-2); color: var(--mx-ink); }
html.nav-v2 #nv-haut .avatar-dropdown-divider { margin: 4px 0; background: var(--mx-line); }
@media (max-width: 767.98px) { html.nav-v2 #nv-haut .avatar-dropdown-item { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { html.nav-v2 #nv-haut .avatar-dropdown.open { animation: none; } }
/* ⑨ « Bibliothèque » du menu du compte (coach, nouvelle barre) : seulement sous 1024 px — l'ordinateur l'a dans ses onglets */
@media (min-width: 1024px) { html.nav-v2 #dd-bibliotheque { display: none !important; } }
/* ⑩ N6 (maquette du 30/10, ordinateur) : barre de 46 px au lieu de 52 — le conteneur gardé (#mx-nav-app, zone sûre du haut comprise),
   la réserve des pages, --mx-nav-h et les éléments collés sous la barre suivent (bloc 11.113 de marx.css, mêmes formules) */
@media (min-width: 1024px) {
  html.nav-v2 { --mx-nav-h: calc(46px + var(--mx-zs-haut)); }
  html.nav-v2 nav:where(#mx-nav-app) { height: calc(46px + var(--mx-zs-haut)); }
  html.nav-v2 .page { padding-top: calc(46px + var(--mx-zs-haut)); }
  html.nav-v2 :is(.results-aside, .prog-pills-nav, .pp-edit-bar, .ca-session-detail) { top: calc(46px + var(--mx-zs-haut)); }
  html.nav-v2 .results-aside { height: calc(100vh - 46px - var(--mx-zs-haut)); }
}

/* ⑭ CTO 07/11 (« barre : go » de Mathis) — pilule du téléphone : la pastille de l'onglet actif est un fond à part (.nv-pastille,
   posé et animé par le contrôleur : transform seulement) sous les entrées ; l'entrée active n'a plus son propre fond ; le libellé
   paraît en FONDU (opacity) au lieu de la largeur animée de la feuille ; rien avec « réduire les animations » (règle de la feuille) */
#nv-bas .nv-bot--pill .nv-pastille { position: absolute; left: 0; top: 0; border-radius: 999px; background: var(--mx-ink); transform-origin: left center; pointer-events: none; z-index: 0; }
#nv-bas .nv-bot--pill .nv-i { position: relative; z-index: 1; }
#nv-bas.nv--d2 .nv-bot--pill.nv-pastille-on .nv-i[aria-current] { background: transparent; }
@media (prefers-reduced-motion: no-preference) {
  #nv-bas.nv--d2 .nv-bot--pill .nv-i[aria-current] .nv-l { animation: nvFondu 220ms cubic-bezier(0.4, 0, 0.2, 1) both; }
}
@keyframes nvFondu { from { opacity: 0; } to { opacity: 1; } }

/* ⑮ CTO 06/11 23 h 55 ② (app installée d'iPhone) : la pilule se posait à 12 px AU-DESSUS de la zone du bas (12 px + zone, la
   maquette dessinée sans zone sûre) — 46 px vides sous elle sur un iPhone à 34 px de zone. Elle se pose sur la zone du bas, une
   seule fois (comme une barre d'iOS) ; sans zone sûre (ordinateur, navigateur), 12 px comme la maquette */
#nv-bas .nv-bot--pill { bottom: max(12px, env(safe-area-inset-bottom, 0px)); }

/* ⑯ D-042 (CTO 07/11 : P2) — très petit écran (moins de 240 px de large : un iPhone agrandi à 200 %, 195 px) : rien ne sort de
   l'écran. Barre du haut : logo réduit, marges serrées, avatar à 4 px de la cloche (au lieu de 20 : leurs zones de 46 px restent
   séparées, centres à 48 px) ; pilule : posée à 4 px des bords, onglets à parts égales, libellé de l'onglet actif dit aux lecteurs
   d'écran seulement (comme les entrées de la barre du haut) — dessin inchangé au-delà de 240 px */
@media (max-width: 239.98px) {
  html.nav-v2 #nv-haut .nv-mtop { padding-left: 8px; gap: 4px; }
  html.nav-v2 #nv-haut .nv-mtop-u { gap: 0; }
  html.nav-v2 #mx-nav-app #nav-avatar-wrap { margin-left: 4px; }
  html.nav-v2 #nv-haut .nv-logo-slot .logo { font-size: 11px; letter-spacing: 1px; }
  html.nav-v2 #nv-bas .nv-bot--pill { left: 4px; right: 4px; padding: 4px; }
  html.nav-v2 #nv-bas .nv-bot--pill .nv-i { min-width: 0; flex: 1 1 0; }
  html.nav-v2 #nv-bas .nv-bot--pill .nv-i .nv-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}