/* Base et Performances */
*, *::before, *::after {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Optimisation des animations */
.hero__visual,
.hero__copy,
section,
.card,
.feature-card {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}
:root {
  --bg: #0b1020;
  --bg-alt: #0f1630;
  --card: #121a39;
  --text: #e6e9f5;
  --muted: #a6b0cf;
  --primary: #5b8cff;
  --primary-600: #3f6ef0;
  --accent: #22d3ee;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --border: #1b254b;
  --contrast: #0b1020;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: linear-gradient(180deg, var(--bg) 0%, #0a0f21 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Loader plein écran */
#loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(800px 300px at 50% -100px, rgba(91,140,255,0.15), transparent),
    linear-gradient(180deg, var(--bg) 0%, #0a0f21 100%);
}
#loader .loader__inner{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; padding:20px }
#loader .loader__stage{ position: relative; width: 288px; height: 288px; }
#loader .loader__logo{ position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:116px; height:auto; border-radius:12px; box-shadow: var(--shadow) }
#loader .loader__ring{ position:absolute; inset:0; transform-origin: 50% 50%; }
#loader .sport-icon{ position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-size:26px; filter: drop-shadow(0 6px 16px rgba(34,211,238,0.15)) }
#loader .loader__text{ color: var(--muted); font-size: 0.95rem }

/* Material Symbols Icons */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.container{
  width: min(1120px, 92%);
  margin-inline:auto;
}

.section{padding: 88px 0}
.section--alt{background: radial-gradient(1200px 400px at 50% -100px, rgba(91,140,255,0.15), transparent), var(--bg-alt)}
.section__title{font-size: clamp(28px, 4vw, 40px); margin:0 0 8px; letter-spacing:-0.02em}
.section__subtitle{color:var(--muted); margin:0 0 32px}
.lead{color:var(--muted); font-size:1.1rem}

/* Pricing contact - full width container with 20px margins */
.pricing-container{
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-right: 20px;
}

/* Contact card block */
.contact-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
}
.contact-card__info{display: grid; gap: 12px; max-width: 420px}
.contact-lines{display: grid; gap: 10px}
.contact-line{display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 12px; padding: 10px 12px; border:1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,0.04)}
.contact-ico{font-size: 18px; display: grid; place-items:center; background: rgba(255,255,255,0.06); width: 28px; height: 28px; border-radius: 8px}
.contact-label{color: var(--muted); font-size: 12px; letter-spacing: 0.2px}
.contact-value a{color:#e6e9f5; text-decoration: none}
.contact-value a:hover{text-decoration: underline}
.contact-note{color: var(--muted); font-size: 0.9rem}

/* Form styles */
.contact-form{display: grid; gap: 14px}
.form-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 14px}
.form-row{display: grid; gap: 6px}
.form-row--full{grid-column: 1 / -1}
.contact-form label{font-size: 0.85rem; color: var(--muted); font-weight: 600}
.contact-form input, .contact-form textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  outline: none;
}
.contact-form input:focus, .contact-form textarea:focus{
  border-color: rgba(91,140,255,0.5);
  box-shadow: 0 0 0 3px rgba(91,140,255,0.15);
}
.form-actions{display:flex; gap: 10px; justify-content: flex-start}

@media (max-width: 900px){
  .contact-card{grid-template-columns: 1fr; padding: 16px}
  .form-grid{grid-template-columns: 1fr}
}

/* Header */
.header{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(8px);
  background: rgba(11,16,32,0.6);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand__logo{width:auto; height:40px; display:block; border-radius:9px; object-fit: contain}
.brand__name{letter-spacing:0.2px}

.nav{display:none}
.nav a{display:flex; align-items:center; gap:10px; color:var(--muted); padding:12px 14px; border-radius:10px; cursor: pointer; font-size: 16px; line-height: 1.2; transition: background .2s ease, color .2s ease, transform .15s ease}
.nav a:hover{background: rgba(255,255,255,0.06); color:#ffffff; transform: translateX(2px)}
.nav .nav-ico{width:22px; text-align:center; filter: drop-shadow(0 2px 8px rgba(34,211,238,0.15))}
.header__cta{display:flex; align-items:center; gap:12px}
.nav-toggle{display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.02); border:1px solid var(--border); color:var(--text); padding:10px 14px; border-radius:12px; cursor: pointer; font-size: 22px; line-height: 1; width: 48px; height: 48px; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease}
.nav-toggle:hover{background: rgba(255,255,255,0.06); box-shadow: var(--shadow); border-color: rgba(91,140,255,0.4)}
.nav-toggle:active{transform: scale(0.96)}
.nav.open{display:flex; position:absolute; right:16px; top:64px; background: var(--bg-alt); padding:14px; border:1px solid var(--border); border-radius:14px; flex-direction:column; box-shadow: var(--shadow); min-width: 240px; gap: 6px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:12px 18px; border-radius:12px; border:1px solid transparent; font-weight:600; padding: 14px 24px; min-height: 48px; cursor: pointer}
.btn--primary{background:linear-gradient(135deg, var(--primary), #7c9dff); color:#0a0f21}
.btn--ghost{background:transparent; border-color: var(--border); color: var(--text)}
.btn--outline{border-color: var(--primary); color: var(--text)}
.btn--contrast{background:linear-gradient(135deg, #ffffff, #e6e9f5); color:#0b1020}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow)}

/* Grids */
.grid{display:grid; gap:24px}
.grid--2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid--3{grid-template-columns: repeat(3, minmax(0,1fr))}

/* Back-to-top floating button */
.back-to-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  background: #0b1020;
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .15s ease, background .2s ease, border-color .2s ease;
}
.back-to-top:hover{ background: #10183a; border-color: rgba(91,140,255,0.5) }
.back-to-top:active{ transform: scale(0.96) }
.back-to-top.show{ opacity: 1; pointer-events: auto }
@media (max-width: 900px){
  .grid--2{grid-template-columns: 1fr}
  .grid--3{grid-template-columns: 1fr}
}

/* Hero */
.hero{padding-top: 56px}
.hero__copy h1{font-size: clamp(34px, 6vw, 56px); margin:0 0 10px; line-height:1.05}
.hero__actions{display:flex; gap:12px; margin-top:18px}
.hero__trust{display:flex; gap:16px; margin-top:18px; color:var(--muted)}
.hero__visual{position:relative}

.dashboard{background: linear-gradient(180deg, #121a39, #0f1630); border:1px solid var(--border); border-radius: 18px; overflow:hidden; box-shadow: var(--shadow)}
.dashboard__header{display:flex; align-items:center; gap:8px; padding:12px 14px; color:var(--muted); border-bottom:1px solid var(--border);}
.dashboard__header .dot{width:10px; height:10px; border-radius:50%; background:#334; opacity:0.9}
.dashboard__body{display:grid; grid-template-columns: repeat(2,1fr); gap:14px; padding:14px}
.card{background: rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:14px; padding:14px}
.card--wide{grid-column: 1 / -1}
.card__title{color:var(--muted); font-size:14px}
.card__value{font-size:28px; font-weight:800; letter-spacing:0.4px}
.card__sub{color:var(--success); font-weight:600}
.progress__label{color:var(--muted); margin-bottom:8px}
.progress__bar{height:10px; background:#1b2344; border-radius:999px; overflow:hidden}
.progress__bar span{display:block; height:100%; background: linear-gradient(90deg, var(--accent), var(--primary));}

/* Features */
.features .feature{background: var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; position:relative; overflow:hidden; box-shadow: var(--shadow); transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease, transform .2s ease}
.features .feature::after{content:""; position:absolute; inset:0; background: linear-gradient(75deg, transparent 45%, rgba(255,255,255,0.25) 50%, transparent 55%); transform: translateX(var(--shine-x, -150%)); pointer-events:none; mix-blend-mode: screen}
.icon{font-size:22px; width:40px; height:40px; display:grid; place-items:center; background: rgba(255,255,255,0.06); border-radius:10px; margin-bottom:8px}

/* Hover doux et contrasté */
.features .feature:hover{
  background: linear-gradient(180deg, #121a39, #0f1630);
  border-color: rgba(34,211,238,0.35);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.features .feature:hover h3{ color: #ffffff }
.features .feature:hover p{ color: #dce3ff }
.features .feature:hover .icon{
  background: linear-gradient(135deg, var(--accent), var(--primary));
  color: #0b1020;
}

/* Product */
.product .screen{background: var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden}
.screen__header{padding:12px 14px; border-bottom:1px solid var(--border); color:var(--muted); font-weight:600}
.screen__list{margin:0; padding:12px 14px 18px; list-style:none; display:grid; gap:10px}
.screen__list li{background: rgba(255,255,255,0.04); border:1px solid var(--border); padding:12px; border-radius:12px}
.badge{display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; background: rgba(91,140,255,0.15); color:#cfe0ff; margin-right:8px}
.badge--green{background: rgba(16,185,129,0.2); color:#c8f5e6}
.badge--blue{background: rgba(34,211,238,0.2); color:#c8f6fb}
.checks{list-style:"✔  "; padding-left:1.2em}

/* Pricing */
.billing{display:flex; align-items:center; gap:12px; color:var(--muted); justify-content:center; margin-bottom:16px}
.switch{position:relative; display:inline-block; width:52px; height:28px}
.switch input{opacity:0; width:0; height:0}
.slider{position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#2a335f; transition:.3s; border-radius:999px}
.slider:before{position:absolute; content:""; height:22px; width:22px; left:4px; top:3px; background:white; border-radius:50%; transition:.3s}
input:checked + .slider{background:#2b466f}
input:checked + .slider:before{transform: translateX(24px)}
.save{color:#8fe3ff}

.pricing .price{background: var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:10px}
.price--featured{border-color: var(--primary); position:relative}
.ribbon{position:absolute; top:12px; right:-10px; background:linear-gradient(135deg, var(--primary), #7c9dff); color:#0b1020; font-weight:700; padding:6px 12px; border-radius:10px}
.price__value{font-size:34px; font-weight:800}
.price__desc{color:var(--muted)}
.price__list{list-style:none; margin:0; padding:0; display:grid; gap:6px; color:#c9d2f0}

/* Testimonials */
.testimonials .quote{background: var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; color:#d9e0fb}
.testimonials footer{color:var(--muted); margin-top:8px}

/* FAQ */
.faq details{background: var(--card); border:1px solid var(--border); border-radius:16px; padding:12px 16px}
.faq details + details{margin-top:10px}
.faq summary{cursor:pointer; font-weight:600}
.faq div{color:#c9d2f0; margin-top:8px}

/* CTA */
.cta{background: linear-gradient(180deg, #10183a, #0b122e); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.cta__inner{display:grid; gap:10px; text-align:center}

/* Footer */
.footer{padding: 30px 0; background: #0a0f21; border-top:1px solid var(--border)}
.footer__inner{display:grid; gap:14px; align-items:center}
.footer__brand{display:flex; align-items:center; gap:10px}
.footer__links{display:flex; gap:12px; color:var(--muted)}
.footer__copy{color:var(--muted)}

@media (max-width: 840px){
  .nav.open{position: fixed; top:64px; left:0; right:0; min-width: auto; width:100%; border-radius: 0 0 14px 14px; padding:16px 20px; gap:10px; z-index: 40}
  .nav a{justify-content: center; font-size: 18px; padding:16px 18px}
  .nav .nav-ico{width:24px}
  .cta__actions{flex-direction:column}
  .cta__actions .btn{width:100%}
}

@media (min-width: 841px){
  .nav.open{min-width: 320px; padding:16px; gap:8px}
  .nav a{font-size: 17px; padding:14px 16px}
  .nav .nav-ico{width:22px}
}

/* Download page styles */
.highlight{color: var(--primary); font-weight: 800}
.btn--large{font-size: 1.1rem; padding: 16px 32px; min-height: 52px}
.btn--full{width: 100%; justify-content: center}

.download-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.download-card__header{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.download-icon{
  font-size: 2rem;
  background: var(--primary);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-title{font-size: 1.1rem; font-weight: 600; margin-bottom: 4px}
.download-subtitle{color: var(--muted); font-size: 0.9rem}

.download-progress{margin-bottom: 20px}
.download-progress__bar{
  background: var(--bg-alt);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.download-progress__fill{
  background: var(--primary);
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.download-progress__text{color: var(--muted); font-size: 0.9rem}

.download-features{display: grid; gap: 8px}
.feature-item{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}
.feature-item .material-symbols-outlined{
  color: var(--success);
  font-size: 1rem;
}

.requirements .req-card{
  background: var(--card);
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.requirements ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.requirements li{
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.requirements li:last-child{border-bottom: none}

.download-options{
  display: grid;
  gap: 24px;
  margin-bottom: 48px;
}

.download-option{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: all 0.3s ease;
}

.download-option:hover{
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.download-option--featured{
  border-color: var(--primary);
  position: relative;
}

.download-option--featured::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: var(--radius) var(--radius) 0 0;
}

.download-option__header{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.download-option__icon{
  font-size: 2rem;
  background: var(--bg-alt);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-option__badge{
  background: var(--primary);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: auto;
}

.download-option__details{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.download-option__size,
.download-option__version{
  font-size: 0.9rem;
  color: var(--muted);
}

.download-info{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.info-item{
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.info-item .material-symbols-outlined{
  color: var(--primary);
  font-size: 2rem;
  margin-top: 4px;
}

.info-item strong{
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}

.info-item p{
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.steps{
  text-align: center;
}

.step{
  background: var(--card);
  padding: 32px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.step__number{
  background: var(--primary);
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 16px;
}

.step h3{
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.step p{
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.pulse{
  animation: pulse 1s ease-in-out;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}