/* CoLoniZers — thème spatial sombre (indigo / acier / ambre). Aucune ressource externe. */
@font-face { font-family: "Chakra Petch"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/chakra-petch-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/chakra-petch-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; src: url("../vendor/fonts/chakra-petch-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("../vendor/fonts/barlow-latin-700-normal.woff2") format("woff2"); }

:root, [data-bs-theme="dark"] {
    --clz-bg: #070b18;
    --clz-bg2: #0d1430;
    --clz-panel: rgba(18, 27, 58, .82);
    --clz-panel-2: rgba(28, 40, 82, .9);
    --clz-line: rgba(120, 150, 230, .18);
    --clz-accent: #f5b53d;
    --clz-cyan: #57d3ff;
    --clz-metal: #b9c4d6;
    --clz-crystal: #7fd8ff;
    --clz-deut: #6ff0b4;
    --clz-energy: #ffe066;
    --clz-dm: #c996ff;
    --bs-body-bg: var(--clz-bg);
    --bs-body-font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: #dfe6f5;
    --bs-link-color: var(--clz-cyan);
    --bs-link-color-rgb: 87, 211, 255;
    --bs-link-hover-color: #9ee6ff;
    --bs-border-color: var(--clz-line);
}
body {
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(92, 64, 200, .28), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(20, 140, 200, .18), transparent 60%),
        url("../img/starfield.svg") repeat, var(--clz-bg);
    background-attachment: fixed;
    min-height: 100vh;
}
.clz-title, h1, h2, h3, .navbar-brand, .clz-brand { font-family: "Chakra Petch", "Barlow", sans-serif; letter-spacing: .02em; }
.clz-brand { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: #fff; text-decoration: none; font-size: 1.15rem; }
.clz-topbar { background: rgba(7, 11, 24, .88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--clz-line); z-index: 1030; }
.clz-topbar-admin { border-bottom-color: rgba(245, 181, 61, .45); }

/* Barre de ressources */
.clz-res { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: .5rem; background: var(--clz-panel); border: 1px solid var(--clz-line); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .92rem; }
.clz-res-metal { color: var(--clz-metal); } .clz-res-crystal { color: var(--clz-crystal); } .clz-res-deuterium { color: var(--clz-deut); }
.clz-res-energy { color: var(--clz-energy); } .clz-res-dm { color: var(--clz-dm); }
.clz-res.full .clz-res-val, .clz-res.neg span { color: #ff6b6b; }
.text-metal { color: var(--clz-metal) !important; } .text-crystal { color: var(--clz-crystal) !important; } .text-deut { color: var(--clz-deut) !important; } .text-energy { color: var(--clz-energy) !important; }

/* Mise en page */
.clz-shell { display: flex; min-height: calc(100vh - 60px); }
/* 2.8.0-beta.51 : colonne de gauche élargie d'un mot de six lettres (≈ 48 px dans la police du menu) — jeu et administration. */
.clz-sidebar { width: 278px; flex: 0 0 278px; background: rgba(9, 14, 32, .72); border-right: 1px solid var(--clz-line); }
@media (max-width: 991.98px) { .clz-sidebar { width: min(308px, 88vw); background: #0a1024; } }
/* Menu mobile (offcanvas) : le contenu défile sous l'en-tête, au doigt sur iOS comme sur Android, sans entraîner la page. */
@media (max-width: 991.98px) {
    .clz-sidebar.offcanvas-lg { display: flex; flex-direction: column; max-height: 100dvh; }
    .clz-sidebar.offcanvas-lg > .offcanvas-header { flex: 0 0 auto; }
    .clz-sidebar.offcanvas-lg > .clz-sidebar-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
}
.clz-main { flex: 1 1 auto; min-width: 0; padding: 1rem; }
/* 2.9.0-beta.16 : sur ordinateur et grande tablette, le menu de gauche flotte et suit la page — fixé sous l'en-tête (hauteur
   mesurée par app.js : --clz-top-h) jusqu'en bas de l'écran, il défile seul s'il est plus haut que l'écran ; la page et le pied
   de page se décalent de sa largeur. Toujours entier, même en bas d'une page courte. Téléphone : menu escamotable inchangé. */
@media (min-width: 992px) {
    .clz-shell > .clz-sidebar {
        position: fixed; top: var(--clz-top-h, 68px); bottom: 0; left: 0; z-index: 1020;
        overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
        scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent;
    }
    .clz-shell > .clz-sidebar::-webkit-scrollbar { width: 6px; }
    .clz-shell > .clz-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 3px; }
    .clz-shell > .clz-sidebar::-webkit-scrollbar-track { background: transparent; }
    .clz-shell > .clz-main { margin-left: 278px; }
    body.clz-game > .clz-footer-band, body.clz-admin > .clz-footer-band { margin-left: 278px; }
}
.clz-menu .nav-link { color: #c3cde6; border-radius: .45rem; padding: .42rem .7rem; font-weight: 500; }
.clz-menu .nav-link i { width: 1.3rem; display: inline-block; color: var(--clz-cyan); }
.clz-menu .nav-link:hover { background: rgba(87, 211, 255, .08); color: #fff; }
.clz-menu .nav-link.active { background: linear-gradient(90deg, rgba(245, 181, 61, .25), rgba(245, 181, 61, .04)); color: #fff; box-shadow: inset 3px 0 0 var(--clz-accent); }
.clz-footer { border-top: 1px solid var(--clz-line); }

/* Cartes */
.card.clz-card, .clz-item, .clz-stat { background: var(--clz-panel); border: 1px solid var(--clz-line); border-radius: .8rem; backdrop-filter: blur(4px); }
.clz-card .card-header { background: rgba(255, 255, 255, .03); border-bottom-color: var(--clz-line); font-family: "Chakra Petch", sans-serif; }
.clz-stat { padding: .7rem .9rem; }
.clz-item { display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.clz-item:hover { border-color: rgba(245, 181, 61, .55); transform: translateY(-1px); }
/* 2.9.1-beta.82 : la carte verrouillée reste estompée, sauf son bouton (vitreux, lumineux, cadenas visible) — l'opacité
   est donc portée par le contenu de la carte et non par la carte entière. */
.clz-item.locked > .d-flex { opacity: .62; }
.clz-item.locked > :not(.d-flex) > :not(.clz-why-zone) { opacity: .62; }
.clz-item.locked .clz-item-img { filter: grayscale(.9); }
.clz-item-img { background: #0b1330; border: 1px solid var(--clz-line); flex: 0 0 auto; }
.clz-level { background: rgba(245, 181, 61, .18); color: var(--clz-accent); font-family: "Chakra Petch", sans-serif; }
/* 2.9.0-beta.47 : niveaux déjà en file — « 7 → 11 » (actuel → fin de file) */
.clz-level-queued { background: rgba(87, 211, 255, .16); color: var(--bs-info); white-space: nowrap; }
.clz-level-queued .bi { margin: 0 -.15rem; }
.clz-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clz-cost { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; font-variant-numeric: tabular-nums; }
.clz-cost-item.short { color: #ff7b7b; }
.clz-specs { color: #aab6d3; }
.min-w-0 { min-width: 0; }

/* Bannières par catégorie */
.clz-banner { position: relative; height: 120px; border-radius: .9rem; background-size: cover; background-position: center; border: 1px solid var(--clz-line); overflow: hidden; }
.clz-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 11, 24, .85), rgba(7, 11, 24, .15)); }
.clz-banner-text { position: absolute; left: 1.2rem; bottom: .9rem; z-index: 1; text-shadow: 0 2px 8px #000; }
.clz-hero { background: linear-gradient(135deg, rgba(40, 30, 110, .7), rgba(10, 30, 70, .7)); border: 1px solid var(--clz-line); }
.clz-planet-img { filter: drop-shadow(0 0 22px rgba(87, 211, 255, .35)); }

/* Tableaux */
.clz-table { --bs-table-bg: transparent; --bs-table-color: inherit; }
.clz-table > :not(caption) > * > * { border-bottom-color: var(--clz-line); }
.clz-table tr.clz-mine td { background: rgba(245, 181, 61, .08); }
.clz-galaxy tr.clz-deep td { background: rgba(87, 211, 255, .05); }
.clz-progress { height: .45rem; background: rgba(255, 255, 255, .08); }
.clz-progress .progress-bar { background: linear-gradient(90deg, var(--clz-cyan), var(--clz-accent)); }

/* Missions et catégories de messages */
.badge[class*="clz-mission-"], .badge[class*="clz-cat-"] { background: #34406a; }
.badge.clz-mission-attack, .badge.clz-mission-missile, .clz-cat-combat { background: #a8323c !important; }
.badge.clz-mission-espionage, .clz-cat-spy { background: #8a6d10 !important; }
.badge.clz-mission-transport, .badge.clz-mission-deploy, .clz-cat-fleet { background: #1e6d57 !important; }
.badge.clz-mission-expedition, .clz-cat-expedition { background: #2d5aa8 !important; }
.badge.clz-mission-colonize, .badge.clz-mission-recycle { background: #5b3aa6 !important; }
.clz-cat-alliance { background: #6d2e8a !important; } .clz-cat-player { background: #2f6e8f !important; }
.clz-messages .list-group-item { background: var(--clz-panel); border-color: var(--clz-line); }
.clz-messages .unread { box-shadow: inset 3px 0 0 var(--clz-accent); }
.clz-messages .unread .js-msg { font-weight: 600; }
/* 2.9.0-beta.13 : message non lu = en gras (objet, expéditeur et date ; rubrique du menu), normal dès qu'il est ouvert. */
.clz-messages .unread .js-msg, .clz-messages .unread .clz-msg-meta { font-weight: 700; color: #fff !important; }
.nav-link.clz-has-unread, .clz-tool.clz-has-unread { font-weight: 700; }
.clz-msg-text { white-space: normal; word-wrap: break-word; }
.clz-spy { background: rgba(0, 0, 0, .25); border-radius: .5rem; padding: .6rem; }

/* Divers */
.clz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.clz-code { letter-spacing: .3em; font-family: "Chakra Petch", monospace; }
.clz-qr { background: #fff; display: inline-block; padding: .6rem; border-radius: .5rem; }
.clz-qr img, .clz-qr svg { display: block; }
.clz-blink { animation: clz-blink 1.2s ease-in-out infinite; }
@keyframes clz-blink { 50% { opacity: .45; } }
.clz-sim-label { width: 60%; overflow: hidden; }
.form-control, .form-select { background-color: rgba(8, 13, 30, .85); border-color: var(--clz-line); }
.btn-warning { --bs-btn-bg: var(--clz-accent); --bs-btn-border-color: var(--clz-accent); }
.clz-forge-item { padding: .35rem .5rem; border: 1px solid var(--clz-line); border-radius: .6rem; background: rgba(6, 10, 22, .55); cursor: text; transition: border-color .2s; }
.clz-forge-item:focus-within { border-color: var(--clz-cyan); box-shadow: 0 0 .6rem rgba(87, 211, 255, .25); }
.clz-forge-num { width: 6.5rem; flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }
.js-captcha { cursor: pointer; max-width: 100%; height: auto; flex: 0 1 220px; background: #16223f; }
#r-cap { flex: 1 1 8rem; min-width: 8rem; font-size: 1.1rem; }
@media (prefers-reduced-motion: reduce) { .clz-blink { animation: none; } .clz-item { transition: none; } }

/* Illustrations fournies (WebP) */
.clz-hero { background-size: cover; background-position: center 55%; position: relative; overflow: hidden; min-height: 360px; display: flex; align-items: flex-end; }
.clz-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 11, 24, .92) 0%, rgba(7, 11, 24, .55) 55%, rgba(7, 11, 24, .1) 100%); }
.clz-hero-inner { position: relative; z-index: 1; max-width: 720px; text-shadow: 0 2px 10px #000; }
.clz-banner { background-position: center 62%; }
.clz-art-card { position: relative; border-radius: .8rem; overflow: hidden; border: 1px solid var(--clz-line); background: #0b1330; aspect-ratio: 4 / 3; }
.clz-art-card.clz-portrait { aspect-ratio: 1 / 1; }
.clz-art-card.clz-scene { aspect-ratio: 16 / 9; }
.clz-art-card > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.clz-art-card:hover > img { transform: scale(1.04); }
.clz-art-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: .45rem .6rem; background: linear-gradient(0deg, rgba(7, 11, 24, .92), rgba(7, 11, 24, 0)); font-family: "Chakra Petch", sans-serif; font-weight: 600; }
.clz-item-img { object-fit: cover; }
.clz-planet-img { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(87, 211, 255, .25), 0 0 40px rgba(87, 211, 255, .25); }
.clz-planet-mini { border-radius: 50%; object-fit: cover; vertical-align: middle; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.clz-res img { border-radius: 4px; object-fit: cover; }
.clz-cost-item img { border-radius: 3px; object-fit: cover; }
.clz-avatar { width: 64px; height: 64px; border-radius: .6rem; object-fit: cover; border: 1px solid var(--clz-line); }
.clz-error-img { max-width: 520px; width: 100%; }
@media (prefers-reduced-motion: reduce) { .clz-art-card > img { transition: none; } }

/* Fond d'écran fourni et accueil */
/* Fond d'écran nettement plus visible (voile allégé) ; les panneaux gardent leur propre fond pour la lisibilité. */
body.clz-public { background: linear-gradient(180deg, rgba(7, 11, 24, .38), rgba(7, 11, 24, .62) 70%), url("../img/scenes/fondclz.webp") center top / cover fixed, var(--clz-bg); }
body.clz-game, body.clz-admin { background: linear-gradient(180deg, rgba(7, 11, 24, .52), rgba(7, 11, 24, .70)), url("../img/scenes/fondclz.webp") center / cover fixed, var(--clz-bg); }
.clz-hero-main { position: relative; min-height: 420px; display: flex; align-items: center; }
.clz-hero-art { position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: min(78%, 980px); pointer-events: none; filter: drop-shadow(0 0 40px rgba(87, 211, 255, .15)); }
.clz-hero-main .clz-hero-inner { position: relative; z-index: 1; max-width: 560px; text-shadow: 0 2px 12px #000; background: radial-gradient(ellipse at 30% 50%, rgba(7, 11, 24, .75), rgba(7, 11, 24, 0) 75%); border-radius: 1rem; }
@media (max-width: 991.98px) { .clz-hero-art { position: static; transform: none; width: 100%; } .clz-hero-main { flex-direction: column-reverse; } }

/* Introduction vidéo */
.clz-intro { position: fixed; inset: 0; z-index: 2000; background: #000; opacity: 1; transition: opacity .8s ease; }
.clz-intro.fading { opacity: 0; }
.clz-intro-video { width: 100%; height: 100%; object-fit: cover; }
.clz-intro-ui { position: absolute; right: 1.2rem; bottom: 1.6rem; display: flex; gap: .5rem; }
.clz-intro-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .15); }
.clz-intro-progress div { height: 100%; width: 0; background: linear-gradient(90deg, var(--clz-cyan), var(--clz-accent)); }
body.clz-intro-open { overflow: hidden; }

/* Utilitaires remplaçant les attributs style (CSP style-src 'self' sans unsafe-inline) */
.clz-mw-26 { max-width:26rem; }
.clz-mw-14 { max-width:14rem; }
.clz-mw-18 { max-width:18rem; }
.clz-mw-12 { max-width:12rem; }
.clz-mw-40 { max-width:40rem; }
.clz-w-9 { width:9rem; }
.clz-w-7 { width:7.5rem; }
.clz-w-5 { width:5rem; }
.clz-w-6 { width:6rem; }
.clz-mw-36 { max-width:36rem; }

/* Décors des bannières (générés depuis public/assets/img/scenes et banners) */
.clz-scene-cliff_city { background-image: url("../img/scenes/cliff_city.webp"); }
.clz-scene-complex_q { background-image: url("../img/scenes/complex_q.webp"); }
.clz-scene-crystal_colony { background-image: url("../img/scenes/crystal_colony.webp"); }
.clz-scene-daily_life { background-image: url("../img/scenes/daily_life.webp"); }
.clz-scene-debris_field { background-image: url("../img/scenes/debris_field.webp"); }
.clz-scene-galaxy_orion { background-image: url("../img/scenes/galaxy_orion.webp"); background-position: center; } /* univers Orion */
.clz-scene-debris_q { background-image: url("../img/scenes/debris_q.webp"); }
.clz-scene-dome_city { background-image: url("../img/scenes/dome_city.webp"); }
.clz-scene-exploration_team { background-image: url("../img/scenes/exploration_team.webp"); }
.clz-scene-fondclz-small { background-image: url("../img/scenes/fondclz-small.webp"); }
.clz-scene-fondclz { background-image: url("../img/scenes/fondclz.webp"); }
.clz-scene-fondclz2 { background-image: url("../img/scenes/fondclz2.webp"); }
.clz-scene-lunar_base { background-image: url("../img/scenes/lunar_base.webp"); }
.clz-scene-orbital_works { background-image: url("../img/scenes/orbital_works.webp"); }
.clz-scene-research_center { background-image: url("../img/scenes/research_center.webp"); }
.clz-scene-research_q { background-image: url("../img/scenes/research_q.webp"); }
.clz-scene-shipyard_q { background-image: url("../img/scenes/shipyard_q.webp"); }
.clz-scene-teamwork { background-image: url("../img/scenes/teamwork.webp"); }
/* Bannières nettes des pages (2.8) : tranches 9:1 déjà cadrées sur leur sujet. */
.clz-scene-hd_overview { background-image: url("../img/scenes/hd_overview.webp"); }
.clz-scene-hd_resources { background-image: url("../img/scenes/hd_resources.webp"); }
.clz-scene-hd_buildings { background-image: url("../img/scenes/hd_buildings.webp"); }
.clz-scene-hd_research { background-image: url("../img/scenes/hd_research.webp"); }
.clz-scene-hd_shipyard { background-image: url("../img/scenes/hd_shipyard.webp"); }
.clz-scene-hd_defense { background-image: url("../img/scenes/hd_defense.webp"); }
.clz-scene-hd_fleet { background-image: url("../img/scenes/hd_fleet.webp"); }
.clz-scene-hd_galaxy { background-image: url("../img/scenes/hd_galaxy.webp"); }
.clz-scene-hd_expedition { background-image: url("../img/scenes/hd_expedition.webp"); }
.clz-scene-hd_officers { background-image: url("../img/scenes/hd_officers.webp"); }
.clz-scene-hd_merchant { background-image: url("../img/scenes/hd_merchant.webp"); }
.clz-scene-hd_alliance { background-image: url("../img/scenes/hd_alliance.webp"); }
.clz-scene-hd_highscore { background-image: url("../img/scenes/hd_highscore.webp"); }
.clz-scene-hd_messages { background-image: url("../img/scenes/hd_messages.webp"); }
.clz-scene-hd_techtree { background-image: url("../img/scenes/hd_techtree.webp"); }
.clz-scene-hd_simulator { background-image: url("../img/scenes/hd_simulator.webp"); }
.clz-scene-hd_notes { background-image: url("../img/scenes/hd_notes.webp"); }
.clz-scene-hd_options { background-image: url("../img/scenes/hd_options.webp"); }
.clz-scene-hd_moon { background-image: url("../img/scenes/hd_moon.webp"); }
.clz-scene-hd_forum { background-image: url("../img/scenes/hd_forum.webp"); }
[class*="clz-scene-hd_"].clz-banner { background-position: center; }
.clz-banner-alliance { background-image: url("../img/banners/alliance.svg"); }
.clz-banner-buildings { background-image: url("../img/banners/buildings.svg"); }
.clz-banner-defense { background-image: url("../img/banners/defense.svg"); }
.clz-banner-fleet { background-image: url("../img/banners/fleet.svg"); }
.clz-banner-galaxy { background-image: url("../img/banners/galaxy-orion.webp"); background-position: center; } /* univers Orion : galaxie spirale et constellation d’Orion */
.clz-banner-hero { background-image: url("../img/banners/hero.svg"); }
.clz-banner-highscore { background-image: url("../img/banners/highscore.svg"); }
.clz-banner-lost { background-image: url("../img/banners/lost.svg"); }
.clz-banner-messages { background-image: url("../img/banners/messages.svg"); }
.clz-banner-notes { background-image: url("../img/banners/notes.svg"); }
.clz-banner-options { background-image: url("../img/banners/options.svg"); }
.clz-banner-overview { background-image: url("../img/banners/overview.svg"); }
.clz-banner-research { background-image: url("../img/banners/research.svg"); }
.clz-banner-resources { background-image: url("../img/banners/resources.svg"); }
.clz-banner-shipyard { background-image: url("../img/banners/shipyard.svg"); }
.clz-banner-simulator { background-image: url("../img/banners/simulator.svg"); }
.clz-banner-techtree { background-image: url("../img/banners/techtree.svg"); }

/* Marché */
.clz-quote { background: rgba(255, 255, 255, .04); border: 1px solid var(--clz-line); }
.clz-spark polyline { fill: none; stroke: var(--clz-cyan); stroke-width: 1.6; stroke-linejoin: round; }

/* Simulateur */
.clz-sim-label { width: 9.5rem; overflow: hidden; }
.clz-sim-unit .js-sim-n { text-align: right; }
.clz-sim-bar { height: 1.6rem; }

/* Arbre des technologies */
.clz-tt-wrap { overflow: auto; max-height: 78vh; }
.clz-tt { display: block; }
.clz-tt-edge { fill: none; stroke: rgba(150, 170, 220, .28); stroke-width: 1.4; }
.clz-tt-edge.ok { stroke: rgba(90, 220, 150, .45); }
.clz-tt-node { cursor: pointer; }
.clz-tt-node rect { fill: rgba(10, 16, 36, .94); stroke: rgba(150, 170, 220, .45); stroke-width: 1.2; transition: stroke .15s ease; } /* fond sombre fixe : lisible sous tous les habillages */
.clz-tt-node text { fill: #eef2ff; font-size: 12px; font-family: inherit; pointer-events: none; paint-order: stroke; stroke: rgba(0, 0, 0, .35); stroke-width: 2px; }
.clz-tt-node.st-owned rect { stroke: #4ade80; }
.clz-tt-node.st-ok rect { stroke: var(--clz-cyan); }
.clz-tt-node.st-locked text { fill: #c3cbe0; }
.clz-tt-node.st-locked rect { stroke-dasharray: 4 3; }
.clz-tt-node:hover rect, .clz-tt-node:focus rect { stroke: var(--clz-accent); stroke-width: 2; outline: none; }
.clz-tt-node.hit rect { stroke: var(--clz-accent); stroke-width: 2.5; }
.clz-tt-node.faded { opacity: .45; }
.clz-tt.focus .clz-tt-node:not(.lit) { opacity: .4; } /* les autres nœuds restent lisibles */
.clz-tt.focus .clz-tt-edge { opacity: .12; }
.clz-tt.focus .clz-tt-edge.lit { opacity: 1; stroke: var(--clz-accent); stroke-width: 2.2; }
.clz-tt-node.sel rect { stroke: var(--clz-accent); stroke-width: 3; }
.clz-tt-dot { display: inline-block; width: .75rem; height: .75rem; border-radius: 3px; border: 2px solid; vertical-align: -1px; margin-left: .5rem; }
.clz-tt-dot.st-owned { border-color: #4ade80; } .clz-tt-dot.st-ok { border-color: var(--clz-cyan); } .clz-tt-dot.st-locked { border-color: #8a93ad; }
.clz-tt-panel { position: sticky; top: 4.5rem; }
/* Petits écrans : la fiche de l'élément choisi glisse en bas de l'écran au lieu de rester hors de vue sous l'arbre. */
@media (max-width: 1199.98px) {
    .clz-tt-panel.open { position: fixed; left: .5rem; right: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); top: auto; max-height: 55vh; overflow-y: auto; z-index: 1045; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .6); border: 1px solid var(--clz-accent); }
    .clz-tt-panel .js-tt-close { display: inline-flex; }
}
.clz-tt-panel .js-tt-close { display: none; }

/* Jauges de ressources : grands nombres (1.234.567.890.123) et remplissage des hangars */
.clz-res-body { display: inline-flex; flex-direction: column; line-height: 1.05; min-width: 4.5rem; }
.clz-res-val { white-space: nowrap; }
.clz-res-gauge { display: block; height: 3px; margin-top: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.clz-res-fill { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--clz-cyan), #4ade80); transition: width .8s linear; }
.clz-res-fill.warn { background: linear-gradient(90deg, #f5b53d, #ff9d3d); }
.clz-res-fill.full { background: #ff6b6b; }
@media (max-width: 575.98px) { .clz-res { font-size: .8rem; padding: .1rem .4rem; } .clz-res-body { min-width: 3.5rem; } }

/* Jauges de progression : secteurs obliques alternés qui défilent (mouvement continu) */
.clz-progress { height: .85rem; background: rgba(255, 255, 255, .07); border: 1px solid var(--clz-line); border-radius: 1rem; overflow: hidden; }
.clz-progress .progress-bar {
    position: relative; border-radius: 1rem; overflow: hidden;
    background-color: var(--clz-cyan);
    background-image:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .28) 0 10px, rgba(255, 255, 255, 0) 10px 20px),
        linear-gradient(90deg, var(--clz-cyan), var(--clz-accent));
    background-size: 28.28px 28.28px, 100% 100%;
    animation: clz-stripes .8s linear infinite;
    box-shadow: 0 0 .6rem rgba(87, 211, 255, .45);
    transition: width 1s linear;
    font-size: .68rem; font-weight: 700; color: #06101f; text-shadow: 0 0 2px rgba(255, 255, 255, .7);
}
.clz-progress .progress-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(-100%); animation: clz-shine 2.4s ease-in-out infinite; }
.clz-progress.research .progress-bar { background-color: #a78bfa; background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .28) 0 10px, rgba(255, 255, 255, 0) 10px 20px), linear-gradient(90deg, #818cf8, #c084fc); }
.clz-progress.yard .progress-bar { background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .28) 0 10px, rgba(255, 255, 255, 0) 10px 20px), linear-gradient(90deg, #f5b53d, #ff7a2f); }
.clz-progress.demolish .progress-bar { background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .3) 0 10px, rgba(0, 0, 0, 0) 10px 20px), linear-gradient(90deg, #ff6b6b, #f5b53d); }
@keyframes clz-stripes { from { background-position: 0 0, 0 0; } to { background-position: 28.28px 0, 0 0; } }
@keyframes clz-shine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .clz-progress .progress-bar, .clz-progress .progress-bar::after { animation: none; } }
.clz-progress-thin { height: .35rem; }

/* Mouvements de flotte (modèle OGameX) */
.clz-mv { --mv: var(--clz-cyan); background: var(--clz-panel); border: 1px solid var(--clz-line); border-left: 4px solid var(--mv); border-radius: .9rem; padding: .55rem .75rem; }
.clz-mv.hostile { --mv: #ff4d5e; border-color: rgba(255, 77, 94, .6); box-shadow: 0 0 1rem rgba(255, 77, 94, .25); animation: clz-hostile 1.6s ease-in-out infinite; }
.clz-mission-attack { --mv: #ff4d5e; } .clz-mission-acs { --mv: #ff7a45; } .clz-mission-transport { --mv: #4ade80; }
.clz-mission-deploy { --mv: #60a5fa; } .clz-mission-espionage { --mv: #facc15; } .clz-mission-colonize { --mv: #2dd4bf; }
.clz-mission-recycle { --mv: #fb923c; } .clz-mission-expedition { --mv: #c084fc; } .clz-mission-missile { --mv: #f43f5e; }
.clz-mv-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.clz-mv-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .55rem; border-radius: 1rem; font-size: .8rem; font-weight: 600; color: #06101f; background: var(--mv); }
.clz-mv-route { display: flex; align-items: center; gap: .6rem; }
.clz-mv-route > .clz-mv-end { flex: 0 0 11rem; max-width: 11rem; }
.clz-mv-route > .clz-mv-track { flex: 1 1 auto; }
.clz-mv-end { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.clz-mv-end.text-end { flex-direction: row-reverse; }
.clz-mv-label { min-width: 0; line-height: 1.15; font-size: .85rem; }
.clz-mv-planet { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; box-shadow: 0 0 .6rem rgba(255, 255, 255, .15); }
.clz-mv-void { display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .06); color: var(--mv); font-size: 1.1rem; }
.clz-mv-track { position: relative; height: 26px; }
.clz-mv-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%);
    background-image: linear-gradient(90deg, var(--mv) 50%, transparent 50%); background-size: 14px 2px; opacity: .45; animation: clz-dash 1s linear infinite; }
.clz-mv.dir-back .clz-mv-line { animation-direction: reverse; }
.clz-mv-done { position: absolute; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 2px; background: linear-gradient(90deg, transparent, var(--mv)); box-shadow: 0 0 .5rem var(--mv); }
.clz-mv.dir-back .clz-mv-done { background: linear-gradient(270deg, transparent, var(--mv)); }
.clz-mv-ship { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%) rotate(45deg); color: var(--mv); font-size: 1.15rem; filter: drop-shadow(0 0 .35rem var(--mv)); transition: left 1s linear; }
.clz-mv.dir-back .clz-mv-ship { transform: translate(-50%, -50%) rotate(-135deg); }
.clz-mv.dir-hold .clz-mv-ship { animation: clz-hold 1.4s ease-in-out infinite; }
.clz-mv-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .35rem; }
.clz-mv-details summary { cursor: pointer; }
.clz-mv-unit { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .4rem; border-radius: .4rem; background: rgba(255, 255, 255, .05); }
@keyframes clz-dash { from { background-position: 0 0; } to { background-position: 14px 0; } }
@keyframes clz-hold { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes clz-hostile { 0%, 100% { box-shadow: 0 0 .4rem rgba(255, 77, 94, .2); } 50% { box-shadow: 0 0 1.4rem rgba(255, 77, 94, .55); } }
@media (max-width: 575.98px) { .clz-mv-route > .clz-mv-end { flex-basis: 6.5rem; max-width: 6.5rem; } .clz-mv-label .small { display: none; } }
@media (prefers-reduced-motion: reduce) { .clz-mv-line, .clz-mv.hostile, .clz-mv.dir-hold .clz-mv-ship { animation: none; } .clz-mv-ship { transition: none; } }

/* Règles, CGU, pilori, panthéon */
.clz-doc h2 { font-size: 1.1rem; margin-top: 1.6rem; color: var(--clz-accent); font-family: "Chakra Petch", sans-serif; scroll-margin-top: 5rem; }
.clz-doc h2:first-of-type { margin-top: .4rem; }
.clz-doc li { margin-bottom: .35rem; }
.clz-toc a { white-space: nowrap; }
.clz-hof-top td { background: rgba(245, 181, 61, .06); }
.clz-hof-1 td { background: rgba(245, 181, 61, .14); }
.clz-mission-hold { --mv: #38bdf8; } .clz-mission-destroy { --mv: #e11d48; } .clz-mission-survey { --mv: #d97706; }

/* Bandeaux : haut de la vue « Colonie aux cristaux » en tête de page, bas de la même vue en pied de page */
/* En-tête : barre sobre du même ton que le pied de page, plus transparente (le décor reste visible dessous). */
.clz-topbar { background: linear-gradient(180deg, rgba(5, 9, 22, .62), rgba(5, 9, 22, .48)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--clz-line); box-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.clz-topbar-admin { background: linear-gradient(180deg, rgba(30, 16, 4, .62), rgba(12, 8, 4, .5)); }
.clz-footer-band { position: relative; margin-top: 2rem; padding: 1.1rem 1rem .9rem; text-align: center;
    background: linear-gradient(0deg, rgba(5, 9, 22, .45), rgba(5, 9, 22, .85)), url("../img/scenes/footer-strip.webp") center 62% / cover no-repeat;
    border-top: 1px solid var(--clz-line); box-shadow: 0 -2px 14px rgba(0, 0, 0, .4); }
.clz-footer-band .clz-meta { color: rgba(223, 230, 245, .72); }
.clz-footer-band a { color: rgba(140, 220, 255, .9); }
.clz-copyright { margin-top: .25rem; font-size: .8rem; letter-spacing: .04em; color: rgba(255, 255, 255, .58); text-shadow: 0 0 6px rgba(87, 211, 255, .35); }
/* 2.9.0-beta.53 : adresse de contact dans une autre couleur (or de l'accent), soulignée au survol */
.clz-copyright .clz-contact-mail { color: var(--clz-accent); text-decoration: none; text-shadow: 0 0 6px rgba(245, 181, 61, .35); overflow-wrap: anywhere; }
.clz-copyright .clz-contact-mail:hover, .clz-copyright .clz-contact-mail:focus { color: #ffd27a; text-decoration: underline; }

/* Accueil : encart vidéo (environ un quart de l'écran) */
.clz-home-video { position: relative; border-radius: 1rem; overflow: hidden; border: 1px solid var(--clz-line); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .55), 0 0 1.2rem rgba(87, 211, 255, .15); background: #000; aspect-ratio: 16 / 9; }
.clz-home-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.clz-home-video-ui { position: absolute; left: .6rem; right: .6rem; bottom: .6rem; display: flex; gap: .4rem; justify-content: flex-end; }
.clz-home-video-badge { position: absolute; left: .7rem; top: .6rem; font-size: .75rem; padding: .15rem .6rem; border-radius: 1rem; background: rgba(0, 0, 0, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .25); cursor: pointer; z-index: 2; transition: background .2s ease, border-color .2s ease; }
.clz-home-video-badge:hover, .clz-home-video-badge:focus-visible { background: rgba(0, 0, 0, .75); border-color: var(--clz-cyan); }
.clz-home-video-badge[aria-pressed="true"] { border-color: var(--clz-cyan); color: var(--clz-cyan); }
.clz-hero-split { position: relative; border-radius: 1.2rem; overflow: hidden; border: 1px solid var(--clz-line); }
.clz-hero-split::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 9, 22, .92) 0%, rgba(5, 9, 22, .6) 55%, rgba(5, 9, 22, .35) 100%), url("../img/scenes/fondclz2.webp") center / cover; z-index: 0; }
.clz-hero-split > .row { position: relative; z-index: 1; }

/* Page d'au revoir */
body.clz-bye { min-height: 100vh; background: linear-gradient(180deg, rgba(5, 9, 22, .15), rgba(5, 9, 22, .55)), url("../img/scenes/fondclz.webp") center / cover fixed, var(--clz-bg); }
.clz-bye-box { max-width: 40rem; margin: 18vh auto 0; padding: 2rem 2.2rem; text-align: center; border-radius: 1.2rem; background: rgba(7, 11, 24, .55); border: 1px solid var(--clz-line); backdrop-filter: blur(6px); box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .55); }
.clz-bye-box h1 { font-size: clamp(1.4rem, 3.2vw, 2.1rem); text-shadow: 0 0 1rem rgba(87, 211, 255, .45); }

/* Empire : planète mère, lune et colonies */
.clz-empire { display: flex; gap: .6rem; flex-wrap: wrap; }
.clz-empire .clz-empire-item { display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 6.2rem; padding: .4rem; border-radius: .8rem; text-decoration: none; color: inherit; border: 1px solid transparent; }
.clz-empire .clz-empire-item:hover, .clz-empire .clz-empire-item.current { border-color: var(--clz-accent); background: rgba(255, 255, 255, .04); }
.clz-empire img { width: 4.2rem; height: 4.2rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 .8rem rgba(87, 211, 255, .25); }
.clz-empire img.moon { width: 2.6rem; height: 2.6rem; margin-top: .8rem; margin-bottom: .8rem; }
.clz-empire .n { font-size: .75rem; text-align: center; line-height: 1.1; }

/* ===== Aperçus survolés (bulles de verre) ===== */
.clz-peek { position: fixed; z-index: 1095; width: min(21rem, 92vw); padding: .7rem .8rem; border-radius: .9rem; pointer-events: none;
    background: linear-gradient(160deg, rgba(20, 30, 62, .82), rgba(8, 12, 28, .9)); border: 1px solid rgba(87, 211, 255, .35);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .6), 0 0 1.2rem rgba(87, 211, 255, .15); backdrop-filter: blur(10px) saturate(140%);
    opacity: 0; transform: translateX(-12px) scale(.97); transition: opacity .18s ease, transform .18s ease; font-size: .82rem; }
.clz-peek.from-right { transform: translateX(12px) scale(.97); }
.clz-peek.in { opacity: 1; transform: none; }
.clz-peek-head { display: flex; gap: .6rem; align-items: center; margin-bottom: .35rem; }
.clz-peek-head img { width: 3.2rem; height: 3.2rem; border-radius: .6rem; object-fit: cover; box-shadow: 0 0 .6rem rgba(87, 211, 255, .3); }
.clz-peek-name { font-family: "Chakra Petch", sans-serif; font-weight: 700; color: var(--clz-accent); }
.clz-peek-cat { font-size: .72rem; color: #9fb0d8; text-transform: uppercase; letter-spacing: .06em; }
.clz-peek-desc { margin: 0 0 .45rem; color: #c9d4ee; }
.clz-peek-grid { display: grid; grid-template-columns: auto 1fr; gap: .12rem .7rem; padding-top: .4rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.clz-peek-grid .k { color: #8fa2cc; }
.clz-peek-grid .v { text-align: right; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.clz-peek-rapid { margin-top: .4rem; color: #fbbf24; font-size: .76rem; }
.clz-peek-missing { margin-top: .4rem; color: #ff8a8a; font-size: .76rem; }

/* ===== Tour de contrôle : panneaux qui arrivent par la gauche, la droite, le bas ===== */
.clz-in-left, .clz-in-right, .clz-in-up { opacity: 0; }
.clz-in-left.go { animation: clz-from-left .7s cubic-bezier(.2, .8, .2, 1) both; }
.clz-in-right.go { animation: clz-from-right .7s cubic-bezier(.2, .8, .2, 1) both; }
.clz-in-up.go { animation: clz-from-up .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes clz-from-left { from { opacity: 0; transform: translateX(-60px); filter: blur(3px); } 60% { filter: none; } to { opacity: 1; transform: none; } }
@keyframes clz-from-right { from { opacity: 0; transform: translateX(60px); filter: blur(3px); } 60% { filter: none; } to { opacity: 1; transform: none; } }
@keyframes clz-from-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
/* Cadre HUD : coins lumineux et balayage d'écran */
.clz-hud { position: relative; }
.clz-hud::before, .clz-hud::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; border: 2px solid var(--clz-cyan); opacity: .85; }
.clz-hud::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: .8rem; }
.clz-hud::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: .8rem; }
.clz-scan { position: relative; overflow: hidden; }
/* 2.9.0-beta.26 : l'ovale lumineux de la carte de la planète (.clz-scan::after) est retiré. Il partageait le pseudo-élément
   ::after du cadre « HUD » (.clz-hud::after) : les deux règles se mélangeaient en un petit croissant de 18 px qui clignotait
   en haut à gauche, et le coin lumineux du bas à droite du cadre disparaissait. Le coin du cadre est rétabli. */

/* ===== Menu latéral animé ===== */
.clz-menu .nav-link { position: relative; transition: background .15s ease, color .15s ease, padding-left .15s ease; }
.clz-menu .nav-link::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; border-radius: 2px; background: var(--clz-accent); transform: scaleY(0); transition: transform .18s ease; }
.clz-menu .nav-link:hover::before, .clz-menu .nav-link.active::before { transform: scaleY(1); }
.clz-menu .nav-link:hover { padding-left: 1.05rem; color: #fff; }
.clz-menu .nav-link:hover i { animation: clz-icon-pop .35s ease; }
.clz-menu .nav-link.active i { text-shadow: 0 0 .5rem var(--clz-cyan); }
.clz-menu-in { animation: clz-from-left .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes clz-icon-pop { 50% { transform: scale(1.35) rotate(-8deg); } }

/* ===== Fenêtres modales du jeu ===== */
.modal-content.clz-modal { background: linear-gradient(160deg, rgba(20, 30, 62, .95), rgba(8, 12, 28, .97)); border: 1px solid rgba(87, 211, 255, .35); border-radius: 1rem; box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .65), 0 0 1.5rem rgba(87, 211, 255, .12); }
.modal.fade .modal-dialog { transform: translateY(-20px) scale(.97); transition: transform .25s ease; }
.modal.show .modal-dialog { transform: none; }
.clz-help-btn { width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.clz-step img { max-height: 11rem; width: 100%; object-fit: cover; border-radius: .8rem; }
.clz-step .clz-band-frame > img { aspect-ratio: 4.4 / 1; height: auto; border-radius: 0; }
.clz-step-todo { background: rgba(245, 181, 61, .07); border-left: 3px solid var(--clz-accent); border-radius: .4rem; padding: .4rem .7rem; }
.clz-step-todo ul { padding-left: 1.1rem; }
.clz-dots .js-w-dot { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(255, 255, 255, .25); display: inline-block; }
.clz-dots .js-w-dot.active { background: var(--clz-accent); }

/* ===== Guide ===== */
.clz-guide-toc a { display: block; padding: .3rem .6rem; border-radius: .5rem; text-decoration: none; color: inherit; }
.clz-guide-toc a:hover { background: rgba(255, 255, 255, .06); }
.clz-guide h2 { scroll-margin-top: 5rem; }
.clz-guide figure img { width: 100%; aspect-ratio: 4.4 / 1; height: auto; max-height: 16rem; object-fit: cover; object-position: center; border-radius: .8rem; } /* tranches 1672 px de large : nettes même en grand */
/* Bandes du guide : même cadre et mêmes effets que les cartes illustrées (respiration, avancée au survol), l'image reste dans son cadre. */
.clz-band-frame { position: relative; overflow: hidden; border-radius: .8rem; border: 1px solid var(--clz-line); background: #0b1330; }
.clz-band-frame > img { display: block; border-radius: 0; transition: transform .4s; }
.clz-band:hover .clz-band-frame > img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .clz-band-frame > img { transition: none; } .clz-band:hover .clz-band-frame > img { transform: none; } }
.clz-guide .clz-tip { border-left: 3px solid var(--clz-cyan); padding: .4rem .8rem; background: rgba(87, 211, 255, .06); border-radius: .4rem; }

@media (prefers-reduced-motion: reduce) {
    .clz-in-left, .clz-in-right, .clz-in-up { opacity: 1; }
    .clz-menu-in { animation: none; }
    .clz-peek { transition: none; }
}
.clz-banner { position: relative; }
.clz-banner-help { position: absolute; top: .6rem; right: .6rem; background: rgba(0, 0, 0, .35); }

/* ===================== Animations des objets du jeu ===================== */
/* Planètes : rotation lente ; lunes : rotation inverse ; globe ombré (terminateur jour/nuit) */
.clz-globe { position: relative; overflow: hidden; }
.clz-globe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 38%), radial-gradient(circle at 72% 72%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 60%);
    box-shadow: inset -18px -14px 40px rgba(0, 0, 0, .55), inset 6px 6px 22px rgba(120, 200, 255, .18); }
@keyframes clz-spin { to { transform: rotate(360deg); } }
/* Lune en orbite autour de la planète (vue d'ensemble) */
.clz-orbit-stage { position: relative; display: inline-block; padding: 18px; }
.clz-orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(200, 220, 255, .18); animation: clz-spin 24s linear infinite; pointer-events: none; }
.clz-orbit-moon { position: absolute; top: -6px; left: 50%; margin-left: -23px; width: 46px; height: 46px; box-shadow: -6px 4px 14px rgba(0, 0, 0, .6), 0 0 10px rgba(180, 200, 255, .25); }
/* Vaisseaux : flottement en vol, poussée au survol, lueur de réacteur */
.clz-anim-ship { animation: clz-hover-float 4.5s ease-in-out infinite; transition: transform .35s ease, filter .35s ease; }
.clz-anim-heavy { animation-duration: 7s; }
.clz-anim-ship:hover, .clz-item:hover .clz-anim-ship { animation-play-state: paused; transform: translateX(6px) rotate(-3deg) scale(1.06); filter: drop-shadow(-8px 0 10px rgba(87, 211, 255, .65)); }
@keyframes clz-hover-float { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-3px) rotate(-1.2deg); } 75% { transform: translateY(2px) rotate(1deg); } }
/* Satellite : lente rotation ; défenses : visée ; missiles : tension ; boucliers : pulsation */
.clz-anim-sat { animation: clz-spin 30s linear infinite; }
.clz-anim-defense { transition: transform .3s ease, filter .3s ease; }
.clz-item:hover .clz-anim-defense, .clz-anim-defense:hover { transform: rotate(-4deg) scale(1.06); filter: drop-shadow(0 0 8px rgba(255, 120, 90, .55)); }
.clz-anim-missile { animation: clz-shake 5s ease-in-out infinite; }
@keyframes clz-shake { 0%, 90%, 100% { transform: none; } 92% { transform: translateY(-2px); } 94% { transform: translateY(1px); } 96% { transform: translateY(-1px); } }
.clz-anim-dome { animation: clz-dome 3.5s ease-in-out infinite; }
@keyframes clz-dome { 0%, 100% { filter: drop-shadow(0 0 2px rgba(87, 211, 255, .2)); } 50% { filter: drop-shadow(0 0 12px rgba(87, 211, 255, .75)); } }
/* Bâtiments : léger soulèvement et lumière au survol ; recherches : reflet chatoyant */
.clz-anim-building { transition: transform .35s ease, filter .35s ease; }
.clz-item:hover .clz-anim-building, .clz-anim-building:hover { transform: translateY(-3px) scale(1.05); filter: brightness(1.15) drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.clz-anim-research { animation: clz-research 6s ease-in-out infinite; }
.clz-item:hover .clz-anim-research { animation-duration: 1.6s; }
@keyframes clz-research { 0%, 100% { filter: hue-rotate(0deg) brightness(1); } 50% { filter: hue-rotate(18deg) brightness(1.15); } }
/* Ressources de la barre du haut */
.clz-anim-res { transition: transform .3s ease; }
.clz-res:hover .clz-anim-res { transform: scale(1.25) rotate(-8deg); }
.clz-anim-res-energy { animation: clz-energy 2.8s ease-in-out infinite; }
@keyframes clz-energy { 0%, 100% { filter: drop-shadow(0 0 1px rgba(255, 210, 61, .3)); } 50% { filter: drop-shadow(0 0 7px rgba(255, 210, 61, .9)); } }
.clz-anim-res-dark_matter { animation: clz-spin 14s linear infinite; }
.clz-anim-res-crystal { animation: clz-energy 4s ease-in-out infinite; }
/* Fiche flottante et bulle : l'illustration s'anime aussi */
.clz-float-body img.clz-anim-ship { max-width: 100%; }
.clz-peek-head img.ship { animation: clz-hover-float 4.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .clz-anim-planet, .clz-anim-moon, .clz-orbit, .clz-anim-ship, .clz-anim-sat, .clz-anim-missile, .clz-anim-dome, .clz-anim-research,
    .clz-anim-res-energy, .clz-anim-res-dark_matter, .clz-anim-res-crystal, .clz-peek-head img.ship { animation: none; }
}
.clz-orbit-stage::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(87, 211, 255, .12); box-shadow: 0 0 22px rgba(87, 211, 255, .12); pointer-events: none; }
.clz-peek-head img.clz-anim-ship, .clz-peek-head img.clz-anim-research, .clz-peek-head img.clz-anim-sat, .clz-peek-head img.clz-anim-dome { animation-duration: 3s; }

/* Synchronisation temporelle */
.clz-mv-sync { background: rgba(150, 90, 255, .22); border: 1px solid rgba(190, 150, 255, .55); color: #e5d7ff; animation: clz-sync-pulse 2.4s ease-in-out infinite; }
@keyframes clz-sync-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(170, 120, 255, 0); } 50% { box-shadow: 0 0 .7rem rgba(170, 120, 255, .65); } }
.clz-chrono { border-color: rgba(170, 120, 255, .45); box-shadow: 0 0 1rem rgba(150, 90, 255, .15); }
.clz-effect { padding: .3rem .5rem; border-radius: .5rem; background: rgba(87, 211, 255, .06); border-left: 2px solid var(--clz-cyan); }
.clz-peek-effect { margin: .1rem 0 .45rem; padding: .3rem .5rem; border-radius: .5rem; background: rgba(87, 211, 255, .08); color: #c9d4ee; font-size: .78rem; }
.clz-peek-effect .next { color: var(--clz-cyan); }

/* ===== Support : couleurs d'urgence et de statut ===== */
.clz-urg-low { background: #64748b; color: #fff; } .clz-urg-normal { background: #2563eb; color: #fff; }
.clz-urg-high { background: #f59e0b; color: #1b1300; } .clz-urg-critical { background: #dc2626; color: #fff; animation: clz-sync-pulse 1.8s ease-in-out infinite; }
.clz-ticket-row { border-left: 4px solid transparent; }
.clz-ticket-row.urg-low td:first-child, .clz-ticket-row.urg-low { border-left-color: #64748b; }
.clz-ticket-row.urg-normal td:first-child, .clz-ticket-row.urg-normal { border-left-color: #3b82f6; }
.clz-ticket-row.urg-high td:first-child, .clz-ticket-row.urg-high { border-left-color: #f59e0b; background: rgba(245, 158, 11, .06); }
.clz-ticket-row.urg-critical td:first-child, .clz-ticket-row.urg-critical { border-left-color: #ef4444; background: rgba(239, 68, 68, .10); }
.clz-ticket-card.urg-critical { border-color: rgba(239, 68, 68, .6); } .clz-ticket-card.urg-high { border-color: rgba(245, 158, 11, .5); }
.clz-status-open { background: #0ea5e9; } .clz-status-waiting { background: #a855f7; } .clz-status-answered { background: #16a34a; } .clz-status-closed { background: #475569; }
.clz-thread { max-height: 26rem; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; }
.clz-msg { max-width: 85%; padding: .5rem .75rem; border-radius: .8rem; background: rgba(255, 255, 255, .05); border: 1px solid var(--clz-line); align-self: flex-start; }
.clz-msg.staff { align-self: flex-end; background: rgba(87, 211, 255, .09); border-color: rgba(87, 211, 255, .35); }
.clz-msg-new { animation: clz-from-up .35s ease both; }
/* Support 2.9.0-beta.32 : notes internes, captures, délai d'attente, non lus */
.clz-msg.internal { background: rgba(245, 158, 11, .08); border: 1px dashed rgba(245, 158, 11, .55); }
.clz-msg-files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.clz-msg-files img { height: 7.5rem; width: auto; max-width: 100%; object-fit: cover; border-radius: .45rem; border: 1px solid var(--clz-line); background: rgba(0, 0, 0, .25); }
.clz-msg-files a:hover img, .clz-msg-files a:focus-visible img { border-color: rgba(87, 211, 255, .7); }
.clz-shots-preview { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.clz-shots-preview:empty { display: none; }
.clz-shot { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: .1rem; }
.clz-shot img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: .4rem; border: 1px solid var(--clz-line); }
.clz-shot .btn-close { position: absolute; top: -.35rem; right: -.35rem; width: .7rem; height: .7rem; padding: .25rem; background-color: rgba(220, 38, 38, .9); border-radius: 50%; opacity: 1; }
form.clz-internal textarea { border-color: rgba(245, 158, 11, .7); background-color: rgba(245, 158, 11, .06); }
.clz-wait-ok { background: #16a34a; color: #fff; } .clz-wait-warn { background: #f59e0b; color: #1b1300; } .clz-wait-late { background: #dc2626; color: #fff; }
.clz-dot-new { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #facc15; box-shadow: 0 0 .4rem rgba(250, 204, 21, .8); vertical-align: middle; }
.clz-ticket-row.clz-unread td:nth-child(2), .list-group-item.clz-unread .small:first-of-type { font-weight: 600; }
.list-group-item.clz-unread { background: rgba(250, 204, 21, .06) !important; }
.clz-ticket-stats .card { transition: border-color .15s; } .clz-ticket-stats a.card:hover { border-color: rgba(87, 211, 255, .5); }
.clz-ticket-closed { background: rgba(71, 85, 105, .35); color: var(--bs-body-color); }
/* ===== Discussion d'alliance ===== */
.clz-achat-log { height: 18rem; overflow-y: auto; font-size: .85rem; display: flex; flex-direction: column; gap: .15rem; }
.clz-achat-line { position: relative; padding: .1rem .25rem; border-radius: .3rem; animation: clz-from-up .25s ease both; }
.clz-achat-line .t { color: #7f8db3; font-size: .75rem; } .clz-achat-line .u { color: var(--clz-cyan); font-weight: 600; }
.clz-achat-line.mine .u { color: var(--clz-accent); } .clz-achat-line.removed { color: #7f8db3; }
.clz-achat-tools { display: none; margin-left: .3rem; } .clz-achat.moderator .clz-achat-line:hover .clz-achat-tools { display: inline-flex; gap: .3rem; }
.clz-achat-pin { padding: .4rem .75rem; background: rgba(255, 190, 60, .12); border-bottom: 1px solid rgba(255, 190, 60, .35); font-size: .85rem; }

/* ===================== Respiration des illustrations ===================== */
/* Mouvement relevé image par image sur les planches animées « ogame_like_pack_animations_subtiles » :
   zoom centré de 0,9 % en 0,4 s, palier de 0,2 s, retour en 0,4 s, repos de 1 s (boucle de 2 s).
   Appliqué aux illustrations d'origine en pleine définition plutôt qu'à des extraits vidéo découpés.
   Propriété « scale », indépendante de « transform » : l'effet se cumule avec les zooms de survol,
   la rotation des planètes et les autres animations, sans jamais les remplacer.
   Seules les grandes illustrations respirent (sur une vignette de 72 px, 0,9 % ne se verrait pas). */
:root { --clz-breath: 2s; }
@keyframes clz-breath { 0%, 50%, 100% { scale: 1; } 20%, 30% { scale: 1.009; } }
/* 01 Personnages et IA, 02 Ressources, 05 Bâtiments et lieux : cartes illustrées (accueil, ressources, officiers) */
.clz-art-card > img,
/* Guide du joueur et visite de bienvenue */
.clz-guide figure img, .clz-step img { animation: clz-breath var(--clz-breath) ease-in-out infinite; }
/* 03 Planètes et lunes : la grande planète de la vue d'ensemble garde sa rotation et respire en plus */

/* 06 Décors et fonds d'écran : immobiles (leur respiration faisait onduler le bord du visuel de l'accueil). */
/* Décalage d'une carte à l'autre : les illustrations d'une même rangée ne respirent pas à l'unisson */
.col:nth-child(4n+2) .clz-art-card > img, .clz-guide figure:nth-of-type(4n+2) img { animation-delay: -.5s; }
.col:nth-child(4n+3) .clz-art-card > img, .clz-guide figure:nth-of-type(4n+3) img { animation-delay: -1s; }
.col:nth-child(4n+4) .clz-art-card > img, .clz-guide figure:nth-of-type(4n+4) img { animation-delay: -1.5s; }
@media (prefers-reduced-motion: reduce) {
    .clz-art-card > img, .clz-guide figure img, .clz-step img { animation: none; }
    .clz-planet-img { animation: none; }
}

/* ===================== Globes : planètes et lunes qui tournent sur elles-mêmes ===================== */
/* La texture raccordable défile horizontalement dans un disque ; l'axe est incliné (≈ 18°), un reflet et une face
   nocturne fixes donnent le relief d'une sphère éclairée par son étoile. */
/* Boutique */
.clz-shop-pack { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .clz-shop-pack:hover { transform: translateY(-3px); }
.clz-shop-pack:has(input:checked) { box-shadow: 0 0 0 2px var(--clz-cyan), 0 0 1rem rgba(87, 211, 255, .35); }
.clz-shop-best { border-color: rgba(255, 210, 61, .6); }
/* Pack indisponible : mêmes fines barres obliques bleutées que les actions impossibles du jeu, non sélectionnable. */
.card.clz-card.clz-shop-off { background-image: repeating-linear-gradient(135deg, rgba(120, 200, 255, .30) 0 1px, transparent 1px 6px); background-color: rgba(30, 60, 100, .25);
    border-color: rgba(120, 200, 255, .35); color: #9fb4cf; cursor: not-allowed; filter: saturate(.7); }
.card.clz-card.clz-shop-off:hover { transform: none; }
.card.clz-card.clz-shop-off .text-info, .card.clz-card.clz-shop-off strong { color: #9fb4cf !important; }
.card.clz-card.clz-shop-off img { opacity: .55; }
.clz-shop-off-label { color: #9fb4cf; font-style: italic; }

/* Nourriture, eau, colons : nouvelles ressources (production à venir) */
.clz-res-food .clz-res-val { color: #ffd98a; } .clz-res-water .clz-res-val { color: #7fd6ff; } .clz-res-colonists .clz-res-val { color: #c9f0b8; }
.clz-res-unit { font-size: .72em; font-weight: 500; opacity: .75; }

/* Dernières IP de connexion (administration) : anciennes discrètes, la dernière en évidence */
.clz-ip-old { color: #8aa5c8; } .clz-ip-last { color: #ffd23d; font-weight: 700; text-decoration: none; } .clz-ip-last:hover { text-decoration: underline; }

/* Astres en 3D : canevas calculé par planet3d.js (double définition), sphère de la planche en repli dessous. */
.clz-globe3d { position: relative; display: inline-block; flex: none; border-radius: 50%; vertical-align: middle; }
.clz-globe3d canvas.clz-planet3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
/* Planète à anneaux : le canevas déborde du disque (×2,4) pour dessiner les anneaux fixes autour. */
.clz-globe3d canvas.clz-planet3d[data-rings] { width: 190%; height: 190%; left: -45%; top: -45%; }
.clz-globe3d-still { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.gl-20 { width: 20px; height: 20px; } .gl-28 { width: 28px; height: 28px; } .gl-40 { width: 40px; height: 40px; } .gl-46 { width: 46px; height: 46px; } .gl-64 { width: 64px; height: 64px; } .gl-200 { width: 200px; height: 200px; }
.clz-orbit-moon.clz-globe3d { position: absolute; top: -6px; left: 50%; margin-left: -23px; }
.gl-20 { width: 20px; height: 20px; font-size: 4px; } .gl-28 { width: 28px; height: 28px; font-size: 5px; } .gl-40 { width: 40px; height: 40px; font-size: 7px; }
.gl-46 { width: 46px; height: 46px; font-size: 8px; } .gl-64 { width: 64px; height: 64px; font-size: 11px; } .gl-200 { width: 200px; height: 200px; font-size: 32px; }
.clz-empire .clz-globe3d.gl-64 { margin: 0 auto; } .clz-empire .clz-globe3d.moon { margin: .8rem auto; }
.clz-orbit-moon.clz-globe3d { position: absolute; top: -6px; left: 50%; margin-left: -23px; }


/* ===================== Pastille du joueur (avatar ou initiale) ===================== */
.clz-pill { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; flex: none; font-family: "Chakra Petch", sans-serif; font-weight: 700; color: #0b1020;
    background: linear-gradient(135deg, var(--clz-accent), var(--clz-cyan)); box-shadow: 0 0 0 2px rgba(255, 255, 255, .15), 0 0 .8rem rgba(87, 211, 255, .35); }
.clz-pill img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clz-pill-sm { width: 32px; height: 32px; font-size: 1rem; } .clz-pill-lg { width: 96px; height: 96px; font-size: 2.6rem; }
/* Initiale : centrée optiquement (la police a une hauteur de ligne et un décalage de base propres) */
.clz-pill > span, .clz-pill-initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; line-height: 1; letter-spacing: 0; text-align: center; }
.clz-pill-link { display: inline-flex; border-radius: 50%; transition: transform .15s ease, box-shadow .15s ease; }
.clz-pill-link:hover, .clz-pill-link:focus-visible { transform: scale(1.08); box-shadow: 0 0 0 2px var(--clz-accent); }
.clz-avatar-forms { max-width: 26rem; }

/* ===================== Pied de page collé en bas, bordure sombre transparente (toutes les pages) ===================== */
/* La page occupe toute la hauteur de l'écran ; le contenu s'étire, le pied de page reste tout en bas, dans une
   bordure sombre et transparente qui laisse voir le fond d'écran. Même traitement pour l'accueil, le jeu et l'administration. */
body.clz-public, body.clz-game, body.clz-admin, body.clz-bye { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.clz-public > main, body.clz-game > .clz-shell, body.clz-admin > .clz-shell, body.clz-bye > main { flex: 1 0 auto; }
body.clz-game > .clz-shell, body.clz-admin > .clz-shell { min-height: 0; }
body.clz-public > .clz-footer-band, body.clz-game > .clz-footer-band, body.clz-admin > .clz-footer-band, body.clz-bye > .clz-footer-band { flex-shrink: 0; margin-top: 0; padding: .8rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(4, 7, 16, .62); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%);
    border-top: 1px solid rgba(140, 200, 255, .18); box-shadow: 0 -6px 24px rgba(0, 0, 0, .45); }

/* ===================== Univers en cartes « nébuleuse » ===================== */
.clz-universe-card { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden; text-decoration: none; color: #fff;
    border: 1px solid rgba(140, 200, 255, .25); box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .5); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.clz-universe-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clz-universe-card:hover, .clz-universe-card:focus-visible { transform: translateY(-3px); border-color: rgba(255, 210, 61, .7); box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .6), 0 0 1.4rem rgba(255, 210, 61, .25); outline: none; }
.clz-universe-name { position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem 1rem; font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 1.25rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)); text-shadow: 0 0 .6rem rgba(0, 0, 0, .9); }
.clz-universe-badge { position: absolute; top: .6rem; right: .6rem; padding: .15rem .5rem; border-radius: .5rem; font-size: .75rem; background: rgba(4, 7, 16, .7); color: #ffd23d; border: 1px solid rgba(255, 210, 61, .5); }
/* Fenêtre flottante : fond sombre transparent, informations en couleurs vives qui se détachent */
.clz-universe-peek { position: absolute; inset: .6rem; display: flex; flex-direction: column; gap: .45rem; padding: .8rem 1rem; border-radius: .8rem;
    background: rgba(4, 7, 16, .78); backdrop-filter: blur(6px) saturate(130%); -webkit-backdrop-filter: blur(6px) saturate(130%);
    border: 1px solid rgba(87, 211, 255, .45); box-shadow: 0 0 1.4rem rgba(87, 211, 255, .2);
    opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.clz-universe-card:hover .clz-universe-peek, .clz-universe-card:focus-visible .clz-universe-peek { opacity: 1; transform: none; }
.clz-up-name { font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 1.15rem; color: #ffd23d; text-shadow: 0 0 .6rem rgba(255, 210, 61, .45); }
.clz-up-grid { display: grid; grid-template-columns: auto auto; gap: .05rem 1rem; font-size: .82rem; }
.clz-up-grid .k, .clz-up-matter .k { color: #9fe8ff; }
.clz-up-grid .v { color: #ffffff; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.clz-up-matter { display: grid; grid-template-columns: auto auto; gap: 0 1rem; font-size: .82rem; padding-top: .35rem; border-top: 1px solid rgba(255, 255, 255, .15); }
.clz-up-matter .v { color: #7dffb5; font-weight: 700; text-align: right; }
.clz-up-matter .d { grid-column: 1 / -1; color: #d7deef; font-size: .74rem; }
.clz-up-go { margin-top: auto; color: #ffd23d; font-weight: 600; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .clz-universe-card, .clz-universe-peek { transition: none; } }

/* ===================== Bandeau des ressources : plus grand, plus lisible ===================== */
/* Icônes de 36 px avec un halo, valeurs en gros caractères gras à lueur de leur couleur : on les voit d'un coup d'œil. */
.clz-topbar { min-height: 68px; }
.clz-resbar.gap-1 { gap: .5rem !important; }
.clz-topbar .clz-res { gap: .55rem; padding: .35rem .8rem .35rem .45rem; border-radius: .7rem; font-size: 1.12rem; font-weight: 700;
    background: rgba(6, 10, 22, .78); border-color: rgba(140, 200, 255, .28); box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 4px 14px rgba(0, 0, 0, .45); }
.clz-topbar .clz-res img { width: 36px; height: 36px; border-radius: 7px; filter: drop-shadow(0 0 6px rgba(120, 190, 255, .45)); }
.clz-topbar .clz-res-body { min-width: 6.2rem; }
.clz-topbar .clz-res-val { font-family: "Chakra Petch", "Segoe UI", sans-serif; font-size: 1.22rem; letter-spacing: .02em; line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 10px currentColor; }
.clz-topbar .clz-res-gauge { height: 4px; margin-top: 4px; }
@media (max-width: 991.98px) { .clz-topbar .clz-res { font-size: 1rem; padding: .25rem .6rem .25rem .35rem; } .clz-topbar .clz-res img { width: 30px; height: 30px; } .clz-topbar .clz-res-val { font-size: 1.05rem; } .clz-topbar .clz-res-body { min-width: 5rem; } }
@media (max-width: 575.98px) { .clz-topbar .clz-res { font-size: .9rem; gap: .35rem; } .clz-topbar .clz-res img { width: 24px; height: 24px; } .clz-topbar .clz-res-val { font-size: .95rem; } .clz-topbar .clz-res-body { min-width: 3.8rem; } }
.clz-verify { max-width: 540px; }

/* Vue orbitale 3D du système (galaxy3d.js) : étoile, orbites, planètes, lunes, débris, espace lointain + carte de la galaxie */
.clz-orbital-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; }
.clz-orbital { position: relative; overflow: hidden; min-height: 260px; padding: 0; cursor: grab; touch-action: pan-y;
    background: radial-gradient(ellipse at 50% 52%, rgba(40, 30, 90, .55), rgba(6, 9, 22, .95) 70%); }
.clz-orbital:active { cursor: grabbing; }
.clz-orbital-canvas { position: absolute; inset: 0; display: block; }
.clz-orbital-layer { position: absolute; inset: 0; }
.clz-orb { position: absolute; left: 0; top: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: box-shadow .2s ease; }
.clz-orb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; pointer-events: none; }
/* Bulle de chaque astre : modèle réduit de la planète (moteur 3D), cerclé d'un fin liseré */
.clz-orb-bubble { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba(140, 200, 255, .35), 0 0 8px rgba(87, 211, 255, .18); pointer-events: none; }
.clz-orb-bubble canvas.clz-planet3d { position: absolute; inset: 0; width: 100%; height: 100%; }
.clz-orb-bubble canvas.clz-planet3d[data-rings] { width: 190%; height: 190%; left: -45%; top: -45%; }
.clz-orb-bubble img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.clz-orb-mine .clz-orb-bubble:not(.moon) { box-shadow: 0 0 0 1.5px rgba(255, 210, 61, .85), 0 0 10px rgba(255, 210, 61, .35); }
.clz-orb-free { background: rgba(140, 175, 230, .18); border: 1px dashed rgba(140, 175, 230, .55); }
.clz-orb-moon { position: absolute; width: 40%; height: 40%; right: -30%; top: -18%; }
.clz-orb-label { position: absolute; left: 50%; top: 104%; transform: translateX(-50%); white-space: nowrap; font-size: .68rem; color: rgba(207, 224, 255, .78); pointer-events: none; text-shadow: 0 1px 2px #000; }
.clz-orb-free .clz-orb-label { display: none; }
.clz-orb.active, .clz-orb:focus-visible { box-shadow: 0 0 0 2px #57d3ff, 0 0 14px rgba(87, 211, 255, .7); outline: none; }
.clz-orb.active .clz-orb-label { color: #fff; font-weight: 600; }
.clz-orb-mine .clz-orb-label { color: #ffd23d; }
.clz-orb-deep { position: absolute; transform: translate(-50%, -50%); z-index: 50000; padding: .1rem .6rem; border-radius: 1rem; font-size: .72rem; color: #c9bfff; background: rgba(40, 30, 90, .7); border: 1px dashed rgba(170, 150, 255, .6); cursor: pointer; }
.clz-orb-deep.active, .clz-orb-deep:focus-visible { color: #fff; border-style: solid; box-shadow: 0 0 12px rgba(170, 150, 255, .7); outline: none; }
.clz-orbital-ui { position: absolute; left: .7rem; right: .7rem; bottom: .5rem; display: flex; align-items: center; gap: .8rem; pointer-events: none; z-index: 99999; }
.clz-orbital-ui .btn { pointer-events: auto; }
.clz-orbital-ui .js-orbital-zoom:first-of-type { margin-left: auto; }
.clz-orbital-title { font-family: "Chakra Petch", sans-serif; font-weight: 600; color: #cfe0ff; }
.clz-orbital-hint { color: rgba(207, 224, 255, .55); }
.clz-orbital-side { display: flex; flex-direction: column; gap: .6rem; padding: .7rem; }
.clz-galaxy-map { width: 100%; height: auto; aspect-ratio: 1; border-radius: .6rem; background: rgba(6, 9, 22, .8); cursor: crosshair; }
.clz-orbital-panel { font-size: .9rem; }
.clz-orbital-line { display: flex; align-items: flex-start; gap: .3rem; padding: .25rem 0; border-bottom: 1px solid rgba(140, 175, 230, .12); }
.clz-orbital-line .text-secondary { min-width: 5.5rem; }
.clz-orbital-val { flex: 1; display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.clz-galaxy tr.clz-row-focus > td { background: rgba(87, 211, 255, .08); }
@media (max-width: 991px) { .clz-orbital-wrap { grid-template-columns: 1fr; } .clz-galaxy-map { max-width: 280px; margin: 0 auto; } .clz-orbital-hint { display: none; } }

/* Menu : entrée Forum, couleur distincte (vert d'eau lumineux) */
.clz-nav-forum { color: #3ddcb0 !important; font-weight: 600; border: 1px solid rgba(61, 220, 176, .45); border-radius: .5rem; margin-bottom: .35rem; background: rgba(61, 220, 176, .08); }
.clz-nav-forum:hover, .clz-nav-forum:focus-visible { background: rgba(61, 220, 176, .2); color: #fff !important; }


/* Bandeau des rubriques : verre dépoli — l'image de fond de la page transparaît, floutée (plus d'image propre au bandeau) */
.clz-banner, .clz-banner[class*="clz-banner-"], .clz-banner[class*="clz-scene-"] { background: rgba(10, 16, 34, .38) !important; backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .25); }
.clz-banner::after { background: linear-gradient(90deg, rgba(7, 11, 24, .45), rgba(7, 11, 24, 0)) !important; }
.clz-banner-help { z-index: 2; background: rgba(0, 0, 0, .35); }
.clz-help-guide { max-height: 65vh; overflow-y: auto; }
.clz-help-guide h2 { font-size: 1.15rem; }
.clz-help-guide img { max-width: 100%; height: auto; }

/* Le bouton « ? » du bandeau reste à sa place pendant l’effet d’ondulation (sinon il sautait sous le curseur et le clic était perdu) */
.clz-banner-help.clz-ripple-host { position: absolute; }

/* ---------------------------------------------------------------- 2.6.0-beta.6
   Gris secondaire plus clair : le gris standard (#6c757d) était trop sombre sur le fond spatial. */
.text-secondary, .text-muted, .text-body-secondary { color: #aab7cf !important; }
:root, [data-bs-theme="dark"] { --bs-secondary-color: rgba(203, 214, 234, .85); }
/* Boutons Construire, Rechercher et chantier : même style que les bandeaux d'information (annonces). */
.btn-clz-action {
    --bs-btn-color: var(--bs-info-text-emphasis);
    --bs-btn-bg: var(--bs-info-bg-subtle);
    --bs-btn-border-color: var(--bs-info-border-subtle);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #05414c;
    --bs-btn-hover-border-color: #0dcaf0;
    --bs-btn-focus-shadow-rgb: 13, 202, 240;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #06586a;
    --bs-btn-active-border-color: #0dcaf0;
    --bs-btn-disabled-color: var(--bs-info-text-emphasis);
    --bs-btn-disabled-bg: var(--bs-info-bg-subtle);
    --bs-btn-disabled-border-color: var(--bs-info-border-subtle);
    font-weight: 600;
}
.btn-clz-action .bi { color: var(--bs-info-text-emphasis); }
.btn-clz-action:hover .bi, .btn-clz-action:focus .bi { color: #fff; }
.btn-clz-action.is-dim { opacity: .6; }
/* 2.9.1-beta.83 : harmonie avec le bouton indisponible, devenu vitreux et lumineux — le bouton disponible reste celui
   qui appelle le clic : fond plein dégradé, liseré cyan vif, léger halo (renforcé au survol). */
.btn-clz-action:not(.clz-blocked):not(:disabled) {
    background-image: linear-gradient(180deg, #0a5c70 0%, #063e4b 100%);
    border-color: rgba(13, 202, 240, .9);
    color: #a5eefc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 12px rgba(13, 202, 240, .30);
}
.btn-clz-action:not(.clz-blocked):not(:disabled) .bi { color: #a5eefc; }
.btn-clz-action:not(.clz-blocked):not(:disabled):hover, .btn-clz-action:not(.clz-blocked):not(:disabled):focus-visible {
    background-image: linear-gradient(180deg, #0f7d98 0%, #08566a 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 18px rgba(13, 202, 240, .55);
}
.btn-clz-action:not(.clz-blocked):not(:disabled):hover .bi, .btn-clz-action:not(.clz-blocked):not(:disabled):focus-visible .bi { color: #fff; }
/* Action impossible pour l'instant (ressources, file, cases, énergie…) : non cliquable. Le survol garde la bulle
   d'explication (title) ; la classe disparaît dès que l'action redevient possible.
   2.9.1-beta.82 : plus de hachures — bouton « vitreux », dans la même teinte cyan que le bouton disponible mais plus
   lumineux (verre dépoli éclairé par le haut, liseré clair), avec un cadenas plein bien visible à la place de l'icône. */
.clz-blocked { --clz-bk: 13, 202, 240; --clz-bk-edge: 110, 223, 246; --clz-bk-text: #d6f6fd; }   /* teinte du bouton disponible (cyan des boutons d'action) */
.btn.clz-blocked, .btn.clz-blocked:disabled {
    /* 2.9.1-beta.86 : évidé — fond transparent, seul le liseré (dans la teinte du bouton disponible) dessine le bouton,
       cadenas doré bien visible ; non cliquable, bulle d'explication au survol. */
    position: relative;
    background-image: none;
    background-color: transparent;
    border: 1px solid rgba(var(--clz-bk-edge), .85);
    color: var(--clz-bk-text);
    opacity: 1;
    cursor: not-allowed;
    pointer-events: auto;
    box-shadow: 0 0 8px rgba(var(--clz-bk), .16);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    filter: none;
    text-shadow: 0 1px 2px rgba(3, 20, 30, .65);
}
.btn.clz-blocked:hover, .btn.clz-blocked:focus { transform: none; color: #fff; border-color: rgba(var(--clz-bk-edge), .95); }
/* Même principe pour les boutons d'une autre couleur : la teinte du bouton disponible est gardée. */
.btn-warning.clz-blocked, .btn-outline-warning.clz-blocked { --clz-bk: 245, 181, 61; --clz-bk-edge: 255, 211, 120; --clz-bk-text: #fff1d0; }
.btn-danger.clz-blocked, .btn-outline-danger.clz-blocked { --clz-bk: 255, 107, 107; --clz-bk-edge: 255, 160, 160; --clz-bk-text: #ffe1e1; }
.btn-success.clz-blocked, .btn-outline-success.clz-blocked { --clz-bk: 61, 220, 151; --clz-bk-edge: 140, 240, 195; --clz-bk-text: #dcfff0; }
.btn-primary.clz-blocked, .btn-outline-primary.clz-blocked, .btn-outline-info.clz-blocked, .btn-info.clz-blocked { --clz-bk: 77, 160, 255; --clz-bk-edge: 150, 200, 255; --clz-bk-text: #e2f0ff; }
/* Bouton sans icône : le cadenas est ajouté devant le texte. */
.btn.clz-blocked:not(:has(> .bi, > .clz-ico))::before { content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .35em; vertical-align: -.14em; background-color: #ffd76a; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 4px rgba(255, 200, 80, .75)); }
/* Cadenas : l'icône du bouton devient un cadenas plein, plus grand, doré, avec un halo — on le voit d'emblée. */
.btn.clz-blocked > .bi::before, .btn.clz-blocked > .bi.bi-lock::before { content: "\f47a"; }
.btn.clz-blocked > .bi { color: #ffd76a; font-size: 1.15em; line-height: 1; vertical-align: -.1em; filter: drop-shadow(0 0 4px rgba(255, 200, 80, .75)); }   /* line-height 1 : même hauteur de bouton que disponible (2.9.1-beta.83) */
.btn.clz-blocked:hover > .bi, .btn.clz-blocked:focus > .bi { color: #ffe59a; }

/* Bulle des ressources : tableau des gains aux niveaux suivants */
.clz-peek.wide { max-width: min(560px, 94vw); width: max-content; }
.clz-peek-table-title { margin-top: .45rem; font-size: .78rem; color: #aab7cf; text-transform: uppercase; letter-spacing: .04em; }
.clz-peek-table-wrap { overflow-x: auto; }
.clz-peek-table { width: 100%; margin-top: .2rem; font-size: .8rem; border-collapse: collapse; white-space: nowrap; }
.clz-peek-table th { color: var(--bs-info-text-emphasis); font-weight: 600; padding: .15rem .45rem; border-bottom: 1px solid rgba(110, 223, 246, .35); text-align: right; }
.clz-peek-table td { padding: .15rem .45rem; text-align: right; color: #dfe7f5; }
.clz-peek-table th:first-child, .clz-peek-table td:first-child { text-align: center; }
.clz-peek-table th:nth-child(4), .clz-peek-table td:nth-child(4) { text-align: left; white-space: normal; min-width: 9rem; }
.clz-peek-table tr.now td { color: #aab7cf; font-style: italic; }
.clz-peek-table td:nth-child(3) { color: #7ee2a8; }

/* Officiers (2.8.0-beta.8) : cartes compactes, portrait à gauche — lisibles et courtes sur mobile, en grille sur grand écran. */
.clz-officer { display: grid; grid-template-columns: 6.5rem 1fr; overflow: hidden; }
.clz-officer-art { position: relative; overflow: hidden; border-right: 1px solid var(--clz-line); background: #0b1330; }
.clz-officer-art > img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; transition: transform .4s; animation: clz-breath var(--clz-breath) ease-in-out infinite; }
.clz-officer:hover .clz-officer-art > img { transform: scale(1.04); }
.clz-officer-body { display: flex; flex-direction: column; padding: .55rem .7rem; min-width: 0; }
.clz-officer-desc { line-height: 1.35; }
.clz-officer-tiers { display: flex; flex-wrap: wrap; gap: .25rem; }
.clz-tier { font-size: .75rem; padding: .05rem .4rem; border-radius: 1rem; border: 1px solid var(--clz-line); color: var(--bs-secondary-color, #9aa6c8); white-space: nowrap; }
.clz-tier b { font-weight: 600; opacity: .8; }
.clz-tier.on { color: #1b1300; background: var(--clz-accent); border-color: var(--clz-accent); }
@media (min-width: 576px) { .clz-officer { grid-template-columns: 8rem 1fr; } }
@media (prefers-reduced-motion: reduce) { .clz-officer-art > img { animation: none; transition: none; } }

/* Messagerie (2.8.0-beta.8) : sujet lisible sur mobile, réponse dans le message. */
.clz-msg-row { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; }
.clz-msg-subj { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; padding: .2rem 0; }
.clz-msg-meta { margin-left: auto; }
.clz-reply { border-top: 1px dashed var(--clz-line); padding-top: .6rem; }
.clz-reply textarea { min-height: 6rem; }

/* Mobile : champs de saisie en 16 px — en dessous, iOS zoome à la saisie et la page devient difficile à utiliser
   (réponses, discussion d'alliance, formulaires). */
@media (max-width: 767.98px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select, .form-control, .form-select { font-size: 16px !important; }
}

/* Barre des ressources sur mobile (2.8.0-beta.9) : 2 lignes de 4 tuiles compactes — métal, cristal, deutérium, énergie,
   puis nourriture, eau, colons, matière noire — au lieu de 4 lignes qui mangeaient près de la moitié de l'écran. */
@media (max-width: 767.98px) {
    .clz-topbar { min-height: 0; }
    .clz-topbar > .d-flex { row-gap: .3rem !important; }
    .clz-topbar .clz-resbar { order: 3; width: 100%; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem !important; margin: 0 !important; }
    .clz-topbar .clz-res { min-width: 0; gap: .25rem; padding: .18rem .3rem; border-radius: .5rem; font-size: .78rem; box-shadow: none; }
    .clz-topbar .clz-res img { width: 18px; height: 18px; border-radius: 4px; filter: none; flex: 0 0 auto; }
    .clz-topbar .clz-res-body { min-width: 0; overflow: hidden; }
    .clz-topbar .clz-res-val { font-size: .8rem; letter-spacing: 0; text-shadow: none; overflow: hidden; text-overflow: ellipsis; }
    .clz-topbar .clz-res-unit { display: none; }
    .clz-topbar .clz-res-gauge { height: 2px; margin-top: 2px; }
    .clz-topbar .clz-res-metal { order: 1; } .clz-topbar .clz-res-crystal { order: 2; } .clz-topbar .clz-res-deuterium { order: 3; } .clz-topbar .clz-res-energy { order: 4; }
    .clz-topbar .clz-res-food { order: 5; } .clz-topbar .clz-res-water { order: 6; } .clz-topbar .clz-res-colonists { order: 7; } .clz-topbar .clz-res-dm { order: 8; }
    .clz-topbar .btn-sm { padding: .2rem .45rem; }

    /* Page Ressources : cartes en bandeau défilant, tableau de production en fiches par bâtiment. */
    .clz-res-cards { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .3rem; }
    .clz-res-cards > .col { flex: 0 0 44%; max-width: 44%; scroll-snap-align: start; }
    .clz-prod thead { display: none; }
    .clz-prod, .clz-prod tbody, .clz-prod tfoot { display: block; }
    .clz-prod tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .1rem .6rem; padding: .5rem .2rem; border-bottom: 1px solid var(--clz-line); }
    .clz-prod td { display: block; border: 0 !important; padding: 0 !important; min-width: 0; }
    .clz-prod td:empty { display: none; }
    .clz-prod td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; color: var(--bs-secondary-color, #9aa6c8); }
    .clz-prod td:first-child { grid-column: 1 / -1; font-weight: 600; }
    .clz-prod td.clz-prod-pct { grid-column: 1 / -1; }
}

/* 2.8.0-beta.14 — Démolition : coût étiqueté et bien visible. */
.clz-demolish { border-top: 1px dashed rgba(255, 107, 107, .35); padding-top: .45rem; }
/* Descriptions : 3 lignes, puis « Lire la suite ». */
.clz-desc.open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.clz-more { background: none; border: 0; padding: 0; font-size: .78rem; color: var(--clz-cyan); text-decoration: underline dotted; cursor: pointer; }
/* Bulles : jamais coupées en bas de l'écran ; trop hautes, elles s'élargissent puis défilent (au toucher). */
.clz-peek { max-height: calc(100vh - 16px); overflow-y: auto; }
.clz-peek.fit { font-size: .82rem; }
/* Coût de démolition en toutes lettres dans le bouton : montant rouge tant que la ressource manque. */
.clz-cost-text { display: inline; font-weight: 600; }
.clz-cost-text.short { color: #ff8a8a; }
.clz-demolish .btn { white-space: normal; line-height: 1.35; }

/* 2.8.0-beta.20 — Astre en cours (planète mère, colonie, lune) à gauche des ressources, avec sélecteur déroulant. */
.clz-where { flex: 0 0 auto; }
.clz-where-btn { display: inline-flex; align-items: center; gap: .55rem; max-width: 17rem; padding: .2rem .65rem .2rem .25rem; border-radius: .7rem;
    background: var(--clz-panel); border: 1px solid var(--clz-line); color: #e9eefc; text-align: left; line-height: 1.15;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.clz-where-btn:hover, .clz-where-btn:focus-visible, .clz-where-btn[aria-expanded="true"] { border-color: rgba(87, 211, 255, .55); box-shadow: 0 0 0 .15rem rgba(87, 211, 255, .15), 0 0 18px rgba(87, 211, 255, .18); outline: 0; }
.clz-where-img { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 10px rgba(87, 211, 255, .35); }
.clz-where-moon .clz-where-img, .clz-where-item.clz-where-moon img { box-shadow: 0 0 10px rgba(201, 150, 255, .4); }
.clz-where-text { display: flex; flex-direction: column; min-width: 0; }
.clz-where-kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clz-cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clz-where-home .clz-where-kind { color: var(--clz-accent); }
.clz-where-moon .clz-where-kind { color: var(--clz-dm); }
.clz-where-name { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clz-where-coords { font-weight: 500; font-size: .8rem; color: rgba(203, 214, 234, .75); font-variant-numeric: tabular-nums; }
.clz-where-caret { font-size: .75rem; color: rgba(203, 214, 234, .7); transition: transform .2s ease; }
.clz-where-btn[aria-expanded="true"] .clz-where-caret { transform: rotate(180deg); }
/* Liste : défile (ascenseur) au-delà de quelques astres ; lunes en retrait sous leur planète. */
.clz-where-menu { min-width: 19rem; max-height: min(60vh, 26rem); overflow-y: auto; padding: .3rem; background: rgba(10, 16, 36, .97);
    border: 1px solid var(--clz-line); border-radius: .7rem; box-shadow: 0 12px 32px rgba(0, 0, 0, .55); scrollbar-width: thin; }
.clz-where-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(203, 214, 234, .65); padding: .25rem .5rem .35rem; }
.clz-where-item { display: flex; align-items: center; gap: .5rem; border-radius: .5rem; padding: .35rem .5rem; color: #e9eefc; }
.clz-where-item img { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; }
.clz-where-item.clz-where-moon { padding-left: 1.6rem; }
.clz-where-item.clz-where-moon img { width: 22px; height: 22px; }
.clz-where-item-name { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clz-where-item-coords { font-size: .78rem; color: rgba(203, 214, 234, .7); font-variant-numeric: tabular-nums; }
.clz-where-tag { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; padding: .1rem .35rem; border-radius: .35rem; border: 1px solid currentColor; color: var(--clz-cyan); opacity: .85; }
.clz-where-item.clz-where-home .clz-where-tag { color: var(--clz-accent); }
.clz-where-item.clz-where-moon .clz-where-tag { color: var(--clz-dm); }
.clz-where-item:hover, .clz-where-item:focus { background: rgba(87, 211, 255, .12); color: #fff; }
.clz-where-item.active { background: rgba(87, 211, 255, .18); color: #fff; box-shadow: inset 3px 0 0 var(--clz-cyan); }
@media (max-width: 767.98px) {
    .clz-where { order: 1; flex: 1 1 auto; min-width: 0; }
    .clz-topbar-tools { order: 2; }
    .clz-where-btn { max-width: 100%; width: 100%; padding: .15rem .5rem .15rem .2rem; gap: .4rem; }
    .clz-where-img { width: 28px; height: 28px; }
    .clz-where-kind { font-size: .6rem; }
    .clz-where-name { font-size: .88rem; }
    .clz-where-menu { min-width: min(19rem, 92vw); }
}
@media (prefers-reduced-motion: reduce) { .clz-where-btn, .clz-where-caret { transition: none; } }

/* Écrans de 768 à 1699 px : la marque se réduit au logo et les tuiles se resserrent, pour que l'astre en cours et les
   ressources tiennent sur une seule ligne (les boutons passent dessous si besoin, comme avant). */
@media (min-width: 768px) and (max-width: 1819.98px) {
    .clz-topbar .clz-resbar.gap-1 { gap: .3rem !important; }
    .clz-topbar .clz-res { padding: .15rem .45rem .15rem .3rem; gap: .3rem; }
    .clz-topbar .clz-res img { width: 26px; height: 26px; }
    .clz-topbar .clz-res-body { min-width: 3.4rem; }
    .clz-topbar .clz-res-val { font-size: .92rem; }
    .clz-where-btn { max-width: 13rem; }
}
/* Grand écran : l'astre en cours à la hauteur des tuiles de ressources. */
@media (min-width: 1820px) {
    .clz-where-btn { padding: .3rem .8rem .3rem .3rem; gap: .65rem; max-width: 19rem; }
    .clz-where-img { width: 42px; height: 42px; }
    .clz-where-kind { font-size: .72rem; }
    .clz-where-name { font-size: 1.05rem; }
    .clz-where-coords { font-size: .85rem; }
}
/* Téléphone : une seule ligne (nom et coordonnées), la nature de l'astre passe en pastille de couleur sur la vignette. */
@media (max-width: 575.98px) {
    .clz-where-kind { display: none; }
    .clz-where-btn { position: relative; padding: .2rem .55rem .2rem .25rem; }
    .clz-where-img { width: 26px; height: 26px; }
    .clz-where-btn::after { content: ""; position: absolute; left: 1.35rem; top: .15rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--clz-cyan); box-shadow: 0 0 0 2px rgba(7, 11, 24, .9); }
    .clz-where-home::after { background: var(--clz-accent); }
    .clz-where-moon::after { background: var(--clz-dm); }
}

/* 2.8.0-beta.21 — Bandeau aligné sur une ligne : titre du jeu, un peu d'espace, astre en cours, ressources, puis à droite
   l'avatar et les petits outils, tous de la même taille, gris clair presque blanc. */
.clz-topbar > .d-flex { flex-wrap: nowrap; column-gap: .6rem !important; }
.clz-topbar .clz-brand { flex: 0 0 auto; }
.clz-topbar .clz-where { margin-left: .9rem; }
.clz-topbar .clz-resbar { flex: 0 1 auto; flex-wrap: nowrap !important; }
.clz-topbar-tools { flex: 0 0 auto; gap: .35rem; }
.clz-tools-avatar { margin-right: .3rem; }
.clz-tool { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: .55rem;
    color: #e8ecf4; background: rgba(232, 236, 244, .05); border: 1px solid rgba(232, 236, 244, .26); font-size: 1rem; line-height: 1;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.clz-tool:hover, .clz-tool:focus-visible, .clz-tool[aria-expanded="true"] { color: #fff; background: rgba(87, 211, 255, .12); border-color: rgba(87, 211, 255, .6); box-shadow: 0 0 12px rgba(87, 211, 255, .2); }
.clz-tool-text { width: auto; min-width: 34px; padding: 0 .5rem; font-size: .8rem; font-weight: 600; letter-spacing: .03em; }
.clz-tool-alert { width: auto; padding: 0 .55rem; gap: .3rem; color: #fff; border-color: transparent; }
.clz-tool-wrap .clz-tool-badge { position: absolute; top: -6px; right: -7px; font-size: .62rem; padding: .2em .45em; box-shadow: 0 0 0 2px rgba(7, 11, 24, .95); }
/* Titre du jeu affiché en entier dès 1 400 px ; en dessous, le logo seul pour que tout tienne sur une ligne. */
@media (min-width: 768px) and (max-width: 1819.98px) { .clz-topbar .clz-brand { font-size: 0; gap: 0; } .clz-topbar .clz-where { margin-left: .4rem; } }
@media (min-width: 768px) and (max-width: 1199.98px) { .clz-topbar > .d-flex { flex-wrap: wrap; row-gap: .35rem !important; } .clz-topbar .clz-resbar { flex-wrap: wrap !important; } }
@media (max-width: 767.98px) {
    .clz-topbar > .d-flex { flex-wrap: wrap; }
    .clz-topbar .clz-where { margin-left: 0; }
    .clz-topbar .clz-resbar { flex-wrap: wrap !important; }
    .clz-tool { width: 32px; height: 32px; }
}

/* 1 200 à 1 399 px : outils et astre un peu plus serrés pour rester sur une seule ligne. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .clz-topbar > .d-flex { column-gap: .4rem !important; }
    .clz-topbar-tools { gap: .25rem; }
    .clz-tool { width: 31px; height: 31px; font-size: .92rem; }
    .clz-tool-text { min-width: 31px; padding: 0 .4rem; }
    .clz-tools-avatar { margin-right: .15rem; }
    .clz-where-btn { max-width: 11.5rem; }
    .clz-topbar .clz-resbar.gap-1 { gap: .25rem !important; }
}

/* 2.8.0-beta.22 — Pastille des messages posée à côté du bouton (jamais coupée par l'onde du clic), « Déconnexion » en vert. */
.clz-tool-wrap { position: relative; display: inline-flex; }
.clz-tool-wrap .clz-tool-badge { pointer-events: none; z-index: 2; }
.clz-tool-logout { width: auto; gap: .4rem; padding: 0 .65rem; font-size: .85rem; font-weight: 600;
    color: #3ddcb0; background: rgba(61, 220, 176, .08); border-color: rgba(61, 220, 176, .45); }
.clz-tool-logout:hover, .clz-tool-logout:focus-visible { color: #fff; background: rgba(61, 220, 176, .2); border-color: rgba(61, 220, 176, .75); box-shadow: 0 0 12px rgba(61, 220, 176, .25); }
.clz-tool-logout .bi { font-size: 1rem; }
/* Place du libellé « Déconnexion » : tuiles un peu moins larges sur grand écran ; de 1 200 à 1 399 px, la palette de
   commandes passe dans son raccourci (Ctrl+K) et les éléments se resserrent encore, pour garder une seule ligne. */
@media (min-width: 1820px) { .clz-topbar .clz-res-body { min-width: 3.9rem; } .clz-topbar .clz-resbar.gap-1 { gap: .4rem !important; } }
@media (min-width: 1200px) and (max-width: 1399.98px) {
    #clz-palette-open { display: none !important; }
    .clz-tool-logout { padding: 0 .5rem; font-size: .8rem; gap: .3rem; }
    .clz-topbar .clz-res { padding: .15rem .35rem .15rem .25rem; gap: .25rem; }
    .clz-topbar .clz-res img { width: 24px; height: 24px; }
    .clz-topbar .clz-res-body { min-width: 3rem; }
}
/* Icônes des outils à largeur fixe : pendant le chargement de leur police, le bandeau ne bouge pas d'un pixel. */
.clz-topbar .clz-tool .bi { display: inline-block; width: 1em; text-align: center; }

/* 2.8.0-beta.23 — Fiche visée par l'adresse (#item-…) : jamais cachée sous le bandeau, mise en valeur un instant. */
.clz-item { scroll-margin-top: calc(var(--clz-head, 72px) + 12px); }
.clz-item.clz-target { animation: clz-target 2.4s ease-out 1; }
@keyframes clz-target {
    0%, 35% { box-shadow: 0 0 0 2px var(--clz-cyan), 0 0 28px rgba(87, 211, 255, .45); }
    100% { box-shadow: 0 0 0 0 rgba(87, 211, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .clz-item.clz-target { animation: none; box-shadow: 0 0 0 2px var(--clz-cyan); } }

/* 2.8.0-beta.23 — Bandeau adapté à la largeur. Au-dessus de 1 280 px : inchangé (écrans 1080p larges, 1440p, 4K).
   De 992 à 1 279 px : une seule ligne grâce au mode compact — ressources serrées (sans jauge ni « t », chiffres courts),
   astre sur une ligne, outils secondaires dans le menu « ⋯ » placé juste avant « Déconnexion ». */
.clz-tool-more { display: none; }
.clz-more-menu { min-width: 15rem; }
.clz-more-menu .dropdown-item { display: flex; align-items: center; gap: .5rem; }
@media (min-width: 992px) and (max-width: 1279.98px) {
    .clz-topbar > .d-flex { flex-wrap: nowrap !important; column-gap: .35rem !important; }
    .clz-topbar .clz-resbar { flex-wrap: nowrap !important; }
    .clz-topbar .clz-resbar.gap-1 { gap: .2rem !important; }
    .clz-topbar .clz-res { padding: .12rem .3rem .12rem .2rem; gap: .2rem; }
    .clz-topbar .clz-res img { width: 20px; height: 20px; }
    .clz-topbar .clz-res-body { min-width: 0; }
    .clz-topbar .clz-res-gauge, .clz-topbar .clz-res-unit { display: none; }
    .clz-topbar .clz-res-val { font-size: .85rem; }
    .clz-topbar .clz-where { margin-left: .2rem; }
    .clz-where-kind { display: none; }
    .clz-where-btn { position: relative; max-width: 9.5rem; padding: .15rem .45rem .15rem .2rem; }
    .clz-where-img { width: 26px; height: 26px; }
    .clz-where-btn::after { content: ""; position: absolute; left: 1.3rem; top: .12rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--clz-cyan); box-shadow: 0 0 0 2px rgba(7, 11, 24, .9); }
    .clz-where-home::after { background: var(--clz-accent); }
    .clz-where-moon::after { background: var(--clz-dm); }
    .clz-topbar-tools { gap: .25rem; }
    .clz-tool { width: 31px; height: 31px; }
    .clz-tool-secondary, #clz-palette-open { display: none !important; }
    .clz-tool-more { display: inline-flex; }
    .clz-tool-logout { width: auto; padding: 0 .5rem; font-size: .8rem; gap: .3rem; }
}

/* L'astre en cours exactement sur l'axe des autres éléments (sans l'espace de ligne de son conteneur). */
.clz-topbar .clz-where { display: flex; align-items: center; }
@media (min-width: 992px) and (max-width: 1279.98px) {
    .clz-topbar .clz-resbar.gap-1 { gap: .15rem !important; }
    .clz-topbar-tools { gap: .2rem; }
    .clz-tools-avatar { margin-right: .1rem; }
}

/* 2.8.0-beta.26 — Lune en orbite : ellipse inclinée (axe jamais vertical), la lune passe DERRIÈRE la planète (plus
   petite, dans l'ombre) puis DEVANT (plus grande, éclairée). La bascule se fait sur les côtés, hors du disque de la
   planète : on ne la voit jamais. Trajectoire calculée (36 points), sans transformation sur la lune (son globe 3D garde
   la sienne). */
.clz-orbit-stage { isolation: isolate; }
.clz-orbit-stage > .clz-globe3d:not(.clz-orbit-moon) { position: relative; z-index: 2; }
/* « inset: auto » d'abord (annule l'ancien « inset: 0 »), puis left/top : placé après, il annulait le centrage et l'ellipse
   partait de travers (sur téléphone, elle débordait de l'écran). */
.clz-orbit { inset: auto; position: absolute; left: 50%; top: 50%; width: 264px; height: 72px; margin: -36px 0 0 -132px;
    border-radius: 50%; border: 1px dashed rgba(200, 220, 255, .22); transform: rotate(-18deg); animation: none; z-index: 1; pointer-events: none; }
.clz-orbit-stage .clz-orbit-moon, .clz-orbit-stage .clz-orbit-moon.clz-globe3d { position: absolute; margin: 0; top: 0; left: 0;
    animation: clz-moon-orbit 18s linear infinite; will-change: left, top; }
@keyframes clz-moon-orbit {
    0.00% { left: 220.5px; top: 54.2px; scale: 0.920; filter: brightness(0.78); z-index: 3; }
    2.78% { left: 220.6px; top: 60.8px; scale: 0.944; filter: brightness(0.83); z-index: 3; }
    5.56% { left: 216.8px; top: 68.4px; scale: 0.968; filter: brightness(0.88); z-index: 3; }
    8.33% { left: 209.3px; top: 76.8px; scale: 0.990; filter: brightness(0.93); z-index: 3; }
    11.11% { left: 198.3px; top: 85.8px; scale: 1.010; filter: brightness(0.97); z-index: 3; }
    13.89% { left: 184.2px; top: 95.0px; scale: 1.027; filter: brightness(1.01); z-index: 3; }
    16.67% { left: 167.4px; top: 104.3px; scale: 1.041; filter: brightness(1.04); z-index: 3; }
    19.44% { left: 148.4px; top: 113.2px; scale: 1.052; filter: brightness(1.06); z-index: 3; }
    22.22% { left: 127.8px; top: 121.6px; scale: 1.058; filter: brightness(1.08); z-index: 3; }
    25.00% { left: 106.1px; top: 129.2px; scale: 1.060; filter: brightness(1.08); z-index: 3; }
    27.78% { left: 84.2px; top: 135.8px; scale: 1.058; filter: brightness(1.08); z-index: 3; }
    30.56% { left: 62.5px; top: 141.1px; scale: 1.052; filter: brightness(1.06); z-index: 3; }
    33.33% { left: 41.9px; top: 145.0px; scale: 1.041; filter: brightness(1.04); z-index: 3; }
    36.11% { left: 22.8px; top: 147.4px; scale: 1.027; filter: brightness(1.01); z-index: 3; }
    38.89% { left: 6.0px; top: 148.3px; scale: 1.010; filter: brightness(0.97); z-index: 3; }
    41.67% { left: -8.2px; top: 147.4px; scale: 0.990; filter: brightness(0.93); z-index: 3; }
    44.44% { left: -19.2px; top: 145.0px; scale: 0.968; filter: brightness(0.88); z-index: 3; }
    47.22% { left: -26.7px; top: 141.1px; scale: 0.944; filter: brightness(0.83); z-index: 3; }
    50.00% { left: -30.5px; top: 135.8px; scale: 0.920; filter: brightness(0.78); z-index: 3; }
    52.77% { z-index: 3; }
    52.78% { left: -30.6px; top: 129.2px; scale: 0.896; filter: brightness(0.71); z-index: 1; }
    55.56% { left: -26.8px; top: 121.6px; scale: 0.872; filter: brightness(0.65); z-index: 1; }
    58.33% { left: -19.3px; top: 113.2px; scale: 0.850; filter: brightness(0.59); z-index: 1; }
    61.11% { left: -8.3px; top: 104.2px; scale: 0.830; filter: brightness(0.54); z-index: 1; }
    63.89% { left: 5.8px; top: 95.0px; scale: 0.813; filter: brightness(0.49); z-index: 1; }
    66.67% { left: 22.6px; top: 85.7px; scale: 0.799; filter: brightness(0.45); z-index: 1; }
    69.44% { left: 41.6px; top: 76.8px; scale: 0.788; filter: brightness(0.42); z-index: 1; }
    72.22% { left: 62.2px; top: 68.4px; scale: 0.782; filter: brightness(0.41); z-index: 1; }
    75.00% { left: 83.9px; top: 60.8px; scale: 0.780; filter: brightness(0.40); z-index: 1; }
    77.78% { left: 105.8px; top: 54.2px; scale: 0.782; filter: brightness(0.41); z-index: 1; }
    80.56% { left: 127.5px; top: 48.9px; scale: 0.788; filter: brightness(0.42); z-index: 1; }
    83.33% { left: 148.1px; top: 45.0px; scale: 0.799; filter: brightness(0.45); z-index: 1; }
    86.11% { left: 167.2px; top: 42.6px; scale: 0.813; filter: brightness(0.49); z-index: 1; }
    88.89% { left: 184.0px; top: 41.7px; scale: 0.830; filter: brightness(0.54); z-index: 1; }
    91.67% { left: 198.2px; top: 42.6px; scale: 0.850; filter: brightness(0.59); z-index: 1; }
    94.44% { left: 209.2px; top: 45.0px; scale: 0.872; filter: brightness(0.65); z-index: 1; }
    97.22% { left: 216.7px; top: 48.9px; scale: 0.896; filter: brightness(0.71); z-index: 1; }
    100.00% { left: 220.5px; top: 54.2px; scale: 0.920; filter: brightness(0.78); z-index: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .clz-orbit-stage .clz-orbit-moon, .clz-orbit-stage .clz-orbit-moon.clz-globe3d { animation: none; left: 214px; top: 112px; z-index: 3; }
}

/* 2.8.0-beta.27 — Estimation de démolition en clair : coût, durée, ce que devient le bâtiment, case libérée. */
.clz-demolish-head { font-size: .82rem; font-weight: 600; color: #ff9b9b; margin-bottom: .2rem; }
.clz-demolish-grid { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; margin: 0 0 .4rem; font-size: .8rem; }
.clz-demolish-grid dt { font-weight: 500; color: rgba(203, 214, 234, .75); }
.clz-demolish-grid dd { margin: 0; }

/* 2.8.0-beta.27 — Assistance en ligne : bandeau bien visible tant que l'administrateur voit le jeu comme un joueur. */
.clz-assist-bar { position: sticky; top: 0; z-index: 1040; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem;
    padding: .3rem .8rem; font-size: .85rem; font-weight: 600; color: #1a1200; background: repeating-linear-gradient(135deg, #f5b53d 0 14px, #e9a521 14px 28px); }
.clz-assist-bar .link-light { color: #1a1200 !important; text-decoration: underline; }
/* Assistance « Prendre la main » : bandeau rouge rayé (actions réelles au nom du joueur). */
.clz-assist-bar.clz-assist-control { background: repeating-linear-gradient(135deg, #8b1d2c 0 14px, #6d1522 14px 28px); }
/* 2.9.0-beta.19 : l'en-tête se colle sous le bandeau d'assistance (hauteur mesurée par app.js) au lieu de passer dessous. */
body > .clz-assist-bar ~ .clz-topbar.sticky-top { top: var(--clz-assist-h, 0px); }

/* 2.8.0-beta.27 — « Mon empire » : planètes, lunes et couples planète/lune alignés sur la même ligne. Chaque astre a un
   cadre de même hauteur, son globe centré verticalement dedans (lune plus petite, sans décalage) ; les noms partent tous
   de la même hauteur. Un couple planète/lune est réuni dans un léger encadré commun. */
.clz-empire { align-items: flex-start; gap: .5rem .7rem; }
.clz-empire-group { display: flex; align-items: flex-start; gap: .15rem; }
.clz-empire-group.couple { padding: 0 .15rem; border-radius: .95rem; background: rgba(87, 211, 255, .045); box-shadow: inset 0 0 0 1px rgba(120, 150, 230, .14); }
.clz-empire .clz-empire-item { justify-content: flex-start; height: 100%; }
.clz-empire-globe { display: flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; flex: none; }
.clz-empire .clz-empire-globe .clz-globe3d, .clz-empire .clz-empire-globe .clz-globe3d.moon, .clz-empire .clz-empire-globe .clz-globe3d.gl-64 { margin: 0; }
.clz-empire .n { min-height: 2.2em; }

/* L'image fixe sous chaque globe (repli sans WebGL) garde la taille du globe : l'ancienne règle « .clz-empire img »
   (4,2 rem) la grossissait, et une grosse sphère apparaissait derrière chaque petite lune. */
.clz-empire .clz-globe3d img.clz-globe3d-still { width: 100%; height: 100%; margin: 0; box-shadow: none; }

/* 2.8.0-beta.27 — Assistant d'aide : bouton flottant et fenêtre de discussion. */
.clz-asst-fab { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 1040; display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .85rem; border-radius: 999px; border: 1px solid rgba(87, 211, 255, .55); background: rgba(10, 16, 36, .92); color: #e8ecf4;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .5), 0 0 14px rgba(87, 211, 255, .25); font-weight: 600; }
.clz-asst-fab:hover, .clz-asst-fab:focus-visible { color: #fff; border-color: var(--clz-cyan); box-shadow: 0 6px 22px rgba(0, 0, 0, .5), 0 0 20px rgba(87, 211, 255, .45); outline: 0; }
.clz-asst-fab .bi { font-size: 1.1rem; }
.clz-asst { position: fixed; right: 1rem; bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); z-index: 1045; width: min(24rem, calc(100vw - 2rem));
    max-height: min(34rem, calc(100vh - 7rem)); display: flex; flex-direction: column; border-radius: 1rem; border: 1px solid var(--clz-line);
    background: rgba(10, 16, 36, .97); box-shadow: 0 16px 40px rgba(0, 0, 0, .6); overflow: hidden; }
.clz-asst.d-none { display: none !important; }
.clz-asst-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; font-weight: 700; border-bottom: 1px solid var(--clz-line); background: rgba(87, 211, 255, .08); }
.clz-asst-log { flex: 1 1 auto; overflow-y: auto; padding: .7rem; display: flex; flex-direction: column; gap: .5rem; scrollbar-width: thin; }
.clz-asst-msg { max-width: 92%; padding: .45rem .65rem; border-radius: .7rem; font-size: .88rem; line-height: 1.35; }
.clz-asst-msg.bot { align-self: flex-start; background: rgba(255, 255, 255, .06); border: 1px solid var(--clz-line); }
.clz-asst-msg.me { align-self: flex-end; background: rgba(87, 211, 255, .16); border: 1px solid rgba(87, 211, 255, .35); }
.clz-asst-link { display: block; margin-top: .45rem; padding: .4rem .55rem; border-radius: .55rem; background: rgba(87, 211, 255, .08); border: 1px solid rgba(87, 211, 255, .25); color: #e8ecf4; text-decoration: none; }
.clz-asst-link:hover { border-color: var(--clz-cyan); color: #fff; }
.clz-asst-link b { display: block; color: var(--clz-cyan); font-size: .85rem; }
.clz-asst-link span { display: block; font-size: .78rem; color: rgba(203, 214, 234, .8); }
.clz-asst-support { margin-top: .55rem; padding-top: .5rem; border-top: 1px dashed var(--clz-line); }
.clz-asst-ok { margin-top: .5rem; color: #6ff0b4; font-size: .85rem; }
.clz-asst-form { display: flex; gap: .4rem; padding: .55rem; border-top: 1px solid var(--clz-line); }
@media (max-width: 575.98px) { .clz-asst-fab span { display: none; } .clz-asst-fab { padding: .55rem .65rem; } }

/* 2.8.0-beta.28 — Fiche d'une ressource : fenêtre flottante sous la tuile cliquée, complète et sans ascenseur. */
.clz-rp { position: fixed; z-index: 1094; width: min(27rem, calc(100vw - 16px)); padding: .75rem .85rem .65rem; border-radius: 1rem;
    background: linear-gradient(180deg, #111a38, #0a1024); border: 1px solid rgba(87, 211, 255, .35); box-shadow: 0 18px 44px rgba(0, 0, 0, .6), 0 0 22px rgba(87, 211, 255, .12);
    color: #e8ecf4; font-size: .86rem; opacity: 0; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease; }
.clz-rp.in { opacity: 1; transform: none; }
.clz-rp::before { content: ""; position: absolute; top: -7px; left: calc(var(--clz-rp-arrow, 50%) - 7px); width: 14px; height: 14px; transform: rotate(45deg);
    background: #111a38; border-left: 1px solid rgba(87, 211, 255, .35); border-top: 1px solid rgba(87, 211, 255, .35); }
.clz-rp-head { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .55rem; }
.clz-rp-head img { width: 42px; height: 42px; flex: none; }
.clz-rp-head .t { flex: 1 1 auto; min-width: 0; }
.clz-rp-head .n { font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.clz-rp-head .s { font-size: .76rem; color: rgba(203, 214, 234, .78); line-height: 1.3; }
.clz-rp-head .btn-close { flex: none; font-size: .7rem; margin-top: .1rem; }
.clz-rp-fill { margin-bottom: .55rem; }
.clz-rp-fill .row1 { display: flex; justify-content: space-between; font-size: .76rem; color: rgba(203, 214, 234, .8); margin-bottom: .2rem; }
.clz-rp-fill .row1 .v { color: #e8ecf4; font-variant-numeric: tabular-nums; }
.clz-rp-fill .bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.clz-rp-fill .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--clz-cyan), #6ff0b4); }
.clz-rp-fill .bar i.warn { background: linear-gradient(90deg, #ffb347, #ff8c42); }
.clz-rp-fill .bar i.full { background: #ff5d6c; }
.clz-rp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.2rem, 1fr)); gap: .3rem; margin-bottom: .55rem; }
.clz-rp-grid .cell { padding: .3rem .45rem; border-radius: .5rem; background: rgba(255, 255, 255, .045); border: 1px solid rgba(120, 150, 230, .14); }
.clz-rp-grid .k { display: block; font-size: .7rem; color: rgba(203, 214, 234, .72); text-transform: uppercase; letter-spacing: .03em; }
.clz-rp-grid .v { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.clz-rp-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--clz-cyan); margin: .2rem 0 .3rem; }
.clz-rp-table { width: 100%; border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; margin-bottom: .5rem; table-layout: auto; }
.clz-rp-table th { font-size: .68rem; font-weight: 600; color: rgba(203, 214, 234, .7); text-transform: uppercase; padding: .15rem .25rem; text-align: right; white-space: nowrap; }
.clz-rp-table td { padding: .22rem .25rem; text-align: right; border-top: 1px solid rgba(120, 150, 230, .12); white-space: nowrap; vertical-align: middle; }
.clz-rp-table td:nth-child(4) { white-space: normal; }
.clz-rp-table th:first-child, .clz-rp-table td:first-child { text-align: left; }
.clz-rp-table td:nth-child(3) { color: #6ff0b4; }
.clz-rp-table tr.now td { color: var(--clz-accent); font-weight: 700; }
.clz-rp-cost { display: inline-flex; flex-wrap: wrap; gap: .2rem; justify-content: flex-end; }
.clz-rp-cost .chip { padding: 0 .3rem; border-radius: .3rem; font-size: .72rem; line-height: 1.45; background: rgba(255, 255, 255, .06); }
.clz-rp-cost .chip.r-m { color: var(--clz-metal); } .clz-rp-cost .chip.r-c { color: var(--clz-crystal); } .clz-rp-cost .chip.r-d { color: var(--clz-deut); }
.clz-rp-store .line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-variant-numeric: tabular-nums; margin-bottom: .5rem; }
.clz-rp-store .arrow { color: rgba(203, 214, 234, .6); }
.clz-rp-store .next { color: #6ff0b4; font-weight: 600; }
.clz-rp-store .clz-rp-cost { margin-left: auto; }
.clz-rp-links { display: flex; flex-wrap: wrap; gap: .35rem .9rem; padding-top: .45rem; border-top: 1px solid rgba(120, 150, 230, .16); font-size: .8rem; }
.clz-rp-links a { color: var(--clz-cyan); text-decoration: none; }
.clz-rp-links a:hover { color: #fff; text-decoration: underline; }
.clz-res[data-respanel] { cursor: pointer; }
.clz-res[data-respanel][aria-expanded="true"] { border-color: rgba(87, 211, 255, .6); box-shadow: 0 0 12px rgba(87, 211, 255, .25); }
@media (prefers-reduced-motion: reduce) { .clz-rp { transition: none; transform: none; } }
.clz-rp-note { margin: -.3rem 0 .5rem; font-size: .72rem; color: #ffcf6e; }

/* 2.8.0-beta.28 — Assistant HAL : avatar (robot à visière) sur le bouton, l'en-tête et chacune de ses réponses. */
.clz-asst-fab { padding: .3rem .85rem .3rem .3rem; }
.clz-asst-fab .clz-asst-ava { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.clz-asst-head .clz-asst-ava { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.clz-asst-msg.bot { position: relative; margin-left: 30px; }
.clz-asst-msg.bot::before { content: ""; position: absolute; left: -30px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: url("/assets/img/ui/hal.svg") center / cover no-repeat; }
@media (max-width: 575.98px) { .clz-asst-fab { padding: .3rem; } }

/* Animations d'entrée des cartes (glissement depuis la droite) et décors en orbite : rien ne doit élargir la page ni faire
   apparaître une barre de défilement horizontale (constaté sur la vue d'ensemble et le guide). « clip » ne crée pas de
   zone de défilement : le bandeau collant continue de fonctionner. */
main { overflow-x: clip; }

/* Boutique : encadré vert détouré (comme « Forum » et « Déconnexion ») pour le don par SMS ou appel. */
.clz-shop-donate { padding: .9rem 1rem; border-radius: .9rem; border: 1px solid rgba(61, 220, 176, .55); background: rgba(61, 220, 176, .07);
    color: #d9fbef; box-shadow: 0 0 16px rgba(61, 220, 176, .1); }
.clz-shop-donate .bi-heart { color: #3ddcb0; }
.clz-shop-donate-btn { color: #3ddcb0; background: rgba(61, 220, 176, .1); border: 1px solid rgba(61, 220, 176, .6); font-weight: 600; }
.clz-shop-donate-btn:hover, .clz-shop-donate-btn:focus-visible { color: #fff; background: rgba(61, 220, 176, .24); border-color: rgba(61, 220, 176, .85); box-shadow: 0 0 12px rgba(61, 220, 176, .3); }
/* Boutique : module Dedipass dans un cadre clair (hauteur transmise par le module), numéros d'étape. */
.clz-shop-frame { display: block; width: 100%; height: 480px; min-height: 240px; border: 0; border-radius: .6rem; background: #fff; }
.clz-shop-step { color: #0b1a14; background: #3ddcb0; }

/* Accueil : seconde phrase d'accroche, un ton plus discret que la première. */
.clz-home-more { font-size: 1.05rem; color: rgba(203, 214, 234, .88); }

/* 2.8.0-beta.36 — Synthèse de l'empire : tableau dense, lunes en retrait, en-têtes abrégés. */
.clz-empire-table th, .clz-empire-table td { padding: .25rem .35rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clz-empire-table thead th { font-size: .72rem; }
.clz-empire-table tr.clz-empire-moon td { color: rgba(203, 214, 234, .85); background: rgba(201, 150, 255, .05); }
.clz-empire-table abbr { text-decoration: none; cursor: help; border-bottom: 1px dotted rgba(203, 214, 234, .5); }
.clz-empire-research .badge { font-size: .76rem; }

/* 2.8.0-beta.37 — Synthèse de l'empire : colonnes séparées par des traits fins, groupes de colonnes marqués d'un trait
   un peu plus visible, lignes alternées, en-têtes sur fond léger ; encadrés des compteurs plus soignés. */
.clz-empire-table { border-collapse: separate; border-spacing: 0; }
.clz-empire-table th, .clz-empire-table td { border-left: 1px solid rgba(120, 150, 230, .14); }
.clz-empire-table th:first-child, .clz-empire-table td:first-child { border-left: 0; }
.clz-empire-table th.clz-grp, .clz-empire-table td.clz-grp { border-left: 1px solid rgba(87, 211, 255, .38); }
.clz-empire-table thead th { background: rgba(87, 211, 255, .07); border-bottom: 1px solid rgba(87, 211, 255, .3); vertical-align: middle; }
.clz-empire-table thead tr:first-child th { border-bottom-color: rgba(120, 150, 230, .2); }
.clz-empire-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .025); }
.clz-empire-table tbody tr:hover td { background: rgba(87, 211, 255, .07); }
.clz-empire-table tbody td { border-bottom: 1px solid rgba(120, 150, 230, .1); }
.clz-empire-table tfoot td { background: rgba(87, 211, 255, .06); border-top: 1px solid rgba(87, 211, 255, .3); }
.clz-empire-cards .card { background: linear-gradient(160deg, rgba(20, 30, 62, .9), rgba(10, 16, 36, .92)); border-color: rgba(87, 211, 255, .28); box-shadow: 0 0 18px rgba(87, 211, 255, .08); }
.clz-empire-cards .card .small.text-secondary { text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; }
/* Tableaux à colonnes séparées (Administration › Joueurs…). */
.clz-table-cols th, .clz-table-cols td { border-left: 1px solid rgba(120, 150, 230, .16); }
.clz-table-cols th:first-child, .clz-table-cols td:first-child { border-left: 0; }
.clz-table-cols thead th { background: rgba(87, 211, 255, .06); }
/* Adresses IP : une pastille par adresse, espacées. */
.clz-ips { display: inline-flex; flex-wrap: wrap; gap: .35rem .6rem; }
.clz-ip { padding: .1rem .45rem; border-radius: .4rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(120, 150, 230, .18); font-variant-numeric: tabular-nums; }
.clz-ip .clz-ip-last { font-weight: 600; }


/* 2.8.0-beta.38 — Inscription : reprise d'un compte à l'abandon. */
.clz-adopt-list { display: grid; gap: .5rem; max-height: 60vh; overflow-y: auto; padding-right: .2rem; scrollbar-width: thin; }
.clz-adopt-card { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; align-items: start; padding: .55rem .7rem; border-radius: .7rem; cursor: pointer;
    border: 1px solid rgba(120, 150, 230, .22); background: rgba(255, 255, 255, .03); }
.clz-adopt-card:has(input[name="account"]:checked) { border-color: rgba(245, 181, 61, .7); background: rgba(245, 181, 61, .07); box-shadow: 0 0 14px rgba(245, 181, 61, .15); }
.clz-adopt-card > .form-check-input { margin-top: .2rem; }
.clz-adopt-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: .2rem .8rem; color: rgba(203, 214, 234, .82); }
.clz-adopt-names { grid-column: 1 / -1; margin-top: .35rem; display: none; }
.clz-adopt-card:has(input[name="account"]:checked) .clz-adopt-names { display: block; }
.clz-adopt-names .input-group-text { min-width: 8.5rem; font-size: .78rem; }

/* 2.8.0-beta.39 — Marchand mis en évidence dans le menu : orange, encadré comme « Forum » ; il clignote en jaune quelques
   fois (une fois par session), puis reste orange. */
.clz-nav-merchant { color: #ff9f43 !important; font-weight: 600; border: 1px solid rgba(255, 159, 67, .5); border-radius: .5rem; background: rgba(255, 159, 67, .08); margin: .15rem 0; }
.clz-nav-merchant:hover, .clz-nav-merchant:focus-visible { color: #fff !important; background: rgba(255, 159, 67, .2); }
/* 2.9.0-beta.14 : clignotement lisible — le fond jaune et le texte sombre ne changent pas pendant l'animation (avant, le texte
   passait par l'orange sur un fond déjà jaune : illisible) ; seuls le halo et la luminosité pulsent. */
.clz-menu .nav-link.clz-nav-merchant.clz-flash, .clz-nav-merchant.clz-flash { color: #1a1300 !important; background: #ffd23f !important; border-color: #ffd23f; box-shadow: none; animation: clz-merchant-flash .55s ease-in-out 6; }
.clz-nav-merchant.clz-flash i, .clz-nav-merchant.clz-flash .clz-merchant-left { color: #1a1300; text-shadow: none; }
.clz-nav-merchant.clz-flash .clz-merchant-left { background: rgba(26, 19, 0, .14); }
@keyframes clz-merchant-flash {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 210, 63, 0); filter: none; }
    50% { box-shadow: 0 0 16px rgba(255, 210, 63, .75); filter: brightness(1.12); }
}
/* Rubrique active (page du marchand ouverte) : fond orange franc et texte clair, compteur contrasté. */
.clz-menu .nav-link.clz-nav-merchant.active:not(.clz-flash) { color: #fff !important; background: linear-gradient(90deg, rgba(255, 159, 67, .42), rgba(255, 159, 67, .14)); border-color: rgba(255, 159, 67, .85); box-shadow: inset 3px 0 0 #ff9f43; }
.clz-menu .nav-link.clz-nav-merchant.active:not(.clz-flash) .clz-merchant-left { background: #ff9f43; color: #1a1300; }
@media (prefers-reduced-motion: reduce) { .clz-nav-merchant.clz-flash { animation: none; } }
.clz-nav-merchant .clz-merchant-left { margin-left: auto; padding: 0 .35rem; border-radius: .35rem; background: rgba(255, 159, 67, .18); font-variant-numeric: tabular-nums; }
.clz-nav-merchant { display: flex; align-items: center; gap: .35rem; }
/* 2.9.0-beta.18 : planète où se trouve le marchand (il passe de planète en planète). */
.clz-nav-merchant .clz-merchant-left { white-space: nowrap; flex-shrink: 0; }
.clz-nav-merchant .clz-merchant-where { flex: 1 1 0; min-width: 0; contain: inline-size; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; font-weight: 500; }
.clz-nav-merchant .clz-merchant-where:empty { display: none; }
/* 2.8.0-beta.41 — Transplantation : une ligne par compte à exporter. */
.clz-tp-row { padding: .5rem .6rem; border: 1px solid rgba(120, 150, 230, .2); border-radius: .6rem; margin-bottom: .5rem; background: rgba(255, 255, 255, .02); }
/* 2.8.0-beta.42 — Suppression d'un univers : zone dangereuse. */
.clz-danger-zone { padding: .6rem; border: 1px solid rgba(220, 53, 69, .55); border-radius: .6rem; background: rgba(220, 53, 69, .07); }

.clz-mv-name { min-width: 14rem; }

/* 2.8.0-beta.43 — Trou noir dévoreur (règles, Équilibre) et créateur d'univers planifié. */
.clz-figure-blackhole { margin: .5rem 0 1rem; }
.clz-figure-blackhole img { width: 100%; max-width: 960px; height: auto; border-radius: .8rem; box-shadow: 0 0 2.5rem rgba(255, 140, 40, .25); }
.clz-figure-blackhole figcaption { font-size: .8rem; color: var(--bs-secondary-color); margin-top: .3rem; }
.clz-blackhole-thumb { width: 100%; max-width: 320px; height: auto; border-radius: .6rem; }
.clz-creator-section { padding: .6rem; border: 1px solid rgba(120, 150, 230, .25); border-radius: .6rem; background: rgba(255, 255, 255, .02); }
.clz-creator-section > .clz-creator-title { font-weight: 600; font-size: .85rem; margin-bottom: .4rem; }
.clz-plan-box { font-size: .8rem; }
.clz-plan-box table { font-size: .78rem; }
.clz-adv-group { border-top: 1px dashed rgba(120, 150, 230, .25); padding-top: .4rem; margin-top: .4rem; }

/* 2.8.0-beta.44 — Accueil : le trou noir, dévoreur de ressources (légende sur deux lignes au besoin, lueur orangée). */
.clz-art-blackhole { border-color: rgba(255, 159, 67, .4); box-shadow: 0 0 18px rgba(255, 140, 50, .12); }
.clz-art-blackhole .clz-art-caption { line-height: 1.25; font-size: .86em; }

@media (max-width: 575.98px) { .clz-art-blackhole .clz-art-caption { font-size: .72em; padding: .3rem .45rem; } .clz-art-blackhole > img { object-position: 50% 30%; } }

/* 2.8.0-beta.49 — Boutique : participation par PayPal (logo sur pastille blanche, étapes, totaux de la comptabilité). */
.clz-pp-head { display: flex; align-items: center; gap: 1rem; }
/* Fond du logo : les couleurs de PayPal (#003087, #0070E0) ne ressortent que sur fond clair — sur le fond sombre du jeu
   elles se perdent. Le logo est détouré et posé sur une tuile blanc → bleu pâle (moins éblouissante qu'un blanc pur),
   cerclée du bleu PayPal et légèrement lumineuse. */
.clz-pp-logo, .clz-pp-logo-sm { background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 55%, #e6f0fb 100%); border: 1px solid rgba(0, 112, 224, .35);
    box-shadow: 0 0 0 3px rgba(0, 112, 224, .12), 0 0 18px rgba(0, 112, 224, .28); object-fit: contain; }
.clz-pp-logo { flex: none; width: 84px; height: 84px; padding: .5rem; border-radius: .9rem; }
.clz-pp-logo-sm { width: 34px; height: 34px; padding: .2rem; border-radius: .5rem; box-shadow: 0 0 10px rgba(0, 112, 224, .25); }
.clz-pp-mail { color: #9fd7ff; user-select: all; }
.clz-pp-steps { padding-left: 1.2rem; margin-bottom: .6rem; }
.clz-pp-steps li { margin-bottom: .35rem; }
.clz-pp-total { padding: .5rem .7rem; border: 1px solid rgba(87, 211, 255, .28); border-radius: .6rem; background: rgba(87, 211, 255, .05); }
@media (max-width: 575.98px) { .clz-pp-head { flex-direction: column; align-items: flex-start; } }

/* 2.9.0-beta.1 : « Participer (bonus Matière Noire) » (joueur) et « Participations » (administration) en rouge orangé,
   qui gonflent et dégonflent doucement. */
.clz-menu .nav-link.clz-nav-shop, .clz-menu .nav-link.clz-nav-shop .bi { color: #ff5a1f; font-weight: 600; }
.clz-menu .nav-link.clz-nav-shop .clz-shop-pulse { display: inline-block; transform-origin: left center; animation: clz-shop-pulse 2.4s ease-in-out infinite; }
.clz-menu .nav-link.clz-nav-shop:hover, .clz-menu .nav-link.clz-nav-shop.active { color: #ff7a45; }
@keyframes clz-shop-pulse { 0%, 100% { transform: scale(1); text-shadow: 0 0 0 rgba(255, 90, 31, 0); } 50% { transform: scale(1.07); text-shadow: 0 0 10px rgba(255, 90, 31, .55); } }
@media (prefers-reduced-motion: reduce) { .clz-menu .nav-link.clz-nav-shop .clz-shop-pulse { animation: none; } }
/* Textes écrits lettre après lettre (2.9.0-beta.21) : la partie pas encore écrite garde sa place, invisible ; le curseur
   est posé par-dessus, hors du flux — l'encadré ne change jamais de taille. */
/* Sans crénage ni ligatures : une lettre pas encore écrite ne change pas la largeur de celle qui la précède. */
.js-typewriter { font-kerning: none; font-variant-ligatures: none; }
.clz-type-rest { visibility: hidden; position: relative; }
/* 2.9.0-beta.25 : curseur bleu turquoise qui clignote en éclair, puis reste un instant au bout du texte. */
.clz-typing .clz-type-at::before { content: '▌'; visibility: visible; position: absolute; left: 0; top: 0; color: #2ee6d6;
    text-shadow: 0 0 6px rgba(46, 230, 214, .9), 0 0 14px rgba(46, 230, 214, .55); animation: clz-caret-flash .7s ease-in-out infinite; pointer-events: none; }
.clz-typing.clz-type-done .clz-type-at::before { animation: clz-caret-flash .45s ease-in-out infinite, clz-caret-out 1.6s ease-in forwards; }
@keyframes clz-caret-flash { 0%, 100% { opacity: 1; } 45% { opacity: 1; } 55% { opacity: .1; } 90% { opacity: .1; } }
@keyframes clz-caret-out { 0%, 70% { filter: none; } 100% { filter: blur(1px); color: rgba(46, 230, 214, 0); text-shadow: none; } }
.clz-type-hidden { visibility: hidden; }
/* 2.9.0-beta.1 : laboratoire d'univers. */
.clz-input-xs { width: 5.5rem; }
.clz-lab-finding { border-left: 3px solid var(--bs-secondary); padding: .35rem .6rem; margin-bottom: .35rem; background: rgba(255, 255, 255, .03); }
.clz-lab-finding.ok { border-color: var(--bs-success); }
.clz-lab-finding.info { border-color: var(--bs-info); }
.clz-lab-finding.warning { border-color: var(--bs-warning); }
.clz-lab-finding.danger { border-color: var(--bs-danger); }
.clz-lab-example { white-space: pre-wrap; font-size: .75rem; color: var(--bs-secondary-color); max-width: 32rem; }
.clz-input-res { min-width: 8.5rem; max-width: 11rem; }

/* 2.9.0-beta.2 — Boutique Dedipass : mire de paiement intégrée au jeu (terminal aux couleurs de CoLoniZers). */
.clz-dp-head { display: flex; align-items: center; gap: 1rem; }
.clz-dp-badge { flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 1rem; font-size: 2rem; color: #ff7a45;
    background: radial-gradient(circle at 30% 25%, rgba(255, 122, 69, .35), rgba(20, 24, 40, .9) 70%); border: 1px solid rgba(255, 122, 69, .55); box-shadow: 0 0 18px rgba(255, 90, 31, .25); }
@media (max-width: 575.98px) { .clz-dp-head { flex-direction: column; align-items: flex-start; } }
.clz-dp-terminal { border: 1px solid rgba(255, 122, 69, .45); box-shadow: 0 0 0 1px rgba(87, 211, 255, .12), 0 0 36px rgba(255, 90, 31, .18); overflow: hidden; }
.clz-dp-top { background: linear-gradient(120deg, rgba(255, 90, 31, .22), rgba(87, 211, 255, .10) 60%, rgba(10, 14, 28, .2)); border-bottom: 1px solid rgba(255, 122, 69, .35); }
.clz-dp-orb { border-radius: 50%; box-shadow: 0 0 18px rgba(173, 120, 255, .55); }
.clz-dp-dm { color: #b99bff; font-weight: 700; }
.clz-dp-price { color: #ffd27a; font-weight: 700; }
.clz-dp-steps { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.clz-dp-steps li { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .7rem; border-radius: .7rem; background: rgba(255, 255, 255, .03); border: 1px solid rgba(87, 211, 255, .18); }
@media (max-width: 767.98px) { .clz-dp-steps { grid-template-columns: 1fr; } }
.clz-dp-num { flex: none; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; font-weight: 700; color: #1a0d06; background: linear-gradient(180deg, #ffb27a, #ff5a1f); }
.clz-dp-sms { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .2rem; }
.clz-dp-key, .clz-dp-short { font-family: var(--bs-font-monospace); font-weight: 700; letter-spacing: .08em; padding: .1rem .5rem; border-radius: .4rem; }
.clz-dp-key { color: #1a0d06; background: #ffb27a; box-shadow: 0 0 10px rgba(255, 122, 69, .45); }
.clz-dp-short { color: #e9f7ff; background: rgba(87, 211, 255, .14); border: 1px solid rgba(87, 211, 255, .5); }
.clz-dp-frame-wrap { padding: .45rem; border-radius: .9rem; background: linear-gradient(135deg, rgba(255, 122, 69, .55), rgba(87, 211, 255, .45)); box-shadow: 0 0 22px rgba(87, 211, 255, .15); }
.clz-dp-frame { display: block; width: 100%; height: 520px; min-height: 260px; border: 0; border-radius: .6rem; background: #fff; }
.clz-dp-state { padding: .55rem .8rem; border-radius: .6rem; border: 1px dashed rgba(87, 211, 255, .35); color: #b9c7dc; }
.clz-dp-state.checking { border-style: solid; color: #9fd7ff; }
.clz-dp-state.ok { border: 1px solid rgba(61, 220, 176, .7); color: #d9fbef; background: rgba(61, 220, 176, .12); box-shadow: 0 0 18px rgba(61, 220, 176, .25); font-weight: 600; }
.clz-dp-state.err { border: 1px solid rgba(255, 122, 69, .7); color: #ffd9c7; background: rgba(255, 90, 31, .1); }
.clz-spin { display: inline-block; animation: clz-spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .clz-spin { animation: none; } }
/* Administration › Participations : onglets Dedipass / PayPal, clés, montants. */
.clz-dp-key-state { font-size: .75rem; }
.clz-dp-net { max-width: 7rem; }
.clz-dp-tabs .nav-link.active { color: #ff7a45; border-color: rgba(255, 122, 69, .6); }

/* 2.9.0-beta.3 — Administration › Participations : vérification de la liaison avec Dedipass, part d'affichage du menu. */
.clz-dp-pct { width: 6.5rem; }
.clz-dpc li { display: flex; gap: .45rem; align-items: baseline; padding: .22rem 0; border-bottom: 1px dashed rgba(255, 255, 255, .06); }
.clz-dpc li:last-child { border-bottom: 0; }
.clz-dpc li > span:first-of-type { flex: 1; }
.clz-dpc-ok > i { color: #3ddc97; }
.clz-dpc-warn > i { color: #ffc14d; }
.clz-dpc-err > i { color: #ff5d5d; }
.clz-dpc-err > span:first-of-type { color: #ffb3b3; }
.clz-dpc-off { color: var(--bs-secondary-color, #8a94a6); }
.clz-dpc-ms { color: var(--bs-secondary-color, #8a94a6); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clz-dpc-pack { padding: .4rem .6rem; margin-bottom: .5rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: .5rem; background: rgba(0, 0, 0, .18); }

/* 2.9.0-beta.4 — boutique : mire Dedipass d'origine sous les packs. */
.card.clz-card.clz-dpo-sel { border-color: rgba(255, 140, 60, .85); box-shadow: 0 0 0 1px rgba(255, 140, 60, .45), 0 0 18px rgba(255, 120, 40, .25); }
.clz-dpo .card-body { min-height: 6rem; }
.clz-dpo [data-dedipass] { border-radius: .5rem; overflow: hidden; }

/* 2.9.0-beta.5 — boutique : mire faite par le jeu. */
.clz-dpg-send { font-size: 1.6rem; font-weight: 700; letter-spacing: .02em; }
.clz-dpg-send .clz-dp-key, .clz-dpg-send .clz-dp-short { font-size: 1.35rem; }
.clz-dpg-to { font-size: 1rem; font-weight: 400; opacity: .8; }
.clz-dpg-smsplus { display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border: 2px solid #e2007a; border-radius: 1rem; color: #ff4fae; font-size: .8rem; font-weight: 800; vertical-align: middle; }
.clz-dpg-form { max-width: 26rem; }
.clz-dpg-form .form-control { letter-spacing: .12em; }

/* 2.9.0-beta.13 — page du marchand : illustration à la largeur de la page, responsive. */
.clz-merchant-art { margin: 0; border-radius: .75rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.clz-merchant-art img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover; object-position: 50% 45%; }
@media (min-width: 768px) { .clz-merchant-art img { max-height: min(46vh, 520px); } }
/* 2.9.0-beta.16 : marchand en temps réel — point « en direct » et valeur qui vient de changer. */
.clz-live-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: clz-live-pulse 2s ease-out infinite; vertical-align: middle; }
@keyframes clz-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); } 70% { box-shadow: 0 0 0 .45rem rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
.clz-live-changed { animation: clz-live-flash 1.2s ease-out; }
@keyframes clz-live-flash { 0% { background: rgba(255, 210, 63, .35); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .clz-live-dot, .clz-live-changed { animation: none; } }
/* 2.9.0-beta.26 — Guide : graphiques et schémas en SVG (palette catégorielle validée pour les daltonismes sur fond sombre,
   couleurs dans un ordre fixe ; textes en couleurs de texte, jamais celle de la série). */
.clz-chart { background: rgba(9, 16, 34, .72); border: 1px solid rgba(87, 211, 255, .18); border-radius: .8rem; padding: .8rem 1rem; }
.clz-chart-title { font-weight: 600; color: #e9eef8; margin-bottom: .35rem; }
.clz-chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.clz-chart-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .8rem; color: #c3cbe0; margin-bottom: .2rem; }
.clz-chart-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.clz-chart-key { width: .9rem; height: .55rem; border-radius: 2px; display: inline-block; }
.clz-c1 { background: #3987e5; } .clz-c2 { background: #d95926; } .clz-c3 { background: #199e70; } .clz-c4 { background: #c98500; } .clz-c5 { background: #d55181; } .clz-c6 { background: #9085e9; }
.clz-chart-grid { stroke: rgba(203, 214, 234, .1); stroke-width: 1; }
.clz-chart-axis { stroke: rgba(203, 214, 234, .35); stroke-width: 1; }
.clz-chart-mark { stroke: rgba(46, 230, 214, .55); stroke-width: 1.5; stroke-dasharray: 4 4; }
.clz-chart-tick, .clz-chart-label, .clz-chart-note, .clz-chart-val, .clz-chart-end, .clz-chart-cat { font-size: 12px; fill: #aeb8cf; }
.clz-chart-label { fill: #c3cbe0; }
.clz-chart-note { fill: #2ee6d6; }
.clz-chart-end, .clz-chart-cat { fill: #dfe6f3; }
.clz-chart-val { fill: #dfe6f3; font-size: 11px; }
.clz-chart-in { font-size: 12px; fill: #fff; font-weight: 600; }
.clz-chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.clz-chart-dot { stroke: #0b1222; stroke-width: 2; }
.clz-chart-dot:hover, .clz-chart-bar:hover { filter: brightness(1.25); }
.clz-chart-line.clz-s1 { stroke: #3987e5; } .clz-chart-line.clz-s2 { stroke: #d95926; } .clz-chart-line.clz-s3 { stroke: #199e70; } .clz-chart-line.clz-s4 { stroke: #c98500; } .clz-chart-line.clz-s5 { stroke: #d55181; }
.clz-chart-dot.clz-s1, .clz-chart-bar.clz-s1 { fill: #3987e5; } .clz-chart-dot.clz-s2, .clz-chart-bar.clz-s2 { fill: #d95926; } .clz-chart-dot.clz-s3, .clz-chart-bar.clz-s3 { fill: #199e70; }
.clz-chart-dot.clz-s4, .clz-chart-bar.clz-s4 { fill: #c98500; } .clz-chart-dot.clz-s5, .clz-chart-bar.clz-s5 { fill: #d55181; }
.clz-chart-bar { stroke: #0b1222; stroke-width: 1; }
.clz-flow-box { fill: rgba(13, 22, 44, .95); stroke-width: 2; }
.clz-flow-box.clz-n1 { stroke: #3987e5; } .clz-flow-box.clz-n2 { stroke: #d95926; } .clz-flow-box.clz-n3 { stroke: #199e70; } .clz-flow-box.clz-n4 { stroke: #c98500; } .clz-flow-box.clz-n5 { stroke: #9085e9; } .clz-flow-box.clz-n6 { stroke: #d55181; }
.clz-flow-title { font-size: 14px; font-weight: 600; fill: #e9eef8; }
.clz-flow-sub { font-size: 11.5px; fill: #aeb8cf; }
.clz-flow-arrow { stroke: rgba(203, 214, 234, .55); stroke-width: 1.6; fill: none; }
.clz-flow-head { fill: rgba(203, 214, 234, .75); }
.clz-flow-label { font-size: 11px; fill: #2ee6d6; }
.clz-flow-fo { display: flex; flex-direction: column; justify-content: center; height: 100%; font-size: 12px; line-height: 1.25; color: #aeb8cf; text-align: center; }
.clz-flow-fo strong { color: #e9eef8; font-size: 12.5px; margin-bottom: .15rem; }
.clz-guide .clz-shot { margin: 1rem 0; }
.clz-guide .clz-shot img { width: 100%; height: auto; border-radius: .6rem; border: 1px solid rgba(87, 211, 255, .25); }
.clz-guide .clz-callouts { columns: 2 260px; column-gap: 1.5rem; padding-left: 1.3rem; font-size: .9rem; }
.clz-guide .clz-callouts li { break-inside: avoid; margin-bottom: .25rem; }
.clz-guide .clz-callouts li::marker { color: #2ee6d6; font-weight: 700; }
.clz-guide-toc .clz-toc-part { display: block; margin-top: .6rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #2ee6d6; }

/* 2.9.0-beta.28 — Nombres du bandeau : boîtes en ligne pour qu'ils puissent réserver leur largeur (voir steady() dans
   app.js) ; la police des chiffres n'ayant pas de chiffres à chasse fixe, sans cette réserve les tuiles changeaient de
   largeur chaque seconde et les outils de droite passaient à la ligne puis revenaient. */
@media (min-width: 768px) { .clz-topbar .clz-res-val, .clz-topbar .js-num, #res-energy, #res-dm { display: inline-block; } }
@media (max-width: 767.98px) { .clz-topbar .clz-res-val, .clz-topbar .js-num, #res-energy, #res-dm { min-width: 0 !important; } }
/* 2.9.0-beta.28 — 1 820 à 2 099 px (écrans 1080p, barre de défilement de Firefox comprise) : tuiles un peu plus serrées
   pour que la réserve de largeur des nombres laisse tout le bandeau sur une seule ligne. */
@media (min-width: 1820px) and (max-width: 2099.98px) {
    .clz-topbar .clz-resbar.gap-1 { gap: .3rem !important; }
    .clz-topbar .clz-res { padding-right: .6rem; }
    .clz-topbar .clz-res-val { letter-spacing: .01em; }
    .clz-topbar > .d-flex { column-gap: .45rem !important; }
}
/* Même raison, écrans moyens : chiffres sans interlettrage (la réserve de largeur ne fait pas passer les outils à la ligne). */
@media (min-width: 768px) and (max-width: 1819.98px) { .clz-topbar .clz-res-val { letter-spacing: 0; } }
@media (min-width: 1400px) and (max-width: 1819.98px) { .clz-topbar .clz-res { padding-right: .35rem; } }
@media (min-width: 1280px) and (max-width: 1399.98px) { .clz-topbar .clz-res { padding-right: .25rem; } .clz-topbar > .d-flex { column-gap: .3rem !important; } }

/* 2.9.0-beta.29 — Menu des outils. Quand le bandeau ne tient plus sur une ligne (app.js mesure, classe
   .clz-tools-compact sur .clz-topbar), tous les outils passent dans un menu (hamburger) : messages (avec le nombre de non
   lus, repris en pastille sur le bouton), administration, signalement, habillages, palette, langue. Restent visibles : la
   pastille du joueur, l'alerte d'attaque et « Déconnexion », réduit à son icône. Tout reprend sa place et sa forme dès que
   la largeur le permet. Téléphone : toujours ce mode, avec trois points verticaux (le hamburger de gauche ouvre le menu de
   navigation). */
.clz-tool-more { position: relative; }
.clz-tool-more .clz-tool-badge { position: absolute; top: -6px; right: -7px; font-size: .62rem; padding: .2em .45em;
    box-shadow: 0 0 0 2px rgba(7, 11, 24, .95); pointer-events: none; z-index: 2; }
.clz-topbar:not(.clz-tools-compact) .clz-tool-more .clz-tool-badge { display: none !important; }
.clz-topbar .clz-tool .clz-more-narrow { display: none; }
@media (max-width: 991.98px) { .clz-topbar .clz-tool .clz-more-wide { display: none; } .clz-topbar .clz-tool .clz-more-narrow { display: inline-block; } }
/* Tablettes (768 à 991 px) : outils sur la première ligne, à droite de l'astre ; les ressources dessous, centrées (avant,
   les outils tombaient seuls sur une troisième ligne). */
@media (min-width: 768px) and (max-width: 991.98px) {
    .clz-topbar-tools { order: 2; }
    .clz-topbar .clz-resbar { order: 3; width: 100%; justify-content: center; }
}
.clz-more-full { display: none !important; }
.clz-topbar.clz-tools-compact .clz-more-full { display: flex !important; }
.clz-topbar.clz-tools-compact .clz-tool-full, .clz-topbar.clz-tools-compact .clz-tool-secondary,
.clz-topbar.clz-tools-compact #clz-palette-open { display: none !important; }
.clz-topbar.clz-tools-compact .clz-tool-more { display: inline-flex; }
.clz-topbar.clz-tools-compact .clz-tool-logout .clz-tool-label { display: none; }
.clz-topbar.clz-tools-compact .clz-tool-logout { width: 34px; padding: 0; }
@media (max-width: 767.98px) { .clz-topbar.clz-tools-compact .clz-tool-logout { width: 32px; } }
/* Mesure (instantanée, jamais affichée) : tout en pleine taille sur une seule ligne. */
.clz-topbar.clz-tools-measure > .d-flex { flex-wrap: nowrap !important; }
.clz-topbar.clz-tools-measure .clz-resbar { flex: 0 0 auto !important; flex-wrap: nowrap !important; }
.clz-topbar.clz-tools-measure .clz-resbar, .clz-topbar.clz-tools-measure .clz-topbar-tools { margin-left: 0 !important; margin-right: 0 !important; }

/* 2.9.0-beta.37 : fenêtre « ce qu'il faut » (prérequis, coût, énergie, blocage) et ses déclencheurs sur les fiches */
.clz-why-btn { line-height: 1; font-size: .95rem; background: none; }
.clz-why-btn:hover, .clz-why-btn:focus-visible { color: #fff !important; }
.clz-why-zone { cursor: help; }
.clz-act-wrap { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.clz-act-wrap.clz-act-icon { flex: 0 0 auto; }
.clz-why-cover { position: absolute; inset: 0; display: none; cursor: help; border-radius: inherit; }
form.js-why-form.is-blocked .clz-why-cover { display: block; }
.clz-why-list li { padding: .2rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.clz-why-list li:last-child { border-bottom: 0; }
.clz-why-list li > .bi { margin-right: .3rem; }
.clz-why-list li.ok > .bi { color: var(--bs-success); }
.clz-why-list li.ko > .bi { color: var(--bs-danger); }
.clz-why-list li.warn > .bi { color: var(--bs-warning); }
.clz-why-list a { color: inherit; text-decoration: underline dotted; }
.clz-why-modal .modal-title img { box-shadow: 0 0 .6rem rgba(0,170,255,.35); }
/* 2.9.0-beta.37 : carte « Vie de la colonie » */
.clz-life .clz-life-mood { font-size: .95rem; line-height: 1.45; }
.clz-life .clz-life-grid .fs-6 { line-height: 1.2; }

/* 2.9.0-beta.46 : erreurs en bas à droite — cadre rouge translucide, texte rouge, icône, croix (même esthétique que le
   message de la beta.45, à son ancienne place). */
.clz-err-msg { display: flex; align-items: flex-start; gap: .45rem; width: min(26rem, calc(100vw - 2rem)); margin-top: .4rem; padding: .4rem .5rem .4rem .65rem; border-radius: .6rem; background: rgba(38, 6, 12, .86); border: 1px solid rgba(255, 92, 102, .6); color: #ff9aa1; font-size: .86rem; line-height: 1.35; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: auto; animation: clz-err-in .25s ease-out; transition: opacity .25s, transform .25s; }
.clz-err-msg.is-leaving { opacity: 0; transform: translateY(6px); }
.clz-err-msg .bi { color: #ff5c66; margin-top: .1rem; flex-shrink: 0; }
.clz-err-msg > span { flex: 1 1 auto; }
.clz-err-msg .btn-close { width: .5rem; height: .5rem; padding: .3rem; margin-left: .15rem; flex-shrink: 0; opacity: .7; }
.clz-err-msg .btn-close:hover { opacity: 1; }
@keyframes clz-err-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .clz-err-msg { animation: none; transition: none; } }

/* 2.9.0-beta.52 : vue d'ensemble — illustration du type agrandie (59 → 77 px, +30 %), nom centré à côté, libellé aligné */
.clz-ptype { display: flex; align-items: center; gap: .55rem; }
.clz-ptype img { flex: 0 0 auto; width: 77px; height: 77px; object-fit: cover; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.clz-ptype-dt { align-self: center; }

/* ---------- 2.9.0-beta.58 : connexion et inscription revues ---------- */
.clz-auth-wrap { min-height: calc(100vh - 13rem); display: flex; align-items: center; justify-content: center; padding: 1rem 0; }
.clz-auth-card { width: 100%; max-width: 34rem; padding: 2rem 2.2rem; border-radius: 1.25rem; background: linear-gradient(180deg, rgba(22, 32, 62, .92), rgba(10, 16, 34, .94));
    border: 1px solid rgba(110, 160, 255, .25); box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .55), 0 0 2.5rem rgba(80, 140, 255, .12); backdrop-filter: blur(8px); }
.clz-auth-card.clz-auth-wide { max-width: 46rem; }
.clz-auth-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.clz-auth-ico { flex: 0 0 auto; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 1rem; font-size: 1.6rem; color: #fff;
    background: linear-gradient(135deg, #4f7cff, #7a5cff); box-shadow: 0 .6rem 1.4rem rgba(79, 124, 255, .45); }
.clz-auth-field .input-group-text { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: #9fb3d9; min-width: 2.8rem; justify-content: center; }
.clz-auth-field .form-control { background: rgba(4, 9, 22, .55); border-color: rgba(255, 255, 255, .14); }
.clz-auth-field .form-control:focus { border-color: #6c8cff; box-shadow: 0 0 0 .2rem rgba(108, 140, 255, .25); }
.clz-auth-field .js-eye { border-color: rgba(255, 255, 255, .14); color: #9fb3d9; }
.clz-auth-submit { font-weight: 700; letter-spacing: .02em; box-shadow: 0 .6rem 1.4rem rgba(70, 110, 255, .35); }
.clz-auth-or { display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0 1rem; color: #8ea2c8; font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; }
.clz-auth-or::before, .clz-auth-or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .15); }
.clz-auth-alt { font-weight: 600; }
.clz-auth-alt.btn-outline-info { border-width: 2px; }
@media (max-width: 575.98px) { .clz-auth-card { padding: 1.4rem 1.1rem; } .clz-auth-wrap { min-height: 0; } .clz-auth-ico { width: 2.8rem; height: 2.8rem; font-size: 1.3rem; } }

/* Vérification anti-robot : grille de vignettes, cases superposées */
.clz-cap { border: 0; padding: 0; min-width: 0; }
.clz-cap-box { position: relative; width: 100%; max-width: 360px; aspect-ratio: 330 / 400; }
.clz-cap-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: .7rem; }
.clz-cap-check { position: absolute; opacity: 0; pointer-events: none; }
.clz-cap-cell { position: absolute; width: 30.303%; height: 25%; border-radius: .5rem; cursor: pointer; border: 2px solid transparent; transition: border-color .12s, background .12s; }
.clz-cap-cell:hover { border-color: rgba(120, 170, 255, .7); }
.clz-cap-check:focus-visible + .clz-cap-cell { border-color: #ffd23d; box-shadow: 0 0 0 .2rem rgba(255, 210, 61, .35); }
.clz-cap-check:checked + .clz-cap-cell { border-color: #2fd68a; background: rgba(47, 214, 138, .16); }
.clz-cap-check:checked + .clz-cap-cell::after { content: "\2713"; position: absolute; top: .2rem; right: .35rem; width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
    border-radius: 50%; background: #2fd68a; color: #04210f; font-weight: 800; font-size: .85rem; }

.clz-cap-c0 { left: 2.727%; top: 19.500%; }
.clz-cap-c1 { left: 35.152%; top: 19.500%; }
.clz-cap-c2 { left: 67.576%; top: 19.500%; }
.clz-cap-c3 { left: 2.727%; top: 46.250%; }
.clz-cap-c4 { left: 35.152%; top: 46.250%; }
.clz-cap-c5 { left: 67.576%; top: 46.250%; }
.clz-cap-c6 { left: 2.727%; top: 73.000%; }
.clz-cap-c7 { left: 35.152%; top: 73.000%; }
.clz-cap-c8 { left: 67.576%; top: 73.000%; }
/* Fin prévue : sous la liste des univers, et en clair sur la carte de l'accueil */
.clz-universe-end-line { color: #9fb3d9; }
.clz-universe-name .clz-universe-title { display: block; }
.clz-universe-life { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; max-width: 100%; padding: .2rem .6rem; border-radius: .6rem;
    font-family: "Barlow", sans-serif; font-size: .9rem; font-weight: 600; text-shadow: none;
    background: rgba(4, 7, 16, .72); border: 1px solid rgba(120, 170, 255, .45); color: #cfe0ff; }
.clz-universe-life.clz-uend-warning { border-color: rgba(255, 193, 7, .7); color: #ffe08a; }
.clz-universe-life.clz-uend-danger { border-color: rgba(239, 68, 68, .75); color: #fecaca; }
.clz-universe-end .btn-close { flex: 0 0 auto; }
/* (revue) Inscription : reprise grisée quand l'univers choisi n'est pas celui affiché ; envoi en cours. */
.clz-stale { opacity: .45; }
.btn.clz-busy { cursor: progress; }
.clz-universe-pick .js-universe-go { white-space: nowrap; }
/* 2.9.1-beta.22 : détails d'un univers à l'accueil (clic sur sa carte) */
.clz-universe-details { padding: .8rem 1rem; border-radius: .8rem; background: rgba(8, 14, 30, .88); border: 1px solid rgba(125, 255, 255, .25); color: #e9eefb; font-size: .85rem; }
.clz-ud-name { color: #fff; font-size: 1rem; }
.clz-ud-block { padding: .45rem 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.clz-ud-title { color: #9fe8ff; font-weight: 600; margin-bottom: .25rem; }
.clz-ud-sub { color: #c7d0e6; font-weight: 400; }
.clz-ud-grid { display: grid; grid-template-columns: auto 1fr; gap: .1rem 1rem; margin: 0; }
.clz-ud-grid dt { font-weight: 400; color: #d7deef; }
.clz-ud-grid dd { margin: 0; text-align: right; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.clz-ud-best { display: block; color: #9fb2d6; font-weight: 400; font-size: .76rem; }
.clz-ud-note { color: #9fb2d6; font-size: .75rem; margin-top: .2rem; }
.clz-universe-card[aria-expanded="true"] { outline: 2px solid rgba(125, 255, 255, .6); outline-offset: 2px; }
/* 2.9.1-beta.23 : messagerie — barre de sélection et lignes cochées */
.clz-msg-bar { padding: .4rem .6rem; border-radius: .5rem; background: var(--clz-panel); border: 1px solid var(--clz-line); }
.clz-msg-bar-top { position: sticky; top: .5rem; z-index: 5; }
.clz-msg-bar .form-check-input { width: 1.15rem; height: 1.15rem; cursor: pointer; }
.clz-messages .list-group-item.selected { background: rgba(46, 230, 214, .09); }
.clz-msg-row .js-msg-check { width: 1.1rem; height: 1.1rem; cursor: pointer; flex: none; }
/* 2.9.1-beta.24 : ouverture et IA présentes dans la fenêtre de survol */
.clz-up-more { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid rgba(255, 255, 255, .14); }
/* 2.9.1-beta.25 : catégories d'IA sous « IA joueuses » */
.clz-up-grid .k.clz-up-sub { color: #c7d0e6; padding-left: .4rem; }

/* ===================== 2.9.1-beta.25 : cartes d'univers vivantes ===================== */
/* Étoiles mouvantes en permanence (canvas), saut hyperspatial au survol (les étoiles s'étirent vers l'observateur),
   carte inclinée en 3D qui suit la souris, nébuleuse en parallaxe et en lente dérive, reflet holographique qui suit le
   curseur, anneau d'aurore qui tourne autour de la carte ; la fenêtre d'informations arrive juste après le saut. */
@property --clz-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.clz-universe-card { --rx: 0deg; --ry: 0deg; --px: 0; --py: 0; --mx: 50%; --my: 50%; transform-style: preserve-3d; will-change: transform;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease; }
.clz-universe-card:hover, .clz-universe-card:focus-visible {
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px) scale(1.025);
    box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .65), 0 0 2.2rem rgba(125, 255, 255, .25), 0 0 4rem rgba(255, 210, 61, .15); }
.clz-universe-card > img { scale: 1.12; translate: calc(var(--px) * -14px) calc(var(--py) * -10px);
    animation: clz-nebula-drift 46s ease-in-out infinite alternate; transition: translate .4s ease-out, filter .4s ease; }
.clz-universe-card:hover > img, .clz-universe-card:focus-visible > img { filter: saturate(1.35) brightness(1.08); }
@keyframes clz-nebula-drift { 0% { transform: translate(-2%, -1.5%) rotate(-.6deg); } 50% { transform: translate(1.5%, 1%) rotate(.4deg); } 100% { transform: translate(2%, -1%) rotate(.8deg); } }
.clz-uc-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.clz-uc-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease; mix-blend-mode: overlay;
    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%),
        linear-gradient(115deg, rgba(0, 255, 240, 0) 30%, rgba(0, 255, 240, .22) 45%, rgba(255, 0, 200, .2) 55%, rgba(255, 210, 61, 0) 70%); }
.clz-universe-card:hover .clz-uc-glare, .clz-universe-card:focus-visible .clz-uc-glare { opacity: 1; }
.clz-universe-card::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 2px; pointer-events: none;
    background: conic-gradient(from var(--clz-ang), rgba(125, 255, 255, 0), #7dffff, #ff4fd8, #ffd23d, rgba(125, 255, 255, 0) 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .35s ease; animation: clz-aurora 3.2s linear infinite; }
.clz-universe-card:hover::before, .clz-universe-card:focus-visible::before { opacity: 1; }
@keyframes clz-aurora { to { --clz-ang: 360deg; } }
.clz-universe-name, .clz-universe-badge { z-index: 2; transform: translateZ(30px); }
.clz-universe-peek { z-index: 4; transition: opacity .25s ease .38s, transform .25s ease .38s; }
.clz-universe-card:not(:hover):not(:focus-visible) .clz-universe-peek { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
    .clz-universe-card > img { animation: none; translate: none; }
    .clz-universe-card::before { animation: none; }
    .clz-universe-card:hover, .clz-universe-card:focus-visible { transform: translateY(-3px); }
    .clz-universe-peek { transition: none; }
}

/* 2.9.1-beta.26 : « voir les détails » bien en évidence — bouton doré qui pulse dans la fenêtre de survol, pastille
   « Détails » toujours visible sur la carte (téléphone compris), carte ouverte marquée. */
.clz-up-cta { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .55rem .9rem; border-radius: 2rem;
    background: linear-gradient(90deg, #ffd23d, #ffb13d 50%, #ffd23d); background-size: 200% 100%; color: #1a1205; font-weight: 800; font-size: .92rem;
    letter-spacing: .01em; box-shadow: 0 0 0 0 rgba(255, 210, 61, .55); animation: clz-cta-pulse 1.8s ease-out infinite, clz-cta-sheen 3s linear infinite; }
.clz-up-cta .bi { font-size: 1.05rem; }
.clz-up-cta-arrow { animation: clz-cta-bounce 1.2s ease-in-out infinite; }
@keyframes clz-cta-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 61, .55); } 70% { box-shadow: 0 0 0 .7rem rgba(255, 210, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 210, 61, 0); } }
@keyframes clz-cta-sheen { to { background-position: -200% 0; } }
@keyframes clz-cta-bounce { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
.clz-universe-card[data-details] { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .clz-up-cta, .clz-up-cta-arrow { animation: none; } }

/* 2.9.1-beta.27 : fenêtre de survol compacte (rien ne sort du cadre), étiquette « Cliquez pour les détails » toujours
   visible (au-dessus de la fenêtre, survol compris), saut en vitesse lumière adouci (app.js). */
.clz-universe-card { container-type: inline-size; container-name: ucard; }
.clz-universe-peek { gap: .3rem; padding: .7rem .9rem .65rem; overflow: hidden; justify-content: flex-start; }
.clz-up-name { font-size: 1.05rem; line-height: 1.2; padding-right: 9.5rem; }
.clz-up-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.clz-up-chip { padding: .05rem .45rem; border-radius: 1rem; font-size: .72rem; color: #d7deef; background: rgba(125, 255, 255, .08); border: 1px solid rgba(125, 255, 255, .22); white-space: nowrap; }
.clz-up-chip b { color: #fff; font-weight: 700; }
.clz-up-ai .clz-up-chip { background: rgba(255, 210, 61, .08); border-color: rgba(255, 210, 61, .28); }
.clz-up-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; line-height: 1.25; }
.clz-up-row .k { color: #9fe8ff; }
.clz-up-row .v { color: #fff; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.clz-up-row .v.clz-up-green { color: #7dffb5; }
.clz-up-sep { padding-top: .3rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.clz-up-d { color: #c7d0e6; font-size: .7rem; line-height: 1.2; margin-top: -.15rem; }
.clz-up-cta { flex-shrink: 0; padding: .4rem .8rem; font-size: .85rem; }
/* Petites cartes (trois univers par ligne, téléphone) : l'essentiel seulement — le reste est dans les détails. */
@container ucard (max-width: 520px) {
    .clz-up-d, .clz-up-ai { display: none; }
    .clz-up-chip { font-size: .66rem; padding: 0 .35rem; }
    .clz-universe-peek { inset: .4rem; padding: .55rem .7rem; gap: .22rem; }
    .clz-up-row { font-size: .74rem; }
    .clz-up-cta { padding: .3rem .6rem; font-size: .76rem; }
    .clz-up-name { padding-right: 0; }
}
@container ucard (max-width: 400px) { .clz-up-chips:not(.clz-up-ai) { display: none; } }
/* Étiquette toujours visible, au-dessus de la fenêtre de survol. */
.clz-uc-tag { position: absolute; top: .6rem; right: .6rem; z-index: 5; display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .7rem;
    border-radius: 2rem; font-size: .78rem; font-weight: 800; color: #1a1205; background: linear-gradient(90deg, #ffd23d, #ffb13d);
    box-shadow: 0 0 0 0 rgba(255, 210, 61, .55), 0 .3rem .8rem rgba(0, 0, 0, .45); animation: clz-cta-pulse 2.2s ease-out infinite; transform: translateZ(40px); }
.clz-uc-tag .bi { font-size: .95rem; }
.clz-uc-tag-on { display: none; }
.clz-universe-card[aria-expanded="true"] .clz-uc-tag-off { display: none; }
.clz-universe-card[aria-expanded="true"] .clz-uc-tag-on { display: inline; }
.clz-universe-card[aria-expanded="true"] .clz-uc-tag { animation: none; background: rgba(125, 255, 255, .92); }
.clz-universe-badge { right: auto; left: .6rem; z-index: 5; }
@container ucard (max-width: 400px) { .clz-uc-tag { font-size: .7rem; padding: .2rem .55rem; } }
@media (prefers-reduced-motion: reduce) { .clz-uc-tag { animation: none; } }
/* 2.9.1-beta.31 : taille de l'univers — dans la fenêtre de survol, effacée sur les petites cartes (elle reste dans les détails) */
@container ucard (max-width: 520px) { .clz-up-size { display: none; } }
/* 2.9.1-beta.32 : bonus de pré-inscription — compteur de matière noire qui scintille 30 s à la première ouverture du compte */
.clz-res-dm.clz-dm-glow { position: relative; overflow: visible; animation: clz-dm-pulse 1.4s ease-in-out infinite; border-color: rgba(206, 140, 255, .9); }
.clz-res-dm.clz-dm-glow #res-dm { color: #fff; animation: clz-dm-shine 1.4s ease-in-out infinite; }
.clz-res-dm.clz-dm-glow img { animation: clz-dm-spin 2.8s ease-in-out infinite; }
.clz-res-dm.clz-dm-glow::before, .clz-res-dm.clz-dm-glow::after { content: "✦"; position: absolute; pointer-events: none; color: #ffe27a; font-size: .8rem;
    text-shadow: 0 0 .5rem #ffd23d, 0 0 1rem #c78cff; animation: clz-dm-twinkle 1.6s ease-in-out infinite; }
.clz-res-dm.clz-dm-glow::before { top: -.55rem; right: -.35rem; }
.clz-res-dm.clz-dm-glow::after { bottom: -.5rem; left: -.3rem; font-size: .65rem; animation-delay: .8s; }
.clz-dm-gift { position: absolute; top: calc(100% + .35rem); left: 50%; transform: translateX(-50%); z-index: 30; white-space: nowrap; padding: .2rem .6rem; border-radius: 1rem;
    font-size: .78rem; font-weight: 800; color: #1a1205; background: linear-gradient(90deg, #ffd23d, #e7a6ff); box-shadow: 0 0 1rem rgba(206, 140, 255, .6); animation: clz-dm-gift-in .6s ease-out both; }
.clz-res-dm.clz-dm-glow-off { animation: none; }
.clz-res-dm.clz-dm-glow-off .clz-dm-gift { opacity: 0; transition: opacity .8s ease; }
@keyframes clz-dm-pulse { 0%, 100% { box-shadow: 0 0 .3rem rgba(206, 140, 255, .5), 0 0 0 0 rgba(255, 210, 61, .5); } 50% { box-shadow: 0 0 1.2rem rgba(206, 140, 255, .95), 0 0 0 .45rem rgba(255, 210, 61, 0); } }
@keyframes clz-dm-shine { 0%, 100% { text-shadow: 0 0 .3rem rgba(206, 140, 255, .8); } 50% { text-shadow: 0 0 .9rem #ffe27a, 0 0 1.6rem #c78cff; } }
@keyframes clz-dm-spin { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(12deg); } }
@keyframes clz-dm-twinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes clz-dm-gift-in { from { opacity: 0; transform: translate(-50%, -.4rem); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) {
    .clz-res-dm.clz-dm-glow, .clz-res-dm.clz-dm-glow #res-dm, .clz-res-dm.clz-dm-glow img, .clz-res-dm.clz-dm-glow::before, .clz-res-dm.clz-dm-glow::after { animation: none; }
    .clz-res-dm.clz-dm-glow { box-shadow: 0 0 1rem rgba(206, 140, 255, .9); }
}
/* 2.9.1-beta.36 : offre « Votre univers » — section de l'accueil, fenêtre, page de l'offre, suivi */
.clz-offer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.clz-offer-list li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.35; }
.clz-offer-list .bi { color: #7dffff; margin-top: .15rem; flex: none; }
.clz-offer-list .clz-offer-dm { padding: .55rem .7rem; border-radius: .6rem; background: rgba(255, 210, 61, .1); border: 1px solid rgba(255, 210, 61, .4); }
.clz-offer-list .clz-offer-dm .bi { color: #ffd23d; }
.clz-offer-list .clz-offer-dm strong { color: #ffd23d; }
.clz-hosted-cta { border: 1px solid rgba(125, 255, 255, .35); border-radius: 1rem; padding: 1rem 1.2rem; margin: 0 0 1.25rem;
    background: linear-gradient(100deg, rgba(125, 255, 255, .12), rgba(6, 10, 22, .9) 55%, rgba(255, 79, 216, .12)); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.clz-hosted-cta h2 { font-size: 1.15rem; margin: 0 0 .2rem; color: #9fe8ff; }
.clz-hosted-cta p { margin: 0; color: #d7deef; font-size: .9rem; }
.clz-hosted-cta .btn { margin-left: auto; white-space: nowrap; }
.clz-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; counter-reset: s; }
.clz-steps li { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; border-radius: .6rem; background: rgba(255, 255, 255, .04); color: #9fb2d6; }
.clz-steps .clz-step-ico { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); flex: none; display: inline-block; }
.clz-steps li.is-done { color: #7dffb5; }
.clz-steps li.is-done .clz-step-ico { border-color: #7dffb5; background: #7dffb5; box-shadow: inset 0 0 0 3px #0b1328; }
.clz-steps li.is-doing { color: #ffd23d; }
.clz-steps li.is-doing .clz-step-ico { border-color: #ffd23d; border-top-color: transparent; animation: clz-spin 1s linear infinite; }
@keyframes clz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .clz-steps li.is-doing .clz-step-ico { animation: none; } }
.clz-offer-list .clz-offer-dm { display: block; }
.clz-offer-list .clz-offer-dm .bi { margin-right: .4rem; }
.clz-pr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* 2.9.1-beta.38 : sélecteur d'univers de l'administration */
.adm-uswitch .adm-chip-btn { cursor: pointer; border-color: rgba(125, 255, 255, .45); }
.adm-uswitch .dropdown-menu { min-width: 16rem; }
.adm-uswitch form { margin: 0; }
.adm-uswitch .dropdown-item .bi { margin-right: .3rem; }
/* 2.9.1-beta.50 : rythme annoncé de l'univers (fenêtre de survol et détails de la carte) */
.clz-up-pace { display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start; width: fit-content; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .15rem .55rem; border-radius: 999px; border: 1px solid currentColor; background: rgba(6, 10, 22, .55); white-space: nowrap; }
.clz-pace-classic { color: #9fe8ff; }
.clz-pace-fast { color: #ffd23d; }
.clz-pace-ultra { color: #ff7ad9; box-shadow: 0 0 10px rgba(255, 122, 217, .35); }
/* 2.9.1-beta.51 : rythme bien en évidence — pastilles pleines et colorées, sur la carte, au survol et dans les détails */
.clz-up-pace.clz-pace-fast { color: #1b1300; background: linear-gradient(135deg, #ffe066, #ff9f1a); border-color: #ffd23d; box-shadow: 0 0 12px rgba(255, 170, 30, .55); }
.clz-up-pace.clz-pace-ultra { color: #fff; background: linear-gradient(135deg, #ff4fd8, #8b5cf6); border-color: #ff9bea; box-shadow: 0 0 16px rgba(255, 79, 216, .7); text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    animation: clz-pace-glow 2.4s ease-in-out infinite; }
.clz-up-pace.clz-pace-classic { color: #06202b; background: linear-gradient(135deg, #b9f3ff, #5fd3ff); border-color: #9fe8ff; }
@keyframes clz-pace-glow { 50% { box-shadow: 0 0 26px rgba(255, 79, 216, .95); } }
@media (prefers-reduced-motion: reduce) { .clz-up-pace.clz-pace-ultra { animation: none; } }
.clz-up-pace { font-size: .78rem; padding: .22rem .7rem; }
/* Sur la face de la carte, sous le nom (toujours visible, sans survol) */
.clz-universe-name .clz-pace-face { display: inline-flex; margin-top: .35rem; margin-right: .4rem; font-family: inherit; font-size: .8rem; }
.clz-universe-card:hover .clz-pace-face, .clz-universe-card:focus-visible .clz-pace-face { opacity: 0; }
/* 2.9.1-beta.55 : fenêtre « Bienvenue Admin » (2FA suspendue pendant la phase de tests) */
.adm-welcome .card { background: radial-gradient(circle at 50% 0%, rgba(125, 255, 255, .14), rgba(8, 12, 26, .95) 60%); border-color: rgba(125, 255, 255, .45); box-shadow: 0 0 40px rgba(77, 208, 255, .18); }
.adm-welcome-orbit { position: relative; width: 84px; height: 84px; margin: .3rem auto 1rem; border: 1px dashed rgba(125, 255, 255, .45); border-radius: 50%; animation: adm-orbit 9s linear infinite; }
.adm-welcome-planet { position: absolute; inset: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9fe8ff, #2b6cff 55%, #0b1e4d); box-shadow: 0 0 18px rgba(77, 208, 255, .6); }
.adm-welcome-moon { position: absolute; top: -6px; left: 36px; width: 12px; height: 12px; border-radius: 50%; background: #ffd23d; box-shadow: 0 0 10px #ffd23d; }
@keyframes adm-orbit { to { transform: rotate(360deg); } }
.adm-welcome-btn { background: linear-gradient(100deg, #ffd23d, #ffb020); color: #1a1300; font-weight: 800; letter-spacing: .03em; border: 0; box-shadow: 0 0 22px rgba(255, 210, 61, .45); }
.adm-welcome-btn:hover, .adm-welcome-btn:focus { color: #1a1300; filter: brightness(1.08); box-shadow: 0 0 30px rgba(255, 210, 61, .7); }
.adm-welcome-note { color: #ffd23d; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .adm-welcome-orbit { animation: none; } }

/* 2.9.1-beta.62 : « Inscriptions fermées » dans le bloc du nom (à côté du rythme), plus jamais par-dessus le nom ; sur les
   cartes étroites, bloc du nom plus compact (pastilles sur une ligne) pour laisser la place à « Cliquez pour les détails » */
.clz-universe-name .clz-universe-badge.clz-badge-inline { position: static; display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; margin-right: .4rem;
    transform: none; font-family: inherit; font-weight: 600; font-size: .78rem; vertical-align: middle; }
@container ucard (max-width: 400px) {
    .clz-universe-name { padding: .45rem .7rem; font-size: 1.05rem; line-height: 1.15; }
    .clz-universe-name .clz-pace-face, .clz-universe-name .clz-universe-badge.clz-badge-inline { font-size: .66rem; padding: .1rem .45rem; margin-top: .25rem; margin-right: .25rem; }
    .clz-universe-name .clz-universe-life { font-size: .7rem; margin-top: .25rem; padding: .15rem .45rem; }
}
/* 2.9.1-beta.64 : journal de l'essai dans le panneau du laboratoire */
.clz-lab-log { max-height: 14rem; overflow: auto; white-space: pre-wrap; background: rgba(0, 0, 0, .35); border: 1px solid rgba(125, 255, 255, .2); border-radius: .4rem; padding: .5rem .6rem; color: #b8c7e6; }
/* 2.9.1-beta.71 : file d'attente mise en évidence quand la page y remonte après un lancement */
.clz-queue-card { scroll-margin-top: 90px; }
.clz-queue-flash { animation: clz-queue-flash 1.6s ease-out 1; }
@keyframes clz-queue-flash { 0% { box-shadow: 0 0 0 0 rgba(125, 255, 255, .0); } 25% { box-shadow: 0 0 0 3px rgba(125, 255, 255, .55), 0 0 22px rgba(77, 208, 255, .45); } 100% { box-shadow: 0 0 0 0 rgba(125, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .clz-queue-flash { animation: none; outline: 2px solid rgba(125, 255, 255, .6); } }
/* 2.9.1-beta.74 : élément construit mis en évidence au retour (après la file d'attente) */
.clz-item-flash { animation: clz-queue-flash 1.8s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .clz-item-flash { animation: none; outline: 2px solid rgba(125, 255, 255, .6); } }
/* 2.9.1-beta.80 : élément suivi dans la file d'attente (celui que l'on vient de commander) */
#clz-queue .clz-queue-tracked { box-shadow: inset 3px 0 0 rgba(125, 255, 255, .85); background: linear-gradient(90deg, rgba(77, 208, 255, .10), transparent 65%); border-radius: .3rem; padding-left: .5rem !important; transition: background .3s; }
/* 2.9.1-beta.81 : éléments en attente dans la file — sablier qui se retourne, barre vide estompée jusqu'à leur tour */
.clz-hourglass { display: inline-block; }
.clz-waiting .clz-hourglass { animation: clz-hourglass 2.4s ease-in-out infinite; }
@keyframes clz-hourglass { 0%, 40% { transform: rotate(0deg); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
.clz-progress-wait.clz-progress-idle { opacity: .35; }
.clz-progress-wait.clz-progress-idle .progress-bar { animation: none; }
@media (prefers-reduced-motion: reduce) { .clz-waiting .clz-hourglass { animation: none; } }
/* 2.9.1-beta.84 : rappel de l'univers sur la bannière de la vue d'ensemble — pastille vitrée, nom en grand, rythme annoncé */
.clz-uni-recall { position: absolute; left: 1.2rem; top: .8rem; z-index: 1; display: inline-flex; align-items: center; gap: .5rem; max-width: calc(100% - 5rem);
    padding: .3rem .8rem .3rem .65rem; border-radius: 2rem; border: 1px solid rgba(125, 255, 255, .55);
    background: linear-gradient(180deg, rgba(8, 40, 56, .78), rgba(4, 16, 30, .78)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    box-shadow: 0 0 14px rgba(77, 208, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .18); text-shadow: 0 1px 3px #000; white-space: nowrap; }
.clz-uni-recall > .bi { color: #7dffff; font-size: 1.05rem; }
.clz-uni-recall-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #a9c6dd; }
.clz-uni-recall-name { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 600; font-size: 1.15rem; letter-spacing: .03em; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.clz-uni-recall .clz-up-pace { font-size: .7rem; padding: .1rem .5rem; }
.clz-banner.clz-banner-uni { height: 136px; }   /* place pour la pastille au-dessus du titre, sans recouvrement */
@media (max-width: 575.98px) { .clz-uni-recall { left: .7rem; top: .6rem; gap: .35rem; padding: .25rem .6rem; } .clz-uni-recall-name { font-size: 1rem; } .clz-uni-recall-label { display: none; } }

/* 2.9.1-beta.86 : icônes dessinées (masques SVG, sans police hors charte) — pioche de « Démolir », cadenas une fois bloqué */
.clz-ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.14em; background-color: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.clz-ico-pickaxe { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(45 12 12)'%3E%3Cpath d='M3.5 8.2Q12 1.6 20.5 8.2' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3Crect x='10.9' y='5' width='2.2' height='17' rx='1.1'/%3E%3Crect x='10.2' y='3.6' width='3.6' height='3.2' rx='.8'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(45 12 12)'%3E%3Cpath d='M3.5 8.2Q12 1.6 20.5 8.2' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3Crect x='10.9' y='5' width='2.2' height='17' rx='1.1'/%3E%3Crect x='10.2' y='3.6' width='3.6' height='3.2' rx='.8'/%3E%3C/g%3E%3C/svg%3E"); }
.btn.clz-blocked > .clz-ico { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2'/%3E%3C/svg%3E"); background-color: #ffd76a; width: 1.15em; height: 1.15em; filter: drop-shadow(0 0 4px rgba(255, 200, 80, .75)); }
/* « Démolir » possible : plein, rouge, lisible ; impossible : évidé (règle générale), liseré rouge */
.btn-danger.clz-btn-demolish:not(.clz-blocked) { background-image: linear-gradient(180deg, #e04848, #b42828); border-color: #ff7a7a; color: #fff; box-shadow: 0 0 10px rgba(255, 90, 90, .28); }
.btn-danger.clz-btn-demolish:not(.clz-blocked):hover, .btn-danger.clz-btn-demolish:not(.clz-blocked):focus-visible { background-image: linear-gradient(180deg, #ee5a5a, #c43232); box-shadow: 0 0 14px rgba(255, 110, 110, .45); }

/* ==========================================================================================================================
   2.9.1-beta.87 — tous les écrans : téléphones, tablettes, PC 1080p, écrans redimensionnés, 4K
   ========================================================================================================================== */

/* Texte : rien sous 12 px, nulle part (pastilles comprises) — au-delà, c'est illisible sur un téléphone. */
.badge { font-size: max(.75em, 12px); }
.clz-where-kind { font-size: max(.7rem, 12px); }

/* Écrans tactiles (doigt, pas souris) : cibles d'au moins 44 px de haut — boutons, liens de navigation, pages, onglets,
   champs et listes — et cases à cocher plus grandes. Les rangées de petits boutons gardent leur alignement. */
@media (pointer: coarse) {
    .btn, .btn-sm, .btn-group-sm > .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .35em; white-space: normal; text-align: center; min-width: 0; max-width: 100%; }
    .btn.w-100, .btn-sm.w-100 { display: flex; }
    .btn.btn-link.p-0, .btn-close { min-height: 0; }
    .btn-close { padding: .9rem; }
    .nav-link, .page-link, .dropdown-item, .list-group-item-action { min-height: 44px; display: flex; align-items: center; }
    .form-control, .form-select, .form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text { min-height: 44px; font-size: max(1rem, 16px); }   /* 16 px : pas de zoom forcé sur iPhone */
    .form-check-input { width: 1.4em; height: 1.4em; margin-top: .05em; }
    .form-check { min-height: 44px; display: flex; align-items: center; gap: .5rem; padding-left: 0; }
    .form-check .form-check-input { float: none; margin-left: 0; flex: 0 0 auto; }
    .clz-why-btn { min-width: 44px; min-height: 44px; }
    summary { min-height: 44px; display: flex; align-items: center; }
    .clz-sidebar .nav-link { min-height: 48px; }
}

/* Petits téléphones (≤ 400 px) : un peu d'air rendu au contenu, titres qui ne débordent pas. */
@media (max-width: 400px) {
    .clz-main { padding-left: .5rem; padding-right: .5rem; }
    .clz-banner h1 { font-size: 1.35rem; overflow-wrap: anywhere; }
}

/* Grands écrans à 100 % (QHD, 4K sans mise à l'échelle du système) : l'interface est agrandie d'un bloc pour garder la
   même lisibilité qu'en 1080p — texte, boutons, images et marges ensemble, sans changer la mise en page. Un écran 4K
   déjà mis à l'échelle par le système (150 %, 200 %) ne déclenche rien : il a déjà la taille d'un écran 1080p. */
@media (min-width: 2400px) { body { zoom: 1.25; } }
@media (min-width: 2880px) { body { zoom: 1.5; } }
@media (min-width: 3400px) { body { zoom: 2; } }
/* 2.9.1-beta.87 (suite) : textes secondaires jamais sous 12 px ; dernières petites cibles tactiles */
.small, small, .adm-role, .clz-orb-label { font-size: max(.875em, 12px); }
@media (pointer: coarse) {
    .form-check-input { width: max(1.4em, 24px) !important; height: max(1.4em, 24px) !important; }
    .clz-more { min-height: 40px; padding: .55rem .25rem; }
    .btn.btn-link.btn-sm.p-0 { padding-top: .6rem !important; padding-bottom: .6rem !important; }
    /* Galaxie : les orbites dessinées restent à leur taille, mais chacune se touche sur 44 px (zone invisible autour). */
    .clz-orb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; }
}
/* Téléphones et tablettes : plancher de 12 px aussi pour les textes secondaires des tableaux denses (en-têtes, notes). */
@media (max-width: 991.98px) {
    .small, small, th, .adm-role, .adm-brand-tag, .clz-uni-recall-label, .clz-orb-deep { font-size: max(.875em, 12px) !important; }
}
/* Très petits téléphones (≤ 400 px) : la barre du haut tient sur une ligne — coordonnées masquées dans le sélecteur de
   planète (elles restent dans sa liste et sur la vue d'ensemble), nom raccourci par des points de suspension. */
@media (max-width: 400px) {
    .clz-where { min-width: 0; flex: 1 1 auto; }
    .clz-where-btn { max-width: 100%; min-width: 0; }
    .clz-where-text { min-width: 0; overflow: hidden; }
    .clz-where-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .clz-where-name .clz-where-coords { display: none; }
    .clz-where-img { width: 28px; height: 28px; }
}
/* 2.9.1-beta.90 : population de l'univers (joueurs humains et IA), en haut à gauche de la carte, vitrée comme l'étiquette */
.clz-uc-pop { position: absolute; top: .6rem; left: .6rem; z-index: 5; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .7rem;
    max-width: calc(100% - 14rem); padding: .28rem .7rem; border-radius: 1rem; font-size: .8rem; line-height: 1.2; color: #e8f1ff;
    background: rgba(4, 7, 16, .66); border: 1px solid rgba(125, 255, 255, .35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); text-shadow: 0 1px 2px #000; }
.clz-uc-pop b { font-family: "Chakra Petch", "Barlow", sans-serif; font-size: .95rem; color: #fff; }
.clz-uc-pop .bi { color: #7dffff; }
.clz-uc-pop-a .bi { color: #c9a7ff; }
@container ucard (max-width: 400px) { .clz-uc-pop { font-size: .72rem; padding: .2rem .55rem; max-width: calc(100% - 9.5rem); } .clz-uc-pop b { font-size: .85rem; } }