/* --- CONFIGURATION DE BASE --- */
:root {
  --Color_1: #202020;
  /* Fond principal (Noir/Gris foncé) */
  --Color_2: #EAEAEA;
  /* Texte et éléments clairs */

  /* Couleur d'accentuation (Violet Josy) */
  --btn-size: 43px;

  --logo-color-default: var(--insta-color);
  --logo-color-hover: #000;


  /* Violet */
  --color-dark: #222;

  --color-red: #a41e1e;
  /* Noir léger */
  --color-text: #444;
  /* Gris foncé pour le texte */
  --color-light-bg: #2d2d2d;
  /* Fond très léger */

  --insta-color: #7232BD;
  --color-primary: #7957d5;
  --Color_3: #9400D3;

  --insta-color: var(--accent);
  --color-primary: var(--accent);
  --Color_3: var(--accent);

}

.footer-inner {
    width: 100vw !important;
}

/* largeur de la scrollbar */
::-webkit-scrollbar {
    width: 9px;

}

/* fond */
::-webkit-scrollbar-track {
    background: var(--bg)
        /*var(--scrollbar-bg)*/
    ;
}

/* barre */
::-webkit-scrollbar-thumb {
    /* background-color: var(--accent);*/
    background-color: var(--start);
    border-radius: 10px;
    border: 0px solid transparent;
    background-clip: content-box;
}

/* hover */
::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--accent) 80%, black);
}



/* Styles spécifiques à la page Boutique */


body,
html {
    font-family: 'Poppins', sans-serif !important;
    padding-top: 15px; /* Espace pour la barre de navigation fixe */
    min-height: 100vh;
}

.shop-header {
    text-align: center;
    padding: 0px 20px;
    padding-top: 50px;
    margin-bottom: 0px;
}

.shop-header h1 {
    font-size: 2.5rem;
    color: var(--Color_3); /* Violet d'accentuation */
}

/* NOUVELLE MISE EN PAGE PRINCIPALE AVEC LA BARRE LATÉRALE */
.shop-content {
    display: grid;
    grid-template-columns: 200px 1fr; /* 250px pour la barre latérale, le reste pour les produits */
    gap: 30px;
    padding: 10px 5%;
    max-width: 1400px; /* Augmenté légèrement pour accueillir la barre latérale */
    margin: 0 auto;
}

/* BARRE LATÉRALE DE FILTRES */
.filter-sidebar {
    padding: 20px;
    background-color: var(--Color_1);
    border-radius: 8px;
    border: 1px solid #333;
    color: var(--Color_2);
    align-self: flex-start; /* Permet à la sidebar de ne pas s'étendre sur toute la hauteur */
    position: sticky; /* Rendre la barre latérale "collante" au défilement */
    top: 100px; /* S'arrête 100px sous le haut de la page (après la navbar) */
}

.filter-sidebar h2 {
    color: var(--Color_3);
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.filter-group {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #444;
}

.filter-group h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--Color_2);
}

.filter-group label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.filter-group label:hover {
    color: var(--Color_3);
}

.filter-group input[type="checkbox"] {
    margin-right: 8px;
    accent-color: var(--Color_3); /* Couleur d'accentuation pour les cases à cocher */
}
/* FIN DES NOUVEAUX STYLES DE FILTRE */


/* Grille des produits (Adaptation à la nouvelle mise en page) */
.shop-container {
    display: grid;
    /* On utilise 1fr pour que les colonnes se partagent équitablement l'espace */
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; /* Réduit un peu le gap pour laisser plus de place aux cartes */
    padding: 0;
    margin: 0;
    overflow: visible !important; 
}

/* Optionnel : Si tu veux passer à 4 colonnes sur les très grands écrans (ex: iMac) */
@media (max-width: 1100px) {
    .shop-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Garde ton media query actuel pour le mobile qui remet à 1 colonne */
@media (max-width: 758px) {
    .shop-container {
        grid-template-columns: 1fr;
        padding: 20px;
    }
}


/* 1. Cacher le bouton d'ouverture par défaut (ordinateur) */
.mobile-filter-trigger {
    display: none;
}

.filter-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-filters {
    display: none; /* Cacher la croix par défaut */
    background: none;
    border: none;
    color: var(--Color_2);
    font-size: 2rem;
    cursor: pointer;
}

/* 2. Style Mobile (format tel) */
@media (max-width: 900px) {
    /* Bouton "Filtres" flottant en haut à droite */
    .mobile-filter-trigger {
display: flex; /* Aligne l'icône au centre */
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 75px; /* Sous la navbar */
        left: 10px;
z-index: 9995;
        background-color: var(--Color_3); /* Le violet Josy */
        color: white;
        border: none;
        width: 45px; /* Largeur fixe pour faire un cercle */
        height: 45px; /* Hauteur fixe pour faire un cercle */
        border-radius: 50%; /* Rend le bouton rond */
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,0,0,0.4);
        padding: 0;
        transition: transform 0.2s ease, background-color 0.2s ease;
        cursor: pointer;
    }

    .mobile-filter-trigger svg {
        width: 28px;
        height: 28px;
    }

    /* Transformation de la sidebar en Popup plein écran */
    .filter-sidebar {
        position: fixed !important;
        top: 10vh;
        left: -100%; /* Caché à droite par défaut */
       /* width: 30%;*/
        width: 200px;
        height: auto;
        z-index: 10000;
        transition: left 0.3s ease-in-out;
        box-shadow: -5px 0 15px rgba(0,0,0,0.5);
        padding-top: 40px;
        display: block;
    }

    /* Classe pour afficher la popup */
    .filter-sidebar.active {
        left: -4%;
    }

    .close-filters {
        display: block; /* Afficher la croix sur mobile */
        color: #a41e1e;
        position: absolute;
        right: 10px;
        top: 5px;
        scale: 1.3;
    }

    /* Ajustement de la grille pour occuper tout l'espace */
    .shop-content {
        grid-template-columns: 1fr;
        padding-top: 0px; /* Espace pour le bouton filtre */
    }
}

/* Carte de produit individuelle */
.product-card {
    background-color: var(--Color_1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    /*height: 440px;*/

     padding-top: 20px;
}


.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 10px var(--Color_3);
}


.product-card-image {
    width: 100%;
    height: 280px; /* Taille fixe pour l'image */
    position: relative;
}

.product-card-image img {
    width: 100%;
    height: 100%;
   object-fit: contain;
    transition: transform 0.3s ease;
}

.product-card:hover .product-card-image img {
    transform: scale(1.05);
}

.product-card-info {
    padding: 12px;
    color: var(--Color_2);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-card-info h2 {
    font-size: 1.25rem;
    margin-bottom: 8px;
    color: var(--Color_2);
}

.product-card-info p {
    font-size: 1rem;
    margin-bottom: 5px;
    opacity: 0.8;
}

.product-price {
    font-size: 1.6rem !important;
    font-weight: bold;
    color: var(--Color_3); /* Violet d'accentuation */
    margin-top: 10px;
}


/* Media query pour les petits écrans */
@media (max-width: 758px) {
    /* Sur les petits écrans, empiler les filtres et les produits */
    .shop-content {
        grid-template-columns: 1fr;
    }
    
    .filter-sidebar {
        position: static; /* Désactiver le sticky sur mobile */
        margin: 0 5% 20px 5%; /* Centrer la barre de filtre au-dessus de la grille */
    }

    .shop-container {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .shop-header h1 {
        font-size: 1.5rem;
    }
}



/* --- CORRECTION DU BADGE --- */
.product-card {
    position: relative; /* INDISPENSABLE pour que le badge se place par rapport à la carte */
    background-color: var(--Color_1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden; /* Garde le badge à l'intérieur des bords arrondis */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    z-index: 1; /* Crée un contexte de base dès le départ */
}

.product-card[data-is-new="new"]::before {
    content: "🖤";
    position: absolute;
    top: 15px;
    right: 15px;
    background: gold;
    color: black;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 20px;
    z-index: 20; /* S'assure de passer devant l'image du produit */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}


/* --- STYLE DE L'ENCART FUN (JOSYmot) --- */
.fun-card {
    background: linear-gradient(135deg, var(--Color_1) 0%, var(--Color_3) 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px !important;
    border: 2px dashed var(--Color_2) !important;
}

.fun-card-content {
    color: white;
}

.fun-card-content .quote {
    font-size: 4rem;
    font-family: serif;
    line-height: 0;
    display: block;
    margin-bottom: 20px;
    opacity: 0.5;
}

.fun-card-content p {
    font-size: 1.4rem;
    font-weight: bold;
    font-style: italic;
    line-height: 1.4;
    padding: 10px;
}

.josy-stamp {
    margin-top: 20px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid white;
    padding: 5px 10px;
    display: inline-block;
}

/* --- AMÉLIORATION DES CARTES PRODUITS (LIFESTYLE TOUCH) --- */
.shop-subtitle {
    color: var(--Color_2);
     font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 10px;
    margin-bottom: 30px;
}


/* Effet au survol : on simule une profondeur */
.product-card:hover {
    transform: translateY(-10px) scale(1.02);
}

.product-card:hover {
    transform: scale(1.04) rotate(var(--tilt)); /* Utilise l'angle aléatoire du JS */
}

.product-card:hover .hover-zoom {
    transform: scale(1.1) rotate(var(--tilt)) !important; /* Utilise l'angle aléatoire du JS */
}











/* --- CONFIGURATION DU FLIP CARD --- */

/* 1. Le conteneur de la grille (ou le parent direct) */
.shop-container {
    /* Assure-toi qu'il n'y a PAS de overflow: hidden ici */
    overflow: visible !important; 
}

/* 2. La carte Flip elle-même */
.flip-card {
    position: relative;
   /* height: 450px; /* On définit la hauteur ici aussi */
    top:-15px;
    background-color: transparent !important;
    perspective: 1200px; /* Augmenté pour un effet 3D plus fluide */
    border: none !important;
    overflow: visible !important; /* TRÈS IMPORTANT : ne pas couper les coins qui tournent */
    z-index: 1;
}

/* On garde la base mais on désactive le hover pour utiliser la classe */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    cursor: pointer; /* Indique que c'est cliquable */
}

/* C'est cette classe que le JS va ajouter/enlever */
@media (max-width: 758px) {
.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}
}
/* Optionnel : On peut garder le hover UNIQUEMENT sur ordinateur 
   pour un effet plus fluide si tu le souhaites, mais le clic 
   est plus sûr pour le mobile. */
@media (min-width: 758px) {
    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }
}


/* 3. On augmente le z-index au survol pour passer devant tout le monde */
.flip-card:hover {
    z-index: 100; 
}

/* 4. Les faces de la carte */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%; /* Utilise 100% de la hauteur du parent .flip-card */
    top: 0; /* Remis à 0 pour éviter les décalages bizarres */
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Ici on le garde pour que l'image ne dépasse pas de l'arrondi */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Petit plus pour le côté premium */
}

/* Face Avant (Couleur violette/sombre) */
.flip-card-front {
    background: linear-gradient(135deg, var(--Color_1) 0%, var(--Color_3) 100%);
    border: 2px dashed var(--Color_2);
}

/* Face Arrière (Image de la personne) */
.flip-card-back {
    background-size: cover;
    background-position: center;
    transform: rotateY(180deg); /* Position de départ inversée */
    color: white;
    justify-content: flex-end; /* Texte en bas */
}

/* Overlay sur la photo pour que le texte soit lisible */
.flip-card-back::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.8));
    z-index: 1;
}

/* --- 2. Désactiver le hover "Produit" sur les Flip Cards --- */
/* On annule le mouvement vers le haut pour que seule la rotation Y fonctionne */
.product-card.flip-card:hover {
    transform: none !important; 
    box-shadow: none !important;
}

.back-info {
    position: relative;
    z-index: 2;
    padding: 20px;
    width: 100%;
    text-align: center;
}

.back-name {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
}

.back-location {
    font-size: 0.9rem;
    opacity: 0.8;
    font-style: italic;
}



.product-card {
    position: relative; /* Pour positionner le bouton par rapport à la carte */
}

/* Style du bouton Switcher */
.style-switcher {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20;
    background: var(--Color_2); /* Fond clair */
    color: var(--Color_1);    /* Texte foncé */
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid transparent;
}



/* Effet de survol uniquement sur PC */
@media (min-width: 1025px) {
    .style-switcher:hover {
        transform: scale(1.2);
        background: var(--accent);
        color: white;
    }
}

/* Optimisation pour Mobile */
@media (max-width: 1024px) {
    .style-switcher {
        width: 46px; /* Plus large pour les doigts */
        height: 46px;
    }
    
    /* On enlève le hover qui peut laisser le bouton "bloqué" en mode agrandi sur tel */
    .style-switcher:hover {
        transform: none;
    }
    
    /* Effet de retour visuel quand on appuie avec le doigt */
    .style-switcher:active {
        background: var(--accent);
        transform: scale(0.9);
    }
}

/* Évolution visuelle lors du survol de l'icône 
.style-switcher:hover {
    transform: scale(1.25) rotate(10deg);
    background: var(--accent); 
    color: white;
    border-color: white;
}*/

/* Animation pendant le changement (via JS) */
.style-switcher.evolving {
    transform: scale(0.8) rotate(-20deg);
    opacity: 0.7;
}

/* Transition douce pour l'image du produit */
.main-product-img {
    transition: opacity 0.3s ease-in-out, transform 0.5s ease;
    display: block;
    width: 82%;
    height: auto;
        margin-left: 30px;
}


/* Empêcher le lien du produit de gêner le bouton */
.product-link {
    text-decoration: none;
    color: inherit;
    display: block;
    z-index: 1;
      -webkit-tap-highlight-color: transparent; /* Supprime le flash gris/blanc sur Mobile (Safari/Chrome) */
    outline: none; /* Supprime le contour de focus sur Desktop */
}

/* Supprime l'encadré de sélection au clic sur les cartes produits */
.product-card {
    -webkit-tap-highlight-color: transparent; /* Supprime le flash gris/blanc sur Mobile (Safari/Chrome) */
    outline: none; /* Supprime le contour de focus sur Desktop */
}




/* Styles pour les prix en promotion */

.product-price {
    display: flex;
    align-items: center;
    gap: 10px; /* Espace entre les deux prix */
    justify-content: center;
    margin: 8px 0;
}

/* Le prix original barré */
.old-price {
    text-decoration: line-through;
    color: #888; /* Gris pour indiquer que c'est l'ancien prix */
    font-size: 0.85em;
    opacity: 0.7;
}

/* Le prix promo qui doit "sauter à l'oeil" */
.promo-price {
    color: #e63946; /* Un rouge vif, ou utilisez var(--accent) selon vos préférences */
    font-weight: 800;
    font-size: 1.1em;
    text-shadow: 0px 0px 10px rgba(230, 57, 71, 0.128);
     border-radius: 10px;
}

/* Optionnel : Une petite étiquette "PROMO" sur l'image */
.product-card {
    position: relative;
}