:root {
  --p-glace: #d7e3ff;
  --p-lisere: #bcd0ff;
  --p-lavande: #b7a8ff;
  --p-lettre: #55525f;
  --p-lueur-rgb: 160, 190, 255;
  --p-halo-rgb: 120, 140, 255;
}

.seuil {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) var(--marge) calc(env(safe-area-inset-bottom, 0px) + 28px);
  background: var(--noir);
  transition: opacity 0.7s var(--doux);
}
.seuil.sort { opacity: 0; pointer-events: none; }
.seuil-p {
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 0 22px rgba(var(--p-halo-rgb), 0.55));
}
.seuil-compte {
  color: var(--texte);
  font-size: clamp(4.4rem, 22vw, 11rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.seuil-ligne {
  width: min(260px, 60vw);
  height: 1px;
  overflow: hidden;
  background: rgba(var(--texte-rgb), 0.12);
}
.seuil-ligne span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--bleu), var(--p-lavande));
  transform: scaleX(0);
  transform-origin: left;
}
.seuil.pret .seuil-compte { color: var(--second); transition: color 0.6s ease; }

.heros {
  position: relative;
  height: var(--haut);
  min-height: 520px;
  overflow: hidden;
  background: var(--noir);
}
.heros::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: auto 0 0 0;
  height: 16%;
  background: linear-gradient(rgba(var(--fond-rgb), 0), var(--fond));
  pointer-events: none;
}
.heros .scene {
  position: absolute;
  inset: 0;
  isolation: isolate;
  background: var(--noir);
}
.heros .p {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: min(48vh, 74vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  perspective: 900px;
  pointer-events: none;
}
.heros .p-corps { position: absolute; inset: 0; transform-style: preserve-3d; }
.heros .balance { position: absolute; inset: 0; animation: p-balance 9s ease-in-out infinite alternate; }
.heros .masque-p {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: url("/img/p-silhouette.png") center / 100% 100% no-repeat;
  mask: url("/img/p-silhouette.png") center / 100% 100% no-repeat;
}
.heros .aura {
  position: absolute;
  inset: -14%;
  opacity: 0.5;
  filter: blur(60px);
  animation: p-respire 6s ease-in-out infinite alternate-reverse;
}
.heros .aura .masque-p { inset: 9%; }
.heros .aura .tourne {
  background: conic-gradient(from 0deg, rgba(var(--bleu-rgb), 0) 0deg, rgba(var(--bleu-rgb), 0.35) 90deg, var(--bleu) 150deg, var(--violet) 210deg, rgba(var(--violet-rgb), 0) 300deg);
}
.heros .halo {
  position: absolute;
  inset: -6%;
  filter: blur(26px);
  animation: p-respire 4.5s ease-in-out infinite alternate;
}
.heros .halo .masque-p { inset: 3%; }
.heros .lisere {
  position: absolute;
  inset: 0;
  filter: blur(1.6px);
  transform: scale(1.014);
}
.heros .tourne {
  position: absolute;
  inset: -60%;
  animation: p-tourne 5.2s linear infinite;
}
.heros .halo .tourne {
  background: conic-gradient(from 0deg, rgba(var(--bleu-rgb), 0.18) 0deg, rgba(var(--bleu-rgb), 0.2) 60deg, var(--bleu) 120deg, var(--p-glace) 160deg, var(--violet) 205deg, rgba(var(--violet-rgb), 0.25) 260deg, rgba(var(--bleu-rgb), 0.18) 360deg);
}
.heros .lisere .tourne {
  background: conic-gradient(from 0deg, rgba(var(--p-lueur-rgb), 0.25) 0deg, rgba(var(--p-lueur-rgb), 0.3) 70deg, var(--p-lisere) 130deg, var(--blanc) 160deg, var(--p-lavande) 200deg, rgba(var(--p-lueur-rgb), 0.3) 270deg, rgba(var(--p-lueur-rgb), 0.25) 360deg);
}
.heros .noir {
  position: absolute;
  inset: 0;
  background: var(--noir);
  -webkit-mask: url("/img/p-silhouette.png") center / 100% 100% no-repeat;
  mask: url("/img/p-silhouette.png") center / 100% 100% no-repeat;
}
.heros .scene.repos .balance,
.heros .scene.repos .halo,
.heros .scene.repos .aura,
.heros .scene.repos .tourne { animation-play-state: paused; }

@keyframes p-balance { from { transform: rotateY(-11deg) rotateX(3deg); } to { transform: rotateY(11deg) rotateX(-3deg); } }
@keyframes p-respire { from { opacity: 0.72; transform: scale(1); } to { opacity: 1; transform: scale(1.035); } }
@keyframes p-tourne { to { transform: rotate(360deg); } }

.heros .mot {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  padding-left: 0.62em;
  font-size: clamp(18px, 3vw, 34px);
  font-weight: 300;
  letter-spacing: 0.62em;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
html.entree .heros .mot { display: flex; }
.heros .mot span { opacity: 0; color: var(--p-lettre); transition: opacity 0.35s ease, color 0.5s ease; }
.heros .mot span.on { opacity: 1; }
.heros .mot.blanc span { color: var(--blanc); }
.heros .mot.parti { opacity: 0; }

.heros .devise {
  position: absolute;
  z-index: 6;
  left: var(--marge);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  max-width: calc(100% - 2 * var(--marge) - 56px);
  color: var(--texte);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}
.heros .fleche {
  position: absolute;
  z-index: 6;
  right: calc(var(--marge) - 5px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 13px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--texte);
  font-size: 15px;
  text-decoration: none;
}
.heros .devise,
.heros .fleche { transition: opacity 0.9s ease; }
html.entree:not(.ouvert) .barre,
html.entree:not(.ouvert) .heros .devise,
html.entree:not(.ouvert) .heros .fleche { opacity: 0; pointer-events: none; }

@media (pointer: coarse) {
  .heros .aura { filter: blur(30px); animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .seuil,
  .heros .mot,
  .heros .mot span,
  .heros .devise,
  .heros .fleche { transition: none; }
  .heros .balance,
  .heros .halo,
  .heros .aura,
  .heros .tourne { animation: none; }
}