/* ==========================================================================
   VERSION MOBILE & MENU BURGER (100% CSS)
   ========================================================================== */

/* Cache la case à cocher du burger par défaut sur ordinateur */
.menu-toggle {
    display: none;
}

/* Style de l'icône burger (Cachée sur ordinateur) */
.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 1000;
}

/* Dessin des 3 barres horizontales du burger */
.burger-menu span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* 📱 ADAPTATION POUR ÉCRANS MOBILES (Max 768px) */
@media (max-width: 768px) {
    
    /* 1. Affichage du bouton burger */
    .burger-menu {
        display: flex; /* On l'affiche uniquement sur mobile */
    }

    /* 2. Transformation des liens de navigation en menu déroulant plein écran */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* Cache le menu sur le côté droit de l'écran par défaut */
        width: 70%;  /* Le menu prend 70% de la largeur de l'écran */
        height: 100vh;
        background-color: #0b112c; /* Fond sombre assorti à ton site */
        border-left: 2px solid #1e295d;
        flex-direction: column; /* Aligne les liens verticalement */
        justify-content: center;
        align-items: center;
        gap: 30px;
        transition: right 0.4s ease-in-out;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    /* 3. LA MAGIE DU CSS : Quand on clique sur le burger (input coché), le menu glisse vers la gauche */
    .menu-toggle:checked ~ .nav-links {
        right: 0; 
    }

    /* 4. Animation des barres du burger pour former une croix (X) quand le menu est ouvert */
    .menu-toggle:checked + .burger-menu span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background-color: #ffcc00; /* Devient doré */
    }

    .menu-toggle:checked + .burger-menu span:nth-child(2) {
        opacity: 0; /* Cache la barre du milieu */
    }

    .menu-toggle:checked + .burger-menu span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background-color: #ffcc00;
    }

    /* ==========================================
       RESPONSIVE DU RESTE DES PAGES (GRILLES & TEXTES)
       ========================================== */

    /* Force les structures en grille à se mettre sur une seule colonne sur mobile */
    .continents-grid, .products, .features, .testimonials, .about {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        gap: 20px;
    }

    /* Ajustement des fiches produits individuelles (comme pagealgerie.html) */
    .about {
        padding: 10px;
    }
    .product-image-container, .product-details {
        width: 100% !important;
        max-width: 100%;
        text-align: center;
    }

    /* Redimensionne les gros titres pour qu'ils ne coupent pas sur petit écran */
    h1 {
        font-size: 2rem !important;
    }
    h2 {
        font-size: 1.6rem !important;
    }

    /* Ajustement des formulaires (Newsletter) */
    .newsletter form {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    .newsletter input, .newsletter button {
        width: 100% !important;
        margin: 0 !important;
    }
}