@font-face { font-family: "Poppins"; font-weight: 500; src: url("assets/fonts/Poppins-Medium.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Poppins"; font-weight: 600; src: url("assets/fonts/Poppins-SemiBold.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Poppins"; font-weight: 700; src: url("assets/fonts/Poppins-Bold.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Poppins"; font-weight: 900; src: url("assets/fonts/Poppins-Black.ttf") format("truetype"); font-display: block; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #003055; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; font-family: "Poppins", system-ui, sans-serif; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }

/* Hors format (écran d'ordinateur, tablette non 4:3) : le dégradé bleu de la maquette est prolongé par #backdrop,
   et le liseré blanc de 36 px qui entoure les pages et les vidéos est rogné (clip-path). */
#viewport { position: absolute; inset: 0; overflow: hidden; background: #003055; }
#backdrop { position: absolute; left: 0; top: 0; display: block; transform-origin: 0 0; pointer-events: none; }
#stage { position: absolute; left: 0; top: 0; width: 2732px; height: 2048px; transform-origin: 0 0; overflow: hidden; background: #003055;
  -webkit-clip-path: inset(40px); clip-path: inset(40px); }

.page { position: absolute; inset: 0; width: 2732px; height: 2048px; display: block; opacity: 0; transition: opacity .22s linear; pointer-events: none; }
.page.on { opacity: 1; }

/* Compteur du cadenas : même emprise que les vidéos Compteur-1/2/3 */
#counter { position: absolute; left: 2050px; top: 40px; width: 644px; height: 360px; pointer-events: none; }

/* Conteneur vidéo : plein écran, cadre de scène (coins arrondis) ou pastille compteur */
.vlayer { position: absolute; overflow: hidden; pointer-events: none; transform: translateZ(0); }
[hidden] { display: none !important; }
/* Les vidéos Compteur ont un fond sans halo alors que les pages 14+ en ont un : on ne garde de la vidéo que la pastille
   elle-même (anneau blanc compris), le halo de la page reste visible autour. */
.vlayer.soft { -webkit-clip-path: inset(42px 43px 43px 41px round 88px); clip-path: inset(42px 43px 43px 41px round 88px); }
#video, #freeze, #badge { position: absolute; display: block; object-fit: cover; background: transparent; }
/* Pastille « Deuxième chance » : vidéo affichée entière (son fond est recoloré sur le dégradé du panneau), bord fondu en cercle
   au-delà de la pastille imprimée sur la page (rayon 158 px) et avant le bord marine du panneau (189 px). */
.vlayer.badge { -webkit-mask-image: radial-gradient(circle closest-side, #000 91%, transparent 99%); mask-image: radial-gradient(circle closest-side, #000 91%, transparent 99%); }

#ui { position: absolute; inset: 0; }
.hot { position: absolute; cursor: pointer; }
.hot.round { border-radius: 50%; }
body.debug .hot { outline: 4px dashed #ff00d4; background: rgba(255, 0, 212, .18); }
body.debug .zone { outline: 4px dashed #00e1ff; }

/* ---------- Avatar : l'anneau blanc apparaît au survol et reste sur l'avatar choisi ---------- */
.avatar-ring { position: absolute; inset: 0; width: 2732px; height: 2048px; opacity: 0; transition: opacity .12s linear; pointer-events: none; }
.avatar-ring.on { opacity: 1; }

/* ---------- Formulaire ---------- */
.field { position: absolute; border: 0; outline: 0; margin: 0; padding: 0 0 0 14px; background: transparent; border-radius: 40px;
  font: 500 42px/1 "Poppins", sans-serif; letter-spacing: .02em; color: #1d1d1b; -webkit-appearance: none; appearance: none;
  -webkit-user-select: text; user-select: text; caret-color: #00aeef; }
.field.filled { background: #fff; }
.pill-error { position: absolute; border: 5px solid #e30613; border-radius: 52px; pointer-events: none; }
.prof-cover { position: absolute; background: #fff; border-radius: 40px; display: flex; align-items: center; padding-left: 14px;
  font: 500 42px/1 "Poppins", sans-serif; letter-spacing: .02em; color: #1d1d1b; pointer-events: none; }
.prof-cover i { font-style: normal; color: #d51f26; margin-left: 12px; }
.dropdown { position: absolute; pointer-events: none; }
.checkmark { position: absolute; left: 267px; top: 1676px; width: 79px; height: 79px; pointer-events: none; }

/* ---------- Saisies des énigmes ---------- */
.ghost-input { position: absolute; border: 0; outline: 0; background: transparent; color: transparent; caret-color: transparent;
  font-size: 48px; text-align: center; -webkit-appearance: none; appearance: none; -webkit-user-select: text; user-select: text; opacity: .01; }
.letter { position: absolute; text-align: center; font: 700 132px/1 "Poppins", sans-serif; color: #004f7d; text-transform: uppercase; pointer-events: none; }
.letter.cursor::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 6px; height: 118px; margin-left: -3px; background: #00aeef; animation: blink 1s steps(2, start) infinite; }
.digit { position: absolute; display: flex; align-items: center; justify-content: center; font: 900 322px/1 "Poppins", sans-serif; color: #004f7d; pointer-events: none; }
.digit span { display: block; transform: scaleX(.86); }
.digit.cursor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 220px; margin: -110px 0 0 -4px; background: #00aeef; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.shake { animation: shake .45s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake { 10%, 90% { transform: translateX(-10px); } 20%, 80% { transform: translateX(18px); } 30%, 50%, 70% { transform: translateX(-30px); } 40%, 60% { transform: translateX(30px); } }