/* ═══════════════════════════════════════════════════════════════════════════
   spy-visual56.css — Identité visuelle Triple Agent pour Cercle Secret et
   Identités secrètes. Édition 56.
   Inspiration : fond noir absolu, carte centrale contrastée, révélation
   dramatique une par une, typographie blanche/colorée, bouton unique imposant.
   Zero modification de logique de jeu. Charger après edition56.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   TOKENS PARTAGÉS SPY
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --spy-black:      #080c0e;
  --spy-ink:        #f2f4ef;
  --spy-muted:      rgba(242, 244, 239, .52);
  --spy-dim:        rgba(242, 244, 239, .28);
  --spy-order:      #7ec8b0;   /* teal clair — faction majoritaire */
  --spy-chaos:      #e8845c;   /* orange cuivré — faction minoritaire */
  --spy-gold:       #d4a94a;   /* accentuation opérations */
  --spy-line:       rgba(242, 244, 239, .12);
  --spy-card-bg:    #0f1a1e;
  --spy-panel-bg:   #111a1f;
  --spy-radius:     16px;
  --spy-radius-sm:  10px;
  --spy-dur-fast:   160ms;
  --spy-dur:        320ms;
  --spy-dur-slow:   520ms;
  --spy-ease:       cubic-bezier(.22, .68, 0, 1.15);
  --spy-ease-in:    cubic-bezier(.4, 0, 1, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CERCLE SECRET — REFONTE COMPLÈTE STYLE TRIPLE AGENT
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fond plein écran noir absolu */
html:root body.cercle-secret50-active {
  background: var(--spy-black) !important;
}

/* Shell principal */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-shell {
  background:
    radial-gradient(ellipse 70% 35% at 50% 0%, rgba(126, 200, 176, .07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 25% at 80% 100%, rgba(212, 169, 74, .05) 0%, transparent 55%),
    var(--spy-black) !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--spy-ink) !important;
  font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif !important;
  min-height: 100dvh;
  padding: clamp(16px, 4vw, 40px) clamp(16px, 5vw, 48px) 48px !important;
}

/* ── Topbar & navigation ── */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-topline {
  margin-bottom: clamp(20px, 5vh, 40px) !important;
  border-bottom: 1px solid var(--spy-line);
  padding-bottom: 14px;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-back {
  color: var(--spy-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  transition: color var(--spy-dur-fast) ease !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-back:hover {
  color: var(--spy-ink) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-kicker {
  color: var(--spy-dim) !important;
  font-size: 9px !important;
  letter-spacing: .22em !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-mark-small {
  border-color: rgba(126, 200, 176, .35) !important;
  color: var(--spy-order) !important;
  background: rgba(126, 200, 176, .06) !important;
}

/* ── Barre de progression d'étapes ── */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-step-track {
  gap: 4px !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-step {
  height: 3px !important;
  background: rgba(242, 244, 239, .1) !important;
  border-radius: 99px !important;
  transition: background var(--spy-dur) ease !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-step.is-active,
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-step[aria-current="step"] {
  background: var(--spy-order) !important;
  box-shadow: 0 0 8px rgba(126, 200, 176, .45) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-stage-label {
  color: var(--spy-muted) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* ── Cue narrative ── */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-story-cue {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 !important;
  padding: 12px 14px !important;
  border: 1px solid var(--spy-line) !important;
  border-left: 3px solid var(--spy-order) !important;
  border-radius: var(--spy-radius-sm) !important;
  background: rgba(126, 200, 176, .04) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-story-mark {
  color: var(--spy-order)!important;
  font-size: 14px;
  line-height: 1.6;
  flex-shrink: 0;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-story-copy b {
  display: block;
  color: var(--spy-ink)!important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-story-copy small {
  display: block;
  margin-top: 2px;
  color: var(--spy-muted)!important;
  font-size: 12px;
  line-height: 1.5;
}

/* ── Landing — écran d'accueil du mode ── */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-sigil {
  width: 120px !important;
  height: 120px !important;
  border-color: rgba(126, 200, 176, .4) !important;
  background: radial-gradient(circle, rgba(126, 200, 176, .1), rgba(126, 200, 176, .02) 55%, transparent 56%) !important;
  box-shadow: 0 0 0 14px rgba(126, 200, 176, .04),
              0 0 40px rgba(126, 200, 176, .1) !important;
  color: var(--spy-order) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-sigil span {
  font-size: 48px !important;
  text-shadow: 0 0 20px rgba(126, 200, 176, .5) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-sigil i {
  background: var(--spy-order) !important;
  box-shadow: 0 0 12px var(--spy-order) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-eyebrow {
  color: var(--spy-muted) !important;
  letter-spacing: .22em !important;
  font-size: 9px !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-shell h1 {
  color: var(--spy-ink) !important;
  font-size: clamp(36px, 9vw, 64px) !important;
  letter-spacing: -.04em !important;
  text-shadow: none !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-lead {
  color: var(--spy-muted) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-tags span {
  border-color: var(--spy-line) !important;
  color: var(--spy-dim) !important;
  background: rgba(242, 244, 239, .03) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* ── Panneaux de contenu ── */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-panel {
  background: var(--spy-panel-bg) !important;
  border: 1px solid var(--spy-line) !important;
  border-radius: var(--spy-radius) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5) !important;
  padding: clamp(20px, 5vw, 36px) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-panel h1,
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-panel h2 {
  color: var(--spy-ink) !important;
  font-weight: 800 !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-panel p {
  color: var(--spy-muted) !important;
}

/* ── CARTES PRIVÉES — cœur de l'expérience Triple Agent ──
   Révélation : fond noir, grand nom centré, faction colorée en bas.      */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-private-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: clamp(32px, 8vw, 56px) clamp(20px, 5vw, 40px) !important;
  background: var(--spy-card-bg) !important;
  border: 1px solid var(--spy-line) !important;
  border-radius: var(--spy-radius) !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .7) !important;
  min-height: 55dvh;
  justify-content: center;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-private-card .cs50-eyebrow {
  color: var(--spy-dim) !important;
  font-size: 9px !important;
  letter-spacing: .24em !important;
  margin-bottom: 24px !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-card-sigil {
  font-size: 32px !important;
  margin-bottom: 20px !important;
  color: var(--spy-order) !important;
  text-shadow: 0 0 24px rgba(126, 200, 176, .4) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-private-card h1 {
  color: #ffffff !important;
  font-size: clamp(36px, 10vw, 68px) !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
  line-height: 1 !important;
  margin: 0 0 16px !important;
  text-shadow: 0 2px 30px rgba(255, 255, 255, .08) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-role {
  color: var(--spy-muted) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 0 24px !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-faction-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 20px !important;
  border-radius: 99px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  margin-bottom: 28px !important;
}

/* Couleur de la faction : order = teal, chaos = orange */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-private-card.order .cs50-card-sigil,
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-reveal .cs50-card-sigil.order {
  color: var(--spy-order) !important;
  text-shadow: 0 0 20px rgba(126, 200, 176, .5) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-private-card.order .cs50-faction-pill {
  background: rgba(126, 200, 176, .14) !important;
  border: 1px solid rgba(126, 200, 176, .35) !important;
  color: var(--spy-order) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-private-card.chaos .cs50-card-sigil,
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-reveal .cs50-card-sigil.chaos {
  color: var(--spy-chaos) !important;
  text-shadow: 0 0 20px rgba(232, 132, 92, .5) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-private-card.chaos .cs50-faction-pill {
  background: rgba(232, 132, 92, .14) !important;
  border: 1px solid rgba(232, 132, 92, .35) !important;
  color: var(--spy-chaos) !important;
}

/* ── Écran PASS-THE-PHONE (cs50-pass) ── */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-pass {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: clamp(48px, 10vh, 80px) 24px !important;
  min-height: 60dvh;
  justify-content: center;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-phase {
  color: var(--spy-dim) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  margin-bottom: 32px !important;
  display: block !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-pass-orbit {
  font-size: 56px !important;
  color: var(--spy-order) !important;
  text-shadow: 0 0 32px rgba(126, 200, 176, .35) !important;
  margin-bottom: 24px !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-pass > p:not(.cs50-help) {
  color: var(--spy-muted) !important;
  font-size: 13px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-pass h1 {
  color: #ffffff !important;
  font-size: clamp(40px, 11vw, 72px) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  margin: 0 0 12px !important;
  line-height: 1 !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-help {
  color: var(--spy-dim) !important;
  font-size: 13px !important;
  margin-bottom: 32px !important;
}

/* ── Opérations ── */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-operation-card .cs50-operation-emblem {
  font-size: 36px !important;
  color: var(--spy-gold) !important;
  text-shadow: 0 0 20px rgba(212, 169, 74, .4) !important;
  display: block !important;
  margin-bottom: 16px !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-operation-card .cs50-phase {
  color: var(--spy-gold) !important;
  margin-bottom: 8px !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-operation-card h1 {
  color: #ffffff !important;
  font-size: clamp(28px, 7vw, 48px) !important;
  font-weight: 900 !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-operation-public {
  margin-top: 16px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(212, 169, 74, .2) !important;
  border-left: 3px solid var(--spy-gold) !important;
  border-radius: var(--spy-radius-sm) !important;
  background: rgba(212, 169, 74, .05) !important;
  color: var(--spy-muted) !important;
  font-size: 13px !important;
  font-style: italic !important;
  line-height: 1.6 !important;
}

/* Indice privé (operation-card) */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-secret-text {
  color: var(--spy-ink) !important;
  font-size: clamp(16px, 4vw, 22px) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin: 12px 0 24px !important;
  padding: 18px !important;
  border: 1px solid var(--spy-line) !important;
  border-radius: var(--spy-radius-sm) !important;
  background: rgba(242, 244, 239, .04) !important;
  text-align: center !important;
}

/* ── Révélation finale ── */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-reveal {
  text-align: center !important;
  padding: clamp(28px, 6vw, 48px) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-result-sigil.order {
  color: var(--spy-order) !important;
  text-shadow: 0 0 28px rgba(126, 200, 176, .5) !important;
  font-size: 48px !important;
  display: block !important;
  margin-bottom: 16px !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-result-sigil.chaos {
  color: var(--spy-chaos) !important;
  text-shadow: 0 0 28px rgba(232, 132, 92, .5) !important;
  font-size: 48px !important;
  display: block !important;
  margin-bottom: 16px !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-result h1 {
  color: #ffffff !important;
  font-size: clamp(32px, 8vw, 56px) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-designated {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 16px 0 !important;
  padding: 14px 24px !important;
  border: 1px solid var(--spy-line) !important;
  border-radius: var(--spy-radius-sm) !important;
  background: rgba(242, 244, 239, .04) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-designated span {
  color: var(--spy-dim) !important;
  font-size: 9px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-designated b {
  color: var(--spy-ink) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-final-player.order {
  border-left: 3px solid var(--spy-order) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-final-player.chaos {
  border-left: 3px solid var(--spy-chaos) !important;
}

/* ── Boutons ── */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-button {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  border-radius: var(--spy-radius-sm) !important;
  min-height: 54px !important;
  transition: transform var(--spy-dur-fast) var(--spy-ease),
              box-shadow var(--spy-dur-fast) ease,
              background-color var(--spy-dur-fast) ease !important;
}
/* Bouton primaire : blanc sur noir — très visible */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-button:not(.secondary):not(.quiet):not(.danger) {
  background: var(--spy-ink) !important;
  color: var(--spy-black) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-button:not(.secondary):not(.quiet):not(.danger):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .55) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-button:not(.secondary):not(.quiet):not(.danger):active {
  transform: translateY(1px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-button.secondary {
  background: rgba(242, 244, 239, .07) !important;
  color: var(--spy-muted) !important;
  border-color: var(--spy-line) !important;
  box-shadow: none !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-button.secondary:hover {
  background: rgba(242, 244, 239, .12) !important;
  color: var(--spy-ink) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-button.quiet {
  color: var(--spy-dim) !important;
  border-color: transparent !important;
  background: transparent !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-button.danger {
  background: #7c2f2a !important;
  border-color: rgba(200, 80, 70, .35) !important;
  color: #fde0dd !important;
  box-shadow: 0 8px 24px rgba(124, 47, 42, .4) !important;
}

/* ── Chronomètre de discussion ── */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-timer-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 24px 0 !important;
  padding: 20px !important;
  border: 1px solid var(--spy-line) !important;
  border-radius: var(--spy-radius) !important;
  background: rgba(242, 244, 239, .03) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-timer-wrap > span {
  color: var(--spy-dim) !important;
  font-size: 9px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root #cs50-clock {
  font-size: clamp(44px, 12vw, 72px) !important;
  font-weight: 900 !important;
  color: var(--spy-ink) !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-timer-wrap small {
  color: var(--spy-dim) !important;
  font-size: 11px !important;
}

/* ── Joueurs ── */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-player-row {
  background: rgba(242, 244, 239, .04) !important;
  border-color: var(--spy-line) !important;
  border-radius: var(--spy-radius-sm) !important;
  transition: background var(--spy-dur-fast) ease !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-player-row:focus-within {
  background: rgba(242, 244, 239, .08) !important;
  border-color: rgba(126, 200, 176, .3) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-player-row input {
  color: var(--spy-ink) !important;
  background: transparent !important;
  border: none !important;
  font-weight: 700 !important;
}

/* ── Réseau et grilles ── */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-rule-grid article {
  background: rgba(242, 244, 239, .03) !important;
  border-color: var(--spy-line) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-rule-number {
  color: var(--spy-order) !important;
  border-color: rgba(126, 200, 176, .35) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-rule-note {
  border-left-color: var(--spy-gold) !important;
  background: rgba(212, 169, 74, .06) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-rule-note b {
  color: #e8c874 !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-ratio-grid > div,
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-ratio-grid > label {
  background: rgba(242, 244, 239, .04) !important;
  border-color: var(--spy-line) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-ratio-grid b {
  color: var(--spy-ink) !important;
}

/* ── Note privée ── */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-private-note {
  background: rgba(126, 200, 176, .05) !important;
  border-left-color: var(--spy-order) !important;
}

/* ── Allies ── */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-allies li {
  color: var(--spy-order) !important;
  font-weight: 700 !important;
}

/* ── Error ── */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-error {
  color: #f28b82 !important;
  background: rgba(242, 139, 130, .08) !important;
  border: 1px solid rgba(242, 139, 130, .2) !important;
  border-radius: var(--spy-radius-sm) !important;
  padding: 12px 14px !important;
}

/* ── Footnote ── */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-footnote {
  color: var(--spy-dim) !important;
  font-size: 11px !important;
}

/* ── Décompte verbal ── */
html:root body.cercle-secret50-active #cercle-secret50-screen .mode-countdown-overlay52[data-circle-countdown] {
  background: rgba(8, 12, 14, .96) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--spy-line) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen .mode-countdown-name52 {
  color: var(--spy-muted) !important;
}
html:root body.cercle-secret50-active #cercle-secret50-screen .mode-countdown-number52 {
  color: var(--spy-order) !important;
  text-shadow: 0 0 24px rgba(126, 200, 176, .4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS CERCLE SECRET — STYLE TRIPLE AGENT
   ═══════════════════════════════════════════════════════════════════════════ */

/* Entrée du shell */
@keyframes cs50-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-shell {
  animation: cs50-enter 360ms var(--spy-ease) both !important;
}

/* Révélation de carte privée : glissement depuis le bas + légère échelle */
@media (prefers-reduced-motion: no-preference) {
  html:root:not([data-motion="reduce"])
  body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-private-card {
    animation: spy56-card-reveal var(--spy-dur-slow) var(--spy-ease) both !important;
  }
  html:root:not([data-motion="reduce"])
  body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-private-card h1 {
    animation: spy56-name-appear 480ms var(--spy-ease) 120ms both !important;
  }
  html:root:not([data-motion="reduce"])
  body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-faction-pill {
    animation: spy56-pill-in 360ms var(--spy-ease) 200ms both !important;
  }
  html:root:not([data-motion="reduce"])
  body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-pass h1 {
    animation: spy56-name-appear 460ms var(--spy-ease) 80ms both !important;
  }
  html:root:not([data-motion="reduce"])
  body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-pass-orbit {
    animation: spy56-orbit-pulse 3.2s ease-in-out infinite !important;
  }
  html:root:not([data-motion="reduce"])
  body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-sigil {
    animation: spy56-sigil-breathe 5s ease-in-out infinite !important;
  }
  html:root:not([data-motion="reduce"])
  body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-result-sigil {
    animation: spy56-result-in 560ms var(--spy-ease) both !important;
  }
  html:root:not([data-motion="reduce"])
  body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-result h1 {
    animation: spy56-name-appear 480ms var(--spy-ease) 160ms both !important;
  }
}

@keyframes spy56-card-reveal {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes spy56-name-appear {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spy56-pill-in {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes spy56-orbit-pulse {
  0%, 100% { opacity: .7; transform: scale(.94); }
  50%       { opacity: 1;  transform: scale(1.06); }
}
@keyframes spy56-sigil-breathe {
  0%, 100% { opacity: .8; transform: scale(.97); }
  50%       { opacity: 1;  transform: scale(1.03); }
}
@keyframes spy56-result-in {
  0%   { opacity: 0; transform: scale(.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IDENTITÉS SECRÈTES — REFONTE STYLE TRIPLE AGENT
   ═══════════════════════════════════════════════════════════════════════════ */

html:root #identities48-screen {
  background: var(--spy-black) !important;
  color: var(--spy-ink) !important;
  min-height: 100dvh !important;
  padding: 0 !important;
}
html:root #identities48-screen #identities48-root * { box-sizing: border-box; }

/* Panel principal */
html:root #identities48-screen #identities48-root .identities48-panel {
  background: var(--spy-panel-bg) !important;
  border: 1px solid var(--spy-line) !important;
  border-radius: var(--spy-radius) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5) !important;
  color: var(--spy-ink) !important;
  margin: 0 !important;
  padding: clamp(20px, 5vw, 36px) !important;
  min-height: 100dvh;
}

/* Eyebrow */
html:root #identities48-screen #identities48-root .identities48-eyebrow {
  color: var(--spy-dim) !important;
  font-size: 9px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

/* Titres */
html:root #identities48-screen #identities48-root .identities48-panel h1 {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: clamp(30px, 8vw, 50px) !important;
  letter-spacing: -.04em !important;
  margin: 0 0 14px !important;
}
html:root #identities48-screen #identities48-root .identities48-panel h2 {
  color: var(--spy-ink) !important;
  font-weight: 800 !important;
  font-size: clamp(18px, 5vw, 26px) !important;
  margin: 0 0 12px !important;
}

/* Textes d'aide */
html:root #identities48-screen #identities48-root .identities48-lead,
html:root #identities48-screen #identities48-root .identities48-help,
html:root #identities48-screen #identities48-root .identities48-note {
  color: var(--spy-muted) !important;
  line-height: 1.6 !important;
}

/* ── Couverture de sécurité (masque la carte) ── */
html:root #identities48-screen #identities48-root .identities48-safe-cover {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: clamp(48px, 10vh, 80px) 0 !important;
  min-height: 45dvh;
}
html:root #identities48-screen #identities48-root .identities48-safe-cover h2 {
  color: #ffffff !important;
  font-size: clamp(36px, 10vw, 64px) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
  margin: 12px 0 28px !important;
}
html:root #identities48-screen #identities48-root .safe-mark {
  font-size: 40px !important;
  color: var(--spy-muted) !important;
  margin-bottom: 8px !important;
}

/* ── Carte privée (rôle individuel) ── */
html:root #identities48-screen #identities48-root .identities48-private-card {
  background: var(--spy-card-bg) !important;
  border: 1px solid var(--spy-line) !important;
  border-radius: var(--spy-radius) !important;
  padding: clamp(24px, 6vw, 40px) clamp(20px, 5vw, 36px) !important;
  text-align: center !important;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .6) !important;
}
html:root #identities48-screen #identities48-root .identity48-name {
  color: #ffffff !important;
  font-size: clamp(28px, 8vw, 52px) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  line-height: 1.05 !important;
  margin: 0 0 14px !important;
}
html:root #identities48-screen #identities48-root .identities48-private-card p {
  color: var(--spy-muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 0 8px !important;
}
html:root #identities48-screen #identities48-root .identities48-known-information {
  margin-top: 16px !important;
  padding: 14px !important;
  border: 1px solid var(--spy-line) !important;
  border-left: 3px solid var(--spy-order) !important;
  border-radius: var(--spy-radius-sm) !important;
  background: rgba(126, 200, 176, .04) !important;
  text-align: left !important;
}
html:root #identities48-screen #identities48-root .identities48-known-information p {
  color: var(--spy-dim) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
}
html:root #identities48-screen #identities48-root .identities48-known-information li {
  color: var(--spy-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* ── Boutons Identités ── */
html:root #identities48-screen #identities48-root .identities48-actions > button,
html:root #identities48-screen #identities48-root .identities48-button {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  border-radius: var(--spy-radius-sm) !important;
  min-height: 54px !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition: transform var(--spy-dur-fast) var(--spy-ease),
              background-color var(--spy-dur-fast) ease,
              box-shadow var(--spy-dur-fast) ease !important;
  /* Supprimer le style neo-brutal */
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
  background: var(--spy-ink) !important;
  color: var(--spy-black) !important;
}
html:root #identities48-screen #identities48-root .identities48-actions > button:not(:disabled):hover,
html:root #identities48-screen #identities48-root .identities48-button:not(:disabled):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .5) !important;
}
html:root #identities48-screen #identities48-root .identities48-actions > button:not(:disabled):active,
html:root #identities48-screen #identities48-root .identities48-button:not(:disabled):active {
  transform: translateY(1px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35) !important;
  transition-duration: 60ms !important;
}
html:root #identities48-screen #identities48-root .identities48-actions > button.secondary,
html:root #identities48-screen #identities48-root .identities48-button.secondary {
  background: rgba(242, 244, 239, .07) !important;
  color: var(--spy-muted) !important;
  border-color: var(--spy-line) !important;
  box-shadow: none !important;
}
html:root #identities48-screen #identities48-root .identities48-actions > button.secondary:not(:disabled):hover,
html:root #identities48-screen #identities48-root .identities48-button.secondary:not(:disabled):hover {
  background: rgba(242, 244, 239, .12) !important;
  color: var(--spy-ink) !important;
}
html:root #identities48-screen #identities48-root .identities48-actions > button:disabled,
html:root #identities48-screen #identities48-root .identities48-button:disabled {
  opacity: .35 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Chronomètre Identités ── */
html:root #identities48-screen #identities48-root .identities48-clock {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: var(--spy-muted) !important;
  font-size: 13px !important;
  margin: 16px 0 !important;
}
html:root #identities48-screen #identities48-root .identities48-clock-value {
  color: var(--spy-ink) !important;
  font-size: clamp(32px, 9vw, 56px) !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  display: block !important;
  text-align: center !important;
}
html:root #identities48-screen #identities48-root .identities48-clock-value.urgent {
  color: #f28b82 !important;
}

/* ── Scores & groupes ── */
html:root #identities48-screen #identities48-root .identities48-groups {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 16px 0 !important;
}
html:root #identities48-screen #identities48-root .identities48-group-score {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 1 !important;
  min-width: 80px !important;
  padding: 14px 12px !important;
  border: 1px solid var(--spy-line) !important;
  border-radius: var(--spy-radius-sm) !important;
  background: rgba(242, 244, 239, .04) !important;
}
html:root #identities48-screen #identities48-root .identities48-group-score strong {
  color: var(--spy-muted) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
html:root #identities48-screen #identities48-root .identities48-group-score b {
  color: #ffffff !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* ── Status messages ── */
html:root #identities48-screen #identities48-root .identities48-status {
  padding: 12px 14px !important;
  border-radius: var(--spy-radius-sm) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin: 12px 0 !important;
  text-align: center !important;
}
html:root #identities48-screen #identities48-root .identities48-status:not(.warn) {
  background: rgba(126, 200, 176, .1) !important;
  border: 1px solid rgba(126, 200, 176, .25) !important;
  color: var(--spy-order) !important;
}
html:root #identities48-screen #identities48-root .identities48-status.warn {
  background: rgba(232, 132, 92, .1) !important;
  border: 1px solid rgba(232, 132, 92, .25) !important;
  color: var(--spy-chaos) !important;
}
html:root #identities48-screen #identities48-root [role="alert"] {
  background: rgba(242, 139, 130, .08) !important;
  border: 1px solid rgba(242, 139, 130, .2) !important;
  border-radius: var(--spy-radius-sm) !important;
  color: #f28b82 !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  margin-bottom: 12px !important;
}

/* ── Liste de joueurs finaux ── */
html:root #identities48-screen #identities48-root .identities48-player-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 8px !important;
}
html:root #identities48-screen #identities48-root .identities48-player-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--spy-line) !important;
  border-radius: var(--spy-radius-sm) !important;
  background: rgba(242, 244, 239, .04) !important;
}
html:root #identities48-screen #identities48-root .identities48-player-row strong {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 15px !important;
}
html:root #identities48-screen #identities48-root .identities48-player-row span {
  color: var(--spy-muted) !important;
  font-size: 12px !important;
}

/* ── Team select ── */
html:root #identities48-screen #identities48-root .identities48-team-select {
  display: grid !important;
  gap: 8px !important;
  margin: 14px 0 !important;
}
html:root #identities48-screen #identities48-root .identities48-team-select label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--spy-line) !important;
  border-radius: var(--spy-radius-sm) !important;
  background: rgba(242, 244, 239, .04) !important;
  color: var(--spy-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background var(--spy-dur-fast) ease, border-color var(--spy-dur-fast) ease !important;
}
html:root #identities48-screen #identities48-root .identities48-team-select label:has(input:checked) {
  background: rgba(126, 200, 176, .1) !important;
  border-color: rgba(126, 200, 176, .3) !important;
}

/* ── Progression setup ── */
html:root #identities48-screen #identities48-root .mode-step-progress52 {
  color: var(--spy-dim) !important;
  font-size: 9px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}

/* ── Sélects et inputs ── */
html:root #identities48-screen #identities48-root select,
html:root #identities48-screen #identities48-root input[type="text"],
html:root #identities48-screen #identities48-root textarea {
  background: rgba(242, 244, 239, .06) !important;
  border: 1px solid var(--spy-line) !important;
  border-radius: var(--spy-radius-sm) !important;
  color: var(--spy-ink) !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
}
html:root #identities48-screen #identities48-root select:focus,
html:root #identities48-screen #identities48-root input:focus,
html:root #identities48-screen #identities48-root textarea:focus {
  outline: 2px solid rgba(126, 200, 176, .4) !important;
  outline-offset: 2px !important;
  border-color: rgba(126, 200, 176, .3) !important;
}

/* ── Inbox messages ── */
html:root #identities48-screen #identities48-root .identities48-inbox {
  background: rgba(242, 244, 239, .04) !important;
  border: 1px solid var(--spy-line) !important;
  border-radius: var(--spy-radius-sm) !important;
  padding: 14px !important;
  margin: 14px 0 !important;
}
html:root #identities48-screen #identities48-root .identities48-message {
  padding: 10px 12px !important;
  border-radius: 8px !important;
  background: rgba(242, 244, 239, .06) !important;
  color: var(--spy-muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 6px 0 !important;
}
html:root #identities48-screen #identities48-root .identities48-message strong {
  color: var(--spy-order) !important;
  display: block !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  margin-bottom: 4px !important;
}

/* ── Décompte Identités ── */
html:root #identities48-screen #identities48-root .mode-countdown-overlay52 {
  background: rgba(8, 12, 14, .96) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--spy-line) !important;
  border-radius: var(--spy-radius) !important;
}
html:root #identities48-screen #identities48-root .mode-countdown-name52 {
  color: var(--spy-muted) !important;
  font-size: 13px !important;
}
html:root #identities48-screen #identities48-root .mode-countdown-number52 {
  color: var(--spy-order) !important;
  font-size: clamp(56px, 16vw, 96px) !important;
  text-shadow: 0 0 30px rgba(126, 200, 176, .4) !important;
}
html:root #identities48-screen #identities48-root .mode-countdown-caption52 {
  color: var(--spy-dim) !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS IDENTITÉS — STYLE TRIPLE AGENT
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  /* Entrée de chaque panel */
  html:root:not([data-motion="reduce"])
  #identities48-screen #identities48-root .identities48-panel {
    animation: spy56-card-reveal var(--spy-dur-slow) var(--spy-ease) both !important;
  }
  /* Nom du joueur : apparition différée dramatique */
  html:root:not([data-motion="reduce"])
  #identities48-screen #identities48-root .identities48-safe-cover h2 {
    animation: spy56-name-appear 460ms var(--spy-ease) 100ms both !important;
  }
  /* Carte privée */
  html:root:not([data-motion="reduce"])
  #identities48-screen #identities48-root .identities48-private-card {
    animation: spy56-card-reveal var(--spy-dur-slow) var(--spy-ease) both !important;
  }
  /* Nom d'identité */
  html:root:not([data-motion="reduce"])
  #identities48-screen #identities48-root .identity48-name {
    animation: spy56-name-appear 480ms var(--spy-ease) 120ms both !important;
  }
  /* Score au résultat */
  html:root:not([data-motion="reduce"])
  #identities48-screen #identities48-root .identities48-group-score {
    animation: spy56-pill-in 360ms var(--spy-ease) both !important;
  }
  html:root:not([data-motion="reduce"])
  #identities48-screen #identities48-root .identities48-group-score:nth-child(1) { animation-delay: 100ms !important; }
  html:root:not([data-motion="reduce"])
  #identities48-screen #identities48-root .identities48-group-score:nth-child(2) { animation-delay: 160ms !important; }
  html:root:not([data-motion="reduce"])
  #identities48-screen #identities48-root .identities48-group-score:nth-child(3) { animation-delay: 220ms !important; }
  html:root:not([data-motion="reduce"])
  #identities48-screen #identities48-root .identities48-group-score:nth-child(4) { animation-delay: 280ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — désactiver toutes les nouvelles animations
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-shell,
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-private-card,
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-private-card h1,
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-faction-pill,
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-pass h1,
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-pass-orbit,
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-sigil,
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-result-sigil,
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-result h1,
html:root #identities48-screen #identities48-root .identities48-panel,
html:root #identities48-screen #identities48-root .identities48-safe-cover h2,
html:root #identities48-screen #identities48-root .identities48-private-card,
html:root #identities48-screen #identities48-root .identity48-name,
html:root #identities48-screen #identities48-root .identities48-group-score {
    animation: none !important;
  }
}
html:root[data-motion="reduce"]
body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-shell,
html:root[data-motion="reduce"]
body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-private-card,
html:root[data-motion="reduce"]
body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-private-card h1,
html:root[data-motion="reduce"]
body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-faction-pill,
html:root[data-motion="reduce"]
body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-pass h1,
html:root[data-motion="reduce"]
body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-pass-orbit,
html:root[data-motion="reduce"]
body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-sigil,
html:root[data-motion="reduce"]
body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-result-sigil,
html:root[data-motion="reduce"]
body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-result h1,
html:root[data-motion="reduce"]
#identities48-screen #identities48-root .identities48-panel,
html:root[data-motion="reduce"]
#identities48-screen #identities48-root .identities48-safe-cover h2,
html:root[data-motion="reduce"]
#identities48-screen #identities48-root .identities48-private-card,
html:root[data-motion="reduce"]
#identities48-screen #identities48-root .identity48-name,
html:root[data-motion="reduce"]
#identities48-screen #identities48-root .identities48-group-score {
  animation: none !important;
}

/* Compatibilité v56 : les transitions ajoutées restent désactivables dans les deux modes. */
@media (prefers-reduced-motion: reduce) {
  html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root *,
html:root #identities48-screen #identities48-root * { animation: none !important; transition: none !important; }
}
html:root[data-motion="reduce"] body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root *,
html:root[data-motion="reduce"] #identities48-screen #identities48-root * { animation: none !important; transition: none !important; }

/* Lisibilité v56 : hiérarchie secondaire conservée, sans le texte à ~2,3:1. */
html:root body.cercle-secret50-active #cercle-secret50-screen,
html:root #identities48-screen {
  --spy-muted: rgba(242, 244, 239, .62);
  --spy-dim: rgba(242, 244, 239, .52);
}

/* Spécificité volontaire : ces protections dominent aussi les sélecteurs historiques renforcés. */
@media (prefers-reduced-motion: reduce) {
  html:root:root:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root *,
html:root:root:root #identities48-screen #identities48-root * { animation: none !important; transition: none !important; }
}
html:root:root:root[data-motion="reduce"] body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root *,
html:root:root:root[data-motion="reduce"] #identities48-screen #identities48-root * { animation: none !important; transition: none !important; }

/* Compatibilité v56 : conserver le conteneur intégré, mais sans cadre clair derrière le shell noir. */
html:root body.cercle-secret50-active #cercle-secret50-screen { background: var(--spy-black) !important; color: var(--spy-ink) !important; }

/* Le token spy est porté par le root enfant : couleur littérale nécessaire sur son conteneur parent. */
html:root body.cercle-secret50-active #cercle-secret50-screen { background: #080c0e !important; color: #f2f4ef !important; }
/* Les informations privées restent plus prioritaires que la couleur secondaire des paragraphes de carte. */
html:root body.cercle-secret50-active #cercle-secret50-screen #cercle-secret50-root .cs50-private-card :is(.cs50-secret-text,.cs50-role) { color: var(--spy-ink) !important; }

/* mode-ui52 cumule trois identifiants via :not(#timesup):not(#home) ; même cible, priorité locale v56 supérieure. */
html:root body.cercle-secret50-active main > section#cercle-secret50-screen.panel:not(#timesup):not(#home) { background: #080c0e !important; color: #f2f4ef !important; }