#zone-verrouillage {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity .5s ease, filter .5s ease;
}

body.mode-code #zone-verrouillage {
  opacity: .38;
  filter: blur(2px);
}

:root {
  --espace-slider: 7.1rem;
}

#horloge-verrouillage {
  width: 100%;
  position: fixed;
  left: 50%;
  top: calc((100vh - var(--espace-slider)) / 2);
  transform: translate(-50%, -50%);
  font-family: 'DSEG7 Classic', 'Courier New', monospace;
  text-align: center;
  display: flex;
  justify-content: center;
  transition: top .5s ease;
}

body.mode-code #horloge-verrouillage {
  top: 80px;
}

#horloge-verrouillage .cadran--heure {
  font-size: 5.75rem;
  transition: font-size .5s ease;
}

body.mode-code #horloge-verrouillage .cadran--heure {
  font-size: 4.6rem;
}

#deuxpoints-verrouillage {
  animation: clignoter 1s steps(1, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
  #deuxpoints-verrouillage { animation: none; }
}

#horloge-verrouillage .cadran--date {
  position: absolute;
  top: 100%;
  margin-top: .5rem;
  margin-left: -1px;
  white-space: nowrap;
  font-size: 1.25rem;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  transition: font-size .5s ease;
}

body.mode-code #horloge-verrouillage .cadran--date {
  font-size: 1rem;
}

#horloge-verrouillage .cadran--date span{
  width: 100%;
}

#glisser-zone {
  position: fixed;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  width: min(23rem, calc(100vw - 3rem));
  z-index: 2;
  transition: opacity .4s ease, transform .4s ease;
}
#glisser-zone.masque {
  opacity: 0;
  transform: translateX(-50%) translateY(.8rem);
  pointer-events: none;
}

#glisser-piste {
  --progression: 0;
  --remplissage-largeur: 0px;
  --remplissage-hauteur: 0px;
  position: relative;
  height: 4.9rem;
  border-radius: 2.45rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(242,238,251,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  display: flex;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#glisser-piste::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--remplissage-largeur);
  height: var(--remplissage-hauteur);
  border-radius: 999px;
  background: rgba(255,255,255,.3);
  filter: blur(8px);
  pointer-events: none;
}

#glisser-texte {
  position: relative;
  width: 100%;
  padding-left: calc(4.4rem + 4px);
  text-align: center;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
  background: linear-gradient(90deg, var(--sourdine) 35%, #fff 50%, var(--sourdine) 65%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: chatoiement 2.6s linear infinite;
  opacity: clamp(0, calc(1 - var(--progression) / 0.6), 1);
  transition: opacity .12s linear;
}
@keyframes chatoiement {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  #glisser-texte { animation: none; color: var(--sourdine); background: none; }
}

#glisser-bouton {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(242,238,251,.4);
  color: var(--encre);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1.3rem;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#glisser-bouton:active { cursor: grabbing; }

#braises, #lueur {
  transition: filter .5s ease;
}
body.mode-code #braises {
  filter: blur(20px);
}
body.mode-code #lueur {
  filter: blur(20px);
}

#voile-code {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
body.mode-code #voile-code {
  opacity: 1;
  pointer-events: auto;
}

#voile-code::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(6,7,14,.78);
}

#pastilles-code {
  display: flex;
  gap: 1.25rem;
}

@keyframes secousse-pastilles {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
#pastilles-code.secousse {
  animation: secousse-pastilles .4s ease;
}
.pastille {
  width: .95rem;
  height: .95rem;
  border-radius: 50%;
  border: 1.5px solid rgba(242,238,251,.55);
  background: transparent;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.pastille.remplie {
  background: var(--encre);
  border-color: var(--encre);
  transform: scale(1.15);
  box-shadow: 0 0 .6em rgba(126,224,201,.45);
}

#pave-numerique {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.33rem;
  width: min(19.8rem, 85vw);
}

.touche {
  --echelle-entree: .55;
  --echelle-appui: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(242,238,251,.2);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--encre);
  font-size: 1.75rem;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  opacity: 0;
  transform: scale(calc(var(--echelle-entree) * var(--echelle-appui)));
  transition: background .15s ease, opacity .3s ease, transform .1s ease;
}
.touche:active {
  background: rgba(255,255,255,.16);
  --echelle-appui: .94;
}

.touche.controle {
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  font-size: .83rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sourdine);
}
.touche.controle:active {
  background: rgba(255,255,255,.06);
  --echelle-appui: 1;
}

body.mode-code #pave-numerique .touche {
  --echelle-entree: 1;
  opacity: 1;
  transition: background .15s ease, opacity .38s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
body.mode-code #pave-numerique .touche:active {
  transition: background .15s ease, transform .1s ease;
}
body.mode-code #pave-numerique .touche:nth-child(-n+3) { transition-delay: .02s; }
body.mode-code #pave-numerique .touche:nth-child(n+4):nth-child(-n+6) { transition-delay: .07s; }
body.mode-code #pave-numerique .touche:nth-child(n+7):nth-child(-n+9) { transition-delay: .12s; }
body.mode-code #pave-numerique .touche:nth-child(n+10) { transition-delay: .17s; }

@media (prefers-reduced-motion: reduce) {
  .touche {
    transition: background .15s ease;
  }
  body.mode-code #pave-numerique .touche {
    transition: background .15s ease;
    transition-delay: 0s;
  }
}

@media (max-width: 700px) {
  #horloge-verrouillage .cadran--heure {
    font-size: 4.5rem;
  }
  body.mode-code #horloge-verrouillage .cadran--heure {
    font-size: 3.6rem;
  }
  #pave-numerique {
    width: min(18.5rem, 86vw);
  }
}

#zone-verrouillage,
#glisser-zone,
#voile-code {
  transition: opacity .5s ease, transform .5s ease, filter .5s ease;
}

#horloge,
#etat,
#local,
#conversation {
  transition: opacity .5s ease, transform .5s ease;
}

/* #bascule partage désormais un fondu d'apparition/disparition synchronisé
   avec #ouvrir-fichiers-bouton et #chat-bouton au verrouillage (voir
   body.verrouille dans style.css). Comme ce fichier est chargé après
   style.css, une règle #bascule { transition: ... } ici écraserait
   entièrement celle de style.css (propriété non cumulable entre règles de
   même spécificité) : on répète donc ici la liste complète, opacity/
   transform inclus, avec la même durée que les deux autres boutons. */
#bascule {
  transition: background .2s, border-color .2s, box-shadow .3s,
              opacity .3s ease, transform .3s ease;
}

body:not(.verrouille) #zone-verrouillage,
body:not(.verrouille) #glisser-zone,
body:not(.verrouille) #voile-code {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}

body.verrouille #horloge,
body.verrouille #etat,
body.verrouille #local,
body.verrouille #conversation {
  opacity: 0;
  transform: scale(.96);
  pointer-events: none;
}

#galaxie {
  transition: opacity 1s cubic-bezier(.22, .61, .36, 1),
              transform 1s cubic-bezier(.22, .61, .36, 1),
              filter 1s cubic-bezier(.22, .61, .36, 1);
}
body.verrouille #galaxie {
  opacity: 0;
  transform: scale(.4) rotate(-8deg);
  filter: blur(6px);
  pointer-events: none;
}