/* Scolyance — style inspiré d'Apple : sobre, typographie forte, beaucoup d'espace */
:root{
  --black:#000;
  --ink:#1d1d1f;
  --white:#fff;
  --grey:#f5f5f7;
  --muted:#6e6e73;
  --muted-dark:#a1a1a6;
  --line:#d2d2d7;
  --blue:#2448e0;
  --blue-hover:#1a35a8;
  --blue-light:#8fa6ff;
  --orange:#b5410f;
  --radius:28px;
  --radius-sm:22px;
  --wrap:1080px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI Variable","Segoe UI","Helvetica Neue",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
img,video{display:block;max-width:100%}
a{color:var(--blue)}
a:hover{color:var(--blue-hover)}
:focus-visible{outline:3px solid var(--blue-light);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:-999px;top:8px;background:var(--white);color:var(--ink);padding:10px 16px;border-radius:999px;z-index:100}
.skip:focus{left:16px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.center{text-align:center;display:flex;flex-direction:column;align-items:center}
.stack{display:flex;flex-direction:column;gap:16px}

/* Navigation */
.nav{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.78);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.nav__inner{max-width:var(--wrap);margin:0 auto;padding:4px 20px;min-height:52px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.nav__logo{display:flex;align-items:center;gap:10px;color:#f5f5f7;text-decoration:none;font-weight:600;font-size:19px;letter-spacing:-.01em}
.nav__logo:hover{color:#fff}
.nav__logo img{height:28px;width:auto}
.nav__links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.nav__links a{color:#d2d2d7;text-decoration:none;font-size:13px;padding:12px 0}
.nav__links a:hover{color:#fff}

/* Bouton musique */
.music{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid #48484a;border-radius:999px;background:transparent;color:#f5f5f7;font:inherit;font-size:13px;cursor:pointer;transition:border-color .3s,background .3s}
.music:hover{border-color:#86868b}
.music[aria-pressed="true"]{background:rgba(143,166,255,.16);border-color:var(--blue-light)}
.music__bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.music__bars i{display:block;width:3px;height:4px;background:currentColor;border-radius:2px}
.music[aria-pressed="true"] .music__bars i{animation:bar 1s var(--ease) infinite alternate}
.music__bars i:nth-child(2){animation-delay:-.4s!important}
.music__bars i:nth-child(3){animation-delay:-.2s!important}
.music__bars i:nth-child(4){animation-delay:-.7s!important}
@keyframes bar{from{height:3px}to{height:14px}}

/* Sections */
.section{padding:clamp(72px,10vw,120px) 0}
.dark{background:var(--black);color:#f5f5f7}
.light{background:var(--grey)}
.white{background:var(--white)}
.hero{padding:clamp(80px,11vw,128px) 0 clamp(64px,8vw,96px)}

h1,h2,h3{margin:0;letter-spacing:-.03em}
.hero__logo{width:88px;height:88px;margin-bottom:8px;filter:drop-shadow(0 10px 30px rgba(227,10,23,.35))}
.hero__title{font-size:clamp(46px,8vw,96px);line-height:1.03;font-weight:700;margin:18px 0}
h2{font-size:clamp(34px,5vw,56px);line-height:1.07;font-weight:700}
h3{font-size:21px;font-weight:600;letter-spacing:-.01em}

.eyebrow{margin:0;font-size:17px;font-weight:600;color:var(--blue-light);letter-spacing:.01em}
.eyebrow--blue{color:var(--blue)}
.dark .eyebrow--blue{color:var(--blue-light)}
.eyebrow--orange{color:var(--orange)}
.lead{margin:0;max-width:640px;font-size:clamp(19px,2.2vw,24px);line-height:1.4;color:var(--muted-dark)}
.lead--muted{color:var(--muted)}
.dark .lead--muted{color:var(--muted-dark)}

/* Boutons */
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:22px}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 24px;border-radius:999px;text-decoration:none;font-size:17px;transition:background .3s,color .3s,transform .3s var(--ease)}
.btn:hover{transform:scale(1.03)}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-hover);color:#fff}
.btn--ghost{border:1px solid var(--blue-light);color:var(--blue-light)}
.btn--ghost:hover{background:rgba(143,166,255,.12);color:var(--blue-light)}
.btn--ghost-dark{border-color:var(--blue);color:var(--blue)}
.btn--ghost-dark:hover{background:rgba(36,72,224,.08);color:var(--blue)}

/* Médias (vidéos motion et images) */
.media{margin:48px 0 0;width:100%;border-radius:var(--radius);overflow:hidden;background:#1d1d1f}
.media video,.media img{width:100%;height:100%;object-fit:cover}
.media--wide{aspect-ratio:16/9}
.media--tall{aspect-ratio:4/3;margin:0}
.media--card{background:#e8e8ed}
.hero .media{margin-top:56px;box-shadow:0 30px 80px rgba(36,72,224,.25)}

/* Grilles et cartes */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:40px}
.card{background:var(--white);border-radius:var(--radius-sm);padding:28px;display:flex;flex-direction:column;gap:10px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.card p{margin:0;font-size:17px;line-height:1.45;color:var(--muted)}
.card svg{width:28px;height:28px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Blocs texte + média */
.split{display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.split--reverse{flex-direction:row-reverse}
.split__text{flex:1 1 360px}
.split .media{flex:1 1 420px}

/* Pied de page */
.footer{background:var(--grey);border-top:1px solid var(--line);padding:28px 0;font-size:13px;color:var(--muted)}
.footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.footer nav{display:flex;flex-wrap:wrap;gap:18px}
.footer a{color:var(--muted);text-decoration:none;padding:12px 0}
.footer a:hover{color:var(--ink)}

/* Apparition au défilement */
.reveal{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* Page mentions légales */
.legal{max-width:760px;margin:0 auto;padding:72px 20px}
.legal h1{font-size:clamp(34px,5vw,48px);margin-bottom:32px}
.legal h2{font-size:24px;margin:36px 0 10px;letter-spacing:-.01em}
.legal p{margin:0 0 10px;color:var(--muted)}

@media (max-width:640px){
  .split,.split--reverse{flex-direction:column;align-items:stretch;gap:32px}
  .split .media{flex:none;width:100%}
  .nav__links{gap:2px 14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.card{transition:none}
  .music__bars i{animation:none!important}
}

.reveal.reveal-pending{opacity:0;transform:translateY(28px)}
.reveal.reveal-pending.is-visible{opacity:1;transform:none}
.hero__subtitle{display:block;font-size:clamp(20px,3vw,30px);line-height:1.35;margin-top:28px;letter-spacing:-.01em}
.info-page{max-width:900px;margin:auto;padding:70px 24px}.info-page h1{font-size:clamp(34px,5vw,56px);line-height:1.12}.info-page h2{font-size:28px;margin:40px 0 16px}.info-page p,.info-page li{font-size:18px;line-height:1.65}.info-page .actions{justify-content:flex-start}.info-page img{width:100%;height:auto;border-radius:24px;margin:28px 0}.legal p{color:#424245}
@media(prefers-reduced-motion:reduce){.reveal.reveal-pending{opacity:1;transform:none}}