/* ===========================================================
   Quelle Légende du Foot es-tu ? — FootStats
   Thème « stade » : vert pelouse, lignes blanches, accent or.
   Mobile-first, sobre et lisible.
   =========================================================== */
:root{
  --pitch-1:#0a2a18;        /* vert profond */
  --pitch-2:#0d3a22;        /* vert pelouse */
  --pitch-3:#10472a;
  --card:#0f3320;
  --card-soft:#16432c;
  --line:rgba(255,255,255,.14);
  --ink:#f3f7f4;
  --ink-soft:#bcd2c4;
  --gold:#f5c542;
  --gold-deep:#e0a90c;
  --grass:#27c46a;
  --yt:#ff3d3d;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --radius:20px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--pitch-1);
  line-height:1.6;
  min-height:100vh;
  min-height:100dvh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* fond pelouse + lignes de stade */
.pitch-bg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 600px at 50% -10%, #15522f 0%, var(--pitch-1) 60%),
    repeating-linear-gradient(0deg, transparent 0 54px, rgba(255,255,255,.018) 54px 108px);
}
.pitch-bg::before{
  content:""; position:absolute; left:50%; top:46%;
  width:min(78vw,520px); height:min(78vw,520px);
  transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,.05);
  border-radius:50%;
}

.wrap{
  width:100%;
  max-width:560px;
  margin:0 auto;
  padding:22px 16px 40px;
}

/* ---------- Carte / écrans ---------- */
.card{
  background:linear-gradient(180deg,var(--card) 0%,#0c2c1b 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 20px;
}
.screen{ display:none; animation:pop .35s ease both; }
.screen--active{ display:block; }
@keyframes pop{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

.brandline{
  font-family:'Oswald',sans-serif;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--gold);
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:14px;
}

/* ---------- Accueil ---------- */
.title{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:clamp(2rem,8vw,2.9rem);
  line-height:1.04;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin-bottom:10px;
}
.title .hl{ color:var(--gold); }
.subtitle{
  font-family:'Oswald',sans-serif; font-weight:500;
  font-size:1.05rem; color:var(--ink-soft); margin-bottom:18px;
}
.intro-text{ color:var(--ink-soft); font-size:1rem; margin-bottom:24px; }
.intro-text strong{ color:var(--ink); }
.intro-text em{ color:var(--gold); font-style:normal; font-weight:600; }
.meta-line{ margin-top:14px; font-size:.84rem; color:var(--ink-soft); text-align:center; }

/* Accès direct à l'offre depuis l'écran d'accueil (fenêtre CdM) — secondaire au test */
.intro-offer{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); text-align:center; }
.intro-offer-line{ font-size:.92rem; color:var(--ink-soft); margin-bottom:12px; }
.intro-offer-line strong{ color:var(--ink); }
.intro-offer-link{
  display:inline-block;
  font-family:'Inter',sans-serif; font-weight:700; font-size:.95rem;
  color:var(--gold); text-decoration:none;
  border:1.5px solid rgba(245,197,66,.5); border-radius:12px;
  padding:11px 16px;
  transition:background .15s ease, filter .15s ease;
}
.intro-offer-link:hover{ background:rgba(245,197,66,.1); }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  width:100%;
  font-family:'Inter',sans-serif;
  font-weight:700; font-size:1rem;
  padding:15px 20px;
  border:none; border-radius:14px;
  cursor:pointer;
  transition:transform .12s ease, filter .15s ease, background .15s ease;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.98); }
.btn--big{ font-size:1.08rem; padding:17px 22px; }
.btn--primary{ background:var(--grass); color:#06291a; }
.btn--primary:hover{ filter:brightness(1.06); }
.btn--gold{ background:linear-gradient(180deg,var(--gold) 0%,var(--gold-deep) 100%); color:#3a2a00; }
.btn--ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn--ghost:hover{ background:rgba(255,255,255,.05); }
.btn--yt{ background:var(--yt); color:#fff; font-size:1.05rem; padding:16px 22px; }
.btn--yt:hover{ filter:brightness(1.07); }

/* ---------- Quiz ---------- */
.quiz-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.counter{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.05em; color:var(--gold); font-size:.9rem; }
.restart-mini{
  background:transparent; border:1px solid var(--line); color:var(--ink-soft);
  width:44px; height:44px; min-width:44px; min-height:44px;
  border-radius:50%; cursor:pointer; font-size:1.1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.restart-mini:hover{ color:var(--ink); }
.progress{ height:8px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; margin-bottom:24px; }
.progress-bar{ height:100%; width:0; background:linear-gradient(90deg,var(--grass),var(--gold)); border-radius:99px; transition:width .35s ease; }

.question{
  font-family:'Oswald',sans-serif; font-weight:600;
  font-size:clamp(1.3rem,5.4vw,1.7rem); line-height:1.2;
  margin-bottom:22px;
}
.answers{ display:flex; flex-direction:column; gap:12px; }
.answer{
  text-align:left; width:100%;
  background:var(--card-soft);
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:15px 16px;
  color:var(--ink); font-size:1rem; font-weight:500;
  cursor:pointer;
  transition:transform .1s ease, border-color .15s ease, background .15s ease;
  display:flex; align-items:center; gap:12px;
  -webkit-tap-highlight-color:transparent;
}
.answer:hover{ border-color:var(--grass); background:#1a4d31; }
.answer:active{ transform:scale(.99); }
.answer .dot{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--line); display:grid; place-items:center;
  font-family:'Oswald',sans-serif; font-weight:700; font-size:.85rem; color:var(--gold);
}
.answer.sel{ border-color:var(--gold); background:#1d5235; }

/* ---------- Résultat ---------- */
.result-head{ text-align:center; margin-bottom:8px; }
.res-flag{ font-size:2.4rem; display:block; line-height:1; }
.res-pre{ color:var(--ink-soft); font-size:1rem; margin-top:6px; }
.res-name{
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(2rem,9vw,3rem); line-height:1.02; color:var(--gold); margin:2px 0 4px;
}
.res-archetype{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:1.15rem; color:var(--ink);
  letter-spacing:.02em;
}
.res-meta{ font-size:.85rem; color:var(--ink-soft); margin-top:4px; }
.res-desc{ color:var(--ink-soft); font-size:1.02rem; margin:18px 0; text-align:center; }

.res-tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:20px; }
.tag{
  background:rgba(245,197,66,.12); border:1px solid rgba(245,197,66,.35);
  color:var(--gold); font-size:.82rem; font-weight:600; padding:6px 12px; border-radius:99px;
}

.fact-box{
  background:rgba(0,0,0,.22); border:1px solid var(--line);
  border-radius:14px; padding:16px 16px 14px; margin-bottom:22px;
}
.fact-title{ font-family:'Oswald',sans-serif; font-weight:600; color:var(--gold); margin-bottom:8px; font-size:1rem; }
.fact-list{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.fact-list li{ position:relative; padding-left:20px; font-size:.95rem; color:var(--ink-soft); }
.fact-list li::before{ content:"⚽"; position:absolute; left:0; top:0; font-size:.8rem; }

.share-row{ display:flex; gap:10px; margin-bottom:22px; }
.share-row .btn{ width:auto; flex:1; }

/* CTA YouTube */
.cta-yt{
  background:linear-gradient(180deg,#1c1c1c 0%,#111 100%);
  border:1px solid rgba(255,61,61,.35);
  border-radius:16px; padding:20px 18px; text-align:center; margin-bottom:18px;
}
.cta-yt-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.2rem; margin-bottom:4px; }
.cta-yt-sub{ color:var(--ink-soft); font-size:.92rem; margin-bottom:14px; }

/* Email capture */
.email-cap{
  background:var(--card-soft); border:1px solid var(--line);
  border-radius:16px; padding:18px; text-align:center; margin-bottom:16px;
}
.email-title{ font-weight:600; font-size:.98rem; margin-bottom:4px; }
.email-sub{ color:var(--ink-soft); font-size:.86rem; margin-bottom:12px; }
.email-row{ display:flex; gap:8px; }
.email-input{
  flex:1; min-width:0; padding:13px 14px; border-radius:12px;
  border:1.5px solid var(--line); background:#0a2517; color:var(--ink); font-size:1rem;
}
.email-input::placeholder{ color:#6f8c7c; }
.email-input:focus{ outline:none; border-color:var(--grass); }
.email-row .btn{ width:auto; padding:13px 20px; }
.email-msg{ margin-top:10px; font-weight:600; font-size:.9rem; color:var(--grass); }
.email-note{ margin-top:10px; font-size:.78rem; color:var(--ink-soft); }
/* Petits écrans : le champ email est écrasé à côté du bouton -> on empile (fix 04/07/2026) */
@media (max-width:480px){
  .email-row{ flex-direction:column; }
  .email-row .btn{ width:100%; }
}

/* Offre — Guide & Grand Quiz CdM 2026 (page native footperf.fr/coupe-du-monde-2026) */
.cta-offer{
  background:linear-gradient(180deg,#1a3d1f 0%,#0f2e17 100%);
  border:1.5px solid rgba(245,197,66,.45);
  border-radius:16px;
  padding:22px 18px;
  text-align:center;
  margin-bottom:18px;
}
.cta-offer-kicker{
  font-family:'Oswald',sans-serif;
  letter-spacing:.12em;
  font-size:.72rem;
  color:var(--gold);
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:8px;
}
.cta-offer-title{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:clamp(1.2rem,5vw,1.6rem);
  line-height:1.15;
  color:var(--ink);
  margin-bottom:8px;
}
.cta-offer-pitch{
  color:var(--ink-soft);
  font-size:.96rem;
  margin-bottom:14px;
}
.cta-offer-points{
  list-style:none;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:18px;
  font-size:.92rem;
  color:var(--ink-soft);
}
.cta-offer-price{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:14px;
}
.price-tag{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:1.65rem;
  color:var(--gold);
}
.price-access{
  font-size:.84rem;
  color:var(--grass);
  font-weight:600;
  background:rgba(39,196,106,.12);
  border:1px solid rgba(39,196,106,.3);
  border-radius:99px;
  padding:3px 10px;
}
.cta-offer-btn{ margin-bottom:10px; }
.cta-offer-fine{
  font-size:.78rem;
  color:var(--ink-soft);
  margin-top:8px;
}

.more-soon{ text-align:center; font-size:.92rem; color:var(--ink-soft); margin-bottom:18px; }

/* Ressources */
.resources{ margin-top:22px; border-top:1px solid var(--line); padding-top:18px; }
.res-h{ font-family:'Oswald',sans-serif; font-weight:600; color:var(--gold); font-size:.95rem; margin-bottom:10px; text-transform:uppercase; letter-spacing:.06em; }
.res-links{ list-style:none; display:flex; flex-direction:column; gap:8px; font-size:.95rem; color:var(--ink-soft); }
.res-links a{ color:var(--gold); text-decoration:none; font-weight:600; }
.res-links a:hover{ text-decoration:underline; }
.res-fine{ color:var(--ink-soft); font-size:.78rem; font-weight:400; }

/* Footer */
.foot{ text-align:center; margin-top:26px; color:var(--ink-soft); font-size:.84rem; }
.foot strong{ color:var(--ink); }
.foot-fine{ font-size:.74rem; opacity:.7; margin-top:6px; }

/* tablette / desktop */
@media (min-width:600px){
  .wrap{ padding-top:40px; }
  .card{ padding:34px 30px; }
  .share-row .btn{ font-size:1rem; }
}