/* css/utilities/responsive.css */

/* ==========================================================================
   GLOBAL RESPONSIVE UTILITIES (Architecture Moderne)
   ========================================================================== */

/* --- VISIBILITY HELPERS --- */
/* Hide on Desktop, Show on Mobile[cite: 1] */
.show-mobile { display: block !important; }
.hide-mobile { display: none !important; }

/* Tablet & Desktop (768px and up)[cite: 1] */
@media (min-width: 768px) {
    .show-mobile { display: none !important; }
    .hide-mobile { display: block !important; }
    
    /* Flex utility overrides[cite: 1] */
    .hide-mobile.flex { display: flex !important; }
    .hide-mobile.grid { display: grid !important; }
}

/* ==========================================================================
   GLOBAL LAYOUT COLLAPSE (Max-width: 992px - Tablet/Mobile)
   ========================================================================== */
@media (max-width: 992px) {
    /* 1. AUTO-GRID COLLAPSE : 
       Transforme automatiquement vos grilles (2, 3 ou 4 colonnes) 
       en une seule colonne empilée sur mobile ! */
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr !important;
        gap: var(--sp-4);
    }

    /* 2. AUTO-PADDING : Réduit les grands espaces vides sur mobile */
    .section-padding {
        padding-top: var(--sp-5);
        padding-bottom: var(--sp-5);
    }

    /* 3. AUTO-TYPOGRAPHY : Empêche les gros titres de déborder de l'écran */
    .display-title {
        font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
    }
    .heading-secondary {
        font-size: clamp(2rem, 7vw, 2.8rem) !important;
    }
}

/* ==========================================================================
   MOBILE ACCESSIBILITY (Max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
    /* Fine-tuning touch targets for Apple Human Interface Guidelines (min 44px)[cite: 1] */
    button, 
    a.btn, 
    .icon-btn,
    .store-icon-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Ensure the carousel is easily swipable on mobile[cite: 1] */
    .carousel-container {
        padding-bottom: var(--sp-4); /* Ajusté pour moins d'espace vide */
    }
}

/* ==========================================================================
   UTILITY CONSTRAINTS[cite: 1]
   ========================================================================== */
.w-full { width: 100%; }
.h-full { height: 100%; }
.text-center { text-align: center; }

.sr-only {
    /* Screen reader only - visually hidden but accessible[cite: 1] */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}