/* ==========================================================================
   ADAPTATION POUR LES ÉCRANS MOBILES (Max 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. SECTION ET CONTENEUR GLOBAL */
    .page-section {
        height: auto !important;       /* Permet à la page de s'agrandir selon le contenu */
        min-height: 100vh;
        padding: 80px 4% !important;   /* Moins de marge sur les côtés */
    }

    /* 2. TITRE GÉANT (ANIS ZGAREN) */
    .interactive-text {
        font-size: 3.2rem !important; /* Réduit drastiquement la taille sur mobile */
        letter-spacing: -1px !important;
        flex-wrap: wrap !important;   /* Permet aux lettres de revenir à la ligne */
        justify-content: center !important;
    }
    
    .interactive-text.ln {
        font-size: 4.5rem !important; /* Nom de famille un peu plus adapté */
        letter-spacing: -2px !important;
        margin-top: 15px !important;
    }
    
    .letter-box::after {
        font-size: 0.7rem !important; /* Les adjectifs au survol plus petits */
    }

    /* 3. GRILLE À PROPOS (On passe l'un sous l'autre) */
    .intro-content {
        margin-top: 30px !important;
    }

    .intro-grid {
        grid-template-columns: 1fr !important; /* Une seule colonne verticale */
        gap: 40px !important;                  /* Moins d'espace entre le texte et les compétences */
    }
    
    .intro-title {
        font-size: 2rem !important;            /* Titre de section plus petit */
    }
    
    .grid-right {
        justify-content: center !important;    /* Centre la carte de compétences */
    }

    /* 4. CARROUSEL 3D DES TRACES (On l'aplatit pour le mobile) */
    .carousel-3d-wrapper {
        height: auto !important;               /* Plus de hauteur fixe bloquante */
        display: flex !important;
        flex-direction: column !important;
        perspective: none !important;          /* On enlève la 3D complexe sur petit écran */
    }
    
    .carousel-track {
        display: flex !important;
        flex-direction: column !important;     /* Les cartes s'empilent verticalement */
        gap: 20px !important;
        height: auto !important;
    }
    
    .trace-card {
        position: relative !important;         /* Elles reprennent une place normale */
        left: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;                /* Prennent toute la largeur dispo */
        max-width: 340px !important;
    }
    
    /* On annule les décalages d'ordinateurs qui font bugger l'écran */
    .trace-card.position-left, 
    .trace-card.position-right, 
    .trace-card.position-center {
        transform: none !important;
        opacity: 1 !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;
    }
/* ==========================================================================
       RÉPARATION DU HEADER ET MENU MOBILE ( navbar )
       ========================================================================== */
    
    .navbar {
        padding: 10px 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* 1. On cache la liste de liens horizontale sur mobile */
    .floema-nav-container {
        display: none !important; /* Cache le menu horizontal par défaut */
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        width: 100% !important;
        background-color: var(--bg-creme) !important;
        padding: 20px !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
        z-index: 999 !important;
    }

    /* 2. On affiche le menu uniquement quand le burger ajoute la classe .open */
    .floema-nav-container.open {
        display: block !important;
    }

    /* 3. On force les liens à s'aligner verticalement dans le menu ouvert */
    .nav-pills-liquid-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
    }

    /* 4. On s'assure que le bouton Burger est bien visible sur mobile */
    .burger-menu {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 24px !important;
        height: 18px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 1000 !important;
        margin-left: 15px !important;
    }

    /* Style basique des barres du burger au cas où */
    .burger-menu span {
        display: block !important;
        width: 100% !important;
        height: 2px !important;
        background-color: var(--text-dark) !important;
        transition: all 0.3s ease !important;
    }

    /* Cache le texte des boutons d'authentification s'il y en a un pour gagner de la place */
    .btn-auth .btn-text {
        display: none !important;
    }
    
    .header-right {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
}