/* =====================================================================
   SylphCloud — Design System / base
   Marque : blanc premium · bleu #284A8A · violet #7A4FD0
   Type   : Sora (display) · Albert Sans (texte)
   ===================================================================== */

:root{
  /* --- encre / texte --- */
  --ink:        #161B26;
  --ink-2:      #2C3444;
  --ink-soft:   #5A6478;
  --ink-faint:  #646E82;

  /* --- bleus (ancrés sur la marque #284A8A) --- */
  --blue:       #284A8A;
  --blue-600:   #2D54A6;
  --blue-500:   #3A63AD;
  --blue-400:   #5E86CF;
  --blue-300:   #8FB0E6;
  --blue-tint:  #EAF1FB;

  /* --- violet (accent) --- */
  --violet:     #7A4FD0;
  --violet-600: #6B41C4;
  --violet-400: #9E7BE4;
  --violet-tint:#F0EAFB;

  /* accent paramétrable (piloté par Tweaks) */
  --accent:     var(--violet);
  --accent-2:   var(--blue-600);

  /* --- surfaces / papier --- */
  --paper:      #FBFCFE;
  --paper-2:    #F3F6FC;
  --paper-3:    #EAF0FA;
  --card:       #FFFFFF;
  --line:       #E4EAF4;
  --line-soft:  #EDF1F8;

  /* --- effets --- */
  --shadow-sm:  0 1px 2px rgba(22,27,38,.05), 0 1px 1px rgba(22,27,38,.04);
  --shadow-md:  0 8px 24px -10px rgba(28,47,94,.22), 0 2px 6px -2px rgba(28,47,94,.10);
  --shadow-lg:  0 30px 60px -22px rgba(24,40,86,.34), 0 10px 24px -14px rgba(24,40,86,.18);
  --shadow-xl:  0 48px 96px -32px rgba(22,38,82,.42);
  --glow-blue:  0 0 0 1px rgba(45,84,166,.18), 0 20px 50px -18px rgba(45,84,166,.5);
  --glow-violet:0 0 0 1px rgba(122,79,208,.20), 0 20px 50px -18px rgba(122,79,208,.45);

  /* --- typo --- */
  --font-display:'Sora', system-ui, sans-serif;
  --font-body:'Albert Sans', system-ui, sans-serif;

  /* --- rythme --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);

  /* multiplicateur de mouvement (piloté par data-anim) */
  --motion: 1;
  --reveal-y: 26px;
  --reveal-dur: .9s;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:color-mix(in srgb, var(--accent) 26%, transparent); }

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1.04; color:var(--ink); text-wrap:balance; }
.display{
  font-weight:800;
  font-size:clamp(40px, 7vw, 88px);
  letter-spacing:-.035em;
  line-height:.98;
}
.h-xl{ font-size:clamp(32px, 4.6vw, 58px); letter-spacing:-.03em; }
.h-lg{ font-size:clamp(27px, 3.2vw, 42px); }
.h-md{ font-size:clamp(21px, 2.2vw, 28px); }
.lede{ font-size:clamp(17px, 1.5vw, 21px); color:var(--ink-soft); line-height:1.5; font-weight:450; text-wrap:pretty; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-family:var(--font-body); font-weight:600; font-size:12.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2);
}
.eyebrow::before{
  content:""; width:22px; height:1.5px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.eyebrow.center::before{ display:none; }

.grad-text{
  background:linear-gradient(108deg, var(--blue) 0%, var(--blue-500) 36%, var(--violet) 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------------------------------------------------------------- layout */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ position:relative; padding-block:clamp(56px, 7.5vw, 104px); }
/* ton de fond alterné — fondus très longs, aucune arête visible */
.tone{
  background:linear-gradient(180deg,
    rgba(240,245,252,0) 0%,
    #F0F5FC 16%,
    #F0F5FC 84%,
    rgba(240,245,252,0) 100%);
}
.section-head{ max-width:760px; }
.section-head .lede{ margin-top:18px; }
.center{ text-align:center; }
.center.section-head{ margin-inline:auto; }
.stack-sm{ display:flex; flex-direction:column; gap:10px; }

/* ---------------------------------------------------------------- buttons */
.btn{
  --bg:var(--ink); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:15.5px; letter-spacing:-.01em;
  padding:15px 26px; border-radius:999px; border:1px solid transparent;
  background:var(--bg); color:var(--fg); white-space:nowrap;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .25s, color .25s;
  will-change:transform;
}
.btn svg{ width:18px; height:18px; }
.btn .arr{ transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.btn:hover .arr{ transform:translateX(4px); }

.btn-primary{
  --bg:linear-gradient(180deg, var(--blue-600), var(--blue));
  color:#fff; box-shadow:var(--glow-blue);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(45,84,166,.25), 0 26px 56px -18px rgba(45,84,166,.62); }

.btn-accent{ --bg:linear-gradient(180deg, var(--violet-400), var(--violet)); color:#fff; box-shadow:var(--glow-violet); }
.btn-accent:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(122,79,208,.28), 0 26px 56px -18px rgba(122,79,208,.6); }

.btn-ghost{ --bg:transparent; color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-sm); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--blue-300); box-shadow:var(--shadow-md); background:#fff; }

.btn-light{ --bg:#fff; color:var(--blue); box-shadow:var(--shadow-md); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }

.btn-lg{ padding:18px 32px; font-size:16.5px; }
.text-link{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--blue-600);
  font-family:var(--font-display); transition:gap .3s, color .25s;
}
.text-link svg{ width:17px; height:17px; transition:transform .3s; }
.text-link:hover{ color:var(--violet); gap:11px; }
.text-link:hover svg{ transform:translateX(2px); }

/* pill / chip */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600;
  background:#fff; border:1px solid var(--line); color:var(--ink-2); box-shadow:var(--shadow-sm);
}
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }

/* ---------------------------------------------------------------- nav */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:14px var(--gut);
  transition:padding .4s ease, background .4s ease;
}
.nav-inner{
  width:100%; max-width:var(--maxw);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:11px 12px 11px 20px; border-radius:999px;
  background:color-mix(in srgb, #fff 70%, transparent);
  border:1px solid rgba(228,234,244,0);
  box-shadow:0 0 0 0 rgba(0,0,0,0);
  backdrop-filter:saturate(150%) blur(0px);
  transition:background .4s, border-color .4s, box-shadow .4s, backdrop-filter .4s;
}
.nav.scrolled .nav-inner{
  background:color-mix(in srgb, #fff 78%, transparent);
  border-color:rgba(228,234,244,.9);
  box-shadow:0 10px 30px -14px rgba(24,40,86,.22);
  backdrop-filter:saturate(160%) blur(16px);
}
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--ink); }
.brand img{ width:30px; height:30px; object-fit:contain; }
.brand .c{ color:var(--blue); }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  position:relative; padding:9px 15px; border-radius:999px; font-size:14.5px; font-weight:550; color:var(--ink-2);
  transition:color .25s, background .25s;
}
.nav-links a:hover{ color:var(--blue-600); background:var(--paper-2); }
.nav-links a.active{ color:var(--blue-600); }
.nav-links a.active::after{
  content:""; position:absolute; left:15px; right:15px; bottom:4px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--blue), var(--violet));
}
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-cta .btn{ padding:11px 20px; font-size:14.5px; }
.burger{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.burger span{ width:18px; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s, opacity .3s; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.mobile-menu{
  position:fixed; inset:0; z-index:190; display:none; flex-direction:column;
  padding:96px var(--gut) 40px;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(22px) saturate(150%);
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{ font-family:var(--font-display); font-weight:600; font-size:26px; padding:16px 0; border-bottom:1px solid var(--line); color:var(--ink); }
.mobile-menu a:last-of-type{ border-bottom:0; }
.mobile-menu .btn{ margin-top:24px; }

/* ---------------------------------------------------------------- footer */
.footer{ position:relative; background:linear-gradient(180deg, #0E1426 0%, #0B1020 100%); color:#cdd6e8; padding-block:clamp(60px,8vw,96px) 36px; overflow:hidden; }
.footer::before{
  content:""; position:absolute; inset:auto -10% -40% -10%; height:60%;
  background:radial-gradient(60% 100% at 30% 0%, rgba(122,79,208,.28), transparent 70%),
            radial-gradient(50% 100% at 80% 10%, rgba(45,84,166,.32), transparent 70%);
  filter:blur(20px); pointer-events:none;
}
.footer .wrap{ position:relative; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer .brand{ color:#fff; }
.footer .brand .c{ color:var(--blue-300); }
.footer .f-about{ margin-top:18px; max-width:300px; color:#9aa6bf; font-size:14.5px; line-height:1.6; }
.footer .f-social{ display:flex; gap:10px; margin-top:22px; }
.footer .f-social a{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); transition:background .25s, transform .25s; }
.footer .f-social a:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); }
.footer .f-social svg{ width:18px; height:18px; color:#cdd6e8; }
.footer h5{ font-family:var(--font-display); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#7e8aa6; margin-bottom:16px; font-weight:600; }
.footer .f-col a{ display:block; padding:7px 0; color:#aab4cc; font-size:14.5px; transition:color .25s, transform .25s; }
.footer .f-col a:hover{ color:#fff; transform:translateX(3px); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:28px; color:#7e8aa6; font-size:13.5px; }
.footer-bottom .badge{ display:inline-flex; align-items:center; gap:8px; }
.footer-bottom .badge .dot{ width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.2); }

/* ---------------------------------------------------------------- reveal anim */
[data-reveal]{
  opacity:0; transform:translateY(var(--reveal-y));
  transition:opacity var(--reveal-dur) cubic-bezier(.16,.84,.3,1),
             transform var(--reveal-dur) cubic-bezier(.16,.84,.3,1);
  transition-delay:var(--d, 0ms);
  will-change:opacity, transform;
}
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(calc(var(--reveal-y) * -1.4)); }
[data-reveal="right"]{ transform:translateX(calc(var(--reveal-y) * 1.4)); }
[data-reveal="scale"]{ transform:scale(.94); }
.is-in[data-reveal]{ opacity:1; transform:none; }

/* word reveal (hero) — via keyframe animation (fiable même sans déclencheur de transition) */
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > span{ display:inline-block; transform:translateY(110%); }
.hero-ready .word > span{ animation:wordIn .9s cubic-bezier(.16,.84,.3,1) both; animation-delay:var(--wd,0ms); }
@keyframes wordIn{ from{ transform:translateY(110%); } to{ transform:translateY(0); } }

/* floating loop (decor) */
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(calc(-14px * var(--motion))); } }
@keyframes floaty-2{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(calc(-20px * var(--motion))) rotate(1.5deg); } }
@keyframes drift{ 0%{ transform:translate(0,0); } 50%{ transform:translate(calc(26px*var(--motion)), calc(-18px*var(--motion))); } 100%{ transform:translate(0,0); } }
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
@keyframes shimmer{ to{ background-position:200% center; } }
@keyframes pulse-ring{ 0%{ transform:scale(.9); opacity:.6; } 70%{ opacity:0; } 100%{ transform:scale(1.6); opacity:0; } }

/* ============================================================
   NIVEAUX D'ANIMATION  (data-anim sur <html>)
   3 = sobre · 6 = équilibré · 10 = immersif
   ============================================================ */

/* niveau 3 — sobre : pas de boucles décoratives, révélations courtes */
html[data-anim="3"]{ --motion:0; --reveal-y:16px; --reveal-dur:.6s; }
html[data-anim="3"] .floaty,
html[data-anim="3"] .floaty-2,
html[data-anim="3"] .drift,
html[data-anim="3"] .loop-anim{ animation:none !important; }
html[data-anim="3"] .aurora{ animation:none !important; }
html[data-anim="3"] .parallax{ transform:none !important; }
html[data-anim="3"] .orb{ animation:none !important; }
html[data-anim="3"] .orb .ring::after{ animation:none !important; }
html[data-anim="3"] .only-rich{ display:none !important; }
html[data-anim="3"] .cursor-glow{ display:none !important; }

/* niveau 6 — équilibré : révélations + flottements doux, parallax léger */
html[data-anim="6"]{ --motion:.62; --reveal-y:24px; --reveal-dur:.85s; }
html[data-anim="6"] .cursor-glow{ display:none !important; }
html[data-anim="6"] .only-rich{ display:none !important; }

/* niveau 10 — immersif : tout actif */
html[data-anim="10"]{ --motion:1; --reveal-y:30px; --reveal-dur:1s; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .word > span{ transform:translateY(0) !important; animation:none !important; }
  .parallax{ transform:none !important; }
}

/* ============================================================
   FALLBACK STATIQUE — quand l'horloge d'animation n'avance pas
   (aperçu figé, capture, impression…). JS ajoute html.no-anim.
   Tout le contenu reste visible, sans dépendre d'une transition.
   ============================================================ */
html.no-anim *, html.no-anim *::before, html.no-anim *::after{ transition:none !important; }
html.no-anim [data-reveal]{ opacity:1 !important; transform:none !important; }
html.no-anim .word > span{ transform:translateY(0) !important; animation:none !important; }
html.no-anim .orb,
html.no-anim .orb .ring::after,
html.no-anim .aurora,
html.no-anim .marquee .track,
html.no-anim .win-main, html.no-anim .win-2, html.no-anim .win-3,
html.no-anim .float-chip,
html.no-anim .scroll-hint .mouse::after{ animation:none !important; }
html.no-anim .parallax{ transform:none !important; }

/* utilitaires */
.u-mono{ font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace; }
.divider{ height:1px; background:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); }
.badge-soft{ display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:600; background:var(--blue-tint); color:var(--blue-600); }
.noscroll{ overflow:hidden; }

/* focus clavier visible (accessibilité) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:2px;
  border-radius:6px;
}