/* ==========================================================================
   1. TYPOGRAPHIE ET DOCTRINE VISUELLE (Luxe & Heritage)
   ========================================================================== */

html, body {
    /* Sécurité critique : empêche tout décalage à droite */
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-color: #ffffff;
    color: #0a1412; /* Noir profond */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Correction du scroll saccadé sur mobile */
    scroll-behavior: smooth; 
}

/* Force la police sur tous les titres et boutons */
h1, h2, h3, h4, h5, .gold-cta, .nav-line .label, .reveal-text {
    font-family: 'Times New Roman', Times, serif !important;
}

/* Applique le box-sizing à tous les éléments pour éviter que le padding n'ajoute de la largeur */
*, *:before, *:after {
    box-sizing: inherit;
}






/* ==========================================================================
   SECTION HERO CINÉMATIQUE (Version Épurée & Immersive)
   ========================================================================== */
.sahara-cinematic-hero {
    position: relative;
    width: 100%;
    height: 75vh; /* Hauteur sur PC (85% de l'écran) */
    background-color: #0a1412;
    overflow: hidden; /* Empêche les images en mouvement de dépasser */
    box-sizing: border-box;
}

/* CADRE BLANC INTERNE : Crée un effet de bordure luxueuse */
.sahara-cinematic-hero::after {
    content: "";
    position: absolute;
    /* clamp s'adapte : 10px sur mobile, jusqu'à 20px sur PC */
    top: clamp(10px, 2vw, 20px); 
    left: clamp(10px, 2vw, 20px); 
    right: clamp(10px, 2vw, 20px); 
    bottom: clamp(10px, 2vw, 20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 15; /* Place le cadre au-dessus des images */
    pointer-events: none; /* Permet de cliquer à travers le cadre */
}

/* COINS DORÉS : Ajoute les détails artisanaux aux 4 coins */
.sahara-cinematic-hero::before {
    content: "";
    position: absolute;
    top: clamp(8px, 1.5vw, 15px);
    left: clamp(8px, 1.5vw, 15px);
    right: clamp(8px, 1.5vw, 15px);
    bottom: clamp(8px, 1.5vw, 15px);
    background: 
        linear-gradient(to right, #c5a059 20px, transparent 20px) 0 0,
        linear-gradient(to left, #c5a059 20px, transparent 20px) 100% 100%,
        linear-gradient(to bottom, #c5a059 20px, transparent 20px) 0 0,
        linear-gradient(to top, #c5a059 20px, transparent 20px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    z-index: 16;
    pointer-events: none;
    opacity: 0.8;
}

/* SLIDES : Gestion de l'opacité pour la transition du slider */
.luxury-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 1;
}

.luxury-slide.active { 
    opacity: 1; 
    z-index: 2; 
}

/* IMAGE DE FOND : Zoom progressif (Ken Burns effect) */
.bg-image {
    position: absolute;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transform: scale(1.1); /* Image légèrement plus grande au départ */
    transition: transform 10s linear;
}

.luxury-slide.active .bg-image { 
    transform: scale(1); /* L'image revient à sa taille normale doucement */
}

/* CONTENEUR DE TEXTE (Remplaçant de l'overlay noir) */
.glass-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10%;
    z-index: 17;
    background: transparent; /* Suppression du dégradé noir pour voir l'image */
}

/* BOITE DE TEXTE AVEC EFFET FLOU (Glassmorphism) */
.content-box { 
    max-width: 600px;
    padding: 40px;
    background: rgba(0, 0, 0, 0.2); /* Fond très léger pour faire ressortir le flou */
    backdrop-filter: blur(1px); /* L'effet de flou sur l'image derrière le texte */
    -webkit-backdrop-filter: blur(10px); /* Support pour Safari */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* TITRES ET TYPOGRAPHIE */
.reveal-text {
    display: block;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 11px;
    color: #c5a059;
    margin-bottom: 15px;
}

.split-title {
    font-size: clamp(30px, 6vw, 48px); 
    line-height: 1.1;
    color: #ffffff !important;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.gold-accent { 
    color: #c5a059 !important; 
    font-style: italic; 
}

.hero-desc {
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    max-width: 500px;
}

/* BOUTON D'ACTION (CTA) */
.gold-cta {
    background-color: #c5a059;
    color: #ffffff;
    padding: 18px 45px;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    display: inline-block;
    transition: all 0.4s ease;
}

.gold-cta:hover {
    background-color: #ffffff;
    color: #0a1412;
}

/* ==========================================================================
   ADAPTATION MOBILE (Correction Hauteur et Centrage)
   ========================================================================== */
@media (max-width: 768px) {
    .sahara-cinematic-hero {
        height: 95vh !important; /* Hauteur augmentée pour remplir l'écran mobile */
    }

    .glass-overlay {
        padding: 0 20px;
        justify-content: center; /* Centre le contenu sur mobile */
    }

    .content-box {
        text-align: center;
        padding: 30px 15px;
        backdrop-filter: blur(1px); /* Flou plus léger pour booster la performance mobile */
    }

    .gold-cta {
        width: 100%; /* Le bouton prend toute la largeur sur mobile */
        box-sizing: border-box;
    }
}

/* ==========================================================================
   3. NAVIGATION DU SLIDER
   ========================================================================== */
.nav-visual {
    position: absolute;
    bottom: 50px;
    right: 10%;
    z-index: 20;
    display: flex;
}

.nav-line {
    width: 60px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    margin-left: 30px;
    cursor: pointer;
    position: relative;
    transition: all 0.4s ease;
}

.nav-line.active {
    width: 100px;
    background-color: #c5a059;
}

.nav-line .label {
    position: absolute;
    top: -25px;
    left: 0;
    font-size: 11px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==========================================================================
   4. RESPONSIVE DESIGN (Mobiles)
   ========================================================================== */
@media (max-width: 768px) {
    .sahara-cinematic-hero {
        height: 70vh; /* Plus court sur mobile */
    }
    
    .glass-overlay {
        padding: 0 20px;
        text-align: center;
        justify-content: center;
        background: rgba(10, 20, 18, 0.5); /* Plus sombre pour lire sur mobile */
    }

    .split-title {
        font-size: 32px;
    }

    .nav-visual {
        bottom: 30px;
        right: 50%;
        transform: translateX(50%);
    }

    .nav-line {
        width: 30px;
        margin: 0 10px;
    }

    .nav-line .label {
        display: none;
    }

    .nav-line.active {
        width: 50px;
    }
}




/* ==========================================================================
   SECTION CATEGORIES CHIC (Version Finale 2026)
   ========================================================================== */
/* --- SAHARA COLLECTION MASTER DESIGN --- */
.sahara-collection-master {
    position: relative;
    padding: 50px 0;
    margin: 40px auto;
    background-color: #fcfbf8; /* Un blanc cassé très luxueux */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    overflow: hidden;
}

/* Arrière-plan subtil (Effet texture de papier ou cuir) */
.collection-bg-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/felt.png'); /* Texture légère */
    opacity: 0.3;
    pointer-events: none;
}

.collection-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 2;
}

.s-kicker {
    display: block;
    font-family: 'Inter', sans-serif;
    color: #c5a059;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 15px;
}

.collection-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    color: #1a1a1a;
    margin-bottom: 20px;
    font-weight: 500;
}

.s-description {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
}

.s-divider {
    color: #c5a059;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.s-divider::before, .s-divider::after {
    content: "";
    width: 60px;
    height: 1px;
    background: #c5a059;
    opacity: 0.3;
}

/* SLIDER STYLING */
.slider-wrapper {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    z-index: 3;
}

.chic-viewport {
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 20px 0;
}
.chic-viewport::-webkit-scrollbar { display: none; }

.chic-container {
    display: flex;
    gap: 40px;
    padding: 0 80px;
}

.chic-item {
    flex: 0 0 160px;
    text-decoration: none;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.chic-image-wrapper {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 3px solid #fff;
    transition: all 0.4s ease;
}

.chic-item:hover .chic-image-wrapper {
    box-shadow: 0 15px 35px rgba(197, 160, 89, 0.2);
    transform: translateY(-10px);
    border-color: #c5a059;
}

.chic-image-wrapper img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.chic-title {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* NAV ARROWS */
.s-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    color: #1a1a1a;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.s-nav:hover { background: #c5a059; color: #fff; border-color: #c5a059; }
.s-nav.prev { left: 20px; }
.s-nav.next { right: 20px; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .collection-header h2 { font-size: 32px; }
    .chic-container { padding: 0 20px; gap: 25px; }
    .chic-item { flex: 0 0 120px; }
    .chic-image-wrapper { width: 100px; height: 100px; }
    .s-nav { display: none; } /* On swipe sur mobile */
}








/* =========================================
   SAHARA STORYTELLING STYLE
   ========================================= */
.sahara-storytelling {
    padding: 100px 5%;
    background-color: #ffffff;
    overflow: hidden;
}

.story-container {
    max-width: 1250px;
    margin: 0 auto;
    display: grid !important;
    /* On remplace 1fr 1fr par 50% 50% moins le gap */
    grid-template-columns: calc(50% - 40px) calc(50% - 40px);
    gap: 80px;
    align-items: center;
}

/* --- Typographie & Titres --- */
.story-subtitle {
    font-family: 'Georgia', serif;
    font-size: 11px;
    letter-spacing: 4px;
    color: #c5a059;
    display: block;
    margin-bottom: 15px;
    font-weight: bold;
}

.story-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(30px, 4vw, 45px);
    line-height: 1.2;
    color: #111;
    margin-bottom: 25px;
}

.gold-accent {
    color: #c5a059;
    font-style: italic;
}

.story-divider {
    width: 50px;
    height: 1px;
    background-color: #c5a059;
    margin-bottom: 30px;
}

.story-text {
    font-family: 'Georgia', serif;
    font-size: 17px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 40px;
    max-width: 500px;
}

/* --- SEO Hidden (Invisible pour l'utilisateur) --- */
.seo-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --- Icônes de Confiance --- */
.story-icons {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.icon-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Playfair Display', serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #111;
}

.svg-icon {
    width: 20px;
    height: 20px;
    color: #c5a059;
}

/* --- Bouton CTA --- */
.story-cta {
    display: inline-block;
    padding: 16px 40px;
    background-color: transparent;
    border: 1px solid #111;
    color: #111;
    text-decoration: none;
    font-family: 'Georgia', serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.4s ease;
}

.story-cta:hover {
    background-color: #111;
    color: #fff;
    transform: translateY(-3px);
}

/* --- Effet Image Artistique --- */
.story-image {
    position: relative;
}

.img-wrapper {
    position: relative;
    padding: 20px;
}

.legacy-img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    box-shadow: 15px 15px 50px rgba(0,0,0,0.1);
}

.img-frame {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    height: 80%;
    border: 1px solid #c5a059;
    z-index: 1;
}

/* --- Responsive (Mobile) --- */
/* --- NETTOYAGE ET CORRECTION --- */
@media screen and (max-width: 992px) {
    .sahara-storytelling .story-container {
        display: flex !important; /* Flex est souvent plus stable que Grid pour le centrage mobile */
        flex-direction: column !important;
        gap: 50px !important;
        text-align: center !important;
    }

    .story-content {
        order: 1; /* Le texte reste en haut */
        width: 100% !important;
    }

    .story-image {
        order: 2; /* L'image passe en dessous */
        width: 100% !important;
        display: block !important;
    }

    .legacy-img {
        width: 100% !important;
        height: 450px !important; /* Force une hauteur généreuse sur mobile */
        object-fit: cover !important; /* Garde les proportions sans déformer l'artisan */
        border-radius: 2px; /* Optionnel : un léger arrondi pour le style */
    }

    /* On cache le cadre décoratif sur mobile s'il gêne la largeur */
    .img-frame {
        display: none !important;
    }
}


/* =========================================
   7. SECTION PRODUITS SEGMENTÉE
   ========================================= */

/* --- SMALL TREASURES SPECIFIC ADJUSTMENTS --- */

#sahara-treasures-section {
    margin-top: 100px; /* Espace après le divider immersif */
}

/* On réutilise les styles du header editorial pour la cohérence */
#sahara-treasures-section .s-acc-header-editorial {
    border-left: 3px solid #c5a059;
    padding-left: 25px;
    margin-bottom: 40px;
}

#sahara-treasures-section h2 {
    font-family: 'Playfair Display', serif !important;
    font-size: 38px !important;
    color: #1a1a1a !important;
}

/* La couleur du prix pour souligner l'accessibilité */
#sahara-treasures-section .price {
    color: #1a1a1a !important; /* Noir élégant pour les petits prix */
    font-weight: 600 !important;
}

/* Animation et survol identiques aux Bijoux et Accessoires */
#sahara-treasures-section ul.products li.product:hover {
    transform: translateY(-12px) scale(1.02) !important;
    box-shadow: 0 25px 50px rgba(197, 160, 89, 0.15) !important;
}
/* --- NEUROMARKETING SECTION --- */

#sahara-treasures-section {
    background: linear-gradient(145deg, #1a1a1a 0%, #2c2c2c 100%); /* Fond sombre pour faire ressortir les produits */
    padding: 80px 40px;
    border-radius: 15px;
    border: 1px solid #333;
}

#sahara-treasures-section h2 {
    color: #ffffff !important;
}

#sahara-treasures-section .s-acc-lead {
    color: #bbb !important;
}

/* L'Ancre de Prix : Attire l'oeil immédiatement */
.price-anchor {
    background: #c5a059;
    color: #000;
    padding: 2px 12px;
    font-size: 18px;
    border-radius: 4px;
    margin-left: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    display: inline-block;
    transform: rotate(-2deg); /* Un léger angle casse la monotonie et attire l'attention */
}

/* Animation de pulsation douce sur le Kicker */
.pulse-gold {
    animation: pulse-gold-animation 2s infinite;
    color: #c5a059 !important;
    font-weight: bold;
}

@keyframes pulse-gold-animation {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Effet Shimmer (Brillance) sur le bouton pour forcer le clic */
.shimmer-effect {
    position: relative;
    overflow: hidden;
    background: #c5a059 !important;
    color: #000 !important;
    border: none !important;
}

.shimmer-effect::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to bottom right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(45deg);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

/* Mise en avant des prix produits */
#sahara-treasures-section span.price {
    background: rgba(197, 160, 89, 0.1);
    padding: 5px 10px;
    border-radius: 5px;
    color: #c5a059 !important;
    font-size: 1.2em !important;
}








/* =========================================
   8. SECTION EXPERIENCE & VOYAGES
   ========================================= */
.sahara-experience-immersive {
    position: relative;
    height: 70vh; /* Hauteur immersive */
    min-height: 550px;
    background-image: url('https://saharaimport.com/SIMPORT/wp-content/uploads/2025/12/Untitled-1.webp'); /* REMPLACE PAR TON IMAGE */
    background-attachment: fixed; /* Effet Parallaxe */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: white;
}

/* Le dégradé noir intelligent (Noir 85% -> Transparent) */
.sahara-experience-immersive .sahara-divider-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, 
                rgba(0, 0, 0, 0.85) 0%, 
                rgba(0, 0, 0, 0.4) 45%, 
                rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

.sahara-experience-immersive .sahara-divider-content {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 50px;
    justify-content: space-between;
    align-items: center;
}

.sahara-experience-immersive .sahara-divider-text {
    flex: 0 0 55%;
}

.sahara-experience-immersive .sahara-divider-badges {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Style des Badges/Services */
.sahara-experience-immersive .badge-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 4px;
    backdrop-filter: blur(5px); /* Effet verre dépoli très chic */
    border-left: 2px solid #c5a059;
    transition: 0.3s;
}

.sahara-experience-immersive .badge-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(10px);
}

.sahara-experience-immersive .badge-icon {
    color: #c5a059;
    font-size: 20px;
}

.sahara-experience-immersive .badge-title {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    margin-bottom: 5px;
}

.sahara-experience-immersive .badge-desc {
    font-size: 13px;
    color: #ccc;
    margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .sahara-experience-immersive .sahara-divider-content {
        flex-direction: column;
        padding: 60px 20px;
        text-align: center;
    }
    .sahara-experience-immersive .sahara-divider-text,
    .sahara-experience-immersive .sahara-divider-badges {
        flex: 0 0 100%;
    }
    .sahara-experience-immersive .badge-item {
        justify-content: center;
    }
}



/* =========================================
   9. SECTION TÉMOIGNAGES (Social Proof)
   ========================================= */
.sahara-testimonials {
    padding: 100px 5%;
    background-color: #ffffff;
    text-align: center;
}

.testi-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 50px;
}

.testi-card {
    background: #f9f7f2;
    padding: 40px;
    width: 350px;
    border: 1px solid #eee;
    position: relative;
    transition: 0.4s;
}

.testi-card:hover {
    border-color: #c5a059;
    transform: translateY(-5px);
}

/* Photo du Client ou de l'objet chez lui */
.client-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    border: 2px solid #c5a059;
}

.testi-quote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 25px;
}

.testi-author {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    color: #0a1412;
}

.testi-location {
    font-size: 12px;
    color: #c5a059;
}

/* Barre des Valeurs (Mots-clés) */
.trust-bar {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 80px;
    border-top: 1px solid #eee;
    padding-top: 40px;
}

.trust-item {
    text-align: center;
}

.trust-item strong {
    display: block;
    color: #0a1412;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
}

.trust-item span {
    font-size: 12px;
    color: #888;
}

@media (max-width: 768px) {
    .trust-bar { flex-direction: column; gap: 30px; }
    .testi-card { width: 100%; }
}






/* ============================================================
   SAHARA IMPORT - ULTIMATE LUXURY GALLERY SLIDER
   "The WOW Effect" - Do not content with standard
   ============================================================ */

/* 1. CONTAINER GLOBAL & EFFET D'OUVERTURE */
.sahara-native-slider {
    position: relative;
    margin: 80px auto; /* Plus d'espace pour respirer */
    padding: 0 60px !important; /* Espace généreux pour les flèches */
    max-width: 1600px; /* Grande largeur pour un effet cinéma */
    background: #ffffff;
    opacity: 0;
    animation: saharaFadeIn 1.2s ease-out forwards; /* Entrée élégante */
}

@keyframes saharaFadeIn {
    to { opacity: 1; }
}

/* 2. LE CONTENEUR DE DÉFILEMENT (invisible mais fluide) */
.sahara-native-slider ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-behavior: smooth;
    webkit-overflow-scrolling: touch;
    gap: 30px; /* Espacement large pour le luxe */
    padding: 30px 5px 60px 5px !important; /* Espace pour l'ombre */
    margin: 0 !important;
    list-style: none !important;
    scrollbar-width: none; /* Cache la barre sur Firefox */
}

.sahara-native-slider ul.products::-webkit-scrollbar {
    display: none; /* Cache la barre sur Chrome/Safari */
}

/* 3. LA CARTE PRODUIT - L'EFFET GALERIE */
.sahara-native-slider ul.products li.product {
    flex: 0 0 calc(16.66% - 25px) !important; /* 6 colonnes */
    min-width: 240px; /* Plus large pour la qualité image */
    margin: 0 !important;
    background: #ffffff;
    border-radius: 4px; /* Coins très légers pour la modernité */
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); /* Transition ultra-lisse */
    border: none !important; /* Pas de bordure standard */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* Ombre très subtile par défaut */
    overflow: hidden;
}

/* EFFET HOVER (Wow Factor) */
.sahara-native-slider ul.products li.product:hover {
    transform: translateY(-12px) scale(1.02); /* Soulèvement et zoom léger */
    box-shadow: 0 25px 50px rgba(197, 160, 89, 0.15); /* Ombre dorée douce (Sahara) */
}

/* 4. IMAGE PRODUIT - EFFET ZOOM */
.sahara-native-slider ul.products li.product img {
    border-radius: 4px 4px 0 0;
    background: #fdfdfd;
    margin-bottom: 0 !important;
    transition: transform 1s ease; /* Zoom image très lent au hover */
    object-fit: cover;
    aspect-ratio: 1/1; /* Force un carré parfait pour l'alignement */
}

.sahara-native-slider ul.products li.product:hover img {
    transform: scale(1.1); /* Zoom de l'image à l'intérieur de la carte */
}

/* 5. TEXTES - ÉLÉGANCE MINIMALISTE */
.sahara-native-slider ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Playfair Display', serif !important; /* Typo luxe */
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #222 !important;
    margin: 20px 15px 10px 15px !important;
    height: 44px; /* Alignement parfait des titres sur 2 lignes */
    overflow: hidden;
    text-transform: capitalize;
    letter-spacing: 0.2px;
}

.sahara-native-slider ul.products li.product .price {
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #c5a059 !important; /* Couleur Dorée Sahara */
    margin: 0 15px 25px 15px !important;
    display: block;
}

/* 6. BADGE PROMO - DISCRET ET ÉLÉGANT */
.sahara-native-slider .onsale {
    display: block !important;
    background: rgba(197, 160, 89, 0.9) !important; /* Doré semi-transparent */
    color: #fff !important;
    font-family: sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 12px !important;
    border-radius: 0 0 4px 0 !important; /* Arrondi juste en bas à droite */
    top: 0 !important;
    left: 0 !important;
    min-height: auto !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 7. FLÈCHES DE NAVIGATION - MINIMALISTES ET FLOTTANTES */
.nav-sahara {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px !important;
    height: 50px !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    z-index: 100 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    border: 1px solid #eee !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    opacity: 0.6; /* Flèches discrètes par défaut */
}

/* Effet au survol des flèches */
.nav-sahara:hover {
    background: #c5a059 !important; /* Fond doré au hover */
    color: #ffffff !important;
    border-color: #c5a059 !important;
    opacity: 1; /* Pleine opacité au hover */
    transform: translateY(-50%) scale(1.1);
}

/* Positionnement des flèches */
.nav-prev { left: 5px !important; }
.nav-next { right: 5px !important; }

/* Masquer les boutons standard WooCommerce */
.sahara-native-slider .button { display: none !important; }

/* 8. RESPONSIVE - ADAPTATION ÉLÉGANTE */
@media (max-width: 1200px) {
    .sahara-native-slider ul.products li.product { flex: 0 0 calc(25% - 22px) !important; } /* 4 col */
}

@media (max-width: 900px) {
    .sahara-native-slider ul.products li.product { flex: 0 0 calc(33.33% - 20px) !important; } /* 3 col */
}

@media (max-width: 768px) {
    .sahara-native-slider { padding: 0 15px !important; margin: 40px auto; }
    .sahara-native-slider ul.products li.product { flex: 0 0 calc(50% - 15px) !important; } /* 2 col */
    .nav-sahara { display: none !important; } /* On cache les flèches sur mobile */
}











/* --- SECTION ACCESSORIES - LUXURY UNIFIED STYLE --- */

#sahara-acc-section {
    position: relative;
    margin: 80px auto;
    padding: 0 60px !important;
    max-width: 1600px;
    background: #ffffff;
    opacity: 0;
    animation: saharaFadeIn 1.2s ease-out forwards;
}

@keyframes saharaFadeIn { to { opacity: 1; } }

/* En-tête Spécifique Accessories */
.s-acc-header-editorial {
    margin-bottom: 40px;
    border-left: 3px solid #c5a059;
    padding-left: 25px;
}

.s-acc-kicker {
    font-family: 'Inter', sans-serif;
    color: #c5a059;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 11px;
    font-weight: 700;
}

.s-acc-header-editorial h2 {
    font-family: 'Playfair Display', serif !important;
    font-size: 38px !important;
    color: #1a1a1a !important;
    margin: 10px 0 !important;
}

.s-acc-lead {
    font-size: 15px;
    color: #666;
    max-width: 650px;
    line-height: 1.6;
}

/* LE CONTENEUR DE DÉFILEMENT */
#sahara-acc-section ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 25px;
    padding: 30px 5px 60px 5px !important;
    margin: 0 !important;
    list-style: none !important;
    scrollbar-width: none;
}

#sahara-acc-section ul.products::-webkit-scrollbar { display: none; }

/* LA CARTE PRODUIT (6 COLONNES) */
#sahara-acc-section ul.products li.product {
    flex: 0 0 calc(16.66% - 21px) !important;
    min-width: 220px;
    margin: 0 !important;
    background: #ffffff;
    border-radius: 4px;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    overflow: hidden;
}

#sahara-acc-section ul.products li.product:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 50px rgba(197, 160, 89, 0.15);
}

/* IMAGE ZOOM EFFECT */
#sahara-acc-section ul.products li.product img {
    transition: transform 1s ease;
    object-fit: cover;
    aspect-ratio: 1/1;
}

#sahara-acc-section ul.products li.product:hover img { transform: scale(1.1); }

/* TEXTES - ÉLÉGANCE MINIMALISTE */
#sahara-acc-section .woocommerce-loop-product__title {
    font-family: 'Playfair Display', serif !important;
    font-size: 15px !important; /* Adapté pour 6 colonnes */
    font-weight: 500 !important;
    color: #222 !important;
    margin: 20px 15px 10px 15px !important;
    height: 44px;
    overflow: hidden;
    line-height: 1.4 !important;
}

#sahara-acc-section .price {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #c5a059 !important;
    margin: 0 15px 25px 15px !important;
}

/* BOUTON EXPLORE BAS DE PAGE */
.s-acc-footer { text-align: center; margin-top: 20px; }
.s-acc-explore-btn {
    display: inline-block;
    padding: 12px 30px;
    border: 1px solid #1a1a1a;
    color: #1a1a1a !important;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
    transition: 0.4s;
}
.s-acc-explore-btn:hover { background: #1a1a1a; color: #fff !important; }

/* FLÈCHES DE NAVIGATION (Copié de Jewelry) */
.nav-sahara {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    width: 50px; height: 50px;
    background: #fff !important;
    color: #1a1a1a !important;
    z-index: 100;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #eee !important;
    opacity: 0.6;
    transition: all 0.3s ease;
}
.nav-sahara:hover { background: #c5a059 !important; color: #fff !important; opacity: 1; transform: translateY(-50%) scale(1.1); }
#acc-prev { left: 5px !important; }
#acc-next { right: 5px !important; }

/* Masquer les boutons standard */
#sahara-acc-section .button { display: none !important; }


/*========================================
--- SAHARA IMMERSIVE DIVIDER CORRIGÉ --- 
==========================================*/

.sahara-immersive-divider {
    position: relative;
    width: 100%;
    min-height: 450px;
    margin: 80px 0;
    background-image: url('https://saharaimport.com/SIMPORT/wp-content/uploads/2025/10/sahara1.webp'); 
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sahara-divider-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 1.0), rgba(197, 0, 0, 0.0));
    z-index: 1;
}

/* REMPLACÉ GRID PAR FLEX POUR ÉVITER LES ERREURS */
.sahara-divider-content {
    position: relative;
    z-index: 2;
    max-width: 1300px;
    width: 100%;
    padding: 60px 40px;
    display: flex; /* Stable */
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

.sahara-divider-text {
    flex: 2; /* Prend 2/3 de l'espace */
    text-align: left;
}

.sahara-divider-badges {
    flex: 1; /* Prend 1/3 de l'espace */
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 280px;
}

/* STYLE DES TEXTES */
.divider-kicker {
    font-family: 'Inter', sans-serif;
    color: #c5a059;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 11px;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.sahara-divider-text h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: 42px !important;
    color: #ffffff !important;
    margin: 0 0 20px 0 !important;
    line-height: 1.2 !important;
}

.sahara-divider-text p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 35px 0;
    line-height: 1.8;
}

.divider-cta {
    display: inline-block;
    padding: 14px 30px;
    border: 1px solid #c5a059;
    color: #c5a059 !important;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
    transition: 0.3s ease;
}

.divider-cta:hover {
    background: #c5a059;
    color: #1a1a1a !important;
}

/* BADGES */
.badge-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.20);
    padding: 18px 25px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-icon { color: #c5a059; font-weight: bold; }
.badge-title {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* RESPONSIVE PARFAIT */
@media (max-width: 991px) {
    .sahara-divider-content {
        flex-direction: column; /* S'empile proprement */
        text-align: center;
    }
    .sahara-divider-text { text-align: center; }
    .sahara-divider-badges { width: 100%; align-items: center; }
    .badge-item { width: 100%; max-width: 350px; }
}

/*=========================================
Design "Vogue Boutique
===========================================*/
/* =========================================
   SAHARA POWER HUB - ANTI-BUG VERSION
   ========================================= */
/* --- ALIGNEMENT ÉDITORIAL --- */
/* --- SECTION PARENTE --- */
.sahara-power-hub {
    padding: 100px 5%;
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box;
}

.sahara-power-hub .s-acc-header-editorial {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    border-left: none;
    padding-left: 0;
}

/* --- STRUCTURE GRID (DESKTOP) --- */
/* --- STRUCTURE GRID (SANS ERREUR DE TOKEN) --- */
.hub-container {
    display: grid !important;
    /* On utilise des pourcentages pour éviter l'erreur de l'unité 'fr' */
    /* Total = 100% (28% + 44% + 28%) */
    grid-template-columns: 28% 44% 28% !important; 
    
    /* On verrouille le plan pour corriger le décalage à droite */
    grid-template-areas: "journal lookbook concierge" !important;
    
    gap: 25px !important;
    min-height: 700px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* --- ASSIGNATION DES ZONES --- */
.journal-box   { grid-area: journal !important; }
.lookbook-box  { grid-area: lookbook !important; }
.concierge-box { grid-area: concierge !important; }


/* --- ASSIGNATION DES BOITES ET IMAGES --- */
.journal-box { 
    grid-area: journal !important; 
    background: url('https://saharaimport.com/SIMPORT/wp-content/uploads/2025/11/Kilim-rug-18.webp') center/cover no-repeat !important; 
}

.lookbook-box { 
    grid-area: lookbook !important; 
    background: url('https://saharaimport.com/SIMPORT/wp-content/uploads/2025/11/ceram63.webp') center/cover no-repeat !important; 
}

.concierge-box { 
    grid-area: concierge !important; 
    background: url('https://saharaimport.com/SIMPORT/wp-content/uploads/2025/10/25.webp') center/cover no-repeat !important; 
}

/* --- STYLE COMMUN DES BOITES --- */
.hub-box {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 45px;
    color: white;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-radius: 4px;
    min-width: 0;
}

.hub-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}

/* --- EFFET OVERLAY & TEXTE --- */
.hub-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
    z-index: 1;
    transition: 0.4s;
}

.hub-content {
    position: relative;
    z-index: 2;
    transform: translateY(20px);
    transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.hub-box:hover .hub-content {
    transform: translateY(0);
}

.hub-box h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: 32px !important;
    margin: 15px 0 !important;
    color: #fff !important;
}

.hub-kicker {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #c5a059;
    font-weight: 700;
}

.hub-link {
    display: inline-block;
    margin-top: 20px;
    color: white;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 2px solid #c5a059;
    padding-bottom: 5px;
    transition: 0.3s;
}

/* --- MOBILE FIX (CORRIGÉ) --- */
@media (max-width: 1024px) {
    .hub-container {
        display: grid !important;
        /* On utilise 1fr pour que le navigateur calcule l'espace disponible exact */
        grid-template-columns: 1fr !important; 
        
        /* Nettoyage de la syntaxe des zones */
        grid-template-areas: 
            "lookbook" 
            "journal" 
            "concierge" !important;
        
        grid-template-rows: auto auto auto !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 20px !important;
        
        /* SÉCURITÉ : On force le container à ne jamais dépasser l'écran */
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 15px !important; /* Padding externe raisonnable */
        box-sizing: border-box !important; 
        overflow: hidden !important;
    }

    .hub-box {
        /* CRUCIAL : width 100% + box-sizing pour que le padding reste à l'INTÉRIEUR */
        width: 100% !important;
        max-width: 100% !important;
        height: 450px !important;
        transform: none !important;
        padding: 30px !important;
        box-sizing: border-box !important; /* Empêche le décalage à droite */
        margin: 0 !important;
    }

    .hub-content {
        transform: translateY(0) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}