/* ================================================ */
/* FEUILLE DE STYLE AMÉLIORÉE ET RESPONSIVE         */
/* POUR LA SECTION "OFFRE DU JOUR"                */
/* ================================================ */

/* --- Variables CSS (ajustez selon votre charte graphique) --- */
:root {
  --cultured: #f1f1f1; /* Gris très clair */
  --sandy-brown: #f4a460; /* Notation étoile */
  --salmon-pink: #FF6347; /* Couleur accentuation (Tomate) */
  --sonic-silver: #757575; /* Gris moyen (prix barré) */
  --eerie-black: #1c1c1c; /* Noir doux */
  --white: #ffffff;
  --text-gray: #666666; /* Gris texte description */
  --text-dark: #333333; /* Texte principal */
  --primary-blue: #007bff; /* Bleu primaire (liens, accents) */
  --light-gray-bg: #f8f9fa; /* Fond clair */
  --medium-gray-bg: #e9ecef; /* Fond moyen */
  --progress-bar-fill: #007bff; /* Remplissage barre progression */

  /* Tailles de police (exemples, ajustez) */
  --fs-base: 16px;
  --fs-large: 28px;
  --fs-medium: 20px;
  --fs-small: 14px;
  --fs-xsmall: 12px;

  /* Graisses de police */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-bold: 700;

  /* Rayons de bordure */
  --border-radius-lg: 12px;
  --border-radius-md: 8px;
  --border-radius-sm: 4px;

  /* Transitions */
  --transition-timing: 0.3s ease;
}

/* --- Styles Généraux --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  font-size: var(--fs-base);
}

a {
  text-decoration: none;
  color: var(--primary-blue);
  transition: color var(--transition-timing);
}

a:hover {
  color: darken(var(--primary-blue), 10%);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* --- Section Produit Vedette --- */
.produit-vedette {
margin-bottom: 40px; /* Plus d'espace en bas */
padding: 0 15px; /* Padding latéral pour éviter que le contenu colle aux bords */
}

.produit-vedette > .titre { /* Cible le H2 direct enfant */
  font-size: var(--fs-large);
  color: var(--text-dark);
  text-align: center;
  margin-bottom: 30px;
  font-weight: var(--weight-bold);
}

/* --- Wrapper Scrollable --- */
.produit-vedette .conteneur-defilant {
display: flex;
gap: 20px; /* Espace entre les cartes produit */
overflow-x: auto; /* Active le scroll horizontal */
overscroll-behavior-inline: contain; /* Comportement de scroll plus fluide */
scroll-snap-type: inline mandatory; /* Force l'arrêt sur un élément */
padding-bottom: 20px; /* Espace pour la scrollbar et l'ombre éventuelle */
margin-left: -15px; /* Compense le padding du parent pour un effet pleine largeur */
margin-right: -15px; /* Compense le padding du parent */
padding-left: 15px; /* Ré-applique le padding pour le premier élément */
padding-right: 15px; /* Ré-applique le padding pour le dernier élément */

/* Style optionnel de la scrollbar */
scrollbar-width: thin;
scrollbar-color: #ccc var(--cultured);
}
.produit-vedette .conteneur-defilant::-webkit-scrollbar {
height: 8px;
}
.produit-vedette .conteneur-defilant::-webkit-scrollbar-track {
background: var(--cultured);
border-radius: 10px;
}
.produit-vedette .conteneur-defilant::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 10px;
border: 2px solid var(--cultured); /* Crée un effet de bordure */
}
.produit-vedette .conteneur-defilant::-webkit-scrollbar-thumb:hover {
background-color: #aaa;
}

/* --- Carte Produit Individuelle --- */
.produit-vedette .conteneur-vitrine {
min-width: 90%; /* Laisse entrevoir le produit suivant sur mobile */
flex: 0 0 90%; /* Base pour flexbox, important pour scroll-snap */
background-color: var(--white);
border: 1px solid var(--cultured);
border-radius: var(--border-radius-lg); /* Coins plus arrondis */
scroll-snap-align: start; /* Aligne le début de l'élément lors du snap */
display: flex;
flex-direction: column;
overflow: hidden; /* Assure que le contenu respecte le border-radius */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Ombre douce */
transition: box-shadow var(--transition-timing);
}
.produit-vedette .conteneur-vitrine:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); /* Ombre plus prononcée au survol */
}

/* Conteneur interne pour le padding */
.produit-vedette .vitrine {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Pour que le contenu prenne toute la hauteur disponible */
}

/* --- Carrousel Interne (si utilisé) --- */
.produit-vedette .carousel {
  margin-bottom: 20px;
  border-radius: var(--border-radius-md); /* Coins arrondis pour le carrousel */
  overflow: hidden; /* Masque les dépassements */
}
.produit-vedette .carousel img { /* Cibler les images DANS le carrousel */
  aspect-ratio: 16 / 10; /* Ratio d'aspect pour images cohérentes */
  object-fit: cover; /* Assure que l'image couvre la zone */
  width: 100%; /* Redondant avec .d-block .w-100 mais assure */
}
/* Style optionnel des contrôles Bootstrap */
.produit-vedette .carousel-control-prev,
.produit-vedette .carousel-control-next {
  background: rgba(0, 0, 0, 0.3); /* Fond semi-transparent */
  width: 10%; /* Largeur des zones de contrôle */
  opacity: 0.8;
  transition: opacity var(--transition-timing);
}
.produit-vedette .carousel-control-prev:hover,
.produit-vedette .carousel-control-next:hover {
  opacity: 1;
}

/* --- Contenu Textuel de la Carte --- */
.produit-vedette .contenu-vitrine {
margin-top: auto; /* Pousse le contenu vers le bas si l'image est petite */
padding-top: 15px;
display: flex;
flex-direction: column;
flex-grow: 1; /* Occupe l'espace vertical restant */
}

.produit-vedette .notation-vitrine {
color: var(--sandy-brown);
display: flex;
align-items: center;
gap: 3px; /* Léger espace entre les étoiles */
font-size: 20px; /* Taille des icônes étoile */
margin-bottom: 12px;
}

.produit-vedette .titre-vitrine {
font-size: var(--fs-medium); /* Titre produit plus grand */
color: var(--text-dark);
font-weight: var(--weight-bold);
margin-bottom: 8px;
line-height: 1.3;
/* Gestion du texte long */
display: -webkit-box;
-webkit-line-clamp: 2; /* Limite à 2 lignes */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: calc(1.3em * 2); /* Hauteur fixe basée sur line-height * nb lignes */
}
.produit-vedette .contenu-vitrine a:hover .titre-vitrine {
color: var(--primary-blue);
}

.produit-vedette .description-vitrine {
color: var(--text-gray);
font-size: var(--fs-small);
font-weight: var(--weight-light);
margin-bottom: 15px;
line-height: 1.5;
text-align: left;
/* Limiter le nombre de lignes */
display: -webkit-box;
-webkit-line-clamp: 3; /* Limite à 3 lignes */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1; /* Permet à la description d'occuper l'espace avant le prix */
min-height: calc(1.5em * 3); /* Hauteur minimale pour éviter sauts de layout */
}
.produit-vedette .description-vitrine br {
  display: none; /* Masquer les <br> pour un meilleur contrôle du flux */
}

/* --- Prix --- */
.produit-vedette .boite-prix {
display: flex;
align-items: baseline; /* Aligner sur la ligne de base */
gap: 10px;
margin-bottom: 15px;
flex-wrap: wrap; /* Si jamais les prix sont trop longs */
}

.produit-vedette .prix {
font-size: var(--fs-medium); /* Prix actuel plus visible */
color: var(--salmon-pink);
font-weight: var(--weight-bold);
}

.produit-vedette del {
font-size: var(--fs-small); /* Prix barré plus petit */
color: var(--sonic-silver);
font-weight: var(--weight-light);
}

/* --- Bouton Découvrir --- */
.produit-vedette .btn-decouvrir {
background: var(--primary-blue);
padding: 10px 20px;
color: var(--white);
font-size: var(--fs-small);
font-weight: var(--weight-bold);
text-transform: uppercase;
border-radius: var(--border-radius-md);
margin-bottom: 20px;
text-align: center;
transition: background-color var(--transition-timing), transform var(--transition-timing);
align-self: flex-start; /* Aligner à gauche */
letter-spacing: 0.5px;
}
.produit-vedette .btn-decouvrir:hover {
background-color: darken(var(--primary-blue), 10%);
transform: translateY(-2px); /* Léger effet de soulèvement */
}

/* --- Statut Ventes/Stock --- */
.produit-vedette .statut-vitrine {
margin-bottom: 10px;
margin-top: auto; /* Pousse ce bloc vers le bas avant le compte à rebours */
padding-top: 10px; /* Espace au-dessus */
}

.produit-vedette .statut-vitrine .enveloppe {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text-gray);
font-size: var(--fs-xsmall);
font-weight: var(--weight-regular);
text-transform: uppercase;
flex-wrap: wrap; /* Permettre retour à la ligne */
gap: 5px 15px; /* Espacement vertical et horizontal */
}
.produit-vedette .statut-vitrine .enveloppe p {
  margin: 0;
}
.produit-vedette .statut-vitrine .enveloppe b {
  font-weight: var(--weight-bold);
  color: var(--text-dark); /* Nombre en plus foncé */
}

/* --- Compte à rebours --- */
.produit-vedette .boite-compte-rebours {
background-color: var(--light-gray-bg);
padding: 15px;
border-radius: var(--border-radius-md);
text-align: center;
margin-top: 10px; /* Espace après le statut */
position: relative; /* Pour le positionnement des boutons de nav internes */
}

.produit-vedette .desc-compte-rebours {
font-size: var(--fs-small);
font-weight: var(--weight-bold);
color: var(--primary-blue);
margin-bottom: 12px;
}

.produit-vedette .compte-rebours {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap; /* Important pour petits écrans */
}

.produit-vedette .element-compte-rebours {
background-color: var(--white);
padding: 8px 10px;
border-radius: var(--border-radius-sm);
color: var(--text-dark);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-width: 55px; /* Largeur minimale */
transition: transform var(--transition-timing);
}
.produit-vedette .element-compte-rebours:hover {
  transform: scale(1.05);
}

.produit-vedette .nombre-affiche {
font-size: var(--fs-medium); /* Chiffres plus grands */
font-weight: var(--weight-bold);
color: var(--primary-blue);
line-height: 1.1;
}

.produit-vedette .texte-affiche {
font-size: 9px; /* Texte très petit */
text-transform: uppercase;
margin-top: 3px;
letter-spacing: 0.5px;
color: var(--text-gray);
}

/* --- Barre de Progression --- */
.produit-vedette .barre-statut-vitrine {
position: relative;
height: 8px;
width: 100%;
background: var(--medium-gray-bg);
border-radius: 4px;
margin-top: 15px; /* Espace après les chiffres du compte à rebours */
overflow: hidden;
}

.produit-vedette .barre-statut-vitrine::before {
position: absolute;
content: '';
top: 0;
left: 0;
height: 100%;
width: var(--progress, 0%); /* Variable CSS mise à jour par JS */
background-color: var(--progress-bar-fill);
transition: width 0.5s ease-in-out;
}

/* --- Boutons de Navigation Internes (btn-vers-1, btn-vers-2) --- */
/* ATTENTION : Non recommandé pour la responsivité. Cachés sur mobile/tablette */
.produit-vedette .btn-vers-1,
.produit-vedette .btn-vers-2 {
  position: absolute;
  top: 50%; /* Centre verticalement par rapport au boite-compte-rebours */
  transform: translateY(-50%);
  background-color: rgba(0, 123, 255, 0.8); /* Bleu semi-transparent */
  color: var(--white);
  width: 36px; /* Plus petits */
  height: 36px;
  border-radius: 50%;
  display: flex; /* Pour centrer l'icône */
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: background-color var(--transition-timing), opacity var(--transition-timing);
  z-index: 5; /* Au-dessus du contenu */
  opacity: 0; /* Cachés par défaut, apparaissent au survol du parent */
  pointer-events: none; /* Non cliquables si cachés */
}
.produit-vedette .boite-compte-rebours:hover .btn-vers-1,
.produit-vedette .boite-compte-rebours:hover .btn-vers-2 {
  opacity: 1; /* Apparaissent au survol de la zone compte à rebours */
  pointer-events: auto; /* Devennent cliquables */
}

.produit-vedette .btn-vers-1 {
  left: 10px; /* Positionné à gauche */
}
.produit-vedette .btn-vers-2 {
  right: 10px; /* Positionné à droite */
}

.produit-vedette .btn-vers-1:hover,
.produit-vedette .btn-vers-2:hover {
  background-color: rgba(0, 86, 179, 0.9); /* Bleu plus foncé au survol */
}

.produit-vedette .icone-fleche {
  font-size: 18px;
  line-height: 1; /* Assurer centrage vertical de la flèche */
}

/* ================================================ */
/* --- MEDIA QUERIES POUR LA RESPONSIVITÉ ---         */
/* ================================================ */

/* --- Tablettes (~768px) et plus petit --- */
@media (max-width: 768px) {
  .produit-vedette > .titre {
    font-size: calc(var(--fs-large) * 0.9); /* Titre légèrement plus petit */
  }
  .produit-vedette .conteneur-defilant {
    gap: 15px;
    margin-left: -10px; /* Ajuster compensation padding */
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .produit-vedette .conteneur-vitrine {
    min-width: 85%; /* Voir un peu plus du produit suivant */
    flex-basis: 85%;
    border-radius: var(--border-radius-md); /* Moins arrondi */
  }
  .produit-vedette .vitrine {
    padding: 15px; /* Moins de padding interne */
  }
  .produit-vedette .titre-vitrine {
      font-size: calc(var(--fs-medium) * 0.9);
      height: calc(1.3em * 2); /* Conserver hauteur fixe */
  }
  .produit-vedette .description-vitrine {
      font-size: calc(var(--fs-small) * 0.95);
      -webkit-line-clamp: 2; /* Moins de lignes sur tablette */
      min-height: calc(1.5em * 2);
  }
  .produit-vedette .boite-prix {
      gap: 8px;
      margin-bottom: 12px;
  }
  .produit-vedette .prix {
      font-size: calc(var(--fs-medium) * 0.95);
  }
  .produit-vedette del {
      font-size: calc(var(--fs-small) * 0.95);
  }
  .produit-vedette .btn-decouvrir {
      padding: 8px 16px;
      font-size: calc(var(--fs-small) * 0.95);
      margin-bottom: 15px;
  }
  .produit-vedette .desc-compte-rebours {
      font-size: calc(var(--fs-small) * 0.9);
  }
  .produit-vedette .nombre-affiche {
      font-size: calc(var(--fs-medium) * 0.9);
  }
  .produit-vedette .texte-affiche {
      font-size: 8px;
  }

  /* Cacher les boutons de navigation internes sur tablette/mobile */
  .produit-vedette .btn-vers-1,
  .produit-vedette .btn-vers-2 {
      display: none;
  }
}

/* --- Mobiles (~576px) et plus petit --- */
@media (max-width: 576px) {
   .produit-vedette {
      padding: 0 5px; /* Encore moins de padding latéral */
   }
   .produit-vedette > .titre {
      font-size: calc(var(--fs-large) * 0.8);
   }
   .produit-vedette .conteneur-defilant {
      gap: 10px; /* Espace minimum entre cartes */
      padding-bottom: 15px;
      margin-left: -5px; /* Ajuster compensation */
      margin-right: -5px;
      padding-left: 5px;
      padding-right: 5px;
   }
   .produit-vedette .conteneur-vitrine {
      min-width: 88%; /* Ajuster si besoin */
      flex-basis: 88%;
      border-radius: var(--border-radius-md);
   }
   .produit-vedette .vitrine {
      padding: 12px;
   }
    .produit-vedette .titre-vitrine {
      font-size: calc(var(--fs-medium) * 0.85);
      height: calc(1.3em * 2);
  }
   .produit-vedette .notation-vitrine {
      font-size: 18px;
      margin-bottom: 8px;
   }
   .produit-vedette .description-vitrine {
      font-size: calc(var(--fs-small) * 0.9);
      -webkit-line-clamp: 2;
      min-height: calc(1.5em * 2);
      margin-bottom: 12px;
   }
   .produit-vedette .prix {
      font-size: var(--fs-medium);
   }
   .produit-vedette del {
      font-size: var(--fs-small);
   }
   .produit-vedette .btn-decouvrir {
      width: 100%; /* Bouton pleine largeur */
      padding: 12px; /* Plus facile à cliquer */
      font-size: var(--fs-small);
   }
   .produit-vedette .statut-vitrine .enveloppe {
      font-size: 10px; /* Très petit */
      justify-content: space-around; /* Mieux si wrap */
      gap: 3px 10px;
   }
   .produit-vedette .boite-compte-rebours {
      padding: 10px;
   }
   .produit-vedette .compte-rebours {
      gap: 8px;
      justify-content: space-around; /* Pour bien répartir si wrap */
   }
   .produit-vedette .element-compte-rebours {
      min-width: 50px;
      padding: 6px 8px;
      margin-bottom: 5px; /* Ajouter espace si wrap */
   }
   .produit-vedette .nombre-affiche {
      font-size: calc(var(--fs-medium) * 0.85);
   }
}

/* --- Très Petits Mobiles (~380px) et plus petit --- */
@media (max-width: 380px) {
  .produit-vedette > .titre {
      font-size: calc(var(--fs-large) * 0.7);
  }
  .produit-vedette .conteneur-vitrine {
      min-width: 92%; /* Presque pleine largeur */
      flex-basis: 92%;
  }
   .produit-vedette .vitrine {
      padding: 10px;
  }
  .produit-vedette .titre-vitrine {
      font-size: var(--fs-small);
      height: calc(1.3em * 2);
  }
  .produit-vedette .element-compte-rebours {
      min-width: 45px; /* Encore plus petit */
      padding: 5px;
  }
  .produit-vedette .nombre-affiche {
      font-size: var(--fs-small);
  }
  .produit-vedette .texte-affiche {
      font-size: 7px; /* Extrêmement petit */
  }
}