:root {
    --bg: #F4F8F5;
    --surface: #FFFFFF;
    --surface-2: #EAF1EC;
    --surface-3: #DDE9E0;
    --ink: #0B1712;
    --ink-soft: #55655C;
    --line: #D9E3DB;
    --pitch: #0A7A56;
    --pitch-deep: #073826;
    --pitch-tint: #E1F1E8;
    --gold: #B8860F;
    --gold-tint: #F8ECD8;
    --accent: #0097B2;
    --accent-tint: #E1F4F7;
    --safe: #1E8E5A;
    --safe-tint: #E3F5EC;
    --balanced: #B8860F;
    --balanced-tint: #FBF0DC;
    --risky: #B23A22;
    --risky-tint: #FBE7E1;
    --combi: #4B4FC6;
    --combi-tint: #E9E9FB;
    --shadow: rgba(11, 27, 20, 0.10);
    --shadow-sm: 0 1px 2px rgba(11, 23, 18, 0.06), 0 1px 1px rgba(11, 23, 18, 0.04);
    --shadow-md: 0 6px 16px rgba(11, 23, 18, 0.08), 0 2px 6px rgba(11, 23, 18, 0.06);
    --shadow-lg: 0 16px 40px rgba(11, 23, 18, 0.14), 0 4px 12px rgba(11, 23, 18, 0.08);
    --glow-pitch: 0 0 0 1px rgba(10, 122, 86, 0.15), 0 8px 24px rgba(10, 122, 86, 0.18);
    --radius-lg: 18px;
    --radius-md: 13px;
    --radius-sm: 9px;
    --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
    --font-body: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
    --transition-fast: 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
    --transition-normal: 300ms cubic-bezier(0.2, 0, 0.38, 0.9);
    --transition-slow: 500ms cubic-bezier(0.2, 0, 0.38, 0.9);
  }
  /* Theme sombre premium. Les fonds sont volontairement neutres plutot que
     verdatres : le vert reste alors la couleur du produit (donnee, gain,
     action) au lieu de teinter toute la surface, et l'or ressort comme
     signal premium. Les deux blocs qui suivent doivent rester identiques —
     l'un sert le reglage systeme, l'autre le choix explicite. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #07090C;
      --surface: #0F1319;
      --surface-2: #161B23;
      --surface-3: #1F262F;
      --ink: #F1F5F9;
      --ink-soft: #94A3B4;
      --line: #232B36;
      --pitch: #24DD97;
      --pitch-deep: #0A2E23;
      --pitch-tint: #0D2419;
      --gold: #F3C563;
      --gold-tint: #2A2113;
      --accent: #38D9F0;
      --accent-tint: #0D2A31;
      --safe: #2FD394;
      --safe-tint: #0D2A1E;
      --balanced: #F3C563;
      --balanced-tint: #2A2113;
      --risky: #F58975;
      --risky-tint: #2E1813;
      --combi: #9AA0F7;
      --combi-tint: #1C1E3C;
      --shadow: rgba(0, 0, 0, 0.55);
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.3);
      --shadow-md: 0 8px 24px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.35);
      --shadow-lg: 0 24px 56px rgba(0,0,0,0.6), 0 6px 18px rgba(0,0,0,0.4);
      --glow-pitch: 0 0 0 1px rgba(36, 221, 151, 0.28), 0 0 32px rgba(36, 221, 151, 0.2);
    }
  }
  :root[data-theme="dark"] {
    --bg: #07090C;
    --surface: #0F1319;
    --surface-2: #161B23;
    --surface-3: #1F262F;
    --ink: #F1F5F9;
    --ink-soft: #94A3B4;
    --line: #232B36;
    --pitch: #24DD97;
    --pitch-deep: #0A2E23;
    --pitch-tint: #0D2419;
    --gold: #F3C563;
    --gold-tint: #2A2113;
    --accent: #38D9F0;
    --accent-tint: #0D2A31;
    --safe: #2FD394;
    --safe-tint: #0D2A1E;
    --balanced: #F3C563;
    --balanced-tint: #2A2113;
    --risky: #F58975;
    --risky-tint: #2E1813;
    --combi: #9AA0F7;
    --combi-tint: #1C1E3C;
    --shadow: rgba(0, 0, 0, 0.55);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.3);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.35);
    --shadow-lg: 0 24px 56px rgba(0,0,0,0.6), 0 6px 18px rgba(0,0,0,0.4);
    --glow-pitch: 0 0 0 1px rgba(36, 221, 151, 0.28), 0 0 32px rgba(36, 221, 151, 0.2);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; color-scheme: light dark; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    margin: 0;
  }
  ::selection { background: var(--pitch); color: #fff; }
  h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; margin: 0; letter-spacing: 0.01em; }
  p { margin: 0; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
  table { border-collapse: collapse; width: 100%; }
  .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .text-safe { color: var(--safe); }
  .text-risky { color: var(--risky); }

  #app { display: flex; flex-direction: column; min-height: 100vh; }

  .topbar {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--pitch-deep) 0%, color-mix(in srgb, var(--pitch-deep) 75%, black) 100%);
    color: #fff;
    box-shadow: 0 2px 14px rgba(0,0,0,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .wordmark { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 0.02em; text-shadow: 0 1px 8px rgba(0,0,0,0.25); }
  .wordmark-30 { color: var(--gold); }
  .demo-pill {
    font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 999px;
    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .shell {
    flex: 1;
    width: 100%; max-width: 560px; margin: 0 auto;
    padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 16px;
  }

  .ticker { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 92%, transparent); }
  .ticker::-webkit-scrollbar { display: none; }
  .ticker-chip {
    flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px;
    padding: 8px 12px; border-radius: var(--radius-md);
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    text-align: left; min-width: 108px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .ticker-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .ticker-chip.is-active { border-color: var(--pitch); box-shadow: var(--glow-pitch); }
  .ticker-teams { font-weight: 600; font-size: 13px; display: flex; gap: 4px; align-items: center; }
  .ticker-teams em { font-style: normal; color: var(--ink-soft); }
  .ticker-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }

  .live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--risky); display: inline-block;
    box-shadow: 0 0 0 0 rgba(242, 131, 106, 0.6);
    animation: pulse-live 1.6s ease-in-out infinite;
  }
  @keyframes pulse-live {
    0% { box-shadow: 0 0 0 0 rgba(242, 131, 106, 0.55); transform: scale(1); }
    70% { box-shadow: 0 0 0 7px rgba(242, 131, 106, 0); transform: scale(1.05); }
    100% { box-shadow: 0 0 0 0 rgba(242, 131, 106, 0); transform: scale(1); }
  }

  .hero {
    background: linear-gradient(155deg, var(--pitch-deep) 0%, var(--pitch) 68%, color-mix(in srgb, var(--pitch) 70%, var(--accent)) 130%);
    background-size: 180% 180%;
    animation: hero-drift 12s ease-in-out infinite;
    border-radius: var(--radius-lg);
    padding: 18px;
    color: #fff;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 800px;
  }
  .hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120px 90px at 12% -10%, rgba(255,255,255,0.16), transparent 70%);
  }
  @keyframes hero-drift { 0%, 100% { background-position: 0% 30%; } 50% { background-position: 100% 70%; } }
  @media (prefers-reduced-motion: reduce) { .hero { animation: none; } }
  .hero-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; z-index: 1; }
  .hero-league { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.78); }
  .fav-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,0.12); transition: transform .15s ease, background .18s ease; }
  .fav-btn:hover { background: rgba(255,255,255,0.2); transform: translateY(-1px); }
  .fav-btn:active { transform: scale(.9); }
  .fav-btn svg { width: 17px; height: 17px; }
  .fav-btn.is-fav { color: var(--gold); background: rgba(255,255,255,0.2); }
  .hero-teams { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; z-index: 1; }
  .hero-team { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
  /* Couleurs codees en dur, elles restaient claires sur le theme sombre et
     decoupaient un rectangle jaune vif au milieu de la page. Les jetons d'or
     suivent le theme actif. */
  .data-banner {
    margin: 10px 0; padding: 10px 12px; border-radius: var(--radius-sm);
    background: var(--gold-tint);
    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
    color: var(--gold);
    font-size: 12px; line-height: 1.45;
    box-shadow: var(--shadow-sm);
  }
  .data-banner a { color: var(--gold); font-weight: 600; }

  .crest {
    width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,255,255,0.12);
    position: relative;
    transition: transform .2s ease;
  }
  .hero-team:hover .crest { transform: translateY(-2px) scale(1.03); }
  /* Le logo recouvre les initiales ; s'il ne charge pas il est retire et les initiales restent. */
  .crest-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; padding: 6px; border-radius: 50%;
    background: #fff;
  }
  .team-logo-sm {
    width: 16px; height: 16px; object-fit: contain; vertical-align: middle; flex: none;
  }
  .league-logo-sm {
    width: 18px; height: 18px; object-fit: contain; vertical-align: middle;
    background: #fff; border-radius: 4px; padding: 1px;
  }
  .hero-team-name { font-size: 12px; font-weight: 600; text-align: center; }
  .hero-center { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 84px; position: relative; z-index: 1; }
  .hero-vs { font-family: var(--font-display); font-size: 15px; color: rgba(255,255,255,0.7); }
  .hero-score { font-family: var(--font-display); font-size: 36px; font-weight: 800; display: flex; gap: 8px; text-shadow: 0 2px 12px rgba(0,0,0,0.3); }
  .hero-score span { color: rgba(255,255,255,0.55); }
  .hero-kickoff { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.75); }
  .live-badge { font-size: 11px; font-weight: 700; color: var(--gold); display: flex; align-items: center; gap: 5px; letter-spacing: 0.02em; }

  /* overscroll-behavior-x: contain empeche le defilement horizontal de cette
     barre de se propager a la page : sur iOS, arriver au bout de la liste
     transformait la suite du geste en navigation arriere du navigateur, ce
     qui donnait l'impression que les onglets se bloquaient et que l'ecran
     partait en swipe. touch-action autorise explicitement le balayage
     horizontal ici et le defilement vertical ailleurs.
     scroll-padding garde l'onglet amene en vue a distance des bords. */
  .tabnav {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scroll-behavior: smooth;
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  .tabnav::-webkit-scrollbar { display: none; }
  .tab-pill {
    flex: 0 0 auto; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
    color: var(--ink-soft); background: var(--surface-2); border: 1px solid transparent;
    transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
  }
  .tab-pill:hover { transform: translateY(-1px); }
  .tab-pill.is-active { background: linear-gradient(135deg, var(--pitch), color-mix(in srgb, var(--pitch) 75%, black)); color: #fff; box-shadow: var(--glow-pitch); }

  .tabpanel { display: flex; flex-direction: column; gap: 12px; animation: fade-in 0.3s cubic-bezier(.2,.8,.3,1); }
  @keyframes fade-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .tabpanel, .live-dot { animation: none; } }

  .card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 16px; box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 10px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .card-title { font-size: 15px; font-weight: 700; letter-spacing: 0.01em; }
  .hint { font-size: 12px; color: var(--ink-soft); }

  .stat-row { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 8px; }
  .stat-row + .stat-row { margin-top: 2px; }
  .stat-val { font-family: var(--font-mono); font-size: 12px; text-align: right; }
  .stat-val-left { text-align: left; }
  .stat-label { grid-column: 1 / -1; font-size: 11px; color: var(--ink-soft); margin-top: -4px; }
  .stat-bar { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.08); }
  .stat-bar-fill { height: 100%; background: linear-gradient(90deg, var(--pitch), color-mix(in srgb, var(--pitch) 70%, var(--accent))); border-radius: 999px; animation: bar-grow .6s cubic-bezier(.2,.8,.3,1) both; }
  @keyframes bar-grow { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }

  .xg-row { display: flex; align-items: center; gap: 10px; }
  .xg-num { font-size: 18px; font-weight: 700; }
  .xg-bar { flex: 1; height: 9px; border-radius: 999px; background: var(--risky-tint); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.08); }
  .xg-fill { height: 100%; background: linear-gradient(90deg, var(--pitch), var(--accent)); animation: bar-grow .6s cubic-bezier(.2,.8,.3,1) both; }

  .scoreline-chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .scoreline-chip {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 9px 13px; border-radius: var(--radius-md); background: var(--surface-2); min-width: 64px;
    border: 1px solid transparent;
    transition: transform .15s ease, border-color .15s ease;
  }
  .scoreline-chip:hover { transform: translateY(-2px); border-color: var(--pitch); }
  .scoreline-pct { font-size: 11px; color: var(--ink-soft); font-family: var(--font-mono); }

  .level-block { display: flex; flex-direction: column; gap: 10px; }
  .level-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
  .dot { width: 9px; height: 9px; border-radius: 50%; }
  .tone-safe { background: var(--safe); color: var(--safe); }
  .tone-balanced { background: var(--balanced); color: var(--balanced); }
  .tone-risky { background: var(--risky); color: var(--risky); }
  .tone-combi { background: var(--combi); color: var(--combi); }
  .empty { font-size: 13px; color: var(--ink-soft); font-style: italic; }

  .pick-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 13px; display: flex; flex-direction: column; gap: 8px;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .pick-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .pick-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .pick-label { font-weight: 700; font-size: 13.5px; }
  .risk-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
  .risk-badge.tone-safe { background: var(--safe-tint); color: var(--safe); }
  .risk-badge.tone-balanced { background: var(--balanced-tint); color: var(--balanced); }
  .risk-badge.tone-risky { background: var(--risky-tint); color: var(--risky); }
  .risk-badge.tone-combi { background: var(--combi-tint); color: var(--combi); }
  .pick-metrics { display: flex; gap: 14px; }
  .metric { display: flex; flex-direction: column; }
  .metric-val { font-size: 15px; font-weight: 700; }
  .metric-name { font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
  .pick-reasons li { font-size: 12px; color: var(--ink-soft); padding-left: 12px; position: relative; }
  .pick-reasons li::before { content: '–'; position: absolute; left: 0; }
  .pick-warning { font-size: 11.5px; color: var(--risky); font-weight: 500; }
  .unit-tag { align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--pitch); background: var(--pitch-tint); padding: 3px 9px; border-radius: 999px; }
  .combi-legs li { font-size: 12px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
  .combi-legs li:last-child { border-bottom: none; }

  .summary-card { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(184,134,15,0.12), var(--shadow-sm); }
  .summary-text { font-size: 14px; font-weight: 600; }

  .signal-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
  .signal-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; background: var(--surface-2); border-radius: var(--radius-sm); text-align: center; }
  .signal-val { font-size: 15px; font-weight: 700; color: var(--gold); }
  .signal-label { font-size: 9.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2; }
  @media (max-width: 480px) { .signal-chips { grid-template-columns: repeat(2, 1fr); } }

  .edge-table { display: flex; flex-direction: column; }
  .edge-row { display: grid; grid-template-columns: 1.6fr 0.8fr 0.8fr 1fr; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
  .edge-row:last-of-type { border-bottom: none; }
  .edge-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); }
  .edge-label { font-weight: 600; }
  .edge-delta { font-weight: 700; text-align: right; }
  .edge-delta.tone-safe { color: var(--safe); }
  .edge-delta.tone-risky { color: var(--risky); }
  .edge-delta.tone-neutral-txt { color: var(--ink-soft); }

  /* Colonnes fixes (pas auto-fit) : avec un nombre pair de cartes, garantit
     toujours des rangées completes (2x2, 2x3...) quelle que soit la largeur
     d'ecran, plutot qu'une derniere carte orpheline selon le nombre de
     colonnes que l'auto-fit decide d'adopter. */
  .trend-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .trend-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 12px 8px; border-radius: var(--radius-md); background: var(--surface-2);
    text-align: center;
  }
  .trend-card-title { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
  .trend-card-rings { display: flex; gap: 18px; align-items: flex-start; }
  .trend-ring-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .trend-ring-label { font-size: 12px; font-weight: 700; fill: var(--ink); font-family: var(--font-mono); }
  .trend-ring-team { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; }
  .avg-stat-row { display: flex; justify-content: center; gap: 28px; }
  .avg-stat-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .avg-stat-val { font-size: 24px; font-weight: 800; color: var(--ink); }

  .gated-wrapper { position: relative; }
  .gated-content { display: flex; flex-direction: column; gap: 12px; filter: blur(6px); pointer-events: none; user-select: none; opacity: 0.45; }
  .lock-overlay {
    position: absolute; inset: 0; pointer-events: auto; z-index: 10;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    backdrop-filter: blur(2px);
    border-radius: var(--radius-lg); text-align: center; padding: 16px;
  }
  .lock-overlay svg { width: 26px; height: 26px; color: var(--gold); filter: drop-shadow(0 2px 6px rgba(184,134,15,0.35)); }
  .lock-overlay span:nth-child(2) { font-size: 13px; font-weight: 600; max-width: 220px; }
  .lock-cta {
    font-size: 12.5px; font-weight: 700; color: var(--pitch-deep);
    background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 70%, white));
    padding: 8px 16px; border-radius: 999px; box-shadow: 0 6px 16px rgba(184,134,15,0.3);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .lock-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(184,134,15,0.4); }
  :root:not([data-theme="light"]) .lock-cta { color: #14100a; }

  .kv-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
  .kv-row:last-child { border-bottom: none; }

  .h2h-split { display: flex; height: 34px; border-radius: 999px; overflow: hidden; box-shadow: var(--shadow-sm); }
  .h2h-split .h2h-seg { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; background: var(--pitch); line-height: 1.1; }
  .h2h-seg.tone-neutral { background: var(--ink-soft); }
  .h2h-seg.tone-away { background: var(--combi); }
  .table-scroll { overflow-x: auto; }
  .h2h-table, .standings-table { min-width: 320px; font-size: 12.5px; }
  .h2h-table th, .h2h-table td, .standings-table th, .standings-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; }
  .standings-table td:nth-child(1), .standings-table td:nth-child(3), .standings-table td:nth-child(4) { text-align: right; }
  .standings-table th:nth-child(1), .standings-table th:nth-child(3), .standings-table th:nth-child(4) { text-align: right; }
  tr.is-highlight { background: var(--pitch-tint); font-weight: 600; }

  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .form-col h4 { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
  .form-chips { display: flex; gap: 4px; margin-bottom: 8px; }
  .form-chip { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; box-shadow: var(--shadow-sm); }
  .form-chip.tone-safe { background: var(--safe); }
  .form-chip.tone-risky { background: var(--risky); }
  .form-chip.tone-neutral { background: var(--ink-soft); }
  .form-detail li { font-size: 11px; color: var(--ink-soft); padding: 2px 0; }
  @media (max-width: 420px) { .form-grid { grid-template-columns: 1fr; } }

  .pitch { background: var(--pitch-tint); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 10px; position: relative; }
  .pitch-half { display: flex; flex-direction: column; gap: 8px; }
  .pitch-row { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
  .pitch-formation { font-size: 11px; font-weight: 700; color: var(--pitch-deep); text-align: center; }
  :root:not([data-theme="light"]) .pitch-formation { color: var(--pitch); }
  .pitch-mid-line { height: 1px; background: var(--line); }
  .player-chip { font-size: 10.5px; font-weight: 600; padding: 4px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
  .player-chip.away { background: var(--combi-tint); }

  /* fixed, et non sticky : la barre vit desormais dans #navhost, un hote de
     sa propre hauteur, ou sticky n'a aucune marge de manoeuvre et retombe au
     bas du document. .shell reserve deja 96px en bas pour elle. */
  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    display: flex; justify-content: space-around;
    background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(0,0,0,0.06);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink-soft); flex: 1; padding: 4px; transition: color .18s ease, transform .15s ease; }
  .nav-item svg { width: 20px; height: 20px; }
  .nav-item span { font-size: 10.5px; font-weight: 600; }
  .nav-item:hover { color: var(--pitch); transform: translateY(-1px); }
  .nav-item:focus-visible, .tab-pill:focus-visible, .ticker-chip:focus-visible, button:focus-visible { outline: 2px solid var(--pitch); outline-offset: 2px; }

  .modal-backdrop {
    position: fixed; inset: 0; background: rgba(6, 12, 9, 0.6); backdrop-filter: blur(3px); z-index: 20;
    display: flex; align-items: flex-end; justify-content: center; padding: 16px;
    animation: fade-in 0.2s ease-out;
  }
  @media (min-width: 560px) { .modal-backdrop { align-items: center; } }
  .modal {
    position: relative; width: 100%; max-width: 420px; background: var(--surface);
    border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 10px;
    box-shadow: var(--shadow-lg);
  }
  .modal-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink-soft); }
  .modal-close svg { width: 16px; height: 16px; }
  .modal-eyebrow { font-size: 11px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.04em; }
  .modal-title { font-size: 20px; font-weight: 700; padding-right: 20px; }
  .modal-benefits li { font-size: 13px; padding: 4px 0 4px 16px; position: relative; }
  .modal-benefits li::before { content: '✓'; position: absolute; left: 0; color: var(--safe); font-weight: 700; }
  .cta-gold {
    margin-top: 4px; padding: 12px; border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 70%, white));
    color: #1a1206;
    font-weight: 700; font-size: 14px; text-align: center;
    box-shadow: 0 8px 20px rgba(184,134,15,0.28);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .cta-gold:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(184,134,15,0.36); }
  .modal-fineprint { font-size: 11px; color: var(--ink-soft); }

.cta-blue, .cta-green {
  display: flex; align-items: center; justify-content: center;
  padding: 14px; border-radius: 12px; text-decoration: none; color: white;
  font-weight: 600; font-size: 15px; transition: transform 0.2s, opacity 0.2s, box-shadow .2s;
  box-shadow: var(--shadow-sm);
}
.cta-blue { background: linear-gradient(135deg, #0088cc, #005e8f); }
.cta-green { background: linear-gradient(135deg, #25D366, #128C4A); }
.cta-blue:hover, .cta-green:hover { transform: translateY(-1px) scale(1.01); box-shadow: var(--shadow-md); }

/* MELBET BANNER & SUPPORT */
.melbet-banner {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, #ffd54a, #f0b800); color: #241a00; padding: 7px 14px; border-radius: 8px;
  text-decoration: none; font-weight: 700; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.5px; box-shadow: 0 4px 12px rgba(240,184,0,0.3);
  animation: melbet-pulse 2.4s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes melbet-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(240,184,0,0.3); transform: scale(1); }
  50% { box-shadow: 0 4px 22px rgba(240,184,0,0.6); transform: scale(1.03); }
}
.support-btn {
  display: flex; align-items: center; gap: 6px; color: white; text-decoration: none;
  font-size: 14px; font-weight: 600; background: rgba(255,255,255,0.12); padding: 6px 12px;
  border-radius: 20px; border: 1px solid rgba(255,255,255,0.14);
  transition: background .18s ease;
}
.support-btn:hover { background: rgba(255,255,255,0.22); }
.support-btn svg { width: 16px; height: 16px; }

/* Sur mobile, le bandeau MELBET passait auparavant en display:none faute de
   place dans le topbar : c'etait le veritable "bandeau pas assez visible"
   signale, puisqu'il etait carrement invisible pour tous les visiteurs
   mobiles (l'essentiel du trafic). On le fait plutot passer sur sa propre
   ligne, pleine largeur, bien visible. */
@media(max-width: 600px) {
  .topbar { padding: 10px 12px 0; flex-wrap: wrap; row-gap: 8px; }
  .wordmark { order: 1; }
  .support-btn { order: 2; margin-left: auto; }
  .icon-btn { order: 3; }
  .melbet-banner {
    order: 4; width: 100%; padding: 10px 12px; font-size: 13.5px; margin-bottom: 8px;
  }
}

/* Payment UI Improvements */
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.plan-label {
  display: flex; flex-direction: column; padding: 12px; border: 1px solid #333;
  border-radius: var(--radius-sm); cursor: pointer; text-align: center; background: #1a1a1a;
  transition: all 0.2s ease;
}
.plan-label:has(input:checked) {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.plan-label input:checked ~ .plan-price { color: var(--gold); }
.plan-duration { font-size: 13px; color: #a1a1aa; margin-bottom: 4px; font-weight: 600; }
.plan-price { font-weight: 700; color: #fff; font-size: 15px; transition: color 0.2s; }

.pm-select-wrapper { position: relative; margin-bottom: 16px; }
.pm-select {
  width: 100%; padding: 14px 12px 14px 40px; border-radius: var(--radius-sm);
  border: 1px solid #333; background: #000; color: white;
  appearance: none; font-size: 14px; font-weight: 500;
}
.pm-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; pointer-events: none; }
.pm-select:focus { border-color: var(--gold); outline: none; }

.pay-modal { max-width: 460px; }
.secure-badge { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--safe); margin-top: 12px; }
.secure-badge svg { width: 14px; height: 14px; }

/* New Payment Method Radio List */
.pm-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pm-label {
  display: flex; align-items: center; padding: 12px 14px; border: 1px solid #2a2a2a;
  border-radius: var(--radius-sm); cursor: pointer; background: #0d0f0d; transition: all 0.2s ease;
}
.pm-label:hover { border-color: #444; }
.pm-label:has(input:checked) {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent);
}
.pm-label input { display: none; }
.pm-content { display: flex; align-items: center; gap: 14px; width: 100%; font-size: 14px; font-weight: 600; color: #e4e4e7; }
.pm-label:has(input:checked) .pm-content { color: #fff; }

/* Premium Fullscreen Paywall */
.paywall-fullscreen {
  position: fixed; inset: 0; z-index: 1000;
  background:
    radial-gradient(50vw 50vw at 8% 0%, rgba(46,217,150,0.14), transparent 60%),
    radial-gradient(45vw 45vw at 95% 15%, rgba(51,214,242,0.14), transparent 60%),
    linear-gradient(160deg, #0b0f14 0%, #111a2e 55%, #16213d 100%);
  color: #fff; overflow-y: auto; padding: 40px 20px;
  animation: fade-in 0.35s cubic-bezier(.2,.8,.3,1);
}
.paywall-container { max-width: 1000px; margin: 0 auto; position: relative; }
.paywall-close {
  position: absolute; top: -10px; right: 0px;
  background: rgba(255,255,255,0.1); border: none; color: #fff;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s, transform .15s; z-index: 10;
}
.paywall-close:hover { background: rgba(255,255,255,0.2); transform: rotate(90deg); }

.premium-hero { text-align: center; margin-bottom: 50px; animation: fade-in .5s cubic-bezier(.2,.8,.3,1) both; }
.premium-logo-mark {
  width: 60px; height: 60px; background: linear-gradient(135deg, #f4a025, #00d4ff);
  border-radius: 16px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; font-weight: 700; font-size: 30px;
  box-shadow: 0 10px 30px rgba(244,160,37,0.35);
  animation: logo-float 4s ease-in-out infinite;
}
@keyframes logo-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .premium-logo-mark { animation: none; } }
.premium-hero h1 {
  font-size: 34px; font-weight: 700; margin-bottom: 12px;
  background: linear-gradient(135deg, #f4a025 0%, #fff 60%, #33D6F2 120%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.premium-hero p { font-size: 16px; color: #b0b5c1; margin-bottom: 8px; }
.premium-tagline { font-size: 14px; color: #00d4ff; font-weight: 500; }

.premium-pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px; margin-bottom: 40px;
  perspective: 1200px;
}
.premium-card {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(244, 160, 37, 0.2);
  border-radius: 18px; padding: 28px; position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color .3s ease;
  cursor: pointer; display: block;
  transform-style: preserve-3d;
  animation: card-rise .5s cubic-bezier(.2,.8,.3,1) both;
}
.premium-pricing-grid .premium-card:nth-child(1) { animation-delay: .04s; }
.premium-pricing-grid .premium-card:nth-child(2) { animation-delay: .1s; }
.premium-pricing-grid .premium-card:nth-child(3) { animation-delay: .16s; }
.premium-pricing-grid .premium-card:nth-child(4) { animation-delay: .22s; }
@keyframes card-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.premium-card:hover { border-color: rgba(244, 160, 37, 0.5); transform: translateY(-6px) rotateX(2deg); box-shadow: 0 20px 40px rgba(0, 212, 255, 0.14); }
.premium-card.premium-featured { border: 2px solid #f4a025; background: rgba(244, 160, 37, 0.08); }
.premium-card.premium-featured:hover { transform: translateY(-6px) rotateX(2deg); }
.premium-card:has(input:checked) { border-color: #00d4ff; background: rgba(0, 212, 255, 0.05); box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2); }
.premium-card.premium-featured:has(input:checked) { border-color: #f4a025; background: rgba(244, 160, 37, 0.15); box-shadow: 0 0 0 2px rgba(244, 160, 37, 0.4); }

.premium-badge {
  position: absolute; top: -12px; left: 20px; background: linear-gradient(135deg, #f4a025, #ff8c00);
  padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: #000;
  box-shadow: 0 4px 12px rgba(244,160,37,0.4);
}
.premium-duration { font-size: 13px; color: #00d4ff; font-weight: 600; text-transform: uppercase; margin-top: 12px; }
.premium-price { font-size: 30px; font-weight: 700; color: #f4a025; margin: 12px 0; font-family: 'Courier New', monospace; }
.premium-currency { font-size: 14px; margin-left: 4px; }
.premium-price-subtitle { font-size: 12px; color: #b0b5c1; margin-bottom: 20px; }
.premium-features { list-style: none; margin-bottom: 20px; padding: 0; }
.premium-features li { font-size: 13px; color: #d0d4e0; margin-bottom: 10px; padding-left: 20px; position: relative; }
.premium-features li:before { content: "✓"; position: absolute; left: 0; color: #00d4ff; font-weight: bold; }

.premium-fake-btn {
  width: 100%; padding: 12px 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: #fff; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; text-align: center; text-transform: uppercase;
  transition: all 0.2s ease;
}
.premium-card:has(input:checked) .premium-fake-btn {
  background: linear-gradient(135deg, #f4a025, #ff8c00); color: #0f1419; border: none;
}
.premium-card.premium-featured:has(input:checked) .premium-fake-btn {
  background: linear-gradient(135deg, #00d4ff, #00a8cc); color: #0f1419;
}

.premium-form-section {
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(244, 160, 37, 0.15);
  border-radius: 18px; padding: 32px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  animation: fade-in .5s cubic-bezier(.2,.8,.3,1) .2s both;
}
.premium-form-title { font-size: 18px; font-weight: 600; margin-bottom: 20px; color: #fff; }
.premium-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 600px) { .premium-form-grid { grid-template-columns: 1fr; } }

.premium-form-group { display: flex; flex-direction: column; }
.premium-form-group label { font-size: 12px; font-weight: 600; margin-bottom: 8px; color: #b0b5c1; text-transform: uppercase; }
.premium-form-group input {
  padding: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(244, 160, 37, 0.2);
  border-radius: var(--radius-sm); color: #fff; font-size: 14px; transition: all 0.3s ease; box-sizing: border-box; width: 100%;
}
.premium-form-group input:focus { outline: none; border-color: #00d4ff; background: rgba(0, 212, 255, 0.05); box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.14); }

.premium-submit-btn {
  width: 100%; padding: 17px; background: linear-gradient(135deg, #00d4ff, #00a8cc);
  color: #0f1419; border: none; border-radius: var(--radius-sm); font-weight: 700; font-size: 15px;
  cursor: pointer; transition: all 0.25s ease; text-transform: uppercase; margin-top: 24px;
  box-shadow: 0 10px 26px rgba(0,212,255,0.28);
}
.premium-submit-btn:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 14px 32px rgba(0, 212, 255, 0.36); }
.premium-submit-btn:active { transform: translateY(0) scale(.99); }
.premium-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.premium-guarantee { text-align: center; font-size: 12px; color: #6a7080; margin-top: 16px; }

/* Fix PM options inside premium layout */
.premium-form-section .pm-label { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
.premium-form-section .pm-label:has(input:checked) { border-color: #00d4ff; background: rgba(0, 212, 255, 0.1); }

/* ============================================================
   HALL30 — couche interactive (filtres, live, panier, thème)
   ============================================================ */

/* ---------- Squelette de chargement ---------- */
@keyframes sk-shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
.sk {
  height: 14px; border-radius: 6px; margin: 10px 0;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%);
  background-size: 600px 100%;
  animation: sk-shimmer 1.3s linear infinite;
}
.sk-hero { height: 150px; border-radius: var(--radius-lg); margin: 12px 0; }
.sk-chip { height: 34px; width: 90px; border-radius: 999px; margin: 0; }
.sk-pill { height: 32px; width: 104px; border-radius: 999px; margin: 0; }
.sk-row { display: flex; gap: 8px; overflow: hidden; margin: 12px 0; }

/* ---------- Barre de filtres ---------- */
.filterbar { margin: 12px 0 4px; }
.search-input {
  width: 100%; padding: 12px 16px; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; outline: none; box-shadow: var(--shadow-sm);
  transition: border-color .18s, box-shadow .18s;
}
.search-input::placeholder { color: var(--ink-soft); }
.search-input:focus { border-color: var(--pitch); box-shadow: 0 0 0 3px var(--pitch-tint); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line);
  transition: transform .15s, background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.chip:active { transform: scale(.95); }
.chip.is-active { background: linear-gradient(135deg, var(--pitch), color-mix(in srgb, var(--pitch) 75%, black)); border-color: var(--pitch); color: #fff; box-shadow: var(--glow-pitch); }
.chip-count {
  font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft);
}
.chip.is-active .chip-count { background: rgba(255,255,255,0.22); color: #fff; }
.ticker-empty { font-size: 13px; color: var(--ink-soft); padding: 10px 2px; }

/* ---------- Bouton icône (thème) ---------- */
.icon-btn {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; cursor: pointer;
  border-radius: 50%; font-size: 15px; line-height: 1;
  color: #fff; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.2);
  transition: background .18s, transform .2s;
}
.icon-btn:hover { background: rgba(255,255,255,0.26); transform: rotate(18deg); }
.icon-btn:active { transform: scale(.92); }

/* ---------- Notifications ---------- */
#toast-host {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 1200;
  width: min(92vw, 380px); pointer-events: none;
}
.toast {
  padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  color: #fff; background: linear-gradient(135deg, var(--pitch-deep), color-mix(in srgb, var(--pitch-deep) 70%, black));
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
  opacity: 0; transform: translateY(-10px) scale(.97); transition: opacity .3s, transform .3s;
}
.toast.is-in { opacity: 1; transform: none; }
.toast-goal { background: linear-gradient(135deg, var(--risky), color-mix(in srgb, var(--risky) 70%, black)); }
.toast-success { background: linear-gradient(135deg, var(--safe), color-mix(in srgb, var(--safe) 70%, black)); }

/* ---------- Panier de paris ---------- */
.pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.slip-add {
  cursor: pointer; padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--pitch); background: var(--pitch-tint); border: 1px solid transparent;
  transition: transform .15s, background .18s, color .18s;
}
.slip-add:active { transform: scale(.94); }
.slip-add.is-in { background: linear-gradient(135deg, var(--pitch), color-mix(in srgb, var(--pitch) 75%, black)); color: #fff; }

.slip-fab {
  position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%); z-index: 1000;
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 13px 22px; border-radius: 999px; border: none;
  font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--pitch), color-mix(in srgb, var(--pitch) 70%, var(--accent)));
  box-shadow: 0 10px 28px rgba(10,122,86,.4);
  animation: panel-in .3s cubic-bezier(.2,.8,.3,1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.slip-fab:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 14px 34px rgba(10,122,86,.5); }
.slip-fab-count {
  display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 999px; background: var(--gold); font-size: 12px; color: #1a1206; font-weight: 700;
}

/* ---------- Transitions de contenu ---------- */
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero { transition: box-shadow .25s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.slip-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); z-index: 1100; }
.slip-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1101;
  max-height: 82vh; overflow-y: auto; padding: 16px;
  background: var(--surface); color: var(--ink);
  border-radius: 22px 22px 0 0; box-shadow: 0 -14px 40px rgba(0,0,0,.35);
  animation: slip-up .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes slip-up { from { transform: translateY(100%); } to { transform: none; } }
.slip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.slip-head .icon-btn { color: var(--ink); background: var(--surface-2); border-color: var(--line); }
.slip-head .icon-btn svg { width: 16px; height: 16px; }
.slip-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.slip-list li {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: var(--radius-sm); background: var(--surface-2);
  transition: transform .15s ease;
}
.slip-list li:hover { transform: translateX(2px); }
.slip-label { display: block; font-size: 13px; font-weight: 600; }
.slip-match { display: block; font-size: 11px; color: var(--ink-soft); }
.slip-remove {
  cursor: pointer; width: 26px; height: 26px; border-radius: 50%; font-size: 17px; line-height: 1;
  color: var(--ink-soft); background: transparent; border: 1px solid var(--line);
  transition: background .15s ease, color .15s ease;
}
.slip-remove:hover { background: var(--risky-tint); color: var(--risky); border-color: transparent; }
.slip-calc { display: grid; gap: 10px; padding: 13px; border-radius: var(--radius-md); background: var(--surface-2); }
.slip-calc label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.slip-stake {
  padding: 10px 12px; font: inherit; font-family: var(--font-mono); font-size: 15px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.slip-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slip-totals div { display: grid; gap: 2px; }
.slip-totals span { font-size: 11px; color: var(--ink-soft); }
.slip-totals strong { font-size: 18px; }
.slip-cta {
  display: block; margin-top: 12px; padding: 15px; border-radius: var(--radius-md); text-align: center;
  font-weight: 700; font-size: 14px; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, var(--pitch), var(--pitch-deep));
  box-shadow: 0 10px 24px rgba(10,122,86,0.28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.slip-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(10,122,86,0.36); }
.slip-clear {
  display: block; width: 100%; margin-top: 8px; padding: 10px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  background: transparent; border: none;
}

/* REGISTRATION MODAL */
.registration-overlay {
  position: fixed; inset: 0;
  background:
    radial-gradient(60vw 60vw at -10% -10%, color-mix(in srgb, var(--pitch) 22%, transparent), transparent 60%),
    radial-gradient(50vw 50vw at 110% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--bg);
  z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: overlay-fade 0.35s ease;
}
@keyframes overlay-fade { from { opacity: 0; } }

.registration-container {
  width: 100%; max-width: 440px;
  background: var(--surface);
  border-radius: 28px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  max-height: 92vh;
  overflow-y: auto;
  animation: registration-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes registration-pop { from { transform: scale(0.94) translateY(14px); opacity: 0; } }

.registration-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 24px 24px 0;
}

.registration-brand-mark {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--pitch), var(--pitch-deep));
  display: grid; place-items: center; font-size: 18px;
  box-shadow: 0 6px 16px rgba(10, 122, 86, 0.32);
}

.registration-brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.registration-steps {
  display: flex; gap: 6px; margin-left: auto;
}

.registration-steps span {
  width: 20px; height: 4px; border-radius: 999px;
  background: var(--line);
  transition: all 0.3s ease;
}

.registration-steps span.is-done { background: var(--pitch); }
.registration-steps span.is-active { background: var(--pitch); width: 30px; }

.registration-content {
  padding: 20px 24px 28px;
}

.registration-step {
  animation: step-fade 0.35s ease;
}
@keyframes step-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.registration-step h1 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  text-align: center;
}

.registration-step .subtitle {
  text-align: center;
  color: var(--ink-soft);
  font-size: 14.5px;
  margin: 0 0 22px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--pitch);
  box-shadow: 0 0 0 3px var(--pitch-tint);
}

.form-input::placeholder {
  color: var(--ink-soft);
}

/* Sans ca, iOS Safari applique son propre fond blanc + texte fonce sur un
   champ mot de passe des que le clavier "Mots de passe" (autofill/suggestion
   forte) s'affiche, quel que soit le theme du site : le champ devient
   illisible en theme sombre (texte fonce sur fond blanc, invisible au clic). */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
  box-shadow: 0 0 0 1000px var(--surface-2) inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}

.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrapper .form-input {
  padding-right: 40px;
}

.password-toggle {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 6px;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}

.password-toggle:hover {
  color: var(--ink);
}

.turnstile-container {
  display: flex;
  justify-content: center;
  margin: 18px 0;
  padding: 12px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.cf-turnstile {
  transform: scale(0.95);
  transform-origin: center;
}

.code-display {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin: 24px 0;
}

.code-box {
  background: linear-gradient(135deg, var(--pitch-tint), var(--accent-tint));
  border: 2px solid var(--pitch);
  border-radius: 16px;
  padding: 26px 40px;
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--pitch);
  letter-spacing: 8px;
  box-shadow: 0 10px 30px rgba(10, 122, 86, 0.2);
  text-align: center;
}

.code-copy-btn {
  font-size: 12px; font-weight: 700;
  color: var(--pitch);
  background: var(--pitch-tint);
  border: none; padding: 7px 16px; border-radius: 999px;
  cursor: pointer; transition: all 0.18s ease;
}

.code-copy-btn:hover { background: var(--pitch); color: #fff; }
.code-copy-btn.is-copied { background: var(--pitch); color: #fff; }

.code-instruction {
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  margin: 20px 0 6px;
}

.code-expiry {
  text-align: center;
  color: var(--ink-soft);
  font-size: 12px;
  margin: 0;
}

.code-input {
  width: 100%;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 6px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.code-input:focus {
  outline: none;
  border-color: var(--pitch);
  box-shadow: 0 0 0 3px var(--pitch-tint);
}

.form-group {
  margin: 20px 0;
}

.trust-line {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-soft);
  margin-top: 20px;
}

.groups-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 22px 0;
}

.group-card {
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  text-align: center;
  transition: all 0.25s ease;
}

.group-card:has(input:checked) {
  border-color: var(--pitch);
  background: var(--pitch-tint);
  box-shadow: 0 8px 24px rgba(10, 122, 86, 0.15);
}

.group-icon {
  font-size: 36px;
  margin-bottom: 10px;
  display: block;
}

.group-icon.whatsapp { color: #25D366; }
.group-icon.telegram { color: #0088CC; }

.group-card h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.group-card p {
  margin: 0 0 14px;
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.35;
}

.group-card .cta-blue,
.group-card .cta-green {
  width: 100%;
  margin-bottom: 12px;
  font-size: 13px;
  padding: 11px;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
}

.checkbox-wrapper input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--pitch);
}

.join-instruction {
  text-align: center;
  color: var(--ink-soft);
  font-size: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.success-icon {
  width: 68px; height: 68px; margin: 0 auto 18px;
  display: grid; place-items: center;
  font-size: 32px;
  color: #fff;
  background: linear-gradient(135deg, var(--pitch), var(--pitch-deep));
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(10, 122, 86, 0.32);
  animation: success-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes success-bounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.success-perks {
  display: flex; flex-direction: column; gap: 10px;
  margin: 20px 0 24px;
}

.success-perks li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--ink);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.success-perks li::before {
  content: '✓';
  display: grid; place-items: center;
  width: 20px; height: 20px; flex-shrink: 0;
  font-size: 11px; font-weight: 800; color: #fff;
  background: var(--pitch);
  border-radius: 50%;
}

.error-message {
  background: var(--risky-tint);
  color: var(--risky);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  text-align: center;
  margin-top: 16px;
  border: 1px solid rgba(178, 58, 34, 0.2);
}

.btn.is-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}

.btn.is-loading::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn {
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, var(--pitch), var(--pitch-deep));
  color: white;
  box-shadow: 0 6px 16px rgba(10, 122, 86, 0.2);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(10, 122, 86, 0.3);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--line);
  box-shadow: none;
}

.btn-secondary:hover {
  border-color: var(--pitch);
  background: var(--pitch-tint);
}

/* UNIVERSAL BUTTON IMPROVEMENTS */
button:not([disabled]) {
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* CARD ANIMATIONS */
.card {
  animation: card-appear 0.4s ease;
}

@keyframes card-appear {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* SMOOTH SCROLLING */
html {
  scroll-behavior: smooth;
}

/* LINK STYLES */
a {
  color: var(--pitch);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--pitch-deep);
}

/* FOCUS STATES FOR ACCESSIBILITY */
button:focus,
input:focus,
a:focus {
  outline: 2px solid var(--pitch);
  outline-offset: 2px;
}

/* PLACEHOLDER STYLING */
::placeholder {
  color: var(--ink-soft);
  opacity: 0.7;
}

/* SELECTION STYLING */
::selection {
  background: var(--pitch);
  color: white;
}

/* INPUT IMPROVEMENTS */
input,
textarea,
select {
  font-family: var(--font-body);
  font-size: 16px; /* Prevents zoom on iOS */
}

/* ACTIVE STATE ANIMATIONS */
button:active:not(:disabled) {
  transform: scale(0.98);
}

/* SMOOTH LOADING STATES */
[data-loading="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* FORM VALIDATION STATES */
input:invalid:not(:placeholder-shown) {
  border-color: var(--risky);
  background: rgba(178, 58, 34, 0.03);
}

input:valid:not(:placeholder-shown) {
  border-color: var(--safe);
  background: rgba(30, 142, 90, 0.03);
}

/* IMPROVED INPUT FOCUS */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--pitch);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(10, 122, 86, 0.1);
}

/* LOADING SPINNER */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--line);
  border-top-color: var(--pitch);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* BADGE STYLES */
.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-success {
  background: var(--safe-tint);
  color: var(--safe);
}

.badge-warning {
  background: var(--balanced-tint);
  color: var(--balanced);
}

.badge-danger {
  background: var(--risky-tint);
  color: var(--risky);
}

.badge-info {
  background: var(--accent-tint);
  color: var(--accent);
}

/* TESTIMONIALS */
.testimonial-card {
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-md);
  animation: testimonial-slide 0.5s ease;
}

@keyframes testimonial-slide {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.testimonial-content {
  margin-bottom: 20px;
}

.testimonial-text {
  font-size: 16px;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.6;
}

.testimonial-author {
  display: flex;
  gap: 12px;
  align-items: center;
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(10, 122, 86, 0.2);
}

.author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-info strong {
  font-size: 14px;
  color: var(--ink);
}

.author-location {
  font-size: 12px;
  color: var(--ink-soft);
}

.testimonial-nav {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Les regles mobiles generiques (min-height 44px et padding sur `button`)
   s'appliquaient aussi a ces puces de 8px et les transformaient en gros
   paves verts. On annule les deux ici, et la zone tactile de 44px est
   rendue par un pseudo-element transparent : la cible reste confortable au
   doigt sans que la puce grossisse. */
.testimonial-nav .dot {
  position: relative;
  width: 8px;
  height: 8px;
  min-height: 0;
  padding: 0;
  flex: none;
  border-radius: 50%;
  background: var(--line);
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}

.testimonial-nav .dot::after {
  content: '';
  position: absolute;
  inset: -18px;
}

.testimonial-nav .dot.active {
  background: var(--pitch);
  width: 24px;
  border-radius: 4px;
}

/* SUBSCRIBER NOTIFICATIONS */
.subscriber-notifications {
  background: linear-gradient(135deg, rgba(0, 151, 178, 0.05), rgba(10, 122, 86, 0.05));
  border: 1px solid var(--accent-tint);
  border-radius: var(--radius-md);
  padding: 16px;
  backdrop-filter: blur(10px);
}

/* Version compacte : une seule ligne, tourne parmi les notifications
   chargées plutôt que d'empiler 3 cartes avec avatar + horodatage chacune. */
/* Bandeau "chiffres du jour" en tete de l'accueil. Quatre colonnes egales
   plutot qu'un auto-fit : le nombre de cellules varie (la derniere n'apparait
   que s'il existe un combine), et auto-fit laissait une cellule orpheline
   etiree sur toute la largeur. */
.insights-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 1px;
  margin-bottom: 14px;
  padding: 0;
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint);
  border-radius: 14px;
  overflow: hidden;
}
.insight-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 11px 6px;
  background: var(--surface, #12161a);
  text-align: center;
}
.insight-value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.insight-label {
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
@media (max-width: 380px) {
  .insight-value { font-size: 16px; }
  .insight-label { font-size: 9.5px; }
}

.subscriber-notifications-compact {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: linear-gradient(135deg, rgba(0, 151, 178, 0.08), rgba(10, 122, 86, 0.08));
  border: 1px solid var(--accent-tint);
  border-radius: 999px;
  font-size: 12.5px;
  animation: notif-enter 0.4s ease;
}
.notif-avatar-sm { font-size: 15px; line-height: 1; flex-shrink: 0; }
.notif-compact-text {
  color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-compact-text strong { color: var(--ink); }

.notifications-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #00D084;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 208, 132, 0.7); }
  50% { opacity: 0.7; box-shadow: 0 0 0 8px rgba(0, 208, 132, 0); }
}

.notifications-title h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notification-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  animation: notif-enter 0.4s ease;
}

@keyframes notif-enter {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

.notif-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.notif-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.notif-location {
  font-size: 11px;
  color: var(--ink-soft);
}

.notif-time {
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* HERO SECTION WITH TESTIMONIALS */
/* La bande et la carte qu'elle contient portaient chacune un fond, une
   bordure et ~30px de marge : sur un ecran de telephone cela empilait deux
   encadrements et repoussait le contenu loin sous le dernier match. La bande
   ne garde que le fond, la carte interieure que le texte. */
.hero-testimonials-band {
  background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2));
  padding: 20px 16px;
  margin: 20px 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.hero-testimonials-band .testimonial-card {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.testimonials-heading {
  text-align: center;
  margin-bottom: 16px;
}

.testimonials-heading h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: 0.3px;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* APP FOOTER */
.app-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding: 16px 20px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 32px;
}

.footer-content {
  max-width: 900px;
  margin: 0 auto;
}

.footer-text {
  margin: 0 0 6px;
}

.footer-text a {
  color: var(--pitch);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-text a:hover {
  color: var(--pitch-deep);
  text-decoration: underline;
}

.footer-badge {
  margin: 0;
  font-size: 11px;
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  /* Larger touch targets on mobile */
  button, input, a {
    min-height: 44px;
  }

  .registration-container {
    border-radius: 24px;
    margin: 16px;
  }

  .registration-content {
    padding: 24px;
  }

  .code-box {
    padding: 24px 32px;
    font-size: 28px;
    letter-spacing: 4px;
  }

  .groups-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .registration-step h1 {
    font-size: 24px;
  }

  .testimonial-card {
    padding: 18px;
  }

  .testimonial-text {
    font-size: 14px;
  }

  .subscriber-notifications {
    padding: 12px;
  }

  .app-footer {
    padding: 12px 16px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
  h3 { font-size: 16px; }

  button {
    padding: 10px 16px;
    font-size: 13px;
  }

  .code-box {
    padding: 20px 24px;
    font-size: 24px;
    letter-spacing: 2px;
  }

  .registration-content {
    padding: 20px;
  }

  .notification-item {
    padding: 8px;
  }

  .notif-name {
    font-size: 11px;
  }
}

/* ===== ACCUEIL : LISTE DES MATCHS ===== */
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; margin-bottom: 14px; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  transition: transform var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.back-link:hover { transform: translateX(-3px); color: var(--pitch); border-color: var(--pitch); }
.back-link svg { width: 15px; height: 15px; }

.home-section { margin-bottom: 26px; }
.home-section-title {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; color: var(--ink);
  margin: 0 0 12px;
}
.home-section-count {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--ink-soft); background: var(--surface-2);
  border-radius: 999px; padding: 3px 9px;
}

.match-list { display: grid; gap: 10px; }

.match-card {
  position: relative; width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "league right" "teams right";
  gap: 7px 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 13px 15px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  animation: card-rise 380ms cubic-bezier(0.2, 0, 0.38, 0.9) backwards;
}
/* Cascade : les cartes entrent l'une apres l'autre plutot que d'un bloc. */
.match-card:nth-child(1) { animation-delay: 0ms; }
.match-card:nth-child(2) { animation-delay: 45ms; }
.match-card:nth-child(3) { animation-delay: 90ms; }
.match-card:nth-child(4) { animation-delay: 135ms; }
.match-card:nth-child(5) { animation-delay: 180ms; }
.match-card:nth-child(n+6) { animation-delay: 215ms; }

.match-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--pitch);
}
.match-card:active { transform: translateY(0) scale(.995); }
.match-card.is-live { border-left: 3px solid var(--risky); }

.mc-league {
  grid-area: league; display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  text-transform: uppercase; color: var(--ink-soft);
}
.mc-teams { grid-area: teams; display: grid; gap: 4px; min-width: 0; }
.mc-team {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-right {
  grid-area: right; display: flex; flex-direction: column;
  align-items: flex-end; gap: 3px;
}
.mc-score { font-family: var(--font-mono); font-size: 19px; font-weight: 700; color: var(--ink); }
.mc-live {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--risky);
}
.mc-when { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.mc-fav { position: absolute; top: 9px; right: 11px; color: var(--risky); }
.mc-fav svg { width: 13px; height: 13px; }

/* ===== SCORE EXACT (argument premium) ===== */
.score-exact-card { border: 1px solid var(--gold); box-shadow: var(--shadow-md); }
.score-exact-card .card-title { color: var(--gold); }

.score-legend, .score-row {
  display: grid; grid-template-columns: 50px 1fr 54px 50px;
  align-items: center; gap: 10px;
}
.score-legend {
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-soft); padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.score-legend span:nth-child(3), .score-legend span:nth-child(4) { text-align: right; }

.score-row { padding: 10px 0; border-bottom: 1px solid var(--line); row-gap: 6px; }
.score-row:last-child { border-bottom: 0; }
.score-val { font-size: 16px; font-weight: 700; color: var(--ink); }
.score-bar {
  display: block; height: 6px; border-radius: 999px;
  background: var(--surface-2); overflow: hidden;
}
.score-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--pitch), var(--accent));
  transform-origin: left;
  animation: bar-grow 620ms cubic-bezier(0.2, 0, 0.38, 0.9) backwards;
}
.score-pct { text-align: right; font-size: 13px; font-weight: 600; color: var(--ink); }
.score-odds { text-align: right; font-size: 13px; font-weight: 700; color: var(--gold); }

/* Badge de confiance sur sa propre ligne, sous la barre de probabilite :
   la grille du score-row n'a que 4 colonnes fixes, un 5e enfant sans
   grid-column dedie irait s'inserer dans une nouvelle rangee de 50px et
   tronquerait le texte. */
.confidence-badge {
  grid-column: 2 / -1;
  justify-self: start;
  font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; width: fit-content;
}
.confidence-badge.confidence-high { background: color-mix(in srgb, var(--pitch) 18%, transparent); color: var(--pitch); }
.confidence-badge.confidence-medium { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.confidence-badge.confidence-low { background: color-mix(in srgb, var(--warn, #d97706) 18%, transparent); color: var(--warn, #d97706); }
.confidence-badge.confidence-longshot { background: color-mix(in srgb, var(--danger, #b23a22) 18%, transparent); color: var(--danger, #b23a22); }

/* ===== LES 3 COMBIS EN OR DU JOUR ===== */
.golden-combos-card {
  border: 1px solid var(--gold);
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 10%, var(--surface)), var(--surface));
  box-shadow: var(--shadow-md);
}
.golden-combos-card .card-title { color: var(--gold); }

.golden-combos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.golden-combo {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.golden-combo-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.golden-combo-label { font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .3px; }
.golden-combo-odds { color: var(--gold); font-weight: 700; }

.golden-leg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .2s ease, transform .15s ease;
}
.golden-leg:hover { border-color: var(--pitch); transform: translateY(-1px); }
.golden-leg-teams { font-size: 12px; font-weight: 600; color: var(--ink); }
.golden-leg-teams .vs { color: var(--ink-soft); font-weight: 400; margin: 0 2px; }
.golden-leg-league { font-size: 10.5px; color: var(--ink-soft); opacity: .85; }
.golden-leg-market { font-size: 11px; color: var(--ink-soft); }
.golden-leg-odds { align-self: flex-end; font-size: 12px; font-weight: 700; color: var(--pitch); }

.golden-combo-safety { font-size: 11px; color: var(--ink-soft); text-align: right; }

/* Gros combis : meme structure que les combis en or, palette differente
   (violet/feu) pour signaler visuellement "cote elevee, risque eleve" plutot
   que la reference "sur" doree. */
.big-combos-card {
  border: 1px solid #a855f7;
  background: linear-gradient(160deg, color-mix(in srgb, #a855f7 12%, var(--surface)), var(--surface));
}
.big-combos-card .card-title { color: #a855f7; }
.big-combo { border-color: color-mix(in srgb, #a855f7 30%, var(--line)); }
.big-odds { color: #a855f7; }
.big-leg:hover { border-color: #a855f7; }

/* ===== BANKROLL VIRTUELLE ===== */
/* Origine de la prediction affichee */
.model-badge {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--pitch-tint);
  border: 1px solid color-mix(in srgb, var(--pitch) 26%, transparent);
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.45;
}

.model-badge-weight { color: var(--pitch); font-weight: 600; }

.model-badge.is-model-only {
  background: var(--gold-tint);
  border-color: color-mix(in srgb, var(--gold) 26%, transparent);
}

/* Ossature de chargement : montre qu'un calcul est en cours plutot que
   d'afficher des sections vides. */
.skeleton-line {
  height: 12px;
  margin: 10px 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}

@keyframes skeleton-sweep {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* Relance manuelle quand le flux live n'a pas encore publie les stats. */
.stats-refresh {
  width: 100%;
  margin: 4px 0 14px;
  padding: 11px 14px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}

.loading-text::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 8px;
  border: 2px solid color-mix(in srgb, var(--pitch) 35%, transparent);
  border-top-color: var(--pitch);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: baseline;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .skeleton-line, .loading-text::after { animation: none; }
}

/* Onglet reserve au Premium : doit proposer l'abonnement, pas seulement
   annoncer que le contenu est indisponible. */
.locked-tab {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
}

.locked-tab svg { width: 28px; height: 28px; color: var(--gold); }
.locked-tab .card-title { margin: 0; }
.locked-tab .hint { margin: 0 0 6px; }
.locked-tab .btn-primary { width: 100%; max-width: 280px; }

/* Offres partenaires */
.partner-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

.partner-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--line);
}

.partner-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.partner-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.partner-info strong { font-size: 14px; }
.partner-tag { font-size: 11px; color: var(--ink-soft); }
.partner-actions { display: flex; gap: 6px; flex: none; }

.partner-btn {
  padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  background: var(--pitch); color: #06130D;
}
.partner-btn.is-apk { background: var(--surface-3); color: var(--ink); border: 1px solid var(--line); }

/* Bloc d'abonnement de la page Compte */
.subscription-block {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--pitch-tint);
  border: 1px solid color-mix(in srgb, var(--pitch) 30%, transparent);
}

.subscription-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.subscription-plan {
  font-weight: 700;
  font-size: 15px;
  color: var(--pitch);
}

.subscription-expiry {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.subscription-expiry.is-soon { color: var(--balanced); font-weight: 600; }

.subscription-cta {
  padding: 8px 14px;
  font-size: 13px;
  white-space: nowrap;
}

.bankroll-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}
.bankroll-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 4px; border-radius: var(--radius-md, 12px); background: var(--surface-2); }
.bankroll-stat-val { font-size: 15px; font-weight: 700; color: var(--ink); }
.bankroll-stat-label { font-size: 10px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .3px; }

.bankroll-chart { width: 100%; height: 80px; margin-top: 8px; }

.bankroll-ticket {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px; border-radius: var(--radius-md, 12px); background: var(--surface-2);
  border: 1px solid var(--line);
}
.bankroll-ticket + .bankroll-ticket { margin-top: 8px; }
.bankroll-ticket-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-soft); }
.bankroll-ticket-legs { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink); padding-left: 16px; }
.bankroll-ticket-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; flex-wrap: wrap; }

/* ===== ETAT ACTIF DE LA BARRE DU BAS ===== */
/* Sans reperage visuel, rien n'indiquait la section courante. */
.nav-item { position: relative; }
.nav-item svg { transition: transform var(--transition-fast); }
.nav-item.is-active { color: var(--pitch); }
.nav-item.is-active svg { transform: translateY(-1px) scale(1.14); }
.nav-item.is-active span { font-weight: 700; }
.nav-item.is-active::before {
  content: ''; position: absolute; top: -6px; left: 50%;
  width: 22px; height: 3px; border-radius: 999px; background: var(--pitch);
  transform: translateX(-50%) scaleX(0);
  animation: nav-indicator 280ms cubic-bezier(0.2, 0, 0.38, 0.9) forwards;
}
@keyframes nav-indicator { to { transform: translateX(-50%) scaleX(1); } }

/* Respiration a l'ouverture d'une section, pour que la navigation se sente. */
.home-section { animation: section-in 420ms cubic-bezier(0.2, 0, 0.38, 0.9) backwards; }
.home-section:nth-of-type(2) { animation-delay: 70ms; }
.home-section:nth-of-type(3) { animation-delay: 140ms; }
@keyframes section-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sk, .toast, .tabpanel, .slip-panel, .slip-fab, .card, .premium-card, .hero, .premium-logo-mark,
  .match-card, .back-link, .score-fill, .home-section, .nav-item.is-active::before, .melbet-banner {
    animation: none !important; transition: none !important;
  }
  .nav-item.is-active::before { transform: translateX(-50%) scaleX(1); }
}

/* ===== MARKET ANALYSIS SECTION ===== */
.market-cat { margin-bottom: 20px; }
.market-cat-title { font-size: 13px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--ink-light); }
.market-cat-head { display: grid; grid-template-columns: 1fr 60px 60px; gap: 8px; font-size: 11px; color: var(--ink-soft); padding: 0 4px 4px; }
.market-row { display: grid; grid-template-columns: 1fr 60px 60px; gap: 8px; align-items: center; padding: 8px 4px; border-radius: 6px; font-size: 13px; }
.market-row:nth-child(odd) { background: var(--surface-raised); }
.market-name { color: var(--ink); }
.market-prob { font-size: 13px; text-align: right; }
.market-odds { font-size: 13px; text-align: right; color: var(--ink-soft); }
.value-badge { display: inline-block; background: #22c55e22; color: #16a34a; border: 1px solid #16a34a44; border-radius: 4px; font-size: 10px; font-weight: 700; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
.value-bets-section { margin-bottom: 20px; background: #22c55e11; border: 1px solid #22c55e33; border-radius: 8px; padding: 12px; }
.market-advice { font-size: 14px; line-height: 1.6; color: var(--ink); padding: 12px; background: var(--surface-raised); border-radius: 8px; margin-bottom: 12px; }
.text-safe { color: #16a34a; }
.text-risky { color: #dc2626; }

/* ===== SERIES & TENDANCES / BUTEURS PROBABLES ===== */
.series-card, .scorers-card { display: flex; flex-direction: column; gap: 4px; }
.kv-block { margin-bottom: 4px; }
.series-subtitle { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 6px; }
.series-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label fraction" "track track"; row-gap: 4px; align-items: center; padding: 6px 0; }
.series-label { grid-area: label; font-size: 13px; }
.series-fraction { grid-area: fraction; font-size: 13px; color: var(--ink-soft); }
.series-track { grid-area: track; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.series-fill { height: 100%; background: linear-gradient(90deg, var(--pitch), var(--accent)); border-radius: 999px; }
.series-explainer { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); line-height: 1.5; }
.scorers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
@media (max-width: 480px) { .scorers-grid { grid-template-columns: 1fr; } }
.scorer-col { display: flex; flex-direction: column; gap: 2px; }
.scorer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.scorer-row:last-child { border-bottom: none; }
.scorer-name { font-weight: 600; flex: 1; }
.scorer-meta { color: var(--ink-soft); font-size: 11px; white-space: nowrap; }
.scorer-prob { color: var(--accent); font-weight: 700; }

/* ===== VITRINE (ecran d'accueil) ===== */
/* L'accueil ouvrait directement sur la liste brute des rencontres : un
   nouveau visiteur n'y voyait ni ce que fait le produit, ni comment
   atteindre les pronostics, la bankroll ou les bonus partenaires. */
.vitrine-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 26px 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 12% 0%, var(--pitch-tint) 0%, transparent 62%),
    linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.vitrine-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pitch);
}

.vitrine-title {
  margin: 8px 0 6px;
  font-size: clamp(34px, 11vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.vitrine-sub {
  margin: 0 auto;
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.vitrine-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 0 16px;
}

.vitrine-stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 4px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
}

.vitrine-stats strong { font-size: 20px; line-height: 1; color: var(--pitch); }
.vitrine-stats span { font-size: 10.5px; color: var(--ink-soft); }

.vitrine-cta {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.vitrine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

@media (min-width: 560px) {
  .vitrine-grid { grid-template-columns: 1fr 1fr; }
}

.vitrine-card {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px;
  text-align: left;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.vitrine-card:hover {
  border-color: var(--pitch);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.vitrine-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--pitch-tint);
  color: var(--pitch);
}

.vitrine-icon svg { width: 21px; height: 21px; }

.vitrine-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.vitrine-body strong { font-size: 14.5px; font-weight: 700; }
.vitrine-body span { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }

.vitrine-badge {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--pitch);
  background: var(--pitch-tint);
}

/* Cinq entrees au lieu de quatre : les libelles doivent tenir sans passer
   a la ligne sur les petits ecrans. */
.bottom-nav .nav-item span { font-size: 10px; white-space: nowrap; }
@media (max-width: 360px) {
  .bottom-nav .nav-item span { font-size: 9px; }
}

/* ===== BARRE DE CHARGEMENT ===== */
/* Les lignes grises du squelette passaient pour un bloc casse ou un espace
   vide : une barre qui avance dit sans ambiguite qu'un calcul est en cours. */
.loading-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 2px 14px;
}

.loading-bar-label {
  font-size: 13px;
  color: var(--ink-soft);
}

.loading-bar-track {
  position: relative;
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
}

.loading-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--pitch), transparent);
  animation: loading-bar-sweep 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes loading-bar-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(350%); }
}

@media (prefers-reduced-motion: reduce) {
  .loading-bar-fill { animation: none; width: 100%; opacity: 0.45; }
}

/* ===== CANAUX COMMUNAUTAIRES ===== */
.channel-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

.channel-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.channel-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 17px;
}

.channel-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.channel-info strong { font-size: 14px; }
.channel-info span { font-size: 11.5px; color: var(--ink-soft); line-height: 1.3; }
.channel-actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* ===== AVANTAGES DU CODE PROMO ===== */
.promo-benefits {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.promo-benefits li {
  position: relative;
  padding-left: 22px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.promo-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: -1px;
  font-weight: 700;
  color: var(--pitch);
}

/* ===== ETAPES D'INSTALLATION (iOS n'a pas d'invite native) ===== */
.install-steps {
  margin-top: 12px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--line);
  background: var(--surface-2);
}

.install-steps-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pitch);
}

.install-steps-list {
  margin: 0;
  padding: 0;
  counter-reset: etape;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* La feuille remet list-style a none partout : on redessine donc le numero,
   qui est ici l'essentiel (l'ordre des gestes). */
.install-steps-list li {
  counter-increment: etape;
  position: relative;
  padding-left: 30px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

.install-steps-list li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--pitch);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}

.step-glyph {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  margin: 0 1px;
  color: var(--accent);
}

/* ===== DEPOT D'UN AVIS ===== */
.avis-open {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.avis-open:hover { border-color: var(--pitch); }

.avis-merci {
  margin-top: 12px;
  font-size: 13px;
  text-align: center;
  color: var(--safe);
}

.avis-form { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; text-align: left; }
.avis-label { font-size: 12.5px; font-weight: 600; }

.avis-text, .avis-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  resize: vertical;
}

.avis-text:focus, .avis-input:focus { outline: 2px solid var(--pitch); outline-offset: 1px; }
.avis-row { display: flex; gap: 8px; }
.avis-row > * { flex: 1; min-width: 0; }
.avis-btn { padding: 10px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; }

/* ===== GALERIE DU CODE PROMO ===== */
.promo-gallery-title {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pitch);
}

/* Defilement horizontal : trois captures cote a cote ne tiennent pas en
   largeur sur un telephone, et les empiler noierait la carte partenaires. */
.promo-gallery {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  margin: 0 -2px;
}

.promo-gallery::-webkit-scrollbar { height: 4px; }
.promo-gallery::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.promo-shot {
  flex: 0 0 auto;
  width: 190px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  text-align: left;
  cursor: zoom-in;
  transition: border-color var(--transition-fast);
}

.promo-shot:hover { border-color: var(--pitch); }

.promo-shot img {
  width: 100%;
  height: 128px;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: var(--surface-2);
}

.promo-shot-caption {
  padding: 0 10px 10px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.promo-gallery-note { margin-top: 8px; }

/* ===== AGRANDISSEMENT D'UNE CAPTURE ===== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  background: rgba(4, 8, 6, 0.92);
  backdrop-filter: blur(4px);
  animation: fade-in 0.18s ease-out;
  cursor: zoom-out;
}

.lightbox img {
  max-width: 100%;
  max-height: 76vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  cursor: default;
}

.lightbox-caption {
  max-width: 34ch;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: #E7EEE9;
}

.lightbox-close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}

.lightbox-close svg { width: 17px; height: 17px; }

/* ==========================================================================
   HALL30 — DESIGN v2
   Couche finale : elle passe apres tout le reste et redefinit l'apparence
   (boutons en relief, degrades vivants, verre depoli, animations) sans
   toucher a la structure HTML. Les animations d'entree ne jouent que sous
   #app.view-enter (voir fx.js) : #app est reecrit a chaque rendu, et une
   animation posee directement sur les cartes se rejouait a chaque
   rafraichissement de fond, d'ou un clignotement permanent.
   ========================================================================== */

:root {
  --on-pitch: #FFFFFF;
  --violet: #6D5DF6;
  --magenta: #D946A8;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-line: rgba(11, 23, 18, 0.08);
  --grad-brand: linear-gradient(135deg, #0A7A56 0%, #0097B2 55%, #6D5DF6 100%);
  --grad-gold: linear-gradient(135deg, #E9B53C 0%, #B8860F 100%);
  --depth: rgba(4, 40, 27, 0.16);
  --aurora-a: rgba(10, 122, 86, 0.10);
  --aurora-b: rgba(0, 151, 178, 0.09);
  --aurora-c: rgba(109, 93, 246, 0.07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --on-pitch: #03140D;
    --violet: #9B8CFF;
    --magenta: #F06CC4;
    --glass: rgba(15, 19, 25, 0.72);
    --glass-line: rgba(255, 255, 255, 0.07);
    --grad-brand: linear-gradient(135deg, #24DD97 0%, #38D9F0 55%, #9B8CFF 100%);
    --grad-gold: linear-gradient(135deg, #FFE08A 0%, #F3C563 45%, #D89A1E 100%);
    --depth: rgba(0, 0, 0, 0.6);
    --aurora-a: rgba(36, 221, 151, 0.13);
    --aurora-b: rgba(56, 217, 240, 0.10);
    --aurora-c: rgba(155, 140, 255, 0.10);
  }
}
:root[data-theme="dark"] {
  --on-pitch: #03140D;
  --violet: #9B8CFF;
  --magenta: #F06CC4;
  --glass: rgba(15, 19, 25, 0.72);
  --glass-line: rgba(255, 255, 255, 0.07);
  --grad-brand: linear-gradient(135deg, #24DD97 0%, #38D9F0 55%, #9B8CFF 100%);
  --grad-gold: linear-gradient(135deg, #FFE08A 0%, #F3C563 45%, #D89A1E 100%);
  --depth: rgba(0, 0, 0, 0.6);
  --aurora-a: rgba(36, 221, 151, 0.13);
  --aurora-b: rgba(56, 217, 240, 0.10);
  --aurora-c: rgba(155, 140, 255, 0.10);
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ---------- Fond vivant ---------- */
body::before {
  content: '';
  position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 12% 8%, var(--aurora-a), transparent 70%),
    radial-gradient(34vmax 28vmax at 88% 22%, var(--aurora-b), transparent 70%),
    radial-gradient(40vmax 34vmax at 50% 96%, var(--aurora-c), transparent 70%);
  animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(3vmax, -2vmax, 0) rotate(8deg); }
  100% { transform: translate3d(-2vmax, 2vmax, 0) rotate(-6deg); }
}

/* ---------- Entrees d'ecran (seulement quand l'ecran change) ---------- */
.card, .match-card, .home-section, .tabpanel, .stat-bar-fill { animation: none; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px) scale(.98); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
#app.view-enter .shell > * { animation: rise-in 560ms cubic-bezier(.2, .8, .2, 1) backwards; }
#app.view-enter .shell > *:nth-child(2) { animation-delay: 60ms; }
#app.view-enter .shell > *:nth-child(3) { animation-delay: 120ms; }
#app.view-enter .shell > *:nth-child(4) { animation-delay: 180ms; }
#app.view-enter .shell > *:nth-child(5) { animation-delay: 240ms; }
#app.view-enter .shell > *:nth-child(6) { animation-delay: 300ms; }
#app.view-enter .shell > *:nth-child(n+7) { animation-delay: 360ms; }
#app.view-enter .tabpanel > * { animation: rise-in 480ms cubic-bezier(.2, .8, .2, 1) backwards; }
#app.view-enter .tabpanel > *:nth-child(2) { animation-delay: 70ms; }
#app.view-enter .tabpanel > *:nth-child(n+3) { animation-delay: 140ms; }
#app.view-enter .vitrine-card,
#app.view-enter .match-card,
#app.view-enter .golden-leg { animation: rise-in 460ms cubic-bezier(.2, .8, .2, 1) backwards; }
#app.view-enter .vitrine-card:nth-child(2), #app.view-enter .match-card:nth-child(2) { animation-delay: 50ms; }
#app.view-enter .vitrine-card:nth-child(3), #app.view-enter .match-card:nth-child(3) { animation-delay: 100ms; }
#app.view-enter .vitrine-card:nth-child(4), #app.view-enter .match-card:nth-child(4) { animation-delay: 150ms; }
#app.view-enter .vitrine-card:nth-child(5), #app.view-enter .match-card:nth-child(5) { animation-delay: 200ms; }
#app.view-enter .vitrine-card:nth-child(n+6), #app.view-enter .match-card:nth-child(n+6) { animation-delay: 250ms; }
#app.view-enter .stat-bar-fill,
#app.view-enter .series-fill { animation: bar-grow 900ms cubic-bezier(.2, .8, .2, 1) 200ms both; }

/* ---------- Barre du haut : verre depoli ---------- */
.topbar {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pitch-deep) 88%, transparent), color-mix(in srgb, var(--pitch-deep) 70%, black 30%));
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 0;
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--grad-brand); background-size: 200% 100%;
  animation: flow 6s linear infinite; opacity: .85;
}
@keyframes flow { to { background-position: 200% 0; } }
.wordmark-30, .vitrine-title .wordmark-30 {
  background: var(--grad-gold); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: flow 5s linear infinite;
  filter: drop-shadow(0 2px 10px rgba(243, 197, 99, 0.35));
}
.support-btn, .icon-btn {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 0 rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.support-btn:active, .icon-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 0 rgba(0,0,0,.25); }

/* Bandeau bonus : reflet qui balaie plutot qu'un pompage qui fatigue l'oeil. */
.melbet-banner {
  position: relative; overflow: hidden; animation: none;
  background: linear-gradient(180deg, #FFE27A 0%, #FFCC2E 55%, #EDAE00 100%);
  box-shadow: 0 4px 0 #A87800, 0 12px 26px -8px rgba(240, 184, 0, .7), inset 0 1px 0 rgba(255,255,255,.7);
  border-radius: 12px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.melbet-banner::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-18deg);
  animation: sweep 3.2s ease-in-out infinite;
}
.melbet-banner:active { transform: translateY(3px); box-shadow: 0 1px 0 #A87800, 0 6px 14px -6px rgba(240, 184, 0, .6), inset 0 1px 0 rgba(255,255,255,.7); }
@keyframes sweep { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* ---------- Boutons en relief (3D) ---------- */
.btn-primary, .btn-3d, .partner-btn, .lock-cta, .slip-add, .vitrine-cta {
  position: relative; isolation: isolate; overflow: hidden;
  border: 0; border-radius: 14px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pitch) 78%, white) 0%,
    var(--pitch) 48%,
    color-mix(in srgb, var(--pitch) 82%, black) 100%);
  color: var(--on-pitch);
  font-weight: 700; letter-spacing: .01em;
  box-shadow:
    0 4px 0 color-mix(in srgb, var(--pitch) 45%, black),
    0 12px 24px -8px color-mix(in srgb, var(--pitch) 60%, transparent),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 0 rgba(0,0,0,.12);
  transform: translateY(0);
  transition: transform .12s cubic-bezier(.3,.7,.4,1), box-shadow .12s ease, filter .2s ease;
}
.btn-primary::before, .btn-3d::before, .vitrine-cta::before, .lock-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: btn-shine 4.2s ease-in-out infinite;
}
@keyframes btn-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.btn-primary:hover:not(:disabled), .btn-3d:hover, .partner-btn:hover, .lock-cta:hover, .slip-add:hover, .vitrine-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06) saturate(1.1);
  box-shadow:
    0 6px 0 color-mix(in srgb, var(--pitch) 45%, black),
    0 18px 30px -10px color-mix(in srgb, var(--pitch) 70%, transparent),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 0 rgba(0,0,0,.12);
}
.btn-primary:active:not(:disabled), .btn-3d:active, .partner-btn:active, .lock-cta:active, .slip-add:active, .vitrine-cta:active {
  transform: translateY(4px);
  box-shadow:
    0 0 0 color-mix(in srgb, var(--pitch) 45%, black),
    0 4px 10px -4px color-mix(in srgb, var(--pitch) 60%, transparent),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 2px 6px rgba(0,0,0,.18);
}
.partner-btn { border-radius: 999px; padding: 8px 14px; }
.partner-btn.is-apk, .btn-secondary {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--line) 70%, black 30%), inset 0 1px 0 rgba(255,255,255,.08);
}
.partner-btn.is-apk:hover, .btn-secondary:hover {
  box-shadow: 0 5px 0 color-mix(in srgb, var(--line) 70%, black 30%), 0 10px 18px -8px var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
}
.partner-btn.is-apk:active, .btn-secondary:active { transform: translateY(3px); box-shadow: 0 0 0 transparent, inset 0 2px 4px rgba(0,0,0,.15); }
.lock-cta {
  background: linear-gradient(180deg, #FFE08A 0%, #F3C563 45%, #C98E14 100%);
  color: #1A1204;
  box-shadow: 0 4px 0 #8A5E00, 0 12px 24px -8px rgba(243, 197, 99, .6), inset 0 1px 0 rgba(255,255,255,.6);
}
.slip-add.is-in {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
  color: var(--pitch);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--line) 70%, black 30%), inset 0 0 0 1px var(--pitch);
}

/* Onde au toucher */
.fx-ripple-host { overflow: hidden; }
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 2;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,.15) 45%, transparent 70%);
  transform: scale(0); animation: ripple 650ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- Cartes : bord degrade, profondeur ---------- */
.card {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg,
      color-mix(in srgb, var(--pitch) 38%, var(--line)) 0%,
      var(--line) 38%,
      var(--line) 62%,
      color-mix(in srgb, var(--accent) 30%, var(--line)) 100%) border-box;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.04);
}
.card:hover { box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--pitch) 18%, transparent); }
.card-title { letter-spacing: .015em; }

/* Inclinaison 3D + reflet qui suit la souris */
[data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .2s ease;
  position: relative;
}
[data-tilt]:hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px);
  transition: transform .08s linear, box-shadow .25s ease, border-color .2s ease;
}
[data-tilt]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.10), transparent 45%);
  opacity: 0; transition: opacity .3s ease;
}
[data-tilt]:hover::after { opacity: 1; }

/* ---------- Accueil : vitrine ---------- */
.vitrine-hero {
  border: 1px solid transparent;
  background:
    radial-gradient(120% 90% at 10% 0%, color-mix(in srgb, var(--pitch) 26%, transparent) 0%, transparent 58%),
    radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--violet) 22%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%) padding-box,
    var(--grad-brand) border-box;
  box-shadow: var(--shadow-lg), 0 0 60px -20px color-mix(in srgb, var(--pitch) 55%, transparent);
  padding: 30px 20px 22px;
}
.vitrine-hero::before, .vitrine-hero::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(30px);
}
.vitrine-hero::before {
  width: 180px; height: 180px; top: -60px; right: -40px;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  animation: orb 9s ease-in-out infinite alternate;
}
.vitrine-hero::after {
  width: 150px; height: 150px; bottom: -50px; left: -30px;
  background: color-mix(in srgb, var(--pitch) 40%, transparent);
  animation: orb 11s ease-in-out infinite alternate-reverse;
}
@keyframes orb { from { transform: translate(0, 0) scale(1); } to { transform: translate(-30px, 24px) scale(1.2); } }
.vitrine-hero > * { position: relative; z-index: 1; }
.vitrine-kicker {
  padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--pitch) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pitch) 35%, transparent);
  box-shadow: 0 0 18px -6px var(--pitch);
}
.vitrine-title { font-size: clamp(44px, 14vw, 64px); text-shadow: 0 6px 30px rgba(0,0,0,.25); }
.vitrine-stats div {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 80%, transparent), color-mix(in srgb, var(--surface-2) 90%, transparent));
  border: 1px solid var(--glass-line);
  box-shadow: 0 3px 0 var(--depth), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.vitrine-stats strong {
  font-size: 26px;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vitrine-cta { padding: 15px 16px; font-size: 15.5px; border-radius: 16px; }

.vitrine-card {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(140deg, color-mix(in srgb, var(--tone, var(--pitch)) 45%, var(--line)), var(--line) 50%) border-box;
  box-shadow: 0 3px 0 var(--depth), var(--shadow-sm);
}
.vitrine-card:hover { border-color: transparent; box-shadow: 0 5px 0 var(--depth), 0 18px 32px -14px color-mix(in srgb, var(--tone, var(--pitch)) 60%, transparent); }
.vitrine-card:active { transform: translateY(3px) !important; box-shadow: 0 0 0 var(--depth), var(--shadow-sm); }
.vitrine-grid .vitrine-card:nth-child(1) { --tone: var(--pitch); }
.vitrine-grid .vitrine-card:nth-child(2) { --tone: var(--accent); }
.vitrine-grid .vitrine-card:nth-child(3) { --tone: var(--violet); }
.vitrine-grid .vitrine-card:nth-child(4) { --tone: var(--magenta); }
.vitrine-grid .vitrine-card:nth-child(5) { --tone: var(--gold); }
.vitrine-grid .vitrine-card:nth-child(6) { --tone: #FF8A3D; }
.vitrine-icon {
  width: 46px; height: 46px; border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tone, var(--pitch)) 85%, white), color-mix(in srgb, var(--tone, var(--pitch)) 80%, black));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--tone, var(--pitch)) 45%, black), 0 8px 18px -6px color-mix(in srgb, var(--tone, var(--pitch)) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
  transform: translateZ(20px);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.vitrine-card:hover .vitrine-icon { transform: translateZ(30px) rotate(-8deg) scale(1.08); }
.vitrine-icon svg { width: 23px; height: 23px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.vitrine-badge { color: var(--tone, var(--pitch)); background: color-mix(in srgb, var(--tone, var(--pitch)) 16%, transparent); }
.home-section-title {
  background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--ink) 55%, var(--pitch)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Chiffres du jour ---------- */
.insights-bar {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad-brand) border-box !important;
  box-shadow: 0 3px 0 var(--depth), var(--shadow-md) !important;
}
.insight-value {
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.insight-value .live-dot { -webkit-text-fill-color: initial; }

/* ---------- Combis en or : bord qui tourne ---------- */
.golden-combos-card, .big-combos-card {
  position: relative; overflow: hidden;
  border: 1.5px solid transparent;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--gold) 9%, var(--surface)), var(--surface)) padding-box,
    conic-gradient(from var(--angle), var(--gold), transparent 22%, transparent 50%, var(--gold) 72%, #FFF3C4 80%, var(--gold)) border-box;
  animation: spin-border 6s linear infinite;
  box-shadow: 0 0 40px -18px var(--gold), var(--shadow-md);
}
.big-combos-card {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--violet) 10%, var(--surface)), var(--surface)) padding-box,
    conic-gradient(from var(--angle), var(--violet), transparent 22%, transparent 50%, var(--magenta) 72%, #FFD1F0 80%, var(--violet)) border-box;
  box-shadow: 0 0 40px -18px var(--violet), var(--shadow-md);
}
@keyframes spin-border { to { --angle: 360deg; } }
.golden-combos-card .card-title {
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 18px;
}
.big-combos-card .card-title {
  background: linear-gradient(135deg, var(--violet), var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.golden-combo {
  border-radius: 16px;
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 70%, var(--surface)));
  border: 1px solid var(--glass-line);
  box-shadow: 0 4px 0 var(--depth), inset 0 1px 0 rgba(255,255,255,.05);
}
.golden-combo-odds {
  padding: 4px 10px; border-radius: 999px;
  background: var(--grad-gold); color: #1A1204;
  box-shadow: 0 2px 0 #8A5E00, 0 6px 14px -6px var(--gold);
}
.big-combo .golden-combo-odds { background: linear-gradient(135deg, var(--violet), var(--magenta)); color: #fff; box-shadow: 0 2px 0 #3B2A9A, 0 6px 14px -6px var(--violet); }
.golden-leg {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "teams odds" "league odds" "market odds";
  column-gap: 10px; row-gap: 2px; align-items: center;
  border-radius: 12px; padding: 10px 12px;
  border-left: 3px solid var(--pitch);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease;
}
.big-leg { border-left-color: var(--violet); }
.golden-leg:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.golden-leg-teams { grid-area: teams; }
.golden-leg-league { grid-area: league; }
.golden-leg-market { grid-area: market; color: var(--ink); font-weight: 600; }
.golden-leg-odds {
  grid-area: odds; align-self: center; font-size: 13px;
  padding: 6px 9px; border-radius: 10px;
  background: color-mix(in srgb, var(--pitch) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pitch) 35%, transparent);
}
.big-leg .golden-leg-odds { color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); border-color: color-mix(in srgb, var(--violet) 35%, transparent); }
.golden-combo-safety { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.safety-meter {
  flex: 1; max-width: 90px; height: 6px; border-radius: 999px; position: relative; overflow: hidden;
  background: var(--surface-3);
}
.safety-meter::after {
  content: ''; position: absolute; inset: 0; width: var(--s); border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--pitch));
  box-shadow: 0 0 10px var(--pitch);
}

/* ---------- Liste des matchs ---------- */
.match-card {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, var(--line), var(--line)) border-box;
  box-shadow: 0 3px 0 var(--depth), var(--shadow-sm);
  overflow: hidden;
}
.match-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad-brand); opacity: .0; transition: opacity .2s ease;
}
.match-card:hover {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad-brand) border-box;
  box-shadow: 0 5px 0 var(--depth), 0 16px 30px -14px color-mix(in srgb, var(--pitch) 60%, transparent);
}
.match-card:hover::before { opacity: 1; }
.match-card:active { transform: translateY(3px) scale(.995); box-shadow: 0 0 0 var(--depth), var(--shadow-sm); }
.match-card.is-live {
  border-left: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, var(--risky), var(--line) 45%) border-box;
  animation: live-glow 2.4s ease-in-out infinite;
}
.match-card.is-live::before { background: var(--risky); opacity: 1; }
@keyframes live-glow {
  0%, 100% { box-shadow: 0 3px 0 var(--depth), 0 0 0 0 color-mix(in srgb, var(--risky) 0%, transparent); }
  50% { box-shadow: 0 3px 0 var(--depth), 0 0 22px -4px color-mix(in srgb, var(--risky) 55%, transparent); }
}
.mc-score {
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
}

/* ---------- Onglets et filtres ---------- */
.tab-pill, .chip {
  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
  border: 1px solid var(--glass-line);
  box-shadow: 0 2px 0 var(--depth);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease, color .2s ease;
}
.tab-pill:active, .chip:active { transform: translateY(2px); box-shadow: 0 0 0 var(--depth); }
.tab-pill.is-active, .chip.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pitch) 78%, white), var(--pitch) 50%, color-mix(in srgb, var(--pitch) 80%, black));
  color: var(--on-pitch);
  border-color: transparent;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--pitch) 45%, black), 0 8px 20px -6px color-mix(in srgb, var(--pitch) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
}
.chip.is-active .chip-count { background: rgba(0,0,0,.15); color: var(--on-pitch); }

/* ---------- Fiche match ---------- */
.hero {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 40px, transparent 40px 80px),
    linear-gradient(155deg, var(--pitch-deep) 0%, color-mix(in srgb, var(--pitch) 85%, black) 60%, color-mix(in srgb, var(--accent) 60%, var(--pitch-deep)) 130%);
  background-size: auto, 180% 180%;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--pitch-deep) 60%, black), var(--shadow-lg), 0 0 50px -18px var(--pitch);
}
.hero::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 140px; height: 140px;
  border: 2px solid rgba(255,255,255,.08); border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
}
.crest { animation: float-crest 5s ease-in-out infinite; box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.14), 0 0 26px -6px rgba(255,255,255,.35); }
.hero-team:last-child .crest { animation-delay: -2.5s; }
@keyframes float-crest { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-2deg); } }
.hero-score { font-size: 42px; }

.stat-bar, .series-track { height: 9px; background: var(--surface-3); box-shadow: inset 0 1px 3px rgba(0,0,0,.25); }
.stat-bar-fill, .series-fill {
  background: linear-gradient(90deg, var(--pitch), var(--accent)), var(--pitch);
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--pitch) 70%, transparent);
  position: relative; overflow: hidden;
}
.stat-bar-fill::after, .series-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-100%);
  animation: bar-shimmer 3s ease-in-out infinite;
}
@keyframes bar-shimmer { 0%, 50% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.model-badge-learn {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  padding: 3px 9px; border-radius: 999px; font-weight: 600; font-size: 11px;
  color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent);
}
.model-badge-learn svg { width: 13px; height: 13px; }

/* ---------- Barre du bas : flottante, verre depoli ---------- */
.bottom-nav {
  left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  padding: 7px 6px;
  border-radius: 22px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  max-width: 560px; margin: 0 auto;
}
.nav-item { border-radius: 16px; padding: 6px 2px; z-index: 0; }
.nav-item::after {
  content: ''; position: absolute; inset: 2px 6px; border-radius: 14px; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pitch) 26%, transparent), color-mix(in srgb, var(--pitch) 10%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 18px -6px var(--pitch);
  opacity: 0; transform: scale(.6);
  transition: opacity .25s ease, transform .35s cubic-bezier(.3,1.6,.5,1);
}
.nav-item.is-active::after { opacity: 1; transform: scale(1); }
.nav-item.is-active::before { top: -8px; background: var(--grad-brand); box-shadow: 0 0 10px var(--pitch); }
.nav-item.is-active svg { animation: nav-pop .45s cubic-bezier(.3,1.6,.5,1); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pitch) 70%, transparent)); }
@keyframes nav-pop { 0% { transform: scale(.8); } 60% { transform: translateY(-2px) scale(1.25); } 100% { transform: translateY(-1px) scale(1.14); } }
.shell { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

/* ---------- Bilan de l'IA ---------- */
.tr-card {
  gap: 14px; overflow: hidden;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--pitch) 14%, transparent), transparent 60%),
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, color-mix(in srgb, var(--violet) 60%, var(--line)), var(--line) 45%, color-mix(in srgb, var(--pitch) 55%, var(--line))) border-box;
  box-shadow: 0 4px 0 var(--depth), var(--shadow-md);
}
.tr-head { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.tr-head .hint { margin-top: 2px; }
.tr-icon {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--violet), color-mix(in srgb, var(--violet) 60%, var(--pitch)));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--violet) 40%, black), 0 10px 20px -8px var(--violet), inset 0 1px 0 rgba(255,255,255,.4);
  animation: brain-pulse 3.2s ease-in-out infinite;
}
.tr-icon svg { width: 24px; height: 24px; }
@keyframes brain-pulse {
  0%, 100% { box-shadow: 0 4px 0 color-mix(in srgb, var(--violet) 40%, black), 0 10px 20px -8px var(--violet), inset 0 1px 0 rgba(255,255,255,.4); }
  50% { box-shadow: 0 4px 0 color-mix(in srgb, var(--violet) 40%, black), 0 10px 32px -4px var(--violet), inset 0 1px 0 rgba(255,255,255,.4); }
}
.tr-pill {
  grid-column: 1 / -1; justify-self: start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--pitch); background: color-mix(in srgb, var(--pitch) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--pitch) 30%, transparent);
}
.tr-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pitch); box-shadow: 0 0 0 0 var(--pitch); animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pitch) 70%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.tr-main { display: flex; align-items: center; gap: 16px; }
.tr-ring { position: relative; flex: none; width: 112px; height: 112px; filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--pitch) 35%, transparent)); }
.tr-ring svg { display: block; }
.tr-ring-track { stroke: var(--surface-3); }
#app.view-enter .tr-ring-arc { animation: ring-fill 1.2s cubic-bezier(.2,.8,.2,1) 150ms backwards; }
@keyframes ring-fill { from { stroke-dashoffset: var(--ring-c); } to { stroke-dashoffset: var(--ring-off); } }
.tr-ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.tr-ring-center strong { font-size: 27px; line-height: 1; font-weight: 700; }
.tr-ring-center span { font-size: 10.5px; color: var(--ink-soft); margin-top: 3px; }
.tr-stats { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
.tr-stats div {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent); border: 1px solid var(--glass-line);
  box-shadow: 0 2px 0 var(--depth);
}
.tr-stats strong { font-size: 16px; line-height: 1.1; }
.tr-stats strong em { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.tr-stats span { font-size: 10.5px; color: var(--ink-soft); line-height: 1.25; }
.tr-bars {
  display: flex; align-items: flex-end; gap: 3px; height: 54px; padding: 6px 8px 0;
  border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  border: 1px solid var(--glass-line);
}
.tr-bar {
  flex: 1; height: var(--h); border-radius: 4px 4px 1px 1px; transform-origin: bottom;
  background: linear-gradient(180deg, var(--pitch), color-mix(in srgb, var(--pitch) 40%, transparent));
}
.tr-bar.is-mid { background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 35%, transparent)); }
.tr-bar.is-cold { background: linear-gradient(180deg, var(--risky), color-mix(in srgb, var(--risky) 35%, transparent)); }
#app.view-enter .tr-bar { animation: bar-up .7s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i) * 25ms + 200ms); }
@keyframes bar-up { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.tr-sub { font-family: var(--font-body); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-top: 2px; }
.tr-families { display: flex; flex-direction: column; gap: 10px; }
.tr-family-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; gap: 8px; }
.tr-family-head em { font-style: normal; color: var(--ink-soft); font-size: 11px; margin-left: 4px; }
.tr-family-bar { position: relative; height: 8px; border-radius: 999px; background: var(--surface-3); }
.tr-family-bar span {
  position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), var(--pitch));
  box-shadow: 0 0 10px -2px var(--pitch);
}
#app.view-enter .tr-family-bar span { animation: bar-grow .9s cubic-bezier(.2,.8,.2,1) .25s both; }
.tr-family-bar i { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--ink); opacity: .75; }
.tr-value {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 12px; font-size: 12.5px;
  background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.tr-value span:first-child { font-weight: 700; color: var(--gold); }
.tr-recent-list { display: flex; flex-direction: column; gap: 6px; }
.tr-recent {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 75%, transparent); border: 1px solid var(--glass-line);
}
.tr-recent-icon { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 9px; color: #fff; }
.tr-recent-icon svg { width: 15px; height: 15px; stroke-width: 2.6; }
.tr-recent.is-won .tr-recent-icon { background: linear-gradient(145deg, var(--safe), color-mix(in srgb, var(--safe) 60%, black)); box-shadow: 0 0 12px -3px var(--safe); }
.tr-recent.is-lost .tr-recent-icon { background: linear-gradient(145deg, var(--risky), color-mix(in srgb, var(--risky) 60%, black)); }
.tr-recent-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tr-recent-body strong { font-size: 13px; }
.tr-recent-body span { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-recent-body b { color: var(--ink); font-weight: 600; }
.tr-recent-odds { font-size: 13px; font-weight: 700; color: var(--pitch); }
.tr-recent.is-lost .tr-recent-odds { color: var(--ink-soft); text-decoration: line-through; }
.tr-learning {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft);
  padding: 9px 11px; border-radius: 12px; background: color-mix(in srgb, var(--violet) 10%, transparent);
}
.tr-learning svg { width: 16px; height: 16px; color: var(--violet); flex: none; }
.tr-learning strong { color: var(--ink); }
.tr-more { width: 100%; padding: 12px; }
.tr-warmup { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.tr-warmup strong { color: var(--ink); }
.tr-scan { display: flex; gap: 4px; align-items: flex-end; height: 38px; flex: none; }
.tr-scan span { width: 7px; border-radius: 3px; background: var(--grad-brand); animation: eq 1.1s ease-in-out infinite; }
.tr-scan span:nth-child(2) { animation-delay: -.35s; }
.tr-scan span:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@media (max-width: 380px) {
  .tr-main { flex-direction: column; align-items: stretch; }
  .tr-ring { align-self: center; }
}

/* ---------- Accessibilite : mouvement reduit ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, .topbar::after, .wordmark-30, .melbet-banner::after,
  .btn-primary::before, .btn-3d::before, .vitrine-cta::before, .lock-cta::before,
  .vitrine-hero::before, .vitrine-hero::after, .golden-combos-card, .big-combos-card,
  .match-card.is-live, .crest, .stat-bar-fill::after, .series-fill::after,
  .tr-icon, .tr-pill-dot, .tr-scan span, .nav-item.is-active svg {
    animation: none !important;
  }
  [data-tilt], [data-tilt]:hover { transform: none !important; }
}

/* Retouches v2 */
.partner-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1.1; }
.tabnav, .chips { padding-top: 4px; padding-bottom: 10px; }
.topbar {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pitch-deep) 95%, transparent), color-mix(in srgb, var(--pitch-deep) 78%, black 22%));
}
.bottom-nav { background: color-mix(in srgb, var(--surface) 86%, transparent); }
.fav-btn { flex: none; width: 36px; height: 36px; }

/* ==========================================================================
   ESPACE PRO, OUTILS DU JOUR, CADENAS
   ========================================================================== */
.pro-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  color: #1A1204; background: var(--grad-gold);
  box-shadow: 0 2px 0 #8A5E00, 0 6px 16px -6px var(--gold);
}
.pro-gold-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 16px; font-size: 15px;
  background: linear-gradient(180deg, #FFE59A 0%, #F3C563 45%, #C98E14 100%) !important;
  color: #1A1204 !important;
  box-shadow: 0 5px 0 #7A5200, 0 16px 30px -10px rgba(243, 197, 99, .75), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.pro-gold-btn:active { transform: translateY(5px) !important; box-shadow: 0 0 0 #7A5200, 0 4px 10px -4px rgba(243,197,99,.6), inset 0 2px 5px rgba(0,0,0,.2) !important; }
.pro-gold-btn svg { width: 18px; height: 18px; }

/* Hero de l'Espace Pro */
.pro-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 26px 18px 18px; border-radius: var(--radius-lg);
  border: 1.5px solid transparent;
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 65%),
    linear-gradient(170deg, color-mix(in srgb, var(--gold) 8%, var(--surface)), var(--surface)) padding-box,
    conic-gradient(from var(--angle), var(--gold), transparent 25%, transparent 50%, var(--gold) 75%, #FFF3C4 82%, var(--gold)) border-box;
  animation: spin-border 7s linear infinite;
  box-shadow: 0 0 50px -18px var(--gold), var(--shadow-lg);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.pro-hero > * { position: relative; z-index: 1; }
.pro-hero-shine {
  position: absolute; inset: -40%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(243,197,99,.12) 25%, transparent 30% 70%, rgba(243,197,99,.10) 75%, transparent 80%);
  animation: slow-spin 18s linear infinite;
}
@keyframes slow-spin { to { transform: rotate(360deg); } }
.pro-title { font-size: clamp(38px, 12vw, 54px); line-height: 1; }
.pro-title span {
  background: var(--grad-gold); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: flow 4s linear infinite;
}
.pro-hero p { font-size: 13.5px; color: var(--ink-soft); max-width: 36ch; line-height: 1.5; }
.pro-hero p strong { color: var(--ink); }
.pro-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.pro-jump button {
  padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
  border: 1px solid var(--glass-line); box-shadow: 0 2px 0 var(--depth);
}
.pro-jump button:active { transform: translateY(2px); box-shadow: none; }

/* Carte outil */
.tool-card {
  gap: 12px;
  background:
    radial-gradient(100% 60% at 100% 0%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 60%),
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, color-mix(in srgb, var(--tone) 55%, var(--line)), var(--line) 45%) border-box;
  box-shadow: 0 4px 0 var(--depth), var(--shadow-md);
  scroll-margin-top: 150px;
}
.tool-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.tool-head .hint { margin-top: 3px; line-height: 1.4; }
.tool-icon {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tone, var(--pitch)) 85%, white), color-mix(in srgb, var(--tone, var(--pitch)) 75%, black));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--tone, var(--pitch)) 40%, black), 0 8px 18px -6px var(--tone, var(--pitch)), inset 0 1px 0 rgba(255,255,255,.45);
}
.tool-icon svg { width: 22px; height: 22px; }
.tool-list { display: flex; flex-direction: column; gap: 8px; }
.tool-row {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 11px; border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  border: 1px solid var(--glass-line);
  box-shadow: 0 2px 0 var(--depth);
  transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s ease, border-color .2s ease;
}
button.tool-row:hover, .tool-row:has(> button.tool-row-main:hover) { border-color: color-mix(in srgb, var(--tone, var(--pitch)) 50%, transparent); transform: translateX(2px); }
button.tool-row:active { transform: translateY(2px); box-shadow: none; }
.tool-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.tool-row-main strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-row-main > span { font-size: 11.5px; color: var(--ink-soft); }
.tool-league { display: flex; align-items: center; gap: 5px; font-size: 10.5px !important; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-pick { color: var(--ink) !important; font-weight: 600; }
.tool-pick em { font-style: normal; color: var(--ink-soft); font-weight: 400; }
.tool-pick b, .tool-row-main b { color: var(--ink); }
.tool-prob {
  flex: none; min-width: 52px; text-align: center; padding: 6px 8px; border-radius: 11px;
  background: color-mix(in srgb, var(--tone, var(--pitch)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone, var(--pitch)) 35%, transparent);
}
.tool-prob strong { font-size: 14px; color: var(--tone, var(--pitch)); }
.tool-prob.is-safe strong { color: var(--safe); }
.tool-prob.is-hot strong { color: var(--gold); }
.tool-edge {
  flex: none; padding: 6px 9px; border-radius: 11px; font-weight: 800; font-size: 13.5px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.tool-mini {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  color: var(--pitch); background: var(--surface-3); border: 1px solid var(--line); box-shadow: 0 2px 0 var(--depth);
}
.tool-mini svg { width: 17px; height: 17px; }
.tool-mini:active { transform: translateY(2px); box-shadow: none; }
.tool-loading { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-soft); padding: 6px 2px; }
.tool-empty { font-size: 13px; color: var(--ink-soft); padding: 4px 2px; }
.tool-upsell { width: 100%; padding: 12px; display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #FFE59A 0%, #F3C563 45%, #C98E14 100%) !important; color: #1A1204 !important;
  box-shadow: 0 4px 0 #7A5200, 0 12px 24px -10px rgba(243,197,99,.7), inset 0 1px 0 rgba(255,255,255,.7) !important; }
.tool-upsell svg { width: 16px; height: 16px; }

/* Buteurs */
.scorer-rank {
  flex: none; width: 22px; text-align: center; font-weight: 800; font-size: 15px;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.scorer-photo {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(145deg, var(--surface-3), var(--surface-2));
  border: 2px solid color-mix(in srgb, var(--gold) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 15%, transparent), 0 6px 14px -6px var(--gold);
}
.scorer-photo > img:first-child:not(.scorer-team-logo) { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.scorer-team-logo {
  position: absolute; right: -5px; bottom: -4px; width: 20px; height: 20px; object-fit: contain;
  background: #fff; border-radius: 50%; padding: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.scorer-row-v2:first-child .scorer-photo { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent), 0 0 22px -4px var(--gold); }

/* Scores exacts, matchs a buts */
.exact-score {
  flex: none; font-size: 20px; font-weight: 800; padding: 4px 10px; border-radius: 10px;
  color: #fff; background: linear-gradient(145deg, var(--violet), color-mix(in srgb, var(--violet) 55%, black));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--violet) 40%, black), 0 8px 18px -8px var(--violet);
}
.xg-flame { flex: none; display: flex; flex-direction: column; align-items: center; padding: 5px 10px; border-radius: 11px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--risky) 30%, transparent), color-mix(in srgb, #FF8A3D 18%, transparent));
  border: 1px solid color-mix(in srgb, var(--risky) 40%, transparent); }
.xg-flame strong { font-size: 16px; color: var(--risky); }
.xg-flame em { font-style: normal; font-size: 10px; color: var(--ink-soft); }

/* Accroche value bets pour non-abonnes */
.value-hook {
  padding: 11px 12px; border-radius: 12px; font-size: 13px; text-align: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
}
.value-hook strong { color: var(--accent); font-size: 15px; }

/* Calculateur de mise */
.kelly-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kelly-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.kelly-form input, .kelly-form select {
  font: inherit; font-family: var(--font-mono); font-size: 15px; color: var(--ink);
  padding: 10px 11px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--surface-2); box-shadow: inset 0 2px 4px rgba(0,0,0,.12);
}
.kelly-form select { font-family: var(--font-body); font-size: 13px; }
.kelly-form input:focus, .kelly-form select:focus { outline: 2px solid var(--pitch); outline-offset: 1px; }
.kelly-out { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kelly-out > div { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--pitch) 10%, transparent); border: 1px solid color-mix(in srgb, var(--pitch) 25%, transparent); }
.kelly-out > div:first-child { grid-column: 1 / -1; align-items: center; background: linear-gradient(160deg, color-mix(in srgb, var(--pitch) 22%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)); }
.kelly-out span { font-size: 11px; color: var(--ink-soft); }
.kelly-out strong { font-size: 16px; }
.kelly-out > div:first-child strong { font-size: 26px; color: var(--pitch); }
.kelly-out.is-bad { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--risky) 12%, transparent); border: 1px solid color-mix(in srgb, var(--risky) 35%, transparent); }
.kelly-out.is-bad strong { color: var(--risky); font-size: 17px; }
.kelly-out.is-bad span { font-size: 12.5px; line-height: 1.45; }
.tool-card .hint svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--pitch); }

/* Accroche Pro sur l'accueil */
.pro-teaser {
  position: relative; overflow: hidden; padding: 20px 16px 14px; border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  border: 1.5px solid transparent;
  background:
    linear-gradient(170deg, color-mix(in srgb, var(--gold) 10%, var(--surface)), var(--surface)) padding-box,
    conic-gradient(from var(--angle), var(--gold), transparent 25%, transparent 50%, var(--gold) 75%, #FFF3C4 82%, var(--gold)) border-box;
  animation: spin-border 6s linear infinite;
  box-shadow: 0 0 44px -18px var(--gold), var(--shadow-md);
}
.pro-teaser > *:not(.pro-teaser-glow) { position: relative; z-index: 1; }
.pro-teaser-glow { position: absolute; width: 220px; height: 220px; top: -120px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: color-mix(in srgb, var(--gold) 35%, transparent); filter: blur(50px); pointer-events: none; }
.pro-teaser h3 { font-family: var(--font-body); font-size: 15px; font-weight: 700; max-width: 30ch; }
.pro-teaser-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.pro-teaser-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 85%, transparent); border: 1px solid var(--glass-line); box-shadow: 0 3px 0 var(--depth);
}
.pro-teaser-item:active { transform: translateY(3px); box-shadow: none; }
.pro-teaser-item .tool-icon { width: 34px; height: 34px; border-radius: 11px; --tone: var(--gold); }
.pro-teaser-item .tool-icon svg { width: 18px; height: 18px; }
.pro-teaser-item strong { font-size: 20px; line-height: 1; }
.pro-teaser-item span:last-child { font-size: 10px; color: var(--ink-soft); line-height: 1.2; }
.pro-teaser-link { font-size: 12.5px; font-weight: 600; color: var(--gold); }

/* Entree Espace Pro (page compte) */
.pro-entry {
  display: flex !important; align-items: center; gap: 12px; width: 100%; padding: 14px !important; text-align: left;
  background: linear-gradient(180deg, #FFE59A 0%, #F3C563 45%, #C98E14 100%) !important; color: #1A1204 !important;
  box-shadow: 0 5px 0 #7A5200, 0 16px 30px -12px rgba(243,197,99,.7), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.pro-entry-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(0,0,0,.12); flex: none; }
.pro-entry-icon svg { width: 22px; height: 22px; }
.pro-entry strong { display: block; font-size: 16px; }
.pro-entry em { display: block; font-style: normal; font-size: 12px; opacity: .8; font-weight: 500; }

/* ---------- Cadenas ---------- */
.tool-row.is-locked {
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--gold) 5%, transparent) 10px 20px),
    color-mix(in srgb, var(--surface-2) 85%, transparent);
  border: 1px dashed color-mix(in srgb, var(--gold) 40%, transparent);
}
.tool-row.is-locked::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 35%; left: -45%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--gold) 18%, transparent), transparent);
  transform: skewX(-18deg); animation: sweep 4.5s ease-in-out infinite; pointer-events: none;
}
.tool-blur { display: block; font-size: 13px; letter-spacing: -1px; color: var(--ink); filter: blur(5px); opacity: .55; user-select: none; }
.tool-blur-sm { font-size: 11px; opacity: .35; }
.tool-lock {
  flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  color: #1A1204; background: var(--grad-gold);
  box-shadow: 0 3px 0 #8A5E00, 0 0 18px -4px var(--gold);
  animation: lock-bob 2.8s ease-in-out infinite;
}
.tool-lock svg { width: 17px; height: 17px; stroke-width: 2.2; }
@keyframes lock-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2px) rotate(-6deg); } }

.gated-content { filter: blur(7px) saturate(.8); opacity: .5; }
.lock-overlay {
  background:
    radial-gradient(60% 50% at 50% 45%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%),
    color-mix(in srgb, var(--bg) 50%, transparent);
  backdrop-filter: blur(3px);
  gap: 10px;
}
.lock-overlay svg {
  width: 30px; height: 30px; padding: 12px; box-sizing: content-box; border-radius: 18px;
  color: #1A1204; background: var(--grad-gold);
  box-shadow: 0 4px 0 #8A5E00, 0 0 30px -4px var(--gold);
  animation: lock-bob 2.8s ease-in-out infinite;
}
.lock-overlay span:nth-child(2) { font-size: 14px; font-weight: 700; }
.locked-tab {
  background:
    radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%),
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, color-mix(in srgb, var(--gold) 60%, var(--line)), var(--line) 50%) border-box;
}
.locked-tab svg {
  width: 30px; height: 30px; padding: 12px; box-sizing: content-box; border-radius: 18px;
  color: #1A1204 !important; background: var(--grad-gold);
  box-shadow: 0 4px 0 #8A5E00, 0 0 30px -4px var(--gold);
  animation: lock-bob 2.8s ease-in-out infinite;
}
.slip-cta { display: block; text-align: center; padding: 13px; margin-top: 10px; text-decoration: none; }

@media (max-width: 380px) {
  .pro-teaser-grid { grid-template-columns: repeat(2, 1fr); }
  .kelly-form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pro-hero, .pro-hero-shine, .pro-title span, .pro-teaser, .tool-row.is-locked::after, .tool-lock, .lock-overlay svg, .locked-tab svg { animation: none !important; }
}
.tool-more {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  padding: 10px; border-radius: 12px; font-size: 12.5px; font-weight: 700; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent);
}
.tool-more svg { width: 15px; height: 15px; }
.scorer-initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--gold); }
.scorer-photo > img:not(.scorer-team-logo) { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.kelly-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kelly-form input, .kelly-form select { width: 100%; min-width: 0; box-sizing: border-box; }
.kelly-out { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kelly-out > div { padding: 9px 8px; }
.kelly-out strong { font-size: 14px; }
.tool-row > button.tool-row-main { padding: 0; background: none; border: 0; box-shadow: none; }
.tool-mini { padding: 0; }

/* ── Bannière affilié entre les matchs ─────────────────────────────────────── */
.aff-strip {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  background: color-mix(in srgb, var(--gold) 6%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  border-radius: 13px; text-decoration: none; color: var(--ink);
  font-size: 12.5px; margin: 4px 0; position: relative; overflow: hidden;
  transition: background .2s, border-color .2s;
}
.aff-strip::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--gold) 12%, transparent) 50%, transparent 100%);
  transform: translateX(-100%); transition: transform .45s ease;
}
.aff-strip:hover::before { transform: translateX(100%); }
.aff-strip:hover { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.aff-strip-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: 2px 6px; border-radius: 5px; background: var(--surface-3); flex-shrink: 0; }
.aff-strip-name { font-weight: 800; font-family: var(--font-display); flex-shrink: 0; font-size: 13px; }
.aff-strip-tagline { flex: 1; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aff-strip-cta { font-weight: 700; font-size: 12px; color: var(--gold); flex-shrink: 0; }

/* ── Score prédit flouté (teaser non-abonné) ────────────────────────────────── */
.score-teaser {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px;
  background: color-mix(in srgb, var(--violet) 8%, var(--surface-2));
  border: 1px dashed color-mix(in srgb, var(--violet) 40%, transparent);
  border-radius: 12px; font-size: 13px; color: var(--ink); cursor: pointer;
  font-weight: 600; text-align: left; margin-bottom: 10px;
}
.score-teaser:hover { background: color-mix(in srgb, var(--violet) 14%, var(--surface-2)); }
.score-blur {
  filter: blur(6px); user-select: none; pointer-events: none;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; font-size: 16px; font-family: var(--font-display);
  letter-spacing: .06em;
}
.score-teaser-lock {
  display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent);
  padding: 3px 8px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  flex-shrink: 0; margin-left: auto;
}
.score-teaser-lock svg { width: 11px; height: 11px; }

@media (max-width: 380px) {
  .aff-strip-tagline { display: none; }
}