/* BeeLife, version 2 « Nuit » : la rue la nuit. Un volet sombre à gauche porte toute l'interface ; la skyline pixel reste visible à droite.
   Accents : miel (action, lumière), acier froid (structure). États : vert, rouge, miel, uniquement pour dire l'état. */

:root {
  --nuit: #0a0d14; --volet: #10141c; --plaque: #171c27; --acier: #2a3345; --acier-clair: #3c485f; --champ: #080a10;
  --texte: #ebe6d8; --texte-2: #a3aec3; --miel: #f0b03a; --miel-clair: #ffd36a; --miel-fonce: #9a6410;
  --vert: #7fd18c; --rouge: #f08470;
  --pixel: 'Pixelify Sans', monospace; --signe: 'Silkscreen', 'Pixelify Sans', monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { overflow: hidden; min-width: 1100px; min-height: 680px; background: var(--nuit); color: var(--texte); font: 16px/1.4 var(--pixel); font-variant-ligatures: none; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; }
p, h1, h2, h3 { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--miel-clair); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chiffres { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Fenêtre sans cadre : barre de déplacement discrète. */
.fenetre { height: 100vh; display: flex; flex-direction: column; }
.barre { -webkit-app-region: drag; display: flex; align-items: center; justify-content: space-between; height: 32px; flex: none; padding-left: 14px; background: #06080c; border-bottom: 1px solid #000; }
.barre-nom { font: 11px var(--signe); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); }
.barre-boutons { display: flex; }
.barre button { -webkit-app-region: no-drag; width: 46px; height: 32px; display: grid; place-items: center; color: var(--texte-2); }
.barre svg { width: 12px; height: 12px; }
.barre button:hover { background: var(--acier); color: #fff; }
.barre button:last-child:hover { background: #a3271b; }
.fenetre > main { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.decor { position: absolute; right: 0; bottom: 0; display: block; image-rendering: pixelated; }

/* Le volet : pleine hauteur, bord net. Sa largeur suit l'écran affiché. */
.volet { position: absolute; z-index: 1; inset: 0 auto 0 0; width: 500px; background: var(--volet); border-right: 4px solid #06080c; box-shadow: inset -2px 0 0 var(--acier); }
body[data-ecran-actif="inscription"] .volet { width: 700px; }
body[data-ecran-actif="reglages"], body[data-ecran-actif="telechargement"] { --l: 580px; }
body[data-ecran-actif="reglages"] .volet, body[data-ecran-actif="telechargement"] .volet { width: 580px; }
.ecran { height: 100%; padding: 28px 40px 24px; display: flex; flex-direction: column; }
.compte { position: absolute; z-index: 2; top: 14px; right: 16px; display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; background: var(--volet); border: 2px solid #06080c; box-shadow: inset 0 0 0 2px var(--acier); font-size: 15px; }
.compte .tete { width: 28px; height: 28px; }
.tete { display: inline-block; flex: none; } .tete svg { display: block; width: 100%; height: 100%; }
body[data-ecran-actif="connexion"] .compte, body[data-ecran-actif="inscription"] .compte, body[data-ecran-actif="nouveau-mdp"] .compte { display: none; }

/* Logo : l'abeille, puis le nom en capitales d'enseigne. */
.logo { display: flex; align-items: center; gap: 14px; }
.logo .abeille { width: 52px; height: 32px; flex: none; }
.abeille svg { display: block; width: 100%; height: 100%; }
.logo-texte { font: 700 40px/1 var(--signe); letter-spacing: .04em; text-transform: uppercase; color: var(--miel); text-shadow: 4px 4px 0 var(--miel-fonce); }
.logo.petit .abeille { width: 39px; height: 24px; }
.logo.petit .logo-texte { font-size: 28px; text-shadow: 3px 3px 0 var(--miel-fonce); }
.splash { margin-top: 12px; font: 11px var(--signe); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); }
.splash::before { content: ''; display: inline-block; width: 12px; height: 4px; margin-right: 10px; vertical-align: middle; background: var(--miel); }

/* Boutons : aplats nets, relief d'un seul cran en dessous. */
.bouton { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; white-space: nowrap; font-size: 17px; text-decoration: none; background: var(--acier); border: 0; box-shadow: inset 0 -4px 0 #1b2230, inset 0 2px 0 var(--acier-clair); color: var(--texte); }
.bouton:hover { background: var(--acier-clair); }
.bouton:active { box-shadow: inset 0 3px 0 #1b2230; }
.bouton.miel { background: var(--miel); color: #1b1204; box-shadow: inset 0 -4px 0 var(--miel-fonce), inset 0 2px 0 var(--miel-clair); font-weight: 600; }
.bouton.miel:hover { background: var(--miel-clair); }
.bouton:disabled { cursor: default; background: #232a39; color: #6a7489; box-shadow: inset 0 -4px 0 #1a202c; }
.bouton.miel:disabled { background: #232a39; }
.rangee { display: flex; gap: 10px; }
.rangee > * { flex: 1; }
.secondaire { align-self: flex-start; height: 36px; font-size: 15px; }

/* Formulaires : champs enfoncés, étiquettes en capitales d'enseigne. */
.formulaire { display: flex; flex-direction: column; gap: 16px; margin-top: auto; margin-bottom: auto; }
.formulaire h1, .actus h2 { font: 700 13px var(--signe); letter-spacing: .14em; text-transform: uppercase; color: var(--miel); }
.formulaire h1 { font-size: 22px; letter-spacing: .06em; color: var(--texte); padding-bottom: 12px; border-bottom: 2px solid var(--acier); }
.champ label, .option > label, .option legend { display: block; margin-bottom: 7px; font: 11px var(--signe); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); }
.champ-tete { display: flex; justify-content: space-between; align-items: baseline; }
.champ input, .chemin { width: 100%; height: 42px; padding: 0 12px; background: var(--champ); border: 2px solid var(--acier); color: var(--texte); font-size: 17px; border-radius: 0; }
.champ input:focus, .chemin:focus { border-color: var(--miel); outline: 0; }
.saisie { position: relative; } .saisie input { padding-right: 90px; }
.voir { position: absolute; top: 2px; right: 2px; bottom: 2px; padding: 0 10px; font-size: 14px; color: var(--texte-2); }
.lien-petit { font-size: 14px; color: var(--texte-2); text-decoration: underline; text-underline-offset: 3px; }
.voir:hover, .lien-petit:hover { color: var(--miel-clair); }
.case { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--texte-2); accent-color: var(--miel); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; flex: none; }
.erreur { color: var(--rouge); font-size: 15px; line-height: 1.35; }
.enregistre { color: var(--vert); font-size: 15px; }
.note, .aide { font-size: 14px; color: var(--texte-2); }
.note { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--plaque); border-left: 4px solid var(--miel); }
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.grille > div { display: flex; flex-direction: column; gap: 16px; }
.regles { list-style: none; margin-top: 8px; display: grid; gap: 3px; font-size: 14px; }
.regles li { display: flex; align-items: center; gap: 8px; }
.regles li::before { content: ''; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--marque) center / contain no-repeat; mask: var(--marque) center / contain no-repeat; image-rendering: pixelated; }
.regles li { color: var(--texte-2); --marque: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M1 1h6v1H1zM1 6h6v1H1zM1 2h1v4H1zM6 2h1v4H6z'/></svg>"); }
.regles li[data-etat="ok"] { color: var(--vert); --marque: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M6 2h2v1H6zM5 3h2v1H5zM0 4h1v1H0zM4 4h2v1H4zM0 5h2v1H0zM3 5h2v1H3zM1 6h3v1H1zM2 7h1v1H2z'/></svg>"); }
.regles li[data-etat="ko"] { color: var(--rouge); --marque: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M0 1h2v1H0zM6 1h2v1H6zM1 2h2v1H1zM5 2h2v1H5zM2 3h4v2H2zM1 5h2v1H1zM5 5h2v1H5zM0 6h2v1H0zM6 6h2v1H6z'/></svg>"); }

/* Accueil : logo, plaque du serveur, Jouer, puis les actus. */
.ecran[data-ecran="accueil"] { padding-top: 26px; }
.serveur { margin-top: 22px; display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--plaque); border: 2px solid var(--acier); position: relative; }
.led { width: 14px; height: 14px; flex: none; background: var(--vert); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .25); }
.serveur-texte { flex: 1; min-width: 0; }
.serveur-nom { font: 700 13px var(--signe); letter-spacing: .12em; text-transform: uppercase; }
.serveur-texte p:last-child { font-size: 14px; color: var(--texte-2); }
.serveur-etat { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 14px; }
.ping { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.ping i { width: 4px; background: var(--acier-clair); }
.ping i:nth-child(1) { height: 4px; } .ping i:nth-child(2) { height: 6px; } .ping i:nth-child(3) { height: 9px; } .ping i:nth-child(4) { height: 12px; } .ping i:nth-child(5) { height: 14px; }
.ping[data-barres="1"] i:nth-child(-n+1), .ping[data-barres="2"] i:nth-child(-n+2), .ping[data-barres="3"] i:nth-child(-n+3), .ping[data-barres="4"] i:nth-child(-n+4), .ping[data-barres="5"] i { background: var(--vert); }
.serveur[data-serveur="en-ligne"] .etat { color: var(--vert); }
.serveur[data-serveur="hors-ligne"] .etat { color: var(--rouge); } .serveur[data-serveur="hors-ligne"] .led { background: var(--rouge); }
.serveur[data-serveur="maintenance"] .etat { color: var(--miel-clair); } .serveur[data-serveur="maintenance"] .led { background: var(--miel); }
/* Maintenance : ruban de chantier en haut de la plaque. */
.serveur[data-serveur="maintenance"]::before { content: ''; position: absolute; left: -2px; right: -2px; top: -2px; height: 6px; background: repeating-linear-gradient(135deg, var(--miel) 0 6px, #1b1204 6px 12px); }
.jouer { margin-top: 14px; height: 64px; font: 700 24px var(--signe); letter-spacing: .12em; text-transform: uppercase; }
.sous-jouer { margin-top: 10px; font-size: 14px; color: var(--texte-2); min-height: 20px; }
.sous-jouer[data-ton="erreur"] { color: var(--rouge); }
.liens { margin-top: 10px; }
.liens .bouton { height: 38px; font-size: 15px; }
.actus { margin-top: auto; }
.actus h2 { padding-bottom: 8px; border-bottom: 2px solid var(--acier); }
.actus article { display: grid; grid-template-columns: 118px 1fr; column-gap: 12px; padding: 8px 0; border-bottom: 2px solid #1b2230; }
.actus .date { grid-row: span 2; font: 11px/1.9 var(--signe); letter-spacing: .08em; text-transform: uppercase; color: var(--miel); }
.actus h3 { font-size: 16px; font-weight: 600; line-height: 1.2; }
.actus article p:last-child { font-size: 14px; line-height: 1.3; color: var(--texte-2); }

/* Réglages. */
.option { border: 0; display: flex; flex-direction: column; gap: 8px; }
.curseur { position: relative; height: 44px; }
.curseur input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: linear-gradient(90deg, var(--miel-fonce) calc(var(--v, .2) * 100%), var(--champ) 0); border: 2px solid var(--acier); cursor: pointer; }
.curseur input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 40px; background: var(--miel); box-shadow: inset 0 2px 0 var(--miel-clair), inset 0 -4px 0 var(--miel-fonce); }
.curseur-texte { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .35em; pointer-events: none; font-size: 17px; color: #fff; }
.ligne { display: flex; gap: 8px; }
.ligne .chemin { flex: 1; height: 42px; }
.choix { display: flex; gap: 8px; } .choix label { flex: 1; margin: 0; }
.choix input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choix .bouton { width: 100%; cursor: pointer; }
.choix input:checked + .bouton { background: var(--miel); color: #1b1204; font-weight: 600; box-shadow: inset 0 -4px 0 var(--miel-fonce), inset 0 2px 0 var(--miel-clair); }
.choix input:focus-visible + .bouton { outline: 2px solid var(--miel-clair); outline-offset: 2px; }
.chemin:disabled { color: #5d6880; border-color: #1f2736; }
.chemin:disabled + .bouton { display: none; }

/* Téléchargement : barre à ruban de chantier, étapes en lignes. */
.blocs { height: 30px; padding: 4px; background: var(--champ); border: 2px solid var(--acier); margin-top: 6px; }
.blocs > span { display: block; height: 100%; width: var(--p); background: repeating-linear-gradient(135deg, var(--miel) 0 8px, #1b1204 8px 16px); }
.blocs[data-plein] > span { width: 100%; }
.dl-chiffres { display: flex; gap: 22px; font-size: 15px; color: var(--texte-2); }
.dl-chiffres strong { color: var(--miel-clair); font-weight: 600; }
.etapes { list-style: none; border-top: 2px solid var(--acier); }
.etapes li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 10px 16px; border-bottom: 2px solid #1b2230; position: relative; }
.etapes li::before { content: ''; position: absolute; left: 0; top: 50%; margin-top: -4px; width: 8px; height: 8px; background: var(--acier-clair); }
.etapes li span:last-child { font-size: 15px; color: var(--texte-2); }
.etapes li[data-fait]::before { background: var(--vert); } .etapes li[data-fait] span:last-child { color: var(--vert); }
.etapes li[data-encours]::before { background: var(--miel); } .etapes li[data-encours] span:last-child { color: var(--miel-clair); }
.etapes li[data-echec]::before { background: var(--rouge); } .etapes li[data-echec] span:last-child { color: var(--rouge); }
.dl .rangee { justify-content: flex-start; } .dl .rangee > * { flex: none; min-width: 160px; }