/* =====================================================================
   APPLI MOBILE (v2.40) — sur téléphone, le site se comporte comme une appli :
   pas de surlignage au toucher, retour en haut à gauche, rangées qui défilent
   de côté, page Capturer compacte. Le PC ne change pas.
   ===================================================================== */
a.stat { text-decoration: none; color: inherit; }
.nav-back { display: none; }
@media (min-width: 761px) { .d-hide { display: none !important; } }
@media (max-width: 760px) {
  html { -webkit-tap-highlight-color: transparent; }
  a, button, label, select, input, summary { touch-action: manipulation; }
  .btn, .chip, .mainnav, .topbar, .ctile, .set-card, .game-tile, .mode-card, .stat, .cap-home, .home-goal { -webkit-user-select: none; user-select: none; }
  .btn:active, .ctile:active .cimg, .set-card:active, .game-tile:active, .mode-card:active, .cap-home:active, .home-goal:active, a.stat:active { transform: scale(.97); transition: transform .08s; }
  /* en-tête : encoche du téléphone, flèche retour à la place du nom sur les pages « internes » */
  .topbar { padding-top: calc(8px + env(safe-area-inset-top)); min-height: 52px; gap: 8px; }
  .nav-back:not([hidden]) { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: -4px 0 -4px -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; }
  .nav-back:active { background: rgba(255,255,255,.08); }
  .nav-back svg { width: 24px; height: 24px; stroke-width: 2.4; }
  .nav-back:not([hidden]) ~ .brand .brand-name { display: none; }
  .breadcrumb { display: none; }
  /* barre du bas : pastille derrière l'onglet actif */
  .mainnav a:not(.nav-scan) .ico { width: 52px; height: 28px; align-items: center; justify-content: center; border-radius: 999px; transition: background .15s; }
  .mainnav a.active:not(.nav-scan) .ico { background: rgba(124,92,255,.24); }
  .mainnav a { padding-top: 4px; }
  /* v4.15 : petits téléphones (360 px, Android courant) — les 5 onglets se partagent la largeur au lieu de déborder (« Combat » coupé) */
  .mainnav a { min-width: 0; }
  .mainnav a:not(.nav-scan) .ico { width: min(52px, 100%); }

  /* rangées qui défilent de côté (accueil) : elles vont jusqu'au bord de l'écran */
  .hscroll { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 12px; margin-inline: -12px; padding: 2px 12px 8px; scrollbar-width: none; }
  .hscroll::-webkit-scrollbar { display: none; }
  .hscroll > * { scroll-snap-align: start; }
  .cards.hscroll { grid-auto-columns: 108px; gap: 10px; }
  .grid-auto.hscroll { grid-auto-columns: 158px; gap: 10px; }
  .licences.hscroll { grid-auto-columns: min(250px, 72%); }
  .licences .game-tile.soon { padding: 10px 12px; }

  /* Accueil */
  .hero { padding: 14px 14px 12px; margin-bottom: 4px; }
  .hero h1 { font-size: 1.25rem; }
  .hero .stats { margin-top: 10px; }
  .hero-cta { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px !important; }
  .hero-cta .btn { justify-content: center; }
  .hero-cta .btn.primary { grid-column: 1 / -1; padding: 13px 14px; font-size: 1rem; }
  .home-flow { display: flex; flex-direction: column; }
  .home-flow > #h-friends, .home-flow > #h-caps, .home-flow > #h-install { order: 0; }
  .home-flow > #h-inprogress { order: 1; }
  .home-flow > .h-recent { order: 2; }
  .home-flow > #h-goals { order: 3; }
  .home-flow > .h-lic { order: 4; }
  .home-flow > div:empty { display: none; }
  .home-flow .section-title { margin: 20px 0 10px; }
  .home-flow .cap-home { margin-top: 12px; }
  .install-banner { margin: 12px 0 0; }

  /* Capturer : mode en onglets compacts, série sur une ligne, place à la photo */
  body[data-view="scan"] .app { padding-top: 12px; }
  .mode-pick { display: flex; gap: 4px; padding: 4px; margin-bottom: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
  .mode-card { flex: 1 1 0; flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; border: 0; border-radius: 10px; background: none; box-shadow: none; }
  .mode-card .mc-ico { width: auto; height: auto; background: none !important; color: inherit; }
  .mode-card .mc-ico svg { width: 18px; height: 18px; }
  .mode-card .mc-txt > span { display: none; }
  .mode-card .mc-txt b { font-size: .86rem; white-space: nowrap; }
  .mode-card:not(.on) { color: #aab0d3; }
  .mode-card.on { background: var(--holo) !important; color: #16172a; box-shadow: 0 4px 14px rgba(124,92,255,.35); }
  .mode-card.on .mc-ico { color: #16172a; }
  .set-first, .set-first.chosen { padding: 0; margin-bottom: 10px; border: 0; background: none; }
  .set-first .sf-head { display: none; }
  .set-first select { padding: 10px 12px; border: 1.5px dashed rgba(255,210,63,.55); }
  .set-first.chosen select { border: 1.5px solid rgba(61,220,151,.6); }
  .sc-opts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; margin-bottom: 10px; }
  .sc-opts > * { margin: 0 !important; }
  .sc-opts label.small { display: block; }
  .sc-opts select { width: 100%; max-width: 140px; padding: 10px 8px; }
  .sc-opts .set-first select { max-width: none; padding: 10px 12px; } /* même départ du texte que « Une carte » et « Rafale » */
  /* avant la photo : le cadre prend la place disponible, les boutons restent juste en dessous */
  /* (v2.83) les boutons arrivent juste au-dessus de la barre du bas, sans vide en dessous */
  .scan-view:not(:has(video)):not(:has(img)):not(:has(canvas)) { aspect-ratio: auto; height: clamp(230px, calc(100svh - 300px), 760px); }
  /* (v3.37) hauteur fixée par fitScreen : toute la largeur, sinon la proportion du cadre (3/4, 4/3 avec le canevas de la photo)
     changeait sa largeur à chaque étape → la carte en recherche « se balançait » de gauche à droite */
  .scan-view[data-fit] { aspect-ratio: auto; width: 100%; }
  .batch-view:not(:has(video)):not(:has(img)):not(:has(canvas)) { height: clamp(230px, calc(100svh - 300px), 760px); }
  .scan-dock { margin-top: 10px !important; }
}
/* appli installée : pas d'effet « élastique » en haut de page */
@media (display-mode: standalone) { html, body { overscroll-behavior-y: none; } }

/* Toucher sans « carré » (v2.41) : pas de surlignage du navigateur ni de sélection de l'image
   quand on touche la capsule, un Pokémon ou une case du Pokédex (quelle que soit la largeur d'écran). */
html { -webkit-tap-highlight-color: transparent; }
.cap-ov, .cap-ov *, .cap-stage, .dex-cell, .dex-cell *, .evo-cell, .sp-art, .sp-art * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cap-ov img, .dex-cell img, .evo-cell img { -webkit-user-drag: none; pointer-events: none; }
.cap-ov :focus:not(:focus-visible), .dex-cell:focus:not(:focus-visible), .evo-cell:focus:not(:focus-visible) { outline: none; }
.dex-cell.got:active { transform: scale(.96); transition: transform .08s; }

/* Filtres sans bandeau sombre derrière (v2.42) : sur téléphone la barre de filtres n'est pas collante,
   le fond (re-posé plus haut par « .toolbar { background: rgba(12,14,25,.9) } ») ne servait à rien. */
@media (max-width: 760px) {
  .toolbar { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Question « Tu es sûr ? » (v2.42, App.util.ask) : remplace les fenêtres du navigateur.
   PC : petite carte au centre ; téléphone : panneau qui monte du bas, gros boutons. */
.ask { position: fixed; inset: 0; z-index: 6000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ask-bg { position: absolute; inset: 0; background: rgba(4,6,14,.72); animation: askFade .18s ease-out; }
.ask-box { position: relative; width: min(400px, 100%); background: var(--bg2, #131629); border: 1px solid var(--line); border-radius: 20px; padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(0,0,0,.55); text-align: center; animation: askIn .22s cubic-bezier(.2,.9,.3,1.15); }
.ask-ico { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #7c5cff, #ff4fa3); }
.ask-danger .ask-ico { background: linear-gradient(135deg, #ff5a6e, #c4304a); }
.ask-title { margin: 0 0 6px; font-size: 1.12rem; }
.ask-text { margin: 0 0 16px; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.ask-btns { display: flex; flex-direction: row-reverse; gap: 10px; }
.ask-btns .btn { flex: 1; justify-content: center; padding: 11px 14px; font-weight: 700; }
.ask-btns .btn.ask-red { background: linear-gradient(120deg, #ff5a6e, #d6334f); border: 0; color: #fff; box-shadow: 0 6px 18px rgba(255,90,110,.3); }
.ask.ask-out .ask-bg { opacity: 0; transition: opacity .18s; }
.ask.ask-out .ask-box { opacity: 0; transform: scale(.96); transition: opacity .18s, transform .18s; }
@keyframes askFade { from { opacity: 0; } }
@keyframes askIn { from { transform: scale(.94); } }
@media (max-width: 760px) {
  .ask { align-items: flex-end; padding: 0; }
  .ask-box { width: 100%; border-radius: 22px 22px 0 0; border-bottom: 0; padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); animation: askUp .26s cubic-bezier(.2,.9,.3,1); }
  .ask-box::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); margin: 0 auto 14px; }
  .ask-btns { flex-direction: column; gap: 8px; }
  .ask-btns .btn { width: 100%; padding: 14px; font-size: 1rem; }
  .ask.ask-out .ask-box { transform: translateY(40px); }
  @keyframes askUp { from { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) { .ask-bg, .ask-box { animation: none; } }
/* le petit message du bas reste visible par-dessus l'ouverture des capsules et le combat */
.toast { z-index: 6500; }

/* =====================================================================
   PRÉSENTATION DE L'APPLI (v2.44) — première ouverture sur téléphone, 5 écrans à faire glisser.
   Illustrations en CSS seul ; animations en déplacement/taille (l'aperçu intégré gèle les animations
   à leur 1re image : rien d'important ne doit y être invisible).
   ===================================================================== */
html.ob-lock, html.ob-lock body { overflow: hidden; }
.ob { position: fixed; inset: 0; z-index: 7000; color: var(--text); transition: opacity .25s;
  background: radial-gradient(520px 360px at 85% 0%, rgba(255,79,163,.20), transparent 70%), radial-gradient(520px 380px at 0% 30%, rgba(52,213,255,.14), transparent 70%), #0a0c16; }
.ob.out { opacity: 0; pointer-events: none; }
.ob-skip { position: absolute; z-index: 2; top: calc(10px + env(safe-area-inset-top)); right: 12px; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.07); color: #c8ccea; font-weight: 600; cursor: pointer; }
.ob-track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.ob-track::-webkit-scrollbar { display: none; }
.ob-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; display: flex; flex-direction: column; align-items: center;
  padding: calc(52px + env(safe-area-inset-top)) 0 calc(96px + env(safe-area-inset-bottom)); }
.ob-slide > .ob-art { position: relative; flex: none; width: 100%; max-width: 460px; height: clamp(210px, 34vh, 320px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.ob-txt { width: 100%; max-width: 460px; padding: 6px 24px 0; }
.ob-txt h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 6px; }
.ob-txt > p { margin: 0 0 10px; color: #c8ccea; font-size: .98rem; }
.ob-holo { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ob-small { font-size: .85rem !important; color: var(--muted) !important; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0 !important; }
.ob-tab { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: rgba(124,92,255,.2); border: 1px solid rgba(124,92,255,.45); color: #fff; font-weight: 700; font-size: .78rem; }
.ob-steps { list-style: none; counter-reset: ob; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ob-steps li { counter-increment: ob; display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.35; }
.ob-steps li::before { content: counter(ob); flex: none; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; background: var(--holo); color: #16172a; font-weight: 800; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.ob-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ob-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.35; }
.ob-list li > svg { flex: none; margin-top: 2px; color: var(--accent-cyan); }
.ob-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 460px; margin: 0 auto;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); }
.ob-dots { display: flex; gap: 7px; }
.ob-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.22); cursor: pointer; transition: width .2s, background .2s; }
.ob-dots button.on { width: 24px; background: var(--holo); }
.ob-next { min-width: 130px; padding: 13px 22px !important; font-size: 1rem !important; border-radius: 14px !important; }
.ob-next.go { background: var(--holo) !important; color: #16172a !important; }

/* petite carte dessinée */
.ob-card { --w: 64px; position: relative; display: flex; flex-direction: column; gap: calc(var(--w) * .05); width: var(--w); aspect-ratio: 63 / 88; padding: calc(var(--w) * .07); border-radius: calc(var(--w) * .07);
  background: hsl(var(--h) 45% 84%); border: calc(var(--w) * .045) solid #ffd23f; box-shadow: 0 8px 18px rgba(0,0,0,.45); flex: none; }
.ob-pic { flex: 0 0 46%; border-radius: 3px; background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.55) 0 18%, transparent 19%), linear-gradient(135deg, hsl(var(--h) 80% 60%), hsl(calc(var(--h) + 50) 70% 42%)); }
.ob-l { height: calc(var(--w) * .06); border-radius: 9px; background: rgba(0,0,0,.22); }
.ob-l.s { width: 60%; }
.ob-card em { font-style: normal; }

/* 0 — bienvenue */
.ob-fan { position: relative; width: 240px; height: 170px; }
.ob-fan .ob-card { --w: 100px; position: absolute; left: 70px; top: 10px; transform: translateX(var(--x)) rotate(var(--r)); animation: obFloat 3.2s ease-in-out infinite; }
.ob-fan .f1 { --r: -14deg; --x: -62px; }
.ob-fan .f2 { --r: 0deg; --x: 0px; z-index: 1; animation-delay: -1s; }
.ob-fan .f3 { --r: 14deg; --x: 62px; animation-delay: -2s; }
@keyframes obFloat { 0%, 100% { transform: translateX(var(--x)) rotate(var(--r)) translateY(0); } 50% { transform: translateX(var(--x)) rotate(var(--r)) translateY(-8px); } }
.ob-logo { display: flex; padding: 12px; border-radius: 22px; background: #151936; border: 1px solid var(--line); box-shadow: 0 0 30px rgba(124,92,255,.45); }

/* 1 — capture : téléphone avec une carte, puis une page de classeur */
.ob-phone { position: relative; width: 158px; height: 220px; border-radius: 26px; border: 4px solid #3a4068; background: #05060c; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05); }
.ob-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ob-scene.a { animation: obSceneA 9s infinite; }
.ob-scene.b { visibility: hidden; animation: obSceneB 9s infinite; }
@keyframes obSceneA { 0%, 49.9% { visibility: visible; } 50%, 100% { visibility: hidden; } }
@keyframes obSceneB { 0%, 49.9% { visibility: hidden; } 50%, 100% { visibility: visible; } }
.ob-scene .ob-card.big { --w: 96px; }
.ob-ray { position: absolute; left: 10%; right: 10%; top: 12%; height: 3px; border-radius: 3px; background: #34d5ff; box-shadow: 0 0 14px 4px rgba(52,213,255,.6); animation: obRay 1.5s ease-in-out infinite alternate; }
@keyframes obRay { to { top: 86%; } }
.ob-found { position: absolute; bottom: 10px; left: 50%; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #3ddc97; color: #062; font-weight: 800; font-size: .72rem; white-space: nowrap; transform: translateX(-50%) scale(0); }
.ob-scene.a .ob-found { animation: obFoundA 9s infinite; }
.ob-scene.b .ob-found { animation: obFoundB 9s infinite; }
@keyframes obFoundA { 0%, 30% { transform: translateX(-50%) scale(0); } 34%, 100% { transform: translateX(-50%) scale(1); } }
@keyframes obFoundB { 0%, 88% { transform: translateX(-50%) scale(0); } 92%, 100% { transform: translateX(-50%) scale(1); } }
.ob-page { display: grid; grid-template-columns: repeat(3, auto); gap: 5px; padding: 6px; border-radius: 8px; background: #1b1f3b; }
.ob-page .ob-card { --w: 36px; box-shadow: none; filter: brightness(.55) saturate(.4); animation: obCell 9s infinite; }
@keyframes obCell { 0%, 55% { filter: brightness(.55) saturate(.4); outline: 0 solid transparent; } 58%, 100% { filter: none; outline: 2px solid #3ddc97; } }
.ob-page .c1 { animation-delay: .3s; } .ob-page .c2 { animation-delay: .6s; } .ob-page .c3 { animation-delay: .9s; } .ob-page .c4 { animation-delay: 1.2s; }
.ob-page .c5 { animation-delay: 1.5s; } .ob-page .c6 { animation-delay: 1.8s; } .ob-page .c7 { animation-delay: 2.1s; } .ob-page .c8 { animation-delay: 2.4s; }
.ob-modes { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.ob-modes .m { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 9px; font-weight: 700; font-size: .78rem; color: #aab0d3; }
.ob-modes .m.a { animation: obModeA 9s infinite; }
.ob-modes .m.b { animation: obModeB 9s infinite; }
@keyframes obModeA { 0%, 49.9% { background: #7c5cff; color: #fff; } 50%, 100% { background: transparent; color: #aab0d3; } }
@keyframes obModeB { 0%, 49.9% { background: transparent; color: #aab0d3; } 50%, 100% { background: #7c5cff; color: #fff; } }

/* 2 — collection : cartes avec prix et rareté, valeur totale */
.ob-total { padding: 7px 14px; border-radius: 999px; background: rgba(255,210,63,.12); border: 1px solid rgba(255,210,63,.4); font-size: .82rem; color: #c8ccea; }
.ob-total b { color: #ffd23f; font-family: var(--display); font-size: 1rem; margin-left: 4px; }
.ob-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 14px 14px; }
.ob-grid .ob-card { --w: 66px; }
.ob-slide.on .ob-grid .ob-card { animation: obDeal .45s cubic-bezier(.2,1.4,.5,1) both; }
.ob-slide.on .ob-grid .g1 { animation-delay: .08s; } .ob-slide.on .ob-grid .g2 { animation-delay: .16s; } .ob-slide.on .ob-grid .g3 { animation-delay: .24s; }
.ob-slide.on .ob-grid .g4 { animation-delay: .32s; } .ob-slide.on .ob-grid .g5 { animation-delay: .4s; }
@keyframes obDeal { from { transform: translateY(18px) scale(.85); } to { transform: none; } }
.ob-price { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 2px 6px; border-radius: 999px; background: #151936; border: 1px solid rgba(255,210,63,.6); color: #ffd23f; font-size: .62rem; font-weight: 800; white-space: nowrap; }
.ob-rar { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #151936; border: 1px solid var(--line); color: #34d5ff; font-size: .55rem; display: flex; align-items: center; justify-content: center; }

/* 3 — séries : barre de progression, cartes possédées / manquantes, objectif */
.ob-set { width: min(300px, 86vw); padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ob-set-h { width: 100%; display: flex; justify-content: space-between; align-items: baseline; }
.ob-set-h b { font-family: var(--display); font-size: 1.1rem; }
.ob-set-h span { font-size: .8rem; color: var(--muted); }
.ob-bar { width: 100%; height: 8px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; }
.ob-bar i { display: block; width: 67%; height: 100%; background: var(--holo); border-radius: 9px; transform-origin: left; }
.ob-slide.on .ob-bar i { animation: obFill 1.6s ease-out both; }
@keyframes obFill { from { transform: scaleX(.1); } to { transform: none; } }
.ob-sgrid { display: grid; grid-template-columns: repeat(5, auto); gap: 6px; }
.ob-sgrid .ob-card { --w: 46px; box-shadow: none; }
.ob-sgrid .ob-card.miss { background: rgba(255,255,255,.04); border: 1.5px dashed rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; }
.ob-sgrid .miss em { color: var(--muted); font-size: .62rem; font-weight: 700; }
.ob-goal { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgba(61,220,151,.12); border: 1px solid rgba(61,220,151,.4); color: #3ddc97; font-size: .76rem; font-weight: 700; }

/* 4 — combat : attaque, dégâts, barre de PV */
.ob-arena { position: relative; width: 280px; height: 210px; }
.ob-fighter { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ob-fighter.me { left: 18px; bottom: 0; }
.ob-fighter.foe { right: 18px; top: 0; }
.ob-fighter .ob-card { --w: 82px; }
.ob-fighter.me .ob-card { animation: obLunge 2.6s ease-in-out infinite; }
.ob-fighter.foe .ob-card { animation: obHit 2.6s ease-in-out infinite; }
@keyframes obLunge { 0%, 30%, 60%, 100% { transform: none; } 42% { transform: translate(64px, -44px) rotate(8deg); } }
@keyframes obHit { 0%, 40% { transform: none; } 44% { transform: translateX(-7px) rotate(-4deg); } 48% { transform: translateX(6px) rotate(3deg); } 54%, 100% { transform: none; } }
.ob-hp { width: 82px; height: 7px; border-radius: 9px; background: rgba(255,255,255,.1); overflow: hidden; }
.ob-hp i { display: block; height: 100%; width: 100%; background: #3ddc97; border-radius: 9px; transform-origin: left; }
.ob-fighter.foe .ob-hp i { animation: obHp 2.6s ease-in-out infinite; }
@keyframes obHp { 0%, 43% { transform: none; background: #3ddc97; } 55%, 100% { transform: scaleX(.4); background: #ffb84d; } }
.ob-dmg { position: absolute; top: 20px; left: -18px; font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: #ff5b7a; text-shadow: 0 2px 8px rgba(0,0,0,.6); transform: scale(0); animation: obDmg 2.6s ease-out infinite; }
@keyframes obDmg { 0%, 43% { transform: scale(0); } 50% { transform: translateY(-6px) scale(1.2); } 80% { transform: translateY(-18px) scale(1); } 100% { transform: translateY(-22px) scale(0); } }
.ob-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: #ffd23f; text-shadow: 0 0 14px rgba(255,210,63,.5); }

@media (prefers-reduced-motion: reduce) {
  .ob *, .ob *::before { animation: none !important; }
  .ob-scene.b { visibility: hidden; } .ob-scene.a .ob-found { transform: translateX(-50%) scale(1); }
  .ob-modes .m.a { background: #7c5cff; color: #fff; }
}
/* contenu centré en hauteur (sans jamais couper le haut sur un petit écran) */
.ob-slide > .ob-art { margin-top: auto; }
.ob-slide > .ob-txt { margin-bottom: auto; }
.ob-s0 .ob-txt { text-align: center; }
.ob-s0 .ob-small { justify-content: center; }
.ob-small { display: block !important; line-height: 1.6; }
.ob-small .ob-tab { vertical-align: middle; margin-right: 6px; }
.ob-s0 .ob-small { text-align: center; }

/* ===== Mode d'emploi de Capturer (v2.46) ===== */
/* bouton « ? » au bout des onglets de mode (téléphone) */
.sc-help { flex: 0 0 34px; height: 34px; align-self: center; margin-left: 2px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface2); color: #c8ccea; font-weight: 800; font-size: .95rem; cursor: pointer; }
.sc-help:active { transform: scale(.94); }

/* 1 — trois modes qui défilent dans le téléphone (3 temps de 3 s) */
.ob-scene.t1 { animation: obT1 9s infinite; }
.ob-scene.t2 { visibility: hidden; animation: obT2 9s infinite; }
.ob-scene.t3 { visibility: hidden; animation: obT3 9s infinite; }
@keyframes obT1 { 0%, 33.2% { visibility: visible; } 33.3%, 100% { visibility: hidden; } }
@keyframes obT2 { 0%, 33.2% { visibility: hidden; } 33.3%, 66.5% { visibility: visible; } 66.6%, 100% { visibility: hidden; } }
@keyframes obT3 { 0%, 66.5% { visibility: hidden; } 66.6%, 100% { visibility: visible; } }
.ob-modes3 .m.t1 { animation: obMT1 9s infinite; }
.ob-modes3 .m.t2 { animation: obMT2 9s infinite; }
.ob-modes3 .m.t3 { animation: obMT3 9s infinite; }
@keyframes obMT1 { 0%, 33.2% { background: #7c5cff; color: #fff; } 33.3%, 100% { background: transparent; color: #aab0d3; } }
@keyframes obMT2 { 0%, 33.2% { background: transparent; color: #aab0d3; } 33.3%, 66.5% { background: #7c5cff; color: #fff; } 66.6%, 100% { background: transparent; color: #aab0d3; } }
@keyframes obMT3 { 0%, 66.5% { background: transparent; color: #aab0d3; } 66.6%, 100% { background: #7c5cff; color: #fff; } }
.ob-frame { position: absolute; width: 104px; height: 145px; border: 2px dashed rgba(255,210,63,.7); border-radius: 10px; }
.ob-slidein { animation: obSlideIn 1.5s ease-in-out infinite; }
@keyframes obSlideIn { 0% { transform: translateX(150px) rotate(8deg); } 30%, 70% { transform: none; } 100% { transform: translateX(-150px) rotate(-8deg); } }
.ob-plus { position: absolute; top: 12px; right: 12px; padding: 2px 8px; border-radius: 999px; background: #3ddc97; color: #062; font-weight: 800; font-size: .75rem; animation: obPlus 1.5s infinite; }
@keyframes obPlus { 0%, 38% { transform: scale(0); } 45%, 70% { transform: scale(1); } 80%, 100% { transform: scale(0); } }

/* 2 — menu de la série : « je ne sais pas » puis série choisie */
.ob-sel { position: relative; width: 240px; height: 44px; }
.ob-sel > span { position: absolute; inset: 0; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 12px; background: var(--bg2); font-size: .9rem; font-weight: 600; }
.ob-sel-a { border: 1.5px dashed rgba(255,210,63,.6); color: #c8ccea; animation: obSelA 5s infinite; }
.ob-sel-b { border: 1.5px solid rgba(61,220,151,.7); color: #fff; visibility: hidden; animation: obSelB 5s infinite; }
.ob-sel-b svg { color: #3ddc97; }
@keyframes obSelA { 0%, 44.9% { visibility: visible; } 45%, 100% { visibility: hidden; } }
@keyframes obSelB { 0%, 44.9% { visibility: hidden; } 45%, 100% { visibility: visible; } }
.ob-hint .ob-card { animation: obHint 5s infinite; }
@keyframes obHint { 0%, 44.9% { filter: brightness(.6) saturate(.3); } 45%, 100% { filter: none; } }

/* 3 — bonne et mauvaise photo */
.ob-vs2 { display: flex; gap: 26px; }
.ob-ex { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ob-ex b { font-size: .8rem; }
.ob-ex.ok b { color: #3ddc97; } .ob-ex.ko b { color: #ff7a8a; }
.ob-ex .ob-card { --w: 92px; }
.ob-ex.ko .ob-card { transform: rotate(-11deg) scale(.86); filter: blur(.6px); }
.ob-glare::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,.9) 50%, transparent 62%); }
.ob-mark { position: absolute; top: -10px; right: -10px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.ob-ex.ok .ob-mark { background: #3ddc97; color: #062; }
.ob-ex.ko .ob-mark { background: #ff5b7a; color: #fff; }

/* 4 — page analysée : reconnue / à vérifier / vide */
.ob-page.big .ob-card { --w: 50px; }
.ob-page.big .ob-cell { filter: brightness(.55) saturate(.4); }
.ob-slide.on .ob-page.big .ob-cell { animation: obCellIn .3s ease-out both; }
.ob-slide.on .ob-page.big .d1 { animation-delay: .3s; } .ob-slide.on .ob-page.big .d2 { animation-delay: .6s; } .ob-slide.on .ob-page.big .d3 { animation-delay: .9s; }
.ob-slide.on .ob-page.big .d5 { animation-delay: 1.5s; } .ob-slide.on .ob-page.big .d6 { animation-delay: 1.8s; } .ob-slide.on .ob-page.big .d7 { animation-delay: 2.1s; } .ob-slide.on .ob-page.big .d8 { animation-delay: 2.4s; }
@keyframes obCellIn { to { filter: none; } }
.ob-page.big .ob-cell.ok { outline: 2px solid #3ddc97; }
.ob-page.big .ob-cell.doubt { outline: 2px solid #ffb84d; }
.ob-page.big .ob-cell.empty { background: rgba(255,255,255,.05); border: 1.5px dashed rgba(255,255,255,.25); filter: none; }
.ob-q { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: #ffb84d; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.ob-legend { display: flex; gap: 10px; font-size: .74rem; color: #c8ccea; }
.ob-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ob-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.ob-legend .ok::before { background: #3ddc97; } .ob-legend .doubt::before { background: #ffb84d; } .ob-legend .empty::before { border: 1.5px dashed rgba(255,255,255,.4); }

/* 5 — récapitulatif */
.ob-recap { display: flex; gap: 14px; }
.ob-rc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ob-rc .ob-card { --w: 76px; }
.ob-vp { position: absolute; top: calc(76px * 88 / 63 - 16px); left: 50%; transform: translateX(-50%); padding: 3px 8px; border-radius: 999px; background: rgba(12,14,25,.92); border: 1px solid var(--line); font-size: .64rem; font-weight: 800; white-space: nowrap; }
.ob-vp.doubt { border-color: #ffb84d; color: #ffb84d; animation: obPulse 1.4s ease-in-out infinite; }
@keyframes obPulse { 50% { transform: translateX(-50%) scale(1.12); } }
.ob-st { font-size: .7rem; font-weight: 800; color: #3ddc97; }
.ob-st.dup { color: #34d5ff; }
.ob-save { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 12px; background: linear-gradient(120deg, #7c5cff, #ff4fa3); color: #fff; font-weight: 700; font-size: .85rem; box-shadow: 0 6px 18px rgba(124,92,255,.35); }

/* 6 — certification : dos, retournement, badge */
.ob-flip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; perspective: 700px; }
.ob-flip-in { position: relative; width: 104px; aspect-ratio: 63 / 88; transform-style: preserve-3d; animation: obFlip 4s ease-in-out infinite; }
.ob-flip-in > * { position: absolute !important; inset: 0; width: 100% !important; --w: 104px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ob-back { display: flex; align-items: center; justify-content: center; border-radius: 7px; border: 5px solid #1d3f8f; background: radial-gradient(circle at 50% 50%, #3d6fe0, #1a3a8c 70%); transform: rotateY(180deg); box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.ob-back i { width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffd23f 0 22%, #e8a323 23% 40%, transparent 41%), rgba(255,255,255,.12); }
@keyframes obFlip { 0%, 35% { transform: rotateY(180deg); } 55%, 100% { transform: rotateY(360deg); } }
.ob-shield { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(61,220,151,.14); border: 1px solid rgba(61,220,151,.5); color: #3ddc97; font-weight: 800; font-size: .8rem; animation: obShield 4s infinite; }
@keyframes obShield { 0%, 58% { transform: scale(0); } 64% { transform: scale(1.15); } 70%, 100% { transform: scale(1); } }
.ob-steps li svg { display: inline; vertical-align: -2px; color: #3ddc97; }

@media (prefers-reduced-motion: reduce) {
  .ob-scene.t2, .ob-scene.t3, .ob-sel-b { visibility: hidden; }
  .ob-modes3 .m.t1 { background: #7c5cff; color: #fff; }
  .ob-flip-in { transform: rotateY(360deg); } .ob-shield, .ob-plus { transform: none; }
  .ob-page.big .ob-cell { filter: none; }
}
.ob-c1 .ob-page .ob-card { animation-name: obCell2; }
@keyframes obCell2 { 0%, 36% { filter: brightness(.55) saturate(.4); outline: 0 solid transparent; } 38%, 100% { filter: none; outline: 2px solid #3ddc97; } }