/* Polices hébergées par HALL30 (rapides en Afrique de l'Ouest, aucun appel à Google pour celles-ci) */
@font-face { font-family: 'Anton'; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/anton-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/inter-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-style: normal; font-display: swap; src: url(/fonts/inter-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Playfair'; font-weight: 900; font-style: normal; font-display: swap; src: url(/fonts/playfair-display-latin-900-normal.woff2) format('woff2'); }
  :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; }
  .form-grid > * { min-width: 0; }
  @media (max-width: 480px) { .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);
}



.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: 0;
  }

  .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-recent.is-exact.is-won { background: color-mix(in srgb, var(--gold) 8%, var(--surface-2)); border-color: color-mix(in srgb, var(--gold) 25%, transparent); }
.tr-recent.is-exact.is-won .tr-recent-body strong { color: var(--gold); }
.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; }
}

/* ---------- Combis : offert / verrouille ---------- */
.golden-combo.is-free { border-color: color-mix(in srgb, var(--gold) 55%, transparent); box-shadow: 0 4px 0 var(--depth), 0 0 0 1px color-mix(in srgb, var(--gold) 25%, transparent), 0 10px 30px -14px var(--gold); }
.golden-combo.is-free .golden-combo-label { color: var(--gold); font-weight: 700; }
.golden-combo.is-locked {
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
  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);
}
.locked-combo-body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px 10px; color: var(--ink-soft); font-size: 13px; text-align: center; }
.locked-combo-body svg { width: 26px; height: 26px; color: var(--gold); }
.locked-combo-body .lock-cta { color: var(--gold); font-weight: 700; }

/* ---------- Onglet Pronostics verrouille ---------- */
.pro-lock-card { text-align: center; padding: 28px 18px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.pro-lock-card > svg { width: 38px; height: 38px; color: var(--gold); margin: 0 auto 8px; display: block; }
.pro-lock-list { list-style: none; padding: 0; margin: 14px auto; max-width: 340px; text-align: left; display: grid; gap: 8px; }
.pro-lock-list li { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.pro-lock-list li::before { content: '🔒'; font-size: 13px; }
.pro-lock-card .btn-primary { width: 100%; max-width: 340px; margin-top: 6px; }
.pro-lock-card .link-btn { background: none; border: 0; color: var(--gold); font: inherit; font-weight: 600; margin-top: 12px; cursor: pointer; text-decoration: underline; }

/* ---------- A propos / FAQ (contenu lisible par les moteurs) ---------- */
.seo-about {
  max-width: 760px; margin: 24px auto 0; padding: 24px 16px calc(110px + env(safe-area-inset-bottom));
  color: var(--ink-soft); font-size: 14px; line-height: 1.6; border-top: 1px solid var(--glass-line, rgba(255,255,255,.08));
}
.seo-about h1 { font-size: 18px; color: var(--ink); margin: 0 0 8px; }
.seo-about h2 { font-size: 15px; color: var(--ink); margin: 20px 0 8px; }
.seo-about details { border-bottom: 1px solid var(--glass-line, rgba(255,255,255,.08)); padding: 10px 0; }
.seo-about summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.seo-about details p { margin: 8px 0 0; }
.seo-about a { color: var(--gold); }
.seo-links { margin-top: 18px; }
.seo-legal { font-size: 12px; opacity: .7; }

.support-line { font-size: 13px; color: var(--ink-soft); text-align: center; margin: 12px 0 0; line-height: 1.6; }
.support-line a { color: var(--pitch, #2fd68a); font-weight: 600; text-decoration: none; white-space: nowrap; }

/* Combi offert en vitrine + historique public */
.free-spotlight { border: 1px solid color-mix(in srgb, var(--gold, #e5b94b) 55%, transparent); }
.free-spotlight-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.free-spotlight-tag { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold, #e5b94b); }
.free-spotlight-legs { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.free-leg { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line, rgba(255,255,255,.08)); background: var(--surface-raised, rgba(255,255,255,.03)); color: var(--ink); font: inherit; cursor: pointer; }
.free-leg > span:first-child { grid-column: 1 / -1; font-size: 13px; color: var(--ink-soft); }
.free-leg strong { font-size: 15px; }
.free-spotlight-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.free-spotlight-actions > * { flex: 1 1 160px; text-align: center; }
.btn-share { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 14px; border-radius: 12px; background: #1faa53; color: #fff; font-weight: 700; text-decoration: none; margin-top: 10px; }
.golden-combo .btn-share { width: 100%; }
.combo-history-list { list-style: none; margin: 10px 0 0; padding: 0; }
.combo-history-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line, rgba(255,255,255,.08)); font-size: 13px; }
.combo-history-list li:first-child { border-top: 0; }
.combo-history-legs { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.combo-history .btn-share { width: 100%; }

/* ---------- Liste de matchs paginee ---------- */
.btn-more {
  width: 100%; margin-top: 10px; padding: 13px 16px; border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--pitch) 45%, transparent);
  background: color-mix(in srgb, var(--pitch) 8%, transparent);
  color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer;
}
.btn-more span { color: var(--ink-soft); font-weight: 500; }
/* Le navigateur ne peint pas les cartes hors ecran. */
.match-card { content-visibility: auto; contain-intrinsic-size: auto 92px; }

/* ---------- Telephones : effets allégés ----------
   Safari iOS tue l'onglet quand la memoire graphique deborde : fond anime
   plein ecran, flous et calques animes s'additionnent. */
@media (hover: none), (max-width: 760px) {
  body::before { animation: none; inset: 0; }
  .vitrine-hero::before, .vitrine-hero::after { animation: none; filter: blur(24px); }
  .pro-teaser-glow { filter: blur(30px); }
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  .topbar, .bottom-nav { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .crest { animation: none; }
}
.btn-share-img { background: linear-gradient(135deg, #f2c14e, #e0a92e); color: #1a1203; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
/* Bouton retour : pastille compacte ; la colonne .shell gere deja l'espacement. */
.shell > .back-link { align-self: flex-start; margin-bottom: 0; }
.shell > .filterbar { margin-top: 0; }

/* ---------- Liste des matchs facon site de resultats ---------- */
.day-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 6px; }
.day-tab { border: 0; background: transparent; color: var(--ink-soft); font: 700 14px var(--font-body); padding: 10px 6px; border-radius: 10px; cursor: pointer; }
.day-tab.is-active { background: var(--pitch); color: #04130b; box-shadow: var(--shadow-sm); }
.day-label { margin: 2px 0 10px; font-size: 13px; color: var(--ink-soft); }
.day-label::first-letter, .exact-hits-day::first-letter { text-transform: uppercase; }
.fs-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.fs-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.fs-flag { width: 20px; height: 15px; object-fit: cover; border-radius: 3px; flex: none; }
.fs-comp { flex: 1; min-width: 0; font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-country { color: var(--ink-soft); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; font-weight: 600; }
.fs-comp strong { color: var(--ink); font-weight: 700; }
.fs-count { font: 600 11px var(--font-mono); color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.fs-row { width: 100%; display: grid; grid-template-columns: 54px 1fr auto auto auto; align-items: center; gap: 8px; padding: 9px 14px; background: transparent; border: 0; border-top: 1px solid var(--line); color: var(--ink); text-align: left; cursor: pointer; font-family: var(--font-body); }
.fs-group .fs-row:first-of-type { border-top: 0; }
.fs-row:active { background: var(--surface-2); }
.fs-time { font: 600 12px var(--font-mono); color: var(--ink-soft); }
.fs-live { color: var(--risky); font-weight: 700; }
.fs-ft { font-size: 11px; }
.fs-teams { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fs-team { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.fs-team span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-team.is-win { font-weight: 700; }
.fs-logo { width: 18px; height: 18px; object-fit: contain; flex: none; }
.fs-score { display: flex; flex-direction: column; gap: 5px; min-width: 18px; text-align: right; font: 700 14px var(--font-mono); }
.fs-score.is-live { color: var(--risky); }
.fs-hit { font-size: 16px; }
.fs-fav svg { width: 14px; height: 14px; stroke: var(--risky); fill: var(--risky); }
.fs-row.is-live .fs-time::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--risky); margin-right: 5px; vertical-align: middle; }

/* ---------- Scores exacts trouves ---------- */
.exact-hits { border-color: color-mix(in srgb, var(--pitch) 45%, transparent); }
.exact-hits-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.exact-hits-tag { font: 700 12px var(--font-body); color: var(--pitch); background: color-mix(in srgb, var(--pitch) 14%, transparent); border-radius: 999px; padding: 4px 10px; }
.exact-hits-day { display: inline-block; font-size: 12px; color: var(--ink-soft); }
.exact-hits-list { list-style: none; margin: 10px 0; padding: 0; }
.exact-hits-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.exact-hits-list li:first-child { border-top: 0; }
.exact-hits-match { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exact-hits-match strong { font-size: 14px; }
.exact-hits-match b { color: var(--pitch); padding: 0 4px; }
.exact-hits-match em { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.exact-hits-ok { font-size: 18px; }

/* ---------- Astuces et guide ---------- */
.stat-tip { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); font-size: 13px; line-height: 1.45; color: var(--ink); }
.stat-tip span { display: block; font-weight: 700; color: var(--gold); margin-bottom: 3px; font-size: 12px; }
.stat-tip-link { background: none; border: 0; padding: 0; color: var(--pitch); font: 600 13px var(--font-body); text-decoration: underline; cursor: pointer; }
.xg-locked { width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 8px; border-radius: 10px; border: 1px dashed var(--line); background: var(--surface-2); color: var(--ink-soft); font: 600 13px var(--font-body); cursor: pointer; }
.pro-lock-free { margin-top: 10px; }
.guide-title { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; margin: 10px 0 8px; text-transform: uppercase; }
.guide-step { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.guide-step p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.guide-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--pitch); color: #04130b; font-weight: 700; }
.guide-check { margin: 8px 0 0; padding-left: 20px; line-height: 1.8; font-size: 14px; }
.guide-bankroll p { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
/* L'icone du bouton n'avait aucune taille : l'eclair s'etalait sur toute la
   largeur de la carte verrouillee. */
.btn-primary svg, .pro-lock-card .btn-primary svg, .tool-upsell svg { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.pro-lock-card .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* Le texte pour les moteurs de recherche reste dans la page, mais ne
   s'affiche que sous l'accueil. */
body[data-view]:not([data-view="accueil"]) .seo-about { display: none; }

/* ---------- Codes promo et bookmakers ---------- */
.code-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px dashed var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--ink); border-radius: 10px; padding: 6px 10px; cursor: pointer; font: 600 12px var(--font-body); white-space: nowrap; }
.code-chip span { color: var(--ink-soft); font-size: 11px; text-transform: uppercase; }
.code-chip strong { font-size: 15px; color: var(--gold); letter-spacing: .06em; }
.code-chip em { font-style: normal; font-size: 11px; background: var(--gold); color: #1a1203; border-radius: 6px; padding: 2px 6px; }
.code-chip.is-copied em { background: var(--pitch); }
.code-chip.is-copied em::after { content: ' ✓'; }
.bk-strip { margin: 2px 0; }
.bk-strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 2px 8px; }
.bk-strip-head h3 { margin: 0; font-size: 16px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.bk-scroll { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.bk-card { flex: 0 0 72%; max-width: 260px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--bk); box-shadow: var(--shadow-sm); }
.bk-name { font-size: 18px; color: var(--bk); font-family: var(--font-display); text-transform: uppercase; }
.bk-bonus { font-size: 13px; color: var(--ink-soft); }
.bk-go { display: inline-block; margin-top: 2px; padding: 9px 14px; border-radius: 10px; background: var(--bk); color: #0b0b0b; font: 700 13px var(--font-body); text-decoration: none; }
.bk-fiche { display: flex; flex-direction: column; gap: 10px; border-left: 4px solid var(--bk); }
.bk-fiche strong { display: block; font-size: 14px; margin-bottom: 2px; }
.bk-fiche-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.aff-code-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 4px; padding: 0 4px; }
.combo-bk { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); padding: 8px 0 2px; }
.partner-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.plan-chosen { margin: 4px 0 12px; font-size: 14px; color: var(--ink-soft); }
.plan-chosen strong { color: var(--gold); }
#payment-form.is-flash { animation: form-flash 1.2s ease-out; }
@keyframes form-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pitch) 70%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }

/* ---------- Recommandation (abonnes) ---------- */
.reco-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 12px; }
.reco-chip { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 4px; text-align: center; }
.reco-chip strong { display: block; font-size: 18px; color: var(--gold); }
.reco-chip span { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; }
.reco-line { margin: 6px 0; font-size: 14px; line-height: 1.5; }
.reco-verdict { margin: 12px 0 10px; padding: 12px 14px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; background: color-mix(in srgb, var(--pitch) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pitch) 45%, transparent); }
.reco-verdict strong { font-size: 17px; }
.reco-verdict-tag { font: 700 11px var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--pitch); }
.reco-verdict.is-pass { background: var(--surface-2); border-color: var(--line); }
.reco-verdict.is-pass .reco-verdict-tag { color: var(--ink-soft); }
.conf-tag { align-self: flex-start; font: 600 11px var(--font-body); padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); }
.conf-tag.is-good { background: color-mix(in srgb, var(--pitch) 16%, transparent); color: var(--pitch); }
.conf-tag.is-high { background: var(--pitch); color: #04130b; }
.reco-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.reco-row:first-of-type { border-top: 0; }
.reco-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reco-row-main strong { font-size: 14px; }
.reco-p { font-weight: 700; color: var(--pitch); }
.reco-o { color: var(--ink-soft); }
.reco-row .slip-add { min-width: 36px; padding: 6px 10px; }

/* ---------- Scores exacts du jour + explications de paris ---------- */
.exact-today { border-color: color-mix(in srgb, var(--violet, #8b5cf6) 50%, transparent); }
.xt-list { display: flex; flex-direction: column; margin: 8px 0 12px; }
.xt-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; background: none; border: 0; border-top: 1px solid var(--line); color: var(--ink); text-align: left; cursor: pointer; font-family: var(--font-body); }
.xt-row:first-child { border-top: 0; }
.xt-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.xt-main strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xt-scores { display: flex; gap: 5px; }
.xt-scores b { font: 700 14px var(--font-mono); padding: 5px 7px; border-radius: 8px; background: color-mix(in srgb, #8b5cf6 22%, transparent); color: var(--ink); }
.xt-scores.is-locked b { filter: blur(5px); user-select: none; }
.bet-desc { display: block; font: 400 12px/1.4 var(--font-body); color: var(--ink-soft); margin-top: 3px; font-style: normal; }
.market-name .bet-desc { font-size: 11px; }
.tr-stat-exact strong { color: var(--pitch); }
.tr-honest { margin-top: 10px; }
.xt-main strong { white-space: normal; line-height: 1.25; }
.xt-scores { gap: 4px; }
.xt-scores b { font-size: 13px; padding: 4px 5px; }
.xt-row .tool-lock svg { width: 16px; height: 16px; }

/* Resultats du jour */
.day-results .dr-title{display:flex;justify-content:space-between;margin:14px 0 6px;font-size:.95rem;color:var(--gold,#F2C14E)}
.dr-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dr-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.dr-list li.is-won{border-color:rgba(24,224,139,.45);background:rgba(24,224,139,.08)}
.dr-list li span:first-child{display:flex;flex-direction:column;min-width:0}
.dr-legs{display:flex;flex-direction:column;gap:2px;margin-top:3px}
.dr-legs em{white-space:normal}
.dr-legs small{opacity:.65;font-style:normal}
.dr-list li strong{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-list li em{font-style:normal;font-size:.75rem;opacity:.7}

/* Chiffres cles du match */
.kf-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.kf-list li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.kf-list li.kf-h2h{border-color:rgba(242,193,78,.35)}
.kf-icon{font-size:20px;text-align:center}
.kf-text{font-size:.88rem;font-weight:600;line-height:1.3}
.kf-text em{display:block;font-style:normal;font-weight:500;font-size:.72rem;opacity:.6;margin-top:2px}
.kf-tag{font-size:.7rem;font-weight:700;white-space:nowrap;color:#04130B;background:linear-gradient(135deg,#18E08B,#0FB5A0);padding:4px 8px;border-radius:999px}
/* Minutes des buts */
.gm-team{margin-top:12px}
.gm-team>strong{font-size:.85rem}
.gm-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:6px}
.gm-col{display:flex;flex-direction:column;align-items:center;gap:3px}
.gm-bars{height:64px;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;background:rgba(255,255,255,.03);border-radius:8px;padding:0 4px}
.gm-bars i{display:block;width:40%;min-height:2px;border-radius:4px 4px 1px 1px}
.gm-for,.gm-key.gm-for{background:#18E08B}
.gm-against,.gm-key.gm-against{background:#FF5A5F}
.gm-key{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:middle}
.gm-num{font-size:.72rem}.gm-num b{font-weight:500;opacity:.55}
.gm-label{font-size:.62rem;opacity:.6}

/* Bouton Bonus (remplace le bandeau permanent) + feuille des offres */
.bonus-btn{border:1px solid rgba(242,193,78,.45);background:rgba(242,193,78,.12);color:#F2C14E;font-weight:700;font-size:.8rem;border-radius:999px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.bonus-sheet{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s ease-out}
.bonus-sheet-inner{position:relative;width:100%;max-width:560px;max-height:85vh;overflow:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom));background:var(--bg,#07090C);border-radius:24px 24px 0 0}
.bonus-sheet-inner .paywall-close{position:absolute;top:12px;right:12px;z-index:2}
.live-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px}
.live-toggle .hint{display:block;margin-top:4px}
/* Mode live : aucun bookmaker a l'ecran */
body.live-mode .bonus-btn,body.live-mode .aff-strip,body.live-mode .aff-code-row,body.live-mode .bk-strip,
body.live-mode .bk-fiche,body.live-mode .combo-bk,body.live-mode .code-chip,body.live-mode .partners-card,
body.live-mode .bonus-sheet,body.live-mode .promo-gallery{display:none!important}
/* Barre du haut sans bandeau bookmaker */
.topbar .wordmark { order: 1; margin-right: auto; }
.topbar .bonus-btn { order: 2; }
.topbar .support-btn { order: 3; margin-left: 0; }
.topbar .icon-btn { order: 4; }
@media (max-width: 600px) { .topbar { padding-bottom: 10px; } }
body.live-mode .topbar .support-btn { margin-left: auto; }
/* Feuille des offres : lignes lisibles, croix visible */
.bonus-sheet .partner-row { flex-wrap: wrap; row-gap: 8px; }
.bonus-sheet .partner-info { flex: 1 1 60%; min-width: 0; }
.bonus-sheet .partner-actions { flex: 1 1 100%; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.bonus-sheet .paywall-close { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; border: 0; }
.bonus-sheet .paywall-close svg { width: 18px; height: 18px; }
/* Chiffres cles : etiquette sous le texte */
.kf-list li { grid-template-columns: 34px 1fr; }
.kf-list .kf-tag { grid-column: 2; justify-self: start; margin-top: -2px; }

/* Chiffres cles : faits neutres plus discrets que les tendances fortes */
.kf-list li:not(.is-strong) { background: rgba(255,255,255,.02); }
.kf-list li:not(.is-strong) .kf-text { font-weight: 500; }
/* Face-a-face en chiffres */
.cmp-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 6px 0 10px; }
.cmp-head strong { font-size: .85rem; }
.cmp-head strong:last-child { text-align: right; }
.cmp-head .hint { font-size: .68rem; text-align: center; }
.cmp-row { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.05); }
.cmp-v { font-size: .85rem; font-weight: 700; opacity: .75; }
.cmp-v:last-child { text-align: right; }
.cmp-v.is-edge { opacity: 1; color: #18E08B; }
.cmp-label { display: block; text-align: center; font-size: .72rem; opacity: .7; margin-bottom: 4px; }
.cmp-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.06); gap: 2px; }
.cmp-bar i { display: block; height: 100%; background: rgba(147,161,174,.45); }
.cmp-bar i.is-edge { background: linear-gradient(90deg, #18E08B, #0FB5A0); }
.cmp-form { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 0 0 8px; }
.cmp-form span { display: flex; gap: 4px; }
.cmp-form span:last-child { justify-content: flex-end; }
.cmp-form em { font-style: normal; font-size: .68rem; opacity: .6; }
.fc { font-style: normal; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 800; }
.fc-v { background: #18E08B; color: #04130B; } .fc-n { background: #93A1AE; color: #0b1116; } .fc-d { background: #FF5A5F; color: #fff; }

/* ==========================================================================
   ORDINATEUR : navigation en haut, pleine largeur, colonnes, ecran partage
   ========================================================================== */
@media (min-width: 1024px) {
  .topbar { padding: 14px 32px; min-height: 68px; }
  .shell { max-width: 1200px; padding: 24px 32px 56px; }
  /* Navigation principale : au centre de la barre du haut */
  #navhost .bottom-nav {
    position: fixed; top: 12px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
    width: auto; max-width: none; margin: 0; display: flex; gap: 2px; padding: 4px;
    border-radius: 16px; z-index: 60; box-shadow: 0 10px 30px -12px rgba(0,0,0,.5);
  }
  #navhost .bottom-nav .nav-item { flex: none; flex-direction: row; gap: 8px; padding: 9px 16px; cursor: pointer; }
  #navhost .bottom-nav .nav-item span { font-size: 14px; }
  #navhost .bottom-nav .nav-item svg { width: 18px; height: 18px; }
  #navhost .bottom-nav .nav-item.is-active::before { display: none; }
  #navhost .bottom-nav .nav-item:not(.is-active):hover { background: rgba(255,255,255,.06); }

  /* Pages de cartes : deux colonnes facon mosaique */
  body[data-view="accueil"] .shell,
  body[data-view="predictions"] .shell,
  body[data-view="pro"] .shell,
  body[data-view="account"] .shell,
  body[data-view="guide"] .shell { display: block; columns: 2; column-gap: 24px; }
  body[data-view="accueil"] .shell > *,
  body[data-view="predictions"] .shell > *,
  body[data-view="pro"] .shell > *,
  body[data-view="account"] .shell > *,
  body[data-view="guide"] .shell > * { break-inside: avoid; margin: 0 0 22px; }
  .shell > .vitrine-hero, .shell > .vitrine-grid, .shell > .insights-bar, .shell > .data-banner,
  .shell > .back-link, .shell > .bk-strip, .shell > .pro-hero, .shell > .hero-testimonials-band { column-span: all; }
  .shell > .back-link { display: inline-flex; }
  .vitrine-grid { grid-template-columns: repeat(4, 1fr); }

  /* Onglets d'une fiche : tous visibles, pas de defilement horizontal */
  .tabnav { flex-wrap: wrap; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  /* Survol souris */
  .fs-row, .vitrine-card, .xt-row, .tool-row, .tab-pill, .day-tab, .chip { cursor: pointer; }
  .fs-row:hover { background: rgba(255,255,255,.045); }
  .tab-pill:not(.is-active):hover { background: rgba(255,255,255,.07); }
}

@media (min-width: 1100px) {
  .shell.shell-split { max-width: 1440px; display: block; columns: auto; }
  .split { display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 26px; align-items: start; }
  .split-list {
    position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto;
    display: flex; flex-direction: column; gap: 12px; padding: 2px 8px 24px 2px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
  }
  .split-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .fs-row.is-selected { background: rgba(24,224,139,.12); box-shadow: inset 3px 0 0 #18E08B; }
  .split-empty { text-align: center; padding: 70px 30px; }
  .split-empty-icon { font-size: 64px; margin-bottom: 14px; }
  .kbd-hint { margin-top: 18px; }
  kbd { display: inline-block; min-width: 26px; padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); border-bottom-width: 3px; font: 700 12px var(--mono, monospace); text-align: center; }
  /* L'entree animee ne rejoue que sur la fiche, pas sur la liste */
  #app.view-enter .shell-split > * { animation: none; }
  #app.view-enter .split-main > * { animation: rise-in 520ms cubic-bezier(.2, .8, .2, 1) backwards; }
}
@media (min-width: 1024px) and (max-width: 1099px) {
  body[data-view="home"] .shell, body[data-view="match"] .shell { max-width: 860px; }
}

/* ==========================================================================
   ZONE DE PAIEMENT (HALL30 Pro)
   ========================================================================== */
.paywall-container.pw { max-width: 980px; padding-bottom: 40px; }
.pw .pw-hero { text-align: center; padding: 18px 8px 8px; }
.pw .pw-kicker { display: inline-block; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; color: #F2C14E; background: rgba(242,193,78,.12); border: 1px solid rgba(242,193,78,.45); padding: 7px 16px; border-radius: 999px; }
.pw .pw-title { font-family: var(--font-display, 'Big Shoulders Display'), sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(2.1rem, 6.4vw, 3.6rem); line-height: .95; margin: 18px 0 14px; letter-spacing: .01em; }
.pw .pw-title b { background: linear-gradient(90deg, #18E08B, #33D6F2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pw .pw-sub { max-width: 640px; margin: 0 auto; color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.5; }
.pw .pw-proof { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pw .pw-proof-item { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 14px; background: rgba(24,224,139,.08); border: 1px solid rgba(24,224,139,.3); }
.pw .pw-proof-item b { font-family: var(--font-mono, monospace); font-size: 1.15rem; color: #18E08B; }
.pw .pw-proof-item span { font-size: .8rem; color: rgba(255,255,255,.75); }

.pw .pw-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 26px 0 8px; }
.pw .pw-feature { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.pw .pw-fi { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(24,224,139,.12); }
.pw .pw-feature strong { display: block; font-size: .9rem; }
.pw .pw-feature em { display: block; font-style: normal; font-size: .76rem; color: rgba(255,255,255,.6); margin-top: 3px; line-height: 1.35; }

.pw .pw-step { margin-top: 28px; padding: 22px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.pw .pw-step-title { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; font-weight: 800; margin: 0 0 16px; }
.pw .pw-step-title span { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; background: linear-gradient(135deg, #18E08B, #0FB5A0); color: #04130B; }
.pw .premium-form-section .pw-step-title:not(:first-child) { margin-top: 26px; }

.pw .pw-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.pw .pw-plan { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 16px; border-radius: 20px; cursor: pointer; background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.1); transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; min-height: 0; }
.pw .pw-plan input { position: absolute; opacity: 0; pointer-events: none; }
.pw .pw-plan:hover { transform: translateY(-2px); border-color: rgba(24,224,139,.5); }
.pw .pw-plan.is-selected { border-color: #18E08B; background: linear-gradient(160deg, rgba(24,224,139,.16), rgba(15,181,160,.05)); box-shadow: 0 16px 40px -16px rgba(24,224,139,.55); }
.pw .pw-plan.is-best { border-color: rgba(242,193,78,.6); }
.pw .pw-plan.is-best.is-selected { border-color: #F2C14E; background: linear-gradient(160deg, rgba(242,193,78,.18), rgba(242,193,78,.04)); box-shadow: 0 16px 40px -16px rgba(242,193,78,.55); }
.pw .pw-plan-tag { align-self: flex-start; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.1); }
.pw .pw-plan.is-best .pw-plan-tag { background: #F2C14E; color: #1a1203; }
.pw .pw-plan:nth-child(2) .pw-plan-tag { background: rgba(24,224,139,.2); color: #18E08B; }
.pw .pw-plan-check { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .85rem; border: 2px solid rgba(255,255,255,.25); color: transparent; }
.pw .pw-plan.is-selected .pw-plan-check { background: #18E08B; border-color: #18E08B; color: #04130B; }
.pw .pw-plan.is-best.is-selected .pw-plan-check { background: #F2C14E; border-color: #F2C14E; color: #1a1203; }
.pw .pw-plan-title { font-weight: 800; font-size: 1rem; margin-top: 6px; }
.pw .pw-plan-price { font-family: var(--font-display, 'Big Shoulders Display'), sans-serif; font-weight: 900; font-size: 2.1rem; line-height: 1; }
.pw .pw-plan-price small { font-family: inherit; font-size: .9rem; opacity: .7; }
.pw .pw-plan-day { font-size: .78rem; color: rgba(255,255,255,.7); }
.pw .pw-plan-day b { color: #fff; }
.pw .pw-plan-note { font-size: .74rem; color: #18E08B; font-weight: 700; margin-top: 2px; }
.pw .pw-plan.is-best .pw-plan-note { color: #F2C14E; }
.pw .pw-renew { margin: 14px 0 0; font-size: .8rem; color: rgba(255,255,255,.6); text-align: center; }
.pw .pw-renew b { color: rgba(255,255,255,.9); }

.pw .plan-chosen { margin: -6px 0 16px; font-size: .88rem; color: rgba(255,255,255,.7); }
.pw .pw-fields { display: grid; gap: 14px; }
.pw .pw-field { display: block; }
.pw .pw-label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: 7px; }
.pw .pw-label em { font-style: normal; font-weight: 500; color: rgba(255,255,255,.55); margin-left: 4px; }
.pw .pw-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 56px; border-radius: 16px; background: rgba(0,0,0,.28); border: 2px solid rgba(255,255,255,.12); transition: border-color .15s, box-shadow .15s; }
.pw .pw-input:focus-within { border-color: #18E08B; box-shadow: 0 0 0 4px rgba(24,224,139,.15); }
.pw .pw-input i { font-style: normal; font-size: 18px; }
.pw .pw-input input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; color: #fff; font-size: 1.05rem; font-family: inherit; }
.pw .pw-input input::placeholder { color: rgba(255,255,255,.35); }

.pw .pw-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.pw .pw-method { position: relative; cursor: pointer; margin: 0; }
.pw .pw-method input { position: absolute; opacity: 0; pointer-events: none; }
.pw .pw-method .pm-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px 10px; border-radius: 18px; background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.1); height: 100%; transition: border-color .15s, background .15s; }
.pw .pw-method input:checked + .pm-content { border-color: #18E08B; background: rgba(24,224,139,.1); box-shadow: 0 10px 30px -14px rgba(24,224,139,.6); }
.pw .pw-method:hover .pm-content { border-color: rgba(24,224,139,.5); }
.pw .pw-mi { width: 42px; height: 42px; border-radius: 12px; }
.pw .pw-method strong { display: block; font-size: .92rem; }
.pw .pw-method em { display: block; font-style: normal; font-size: .72rem; color: rgba(255,255,255,.55); margin-top: 2px; }

.pw .pw-pay { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, rgba(24,224,139,.12), rgba(51,214,242,.08)); border: 1px solid rgba(24,224,139,.35); }
.pw .pw-total { display: flex; flex-direction: column; min-width: 150px; }
.pw .pw-total span { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.6); }
.pw .pw-total strong { font-family: var(--font-display, 'Big Shoulders Display'), sans-serif; font-size: 2rem; font-weight: 900; line-height: 1.05; }
.pw .pw-total em { font-style: normal; font-size: .78rem; color: rgba(255,255,255,.7); }
.pw .pw-cta { flex: 1; height: 64px; border-radius: 18px; border: 0; cursor: pointer; font-size: 1.15rem; font-weight: 900; color: #04130B; background: linear-gradient(135deg, #18E08B, #0FB5A0); box-shadow: 0 6px 0 #0a7d5c, 0 18px 40px -12px rgba(24,224,139,.7); margin: 0; text-transform: none; letter-spacing: 0; position: relative; overflow: hidden; }
.pw .pw-cta::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: pw-shine 3.2s ease-in-out infinite; }
@keyframes pw-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.pw .pw-cta:active { transform: translateY(4px); box-shadow: 0 2px 0 #0a7d5c, 0 10px 24px -10px rgba(24,224,139,.6); }
.pw .pw-cta:disabled { opacity: .7; cursor: wait; }
.pw .pw-trust { list-style: none; padding: 0; margin: 14px 0 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: .8rem; color: rgba(255,255,255,.72); }

@media (max-width: 560px) {
  .pw .pw-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0 6px; }
  .pw .pw-feature { padding: 10px; gap: 8px; align-items: center; }
  .pw .pw-feature em { display: none; }
  .pw .pw-feature strong { font-size: .82rem; line-height: 1.2; }
  .pw .pw-step { padding: 16px; }
  .pw .pw-plan-price { font-size: 1.75rem; }
  .pw .pw-methods { grid-template-columns: 1fr; }
  .pw .pw-method .pm-content { flex-direction: row; text-align: left; padding: 12px 14px; }
  .pw .pw-pay { flex-direction: column; align-items: stretch; }
  .pw .pw-total { flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
}
@media (min-width: 900px) {
  .pw .pw-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pw .pw-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .pw .pw-cta::after { animation: none; } }

/* Paiement : pays + numero dans le meme champ */
.pw .pw-phone { padding: 0 16px 0 6px; }
.pw .pw-phone select { flex: 0 0 auto; max-width: 46%; height: 42px; padding: 0 28px 0 10px; border-radius: 12px; border: 0; background: rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 10px center; color: #fff; font-family: inherit; font-weight: 700; font-size: .95rem; appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
.pw .pw-phone select:focus { outline: 2px solid #18E08B; }
.pw .pw-phone select option { color: #111; }
.pw .pw-fields, .pw .pw-field { min-width: 0; }
.pw .pw-phone { width: 100%; box-sizing: border-box; min-width: 0; }
.pw .pw-phone select { width: 150px; max-width: 42%; flex: 0 0 auto; white-space: nowrap; overflow: hidden; }
.pw .pw-phone input { width: 0; }
.paywall-fullscreen { overflow-x: hidden; }
.pw .pw-phone select { width: 98px; padding-right: 22px; text-overflow: clip; }

/* Paiement : choix de l'operateur Mobile Money */
.pw .pw-operators { margin: 14px 0 0; padding: 14px; border-radius: 18px; background: rgba(24,224,139,.06); border: 1px solid rgba(24,224,139,.25); }
.pw .pw-op-title { margin: 0 0 10px; font-weight: 800; font-size: .9rem; }
.pw .pw-op-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pw .pw-op { cursor: pointer; margin: 0; }
.pw .pw-op input { position: absolute; opacity: 0; pointer-events: none; }
.pw .pw-op span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 2px solid rgba(255,255,255,.14); background: rgba(0,0,0,.25); font-weight: 700; font-size: .92rem; transition: border-color .15s, background .15s; }
.pw .pw-op span i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.pw .pw-op input:checked + span { border-color: #18E08B; background: rgba(24,224,139,.14); }
.pw .pw-op input:focus-visible + span { outline: 2px solid #18E08B; outline-offset: 2px; }
.pw .pw-op-hint { margin: 10px 0 0; font-size: .82rem; color: rgba(255,255,255,.7); line-height: 1.4; }

/* Ecran "valide sur ton telephone" */
.pay-pending { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,8,14,.82); backdrop-filter: blur(6px); }
.pay-pending .pp-card { width: 100%; max-width: 420px; text-align: center; padding: 26px 22px 18px; border-radius: 26px; background: linear-gradient(180deg, #132230, #0d1620); border: 1px solid rgba(24,224,139,.35); color: #fff; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); }
.pay-pending .pp-ico { font-size: 46px; animation: pp-bounce 1.6s ease-in-out infinite; }
.pay-pending h2 { margin: 8px 0 8px; font-size: 1.3rem; line-height: 1.2; }
.pay-pending .pp-sub { margin: 0 0 10px; color: rgba(255,255,255,.85); line-height: 1.45; }
.pay-pending .pp-help { margin: 0 0 14px; font-size: .82rem; color: rgba(255,255,255,.6); line-height: 1.4; }
.pay-pending .pp-status { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 14px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.05); font-weight: 600; font-size: .9rem; }
.pay-pending .pp-spin { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; border: 3px solid rgba(24,224,139,.25); border-top-color: #18E08B; animation: pp-rot .8s linear infinite; }
.pay-pending .pp-btn { width: 100%; height: 54px; border: 0; border-radius: 16px; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 1.02rem; color: #04130B; background: linear-gradient(135deg, #18E08B, #0FB5A0); box-shadow: 0 5px 0 #0a7d5c; }
.pay-pending .pp-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #0a7d5c; }
.pay-pending .pp-link { margin-top: 10px; background: none; border: 0; color: rgba(255,255,255,.65); font-family: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: underline; }
.pay-pending .pp-foot { margin: 12px 0 0; font-size: .74rem; color: rgba(255,255,255,.45); }
@keyframes pp-rot { to { transform: rotate(360deg); } }
@keyframes pp-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Moyens de paiement selon le pays */
.pw .pw-method .pm-content { position: relative; }
.pw .pw-mbadge { position: absolute; top: -9px; right: 10px; padding: 2px 9px; border-radius: 999px; background: #18E08B; color: #04130B; font-size: .66rem; font-weight: 900; letter-spacing: .02em; }
.pw .pw-op-warn { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(242,193,78,.1); border: 1px solid rgba(242,193,78,.35); color: #f6dfa6; font-size: .82rem; line-height: 1.45; }
.pw .pw-operators .pw-op-hint:first-child { margin-top: 0; }
@media (min-width: 561px) { .pw .pw-methods { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.pw .pw-methods { padding-top: 8px; }

/* Resultats du jour : resume compact, detail repliable */
.day-results .dr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.day-results .dr-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.day-results .dr-chip b { font-weight: 700; }
.day-results .dr-chip .mono { color: var(--pitch, #18E08B); font-weight: 800; }
.day-results .dr-toggle { margin: 8px 0 2px; padding: 6px 0; background: none; border: 0; color: var(--gold, #F2C14E); font-family: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
.day-results .dr-toggle:hover { text-decoration: underline; }

/* Blocs ranges : contenu complet, replie par defaut */
.tidy-more { margin-top: 12px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.tidy-more > summary { list-style: none; cursor: pointer; color: var(--gold, #F2C14E); font-weight: 700; font-size: .9rem; padding: 4px 0; }
.tidy-more > summary::-webkit-details-marker { display: none; }
.tidy-more > summary span { display: inline-block; transition: transform .2s; }
.tidy-more[open] > summary span { transform: rotate(180deg); }
.tidy-more[open] > summary { margin-bottom: 6px; }

/* Partenaires rangés : nom et bonus sur une ligne, code et boutons en dessous */
.partners-card .partner-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 10px; }
.partners-card .partner-info strong { font-size: 15px; }
.partners-card .partner-tag { font-size: 12px; }
.partners-card .partner-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.partners-card .partner-actions .code-chip { flex: 1 1 auto; justify-content: center; }
.partners-card .partner-actions .partner-btn { flex: 0 0 auto; }
.auth-remember { margin: 2px 0 0; text-align: center; font-size: .82rem; color: var(--ink-soft, rgba(255,255,255,.65)); }
.reco-warn { margin: 6px 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(242,193,78,.1); border: 1px solid rgba(242,193,78,.35); color: #f6dfa6; font-size: .85rem; line-height: 1.45; }

/* ===== Mise a niveau "outil pro" ===== */
/* Notes du Filtre Pro */
.grade { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; font: 900 .78rem var(--font-mono, monospace); vertical-align: middle; letter-spacing: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.grade-A { background: linear-gradient(180deg, #4ef0b0, #18b97c); color: #03140c; }
.grade-B { background: linear-gradient(180deg, #7fd8ff, #2f9fd8); color: #031220; }
.grade-C { background: linear-gradient(180deg, #ffe08a, #d9a23a); color: #1a1204; }
.stake-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); white-space: nowrap; }
.tool-meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }

/* Carte Filtre Pro */
.filter-card { position: relative; overflow: hidden; background:
  radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
  radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--safe) 16%, transparent), transparent 60%), var(--surface); }
.filter-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-tag { font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding: 5px 12px; border-radius: 999px; font-size: .85rem; }
.filter-live { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--ink-soft); }
.filter-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 0 0 var(--safe); animation: filter-pulse 1.8s infinite; }
@keyframes filter-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--safe) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.filter-funnel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 14px 0 10px; text-align: center; }
.filter-funnel strong { display: block; font-size: 2rem; line-height: 1; }
.filter-funnel span { font-size: .78rem; color: var(--ink-soft); }
.filter-funnel .is-kept strong { color: var(--safe); }
.filter-arrow { font-size: 1.4rem; color: var(--ink-soft); }
.filter-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.filter-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--safe)); box-shadow: 0 0 14px color-mix(in srgb, var(--safe) 60%, transparent); }
.filter-grades { display: flex; gap: 14px; align-items: center; margin: 10px 0 0; font-size: .9rem; }
.filter-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.filter-reasons li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: .84rem; }
.filter-reasons b { color: var(--risky, #e5484d); }
.filter-foot { margin-top: 10px; font-size: .78rem; }

/* Plan de mise */
.stake-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.stake-grid > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--line); text-align: center; }
.stake-grid strong { font-size: 1.35rem; font-family: var(--font-mono, monospace); }
.stake-grid span { font-size: .72rem; color: var(--ink-soft); line-height: 1.25; }
.stake-rules { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 4px; font-size: .86rem; }

/* Boutons : niveau superieur */
.btn-primary, .btn-3d, .vitrine-cta, .lock-cta, .tool-upsell, .pro-gold-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-primary:focus-visible, .btn-3d:focus-visible, .vitrine-cta:focus-visible, .tool-upsell:focus-visible, .pro-gold-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, white); outline-offset: 3px; }
/* Halo anime autour des boutons qui comptent */
.vitrine-cta, .pro-gold-btn, .tool-upsell { overflow: visible; }
.vitrine-cta::after, .pro-gold-btn::after, .tool-upsell::after {
  content: ''; position: absolute; inset: -3px; z-index: -2; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--halo-a, 0deg), transparent 0 70%, color-mix(in srgb, var(--accent) 90%, white) 80%, transparent 90%);
  filter: blur(6px); opacity: .85; animation: halo-spin 3.6s linear infinite;
}
@property --halo-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes halo-spin { to { --halo-a: 360deg; } }
.vitrine-cta::before, .pro-gold-btn::before, .tool-upsell::before { border-radius: inherit; overflow: hidden; }
/* Fleche qui avance au survol sur les appels a l'action */
.vitrine-cta::marker { content: none; }
.vitrine-cta, .tool-upsell { padding-right: 22px; }
.vitrine-cta > *:last-child, .tool-upsell > *:last-child { transition: transform .2s ease; }
.vitrine-cta:hover > *:last-child, .tool-upsell:hover > *:last-child { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .vitrine-cta::after, .pro-gold-btn::after, .tool-upsell::after, .btn-primary::before, .btn-3d::before, .filter-live i { animation: none; }
}
@media (max-width: 420px) { .stake-grid strong { font-size: 1.1rem; } .filter-funnel strong { font-size: 1.6rem; } }
.stake-grid .grade { font-size: .78rem; line-height: 1; }
.stake-grid .grade-A { color: #03140c; } .stake-grid .grade-B { color: #031220; } .stake-grid .grade-C { color: #1a1204; }

/* =====================================================================
   FICHE MATCH « PRO » : cartes verre lumineux, duels animes, jauges
   Les remplissages ne s'animent que sous #app.view-enter (fx.js) : #app est
   reecrit a chaque rendu, une animation permanente clignoterait.
   ===================================================================== */
:root { --vi: #8B5CF6; --glow-cy: color-mix(in srgb, var(--accent) 55%, transparent); --glow-gr: color-mix(in srgb, var(--safe) 55%, transparent); --glow-gold: color-mix(in srgb, var(--gold) 55%, transparent); }
.tone-cy { --t: var(--accent); --t2: color-mix(in srgb, var(--accent) 55%, #3b6bff); }
.tone-gr { --t: var(--safe); --t2: color-mix(in srgb, var(--safe) 60%, #12b8a6); }
.tone-gold { --t: var(--gold); --t2: color-mix(in srgb, var(--gold) 70%, #e0792a); }
.tone-vi { --t: #a78bfa; --t2: #6d4bf0; }

/* Carte : verre, bord degrade, halo d'angle */
.pro-card { position: relative; overflow: hidden; isolation: isolate; padding: 18px 16px 16px; border-radius: 22px; border: 0;
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--vi) 11%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--accent)), var(--surface));
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.65), inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent); }
.pro-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 65%, transparent), color-mix(in srgb, var(--ink) 6%, transparent) 38%, color-mix(in srgb, var(--vi) 50%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.pro-card > * { position: relative; z-index: 1; }
@media (hover: hover) { .pro-card { transition: transform .25s ease, box-shadow .25s ease; } .pro-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -22px rgba(0,0,0,.7), 0 0 40px -12px var(--glow-cy), inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent); } }

/* En-tete de section */
.sec-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.sec-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; position: relative;
  background: linear-gradient(145deg, color-mix(in srgb, var(--t) 38%, transparent), color-mix(in srgb, var(--t2) 22%, transparent));
  border: 1px solid color-mix(in srgb, var(--t) 50%, transparent);
  box-shadow: 0 8px 22px -8px var(--t), inset 0 1px 0 rgba(255,255,255,.28); }
.sec-head h3 { margin: 0; font-family: var(--font-display, inherit); font-size: 1.12rem; font-weight: 800; letter-spacing: .01em; line-height: 1.15; }
.sec-head p { margin: 3px 0 0; font-size: .8rem; line-height: 1.35; color: var(--ink-soft); }

/* Bandeau equipes */
.duel-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 2px 0 10px; }
.dh-team { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; }
.dh-team:last-child { justify-content: flex-end; flex-direction: row-reverse; }
.dh-logo { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.dh-vs { font: 800 .68rem var(--font-mono, monospace); letter-spacing: .12em; color: var(--ink-soft); padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); }

/* Duel : deux barres qui partent du centre */
.duel { display: grid; grid-template-columns: 54px 1fr 54px; align-items: center; gap: 8px; padding: 9px 0; }
.duel + .duel { border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.duel-v { font-size: 1.12rem; font-weight: 800; color: var(--ink-soft); transition: color .2s, text-shadow .2s; }
.duel-h { text-align: left; } .duel-a { text-align: right; }
.duel.lead-h .duel-h { color: var(--accent); text-shadow: 0 0 16px var(--glow-cy); }
.duel.lead-a .duel-a { color: var(--vi); text-shadow: 0 0 16px color-mix(in srgb, var(--vi) 55%, transparent); }
.duel-mid { min-width: 0; }
.duel-label { display: block; text-align: center; font-size: .76rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); margin-bottom: 6px; }
.duel-bars { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 11px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.duel-bars::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--surface); z-index: 2; }
.duel-bar { display: block; height: 100%; width: var(--w); min-width: 3px; }
.duel-bh { justify-self: end; border-radius: 999px 0 0 999px; background: linear-gradient(270deg, var(--accent), color-mix(in srgb, var(--accent) 35%, #1b3b6a)); }
.duel-ba { justify-self: start; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, var(--vi), color-mix(in srgb, var(--vi) 35%, #2a1b6a)); }
.duel:not(.lead-h) .duel-bh, .duel:not(.lead-a) .duel-ba { opacity: .55; }
.duel.lead-h .duel-bh { box-shadow: 0 0 18px var(--glow-cy); }
.duel.lead-a .duel-ba { box-shadow: 0 0 18px color-mix(in srgb, var(--vi) 55%, transparent); }
.duel.is-na { opacity: .5; }

/* Bilan V-N-D */
.wdl-wrap { display: grid; gap: 12px; margin-top: 12px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.wdl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .84rem; margin-bottom: 6px; }
.wdl-top .mono b { font-weight: 800; margin-left: 6px; }
.c-w { color: var(--safe); } .c-d { color: var(--ink-soft); } .c-l { color: #ff6b70; }
.wdl-bar { display: flex; gap: 3px; height: 12px; }
.wdl-bar i { display: block; width: var(--w); min-width: 0; border-radius: 6px; }
.wdl-w { background: linear-gradient(180deg, #4ef0b0, #18b97c); box-shadow: 0 0 12px color-mix(in srgb, var(--safe) 50%, transparent); }
.wdl-d { background: linear-gradient(180deg, #a9b6c4, #6e7d8c); }
.wdl-l { background: linear-gradient(180deg, #ff8a8e, #e5484d); }

/* Series : grosses tuiles + barres thermiques */
.bigstats { display: grid; gap: 8px; margin: 4px 0 6px; }
.bs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bigstat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 10px; border-radius: 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--t) 18%, transparent), color-mix(in srgb, var(--ink) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--t) 32%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.bigstat b { font-size: 1.9rem; line-height: 1; color: var(--t); text-shadow: 0 0 20px color-mix(in srgb, var(--t) 60%, transparent); }
.bigstat span { font-size: .7rem; color: var(--ink-soft); text-align: center; }
.series-subtitle { margin: 18px 0 6px; display: flex; align-items: center; gap: 8px; font-size: .74rem; letter-spacing: .1em; }
.series-subtitle::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 18%, transparent), transparent); }
.series-row { padding: 6px 0; row-gap: 6px; }
.series-label { font-size: .84rem; }
.series-fraction { font-weight: 800; font-size: .9rem; color: var(--ink); }
.series-track { height: 10px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.series-fill { width: var(--w); border-radius: 999px; background: linear-gradient(90deg, #8da2b8, #5b6b7c); }
.heat-warm .series-fill { background: linear-gradient(90deg, #ffe08a, #e0a73a); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 45%, transparent); }
.heat-hot .series-fill { background: linear-gradient(90deg, #4ef0b0, #18b97c); box-shadow: 0 0 14px color-mix(in srgb, var(--safe) 55%, transparent); }
.heat-hot .series-fraction { color: var(--safe); }

/* Minutes des buts : colonnes lumineuses */
.gm-team { margin-top: 14px; }
.gm-team > strong { font-size: .9rem; }
.gm-grid { gap: 8px; margin-top: 8px; }
.gm-bars { height: 84px; padding: 0 3px; border-radius: 12px; gap: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, transparent), color-mix(in srgb, var(--ink) 9%, transparent)); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.gm-bars i { width: 38%; border-radius: 7px 7px 2px 2px; }
.gm-bars .gm-for { background: linear-gradient(180deg, #5cf5b8, #18b97c); box-shadow: 0 0 12px color-mix(in srgb, var(--safe) 55%, transparent); }
.gm-bars .gm-against { background: linear-gradient(180deg, #ff8a8e, #e5484d); box-shadow: 0 0 12px rgba(229,72,77,.4); }
.gm-num { font-weight: 700; } .gm-label { font-size: .64rem; }

/* Buteurs : cartes joueur */
.scorers-grid { gap: 14px; }
.scorer-card { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 11px 12px; margin-top: 8px; border-radius: 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ink) 7%, transparent), color-mix(in srgb, var(--ink) 3%, transparent)); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.scorer-card.is-top { border-color: color-mix(in srgb, var(--gold) 55%, transparent); box-shadow: 0 0 26px -10px var(--glow-gold), inset 0 1px 0 rgba(255,255,255,.14);
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 16%, transparent), color-mix(in srgb, var(--ink) 3%, transparent)); }
.sc-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 .9rem var(--font-mono, monospace); color: #fff;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 80%, #fff), color-mix(in srgb, var(--accent) 30%, #0b2a50)); box-shadow: 0 6px 16px -6px var(--glow-cy), inset 0 1px 0 rgba(255,255,255,.4); }
.side-a .sc-avatar { background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--vi) 80%, #fff), color-mix(in srgb, var(--vi) 30%, #1d0f55)); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--vi) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.4); }
.is-top .sc-avatar { background: radial-gradient(circle at 30% 25%, #ffe9a8, #c98e14); color: #1a1204; box-shadow: 0 6px 18px -4px var(--glow-gold), inset 0 1px 0 rgba(255,255,255,.6); }
.sc-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-body strong { font-size: .94rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-meta { font-size: .72rem; color: var(--ink-soft); }
.sc-track { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; margin-top: 4px; }
.sc-track i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--safe)); }
.is-top .sc-track i { background: linear-gradient(90deg, #ffe08a, #e0a73a); }
.sc-prob { font-size: 1.45rem; font-weight: 800; color: var(--accent); text-shadow: 0 0 18px var(--glow-cy); }
.sc-prob small { font-size: .7em; opacity: .75; }
.is-top .sc-prob { color: var(--gold); text-shadow: 0 0 18px var(--glow-gold); }

/* Jauges des tendances */
.trend-grid { gap: 10px; }
.trend-card { border-radius: 18px; padding: 12px 8px 10px; background: linear-gradient(165deg, color-mix(in srgb, var(--ink) 7%, transparent), color-mix(in srgb, var(--ink) 3%, transparent)); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.trend-card-title { font-size: .82rem; font-weight: 700; text-align: center; margin: 0 0 8px; color: var(--ink-soft); }
.trend-ring { overflow: visible; }
.ring-bg { stroke: color-mix(in srgb, var(--ink) 11%, transparent); }
.ring-hot .ring-fg { filter: drop-shadow(0 0 5px var(--glow-gr)); }
.ring-warm .ring-fg { filter: drop-shadow(0 0 5px var(--glow-gold)); }
.trend-ring-label { fill: var(--ink); font: 800 14px var(--font-mono, monospace); }
.trend-ring-team { font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-soft); }
.avg-stat-val { font-size: 1.7rem; font-weight: 800; color: var(--ink-soft); }
.avg-stat-card.lead-h .av-h .avg-stat-val { color: var(--accent); text-shadow: 0 0 18px var(--glow-cy); }
.avg-stat-card.lead-a .av-a .avg-stat-val { color: var(--vi); text-shadow: 0 0 18px color-mix(in srgb, var(--vi) 55%, transparent); }

/* Forme : tuiles en relief + mini cartes de score */
.form-col h4 { display: flex; align-items: center; gap: 8px; font-size: .95rem; margin: 0 0 10px; }
.form-crest { display: inline-flex; } .form-logo { width: 24px; height: 24px; object-fit: contain; }
.form-chips { display: flex; gap: 7px; margin-bottom: 12px; }
.form-chip { flex: 1; max-width: 46px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 13px; font: 900 1rem var(--font-mono, monospace); color: #06121c; border: 0;
  box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 10px 18px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.55); }
.form-chip.tone-safe { background: linear-gradient(180deg, #5cf5b8, #18b97c); }
.form-chip.tone-neutral { background: linear-gradient(180deg, #c4cfdb, #8696a7); }
.form-chip.tone-risky { background: linear-gradient(180deg, #ff9a9d, #e5484d); color: #2a0608; }
.form-chip.is-last { outline: 2px solid color-mix(in srgb, var(--ink) 70%, transparent); outline-offset: 2px; }
.form-detail { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.form-detail li { display: grid; grid-template-columns: 6px 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px 10px 8px 0; border-radius: 12px; font-size: .78rem; background: color-mix(in srgb, var(--ink) 5%, transparent); overflow: hidden; }
.form-detail li i { align-self: stretch; border-radius: 0 4px 4px 0; background: #8696a7; }
.form-detail li.fd-V i { background: var(--safe); box-shadow: 0 0 10px var(--glow-gr); } .form-detail li.fd-D i { background: #e5484d; }
.fd-teams { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fd-away { text-align: right; }
.fd-score { padding: 3px 9px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 11%, transparent); font-size: .82rem; }

/* Chiffres cles */
.kf-list li { border-radius: 16px; border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--ink) 6%, transparent), color-mix(in srgb, var(--ink) 2%, transparent)); }
.kf-list li.is-strong { border-color: color-mix(in srgb, var(--safe) 50%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--safe) 15%, transparent), color-mix(in srgb, var(--ink) 3%, transparent)); box-shadow: 0 0 24px -12px var(--glow-gr); }
.kf-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--ink) 9%, transparent); font-size: 19px; }
.kf-list li.is-strong .kf-icon { background: color-mix(in srgb, var(--safe) 24%, transparent); box-shadow: 0 0 16px -4px var(--glow-gr); }
.kf-tag { box-shadow: 0 6px 16px -6px var(--glow-gr); }

/* Astuce, verrou xG, attente du match */
.stat-tip { position: relative; margin-top: 14px; padding: 12px 14px 12px 16px; border-radius: 14px; border: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 13%, transparent), color-mix(in srgb, var(--gold) 4%, transparent)); box-shadow: inset 3px 0 0 var(--gold); }
.xg-locked { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; cursor: pointer; text-align: left; color: var(--ink); font-family: inherit;
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 18%, transparent), color-mix(in srgb, var(--vi) 10%, transparent)); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); box-shadow: 0 10px 26px -14px var(--glow-gold); }
.xg-locked span { font-size: 1.4rem; } .xg-locked strong { display: block; font-size: .9rem; } .xg-locked em { display: block; font-style: normal; font-size: .72rem; color: var(--ink-soft); margin-top: 2px; }
.xg-locked b { padding: 5px 12px; border-radius: 999px; font-size: .78rem; color: #1a1204; background: linear-gradient(180deg, #ffe08a, #e0a73a); }
.soon { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; padding: 10px; border-radius: 12px; font-size: .84rem; font-weight: 600; color: var(--ink-soft); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.soon-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--glow-cy); animation: soon-pulse 1.8s infinite; }
@keyframes soon-pulse { to { box-shadow: 0 0 0 12px transparent; } }

/* En-tete du match : aura lumineuse, VS en relief */
.hero { position: relative; overflow: hidden; }
.hero-aura { position: absolute; inset: -30% -10% auto; height: 120%; pointer-events: none; z-index: 0;
  background: radial-gradient(40% 40% at 22% 40%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%), radial-gradient(40% 40% at 78% 40%, color-mix(in srgb, var(--vi) 38%, transparent), transparent 70%); filter: blur(8px); animation: aura-breathe 6s ease-in-out infinite; }
@keyframes aura-breathe { 50% { opacity: .65; transform: scale(1.06); } }
.hero > *:not(.hero-aura) { position: relative; z-index: 1; }
.hero-vs { display: inline-flex; padding: 6px 14px; border-radius: 999px; font: 900 1rem var(--font-mono, monospace); letter-spacing: .16em; background: linear-gradient(160deg, color-mix(in srgb, var(--ink) 18%, transparent), color-mix(in srgb, var(--ink) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); box-shadow: 0 8px 20px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.3); }
.hero-team .crest { box-shadow: 0 14px 30px -8px rgba(0,0,0,.6), 0 0 0 4px rgba(255,255,255,.12), 0 0 30px -4px var(--glow-cy); }

/* Entrees : les remplissages se dessinent (seulement quand l'ecran change) */
@keyframes bar-grow { from { width: 0; } }
@keyframes ring-draw { from { stroke-dashoffset: var(--c); } }
@keyframes tile-pop { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes row-slide { from { opacity: 0; transform: translateX(-14px); } }
#app.view-enter .duel-bar, #app.view-enter .series-fill, #app.view-enter .wdl-bar i, #app.view-enter .sc-track i { animation: bar-grow .9s cubic-bezier(.2,.8,.2,1) backwards; }
#app.view-enter .ring-fg { animation: ring-draw 1.1s cubic-bezier(.2,.8,.2,1) backwards; }
#app.view-enter .form-chip, #app.view-enter .bigstat { animation: tile-pop .5s cubic-bezier(.2,.9,.3,1.2) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
#app.view-enter .gm-bars i { transform-origin: bottom; animation: bar-rise .8s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes bar-rise { from { transform: scaleY(0); } }
#app.view-enter .scorer-card, #app.view-enter .kf-list li, #app.view-enter .form-detail li { animation: row-slide .5s ease backwards; }
#app.view-enter .scorer-card:nth-of-type(2), #app.view-enter .kf-list li:nth-child(2), #app.view-enter .form-detail li:nth-child(2) { animation-delay: .06s; }
#app.view-enter .scorer-card:nth-of-type(3), #app.view-enter .kf-list li:nth-child(3), #app.view-enter .form-detail li:nth-child(3) { animation-delay: .12s; }
#app.view-enter .scorer-card:nth-of-type(n+4), #app.view-enter .kf-list li:nth-child(n+4), #app.view-enter .form-detail li:nth-child(n+4) { animation-delay: .18s; }
#app.view-enter .duel:nth-of-type(2) .duel-bar { animation-delay: .08s; } #app.view-enter .duel:nth-of-type(3) .duel-bar { animation-delay: .16s; }
#app.view-enter .duel:nth-of-type(4) .duel-bar { animation-delay: .24s; } #app.view-enter .duel:nth-of-type(n+5) .duel-bar { animation-delay: .32s; }
#app.view-enter .bs-pair:nth-child(2) .bigstat { --i: 2; } #app.view-enter .bs-pair:nth-child(3) .bigstat { --i: 4; }
@media (prefers-reduced-motion: reduce) { .hero-aura, .soon-dot { animation: none; } #app.view-enter * { animation-duration: .01ms !important; animation-delay: 0s !important; } }
@media (max-width: 380px) { .duel { grid-template-columns: 44px 1fr 44px; gap: 6px; } .duel-v { font-size: 1rem; } .scorers-grid { grid-template-columns: 1fr; } }

/* Corrections apres essai sur telephone */
.form-chip { flex: 0 0 auto; width: 44px; height: 44px; max-width: none; }
.form-chips { flex-wrap: nowrap; }
.dh-team:last-child { justify-content: flex-start; }
.trend-card-rings { gap: 6px; justify-content: space-around; width: 100%; }
.trend-card { min-width: 0; }
.trend-ring { width: 62px; height: 62px; }
.trend-ring-label { font-size: 13px; }
.avg-stat-row { gap: 14px; }
.avg-stat-val { font-size: 1.45rem; }
.stat-tip-link { display: inline; line-height: inherit; vertical-align: baseline; }
.stat-tip { padding-bottom: 12px; }

/* =====================================================================
   MEME TRAITEMENT PARTOUT : cartes en verre, liste des matchs, classement,
   confrontations, compositions, compte
   ===================================================================== */
/* Toutes les cartes : verre, bord degrade (sauf celles qui ont deja leur identite) */
.card:not(.pro-card):not(.golden-combos-card):not(.big-combos-card):not(.tool-card):not(.filter-card):not(.tr-card):not(.partners-card):not(.day-results):not(.exact-today):not(.exact-hits) {
  position: relative; isolation: isolate; border: 0; border-radius: 20px;
  background:
    radial-gradient(110% 70% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--vi) 9%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--accent)), var(--surface));
  box-shadow: 0 16px 36px -22px rgba(0,0,0,.6), inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent);
}
.card:not(.pro-card):not(.golden-combos-card):not(.big-combos-card):not(.tool-card):not(.filter-card):not(.tr-card):not(.partners-card):not(.day-results):not(.exact-today):not(.exact-hits)::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none; z-index: 0;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 50%, transparent), color-mix(in srgb, var(--ink) 5%, transparent) 40%, color-mix(in srgb, var(--vi) 40%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.card > * { position: relative; z-index: 1; }
/* Titres de carte : barre d'accent lumineuse */
.card-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display, inherit); font-size: 1.08rem; font-weight: 800; letter-spacing: .01em; }
.card-title::before { content: ''; flex: 0 0 auto; width: 5px; height: 1.15em; border-radius: 4px; background: linear-gradient(180deg, var(--accent), var(--vi)); box-shadow: 0 0 14px var(--glow-cy); }
.sec-head h3.card-title::before, .tool-card .card-title::before, .golden-combos-card .card-title::before { display: none; }

/* Liste des matchs */
.fs-group { border: 0; border-radius: 22px; position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--accent)), var(--surface)); box-shadow: 0 18px 40px -24px rgba(0,0,0,.65), inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
.fs-group::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none; z-index: 3; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--ink) 5%, transparent) 40%, color-mix(in srgb, var(--vi) 35%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.fs-head { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, var(--surface-2)), var(--surface-2) 70%); border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); padding: 12px 14px; }
.fs-comp strong { font-family: var(--font-display, inherit); font-size: .95rem; letter-spacing: .02em; }
.fs-count { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--vi) 18%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--ink); }
.fs-row { position: relative; transition: background .15s, transform .15s; border-top: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); }
.fs-row::before { content: ''; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px; border-radius: 0 4px 4px 0; background: transparent; transition: background .2s, box-shadow .2s; }
@media (hover: hover) { .fs-row:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); } .fs-row:hover::before { background: var(--accent); box-shadow: 0 0 12px var(--glow-cy); } }
.fs-row.is-live::before { background: #ff5a5f; box-shadow: 0 0 14px rgba(255,90,95,.8); animation: live-bar 1.6s ease-in-out infinite; }
@keyframes live-bar { 50% { opacity: .45; } }
.fs-row.is-selected { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent); }
.fs-row.is-selected::before { background: var(--accent); box-shadow: 0 0 12px var(--glow-cy); }
.fs-time > span { display: inline-flex; justify-content: center; min-width: 48px; padding: 4px 6px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.fs-time .fs-live { color: #fff; background: linear-gradient(180deg, #ff6b70, #e5484d); box-shadow: 0 0 14px rgba(255,90,95,.55); animation: live-glow 1.6s ease-in-out infinite; }
@keyframes live-glow { 50% { box-shadow: 0 0 4px rgba(255,90,95,.2); } }
.fs-logo { filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.fs-score b { display: inline-flex; justify-content: center; min-width: 26px; padding: 2px 6px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.fs-score.is-live b { background: color-mix(in srgb, #ff5a5f 22%, transparent); color: #ff9a9d; }

/* Confrontations directes */
.h2h-vs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 4px 0 10px; text-align: center; }
.h2h-side { display: flex; flex-direction: column; gap: 2px; padding: 12px 6px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.h2h-side b { font-size: 1.6rem; line-height: 1; } .h2h-side span { font-size: .72rem; letter-spacing: .1em; color: var(--ink-soft); font-weight: 700; }
.h2h-side.h b { color: var(--accent); text-shadow: 0 0 18px var(--glow-cy); } .h2h-side.a b { color: var(--vi); text-shadow: 0 0 18px color-mix(in srgb, var(--vi) 55%, transparent); } .h2h-side.d b { color: var(--ink-soft); }
.h2h-meter { display: flex; gap: 3px; height: 12px; margin-bottom: 14px; }
.h2h-meter i { display: block; width: var(--w); min-width: 4px; border-radius: 6px; }
.h2h-meter .m-h { background: linear-gradient(180deg, #5ee3ff, #1f9fd6); box-shadow: 0 0 14px var(--glow-cy); } .h2h-meter .m-d { background: linear-gradient(180deg, #b6c2cf, #77879a); } .h2h-meter .m-a { background: linear-gradient(180deg, #b39dff, #6d4bf0); box-shadow: 0 0 14px color-mix(in srgb, var(--vi) 55%, transparent); }
.h2h-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.h2h-list li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: .86rem; }
.h2h-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); } .h2h-away { text-align: right; } .h2h-t.is-win { color: var(--ink); font-weight: 800; }
.h2h-sc { padding: 5px 12px; border-radius: 10px; font-size: 1rem; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--vi) 16%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }

/* Classement */
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rank-row { position: relative; display: grid; grid-template-columns: 34px 1fr auto 62px; align-items: center; gap: 10px; padding: 10px 12px 12px; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: .88rem; }
.rank-pos { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--ink) 10%, transparent); font-weight: 800; }
.rank-row.zone-top .rank-pos { background: linear-gradient(180deg, #5cf5b8, #18b97c); color: #03140c; box-shadow: 0 0 14px color-mix(in srgb, var(--safe) 50%, transparent); }
.rank-row.zone-low .rank-pos { background: linear-gradient(180deg, #ff9a9d, #e5484d); color: #2a0608; }
.rank-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.rank-played { font-size: .74rem; color: var(--ink-soft); }
.rank-pts { text-align: right; font-weight: 800; font-size: 1.05rem; } .rank-pts small { font-size: .6rem; margin-left: 2px; color: var(--ink-soft); }
.rank-bar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.rank-bar::after { content: ''; display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--safe)); }
.rank-row.is-hl { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 22px -8px var(--glow-cy); }
.rank-row.hl-a { background: linear-gradient(90deg, color-mix(in srgb, var(--vi) 24%, transparent), color-mix(in srgb, var(--vi) 6%, transparent)); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--vi) 60%, transparent), 0 0 22px -8px color-mix(in srgb, var(--vi) 55%, transparent); }
.rank-row.is-hl .rank-name { font-weight: 800; }

/* Compositions : terrain et joueurs */
.pitch-pro { border-radius: 20px; overflow: hidden; padding: 14px 8px; background:
  repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 38px, transparent 38px 76px),
  linear-gradient(180deg, #0f5a3a, #0b4a30 50%, #0f5a3a); box-shadow: inset 0 0 60px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.12); border: 0; }
.pitch-pro .pitch-mid-line { background: rgba(255,255,255,.35); height: 2px; }
.pitch-pro .pitch-formation { display: block; text-align: center; margin: 4px 0 10px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,.85); }
.pitch-pro .pitch-row { display: flex; justify-content: space-around; margin: 12px 0; }
.player-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; box-shadow: none; max-width: 70px; }
.player-chip i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font: 800 .8rem var(--font-mono, monospace); font-style: normal; color: #04130B; background: radial-gradient(circle at 30% 25%, #ffffff, #8fe9c2 60%, #18b97c); box-shadow: 0 6px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.8); }
.player-chip.away i { background: radial-gradient(circle at 30% 25%, #ffffff, #c9bcff 60%, #6d4bf0); color: #120a33; }
.player-chip em { font-style: normal; font-size: .66rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); max-width: 70px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Compte */
.acc-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 14px; border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--ink) 4%, transparent)); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); flex-wrap: wrap; }
.acc-avatar { flex: 0 0 auto; width: 58px; height: 58px; padding: 3px; border-radius: 50%; background: conic-gradient(from 0deg, var(--accent), var(--vi), var(--accent)); box-shadow: 0 0 24px -4px var(--glow-cy); }
.acc-hero.is-pro .acc-avatar { background: conic-gradient(from 0deg, #ffe08a, #e0792a, #ffe08a); box-shadow: 0 0 26px -4px var(--glow-gold); }
.acc-avatar span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--surface); font: 800 1.35rem var(--font-display, inherit); }
.acc-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.acc-id strong { font-size: .95rem; overflow-wrap: anywhere; }
.acc-badge { align-self: flex-start; padding: 3px 11px; border-radius: 999px; font-size: .74rem; font-weight: 800; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink-soft); }
.acc-hero.is-pro .acc-badge { color: #1a1204; background: linear-gradient(180deg, #ffe08a, #e0a73a); box-shadow: 0 6px 16px -6px var(--glow-gold); }
.acc-out { margin-left: auto; padding: 8px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); background: none; color: var(--ink-soft); font: 600 .8rem inherit; font-family: inherit; cursor: pointer; }
.acc-cta { width: 100%; margin-top: 10px; min-height: 48px; display: flex; align-items: center; justify-content: center; }
.subscription-block { margin-top: 12px; padding: 14px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 14%, transparent), color-mix(in srgb, var(--ink) 3%, transparent)); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.subscription-plan { font-family: var(--font-display, inherit); font-size: 1.25rem; font-weight: 800; color: var(--gold); }
.sub-meter { height: 10px; border-radius: 999px; margin-top: 12px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.sub-meter i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #ffe08a, #4ef0b0); box-shadow: 0 0 14px var(--glow-gold); }
.sub-meter.is-soon i { background: linear-gradient(90deg, #ff9a9d, #ffe08a); }

/* Entrees animees des nouveaux blocs */
@keyframes meter-grow { from { width: 0; } }
#app.view-enter .h2h-meter i, #app.view-enter .rank-bar::after, #app.view-enter .sub-meter i { animation: meter-grow .9s cubic-bezier(.2,.8,.2,1) backwards; }
#app.view-enter .rank-row, #app.view-enter .h2h-list li, #app.view-enter .fs-row { animation: row-slide .45s ease backwards; }
#app.view-enter .rank-row:nth-child(2), #app.view-enter .h2h-list li:nth-child(2) { animation-delay: .05s; }
#app.view-enter .rank-row:nth-child(3), #app.view-enter .h2h-list li:nth-child(3) { animation-delay: .1s; }
#app.view-enter .rank-row:nth-child(n+4), #app.view-enter .h2h-list li:nth-child(n+4) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .fs-row.is-live::before, .fs-time .fs-live { animation: none; } }

/* Interrupteur (mode live) */
.switch { display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font: 700 .92rem inherit; font-family: inherit; cursor: pointer; min-height: 52px; transition: background .25s, border-color .25s; }
.switch-knob { position: relative; flex: 0 0 auto; width: 58px; height: 34px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: background .25s, box-shadow .25s; }
.switch-knob::after { content: ''; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.5); transition: transform .25s cubic-bezier(.3,.9,.3,1.2); }
.switch.is-on { background: color-mix(in srgb, var(--safe) 14%, transparent); border-color: color-mix(in srgb, var(--safe) 50%, transparent); }
.switch.is-on .switch-knob { background: linear-gradient(90deg, #18b97c, #4ef0b0); box-shadow: 0 0 18px var(--glow-gr); }
.switch.is-on .switch-knob::after { transform: translateX(24px); }
.switch:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, white); outline-offset: 2px; }

/* Titres de carte : la barre d'accent ne casse plus les titres a contenu mixte */
.card-title { display: block; }
.card-title::before { display: inline-block; vertical-align: -.22em; margin-right: 10px; }
.sec-head h3.card-title::before { display: none; }
/* Boutons de partage : meme niveau que les boutons principaux */
.btn-share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 14px; border: 0; font-weight: 800; letter-spacing: .01em; color: #04130B; cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #5cf5b8 0%, #18b97c 100%); box-shadow: 0 4px 0 #0a7d5c, 0 12px 24px -10px var(--glow-gr), inset 0 1px 0 rgba(255,255,255,.55); transition: transform .12s, box-shadow .12s; }
.btn-share:hover { transform: translateY(-2px); } .btn-share:active { transform: translateY(4px); box-shadow: 0 0 0 #0a7d5c, 0 6px 14px -8px var(--glow-gr), inset 0 2px 5px rgba(0,0,0,.2); }
.day-results .free-spotlight-actions .btn-share { width: 100%; }
/* Cartes a identite propre : meme fond en verre que les autres */
.day-results, .exact-today, .exact-hits, .partners-card, .tr-card { border-radius: 22px;
  background:
    radial-gradient(110% 70% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--vi) 10%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 93%, var(--accent)), var(--surface));
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.65), inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent); }

/* ===== Fenêtre de connexion : style pro (harmonisé avec le paywall) ===== */
.auth-pro { max-width: 420px; position: relative; overflow-x: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), var(--surface));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid color-mix(in srgb, var(--pitch) 28%, var(--line));
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); }
.auth-pro::before { content: ""; position: absolute; inset: -40% -20% auto; height: 260px; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pitch) 30%, transparent), transparent); opacity: .55; }
.auth-pro .registration-content { position: relative; padding: 30px 24px 24px; }
.auth-head { text-align: center; margin-bottom: 18px; }
.auth-mark { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; margin-bottom: 12px;
  font-family: var(--font-display); font-weight: 900; font-size: 17px; letter-spacing: .02em; color: #04140d;
  background: linear-gradient(135deg, var(--pitch), color-mix(in srgb, var(--pitch) 55%, #fff));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--pitch) 45%, transparent), inset 0 -3px 0 rgba(0,0,0,.18); transform: rotate(-4deg); }
.auth-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; margin: 0 0 4px; color: var(--ink); }
.auth-sub { margin: 0; color: var(--ink-soft); font-size: 14px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--line); }
.auth-tabs button { border: 0; background: none; padding: 10px; border-radius: 10px; font: inherit; font-weight: 700; font-size: 14px;
  color: var(--ink-soft); cursor: pointer; transition: all .2s ease; }
.auth-tabs button.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,.18), inset 0 0 0 1px color-mix(in srgb, var(--pitch) 35%, transparent); }
.auth-perks { list-style: none; margin: 0 0 16px; padding: 12px 14px; display: grid; gap: 7px; border-radius: 14px;
  background: color-mix(in srgb, var(--pitch) 9%, transparent); border: 1px dashed color-mix(in srgb, var(--pitch) 40%, transparent); }
.auth-perks li { font-size: 13.5px; color: var(--ink); display: flex; gap: 8px; align-items: center; }
.auth-perks b { width: 22px; text-align: center; }
.auth-pro .auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-pro .form-input { border-width: 1.5px; border-radius: 12px; padding: 13px 14px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.auth-cta { width: 100%; margin-top: 4px; padding: 15px; font-size: 15.5px; font-weight: 800; border-radius: 14px; }
.auth-switch { text-align: center; margin: 16px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.auth-switch button { background: none; border: 0; padding: 0 0 0 4px; font: inherit; font-weight: 700; color: var(--pitch); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.auth-legal { margin-top: 12px; font-size: 11.5px; opacity: .75; text-align: center; }
.auth-pro .form-group { margin: 0; } .auth-pro .form-label { margin-bottom: 6px; }

/* ===== Cartes d'outils : on utilise toute la largeur ===== */
/* En-tête : icône + titre sur une ligne, description en pleine largeur dessous */
.tool-head { grid-template-columns: auto 1fr auto; gap: 8px 12px; }
.tool-head > div { display: contents; }
.tool-head .card-title { grid-column: 2; grid-row: 1; align-self: center; }
.tool-head .tool-icon { grid-row: 1; width: 44px; height: 44px; border-radius: 14px; }
.tool-head .tool-icon svg { width: 22px; height: 22px; }
.tool-head .hint { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
.tool-head .pro-chip { grid-column: 3; grid-row: 1; }
/* Score exact : le match occupe toute la ligne, puis note, mise, score et % dessous */
.tool-row.exact-row { flex-wrap: wrap; gap: 8px 10px; padding: 12px; }
.exact-row .tool-row-main { flex: 1 1 100%; }
.exact-row .tool-row-main strong { white-space: normal; font-size: 15px; line-height: 1.25; }
.exact-row .tool-row-main > span { font-size: 12px; line-height: 1.4; }
.exact-row .tool-meta { margin-top: 0; order: 2; }
.exact-row .exact-score { order: 3; margin-left: auto; }
.exact-row .tool-prob { order: 4; }

/* ===== Classement du jour par marché ===== */
.rank-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px; scrollbar-width: none; }
.rank-chips::-webkit-scrollbar { display: none; }
.rank-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap;
  color: var(--ink-soft); background: color-mix(in srgb, var(--surface-2) 85%, transparent); border: 1px solid var(--glass-line, var(--line)); transition: all .2s ease; }
.rank-chip i { display: inline-flex; opacity: .7; }
.rank-chip i svg { width: 12px; height: 12px; }
.rank-chip.is-on { color: #03140d; background: linear-gradient(180deg, color-mix(in srgb, var(--pitch) 85%, #fff), var(--pitch)); border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--pitch) 35%, transparent); }
.rank-row { position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px; margin-bottom: 8px; border-radius: 16px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); border: 1px solid var(--glass-line, var(--line)); box-shadow: 0 2px 0 var(--depth, rgba(0,0,0,.25)); }
.rank-row:active { transform: translateY(2px); box-shadow: none; }
.rank-n { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: 15px; background: color-mix(in srgb, var(--pitch) 14%, transparent); color: var(--pitch); }
.rank-row:nth-child(1) .rank-n { background: linear-gradient(180deg, #ffe9a3, #e8a21b); color: #3a2500; }
.rank-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rank-main strong { font-size: 14.5px; line-height: 1.25; }
.rank-pick { font-size: 12.5px; font-weight: 700; color: var(--pitch); }
.rank-prob { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 62px; }
.rank-prob b { font-size: 20px; line-height: 1; }
.rank-prob i { display: block; width: 62px; height: 6px; border-radius: 999px; background: var(--surface-3); position: relative; overflow: hidden; }
.rank-prob i::after { content: ""; position: absolute; inset: 0; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, var(--pitch), color-mix(in srgb, var(--pitch) 55%, #fff)); }
.rank-odds { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: var(--surface-3); color: var(--ink-soft); }
.rank-value { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); text-transform: uppercase; letter-spacing: .04em; }
.rank-row.is-locked { opacity: .9; }
.rank-row.is-locked .rank-prob { filter: none; }
.rank-note { margin-top: 6px; font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.rank-row.is-locked { grid-template-columns: 34px 1fr auto auto; }

/* ===== Tirage au sort du jour ===== */
.gw-card { display: grid; gap: 14px; border-color: color-mix(in srgb, var(--gold) 38%, var(--line)) !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 9%, var(--surface)), var(--surface) 55%) !important; }
.gw-head { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.gw-icon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-size: 26px;
  background: linear-gradient(180deg, #ffe9a3, #e8a21b); box-shadow: 0 8px 20px color-mix(in srgb, var(--gold) 40%, transparent), inset 0 -3px 0 rgba(0,0,0,.15); }
.gw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gw-steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; text-align: center; font-size: 12px; font-weight: 700; line-height: 1.25;
  border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); border: 1px solid var(--glass-line, var(--line)); }
.gw-steps b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; background: var(--gold); color: #3a2500; }
.gw-link { display: flex; gap: 8px; }
.gw-link input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--gold) 55%, transparent); background: var(--surface-2); color: var(--ink); font: 600 13px var(--font-mono); }
.gw-copy { padding: 0 18px; border-radius: 12px; font-weight: 800; color: #3a2500; background: linear-gradient(180deg, #ffe9a3, #e8a21b); box-shadow: 0 4px 0 #a8730d; }
.gw-copy:active { transform: translateY(3px); box-shadow: none; }
.gw-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gw-stats div { padding: 12px; border-radius: 14px; text-align: center; background: color-mix(in srgb, var(--surface-2) 80%, transparent); border: 1px solid var(--glass-line, var(--line)); }
.gw-stats strong { display: block; font-size: 26px; line-height: 1; color: var(--gold); }
.gw-stats span { font-size: 11px; color: var(--ink-soft); }
.gw-cta { width: 100%; }
.gw-winner { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.gw-winner span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.gw-winner strong { font-size: 20px; font-family: var(--font-mono); }
.gw-winner em { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.gw-rules ul { display: grid; gap: 6px; padding-top: 8px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.gw-rules li::before { content: "• "; color: var(--gold); }
.gw-won { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; border-color: var(--pitch) !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pitch) 16%, var(--surface)), var(--surface)) !important; box-shadow: var(--glow-pitch); }
.gw-won strong { display: block; font-size: 16px; } .gw-won p { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.gw-confetti { font-size: 38px; }

/* ===== Corners (données réelles, ligne réglable) ===== */
.corners-real { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-left: 8px; padding: 3px 8px; border-radius: 999px; color: var(--pitch); background: color-mix(in srgb, var(--pitch) 14%, transparent); vertical-align: middle; }
.corners-block .rank-chips { margin: 8px 0 4px; }
.corners-duel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.corners-side { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); border: 1px solid var(--glass-line, var(--line)); text-align: center; }
.corners-side span { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.corners-side b { font-size: 30px; line-height: 1; }
.corners-side.is-lead { border-color: color-mix(in srgb, var(--pitch) 55%, transparent); background: color-mix(in srgb, var(--pitch) 10%, var(--surface-2)); }
.corners-side.is-lead b { color: var(--pitch); }
.corners-bar { height: 8px; border-radius: 999px; background: var(--risky); margin: 12px 0 6px; overflow: hidden; opacity: .85; }
.corners-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pitch), color-mix(in srgb, var(--pitch) 60%, #fff)); }
.rank-proof { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 2px 0 12px; border-radius: 14px; background: color-mix(in srgb, var(--pitch) 9%, transparent); border: 1px dashed color-mix(in srgb, var(--pitch) 40%, transparent); font-size: 12.5px; line-height: 1.4; }
.rank-proof > div { display: flex; flex-direction: column; gap: 2px; }
.rank-proof-ico { font-size: 22px; }

/* ===== Tendances ===== */
.trend-pips { display: inline-flex; gap: 4px; vertical-align: middle; }
.trend-pips i { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-3); border: 1.5px solid color-mix(in srgb, var(--ink-soft) 40%, transparent); }
.trend-pips i.on { background: var(--pitch); border-color: var(--pitch); box-shadow: 0 0 8px color-mix(in srgb, var(--pitch) 55%, transparent); }
.trend-duo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); }
.trend-duo > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trend-duo em { font-style: normal; }
.trend-duo b { color: var(--ink); }
.trend-duo > span { flex-wrap: nowrap; }
.trend-name { flex: 1; min-width: 0; max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trend-duo em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11em; }


/* =====================================================================
   NOUVELLE IDENTITÉ HALL30 — « Stade de nuit »
   Titres en Anton, texte en Inter, or comme signature, vert action.
   Même langage que nos affiches et vidéos.
   ===================================================================== */
:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --font-display: 'Anton', 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair', Georgia, serif;
  --gold-grad: linear-gradient(180deg, #fff2b8 0%, #ffd45c 45%, #e8a21b 100%);
}
body { font-feature-settings: 'tnum' 1, 'lnum' 1; letter-spacing: -.005em; }
h1, h2, h3 { letter-spacing: .01em; }
/* titres de cartes : Inter gras (lisibles même longs), titres de section : Anton */
.card-title, h3.card-title { font-family: var(--font-body); font-weight: 800; letter-spacing: -.01em; }
.home-section-title, .pro-title, .vitrine-title, .sec-head h3, .pw-title, .auth-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
.home-section-title { font-size: 26px; margin: 26px 2px 12px; display: flex; align-items: center; gap: 12px; }
.home-section-title::after { content: ""; flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #e8a21b, transparent); opacity: .7; }
.wordmark { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; }
.wordmark-30 { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(90,50,0,.6)); }

/* Accueil : bloc d'ouverture */
.vitrine-hero { padding: 34px 20px 24px; overflow: hidden; }
.vitrine-hero .pitch-lines { position: absolute; inset: 0; pointer-events: none; opacity: .22; z-index: 0;
  background:
    radial-gradient(circle at 50% 112%, transparent 0 94px, rgba(255,255,255,.7) 95px 97px, transparent 98px),
    linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)) 0 calc(100% - 1px) / 100% 2px no-repeat;
  -webkit-mask: linear-gradient(180deg, transparent 30%, #000 100%); mask: linear-gradient(180deg, transparent 30%, #000 100%); }
.vitrine-title { font-size: clamp(64px, 22vw, 104px); line-height: .9; letter-spacing: .015em; margin: 6px 0 10px; }
.vitrine-title .wordmark-h { color: var(--ink); text-shadow: 0 8px 30px rgba(0,0,0,.35); }
.vitrine-title .wordmark-30 { position: relative; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(90,50,0,.7)) drop-shadow(0 0 26px rgba(255,190,60,.35)); }
.vitrine-tag { font-family: var(--font-serif); font-weight: 900; font-style: italic; font-size: 19px; line-height: 1.25; margin: 0 auto 14px; max-width: 24em; text-align: center; color: var(--ink); }
.vitrine-tag b { font-style: normal; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--pitch) 70%, transparent) 62% 92%, transparent 92%); }
.vitrine-actions { display: grid; gap: 10px; margin-top: 12px; }
.vitrine-cta2 { width: 100%; padding: 14px 16px; border-radius: 16px; font-weight: 800; font-size: 14.5px; color: #3a2500;
  background: linear-gradient(180deg, #ffe9a3, #e8a21b); box-shadow: 0 5px 0 #a8730d, 0 14px 30px rgba(232,162,27,.28); }
.vitrine-cta2:active { transform: translateY(4px); box-shadow: 0 1px 0 #a8730d; }
.vitrine-stats strong { font-family: var(--font-display); font-weight: 400; font-size: 32px; letter-spacing: .02em; }

/* Boutons : une seule famille, plus francs */
.btn-primary, .btn-3d { font-family: var(--font-body); font-weight: 800; letter-spacing: -.005em; }
.btn-share { font-family: var(--font-body); font-weight: 800; }

/* Navigation du bas : icône active en or */
.bottom-nav .is-active, .bottom-nav [aria-current="page"] { color: var(--gold); }

/* Cartes : liseré or discret au survol, profondeur plus marquée */
.tool-card, .gw-card, .vitrine-card { transition: transform .2s ease, border-color .2s ease; }
.vitrine-card:hover, .tool-card:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }

@media (prefers-reduced-motion: no-preference) {
  .vitrine-title .wordmark-30 { animation: gold-shine 5s ease-in-out infinite; }
  @keyframes gold-shine { 0%, 100% { filter: drop-shadow(0 4px 0 rgba(90,50,0,.7)) drop-shadow(0 0 18px rgba(255,190,60,.25)); } 50% { filter: drop-shadow(0 4px 0 rgba(90,50,0,.7)) drop-shadow(0 0 34px rgba(255,200,80,.6)); } }
}

/* =====================================================================
   NOUVELLE PAGE D'ACCUEIL (ah-*) ET PARCOURS GUIDÉ (pc-*)
   Toujours sombres (ambiance stade de nuit), quel que soit le thème choisi.
   ===================================================================== */
.ah-hero, .ah-pan, .ah-mc, .pc-overlay { --ah-gr: #24dd97; --ah-cy: #38d9f0; --ah-vi: #9b8cff; --ah-gold: #ffcf5a; --ah-red: #ff5468; --ah-mut: #8fa6a0; --ah-line: rgba(255,255,255,.1); --ah-grad: linear-gradient(135deg,#24dd97,#38d9f0 55%,#9b8cff); }
.ah-hero { position: relative; overflow: hidden; margin: 6px 0 18px; padding: 26px 20px 22px; border-radius: 30px; color: #eaf3ef; background: radial-gradient(120% 70% at 50% -10%, #12384a 0%, #07111a 60%); border: 1px solid rgba(36,221,151,.28); box-shadow: 0 30px 70px rgba(0,0,0,.35); font-family: var(--font-body); }
.ah-aur { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ah-aur i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; }
.ah-aur i:nth-child(1) { width: 260px; height: 260px; left: -90px; top: 120px; background: rgba(36,221,151,.45); animation: ah-f1 14s ease-in-out infinite alternate; }
.ah-aur i:nth-child(2) { width: 240px; height: 240px; right: -80px; top: 300px; background: rgba(155,140,255,.4); animation: ah-f2 17s ease-in-out infinite alternate; }
@keyframes ah-f1 { to { transform: translate(60px, 50px); } } @keyframes ah-f2 { to { transform: translate(-50px, 60px); } }
.ah-hero > *:not(.ah-aur) { position: relative; z-index: 1; }
.ah-brand { font-family: var(--font-display); font-weight: 900; font-size: 30px; letter-spacing: .02em; }
.ah-brand b { background: var(--ah-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ah-chip { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; font-weight: 700; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; background: rgba(36,221,151,.1); border: 1px solid rgba(36,221,151,.4); color: #8ff3c9; }
.ah-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--ah-gr); box-shadow: 0 0 10px var(--ah-gr); animation: ah-pulse 1.6s infinite; }
@keyframes ah-pulse { 50% { opacity: .35; transform: scale(1.5); } }
.ah-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 11vw, 60px); line-height: 1.04; margin: 14px 0 14px; color: #fff; text-transform: none; letter-spacing: .005em; }
.ah-title em { font-style: normal; background: var(--ah-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ah-title u { text-decoration: none; position: relative; white-space: nowrap; }
.ah-title u::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: .1em; background: var(--ah-gold); border-radius: 4px; transform-origin: left; animation: ah-ul 1.1s .5s both cubic-bezier(.2,.8,.2,1); }
@keyframes ah-ul { from { transform: scaleX(0); } }
.ah-lead { color: #b9cbc5; font-size: 15.5px; line-height: 1.5; margin: 0; }
.ah-lead b { color: #fff; }
.ah-cta { display: grid; gap: 10px; margin-top: 20px; }
.ah-btn { display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; font: 800 16px var(--font-body); padding: 16px 22px; border-radius: 999px; background: linear-gradient(180deg,#34f0a8,#15c47d); color: #03140d; box-shadow: 0 6px 0 #0a7a50, 0 20px 46px rgba(36,221,151,.32); transition: transform .15s, box-shadow .15s; }
.ah-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #0a7a50; }
.ah-btn.ah-ghost { background: rgba(255,255,255,.08); color: #fff; box-shadow: none; border: 1px solid rgba(255,255,255,.18); padding: 14px 22px; }
.ah-micro { margin: 12px 0 0; font-size: 11.5px; color: var(--ah-mut); text-align: center; }
.ah-board { margin-top: 20px; border-radius: 22px; padding: 14px 16px 8px; background: linear-gradient(160deg, rgba(18,32,42,.92), rgba(8,14,20,.95)); border: 1px solid var(--ah-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.ah-bh { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ah-mut); font-weight: 700; padding-bottom: 8px; }
.ah-bh b { color: var(--ah-gold); font-family: var(--font-display); font-size: 21px; letter-spacing: .03em; text-transform: none; font-weight: 900; white-space: nowrap; }
.ah-bh b i { font-style: normal; }
.ah-bl { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--ah-line); }
.ah-tm { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 900; font-size: 21px; line-height: 1.05; text-transform: uppercase; }
.ah-tm small { display: block; font: 600 11px var(--font-body); color: var(--ah-mut); margin-top: 3px; text-transform: none; letter-spacing: 0; }
.ah-fl { display: flex; gap: 4px; }
.ah-fl span { width: 31px; height: 43px; border-radius: 8px; background: linear-gradient(180deg,#10202c 50%,#0b1620 50%); border: 1px solid rgba(36,221,151,.45); display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 32px; color: #7dffc4; position: relative; }
.ah-fl span::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.7); }
.ah-ok { width: 25px; height: 25px; border-radius: 50%; background: var(--ah-gr); color: #03140d; display: grid; place-items: center; font-weight: 900; font-size: 13px; box-shadow: 0 0 12px rgba(36,221,151,.6); flex: none; }
.ah-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.ah-tc { border-radius: 16px; padding: 12px 6px; text-align: center; background: rgba(255,255,255,.05); border: 1px solid var(--ah-line); }
.ah-n { display: block; font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 1; background: var(--ah-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ah-tc > span { display: block; margin-top: 6px; font-size: 10.5px; line-height: 1.25; color: var(--ah-mut); font-weight: 600; }
/* sections */
.ah-sec { padding: 22px 0 6px; font-family: var(--font-body); }
.ah-eye { font-weight: 800; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ah-gr, #24dd97); }
.ah-h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 8vw, 40px); line-height: 1; margin: 6px 0 8px; }
.ah-sub { font-size: 14px; color: var(--ink-soft, #5a6b64); margin: 0; }
.ah-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px 2px 12px; margin: 0 -4px; scrollbar-width: none; }
.ah-rail::-webkit-scrollbar { display: none; }
.ah-mc { flex: 0 0 min(250px, 74vw); scroll-snap-align: start; text-align: left; border: 1px solid rgba(255,255,255,.1); cursor: pointer; border-radius: 22px; padding: 16px; color: #eaf3ef; font-family: var(--font-body); background: linear-gradient(165deg, #14222e, #090f16); display: flex; flex-direction: column; gap: 12px; transition: transform .2s, border-color .2s; }
.ah-mc:hover { transform: translateY(-4px); border-color: rgba(36,221,151,.5); }
.ah-mh { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--ah-mut); text-transform: uppercase; }
.ah-mh span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ah-mh b { color: var(--ah-gold); }
.ah-vs { display: flex; align-items: center; justify-content: space-between; }
.ah-vsx { font-family: var(--font-display); font-weight: 900; font-size: 28px; color: var(--ah-gold); }
.ah-bd { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 18px; color: #fff; background: #1a2a36; border: 2px solid rgba(255,255,255,.85); overflow: hidden; flex: none; }
.ah-bd img { width: 68%; height: 68%; object-fit: contain; }
.ah-nm { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-display); font-weight: 900; font-size: 18px; text-align: center; line-height: 1.05; text-transform: uppercase; }
.ah-nm span { width: 48%; }
.ah-lk { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 14px; background: rgba(255,207,90,.08); border: 1px dashed rgba(255,207,90,.5); font-weight: 700; font-size: 12px; color: #ffe3a1; }
.ah-lk b { font-family: var(--font-display); font-size: 21px; color: #fff; letter-spacing: .03em; }
.ah-lk em, .pc-lk em { font-style: normal; font-size: 10px; font-weight: 800; background: var(--ah-gold); color: #2a1c00; padding: 1px 7px; border-radius: 7px; margin-left: 7px; }
.ah-rd { font-size: 11px; font-weight: 700; color: #8ff3c9; display: flex; align-items: center; gap: 7px; }
.ah-rd i { width: 7px; height: 7px; border-radius: 50%; background: var(--ah-gr); }
.ah-h3 { font-family: var(--font-display); font-weight: 900; font-size: 26px; line-height: 1; margin: 6px 0 4px; text-transform: uppercase; }
.ah-ba { display: grid; gap: 12px; margin-top: 16px; }
.ah-pan { border-radius: 22px; padding: 18px; color: #eaf3ef; font-family: var(--font-body); background: linear-gradient(165deg, #14222e, #090f16); border: 1px solid rgba(255,255,255,.1); }
.ah-tl { position: relative; margin-top: 14px; padding-left: 30px; }
.ah-tl::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg,#24dd97,#ffcf5a); }
.ah-st { position: relative; margin-bottom: 18px; }
.ah-st::before { content: ''; position: absolute; left: -27px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: #090f16; border: 3px solid #24dd97; }
.ah-st.ah-f::before { background: #ffcf5a; border-color: #ffcf5a; box-shadow: 0 0 12px #ffcf5a; }
.ah-st small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ah-mut); }
.ah-st strong { font-size: 15px; font-weight: 700; }
.ah-gold { color: #ffcf5a; font-family: var(--font-mono); } .ah-green { color: #24dd97; font-family: var(--font-mono); }
.ah-miss { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ah-ms { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; font-weight: 700; font-size: 13px; }
.ah-ms b { font-family: var(--font-display); font-size: 24px; }
.ah-ms.hit { background: rgba(36,221,151,.1); border: 1px solid rgba(36,221,151,.4); color: #c8ffe6; } .ah-ms.hit b { color: #24dd97; }
.ah-ms.bad { background: rgba(255,84,104,.1); border: 1px solid rgba(255,84,104,.4); color: #ffd5da; } .ah-ms.bad b { color: #ff5468; }
.ah-note { margin: 12px 0 0; font-size: 12.5px; color: #a9bdb7; }

/* ---- parcours guidé ---- */
html.pc-lock, html.pc-lock body { overflow: hidden; }
.pc-overlay { position: fixed; inset: 0; z-index: 3000; background: radial-gradient(120% 55% at 50% -8%, #0e2a37 0%, #05080d 62%); color: #eaf3ef; font-family: var(--font-body); display: flex; justify-content: center; animation: pc-in .3s both; }
.pc-overlay.out { animation: pc-out .22s both; }
@keyframes pc-in { from { opacity: 0; transform: translateY(24px); } } @keyframes pc-out { to { opacity: 0; transform: translateY(24px); } }
.pc-aur { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pc-aur i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; }
.pc-aur i:nth-child(1) { width: 300px; height: 300px; left: -100px; top: 80px; background: rgba(36,221,151,.4); animation: ah-f1 14s ease-in-out infinite alternate; }
.pc-aur i:nth-child(2) { width: 280px; height: 280px; right: -90px; top: 340px; background: rgba(155,140,255,.35); animation: ah-f2 17s ease-in-out infinite alternate; }
.pc-shell { position: relative; width: min(460px, 100%); height: 100%; display: flex; flex-direction: column; }
.pc-top { display: flex; align-items: center; gap: 10px; padding: max(16px, env(safe-area-inset-top)) 16px 8px; }
.pc-back, .pc-x { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--ah-line); background: rgba(255,255,255,.06); color: #fff; font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.pc-back { opacity: 0; pointer-events: none; } .pc-back.on { opacity: 1; pointer-events: auto; }
.pc-bar { flex: 1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.pc-bar b { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--ah-grad); transition: width .5s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 14px rgba(36,221,151,.6); }
.pc-cnt { font-weight: 700; font-size: 12px; color: var(--ah-mut); min-width: 30px; text-align: right; }
.pc-main { flex: 1; overflow-y: auto; padding: 8px 22px 24px; -webkit-overflow-scrolling: touch; opacity: 0; }
.pc-main.in { animation: pc-step .45s both cubic-bezier(.2,.8,.2,1); }
@keyframes pc-step { from { opacity: 0; transform: translateX(var(--pc-dx, 36px)); } to { opacity: 1; transform: none; } }
.pc-cta { padding: 12px 20px max(22px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, rgba(5,8,13,.96) 30%); }
.pc-btn { width: 100%; display: flex; align-items: center; justify-content: center; font: 800 17px var(--font-body); border: 0; cursor: pointer; border-radius: 999px; padding: 16px 22px; background: linear-gradient(180deg,#34f0a8,#15c47d); color: #03140d; box-shadow: 0 6px 0 #0a7a50, 0 20px 46px rgba(36,221,151,.3); transition: transform .15s, opacity .2s; }
.pc-btn:active { transform: translateY(3px); } .pc-btn[disabled] { opacity: .35; pointer-events: none; box-shadow: none; }
.pc-btn[hidden], .pc-alt[hidden] { display: none; }
.pc-btn.pc-ghost { background: rgba(255,255,255,.08); color: #fff; box-shadow: none; border: 1px solid var(--ah-line); margin-top: 10px; padding: 13px; font-size: 15px; }
.pc-micro { margin: 10px 0 0; text-align: center; font-size: 11.5px; color: var(--ah-mut); }
.pc-kick { font-weight: 800; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ah-gr); margin-top: 8px; }
.pc-h { font-family: var(--font-display); font-weight: 900; font-size: 38px; line-height: .98; margin: 8px 0 8px; text-transform: none; }
.pc-h em { font-style: normal; background: var(--ah-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc-sub { color: #b3c6c0; font-size: 14.5px; margin: 0; } .pc-sub b { color: #fff; }
.pc-c { text-align: center; }
.pc-big { font-family: var(--font-display); font-weight: 900; font-size: 140px; line-height: .85; text-align: center; margin: 6px 0 0; background: linear-gradient(180deg,#ffe79a,#ffbf2e); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 28px rgba(255,191,46,.4)); }
.pc-board { margin-top: 14px; border-radius: 22px; padding: 6px 14px; background: linear-gradient(160deg, rgba(18,32,42,.92), rgba(8,14,20,.95)); border: 1px solid var(--ah-line); }
.pc-bl { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--ah-line); } .pc-bl:first-child { border-top: 0; }
.pc-tm { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 1.05; text-transform: uppercase; }
.pc-tm small { display: block; font: 600 11px var(--font-body); color: var(--ah-mut); margin-top: 3px; text-transform: none; }
.pc-fl { display: flex; gap: 4px; }
.pc-fl span { width: 30px; height: 42px; border-radius: 8px; background: linear-gradient(180deg,#10202c 50%,#0b1620 50%); border: 1px solid rgba(36,221,151,.45); display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 31px; color: #7dffc4; }
.pc-ok { width: 25px; height: 25px; border-radius: 50%; background: var(--ah-gr); color: #03140d; display: grid; place-items: center; font-weight: 900; font-size: 13px; box-shadow: 0 0 12px rgba(36,221,151,.6); flex: none; }
.pc-n { color: var(--ah-gr); }
.pc-list { margin-top: 16px; display: grid; gap: 9px; }
.pc-mc { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 18px; text-align: left; cursor: pointer; background: rgba(255,255,255,.05); border: 1.5px solid var(--ah-line); color: #eaf3ef; font-family: var(--font-body); transition: all .2s; }
.pc-mc:active { transform: scale(.98); }
.pc-mc.sel { border-color: var(--ah-gr); background: rgba(36,221,151,.1); box-shadow: 0 0 0 3px rgba(36,221,151,.12); }
.pc-t { font-weight: 800; font-size: 12px; color: var(--ah-gold); width: 40px; }
.pc-pair { display: flex; gap: 5px; }
.pc-bd { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 900 12px var(--font-display); color: #fff; background: #1a2a36; border: 2px solid rgba(255,255,255,.85); overflow: hidden; }
.pc-bd img { width: 70%; height: 70%; object-fit: contain; }
.pc-nm { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; line-height: 1.2; } .pc-nm small { display: block; font-size: 11px; font-weight: 600; color: var(--ah-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-chk { width: 25px; height: 25px; flex: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); display: grid; place-items: center; color: transparent; font-weight: 900; font-size: 13px; transition: all .2s; }
.pc-mc.sel .pc-chk { background: var(--ah-gr); border-color: var(--ah-gr); color: #03140d; transform: scale(1.1); }
.pc-ring { width: 124px; height: 124px; margin: 26px auto 6px; position: relative; }
.pc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .pc-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.pc-ring .b { stroke: rgba(255,255,255,.1); } .pc-ring .f { stroke: url(#pcg); stroke-dasharray: 352; stroke-dashoffset: 352; }
.pc-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 38px var(--font-display); }
.pc-lst { list-style: none; margin: 22px 4px 0; padding: 0; display: grid; gap: 13px; }
.pc-lst li { display: flex; align-items: center; gap: 13px; font-weight: 700; font-size: 15px; opacity: .28; transition: opacity .4s; } .pc-lst li.on { opacity: 1; }
.pc-lst i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); display: grid; place-items: center; font-style: normal; font-size: 13px; color: transparent; font-weight: 900; flex: none; transition: all .3s; }
.pc-lst li.on i { background: var(--ah-gr); border-color: var(--ah-gr); color: #03140d; }
.pc-res { margin-top: 14px; border-radius: 24px; padding: 16px; background: linear-gradient(165deg, rgba(20,34,46,.95), rgba(9,15,22,.96)); border: 1px solid var(--ah-line); animation: pc-up .5s both; }
@keyframes pc-up { from { opacity: 0; transform: translateY(18px); } }
.pc-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 900 22px var(--font-display); text-transform: uppercase; } .pc-hd small { font: 800 12px var(--font-body); color: var(--ah-gold); }
.pc-cmp { margin-top: 12px; display: grid; gap: 11px; }
.pc-cr { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; } .pc-mid { font-weight: 800; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ah-mut); text-align: center; }
.pc-v { font-weight: 800; font-size: 15px; } .pc-r { text-align: right; }
.pc-fs { display: inline-flex; gap: 4px; }
.pc-f { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font: 900 11px var(--font-body); color: #03140d; }
.pc-fV { background: #24dd97; } .pc-fN { background: #c9d4cf; } .pc-fD { background: #ff5468; color: #fff; }
.pc-fact { display: flex; gap: 10px; margin: 12px 0 0; font-size: 13px; color: #cfe; line-height: 1.35; }
.pc-lk { margin-top: 14px; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-radius: 15px; background: rgba(255,207,90,.08); border: 1px dashed rgba(255,207,90,.55); font: 700 13px var(--font-body); color: #ffe3a1; cursor: pointer; }
.pc-lk b { font: 900 24px var(--font-display); color: #fff; letter-spacing: .03em; }
.pc-open { border-style: solid; background: rgba(36,221,151,.1); border-color: rgba(36,221,151,.5); color: #c8ffe6; }
.pc-perk { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.pc-perk li { display: flex; gap: 12px; align-items: center; font-weight: 600; font-size: 14.5px; color: #cfe; }
.pc-perk span { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(36,221,151,.12); border: 1px solid rgba(36,221,151,.35); }
.pc-conf { text-align: center; font-size: 56px; margin-top: 8px; animation: pc-pop .6s both; } @keyframes pc-pop { from { transform: scale(0) rotate(-30deg); } }
.pc-lnk { margin-top: 16px; padding: 14px; border-radius: 16px; background: rgba(0,0,0,.35); border: 1px dashed rgba(255,207,90,.6); font-weight: 700; color: #ffe3a1; word-break: break-all; text-align: center; font-size: 14px; }
.pc-gw { margin-top: 14px; padding: 16px; border-radius: 20px; font-size: 14px; line-height: 1.45; background: radial-gradient(80% 120% at 0% 0%, rgba(255,207,90,.18), transparent 60%), rgba(16,26,34,.9); border: 1px solid rgba(255,207,90,.35); } .pc-gw b { color: var(--ah-gold); }
@media (prefers-reduced-motion: reduce) { .ah-hero *, .pc-overlay, .pc-overlay * { animation: none !important; transition: none !important; } .pc-main { opacity: 1; } }

/* Inscription sécurisée : email confirmé, avertissement, mot de passe oublié */
.auth-warn { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; color: var(--ink); background: rgba(255,184,0,.12); border: 1px solid rgba(255,184,0,.35); }
.auth-forgot { align-self: flex-end; margin-top: -6px; background: none; border: 0; padding: 2px 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--pitch); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.auth-sent { padding: 14px; border-radius: 14px; background: rgba(31,207,107,.1); border: 1px solid rgba(31,207,107,.3); font-size: 14px; line-height: 1.5; color: var(--ink); }
.auth-sent b { font-size: 16px; display: block; margin-bottom: 6px; }
.auth-sent p { margin: 6px 0 0; }
.auth-sent a { color: var(--pitch); font-weight: 700; }

/* Rappel d'inscription après 1 minute */
.sn-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; display: flex; justify-content: center; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; animation: sn-up .45s cubic-bezier(.2,.9,.3,1) both; }
.sn-card { pointer-events: auto; position: relative; width: min(440px, 100%); padding: 18px 18px 14px; border-radius: 20px; background: #0f1a22; color: #fff; border: 1px solid rgba(31,207,107,.4); box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04); text-align: center; }
.sn-card h3 { margin: 6px 0 6px; font-size: 19px; }
.sn-card p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.78); }
.sn-ico { font-size: 28px; }
.sn-cta { width: 100%; }
.sn-later { display: block; margin: 10px auto 0; background: none; border: 0; color: rgba(255,255,255,.6); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.sn-x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: rgba(255,255,255,.6); font-size: 16px; cursor: pointer; padding: 6px; }
@keyframes sn-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sn-wrap { animation: none; } }

/* Cloudflare invisible + étape « rejoindre la communauté » */
.ts-box { display: flex; justify-content: center; min-height: 0; }
.ts-box:empty { display: none; }
.join-wrap { display: flex; flex-direction: column; gap: 12px; }
.join-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.join-card.is-done { border-color: rgba(31,207,107,.55); background: rgba(31,207,107,.1); }
.join-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 22px; background: color-mix(in srgb, var(--c) 22%, transparent); }
.join-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.join-txt b { font-size: 15px; }
.join-txt small { font-size: 12.5px; opacity: .7; }
.join-btn { flex: none; padding: 10px 16px; border-radius: 12px; border: 0; background: #1fcf6b; color: #04120a; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; text-decoration: none; }
.join-btn.is-alt { background: transparent; color: var(--pitch, #1fcf6b); border: 1.5px solid currentColor; }
.join-ok { font-weight: 700; font-size: 13px; color: #1fcf6b; }
.join-help { margin: 4px 0 0; text-align: center; font-size: 13.5px; opacity: .8; }
.join-skip { align-self: center; }

/* Correctifs d'affichage de l'accueil : bouton « Voir l'analyse » (compte Pro) et interlignes des titres */
.ah-lk { gap: 8px; flex-wrap: nowrap; }
.ah-lk > span { min-width: 0; }
.ah-lk b.ah-open { font-family: var(--font-body); font-size: 13px; font-weight: 800; letter-spacing: 0; white-space: nowrap; color: var(--ah-gr); flex: none; }
.ah-h2 { line-height: 1.12; text-wrap: balance; }
.ah-title { line-height: 1.08; }
.ah-vsx { flex: none; }
.ah-nm > span { overflow-wrap: anywhere; line-height: 1.1; }
.ah-mc { min-width: 0; }
.ah-tm { line-height: 1.12; overflow-wrap: anywhere; }
/* Anton n'existe qu'en graisse normale : sans cela le navigateur fabrique un faux gras (lettres doublées, floues). */
.ah-title, .ah-h2, .ah-h3, .ah-tm, .ah-brand, .ah-n, .ah-fl, .ah-vsx, .ah-lk b:not(.ah-open), .ah-ms b, .ah-gold, .ah-green,
.pc-overlay h1, .pc-overlay h2, .pc-overlay h3, .pc-overlay .pc-big { font-weight: 400; font-synthesis: none; }
.pc-h, .pc-big, .pc-hd { font-weight: 400; font-synthesis: none; }

/* Créateur de paris IA */
.bb-box { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(242,193,78,.14), rgba(36,221,151,.08)); border: 1px solid rgba(242,193,78,.45); }
.bb-head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; }
.bb-odds { font-family: 'Anton', Impact, sans-serif; font-size: 26px; color: #f2c14e; letter-spacing: 1px; }
.bb-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; margin-top: 6px; border-radius: 10px; background: rgba(36,221,151,.10); font-weight: 600; }
.bb-row b { color: #24dd97; }
.bb-teaser { display: block; width: 100%; text-align: left; margin: 12px 0; padding: 12px 14px; border-radius: 14px; border: 1px dashed rgba(242,193,78,.6); background: rgba(242,193,78,.08); color: inherit; font: inherit; cursor: pointer; }

/* Studio sur l'accueil */
.studio-home { margin: 18px 0; padding: 14px; border-radius: 20px; background: linear-gradient(180deg, rgba(36,221,151,.10), rgba(242,193,78,.06)); border: 1px solid rgba(36,221,151,.35); }
.studio-home-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.studio-home-head strong { font-weight: 800; letter-spacing: 1px; margin-left: 6px; }
.studio-home-head small { display: block; color: var(--text-muted, #9fb0bd); font-size: 12px; margin-top: 2px; }
.studio-live-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ff3b40; animation: studioRing 1.4s ease-out infinite; vertical-align: middle; }
@keyframes studioRing { 0% { box-shadow: 0 0 0 0 rgba(255,59,64,.6); } 100% { box-shadow: 0 0 0 9px rgba(255,59,64,0); } }
.studio-home-hits { flex: none; font-weight: 800; color: #24dd97; background: rgba(36,221,151,.14); padding: 6px 10px; border-radius: 99px; font-size: 13px; }
.studio-home-cards { display: grid; gap: 10px; }
.studio-home-cta { display: block; text-align: center; margin-top: 12px; padding: 12px; border-radius: 14px; background: #f2c14e; color: #1a1203; font-weight: 800; text-decoration: none; }

/* Chiffres clés : tuiles animées */
@keyframes ktIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ktShine { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.kt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.kt-grid > * { min-width: 0; overflow: hidden; }
.kt { padding: 12px; border-radius: 16px; background: linear-gradient(160deg, rgba(36,221,151,.10), rgba(255,255,255,.03)); border: 1px solid rgba(36,221,151,.25); animation: ktIn .5s var(--d, 0ms) cubic-bezier(.2,.8,.2,1) both; }
.kt-wide { grid-column: 1 / -1; }
.kt-cap { display: block; font-size: 12px; font-weight: 800; letter-spacing: .5px; color: var(--text-muted, #9fb0bd); margin-bottom: 8px; }
.kt-pair { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kt-pair b { font-size: clamp(20px, 6.4vw, 30px); line-height: 1; white-space: nowrap; background: linear-gradient(90deg, #24dd97 40%, #fff 50%, #24dd97 60%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ktShine 3.5s linear infinite; }
.kt-pair small { font-size: 14px; }
.kt-pair i { font-style: normal; font-size: 11px; opacity: .5; font-weight: 800; }
.kt em { display: block; margin-top: 6px; font-style: normal; font-size: 11px; opacity: .65; text-align: center; }
.kt-form { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.kt-form em { margin: 0; font-size: 11px; }
.kt-h2h { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; text-align: center; font-weight: 700; }
.kt-h2h b { font-size: 26px; color: #f2c14e; }
.kt-status { margin: 8px 0; }
.kt-status.is-warn { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(242,193,78,.10); border: 1px dashed rgba(242,193,78,.5); font-size: 13px; }
.kf-list li { animation: ktIn .45s var(--d, 0ms) cubic-bezier(.2,.8,.2,1) both; }
.rank-row { animation: ktIn .4s ease both; }
@media (prefers-reduced-motion: reduce) { .kt, .kf-list li, .rank-row, .kt-pair b { animation: none !important; } }
.rank-logo{width:20px;height:20px;object-fit:contain;vertical-align:middle;margin-right:8px}
.rank-row.is-hl{box-shadow:0 0 0 1px rgba(36,221,151,.55),0 0 24px rgba(36,221,151,.15)}

/* Conditions avant paiement */
.pw-terms { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 6px; padding: 12px 14px; border-radius: 14px; background: rgba(242,193,78,.08); border: 1px solid rgba(242,193,78,.45); font-size: 13px; line-height: 1.5; cursor: pointer; }
.pw-terms input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: #24dd97; }
.pw-terms a { color: #24dd97; }
.pw-terms.is-error { border-color: #ff5a5f; background: rgba(255,90,95,.12); animation: pwShake .4s; }
@keyframes pwShake { 0%,100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.site-legal { text-align: center; font-size: 12px; opacity: .7; margin: 14px 0 4px; }
.site-legal a { color: inherit; text-decoration: underline; margin: 0 6px; }

/* Sélecteur de langue FR / EN */
.lang-toggle { display: inline-flex; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; overflow: hidden; flex: none; }
.lang-toggle button { border: 0; background: transparent; color: inherit; font: 800 12px/1 Inter, system-ui, sans-serif; letter-spacing: .5px; padding: 8px 10px; cursor: pointer; opacity: .6; }
.lang-toggle button.is-on { background: #24dd97; color: #04140c; opacity: 1; }
@media (max-width: 440px) {
  .topbar { flex-wrap: nowrap !important; gap: 6px; }
  .topbar .lang-toggle button { padding: 6px 5px; font-size: 10.5px; }
  .topbar .bonus-btn { padding: 8px 7px; font-size: 12.5px; white-space: nowrap; }
  .topbar .support-btn { font-size: 12px; padding: 8px 7px; white-space: nowrap; gap: 4px; }
  .topbar .icon-btn { width: 38px; height: 38px; flex: none; }
  .topbar .wordmark { font-size: 22px; }
}

/* ---------- Offre Pro 1 mois (accueil) ---------- */
.offer-fire { position: relative; overflow: hidden; margin: 16px 0; padding: 20px 18px 18px; border-radius: 24px; text-align: center;
  background: linear-gradient(160deg, #2a0f06 0%, #1a0a10 55%, #0c1218 100%); border: 2px solid rgba(255,140,40,.7);
  box-shadow: 0 0 0 4px rgba(255,120,30,.10), 0 18px 50px rgba(255,100,20,.22); animation: ofGlow 2.6s ease-in-out infinite; }
@keyframes ofGlow { 50% { box-shadow: 0 0 0 7px rgba(255,120,30,.16), 0 22px 64px rgba(255,100,20,.34); } }
.of-flames { position: absolute; left: 0; right: 0; bottom: -10px; height: 90px; pointer-events: none; opacity: .55; }
.of-flames i { position: absolute; bottom: -30px; width: 46%; height: 90px; border-radius: 50% 50% 0 0; background: radial-gradient(60% 100% at 50% 100%, #ff7a1a, rgba(255,60,20,.0) 70%); filter: blur(10px); animation: ofFlame 2.2s ease-in-out infinite; }
.of-flames i:nth-child(1) { left: -8%; } .of-flames i:nth-child(2) { left: 30%; animation-delay: -.8s; background: radial-gradient(60% 100% at 50% 100%, #ffc24a, rgba(255,140,20,0) 70%); } .of-flames i:nth-child(3) { right: -8%; animation-delay: -1.5s; }
@keyframes ofFlame { 0%,100% { transform: scaleY(.85) translateY(6px); } 50% { transform: scaleY(1.15) translateY(-4px); } }
.of-tag { position: relative; display: inline-block; padding: 6px 14px; border-radius: 99px; background: linear-gradient(90deg, #ff7a1a, #ffc24a); color: #2a1100; font: 900 12px var(--font-body, Inter, sans-serif); letter-spacing: 1.2px; }
.of-title { position: relative; margin: 12px 0 4px; font: 900 30px/1.1 var(--font-display, Anton, Impact, sans-serif); text-transform: uppercase; color: #fff; }
.of-title b { color: #ffc24a; }
.of-day { position: relative; margin: 0 0 12px; font-weight: 800; font-size: 16px; color: #ffe2b8; }
.of-day small { display: block; margin-top: 2px; font-weight: 600; font-size: 12px; color: #c9b6a0; }
.of-list { position: relative; list-style: none; margin: 0 auto 14px; padding: 0; display: grid; gap: 6px; max-width: 360px; text-align: left; }
.of-list li { padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.07); font-weight: 700; font-size: 14px; color: #fff; }
.of-btn { position: relative; width: 100%; padding: 16px; border: 0; border-radius: 16px; cursor: pointer; font: 900 18px var(--font-body, Inter, sans-serif); color: #2a1100; background: linear-gradient(90deg, #ff9a2a, #ffd04a); box-shadow: 0 8px 24px rgba(255,140,30,.45); animation: ofPulse 1.6s ease-in-out infinite; }
@keyframes ofPulse { 50% { transform: scale(1.025); } }
.of-micro { position: relative; margin: 10px 0 0; font-size: 12px; color: #b9a893; }
.of-link { color: #ffc24a; }
@media (prefers-reduced-motion: reduce) { .offer-fire, .of-flames i, .of-btn { animation: none; } }

/* ---------- Accueil : IA spécialisée football ---------- */
.ah-title em { font-style: normal; background: var(--ah-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ah-title u { text-decoration: none; background: linear-gradient(transparent 62%, rgba(36,221,151,.38) 62%); }
.ah-scan { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ah-scan span { position: relative; padding: 6px 12px; border-radius: 99px; font: 800 11.5px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: rgba(36,221,151,.12); border: 1px solid rgba(36,221,151,.35); overflow: hidden; }
.ah-scan span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); animation: ahScan 3.4s ease-in-out infinite; }
.ah-scan span:nth-child(2)::after { animation-delay: .5s; } .ah-scan span:nth-child(3)::after { animation-delay: 1s; } .ah-scan span:nth-child(4)::after { animation-delay: 1.5s; } .ah-scan span:nth-child(5)::after { animation-delay: 2s; }
@keyframes ahScan { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(120%); } }
.ai-sec { margin: 18px 0; }
.ai-grid { display: grid; gap: 10px; margin-top: 14px; }
.ai-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 20px; background: linear-gradient(160deg, rgba(36,221,151,.10), rgba(155,140,255,.07)); border: 1px solid rgba(36,221,151,.28); }
.ai-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; font-size: 24px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.ai-card strong { display: block; font-size: 16px; font-weight: 800; }
.ai-card p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.ai-card p b { color: var(--safe); }
.ai-grad { background: linear-gradient(135deg, #24dd97, #38d9f0 55%, #9b8cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 700px) { .ai-grid { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .ah-scan span::after { animation: none; } }

/* ---------- Coupons haute cote ---------- */
.cg-sec, .pl-sec { margin: 20px 0; }
.cg-tabs { display: flex; gap: 8px; margin: 12px 0; }
.cg-tabs button { flex: 1; padding: 12px 0; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font: 900 17px var(--font-body, Inter, sans-serif); cursor: pointer; }
.cg-tabs button.is-on { background: linear-gradient(135deg, #ffb02a, #ff6a2a); color: #210c00; border-color: transparent; box-shadow: 0 8px 22px rgba(255,120,30,.35); }
.cg-card { padding: 16px; border-radius: 22px; background: linear-gradient(160deg, rgba(255,140,40,.10), rgba(155,140,255,.06)); border: 1px solid rgba(255,150,50,.4); }
.cg-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.cg-head div { padding: 10px 4px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.cg-head span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.cg-head b { display: block; margin-top: 4px; font: 900 26px var(--font-display, Anton, sans-serif); color: var(--gold); }
.cg-head b.cg-risk-m { color: var(--safe); } .cg-head b.cg-risk-h { color: var(--balanced); } .cg-head b.cg-risk-x { color: var(--risky); }
.cg-legs { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; }
.cg-legs li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.cg-legs li strong { display: block; font-size: 14px; } .cg-legs li small { font-size: 12.5px; color: var(--ink-soft); } .cg-legs li small i { color: var(--safe); font-style: normal; font-weight: 800; }
.cg-legs li b { font: 900 18px var(--font-display, Anton, sans-serif); color: var(--gold); }
.cg-legs li.is-locked { filter: saturate(.7); } .cg-legs li.is-locked em { font-style: normal; color: var(--ink-soft); font-size: 12px; }
.cg-warn { margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.cg-copy { width: 100%; padding: 14px; border-radius: 14px; border: 1px solid rgba(36,221,151,.5); background: rgba(36,221,151,.12); color: var(--safe); font-weight: 800; font-size: 15px; cursor: pointer; }
.cg-empty { padding: 10px 4px; font-size: 14px; color: var(--ink-soft); text-align: center; }
/* ---------- Formules ---------- */
.pl-grid { display: grid; gap: 10px; margin-top: 12px; }
.pl-card { position: relative; padding: 16px; border-radius: 20px; background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--line); }
.pl-card.is-hot { border: 2px solid rgba(255,140,40,.8); background: linear-gradient(160deg, rgba(255,120,30,.14), rgba(255,255,255,.03)); box-shadow: 0 14px 40px rgba(255,100,20,.2); }
.pl-flag { position: absolute; top: -11px; right: 14px; padding: 4px 12px; border-radius: 99px; background: linear-gradient(90deg, #ff7a1a, #ffc24a); color: #2a1100; font-weight: 900; font-size: 11.5px; }
.pl-flag-b { background: linear-gradient(90deg, #24dd97, #38d9f0); color: #04221a; }
.pl-name { display: block; font-weight: 800; font-size: 15px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.pl-price { display: block; margin-top: 4px; font: 900 32px var(--font-display, Anton, sans-serif); color: var(--ink); } .pl-price small { font-size: 16px; }
.pl-day { font-size: 12.5px; font-weight: 700; color: var(--gold); }
.pl-card ul { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.pl-btn { width: 100%; padding: 13px; border-radius: 14px; border: 0; cursor: pointer; font-weight: 900; font-size: 15px; background: linear-gradient(90deg, #24dd97, #38d9f0); color: #04221a; }
.pl-card.is-hot .pl-btn { background: linear-gradient(90deg, #ff9a2a, #ffd04a); color: #2a1100; }
.pl-btn.pl-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.pl-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-soft); text-align: center; }
@media (min-width: 760px) { .pl-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Buteurs du jour ---------- */
.sc-bar { display: block; height: 6px; margin-top: 6px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.sc-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f2c14e, #ff8a2a); }
.sc-record { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; gap: 2px 10px; margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; background: rgba(242,193,78,.10); border: 1px solid rgba(242,193,78,.4); }
.sc-record span { font-weight: 800; font-size: 14px; } .sc-record b { font-size: 20px; color: var(--gold); }
.sc-record em { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--ink-soft); }
.sc-hits { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 4px; scrollbar-width: none; }
.sc-hits-t { flex: none; align-self: center; font-weight: 800; font-size: 12.5px; color: var(--safe); }
.sc-hit { flex: none; display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: rgba(36,221,151,.12); border: 1px solid rgba(36,221,151,.45); font-size: 13px; }
.sc-hit small { font-size: 11px; color: var(--ink-soft); }

.cg-legs li.is-started { opacity: .6; }

.cg-head { grid-template-columns: repeat(2, 1fr); }

/* ---------- Relances (nudges) et invitation a s'inscrire ---------- */
.nudge { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 1150; display: flex; align-items: center; gap: 10px; width: min(94vw, 440px); padding: 10px 10px 10px 12px; border-radius: 18px; background: var(--card, #10161e); color: var(--ink); border: 1px solid color-mix(in srgb, var(--pitch) 45%, transparent); box-shadow: 0 16px 40px rgba(0,0,0,.35); transform: translate(-50%, 140%); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.nudge.is-in { transform: translate(-50%, 0); opacity: 1; }
.nudge-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px; border-radius: 12px; background: color-mix(in srgb, var(--pitch) 14%, transparent); }
.nudge-txt { flex: 1; min-width: 0; } .nudge-txt strong { display: block; font-size: 14px; font-weight: 800; } .nudge-txt small { display: block; font-size: 12px; color: var(--ink-soft); line-height: 1.3; }
.nudge-cta { flex: none; padding: 9px 12px; border-radius: 12px; border: 0; cursor: pointer; font-weight: 800; font-size: 13px; color: #04221a; background: linear-gradient(90deg, #24dd97, #38d9f0); }
.nudge-x { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; background: transparent; color: var(--ink-soft); font-size: 20px; line-height: 1; }
.signup-sheet { position: fixed; inset: 0; z-index: 1180; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,0); transition: background .3s; }
.signup-sheet.is-in { background: rgba(0,0,0,.55); }
.ss-card { position: relative; width: min(100vw, 480px); padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: var(--card, #10161e); color: var(--ink); text-align: center; transform: translateY(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); border-top: 2px solid color-mix(in srgb, var(--pitch) 55%, transparent); }
.signup-sheet.is-in .ss-card { transform: none; }
.ss-x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-soft); font-size: 24px; cursor: pointer; }
.ss-tag { display: inline-block; padding: 6px 12px; border-radius: 99px; font-weight: 800; font-size: 12px; color: var(--safe); background: color-mix(in srgb, var(--pitch) 14%, transparent); }
.ss-card h3 { margin: 10px 0 6px; font: 900 28px/1.1 var(--font-display); text-transform: uppercase; }
.ss-card p { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); }
.ss-card ul { list-style: none; margin: 0 auto 14px; padding: 0; display: grid; gap: 6px; max-width: 340px; text-align: left; }
.ss-card li { padding: 9px 12px; border-radius: 12px; font-weight: 700; font-size: 14px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ss-cta { width: 100%; padding: 15px; border: 0; border-radius: 16px; cursor: pointer; font-weight: 900; font-size: 16px; color: #04221a; background: linear-gradient(90deg, #24dd97, #38d9f0); box-shadow: 0 8px 22px rgba(36,221,151,.35); }
.ss-later { margin-top: 8px; padding: 8px; border: 0; background: transparent; color: var(--ink-soft); font-weight: 700; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .nudge, .ss-card, .signup-sheet { transition: none; } }

/* ---------- Tutoriels video ---------- */
.tuto-sec { margin: 20px 0; }
.tuto-tabs { display: flex; gap: 8px; margin: 12px 0; }
.tuto-tabs button { flex: 1; padding: 11px 6px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font-weight: 800; font-size: 14px; cursor: pointer; }
.tuto-tabs button.is-on { background: linear-gradient(90deg, #24dd97, #38d9f0); color: #04221a; border-color: transparent; }
.tuto-player { display: flex; justify-content: center; border-radius: 22px; overflow: hidden; background: #06080b; border: 1px solid color-mix(in srgb, var(--pitch) 35%, transparent); }
.tuto-player video { display: block; width: 100%; max-width: 380px; aspect-ratio: 9 / 16; background: #06080b; }
/* Bouton fermer du paiement : bien visible sur mobile */
.pw .paywall-close { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; z-index: 5; }
.pw .paywall-close svg { width: 18px; height: 18px; stroke: #fff; }

/* ---------- Installer sur l'ecran d'accueil ---------- */
.inst-sec { margin: 20px 0; padding: 16px; border-radius: 22px; background: color-mix(in srgb, var(--pitch) 7%, transparent); border: 1px solid color-mix(in srgb, var(--pitch) 35%, transparent); }
.inst-head { display: flex; gap: 12px; align-items: center; }
.inst-ico img { display: block; border-radius: 14px; }
.inst-head strong { display: block; font-size: 16px; font-weight: 800; } .inst-head small { display: block; font-size: 13px; color: var(--ink-soft); }
.inst-sec .install-steps { margin-top: 4px; }

/* ---------- Paiement : etape pays ---------- */
.pw .pw-country-sub { margin: 0 0 10px; font-size: .88rem; color: rgba(255,255,255,.75); }
.pw .pw-country { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 16px; background: rgba(255,255,255,.06); border: 2px solid rgba(24,224,139,.55); cursor: pointer; }
.pw .pw-country-flag { font-size: 30px; line-height: 1; }
.pw .pw-country select { flex: 1; min-width: 0; height: 50px; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 4px center; color: #fff; font: 800 1.05rem var(--font-body, inherit); appearance: none; -webkit-appearance: none; padding-right: 24px; cursor: pointer; }
.pw .pw-country select option { color: #111; }
.pw .pw-country select:focus { outline: none; }
.pw .pw-dial { flex: none; padding: 0 10px 0 4px; margin-right: 4px; border-right: 1px solid rgba(255,255,255,.18); font-weight: 800; color: #18E08B; }

.pw .pw-local { display: block; margin-top: 4px; font-style: normal; font-weight: 800; font-size: .82rem; color: #ffc24a; }
.pw .pw-local-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(242,193,78,.1); border: 1px solid rgba(242,193,78,.4); font-size: .85rem; color: #ffe2b8; }

/* Compteur de visiteurs du jour, en haut de l'accueil */
.visitors-pulse { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(90deg, #3a0d10, #1a0a0c); border: 1px solid rgba(255,59,64,.55); }
.visitors-pulse[hidden] { display: none; }
.visitors-pulse i { width: 13px; height: 13px; border-radius: 50%; background: #ff3b40; flex: none; box-shadow: 0 0 0 0 rgba(255,59,64,.6); animation: vp-ring 1.4s ease-out infinite; }
.visitors-pulse b { font: 400 38px/1 Anton, Impact, sans-serif; color: #fff; letter-spacing: 1px; }
.visitors-pulse span { color: #ffb3b5; font: 700 15px/1.25 Inter, sans-serif; }
.visitors-pulse em { margin-left: auto; font: 800 11px Inter, sans-serif; letter-spacing: 2px; color: #ff3b40; font-style: normal; }
@keyframes vp-ring { 0% { box-shadow: 0 0 0 0 rgba(255,59,64,.6); } 100% { box-shadow: 0 0 0 12px rgba(255,59,64,0); } }
body.live .visitors-pulse { display: none; }

/* Lien vers la prediction express (/predire), en haut de l'accueil */
.express-cta { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--ink); background: linear-gradient(90deg, rgba(36,221,151,.16), rgba(242,193,78,.10)); border: 1px solid rgba(36,221,151,.45); }
.express-cta > span { font-size: 26px; }
.express-cta div { flex: 1; min-width: 0; }
.express-cta b { display: block; font-size: 16px; }
.express-cta small { display: block; color: var(--soft, #9fb0bd); font-size: 12.5px; }
.express-cta em { flex: none; font-style: normal; font-weight: 800; font-size: 13px; background: var(--gold); color: #1a1203; border-radius: 10px; padding: 8px 12px; }
body.live .express-cta { display: none; }

/* HALL30 Express : grande carte en haut de l'accueil */
.express-hero { display: block; position: relative; margin: 6px 0 14px; padding: 18px 18px 16px; border-radius: 22px; text-decoration: none; color: var(--ink); overflow: hidden;
  background: radial-gradient(420px 200px at 100% 0, rgba(242,193,78,.28), transparent 70%), linear-gradient(135deg, rgba(36,221,151,.22), rgba(36,221,151,.06)); border: 1.5px solid rgba(36,221,151,.6); box-shadow: 0 10px 34px rgba(36,221,151,.15); }
.express-hero .eh-tag { display: inline-block; font: 800 11px Inter, sans-serif; letter-spacing: 1.5px; color: #04140c; background: var(--gold); border-radius: 99px; padding: 5px 11px; }
.express-hero .eh-title { display: block; margin-top: 10px; font: 400 40px/1 Anton, Impact, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.express-hero .eh-title b { color: var(--pitch, #24dd97); font-weight: 400; }
.express-hero .eh-sub { display: block; margin-top: 8px; font-weight: 600; font-size: 15px; color: var(--soft, #9fb0bd); }
.express-hero .eh-btn { display: block; margin-top: 14px; text-align: center; font: 800 16px Inter, sans-serif; color: #1a1203; background: var(--gold); border-radius: 14px; padding: 13px; animation: eh-pulse 2.2s ease-in-out infinite; }
@keyframes eh-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }
body.live-mode .express-hero { display: none; }

/* Barre communaute (Telegram + WhatsApp) sous l'en-tete, sur chaque ecran */
.comm-bar { margin: 8px 12px 4px; padding: 10px 12px 12px; border-radius: 18px; background: linear-gradient(135deg, rgba(42,171,238,.16), rgba(37,211,102,.14)); border: 1px solid rgba(255,255,255,.14); }
.comm-title { font-weight: 800; font-size: 14px; color: var(--ink); margin: 0 2px 8px; }
.comm-title small { display: block; font-weight: 600; font-size: 12px; color: var(--soft, #9fb0bd); margin-top: 1px; }
.comm-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
.comm-btn { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 10px; border-radius: 14px; text-decoration: none; color: #fff; font-weight: 800; position: relative; }
.comm-btn.is-tg { background: #229ED9; } .comm-btn.is-wa { background: #1FA855; }
.comm-btn span { font-size: 20px; line-height: 1; }
.comm-btn b { font-size: 13px; line-height: 1.15; flex: 1; min-width: 0; }
.comm-btn em { font-style: normal; font-size: 11px; background: rgba(255,255,255,.22); border-radius: 99px; padding: 4px 8px; flex: none; }
body.live-mode .comm-bar { display: none; }
@media (max-width: 380px) { .comm-btn em { display: none; } }

.comm-btn b small { display: block; font-size: 11px; font-weight: 700; opacity: .85; }

/* Bandeau d'annonce (retour du site) */
.ann-bar { display: flex; align-items: flex-start; gap: 10px; margin: 8px 12px 4px; padding: 12px 14px; border-radius: 14px; background: rgba(36,221,151,.14); border: 1px solid rgba(36,221,151,.55); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.ann-bar span { flex: 1; }
.ann-bar button { flex: none; border: 0; background: transparent; color: var(--ink); font-size: 18px; padding: 0 4px; cursor: pointer; }
body.live-mode .ann-bar { display: none; }