@font-face { font-family: "Inter"; src: url("polices/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("polices/inter-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Anton"; src: url("polices/anton.woff2") format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Anton"; src: url("polices/anton-ext.woff2") format("woff2"); font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --nuit: #0b0e1f;
  --nuit-2: #151a3d;
  --verre: rgba(21, 26, 61, 0.72);
  --verre-fort: rgba(17, 21, 48, 0.94);
  --bord: rgba(255, 255, 255, 0.09);
  --texte: #eef0ff;
  --texte-doux: #a7aed6;
  --accent: #6c7cff;
  --accent-2: #a77bff;
  --chaud: #ffb86b;
  --live: #ff4d6d;
  --ok: #3ddc97;
  --rayon: 16px;
  --barre-h: 60px;
  --file-h: 64px;
  --police: "Inter", "gg sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --police-meme: "Anton", Impact, "Arial Black", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--police);
  font-size: 15px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Fond animé ---------- */
.fond { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #1a1f4d 0%, var(--nuit) 60%); }
.fond i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(80px); opacity: 0.35; animation: derive 28s ease-in-out infinite alternate; }
.fond i:nth-child(1) { background: var(--accent); left: -20vmax; top: -25vmax; }
.fond i:nth-child(2) { background: var(--accent-2); right: -25vmax; top: 10vmax; animation-duration: 34s; opacity: 0.25; }
.fond i:nth-child(3) { background: var(--chaud); left: 20vmax; bottom: -40vmax; animation-duration: 40s; opacity: 0.12; }
@keyframes derive { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vmax, 4vmax) scale(1.12); } }

/* ---------- Barre du haut ---------- */
.barre {
  position: fixed; top: 0; left: 0; right: 0; height: var(--barre-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  z-index: 5;
}
.marque { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: 0.02em; font-size: 16px; white-space: nowrap; }
.pastille-live { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; padding: 3px 8px 3px 7px; border-radius: 999px; background: rgba(255, 77, 109, 0.16); color: #ff8aa0; }
.pastille-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.6); animation: pouls 1.8s infinite; }
@keyframes pouls { 70% { box-shadow: 0 0 0 7px rgba(255, 77, 109, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0); } }

.spectateurs { display: flex; align-items: center; margin-left: 6px; min-width: 0; }
.spectateurs img { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--nuit); margin-left: -8px; background: var(--nuit-2); object-fit: cover; }
.spectateurs img:first-child { margin-left: 0; }
.spectateurs span { margin-left: 8px; color: var(--texte-doux); font-size: 13px; white-space: nowrap; }

.actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--bord);
  background: var(--verre); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  cursor: pointer; font-weight: 650; font-size: 14px; white-space: nowrap;
  transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.2s;
}
.bouton:hover { border-color: rgba(255, 255, 255, 0.2); }
.bouton:active { transform: scale(0.97); }
.bouton:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.bouton em { font-style: normal; }
.bouton.primaire { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: white; box-shadow: 0 6px 22px rgba(108, 124, 255, 0.35); }
.bouton.primaire:hover { filter: brightness(1.08); }
.bouton.icone { width: 38px; padding: 0; }
.bouton.large { width: 100%; height: 46px; font-size: 15px; }
.bouton:focus-visible, .onglet:focus-visible, .style:focus-visible, .champ:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.volume { display: flex; align-items: center; gap: 6px; }
.volume input { width: 90px; accent-color: var(--accent); }

/* ---------- Scène ---------- */
.scene {
  position: fixed; left: 0; right: 0; top: var(--barre-h); bottom: 0;
  display: flex; align-items: center; justify-content: center; padding: 12px 16px 16px;
}
body.avec-file .scene { bottom: var(--file-h); }

.attente { text-align: center; max-width: 520px; animation: apparait 0.5s ease both; }
.attente-icone { font-size: 56px; line-height: 1; margin-bottom: 14px; filter: drop-shadow(0 10px 30px rgba(108, 124, 255, 0.5)); animation: flotte 4s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-8px); } }
.attente h1 { margin: 0 0 8px; font-size: clamp(22px, 3.2vw, 32px); font-weight: 800; letter-spacing: -0.01em; }
.attente p { margin: 0; color: var(--texte-doux); line-height: 1.55; }
.attente code { background: rgba(255, 255, 255, 0.08); padding: 1px 6px; border-radius: 6px; color: var(--texte); }
.attente-prepa { margin-top: 14px !important; color: var(--chaud) !important; font-weight: 600; }

.carte-zone { position: absolute; inset: 12px 16px 16px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.carte {
  position: absolute; display: flex; flex-direction: column; border-radius: var(--rayon); overflow: hidden;
  background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: entre 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; pointer-events: auto;
  container-type: inline-size;
}
.carte.sort { animation: sort 0.35s ease forwards; }
@keyframes entre { from { opacity: 0; transform: scale(0.85) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes sort { to { opacity: 0; transform: scale(0.92); } }
@keyframes apparait { from { opacity: 0; transform: translateY(8px); } }

.media { position: relative; flex: none; background: #000; overflow: hidden; }
.media video, .media img.contenu { display: block; width: 100%; height: 100%; object-fit: contain; }
.media-son { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px; background: radial-gradient(circle at 50% 40%, #2b2f6b, #0d1030); }
.media-son img { max-width: 60%; max-height: 60%; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.egaliseur { display: flex; gap: 6px; align-items: flex-end; height: 64px; }
.egaliseur i { width: 10px; border-radius: 4px; background: linear-gradient(var(--chaud), var(--accent-2)); animation: barre 0.9s ease-in-out infinite alternate; }
.egaliseur i:nth-child(2) { animation-delay: -0.3s; } .egaliseur i:nth-child(3) { animation-delay: -0.6s; } .egaliseur i:nth-child(4) { animation-delay: -0.15s; } .egaliseur i:nth-child(5) { animation-delay: -0.45s; }
@keyframes barre { from { height: 14px; } to { height: 64px; } }

/* Légendes */
.legende-bandeau {
  background: #fff; color: #0f0f0f; font-weight: 700; line-height: 1.22;
  padding: clamp(10px, 2.6cqw, 22px) clamp(12px, 3.2cqw, 28px);
  font-size: clamp(11px, 4.4cqw, 40px); white-space: pre-wrap; overflow-wrap: anywhere; text-align: left;
}
.legende-bandeau.long { font-size: clamp(10px, 3.4cqw, 32px); }
.legende-bandeau.tres-long { font-size: clamp(10px, 2.6cqw, 26px); }

.legende-meme {
  position: absolute; left: 4%; right: 4%; text-align: center; color: #fff;
  font-family: var(--police-meme); text-transform: uppercase; line-height: 1.08; letter-spacing: 0.01em;
  font-size: clamp(12px, 7.5cqw, 72px); white-space: pre-wrap; overflow-wrap: anywhere;
  -webkit-text-stroke: 0.07em #000; paint-order: stroke fill;
  text-shadow: 0.03em 0.03em 0 #000, -0.03em 0.03em 0 #000, 0.03em -0.03em 0 #000, -0.03em -0.03em 0 #000, 0 0 0.12em rgba(0, 0, 0, 0.45);
}
.legende-meme.haut { top: 3%; }
.legende-meme.bas { bottom: 4%; }
.legende-meme.long { font-size: clamp(11px, 5.2cqw, 54px); }
.legende-meme.tres-long { font-size: clamp(10px, 3.8cqw, 40px); }

.legende-bulle {
  position: absolute; top: 7%; left: 50%; transform: translateX(-50%); max-width: 84%; width: max-content;
  background: #fff; color: #111; border-radius: clamp(8px, 1.6cqw, 16px); text-align: center;
  padding: clamp(6px, 1.4cqw, 14px) clamp(10px, 2.4cqw, 22px); font-weight: 750; line-height: 1.25;
  font-size: clamp(10px, 3.8cqw, 36px); white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.legende-bulle.long { font-size: clamp(9px, 3cqw, 28px); }
.legende-bulle.tres-long { font-size: clamp(9px, 2.4cqw, 22px); }

.pied-carte {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--verre-fort); font-size: 13px; color: var(--texte-doux);
}
.pied-carte img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.pied-carte b { color: var(--texte); font-weight: 650; }
.pied-carte .bouton { margin-left: auto; height: 30px; padding: 0 10px; font-size: 13px; border-radius: 9px; }
.progression { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.08); }
.progression span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--chaud)); }

.activer-son { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 4; background: var(--live); border-color: transparent; color: #fff; box-shadow: 0 8px 26px rgba(255, 77, 109, 0.45); }

/* ---------- File d'attente ---------- */
.file {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--file-h);
  display: flex; align-items: center; gap: 12px; padding: 0 16px max(0px, env(safe-area-inset-bottom)); z-index: 4;
}
.file-titre { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texte-doux); font-weight: 700; white-space: nowrap; }
.file-liste { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; }
.file-liste::-webkit-scrollbar { display: none; }
.puce { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 4px; border-radius: 999px; background: var(--verre); border: 1px solid var(--bord); white-space: nowrap; max-width: 280px; font-size: 13px; animation: apparait 0.3s ease both; }
.puce img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.puce span { overflow: hidden; text-overflow: ellipsis; }
.puce button { border: 0; background: rgba(255, 255, 255, 0.08); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 11px; flex: none; }
.puce button:hover { background: rgba(255, 77, 109, 0.35); }
.puce:not(:has(button)) { padding-right: 12px; }

/* ---------- Tiroirs ---------- */
.voile { position: fixed; inset: 0; background: rgba(5, 6, 15, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 8; }
body.tiroir-ouvert .voile { opacity: 1; pointer-events: auto; }
.tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 9;
  background: var(--verre-fort); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-left: 1px solid var(--bord); padding: 18px 18px max(18px, env(safe-area-inset-bottom));
  transform: translateX(105%); transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex; flex-direction: column; gap: 12px; overflow-y: auto; user-select: text;
}
.tiroir.ouvert { transform: none; }
.tiroir > * { flex-shrink: 0; }
.tiroir-tete { display: flex; align-items: center; justify-content: space-between; }
.tiroir-tete h2 { margin: 0; font-size: 19px; font-weight: 800; }
.tiroir-aide { margin: 0; color: var(--texte-doux); font-size: 13px; line-height: 1.5; }

.onglets { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.onglet { flex: 1; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--texte-doux); font-weight: 650; cursor: pointer; }
.onglet.actif { background: rgba(108, 124, 255, 0.22); color: var(--texte); }

.depot {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; cursor: pointer;
  border: 1.5px dashed rgba(167, 174, 214, 0.35); background: rgba(255, 255, 255, 0.03); transition: border-color 0.2s, background 0.2s;
}
.depot:hover, .depot.survol { border-color: var(--accent); background: rgba(108, 124, 255, 0.1); }
.depot-icone { font-size: 26px; }
.depot-texte { color: var(--texte-doux); font-size: 13px; line-height: 1.45; }
.depot-texte b { color: var(--texte); font-size: 14px; }
.depot.rempli .depot-texte b { color: var(--ok); }

.champ {
  width: 100%; border-radius: 12px; border: 1px solid var(--bord); background: rgba(255, 255, 255, 0.05);
  color: var(--texte); font: inherit; padding: 11px 12px; resize: none; user-select: text;
}
.champ::placeholder { color: rgba(167, 174, 214, 0.6); }
.etiquette { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--texte-doux); margin-top: 2px; }
.etiquette small { font-weight: 600; letter-spacing: 0; text-transform: none; }

.apercu-zone { display: flex; justify-content: center; }
.apercu { width: 100%; max-height: 240px; display: flex; justify-content: center; }
.apercu .carte { position: relative; animation: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.apercu .pied-carte, .apercu .progression { display: none; }

.styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.style { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 6px 9px; border-radius: 12px; border: 1px solid var(--bord); background: rgba(255, 255, 255, 0.04); cursor: pointer; font-size: 13px; font-weight: 650; color: var(--texte-doux); }
.style.actif { border-color: var(--accent); background: rgba(108, 124, 255, 0.16); color: var(--texte); }
.mini { position: relative; width: 100%; height: 46px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #3a3f7a, #1b1f45); }
.mini i { font-style: normal; position: absolute; font-size: 10px; font-weight: 800; }
.mini-bandeau::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 15px; background: #fff; }
.mini-bandeau i { top: 2px; left: 6px; color: #111; }
.mini-meme i { top: 4px; left: 0; right: 0; text-align: center; color: #fff; font-family: var(--police-meme); font-weight: 400; font-size: 12px; -webkit-text-stroke: 0.08em #000; paint-order: stroke fill; }
.mini-bulle i { top: 7px; left: 50%; transform: translateX(-50%); background: #fff; color: #111; padding: 1px 6px; border-radius: 4px; }

.envoi-etat { display: flex; flex-direction: column; gap: 7px; }
.envoi-texte { font-size: 13px; color: var(--texte-doux); }
.jauge { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.jauge span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.3s ease; }

.historique { display: flex; flex-direction: column; gap: 8px; }
.ligne-histo { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--bord); }
.ligne-histo .type { font-size: 20px; width: 28px; text-align: center; }
.ligne-histo .infos { min-width: 0; flex: 1; }
.ligne-histo .infos b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-histo .infos small { color: var(--texte-doux); font-size: 12px; }
.ligne-histo .bouton { height: 32px; padding: 0 10px; font-size: 13px; }
.vide { color: var(--texte-doux); font-size: 14px; text-align: center; padding: 24px 0; }

/* ---------- Écran d'entrée ---------- */
.entree { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(120% 90% at 50% 0%, #1a1f4d 0%, var(--nuit) 65%); transition: opacity 0.4s ease; text-align: center; padding: 24px; }
.entree.cache { opacity: 0; pointer-events: none; }
.entree h1 { margin: 6px 0 0; font-size: 28px; font-weight: 800; }
.entree h1 b { background: linear-gradient(135deg, var(--accent), var(--chaud)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.entree p { margin: 0; color: var(--texte-doux); max-width: 420px; line-height: 1.5; }
.entree.erreur p { color: #ff9aac; }
.entree.erreur .chargement { display: none; }
.chargement { display: flex; gap: 6px; margin-top: 8px; }
.chargement i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: saute 1s infinite ease-in-out; }
.chargement i:nth-child(2) { animation-delay: 0.15s; } .chargement i:nth-child(3) { animation-delay: 0.3s; }
@keyframes saute { 40% { transform: translateY(-8px); opacity: 1; } 0%, 80%, 100% { opacity: 0.4; } }

/* ---------- Toasts ---------- */
.toasts { position: fixed; top: calc(var(--barre-h) + 6px); left: 50%; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--verre-fort); border: 1px solid var(--bord); padding: 10px 16px; border-radius: 12px; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); animation: apparait 0.25s ease both; max-width: 90vw; }
.toast.ok { border-color: rgba(61, 220, 151, 0.4); }
.toast.erreur { border-color: rgba(255, 77, 109, 0.5); }

/* ---------- Petits écrans et mode réduit (image dans l'image) ---------- */
@media (max-width: 720px) {
  .bouton em, .volume input, .marque span { display: none; }
  .bouton.primaire em { display: inline; }
  .spectateurs span { display: none; }
}
@media (max-width: 420px) {
  .bouton.primaire em { display: none; }
  .bouton.primaire { width: 38px; padding: 0; }
}
@media (max-height: 340px) {
  :root { --barre-h: 0px; --file-h: 0px; }
  .barre, .file, .pied-carte { display: none !important; }
  .scene { padding: 4px; }
  .carte-zone { inset: 4px; }
  .attente p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}