/* ==========================================================
   MARKETABLE 2.0 — HERO SCROLL-SCRUB + LIQUID GLASS
   + intro fly-in blur (style VR BOXXX)
   Typo : Instrument Sans (UI) + Instrument Serif italic (accent)
   ========================================================== */

:root{
  --ink:        #e6e6ee;
  --ink-soft:   rgba(230,230,238,.72);
  --ink-faint:  rgba(230,230,238,.52);
  --glass-bg:   rgba(255,255,255,.08);
  --glass-bg-2: rgba(255,255,255,.14);
  --glass-line: rgba(255,255,255,.18);
  --glass-hi:   rgba(255,255,255,.30);
  --night:      #0d0d15;   /* surfaces légèrement plus claires : cards, poster */
  --deep:       #0a0a10;
  --accent:     #a48bff;
  --curtain:    #2b1f57;   /* rideau de transition entre les pages */
  --glow:       rgba(124,86,235,.35);
  --radius-pill: 999px;
  --radius-card: 22px;
  --font-sans:  "Instrument Sans", -apple-system, "Helvetica Neue", sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-sans);
  background:var(--deep);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ---------- INTRO FLY-IN BLUR (style VR BOXXX) ----------
   Chaque [data-anim] part décalé + flouté, converge en stagger
   via --d (délai) posé dans le HTML. body.play déclenche tout. */
[data-anim]{
  opacity:0;
  transform:translateY(28px);
  filter:blur(14px);
  transition:
    opacity .9s cubic-bezier(.22,.9,.3,1) var(--d, 0s),
    transform .9s cubic-bezier(.22,.9,.3,1) var(--d, 0s),
    filter .9s cubic-bezier(.22,.9,.3,1) var(--d, 0s);
  will-change:opacity, transform, filter;
}
body.play [data-anim]{
  opacity:1;
  transform:none;
  filter:blur(0);
}
/* Le mot italique arrive avec un mouvement latéral en plus */
.mkt-h1 em[data-anim]{ transform:translateY(28px) translateX(24px); }
body.play .mkt-h1 em[data-anim]{ transform:none; }
/* Ligne mot-clé dans le H1 — visible mais discrète, reste dans la balise
   pour que Google lise "Agence de pub en Belgique" comme titre principal. */
.mkt-h1-kw{
  display:block;
  font-size:clamp(12px, 1.05vw, 14px);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:clamp(12px, 1.4vw, 20px);
  line-height:1.3;
}

/* Les mots du titre sont inline-block pour être transformables */
.mkt-h1 .w{ display:inline-block; }

/* ---------- Scrub container ---------- */
/* 220vh : calé sur une vidéo scrub 15 fps (~76 frames) → 1 frame / ~16px */
.mkt-scrub{ position:relative; height:220vh; }
.mkt-stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden; isolation:isolate;
}

.mkt-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
  background:var(--night);
}
.mkt-veil{
  position:absolute; inset:0; z-index:-1;
  background:
    /* colonne de lecture gauche — assombrie franchement */
    linear-gradient(90deg,
      rgba(8,8,16,.92) 0%,
      rgba(8,8,16,.84) 18%,
      rgba(8,8,16,.5) 32%,
      rgba(8,8,16,.14) 44%,
      rgba(8,8,16,0) 56%),
    /* léger voile haut pour la nav */
    linear-gradient(180deg, rgba(10,10,18,.42) 0%, rgba(10,10,18,0) 26%),
    /* fondu bas vers la section suivante */
    linear-gradient(180deg, rgba(10,10,16,0) 72%, var(--deep) 100%);
}
@media(max-width:900px){
  .mkt-veil{
    background:
      linear-gradient(180deg, rgba(8,8,16,.88) 0%, rgba(8,8,16,.62) 42%, rgba(8,8,16,.75) 70%, var(--deep) 100%);
  }
}

/* ---------- Liquid glass ---------- */
.glass,
.glass-card{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -8px 24px rgba(255,255,255,.04),
    0 8px 32px rgba(10,14,35,.25);
}
.glass{ border-radius:var(--radius-pill); }
.glass-card{ border-radius:var(--radius-card); }

/* ---------- Nav ---------- */
/* Logo + CTA : absolus dans le hero, scrollent avec la page */
.mkt-nav{
  position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px clamp(24px, 5vw, 72px);
}

/* Pill central — enfant direct du body, fixed viewport, z-index absolu */
.mkt-links{
  position:fixed;
  top:20px;
  left:0; right:0;
  margin:0 auto;
  width:fit-content;
  z-index:9999;
}

/* ---------- Burger (mobile uniquement) ---------- */
.mkt-burger{
  display:none;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:40px; height:40px;
  background:none; border:none; cursor:pointer;
  justify-self:end; z-index:9100;
}
.mkt-burger span{
  display:block; width:22px; height:2px;
  background:var(--ink); border-radius:2px;
  transition:transform .3s, opacity .3s;
  transform-origin:center;
}
/* X quand ouvert */
body.nav-open .mkt-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-open .mkt-burger span:nth-child(2){ opacity:0; transform:scaleX(0); }
body.nav-open .mkt-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mkt-logo-mark{
  display:block;
  /* Le SVG contient le monogramme ET le mot « Marketable » :
     en dessous de ~70px de large, le texte devient illisible.
     Ratio du viewBox : 291.54 / 256.88 ≈ 1.135 */
  width:94px; height:83px;
  background:url("../img/logo-marketable.svg") left center/contain no-repeat;
  transition:transform .35s cubic-bezier(.32,.72,0,1), filter .35s;
}
.mkt-logo:hover .mkt-logo-mark{
  transform:scale(1.06);
  filter:brightness(1.12);
}
/* Le logo est plus lisible en petit sur mobile */
@media(max-width:768px){
  .mkt-logo-mark{ width:77px; height:67px; }
}
.mkt-links{ display:flex; gap:6px; padding:6px; }
.mkt-nav-close{ display:none; }
.mkt-links a{
  color:var(--ink-soft);
  text-decoration:none;
  font-size:15px; font-weight:500; letter-spacing:.01em;
  padding:10px 18px; border-radius:var(--radius-pill);
  transition:color .25s, background .25s;
}
.mkt-links a:hover,
.mkt-links a:focus-visible{
  color:#fff; background:rgba(255,255,255,.12); outline:none;
}
.mkt-nav-cta{
  color:#fff; text-decoration:none;
  font-size:15px; font-weight:600;
  padding:14px 26px;
  background:var(--glass-bg-2);
  transition:background .25s;
}
.mkt-nav-cta:hover{ background:rgba(255,255,255,.24); }

/* ---------- Chips flottantes ---------- */
.mkt-chips{
  position:absolute; z-index:6;
  right:clamp(24px, 6vw, 90px);
  top:26%;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}
.mkt-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500;
  color:var(--ink-soft);
  padding:10px 18px;
  animation:mkt-float 5.5s ease-in-out infinite;
}
.mkt-chip:nth-child(2){ animation-delay:-2.7s; }
.mkt-dot{
  width:7px; height:7px; border-radius:50%;
  background:#7dffb0;
  box-shadow:0 0 10px rgba(125,255,176,.8);
}
@keyframes mkt-float{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -10px; }
}
/* le float utilise translate, la transition d'intro utilise transform :
   pas de conflit entre les deux */

/* ---------- Hero content ---------- */
.mkt-hero{
  position:absolute; z-index:5;
  left:clamp(24px, 5.5vw, 80px);
  top:50%;
  transform:translateY(-52%);
  max-width:720px;
  will-change:opacity, transform;
}
.mkt-h1{
  font-size:clamp(34px, 5vw, 73px);
  line-height:1.02;
  font-weight:400;
  letter-spacing:-.025em;
  color:var(--ink);
}
.mkt-h1 em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:0;
}
.mkt-sub{
  margin-top:26px;
  max-width:500px;
  font-size:16px; line-height:1.55;
  color:var(--ink-faint);
}

/* ---------- Formulaire ---------- */
.mkt-panel{ margin-top:34px; max-width:520px; }

.mkt-step1{
  display:flex; flex-direction:column; gap:12px;
  padding:22px;
}
.mkt-input{
  flex:1; min-width:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  outline:none;
  font:inherit; font-size:15px;
  color:#fff;
  padding:14px 16px;
  transition:border-color .25s;
}
.mkt-input::placeholder{ color:var(--ink-faint); }
.mkt-input:focus{ border-color:rgba(255,255,255,.4); }

.mkt-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font:inherit; font-size:15px; font-weight:600;
  color:#141a34;
  background:rgba(255,255,255,.92);
  border:0; border-radius:var(--radius-pill);
  padding:14px 24px;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  text-align:center;
  transition:background .25s, transform .2s;
}
.mkt-btn:hover{ background:#fff; transform:translateY(-1px); }
.mkt-btn:active{ transform:translateY(0); }

/* Étape 2 */
.mkt-step2{
  padding:22px;
  display:flex; flex-direction:column; gap:12px;
  animation:mkt-pop .45s cubic-bezier(.2,.9,.3,1.2);
}
/* hidden doit gagner sur display:flex */
.mkt-step2[hidden],
.mkt-step1[hidden],
.mkt-loader[hidden]{ display:none; }
@keyframes mkt-pop{
  from{ opacity:0; transform:translateY(14px) scale(.98); filter:blur(6px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}
.mkt-step2-title{
  font-size:14px; color:var(--ink-soft);
}
.mkt-step2 select.mkt-input{ appearance:none; -webkit-appearance:none; }
.mkt-step2 option{ color:#141a34; }
.mkt-row{ display:flex; gap:12px; }
.mkt-row .mkt-input{ flex:1; }
.mkt-btn-wide{ width:100%; }
.mkt-hp{
  position:absolute !important;
  left:-9999px; width:1px; height:1px;
  opacity:0; pointer-events:none;
}

/* Loader */
.mkt-loader{ padding:24px; }
.mkt-bar{
  height:4px; border-radius:999px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.mkt-bar span{
  display:block; height:100%; width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, #fff, var(--accent));
  transition:width .8s cubic-bezier(.3,.7,.3,1);
}
.mkt-step-label{
  margin-top:14px;
  font-size:14px; color:var(--ink-soft);
}

.mkt-error{
  margin-top:12px;
  font-size:14px;
  color:#ffb0b0;
}

/* ---------- Footline + scroll hint ---------- */
.mkt-footline{
  position:absolute; z-index:5;
  right:clamp(24px, 5vw, 72px);
  bottom:34px;
  max-width:300px;
  text-align:right;
  font-size:13px; line-height:1.5;
  color:var(--ink-faint);
}
.mkt-scrollhint{
  position:absolute; z-index:5;
  left:50%; bottom:28px;
  translate:-50% 0;
  width:22px; height:36px;
  border:1.5px solid rgba(255,255,255,.35);
  border-radius:12px;
}
.mkt-scrollhint span{
  position:absolute; left:50%; top:7px;
  width:3px; height:7px; border-radius:2px;
  translate:-50% 0;
  background:rgba(255,255,255,.7);
  animation:mkt-drip 1.8s ease-in-out infinite;
}
@keyframes mkt-drip{
  0%{ opacity:0; transform:translateY(0); }
  30%{ opacity:1; }
  100%{ opacity:0; transform:translateY(12px); }
}

/* ---------- Section suivante (placeholder) ---------- */
.mkt-next{
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:16px;
  background:#141a34;
  text-align:center; padding:40px 24px;
}
.mkt-next h2{ font-size:clamp(28px,4vw,48px); font-weight:500; }
.mkt-next p{ color:var(--ink-faint); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  /* Pas de scrub sur mobile : la vidéo tourne en boucle.
     La section ne fait donc qu'un écran, on enchaîne direct sur le contenu. */
  .mkt-scrub{ height:100svh; }
  .mkt-stage{ position:relative; }

  .mkt-links, .mkt-footline, .mkt-chips{ display:none; }
  .mkt-hero{
    left:20px; right:20px; max-width:none;
    top:auto; bottom:12svh; transform:none;
  }
  .mkt-h1{ font-size:clamp(30px, 7.7vw, 45px); }
  .mkt-row{ flex-direction:column; }
  /* blur intro allégé sur mobile (perf par-dessus le scrub vidéo) */
  [data-anim]{ filter:blur(6px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .mkt-scrub{ height:100vh; }
  [data-anim]{
    opacity:1; transform:none; filter:none; transition:none;
  }
  .mkt-chip, .mkt-scrollhint span{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ── Transition de page : fondu + spinner ───────────────────────────
   Voile plein sur la couleur du site, avec un spinner discret le temps
   que la page suivante se charge. Rien ne se joue sur une arrivée
   directe (Google, URL tapée) : la page s'affiche immédiatement. */
.mkt-fade{
  position:fixed;
  inset:0;
  z-index:99998;
  background:var(--deep, #0a0a10);
  opacity:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .32s ease;
}
.mkt-fade.is-on{ opacity:1; }

.mkt-fade::after{
  content:"";
  width:26px; height:26px;
  border:2px solid rgba(164,139,255,.22);
  border-top-color:var(--accent, #a48bff);
  border-radius:50%;
  animation:mkt-spin .7s linear infinite;
  opacity:0;
  transition:opacity .2s .12s ease;
}
.mkt-fade.is-on::after{ opacity:1; }

@keyframes mkt-spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
  .mkt-fade{ transition:opacity .15s; }
  .mkt-fade::after{ animation:none; }
}

/* ---------- Nav mobile : panneau en verre ----------
   .mkt-links est un frère de .mkt-nav dans le HTML, pas un enfant : le
   sélecteur descendant « .mkt-nav .mkt-links » ne matchait jamais. Ce bloc
   est aussi placé en fin de fichier pour passer après les styles de base
   de .mkt-links, qui l'écrasaient. */
@media(max-width:768px){
  .mkt-burger{ display:flex; position:relative; z-index:9100; }
  .mkt-nav-cta{ display:none; }

  /* Voile flouté derrière le panneau : la page reste devinable */
  body.nav-open::before{
    content:"";
    position:fixed; inset:0;
    z-index:9040;
    background:rgba(8,6,16,.5);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    animation:mkt-scrim .3s ease both;
  }
  @keyframes mkt-scrim{ from{ opacity:0 } to{ opacity:1 } }

  .mkt-links{
    position:fixed;
    top:14px; right:14px; bottom:14px;
    left:auto;
    transform:translateX(18px) scale(.97);
    width:min(76vw, 320px);
    max-width:none;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:20px 12px;
    border-radius:26px;
    background:
      linear-gradient(158deg, rgba(255,255,255,.13), rgba(164,139,255,.07) 55%, rgba(255,255,255,.04));
    backdrop-filter:blur(30px) saturate(160%);
    -webkit-backdrop-filter:blur(30px) saturate(160%);
    border:1px solid rgba(255,255,255,.17);
    box-shadow:0 30px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.14);
    overflow-y:auto;
    z-index:9050;
    opacity:0;
    visibility:hidden;
    transition:opacity .34s cubic-bezier(.4,0,.2,1),
               transform .34s cubic-bezier(.4,0,.2,1),
               visibility .34s;
  }
  body.nav-open .mkt-links{
    opacity:1;
    visibility:visible;
    transform:translateX(0) scale(1);
  }

  /* Croix de fermeture, en haut à droite du panneau */
  .mkt-nav-close{
    display:block;
    position:absolute;
    top:16px; right:16px;
    width:34px; height:34px;
    padding:0;
    border:1px solid rgba(255,255,255,.16);
    border-radius:50%;
    background:rgba(255,255,255,.07);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .2s, transform .2s;
  }
  .mkt-nav-close::before,
  .mkt-nav-close::after{
    content:"";
    position:absolute;
    left:50%; top:50%;
    width:13px; height:1.5px;
    background:rgba(255,255,255,.85);
    border-radius:2px;
  }
  .mkt-nav-close::before{ transform:translate(-50%,-50%) rotate(45deg); }
  .mkt-nav-close::after{ transform:translate(-50%,-50%) rotate(-45deg); }
  .mkt-nav-close:active{ background:rgba(255,255,255,.16); transform:scale(.92); }

  /* Le premier lien passe sous la croix */
  .mkt-links a:first-of-type{ margin-top:34px; }

  .mkt-links a{
    text-align:left;
    font-size:16.5px; font-weight:500;
    letter-spacing:-.005em;
    padding:15px 16px;
    border-radius:14px;
    color:rgba(255,255,255,.82);
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .mkt-links a:last-child{ border-bottom:none; }
  .mkt-links a:active{
    background:rgba(255,255,255,.12);
    color:#fff;
  }

  body.nav-open{ overflow:hidden; }
}