/* =====================================================================
   SUGGESTIONS — fenêtre « Avec ça, une boisson ? » puis « Et des sides ? »
   (écran Produits) et « Et un petit dessert ? » (écran Panier).
   La fenêtre est construite par js/suggestions.js et posée dans #ecran :
   les styles ne sont donc pas rattachés à un écran.
   Les valeurs viennent de reglages.css (bloc Suggestions).
   ===================================================================== */

#suggestions{
  position: absolute;
  inset: 0;
  z-index: 80;                            /* au-dessus des écrans, sous « Êtes-vous toujours là ? » (100) */
  background: rgba(0, 0, 0, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
#suggestions.ouverte{
  opacity: 1;
  pointer-events: auto;
}
/* Fenêtre tout juste apparue : touchers ignorés 0,35 s (js/suggestions.js) */
#suggestions.verrou-toucher{
  pointer-events: none;
}

#sugg-fenetre{
  position: relative;
  width: var(--sugg-largeur);
  box-sizing: border-box;
  padding: 10px 24px 0;
  text-align: center;
  transform: translateY(40px) scale(.96);
  transition: transform .3s cubic-bezier(.34, 1.4, .64, 1);
}
#suggestions.ouverte #sugg-fenetre{
  transform: none;
}

#sugg-titre{
  margin: 0 0 14px;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: var(--sugg-titre-texte);
  letter-spacing: 1.5px;
  line-height: 1;
  text-shadow: 4px 4px 0 var(--sombre);
}
#sugg-texte{
  margin: 0 0 30px;
  font-size: var(--sugg-texte);
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}

/* ---------- Les suggestions, côte à côte ----------
   Beaucoup d'articles sont proposés : au-delà de --sugg-cartes-hauteur,
   seule cette liste défile (fondu en haut et en bas, comme les autres
   zones de la borne). */
#sugg-cartes{
  display: grid;
  grid-template-columns: repeat(var(--sugg-colonnes), 1fr);
  gap: var(--sugg-espace);
  max-height: var(--sugg-cartes-hauteur);
  margin-bottom: var(--sugg-cartes-bas);
  padding: 6px 4px 10px;
  --fondu-haut: 20px;
  --fondu-bas: 46px;
}

/* Même carte que l'écran Produits : cadre papier, photo, nom, prix et « + » */
.sugg-carte{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--sugg-carte-ratio);
  text-align: left;
  transition: transform .15s ease;
  will-change: transform;
}
.sugg-carte:active{
  transform: scale(.96);
}
.sugg-carte .cadre{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.sugg-carte .photo{
  position: absolute;
  top: var(--sugg-photo-haut);
  left: var(--sugg-photo-cote);
  right: var(--sugg-photo-cote);
  height: var(--sugg-photo-hauteur);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sugg-carte .photo img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .6));
}
.sugg-carte .sugg-nom{
  position: absolute;
  top: var(--sugg-nom-haut);
  left: var(--sugg-photo-cote);
  right: var(--sugg-photo-cote);
  font-weight: 700;
  font-size: var(--sugg-nom-texte);
  line-height: 1.05;
  display: -webkit-box;
  -webkit-line-clamp: var(--sugg-nom-lignes);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sugg-carte .sugg-prix{
  position: absolute;
  left: 13%;
  bottom: 15%;
  font-family: var(--police-titre);
  font-size: var(--sugg-prix-texte);
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: var(--contour-epais);
}
/* Le « + » devient une coche dès que la suggestion est dans le panier */
.sugg-carte .plus{
  position: absolute;
  right: 12%;
  bottom: 14.5%;
  width: var(--sugg-plus-taille);
  height: var(--sugg-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;
}
.sugg-carte .plus svg{
  width: var(--sugg-plus-icone);
  height: var(--sugg-plus-icone);
}
.sugg-carte .plus .ok{ display: none; }
.sugg-carte.ajoutee .plus{ transform: scale(1.15); }
.sugg-carte.ajoutee .plus .add{ display: none; }
.sugg-carte.ajoutee .plus .ok{ display: block; }
.sugg-carte.ajoutee .photo img{ opacity: .55; }

/* ---------- Boutons du bas ---------- */
/* Grand bouton sur l'étiquette en papier déchiré (comme « Confirmer ») */
#sugg-valider{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--sugg-bouton-hauteur);
  background: url('../assets/etiquette-papier.webp') center / 100% 100% no-repeat;
  font-family: var(--police-titre);
  font-size: var(--sugg-bouton-texte);
  letter-spacing: 1.5px;
  text-shadow: var(--contour-epais);
}
#sugg-valider span{
  display: block;
  transform: rotate(-7.2deg);              /* suit l'inclinaison de l'étiquette */
}
#sugg-refuser{
  display: block;
  margin: 18px auto 0;
  padding: 14px 30px;
  font-size: var(--sugg-lien-texte);
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
}