/* =====================================================================
   📱 ACCUEIL (INDEX) MOBILE - VERSION OPTIMISÉE
   ===================================================================== */

/* =====================================================================
   📱 TABLETTE (< 1024px)
   ===================================================================== */

@media (max-width: 1024px) {
    
    /* ===== WRAPPER GÉNÉRAL ===== */
    html body .home-wrapper {
        width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* ===== SECTION HERO ===== */
    html body .hero {
        padding: 30px 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* ===== TITRE ===== */
    html body .hero-title {
        font-size: 2.2rem !important;
        letter-spacing: 4px !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    html body .hero-subtitle {
        font-size: 0.9rem !important;
        padding: 0 20px !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    /* ===== MASCOTTE RÉDUITE ===== */
    html body .floating-mascot {
        width: 150px !important;
        height: auto !important;
        margin: 20px auto !important;
        display: block !important;
    }

    /* ===== CONTENEUR DES BOUTONS ===== */
    html body .home-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }

    /* ===== GROUPES DE BOUTONS ===== */
    html body .btn-group {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 !important;
    }

    /* ===== BOUTONS PRINCIPAUX ===== */
    html body .btn-main {
        padding: 14px 20px !important;
        font-size: 0.85rem !important;
        letter-spacing: 2px !important;
        border-radius: 10px !important;
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* ===== SOUS-TEXTE BOUTONS ===== */
    html body .btn-subtext {
        font-size: 0.65rem !important;
        margin-top: 5px !important;
        opacity: 0.8 !important;
        text-align: center !important;
    }

    /* ===== CARTES PILIERS (Features en bas) ===== */
    html body .pillars {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 30px 20px !important;
    }

    html body .pillar-card {
        padding: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =====================================================================
   📱 MOBILE (< 768px)
   ===================================================================== */

@media (max-width: 768px) {
    
    /* ===== HERO PLUS COMPACT ===== */
    html body .hero {
        padding: 25px 12px !important;
    }

    /* ===== TITRE MOBILE ===== */
    html body .hero-title {
        font-size: 1.8rem !important;
        letter-spacing: 3px !important;
        margin-bottom: 8px !important;
    }

    html body .hero-subtitle {
        font-size: 0.8rem !important;
        padding: 0 15px !important;
        margin-bottom: 15px !important;
    }

    /* ===== MASCOTTE MOBILE ===== */
    html body .floating-mascot {
        width: 120px !important;
        margin: 15px auto !important;
    }

    /* ===== BOUTONS MOBILE ===== */
    html body .home-actions {
        max-width: 320px !important;
        gap: 12px !important;
    }

    html body .btn-group {
        max-width: 260px !important;
    }

    html body .btn-main {
        padding: 12px 18px !important;
        font-size: 0.8rem !important;
        letter-spacing: 1.5px !important;
    }

    html body .btn-subtext {
        font-size: 0.6rem !important;
    }

    /* ===== PILIERS MOBILE ===== */
    html body .pillars {
        gap: 15px !important;
        padding: 25px 15px !important;
    }

    html body .pillar-card {
        padding: 15px !important;
    }
}

/* =====================================================================
   📱 TRÈS PETIT MOBILE (< 480px)
   ===================================================================== */

@media (max-width: 480px) {
    
    /* ===== HERO ULTRA-COMPACT ===== */
    html body .hero {
        padding: 20px 10px !important;
    }

    /* ===== TITRE MINI ===== */
    html body .hero-title {
        font-size: 1.5rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 6px !important;
    }

    html body .hero-subtitle {
        font-size: 0.75rem !important;
        padding: 0 10px !important;
        margin-bottom: 12px !important;
    }

    /* ===== MASCOTTE MINI ===== */
    html body .floating-mascot {
        width: 100px !important;
        margin: 12px auto !important;
    }

    /* ===== BOUTONS MINI ===== */
    html body .home-actions {
        max-width: 280px !important;
        gap: 10px !important;
    }

    html body .btn-group {
        max-width: 240px !important;
    }

    html body .btn-main {
        padding: 10px 15px !important;
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
        border-radius: 8px !important;
    }

    html body .btn-subtext {
        font-size: 0.55rem !important;
        margin-top: 3px !important;
    }

    /* ===== PILIERS MINI ===== */
    html body .pillars {
        gap: 12px !important;
        padding: 20px 12px !important;
    }

    html body .pillar-card {
        padding: 12px !important;
    }

    html body .pillar-card h3 {
        font-size: 1rem !important;
    }

    html body .pillar-card p {
        font-size: 0.75rem !important;
    }
}

/* =====================================================================
   🎨 AMÉLIORATIONS VISUELLES
   ===================================================================== */

@media (max-width: 1024px) {
    /* Force le box-sizing partout */
    * {
        box-sizing: border-box !important;
    }
    
    /* Empêche le débordement horizontal */
    body {
        overflow-x: hidden !important;
    }
    
    /* Animation au tap sur les boutons */
    html body .btn-main:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s !important;
    }
}