/* ===================================================================
   Quiz Arena — thème « Pop clair » (choisi le 25/09/2026).
   Fond crème avec halos pêche et rose, cartes blanches à ombre douce,
   accent corail. Chargé après da.css : seules les couleurs changent.
   =================================================================== */
:root {
  --bg: #fff7ec;
  --surface: #ffffff;
  --surface2: #fbf1e6;
  --surface3: #fff1df;
  --panel2: #ffffff;
  --chip: #ffe3dc;
  --line: #f1e4d4;
  --text: #23203a;
  --on-surface: #23203a;
  --muted: #7a7390;
  --icon-soft: #b9b2c6;
  --blue: #ff6b6b;
  --blue2: #ff8a5c;
  --violet: #ff6b6b;
  --qa-bg: #fff7ec;
  --qa-surface: #ffffff;
  --qa-surface2: #fbf1e6;
  --qa-line: #f1e4d4;
  --qa-text: #23203a;
  --qa-muted: #7a7390;
  --qa-violet: #ff6b6b;
  --qa-violet2: #ff8a5c;
  --panel: #ffffff;
  --panel-soft: #ffffff;
  --rim: #f1e4d4;
  --card-shadow: 0 6px 16px rgba(80, 50, 20, 0.1);
  color-scheme: light;
}
html,
body {
  background: #fff7ec !important;
  color: var(--text);
}
/* Halos pêche et rose derrière tout le jeu */
body::before {
  display: block !important;
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none;
  background:
    radial-gradient(40% 25% at 92% 4%, #ffd9a0 0, transparent 70%),
    radial-gradient(45% 25% at 0% 58%, #ffc6d9 0, transparent 70%),
    radial-gradient(50% 22% at 100% 100%, #ffe1c2 0, transparent 70%) !important;
}
h1,
h2,
h3,
b,
strong {
  color: inherit;
}

/* Cartes : blanches, ombre douce, sans bord marqué */
.settingsCard,
.statGrid > *,
.profileHero,
.categoryHero,
.catTile,
.subcatCard,
.modeStudio,
.modeTile,
.modeGrid > button,
.duelEntryBtn,
.resumeBar,
.emptyState,
.socialHero,
.rewardStrip > div,
.reviewRow,
.questGrid .quest,
.quest,
.friendCard,
.dailyHero,
.slotGrid > *,
.jouteChoice,
.jouteCatTile,
.profilLigne,
.resultHero,
.resultProgress,
.leaderList > *,
.panel,
.seasonNode,
.passHead,
.ligPalier,
.ligHero,
.socialActions button,
.persoGrid > *,
.persoHero,
.clBtn,
.liveBoard,
.qa-card,
.qa-pass,
.qa-offer,
.qtCat,
.qtMode,
.qtRow,
.qtRes,
.answers .answer,
button.answer,
.questionVisual.daQv {
  border-color: transparent !important;
  box-shadow: var(--card-shadow) !important;
  color: var(--text) !important;
}
.modalCard,
.qa-shop-sheet,
.bigMoment .bmInner,
.qa-purchase-flash > div {
  background: #ffffff !important;
  color: var(--text) !important;
  border: 0 !important;
  box-shadow: 0 20px 50px rgba(80, 50, 20, 0.22) !important;
}
.modalBackdrop,
.qa-shop-overlay {
  background: rgba(60, 40, 30, 0.35) !important;
}
small,
.fine,
.pageIntro p {
  color: var(--muted);
}
.eyebrow {
  color: #ff6b6b !important;
}
button.secondary,
.secondary,
.qa-dark-btn,
.modalClose,
.qa-tabs button,
.qa-tabs > * {
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 3px 10px rgba(80, 50, 20, 0.08) !important;
}
.qa-tabs button.on,
.qa-tabs button[aria-selected='true'] {
  background: #ff6b6b !important;
  border-color: #ff6b6b !important;
  color: #fff !important;
}
button.back,
.back {
  color: #ff6b6b !important;
}
.chev,
.qtChev {
  color: #c4bccf !important;
}
.bar,
.tileBar,
.timerBar,
.qtBar,
.fragBarre {
  background: #f3e6d7 !important;
}
#toast {
  background: #23203a !important;
  color: #fff !important;
  border: 0 !important;
}

/* Ligne du haut */
.qtBrand b {
  color: #23203a !important;
}
.qtBrand b span {
  color: #ff6b6b !important;
}
.qtRes {
  background: #ffffff !important;
}
.qtAvImg {
  background: #fff1df !important;
}

/* Barre du bas */
nav.arenaNav,
#nav.arenaNav,
#nav {
  background: #ffffff !important;
  border-top: 0 !important;
  box-shadow: 0 -6px 20px rgba(80, 50, 20, 0.12) !important;
}
#nav.arenaNav button.qtNavB {
  color: #a39cb2 !important;
}
#nav.arenaNav button.qtNavB svg {
  fill: #c4bccf !important;
  color: #c4bccf !important;
}
#nav.arenaNav button.qtNavB.active {
  color: #ff6b6b !important;
}
#nav.arenaNav button.qtNavB.active svg {
  fill: #ff6b6b !important;
  color: #ff6b6b !important;
}

/* Accueil : une bande de couleur sous chaque catégorie */
.qtCat {
  background: #ffffff !important;
  box-shadow:
    inset 0 -5px 0 var(--cc, #ff6b6b),
    var(--card-shadow) !important;
}
.catGrid .catTile,
.catTile {
  background: #ffffff !important;
  box-shadow:
    inset 0 -5px 0 var(--tileC, #ff6b6b),
    var(--card-shadow) !important;
}
.qtHead h3,
.qtHome h3 {
  color: #23203a;
}
.qtHead button {
  color: #7a7390;
}

/* Bannière de l'accueil : dessin clair */
.qtHero {
  background: #fff3e4 !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(80, 50, 20, 0.16) !important;
}
.qtHero:after {
  background: linear-gradient(90deg, rgba(255, 247, 236, 0.97) 28%, rgba(255, 247, 236, 0.6) 55%, rgba(255, 247, 236, 0)) !important;
}
.qtSlide h2 {
  color: #23203a;
}
.qtSlide p {
  color: #6b6480 !important;
}
.qtNote {
  color: #7a4a3a;
}
.qtDots i {
  background: #e6d6c4 !important;
}
.qtDots i.on {
  background: #ff6b6b !important;
}
.qtEv b,
.qtEv small {
  color: #fff !important;
}

/* Partie */
.gameTop > button,
.reportBtn {
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 3px 10px rgba(80, 50, 20, 0.1) !important;
  color: var(--text) !important;
}
.gameTop .gameStat b,
.gameTop .gameCount,
.questionTitle {
  color: #23203a !important;
}
.answer > span {
  background: #ffe3dc !important;
  color: #e0524f !important;
}
.answer.correct,
button.answer.correct {
  background: #e3f7ea !important;
  border: 2px solid #34b36b !important;
}
.answer.wrong,
button.answer.wrong {
  background: #fde7e7 !important;
  border: 2px solid #ef4d5a !important;
}
.questionVisual.daQv {
  background: #ffffff !important;
}
.daQv b {
  color: #23203a !important;
}
.answerFeedback {
  background: #ffffff !important;
  color: var(--text) !important;
  box-shadow: 0 -10px 40px rgba(80, 50, 20, 0.18) !important;
}

/* Divers */
.saisonFin {
  background: #fff1df !important;
  border-color: #ffd29a !important;
}
.saisonFin b {
  color: #c77700 !important;
}
.seasonNode.gros {
  background: #fff6e3 !important;
  box-shadow:
    inset 0 0 0 2px #f5c451,
    var(--card-shadow) !important;
}
.seasonNode.gros b {
  color: #b77900 !important;
}
.coffreTaux span {
  background: #fbf1e6 !important;
}
.coffreTaux b {
  color: #23203a !important;
}
.coffreTaux .rareTx b {
  color: #c77700 !important;
}
.qa-av-card {
  color: var(--text) !important;
}
.qa-av-card small {
  color: var(--muted) !important;
}
.qa-money-price,
.chestLoot > span {
  background: #fbf1e6 !important;
  color: var(--text) !important;
}
input.field,
select.field,
textarea.field,
.field {
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}

/* ---------- Ajustements après captures ---------- */
/* Petits textes : gris lisible partout (plus de lilas pâle) */
.screen small,
.screen .fine,
.screen p,
.modalCard small,
.modalCard p,
.qtHome small,
.qa-shop-root p,
.qa-shop-root small {
  color: var(--muted) !important;
}
.screen h1,
.screen h2,
.screen h3,
.screen b,
.screen strong,
.qa-shop-root h1,
.qa-shop-root h2,
.qa-shop-root h3,
.qa-shop-root b,
.qa-shop-root strong,
.modalCard h2,
.modalCard b {
  color: var(--text);
  -webkit-text-fill-color: currentColor;
}
.qa-shop-title h1,
.qa-section-head h2 {
  color: #23203a !important;
  text-shadow: none !important;
}
.qa-mini,
.qa-sheet-rarity {
  color: #ff6b6b !important;
}
.qa-pass-progress {
  background: #f3e6d7 !important;
}
.qtEv b,
.qtEv small,
.qtPill,
.qa-av-rar,
.qtBadge,
.arBadge,
.bmKicker {
  color: #fff !important;
}
.qa-av-rar {
  color: #10131f !important;
}
.persoPrix,
.persoPrix b {
  color: var(--text) !important;
}
.persoGrid .on small,
.qa-av-card.ok small {
  color: #c77700 !important;
}
/* Score du résultat */
.resultHero .bigScore,
.resultHero h1 {
  color: #23203a !important;
  -webkit-text-fill-color: #23203a !important;
  background: none !important;
  text-shadow: none !important;
}
.resultActions .ghost,
button.ghost {
  color: #ff6b6b !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.reviewBtn {
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--card-shadow) !important;
}
/* Interrupteurs, lignes, barres */
.toggle {
  background: #e9dfd3 !important;
  border: 0 !important;
}
.toggle.on {
  background: #ff6b6b !important;
}
.toggle i {
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
.toggleRow,
.settingsCard > *,
.ligRegle,
.ligRegle > *,
.legalLinks > * {
  border-color: var(--line) !important;
}
.ligBar,
.ligHero .bar {
  background: #f3e6d7 !important;
}
.ligBar i,
.ligHero .bar i {
  background: #ff6b6b !important;
}
/* Pass : numéros de palier et boutons « Encore … XP » */
.seasonNode > span {
  background: #fbf1e6 !important;
  color: #7a7390 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.seasonNode.ready > span,
.seasonNode.next > span {
  background: #ffe3dc !important;
  color: #e0524f !important;
}
.seasonNode.done > span {
  background: #e3f7ea !important;
  color: #2f9e5e !important;
}
.seasonNode button:disabled {
  background: #fbf1e6 !important;
  color: #9c93ad !important;
  border: 0 !important;
  box-shadow: none !important;
}
.passAReclamer {
  color: #c77700 !important;
}
.passHead h2 small {
  color: #9c93ad !important;
}
/* Profil : roue des paramètres */
.profilIc,
.profilRoue {
  background: #fbf1e6 !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Réinitialiser le jeu */
div[style*='#ff6b6b33'] {
  background: #fff1f0 !important;
  color: var(--text) !important;
}
.dangerBtn {
  background: #ffffff !important;
  color: #e0524f !important;
  border: 1px solid #f7b7b3 !important;
}
#cloudResetBlock {
  background: #fff1f0 !important;
  background-image: none !important;
  border: 1px solid #f7c9c5 !important;
  color: var(--text) !important;
}
#cloudResetBlock::before,
#cloudResetBlock::after {
  display: none !important;
}
.softLabel {
  color: var(--muted) !important;
}
.ligBar {
  border: 0 !important;
  box-shadow: none !important;
}
/* Bulle de correction */
.answerFeedback {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.answerFeedback > div {
  background: #ffffff !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 0 !important;
  box-shadow: 0 12px 34px rgba(80, 50, 20, 0.22) !important;
}
.answerFeedback.good > div {
  box-shadow:
    inset 0 5px 0 #34b36b,
    0 12px 34px rgba(80, 50, 20, 0.22) !important;
}
.answerFeedback.bad > div {
  box-shadow:
    inset 0 5px 0 #ef4d5a,
    0 12px 34px rgba(80, 50, 20, 0.22) !important;
}
.answerFeedback b {
  color: var(--text) !important;
}
.answerFeedback.good b {
  color: #2f9e5e !important;
}
.answerFeedback.bad b {
  color: #e0524f !important;
}
.answerFeedback p,
.answerFeedback small {
  color: var(--muted) !important;
}
.answerFeedback .feedbackIcon {
  color: #fff !important;
}
/* Duel */
.liveQuitBtn,
.liveReportBtn {
  background: #ffffff !important;
  color: var(--text) !important;
  border: 0 !important;
  box-shadow: 0 3px 10px rgba(80, 50, 20, 0.1) !important;
}
.liveBoard {
  background: #ffffff !important;
}
.liveBoard * {
  color: var(--text);
}
.liveStatusDot {
  background: #e9dfd3 !important;
  box-shadow: none !important;
}
.liveStatusDot.done {
  background: #34b36b !important;
}
.tlDot.pending {
  background: #eee3d6 !important;
  box-shadow: none !important;
}
.tlDot.current {
  background: #f5c451 !important;
}
.tlDot.good {
  background: #34b36b !important;
}
.tlDot.bad {
  background: #ef4d5a !important;
}
.answerFeedback.good .feedbackIcon {
  background: #34b36b !important;
}
.answerFeedback.bad .feedbackIcon {
  background: #ef4d5a !important;
}

/* ---------- Battle d'aura (duels) au thème clair ---------- */
.liveCountdown.liveMatch {
  padding-left: 16px !important;
  padding-right: 16px !important;
  justify-content: flex-start !important;
  padding-top: calc(env(safe-area-inset-top, 0px) + 40px) !important;
}
.auraClash strong {
  color: #23203a !important;
  text-shadow: 0 2px 10px rgba(245, 196, 81, 0.55) !important;
}
.auraClash span {
  color: #9c93ad !important;
}
.auraIdentity b {
  color: #23203a !important;
}
.auraIdentity small,
.auraLoadingText {
  color: #7a7390 !important;
}
.auraBattle {
  max-width: 100% !important;
}
.liveResultScreen,
.liveCountdown,
.enLigne {
  overflow-x: hidden;
}
.auraScores .liveSeat {
  background: #ffffff !important;
  box-shadow: var(--card-shadow) !important;
}
.auraScores .liveSeat b,
.auraScores .liveSeat strong {
  color: #23203a !important;
}
.auraScores .liveVs {
  color: #ff6b6b !important;
}

/* Ligne du haut pendant les parties : visible, non cliquable */
.qtTopJeu {
  pointer-events: none;
  padding-left: 14px !important;
  padding-right: 14px !important;
  padding-bottom: 0 !important;
}
.qtTopJeu + .gameScreen {
  padding-top: 6px !important;
  min-height: auto !important;
}
.passLogo {
  display: grid;
  place-items: center;
}
.passLogo svg {
  width: 100%;
  height: 100%;
}
.qa-shop-root .qa-pass .qa-pass-bg svg.logoRing {
  width: 88px !important;
  height: 88px !important;
}
.enLigne .liveMatchCd {
  font-weight: 800;
  font-size: 16px;
  color: var(--muted);
}
.enLigne .liveMatchCd b {
  color: #f5b83d;
  font-size: 26px;
  margin-left: 6px;
}

/* ---------- Partie : cadrage propre ---------- */
/* Plus d'ombre sombre autour de l'écran de jeu (elle faisait une barre grise en haut). */
.gameScreen,
.gameScreen.themed,
.liveGameScreen {
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
}
/* Réponses à leur taille naturelle : la bulle de correction ne cache plus la réponse D. */
.gameScreen .gameBody {
  min-height: 0 !important;
  padding-bottom: 150px !important;
}
.gameScreen .gameBody .answers {
  flex: 0 0 auto !important;
  grid-auto-rows: auto !important;
  gap: 10px !important;
}
.gameScreen .gameBody .answer,
.gameScreen .answers .answer {
  min-height: 56px !important;
  height: auto !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  font-size: 16px !important;
}
.gameScreen .questionTitle {
  font-size: clamp(19px, 2.6dvh, 23px) !important;
}
/* Profil : les trois progressions */
.progBloc {
  margin: 12px 0;
}
.progBloc h3 {
  margin: 0 0 8px 2px;
  font-size: 17px;
}
.progLigne {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
  padding: 12px 14px;
  background: #fff;
  border: 0;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.progIc {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
}
.progIc svg {
  width: 100%;
  height: 100%;
  stroke: none;
}
.progTxt {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.progTxt small {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #ff6b6b !important;
}
.progTxt b {
  font-size: 16px;
}
.progTxt em {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}
.progTxt .bar {
  display: block;
  height: 6px;
  margin-top: 6px;
  border-radius: 4px;
  overflow: hidden;
}
.progTxt .bar i {
  display: block;
  height: 100%;
  background: #ff6b6b !important;
}

/* ---------- Pastilles de notification ---------- */
.aNotif {
  position: relative;
}
.notifPastille {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 3;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #ef3b4f;
  color: #fff !important;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
  line-height: 20px;
  text-align: center;
  box-shadow:
    0 0 0 2px #fff,
    0 3px 8px rgba(239, 59, 79, 0.45);
  pointer-events: none;
  animation: notifPouls 1.8s ease-in-out infinite;
}
.notifPastille:empty {
  min-width: 14px;
  width: 14px;
  height: 14px;
  padding: 0;
  top: -2px;
  right: -2px;
}
@keyframes notifPouls {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
}
body.qa-reduced-motion .notifPastille {
  animation: none;
}
/* Barre du bas : pastille sur l'icône */
#nav button.aNotif .notifPastille {
  top: 2px;
  right: calc(50% - 22px);
}
/* Accueil */
.qtRow.aNotif .notifPastille {
  top: 50%;
  right: 38px;
  transform: translateY(-50%);
  animation: none;
}
.qtTag.aNotif {
  padding-right: 26px;
}
.qtTag.aNotif .notifPastille {
  position: absolute;
  top: -2px;
  right: 0;
}
.qtDots i.notifDot {
  background: #ef3b4f !important;
}
.qtEv.aNotif .notifPastille {
  top: 6px;
  left: 6px;
  right: auto;
}
.profilIc.aNotif .notifPastille,
.progIc.aNotif .notifPastille {
  top: -8px;
  right: -8px;
}
.qtAv.aNotif .notifPastille {
  top: 0;
  right: 0;
}