@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&display=swap");

/* ============================================================================
   BEARMOD — suite mod multi-jeux. Design "obsidian aurora".
   Gradients animés, scroll-reveals directionnels, nav moderne. Vanilla CSS.
   ========================================================================== */

:root {
  --bg: #060608;
  --bg-2: #0b0b10;
  --ink: #f6f3ec;
  --ink-dim: #a39d92;
  --ink-faint: #57534b;

  --amber: #ffb43a;
  --amber-2: #ff8a3d;
  --amber-deep: #f2700b;
  --amber-glow: rgba(255, 168, 58, .40);
  --violet: #9b7bff;
  --violet-2: #c98bff;
  --violet-glow: rgba(155, 123, 255, .32);
  --emerald: #3ee0a6;
  --red: #ff6b6b;

  --glass: rgba(255, 255, 255, .045);
  --glass-2: rgba(255, 255, 255, .08);
  --stroke: rgba(255, 255, 255, .09);
  --stroke-2: rgba(255, 255, 255, .17);
  --blur: 14px;
  --blur-lg: 34px;

  --r: 16px;
  --r-lg: 26px;
  --r-pill: 999px;
  --maxw: 1180px;

  --shadow: 0 12px 44px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  --shadow-lift: 0 34px 90px rgba(0, 0, 0, .66);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --f-display: "Bricolage Grotesque", Georgia, serif;
  --f-body: "Sora", -apple-system, sans-serif;
  --f-mono: "Space Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; } /* hidden DOIT cacher, même face à un display:grid inline (fix modale admin #ipModal) */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f-body); background: var(--bg); color: var(--ink);
  line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--amber); color: #1a1100; }

/* ===== atmosphère : mesh aurora animé + grain ===== */
.aurora { position: fixed; inset: -25%; z-index: -3; pointer-events: none; filter: blur(30px) saturate(125%); }
.aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; opacity: .55; }
.aurora .a1 { width: 60vw; height: 60vw; left: -10%; top: -12%; background: radial-gradient(circle, rgba(255, 168, 58, .55), transparent 60%); animation: orb1 26s var(--ease) infinite alternate; }
.aurora .a2 { width: 52vw; height: 52vw; right: -8%; top: 0; background: radial-gradient(circle, rgba(155, 123, 255, .5), transparent 60%); animation: orb2 30s var(--ease) infinite alternate; }
.aurora .a3 { width: 48vw; height: 48vw; left: 30%; bottom: -20%; background: radial-gradient(circle, rgba(62, 224, 166, .32), transparent 62%); animation: orb3 34s var(--ease) infinite alternate; }
@keyframes orb1 { to { transform: translate3d(8%, 10%, 0) scale(1.15); } }
@keyframes orb2 { to { transform: translate3d(-10%, 8%, 0) scale(1.2); } }
@keyframes orb3 { to { transform: translate3d(6%, -10%, 0) scale(1.1); } }
.grain { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }

/* scroll progress bar */
.scrollbar { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 100;
  background: linear-gradient(90deg, var(--amber), var(--violet)); box-shadow: 0 0 12px var(--amber-glow); transition: width .1s linear; }

/* ===== utilitaires ===== */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); }
.mono { font-family: var(--f-mono); }
.eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--amber); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--amber), transparent); }
.glass { background-image: linear-gradient(180deg, var(--glass-2), var(--glass)), linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .05) 50%, transparent 58%); background-size: 100% 100%, 260% 100%; background-repeat: no-repeat; animation: glassFlow 18s linear infinite; backdrop-filter: blur(var(--blur-lg)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(160%); border: 1px solid var(--stroke); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .08); border-radius: var(--r-lg); }
@keyframes glassFlow { to { background-position: 0 0, 260% 0; } }

/* ===== NAV ===== */
.nav { position: sticky; top: 0; z-index: 60; transition: padding .35s var(--ease); }
.nav__inner { display: flex; align-items: center; gap: 18px; min-height: 74px; margin-top: 12px; padding: 0 8px 0 16px; border-radius: var(--r-pill);
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s, transform .4s var(--ease); border: 1px solid transparent; }
.nav.scrolled .nav__inner { background: rgba(10, 10, 14, .66); backdrop-filter: blur(var(--blur-lg)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(140%); border-color: var(--stroke); box-shadow: 0 8px 30px rgba(0, 0, 0, .4); }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--f-display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.brand__mark { width: 32px; height: 32px; filter: drop-shadow(0 4px 16px var(--amber-glow)); transition: transform .4s var(--ease-spring); }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.08); }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a { position: relative; font-size: 14px; color: var(--ink-dim); padding: 9px 14px; border-radius: var(--r-pill); transition: color .25s; }
.nav__links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1.5px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav__links a:hover { color: var(--ink); } .nav__links a:hover::after { transform: scaleX(1); }
.lang { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--ink); padding: 8px 12px; border: 1px solid var(--stroke); border-radius: var(--r-pill); background: var(--glass); transition: .25s; }
.lang:hover { border-color: var(--stroke-2); background: var(--glass-2); }
.lang svg { width: 13px; height: 13px; opacity: .65; }
@media (max-width: 800px) { .nav__links { display: none; } }
@media (max-width: 520px) {
  .nav__inner { gap: 8px; padding: 0 6px 0 10px; }
  .brand { font-size: 0; gap: 0; }
  .nav .btn--sm { max-width: 150px; padding: 10px 12px; font-size: 12px; line-height: 1.15; white-space: normal; }
  .lang { padding: 8px 10px; }
}
@media (max-width: 370px) {
  .nav .btn--sm { display: none; }
  .nav__inner { justify-content: space-between; }
}

/* ===== BUTTONS ===== */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--f-body); font-weight: 600; font-size: 15px; line-height: 1; padding: 15px 26px; border-radius: var(--r-pill); border: 0; cursor: pointer; color: #1a1100; overflow: hidden;
  background: linear-gradient(120deg, var(--amber), var(--amber-2) 55%, var(--amber-deep)); background-size: 180% 180%;
  box-shadow: 0 14px 42px var(--amber-glow), inset 0 1px 0 rgba(255, 255, 255, .4); transition: transform .3s var(--ease), box-shadow .3s, background-position .6s var(--ease); }
.btn:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 22px 60px var(--amber-glow), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn:active { transform: translateY(0) scale(.99); }
.btn svg { width: 18px; height: 18px; }
.btn--sm { padding: 11px 18px; font-size: 14px; }
.btn--ghost { color: var(--ink); background: var(--glass-2); backdrop-filter: blur(var(--blur)); border: 1px solid var(--stroke-2); box-shadow: none; }
.btn--ghost:hover { background: var(--glass); border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber-glow); }

/* ===== HERO ===== */
.hero { position: relative; padding: clamp(56px, 12vh, 120px) 0 80px; text-align: center; }
.hero__pill { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: min(100%, 720px); gap: 9px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-dim); padding: 8px 14px 8px 10px; border: 1px solid var(--stroke); border-radius: var(--r-pill); background: var(--glass); margin-bottom: 26px; }
.hero__pill b { color: var(--ink); font-weight: 600; }
.hero__pill .tag { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #1a1100; background: linear-gradient(120deg, var(--amber), var(--amber-deep)); padding: 3px 7px; border-radius: var(--r-pill); }
.hero__mark { width: clamp(84px, 15vw, 122px); margin: 0 auto 22px; filter: drop-shadow(0 16px 56px var(--amber-glow)); animation: float 6s var(--ease) infinite alternate; will-change: transform; }
@keyframes float { to { transform: translateY(-12px); } }
.hero h1 { font-family: var(--f-display); font-weight: 800; letter-spacing: -.045em; line-height: .9; font-size: clamp(3.2rem, 13vw, 9.5rem);
  background: linear-gradient(100deg, #fff 8%, var(--amber) 46%, var(--violet-2) 92%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 7s linear infinite; }
@keyframes shimmer { to { background-position: 220% center; } }
.hero__tag { font-size: clamp(1.02rem, 2.4vw, 1.4rem); color: var(--ink-dim); max-width: 640px; margin: 22px auto 0; }
.hero__tag b { color: var(--ink); font-weight: 600; }
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.hero__scroll { margin-top: 60px; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-faint); font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.hero__scroll svg { width: 18px; height: 18px; animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* ===== SECTION ===== */
.section { padding: clamp(56px, 11vh, 120px) 0; position: relative; }
.section__head { max-width: 660px; margin-bottom: 54px; }
.section__head.center { margin-inline: auto; text-align: center; }
.section h2 { font-family: var(--f-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(2.1rem, 5.6vw, 3.6rem); margin-top: 16px; }
.section h2 em { font-style: normal; background: linear-gradient(100deg, var(--amber), var(--violet-2) 50%, var(--amber)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradFlow 9s linear infinite; }
@keyframes gradFlow { to { background-position: 200% center; } }
.section__head p { color: var(--ink-dim); font-size: 1.06rem; margin-top: 14px; }

/* ===== GAMES STRIP ===== */
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.game { position: relative; padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--stroke); background: linear-gradient(180deg, var(--glass-2), var(--glass)); overflow: hidden; transition: transform .4s var(--ease), border-color .4s; }
.game.live { border-color: rgba(62, 224, 166, .3); }
.game:hover { transform: translateY(-4px); }
.game__status { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; }
.game.live .game__status { color: var(--emerald); } .game.soon .game__status { color: var(--ink-faint); }
.game__status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.game h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; margin: 14px 0 6px; }
.game p { color: var(--ink-dim); font-size: .92rem; }
.game.soon { opacity: .62; }

/* ===== FEATURE GRID — vidéo plein cadre + calque texte aéroglass =====
   Synthèse "Aurora Glass" : la carte EST l'écran de téléphone (640×1386, ~9:19.5).
   La vidéo remplit toute la carte SANS recadrage. Le texte est un calque absolu en bas.

   Garde-fou compteur de spins (~88 % de la hauteur de carte) — DEUX couches séparées :
   • un dégradé sombre (lisibilité du texte) qui ne fait que TEINTER, jamais flouter ;
   • un flou (backdrop-filter) confiné PAR MASQUE à la bande 90 %→100 % de la CARTE,
     soit STRICTEMENT SOUS le compteur. À 88 % : flou nul, teinte légère → bouton NET.
   Les stops sont ancrés sur la hauteur de la CARTE (height:100% du calque), pas sur la
   hauteur variable du texte → comportement identique sur les 6 cartes quel que soit le wrap. */
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }

/* La carte = la vidéo. Plus de fond glass translucide (la vidéo couvre tout) : --bg-2
   sert juste de letterbox pendant le chargement. overflow:hidden clippe le calque + le tilt 3D. */
.feat {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: var(--bg-2);
  border: 1px solid var(--stroke); box-shadow: var(--shadow);
  transition: transform .45s var(--ease), box-shadow .45s, border-color .45s;
}
/* liseré dégradé ambre→violet révélé au survol (conservé, z-index:4 = au-dessus du calque) */
.feat::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(130deg, var(--amber), transparent 40%, transparent 60%, var(--violet));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .45s; pointer-events: none; z-index: 4;
}
.feat:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.feat:hover::after { opacity: .9; }

/* ---- scène vidéo : ratio NATIF 640/1386 → object-fit:cover = plein cadre SANS crop ---- */
.feat__shot {
  aspect-ratio: 640 / 1386; position: relative; overflow: hidden;
  border-radius: inherit; background: var(--bg-2);
}
.feat__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat__device { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #0a0b10; }
/* reflet aéroglass diagonal en haut-gauche — s'éteint avant 30 %, n'atteint jamais le compteur */
.feat__device::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(150deg, rgba(255, 255, 255, .10), transparent 30%);
}
.feat__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 0;
}

/* ===== CALQUE TEXTE — couvre toute la carte, mais n'est visible/frosté qu'en bas =====
   position:absolute inset:0 → ses stops % se mesurent sur la HAUTEUR DE CARTE (déterministe).
   pointer-events:none → la vidéo reste cliquable / le tilt 3D non gêné ; seul le texte
   ré-active pointer-events (sélection éventuelle).
   COUCHE 1 (background) : dégradé sombre qui TEINTE pour la lisibilité.
     transparent jusqu'à 66 % → à 88 % (compteur) ~.22 (teinte légère, bouton lisible)
     → opaque .92 vers 100 % (zone du texte). NE FLOUTE PAS. */
.feat__body {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end; gap: 8px;
  padding: 0 20px 20px;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 50%,
    rgba(8, 8, 13, .44) 68%,
    rgba(8, 8, 13, .76) 84%,
    rgba(8, 8, 13, .91) 94%,
    rgba(8, 8, 13, .96) 100%
  );
}
/* COUCHE 2 (::before) : le FLOU, confiné par masque à la bande 90 %→100 % de la carte.
   mask: transparent jusqu'à 88 % → opaque à 96 %. Donc AU NIVEAU du compteur (88 %) le
   backdrop-filter vaut 0 → la vidéo reste NETTE. Le verre dépoli n'attaque que le bas (texte). */
.feat__body::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(9px) saturate(140%);
          backdrop-filter: blur(9px) saturate(140%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 70%, #000 86%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 70%, #000 86%, #000 100%);
}
/* filet ambre qui souligne le HAUT de la bande frostée (ancré à 90 % de la carte, sous le compteur) */
.feat__body::after {
  content: ""; position: absolute; left: 18px; right: 18px; top: 90%; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, var(--amber-glow) 30%, var(--amber-glow) 70%, transparent);
  opacity: .75; pointer-events: none;
}

/* tablette étroite : 2 colonnes propres plutôt que 3 trop serrées */
@media (min-width: 641px) and (max-width: 900px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}
/* mobile (≤640px) : 1 carte/rangée, scroll-snap doux, tilt 3D coupé.
   La carte garde le ratio natif mais on plafonne la HAUTEUR au viewport (et on borne la
   LARGEUR via le ratio, centrée) pour qu'une carte tienne dans l'écran sans déborder. */
@media (max-width: 640px) {
  .features {
    grid-template-columns: 1fr;
    gap: 18px;
    perspective: none;                 /* tilt 3D désactivé sur tactile */
  }
  /* carte PLEINE LARGEUR, ratio natif → la vidéo remplit l'écran. L'ancien bornage
     (max-width: calc(78vh*640/1386)) cassait sur certains navigateurs mobiles → carte
     largeur 0 → vidéo invisible. On laisse le ratio natif gérer la hauteur. */
  .feat__shot { aspect-ratio: 640 / 1386; max-height: none; }
  .feat__body { padding-left: 18px; padding-right: 18px; }
  .feat h3 { font-size: 1.12rem; }
  .feat p { font-size: .9rem; }
}

/* navigateurs sans backdrop-filter : la bande basse reste lisible via le dégradé sombre seul */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .feat__body {
    background: linear-gradient(
      to bottom,
      transparent 0%, transparent 64%,
      rgba(7, 7, 11, .30) 82%,
      rgba(7, 7, 11, .78) 92%,
      rgba(7, 7, 11, .96) 100%
    );
  }
  .feat__body::before { display: none; }
}

/* respect du reduce-motion (frost statique conservé, aucune anim ajoutée) */
@media (prefers-reduced-motion: reduce) {
  .feat { transition: none; }
}

/* ===== NAV SECTIONS (dot-nav latérale, mobile/tablette) =====
   Rail vertical glassy, fixé à droite, centré. Remplace la nav top (cachée ≤800px) pour
   sauter entre sections. Masquée sur grand écran où la nav top suffit. */
.secnav {
  position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
  z-index: 55; display: none; flex-direction: column; gap: 14px;
  padding: 12px 9px; border-radius: var(--r-pill);
  background: rgba(12, 12, 18, .55); backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid var(--stroke); box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
}
.secnav__dot {
  position: relative; display: block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--stroke-2); transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s;
}
.secnav__dot:hover { background: var(--ink-dim); transform: scale(1.15); }
.secnav__dot.active {
  background: linear-gradient(120deg, var(--amber), var(--amber-deep));
  box-shadow: 0 0 12px var(--amber-glow); transform: scale(1.2);
}
/* étiquette qui glisse au survol (souris) — invisible/non-bloquante au repos */
.secnav__label {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap; padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(12, 12, 18, .92); border: 1px solid var(--stroke-2);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.secnav__dot:hover .secnav__label,
.secnav__dot:focus-visible .secnav__label { opacity: 1; transform: translateY(-50%) translateX(-2px); }
/* affichée seulement sur petit/moyen écran ; le bureau garde la nav top */
@media (max-width: 900px) { .secnav { display: flex; } }
/* écrans courts (paysage) : on enlève le rail pour ne pas gêner */
@media (max-width: 900px) and (max-height: 520px) { .secnav { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .secnav__dot, .secnav__label { transition: none; }
}

/* ===== Avertissement FAQ (rouge léger) ===== */
.faq-warn { display: flex; gap: 14px; align-items: flex-start; max-width: 820px; margin: 0 auto 22px; padding: 16px 20px; border-radius: var(--r); background: rgba(255, 92, 92, .07); border: 1px solid rgba(255, 92, 92, .30); }
.faq-warn svg { flex: none; width: 26px; height: 26px; stroke: #ff8585; margin-top: 1px; }
.faq-warn p { margin: 0; color: var(--ink-dim); font-size: .95rem; line-height: 1.55; }
.faq-warn strong { color: #ff9d9d; font-weight: 700; }

/* ===== Logo image (hero + nav) ===== */
.hero__logo { margin: 6px auto 4px; line-height: 0; }
.hero__logo img { display: block; width: min(480px, 86vw); height: auto; margin: 0 auto; filter: drop-shadow(0 12px 40px var(--amber-glow)); }
img.brand__mark { object-fit: contain; }
/* placeholder (cas sans vidéo) : recentré sur le shot devenu non-grid */
.feat__shot .ph {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 12px;
  color: var(--ink-faint); text-align: center; padding: 20px; z-index: 1;
}
.feat__shot .ph svg { width: 46px; height: 46px; opacity: .5; }
.feat__shot .ph span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; }

/* le contenu texte ré-active la sélection ; il vit dans le dernier ~10 % (zone frostée) */
.feat__body > * { pointer-events: auto; }
.feat__badge {
  align-self: flex-start; display: inline-block;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); border: 1px solid rgba(255, 168, 58, .34);
  background: rgba(255, 168, 58, .10);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 5px 10px; border-radius: var(--r-pill);
}
.feat h3 {
  font-family: var(--f-display); font-weight: 700; font-size: 1.18rem; letter-spacing: -.01em;
  margin: 2px 0 0; color: var(--ink);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
}
.feat p {
  color: var(--ink-dim); font-size: .94rem; line-height: 1.5; margin: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .75);
}

/* ===== STEPS ===== */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.step { padding: 28px 24px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--stroke); transition: transform .4s var(--ease), border-color .4s; }
.step:hover { transform: translateY(-4px); border-color: var(--stroke-2); }
.step__n { font-family: var(--f-display); font-weight: 800; font-size: 2.7rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.4px var(--amber); opacity: .85; }
.step h4 { font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; margin: 14px 0 6px; }
.step p { color: var(--ink-dim); font-size: .92rem; }

/* ===== CTA OBTENIR ===== */
.obtain { text-align: center; padding: clamp(44px, 7vw, 80px) clamp(20px, 5vw, 56px); border-radius: var(--r-lg); position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 168, 58, .12), var(--glass)); border: 1px solid var(--stroke-2); }
.obtain::before { content: ""; position: absolute; inset: -50% 25% auto 25%; height: 80%; background: radial-gradient(50% 100% at 50% 0, var(--amber-glow), transparent 70%); filter: blur(26px); animation: pulseGlow 5s var(--ease) infinite alternate; }
@keyframes pulseGlow { to { opacity: .55; transform: scale(1.1); } }
.obtain > * { position: relative; }
.obtain p { color: var(--ink-dim); max-width: 540px; margin: 16px auto 30px; }
.obtain__row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ── carte contact revendeur (section Obtenir) ── */
.reseller { max-width: 540px; margin: 26px auto 0; padding: 22px 24px; text-align: left;
  background: linear-gradient(180deg, var(--glass-2), var(--glass)); border: 1px solid var(--stroke);
  border-radius: var(--r); box-shadow: var(--shadow); }
.reseller__head { display: flex; align-items: center; gap: 14px; }
.reseller__av { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 800; font-size: 17px; color: #14101a;
  background: linear-gradient(135deg, var(--amber), var(--violet)); box-shadow: 0 6px 22px var(--amber-glow); }
.reseller__id strong { display: block; font-family: var(--f-display); font-size: 1.12rem; line-height: 1.2; }
.reseller__role { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.reseller__desc { color: var(--ink-dim); font-size: .95rem; margin: 15px 0 18px; }
.reseller .obtain__row { justify-content: flex-start; }

/* ===== Comparatif Gratuit / Premium (table sobre, mobile-first) ===== */
.compare { max-width: 540px; margin: 28px auto 4px; }
.ctable { display: grid; grid-template-columns: 1fr 68px 68px; align-items: center;
  background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--r); overflow: hidden; }
.ctable > span { padding: 12px 14px; font-size: 14px; line-height: 1.25; }
.ctable .cf { color: var(--ink); }
.ctable .cv { text-align: center; color: var(--ink); }
.ctable .cv--pro { background: rgba(255, 180, 58, .06); }
.ctable .cv--head { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.ctable .cv--head.cv--pro { color: var(--amber); }
.ctable .cv.y { color: var(--emerald); font-weight: 700; }
.ctable .cv.n { color: var(--ink-faint); }
.ctable .cv.hot { color: var(--amber); font-weight: 700; }
.ctable > span:nth-child(n+4) { border-top: 1px solid var(--stroke); }
.ctable__cta { display: flex; gap: 12px; margin-top: 16px; }
.ctable__cta .btn { flex: 1; justify-content: center; }
@media (max-width: 460px) {
  .ctable { grid-template-columns: 1fr 50px 50px; }
  .ctable > span { padding: 11px 8px; font-size: 13px; }
  .ctable__cta { flex-direction: column; }
}

/* ===== Multi-game selector + pricing ===== */
.section__head--compact { margin: 0 auto 24px; }
.game-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin: 0 auto 22px; position: sticky; top: 70px; z-index: 40; }
.game-switch.sticky-active {
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  background: rgba(6, 6, 8, 0.82);
  border-radius: var(--r, 12px);
  padding: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.game-switch__btn { min-width: 0; min-height: 72px; padding: 14px 16px; border: 1px solid var(--stroke); border-radius: var(--r); cursor: pointer; color: var(--ink-dim); background: var(--glass); text-align: left; transition: border-color .2s, background .2s, transform .2s; }
.game-switch__btn:hover { border-color: var(--stroke-2); transform: translateY(-1px); }
.game-switch__btn.active { color: var(--ink); border-color: rgba(255, 180, 58, .55); background: linear-gradient(180deg, rgba(255, 180, 58, .12), var(--glass)); box-shadow: 0 0 0 1px rgba(255, 180, 58, .16); }
.game-switch__btn span { display: block; font-family: var(--f-display); font-size: 1.12rem; font-weight: 800; line-height: 1.1; }
.game-switch__btn small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.35; color: currentColor; opacity: .72; }
.game-panels { position: relative; }
.game-panel { display: grid; grid-template-columns: minmax(260px, 390px) minmax(0, 1fr); gap: clamp(20px, 5vw, 48px); align-items: center; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--stroke); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--glass-2), var(--glass)); box-shadow: var(--shadow); }
.game-panel[hidden] { display: none; }
.game-preview { position: relative; aspect-ratio: 941 / 1672; overflow: hidden; border-radius: var(--r); background: #0a0b10; border: 1px solid var(--stroke); box-shadow: 0 22px 70px rgba(0, 0, 0, .48); }
.game-preview__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.game-preview__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 52%, rgba(7, 8, 12, .82) 100%); pointer-events: none; }
.game-preview__label { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 3px; }
.game-preview__label span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.game-preview__label strong { font-family: var(--f-display); font-size: clamp(1.35rem, 4vw, 2rem); line-height: 1; }
.game-copy { min-width: 0; }
.game-copy__eyebrow { display: inline-flex; margin-bottom: 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.game-copy h3 { font-family: var(--f-display); font-size: clamp(1.8rem, 5vw, 3.15rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 20px; }
.tier-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tier-block { min-width: 0; padding: 15px; border: 1px solid var(--stroke); border-radius: var(--r); background: rgba(0, 0, 0, .18); }
.tier-block span { display: inline-flex; margin-bottom: 9px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.tier-block--free span { color: var(--emerald); }
.tier-block--premium span { color: var(--amber); }
.tier-block--vip { border-color: rgba(201, 139, 255, .42); background: linear-gradient(180deg, rgba(201, 139, 255, .10), rgba(255, 180, 58, .06)); }
.tier-block--vip span { color: var(--violet-2); }
.tier-block ul, .price-card ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.tier-block li, .price-card li { color: var(--ink-dim); font-size: .9rem; line-height: 1.42; }
.tier-block li::before, .price-card li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--amber); vertical-align: 1px; }
.risk-flag { display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; padding: 6px 9px; border: 1px solid rgba(255, 107, 107, .46); border-radius: 10px; color: #ffb2b2; background: rgba(255, 107, 107, .09); font-size: .82rem; line-height: 1.28; }
.risk-flag::before { content: "!"; display: inline-grid; place-items: center; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; color: #170808; background: #ff9b9b; font-family: var(--f-mono); font-size: 11px; font-weight: 700; }
.game-copy__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.game-copy__actions .btn { min-width: 150px; }
.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.download-card { min-width: 0; display: flex; flex-direction: column; gap: 15px; padding: 24px; border: 1px solid var(--stroke); border-radius: var(--r); background: linear-gradient(180deg, var(--glass-2), var(--glass)); box-shadow: var(--shadow); }
.download-card__tag { width: fit-content; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); border: 1px solid rgba(255, 180, 58, .35); border-radius: var(--r-pill); padding: 5px 10px; background: rgba(255, 180, 58, .09); }
.download-card h3 { font-family: var(--f-display); font-size: clamp(1.55rem, 4vw, 2.1rem); line-height: 1.05; letter-spacing: -.02em; margin: 0; }
.download-card__version { color: var(--ink-dim); font-family: var(--f-mono); font-size: 12px; letter-spacing: .03em; }
.download-card__version b { color: var(--emerald); font-weight: 700; }
.download-card ul { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.download-card li { color: var(--ink-dim); font-size: .92rem; line-height: 1.45; }
.download-card li b { color: var(--ink); margin-right: 6px; }
.download-card li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--amber); vertical-align: 1px; }
.download-card__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.download-card__actions .btn { flex: 1 1 190px; }
.home-share { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--stroke); }
.home-share__label { flex: 1 0 100%; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.home-share__preview { flex: 1 0 100%; margin: -2px 0 2px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; background: rgba(255, 255, 255, .035); color: var(--ink-dim); font-size: 12px; line-height: 1.45; }
.home-share__link { --share-a: rgba(255, 255, 255, .14); --share-b: rgba(255, 255, 255, .07); --share-glow: rgba(255, 255, 255, .08); min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: linear-gradient(135deg, var(--share-a), var(--share-b)); color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; box-shadow: 0 10px 24px var(--share-glow); transition: border-color .15s ease, filter .15s ease, transform .15s ease, box-shadow .15s ease; }
.home-share__link::before { content: attr(data-share-icon); display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-family: var(--f-mono); font-size: 10px; font-weight: 700; line-height: 1; }
.home-share__link[data-share-platform="whatsapp"] { --share-a: #25d366; --share-b: #128c7e; --share-glow: rgba(37, 211, 102, .22); }
.home-share__link[data-share-platform="telegram"] { --share-a: #2aabee; --share-b: #0088cc; --share-glow: rgba(42, 171, 238, .22); }
.home-share__link[data-share-platform="x"] { --share-a: #1f2328; --share-b: #050505; --share-glow: rgba(255, 255, 255, .10); }
.home-share__link[data-share-platform="facebook"] { --share-a: #1877f2; --share-b: #0b5fcc; --share-glow: rgba(24, 119, 242, .24); }
.home-share__link:hover { filter: saturate(1.08) brightness(1.06); border-color: rgba(255, 255, 255, .26); transform: translateY(-1px); box-shadow: 0 14px 30px var(--share-glow); }
.home-share__link.is-copied { --share-a: var(--emerald); --share-b: #14956d; --share-glow: rgba(62, 224, 166, .24); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.price-card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--stroke); border-radius: var(--r); background: linear-gradient(180deg, var(--glass-2), var(--glass)); box-shadow: var(--shadow); overflow: hidden; }
.price-card--featured { border-color: rgba(255, 180, 58, .42); transform: translateY(-8px); }
.price-card--vip { border-color: rgba(201, 139, 255, .48); background: linear-gradient(180deg, rgba(201, 139, 255, .12), rgba(255, 180, 58, .07)); box-shadow: 0 24px 80px rgba(155, 123, 255, .18), var(--shadow); }
.price-card__tag { width: fit-content; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); border: 1px solid rgba(255, 180, 58, .35); border-radius: var(--r-pill); padding: 5px 10px; background: rgba(255, 180, 58, .09); }
.price-card__ribbon { position: absolute; right: 14px; top: 14px; max-width: 46%; font-family: var(--f-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #1a1100; background: linear-gradient(120deg, var(--violet-2), var(--amber)); border-radius: var(--r-pill); padding: 5px 9px; text-align: center; }
.price-card h3 { font-family: var(--f-display); font-size: clamp(1.8rem, 4vw, 2.45rem); line-height: 1; letter-spacing: -.02em; margin: 0; }
.price-card p { color: var(--ink-dim); font-size: .95rem; margin: 0; }
.price-card .btn { margin-top: auto; width: 100%; }
.pricing-note { margin: 18px auto 0; max-width: 760px; color: var(--ink-dim); text-align: center; font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; }
@media (max-width: 980px) {
  .game-panel { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
  .game-preview { width: min(100%, 360px); margin: 0 auto; }
  .tier-stack, .pricing-grid, .download-grid { grid-template-columns: 1fr; }
  .price-card--featured { transform: none; }
}
@media (max-width: 560px) {
  .game-switch { grid-template-columns: 1fr; }
  .game-panel { padding: 14px; border-radius: var(--r); }
  .game-copy h3 { font-size: 1.7rem; }
  .game-copy__actions .btn { width: 100%; }
  .download-card { padding: 20px; }
  .home-share__link { flex: 1 1 calc(50% - 8px); min-height: 40px; }
  .price-card { padding: 20px; }
  .price-card__ribbon { position: static; max-width: none; align-self: flex-start; }
}

/* ===== FAQ ===== */
.faq { display: grid; gap: 12px; max-width: 800px; margin-inline: auto; }
.faq details { border: 1px solid var(--stroke); border-radius: var(--r); background: var(--glass); overflow: hidden; transition: border-color .25s, background .25s; }
.faq details[open] { border-color: var(--stroke-2); background: var(--glass-2); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 22px; font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); color: var(--amber); font-size: 1.4rem; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq p { padding: 0 22px 22px; color: var(--ink-dim); }

/* ===== FOOTER ===== */
.footer { border-top: 1px solid var(--stroke); margin-top: 40px; padding: 48px 0 40px; }
.footer__row { display: flex; flex-wrap: wrap; gap: 22px; justify-content: space-between; align-items: center; }
.footer__brand { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 800; }
.footer__brand img { width: 30px; }
.footer small { color: var(--ink-faint); font-family: var(--f-mono); font-size: 11.5px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: center; }
.footer nav a { color: var(--ink-dim); font-size: 13px; transition: color .2s; }
.footer nav a:hover { color: var(--amber); }

/* ===== SCROLL REVEAL (variants) ===== */
[data-reveal] { opacity: 0; transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: opacity, transform; }
[data-reveal="up"] { transform: translateY(34px); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .aurora span, .hero__mark, .hero h1, .obtain::before { animation: none !important; }
}

/* ===== PORTAIL / ADMIN ===== */
.panel { max-width: 920px; margin: clamp(40px, 9vh, 90px) auto; }
.panel--narrow { max-width: 440px; }
.card { padding: clamp(26px, 4vw, 40px); }
.card h1 { font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.field { display: block; margin-top: 16px; }
.field label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.input { width: 100%; margin-top: 7px; padding: 14px 16px; font-family: var(--f-body); font-size: 15px; color: var(--ink); background: rgba(0, 0, 0, .35); border: 1px solid var(--stroke); border-radius: 12px; outline: none; transition: border-color .2s, box-shadow .2s; }
.input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin: 24px 0; }
@media (max-width: 360px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat { padding: 18px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--stroke); }
.stat .k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.stat .v { font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; margin-top: 6px; }
.stat .v.ok { color: var(--emerald); } .stat .v.warn { color: var(--amber); } .stat .v.bad { color: var(--red); }
.tablewrap { overflow-x: auto; border: 1px solid var(--stroke); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--stroke); white-space: nowrap; }
th { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
td.k { font-family: var(--f-mono); }
.badge { font-family: var(--f-mono); font-size: 10.5px; padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid var(--stroke-2); }
.badge.ok { color: var(--emerald); border-color: rgba(62, 224, 166, .4); }
.badge.bad { color: var(--red); border-color: rgba(255, 107, 107, .4); }
.badge.kind-activate { color: var(--emerald); border-color: rgba(62, 224, 166, .35); }
.badge.kind-validate { color: var(--violet-2); border-color: rgba(201, 139, 255, .35); }
.badge.kind-download { color: var(--amber); border-color: rgba(255, 168, 58, .4); }
.badge.kind-admin_login { color: var(--ink-dim); }

/* ===== ADMIN — onglets + journal ===== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--stroke); margin-bottom: 22px; flex-wrap: wrap; }
.tabs .tab { appearance: none; border: 0; background: transparent; color: var(--ink-dim); font-family: var(--f-display); font-weight: 600; font-size: .98rem; padding: 12px 18px; cursor: pointer; border-radius: 10px 10px 0 0; position: relative; transition: color .2s, background .2s; }
.tabs .tab:hover { color: var(--ink); background: var(--glass); }
.tabs .tab.active { color: var(--amber); }
.tabs .tab.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--amber); border-radius: 2px; }
.tabpanel { animation: tabFade .35s var(--ease); }
@keyframes tabFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { appearance: none; border: 1px solid var(--stroke-2); background: var(--glass); color: var(--ink-dim); font-family: var(--f-mono); font-size: 11px; letter-spacing: .03em; padding: 7px 12px; border-radius: var(--r-pill); cursor: pointer; transition: .2s; }
.chip:hover { color: var(--ink); border-color: var(--amber); }
.chip.active { color: #1a1100; background: var(--amber); border-color: var(--amber); }
.flag { font-size: 1.05rem; line-height: 1; vertical-align: -1px; }
.tnum { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.ua { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

/* ===== ADMIN — conteneur large (exploite tout l'écran, ≠ .wrap marketing 1180px) ===== */
.admin-main { width: 100%; max-width: 1680px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 40px); }
.admin-main--pad { padding-top: 24px; padding-bottom: 60px; }
.admin-main.nav__row { display: flex; align-items: center; gap: 14px; height: 74px; }
.nav__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.nav__actions #whoami { font-size: 13px; white-space: nowrap; }
/* les cartes stat occupent toute la largeur sur grand écran (colonnes plus larges) */
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ===== ADMIN — responsive ===== */
/* tablette : densité modérée, stats 3–4 colonnes */
@media (max-width: 1024px) {
  .admin-main--pad { padding-top: 18px; padding-bottom: 48px; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
/* mobile : tout empilé, scroll horizontal préservé pour les grilles */
@media (max-width: 640px) {
  .admin-main { padding-inline: 14px; }
  .admin-main--pad { padding-top: 14px; padding-bottom: 40px; }
  .admin-main.nav__row { gap: 8px; }
  .nav__actions { gap: 7px; }
  .nav__actions #whoami { display: none; } /* gagner de la place sur petit écran */
  .nav__actions .mini { padding: 9px 12px; min-height: 38px; } /* cibles tactiles confortables */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
  .stat { padding: 14px; }
  .stat .v { font-size: 1.45rem; }
  .card { padding: 18px; }
  /* barre d'onglets : défile horizontalement si trop large */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 2px; margin-bottom: 16px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { flex: 0 0 auto; padding: 11px 14px; font-size: .92rem; }
  /* formulaire "Créer une licence" : champs pleine largeur empilés */
  .admin-main .field { flex: 1 1 100% !important; min-width: 0 !important; }
  .admin-main #createBtn { width: 100%; }
}

.row-actions { display: flex; gap: 6px; }
.mini { font-family: var(--f-body); font-size: 12px; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--stroke-2); background: var(--glass); color: var(--ink-dim); cursor: pointer; transition: .2s; }
.mini:hover { color: var(--ink); border-color: var(--amber); }
.mini.danger:hover { color: var(--red); border-color: var(--red); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0; padding: 13px 20px; border-radius: var(--r-pill); background: var(--bg-2); border: 1px solid var(--stroke-2); font-size: 14px; transition: .3s var(--ease); z-index: 80; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok { border-color: rgba(62, 224, 166, .5); } .toast.bad { border-color: rgba(255, 107, 107, .5); }
.muted { color: var(--ink-dim); }
.center { text-align: center; }

/* =========================================================================
   ADMIN v2 — VUE UNIFIÉE EN CARTES (remplace AG Grid + l'ancienne vue mobile)
   Une seule grille responsive 1→2→3 colonnes, identique mobile/desktop.
   ========================================================================= */

/* ── BARRE D'OUTILS d'une liste : recherche + chips + tri + compteur, ne déborde jamais ── */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 18px; }
.toolbar .search { position: relative; flex: 1 1 240px; min-width: 0; }
.toolbar .search input {
  width: 100%; margin: 0; padding: 13px 16px 13px 42px; min-height: 46px;
  font-family: var(--f-body); font-size: 15px; color: var(--ink);
  background: rgba(0, 0, 0, .35); border: 1px solid var(--stroke);
  border-radius: var(--r-pill); outline: none; transition: border-color .2s, box-shadow .2s;
}
.toolbar .search input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
.toolbar .search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--ink-dim); stroke: currentColor; pointer-events: none; }
.toolbar .search .clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: none;
  width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%;
  background: var(--glass-2); color: var(--ink-dim); cursor: pointer; font-size: 16px; line-height: 1;
}
.toolbar .search.filled .clear { display: grid; }
/* sélecteur de tri : look .chip avec flèche custom */
.toolbar .sort {
  appearance: none; -webkit-appearance: none; min-height: 46px; padding: 0 38px 0 16px; cursor: pointer;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink);
  background: var(--glass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23a39d92' stroke-width='2'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--stroke-2); border-radius: var(--r-pill); transition: border-color .2s; flex: 0 0 auto;
}
.toolbar .sort:hover { border-color: var(--amber); }
.toolbar .chips { flex: 1 1 auto; }
.toolbar .count { font-family: var(--f-mono); font-size: 11px; color: var(--ink-faint);
  letter-spacing: .08em; flex: 0 0 auto; margin-left: auto; white-space: nowrap; }

/* la barre colle en haut au scroll sur mobile (reste sous le pouce sur une longue liste) */
@media (max-width: 720px) {
  .toolbar { position: sticky; top: 8px; z-index: 30; padding: 10px; margin: 0 -4px 14px;
    background: rgba(10, 10, 14, .82);
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(140%); backdrop-filter: blur(var(--blur-lg)) saturate(140%);
    border: 1px solid var(--stroke); border-radius: var(--r); box-shadow: 0 8px 26px rgba(0, 0, 0, .42); }
  .toolbar .chips { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .toolbar .chips::-webkit-scrollbar { display: none; }
  .toolbar .chip { flex: 0 0 auto; min-height: 40px; }
}

/* ── LA GRILLE : auto 1→2→3 colonnes, jamais de scroll horizontal ── */
.deck { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .deck { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .deck { grid-template-columns: repeat(3, 1fr); } }
.deck--empty { display: block; }
.deck .empty { padding: 40px 20px; text-align: center; color: var(--ink-dim);
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .04em; }

/* ── CARTE LICENCE — COMPACTE : head visible (1 ligne), corps déplié au tap ── */
#licDeck { grid-template-columns: 1fr; gap: 8px; }      /* liste dense 1 colonne */
.lcard {
  position: relative; display: block; min-width: 0; overflow: hidden;
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  border: 1px solid var(--stroke); border-radius: var(--r); box-shadow: var(--shadow);
  transition: border-color .25s var(--ease);
}
.lcard:hover, .lcard.open { border-color: var(--stroke-2); }
.lcard.is-revoked { opacity: .8; }
.lcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--emerald); opacity: .85; }
.lcard.is-revoked::before { background: var(--red); }
.lcard__head { display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 15px; cursor: pointer; }
.lcard__head .st-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.lcard__head .st-dot.ok { background: var(--emerald); box-shadow: 0 0 7px rgba(62, 224, 166, .55); }
.lcard__head .st-dot.bad { background: var(--red); }
.lcard__head .lic-key { flex: 0 1 auto; min-height: 40px; max-width: 58%; overflow: hidden; }
.lcard__head .lic-key .k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcard__head .exp-chip {
  flex: 0 0 auto; font-family: var(--f-mono); font-size: 11px; padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .28); border: 1px solid var(--stroke); color: var(--ink-dim); white-space: nowrap;
}
.lcard__head .exp-chip.exp-unl { color: var(--violet-2); border-color: rgba(201, 139, 255, .3); }
.lcard__head .exp-chip.exp-soon { color: var(--amber); border-color: rgba(255, 168, 58, .35); }
.lcard__head .exp-chip.exp-dead { color: var(--red); border-color: rgba(255, 107, 107, .35); }
.lcard__head .note-peek { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-faint); text-align: right; }
.lcard__head .note-peek.empty { opacity: .4; }
.lcard__head .chev { flex: 0 0 auto; width: 15px; height: 15px; color: var(--ink-dim); transition: transform .25s var(--ease); }
.lcard.open .lcard__head .chev { transform: rotate(180deg); }
.lcard__body { display: none; flex-direction: column; gap: 12px; padding: 2px 15px 15px; }
.lcard.open .lcard__body { display: flex; }

/* ── ONGLET PROMO : post Facebook copiable ── */
.promo-post {
  white-space: pre-wrap; word-break: break-word; font-family: var(--f-body); font-size: 14px; line-height: 1.6;
  color: var(--ink); background: rgba(0, 0, 0, .28); border: 1px solid var(--stroke); border-radius: var(--r);
  padding: 16px 18px; margin: 0; max-height: 60vh; overflow: auto;
}

/* clé masquée = bouton tactile plein qui copie la clé complète */
.lic-key {
  appearance: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 14px; cursor: pointer;
  font-family: var(--f-mono); font-size: 14px; letter-spacing: .04em; color: var(--ink);
  background: rgba(0, 0, 0, .35); border: 1px solid var(--stroke-2); border-radius: 10px;
  transition: border-color .2s, background .2s;
}
.lic-key:hover, .lic-key:active { border-color: var(--amber); background: var(--glass-2); }
.lic-key .k { flex: 1 1 auto; min-width: 0; }
.lic-key .copy-hint { color: var(--amber); font-size: 13px; flex: 0 0 auto; }

/* méta : plan / expire / hwid — 2 colonnes, passe à 1 si trop étroit (minmax 0 = anti-débordement) */
.lcard__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.lcard__meta .cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lcard__meta .cell.wide { grid-column: 1 / -1; }
.lcard__meta .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.lcard__meta .v { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcard__meta .v.mono { font-family: var(--f-mono); }
.lcard__meta .v.exp-unl { color: var(--violet-2); }   /* illimitée */
.lcard__meta .v.exp-soon { color: var(--amber); }      /* expire < 7 j */
.lcard__meta .v.exp-dead { color: var(--red); }        /* expirée */

/* ── ÉDITION INLINE NOTE : pencil → champ + valider/annuler (toggle .editing sur .note-row) ── */
.note-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.note-row .note-text { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.note-row .note-text.empty { color: var(--ink-faint); font-style: italic; }
.note-edit-btn {
  appearance: none; flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--stroke); border-radius: 9px; background: var(--glass); color: var(--ink-dim); cursor: pointer; transition: .2s;
}
.note-edit-btn:hover { color: var(--amber); border-color: var(--amber); }
.note-edit-btn svg { width: 15px; height: 15px; stroke: currentColor; }
.note-row.editing .note-text, .note-row.editing .note-edit-btn { display: none; }
.note-row .note-form { display: none; gap: 6px; width: 100%; align-items: center; }
.note-row.editing .note-form { display: flex; }
.note-row .note-form input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 10px 12px;
  font-family: var(--f-body); font-size: 14px; color: var(--ink);
  background: rgba(0, 0, 0, .4); border: 1px solid var(--amber); border-radius: 9px;
  outline: none; box-shadow: 0 0 0 3px var(--amber-glow);
}
.note-row .note-form .ok-btn, .note-row .note-form .cancel-btn {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 9px; cursor: pointer; border: 1px solid var(--stroke-2); background: var(--glass); font-size: 16px; transition: .2s;
}
.note-row .note-form .ok-btn { color: var(--emerald); border-color: rgba(62, 224, 166, .4); }
.note-row .note-form .ok-btn:hover { background: rgba(62, 224, 166, .12); }
.note-row .note-form .cancel-btn { color: var(--ink-dim); }
.note-row .note-form .cancel-btn:hover { color: var(--red); border-color: var(--red); }

/* ── ÉDITION INLINE DURÉE : presets + champ jours + Illimité ── */
.dur-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dur-edit .preset {
  appearance: none; min-height: 38px; padding: 0 12px; cursor: pointer;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .03em; color: var(--ink-dim);
  background: var(--glass); border: 1px solid var(--stroke-2); border-radius: var(--r-pill); transition: .2s;
}
.dur-edit .preset:hover { color: #1a1100; background: var(--amber); border-color: var(--amber); }
.dur-edit .preset.unl { color: var(--violet-2); border-color: rgba(201, 139, 255, .35); }
.dur-edit .preset.unl:hover { color: #fff; background: var(--violet); border-color: var(--violet); }
.dur-edit .days-wrap { display: inline-flex; align-items: center; gap: 4px; }
.dur-edit input.days {
  width: 66px; min-height: 38px; padding: 6px 10px; text-align: center;
  font-family: var(--f-mono); font-size: 13px; color: var(--ink);
  background: rgba(0, 0, 0, .4); border: 1px solid var(--stroke-2); border-radius: 9px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.dur-edit input.days:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
.dur-edit input.days::-webkit-outer-spin-button, .dur-edit input.days::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dur-edit .days-unit { font-family: var(--f-mono); font-size: 11px; color: var(--ink-faint); }
.dur-edit .apply {
  appearance: none; min-height: 38px; padding: 0 14px; cursor: pointer;
  font-family: var(--f-body); font-weight: 600; font-size: 12.5px; color: #1a1100;
  background: linear-gradient(120deg, var(--amber), var(--amber-deep));
  border: 0; border-radius: var(--r-pill); transition: transform .2s, box-shadow .2s; box-shadow: 0 4px 14px var(--amber-glow);
}
.dur-edit .apply:hover { transform: translateY(-1px); box-shadow: 0 8px 22px var(--amber-glow); }

/* ── ACTIONS de la carte : grosses cibles ≥44px, wrap propre ── */
.lcard__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--stroke); }
.lcard__actions .mini {
  min-height: 42px; font-size: 12.5px; padding: 7px 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}

/* flash vert d'une carte après édition réussie */
.lcard.saved { animation: savedFlash .9s var(--ease); }
@keyframes savedFlash {
  0% { box-shadow: var(--shadow), 0 0 0 2px rgba(62, 224, 166, 0); }
  30% { box-shadow: var(--shadow), 0 0 0 2px rgba(62, 224, 166, .55); }
  100% { box-shadow: var(--shadow), 0 0 0 2px rgba(62, 224, 166, 0); }
}

/* ── CARTE ACTIVITÉ (journal) : même deck, plus compacte ── */
.acard {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  border: 1px solid var(--stroke); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow);
}
.acard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acard__who { font-family: var(--f-mono); font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard__who.muted { color: var(--ink-faint); }
.acard__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 12.5px; color: var(--ink-dim); }
.acard__meta .mono { font-family: var(--f-mono); font-size: 12px; }
.acard__meta .tnum { color: var(--ink); }
.acard__meta .ua { width: 100%; font-size: 11px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── MOBILE fin (≤480px) : actions pleine largeur, tri pleine largeur ── */
@media (max-width: 480px) {
  .lcard, .acard { padding: 14px; }
  .lcard__actions { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .lcard__actions .mini { min-height: 40px; font-size: 12px; padding: 6px 4px; }
  .toolbar .sort { flex: 1 1 100%; }
  .toolbar .count { margin-left: 0; }
  .dur-edit { gap: 6px 5px; }
  .dur-edit .preset { min-height: 34px; padding: 0 10px; font-size: 11px; }
  .tier-edit .chip { flex: 1 1 auto; min-height: 36px; }
}

/* ── ACCESSIBILITÉ mouvement ── */
@media (prefers-reduced-motion: reduce) {
  .lcard, .lcard:hover { transition: none; transform: none; }
  .lcard.saved { animation: none; }
}

/* tableau "Activité récente" (overview) + modale #ipModal : scroll-x propre, cibles lisibles */
@media (max-width: 820px) {
  .tablewrap { -webkit-overflow-scrolling: touch; }
  .tablewrap table { font-size: 13px; }
  .tablewrap th, .tablewrap td { padding: 11px 12px; }
  #ipModal .glass.card { padding: 16px; }
}

/* ===== EFFETS AVANCÉS : spotlight curseur, tilt 3D, bordure conique animée ===== */
@property --bm-ang { syntax: "<angle>"; inherits: false; initial-value: 130deg; }
.spotlight { position: fixed; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 26%), rgba(255, 180, 58, .10), transparent 62%); }
.features, .games { perspective: 1200px; }
.game { transition: transform .14s ease-out, box-shadow .45s var(--ease), border-color .45s; transform-style: preserve-3d; }
/* reflet doux qui suit le curseur sur la carte */
.feat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .14), transparent 55%); }
.feat:hover::before { opacity: 1; }
/* bordure : dégradé conique qui balaie au survol */
.feat::after { background: conic-gradient(from var(--bm-ang), transparent, var(--amber) 12%, transparent 32%, transparent 66%, var(--violet) 88%, transparent); }
.feat:hover::after { opacity: .95; animation: bm-rotate 4.5s linear infinite; }
@keyframes bm-rotate { to { --bm-ang: 490deg; } }
/* lueur de fond qui pulse derrière la grille de features */
.features::before { content: ""; position: absolute; left: 50%; top: 40%; width: 70%; height: 60%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--amber-glow), transparent 70%); filter: blur(60px); opacity: .5; animation: pulseGlow 6s var(--ease) infinite alternate; }
#features { position: relative; }
@media (prefers-reduced-motion: reduce) { .feat:hover::after, .features::before { animation: none; } .spotlight { display: none; } }

/* ===== LOGO image (marque sur nav + hero) ===== */
.brand__logo { height: 30px; width: auto; display: block; filter: drop-shadow(0 4px 16px var(--amber-glow)); transition: transform .4s var(--ease-spring); }
.brand:hover .brand__logo { transform: scale(1.05); }
.hero__logo { width: min(560px, 90vw); height: auto; margin: 6px auto 14px; filter: drop-shadow(0 18px 64px var(--amber-glow)); animation: float 6s var(--ease) infinite alternate; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .hero__logo { animation: none; } }

/* ===== sélecteur de langue (dropdown drapeaux) ===== */
.lang { position: relative; }
#langLabel { font-size: 15px; line-height: 1; }
.lang__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 172px; display: none; flex-direction: column; gap: 2px; padding: 6px; z-index: 1000;
  background: rgba(12, 12, 18, .97); backdrop-filter: blur(var(--blur-lg)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(140%);
  border: 1px solid var(--stroke-2); border-radius: 14px; box-shadow: var(--shadow-lift); }
.lang__menu.open { display: flex; animation: lang-in .2s var(--ease); }
@keyframes lang-in { from { opacity: 0; transform: translateY(-6px); } }
.lang__menu button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-dim); font: 500 14px/1 var(--f-body); cursor: pointer; text-align: left; transition: .15s; }
.lang__menu button span { font-size: 18px; }
.lang__menu button:hover { background: var(--glass-2); color: var(--ink); }
.lang__menu button[aria-current="true"] { color: var(--amber); }

/* ============ CONVERSION / GROWTH ============ */

/* Bandeau promo sticky — dark glassy discret, compte à rebours evergreen */
.promobar { position: sticky; top: 0; z-index: 90; display: flex; gap: 9px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 9px 42px 9px 16px; font-size: 13px; color: var(--ink-dim); background: rgba(10, 11, 16, .82); backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid rgba(255, 180, 58, .16); }
.promobar__tag { font-family: var(--f-mono); font-weight: 700; font-size: 11px; letter-spacing: .04em; color: #1a1100; background: linear-gradient(120deg, var(--amber), var(--amber-deep)); padding: 3px 9px; border-radius: var(--r-pill); }
.promobar b { color: var(--amber); font-weight: 700; font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.promobar__sep { color: var(--ink-faint); }
.promobar__cta { color: var(--amber); text-decoration: none; font-weight: 600; white-space: nowrap; border-bottom: 1px solid rgba(255, 180, 58, .45); transition: border-color .15s; }
.promobar__cta:hover { border-bottom-color: var(--amber); }
.promobar__x { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); cursor: pointer; opacity: .45; font-size: 18px; line-height: 1; color: var(--ink-dim); transition: opacity .15s; }
.promobar__x:hover { opacity: 1; }
@media (max-width: 560px) { .promobar { font-size: 12px; gap: 7px; } .promobar__sep { display: none; } }

/* Hero kicker + badge "à jour" */
.hero__kicker { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin: 0 0 12px; }
.tag--live { background: rgba(62, 224, 166, .12); color: var(--emerald); border: 1px solid rgba(62, 224, 166, .35); display: inline-flex; gap: 6px; align-items: center; }
.tag--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 8px var(--emerald); animation: pulseGlow 2s infinite alternate; }
.cta-sub { display: block; width: 100%; text-align: center; font-family: var(--f-mono); font-size: 11px; color: var(--ink-faint); margin-top: 12px; letter-spacing: .04em; }

/* Bande de preuve sociale (compteurs) */
.proof-strip { padding: 8px 0 6px; }
.proof-strip .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.proof-strip .stat { text-align: center; padding: 18px 12px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--stroke); }
.proof-strip .v { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.5rem, 5vw, 2.1rem); color: var(--ink); font-variant-numeric: tabular-nums; }
.proof-strip .v.ok { color: var(--emerald); }
.proof-strip .k { font-size: 12px; color: var(--ink-dim); margin-top: 4px; }

/* Avis / témoignages */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.review { padding: 22px; }
.review__stars { color: var(--amber); letter-spacing: 2px; margin-bottom: 10px; font-size: 14px; }
.review p { color: var(--ink); font-size: .95rem; line-height: 1.55; margin: 0; }
.review__who { display: flex; gap: 11px; align-items: center; margin-top: 16px; }
.review__av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; color: #14101a; background: linear-gradient(135deg, var(--amber), var(--violet)); flex: 0 0 auto; }
.review__who strong { display: block; font-size: .9rem; }
.review__date { font-family: var(--f-mono); font-size: 10.5px; color: var(--emerald); }

/* Aéroglass étendu aux cartes (reflet diagonal lent + frost) — respecte le code couleur */
.step, .proof-strip .stat {
  background-image: linear-gradient(180deg, var(--glass-2), var(--glass)), linear-gradient(118deg, transparent 44%, rgba(255, 255, 255, .045) 50%, transparent 56%);
  background-size: 100% 100%, 280% 100%; background-repeat: no-repeat; animation: glassFlow 22s linear infinite;
  backdrop-filter: blur(var(--blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
}
@media (prefers-reduced-motion: reduce) {
  .glass, .section h2 em, .step, .proof-strip .stat { animation: none; }
}

/* ===== Carrousel fonctionnalités (swipe horizontal) ===== */
.carousel { position: relative; }
.features { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 8px 2px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.features::-webkit-scrollbar { display: none; }
.features::before { display: none; }
.feat { scroll-snap-align: center; flex: 0 0 clamp(262px, 78vw, 318px); }
.carousel__arrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 6; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--stroke-2); background: rgba(10, 10, 14, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: .2s var(--ease); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.carousel__arrow:hover { border-color: var(--amber); color: var(--amber); transform: translateY(-50%) scale(1.06); }
.carousel__arrow[disabled] { opacity: .2; pointer-events: none; }
.carousel__arrow--prev { left: -8px; }
.carousel__arrow--next { right: -8px; }
.carousel__dots { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.carousel__dots button { width: 8px; height: 8px; border-radius: var(--r-pill); border: 0; padding: 0; background: var(--stroke-2); cursor: pointer; transition: .25s var(--ease); }
.carousel__dots button.on { background: var(--amber); width: 24px; box-shadow: 0 0 10px var(--amber-glow); }
@media (max-width: 800px) { .carousel__arrow { width: 30px; height: 30px; font-size: 13px; } .feat { flex-basis: 80vw; } }

/* Prix barré dans l'en-tête comparatif Premium */
.cv-price { display: block; font-family: var(--f-mono); font-size: 11px; margin-top: 3px; }
.cv-price s { color: var(--ink-faint); }
.cv-price b { color: var(--amber); font-weight: 700; }

/* CTA mobile permanent */
.mobile-cta { display: none; }
@media (max-width: 900px) {
  .mobile-cta { display: inline-flex; position: fixed; left: 14px; right: 62px; bottom: 14px; z-index: 70; justify-content: center; gap: 8px; }
  .mobile-cta b { font-family: var(--f-display); }
}
@media (prefers-reduced-motion: reduce) {
  .tag--live::before, .sale-pop__dot { animation: none; }
}

/* ── Game picker nav button ── */
.game-pick-nav { display:flex; align-items:center; gap:5px; padding:5px 12px; border:1px solid var(--stroke-2); border-radius:999px; background:var(--glass); color:var(--ink); font-size:13px; font-weight:500; cursor:pointer; transition:.15s; white-space:nowrap; }
.game-pick-nav:hover { border-color:var(--amber); color:var(--amber); }
.game-pick-nav svg { transition:transform .2s; }
.game-pick-nav[aria-expanded="true"] svg { transform:rotate(180deg); }
@media (max-width:640px) { .game-pick-nav .gpnav-label { display:none; } }

/* ── Full-screen game picker overlay ── */
body.gamepick-open { overflow: hidden; }
.gamepick {
  position:fixed; inset:0; z-index:250; display:block;
  background:#020407;
  animation:gpFadeIn .2s ease; overflow:hidden;
  font-family:var(--f-body), system-ui, sans-serif;
}
.gamepick[hidden] { display:none; }
@keyframes gpFadeIn { from{opacity:0} to{opacity:1} }
.gamepick__close {
  position:absolute; top:16px; right:16px; z-index:12; width:42px; height:42px;
  border:1px solid rgba(216,116,46,.42); border-radius:50%;
  background:linear-gradient(145deg,rgba(216,116,46,.18),rgba(5,8,12,.68));
  color:#fff;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  font-size:22px; line-height:1; cursor:pointer; transition:.15s;
  box-shadow:0 14px 34px rgba(0,0,0,.42),0 0 0 1px rgba(216,116,46,.12);
}
.gamepick__close:hover { color:#06100f; background:var(--arcane); border-color:var(--arcane); }
.gamepick__langs {
  position:absolute; top:16px; left:16px; z-index:12; display:flex; align-items:center; gap:7px;
  padding:6px; border:1px solid rgba(216,116,46,.34); border-radius:999px;
  background:linear-gradient(145deg,rgba(216,116,46,.16),rgba(5,8,12,.62));
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 18px 44px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);
}
.gamepick__lang {
  width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.14); background:rgba(4,7,11,.54);
  font-size:18px; line-height:1; cursor:pointer; transition:.16s var(--ease);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.gamepick__lang:hover,
.gamepick__lang.is-active {
  border-color:var(--arcane); background:linear-gradient(180deg,rgba(216,116,46,.34),rgba(216,116,46,.14));
  transform:translateY(-1px); box-shadow:0 0 0 1px var(--arcane-glow),0 10px 24px rgba(0,0,0,.32);
}
.gamepick__shell { position:relative; width:100%; height:100%; min-height:100dvh; }
.gamepick__eyebrow {
  position:absolute; top:28px; left:50%; z-index:8; transform:translateX(-50%);
  font-family:var(--f-mono), monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--arcane); margin:0; text-align:center;
  padding:8px 12px; border:1px solid rgba(216,116,46,.26); border-radius:999px;
  background:rgba(5,8,12,.42); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.gamepick__title {
  position:absolute; top:72px; left:50%; z-index:8; transform:translateX(-50%);
  width:min(92vw,520px); padding:13px 18px 15px; border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(5,8,12,.54),rgba(5,8,12,.34));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  font-family:var(--f-display), var(--f-body), system-ui, sans-serif; font-size:clamp(1.65rem,4.2vw,3.1rem);
  font-weight:800; letter-spacing:0; line-height:1.02; color:#fff;
  margin:0; text-align:center; text-shadow:0 2px 22px rgba(0,0,0,.7);
}
.gamepick__stage { position:absolute; inset:0; z-index:1; }
.gamepick__viewport { position:absolute; inset:0; overflow:hidden; touch-action:pan-y; }
.gamepick__track { height:100%; display:flex; transition:transform .34s var(--ease); will-change:transform; }
.gamepick__card {
  position:relative; flex:0 0 100%; height:100%; min-height:100dvh;
  border:0; border-radius:0; overflow:hidden;
  background:#05080c; color:var(--ink); cursor:default; text-align:center;
  display:block; padding:0;
}
.gamepick__card::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(80% 56% at 50% 44%, rgba(0,0,0,0), rgba(0,0,0,.34) 70%, rgba(0,0,0,.62) 100%),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.03) 34%, rgba(2,4,7,.72) 100%);
}
.gamepick__thumb { position:absolute; inset:0; overflow:hidden; }
.gamepick__media { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.015); }
.gamepick__body {
  position:absolute; left:50%; bottom:clamp(128px,18vh,188px); z-index:4; transform:translateX(-50%);
  width:min(92vw,560px);
  display:grid; justify-items:center; gap:10px;
}
.gamepick__panel {
  display:grid; justify-items:center; gap:12px; width:100%; padding:20px 22px;
  border:1px solid rgba(255,255,255,.18); border-radius:18px;
  background:linear-gradient(180deg,rgba(5,8,12,.66),rgba(5,8,12,.42));
  -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 22px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
}
.gamepick__icon {
  width:54px; height:54px; border-radius:12px; overflow:hidden;
  border:1px solid rgba(216,116,46,.42); box-shadow:0 10px 28px rgba(0,0,0,.48);
}
.gamepick__icon img { width:100%; height:100%; object-fit:cover; display:block; }
.gamepick__name {
  font-family:var(--f-display), var(--f-body), system-ui, sans-serif; font-size:clamp(1.85rem,6vw,3.4rem);
  font-weight:800; letter-spacing:0; line-height:1; color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.9);
}
.gamepick__cta-line {
  display:inline-flex; align-items:center; justify-content:center; min-width:154px; min-height:44px;
  padding:0 24px; border:0; border-radius:999px; color:#06100f; cursor:pointer;
  background:linear-gradient(180deg,var(--arcane),var(--arcane-2));
  font-family:var(--f-body), system-ui, sans-serif; font-size:14px; font-weight:800;
  box-shadow:0 10px 28px var(--arcane-glow);
  transition:transform .16s var(--ease), box-shadow .16s, filter .16s;
}
.gamepick__cta-line:hover { transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 16px 36px var(--arcane-glow); }
.gamepick__cta-line:active { transform:translateY(0) scale(.99); }
.gamepick__arrow {
  position:absolute; top:50%; z-index:9; width:66px; height:66px; border-radius:50%;
  border:1px solid rgba(216,116,46,.48);
  background:linear-gradient(145deg,rgba(216,116,46,.22),rgba(5,8,12,.64)); color:#fff; display:grid; place-items:center;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  cursor:pointer; transition:.15s; box-shadow:0 18px 48px rgba(0,0,0,.5),0 0 0 1px rgba(216,116,46,.18);
  transform:translateY(-50%);
}
.gamepick__arrow--prev { left:clamp(16px,4vw,44px); }
.gamepick__arrow--next { right:clamp(16px,4vw,44px); }
.gamepick__arrow:hover { background:var(--arcane); color:#06100f; border-color:var(--arcane); transform:translateY(-50%) scale(1.04); }
.gamepick__dots {
  position:absolute; left:50%; bottom:52px; z-index:10; transform:translateX(-50%);
  display:flex; justify-content:center; gap:10px; width:min(94vw,560px);
}
.gamepick__dot {
  position:relative; width:31%; min-width:0; height:68px; border:1px solid rgba(255,255,255,.22);
  border-radius:12px; padding:0; overflow:hidden; background:rgba(5,8,12,.48);
  color:#fff; cursor:pointer; transition:.18s; box-shadow:0 12px 34px rgba(0,0,0,.38);
}
.gamepick__dot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; transition:.18s; }
.gamepick__dot span {
  position:absolute; left:6px; right:6px; bottom:6px; z-index:1;
  padding:4px 6px; border-radius:8px;
  background:rgba(2,4,7,.56); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-family:var(--f-display), var(--f-body), system-ui, sans-serif; font-size:12px; font-weight:800;
  line-height:1.05; text-shadow:0 1px 8px rgba(0,0,0,.72);
}
.gamepick__dot.is-active { border-color:var(--arcane); box-shadow:0 0 0 1px var(--arcane-glow),0 14px 38px rgba(0,0,0,.5); }
.gamepick__dot.is-active img { opacity:.9; transform:scale(1.04); }
.gamepick__brand {
  position:absolute; left:50%; bottom:14px; z-index:10; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px; color:#fff;
  font-family:var(--f-display), var(--f-body), system-ui, sans-serif; font-size:15px; font-weight:800;
  text-shadow:0 2px 14px rgba(0,0,0,.8);
}
.gamepick__brand img { width:28px; height:28px; object-fit:contain; filter:drop-shadow(0 4px 12px rgba(0,0,0,.45)); }
@media (max-width:580px) {
  .gamepick__close { top:12px; right:12px; width:38px; height:38px; }
  .gamepick__langs { top:12px; left:12px; gap:4px; padding:4px; }
  .gamepick__lang { width:31px; height:31px; font-size:16px; }
  .gamepick__eyebrow { top:20px; font-size:9.5px; padding:7px 10px; }
  .gamepick__title { top:60px; width:min(86vw,360px); padding:11px 14px 12px; font-size:1.58rem; border-radius:13px; }
  .gamepick__body { bottom:146px; width:min(84vw,340px); }
  .gamepick__panel { padding:16px 16px 17px; border-radius:16px; gap:9px; }
  .gamepick__icon { width:46px; height:46px; border-radius:11px; }
  .gamepick__name { font-size:clamp(1.65rem,8vw,2.25rem); }
  .gamepick__cta-line { min-width:142px; min-height:42px; font-size:13.5px; }
  .gamepick__arrow { width:54px; height:54px; }
  .gamepick__arrow--prev { left:12px; }
  .gamepick__arrow--next { right:12px; }
  .gamepick__dots { bottom:54px; width:calc(100vw - 20px); gap:7px; }
  .gamepick__dot { height:62px; border-radius:10px; }
  .gamepick__dot span { font-size:10.8px; left:4px; right:4px; bottom:4px; padding:4px 4px; }
  .gamepick__brand { bottom:13px; font-size:13px; }
  .gamepick__brand img { width:24px; height:24px; }
}

/* ── Game dropdown nav ── */
.game-drop { position: relative; }
.game-drop__btn { display: flex; align-items: center; gap: 7px; padding: 5px 14px 5px 6px; border: 1.5px solid rgba(255,180,58,.5); border-radius: 999px; background: rgba(255,180,58,.09); color: var(--amber); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: .15s; white-space: nowrap; }
.game-drop__btn:hover, .game-drop__btn[aria-expanded="true"] { border-color: var(--amber); background: rgba(255,180,58,.16); }
.game-drop__btn svg { transition: transform .2s; }
.game-drop__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.game-drop__icon { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.game-drop__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; background: #14141c; border: 1px solid var(--stroke-2); border-radius: 12px; padding: 5px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 16px 48px rgba(0,0,0,.6); z-index: 100; animation: dropIn .15s ease; }
.game-drop__menu[hidden] { display: none; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
.game-drop__item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 8px; text-align: left; font-size: 13.5px; font-weight: 500; color: var(--ink-dim); background: none; border: none; cursor: pointer; transition: .12s; width: 100%; }
.game-drop__item img { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.game-drop__item:hover { background: rgba(255,255,255,.07); color: var(--ink); }
.game-drop__item.is-active { color: var(--amber); background: rgba(255,180,58,.08); }

/* ── In-page game picker (toujours visible, avec flèches) ── */
.game-picker { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 40px; }
.game-picker__tabs { display: flex; max-width:min(100%,760px); overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; -webkit-overflow-scrolling:touch; background: var(--glass); border: 1px solid var(--stroke-2); border-radius: 999px; padding: 5px; gap: 5px; }
.game-picker__tab { display: flex; align-items: center; gap: 10px; padding: 8px 22px 8px 8px; border-radius: 999px; border: none; background: none; color: var(--ink-dim); font-family: var(--f-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: .2s; white-space: nowrap; }
.game-picker__tab img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: .2s; }
.game-picker__tab.active { background: var(--amber); color: #1a1100; box-shadow: 0 2px 14px rgba(255,180,58,.35); }
.game-picker__tab.active img { box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.game-picker__tab:not(.active):hover { color: var(--ink); background: var(--glass-2); }
.game-picker__tab:not(.active):hover img { transform: scale(1.06); }
.game-picker__arrow { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--stroke-2); background: var(--glass); color: var(--ink-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .15s; }
.game-picker__arrow:hover { border-color: var(--amber); color: var(--amber); background: rgba(255,180,58,.1); transform: scale(1.06); }
@media (max-width: 480px) { .game-picker__tab { padding: 7px 16px 7px 7px; font-size: 13px; } .game-picker__tab img { width: 30px; height: 30px; } .game-picker { gap: 8px; } }

/* ── Game hint (first-visit tooltip) ── */
.game-hint { display: none; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); width: 250px; background: linear-gradient(145deg, #0f0f18 0%, #160e06 100%); border: 1.5px solid var(--amber); border-radius: 14px; padding: 14px 16px 12px; z-index: 400; box-shadow: 0 16px 48px rgba(0,0,0,.75), 0 0 0 1px rgba(255,180,58,.12); }
.game-hint.visible { display: block; animation: hintIn .32s cubic-bezier(.34,1.5,.64,1) forwards; }
.game-hint::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top: none; border-bottom-color: var(--amber); }
@keyframes hintIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.94); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
.game-hint__close { position: absolute; top: 7px; right: 9px; background: none; border: none; color: var(--ink-faint); font-size: 13px; line-height: 1; padding: 3px 5px; cursor: pointer; border-radius: 4px; transition: .12s; }
.game-hint__close:hover { color: var(--ink-dim); }
.game-hint__title { display: block; font-size: 13px; font-weight: 700; color: var(--amber); margin: 0 18px 5px 0; letter-spacing: .01em; }
.game-hint__msg { font-size: 12.5px; color: var(--ink-dim); margin: 0 0 10px; line-height: 1.45; }
.game-hint__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.game-hint__tags span { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(255,180,58,.1); border: 1px solid rgba(255,180,58,.28); color: var(--amber); }
.game-drop__btn.hint-active { box-shadow: 0 0 0 3px rgba(255,180,58,.35); animation: hintPulse 2s ease-in-out infinite; }
@keyframes hintPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(255,180,58,.35); } 50% { box-shadow: 0 0 0 5px rgba(255,180,58,.15); } }
@media (max-width: 520px) { .game-hint { left: auto; right: 0; transform: none; } .game-hint::before { left: auto; right: 20px; transform: none; } @keyframes hintIn { from { opacity: 0; transform: translateY(-10px) scale(.94); } to { opacity: 1; transform: none; } } }

/* ── Nav actions (icons) ── */
.nav-actions { display: flex; align-items: center; gap: 6px; }
.nav-icon-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--stroke-2); background: rgba(255,255,255,.06); color: var(--ink); cursor: pointer; transition: .15s; text-decoration: none; }
.nav-icon-btn:hover { border-color: var(--amber); color: var(--amber); background: rgba(255,180,58,.1); }

/* ── Resend modal ── */
.resend-modal { display: none; position: fixed; inset: 0; z-index: 200; place-items: center; padding: 20px; background: rgba(5,6,9,.88); backdrop-filter: blur(16px); }
.resend-modal.show { display: grid; }
.resend-box { width: 100%; max-width: 400px; padding: 28px 26px; background: #111118; border: 1px solid var(--stroke-2); border-radius: 20px; box-shadow: 0 24px 80px rgba(0,0,0,.65); animation: upsellIn .28s cubic-bezier(.34,1.3,.64,1); position: relative; }
.resend-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--ink-dim); font-size: 20px; cursor: pointer; padding: 4px 7px; border-radius: 7px; transition: .15s; }
.resend-close:hover { color: var(--ink); background: rgba(255,255,255,.07); }
.resend-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,180,58,.1); border: 1px solid rgba(255,180,58,.25); display: flex; align-items: center; justify-content: center; color: var(--amber); margin: 0 0 16px; }
.resend-box h3 { margin: 0 0 8px; font-family: var(--f-display); font-size: 1.3rem; color: var(--ink); }
.resend-box p { margin: 0 0 18px; font-size: 13.5px; color: var(--ink-dim); line-height: 1.55; }
.resend-input { width: 100%; padding: 11px 14px; border: 1px solid var(--stroke-2); border-radius: 10px; background: rgba(255,255,255,.05); color: var(--ink); font-size: 14px; margin-bottom: 10px; box-sizing: border-box; transition: border-color .15s; outline: none; }
.resend-input:focus { border-color: var(--amber); }
.resend-submit { width: 100%; }
.resend-msg { display: none; margin: 10px 0 0; font-size: 13px; text-align: center; }
.resend-msg.ok { color: #34d399; }
.resend-msg.err { color: #f87171; }

/* ============================================================================
   v13 — WOW LAYER : mesh hero animé, micro-interactions, glow, scroll-reveal
   ========================================================================== */

/* ---- keyframes nommés (réutilisables) ---- */
@keyframes shimmerText { to { background-position: 220% center; } }
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 168, 58, .0), 0 14px 42px rgba(255, 168, 58, .28); }
  50% { box-shadow: 0 0 0 6px rgba(255, 168, 58, .10), 0 22px 70px rgba(255, 168, 58, .48); }
}
@keyframes slide-up-fade { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } }
@keyframes meshDrift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%; }
  50%  { background-position: 60% 40%, 40% 60%, 30% 20%, 80% 70%; }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%; }
}
@keyframes badgeShine { to { background-position: 200% center; } }
@keyframes btnSweep { 0% { transform: translateX(-130%) skewX(-18deg); } 60%, 100% { transform: translateX(230%) skewX(-18deg); } }

/* ---- HERO : voile mesh gradient animé (amber / violet / emerald) ---- */
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 150%; z-index: -1; pointer-events: none;
  opacity: .9; filter: blur(20px) saturate(135%);
  background:
    radial-gradient(38% 44% at 18% 22%, rgba(255, 168, 58, .34), transparent 70%),
    radial-gradient(36% 42% at 84% 16%, rgba(155, 123, 255, .32), transparent 70%),
    radial-gradient(40% 46% at 52% 92%, rgba(62, 224, 166, .20), transparent 72%),
    radial-gradient(30% 38% at 8% 78%, rgba(255, 138, 61, .22), transparent 72%);
  background-size: 180% 180%, 180% 180%, 180% 180%, 180% 180%;
  background-repeat: no-repeat;
  animation: meshDrift 24s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }

/* ---- HERO : titre textuel gradient + sous-titre bénéfice ---- */
.hero__h1 {
  font-family: var(--f-display); font-weight: 800; letter-spacing: -.035em; line-height: .98;
  font-size: clamp(2.3rem, 6.4vw, 4.6rem); margin: 14px auto 0; max-width: 14ch;
  background: linear-gradient(100deg, #fff 6%, var(--amber) 44%, var(--violet-2) 92%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmerText 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .hero__h1 { animation: none; } }

/* badge animé "live / à jour" en hero */
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--emerald); padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(62, 224, 166, .35); background: rgba(62, 224, 166, .08);
  animation: pulse-glow 3.4s ease-in-out infinite;
}
.hero__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 10px var(--emerald); }
@media (prefers-reduced-motion: reduce) { .hero__badge { animation: none; } }

/* prix visible sous le CTA primaire */
.btn__price { font-family: var(--f-mono); font-weight: 700; font-size: 12.5px; opacity: .82; }
.btn__price s { opacity: .55; font-weight: 400; margin-right: 5px; }

/* ---- BTN : sweep shine au survol ---- */
.btn > * { position: relative; z-index: 1; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-130%) skewX(-18deg); opacity: 0;
}
.btn:hover::after { opacity: 1; animation: btnSweep .9s var(--ease); }
.btn--ghost::after { background: linear-gradient(100deg, transparent, rgba(255, 180, 58, .25), transparent); }
@media (prefers-reduced-motion: reduce) { .btn:hover::after { animation: none; opacity: 0; } }

/* ---- GLASS / cartes : liseré supérieur ambre→violet + entrée douce ---- */
.glass, .price-card, .download-card, .game-panel, .step, .review {
  position: relative;
}
.price-card::before, .download-card::before, .step::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), var(--violet-2), transparent);
  opacity: 0; transition: opacity .4s var(--ease);
}
.price-card:hover::before, .download-card:hover::before, .step:hover::before { opacity: .9; }

/* ---- STAT numbers : plus gros + gradient ambre→violet clippé ---- */
.proof-strip .v {
  font-size: clamp(1.9rem, 6vw, 2.9rem); letter-spacing: -.02em;
  background: linear-gradient(110deg, var(--amber) 8%, var(--violet-2) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proof-strip .v.ok {
  background: linear-gradient(110deg, var(--emerald), #7df0c6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proof-strip .stat { transition: transform .35s var(--ease), border-color .35s; }
.proof-strip .stat:hover { transform: translateY(-4px); border-color: var(--stroke-2); }

/* ---- PRICE CARD featured : glow pulsant + badge "meilleur choix" spectaculaire ---- */
.price-card--featured {
  border-color: rgba(255, 180, 58, .55);
  animation: pulse-glow 3.6s ease-in-out infinite;
}
.price-card--featured::after {
  content: "⭐ Meilleur choix"; position: absolute; top: 14px; right: 14px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #1a1100; padding: 5px 11px; border-radius: var(--r-pill);
  background: linear-gradient(120deg, var(--amber), var(--violet-2), var(--amber));
  background-size: 220% auto; animation: badgeShine 3s linear infinite;
  box-shadow: 0 6px 20px rgba(255, 168, 58, .4);
}
@media (prefers-reduced-motion: reduce) {
  .price-card--featured { animation: none; }
  .price-card--featured::after { animation: none; }
}

/* ---- TÉMOIGNAGES ---- */
.testimonials .reviews { margin-top: 8px; }
.review {
  border-radius: var(--r-lg); border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--glass-2), var(--glass)); box-shadow: var(--shadow);
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.review:hover { transform: translateY(-5px); border-color: var(--stroke-2); box-shadow: var(--shadow-lift); }

/* ---- SCROLL REVEAL générique (intersection observer app.js) ---- */
[data-animate] { opacity: 0; will-change: opacity, transform; }
[data-animate].animated { animation: slide-up-fade .8s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1 !important; }
  [data-animate].animated { animation: none; }
}

/* ---- MOBILE : barre CTA sticky en bas (glassmorphism) ---- */
.sticky-cta { display: none; }
@media (max-width: 768px) {
  .sticky-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
    align-items: center; gap: 12px; padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
    background: rgba(10, 11, 16, .82); backdrop-filter: blur(var(--blur-lg)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(150%);
    border-top: 1px solid rgba(255, 180, 58, .22); box-shadow: 0 -10px 40px rgba(0, 0, 0, .5);
  }
  .sticky-cta__txt { flex: 1; min-width: 0; line-height: 1.2; }
  .sticky-cta__txt b { display: block; font-family: var(--f-display); font-size: .98rem; color: var(--ink); }
  .sticky-cta__txt span { font-family: var(--f-mono); font-size: 11px; color: var(--amber); }
  .sticky-cta .btn { flex: 0 0 auto; padding: 13px 22px; }
  /* laisse respirer le bas de page + remonte le rail dot-nav au-dessus de la barre */
  body { padding-bottom: 76px; }
  .secnav { bottom: auto; }
}

/* ============ TIER BLOCKS (section #features) — cards premium ============ */
.tier-stack { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: start; }
.tier-block {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 20px; border-radius: 16px; border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tier-block:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .18); }
.tier-block__icon { width: 48px; height: 48px; }
.tier-block__icon svg { display: block; width: 48px; height: 48px; }
.tier-block__header { display: flex; flex-direction: column; gap: 3px; }
.tier-block .tier-block__name { display: inline-flex; margin-bottom: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.tier-block .tier-block__tagline {
  display: block; margin-bottom: 0; font-family: var(--f-body); font-size: 12px; font-style: italic;
  letter-spacing: 0; text-transform: none; color: var(--ink-dim); line-height: 1.4;
}
.tier-block__features li::before {
  content: "\2713"; display: inline-block; width: auto; height: auto; margin-right: 8px;
  border-radius: 0; background: none; color: var(--emerald); font-weight: 700; vertical-align: 0;
}
.tier-block__features li:has(.risk-flag)::before { content: none; }

/* — Free : accent amber — */
.tier-block--free { border-top: 2px solid rgba(255, 180, 58, .4); }
.tier-block--free .tier-block__name { color: var(--amber); }
.tier-block--free .tier-block__icon { filter: drop-shadow(0 0 12px rgba(255, 180, 58, .38)); }
.tier-block--free:hover { box-shadow: 0 14px 36px rgba(255, 180, 58, .10); }

/* — Premium : accent violet, plan mis en avant — */
.tier-block--premium { border-top: 2px solid rgba(155, 123, 255, .5); transform: scale(1.03); }
.tier-block--premium:hover { transform: scale(1.03) translateY(-4px); box-shadow: 0 16px 44px rgba(155, 123, 255, .20); border-color: rgba(155, 123, 255, .38); }
.tier-block--premium .tier-block__name { color: var(--violet-2); }
.tier-block--premium .tier-block__icon { filter: drop-shadow(0 0 12px rgba(155, 123, 255, .32)); }
.tier-block .tier-block__badge {
  position: absolute; top: -10px; right: 12px; z-index: 1; display: inline-flex; margin-bottom: 0;
  padding: 4px 9px; border-radius: var(--r-pill); font-family: var(--f-mono); font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase; color: #1a1100; white-space: nowrap;
  background: linear-gradient(120deg, var(--amber), var(--violet-2)); box-shadow: 0 4px 14px rgba(155, 123, 255, .35);
}

/* — VIP : accent emerald, glow pulsant — */
.tier-block--vip {
  border-color: var(--stroke); border-top: 2px solid rgba(62, 224, 166, .5);
  background: linear-gradient(180deg, rgba(62, 224, 166, .07), rgba(255, 255, 255, .03));
  animation: tierVipPulse 3.2s ease-in-out infinite;
}
.tier-block--vip .tier-block__name { color: var(--emerald); }
.tier-block--vip .tier-block__icon { filter: drop-shadow(0 0 12px rgba(62, 224, 166, .35)); }
.tier-block--vip:hover { border-color: rgba(62, 224, 166, .4); }
@keyframes tierVipPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(62, 224, 166, 0); }
  50% { box-shadow: 0 10px 34px rgba(62, 224, 166, .18); }
}

@media (max-width: 980px) {
  .tier-block--premium { transform: none; }
  .tier-block--premium:hover { transform: translateY(-4px); }
}
@media (max-width: 768px) {
  .tier-stack { display: flex; flex-direction: column; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tier-block, .tier-block--premium { transition: none; }
  .tier-block:hover, .tier-block--premium:hover { transform: none; }
  .tier-block--premium { transform: none; }
  .tier-block--vip { animation: none; }
}

/* ── TIER COMPARISON TABLE ── */
.tier-table-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--stroke);background:rgba(255,255,255,.025);backdrop-filter:blur(10px);-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;margin-bottom:20px}
.tier-table{width:100%;border-collapse:collapse;font-size:13.5px}
.tier-table thead tr{border-bottom:1px solid var(--stroke)}
.tier-table th{padding:14px 12px;font-family:var(--f-body);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.tier-table th.tt-feat{text-align:left;color:var(--ink-dim);padding-left:16px}
.tier-table th.tt-free{color:var(--amber);text-align:center}
.tier-table th.tt-prem{color:#c4b0ff;text-align:center;background:rgba(155,123,255,.08)}
.tier-table th.tt-vip{color:var(--emerald);text-align:center}
.tt-rec{display:block;font-size:9px;font-weight:500;letter-spacing:.03em;color:rgba(196,176,255,.55);text-transform:none;margin-top:3px}
.tier-table tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s}
.tier-table tbody tr:last-child{border-bottom:none}
.tier-table tbody tr:hover{background:rgba(255,255,255,.03)}
.tier-table td{padding:12px;text-align:center;vertical-align:middle}
.tier-table td.tt-feat{text-align:left;padding-left:16px;color:var(--ink-dim);font-size:13px}
.tier-table td.tt-prem-col{background:rgba(155,123,255,.05)}
.tier-table td.tt-vip-col{background:rgba(62,224,166,.04)}
.tc{width:20px;height:20px;display:block;margin:0 auto;transform-origin:center;transition:transform .2s ease}
.tt-warn-note{display:block;font-size:10px;color:rgba(255,180,58,.6);margin-top:3px;font-style:italic;line-height:1.3}
@media(max-width:480px){
  .tier-table th,.tier-table td{padding:10px 8px}
  .tier-table td.tt-feat,.tier-table th.tt-feat{padding-left:12px;font-size:12px}
  .tier-table th{font-size:10px}
  .tc{width:18px;height:18px}
}

/* ============================================================================
   v15 — KINETIC LAYER : nebula aurora, cursor trail, tilt holographique,
   spring reveals, gradients ondoyants, boutons magnétiques, particules,
   highlight comparatif, transitions de page. Tout vanilla, reduced-motion safe.
   ========================================================================== */

/* ── 1. NEBULA AURORA — 3 blobs dérivant sur des ellipses désynchronisées ── */
.aurora { filter: blur(40px) saturate(130%); }
.aurora span { mix-blend-mode: screen; }
.aurora .a1 {
  width: 58vw; height: 58vw; left: -8%; top: -10%; opacity: .16;
  background: radial-gradient(circle, rgba(155, 123, 255, .9), transparent 62%);
  animation: nebula1 14s ease-in-out infinite alternate;
}
.aurora .a2 {
  width: 54vw; height: 54vw; right: -10%; top: -4%; opacity: .14;
  background: radial-gradient(circle, rgba(255, 168, 58, .9), transparent 62%);
  animation: nebula2 19s ease-in-out infinite alternate;
}
.aurora .a3 {
  width: 50vw; height: 50vw; left: 28%; bottom: -22%; opacity: .13;
  background: radial-gradient(circle, rgba(62, 224, 166, .85), transparent 64%);
  animation: nebula3 23s ease-in-out infinite alternate;
}
@keyframes nebula1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(36%, 20%, 0) scale(1.12); }
  66%  { transform: translate3d(18%, 48%, 0) scale(.96); }
  100% { transform: translate3d(44%, 12%, 0) scale(1.08); }
}
@keyframes nebula2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(-40%, 26%, 0) scale(1.1); }
  66%  { transform: translate3d(-16%, 52%, 0) scale(.94); }
  100% { transform: translate3d(-50%, 18%, 0) scale(1.14); }
}
@keyframes nebula3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(30%, -28%, 0) scale(1.12); }
  66%  { transform: translate3d(-22%, -14%, 0) scale(.95); }
  100% { transform: translate3d(20%, -40%, 0) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora .a1, .aurora .a2, .aurora .a3 { animation: none !important; }
}

/* ── 2. CURSOR TRAIL — 8 points lumineux à lag progressif (taille/couleur via JS) ── */
.cursor-dot {
  position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none;
  z-index: 9999; mix-blend-mode: screen; will-change: transform;
  transform: translate3d(-50%, -50%, 0);
}
@media (hover: none) { .cursor-dot { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .cursor-dot { display: none !important; } }

/* ── 3. TILT 3D HOLOGRAPHIQUE — piloté par --rx/--ry, reflet via .tilt-glare ── */
.bm-tilt {
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d; will-change: transform;
  transition: transform .12s ease;
}
.bm-tilt.bm-tilt--reset { transition: transform .6s ease; }
/* le tilt l'emporte sur les transform:hover existants (.review, .price-card…) */
.bm-tilt:hover { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.tilt-glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .10), transparent 60%);
}
.bm-tilt:hover .tilt-glare { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .bm-tilt { transform: none !important; transition: none !important; }
  .tilt-glare { display: none !important; }
}

/* ── 4. SPRING REVEAL — remplace slide-up-fade pour les éléments [data-animate] ── */
@keyframes springIn {
  0%   { opacity: 0; transform: translateY(32px) scale(.97); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.005); }
  80%  { transform: translateY(2px) scale(.999); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
[data-animate].animated { animation: springIn .6s cubic-bezier(.22, 1, .36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  [data-animate].animated { animation: none; }
}

/* ── 5. TITRES <em> — gradient amber→violet→emerald ondoyant ── */
.section h2 em, h2 em, h1 em {
  background: linear-gradient(90deg, var(--amber), var(--violet), var(--emerald), var(--amber));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradientShift 4s linear infinite; font-style: normal;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .section h2 em, h2 em, h1 em { animation: none; }
}

/* ── 6. BOUTONS MAGNÉTIQUES — halo lumineux qui suit la souris (--mx/--my locaux) ── */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .3s ease; border-radius: inherit;
  background: radial-gradient(130px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .35), transparent 60%);
}
.btn--ghost::before {
  background: radial-gradient(130px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 180, 58, .28), transparent 60%);
}
.btn:hover::before { opacity: 1; }
.btn.bm-magnet { transition: transform .18s ease-out, box-shadow .3s, background-position .6s var(--ease); }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .btn::before { display: none; }
  .btn.bm-magnet { transform: none !important; }
}

/* ── 7. PARTICULES FLOTTANTES — 12 éclats CSS purs dans le hero ── */
.hero__particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero__particles span {
  position: absolute; width: 3px; height: 3px; border-radius: 1px;
  opacity: .25; transform: rotate(45deg); will-change: transform, opacity;
}
.hero__particles span:nth-child(3n+1) { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }
.hero__particles span:nth-child(3n+2) { background: var(--violet); box-shadow: 0 0 6px var(--violet-glow); }
.hero__particles span:nth-child(3n+3) { background: var(--emerald); box-shadow: 0 0 6px rgba(62, 224, 166, .4); }
.hero__particles span:nth-child(1)  { left: 8%;  top: 70%; width: 4px; height: 4px; opacity: .35; animation: pfloat 11s ease-in-out -1s infinite; }
.hero__particles span:nth-child(2)  { left: 18%; top: 30%; opacity: .2;  animation: pfloat 8s  ease-in-out -3s infinite; }
.hero__particles span:nth-child(3)  { left: 27%; top: 82%; width: 2px; height: 2px; opacity: .18; animation: pfloat2 13s ease-in-out -2s infinite; }
.hero__particles span:nth-child(4)  { left: 38%; top: 20%; opacity: .3;  animation: pfloat 9s  ease-in-out -5s infinite; }
.hero__particles span:nth-child(5)  { left: 46%; top: 60%; width: 4px; height: 4px; opacity: .22; animation: pfloat2 14s ease-in-out -1s infinite; }
.hero__particles span:nth-child(6)  { left: 54%; top: 38%; opacity: .28; animation: pfloat 7s  ease-in-out -4s infinite; }
.hero__particles span:nth-child(7)  { left: 63%; top: 76%; width: 2px; height: 2px; opacity: .15; animation: pfloat2 12s ease-in-out -6s infinite; }
.hero__particles span:nth-child(8)  { left: 71%; top: 26%; opacity: .32; animation: pfloat 10s ease-in-out -2s infinite; }
.hero__particles span:nth-child(9)  { left: 79%; top: 64%; width: 4px; height: 4px; opacity: .24; animation: pfloat2 9s  ease-in-out -7s infinite; }
.hero__particles span:nth-child(10) { left: 86%; top: 44%; opacity: .2;  animation: pfloat 6s  ease-in-out -1s infinite; }
.hero__particles span:nth-child(11) { left: 92%; top: 78%; width: 2px; height: 2px; opacity: .26; animation: pfloat2 11s ease-in-out -3s infinite; }
.hero__particles span:nth-child(12) { left: 12%; top: 50%; opacity: .3;  animation: pfloat 12s ease-in-out -5s infinite; }
@keyframes pfloat  { 50% { transform: translateY(-26px) rotate(225deg); opacity: .5; } }
@keyframes pfloat2 { 50% { transform: translateY(22px)  rotate(-135deg); opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .hero__particles { display: none; } }

/* ── 9. HIGHLIGHT COMPARATIF — ligne illuminée + checkmarks animés ── */
.tier-table tbody tr { transition: background .2s ease; }
.tier-table tbody tr:hover { background: rgba(155, 123, 255, .06); }
.tier-table tbody tr:hover .tt-prem-col {
  background: rgba(155, 123, 255, .14);
  box-shadow: inset 0 0 22px rgba(155, 123, 255, .18);
}
.tier-table tbody tr:hover .tc { transform: scale(1.2) rotate(10deg); }
@media (prefers-reduced-motion: reduce) {
  .tier-table tbody tr:hover .tc { transform: none; }
}

/* ── 10. TRANSITIONS DE PAGE — entrée douce + sortie avant navigation ── */
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
main { animation: pageIn .35s ease both; }
body.bm-leaving { opacity: .4; transition: opacity .2s ease; }
body.bm-leaving main { opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; animation: none; }
@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  body.bm-leaving, body.bm-leaving main { opacity: 1; transform: none; transition: none; }
}


/* ===== v16 — URSA GRIMOIRE v2 (obsidienne & arcane froid) ===== */

:root{
  --bg:#06080b; --bg-2:#0a0e13;
  --ink:#dfe6ee; --ink-dim:#9aa6b4; --ink-faint:#5b6675;
  --steel:#aeb8c6; --steel-2:#6b7480; --gunmetal:#2b333d; --iron:#3a424c;
  --arcane:#d8742e; --arcane-2:#b8551f; --arcane-glow:rgba(216,116,46,.40);
  --rune:#8b7bff; --rune-2:#a594ff; --rune-glow:rgba(139,123,255,.34);
  --gold-whisper:#d8c48a; --gold-glow:rgba(216,196,138,.20);
  --emerald:#46d39a; --red:#e25b4a;
  /* legacy names re-teintés froid (l'ancien CSS les utilise partout) */
  --amber:#d8742e; --amber-2:#b8551f; --amber-deep:#8a3f12; --amber-glow:rgba(216,116,46,.40);
  --violet:#8b7bff; --violet-2:#a594ff; --violet-glow:rgba(139,123,255,.34);
  --blur:10px; --blur-lg:22px;
  --shadow:0 14px 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(190,200,214,.05); --shadow-lift:0 36px 90px rgba(0,0,0,.72);
  --glass:rgba(20,26,33,.55); --glass-2:rgba(30,38,47,.5);
  --stroke:rgba(174,184,198,.12); --stroke-2:rgba(174,184,198,.24);
  --r:10px; --r-lg:14px; --r-pill:999px; --r-frame:6px; --r-ornate:9px; --maxw:1180px;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --f-display:"Cinzel","Bricolage Grotesque",Georgia,serif; --f-body:"Sora",-apple-system,sans-serif; --f-mono:"Space Mono",ui-monospace,monospace;
  --rarity-common:#aeb8c6; --rarity-epic:#a594ff; --rarity-legend:#d8c48a;
  --metal-steel:linear-gradient(180deg,#cfd6df,#8a94a1 42%,#3f4751 55%,#9aa3b0 80%,#e6ebf1);
  --metal-gun:linear-gradient(180deg,#3a424c,#262d35 45%,#11151a 55%,#2e353d 80%,#454d57);
  --engrave:0 -1px 1px rgba(0,0,0,.85),0 1px 0 rgba(190,200,214,.10);
  --frame-forge:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20240%20240%27%3E%0A%20%3Cdefs%3E%0A%20%20%3ClinearGradient%20id%3D%27gm%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%0A%20%20%20%3Cstop%20offset%3D%270%27%20stop-color%3D%27%234b535d%27%2F%3E%3Cstop%20offset%3D%27.44%27%20stop-color%3D%27%23272e36%27%2F%3E%0A%20%20%20%3Cstop%20offset%3D%27.54%27%20stop-color%3D%27%2310141a%27%2F%3E%3Cstop%20offset%3D%27.8%27%20stop-color%3D%27%232c333b%27%2F%3E%0A%20%20%20%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23515a64%27%2F%3E%0A%20%20%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%27st%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%0A%20%20%20%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23d2dae3%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23717b87%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23aab3bf%27%2F%3E%0A%20%20%3C%2FlinearGradient%3E%0A%20%20%3Cfilter%20id%3D%27forge%27%20x%3D%27-12%25%27%20y%3D%27-12%25%27%20width%3D%27124%25%27%20height%3D%27124%25%27%3E%0A%20%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%200.82%27%20numOctaves%3D%273%27%20seed%3D%2711%27%20result%3D%27n%27%2F%3E%0A%20%20%20%3CfeDisplacementMap%20in%3D%27SourceGraphic%27%20in2%3D%27n%27%20scale%3D%272.6%27%20xChannelSelector%3D%27R%27%20yChannelSelector%3D%27G%27%20result%3D%27disp%27%2F%3E%0A%20%20%20%3CfeSpecularLighting%20in%3D%27n%27%20surfaceScale%3D%272.4%27%20specularConstant%3D%270.82%27%20specularExponent%3D%2712%27%20lighting-color%3D%27%23dbe4ee%27%20result%3D%27spec%27%3E%0A%20%20%20%20%3CfeDistantLight%20azimuth%3D%27228%27%20elevation%3D%2754%27%2F%3E%0A%20%20%20%3C%2FfeSpecularLighting%3E%0A%20%20%20%3CfeComposite%20in%3D%27spec%27%20in2%3D%27disp%27%20operator%3D%27in%27%20result%3D%27sclip%27%2F%3E%0A%20%20%20%3CfeComposite%20in%3D%27disp%27%20in2%3D%27sclip%27%20operator%3D%27over%27%2F%3E%0A%20%20%3C%2Ffilter%3E%0A%20%20%3Cpath%20id%3D%27stud%27%20d%3D%27M120%2013%20l8.5%2011%20-8.5%2011%20-8.5%20-11%20z%27%2F%3E%0A%20%3C%2Fdefs%3E%0A%20%3Cg%20filter%3D%27url%28%23forge%29%27%3E%0A%20%20%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%27228%27%20height%3D%27228%27%20rx%3D%273%27%20fill%3D%27none%27%20stroke%3D%27%23070a0d%27%20stroke-width%3D%272.4%27%2F%3E%0A%20%20%3Cpath%20fill%3D%27url%28%23gm%29%27%20stroke%3D%27%23070a0d%27%20stroke-width%3D%271%27%20fill-rule%3D%27evenodd%27%0A%20%20%20%20%20%20%20%20d%3D%27M8%208%20H232%20V232%20H8%20Z%20M41%2041%20H199%20V199%20H41%20Z%27%2F%3E%0A%20%3C%2Fg%3E%0A%20%3Cg%20stroke%3D%27%23070a0d%27%20stroke-width%3D%27.7%27%3E%0A%20%20%3Crect%20x%3D%2738%27%20y%3D%2738%27%20width%3D%27164%27%20height%3D%27164%27%20fill%3D%27none%27%20stroke%3D%27url%28%23st%29%27%20stroke-width%3D%271.3%27%2F%3E%0A%20%20%3Crect%20x%3D%2734.5%27%20y%3D%2734.5%27%20width%3D%27171%27%20height%3D%27171%27%20fill%3D%27none%27%20stroke%3D%27%2304070a%27%20stroke-width%3D%272.4%27%2F%3E%0A%20%20%3Crect%20x%3D%2732.4%27%20y%3D%2732.4%27%20width%3D%27175.2%27%20height%3D%27175.2%27%20fill%3D%27none%27%20stroke%3D%27%23d8742e%27%20stroke-width%3D%271%27%20opacity%3D%27.22%27%2F%3E%0A%20%20%3Cg%20fill%3D%27url%28%23st%29%27%3E%0A%20%20%20%3Cuse%20href%3D%27%23stud%27%2F%3E%3Cuse%20href%3D%27%23stud%27%20transform%3D%27rotate%2890%20120%20120%29%27%2F%3E%0A%20%20%20%3Cuse%20href%3D%27%23stud%27%20transform%3D%27rotate%28180%20120%20120%29%27%2F%3E%3Cuse%20href%3D%27%23stud%27%20transform%3D%27rotate%28270%20120%20120%29%27%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20stroke%3D%27none%27%3E%0A%20%20%20%3Ccircle%20cx%3D%27120%27%20cy%3D%2724%27%20r%3D%272.4%27%20fill%3D%27%230a1316%27%2F%3E%3Ccircle%20cx%3D%27216%27%20cy%3D%27120%27%20r%3D%272.4%27%20fill%3D%27%230a1316%27%2F%3E%0A%20%20%20%3Ccircle%20cx%3D%27120%27%20cy%3D%27216%27%20r%3D%272.4%27%20fill%3D%27%230a1316%27%2F%3E%3Ccircle%20cx%3D%2724%27%20cy%3D%27120%27%20r%3D%272.4%27%20fill%3D%27%230a1316%27%2F%3E%0A%20%20%20%3Ccircle%20cx%3D%27120%27%20cy%3D%2724%27%20r%3D%271.1%27%20fill%3D%27%23d8742e%27%2F%3E%3Ccircle%20cx%3D%27216%27%20cy%3D%27120%27%20r%3D%271.1%27%20fill%3D%27%23d8742e%27%2F%3E%0A%20%20%20%3Ccircle%20cx%3D%27120%27%20cy%3D%27216%27%20r%3D%271.1%27%20fill%3D%27%23d8742e%27%2F%3E%3Ccircle%20cx%3D%2724%27%20cy%3D%27120%27%20r%3D%271.1%27%20fill%3D%27%23d8742e%27%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20id%3D%27cor%27%20fill%3D%27url%28%23st%29%27%3E%0A%20%20%20%3Cpath%20d%3D%27M8%2047%20V21%20Q8%208%2021%208%20H47%20L38%2017%20H23%20Q17%2017%2017%2023%20V38%20Z%27%2F%3E%0A%20%20%20%3Cpath%20d%3D%27M22%2022%20h12%20v3%20h-9%20v9%20h-3%20z%27%2F%3E%0A%20%20%20%3Ccircle%20cx%3D%2713.5%27%20cy%3D%2713.5%27%20r%3D%272.3%27%2F%3E%0A%20%20%20%3Cpath%20d%3D%27M31%2013%20l9%209%27%20stroke%3D%27url%28%23st%29%27%20stroke-width%3D%271.5%27%20fill%3D%27none%27%2F%3E%0A%20%20%20%3Cpath%20d%3D%27M13%2031%20l9%209%27%20stroke%3D%27url%28%23st%29%27%20stroke-width%3D%271.5%27%20fill%3D%27none%27%2F%3E%0A%20%20%20%3Ccircle%20cx%3D%2740%27%20cy%3D%2740%27%20r%3D%272.2%27%20fill%3D%27%230a1316%27%20stroke%3D%27none%27%2F%3E%0A%20%20%20%3Ccircle%20cx%3D%2740%27%20cy%3D%2740%27%20r%3D%271%27%20fill%3D%27%23d8742e%27%20stroke%3D%27none%27%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cuse%20href%3D%27%23cor%27%20transform%3D%27matrix%28-1%200%200%201%20240%200%29%27%2F%3E%0A%20%20%3Cuse%20href%3D%27%23cor%27%20transform%3D%27matrix%281%200%200%20-1%200%20240%29%27%2F%3E%0A%20%20%3Cuse%20href%3D%27%23cor%27%20transform%3D%27matrix%28-1%200%200%20-1%20240%20240%29%27%2F%3E%0A%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --panel-hammered:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20200%27%3E%0A%20%3Cdefs%3E%0A%20%20%3Cfilter%20id%3D%27h%27%3E%0A%20%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.7%200.9%27%20numOctaves%3D%273%27%20seed%3D%276%27%20result%3D%27n%27%2F%3E%0A%20%20%20%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%20.42%200%27%20result%3D%27na%27%2F%3E%0A%20%20%20%3CfeSpecularLighting%20in%3D%27n%27%20surfaceScale%3D%271.1%27%20specularConstant%3D%27.4%27%20specularExponent%3D%279%27%20lighting-color%3D%27%239fb0c2%27%20result%3D%27s%27%3E%0A%20%20%20%20%3CfeDistantLight%20azimuth%3D%27235%27%20elevation%3D%2750%27%2F%3E%0A%20%20%20%3C%2FfeSpecularLighting%3E%0A%20%20%20%3CfeComposite%20in%3D%27s%27%20in2%3D%27na%27%20operator%3D%27over%27%2F%3E%0A%20%20%3C%2Ffilter%3E%0A%20%3C%2Fdefs%3E%0A%20%3Crect%20width%3D%27200%27%20height%3D%27200%27%20fill%3D%27%230f141a%27%2F%3E%0A%20%3Crect%20width%3D%27200%27%20height%3D%27200%27%20filter%3D%27url%28%23h%29%27%20opacity%3D%27.45%27%2F%3E%0A%3C%2Fsvg%3E");
  --etch-rune:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20320%20320%27%20fill%3D%27none%27%20stroke%3D%27%23d8742e%27%3E%0A%20%3Cg%20opacity%3D%27.5%27%20stroke-width%3D%271%27%3E%0A%20%20%3Ccircle%20cx%3D%27160%27%20cy%3D%27160%27%20r%3D%27132%27%2F%3E%3Ccircle%20cx%3D%27160%27%20cy%3D%27160%27%20r%3D%27104%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M28%20160%20H292%20M160%2028%20V292%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M67%2067%20L253%20253%20M253%2067%20L67%20253%27%20opacity%3D%27.6%27%2F%3E%0A%20%3C%2Fg%3E%0A%20%3Cg%20opacity%3D%27.62%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%3E%0A%20%20%3Cpath%20d%3D%27M160%2030%20l-5%209%20h10%20z%27%2F%3E%3Cpath%20d%3D%27M160%20290%20l-5%20-9%20h10%20z%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M30%20160%20l9%20-5%20v10%20z%27%2F%3E%3Cpath%20d%3D%27M290%20160%20l-9%20-5%20v10%20z%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M150%2056%20v12%20m-6%20-6%20h12%27%2F%3E%3Cpath%20d%3D%27M170%20252%20l6%208%20m0%20-8%20l-6%208%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M250%20150%20l8%204%20m-8%204%20l8%20-4%27%2F%3E%3Cpath%20d%3D%27M62%20168%20q6%20-8%2012%200%27%2F%3E%0A%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --rune-ring:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20220%20220%27%20fill%3D%27none%27%20stroke%3D%27%23d8742e%27%3E%0A%20%3Ccircle%20cx%3D%27110%27%20cy%3D%27110%27%20r%3D%27104%27%20stroke-width%3D%271.2%27%20opacity%3D%27.55%27%2F%3E%0A%20%3Ccircle%20cx%3D%27110%27%20cy%3D%27110%27%20r%3D%2792%27%20stroke-width%3D%271%27%20stroke-dasharray%3D%271.5%207%27%20opacity%3D%27.8%27%2F%3E%0A%20%3Ccircle%20cx%3D%27110%27%20cy%3D%27110%27%20r%3D%2778%27%20stroke-width%3D%271%27%20opacity%3D%27.35%27%2F%3E%0A%20%3Cg%20opacity%3D%27.85%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%0A%20%20%3Cpath%20d%3D%27M110%2016%20l-6%2011%20h12%20z%27%2F%3E%3Cpath%20d%3D%27M110%20204%20l-6%20-11%20h12%20z%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M16%20110%20l11%20-6%20v12%20z%27%2F%3E%3Cpath%20d%3D%27M204%20110%20l-11%20-6%20v12%20z%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M40%2040%20l9%204%20-4%209%20m-9%20-4%204%20-9%27%20%2F%3E%3Cpath%20d%3D%27M180%2040%20l-9%204%204%209%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M40%20180%20l9%20-4%20-4%20-9%27%2F%3E%3Cpath%20d%3D%27M180%20180%20l-9%20-4%204%20-9%27%2F%3E%0A%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--f-body);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(72% 50% at 50% -8%, #0d141b 0%, transparent 60%),
    radial-gradient(48% 40% at 82% 12%, rgba(216,116,46,.07), transparent 70%),
    radial-gradient(46% 38% at 14% 88%, rgba(139,123,255,.08), transparent 72%),
    var(--bg);
  background-attachment:fixed;}

/* ════════ FRAME FORGÉ (boîte arcane) ════════ */
.ug-frame,.price-card,.tier-block,.obtain,#mainCard{
  --aura:var(--rarity-common); --aura-glow:rgba(174,184,198,.14);
  position:relative; border:24px solid transparent;
  border-image:var(--frame-forge) 58 / 24px / 5px round; border-radius:var(--r-frame);
  background:
    var(--etch-rune) center / 360px 360px no-repeat,
    var(--panel-hammered) center / 200px 200px,
    linear-gradient(180deg,#0f151c,#080b10);
  background-blend-mode:soft-light,normal,normal; background-clip:padding-box;
  box-shadow:
    inset 0 1px 0 rgba(190,200,214,.07),
    inset 0 0 0 1px rgba(0,0,0,.6),
    inset 0 26px 54px rgba(0,0,0,.55),
    0 30px 70px rgba(0,0,0,.62),
    0 0 34px var(--aura-glow);
}
.ug-frame::before,.price-card::before,.tier-block::before,.obtain::before,#mainCard::before{ content:""; position:absolute; inset:5px; border-radius:3px; pointer-events:none;
  box-shadow: inset 0 0 22px -4px var(--aura-glow);
  opacity:.85; transition:opacity .4s var(--ease);}
.ug-frame:hover::before,.price-card:hover::before,.tier-block:hover::before,#mainCard:hover::before{opacity:1;}

.tier-block--free,.price-card--common{--aura:var(--rarity-common);--aura-glow:rgba(174,184,198,.12);}
.tier-block--premium,.price-card--featured{--aura:var(--rune);--aura-glow:var(--rune-glow);}
.tier-block--vip,.price-card--vip{--aura:var(--arcane);--aura-glow:var(--arcane-glow);}
/* VIP legendary : whisper of gold + rotating rune watermark */
.tier-block--vip::after,.price-card--vip::after{
  content:""; position:absolute; right:10px; bottom:10px; width:120px; height:120px; pointer-events:none;
  background:var(--rune-ring) center / contain no-repeat; opacity:.10;
  filter:drop-shadow(0 0 6px var(--arcane-glow)); animation:ug-spin 60s linear infinite;}
.tier-block--vip{box-shadow:
  inset 0 1px 0 rgba(216,196,138,.10), inset 0 0 0 1px rgba(0,0,0,.6),
  inset 0 26px 54px rgba(0,0,0,.55), 0 30px 70px rgba(0,0,0,.62), 0 0 36px var(--arcane-glow);}

/* ════════ BUTTONS — forged gunmetal + arcane rim ════════ */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-body); font-weight:600; font-size:15px; letter-spacing:.04em; line-height:1;
  padding:14px 26px; border-radius:var(--r-ornate); border:1px solid rgba(0,0,0,.6); cursor:pointer;
  color:var(--ink); text-shadow:0 1px 0 rgba(0,0,0,.6); overflow:hidden;
  background:linear-gradient(180deg,rgba(180,200,214,.16),transparent 42%),var(--metal-gun);
  box-shadow:
    inset 0 1px 0 rgba(190,210,225,.26), inset 0 -2px 6px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(120,140,155,.16), 0 10px 26px rgba(0,0,0,.5),
    0 0 0 1px rgba(216,116,46,.22), 0 0 22px var(--arcane-glow);
  transition:transform .25s var(--ease), box-shadow .3s, filter .3s;}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(200,220,235,.32), inset 0 -2px 6px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(140,160,175,.2), 0 16px 38px rgba(0,0,0,.55),
    0 0 0 1px rgba(216,116,46,.4), 0 0 30px var(--arcane-glow);}
.btn:active{transform:translateY(0) scale(.99)}
.btn--ghost{ background:
    radial-gradient(120% 140% at 0% 0%,rgba(216,116,46,.20),transparent 58%),
    linear-gradient(145deg,rgba(139,123,255,.11),rgba(10,14,18,.78) 48%,rgba(216,116,46,.10));
  border:1px solid rgba(216,116,46,.36);
  color:#f3eee6; text-shadow:var(--engrave);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.32);}
.btn--ghost:hover{ border-color:var(--arcane); color:#fff6e8; background:
    radial-gradient(120% 140% at 0% 0%,rgba(216,116,46,.30),transparent 58%),
    linear-gradient(145deg,rgba(139,123,255,.16),rgba(12,16,20,.82) 48%,rgba(216,116,46,.18));
  box-shadow:0 0 0 1px rgba(216,116,46,.42),0 16px 38px rgba(0,0,0,.42),0 0 24px var(--arcane-glow),inset 0 1px 0 rgba(255,255,255,.14);}

/* ════════ TYPOGRAPHY — engraved steel + arcane underglow ════════ */
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--arcane);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:30px;height:1px;background:linear-gradient(90deg,var(--arcane),transparent)}
h1.disp,.hero h1{font-family:var(--f-display);font-weight:800;letter-spacing:.02em;line-height:1.05;
  text-transform:uppercase; font-size:clamp(2.6rem,8vw,6rem);
  background:linear-gradient(180deg,#eef3f8,#aeb8c6 40%,#586475 56%,#c3ccd6 78%,#f3f7fb);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.8)) drop-shadow(0 0 26px rgba(216,116,46,.20));}
h2.disp{font-family:var(--f-display);font-weight:700;letter-spacing:.03em;color:var(--ink);text-shadow:var(--engrave)}
h3.disp{font-family:var(--f-display);font-weight:600;letter-spacing:.03em;color:var(--ink)}

/* sample card inner */
.tier-block{padding:30px 26px}
.tier-block__name{font-family:var(--f-display);font-weight:700;font-size:1.5rem;letter-spacing:.04em;text-shadow:var(--engrave)}
.tier-block--free .tier-block__name{color:var(--rarity-common)}
.tier-block--premium .tier-block__name{color:var(--rarity-epic)}
.tier-block--vip .tier-block__name{color:var(--gold-whisper)}
.tier-block__tagline{color:var(--ink-dim);font-size:.92rem;margin:6px 0 16px}
.tier-block__features{list-style:none;display:grid;gap:9px}
.tier-block__features li{display:flex;gap:9px;color:var(--ink-dim);font-size:.92rem}
.tier-block__features li::before{content:"";flex:0 0 16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,var(--emerald),transparent 62%);
  box-shadow:0 0 8px rgba(70,211,154,.5);margin-top:1px}
.tier-block__badge{display:inline-block;margin-bottom:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 10px;border-radius:4px;color:var(--ink);
  background:linear-gradient(180deg,#1b212a,#0e1219);border:1px solid var(--stroke-2)}

/* plan row */
.plan-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;
  border:1px solid var(--stroke);border-radius:var(--r-ornate);
  background:linear-gradient(180deg,#11161d,#0b0e13);transition:.2s}
.plan-opt:hover{border-color:var(--stroke-2);transform:translateY(-2px)}
.plan-opt.sel{border-color:var(--arcane);box-shadow:inset 0 0 0 1px rgba(216,116,46,.22),0 0 18px var(--arcane-glow)}
.plan-opt .nm{font-weight:600;color:var(--ink)}
.plan-opt .pr{font-family:var(--f-display);font-size:1.2rem;color:var(--ink);text-shadow:var(--engrave)}
.plan-opt .pr-was{color:var(--ink-faint);text-decoration:line-through;font-size:.72em;margin-right:6px}

/* real-site atmosphere : braises chaudes -> motes arcanes froides */
.aurora{inset:0;filter:none}
.aurora span{border-radius:0;left:0;top:0;width:100%;height:200%;opacity:.5;mix-blend-mode:screen;background-repeat:repeat;will-change:transform}
.aurora .a1{background-image:radial-gradient(2px 2px at 14% 90%,var(--arcane),transparent 60%),radial-gradient(1.5px 1.5px at 38% 72%,var(--rune-2),transparent 60%),radial-gradient(2px 2px at 62% 84%,var(--arcane),transparent 60%),radial-gradient(1.5px 1.5px at 82% 66%,var(--rune),transparent 60%);background-size:100% 50%;animation:ug-rise 22s linear infinite}
.aurora .a2{opacity:.3;background-image:radial-gradient(1.2px 1.2px at 24% 80%,var(--arcane),transparent 60%),radial-gradient(1px 1px at 56% 62%,var(--rune-2),transparent 60%),radial-gradient(1.2px 1.2px at 84% 74%,var(--arcane),transparent 60%);background-size:100% 50%;animation:ug-rise 34s linear infinite}
.aurora .a3{height:100%;opacity:.55;background:radial-gradient(46% 36% at 80% 22%,var(--rune-glow),transparent 70%),radial-gradient(40% 32% at 16% 84%,var(--arcane-glow),transparent 72%);animation:none}
.grain{opacity:.45}
/* typographie réelle */
.hero__h1{font-family:var(--f-display)}
.section h2,.section__head h2{font-family:var(--f-display);font-weight:700;letter-spacing:.03em;color:var(--ink);text-shadow:var(--engrave)}
.section h2 em{background:linear-gradient(180deg,#eef3f8,#aeb8c6 42%,#586475 56%,#c3ccd6 80%,#f3f7fb);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(216,116,46,.16))}

@keyframes ug-spin{to{transform:rotate(360deg)}}
@keyframes ug-rise{to{transform:translate3d(0,-50%,0)}}
@media (prefers-reduced-motion:reduce){.tier-block--vip::after,.price-card--vip::after,.aurora span{animation:none!important}}

/* chrome+hero */
/* ===================================================================
   URSA GRIMOIRE v2 — OBSIDIENNE & ARCANE FROID
   SCOPE: site chrome (nav, scrollbar) + hero + proof strip
   Cold forged masthead — arcane teal primary, rune violet secondary.
   NO gold. Static box-shadows only; animate transform/opacity/bg-pos.
   =================================================================== */

/* ---- scroll progress : arcane → rune, cold edge-glow ---- */
.scrollbar {
  height: 2px;
  background: linear-gradient(90deg, var(--arcane), var(--arcane-2) 48%, var(--rune));
  box-shadow: 0 0 10px var(--arcane-glow), 0 0 2px var(--arcane);
}

/* ============================ NAV ============================ */
/* obsidian strap : gunmetal fill, steel top/bottom hairlines, inset bevel */
.nav.scrolled .nav__inner {
  position: relative;
  background:
    linear-gradient(180deg, rgba(20, 26, 33, .82), rgba(8, 11, 15, .9));
  border-color: var(--stroke-2);
  box-shadow:
    0 10px 34px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(174, 184, 198, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    inset 0 0 0 1px rgba(174, 184, 198, .04);
}
/* faint arcane underline beneath the strap */
.nav.scrolled .nav__inner::after {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--arcane-glow), var(--rune-glow), transparent);
  opacity: .55; pointer-events: none;
}

/* brand wordmark : engraved steel, Cinzel tracking */
.brand {
  letter-spacing: .05em;
  color: var(--steel);
  text-shadow: var(--engrave);
}
.brand__mark {
  filter: drop-shadow(0 3px 14px var(--arcane-glow)) drop-shadow(0 0 1px rgba(174, 184, 198, .4));
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.08); }
.brand__logo {
  filter: drop-shadow(0 4px 16px var(--arcane-glow)) drop-shadow(0 0 1px rgba(174, 184, 198, .35));
}

/* nav links : cold steel ink, arcane teal notch */
.nav__links a { color: var(--ink-dim); }
.nav__links a:hover { color: var(--ink); }
.nav__links a::after {
  left: 28%; right: 28%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--arcane), var(--arcane-2), transparent);
  box-shadow: 0 0 8px var(--arcane-glow);
}

/* language toggle : etched gunmetal stud */
.lang {
  color: var(--ink);
  border: 1px solid var(--stroke-2);
  background:
    linear-gradient(180deg, rgba(43, 51, 61, .55), rgba(10, 14, 19, .7));
  box-shadow: inset 0 1px 0 rgba(174, 184, 198, .1), inset 0 -1px 0 rgba(0, 0, 0, .4);
}
.lang:hover {
  border-color: var(--arcane);
  background:
    linear-gradient(180deg, rgba(216, 116, 46, .08), rgba(10, 14, 19, .72));
  box-shadow: inset 0 1px 0 rgba(174, 184, 198, .12), 0 0 0 1px var(--arcane-glow);
}
.lang svg { opacity: .7; color: var(--steel); }
.lang__menu {
  border: 1px solid var(--stroke-2);
  background:
    linear-gradient(180deg, rgba(30, 38, 47, .96), rgba(8, 11, 15, .98));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(174, 184, 198, .1);
}
.lang__menu button { color: var(--ink-dim); }
.lang__menu button:hover { background: rgba(216, 116, 46, .07); color: var(--ink); }
.lang__menu button[aria-current="true"] { color: var(--arcane); }

/* nav action studs : gunmetal, arcane hover */
.nav-actions { gap: 7px; }
.nav-icon-btn {
  border: 1px solid var(--stroke-2);
  color: var(--steel);
  background:
    linear-gradient(180deg, rgba(43, 51, 61, .6), rgba(10, 14, 19, .72));
  box-shadow: inset 0 1px 0 rgba(174, 184, 198, .12), inset 0 -1px 0 rgba(0, 0, 0, .45);
}
.nav-icon-btn:hover {
  border-color: var(--arcane);
  color: var(--arcane);
  background:
    linear-gradient(180deg, rgba(216, 116, 46, .12), rgba(10, 14, 19, .72));
  box-shadow: 0 0 0 1px var(--arcane-glow), inset 0 1px 0 rgba(174, 184, 198, .14);
}

/* =========================== HERO =========================== */
/* cold arcane mesh : teal / violet / obsidian — no warm tones */
.hero::before {
  opacity: .85; filter: blur(22px) saturate(125%);
  background:
    radial-gradient(38% 44% at 18% 22%, rgba(216, 116, 46, .26), transparent 70%),
    radial-gradient(36% 42% at 84% 16%, rgba(139, 123, 255, .24), transparent 70%),
    radial-gradient(46% 50% at 52% 96%, rgba(10, 14, 19, .9), transparent 74%),
    radial-gradient(30% 38% at 8% 80%, rgba(184, 85, 31, .18), transparent 72%);
  background-size: 180% 180%, 180% 180%, 180% 180%, 180% 180%;
  background-repeat: no-repeat;
}

/* faint arcane rune-ring medallion behind the sigil, slow spin */
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: clamp(36px, 9vh, 118px); left: 0; right: 0; margin-inline: auto;
  width: clamp(240px, 38vw, 430px); aspect-ratio: 1;
  background: var(--rune-ring) center / contain no-repeat;
  opacity: .15;
  animation: ug-spin 96s linear infinite;
}

/* hero pill : obsidian chip, steel hairline, inset bevel */
.hero__pill {
  color: var(--ink-dim);
  border: 1px solid var(--stroke-2);
  background:
    linear-gradient(180deg, rgba(20, 26, 33, .7), rgba(8, 11, 15, .78));
  box-shadow: inset 0 1px 0 rgba(174, 184, 198, .1), inset 0 -1px 0 rgba(0, 0, 0, .4);
}
.hero__pill b { color: var(--steel); font-weight: 600; }
.hero__pill .tag {
  color: #06080b;
  background: linear-gradient(120deg, var(--arcane), var(--arcane-2));
  box-shadow: 0 0 10px var(--arcane-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* hero sigil : cold steel + arcane drop-shadow */
.hero__mark {
  filter:
    drop-shadow(0 14px 48px var(--arcane-glow))
    drop-shadow(0 0 2px rgba(174, 184, 198, .35));
}
.hero__logo img {
  filter:
    drop-shadow(0 12px 40px var(--arcane-glow))
    drop-shadow(0 0 2px rgba(174, 184, 198, .3));
}
.hero__logo {
  filter:
    drop-shadow(0 16px 56px var(--arcane-glow))
    drop-shadow(0 0 2px rgba(174, 184, 198, .3));
}

/* hero benefit copy : engraved steel emphasis, never gold */
.hero__tag { color: var(--ink-dim); }
.hero__tag b { color: var(--steel); font-weight: 600; text-shadow: var(--engrave); }

/* scroll cue : arcane arrow */
.hero__scroll { color: var(--ink-faint); }
.hero__scroll svg {
  color: var(--arcane);
  filter: drop-shadow(0 0 5px var(--arcane-glow));
}

/* live badge : emerald status on obsidian, pseudo-opacity pulse */
.hero__badge {
  color: var(--emerald);
  border: 1px solid rgba(70, 211, 154, .32);
  background:
    linear-gradient(180deg, rgba(20, 26, 33, .72), rgba(8, 11, 15, .8));
  box-shadow: inset 0 1px 0 rgba(174, 184, 198, .1);
  animation: none;
}
.hero__badge::before {
  background: var(--emerald);
  box-shadow: 0 0 10px var(--emerald);
  animation: ug-livepulse 2.6s ease-in-out infinite;
}
@keyframes ug-livepulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after, .hero__badge::before { animation: none !important; }
}

/* hero motes : cold arcane / violet only */
.hero__particles span:nth-child(3n+1) { background: var(--arcane);   box-shadow: 0 0 6px var(--arcane-glow); }
.hero__particles span:nth-child(3n+2) { background: var(--rune);     box-shadow: 0 0 6px var(--rune-glow); }
.hero__particles span:nth-child(3n+3) { background: var(--arcane-2); box-shadow: 0 0 5px var(--arcane-glow); }

/* ======================= PROOF STRIP ======================= */
/* obsidian plaques, steel hairline, inset bevel */
.proof-strip { padding: 10px 0 6px; }
.stat,
.proof-strip .stat {
  border: 1px solid var(--stroke-2);
  background:
    linear-gradient(180deg, rgba(20, 26, 33, .6), rgba(8, 11, 15, .72));
  box-shadow:
    inset 0 1px 0 rgba(174, 184, 198, .1),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 8px 24px rgba(0, 0, 0, .35);
}
.proof-strip .stat:hover {
  border-color: var(--arcane);
  box-shadow:
    inset 0 1px 0 rgba(174, 184, 198, .12),
    0 0 0 1px var(--arcane-glow),
    0 14px 30px rgba(0, 0, 0, .42);
}

/* engraved STEEL numbers — NOT gold */
.stat .v,
.proof-strip .v {
  background: var(--metal-steel);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55));
}
/* status numbers keep their semantic colour (higher specificity preserved) */
.stat .v.ok,
.proof-strip .v.ok {
  background: linear-gradient(110deg, var(--emerald), #7df0c6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: none;
}

/* labels : arcane mono */
.stat .k,
.proof-strip .k {
  font-family: var(--f-mono);
  color: var(--arcane);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* sections+cards */
/* ============================================================================
   URSA GRIMOIRE v2 — OBSIDIENNE & ARCANE FROID
   Inner-content restyle. Foundation owns: tokens, body backdrop, .aurora motes,
   the forged FRAME on .price-card/.tier-block/.obtain/#mainCard, steel headings,
   .btn/.btn--ghost, keyframes ug-spin/ug-rise. Everything below = inner + rest.
   Cold gunmetal/obsidian, arcane teal primary, rune violet secondary,
   gold-whisper ONLY on the VIP/legendary tier name.
   ============================================================================ */

/* ---- kill every warm/gold glow that leaks from legacy rules ---- */
.spotlight { background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 26%), var(--arcane-glow), transparent 62%); }
.features::before { background: radial-gradient(closest-side, var(--arcane-glow), transparent 70%); }
.brand__logo { filter: drop-shadow(0 4px 16px var(--arcane-glow)); }
.hero__logo img { filter: drop-shadow(0 14px 44px rgba(0,0,0,.6)) drop-shadow(0 0 30px var(--arcane-glow)); }

/* ===== SECTIONS — eyebrow + arcane rune divider ===== */
.eyebrow { color: var(--arcane); }
.eyebrow::before { background: linear-gradient(90deg, var(--arcane), transparent); }
.section__head.center { position: relative; }
.section__head.center::after {
  content: ""; display: block; width: 124px; height: 11px; margin: 22px auto 0;
  -webkit-mask: var(--etch-rune) center/contain no-repeat; mask: var(--etch-rune) center/contain no-repeat;
  background: linear-gradient(90deg, transparent, var(--arcane) 28%, var(--rune) 50%, var(--arcane) 72%, transparent);
  opacity: .52;
}
.section__head:not(.center)::after {
  content: ""; display: block; width: 72px; height: 2px; margin: 18px 0 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--arcane), transparent);
  box-shadow: 0 0 12px var(--arcane-glow);
}

/* ===== TIER BLOCKS — inner content (frame owned by foundation) ===== */
.tier-block--free .tier-block__name,
.tier-block--free span { color: var(--steel); }
.tier-block--premium .tier-block__name,
.tier-block--premium span { color: var(--rune-2); }
.tier-block--vip .tier-block__name { color: var(--gold-whisper); text-shadow: var(--engrave); letter-spacing: .16em; }
.tier-block .tier-block__tagline { color: var(--ink-dim); }

/* dots / checkmarks: generic dots -> arcane, feature checks -> emerald rune */
.tier-block li::before { background: var(--arcane); }
.tier-block__features li::before { color: var(--emerald); background: none; }

/* etched gunmetal plate badge, arcane hairline, carved mono label */
.tier-block .tier-block__badge {
  color: var(--ink); background: var(--metal-gun);
  border: 1px solid var(--stroke-2);
  box-shadow: inset 0 1px 0 rgba(174,184,198,.16), inset 0 -1px 0 rgba(6,8,11,.7), 0 5px 16px rgba(0,0,0,.5);
  text-shadow: var(--engrave);
}
.tier-block .tier-block__badge::before {
  content: ""; position: absolute; left: 6px; top: 50%; width: 4px; height: 4px; margin-top: -2px;
  border-radius: 50%; background: var(--arcane); box-shadow: 0 0 6px var(--arcane-glow);
}
.tier-block .tier-block__badge { position: absolute; padding-left: 16px; }

/* VIP risk note — seated in obsidian, status-red only */
.risk-flag { color: #f0a99e; background: rgba(226,91,74,.08); border-color: rgba(226,91,74,.42); }
.risk-flag::before { color: #160707; background: #f0a99e; }

/* ===== TIER COMPARISON TABLE ===== */
.tier-table-wrap { border: 1px solid var(--stroke-2); background: var(--glass); box-shadow: inset 0 1px 0 rgba(174,184,198,.06); }
.tier-table thead tr { border-bottom: 1px solid var(--stroke-2); }
.tier-table th.tt-feat { color: var(--ink-dim); }
.tier-table th.tt-free { color: var(--steel); }
.tier-table th.tt-prem { color: var(--rune-2); background: rgba(139,123,255,.08); }
.tier-table th.tt-vip { color: var(--gold-whisper); }
.tt-rec { color: rgba(139,123,255,.6); }
.tier-table td.tt-prem-col { background: rgba(139,123,255,.06); }
.tier-table td.tt-vip-col { background: rgba(216,196,138,.05); }
.tier-table tbody tr { border-bottom: 1px solid var(--stroke); }
.tier-table tbody tr:hover { background: rgba(216,116,46,.05); }
.tier-table tbody tr:hover .tt-prem-col { background: rgba(139,123,255,.1); }
.tt-warn-note { color: rgba(216,116,46,.55); }

/* ===== PRICE CARDS — inner content ===== */
.price-card__tag {
  color: var(--arcane); border: 1px solid var(--arcane-glow); background: rgba(216,116,46,.08);
  box-shadow: inset 0 1px 0 rgba(174,184,198,.08);
}
.price-card--vip .price-card__tag {
  color: var(--gold-whisper); border-color: var(--gold-glow); background: rgba(216,196,138,.07);
  text-shadow: var(--engrave);
}
.price-card__ribbon {
  color: #04110f;
  background: linear-gradient(120deg, var(--rune-2), var(--arcane) 50%, var(--rune-2));
  background-size: 220% auto;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22);
  animation: ug-ribbon-shimmer 5s linear infinite;
}
.price-card h3 { font-family: var(--f-display); color: var(--ink); text-shadow: var(--engrave); }
.price-card p { color: var(--ink-dim); }
.price-card li::before { background: var(--arcane); box-shadow: 0 0 6px var(--arcane-glow); }

/* "★ Meilleur choix" -> etched steel/arcane plate, NEVER gold */
.price-card--featured::after {
  content: "★ Meilleur choix"; color: var(--ink);
  background: var(--metal-gun);
  border: 1px solid var(--arcane-glow);
  box-shadow: inset 0 1px 0 rgba(174,184,198,.2), inset 0 -1px 0 rgba(6,8,11,.7), 0 6px 18px rgba(0,0,0,.5);
  text-shadow: var(--engrave); letter-spacing: .08em; animation: none;
}

/* shared card top hairline -> cold arcane->rune */
.price-card::before, .download-card::before, .step::before {
  background: linear-gradient(90deg, transparent, var(--arcane), var(--rune), transparent);
}

/* stat numerals -> engraved steel/arcane (no gold) */
.proof-strip .v { background: linear-gradient(110deg, var(--steel) 8%, var(--arcane) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===== FEATURE VIDEO CARDS — keep clean, retint cold ===== */
.feat::after { background: conic-gradient(from var(--bm-ang), transparent, var(--arcane) 12%, transparent 32%, transparent 66%, var(--rune) 88%, transparent); }
.feat__body::after { background: linear-gradient(90deg, transparent, var(--arcane-glow) 30%, var(--arcane-glow) 70%, transparent); }
.feat__badge {
  color: var(--arcane); border: 1px solid var(--arcane-glow);
  background: linear-gradient(180deg, rgba(20,26,33,.7), rgba(10,14,19,.7));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(174,184,198,.12), 0 4px 12px rgba(0,0,0,.5);
}
.feat h3 { color: var(--ink); text-shadow: 0 2px 14px rgba(0,0,0,.85); }
.feat p { color: var(--ink-dim); text-shadow: 0 1px 10px rgba(0,0,0,.78); }

/* ===== DOWNLOAD CARDS ===== */
.download-card__tag { color: var(--arcane); border: 1px solid var(--arcane-glow); background: rgba(216,116,46,.08); }
.download-card h3 { text-shadow: var(--engrave); }
.download-card__version b { color: var(--emerald); }
.download-card li::before { background: var(--arcane); box-shadow: 0 0 6px var(--arcane-glow); }

/* ===== HOME SHARE — platform brands seated in obsidian/steel ===== */
.home-share { border-top: 1px solid var(--stroke-2); }
.home-share__label { color: var(--ink-faint); }
.home-share__preview { border: 1px solid var(--stroke); background: rgba(10,14,19,.5); color: var(--ink-dim); box-shadow: inset 0 1px 0 rgba(174,184,198,.05); }
.home-share__link { --share-a: var(--gunmetal); --share-b: rgba(10,14,19,.7); --share-glow: rgba(0,0,0,.5); border: 1px solid var(--stroke-2); color: var(--ink); box-shadow: 0 8px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(174,184,198,.1); }
.home-share__link::before { background: rgba(174,184,198,.16); color: var(--ink); }
.home-share__link:hover { border-color: var(--stroke-2); transform: translateY(-1px); }
.home-share__link.is-copied { --share-a: var(--emerald); --share-b: #14956d; --share-glow: rgba(70,211,154,.22); color: #04130d; border-color: rgba(70,211,154,.4); }

/* ===== GAME PICKER (tabs) ===== */
.game-picker__tabs { background: var(--glass); border: 1px solid var(--stroke-2); box-shadow: inset 0 1px 0 rgba(174,184,198,.06); }
.game-picker__tab { color: var(--ink-dim); }
.game-picker__tab.active { color: #04110f; background: linear-gradient(180deg, var(--arcane), var(--arcane-2)); box-shadow: 0 2px 14px var(--arcane-glow), inset 0 1px 0 rgba(255,255,255,.25); }

/* ===== GAME DROPDOWN ===== */
.game-drop__btn { color: var(--arcane); border: 1.5px solid var(--arcane-glow); background: rgba(216,116,46,.08); }
.game-drop__btn:hover, .game-drop__btn[aria-expanded="true"] { border-color: var(--arcane); background: rgba(216,116,46,.15); }
.game-drop__menu { background: var(--bg-2); border: 1px solid var(--stroke-2); box-shadow: 0 16px 48px rgba(0,0,0,.7), inset 0 1px 0 rgba(174,184,198,.06); }
.game-drop__item { color: var(--ink-dim); }
.game-drop__item:hover { background: rgba(174,184,198,.08); color: var(--ink); }
.game-drop__item.is-active { color: var(--arcane); background: rgba(216,116,46,.09); }

/* ===== GAME HINT POPOVER ===== */
.game-hint { background: var(--metal-gun); border: 1.5px solid var(--arcane); box-shadow: 0 16px 48px rgba(0,0,0,.78), 0 0 0 1px var(--arcane-glow), inset 0 1px 0 rgba(174,184,198,.12); }
.game-hint::before { border-bottom-color: var(--arcane); }
.game-hint__close { color: var(--ink-faint); }
.game-hint__close:hover { color: var(--ink-dim); }
.game-hint__title { color: var(--arcane); }
.game-hint__msg { color: var(--ink-dim); }
.game-hint__tags span { color: var(--arcane); background: rgba(216,116,46,.1); border: 1px solid var(--arcane-glow); }

/* ===== GAMEPICK MODAL ===== */
.gamepick { background: radial-gradient(70% 80% at 50% 8%, rgba(216,116,46,.12), transparent 58%), linear-gradient(180deg, rgba(5,8,12,.97), rgba(2,4,7,.98)); }
.gamepick__eyebrow { color: var(--arcane); }
.gamepick__card { background:#05080c; border-color:rgba(216,116,46,.28); }
.gamepick__card:hover { border-color: var(--arcane); }
.gamepick__cta-line { color:#06100f; }

/* ===== GAME SWITCH / PANEL / PREVIEW / COPY ===== */
.game-switch.sticky-active { box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.game-switch__btn { color: var(--ink-dim); background: var(--glass); border: 1px solid var(--stroke); }
.game-switch__btn:hover { border-color: var(--stroke-2); }
.game-switch__btn.active { color: var(--ink); border-color: var(--arcane-glow); background: linear-gradient(180deg, rgba(216,116,46,.12), var(--glass)); box-shadow: inset 0 0 0 1px var(--arcane-glow); }
.game-panel { background: linear-gradient(180deg, var(--glass-2), var(--glass)); border: 1px solid var(--stroke); box-shadow: var(--shadow), inset 0 1px 0 rgba(174,184,198,.05); }
.game-preview { border: 1px solid var(--stroke-2); box-shadow: 0 22px 70px rgba(0,0,0,.55); }
.game-preview__label span { color: var(--arcane); }
.game-copy__eyebrow { color: var(--arcane); }
.game-copy h3 { text-shadow: var(--engrave); }

/* ===== SIDE DOT-NAV ===== */
.secnav { background: rgba(8,11,16,.62); border: 1px solid var(--stroke); box-shadow: 0 10px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(174,184,198,.06); }
.secnav__dot { background: var(--stroke-2); }
.secnav__dot:hover { background: var(--ink-dim); }
.secnav__dot.active { background: linear-gradient(120deg, var(--arcane), var(--arcane-2)); box-shadow: 0 0 12px var(--arcane-glow); }
.secnav__dot.active::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--arcane); pointer-events: none;
  animation: ug-secnav-ring 2.4s var(--ease) infinite;
}
.secnav__label { color: var(--ink); background: rgba(8,11,16,.94); border: 1px solid var(--stroke-2); }

/* ===== STEPS ===== */
.step { background: linear-gradient(180deg, var(--glass-2), var(--glass)); border: 1px solid var(--stroke); box-shadow: inset 0 1px 0 rgba(174,184,198,.05); }
.step:hover { border-color: var(--stroke-2); }
.step__n { -webkit-text-stroke: 1.4px var(--steel-2); color: transparent; opacity: .92; text-shadow: var(--engrave); }
.step h4 { color: var(--ink); }
.step p { color: var(--ink-dim); }

/* ===== COMPARE TABLE (ctable) ===== */
.ctable { border-color: var(--stroke-2); }
.ctable .cv--pro { background: rgba(216,116,46,.06); }
.ctable .cv--head { color: var(--ink-dim); }
.ctable .cv--head.cv--pro { color: var(--arcane); }
.ctable .cv.y { color: var(--emerald); }
.ctable .cv.n { color: var(--ink-faint); }
.ctable .cv.hot { color: var(--arcane); }
.ctable > span:nth-child(n+4) { border-top: 1px solid var(--stroke); }

/* ===== REVIEWS / TESTIMONIALS ===== */
.review { background: linear-gradient(180deg, var(--glass-2), var(--glass)); border: 1px solid var(--stroke); box-shadow: var(--shadow), inset 0 1px 0 rgba(174,184,198,.05); }
.review:hover { border-color: var(--stroke-2); }
.review p { color: var(--ink); }

/* ===== FAQ ===== */
.faq details { background: var(--glass); border: 1px solid var(--stroke); }
.faq details[open] { border-color: var(--stroke-2); background: var(--glass-2); }
.faq summary::after { color: var(--arcane); }
.faq-warn { background: rgba(226,91,74,.07); border: 1px solid rgba(226,91,74,.32); }
.faq-warn svg { stroke: #f0a99e; }
.faq-warn strong { color: #f3b3a8; }

/* ===== FOOTER — obsidian slab, chiseled steel double top line ===== */
.footer {
  border-top: 1px solid var(--stroke-2);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  box-shadow: inset 0 1px 0 rgba(174,184,198,.12), inset 0 3px 0 rgba(6,8,11,.92), inset 0 4px 0 rgba(174,184,198,.05);
}
.footer small { color: var(--ink-faint); }
.footer nav a { position: relative; color: var(--ink-dim); transition: color .2s var(--ease); }
.footer nav a:hover { color: var(--arcane); }
.footer nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--arcane); opacity: .85; transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.footer nav a:hover::after { transform: scaleX(1); }

/* ===== RESEND MODAL ===== */
.resend-modal { background: rgba(4,6,9,.9); -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); }
.resend-box { background: var(--metal-gun); border: 1px solid var(--stroke-2); box-shadow: 0 30px 90px rgba(0,0,0,.7), inset 0 1px 0 rgba(174,184,198,.14), inset 0 -1px 0 rgba(6,8,11,.6); }
.resend-close { color: var(--ink-dim); }
.resend-close:hover { color: var(--ink); background: rgba(174,184,198,.08); }
.resend-icon { color: var(--arcane); background: rgba(216,116,46,.1); border: 1px solid var(--arcane-glow); box-shadow: inset 0 1px 0 rgba(174,184,198,.1); }
.resend-box h3 { color: var(--ink); text-shadow: var(--engrave); }
.resend-box p { color: var(--ink-dim); }
.resend-input { background: rgba(10,14,19,.6); border: 1px solid var(--stroke-2); color: var(--ink); }
.resend-input:focus { border-color: var(--arcane); box-shadow: 0 0 0 3px var(--arcane-glow); }
.resend-msg.ok { color: var(--emerald); }
.resend-msg.err { color: var(--red); }

/* ===== STICKY MOBILE CTA ===== */
.sticky-cta { border-top: 1px solid var(--arcane-glow); }
.sticky-cta__txt span { color: var(--arcane); }

/* ===== Focus-visible (cold arcane ring, WCAG) ===== */
.game-picker__tab:focus-visible,
.game-drop__btn:focus-visible,
.game-drop__item:focus-visible,
.game-switch__btn:focus-visible,
.gamepick__cta-line:focus-visible,
.gamepick__lang:focus-visible,
.secnav__dot:focus-visible,
.home-share__link:focus-visible,
.footer nav a:focus-visible,
.faq summary:focus-visible { outline: 2px solid var(--arcane); outline-offset: 2px; border-radius: var(--r-frame); }

/* ===== NEW KEYFRAMES (ug- prefixed) ===== */
@keyframes ug-ribbon-shimmer { to { background-position: 220% center; } }
@keyframes ug-secnav-ring { 0% { transform: scale(.65); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .price-card__ribbon, .secnav__dot.active::after, .footer nav a::after { animation: none !important; }
}

/* licence+vip */
/* ============================================================
   URSA GRIMOIRE v2 — OBSIDIENNE & ARCANE FROID
   LICENCE PORTAL inner content + leftover shared bits.
   #mainCard / .glass forged frame = foundation. Inner only here.
   No gold except --gold-whisper (VIP/legendary badge, sparingly).
   ============================================================ */

/* --- #mainCard header: arcane eyebrow + engraved-steel title --- */
#mainCard #eyebrow{
  font-family: var(--f-mono) !important;
  color: var(--arcane) !important;
  font-size: 11px !important;
  letter-spacing: .28em !important;
  text-transform: uppercase;
}
#mainCard #title{
  color: var(--steel);
  letter-spacing: .005em;
  text-shadow: var(--engrave), 0 0 22px rgba(216,116,46,.10);
}

/* VIP / legendary tier plate — the ONLY gold (re-tinted to gold-whisper) */
#tier-badge span{
  background: rgba(216,196,138,.12) !important;
  color: var(--gold-whisper) !important;
  border: 1px solid rgba(216,196,138,.30);
  border-radius: var(--r-pill) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 0 18px -9px var(--gold-glow);
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}

/* --- Stat grid: etched obsidian plaques, engraved values --- */
#mainCard .stat{
  position: relative;
  padding: 16px 16px 15px;
  border-radius: var(--r-frame);
  background:
    linear-gradient(180deg, rgba(174,184,198,.045), transparent 42%),
    linear-gradient(180deg, var(--glass-2), var(--glass));
  border: 1px solid var(--stroke);
  box-shadow:
    inset 0 1px 0 rgba(174,184,198,.08),
    inset 0 -14px 28px -18px rgba(0,0,0,.75);
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
#mainCard .stat::before{
  content: "";
  position: absolute;
  left: 12px; right: 12px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--arcane-glow), transparent);
  opacity: .55;
}
#mainCard .stat:hover{
  border-color: var(--stroke-2);
  transform: translateY(-2px);
}
#mainCard .stat .k{
  color: var(--arcane);
  opacity: .9;
  letter-spacing: .16em;
}
/* engrave the values WITHOUT touching .ok/.warn/.bad status colors */
#v-status, #v-remaining, #v-plan, #v-activated{
  text-shadow: var(--engrave);
  font-variant-numeric: tabular-nums;
}
#v-plan{ color: var(--steel); }

/* --- Progress: obsidian track, arcane->violet fill --- */
#progress-wrap > div{
  background: rgba(4,6,9,.82) !important;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(174,184,198,.10),
    inset 0 1px 2px rgba(0,0,0,.6);
}
#progress-bar{
  background: linear-gradient(90deg, var(--arcane), var(--rune)) !important;
  box-shadow: 0 0 12px var(--arcane-glow);
}

/* --- Key plate: engraved steel, mono --- */
#keybox #k-key{
  color: var(--arcane) !important;
  letter-spacing: .16em;
}
#v-key{
  background: linear-gradient(180deg, rgba(8,11,15,.94), rgba(4,6,9,.96)) !important;
  border: 1px solid var(--stroke-2) !important;
  border-radius: var(--r) !important;
  color: var(--steel) !important;
  box-shadow:
    inset 0 1px 0 rgba(174,184,198,.10),
    inset 0 0 0 1px rgba(0,0,0,.45),
    0 1px 0 rgba(174,184,198,.06);
  text-shadow: var(--engrave);
}
#copyKeyBtn.is-copied, #copyKeyBtn.done{
  color: var(--emerald) !important;
  border-color: rgba(70,211,154,.42) !important;
  background: linear-gradient(180deg, rgba(70,211,154,.16), rgba(70,211,154,.06)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(70,211,154,.26),
    0 0 18px -8px rgba(70,211,154,.5) !important;
}

/* --- Referral panel --- */
#refbox{ animation: ug-rise .6s var(--ease) both; }
#refbox #k-ref{
  color: var(--arcane) !important;
  letter-spacing: .02em;
  text-shadow: var(--engrave);
}
#ref-link{
  background: rgba(4,6,9,.7) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--r) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
#ref-link:focus, #ref-link:focus-visible{
  border-color: var(--arcane) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 0 0 3px var(--arcane-glow);
  outline: none;
}
#ref-stats{ letter-spacing: .04em; }

/* --- VIP upsell: arcane + violet panel (NOT a gold frame) --- */
#vipbox{
  animation: ug-rise .6s var(--ease) both;
  border-color: rgba(139,123,255,.30) !important;
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(174,184,198,.08),
    0 0 0 1px rgba(139,123,255,.07),
    0 0 44px -22px var(--rune-glow);
}
/* re-tint the inline overlay (was violet->gold) to cold arcane/violet sheen */
#vipbox > div:first-child{
  background: linear-gradient(135deg,
    rgba(139,123,255,.11) 0%,
    rgba(216,116,46,.06) 52%,
    transparent 100%) !important;
  background-size: 220% 220% !important;
  animation: ug-vip-sheen 16s var(--ease) infinite;
}
#vip-title{
  color: var(--steel);
  letter-spacing: .01em;
  text-shadow: var(--engrave);
}
#vip-perks{
  list-style: none;
  padding-left: 2px !important;
}
#vip-perks li{
  position: relative;
  padding-left: 20px;
  color: var(--ink-dim);
}
#vip-perks li::before{
  content: "";
  position: absolute;
  left: 3px; top: .56em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--arcane);
  box-shadow: 0 0 8px var(--arcane-glow);
}
#vip-paypal-btn{ margin-top: 6px; }
#vip-price{
  color: var(--arcane) !important;
  letter-spacing: .02em;
}
#vip-success{
  background: rgba(70,211,154,.10);
  border: 1px solid rgba(70,211,154,.28);
  border-radius: var(--r);
  padding: 10px 12px;
}

/* --- Shared: obsidian glass + arcane inputs --- */
.glass.card{ background-color: rgba(7,9,13,.4); }
.input{
  background: rgba(4,6,9,.55);
  border: 1px solid var(--stroke);
}
.input:focus, .input:focus-visible{
  border-color: var(--arcane);
  box-shadow: 0 0 0 3px var(--arcane-glow);
}

/* --- Motion (transform/opacity/background-position only) --- */
@keyframes ug-vip-sheen{
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
@media (prefers-reduced-motion: reduce){
  #vipbox > div:first-child, #refbox, #vipbox{ animation: none !important; }
}


/* ===== v16.1 — charte chaude (orange brûlé + violet), bg sobre, escalade prix ===== */
/* background plus discret : pas de rectangle dur derrière le hero, nébuleuse atténuée */
.hero::before{ inset:-26% -12%; filter:blur(64px) saturate(112%); opacity:.5; }
.aurora .a3{ opacity:.3; }
body{ background:
  radial-gradient(70% 50% at 50% -10%, #0c0f15 0%, transparent 62%),
  radial-gradient(46% 38% at 84% 14%, rgba(216,116,46,.05), transparent 72%),
  radial-gradient(44% 36% at 14% 88%, rgba(139,123,255,.06), transparent 74%),
  var(--bg); }

/* ESCALADE DES PRIX : Free (effacé) < Premium < VIP (max) */
.pricing-grid .price-card{ --esc:.965; transform:scale(var(--esc)); transition:transform .3s var(--ease), box-shadow .3s, filter .3s; }
.pricing-grid .price-card:hover{ transform:scale(var(--esc)) translateY(-6px); }
.pricing-grid .price-card:not(.price-card--featured):not(.price-card--vip){ filter:saturate(.55) brightness(.88); opacity:.97; }
.pricing-grid .price-card--featured{ --esc:1.0; }
.pricing-grid .price-card--vip{ --esc:1.055; z-index:2;
  box-shadow:
    inset 0 1px 0 rgba(216,196,138,.12), inset 0 0 0 1px rgba(0,0,0,.6),
    inset 0 26px 54px rgba(0,0,0,.55), 0 36px 84px rgba(0,0,0,.66),
    0 0 50px var(--arcane-glow), 0 0 80px rgba(139,123,255,.20); }
.pricing-grid .price-card--vip::before{ animation:ug-pricepulse 3.4s ease-in-out infinite; opacity:.55; }
.pricing-grid .price-card--vip .price-card__tag{ box-shadow:0 0 14px var(--arcane-glow); }
@keyframes ug-pricepulse{ 0%,100%{opacity:.4} 50%{opacity:.85} }
@media (prefers-reduced-motion:reduce){ .pricing-grid .price-card--vip::before{animation:none!important} }

/* ===== v25 — Pricing hierarchy and readability ===== */
#telecharger .section__head h2 em{
  background:linear-gradient(100deg,#fff4d8 0%,var(--arcane) 42%,var(--rune-2) 76%,#fff4d8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(216,116,46,.28));
}
#telecharger .section__head p{color:#e5d7c2}
#telecharger .pricing-grid{gap:clamp(18px,2.4vw,28px);align-items:stretch}
#telecharger .price-card{
  --esc:1;
  border-width:1.5px;
  border-radius:14px;
  background:
    radial-gradient(110% 90% at 8% 0%,rgba(216,116,46,.08),transparent 58%),
    linear-gradient(180deg,rgba(18,21,27,.92),rgba(7,10,14,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 62px rgba(0,0,0,.44);
  filter:none;
  opacity:1;
}
#telecharger .price-card:hover{transform:scale(var(--esc)) translateY(-7px)}
#telecharger .price-card h3{color:#f4eee6;text-shadow:0 1px 0 rgba(0,0,0,.55),0 0 14px rgba(216,116,46,.12)}
#telecharger .price-card p{color:#d8cdbc}
#telecharger .price-card li{color:#d3c7b8}
#telecharger .price-card__tag{
  color:#1c1006;
  background:linear-gradient(120deg,#f1c078,var(--arcane));
  border-color:rgba(216,116,46,.72);
  font-weight:800;
}
#telecharger .price-card:not(.price-card--featured):not(.price-card--vip){
  --esc:.95;
  opacity:.84;
  border-color:rgba(174,184,198,.24);
  background:
    radial-gradient(100% 90% at 0% 0%,rgba(174,184,198,.08),transparent 58%),
    linear-gradient(180deg,rgba(16,18,22,.78),rgba(7,9,13,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 16px 42px rgba(0,0,0,.32);
}
#telecharger .price-card:not(.price-card--featured):not(.price-card--vip) h3{color:#cfd6df}
#telecharger .price-card:not(.price-card--featured):not(.price-card--vip) p,
#telecharger .price-card:not(.price-card--featured):not(.price-card--vip) li{color:#aeb8c6}
#telecharger .price-card:not(.price-card--featured):not(.price-card--vip) .price-card__tag{
  color:#dce3ec;
  background:rgba(174,184,198,.10);
  border-color:rgba(174,184,198,.24);
}
#telecharger .price-card--featured{
  --esc:1.045;
  z-index:1;
  border-color:rgba(165,148,255,.82);
  background:
    radial-gradient(120% 110% at 86% 0%,rgba(165,148,255,.24),transparent 60%),
    radial-gradient(120% 110% at 0% 100%,rgba(216,116,46,.16),transparent 62%),
    linear-gradient(180deg,rgba(22,16,38,.96),rgba(9,11,20,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 78px rgba(0,0,0,.58),0 0 42px rgba(139,123,255,.24);
}
#telecharger .price-card--featured h3{
  color:#f1edff;
  text-shadow:0 1px 0 rgba(0,0,0,.62),0 0 22px rgba(165,148,255,.38);
}
#telecharger .price-card--featured p,
#telecharger .price-card--featured li{color:#e8e2ff}
#telecharger .price-card--featured li::before{background:var(--rune-2);box-shadow:0 0 8px rgba(165,148,255,.72)}
#telecharger .price-card--featured .price-card__tag{
  color:#080610;
  background:linear-gradient(120deg,#d8d0ff,var(--rune-2));
  border-color:rgba(165,148,255,.78);
  box-shadow:0 0 16px rgba(165,148,255,.34);
}
#telecharger .price-card--vip{
  --esc:1.08;
  border-color:rgba(216,196,138,.88);
  background:
    radial-gradient(120% 100% at 78% 0%,rgba(216,196,138,.22),transparent 60%),
    radial-gradient(120% 100% at 0% 100%,rgba(216,116,46,.22),transparent 62%),
    linear-gradient(180deg,rgba(33,23,11,.98),rgba(9,9,12,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 38px 88px rgba(0,0,0,.66),0 0 54px rgba(216,116,46,.28),0 0 82px rgba(139,123,255,.20);
}
#telecharger .price-card--vip h3{color:#fff1b8;text-shadow:0 1px 0 rgba(0,0,0,.7),0 0 24px rgba(216,196,138,.44)}
#telecharger .price-card--vip p,
#telecharger .price-card--vip li{color:#f0dfb5}
#telecharger .price-card--vip li::before{background:var(--gold-whisper);box-shadow:0 0 8px var(--gold-glow)}
#telecharger .price-card--vip .price-card__tag{
  color:#110c04;
  background:linear-gradient(120deg,#fff1b8,var(--gold-whisper));
  border-color:rgba(216,196,138,.9);
  box-shadow:0 0 18px rgba(216,196,138,.34);
}
#telecharger .price-card--vip .price-card__ribbon{
  color:#100804;
  background:linear-gradient(120deg,#fff1b8,var(--arcane),#fff1b8);
  box-shadow:0 8px 24px rgba(216,116,46,.26);
}
@media (max-width:800px){
  #telecharger .pricing-grid .price-card,
  #telecharger .pricing-grid .price-card--featured,
  #telecharger .pricing-grid .price-card--vip{--esc:1}
}

/* ===== v26 — clean offer cards, generic copy ===== */
.hero{
  padding-top:clamp(24px,5.5vh,62px);
}
.hero__logo{
  margin-top:0;
}
.hero::after{
  top:clamp(12px,4.5vh,58px);
}
.hero__badge{
  display:none!important;
}
#telecharger .section__head{
  max-width:720px;
}
#telecharger .section__head p{
  color:#f2debd;
}
#telecharger .pricing-grid{
  gap:clamp(14px,2.1vw,22px);
}
#telecharger .price-card{
  --esc:1;
  --offer-accent:var(--emerald);
  --offer-accent-2:#86f4cc;
  min-height:360px;
  gap:18px;
  padding:clamp(20px,2.4vw,28px);
  border:0;
  border-radius:8px;
  background:
    radial-gradient(110% 70% at 14% -12%,rgba(70,211,154,.20),transparent 62%),
    linear-gradient(180deg,rgba(8,20,17,.96),rgba(6,8,11,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(70,211,154,.16),
    0 18px 48px rgba(0,0,0,.44);
  filter:none!important;
  opacity:1!important;
  transform:none;
}
#telecharger .price-card:hover{
  transform:translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 26px 64px rgba(0,0,0,.54),
    0 0 28px rgba(70,211,154,.15);
}
#telecharger .price-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  width:100%;
  height:5px;
  border-radius:0;
  background:linear-gradient(90deg,var(--offer-accent),var(--offer-accent-2));
  opacity:1;
  pointer-events:none;
  box-shadow:0 0 22px rgba(70,211,154,.22);
}
#telecharger .price-card::after,
#telecharger .price-card--featured::after,
#telecharger .price-card--vip::after{
  content:none;
  display:none;
}
#telecharger .price-card--featured{
  --offer-accent:var(--rune-2);
  --offer-accent-2:var(--arcane);
  z-index:1;
  background:
    radial-gradient(120% 80% at 12% -12%,rgba(165,148,255,.30),transparent 60%),
    radial-gradient(100% 70% at 100% 12%,rgba(216,116,46,.18),transparent 62%),
    linear-gradient(180deg,rgba(17,13,33,.98),rgba(7,8,16,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(165,148,255,.22),
    0 22px 62px rgba(0,0,0,.52),
    0 0 32px rgba(139,123,255,.18);
}
#telecharger .price-card--vip{
  --offer-accent:var(--gold-whisper);
  --offer-accent-2:var(--arcane);
  z-index:2;
  background:
    radial-gradient(110% 76% at 12% -12%,rgba(216,196,138,.28),transparent 62%),
    radial-gradient(100% 72% at 100% 18%,rgba(216,116,46,.20),transparent 64%),
    linear-gradient(180deg,rgba(31,20,9,.98),rgba(8,7,8,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(216,196,138,.24),
    0 24px 68px rgba(0,0,0,.58),
    0 0 36px rgba(216,116,46,.18);
}
#telecharger .price-card__tag{
  width:max-content;
  border:0;
  border-radius:6px;
  padding:7px 10px;
  color:#07080b;
  background:linear-gradient(120deg,var(--offer-accent),var(--offer-accent-2));
  font-weight:900;
  letter-spacing:.12em;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
#telecharger .price-card h3{
  color:#fffaf0;
  font-size:clamp(2rem,4vw,2.8rem);
  letter-spacing:0;
  text-shadow:0 1px 0 rgba(0,0,0,.55),0 0 18px rgba(255,255,255,.08);
}
#telecharger .price-card p.price-card__copy{
  color:#f5efe5;
  font-size:1rem;
  line-height:1.62;
  max-width:29ch;
}
#telecharger .price-card__meta{
  display:inline-flex;
  width:fit-content;
  align-items:center;
  gap:8px;
  margin-top:2px;
  padding:9px 11px;
  border-radius:8px;
  color:#f8ead4;
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  font-size:.86rem;
  line-height:1.35;
  font-weight:700;
}
#telecharger .price-card__meta::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--offer-accent);
  box-shadow:0 0 12px var(--offer-accent);
}
#telecharger .price-card__ribbon{
  top:16px;
  right:16px;
  max-width:min(42%,170px);
  border-radius:6px;
  padding:7px 9px;
  color:#120b05;
  background:linear-gradient(120deg,#fff1b8,var(--gold-whisper));
  box-shadow:0 10px 26px rgba(216,196,138,.18);
}
#telecharger .price-card .btn{
  min-height:48px;
  border:0;
  border-radius:8px;
  color:#090706;
  background:linear-gradient(120deg,var(--offer-accent),var(--offer-accent-2));
  box-shadow:0 16px 34px rgba(0,0,0,.28),0 0 20px rgba(216,116,46,.12);
}
#telecharger .price-card .btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 20px 44px rgba(0,0,0,.36),0 0 28px rgba(216,116,46,.18);
}
#telecharger .price-card .btn--ghost{
  color:#eafff5;
  background:rgba(70,211,154,.12);
  border:1px solid rgba(70,211,154,.42);
  box-shadow:inset 0 0 0 1px rgba(70,211,154,.08);
}
#telecharger .price-card .btn--ghost:hover{
  color:#06110e;
  background:linear-gradient(120deg,var(--emerald),#86f4cc);
}
#telecharger .pricing-note{
  color:#e3d0b2;
  letter-spacing:.02em;
}
@media (max-width:980px){
  .hero{
    padding-top:clamp(18px,4vh,34px);
  }
  #telecharger .price-card{
    min-height:0;
  }
}
@media (max-width:560px){
  #telecharger .price-card{
    padding:20px;
  }
  #telecharger .price-card__ribbon{
    position:static;
    max-width:none;
    align-self:flex-start;
  }
}

/* ===== v29 - clean startup transition without hard background panels ===== */
#telecharger{
  overflow:hidden;
  padding-bottom:clamp(76px,8vh,112px);
}
#how{
  isolation:auto;
  margin-top:0;
  padding-top:clamp(34px,5vh,58px);
  background:transparent;
}
#how::before{
  content:none !important;
  display:none !important;
}
#how::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(560px,64vw);
  height:1px;
  transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(216,116,46,.38),rgba(139,123,255,.24),transparent);
  box-shadow:0 0 16px rgba(216,116,46,.16);
}
#how .section__head{
  position:relative;
  z-index:0;
}
#how .section__head::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:50%;
  width:min(620px,86vw);
  height:220px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:radial-gradient(closest-side,rgba(216,116,46,.10),rgba(139,123,255,.06) 42%,transparent 72%);
  filter:blur(28px);
  opacity:.78;
}
@media (max-width:700px){
  #how .section__head::before{
    height:160px;
    opacity:.55;
  }
}