/* ============================================================
   KALPY — Agence créative dark
   ============================================================ */

:root {
  /* ---- Fonds (indigo très sombre, dérivé du bleu nuit KALPY #272154) ---- */
  --bg: #0c0a20;
  --bg-soft: #141031;
  --surface: #17123a;
  --line: rgba(255, 255, 255, 0.10);
  --text: #f2f1f8;
  --muted: #9791b5;

  /* ---- Palette de marque KALPY (extraite du logo) ---- */
  --navy: #272154;
  --blue: #2db8eb;   /* bleu ciel */
  --royal: #0c529f;  /* bleu roi  */
  --indigo: #5c62a9; /* bleu-violet */
  --purple: #b686ba; /* mauve */
  --pink: #ec7fb5;   /* rose/magenta */
  --teal: #5cc0ca;   /* turquoise */

  /* Dégradé signature (bleu -> violet -> rose) */
  --grad: linear-gradient(120deg, #2db8eb 0%, #5c62a9 46%, #ec7fb5 100%);

  /* ---- Accent d'interaction (change ici) ---- */
  --accent: #2db8eb;        /* bleu de marque KALPY */
  --accent-ink: #0c0a20;    /* texte foncé sur accent clair */

  /* ---------- Échelle typographique (unique source de vérité) ---------- */
  --fs-micro: 0.72rem;                            /* mono : micro-libellés */
  --fs-label: 0.8rem;                             /* mono : étiquettes, tags */
  --fs-sm: 0.92rem;                               /* texte secondaire */
  --fs-body: 1rem;                                /* texte courant */
  --fs-md: 1.1rem;                                /* texte appuyé */
  --fs-lg: 1.3rem;                                /* petit titre */
  --fs-lead-sm: clamp(1.05rem, 1.5vw, 1.22rem);   /* accroche courte */
  --fs-lead: clamp(1.25rem, 2.2vw, 1.7rem);       /* accroche de section */
  --fs-title: clamp(1.4rem, 3vw, 2.2rem);         /* titre de carte */
  --fs-title-lg: clamp(1.6rem, 3.2vw, 2.6rem);    /* titre de bloc */
  --fs-display: clamp(2.4rem, 6vw, 5rem);         /* titre de section */
  --fs-display-xl: clamp(2.6rem, 7.5vw, 6.5rem);  /* titre de page */
  --fs-display-mega: clamp(3rem, 11vw, 9rem);     /* titre vitrine */
  --fs-hero: clamp(3.6rem, 14vw, 11rem);          /* rotateur du hero */

  /* ---------- Rayons ---------- */
  --r-hair: 3px;    /* barres fines */
  --r-xs: 6px;      /* surlignage */
  --r-sm: 8px;      /* vignettes */
  --r-lg: 14px;     /* panneaux, pop-in */
  --r-pill: 100px;

  /* ---------- Ombres (vocabulaire documenté dans DESIGN.md) ---------- */
  --shadow-media: 0 30px 60px -36px rgba(0, 0, 0, 0.6);   /* décollement média */
  --shadow-card:  0 34px 70px -28px rgba(0, 0, 0, 0.65);  /* carte au survol */
  --shadow-lift:  0 40px 80px -34px rgba(0, 0, 0, 0.5);   /* visuel surélevé */
  --shadow-float: 0 30px 60px -20px rgba(0, 0, 0, 0.55);  /* élément flottant */

  /* Encre de masque : stencil alpha pour mask-image, pas une couleur d'interface */
  --mask-ink: #000;

  --radius: 11px;   /* rayon dominant */
  --container: 1280px;
  /* Bricolage Grotesque : une seule famille variable, trois usages via les axes
     de graisse (wght) et de largeur (wdth). Le mono reste distinct. */
  --font-body: "Bricolage Grotesque", system-ui, sans-serif;
  --font-head: "Bricolage Grotesque", system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Fond reel de la section courante. Sert au remplissage automatique des
     formulaires, qui doit peindre exactement la couleur qu il recouvre. */
  --section-bg: var(--bg);
  /* clip et non hidden : hidden ferait du body un conteneur de defilement,
     et tout position: sticky a l'interieur cesserait de coller. */
  overflow-x: clip;
}

/* L attribut hidden doit toujours l emporter. La regle du navigateur
   ([hidden] { display: none }) se fait surcharger par n importe quel display
   d auteur : sans ce garde-fou, poser hidden sur un element qui porte un
   display: flex ou grid reste sans effet, silencieusement. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  /* Le plancher de la gouttiere est la seule valeur qui compte sur telephone :
     4vw ne depasse 24px qu'au-dela de 600px de large. Le relever aere les
     petits ecrans sans rien changer au-dessus de 750px. */
  padding: 0 clamp(30px, 4vw, 48px);
}

.section { padding: clamp(66px, 8.5vw, 124px) 0; position: relative; }

/* Deux sections claires qui se suivent additionnent leurs marges sur un fond
   identique : l'espace double alors qu'aucune rupture ne le justifie. La
   seconde s'appuie sur la marge basse de la premiere. */
.section--light + .section--light { padding-top: 0; }

/* ---------- Thème CLAIR (alternance) ---------- */
.section--light {
  position: relative; overflow: hidden;
  background: #f3f5f8;
  --section-bg: #f3f5f8;
  color: #14121e;
  /* on redéfinit les variables : tous les composants enfants s'adaptent */
  --text: #14121e;
  --muted: #5a5670;
  --line: rgba(20, 18, 30, 0.14);
  --surface: #ffffff;
}
.section--light > .container { position: relative; z-index: 1; }
.section--light ::selection { background: var(--navy); color: #fff; }

/* Sections claires : fond épuré (pas de halo ni d'animation de fond) */

/* Fond WebGL des sections claires (remplace les halos CSS quand actif) */
.section-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block; pointer-events: none;
}
.section--light.has-webgl::before, .section--light.has-webgl::after,
.section--light.has-particles::before, .section--light.has-particles::after,
.section--light.has-code::before, .section--light.has-code::after { display: none; }

/* Fond "code / data qui défile" (zones claires) */
[data-code] { position: relative; overflow: hidden; }
[data-code] > .container { position: relative; z-index: 1; }
.code-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; justify-content: space-between; gap: 3vw; padding: 0 2vw;
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: 2.4; white-space: pre;
  color: rgba(20, 18, 30, 0.055);
  user-select: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, var(--mask-ink) 14%, var(--mask-ink) 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, var(--mask-ink) 14%, var(--mask-ink) 86%, transparent);
}
.code-col { flex: 1 1 0; overflow: hidden; }
.code-track { will-change: transform; animation: codeScroll linear infinite; }
@keyframes codeScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .code-track { animation: none; } }

/* ---------- Eyebrow de section (numéroté) ---------- */
.sec-eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: clamp(22px, 3vw, 34px);
}
.sec-eyebrow__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* ---------- Mot surligné (marker) ---------- */
mark {
  background: var(--accent); color: var(--accent-ink);
  padding: 0 0.14em; margin: 0 0.02em; border-radius: var(--r-xs);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Headings ---------- */
.sec-title {
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 78%;
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.sec-title--center { text-align: center; }
.sec-title i { color: var(--accent); font-size: 0.7em; vertical-align: middle; }

.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.sec-head .sec-title { margin-bottom: clamp(40px, 6vw, 70px); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; transition: 0.4s var(--ease); }

.btn--pill {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 13px 24px;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 600;
  transition: 0.35s var(--ease);
}
.btn--pill i { transition: transform 0.4s var(--ease); }
.btn--pill:hover { background: #fff; color: var(--accent-ink); }
.btn--pill:hover i { transform: translateX(4px); }

.btn--text {
  position: relative;
  font-family: var(--font-head);
  font-weight: 600;
  padding-bottom: 4px;
}
.btn--text::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.btn--text:hover::after { transform: scaleX(1); transform-origin: left; }
.btn--text i { color: var(--accent); transition: transform 0.4s var(--ease); }
.btn--text:hover i { transform: translate(3px, -3px); }

/* ============================================================
   Preloader
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(120% 100% at 50% 0%, var(--surface) 0%, var(--bg) 70%);
  display: grid; place-items: center;
  transition: transform 0.9s var(--ease);
}
.preloader.is-done { transform: translateY(-100%); }
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.preloader__logo { position: relative; overflow: hidden; }
.preloader__logo img {
  height: clamp(38px, 6vw, 54px); width: auto; display: block;
  opacity: 0; transform: translateY(14px) scale(0.98);
  animation: plReveal 1s var(--ease) forwards;
}
@keyframes plReveal { to { opacity: 1; transform: none; } }
.preloader__sheen {
  position: absolute; top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-18deg);
  animation: plSheen 1.6s ease-in-out 0.5s infinite;
}
@keyframes plSheen { 0% { left: -70%; } 55%, 100% { left: 145%; } }
.preloader__bar {
  width: 170px; height: 2px; border-radius: var(--r-hair);
  background: rgba(255,255,255,0.12); overflow: hidden;
}
.preloader__bar span {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--grad); border-radius: var(--r-hair);
  transition: transform 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .preloader__sheen { animation: none; }
  .preloader__logo img { animation-duration: 0.3s; }
}

/* ============================================================
   Cursor
   ============================================================ */
.cursor, .cursor-dot {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
}
/* Le suivi de souris ecrit un transform inline sur .cursor a chaque frame.
   L'agrandissement vit donc sur ::before, sinon il serait ecrase et le
   libelle devrait etre re-reduit pour compenser un scale inexistant. */
.cursor {
  width: 36px; height: 36px;
  display: grid; place-items: center;
}
.cursor::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent);
  transition: transform 0.32s var(--ease), background 0.32s, border-color 0.32s;
}
.cursor-dot {
  width: 5px; height: 5px;
  background: var(--accent);
  transition: opacity 0.3s;
}
.cursor.is-hover::before { transform: scale(1.78); background: rgba(236,127,181,0.14); border-color: transparent; }
.cursor.is-view::before {
  transform: scale(2.56);
  background: var(--accent); border-color: transparent;
}
.cursor.is-view::after {
  content: "Voir"; color: var(--accent-ink);
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  position: relative; z-index: 1;
}
.cursor.is-view ~ .cursor-dot, .cursor.is-hover ~ .cursor-dot { opacity: 0; }
@media (hover: none), (max-width: 900px) {
  .cursor, .cursor-dot { display: none; }
}

/* ============================================================
   Scroll progress + back to top
   ============================================================ */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--grad); z-index: 1000;
}
.back-to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 900;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: 0.4s var(--ease);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ============================================================
   Header
   ============================================================ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  padding: 22px 0;
  transition: 0.4s var(--ease);
}
.header.is-scrolled {
  padding: 14px 0;
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; gap: 22px; }
.logo { display: flex; align-items: center; }
.logo img {
  height: 34px; width: auto; transform-origin: left center;
  transition: transform 0.4s var(--ease);
}
.logo__scrolled { display: none; }
.header.is-scrolled .logo img { transform: scale(0.88); }
.header.is-scrolled .logo__default { display: none; }
.header.is-scrolled .logo__scrolled { display: block; }
.logo:hover img { transform: scale(1.04); }
.header.is-scrolled .logo:hover img { transform: scale(0.92); }

/* Baseline animée (visible en sticky) */
.baseline {
  display: none;
  align-items: center;
  gap: 20px;
  padding-left: 22px;
  border-left: 1px solid var(--line);
}
.header.is-scrolled .baseline { display: flex; }
.bl-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-body); letter-spacing: 0.01em; color: var(--text);
  will-change: transform, opacity, filter;
}
.bl-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c, var(--accent));
}

.header.is-scrolled .header.is-scrolled .header__actions .btn--pill { display: none; }

.nav__list { display: flex; gap: 34px; }
.nav__link {
  position: relative;
  font-family: var(--font-head); font-weight: 500;
  font-size: var(--fs-body); color: var(--muted);
  transition: color 0.3s;
}
.nav__link::before {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  opacity: 0; transform: scale(0.4); transition: 0.3s var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::before { opacity: 1; transform: scale(1); }

.header__actions { display: flex; align-items: center; gap: 16px; }

.burger { display: none; width: 40px; height: 40px; flex-direction: column; gap: 6px; align-items: center; justify-content: center; }
.burger span { width: 24px; height: 2px; background: var(--text); transition: 0.3s; }
.burger.is-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 790;
  background: var(--bg-soft);
  padding: 120px 32px 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease);
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu ul { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu a {
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-title-lg); letter-spacing: -0.02em;
}
.mobile-menu__foot a { color: var(--accent); font-size: var(--fs-md); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 140px 0 0;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -4;
  background:
    radial-gradient(55% 45% at 84% -8%, rgba(45,184,235,0.10), transparent 62%),
    radial-gradient(45% 40% at 10% 28%, rgba(92,98,169,0.07), transparent 64%),
    linear-gradient(180deg, transparent 55%, var(--bg) 96%),
    var(--bg);
}
/* Fond du hero : image ou vidéo, sous les particules */
.hero__img, .hero__video {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(180deg, var(--mask-ink) 0%, var(--mask-ink) 38%, transparent 82%);
  mask-image: linear-gradient(180deg, var(--mask-ink) 0%, var(--mask-ink) 38%, transparent 82%);
}
.hero__video { opacity: 0.34; }
.hero__canvas {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.2s ease;
}
.hero__canvas.is-ready { opacity: 1; }
.hero__noise {
  position: absolute; inset: 0; z-index: -1; opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.hero__top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: start;
}
.hero__socials { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.vtext { writing-mode: vertical-rl; text-orientation: mixed; color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; }
.hero__socials-icons { display: flex; flex-direction: column; gap: 14px; }
.hero__socials-icons a { color: var(--muted); transition: color 0.3s, transform 0.3s; }
.hero__socials-icons a:hover { color: var(--accent); transform: translateY(-2px); }

.hero__intro { max-width: 340px; }
.hero__date { color: var(--accent); font-family: var(--font-mono); font-weight: 500; margin-bottom: 14px; font-size: var(--fs-label); letter-spacing: 0.05em; text-transform: uppercase; }
.hero__intro p { color: var(--muted); }

.hero__info { display: flex; flex-direction: column; gap: 22px; text-align: right; }
.hero__info-block { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-label); line-height: 1.8; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

.hero__lower {
  position: relative;
  flex: 1 1 auto;
  /* Le bas plus genereux que le haut : le bloc centre remonte dans la banniere. */
  padding: clamp(20px, 3vh, 40px) 0 clamp(70px, 15vh, 170px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.hero__eyebrow {
  font-family: var(--font-head); font-weight: 500;
  font-size: var(--fs-lead-sm);
  color: var(--muted); letter-spacing: 0.01em;
  margin-bottom: clamp(14px, 2.5vw, 30px);
}

/* Headline central : Build. Automate. Elevate. (rotateur vertical) */
.hero__headline {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 1; letter-spacing: -0.035em;
  --h: 1.08em;
}
.hrotator { display: inline-block; overflow: hidden; height: var(--h); vertical-align: bottom; }
.hrotator__list { display: flex; flex-direction: column; will-change: transform; }
.hrotator__item { height: var(--h); display: flex; align-items: center; justify-content: center; color: var(--text); white-space: nowrap; }
.hw-dot {
  width: 0.13em; height: 0.13em; border-radius: 50%;
  background: var(--c, var(--accent));
  margin: 0 0 0.06em 0.06em; flex-shrink: 0; align-self: flex-end;
}

.hero__circle { position: absolute; right: 0; bottom: 46px; width: 120px; height: 120px; flex-shrink: 0; }
.hero__circle svg { width: 100%; height: 100%; animation: spin 16s linear infinite; }
/* La taille du texte circulaire est portee par l'attribut SVG font-size (unites
   du viewBox 0 0 120 120), pas par le ramp typographique CSS. */
.hero__circle text { font-family: var(--font-head); letter-spacing: 0.18em; fill: var(--muted); text-transform: uppercase; }
.hero__circle i { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; color: var(--accent); font-size: var(--fs-lg); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Hero clients */
.hero__clients { border-top: 1px solid var(--line); padding: 26px 0; }
.hero__clients-inner { display: flex; align-items: center; gap: 40px; }
.hero__mail { color: var(--muted); font-family: var(--font-head); flex-shrink: 0; transition: color 0.3s; }
.hero__mail:hover { color: var(--accent); }
.hero__marquee {
  flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--mask-ink) 8%, var(--mask-ink) 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--mask-ink) 8%, var(--mask-ink) 92%, transparent);
}
.hero__marquee-track {
  display: flex; align-items: center; gap: clamp(40px, 5vw, 70px);
  width: max-content;
  animation: heroMarquee 34s linear infinite;
}
.hero__marquee:hover .hero__marquee-track { animation-play-state: paused; }
@keyframes heroMarquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero__marquee-track { animation: none; } }
.client { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-lg); color: var(--muted); white-space: nowrap; opacity: 0.7; transition: color 0.3s, opacity 0.3s; }
.client:hover { color: var(--accent); opacity: 1; }

/* ============================================================
   About
   ============================================================ */
.about { padding-top: clamp(46px, 6vw, 88px); }
.about__top { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 4vw, 60px); align-items: stretch; margin-bottom: clamp(38px, 4.5vw, 64px); }
.about__intro-col { display: flex; flex-direction: column; justify-content: center; }
.about__headline {
  font-family: var(--font-display); font-weight: 800; font-stretch: 78%;
  font-size: var(--fs-display); line-height: 0.98;
  letter-spacing: 0.005em; text-transform: uppercase; max-width: 16ch;
  margin-bottom: 22px;
}
.about__intro-col .about__lead { margin-bottom: 22px; }
.about__intro-col .btn--text { align-self: flex-start; }
.about__media { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 420px; }
.about__media img { width: 100%; height: 100%; object-fit: cover; }

/* Cartes "atouts" : surface propre, bordure d'accent au survol, élévation par
   la lumière. La bordure reste sur la même épaisseur au repos et au survol —
   un anneau en pseudo-élément se crénelle sur les coins avec overflow: hidden. */
.about__features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.2vw, 30px); }

.afeature {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.afeature:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: var(--shadow-media);
}

.afeature__img { position: relative; overflow: hidden; aspect-ratio: 16/10; }
.afeature__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.35) contrast(1.05);
  transition: transform 0.8s var(--ease), filter 0.6s var(--ease);
}
.afeature:hover .afeature__img img { transform: scale(1.05); filter: saturate(1) contrast(1); }
/* Voile qui raccorde l'image au corps de la carte */
.afeature__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,10,32,0.18) 0%, transparent 40%, rgba(12,10,32,0.30) 100%);
  pointer-events: none;
}

.afeature__body {
  position: relative; z-index: 1;
  padding: clamp(22px, 2.2vw, 30px);
  display: flex; flex-direction: column; gap: 8px;
}
.afeature__index {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.12em; color: var(--accent); margin-bottom: 2px;
}
.afeature__title {
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-lg);
  letter-spacing: -0.01em; line-height: 1.2;
}
.afeature__text { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.about__lead { font-size: var(--fs-lead); font-weight: 500; color: var(--text); margin-bottom: 22px; line-height: 1.35; }
.about__content p { font-size: var(--fs-lead-sm); color: var(--muted); margin-bottom: 22px; }
.about__content .btn--text { margin-top: 10px; }

/* ============================================================
   Clients (bandeau logos)
   ============================================================ */
/* Bandeau sombre isole entre deux sections claires : le haut et le bas
   portent la meme respiration pour que la bande se lise comme un bloc pose,
   et non comme une section qui aurait glisse vers le bas. */
.clients { padding-block: clamp(56px, 6.4vw, 88px); }

.clients__label {
  text-align: center; color: var(--muted);
  font-family: var(--font-mono); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--fs-label);
  margin-bottom: clamp(30px, 4vw, 50px);
}
.clients__marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--mask-ink) 10%, var(--mask-ink) 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--mask-ink) 10%, var(--mask-ink) 90%, transparent);
}
.clients__track {
  display: flex; align-items: center; gap: clamp(40px, 7vw, 90px);
  width: max-content;
  animation: clientsScroll 60s linear infinite;
}
.clients__marquee:hover .clients__track { animation-play-state: paused; }
/* Normalisation par boîte : chaque logo occupe le même poids optique,
   quel que soit son rapport largeur/hauteur. */
.clients__track img {
  width: clamp(110px, 12vw, 168px);
  height: clamp(40px, 4.4vw, 56px);
  object-fit: contain; object-position: center;
  flex-shrink: 0;
  opacity: 0.5; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.clients__track img:hover { opacity: 1; transform: scale(1.08); }
/* Le talisman est un SVG blanc : il ne doit pas etre inverse deux fois. */
@keyframes clientsScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .clients__track { animation: none; flex-wrap: wrap; justify-content: center; } }

/* ============================================================
   Services
   ============================================================ */

/* ============================================================
   Works — style "Selected Work"
   ============================================================ */
.works__head { text-align: center; margin-bottom: clamp(36px, 5vw, 60px); }
.works__head .sec-eyebrow { justify-content: center; }
.works__title {
  font-family: var(--font-display); font-weight: 800; font-stretch: 78%; text-transform: uppercase;
  font-size: var(--fs-display-mega); line-height: 0.9; letter-spacing: 0.005em;
  margin: 6px 0 clamp(26px, 3.5vw, 42px);
}

.works__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.wcard { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/12; cursor: pointer; }
/* Le zoom au scroll est pilote par GSAP (transform) : le survol joue sur la
   luminosite pour ne pas entrer en conflit avec lui. */
.wcard__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.6s var(--ease); }
.wcard:hover .wcard__bg { filter: brightness(1.12) saturate(1.06); }
.wcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 0%, transparent) 32%, color-mix(in srgb, var(--bg) 82%, transparent) 100%); }
.wcard__content { position: absolute; left: 0; bottom: 0; z-index: 2; padding: clamp(20px, 2.6vw, 34px); }
.wcard__cat { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.72); }
.wcard__title { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: var(--fs-title-lg); color: #fff; margin: 6px 0 6px; letter-spacing: 0.005em; }
.wcard__meta { color: rgba(255,255,255,0.82); font-size: var(--fs-sm); }

.works__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px);
}
.works__cta-title { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: var(--fs-title); letter-spacing: 0.005em; }
.works__cta-text { color: var(--muted); margin-top: 8px; max-width: 52ch; }

/* Le projet mis en avant occupe toute la largeur : sur une grille paire,
   c'est aussi ce qui evite la carte orpheline en fin de rangee. */
.wcard--wide { grid-column: 1 / -1; aspect-ratio: 16/7; }

/* Note de confidentialite : une partie des projets ne peut pas etre montree.
   Le bloc l'assume au lieu de laisser croire que la selection est exhaustive.
   Il inverse les tokens pour trancher sur la section claire : encadre comme
   le CTA voisin, il se lisait comme une redite et passait inapercu. */
.works__note {
  margin-top: clamp(30px, 3.6vw, 52px);
  border-radius: var(--radius);
  padding: clamp(32px, 4.2vw, 62px);
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.6fr);
  gap: clamp(22px, 3.4vw, 62px);
  background: var(--bg); box-shadow: var(--shadow-card);
  --text: #f2f1f8; --muted: #a29cc0; --line: rgba(255,255,255,0.12);
  color: var(--text);
}
.works__note-head { border-left: 2px solid var(--accent); padding-left: clamp(16px, 1.6vw, 24px); }
.works__note-eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent);
}
.works__note-title {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-stretch: 88%;
  font-size: var(--fs-title-lg); line-height: 1.04; letter-spacing: 0.005em;
  margin-top: 12px;
}
.works__note-body p { color: var(--muted); max-width: 62ch; }
.works__note-body p + p { margin-top: 15px; }
/* Les exemples anonymes en liste plutot qu'en paragraphes enchaines : deux cas
   distincts se lisent mieux separes qu'agglutines dans un bloc de texte. */
.works__note-list { display: flex; flex-direction: column; gap: 13px; margin-top: 13px; }
.works__note-list li { position: relative; padding-left: 24px; color: var(--muted); max-width: 62ch; }
.works__note-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.works__note-list a { color: var(--text); border-bottom: 1px solid var(--line); transition: color 0.3s, border-color 0.3s; }
.works__note-list a:hover { color: var(--accent); border-color: var(--accent); }
.works__note-body strong { color: var(--text); font-weight: 600; }
.works__note-body p:last-child { color: var(--text); }

.works__second { display: grid; grid-template-columns: 1fr; }
.works__second .wcard { aspect-ratio: 21/8; }

@media (max-width: 900px) {
  .works__second .wcard { aspect-ratio: 16/11; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer { position: relative; border-top: 1px solid var(--line); padding-top: clamp(60px, 9vw, 120px); overflow: hidden; }
.footer__top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); padding-bottom: 70px; }
.footer__title { font-family: var(--font-display); font-weight: 800; font-stretch: 78%; font-size: var(--fs-display); line-height: 0.98; letter-spacing: 0.005em; text-transform: uppercase; margin-bottom: 18px; }
.footer__cta-sub { color: var(--muted); margin-bottom: 30px; max-width: 44ch; }
.footer__form { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 14px; max-width: 460px; }
.footer__form input { flex: 1; background: none; border: none; color: var(--text); font-size: var(--fs-body); outline: none; }
.footer__form input::placeholder { color: var(--muted); }
.footer__form button { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; transition: 0.3s; }
.footer__form button:hover { background: #fff; }
.footer__note { color: var(--muted); margin-top: 18px; font-size: var(--fs-sm); }
.footer__note a { color: var(--accent); }

.footer__links { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 30px; }
.footer__contact div { margin-bottom: 22px; }
.footer__contact span { display: block; color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.footer__contact a { font-family: var(--font-mono); font-size: var(--fs-body); transition: color 0.3s; }
.footer__contact a:hover { color: var(--accent); }
.footer__col h4 { font-family: var(--font-mono); font-weight: 500; margin-bottom: 18px; color: var(--muted); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; }
.footer__col ul { display: flex; flex-direction: column; gap: 12px; }
.footer__col a { color: var(--text); transition: color 0.3s; }
.footer__col a:hover { color: var(--accent); }

.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 28px 0; border-top: 1px solid var(--line); position: relative; z-index: 2; font-family: var(--font-mono); font-size: var(--fs-label); }
.footer__bottom p { color: var(--muted); }
.footer__bottom strong { color: var(--text); }
.footer__bottom ul { display: flex; gap: 12px; color: var(--muted); }
.footer__bottom a { color: var(--muted); transition: color 0.3s; }
.footer__bottom a:hover { color: var(--accent); }

.footer__logo {
  border-top: 1px solid var(--line);
  padding: clamp(36px, 6vw, 64px) 28px;
  display: flex; justify-content: center;
}
.footer__logo img {
  width: 100%; max-width: 460px; height: auto;
  opacity: 0.96;
}

/* ============================================================
   Reveal animations
   ============================================================ */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-words .word { display: inline-block; opacity: 0; transform: translateY(0.5em); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px) {
  .baseline { display: none !important; }
}
@media (max-width: 1024px) {
  .nav { display: none; }
  .burger { display: flex; }
  .about__grid,   .about__top { grid-template-columns: 1fr; gap: 24px; }
      .footer__top { grid-template-columns: 1fr; }
    }
@media (max-width: 768px) {
  .hero__top { grid-template-columns: 1fr; }
  .hero__socials { flex-direction: row; align-items: center; }
  .vtext { writing-mode: horizontal-tb; }
  .hero__socials-icons { flex-direction: row; }
  .hero__info { text-align: left; flex-direction: row; flex-wrap: wrap; gap: 30px; }
  .hero__lower { flex-direction: column; align-items: flex-start; }
  .hero__circle { display: none; }
  .hero__clients-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .works__grid { grid-template-columns: 1fr; }
  .wcard--wide { aspect-ratio: 16/12; }
  .works__note { grid-template-columns: 1fr; gap: clamp(20px, 3vw, 28px); }
  .about__features { grid-template-columns: 1fr; }
  .footer__links { grid-template-columns: 1fr; }
  .header__actions .btn--pill span { display: none; }
  .btn--pill { padding: 12px; }
}
@media (max-width: 520px) {
    .footer__bottom { flex-direction: column; align-items: flex-start; }
}