/* ============================================================
   ÉGALITÉ — Shared Design System
   Edit tokens in :root to restyle the whole site from one place.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* --- Palette (sampled from the original egalitetennis.com landing page) --- */
  --bg:            #080e2a;
  --bg-soft:       #0a1230;
  --surface:       #111a3e;
  --surface-2:     #16204a;
  --surface-3:     #1c2856;
  --light:         #f3f5ff;
  --light-2:       #e7eaf9;
  --lime:          #c9dc0a;
  --lime-strong:   #aec00a;
  --ink:           #ffffff;
  --ink-dim:       #c3c9e6;
  --muted:         #8891b8;
  --muted-2:       #626a94;
  --ink-on-light:  #0d1230;
  --muted-on-light:#565f8a;
  --border:        rgba(255,255,255,0.09);
  --border-lime:   rgba(201,220,10,0.4);
  --danger:        #ff6b6b;
  --ok:            #5fd9a0;

  /* --- Type --- */
  --font-hero:     'Anton', 'Oswald', system-ui, sans-serif;
  --font-display:  'Oswald', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;

  /* --- Shape / rhythm --- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --container: 1120px;
  --gutter: clamp(20px, 5vw, 48px);

  --shadow-lime: 0 0 0 1px rgba(215,255,63,0.15), 0 20px 60px -20px rgba(215,255,63,0.25);
  --shadow-soft: 0 20px 60px -25px rgba(0,0,0,0.6);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:
    radial-gradient(1100px 500px at 50% -10%, rgba(215,255,63,0.10), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.1;
  margin:0 0 .5em;
  letter-spacing:0.01em;
  text-transform:uppercase;
}
h1{font-family:var(--font-hero); font-size:clamp(2.6rem,5.6vw,4.4rem); font-weight:400; line-height:1.02; letter-spacing:0.01em;}
h2{font-family:var(--font-hero); font-size:clamp(2rem,4vw,3rem); font-weight:400; line-height:1.05;}
h3{font-size:1.3rem; font-weight:600;}
p{margin:0 0 1em; color:var(--ink-dim);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{padding-left:1.2em; color:var(--ink-dim);}
li{margin-bottom:.4em;}

::selection{background:var(--lime); color:#0a0e18;}

:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

.section{padding:clamp(56px,9vw,110px) 0;}
.section-tight{padding:clamp(32px,5vw,56px) 0;}
.section-border-top{border-top:1px solid var(--border);}

.section-light{
  background:var(--light);
  color:var(--ink-on-light);
  border-top:1px solid var(--light-2);
  border-bottom:1px solid var(--light-2);
}
.section-light h1, .section-light h2, .section-light h3, .section-light h4{color:var(--ink-on-light);}
.section-light p{color:var(--muted-on-light);}
.section-light .text-muted{color:var(--muted-on-light);}
.section-light .card{background:#ffffff; border-color:#e3e6f6;}
.section-light .step-num{background:#ffffff; border-color:var(--border-lime); color:#5a6a10;}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  background:var(--lime);
  color:#0a0e18;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:.5em 1.1em;
  border-radius:var(--radius-pill);
  margin-bottom:1.1em;
}
.eyebrow--outline{
  background:transparent;
  border:1px solid var(--border-lime);
  color:var(--lime);
}

.lede{
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  color:var(--muted);
  max-width:640px;
}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* --- Buttons --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.92rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:.9em 1.7em;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--lime); color:#0a0e18;}
.btn-primary:hover{box-shadow:var(--shadow-lime);}
.btn-outline{background:transparent; border-color:var(--border-lime); color:var(--lime);}
.btn-outline:hover{background:rgba(215,255,63,0.08);}
.btn-ghost{background:var(--surface-2); border-color:var(--border); color:var(--ink);}
.btn-ghost:hover{background:var(--surface-3);}
.btn-sm{padding:.6em 1.2em; font-size:.88rem;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none !important;}

/* --- Store badges --- */
.store-badges{display:flex; gap:12px; flex-wrap:wrap;}
.store-badge{
  display:flex; align-items:center; gap:.7em;
  background:#0d1220; border:1px solid var(--border);
  border-radius:14px; padding:.65em 1.2em;
  transition:border-color .15s ease, transform .15s ease;
}
.store-badge:hover{border-color:var(--border-lime); transform:translateY(-2px);}
.store-badge svg{flex:none;}
.store-badge .label-sm{display:block; font-size:.66rem; color:var(--muted); line-height:1;}
.store-badge .label-lg{display:block; font-family:var(--font-display); font-weight:700; font-size:.98rem; margin-top:.15em;}
.store-badge.is-disabled{opacity:.55; cursor:default;}
.store-badge.is-disabled:hover{transform:none; border-color:var(--border);}

/* --- Nav --- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(8,14,42,0.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:var(--container); margin:0 auto; padding:14px clamp(16px,4vw,var(--gutter));
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:.5em; font-family:var(--font-hero); font-weight:400; font-size:1.2rem; letter-spacing:.02em; flex:none;}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--lime); box-shadow:0 0 14px var(--lime); flex:none;}
.nav-links{display:flex; align-items:center; gap:clamp(12px,2vw,26px); list-style:none; margin:0; padding:0; flex-wrap:nowrap;}
.nav-links a{
  font-family:var(--font-display); font-size:.82rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-dim); transition:color .15s ease; white-space:nowrap;
}
.nav-links a:hover, .nav-links a.is-active{color:var(--lime);}
.nav-actions{display:flex; align-items:center; gap:12px; flex:none;}
.lang-toggle{
  display:flex; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:3px; font-family:var(--font-display); font-weight:600; font-size:.74rem;
}
.lang-toggle button{
  background:none; border:none; color:var(--muted); padding:.4em .8em; border-radius:var(--radius-pill); cursor:pointer; font-family:inherit;
}
.lang-toggle button.is-active{background:var(--lime); color:#0a0e18;}
.nav-toggle{display:none; background:none; border:1px solid var(--border); border-radius:10px; padding:8px 10px; color:var(--ink); cursor:pointer;}
.nav-cta-mobile-only{display:none;}

@media (max-width: 980px){
  .nav-cta-mobile-only{display:block; margin-top:10px;}
  .nav-links{
    position:fixed; inset:64px 12px auto 12px; flex-direction:column; align-items:stretch;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
    padding:18px; gap:4px; box-shadow:var(--shadow-soft); flex-wrap:wrap;
    transform-origin:top; transform:scaleY(0); opacity:0; pointer-events:none; transition:transform .18s ease, opacity .18s ease;
  }
  .nav-links.is-open{transform:scaleY(1); opacity:1; pointer-events:auto;}
  .nav-links a{padding:.7em .5em; border-radius:8px; display:block;}
  .nav-links a:hover{background:var(--surface-2);}
  .nav-cta-inline{display:none;}
  .nav-toggle{display:inline-flex; align-items:center;}
}

/* --- Cards --- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,32px);
}
.card-lime{border-color:var(--border-lime); box-shadow:var(--shadow-lime);}

.grid{display:grid; gap:22px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

/* --- Status pills --- */
.pill{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:.35em .8em; border-radius:var(--radius-pill);
}
.pill-live{background:rgba(95,217,160,0.14); color:var(--ok); border:1px solid rgba(95,217,160,0.3);}
.pill-soon{background:rgba(139,147,169,0.12); color:var(--muted); border:1px solid var(--border);}

/* --- Feature / step rows --- */
.step-num{
  font-family:var(--font-display); font-weight:800; font-size:.85rem;
  width:2.4em; height:2.4em; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--lime); border:1px solid var(--border-lime);
  flex:none;
}

/* --- Phone frame for screenshots --- */
.phone-frame{
  border:1px solid var(--border-lime);
  border-radius:34px;
  overflow:hidden;
  box-shadow:var(--shadow-lime);
  background:var(--surface);
  max-width:280px;
  margin:0 auto;
}
.phone-frame img{width:100%; display:block;}

/* --- Footer --- */
.footer{border-top:1px solid var(--border); padding:56px 0 28px; background:var(--bg-soft);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.footer h4{font-family:var(--font-display); font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); margin-bottom:1em;}
.footer ul{list-style:none; padding:0; margin:0;}
.footer li{margin-bottom:.65em;}
.footer a{color:var(--ink-dim); font-size:.92rem; transition:color .15s ease;}
.footer a:hover{color:var(--lime);}
.footer-bottom{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:.82rem; color:var(--muted-2);
}

/* --- Forms --- */
.field{margin-bottom:18px;}
.field label{display:block; font-size:.85rem; font-weight:600; margin-bottom:.5em; color:var(--ink-dim);}
.field input, .field textarea, .field select{
  width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--ink);
  border-radius:12px; padding:.85em 1em; font-family:var(--font-body); font-size:.98rem;
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--lime); outline:none;}
.field textarea{resize:vertical; min-height:110px;}
.form-note{font-size:.82rem; color:var(--muted);}
.form-success{
  display:none; background:rgba(95,217,160,0.1); border:1px solid rgba(95,217,160,0.35);
  color:var(--ok); padding:1em 1.2em; border-radius:12px; font-size:.92rem; margin-top:14px;
}
.form-success.is-visible{display:block;}

/* --- FAQ accordion --- */
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; color:var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  padding:22px 4px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-q:hover{color:var(--lime);}
.faq-q .icon{flex:none; font-size:1.3rem; color:var(--lime); transition:transform .2s ease;}
.faq-item.is-open .faq-q .icon{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding:0 4px 22px; margin:0; color:var(--muted);}

/* --- Table (pricing compare / legal) --- */
.legal h2{margin-top:1.6em; font-size:1.5rem;}
.legal h2:first-of-type{margin-top:0;}
.legal p, .legal li{color:var(--ink-dim);}
.legal .updated{color:var(--muted); font-size:.9rem; margin-bottom:2em;}

/* --- Misc utility --- */
.flex{display:flex;}
.flex-center{display:flex; align-items:center;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.text-muted{color:var(--muted);}
.badge-dot{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none; display:inline-block;}
.divider{height:1px; background:var(--border); border:none; margin:2.4em 0;}

/* --- Language visibility (JS toggles [data-lang] on <html>) --- */
[data-fr]{display:none;}
html[data-lang="fr"] [data-en]{display:none;}
html[data-lang="fr"] [data-fr]{display:inline;}
html[data-lang="fr"] [data-fr].block{display:block;}
[data-en].block, [data-fr].block{display:block;}

/* --- Reveal-on-scroll ---
   Visible by default (no-JS / slow-JS safe). JS only hides elements that
   start below the fold, then reveals them on scroll — see main.js. */
.reveal{opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease;}
.reveal.reveal-pending{opacity:0; transform:translateY(14px);}
.reveal.is-visible{opacity:1; transform:none;}

/* --- 404 --- */
.not-found{min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 20px;}
.not-found .code{font-family:var(--font-display); font-weight:800; font-size:clamp(4rem,14vw,8rem); color:var(--lime); line-height:1;}