/* =============================================================
   Chez Charlotte's — Boulangerie · Pâtisserie · Tea Room
   D.A. inspirée Cédric Grolet : éditorial luxe, ivoire/noir
   ============================================================= */

:root {
  --bg: #FBFAF7;          /* ivoire froid presque blanc — le papier d'un livre de pâtisserie */
  --bg-2: #F2EFE8;        /* nuance neutre légèrement chaude pour les sections alternées */
  --bg-3: #FFFFFF;        /* blanc pur pour les zones les plus claires */
  --cream: #F2EFE8;
  --ink: #0E0D0B;         /* noir chaud profond, type encre */
  --ink-2: #46423D;       /* gris encre pour secondaire */
  --muted: #8E867D;       /* taupe mat pour métadonnées */
  --line: rgba(14, 13, 11, 0.10);
  --line-soft: rgba(14, 13, 11, 0.05);
  --accent: #8A6A3B;      /* bronze sobre — éditorial, pas chaleureux */
  --accent-2: #A98654;
  --gold: #B89968;        /* or mat, ton couture */
  --rose: #C9A793;

  /* Typographie : Fraunces (serif éditorial à caractère, axes optique/SOFT/WONK)
     pour les titres + Hanken Grotesk (sans chaleureuse) pour le corps.
     Distinctif, premium, et 100% Google Fonts (aucun risque de licence). */
  --f-serif: "Fraunces", "Instrument Serif", Georgia, serif;
  --f-serif-i: "Fraunces", Georgia, serif;
  --f-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --f-condensed: "Hanken Grotesk", sans-serif;
  --f-script: "Fraunces", Georgia, serif;

  --max: 1480px;
  --pad: clamp(24px, 5vw, 100px);
  --nav-h: 80px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
  cursor: none;
  min-height: 100vh;
}

body.is-loading { overflow: hidden; height: 100vh; }
body.is-no-scroll { overflow: hidden; }

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

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

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  width: 100%;
}

/* =============================================================
   Preloader
   ============================================================= */
/* ===== Preloader : logo centré qui se colorie 0→100% puis bascule vers le haut ===== */
.preloader {
  transition:
    opacity   0.8s cubic-bezier(0.86, 0, 0.07, 1),
    transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
.preloader.is-done {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.preloader__logo--fill {
  --p: 100%;
  clip-path: inset(var(--p) 0 0 0);
  -webkit-clip-path: inset(var(--p) 0 0 0);
  transition: clip-path 60ms linear;
}
.preloader__logo--dim {
  animation: preloader-breathe 2.4s ease-in-out infinite;
}
@keyframes preloader-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

/* =============================================================
   Grain · Progress · Cursor
   ============================================================= */
.grain {
  position: fixed;
  inset: -120px;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.07;
  mix-blend-mode: multiply;
  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='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-drift 7s steps(6) infinite;
  will-change: transform;
}
@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-18px, 12px); }
  40%  { transform: translate(14px, -16px); }
  60%  { transform: translate(-10px, 18px); }
  80%  { transform: translate(16px, 8px); }
  100% { transform: translate(0, 0); }
}

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 9500;
  background: transparent;
  pointer-events: none;
}
.progress__bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.1s linear;
}

/* Custom cursor — "Comète dorée" : un point or précis + traînée de micro-points.
   Aucune masse, aucun couvrement d'éléments voisins. */
.cursor-trail, .cursor-tooltip {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
}
.cursor-trail i {
  position: fixed;
  top: 0; left: 0;
  display: block;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  will-change: transform;
  transition: background 0.3s var(--ease-out);
}
/* Curseur unique — pas de traînée */
.cursor-trail i {
  width: 9px; height: 9px;
  opacity: 1;
  z-index: 10000;
  background: var(--ink);
  box-shadow: 0 0 0 1.5px rgba(251, 246, 236, 0.65), 0 4px 10px rgba(31, 27, 23, 0.18);
}

/* État hover : le dot devient or vif + halo léger */
.cursor-trail.is-hover i {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(156, 107, 63, 0.18), 0 0 14px rgba(156, 107, 63, 0.4);
}
/* Sur média : le dot s'efface au profit du disque-révélateur */
.cursor-trail.is-reveal i { opacity: 0; }

/* Curseur-révélateur — disque "Voir" qui apparaît sur les grands visuels.
   Ne s'active QUE sur média (jamais sur nav/texte) → ne masque aucun lien voisin. */
.cursor-reveal {
  position: fixed;
  top: 0; left: 0;
  z-index: 9998;
  pointer-events: none;
  will-change: transform;
}
.cursor-reveal__inner {
  position: absolute;
  top: 0; left: 0;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s var(--ease-spring);
  box-shadow: 0 18px 40px -10px rgba(14, 13, 11, 0.45);
}
.cursor-reveal.is-on .cursor-reveal__inner { transform: translate(-50%, -50%) scale(1); }
.cursor-reveal__inner span {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
}
.cursor-reveal.is-on .cursor-reveal__inner span {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}

/* Tooltip indépendant, toujours décalé en bas-droite du curseur, jamais au-dessus */
.cursor-tooltip {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bg);
  white-space: nowrap;
  will-change: transform, opacity;
  opacity: 0;
  transition: opacity 0.22s var(--ease-out);
}
.cursor-tooltip span {
  display: inline-block;
  background: var(--ink);
  padding: 7px 12px;
  border-radius: 100px;
  transform: translate(14px, 14px);
  box-shadow: 0 8px 22px rgba(26, 20, 16, 0.28);
}
.cursor-tooltip.is-on { opacity: 1; }
.cursor-tooltip.is-on span { animation: cursor-pop 0.4s var(--ease-spring) both; }
@keyframes cursor-pop {
  0%   { transform: translate(14px, 14px) scale(0.7); opacity: 0; }
  100% { transform: translate(14px, 14px) scale(1);   opacity: 1; }
}

@media (hover: none), (max-width: 900px) {
  body { cursor: auto; }
  .cursor-trail, .cursor-tooltip, .cursor-reveal { display: none; }
}

/* =============================================================
   Voile de transition entre pages (wipe)
   ============================================================= */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 9700;
  background: var(--ink);
  transform: translateY(110%);
  transition: transform 0.62s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
  display: grid;
  place-items: center;
}
.page-veil__logo {
  width: 86px;
  height: auto;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out);
}
/* arme le voile en position couvrante sans animation (au load après navigation) */
.page-veil.is-armed {
  transform: translateY(0);
  transition: none;
}
.page-veil.is-armed .page-veil__logo { opacity: 1; transform: scale(1); }
/* couvre : monte depuis le bas */
.page-veil.is-cover {
  transform: translateY(0);
}
.page-veil.is-cover .page-veil__logo { opacity: 1; transform: scale(1); }
/* révèle : sort par le haut */
.page-veil.is-reveal {
  transform: translateY(-110%);
}

/* =============================================================
   Savoir-faire — scrollytelling Saint-Honoré (sticky, sans scroll-jacking)
   ============================================================= */
.craft {
  background: var(--ink);
  color: var(--bg);
  position: relative;
  overflow: clip;
}
.craft__head {
  text-align: center;
  padding: 130px var(--pad) 40px;
}
.craft__head .section__label { color: rgba(251, 250, 247, 0.5); justify-content: center; }
.craft__head .section__label-num,
.craft__head .section__label-line { color: var(--bg); background: var(--bg); }
.craft__head .section__label-line { opacity: 0.4; }
.craft__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin-top: 16px;
}
.craft__title em { font-style: italic; opacity: 0.7; }

.craft__scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) 120px;
}
.craft__visual {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.craft__stack {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 76vh;
  overflow: hidden;
}
.craft__shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.8s var(--ease-out), transform 1.2s var(--ease-out);
}
.craft__shot img { width: 100%; height: 100%; object-fit: cover; }
.craft__shot.is-active { opacity: 1; transform: scale(1); }

.craft__steps {
  display: flex;
  flex-direction: column;
}
.craft__step {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: clamp(32px, 6vw, 110px);
}
.craft__step-num {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.craft__step h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.craft__step h3 em { font-style: italic; opacity: 0.72; }
.craft__step p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(251, 250, 247, 0.66);
  max-width: 38ch;
}
.craft__step .craft__inline-img {
  display: none;
}

@media (max-width: 900px) {
  .craft__scene {
    grid-template-columns: 1fr;
    padding-bottom: 60px;
  }
  /* mobile : on abandonne le sticky → image + texte empilés par étape */
  .craft__visual { display: none; }
  .craft__step {
    min-height: 0;
    padding: 48px 0 8px;
  }
  .craft__step .craft__inline-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    margin-bottom: 28px;
  }
  .craft__step .craft__inline-img img { width: 100%; height: 100%; object-fit: cover; }
  .craft__head { padding-top: 90px; }
}

/* =============================================================
   Navigation
   ============================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  padding: 0 var(--pad);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.45s var(--ease-out), border-color 0.45s var(--ease-out), backdrop-filter 0.45s var(--ease-out);
}
/* Barre pleine largeur dépolie au scroll — aucun changement de taille (zéro reflow) */
.nav.is-scrolled {
  background: rgba(251, 250, 247, 0.82);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-bottom-color: var(--line);
}

.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 78px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav__mark {
  width: 56px; height: 56px;   /* taille constante : pas de redimensionnement au scroll (évite le reflow du bloc texte) */
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: transform 0.9s var(--ease-spring);
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(26, 20, 16, 0.16));
}
.nav__mark img,
.nav__mark svg { width: 100%; height: 100%; display: block; object-fit: contain; }
.nav__brand:hover .nav__mark { transform: scale(1.04); }

.nav__name {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
}
.nav__chez {
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 4px;
}
.nav__charlotte {
  font-family: var(--f-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.025em;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  line-height: 1;
  color: var(--ink);
}
.nav__tag {
  font-family: var(--f-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
@media (max-width: 720px) { .nav__tag { display: none; } }

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.nav__links a {
  position: relative;
  padding: 8px 14px;
  border-radius: 100px;
  overflow: hidden;
  transition: color 0.3s;
  z-index: 0;
}
.nav__links a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
  z-index: -1;
  border-radius: 100px;
}
.nav__links a:hover { color: var(--bg); }
.nav__links a:hover::before { transform: translateY(0); }

/* Sélecteur de langue FR / DE */
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 100px;
  flex-shrink: 0;
}
.nav__lang-btn {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 5px 9px;
  border-radius: 100px;
  color: var(--muted);
  line-height: 1;
  transition: color 0.25s, background 0.25s;
}
.nav__lang-btn:hover { color: var(--ink); }
.nav__lang-btn.is-active {
  background: var(--ink);
  color: var(--bg);
}
@media (max-width: 600px) {
  .nav__lang { margin-left: auto; }
  .nav__lang-btn { padding: 5px 8px; }
}

.nav__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 0 14px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 100px;
  font-family: var(--f-sans);
  font-weight: 500;
  letter-spacing: 0.01em;
  height: 46px;
  flex-shrink: 0;
  transition: background 0.3s var(--ease-out), transform 0.4s var(--ease-spring);
}
.nav__cta:hover { background: var(--accent); transform: translateY(-1px); }
.nav__cta-icon {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(232, 197, 152, 0.18);
  color: var(--gold);
  flex-shrink: 0;
}
.nav__cta-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-align: left;
}
.nav__cta-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.nav__cta-phone {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--bg);
  font-variant-numeric: tabular-nums;
}

.nav__burger {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.nav__burger span {
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out);
  transform-origin: center;
}
.nav__burger[aria-expanded="true"] span:first-child { transform: rotate(45deg) translate(5px, 5px); }
.nav__burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 1080px) {
  .nav__links { gap: 0; }
  .nav__links a { padding: 8px 10px; }
}

@media (max-width: 960px) {
  .nav__links {
    position: fixed;
    top: 0; right: 0;
    width: min(82vw, 380px);
    height: 100dvh;
    background: var(--bg-2);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 40px 40px;
    gap: 8px;
    font-size: 32px;
    font-family: var(--f-serif);
    font-weight: 300;
    transform: translateX(100%);
    transition: transform 0.6s var(--ease-out);
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__links a {
    padding: 8px 0;
    display: flex;
    align-items: baseline;
    gap: 16px;
    width: 100%;
  }
  .nav__links a::before { display: none; }
  .nav__links a:hover { color: var(--accent); }
  .nav__links a::after {
    content: attr(data-num);
    font-size: 12px;
    font-family: var(--f-sans);
    color: var(--muted);
    letter-spacing: 0.1em;
  }
  .nav__burger { display: flex; z-index: 950; position: relative; }
  .nav__cta { display: none; }
}

/* Réserver CTA inside the mobile menu drawer (desktop uses .nav__cta instead) */
.nav__menu-cta { display: none; }
@media (max-width: 960px) {
  .nav__menu-cta {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    align-self: stretch;
    width: auto !important;
    margin-top: 40px;
    padding: 17px 24px !important;
    background: var(--ink);
    color: var(--bg) !important;
    border-radius: 100px;
    font-family: var(--f-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: opacity 0.4s var(--ease-out);
  }
  .nav__menu-cta::after { display: none !important; }
  .nav__menu-cta:hover { color: var(--bg); }
  .nav__menu-cta:active { opacity: 0.82; }
  .nav__menu-cta .nav__menu-cta-num {
    font-family: var(--f-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.62);
  }
}
/* On a dark hero the drawer is still light, so keep the filled CTA legible */
.page-dark-hero .nav:not(.is-scrolled) .nav__links .nav__menu-cta { color: var(--bg) !important; }
.page-dark-hero .nav:not(.is-scrolled) .nav__links .nav__menu-cta .nav__menu-cta-num { color: rgba(255, 255, 255, 0.62); }

@media (max-width: 700px) {
  .nav { padding: 12px var(--pad); }
  .nav__inner { padding: 6px 8px 6px 10px; gap: 12px; min-height: 52px; }
  .nav__mark { width: 52px; height: 52px; }
  .nav__charlotte { font-size: 18px; }
  .nav__chez { font-size: 8px; letter-spacing: 0.28em; }
}

/* =============================================================
   Hero
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--nav-h) + 40px) var(--pad) 32px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 40px;
  overflow: hidden;
  isolation: isolate;
}
.hero__grid {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  position: relative;
  z-index: 2;
  min-width: 0;
}

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 9px 16px 9px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero__eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulseRing 2s ease-out infinite;
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(140, 101, 66, 0.55); }
  100% { box-shadow: 0 0 0 9px rgba(140, 101, 66, 0); }
}

.hero__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  font-size: clamp(56px, 9.6vw, 168px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  margin: 0;
  color: var(--ink);
}
.hero__line {
  display: block;
  overflow: hidden;
  /* marge basse pour les jambages pendant l'animation ; après, overflow:visible (cf. .reveal-done) */
  padding: 0.12em 0 0.32em;
  margin: -0.12em 0 -0.32em;
}
/* Une fois les mots montés, on libère le masque : plus aucun jambage rogné (g, p…) */
.hero__title.reveal-done .hero__line { overflow: visible; }
.hero__word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
}
.hero__line.is-in .hero__word {
  animation: wordRise 1.1s var(--ease-out) forwards;
}
.hero__line[data-line="1"].is-in .hero__word { animation-delay: 0.05s; }
.hero__line[data-line="2"].is-in .hero__word { animation-delay: 0.18s; }
.hero__line[data-line="3"].is-in .hero__word { animation-delay: 0.31s; }
@keyframes wordRise {
  to { transform: translateY(0); opacity: 1; }
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  color: var(--ink);    /* Cédric Grolet : pas de couleur dans le titre, seul l'italique fait l'accent */
}

.hero__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: end;
  max-width: 1100px;
}
.hero__desc {
  max-width: 460px;
}
.hero__desc p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}
.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Hero visual (right column) */
.hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  z-index: 1;
}

.hero__feature {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 40px 80px -28px rgba(43, 33, 24, 0.32);
  will-change: transform;
}
.hero__feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
  filter: saturate(0.95) contrast(1.04);
}
.hero__feature:hover img { transform: scale(1.05); }
.hero__feature-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--bg);
}
.hero__feature-overlay::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(31, 27, 23, 0.42), rgba(31, 27, 23, 0));
  pointer-events: none;
}
.hero__feature-tag {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 2;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 8px 14px;
  border: 1px solid rgba(251, 250, 247, 0.55);
  border-radius: 0;
  background: transparent;
  color: var(--bg);
}
.hero__feature-script {
  position: absolute;
  bottom: 22px;
  right: 26px;
  z-index: 2;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 30px;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  line-height: 0.9;
  color: var(--bg);
  letter-spacing: -0.02em;
}

.hero__chip {
  position: absolute;
  bottom: -28px;
  left: -32px;
  width: 140px;
  height: 180px;
  border-radius: 0;
  overflow: hidden;
  border: 10px solid var(--bg);
  box-shadow: 0 32px 60px -20px rgba(14, 13, 11, 0.30);
  transform: rotate(-2deg);
  z-index: 2;
  will-change: transform;
}
.hero__chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__seal {
  position: absolute;
  top: -32px;
  right: -32px;
  width: 130px;
  height: 130px;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 16px 30px rgba(43, 33, 24, 0.35));
}
.hero__seal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: spin 32s linear infinite;
}

@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1.2fr 1fr; gap: 50px; }
  .hero__chip { width: 100px; height: 130px; bottom: -22px; left: -24px; }
  .hero__seal { width: 90px; height: 90px; }
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: stretch;
  }
  .hero__visual { aspect-ratio: 4 / 5; max-height: 520px; max-width: 100%; }
  .hero__chip { width: 90px; height: 120px; }
  .hero__feature-script { font-size: 26px; }
  .hero__meta {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero__desc { max-width: 100%; }
}
@media (max-width: 700px) {
  .hero__title { font-size: clamp(48px, 14vw, 96px); }
  .hero__desc p { font-size: 16px; line-height: 1.55; }
  .hero__actions { width: 100%; gap: 10px; }
  .hero__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 18px;
    height: 52px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .hero__top { margin-bottom: 24px; }
  .hero__visual { aspect-ratio: 4 / 5; max-height: 460px; }
}

.hero__bottom {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 48px;
}
.hero__stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero__stats strong {
  font-family: var(--f-serif);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-feature-settings: "tnum";
  font-style: italic;
}
.hero__stats span {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  font-weight: 500;
}

.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.hero__scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--ink), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@media (max-width: 900px) {
  .hero__bottom { flex-direction: column; align-items: flex-start; gap: 28px; }
  .hero__stats { grid-template-columns: repeat(2, auto); gap: 28px 36px; }
  .hero__scroll { align-items: flex-start; }
}
@media (max-width: 500px) {
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================
   Buttons
   ============================================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
  height: 56px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid transparent;
  transition: background 0.4s var(--ease-out), color 0.4s, border-color 0.4s;
  white-space: nowrap;
}
.btn__label {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
  transition: transform 0.5s var(--ease-out);
}
.btn__label span {
  display: block;
  height: 16px;
  line-height: 16px;
}
.btn:hover .btn__label { transform: translateY(-16px); }

.btn__arrow {
  display: inline-flex;
  transition: transform 0.4s var(--ease-out);
}
.btn:hover .btn__arrow { transform: rotate(45deg) translate(1px, -1px); }

.btn--primary {
  background: var(--ink);
  color: var(--bg);
}
.btn--primary:hover { background: var(--accent); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--bg);
}

.btn--dark {
  background: var(--ink);
  color: var(--bg);
}
.btn--dark:hover { background: var(--accent); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  transition: gap 0.35s var(--ease-out);
  width: fit-content;
}
.link-arrow:hover { gap: 14px; }

.magnetic { will-change: transform; }

/* =============================================================
   Marquee
   ============================================================= */
.marquee-wrap {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.marquee {
  overflow: hidden;
  padding: 8px 0;
}
.marquee__track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  font-family: var(--f-serif);
  font-size: clamp(28px, 5vw, 64px);
  font-weight: 300;
  color: var(--ink);
  animation: marqueeScroll 38s linear infinite;
  padding-left: 48px;
  letter-spacing: -0.02em;
  align-items: center;
  width: max-content;
}
.marquee__track--reverse {
  animation: marqueeScrollR 30s linear infinite;
  font-size: clamp(18px, 2.8vw, 30px);
  font-family: var(--f-serif-i);
  font-style: italic;
  color: var(--accent);
}
.marquee__track .sep {
  color: var(--accent);
  font-size: 0.55em;
  display: inline-flex;
  align-items: center;
}
.marquee__track--reverse .sep {
  color: var(--ink);
  font-style: normal;
}
.marquee__track .italic { font-style: italic; }

@keyframes marqueeScroll {
  to { transform: translateX(-50%); }
}
@keyframes marqueeScrollR {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* La bande défile en continu — pas de pause au hover */

/* =============================================================
   Section base
   ============================================================= */
.section__head {
  margin-bottom: 100px;
  max-width: 1100px;
}
@media (max-width: 700px) {
  .section__head { margin-bottom: 56px; }
  .section__title { font-size: clamp(38px, 12vw, 80px); }
  .section__label { margin-bottom: 24px; gap: 10px; letter-spacing: 0.24em; }
  .section__label-line { width: 32px; }
}
.section__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section__head--center .section__label { justify-content: center; }
.section__head--center .section__sub { margin-left: auto; margin-right: auto; }

.section__label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 32px;
}
.section__label-num {
  font-family: var(--f-sans);
  font-size: 10px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.32em;
}
.section__label-line {
  width: 48px;
  height: 1px;
  background: var(--ink);
  opacity: 0.4;
}

.section__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  font-size: clamp(44px, 7vw, 120px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.section__title em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  color: var(--ink);
  opacity: 0.65;
}

.split-lines .split-line {
  display: block;
  overflow: hidden;
  padding: 0.28em 0;
  margin: -0.28em 0;
}
/* Une fois le reveal joué, on libère l'overflow pour ne plus rogner les italiques avec SOFT 100 */
.split-lines.is-in .split-line {
  overflow: visible;
}
.split-lines .split-line__inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-out);
  will-change: transform;
}
.split-lines.is-in .split-line__inner { transform: translateY(0); }
.split-lines.is-in .split-line:nth-child(2) .split-line__inner { transition-delay: 0.1s; }
.split-lines.is-in .split-line:nth-child(3) .split-line__inner { transition-delay: 0.2s; }

.section__sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 480px;
  margin-top: 24px;
}

/* =============================================================
   Histoire
   ============================================================= */
.story {
  padding: 180px 0 200px;
}
@media (max-width: 700px) {
  .story { padding: 100px 0 120px; }
  .story__grid { gap: 50px !important; }
  .story__lead { font-size: 22px !important; line-height: 1.3 !important; }
}
.story__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 100px;
  align-items: start;
}
.story__visual { position: relative; }
.story__sticky {
  position: sticky;
  top: 120px;
}
.story__image {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-2);
  border-radius: 0;
}
.story__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.story__visual:hover .story__image img { transform: scale(1.04); }

.story__caption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

.story__text > p { margin-bottom: 28px; }
.story__lead {
  font-family: var(--f-serif);
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 40px !important;
}
.story__text p:not(.story__lead) {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.75;
}

.story__signature {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.script-xl {
  font-family: var(--f-script);
  font-size: 80px;
  color: var(--accent);
  line-height: 1;
  font-weight: 600;
}
.story__role {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.reveal-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-words.is-in .word {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1000px) {
  .story__grid { grid-template-columns: 1fr; gap: 60px; }
  .story__sticky { position: static; }
}

/* =============================================================
   Métiers (3 alternating articles)
   ============================================================= */
.metiers {
  padding: 180px 0 160px;
  background: var(--bg-3);
}
@media (max-width: 700px) {
  .metiers { padding: 100px 0 80px; }
  .metier { padding: 40px 0; }
  .metier__title { font-size: clamp(32px, 9vw, 56px) !important; }
  .metier__num { font-size: clamp(72px, 22vw, 120px) !important; top: -8px !important; left: -12px !important; }
}

.metier {
  padding: 60px 0;
}
.metier__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}
.metier--reverse .metier__visual { order: 2; }
.metier--reverse .metier__text { order: 1; }

.metier__visual {
  position: relative;
  aspect-ratio: 4 / 5;
}
.metier__image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  background: var(--bg-2);
}
.metier__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.metier:hover .metier__image img { transform: scale(1.04); }

.metier__num {
  position: absolute;
  top: -20px;
  left: -30px;
  font-family: var(--f-serif);
  font-size: clamp(96px, 12vw, 200px);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  color: var(--ink);
  line-height: 0.85;
  letter-spacing: -0.05em;
  pointer-events: none;
  z-index: 2;
  font-style: italic;
  opacity: 0.16;     /* presque watermark, accent visuel discret */
}
.metier--reverse .metier__num {
  left: auto;
  right: -20px;
}

.metier__badge {
  position: absolute;
  top: -32px;
  right: -16px;
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  z-index: 3;
  pointer-events: none;
}
.metier__badge svg {
  width: 100%;
  height: 100%;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--ink);
  animation: spin 22s linear infinite;
}
.metier__badge-icon {
  position: absolute;
  font-size: 24px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.metier__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.metier__kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.metier__title {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.metier__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
.metier__text > p {
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.65;
  max-width: 460px;
}
.metier__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  margin: 8px 0;
}
.metier__list li {
  font-family: var(--f-serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  padding: 4px 0;
  position: relative;
  padding-left: 18px;
}
.metier__list li::before {
  content: "✺";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.metier__meta {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 1000px) {
  .metier__inner { grid-template-columns: 1fr; gap: 50px; }
  .metier--reverse .metier__inner { direction: ltr; }
  .metier__num { font-size: 90px; top: -8px; left: -10px; }
  .metier--reverse .metier__num { right: -10px; left: auto; }
  .metier__badge { width: 90px; height: 90px; top: -20px; right: -8px; }
  .metier__badge-icon { font-size: 20px; }
}
@media (max-width: 560px) {
  .metier__list { grid-template-columns: 1fr; }
}

/* =============================================================
   Créations · Horizontal scroll (NATIVE)
   ============================================================= */
.creations {
  background: var(--bg);
  /* PAS d'overflow:hidden ici sinon position: sticky échoue */
}
.creations__header {
  padding: 60px 0 30px;
  flex-shrink: 0;
}
.creations__header .section__title {
  margin-top: 12px;
}

/* Pin scroll : la section reste collée pendant que le track translate horizontalement */
.creations__pin {
  position: relative;
  /* Hauteur calibrée : ~ trackWidth - viewport pour un ratio scroll/translate proche de 1:1, mais snappy */
  height: 220vh;
}
.creations__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
}

.creations__track {
  display: flex;
  gap: 28px;
  padding: 0 var(--pad);
  width: max-content;
  will-change: transform;
  flex-shrink: 0;
}

.cx {
  flex: 0 0 auto;
  width: clamp(260px, 24vw, 360px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.5s var(--ease-out);
}

/* Mobile / touch : pas de scroll-jacking — fallback horizontal natif */
@media (hover: none), (max-width: 900px) {
  .creations { padding: 80px 0 40px; }
  .creations__pin {
    height: auto;
  }
  .creations__sticky {
    position: static;
    height: auto;
    display: block;
    overflow: visible;
  }
  .creations__header {
    padding: 0 0 32px !important;
  }
  /* Le track est ce qui scrolle horizontalement — pas le sticky */
  .creations__track {
    transform: none !important;
    padding: 8px var(--pad) 8px var(--pad);
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .creations__track::-webkit-scrollbar { display: none; }
  .cx {
    width: 78vw;
    scroll-snap-align: start;
  }
  .cx--feature { width: 80vw !important; }
}
.cx:hover { transform: translateY(-6px); }

.cx__media {
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 4 / 5;
  background: var(--cream);
  position: relative;
}
.cx__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter 0.6s;
  filter: saturate(0.94);
  pointer-events: none;
}
.cx:hover .cx__media img {
  transform: scale(1.06);
  filter: saturate(1.08);
}

.cx__body {
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cx__num {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--ink);
  text-transform: uppercase;
}
.cx__body h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
}
.cx__body h3 em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  opacity: 0.72;
}
.cx__body p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 340px;
}

/* Card feature : la première création est mise en avant en grand format */
.cx--feature {
  width: clamp(340px, 32vw, 480px);
}
.cx--feature .cx__media {
  aspect-ratio: 4 / 5;
}
.cx--feature .cx__body h3 {
  font-size: clamp(30px, 2.6vw, 40px);
}

.cx--end {
  width: clamp(260px, 22vw, 320px);
  display: flex;
  align-items: stretch;
}
.cx__end {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg-3);
  width: 100%;
  aspect-ratio: 4 / 5;
  justify-content: center;
}
.cx__end-num {
  font-family: var(--f-serif);
  font-size: 56px;
  color: var(--accent);
  line-height: 1;
  font-weight: 300;
}
.cx__end p {
  font-family: var(--f-serif);
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
}

.creations__progress {
  margin: 32px var(--pad) 0;
  position: relative;
  z-index: 2;
}
.creations__progress-bar {
  height: 2px;
  background: var(--line);
  border-radius: 0;
  overflow: hidden;
}
.creations__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.08s linear;
  border-radius: 0;
}

@media (max-width: 700px) {
  .cx { width: 76vw; }
  .cx--end { width: 64vw; }
}

/* =============================================================
   Événements
   ============================================================= */
.events {
  padding: 180px 0;
  background: var(--bg-2);
  color: var(--ink);
  overflow: hidden;
  position: relative;
}
@media (max-width: 700px) {
  .events { padding: 100px 0; }
  .events__grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .event__img { aspect-ratio: 4 / 5 !important; }
  .event h3 { font-size: 26px !important; }
}
.events::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 50%, transparent);
}

.events__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  perspective: 1200px;
}
.event {
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.6s var(--ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}
.event__img {
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 4 / 5;
}
.event__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.event:hover .event__img img { transform: scale(1.06); }

.event__body { display: flex; flex-direction: column; gap: 10px; }
.event h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  font-size: 30px;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
}
.event p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}
.event__meta {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .events__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* =============================================================
   Visite
   ============================================================= */
.visit {
  padding: 180px 0;
}
@media (max-width: 700px) {
  .visit { padding: 100px 0; }
  .visit__grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .visit__map { min-height: 320px; }
}
.visit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: stretch;
}

.visit__info { display: flex; flex-direction: column; }
.visit__info .section__title { margin-bottom: 56px; }

.visit__block {
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.visit__block:last-of-type { border-bottom: 1px solid var(--line); }
.visit__block--contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.visit__tag {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.visit__block p {
  font-family: var(--f-serif);
  font-size: 22px;
  line-height: 1.45;
  font-weight: 400;
}
.visit__block a {
  font-family: var(--f-serif);
  font-size: 18px;
  transition: color 0.3s;
  word-break: break-word;
  position: relative;
  display: inline-block;
  line-height: 1.3;
}
.visit__block a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}
.visit__block a:hover::after { transform: scaleX(1); transform-origin: left; }
.visit__block a:hover { color: var(--accent); }

.hours li {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 15px;
  gap: 20px;
}
.hours li span { color: var(--ink); }
.hours li em {
  font-style: normal;
  color: var(--muted);
  font-feature-settings: "tnum";
}

.visit__socials {
  display: flex;
  gap: 28px;
  margin-top: 44px;
  font-size: 14px;
}
.visit__socials a {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
  transition: color 0.3s;
}
.visit__socials a span { transition: transform 0.35s var(--ease-spring); display: inline-block; }
.visit__socials a:hover { color: var(--accent); }
.visit__socials a:hover span { transform: translate(3px, -3px); }

.visit__map {
  overflow: hidden;
  border-radius: 0;
  background: var(--bg-2);
  min-height: 540px;
  filter: grayscale(0.45) contrast(0.92) sepia(0.18);
  transition: filter 0.6s;
}
.visit__map:hover { filter: grayscale(0) contrast(1) sepia(0); }
/* Touch devices never fire :hover, so keep the map readable by default */
@media (hover: none) {
  .visit__map { filter: grayscale(0.12) contrast(0.98) sepia(0.05); }
}
.visit__map iframe {
  width: 100%;
  height: 100%;
  min-height: 540px;
  border: 0;
  display: block;
}
/* Sur la carte : on rétablit le curseur natif (le point custom se fige sur l'iframe) */
body.cursor-native,
body.cursor-native .visit__map,
body.cursor-native .visit__map * { cursor: auto !important; }

@media (max-width: 1000px) {
  .visit__grid { grid-template-columns: 1fr; gap: 50px; }
  .visit__map { min-height: 420px; }
  .visit__map iframe { min-height: 420px; }
}
@media (max-width: 540px) {
  .visit__block--contact { grid-template-columns: 1fr; }
}

/* =============================================================
   Footer
   ============================================================= */
.footer {
  padding: 80px 0 28px;
  background: var(--bg-2);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.footer__top {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer__chez {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 4px;
}
.footer__name {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  font-size: clamp(42px, 4.4vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.footer__sub {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 16px;
  font-weight: 500;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.footer__cols > div { display: flex; flex-direction: column; gap: 10px; }
.footer__cols h4 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.footer__cols a {
  font-size: 14px;
  color: var(--ink-2);
  transition: color 0.3s, transform 0.3s var(--ease-out);
  width: fit-content;
}
.footer__cols a:hover { color: var(--accent); transform: translateX(4px); }

.footer__sig {
  position: relative;
  text-align: center;
  padding: 70px 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer__script {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  font-size: clamp(54px, 11vw, 168px);
  line-height: 0.9;
  color: var(--ink);
  letter-spacing: -0.04em;
  opacity: 1;
  pointer-events: none;
  text-align: center;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: normal;
  white-space: normal;
}
@media (max-width: 720px) {
  .footer__script { font-size: clamp(40px, 13vw, 88px); }
}

.footer__bot {
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  flex-wrap: wrap;
}
.footer__credit {
  flex: 1 1 auto;
  text-align: center;
}
.footer__credit a {
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: color 0.3s, border-color 0.3s;
}
.footer__credit a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer__cols > div:last-child { grid-column: span 2; }
  .footer__bot { flex-direction: column; gap: 8px; }
  .footer__sig { padding: 50px 0 24px !important; }
}

/* =============================================================
   Reveals & masks
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

.mask-reveal {
  position: relative;
  overflow: hidden;
}
.mask-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 1s var(--ease-smooth);
  z-index: 2;
  pointer-events: none;
}
.mask-reveal.is-in::after {
  transform: scaleY(0);
  transform-origin: bottom;
}
.mask-reveal img {
  transform: scale(1.1);
  transition: transform 1.4s var(--ease-smooth);
  will-change: transform;
}
.mask-reveal.is-in img { transform: scale(1); }
.events .mask-reveal::after { background: var(--ink); }
.metiers .mask-reveal::after { background: var(--bg-3); }

@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;
  }
  .reveal, .split-lines, .mask-reveal,
  .hero__word, .hero__line, .reveal-words .word {
    opacity: 1 !important;
    transform: none !important;
  }
  .mask-reveal::after { display: none; }
  .marquee__track,
  .metier__badge svg,
  .hero__eyebrow .dot,
  .hero__scroll-line::after,
  .grain,
  .creations__hint-arrow { animation: none !important; }
  /* Scrollytelling : toutes les images visibles, pas de fondu piloté */
  .craft__shot { opacity: 1 !important; transform: none !important; }
  .craft__shot ~ .craft__shot { display: none; }  /* garde la 1ère image en sticky */
}

/* =============================================================
   Page /realisations.html — Galerie storytelling
   ============================================================= */

/* Le hero est plein cadre (passe SOUS la nav transparente) — pas de bande crème en haut */
.rea { padding-top: 0; }

/* ===== Nav lisible (texte clair) au-dessus d'un hero sombre, tant qu'on n'a pas scrollé ===== */
.page-dark-hero .nav:not(.is-scrolled) .nav__links a,
.page-dark-hero .nav:not(.is-scrolled) .nav__chez,
.page-dark-hero .nav:not(.is-scrolled) .nav__charlotte,
.page-dark-hero .nav:not(.is-scrolled) .nav__tag,
.page-dark-hero .nav:not(.is-scrolled) .nav__lang-btn {
  color: var(--bg);
}
.page-dark-hero .nav:not(.is-scrolled) .nav__links a:hover { color: var(--ink); }
.page-dark-hero .nav:not(.is-scrolled) .nav__burger span { background: var(--bg); }
.page-dark-hero .nav:not(.is-scrolled) .nav__lang { border-color: rgba(251, 250, 247, 0.45); }
.page-dark-hero .nav:not(.is-scrolled) .nav__lang-btn.is-active { background: var(--bg); color: var(--ink); }
.page-dark-hero .nav:not(.is-scrolled) .nav__links a.is-active::after { background: var(--bg); }
/* le logo garde un léger halo pour rester net sur l'image */
.page-dark-hero .nav:not(.is-scrolled) .nav__mark {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}
/* …mais une fois en mode mobile, le menu devient un panneau crème :
   les liens doivent rester sombres (la règle "nav claire" ci-dessus ne doit pas déteindre) */
@media (max-width: 960px) {
  .page-dark-hero .nav:not(.is-scrolled) .nav__links a { color: var(--ink); }
  .page-dark-hero .nav:not(.is-scrolled) .nav__links a:hover { color: var(--accent); }
}

/* HERO */
.rea-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.rea-hero__bg {
  position: absolute; inset: 0;
}
.rea-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(1.08);
  transform: scale(1.02);
  animation: rea-hero-zoom 22s ease-out forwards;
}
@keyframes rea-hero-zoom { to { transform: scale(1.10); } }
.rea-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,13,11,0.42) 0%, rgba(14,13,11,0.10) 28%, rgba(14,13,11,0.05) 55%, rgba(14,13,11,0.72) 100%);
  pointer-events: none;
}
.rea-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 100px var(--pad) 90px;
  color: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.rea-hero__label {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(251, 250, 247, 0.78);
}
.rea-hero__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  font-size: clamp(58px, 9.6vw, 168px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--bg);
  margin: 0;
}
.rea-hero__title em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  color: var(--bg);
  opacity: 0.92;
}
.rea-hero__title .line { display: block; }
.rea-hero__sub {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(251, 250, 247, 0.82);
  max-width: 580px;
}
.rea-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.75);
}
.rea-hero__line {
  display: inline-block;
  width: 56px;
  height: 1px;
  background: currentColor;
  position: relative;
  overflow: hidden;
}
.rea-hero__line::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--bg);
  transform: translateX(-100%);
  animation: rea-line-slide 2s ease-in-out infinite;
}
@keyframes rea-line-slide { 50% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* INTRO */
.rea-intro {
  padding: 140px 0 100px;
  background: var(--bg);
}
.rea-intro__grid {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
}
.rea-intro__num {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.rea-num {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.rea-cat {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.rea-intro__text { max-width: 720px; }
.rea-intro__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  font-size: clamp(36px, 5.2vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 36px;
}
.rea-intro__text p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 20px;
}
.rea-intro__text .btn { margin-top: 32px; }

/* CHAPTER */
.rea-chapter {
  padding: 110px 0 130px;
  background: var(--bg);
  position: relative;
}
.rea-chapter--alt { background: var(--bg-2); }
.rea-chapter--feature { padding: 0; background: var(--bg-2); }

.rea-chapter__head {
  max-width: 920px;
  margin: 0 auto 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.rea-chapter__head--inline {
  text-align: left;
  align-items: flex-start;
  margin: 0;
  padding-right: clamp(0px, 4vw, 60px);
}
.rea-chapter__head--center { text-align: center; align-items: center; }
.rea-chapter__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  font-size: clamp(42px, 6.4vw, 112px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0;
}
.rea-chapter__title em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  opacity: 0.65;
}
.rea-chapter__sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 640px;
}

/* GRIDS */
.rea-grid { display: grid; gap: 28px; margin-bottom: 28px; }
.rea-grid:last-child { margin-bottom: 0; }

.rea-grid--feature {
  grid-template-columns: 1.6fr 1fr;
  align-items: stretch;
}
.rea-grid--feature.rea-grid--reverse {
  grid-template-columns: 1fr 1.6fr;
}
.rea-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rea-grid--2 { grid-template-columns: 1fr 1fr; gap: 32px; }

.rea-fig {
  position: relative;
  overflow: hidden;
  margin: 0;
}
.rea-fig img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  transition: transform 1.6s var(--ease-out);
}
.rea-fig:hover img { transform: scale(1.025); }
.rea-fig--big img { aspect-ratio: 5 / 6; }
.rea-fig--portrait img { aspect-ratio: 3 / 4; }
.rea-fig figcaption {
  margin-top: 14px;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.rea-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px clamp(0px, 3vw, 40px);
  gap: 18px;
}
.rea-quote {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.rea-caption {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* Split block (1 big + 2 small) */
.rea-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.rea-split__cards {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.rea-split__cards .rea-fig { flex: 1; }

/* Feature chapter (Saint-Honoré) */
.rea-bigshot {
  width: 100%;
  height: clamp(420px, 60vh, 720px);
  overflow: hidden;
}
.rea-bigshot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 8s ease-out;
}
.rea-bigshot:hover img { transform: scale(1.03); }
.rea-feature__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  padding: 100px 0 130px;
  align-items: end;
}

/* VIDEO ATELIER */
.rea-video {
  padding: 130px 0 140px;
  background: var(--bg);
}
.rea-video__frame {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink);
}
.rea-video__frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Duo de vidéos sous l'atelier principal — process + résultat */
.rea-video__duo {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.rea-video__cell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rea-video__cell video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  background: var(--ink);
}
.rea-video__cell figcaption {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}
@media (max-width: 700px) {
  .rea-video__duo { grid-template-columns: 1fr; gap: 40px; margin-top: 36px; }
}

/* CTA */
.rea-cta {
  padding: 130px 0 160px;
  background: var(--bg-2);
  text-align: center;
}
.rea-cta__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  font-size: clamp(40px, 6.4vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0 0 26px;
}
.rea-cta__title em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  opacity: 0.65;
}
.rea-cta p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 580px;
  margin: 0 auto 40px;
}
.rea-cta__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Active nav link */
.nav__links a.is-active {
  color: var(--ink);
}
.nav__links a.is-active::after {
  content: "";
  position: absolute;
  bottom: 4px; left: 14px; right: 14px;
  height: 1px;
  background: var(--ink);
  opacity: 0.4;
}
/* Quand le lien actif est survolé, la pastille sombre remonte :
   le texte doit passer en clair (sinon noir-sur-noir illisible). */
.nav__links a.is-active:hover { color: var(--bg); }
.nav__links a.is-active:hover::after { opacity: 0; }

/* ----- RESPONSIVE ----- */
@media (max-width: 1100px) {
  .rea-grid--feature, .rea-grid--feature.rea-grid--reverse { grid-template-columns: 1fr; }
  .rea-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .rea-feature__grid { grid-template-columns: 1fr; padding: 60px 0 90px; }
  .rea-split { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .rea-hero { min-height: 88vh; }
  .rea-hero__inner { padding: 80px var(--pad) 60px; gap: 22px; }
  .rea-hero__title { font-size: clamp(48px, 13vw, 96px); }
  .rea-hero__sub { font-size: 15px; }

  .rea-intro { padding: 80px 0 60px; }
  .rea-intro__grid { grid-template-columns: 1fr; gap: 28px; }
  .rea-intro__num { position: static; flex-direction: row; gap: 14px; }
  .rea-intro__title { font-size: clamp(32px, 9vw, 56px); margin-bottom: 24px; }
  .rea-intro__text p { font-size: 16px; }

  .rea-chapter { padding: 80px 0 90px; }
  .rea-chapter__head { margin-bottom: 48px; gap: 14px; }
  .rea-chapter__title { font-size: clamp(38px, 11vw, 72px); }
  .rea-chapter__sub { font-size: 15px; }

  .rea-grid { gap: 18px; margin-bottom: 18px; }
  .rea-grid--3, .rea-grid--2 { grid-template-columns: 1fr; gap: 22px; }
  .rea-fig figcaption { font-size: 10px; letter-spacing: 0.2em; margin-top: 10px; }

  .rea-split { gap: 18px; }
  .rea-split__cards { gap: 18px; }

  .rea-bigshot { height: 52vh; min-height: 360px; }

  .rea-video { padding: 80px 0 90px; }
  .rea-video__frame { aspect-ratio: 9 / 14; }

  .rea-cta { padding: 80px 0 100px; }
  .rea-cta__title { font-size: clamp(36px, 11vw, 64px); }
  .rea-cta p { font-size: 15px; }
  .rea-cta__actions { flex-direction: column; align-items: stretch; }
  .rea-cta__actions .btn { width: 100%; justify-content: center; }

  .nav__links a.is-active::after { display: none; }
}

/* =============================================================
   Tea room privatisation callout (inside métier)
   ============================================================= */
.metier__callout {
  margin-top: 8px;
  padding: 24px 26px;
  background: var(--bg-2);
  border-left: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.metier__callout-eyebrow {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.metier__callout p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.metier__callout p strong {
  color: var(--ink);
  font-weight: 500;
}
.metier__callout-link {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin-top: 6px;
  border-bottom: 1px solid var(--ink);
  align-self: flex-start;
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s, transform 0.4s var(--ease-out);
}
.metier__callout-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateX(4px);
}
@media (max-width: 700px) {
  .metier__callout { padding: 20px 22px; }
  .metier__callout p { font-size: 14px; }
}

/* =============================================================
   Lunch / À midi
   ============================================================= */
.lunch {
  padding: 180px 0;
  background: var(--bg);
  position: relative;
}
.lunch::before {
  content: "";
  position: absolute;
  top: 0; left: var(--pad); right: var(--pad);
  height: 1px;
  background: var(--line);
}

.lunch__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 24px;
}
.lunch__card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lunch__media {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  aspect-ratio: 4 / 5;
}
.lunch__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out), filter 0.6s ease;
  /* Photos placeholder : un peu désaturées pour signaler qu'elles seront remplacées */
  filter: grayscale(0.18) brightness(0.95) contrast(0.97);
}
.lunch__card:hover .lunch__media img {
  transform: scale(1.03);
  filter: grayscale(0.08);
}
.lunch__placeholder {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bg);
  background: rgba(14, 13, 11, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 10px;
  z-index: 2;
}
.lunch__num {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.lunch__card h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 0;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 6px 0 0;
}
.lunch__card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}

.lunch__bottom {
  margin-top: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.lunch__pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-2);
}
.lunch__pill-icon {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  background: var(--bg-2);
  border-radius: 50%;
  font-size: 13px;
  color: var(--accent);
}

@media (max-width: 1100px) {
  .lunch__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 700px) {
  .lunch { padding: 100px 0; }
  .lunch__grid { grid-template-columns: 1fr; gap: 32px; margin-top: 12px; }
  .lunch__bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* Events grid 4 cards */
@media (min-width: 1101px) {
  .events__grid { grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; }
  .event h3 { font-size: 22px !important; }
}