/* ═══════════════════════════════════════════════════════════════════════
   BARRE DE NAVIGATION LATÉRALE — écrans internes.

   Feuille SÉPARÉE de interne.css, et de la feuille en ligne du tableau des
   leads, pour une raison pratique : les trois écrans ont chacun leur mise en
   page, mais doivent partager exactement la même colonne de gauche. Une
   feuille dédiée se charge dans les trois sans rien renommer ailleurs.

   Sous 900 px, la colonne redevient une barre horizontale déroulante : une
   colonne de 240 px sur un écran de 375 px ne laisse pas de place au
   contenu, et un menu qui se replie derrière un bouton fait disparaître les
   compteurs — qui sont la moitié de l'information de ces écrans.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --nav-largeur:240px;
  --nav-fond:#0A2E29;
  --nav-texte:#C9DAD5;
  --nav-actif:#E8A924;
}

body.avec-nav{padding-left:var(--nav-largeur)}

.nav-laterale{
  position:fixed;top:0;left:0;bottom:0;width:var(--nav-largeur);
  background:var(--nav-fond);color:#fff;padding:20px 0 24px;
  display:flex;flex-direction:column;gap:4px;overflow-y:auto;z-index:20;
  font-family:Inter,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-size:14px}

.nav-marque{display:flex;align-items:center;gap:11px;padding:0 18px 18px;
            border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:14px}
.nav-marque img{border-radius:6px;flex:0 0 auto}
.nav-socle{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
           color:#8FA9A3;margin:0}
.nav-nom{font-family:Fraunces,Georgia,serif;font-size:15.5px;margin:1px 0 0;
         color:#fff;line-height:1.25}

.nav-groupe{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
            color:#7E9A94;margin:14px 0 5px;padding:0 18px}
.nav-liste{list-style:none;margin:0;padding:0}
.nav-liste a{display:flex;align-items:center;justify-content:space-between;gap:10px;
             padding:9px 18px;color:var(--nav-texte);text-decoration:none;
             border-left:3px solid transparent}
.nav-liste a:hover{background:rgba(255,255,255,.06);color:#fff}
/* L'entrée active se marque par un TRAIT et par la couleur : sur un fond
   sombre, un simple changement de teinte ne passe pas le seuil de contraste
   pour tout le monde. */
.nav-liste a.actif{background:rgba(255,255,255,.09);color:#fff;
                   border-left-color:var(--nav-actif);font-weight:600}
.nav-libelle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Pastille de compteur. Ambre = « il y a quelque chose à faire », la même
   couleur que la donnée ailleurs sur le site. Elle n'apparaît qu'à partir
   de 1 : un zéro permanent apprend à ne plus regarder. */
.nav-pastille{background:var(--nav-actif);color:#0A2E29;font-weight:600;
              font-size:12px;line-height:1;padding:4px 8px;border-radius:999px;
              font-variant-numeric:tabular-nums;flex:0 0 auto}

.nav-pied{margin-top:auto;padding:16px 18px 0;border-top:1px solid rgba(255,255,255,.12)}
.nav-note{font-size:12px;color:#7E9A94;line-height:1.45;margin:0}
.nav-sortie{background:none;border:0;color:#8FA9A3;font:inherit;font-size:13.5px;
            cursor:pointer;padding:0;text-decoration:underline}
.nav-sortie:hover{color:#fff}

/* Lien d'évitement : premier élément focusable de la page, invisible tant
   qu'il n'a pas le focus. Sans lui, un utilisateur au clavier retraverse
   quinze liens de menu à chaque page. */
.saut-nav{position:absolute;left:-9999px;top:0;background:#fff;color:#0A2E29;
          padding:10px 16px;z-index:30}
.saut-nav:focus{left:8px;top:8px}

@media (max-width:900px){
  body.avec-nav{padding-left:0}
  .nav-laterale{position:static;width:auto;flex-direction:row;align-items:center;
                gap:2px;padding:10px 12px;overflow-x:auto}
  .nav-marque{border:0;margin:0;padding:0 14px 0 0;flex:0 0 auto}
  .nav-marque div{display:none}
  .nav-groupe{display:none}
  .nav-liste{display:flex;gap:2px}
  .nav-liste a{border-left:0;border-bottom:3px solid transparent;border-radius:6px;
               padding:8px 12px;white-space:nowrap}
  .nav-liste a.actif{border-left:0;border-bottom-color:var(--nav-actif)}
  .nav-pied{margin:0 0 0 auto;padding:0 0 0 12px;border:0;flex:0 0 auto}
  .nav-note{display:none}
}