/* ============================================================================
   PIN VERRE — saisie de code a cases, en verre, avec animation de validation.
   Composant autonome : aucune dependance, aucun pre-processeur.
   Reutilisable tel quel dans un autre projet (voir LISEZMOI.md).

   Deux variantes :
     .pv            rendu complet, avec flou de verre (navigateurs recents)
     .pv.pv-sobre   sans flou — pour les moteurs anciens (Chrome 63 des
                    televisions Tizen 5, qui ignore backdrop-filter)
   Les couleurs se pilotent par variables, pour s'adapter a chaque projet.
   ========================================================================== */
.pv {
  --pv-case: 68px;
  --pv-rayon: 18px;
  --pv-accent: #E8B44A;
  --pv-succes: #35C07A;
  --pv-erreur: #E8574A;
  --pv-texte: #F3F0EE;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; position: relative;
}
.pv-case {
  position: relative;
  width: var(--pv-case); height: var(--pv-case);
  border-radius: var(--pv-rayon);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 26px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  color: var(--pv-texte);
  font-size: calc(var(--pv-case) * .46); font-weight: 600;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease,
              opacity .22s ease;
}
.pv:not(.pv-sobre) .pv-case { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* la case qui attend le prochain chiffre */
.pv-case.pv-active {
  border-color: var(--pv-accent);
  box-shadow: 0 0 0 1px var(--pv-accent), 0 0 22px rgba(232,180,74,.30),
              inset 0 1px 0 rgba(255,255,255,.14);
}
.pv-case.pv-pleine { border-color: rgba(232,180,74,.55); }

/* le chiffre monte en place, puis se masque en point */
.pv-chiffre {
  display: block;
  animation: pv-entree .26s cubic-bezier(.2,.9,.3,1.3) both;
}
@keyframes pv-entree {
  from { opacity: 0; transform: translateY(14px) scale(.75); }
  to   { opacity: 1; transform: none; }
}
.pv-point {
  width: calc(var(--pv-case) * .20); height: calc(var(--pv-case) * .20);
  border-radius: 50%; background: var(--pv-texte);
  animation: pv-point .2s ease both;
}
@keyframes pv-point { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- verification en cours : les cases respirent --- */
.pv.pv-occupe .pv-case { animation: pv-respire 1.1s ease-in-out infinite; }
.pv.pv-occupe .pv-case:nth-child(2) { animation-delay: .12s; }
.pv.pv-occupe .pv-case:nth-child(3) { animation-delay: .24s; }
.pv.pv-occupe .pv-case:nth-child(4) { animation-delay: .36s; }
@keyframes pv-respire {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* --- succes : les cases se rejoignent, un anneau vert se referme --- */
.pv.pv-succes .pv-case {
  opacity: 0; transform: translateX(var(--pv-vers, 0)) scale(.6);
  transition: opacity .34s ease, transform .34s cubic-bezier(.5,0,.2,1);
}
.pv-sceau {
  position: absolute; left: 50%; top: 50%;
  width: var(--pv-case); height: var(--pv-case); margin: 0;
  transform: translate(-50%, -50%) scale(.55);
  border-radius: var(--pv-rayon);
  border: 2px solid var(--pv-succes);
  box-shadow: 0 0 0 6px rgba(53,192,122,.14), 0 0 34px rgba(53,192,122,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease .12s, transform .42s cubic-bezier(.2,.9,.3,1.25) .12s;
}
.pv.pv-succes .pv-sceau { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* --- erreur : secousse rouge, puis les cases se vident --- */
.pv.pv-erreur .pv-case {
  border-color: var(--pv-erreur);
  box-shadow: 0 0 0 1px var(--pv-erreur), 0 0 20px rgba(232,87,74,.30);
}
.pv.pv-erreur { animation: pv-secousse .42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes pv-secousse {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* Respect du reglage systeme : pas d'animation pour qui n'en veut pas. */
@media (prefers-reduced-motion: reduce) {
  .pv-chiffre, .pv-point, .pv.pv-occupe .pv-case, .pv.pv-erreur { animation: none; }
  .pv-case, .pv-sceau { transition: none; }
}