/* ==========================================
   MVS Production — Stylesheet (refonte 2026)
   ========================================== */

:root {
  --ink-950: #0a0a0a;
  --ink-900: #141414;
  --ink-800: #1c1c1c;
  --ink-200: #e5e5e5;
  --bone-50: #fafaf7;
  --bone-100: #f4f3ee;
  --bone-200: #e8e6df;
  --max-width: 1440px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========== RESET ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* clip (et non hidden) : bloque le débordement horizontal sans casser position: sticky */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--ink-950);
  color: var(--bone-50);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
::selection { background: var(--bone-50); color: var(--ink-950); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ink-950); }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }

/* ========== LAYOUT ========== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 768px) { .container { padding-inline: 2.5rem; } }
@media (min-width: 1280px) { .container { padding-inline: 3.5rem; } }

.section-light { background: var(--bone-50); color: var(--ink-950); }
.section-dark { background: var(--ink-950); color: var(--bone-50); }

/* ========== TYPOGRAPHY ========== */
.eyebrow {
  display: inline-block;
  font-size: 15.6px;
  font-weight: 600;
  letter-spacing: -0.1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.heading {
  font-weight: 400;
  font-size: clamp(2.25rem, 7vw, 56px);
  letter-spacing: -0.0607em;
  line-height: 1.05;
}
.heading i, .heading em { font-style: italic; font-weight: 400; }
.project-info {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.link-underline { position: relative; }
.link-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ========== PILLS ========== */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--ink-950);
  border-radius: 999px;
  color: var(--ink-950);
  transition: all 0.3s;
  white-space: nowrap;
}
.pill:hover { background: var(--ink-950); color: var(--bone-50); }
.section-dark .pill { border-color: rgba(255,255,255,0.3); color: var(--bone-50); }
.section-dark .pill:hover { background: var(--bone-50); color: var(--ink-950); border-color: var(--bone-50); }

/* ========== LOADER (logo rastérisé en pixels) ========== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
.loader.hide {
  transform: translateY(-101%);
  pointer-events: none;
}
.loader canvas { display: block; width: 100%; height: 100%; }
.loader__hud {
  position: absolute;
  inset: clamp(16px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  color: rgba(250, 250, 247, 0.34);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.loader__row { display: flex; justify-content: space-between; }
.loader__pct {
  color: rgba(250, 250, 247, 0.72);
  font-variant-numeric: tabular-nums;
}
.loader__bar {
  height: 1px;
  margin-bottom: 16px;
  background: rgba(250, 250, 247, 0.14);
  overflow: hidden;
}
.loader__bar-fill {
  height: 100%;
  background: var(--bone-50);
  transform: scaleX(0);
  transform-origin: left;
}

/* ========== HEADER ========== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  /* fond entièrement opaque : rien du contenu ne transparaît au défilement
     (pas de backdrop-filter non plus, inutile sur un fond plein et coûteux au scroll) */
  background: #0a0a0a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
@media (min-width: 768px) { .header__inner { height: 80px; } }
.header__logo img { height: 22px; width: auto; display: block; }
@media (min-width: 768px) { .header__logo img { height: 26px; } }
.header__nav {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 999px;
}
@media (min-width: 900px) { .header__nav { display: flex; } }
.header__nav a {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bone-50);
  border-radius: 999px;
  transition: background 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.header__nav a:hover { background: rgba(255, 255, 255, 0.08); }
.badge-new {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--bone-50);
  color: var(--ink-950);
  line-height: 1.4;
}
.header__cta {
  display: none;
  padding: 10px 20px;
  background: var(--bone-50);
  color: var(--ink-950);
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  transition: background 0.3s;
}
@media (min-width: 900px) { .header__cta { display: inline-block; } }
.header__cta:hover { background: var(--bone-200); }
.header__toggle { display: block; padding: 8px; margin-right: -8px; }
@media (min-width: 900px) { .header__toggle { display: none; } }
.header__toggle svg { width: 22px; height: 22px; }
.header__mobile {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: var(--ink-950);
}
.header__mobile.open { display: block; }
.header__mobile nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0 24px;
}
.header__mobile nav a { padding: 12px 0; font-size: 18px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }

/* ===== Menu déroulant Expertises (desktop) ===== */
.nav-exp { position: relative; display: flex; align-items: center; }
.nav-exp__trigger {
  font-family: inherit;
  padding: 8px 12px 8px 16px;
  font-size: 13px; font-weight: 500;
  color: var(--bone-50);
  background: none; border: none; cursor: pointer;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background 0.3s;
}
.nav-exp__trigger:hover { background: rgba(255, 255, 255, 0.08); }
.nav-exp__chev { width: 13px; height: 13px; transition: transform 0.3s var(--ease-out); }
.nav-exp:hover .nav-exp__chev,
.nav-exp.is-open .nav-exp__chev { transform: rotate(180deg); }
.nav-exp__menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  padding-top: 14px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s var(--ease-out), visibility 0.25s;
  z-index: 60;
}
.nav-exp:hover .nav-exp__menu,
.nav-exp:focus-within .nav-exp__menu,
.nav-exp.is-open .nav-exp__menu { opacity: 1; visibility: visible; }
.nav-exp__card {
  width: 340px;
  background: #101010;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  transform: translateY(8px);
  transition: transform 0.25s var(--ease-out);
}
.nav-exp:hover .nav-exp__card,
.nav-exp:focus-within .nav-exp__card,
.nav-exp.is-open .nav-exp__card { transform: translateY(0); }
.exp-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 10px;
  transition: background 0.2s;
}
.exp-item:hover { background: rgba(255, 255, 255, 0.06); }
.exp-item__t { font-size: 14px; font-weight: 600; color: var(--bone-50); }
.exp-item__d { font-size: 12px; color: rgba(255, 255, 255, 0.55); }

/* ===== Page Expertises (cartes) ===== */
.exp-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 48px;
}
@media (min-width: 640px) { .exp-page-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .exp-page-grid { grid-template-columns: repeat(3, 1fr); }
  .exp-page-card--center { grid-column: 2 / 3; }
}
.infra__text { margin-top: 32px; }
.infra__text p { font-size: 16px; line-height: 1.8; color: var(--ink-950); opacity: 0.8; margin-bottom: 20px; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
.infra__text p:last-child { margin-bottom: 0; }
@media (min-width: 900px) { .infra__text { column-count: 2; column-gap: 56px; } .infra__text p { break-inside: avoid; } }
.exp-page-card {
  display: block;
  padding: 32px 28px;
  border-radius: 16px;
  background: var(--ink-900);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.4s var(--ease-out), border-color 0.3s;
}
.exp-page-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.2); }
.exp-page-card__icon { display: block; color: var(--bone-50); opacity: 0.7; margin-bottom: 16px; }
.exp-page-card__icon svg { width: 28px; height: 28px; display: block; }
.exp-page-card__num { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; color: var(--bone-50); opacity: 0.4; }
.exp-page-card__title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-top: 18px; color: var(--bone-50); }
.exp-page-card__desc { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--bone-50); opacity: 0.6; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
.exp-page-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 22px; font-size: 13px; font-weight: 600; color: var(--bone-50);
}
.exp-page-card__link svg { transition: transform 0.3s var(--ease-out); }
.exp-page-card:hover .exp-page-card__link svg { transform: translate(3px, -3px); }

/* ===== Expertises dans le menu mobile ===== */
.m-exp__trigger {
  font-family: inherit;
  padding: 12px 0; font-size: 18px; font-weight: 500;
  color: var(--bone-50);
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.m-exp__trigger svg { width: 18px; height: 18px; transition: transform 0.3s; }
.m-exp__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-exp__list { display: none; flex-direction: column; padding-left: 16px; }
.m-exp__list.open { display: flex; }
.m-exp__list a { color: rgba(255, 255, 255, 0.7); font-size: 16px; }
.header__mobile .header__cta-mobile {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 20px;
  background: var(--bone-50);
  color: var(--ink-950);
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  width: fit-content;
}

/* ========== HERO (séquence cinématique) ========== */
/* le hero reste épinglé ; le site remonte par-dessus au scroll */
.hero {
  padding: 0;
  background: var(--ink-950);
  position: sticky;
  top: 0;
  z-index: 0;
}
.hero + section,
main > section:not(.hero),
.footer { position: relative; z-index: 1; }

/* ========== FOOTER RÉVÉLÉ PAR LE SCROLL ==========
   Miroir de l'effet du hero : le footer est fixé au bas de la fenêtre, le
   contenu passe par-dessus et le découvre en fin de page. La classe est posée
   par le JS, qui mesure la hauteur du footer et réserve la place correspondante
   — et qui renonce à l'effet si le footer est trop haut pour l'écran. */
body.footer-reveal .footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 0;
}
body.footer-reveal main { position: relative; z-index: 1; }
body.footer-reveal::after {
  content: '';
  display: block;
  height: var(--footer-h, 0px);
}

/* le hero s'éloigne pendant qu'il se fait recouvrir.
   On anime uniquement transform et opacity (pris en charge par le compositeur) :
   un filter: brightness() sur une vidéo plein écran fait chuter le nombre d'images. */
.hero__shade {
  position: absolute;
  inset: 0;
  background: var(--ink-950);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
/* Volontairement pas de transform: scale() sur .hero__inner : le conteneur a un
   overflow caché et embarque la vidéo, donc chaque nouvelle échelle force une
   re-rastérisation de toute la surface à chaque image de scroll. */
@keyframes mvs-hero-shade { to { opacity: 0.6; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__shade {
      animation: mvs-hero-shade linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100svh;
    }
  }
}
.hero .container { padding: 0; max-width: none; }
.hero__inner {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--ink-950);
}
.hero__bg-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
  pointer-events: none;
}
.hero__bg-video.playing { opacity: 1; }
.hero__bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__bg-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.15);
  border: 0;
  pointer-events: none;
}
.hero__still {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity 1.2s var(--ease-out);
}
.hero__still img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__still.fade { opacity: 0; pointer-events: none; }
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
.hero__overlay {
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(10,10,10,0.4), rgba(10,10,10,0.1) 40%, rgba(10,10,10,0.6));
}
.hero__content {
  position: absolute; inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.5s var(--ease-out), transform 1.5s var(--ease-out);
}
.hero__content.show { opacity: 1; transform: translateY(0); }
.hero__title { color: var(--bone-50); max-width: 880px; }
.hero__subtitle {
  margin-top: 16px;
  font-size: 14px;
  color: var(--bone-50);
  max-width: 380px;
}
@media (min-width: 768px) { .hero__subtitle { font-size: 16px; } }

/* ========== SERVICES INTRO ========== */
.services-intro { padding: 96px 0 72px; }
@media (min-width: 768px) { .services-intro { padding: 128px 0 96px; } }
.services-intro__text {
  max-width: 1024px;
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 40px;
  color: var(--ink-950);
}
.services-intro__pills { margin-top: 40px; }
.services-intro__sub { max-width: 860px; margin-top: 24px; font-size: 17px; line-height: 1.65; color: var(--ink-950); opacity: 0.68; }
.services-intro__cta { margin-top: 48px; }
.histoire { padding: 96px 0; }
@media (min-width: 768px) { .histoire { padding: 128px 0; } }
.histoire__title { color: var(--ink-950); }
.histoire__text { max-width: 780px; margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.histoire__text p { font-size: 17px; line-height: 1.7; color: var(--ink-950); opacity: 0.75; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
.services-intro__stats {
  margin-top: 72px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 768px) {
  .services-intro__stats { margin-top: 96px; grid-template-columns: repeat(3, 1fr); }
}
.stat__number {
  font-size: clamp(3.5rem, 7vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink-950);
}
.stat__label {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-950);
  max-width: 28ch;
}

/* ========== CRÉATEURS (marquee texte 2 lignes) ========== */
.creators { padding: 48px 0 64px; position: relative; }
@media (min-width: 768px) { .creators { padding: 64px 0 88px; } }
/* séparateur retiré : il tombait juste au-dessus du showreel */
.creators__label { margin-bottom: 32px; }
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee + .marquee { margin-top: 20px; }
.marquee__track {
  display: flex;
  gap: 16px;
  white-space: nowrap;
  align-items: center;
  width: max-content;
  animation: marquee-left 45s linear infinite;
  will-change: transform;
}
.marquee__track--reverse { animation: marquee-right 45s linear infinite; }
@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.creator-name {
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink-950);
  opacity: 0.85;
  transition: opacity 0.3s;
  flex-shrink: 0;
}
.creator-name:hover { opacity: 1; }
.creator-name.has-photo { cursor: pointer; }
.creator-name { position: relative; padding-bottom: 6px; }
.creator-name:hover { animation: name-wave 0.6s var(--ease-out); }
@keyframes name-wave {
  0% { transform: translateY(0); }
  30% { transform: translateY(-7px) rotate(-1.4deg); }
  55% { transform: translateY(3px) rotate(0.9deg); }
  80% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}
/* Soulignement ondulé qui défile (les "ondes") */
.creator-name::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='7' viewBox='0 0 24 7'%3E%3Cpath d='M0 3.5 Q6 0.5 12 3.5 T24 3.5' fill='none' stroke='%230a0a0a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size: 24px 7px;
  background-repeat: repeat-x;
  opacity: 0;
  transition: opacity 0.25s;
}
.creator-name:hover::after {
  opacity: 1;
  animation: wave-scroll 0.7s linear infinite;
}
@keyframes wave-scroll { to { background-position-x: 24px; } }
@media (prefers-reduced-motion: reduce) {
  .creator-name:hover { animation: none; }
  .creator-name:hover::after { animation: none; }
}
/* Pause du défilement au survol */
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ===== Bulles créateurs (photo + nom), la vague est conservée ===== */
.creator-chip {
  display: inline-flex; align-items: center; gap: 12px;
  flex-shrink: 0;
  padding: 7px 22px 7px 7px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--ink-200);
  box-shadow: 0 2px 10px rgba(10, 10, 10, 0.05);
}
.creator-chip__img {
  width: 54px; height: 54px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--ink-100);
}
.creator-chip__name {
  position: relative;
  font-size: 17px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-950);
  white-space: nowrap;
  transition: transform 0.25s var(--ease-out);
}
.creator-chip:hover .creator-chip__name { transform: translateY(-3px); }
.creator-chip__name::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -8px;
  height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='7' viewBox='0 0 24 7'%3E%3Cpath d='M0 3.5 Q6 0.5 12 3.5 T24 3.5' fill='none' stroke='%230a0a0a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size: 24px 7px;
  background-repeat: repeat-x;
  opacity: 0;
  transition: opacity 0.25s;
}
.creator-chip:hover .creator-chip__name::after { opacity: 1; animation: wave-scroll 0.7s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .creator-chip:hover .creator-chip__name::after { animation: none; }
}
/* Vignette photo flottante */
#creator-preview {
  position: fixed;
  top: 0; left: 0;
  width: 190px;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  pointer-events: none;
  z-index: 80;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  transition: opacity 0.25s var(--ease-out);
  box-shadow: 0 24px 48px rgba(10, 10, 10, 0.35);
  background: var(--ink-800);
}
#creator-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
#creator-preview.visible { opacity: 1; }
@media (hover: none) { #creator-preview { display: none; } }
.creator-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-950);
  opacity: 0.3;
  flex-shrink: 0;
}

/* ========== MARQUES (grille texte) ========== */
.brands { padding: 56px 0 64px; position: relative; }
@media (min-width: 768px) { .brands { padding: 72px 0 88px; } }
/* Filet de séparation entre Marques et Réalisations (deux sections claires) */
.brands::after {
  content: '';
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(1120px, 86%); height: 1px;
  background: linear-gradient(to right, transparent, var(--ink-200) 20%, var(--ink-200) 80%, transparent);
}
.brands__label { margin-bottom: 32px; }
.brands__intro { max-width: 780px; margin-bottom: 44px; font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink-950); }
.brands__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ink-200);
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  overflow: hidden;
}
@media (min-width: 640px) { .brands__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .brands__grid { grid-template-columns: repeat(4, 1fr); } }
.brand {
  background: var(--bone-50);
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-950);
  transition: background 0.3s;
  text-align: center;
}
@media (min-width: 768px) { .brand { min-height: 104px; font-size: 17px; } }
.brand:hover { background: var(--bone-100); }
.brand img {
  max-height: var(--bh, 40px);
  max-width: var(--bw, 68%);
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.55;
  transition: opacity 0.3s;
}
.brand:hover img { opacity: 1; }
/* Marques : bandeau défilant horizontal (réutilise le marquee des créateurs) */
.brands-marquee { margin-top: 4px; }
.brands-marquee .marquee + .marquee { margin-top: 14px; }
.brands-marquee .marquee__track { gap: 8px; }
.brands-marquee .brand {
  flex: 0 0 auto;
  width: auto;
  min-width: 150px;
  min-height: 0;
  height: 76px;
  padding: 0 20px;
  background: transparent;
}
.brands-marquee .brand:hover { background: transparent; }
@media (min-width: 768px) { .brand img { max-height: var(--bhd, 46px); } }
/* Les tailles de logos se règlent par marque depuis le dashboard
   (variables --bh, --bhd, --bw posées sur chaque cellule). */

/* ========== STUDIOS (500m² + cartes) ========== */
.studios { padding: 96px 0; }
@media (min-width: 768px) { .studios { padding: 128px 0; } }
.studios__title { max-width: 900px; margin-top: 40px; margin-bottom: 24px; }
.studios__lead {
  max-width: 560px;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 64px;
}
.studios__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
@media (min-width: 640px) { .studios__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .studios__cards { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.studio-card {
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink-900);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.5s var(--ease-out), border-color 0.3s;
}
.studio-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.18); }
.studio-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--ink-800), var(--ink-900));
  overflow: hidden;
}
.studio-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.studio-card:hover .studio-card__media img { transform: scale(1.04); }
.studio-card__body { padding: 24px; }
.studio-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.studio-card__name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.studio-card__size {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.6;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.studio-card__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--bone-50);
  opacity: 0.75;
}
.studios__cta { display: flex; justify-content: center; margin-top: 56px; }
.map-sep { width: min(1120px, 86%); height: 1px; margin: 40px auto 0; background: linear-gradient(to right, transparent, var(--ink-200) 20%, var(--ink-200) 80%, transparent); }

/* ========== SECTION IA ========== */
.ai { padding: 96px 0; position: relative; overflow: hidden; }
@media (min-width: 768px) { .ai { padding: 128px 0; } }
/* Curseur futuriste "IA" — comète lumineuse qui inverse les couleurs (section Production IA) */
.ia-trail-dot {
  position: fixed; left: 0; top: 0;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  z-index: 9999;
  will-change: transform;
}
.ai.ia-cursor-on, .ai.ia-cursor-on * { cursor: none; }
@media (hover: none), (pointer: coarse) { .ia-trail-dot { display: none; } }

/* Filet de séparation entre Nos Studios et Production IA (deux sections sombres) */
.ai::before {
  content: '';
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: min(1120px, 86%); height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.14) 20%, rgba(255, 255, 255, 0.14) 80%, transparent);
  z-index: 3;
}
.ai__inner { position: relative; }
.ai__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.ai__title { max-width: 820px; margin-bottom: 24px; }
.ai__text {
  max-width: 620px;
  font-size: 15px;
  line-height: 1.75;
  opacity: 0.85;
  margin-bottom: 20px;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.ai__list {
  max-width: 620px;
  font-size: 15px;
  line-height: 1.9;
  opacity: 0.85;
  margin-bottom: 36px;
  list-style: none;
}
.ai__list li { padding-left: 20px; position: relative; }
.ai__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  opacity: 0.5;
}
.ai__pills { margin-bottom: 40px; }
.ai__media { position: relative; display: flex; align-items: center; justify-content: center; }
.ai__media-video {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  pointer-events: none;
}
@media (min-width: 900px) {
  .ai__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; position: relative; }
  .ai__content { max-width: 620px; position: relative; z-index: 2; }
  .ai__media-video { width: 130%; }
}
/* Grand écran : l'animation remplit toute la hauteur de la section */
@media (min-width: 1150px) {
  .ai__media {
    position: absolute;
    top: -128px; bottom: -128px; left: 0; right: 0;
    margin: 0;
    display: block;
  }
  .ai__media-video {
    position: absolute;
    top: 50%; left: 76%;
    transform: translate(-50%, -50%);
    width: auto; height: 100%; max-width: none;
  }
}
@media (max-width: 899px) {
  .ai__media { margin-top: 24px; }
  .ai__media-video { max-width: 460px; }
}
.btn-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--bone-50);
  color: var(--ink-950);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.3s;
}
.btn-light:hover { background: var(--bone-200); }

/* ========== PROJETS ========== */
/* ========== PLAN DES STUDIOS — ouverture au scroll ==========
   Le cadre remplace ici l'apparition en fondu : les deux agissent sur transform,
   les cumuler ferait s'écraser l'un l'autre. Repli sur les navigateurs sans
   animations pilotées par le scroll : le plan s'affiche à sa taille normale. */
@keyframes mvs-map-grow {
  from { transform: scale(0.9); }
  to   { transform: scale(1); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .map-frame {
      animation: mvs-map-grow linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
      transform-origin: 50% 50%;
    }
  }
}

/* ========== SHOWREEL (Vimeo en mode fond, chargé à l'approche) ==========
   Le mode "background" de Vimeo supprime tout l'habillage — titre, avatar,
   contrôles, filigrane — et lance la lecture en boucle et en muet. Plus besoin
   de la compensation de hauteur qu'imposait YouTube. */
.showreel-section { padding: 24px 0 0; }
@media (min-width: 768px) { .showreel-section { padding: 40px 0 0; } }
.showreel {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink-950);
}
.showreel iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.showreel.is-playing iframe { opacity: 1; }

/* Le cadre s'ouvre à mesure qu'il entre dans l'écran.
   On anime uniquement transform : animer la largeur relancerait un calcul de
   mise en page à chaque image. */
@keyframes mvs-showreel-grow {
  from { transform: scale(0.88); }
  to   { transform: scale(1); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .showreel {
      animation: mvs-showreel-grow linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 38%;
      transform-origin: 50% 50%;
    }
  }
}

.projects { padding: 96px 0; }
@media (min-width: 768px) { .projects { padding: 128px 0; } }
.projects__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}
@media (min-width: 768px) {
  .projects__header { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 64px; }
}
.projects__title { color: var(--ink-950); max-width: 720px; margin-top: 24px; }
.projects__intro { color: var(--ink-950); max-width: 380px; font-size: 15px; }
.projects__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) { .projects__grid { grid-template-columns: repeat(12, 1fr); gap: 32px 32px; } }
.project-card { transition: transform 0.5s var(--ease-out); display: block; }
.project-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink-200);
}
.project-card__image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.project-card:hover .project-card__image img { transform: scale(1.03); }

/* Parallaxe : l'image glisse plus lentement que son cadre pendant le défilement.
   L'échelle passe par une variable pour que le survol reste possible — sinon
   l'animation, prioritaire sur transform, écraserait le zoom au survol.
   La base à 1.12 garantit qu'aucun bord n'apparaît sur un déplacement de ±5 %. */
@keyframes mvs-thumb-parallax {
  from { transform: translate3d(0, -5%, 0) scale(var(--thumb-zoom, 1.12)); }
  to   { transform: translate3d(0, 5%, 0)  scale(var(--thumb-zoom, 1.12)); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .projects-grid-dense .project-card__image img {
      animation: mvs-thumb-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .projects-grid-dense .project-card:hover .project-card__image img {
      --thumb-zoom: 1.17;
    }
  }
}
.project-card__info {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
/* titres en capitales : on annule le crénage négatif hérité de .project-info,
   illisible en majuscules, et on ouvre très légèrement l'espacement */
.project-card__title {
  color: var(--ink-950);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 600;
}
.project-card__place { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--ink-950); opacity: 0.55; }
.project-card__client { font-weight: 400; }
.project-card__year { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.project-card__badges {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.badge {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  color: var(--ink-950);
  opacity: 0.8;
}
@media (min-width: 768px) {
  .projects__grid > .project-card:nth-child(4n+1),
  .projects__grid > .project-card:nth-child(4n+4) { grid-column: span 7; }
  .projects__grid > .project-card:nth-child(4n+2),
  .projects__grid > .project-card:nth-child(4n+3) { grid-column: span 5; }
}
/* Grille dense — page "Nos Réalisations" uniquement : 3 colonnes, miniatures 16:9 */
.projects-grid-dense { transition: opacity 0.22s var(--ease-out); }
.projects-grid-dense.is-switching { opacity: 0; }
.projects-grid-dense {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 24px;
}
@media (min-width: 620px) { .projects-grid-dense { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .projects-grid-dense { grid-template-columns: repeat(3, 1fr); } }
.projects-grid-dense .project-card__image { aspect-ratio: 16 / 9; }
/* Filtres Réalisations (page projets) */
.proj-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.proj-filter {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--ink-200);
  background: transparent;
  font-family: inherit;
  font-size: 14px; font-weight: 500;
  color: var(--ink-950);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.proj-filter:hover { border-color: var(--ink-950); }
.proj-filter.is-on { background: var(--ink-950); color: var(--bone-50); border-color: var(--ink-950); }
.project-card.proj-hidden { display: none; }
.projects__cta { margin-top: 56px; display: flex; justify-content: center; }
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid var(--ink-950);
  border-radius: 999px;
  color: var(--ink-950);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s;
}
.btn-outline:hover { background: var(--ink-950); color: var(--bone-50); }
.btn-outline-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: var(--bone-50);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-outline-light:hover { background: var(--bone-50); color: var(--ink-950); }

/* ========== EXPERTISE (accordéon) ========== */
.services { padding: 96px 0; }
@media (min-width: 768px) { .services { padding: 128px 0; } }
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 48px;
}
@media (min-width: 768px) { .services__grid { grid-template-columns: 4fr 8fr; gap: 64px; } }
.services__brand-logo { height: 36px; width: auto; display: block; }
@media (min-width: 768px) { .services__brand-logo { height: 44px; } }
.services__lead-text {
  margin-top: 24px;
  font-size: 14px;
  color: var(--bone-50);
  max-width: 320px;
  line-height: 1.7;
}
.services__list { display: flex; flex-direction: column; }
.service-item { border-top: 1px solid rgba(255, 255, 255, 0.18); }
.service-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.service-item__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  text-align: left;
}
.service-item__title {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.service-item__icon {
  font-size: 22px;
  font-weight: 300;
  color: var(--bone-50);
  transition: transform 0.5s var(--ease-out);
}
.service-item.open .service-item__icon { transform: rotate(45deg); }
.service-item__content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s var(--ease-out), opacity 0.4s var(--ease-out);
}
.service-item.open .service-item__content { max-height: 600px; opacity: 1; }
.service-item__inner { padding-bottom: 32px; max-width: 680px; }
.service-item__desc {
  font-size: 14px;
  color: var(--bone-50);
  line-height: 1.7;
}
@media (min-width: 768px) { .service-item__desc { font-size: 16px; } }
.service-item__skills {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.service-item__skill {
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: var(--bone-50);
}

/* ========== ÉQUIPE ========== */
.team { padding: 96px 0; }
@media (min-width: 768px) { .team { padding: 128px 0; } }
.team__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}
@media (min-width: 768px) {
  .team__header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.team__title { max-width: 720px; margin-top: 24px; }
.team__intro { color: var(--bone-50); max-width: 380px; font-size: 15px; }
.team__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 768px) { .team__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .team__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.member { position: relative; }
.member__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ink-800), var(--ink-900));
}
.member__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.member__photo img.missing { display: none; }
.member { transition: transform 0.4s var(--ease-out); }
.member:hover { transform: translateY(-6px); }
.member:hover .member__photo img { transform: scale(1.06); }
.member__overlay { transition: opacity 0.4s var(--ease-out); }
.member:hover .member__overlay { opacity: 0.75; }
.member__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.85), rgba(10,10,10,0.1) 60%, transparent);
}
.member__info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 16px;
}
@media (min-width: 768px) { .member__info { padding: 20px; } }
.member__name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bone-50);
}
@media (min-width: 768px) { .member__name { font-size: 17px; } }
.member__role {
  margin-top: 4px;
  font-size: 11px;
  color: var(--bone-50);
  line-height: 1.4;
  opacity: 0.85;
}
@media (min-width: 768px) { .member__role { font-size: 12px; } }
@media (max-width: 480px) {
  .team__grid { gap: 8px; }
  .member__info { padding: 12px; }
  .member__name { font-size: 14px; }
  .member__role { font-size: 10px; }
}

/* ========== FAQ ========== */
.faq { padding: 96px 0; }
@media (min-width: 768px) { .faq { padding: 128px 0; } }
.faq__grid {
  padding-top: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 768px) {
  .faq__grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .faq__aside { position: sticky; top: 112px; }
}
.faq__title { color: var(--ink-950); margin-bottom: 40px; }
.faq__card {
  border-radius: 16px;
  border: 1px solid var(--ink-200);
  background: var(--bone-100);
  padding: 24px;
}
.faq__card-head { display: flex; align-items: center; gap: 16px; }
.faq__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ink-200);
  flex-shrink: 0;
}
.faq__avatar img { width: 100%; height: 100%; object-fit: cover; }
.faq__card-title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-950); }
.faq__card-sub { font-size: 12px; color: var(--ink-950); margin-top: 2px; }
.faq__cta {
  display: flex;
  width: 100%;
  margin-top: 20px;
  padding: 12px 20px;
  background: var(--ink-950);
  color: var(--bone-50);
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}
.faq__cta:hover { background: var(--ink-800); }
.faq__email-line { margin-top: 16px; text-align: center; }
.faq__email-prompt { font-size: 12px; color: var(--ink-950); margin-bottom: 4px; }
.faq__email { font-size: 14px; color: var(--ink-950); }
.faq__list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--ink-200); }
.faq-item:last-child { border-bottom: 1px solid var(--ink-200); }
.faq-item__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  text-align: left;
}
.faq-item__q {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-950);
}
@media (min-width: 768px) { .faq-item__q { font-size: 18px; } }
.faq-item__icon {
  font-size: 20px;
  font-weight: 300;
  color: var(--ink-950);
  transition: transform 0.5s var(--ease-out);
  flex-shrink: 0;
  margin-top: 2px;
}
.faq-item.open .faq-item__icon { transform: rotate(45deg); }
.faq-item__content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s var(--ease-out), opacity 0.4s var(--ease-out);
}
.faq-item.open .faq-item__content { max-height: 500px; opacity: 1; }
.faq-item__a {
  padding: 0 48px 20px 0;
  font-size: 15px;
  color: var(--ink-950);
  line-height: 1.7;
}

/* ========== FOOTER ========== */
.footer {
  background: var(--ink-950);
  color: var(--bone-50);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer__inner { padding: 64px 0; }
@media (max-width: 559px) { .footer__inner { padding: 56px 8px; } }
@media (min-width: 768px) { .footer__inner { padding: 80px 0; } }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 560px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .footer__brand { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
  .footer__brand { grid-column: span 1; }
}
.footer__logo { height: 26px; width: auto; margin-bottom: 20px; }
.footer__heading {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
@media (min-width: 768px) { .footer__heading { font-size: 28px; } }
.footer__social { display: flex; gap: 12px; margin-top: 22px; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--bone-50);
  transition: background 0.2s, border-color 0.2s;
}
.footer__social a:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.35); }
.footer__desc {
  margin-top: 12px;
  font-size: 14px;
  color: var(--bone-50);
  max-width: 320px;
}
.footer__col h4 { margin-bottom: 18px; }
.footer__col ul { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.footer__col li { font-size: 14px; }
.footer__col a { transition: opacity 0.3s; }
.footer__col a:hover { opacity: 0.7; }
.footer__wordmark {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
@media (min-width: 768px) { .footer__wordmark { margin-top: 80px; padding-top: 40px; } }
.footer__wordmark-text {
  font-weight: 900;
  font-size: clamp(1.5rem, 9.5vw, 9rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--bone-50);
  white-space: nowrap;
  user-select: none;
  display: block;
  text-align: left;
}
.footer__wordmark-text sup { font-size: 0.4em; vertical-align: super; }
.footer__bottom {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--bone-50);
}
@media (min-width: 768px) { .footer__bottom { flex-direction: row; } }

/* ========== UTILITIES ========== */
[data-fade-in] {
  opacity: 0;
  transform: translateY(20px);
  /* --fade-delay est posé par le JS pour créer la cascade, puis retiré */
  transition: opacity 0.9s var(--ease-out) var(--fade-delay, 0s),
              transform 0.9s var(--ease-out) var(--fade-delay, 0s);
}
[data-fade-in].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-fade-in] { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
}

/* ========== PAGES INTERNES ========== */
.page-banner {
  padding-top: 144px;
  padding-bottom: 64px;
  background: var(--bone-50);
  color: var(--ink-950);
}
@media (min-width: 768px) { .page-banner { padding-top: 160px; } }
.page-banner__title { max-width: 1024px; }
.page-banner__lead {
  margin-top: 24px;
  max-width: 640px;
  font-size: 16px;
  color: var(--ink-950);
}
.text-justify { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
@media (min-width: 768px) { .page-banner__lead { font-size: 18px; } }

/* Page IA */
.ia-hero {
  padding: 160px 0 80px;
  background: var(--ink-950);
  color: var(--bone-50);
}
/* Grille IA : rangée large (Gabin 16/9) + rangée portrait centrée (9/16) */
.ia-grid-wide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 700px) { .ia-grid-wide { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
.ia-grid-tall {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 24px;
  justify-items: center;
}
@media (min-width: 560px) { .ia-grid-tall { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ia-grid-tall { grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 28px; } }
.ia-grid-tall .ia-card { width: 100%; max-width: 300px; }
.ia-card--wide .ia-card__media { aspect-ratio: 16 / 9; }
.ia-card--tall .ia-card__media { aspect-ratio: 9 / 16; }
.ia-card {
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink-900);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.5s var(--ease-out), border-color 0.3s;
  display: block;
}
.ia-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.18); }
.ia-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(150deg, var(--ink-800), var(--ink-900));
  overflow: hidden;
}
.ia-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ia-card__body { padding: 20px; }
.ia-card__title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.ia-card__cat { margin-top: 6px; font-size: 12px; opacity: 0.6; }
.ia-card__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ia-card__video {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bone-50);
  color: var(--ink-950);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s, transform 0.2s;
}
.ia-card__video svg { width: 13px; height: 13px; }
.ia-card__video:hover { background: var(--bone-200); transform: translateY(-1px); }
.ia-grid { align-items: start; }

/* ========== FORMULAIRE CONTACT ========== */
.contact-form { display: flex; flex-direction: column; gap: 24px; }
.contact-form__row { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .contact-form__row { grid-template-columns: repeat(2, 1fr); } }
.field label { display: block; margin-bottom: 12px; color: var(--ink-950); }
.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-950);
  padding: 12px 0;
  font-size: 16px;
  color: var(--ink-950);
  outline: none;
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-950); opacity: 0.4; }
.field--chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 16px;
  border: 1px solid var(--ink-950);
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink-950);
  cursor: pointer;
  transition: all 0.3s;
  background: transparent;
}
.chip:hover, .chip.active { background: var(--ink-950); color: var(--bone-50); }
.btn-primary {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  background: var(--ink-950);
  color: var(--bone-50);
  border-radius: 999px;
  font-weight: 500;
  transition: background 0.3s;
}
.btn-primary:hover { background: var(--ink-800); }

/* ============================================
   PLACEHOLDERS — visuels en attente d'ajout
   Une icône discrète s'affiche dans chaque emplacement tant que
   l'image n'est pas déposée. Dès que la vraie photo charge, elle
   recouvre entièrement le placeholder (aucun effet une fois en place).
   ============================================ */
.studio-card__media,
.ia-card__media,
.member__photo,
.space__media {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.16'%20stroke-width='2'%3E%3Ccircle%20cx='32'%20cy='32'%20r='19'/%3E%3Cpath%20d='M27%2023l14%209-14%209z'%20fill='%23ffffff'%20fill-opacity='0.16'%20stroke='none'/%3E%3C/svg%3E"),
    linear-gradient(150deg, var(--ink-800), var(--ink-900));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 52px, cover;
}

/* Studios : blocs "espace" (galerie + texte + caractéristiques + tags) */
.spaces { display: flex; flex-direction: column; margin-top: 40px; }
.space { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 56px 0; }
.space:first-child { padding-top: 0; }
.space + .space { border-top: 1px solid rgba(255, 255, 255, 0.1); }
@media (min-width: 900px) {
  .space { grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 72px 0; }
  .space:nth-child(even) .space__media { order: 2; }
}
.space__content { min-width: 0; }
.space__media { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; min-width: 0; }
.space__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out); }
.space__media.has-gallery { cursor: pointer; }
.space__media.has-gallery:hover img { transform: scale(1.04); }
.space__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.space__title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; color: var(--bone-50); }
.space__size { font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); color: var(--bone-50); opacity: 0.8; transform: translateY(3px); }
.space__text { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.space__text p { font-size: 15px; line-height: 1.75; color: var(--bone-50); opacity: 0.72; }
.space__specs { margin-top: 22px; }
.space__specs-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--bone-50); opacity: 0.45; }
.space__specs-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 0; }
.space__specs-list li { font-size: 12px; padding: 5px 11px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 7px; color: var(--bone-50); opacity: 0.82; }
.space__tags-marquee { margin-top: 18px; max-width: 100%; }
.space__tags-marquee .marquee__track { animation-duration: 32s; gap: 0; }
.space__tag { flex: 0 0 auto; white-space: nowrap; font-size: 13px; color: var(--bone-50); opacity: 0.5; }
.space__tag::after { content: '·'; margin: 0 16px; opacity: 0.4; }

/* ============================================
   GALERIE STUDIOS — carte cliquable + lightbox
   ============================================ */
.studio-card.has-gallery,
.ia-card.has-gallery { cursor: pointer; }
.studio-card.has-gallery .studio-card__media img,
.ia-card.has-gallery .ia-card__media img {
  transition: transform 0.7s var(--ease-out), opacity 0.35s ease;
}
/* pastille "agrandir" au survol */
.studio-card.has-gallery .studio-card__media::after,
.ia-card.has-gallery .ia-card__media::after {
  content: "";
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(10,10,10,0.55)
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%203h6v6M9%2021H3v-6M21%203l-7%207M3%2021l7-7'/%3E%3C/svg%3E")
    center/17px no-repeat;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transform: scale(0.9);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  z-index: 2; pointer-events: none;
}
.studio-card.has-gallery:hover .studio-card__media::after,
.studio-card.has-gallery:focus-visible .studio-card__media::after,
.ia-card.has-gallery:hover .ia-card__media::after,
.ia-card.has-gallery:focus-visible .ia-card__media::after { opacity: 1; transform: scale(1); }
.studio-card.has-gallery:focus-visible,
.ia-card.has-gallery:focus-visible { outline: 2px solid var(--bone-50); outline-offset: 3px; }
/* compteur de photos */
.gallery-count {
  position: absolute; bottom: 12px; left: 12px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(10,10,10,0.55); color: var(--bone-50);
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  z-index: 2; pointer-events: none;
}

.lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,8,8,0.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox__stage {
  max-width: min(92vw, 1400px); max-height: 84vh;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__img {
  max-width: 100%; max-height: 84vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,0.55);
  opacity: 0; transform: scale(0.98);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.lightbox__img.is-in { opacity: 1; transform: scale(1); }
.lightbox__video {
  display: none;
  max-width: 100%; max-height: 84vh;
  width: auto; height: auto;
  border-radius: 10px; background: #000;
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
}
.lightbox.is-video .lightbox__img { display: none; }
.lightbox.is-video .lightbox__video { display: block; }
.lightbox.is-video .lightbox__nav,
.lightbox.is-video .lightbox__dots { display: none; }
.lightbox__close {
  position: absolute; top: 20px; right: 24px;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: #fff; border: none;
  font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.lightbox__close:hover { background: rgba(255,255,255,0.22); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: #fff; border: none;
  font-size: 30px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.lightbox__nav:hover { background: rgba(255,255,255,0.22); }
.lightbox__nav svg { width: 24px; height: 24px; display: block; }
.lightbox__close svg { width: 20px; height: 20px; display: block; }
.lightbox__prev { left: 20px; }
.lightbox__next { right: 20px; }
.lightbox__dots {
  position: absolute; bottom: 22px; left: 0; right: 0;
  display: flex; gap: 8px; justify-content: center;
}
.lightbox__dot {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.3); cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.lightbox__dot.active { background: #fff; transform: scale(1.3); }
@media (max-width: 640px) {
  .lightbox__nav, .lightbox__close { width: 42px; height: 42px; font-size: 24px; }
  .lightbox__prev { left: 8px; } .lightbox__next { right: 8px; }
  .lightbox__close { top: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__img,
  .studio-card.has-gallery .studio-card__media img,
  .ia-card.has-gallery .ia-card__media img { transition: none; }
}

/* ─────────────────────────────────────────────
   TEXTES JUSTIFIÉS — blocs de contenu du site
   (les micro-libellés, badges, rôles, catégories,
    compteurs et textes centrés restent alignés)
   ───────────────────────────────────────────── */
.brands__intro,
.projects__intro,
.studios__lead,
.services__lead-text,
.services-intro__text,
.team__intro,
.faq-item__a,
.service-item__desc,
.studio-card__desc,
.footer__desc,
.page-banner__lead,
.space__text p,
.ia-card__desc {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ─────────────────────────────────────────────
   TRANSITIONS ENTRE PAGES (View Transitions API)
   Navigateurs non compatibles : navigation classique.
   ───────────────────────────────────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: mvs-page-out 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: mvs-page-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes mvs-page-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes mvs-page-in {
  from { opacity: 0; transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ========== BOUTONS — libellé qui glisse au survol ==========
   Le libellé monte et sort du cadre pendant qu'une copie identique arrive par
   le bas. La copie est portée par un pseudo-élément : pas de texte en double
   dans le document, donc rien de gênant pour les lecteurs d'écran. */
.btn-label {
  position: relative;
  display: inline-block;
  overflow: hidden;
  /* la hauteur de ligne doit rester celle du bouton : plus courte, la boîte
     serait plus basse que la ligne et le texte remonterait dans le bouton */
  line-height: inherit;
  vertical-align: top;
}
.btn-label > span,
.btn-label::after {
  display: block;
  transition: transform 0.42s var(--ease-out);
}
.btn-label::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  transform: translateY(105%);
}
.has-slide:hover .btn-label > span,
.has-slide:focus-visible .btn-label > span { transform: translateY(-105%); }
.has-slide:hover .btn-label::after,
.has-slide:focus-visible .btn-label::after { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .btn-label > span, .btn-label::after { transition: none; }
  .has-slide:hover .btn-label > span { transform: none; }
  .has-slide:hover .btn-label::after { opacity: 0; }
}

/* ========== MODE VISEUR (easter egg) ==========
   Se déclenche en tapant "rec" au clavier, se ferme avec Échap.
   Une vignette sombre assure la lisibilité de l'habillage : sans elle, le blanc
   du HUD disparaîtrait sur les sections claires du site. */
.viewfinder {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.viewfinder.on { opacity: 1; visibility: visible; }
.viewfinder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(118% 100% at 50% 50%, transparent 38%, rgba(0, 0, 0, 0.5) 78%, rgba(0, 0, 0, 0.86));
}
.viewfinder__row {
  position: absolute;
  left: clamp(18px, 3vw, 40px);
  right: clamp(18px, 3vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.viewfinder__row--top { top: clamp(18px, 3vw, 36px); }
.viewfinder__row--bottom { bottom: clamp(18px, 3vw, 36px); }
.viewfinder__rec { display: inline-flex; align-items: center; gap: 9px; }
.viewfinder__rec i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 10px rgba(255, 59, 48, 0.9);
  animation: mvs-rec-blink 1.1s steps(1, end) infinite;
}
@keyframes mvs-rec-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.15; } }
.viewfinder__tc { font-variant-numeric: tabular-nums; letter-spacing: 0.1em; }
/* repères d'angle */
.viewfinder__c {
  position: absolute;
  width: clamp(22px, 3vw, 34px);
  height: clamp(22px, 3vw, 34px);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
}
.viewfinder__c--tl { top: clamp(46px, 6vw, 74px); left: clamp(18px, 3vw, 40px); border-right: 0; border-bottom: 0; }
.viewfinder__c--tr { top: clamp(46px, 6vw, 74px); right: clamp(18px, 3vw, 40px); border-left: 0; border-bottom: 0; }
.viewfinder__c--bl { bottom: clamp(46px, 6vw, 74px); left: clamp(18px, 3vw, 40px); border-right: 0; border-top: 0; }
.viewfinder__c--br { bottom: clamp(46px, 6vw, 74px); right: clamp(18px, 3vw, 40px); border-left: 0; border-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .viewfinder__rec i { animation: none; }
}

/* trame CRT + pixels du viseur */
.viewfinder__fx {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.26) 0 1px, transparent 1px 3px),
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.5px);
  background-size: auto, 4px 4px;
  opacity: 0.6;
}
/* bande de balayage lente, façon rafraîchissement capteur */
.viewfinder__scan {
  position: absolute;
  left: 0; right: 0;
  height: 26%;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.055), transparent);
  animation: mvs-vf-scan 7s linear infinite;
}
@keyframes mvs-vf-scan {
  from { transform: translateY(-30%); }
  to   { transform: translateY(400%); }
}

/* ── mouvement de caméra ──
   Le contenu suit la souris et se rapproche légèrement. Le déplacement porte
   uniquement sur main : une transformation sur body ferait perdre leur ancrage
   aux éléments fixes, qui défileraient avec la page. */
html.is-rec main {
  transform: translate3d(var(--cam-x, 0px), var(--cam-y, 0px), 0) scale(1.04);
  transform-origin: 50% 50%;
  will-change: transform;
}
/* le header et le footer ne suivent pas la caméra : en se déplaçant, ces barres
   fixes découvraient un liseré sur leur bord. Ils restent immobiles, comme
   l'habillage d'un vrai viseur. */
html.is-rec { cursor: crosshair; }

@media (prefers-reduced-motion: reduce) {
  .viewfinder__scan { animation: none; opacity: 0; }
  html.is-rec main { transform: none; }
}

/* ========== VODKA — réaction au clic ==========
   On anime l'image et non son cadre : le cadre porte le voile sombre et découpe
   la photo. En agrandissant le cadre, la photo débordait du voile et on voyait
   sa limite. L'échelle part de celle du survol, sinon le clic ferait un à-coup
   au moment où l'animation reprend la main sur transform. */
.member--bark { cursor: pointer; }
.member--bark:focus-visible { outline: 2px solid var(--bone-50); outline-offset: 4px; }
.member--bark .member__photo img { --bark-base: 1; }
.member--bark:hover .member__photo img { --bark-base: 1.06; }
.member--bark.is-barking .member__photo img {
  animation: mvs-bark 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mvs-bark {
  0%   { transform: scale(var(--bark-base, 1)) rotate(0deg); }
  20%  { transform: scale(calc(var(--bark-base, 1) * 1.07)) rotate(-1.5deg); }
  50%  { transform: scale(calc(var(--bark-base, 1) * 1.05)) rotate(1.2deg); }
  100% { transform: scale(var(--bark-base, 1)) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .member--bark.is-barking .member__photo img { animation: none; }
}

/* champ piège anti-robots : hors de l'écran, jamais vu ni tabulé par un humain */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ========== SÉLECTEUR DE LANGUE ========== */
.lang-switch {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
@media (min-width: 900px) { .lang-switch { display: inline-flex; } }
.lang-switch__link {
  color: var(--bone-50);
  opacity: 0.45;
  transition: opacity 0.25s;
}
.lang-switch__link:hover { opacity: 0.8; }
.lang-switch__link.is-active { opacity: 1; }
.lang-switch__sep { color: var(--bone-50); opacity: 0.25; }
.lang-switch--mobile { display: inline-flex; margin-top: 8px; font-size: 14px; }
@media (min-width: 900px) { .lang-switch--mobile { display: none; } }