/* =====================================================================
   ÉCRAN PRODUITS — catégories à gauche, produits à droite
   Les valeurs viennent de reglages.css (bloc .ecran-produits).
   ===================================================================== */

/* Fond derrière l'écran (bords éventuels sur les appareils hors format borne) */
html.ecran-produits {
  background-image: url('../assets/fond-produits.webp');
}

/* ---------- En-tête : logo à gauche, catégorie en cours au centre ---------- */
#vue-produits #entete{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--haut-zone);
  pointer-events: none;
}
#vue-produits #logo{
  position: absolute;
  top: var(--logo-haut);
  left: var(--logo-gauche);
  width: var(--logo-largeur);
}
#vue-produits #titre-cat{
  position: absolute;
  top: var(--titre-haut);
  left: var(--largeur-barre);
  right: 0;
  height: var(--titre-hauteur);
  display: flex;
  align-items: center;
  justify-content: center;
}
#vue-produits #titre-cat div{
  width: var(--titre-largeur);
  height: var(--titre-hauteur);
  background: url('../assets/etiquette-papier.webp') center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .18s ease, transform .18s ease;
}
/* Transition quand la catégorie change */
#vue-produits #titre-cat div.change{
  opacity: 0;
  transform: translateY(-14px) scale(.96);
}
#vue-produits #titre-cat h1{
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: var(--titre-texte);
  letter-spacing: 2px;
  transform: rotate(var(--titre-rotation));
  text-shadow: 4px 4px 0 var(--sombre), -1px -1px 0 var(--sombre), 1px -1px 0 var(--sombre), -1px 1px 0 var(--sombre);
}

/* ---------- Barre des catégories (gauche, toujours visible) ---------- */
#vue-produits #categories{
  position: absolute;
  top: var(--haut-zone);
  bottom: var(--bas-zone);
  left: 0;
  width: var(--largeur-barre);
  box-sizing: border-box;
  padding: var(--cat-marges);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--cat-fond);              /* dégradé noir qui s'estompe vers la droite */
}
#vue-produits .cat{
  position: relative;
  flex: 1;
  max-height: var(--cat-hauteur-max);
  display: flex;
  align-items: center;
  padding: 0 22px;
  text-align: left;
  font-family: var(--police-titre);
  font-size: var(--cat-texte);
  letter-spacing: 1.2px;
  line-height: .95;
  color: var(--cat-couleur);
  text-shadow: var(--cat-contour);
  transition: color .2s ease, transform .2s ease;
}
/* Étiquette papier de surlignage, visible sur la catégorie active */
#vue-produits .cat::before{
  content: "";
  position: absolute;
  inset: 8px -6px 8px -8px;
  background: url('../assets/etiquette-papier.webp') center / 100% 100% no-repeat;
  opacity: 0;
  transform: scaleX(.6);
  transform-origin: left center;
  transition: opacity .2s ease, transform .25s ease;
}
#vue-produits .cat span{
  position: relative;
  left: 0;
  transition: left .2s ease;
}
#vue-produits .cat.active{
  color: #fff;
  transform: translateX(4px);
}
#vue-produits .cat.active::before{
  opacity: 1;
  transform: scaleX(1);
}
#vue-produits .cat.active span{
  left: var(--cat-active-decalage);         /* seul le nom bouge, l'étiquette reste en place */
  text-shadow: 2px 2px 0 var(--sombre), -1px -1px 0 var(--sombre), 1px -1px 0 var(--sombre), -1px 1px 0 var(--sombre);
}

/* ---------- Produits (droite) ---------- */
#vue-produits #produits{
  position: absolute;
  top: var(--haut-zone);
  bottom: var(--bas-zone);
  left: var(--largeur-barre);
  right: 0;
}
#vue-produits #liste{
  padding: var(--liste-marges);
}

/* Une seule catégorie affichée à la fois, avec un petit fondu */
#vue-produits .section{
  display: none;
  padding-bottom: var(--section-bas);
}
#vue-produits .section.visible{
  display: block;
  animation: entree .25s ease;
}
@keyframes entree {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

#vue-produits .grille{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grille-espace);
}
/* Option "petite: true" sur une catégorie (data/menu-data.js) : 3 colonnes */
#vue-produits .grille.petite{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grille-petite-espace);
}

/* ---------- Carte produit ---------- */
#vue-produits .produit{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--carte-ratio);
  text-align: left;
  transition: transform .15s ease;
  will-change: transform;                 /* calque à part : l'appui ne redessine rien */
}
#vue-produits .produit:active{
  transform: scale(.96);
}
#vue-produits .produit .cadre{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
#vue-produits .produit .cadre.miroir{
  transform: scaleX(-1);
}
#vue-produits .produit .photo{
  position: absolute;
  top: var(--carte-photo-haut);
  left: var(--carte-photo-cote);
  right: var(--carte-photo-cote);
  height: var(--carte-photo-hauteur);
  display: flex;
  align-items: center;
  justify-content: center;
}
#vue-produits .produit .photo img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .6));
}
#vue-produits .produit .nom{
  position: absolute;
  top: var(--carte-nom-haut);
  left: var(--carte-nom-cote);
  right: var(--carte-nom-cote);
  font-weight: 700;
  font-size: var(--nom-texte);
  line-height: 1.05;
  display: -webkit-box;
  -webkit-line-clamp: var(--nom-lignes);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#vue-produits .produit .prix{
  position: absolute;
  left: var(--carte-prix-gauche);
  bottom: var(--carte-prix-bas);
  font-family: var(--police-titre);
  font-size: var(--prix-texte);
  letter-spacing: 1px;
  line-height: 1;
  color: #fff;
  text-shadow: var(--contour-epais);
}
#vue-produits .produit .prix small{
  font-size: .6em;
  margin-left: 4px;
}

/* Bouton "+" qui devient une coche après l'ajout */
#vue-produits .produit .plus{
  position: absolute;
  right: var(--carte-plus-droite);
  bottom: var(--carte-plus-bas);
  width: var(--plus-taille);
  height: var(--plus-taille);
  border-radius: 50%;
  background: var(--degrade-plus);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55);
  transition: transform .2s ease;
}
#vue-produits .produit .plus svg{
  width: var(--plus-icone);
  height: var(--plus-icone);
}
#vue-produits .produit .plus .ok{ display: none; }
#vue-produits .produit.ajoute .plus{ transform: scale(1.15); }
#vue-produits .produit.ajoute .plus .add{ display: none; }
#vue-produits .produit.ajoute .plus .ok{ display: block; }

/* Pastille "Normal / XXL" */
#vue-produits .produit .option{
  position: absolute;
  top: var(--carte-option-haut);
  right: var(--carte-option-droite);
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .7);
  border: 2px solid var(--orange);
  font-weight: 700;
  font-size: var(--option-texte);
}

#vue-produits .grille.petite .nom{ font-size: 24px; top: 56%; }
#vue-produits .grille.petite .prix{ font-size: 34px; }
#vue-produits .grille.petite .plus{ width: 60px; height: 60px; }
#vue-produits .grille.petite .plus svg{ width: 34px; height: 34px; }

/* ---------- Indisponible / prix manquant : grisé, non commandable ---------- */
#vue-produits .produit.off{ pointer-events: none; }
#vue-produits .produit.off .photo img{ filter: grayscale(1); opacity: .4; }
#vue-produits .produit.off .plus{ display: none; }
#vue-produits .produit.off .nom{ opacity: .55; }
#vue-produits .produit .tampon{
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  white-space: nowrap;
  padding: 6px 16px;
  border: 3px solid #fff;
  border-radius: 8px;
  font-family: var(--police-titre);
  font-size: var(--tampon-texte);
  letter-spacing: 1px;
  background: rgba(0, 0, 0, .6);
}
#vue-produits .grille.petite .tampon{ font-size: 24px; }

/* ---------- Barre du bas : le bouton panier seul, à droite ---------- */
#vue-produits .barre{
  justify-content: flex-end;
}

/* ---------- Bouton panier : grisé si vide, rebond à l'ajout ---------- */
#vue-produits #panier{
  transition: opacity .2s ease;
}
#vue-produits #panier.vide{
  opacity: var(--panier-vide-opacite);
}
#vue-produits #panier.bump{
  animation: bump .45s ease;
}
@keyframes bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ---------- Fenêtre de choix (taille Normal / XXL) ---------- */
#vue-produits #choix{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .78);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  will-change: opacity;
}
#vue-produits #choix.ouvert{
  opacity: 1;
  pointer-events: auto;
}
#vue-produits #fenetre{
  position: relative;
  width: var(--choix-largeur);
  box-sizing: border-box;
  padding: var(--choix-marges);
  /* Ne dépasse jamais l'écran : seule la liste des suppléments défile */
  max-height: calc(100% - 2 * var(--choix-marge-ecran));
  display: flex;
  flex-direction: column;
  transform: translateY(40px);
  transition: transform .25s ease;
}
#vue-produits #fenetre > *{
  flex-shrink: 0;
}
#vue-produits #choix.ouvert #fenetre{
  transform: none;
}
#vue-produits #choix-photo{
  display: block;
  width: 70%;
  margin: 0 auto 10px;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .6));
}
#vue-produits #fenetre.avec-supplements #choix-photo{
  width: var(--choix-photo-supp);
}
#vue-produits #choix-nom{
  margin: 0 0 30px;
  text-align: center;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: var(--choix-nom-texte);
  letter-spacing: 1.5px;
}
#vue-produits #tailles{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 34px;
}
#vue-produits .taille{
  padding: 26px 10px;
  border-radius: 22px;
  border: 4px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: border-color .15s ease, background .15s ease;
}
#vue-produits .taille b{
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: var(--choix-taille-titre);
  letter-spacing: 1px;
}
#vue-produits .taille span{
  font-size: var(--choix-taille-prix);
  font-weight: 600;
}
#vue-produits .taille.choisie{
  border-color: var(--orange);
  background: rgba(255, 255, 255, .12);
}
#vue-produits #fenetre.avec-supplements #choix-nom{ margin-bottom: 20px; }
#vue-produits #fenetre.avec-supplements #tailles{ margin-bottom: 20px; }

/* ---------- Suppléments ---------- */
#vue-produits #choix-supplements{
  flex: 1 1 auto;
  min-height: 0;                          /* autorise la zone à rétrécir et à défiler */
  margin: 0 -12px 24px;
  padding: 16px 12px 40px;
  --fondu-haut: 22px;
  --fondu-bas: 48px;
}
#vue-produits .supp-groupe + .supp-groupe{
  margin-top: 30px;
}
#vue-produits .supp-titre{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 14px;
}
#vue-produits .supp-titre h3{
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: var(--supp-titre-texte);
  letter-spacing: 1px;
  line-height: 1;
}
#vue-produits .supp-regle{
  font-size: var(--supp-regle-texte);
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
}
#vue-produits .supp-compte{
  margin-left: auto;
  font-size: var(--supp-regle-texte);
  font-weight: 700;
  color: var(--orange);
}
#vue-produits .supp-options{
  display: grid;
  grid-template-columns: repeat(var(--supp-colonnes), minmax(0, 1fr));
  gap: var(--supp-espace);
}
/* Un supplément : bouton à cocher */
#vue-produits .supp{
  position: relative;
  min-height: var(--supp-hauteur);
  padding: 10px 12px;
  border-radius: 18px;
  border: 3px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, opacity .15s ease, transform .1s ease;
}
#vue-produits .supp:active{
  transform: scale(.96);
}
#vue-produits .supp-nom{
  font-size: var(--supp-nom-texte);
  font-weight: 700;
  line-height: 1.05;
}
#vue-produits .supp-prix{
  font-size: var(--supp-prix-texte);
  font-weight: 600;
  color: rgba(255, 255, 255, .65);
}
#vue-produits .supp.choisie{
  border-color: var(--orange);
  background: rgba(255, 106, 31, .2);
}
#vue-produits .supp.choisie .supp-prix{
  color: #fff;
}
/* Coche dans le coin quand le supplément est choisi */
#vue-produits .supp.choisie::after{
  content: "✓";
  position: absolute;
  top: -12px;
  right: -10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--degrade-plus);
  font-size: 22px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}
/* Limite du groupe atteinte, ou supplément épuisé */
#vue-produits .supp:disabled{
  opacity: .35;
}

#vue-produits #quantite{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
}
#vue-produits #fenetre.avec-supplements #quantite{ margin-bottom: 24px; }
#vue-produits #quantite button{
  width: var(--choix-qte-bouton);
  height: var(--choix-qte-bouton);
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .5);
  font-size: 60px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#vue-produits #qte{
  font-family: var(--police-titre);
  font-size: var(--choix-qte-texte);
  min-width: 80px;
  text-align: center;
}
#vue-produits #ajouter{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--choix-ajouter-hauteur);
  background: url('../assets/etiquette-papier.webp') center / 100% 100% no-repeat;
  font-family: var(--police-titre);
  font-size: var(--choix-ajouter-texte);
  letter-spacing: 1.5px;
  text-shadow: var(--contour-epais);
}
#vue-produits #ajouter span{
  display: block;
  transform: rotate(-7.2deg);              /* suit l'inclinaison de l'étiquette */
}
#vue-produits #annuler{
  display: block;
  margin: 18px auto 0;
  padding: 14px 30px;
  font-size: 38px;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
}