/* === VARIABLES GLOBALES === */
:root {
    --bg: #0b0b0d;
    --panel: #111114;
    --text: #e6e6e9;
    --muted: #a6a6ad;
    --primary: #ff7a1a;
    --primary-600: #ff8f40;
    --accent-1: #22d3ee;
    --accent-2: #a78bfa;
    --ring: rgba(255, 122, 26, .35);
    --header-h: 200px;
}

/* === BASE === */
html, body {
    background: var(--bg);
    color: var(--text);
    padding-top: var(--header-h);
}

/* === ELEMENTS COMMUNS === */
.card {
    background: var(--panel);
    border-color: #1f1f23;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 12px;
    padding: .7rem 1rem;
    font-weight: 600;
    border: 1px solid #2a2a31;
}

.btn-primary {
    background: var(--primary);
    color: black;
    border-color: var(--primary-600);
}

.btn-ghost {
    background: transparent;
    color: var(--text);
}

.link { color: var(--primary-600); }

kbd {
    background: #1b1b21;
    color: #c4c4cb;
    border: 1px solid #2a2a31;
    border-bottom-width: 2px;
    border-radius: 8px;
    padding: .15rem .4rem;
}

.focus-ring:focus {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.gradient {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-image: linear-gradient(90deg, var(--primary), var(--accent-1), var(--accent-2));
}

.badge {
    border: 1px solid #2a2a31;
    border-radius: 999px;
    padding: .2rem .6rem;
    font-size: .75rem;
    color: var(--muted);
}

hr, .table tr { border-color: #1f1f23; }
.table th { color: #c9c9cf; }

input, textarea {
    background: #0f0f13;
    border: 1px solid #24242b;
    color: var(--text);
    border-radius: 12px;
    padding: .75rem;
}
input::placeholder, textarea::placeholder { color: #7a7a82; }

footer { color: var(--muted); }

figure.quote {
    border-left: 3px solid var(--primary);
    padding-left: 1rem;
}

.prose a { color: var(--primary-600); }

img.logo { height: 240px; }

header .brand {
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* === HEADER GLOBAL (FIXE + FLUIDE) === */
.site-header .brand {
    display: flex;
    align-items: center;
}
.site-header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    backdrop-filter: blur(10px);
    background: rgba(0,0,0,.25);
    border-bottom: 1px solid #1f1f23;
    z-index: 100;
    transition:
            background 0.6s cubic-bezier(.25,1,.5,1),
            box-shadow 0.6s cubic-bezier(.25,1,.5,1),
            height 0.6s cubic-bezier(.25,1,.5,1);
}

/* Conteneur */
.site-header .container {
    max-width: 72rem;
    margin: 0 auto;
    padding: .6rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition:
            padding 0.6s cubic-bezier(.25,1,.5,1),
            gap 0.6s cubic-bezier(.25,1,.5,1);
}

/* Logo */
.site-header .logo {
    height: 200px;
    width: auto;
    transform-origin: center center;
    transform: scale(1);
    transition:
            height 0.6s cubic-bezier(.25,1,.5,1),
            transform 0.6s cubic-bezier(.25,1,.5,1);
}

/* Navigation */
.site-header nav {
    display: flex;
    gap: 1.5rem;
    font-size: .9rem;
    transition: gap .45s ease, font-size .45s ease;
}

.site-header nav a {
    color: var(--text);
    opacity: .9;
    transition: opacity .2s, color .2s;
}

.site-header nav a:hover {
    opacity: 1;
    color: var(--primary);
}

/* État compact (scroll) */
.site-header.compact {
    background: rgba(0,0,0,.75);
    box-shadow: 0 4px 12px rgba(0,0,0,.55);
    backdrop-filter: blur(15px);
}

.site-header.compact .container {
    padding: .2rem 1rem;
}

.site-header.compact .logo {
    height: 120px;
    transform: scale(0.88) translateY(-4px);
}

.site-header.compact nav {
    gap: 1.2rem;
    font-size: .85rem;
}

/* Transitions fluides (ease-out dans les deux sens) */
.site-header.ease-smooth,
.site-header.ease-smooth .container,
.site-header.ease-smooth .logo,
.site-header.ease-smooth nav {
    transition-timing-function: cubic-bezier(.16, 1, .3, 1); /* style Apple */
    transition-duration: .6s;
}
/* ======== Responsive header ======== */

/* Par défaut: desktop visible, bouton caché */
.menu-btn { display: none; }

/* Menu mobile (overlay sous le header) */
.mobile-nav {
    position: fixed;
    left: 0; right: 0;
    top: var(--header-h);
    background: rgba(0,0,0,.92);
    backdrop-filter: blur(8px);
    border-top: 1px solid #1f1f23;
    z-index: 90;
    display: grid;
    gap: .75rem;
    padding: 1rem;
}
.mobile-nav a {
    color: var(--text);
    opacity: .95;
    font-size: 1rem;
}
.mobile-nav a:hover { color: var(--primary); }

/* 1) Écrans étroits: bouton visible, menu desktop caché */
@media (max-width: 1024px) {
    .desktop-nav { display: none !important; }
    .menu-btn { display: inline-flex; }
    /* optionnel: logo un peu plus petit pour gagner en hauteur */
    .site-header .logo { height: 160px; }
}
/* 2) Forcer le mode "mobile" sur smartphones même en paysage */
@media (hover: none) and (pointer: coarse) {
    .desktop-nav { display: none !important; }
    .menu-btn { display: inline-flex; }
}

/* 3) Sur vrai desktop: on s'assure que le panneau mobile est fermé */
@media (min-width: 1025px) {
    .mobile-nav { display: none !important; }
}

@media (max-width: 768px) {
    .site-header .brand {
        justify-content: center; /* centre le logo sur mobile */
    }
}