:root{
  --paper:#EFEAE0;
  --surface:#E4DCC8;
  --inset:#E4DCC8;
  --ink:#1E2024;
  --ink-2:#585D63;
  --line:#CFC5AC;
  --accent:#233A5E;
  --accent-2:#3C5A8A;
  --on-accent:#F4EEE3;
  --focus:#233A5E;

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Archivo', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;

  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#212939;
    --surface:#2C3547;
    --inset:#141926;
    --ink:#E4E7EC;
    --ink-2:#ACB5C9;
    --line:#414B63;
    --accent:#5B8DEF;
    --accent-2:#7FA6F5;
    --on-accent:#10131A;
    --focus:#5B8DEF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#212939;
  --surface:#2C3547;
  --inset:#141926;
  --ink:#E4E7EC;
  --ink-2:#ACB5C9;
  --line:#414B63;
  --accent:#5B8DEF;
  --accent-2:#7FA6F5;
  --on-accent:#10131A;
  --focus:#5B8DEF;
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
[hidden]{ display:none !important; }

a{ color:inherit; }
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  text-wrap:balance;
  margin:0;
}
p{ margin:0; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
}

.wrap{
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  padding-inline:24px;
}

/* ---------- header ---------- */
header{
  position:sticky;
  top:env(safe-area-inset-top, 0px);
  z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:0.01em;
  text-decoration:none;
  white-space:nowrap;
}
.brand-logo{
  width:38px;
  height:38px;
  border-radius:50%;
  display:block;
  flex-shrink:0;
}
.brand em{
  font-style:italic;
  color:var(--accent);
}
nav.links{
  display:flex;
  align-items:center;
  gap:32px;
}
nav.links a{
  text-decoration:none;
  font-size:0.92rem;
  color:var(--ink-2);
  transition:color .15s ease;
}
nav.links a:hover, nav.links a:focus-visible{ color:var(--ink); }

.nav-link{
  position:relative;
  padding-bottom:4px;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.active::after{
  transform:scaleX(1);
}
.nav-link.active{ color:var(--ink); }
@media (prefers-reduced-motion: reduce){
  .nav-link::after{ transition:none; }
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border-radius:2px;
  font-size:0.92rem;
  font-weight:500;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{
  background:var(--accent);
  color:var(--on-accent);
}
.btn-primary:hover, .btn-primary:focus-visible{ background:var(--accent-2); }
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn-ghost:hover, .btn-ghost:focus-visible{ border-color:var(--ink); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, label.menu-btn:focus-within{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

#nav-toggle{ display:none; }
.menu-btn{ display:none; }

@media (max-width: 780px){
  nav.links{
    position:absolute;
    inset-inline:0;
    top:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    max-height:0;
    overflow:hidden;
    transition:max-height .2s ease;
  }
  nav.links a{
    padding:16px 24px;
    border-top:1px solid var(--line);
  }
  .nav-link::after{ display:none; }
  .nav-link{
    border-left:3px solid transparent;
    transition:border-color .2s ease, background .2s ease;
  }
  .nav-link.active, .nav-link:hover, .nav-link:focus-visible{
    border-left-color:var(--accent);
    background:var(--surface);
  }
  #nav-toggle:checked ~ nav.links{ max-height:320px; }
  .nav-row{ flex-wrap:wrap; }
  .cta-desktop{ padding:8px 14px; font-size:0.82rem; }
  .menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px; height:40px;
    border:1px solid var(--line);
    border-radius:2px;
    background:none;
    cursor:pointer;
  }
  .menu-btn svg{ width:18px; height:18px; }
}

/* ---------- hero ---------- */
.hero{
  padding-block: 88px 96px;
  position:relative;
  overflow:hidden;
  color:#F2F0EA;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-24px;
  background-image:url("../assets/img/hero-bg.jpg");
  background-size:cover;
  background-position:center;
  filter:blur(0px);
  z-index:-2;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,13,20,.62), rgba(10,13,20,.8));
  z-index:-1;
}
.hero .eyebrow{ color:#8FB1EC; }
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,440px);
  gap:56px;
  align-items:center;
}
.hero h1{
  margin-top:14px;
  font-size:clamp(2.4rem, 4.6vw + 1rem, 4rem);
  animation:heroNeon 2.5s linear infinite alternate;
}
@keyframes heroNeon{
  from{
    text-shadow:
      0 0 4px rgba(139,177,236,.5),
      0 0 10px rgba(91,141,239,.4),
      0 0 18px rgba(91,141,239,.25);
  }
  to{
    text-shadow:
      0 0 8px rgba(139,177,236,.85),
      0 0 22px rgba(91,141,239,.65),
      0 0 38px rgba(91,141,239,.4);
  }
}
@media (prefers-reduced-motion: reduce){
  .hero h1{ animation:none; text-shadow:0 0 12px rgba(91,141,239,.5); }
}
.hero p.lead{
  margin-top:24px;
  max-width:52ch;
  font-size:1.08rem;
  color:#C9CDD8;
}
.hero-actions{
  margin-top:36px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
}
.hero-actions .link-inline{
  text-decoration:none;
  font-size:0.92rem;
  color:#F2F0EA;
  border-bottom:1px solid rgba(242,240,234,.4);
  padding-bottom:2px;
}
.hero-actions .link-inline:hover{ border-color:#F2F0EA; }
.hero .btn-primary{ background:#5B8DEF; color:#10131A; }
.hero .btn-primary:hover, .hero .btn-primary:focus-visible{ background:#7FA6F5; }

.hero-visual{
  align-self:center;
  justify-self:end;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  min-width:0;
  max-width:100%;
}
.hero-logo{
  width:100%;
  max-width:280px;
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:50%;
  flex-shrink:0;
  animation:heroLogoGlow 2.5s linear infinite alternate;
}
@keyframes heroLogoGlow{
  from{
    box-shadow:
      0 0 12px rgba(139,177,236,.35),
      0 0 28px rgba(91,141,239,.25),
      0 0 48px rgba(91,141,239,.12);
  }
  to{
    box-shadow:
      0 0 20px rgba(139,177,236,.6),
      0 0 44px rgba(91,141,239,.4),
      0 0 76px rgba(91,141,239,.22);
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-logo{ animation:none; box-shadow:0 0 30px rgba(91,141,239,.35); }
}
.hero-instagram{
  display:inline-flex;
  align-items:center;
  min-width:0;
  gap:14px;
  text-decoration:none;
  border:1px solid rgba(242,240,234,.25);
  background:rgba(242,240,234,.08);
  backdrop-filter:blur(6px);
  border-radius:2px;
  padding:16px 22px;
  transition:border-color .2s ease;
}
.hero-instagram:hover, .hero-instagram:focus-visible{
  border-color:rgba(242,240,234,.55);
}
.hero-instagram svg{
  width:26px;
  height:26px;
  flex-shrink:0;
}
.hero-instagram span{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1rem;
  white-space:nowrap;
  color:#F2F0EA;
}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{
    justify-self:center;
    margin-top:16px;
  }
  .hero-logo{ max-width:180px; }
}

/* ---------- sections ---------- */
section{ padding-block:76px; border-top:1px solid var(--line); }
.section-alt{ background:var(--surface); }

/* ---------- side rail (pour qui → contact) ---------- */
.rail section{ position:relative; }
.rail section::after{
  content:"";
  position:absolute;
  top:32px;
  bottom:32px;
  left:96px;
  border-left:2px dashed var(--ink-2);
}
.rail-dot{
  position:absolute;
  top:50%;
  left:96px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--ink-2);
  transform:translate(calc(-50% + 1px), -50%);
  transition:transform .3s ease, background .3s ease;
  z-index:1;
}
.rail-dot.is-current{
  background:var(--accent);
  transform:translate(calc(-50% + 1px), -50%) scale(1.8);
}
@media (max-width:1200px){
  .rail section::after, .rail-dot{ display:none; }
}
.section-head h2{
  margin-top:14px;
  font-size:clamp(1.7rem, 2.2vw + 1rem, 2.5rem);
  line-height:1.18;
}
.section-head p{
  margin-top:16px;
  max-width:56ch;
  color:var(--ink-2);
  font-size:1.02rem;
}
.section-head .eyebrow{
  display:inline;
  font-style:italic;
  color:var(--ink);
  background-image:linear-gradient(
    color-mix(in srgb, var(--accent) 60%, transparent),
    color-mix(in srgb, var(--accent) 60%, transparent)
  );
  background-repeat:no-repeat;
  background-size:100% 45%;
  background-position:0 78%;
}


/* pour qui */
.audience-carousel{
  margin-top:48px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.audience-track{
  display:flex;
  width:max-content;
  list-style:none;
  margin:0;
  padding:0;
  will-change:transform;
  animation:audienceScroll 26s linear infinite;
}
.audience-track li{
  flex-shrink:0;
  width:220px;
  margin-right:20px;
  padding:24px 26px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--inset);
}
.audience-track .tag{
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--accent);
}
.audience-track h3{
  margin-top:10px;
  font-size:1.1rem;
  font-weight:600;
}
@keyframes audienceScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .audience-track{
    animation:none;
    overflow-x:auto;
    max-width:100%;
    scrollbar-width:thin;
  }
}
@media (max-width: 560px){
  .audience-track li{ width:180px; padding:20px 22px; margin-right:14px; }
}

/* pourquoi */
.why-grid{
  margin-top:48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 24px;
}
@media (max-width:700px){ .why-grid{ grid-template-columns:1fr; } }

.why-item{
  display:flex;
  align-items:center;
  gap:20px;
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--inset);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.why-item:hover, .why-item:focus-within{
  transform:translateY(-4px);
  box-shadow:0 14px 28px -16px rgba(0,0,0,.3);
  border-color:var(--accent);
}
.why-grid.js-reveal .why-item{
  opacity:0;
  transform:translateY(16px);
}
.why-grid.js-reveal .why-item:nth-child(1){ animation-delay:0ms; }
.why-grid.js-reveal .why-item:nth-child(2){ animation-delay:80ms; }
.why-grid.js-reveal .why-item:nth-child(3){ animation-delay:160ms; }
.why-grid.js-reveal .why-item:nth-child(4){ animation-delay:240ms; }
.why-grid.js-reveal .why-item.is-visible{
  animation:whyIn .5s ease forwards;
}
@keyframes whyIn{
  to{ opacity:1; transform:translateY(0); }
}
.why-item .num{
  display:inline-block;
  width:22px;
  height:1.5px;
  background:var(--accent);
  flex-shrink:0;
  transition:width .3s ease;
}
.why-item:hover .num, .why-item:focus-within .num{ width:40px; }
.why-item h3{ font-size:1.15rem; font-weight:600; }
.why-item p{ margin-top:8px; color:var(--ink-2); font-size:0.96rem; }

/* process */
.steps{
  margin-top:56px;
  display:flex;
  flex-direction:column;
}
.step{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:24px;
  padding-block:28px;
  position:relative;
}
.step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:31px;
  top:64px;
  bottom:-4px;
  border-left:1px dashed var(--line);
}
.step .num{
  font-family:var(--font-mono);
  font-size:0.9rem;
  color:var(--accent);
  border:1px solid var(--line);
  border-radius:50%;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper);
  z-index:1;
}
.step h3{ font-size:1.2rem; font-weight:600; padding-top:8px; }
.step p{ margin-top:8px; color:var(--ink-2); font-size:0.96rem; max-width:56ch; }

.step-connector{
  position:absolute;
  left:31px;
  top:64px;
  bottom:-4px;
  width:0;
}
.step-arrow{
  position:absolute;
  left:0;
  top:0;
  transform:translateX(-50%);
  color:var(--accent);
  display:flex;
  animation:stepArrowMove 1.8s ease-in-out infinite;
}
@keyframes stepArrowMove{
  0%{ top:0%; opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ top:100%; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .step-arrow{ animation:none; top:50%; opacity:1; }
}
@media (min-width:901px){
  .step:nth-child(3) p{ max-width:none; white-space:nowrap; }
}

/* process → contact divider */
.process-divider{
  position:relative;
  z-index:0;
  overflow:hidden;
  border-top:1px solid rgba(242,240,234,.15);
  border-bottom:1px solid rgba(242,240,234,.15);
  padding-block:56px;
  background:#10131A;
}
.process-divider::before{
  content:"";
  position:absolute;
  inset:-24px;
  background-image:url("../assets/img/hero-bg.jpg");
  background-size:cover;
  background-position:center;
  z-index:-2;
}
.process-divider::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,13,20,.62), rgba(10,13,20,.8));
  z-index:-1;
}
.process-divider .wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
}
.divider-text{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.8rem, 3vw + 1rem, 2.6rem);
  color:#8FB1EC;
}
.divider-text.is-typing::after{
  content:"";
  display:inline-block;
  width:2px;
  height:0.9em;
  margin-left:4px;
  background:currentColor;
  vertical-align:-0.1em;
  animation:cursorBlink 0.8s steps(1) infinite;
}
@keyframes cursorBlink{ 50%{ opacity:0; } }
.gear{
  width:90px;
  height:90px;
  color:#8FB1EC;
}
.gear svg{ width:100%; height:100%; display:block; }
.gear-sm{
  width:54px;
  height:54px;
  margin-left:-32px;
  margin-top:32px;
  color:#C9CDD8;
}
@media (prefers-reduced-motion: no-preference){
  .gear-lg svg{ animation:gearSpin 14s linear infinite; }
  .gear-sm svg{ animation:gearSpinReverse 8s linear infinite; }
}
@keyframes gearSpin{ to{ transform:rotate(360deg); } }
@keyframes gearSpinReverse{ to{ transform:rotate(-360deg); } }
@media (max-width: 560px){
  .process-divider{ padding-block:40px; }
  .process-divider .wrap{ flex-direction:column; gap:20px; }
  .divider-text{ font-size:1.5rem; text-align:center; }
  .gear-lg{ width:64px; height:64px; }
  .gear-sm{ width:40px; height:40px; margin-left:0; margin-top:-14px; }
}

/* contact */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
}
.contact-info .email-link{
  display:inline-block;
  margin-top:24px;
  font-family:var(--font-display);
  font-size:1.4rem;
  font-style:italic;
  text-decoration:none;
  color:var(--accent);
  border-bottom:1px solid transparent;
}
.contact-info .email-link:hover{ border-color:var(--accent); }
.contact-info .note{ margin-top:20px; color:var(--ink-2); font-size:0.92rem; max-width:40ch; }

form{ display:flex; flex-direction:column; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.field input, .field textarea{
  font:inherit;
  font-family:var(--font-body);
  background:var(--inset);
  border:1px solid var(--line);
  border-radius:2px;
  padding:12px 14px;
  color:var(--ink);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-2); opacity:0.7; }
form .btn{ align-self:flex-start; margin-top:4px; }
@media (max-width:780px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } }

/* footer */
footer{
  border-top:1px solid var(--line);
  padding-block:32px;
}
.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  font-size:0.85rem;
  color:var(--ink-2);
}
.footer-row a{ text-decoration:none; color:var(--ink-2); }
.footer-row a:hover{ color:var(--ink); }
.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-brand img{
  width:22px;
  height:22px;
  border-radius:50%;
  display:block;
}
.footer-links{
  display:flex;
  align-items:center;
  gap:20px;
}
.social-link{
  display:inline-flex;
  color:var(--ink-2);
  transition:color .15s ease;
}
.social-link:hover, .social-link:focus-visible{ color:var(--accent); }
.social-link svg{ width:18px; height:18px; }