/* /sabconfig/ — le style de la page d'attente du casier.
 *
 * Écrit dans la page jusqu'au 03/11/2026, et sorti tel quel : la
 * politique de contenu du vhost n'admet aucun style en ligne
 * (domaine#53). Ses url() restent relatives : ce fichier est à côté de
 * la page. */

/* La même police que le portail, servie du même endroit. Elle est dessinée
   sur une grille de 8 px : seuls les corps multiples de 8 restent nets. */
@font-face {
  font-family: "Sabeludia Pixel";
  src: url("../fonts/SabeludiaPixel.woff2") format("woff2");
  font-display: swap;
}
:root {
  --k: #000; --w: #fff;
  --t: #34898f; --T: #c6e7e9; --d: #324b4d;
  --l: #7b79a5; --L: #aeabd4; --D: #494971;
  --bg: #0d1013;
  --pixel: "Sabeludia Pixel", monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--w); font-family: var(--pixel); font-size: 8px; line-height: 1.7;
       display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 12px; }
a { color: inherit; text-decoration: none; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; image-rendering: pixelated; }
#veil { position: fixed; inset: 0; z-index: -1; pointer-events: none;
        background: radial-gradient(ellipse 52% 44% at 50% 50%, rgba(6,8,10,.74) 0%, rgba(6,8,10,.34) 62%, rgba(6,8,10,.1) 100%); }

.logo { width: min(110px, 26vw); height: auto; margin-bottom: 10px; image-rendering: auto;
        filter: drop-shadow(0 0 16px rgba(52,137,143,.55)); animation: bob 1.2s steps(2) infinite; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
h1 { font-weight: 400; font-size: 24px; color: var(--T); text-shadow: 3px 3px 0 var(--k); letter-spacing: .06em; margin-bottom: 6px; }
.sub { font-size: 8px; color: var(--L); text-shadow: 2px 2px 0 var(--k); margin-bottom: 20px; }

.box { width: min(400px, 100%); margin-inline: auto; background: rgba(3,5,7,.9); border: 4px solid var(--w); outline: 4px solid var(--k);
       box-shadow: 8px 8px 0 var(--D); padding: 16px 14px; }
.box h2 { font-weight: 400; font-size: 16px; color: var(--T); margin-bottom: 14px; animation: blink 1.4s steps(1) infinite; }
.box p { font-size: 8px; line-height: 2; color: var(--w); }
.box p + p { margin-top: 10px; }
.box p.quand { color: var(--L); }
@keyframes blink { 50% { opacity: .35; } }

/* Le cadenas : dessiné ici au trait, pas une icône de contenu/icones.js —
   cette page n'a pas de catalogue à charger pour un seul dessin. */
.cadenas { display: block; margin: 0 auto 14px; image-rendering: pixelated; }

.menu { list-style: none; margin-top: 16px; }
.menu a { display: flex; align-items: center; gap: 10px; padding: 11px 6px; font-size: 16px; }
.menu a::before { content: "▶"; color: var(--t); visibility: hidden; width: 1em; }
.menu a:hover::before, .menu a:focus-visible::before { visibility: visible; animation: clign .8s steps(1) infinite; }
.menu a:hover, .menu a:focus-visible { color: var(--T); outline: none; }
@keyframes clign { 50% { opacity: 0; } }

.corner { position: fixed; top: 10px; right: 10px; }
.corner select { background: var(--k); color: var(--w); border: 2px solid var(--w); font-family: inherit; font-size: 8px; padding: 6px 8px; cursor: pointer; }
@media (max-width: 380px) { h1 { font-size: 16px; } .box h2, .menu a { font-size: 8px; } }
@media (max-height: 620px) { .logo { display: none; } .sub { margin-bottom: 12px; } }