/* css/responsive.css - REFONTE COMPLÈTE */

/* =========================================
   TABLETTES & PETITS PC PORTABLES (max 992px)
   ========================================= */
@media (max-width: 992px) {
    
    /* --- Général --- */
    .section-padding { padding: 6rem 0; }
    
    /* --- Hero Section --- */
    .hero {
        padding-top: 100px; /* Rapprocher le contenu sous la navbar */
        height: auto; /* Plus de hauteur fixe */
        min-height: auto;
        padding-bottom: 80px; /* Espace pour la stats bar */
    }

    .hero-content {
        grid-template-columns: 1fr; /* Passage en une seule colonne */
        text-align: center;
        gap: 3rem;
    }

    .hero-text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 1; /* Le texte en premier */
    }

    .hero-title {
        align-items: center; /* Centrer les blocs de titre */
    }
    
    .hero-actions {
        justify-content: center;
    }

    .hero-visual {
        order: 2; /* L'image en dessous */
    }

    .disc-container {
        /* Réduction de la taille du disque */
        width: 400px;
        height: 400px;
    }

    /* --- Stats Bar --- */
    .stats-bar {
        margin-top: 0; /* Plus de chevauchement négatif */
        padding: 2rem 0;
    }

    /* --- Grids (Cartes et Matériaux) --- */
    .cards-grid,
    .materials-showcase {
        grid-template-columns: repeat(2, 1fr); /* Passage à 2 colonnes */
    }

    /* --- Footer --- */
    .footer-container {
        grid-template-columns: 1fr 1fr; /* 2 colonnes */
        gap: 3rem;
    }
    
    /* La première colonne prend toute la largeur sur tablette */
    .footer-col:first-child {
        grid-column: 1 / -1;
        text-align: center;
    }
    .footer-brand { align-items: center; }
}

/* =========================================
   MOBILES (max 768px)
   ========================================= */
@media (max-width: 768px) {

    /* --- Général --- */
    .section-padding { padding: 4rem 0; }
    .container { padding: 0 1.5rem; }
    
    /* Ajustement des titres pour mobile */
    h1.hero-title .title-bold { font-size: 2.8rem; letter-spacing: -0.03em; }
    h1.hero-title .title-tech { font-size: 2rem; margin-top: 5px; }
    .section-header h2 { font-size: 2rem; }

    /* --- Navbar --- */
    .nav-container {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    /* Sans menu burger JS, on empile les liens proprement */
    .nav-menu {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-link { font-size: 0.8rem; }
    .nav-cta { padding: 0.5rem 1rem; font-size: 0.8rem; }

    /* --- Hero Section --- */
    .hero { padding-top: 160px; } /* Plus d'espace car navbar plus haute */

    .hero-subtitle { font-size: 1rem; }

    .btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.85rem;
        width: 100%; /* Boutons pleine largeur sur mobile */
    }

    .hero-actions { flex-direction: column; width: 100%; gap: 0.8rem; }

    .disc-container {
        /* Disque beaucoup plus petit */
        width: 280px;
        height: 280px;
    }

    /* Ajustement des badges flottants sur le petit disque */
    .float-badge {
        padding: 0.4rem 0.8rem;
        font-size: 0.7rem;
    }
    .float-badge i { font-size: 0.9rem; }
    .badge-top { top: 0; right: -10px; }
    .badge-bottom { bottom: 0; left: -10px; }

    /* --- Stats Bar --- */
    .stats-grid {
        flex-direction: column; /* Empiler les stats */
        gap: 2rem;
    }
    .stat-divider { 
        width: 50px; height: 1px; /* Devient un séparateur horizontal */
    }
    .stat-number { font-size: 2.2rem; }

    /* --- Grids (Passage en 1 colonne) --- */
    .cards-grid,
    .materials-showcase,
    .footer-container {
        grid-template-columns: 1fr;
    }

    .glass-panel { padding: 2rem 1.5rem; }

    /* --- CTA Final --- */
    .cta-final { padding: 4rem 1.5rem; }
    .cta-content h2 { font-size: 2rem; }
    .btn-large { width: auto; } /* Le bouton final peut garder sa taille */

    /* --- Footer --- */
    .footer-container {
        text-align: center;
        gap: 2.5rem;
    }
    .footer-col a, .footer-col span {
        justify-content: center; /* Centrer les liens */
    }
    footer { padding-top: 3rem; }

    /* Cacher la flèche de scroll sur mobile, peu utile */
    .scroll-down { display: none; }
}

/* =========================================
   PETITS MOBILES (max 380px)
   ========================================= */
@media (max-width: 380px) {
    .title-bold { font-size: 2.2rem !important; }
    .title-tech { font-size: 1.6rem !important; }
    .disc-container { width: 240px; height: 240px; }
    
    /* Cacher les badges sur très petits écrans si ça surcharge */
    .float-badge { display: none; } 
}