/* =========================================
   BASE
   ========================================= */

html {
    scrollbar-gutter: stable;
}

body.menu-open {
    overflow: hidden;
}

/* Nettoyage du header quand menu ouvert */
body.menu-open nav {
    background: transparent;
    backdrop-filter: none;
}

/* =========================================
   BURGER (CROIX TOUJOURS VISIBLE)
   ========================================= */

.burger {
    width: 30px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 2000;
}

.burger span {
    height: 2px;
    width: 100%;
    background: #f2f2f2;
    border-radius: 2px;
    transition:
        transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease,
        width 0.25s ease;
}

.burger.active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.burger.active span:nth-child(2) {
    opacity: 0;
}

.burger.active span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* =========================================
   MENU FULLSCREEN – CENTRAGE PARFAIT
   ========================================= */

.menu {
    position: fixed;
    inset: 0;

    /* fond légèrement plus transparent */
    background: rgba(39, 39, 39, 0.9);
    backdrop-filter: blur(14px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 2.2rem;

    list-style: none;
    margin: 0;
    padding: 0;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;

    z-index: 1500;
}

.menu.active {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================
   SIGNATURE (DANS LE FLUX, CENTRÉE)
   ========================================= */

.menu::before {
    width: 100%;
    content: "STUDIO DES FLEURS";
    display: block;

    margin-bottom: 2.8rem;

    font-size: 0.75rem;
    letter-spacing: 0.35em;
    font-weight: 300;
    justify-content: center;

    color: #f2f2f2;
    opacity: 0.45;
    text-align: center;
}

/* =========================================
   LIENS DU MENU
   ========================================= */

.menu li {
    width: 100%;
    display: flex;
    justify-content: center;

    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
}

.menu.active li {
    opacity: 1;
    transform: translateY(0);
}

.menu.active li:nth-child(1) { transition-delay: 0.12s; }
.menu.active li:nth-child(2) { transition-delay: 0.22s; }
.menu.active li:nth-child(3) { transition-delay: 0.32s; }

.menu a {
    display: grid;
    align-items: center;
    gap: 0.4rem;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(2.1rem, 4.5vw, 3rem);
    font-weight: 200;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: #f2f2f2;
    text-decoration: none;

    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.4s ease;
}

.menu a span {
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    opacity: 0.4;
}

.menu a:hover {
    opacity: 1;
    transform: translateX(6px);
}

/* =========================================
   HERO MOBILE – VERSION STABLE
   ========================================= */

@media (max-width: 768px) {

    /* ===== NAV FIXE ===== */
    nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 70px;
        z-index: 1000;
        background: rgba(39, 39, 39, 0.9);
        backdrop-filter: blur(10px);
    }

    /* ⚠️ IMPORTANT : PAS de padding-top sur body */
    body {
        padding-top: 0;
    }

    /* ===== HERO ===== */
    .hero {
        height: auto !important;
        min-height: calc(100svh - 70px);
        padding-top: 70px; /* compensation du nav */
        padding-left: 1rem;
        padding-right: 1rem;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        position: relative;
        box-sizing: border-box;
    }

    /* ===== TEXTE ===== */
    .hero-content {
        position: relative !important;
        height: auto !important;
        overflow: visible;

        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .hero-title {
        font-size: clamp(2rem, 6vw, 2.6rem);
        line-height: 1.15;
        margin-bottom: 0.6rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        opacity: 0.75;
        margin-bottom: 1.4rem;
    }

    /* ===== IMAGES ===== */
    .images-container {
        position: relative !important;
        inset: auto !important;

        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;

        width: 100%;
        max-width: 360px;
        margin: 0 auto;

        pointer-events: none;
    }

    .floating-image {
        position: static !important;
        width: 100% !important;
        height: auto !important;

        aspect-ratio: 3 / 4;
        object-fit: cover;

        transform: none !important;
        left: auto !important;
        top: auto !important;
        opacity: 1 !important;
    }
}

/* =========================================
   PETITS ÉCRANS (iPhone SE)
   ========================================= */

@media (max-width: 375px) {
    .images-container {
        gap: 6px;
    }
}