/* ============================================================================
   NAVIGATION PARTAGÉE — menu du haut, sous-menu de gauche, recherche
   ----------------------------------------------------------------------------
   Le sous-menu RÉUTILISE les classes `.rail` d'intranet.css (`.rail-t`, `.rc`,
   `.n`, `.q`, `.rail-v`) plutôt que d'en redéfinir des jumelles. Deux jeux de
   styles pour un même objet finiraient par diverger — c'est le défaut que la
   navigation partagée est censée supprimer, il serait absurde de le réintroduire
   par la feuille de style.
   ========================================================================== */

/* ── menu du haut ─────────────────────────────────────────────────────────
   Collé sous la barre de marque, et sticky comme elle : à 60 px, exactement la
   hauteur de `.topbar-in`. Une valeur en dur des deux côtés se désynchronise à
   la première retouche, d'où la variable. */
:root{ --h-topbar:60px; --h-mnav:46px; }

.mnav{
  position:sticky; top:var(--h-topbar); z-index:110;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.mnav-in{
  max-width:1680px; margin:0 auto; padding:0 26px;
  height:var(--h-mnav); display:flex; align-items:center; gap:2px;
}
.mnav a{
  position:relative; display:flex; align-items:center; height:100%;
  padding:0 15px; font-size:14px; font-weight:500; color:var(--text-2);
  transition:color .13s;
}
.mnav a:hover{ color:var(--text); }
.mnav a.on{ color:var(--bleu); font-weight:650; }
/* Le trait actif est posé sur la bordure du bloc, pas sous le texte : aligné
   sur la séparation, il ne bouge pas quand le libellé change de graisse. */
.mnav a.on::after{
  content:''; position:absolute; left:12px; right:12px; bottom:-1px;
  height:2px; background:var(--bleu); border-radius:2px 2px 0 0;
}

/* Le bouton de recherche est poussé à droite : c'est un service, pas une
   sixième rubrique. */
.mnav-q{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  padding:6px 11px; border:1px solid var(--border); border-radius:9px;
  background:var(--bg); color:var(--text-3);
  font:inherit; font-size:12.8px; cursor:pointer;
  transition:border-color .13s,color .13s;
}
.mnav-q:hover{ border-color:var(--bleu); color:var(--text-2); }
.mnav-q svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; }
.mnav-q kbd{
  font:inherit; font-size:10.5px; letter-spacing:.3px;
  padding:2px 5px; border:1px solid var(--border); border-radius:5px;
  color:var(--text-3); background:var(--surface);
}
@media (max-width:720px){
  .mnav-q span{ display:none; }
  .mnav-q kbd{ display:none; }
  .mnav-in{ gap:0; padding:0 12px; overflow-x:auto; scrollbar-width:none; }
  .mnav-in::-webkit-scrollbar{ display:none; }
  .mnav a{ padding:0 11px; font-size:13.2px; white-space:nowrap; }
}

/* ── gabarit à sous-menu ──────────────────────────────────────────────────
   Une seule enveloppe pour les pages-carrefour. Les pages de destination
   (charte, signatures, planning…) gardent le leur : elles n'ont pas de
   sous-menu, seulement le menu du haut. */
.nav-shell{
  max-width:1500px; margin:0 auto; padding:0 28px 90px;
  display:grid; grid-template-columns:214px 1fr; gap:40px; align-items:start;
}
.nav-shell .rail{ top:calc(var(--h-topbar) + var(--h-mnav) + 6px); }
.nav-shell .main{ padding:14px 0 40px; min-width:0; }
@media (max-width:1120px){
  .nav-shell{ grid-template-columns:1fr; gap:0; padding:0 18px 70px; }
  .nav-shell .rail{ display:none; }
}

/* Le rail des autres gabarits doit descendre d'autant : le menu occupe
   désormais 46 px sous la barre. */
.ac-shell .rail{ top:calc(var(--h-topbar) + var(--h-mnav) + 52px); }

/* La note « à venir » d'une entrée de sous-menu : même emplacement que le
   compteur, ton d'attente. */
.rail a .q.att{ color:var(--warn); font-size:10.5px; }

/* ── recherche globale ──────────────────────────────────────────────────── */
.qk{
  position:fixed; inset:0; z-index:400; display:none;
  background:rgba(12,20,36,.42); backdrop-filter:blur(2px);
  padding:12vh 20px 20px;
}
.qk.on{ display:block; }
.qk-b{
  max-width:560px; margin:0 auto; background:var(--surface);
  border:1px solid var(--border); border-radius:14px;
  box-shadow:0 18px 50px rgba(12,20,36,.28); overflow:hidden;
}
.qk-b input{
  width:100%; border:none; outline:none; background:transparent;
  padding:17px 20px; font:inherit; font-size:15.5px; color:var(--text);
  border-bottom:1px solid var(--border);
}
.qk-r{ max-height:52vh; overflow-y:auto; padding:6px; }
.qk-r a{
  display:flex; align-items:baseline; gap:12px;
  padding:9px 13px; border-radius:9px; color:var(--text);
}
.qk-r a.on{ background:var(--bg); }
.qk-r .qn{ font-size:14px; font-weight:550; }
/* Le chemin est la valeur ajoutée du résultat : il dit OÙ se range l'outil,
   donc où le retrouver la prochaine fois sans passer par la recherche. */
.qk-r .qo{ margin-left:auto; font-size:11.5px; color:var(--text-3); text-align:right; }
.qk-v{ padding:18px 13px; font-size:13.5px; color:var(--text-3); }

/* ── barre de contexte (MAQUETTE) ─────────────────────────────────────────
   Déplacée depuis pouls.css le 6 août : ces styles portaient le nom d'un
   brouillon supprimé, alors que la barre est rendue par nav.js et sert quatre
   pages. Un style qui vit dans le fichier d'une autre page est un style qu'on
   oublie de charger — c'est ce qui venait d'arriver aux pages-carrefour.

   Le décalage sticky suit le menu : il ne peut plus valoir 60 px en dur, sinon
   la barre passe SOUS le menu au défilement. */
.ctx{position:sticky;top:calc(var(--h-topbar) + var(--h-mnav));z-index:60;background:var(--marine);padding:11px 0}
html[data-theme="dark"] .ctx{background:var(--marine-900)}
.ctx-in{max-width:1300px;margin:0 auto;padding:0 30px;display:flex;align-items:center;
  gap:12px;flex-wrap:wrap}
.ctx-l{font-size:10.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.ctx select{height:31px;padding:0 28px 0 11px;border-radius:8px;font-family:inherit;font-size:13px;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);color:#fff;
  outline:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 14px) 14px,calc(100% - 10px) 14px;background-size:4px 4px;background-repeat:no-repeat}
.ctx select:focus{border-color:var(--ciel)}
.ctx select option{color:#111}
.ctx .hint{margin-left:auto;font-size:11.5px;color:rgba(255,255,255,.5)}