/* Dadou Beauty Together — prototype test. Mobile-first, français. */
:root {
  --bg: #14101c; --card: #1f1830; --accent: #b388ff; --accent2: #ff8fb3;
  --text: #f3efff; --muted: #a89cc9; --danger: #ff6b6b; --ok: #7be495;
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 0 4rem;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}
header {
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem 1rem; background: #1a1428; position: sticky; top: 0; z-index: 10;
}
header h1 { font-size: 1.15rem; margin: 0; }
.badge {
  font-size: .7rem; background: #3a2d5c; color: var(--accent);
  padding: .2rem .6rem; border-radius: 999px;
}
.view { padding: 1rem; max-width: 720px; margin: 0 auto; }
.hidden { display: none !important; }
.card {
  background: var(--card); border-radius: 14px; padding: 1rem; margin: 1rem 0;
}
.card h2, .card h3 { margin-top: 0; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.banner {
  background: #2a2140; border: 1px solid #4a3a75; border-radius: 10px;
  padding: .7rem; margin: .8rem 0; font-size: .9rem; line-height: 1.4;
}
label { display: block; margin: .6rem 0 .3rem; font-size: .9rem; }
input[type="text"] {
  width: 100%; padding: .7rem; border-radius: 10px; border: 1px solid #4a3a75;
  background: #14101c; color: var(--text); font-size: 1rem;
}
.row { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.row input { flex: 1; min-width: 0; }
button {
  border: none; border-radius: 10px; padding: .7rem 1rem; font-size: .95rem;
  background: #3a2d5c; color: var(--text); cursor: pointer;
}
button.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #1a1428; font-weight: 700; }
button.secondary { background: #2a2140; border: 1px solid #4a3a75; }
button.danger { background: #3a1f28; color: var(--danger); width: 100%; margin-top: 1rem; }
button.on { outline: 2px solid var(--ok); }
.status {
  margin: .6rem auto; max-width: 720px; padding: .7rem 1rem; border-radius: 10px;
  background: #2a2140; font-size: .9rem;
}
.status.error { background: #3a1f28; color: #ffb3b3; }
.tiles { display: grid; grid-template-columns: 1fr; gap: .8rem; margin: .8rem 0; }
@media (min-width: 560px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile {
  position: relative; background: #000; border-radius: 12px; overflow: hidden;
  aspect-ratio: 3/4; max-height: 60vh;
}
.tile video, .tile canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-label {
  position: absolute; left: .5rem; bottom: .5rem; background: rgba(0,0,0,.55);
  padding: .2rem .6rem; border-radius: 999px; font-size: .8rem;
}
.perf {
  position: absolute; right: .5rem; bottom: .5rem; background: rgba(0,0,0,.55);
  padding: .2rem .5rem; border-radius: 8px; font-size: .72rem; color: var(--ok);
}
.warn {
  position: absolute; top: .5rem; left: .5rem; right: .5rem; background: rgba(58,31,40,.9);
  color: #ffd9d9; padding: .4rem .6rem; border-radius: 8px; font-size: .78rem; text-align: center;
}
.controls { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0; }
.tabs { display: flex; gap: .5rem; margin: .6rem 0; }
.tabs button.active { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #1a1428; font-weight: 700; }
.fxrow { margin: .8rem 0; padding: .6rem; background: #241c3a; border-radius: 10px; }
.fxrow label { margin: 0 0 .4rem; display: flex; align-items: center; gap: .5rem; }
.swatches { display: flex; gap: .45rem; flex-wrap: wrap; margin: .4rem 0; }
.swatch {
  width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid transparent; padding: 0;
}
.swatch.active { border-color: #fff; }
input[type="range"] { width: 100%; accent-color: var(--accent2); }
#fx-gamme button.active { outline: 2px solid var(--accent2); }