/* ========================================
   STYLES GÉNÉRAUX DE L'APPLICATION
   ======================================== */

/* Configuration du corps de la page */
body {
  background-color: rgba(238, 224, 224, 1); /* Couleur de fond beige clair */
  display: flex; /* Utilise Flexbox pour la mise en page */
  flex-direction: column; /* Organise les éléments verticalement */
  min-height: 100vh; /* Hauteur minimale = 100% de la hauteur de l'écran */
  margin: 0; /* Supprime les marges par défaut */
}

/* Le bloc principal prend tout l'espace disponible */
main {
  flex: 1; /* Prend tout l'espace restant après le header et footer */
}

/* ========================================
   STYLES DES PRODUITS - NOUVEAU DESIGN
   ======================================== */

/* Conteneur principal des produits */
.produits-container {
  padding: 0; /* Pas de padding externe */
  margin: 0; /* Pas de marge externe */
}

/* Grille responsive des produits */
.produits-grid {
  display: grid; /* Utilise CSS Grid pour la mise en page */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Colonnes adaptatives */
  gap: 1rem; /* Espace entre les cartes de produits */
  padding: 1rem; /* Espacement interne */
}

/* Carte individuelle de produit */
.produit-card {
  position: relative; /* Position relative pour l'overlay */
  aspect-ratio: 1; /* Ratio carré 1:1 */
  border-radius: 12px; /* Coins très arrondis */
  overflow: hidden; /* Cache les débordements */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Ombre portée subtile */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transition fluide */
  cursor: pointer; /* Curseur pointer pour indiquer l'interactivité */
}

/* Effet hover sur la carte - élévation et ombre */
.produit-card:hover {
  transform: translateY(-8px); /* Monte la carte de 8px */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* Ombre plus prononcée */
}

/* Image du produit dans la carte */
.produit-image {
  width: 100%; /* Largeur complète */
  height: 100%; /* Hauteur complète */
  object-fit: cover; /* L'image couvre tout l'espace sans déformation */
  transition: transform 0.3s ease; /* Transition fluide pour le zoom */
}

/* Zoom de l'image au hover */
.produit-card:hover .produit-image {
  transform: scale(1.1); /* Agrandit l'image de 10% */
}

/* Overlay du nom du produit */
.produit-overlay {
  position: absolute; /* Position absolue par rapport à la carte */
  bottom: 0; /* Aligné en bas */
  right: 0; /* Aligné à droite */
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)); /* Dégradé noir */
  backdrop-filter: blur(10px); /* Effet de flou moderne */
  color: white; /* Texte blanc */
  padding: 0.75rem 1rem; /* Espacement interne */
  border-radius: 12px 0 12px 0; /* Coins arrondis en bas à droite */
  transform: translateX(100%); /* Caché par défaut (hors écran) */
  transition: transform 0.3s ease; /* Transition fluide */
  max-width: 70%; /* Largeur maximale de 70% */
}

/* Animation de l'overlay au hover - glisse depuis la droite */
.produit-card:hover .produit-overlay {
  transform: translateX(0); /* Apparaît en glissant depuis la droite */
}

/* Style du nom du produit dans l'overlay */
.produit-nom {
  font-size: 0.9rem; /* Taille de police */
  font-weight: 600; /* Police semi-grasse */
  line-height: 1.3; /* Hauteur de ligne */
  margin: 0; /* Pas de marge */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Ombre du texte */
}

/* Lien de la carte produit */
.produit-link {
  text-decoration: none; /* Pas de soulignement */
  color: inherit; /* Hérite de la couleur du parent */
  display: block; /* Affichage en bloc */
  height: 100%; /* Hauteur complète */
}

/* Supprime le soulignement au hover */
.produit-link:hover {
  text-decoration: none; /* Pas de soulignement */
  color: inherit; /* Garde la même couleur */
}

/* Message quand il n'y a pas de produits */
.no-products {
  text-align: center; /* Centre le texte */
  padding: 4rem 2rem; /* Espacement interne */
  color: #6c757d; /* Couleur grise */
}

/* Titre du message "pas de produits" */
.no-products h3 {
  margin-bottom: 1rem; /* Espacement vers le bas */
  color: #495057; /* Couleur plus sombre */
}

/* ========================================
   STYLES DES IMAGES DU PANIER
   ======================================== */

/* Images des produits dans le panier */
.img-panier {
  width: 100px; /* Largeur fixe pour les images du panier */
  height: auto; /* Hauteur automatique pour garder les proportions */
  object-fit: contain; /* L'image s'adapte sans être coupée */
  border-radius: 8px; /* Coins arrondis */
}

/* Responsive pour les images du panier */
@media (max-width: 768px) {
  .img-panier {
    width: 80px; /* Plus petit sur tablette */
  }
}

@media (max-width: 480px) {
  .img-panier {
    width: 60px; /* Encore plus petit sur mobile */
  }
}

/* ========================================
   RESPONSIVE DESIGN DES PRODUITS
   ======================================== */

/* Adaptations pour tablettes */
@media (max-width: 768px) {
  .produits-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Colonnes plus petites */
    gap: 0.75rem; /* Espace réduit entre les cartes */
    padding: 0.75rem; /* Padding réduit */
  }
  
  .produit-overlay {
    padding: 0.5rem 0.75rem; /* Espacement interne réduit */
    max-width: 80%; /* Largeur maximale augmentée */
  }
  
  .produit-nom {
    font-size: 0.8rem; /* Police plus petite */
  }
}

/* Adaptations pour petits mobiles */
@media (max-width: 480px) {
  .produits-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Colonnes encore plus petites */
    gap: 0.5rem; /* Espace minimal */
    padding: 0.5rem; /* Padding minimal */
  }
}

/* ========================================
   COULEURS ET TYPOGRAPHIE
   ======================================== */

/* Couleur de texte sur les photos dans la page produits */
.text-brown {
  color: rgba(238, 224, 224, 1); /* Texte beige clair */
} 

/* ========================================
   FOOTER
   ======================================== */

/* Le footer reste en bas de page */
footer {
  background-color: rgba(238, 224, 224, 1); /* Même couleur que le body */
  color: black; /* Texte noir */
  text-align: center; /* Centrage du texte */
  padding: 10px 0; /* Espacement vertical */
}

/* ========================================
   COMPOSANTS BOOTSTRAP STYLISÉS
   ======================================== */

/* Cartes avec coins arrondis */
.card {
  border-radius: 20px; /* Coins très arrondis pour un look moderne */
}

/* Alertes avec style personnalisé */
.alert {
  border-radius: 15px; /* Coins arrondis */
  border: none; /* Supprime la bordure par défaut */
}

/* Tableaux avec style moderne */
.table {
  border-radius: 10px; /* Coins arrondis */
  overflow: hidden; /* Cache les débordements */
}

/* Boutons avec style personnalisé */
.btn {
  border-radius: 10px; /* Coins arrondis */
  font-weight: 500; /* Police semi-grasse */
}

/* Icônes FontAwesome avec espacement */
.fas {
  margin-right: 0.5rem; /* Espace à droite des icônes */
}

/* ========================================
   BANNIÈRE DE COOKIES
   ======================================== */

/* Bannière de cookies fixe en bas de page */
.cookie-banner {
  position: fixed; /* Position fixe pour rester visible */
  bottom: 30px; /* Distance depuis le bas */
  left: 50%; /* Centrage horizontal */
  transform: translateX(-50%); /* Ajustement du centrage */
  background: rgba(30, 30, 30, 0.95); /* Fond sombre semi-transparent */
  color: #fff; /* Texte blanc */
  padding: 20px 30px; /* Espacement interne */
  border-radius: 8px; /* Coins arrondis */
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* Ombre portée */
  z-index: 9999; /* Très haut dans la pile pour être au-dessus de tout */
  display: flex; /* Utilise Flexbox pour l'alignement */
  align-items: center; /* Centre verticalement les éléments */
  gap: 20px; /* Espace entre les éléments */
  font-size: 1rem; /* Taille de police */
}

/* Bouton de la bannière de cookies */
.cookie-banner button {
  background: #fff; /* Fond blanc */
  color: #222; /* Texte sombre */
  border: none; /* Pas de bordure */
  border-radius: 4px; /* Coins légèrement arrondis */
  padding: 8px 18px; /* Espacement interne */
  font-weight: bold; /* Police en gras */
  cursor: pointer; /* Curseur pointer */
  transition: background 0.2s; /* Transition rapide pour le fond */
}

/* Effet hover sur le bouton des cookies */
.cookie-banner button:hover {
  background: #eee; /* Fond gris clair au hover */
}

/* Pour masquer la bannière après choix de l'utilisateur */
.cookie-banner.hide {
  display: none; /* Cache complètement la bannière */
}