/* TATEA — la barre du haut (2026-10-21) : sans fond, elle prend le ton de la section qui passe dessous (logo, liens et ☰ en blanc sur le bleu nuit,
   en encre sur le mur clair : `data-tl` / `data-tc` / `data-tr` posés par tatea-nav.js) ; dès qu'on quitte le haut de la hero elle se range et il ne
   reste que le ☰, fixe, jusqu'au retour tout en haut (`html.is-nav-away`). */
html .bar { --fl: #fff; --fc: #fff; --fr: #fff; }
html .bar, html[data-e~="8"] .bar, html[data-e~="8"] .bar.is-solid { background: none; box-shadow: none; will-change: auto; z-index: 60; pointer-events: none; transition: none; }
html .bar > * { pointer-events: auto; }
html .bar[data-tl="light"] { --fl: #16213d; }
html .bar[data-tc="light"] { --fc: #16213d; }
html .bar[data-tr="light"] { --fr: #16213d; }
html[data-e~="8"] .page { z-index: 40; } /* le ☰ fixe reste au-dessus du pied de page */

html .bar .bar__logo { color: var(--fl); }
html .bar[data-tl="light"] .bar__logo img { content: url("../img/tatea/logo-tatea-bleu.png"); }
html .bar .bar__tag { color: color-mix(in srgb, var(--fl) 86%, transparent); border-left-color: color-mix(in srgb, var(--fl) 28%, transparent); }
html .bar .bar__nav { color: var(--fc); }
html .bar .bar__nav a { color: inherit; }
html .bar .bar__nav a:hover { color: var(--gold); }
html .bar .bar__end { color: var(--fr); }
html .bar .bar__hc { background: color-mix(in srgb, var(--fr) 9%, transparent); color: color-mix(in srgb, var(--fr) 80%, transparent); }
html .bar .bar__hc:hover { background: color-mix(in srgb, var(--fr) 16%, transparent); color: var(--fr); }
html .bar[data-tr="light"] .bar__hc img { content: url("../img/logo-hc.png"); }
html .bar .bar__menu { color: var(--fr); }
html .bar .bar__menu span { background: currentColor; }
html .bar .bar__menu:hover { background: color-mix(in srgb, var(--fr) 12%, transparent); }

/* se range : logo, liens et pastille H&C s'effacent vers le haut, le ☰ reste */
html .bar :is(.bar__logo, .bar__nav, .bar__hc) { transition: opacity .35s .1s, transform .45s var(--ease) .1s, visibility 0s, background-color .2s, color .2s; }
html.is-nav-away .bar :is(.bar__logo, .bar__nav, .bar__hc) { opacity: 0; visibility: hidden; transform: translate3d(0, -10px, 0); pointer-events: none; transition: opacity .25s, transform .35s var(--ease), visibility 0s .35s; }

/* le ☰ : fixe dès qu'on a quitté le haut de la hero, et en permanence sous 1181 px (même place que dans la barre, pas de saut) */
html.is-nav-away .bar .bar__end .bar__menu { display: grid; }
@media (max-width: 1180px) { html .bar .bar__end .bar__menu { position: fixed; z-index: 60; top: 16px; right: var(--edge, 24px); } }
@media (max-width: 899px) { html .bar .bar__end .bar__menu { top: 10px; } }
@media (min-width: 1181px) {
  html.is-nav-away .bar .bar__end .bar__menu { position: fixed; z-index: 60; top: 16px; right: var(--edge, 24px); animation: nav-pop .45s var(--ease) both; }
}
@keyframes nav-pop { from { opacity: 0; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { html .bar * { transition: none !important; animation: none !important; } }

/* la barre est sans fond et pose sur la hero : le bleu nuit de la hero remonte derrière elle (elle suit la hero quand celle-ci monte) */
html[data-e~="8"] .hero::before, html .ach::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 100%; height: 160px; background: var(--night); }