/* ============================================================
   FUNPRO — ÉDITION FRTV
   Light premium esport DA: warm paper, black hero cards, heavy
   condensed-italic display, hot red→orange CTA, gold/silver/bronze
   podium banding, magenta progress dots. Football pronos, no money.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Saira+Condensed:wght@600;700;800;900&family=Saira:wght@400;500;600;700&display=swap');

:root{
  /* warm paper surfaces */
  --paper:    #f1efe9;
  --paper-2:  #e8e5dd;
  --card:     #ffffff;
  --card-2:   #faf9f5;
  --ink:      #15171e;   /* near-black hero cards */
  --ink-2:    #1d2230;

  --line:        rgba(20,22,30,.10);
  --line-2:      rgba(20,22,30,.16);
  --line-strong: rgba(20,22,30,.26);

  --text:       #181b23;
  --text-soft:  #5a616f;
  --text-faint: #8a909d;
  --on-ink:     #f3f4f8;
  --on-ink-soft:#aab2c4;

  /* Funpro brand + esport signals */
  --blue:   #2f6bff;
  --blue-2: #5a8bff;
  --gold:   #f4b223;
  --gold-2: #ffd166;
  --silver: #b9c0cc;
  --bronze: #d18a4f;
  --pink:   #e11d6b;
  --green:  #16a34a;
  --red:    #e4002b;

  --hot:     linear-gradient(95deg, #f5443f 0%, #ff8a00 100%);
  --hot-soft:linear-gradient(95deg, rgba(245,68,63,.12), rgba(255,138,0,.12));

  /* tweakable competition accent (drives hero title + active tab) */
  --accent:      #f4b223;
  --accent-ink:  #15171e;

  /* type */
  --font-ui:      "Montserrat";
  --font-display: "Saira Condensed";

  --d: 1;
  --r: 16px;
  --sp-1: calc(4px*var(--d));  --sp-2: calc(8px*var(--d));  --sp-3: calc(12px*var(--d));
  --sp-4: calc(16px*var(--d)); --sp-5: calc(22px*var(--d)); --sp-6: calc(30px*var(--d)); --sp-7: calc(44px*var(--d));
}

.app{
  width:100%; min-height:100vh;
  background:
    radial-gradient(900px 400px at 100% -5%, rgba(47,107,255,.06), transparent 60%),
    var(--paper);
  color:var(--text);
  font-family:var(--font-ui), system-ui, sans-serif;
  font-size:15px; line-height:1.5;
  display:flex; flex-direction:column;
}
.app *{ box-sizing:border-box; }
.app ::selection{ background:var(--blue); color:#fff; }
.tnum{ font-variant-numeric:tabular-nums; }

/* display helpers ------------------------------------------------ */
.disp{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.01em; line-height:.92; margin:0; }
.disp-it{ font-style:italic; }
.h1{ font-family:var(--font-display); font-weight:800; font-size:46px; line-height:.92; text-transform:uppercase; letter-spacing:.005em; margin:0; }
.h2{ font-family:var(--font-display); font-weight:800; font-size:30px; line-height:.96; text-transform:uppercase; margin:0; }
.h3{ font-family:var(--font-display); font-weight:700; font-size:21px; line-height:1.02; margin:0; }
.sub{ font-family:var(--font-ui); font-weight:700; font-size:14px; }
.deck{ color:var(--text-soft); font-size:15.5px; line-height:1.55; margin:0; text-wrap:pretty; }
.kicker{ font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:11.5px; color:var(--text-faint); }
.label{ font-weight:700; text-transform:uppercase; letter-spacing:.07em; font-size:10.5px; color:var(--text-faint); white-space:nowrap; }
.stat{ font-family:var(--font-display); font-weight:800; line-height:.9; font-variant-numeric:tabular-nums; }
.muted{ color:var(--text-faint); } .soft{ color:var(--text-soft); }
.gain{ color:var(--green); } .loss{ color:var(--red); } .gold{ color:#b8830a; } .accentc{ color:var(--blue); }

/* topbar --------------------------------------------------------- */
.topbar{ display:flex; align-items:center; gap:10px; padding:13px 22px; background:var(--card); border-bottom:1px solid var(--line); }
.brand{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.brand__logo{ font-family:var(--font-display); font-weight:900; font-size:24px; letter-spacing:-.01em; white-space:nowrap; line-height:1; }
.brand__logo b{ color:var(--blue); } .brand__logo i{ color:var(--gold); font-style:normal; }
.brand__tag{ font-family:var(--font-ui); font-weight:700; font-size:8.5px; letter-spacing:.1em; color:var(--text-faint); text-transform:uppercase; line-height:1.15; flex:0 0 auto; }
.pillnav{ display:flex; align-items:center; gap:8px; margin-left:14px; flex:0 0 auto; }
.pillnav a{ font-weight:600; font-size:13px; color:var(--text-soft); text-decoration:none; padding:9px 17px; border-radius:11px; white-space:nowrap; display:flex; align-items:center; gap:7px; transition:background .14s, color .14s; }
.pillnav a:hover{ background:var(--paper-2); color:var(--text); }
.pillnav a.on{ background:var(--ink); color:#fff; }
.tb-search{ margin-left:auto; display:flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line-2); border-radius:11px; padding:10px 15px; color:var(--text-faint); flex:0 1 340px; max-width:340px; transition:border-color .14s, box-shadow .14s; }
.tb-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(245,178,35,.16); }
.tb-search input{ flex:1; min-width:0; border:0; background:transparent; outline:none; color:var(--text); font:inherit; font-size:13px; }
.tb-search input::placeholder{ color:var(--text-faint); }
.bigsearch input{ flex:1; min-width:0; border:0; background:transparent; outline:none; color:#fff; font:inherit; font-size:15px; }
.bigsearch input::placeholder{ color:rgba(255,255,255,.6); }
.bigsearch input::-webkit-search-cancel-button,.tb-search input::-webkit-search-cancel-button{ filter:grayscale(1) opacity(.6); }

/* auto-complétion */
.ac-pop{ position:absolute; top:calc(100% + 8px); left:0; z-index:60; min-width:340px; max-width:min(440px,92vw); background:var(--card); color:var(--text); border:1px solid var(--line-2); border-radius:14px; box-shadow:0 22px 54px rgba(0,0,0,.24); overflow:hidden; padding:6px; text-align:left; }
.tb-search .ac-pop{ right:0; left:auto; }
.bigsearch .ac-pop{ left:0; right:0; min-width:0; max-width:none; }
.ac-head{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; color:var(--text-faint); padding:11px 10px 6px; display:flex; align-items:center; gap:7px; }
.ac-head i{ color:var(--accent); font-size:11px; }
.ac-item{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:10px; text-decoration:none; color:var(--text); cursor:pointer; }
.ac-item:hover, .ac-item.is-active{ background:var(--paper-2); }
.ac-item__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ac-item__label{ font-family:var(--font-ui); font-weight:700; font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-item__sub{ font-size:11.5px; color:var(--text-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-thumb{ width:32px; height:32px; border-radius:8px; flex:0 0 auto; display:grid; place-items:center; object-fit:contain; font-family:var(--font-display); font-weight:700; font-size:12px; color:#fff; }
.ac-thumb--ini{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.ac-thumb--icon{ background:var(--paper-2); color:var(--accent); font-size:15px; }
.ac-all{ display:flex; align-items:center; gap:8px; padding:11px 10px; margin-top:4px; border-top:1px solid var(--line); text-decoration:none; color:var(--accent); font-weight:700; font-size:13px; cursor:pointer; }
.ac-all:hover, .ac-all.is-active{ background:var(--paper-2); }
.ac-empty{ padding:16px; text-align:center; color:var(--text-soft); font-size:13px; }
.freepill{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-weight:700; font-size:11px; color:#b8830a; border:1px solid rgba(244,178,35,.5); background:rgba(244,178,35,.12); padding:6px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; flex:0 0 auto; }

/* buttons -------------------------------------------------------- */
.btn{ font-family:var(--font-ui); font-weight:700; font-size:13.5px; padding:11px 18px; border-radius:11px; border:1px solid var(--line-2); background:var(--card); color:var(--text); cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none; line-height:1; white-space:nowrap; transition:background .14s, border-color .14s, box-shadow .14s, filter .14s; }
.btn:hover{ border-color:var(--line-strong); }
.btn--hot{ background:var(--hot); color:#fff; border:0; box-shadow:0 8px 20px rgba(245,68,63,.28); }
.btn--hot:hover{ filter:brightness(1.04) saturate(1.05); box-shadow:0 11px 24px rgba(245,68,63,.36); }
.btn--dark{ background:var(--ink); color:#fff; border:0; }
.btn--blue{ background:var(--blue); color:#fff; border:0; box-shadow:0 8px 20px rgba(47,107,255,.25); }
.btn--outline{ background:transparent; border:1.5px solid var(--red); color:var(--red); }
.btn--ghost{ background:transparent; border-color:transparent; color:var(--text-soft); }
.btn--sm{ font-size:12.5px; padding:8px 13px; }
.btn--block{ width:100%; justify-content:center; }
/* CTA du footer riche (fond sombre) : secondaire en ghost clair, principal contenu */
.lpfoot__cta .row{ gap:14px; }
.lpfoot__cta .btn{ padding:14px 24px; font-size:14px; border-radius:12px; }
.lpfoot__cta .btn:hover{ transform:none; }
.lpfoot__cta .btn:not(.btn--hot){ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.22); color:#fff; box-shadow:none; }
.lpfoot__cta .btn:not(.btn--hot):hover{ background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.42); color:#fff; }
.lpfoot__cta .btn--hot,
.lpfoot__cta .btn--hot:hover{ color:#fff; box-shadow:0 6px 16px rgba(245,68,63,.32); }
.icobtn{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--card); border:1px solid var(--line-2); color:var(--text-soft); cursor:pointer; }
.icobtn:hover{ color:var(--text); }

/* layout --------------------------------------------------------- */
.wrap{ width:100%; max-width:1500px; margin:0 auto; padding:24px 32px 56px; }
.row{ display:flex; align-items:center; gap:var(--sp-3); }
.col{ display:flex; flex-direction:column; }
.between{ justify-content:space-between; } .wrapf{ flex-wrap:wrap; }

/* hero (event banner) -------------------------------------------- */
.hero{ position:relative; border-radius:20px; overflow:hidden; background:var(--ink); min-height:238px; display:flex; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(95deg, rgba(11,13,19,.95) 0%, rgba(11,13,19,.82) 42%, rgba(11,13,19,.58) 72%, rgba(11,13,19,.48) 100%); }
.hero__inner{ position:relative; z-index:3; flex:1; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:30px 40px; min-width:0; pointer-events:none; }
.hero__inner a, .hero__inner button, .hero__tenant{ pointer-events:auto; }
.hero__body{ display:flex; flex-direction:column; min-width:0; }
.hero__title{ font-family:var(--font-display); font-weight:900; font-style:italic; text-transform:uppercase; font-size:60px; line-height:.86; letter-spacing:.005em; color:var(--accent); text-shadow:0 2px 6px rgba(0,0,0,.4); margin:0; }
.hero__sub{ color:var(--on-ink); font-size:15px; max-width:46ch; opacity:.94; margin-top:12px; }
.hero__tenant{ flex:0 0 auto; min-width:220px; background:rgba(0,0,0,.42); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:15px 17px; }
.hero__deco{ position:absolute; right:18px; bottom:-30px; z-index:2; font-size:200px; color:rgba(255,255,255,.06); font-family:var(--font-display); font-weight:900; font-style:italic; pointer-events:none; line-height:1; }

/* tabs bar ------------------------------------------------------- */
.tabs{ display:flex; align-items:center; gap:6px; background:var(--paper-2); border-radius:14px; padding:7px; margin-top:14px; }
.tabs a{ font-weight:600; font-size:14px; color:var(--text-soft); text-decoration:none; padding:10px 16px; border-radius:9px; position:relative; white-space:nowrap; }
.tabs a:hover{ color:var(--text); }
.tabs a.on{ color:var(--text); font-weight:700; background:var(--card); box-shadow:0 1px 4px rgba(0,0,0,.06); }
.tabs a.on::after{ content:""; position:absolute; left:16px; right:16px; bottom:5px; height:2.5px; border-radius:2px; background:var(--blue); }
.tabs__sp{ flex:1; }

/* cards ---------------------------------------------------------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:var(--sp-5); }
.card--flat{ box-shadow:none; }
.card--pad{ padding:26px 28px; }
.card--ink{ background:var(--ink); color:var(--on-ink); border-color:transparent; }
.card--ink .muted{ color:var(--on-ink-soft); } .card--ink .soft{ color:var(--on-ink-soft); }
.sect-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.linkmore{ color:var(--red); font-weight:700; font-size:13px; text-decoration:none; display:inline-flex; gap:6px; align-items:center; }

/* progress timeline ---------------------------------------------- */
.prog{ display:flex; gap:8px; flex-wrap:wrap; }
.prog__step{ display:flex; align-items:flex-start; gap:11px; flex:1; min-width:170px; }
.prog__dot{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; color:#fff; font-size:13px; }
.prog__dot--done{ background:var(--pink); }
.prog__dot--now{ background:var(--card); border:2px solid var(--gold); color:var(--gold); }
.prog__dot--wait{ background:var(--card); border:2px solid var(--line-2); color:var(--text-faint); }
.prog__date{ font-size:11.5px; color:var(--text-faint); }
.prog__label{ font-family:var(--font-display); font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.01em; }

/* classement table with podium banding --------------------------- */
.ctable{ width:100%; border-collapse:separate; border-spacing:0 0; }
.ctable th{ font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:10.5px; color:var(--text-faint); text-align:right; padding:10px 12px; white-space:nowrap; }
.ctable th.l{ text-align:left; }
.ctable td{ padding:13px 12px; text-align:right; border-top:1px solid var(--line); vertical-align:middle; white-space:nowrap; }
.ctable td.l{ text-align:left; }
.ctable tr.r1 td{ background:linear-gradient(90deg, rgba(244,178,35,.30), rgba(244,178,35,.12)); border-top-color:transparent; }
.ctable tr.r2 td{ background:linear-gradient(90deg, rgba(185,192,204,.34), rgba(185,192,204,.12)); border-top-color:transparent; }
.ctable tr.r3 td{ background:linear-gradient(90deg, rgba(209,138,79,.30), rgba(209,138,79,.10)); border-top-color:transparent; }
.ctable tr.me td{ background:linear-gradient(90deg, rgba(47,107,255,.12), transparent); }
.ctable tr td:first-child{ border-radius:10px 0 0 10px; }
.ctable tr td:last-child{ border-radius:0 10px 10px 0; }
.ctable .rk{ font-family:var(--font-display); font-weight:800; font-size:20px; width:42px; text-align:center; color:var(--text-faint); }
.ctable tr.r1 .rk{ color:#b8830a; } .ctable tr.r2 .rk{ color:#7c8595; } .ctable tr.r3 .rk{ color:#a96024; }
.ctable .pts{ font-family:var(--font-display); font-weight:800; font-size:19px; }
.ctable--compact td{ padding:10px 8px; }
.ctable--compact th{ padding:8px 8px; }
.ctable--compact .rk{ width:30px; font-size:18px; }
.avstack{ display:inline-flex; }
.avstack > *{ margin-left:-8px; box-shadow:0 0 0 2px var(--card); border-radius:50%; }
.avstack > *:first-child{ margin-left:0; }

/* fixtures ------------------------------------------------------- */
.fix{ display:flex; align-items:center; gap:14px; padding:13px 16px; background:var(--card); border:1px solid var(--line); border-radius:13px; }
.fix:hover{ border-color:var(--line-2); }
.fix__time{ width:52px; text-align:center; }
.team{ display:flex; align-items:center; gap:10px; min-width:0; }
.team__name{ font-family:var(--font-display); font-weight:700; letter-spacing:.005em; white-space:nowrap; }
.score{ display:flex; align-items:center; gap:7px; }
.scorebox{ min-width:34px; height:36px; padding:0 6px; border-radius:9px; background:var(--paper-2); border:1px solid var(--line-2); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:19px; }
.scorebox--res{ background:var(--ink); color:#fff; border-color:transparent; }
.vs{ font-family:var(--font-display); font-weight:800; color:var(--text-faint); font-size:13px; }

/* picks 1 N 2 ---------------------------------------------------- */
.picks{ display:inline-flex; gap:4px; }
.pick{ display:grid; place-items:center; font-family:var(--font-display); font-weight:800; border-radius:8px; background:var(--paper-2); border:1px solid var(--line-2); color:var(--text-soft); }
.picks--md .pick{ width:34px; height:34px; font-size:15px; }
.picks--sm .pick{ width:27px; height:27px; font-size:12.5px; }
.pick.on{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 4px 12px rgba(47,107,255,.3); }
.pick.win{ background:var(--green); border-color:var(--green); color:#fff; }
.pick.miss{ background:var(--card); border-color:var(--line-2); color:var(--text-faint); }

/* stake token ---------------------------------------------------- */
.stake{ display:inline-grid; place-items:center; border-radius:50%; font-family:var(--font-display); font-weight:800; flex:0 0 auto; }
.stake--on{ background:var(--ink); color:var(--gold); box-shadow:inset 0 0 0 2px var(--gold); }
.stake--avail{ background:var(--card); color:var(--text); box-shadow:inset 0 0 0 2px var(--line-2); cursor:pointer; }
.stake--ghost{ background:transparent; color:var(--text-faint); box-shadow:inset 0 0 0 2px var(--line); }
.stake--win{ background:var(--green); color:#fff; box-shadow:none; }

/* avatar + badge ------------------------------------------------- */
.av{ border-radius:50%; display:grid; place-items:center; flex:0 0 auto; font-family:var(--font-display); font-weight:800; color:#fff; }
.av--gold{ color:#3a2a05; }
.badge{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:10.5px; padding:3px 8px; border-radius:6px; line-height:1.35; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.badge--newb{ color:var(--text-faint); background:var(--paper-2); }
.badge--confirme{ color:#3a4150; background:var(--paper-2); }
.badge--pro{ color:#1d4ed8; background:rgba(47,107,255,.14); }
.badge--legende{ color:#1a1d26; background:var(--silver); }
.badge--godlike{ color:#06140d; background:var(--green); }
.badge--founder{ color:#3a2a05; background:linear-gradient(135deg,var(--gold-2),var(--gold)); }

/* chips / misc --------------------------------------------------- */
.chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; background:var(--paper-2); font-size:12.5px; font-weight:600; color:var(--text-soft); white-space:nowrap; }
.chip--live{ background:rgba(228,0,43,.1); color:var(--red); }
.chip--live .dot{ width:7px; height:7px; border-radius:50%; background:var(--red); animation:pulse 1.5s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }
.divider{ height:1px; background:var(--line); border:0; margin:0; }
.tag{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:11px; padding:3px 9px; border-radius:6px; }
.tag--win{ background:rgba(22,163,74,.14); color:var(--green); }
.tag--live{ background:rgba(228,0,43,.12); color:var(--red); }
.tag--soon{ background:var(--paper-2); color:var(--text-soft); }

/* stat tiles ----------------------------------------------------- */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tile{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.tile .stat{ font-size:30px; }

@media (prefers-reduced-motion: reduce){ *{ animation:none!important; } }

/* competition switcher --------------------------------------------- */
.cswitch{ display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.cswitch__pills{ display:flex; gap:8px; flex-wrap:wrap; }
.cpill{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--card); color:var(--text-soft); font-family:var(--font-ui); font-weight:600; font-size:13.5px; cursor:pointer; white-space:nowrap; }
.cpill:hover{ border-color:var(--line-strong); color:var(--text); }
.cpill.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.cpill .dot{ width:7px; height:7px; border-radius:50%; background:var(--red); }
.cpill__ic{ font-size:14px; }

/* interactive tabs (buttons) --------------------------------------- */
.tabs button{ font-family:var(--font-ui); font-weight:600; font-size:14px; color:var(--text-soft); background:transparent; border:0; padding:10px 16px; border-radius:9px; position:relative; white-space:nowrap; cursor:pointer; }
.tabs button:hover{ color:var(--text); }
.tabs button.on{ color:var(--text); font-weight:700; background:var(--card); box-shadow:0 1px 4px rgba(0,0,0,.06); }
.tabs button.on::after{ content:""; position:absolute; left:16px; right:16px; bottom:5px; height:2.5px; border-radius:2px; background:var(--accent); }

/* competition hub cards -------------------------------------------- */
.chub{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.ccard{ border-radius:18px; overflow:hidden; border:1px solid var(--line); background:var(--card); display:flex; flex-direction:column; }
.ccard__top{ position:relative; background:var(--ink); padding:20px 22px; min-height:124px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.ccard__deco{ position:absolute; right:6px; top:-26px; font-family:var(--font-display); font-weight:900; font-style:italic; font-size:130px; color:rgba(255,255,255,.05); pointer-events:none; line-height:1; }
.ccard__title{ font-family:var(--font-display); font-weight:900; font-style:italic; text-transform:uppercase; font-size:30px; line-height:.9; position:relative; }
.ccard__sub{ position:relative; color:var(--on-ink-soft); font-size:12.5px; margin-top:4px; }
.ccard__body{ padding:16px 20px 18px; display:flex; flex-direction:column; gap:12px; }
.ccard__meta{ display:flex; gap:18px; }
.ccard__metaitem .stat{ font-size:22px; }

/* account dropdown menu ------------------------------------------- */
.acct{ position:relative; flex:0 0 auto; margin-left:12px; }
.acct__btn{ display:flex; align-items:center; gap:9px; background:transparent; border:0; padding:4px 8px 4px 4px; cursor:pointer; border-radius:11px; transition:background .14s; }
.acct__btn:hover{ background:var(--paper-2); }
.acct__btn i{ font-size:11px; color:var(--text-faint); }
.acct__name{ font-family:var(--font-ui); font-weight:700; font-size:13.5px; color:var(--text); white-space:nowrap; }
.menu{ position:absolute; right:0; top:calc(100% + 12px); width:252px; background:var(--card); border:1px solid var(--line-2); border-radius:14px; box-shadow:0 18px 44px rgba(0,0,0,.2); padding:8px; z-index:50; }
.menu__head{ display:flex; gap:11px; align-items:center; padding:10px 10px 13px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.menu__item{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px; color:var(--text); text-decoration:none; font-size:14px; font-weight:500; cursor:pointer; width:100%; background:transparent; border:0; text-align:left; font-family:var(--font-ui); }
.menu__item:hover{ background:var(--paper-2); }
.menu__item > i{ width:18px; color:var(--text-faint); font-size:15px; }
.menu__item--danger{ color:var(--red); } .menu__item--danger > i{ color:var(--red); }
.menu__badge{ margin-left:auto; background:var(--red); color:#fff; font-size:11px; font-weight:700; border-radius:99px; padding:1px 8px; }

/* form fields ----------------------------------------------------- */
.field{ display:flex; flex-direction:column; gap:7px; }
.field > label{ font-weight:600; font-size:12.5px; color:var(--text-soft); }
.input{ font-family:var(--font-ui); font-size:14px; padding:11px 14px; border-radius:11px; border:1px solid var(--line-2); background:var(--card); color:var(--text); width:100%; }
.input::placeholder{ color:var(--text-faint); }
.input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,107,255,.14); }
textarea.input{ resize:vertical; min-height:84px; line-height:1.5; }
.switch{ width:46px; height:26px; border-radius:99px; background:var(--line-2); position:relative; cursor:pointer; border:0; flex:0 0 auto; transition:.18s; }
.switch.on{ background:var(--blue); }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.18s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.switch.on::after{ left:23px; }
.optrow{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.optrow:last-child{ border-bottom:0; }

/* notifications --------------------------------------------------- */
.notif{ display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:13px; border:1px solid var(--line); background:var(--card); }
.notif--unread{ background:linear-gradient(90deg, rgba(47,107,255,.07), var(--card)); border-color:rgba(47,107,255,.25); }
.notif__ic{ width:40px; height:40px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center; font-size:16px; background:var(--paper-2); }
.notif__dot{ width:9px; height:9px; border-radius:50%; background:var(--blue); flex:0 0 auto; margin-top:6px; }

/* ===== landing page ============================================== */
.lp-hero{ position:relative; text-align:center; padding:54px 24px 40px; overflow:hidden; }
.lp-hero__cloud{ position:absolute; top:-40px; left:-60px; width:420px; height:300px; pointer-events:none;
  background:radial-gradient(circle at 40% 40%, rgba(47,107,255,.10), transparent 62%); filter:blur(8px); }
.lp-hero__cloud--r{ left:auto; right:-60px; top:-20px; background:radial-gradient(circle at 60% 40%, rgba(244,178,35,.12), transparent 62%); }
.lp-title{ font-family:var(--font-display); font-weight:900; font-style:italic; text-transform:uppercase; font-size:60px; line-height:.92; letter-spacing:.005em; margin:0 auto; max-width:18ch; }
.hl{ display:inline-block; background:var(--accent); color:var(--accent-ink); padding:0 .14em; border-radius:4px; transform:skewX(-4deg); }
.hl > span{ display:inline-block; transform:skewX(4deg); }
.lp-sub{ color:var(--text-soft); font-size:17px; margin:16px auto 0; max-width:54ch; }
.bigsearch{ display:flex; align-items:center; gap:12px; max-width:620px; margin:26px auto 0; background:var(--ink); border:2px solid var(--accent); border-radius:14px; padding:15px 20px; color:#fff; box-shadow:0 14px 34px rgba(0,0,0,.18); }
.bigsearch i{ color:var(--accent); font-size:17px; }
.bigsearch .btn{ margin-left:auto; }
.featrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1000px; margin:34px auto 0; }
.featmini{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; text-align:left; }
.featmini i{ font-size:18px; color:var(--accent); }
.featmini h4{ font-family:var(--font-display); font-weight:700; font-size:16px; margin:10px 0 4px; }
.featmini p{ color:var(--text-faint); font-size:12.5px; margin:0; line-height:1.45; }

.lp-h2{ font-family:var(--font-display); font-weight:800; font-style:italic; text-transform:uppercase; font-size:36px; line-height:1; text-align:center; margin:0 auto; max-width:22ch; }

.feature{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.feature__txt h3{ font-family:var(--font-display); font-weight:800; font-size:30px; text-transform:uppercase; margin:0 0 12px; }

/* framed mini mockup */
.mock{ border-radius:16px; background:var(--card); border:1px solid var(--line-2); box-shadow:0 24px 50px rgba(0,0,0,.16); overflow:hidden; }
.mock__bar{ display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--card-2); }
.mock__dot{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); }
.mock__body{ padding:16px; display:flex; flex-direction:column; gap:9px; }

/* dark feature block */
.darkblock{ position:relative; border-radius:22px; background:var(--ink); color:#fff; padding:44px 48px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; }
.darkblock__deco{ position:absolute; right:-20px; top:-50px; font-family:var(--font-display); font-weight:900; font-style:italic; font-size:240px; color:rgba(255,255,255,.04); pointer-events:none; }
.darkblock h2{ font-family:var(--font-display); font-weight:900; font-style:italic; text-transform:uppercase; font-size:46px; line-height:.9; margin:0; position:relative; }

/* podium */
.podium{ display:flex; align-items:flex-end; justify-content:center; gap:14px; }
.pod{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.pod__block{ width:96px; border-radius:12px 12px 0 0; display:flex; align-items:flex-start; justify-content:center; padding-top:12px; font-family:var(--font-display); font-weight:900; font-size:30px; color:rgba(0,0,0,.45); }
.pod--1 .pod__block{ height:120px; background:linear-gradient(180deg,#ffd166,#f4b223); }
.pod--2 .pod__block{ height:88px; background:linear-gradient(180deg,#dfe3ea,#b9c0cc); }
.pod--3 .pod__block{ height:66px; background:linear-gradient(180deg,#e7a86a,#d18a4f); }

/* CTA bands */
.ctaband{ position:relative; border-radius:20px; overflow:hidden; background:var(--ink-2); color:#fff; padding:46px 40px; text-align:center; }
.ctaband__ghost{ font-family:var(--font-display); font-weight:900; font-style:italic; text-transform:uppercase; font-size:60px; line-height:.9; color:rgba(255,255,255,.06); margin:6px 0 0; }

/* landing footer — premium */
.lpfoot{ position:relative; background:var(--ink); color:var(--on-ink-soft); padding:0 40px 26px; overflow:hidden; }
.lpfoot::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--hot); }
.lpfoot__wm{ position:absolute; left:50%; bottom:-46px; transform:translateX(-50%); font-family:var(--font-display); font-weight:900; font-style:italic; font-size:200px; line-height:1; letter-spacing:.02em; color:rgba(255,255,255,.035); white-space:nowrap; pointer-events:none; user-select:none; }

/* invitation hook strip */
.lpfoot__cta{ position:relative; max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:30px 0 34px; border-bottom:1px solid rgba(255,255,255,.1); }
.lpfoot__cta h4{ font-family:var(--font-display); font-weight:900; font-style:italic; text-transform:uppercase; font-size:34px; line-height:.92; color:#fff; margin:0; }
.lpfoot__cta p{ font-size:14px; margin:8px 0 0; max-width:42ch; }

.lpfoot__grid{ position:relative; max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; padding:38px 0 30px; }
.lpfoot__brandtxt{ font-size:13px; margin-top:12px; max-width:32ch; line-height:1.55; }
.lpfoot h5{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:#fff; margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.lpfoot h5::before{ content:""; width:14px; height:2px; background:var(--accent); border-radius:2px; }
.lpfoot a{ display:flex; align-items:center; gap:8px; color:var(--on-ink-soft); text-decoration:none; font-size:13.5px; padding:6px 0; transition:.14s; }
.lpfoot a:hover{ color:#fff; transform:translateX(3px); }
.lpfoot a > .fa-arrow-right{ font-size:9px; opacity:0; transition:.14s; }
.lpfoot a:hover > .fa-arrow-right{ opacity:.7; }
.lpfoot__soc{ display:flex; gap:9px; margin-top:16px; }
.lpfoot__soc a{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:#fff; padding:0; }
.lpfoot__soc a:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); transform:translateY(-2px); }
.lpfoot__heritage{ position:relative; max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:16px 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); flex-wrap:wrap; }
.lpfoot__heritage .yr{ font-family:var(--font-display); font-weight:900; font-style:italic; font-size:26px; color:var(--gold); }
.lpfoot__bottom{ position:relative; max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; padding-top:18px; }
.lpfoot__bottom a{ color:var(--on-ink-soft); text-decoration:none; }
.lpfoot__bottom a:hover{ color:#fff; }

/* shared inner-page footer */
.sfoot{ position:relative; background:var(--ink); color:var(--on-ink-soft); padding:36px 26px 22px; overflow:hidden; }
.sfoot::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--hot); }
.sfoot__grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; }
.sfoot__txt{ font-size:12.5px; margin-top:10px; max-width:34ch; line-height:1.55; }
.sfoot__soc{ display:flex; gap:8px; margin-top:13px; }
.sfoot__soc a{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:#fff; transition:.14s; }
.sfoot__soc a:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); transform:translateY(-2px); }
.sfoot h5{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:11.5px; color:#fff; margin:0 0 12px; display:flex; align-items:center; gap:7px; }
.sfoot h5::before{ content:""; width:12px; height:2px; background:var(--accent); border-radius:2px; }
.sfoot a{ display:block; color:var(--on-ink-soft); text-decoration:none; font-size:13px; padding:5px 0; transition:.14s; }
.sfoot a:hover{ color:#fff; transform:translateX(3px); }
.sfoot__bottom{ max-width:1180px; margin:24px auto 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:12.5px; }

/* ===== bulletin (poser ses pronos) ============================== */
.ainput-score{ width:40px; height:36px; text-align:center; border:1px solid var(--line-2); border-radius:9px; background:var(--card);
  font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--text); outline:none; }
.ainput-score:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,107,255,.14); }
.ainput-score::placeholder{ color:var(--text-faint); }
.bull-controls{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:11px 16px; border-top:1px solid var(--line); background:var(--card-2); }
.bull-check{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-size:13px; background:var(--green); color:#fff; }
.bull-check--empty{ background:var(--paper-2); color:var(--text-faint); }
.pick--btn{ cursor:pointer; }
.stake--btn{ cursor:pointer; }

/* ===== invitation + tunnel d'inscription ======================== */
/* hero d'invitation */
.invite{ position:relative; min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.invite__left{ position:relative; background:var(--ink); color:#fff; padding:46px 50px; display:flex; flex-direction:column; justify-content:space-between; gap:28px; overflow:hidden; }
.invite__deco{ position:absolute; right:-30px; bottom:-50px; font-family:var(--font-display); font-weight:900; font-style:italic; font-size:230px; line-height:1; color:rgba(255,255,255,.05); pointer-events:none; }
.invite__right{ padding:46px 50px; display:flex; flex-direction:column; justify-content:center; background:var(--paper); }
.invite__title{ font-family:var(--font-display); font-weight:900; font-style:italic; text-transform:uppercase; font-size:56px; line-height:.9; margin:0; }

/* coquille du tunnel */
.signup{ min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:30px 24px 48px; background:var(--paper); }
.signup__top{ width:100%; max-width:720px; display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.signup__card{ width:100%; max-width:720px; background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 54px rgba(0,0,0,.12); padding:36px 40px; }

/* stepper */
.stepper{ display:flex; align-items:center; gap:0; width:100%; max-width:720px; margin-bottom:22px; }
.stepper__node{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.stepper__dot{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:14px; flex:0 0 auto; }
.stepper__dot--done{ background:var(--green); color:#fff; }
.stepper__dot--now{ background:var(--ink); color:var(--gold); box-shadow:0 0 0 3px var(--card), 0 0 0 5px var(--gold); }
.stepper__dot--wait{ background:var(--paper-2); color:var(--text-faint); }
.stepper__lbl{ font-weight:600; font-size:12.5px; white-space:nowrap; }
.stepper__lbl--now{ color:var(--text); } .stepper__lbl--done{ color:var(--text-soft); } .stepper__lbl--wait{ color:var(--text-faint); }
.stepper__bar{ flex:1 1 auto; height:2px; background:var(--line-2); margin:0 12px; border-radius:2px; min-width:14px; }
.stepper__bar--done{ background:var(--green); }

/* sélecteurs en pastilles (club) */
.chips-pick{ display:flex; flex-wrap:wrap; gap:9px; }
.chip-pick{ display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border-radius:11px; border:1.5px solid var(--line-2); background:var(--card); cursor:pointer; font-weight:600; font-size:13.5px; color:var(--text-soft); white-space:nowrap; }
.chip-pick:hover{ border-color:var(--line-strong); }
.chip-pick.on{ border-color:var(--blue); background:rgba(47,107,255,.08); color:var(--text); }
.chip-pick .stake, .chip-pick .flag{ flex:0 0 auto; }

/* choix d'avatar */
.av-pick{ display:flex; gap:12px; flex-wrap:wrap; }
.av-opt{ border-radius:50%; cursor:pointer; padding:3px; border:2px solid transparent; }
.av-opt.on{ border-color:var(--blue); }

/* force du mot de passe */
.pwbar{ display:flex; gap:5px; margin-top:8px; }
.pwseg{ flex:1; height:5px; border-radius:99px; background:var(--paper-2); }
.pwseg.on{ background:var(--green); }

/* navigation du tunnel */
.signup__nav{ display:flex; align-items:center; justify-content:space-between; margin-top:28px; gap:12px; }
.signup__step.is-hidden{ display:none; }

@media (max-width:860px){ .invite{ grid-template-columns:1fr; } }