/* ==========================================================================
   SYSTEME RESPONSIVE INTERNE - OVERWATCH INTEL
   ========================================================================== */

/* 1. TABLETTES ET ÉCRANS INTERMÉDIAIRES (Max 1024px) */
@media screen and (max-width: 1024px) {
    header {
        padding: 20px 4%;
    }

    .content-section {
        padding: 40px 4%;
    }

    .grid-3 {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }

    .hero-banner {
        padding: 0 5%;
    }
}

/* 2. SMARTPHONES ET PETITES TABLETTES (Max 768px) */
@media screen and (max-width: 768px) {
    /* Menu & Navigation */
    header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding: 15px 20px;
    }

    nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 15px;
    }

    nav a {
        font-size: 0.95rem;
    }

    /* Hero Section */
    .hero-banner {
        height: auto;
        min-height: 60vh;
        padding: 60px 20px;
        box-sizing: border-box;
    }

    .hero-banner h1 {
        font-size: 2.2rem;
        line-height: 1.3;
    }

    .hero-banner p {
        font-size: 1.1rem;
    }

    .main-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .btn-secondary {
        margin-left: 0 !important; /* Corrige le décalage sur mobile */
    }

    /* Section Headers & Titres */
    h1, .section-header h2 {
        font-size: 1.8rem !important;
    }

    /* Grilles et Conteneurs */
    .grid-3 {
        grid-template-columns: 1fr; /* Passage sur une seule colonne */
        gap: 20px;
    }

    .mode-sub-grid, .roles-presentation {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 20px;
    }

    /* Blocs de contenu (Histoire, Forge, Modes) */
    .story-block, .mode-detail-block, .forge-block {
        padding: 30px 20px;
        margin-bottom: 25px;
    }

    /* Moteur de recherche et Filtres (Page Personnages) */
    .search-input {
        width: 100%;
        max-width: 100%;
    }

    .filters {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .filter-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
        flex: 1 1 calc(50% - 10px); /* Aligne les boutons 2 par 2 sur mobile */
        text-align: center;
    }

    /* Simulateur interactif de la Forge */
    .interactive-container {
        padding: 15px;
    }

    .interactive-container style + div, 
    .interactive-container div[style*="flex"] {
        display: block !important; /* Désactive les alignements en ligne forcés */
    }

    #event-select, #action-select {
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 15px;
    }

    /* Badges Absolus */
    .forge-tech-badge, .story-badge {
        position: relative;
        top: 0;
        left: 0;
        display: inline-block;
        margin-bottom: 15px;
    }
}

/* 3. TRÈS PETITS SMARTPHONES (Max 480px) */
@media screen and (max-width: 480px) {
    header .logo {
        font-size: 1.3rem;
    }

    nav a {
        font-size: 0.85rem;
    }

    .hero-banner h1 {
        font-size: 1.8rem;
    }

    .filter-btn {
        flex: 1 1 100%; /* Les boutons de filtre prennent toute la largeur */
    }

    .quiz-options-grid {
        grid-template-columns: 1fr !important;
    }
}