/* ============================================================
   L'animation du panneau (ordinateur seulement) et le compteur.
   Le film (7,5 s, joué une fois à l'ouverture) :
   1. les lignes grises du contrat s'écrivent une à une ;
   2. le contrat rapetisse et glisse DERRIÈRE l'enveloppe (caché, il
      disparaît d'un coup, sans fondu) ; l'enveloppe file vers la
      droite et passe sous la partie droite de la page (coupée net
      par le panneau, overflow: hidden) ;
   3. elle revient de là ; le contrat ressort par l'arrière, puis une
      copie posée DEVANT l'enveloppe prend le relais et grandit en la
      recouvrant (le SVG n'a pas de z-index) ;
   4. la signature se trace, le tampon tombe, le compteur gagne un
      (connexion.js).
   Animations coupées (réglage du système) : l'état final, d'office.
   ============================================================ */

.scene {
  position: relative;
  align-content: center;
  justify-items: center;
  gap: 20px;
  min-height: 0;
}

.contrat-anime { overflow: visible; width: 100%; height: min(580px, calc(100dvh - 380px)); }
.contrat-anime text { text-rendering: geometricPrecision; }

.ligne {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
  animation: ecrire 0.32s ease-out forwards;
}
.ligne:nth-child(1) { animation-delay: 0.2s; }
.ligne:nth-child(2) { animation-delay: 0.37s; }
.ligne:nth-child(3) { animation-delay: 0.54s; }
.ligne:nth-child(4) { animation-delay: 0.71s; }
.ligne:nth-child(5) { animation-delay: 0.88s; }
.ligne:nth-child(6) { animation-delay: 1.05s; }
.ligne:nth-child(7) { animation-delay: 1.22s; }
.ligne:nth-child(8) { animation-delay: 1.39s; }
@keyframes ecrire { to { transform: scaleX(1); } }

.feuille { transform-box: view-box; transform-origin: 220px 250px; animation: voyage 7.5s ease-in-out forwards; }
@keyframes voyage {
  0%, 24% { transform: none; opacity: 1; }
  30% { transform: translate(0, -40px) scale(0.24); opacity: 1; }
  35%, 35.9% { transform: translate(0, 70px) scale(0.24); opacity: 1; }
  36%, 55.9% { transform: translate(0, 70px) scale(0.24); opacity: 0; }
  56% { transform: translate(0, 70px) scale(0.24); opacity: 1; }
  60% { transform: translate(0, -40px) scale(0.24); opacity: 1; }
  60.1%, 100% { transform: translate(0, -40px) scale(0.24); opacity: 0; }
}
.feuille--devant { animation-name: devant; }
@keyframes devant {
  0%, 59.9% { transform: translate(0, -40px) scale(0.24); opacity: 0; }
  60% { transform: translate(0, -40px) scale(0.24); opacity: 1; }
  67%, 100% { transform: none; opacity: 1; }
}

.enveloppe { transform-box: view-box; transform-origin: 220px 320px; opacity: 0; animation: courrier 7.5s ease-in-out forwards; }
@keyframes courrier {
  0%, 22% { transform: none; opacity: 0; }
  26%, 36% { transform: none; opacity: 1; }
  46% { transform: translate(720px, -90px) rotate(8deg); opacity: 1; }
  46.1% { transform: translate(720px, 40px) rotate(-6deg); opacity: 1; }
  55%, 66.9% { transform: none; opacity: 1; }
  67%, 100% { transform: none; opacity: 0; }
}

.signature { stroke-dasharray: 700; stroke-dashoffset: 700; animation: tracer 0.9s ease-out 5.1s forwards; }
@keyframes tracer { to { stroke-dashoffset: 0; } }
.tampon { opacity: 0; transform-box: fill-box; transform-origin: center; animation: tamponner 0.4s ease-out 6.1s forwards; }
@keyframes tamponner {
  from { opacity: 0; transform: scale(1.5) rotate(-12deg); }
  to { opacity: 1; transform: scale(1) rotate(-12deg); }
}

/* --- Le compteur de la saison : chiffres à largeur fixe, rien ne bouge quand il change --- */
.cumul { position: relative; align-items: center; gap: 14px; }
.cumul__nombre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3ch;
  height: 56px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--vert-signe);
  color: #ffffff;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Centrage au pixel (règle « texte dans un cadre ») : encre seule, puis 1 px vers le bas */
.cumul__nombre > span { text-box: trim-both cap alphabetic; transform: translateY(1px); }
.cumul__nombre--plus { animation: battre 0.5s ease-out; }
@keyframes battre { 40% { transform: scale(1.15); } }
.cumul__texte { color: var(--sur-marine-doux); font-size: 0.9375rem; line-height: 1.35; }
.cumul__texte strong { display: block; color: var(--sur-marine); font-size: 1.125rem; }

@media (min-width: 960px) {
  .scene { display: grid; }
  .cumul { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .ligne, .feuille, .signature { animation: none; transform: none; stroke-dashoffset: 0; }
  .feuille--devant, .enveloppe { display: none; }
  .tampon { animation: none; opacity: 1; transform: rotate(-12deg); }
}