/*
 * Bandeau supérieur canonique de NOTALIX.
 * Référence visuelle : module Histoire (août 2026).
 * La géométrie ne change pas d'un module à l'autre ; seuls le libellé de
 * navigation et la pastille de section sont contextuels.
 */
.notalix-global-topbar,
.notalix-global-topbar * {
  box-sizing: border-box;
}

.notalix-global-topbar {
  width: min(1400px, calc(100% - 20px));
  min-height: 62px;
  margin: 8px auto 10px;
  padding: 9px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(188, 200, 210, .9);
  border-radius: 19px;
  background: rgba(255, 253, 249, .96);
  box-shadow: 0 8px 24px rgba(27, 49, 75, .08);
  color: #173f70;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.2;
  position: relative;
  z-index: 80;
  flex: none;
}

.notalix-global-topbar__back {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  max-width: 150px;
  padding: 9px 14px;
  border: 1px solid #d4dde4;
  border-radius: 12px;
  background: #fff;
  color: #173f70;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.notalix-global-topbar__back:hover {
  transform: translateY(-1px);
  border-color: #bcc8d2;
  background: #fbfdff;
  box-shadow: 0 7px 14px rgba(27, 49, 75, .10);
}

.notalix-global-topbar__back:focus-visible {
  outline: 3px solid #f0aa24 !important;
  outline-offset: 3px !important;
}

.notalix-global-topbar__back.is-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.notalix-global-topbar__brand {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 8px;
  color: #173f70;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
}

.notalix-global-topbar__note {
  color: #bf5e4d;
  font-size: 27px;
  line-height: 1;
  transform: rotate(-5deg);
  transform-origin: center;
}

.notalix-global-topbar__name {
  color: #173f70;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1;
}

.notalix-global-topbar__by {
  color: #667487;
  font-size: 12px;
  font-weight: 800;
}

.notalix-global-topbar__module {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f3e5ca;
  color: #825822;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.notalix-global-topbar__spacer {
  grid-column: 3;
  justify-self: end;
  display: block;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Les anciens bandeaux sont retirés par notalix-ui.js. Cette règle évite
   qu'ils apparaissent brièvement avant l'initialisation du JS. */
body > .notalix-bar,
body > .nl-topbar,
body > main > .module-titlebar,
body > .shell > .topbar {
  display: none !important;
}

/* Histoire avait son bandeau dans .shell : une fois le bandeau commun placé
   au-dessus, on rend exactement sa hauteur au contenu. */
body.notalix-module-histoire-musique > .shell {
  height: calc(100vh - 100px) !important;
  height: calc(100dvh - 100px) !important;
}

@media (max-width: 620px) {
  .notalix-global-topbar {
    width: min(1400px, calc(100% - 12px));
    min-height: 54px;
    margin-top: 6px;
    margin-bottom: 8px;
    padding: 7px 9px;
    gap: 7px;
    border-radius: 14px;
  }

  .notalix-global-topbar__back {
    min-height: 38px;
    max-width: 94px;
    padding: 7px 9px;
    border-radius: 10px;
    font-size: 11px;
  }

  .notalix-global-topbar__brand { gap: 5px; }
  .notalix-global-topbar__note { font-size: 23px; }
  .notalix-global-topbar__name { font-size: 18px; letter-spacing: .045em; }
  .notalix-global-topbar__by { font-size: 10px; }
  .notalix-global-topbar__module {
    min-height: 21px;
    padding: 4px 7px;
    font-size: 8.5px;
    letter-spacing: .065em;
  }

  body.notalix-module-histoire-musique > .shell {
    height: calc(100vh - 86px) !important;
    height: calc(100dvh - 86px) !important;
  }
}

@media (max-width: 380px) {
  .notalix-global-topbar__by { display: none; }
  .notalix-global-topbar__module { font-size: 7.8px; padding-inline: 6px; }
  .notalix-global-topbar__back { max-width: 82px; padding-inline: 7px; font-size: 10.5px; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .notalix-global-topbar {
    min-height: 48px;
    margin-top: 4px;
    margin-bottom: 6px;
    padding-block: 4px;
  }
  .notalix-global-topbar__back { min-height: 34px; padding-block: 6px; }
  .notalix-global-topbar__note { font-size: 22px; }
  .notalix-global-topbar__name { font-size: 18px; }
  .notalix-global-topbar__module { min-height: 20px; padding-block: 4px; }
  body.notalix-module-histoire-musique > .shell {
    height: calc(100vh - 72px) !important;
    height: calc(100dvh - 72px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .notalix-global-topbar__back { transition: none; }
}