/*
 * La page de démonstration : une scène animée, dessinée en HTML.
 *
 * Feuille SÉPARÉE de styles.css, et c'est un choix. Tout ce qui suit ne sert
 * qu'à une page : l'accueil et les tarifs n'ont pas à charger vingt kilo-octets
 * de maquettes de caisse. La feuille commune reste celle de la marque ; celle-ci
 * ne fait que dessiner deux appareils et un lecteur.
 *
 * ─── LA SCÈNE EST UN DESSIN DE 960 × 540, MIS À L'ÉCHELLE ────────────────────
 *
 * Comme une vidéo : la même image sur un écran de vingt-quatre pouces et sur
 * un téléphone, simplement plus petite. Tout ce qui est dans `.scene` est écrit
 * en PIXELS — pas en rem — parce que ces pixels sont ceux du dessin, pas ceux
 * de la page ; demo.js pose `--echelle` sur le cadre et la scène se réduit d'un
 * bloc. C'est ce qui rend les positions du curseur déterministes : un bouton est
 * toujours au même endroit du dessin, quelle que soit la fenêtre.
 *
 * ─── DEUX PALETTES FIGÉES ────────────────────────────────────────────────────
 *
 * L'ordinateur du comité est de JOUR (papier, crème, rouge), le téléphone du
 * bénévole est de NUIT (le noir de la caisse, ses deux halos, l'ambre de la
 * consigne, le vert de ce qu'on rend). Ce sont les palettes de l'application,
 * recopiées valeur par valeur, et elles ne suivent pas le thème du site : ce
 * n'est pas un décor, c'est le produit. Seul le fond de la scène suit la page.
 *
 * ─── RIEN N'EST CACHÉ SANS JAVASCRIPT ────────────────────────────────────────
 *
 * Le lecteur n'existe que si demo.js peut tourner (`html.js`, posé par
 * accueil.js) : sans lui, la section disparaît et les six cartes du dessous
 * racontent la même histoire. Un lecteur figé sur son premier carton serait
 * pire qu'aucun lecteur.
 */

/* ═══════════════════════════════ La page ═══════════════════════════════ */

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html:not(.js) .section-demo {
  display: none;
}

.heros-demo {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.section-demo {
  padding: 0 0 clamp(2rem, 5vw, 3.5rem);
}

/* Un peu plus large que le texte : la scène est ce qu'on est venu voir. */
.enveloppe-lecteur {
  max-width: 72rem;
}

.lecteur {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-xl);
  background: var(--fond-2);
  box-shadow: var(--ombre-carte);
  outline: none;
}

.lecteur:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ─────────────────────────────── Chapitres ─────────────────────────────── */

.lecteur-chapitres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.lecteur-chapitres button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem 0.3rem 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--bord);
  background: transparent;
  color: var(--texte-doux);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.32s var(--mouvement),
    background-color 0.32s var(--mouvement),
    color 0.32s var(--mouvement);
}

.lecteur-chapitres button b {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--fond-3);
  color: var(--texte);
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 0.8125rem;
  transition: background-color 0.32s var(--mouvement), color 0.32s var(--mouvement);
}

.lecteur-chapitres button:hover {
  color: var(--texte);
  border-color: var(--texte-doux);
}

.lecteur-chapitres button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lecteur-chapitres button.actif {
  border-color: var(--accent);
  background: var(--accent-doux);
  color: var(--texte);
}

.lecteur-chapitres button.actif b {
  background: var(--degrade-bouton);
  color: #fff;
}

/* ──────────────────────────────── Le cadre ─────────────────────────────── */

.scene-cadre {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--fond-3);
  border: 1px solid var(--bord);
}

.scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 960px;
  height: 540px;
  translate: -50% -50%;
  scale: var(--echelle, 1);
  overflow: hidden;
  font-family: var(--police-texte);
  font-size: 12px;
  line-height: 1.35;
  color: var(--texte);
  background-color: color-mix(in srgb, var(--fond-3) 70%, var(--fond));
  background-image:
    radial-gradient(38rem 20rem at 18% -5%, var(--halo-1), transparent 70%),
    radial-gradient(34rem 20rem at 92% 105%, var(--halo-2), transparent 70%);
}

/* Les titres et paragraphes de la scène ne sont pas ceux de la page. */
.scene h3,
.scene h4 {
  margin: 0;
  font-family: var(--police-texte);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  font-weight: 600;
}

.scene p {
  margin: 0;
  color: inherit;
}

.scene .chiffres {
  font-variant-numeric: tabular-nums;
}

.ic {
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─────────────────────────────── La légende ────────────────────────────── */

.lecteur-legende {
  min-height: 2.75em;
  margin: 0;
  text-align: center;
  font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
  font-weight: 500;
  color: var(--texte);
  text-wrap: balance;
}

.lecteur-legende.neuve {
  animation: legende-entre 0.5s var(--mouvement);
}

@keyframes legende-entre {
  from {
    opacity: 0;
    translate: 0 4px;
  }
}

/* ───────────────────────────── Barre et commandes ──────────────────────── */

.lecteur-barre {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--fond-3);
  overflow: hidden;
  cursor: pointer;
}

.lecteur-barre i {
  display: block;
  width: var(--avancement, 0%);
  height: 100%;
  border-radius: 999px;
  background: var(--degrade);
}

.lecteur-commandes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.lecteur-bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid var(--bord);
  background: var(--fond-2);
  color: var(--texte);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.32s var(--mouvement),
    border-color 0.32s var(--mouvement),
    background-color 0.32s var(--mouvement);
}

.lecteur-bouton:hover {
  transform: translateY(-1px);
  border-color: var(--texte-doux);
}

.lecteur-bouton:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.lecteur-bouton .ic {
  width: 1rem;
  height: 1rem;
}

.lecteur-lecture {
  min-width: 7.5rem;
  border-color: transparent;
  background: var(--degrade-bouton);
  color: #fff;
  box-shadow: var(--ombre-bouton);
}

.lecteur-lecture:hover {
  border-color: transparent;
}

.lecteur .ic-pause {
  display: none;
}

.lecteur.en-lecture .ic-pause {
  display: block;
}

.lecteur.en-lecture .ic-lecture {
  display: none;
}

.lecteur-temps {
  margin-left: auto;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--texte-doux);
}

/* Plein écran : le cadre prend toute la hauteur, la scène s'y centre. */
.lecteur:fullscreen {
  height: 100%;
  border: 0;
  border-radius: 0;
  padding: 1rem 1.25rem;
  background: var(--fond);
}

.lecteur:fullscreen .scene-cadre {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
}

@media (max-width: 640px) {
  .lecteur {
    padding: 0.75rem;
    gap: 0.75rem;
  }

  .lecteur-chapitres button {
    font-size: 0.75rem;
    padding-right: 0.625rem;
  }

  .lecteur-bouton {
    padding: 0.5rem 0.7rem;
    font-size: 0.8125rem;
  }

  .lecteur-legende {
    min-height: 3.5em;
  }
}

/* ═══════════════════════════ Outils de la scène ═══════════════════════════ */

/*
 * Tout ce qui apparaît au cours de la scène porte `.apparait` et se montre
 * quand demo.js pose `.est-la`. La visibilité suit l'opacité, pour qu'un bloc
 * disparu ne reste pas cliquable ni lisible.
 */
.apparait {
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition:
    opacity 0.55s var(--mouvement),
    translate 0.55s var(--mouvement),
    visibility 0s linear 0.55s;
}

.apparait.est-la {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}

/*
 * Aller directement à un instant, c'est rejouer tout ce qui précède d'un coup.
 * Pendant ce rejeu, aucune transition ni animation : l'état saute, il ne glisse
 * pas. La classe est retirée dès que le rejeu est terminé.
 */
.sans-transition,
.sans-transition * {
  transition: none !important;
  animation: none !important;
}

.curseur {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 60;
  width: 22px;
  height: 22px;
  translate: var(--x, 480px) var(--y, 660px);
  fill: #1a1518;
  stroke: #fffdfa;
  stroke-width: 1.6;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
  transition:
    translate 0.5s var(--mouvement),
    opacity 0.3s var(--mouvement);
}

.curseur.visible {
  opacity: 1;
}

.curseur.clic {
  animation: clic 0.3s var(--mouvement);
}

@keyframes clic {
  40% {
    scale: 0.78;
  }
}

/* Le doigt de l'acte 2 : un disque translucide, qui se contracte à l'appui. */
.doigt {
  position: absolute;
  left: -17px;
  top: -17px;
  z-index: 60;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.28);
  border: 2px solid rgb(255 255 255 / 0.75);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.4);
  translate: var(--x, 480px) var(--y, 660px);
  opacity: 0;
  pointer-events: none;
  transition:
    translate 0.45s var(--mouvement),
    opacity 0.3s var(--mouvement);
}

.doigt.visible {
  opacity: 1;
}

.doigt.tape {
  animation: tape-doigt 0.38s var(--mouvement);
}

@keyframes tape-doigt {
  30% {
    scale: 0.72;
    background: rgb(255 255 255 / 0.55);
  }
}

/* Ce qu'on vient de toucher s'enfonce un instant. */
.pressee {
  animation: pression 0.3s var(--mouvement);
}

@keyframes pression {
  40% {
    scale: 0.95;
  }
}

/* Une ligne qui vient d'arriver dans une liste. */
.entre {
  animation: entre 0.4s var(--mouvement);
}

@keyframes entre {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}

/* Un montant qui vient de changer bat une fois, comme dans la caisse. */
.pouls-montant {
  animation: pouls-montant 0.45s var(--mouvement);
}

@keyframes pouls-montant {
  35% {
    scale: 1.1;
  }
}

/* ─────────────────────────── Cartons et carton de fin ──────────────────── */

.intertitre,
.fin {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 60px;
  text-align: center;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.intertitre-sur {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-fort);
}

.intertitre-titre {
  max-width: 760px;
  font-family: var(--police-titre);
  font-size: 58px;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--texte);
}

.intertitre-texte {
  max-width: 540px;
  font-size: 19px;
  line-height: 1.4;
  color: var(--texte-doux);
}

.fin {
  gap: 10px;
}

.fin-logo {
  width: 170px;
  aspect-ratio: 749 / 462;
  margin-bottom: 4px;
  background: var(--texte);
  -webkit-mask: url('/marque/logo-fete.png') center / contain no-repeat;
  mask: url('/marque/logo-fete.png') center / contain no-repeat;
}

.fin-titre {
  max-width: 720px;
  font-family: var(--police-titre);
  font-size: 46px;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--texte);
}

.fin-texte {
  max-width: 520px;
  font-size: 17px;
  color: var(--texte-doux);
}

.fin-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.fin-actions .bouton {
  font-size: 15px;
}

/* ═══════════════════ Acte 1 : l'ordinateur du comité ═══════════════════ */

.ordi {
  position: absolute;
  left: 50px;
  top: 20px;
  width: 860px;
  height: 500px;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #f5f1ec;
  color: #1a1518;
  box-shadow:
    0 40px 80px -30px rgb(0 0 0 / 0.5),
    0 0 0 1px rgb(26 21 24 / 0.14);
}

.ordi-barre {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: #e9e3db;
  border-bottom: 1px solid rgb(26 21 24 / 0.1);
}

.ordi-barre i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cdc5bb;
}

.ordi-url {
  flex: 1;
  display: flex;
  align-items: center;
  height: 22px;
  margin-left: 10px;
  padding: 0 10px;
  border-radius: 6px;
  background: #fffdfa;
  font-size: 11px;
  color: #453d39;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * La palette de jour de la gestion, telle qu'elle est dans l'application :
 * papier, crème, rouge rentré de cinq pour cent, vert pour ce qui est fait.
 */
.gestion {
  --g-fond: #f5f1ec;
  --g-surface: #fffdfa;
  --g-surface-2: #ece6de;
  --g-bord: rgb(26 21 24 / 0.12);
  --g-bord-fort: rgb(26 21 24 / 0.24);
  --g-texte: #1a1518;
  --g-doux: #453d39;
  --g-tenu: #8a807b;
  --g-accent: #d9303c;
  --g-accent-doux: #fdeceb;
  --g-lien: #a81624;
  --g-succes: #15803d;
  --g-succes-doux: #e6f4ea;
  --g-succes-bord: #9ed3b0;

  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--g-texte);
}

.g-entete {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--g-bord);
  background: var(--g-surface);
}

.g-logo {
  width: 66px;
  aspect-ratio: 651 / 202;
  background: var(--degrade);
  -webkit-mask: url('/marque/logo.png') center / contain no-repeat;
  mask: url('/marque/logo.png') center / contain no-repeat;
}

.g-fil {
  font-size: 11px;
  color: var(--g-doux);
}

.g-fil i {
  margin: 0 5px;
  font-style: normal;
  color: var(--g-tenu);
}

.g-entete-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.g-avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--g-surface-2);
  font-size: 9px;
  font-weight: 700;
}

.g-corps {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 200px;
}

/* ─────────────────────────── La colonne des étapes ──────────────────────── */

.g-rail {
  padding: 10px 8px;
  border-right: 1px solid var(--g-bord);
  background: color-mix(in srgb, var(--g-surface-2) 45%, var(--g-fond));
}

.g-rail-titre {
  margin: 0 0 6px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g-tenu);
}

.g-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.g-rail li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 11px;
  color: var(--g-tenu);
  transition: background-color 0.3s var(--mouvement), color 0.3s var(--mouvement);
}

.g-rail li i {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--g-bord);
  font-style: normal;
  font-size: 8.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.g-rail li .ic {
  width: 9px;
  height: 9px;
  stroke-width: 3;
}

.g-rail li.faite {
  color: var(--g-texte);
}

.g-rail li.faite i {
  border-color: var(--g-succes-bord);
  background: var(--g-succes-doux);
  color: var(--g-succes);
}

.g-rail li.active {
  background: var(--g-accent-doux);
  color: var(--g-lien);
  font-weight: 600;
}

.g-rail li.active i {
  border-color: var(--g-accent);
  background: var(--g-accent);
  color: #fff;
}

/* ─────────────────────────────── L'écran principal ─────────────────────── */

.g-principal {
  position: relative;
  min-width: 0;
}

.g-ecran {
  position: absolute;
  inset: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s var(--mouvement),
    visibility 0s linear 0.5s;
}

.g-ecran.est-la {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.g-progression-ligne {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--g-doux);
}

.g-progression-ligne b {
  font-weight: 600;
  color: var(--g-texte);
}

.g-barre {
  height: 5px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--g-surface-2);
  overflow: hidden;
}

.g-barre i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--g-accent);
}

.g-barre-30 {
  width: 30%;
}

.g-question {
  font-size: 19px;
  line-height: 1.15;
}

.g-pilules {
  display: flex;
  gap: 6px;
}

.g-pilule {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--g-bord);
  background: var(--g-surface);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--g-doux);
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}

.g-pilule.active {
  border-color: var(--g-accent);
  background: var(--g-accent-doux);
  color: var(--g-texte);
}

.g-pilule b {
  padding: 0 5px;
  border-radius: 999px;
  background: var(--g-fond);
  font-size: 9px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.g-libelle {
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 600;
}

.g-puces {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.g-puce {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--g-bord);
  background: var(--g-surface);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--g-texte);
  transition:
    background-color 0.3s var(--mouvement),
    border-color 0.3s var(--mouvement),
    color 0.3s var(--mouvement);
}

.g-puce .ic {
  width: 10px;
  height: 10px;
  stroke-width: 2.4;
}

.g-puce em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--g-tenu);
}

.g-puce.prise {
  border-color: var(--g-succes-bord);
  background: var(--g-succes-doux);
  color: var(--g-succes);
}

.g-puce.prise em {
  color: var(--g-succes);
}

.g-formulaire {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.g-champ {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  font-weight: 500;
}

.g-champ-nom {
  flex: 1;
  min-width: 0;
}

.g-champ-court {
  width: 74px;
}

.g-saisie {
  position: relative;
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--g-bord);
  background: var(--g-surface);
  font-size: 11px;
  font-weight: 400;
  color: var(--g-texte);
  transition: border-color 0.2s var(--mouvement), box-shadow 0.2s var(--mouvement);
}

.g-saisie.focus {
  border-color: var(--g-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-accent) 20%, transparent);
}

.g-saisie .g-invite {
  position: absolute;
  left: 8px;
  font-style: normal;
  color: var(--g-tenu);
}

.g-saisie.pleine .g-invite {
  display: none;
}

/* Le curseur de saisie, qui bat tant que le champ a le focus. */
.g-saisie.focus::after {
  content: '';
  width: 1px;
  height: 14px;
  margin-left: 1px;
  background: var(--g-texte);
  animation: clignote 1s steps(2) infinite;
}

@keyframes clignote {
  to {
    opacity: 0;
  }
}

.g-bouton,
.g-bouton-creux,
.g-bouton-fantome {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.g-bouton {
  background: var(--g-accent);
  color: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
}

.g-bouton-creux {
  border: 1px solid var(--g-bord-fort);
  background: var(--g-surface);
  color: var(--g-texte);
}

.g-ajouter {
  height: 26px;
}

.g-bouton-fantome {
  padding: 0 8px;
  font-weight: 500;
  color: var(--g-doux);
}

/* Quatre lignes doivent tenir sous le formulaire : trois exemples et la boisson écrite à la main. */
.g-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gl-ligne {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid var(--g-bord);
  background: var(--g-surface);
  font-size: 11px;
}

.gl-nom {
  flex: 1;
  font-weight: 500;
}

.gl-prix,
.gl-consigne,
.gl-contenance {
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--g-bord);
  font-variant-numeric: tabular-nums;
}

.gl-prix {
  min-width: 46px;
  text-align: right;
}

.gl-contenance {
  min-width: 34px;
  color: var(--g-tenu);
}

.gl-consigne {
  font-size: 10px;
  color: var(--g-doux);
}

.gl-retirer {
  font-size: 10px;
  color: var(--g-doux);
}

.g-encouragement {
  min-height: 14px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--g-succes);
}

.g-pied {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--g-bord);
}

.g-enregistre {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 10px;
  color: var(--g-tenu);
}

.g-enregistre .ic {
  width: 11px;
  height: 11px;
}

/* ─────────────────────────── La carte qui se dessine ───────────────────── */

.g-apercu {
  align-self: start;
  margin: 12px 14px 12px 0;
  border: 1px solid var(--g-bord);
  border-radius: 10px;
  background: var(--g-surface);
  box-shadow: 0 8px 20px -14px rgb(26 21 24 / 0.3);
  font-size: 10.5px;
}

.g-apercu-tete {
  padding: 8px 10px;
  border-bottom: 1px solid var(--g-bord);
}

.g-surtitre {
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g-tenu);
}

.g-apercu-titre {
  display: block;
  margin-top: 2px;
  font-family: var(--police-titre);
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.g-apercu-corps {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px 10px;
}

.g-apercu h4 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
}

.pt {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.pt-bieres {
  background: #fbbf24;
}

.pt-softs {
  background: #06b6d4;
}

.pt-vins {
  background: #7c3aed;
}

.pt-plats {
  background: #16a34a;
}

.g-rien {
  margin-left: 2px;
  font-weight: 400;
  color: var(--g-tenu);
}

.g-apercu ul {
  list-style: none;
  margin: 2px 0 0;
  padding: 0 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.g-apercu li {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.g-apercu li i {
  flex: 1;
  min-width: 8px;
  border-bottom: 1px dotted var(--g-bord-fort);
}

.g-apercu li b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.g-apercu-manger {
  padding-top: 6px;
  border-top: 1px solid var(--g-bord);
}

.g-apercu-consigne {
  padding-top: 5px;
  border-top: 1px solid var(--g-bord);
  font-size: 9.5px;
  color: var(--g-doux);
}

/* ═══════════════════ Acte 2 : le téléphone du bénévole ═══════════════════ */

/*
 * La charte de nuit de la caisse, à l'identique : le fond presque noir et ses
 * deux halos, les surfaces translucides, le rouge et le rose rentrés de cinq
 * pour cent, l'ambre de la consigne encaissée, le vert de celle qu'on rend.
 */
.tel-demo {
  --t-fond: #070608;
  --t-surface: rgb(34 28 38 / 0.92);
  --t-surface-2: rgb(46 38 52 / 0.75);
  --t-surface-3: #0d0b0f;
  --t-bord: rgb(255 255 255 / 0.09);
  --t-bord-fort: rgb(255 255 255 / 0.16);
  --t-texte: #f5f1ec;
  --t-doux: #b5aca6;
  --t-tenu: #8a807b;
  --t-rouge: #d9303c;
  --t-rose: #d61e74;
  --t-accent-doux: #2a1216;
  --t-ambre: #fbbf24;
  --t-vert: #4ade80;
  --t-vert-doux: #10261a;
  --t-vert-bord: #2b5c3c;
  --t-degrade: linear-gradient(135deg, #d9303c, #d61e74);
  --t-degrade-total: linear-gradient(
    135deg,
    color-mix(in srgb, #e63946 24%, #221c26),
    color-mix(in srgb, #a855f7 20%, #221c26)
  );

  position: absolute;
  left: 335px;
  top: 10px;
  width: 290px;
  height: 520px;
  border: 8px solid #15111a;
  border-radius: 40px;
  overflow: hidden;
  background: var(--t-fond);
  color: var(--t-texte);
  font-size: 11px;
  box-shadow:
    0 50px 90px -35px rgb(0 0 0 / 0.7),
    0 0 0 1px rgb(255 255 255 / 0.06);
  transition:
    opacity 0.55s var(--mouvement),
    translate 0.8s var(--mouvement),
    visibility 0s linear 0.55s;
}

/* À l'épilogue, le téléphone se pousse pour laisser la place au décompte. */
.scene.epilogue .tel-demo {
  translate: -160px 0;
}

.tel-ecran {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image:
    radial-gradient(18rem 10rem at 15% -10%, color-mix(in srgb, #e63946 16%, transparent), transparent 60%),
    radial-gradient(16rem 9rem at 100% 0%, color-mix(in srgb, #a855f7 14%, transparent), transparent 55%);
}

.ecran-ouverture,
.ecran-caisse {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s var(--mouvement),
    visibility 0s linear 0.5s;
}

.ecran-ouverture.est-la,
.ecran-caisse.est-la {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ──────────────────────────────── L'ouverture ──────────────────────────── */

.ecran-ouverture {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 16px 12px;
  text-align: center;
}

.eo-enseigne {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-doux);
}

.eo-titre {
  font-family: var(--police-titre);
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.eo-sous {
  max-width: 220px;
  font-size: 10.5px;
  color: var(--t-doux);
}

.eo-cases {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}

.eo-cases span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 44px;
  border-radius: 8px;
  border: 2px solid var(--t-bord);
  background: var(--t-surface);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition:
    border-color 0.2s var(--mouvement),
    background-color 0.2s var(--mouvement),
    box-shadow 0.2s var(--mouvement);
}

.eo-cases span.vise {
  border-color: var(--t-rouge);
  background: var(--t-accent-doux);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-rouge) 25%, transparent);
}

.eo-cases span.remplie {
  border-color: var(--t-bord-fort);
}

.eo-pave {
  display: grid;
  grid-template-columns: repeat(3, 66px);
  gap: 6px;
  margin-top: 8px;
}

.eo-pave span {
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--t-bord);
  background: var(--t-surface);
  font-size: 18px;
  font-weight: 600;
  transition: background-color 0.2s var(--mouvement);
}

.eo-pave .eo-vide {
  border-color: transparent;
  background: transparent;
}

.eo-pave .ic {
  width: 18px;
  height: 18px;
}

.eo-pave span.pressee {
  background: var(--t-surface-2);
}

.eo-argument {
  margin-top: auto;
  font-size: 10px;
  color: var(--t-doux);
}

.eo-pied {
  font-size: 9px;
  color: var(--t-tenu);
}

/* ───────────────────────────────── La caisse ───────────────────────────── */

.ecran-caisse {
  display: flex;
  flex-direction: column;
}

.ec-barre {
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--t-bord);
  background: var(--t-surface-3);
}

.ec-identite {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ec-identite b {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
}

.ec-etat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  color: var(--t-doux);
}

.ec-etat small {
  white-space: nowrap;
}

.ec-reseau {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.4s var(--mouvement), background-color 0.4s var(--mouvement);
}

.ec-reseau i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.ec-reseau.en-ligne {
  color: var(--t-vert);
  background: color-mix(in srgb, var(--t-vert) 14%, transparent);
}

.ec-reseau.hors-ligne {
  color: var(--t-ambre);
  background: color-mix(in srgb, var(--t-ambre) 14%, transparent);
}

.ec-reseau.hors-ligne i {
  animation: pouls 2.4s var(--mouvement) infinite;
}

.ec-nouvelle {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--t-bord);
  background: var(--t-surface-2);
  color: var(--t-tenu);
  transition: background-color 0.3s var(--mouvement), color 0.3s var(--mouvement);
}

.ec-nouvelle.active {
  border-color: transparent;
  background: var(--t-rouge);
  color: #fff;
}

.ec-nouvelle .ic {
  width: 14px;
  height: 14px;
}

.ec-menu {
  padding-left: 8px;
  border-left: 1px solid var(--t-bord);
  color: var(--t-doux);
}

.ec-menu .ic {
  width: 16px;
  height: 16px;
}

.ec-fenetre {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Le contenu défile par translation : demo.js pose `--defil` en pixels. */
.ec-defilant {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 60px;
  translate: 0 calc(var(--defil, 0px) * -1);
  transition: translate 0.7s var(--mouvement);
}

.ec-bandeau {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  font-size: 11px;
  font-weight: 600;
}

.ec-bandeau small {
  margin-left: auto;
  font-size: 9px;
  font-weight: 500;
  color: var(--t-tenu);
}

.ec-tuiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.ec-tuile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 62px;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid var(--t-bord);
  background: var(--t-surface);
  transition: background-color 0.25s var(--mouvement), border-color 0.25s var(--mouvement);
}

.ec-tuile-nom {
  padding-right: 22px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
}

.ec-tuile b {
  margin-top: auto;
  font-family: var(--police-titre);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}

.ec-tuile small {
  font-size: 8.5px;
  color: var(--t-ambre);
}

.ec-tuile.active {
  border-color: var(--t-rouge);
  background: var(--t-accent-doux);
}

.ec-tuile em[data-badge] {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--t-degrade);
  color: #fff;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.25s var(--mouvement), scale 0.25s var(--mouvement);
}

.ec-tuile.active em[data-badge] {
  opacity: 1;
  scale: 1;
}

/* ─────────────────────────────── Le récapitulatif ──────────────────────── */

.ec-recap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--t-bord);
}

.ec-invitation {
  padding: 10px 0;
  text-align: center;
  font-size: 10.5px;
  color: var(--t-doux);
}

.ec-lignes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ec-lignes:empty {
  display: none;
}

.rc-ligne {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px 3px 3px;
  border-radius: 8px;
  border: 1px solid var(--t-bord);
  background: var(--t-surface);
}

.rc-qte {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  border-radius: 6px;
  background: var(--t-degrade);
  color: #fff;
  font-family: var(--police-titre);
  font-size: 13px;
  font-weight: 400;
}

.rc-corps {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.rc-nom {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.15;
}

.rc-corps small {
  font-size: 9px;
  color: var(--t-doux);
}

.rc-montant {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rc-moins {
  width: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--t-doux);
}

.ec-releve {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.ec-releve > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--t-bord);
}

.ec-releve dt {
  flex: 1;
  font-size: 10.5px;
  color: var(--t-doux);
}

.ec-releve dt small {
  display: block;
  font-size: 8.5px;
  color: var(--t-tenu);
}

.ec-releve dd {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ec-releve .consigne dd {
  color: var(--t-ambre);
}

.ec-releve .credit dd {
  color: var(--t-vert);
}

.ec-retour {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--t-bord);
}

.ec-retour-texte {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ec-retour-texte span {
  font-size: 10.5px;
  color: var(--t-doux);
}

.ec-retour-texte small {
  font-size: 8.5px;
  color: var(--t-tenu);
  white-space: nowrap;
}

.ec-compteur {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid var(--t-bord);
  background: var(--t-surface-3);
}

.ec-touche {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  color: var(--t-doux);
  transition: background-color 0.2s var(--mouvement), color 0.2s var(--mouvement);
}

.ec-touche.pressee {
  background: var(--t-rouge);
  color: #fff;
}

.ec-compteur b {
  min-width: 24px;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Sa place est réservée même caché : rien n'apparaît sous le doigt qui compte. */
.ec-tout-rendu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--t-vert-bord);
  color: var(--t-vert);
  font-size: 10.5px;
  font-weight: 600;
}

.ec-tout-rendu .ic {
  width: 12px;
  height: 12px;
  stroke-width: 2.6;
}

.ec-hors-carte {
  display: grid;
  place-items: center;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--t-bord-fort);
  background: var(--t-surface);
  font-size: 11px;
  font-weight: 600;
}

.ec-total {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--t-degrade-total);
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.6);
}

.ec-total-libelle {
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ec-total-montant {
  display: block;
  margin-top: 2px;
  font-family: var(--police-titre);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.02em;
  transform-origin: left center;
}

.ec-total-especes {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-size: 9px;
  color: var(--t-doux);
}

.ec-total-especes span:last-child {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ec-paiement {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ec-paiement-rangee {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.ec-payer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    background-color 0.3s var(--mouvement),
    color 0.3s var(--mouvement),
    border-color 0.3s var(--mouvement),
    box-shadow 0.3s var(--mouvement);
}

.ec-payer .ic {
  width: 14px;
  height: 14px;
}

.ec-payer.especes {
  border-color: var(--t-vert-bord);
  color: var(--t-vert);
}

.ec-payer.twint {
  background: var(--t-degrade);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgb(230 57 70 / 0.6);
}

.ec-payer.carte {
  border-color: var(--t-bord-fort);
  color: var(--t-texte);
}

.ec-payer.inactif {
  border-color: var(--t-bord);
  background: var(--t-surface-2);
  color: var(--t-tenu);
  box-shadow: none;
}

.ec-annuler {
  padding: 2px;
  text-align: center;
  font-size: 10px;
  color: var(--t-tenu);
}

.ec-pied {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 10px;
  border-top: 1px solid var(--t-bord);
  background: var(--t-surface-3);
  box-shadow: 0 -10px 24px -16px rgb(0 0 0 / 0.7);
}

.ec-pied > .chiffres:first-child {
  font-size: 10px;
  color: var(--t-doux);
}

.ec-pied-articles {
  flex: 1;
  font-size: 10.5px;
  color: var(--t-doux);
}

.ec-pied > b {
  font-size: 18px;
  font-weight: 700;
}

.ec-pied-fleche {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--t-bord-fort);
  background: var(--t-surface-2);
  transition: opacity 0.3s var(--mouvement);
}

.ec-pied-fleche .ic {
  width: 16px;
  height: 16px;
}

.ec-pied-fleche.cachee {
  opacity: 0;
}

/* ───────────────────────────── Le rendu de monnaie ─────────────────────── */

.feuille {
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  border-radius: 16px 16px 0 0;
  border-top: 1px solid var(--t-bord-fort);
  background: var(--t-fond);
  box-shadow: 0 -20px 50px rgb(0 0 0 / 0.6);
  translate: 0 105%;
  transition: translate 0.55s var(--mouvement);
}

.feuille.est-la {
  translate: 0 0;
}

.feuille-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--t-bord);
  font-size: 13px;
}

.feuille-tete span {
  font-size: 16px;
  color: var(--t-doux);
}

.feuille-corps {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
}

.rm-cadre {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--t-bord-fort);
  background: var(--t-surface-2);
}

.rm-du small {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--t-doux);
}

.rm-du b {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.rm-attente {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--t-bord);
  background: var(--t-surface);
  font-size: 9.5px;
  color: var(--t-doux);
}

.rm-rendre {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--t-vert);
  background: var(--t-vert-doux);
}

.rm-rendre small {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--t-doux);
}

.rm-rendre b {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--t-vert);
}

.rm-coupures {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.rm-coupures i {
  padding: 3px 8px;
  border: 1px solid;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
}

.rm-coupures .billet {
  border-radius: 6px;
  border-color: var(--t-vert);
  background: var(--t-surface);
}

.rm-coupures .piece {
  border-radius: 999px;
  border-color: var(--t-ambre);
  background: color-mix(in srgb, var(--t-ambre) 16%, transparent);
}

.rm-raccourcis {
  display: flex;
  gap: 5px;
}

.rm-raccourcis span {
  flex: 1;
  padding: 7px 4px;
  border-radius: 8px;
  border: 1px dashed var(--t-bord-fort);
  text-align: center;
  font-size: 10px;
  font-weight: 600;
}

.rm-legende {
  margin-top: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-doux);
}

.rm-pave {
  display: grid;
  gap: 5px;
}

.rm-pave.billets {
  grid-template-columns: repeat(5, 1fr);
}

.rm-pave.pieces {
  grid-template-columns: repeat(4, 1fr);
}

.rm-pave span {
  display: grid;
  place-items: center;
  height: 32px;
  border-radius: 7px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 700;
  transition: background-color 0.2s var(--mouvement);
}

.rm-pave.billets span {
  border-color: var(--t-vert-bord);
  background: color-mix(in srgb, var(--t-vert) 10%, var(--t-surface));
}

.rm-pave.pieces span {
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--t-ambre) 45%, transparent);
  background: color-mix(in srgb, var(--t-ambre) 12%, var(--t-surface));
}

.rm-pave span.pressee {
  background: var(--t-surface-2);
}

.rm-donne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--t-bord);
}

.rm-donne span {
  font-size: 11px;
  font-weight: 600;
}

.rm-donne b {
  font-size: 16px;
  font-weight: 700;
}

.rm-pose {
  font-size: 9.5px;
  color: var(--t-doux);
}

.feuille-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--t-bord);
  background: var(--t-surface-3);
}

.ec-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--t-rouge);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 8px 18px -8px rgb(217 48 60 / 0.6);
}

.ec-bouton-fantome {
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--t-doux);
}

.ec-toast {
  position: absolute;
  left: 50%;
  top: 60px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 220px;
  margin-left: -110px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f5f1ec;
  color: #1a1518;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.6);
}

.ec-toast .ic {
  color: #15803d;
}

/* ═════════════════════════ Épilogue : le décompte ═════════════════════════ */

.decompte {
  position: absolute;
  left: 545px;
  top: 120px;
  z-index: 5;
  width: 310px;
  padding: 14px 16px 14px;
  border-radius: 10px;
  background: #fffdfa;
  color: #1a1518;
  font-size: 12px;
  line-height: 1.4;
  rotate: 3deg;
  box-shadow:
    0 1px 2px rgb(26 21 24 / 0.08),
    0 28px 50px -22px rgb(26 21 24 / 0.55);
}

.dc-titre {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgb(26 21 24 / 0.25);
  font-family: var(--police-titre);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dc-ligne {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  padding: 2px 0;
  color: #453d39;
  font-variant-numeric: tabular-nums;
}

.dc-ligne > :first-child {
  white-space: nowrap;
}

.dc-ligne > :last-child {
  min-width: 62px;
  text-align: right;
}

.dc-qte {
  font-size: 10.5px;
  color: #8a807b;
}

.dc-consigne {
  color: #a04a08;
}

.dc-rendu {
  color: #15803d;
}

.dc-somme {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgb(26 21 24 / 0.25);
  color: #1a1518;
  font-weight: 700;
  font-size: 13px;
}

.dc-pied {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgb(26 21 24 / 0.25);
  font-size: 9.5px;
  color: #8a807b;
}

/* ═══════════════════════ Les cinq cartes du dessous ═══════════════════════ */

/*
 * Cinq cartes sur des rangées de trois : la seconde rangée n'en a que deux,
 * et une grille les collerait à gauche devant un trou. En flux, elles se
 * centrent, chacune gardant la largeur exacte d'un tiers de rangée.
 */
.parcours-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.parcours-demo li {
  flex: 1 1 17rem;
  max-width: calc((100% - 2.5rem) / 3);
}

@media (max-width: 900px) {
  .parcours-demo li {
    max-width: calc((100% - 1.25rem) / 2);
  }
}

@media (max-width: 600px) {
  .parcours-demo li {
    max-width: 100%;
  }
}

.mini-puce {
  position: absolute;
  right: 0.875rem;
  bottom: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.625rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--fond-2);
  color: var(--texte);
  font-size: 0.6875rem;
  font-weight: 600;
  box-shadow: var(--ombre-carte);
}

.mini-puce b {
  color: var(--accent-fort);
}

.mini-puce i {
  font-style: normal;
  color: var(--texte-doux);
}

.mini-commande {
  width: 14rem;
}

.mini-nuit-consigne,
.mini-nuit-consigne b {
  color: var(--t-ambre);
}

.mini-ticket .mini-ligne em {
  color: #8a807b;
}

.mini-ticket .mini-ligne b.mini-rendu {
  color: #15803d;
}

.mini-ticket .mini-somme {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px dashed rgb(26 21 24 / 0.25);
}

/* La seconde rangée arrive en cascade, comme la première. */
html.js .parcours-demo li:nth-child(5) {
  transition-delay: 0.08s;
}