/* =====================================================================
   BASE COMMUNE DES ÉCRANS MENU ET PRODUITS
   Polices locales, protections de la borne, écran 1080×1920,
   barre du bas. Les valeurs viennent de reglages.css.
   ===================================================================== */

/* ---------- Polices locales (la borne fonctionne sans internet) ---------- */
@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/polices/Bangers-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/polices/BarlowCondensed-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/polices/BarlowCondensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/polices/BarlowCondensed-700.woff2') format('woff2');
}

/* ---------- Borne : pas de sélection, pas de surlignage, pas de zoom ---------- */
html,
body {
  margin: 0;
  height: 100%;
  background: var(--fond-borne);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;              /* pas de menu au toucher long (iOS) */
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;                      /* défilement vertical seulement : pas de pincement */
  overscroll-behavior: none;
}

/* Derrière l'écran : l'image de fond de l'écran en cours (définie dans
   menu.css / produits.css) plutôt que du noir, pour qu'aucun bord noir
   n'apparaisse si l'appareil n'a pas exactement le format de la borne
   (zones sous les barres de Safari sur iPhone, écrans plus larges…) */
html {
  background-color: var(--fond-borne);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
body {
  background: transparent;
}

/* Un élément masqué par l'attribut hidden reste masqué, même s'il a un display */
[hidden] {
  display: none !important;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

img {
  -webkit-user-drag: none;
}

/* Photo pas encore prête : invisible, puis apparition en fondu (photoAvecSecours) */
img.photo-attente {
  opacity: 0;
}
.photo img {
  transition: opacity .2s ease;
}

/* ---------- Les quatre écrans dans une seule page ----------
   Tous les écrans (accueil, menu, produits, panier) sont chargés une seule
   fois et restent prêts en mémoire : en changer est instantané, rien n'est
   rechargé. L'écran qui arrive passe devant en fondu, celui qui part reste
   affiché dessous le temps du fondu (aucun passage à vide). */
.vue {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  contain: layout paint style;            /* chaque écran se dessine indépendamment des autres */
}
.vue.active,
.vue.sortante {
  visibility: visible;
}
.vue.sortante {
  z-index: 1;
}
.vue.active {
  z-index: 2;
  animation: vue-arrivee var(--vue-fondu, .15s) ease-out;
}
@keyframes vue-arrivee {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- L'écran fait toujours 1080×1920, puis borne.js le met à l'échelle ---------- */
#ecran {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ecran-largeur);
  height: var(--ecran-hauteur);
  overflow: hidden;
  transform-origin: center;
  background: var(--fond-borne);
  color: var(--texte);
  font-family: var(--police-texte);
}

.fond-vue {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Zone qui défile : défilement au doigt, sans barre visible, fondu haut et bas */
.zone-defilement {
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fondu-haut), #000 calc(100% - var(--fondu-bas)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fondu-haut), #000 calc(100% - var(--fondu-bas)), transparent 100%);
}
.zone-defilement::-webkit-scrollbar {
  display: none;
}

/* ---------- Barre du bas : Retour + Mon panier ---------- */
.barre {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bas-zone);
  box-sizing: border-box;
  padding: var(--barre-marges);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--barre-espace);
}
.btn {
  border: 0;
  cursor: pointer;
  color: var(--texte);
  font-family: var(--police-titre);
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
}
#retour {
  gap: var(--retour-espace);
  min-height: var(--retour-hauteur-min);
  padding: 0 12px;
  background: transparent;
  font-size: var(--retour-texte);
}
#panier {
  gap: var(--panier-espace);
  height: var(--panier-hauteur);
  padding: 0 var(--panier-cotes);
  font-size: var(--panier-texte);
  background: var(--degrade-panier);
  /* Bord irrégulier façon coup de pinceau */
  clip-path: polygon(0% 18%, 8% 4%, 34% 10%, 61% 0%, 88% 7%, 100% 22%, 98% 52%, 100% 86%, 84% 97%, 55% 91%, 28% 100%, 6% 94%, 1% 70%, 3% 44%);
}
/* ---------- Fenêtre "Êtes-vous toujours là ?" (js/veille.js) ---------- */
#veille {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
#veille.ouverte {
  opacity: 1;
  pointer-events: auto;
}
/* Cadre en papier déchiré pour les fenêtres (choix de taille, veille).
   Découpage en 9 parts (border-image) : les coins et les bords gardent
   leur épaisseur quelle que soit la hauteur de la fenêtre, seul
   l'intérieur noir s'étire. Tranches mesurées sur cadre-papier.webp
   (1157×1296) : 85 px en haut, 63 à droite, 109 en bas, 63 à gauche. */
.cadre-papier {
  border-style: solid;
  border-width: var(--cadre-papier-bords);
  border-image: url('../assets/cadre-papier.webp') 85 63 109 63 fill / var(--cadre-papier-bords) stretch;
}

#veille-fenetre {
  position: relative;
  width: var(--veille-largeur);
  box-sizing: border-box;
  padding: 10px 30px 0;
  text-align: center;
  transform: translateY(40px) scale(.96);
  transition: transform .3s cubic-bezier(.34, 1.4, .64, 1);
}
#veille.ouverte #veille-fenetre {
  transform: none;
}
#veille-titre {
  margin: 0 0 18px;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: var(--veille-titre-texte);
  letter-spacing: 1.5px;
  line-height: 1;
  text-shadow: 4px 4px 0 var(--sombre);
}
#veille-fenetre p {
  margin: 0;
  font-size: var(--veille-texte);
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
}
#veille-compte {
  font-family: var(--police-titre);
  font-size: var(--veille-compte-texte);
  line-height: 1.1;
  color: var(--orange);
  text-shadow: 5px 5px 0 var(--sombre);
}
/* Jauge qui se vide pendant le compte à rebours (transform uniquement) */
#veille-jauge {
  height: 14px;
  margin: 0 30px 44px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .15);
  overflow: hidden;
}
#veille-jauge span {
  display: block;
  height: 100%;
  background: var(--degrade-panier);
  transform-origin: left center;
}
#veille.ouverte #veille-jauge span {
  animation: veille-jauge var(--veille-duree) linear forwards;
}
@keyframes veille-jauge {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
#veille-continuer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--veille-bouton-hauteur);
  background: url('../assets/etiquette-papier.webp') center / 100% 100% no-repeat;
  font-family: var(--police-titre);
  font-size: var(--veille-bouton-texte);
  letter-spacing: 1.5px;
  text-shadow: var(--contour-epais);
}
#veille-continuer span {
  display: block;
  transform: rotate(-7.2deg);              /* suit l'inclinaison de l'étiquette */
}

#compteur {
  color: var(--sombre);
  background: #fff;
  border-radius: 40px;
  min-width: var(--compteur-taille);
  height: var(--compteur-taille);
  padding: 0 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}