/* ============================================================================ * arcade.css — L'UNIVERS arcade, partagé par le hub Jeux et les 15 jeux. * * Chargé par toute page portant `data-arcade` sur son : le hub * (tools-games.html) et les pages de jeu qu'il annonce. Deux pages utilisent le * gabarit .gm-* SANS être des jeux (tools/iot-security, tools/network-watch, * simulations cyber) : elles n'ont pas l'attribut et gardent le style du site. * * On entre dans la salle sur le hub, on s'installe à une borne sur la page de * jeu : même sol, mêmes néons, même police, mêmes boutons. La rupture visuelle * a lieu UNE fois, en entrant, pas à chaque clic. * * Le hub ajoute ses bornes par-dessus (CSS/hub-arcade.css). * * ⚠ CONTRASTE : la salle est sombre dans les DEUX thèmes → --on-dark-text / * --on-dark-accent uniquement, jamais --accent-text (vert profond, invisible * ici). Les aplats verts vifs prennent une encre SOMBRE (#08251d). * ========================================================================== */ /* Police à pixels, auto-hébergée (SIL OFL 1.1 — voir fonts/LICENSE.txt). `swap` : le texte s'affiche tout de suite en monospace si le fichier tarde. */ @font-face { font-family: 'Press Start 2P'; src: url('/fonts/press-start-2p-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212; } @font-face { font-family: 'Press Start 2P'; src: url('/fonts/press-start-2p-latin-ext-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; } body[data-arcade] { --arc-cab: #161d2a; /* corps de borne */ --arc-cab-2: #0d121b; --arc-bezel: #05080e; /* liseré/cadre */ --arc-screen: #060b12; /* verre de l'écran */ --arc-edge: rgba(255, 255, 255, 0.10); --arc-neon: #37EFBA; --arc-neon-2: #00d4ff; --arc-neon-3: #ff4d9d; /* le rose des salles d'arcade, décor uniquement */ --arc-pixel: 'Press Start 2P', ui-monospace, 'Courier New', monospace; } /* ---- 1. LA SALLE ---------------------------------------------------------- */ body.lg-on[data-arcade] { --lg-deep: #04060b; background: #04060b; } body.lg-on[data-arcade]:not(.dark-mode) { background: linear-gradient(180deg, #27354d 0%, #1c2739 55%, #141d2d 100%); } /* Nuit : le mur s'assombrit franchement. */ body.lg-on[data-arcade].dark-mode { background: linear-gradient(180deg, #080c14 0%, #05080e 55%, #03050a 100%); } /* L'aurora sert de néons diffus au plafond : remontée et passée en « screen ». */ body[data-arcade] .lg-aurora span { opacity: 0.42; mix-blend-mode: screen; } body[data-arcade]:not(.dark-mode) .lg-aurora span { opacity: 0.34; mix-blend-mode: screen; } /* Sa grille « circuit » ne sert plus à rien ici : le sol la remplace. */ body[data-arcade] .lg-aurora::after { display: none; } .arc-room { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* Le sol : grille en perspective qui fuit vers l'horizon. */ /* Origine EN HAUT + rotateX : le plan part de l'horizon et vient vers le spectateur, les lignes convergent en s'éloignant. Avec l'origine en bas, le plan se met de champ et ne fait plus qu'un trait de 50 px. */ .arc-room-floor { position: absolute; left: -60%; right: -60%; top: 46%; height: 130vh; background-image: repeating-linear-gradient(90deg, rgba(55, 239, 186, 0.55) 0 2px, transparent 2px 96px), repeating-linear-gradient(0deg, rgba(55, 239, 186, 0.35) 0 2px, transparent 2px 64px); transform: perspective(560px) rotateX(64deg); transform-origin: 50% 0%; mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, rgba(0, 0, 0, 0.85) 46%, transparent 82%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, rgba(0, 0, 0, 0.85) 46%, transparent 82%); opacity: 0.55; } body[data-arcade].dark-mode .arc-room-floor { opacity: 0.72; } /* La ligne d'horizon, là où le sol rencontre le mur. */ .arc-room-horizon { position: absolute; left: 0; right: 0; top: 40%; height: 180px; background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(55, 239, 186, 0.22), transparent 70%); } /* Deux néons de plafond, dont un rose : c'est lui qui dit « salle de jeux » plutôt que « page sombre ». */ .arc-room-neon { position: absolute; top: 8%; height: 220px; width: 46%; filter: blur(46px); opacity: 0.5; } .arc-room-neon.n1 { left: -8%; background: radial-gradient(ellipse at center, var(--arc-neon-2), transparent 70%); } /* Crépuscule : la salle est encore éclairée, les néons tirent vers le chaud. */ body[data-arcade]:not(.dark-mode) .arc-room-neon.n1 { background: radial-gradient(ellipse at center, #ffb03a, transparent 70%); } .arc-room-neon.n2 { right: -8%; background: radial-gradient(ellipse at center, var(--arc-neon-3), transparent 70%); } body[data-arcade].dark-mode .arc-room-neon { opacity: 0.62; } /* ---- 2. L'ENSEIGNE (titre) ------------------------------------------------ */ body[data-arcade] .tools-section { color: var(--on-dark-text); } body[data-arcade] .section-title { font-family: var(--arc-pixel); font-size: clamp(1.5rem, 4.4vw, 2.4rem); letter-spacing: 0.02em; line-height: 1.35; color: #ffffff; text-shadow: 0 0 6px rgba(255, 255, 255, 0.85), 0 0 18px var(--arc-neon), 0 0 42px var(--arc-neon), 0 0 74px rgba(0, 212, 255, 0.55); animation: arc-flicker 7s infinite steps(1); } @keyframes arc-flicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: 0.62; } 98% { opacity: 1; } 99% { opacity: 0.74; } } @media (prefers-reduced-motion: reduce) { body[data-arcade] .section-title { animation: none; } } /* Le trait vert sous les titres du site ferait doublon sous un néon. */ body[data-arcade] .section-title span::after { display: none; } body[data-arcade] .tools-intro { color: var(--on-dark-text); opacity: 0.88; } body[data-arcade] .tools-intro strong { color: var(--on-dark-accent); } /* ---- 3. À LA BORNE (pages de jeu, gabarit .gm-*) --------------------------- * * Le hub met le joueur dans la salle ; la page de jeu doit le mettre DEVANT la * borne. Même sol, même police, mêmes boutons — sinon le clic depuis le hub * donne l'impression d'un bug. Tout ce qui suit ne s'applique qu'aux pages * marquées `data-arcade` : iot-security et network-watch, qui empruntent le même * gabarit sans être des jeux, gardent le style du site. * * ⚠ Ces pages deviennent SOMBRES dans les deux thèmes : game.css colorie * plusieurs éléments avec --accent-text / --bad-text (foncés en thème clair), * qui disparaîtraient ici. Ils sont repris un par un en --on-dark-*. * -------------------------------------------------------------------------- */ /* LE POINT CENTRAL DE TOUTE CETTE FEUILLE. * Les plateaux de jeu (et le hub) colorient leurs éléments avec les jetons * THÈME-CONSCIENTS de tokens.css : --accent-text, --warn-text, --bad-text, * --info-text, --special-text. Ces jetons sont FONCÉS en thème clair — ce qui * est juste sur une page claire, et illisible ici : la salle est sombre dans * les deux thèmes. L'auditeur en a relevé 45 d'un coup (chiffres de * Schrödinger, bits de Bitflip, badges de Sprint Fit, jauges de Licorne Inc.). * * On ne repeint donc pas chaque classe de chaque jeu : on redonne aux jetons * leur valeur « fond sombre » pour le contenu de la salle. Portée limitée à * .gm-wrap et .tools-section : le chrome du site (en-tête, palette ⌘K, panneaux * modaux) reste dans le thème de l'utilisateur, où ses fonds sont clairs. * Tout jeu ajouté hérite de la correction sans rien à faire. */ body[data-arcade] .gm-wrap, body[data-arcade] .tools-section { --accent-text: var(--brand-green); --warn-text: #ffb066; --bad-text: #ff8a8a; --info-text: #00d4ff; --special-text: #a98cff; --text-color: var(--on-dark-text); } /* Le fronton de la borne : le héros du jeu. */ body[data-arcade] .gm-hero { border-radius: 12px 12px 5px 5px; border: 2px solid #2b3648; box-shadow: inset 0 0 0 3px var(--arc-bezel), 0 18px 40px rgba(0, 0, 0, 0.5); background: radial-gradient(ellipse 80% 130% at 50% -20%, rgba(55, 239, 186, 0.22), transparent 62%), linear-gradient(180deg, #1a2231 0%, #0e131d 100%); } body[data-arcade] .gm-hero h1 { font-family: var(--arc-pixel); font-size: clamp(1.1rem, 3.4vw, 1.65rem); line-height: 1.45; letter-spacing: 0.01em; } /* Le titre du site anime un dégradé en boucle ; sous un néon, on veut du tube blanc qui brûle, pas un arc-en-ciel. */ body[data-arcade] .gm-hero h1 b { background: none; -webkit-text-fill-color: currentColor; animation: none; color: #ffffff; text-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 20px var(--arc-neon), 0 0 46px var(--arc-neon); } body[data-arcade] .gm-hero-icon { border-radius: 4px; border: 2px solid #0a0f18; background: radial-gradient(ellipse at 50% 45%, #10202c 0%, var(--arc-screen) 78%); box-shadow: inset 0 0 22px rgba(0, 212, 255, 0.18); text-shadow: 0 0 14px rgba(55, 239, 186, 0.7); } /* Le corps de la borne : panneaux et scène. */ body[data-arcade] .gm-panel { border-radius: 6px; border: 2px solid #2b3648; background: linear-gradient(180deg, rgba(22, 29, 42, 0.92), rgba(11, 16, 25, 0.95)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 3px var(--arc-bezel), 0 14px 30px rgba(0, 0, 0, 0.45); color: var(--on-dark-text); } /* L'ÉCRAN. Pas de lignes de balayage par-dessus le plateau : elles décorent joliment une vignette, elles gênent quand on joue. Le cadre suffit à dire « écran », et le jeu garde toute sa lisibilité. */ body[data-arcade] .gm-stage { background: radial-gradient(ellipse 90% 70% at 50% 0%, #0d1a24 0%, var(--arc-screen) 75%); border-color: #0a0f18; } /* Les compteurs. Le vert profond du thème clair serait invisible sur ces plaques sombres : on force le traitement « sur fond sombre » dans les deux thèmes, exactement comme le fait déjà le mode immersif. */ body[data-arcade] .gm-chip { border-radius: 4px; min-width: 96px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), #0d131d; border: 1px solid rgba(55, 239, 186, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } body[data-arcade] .gm-chip .k { font-family: var(--arc-pixel); font-size: 0.5rem; letter-spacing: 0.05em; color: var(--on-dark-text); opacity: 0.75; } body[data-arcade] .gm-chip .v { color: var(--on-dark-accent); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(55, 239, 186, 0.3); } body[data-arcade] .gm-chip.gm-chip-warn .v { color: #ffce6b; } body[data-arcade] .gm-chip.gm-chip-bad .v { color: #ff8a8a; } /* Rose vif : le rose foncé du thème clair ne tiendrait pas sur ces plaques. */ body[data-arcade] .gm-lives .on { color: #ff5a7a; } /* Les boutons de la borne : ils s'enfoncent. */ body[data-arcade] .gm-btn { border-radius: 4px; font-family: var(--arc-pixel); font-size: 0.62rem; letter-spacing: 0.04em; line-height: 1.6; padding: 0.8rem 1.2rem; color: var(--on-dark-text); border: 2px solid rgba(55, 239, 186, 0.45); background: #131b27; box-shadow: 0 3px 0 #0a1420; transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease, border-color 0.15s ease; } body[data-arcade] .gm-btn:hover { background: #1a2634; border-color: rgba(55, 239, 186, 0.75); } body[data-arcade] .gm-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #0a1420; } body[data-arcade] .gm-btn.primary { color: #08251d; border-color: transparent; background: linear-gradient(180deg, #5ff5c9, #14c79a); box-shadow: 0 3px 0 #0a6b4f, 0 6px 14px rgba(0, 0, 0, 0.45); } body[data-arcade] .gm-btn.primary:hover { background: linear-gradient(180deg, #6dffd4, #17d6a6); } body[data-arcade] .gm-btn.primary:active { transform: translateY(3px); box-shadow: 0 0 0 #0a6b4f; } body[data-arcade] .gm-btn.danger { color: #ff8a8a; border-color: rgba(255, 106, 106, 0.55); } /* Overlays, aide, retour : tout est sur fond sombre désormais. */ body[data-arcade] .gm-overlay { border-radius: 4px; } body[data-arcade] .gm-overlay-box h2 { font-family: var(--arc-pixel); font-size: 1rem; line-height: 1.5; } body[data-arcade] .gm-help summary { color: var(--on-dark-accent); } body[data-arcade] .gm-help .gm-help-body { color: var(--on-dark-text); } body[data-arcade] .gm-feedback.good i { color: var(--on-dark-accent); } body[data-arcade] .gm-feedback.bad i { color: #ff8a8a; } body[data-arcade] .gm-back a { font-family: var(--arc-pixel); font-size: 0.58rem; letter-spacing: 0.04em; color: var(--on-dark-accent); } /* Le contour de focus doit se voir sur fond sombre (le vert profond du thème clair y serait presque invisible). */ body[data-arcade] .gm-btn:focus-visible, body[data-arcade] .gm-stage :focus-visible, body[data-arcade] .gm-fs-btn:focus-visible, body[data-arcade] .gm-imm-close:focus-visible { outline-color: #37EFBA; } @media (max-width: 600px) { body[data-arcade] .gm-chip { min-width: 78px; } body[data-arcade] .gm-btn { font-size: 0.56rem; padding: 0.75rem 0.9rem; } }