/* ============================================================
   OUTRUN — Agence de conseil digital
   ============================================================ */

/* Polices hébergées en local (fichiers Google Fonts, licence OFL) :
   aucune requête vers fonts.googleapis.com / fonts.gstatic.com. */
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #07070f;
  --bg-soft: #0c0c18;
  --ink: #f2f2f8;
  --ink-dim: rgba(242, 242, 248, 0.55);
  --pink: #ff2d78;
  --cyan: #00f0ff;
  --violet: #7b2dff;
  --grad: linear-gradient(92deg, var(--pink), var(--violet) 55%, var(--cyan));
  --border: rgba(242, 242, 248, 0.1);
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --pad: clamp(1.25rem, 4vw, 4rem);
  /* couleurs consommées par le shader Three.js (lues en JS) */
  --gl-a: #ff2d78;
  --gl-b: #00f0ff;
  --gl-star: #ffffff;
  --gl-star-op: 0.65;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.lenis { height: auto; scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

html { scrollbar-color: #2a2a40 var(--bg); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a40; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3c3c58; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--pink); color: #fff; }

a { color: inherit; text-decoration: none; }
sup { font-size: 0.4em; vertical-align: super; }

/* ------------------------------------------------------------
   Loader
   ------------------------------------------------------------ */
.loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.loader__inner { text-align: center; }
.loader__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  letter-spacing: 0.35em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.loader__bar {
  width: min(220px, 50vw); height: 1px;
  background: var(--border);
  margin: 1.5rem auto 0;
  overflow: hidden;
}
.loader__bar-fill {
  display: block; width: 100%; height: 100%;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
}

/* ------------------------------------------------------------
   Custom cursor
   ------------------------------------------------------------ */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 99;
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid rgba(0, 240, 255, 0.7);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: width 0.25s, height 0.25s, margin 0.25s, opacity 0.3s, background 0.25s;
  mix-blend-mode: difference;
}
.cursor.is-active {
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  background: rgba(0, 240, 255, 0.12);
}
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ------------------------------------------------------------
   WebGL background
   ------------------------------------------------------------ */
.webgl-wrap {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}
.webgl-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 55% at 50% 62%, rgba(123, 45, 255, 0.22), transparent 60%),
    linear-gradient(180deg, #05050c 0%, #0b0a1c 45%, #1a0f33 62%, #07070f 63%, #07070f 100%);
}
.sun {
  position: absolute;
  left: 50%; top: 38%;
  width: clamp(220px, 34vmin, 420px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd76f 0%, var(--pink) 55%, var(--violet) 100%);
  -webkit-mask: linear-gradient(180deg, #000 0 55%, transparent 55.5%, transparent 58%, #000 58.5% 66%, transparent 66.5% 70%, #000 70.5% 78%, transparent 78.5% 83%, #000 83.5% 100%);
  mask: linear-gradient(180deg, #000 0 55%, transparent 55.5%, transparent 58%, #000 58.5% 66%, transparent 66.5% 70%, #000 70.5% 78%, transparent 78.5% 83%, #000 83.5% 100%);
  filter: drop-shadow(0 0 60px rgba(255, 45, 120, 0.45));
  opacity: 0.9;
}
.horizon-glow {
  position: absolute; left: 0; right: 0; top: 62%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.7), transparent);
  filter: blur(1px);
  box-shadow: 0 0 40px 6px rgba(0, 240, 255, 0.25);
}

/* ------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--pad);
  mix-blend-mode: normal;
  transition: background 0.4s, backdrop-filter 0.4s;
}
.nav.is-scrolled {
  background: rgba(7, 7, 15, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav__logo {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.25em;
  font-size: 1.05rem;
}
.nav__links { display: flex; gap: 2.2rem; }
.nav__link {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  position: relative;
  transition: color 0.3s;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--grad);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  font-family: var(--font-display);
  font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.65rem 1.4rem;
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 99px;
  color: var(--cyan);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.nav__cta:hover {
  background: var(--cyan); color: #04040a;
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.45);
}
.nav__burger {
  display: none;
  width: 42px; height: 42px;
  background: none; border: 1px solid var(--border); border-radius: 50%;
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav__burger span {
  display: block; width: 16px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.35s, width 0.35s;
}
.nav__burger.is-open span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__burger.is-open span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* Fullscreen menu */
.menu {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(7, 7, 15, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--pad);
  visibility: hidden; opacity: 0;
}
.menu__links { display: flex; flex-direction: column; gap: 0.4rem; }
.menu__link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 9vw, 4rem);
  line-height: 1.25;
  display: flex; align-items: baseline; gap: 1rem;
}
.menu__link em {
  font-style: normal; font-size: 0.85rem; font-weight: 400;
  color: var(--cyan); letter-spacing: 0.1em;
}
.menu__footer {
  margin-top: 3rem;
  color: var(--ink-dim);
  font-size: 0.85rem; letter-spacing: 0.08em;
}

/* ------------------------------------------------------------
   Layout / sections
   ------------------------------------------------------------ */
main { position: relative; z-index: 1; }
section { padding: clamp(5rem, 12vh, 9rem) var(--pad); }

.section-label {
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 2.5rem;
}
.section-label span { color: var(--pink); margin-right: 0.5rem; }
.section-label--center { text-align: center; }

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  position: relative;
  padding-top: 6rem;
}
.hero__kicker {
  font-size: clamp(0.75rem, 1.4vw, 0.9rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 1.6rem;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 16.5vw, 13rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  margin: 0 0 1.8rem;
}
.hero__title .char {
  display: inline-block;
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.55));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 80px rgba(255, 45, 120, 0.35);
  will-change: transform;
}
.hero__sub {
  max-width: 34rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--ink-dim);
}
.hero__sub strong { color: var(--ink); font-weight: 500; }
.hero__scroll {
  position: absolute; bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-dim);
}
.hero__scroll-line {
  width: 1px; height: 44px;
  background: linear-gradient(180deg, var(--cyan), transparent);
  animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.3); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ------------------------------------------------------------
   Manifesto
   ------------------------------------------------------------ */
.manifesto {
  background: linear-gradient(180deg, transparent, var(--bg) 18%, var(--bg));
  max-width: 100%;
}
.manifesto__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 4.2vw, 3.2rem);
  line-height: 1.3;
  max-width: 62rem;
}
.manifesto__text .word { display: inline-block; }
.manifesto__body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  max-width: 62rem;
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
}
.manifesto__lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  line-height: 1.45;
  color: var(--ink);
}
.manifesto__body p:not(.manifesto__lead) {
  color: var(--ink-dim);
  font-size: 0.98rem;
}
.manifesto__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  max-width: 62rem;
  margin-top: clamp(3rem, 8vh, 5.5rem);
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.stat { display: block; }
.stat__num, .stat__plus {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1;
  display: inline;
}
.stat__num { color: var(--ink); }
.stat__plus { color: var(--pink); }
.stat__label {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

/* ------------------------------------------------------------
   Services
   ------------------------------------------------------------ */
.services { background: var(--bg); }
.services__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 3.6rem);
  line-height: 1.15;
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 7vh, 4.5rem);
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}
.card {
  position: relative;
  padding: 2.2rem 1.8rem 4.5rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s;
  will-change: transform;
}
.card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 240, 255, 0.1), transparent 65%);
  opacity: 0;
  transition: opacity 0.45s;
}
.card:hover { transform: translateY(-8px); border-color: rgba(0, 240, 255, 0.35); }
.card:hover::before { opacity: 1; }
.card__index {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--pink);
  letter-spacing: 0.2em;
}
.card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.2;
  margin: 1.1rem 0 0.9rem;
}
.card__text { color: var(--ink-dim); font-size: 0.95rem; }
.card__arrow {
  position: absolute; bottom: 1.6rem; right: 1.8rem;
  font-size: 1.4rem;
  color: var(--cyan);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover .card__arrow { transform: translateX(8px); }

/* ------------------------------------------------------------
   Clients marquee
   ------------------------------------------------------------ */
.clients {
  padding-left: 0; padding-right: 0;
  background: var(--bg);
  overflow: hidden;
}
.marquee {
  border-top: 1px solid var(--border);
  padding: 1.6rem 0;
  white-space: nowrap;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee:last-of-type { border-bottom: 1px solid var(--border); }
.marquee__track {
  display: inline-flex; align-items: center; gap: 3rem;
  padding-right: 3rem;
  animation: marquee 36s linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; animation-duration: 42s; }
.marquee span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  color: var(--ink-dim);
  transition: color 0.3s;
}
.marquee span:hover { color: var(--ink); }
.marquee i { font-style: normal; color: var(--pink); font-size: 1rem; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   Contact
   ------------------------------------------------------------ */
.contact {
  text-align: center;
  padding-top: clamp(6rem, 16vh, 11rem);
  padding-bottom: clamp(6rem, 16vh, 11rem);
  background:
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(123, 45, 255, 0.18), transparent),
    var(--bg);
}
.contact .section-label { text-align: center; }
.contact__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 4.4rem);
  line-height: 1.12;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.contact__mail {
  display: inline-block;
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 3.6vw, 2.4rem);
  overflow: hidden;
  line-height: 1.4;
}
.contact__mail-text, .contact__mail-hover {
  display: block;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.contact__mail-hover {
  position: absolute; inset: 0;
  transform: translateY(110%);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.contact__mail:hover .contact__mail-text { transform: translateY(-110%); }
.contact__mail:hover .contact__mail-hover { transform: translateY(0); }
.contact__mail::after {
  content: ""; position: absolute; left: 0; bottom: 2px;
  width: 100%; height: 1px;
  background: var(--grad);
}
.contact__meta {
  margin-top: 2rem;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.footer {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding: 1.6rem var(--pad);
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--ink-dim);
  background: var(--bg);
}
.footer__top { color: var(--cyan); transition: opacity 0.3s; }
.footer__top:hover { opacity: 0.7; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.footer__legal a { transition: color 0.3s; }
.footer__legal a:hover, .footer__legal a[aria-current="page"] { color: var(--ink); }

/* ------------------------------------------------------------
   Pages légales (sans WebGL ni animations : statiques, lisibles sans JS)
   ------------------------------------------------------------ */
.legal { max-width: 46rem; margin: 0 auto; padding-top: clamp(7rem, 16vh, 11rem); }
.legal h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; margin-bottom: 0.6rem; }
.legal__date { font-size: 0.8rem; letter-spacing: 0.1em; color: var(--ink-dim); margin-bottom: 3rem; }
.legal h2 { font-family: var(--font-display); font-size: 1.35rem; margin: 2.6rem 0 0.9rem; }
.legal p, .legal li { color: var(--ink-dim); margin-bottom: 0.9rem; }
.legal ul { padding-left: 1.2rem; }
.legal a { color: var(--ink); border-bottom: 1px solid var(--border); }
.legal a:hover { border-bottom-color: var(--cyan); }
.legal mark { background: rgba(217, 160, 91, 0.25); color: var(--ink); padding: 0 0.25em; border-radius: 2px; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.4rem; }
.legal dt { color: var(--ink); }
.legal dd { color: var(--ink-dim); }
@media (max-width: 720px) { .legal dl { grid-template-columns: 1fr; } .legal dt { margin-top: 0.6rem; } }

/* ------------------------------------------------------------
   Reveal helpers (initial states set in JS to stay accessible sans JS)
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .services__grid { grid-template-columns: 1fr; }
  .card { padding-bottom: 3.6rem; }
}

@media (max-width: 720px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .manifesto__body { grid-template-columns: 1fr; }
  .manifesto__stats { grid-template-columns: 1fr; gap: 1.6rem; }
  .stat__label { display: inline; margin-left: 0.8rem; }
  .hero__scroll { display: none; }
  .footer { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   VARIANTES DE COULEUR
   « dune » est la piste retenue et est posée en dur sur <html>.
   « bleu » n'est plus atteignable : conservée pour archive,
   supprimable sans risque.
   ============================================================ */

/* ---------- Variante « claire bleue » : synthwave en plein jour (archive) */
[data-theme="bleu"] {
  --bg: #eef4fb;
  --bg-soft: #e3edf8;
  --ink: #0b1b33;
  --ink-dim: rgba(11, 27, 51, 0.62);
  --pink: #0a66ff;
  --cyan: #0096c7;
  --violet: #4f7cff;
  --grad: linear-gradient(92deg, #0a66ff, #4f7cff 55%, #00b4d8);
  --border: rgba(11, 27, 51, 0.14);
  --gl-a: #4f9cff;
  --gl-b: #00b4d8;
  --gl-star: #ffffff;
  --gl-star-op: 0.3;
  scrollbar-color: #b9cbe2 #eef4fb;
}
[data-theme="bleu"] ::-webkit-scrollbar-thumb { background: #b9cbe2; }
[data-theme="bleu"] ::-webkit-scrollbar-thumb:hover { background: #9db4d4; }
[data-theme="bleu"] ::-webkit-scrollbar-track { background: #eef4fb; }
[data-theme="bleu"] ::selection { background: #0a66ff; color: #fff; }
[data-theme="bleu"] .sky {
  background:
    radial-gradient(ellipse 120% 55% at 50% 62%, rgba(79, 124, 255, 0.16), transparent 60%),
    linear-gradient(180deg, #b6d4f2 0%, #d6e7f8 45%, #f4f9ff 62%, #eef4fb 63%, #eef4fb 100%);
}
[data-theme="bleu"] .sun {
  background: linear-gradient(180deg, #fffbe8 0%, #ffd97a 38%, #7fb5ff 72%, #0a66ff 100%);
  filter: drop-shadow(0 0 60px rgba(10, 102, 255, 0.3));
  opacity: 0.95;
}
[data-theme="bleu"] .horizon-glow {
  background: linear-gradient(90deg, transparent, rgba(10, 102, 255, 0.55), transparent);
  box-shadow: 0 0 40px 6px rgba(10, 102, 255, 0.18);
}
[data-theme="bleu"] .hero__title .char {
  background: linear-gradient(180deg, #0b1b33 30%, rgba(11, 27, 51, 0.62));
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 80px rgba(10, 102, 255, 0.25);
}
[data-theme="bleu"] .cursor {
  border-color: rgba(10, 102, 255, 0.7);
  mix-blend-mode: normal;
}
[data-theme="bleu"] .cursor.is-active { background: rgba(10, 102, 255, 0.1); }
[data-theme="bleu"] .nav.is-scrolled { background: rgba(238, 244, 251, 0.78); }
[data-theme="bleu"] .nav__cta { border-color: rgba(10, 102, 255, 0.45); color: #0a66ff; }
[data-theme="bleu"] .nav__cta:hover {
  background: #0a66ff; color: #fff;
  box-shadow: 0 0 28px rgba(10, 102, 255, 0.35);
}
[data-theme="bleu"] .menu { background: rgba(238, 244, 251, 0.94); }
[data-theme="bleu"] .card {
  background: linear-gradient(160deg, rgba(11, 27, 51, 0.04), rgba(11, 27, 51, 0.012));
}
[data-theme="bleu"] .card::before {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(10, 102, 255, 0.09), transparent 65%);
}
[data-theme="bleu"] .card:hover { border-color: rgba(10, 102, 255, 0.4); }
[data-theme="bleu"] .contact {
  background:
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(79, 124, 255, 0.14), transparent),
    var(--bg);
}

/* ---------- Variante « Dune » : Villeneuve, chaleur & exploration
   PISTE RETENUE — appliquée via data-theme="dune" sur <html> */
[data-theme="dune"] {
  --bg: #1a120a;
  --bg-soft: #221709;
  --ink: #ecdfc8;
  --ink-dim: rgba(236, 223, 200, 0.55);
  --pink: #e07b2a;   /* épice */
  --cyan: #d9a05b;   /* sable doré */
  --violet: #8a4a1c;
  --grad: linear-gradient(92deg, #d9a05b, #e07b2a 55%, #c2570e);
  --border: rgba(236, 223, 200, 0.12);
  --gl-a: #c97a2e;     /* dunes lointaines : ambre brûlé */
  --gl-b: #e8c9a0;     /* couloir central : sable pâle */
  --gl-star: #e8c9a0;  /* poussière en suspension */
  --gl-star-op: 0.35;
  --gl-amp: 2.4;       /* relief : vraies dunes */
  --gl-speed: 0.9;     /* traversée lente, majestueuse */
  scrollbar-color: #4a331d #1a120a;
}
[data-theme="dune"] ::-webkit-scrollbar-thumb { background: #4a331d; }
[data-theme="dune"] ::-webkit-scrollbar-thumb:hover { background: #6b4a28; }
[data-theme="dune"] ::-webkit-scrollbar-track { background: #1a120a; }
[data-theme="dune"] ::selection { background: #e07b2a; color: #1a120a; }
[data-theme="dune"] .sky {
  background:
    radial-gradient(ellipse 120% 55% at 50% 62%, rgba(224, 123, 42, 0.22), transparent 62%),
    linear-gradient(180deg, #0d0805 0%, #2b1708 36%, #6e3d12 56%, #b0651f 62%, #1a120a 63%, #1a120a 100%);
}
/* brume de chaleur qui respire au-dessus de l'horizon */
[data-theme="dune"] .sky::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 85% 26% at 50% 60%, rgba(240, 184, 110, 0.3), transparent 70%);
  filter: blur(8px);
  animation: duneHaze 8s ease-in-out infinite;
}
@keyframes duneHaze {
  0%, 100% { opacity: 0.65; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.07); }
}
/* soleil géant voilé, sans les bandes synthwave */
[data-theme="dune"] .sun {
  -webkit-mask: none;
  mask: none;
  width: clamp(280px, 46vmin, 560px);
  background: radial-gradient(circle, #f7e6c2 0%, #eebf7a 42%, rgba(224, 123, 42, 0.6) 66%, transparent 71%);
  filter: drop-shadow(0 0 90px rgba(224, 123, 42, 0.5));
  animation: duneSun 9s ease-in-out infinite;
}
@keyframes duneSun {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
[data-theme="dune"] .horizon-glow {
  background: linear-gradient(90deg, transparent, rgba(240, 184, 110, 0.4), transparent);
  box-shadow: 0 0 40px 6px rgba(224, 123, 42, 0.16);
  filter: blur(2px);
}
[data-theme="dune"] .hero__title .char {
  background: linear-gradient(180deg, #f6ead2 30%, rgba(246, 234, 210, 0.5));
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 90px rgba(224, 123, 42, 0.45);
}
[data-theme="dune"] .hero__kicker { letter-spacing: 0.55em; }
[data-theme="dune"] .cursor { border-color: rgba(217, 160, 91, 0.75); }
[data-theme="dune"] .cursor.is-active { background: rgba(217, 160, 91, 0.12); }
[data-theme="dune"] .nav.is-scrolled { background: rgba(26, 18, 10, 0.65); }
[data-theme="dune"] .nav__cta { border-color: rgba(217, 160, 91, 0.5); }
[data-theme="dune"] .nav__cta:hover {
  background: #d9a05b; color: #1a120a;
  box-shadow: 0 0 28px rgba(217, 160, 91, 0.4);
}
[data-theme="dune"] .menu { background: rgba(26, 18, 10, 0.93); }
[data-theme="dune"] .card::before {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(217, 160, 91, 0.1), transparent 65%);
}
[data-theme="dune"] .card:hover { border-color: rgba(217, 160, 91, 0.4); }
[data-theme="dune"] .contact {
  background:
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(194, 87, 14, 0.24), transparent),
    var(--bg);
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .hero__scroll-line { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}