/* ══════════════════════════════════════════════════════════════
   Barre du haut des 4 grandes sections (maquette choisie par le
   propriétaire) : Cours ECG, Actualité, Culture générale, L'Humanité.
   Même hauteur (60 px), même logo « ECG Prépa » (Playfair Display,
   gras, 20 px) à la même place, fil d'Ariane au centre, recherche et
   compte à droite. Seuls les couleurs et le style du fil changent.

   Balisage : <nav class="… sn sn-<section>"> avec le logo en .sn-logo,
   le fil en .sn-fil et un .nav-right (où auth.js place la loupe et le
   compte). Section : sn-cours (+ sn-maths, sn-esh, sn-hgg, sn-philo,
   sn-anglais, sn-espagnol, sn-allemand pour la couleur du filet),
   sn-actu, sn-cg, sn-hum. Ajoutée par outils/barre-section.py.
   ══════════════════════════════════════════════════════════════ */

nav.sn {
  --sn-c: #d8b878;
  position: sticky; top: 0; z-index: 100;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
  align-items: center; column-gap: 28px; row-gap: 0;
  width: 100%; height: 60px; min-height: 0; max-height: none; margin: 0; padding: 0 48px;
  box-sizing: border-box;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; border: 0; border-radius: 0;
}
nav.sn > * { min-width: 0; margin: 0; }
nav.sn > :first-child { grid-column: 1; grid-row: 1; justify-self: start; display: flex; align-items: center; flex: none; }
nav.sn > .sn-fil { grid-column: 2; grid-row: 1; justify-self: center; }
nav.sn > .nav-right { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 8px; flex: none; }

/* Logo : identique partout */
nav.sn .sn-logo, nav.sn .sn-logo a {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 20px;
  font-style: normal; letter-spacing: 0; line-height: 1; text-transform: none;
  color: var(--sn-logo); text-decoration: none; white-space: nowrap; cursor: pointer;
  background: none; -webkit-text-fill-color: currentColor;
}

/* Fil d'Ariane */
nav.sn .sn-fil {
  position: static; transform: none; left: auto; top: auto; max-width: 100%;
  display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 8px;
  overflow: hidden; white-space: nowrap; width: auto; order: 0;
  color: var(--sn-fil); line-height: 1.2;
}
nav.sn .sn-fil > * { flex: none; margin: 0; padding: 0; line-height: inherit; }
nav.sn .sn-fil a, nav.sn .sn-fil span, nav.sn .sn-fil i, nav.sn .sn-fil b {
  color: inherit; text-decoration: none; font: inherit; letter-spacing: inherit; text-transform: inherit;
}
nav.sn .sn-fil a:hover, nav.sn .sn-fil span[onclick]:hover, nav.sn .sn-fil a:hover span { color: var(--sn-actif); }
nav.sn .sn-fil .sep, nav.sn .sn-fil > [aria-hidden="true"], nav.sn .sn-fil > i { color: var(--sn-sep); cursor: default; }
nav.sn .sn-fil > .current, nav.sn .sn-fil > [aria-current], nav.sn .sn-fil > b {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  color: var(--sn-ici); cursor: default;
}

/* Loupe et compte (auth.js) */
nav.sn #ecg-account-badge.in-nav { margin-left: 0; gap: 8px; }
nav.sn #ecg-loupe, nav.sn #ecg-avatar { width: 38px; height: 38px; backdrop-filter: none; -webkit-backdrop-filter: none; }
nav.sn #ecg-loupe { background: var(--sn-loupe-fond); border: 1px solid var(--sn-loupe-bord); color: var(--sn-loupe); }
nav.sn #ecg-loupe:hover { border-color: var(--sn-c); }

/* ── 1 · Cours ECG : atlas nocturne, filet à la couleur de la matière ── */
nav.sn-cours {
  background: #0a0a0b; border-bottom: 2px solid var(--sn-c);
  --sn-logo: #ecebe6; --sn-fil: #a3a29c; --sn-sep: #5d5c57; --sn-ici: #ecebe6; --sn-actif: var(--sn-c);
  --sn-loupe-fond: #141416; --sn-loupe-bord: #2e2e33; --sn-loupe: #ecebe6;
}
nav.sn-cours .sn-fil { font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; font-weight: 400; }
nav.sn-cours #ecg-avatar { background: #141416; border: 1px solid var(--sn-c); color: var(--sn-c); }
nav.sn-maths { --sn-c: #9ecba0; }
nav.sn-esh { --sn-c: #8fb0db; }
nav.sn-hgg { --sn-c: #d8b878; }
nav.sn-philo { --sn-c: #d08fae; }
nav.sn-anglais { --sn-c: #e39a7c; }
nav.sn-espagnol { --sn-c: #e2b45a; }
nav.sn-allemand { --sn-c: #b6a3e6; }

/* ── 2 · Actualité : le kiosque, noir et rouge de presse ── */
nav.sn-actu {
  --sn-c: #b5131f;
  background: #0b0b0c; border-bottom: 3px solid #b5131f;
  --sn-logo: #f3efe4; --sn-fil: #bdbdb8; --sn-sep: #6b6b66; --sn-ici: #f3efe4; --sn-actif: #ffffff;
  --sn-loupe-fond: #161617; --sn-loupe-bord: #2e2e33; --sn-loupe: #f3efe4;
}
nav.sn-actu .sn-fil { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; gap: 10px; }
nav.sn-actu #ecg-avatar { background: #b5131f; border: 1px solid #b5131f; color: #ffffff; }

/* ── 3 · Culture générale : barre pleine couleur du dossier (maquette D, choisie par le propriétaire) ──
   Sur un dossier, la barre prend sa couleur principale (--g, définie dans le :root de la page) ; sur l'index
   et les autres pages, --g n'existe pas : encre. */
nav.sn-cg {
  --sn-c: #ffffff;
  background: var(--g, #1e1610); border-bottom: 0;
  --sn-logo: #ffffff; --sn-fil: rgba(255,255,255,.72); --sn-sep: rgba(255,255,255,.4); --sn-ici: #ffffff; --sn-actif: #ffffff;
  --sn-loupe-fond: rgba(255,255,255,.16); --sn-loupe-bord: transparent; --sn-loupe: #ffffff;
}
nav.sn-cg .sn-fil { font-family: 'DM Mono', ui-monospace, monospace; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
nav.sn-cg #ecg-avatar { background: #ffffff; border: 0; color: var(--g, #1e1610); font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; }

/* ── 4 · L'Humanité : cabinet clair, filet rouge brique ── */
nav.sn-hum {
  --sn-c: #8c1d17;
  background: #ffffff; border-bottom: 1px solid #e4e2dc; box-shadow: inset 0 -2px 0 #8c1d17;
  --sn-logo: #18181b; --sn-fil: #52525b; --sn-sep: #a1a1aa; --sn-ici: #18181b; --sn-actif: #8c1d17;
  --sn-loupe-fond: #f5f4f0; --sn-loupe-bord: #e4e2dc; --sn-loupe: #18181b;
}
nav.sn-hum .sn-fil { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }
nav.sn-hum .sn-fil > .current, nav.sn-hum .sn-fil > [aria-current], nav.sn-hum .sn-fil > b { font-weight: 600; }
nav.sn-hum #ecg-avatar { background: #8c1d17; border: 1px solid #8c1d17; color: #ffffff; font-family: 'Bricolage Grotesque', system-ui, sans-serif; }

/* ── Téléphone et petites tablettes : le fil passe sous la barre ── */
@media (max-width: 860px) {
  nav.sn {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 56px auto;
    height: auto; min-height: 0; padding: 0 16px; column-gap: 12px;
  }
  nav.sn > .nav-right { grid-column: 2; grid-row: 1; }
  nav.sn > .sn-fil {
    grid-column: 1 / -1; grid-row: 2; justify-self: stretch;
    display: flex; overflow-x: auto; height: auto; padding: 0 0 11px; gap: 6px; line-height: 20px;
    scrollbar-width: none;
  }
  nav.sn > .sn-fil::-webkit-scrollbar { display: none; }
  nav.sn .sn-fil > .current, nav.sn .sn-fil > [aria-current], nav.sn .sn-fil > b { flex: none; overflow: visible; }
  nav.sn-cours .sn-fil, nav.sn-hum .sn-fil { font-size: 13px; }
  nav.sn-actu .sn-fil { font-size: 11px; gap: 8px; }
  nav.sn-cg .sn-fil { font-size: 12px; }
  nav.sn #ecg-loupe, nav.sn #ecg-avatar { width: 36px; height: 36px; }
  nav.sn .nav-right .ap-lang-btn { padding: 6px 10px; font-size: 12px; }
}

@media print { nav.sn { display: none !important; } }