/* ================== THEME / TOKENS ================== */
:root{
  --black:#0b0b0d;
  --black-2:#111216;
  --white:#fafafa;
  --muted:#c8c8c8;
  --grey:#8f9499;
  --yellow:#ffd400;
  --yellow-2:#fff179;

  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);

  /* light/yellow themes */
  --light:#f9fafb;
  --light-text:#0f1217;
  --yellow-text:#111;
}

/* ================== BASE ================== */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img, video{ max-width:100%; height:auto }
a{ color:var(--white); text-decoration:none }
p{ color:#d7d7d7; margin:.2rem 0 1rem }

h1,h2,h3{
  font-family:"Space Grotesk",Inter,system-ui,sans-serif;
  margin:0 0 .6rem;
}
h1{ font-size:clamp(2.2rem,5vw,4.2rem); line-height:1.05; letter-spacing:.5px }
h2{ font-size:clamp(1.8rem,3.2vw,2.6rem) }
h3{ font-size:1.3rem }

.container{ width:min(1120px,92vw); margin:0 auto }

/* ================== HEADER ================== */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:18px;
  padding:16px 24px;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(17,18,22,.85),rgba(17,18,22,.55),transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header.scrolled{ background:rgba(17,18,22,.9) }
.logo-svg{ display:block; height:28px; width:auto }
.logo.small{ font-weight:800; letter-spacing:2px; color:var(--yellow) }

.nav{ display:flex; align-items:center; gap:22px; margin-left:auto }
.nav a{ color:#d9d9d9; opacity:.9; font-weight:500 }
.nav a:hover{ color:var(--white) }

.hamburger{ display:none; background:transparent; border:0; padding:6px; margin-left:auto; }
.hamburger span{ display:block; width:26px; height:2px; background:var(--white); margin:6px 0; transition:transform .2s, opacity .2s }

/* ================== BUTTONS (variables-driven) ================== */
.btn{
  --bg:transparent; --fg:var(--white); --bd:rgba(255,255,255,.25);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; padding:.9rem 1.2rem; border-radius:999px;
  border:1px solid var(--bd);
  background:var(--bg);
  color:var(--fg);
  font-weight:700;
  box-shadow:none;
  transform:translateZ(0);
  transition:transform .15s ease, background .2s, border-color .2s, color .2s;
}
.btn:hover{ transform:translateY(-1px) }
.btn--primary{ --bg:linear-gradient(135deg,var(--yellow),var(--yellow-2)); --fg:#111; --bd:transparent }
.btn--secondary{ --bg:#14161a }
.btn--ghost{ --bg:transparent }

/* ================== HERO ================== */
.hero{ position:relative; padding:14vh 0 10vh; overflow:hidden }
.hero-inner{ position:relative; z-index:2 }
.eyebrow{ color:var(--muted); font-weight:600; letter-spacing:.12em; text-transform:uppercase }
.hero-title{ margin:.5rem 0 1rem }
.hero-title .highlight{
  background:linear-gradient(120deg,var(--yellow),var(--yellow-2));
  color:#111; padding:.1em .15em; border-radius:.35em
}
.spark{ position:relative }
.spark:after{
  content:""; position:absolute; inset:-3px -6px; border-radius:8px;
  background:
    radial-gradient(120px 40px at 20% 50%, rgba(255,212,0,.25), transparent 60%),
    radial-gradient(120px 40px at 80% 50%, rgba(255,241,121,.2), transparent 60%);
  filter:blur(14px); pointer-events:none;
}
.hero-sub{ max-width:720px }
.hero .cta-row{ display:flex; gap:14px; margin:1.2rem 0 1.8rem }
.stats{ display:flex; gap:26px; flex-wrap:wrap }
.stat{ color:#b9bec4 }
.stat span{ color:var(--yellow); font-weight:800; font-size:1.15em; margin-right:6px }

.skip-link {
  position:absolute;
  top:-40px; left:0;
  background:var(--yellow);
  color:#111;
  padding:.6rem 1rem;
  font-weight:700;
  border-radius:0 0 6px 0;
  z-index:100;
  transition:top .25s ease;
}
.skip-link:focus {
  top:0; /* visible uniquement quand on focus avec TAB */
}

/* Hero background */
.hero-bg{ position:absolute; inset:0; overflow:hidden }
.grid{
  position:absolute; inset:-50% -20%;
  background:repeating-linear-gradient(#000, #000 39px, rgba(255,255,255,.06) 40px, rgba(255,255,255,.06) 40.5px);
  opacity:.25; mix-blend-mode:screen; filter:blur(.3px);
}
.grid--v{ transform:rotate(90deg) }
.noise{
  position:absolute; inset:-20%; opacity:.04;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0)} 20%{transform:translate(-10px,8px)}
  40%{transform:translate(8px,-6px)} 60%{transform:translate(0,4px)}
  80%{transform:translate(-6px,0)} 100%{transform:translate(0)}
}
.glow{
  position:absolute; inset:-20%;
  background:
    radial-gradient(60% 30% at 50% 20%, rgba(255,212,0,.12), transparent 60%),
    radial-gradient(30% 20% at 20% 80%, rgba(255,212,0,.08), transparent 60%),
    radial-gradient(40% 25% at 80% 60%, rgba(255,212,0,.08), transparent 60%);
  filter:blur(30px)
}

/* Marquee */
.marquee{ position:absolute; bottom:0; width:100%; overflow:hidden; white-space:nowrap; border-top:1px solid rgba(255,255,255,.06) }
.marquee .track{
  display:inline-block; padding:14px 0; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.6); will-change:transform; animation:marquee 22s linear infinite;
}
.marquee .track span{ padding-right:1rem }
@keyframes marquee{ 0%{ transform:translateX(0)} 100%{ transform:translateX(-50%)} }

/* ================== SECTION THEMES / ELEMENTS ================== */
.section{ padding:80px 0; position:relative }

.theme--light{ background:var(--light); color:var(--light-text) }
.theme--light p{ color:#334155 }
.theme--light .tag{ border-color:rgba(0,0,0,.08); color:#475569 }
.theme--light .card{ background:#fff; border-color:rgba(0,0,0,.06) }
.theme--light a{ color:#0f172a }
.theme--light .btn--secondary{ --bg:#f2f4f7; --fg:#111; --bd:rgba(0,0,0,.12) }

.theme--yellow{ background:linear-gradient(180deg,#ffe564,#ffd400); color:var(--yellow-text) }
.theme--yellow p{ color:#222 }
.theme--yellow .btn--primary{ --bg:#111; --fg:#fff }  /* texte blanc sur fond noir */
.theme--yellow .btn--ghost{ --bg:transparent; --fg:#111; --bd:rgba(0,0,0,.2) }

/* Divider */
.divider{
  height:1px; width:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  margin:28px 0;
}
.theme--light .divider{ background:linear-gradient(90deg,transparent,rgba(0,0,0,.12),transparent) }

/* Proof logos (pills) */
.proof-logos{
  list-style:none; display:flex; gap:22px; padding:0; margin:0;
  flex-wrap:wrap; align-items:center;
}
.proof-logos li{
  padding:.45rem .7rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  font-weight:700; letter-spacing:.06em;
  opacity:.9; background:transparent;
}
.theme--light .proof-logos li{
  border-color:rgba(0,0,0,.10); color:#0f172a; background:#fff;
}

/* Metrics */
.metrics{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px }
.metric{
  grid-column:span 4;
  background:#0f1217; border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); padding:18px 20px; text-align:center;
}
.metric .num{ font-size:2rem; font-weight:800; color:var(--yellow); letter-spacing:.5px }
.metric p{ margin:.2rem 0 0; color:#b9bec4 }
.theme--light .metric{ background:#fff; border-color:rgba(0,0,0,.06) }
.theme--light .metric p{ color:#475569 }

/* CTA band */
.band-cta{ padding:44px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.band-cta h3{ margin:0; font-size:clamp(1.3rem,2.4vw,1.8rem) }
.band-cta .actions{ display:flex; gap:10px }

/* ================== WORK / CARDS ================== */
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:32px }
.grid-cards{ display:grid; gap:18px; grid-template-columns:repeat(12,1fr) }

.card{
  position:relative; display:block; background:#121419; border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .2s ease, border-color .2s ease; grid-column:span 6;
}
.card:nth-child(3n+1){ grid-column:span 7 }
.card:nth-child(3n+2){ grid-column:span 5 }
.card:hover{ border-color:rgba(255,212,0,.4) }

.card-media{ aspect-ratio:16/9; background:#0f1116; position:relative; overflow:hidden }
.card-media:before{
  content:""; position:absolute; inset:-20%;
  background:
    conic-gradient(from 0deg, rgba(255,212,0,.22), transparent 60%),
    radial-gradient(40% 60% at 50% 50%, rgba(255,241,121,.17), transparent 60%);
  filter:blur(18px); animation:spin 9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.card-media--01{ background-image:linear-gradient(130deg,#1a1e28,#0e0f14) }
.card-media--02{ background-image:linear-gradient(130deg,#171a22,#0f1116) }
.card-media--03{ background-image:linear-gradient(130deg,#1b1323,#0f1116) }
.card-media--04{ background-image:linear-gradient(130deg,#121b17,#0f1116) }
.card-media--05{ background-image:linear-gradient(130deg,#1d1a12,#0f1116) }
.card-media--06{ background-image:linear-gradient(130deg,#1a161f,#0f1116) }

.card-meta{ padding:16px 16px 18px }
.card-meta h3{ margin:.2rem 0 .4rem }
.tag{
  display:inline-block; font-size:.75rem; padding:.25rem .5rem;
  border:1px solid rgba(255,255,255,.12); border-radius:999px; color:#b8bcc2; margin-bottom:10px
}

/* ================== PROCESS (TUNNEL) ================== */
.tunnel{ background:#0e0f12; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06) }
.steps{ list-style:none; padding:0; margin:0; display:grid; gap:16px; grid-template-columns:repeat(12,1fr) }
.step{
  grid-column:span 6; background:#0f1217; border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); padding:18px; position:relative; overflow:hidden
}
.step .num{ position:absolute; right:14px; top:10px; font-weight:800; color:rgba(255,255,255,.05); font-size:3rem; pointer-events:none }
.step .link{ color:var(--yellow) }
.step:hover{ border-color:rgba(255,212,0,.35) }

/* ================== SERVICES ================== */
.plans{ display:grid; gap:18px; grid-template-columns:repeat(12,1fr) }
.plan{
  grid-column:span 4; background:#0f1217; border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); padding:22px; position:relative; overflow:hidden; box-shadow:var(--shadow)
}
.theme--light .plan{ background:#fff; border-color:rgba(0,0,0,.06) }
.plan--featured{ border-color:rgba(255,212,0,.45); background:linear-gradient(180deg,#12151b,#0f1217) }
.theme--light .plan--featured{ background:linear-gradient(180deg,#ffffff,#f7f7f9) }
.ribbon{
  position:absolute; top:16px; right:-40px; transform:rotate(35deg);
  background:linear-gradient(135deg,var(--yellow),var(--yellow-2));
  color:#111; padding:.3rem 2.4rem; font-weight:800; letter-spacing:.04em
}
.price{ font-weight:800; font-size:1.4rem; color:var(--yellow); margin:.4rem 0 1rem }
.features{ list-style:none; padding:0; margin:0 0 1.2rem }
.features li{ padding:.28rem 0; color:#cbd1d6 }
.theme--light .features li{ color:#475569 }

/* ================== TESTIMONIALS ================== */
.slider{ display:grid; grid-auto-flow:column; gap:18px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:8px }
.slide{
  scroll-snap-align:start; min-width:min(560px,86vw); background:#0f1217; border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)
}
.slide p{ font-size:1.1rem }
.who{ color:#aeb3b9; margin-top:.4rem }
.slider-controls{ margin-top:12px; display:flex; gap:10px }

/* ================== ABOUT ================== */
.about-grid{ display:grid; gap:18px; grid-template-columns:repeat(12,1fr) }
.about-grid>div:first-child{ grid-column:span 7 }
.about-card{ grid-column:span 5; background:#0f1217; border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:22px }
.bullets{ list-style:disc; padding-left:1.2rem; color:#cbd1d6 }

/* ================== CONTACT ================== */
.contact{ background:#0e0f12 }
.lead-form{ display:grid; gap:14px }
.lead-form .row{ display:grid; gap:14px; grid-template-columns:1fr 1fr }
.lead-form label{ display:grid; gap:6px; color:#cbd1d6 }
.lead-form input,.lead-form select,.lead-form textarea{
  background:#0f1217; color:var(--white); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:.85rem; outline:none; transition:border-color .2s
}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{ border-color:rgba(255,212,0,.45) }
.lead-form .full{ grid-column:1/-1 }
.tiny{ color:#9aa0a6; font-size:.85rem }

/* ================== FOOTER ================== */
.footer{ padding:28px 0; border-top:1px solid rgba(255,255,255,.06); background:#0e0f12 }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap }
.footer-nav{ display:flex; gap:16px; opacity:.8 }
.socials{ display:flex; gap:12px; opacity:.8 }
.copy{ color:#9aa0a6; font-size:.9rem }

/* ================== INTERACTIONS ================== */
.magnet{ position:relative; will-change:transform }
.tilt{ transform-style:preserve-3d; perspective:800px }

#cursor, #cursor-ring{
  position:fixed; left:0; top:0; pointer-events:none; z-index:1000; mix-blend-mode:exclusion;
}
#cursor{ width:6px; height:6px; border-radius:50%; background:#fff }
#cursor-ring{
  width:28px; height:28px; border:2px solid var(--yellow); border-radius:50%;
  transition:transform .08s ease-out, width .12s, height .12s, border-color .2s;
}

/* Reveal (CSS) */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s ease }
.reveal.is-in{ opacity:1; transform:none }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important } }

/* ================== RESPONSIVE ================== */
@media (max-width:1024px){
  .card{ grid-column:span 12 }
  .step{ grid-column:span 12 }
  .plan{ grid-column:span 12 }
  .about-grid>div:first-child, .about-card{ grid-column:span 12 }
  .metric{ grid-column:span 6 }
}
@media (max-width:860px){
  .nav{ display:none }
  .hamburger{ display:block }
  .site-header .btn--primary{ display:none }
}
@media (max-width:560px){
  .lead-form .row{ grid-template-columns:1fr }
  .metric{ grid-column:span 12 }
}

/* Media helpers */
html, body { overflow-x:hidden }
.grid-cards, .card { min-width:0 }
.card-media{ position:relative; aspect-ratio:16/9; overflow:hidden }
.card-media picture, .card-media img{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block }
.card-media img{ object-fit:cover; object-position:center center }

/* ================== FOOTER RESPONSIVE ================== */
@media (max-width:860px){
  .footer{ padding:36px 0 }
  .footer-inner{ gap:18px; row-gap:20px; flex-wrap:wrap }
  .footer-nav{ gap:18px }
  .socials{ gap:14px }
  .copy{ font-size:.9rem; text-align:center; width:100%; opacity:.9 }
}
@media (max-width:640px){
  .footer{ padding:42px 0 }
  .footer-inner{ flex-direction:column; align-items:flex-start; gap:22px }
  .footer-nav{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; width:100% }
  .footer-nav a{ padding:6px 0; line-height:1.2; opacity:.95 }
  .socials{ order:3; gap:14px }
  .copy{ order:4; width:100%; margin-top:4px; font-size:.92rem; color:#a7adb3 }
}
@media (max-width:480px){
  h3{ font-size:1rem } p{ font-size:.9rem }
  .footer{ padding:48px 0 }
  .logo.small{ font-size:1rem; letter-spacing:1.5px }
  .footer-nav{ grid-template-columns:1fr; gap:10px }
  .footer-inner{ align-items:center; text-align:center }
  .footer-nav a{ padding:8px 0 }
  .socials{ gap:12px }
  .copy{ font-size:.9rem }
}

/* ================== MOBILE / TOUCH PERFORMANCE ================== */
@media (hover:none), (pointer:coarse){
  #cursor, #cursor-ring{ display:none !important }
  .magnet, .tilt{ transform:none !important }
  .noise{ display:none !important }
  .glow{ filter:blur(16px) !important; opacity:.35 }
  .grid{ opacity:.18 !important }
  .site-header{ backdrop-filter:none !important; background:rgba(17,18,22,.92) !important }
  .card, .slide, .about-card, .plan{ box-shadow:none !important }
  .hero, .work, .services, .tunnel, .testimonials, .about, .contact, .footer{
    content-visibility:auto; contain-intrinsic-size:1px 800px;
  }
  .card-media::before{ display:none !important }
}

/* ================== MOBILE NAV OVERLAY ================== */
@media (max-width:860px){
  .nav{
    display:none; position:fixed; top:64px; left:0; right:0;
    padding:16px 24px 24px; background:rgba(14,15,18,0.96);
    border-top:1px solid rgba(255,255,255,.06); backdrop-filter:blur(10px);
    flex-direction:column; gap:14px; z-index:60;
  }
  .nav.open{ display:flex }
  .nav a{ display:block; width:100%; padding:12px 0; line-height:1.2; font-size:1.05rem }
  .nav .btn{ width:100%; justify-content:center }
  body.menu-open{ overflow:hidden }
  .hamburger{ display:block; position:relative; z-index:70 }
  .hamburger.active span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
  .hamburger.active span:nth-child(2){ opacity:0 }
  .hamburger.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }
}

/* Sticky CTA: hidden by default */
.sticky-cta {
  display: none;
}

/* ===== Back to top ===== */
.to-top{
  --size: 44px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,212,0,.25), rgba(255,212,0,0) 60%) ,
              #0f1217;
  color: #ffd400;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(.9);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .25s ease, border-color .25s ease;
  z-index: 95;
}
.to-top:hover{
  border-color: rgba(255,212,0,.6);
  background: linear-gradient(135deg, #ffd400, #fff179);
  color: #111;
  transform: translateY(0) scale(1);
}
.to-top:focus-visible{
  outline: 2px solid #ffd400;
  outline-offset: 2px;
}
.to-top.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Évite le chevauchement avec le sticky CTA mobile */
@media (max-width: 768px){
  .to-top{
    right: 16px;
    bottom: 84px; /* laisse la place au sticky CTA */
    --size: 42px;
  }
}

/* Respect du reduced motion */
@media (prefers-reduced-motion: reduce){
  .to-top{ transition: none }
}

/* Show only on mobile */
@media (max-width: 768px) {
  .sticky-cta {
    display: block;
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
  }
  .sticky-cta .btn {
    padding: 1rem 1.6rem;
    font-size: 1rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
  }
}