/* États accessibles et mouvements discrets. Ce fichier complète les composants. */
:where(a, button, input, textarea, select, summary):focus-visible {
    outline: 3px solid var(--bright);
    outline-offset: 4px;
}
.nav-links .current-menu-item > a,
.nav-links a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 6px;
}
[id] {
    scroll-margin-top: 100px;
}
body.admin-bar .site-header {
    top: 32px;
}
@media (max-width: 782px) {
    body.admin-bar .site-header { top: 46px; }
}
@media (max-width: 600px) {
    body.admin-bar .site-header { top: 0; }
}
/* Le menu reste accessible sans JS ; le bouton est alors inutile. */
@media (max-width: 850px) {
    .no-js .menu-toggle { display: none; }
    .no-js .main-nav { display: flex; position: static; flex-direction: column; }
    .no-js .header-inner { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: no-preference) {
    .kh-reveal { animation: kh-appear 550ms ease-out both; }
    .card { transition: transform 180ms ease, box-shadow 180ms ease; }
    .card:hover { transform: translateY(-3px); }
}
@keyframes kh-appear {
    from { opacity: .35; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Menu adaptatif : les couleurs dépendent du fond de la section sous l'en-tête.
   Le fond du menu mobile utilise les mêmes variables que la barre principale. */
.site-header {
    --header-bg: #061c3a;
    --header-ink: #fff;
    --header-border: #ffffff26;
    --header-button-bg: #fff;
    --header-button-ink: #061c3a;
    background: var(--header-bg);
    color: var(--header-ink);
    border-color: var(--header-border);
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.site-header[data-nav-theme="light"] {
    --header-bg: #fff;
    --header-ink: #061c3a;
    --header-border: #061c3a26;
    --header-button-bg: #061c3a;
    --header-button-ink: #fff;
}
.site-header .brand,
.site-header .brand:hover,
.site-header .nav-links a,
.site-header .nav-links a:hover {
    color: var(--header-ink);
}
.site-header .nav-cta,
.site-header .nav-cta:hover {
    background: var(--header-button-bg);
    color: var(--header-button-ink);
}
.site-header .menu-toggle span { background: var(--header-ink); }
.site-header .brand-symbol-dark { display: none; }
.site-header[data-nav-theme="light"] .brand-symbol-dark { display: block; }
.site-header[data-nav-theme="light"] .brand-symbol-light { display: none; }
@media (max-width: 850px) {
    .site-header .main-nav {
        background: var(--header-bg);
        color: var(--header-ink);
        border-color: var(--header-border);
        max-height: calc(100dvh - 100px);
        overflow-y: auto;
    }
}