/* Charte graphique TV Wonder : palette INDIGO, titres Gotham (substitut libre :
   Montserrat), textes Helvetica Neue, motif LiVes, formes organiques. */

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: block;
}

:root {
  --dark: #181833;
  --deep: #344193;
  --electric: #6e78eb;
  --tropical: #c1c2ff;
  --white: #ffffff;

  --page: #ffffff;
  --surface: #f8f8fd;
  --text: #181833;
  --muted: #5a5c82;
  --border: #d4d5ea;
  --danger: #cf3b62;
  --danger-wash: #fbe6ec;

  --font-titre: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-texte: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 12px;
  --pad-x: 4.5rem;
  --key-h: clamp(3.3rem, 8.4vh, 5.2rem);
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  font-size: calc(9px + 0.6vmax);
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--dark);
}

body {
  font-family: var(--font-texte);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

input, textarea { -webkit-user-select: text; user-select: text; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible { outline: 3px solid var(--electric); outline-offset: 3px; }

#app { position: fixed; inset: 0; }

.screen { position: absolute; inset: 0; display: none; }
.screen[data-active] { display: flex; }

.nowrap { white-space: nowrap; }

/* ---------- Titres de la charte : bicolores, repère 4 carrés ---------- */

.titre {
  margin: 0;
  font-family: var(--font-titre);
  font-weight: 900;
  letter-spacing: -.01em;
}
.titre__a { color: var(--text); }
.titre__b { color: var(--electric); }

/* Repère de la charte : quatre carrés empilés aux couleurs INDIGO. */
.titre::before {
  content: "";
  display: inline-block;
  width: .2em;
  height: .72em;
  margin-right: .35em;
  vertical-align: baseline;
  background: linear-gradient(to bottom,
    var(--dark) 0 24%, transparent 24% 25%,
    var(--deep) 25% 49%, transparent 49% 50%,
    var(--electric) 50% 74%, transparent 74% 75%,
    var(--tropical) 75% 100%);
}

/* Sur fond sombre, le repère touche le bord de l'écran, comme dans la charte. */
.titre--marque { position: relative; }
.titre--marque::before {
  position: absolute;
  left: calc(-1 * var(--pad-x));
  top: .14em;
  width: .22em;
  margin: 0;
  background: linear-gradient(to bottom,
    var(--white) 0 24%, transparent 24% 25%,
    var(--deep) 25% 49%, transparent 49% 50%,
    var(--electric) 50% 74%, transparent 74% 75%,
    var(--tropical) 75% 100%);
}

.welcome .titre__a, .thanks .titre__a { color: var(--white); }
.welcome .titre__b, .thanks .titre__b { color: var(--tropical); }

/* ---------- Décor : nappe LiVes et formes organiques ---------- */

.decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.nappe {
  position: absolute;
  top: 50%;
  right: -4%;
  height: 128%;
  opacity: .6;
  transform: translateY(-50%) rotate(-6deg);
  animation: houle 28s ease-in-out infinite alternate;
}
@keyframes houle {
  to { transform: translateY(-48%) rotate(-1deg) scale(1.04); }
}

.blob { position: absolute; }

/* ---------- Accueil ---------- */

.welcome {
  flex-direction: column;
  padding: 2.6rem var(--pad-x) 2.4rem;
  background: var(--dark);
  color: var(--white);
  cursor: pointer;
}
.welcome > :not(.decor) { position: relative; }

.welcome .blob--haut { top: 19%; right: 5%; width: 7.5rem; }
.welcome .blob--bas { bottom: 7%; left: 47%; width: 6.5rem; }

.topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Zone de protection du logo : jamais collé au bord ni à un autre élément. */
.logo { display: block; height: 5rem; width: auto; }

.event {
  font-family: var(--font-titre);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tropical);
}

.hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 3rem;
}

.pitch { display: flex; flex-direction: column; align-items: flex-start; }

.welcome h1, .thanks h1 {
  font-size: min(4.6vw, 9.8vh);
  line-height: 1.02;
}

.lede {
  margin: 2.6rem 0 0;
  max-width: 30ch;
  font-size: 1.6rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .88);
}

.cta {
  margin-top: 2.8rem;
  padding: 1.05em 2.3em;
  border-radius: 999px;
  background: var(--electric);
  color: var(--white);
  font-family: var(--font-titre);
  font-size: 1.85rem;
  font-weight: 800;
  box-shadow: 0 .45rem 0 var(--deep);
}
.cta:active { transform: translateY(.3rem); box-shadow: 0 .15rem 0 var(--deep); }

.product { position: relative; margin: 0; justify-self: center; width: 100%; max-width: 50rem; }
.product::before {
  content: "";
  position: absolute;
  inset: 5% 0 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110, 120, 235, .5), rgba(110, 120, 235, 0));
}
.product img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2.2rem 2.4rem rgba(0, 0, 0, .5));
}

.fineprint {
  margin: 0;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .62);
}

.admin-hotspot {
  position: absolute !important;
  top: 0;
  right: 0;
  width: 7rem;
  height: 7rem;
  cursor: default;
}

@media (orientation: portrait) {
  :root { --pad-x: 3.5rem; }
  .hero {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 5rem;
  }
  .product { order: -1; max-width: 90%; }
  .welcome h1, .thanks h1 { font-size: 7.4vw; }
  .nappe { top: 34%; right: -30%; height: 62%; }
  .welcome .blob--haut { top: 11%; right: 7%; }
  .welcome .blob--bas { bottom: 6%; left: auto; right: 10%; }
}

/* ---------- Formulaire (esprit papier en-tête) ---------- */

.form { flex-direction: column; background: var(--page); }

.formbar {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.3rem var(--pad-x) 2.9rem;
  overflow: hidden;
  background:
    url("img/lives-nappe.webp") right -6rem center / 42rem auto no-repeat,
    linear-gradient(90deg, var(--deep), var(--dark));
  color: var(--white);
}
.formbar::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -2.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: var(--page);
}
.formbar .logo { height: 3.6rem; }

.ghost {
  padding: .85rem 1.6rem;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 700;
}
.ghost:active { background: var(--surface); }

.ghost--dark {
  border-color: rgba(193, 194, 255, .55);
  background: transparent;
  color: var(--white);
}
.ghost--dark:active { background: rgba(193, 194, 255, .16); }

.steps {
  display: flex;
  gap: 2.2rem;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .62);
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 2px solid rgba(193, 194, 255, .5);
  border-radius: 50%;
  font-family: var(--font-titre);
  font-weight: 800;
}
.steps li[aria-current] { color: var(--white); }
.steps li[aria-current]::before { border-color: var(--electric); background: var(--electric); color: var(--white); }
.steps li.done::before { content: "✓"; border-color: var(--tropical); color: var(--tropical); }

.formscroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.4rem 3rem 3rem;
  background: var(--page);
  scroll-padding: 2rem;
}

form { max-width: 58rem; margin: 0 auto; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset[hidden] { display: none; }

legend.titre { padding: 0; font-size: 2.5rem; }
.intro { margin: .5rem 0 0; font-size: 1.2rem; color: var(--muted); }

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem 1.8rem;
  margin-top: 2rem;
}
.span-2 { grid-column: 1 / -1; }

.field { position: relative; display: flex; flex-direction: column; gap: .55rem; }
.field[hidden] { display: none; }
.field__label { font-size: 1.15rem; font-weight: 700; }
.field__label small, .consent small { font-size: .95em; font-weight: 400; color: var(--muted); }

.field__box { position: relative; display: block; }

.field input, .field textarea {
  display: block;
  width: 100%;
  height: 4.3rem;
  padding: 0 1.1rem;
  border: 2px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1.65rem;
  outline: none;
  caret-color: var(--electric);
}
.field textarea { height: 6.4rem; padding: .7rem 1.1rem; line-height: 1.3; resize: none; }
.field input:focus, .field textarea:focus {
  border-color: var(--electric);
  background: var(--white);
  box-shadow: 0 0 0 .3rem rgba(110, 120, 235, .25);
}

.field__error { min-height: 1.35rem; font-size: 1.05rem; font-weight: 700; color: var(--danger); }
.field.has-error input, .field.has-error textarea, .field.has-error .consent { border-color: var(--danger); }

.chips { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.2rem; }
.chip {
  padding: .9rem 1.35rem;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 700;
}
.chip[aria-pressed="true"] { border-color: var(--electric); background: var(--electric); color: var(--white); }
.chip[aria-pressed="true"]::before { content: "✓\2002"; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.1rem 1.3rem;
  border: 2px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  font-size: 1.2rem;
  line-height: 1.4;
  cursor: pointer;
}
.consent input {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  border: 2px solid var(--muted);
  border-radius: 7px;
  background: var(--white);
  appearance: none;
  -webkit-appearance: none;
}
.consent input:checked { border-color: var(--deep); background: var(--deep); }
.consent input:checked::after {
  content: "";
  width: .7rem;
  height: 1.25rem;
  border: solid var(--white);
  border-width: 0 .3rem .3rem 0;
  transform: translateY(-.12rem) rotate(45deg);
}

.form-alert {
  margin: 1.6rem 0 0;
  padding: 1rem 1.3rem;
  border-left: .4rem solid var(--danger);
  border-radius: 0 11px 11px 0;
  background: var(--danger-wash);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--danger);
}

.actions { display: flex; gap: 1.2rem; margin-top: 2rem; }

.primary {
  margin-left: auto;
  padding: 1.1rem 2.4rem;
  border-radius: 999px;
  background: var(--deep);
  color: var(--white);
  font-family: var(--font-titre);
  font-size: 1.45rem;
  font-weight: 800;
}
.primary:active { background: var(--electric); }
.primary:disabled { opacity: .6; }

@media (orientation: portrait) {
  .formbar { gap: 1.4rem; }
  .formbar .logo { height: 3rem; }
  .steps { gap: 1.2rem; }
  .steps li { font-size: 1rem; }
  .formscroll { padding: 1.4rem 2rem 3rem; }
}

/* ---------- Clavier ---------- */

.kbd {
  flex: none;
  padding: .9rem 1.2rem 1.2rem;
  background: var(--dark);
}
.kbd[hidden] { display: none; }

.kbd__rows { display: flex; flex-direction: column; gap: .55rem; max-width: 88rem; margin: 0 auto; }
.kbd--tel .kbd__rows { max-width: 36rem; }
.kbd__row { display: flex; gap: .55rem; }

.key {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  min-width: 0;
  height: var(--key-h);
  border-radius: 11px;
  background: var(--deep);
  box-shadow: inset 0 -3px 0 rgba(24, 24, 51, .45);
  color: var(--white);
  font-size: 1.7rem;
  font-weight: 700;
  cursor: pointer;
}
.kbd--tel .key { height: calc(var(--key-h) * .82); }
.key--fn { background: rgba(110, 120, 235, .3); font-size: 1.25rem; }
.key--next { background: var(--electric); font-family: var(--font-titre); font-size: 1.35rem; font-weight: 800; }
.key--on { background: var(--tropical); color: var(--dark); }
.key.is-down { background: var(--tropical); color: var(--dark); transform: translateY(2px); box-shadow: none; }

/* ---------- Remerciement ---------- */

.thanks {
  flex-direction: column;
  justify-content: center;
  padding: 2.6rem var(--pad-x);
  background: var(--dark);
  color: var(--white);
}
.thanks > :not(.decor) { position: relative; }
.thanks .logo { position: absolute; top: 2.6rem; left: var(--pad-x); }
.thanks .blob--haut { top: 16%; right: 12%; width: 8rem; }
.thanks .blob--bas { bottom: 12%; right: 30%; width: 7rem; }
.thanks__body { display: flex; flex-direction: column; align-items: flex-start; }
.thanks .lede { margin-top: 2.6rem; max-width: 40ch; }
.thanks .lede--soft { margin-top: 1rem; font-size: 1.3rem; color: rgba(255, 255, 255, .66); }
.thanks .ghost { margin-top: 3rem; }

.countdown {
  position: absolute !important;
  left: 0;
  bottom: 0;
  width: 100%;
  height: .5rem;
  background: var(--electric);
  transform-origin: left;
}
.thanks[data-active] .countdown { animation: deplete 10s linear forwards; }
@keyframes deplete { to { transform: scaleX(0); } }

@media (orientation: portrait) {
  .thanks .blob--haut { top: 12%; right: 8%; }
  .thanks .blob--bas { bottom: 8%; right: 12%; }
}

/* ---------- Fenêtres ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: rgba(24, 24, 51, .74);
}
.overlay[hidden] { display: none; }
.overlay--top { z-index: 20; }

.sheet {
  width: min(44rem, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 2.4rem;
  border-radius: 18px;
  background: var(--white);
  color: var(--text);
}
.sheet h2 { margin: 0 0 1rem; font-family: var(--font-titre); font-size: 2rem; font-weight: 900; }
.sheet p { font-size: 1.3rem; line-height: 1.4; }
#idle .primary { margin-top: 1rem; }

.pin-dots { display: flex; justify-content: center; gap: .9rem; min-height: 1.4rem; margin: 1.4rem 0 .4rem; }
.pin-dots i { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--electric); }
.pin-error { min-height: 1.6rem; margin: 0 0 .8rem; text-align: center; font-size: 1.1rem !important; font-weight: 700; color: var(--danger); }

.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: 1.4rem; }
.pinpad button {
  height: 4.6rem;
  border-radius: 11px;
  background: var(--surface);
  border: 2px solid var(--border);
  font-family: var(--font-titre);
  font-size: 1.8rem;
  font-weight: 700;
}
.pinpad button:active { background: var(--tropical); }
.pinpad .pin-ok { border-color: var(--deep); background: var(--deep); color: var(--white); font-size: 1.4rem; }
.wide { width: 100%; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem; margin: 1.2rem 0; }
.stats dt { font-size: 1.05rem; color: var(--muted); }
.stats dd { margin: .2rem 0 0; font-size: 1.35rem; font-weight: 700; overflow-wrap: anywhere; }
.stats dd.path { font-size: 1.05rem; font-weight: 400; }

.winners { margin: 0 0 1.4rem; padding: 1rem 1rem 1rem 2.6rem; border-radius: 11px; background: var(--surface); font-size: 1.2rem; line-height: 1.4; }
.winners li + li { margin-top: .8rem; }
.winners strong { display: block; font-size: 1.35rem; }

.admin-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.admin-actions .primary { margin-left: 0; flex-basis: 100%; }
.danger { color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}