/* ==========================================================================
   MESHING — Bureau de tournage
   Direction artistique : Éditorial cinéma · sobre · codes de tournage
   Oswald (display, uppercase) + Source Sans 3 (corps) + Fraunces italic (accents)
   Palette blanc/noir + accent cuivré #cf8b48 (chrome cinéma)
   ========================================================================== */

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Palette neutre — pas un pur noir/blanc, des teintes filmiques */
  --paper:        #f6f4ef;          /* off-white légèrement chaud, comme du papier d'impression */
  --paper-2:      #ecebe5;
  --ink:          #0d0c0a;          /* near-black avec une pointe chaude */
  --ink-2:        #1c1b18;
  --ink-3:        #2a2824;
  --rule:         #d8d4c8;          /* lignes éditoriales */
  --rule-soft:    #e4e0d4;
  --muted:        #5e5b54;
  --chrome:       #98948a;

  /* Accent cuivré (signature MESHING) */
  --copper:       #cf8b48;
  --copper-h:     #b87538;
  --copper-soft:  #e9c08d;
  --copper-dim:   rgba(207, 139, 72, .15);

  /* Typographies */
  --display:  'Oswald', 'Helvetica Neue', Helvetica, sans-serif;
  --body:     'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif-it: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Échelle typographique éditoriale — min ajustés pour le mobile */
  --fs-mega:   clamp(2.75rem, 11vw, 9rem);
  --fs-hero:   clamp(2.1rem, 8vw, 6rem);
  --fs-h2:     clamp(1.75rem, 5.5vw, 4.25rem);
  --fs-h3:     1.15rem;
  --fs-eyebrow: 0.7rem;
  --fs-meta:   0.78rem;
  --fs-body:   1rem;
  --fs-lead:   1.05rem;

  /* Mise en page */
  --container:  1280px;
  --gutter:     1.5rem;
  --header-h:   68px;

  /* Durées d'animation — lentes, confiantes */
  --t-fast:    180ms;
  --t-med:     420ms;
  --t-slow:    900ms;
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Reset / base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
  transition: color var(--t-fast) var(--ease-out),
              text-decoration-color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--copper); text-decoration-color: var(--copper); }
button { font: inherit; cursor: pointer; }
ul, ol { padding: 0; margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 0.5em;
}
em {
  font-family: var(--serif-it);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--copper);
}
p { margin: 0 0 1em; }
::selection { background: var(--ink); color: var(--paper); }

/* ─── Layout primitives ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--ink); color: var(--paper);
  padding: 8px 16px; z-index: 100;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; }

/* ─── Film grain global ──────────────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: .06;
  mix-blend-mode: multiply;
  /* SVG fractal noise inline */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ─── Page tag (fixed corner, marque MESHING) ─────────────────────── */
.page-tag {
  position: fixed;
  top: calc(var(--header-h) + 16px);
  right: 18px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background: rgba(13, 12, 10, .85);
  color: var(--paper);
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(8px);
  border-radius: 999px;
  border: 1px solid rgba(207, 139, 72, .25);
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.page-tag:hover {
  background: var(--ink);
  border-color: var(--copper);
  color: var(--paper);
}
.page-tag__dot {
  width: 6px; height: 6px;
  background: var(--copper);
  border-radius: 50%;
  animation: pulse 2.4s infinite;
}
.page-tag__arrow {
  color: var(--copper-soft);
  transition: transform var(--t-fast) var(--ease-out);
}
.page-tag:hover .page-tag__arrow {
  transform: translate(2px, -2px);
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.85); }
}
@media (max-width: 640px) { .page-tag { display: none; } }

/* ─── Boutons ────────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.btn::after {
  content: '→';
  font-family: var(--body);
  font-size: 1.1em;
  transition: transform var(--t-fast) var(--ease-out);
}
.btn:hover::after { transform: translateX(4px); }
.btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--copper);
  color: var(--paper);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.btn--ghost-light {
  color: var(--paper);
  border-color: rgba(246, 244, 239, .6);
}
.btn--ghost-light:hover,
.btn--ghost-light:focus-visible {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(246, 244, 239, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule-soft);
}
.site-header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
}
.site-header__brand {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.site-header__brand-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-size: 1.15rem;
  letter-spacing: 0.2em;
}
.site-header__logo {
  display: block;
  height: 24px;
  width: auto;
  object-fit: contain;
}
@media (min-width: 768px) {
  .site-header__logo { height: 30px; }
}
/* Mobile/tablette (nav cachée < 900px) : logo centré */
@media (max-width: 899px) {
  .site-header__inner { justify-content: center; }
}
.site-header__brand-sub {
  font-family: var(--serif-it);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--copper);
}
.site-header__nav {
  display: none;
  gap: 1.75rem;
  align-items: center;
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-header__nav a {
  text-decoration: none;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease-out);
}
.site-header__nav a:hover { color: var(--ink); }
.site-header__cta {
  position: relative;
  background: var(--ink);
  color: var(--paper) !important;
  padding: 0.55rem 1.1rem;
  letter-spacing: 0.14em;
  border-radius: 999px;
}
.site-header__cta:hover { background: var(--copper); color: var(--paper) !important; }
@media (min-width: 900px) { .site-header__nav { display: flex; } }

main { padding-top: 0; }

/* ─── Sections (rythme général) ──────────────────────────────────────────── */
.section {
  position: relative;
  padding: 3rem 0;
  border-top: 1px solid var(--rule-soft);
}
.section--alt { background: var(--paper-2); }
.section--narrow > .container { max-width: 880px; }
.section--centered { text-align: center; }
.section--dark {
  background: var(--ink);
  color: var(--paper);
  border-top: none;
}
.section--dark .section__eyebrow { color: var(--copper-soft); }

.section__number {
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.75rem, 9vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--rule);
  margin-bottom: 0.75rem;
  user-select: none;
}
.section--centered .section__number { display: inline-block; }
.section--dark .section__number { color: var(--ink-3); }

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 500;
  margin: 0 0 1rem;
}
.section__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--copper);
}
.section__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  margin: 0 0 1.25rem;
  max-width: 900px;
}
.section--centered .section__title { margin-inline: auto; }
.section__lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  max-width: 620px;
  line-height: 1.55;
}
.section--centered .section__lead { margin-inline: auto; }

/* Mobile : tout le contenu des sections centré (cohérence avec /04) */
@media (max-width: 767px) {
  .section .section__number { text-align: center; }
  /* eyebrow en inline-flex → passage en flex full-width pour centrer
     l'élément entier (trait + texte), pas seulement son contenu interne */
  .section .section__eyebrow { display: flex; justify-content: center; }
  .section .section__title { text-align: center; }
  .section .section__lead { text-align: center; margin-inline: auto; }

  /* Features : cards centrées */
  .feature { text-align: center; }
  .feature__num { display: flex; justify-content: center; }

  /* Contact : lead, blocs alt, réseaux, mention RGPD centrés */
  .contact-block__lead { text-align: center; margin-inline: auto; }
  .contact-block__alt { text-align: center; }
  .contact-block__alt-label { text-align: center; }
  .contact-block__socials { justify-content: center; }
  .contact-block__rgpd { text-align: center; }
}

@media (min-width: 768px) {
  .section { padding: 6rem 0; }
}
@media (min-width: 1024px) {
  .section { padding: 8rem 0; }
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 0;               /* mobile : la hauteur s'ajuste au contenu */
  display: flex;
  align-items: flex-start;     /* mobile : contenu collé en haut (pas centré) */
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  padding-top: var(--header-h);
}
@media (min-width: 768px) {
  .hero {
    min-height: 100vh;
    align-items: center;       /* desktop : centrage vertical */
  }
}
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%; /* mobile : ancre en bas → crop le plafond, garde la table */
  z-index: 0;
  opacity: 1;                /* photo nette */
  transform: scale(1.05);
  animation: heroZoom 12s var(--ease-out) forwards;
}
@media (min-width: 768px) {
  .hero__image {
    object-position: center;
  }
}
@keyframes heroZoom {
  to { transform: scale(1); }
}
/* Mobile : dégradé cinéma — sombre en haut (zone texte) qui s'éclaircit
   vers le bas où la photo (table, sol bois) reste belle et nette.
   + voile sombre global léger pour garder le texte lisible partout */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(13,12,10,.92) 0%,
      rgba(13,12,10,.88) 35%,
      rgba(13,12,10,.7) 60%,
      rgba(13,12,10,.55) 80%,
      rgba(13,12,10,.6) 100%),
    rgba(13,12,10,.25);
}
@media (min-width: 768px) {
  /* Desktop : voile asymétrique horizontal (sombre gauche, photo nette droite) */
  .hero__overlay {
    background:
      linear-gradient(90deg, rgba(13,12,10,.65) 0%, rgba(13,12,10,.25) 40%, transparent 70%);
  }
}
/* Flou progressif sur la gauche (zone texte) — désactivé sur mobile car
   la photo est déjà très atténuée par opacity 0.55 + overlay sombre */
.hero__bottom-fade {
  display: none;
}
@media (min-width: 768px) {
  .hero__bottom-fade {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    mask-image: linear-gradient(90deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 18%,
      rgba(0,0,0,0.6) 28%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(90deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 18%,
      rgba(0,0,0,0.6) 28%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,0) 100%);
  }
}
.hero__content {
  padding-top: 2.5rem;
  padding-bottom: 14rem;        /* mobile : laisse voir la photo (table) sous les boutons */
  position: relative;
  z-index: 3;
}
@media (min-width: 768px) {
  .hero__content { padding-top: 6rem; padding-bottom: 8rem; }
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 0 1.25rem;
}
.hero__eyebrow-line {
  display: inline-block;
  width: 56px; height: 1px;
  background: var(--copper);
}
.hero__title {
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0 0 1rem;
  color: var(--paper);
}
.hero__title span {
  display: block;
  overflow: hidden;
}
.hero__title-accent em {
  font-family: var(--serif-it);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  color: var(--copper-soft);
}
.hero__title-accent {
  /* Variante italique cinéma */
  font-family: var(--serif-it);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--copper-soft);
}
.hero__subtitle {
  font-size: var(--fs-lead);
  max-width: 600px;
  margin: 0 0 1.75rem;
  opacity: 0.92;
}
.hero__actions {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
}
@media (max-width: 480px) {
  .hero__actions { gap: 0.5rem; }
  .hero__actions .btn { padding: 0.7rem 1.25rem; font-size: 0.8rem; }
}

/* Hero slate — bandeau bas avec metadata cinéma */
.hero__slate {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(13, 12, 10, .85);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(207, 139, 72, .25);
  z-index: 4;
}
.hero__slate-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding: 0.85rem var(--gutter);
}
.hero__slate-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.4rem 0.7rem;
  border-left: 1px solid rgba(246, 244, 239, .12);
}
.hero__slate-item:nth-child(odd) { border-left: none; padding-left: 0; }
.hero__slate-label {
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chrome);
  font-weight: 400;
}
.hero__slate-value {
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--paper);
  line-height: 1.2;
}
.hero__slate-value--accent {
  color: var(--copper);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero__slate-dot {
  width: 7px; height: 7px;
  background: var(--copper);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@media (min-width: 768px) {
  .hero__slate-inner { grid-template-columns: repeat(3, 1fr); }
  .hero__slate-item { padding: 0.4rem 0.8rem; }
  .hero__slate-item:nth-child(odd) { border-left: 1px solid rgba(246, 244, 239, .12); padding-left: 0.8rem; }
  .hero__slate-item:first-child { border-left: none; padding-left: 0; }
  .hero__slate-label { font-size: 0.62rem; }
  .hero__slate-value { font-size: 0.95rem; }
}

/* ─── Marquee défilant ───────────────────────────────────────────────────── */
.marquee {
  background: var(--paper-2);
  color: var(--ink);
  overflow: hidden;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.marquee__track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  align-items: center;
  gap: 1.75rem;
}
.marquee__item {
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (min-width: 768px) {
  .marquee { padding: 1rem 0; }
  .marquee__track { gap: 2.5rem; }
  .marquee__item { font-size: 0.95rem; letter-spacing: 0.18em; }
}
.marquee__sep {
  color: var(--copper);
  font-size: 0.7rem;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

/* ─── Stats (dark, editorial massive numbers) ────────────────────────────── */
.stats {
  padding: 3.5rem 0;
}
.stats__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.stats__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.5rem;
  align-items: end;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ink-3);
}
.stats__number {
  grid-row: 1 / 2;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(3rem, 12vw, 8rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.stats__plus {
  color: var(--copper);
  margin-right: 0.05em;
}
.stats__unit {
  grid-row: 1 / 2;
  align-self: flex-start;
  margin-top: 0.8em;
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
}
.stats__label {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chrome);
  font-weight: 400;
}
@media (min-width: 640px) {
  .stats { padding: 5rem 0; }
  .stats__list { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; column-gap: 3rem; }
}
@media (min-width: 1024px) {
  .stats { padding: 6rem 0; }
  .stats__list { grid-template-columns: repeat(3, 1fr); column-gap: 3.5rem; }
}

/* ─── Features (cards modernes numérotées) ───────────────────────────────── */
.features {
  list-style: none;
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}
.feature {
  position: relative;
  padding: 1.1rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  transition: transform var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out);
}
.feature:hover {
  transform: translateY(-3px);
  border-color: var(--copper);
  box-shadow: 0 12px 32px rgba(13, 12, 10, .08);
}
.feature__num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--copper);
  margin-bottom: 0.5rem;
}
.feature__num::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--copper);
}
.feature__title {
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 0.3rem;
  line-height: 1.15;
}
.feature__text {
  color: var(--muted);
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
}
.feature__rule {
  display: none;
}
@media (min-width: 640px) {
  .features { gap: 1rem; }
  .feature { padding: 1.75rem 1.35rem; border-radius: 14px; }
  .feature__num { font-size: 0.78rem; gap: 8px; margin-bottom: 0.75rem; }
  .feature__num::after { width: 22px; }
  .feature__title { font-size: 1.2rem; margin-bottom: 0.4rem; }
  .feature__text { font-size: 0.85rem; line-height: 1.5; }
}
@media (min-width: 1024px) {
  .features { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .feature { padding: 2.25rem 1.9rem; border-radius: 16px; }
  .feature__num { font-size: 0.85rem; gap: 10px; margin-bottom: 1.25rem; }
  .feature__num::after { width: 28px; }
  .feature__title { font-size: 1.35rem; margin-bottom: 0.6rem; }
  .feature__text { font-size: 0.88rem; }
}

/* ─── Bento gallery (asymétrique) ────────────────────────────────────────── */
.bento {
  list-style: none;
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
.bento__item {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-radius: 12px;
  aspect-ratio: 3 / 4;
  cursor: zoom-in;
}
.bento__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out),
              filter var(--t-med) var(--ease-out);
  filter: grayscale(15%) contrast(1.05);
}
.bento__item:hover img {
  transform: scale(1.06);
  filter: grayscale(0%) contrast(1);
}
.bento__index {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(13, 12, 10, .65);
  padding: 3px 7px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
@media (min-width: 768px) {
  .bento__index {
    top: 14px; left: 14px;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    padding: 5px 10px;
  }
}
.bento__caption {
  position: absolute;
  left: 14px; bottom: 14px; right: 14px;
  z-index: 2;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out);
  background: linear-gradient(180deg, transparent, rgba(13,12,10,.75));
  margin: -14px;
  padding: 60px 14px 14px;
}
.bento__item:hover .bento__caption {
  opacity: 1;
  transform: translateY(0);
}

/* Layout bento asymétrique sur grands écrans (photos portrait) */
@media (min-width: 768px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(240px, auto);
    gap: 1.25rem;
  }
  /*  3 lignes de 6 colonnes (avec photos portrait) :
      [ 1 1 . 2 2 . 3 3 ]  large(rows×2) + portrait + portrait
      [ . . . 4 4 4 4 . ]  paysage moyen
      [ 5 5 5 . 6 6 6 . ]  paysage + portrait
   */
  .bento__item--1 { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .bento__item--2 { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .bento__item--3 { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .bento__item--4 { grid-column: span 3; grid-row: span 1; aspect-ratio: 16 / 9; }
  .bento__item--5 { grid-column: span 3; grid-row: span 2; aspect-ratio: auto; }
  .bento__item--6 { grid-column: span 3; grid-row: span 1; aspect-ratio: 16 / 9; }
}
@media (min-width: 1100px) {
  .bento { grid-auto-rows: minmax(280px, auto); }
}

/* ─── Localisation ───────────────────────────────────────────────────────── */
.location {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
}
/* Mobile : bloc texte centré */
@media (max-width: 767px) {
  .location__text { text-align: center; }
  .location__text .section__eyebrow { justify-content: center; }
  .location__metros-label { text-align: center; }
  .metros {
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    column-gap: 1.25rem;
  }
  .location__metros { display: inline-block; }
}
.location__address {
  margin-bottom: 0;
  line-height: 1.5;
}
.location__address strong {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.location__meta {
  font-family: var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.location__sep { margin: 0 0.5em; color: var(--copper); }
.location__note { color: var(--muted); margin-top: 1rem; margin-bottom: 0; }
.location__district {
  color: var(--muted);
  font-weight: 400;
}
@media (min-width: 768px) {
  .location { gap: 1.75rem; }
}

/* Bloc métros */
.location__metros {
  margin: 1.25rem 0 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.location__metros-label {
  font-family: var(--display);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 0.6rem;
}
.metros {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem 1rem;
}
.metro {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: var(--ink);
}
.metro__line {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.metro__station {
  font-family: var(--body);
  color: var(--ink);
}
@media (min-width: 768px) {
  .metros { gap: 0.5rem 1.5rem; }
  .metro { font-size: 0.95rem; gap: 0.7rem; }
  .metro__line { width: 28px; height: 28px; font-size: 0.95rem; }
}
.location__visual {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
@media (min-width: 768px) {
  .location__visual { aspect-ratio: 4 / 3; border-radius: 20px; }
}
.location__visual img,
.location__map {
  width: 100%; height: 100%; object-fit: cover;
  border: 0;
  display: block;
}
.location__map-link {
  display: block;
  width: 100%; height: 100%;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease-out);
}
.location__map-link:hover { opacity: 0.92; }
.location__visual-tag {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: rgba(13, 12, 10, .85);
  color: var(--paper);
  padding: 5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
@media (min-width: 900px) {
  .location { grid-template-columns: 1fr 1.1fr; gap: 4rem; }
}

/* ─── Section contact (sans formulaire — affichage email/tel/réseaux) ────── */
.contact-block {
  max-width: 920px;
}
.contact-block__lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  max-width: 640px;
  margin: 0 0 1.75rem;
}
.contact-block__main {
  margin: 1.75rem 0;
}
@media (min-width: 768px) {
  .contact-block__lead { margin-bottom: 3rem; }
  .contact-block__main { margin: 3rem 0; }
}

/* Bloc email — clic pour copier (plus de mailto) */
.contact-block__email {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  align-items: center;
  width: 100%;
  text-align: left;
  font: inherit;
  border: none;
  padding: 1.25rem 1.35rem;
  background: var(--ink-2);
  color: var(--paper);
  text-decoration: none;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(13, 12, 10, .08);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              background var(--t-med) var(--ease-out);
}
.contact-block__email::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--copper);
  transition: width var(--t-med) var(--ease-out);
}
.contact-block__email:hover {
  color: var(--paper);
  transform: translateY(-3px);
  background: var(--ink);
  box-shadow: 0 16px 40px rgba(13, 12, 10, .18);
}
.contact-block__email:hover::before { width: 8px; }
.contact-block__email-label {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  font-family: var(--display);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper-soft);
  margin-bottom: 0.2rem;
}
.contact-block__email-value {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  font-family: var(--display);
  font-size: clamp(1.05rem, 4.5vw, 2.4rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
.contact-block__email-hint {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: color var(--t-fast) var(--ease-out);
}
.contact-block__email-hint::before {
  content: '⧉';
  font-size: 1.1em;
}
.contact-block__email.is-copied { background: var(--ink); }
.contact-block__email.is-copied .contact-block__email-hint { color: var(--copper-soft); }
.contact-block__email.is-copied .contact-block__email-hint::before { content: ''; }
@media (min-width: 640px) {
  .contact-block__email { padding: 2rem 2.5rem; }
  .contact-block__email-hint { font-size: 0.7rem; }
}

/* Bloc alt : téléphone + réseaux */
.contact-block__alt {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.contact-block__alt-label {
  display: block;
  font-family: var(--display);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.4rem;
}
.contact-block__alt-value {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.2;
  transition: color var(--t-fast) var(--ease-out);
}
a.contact-block__alt-value:hover { color: var(--copper); }
.contact-block__alt-value--small {
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.35;
}
.contact-block__alt-meta {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--body);
  font-size: 0.85rem;
  color: var(--muted);
}

.contact-block__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.contact-block__social {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.7rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.contact-block__social:hover {
  border-color: var(--copper);
  color: var(--copper);
  transform: translateY(-1px);
}

.contact-block__rgpd {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
}

@media (min-width: 640px) {
  .contact-block__alt { grid-template-columns: auto 1fr; gap: 4rem; align-items: start; }
}

/* ─── Pages légales ─────────────────────────────────────────────────────── */
.legal h2 {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 2.5rem 0 0.75rem;
}
.legal ul {
  padding-left: 1.5rem;
  margin: 0 0 1em;
  list-style: square;
}
.legal__back {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: var(--chrome);
  padding: 3rem 0 1.5rem;
  margin-top: 0;
  border-top: 1px solid var(--copper);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.site-footer__col--brand { max-width: 420px; }
.site-footer__brand {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.site-footer__text {
  font-size: 0.9rem;
  max-width: 360px;
  opacity: 0.85;
  color: var(--chrome);
  margin: 0 0 1rem;
}

.site-footer__title {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 0.7rem;
}
.site-footer__title--mt { margin-top: 1.25rem; }
.site-footer ul {
  list-style: none;
  font-size: 0.9rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.site-footer a {
  color: var(--chrome);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.site-footer a:hover { color: var(--copper); }

.site-footer__social { gap: 0.5rem; }
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.3rem 0;
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chrome);
  transition: color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.site-footer__social a:hover {
  color: var(--copper);
  transform: translateX(2px);
}
.site-footer__social svg {
  flex-shrink: 0;
}

.site-footer__bottom {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  font-family: var(--display);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chrome);
  opacity: 0.75;
}
.site-footer__version { color: var(--copper); opacity: 0.8; }

@media (min-width: 768px) {
  .site-footer { padding: 5rem 0 2rem; }
  .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
  .site-footer__brand { font-size: 1.5rem; }
  .site-footer__text { font-size: 0.95rem; }
  .site-footer__bottom { margin-top: 3.5rem; padding-top: 1.5rem; font-size: 0.7rem; }
}

/* ─── Reveals (IntersectionObserver) ─────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Focus visible global ───────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ─── Motion safe ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__media img { animation: none; transform: none; }
  .marquee__track { animation: none; }
}