/* ============================================================================
   BIBLIOTHEQUE UI JABS  -  nav.css
   Depend de : theme.css, buttons.css

   La navigation repond a trois questions, toujours dans cet ordre :
   ou suis-je, ou puis-je aller, comment je reviens.
   Regle tenue partout : la position courante porte aria-current, et elle se
   distingue autrement que par la couleur seule (fond, trait, ou graisse).
   ========================================================================= */

/* ===========================================================================
   FAMILLE A  -  BARRES ET EN-TETES
   ======================================================================== */

/* @v NAV-A1
@nom En-tete de site
@usage Site vitrine : logo a gauche, liens au centre, action a droite. Le menu se replie en tiroir sous 860 px.
@html
<header class="nav-tete">
  <a href="#" class="nav-tete__logo">JABS<span>.</span></a>
  <nav class="nav-tete__liens">
    <a href="#" aria-current="page">Accueil</a>
    <a href="#">Prestations</a>
    <a href="#">Realisations</a>
    <a href="#">Contact</a>
  </nav>
  <a href="tel:+33612345678" class="btn btn--plein">{{icon:phone}} 06 12 34 56 78</a>
  <button class="btn btn--icone btn--fantome nav-tete__burger" aria-label="Ouvrir le menu" aria-expanded="false">{{icon:liste}}</button>
</header>
@tw flex items-center gap-6 border-b bg-white px-5 py-3 max-md:[&>nav]:hidden
@end */
.nav-tete {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.nav-tete__logo { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; color: var(--c-text); text-decoration: none; }
.nav-tete__logo span { color: var(--c-primary); }
.nav-tete__liens { display: flex; align-items: center; gap: var(--sp-1); flex: 1; }
.nav-tete__liens a {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-text-soft);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.nav-tete__liens a:hover { background: var(--c-surface-2); color: var(--c-text); }
.nav-tete__liens a[aria-current] { background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: var(--fw-semi); }
.nav-tete__burger { display: none; }
@media (max-width: 860px) {
  .nav-tete__liens { display: none; }
  .nav-tete__burger { display: inline-flex; }
  .nav-tete { gap: var(--sp-3); }
  .nav-tete__logo { flex: 1; }
}
/* @endv */

/* @v NAV-A2
@nom En-tete d'application
@usage Outil interne : fil d'Ariane a gauche, recherche au centre, compte a droite. Pas de liens de navigation ici, ils vivent dans la barre laterale.
@html
<header class="nav-appli">
  <button class="btn btn--icone btn--fantome" aria-label="Replier le menu">{{icon:liste}}</button>
  <nav class="doc-fil" aria-label="Chemin"><a href="#">Dossiers</a>{{icon:chevron-right}}<span aria-current="page">2026-103</span></nav>
  <span class="cat-head__spacer"></span>
  <label class="doc-recherche">{{icon:loupe}}<input type="search" placeholder="Rechercher"></label>
  <button class="btn btn--icone btn--fantome btn--pastille" data-pastille="3" aria-label="3 notifications">{{icon:bell}}</button>
  <button class="btn btn--avatar" aria-label="Mon compte"><span>JK</span></button>
</header>
@tw flex items-center gap-3 border-b bg-white px-4 py-2
@end */
.nav-appli {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.nav-appli .doc-recherche { max-width: 240px; }
.nav-appli .doc-fil { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 700px) { .nav-appli .doc-recherche { display: none; } }
/* @endv */

/* @v NAV-A3
@nom En-tete collant translucide
@usage Site vitrine avec banniere en image : l'en-tete flotte au-dessus du contenu et se laisse traverser par ce qui defile dessous.
@large
@html
<div class="demo-verre" style="padding:0">
  <header class="nav-tete nav-tete--verre">
    <a href="#" class="nav-tete__logo">JABS<span>.</span></a>
    <nav class="nav-tete__liens"><a href="#" aria-current="page">Accueil</a><a href="#">Prestations</a><a href="#">Contact</a></nav>
    <button class="btn btn--lg-verre btn--lg-teinte">Devis gratuit</button>
  </header>
</div>
@tw sticky top-0 z-50 border-white/20 bg-white/10 backdrop-blur-xl
@end */
.nav-tete--verre {
  position: relative;
  isolation: isolate;
  border: none;
  border-radius: 0;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.22);
}
.nav-tete--verre .nav-tete__logo,
.nav-tete--verre .nav-tete__liens a { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.nav-tete--verre .nav-tete__liens a:hover { background: rgba(255,255,255,.16); }
.nav-tete--verre .nav-tete__liens a[aria-current] { background: rgba(255,255,255,.24); color: #fff; }
/* @endv */

/* ===========================================================================
   FAMILLE B  -  BARRES LATERALES
   ======================================================================== */

/* @v NAV-B1
@nom Barre laterale
@usage La navigation principale d'une application. Les rubriques sont groupees et intitulees : une liste plate de 15 liens ne se lit pas.
@html
<aside class="nav-cote">
  <div class="nav-cote__marque">JABS<span> CRM</span></div>
  <nav>
    <h5>Pilotage</h5>
    <a href="#" aria-current="page">{{icon:grille}} Tableau de bord</a>
    <a href="#">{{icon:calendar}} Planning</a>
    <h5>Activite</h5>
    <a href="#">{{icon:dossier}} Dossiers <span class="btn__badge">24</span></a>
    <a href="#">{{icon:file}} Devis <span class="btn__badge">7</span></a>
    <a href="#">{{icon:archive}} Documents</a>
    <h5>Reglages</h5>
    <a href="#">{{icon:pencil}} Parametres</a>
  </nav>
</aside>
@tw flex w-60 flex-col gap-1 border-r bg-white p-3 [&_h5]:px-3 [&_h5]:text-[11px] [&_h5]:uppercase
@end */
.nav-cote {
  display: flex;
  flex-direction: column;
  width: 230px;
  padding: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.nav-cote__marque { padding: var(--sp-2) var(--sp-3) var(--sp-4); font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; color: var(--c-text); }
.nav-cote__marque span { color: var(--c-primary); font-weight: var(--fw-medium); }
.nav-cote nav { display: flex; flex-direction: column; gap: 2px; }
.nav-cote h5 {
  margin: var(--sp-4) 0 var(--sp-1);
  padding: 0 var(--sp-3);
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-text-muted);
}
.nav-cote h5:first-child { margin-top: 0; }
.nav-cote a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-text-soft);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.nav-cote a svg { width: 18px; height: 18px; flex: none; }
.nav-cote a .btn__badge { margin-left: auto; }
.nav-cote a:hover { background: var(--c-surface-2); color: var(--c-text); }
.nav-cote a[aria-current] { background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: var(--fw-semi); }
.nav-cote a[aria-current] svg { color: var(--c-primary); }
/* @endv */

/* @v NAV-B2
@nom Barre laterale repliee
@usage Gagner de la place sur un ecran de travail. L'info-bulle devient obligatoire : une icone seule n'est pas comprise par tout le monde.
@html
<aside class="nav-cote nav-cote--reduite">
  <div class="nav-cote__marque">J</div>
  <nav>
    <a href="#" aria-current="page" class="btn--bulle" data-bulle="Tableau de bord">{{icon:grille}}</a>
    <a href="#" class="btn--bulle" data-bulle="Planning">{{icon:calendar}}</a>
    <a href="#" class="btn--bulle" data-bulle="Dossiers">{{icon:file}}</a>
    <a href="#" class="btn--bulle" data-bulle="Documents">{{icon:archive}}</a>
    <a href="#" class="btn--bulle" data-bulle="Parametres">{{icon:pencil}}</a>
  </nav>
</aside>
@tw w-16 items-center [&_a]:h-10 [&_a]:w-10 [&_a]:justify-center [&_span]:hidden
@end */
.nav-cote--reduite { width: 64px; align-items: center; }
.nav-cote--reduite .nav-cote__marque { padding: var(--sp-2) 0 var(--sp-4); text-align: center; }
.nav-cote--reduite nav { align-items: center; gap: var(--sp-1); }
.nav-cote--reduite a { width: 42px; height: 42px; padding: 0; justify-content: center; position: relative; overflow: visible; }
.nav-cote--reduite h5 { display: none; }
/* L'info-bulle sort a droite, pas au-dessus : la barre est collee au bord haut. */
.nav-cote--reduite .btn--bulle::before {
  bottom: auto; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
}
.nav-cote--reduite .btn--bulle:hover::before,
.nav-cote--reduite .btn--bulle:focus-visible::before { transform: translateY(-50%) translateX(0); }
/* @endv */

/* @v NAV-B3
@nom Menu a sections depliantes
@usage Arborescence a deux niveaux. Le parent d'une page ouverte reste deplie : refermer la section a chaque navigation fait perdre le fil.
@html
<aside class="nav-cote">
  <nav>
    <a href="#">{{icon:grille}} Tableau de bord</a>
    <details open class="nav-cote__section">
      <summary>{{icon:file}} Dossiers</summary>
      <a href="#" aria-current="page">En cours <span class="btn__badge">12</span></a>
      <a href="#">A relancer <span class="btn__badge">5</span></a>
      <a href="#">Archives</a>
    </details>
    <details class="nav-cote__section">
      <summary>{{icon:archive}} Facturation</summary>
      <a href="#">Devis</a>
      <a href="#">Factures</a>
      <a href="#">Avoirs</a>
    </details>
  </nav>
</aside>
@tw [&_summary]:flex [&_summary]:cursor-pointer [&_details>a]:pl-11
@end */
.nav-cote__section summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-text-soft);
  cursor: pointer;
  list-style: none;
}
.nav-cote__section summary::-webkit-details-marker { display: none; }
.nav-cote__section summary::after {
  content: "";
  margin-left: auto;
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-base);
  opacity: .6;
}
.nav-cote__section[open] summary::after { transform: rotate(45deg); }
.nav-cote__section summary:hover { background: var(--c-surface-2); color: var(--c-text); }
.nav-cote__section summary svg { width: 18px; height: 18px; flex: none; }
.nav-cote__section > a { padding-left: 44px; font-size: var(--fs-sm); }
/* @endv */

/* ===========================================================================
   FAMILLE C  -  ONGLETS ET DEPLACEMENT
   ======================================================================== */

/* @v NAV-C1
@nom Onglets souslignes
@usage Sections d'une meme fiche. Le trait sous l'onglet actif est plus lisible qu'un simple changement de couleur, y compris en noir et blanc.
@html
<div class="nav-onglets" role="tablist">
  <button role="tab" aria-selected="true">Resume</button>
  <button role="tab" aria-selected="false">Documents <span class="btn__badge">12</span></button>
  <button role="tab" aria-selected="false">Interventions</button>
  <button role="tab" aria-selected="false">Facturation</button>
</div>
@tw flex gap-1 border-b [&_button]:border-b-2 [&_button]:border-transparent aria-selected:border-blue-600
@end */
.nav-onglets {
  display: flex;
  gap: var(--sp-1);
  width: 100%;
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-onglets::-webkit-scrollbar { display: none; }
.nav-onglets button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  padding: var(--sp-3);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.nav-onglets button:hover { color: var(--c-text); }
.nav-onglets button[aria-selected="true"] {
  border-bottom-color: var(--c-primary);
  color: var(--c-primary-ink);
  font-weight: var(--fw-semi);
}
.nav-onglets button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
/* @endv */

/* @v NAV-C2
@nom Onglets en pilules
@usage Filtres de liste plutot que sections de page. Plus leger que des onglets souslignes, et se range facilement sur deux lignes.
@html
<div class="nav-pilules" role="tablist">
  <button role="tab" aria-selected="true">Tous <span class="btn__badge">24</span></button>
  <button role="tab" aria-selected="false">En cours <span class="btn__badge">12</span></button>
  <button role="tab" aria-selected="false">A relancer <span class="btn__badge">5</span></button>
  <button role="tab" aria-selected="false">Termines <span class="btn__badge">7</span></button>
</div>
@tw flex flex-wrap gap-2 [&_button]:rounded-full [&_button]:px-4 aria-selected:bg-blue-600 aria-selected:text-white
@end */
.nav-pilules { display: flex; flex-wrap: wrap; gap: var(--sp-2); width: 100%; }
.nav-pilules button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 34px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-surface);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-soft);
  cursor: pointer;
  transition: all var(--t-fast);
}
.nav-pilules button:hover { border-color: var(--c-border-strong); color: var(--c-text); }
.nav-pilules button[aria-selected="true"] {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-primary-text);
  font-weight: var(--fw-semi);
}
/* @endv */

/* @v NAV-C3
@nom Fil d'Ariane
@usage Se situer dans une arborescence profonde. Le dernier element n'est pas un lien : c'est la page courante, il porte aria-current.
@html
<nav class="nav-fil" aria-label="Chemin">
  <a href="#">Accueil</a>{{icon:chevron-right}}
  <a href="#">Dossiers</a>{{icon:chevron-right}}
  <a href="#">2026-103</a>{{icon:chevron-right}}
  <span aria-current="page">Documents</span>
</nav>
@tw flex flex-wrap items-center gap-1 text-sm [&_svg]:h-3.5 [&_svg]:text-slate-400
@end */
.nav-fil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); }
.nav-fil a { padding: 3px var(--sp-2); border-radius: var(--r-sm); color: var(--c-text-soft); text-decoration: none; }
.nav-fil a:hover { background: var(--c-surface-2); color: var(--c-text); }
.nav-fil > svg { width: 14px; height: 14px; color: var(--c-text-muted); flex: none; }
.nav-fil [aria-current] { padding: 3px var(--sp-2); font-weight: var(--fw-semi); color: var(--c-text); }
/* @endv */

/* @v NAV-C4
@nom Menu deroulant
@usage Actions secondaires d'un objet. Le separateur isole les actions destructrices : elles ne doivent pas etre voisines d'une action banale.
@html
<div class="nav-menu">
  <button class="btn btn--secondaire btn--menu" aria-expanded="true">Actions {{icon:chevron-down}}</button>
  <div class="nav-menu__panneau" role="menu">
    <button role="menuitem">{{icon:pencil}} Modifier</button>
    <button role="menuitem">{{icon:copy}} Dupliquer</button>
    <button role="menuitem">{{icon:download}} Exporter en PDF</button>
    <hr>
    <button role="menuitem" class="is-danger">{{icon:trash}} Supprimer</button>
  </div>
</div>
@tw absolute z-20 mt-1 min-w-48 rounded-lg border bg-white p-1 shadow-lg
@end */
.nav-menu { position: relative; display: inline-block; }
.nav-menu__panneau {
  margin-top: 4px;
  min-width: 210px;
  padding: 4px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-3);
  z-index: 20;
}
.nav-menu__panneau button {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
}
.nav-menu__panneau button svg { width: 16px; height: 16px; color: var(--c-text-muted); flex: none; }
.nav-menu__panneau button:hover { background: var(--c-surface-2); }
.nav-menu__panneau hr { margin: 4px 0; border: none; border-top: 1px solid var(--c-border); }
.nav-menu__panneau .is-danger { color: var(--c-danger); }
.nav-menu__panneau .is-danger svg { color: var(--c-danger); }
.nav-menu__panneau .is-danger:hover { background: var(--c-danger-soft); }
/* @endv */

/* ===========================================================================
   FAMILLE D  -  MOBILE
   ======================================================================== */

/* @v NAV-D1
@nom Barre du bas
@usage Navigation principale sur telephone. Cinq entrees maximum, chacune avec son libelle : une icone seule n'est comprise que par ceux qui connaissent deja l'application.
@html
<nav class="nav-bas">
  <a href="#" aria-current="page">{{icon:grille}}<span>Accueil</span></a>
  <a href="#">{{icon:file}}<span>Dossiers</span></a>
  <a href="#" class="nav-bas__central">{{icon:plus}}<span class="sr-only">Nouveau</span></a>
  <a href="#">{{icon:calendar}}<span>Planning</span></a>
  <a href="#">{{icon:bell}}<span>Alertes</span></a>
</nav>
@tw fixed inset-x-0 bottom-0 flex border-t bg-white pb-[env(safe-area-inset-bottom)]
@end */
.nav-bas {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 420px;
  padding: 6px 4px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 -2px 12px rgba(16,24,40,.06);
}
.nav-bas a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-height: 50px;
  padding: 6px 2px;
  border-radius: var(--r-md);
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  text-decoration: none;
}
.nav-bas a svg { width: 21px; height: 21px; }
.nav-bas a[aria-current] { color: var(--c-primary); font-weight: var(--fw-bold); }
.nav-bas__central {
  flex: none;
  width: 48px; height: 48px;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: var(--c-primary-text) !important;
  box-shadow: var(--sh-2);
}
.nav-bas__central svg { width: 24px; height: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* @endv */

/* @v NAV-D2
@nom Tiroir lateral
@usage Le menu complet sur telephone. Ferme par la croix, par un clic sur le voile et par Echap : les trois, comme pour une modale.
@html
<div class="nav-tiroir">
  <div class="nav-tiroir__voile"></div>
  <aside class="nav-tiroir__panneau">
    <div class="nav-tiroir__tete">
      <span class="nav-cote__marque">JABS<span> CRM</span></span>
      <button class="btn btn--fermer" aria-label="Fermer le menu">{{icon:x}}</button>
    </div>
    <nav>
      <a href="#" aria-current="page">{{icon:grille}} Tableau de bord</a>
      <a href="#">{{icon:file}} Dossiers</a>
      <a href="#">{{icon:calendar}} Planning</a>
      <a href="#">{{icon:archive}} Documents</a>
    </nav>
  </aside>
</div>
@tw fixed inset-0 z-50 [&_aside]:h-full [&_aside]:w-72 [&_aside]:bg-white
@end */
.nav-tiroir { position: relative; display: flex; width: 100%; height: 300px; border-radius: var(--r-md); overflow: hidden; }
.nav-tiroir__voile { position: absolute; inset: 0; background: var(--c-overlay); }
.nav-tiroir__panneau {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 270px;
  padding: var(--sp-3);
  background: var(--c-surface);
  box-shadow: var(--sh-4);
}
.nav-tiroir__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.nav-tiroir__tete .nav-cote__marque { padding: 0; }
.nav-tiroir nav { display: flex; flex-direction: column; gap: 2px; }
.nav-tiroir nav a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: var(--fw-medium);
  color: var(--c-text-soft); text-decoration: none;
}
.nav-tiroir nav a svg { width: 19px; height: 19px; }
.nav-tiroir nav a[aria-current] { background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: var(--fw-semi); }
/* @endv */

/* @v NAV-D3
@nom Onglets glissants
@usage Beaucoup d'onglets sur telephone. Ils defilent horizontalement avec calage, et le premier reste partiellement visible pour signaler qu'il y en a plus.
@html
<div class="nav-glisse" role="tablist">
  <button role="tab" aria-selected="true">Tous</button>
  <button role="tab" aria-selected="false">En cours</button>
  <button role="tab" aria-selected="false">A relancer</button>
  <button role="tab" aria-selected="false">Signes</button>
  <button role="tab" aria-selected="false">En pose</button>
  <button role="tab" aria-selected="false">Termines</button>
  <button role="tab" aria-selected="false">Archives</button>
</div>
@tw flex snap-x gap-2 overflow-x-auto [&::-webkit-scrollbar]:hidden [&>button]:shrink-0
@end */
.nav-glisse {
  display: flex;
  gap: var(--sp-2);
  width: 100%;
  padding-bottom: var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Le degrade de droite dit qu'il reste des onglets hors champ. */
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
          mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.nav-glisse::-webkit-scrollbar { display: none; }
.nav-glisse button {
  flex: none;
  scroll-snap-align: start;
  height: 36px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-surface);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-soft);
  cursor: pointer;
}
.nav-glisse button[aria-selected="true"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-text); font-weight: var(--fw-semi); }
/* @endv */

/* @v NAV-D4
@nom Pied de page
@usage Fin d'un site vitrine : colonnes de liens, coordonnees, mentions. Les mentions legales et la confidentialite ne sont jamais omises.
@html
<footer class="nav-pied">
  <div class="nav-pied__cols">
    <div><strong>JABS</strong><p>Just A Better Solution. Chauffage, sanitaire et renovation energetique en Ile-de-France.</p></div>
    <div><h6>Prestations</h6><a href="#">Pompe a chaleur</a><a href="#">Chauffe-eau</a><a href="#">Isolation</a></div>
    <div><h6>Contact</h6><a href="tel:+33612345678">06 12 34 56 78</a><a href="mailto:contact@jabsdev.fr">contact@jabsdev.fr</a></div>
  </div>
  <div class="nav-pied__bas">
    <span>&copy; 2026 JABS</span>
    <nav><a href="#">Mentions legales</a><a href="#">Confidentialite</a><a href="#">CGV</a></nav>
  </div>
</footer>
@tw border-t bg-slate-50 [&_.cols]:grid [&_.cols]:grid-cols-[2fr_1fr_1fr] max-sm:[&_.cols]:grid-cols-1
@end */
.nav-pied {
  width: 100%;
  padding: var(--sp-6);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
}
.nav-pied__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-6); }
.nav-pied__cols > div { display: flex; flex-direction: column; gap: 6px; }
.nav-pied strong { font-size: var(--fs-lg); font-weight: 800; color: var(--c-text); }
.nav-pied p { margin: 0; color: var(--c-text-muted); line-height: 1.55; }
.nav-pied h6 { margin: 0 0 2px; font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); }
.nav-pied a { color: var(--c-text-soft); text-decoration: none; }
.nav-pied a:hover { color: var(--c-primary-ink); text-decoration: underline; }
.nav-pied__bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}
.nav-pied__bas nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
@media (max-width: 640px) { .nav-pied__cols { grid-template-columns: 1fr; gap: var(--sp-5); } }
/* @endv */