/* ========================================================================== */
/*  ProbWin – app.css (rationalisé)                                           */
/*  - Design tokens                                                           */
/*  - Base + layout                                                           */
/*  - Navigation & hero                                                       */
/*  - Grids & cards                                                           */
/*  - Components (buttons, pills, badges, chips, tables)                      */
/*  - Games rail                                                              */
/*  - Footer & misc                                                           */
/*  - Glass utilities + transitions                                           */
/*  - Results page                                                            */
/* ========================================================================== */


/* ========== 1) DESIGN TOKENS ============================================== */

:root{
  /* Palette de base */
  --bg-dark: #06080C;
  --bg-panel: #0A0E14;
  --obsidian: #0B0F14;
  --slate-900: #111827;
  --slate-800: #1F2937;
  --border: #2A3748;

  /* Texte */
  --text: #E6EAF2;
  --muted: #94A3B8;
  --white: #FFF;
  --ink: #0B1220;
  --ink-muted: #475569;
  --card-border-light: #E2E8F0;

  /* Gold - Palette unifiée */
  --gold-primary: #FFD700;
  --gold-light: #FFE566;
  --gold-dark: #B8860B;
  --gold-glow: rgba(255, 215, 0, 0.5);
  --gold-600: #FFC73A;
  --amber-700: #FF8C1A;
  --gold-sweep: linear-gradient(45deg, #FFC73A, #FF8C1A);

  /* États */
  --success: #16A34A;
  --danger: #EF4444;
  --info: #A3B4CF;

  /* Ombres & rayons */
  --shadow: 0 6px 24px rgba(0,0,0,.35);
  --shadow-soft: 0 6px 18px rgba(2,6,23,.08);
  --radius: 14px;
  --radius-lg: 18px;

  /* Anneaux glass */
  --ring-weak: rgba(255,255,255,.08);
  --ring: rgba(255,255,255,.12);
  --ring-strong: rgba(255,255,255,.18);

  /* Layout */
  --container-max: 1200px;
  --nav-height: 88px;
  --stick-top: 88px;

  /* Z-Index Scale */
  --z-banner: 900;
  --z-navbar: 1000;
  --z-mobile-overlay: 1001;
  --z-mobile-menu: 1002;
  --z-modal: 2000;
  --z-cookie: 2500;
}


/* ========== 2) BASE & LAYOUT ============================================= */

*{ box-sizing:border-box }

html,body{
  margin:0; padding:0; background:var(--obsidian); color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none }
a:focus-visible, button:focus-visible { outline:2px solid var(--gold-600); outline-offset:2px }

.container{ max-width:var(--container-max); margin:0 auto; padding:0 16px }
.home .container,.wide .container{ max-width:100% }
.row{ display:flex; gap:12px; align-items:center }


/* ========== 3) NAVIGATION & HERO ========================================= */

.offer{
  background:var(--gold-sweep); color:#141a22; text-align:center;
  padding:8px 12px; font-weight:700; letter-spacing:.2px;
}
.offer a{ color:#0b0f14; text-decoration:underline }

/* Old topbar/nav styles removed - now in navbar.css */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  background: rgba(255,255,255,0.06);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  transition: .2s;
}
.btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.12); }
.btn-primary {
  background: var(--gold-sweep);
  border-color: transparent;
  color: #0B0F14;
}
/* Secondary button - high visibility on dark/image backgrounds */
.btn-secondary {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}


.hero{
  position:relative; padding:96px 0 60px; background:url('/assets/hero.jpg') center/cover no-repeat;
}
.hero::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(1200px 420px at 50% 20%,rgba(0,0,0,.55),transparent 55%),
    linear-gradient(180deg,rgba(11,15,20,.86) 0%,rgba(11,15,20,.94) 60%,rgba(11,15,20,1) 100%);
}
.hero .container{ position:relative; z-index:1; text-align:center }
.hero h1{ font-size:48px; line-height:1.12; margin:0 0 14px; text-shadow:0 4px 18px rgba(0,0,0,.35) }
.hero p{ color:#D7DFEA; max-width:960px; margin:0 auto 20px }


/* ========== 4) GRIDS & CARDS ============================================= */

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

.card{
  background:var(--slate-800); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px; box-shadow:var(--shadow);
}
.card.clickable{ cursor:pointer; transition:transform .05s ease-in, border-color .2s }
.card.clickable:hover{ transform:translateY(-1px); border-color:rgba(255,199,58,.35) }

.stage{
  max-width:var(--container-max); margin:18px auto 0;
  background:var(--slate-900); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
}


/* ========== 5) COMPONENTS  =============================================== */

/* ————— Pills (base unique) ————— */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px; font-size:12px;
  border:1px solid var(--border); background:var(--slate-900); color:var(--text);
}
.pill.lg{ font-size:13px; padding:4px 10px }
.pill.over{ border-color:rgba(22,163,74,.55); color:#166534; background:#E9F7EF }
.pill.under{ border-color:rgba(239,68,68,.55); color:#9F1239; background:#FDE8EC }

/* ————— Badges (générique + variantes) ————— */
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700 }
.card.match .badge{
  background:#F1F5F9; border:1px solid var(--card-border-light); color:#1E293B;
}
.badge.edge-pos{ background:#E9F7EF; border:1px solid #86EFAC; color:#166534 }
.badge.edge-neg{ background:#FDE8EC; border:1px solid #FCA5A5; color:#9F1239 }

/* Badges probabilités / edges (déjà utilisés) */
.badge-prob{ color:#0b1020 }
.badge-prob.prob-low{ background:#ffd6d6 }
.badge-prob.prob-med{ background:#ffe8b3 }
.badge-prob.prob-high{ background:#e5f3c4 }
.badge-prob.prob-very-high{ background:#c8f5c8 }
.badge-prob.prob-unknown{ background:#e0e0e0 }

.badge-edge{ color:#0b1020 }
.badge-edge.edge-weak{ background:#ececf6 }
.badge-edge.edge-solid{ background:#dfe7ff }
.badge-edge.edge-strong{ background:#cfe4ff }
.badge-edge.edge-very-strong{ background:#b6e3ff }
.badge-edge.edge-elite{ background:#a1ffd6 }
.badge-edge.edge-unknown{ background:#e0e0e0 }

.badge-pick{ border:1px solid var(--border); padding:2px 6px; border-radius:10px; font-size:12px }
.badge-pick.f5{ background:#102a43; color:#8bd3ff }
.badge-pick.ft{ background:#2a1e3f; color:#d6b3ff }

/* ————— Chips résultat (WIN/LOSE/PUSH) ————— */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-weight:700; font-size:12px; border:1px solid rgba(255,255,255,.12) }
.chip-over{  background:#E9F7EF; color:#166534; border-color:#86EFAC }
.chip-under{ background:#FDE8EC; color:#9F1239; border-color:#FCA5A5 }

.pill.win{    border-color:rgba(22,163,74,.55);  color:#166534;  background:#E9F7EF }
.pill.lose{   border-color:rgba(239,68,68,.55); color:#9F1239;  background:#FDE8EC }
.pill.push{   border-color:rgba(148,163,184,.55); color:#0b1220; background:#E5E7EB }
.pill.neutral{border-color:rgba(148,163,184,.35); color:#cbd5e1; background:rgba(148,163,184,.12) }

/* ————— Tables ————— */
.table-responsive{ overflow:auto }
.table-glass{ width:100%; border-collapse:separate; border-spacing:0 }
.table-glass thead th{
  position:sticky; top:0; z-index:1;
  background:rgba(17,24,39,.60);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  text-align:left; font-weight:700; font-size:13px; padding:10px; border-bottom:1px solid var(--border);
}
.table-glass tbody td{ padding:10px; border-bottom:1px solid rgba(255,255,255,.06) }
.table-glass tbody tr:hover{ background:rgba(255,255,255,.03) }
.table-glass .num{ text-align:right }
.mono{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" }

.matchcell .matchline{ display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.matchcell .away,.matchcell .home{ font-weight:700 }
.matchcell .at{ color:var(--muted) }


/* ========== 6) GAMES RAIL ================================================= */

/* Games Rail */
.gamesrail-wrap{
  background:linear-gradient(90deg,#0B0F14,#111827);
  border-bottom:1px solid var(--border);
  position:relative;
}
/* Fade masks on edges */
.gamesrail-wrap::before,
.gamesrail-wrap::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:80px;
  z-index:10;
  pointer-events:none;
}
.gamesrail-wrap::before{
  left:0;
  background:linear-gradient(90deg, #0B0F14, transparent);
}
.gamesrail-wrap::after{
  right:0;
  background:linear-gradient(270deg, #0B0F14, transparent);
}
.gamesrail{
  display:flex;
  gap:10px;
  align-items:stretch;
  justify-content:center;
  overflow-x:auto;
  padding:20px 100px;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.gamesrail::-webkit-scrollbar{ display:none }
/* Mobile: no padding, swipe to scroll */
@media(max-width:768px){
  .gamesrail{ padding:16px 20px; justify-content:flex-start }
  .gamesrail-wrap::before, .gamesrail-wrap::after{ width:30px }
}

.game-pill{
  min-width:200px; flex-shrink:0;
  background:linear-gradient(135deg, rgba(15,23,42,0.95) 0%, rgba(30,41,59,0.9) 100%);
  border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:16px 20px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}
.game-pill:hover{
  border-color:rgba(99,102,241,0.4);
  box-shadow:0 8px 30px rgba(99,102,241,0.15);
  transform: translateY(-2px);
}
.game-pill .teams-row{ display:flex; align-items:center; justify-content:center; gap:16px; width:100%; }
.game-pill .team-col{ display:flex; flex-direction:column; align-items:center; gap:8px; min-width:70px; }
.game-pill .team-col .name{
  font-weight:700; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:13px; color:#fff; letter-spacing:0.3px;
}
.game-pill .team-col .team-logo{ width:56px; height:56px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3)); }
.game-pill .team-col .team-logo[src$=".svg"]{ transform:scale(1.35); }
.game-pill .vs-badge{
  font-size:18px; font-weight:700; color:rgba(255,255,255,0.5);
  text-transform:uppercase;
}
.game-pill .game-info{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.game-pill .sport-badge{
  padding:4px 10px; border-radius:8px; font-size:10px; font-weight:700;
  letter-spacing:0.5px; text-transform:uppercase;
}
.game-pill .game-time{ font-size:12px; font-weight:500; color:rgba(255,255,255,0.7); }
.game-pill .mid{ display:none; } /* Hide old mid */
.game-pill.no-games{ min-width:300px; justify-content:center; color:rgba(255,255,255,0.6); font-size:14px; }
.date-badge{
  display:flex; align-items:center; padding:8px 16px; margin-right:8px;
  background:linear-gradient(135deg, rgba(99,102,241,0.2) 0%, rgba(139,92,246,0.2) 100%);
  border:1px solid rgba(99,102,241,0.3); border-radius:12px;
  font-size:12px; font-weight:600; color:#A5B4FC; white-space:nowrap;
  text-transform:capitalize;
}

/* Rail Navigation Arrows */
.rail-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:20;
  background:rgba(15,26,36,0.9);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#fff;
  border:1px solid rgba(255,199,58,0.4);
  border-radius:50%;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all 0.2s ease;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.rail-btn:hover{
  background:rgba(255,199,58,0.2);
  border-color:#FFC73A;
  transform:translateY(-50%) scale(1.1);
}
.rail-btn svg{
  width:18px;
  height:18px;
  stroke-width:2;
}
.rail-btn.left{ left:30px }
.rail-btn.right{ right:30px }
@media(max-width:768px){
  .rail-btn{ display:none }
}


/* ========== 7) FOOTER & MISC ============================================= */
/* Old footer/legalbar styles removed - now in footer.css */

.team-logo{ width:28px; height:28px; object-fit:contain; display:inline-block; margin-right:6px; vertical-align:middle }
.logo-fallback{ width:28px; height:28px; line-height:28px; display:inline-grid; place-items:center; border-radius:50%; background:#16202f; color:#E9EEF8; font-weight:800; margin-right:6px; font-size:12px }

.avatar{ position:relative; margin-left:8px }
.avatar .bubble{ display:inline-flex; width:28px; height:28px; border-radius:50%; align-items:center; justify-content:center; font-weight:600; background:#444; color:#fff; font-size:13px }
.avatar .menu{ position:absolute; right:0; top:36px; background:#fff; border:1px solid #ddd; border-radius:6px; padding:8px; min-width:160px; box-shadow:0 6px 24px rgba(0,0,0,.12) }
.avatar .menu a{ display:block; padding:6px 8px; color:#222; text-decoration:none }
.avatar .menu a:hover{ background:#f6f6f6 }
.avatar .menu hr{ border:none; border-top:1px solid #eee; margin:6px 0 }


/* ========== 8) GLASS UTILITIES & TRANSITIONS ============================== */

:root{
  --glass-bg: rgba(255,255,255,0.04);
  --glass-bg-strong: rgba(255,255,255,0.08);
  --glass-border: var(--ring);
  --glass-border-strong: var(--ring-strong);
  --shadow-color: 0,0,0;
}
.glass{
  background:var(--glass-bg); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 30px rgba(var(--shadow-color),0.35);
  border-radius:16px;
}
.glass-strong{
  background:var(--glass-bg-strong); border-bottom:1px solid var(--glass-border-strong);
  -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px);
}
.glass-card{
  background:var(--glass-bg); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
  border-radius:var(--radius-lg);
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 40px rgba(var(--shadow-color),0.40);
}

.scale-in{ animation:scale-in 320ms ease-out both }
@keyframes scale-in{ from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)} }

.lift{ transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease }
.lift:hover{ transform:translateY(-2px); box-shadow:0 16px 44px rgba(var(--shadow-color),0.45) }

.transition-smooth{ transition:all 200ms ease }

.section-gradient{ position:relative; isolation:isolate }
.section-gradient::before{
  content:""; position:absolute; inset:-10% -20% -20% -20%;
  background:
    radial-gradient(800px 400px at 50% -10%, rgba(245,153,0,0.18), transparent 60%),
    radial-gradient(700px 400px at 120% 10%, rgba(22,28,56,0.35), transparent 50%),
    radial-gradient(600px 300px at -20% 20%, rgba(8,12,37,0.35), transparent 50%);
  filter:blur(20px); z-index:-1;
}
.gradient-ring{ position:relative }
.gradient-ring::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(245,153,0,0.55), rgba(255,255,255,0.08));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.hr-glass{ height:1px; background:linear-gradient(to right, transparent, rgba(255,255,255,0.14), transparent) }

.container-narrow{ max-width:56rem; margin-inline:auto; padding-inline:2rem }
.container-wide{   max-width:80rem; margin-inline:auto; padding-inline:2rem }


/* ========== 9) RESULTS PAGE ============================================== */

.results-header{ padding:16px 16px 8px; margin-top:12px }
.results-header .head-row{ display:flex; align-items:baseline; gap:12px }
.results-header .title{ margin:0 }
.results-header .sub{ font-size:14px }

.kpis-grid{ grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin-top:12px }
.kpi{ padding:14px }
.kpi .kpi-value{ font-size:24px; font-weight:800; letter-spacing:.2px }

/* Filtres */
.filters{
  display:grid; gap:12px; padding:14px; align-items:center; grid-template-columns:1fr;
  margin-top:16px; /* séparation claire du header résultats */
}
.filters.sticky{ position:sticky; top:var(--stick-top); z-index:60 }

.seg-group{ display:grid; grid-template-columns:130px 1fr; align-items:center; gap:10px }
.seg-label{ font-size:13px }
.seg{ display:flex; flex-wrap:wrap; gap:8px }

.pill-toggle{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; cursor:pointer }
.pill-toggle input{ display:none }
.pill-toggle.active, .pill-toggle:hover{ border-color:rgba(255,199,58,.45); background:rgba(255,255,255,.08) }

.filters-actions{ margin-left:auto }
@media (min-width:960px){ .filters{ grid-template-columns:1fr 1fr 1fr 1fr auto } }

/* Charts */
.results-charts{ grid-template-columns:1fr; gap:14px; margin:18px 0 }
.results-charts .twin{ grid-template-columns:1fr 1fr; gap:14px }
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; padding:8px 12px }
.card-title, .card-head .muted{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Pas de lift sur charts (évite reflow Chart.js) */
.no-lift.lift:hover{ transform:none }
.chart-card{ overflow:hidden }

/* Hauteurs fixes graphiques */
.chart-fixed{ position:relative; width:100%; height:220px }
.chart-fixed.h-220{ height:220px }   /* Bankroll */
.chart-fixed.h-160{ height:160px }   /* Bar charts */
.chart-fixed canvas{ width:100%!important; height:100%!important; display:block }

/* Tableau */
.table-head{ display:flex; align-items:baseline; justify-content:space-between; padding:6px 6px 10px }
.small{ font-size:12px }

/* Mode densité réduite (optionnel) */
.results.dense .kpi{ padding:10px }
.results.dense .table-glass thead th{ padding:8px }
.results.dense .table-glass tbody td{ padding:8px }
.results.dense .chart-fixed.h-220{ height:180px }
.results.dense .chart-fixed.h-160{ height:140px }



/* ========================================================================== */
/* PRICING (ProbWin) — Styles spécifiques & animations                        */
/* Inspiré du layout 21st.dev / pricing                                       */
/* ========================================================================== */

:root{
  --pw-ink:#0B0F14;
  --pw-bg:#0E1218;
  --pw-card:#121823;
  --pw-border:rgba(255,255,255,.08);
  --pw-muted:#9fb0c8;
  --pw-white:#fff;
  --pw-grad1:#ff8a00;
  --pw-grad2:#ff5f1f;
  --pw-ring:#ffc73a;
  --pw-shadow: 0 10px 30px rgba(0,0,0,.35);
  --pw-card-hot:#16202f; /* carte PRO un peu plus claire */
}

.container-wide{ max-width:1180px; margin:0 auto; padding:0 20px; }

/* ---------- HERO ---------- */
.pricing-hero{
  padding:40px 0 10px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 60%);
  text-align:center;
}
.pricing-title{ font-size:44px; line-height:1.1; font-weight:800; letter-spacing:.2px; }
.pricing-sub{ color:var(--pw-muted); margin-top:8px; }

/* ---------- Toggle (Mensuel / Annuel) ---------- */
.billing-toggle{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.06); border:1px solid var(--pw-border);
  border-radius:999px; padding:6px; margin:18px auto 8px;
}
.bt-pill{
  position:relative; z-index:1; appearance:none; border:0; background:transparent;
  color:var(--pw-white); font-weight:800; padding:10px 16px; border-radius:999px;
  cursor:pointer; white-space:nowrap; transition:color .2s ease;
}
.bt-pill.is-active{ color:var(--pw-ink); }
.bt-pill .save{
  margin-left:6px; font-size:12px; font-weight:900; color:#0B0F14;
  background:linear-gradient(90deg,#ffd35c,#ffb800); padding:2px 8px; border-radius:999px;
}
.bt-slider{
  position:absolute; top:6px; left:6px; height:calc(100% - 12px);
  border-radius:999px; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.25);
  transition:left .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1);
  will-change:left,width;
}

/* ---------- CTA ---------- */
.pricing-ctas{ display:flex; gap:10px; justify-content:center; margin-top:10px; }
.btn.grad{
  background:linear-gradient(90deg,var(--pw-grad1),var(--pw-grad2));
  border:none; color:#111; font-weight:900;
  box-shadow:0 8px 20px rgba(255,115,0,.25);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn.grad:hover,.btn.grad:focus{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(255,115,0,.35), 0 0 0 6px rgba(255,115,0,.12);
}
.btn.ghost{ border:1px solid var(--pw-border); background:transparent; }

/* ---------- Grille ---------- */
.pricing-stage{ padding:24px 0 8px; }
.pricing-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
}
@media (max-width:980px){ .pricing-grid{ grid-template-columns:1fr; } }

/* ---------- Cartes ---------- */
.p-card{
  position:relative; border:1px solid var(--pw-border); background:var(--pw-card);
  border-radius:18px; padding:18px; box-shadow:var(--pw-shadow); overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  opacity:0; transform:translateY(10px); animation:pcard-in .5s cubic-bezier(.2,.8,.2,1) forwards;
}
.p-card:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.45); border-color:rgba(255,255,255,.14); }
.pricing-grid .p-card:nth-child(1){ animation-delay:.05s; }
.pricing-grid .p-card:nth-child(2){ animation-delay:.15s; }
.pricing-grid .p-card:nth-child(3){ animation-delay:.25s; }
@keyframes pcard-in{ to{ opacity:1; transform:translateY(0);} }

.p-hot{
  background:linear-gradient(180deg, rgba(255,199,58,.05), rgba(255,115,0,.03)), var(--pw-card-hot);
  border-color:rgba(255,199,58,.45);
}
.p-hot:hover{ box-shadow:0 18px 44px rgba(255,140,0,.25); }
.p-hot .ring-anim{
  position:absolute; inset:-2px; border-radius:20px; pointer-events:none;
  background:conic-gradient(from 0deg, rgba(255,199,58,.35), rgba(255,115,0,.25), rgba(255,199,58,.35));
  filter:blur(12px); opacity:.18; animation:spin 6s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

.p-head{ position:relative; padding-bottom:6px; }
.p-title{ font-size:22px; font-weight:800; letter-spacing:.2px; }
.p-sub{ color:var(--pw-muted); margin-top:2px; }
.p-badge{
  position:absolute; right:0; top:0; font-size:12px; font-weight:900; color:#111;
  background:linear-gradient(90deg,#ffd35c,#ffb800); padding:4px 10px; border-radius:999px;
}

/* ---------- Bloc prix (fix alignement /mois /an) ---------- */
.p-price{
  display:flex; align-items:flex-end; /* aligne les baselines visuellement */
  gap:8px; margin:6px 0 8px;
}
.p-amount{
  font-size:44px; font-weight:900; letter-spacing:.4px; line-height:1;
  display:inline-block; min-width:3ch;
  transition:transform .25s ease, opacity .25s ease; will-change:transform,opacity;
}
/* conteneur du suffixe avec hauteur fixe pour éviter tout décalage */
.p-cycle{
  position:relative; display:inline-block; min-width:56px; height:1.1em; line-height:1.1;
}
.p-cycle-m,.p-cycle-y{
  position:absolute; left:0; bottom:0; /* collé en bas => pas de décalage vertical */
  opacity:0; transition:opacity .22s ease;
}
body:not(.is-yearly) .p-cycle-m{ opacity:1; }
body.is-yearly .p-cycle-y{ opacity:1; }

.p-billing-note{ color:var(--pw-muted); font-size:12px; margin-top:2px; }
.p-billing-note .bill-y{ display:none; }
body.is-yearly .p-billing-note .bill-m{ display:none; }
body.is-yearly .p-billing-note .bill-y{ display:inline; }

/* ---------- Features (icônes inline sans changer le HTML) ---------- */
.p-feats{ list-style:none; padding-left:0; margin:10px 0 10px; line-height:1.55; }
.p-feats li{ position:relative; padding-left:22px; margin:6px 0; }
.p-feats li::before{
  content:""; position:absolute; left:0; top:.15em; width:16px; height:16px;
  background:linear-gradient(90deg,var(--pw-grad1),var(--pw-grad2));
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat;
}

.p-actions{ display:flex; gap:8px; }
.w-full{ width:100%; }

/* ---------- FAQ (cartes + caret animé) ---------- */
.pricing-faq{ padding:6px 0 30px; }
.faq-title{ font-size:22px; font-weight:800; margin:0 0 8px; }
.faq-grid{ display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:980px){ .faq-grid{ grid-template-columns:1fr; } }
.faq-item{
  border:1px solid var(--pw-border); background:var(--pw-card);
  border-radius:14px; padding:10px 12px;
}
.faq-item summary{
  list-style:none; cursor:pointer; font-weight:800; display:flex; align-items:center; gap:8px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-caret{
  width:16px; height:16px; flex:none; transition:transform .2s ease; background:var(--pw-white);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/14px 14px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/14px 14px no-repeat;
}
.faq-item[open] .faq-caret{ transform:rotate(180deg); }
.faq-item p{ color:var(--pw-muted); margin:6px 0 0; }

/* ---------- Utilitaire ---------- */
.hidden{ display:none !important; }


/* ========================================================================== */
/* HOME (landing) — additions spécifiques                                     */
/* ========================================================================== */

/* Titres & teintes complémentaires */
.title { font-size: 26px; font-weight: 800; margin: 0; }
.muted { color: var(--muted); }

/* Harmonisation des cartes de la landing */
.home .glass-card { padding: 16px; }
.home h3 { margin: 0 0 6px; }

/* Hero : adaptation responsive du texte */
@media (max-width: 780px) {
  .hero h1 { font-size: 34px; }
  .hero p  { font-size: 15px; padding: 0 8px; }
}

/* Billing toggle : meilleure lisibilité état actif */
.billing-toggle .bt-pill.is-active { color: var(--ink); }
.billing-toggle .bt-slider { background: #fff; }

/* Cartes pricing : un peu plus d’air sur mobile */
@media (max-width: 980px){
  .pricing-stage { padding: 14px 0 0; }
  .p-card { padding: 16px; }
}

/* CTA final — équilibre du padding */
.home .glass-card.lift { padding: 24px; }

/* Accessibilité focus */
a.btn:focus-visible { box-shadow: 0 0 0 3px rgba(255,199,58,.35); }

/* Petits helpers */
.small { font-size: 12px; }
.mono  { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }


/* ========== CONFIDENCE STARS SYSTEM ======================================= */
/* Système de confiance visuel adapté par sport/marché                        */

.confidence-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.confidence-stars svg {
  width: 14px;
  height: 14px;
}
.confidence-stars.conf-low svg.star-full { color: #94a3b8; }
.confidence-stars.conf-low svg.star-empty { color: #334155; }
.confidence-stars.conf-medium svg.star-full { color: #fbbf24; }
.confidence-stars.conf-medium svg.star-empty { color: #334155; }
.confidence-stars.conf-high svg.star-full { color: #22c55e; }
.confidence-stars.conf-high svg.star-empty { color: #334155; }

.confidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
}
.confidence-badge.conf-low {
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(100, 116, 139, 0.25);
}
.confidence-badge.conf-medium {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.25);
}
.confidence-badge.conf-high {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

/* Stars compact pour tableaux */
.confidence-stars-sm svg {
  width: 12px;
  height: 12px;
}
.confidence-badge-sm {
  padding: 2px 8px;
  font-size: 10px;
  gap: 4px;
}


/* ========== EXIT INTENT FEEDBACK MODAL ==================================== */
/* Popup non-agressif pour collecter feedback visiteurs                       */

.exit-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.exit-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.exit-modal-content {
  position: relative;
  background: linear-gradient(145deg, #1a1a2e 0%, #16162a 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  max-width: 420px;
  width: 100%;
  padding: 32px 28px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  animation: exitModalIn 0.3s ease-out;
}

@keyframes exitModalIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.exit-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.exit-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.exit-modal-header {
  text-align: center;
  margin-bottom: 24px;
}

.exit-modal-icon {
  color: #6366f1;
  margin-bottom: 16px;
}

.exit-modal-header h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}

.exit-modal-header p {
  color: #94a3b8;
  font-size: 14px;
  margin: 0;
}

/* Radio Options */
.exit-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.exit-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.exit-option:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.3);
}

.exit-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #6366f1;
  cursor: pointer;
}

.exit-option-label {
  color: #e2e8f0;
  font-size: 14px;
  flex: 1;
}

.exit-option:has(input:checked) {
  background: rgba(99, 102, 241, 0.12);
  border-color: #6366f1;
}

/* Email Field (conditional) */
.exit-email-field {
  margin-bottom: 16px;
  animation: slideDown 0.3s ease-out;
}

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

.exit-email-field label {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  margin-bottom: 8px;
}

.exit-email-field input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  transition: border-color 0.2s;
}
.exit-email-field input:focus {
  outline: none;
  border-color: #6366f1;
}
.exit-email-field input::placeholder {
  color: #64748b;
}

/* Textarea */
.exit-textarea-wrap {
  margin-bottom: 20px;
}

.exit-textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s;
}
.exit-textarea:focus {
  outline: none;
  border-color: #6366f1;
}
.exit-textarea::placeholder {
  color: #64748b;
}

/* Submit Button */
.exit-btn-submit {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  text-decoration: none;
}
.exit-btn-submit:hover {
  background: linear-gradient(135deg, #5558e3 0%, #4338ca 100%);
  transform: translateY(-1px);
}
.exit-btn-submit:active {
  transform: translateY(0);
}

/* Success States */
.exit-success-icon {
  text-align: center;
  margin-bottom: 20px;
}

#exitPromoState, #exitThanksState {
  text-align: center;
}

#exitPromoState h3, #exitThanksState h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}

#exitPromoState p, #exitThanksState p {
  color: #94a3b8;
  font-size: 14px;
  margin: 0 0 20px;
}

/* Promo Box */
.exit-promo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(16, 185, 129, 0.08);
  border: 2px dashed #10b981;
  border-radius: 12px;
  margin-bottom: 12px;
}

.exit-promo-code {
  font-family: 'Courier New', monospace;
  font-size: 24px;
  font-weight: 700;
  color: #10b981;
  letter-spacing: 2px;
}

.exit-promo-copy {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 6px;
  color: #10b981;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.exit-promo-copy:hover {
  background: rgba(16, 185, 129, 0.25);
}

.exit-promo-detail {
  color: #64748b !important;
  font-size: 12px !important;
  margin-bottom: 24px !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .exit-modal-content {
    padding: 24px 20px;
    margin: 8px;
  }
  .exit-modal-header h3 {
    font-size: 18px;
  }
  .exit-option {
    padding: 10px 14px;
  }
  .exit-option-label {
    font-size: 13px;
  }
  .exit-promo-code {
    font-size: 20px;
  }
}