/*
themes.css
version: 2.03
build: 2025-08-20 01:45
*/

/* =========================
   Base UI (neutre, non-skin)
   ========================= */
:root {
  --bg:#0a0f14; --panel:#0f1726; --border:#22314a; --text:#e9f1ff; --muted:#9db6d6; --accent:#7cc4ff;
  --ok:#7ee2a8; --warn:#ffd27f; --danger:#ff8a80; --ring-bg:#1f2a3b;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, sans-serif; background:var(--bg); color:var(--text); }
header.appbar { padding:14px; display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:10; border-bottom:1px solid var(--border); margin-bottom:14px; background:rgba(10,15,20,.9); backdrop-filter: blur(6px); }
h1 { margin:0; font-size:20px; flex:1; }
.iconbtn { width:44px; height:44px; border-radius:12px; border:1px solid var(--border); background:#0d1420; color:var(--text); font-size:20px; cursor:pointer; }
.page { max-width:1100px; margin:0 auto; padding:14px; }

/* GRID : 2 colonnes pour settings+séance, et "Séance du jour" prend toute la ligne en dessous */
.grid { display:grid; grid-template-columns: 1.3fr 1.7fr; gap:14px; }
#planPanel { grid-column: 1 / -1; } /* plein largeur sous la grille */
@media (max-width: 900px){ .grid { grid-template-columns: 1fr; } }

.card { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px; }
label { display:block; color:var(--muted); font-size:14px; margin:10px 0 6px; }
select, input[type=text], input[type=number], input[type=time] { width:100%; background:#0a1320; color:var(--text); border:1px solid var(--border); border-radius:12px; padding:10px 12px; font-size:16px; }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.btn { border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:#0a1320; color:var(--text); cursor:pointer; font-weight:800; font-size:18px; }
.btn.ok { background:#102a1e; border-color:#1e5c3c; }
.btn.warn { background:#3a2a10; border-color:#6b4c1b; }
.btn.secondary { font-size:14px; padding:10px 12px; }
.list .item { border-bottom:1px dashed var(--border); padding:8px 0; }
.list .item.active { background:#0d1420; border-radius:10px; padding:10px; outline:2px solid var(--accent); }
.muted { color:var(--muted); font-size:13px; }
.hidden { display:none !important; }
.tips { margin-top:8px; font-size:15px; }
.tips li { margin:4px 0; }
.badge, .chip { display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--border); font-size:12px; color:var(--muted); }
.chips { display:flex; gap:8px; margin-bottom:8px; }

/* =========================
   RING styles (cercle + centrage du texte)
   ========================= */
.ring { width:220px; height:220px; margin:10px auto; position:relative; }
.ring svg { position:absolute; inset:0; transform: rotate(-90deg); display:block; }
.ring .track   { stroke: var(--border); fill:none; stroke-width:12; opacity:.28; }
.ring .progress{ stroke: var(--accent); fill:none; stroke-width:12; stroke-linecap:round; transition: stroke-dashoffset .15s linear; }

/* Texte centré dans le cercle (chip + valeur) */
.ring .timer {
  position:absolute; inset:0;
  display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center;
  line-height:1; margin:0;
}
#timerChip.bigchip { font-weight:800; font-size:15px; padding:4px 12px; border-radius:999px; background:rgba(0,0,0,.25); border:1px solid var(--border); color:var(--text); }
#timerDisplay { font-size:50px; font-weight:900; text-shadow:0 2px 10px rgba(0,0,0,.25); }

/* Countdown centré dans le cercle (plus grand) */
.countdown { position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-size:120px; font-weight:900; text-shadow:0 6px 24px rgba(0,0,0,.6); }

/* =========================
   SKINS — chacun en un bloc
   ========================= */

/* ---- SKIN: Dark ---- */
.skin-dark { --bg:#0a0f14; --panel:#0f1726; --border:#22314a; --text:#e9f1ff; --muted:#9db6d6; --accent:#7cc4ff; }
.skin-dark header.appbar { box-shadow: 0 0 0 1px rgba(124,196,255,.08) inset; }

/* ---- SKIN: Neo-Arcade ---- */
.skin-neoarcade { --bg:#0b0112; --panel:#150222; --border:#3b0f5a; --text:#f5eaff; --muted:#caa8ff; --accent:#ff71f6; }
.skin-neoarcade header.appbar { box-shadow: 0 0 0 1px rgba(255,113,246,.22) inset; background: linear-gradient(to right, rgba(255,113,246,.05), rgba(124,196,255,.05)), rgba(5,0,10,.72); }
.skin-neoarcade .session-pane::before {
  content:""; position:absolute; inset:-1px; z-index:0; pointer-events:none; opacity:.9;
  background:
    radial-gradient(60% 40% at 0% 0%, rgba(255,113,246,.18), transparent 60%),
    radial-gradient(60% 40% at 100% 0%, rgba(124,196,255,.16), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,113,246,.1) 0 2px, transparent 2px 80px);
}

/* ---- SKIN: Samurai-Neon ---- */
.skin-samuraineon { --bg:#061013; --panel:#0a1b20; --border:#15434c; --text:#d6f9ff; --muted:#95c8d1; --accent:#22ffd6; }
.skin-samuraineon header.appbar { box-shadow: 0 0 0 1px rgba(34,255,214,.22) inset; background: linear-gradient(to right, rgba(34,255,214,.05), rgba(255,80,80,.05)), rgba(3,12,14,.74); }
.skin-samuraineon .session-pane::before {
  content:""; position:absolute; inset:-1px; z-index:0; pointer-events:none; opacity:.9;
  background:
    radial-gradient(60% 50% at 0% 100%, rgba(34,255,214,.16), transparent 60%),
    radial-gradient(60% 50% at 100% 100%, rgba(255,80,80,.14), transparent 60%),
    repeating-linear-gradient(45deg, rgba(34,255,214,.12) 0 8px, transparent 8px 40px);
}

/* ---- SKIN: Retro-Pixel ---- */
.skin-retropixel { --bg:#0f0f0f; --panel:#171717; --border:#2a2a2a; --text:#f0f0f0; --muted:#c7c7c7; --accent:#00ff66; }
.skin-retropixel { image-rendering: pixelated; }
.skin-retropixel header.appbar { box-shadow: 0 0 0 1px rgba(0,255,102,.22) inset; background: linear-gradient(to right, rgba(0,255,102,.05), rgba(0,0,0,.05)), rgba(10,10,10,.82); }
.skin-retropixel .session-pane::before {
  content:""; position:absolute; inset:-1px; z-index:0; pointer-events:none; opacity:.9;
  background:
    repeating-linear-gradient(0deg, rgba(0,255,102,.08), rgba(0,255,102,.08) 2px, transparent 2px, transparent 12px),
    repeating-linear-gradient(90deg, rgba(0,255,102,.08) 0 2px, transparent 2px 12px);
}

/* ---- SKIN: Rainbow (test) ---- */
.skin-rainbow { --bg:linear-gradient(135deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#8f00ff); --panel:rgba(0,0,0,.6); --border:#fff; --text:#fff; --muted:#eee; --accent:#ffcc00; }
.skin-rainbow header.appbar { background:linear-gradient(90deg,red,orange,yellow,green,blue,indigo,violet); color:#fff; box-shadow:0 0 12px rgba(255,255,255,.6); }
.skin-rainbow .card { background:rgba(0,0,0,.5); border:2px solid #fff; }
.skin-rainbow .btn { background:linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet); color:#fff; border:none; font-weight:700; }


/* v5.2 small toolbar for profile actions */
.btnbar { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.btnbar .btn { padding:.45rem .7rem; font-size:.9rem; }