/* ==========================================================================
   LENSPIRE STUDIO — Feuille de style unique
   --------------------------------------------------------------------------
   Système : architecture éditoriale « galerie sombre » (canvas charbon,
   typo display surdimensionnée, CTA fantômes, accent unique en ponctuation,
   un seul panneau ivoire inversé) — remappée sur la marque Lenspire :
     · palette  ivoire / charbon / terracotta / doré
     · typo     Work Sans (capitales architecturales) + Fraunces (éditorial)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — charbon, du plus profond au plus élevé */
  --deep:       #1D1814;  /* sous les formes décoratives */
  --void:       #26201A;  /* canvas de la page : le sol */
  --charcoal:   #2B241E;  /* pied de page, sections inversées */
  --smoke:      #342C25;  /* blocs de contenu élevés */
  --graphite:   #433A31;  /* surface des cartes */

  /* Encres */
  --ivory:      #FBF7F1;  /* texte principal, filets, icônes */
  --ash:        #CFC4B6;  /* texte secondaire, libellés de nav */
  --pebble:     #A79885;  /* métadonnées tertiaires */
  --iron:       #5C5145;  /* filets et séparateurs sur fond sombre */
  --iron-light: #C9BDAC;  /* filets sur fond ivoire */

  /* Accents — rares, utilisés comme ponctuation */
  --terracotta: #FF6600;  /* orange du logo : accent du Studio */
  --logo-grey:  #585555;  /* gris du logo */
  --gold:       #C79A4B;  /* accent secondaire des Ateliers */
  --gold-soft:  #D9A25C;

  /* Familles */
  --f-sans:  'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  /* Échelle typographique — fluide, bornée sur les valeurs du système */
  --t-caption:    10px;
  --t-micro:      12px;
  --t-body:       15px;
  --t-read:       17px;
  --t-sub:        clamp(20px, 2.2vw, 24px);
  --t-h-sm:       clamp(26px, 3.4vw, 32px);
  --t-h:          clamp(32px, 4.4vw, 42px);
  --t-h-lg:       clamp(38px, 6.6vw, 64px);
  --t-display:    clamp(44px, 9vw,  80px);
  --t-display-xl: clamp(52px, 13vw, 160px);

  /* Interlignages serrés : la grande typo doit paraître architecturale */
  --lh-display: 0.90;
  --lh-head:    1.05;
  --lh-body:    1.55;

  /* Interlettrages — outil porteur, pas décoratif */
  --tr-caption:  0.30em;   /* micro-capitales pistées vers l'extérieur */
  --tr-micro:    0.14em;
  --tr-body:    -0.011em;
  --tr-head:    -0.038em;
  --tr-display: -0.052em;
  --tr-xl:      -0.062em;

  /* Graisses */
  --w-light: 300;
  --w-book:  400;
  --w-med:   500;
  --w-bold:  700;

  /* Espacements — base 8 */
  --s-8: 8px;   --s-16: 16px; --s-24: 24px; --s-32: 32px;
  --s-48: 48px; --s-56: 56px; --s-80: 80px;
  --s-112: 112px; --s-128: 128px; --s-184: 184px;

  /* Rythme de page */
  --gutter:  clamp(20px, 5vw, 64px);
  --section: clamp(56px, 9vw, 150px);

  /* Rayons — un murmure, pas une courbe */
  --r-sm: 3px;    /* nav, liens */
  --r-lg: 8px;    /* cartes, boutons */
  --r-xl: 14px;   /* grandes cartes */

  /* Élévation : un seul reflet blanc intérieur, aucune ombre portée */
  --inset: inset 0 2px 5px 0 rgba(251, 247, 241, 0.18);

  /* Courbes et durées */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.62, 0.05, 0.01, 0.99);
  --d-fast: 0.32s;
  --d-mid:  0.62s;
  --d-slow: 1.05s;

  /* Couleurs de contexte : redéfinies par les sections claires */
  --ink:     var(--ivory);
  --ink-dim: var(--ash);
  --rule:    var(--iron);
  --accent:  var(--terracotta);
}

/* Contexte « univers Ateliers » : l'accent bascule sur le doré */
.u-ateliers { --accent: var(--gold); }

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--iron) var(--void);
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  font-weight: var(--w-book);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

::selection { background: var(--terracotta); color: var(--ivory); }

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Grain de pellicule — texture éditoriale, au-dessus de tout, inerte */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE
   -------------------------------------------------------------------------- */

/* Capitales architecturales — le bloc */
.display,
.display-xl,
.h-lg, .h, .h-sm {
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  text-wrap: balance;
}

.display-xl { font-size: var(--t-display-xl); line-height: var(--lh-display); letter-spacing: var(--tr-xl); }
.display    { font-size: var(--t-display);    line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.h-lg       { font-size: var(--t-h-lg);       line-height: 1.00;              letter-spacing: var(--tr-display); }
.h          { font-size: var(--t-h);          line-height: var(--lh-head);    letter-spacing: var(--tr-head); }
.h-sm       { font-size: var(--t-h-sm);       line-height: var(--lh-head);    letter-spacing: var(--tr-head); }

/* Le chuchotement éditorial — Fraunces italique, en ligne avec les capitales */
.ed {
  font-family: var(--f-serif);
  font-weight: var(--w-light);
  font-style: italic;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 120;
  text-transform: none;
  letter-spacing: -0.02em;
}

/* La lettre sculpturale — Fraunces poussée à ses extrêmes */
.glyph {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 600;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  text-transform: none;
  letter-spacing: -0.03em;
  color: var(--accent);
}

/* Micro-capitales pistées — libellés, métadonnées, numéros de section */
.label {
  font-size: var(--t-caption);
  font-weight: var(--w-med);
  text-transform: uppercase;
  letter-spacing: var(--tr-caption);
  color: var(--ink-dim);
  line-height: 1.2;
}

.label--accent { color: var(--accent); }

.micro {
  font-size: var(--t-micro);
  font-weight: var(--w-book);
  text-transform: uppercase;
  letter-spacing: var(--tr-micro);
  color: var(--ink-dim);
}

.lead {
  font-family: var(--f-serif);
  font-size: var(--t-sub);
  font-weight: var(--w-light);
  font-style: italic;
  font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 90;
  line-height: 1.38;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.body  { font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-dim); }
.body--read { font-size: var(--t-read); }
.body strong { font-weight: var(--w-med); color: var(--ink); }

/* Point d'accent — la ponctuation du système */
.dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
.dot--lg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   4. MISE EN PAGE
   -------------------------------------------------------------------------- */
.shell { padding-inline: var(--gutter); }

.section {
  position: relative;
  padding-block: var(--section);
  /* Contient les formes décoratives qui débordent volontairement du cadre :
     sans cela, elles créent un défilement horizontal parasite. */
  overflow: hidden;
}

.section--flush { padding-block: 0; }

/* En-tête de section : numéro pisté + titre, en colonnes asymétriques */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-24);
  margin-bottom: clamp(40px, 6vw, 80px);
}

@media (min-width: 900px) {
  .sec-head { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-48); align-items: start; }
  .sec-head--wide { grid-template-columns: 200px minmax(0, 1fr) 320px; }
}

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--rule);
  opacity: 0.55;
}

/* Section claire — le seul échappatoire au charbon : on tourne la page */
.section--light {
  background: var(--ivory);
  --ink: var(--charcoal);
  --ink-dim: var(--logo-grey);
  --accent: #E05A00;
  --rule: var(--iron-light);
  color: var(--ink);
}

.section--cream {
  background: #F2E9DC;
  --ink: var(--charcoal);
  --ink-dim: var(--logo-grey);
  --accent: #E05A00;
  --rule: var(--iron-light);
  color: var(--ink);
}
.section--smoke { background: var(--smoke); }

/* --------------------------------------------------------------------------
   5. PRIMITIVES D'ANIMATION AU SCROLL
   -------------------------------------------------------------------------- */

/* La classe « is-in » se pose soit sur le bloc parent (cascade groupée),
   soit sur l'élément lui-même quand le bloc est plus haut que l'écran et
   que chaque élément est observé séparément. Les deux cas sont couverts. */

/* a. Révélation par masque : la ligne monte depuis sous son propre cadre */
.rv-mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
.rv-mask > span {
  display: block;
  transform: translateY(112%);
  transition: transform var(--d-slow) var(--ease);
  transition-delay: var(--rv-d, 0ms);
}
.is-in .rv-mask > span,
.rv-mask.is-in > span { transform: translateY(0); }

/* b. Montée en fondu — le cas général */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--d-mid) ease-out, transform var(--d-slow) var(--ease);
  transition-delay: var(--rv-d, 0ms);
}
.is-in .rv,
.rv.is-in { opacity: 1; transform: none; }

/* c. Filet qui se dessine.
   On masque par clip-path plutôt que par scaleX(0) : un élément réduit à une
   largeur nulle n'a plus de surface, et l'observateur d'intersection ne le
   verrait jamais entrer dans l'écran. */
.rv-rule {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--ease);
  transition-delay: var(--rv-d, 0ms);
}
.is-in .rv-rule,
.rv-rule.is-in { clip-path: inset(0 0 0 0); }

/* d. Média : le cadre s'ouvre, l'image se détend de 1.12 vers 1 */
.rv-media { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s var(--ease-io); transition-delay: var(--rv-d, 0ms); }
.is-in .rv-media,
.rv-media.is-in { clip-path: inset(0 0 0 0); }
.rv-media > * { transform: scale(1.12); transition: transform 1.6s var(--ease-io); transition-delay: var(--rv-d, 0ms); }
.is-in .rv-media > *,
.rv-media.is-in > * { transform: scale(1); }

/* --------------------------------------------------------------------------
   6. PRÉCHARGEUR
   -------------------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--deep);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--gutter);
  transition: transform 0.9s var(--ease-io) 0.15s;
}
.loader.is-done { transform: translateY(-101%); }
.loader__word { font-size: clamp(30px, 8vw, 78px); }
.loader__num  { font-variant-numeric: tabular-nums; font-size: var(--t-micro); }
.loader__bar {
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: 0;
  height: 1px;
  background: var(--iron);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}
.loader__bar::after { content: ''; position: absolute; inset: 0; background: var(--terracotta); }

/* --------------------------------------------------------------------------
   7. CURSEUR SUR MESURE — la goutte de terracotta
   -------------------------------------------------------------------------- */
.cursor,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 150;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
}
.cursor {
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--terracotta);
}
.cursor-ring {
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid var(--iron-light);
  display: grid;
  place-items: center;
  transition: width 0.42s var(--ease), height 0.42s var(--ease),
              margin 0.42s var(--ease), border-color 0.42s var(--ease),
              background-color 0.42s var(--ease), opacity 0.3s;
}
.cursor-ring__label {
  font-size: 9px;
  font-weight: var(--w-med);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ivory);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.3s, transform 0.42s var(--ease);
  white-space: nowrap;
}
/* État « actif » : l'anneau gonfle et s'annonce */
.is-hovering .cursor-ring {
  width: 86px; height: 86px;
  margin: -43px 0 0 -43px;
  border-color: transparent;
  background: var(--terracotta);
}
.is-hovering .cursor-ring__label { opacity: 1; transform: scale(1); }
.is-hovering .cursor { opacity: 0; }
.cursor.is-hidden, .cursor-ring.is-hidden { opacity: 0; }

/* Aucun curseur synthétique sur écran tactile */
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-ring { display: none; }
}

/* --------------------------------------------------------------------------
   8. PROGRESSION DE LECTURE
   -------------------------------------------------------------------------- */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 120;
  background: var(--terracotta);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   9. NAVIGATION — flotte sur le vide, aucun fond
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-24);
  padding: clamp(16px, 2.4vw, 28px) var(--gutter);
  background-image: linear-gradient(to bottom, rgba(23, 19, 15, 0) 0%, rgba(23, 19, 15, 0) 100%);
  transition: transform 0.55s var(--ease), color 0.5s ease, background-image 0.45s ease;
}
/* Sur le héros la barre flotte sur le vide. Dès qu'on quitte le premier
   écran, un voile dégradé la décolle du contenu qui passe dessous —
   sans jamais devenir une barre pleine. */
.nav.is-scrolled {
  background-image: linear-gradient(to bottom,
    rgba(23, 19, 15, 0.94) 0%,
    rgba(23, 19, 15, 0.78) 52%,
    rgba(23, 19, 15, 0) 100%);
}
.nav.is-light.is-scrolled {
  background-image: linear-gradient(to bottom,
    rgba(251, 247, 241, 0.96) 0%,
    rgba(251, 247, 241, 0.82) 52%,
    rgba(251, 247, 241, 0) 100%);
}
/* La barre se retire quand on descend, revient quand on remonte */
.nav.is-tucked { transform: translateY(-100%); }
/* Au contact du panneau ivoire, l'encre s'inverse */
.nav.is-light { --ink: var(--charcoal); --ink-dim: #6B6156; --rule: var(--iron-light); color: var(--charcoal); }

.nav__brand {
  font-family: var(--f-serif);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 60;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.nav__brand em { font-style: italic; color: var(--accent); }

/* Sélecteur d'univers — présent en permanence */
.switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
.switch__item {
  position: relative;
  padding: 7px 14px;
  font-size: var(--t-caption);
  font-weight: var(--w-med);
  text-transform: uppercase;
  letter-spacing: var(--tr-micro);
  color: var(--ink-dim);
  border-radius: 2px;
  transition: color var(--d-fast) ease, background-color var(--d-fast) ease;
}
.switch__item:hover { color: var(--ink); }
.switch__item.is-on { color: var(--ivory); background: var(--accent); }
.nav.is-light .switch__item.is-on { color: var(--ivory); }

.nav__links { display: none; }
@media (min-width: 1080px) {
  .nav__links { display: flex; align-items: center; gap: var(--s-32); }
}

/* Lien à enroulement : le texte roule, la graisse change — jamais la teinte.
   Le cadre est borné à une seule ligne, sinon les deux copies s'empilent. */
.lnk {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  font-size: var(--t-micro);
  line-height: 1.5;
  height: 1.5em;
}
.lnk__roll { display: block; transition: transform var(--d-mid) var(--ease); }
.lnk__roll > span {
  display: block;
  font-size: var(--t-micro);
  font-weight: var(--w-book);
  text-transform: uppercase;
  letter-spacing: var(--tr-micro);
  line-height: 1.5;
}
.lnk__roll > span + span { font-weight: var(--w-bold); }
.lnk:hover .lnk__roll { transform: translateY(-50%); }

/* CTA fantôme — aucun fond, aucune bordure, une flèche diagonale */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  font-size: var(--t-micro);
  font-weight: var(--w-med);
  text-transform: uppercase;
  letter-spacing: var(--tr-micro);
  color: var(--ink);
  position: relative;
}
.cta::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-mid) var(--ease);
}
.cta:hover::after { transform: scaleX(1); }
.cta__arrow {
  display: inline-block;
  transition: transform var(--d-mid) var(--ease);
}
.cta:hover .cta__arrow { transform: translate(4px, -4px); }
.cta--lg { font-size: var(--t-body); gap: 14px; padding-block: 16px; }

/* Le seul élément qui ressemble à un bouton — et c'est encore un fantôme */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  font-size: var(--t-caption);
  font-weight: var(--w-med);
  text-transform: uppercase;
  letter-spacing: var(--tr-micro);
  color: var(--ink);
  transition: border-color var(--d-mid) ease, box-shadow var(--d-mid) ease, transform var(--d-mid) var(--ease);
}
.btn-ghost:hover {
  border-color: var(--accent);
  box-shadow: var(--inset);
}
.btn-ghost .cta__arrow { transition: transform var(--d-mid) var(--ease); }
.btn-ghost:hover .cta__arrow { transform: translate(4px, -4px); }

/* Menu mobile */
.burger {
  display: grid;
  gap: 5px;
  padding: 10px 0 10px 10px;
  color: var(--ink);
}
@media (min-width: 1080px) { .burger { display: none; } }
.burger span {
  display: block;
  width: 26px; height: 1px;
  background: currentColor;
  transition: transform var(--d-fast) var(--ease), opacity var(--d-fast);
}
.is-menu .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.is-menu .burger span:nth-child(2) { opacity: 0; }
.is-menu .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--deep);
  padding: calc(var(--gutter) + 72px) var(--gutter) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-32);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.75s var(--ease-io);
  overflow-y: auto;
}
.is-menu .menu { clip-path: inset(0 0 0 0); }
.menu__list { display: grid; gap: 6px; }
.menu__item { overflow: hidden; }
.menu__item > a {
  display: block;
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: clamp(30px, 9vw, 58px);
  line-height: 1.1;
  letter-spacing: var(--tr-head);
  text-transform: uppercase;
  transform: translateY(105%);
  transition: transform 0.7s var(--ease);
  transition-delay: calc(60ms * var(--i, 0));
}
.is-menu .menu__item > a { transform: translateY(0); }
.menu__item > a:hover { color: var(--accent); }
.menu__foot { display: grid; gap: var(--s-8); }

/* --------------------------------------------------------------------------
   10. FORMES DÉCORATIVES DE FOND
   -------------------------------------------------------------------------- */
.decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  line-height: 0.8;
  color: var(--smoke);
  font-family: var(--f-serif);
  font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  font-size: clamp(280px, 46vw, 720px);
  will-change: transform;
}
.decor--tl { top: -8%; left: -6%; }
.decor--br { bottom: -14%; right: -8%; }
.decor--cross {
  font-family: var(--f-sans);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(200px, 32vw, 460px);
}

/* --------------------------------------------------------------------------
   11. HÉROS
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--gutter) + 96px) var(--gutter) var(--gutter);
  overflow: hidden;
}
.hero__top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-16);
  margin-bottom: auto;
  padding-bottom: var(--s-48);
}
.hero__title { position: relative; z-index: 1; }
.hero__title .ed { font-size: clamp(26px, 5.2vw, 46px); }
.hero__foot {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-24);
  margin-top: clamp(32px, 5vw, 64px);
}
@media (min-width: 900px) {
  .hero__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-48); }
}
.hero__blurb { max-width: 46ch; }

/* Invite au scroll */
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; }
.scroll-cue__line {
  display: block;
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--rule) 0%, var(--rule) 45%, transparent 45%);
  background-size: 100% 200%;
  animation: cue 2s var(--ease-io) infinite;
}
@keyframes cue { 0% { background-position: 0 -100%; } 100% { background-position: 0 100%; } }

/* --------------------------------------------------------------------------
   12. BANDEAU DÉFILANT
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: clamp(18px, 2.4vw, 30px);
  border-block: 1px solid var(--rule);
  background: var(--deep);
  user-select: none;
}
.marquee__track {
  display: flex;
  flex: 0 0 auto;
  gap: 0;
  animation: slide var(--mq-dur, 34s) linear infinite;
  animation-direction: var(--mq-dir, normal);
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-100%); } }
.marquee__item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding-inline: clamp(10px, 1.6vw, 22px);
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: clamp(22px, 3.4vw, 44px);
  letter-spacing: var(--tr-head);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ivory);
}
.marquee__item .dot { flex: 0 0 auto; }
/* Un mot sur deux en italique éditorial, pour respirer */
.marquee__item .ed { font-size: clamp(20px, 3vw, 40px); color: var(--ash); }

/* --------------------------------------------------------------------------
   13. MOMENT DE TRANSITION — « NOUS S(O)MMES »
   -------------------------------------------------------------------------- */
.statement {
  position: relative;
  text-align: center;
  overflow: hidden;
}
.statement__line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.02em;
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
}
/* La capitale géométrique et le glyphe calligraphique partagent la ligne de base */
.statement__glyph {
  font-size: calc(var(--t-display) * 1.5);
  line-height: 0.62;
  margin-inline: -0.02em;
}
.statement__body { max-width: 62ch; margin: var(--s-48) auto 0; }

/* --------------------------------------------------------------------------
   14. PORTAIL — LES DEUX UNIVERS
   -------------------------------------------------------------------------- */
.portal {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .portal { grid-template-columns: 1fr 1fr; }
  /* Le survol d'un univers étire son panneau et retire l'autre */
  .portal.is-hover-0 { grid-template-columns: 1.32fr 0.68fr; }
  .portal.is-hover-1 { grid-template-columns: 0.68fr 1.32fr; }
  .portal { transition: grid-template-columns 0.85s var(--ease); }
}

.gate {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-48);
  min-height: clamp(460px, 78vh, 760px);
  padding: clamp(28px, 4vw, 56px);
  background: var(--void);
  overflow: hidden;
  transition: opacity 0.7s ease, filter 0.7s ease;
}
.portal.is-hovering .gate:not(:hover) { opacity: 0.42; filter: saturate(0.35); }

/* Média de fond du panneau */
.gate__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.gate__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(175deg, rgba(38,32,26,0.45) 0%, rgba(38,32,26,0.80) 62%, var(--void) 100%);
}
.gate__bg > * {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.3s var(--ease-io);
}
.gate:hover .gate__bg > * { transform: scale(1.12); }

.gate__head, .gate__foot { position: relative; z-index: 1; }
.gate__num { display: block; margin-bottom: var(--s-16); }
.gate__title { display: flex; align-items: baseline; gap: 0.16em; flex-wrap: wrap; }
.gate__title .ed { font-size: clamp(20px, 2.4vw, 30px); }
.gate__list { display: grid; gap: 10px; margin-top: var(--s-32); }
.gate__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-micro);
  color: var(--ink-dim);
  transform: translateX(0);
  transition: transform var(--d-mid) var(--ease), color var(--d-mid) ease;
  transition-delay: calc(40ms * var(--i, 0));
}
.gate:hover .gate__list li { transform: translateX(10px); color: var(--ink); }
.gate__list li::before {
  content: '';
  flex: 0 0 auto;
  width: 14px; height: 1px;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   15. PANNEAU IVOIRE — LES ÉLÉMENTS COMMUNS
   -------------------------------------------------------------------------- */
.commons { display: grid; gap: var(--s-48); }
@media (min-width: 900px) {
  .commons { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-32); }
}
.commons__cell {
  display: grid;
  gap: 12px;
  align-content: start;
  padding-top: var(--s-24);
  border-top: 1px solid var(--rule);
}
.commons__n {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: 'SOFT' 80, 'WONK' 1, 'opsz' 90;
  font-size: clamp(38px, 4.6vw, 58px);
  line-height: 0.9;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   16. GRILLE DE RÉALISATIONS
   -------------------------------------------------------------------------- */
.work {
  display: grid;
  gap: var(--s-24);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.work--feature { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--void);
  overflow: hidden;
  transition: border-color var(--d-mid) ease, transform var(--d-mid) var(--ease), box-shadow var(--d-mid) ease;
  will-change: transform;
}
.card:hover { border-color: var(--accent); box-shadow: var(--inset); }

/* Carte de marque : le seul filet chromatique du système = « en vedette » */
.card--featured { border-color: var(--accent); }

.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(255,102,0,0.30) 0%, transparent 58%),
    radial-gradient(100% 80% at 82% 88%, rgba(199,154,75,0.20) 0%, transparent 62%),
    linear-gradient(158deg, var(--graphite) 0%, var(--smoke) 48%, var(--deep) 100%);
}
.card--wide .card__media { aspect-ratio: 16 / 10; }
/* La photo se place au-dessus de la lettre en filigrane ; si elle manque,
   le script la retire et la lettre reprend le cadre. */
.card__media > img,
.person__media > img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease-io), opacity 0.5s ease;
}
.card:hover .card__media > img { transform: scale(1.09); }

/* Lettre sculpturale en filigrane — visible quand aucune photo n'est posée */
.card__letter {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 600;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  font-size: clamp(120px, 16vw, 210px);
  line-height: 1;
  color: rgba(251, 247, 241, 0.10);
  transition: transform 1.1s var(--ease-io), color var(--d-mid) ease;
  pointer-events: none;
}
.card:hover .card__letter { transform: scale(1.08) rotate(-3deg); color: rgba(251, 247, 241, 0.16); }

/* Voile ivoire qui balaie le média au survol */
.card__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--ivory);
  mix-blend-mode: overlay;
  opacity: 0;
  transform: translateY(101%);
  transition: transform 0.72s var(--ease-io), opacity 0.72s ease;
  pointer-events: none;
}
.card:hover .card__veil { transform: translateY(0); opacity: 0.12; }

.card__body {
  display: grid;
  gap: 10px;
  padding: clamp(16px, 2vw, 24px);
}
.card__title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-16); }
.card__title h3 {
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-sub);
  line-height: 1.1;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  transition: transform var(--d-mid) var(--ease);
}
.card:hover .card__title h3 { transform: translateX(6px); }
.card__title .cta__arrow { color: var(--accent); }
.card:hover .card__title .cta__arrow { transform: translate(4px, -4px); }

/* --------------------------------------------------------------------------
   17. LISTE DE SERVICES — lignes qui s'ouvrent au survol
   -------------------------------------------------------------------------- */
.rows { border-top: 1px solid var(--rule); }
.row {
  position: relative;
  display: grid;
  gap: var(--s-8);
  padding-block: clamp(22px, 3vw, 38px);
  border-bottom: 1px solid var(--rule);
  transition: padding-inline var(--d-mid) var(--ease);
}
@media (min-width: 900px) {
  .row { grid-template-columns: 90px minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: var(--s-32); align-items: baseline; }
  .row:hover { padding-inline: 18px; }
}
/* Lavis qui monte derrière la ligne survolée */
.row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--smoke);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform var(--d-mid) var(--ease-io);
}
.row:hover::before { transform: scaleY(1); }
.row h3 {
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-h-sm);
  line-height: 1.08;
  letter-spacing: var(--tr-head);
  text-transform: uppercase;
}
.row__meta { display: flex; align-items: center; gap: 12px; }

/* --------------------------------------------------------------------------
   18. PACKS / FORMULES
   -------------------------------------------------------------------------- */
.packs {
  display: grid;
  gap: var(--s-24);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: stretch;
}
.pack {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  background: var(--void);
  transition: border-color var(--d-mid) ease, box-shadow var(--d-mid) ease, transform var(--d-mid) var(--ease);
}
.pack:hover { border-color: var(--accent); box-shadow: var(--inset); transform: translateY(-6px); }
.pack--featured { border-color: var(--accent); background: var(--smoke); }
.pack__head { display: grid; gap: var(--s-8); padding-bottom: var(--s-16); border-bottom: 1px solid var(--rule); }
.pack__name { font-family: var(--f-sans); font-weight: var(--w-bold); font-size: var(--t-sub); text-transform: uppercase; letter-spacing: -0.028em; }
.pack__price {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 90;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.pack__price sup { font-size: 0.42em; vertical-align: super; letter-spacing: 0; }
.pack__list { display: grid; gap: 10px; font-size: var(--t-body); color: var(--ink-dim); }
.pack__list li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; }
.pack__list li::before { content: '—'; color: var(--accent); }
.pack__foot { margin-top: auto; }

/* --------------------------------------------------------------------------
   19. ACCORDÉON — catalogue évolutif d'ateliers
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--rule); }
.acc__item { border-bottom: 1px solid var(--rule); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-24);
  padding-block: clamp(20px, 2.6vw, 30px);
  text-align: left;
  color: var(--ink);
  transition: padding-inline var(--d-mid) var(--ease), color var(--d-mid) ease;
}
.acc__btn:hover { padding-inline: 14px; }
.acc__btn > .label { flex: 0 0 auto; width: 44px; }
.acc__btn h3 {
  flex: 1 1 auto;
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-h-sm);
  line-height: 1.06;
  letter-spacing: var(--tr-head);
  text-transform: uppercase;
}
.acc__sign { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.acc__sign::before, .acc__sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--accent);
  transition: transform var(--d-mid) var(--ease);
}
.acc__sign::after { transform: rotate(90deg); }
.acc__item.is-open .acc__sign::after { transform: rotate(0deg); }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease-io);
}
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
/* min-height: 0 est indispensable. Sans lui, la taille minimale automatique
   d'un élément de grille vaut la hauteur de son contenu, et la rangée ne
   peut jamais redescendre à 0fr : le volet s'ouvre mais ne se referme pas. */
.acc__panel > div { overflow: hidden; min-height: 0; }
.acc__inner {
  display: grid;
  gap: var(--s-16);
  max-width: 68ch;
  padding-bottom: clamp(22px, 3vw, 34px);
}

/* --------------------------------------------------------------------------
   20. ÉQUIPE
   -------------------------------------------------------------------------- */
.team { display: grid; gap: var(--s-48); }
@media (min-width: 820px) { .team { grid-template-columns: 1fr 1fr; gap: var(--s-32); } }
.person { display: grid; gap: var(--s-24); }
.person__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(168deg, var(--graphite), var(--deep));
}
.person__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-io), filter var(--d-slow) ease; filter: grayscale(0.5); }
.person:hover .person__media > img { transform: scale(1.06); filter: grayscale(0); }
.person__media .card__letter { font-size: clamp(100px, 13vw, 170px); }

/* --------------------------------------------------------------------------
   21. FORMULAIRES
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-24); }
.form__grid { display: grid; gap: var(--s-24); }
@media (min-width: 720px) { .form__grid { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--s-8); }
.field--full { grid-column: 1 / -1; }
.field > label { font-size: var(--t-caption); font-weight: var(--w-med); text-transform: uppercase; letter-spacing: var(--tr-caption); color: var(--ink-dim); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  font-size: var(--t-read);
  color: var(--ink);
  transition: border-color var(--d-mid) ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--pebble); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--pebble); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--accent); }
.field select { appearance: none; cursor: pointer; }
.field--select { position: relative; }
.field--select::after {
  content: '↓';
  position: absolute;
  right: 4px; bottom: 14px;
  color: var(--accent);
  pointer-events: none;
}

/* Choix de paiement : carte ou carte-cadeau */
.pay { display: grid; gap: var(--s-16); }
@media (min-width: 620px) { .pay { grid-template-columns: 1fr 1fr; } }
.pay__opt {
  display: grid;
  gap: 10px;
  padding: var(--s-24);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--d-mid) ease, background-color var(--d-mid) ease, box-shadow var(--d-mid) ease;
}
.pay__opt:hover { border-color: var(--accent); }
.pay__opt input { position: absolute; opacity: 0; pointer-events: none; }
.pay__opt:has(input:checked) { border-color: var(--accent); background: var(--smoke); box-shadow: var(--inset); }
.pay__opt strong {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-micro);
}
.pay__opt strong::before {
  content: '';
  width: 9px; height: 9px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  transition: background-color var(--d-fast) ease;
}
.pay__opt:has(input:checked) strong::before { background: var(--accent); }

.form__note { font-size: var(--t-micro); color: var(--pebble); text-transform: none; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   22. CONTACT / CTA FINAL
   -------------------------------------------------------------------------- */
.final { position: relative; overflow: hidden; text-align: center; }
.final__title { position: relative; z-index: 1; }
.final__title .ed { font-size: clamp(24px, 4.6vw, 44px); }
.final__meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-24) var(--s-48);
  margin-top: clamp(36px, 5vw, 64px);
}
.meta-cell { display: grid; gap: 6px; text-align: left; }
.meta-cell a { transition: color var(--d-fast) ease; }
.meta-cell a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   23. PIED DE PAGE
   -------------------------------------------------------------------------- */
.footer {
  background: var(--charcoal);
  padding: var(--s-80) var(--gutter) var(--s-32);
  border-top: 1px solid var(--rule);
}
.footer__cols { display: grid; gap: var(--s-48); }
@media (min-width: 820px) {
  .footer__cols { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--s-32); }
}
.footer__col { display: grid; gap: 14px; align-content: start; }
.footer__col ul { display: grid; gap: 10px; }
.footer__col a { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--tr-micro); color: var(--ash); transition: color var(--d-fast) ease, transform var(--d-fast) var(--ease); display: inline-block; }
.footer__col a:hover { color: var(--ivory); transform: translateX(5px); }
.footer__word {
  margin-block: clamp(40px, 6vw, 72px) var(--s-24);
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  font-size: clamp(46px, 15.4vw, 260px);
  line-height: 0.82;
  letter-spacing: -0.07em;
  text-transform: uppercase;
  color: var(--smoke);
  text-align: center;
  user-select: none;
}
.footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-16);
  padding-top: var(--s-24);
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   24. DIVERS
   -------------------------------------------------------------------------- */
.split-head { display: grid; gap: var(--s-24); }
@media (min-width: 900px) { .split-head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--s-56); align-items: end; } }

.stack-24 { display: grid; gap: var(--s-24); }
.stack-16 { display: grid; gap: var(--s-16); }
.stack-48 { display: grid; gap: var(--s-48); }
.mw-60 { max-width: 60ch; }
.mw-46 { max-width: 46ch; }
.center { text-align: center; }
.inline-flex { display: inline-flex; align-items: center; gap: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 7px 13px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: var(--tr-micro);
  color: var(--ink-dim);
  transition: border-color var(--d-fast) ease, color var(--d-fast) ease;
}
.tag:hover { border-color: var(--accent); color: var(--ink); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: 12px 18px;
  background: var(--ivory);
  color: var(--void);
  border-radius: var(--r-sm);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-micro);
}
.skip:focus { left: var(--gutter); top: var(--gutter); }

/* --------------------------------------------------------------------------
   25. SANS JAVASCRIPT — tout est visible, aucun rideau
   Le retrait de la classe « no-js » se fait dans le <head><meta charset="utf-8">, avant le premier
   rendu : avec JS actif, aucune de ces règles ne s'applique jamais.
   -------------------------------------------------------------------------- */
.no-js .rv,
.no-js .rv-mask > span,
.no-js .rv-media,
.no-js .rv-media > *,
.no-js .rv-rule {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}
.no-js .loader { display: none; }
.no-js .decor { display: none; }
.no-js .menu { position: static; clip-path: none; padding-top: var(--gutter); }
.no-js .menu__item > a { transform: none; }
@media (min-width: 1080px) { .no-js .menu { display: none; } }

/* --------------------------------------------------------------------------
   26. MOUVEMENT RÉDUIT — on désactive tout le décor animé
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .rv, .rv-mask > span, .rv-media, .rv-media > *, .rv-rule {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .cursor, .cursor-ring { display: none; }
  .decor { display: none; }
  .marquee__track { animation: none; }
  .loader { display: none; }
}

/* ==========================================================================
   27. AJOUTS — refonte du 5 octobre 2026
   (bandeau photos/vidéos, hero partagé, galerie, configurateurs, FAQ, aperçu)
   ========================================================================== */

/* Pastille « Aperçu » — visible tant que PREVIEW = true dans data.js */
.preview-badge {
  position: fixed; left: 16px; bottom: 16px; z-index: 130;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(18,15,12,.92); border: 1px solid var(--accent);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ivory);
  pointer-events: none;
}
.preview-badge .dot { width: 8px; height: 8px; }

/* Bandeau défilant de photos et de vidéos */
.marquee--media { padding-block: 14px; background: var(--deep); }
.marquee--media .marquee__item { padding-inline: 7px; gap: 0; }
.tile {
  position: relative; display: block; flex: 0 0 auto;
  width: clamp(190px, 24vw, 320px); aspect-ratio: 4 / 3;
  border-radius: var(--r-lg); overflow: hidden; background: var(--smoke);
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile__ph {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background:
    radial-gradient(120% 90% at 20% 10%, hsla(var(--h), 55%, 48%, .55) 0%, transparent 60%),
    linear-gradient(160deg, var(--graphite), var(--deep));
  font-family: var(--f-serif); font-style: italic; font-size: clamp(20px, 2.4vw, 30px); color: rgba(251,247,241,.82);
  text-transform: none; letter-spacing: -.02em; padding: 12px; white-space: normal; line-height: 1.1;
}
.tile__ex {
  position: absolute; top: 8px; left: 8px; z-index: 2; font-style: normal;
  padding: 3px 8px; border-radius: 999px; background: rgba(18,15,12,.8);
  font-family: var(--f-sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ash);
}
.tile__ex--inline { position: static; margin-left: 8px; vertical-align: middle; }
.tile__play {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(18,15,12,.75); color: var(--ivory); font-size: 12px;
}

/* Héros partagé de l'accueil : Studio | Ateliers */
.hero-split { position: relative; min-height: 100svh; display: grid; background: var(--rule); gap: 1px; }
@media (min-width: 900px) { .hero-split { grid-template-columns: 1fr 1fr; } }
.hs {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-24);
  min-height: 62svh; padding: calc(var(--gutter) + 84px) var(--gutter) clamp(32px, 5vw, 64px); overflow: hidden; isolation: isolate;
  background: var(--void);
}
.hs__bg { position: absolute; inset: 0; z-index: -1; transition: transform 1.3s var(--ease-io); }
.hs__bg > img { width: 100%; height: 100%; object-fit: cover; }
.hs__bg .ph { position: absolute; inset: 0;
  background: radial-gradient(110% 80% at 25% 15%, rgba(255,102,0,.45), transparent 60%), linear-gradient(165deg, var(--graphite), var(--deep)); }
.hs--ateliers .hs__bg .ph { background: radial-gradient(110% 80% at 75% 15%, rgba(199,154,75,.42), transparent 60%), linear-gradient(165deg, var(--graphite), var(--deep)); }
.hs::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(18,15,12,.92) 0%, rgba(18,15,12,.35) 70%, rgba(18,15,12,.55) 100%); }
.hs:hover .hs__bg { transform: scale(1.05); }
.hs--ateliers { --accent: var(--gold); }
.hs__title { font-family: var(--f-sans); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tr-display); line-height: .95; font-size: clamp(44px, 8vw, 110px); }
.hs__title .ed { font-size: .42em; display: block; margin-top: .2em; color: var(--ash); }
.hero-tag { position: absolute; top: calc(var(--gutter) + 70px); left: 0; right: 0; z-index: 3; text-align: center; pointer-events: none; padding-inline: var(--gutter); }
.hero-tag .lead { text-shadow: 0 1px 18px rgba(0,0,0,.6); }

/* Bande de témoignages */
.quotes { display: grid; gap: var(--s-24); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.quote { display: grid; gap: var(--s-16); align-content: start; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--rule); border-radius: var(--r-xl); background: var(--void); }
.quote blockquote { font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: var(--t-sub); line-height: 1.35; letter-spacing: -.02em; }
.quote figcaption { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--tr-micro); color: var(--ink-dim); }
[data-placeholder] { }

/* Galerie filtrable */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-32); }
.chip {
  padding: 9px 15px; border: 1px solid var(--rule); border-radius: 999px;
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--tr-micro); color: var(--ink-dim);
  transition: border-color var(--d-fast) ease, color var(--d-fast) ease, background-color var(--d-fast) ease;
}
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--ivory); }
.gal { columns: 3 260px; column-gap: var(--s-16); }
.gal__item { position: relative; display: block; width: 100%; margin: 0 0 var(--s-16); padding: 0; border-radius: var(--r-lg); overflow: hidden; break-inside: avoid; text-align: left; background: var(--smoke); aspect-ratio: 4 / 5; }
.gal__item:nth-child(3n+2) { aspect-ratio: 1 / 1; }
.gal__item:nth-child(4n) { aspect-ratio: 3 / 4; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-io); }
.gal__item:hover img, .gal__item:hover .tile__ph { transform: scale(1.06); }
.gal__item .tile__ph { transition: transform 1s var(--ease-io); }
.gal__cap { position: absolute; inset: auto 0 0 0; z-index: 3; display: grid; gap: 2px; padding: 40px 14px 14px; background: linear-gradient(to top, rgba(18,15,12,.9), transparent); opacity: 0; transform: translateY(8px); transition: opacity var(--d-mid) ease, transform var(--d-mid) var(--ease); }
.gal__item:hover .gal__cap, .gal__item:focus-visible .gal__cap { opacity: 1; transform: none; }
.gal__cap strong { font-size: var(--t-body); color: var(--ivory); }
.gal__cap span { font-size: var(--t-micro); color: var(--ash); }
@media (hover: none) { .gal__cap { opacity: 1; transform: none; } }

/* Agrandissement */
.lb { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 24px; background: rgba(12,10,8,.97); }
.lb[hidden] { display: none; }
.lb__x { position: absolute; top: 14px; right: 18px; font-size: 38px; line-height: 1; color: var(--ivory); padding: 6px 12px; }
.lb__box { display: grid; gap: var(--s-16); width: min(980px, 100%); max-height: 100%; overflow: auto; }
.lb__media img, .lb__media iframe { width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--r-lg); }
.lb__media iframe { aspect-ratio: 16 / 9; border: 0; }
.lb__ph { display: grid; place-items: center; gap: 8px; aspect-ratio: 16 / 10; border-radius: var(--r-lg); background: linear-gradient(160deg, var(--graphite), var(--deep)); font-family: var(--f-serif); font-style: italic; font-size: 36px; }
.lb__ph em { font-size: 13px; color: var(--ash); font-style: normal; text-transform: uppercase; letter-spacing: .12em; }
.lb__cap { display: grid; gap: 10px; justify-items: start; color: var(--ash); }
.lb__cap strong { color: var(--ivory); }

/* Onglets */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-32); }
.tabs [data-tab] { padding: 12px 20px; border: 1px solid var(--rule); border-radius: var(--r-lg); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--tr-micro); font-weight: 500; color: var(--ink-dim); transition: all var(--d-fast) ease; }
.tabs [data-tab]:hover { border-color: var(--accent); color: var(--ink); }
.tabs [data-tab].is-on { background: var(--accent); border-color: var(--accent); color: var(--ivory); }

/* Configurateurs */
.cfg { display: grid; gap: var(--s-32); align-items: start; }
@media (min-width: 980px) { .cfg { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); } .cfg--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; text-align: left; } }
.cfg__fields { display: grid; gap: var(--s-24); grid-template-columns: 1fr; }
@media (min-width: 720px) { .cfg__fields { grid-template-columns: 1fr 1fr; } }
.cfg__fields > * { min-width: 0; }
.cfg__fields > .field--full, .cfg__fields > .grp, .cfg__fields > .chk.field--full, .cfg__fields > [data-show] { grid-column: 1 / -1; }
.cfg__fields [hidden] { display: none !important; }
.field .opt, .grp .opt { text-transform: none; letter-spacing: 0; color: var(--pebble); font-weight: 400; }
.grp { border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--s-24); margin: 0; display: grid; gap: var(--s-16); }
.grp legend { padding: 0 8px; font-size: var(--t-caption); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tr-caption); color: var(--ink-dim); }
.radios { display: grid; gap: 10px; }
.radios--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.rad { position: relative; display: block; cursor: pointer; }
.rad input { position: absolute; opacity: 0; pointer-events: none; }
.rad > span { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r-lg); transition: border-color var(--d-fast) ease, background-color var(--d-fast) ease; }
.rad:hover > span { border-color: var(--pebble); }
.rad:has(input:checked) > span { border-color: var(--accent); background: var(--smoke); box-shadow: var(--inset); }
.rad:has(input:focus-visible) > span { outline: 1px solid var(--accent); outline-offset: 3px; }
.rad i { font-style: normal; color: var(--ink-dim); font-size: var(--t-micro); }
.rad small { color: var(--ink-dim); font-size: 13px; line-height: 1.45; }
.rad--card.is-star > span { border-color: var(--accent); }
.chks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.chkq { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.chk { position: relative; display: block; cursor: pointer; }
.chk input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.chk > span { display: grid; gap: 2px; padding: 12px 14px 12px 42px; border: 1px solid var(--rule); border-radius: var(--r-lg); transition: border-color var(--d-fast) ease, background-color var(--d-fast) ease; position: relative; }
.chk > span::before { content: ''; position: absolute; left: 14px; top: 16px; width: 14px; height: 14px; border: 1px solid var(--accent); border-radius: 3px; }
.chk:has(input:checked) > span { border-color: var(--accent); background: var(--smoke); }
.chk:has(input:checked) > span::before { background: var(--accent); box-shadow: inset 0 0 0 2px var(--smoke); }
.chk:has(input:focus-visible) > span { outline: 1px solid var(--accent); outline-offset: 3px; }
.chk b { font-weight: 500; font-size: var(--t-body); color: var(--ink); }
.chk i { font-style: normal; color: var(--ink-dim); font-size: var(--t-micro); }
.qty { width: 64px; padding: 10px 8px; text-align: center; background: transparent; border: 1px solid var(--rule); border-radius: var(--r-sm); color: var(--ink); }
.field select option { color: #17130F; background: #FBF7F1; }
.sum { position: sticky; top: 92px; display: grid; gap: var(--s-16); padding: var(--s-24); border: 1px solid var(--accent); border-radius: var(--r-xl); background: var(--smoke); box-shadow: var(--inset); }
.sum__title { font-family: var(--f-sans); font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tr-micro); color: var(--accent); }
.sum__lines { display: grid; gap: 8px; }
.sum__lines li { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; color: var(--ink-dim); }
.sum__lines b { font-weight: 500; color: var(--ink); white-space: nowrap; }
.sum__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--rule); font-family: var(--f-serif); font-style: italic; font-size: 20px; }
.sum__total b { font-size: clamp(30px, 3.4vw, 42px); font-weight: 500; letter-spacing: -.03em; }
.sum__note { font-size: 13px; line-height: 1.5; color: var(--ink-dim); }
.sum__btn { justify-self: start; }
.sum__btn[disabled] { opacity: .45; pointer-events: none; }
.sum__alt { justify-self: start; background: none; border: 0; padding: 0; margin-top: var(--s-12, 12px); color: inherit; font: inherit; text-decoration: underline; opacity: .75; cursor: pointer; }
.sum__alt:hover, .sum__alt:focus-visible { opacity: 1; }
.form__note.is-ok { color: var(--accent); }
@media (max-width: 979px) { .sum { position: static; } }
.section--light .sum, .section--light .quote, .section--cream .sum, .section--cream .quote { background: #fff; }
.section--light .chk > span, .section--light .rad > span, .section--cream .chk > span, .section--cream .rad > span { background: #fff; }
.section--light .chk:has(input:checked) > span, .section--light .rad:has(input:checked) > span, .section--cream .chk:has(input:checked) > span, .section--cream .rad:has(input:checked) > span { background: #F5EDE2; }

/* Calendrier des ateliers */
.cal { display: grid; border-top: 1px solid var(--rule); }
.cal__row { display: grid; gap: var(--s-16); padding-block: var(--s-24); border-bottom: 1px solid var(--rule); align-items: center; }
@media (min-width: 820px) { .cal__row { grid-template-columns: 210px minmax(0, 1fr) auto; gap: var(--s-32); } }
.cal__row time { font-family: var(--f-serif); font-style: italic; font-size: 20px; text-transform: capitalize; }
.cal__row time span { font-family: var(--f-sans); font-style: normal; font-size: var(--t-micro); letter-spacing: var(--tr-micro); color: var(--ink-dim); }
.cal__row h3 { font-family: var(--f-sans); font-weight: 700; font-size: var(--t-sub); text-transform: uppercase; letter-spacing: -.028em; }
.cal__empty { padding-block: var(--s-24); color: var(--ink-dim); }

/* Clubs */
.clubs { display: grid; gap: var(--s-24); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* FAQ / Conditions */
.legal { display: grid; gap: var(--s-48); max-width: 880px; margin-inline: auto; }
.legal h2 { font-family: var(--f-sans); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tr-head); font-size: var(--t-h-sm); margin-bottom: var(--s-16); }
.legal h3 { font-weight: 500; font-size: var(--t-read); margin: var(--s-16) 0 4px; color: var(--ink); }
.legal p, .legal li { color: var(--ink-dim); font-size: var(--t-read); line-height: 1.6; }
.legal ul { display: grid; gap: 6px; padding-left: 1.2em; list-style: '— '; }
.legal li::marker { color: var(--accent); }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); color: var(--ink-dim); }
.legal th { color: var(--ink); font-size: var(--t-caption); letter-spacing: var(--tr-caption); text-transform: uppercase; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: var(--s-48); }

/* Bannière « envie de voir notre travail » */
.banner { display: grid; gap: var(--s-24); padding: clamp(28px, 4vw, 56px); border: 1px solid var(--rule); border-radius: var(--r-xl); background: var(--smoke); }
.banner__links { display: flex; flex-wrap: wrap; gap: var(--s-24) var(--s-48); }

.team-collective { max-width: 62ch; margin-inline: auto; text-align: center; }
.page-hero { min-height: 72svh; }
@media (max-width: 899px) { .hero-tag { position: static; padding-top: calc(var(--gutter) + 70px); } .hs { padding-top: var(--s-48); } }


/* ---- Mobile : galerie en 2 colonnes, filtres sur une ligne, bouton « Voir plus » ---- */
.gal__more { display: flex; justify-content: center; margin-top: var(--s-32); }
.more { grid-column: 1 / -1; border: 1px solid var(--rule); border-radius: var(--r-lg, 16px); padding: 0 var(--s-16, 16px); }
.more > summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 500; display: flex; justify-content: space-between; gap: 12px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: '+'; font-size: 22px; line-height: 1; }
.more[open] > summary::after { content: '–'; }
.more[open] { padding-bottom: var(--s-16, 16px); }
.more > fieldset, .more > div { margin-top: var(--s-16, 16px); }
@media (max-width: 700px) {
  .gal { columns: 2; column-gap: 10px; }
  .gal__item { margin-bottom: 10px; border-radius: 12px; }
  .gal__cap { display: none; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { white-space: nowrap; flex: 0 0 auto; }
}

/* Cartes dans les sections claires */
.section--light .pack, .section--cream .pack, .section--light .banner, .section--cream .banner { background: #fff; }
.section--light .pack--featured, .section--cream .pack--featured { background: #FBF7F1; }
.section--light .row::before, .section--cream .row::before { background: rgba(255,102,0,.07); }
.section--light .pay__opt:has(input:checked), .section--cream .pay__opt:has(input:checked) { background: #F5EDE2; }

/* ---- Galerie par séries : vignettes réduites + diaporama (12 oct) ---- */
.gal { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.gal__item, .gal__item:nth-child(3n+2), .gal__item:nth-child(4n) { aspect-ratio: 4 / 5; margin: 0; border-radius: 14px; }
.gal__item .gal__cap { opacity: 1; transform: none; padding: 34px 12px 11px; }
.gal__cap strong { font-size: 14px; line-height: 1.25; }
.gal__item.is-video img { filter: brightness(.82); }
.tile__play { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.9); color: #1d1a16; font-size: 15px; padding-left: 3px; }
.lb__box { width: min(1000px, 100%); }
.lb__stage { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.lb__media { display: grid; place-items: center; min-width: 0; }
.lb__media img { width: auto; max-width: 100%; max-height: 72vh; margin: 0 auto; }
.lb__media iframe { width: 100%; max-height: 72vh; }
.lb__media.is-vertical iframe { width: min(100%, 40vh * 1); aspect-ratio: 9 / 16; height: min(72vh, 640px); width: auto; max-width: 100%; margin: 0 auto; }
.lb__nav { width: 44px; height: 44px; border-radius: 50%; font-size: 30px; line-height: 1; color: var(--ivory); background: rgba(255,255,255,.12); display: grid; place-items: center; padding-bottom: 4px; }
.lb__nav:hover { background: rgba(255,255,255,.24); }
.lb__nav[hidden] { display: none; }
.lb__count { text-align: center; font-size: 13px; color: var(--ash); min-height: 1em; margin: 0; }
@media (max-width: 700px) {
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gal__cap { display: grid !important; }
  .lb { padding: 12px; }
  .lb__stage { grid-template-columns: minmax(0, 1fr); }
  .lb__nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.45); width: 40px; height: 40px; }
  .lb__nav--p { left: 4px; } .lb__nav--n { right: 4px; }
  .lb__media img { max-height: 66vh; }
}
.feature { margin: 0 0 var(--s-32); border-radius: 18px; overflow: hidden; aspect-ratio: 21 / 9; background: var(--smoke); }
.feature img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
@media (max-width: 700px) { .feature { aspect-ratio: 16 / 10; border-radius: 12px; } }

/* ---- Logo + orange/gris (12 oct) ---- */
.nav__brand { display: inline-flex; align-items: center; gap: 10px; }
.nav__logo { width: 30px; height: 30px; flex: none; }
.footer .nav__logo { width: 38px; height: 38px; }
.footer__logo { display: block; width: min(220px, 60%); height: auto; margin-bottom: var(--s-16); }
.hs__bg > img { position: absolute; inset: 0; z-index: 1; }
.hs__bg > .ph { z-index: 0; }
.hs::after { background: linear-gradient(to top, rgba(18,15,12,.88) 0%, rgba(18,15,12,.42) 38%, rgba(18,15,12,.08) 70%, rgba(18,15,12,.28) 100%); }
.hs--studio .hs__bg > img { object-position: center 22%; }
.hs--ateliers .hs__bg > img { object-position: center 55%; }
.section--light h2 .ed, .section--cream h2 .ed { color: var(--accent); }

/* Menu : cinq liens + bouton, sans retour à la ligne */
.nav__links .lnk { white-space: nowrap; }
@media (min-width: 1080px) and (max-width: 1399px) { .nav__links { gap: var(--s-20, 20px); } .nav__links .lnk { font-size: .92em; } }

/* Diaporama d'en-tête : images (ou vidéos) qui se fondent l'une dans l'autre */
.hero__slides, .hs__bg[data-slides] { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hs__bg[data-slides] { z-index: -1; }
.hero__slides::after { content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(to top, rgba(18,15,12,.9) 0%, rgba(18,15,12,.5) 55%, rgba(18,15,12,.62) 100%); }
.hero--slides .decor { display: none; }
.hs-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; opacity: 0; transition: opacity 1.6s ease; z-index: 1; }
.hs-slide.is-on { opacity: 1; z-index: 2; animation: hsZoom 9s ease-out forwards; }
@keyframes hsZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .hs-slide.is-on { animation: none; } .hs-slide { transition: none; } }

/* Rangées de réalisations qui défilent (accueil, studio) */
.rows3 { display: grid; gap: 10px; overflow: hidden; margin-inline: calc(var(--gutter) * -1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rows3__row { display: flex; gap: 10px; width: max-content; animation: rows3 var(--d, 90s) linear infinite; will-change: transform; }
.rows3__row--r { animation-direction: reverse; }
.rows3:hover .rows3__row { animation-play-state: paused; }
@keyframes rows3 { to { transform: translateX(calc(-50% - 5px)); } }
.rows3__t { position: relative; flex: 0 0 auto; width: clamp(210px, 26vw, 380px); aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--graphite, #2a2420); }
.rows3__t img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; transition: transform .6s var(--ease-io, ease); }
.rows3__t:hover img, .rows3__t:focus-visible img { transform: scale(1.07); }
.rows3__cap { position: absolute; inset: auto 0 0 0; padding: 22px 10px 8px; font-size: 12px; letter-spacing: .04em; color: #fff; text-align: left; background: linear-gradient(to top, rgba(18,15,12,.8), transparent); opacity: 0; transition: opacity .3s; }
.rows3__t:hover .rows3__cap, .rows3__t:focus-visible .rows3__cap { opacity: 1; }
.rows3__cta { text-align: center; margin-top: var(--s-32); }
@media (prefers-reduced-motion: reduce) { .rows3 { overflow-x: auto; } .rows3__row { animation: none; } }
.hero--compact { min-height: 46svh; }

/* Héros unique de l'accueil : un seul défilement + deux entrées */
.hero-one { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; background: var(--void); overflow: hidden; }
.hero-one::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(18,15,12,.94) 0%, rgba(18,15,12,.55) 45%, rgba(18,15,12,.45) 100%); pointer-events: none; }
.hero-one .hero__slides { z-index: 0; }
.hero-one .hero__slides > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-one__main { position: relative; z-index: 2; padding: calc(var(--gutter) + 90px) var(--gutter) clamp(24px, 4vw, 48px); display: grid; gap: var(--s-24); max-width: 1400px; width: 100%; margin-inline: auto; }
.hero-one__main .hs__title { font-size: clamp(48px, 9vw, 130px); }
.hero-one__doors { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.22); background: rgba(18,15,12,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.door { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "n t go" "n d go"; column-gap: var(--s-24); row-gap: 4px; align-items: center; padding: clamp(18px, 2.6vw, 34px) var(--gutter); color: var(--ivory); text-decoration: none; transition: background .35s; }
.door + .door { border-left: 1px solid rgba(255,255,255,.22); }
.door__n { grid-area: n; font-family: var(--f-sans); font-size: 12px; letter-spacing: .14em; color: var(--accent, #ff6600); }
.door--gold .door__n { color: var(--gold); }
.door__t { grid-area: t; font-family: var(--f-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(16px, 2vw, 24px); }
.door__t em { font-family: var(--f-serif, serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--ash); margin-left: .5em; font-size: .85em; }
.door__d { grid-area: d; font-size: 14px; color: var(--ash); }
.door__go { grid-area: go; font-size: 22px; transition: transform .3s; }
.door:hover, .door:focus-visible { background: rgba(255,255,255,.08); }
.door:hover .door__go { transform: translate(4px,-4px); }
@media (max-width: 699px) {
  .hero-one__doors { grid-template-columns: 1fr; }
  .door + .door { border-left: 0; border-top: 1px solid rgba(255,255,255,.22); }
  .door__t em { display: block; margin: 0; }
  .door__d { display: none; }
}

/* En-têtes : plus de voile sombre sur les photos ; lisibilité par ombre portée sur le texte */
.hero__slides::after, .hero-one::after, .hs::after { display: none !important; }
.hero--slides .hero__content, .hero--slides h1, .hero--slides .lead, .hero--slides .label,
.hero-one__main h1, .hero-one__main .lead, .hero-one__main .label { text-shadow: 0 2px 22px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.45); }

/* Cadrage des images d'en-tête : garder le sujet visible, y compris sur téléphone */
.hs-slide[src*="graduation-04"], .hs-slide[data-src*="graduation-04"] { object-position: 33% 50%; }
.hs-slide[src*="portrait-douceur-03"], .hs-slide[data-src*="portrait-douceur-03"] { object-position: 50% 0%; }
.hero-one__main .hs__title .ed, .hero-one__main .lead { text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 2px 24px rgba(0,0,0,.7); color: #f3ece2; }


/* Bouton principal bien visible (espace client) */
.btn-solid{display:inline-flex;align-items:center;gap:12px;padding:16px 34px;border-radius:999px;background:#E05A00;color:#fff;font-weight:600;letter-spacing:.04em;text-decoration:none;border:0;cursor:pointer;box-shadow:0 8px 24px rgba(224,90,0,.28);transition:transform .2s,box-shadow .2s,background .2s}
.btn-solid:hover{background:#c24e00;transform:translateY(-2px);box-shadow:0 12px 30px rgba(224,90,0,.38)}
.btn-solid:focus-visible{outline:3px solid #111;outline-offset:3px}