/* sabeludia.eu — le style du portail, index.html.
*
* É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, elles mènent au même endroit. */
/* Notre police, servie d'ici : rien n'est demandé à un tiers.
Elle est dessinée sur une grille de 8 px, donc elle ne se lit nette qu'aux
corps multiples de 8 — 8, 16, 24. Toute autre taille, et tout clamp() en vw,
ferait tomber ses pixels entre deux pixels d'écran. */
@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; }
[hidden] { display: none !important; }
/* La bibliothèque : dessinée pixel par pixel, derrière tout le reste. */
#scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; image-rendering: pixelated; }
/* Le voile : la scène reste visible, le menu reste lisible. */
#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%); }
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; }
/* Le logo reste lui-même : le vecteur d'origine, pas une version pixel. */
.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); } }
.icone { image-rendering: pixelated; display: block; } /* canvas dessiné ici, ou PNG fourni : même rendu */
/* La boîte de dialogue des jeux : cadre blanc, liseré noir, ombre lavande. */
/* La boîte fait 400 px au plus ; sa section, elle, peut être aussi large que
* son texte le demande — d'où le centrage explicite. */
.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: 8px; color: var(--T); margin-bottom: 12px; }
.menu { list-style: none; }
.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, .menu a.on::before { visibility: visible; animation: blink .8s steps(1) infinite; }
.menu a:hover, .menu a:focus-visible, .menu a.on { color: var(--T); outline: none; }
@keyframes blink { 50% { opacity: 0; } }
.box p { font-size: 8px; line-height: 2; color: var(--w); }
.box p + p { margin-top: 10px; }
.box a.link { color: var(--T); }
/* L'écran des applis : choisis ton personnage. La grille à gauche, l'aperçu à droite. */
/* L'écran garde sa largeur quoi qu'il affiche : c'est la section qui la fixe,
* pas le texte du panneau — sinon viser une autre vignette redessine tout. */
#applis { width: min(760px, 100%); }
.choix { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px; width: 100%; align-items: stretch; }
.choix .box { width: 100%; }
.roster { display: flex; flex-direction: column; }
.grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tuile { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; cursor: pointer;
background: rgba(10,14,18,.9); border: 3px solid var(--D); outline: 2px solid var(--k); }
.tuile:hover { border-color: var(--l); }
.tuile.on { border-color: var(--T); box-shadow: 0 0 0 3px var(--t); }
.tuile.on::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--T); animation: blink .7s steps(1) infinite; }
.apercu { display: flex; flex-direction: column; align-items: center; text-align: center; }
.apercu .icone { margin: 6px 0 10px; }
/* Les deux lignes qui suivent réservent leur place : un nom long ou une phrase
* plus courte ne doit pas faire bouger le panneau quand on change de vignette. */
.apercu h3 { font-weight: 400; font-size: 16px; line-height: 1.4; color: var(--T);
margin-bottom: 8px; min-height: 2.8em; display: flex; align-items: center; }
.apercu .phrase { font-size: 8px; line-height: 1.9; color: var(--w); min-height: calc(3 * 1.9em); }
.apercu .langues { font-size: 8px; color: var(--L); margin-top: 8px; }
.jouer { display: inline-block; margin-top: auto; padding: 11px 18px; font-size: 16px; color: var(--k);
background: var(--T); border: 3px solid var(--w); box-shadow: 4px 4px 0 var(--D); }
.jouer:hover, .jouer:focus-visible { background: var(--w); }
.roster .back { display: block; margin-top: 10px; font-size: 8px; color: var(--L); }
.roster .back:hover { color: var(--T); }
@media (max-width: 640px) {
.choix { grid-template-columns: 1fr; }
.apercu { order: -1; }
.grille { grid-template-columns: repeat(4, 1fr); }
}
.hint { margin-top: 18px; font-size: 8px; color: var(--L); animation: blink 1.4s steps(1) infinite; }
.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; } .menu a, .apercu h3, .jouer { font-size: 8px; } }
@media (max-height: 620px) { .logo { display: none; } .sub { margin-bottom: 12px; } }