/* Direction C, bloc : le launcher parle la langue du jeu. Police pixel (Pixelify Sans), boutons en relief,
ciel de jour et herbe ; le miel pour l'action principale, la pierre pour le reste. */
:root {
--ciel: #8ec1ec; --panneau: #2a1d10; --panneau-clair: #4b3621; --panneau-sombre: #1a1108; --bord: #0d0904;
--texte: #f3ebdc; --texte-2: #cdbfa8; --miel: #e6a82e; --miel-clair: #f6c75a; --miel-fonce: #a86c12;
--pierre: #6b655c; --pierre-clair: #8e877c; --pierre-fonce: #4a453f; --vert: #8fd36a; --rouge: #ff8a73;
--pixel: 'Pixelify Sans', monospace; color-scheme: dark;
}
body { background: var(--ciel); color: var(--texte); font: 16px/1.4 var(--pixel); }
p, h1, h2, h3 { text-wrap: pretty; }
:focus-visible { outline: 3px solid #fff; outline-offset: 0; }
.barre { padding-left: 14px; background: var(--panneau-sombre); }
.barre-nom { font-size: 14px; color: var(--texte-2); }
.barre button:hover { background: var(--panneau-clair); }
.barre button:last-child:hover { background: #a3271b; color: #fff; }
.barre svg { width: 12px; height: 12px; }
/* Le décor couvre toute la fenêtre, le sol en bas (60 px) reste visible sous chaque écran. */
.fenetre > main { overflow: hidden; }
.decor { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ecran { position: relative; height: calc(100% - 60px); }
.centre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.compte { position: absolute; z-index: 2; top: 14px; right: 16px; display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; background: var(--panneau); border: 2px solid var(--bord); font-size: 16px; }
.compte .tete { width: 32px; height: 32px; }
body[data-ecran-actif="connexion"] .compte, body[data-ecran-actif="inscription"] .compte { display: none; }
/* Logo provisoire : le nom en police pixel, contour sombre et relief miel, l'abeille à côté. */
.logo { position: relative; display: flex; align-items: center; gap: 16px; }
.logo-texte {
font-size: 92px; font-weight: 700; line-height: 1; color: #f6c445;
text-shadow: 3px 0 var(--bord), -3px 0 var(--bord), 0 3px var(--bord), 0 -3px var(--bord), 3px 3px var(--bord), -3px 3px var(--bord), 3px -3px var(--bord), -3px -3px var(--bord),
0 7px var(--miel-fonce), 3px 7px var(--miel-fonce), -3px 7px var(--miel-fonce), 0 10px var(--bord), 3px 10px var(--bord), -3px 10px var(--bord);
}
.logo .abeille { width: 78px; height: 48px; margin-bottom: 8px; }
.logo.petit .logo-texte { font-size: 56px; text-shadow: 3px 0 var(--bord), -3px 0 var(--bord), 0 3px var(--bord), 0 -3px var(--bord), 0 6px var(--miel-fonce), 0 9px var(--bord), 3px 9px var(--bord), -3px 9px var(--bord); }
.logo.petit .abeille { width: 52px; height: 32px; }
.abeille svg { width: 100%; height: 100%; }
.splash { position: absolute; right: -70px; bottom: -4px; transform: rotate(-14deg); font-size: 20px; font-weight: 600; color: #ffe15a; white-space: nowrap;
text-shadow: 2px 0 #3f2a00, -2px 0 #3f2a00, 0 2px #3f2a00, 0 -2px #3f2a00, 3px 3px #3f2a00; }
/* Boutons en relief, comme les menus du jeu. */
.bouton { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; white-space: nowrap; font-size: 18px; color: #fff; text-decoration: none; text-shadow: 2px 2px 0 #34302b;
background: var(--pierre); border: 2px solid var(--bord); box-shadow: inset 2px 2px 0 var(--pierre-clair), inset -2px -3px 0 var(--pierre-fonce); }
.bouton:hover { border-color: #fff; }
.bouton.miel { background: var(--miel); color: #2a1806; text-shadow: 1px 1px 0 rgba(255, 236, 180, .55); box-shadow: inset 2px 2px 0 var(--miel-clair), inset -2px -3px 0 var(--miel-fonce); }
.bouton:active { box-shadow: inset 2px 3px 0 var(--pierre-fonce); }
.bouton.miel:active { box-shadow: inset 2px 3px 0 var(--miel-fonce); }
.rangee { display: flex; gap: 10px; }
.rangee > * { flex: 1; }
/* Boîtes de dialogue : panneau sombre en relief, sans transparence (lisibilité). */
.boite { width: 460px; padding: 20px 24px 22px; background: var(--panneau); border: 3px solid var(--bord); box-shadow: inset 3px 3px 0 var(--panneau-clair), inset -3px -3px 0 var(--panneau-sombre); display: flex; flex-direction: column; gap: 14px; }
.boite.large { width: 760px; }
.boite h1, .boite h2 { font-size: 26px; font-weight: 600; line-height: 1.1; text-shadow: 2px 2px 0 #000; }
.champ label, .option > label, .option legend { display: block; font-size: 16px; margin-bottom: 6px; color: var(--texte); }
.champ-tete { display: flex; justify-content: space-between; align-items: baseline; }
.champ input, .chemin { width: 100%; height: 40px; padding: 0 10px; background: #000; border: 2px solid #8b8b8b; color: #fff; font-size: 17px; border-radius: 0; }
.champ input:focus { border-color: #fff; }
.saisie { position: relative; }
.saisie input { padding-right: 90px; }
.voir { position: absolute; top: 2px; right: 2px; bottom: 2px; padding: 0 10px; font-size: 15px; color: var(--texte-2); }
.lien-petit { font-size: 15px; color: var(--texte-2); text-decoration: underline; text-underline-offset: 3px; }
.voir:hover, .lien-petit:hover { color: #fff; }
.case { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--texte-2); accent-color: var(--miel); }
.erreur { color: var(--rouge); }
.note, .aide { font-size: 15px; color: var(--texte-2); }
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.grille > div { display: flex; flex-direction: column; gap: 14px; }
/* Règles de saisie : coches en pixels. */
.regles { margin-top: 8px; font-size: 15px; }
.regles li::before { width: 16px; height: 16px; -webkit-mask-size: 16px; mask-size: 16px; }
.regles li[data-etat="attente"] { color: var(--texte-2); --marque: url("data:image/svg+xml,"); }
.regles li[data-etat="ok"] { color: var(--vert); --marque: url("data:image/svg+xml,"); }
.regles li[data-etat="ko"] { color: var(--rouge); --marque: url("data:image/svg+xml,"); }