/**
 * responsive-fix.css — Corrections Mobile & Tablette
 * Site: d31-demo1-v2.vps.mrrometo.ovh
 * Date: 28/03/2026
 * 
 * PRINCIPE: Uniquement des @media queries et clamp()
 * → Le desktop reste IDENTIQUE (aucun style non-media modifié)
 *
 * Ordre: mobile-first overrides sur les styles inline existants
 */

/* ==================== FIX OVERFLOW HORIZONTAL ==================== */

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ==================== BOUTONS HERO (remplace les styles inline) ==================== */

.btn-hero {
    font-size: 1.1rem;
    padding: 1rem 2rem;
}

.btn-outline.btn-hero {
    border-color: #fff;
    color: #fff;
}

/* ==================== TYPOGRAPHIE FLUIDE (tous écrans) ==================== */
/* clamp() = min, preferred, max → transition fluide sans breakpoints */

.hero h1 {
    font-size: clamp(1.5rem, 4vw + 0.5rem, 3.2rem) !important;
}

.hero p {
    font-size: clamp(0.95rem, 1.2vw + 0.4rem, 1.2rem) !important;
}

.section-header h2 {
    font-size: clamp(1.6rem, 3vw + 0.5rem, 2.5rem) !important;
}

.stat-number {
    font-size: clamp(1.4rem, 2.5vw + 0.4rem, 2.5rem) !important;
}

/* ==================== TABLETTE (max 1024px) ==================== */

@media (max-width: 1024px) {

    /* --- LAYOUT: Sticky au lieu de Fixed --- */
    .header {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        left: auto !important;
    }

    .nav-main {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        left: auto !important;
    }

    .hero,
    .hero.first-section,
    .first-section {
        margin-top: 0 !important;
    }

    /* --- HERO --- */
    .hero {
        padding: 4rem 2rem !important;
    }

    .hero-container {
        flex-direction: column !important;
        text-align: center;
    }

    .hero-stats {
        flex: auto !important;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }

    .hero p {
        margin: 0 auto 2rem !important;
    }

    .hero-actions {
        justify-content: center;
    }

    /* --- GRIDS TABLETTE --- */
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .realisations-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==================== MOBILE (max 768px) ==================== */

@media (max-width: 768px) {

    /* --- HEADER MOBILE: [☰] [=== Logo D31 ===] [🛒] [🔒] --- */
    .header {
        padding: 0.6rem 0.8rem !important;
        gap: 0.6rem;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* Hamburger à GAUCHE — forcer visible + order */
    .header .hamburger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        order: -1 !important;
        z-index: 1002;
        padding: 4px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .header .hamburger span {
        display: block !important;
        width: 26px;
        height: 3px;
        background: var(--blanc);
        margin: 4px 0;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.2s ease;
    }

    /* Logo au CENTRE, prend toute la place libre */
    .header .header-logo {
        flex: 1 1 auto !important;
        order: 0 !important;
        min-width: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .header .header-logo img {
        height: 50px !important;
        max-width: 100%;
        object-fit: contain;
    }

    /* Actions à DROITE — forcer visible */
    .header .header-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        order: 1 !important;
        gap: 0.4rem !important;
        align-items: center;
    }

    /* Bouton Boutique: icône caddie seule (masquer texte) */
    .header .header-actions .btn-primary {
        padding: 0.5rem !important;
        gap: 0 !important;
        font-size: 1.15rem !important;
        display: inline-flex !important;
    }

    .header .header-actions .btn-primary .btn-text {
        display: none !important;
    }

    /* Bouton Login: icône seule */
    .header .header-actions .btn-outline {
        font-size: 0 !important;
        padding: 0.45rem !important;
        gap: 0 !important;
        display: inline-flex !important;
    }

    /* --- NAVIGATION: Cachée par défaut, dropdown sous le header --- */
    .nav-main {
        display: none !important;
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        background: var(--noir-light) !important;
        border-bottom: 2px solid var(--rouge);
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }

    .nav-main.active {
        display: block !important;
    }

    /* Positionner la nav juste sous le header via JS (fallback: top calculé) */
    .header ~ .nav-main {
        top: 70px !important;
    }

    .nav-container {
        flex-direction: column !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .nav-item {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .nav-item:last-child {
        border-bottom: none;
    }

    .nav-item > a {
        padding: 1rem 1.5rem !important;
        font-size: 0.95rem !important;
        width: 100%;
        text-align: left;
    }

    .nav-item > a:hover,
    .nav-item > a.active {
        background: rgba(204, 0, 0, 0.1) !important;
    }

    /* --- MEGA DROPDOWN: Pleine largeur mobile --- */
    .mega-dropdown {
        position: static !important;
        min-width: auto !important;
        width: 100% !important;
        transform: none !important;
        left: auto !important;
        border-radius: 0 !important;
        flex-direction: column !important;
        padding: 1rem 1.5rem !important;
        display: none !important;
    }

    .nav-item.dropdown-open .mega-dropdown {
        display: flex !important;
    }

    .mega-col {
        min-width: auto !important;
    }

    /* --- HAMBURGER: Animation barres → croix --- */
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }

    /* --- HERO --- */
    .hero {
        padding: 3rem 1.2rem !important;
    }

    .hero-badge {
        font-size: 0.75rem !important;
    }

    .hero-actions {
        flex-direction: column !important;
        width: 100%;
    }

    /* Surcharger les styles inline des boutons hero */
    .hero-actions .btn {
        width: 100% !important;
        justify-content: center !important;
        font-size: 1rem !important;
        padding: 0.9rem 1.5rem !important;
        box-sizing: border-box !important;
    }

    .hero-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.8rem !important;
    }

    .stat-card {
        padding: 1rem !important;
    }

    .stat-label {
        font-size: 0.75rem !important;
    }

    /* --- SECTIONS --- */
    .section {
        padding: 3rem 0 !important;
    }

    .container {
        padding: 0 1.2rem !important;
    }

    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .filiales-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .realisations-grid {
        grid-template-columns: 1fr !important;
    }

    .epreuves-content {
        flex-direction: column !important;
    }

    .epreuves-visual {
        flex: auto !important;
        width: 100% !important;
        height: 250px !important;
    }

    /* --- FOOTER --- */
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    footer {
        padding: 3rem 1.5rem 1.5rem !important;
    }
}

/* ==================== PETIT MOBILE (max 480px) ==================== */

@media (max-width: 480px) {

    /* --- HEADER COMPACT --- */
    .header {
        padding: 0.6rem 0.8rem !important;
    }

    .header-logo img {
        height: 36px !important;
    }

    /* Boutons header: icônes seules sur très petit écran */
    .header-actions .btn {
        font-size: 0 !important;
        padding: 0.45rem !important;
        gap: 0 !important;
        min-width: 34px;
        justify-content: center;
    }

    .header-actions .btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Emoji 🛒 du bouton Boutique */
    .header-actions .btn-primary {
        font-size: 1rem !important;
        padding: 0.4rem 0.5rem !important;
    }

    /* --- HERO COMPACT --- */
    .hero {
        padding: 2rem 1rem !important;
    }

    .hero h1 br {
        display: none;
    }

    /* Stats: 4 colonnes très compactes */
    .hero-stats {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.4rem !important;
    }

    .stat-card {
        padding: 0.6rem 0.3rem !important;
    }

    .stat-label {
        font-size: 0.6rem !important;
        line-height: 1.2;
    }

    /* --- BOUTONS HERO --- */
    .hero-actions .btn {
        font-size: 0.9rem !important;
        padding: 0.8rem 1rem !important;
    }

    /* --- SECTIONS COMPACT --- */
    .section {
        padding: 2rem 0 !important;
    }

    .section-header p {
        font-size: 0.95rem !important;
    }

    /* --- FOOTER COMPACT --- */
    .footer-grid {
        grid-template-columns: 1fr !important;
    }

    .footer-brand {
        grid-column: auto;
    }

    footer {
        padding: 2rem 1rem 1rem !important;
    }
}

/* ==================== SHOP WP: Surcharger styles inline ==================== */
/* Le shop WordPress a des styles inline (spécificité max) sur le hero,
   les grids, les sections. On surcharge avec !important. */

@media (max-width: 1024px) {
    .hero-container[style] {
        flex-direction: column !important;
        text-align: center !important;
        gap: 2rem !important;
        padding: 0 1rem !important;
    }

    .hero-stats[style] {
        flex: auto !important;
        width: 100% !important;
        max-width: 500px !important;
        margin: 0 auto !important;
    }

    .hero-text[style] {
        flex: auto !important;
    }

    .services-grid[style] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .realisations-grid[style] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    /* Hero inline styles override */
    .hero[style],
    .hero.first-section[style],
    section.hero[style] {
        margin-top: 0 !important;
        padding: 3rem 1.2rem !important;
    }

    .hero-container[style] {
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 0 0.5rem !important;
    }

    .hero-text[style] {
        flex: auto !important;
    }

    /* Hero h1 avec style inline */
    .hero h1[style],
    .hero-text h1[style] {
        font-size: clamp(1.5rem, 4vw + 0.5rem, 3.2rem) !important;
    }

    .hero p[style] {
        font-size: clamp(0.95rem, 1.2vw + 0.4rem, 1.2rem) !important;
        max-width: 100% !important;
    }

    .hero-actions[style] {
        flex-direction: column !important;
        width: 100% !important;
    }

    .hero-actions .btn[style] {
        width: 100% !important;
        justify-content: center !important;
        font-size: 1rem !important;
        padding: 0.9rem 1.5rem !important;
        box-sizing: border-box !important;
    }

    .hero-stats[style] {
        flex: auto !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.8rem !important;
    }

    .stat-card[style] {
        padding: 1rem !important;
    }

    .stat-number[style] {
        font-size: clamp(1.4rem, 2.5vw + 0.4rem, 2.5rem) !important;
    }

    .stat-label[style] {
        font-size: 0.75rem !important;
    }

    /* Sections avec styles inline */
    .section[style],
    section.section[style] {
        padding: 3rem 0 !important;
    }

    .container[style] {
        padding: 0 1.2rem !important;
    }

    .section-header h2[style] {
        font-size: clamp(1.6rem, 3vw + 0.5rem, 2.5rem) !important;
    }

    .section-header p[style] {
        font-size: 0.95rem !important;
    }

    /* Grids inline */
    .services-grid[style] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .realisations-grid[style] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Produits WooCommerce */
    ul.products[style] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .service-card[style] {
        padding: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .hero[style],
    section.hero[style] {
        padding: 2rem 1rem !important;
    }

    .hero-stats[style] {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.4rem !important;
    }

    .stat-card[style] {
        padding: 0.6rem 0.3rem !important;
    }

    .stat-label[style] {
        font-size: 0.6rem !important;
    }

    .hero-actions .btn[style] {
        font-size: 0.9rem !important;
        padding: 0.8rem 1rem !important;
    }
}

/* ==================== TRÈS PETIT MOBILE (max 360px) ==================== */

@media (max-width: 360px) {
    .hero-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.3rem !important;
    }

    .stat-card {
        padding: 0.5rem !important;
    }

    .hero h1 {
        font-size: 1.3rem !important;
    }

    .header-actions .btn-outline {
        display: none !important;
    }
}