/* ============================================================================
   RSKTV Player Pro — Écran d'activation (refonte premium v347)
   OBJECTIFS : tenir en UNE seule page (aucun défilement), lisible à distance
   (10-foot UI), et s'adapter à tous les formats/résolutions de TV.
   MÉTHODE : layout en colonne flex plein écran (topbar / contenu / disclaimer) ;
   toutes les tailles en unités VIEWPORT (vh/vw) → l'écran se met à l'échelle
   automatiquement en 720p, 1080p, 4K, 16:9 comme 21:9.
   Tizen 4 / Chromium 56 : flexbox préfixé, PAS de gap/calc/filter. Scopé activation.
   ============================================================================ */

/* Une seule page : on coupe le défilement hérité et on répartit en colonne. */
#screen-activation.active {
  overflow: hidden;
}
#screen-activation .act-bg,
#screen-activation .act-topbar,
#screen-activation .act-content,
#screen-activation .act-disclaimer { position: relative; z-index: 2; }

/* ── Fond cinématique (couvre tout, hors flux) ─────────────────────────────── */
#screen-activation .act-bg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;
  background: #08080f; overflow: hidden;
}
#screen-activation .act-bg-grid {
  position: absolute; top: -8%; left: -8%; right: -8%; bottom: -8%;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  -webkit-transform: rotate(-9deg) scale(1.25); transform: rotate(-9deg) scale(1.25);
  opacity: 0.05;
}
#screen-activation .act-poster {
  width: 12vh; height: 18vh; margin: 0.9vh;
  border-radius: 1vh; background: #33335c;
}
#screen-activation .act-bg-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  /* Voile de lisibilite pose sur la mosaique d'affiches. Litteral, il
     restait une tache sombre en theme clair. Les canaux du fond le font
     suivre le theme sans toucher aux opacites, qui portent l'intention. */
  background: -webkit-linear-gradient(left, #08080f 42%, rgba(8,8,15,0.55) 74%, rgba(8,8,15,0.30) 100%);
  background: linear-gradient(90deg, #08080f 42%, rgba(8,8,15,0.55) 74%, rgba(8,8,15,0.30) 100%);
  background: -webkit-linear-gradient(left, var(--rsk-bg) 42%, rgba(var(--rsk-bg-rgb),0.55) 74%, rgba(var(--rsk-bg-rgb),0.30) 100%);
  background: linear-gradient(90deg, var(--rsk-bg) 42%, rgba(var(--rsk-bg-rgb),0.55) 74%, rgba(var(--rsk-bg-rgb),0.30) 100%);
}
#screen-activation .act-bg-glow {
  position: absolute; top: -18vh; right: -14vh;
  width: 58vh; height: 58vh; border-radius: 50%;
  background: -webkit-radial-gradient(center, rgba(var(--rsk-accent-rgb), 0.20) 0%, rgba(var(--rsk-accent-rgb), 0) 70%);
  background: radial-gradient(circle, rgba(var(--rsk-accent-rgb), 0.20) 0%, rgba(var(--rsk-accent-rgb), 0) 70%);
}

/* ── Barre de marque (haut, hauteur auto) ──────────────────────────────────── */
#screen-activation .act-topbar {
  -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
  padding: 3.2vh 6% 0 7%;
}
#screen-activation .act-topbar-logo {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
}
#screen-activation .act-logo {
  width: 6.4vh; height: 6.4vh; margin-right: 1.6vh;
  border-radius: 1.3vh; object-fit: cover;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
#screen-activation .act-logo-text {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  line-height: 1;
}
#screen-activation .act-logo-brand {
  font-size: 3.4vh; font-weight: 900; letter-spacing: 0.2vh;
  background: linear-gradient(180deg, #FF8A7E 0%, #E4141B 55%, #9E0C12 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
#screen-activation .act-logo-tv { -webkit-text-fill-color: #ffffff; color: #ffffff; }
#screen-activation .act-logo-sub {
  font-size: 1.4vh; font-weight: 600; color: #8a8ab0;
  letter-spacing: 0.5vh; margin-top: 0.7vh;
}
#screen-activation .act-topbar-label {
  font-size: 1.7vh; letter-spacing: 0.4vh; color: #7a7aa0;
  border: 1px solid #23233f; border-radius: 4vh; padding: 1vh 2.4vh;
}

/* ── Corps : 2 colonnes, occupe l'espace restant, centré verticalement ─────── */
#screen-activation .act-content {
  -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
  padding: 0 6% 0 7%;
  overflow: hidden;
}
#screen-activation .act-panel {
  -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto;
  min-width: 0; padding-right: 4%;
}
#screen-activation .act-title {
  font-size: 4.6vh; font-weight: 900; color: #f6f6ff;
  line-height: 1.08; margin: 0 0 1.2vh;
}
#screen-activation .act-title span { color: var(--rsk-accent); }
/* Sous-titre masqué : redondant avec les étapes numérotées (déclutter + une page). */
#screen-activation .act-subtitle { display: none; }

/* Étapes numérotées (compactes) */
#screen-activation .act-steps {
  list-style: none; margin: 0 0 2.6vh; padding: 0; counter-reset: actstep;
}
#screen-activation .act-steps li {
  position: relative; padding-left: 4.8vh; margin-bottom: 1.4vh;
  font-size: 2.1vh; color: #a0a0cc; line-height: 3.4vh;
  counter-increment: actstep;
}
#screen-activation .act-steps li strong { color: #f0f0fa; font-weight: 700; }
#screen-activation .act-steps li:before {
  content: counter(actstep);
  position: absolute; left: 0; top: 0;
  width: 3.4vh; height: 3.4vh; border-radius: 50%;
  background: rgba(var(--rsk-accent-rgb), 0.15); color: #ff5964;
  font-size: 1.9vh; font-weight: 800; text-align: center; line-height: 3.4vh;
}

/* Cartes MAC + Clé (côte à côte) */
#screen-activation .act-cards {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch;
  margin-bottom: 2.6vh;
}
#screen-activation .act-mac-box,
#screen-activation .act-key-box {
  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;
  min-width: 0; -webkit-box-sizing: border-box; box-sizing: border-box;
  border-radius: 1.4vh; padding: 1.9vh 2vw;
}
#screen-activation .act-mac-box {
  background: #101024; border: 1px solid #23233f; margin-right: 2vw;
}
#screen-activation .act-key-box {
  position: relative; overflow: hidden;
  background: #16040a; border: 1px solid #4a1520;
}
#screen-activation .act-key-box:before {
  content: ""; position: absolute; left: 0; top: 1.7vh; bottom: 1.7vh;
  width: 0.4vh; border-radius: 0 0.3vh 0.3vh 0; background: var(--rsk-accent);
}
#screen-activation .act-mac-label,
#screen-activation .act-key-label {
  font-size: 1.5vh; letter-spacing: 0.2vh; margin-bottom: 1.1vh;
}
#screen-activation .act-mac-label { color: #8a8ab0; }
#screen-activation .act-key-label { color: #e88; padding-left: 1.1vh; }
#screen-activation .act-mac-value {
  font-family: 'Courier New', Courier, monospace;
  font-size: 2.9vh; font-weight: 700; color: #f0f0fa; letter-spacing: 0.2vh;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#screen-activation .act-key-value {
  font-family: 'Courier New', Courier, monospace;
  font-size: 4.4vh; font-weight: 700; color: #ffffff; letter-spacing: 0.8vh;
  padding-left: 1.1vh; line-height: 1.1;
}
#screen-activation .act-key-hint {
  font-size: 1.5vh; color: #8a8ab0; line-height: 1.4;
  margin-top: 1vh; padding-left: 1.1vh;
}

/* Statut */
#screen-activation .act-status {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  margin-bottom: 2.4vh;
}
#screen-activation .act-status-dot {
  width: 1.5vh; height: 1.5vh; margin-right: 1.4vh;
}
#screen-activation .act-status-text { font-size: 2.2vh; }
#screen-activation .act-error {
  font-size: 1.9vh; color: #ff6b6b; margin: -1.4vh 0 2.2vh;
}

/* Bouton principal — rouge premium (override du .act-btn sombre) */
#screen-activation #btn-check-activation {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  background: -webkit-linear-gradient(top, var(--rsk-accent) 0%, #b0000c 100%);
  background: linear-gradient(180deg, var(--rsk-accent) 0%, #b0000c 100%);
  color: #fff; border: none;
  border-radius: 1.3vh; padding: 1.9vh 3vw;
  font-size: 2.2vh; font-weight: 800; letter-spacing: 0.15vh;
  min-height: 0; margin-top: 0;
  box-shadow: 0 0.4vh 0 #6a0008, 0 0.8vh 2.4vh rgba(var(--rsk-accent-rgb), 0.40);
  -webkit-transition: -webkit-transform 0.1s; transition: transform 0.1s;
}
#screen-activation #btn-check-activation .act-btn-icon {
  font-size: 2.4vh; margin-right: 1.2vh; color: #fff;
}
#screen-activation #btn-check-activation.is-focused,
#screen-activation #btn-check-activation.focused,
#screen-activation #btn-check-activation:focus {
  outline: none;
  box-shadow: 0 0.4vh 0 #6a0008, 0 0 0 0.4vh rgba(255,255,255,0.55), 0 0.8vh 2.4vh rgba(var(--rsk-accent-rgb), 0.55);
  -webkit-transform: scale(1.03); transform: scale(1.03);
}

/* ── Colonne droite : carte QR blanche flottante ───────────────────────────── */
#screen-activation .act-qr-panel {
  -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
}
#screen-activation .act-qr-box {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  background: #ffffff; border-radius: 2vh; padding: 2.4vh 2.4vh 1.8vh;
  box-shadow: 0 1.2vh 4vh rgba(0,0,0,0.55);
}
#screen-activation .act-qr-img {
  width: 32vh; height: 32vh; border-radius: 1.2vh; background: #fff;
  overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* Modules nets a l'echelle 32vh (pas de lissage gris entre modules). */
#screen-activation .act-qr-img canvas { image-rendering: pixelated; }
#screen-activation .act-qr-url {
  font-size: 2.4vh; font-weight: 800; color: #0a0a12;
  letter-spacing: 0.1vh; text-align: center; margin-top: 1.6vh;
}
#screen-activation .act-qr-hint {
  font-size: 1.4vh; color: #7a7a8a; letter-spacing: 0.3vh;
  text-align: center; margin-top: 0.5vh;
}

/* ── Disclaimer légal (en flux, bas de page, une ligne aérée) ───────────────── */
#screen-activation .act-disclaimer {
  -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto;
  text-align: center; font-size: 1.7vh; line-height: 1.5;
  color: rgba(255,255,255,0.5);
  padding: 1.2vh 8% 2vh;
}
#screen-activation .act-disclaimer strong { color: rgba(255,255,255,0.7); font-weight: 700; }