:root {
  --orange: #f26a1b; --char: #1d2230; --bg: #11141d; --card: #1c212e; --txt: #f4f5f8; --muted: #9aa3b5;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: var(--bg); color: var(--txt);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  overflow: hidden; cursor: default;
}

/* ------------------------------------------------ MENU (écran tactile) */
body.menu { display: flex; flex-direction: column; padding: 3vh 4vw; }
body.menu header { text-align: center; padding-bottom: 2vh; }
body.menu h1 { margin: 0; font-size: clamp(32px, 5.5vh, 64px); font-weight: 700; letter-spacing: .5px; }
body.menu h1 span { color: var(--orange); }
body.menu header p { margin: .6vh 0 0; color: var(--muted); font-size: clamp(16px, 2.4vh, 28px); }

#grid {
  flex: 1; overflow-y: auto; display: grid; gap: 2.4vh 2.4vw; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 26vw, 360px), 1fr));
  padding: 1vh .5vw 2vh;
}
.tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: clamp(160px, 26vh, 280px); padding: 3vh 1.5vw; border-radius: 28px;
  background: linear-gradient(160deg, var(--c, var(--orange)), color-mix(in srgb, var(--c, var(--orange)) 60%, #000));
  color: #fff; text-decoration: none; text-align: center; border: 0; font: inherit; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .12s ease, filter .12s ease;
}
.tile:active { transform: scale(.96); filter: brightness(1.1); }
.tile .ini { font-size: clamp(48px, 9vh, 96px); font-weight: 700; line-height: 1; }
.tile .name { margin-top: 1.4vh; font-size: clamp(20px, 3.2vh, 36px); font-weight: 600; word-break: break-word; }
.tile .host { margin-top: .6vh; font-size: clamp(13px, 1.8vh, 20px); opacity: .8; }
.tile.add { background: transparent; border: 3px dashed #3a4257; color: var(--muted); box-shadow: none; }
.tile.add .ini { font-weight: 300; }
.tile .del {
  position: absolute; top: 10px; right: 10px; width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: #e03131; color: #fff; font-size: 26px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
body.managing .tile:not(.add) { animation: wiggle .5s ease-in-out infinite alternate; }
@keyframes wiggle { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }

body.menu footer { display: flex; justify-content: flex-end; padding-top: 1vh; }
.ghost {
  background: transparent; color: var(--muted); border: 1px solid #3a4257; border-radius: 14px;
  padding: 1.2vh 2vw; font-size: clamp(14px, 2vh, 22px); cursor: pointer; font-family: inherit;
}

.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; z-index: 10; }
.overlay[hidden] { display: none; }
.dialog { width: min(640px, 92vw); background: var(--card); border-radius: 24px; padding: 3vh 3vw; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.dialog h2 { margin: 0 0 2vh; font-size: clamp(22px, 3.2vh, 36px); }
.dialog label { display: block; margin-bottom: 1.6vh; color: var(--muted); font-size: clamp(14px, 2vh, 22px); }
.dialog label[hidden] { display: none; }
.dialog input {
  display: block; width: 100%; margin-top: .6vh; padding: 1.6vh 1.2vw; font-size: clamp(18px, 2.6vh, 30px);
  background: #0f121a; color: var(--txt); border: 2px solid #343c52; border-radius: 14px; font-family: inherit; user-select: text; -webkit-user-select: text;
}
.dialog input:focus { outline: none; border-color: var(--orange); }
.err { color: #ff6b6b; min-height: 1.4em; margin: 0 0 1vh; font-size: clamp(14px, 2vh, 22px); }
.actions { display: flex; gap: 1.5vw; justify-content: flex-end; }
.actions button { font-size: clamp(16px, 2.4vh, 26px); padding: 1.6vh 2.4vw; border-radius: 14px; font-family: inherit; cursor: pointer; }
#ok { background: var(--orange); color: #fff; border: 0; font-weight: 600; }
#ok:disabled { opacity: .5; }

/* ------------------------------------------------ ACTUALITÉS (écran vertical) */
body.news { background: #000; }
.bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; }
.bg.on { opacity: 1; animation: kb 22s ease-out forwards; }
.bg.noimg { background-image: radial-gradient(circle at 30% 20%, #f26a1b 0%, #8a2f0a 35%, #1d2230 80%); }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.08); } }
.shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 38%, rgba(0,0,0,.78) 68%, rgba(0,0,0,.94) 100%); }

.top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 2.4vh 4vw; font-size: clamp(16px, 2vh, 28px); text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.brand { font-weight: 700; font-size: clamp(20px, 2.8vh, 38px); }
.brand b { color: var(--orange); }
#meta { color: #e6e8ee; text-transform: capitalize; text-align: right; }

#slide { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 5vw 7vh; }
#title { margin: 0 0 2.4vh; font-size: clamp(30px, 4.6vh, 76px); line-height: 1.15; font-weight: 700; text-shadow: 0 3px 14px rgba(0,0,0,.6); }
#desc { margin: 0; font-size: clamp(18px, 2.5vh, 40px); line-height: 1.4; color: #dfe2ea; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
#slide.in #title, #slide.in #desc { animation: rise .9s ease both; }
#slide.in #desc { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.bar { position: absolute; left: 0; right: 0; bottom: 0; height: .7vh; background: rgba(255,255,255,.15); }
.bar i { display: block; height: 100%; width: 0; background: var(--orange); }
@keyframes fill { from { width: 0; } to { width: 100%; } }

/* ------------------------------------------------ CHOIX DE LA SOURCE D'ACTUS */
body.sources #list { flex: 1; overflow-y: auto; display: grid; gap: 1.6vh 1.8vw; align-content: start; grid-template-columns: repeat(2, 1fr); padding: 1vh .5vw 2vh; }
.src {
  position: relative; display: flex; flex-direction: column; justify-content: center; text-align: left; font: inherit; color: var(--txt);
  background: var(--card); border: 3px solid #2b3246; border-radius: 22px; padding: 2.2vh 2vw; min-height: clamp(90px, 14vh, 140px); cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.src:active { transform: scale(.97); }
.src:disabled { opacity: .6; }
.src .sname { font-size: clamp(22px, 3.4vh, 38px); font-weight: 700; }
.src .sdesc { margin-top: .5vh; color: var(--muted); font-size: clamp(14px, 2vh, 22px); }
.src.current { border-color: var(--orange); background: linear-gradient(160deg, rgba(242,106,27,.22), var(--card)); }
.src .badge { position: absolute; top: 12px; right: 14px; background: var(--orange); color: #fff; border-radius: 999px; padding: .3vh 1vw; font-size: clamp(12px, 1.7vh, 18px); font-weight: 600; }
.back { text-decoration: none; display: inline-block; }
body.sources footer { justify-content: space-between; }
.toast { position: fixed; left: 50%; bottom: 11vh; transform: translate(-50%, 20px); background: #2f9e44; color: #fff; padding: 1.6vh 2.4vw; border-radius: 16px; font-size: clamp(16px, 2.4vh, 28px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: #e03131; }
.src.random { grid-column: 1 / -1; }