/* =========================================================================
 * Compte RSKTV — calque #cpt-ov (js/ui/compte.js), 09/10/2026
 * Chromium M56 : pas de gap ni de calc(), flexbox préfixée. Jetons de thème
 * uniquement (7 thèmes, clair compris). Un seul aplat rouge : le curseur.
 * Marges de sécurité TV (overscan) sur les quatre bords.
 * ========================================================================= */
#cpt-ov {
  display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  z-index: 99990; background: var(--rsk-bg); color: var(--rsk-text);
  outline: none;
}
#cpt-ov .cpt-box {
  position: absolute; left: 120px; right: 120px; top: 84px; bottom: 72px;
  overflow: hidden;
}
#cpt-ov .cpt-entete { margin-bottom: 44px; }
#cpt-ov .cpt-titre { font-size: 56px; font-weight: 800; letter-spacing: -0.02em; color: var(--rsk-text); }
#cpt-ov .cpt-sous  { font-size: 26px; color: var(--rsk-text-dim); margin-top: 8px; }
#cpt-ov .cpt-h2    { font-size: 40px; font-weight: 700; color: var(--rsk-text); margin-bottom: 12px; }
#cpt-ov .cpt-aide  { font-size: 26px; color: var(--rsk-text-dim); margin-bottom: 18px; line-height: 1.35; }
#cpt-ov .cpt-grand { font-size: 30px; max-width: 1200px; }
#cpt-ov .cpt-note  { font-size: 24px; color: var(--rsk-text-mute); margin: 6px 0 16px; }
#cpt-ov .cpt-err   { font-size: 26px; color: var(--rsk-accent); margin: 4px 0 16px; }

/* QR et code */
#cpt-ov .cpt-qr-corps { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
#cpt-ov .cpt-qr { -webkit-flex: none; flex: none; width: 480px; height: 480px; margin-right: 80px;
  background: #fff; border-radius: 24px; padding: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; }
#cpt-ov .cpt-qr canvas { width: 440px; height: 440px; display: block; }
#cpt-ov .cpt-qr-col { -webkit-flex: 1; flex: 1; min-width: 0; }
#cpt-ov .cpt-code { font-family: monospace; font-size: 110px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--rsk-text); margin: 10px 0 14px; white-space: nowrap; }
#cpt-ov .cpt-attente { font-size: 24px; color: var(--rsk-text-mute); margin-bottom: 40px; }

/* Rangées de boutons : passent à la ligne plutôt que de couper un libellé */
#cpt-ov .cpt-rang { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 4px; }
#cpt-ov .cpt-btn {
  min-height: 76px; padding: 0 36px; margin: 0 18px 14px 0; border-radius: 14px;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  font-size: 28px; font-weight: 700; white-space: nowrap;
  background: var(--rsk-surface); color: var(--rsk-text); border: 2px solid var(--rsk-border);
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
#cpt-ov .cpt-btn.cpt-large { min-width: 900px; white-space: normal; padding-top: 14px; padding-bottom: 14px; }
#cpt-ov .cpt-btn.est-curseur { background: var(--rsk-accent); color: #fff; border-color: var(--rsk-accent); }
#cpt-ov .cpt-btn.est-inactif { opacity: 0.45; }

/* Champs de saisie */
#cpt-ov .cpt-champ {
  width: 900px; height: 84px; margin: 0 0 14px; padding: 0 24px; border-radius: 14px;
  font-size: 34px; color: var(--rsk-text); background: var(--rsk-surface);
  border: 2px solid var(--rsk-border); outline: none;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
#cpt-ov .cpt-champ.est-curseur { border-color: var(--rsk-accent); }
#cpt-ov .cpt-champ-code { width: 420px; font-family: monospace; font-size: 52px; letter-spacing: 0.4em; text-align: center; }

/* Fin */
#cpt-ov .cpt-v-fin { text-align: center; padding-top: 220px; }
#cpt-ov .cpt-coche { font-size: 120px; color: var(--rsk-green); font-weight: 800; line-height: 1; margin-bottom: 20px; }

/* Compte connecté */
#cpt-ov .cpt-colonnes { display: -webkit-flex; display: flex; }
#cpt-ov .cpt-col { -webkit-flex: 1; flex: 1; min-width: 0; margin-right: 60px; }
#cpt-ov .cpt-ok    { font-size: 26px; font-weight: 700; color: var(--rsk-green); }
#cpt-ov .cpt-email { font-size: 44px; font-weight: 700; color: var(--rsk-text); margin: 6px 0 34px; word-break: break-all; }
#cpt-ov .cpt-lib   { font-size: 24px; color: var(--rsk-text-mute); margin-top: 6px; }
#cpt-ov .cpt-val   { font-size: 30px; color: var(--rsk-text); margin-bottom: 18px; }
#cpt-ov .cpt-appareil { font-size: 28px; color: var(--rsk-text); padding: 18px 24px; margin-top: 12px;
  background: var(--rsk-surface); border: 1px solid var(--rsk-border); border-radius: 14px; }
#cpt-ov .cpt-v-compte .cpt-rang { margin-top: 20px; }

/* Écran d'activation : « J'ai un compte », bouton secondaire (le rouge = focus) */
#screen-activation #btn-act-compte {
  display: -webkit-inline-flex; display: inline-flex; margin-top: 16px;
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.35);
  font-size: 24px; font-weight: 800; padding: 22px 44px; letter-spacing: 1px;
}
#screen-activation #btn-act-compte:focus,
#screen-activation #btn-act-compte.focused,
#screen-activation #btn-act-compte.is-focused { background: var(--rsk-accent); border-color: var(--rsk-accent); }

/* Réglages › Mon abonnement : entrée « Associer mon compte » en tête (argument de vente).
   Carte large, alignée à gauche ; le rouge reste réservé au focus. */
#section-settings .cpt-entree-wrap { margin: 8px 0 34px !important; }
#section-settings #ac-btn-compte.cpt-entree {
  display: -webkit-flex !important; display: flex !important;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: flex-start !important; align-items: flex-start !important;
  -webkit-justify-content: center !important; justify-content: center !important;
  min-height: 118px !important; padding: 18px 34px !important; text-align: left !important;
  border: 2px solid var(--rsk-border-brand, var(--rsk-border)) !important;
}
#section-settings #ac-btn-compte .cpt-entree-titre { font-size: 32px; font-weight: 800; color: var(--rsk-text); }
#section-settings #ac-btn-compte .cpt-entree-sous  { font-size: 24px; color: var(--rsk-text-dim); margin-top: 6px; }
#section-settings #ac-btn-compte:focus .cpt-entree-titre, #section-settings #ac-btn-compte.is-focused .cpt-entree-titre,
#section-settings #ac-btn-compte.focused .cpt-entree-titre,
#section-settings #ac-btn-compte:focus .cpt-entree-sous, #section-settings #ac-btn-compte.is-focused .cpt-entree-sous,
#section-settings #ac-btn-compte.focused .cpt-entree-sous { color: #fff !important; }
#section-settings #ac-btn-compte.cpt-entree-on { border-color: var(--rsk-green) !important; }

/* Dialogues sur le lecteur : fond assombri, la vidéo reste devinée derrière */
#cpt-ov .cpt-v-dialogue { left: 0; right: 0; top: 0; bottom: 0; }
#cpt-ov.cpt-sur-video { background: rgba(0,0,0,0.62); }
#cpt-ov.cpt-sur-video .cpt-box { background: transparent; }
#cpt-ov .cpt-dlg {
  position: absolute; left: 50%; top: 50%; width: 1000px;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  padding: 48px 56px 34px; border-radius: 24px;
  background: var(--rsk-bg-2, var(--rsk-bg)); border: 1px solid var(--rsk-border);
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
#cpt-ov .cpt-dlg .cpt-rang { margin-top: 18px; }

/* v571 : déconnexion armée (2e OK pour confirmer) — signalée par le trait, l'aplat reste au focus */
#cpt-ov .cpt-btn.cpt-btn-danger { border-color: var(--rsk-accent); color: var(--rsk-accent); }
#cpt-ov .cpt-btn.cpt-btn-danger.est-curseur { color: #fff; }

/* ── v573 : carte de session premium (avatar façon Netflix / Apple TV) ───── */
#section-settings #ac-btn-compte.cpt-entree {
  -webkit-flex-direction: row !important; flex-direction: row !important;
  -webkit-align-items: center !important; align-items: center !important;
  -webkit-justify-content: flex-start !important; justify-content: flex-start !important;
  min-height: 132px !important; padding: 22px 34px 22px 26px !important;
}
#section-settings #ac-btn-compte .cpt-entree-textes {
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;
  -webkit-flex: 1; flex: 1; min-width: 0;
}
#section-settings #ac-btn-compte .cpt-avatar { margin-right: 30px; }
#section-settings #ac-btn-compte .cpt-chevron {
  font-size: 54px; line-height: 1; color: var(--rsk-text-dim); margin-left: 24px; font-weight: 300;
}
#section-settings #ac-btn-compte:focus .cpt-chevron, #section-settings #ac-btn-compte.is-focused .cpt-chevron,
#section-settings #ac-btn-compte.focused .cpt-chevron { color: #fff; }

/* Avatar commun (carte des Réglages + en-tête des écrans du compte) */
.cpt-avatar {
  position: relative; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  -webkit-flex: 0 0 92px; flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%;
  background: var(--rsk-accent-soft); border: 2px solid var(--rsk-border-brand); color: var(--rsk-text);
  box-sizing: border-box;
}
.cpt-avatar .cpt-silhouette { width: 54px; height: 54px; display: block; opacity: 0.92; }
.cpt-avatar-on {
  background: -webkit-linear-gradient(135deg, var(--rsk-accent-warm), var(--rsk-accent-deep));
  background: linear-gradient(135deg, var(--rsk-accent-warm), var(--rsk-accent-deep));
  border-color: transparent; color: #fff;
}
.cpt-avatar .cpt-initiale { font-size: 46px; font-weight: 800; line-height: 1; color: #fff; }
.cpt-avatar .cpt-badge {
  position: absolute; right: -4px; bottom: -4px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--rsk-green); color: #08130c; font-size: 22px; font-weight: 900; line-height: 34px;
  text-align: center; border: 3px solid var(--rsk-bg, #000);
}
/* Au focus, la carte est l'aplat accent : l'avatar s'éclaircit pour rester lisible. */
#section-settings #ac-btn-compte:focus .cpt-avatar, #section-settings #ac-btn-compte.is-focused .cpt-avatar,
#section-settings #ac-btn-compte.focused .cpt-avatar { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.55); color: #fff; }

/* En-tête des écrans du compte */
#cpt-ov .cpt-entete { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
#cpt-ov .cpt-entete .cpt-avatar { margin-right: 32px; -webkit-flex-basis: 104px; flex-basis: 104px; width: 104px; height: 104px; }
#cpt-ov .cpt-entete .cpt-avatar .cpt-silhouette { width: 62px; height: 62px; }

/* Compte à rebours du QR */
#cpt-ov .cpt-decompte { font-variant-numeric: tabular-nums; }
#cpt-ov .cpt-decompte-fin { color: var(--rsk-accent-warm); }

/* ── v574 : profil en bas de la barre latérale ──────────────────────────── */
html.ui-v2 .sb-item.sb-compte {
  margin-top: auto; height: 64px; position: relative; -webkit-flex-shrink: 0; flex-shrink: 0;
}
/* Place pour le profil : rubriques un peu plus compactes, et la barre s'arrête
   au-dessus du bandeau légal du bas de l'écran (qui la recouvrait). */
html.ui-v2 .sb-item { height: 58px; margin-bottom: 4px; }
html.ui-v2.v2-hub #sidebar-v2 { padding-bottom: 62px; }
html.ui-v2 .sb-compte .sb-ico.sb-ico-avatar { width: 46px; height: 46px; }
html.ui-v2 .sb-compte .cpt-avatar {
  -webkit-flex: 0 0 46px; flex: 0 0 46px; width: 46px; height: 46px; border-width: 2px;
}
html.ui-v2 .sb-compte .cpt-avatar .cpt-silhouette { width: 28px; height: 28px; }
html.ui-v2 .sb-compte .cpt-avatar .cpt-initiale { font-size: 24px; }
html.ui-v2 .sb-compte .cpt-avatar .cpt-badge {
  width: 18px; height: 18px; line-height: 18px; font-size: 12px; right: -3px; bottom: -3px; border-width: 2px;
}
html.ui-v2 .sb-compte .sb-txt { text-transform: none; font-size: 22px; }
html.ui-v2 .sb-compte .sb-ico.sb-ico-avatar { margin-right: 12px; }
/* Au focus (aplat accent), l'avatar s'éclaircit comme sur la carte des Réglages */
html.ui-v2 .sb-compte.is-focused .cpt-avatar, html.ui-v2 .sb-compte:focus .cpt-avatar,
html.ui-v2 .sb-compte.sb-focused .cpt-avatar { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.55); color: #fff; }