/* =============================================
   RESPONSIVE DESIGN
   Mobile-first approach avec breakpoints optimisés
   ============================================= */

/* =============================================
   TABLETTES — max 992px
   ============================================= */

@media (max-width: 992px) {
    header {
        width: 90%;
        padding: 0.8rem 1.5rem;
    }

    .nav-links {
        gap: 1.3rem;
    }

    .nav-links a {
        font-size: 0.9rem;
    }

    .hero {
        padding-top: 130px;
    }

    .hero-title {
        font-size: clamp(3rem, 10vw, 5rem);
        letter-spacing: 2.5px;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-overlay {
        top: 80px;
        font-size: 0.85rem;
        padding: 11px 20px;
    }

    .logo-img {
        max-width: 300px;
        max-height: 30vh;
    }

    .hero-meta {
        gap: 4px;
    }
}

/* =============================================
   TABLETTES SMALL & MOBILE LARGE — max 768px
   ============================================= */

@media (max-width: 768px) {
    html,
    body {
        overflow: auto;
    }

    header {
        width: 94%;
        padding: 0.6rem 1rem;
        top: 15px;
    }

    .nav-links {
        gap: 0.8rem;
    }

    .nav-links a {
        font-size: 0.78rem;
    }

    .hero {
        padding-top: 120px;
        padding-bottom: 40px;
    }

    .hero-title {
        font-size: clamp(2.2rem, 11vw, 3.6rem);
        letter-spacing: 2px;
    }

    .hero-description {
        font-size: 0.95rem;
        margin-top: 0.6rem;
    }

    .hero-overlay {
        top: 95px;
        padding: 10px 18px;
        font-size: 0.78rem;
        letter-spacing: 1.4px;
    }

    .logo-img {
        max-width: 250px;
        max-height: 28vh;
    }

    .hero-date {
        font-size: 0.95rem;
    }

    .hero-coords {
        font-size: 0.85rem;
        letter-spacing: 1.2px;
    }
}

/* =============================================
   MOBILE — max 600px
   ============================================= */

@media (max-width: 600px) {
    header {
        width: 96%;
        padding: 0.55rem 0.8rem;
        top: 12px;
    }

    .nav-links {
        gap: 0.55rem;
    }

    .nav-links a {
        font-size: 0.72rem;
    }

    .hero {
        padding-top: 110px;
        padding-bottom: 35px;
    }

    .hero-title {
        font-size: clamp(1.8rem, 12vw, 3rem);
        letter-spacing: 1.8px;
    }

    .hero-description {
        font-size: 0.9rem;
        margin-top: 0.5rem;
    }

    .hero-overlay {
        top: 105px;
        padding: 9px 16px;
        font-size: 0.72rem;
        letter-spacing: 1.2px;
    }

    .logo-img {
        max-width: 220px;
        max-height: 26vh;
    }

    .hero-date {
        font-size: 0.9rem;
    }

    .hero-coords {
        font-size: 0.8rem;
        letter-spacing: 1px;
    }
}

/* =============================================
   MOBILE PETIT — max 480px
   ============================================= */

@media (max-width: 480px) {
    header {
        width: 98%;
        padding: 0.5rem 0.6rem;
        top: 10px;
    }

    .nav-links {
        gap: 0.45rem;
    }

    .nav-links a {
        font-size: 0.68rem;
    }

    .hero {
        padding-top: 105px;
        padding-bottom: 30px;
    }

    .hero-title {
        font-size: clamp(1.6rem, 13vw, 2.8rem);
        letter-spacing: 1.5px;
    }

    .hero-description {
        font-size: 0.85rem;
        margin-top: 0.4rem;
    }

    .hero-overlay {
        top: 115px;
        padding: 8px 14px;
        font-size: 0.68rem;
        letter-spacing: 1px;
    }

    .logo-img {
        max-width: 190px;
        max-height: 24vh;
    }

    .hero-date {
        font-size: 0.85rem;
    }

    .hero-coords {
        font-size: 0.75rem;
        letter-spacing: 0.8px;
    }

    .hero-meta {
        gap: 3px;
    }
}

/* =============================================
   MOBILE TRÈS PETIT — max 375px
   ============================================= */

@media (max-width: 375px) {
    header {
        padding: 0.45rem 0.5rem;
    }

    .nav-links {
        gap: 0.35rem;
    }

    .nav-links a {
        font-size: 0.65rem;
    }

    .hero-title {
        font-size: clamp(1.4rem, 14vw, 2.5rem);
    }

    .hero-overlay {
        font-size: 0.65rem;
        padding: 7px 12px;
    }

    .logo-img {
        max-width: 170px;
        max-height: 22vh;
    }
}

/* =============================================
   LANDSCAPE MODE — Orientation paysage mobile
   ============================================= */

@media (max-height: 600px) and (orientation: landscape) {
    html,
    body {
        overflow: auto;
    }

    .hero {
        padding-top: 100px;
        padding-bottom: 25px;
        min-height: auto;
    }

    .hero-overlay {
        top: 70px;
        padding: 7px 14px;
        font-size: 0.7rem;
    }

    .logo-img {
        max-height: 40vh;
        max-width: 200px;
    }
}

/* =============================================
   GRANDES RÉSOLUTIONS — min 1400px
   ============================================= */

@media (min-width: 1400px) {
    header {
        max-width: 1400px;
    }

    .nav-links {
        gap: 2.5rem;
    }

    .nav-links a {
        font-size: 1rem;
    }

    .hero-description {
        font-size: 1.1rem;
    }

    .hero-date {
        font-size: 1.05rem;
    }

    .hero-coords {
        font-size: 1rem;
    }
}

/* =============================================
   TRÈS GRANDES RÉSOLUTIONS — min 1920px
   ============================================= */

@media (min-width: 1920px) {
    header {
        max-width: 1600px;
    }

    .logo-img {
        max-width: 450px;
        max-height: 40vh;
    }
}

/* =============================================
   ACCESSIBILITÉ - Touch targets
   ============================================= */

@media (pointer: coarse) {
    .nav-links a {
        padding: 0.5rem 0.3rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* =============================================
   PRINT STYLES
   ============================================= */

@media print {
    body::before,
    body::after {
        display: none;
    }

    header {
        position: static;
        transform: none;
        background: white;
        color: black;
        border: 1px solid black;
    }

    .nav-links a {
        color: black;
    }

    .overlay-warning {
        border: 1px solid black;
        background: white;
        color: black;
    }

    .hero {
        height: auto;
        padding: 2rem 1rem;
    }
}