:root { --size: 480px; --muted:#8ea0b4; }
html, body { height:100%; margin:0; }
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background: radial-gradient(1200px 800px at 20% 10%, #202838 0, #11151c 40%, #0b0e13 100%);
  color:#e6edf5; display:grid; place-items:center; padding:20px;
}
.app{ display:grid; gap:18px; grid-template-columns: var(--size) minmax(320px,520px); align-items:start; }

/* ——— SCÈNE ——— */
.scene{
  width:var(--size); height:var(--size); position:relative;
  border-radius:18px; overflow:hidden; background:#0b0e13;
  box-shadow:0 10px 30px rgba(0,0,0,.4); outline:1px solid rgba(255,255,255,.06);
}
.layer{ position:absolute; inset:0; width:100%; height:100%; display:none; }
.show{ display:block; }
.layer.bg{ object-fit: cover; object-position:center; }
#sky-matin.layer.bg{ object-position:left center; }
#sky-soir.layer.bg { object-position:right center; }
#sky-matin{ background:#86c6ff } 
#sky-day{ background:#87b6ff } 
#sky-soir{ background:#e67928 }
#sky-night{ background:#0a121d } 
#sky-gray{ background:#cfd5da }
#sky-clouds,#sky-couvert,#sky-storm,#sky-wind,#ov-rain,#ov-hail,#ov-snow,
#ground-spring,#ground-summer,#ground-autumn,#ground-winter,#char{ object-fit: contain; }

/* ——— HUDs dans l'image ——— */
.placetag{
  position:absolute; left:12px; top:12px; display:flex; flex-direction:column; gap:4px; pointer-events:none;
}
.placetag .tag{
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.15);
  border-radius:10px; padding:4px 10px; font-size:13px; font-weight:700; color:#e6edf5;
  text-shadow:0 1px 0 rgba(0,0,0,.25); max-width:60vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* HUD “barre bas” : 2 colonnes (gauche & droite) */
.hud{
  position:absolute; left:12px; right:12px; bottom:12px;
  display:flex; justify-content:space-between; gap:8px; pointer-events:none;
}
.hud .col{ display:flex; flex-direction:column; gap:6px; }
.hud .col.left{ align-items:flex-start; }
.hud .col.right{ align-items:flex-end; }

.badge{
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.15); border-radius:10px;
  padding:3px 6px; font-size:12px; font-weight:700; color:#e6edf5; text-shadow:0 1px 0 rgba(0,0,0,.25);
  display:flex; align-items:center; gap:6px;
  width:auto; max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ico{width:14px;height:14px;display:inline-block}
.ico svg{width:14px;height:14px;display:block}

/* ——— PANNEAU ——— */
.panel{ background:#1a1f28; padding:14px; border-radius:14px; border:1px solid #21262d; }
.panel h2{ margin:0 0 8px 0; font-size:18px; }
button,select{ cursor:pointer; border:1px solid #2a3340; background:#0f131a; color:#e6edf5; border-radius:10px; padding:8px 10px; }
select{ width:100%; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px }
.days{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px }
.slots{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px }
.pill{ border-radius:999px }
.active{ outline:2px solid #3b82f6 }
.fine{ font-size:12px; opacity:.75 }
.fine + select{ margin-top:6px; } /* <-- espace sous “Ville” */
.sep{ height:1px; background:#232b3a; margin:10px 0 }
.status{ font-size:12px; color:var(--muted); min-height:18px; margin-top:6px }
.disabled{ opacity:.6; pointer-events:none }
.spinner{ width:16px; height:16px; border-radius:50%; border:2px solid #60728a; border-top-color:#e6edf5; display:inline-block; animation:spin .8s linear infinite; vertical-align:-2px; margin-right:6px }
@keyframes spin{ to{ transform:rotate(360deg) } }

@media (max-width: 1200px){
  .app{ grid-template-columns:1fr; gap:16px; align-items:start; }
  .scene{ width:min(90vw, 560px); aspect-ratio:1/1; height:auto; margin:0 auto; contain:paint; }
}
@media (max-width: 720px){
  .app{ gap:14px; }
  .scene{ width:min(94vw, 520px); aspect-ratio:1/1; height:auto; }
  .panel{ padding:10px }
  body{ overscroll-behavior:none; }
  .badge{ max-width:140px; }
}

/* Animation éclairs chaotiques */
#fx-lightning {
  animation: flash-chaos 6s infinite;
  opacity: 0;
}
@keyframes flash-chaos {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  7%   { opacity: 0; }
  10%  { opacity: 1; }
  11%  { opacity: 0; }
  20%  { opacity: 1; }
  21%  { opacity: 0; }
  /* longue pause */
  60%  { opacity: 0; }
  62%  { opacity: 1; }
  63%  { opacity: 0; }
  70%  { opacity: 1; }
  71%  { opacity: 0; }
  /* encore pause */
  100% { opacity: 0; }
}