/* ——— Accueil : logo « tamponné » à l'arrivée, mascotte qui déborde sur la colonne. ——— */
.accueil .logo {
  width: min(100%, 21rem);
  animation: tampon 380ms cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}

.accueil .slogan {
  margin-top: calc(var(--e4) * -1);
}

.accueil h1 {
  font-size: clamp(3rem, 17vw, 5.5rem);
}

.accueil .mascotte {
  width: 58%;
  align-self: flex-end;
  margin: calc(var(--e7) * -1) calc(var(--e4) * -1) 0 0;
}

.accueil .choix {
  display: grid;
  gap: var(--e4);
}

/* Agrandissement limité à 108 % : au-delà, le logo sort de l'écran pendant l'animation. */
@keyframes tampon {
  from {
    opacity: 0;
    transform: scale(1.08) rotate(-4deg);
  }
}

/* ——— Ticket de fidélité : papier blanc, bord inférieur déchiré, ombre tampon. ——— */
.ticket-cadre {
  filter: drop-shadow(5px 5px 0 var(--noir));
}

.ticket {
  display: grid;
  gap: var(--e2);
  padding: var(--e5) var(--e5) var(--e6);
  background: var(--papier);
  color: var(--noir);
  /* Dents de 16 px en bas : ticket arraché au rouleau. */
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
  animation: ticket-sort 480ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

.ticket__entete,
.ticket__libelle {
  font-family: var(--police-titre);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ticket__entete {
  padding-bottom: var(--e2);
  border-bottom: 2px dashed var(--noir);
}

.ticket__total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--e2);
  font-family: var(--police-titre);
  font-size: 1.6rem;
  text-transform: uppercase;
}

.ticket__nombre {
  font-size: clamp(4.5rem, 26vw, 7rem);
  line-height: 0.85;
  color: var(--rouge);
}

.ticket__expiration {
  padding-top: var(--e2);
  border-top: 2px dashed var(--noir);
}

@keyframes ticket-sort {
  from {
    opacity: 0;
    transform: translateY(-24px) rotate(-1.5deg);
  }
}

.bientot {
  display: grid;
  gap: var(--e4);
}

.bientot .annotation {
  font-size: 1.1rem;
}

/* ——— Carte QR : noir sur blanc pur, grande marge, lisible même par une caméra fatiguée. ——— */
.carte-qr {
  display: grid;
  justify-items: center;
  gap: var(--e3);
  padding: var(--e4);
  background: var(--papier);
  border: var(--bord) solid var(--noir);
  box-shadow: var(--ombre);
}

.carte-qr svg {
  width: 100%;
  max-width: 20rem;
  height: auto;
}

.carte-qr__nom {
  font-family: var(--police-titre);
  font-size: 1.6rem;
  text-transform: uppercase;
}

/* ——— Pied de page et infos légales ——— */
.mention-legale {
  display: grid;
  gap: var(--e1);
  margin-top: auto;
  font-size: 0.8rem;
  text-align: center;
  color: var(--attenue);
}

.mention-legale a {
  display: inline-block;
  padding: var(--e2) 0;
  color: inherit;
}

.textes-legaux {
  display: grid;
  gap: var(--e6);
}

.texte-legal {
  display: grid;
  gap: var(--e3);
  overflow-wrap: anywhere;
}

/* Confirmation après un envoi : droite (une annotation inclinée déborde dès qu'elle passe sur plusieurs lignes). */
.message-ok {
  font-weight: 700;
  color: var(--accent-texte);
}

/* Ticket affiché vide pendant le chargement : il réserve sa place, les boutons dessous ne sautent pas. */
.ticket--attente > * {
  visibility: hidden;
}