/* =====================================================================
   CoLoniZers — habillages (skins) et effets d'interface.
   Chaque habillage redéfinit les variables de app.css via [data-skin].
   Aucun style en ligne : compatible CSP style-src 'self'.
   ===================================================================== */

/* ---------- Néon : cyberpunk, verre fumé, magenta et cyan ---------- */
[data-skin="neon"] {
    --clz-bg: #07030f; --clz-bg2: #140726;
    --clz-panel: rgba(24, 8, 44, .72); --clz-panel-2: rgba(40, 12, 70, .85);
    --clz-line: rgba(255, 61, 245, .28); --clz-accent: #ff3df5; --clz-cyan: #00f0ff;
    --clz-glow: 0 0 .9rem rgba(255, 61, 245, .35), 0 0 2.2rem rgba(0, 240, 255, .12);
}
[data-skin="neon"] body { background: radial-gradient(1200px 600px at 80% -10%, rgba(255, 61, 245, .22), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(0, 240, 255, .16), transparent 60%), linear-gradient(rgba(7, 3, 15, .58), rgba(7, 3, 15, .72)), url("../img/scenes/fondclz.webp") center / cover fixed, var(--clz-bg); }
[data-skin="neon"] .clz-menu .nav-link.active { background: linear-gradient(90deg, rgba(255, 61, 245, .35), rgba(0, 240, 255, .05)); box-shadow: inset 3px 0 0 #00f0ff, var(--clz-glow); }
[data-skin="neon"] .clz-title, [data-skin="neon"] .clz-brand { text-shadow: 0 0 .6rem rgba(255, 61, 245, .8), 0 0 1.6rem rgba(0, 240, 255, .35); }

/* ---------- Aurore : aurores boréales, émeraude et azur ---------- */
[data-skin="aurora"] {
    --clz-bg: #02110f; --clz-bg2: #05241f;
    --clz-panel: rgba(4, 36, 34, .74); --clz-panel-2: rgba(8, 56, 52, .86);
    --clz-line: rgba(61, 255, 168, .22); --clz-accent: #3dffa8; --clz-cyan: #3d9bff;
    --clz-glow: 0 0 1rem rgba(61, 255, 168, .28);
}
[data-skin="aurora"] body { background: linear-gradient(115deg, rgba(61, 255, 168, .14), transparent 35%, rgba(61, 155, 255, .16) 65%, transparent), linear-gradient(rgba(2, 17, 15, .55), rgba(2, 17, 15, .70)), url("../img/scenes/fondclz.webp") center / cover fixed, var(--clz-bg); background-size: 300% 300%, auto, cover; animation: clz-aurora 28s ease-in-out infinite alternate; }
[data-skin="aurora"] .clz-menu .nav-link.active { background: linear-gradient(90deg, rgba(61, 255, 168, .3), rgba(61, 155, 255, .06)); box-shadow: inset 3px 0 0 var(--clz-accent); }
@keyframes clz-aurora { from { background-position: 0% 50%, 0 0, 0 0; } to { background-position: 100% 50%, 0 0, 0 0; } }

/* ---------- Nova : étoile en fusion, ambre et vermillon ---------- */
[data-skin="nova"] {
    --clz-bg: #120604; --clz-bg2: #2a0d06;
    --clz-panel: rgba(44, 14, 6, .76); --clz-panel-2: rgba(70, 22, 8, .88);
    --clz-line: rgba(255, 122, 47, .26); --clz-accent: #ffd23d; --clz-cyan: #ff7a2f;
    --clz-glow: 0 0 1rem rgba(255, 122, 47, .35);
}
[data-skin="nova"] body { background: radial-gradient(1000px 700px at 50% 120%, rgba(255, 90, 30, .26), transparent 60%), linear-gradient(rgba(18, 6, 4, .55), rgba(18, 6, 4, .70)), url("../img/scenes/fondclz.webp") center / cover fixed, var(--clz-bg); }
[data-skin="nova"] .clz-menu .nav-link.active { background: linear-gradient(90deg, rgba(255, 122, 47, .35), rgba(255, 210, 61, .05)); box-shadow: inset 3px 0 0 var(--clz-accent); }

/* ---------- Givre : clair et glacé, lisible en plein jour ---------- */
[data-skin="frost"] {
    --clz-bg: #0f1a2b; --clz-bg2: #1c2c45;
    --clz-panel: rgba(214, 232, 255, .10); --clz-panel-2: rgba(214, 232, 255, .16);
    --clz-line: rgba(200, 225, 255, .30); --clz-accent: #9fd6ff; --clz-cyan: #e8f4ff;
    --clz-glow: 0 .4rem 1.4rem rgba(0, 0, 0, .25);
}
[data-skin="frost"] body { background: linear-gradient(160deg, rgba(28, 44, 69, .62) 0%, rgba(15, 26, 43, .70) 55%, rgba(10, 18, 32, .80) 100%), url("../img/scenes/fondclz.webp") center / cover fixed, #0a1220; }
[data-skin="frost"] .card.clz-card, [data-skin="frost"] .clz-item, [data-skin="frost"] .clz-stat { backdrop-filter: blur(14px) saturate(140%); }
[data-skin="frost"] .clz-menu .nav-link.active { background: rgba(232, 244, 255, .14); box-shadow: inset 3px 0 0 var(--clz-accent); }

/* ---------- Néant : noir absolu (écrans OLED), violet discret ---------- */
[data-skin="void"] {
    --clz-bg: #000; --clz-bg2: #07040f;
    --clz-panel: rgba(12, 10, 22, .92); --clz-panel-2: rgba(22, 18, 40, .95);
    --clz-line: rgba(167, 139, 250, .18); --clz-accent: #a78bfa; --clz-cyan: #818cf8;
    --clz-glow: 0 0 0 1px rgba(167, 139, 250, .25);
}
[data-skin="void"] body { background: linear-gradient(rgba(0, 0, 0, .80), rgba(0, 0, 0, .88)), url("../img/scenes/fondclz.webp") center / cover fixed, #000; }
[data-skin="void"] .clz-sidebar, [data-skin="void"] .clz-topbar { background: #000; }
[data-skin="void"] .clz-menu .nav-link.active { background: rgba(167, 139, 250, .12); box-shadow: inset 3px 0 0 var(--clz-accent); }

/* ---------- Commun aux habillages modernes ---------- */
[data-skin]:not([data-skin="classic"]) .card.clz-card,
[data-skin]:not([data-skin="classic"]) .clz-item { border-radius: 1rem; box-shadow: var(--clz-glow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
[data-skin]:not([data-skin="classic"]) .clz-item:hover { transform: translateY(-2px); border-color: var(--clz-accent); }
[data-skin]:not([data-skin="classic"]) .btn { border-radius: .65rem; }
[data-skin]:not([data-skin="classic"]) .clz-res { border-radius: 2rem; box-shadow: var(--clz-glow); }
[data-skin]:not([data-skin="classic"]) .clz-menu .nav-link { border-radius: .6rem; margin: 1px 6px; transition: background .15s ease, transform .15s ease; }
[data-skin]:not([data-skin="classic"]) .clz-menu .nav-link:hover { transform: translateX(3px); }
[data-skin]:not([data-skin="classic"]) .progress-bar { background-image: linear-gradient(90deg, var(--clz-cyan), var(--clz-accent)); }

/* Aperçus du sélecteur */
.clz-swatch { display: inline-block; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); flex: 0 0 auto; }
.clz-swatch-classic { background: linear-gradient(135deg, #f5b53d 50%, #57d3ff 50%); }
.clz-swatch-neon { background: linear-gradient(135deg, #ff3df5 50%, #00f0ff 50%); }
.clz-swatch-aurora { background: linear-gradient(135deg, #3dffa8 50%, #3d9bff 50%); }
.clz-swatch-nova { background: linear-gradient(135deg, #ff7a2f 50%, #ffd23d 50%); }
.clz-swatch-frost { background: linear-gradient(135deg, #9fd6ff 50%, #e8f4ff 50%); }
.clz-swatch-void { background: linear-gradient(135deg, #000 50%, #a78bfa 50%); }
.clz-skin-card { cursor: pointer; border: 2px solid var(--clz-line); border-radius: 1rem; padding: .8rem; background: var(--clz-panel); transition: transform .15s ease, border-color .15s ease; }
.clz-skin-card:hover { transform: translateY(-3px); }
.clz-skin-card.active { border-color: var(--clz-accent); }
.clz-skin-card .clz-swatch { width: 2.6rem; height: 2.6rem; }

/* ---------- Effets ---------- */
.clz-ripple-host { position: relative; overflow: hidden; }
.clz-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, .35); animation: clz-ripple .55s ease-out forwards; pointer-events: none; }
@keyframes clz-ripple { to { transform: scale(3.2); opacity: 0; } }
.clz-reveal { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
.clz-reveal.in { opacity: 1; transform: none; }
.clz-tilt { transition: transform .12s ease; will-change: transform; }

/* Fenêtres flottantes : déplaçables, empilables, fermables (Échap) */
.clz-float { position: fixed; z-index: 1045; min-width: 18rem; max-width: min(28rem, 92vw); max-height: 80vh; overflow: auto; background: var(--clz-panel-2); border: 1px solid var(--clz-accent); border-radius: 1rem; box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .55), var(--clz-glow, none); backdrop-filter: blur(12px); animation: clz-pop .18s ease-out; }
.clz-float-head { cursor: move; user-select: none; display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border-bottom: 1px solid var(--clz-line); font-family: "Chakra Petch", sans-serif; }
.clz-float-head .btn-close { margin-left: auto; }
.clz-float-body { padding: .8rem; }
.clz-float-body img { max-width: 100%; height: auto; border-radius: .6rem; }
@keyframes clz-pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }

/* Palette de commandes (Ctrl+K) */
.clz-palette { position: fixed; inset: 0; z-index: 1070; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); }
.clz-palette.open { display: flex; }
.clz-palette-box { width: min(34rem, 94vw); background: var(--clz-panel-2); border: 1px solid var(--clz-accent); border-radius: 1rem; overflow: hidden; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .6); animation: clz-pop .15s ease-out; }
.clz-palette-box input { border: 0; border-bottom: 1px solid var(--clz-line); border-radius: 0; background: transparent; padding: .9rem 1rem; font-size: 1.05rem; }
.clz-palette-list { max-height: 50vh; overflow: auto; }
.clz-palette-list a { display: flex; gap: .6rem; align-items: center; padding: .55rem 1rem; color: inherit; text-decoration: none; }
.clz-palette-list a.sel, .clz-palette-list a:hover { background: rgba(255, 255, 255, .07); box-shadow: inset 3px 0 0 var(--clz-accent); }

@media (prefers-reduced-motion: reduce) {
    [data-skin="aurora"] body { animation: none; }
    .clz-reveal { opacity: 1; transform: none; transition: none; }
    .clz-float, .clz-palette-box { animation: none; }
    [data-skin]:not([data-skin="classic"]) .clz-item:hover, .clz-skin-card:hover { transform: none; }
}

/* Filet de sécurité « réduire les animations » : aucune animation ni transition ne peut y échapper. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}