/* ------------------------------------------------------------------
   Facette · navigation.css : la barre à deux niveaux et le sommaire
   (navigation.js). Écrit uniquement avec les variables de styles.css :
   le fond clair suit tout seul, rien à ajouter dans theme-clair.py.
   ------------------------------------------------------------------ */

/* l'ancienne barre reste dans la page (les modules s'y branchent), on ne la voit plus */
#onglets[data-remplacee]{display:none !important}

.nav-facette{margin:12px auto 0}
.nav-facette[hidden]{display:none}

/* ---- niveau 1 : les familles ---- */
.nav-familles{
  display:flex;align-items:flex-end;gap:2px;flex-wrap:wrap;
  border-bottom:1px solid var(--trait);
}
.nav-familles button{
  position:relative;padding:9px 13px 11px;font-size:15px;font-weight:700;color:var(--texte-doux);
  border-radius:10px 10px 0 0;white-space:nowrap;flex:none;letter-spacing:-0.005em;
}
.nav-familles button:hover{color:var(--texte);background:rgba(255,255,255,0.04)}
.nav-familles button.actif{color:var(--texte)}
.nav-familles button.actif::after{
  content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--orange),var(--rose),var(--violet));
}
.nav-familles button i,.nav-sous button i{
  font-style:normal;margin-left:7px;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:rgba(255,255,255,0.08);color:var(--texte-doux);vertical-align:1px;
}
.nav-familles button.actif i{background:rgba(255,154,61,0.22);color:var(--texte)}

/* ---- niveau 2 : les sous-onglets de la famille ouverte ---- */
.nav-sous{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  margin:10px 0 0;padding:4px;border-radius:999px;border:1px solid var(--trait);
  background:var(--carte);width:fit-content;max-width:100%;
}
.nav-sous[hidden]{display:none}
.nav-sous button{
  padding:6px 15px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--texte-doux);white-space:nowrap;
}
.nav-sous button:hover{color:var(--texte)}
.nav-sous button.actif{background:var(--violet);color:#fff}
.nav-sous button.actif i{background:rgba(255,255,255,0.22);color:#fff}

/* ---- le sommaire de la page ouverte ---- */
.nav-sommaire{
  display:flex;flex-wrap:nowrap;align-items:center;gap:4px;
  margin:9px 0 0;font-size:12.5px;color:var(--texte-faible);
  overflow-x:auto;scrollbar-width:none;max-width:100%;
}
.nav-sommaire::-webkit-scrollbar{display:none}
.nav-sommaire[hidden]{display:none}
.nav-sommaire > span{flex:none;margin-right:6px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:11px}
.nav-sommaire button{
  padding:3px 9px;border-radius:999px;font-size:12.5px;color:var(--texte-doux);white-space:nowrap;
  border:1px solid transparent;
}
.nav-sommaire button:hover{color:var(--texte);border-color:var(--trait)}
.nav-sommaire button.actif{color:var(--texte);background:rgba(255,255,255,0.06);border-color:var(--trait)}

/* les sections s'arrêtent sous l'en-tête collant quand on saute dessus */
[id^="vue-"] section,[id^="vue-"] .bloc,[id^="vue-"] .grille-kpi{scroll-margin-top:118px}

/* ---- en descendant : l'en-tête ne garde que la barre ---- */
.entete.mini .nav-facette{margin-top:0}
.entete.mini .nav-familles{border-bottom:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.entete.mini .nav-familles::-webkit-scrollbar{display:none}
.entete.mini .nav-familles button{padding:6px 11px 7px;font-size:14px}
.entete.mini .nav-sous{margin-top:3px;padding:3px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
.entete.mini .nav-sous::-webkit-scrollbar{display:none}
.entete.mini .nav-sous button{padding:3px 11px;font-size:12.5px}
.entete.mini .nav-sommaire{margin-top:3px}
.entete.mini .nav-sommaire button{padding:2px 8px;font-size:12px}
.entete.mini .nav-sommaire > span{display:none}
.entete.mini{padding-bottom:5px}

/* ---- téléphone ---- */
@media (max-width:760px){
  .nav-facette{margin-top:10px}
  .nav-familles{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0}
  .nav-familles::-webkit-scrollbar{display:none}
  .nav-familles button{padding:8px 11px 10px;font-size:14px}
  .nav-sous{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-radius:14px}
  .nav-sous::-webkit-scrollbar{display:none}
  .nav-sommaire{display:none}
}

/* ---- petits compléments posés par la refonte du 26/09 ---- */
/* les renvois « Publicité → Résultats de la pub » dans les intros de bloc */
.bloc-tete p a{color:inherit;text-decoration:underline;text-decoration-color:var(--trait-fort);text-underline-offset:3px}
.bloc-tete p a:hover{text-decoration-color:var(--orange)}
/* la photo des goulots du 15/09, repliée dans « À faire & idées » */
details.idee-archive{margin-top:22px}
details.idee-archive > summary{cursor:pointer;list-style:none}
details.idee-archive > summary::-webkit-details-marker{display:none}
details.idee-archive > summary::before{content:'▸';display:inline-block;width:16px;color:var(--texte-faible);transition:transform .15s}
details.idee-archive[open] > summary::before{transform:rotate(90deg)}
details.idee-archive > summary a{color:inherit}