/* ============================================
   ALREHAB PERFUMES - RESPONSIVE GLOBAL
   Gestion complète de la responsivité pour tous les navigateurs
   Compatible Chrome, Edge, Firefox, Safari
   ============================================ */

/* ===== VIEWPORT META TAG SUPPORT ===== */
/* Assurez-vous que votre HTML contient :
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
*/

/* ===== VARIABLES RESPONSIVE ===== */
:root {
    /* Breakpoints standards */
    --breakpoint-xs: 0px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    --breakpoint-xxxl: 1920px;
    
    /* Espacements responsives */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    /* Tailles de police responsives */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-xxl: 1.5rem;
    --font-size-xxxl: 2rem;
}

/* ===== RESET ET BASE RESPONSIVE ===== */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* ===== CONTAINER RESPONSIVE ===== */
.container,
.container-fluid {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* ===== NAVBAR RESPONSIVE ===== */
.unified-navbar {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.unified-navbar-container {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 576px) {
    .unified-navbar-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 768px) {
    .unified-navbar-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 992px) {
    .unified-navbar-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1200px) {
    .unified-navbar-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Navbar Mobile */
@media (max-width: 991.98px) {
    .unified-navbar {
        padding: 0.75rem 0;
    }
    
    .unified-navbar .navbar-toggler {
        display: block;
    }
    
    .unified-menu {
        flex-direction: column;
        width: 100%;
        margin-top: 1rem;
    }
    
    .unified-menu .nav-link {
        padding: 0.75rem 1rem;
        width: 100%;
        text-align: left;
    }
    
    .unified-search-form {
        width: 100%;
        margin-top: 1rem;
    }
    
    .social-float {
        display: none;
    }
}

/* ===== PRODUCT CARDS RESPONSIVE ===== */
.product-card-modern {
    width: 100%;
    max-width: 100%;
}

/* Mobile (< 576px) */
@media (max-width: 575.98px) {
    .product-card-modern {
        margin-bottom: 1rem;
    }
    
    .product-image-wrapper {
        padding-top: 100%;
    }
    
    .product-info {
        padding: 0.75rem;
    }
    
    .product-name {
        font-size: 0.9rem;
        line-height: 1.3;
    }
    
    .current-price {
        font-size: 1rem;
    }
    
    .old-price {
        font-size: 0.8rem;
    }
    
    .product-add-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* Mobile Large (576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .product-card-modern {
        margin-bottom: 1.5rem;
    }
    
    .product-image-wrapper {
        padding-top: 90%;
    }
    
    .product-info {
        padding: 1rem;
    }
    
    .product-name {
        font-size: 0.95rem;
    }
    
    .current-price {
        font-size: 1.1rem;
    }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .product-card-modern {
        margin-bottom: 2rem;
    }
    
    .product-image-wrapper {
        padding-top: 85%;
    }
    
    .product-info {
        padding: 1rem;
    }
}

/* Desktop Small (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .product-card-modern {
        margin-bottom: 2rem;
    }
}

/* Desktop Medium (1200px - 1919px) */
@media (min-width: 1200px) and (max-width: 1919.98px) {
    .product-card-modern {
        margin-bottom: 2rem;
    }
}

/* Desktop Large (1920px+) */
@media (min-width: 1920px) {
    .product-card-modern {
        margin-bottom: 2.5rem;
    }
}

/* ===== SHOP PAGE RESPONSIVE ===== */
.shop-page-modern {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.shop-page-modern .row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.shop-page-modern .row > [class*="col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Mobile */
@media (max-width: 575.98px) {
    .shop-page-modern .col-md-6:not(.col-6),
    .shop-page-modern .col-lg-3:not(.col-6),
    .shop-page-modern .col-xl-3:not(.col-6) {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Permettre 2 colonnes pour col-6 sur mobile */
    .shop-page-modern .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Mobile Large */
@media (min-width: 576px) and (max-width: 767.98px) {
    .shop-page-modern .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .shop-page-modern .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Desktop Small */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .shop-page-modern .col-lg-3,
    .shop-page-modern .col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* Desktop Medium */
@media (min-width: 1200px) and (max-width: 1919.98px) {
    .shop-page-modern .col-lg-3,
    .shop-page-modern .col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* Desktop Large (24 pouces) */
@media (min-width: 1920px) {
    .shop-page-modern .col-lg-3,
    .shop-page-modern .col-xl-3 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* ===== CART PAGE RESPONSIVE ===== */
.cart-page-modern {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.cart-item-card-modern {
    width: 100%;
    max-width: 100%;
}

/* Mobile */
@media (max-width: 767.98px) {
    .cart-item-card-modern {
        flex-direction: column;
    }
    
    .cart-item-img,
    .cart-item-placeholder {
        width: 100%;
        max-width: 150px;
        height: 150px;
        margin: 0 auto 1rem;
    }
    
    .cart-item-details {
        width: 100%;
        text-align: center;
    }
    
    .cart-item-actions {
        width: 100%;
        justify-content: center;
        margin-top: 1rem;
    }
    
    .cart-summary-card {
        margin-top: 2rem;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .cart-item-img,
    .cart-item-placeholder {
        width: 100px;
        height: 100px;
    }
}

/* ===== CHECKOUT PAGE RESPONSIVE ===== */
.checkout-page-modern {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.checkout-form-modern {
    width: 100%;
    max-width: 100%;
}

/* Mobile */
@media (max-width: 767.98px) {
    .checkout-form-modern .col-md-6,
    .checkout-form-modern .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }
    
    .checkout-summary {
        margin-top: 2rem;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .checkout-form-modern .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ===== PRODUCT DETAIL PAGE RESPONSIVE ===== */
.single-product-image-wrapper {
    width: 100%;
    max-width: 100%;
}

.single-product-info {
    width: 100%;
    max-width: 100%;
}

/* Mobile */
@media (max-width: 767.98px) {
    .single-product-image-wrapper {
        margin-bottom: 2rem;
    }
    
    .single-product-main-image {
        max-height: 300px;
    }
    
    .product-thumbnails {
        max-height: 150px;
    }
    
    .thumbnail-item {
        width: 60px;
        height: 60px;
    }
    
    .single-product-name {
        font-size: 1.2rem;
    }
    
    .single-product-price .current-price {
        font-size: 1.4rem;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .single-product-main-image {
        max-height: 400px;
    }
    
    .thumbnail-item {
        width: 70px;
        height: 70px;
    }
}

/* ===== FOOTER RESPONSIVE ===== */
.footer {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.footer .container,
.footer .container-fluid {
    width: 100%;
    max-width: 100%;
}

/* Mobile */
@media (max-width: 767.98px) {
    .footer .row > [class*="col-"] {
        margin-bottom: 2rem;
    }
    
    .footer-item h4 {
        font-size: 1.1rem;
    }
    
    .footer-item p,
    .footer-item a {
        font-size: 0.9rem;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .footer .row > [class*="col-"] {
        margin-bottom: 1.5rem;
    }
}

/* ===== CAROUSEL RESPONSIVE ===== */
.carousel-section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.header-carousel {
    width: 100%;
    max-width: 100%;
}

.header-carousel-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Mobile */
@media (max-width: 767.98px) {
    .header-carousel-item {
        height: 250px;
    }
    
    .header-carousel-item img {
        height: 250px;
        object-fit: cover;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .header-carousel-item {
        height: 350px;
    }
    
    .header-carousel-item img {
        height: 350px;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .header-carousel-item {
        height: 450px;
    }
    
    .header-carousel-item img {
        height: 450px;
    }
}

/* Desktop Large */
@media (min-width: 1920px) {
    .header-carousel-item {
        height: 550px;
    }
    
    .header-carousel-item img {
        height: 550px;
    }
}

/* ===== CATEGORIES CAROUSEL RESPONSIVE ===== */
.categories-carousel-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.categories-carousel {
    width: 100%;
    max-width: 100%;
}

.category-item {
    min-width: 0;
    flex-shrink: 0;
}

/* Mobile */
@media (max-width: 575.98px) {
    .category-item {
        min-width: 120px;
        max-width: 120px;
    }
    
    .category-item .category-circle {
        width: 100px;
        height: 100px;
    }
    
    .category-title {
        font-size: 0.85rem;
    }
}

/* Mobile Large */
@media (min-width: 576px) and (max-width: 767.98px) {
    .category-item {
        min-width: 140px;
        max-width: 140px;
    }
    
    .category-item .category-circle {
        width: 120px;
        height: 120px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .category-item {
        min-width: 160px;
        max-width: 160px;
    }
    
    .category-item .category-circle {
        width: 140px;
        height: 140px;
    }
}

/* ===== UTILITY CLASSES RESPONSIVE ===== */
.d-none-mobile {
    display: block !important;
}

.d-block-mobile {
    display: none !important;
}

@media (max-width: 767.98px) {
    .d-none-mobile {
        display: none !important;
    }
    
    .d-block-mobile {
        display: block !important;
    }
}

/* ===== FIXES POUR CHROME ET EDGE ===== */
/* Assure la compatibilité avec les navigateurs Chromium */

/* Fix pour les transitions */
* {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Fix pour les transformations */
.transform {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

/* Fix pour les flexbox */
.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

/* Fix pour les grid */
.grid {
    display: -ms-grid;
    display: grid;
}

/* Fix pour backdrop-filter (Chrome/Edge) */
.backdrop-blur {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ===== SCROLLBAR PERSONNALISÉE (Chrome/Edge) ===== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #FFFDF2;
}

::-webkit-scrollbar-thumb {
    background: #20c997;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1ab885;
}

/* Pour Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #20c997 #FFFDF2;
}

/* ===== PRINT STYLES ===== */
@media print {
    .unified-navbar,
    .footer,
    .btn,
    .cart-summary-card,
    .checkout-summary {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
}