/*
 * CORRECTIONS RESPONSIVE MOBILE - SimuBrick
 * Fichier spécifique pour corriger les problèmes de débordement horizontal
 * sur les écrans mobiles (360px et moins)
 */

/* CORRECTION GLOBALE : Empêcher le débordement horizontal */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* CORRECTION POUR ÉCRANS MOBILES (640px et moins) */
@media (max-width: 640px) {
    
    /* Container principal */
    .container {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Titres responsive */
    h1, .text-4xl, .text-5xl, .text-6xl {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    h2, .text-2xl, .text-3xl {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    h3, .text-xl {
        font-size: 1.125rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Texte général */
    p, span, div, .text-base, .text-lg {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }
    
    /* Paddings et marges Tailwind */
    .px-8, .px-12, .px-16 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .py-8 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Largeurs maximales */
    .max-w-6xl, .max-w-4xl, .max-w-3xl {
        max-width: 100% !important;
    }
    
    /* Flexbox responsive */
    .flex {
        flex-wrap: wrap !important;
    }
    
    .space-x-4 > * + * {
        margin-left: 0 !important;
        margin-top: 0.5rem !important;
    }
    
    .space-x-6 > * + * {
        margin-left: 0 !important;
        margin-top: 0.75rem !important;
    }
    
    /* Grilles responsive */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    /* Boutons responsive */
    .btn, button, .bg-primary, .bg-accent-1 {
        width: 100% !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
    }
    
    /* Navigation responsive */
    nav ul {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    nav li {
        margin: 0 !important;
        width: 100% !important;
    }
    
    nav a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0.75rem !important;
    }
    
    /* Header responsive */
    header {
        padding: 0.5rem !important;
    }
    
    header img {
        max-width: 80px !important;
        height: auto !important;
    }
    
    /* Main content responsive */
    main {
        padding: 1rem !important;
    }
    
    /* Fieldset responsive */
    fieldset {
        width: 100% !important;
        max-width: 100% !important;
        margin: 1rem auto !important;
        padding: 0.5rem !important;
    }
    
    legend {
        font-size: 1.25rem !important;
        text-align: center !important;
    }
    
    /* Bouton flottant Avis */
    .fixed.bottom-4.right-4 {
        bottom: 1rem !important;
        right: 1rem !important;
        z-index: 50 !important;
    }
}

/* CORRECTION POUR TRÈS PETITS ÉCRANS (360px et moins) */
@media (max-width: 360px) {
    
    .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    h1, .text-4xl, .text-5xl, .text-6xl {
        font-size: 1.25rem !important;
    }
    
    h2, .text-2xl, .text-3xl {
        font-size: 1rem !important;
    }
    
    h3, .text-xl {
        font-size: 0.875rem !important;
    }
    
    main {
        padding: 0.5rem !important;
    }
    
    fieldset {
        padding: 0.25rem !important;
    }
    
    /* Bouton Avis encore plus petit */
    .fixed.bottom-4.right-4 {
        bottom: 0.5rem !important;
        right: 0.5rem !important;
        transform: scale(0.9) !important;
    }
    
    /* Paddings encore plus réduits */
    .px-8, .px-12, .px-16 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .py-8 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}

/* CORRECTION SPÉCIFIQUE POUR LE TITRE PRINCIPAL */
@media (max-width: 640px) {
    .text-center h1 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        padding: 0 0.5rem !important;
    }
    
    .text-center h2 {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        padding: 0 0.5rem !important;
    }
    
    .text-center h3 {
        font-size: 1.125rem !important;
        line-height: 1.2 !important;
        padding: 0 0.5rem !important;
    }
}

/* CORRECTION POUR LES ICÔNES ET ÉMOJIS */
@media (max-width: 640px) {
    .text-4xl .emoji,
    .text-5xl .emoji,
    .text-6xl .emoji {
        font-size: 1.2em !important;
    }
    
    i.fa, i.fas, i.far, i.fab {
        font-size: 0.9em !important;
    }
}

/* CORRECTION POUR LES FORMULAIRES */
@media (max-width: 640px) {
    input, select, textarea {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .champ {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
    }
    
    .valuePadding {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* CORRECTION POUR LES TABLEAUX */
@media (max-width: 640px) {
    table {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 0.875rem !important;
    }
    
    table td, table th {
        padding: 0.25rem !important;
        word-wrap: break-word !important;
    }
}