/* Section 7 — démo interactive des tips + motion éditorial */
.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 10000;
  background: rgba(15, 8, 32, 0.4);
  pointer-events: none;
}
.reading-progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--hot-pink), var(--orange-gold), var(--cyan-war));
  box-shadow: 0 0 16px rgba(0, 206, 209, 0.8);
  transform-origin: left center;
}

.doc-section {
  position: relative;
}
.doc-section::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 3rem;
  width: 2px;
  height: 0;
  border-radius: 999px;
  background: linear-gradient(var(--hot-pink), var(--cyan-war));
  box-shadow: 0 0 18px rgba(255, 20, 147, 0.45);
  transition: height 0.7s cubic-bezier(.2,.8,.2,1);
}
.doc-section.is-visible::before { height: min(68%, 360px); }
.section-head h2 { text-wrap: balance; }
.subsection, .table-wrap, .ancien-figure { will-change: transform, opacity; }

.tip-intro-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 1rem;
  margin-bottom: 1.35rem;
}
.tip-intro-card {
  position: relative;
  overflow: hidden;
  min-height: 142px;
  padding: 1.35rem 1.4rem;
  border: 1px solid rgba(0, 206, 209, .32);
  background: linear-gradient(145deg, rgba(45,27,71,.92), rgba(12,8,27,.92));
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(4, 2, 12, .28);
}
.tip-intro-card::after {
  content: '';
  position: absolute;
  width: 190px;
  height: 190px;
  right: -95px;
  top: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--card-glow, rgba(0,206,209,.28)), transparent 68%);
  pointer-events: none;
}
.tip-intro-card .eyebrow {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .7rem;
  color: var(--cyan-light);
  font: 700 .74rem/1 'Inter', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tip-intro-card h3 {
  margin: 0 0 .45rem;
  color: var(--white-pure);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.65rem;
  letter-spacing: .035em;
}
.tip-intro-card p { margin: 0; color: var(--pink-soft); font-size: .94rem; }
.tip-intro-card strong { color: var(--gold); }

.tip-simulator {
  position: relative;
  margin: 1.5rem 0;
  overflow: hidden;
  border: 1px solid rgba(0, 206, 209, .48);
  border-radius: 16px;
  background: #080414;
  box-shadow: 0 24px 70px rgba(0,0,0,.42), 0 0 50px rgba(0,206,209,.08);
  isolation: isolate;
}
.tip-simulator::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .11;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.sim-topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid rgba(0,206,209,.22);
  background: rgba(10,6,23,.92);
}
.sim-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}
.sim-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hot-pink);
  box-shadow: 0 0 0 5px rgba(255,20,147,.12), 0 0 16px var(--hot-pink);
}
.sim-brand strong {
  color: var(--white-pure);
  font-size: .8rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.sim-brand span { color: var(--purple-light); font-size: .76rem; }
.sim-status {
  padding: .42rem .75rem;
  border: 1px solid rgba(255,201,60,.35);
  border-radius: 999px;
  background: rgba(255,201,60,.08);
  color: var(--gold);
  font: 800 .68rem/1 'Inter', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sim-stage {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 28%, rgba(255,107,53,.3), transparent 24%),
    linear-gradient(180deg, #33124c 0%, #70275c 36%, #ff6b35 37%, #ff9a55 53%, #17112e 54%, #090617 100%);
}
.sim-stage::after {
  content: '';
  position: absolute;
  inset: 54% 0 0;
  z-index: 0;
  background:
    linear-gradient(100deg, transparent 0 43%, rgba(255,255,255,.14) 43% 45%, transparent 45% 100%),
    repeating-linear-gradient(90deg, rgba(0,206,209,.1) 0 2px, transparent 2px 70px),
    #0d0920;
  transform: perspective(360px) rotateX(58deg) scale(1.8);
  transform-origin: center top;
}
.sim-sun {
  position: absolute;
  z-index: 0;
  width: 112px;
  height: 112px;
  top: 58px;
  right: 17%;
  border-radius: 50%;
  background: linear-gradient(#ffd65a, #ff4f7b);
  box-shadow: 0 0 60px rgba(255,107,53,.52);
  opacity: .9;
}
.sim-skyline {
  position: absolute;
  inset: auto 0 46% 0;
  z-index: 1;
  height: 46%;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 0 4%;
}
.sim-building {
  position: relative;
  flex: 1;
  min-width: 34px;
  height: var(--h);
  border: 1px solid rgba(0,206,209,.2);
  background: linear-gradient(180deg, rgba(35,19,61,.96), rgba(12,7,29,.98));
  box-shadow: 0 0 25px rgba(0,0,0,.4);
}
.sim-building::after {
  content: '';
  position: absolute;
  inset: 12px 7px;
  background: repeating-linear-gradient(180deg, rgba(0,206,209,.7) 0 4px, transparent 4px 15px);
  opacity: .28;
}

.sim-hud {
  position: absolute;
  inset: 1rem 1rem auto;
  z-index: 7;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.sim-hud-box {
  padding: .55rem .7rem;
  border-left: 3px solid var(--cyan-war);
  background: rgba(6,4,16,.68);
  color: var(--white-pure);
  font: 700 .72rem/1.25 'Inter', sans-serif;
  backdrop-filter: blur(6px);
}
.sim-hud-box b { color: var(--gold); }

.sim-player, .sim-dealer {
  position: absolute;
  z-index: 4;
  bottom: 84px;
  width: 82px;
  height: 150px;
  transform-origin: 50% 100%;
}
.sim-player { left: 12%; }
.sim-dealer { right: 12%; filter: saturate(.72); }
.block-head {
  position: absolute;
  left: 19px;
  top: 0;
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255,255,255,.16);
  background: #d49b77;
  box-shadow: inset 0 -12px rgba(78,41,48,.24), 0 8px 0 rgba(0,0,0,.2);
}
.block-head::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 18px;
  width: 7px;
  height: 5px;
  background: #101020;
  box-shadow: 23px 0 #101020;
}
.block-body {
  position: absolute;
  left: 13px;
  top: 52px;
  width: 60px;
  height: 62px;
  background: linear-gradient(135deg, #12a8b5, #07526d);
  border: 3px solid rgba(255,255,255,.13);
}
.sim-dealer .block-body { background: linear-gradient(135deg, #772a87, #29113e); }
.block-leg {
  position: absolute;
  bottom: 0;
  width: 24px;
  height: 38px;
  background: #19172c;
  border: 2px solid rgba(255,255,255,.1);
}
.block-leg.left { left: 14px; }
.block-leg.right { right: 9px; }
.npc-label {
  position: absolute;
  left: 50%;
  top: -31px;
  transform: translateX(-50%);
  padding: .28rem .5rem;
  border: 1px solid rgba(255,201,60,.5);
  border-radius: 4px;
  background: rgba(10,6,23,.86);
  color: var(--gold);
  font: 800 .65rem/1 'Inter', sans-serif;
  letter-spacing: .08em;
  white-space: nowrap;
}

.sim-weapon {
  position: absolute;
  z-index: 6;
  left: 33%;
  bottom: 92px;
  width: 92px;
  height: 42px;
  cursor: pointer;
  filter: drop-shadow(0 0 14px rgba(255,201,60,.85));
  transform-origin: center;
}
.sim-weapon::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  width: 70px;
  height: 14px;
  border: 3px solid #ffc93c;
  background: linear-gradient(90deg, #ff3d8b, #6c2ea3 62%, #00ced1);
  box-shadow: inset 0 0 0 3px rgba(8,4,20,.38);
}
.sim-weapon::after {
  content: '';
  position: absolute;
  left: 52px;
  top: 20px;
  width: 18px;
  height: 22px;
  background: #2a173b;
  border: 3px solid #ffc93c;
  transform: skew(-15deg);
}
.loot-beacon {
  position: absolute;
  z-index: 2;
  left: calc(33% + 38px);
  bottom: 75px;
  width: 18px;
  height: 210px;
  transform: translateX(-50%);
  background: linear-gradient(transparent, rgba(255,201,60,.58), transparent);
  filter: blur(4px);
  opacity: .7;
  pointer-events: none;
}

.sim-chat {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 18px;
  width: min(92%, 700px);
  transform: translateX(-50%);
  padding: 1rem 1rem .9rem;
  border: 1px solid rgba(0,206,209,.7);
  border-left: 4px solid var(--cyan-war);
  border-radius: 10px;
  background: rgba(7,5,18,.94);
  box-shadow: 0 20px 55px rgba(0,0,0,.55), 0 0 35px rgba(0,206,209,.14);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
}
.sim-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .55rem;
}
.sim-chat-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--cyan-light);
  font: 800 .72rem/1 'Inter', sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.sim-chat-index { color: var(--purple-light); font: 700 .68rem/1 'Inter', sans-serif; }
.sim-chat-message {
  margin: 0 0 .8rem !important;
  color: var(--white-pure) !important;
  font-size: .92rem !important;
  line-height: 1.5;
}
.sim-chat-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.sim-action {
  min-height: 44px;
  padding: .65rem .85rem;
  border-radius: 6px;
  border: 1px solid rgba(0,206,209,.55);
  background: rgba(0,206,209,.11);
  color: var(--cyan-light);
  font: 800 .72rem/1 'Inter', sans-serif;
  letter-spacing: .045em;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.sim-action:hover, .sim-action:focus-visible {
  background: rgba(0,206,209,.23);
  border-color: var(--cyan-light);
  transform: translateY(-2px);
  outline: none;
}
.sim-action.secondary {
  border-color: rgba(255,61,139,.48);
  background: rgba(255,20,147,.1);
  color: var(--pink-soft);
}

.sim-control-panel {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-top: 1px solid rgba(255,20,147,.18);
  background: rgba(15,8,32,.96);
}
.scenario-buttons { display: flex; flex-wrap: wrap; gap: .55rem; }
.scenario-trigger, .sim-reset {
  min-height: 44px;
  padding: .7rem .9rem;
  border: 1px solid rgba(157,78,221,.5);
  border-radius: 7px;
  background: rgba(157,78,221,.1);
  color: var(--pink-pale);
  font: 700 .76rem/1 'Inter', sans-serif;
  cursor: pointer;
  transition: transform .2s, border-color .2s, background .2s, opacity .2s;
}
.scenario-trigger:hover:not(:disabled), .scenario-trigger:focus-visible,
.sim-reset:hover, .sim-reset:focus-visible {
  transform: translateY(-2px);
  border-color: var(--hot-pink);
  background: rgba(255,20,147,.15);
  outline: none;
}
.scenario-trigger.is-active { border-color: var(--cyan-war); color: var(--cyan-light); }
.scenario-trigger:disabled { cursor: not-allowed; opacity: .5; }
.sim-reset { color: var(--gold); border-color: rgba(255,201,60,.45); }
.cooldown-wrap {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .7rem;
  align-items: center;
  color: var(--purple-light);
  font: 700 .68rem/1 'Inter', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cooldown-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.cooldown-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--hot-pink), var(--orange-gold));
  box-shadow: 0 0 12px rgba(255,20,147,.5);
}

.coin-particle {
  position: absolute;
  z-index: 20;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff1a8;
  background: #ffc93c;
  box-shadow: 0 0 14px rgba(255,201,60,.8);
  pointer-events: none;
}
.sim-toast {
  position: absolute;
  z-index: 21;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  padding: .9rem 1.15rem;
  border: 1px solid rgba(255,201,60,.72);
  border-radius: 8px;
  background: rgba(10,6,23,.93);
  color: var(--gold);
  font: 800 .78rem/1.3 'Inter', sans-serif;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 35px rgba(255,201,60,.18);
  opacity: 0;
  visibility: hidden;
}

.tip-details {
  margin-top: 1rem;
  border: 1px solid rgba(157,78,221,.28);
  border-radius: 10px;
  background: rgba(45,27,71,.38);
  overflow: hidden;
}
.tip-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: .9rem 1rem;
  color: var(--cyan-light);
  font: 800 .78rem/1 'Inter', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.tip-details summary::-webkit-details-marker { display: none; }
.tip-details summary::after { content: '+'; color: var(--hot-pink); font-size: 1.25rem; }
.tip-details[open] summary::after { content: '−'; }
.tip-details-body { padding: 0 1rem 1rem; }
.tip-concept-art {
  margin-top: 1rem;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255,201,60,.35);
}
.tip-concept-art img { display: block; width: 100%; height: auto; }
.tip-concept-art figcaption {
  padding: .6rem .8rem;
  background: rgba(10,6,23,.92);
  color: var(--gold);
  font-size: .78rem;
  text-align: center;
}

@media (max-width: 900px) {
  .tip-intro-grid { grid-template-columns: 1fr; }
  .sim-stage { min-height: 500px; }
  .sim-control-panel { grid-template-columns: 1fr; }
  .sim-reset { justify-self: start; }
}

@media (max-width: 640px) {
  .doc-section::before { display: none; }
  .tip-intro-card { min-height: 0; padding: 1.05rem; }
  .tip-intro-card h3 { font-size: 1.35rem; }
  .sim-topbar { align-items: flex-start; }
  .sim-brand span { display: none; }
  .sim-status { max-width: 48%; white-space: normal; text-align: right; line-height: 1.25; }
  .sim-stage { min-height: 530px; }
  .sim-sun { width: 82px; height: 82px; right: 8%; }
  .sim-player { left: 7%; transform: scale(.84); }
  .sim-dealer { right: 5%; transform: scale(.84); }
  .sim-weapon { left: 34%; transform: scale(.85); }
  .loot-beacon { left: calc(34% + 38px); }
  .sim-chat { bottom: 12px; padding: .85rem; }
  .sim-chat-actions { display: grid; grid-template-columns: 1fr; }
  .sim-action { width: 100%; }
  .scenario-buttons { display: grid; grid-template-columns: 1fr; }
  .scenario-trigger, .sim-reset { width: 100%; }
  .cooldown-wrap { grid-template-columns: 1fr auto; }
  .cooldown-track { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .doc-section::before { transition: none; }
  .subsection, .table-wrap, .ancien-figure { will-change: auto; }
  .sim-weapon, .sim-live-dot, .loot-beacon { animation: none !important; }
  .scenario-trigger, .sim-reset, .sim-action { transition: none; }
}