*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ── Palette ASSE ── */
  --vert-historique:#1d995b;
  --vert-premium:#006648;
  --vert-digital:#54f6a0;
  --anthracite:#151515;
  --or:#cdb789;
  --or-d:#a8915f;
  --rouge:#d2353b;
  --bleu:#254d98;
  --gris:#f4f4f4;
  --gris-2:#e5e5e5;
  --txt:#151515;
  --shadow:0 12px 40px rgba(0,0,0,.18);
  --rad:14px;
  --maxw:1380px;
  --t:.25s ease;
  /* ── Dérivés (thème clair) ── */
  --g:var(--vert-premium);
  --g2:var(--vert-historique);
  --acc:var(--vert-digital);
  --gd:rgba(0,102,72,.08);
  --gb:rgba(0,102,72,.22);
  --bg:#ffffff;
  --bg-app:#ececec;
  --card:#ffffff;
  --card2:#f4f4f4;
  --bdr:#e5e5e5;
  --sub:#6b6b6b;
  --muted:#9b9b9b;
  --r:12px;--r2:18px;--navh:64px;--hdrh:60px;
  --font-display:"apotek-cond","Bebas Neue","Barlow Condensed",Impact,sans-serif;
  --font-body:"titillium-web","Titillium Web","Inter","Helvetica Neue",Arial,sans-serif;
  --font-title:"apotek-cond","titillium-web","Inter","Helvetica Neue",Arial,sans-serif;
}

/* ── THÈME SOMBRE ── */
[data-theme="dark"]{
  --g:#1d995b;
  --g2:#006648;
  --gd:rgba(29,153,91,.14);
  --gb:rgba(29,153,91,.32);
  --anthracite:#f0f0f0;
  --txt:#f0f0f0;
  --bg:#0d0d0d;
  --bg-app:#000000;
  --card:#161616;
  --card2:#1d1d1d;
  --bdr:rgba(255,255,255,.09);
  --sub:#9a9a9a;
  --muted:#5e5e5e;
  --gris:#1a1a1a;
  --gris-2:#2c2c2c;
  --shadow:0 12px 40px rgba(0,0,0,.6);
}
[data-theme="dark"] .app-header{background:rgba(18,18,18,.9)}
[data-theme="dark"] .lvl-card{background:linear-gradient(135deg,#1e1812,#161616)}
[data-theme="dark"] .ticket{box-shadow:0 4px 18px rgba(0,0,0,.4)}

html{font-size:16px}
body{font-family:var(--font-body);background:var(--bg);color:var(--txt);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background-color .25s ease,color .25s ease}
.app,.app-main,.app-header,.sidebar,.card,.sc,.ticket,.acc,.pref-item,.pref-link,.profile-hero,.match-card,.f-inp{transition:background-color .25s ease,border-color .25s ease,color .25s ease}

/* ── APP SHELL ── */
.app{width:100%;min-height:100vh;background:var(--bg);position:relative}

@media(min-width:1024px){
  body{background:var(--bg-app)}
  .app{width:100%;display:grid;grid-template-columns:256px 1fr;grid-template-rows:var(--hdrh) 1fr;grid-template-areas:"sidebar header""sidebar main";min-height:100vh;background:var(--card2)}
}

/* ── HEADER ── */
.app-header{
  background:rgba(255,255,255,.92);border-bottom:1px solid var(--bdr);
  padding:0 16px;height:var(--hdrh);display:flex;align-items:center;
  justify-content:space-between;position:sticky;top:0;z-index:100;
  backdrop-filter:blur(16px);
}
@media(min-width:1024px){.app-header{grid-area:header}}

.hdr-l{display:flex;align-items:center;gap:10px}
.logo-img{height:36px;width:auto;display:block;flex-shrink:0}
.hdr-title{font-family:var(--font-display);font-size:19px;letter-spacing:1.5px;color:var(--anthracite)}
.hdr-title span{color:var(--g)}
.hdr-weather{display:flex;align-items:center;gap:10px}
.hw-ico{font-size:24px;line-height:1;flex-shrink:0}
.hw-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.hw-temp{display:flex;align-items:baseline;gap:7px;line-height:1}
.hw-temp #hwTemp{font-family:var(--font-display);font-size:20px;letter-spacing:1px;color:var(--anthracite)}
.hw-cond{font-size:12px;font-weight:600;color:var(--g)}
.hw-lbl{font-size:10px;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:380px){.hw-lbl{font-size:9px;letter-spacing:0}}
.hdr-r{display:flex;align-items:center;gap:12px}

.theme-btn{background:none;border:none;cursor:pointer;color:var(--sub);padding:4px;transition:color .2s;line-height:0}
.theme-btn:hover{color:var(--txt)}

.menu-btn{background:none;border:none;cursor:pointer;color:var(--txt);padding:4px;line-height:0;display:flex;align-items:center}
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:250}
.app.nav-open .menu-overlay{opacity:1;visibility:visible}
.theme-btn .ico-sun{display:none}
[data-theme="dark"] .theme-btn .ico-moon{display:none}
[data-theme="dark"] .theme-btn .ico-sun{display:block}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}

.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--g2));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;cursor:pointer;border:2px solid var(--gb);overflow:hidden}
.avatar img,.p-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* ── SIDEBAR / DRAWER (mobile : tiroir vert dégradé) ── */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:288px;max-width:84vw;z-index:300;
  display:flex;flex-direction:column;padding:24px 0;overflow-y:auto;
  background:linear-gradient(160deg,var(--vert-premium),var(--vert-historique));
  transform:translateX(-100%);transition:transform .32s ease;
  box-shadow:6px 0 40px rgba(0,0,0,.35);
}
.app.nav-open .sidebar{transform:translateX(0)}
.sb-logo{padding:0 20px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.2);margin-bottom:12px}
.sb-logo .logo-img{height:60px}
.sb-name{font-family:var(--font-display);font-size:20px;letter-spacing:2px;text-align:center;color:#fff}
.sb-name span{color:#fff}
.sb-meta{font-size:12px;color:rgba(255,255,255,.75);text-align:center}
.sb-nav{padding:0 10px;flex:1}
.sb-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:9px;cursor:pointer;color:rgba(255,255,255,.85);font-size:15px;font-weight:600;transition:all .2s;margin-bottom:3px;border:none;background:none;width:100%;text-align:left;font-family:var(--font-body);text-decoration:none}
.sb-item:hover{color:#fff;background:rgba(255,255,255,.1)}
.sb-item.active{color:#fff;background:rgba(255,255,255,.2)}
.sb-item svg{width:19px;height:19px;flex-shrink:0}
.sb-foot{padding:16px 20px;border-top:1px solid rgba(255,255,255,.2);margin-top:auto}
.sb-subs{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:11px;overflow:hidden}
.sb-sub{display:flex;align-items:center;gap:11px;padding:11px 12px;text-decoration:none;transition:background .2s}
.sb-sub:hover{background:rgba(255,255,255,.09)}
.sb-sub+.sb-sub{border-top:1px solid rgba(255,255,255,.14)}
.sb-sub-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;background:rgba(255,255,255,.15)}
.sb-sub-ico svg{width:17px;height:17px}
.ico-member-sb{background:rgba(205,183,137,.3)}
.sb-sub-t{display:flex;flex-direction:column;min-width:0}
.sb-sub-n{font-size:13px;font-weight:700;color:#fff;line-height:1.2}
.sb-sub-s{font-size:11px;color:rgba(255,255,255,.72);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-sub-s em{font-style:normal;color:var(--vert-digital);font-weight:700}
.sb-convert{display:block;text-align:center;margin-top:10px;font-size:12px;font-weight:700;color:var(--or);text-decoration:none;transition:color .2s}
.sb-convert:hover{color:#fff}

@media(min-width:1024px){
  /* Desktop : même sidebar verte, mais fixe dans la grille (pas de tiroir) */
  .menu-btn,.menu-overlay{display:none}
  .sidebar{position:sticky;top:0;height:100vh;grid-area:sidebar;width:auto;max-width:none;transform:none;z-index:1;box-shadow:none}
  .sb-logo{padding:0 20px 24px}
  .sb-logo .logo-img{height:64px}
}

/* ── MAIN ── */
.app-main{padding-bottom:24px;overflow-y:auto;background:var(--bg)}
@media(min-width:1024px){.app-main{grid-area:main;padding:28px 32px 32px;background:var(--bg)}}

.section{display:none;animation:fadeUp .28s ease}
.section.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── SECTION HEADER ── */
.sec-hero{padding:22px 16px 14px}
.sec-title{font-family:var(--font-display);font-size:32px;letter-spacing:2px;line-height:1;color:var(--anthracite)}
.sec-sub{font-size:13px;color:var(--sub);margin-top:3px}
.sec-body{padding:0 16px}
@media(min-width:1024px){.sec-hero{padding:0 0 20px}.sec-body{padding:0}}

/* ── CARD ── */
.card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r2);padding:18px;margin-bottom:10px}
.card-green{border-color:var(--gb);background:linear-gradient(135deg,rgba(0,102,72,.06) 0%,var(--card) 60%)}

/* ── BADGE ── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.badge-green{background:var(--gd);color:var(--g)}
.bdot{width:6px;height:6px;border-radius:50%;background:var(--g2);animation:blink 2s infinite}

/* ── BUTTONS ── */
.btn{border:none;border-radius:9px;padding:11px 18px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;font-family:var(--font-body);min-height:44px;width:100%}
.btn-p{background:var(--g);color:#fff}
.btn-p:hover{background:var(--g2);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,102,72,.25)}
.btn-s{background:var(--gris);color:var(--txt);border:1px solid var(--bdr)}
.btn-s:hover{background:var(--gris-2)}
.btn-gold{background:var(--or);color:#151515}
.btn-gold:hover{background:var(--or-d);color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(168,145,95,.3)}

/* ══ DASHBOARD ══ */
.greet{padding:22px 16px 6px}
.greet-date{font-size:12px;color:var(--sub);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:3px}
.greet-name{font-family:var(--font-display);font-size:40px;letter-spacing:2px;line-height:1;color:var(--anthracite)}
.greet-name em{color:var(--g);font-style:normal}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
.sc{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:15px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.sc::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--g);opacity:0;transition:opacity .2s}
.sc:hover::after{opacity:1}
.sc:hover{border-color:var(--gb);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.07)}
.sc.full{grid-column:1/-1}
.sc-lbl{font-size:10px;color:var(--sub);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:7px;font-weight:600}
.sc-val{font-family:var(--font-display);font-size:28px;letter-spacing:1px;line-height:1.1;color:var(--anthracite)}
.sc-val.green{color:var(--g)}
.sc-s{font-size:12px;color:var(--sub);margin-top:3px}
@media(min-width:1024px){.stat-grid{grid-template-columns:repeat(3,1fr)}.sc.full{grid-column:auto}}

/* ── MATCH CARD ── */
.match-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r2);overflow:hidden;margin-bottom:10px}
.match-banner{background:linear-gradient(135deg,var(--vert-premium),var(--vert-historique));padding:18px 20px;position:relative}
.match-comp{font-size:10px;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:2px;margin-bottom:12px;position:relative}
.match-teams{display:flex;align-items:center;justify-content:space-between;position:relative}
.team{display:flex;flex-direction:column;align-items:center;gap:7px}
.team-badge{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:14px;color:#fff;border:2px solid rgba(255,255,255,.35)}
.t-asse{background:rgba(255,255,255,.18)}
.t-opp{background:rgba(0,0,0,.22)}
.team-n{font-family:var(--font-display);font-size:16px;letter-spacing:1.5px;color:#fff}
.vs{display:flex;flex-direction:column;align-items:center;gap:4px}
.vs-txt{font-family:var(--font-display);font-size:24px;letter-spacing:3px;color:rgba(255,255,255,.7)}
.vs-date{background:rgba(255,255,255,.2);color:#fff;padding:3px 9px;border-radius:5px;font-size:11px;font-weight:600}
.match-dets{padding:14px 20px;display:flex;gap:12px}
.mdet{flex:1}
.mdet-l{font-size:10px;color:var(--sub);text-transform:uppercase;letter-spacing:1px;font-weight:600}
.mdet-v{font-size:14px;font-weight:600;margin-top:2px;color:var(--anthracite)}

/* ══ DASHBOARD ══ */

/* ─ Ambiance : glow vert + or derrière le contenu ─ */
.dash{position:relative}
.dash::before{content:'';position:absolute;top:-40px;left:0;right:0;height:340px;pointer-events:none;z-index:0;
  background:radial-gradient(120% 90% at 85% -10%,rgba(0,102,72,.13),transparent 55%),
             radial-gradient(90% 80% at 5% 0%,rgba(205,183,137,.16),transparent 50%)}
.dash .greet,.dash .sec-body{position:relative;z-index:1}
.dash .greet-name{text-shadow:0 1px 0 rgba(255,255,255,.4)}
[data-theme="dark"] .dash::before{background:radial-gradient(120% 90% at 85% -10%,rgba(29,153,91,.18),transparent 55%),radial-gradient(90% 80% at 5% 0%,rgba(205,183,137,.1),transparent 50%)}

/* ─ Tints colorés par carte (moins de blanc) ─ */
.dash .db-sub-stade{background:linear-gradient(155deg,rgba(0,102,72,.08),var(--card) 62%)}
.dash .db-sub-member{background:linear-gradient(155deg,rgba(205,183,137,.16),var(--card) 62%)}
.dash .db-sub-match{background:linear-gradient(155deg,rgba(29,153,91,.09),var(--card) 62%)}
.dash .db-adv-card{background:linear-gradient(180deg,rgba(0,102,72,.045),var(--card) 120px)}
[data-theme="dark"] .dash .db-sub-stade{background:linear-gradient(155deg,rgba(29,153,91,.12),var(--card) 62%)}
[data-theme="dark"] .dash .db-sub-member{background:linear-gradient(155deg,rgba(205,183,137,.1),var(--card) 62%)}
[data-theme="dark"] .dash .db-sub-match{background:linear-gradient(155deg,rgba(29,153,91,.12),var(--card) 62%)}
[data-theme="dark"] .dash .db-adv-card{background:linear-gradient(180deg,rgba(29,153,91,.07),var(--card) 120px)}

/* ─ Section label ─ */
.db-section-lbl{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:18px 0 11px}

/* ─ Abonnements grid ─ */
.db-subs{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:6px}
@media(min-width:640px){.db-subs{grid-template-columns:1fr 1fr;align-items:stretch}}
/* variante 3 cartes : 1 col mobile, 3 col dès 720px */
.db-subs-3{grid-template-columns:1fr}
@media(min-width:720px){.db-subs-3{grid-template-columns:repeat(3,1fr);align-items:stretch}}

.db-sub{position:relative;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r2);padding:18px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s}
a.db-sub:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08);border-color:var(--gb)}
.db-sub-accent{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--g),var(--g2))}
.db-sub-accent.accent-gold{background:linear-gradient(90deg,var(--or-d),var(--or))}

.db-sub-head{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.db-sub-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.db-sub-ico svg{width:18px;height:18px}
.ico-stade{background:var(--gd);color:var(--g)}
.ico-member{background:rgba(205,183,137,.22);color:var(--or-d)}
.db-sub-kicker{flex:1;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--sub)}
.badge-gold{background:rgba(205,183,137,.25);color:var(--or-d)}

.db-sub-title{font-family:var(--font-display);font-size:26px;letter-spacing:1.5px;line-height:1;color:var(--anthracite);margin-bottom:5px}
.db-sub-meta{font-size:12px;color:var(--sub)}
.db-sub-foot{margin-top:auto;padding-top:14px;font-size:13px;font-weight:600;color:var(--g)}

.db-points{display:flex;align-items:baseline;gap:7px;margin-bottom:14px}
.db-points-val{font-family:var(--font-display);font-size:30px;letter-spacing:1px;color:var(--g);line-height:1}
.db-points-lbl{font-size:12px;color:var(--sub)}
.db-sub-actions{margin-top:auto;display:flex;flex-direction:column;gap:7px}
.db-link-gold{font-size:13px;font-weight:700;color:var(--or-d);text-decoration:none}
.db-link-gold:hover{color:var(--or)}
.db-link-sub{font-size:12px;color:var(--sub);text-decoration:none}
.db-link-sub:hover{color:var(--txt)}

/* ─ Carte prochain match (compacte) ─ */
.db-sub-match{padding-bottom:0}
.accent-match{background:linear-gradient(90deg,var(--vert-premium),var(--vert-digital))}
.ico-match{background:var(--gd);color:var(--g)}
.db-match-teams{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 12px}
.db-mt{display:flex;flex-direction:column;align-items:center;gap:6px}
.db-mt-badge{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:13px;color:#fff;letter-spacing:.5px}
.db-mt-badge.t-asse{background:linear-gradient(135deg,var(--vert-premium),var(--vert-historique))}
.db-mt-badge.t-opp{background:linear-gradient(135deg,#2a2a2a,#4a4a4a)}
.db-mt-n{font-family:var(--font-display);font-size:14px;letter-spacing:1px;color:var(--anthracite)}
.db-mt-vs{font-family:var(--font-display);font-size:18px;letter-spacing:2px;color:var(--muted)}
.db-match-meta{text-align:center;line-height:1.5;margin-bottom:14px}
.db-match-cta{display:flex;align-items:center;justify-content:center;gap:7px;margin:auto -18px 0;padding:13px;background:var(--g);color:#fff;font-size:13px;font-weight:700;font-family:var(--font-body);text-decoration:none;transition:background .2s}
.db-match-cta:hover{background:var(--g2)}
.db-match-cta svg{width:16px;height:16px;transition:transform .2s}
.db-match-cta:hover svg{transform:translateX(3px)}

/* ─ Avantages croisés ─ */
.db-adv-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r2);padding:18px;margin-top:6px}
.db-adv-head{margin-bottom:6px}
.db-adv-title{font-size:16px;font-weight:700;color:var(--anthracite)}
.db-adv-sub{font-size:12px;color:var(--sub);margin-top:2px}

.db-adv-list{list-style:none;display:flex;flex-direction:column}
.db-adv-item{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--bdr)}
.db-adv-item:last-child{border-bottom:none}
.db-adv-chk{width:20px;height:20px;border-radius:50%;background:var(--gd);color:var(--g);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.db-adv-chk svg{width:10px;height:10px}
.db-adv-txt{flex:1;font-size:13px;color:var(--txt);line-height:1.35}
.db-adv-tag{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border-radius:20px;white-space:nowrap}
.tag-stade{background:var(--gd);color:var(--g)}
.tag-fan{background:rgba(205,183,137,.25);color:var(--or-d)}
.tag-cross{background:linear-gradient(90deg,var(--gd),rgba(205,183,137,.25));color:var(--anthracite)}

/* ─ Avantages verrouillés (upsell Premium) ─ */
.db-adv-locked{margin-top:16px;padding:16px;background:linear-gradient(145deg,rgba(0,42,30,.04),var(--card2));border:1px dashed var(--gb);border-radius:var(--r)}
.db-adv-locked-hd{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--g);margin-bottom:11px}
.db-adv-locked-hd svg{width:15px;height:15px}
.db-adv-locked-list{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.db-locked-pill{font-size:12px;font-weight:600;color:var(--sub);background:var(--card);border:1px solid var(--bdr);border-radius:20px;padding:5px 11px}
.db-adv-upsell{display:inline-block;font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--g),var(--g2));padding:10px 18px;border-radius:9px;text-decoration:none;transition:opacity .2s}
.db-adv-upsell:hover{opacity:.88}

[data-theme="dark"] .db-adv-locked{background:linear-gradient(145deg,rgba(29,153,91,.06),var(--card2))}

/* ══ BILLETTERIE ══ */
.ticket{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r2);overflow:hidden;margin-bottom:10px;box-shadow:0 4px 18px rgba(0,0,0,.05)}
.ticket-hdr{background:linear-gradient(135deg,var(--vert-premium),var(--vert-historique));padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.ticket-hdr-t{font-family:var(--font-display);font-size:20px;letter-spacing:1.5px;color:#fff}
.ticket-type{background:rgba(255,255,255,.22);color:#fff;padding:3px 9px;border-radius:5px;font-size:11px;font-weight:700}
.seat-grid{padding:14px 18px;display:grid;grid-template-columns:1fr 1fr;gap:10px;border-bottom:1px dashed var(--bdr)}
.seat-l{font-size:10px;color:var(--sub);text-transform:uppercase;letter-spacing:1px;font-weight:600}
.seat-v{font-size:15px;font-weight:600;margin-top:2px;color:var(--anthracite)}
.ticket-foot{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ticket-ref{flex:1;min-width:150px}
.ticket-ref-l{font-size:10px;color:var(--sub);text-transform:uppercase;letter-spacing:1px;font-weight:600}
.ticket-ref-v{font-family:var(--font-display);font-size:22px;letter-spacing:2px;color:var(--anthracite);margin-top:2px}
.ticket-ref-s{font-size:12px;color:var(--sub);margin-top:3px}
.ticket-foot .btn{width:auto;flex-shrink:0}

/* stadium SVG plan */
.plan-wrap{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:14px;display:flex;justify-content:center;margin-bottom:10px}

/* ══ MEMBERSHIP ══ */

/* ─ Carte membre actuelle ─ */
.mb-member-card{position:relative;background:linear-gradient(135deg,#a07840,#cdb789 50%,#e8d4a8);border-radius:16px;padding:20px 20px 0;margin-bottom:20px;overflow:hidden;min-height:130px}
.mb-mc-bg{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.mb-mc-content{position:relative;z-index:1}
.mb-mc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mb-mc-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.75)}
.mb-mc-chip{font-size:10px;font-weight:700;background:rgba(255,255,255,.25);color:#fff;padding:3px 9px;border-radius:20px;letter-spacing:.5px}
.mb-mc-name{font-family:var(--font-display);font-size:36px;letter-spacing:3px;color:#fff;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.15);margin-bottom:10px}
.mb-mc-bottom{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px}
.mb-mc-season{font-size:12px;color:rgba(255,255,255,.75);font-weight:600}
.mb-mc-logo{width:32px;height:32px;color:rgba(255,255,255,.6)}
.mb-mc-upgrade{background:rgba(0,0,0,.18);backdrop-filter:blur(8px);padding:10px 20px;margin:0 -20px;font-size:12px;color:rgba(255,255,255,.85);font-weight:500;cursor:pointer;transition:background .2s}
.mb-mc-upgrade:hover{background:rgba(0,0,0,.28)}

/* ─ Offres label ─ */
.mb-offers-lbl{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}

/* ─ Grille ─ */
.mb-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.mb-grid{grid-template-columns:1fr 1fr;align-items:start}}

/* ─ Cards base ─ */
.mb-card{border-radius:20px;padding:24px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}

/* ─ Fan ─ */
.mb-fan{background:linear-gradient(145deg,#fdf8ef,#fff);border:1.5px solid rgba(205,183,137,.45)}
.mb-fan .mb-offer-eyebrow{color:var(--or-d)}
.mb-fan .mb-offer-name{color:var(--anthracite)}
.mb-fan .mb-offer-tagline{color:var(--sub)}
.mb-fan .mb-feat{color:var(--txt)}

/* ─ Premium ─ */
.mb-prem{background:linear-gradient(145deg,#002a1e 0%,#005a3c 60%,#007a50 100%);border:none;box-shadow:0 20px 60px rgba(0,102,72,.35),0 4px 16px rgba(0,0,0,.15)}
.mb-prem:hover{transform:translateY(-3px);box-shadow:0 28px 70px rgba(0,102,72,.42),0 6px 20px rgba(0,0,0,.2)}
.mb-prem .mb-offer-eyebrow{color:rgba(255,255,255,.5)}
.mb-prem .mb-offer-name{color:#fff}
.mb-prem .mb-offer-tagline{color:rgba(255,255,255,.6)}
.mb-prem .mb-feat{color:rgba(255,255,255,.85)}
.mb-prem .mb-feat strong{color:#fff}

/* ─ Ribbon badge ─ */
.mb-offer-ribbon{position:absolute;top:16px;right:16px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 11px;border-radius:20px}
.mb-ribbon-fan{background:rgba(205,183,137,.25);color:var(--or-d)}
.mb-ribbon-prem{background:var(--or);color:#151515}

/* ─ Typography ─ */
.mb-offer-eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.mb-offer-name{font-family:var(--font-display);font-size:38px;letter-spacing:2px;line-height:.95;margin-bottom:8px}
.mb-offer-tagline{font-size:13px;margin-bottom:20px;line-height:1.4}

/* ─ Feature lists ─ */
.mb-feats{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.mb-feat{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.4}
.mb-fi{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.mb-fi svg{width:10px;height:10px}
.mb-fi-ok{background:var(--gd);color:var(--g)}
.mb-fi-plus{background:rgba(255,215,100,.2);color:#e8c86a}
.mb-fi-white{background:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
.mb-feats-shared{opacity:.75}

/* ─ Section séparateurs ─ */
.mb-excl-sep,.mb-shared-sep{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px}
.mb-excl-sep{color:#e8c86a}
.mb-shared-sep{color:rgba(255,255,255,.35);margin-top:14px}
.mb-excl-sep::after,.mb-shared-sep::after{content:'';flex:1;height:1px}
.mb-excl-sep::after{background:rgba(232,200,106,.25)}
.mb-shared-sep::after{background:rgba(255,255,255,.12)}

/* ─ CTAs ─ */
.mb-cta{width:100%;padding:14px 20px;border-radius:var(--r);font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;font-family:var(--font-body);border:none;margin-top:auto}
.mb-cta-fan{background:var(--gris);color:var(--muted);cursor:default}
.mb-cta-prem{background:#fff;color:var(--g)}
.mb-cta-prem:hover{background:rgba(255,255,255,.88)}

[data-theme="dark"] .mb-fan{background:linear-gradient(145deg,#1a1508,var(--card));border-color:rgba(205,183,137,.25)}
[data-theme="dark"] .mb-cta-fan{background:var(--gris-2);color:var(--muted)}

/* ══ HISTORIQUE ══ */
.hist-stats{display:flex;align-items:center;margin:0 16px 16px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:16px 12px}
.hist-stat{flex:1;text-align:center}
.hist-stat-val{font-size:17px;font-weight:700;color:var(--anthracite);font-family:var(--font-display);letter-spacing:.5px}
.hist-stat-lbl{font-size:11px;color:var(--sub);margin-top:2px}
.hist-stat-sep{width:1px;height:32px;background:var(--bdr)}

.pills{display:flex;gap:7px;padding:0 16px 14px;overflow-x:auto;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{display:inline-flex;align-items:center;padding:7px 14px;border-radius:20px;font-size:13px;font-weight:600;border:1px solid var(--bdr);background:var(--card);color:var(--sub);cursor:pointer;white-space:nowrap;transition:all .2s;font-family:var(--font-body);min-height:36px}
.pill:hover{color:var(--txt);border-color:var(--muted)}
.pill.active{background:var(--gd);border-color:var(--gb);color:var(--g)}
.pill-ct{display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,.07);border-radius:10px;font-size:11px;padding:0 5px;min-width:18px;height:18px;margin-left:5px;font-weight:700}
.pill.active .pill-ct{background:rgba(0,102,72,.15)}

.timeline{padding:0 16px}
.tl-month{margin-bottom:4px}
.tl-month-hdr{display:flex;align-items:center;gap:10px;padding:8px 0 10px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.tl-month-hdr::after{content:'';flex:1;height:1px;background:var(--bdr)}
.tl-item{display:flex;gap:12px;padding-bottom:10px}
.tl-icon{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}
.tl-icon svg{width:18px;height:18px}
.ico-t{background:rgba(0,102,72,.1);color:var(--g)}
.ico-s{background:rgba(37,77,152,.1);color:var(--bleu)}
.ico-m{background:rgba(205,183,137,.22);color:var(--or-d)}
.tl-cnt{flex:1;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:12px 14px}
.tl-row-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:4px}
.tl-row-bot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.tl-title{font-size:14px;font-weight:600;color:var(--anthracite)}
.tl-amt{font-size:15px;font-weight:700;color:var(--anthracite);white-space:nowrap}
.tl-amt.plus{color:var(--g)}
.tl-sub{font-size:12px;color:var(--sub)}
.tl-date{font-size:11px;color:var(--muted);white-space:nowrap}
.tl-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;padding:2px 8px;border-radius:20px;text-transform:uppercase}
.tag-t{background:rgba(0,102,72,.1);color:var(--g)}
.tag-s{background:rgba(37,77,152,.1);color:var(--bleu)}
.tag-m{background:rgba(205,183,137,.25);color:var(--or-d)}

/* ══ PROFIL ══ */
.profile-hero{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r2);padding:16px;display:flex;align-items:center;gap:14px;margin-bottom:10px}
.p-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--g2));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.p-name{font-size:16px;font-weight:700;color:var(--anthracite)}
.p-sub{font-size:12px;color:var(--sub);margin-top:2px}
.p-id{font-size:11px;color:var(--muted);margin-top:2px}
.p-edit-btn{background:none;border:1px solid var(--bdr);border-radius:7px;padding:7px 12px;color:var(--sub);font-size:13px;cursor:pointer;font-family:var(--font-body);transition:all .2s;margin-left:auto;min-height:36px}
.p-edit-btn:hover{color:var(--txt);border-color:var(--muted)}

.acc{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);margin-bottom:7px;overflow:hidden;transition:border-color .2s}
.acc.open{border-color:var(--gb)}
.acc-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;user-select:none;min-height:56px}
.acc-hdr-l{display:flex;align-items:center;gap:11px}
.acc-icon{width:34px;height:34px;border-radius:7px;background:var(--gd);display:flex;align-items:center;justify-content:center;color:var(--g);flex-shrink:0}
.acc-t{font-size:14px;font-weight:600;color:var(--anthracite)}
.acc-s{font-size:11px;color:var(--sub);margin-top:1px}
.acc-chev{color:var(--sub);transition:transform .3s;flex-shrink:0}
.acc.open .acc-chev{transform:rotate(180deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .38s ease}
.acc.open .acc-body{max-height:500px}
.acc-content{padding:0 16px 16px;display:flex;flex-direction:column;gap:11px}

.f-lbl{font-size:11px;color:var(--sub);text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;display:block;font-weight:600}
.f-inp{width:100%;background:var(--gris);border:1px solid var(--bdr);border-radius:7px;padding:11px 12px;font-size:14px;color:var(--txt);font-family:var(--font-body);transition:border-color .2s;outline:none;min-height:44px}
.f-inp:focus{border-color:var(--gb);background:var(--card)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}

.pref-link{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);cursor:pointer;transition:all .2s;min-height:48px}
.pref-link:hover{border-color:var(--muted);background:var(--gris)}
.pref-link-t{font-size:14px;font-weight:600;color:var(--anthracite)}
.pref-link-s{font-size:12px;color:var(--sub);margin-top:2px}

/* ══ PRÉFÉRENCES ══ */
.rgpd{background:var(--gd);border:1px solid var(--gb);border-radius:var(--r);padding:13px 14px;margin-bottom:12px;display:flex;gap:10px}
.rgpd-ico{color:var(--g);flex-shrink:0;margin-top:1px}
.rgpd-txt{font-size:12px;color:var(--sub);line-height:1.6}
.rgpd-txt strong{color:var(--anthracite)}

.pref-sec-lbl{font-size:11px;color:var(--sub);text-transform:uppercase;letter-spacing:1.5px;margin:14px 0 9px;padding-top:2px;font-weight:700}
.pref-item{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:14px;margin-bottom:7px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.pref-t{flex:1}
.pref-n{font-size:13px;font-weight:600;margin-bottom:3px;color:var(--anthracite)}
.pref-d{font-size:11px;color:var(--sub);line-height:1.5}

.toggle{position:relative;width:42px;height:23px;flex-shrink:0;margin-top:1px}
.toggle input{opacity:0;width:0;height:0}
.tslider{position:absolute;inset:0;background:var(--gris-2);border-radius:12px;cursor:pointer;transition:.28s}
.tslider::before{content:'';position:absolute;width:17px;height:17px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.28s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle input:checked+.tslider{background:var(--g)}
.toggle input:checked+.tslider::before{transform:translateX(19px)}

/* ── CONSENTEMENTS (préférences) ── */
.consent-master{display:flex;align-items:center;gap:14px;padding:15px 16px;margin-bottom:6px;background:linear-gradient(135deg,rgba(0,102,72,.07),var(--card) 70%);border:1px solid var(--gb);border-radius:var(--r)}
.consent-master-t{flex:1}
.consent-master-n{font-size:14px;font-weight:700;color:var(--anthracite)}
.consent-master-d{font-size:11px;color:var(--sub);margin-top:2px}

.consent-list{display:flex;flex-direction:column;gap:7px}
.consent-item{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:13px 14px;transition:border-color .2s,background .2s}
.consent-item:hover{border-color:var(--gb)}
.consent-ico{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--gd);color:var(--g)}
.consent-ico svg{width:19px;height:19px}
.consent-t{flex:1;min-width:0}
.consent-n{font-size:13px;font-weight:600;color:var(--anthracite);line-height:1.3}
.consent-d{font-size:11px;color:var(--sub);margin-top:2px;line-height:1.4}

.pref-data-link{font-size:12px;color:var(--sub);text-decoration:none;border-bottom:1px solid var(--muted);padding-bottom:1px}
.pref-data-link:hover{color:var(--txt)}

@media(min-width:720px){.consent-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}}

/* ── DIVIDER ── */
.divider{height:1px;background:var(--bdr);margin:14px 0}

/* ══ LOGIN ══ */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(160deg,var(--vert-premium),var(--vert-historique))}
.login-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r2);padding:32px 26px;box-shadow:var(--shadow)}
.login-logo{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:22px}
.login-logo img{height:74px;width:auto}
.login-title{font-family:var(--font-display);font-size:28px;letter-spacing:2px;color:var(--anthracite);text-align:center;line-height:1}
.login-title span{color:var(--g)}
.login-sub{font-size:13px;color:var(--sub);text-align:center;margin-top:4px;margin-bottom:22px}
.login-form{display:flex;flex-direction:column;gap:14px}
.login-form .btn{margin-top:4px}
.login-error{background:rgba(210,53,59,.1);border:1px solid rgba(210,53,59,.35);color:var(--rouge);font-size:13px;font-weight:600;border-radius:9px;padding:10px 12px}
.login-foot{font-size:11px;color:var(--muted);text-align:center;margin-top:18px;line-height:1.5}
.btn-ms{background:var(--card);color:var(--txt);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-size:14px;font-weight:600;border-radius:9px;padding:11px 18px;min-height:44px;width:100%;cursor:pointer;transition:all .2s;font-family:var(--font-body);box-sizing:border-box}
.btn-ms:hover{background:var(--gris);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.12)}

/* ── DIVIDER ── */
.divider{height:1px;background:var(--bdr);margin:14px 0}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gris-2);border-radius:3px}