/**
 * ============================================================================
 * REFONTE COMPLÈTE DE LA RÉACTIVITÉ (RESPONSIVENESS) - UMOA Market
 * ============================================================================
 * 
 * Système unifié d'espacement avec clamp() pour adaptation automatique
 * Optimisation mobile-first avec règles strictes pour densité et fluidité
 * 
 * @package UMOA
 * @version 1.0
 * @date 2026
 */

/* ============================================================================
   VARIABLES RACINES (:root)
   ============================================================================ */

:root {
    /* ========================================================================
       ESPACEMENTS ADAPTATIFS AVEC clamp()
       ======================================================================== */
    
    /* Padding des sections - S'adapte automatiquement selon la taille d'écran */
    --section-padding-vertical: clamp(20px, 5vh, 80px);
    --section-padding-horizontal: clamp(15px, 4vw, 40px);
    
    /* Espacement entre blocs - Max 24px sur mobile */
    --block-spacing-mobile: clamp(12px, 3vw, 24px);
    --block-spacing-tablet: clamp(16px, 4vw, 32px);
    --block-spacing-desktop: clamp(24px, 5vw, 48px);
    
    /* Marges latérales des conteneurs - 15px fixe sur mobile */
    --container-padding-mobile: 15px;
    --container-padding-tablet: clamp(20px, 3vw, 30px);
    --container-padding-desktop: clamp(20px, 4vw, 40px);
    
    /* Espacement titre-contenu - Réduit sur mobile */
    --title-content-gap-mobile: clamp(12px, 2vw, 20px);
    --title-content-gap-tablet: clamp(16px, 3vw, 28px);
    --title-content-gap-desktop: clamp(20px, 4vw, 40px);
    
    /* ========================================================================
       TYPOGRAPHIE RESPONSIVE
       ======================================================================== */
    
    /* Titres - Réduits sur mobile pour éviter qu'un titre prenne tout l'écran */
    --h1-size-mobile: clamp(1.5rem, 4vw, 1.8rem);
    --h1-size-tablet: clamp(1.8rem, 5vw, 2.5rem);
    --h1-size-desktop: clamp(2rem, 6vw, 3rem);
    
    --h2-size-mobile: clamp(1.25rem, 3.5vw, 1.5rem);
    --h2-size-tablet: clamp(1.5rem, 4vw, 2rem);
    --h2-size-desktop: clamp(1.75rem, 5vw, 2.5rem);
    
    --h3-size-mobile: clamp(1.1rem, 3vw, 1.3rem);
    --h3-size-tablet: clamp(1.3rem, 3.5vw, 1.6rem);
    --h3-size-desktop: clamp(1.5rem, 4vw, 2rem);
    
    /* ========================================================================
       ZONES DE CLIC ACCESSIBLES (44px minimum)
       ======================================================================== */
    
    --touch-target-min: 44px;
    --button-padding-mobile: clamp(12px, 3vw, 16px);
    --button-padding-tablet: clamp(14px, 3.5vw, 18px);
    --button-padding-desktop: clamp(16px, 4vw, 20px);
    
    /* ========================================================================
       BANNIÈRES ET HERO
       ======================================================================== */
    
    /* Hauteur max des bannières Hero sur mobile - 350px max */
    --hero-height-mobile: clamp(200px, 40vh, 350px);
    --hero-height-tablet: clamp(300px, 45vh, 450px);
    --hero-height-desktop: clamp(400px, 50vh, 600px);
    
    /* ========================================================================
       GRILLES DE PRODUITS
       ======================================================================== */
    
    /* Gap entre produits - Réduit sur mobile */
    --grid-gap-mobile: clamp(8px, 2vw, 12px);
    --grid-gap-tablet: clamp(12px, 2.5vw, 20px);
    --grid-gap-desktop: clamp(16px, 3vw, 24px);
}

/* ============================================================================
   CORRECTIFS GLOBAUX (Reset/Base)
   ============================================================================ */

/* ========================================================================
   PRÉVENTION DU DÉFILEMENT HORIZONTAL (Overflow-x)
   ======================================================================== */

html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative;
    margin: 0;
    padding: 0;
}

/* Box-sizing pour tous les éléments (déjà dans main.css mais on s'assure) */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Images et médias - Responsive par défaut */
img, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto;
}

/* Images dans les bannières - object-fit: cover (mobile-first) */
.hero-slider img,
.hero-banner img,
.banner-hero img,
.slider-container img,
.promotion-banner img,
.category-banner img,
.venllre-banner-large img,
.banner-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ============================================================================
   DESKTOP OPTIMIZATIONS - Contraintes de hauteur max pour bannières
   ============================================================================ */

@media (min-width: 1024px) {
    /* Limiter la hauteur des bannières hero sur desktop */
    .hero-slider,
    .hero-banner,
    .banner-hero,
    .slider-container {
        max-height: 500px; /* Limite la hauteur maximale sur desktop */
    }
    
    /* Limiter la hauteur des images dans les bannières hero */
    .hero-slider img,
    .hero-banner img,
    .banner-hero img,
    .slider-container img {
        max-height: 500px; /* Limite la hauteur maximale */
        object-fit: cover;
        object-position: center;
    }
    
    /* Limiter la hauteur des bannières venllre sur desktop */
    .venllre-banner-large,
    .banner-large {
        max-height: 400px; /* Limite la hauteur maximale sur desktop */
    }
    
    /* Limiter la hauteur des images dans les bannières venllre */
    .venllre-banner-large img,
    .banner-large img {
        max-height: 400px; /* Limite la hauteur maximale */
        object-fit: cover;
        object-position: center;
    }
}

/* Tables - Prévenir débordement */
table {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
    overflow-x: auto;
    display: table;
}

/* Flexbox et Grid - Prévenir débordement */
.flex, .flex-row, .flex-column, .d-flex,
.grid, .grid-2, .grid-3, .grid-4 {
    min-width: 0;
    max-width: 100%;
}

/* ========================================================================
   CONTENEURS - Marge latérale fixe de 15px sur mobile
   ======================================================================== */

.container,
.container-fluid,
.wrapper,
.content-wrapper,
.marketplace-content {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
    box-sizing: border-box;
}

/* ========================================================================
   SECTIONS - Padding adaptatif avec clamp()
   ======================================================================== */

section,
.section,
article,
.article,
.page-section,
.venllre-section,
.categories-section,
.latest-sales-section,
.section-content {
    padding-top: var(--section-padding-vertical);
    padding-bottom: var(--section-padding-vertical);
    padding-left: var(--section-padding-horizontal);
    padding-right: var(--section-padding-horizontal);
}

/* ========================================================================
   TYPOGRAPHIE - Tailles réduites sur mobile
   ======================================================================== */

/* Typographie de base - Surchargée dans media queries pour desktop */
h1, .h1, .page-title, .section-title-venllre {
    font-size: var(--h1-size-mobile);
    line-height: 1.2;
    margin-bottom: var(--title-content-gap-mobile);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h2, .h2, .section-title, .section-title-text {
    font-size: var(--h2-size-mobile);
    line-height: 1.3;
    margin-bottom: var(--title-content-gap-mobile);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h3, .h3 {
    font-size: var(--h3-size-mobile);
    line-height: 1.4;
    margin-bottom: var(--title-content-gap-mobile);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ========================================================================
   BOUTONS ET LIENS - Zone de clic minimale 44px
   ======================================================================== */

button,
.btn,
a.btn,
input[type="button"],
input[type="submit"],
.nav-link,
.mobile-icon-link,
.mobile-bottom-link {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: var(--button-padding-mobile);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Pas de marges externes inutiles - padding interne seulement */
    margin: 0;
}

/* Liens textuels - Zone de clic via padding (uniquement pour les liens cliquables importants) */
a:not(.btn):not(.nav-link):not(.mobile-icon-link):not(.mobile-bottom-link):not(.card-link):not(.product-link) {
    padding: 2px 0;
    line-height: 1.5;
}

/* Liens dans les cards et produits - Zone de clic 44px */
a.card-link,
a.product-link,
.product-card-modern a,
.product-card a {
    min-height: var(--touch-target-min);
    display: inline-block;
}

/* ========================================================================
   BANNIÈRES HERO - Hauteur max 350px sur mobile
   ======================================================================== */

/* Bannières Hero - Hauteur de base mobile, surchargée dans media queries */
.hero-slider,
.hero-banner,
.banner-hero,
.slider-container,
.promotion-banner,
.category-banner,
.venllre-banner-large,
.banner-large,
.hero-section {
    height: var(--hero-height-mobile);
    min-height: var(--hero-height-mobile);
    max-height: 350px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin-bottom: var(--block-spacing-mobile);
}

/* ========================================================================
   GRILLES DE PRODUITS - 2 colonnes sur mobile
   ======================================================================== */

/* Marketplace - Force 2 colonnes sur mobile (surcharge dans media query mobile) */
.products-grid-modern,
.products-grid,
.articles-grid,
.product-grid,
.grid-products,
.marketplace-grid {
    display: grid;
    width: 100%;
    max-width: 100%;
}

/* Grilles génériques - Surchargées dans media queries */
.grid-2,
.grid-3,
.grid-4 {
    display: grid;
    width: 100%;
    max-width: 100%;
}

/* Cards de produits - Espacement réduit */
.product-card-modern,
.product-card,
.card-product,
.item-card,
.kilo-card-modern {
    margin-bottom: var(--block-spacing-mobile);
    width: 100%;
    max-width: 100%;
}

/* ========================================================================
   NAVIGATION - Condensation sans overflow horizontal
   ======================================================================== */

.navbar,
.navbar-mobile-top,
.navbar-mobile-bottom {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: visible;
}

.navbar-menu {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap;
    min-width: 0;
}

.navbar-menu::-webkit-scrollbar {
    display: none;
}

/* ========================================================================
   FOOTER - Condensation sans overflow
   ======================================================================== */

.footer,
.footer-content {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--block-spacing-mobile);
}

/* ============================================================================
   MEDIA QUERIES - MOBILE (< 768px)
   ============================================================================ */

@media (max-width: 768px) {
    
    /* ========================================================================
       CONTENEURS - 15px marge latérale fixe
       ======================================================================== */
    
    .container,
    .container-fluid,
    .wrapper,
    .content-wrapper,
    .marketplace-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* ========================================================================
       SECTIONS - Padding réduit, max 24px entre blocs
       ======================================================================== */
    
    section,
    .section,
    article,
    .article,
    .page-section,
    .venllre-section,
    .categories-section,
    .latest-sales-section,
    .section-content {
        padding-top: var(--block-spacing-mobile) !important;
        padding-bottom: var(--block-spacing-mobile) !important;
        padding-left: var(--container-padding-mobile) !important;
        padding-right: var(--container-padding-mobile) !important;
    }
    
    /* Espacement entre sections - Max 24px */
    section + section,
    .section + .section,
    article + article {
        margin-top: var(--block-spacing-mobile) !important;
    }
    
    /* ========================================================================
       TYPOGRAPHIE - Tailles réduites
       ======================================================================== */
    
    h1, .h1, .page-title, .section-title-venllre {
        font-size: var(--h1-size-mobile) !important;
        margin-bottom: var(--title-content-gap-mobile) !important;
    }
    
    h2, .h2, .section-title, .section-title-text {
        font-size: var(--h2-size-mobile) !important;
        margin-bottom: var(--title-content-gap-mobile) !important;
    }
    
    h3, .h3 {
        font-size: var(--h3-size-mobile) !important;
        margin-bottom: var(--title-content-gap-mobile) !important;
    }
    
    /* ========================================================================
       BOUTONS - Zone de clic 44px, pas de marges externes
       ======================================================================== */
    
    button,
    .btn,
    a.btn,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: var(--button-padding-mobile) !important;
        margin: 0 !important;
    }
    
    /* ========================================================================
       BANNIÈRES HERO - 350px max
       ======================================================================== */
    
    .hero-slider,
    .hero-banner,
    .banner-hero,
    .slider-container,
    .promotion-banner,
    .category-banner,
    .banner-large,
    .hero-section {
        height: var(--hero-height-mobile) !important;
        min-height: var(--hero-height-mobile) !important;
        max-height: 350px !important;
        margin-bottom: var(--block-spacing-mobile) !important;
    }
    
    .venllre-banner-large {
        width: 354px !important;
        height: 155px !important;
        max-width: 354px !important;
        max-height: 155px !important;
        min-height: 155px !important;
        margin-bottom: var(--block-spacing-mobile) !important;
    }
    
    /* ========================================================================
       GRILLES - Force 2 colonnes
       ======================================================================== */
    
    .products-grid-modern,
    .products-grid,
    .articles-grid,
    .product-grid,
    .grid-products,
    .marketplace-grid,
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--grid-gap-mobile) !important;
    }
    
    /* Exception : page boutique et profil → 1 colonne pour éviter débordement mobile */
    .shop-container .products-grid,
    .shop-content .products-grid,
    main .shop-container .products-grid,
    main .shop-content .products-grid,
    .profile-public-container .articles-grid,
    .profile-content .articles-grid,
    main .profile-public-container .articles-grid,
    main .profile-content .articles-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }
    
    /* ========================================================================
       CARDS - Espacement réduit
       ======================================================================== */
    
    .card,
    .product-card-modern,
    .product-card,
    .card-product,
    .item-card {
        margin-bottom: var(--block-spacing-mobile) !important;
    }
    
    .card-body,
    .card-header,
    .card-footer {
        padding: var(--block-spacing-mobile) !important;
    }
    
    /* ========================================================================
       LISTES - Gap réduit
       ======================================================================== */
    
    .category-list,
    .categories-list,
    .list-categories,
    ul.grid,
    ul.flex,
    .list-grid,
    .list-flex {
        gap: var(--grid-gap-mobile) !important;
    }
    
    /* ========================================================================
       FORMULAIRES - Espacement réduit
       ======================================================================== */
    
    .form-group {
        margin-bottom: var(--block-spacing-mobile) !important;
    }
    
    .form-control {
        padding: var(--button-padding-mobile) !important;
        font-size: 16px !important; /* Prévenir zoom iOS */
    }
    
    /* ========================================================================
       NAVIGATION - Pas d'overflow horizontal
       ======================================================================== */
    
    .navbar,
    .navbar-mobile-top,
    .navbar-mobile-bottom,
    .navbar-menu {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* ========================================================================
       FOOTER - Condensation
       ======================================================================== */
    
    .footer {
        padding-top: var(--block-spacing-mobile) !important;
        padding-bottom: var(--block-spacing-mobile) !important;
        margin-top: var(--block-spacing-mobile) !important;
    }
    
    .footer-content {
        gap: var(--block-spacing-mobile) !important;
        grid-template-columns: 1fr !important;
    }
    
    /* ========================================================================
       UTILITAIRES - Marges réduites
       ======================================================================== */
    
    .mt-1 { margin-top: clamp(4px, 1vw, 8px) !important; }
    .mt-2 { margin-top: clamp(8px, 1.5vw, 16px) !important; }
    .mt-3 { margin-top: clamp(12px, 2vw, 20px) !important; }
    .mt-4 { margin-top: var(--block-spacing-mobile) !important; }
    
    .mb-1 { margin-bottom: clamp(4px, 1vw, 8px) !important; }
    .mb-2 { margin-bottom: clamp(8px, 1.5vw, 16px) !important; }
    .mb-3 { margin-bottom: clamp(12px, 2vw, 20px) !important; }
    .mb-4 { margin-bottom: var(--block-spacing-mobile) !important; }
    
    .p-1 { padding: clamp(4px, 1vw, 8px) !important; }
    .p-2 { padding: clamp(8px, 1.5vw, 16px) !important; }
    .p-3 { padding: clamp(12px, 2vw, 20px) !important; }
    .p-4 { padding: var(--block-spacing-mobile) !important; }
    
    /* ========================================================================
       MODALS - Padding réduit
       ======================================================================== */
    
    .modal-body,
    .modal-content {
        padding: var(--block-spacing-mobile) !important;
    }
    
    /* ========================================================================
       TABLES - Espacement réduit
       ======================================================================== */
    
    table {
        margin-bottom: var(--block-spacing-mobile) !important;
    }
    
    table td,
    table th {
        padding: var(--button-padding-mobile) !important;
    }
}

/* ============================================================================
   MEDIA QUERIES - TABLETTE (< 1024px)
   ============================================================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    
    /* ========================================================================
       NAVIGATION MOBILE - Masquer sur tablette et desktop
       ======================================================================== */
    
    .navbar-mobile-top,
    .navbar-mobile-bottom,
    .mobile-menu-overlay {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* ========================================================================
       CONTENEURS - Padding adaptatif
       ======================================================================== */
    
    .container,
    .container-fluid,
    .wrapper,
    .content-wrapper,
    .marketplace-content {
        padding-left: var(--container-padding-tablet) !important;
        padding-right: var(--container-padding-tablet) !important;
    }
    
    /* ========================================================================
       SECTIONS - Padding modéré
       ======================================================================== */
    
    section,
    .section,
    article,
    .article {
        padding-top: var(--block-spacing-tablet) !important;
        padding-bottom: var(--block-spacing-tablet) !important;
    }
    
    /* ========================================================================
       TYPOGRAPHIE - Tailles intermédiaires
       ======================================================================== */
    
    h1, .h1, .page-title {
        font-size: var(--h1-size-tablet) !important;
        margin-bottom: var(--title-content-gap-tablet) !important;
    }
    
    h2, .h2, .section-title {
        font-size: var(--h2-size-tablet) !important;
        margin-bottom: var(--title-content-gap-tablet) !important;
    }
    
    h3, .h3 {
        font-size: var(--h3-size-tablet) !important;
        margin-bottom: var(--title-content-gap-tablet) !important;
    }
    
    /* ========================================================================
       BANNIÈRES HERO - Hauteur intermédiaire
       ======================================================================== */
    
    .hero-slider,
    .hero-banner,
    .banner-hero,
    .slider-container {
        height: var(--hero-height-tablet) !important;
        min-height: var(--hero-height-tablet) !important;
        max-height: 450px !important;
    }
    
    /* ========================================================================
       GRILLES - 3 colonnes sur tablette
       ======================================================================== */
    
    .products-grid-modern,
    .products-grid,
    .articles-grid,
    .product-grid,
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--grid-gap-tablet) !important;
    }
    
    .grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--grid-gap-tablet) !important;
    }
    
    /* ========================================================================
       BOUTONS - Padding intermédiaire
       ======================================================================== */
    
    button,
    .btn,
    a.btn {
        padding: var(--button-padding-tablet) !important;
    }
}

/* ============================================================================
   MEDIA QUERIES - DESKTOP (>= 1025px)
   ============================================================================ */

@media (min-width: 1025px) {
    
    /* ========================================================================
       NAVIGATION MOBILE - Masquer sur desktop
       ======================================================================== */
    
    .navbar-mobile-top,
    .navbar-mobile-bottom,
    .mobile-menu-overlay {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* ========================================================================
       CONTENEURS - Padding desktop
       ======================================================================== */
    
    .container,
    .container-fluid,
    .wrapper,
    .content-wrapper {
        padding-left: var(--container-padding-desktop) !important;
        padding-right: var(--container-padding-desktop) !important;
    }
    
    /* ========================================================================
       SECTIONS - Padding généreux
       ======================================================================== */
    
    section,
    .section,
    article,
    .article {
        padding-top: var(--section-padding-vertical) !important;
        padding-bottom: var(--section-padding-vertical) !important;
    }
    
    /* ========================================================================
       TYPOGRAPHIE - Tailles desktop
       ======================================================================== */
    
    h1, .h1, .page-title {
        font-size: var(--h1-size-desktop) !important;
        margin-bottom: var(--title-content-gap-desktop) !important;
    }
    
    h2, .h2, .section-title {
        font-size: var(--h2-size-desktop) !important;
        margin-bottom: var(--title-content-gap-desktop) !important;
    }
    
    h3, .h3 {
        font-size: var(--h3-size-desktop) !important;
        margin-bottom: var(--title-content-gap-desktop) !important;
    }
    
    /* ========================================================================
       BANNIÈRES HERO - Hauteur desktop
       ======================================================================== */
    
    .hero-slider,
    .hero-banner,
    .banner-hero,
    .slider-container {
        height: var(--hero-height-desktop) !important;
        min-height: var(--hero-height-desktop) !important;
    }
    
    /* ========================================================================
       GRILLES - 4 colonnes sur desktop
       ======================================================================== */
    
    .products-grid-modern,
    .products-grid,
    .articles-grid,
    .product-grid,
    .grid-4 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: var(--grid-gap-desktop) !important;
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--grid-gap-desktop) !important;
    }
    
    .grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--grid-gap-desktop) !important;
    }
    
    /* ========================================================================
       BOUTONS - Padding desktop
       ======================================================================== */
    
    button,
    .btn,
    a.btn {
        padding: var(--button-padding-desktop) !important;
    }
}

/* ============================================================================
   RÈGLES SPÉCIALES POUR ÉLIMINER L'OVERFLOW HORIZONTAL
   ============================================================================ */

/* Force la largeur maximale sur les éléments de contenu (pas sur tous les éléments) */
div, section, article, aside, header, footer, nav, main,
.container, .container-fluid, .wrapper, .content-wrapper,
.card, .card-body, .card-header, .card-footer {
    max-width: 100%;
}

/* Exceptions pour les éléments qui doivent pouvoir dépasser */
[class*="tooltip"],
[class*="dropdown"],
[class*="popover"],
[class*="modal"],
[class*="tooltip"] *,
[class*="dropdown"] *,
[class*="popover"] *,
[class*="modal"] * {
    max-width: none;
}

/* Prévenir le débordement des textes longs */
p, span, li, td, th, .text-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Prévenir le débordement des URLs (uniquement dans les contenus) */
.text-content a,
p a,
li a {
    word-break: break-all;
}

/* ============================================================================
   FIN DU FICHIER
   ============================================================================ */