/* Navigation et pied de page */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    padding-block: 40px 0; /* maquette : barre à 40 px du haut */
    color: var(--text); /* recalculée ici : permet de forcer un texte clair au-dessus du hero */
    transition: padding var(--duration) var(--ease);
}
/* Au-dessus du hero (photo sombre), la barre garde un texte clair même en thème clair,
   tant que son fond n'est pas apparu et que le menu mobile n'est pas ouvert. */
body:has(.hero) .site-header:not(.is-scrolled):not(.is-menu-open) {
    --text: #f2f2f2;
    --surface: #1a1a1a;
    --border: #333333;
}
/* Une fois la page défilée, la barre se compacte */
.site-header.is-scrolled {
    padding-block: 16px;
}
/* Le fond flouté est sur un pseudo-élément : un backdrop-filter sur le header
   empêcherait le menu mobile (position: fixed) de couvrir tout l'écran. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
}
.site-header.is-scrolled::before {
    opacity: 1;
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.brand,
.nav__links a,
.menu-btn {
    transition: color var(--duration) var(--ease);
}
.brand {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.nav {
    display: flex;
}
.nav__links {
    display: flex;
    gap: 40px;
    font-weight: 500;
    font-size: 15px;
}
.nav__links a {
    position: relative;
    padding-block: var(--space-1);
}
.nav__links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration) var(--ease);
}
.nav__links a:hover::after,
.nav__links a[aria-current="true"]::after {
    transform: scaleX(1);
}
/* Numéros et bloc du bas : seulement dans le menu mobile */
.nav__num,
.nav__bottom {
    display: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--duration) var(--ease);
}
.icon-btn:hover {
    border-color: var(--accent);
}
.theme-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text);
}

.menu-btn {
    display: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}
.menu-btn__close {
    display: none;
}
.is-menu-open .menu-btn__open {
    display: none;
}
.is-menu-open .menu-btn__close {
    display: block;
}

@media (max-width: 800px) {
    .site-header,
    .site-header.is-scrolled {
        padding-block: 20px;
    }
    .brand {
        font-size: 17px;
        letter-spacing: 0.04em;
    }
    /* Le thème se règle dans le menu : seul le bouton de menu reste dans l'en-tête */
    .theme-btn {
        display: none;
    }
    .menu-btn {
        display: block;
    }

    .nav {
        position: fixed;
        inset: 0;
        z-index: -1;
        flex-direction: column;
        justify-content: space-between;
        padding: 96px var(--gutter) 40px;
        background: var(--bg);
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: opacity 300ms var(--ease), visibility 300ms;
    }
    .nav.is-open {
        opacity: 1;
        visibility: visible;
    }
    /* Lueur rose en haut à droite */
    .nav::before {
        content: "";
        position: absolute;
        top: -160px;
        right: -180px;
        width: 420px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%);
        pointer-events: none;
    }

    .nav__links {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        font-family: var(--font-display);
        font-weight: 400;
        font-size: 56px;
        line-height: 1.1;
        letter-spacing: -0.03em;
    }
    .nav__links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-block: 10px;
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 400ms var(--ease), transform 400ms var(--ease), color var(--duration) var(--ease);
    }
    .nav.is-open .nav__links a {
        opacity: 1;
        transform: none;
    }
    .nav.is-open .nav__links a:nth-child(2) { transition-delay: 60ms; }
    .nav.is-open .nav__links a:nth-child(3) { transition-delay: 120ms; }
    .nav.is-open .nav__links a:nth-child(4) { transition-delay: 180ms; }
    .nav__links a::after {
        display: none;
    }
    .nav__links a[aria-current="true"] {
        color: var(--accent);
    }
    .nav__num {
        display: inline;
        font-family: var(--font-mono);
        font-size: 12px;
        letter-spacing: 0;
        color: var(--text-muted);
    }

    .nav__bottom {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .toggle--full {
        display: flex;
    }
    .toggle--full .toggle__option {
        flex: 1;
        font-size: 14px;
    }
    .nav__social {
        display: flex;
        gap: 20px;
        color: var(--text-muted);
        font-size: 14px;
    }
}

.site-footer {
    border-top: 1px solid var(--border);
    padding-block: var(--space-7);
}
.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-5);
}
.site-footer .brand {
    font-size: 18px;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    color: var(--text-muted);
    font-size: 14px;
}
.footer-links a:hover {
    color: var(--text);
}
.site-footer__copy {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}
@media (max-width: 800px) {
    /* Téléphone : le nom, les liens, puis © année, empilés et alignés à gauche (sur une même ligne ils n'étaient pas alignés) */
    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
    .footer-links {
        gap: var(--space-3) var(--space-5);
    }
}

main {
    min-height: 60vh;
}