/* 11SIMULATOR — « NUIT DE MATCH » · pages publiques (guides, fiches joueurs/clubs, base, classement, défis…)
   Chargé EN DERNIER après seo.css / growth-pages.css / db-browser.css / landing-v2.css / cine.css.
   N'édite pas les anciennes couches : ce fichier les recouvre. */
@import url("/assets/fonts/fonts.css");

:root{
  color-scheme:dark;
  /* Palette nuit de match */
  --n-bg:#080D12; --n-bg-2:#0D141B; --n-card:#111A23; --n-card-2:#16212C; --n-raise:#1B2834;
  --n-text:#ECF1EE; --n-soft:#C3CDC9; --n-muted:#8494A0;
  --n-line:rgba(236,241,238,.08); --n-line-2:rgba(236,241,238,.16);
  --n-gold:#F2C14E; --n-gold-2:#DCA834; --n-on-gold:#14110A;
  --n-grass:#2FD07F; --n-grass-2:#1FA862; --n-red:#FF6B5E;
  --n-radius:16px; --n-radius-sm:10px;
  --n-display:"Outfit","Inter",ui-sans-serif,system-ui,sans-serif;
  --n-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --n-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --n-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -24px rgba(0,0,0,.9);
  /* Anciennes variables, redirigées */
  --bg:var(--n-bg); --panel:var(--n-card); --panel2:var(--n-card-2); --ink:var(--n-text); --muted:var(--n-muted);
  --line:var(--n-line); --line2:var(--n-line-2); --red:var(--n-gold); --red2:var(--n-gold-2);
  --green:var(--n-grass); --gold:var(--n-gold); --accent:var(--n-gold);
  --serif:var(--n-display); --mono:var(--n-mono); --max:1160px;
}
/* Pages qui chargent aussi theme-updraft.css (landings /fr/, /en/…) : mêmes variables --up-* que le jeu */
:root,html[data-theme],html[data-theme="ink"],html[data-theme="paper"]{
  --up-accent:var(--n-gold); --up-accent-2:var(--n-gold-2); --up-on-accent:var(--n-on-gold);
  --up-bg:var(--n-bg); --up-bg-2:var(--n-bg-2); --up-card:var(--n-card); --up-text:var(--n-text); --up-muted:var(--n-muted);
  --up-line:var(--n-line); --up-shadow:var(--n-shadow);
}
html body main{background-color:transparent !important}

/* ---------- Base ---------- */
html{background:var(--n-bg);overflow-x:clip}
main p{max-width:76ch}
body{
  background:
    radial-gradient(1100px 520px at 85% -8%,rgba(242,193,78,.10),transparent 60%),
    radial-gradient(900px 600px at -10% 10%,rgba(47,208,127,.07),transparent 60%),
    var(--n-bg) !important;
  background-attachment:fixed !important;
  color:var(--n-text);
  font:16px/1.65 var(--n-body);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","ss01";
}
::selection{background:var(--n-gold);color:var(--n-on-gold)}
a{color:inherit;text-underline-offset:3px;text-decoration-color:rgba(242,193,78,.45)}
a:hover{text-decoration-color:var(--n-gold)}
:focus-visible{outline:2px solid var(--n-gold);outline-offset:3px;border-radius:6px}
.wrap{width:min(var(--max),calc(100% - 32px))}
.skip:focus{background:var(--n-gold);color:var(--n-on-gold);border-radius:8px}

h1,h2,h3,.brand,.stat strong,.guide strong{font-family:var(--n-display);text-transform:none;letter-spacing:-.03em}
h1{font-weight:800;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;letter-spacing:-.045em;margin:.25em 0 .3em;
  background:linear-gradient(180deg,#fff 30%,#C9D3CF);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.12;margin:.2em 0 .7em}
h3{font-weight:650;font-size:1.12rem;line-height:1.3}
p{color:var(--n-soft)}
.lead,.prose p,.tips p,.toc a,.contact-help ul,.callout{color:var(--n-soft) !important}
.lead{font-size:1.12rem;max-width:62ch}
.prose strong,.lead strong{color:var(--n-text)}
.muted,.card p{color:var(--n-muted)}

/* ---------- En-tête ---------- */
.top{
  position:sticky;top:0;z-index:30;
  padding:14px 0 !important;margin:0 !important;width:auto !important;
  /* fond pleine largeur sans déborder : ombre étendue + découpe horizontale */
  background:rgba(8,13,18,.80);box-shadow:0 0 0 100vmax rgba(8,13,18,.80),0 1px 0 100vmax var(--n-line);
  clip-path:inset(0 -100vmax);
  border-bottom:0 !important;
}
.top::after{display:none !important}
.brand{gap:10px;font-weight:800;font-size:1.15rem;letter-spacing:-.04em;color:var(--n-text)}
.brand img{width:34px !important;height:34px !important;border-radius:9px}
.brand img,.mark img,html[data-theme] .brand img,html[data-theme] .mark img,html[data-theme] .hero .mark img{filter:none !important}
.navlinks,.langs{gap:4px}
.navlinks a,.langs a,.lang-toggle{
  border:1px solid transparent !important;background:transparent !important;color:var(--n-muted) !important;
  font:600 .82rem/1 var(--n-body) !important;padding:9px 12px !important;border-radius:999px !important;
  transition:color .15s,background-color .15s;
}
.navlinks a:hover,.langs a:hover,.lang-toggle:hover{color:var(--n-text) !important;background:rgba(255,255,255,.06) !important}
.navlinks a[aria-current="page"],.langs a[aria-current="page"]{background:var(--n-gold) !important;color:var(--n-on-gold) !important}
.langs a{font-family:var(--n-mono) !important;font-size:.72rem !important;padding:7px 9px !important}

.breadcrumbs{font:500 .78rem var(--n-mono);color:var(--n-muted);padding-top:22px}
.breadcrumbs a{color:var(--n-soft);text-decoration:none}
.breadcrumbs a:hover{color:var(--n-gold)}

/* ---------- Hero ---------- */
.hero{border-bottom:0 !important;padding:clamp(36px,6vw,72px) 0 28px}
.eyebrow{color:var(--n-gold) !important;font:600 .7rem var(--n-mono) !important;letter-spacing:.18em !important;text-transform:uppercase}
.eyebrow::before{width:8px !important;height:8px !important;border-radius:50%;clip-path:none !important;
  background:var(--n-grass) !important;box-shadow:0 0 0 4px rgba(47,208,127,.15)}
.mark{background:radial-gradient(circle at 50% 40%,var(--n-card-2),var(--n-card));border:1px solid var(--n-line-2);
  border-radius:28px;box-shadow:var(--n-shadow)}
.mark img{filter:drop-shadow(0 20px 40px rgba(242,193,78,.25)) !important}

/* ---------- Boutons ---------- */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:linear-gradient(180deg,var(--n-gold),var(--n-gold-2)) !important;color:var(--n-on-gold) !important;
  border:0 !important;border-radius:12px !important;padding:13px 20px !important;
  font:700 .95rem/1.1 var(--n-body) !important;letter-spacing:0 !important;text-transform:none !important;
  transform:none !important;box-shadow:0 10px 26px -10px rgba(242,193,78,.6),inset 0 1px 0 rgba(255,255,255,.35) !important;
  text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,filter .15s;
}
.cta:hover{transform:translateY(-1px) !important;filter:brightness(1.05)}
.cta:active{transform:translateY(1px) !important}
.cta.secondary{background:rgba(255,255,255,.04) !important;color:var(--n-text) !important;
  border:1px solid var(--n-line-2) !important;box-shadow:none !important}
.cta.secondary:hover{background:rgba(255,255,255,.08) !important;border-color:rgba(242,193,78,.5) !important}
.trust span:before{color:var(--n-grass)}
.trust{color:var(--n-muted)}

/* ---------- Surfaces ---------- */
.card,.guide,.stat,.steps li,.tips li,.faq details,.toc,.callout,.attr,.compare-panel,.contact-panel,.contact-help,.contact-direct-card,.mode-card,.challenge-card{
  background:linear-gradient(180deg,var(--n-card-2),var(--n-card)) !important;
  border:1px solid var(--n-line) !important;border-radius:var(--n-radius) !important;
  box-shadow:var(--n-shadow) !important;color:var(--n-text);
}
.card{border-top:1px solid var(--n-line) !important;padding:22px}
.card h3{font:600 .72rem var(--n-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--n-muted);margin:0 0 14px}
.section{padding:clamp(26px,4vw,44px) 0}
.section.alt{background:transparent !important;border:0 !important}
.grid,.guide-grid,.faq{gap:14px}

.guide{border-top:1px solid var(--n-line) !important;transition:transform .18s,border-color .18s}
.guide:hover{transform:translateY(-2px);border-color:rgba(242,193,78,.45) !important;box-shadow:var(--n-shadow) !important}
.guide small{color:var(--n-gold) !important;font:600 .66rem var(--n-mono) !important;letter-spacing:.14em}
.guide strong{color:var(--n-text);font-size:1.12rem;margin:.35rem 0}
.guide span{color:var(--n-muted)}

.stat strong{color:var(--n-gold) !important;font-weight:800;font-size:1.9rem;letter-spacing:-.04em}
.stat span{color:var(--n-muted)}
.steps li:before{background:var(--n-gold) !important;color:var(--n-on-gold) !important;font:800 .9rem var(--n-display) !important}
.faq summary{font-family:var(--n-display);font-weight:600;color:var(--n-text)}
.faq details[open]{border-color:rgba(242,193,78,.35) !important}
.callout{border-left:3px solid var(--n-gold) !important}
.callout a,.legal a{color:var(--n-gold) !important}
.toc a{text-decoration:none}.toc a:hover{color:var(--n-gold) !important}

/* ---------- Fiche joueur ---------- */
.player-hero{gap:32px}
.meta-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tag{background:rgba(255,255,255,.04) !important;border:1px solid var(--n-line-2) !important;color:var(--n-soft) !important;
  border-radius:999px !important;padding:6px 12px !important;font:500 .8rem var(--n-body) !important}
.tag strong{color:var(--n-text);font-family:var(--n-display);font-weight:700}
.tag a{color:var(--n-text);text-decoration:none}.tag a:hover{color:var(--n-gold)}
.ovr-tag{border-color:rgba(242,193,78,.55) !important;background:rgba(242,193,78,.10) !important}
.ovr-tag strong{color:var(--n-gold)}
.rating-badge{
  width:132px !important;height:132px !important;border-radius:50% !important;border:0 !important;
  background:radial-gradient(circle at 50% 35%,#21303d,var(--n-card)) !important;
  box-shadow:0 0 0 2px var(--n-gold),0 0 0 8px rgba(242,193,78,.12),0 24px 60px -18px rgba(242,193,78,.55) !important;
  align-content:center;gap:2px;
}
.rating-badge span{font:800 3rem/1 var(--n-display) !important;color:var(--n-gold) !important;letter-spacing:-.05em}
.rating-badge small{font:600 .62rem var(--n-mono) !important;color:var(--n-muted) !important;letter-spacing:.2em}
.attrs-grid{gap:10px !important}
.attr{padding:16px 10px !important;position:relative;overflow:hidden}
.attr span{color:var(--n-muted) !important;font:600 .66rem var(--n-mono) !important;letter-spacing:.14em}
.attr strong{display:block;margin-top:4px;font:800 1.8rem/1 var(--n-display) !important;letter-spacing:-.04em;color:var(--n-text)}
.attr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--n-grass),var(--n-gold));opacity:.8}
.kv li{border-bottom:1px solid var(--n-line) !important;padding:8px 0 !important}
.kv li:last-child{border-bottom:0 !important}
.kv span{color:var(--n-muted)}
.kv strong{color:var(--n-text);font-weight:600}

/* Listes de liens (coéquipiers, profils similaires, clubs) */
.link-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.link-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;
  background:var(--n-card);border:1px solid var(--n-line);border-radius:12px;transition:border-color .15s,background-color .15s}
.link-list li:hover{border-color:rgba(242,193,78,.4);background:var(--n-card-2)}
.link-list a{color:var(--n-text);font-weight:600;text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-list a:hover{color:var(--n-gold)}
.link-list .muted{font:500 .74rem var(--n-mono);color:var(--n-muted);white-space:nowrap}

/* ---------- Tableaux / base 2026-27 ---------- */
.table-wrap{background:var(--n-card) !important;border:1px solid var(--n-line) !important;border-radius:var(--n-radius) !important;box-shadow:var(--n-shadow)}
table{color:var(--n-text)}
th{background:var(--n-bg-2) !important;color:var(--n-muted) !important;font:600 .66rem var(--n-mono) !important;letter-spacing:.12em !important;border-bottom:1px solid var(--n-line-2) !important}
td,th{border-bottom:1px solid var(--n-line) !important}
tr:hover td{background:rgba(242,193,78,.05) !important}
td.name a,td a{color:var(--n-text);text-decoration:none;font-weight:600}
td.name a:hover,td a:hover{color:var(--n-gold)}
.ovr{font-family:var(--n-display);font-weight:800}
.ovr.high{color:var(--n-grass) !important}.ovr.mid{color:var(--n-gold) !important}.ovr.low{color:var(--n-muted) !important}
.filters{background:linear-gradient(var(--n-bg) 80%,transparent) !important;top:60px}
.filters label{color:var(--n-muted) !important;font:600 .66rem var(--n-mono) !important;letter-spacing:.12em}
input,select,textarea,.filters input,.filters select,.contact-panel input,.contact-panel select,.contact-panel textarea{
  background:var(--n-card) !important;color:var(--n-text) !important;border:1px solid var(--n-line-2) !important;
  border-radius:10px !important;font:500 .95rem var(--n-body) !important;padding:10px 12px !important;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--n-gold) !important;box-shadow:0 0 0 3px rgba(242,193,78,.18) !important}
select option{background:var(--n-card);color:var(--n-text)}
.toolbar{color:var(--n-muted) !important;font:500 .78rem var(--n-mono) !important}
.toolbar button,.compare-btn,.shortlist-tray button,.share-card-actions a,.share-card-actions button{
  background:rgba(255,255,255,.04) !important;color:var(--n-text) !important;border:1px solid var(--n-line-2) !important;
  border-radius:8px !important;font:600 .74rem var(--n-body) !important;padding:6px 10px !important;cursor:pointer;
}
.toolbar button:not(:disabled):hover,.compare-btn:hover,.shortlist-tray button:hover{border-color:var(--n-gold) !important;color:var(--n-gold) !important}
.compare-btn.on{background:var(--n-gold) !important;color:var(--n-on-gold) !important;border-color:var(--n-gold) !important}
.compare-card{background:var(--n-bg-2) !important;border:1px solid var(--n-line) !important;border-radius:12px !important}
.compare-vs{color:var(--n-gold) !important}
.stat-row{border-bottom:1px solid var(--n-line) !important}
.stat-row .win{color:var(--n-grass) !important}
.loading,.error{color:var(--n-muted)}.error{color:var(--n-red)}
.share-card-modal{background:rgba(4,7,10,.75) !important;backdrop-filter:blur(6px)}
.share-card-box{background:var(--n-card) !important;border:1px solid var(--n-line-2) !important;border-radius:18px !important;box-shadow:0 30px 80px rgba(0,0,0,.6) !important}

/* ---------- Classement ---------- */
.lb-tabs button,.lb-tabs a{background:rgba(255,255,255,.04);color:var(--n-soft);border:1px solid var(--n-line-2);border-radius:999px;padding:7px 13px;font:600 .8rem var(--n-body);cursor:pointer}
.lb-tabs .active{background:var(--n-gold) !important;color:var(--n-on-gold) !important;border-color:var(--n-gold) !important}

/* ---------- Contact ---------- */
.contact-panel{border-top:1px solid var(--n-line) !important}
.contact-panel label{color:var(--n-text) !important}
.contact-direct-card{border-left:3px solid var(--n-gold) !important}
.contact-direct-card span{color:var(--n-gold) !important}
.contact-status{border-radius:10px !important}
.contact-status.success{background:rgba(47,208,127,.1) !important;color:var(--n-grass) !important}
.contact-status.error{background:rgba(255,107,94,.1) !important;color:var(--n-red) !important}
.contact-status.pending{background:var(--n-card-2) !important;color:var(--n-muted) !important}

/* ---------- Pied de page ---------- */
footer{border-top:1px solid var(--n-line) !important;color:var(--n-muted) !important;margin-top:48px;padding:32px 0 48px}
footer strong{color:var(--n-text)}
.legal{gap:6px 18px}
.legal a{font-weight:600;text-decoration:none}
.legal a:hover{text-decoration:underline}
.legal-note{color:var(--n-muted);font-family:var(--n-mono)}

/* ---------- Mobile ---------- */
@media (max-width:820px){
  .top{flex-wrap:wrap;gap:10px;padding:10px 0 !important}
  .navlinks{overflow-x:auto;flex-wrap:nowrap !important;width:100%;scrollbar-width:none;margin:0 -4px;padding-bottom:2px}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{white-space:nowrap}
  .filters{top:104px}
}
@media (max-width:720px){
  .player-hero{grid-template-columns:1fr auto !important;align-items:start}
  .rating-badge{width:84px !important;height:84px !important}
  .rating-badge span{font-size:2rem !important}
  .attrs-grid{grid-template-columns:repeat(3,1fr) !important}
}
@media (max-width:480px){
  .wrap{width:calc(100% - 32px)}
  .cta-row .cta{width:100%}
}
/* ---------- Intro cinématique (landings /fr/, /en/…) ---------- */
.cine{background:var(--n-bg) !important}
.cine-poster{background:#05080f url(/assets/art/hero-stadium.webp) center/cover !important;filter:saturate(1.1) contrast(1.05)}
.cine-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(3,6,9,.75) 100%),linear-gradient(0deg,rgba(5,8,15,.85) 0%,transparent 35%)}
.cine-cap,.cine-label,.cine-svg,.cine-skip,.cine-scroll{z-index:2}
.cine-cap small{font:600 .7rem/1 var(--n-mono) !important;letter-spacing:.32em !important;color:var(--n-gold) !important;display:inline-flex !important;align-items:center;gap:.7rem}
.cine-cap small::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--n-grass);box-shadow:0 0 0 4px rgba(47,208,127,.18)}
.cine-cap.center small{justify-content:center}
.cine-cap p{font:800 clamp(2rem,5vw,4.2rem)/1.02 var(--n-display) !important;letter-spacing:-.045em !important;color:#fff;text-shadow:0 10px 40px rgba(0,0,0,.6)}
.cine-cap p b{font-weight:800 !important;color:transparent !important;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(100deg,#F2C14E 10%,#FFE29A 50%,#F2C14E 90%)}
.cine-cta{background:linear-gradient(180deg,#FFD877,#DCA834) !important;color:#14110A !important;border:0 !important;font:800 1rem var(--n-display) !important;letter-spacing:.06em !important;text-transform:uppercase;
  box-shadow:0 18px 40px -14px rgba(242,193,78,.8),inset 0 1px 0 rgba(255,255,255,.4) !important;transition:transform .2s,box-shadow .2s !important}
.cine-cta:hover{transform:translateY(-2px) scale(1.02);letter-spacing:.06em !important;box-shadow:0 24px 50px -14px rgba(242,193,78,.95) !important}
.cine-skip{font:600 .68rem var(--n-mono) !important;letter-spacing:.24em !important;color:var(--n-text) !important;border:1px solid var(--n-line-2) !important;background:rgba(8,13,18,.45) !important;backdrop-filter:blur(8px)}
.cine-skip:hover{border-color:var(--n-gold) !important;color:var(--n-gold) !important}
.cine-scroll{font:600 .64rem var(--n-mono) !important;letter-spacing:.34em !important;color:rgba(236,241,238,.7) !important}
.cine-scroll::after{background:linear-gradient(var(--n-gold),transparent) !important}
.cine-label{font:600 .74rem/1.3 var(--n-body) !important;letter-spacing:.12em !important;padding:8px 12px;border-radius:12px;background:rgba(8,13,18,.6);border:1px solid rgba(242,193,78,.35);backdrop-filter:blur(8px)}
.cine-label span{color:var(--n-gold) !important;font-family:var(--n-mono)}
.cine-lines{stroke:rgba(242,193,78,.65) !important}
.cine-bokeh{opacity:.35 !important}
.cine-cursor{width:22px !important;height:22px !important;margin:-11px 0 0 -11px !important;border:1.5px solid var(--n-gold) !important;mix-blend-mode:normal !important;box-shadow:0 0 18px rgba(242,193,78,.35)}
.cine-cursor.hot{width:44px !important;height:44px !important;margin:-22px 0 0 -22px !important;background:rgba(242,193,78,.12) !important}

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