/* --- CONFIGURATION DE BASE --- */
:root {
  --Color_1: #202020;
   --Color_2: #202020;

  /* 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);

  /* Fond principal (Noir/Gris foncé) */
  /*--Color_2: #EAEAEA;*/
}

@media (max-width: 768px) {
    /* On annule la hauteur forcée pour le scroll-to-horizontal */
    .scroll-sequence-container {
        height: auto !important; 
    }

    /* La galerie ne doit plus coller à l'écran sur mobile */
    .sticky-gallery-wrapper {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* On active le SWIPE horizontal natif */
    .horizontal-strip {
        width: 100% !important;
      /*  height: auto !important;*/
        transform: none !important; /* On annule le JS */
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        display: flex;
                
    }

    /* On ajuste les images pour qu'elles prennent la largeur de l'écran */
    .img-slide {
        width: 100vw !important;
        height: 60vh !important; /* Hauteur réduite pour laisser voir la suite */
        margin-right: 0 !important; /* Plus de chevauchement sur mobile */
        scroll-snap-align: center;
        flex-shrink: 0;
    }

    .img-slide img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

    /* On cache l'indicateur de scroll PC s'il existe */
    .scroll-indicator {
        display: none;
    }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* largeur de la scrollbar */
::-webkit-scrollbar {
    width: 9px;  /* Épaisseur de la barre verticale (haut-bas) */
    height: 4px; /* Épaisseur de la barre horizontale (gauche-droite) - Ajustez ici */
    padding-left: 4px;
}
/* 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);
}


body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--Color_1);
  color: var(--Color_2);
  overflow-x: hidden;
  margin: 0;
}

.mobile-only {
  display: none;
  margin-bottom: 0px !important;
}


:root {
  --btn-size: 43px;
  --insta-color: #7232BD;
  --logo-color-default: var(--insta-color);
  --logo-color-hover: #000;
}
/* ========================================= */
/* 2. SCROLL HORIZONTAL & DISPOSITION 80/20  */
/* ========================================= */

/* CONTENEUR DE SCROLL : Déclencher le scroll plus tôt */
.scroll-sequence-container {
  height: 200vh;
  /* Se termine après l'équivalent de 2 écrans de scroll */
  position: relative;
  z-index: 1;
}

/* WRAPPER STICKY : Base pour les deux colonnes (80/20) */
.sticky-gallery-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  /* Permet la division en colonnes */
  align-items: center;
  background-color: var(--Color_1);
}

/* --------------------------------- */
/* 2A. Colonne d'Images (80vw)       */
/* --------------------------------- */
.gallery-column {
  width: 100vw;
  /* Limite la zone visible de la galerie à 80% */
  height: 100vh;
  overflow: hidden;
}

/* La bande d'images qui glisse - Elle est DANS .gallery-column */
.horizontal-strip {
  display: flex;
  height: 100vh;
  /* Largeur totale de 4 images de 80vw avec -45vw de marge: 320vw - 135vw = 185vw */
  width: 185vw;
  flex-shrink: 0;
  /* Ajout pour plus de robustesse */
  will-change: transform;
}

/* La bande d'images qui glisse */
/*
.horizontal-strip {
    display: flex; 
    height: 100vh; 
    width: 85vw; 
    will-change: transform;
}*/

/* Chaque slide (image + espace de chevauchement) */
.img-slide {
  width: 80vw;
  /* Largeur de l'espace de la slide */
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-right: -45vw;
  /* Votre marge négative pour un chevauchement intense */
}

.product-type-casquette .img-slide {
  margin-right: -25vw;
  /* Marge différente pour les casquettes */
}

.img-slide:last-child {
  margin-right: 0;
  /* Pas de marge pour la dernière image */
}

/* L'image elle-même */
.img-slide img {
  height: 80vh;
  width: auto;
  object-fit: contain;
 /* filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.6));*/
}




/* Positionnement et style du bouton retour */
#backButton {
  /* Positionnement fixe en haut à droite de l'écran */
  /* Changez 'fixed' par 'absolute' si vous voulez qu'il reste en haut du contenu et disparaisse au scroll */
  position: fixed;
  top: 60px;
  left: 20px;
  z-index: 999;
  /* Pour qu'il soit au-dessus des autres éléments */

  /* Reset du style bouton */
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;

  /* --- LIGNES À AJOUTER --- */
  outline: none;
  /* Enlève le contour noir/bleu sur ordinateur */
  -webkit-tap-highlight-color: transparent;
  /* Enlève le carré grisé/noir sur mobile lors du clic */
  /* ------------------------ */

  /* Animations (équivalent duration-200) */
  transition: transform 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Couleur du SVG (équivalent stroke-blue-300) */
#backButton svg {
  stroke: var(--Color_3);
  /* Un bleu clair */
  fill: none;
}

/* Effet au survol (équivalent hover:scale-125) */
#backButton:hover {
  transform: scale(1.15);
}

/* Effet au clic (équivalent active:scale-100) */
#backButton:active {
  transform: scale(0.9);
}

/* Ajustement pour mobile */
@media (max-width: 768px) {
  #backButton svg {
    width: 40px;
    height: 40px;
  }
}


.scroll-indicator {
  position: fixed;
  top: 92vh;
  left: 40%;
  /* 50% de 80vw + 20vw = 40% de 100vw pour centrer sous la galerie */
  transform: translateX(-50%);
  font-size: 0.9rem;
  color: var(--Color_3);
  animation: bounce 2s infinite;
  z-index: 10;
  text-transform: uppercase;
  letter-spacing: 2px;
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
  /* Ajoute une transition de 0.5 seconde sur la propriété opacity */
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  40% {
    transform: translateX(-50%) translateY(-10px);
  }

  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}


/* --------------------------------- */
/* 2B. Colonne d'Informations (20vw) */
/* --------------------------------- */
.product-info-sticky {
  width: 35vw;
  /* Prend les 20% restants, fixe */
  height: 100vh;
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 1 !important;
  opacity: 0.93;
  padding: 70px 20px 50px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
  /* Contrôle précis de l'espace entre CHAQUE bloc */
  z-index: 100000;
  /* Optionnel: pour mieux marquer la colonne */
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background-color: var(--Color_1);
}

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

.product-info-sticky .product-header {
  text-align: left;
  margin-bottom: 30px;
}

.product-info-sticky .product-title {
  font-size: 1.5rem;
  text-transform: uppercase;
  margin-bottom: 15px;
  letter-spacing: 1px;
  color: var(--Color_2);
}

.product-info-sticky .price-row {
  position: absolute;
  font-size: 1.9rem;
  right: 50px;
  color: var(--Color_3);
  font-weight: bold;
}


.product-info-sticky .actions-wrapper-sticky {
  padding: 0;
  /*flex-grow: 1;*/
}

.product-info-sticky .option-block {
  margin-top: 15px;
  margin-bottom: 0px;
}

.product-info-sticky .label {
  display: block;
 /* margin-bottom: 10px;*/
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--Color_2);
}

/* --- Modifiez ou ajoutez cette section dans votre styles_Article.css --- */

/* --- Ajoutez ou modifiez dans styles_Article.css --- */

/* --- Ajoutez ou modifiez dans styles_Article.css --- */

/* 1. Style pour masquer les swatches non prioritaires */
.hidden-swatch {
  display: none !important;
}

/* 2. Style pour le bouton d'affichage de toutes les couleurs */
.show-more-btn {
  width: 100%;
  /* Prend toute la largeur de son conteneur */
  padding: 10px;
  margin-top: 15px;
  margin-bottom: 5px;
  background-color: var(--Color_1);
  /* Fond sombre */
  color: var(--Color_3);
  /* Couleur d'accentuation (Violet Josy) */
  border: 1px solid var(--Color_3);
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background-color 0.2s;
}

.show-more-btn:hover {
  background-color: #383838;
  /* Légèrement plus clair au survol */
}

/* Conteneur pour le défilement horizontal */
.color-swatches {
  display: flex;
  flex-wrap: wrap;
  /*flex-wrap: nowrap;
  /* EMPÊCHE LE RETOUR À LA LIGNE */
  overflow-x: auto;
  /* PERMET LE DÉFILEMENT HORIZONTAL */
  gap: 8px;
  padding-top: 6px;
  /* Pour éviter que la scrollbar coupe les pastilles */
  padding-bottom: 10px;
  /* Pour éviter que la scrollbar coupe les pastilles */
  margin-top: 0px;
}

/* Optionnel : pour les mobiles, désactiver le comportement de scrollbar standard */
.color-swatches::-webkit-scrollbar {
  height: 6px;
}

.color-swatches::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 5px;
}

/* --- Styles pour les prix en promotion --- */

#productPrice {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Le prix initial barré */
.old-price {
    text-decoration: line-through;
    color: #999; /* Gris pour s'effacer un peu */
    font-size: 0.85em;
    font-weight: normal;
}

/* Le nouveau prix promo bien visible */
.promo-price {
    color: #e63946; /* Un rouge vif ou utilisez var(--accent) selon votre thème */
    font-weight: bold;
    font-size: 1.1em !important;
    background-color: rgba(230, 57, 70, 0.1); /* Léger fond coloré optionnel */
    padding: 2px 8px;
    border-radius: 10px;
}

/* Vos titres de catégories sont toujours en pleine largeur, ils forceront une nouvelle ligne
   même si flex-wrap: nowrap est activé, ce qui est parfait pour grouper deux lignes
   ou plus sans défilement vertical complet. */
.color-category-header {
  flex-basis: 100%;
  /* S'assure que le titre prend toute la ligne */
  opacity: 0;
  display: none;
  /* ... autres styles ... */
}

/* 2. Style des boutons de couleur (swatch) */
.swatch {
  width: 25px;
  height: 25px;
  border-radius: 50%;

  /* 🎨 CORRECTION VISUELLE PRINCIPALE : Bordure blanche par défaut */
  border: 2px solid var(--Color_2, #EAEAEA);
  /* Bordure blanche (ou claire) de 2px */

  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: all 0.2s ease;




}


.product-ref {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 10px;
}

/* 3. Style du rond sélectionné */
.swatch.active {
  /* Maintient la bordure claire (blanche) et ajoute une bordure de sélection plus foncée/couleur accent */

  /* Option 1: Bordure plus épaisse */
  /* border: 4px solid var(--Color_3, #9400D3); */

  /* Option 2: Bordure blanche fine + Ombre autour (plus esthétique) */
  /*border: 2px solid var(--Color_2, #EAEAEA);
  /* Maintient le blanc */
  box-shadow: 0 0 0 4px var(--Color_3, #9400D3);
  /* Ombre (halo) colorée pour indiquer la sélection */
}

/* 4. Mettez à jour le style du conteneur du logo si vous avez des swatches de logo */
.logo-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /*margin-top: 10px;*/

  padding-left: 10px;
  padding-right: 10px;
}

.size-buttons {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.size-btn {
  width: auto;
  min-width: 31px;
  height: 31px;
  background: transparent;
  border: 1px solid #555;
  color: var(--Color_2);
  cursor: pointer;
  transition: 0.3s;
  border-radius: 6px;
  font-family: 'Poppins', sans-serif;
  /* AJOUTEZ CECI */
  flex-shrink: 0;
  /* Empêche les boutons de rétrécir */
}

.size-btn:hover {
  border-color: var(--Color_3);
}

.size-btn.active {
  background: var(--Color_3);
  border-color: var(--Color_3);
  color: white;
}

/* Styles pour un bouton de taille indisponible */
.size-buttons .size-btn.disabled,
.size-buttons .size-btn[disabled] {
  opacity: 0.4;
  /* Grisage */
  cursor: not-allowed;
  /* Curseur d'interdiction */
  border-color: var(--Color_2);
  /* Peut-être une couleur plus discrète */
  pointer-events: none;
  /* S'assure qu'aucun clic n'est capturé même sur les bords */
}

.guide-link {
  font-size: 0.8rem;
  text-decoration: underline;
  margin-top: 10px;
  color: #aaa;
  cursor: pointer;
}

/* Bouton Ajouter au panier */
.product-info-sticky .add-to-cart-btn {
  width: 100%;
  padding: 15px;
  background-color: var(--Color_2);
  color: var(--Color_1);
  font-weight: 900;
  text-transform: uppercase;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: 0.3s;
  letter-spacing: 1px;
  font-size: 1rem;
  margin-top: auto;
}

/*
#cartIcon {
  position: fixed;
  top: 22px;
  right: 25px;
  width: 48px;
  height: 48px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.25s ease;
  z-index: 10000;
   color: #9400D3 !important;
}
*/
/*

#cartIcon::before {
  content: "🛒";
  font-size: 23px;
  filter: grayscale(1) brightness(0.7) sepia(1) hue-rotate(250deg) saturate(1);
}

#cartIcon span {
  position: absolute;
  top: 8px;
  right: 8px;
   color: #9400D3 !important;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}*/
/*
#cartPopup {
  position: fixed;
  top: 80px;
  right: 20px;
  background: #1e1e1e;
  color: #fff;
  border-radius: 16px;
  padding: 20px;
  width: 400px;
  max-height: 500px;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: none; 
  z-index: 10000;
  font-family: "Poppins", sans-serif;
}

#cartPopup h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.4em;
  text-align: center;
  border-bottom: 1px solid #444;
  padding-bottom: 10px;
}*/

/*

#cartItems .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #333;
  gap: 10px;
  position: relative;
}*/

/* ... styles omis pour la concision (item img, info, remove-btn, total, checkoutBtn) ... */
/*
#cartTotal {
  margin-top: 15px;
  font-weight: 700;
  font-size: 1.2em;
  text-align: right;
  color: #fff;
}*/

.size-guide-link {
  font-size: 0.85rem;
  text-decoration: underline;
  color: var(--accent);
  cursor: pointer;
  margin-bottom: 10px;
  display: inline-block;
}

/* Centrer tous les titres H2 dans le popup */
.modal-guide-content h2 {
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
}

/* Ajustement du container pour le scroll */
.modal-guide {
    display: none;
    position: fixed;
    z-index: 1000000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    backdrop-filter: blur(4px);
    
    /* Permet le scroll sur le popup lui-même si le contenu dépasse */
    overflow-y: auto; 
    padding: 20px 0; /* Un peu d'espace en haut/bas sur mobile */
}

.modal-guide-content {
    background-color: #1a1a1a;
    margin: 40px auto; /* Marge auto pour centrer et scrollable */
    padding: 30px;
    width: 90%;
    max-width: 650px;
    border-radius: 15px;
    border: 1px solid var(--Color_3);
    color: #eee;
    position: relative;
    /* On s'assure que le contenu ne soit pas coupé */
    height: auto;
}

.close-guide {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 30px;
  cursor: pointer;
  color: var(--color-red);
}

.guide-flex {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
  font-size: 1rem;
}

.guide-img-fluid {
  max-width: 140px;
  filter: invert(1);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

p{
  font-size: 1.05rem;
}

/* Cible le texte à l'intérieur des accordéons (Description et Composition) */
.accordion-body, 
.accordion-body p, 
.accordion-body li {
    font-size: 1.05rem;
    line-height: 1.6; /* Ajoute un peu d'espace entre les lignes pour le confort visuel */
  /*  color: #EAEAEA;   /* Assure-toi que la couleur reste bien visible sur le fond sombre */
}

/* Optionnel : si tu veux que les listes soient un peu plus aérées */
.accordion-body ul {
    margin-top: 10px;
    padding-left: 1.2rem;
}

.accordion-body li {
    margin-bottom: 8px;
}

th,
td {
  border: 1px solid #444;
  padding: 12px;
  text-align: center;
  font-size: 0.8rem;
}

th {
  background: var(--Color_3);
  color: white;
  font-size: 0.5rem;
}

/*fin guide*/

.product-info-sticky .product-header h1 {
  font-size: 1.8rem;
  /*clamp(0.5rem, 2.3vw, 1.8rem); /* 1.8rem;*/
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  /* AJOUTEZ CECI pour le mettre en gras */
  margin-bottom: 5px;
}

/* ---- Nouveau bouton ajouter au panier ---- */
/*
.addToCartBtn {
  position: absolute;
  transform: translateX(-50%) !important;
  bottom: 7px;
  height: 30px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  margin-bottom: 10px;
  width: 90%;
  text-align: center;
  cursor: pointer;
  transition: all 0.35s ease;
  overflow: hidden;
  box-shadow: 0 0 15px color-mix(in srgb, var(--accent), transparent 60%);
   -webkit-tap-highlight-color: transparent;
    outline: none;
}*/

.addToCartBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 0px auto; /* Centrage automatique suffisant */
    padding: 10px 0px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
    color: white;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease; /* Transition ciblée */
    border-radius: 999px;
    position: absolute;
  transition: all 0.35s ease;
    bottom: 0px;
    overflow: hidden;
      box-shadow: 0 0 15px color-mix(in srgb, var(--accent), transparent 60%);
   -webkit-tap-highlight-color: transparent;
    outline: none
    
    /* SUPPRIMEZ CES DEUX LIGNES : */
    /* left: 50%; */
    /* transform: translateX(-50%); */
}

.addToCartBtn:hover {
      box-shadow: 0 0 25px color-mix(in srgb, var(--accent), transparent 40%);
    transform: scale(1.02); /* Fonctionne maintenant sans déplacer le bouton */
}

/* Effet de confirmation "Succès" au clic */
/* On remplace :active par .clicked */
/* 1. L'animation de rotation (Spin) */
@keyframes button-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* État de chargement (appliqué dès le clic) */
.addToCartBtn.loading {
  pointer-events: none; /* Désactive le clic */
  color: transparent; /* Cache le texte original pendant que ça tourne */
}

/* On crée un petit cercle qui tourne au milieu */
.addToCartBtn.loading::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: button-spin 0.8s linear infinite;
  left: calc(50% - 10px);
  top: calc(50% - 10px);
}

/* 2. L'état de succès (Message "Ajouté") */
.addToCartBtn.clicked::after {
  content: "✓ AJOUTÉ !";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #27ae60;
  color: white;
  font-weight: 700;
  border-radius: inherit;
  z-index: 10;
  animation: successFade 1.5s ease-in-out forwards; /* Dure exactement 1.5s */
}

@keyframes successFade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes button-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


.addToCartBtn {
    /* Garde tes styles de base, mais change le background */
  /*  background: linear-gradient(45deg, var(--accent), #9400D3, var(--accent));
    background-size: 200% 200%;
   /* animation: gradientShift 3s ease infinite;*/
    overflow: hidden;
    z-index: 1;
}

/* Effet de brillance qui traverse le bouton */
.addToCartBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s;
    z-index: -1;
}

.addToCartBtn:hover::before {
    left: 100%; /* La brillance traverse au survol */
    transition: 0.5s;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}



@keyframes pulse {
  from {
    transform: scale(1);
    opacity: 1;
  }

  to {
    transform: scale(1.3);
    opacity: 0;
  }
}
/*
.addToCartBtn.loadding {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  width: 50px !important;
  min-width: 50px !important;

  height: 50px !important;
  padding: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  pointer-events: none;
  color: transparent !important;
  border-radius: 50px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.addToCartBtn.loadding::after {
  content: "";
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: button-spin 1.8s linear infinite;

  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px;
    transition: all 1.3s ease;
}

@keyframes button-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}*/

/* État désactivé */
.addToCartBtn.disabled {
  background: #555;
  color: #aaa;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.product-info-sticky .add-to-cart-btn:hover {
  background-color: var(--Color_3);
  color: white;
  box-shadow: 0 5px 20px color-mix(in srgb, var(--accent), transparent 60%);
}


/* ========================================= */
/* 3. SECTION D'INFO POST-SCROLL             */
/* ========================================= */

.product-info-section {
  position: relative;
  background-color: var(--Color_1);
  padding: 80px 20px 150px;
  z-index: 0;
  min-height: 100vh;
  width: 64vw;
}

@media (max-width: 768px) {
  .product-info-section {
    width: 100vw;
  }
}

.info-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

/* Styles Accordéon */
.details-accordion {
  max-width: 600px;
  margin: 0 auto;
}

.accordion-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.accordion-header {
  width: 100%;
  padding: 25px 0;
  background: none;
  border: none;
  color: var(--Color_2);
  text-align: left;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  font-family: 'Poppins', sans-serif;
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  color: #bbb;
  line-height: 1.6;
}

.accordion-body p {
  padding-bottom: 25px;
}

.mobile-info-toggle {
  opacity: 0;
  display: none;
}

.mobile-info-panel {
  opacity: 0;
  display: none;
}

/* ========================================= */
/* 4. MOBILE RESPONSIVE (Téléphone)          */
/* ========================================= */
@media (max-width: 768px) {

  .color-swatches {
    flex-wrap: wrap;
    /* ✅ Autorise le passage à la ligne */
    overflow-x: visible;
    /* ✅ Désactive le défilement horizontal */
    justify-content: flex-start;
    /* Aligne les pastilles au début */
    gap: 12px;
    /* Espace entre les pastilles */
  }

  /* Chaque slide (image + espace de chevauchement) */
  .img-slide {
    width: 100vw;
    scale: 0.85;
    margin-right: -5vw;
    /* Votre marge négative pour un chevauchement intense */
  }


  .product-type-casquette .img-slide {
    scale: 0.65;
    margin-right: 5vw;
    /* Marge différente pour les casquettes */
  }

  .mobile-info-toggle {
    opacity: 1;
    display: auto;
  }

  .mobile-info-panel {
    opacity: 1;
    display: auto;
  }

  .mobile-only {
    display: flex;
    /* ou block, ou grid, selon votre mise en page */
  }

  .desktop-only {
    display: none !important;
  }


  /* Mise à jour des couleurs pour les swatches et boutons dans la colonne sticky (Desktop) */
  .mobile-info-panel .swatch.active {
    border: 3px solid var(--color-accent);
  }

  .mobile-info-panel .size-btn.active {
    background: var(--Color_3);
    border-color: var(--Color_3);
    color: white;
  }



  /* Bouton Ajouter au panier */
  .mobile-info-panel .add-to-cart-btn {
    width: 100%;
    padding: 15px;
    background-color: var(--Color_2);
    color: var(--Color_1);
    font-weight: 900;
    text-transform: uppercase;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
    letter-spacing: 1px;
    font-size: 1rem;
    margin-top: auto;
  }

  /* Cache la colonne sticky desktop et l'indicateur de scroll */
  .product-info-sticky,
  .scroll-indicator {
    display: none !important;
  }

  .sticky-gallery-wrapper {
    display: block;
  }

  .gallery-column {
    width: 100vw;
  }

  /* Correction de la largeur pour le mobile : 4*100vw - 3*25vw = 265vw */
  .horizontal-strip {
    width: 325vw;
    padding-top: 90px;
    height: 78%;
  }


  /* ---------------------------------- */
  /* 4A. Bouton Toggle Mobile (Icône) */
  /* ---------------------------------- */
  .mobile-info-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 0;
    top: 70vh;
    /* Contre le coté droit, vers le milieu */
    transform: translateY(-50%);
    z-index: 1000;
    width: 45px;
    height: 45px;
    background-color: var(--Color_3);
color: var(--text) !important; /* Force la couleur du texte */
    /* Violet Josy */
    border: none;
    cursor: pointer;
    border-radius: 5px 0 0 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    padding: 10px;
    transition: right 0.3s ease;
  }

  .mobile-info-toggle svg path {
    fill: var(--text);
    /* Icone en couleur claire */
  }

  /* ---------------------------------- */
  /* 4B. Panneau d'Info Mobile (80vw) */
  /* ---------------------------------- */
  .mobile-info-panel {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 80vw;
    /* Largeur demandée */
    height: 95vh;
   /* background-color: var(--color-light-bg);
    /* 0.9 devient 90% */
background-color: color-mix(in srgb, var(--color-light-bg), transparent 0%);
    /* Fond blanc */
    color: var(--color-dark-text);
    /* Texte sombre */
    z-index: 9999999;
    border-radius: 20px 0 0 20px;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.4);

    /* Caché par défaut */
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    overflow-y: auto;
    padding: 20px;
  }

  .mobile-info-panel.open {
    transform: translateX(0);
    /* Ouverture */
  }

  .panel-close-btn {
    position: sticky;
    top: 0;
    right: 10px;
    background: var(--color-light-bg);
    border: none;
    font-size: 3rem;
    cursor: pointer;
    color: var(--color-red);
    z-index: 1001;
    padding: 5px;
    line-height: 1;
    margin-bottom: 10px;
  }

  .panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Noir semi-transparent */
   z-index: 999999;
    display: none; /* Caché par défaut */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Quand le panneau est actif, on montre l'overlay */
.panel-overlay.active {
    display: block;
    opacity: 1;
}

  /* Styles pour les éléments DANS le panneau mobile */
  .mobile-info-panel .product-price {
    position: absolute;
    right: 30px;
        top: 30px;
        font-size: 2rem;
    color: var(--Color_3);
    font-weight: bold;
    margin-bottom: 10px;

  }

  .mobile-info-panel .label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--Color_2);
  }

  .mobile-info-panel .option-block {
    margin-bottom: 35px;
    display: flex;
    /* Si c'est déjà flex */
    flex-direction: column;
    /* FORCER LE PASSAGE À LA COLONNE */
    align-items: flex-start;
    /* Aligner les éléments à gauche */
  }

  .mobile-info-panel .option-block:first-of-type {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }



  .mobile-info-panel .product-ref {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 10px;
  }

  .mobile-info-panel .swatch {
    width: 30px;
    height: 30px;
    margin-bottom: 0px;
  }

  .mobile-info-panel .product-header {
    text-align: left;
    margin-bottom: 30px;
  }

  .mobile-info-panel .product-title {
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 1px;
    color: var(--Color_2);
  }

  /* Plus facile à cliquer */
}

/* --- Styles pour le bouton partiel (+X) (si plus de 10 couleurs) --- */
.color-show-more-btn {
  width: 35px;
  /* Taille similaire aux swatches */
  height: 35px;
  border: 2px solid var(--Color_2, #EAEAEA);
  background-color: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  color: var(--Color_2);
  transition: background-color 0.3s;
  flex-shrink: 0;
}

.color-show-more-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Force les swatches à rester en ligne même avec le bouton */
.color-swatches {
  display: flex;
  /* Ajoutez ce style si ce n'est pas déjà le cas pour que la swatch + le bouton soient alignés */
  gap: 10px;

  padding-left: 10px;
  padding-right: 10px;
}

/* Styles spécifiques pour le wrapper de la swatch + bouton lorsque > 10 couleurs */
.color-swatches-partial-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;

}

/* --- Styles pour le Popup Modal --- */
.color-popup-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  /* Fond sombre semi-transparent */
  display: none;
  /* Caché par défaut */
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1001;
}

.color-popup-modal.open {
  display: flex;
  opacity: 1;
}

.color-popup-modal .popup-content {
  background-color: var(--Color_1);
  padding: 30px;
  top: 25px;
  border-radius: 12px;
  max-width: 900px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 1001;
}

.color-popup-modal .popup-title {
  color: var(--Color_3);
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.8rem;
}

.color-popup-modal .popup-subtitle {
  text-align: center;
  color: var(--Color_2);
  margin-bottom: 25px;
}

.popup-miniatures-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  /* Centrer les miniatures */
}

/* Style de la miniature de couleur dans le popup */
.popup-color-miniature {
  cursor: pointer;
  text-align: center;
  border: 3px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
  width: 120px;
  /* Taille fixe pour la miniature */
  flex-shrink: 0;
}

.popup-color-miniature:hover {
  border-color: var(--Color_3, #9400D3);
}

.popup-color-miniature.active {
  border-color: var(--Color_3, #9400D3);
  box-shadow: 0 0 10px rgba(148, 0, 211, 0.8);
}

.popup-color-miniature img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 5px;
}

.popup-color-miniature-name {
  margin-top: 5px;
  font-size: 0.85rem;
  color: var(--Color_2);
  font-weight: 500;
}

/* ============================================ */
/* STYLE SPÉCIFIQUE DU BOUTON DE FERMETURE POPUP COULEURS */
/* ============================================ */

#closeColorPopup {
  /* 1. Mettre le texte (l'emoji '×') en rouge */
  color: var(--color-red, #a41e1e);
  /* Utilise la variable CSS si définie, sinon #a41e1e par défaut */

  /* 2. Augmenter la taille pour le rendre plus visible */
  font-size: 3rem;
  position: absolute;
  right: 15px;

  /* 3. Assurer que le fond est transparent */
  background: transparent;

  /* 4. Retirer la bordure par défaut des boutons */
  border: none;

  /* 5. Ajouter un curseur pour indiquer que c'est cliquable */
  cursor: pointer;

  /* 6. Centrer l'emoji dans la zone du bouton */
  line-height: 1;
  padding: 0 10px;
  /* Ajout d'un peu d'espace autour du X */

  /* Rendre le focus plus visible pour l'accessibilité */
  transition: color 0.2s ease;
}

#closeColorPopup:hover,
#closeColorPopup:focus {
  /* Assombrir ou changer légèrement de couleur au survol */
  color: #cc0000;
  outline: none;
  /* Enlève l'anneau de focus par défaut si nécessaire */
}

/* NOUVELLE CLASSE POUR BLOQUER LE DÉFILEMENT (si non déjà ajoutée) */
body.no-scroll {
  overflow: hidden !important;
}

/* Cache le bouton par défaut sur ordinateur (car il est déjà dans la sidebar) */
.gallery-column .addToCartBtn {
    display: none;
}

@media (max-width: 768px) {
    /* Affiche le bouton sur mobile */
    .gallery-column .addToCartBtn {
        display: block;
        width: 60%; /* Largeur presque complète */
        margin: 30px auto; /* Centre le bouton avec de l'espace au-dessus/dessous */
        opacity: 1;
        cursor: pointer;
        z-index: 10;
        bottom : 60px;
        left: 20vw;
      /*  position: relative; /* S'assure qu'il suit le flux après les images */
    }

}




/* Animation d'entrée pour les éléments de la colonne info */
.product-info-sticky > * {
    opacity: 0;
   /* transform: translateY(30px);*/
    animation: fadeInUp 0.6s ease forwards;
}

/* Délais progressifs (Cascade) */
.product-info-sticky header { animation-delay: 0.1s; }
.product-info-sticky .actions-wrapper-sticky { animation-delay: 0.2s; } /* Logo color */
.product-info-sticky .option-block:nth-of-type(2) { animation-delay: 0.3s; } /* Couleur */
.product-info-sticky .option-block:nth-of-type(3) { animation-delay: 0.4s; } /* Taille */
.product-info-sticky .addToCartBtn {
   animation-delay: 0.5s; 
  margin-bottom: 10px;
  }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 1. BOUTONS TAILLE : Plus modernes */
.size-btn {
    border: 1px solid rgba(255, 255, 255, 0.2); /* Bordure plus subtile */
    background: rgba(255, 255, 255, 0.05); /* Fond très léger */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Effet rebond */
    font-weight: 500;
}

.size-btn:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}

.size-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.1); /* Grossit légèrement */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* 2. SWATCHES COULEUR : Effet "Ring" */
.swatch {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    outline-width: 0px;
   /* border: 2px solid transparent; /* Prépare la bordure */
}

.swatch:hover {
    transform: scale(1.15);
}

.swatch.active {
    transform: scale(1.1);
    border: 2px solid var(--bg-color, #202020); /* Crée un espace entre la couleur et l'anneau */
   /* box-shadow: 0 0 0 2px var(--accent); /* L'anneau extérieur */
}

/* Amélioration du scroll container */
.horizontal-strip {
    /* Ajoute le snap scrolling pour que ça s'arrête net sur une image */
    scroll-snap-type: x mandatory; 
    /* Assure-toi que le parent a overflow-x: auto ou scroll si tu veux que CSS gère le scroll, 
       sinon si c'est JS, ignore cette ligne */
}

.img-slide {
    scroll-snap-align: center;
    transition: transform 0.5s ease;
}



@media (min-width: 769px) {



 
.img-slide:hover {
  /*  transform: scale(1.05); /* Ajuste la valeur du zoom ici */
}


/* Petit effet de zoom au survol de l'image pour voir les détails */
.img-slide img {
    transition: transform 0.4s ease;
   /* cursor: zoom-in;*/
}

.lifestyle-grid img:hover {
    transform: scale(1.02);
}
}

@media (max-width: 768px) {
    .actions-wrapper-mobile {
     /*   padding: 15px;*/
        background: var(--color-light-bg);
        border-radius: 12px;
       /* margin-top: 20px;*/
    }

    .logo-control-section {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 5px;
    }

    .logo-color-swatches-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* On s'assure que le switch mobile a la même logique que le desktop */
    #logo-type-toggle-mobile:checked + .switch-rail {
        background-color: var(--accent);
    }
}



/* --- SECTION LIFESTYLE --- */
.lifestyle-section {
    margin-top: 50px;
    padding: 0 10px;
    width: 64vw;
}

@media (max-width: 768px) {
    .lifestyle-section {
        width: 100vw;
    }
}

.lifestyle-title {
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.lifestyle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 photos côte à côte */
    gap: 15px;
}

.lifestyle-grid img {
    width: 100%;
    height: 450px; /* Ajuste selon tes photos */
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.3s ease;
}





/* Cache la scrollbar sur le strip tout en gardant le défilement */
.horizontal-strip {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
.horizontal-strip::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Conteneur des points (visible uniquement sur mobile) */
.pagination-dots {
    display: none; /* Caché sur PC */
    justify-content: center;
    gap: 10px;
  /*  margin-top: 15px;
    margin-bottom: 10px;*/
}

@media (max-width: 768px) {
    .pagination-dots {
        display: flex;
    }
}

/* Style des points */
.dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.3); /* Couleur inactive */
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Point actif - Utilise la couleur du thème */
.dot.active {
    background-color: var(--start);
    transform: scale(1.3);
}


.cart-icon {
    display: none; /* Caché par défaut */
    width: 47px;
    height: 24px;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* État collé (Sticky Icon) */
.addToCartBtn.is-sticky {
    position: fixed;
    top: 80%; /* Centré verticalement */
    left: 88vw;
    transform: translateY(-50%);
    width: 50px; /* Devient un carré/cercle */
    height: 50px;
    border-radius: 40%; /* Forme ronde */
    padding: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    background-color: var(--start); /* Utilise ta couleur de thème */
}

.addToCartBtn.is-sticky .btn-text {
    display: none; /* Cache le texte */
}

.addToCartBtn.is-sticky .cart-icon {
    display: block; /* Affiche l'icône */
    color: var(--text) !important; /* Assure que l'icône est visible */
      -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* Optionnel : petit badge si besoin, ou animation de pulsation */
.addToCartBtn.is-sticky:hover {
   /* transform: translateY(-50%) scale(1.1);*/
}

/* Supprime le contour blanc au clic */
.addToCartBtn:focus, 
.addToCartBtn:active,
.addToCartBtn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}



/*----------------------LOGO SIGNATURE COLOR---------------*/




/* Les logos : On les "arrache" du flux pour qu'ils flottent au-dessus */
.layer-logo {
    position: absolute !important;
    object-fit: contain;
    z-index: 2; /* Au-dessus du T-shirt */
    pointer-events: none; /* On peut cliquer "à travers" */
}

#img-texture-int {
    z-index: 3; /* L'intérieur au-dessus de l'extérieur si besoin */
}

/* Container du Switch */
.logo-control-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
   /* margin-bottom: 20px;*/
}

.logo-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    width: 96px;
    height: 48px;
    margin-bottom: 10px;
}

.switch-input {
    display: none; /* Cache la checkbox */
}

.switch-rail {
    width: 100%;
    height: 100%;
    background-color: #fb7185; /* Rose (Contour) */
    border-radius: 999px;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
}

/* Le rond blanc qui bouge */
.switch-rail::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 2;
}

/* État coché (Intérieur) */
.switch-input:checked + .switch-rail {
    background-color: #10b981; /* Vert (Intérieur) */
}

.switch-input:checked + .switch-rail::after {
    transform: translateX(48px);
}

/* Icônes */
.switch-icon {
    position: absolute;
    top: 8px;
    width: 32px;
    height: 32px;
    z-index: 1;
    transition: all 0.3s ease;
}

.icon-outline { left: 8px; color: #fff; }
.icon-filled { right: 8px; color: #fff; }

/* Animation au survol */
.logo-switch:hover .switch-rail::after {
    scale: 0.95;
}

/* Style pour la pastille active (le rond bleu) */
.logo-color-swatches .swatch.active {
   /* outline: 3px solid #007bff; 
    outline-offset: 2px;
    transform: scale(1.1);*/
}

/* Style pour les pastilles désactivées (image manquante) */
.logo-color-swatches .swatch.disabled {
    opacity: 0.2;
    cursor: not-allowed;
    filter: grayscale(1);
    pointer-events: none; /* Empêche le clic */
}



.logo-control-section {
    display: flex;
    flex-direction: row; /* Aligne sur une ligne */
    align-items: center; /* Centre verticalement */
    gap: 0px; /* Espace entre le switch et le texte */
  /*  margin-bottom: 20px;*/
}

.logo-switch {
    /* On réduit un peu l'échelle si c'est trop gros pour être à côté du texte */
    transform: scale(0.65);
    transform-origin: left center;
    margin-right: -15px; /* Compense le vide créé par le scale */
}

.switch-rail {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    transition: background-color 0.4s ease; /* Transition fluide de la couleur */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    position: relative;
    background-color: #333; /* Couleur par défaut avant chargement JS */
}

/* On supprime les anciennes règles de couleur fixe */
.switch-input:checked + .switch-rail {
    background-color: transparent; /* Sera géré par le JS */
}

/* --- État quand le fond est blanc --- */

/* Le rond blanc passe en noir */
.logo-switch.is-light .switch-rail::after {
    background-color: #000000;
}

/* Les icônes (T-shirts) passent en noir */
.logo-switch.is-light .switch-icon {
    color: #000000 !important;
}

/* Optionnel : ajouter une bordure très fine au rail si c'est du blanc pur 
   pour qu'on voie les limites du switch sur fond blanc */
.logo-switch.is-light .switch-rail {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1), inset 0 2px 4px rgba(0,0,0,0.2);
}


/* --- STYLES POUR LES PRIX EN PROMOTION (ARTICLE) --- */

/* Conteneur principal du prix (#product-price dans votre HTML) */
#product-price {
    display: flex;
    align-items: center;
    gap: 15px; /* Espace entre le prix barré et le prix promo */
    justify-content: flex-start; /* Aligné à gauche dans la colonne infos */
    margin-top: 10px;
}

/* Le prix original barré */
#product-price .old-price {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.5); /* Gris/blanc transparent sur fond sombre */
    font-size: 1.2rem; /* Légèrement plus petit */
    font-weight: normal;
}

/* Le prix promo qui doit "sauter à l'oeil" */
#product-price .promo-price {
    color: #e63946; /* Rouge vif JOSY */
    font-weight: 800; /* Très gras */
    font-size: 2.2rem; /* Gros pour être bien visible */
    text-shadow: 0px 0px 15px rgba(230, 57, 71, 0.4); /* Petit halo rouge pour le style */
}

/* Style standard (quand il n'y a pas de promo) */
#product-price .standard-price {
    font-size: 2rem;
    font-weight: bold;
    color: var(--Color_2); /* Couleur claire par défaut */
}