/* ==========================================================================
   Alive — les mini-animations de l'accueil (Remplir, Vendre, Servir, Revenir).
   Chaque partie montre un geste humain et deux ou trois morceaux du logiciel
   qui apparaissent un à un, en boucle.

   Comment ça marche : scenes.js pose sur chaque .mini les classes pas-0,
   pas-1… jusqu'à l'étape en cours. Un élément data-des="k" apparaît à
   l'étape k (après --d), un élément data-hors="k" disparaît à l'étape k
   (après --f). Toutes les mesures sont en em : la scène s'agrandit ou
   rétrécit d'un bloc, la taille de base suit la largeur (30 em de large).
   ========================================================================== */

/* ---------- 1. Le plateau ---------- */
.mini {
  position: relative;
  width: 100%;
  max-width: 580px;
  justify-self: center;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  color: #111114;
  -webkit-font-smoothing: antialiased;
}
.mini > * { font-size: calc(100cqw / 30); }
.mini::before {                       /* une surface unie, à peine détachée du fond */
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--r-l);
  background: var(--noir-3);
}

/* ---------- 2. Apparitions et disparitions ---------- */
.mini [data-des] {
  opacity: 0;
  transform: translateY(.8em) scale(.97);
  transition: opacity .5s var(--sortie), transform .7s var(--sortie);
}
.mini.pas-0 [data-des="0"], .mini.pas-1 [data-des="1"],
.mini.pas-2 [data-des="2"], .mini.pas-3 [data-des="3"] {
  opacity: 1; transform: none;
  transition-delay: var(--d, 0s);
}
.mini [data-hors] { transition: opacity .45s var(--doux), transform .5s var(--doux); }
.mini.pas-0 [data-hors="0"], .mini.pas-1 [data-hors="1"],
.mini.pas-2 [data-hors="2"], .mini.pas-3 [data-hors="3"] {
  opacity: 0; transform: translateY(-.5em);
  transition-delay: var(--f, 0s);
}
/* fin de boucle : les morceaux s'effacent, puis tout repart */
.mini.fondu [data-des] { opacity: 0 !important; transition: opacity .35s var(--doux) !important; }
.mini.remise, .mini.remise * { transition: none !important; animation: none !important; }

/* deux valeurs l'une sur l'autre : l'une s'en va, l'autre arrive */
.pile { display: inline-grid; }
.pile > * { grid-area: 1 / 1; }

/* ---------- 3. Les pièces communes ---------- */
.frag {
  position: absolute;
  background: #fff;
  border-radius: .8em;
  padding: .95em 1.05em;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1.6em 3.2em -1.4em rgba(0, 0, 0, .5);
  z-index: 2;
}
.frag__titre {
  display: flex; align-items: center; gap: .45em;
  font-size: .62em; font-weight: 600; letter-spacing: .02em;
  color: #5F5F69; margin-bottom: .55em;
}
.frag__grand { display: block; font-size: 1.02em; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.frag small:not(.frag__titre) { display: block; font-size: .64em; color: #5F5F69; margin-top: .2em; }
.frag__ligne {
  display: flex; justify-content: space-between; align-items: center; gap: 1em;
  font-size: .74em; padding: .5em 0;
  border-top: 1px solid #F0F0F2;
}
.frag__ligne b { font-weight: 700; }
.frag__ligne--total { font-weight: 700; }
.frag__rond {
  flex-shrink: 0;
  width: 2.3em; height: 2.3em; border-radius: 50%;
  display: grid; place-items: center;
  background: #18181B; color: #fff;
}
.frag svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.frag__rond svg { width: 1.2em; height: 1.2em; }
.frag--paye, .frag--porte, .frag--reserve { display: flex; align-items: center; gap: .8em; }
.frag--paye > span:last-child, .frag--porte > span:last-child, .frag--reserve > span:last-child { display: grid; }
.frag--porte b, .frag--reserve b { font-size: .86em; font-weight: 700; }



/* une conversation WhatsApp */
.wa { background: #EFE7DD; display: flex; flex-direction: column; }
.wa__tete {
  display: flex; align-items: center; gap: .55em;
  padding: 2.6em .9em .7em;
  background: #F7F5F3; border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.wa__tete span { display: grid; }
.wa__tete b { font-size: .78em; }
.wa__tete small { font-size: .58em; color: #62626B; }
.wa__fil { display: flex; flex-direction: column; gap: .55em; padding: .9em .7em; }
.wa__jour {
  align-self: center; font-size: .56em; color: #6B6B73;
  background: rgba(255, 255, 255, .8); padding: .3em .8em; border-radius: .6em;
}
.wa__bulle {
  margin: 0; max-width: 88%;
  font-size: .72em; line-height: 1.38;
  padding: .6em .75em .45em;
  background: #fff; color: #111;
  border-radius: .25em .9em .9em .9em;
  box-shadow: 0 1px .5px rgba(0, 0, 0, .08);
}
.wa__bulle small { display: block; text-align: right; font-size: .78em; color: #62626B; margin-top: .15em; }
.wa__saisie { margin-top: auto; padding: .6em .7em 1.1em; }
.wa__saisie span { display: block; font-size: .64em; color: #6E6E78; background: #fff; border-radius: 2em; padding: .65em 1em; }
.wa__ico { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #25D366; color: #fff; font-style: normal; }
.wa__ico svg { width: 1em; height: 1em; fill: currentColor; stroke: none; }


/* ==========================================================================
   4. REMPLIR — la base, les filtres, le message, la réservation
   La scène est centrée sur (15 em, 15 em). Rythme : data-durees="4600,5800,4800".
   ========================================================================== */

/* les filtres de segments : ils arrivent, puis se cochent un à un */
.filtres { position: absolute; left: 0; right: 0; top: 4.6em; display: flex; justify-content: center; gap: .5em; z-index: 2; }
.mini--remplir .filtre {
  display: inline-flex; align-items: center;
  font-size: .74em; font-weight: 600; white-space: nowrap;
  padding: .5em 1em; border-radius: 99em;
  background: #fff; color: #3F3F46; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
  transition: opacity .5s var(--sortie), transform .7s var(--sortie), background .3s var(--doux), color .3s var(--doux), box-shadow .3s var(--doux);
}
.mini--remplir.pas-0 .filtre--1, .mini--remplir.pas-0 .filtre--2 { background: #18181B; color: #fff; box-shadow: 0 0 0 1px #18181B; }
.mini--remplir.pas-0 .filtre--1 { transition-delay: var(--d), var(--d), 1.95s, 1.95s, 1.95s; }
.mini--remplir.pas-0 .filtre--2 { transition-delay: var(--d), var(--d), 2.85s, 2.85s, 2.85s; }
/* sur fond sombre : filtres éteints en gris, filtres cochés en blanc */
.theme-sombre .mini--remplir .filtre { background: #1E1E24; color: #9A9AA4; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.theme-sombre .mini--remplir.pas-0 .filtre--1, .theme-sombre .mini--remplir.pas-0 .filtre--2 { background: #fff; color: #111114; box-shadow: 0 0 0 1px #fff; }

/* la base client : dix visages, cinq par ligne */
.base { position: absolute; inset: 0; }
.client {
  --x: calc(5.4em + var(--c) * 4.8em);
  --y: calc(12.6em + var(--r) * 4.8em);
  position: absolute; left: calc(var(--x) - 1.8em); top: calc(var(--y) - 1.8em);
  width: 3.6em; height: 3.6em;
  opacity: 0; transform: scale(.6);
}
.client img, .av--photo { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.client img { transition: opacity .5s var(--doux), filter .5s var(--doux), box-shadow .4s var(--doux); }
.mini--remplir.pas-0 .client {
  opacity: 1; transform: none;
  transition: opacity .45s var(--sortie) calc(.1s + var(--i) * .08s), transform .6s var(--sortie) calc(.1s + var(--i) * .08s);
}
/* « Habitués » écarte un premier groupe, « Gros paniers » un second */
.mini--remplir.pas-0 .client.gA img { opacity: .28; filter: grayscale(1); transition-delay: 2.15s; }
.mini--remplir.pas-0 .client.gB img { opacity: .28; filter: grayscale(1); transition-delay: 3.05s; }
.mini--remplir.pas-0 .client.sel img { box-shadow: 0 0 0 .16em var(--noir-3), 0 0 0 .32em #18181B; transition-delay: 3.4s; }

/* les retenus filent dans l'icône de message ; les autres s'effacent */
.mini--remplir.pas-1 .client:not(.sel) { opacity: 0; transition: opacity .4s var(--doux); }
.mini--remplir.pas-1 .client.sel {
  opacity: 0;
  transform: translate(calc(15em - var(--x)), calc(15em - var(--y))) scale(.2);
  transition: transform .8s cubic-bezier(.55, 0, .25, 1) calc(.25s + var(--i) * .07s), opacity .25s linear calc(.85s + var(--i) * .07s);
}
.envoi {
  position: absolute; left: 12.6em; top: 12.6em; width: 4.8em; height: 4.8em; z-index: 3;
  display: grid; place-items: center;
  border-radius: 50%; background: #18181B; color: #fff;
  box-shadow: 0 1.2em 2.4em -1em rgba(0, 0, 0, .55);
  opacity: 0; transform: scale(.4);
}
.envoi svg { width: 2.2em; height: 2.2em; fill: currentColor; }
.mini--remplir.pas-1 .envoi { animation: mini-envoi 2.2s var(--sortie) .05s both; }
@keyframes mini-envoi {
  0%   { opacity: 0; transform: scale(.4); }
  14%  { opacity: 1; transform: scale(1); }
  52%  { transform: scale(1); }
  60%  { transform: scale(1.14); }
  68%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.4); }
}

/* l'icône s'ouvre en téléphone : le même iPhone que le haut de page */
.remplir__tel { position: absolute; left: 9.2em; top: 2.9em; z-index: 2; transition: transform .9s var(--sortie); }
.mini--remplir.pas-2 .remplir__tel { transform: translateX(-6.4em); transition-delay: .1s; }
.mini__iphone { font-size: .49em; opacity: 0; transform-origin: 50% 50%; }
.mini--remplir.pas-1 .mini__iphone { animation: mini-ouvre .9s var(--sortie) 1.55s both; }
@keyframes mini-ouvre {
  from { opacity: 0; transform: scale(.32); filter: blur(.4em); }
  to   { opacity: 1; transform: none; filter: none; }
}
.mini__iphone .chassis { box-shadow: inset 0 0 0 .12em #3A3A42, 0 0 0 .08em #050506, 0 3em 6em -2.4em rgba(0, 0, 0, .7); }
.mini__iphone .morph__ecran { font-size: 2.0408em; width: 10.78em; height: 23.13em; border-radius: 1.45em; }
.mini__iphone .chassis__ile { opacity: 1; }
.mini__iphone .wa { position: absolute; inset: 0; }

.wa__etat {
  display: flex; justify-content: space-between; align-items: center;
  height: 2em; padding: .2em 1.05em 0 1.5em;
  font-size: .62em; font-weight: 600; color: #111;
  background: #F7F5F3;
}
.wa__icones { display: flex; gap: .3em; align-items: center; }
.wa__icones svg { height: .62em; width: auto; fill: currentColor; }
.wa__icones .wa__batterie { height: .68em; }
.mini__iphone .wa__tete { padding: .35em .6em .55em .4em; gap: .45em; }
.wa__retour { width: 1em; height: 1em; fill: none; stroke: #2F6FEB; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wa__tete .av--photo { width: 1.85em; height: 1.85em; }
.mini__iphone .wa__fil { padding: .8em .55em; gap: .5em; }
.wa__bulle--club { align-self: flex-end; background: #D9FDD3; border-radius: .9em .25em .9em .9em; }
.mini__iphone .wa__bulle { font-size: .66em; max-width: 90%; }

/* les mots personnalisés, en briques */
.brique {
  display: inline-block; padding: 0 .22em; margin: 0 .06em 0 -.14em;
  border-radius: .3em; font-weight: 700;
  transition: background .35s var(--doux), box-shadow .35s var(--doux), transform .35s var(--sortie);
}
.mini--remplir.pas-1 .brique {
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  transform: translateY(-.06em);
  transition-delay: var(--d);
}

/* la liste des réservations de la soirée, et la réponse qui la rejoint */
.pipe {
  position: absolute; left: 15em; top: 5.4em; width: 14.2em; z-index: 1;
  background: #fff; border-radius: .8em; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1.6em 3.2em -1.4em rgba(0, 0, 0, .45);
}
.pipe__tete { display: grid; gap: .15em; padding: .85em .95em .7em; border-bottom: 1px solid #F0F0F2; }
.pipe__tete b { font-size: .86em; font-weight: 800; letter-spacing: -.02em; }
.pipe__tete small { font-size: .6em; color: #5F5F69; }
.pipe__liste { height: 11.2em; overflow: hidden; }
.pipe__ligne {
  display: grid; grid-template-columns: 1.9em minmax(0, 1fr) auto; align-items: center; gap: .55em;
  height: 2.8em; padding: 0 .95em; border-bottom: 1px solid #F4F4F5;
}
.pipe__liste .pipe__ligne { transition: transform .55s var(--sortie); }
.mini--remplir.pas-2 .pipe__liste .pipe__ligne { transform: translateY(2.8em); transition-delay: 1.15s; }
.pipe__ligne .av--photo { width: 1.9em; height: 1.9em; }
.pipe__ligne > span { display: grid; min-width: 0; }
.pipe__ligne b { font-size: .7em; font-weight: 700; }
.pipe__ligne small { font-size: .58em; color: #5F5F69; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe__ligne em { font-style: normal; font-size: .58em; font-weight: 700; padding: .3em .65em; border-radius: 99em; white-space: nowrap; }
.statut--confirme { background: #18181B; color: #fff; }
.statut--attente { background: #F4F4F5; color: #5F5F69; }
.statut--nouvelle { background: #EEF0FF; color: #4338CA; }

.vol {
  position: absolute; left: 15em; top: 9.43em; width: 14.2em; height: 2.8em; z-index: 4;
  background: #fff; border-radius: .9em;
  opacity: 0;
}
.mini--remplir.pas-2 .vol { animation: mini-vol 1.25s cubic-bezier(.6, 0, .2, 1) .4s both; }
@keyframes mini-vol {
  0%   { opacity: 0; transform: translate(-4.7em, 6.6em); clip-path: inset(.25em 7.9em .25em 0 round .9em); box-shadow: 0 1px .5px rgba(0, 0, 0, .1); }
  10%  { opacity: 1; }
  70%  { box-shadow: 0 1.4em 2.6em -1em rgba(0, 0, 0, .35); }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0); box-shadow: 0 0 0 transparent; background: #F6F6FE; }
}
.vol__bulle { position: absolute; left: .75em; top: 50%; transform: translateY(-50%); font-size: .66em; white-space: nowrap; }
.vol__resa { position: absolute; inset: 0; border-bottom: 0; }
.mini--remplir.pas-2 .vol__bulle { animation: mini-sort 1.25s linear .4s both; }
.mini--remplir.pas-2 .vol__resa { animation: mini-entre 1.25s linear .4s both; }
@keyframes mini-sort { 0%, 30% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes mini-entre { 0%, 45% { opacity: 0; } 75%, 100% { opacity: 1; } }

.frag__phrase { margin: 0; font-size: .78em; line-height: 1.45; color: #3F3F46; }
.frag__phrase b { font-size: 1.25em; font-weight: 800; color: #111114; letter-spacing: -.02em; vertical-align: -.04em; }


/* ==========================================================================
   5. VENDRE — le site d'Elva : la table, la vue, les bouteilles, Apple Pay
   Écran du téléphone : 10,78 × 23,13 em. Rythme : data-durees="5200,4400,3600,4800".
   ========================================================================== */
.vendre__tel { position: absolute; left: 9.2em; top: 2.9em; z-index: 2; transition: transform .9s var(--sortie); }
.mini--vendre.pas-3 .vendre__tel { transform: translateX(-6.4em); transition-delay: .9s; }
.mini__iphone--fixe { opacity: 1; }
.ve { background: #0B0B0C; color: #fff; }
.ve > * { position: absolute; }
.wa__etat--sombre { position: absolute; top: 0; left: 0; right: 0; z-index: 7; background: none; color: #fff; }

/* le doigt : il se pose, appuie, se retire (un par étape, data-tap) */
.tap {
  position: absolute; left: 50%; top: 50%; z-index: 8;
  width: 2.3em; height: 2.3em; margin: -1.15em 0 0 -1.15em;
  border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .26); border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .35);
  opacity: 0;
}
.ve-feuille .tap { background: rgba(0, 0, 0, .1); border-color: rgba(0, 0, 0, .55); box-shadow: 0 .3em .9em rgba(0, 0, 0, .18); }
.mini.pas-0:not(.pas-1) .tap[data-tap="0"], .mini.pas-1:not(.pas-2) .tap[data-tap="1"],
.mini.pas-2:not(.pas-3) .tap[data-tap="2"], .mini.pas-3 .tap[data-tap="3"] { animation: mini-tape 1.3s var(--doux) var(--d, 0s) both; }

/* 1. le plan figé, puis la plongée dans la vue depuis la table */
.ve-plan { inset: 0; background: #0B0B0C; transition: opacity .5s var(--doux); }
.mini--vendre.pas-0 .ve-plan { opacity: 0; transition-delay: 2.15s; }
.ve-plan__img { position: absolute; left: 0; top: 7.4em; width: 100%; transform-origin: 29.8% 20.9%; transition: transform 1.2s cubic-bezier(.6, 0, .3, 1); }
.mini--vendre.pas-0 .ve-plan__img { transform: scale(2.8); transition-delay: 1.5s; }
.ve-tete { position: absolute; top: 2.2em; left: .9em; right: .9em; display: grid; gap: .25em; }
.ve-logo { height: .85em; width: auto; margin-bottom: .15em; }
.ve-tete small { font-size: .54em; color: rgba(255, 255, 255, .62); }
.ve-tete b { font-size: .86em; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.ve-zones { position: absolute; top: 5.95em; left: .9em; display: flex; gap: .3em; }
.ve-zones span { font-size: .5em; white-space: nowrap; padding: .4em .7em; border-radius: 99em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.ve-zones em { font-style: normal; color: rgba(255, 255, 255, .6); margin-left: .2em; }
.ve-cible {
  position: absolute; left: 3.21em; top: 10.59em;
  width: 2em; height: 2em; margin: -1em 0 0 -1em; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 .35em rgba(255, 255, 255, .16);
  opacity: 0; transform: scale(.4);
  transition: opacity .3s var(--doux), transform .5s var(--sortie);
}
.mini--vendre.pas-0 .ve-cible { opacity: 1; transform: none; transition-delay: 1s; }
.ve-indice {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 2.4em 1em 1.1em;
  text-align: center; font-size: .52em; color: rgba(255, 255, 255, .7);
  background: linear-gradient(transparent, #0B0B0C 55%);
}

.ve-vue { inset: 0; overflow: hidden; opacity: 0; transition: opacity .6s var(--doux); }
.mini--vendre.pas-0 .ve-vue { opacity: 1; transition-delay: 2s; }
.ve-vue img { position: absolute; left: 0; top: 0; width: 100%; transform: scale(1.75); transform-origin: 50% 52%; transition: transform 1.8s var(--sortie); }
.mini--vendre.pas-0 .ve-vue img { transform: scale(1.32); transition-delay: 2s; }
.ve-vue__titre {
  position: absolute; top: 2.5em; left: .7em;
  display: inline-flex; align-items: center; gap: .3em;
  font-size: .56em; font-weight: 600; padding: .45em .9em .45em .55em; border-radius: 99em;
  background: rgba(10, 10, 12, .72);
}
.ve-vue__titre svg, .ve-fermer svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ve-fiche {
  position: absolute; left: .6em; right: .6em; bottom: .7em;
  display: grid; gap: .25em; padding: .85em .9em .8em;
  background: #161618; border-radius: .9em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  opacity: 0; transform: translateY(1em);
  transition: opacity .5s var(--doux), transform .6s var(--sortie);
}
.mini--vendre.pas-0 .ve-fiche { opacity: 1; transform: none; transition-delay: 2.7s; }
.ve-fiche b { font-size: .9em; font-weight: 800; letter-spacing: -.02em; }
.ve-fiche small { font-size: .52em; color: rgba(255, 255, 255, .62); }
.ve-fiche__prix { font-size: .6em; font-weight: 600; margin-top: .2em; }
.ve-bouton {
  position: relative; display: block; margin-top: .6em;
  text-align: center; font-size: .6em; font-weight: 700;
  padding: .85em; border-radius: .7em; background: #fff; color: #111; white-space: nowrap;
}
.ve-bouton .tap { font-size: 1.67em; }

/* 2. et 3. les feuilles qui montent : les bouteilles, puis Apple Pay */
.ve-feuille {
  left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; flex-direction: column;
  padding: .7em .85em 1em;
  background: #fff; color: #111; border-radius: 1.2em 1.2em 0 0;
  box-shadow: 0 -1em 2em rgba(0, 0, 0, .4);
}
.mini--vendre:not(.pas-1) .ve-feuille--btl, .mini--vendre:not(.pas-2) .ve-feuille--pay { transform: translateY(105%); }
.ve-feuille--btl { top: 4.2em; }
.ve-feuille--pay { top: 7.4em; }
.ve-poignee { align-self: center; width: 2.2em; height: .24em; border-radius: 1em; background: #D4D4D8; margin-bottom: .75em; }
.ve-feuille__titre { font-size: .86em; font-weight: 800; letter-spacing: -.02em; }
.ve-feuille__sous { font-size: .52em; color: #5F5F69; margin: .2em 0 .5em; }
.ve-btl { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5em; padding: .55em 0; border-top: 1px solid #F0F0F2; }
.ve-btl > span:first-child { display: grid; gap: .1em; }
.ve-btl b { font-size: .6em; font-weight: 700; }
.ve-btl small { font-size: .52em; color: #5F5F69; }
.ve-qte { width: 1.7em; height: 1.7em; }
.ve-plus, .ve-un { display: grid; place-items: center; border-radius: 50%; }
.ve-plus { box-shadow: inset 0 0 0 1px #D4D4D8; }
.ve-plus svg { width: .9em; height: .9em; fill: none; stroke: #111; stroke-width: 2.4; stroke-linecap: round; }
.ve-un { background: #18181B; color: #fff; font-size: .62em; font-weight: 700; }
.ve-btl .tap { left: auto; right: -.3em; margin-left: 0; }
.ve-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: .6em; border-top: 1px solid #F0F0F2; font-size: .62em; }
.ve-total b { font-size: 1.25em; font-weight: 800; letter-spacing: -.02em; justify-items: end; }
.ve-bouton--noir { background: #111; color: #fff; }

.ve-pay__tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: .7em; }
.apple-pay { display: inline-flex; align-items: center; gap: .04em; font-size: 1.3em; font-weight: 600; letter-spacing: -.02em; color: #000; }
.pomme { width: .92em; height: .92em; fill: #000; transform: translateY(-.07em); }
.ve-fermer { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #EFEFF1; color: #5F5F69; font-style: normal; }
.ve-pay__ligne { display: grid; gap: .15em; padding: .5em 0; border-top: 1px solid #EFEFF1; }
.ve-pay__ligne small { font-size: .5em; color: #5F5F69; }
.ve-pay__ligne span { font-size: .62em; font-weight: 600; }
.ve-pay__ligne--total b { font-size: 1.25em; font-weight: 800; letter-spacing: -.03em; }
.ve-pay__fin { margin-top: auto; justify-items: center; text-align: center; }
.ve-pay__cote, .ve-pay__ok { display: grid; justify-items: center; gap: .35em; font-size: .56em; color: #3F3F46; }
.ve-cote { width: 1.1em; height: 2.2em; border-radius: .3em; box-shadow: inset 0 0 0 2px #111; position: relative; }
.ve-cote::after { content: ''; position: absolute; right: -.35em; top: .45em; width: .22em; height: .8em; border-radius: .2em; background: #111; }
.ve-pay__ok i { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #111; color: #fff; font-style: normal; }
.ve-pay__ok i svg, .ve-ok i svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ve-pay__ok { font-weight: 700; color: #111; }

/* le double appui sur le bouton latéral, au bord de l'écran */
.ve-clic { right: 0; top: 5.2em; width: .32em; height: 2.6em; border-radius: .3em 0 0 .3em; background: #fff; opacity: 0; z-index: 9; }
.mini--vendre.pas-2:not(.pas-3) .ve-clic { animation: mini-clic .9s var(--doux) var(--d) both; }
@keyframes mini-clic { 0%, 100% { opacity: 0; } 15%, 35% { opacity: .9; } 25% { opacity: .2; } 45%, 60% { opacity: .9; } }

/* 4. la table est réservée ; la réservation rejoint la liste */
.ve-ok { inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: .35em; text-align: center; background: #0B0B0C; }
.ve-ok i { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: #fff; color: #111; font-style: normal; margin-bottom: .3em; }
.ve-ok b { font-size: 1em; font-weight: 800; letter-spacing: -.02em; }
.ve-ok small { font-size: .56em; color: rgba(255, 255, 255, .65); }

.mini--vendre.pas-3 .pipe__liste .pipe__ligne { transform: translateY(2.8em); transition-delay: 2.15s; }
.mini--vendre.pas-3 .vol--vendre { animation: mini-vol-vendre 1.25s cubic-bezier(.6, 0, .2, 1) 1.5s both; }
@keyframes mini-vol-vendre {
  0%   { opacity: 0; transform: translate(-13.5em, 4em); clip-path: inset(0 4.5em 0 4.5em round .9em); box-shadow: 0 1px .5px rgba(0, 0, 0, .1); }
  12%  { opacity: 1; }
  70%  { box-shadow: 0 1.4em 2.6em -1em rgba(0, 0, 0, .5); }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0); box-shadow: 0 0 0 transparent; background: #F6F6FE; }
}

/* ==========================================================================
   6. SERVIR — répartir la salle, la notification, la tablette du chef de rang
   Le même ordinateur et la même tablette que le haut de page.
   Écran de l'ordinateur : 24 × 15 em ; de la tablette : 26,1 × 18,27 em.
   Rythme : data-durees="7600,3600,6000".
   ========================================================================== */
.tap--sombre { background: rgba(0, 0, 0, .1); border-color: rgba(0, 0, 0, .6); box-shadow: 0 .3em .9em rgba(0, 0, 0, .18); }

.mini--servir { overflow: hidden; border-radius: var(--r-l); }
.se-ordi { position: absolute; left: 2.75em; top: 2.4em; }
.mini__mac { position: relative; font-size: .3333em; }
.mini__mac .chassis { box-shadow: inset 0 0 0 .12em #3A3A42, 0 0 0 .08em #050506, 0 3em 6em -3em rgba(0, 0, 0, .55); }
.mini__mac .chassis__encoche { opacity: 1; }
.mini__mac .chassis__base { transform: none; opacity: 1; }
.mini__mac .morph__ecran { font-size: 3em; width: 24em; height: 15em; border-radius: .2em; }
.mini__ipad { position: relative; font-size: .45em; }
.chassis--ipad { padding: 1.3em; border-radius: 2.9em; box-shadow: inset 0 0 0 .12em #3A3A42, 0 0 0 .08em #050506, 0 3em 6em -2.6em rgba(0, 0, 0, .55); }
.mini__ipad .chassis__camera { opacity: 1; }
.mini__ipad .morph__ecran { font-size: 2.2222em; width: 26.1em; height: 18.27em; border-radius: .7em; }

.se { background: #fff; color: #111; }
.se > * { position: absolute; }
.se-barre { left: 0; right: 0; top: 0; height: 2em; display: flex; justify-content: space-between; align-items: center; padding: 0 .75em; border-bottom: 1px solid #EFEFF1; }
.se-barre > span:first-child { display: grid; }
.se-barre b { font-size: .62em; font-weight: 700; }
.se-barre small { font-size: .48em; color: #5F5F69; }

/* le plan : tables réservées en noir, libres en blanc ; les zones se dessinent */
.se-plan { left: .5em; top: 2.3em; width: 16.8em; }
.se-plan svg { display: block; width: 100%; height: auto; }
.se .p-client { opacity: 1; }
.se .p-coche { fill: #18181B; }
.se--tab .p-table--arrivee .p-coche { opacity: 1; }
.mini--servir .se-ordi .p-zone {
  opacity: 1; fill: transparent; stroke: #18181B; stroke-width: 1.1; stroke-dasharray: 4 3;
  transform-box: fill-box; transform-origin: 0 0; transform: scale(0);
  transition: transform .6s var(--sortie), fill .5s var(--doux), stroke .5s var(--doux);
}
.mini--servir.pas-0 .se-ordi .p-zone { transform: none; }
.mini--servir.pas-0 .se-ordi .p-zone--mia { transition-delay: .3s, 2.1s, 2.1s; }
.mini--servir.pas-0 .se-ordi .p-zone--sofiane { transition-delay: 2.5s, 4.3s, 4.3s; }
.mini--servir.pas-0 .se-ordi .p-zone--ines { transition-delay: 4.7s, 6.5s, 6.5s; }
.mini--servir.pas-0 .se-ordi .p-zone--mia { fill: rgba(79, 79, 196, .12); stroke: rgba(79, 79, 196, .5); stroke-dasharray: none; }
.mini--servir.pas-0 .se-ordi .p-zone--sofiane { fill: rgba(245, 155, 60, .14); stroke: rgba(245, 155, 60, .55); stroke-dasharray: none; }
.mini--servir.pas-0 .se-ordi .p-zone--ines { fill: rgba(154, 107, 168, .13); stroke: rgba(154, 107, 168, .5); stroke-dasharray: none; }

/* les chefs de rang, à droite ; on les glisse dans leur zone */
.se-chefs { right: .5em; top: 2.3em; bottom: .5em; width: 6em; border-radius: .5em; background: #F6F6F7; }
.se-chefs small { position: absolute; left: .6em; top: .45em; font-size: .46em; font-weight: 600; color: #5F5F69; }
/* (les pastilles sont en .55 em : leurs mesures sont dans cette unité) */
.se-chef, .se-drag {
  position: absolute; display: flex; align-items: center; gap: .6em;
  width: 9.1em; height: 2.9em; padding: 0 .55em; border-radius: 1.5em;
  font-size: .55em; font-weight: 600; white-space: nowrap;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}
.se-chef img, .se-drag img { width: 2.1em; height: 2.1em; border-radius: 50%; object-fit: cover; }
.se-chef { left: .91em; transition: opacity .4s var(--doux); }
.se-chef--mia { top: 2.73em; } .se-chef--sofiane { top: 6em; } .se-chef--ines { top: 9.27em; }
.mini--servir.pas-0 .se-chef--mia { opacity: .4; transition-delay: 1.1s; }
.mini--servir.pas-0 .se-chef--sofiane { opacity: .4; transition-delay: 3.3s; }
.mini--servir.pas-0 .se-chef--ines { opacity: .4; transition-delay: 5.5s; }
.se-drag { left: 32.73em; z-index: 5; opacity: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 1em 2em -.7em rgba(0, 0, 0, .35); }
.se-drag--mia { top: 6.91em; --vx: -27.42em; --vy: 13.71em; --t: 1s; }
.se-drag--sofiane { top: 10.18em; --vx: -16.25em; --vy: 3.87em; --t: 3.2s; }
.se-drag--ines { top: 13.45em; --vx: -27.42em; --vy: -7.62em; --t: 5.4s; }
.se-curseur { position: absolute; right: -.9em; bottom: -1.1em; width: 1.6em; height: 1.6em; fill: #111; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.mini--servir.pas-0 .se-drag { animation: se-glisse 1.1s cubic-bezier(.55, 0, .25, 1) var(--t) both; }
.mini--servir.pas-0 .se-drag .se-curseur { animation: se-lache .3s linear calc(var(--t) + 1.1s) both; }
@keyframes se-glisse {
  0%   { opacity: 0; transform: none; }
  12%  { opacity: 1; transform: translateY(-.15em) scale(1.06); }
  85%  { opacity: 1; transform: translate(var(--vx), var(--vy)) scale(1.06); }
  100% { opacity: 1; transform: translate(var(--vx), var(--vy)) scale(.62); }
}
@keyframes se-lache { to { opacity: 0; } }


/* la tablette de Mia : ses tables, ses clients */
.se-tablette { position: absolute; left: 1.37em; top: 5.2em; }
.se-tablette { opacity: 0; transform-origin: 50% 0; }
.mini--servir.pas-1 .se-tablette { animation: se-ouvre 1s cubic-bezier(.6, 0, .2, 1) 1.55s both; }
@keyframes se-ouvre {
  from { opacity: 0; transform: translateY(-3.6em) scale(.42); filter: blur(.3em); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* la notification : elle descend, puis on plonge dedans */
.se-notif {
  position: absolute; left: 6.2em; right: 6.2em; top: 1.6em; z-index: 6;
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr) 2em; align-items: center; gap: .65em;
  padding: .75em .85em; border-radius: 1.1em;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1.4em 3em -1em rgba(0, 0, 0, .35);
  opacity: 0;
}
.mini--servir.pas-1 .se-notif { animation: se-notif 2.3s cubic-bezier(.5, 0, .2, 1) .15s both; }
@keyframes se-notif {
  0%   { opacity: 0; transform: translateY(-2.4em) scale(.96); }
  18%  { opacity: 1; transform: none; }
  58%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(3em) scale(1.9); }
}
.se-notif__app { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .55em; background: #111; color: #fff; }
.se-notif__app svg { width: 1.2em; height: 1.2em; }
.se-notif__texte { display: grid; gap: .1em; min-width: 0; }
.se-notif__texte small { font-size: .48em; color: #5F5F69; }
.se-notif__texte b { font-size: .62em; font-weight: 700; }
.se-notif__texte span { font-size: .52em; color: #3F3F46; }
.se-notif img { width: 2em; height: 2em; border-radius: 50%; object-fit: cover; }
.se-moi img { width: 1.6em; height: 1.6em; border-radius: 50%; object-fit: cover; display: block; }
.se--tab .se-barre { height: 2.4em; padding: 0 .9em; }
.se--tab .se-barre b { font-size: .7em; }
.se-tab__corps { left: 0; right: 0; top: 2.4em; bottom: 0; display: grid; grid-template-columns: 9.4em minmax(0, 1fr); }
.se-plan--mia { position: relative; left: auto; top: auto; width: auto; padding: .8em .6em; border-right: 1px solid #EFEFF1; }
.se-plan--mia .p-zone { opacity: 0; }
.se-plan--mia .p-zone--mia { opacity: 1; }
.se-plan--mia .p-table:not([data-zone="mia"]) { opacity: .28; }
.se-plan--mia .p-client { opacity: 0; }
.se-plan--mia [data-t="G3"] .p-coche { transition: opacity .4s var(--doux); }
.mini--servir.pas-2 .se-plan--mia [data-t="G3"] .p-coche { opacity: 1; transition-delay: 3s; }
.se-liste { display: grid; align-content: start; }
.se-zone { margin: .7em .1em 0; font-size: .52em; line-height: 1.45; color: #5F5F69; }
.se-zone b { color: #111; }
.se-ligne {
  display: grid; grid-template-columns: 1.9em minmax(0, 1fr) 2.8em 3.6em; align-items: center; gap: .55em;
  padding: .7em .9em; border-bottom: 1px solid #F2F2F4;
  transition: background .5s var(--doux);
}
.mini--servir.pas-2 .se-ligne--vise { background: #F6F6FE; transition-delay: 2.2s; }
.se-ligne > img, .se-vide { width: 1.9em; height: 1.9em; border-radius: 50%; object-fit: cover; }
.se-vide { box-shadow: inset 0 0 0 1px #D4D4D8; }
.se-ligne--libre .se-qui b { color: #5F5F69; }
.se-qui { display: grid; gap: .15em; min-width: 0; }
.se-qui b { font-size: .6em; font-weight: 700; white-space: nowrap; }
.se-qui em { font-style: normal; color: #5F5F69; font-weight: 600; margin-left: .2em; }
.se-qui small { font-size: .48em; color: #5F5F69; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-flags { display: flex; gap: .3em; min-width: 0; overflow: hidden; }
.flag { font-style: normal; font-size: .46em; font-weight: 600; white-space: nowrap; padding: .3em .65em; border-radius: 99em; }
.flag--a { background: #EEF0FF; color: #3F3FA8; }
.flag--b { background: #FFF2E2; color: #8A4E12; }
.flag--c { background: #F6EEF8; color: #74437F; }
.se-jauge { display: grid; gap: .25em; }
.se-jauge b { font-size: .58em; font-weight: 800; }
.se-jauge i { position: relative; height: .28em; border-radius: 1em; background: #EDEDF0; overflow: hidden; }
.se-jauge i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #18181B; transform-origin: 0 50%; transform: scaleX(var(--p)); }
.se-jauge--anime i::after { transform: scaleX(0); transition: transform .9s var(--sortie); }
.mini--servir.pas-2 .se-jauge--anime i::after { transform: scaleX(var(--p)); transition-delay: 3s; }
.se-arrive { position: relative; justify-self: end; justify-items: end; }
.se-arrive > span:not(.tap), .se-arrive--ok {
  display: inline-flex; align-items: center; gap: .3em; white-space: nowrap;
  font-size: .5em; font-weight: 700; padding: .5em .85em; border-radius: 99em;
  box-shadow: inset 0 0 0 1px #D4D4D8; color: #3F3F46;
}
.se-arrive > span.se-arrive--ok, .se-arrive--ok { background: #18181B; color: #fff; box-shadow: none; }
.se-arrive--ok svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   7. REVENIR — la connaissance client assistée : la photo, la fiche, la base
   La photo couvre la scène : 45 × 30 em, décalée de 7,5 em à gauche.
   Repères (em) : visage d'Inès (16,5 ; 18,2), la bouteille (12,7 → 15,7 ; 16,9 → 25,9),
   le cierge (13,8 → 16,4 ; 7,2 → 13,8), la place de la photo de profil (3,7 ; 4,5).
   Rythme : data-durees="4400,5200,5200". Étape 3 : le ticket s'imprime sous la fiche.
   ========================================================================== */
.mini--revenir { overflow: hidden; border-radius: var(--r-l); }
.fc-photo { position: absolute; inset: 0; overflow: hidden; transition: opacity .8s var(--doux), filter .8s var(--doux); }
.fc-photo img, .fc-extrait img { position: absolute; top: 0; height: 30em; width: auto; max-width: none; }
.fc-photo img { left: -7.5em; transform: scale(1.06); transition: transform 4s var(--sortie); }
.mini--revenir.pas-0 .fc-photo img { transform: none; }
.mini--revenir.pas-2 .fc-photo { opacity: .32; transition-delay: .1s; }

/* les cadres de détection : quatre coins blancs */
.fc-cadre {
  position: absolute; z-index: 2; opacity: 0; transform: scale(1.15);
  transition: opacity .35s var(--doux), transform .5s var(--sortie);
  --c: rgba(255, 255, 255, .95);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / .9em 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px .9em,
    linear-gradient(var(--c), var(--c)) 100% 0 / .9em 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px .9em,
    linear-gradient(var(--c), var(--c)) 0 100% / .9em 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px .9em,
    linear-gradient(var(--c), var(--c)) 100% 100% / .9em 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px .9em;
  background-repeat: no-repeat;
}
.fc-cadre--visage { left: 14.3em; top: 15.9em; width: 4.4em; height: 4.6em; }
.fc-cadre--bouteille { left: 12.7em; top: 16.9em; width: 3em; height: 9em; }
.fc-cadre--cierge { left: 13.8em; top: 7.2em; width: 2.6em; height: 6.6em; }
.mini--revenir.pas-0:not(.pas-1) .fc-cadre--visage { opacity: 1; transform: none; transition-delay: .6s; }
.mini--revenir.pas-1:not(.pas-2) .fc-cadre--bouteille { opacity: 1; transform: none; transition-delay: .3s; }
.mini--revenir.pas-1:not(.pas-2) .fc-cadre--cierge { opacity: 1; transform: none; transition-delay: 2s; }

/* ce qui part de la photo vers la fiche : un morceau de l'image, qui rapetisse */
.fc-extrait {
  position: absolute; z-index: 4; overflow: hidden; border-radius: .3em; opacity: 0;
  box-shadow: 0 0 0 2px #fff, 0 1em 2em -.6em rgba(0, 0, 0, .7);
}
.fc-extrait--bouteille { left: 12.7em; top: 16.9em; width: 3em; height: 9em; --vx: -10em; --vy: -14.05em; --k: .14; --t: .9s; }
.fc-extrait--bouteille img { left: -20.2em; top: -16.9em; }
.fc-extrait--cierge { left: 13.8em; top: 7.2em; width: 2.6em; height: 6.6em; --vx: -10.9em; --vy: -1.85em; --k: .18; --t: 2.5s; }
.fc-extrait--cierge img { left: -21.3em; top: -7.2em; }
.mini--revenir.pas-1:not(.pas-2) .fc-extrait { animation: fc-extrait 1.1s cubic-bezier(.55, 0, .25, 1) var(--t) both; }
@keyframes fc-extrait {
  0%   { opacity: 0; transform: none; }
  18%  { opacity: 1; transform: translateY(-.4em) scale(1.08); }
  85%  { opacity: 1; transform: translate(var(--vx), var(--vy)) scale(var(--k)); }
  100% { opacity: 0; transform: translate(var(--vx), var(--vy)) scale(var(--k)); }
}

/* la fiche, et la photo de profil qui quitte le visage pour s'y poser */
.fc-fiche {
  position: absolute; left: 1.2em; top: 2em; width: 12.6em; z-index: 3;
  padding: 1em; border-radius: .9em; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1.6em 3.2em -1.2em rgba(0, 0, 0, .6);
  opacity: 0; transform: translateX(-1em);
  transition: opacity .5s var(--doux), transform .6s var(--sortie);
}
.mini--revenir.pas-0 .fc-fiche { opacity: 1; transform: none; transition-delay: 1.9s; }
.fc-fiche__tete { display: flex; align-items: center; gap: .7em; }
.fc-fiche__place { flex-shrink: 0; width: 3em; height: 3em; border-radius: 50%; background: #EDEDF0; }
.fc-fiche__tete span { display: grid; gap: .15em; min-width: 0; }
.fc-fiche__tete b { font-size: .9em; font-weight: 800; letter-spacing: -.02em; }
.fc-fiche__tete small { font-size: .5em; color: #5F5F69; }
.fc-profil {
  position: absolute; left: 2.2em; top: 3em; z-index: 5;
  width: 3em; height: 3em; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 .15em #fff, 0 .6em 1.4em -.4em rgba(0, 0, 0, .5);
  opacity: 0;
}
.mini--revenir.pas-0 .fc-profil { animation: fc-profil 2s cubic-bezier(.55, 0, .25, 1) 1s both; }
@keyframes fc-profil {
  0%   { opacity: 0; transform: translate(12.8em, 13.7em) scale(.5); }
  22%  { opacity: 1; transform: translate(12.8em, 13.7em) scale(1.3); }
  42%  { opacity: 1; transform: translate(12.8em, 13.7em) scale(1.3); }
  100% { opacity: 1; transform: none; }
}

.fc-flags { display: grid; gap: .2em; margin-top: .8em; min-height: 3.8em; }
.fc-flag { display: flex; align-items: center; gap: .5em; height: 1.1em; opacity: 0; transform: translateX(-.5em) scale(.9); transform-origin: 0 50%; transition: opacity .35s var(--doux), transform .5s var(--sortie); }
.fc-flag .flag { font-size: .52em; }
.fc-flag small { font-size: .44em; color: #6E6E78; }
.mini--revenir.pas-1 .fc-flag { opacity: 1; transform: none; }
.mini--revenir.pas-1 .fc-flag--1 { transition-delay: 1.85s; }
.mini--revenir.pas-1 .fc-flag--2 { transition-delay: 3.45s; }
.mini--revenir.pas-1 .fc-flag--3 { transition-delay: 4.1s; }

/* le ticket de sa prochaine venue : il s'imprime sous la fiche */
.fc-ticket { position: absolute; left: 1.7em; top: 12.2em; width: 11.6em; z-index: 2; padding-top: .3em; overflow: hidden; }
.fc-ticket::before { content: ''; position: absolute; left: -.3em; right: -.3em; top: 0; height: .3em; border-radius: .3em; background: #2A2A30; opacity: 0; transition: opacity .3s var(--doux); }
.mini--revenir.pas-2 .fc-ticket::before { opacity: 1; transition-delay: .2s; }
.fc-ticket__papier {
  display: grid; gap: .45em; padding: .9em .95em 1.3em;
  background: #FBFAF7; color: #111;
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent .32em, #000 .34em) 0 100% / .8em .6em repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - .55em) no-repeat;
          mask: radial-gradient(circle at 50% 100%, transparent .32em, #000 .34em) 0 100% / .8em .6em repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - .55em) no-repeat;
  transform: translateY(-102%);
  transition: transform 1.5s cubic-bezier(.45, 0, .2, 1);
}
.mini--revenir.pas-2 .fc-ticket__papier { transform: none; transition-delay: .35s; }
.fc-ticket__titre { font-size: .5em; font-weight: 700; letter-spacing: .02em; color: #5F5F69; }
.fc-ticket__date { font-size: .62em; font-weight: 800; padding-bottom: .5em; border-bottom: 1px dashed #CFCFD4; }
.fc-ticket__ligne { display: flex; justify-content: space-between; gap: .8em; font-size: .56em; font-variant-numeric: tabular-nums; }
.fc-ticket__ligne b { font-weight: 700; }
.fc-ticket__ligne--plus { color: #17663A; opacity: 0; transform: translateX(-.4em); transition: opacity .4s var(--doux), transform .5s var(--sortie); }
.mini--revenir.pas-2 .fc-ticket__ligne--plus { opacity: 1; transform: none; transition-delay: var(--d); }
.fc-ticket__ligne--total { padding-top: .5em; border-top: 1px dashed #CFCFD4; font-weight: 800; }
.fc-ticket__gain {
  display: grid; gap: .2em; margin-top: .2em; padding: .55em .65em; border-radius: .45em;
  background: #E8F6EE; color: #17663A;
  opacity: 0; transform: scale(.92); transform-origin: 0 50%;
  transition: opacity .4s var(--doux), transform .6s var(--sortie);
}
.fc-ticket__gain b { font-size: .9em; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fc-ticket__gain span { font-size: .46em; line-height: 1.4; }
.mini--revenir.pas-2 .fc-ticket__gain { opacity: 1; transform: none; transition-delay: 2.4s; }

/* ==========================================================================
   8. TEXTE DES PARTIES
   ========================================================================== */
.scene__plus { margin-top: 28px; }
.scene__plus .fleche { width: 16px; height: 16px; }


@media (max-width: 980px) {
  .scene--fixe .scene__grille { align-content: start; }
  .scene__plus { margin-top: 18px; }
}


/* ==========================================================================
   ACOMPTE — dites adieu aux no-shows (2026-10-17)
   Trois cartes qui arrivent l'une sous l'autre, comme une semaine qui passe :
   l'acompte payé, le rappel automatique la veille, l'arrivée le soir même.
   Rythme : data-durees="4200,4600,4400".
   ========================================================================== */
.ac__fil { position: absolute; inset: 3.4em 3em; display: flex; flex-direction: column; justify-content: center; gap: 1.1em; }
.ac__fil::before { content: ''; position: absolute; left: 1.2em; top: 2.5em; bottom: 2.5em; width: 1px; background: color-mix(in srgb, var(--blanc) 18%, transparent); }
.mini--acompte .ac__carte { position: relative; padding: .9em 1.1em 1em; }
.ac__quand { display: block; font-size: .58em; font-weight: 600; letter-spacing: .02em; color: #6B6B75; margin-bottom: .55em; }
.ac__ligne { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.ac__ligne > span { display: grid; }
.ac__ligne b { font-size: .86em; font-weight: 700; }
.ac__ligne small { font-size: .62em; color: #6B6B75; margin-top: .15em; }
.ac__paye { display: flex; align-items: center; gap: .5em; margin-top: .75em; padding-top: .7em; border-top: 1px solid #F0F0F2; font-size: .7em; font-weight: 650; color: #1F7A3E; }
.ac__ok { width: 1.55em; height: 1.55em; border-radius: 50%; display: grid; place-items: center; background: #2C8A4B; color: #fff; }
.ac__ok svg { width: 1em; height: 1em; stroke-width: 3; }
.ac__msg { display: flex; align-items: flex-start; gap: .6em; }
.ac__msg .wa__ico { flex: none; width: 1.7em; height: 1.7em; }
.ac__msg p { margin: 0; font-size: .7em; line-height: 1.4; background: #F2F2F4; border-radius: .25em .9em .9em .9em; padding: .55em .75em; }
.ac__arrive { font-style: normal; font-size: .62em; font-weight: 700; color: #fff; background: #3FA463; border-radius: 2em; padding: .35em .8em; }
.ac__carte--fin { box-shadow: 0 0 0 1.5px #3FA463, 0 1.6em 3.2em -1.4em rgba(0, 0, 0, .5); }


/* ==========================================================================
   BILLETTERIE — centralisée, sans commission (2026-10-17)
   Les ventes arrivent de quatre billetteries (pastilles), s'additionnent dans
   une seule carte, puis la commission Alive s'affiche : 0 €.
   Rythme : data-durees="4200,4600,4400".
   ========================================================================== */
.bi__sources { position: absolute; left: 3em; right: 3em; top: 4em; display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.bi__source { display: flex; align-items: center; gap: .55em; background: #fff; border-radius: .7em; padding: .65em .8em; font-size: .74em; font-weight: 650; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1em 2em -1em rgba(0, 0, 0, .45); }
.bi__source i, .bi__legende i { width: .75em; height: .75em; border-radius: 50%; background: var(--c); flex: none; }
.bi__source b { margin-left: auto; font-weight: 700; color: #2C8A4B; }
.bi__carte { left: 3em; right: 3em; top: 11.6em; padding: 1.1em 1.2em 1.15em; }
.bi__total { display: flex; align-items: baseline; gap: .45em; margin: .2em 0 .8em; }
.bi__total b { font-size: 2em; font-weight: 750; letter-spacing: -.03em; }
.bi__total span { font-size: .7em; color: #5F5F69; }
.bi__barre { display: flex; height: .7em; border-radius: 1em; overflow: hidden; background: #EEEEF1; }
.bi__barre i { width: var(--l); background: var(--c); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--sortie); }
.mini--billets.pas-1 .bi__barre i { transform: none; transition-delay: .7s; }
.bi__legende { display: flex; flex-wrap: wrap; gap: .4em 1em; margin-top: .75em; font-size: .6em; color: #5F5F69; }
.bi__legende span { display: inline-flex; align-items: center; gap: .4em; }
.bi__commission { left: 3em; right: 3em; top: 21.6em; display: flex; justify-content: space-between; align-items: center; padding: .9em 1.2em; }
.bi__commission span { font-size: .78em; font-weight: 650; }
.bi__commission b { font-size: 1.5em; font-weight: 750; color: #2C8A4B; letter-spacing: -.02em; }