/* styles/main.css */

/* Import des variables */
@import url('./__variables.css');


/* Import des composants */
@import url('./components/header.css');
@import url('./components/footer.css');
@import url('./components/cookie.css'); 
@import url('./pages/home.css');
/* @import url('./pages/personnages.css'); */
@import url('./pages/characters.css');
@import url('./pages/play.css');
@import url('./pages/family-guide.css');
@import url('./pages/contact.css');
@import url('./button.css');
@import url('./pages/legal.css');
@import url('./pages/cookies.css');

/* Import des composants */
@import url('./pages/articles/index.css');
/* @import url('./components/header.css'); */
/* @import url('./components/footer.css');
@import url('./components/cookie.css'); */

/* Import des styles de pages */
/* @import url('./pages/home.css');
@import url('./pages/jouer.css');
@import url('./pages/personnages.css');
@import url('./pages/contact.css'); */


/* Reset et styles de base */
* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    
}


/* Classes utilitaires communes */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.main-content {
    padding-top: 50px; /* Espace pour le header fixe */
    min-height: calc(100vh - 80px);
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}

/* Styles de boutons communs */


/* Media Queries ajustées */
@media (max-width: 768px) {
    .main-content {
        padding-top: 0; /* Supprimé le padding-top sur mobile aussi */
        margin-top: 0;
        position: relative;
        z-index: 1;
    }
    
    .main-header {
        position: relative; /* Changé de fixed à relative si nécessaire */
        width: 100%;
        z-index: 2;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
}


/* FIX MOBILE POUR LES GAME-CARDS */
@media (max-width: 768px) {
    .game-section {
        padding: 2rem 1rem !important;
        gap: 1.5rem !important;
    }
    
    .game-card {
        width: 100% !important;
        max-width: 350px !important;
        margin: 0 auto !important;
    }
    
    .download-options {
        padding: 1.5rem 1rem !important;
        max-width: 90vw !important;
        max-height: 80vh !important;
        overflow-y: auto !important; /* ← Scrollable */
    }
    
    .download-options .store {
        display: block !important;
        width: 100% !important;
        max-width: 200px !important;
        margin: 0.75rem auto !important;
    }
    
    .store-image {
        width: 100% !important;
        height: auto !important;
        max-width: 200px !important; /* ← Plus coupé ! */
    }
    
    .close-btn {
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }
    
    .download-btn {
        font-size: 0.9rem !important;
        padding: 0.75rem 1.5rem !important;
        white-space: nowrap !important; /* ← Texte pas coupé ! */
    }
}

/* MOBILE FIX POUR SAFARI - Cache la section "Are you ready to play?" */

@media (max-width: 768px) {
    /* Cache toute la section "Are you ready to play?" sur mobile */
    .split-section {
        display: none !important;
    }
    
    /* Cache aussi le SVG enveloppe juste avant si besoin */
    .enveloppe {
        display: none !important;
    }
}

/* MOBILE FIX COMPLET POUR SAFARI */

@media (max-width: 768px) {
    
    /* ========== FIX TITRE "FAVORITE CHARACTERS" ========== */
    
    /* Centre et responsive le titre */
    .start-container2 {
        text-align: center !important;
        padding: 2rem 1rem !important;
    }
    
    .start-container2 .indextitle {
        font-size: 2rem !important;
        text-align: center !important;
        margin: 1rem auto !important;
        padding: 0 1rem !important;
        width: 100% !important;
    }
    
    /* Centre le bouton LET'S PLAY */
    .start-container2 .btnprimary {
        margin: 1rem auto !important;
        display: block !important;
    }
    
    
    /* ========== FIX SECTION "ARE YOU READY TO PLAY?" ========== */
    
    /* Cache la partie rose */
    .split-section .top-part {
        display: none !important;
    }
    
    /* Cache l'image AllCharacters */
    .split-section .video-container {
        display: none !important;
    }
    
    /* Garde les boutons bien alignés */
    .split-section .bottom-part {
        width: 100% !important;
        padding: 2rem 1rem !important;
    }
    
    .split-section .content-overlay {
        text-align: center !important;
        padding: 2rem 1rem !important;
    }
    
    /* Titre "Are you ready to play?" responsive */
    .play-title {
        font-size: 1.8rem !important;
        margin-bottom: 2rem !important;
    }
    
    /* Boutons stores en colonne */
    .store-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
    }
    
    .store-link {
        width: 100% !important;
        max-width: 280px !important;
    }
}