/* ═══════════════════════════════════════════════════════════
   ART SAMUI — feuille de style du prototype (destinée à Divi)
   1. Tokens « Pierre & encre »      6. Home immersive (moteur)
   2. Base & typographie             7. Pages secondaires
   3. Dock (header) & menu           8. Footer
   4. Loader & voile de transition   9. Responsive
   5. Révélations génériques        10. Mouvement réduit
   Dans Divi : ce fichier va dans le style.css du thème enfant
   (ou Divi › Options du thème › CSS personnalisé).
   ═══════════════════════════════════════════════════════════ */

/* ═══════════ 1. TOKENS ═══════════ */
:root {
  --ink-rgb: 28, 27, 25;
  --bone: #F5F2EC;          /* fond — blanc chaud */
  --ink: #1C1B19;           /* texte — encre */
  --ash: #8A857C;           /* secondaire — pierre */
  --white: #FCFBF8;         /* surfaces élevées (dock, panneau) */
  --teal: #0E3A3F;          /* sections sombres */
  --teal-rgb: 14, 58, 63;
  --bronze: #A8875A;        /* filets fins uniquement */
  --bone-rgb: 245, 242, 236;

  /* l'accent du moteur Site Immersif = teal profond */
  --lime: var(--teal);
  --lime-ink: var(--bone);

  --ink-faint: rgba(var(--ink-rgb), 0.15);
  --hair: rgba(var(--ink-rgb), 0.14);

  --serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: var(--sans);

  --t-heading: clamp(40px, 5.6vw, 84px);
  --t-h2: clamp(36px, 4.4vw, 66px);
  --t-h3: clamp(28px, 2.6vw, 40px);
  --radius: 2px;
  --gutter: clamp(20px, 4vw, 64px);
  --maxw: 1440px;

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ═══════════ 2. BASE & TYPOGRAPHIE ═══════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 300; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--teal); color: var(--bone); }

/* label K2SD : capitales espacées */
.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
}
.ash { color: var(--ash); }
.serif { font-family: var(--serif); }
.it { font-style: italic; }
.display {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.04;
}
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* lien texte souligné (pas de bouton voyant — registre sobre) */
.link {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 6px;
}
.link::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform-origin: left;
  transition: transform .6s var(--ease-inout);
}
.link:hover::after { transform: scaleX(0.35); }
.link .arr { transition: transform .5s var(--ease-out); }
.link:hover .arr { transform: translateX(5px); }

/* bandeau prototype */
.proto-badge {
  position: fixed; left: 14px; bottom: 14px; z-index: 90;
  background: rgba(var(--ink-rgb), 0.82); color: var(--bone);
  padding: 7px 11px; border-radius: var(--radius);
  font-size: 9.5px; letter-spacing: 0.16em; pointer-events: none;
}

/* ═══════════ 3. DOCK (HEADER) & MENU ═══════════ */
.lockup { display: inline-flex; align-items: center; gap: 0.62em; line-height: 1; }
.lockup-mark { height: 2.1em; width: auto; display: block; }
.lockup-word { height: 1.05em; width: auto; display: block; }

.dock {
  position: fixed; top: 12px; left: 12px; right: 12px;
  height: 62px;
  background: rgba(var(--bone-rgb), 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(var(--ink-rgb), 0.06);
  border-radius: var(--radius);
  display: flex; align-items: center;
  padding: 0 10px 0 20px;
  z-index: 100;
  transition: transform .9s var(--ease-out) .15s, opacity .32s var(--ease-out), background .4s;
}
/* le dock n'est caché (puis glisse) que si le JavaScript tourne ; sans JS il reste visible */
html.js .dock { transform: translateY(calc(-100% - 20px)); }
html.js body.is-ready .dock { transform: translateY(0); }
body.handoff .dock { transform: translateY(0); opacity: 0; transition: none; }
.dock-wordmark { display: block; margin-right: auto; font-size: 17px; line-height: 1; }
.dock-nav { display: flex; gap: 2px; margin-right: 14px; }
.dock-link { padding: 10px 12px; position: relative; color: var(--ink); }
.dock-link::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px;
  height: 1px; background: var(--bronze);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-inout);
}
.dock-link:hover::after, .dock-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.dock-cta {
  background: var(--teal); color: var(--bone);
  padding: 13px 18px; border-radius: var(--radius);
  transition: background .3s;
}
.dock-cta:hover { background: #164a50; }
.dock-burger {
  width: 44px; height: 42px; margin-left: 6px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.dock-burger i { display: block; width: 22px; height: 1px; background: var(--ink); transition: transform .5s var(--ease-inout), width .5s var(--ease-inout); }
.dock-burger i:last-child { width: 14px; margin-left: 8px; }
.dock-burger:hover i:last-child { width: 22px; margin-left: 0; }

/* menu plein écran (K2SD) */
.menu {
  position: fixed; inset: 0; z-index: 150;
  background: var(--teal); color: var(--bone);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s var(--ease-inout);
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  overflow: hidden;
}
body.menu-open .menu { clip-path: inset(0 0 0 0); }
body.menu-open { overflow: hidden; }
.menu-close {
  position: absolute; top: 24px; right: 26px; z-index: 3;
  color: var(--bone); display: inline-flex; align-items: center; gap: 12px;
}
.menu-close span { position: relative; width: 22px; height: 22px; display: inline-block; }
.menu-close span::before, .menu-close span::after {
  content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--bone);
}
.menu-close span::before { transform: rotate(45deg); }
.menu-close span::after { transform: rotate(-45deg); }
.menu-main { padding: 16vh var(--gutter) 6vh; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 2; }
.menu-list li { overflow: hidden; }
.menu-list a {
  display: flex; align-items: baseline; gap: 22px;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(40px, 5.6vw, 82px); line-height: 1.12; letter-spacing: -0.015em;
  transform: translateY(110%);
  transition: transform .9s var(--ease-out), color .3s;
  transition-delay: calc(var(--i, 0) * 55ms + .25s);
}
.menu-list a .mono { font-style: normal; font-family: var(--sans); color: rgba(var(--bone-rgb), 0.5); transform: translateY(-0.9em); }
body.menu-open .menu-list a { transform: translateY(0); }
.menu-list a:hover { color: var(--bronze); }
.menu-foot { display: flex; flex-wrap: wrap; gap: 28px 56px; color: rgba(var(--bone-rgb), 0.7); opacity: 0; transition: opacity .6s .6s; }
body.menu-open .menu-foot { opacity: 1; }
.menu-foot a:hover { color: var(--bone); }
.menu-visual { position: relative; overflow: hidden; }
.menu-visual img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08);
  transition: opacity .7s var(--ease-out), transform 1.4s var(--ease-out);
}
.menu-visual img.on { opacity: 0.9; transform: scale(1); }
.menu-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--teal) 0%, rgba(var(--teal-rgb), 0) 30%); }

/* ═══════════ 4. LOADER & VOILE ═══════════ */
.loader {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.loader::before {
  content: ''; position: absolute; inset: 0;
  background: var(--bone);
  transition: opacity .75s var(--ease-inout);
}
.loader.done { pointer-events: none; }
.loader.done::before { opacity: 0; }
.loader-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.loader-wordmark {
  font-size: 44px; line-height: 1;
  transform-origin: center center;
  transition: transform .9s var(--ease-inout);
  will-change: transform;
}
.loader-wordmark.landed { opacity: 0; transition: opacity .32s var(--ease-out); }
/* les barres du symbole se posent une à une pendant le chargement */
.loader .bar { transform-box: fill-box; transform-origin: center; transform: scale(0, 1); transition: transform .62s var(--ease-out); transition-delay: calc(var(--b) * 38ms); }
.loader .bar.v { transform: scale(1, 0); transform-origin: center bottom; }
.loader.go .bar { transform: scale(1, 1); }
.loader .lockup-word { clip-path: inset(0 100% 0 0); transition: clip-path .8s var(--ease-inout) .45s; }
.loader.go .lockup-word { clip-path: inset(0 0 0 0); }
.loader-rule {
  display: block; width: 128px; height: 1px;
  background: var(--ink-faint); overflow: hidden;
  transition: opacity .3s var(--ease-out), transform .5s var(--ease-inout);
}
.loader.done .loader-rule { opacity: 0; transform: scaleX(0.4); }
.loader-rule i { display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }

/* voile de transition entre pages */
.veil {
  position: fixed; inset: 0; z-index: 190; background: var(--bone);
  pointer-events: none; opacity: 0;
  transition: opacity .7s var(--ease-inout);
}
/* sans JavaScript, le voile ne couvre jamais la page */
html.js .veil { opacity: 1; }
html.js body.is-ready .veil, .veil.skip-in { opacity: 0; }
html.js body.is-leaving .veil { opacity: 1; transition-duration: .45s; }

/* ═══════════ 5. RÉVÉLATIONS ═══════════ */
/* les états cachés n'existent qu'avec JavaScript (html.js) : sans JS, tout est lisible */
html.js .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.js .reveal.in-view { opacity: 1; transform: translateY(0); }
/* ligne qui monte derrière un masque */
.rise { display: block; overflow: hidden; }
.rise > span { display: block; }
html.js .rise > span { transform: translateY(105%); transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms + .1s); }
html.js .rise.in-view > span, html.js .in-view .rise > span { transform: translateY(0); }

/* ═══════════ 6. HOME IMMERSIVE (moteur Site Immersif) ═══════════ */
body.is-smooth .smooth { position: fixed; top: 0; left: 0; width: 100%; will-change: transform; }

.scene { position: relative; }
.scene .pin { height: 100vh; position: relative; overflow: hidden; will-change: transform; }

/* S1 · HERO — nuage de visuels → zoom texte */
.s-hero .pin { background: var(--bone); }
.floaters { position: absolute; inset: 0; z-index: 1; }
.fl {
  position: absolute; left: var(--x); top: var(--y); width: var(--w);
  overflow: hidden; border-radius: var(--radius);
  will-change: transform;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s var(--ease-inout);
  transition-delay: calc(var(--fi, 0) * 90ms + .15s);
}
.fl img { width: 100%; height: auto; transform: scale(1.3); transition: transform 1.7s var(--ease-out); transition-delay: calc(var(--fi, 0) * 90ms + .15s); }
body.is-ready .fl { clip-path: inset(0 0 0 0); }
body.is-ready .fl img { transform: scale(1); }

.hero-copy {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 2; text-align: center; pointer-events: none;
}
.hero-kicker { margin-bottom: 30px; will-change: opacity; }
.hero-title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--t-heading); letter-spacing: -0.02em; line-height: 1.08; }
.hero-line1 { display: block; will-change: opacity; text-wrap: balance; padding: 0 var(--gutter); }
.hero-line2 { display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.hero-line2 .hl { flex: 0 0 auto; }

.grow { display: block; flex: 0 0 auto; overflow: hidden; border-radius: var(--radius); width: 0; height: 0; will-change: width, height; position: relative; }
.grow img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 100vh; object-fit: cover; border-radius: 0; max-width: none; }

.spot { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.spot-intro {
  position: absolute; top: 44%; left: 0; width: 100%;
  text-align: center; color: #fff;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: var(--t-heading); letter-spacing: -0.02em;
  white-space: nowrap;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.25);
}
.spot-intro span { display: inline-block; will-change: opacity, transform; opacity: 0; }

/* S2 · MANIFESTE */
.s-fill .pin { background: var(--bone); display: flex; align-items: center; justify-content: center; }
.fill-kicker { position: absolute; top: 15vh; left: 50%; transform: translateX(-50%); }
.fill-text {
  width: min(980px, 76vw);
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(30px, 3.9vw, 58px);
  letter-spacing: -0.012em; line-height: 1.18; text-align: left;
}
.fill-text .fc { color: var(--ink-faint); transition: color .25s linear; }
.fill-text .fc.on { color: var(--ink); }
.fill-text.greyed .fc { color: rgba(var(--ink-rgb), 0.3); transition: color .6s; }
.boxed { position: relative; white-space: nowrap; font-style: italic; }
.box-svg { position: absolute; inset: -0.2em -0.32em; width: calc(100% + 0.64em); height: calc(100% + 0.4em); overflow: visible; }
.box-svg path { fill: none; stroke: var(--bronze); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.fill-text.greyed .box-svg path { stroke: rgba(168, 135, 90, 0.35); transition: stroke .6s; }

/* S3 · LIEUX — panneau masonry (« The Archive ») */
.collection {
  position: relative; background: var(--white);
  padding: 16vh var(--gutter) 26vh;
  margin-top: -100vh;
  z-index: 2; overflow: visible;
}
.coll-head { text-align: center; margin-bottom: 11vh; position: relative; z-index: 1; }
.coll-title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--t-h2); letter-spacing: -0.015em; line-height: 1.06; margin: 20px auto 18px; max-width: 14em; }
.coll-sub { color: var(--ash); margin: 0 auto 22px; max-width: 34em; font-size: 16px; }
.coll-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 28px); align-items: start; position: relative; z-index: 2; }
.col { display: grid; gap: clamp(44px, 5vw, 84px); will-change: transform; }
.col:nth-child(2) { margin-top: 14vh; }
.col:nth-child(3) { margin-top: 4vh; }
.col:nth-child(4) { margin-top: 9vh; }
.card { position: relative; display: block; }
.card-img { position: relative; overflow: hidden; border-radius: var(--radius); }
.card-img img { width: 100%; transition: transform 1.1s var(--ease-out), filter .6s; }
.card:hover .card-img img { transform: scale(1.045); }
.card figcaption { margin-top: 14px; }
.card figcaption .mono { display: block; color: var(--ash); margin-bottom: 4px; }
.card-title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.15; display: flex; justify-content: space-between; gap: 12px; }
.card-title .arr { font-style: normal; font-family: var(--sans); font-size: 14px; opacity: .6; transition: transform .5s var(--ease-out); }
.card:hover .card-title .arr { transform: translate(3px, -3px); opacity: 1; }

/* section K2SD numérotée (Expertise, Partenaires) */
.k-section { position: relative; z-index: 3; background: var(--bone); padding: 18vh 0 16vh; }
.k-section.on-white { background: var(--white); }
.k-head { display: grid; grid-template-columns: 1fr 1.25fr; gap: 6vw; align-items: end; margin-bottom: 10vh; }
.k-num { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.k-num::after { content: ''; width: 56px; height: 1px; background: var(--bronze); }
.k-title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.015em; }
.k-lead { font-size: 17px; line-height: 1.7; max-width: 34em; color: rgba(var(--ink-rgb), 0.86); }
.k-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(20px, 2.4vw, 40px); }
.k-item { border-top: 1px solid var(--ink); padding-top: 22px; display: flex; flex-direction: column; min-height: 100%; }
.k-item .mono { color: var(--ash); margin-bottom: 30px; }
.k-item h3 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--t-h3); line-height: 1.08; margin-bottom: 16px; }
.k-item p { font-size: 15px; line-height: 1.65; color: rgba(var(--ink-rgb), 0.8); margin-bottom: 26px; }
.k-item .link { margin-top: auto; align-self: flex-start; }
.k-note { margin-top: 10vh; display: grid; grid-template-columns: 1fr 1.25fr; gap: 6vw; }
.k-note p:not(.mono) { font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.32; font-weight: 300; }

/* liste « archive » K2SD (Partenaires) */
.k-list { border-top: 1px solid var(--ink); }
.k-row {
  display: grid; grid-template-columns: 90px 1.1fr 1.4fr 40px; gap: 24px; align-items: baseline;
  padding: 30px 0; border-bottom: 1px solid var(--hair);
  transition: padding .5s var(--ease-out);
}
.k-row:hover { padding-left: 14px; }
.k-row .mono { color: var(--ash); }
.k-row h3 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 2.6vw, 42px); line-height: 1.05; }
.k-row p { font-size: 15px; line-height: 1.6; color: rgba(var(--ink-rgb), 0.8); }
.k-row .arr { justify-self: end; transition: transform .5s var(--ease-out); }
.k-row:hover .arr { transform: translate(4px, -4px); }

/* S4 · BANDE TEAL — Intention / Emission / Perception */
.band { position: relative; z-index: 3; margin-top: 0; }
.diag { height: 7vw; position: relative; margin: -1px 0; }
.to-lime { background: linear-gradient(to bottom right, transparent 49.7%, var(--lime) 50.3%); }
.from-lime { background: linear-gradient(to bottom right, var(--lime) 49.7%, transparent 50.3%); }
.band .diag.to-lime, .band .diag.from-lime { background-color: var(--bone); }
.s-motto .pin { background: var(--lime); overflow: hidden; }
.motto-kicker { position: absolute; top: 14vh; left: 50%; transform: translateX(-50%); color: var(--lime-ink); opacity: 0.72; white-space: nowrap; }
.motto-track { position: absolute; top: 50%; left: 0; display: flex; align-items: baseline; gap: 8vw; white-space: nowrap; will-change: transform; }
.mw { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(110px, 18vw, 290px); letter-spacing: -0.02em; line-height: 1; color: var(--lime-ink); will-change: opacity; }
.mw .sc { display: inline-block; will-change: transform; }
.motto-hint { position: absolute; bottom: 14vh; left: 50%; transform: translateX(-50%); color: var(--lime-ink); transition: opacity .25s; text-align: center; max-width: 80vw; }
.motto-hint.swap { opacity: 0; }

/* S5 · PROCESSUS — zoom, rideau de lames, odomètre */
.s-night .pin { background: var(--bone); }
.night-line {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  white-space: nowrap; z-index: 2;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: var(--t-heading); letter-spacing: -0.02em;
}
.night-line .nw { will-change: opacity, transform; opacity: 0; }
.night-line .nw + .nw { margin-left: 0.28em; }
.bignum {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: flex; align-items: flex-start;
  font-family: var(--serif); font-size: min(50vh, 34vw); font-weight: 300; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-faint); z-index: 11; opacity: 0; pointer-events: none;
}
.bignum-roll { display: block; height: 1em; overflow: hidden; }
.bignum-roll > span { display: block; will-change: transform; }
.bignum-roll i { display: block; height: 1em; font-style: normal; letter-spacing: normal; padding-right: 0.06em; }
.wipe { position: absolute; inset: -2px; z-index: 9; display: flex; pointer-events: none; overflow: hidden; }
.wipe span { flex: 1 1 0; position: relative; margin-right: -2px; min-width: 0; background: var(--bone); transform: scaleY(0); transform-origin: bottom; will-change: transform; }
.wipe span:last-child { margin-right: 0; }
.psteps { position: absolute; left: var(--gutter); top: 50%; width: min(600px, 44vw); z-index: 12; }
.pstep { position: absolute; left: 0; top: 0; opacity: 0; will-change: opacity, transform; }
.pstep-meta { display: block; margin-bottom: 16px; }
.pstep h3 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(46px, 5.4vw, 80px); letter-spacing: -0.015em; line-height: 1; margin-bottom: 20px; }
.pstep p { font-size: 17px; line-height: 1.65; max-width: 30em; color: rgba(var(--ink-rgb), 0.85); }
.steps-cta {
  position: absolute; left: 50%; bottom: 8vh; transform: translateX(-50%);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -0.01em;
  color: var(--ink); opacity: 0; z-index: 12; will-change: opacity, transform;
}
.steps-cta a { position: relative; display: inline-block; padding: 0.3em 0.6em; }
.cta-oval { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cta-oval path { fill: none; stroke: var(--bronze); stroke-width: 1.4; vector-effect: non-scaling-stroke; }

/* S6 · DÉCLARATION PARTENAIRES (scène citation) */
.s-quote .pin { background: var(--bone); display: flex; align-items: center; justify-content: center; }
.q-stack { position: relative; z-index: 2; width: min(1040px, 84vw); }
.q-glyph { display: block; font-family: var(--serif); font-size: clamp(110px, 10vw, 180px); line-height: 0.62; color: var(--bronze); margin-bottom: 10px; opacity: 0; will-change: opacity, transform; }
.q-block { position: relative; }
.q-text { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3.6vw, 56px); line-height: 1.2; letter-spacing: -0.012em; color: var(--ink); opacity: 0; will-change: opacity, transform; }
.q-text em { font-style: italic; }
.q-sign { margin-top: clamp(34px, 4.4vw, 58px); }
.q-rule { display: block; height: 1px; background: var(--ink-faint); transform: scaleX(0); transform-origin: left; }
.q-sign-row { display: flex; align-items: baseline; gap: 26px; padding-top: 20px; }
.q-name { font-family: var(--serif); font-style: italic; font-size: 26px; font-weight: 400; opacity: 0; }
.q-ctx { flex: 1; opacity: 0; }
.q-link { opacity: 0; white-space: nowrap; }
.q-fig { font-size: clamp(30px, 3.2vw, 46px); font-weight: 300; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; }
.q-stack.no-fig .q-fig { display: none; }

/* S7 · OBJECTIONS + traînée sous la souris */
.s-final .pin { background: var(--bone); display: flex; align-items: center; justify-content: center; }
.final-text {
  position: relative; z-index: 2; text-align: center;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: var(--t-heading); letter-spacing: -0.02em; line-height: 1.16;
  padding: 0 var(--gutter); max-width: min(1100px, 80vw); margin: 0 auto;
}
.fs { color: var(--ink-faint); transition: color .5s; }
.fs.on { color: var(--ink); }
.pill { position: relative; white-space: nowrap; }
.pill-svg { position: absolute; inset: -0.16em -0.3em; width: calc(100% + 0.6em); height: calc(100% + 0.32em); overflow: visible; }
.pill-svg path { fill: none; stroke: var(--bronze); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.trail { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.trail img { position: absolute; top: 0; left: 0; width: var(--tw, 150px); max-width: none; opacity: 0; border-radius: var(--radius); will-change: transform, opacity; }

/* ═══════════ 7. PAGES SECONDAIRES ═══════════ */
.page-hero {
  position: relative; height: 100vh; min-height: 620px; overflow: hidden;
  color: #fff; display: flex; align-items: flex-end;
}
.page-hero.short { height: 72vh; min-height: 520px; }
.page-hero-media { position: absolute; inset: -6% 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 2.4s var(--ease-out); }
body.is-ready .page-hero-media img { transform: scale(1); }
.page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.42) 100%); }
.page-hero-copy { position: relative; z-index: 2; width: 100%; padding: 0 var(--gutter) 11vh; }
.page-hero-copy .mono { margin-bottom: 26px; opacity: .92; }
.page-hero h1 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(48px, 7vw, 112px); line-height: 1.0; letter-spacing: -0.02em; max-width: 13em; }
.page-hero .scroll-cue { position: absolute; right: var(--gutter); bottom: 11vh; z-index: 2; display: flex; align-items: center; gap: 12px; }
.page-hero .scroll-cue::after { content: ''; width: 1px; height: 44px; background: rgba(255,255,255,.7); animation: cue 2.2s var(--ease-inout) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* hero sans image (Contact) */
.page-hero.plain { color: var(--ink); height: auto; min-height: 0; padding-top: 26vh; }
.page-hero.plain::after { display: none; }
.page-hero.plain .page-hero-copy { padding-bottom: 10vh; }

.sec { position: relative; padding: 16vh 0; }
.sec.white { background: var(--white); }
.sec.dark { background: var(--teal); color: var(--bone); }
.sec.dark .ash, .sec.dark .k-item .mono { color: rgba(var(--bone-rgb), 0.55); }
.sec.dark .k-item { border-top-color: rgba(var(--bone-rgb), 0.5); }
.sec.dark .k-item p, .sec.dark .k-lead { color: rgba(var(--bone-rgb), 0.82); }
.sec.dark .k-num::after { background: var(--bronze); }

/* grille 1 / 1.4fr du wireframe, colonne gauche collante */
.split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 7vw; align-items: start; }
.split-sticky { position: sticky; top: 120px; }
.prose p { font-size: 17px; line-height: 1.75; color: rgba(var(--ink-rgb), 0.86); max-width: 36em; }
.prose p + p { margin-top: 1.2em; }
.sec.dark .prose p { color: rgba(var(--bone-rgb), 0.84); }
.prose .lede { font-family: var(--serif); font-size: clamp(26px, 2.3vw, 36px); line-height: 1.3; font-weight: 300; color: var(--ink); }
.sec.dark .prose .lede { color: var(--bone); }
.case { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--hair); font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.4; color: var(--ash); max-width: 30em; }
.case b { font-weight: 500; color: var(--ink); }

/* triade numérotée */
.triad { display: grid; gap: 0; }
.triad-item { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 34px 0; border-top: 1px solid var(--hair); }
.triad-item:last-child { border-bottom: 1px solid var(--hair); }
.triad-item h3 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(34px, 3.4vw, 54px); line-height: 1; margin-bottom: 14px; }
.triad-item p { font-size: 16px; line-height: 1.7; color: rgba(var(--ink-rgb), 0.82); max-width: 32em; }

/* image avec parallaxe et légende */
.figure { position: relative; }
.figure .media { overflow: hidden; border-radius: var(--radius); }
.figure .media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.figure figcaption { margin-top: 14px; color: var(--ash); }
.ratio-45 { aspect-ratio: 4 / 5; }
.ratio-32 { aspect-ratio: 3 / 2; }

/* piliers de service : image / texte alternés */
.pillar { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: center; padding: 12vh 0; border-top: 1px solid var(--hair); }
.pillar:first-of-type { border-top: 0; }
.pillar.flip .pillar-media { order: 2; }
.pillar-num { font-family: var(--serif); font-weight: 300; font-size: clamp(80px, 9vw, 150px); line-height: .8; color: var(--ink-faint); margin-bottom: 18px; }
.pillar h2 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--t-h2); line-height: 1.02; margin-bottom: 24px; }
.spec { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 28px; color: var(--ash); }
.spec li { position: relative; }
.spec li + li::before { content: ''; position: absolute; left: -12px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--bronze); }
.option { margin-top: 22px; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ash); }

/* index de secteurs avec image qui suit le curseur */
.index-list { border-top: 1px solid var(--ink); position: relative; }
.index-row {
  display: grid; grid-template-columns: 90px 1fr auto; align-items: baseline; gap: 24px;
  padding: 3.2vh 0; border-bottom: 1px solid var(--hair);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(40px, 5.4vw, 86px); line-height: 1.04;
  transition: color .4s, padding .6s var(--ease-out);
}
.index-row .mono { font-style: normal; font-family: var(--sans); color: var(--ash); transform: translateY(-1.2em); }
.index-row .tag { font-style: normal; font-family: var(--sans); }
.index-list:hover .index-row { color: rgba(var(--ink-rgb), 0.28); }
.index-list .index-row:hover { color: var(--ink); padding-left: 18px; }
.hover-preview {
  position: fixed; left: 0; top: 0; width: 300px; aspect-ratio: 4 / 5; z-index: 60;
  pointer-events: none; overflow: hidden; border-radius: var(--radius);
  opacity: 0; transform: translate(-50%, -50%) scale(.8);
  transition: opacity .35s var(--ease-out), transform .5s var(--ease-out);
}
.hover-preview.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hover-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.hover-preview img.on { opacity: 1; }

/* blocs secteur */
.sector { display: grid; grid-template-columns: 1.05fr 1fr; gap: 6vw; padding: 14vh 0; border-top: 1px solid var(--hair); align-items: start; }
.sector.flip .sector-media { order: 2; }
.sector h2 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--t-h2); line-height: 1.04; margin: 18px 0 28px; }
.sector .facts { margin-top: 34px; display: grid; gap: 14px; }
.sector .facts div { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 15px; }
.sector .facts .mono { color: var(--ash); padding-top: 3px; }

/* texte qui s'encre au défilement (sans épinglage) */
.ink-text { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 4.6vw, 72px); line-height: 1.14; letter-spacing: -0.015em; max-width: 16em; }
.ink-text .fc { color: var(--ink-faint); transition: color .3s linear; }
.ink-text .fc.on { color: var(--ink); }
.sec.dark .ink-text .fc { color: rgba(var(--bone-rgb), 0.18); }
.sec.dark .ink-text .fc.on { color: var(--bone); }
.ink-text em { font-style: italic; }

/* modalités / étapes partenaires */
.steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 40px); counter-reset: st; }
.steps-row li { border-top: 1px solid var(--ink); padding-top: 20px; }
.steps-row .n { font-family: var(--serif); font-size: 64px; font-weight: 300; line-height: 1; color: var(--ink-faint); display: block; margin-bottom: 18px; }
.steps-row h3 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 30px; margin-bottom: 10px; }
.steps-row p { font-size: 15px; line-height: 1.6; color: rgba(var(--ink-rgb), 0.8); }

/* placeholder photo à fournir */
.ph {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  background: repeating-linear-gradient(135deg, rgba(var(--ink-rgb), .035) 0 1px, transparent 1px 14px), #EAE5DC;
  border: 1px dashed rgba(var(--ink-rgb), .25); border-radius: var(--radius);
  padding: 22px; color: var(--ash); height: 100%;
}
.ph strong { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; color: var(--ink); }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 7vw; }
.coord { display: grid; gap: 30px; }
.coord .mono { color: var(--ash); display: block; margin-bottom: 8px; }
.coord p, .coord a { font-family: var(--serif); font-size: 24px; line-height: 1.35; font-weight: 400; }
.coord a:hover { color: var(--bronze); }
.coord p.mono, .coord .mono { font-family: var(--sans); font-size: 11px; line-height: 1.5; }
.qr-row { display: flex; gap: 22px; margin-top: 6px; }
.qr-row figure { width: 116px; }
.qr-row img { width: 100%; border-radius: var(--radius); mix-blend-mode: multiply; }
.qr-row figcaption { margin-top: 8px; text-align: center; }
.form { display: grid; gap: 34px; }
.field { display: grid; gap: 10px; }
.field label { color: var(--ash); }
.field input, .field select, .field textarea {
  font: inherit; font-family: var(--serif); font-size: 24px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid rgba(var(--ink-rgb), .3);
  padding: 8px 0 12px; outline: none; border-radius: 0;
  transition: border-color .4s;
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--bronze); }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 14px) 52%, calc(100% - 8px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.btn-send { font-family: var(--serif); font-style: italic; font-size: 30px; display: inline-flex; gap: 14px; align-items: center; }
.btn-send:hover { color: var(--bronze); }

.closing { padding: 22vh 0; text-align: center; }
.closing .ink-text { margin: 0 auto; max-width: 14em; }
.next-page { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding: 12vh 0; border-top: 1px solid var(--ink); }
.next-page a.big { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(48px, 7vw, 120px); line-height: 1; display: inline-flex; align-items: baseline; gap: 24px; transition: color .4s; }
.next-page a.big:hover { color: var(--bronze); }

/* ═══════════ 8. FOOTER ═══════════ */
.footer { position: relative; z-index: 2; background: var(--bone); padding: 18vh var(--gutter) 40px; text-align: center; overflow: hidden; }
.footer-kicker { margin-bottom: 26px; }
.footer-mail { display: inline-block; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--t-heading); letter-spacing: -0.02em; position: relative; }
.footer-mail-text { position: relative; }
.footer-mail-text::after { content: ''; position: absolute; left: 0; bottom: 2px; width: 100%; height: 1px; background: var(--bronze); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease-inout); }
.footer-mail:hover .footer-mail-text::after { transform: scaleX(1); transform-origin: left; }
.footer-reassurance { margin-top: 22px; }
.footer-reassurance a { border-bottom: 1px solid var(--hair); }
.footer-name { margin-top: 8vh; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(80px, 16vw, 300px); letter-spacing: -0.03em; line-height: 1.02; white-space: nowrap; }
.footer-name .ch { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 0.04em; margin: 0 -0.04em; }
.footer-name .chi { display: inline-block; transform: translateY(108%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 30ms); }
.footer-name.in-view .chi { transform: translateY(0); }
.footer-cols {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 30px;
  margin-top: 8vh; padding-top: 26px; border-top: 1px solid var(--ink); text-align: left;
}
.footer-cols .mono { color: var(--ash); display: block; margin-bottom: 14px; }
.footer-cols li, .footer-cols p { font-size: 14px; line-height: 1.9; }
.footer-cols a:hover { color: var(--bronze); }
.footer-logo { width: 150px; margin-bottom: 18px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: 50px; padding-top: 18px; border-top: 1px solid var(--hair); text-align: left; color: var(--ash); }

/* ═══════════ 9. RESPONSIVE ═══════════ */
@media (max-width: 1180px) {
  .dock-nav { display: none; }
}
@media (max-width: 900px) {
  :root {
    --gutter: 20px;
    --t-heading: clamp(30px, 8vw, 48px);
    --t-h2: clamp(32px, 8.4vw, 46px);
  }
  body { font-size: 15px; }
  .dock { top: 10px; left: 10px; right: 10px; height: 56px; padding: 0 6px 0 14px; }
  .dock-wordmark { font-size: 14px; }
  .dock-cta { padding: 11px 13px; font-size: 10px; }
  .loader-rule { width: 96px; }
  .loader-wordmark { font-size: 30px; }

  .menu { grid-template-columns: 1fr; }
  .menu-visual { display: none; }
  .menu-main { padding: 14vh var(--gutter) 5vh; }

  /* hero */
  .hero-title { font-size: clamp(30px, 8.6vw, 46px); }
  .hero-kicker { font-size: 9.5px; line-height: 1.6; margin-bottom: 20px; white-space: normal; padding: 0 var(--gutter); }
  .fl { width: calc(var(--w) * 0.52); }
  .floaters { overflow: hidden; }
  .floaters .fl:nth-child(1) { top: 23%; }
  .floaters .fl:nth-child(6) { top: 68%; }
  .floaters .fl:nth-child(7) { top: 59%; }
  .spot-intro { white-space: normal; font-size: clamp(28px, 8vw, 42px); line-height: 1.1; padding: 0 var(--gutter); }

  .fill-text { font-size: clamp(24px, 6.6vw, 34px); width: auto; padding: 0 var(--gutter); }
  .fill-kicker { top: 12vh; white-space: nowrap; }
  .coll-grid { grid-template-columns: 1fr 1fr !important; }
  .card-title { font-size: 18px; }
  .card figcaption .mono { font-size: 9px; letter-spacing: .12em; }
  .mw { font-size: clamp(64px, 19vw, 110px); }
  .motto-kicker { font-size: 9.5px; }

  .k-head, .k-note { grid-template-columns: 1fr; gap: 26px; margin-bottom: 7vh; }
  .k-grid { grid-template-columns: 1fr 1fr; gap: 36px 18px; }
  .k-row { grid-template-columns: 1fr 28px; gap: 8px 14px; }
  .k-row .mono { grid-column: 1 / -1; }
  .k-row p { grid-column: 1 / -1; }
  .k-row .arr { grid-row: 2; grid-column: 2; }

  .pstep h3 { font-size: clamp(36px, 10vw, 52px); }
  .pstep p { font-size: 15px; max-width: none; }
  .psteps { left: var(--gutter); right: var(--gutter); width: auto; top: 44%; }
  .bignum { top: 11vh; bottom: auto; transform: none; font-size: min(30vh, 48vw); }
  .steps-cta { width: max-content; max-width: calc(100% - 2 * var(--gutter)); font-size: clamp(22px, 6vw, 30px); }
  .steps-cta a { white-space: nowrap; }

  .q-text { font-size: clamp(24px, 6.6vw, 34px); }
  .q-glyph { font-size: clamp(70px, 18vw, 110px); }
  .q-sign-row { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 16px; }
  .q-ctx { flex: none; }

  .final-text { max-width: none; }
  .footer-mail { font-size: clamp(28px, 8.6vw, 46px); }
  .footer-name { font-size: clamp(64px, 22vw, 120px); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }

  .page-hero h1 { font-size: clamp(40px, 11vw, 64px); }
  .page-hero .scroll-cue { display: none; }
  .split, .pillar, .sector, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .split-sticky { position: static; }
  .pillar.flip .pillar-media, .sector.flip .sector-media { order: 0; }
  .triad-item { grid-template-columns: 1fr; gap: 6px; }
  .steps-row { grid-template-columns: 1fr 1fr; gap: 34px 18px; }
  .index-row { grid-template-columns: 44px 1fr; font-size: clamp(34px, 9vw, 52px); }
  .index-row .tag { display: none; }
  .hover-preview { display: none; }
  .sec { padding: 11vh 0; }
  .next-page { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  :root { --gutter: 18px; }
  .dock-cta { display: none; }
  .k-grid, .steps-row { grid-template-columns: 1fr; }
  .card-title .arr { display: none; }
  .floaters .fl:nth-child(1) { top: 12%; }
  .floaters .fl:nth-child(7) { top: 66%; }
  .proto-badge { display: none; }
}

/* ═══════════ 10. MOUVEMENT RÉDUIT (mode statique du moteur) ═══════════ */
body.static .scene { height: auto !important; }
body.static .scene .pin { height: auto; overflow: visible; }
body.static .s-hero .pin { min-height: 92vh; padding: 16vh 0 8vh; }
body.static .fl, body.static .fl img { clip-path: none; transform: none; transition: none; }
body.static .floaters { z-index: 0; }
body.static .hero-copy { position: relative; inset: auto; min-height: 56vh; z-index: 5; padding: 0 var(--gutter); }
body.static .hero-line2 { flex-wrap: wrap; white-space: normal; padding: 0 var(--gutter); }
body.static .grow { width: 1.6em; height: 1em; margin: 0 0.18em; }
body.static .grow img { width: 100%; height: 100%; position: static; transform: none; object-fit: cover; }
body.static .spot { position: relative; inset: auto; height: 92vh; overflow: hidden; }
body.static .spot-intro { top: 50%; transform: translateY(-50%); }
body.static .spot-intro span { opacity: 1; transform: none; }
body.static .s-fill .pin { padding: 14vh 0; }
body.static .fill-kicker { position: static; transform: none; text-align: center; margin-bottom: 30px; }
body.static .s-fill .pin { flex-direction: column; }
body.static .fill-text .fc { color: var(--ink); }
body.static .collection { margin-top: 0; padding-bottom: 16vh; }
body.static .col { margin-top: 0 !important; }
body.static .s-motto .pin { padding: 12vh var(--gutter); }
body.static .motto-kicker { position: static; transform: none; margin-bottom: 26px; }
body.static .motto-track { position: static; transform: none !important; flex-direction: column; align-items: flex-start; gap: 12px; white-space: normal; }
body.static .mw { opacity: 1 !important; font-size: clamp(56px, 13vw, 140px); }
body.static .mw .sc { transform: none !important; }
body.static .motto-hint { display: none; }
body.static .night-line { position: relative; inset: auto; height: 46vh; }
body.static .night-line .nw { opacity: 1; }
body.static .psteps { position: static; width: auto; padding: 20px var(--gutter) 6vh; }
body.static .pstep { position: static; opacity: 1 !important; transform: none !important; padding: 26px 0; border-top: 1px solid var(--ink-faint); }
body.static .steps-cta { position: static; opacity: 1 !important; transform: none !important; text-align: center; padding-bottom: 8vh; }
body.static .wipe, body.static .bignum { display: none; }
body.static .s-quote .pin { padding: 12vh var(--gutter); }
body.static .q-glyph, body.static .q-text, body.static .q-name, body.static .q-ctx, body.static .q-link { opacity: 1; }
body.static .q-rule { transform: scaleX(1); }
body.static .s-final .pin { min-height: 60vh; padding: 14vh 0; }
body.static .fs { color: var(--ink); }
body.static .trail { display: none; }
body.static .footer-name .chi { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  html.js .reveal { opacity: 1; transform: none; }
  html.js .rise > span { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   11. HOME v2 — SÉQUENCE IMMERSIVE (SPEC_Home_Immersive_v1.1 §7)
   État A (île) → transition au scroll → état B (cinq lieux).
   Par défaut (sans JS) : île puis scène maîtresse + liste de liens.
   html.js : calques + zones cliquables ; .is-layered : épinglage ≥ 768 px.
   ═══════════════════════════════════════════════════════════ */
:root { --ease-calm: cubic-bezier(0.4, 0, 0.2, 1); --dur-calm: 450ms; }

.immersive { position: relative; background: var(--bone); }
.immersive__pin { position: relative; }

/* (la séquence île → scène est en section 12 : « journey ») */

/* ─── S2 · MANIFESTE — encrage lettre à lettre + ovale bronze (repris de la Home v1) ───
   Par défaut : texte entier, ovale tracé. .is-armed (JS, mouvement autorisé) : l'encre suit le scroll. */
.manifesto { position: relative; background: var(--ink); color: var(--bone); overflow-x: clip; }
.manifesto__pin { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3vh var(--gutter) 14vh; text-align: center; }   /* hauteur du contenu : peu de vide sous la photo des lieux */
.manifesto__kicker { color: rgba(var(--bone-rgb), 0.55); margin-bottom: 5vh; }
.manifesto__text { font-family: var(--serif); font-weight: 300; font-size: min(88px, calc((100vw - 2 * var(--gutter)) / 11));   /* ligne la plus longue ≈ 9,3 em */ line-height: 1.12; letter-spacing: -0.02em; }
.manifesto__line { display: block; white-space: nowrap; }   /* retours à la ligne voulus : après « complete », « built. », « begins » */
.manifesto__text em { font-style: italic; }
.manifesto__text .fw { white-space: nowrap; }
.manifesto__boxed { position: relative; white-space: nowrap; }
.manifesto__oval { position: absolute; inset: -0.16em -0.36em -0.08em; width: calc(100% + 0.72em); height: calc(100% + 0.24em); overflow: visible; pointer-events: none; }
.manifesto__oval path { fill: none; stroke: var(--bronze); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.manifesto.is-armed .fc { color: rgba(var(--bone-rgb), 0.16); transition: color .25s linear; }
.manifesto.is-armed .fc.on { color: var(--bone); }
/* ─── S3 · THREE DOORS (wireframe Home 03) ─── */
.doors__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10vh clamp(24px, 4vw, 72px); }   /* 03 se place sous 01 */
.door { border-top: 1px solid var(--ink); padding-top: 24px; display: flex; flex-direction: column; }
.door h3 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(34px, 3.4vw, 54px); line-height: 1.04; margin: 22px 0 22px; max-width: 9em; }
.door p:not(.mono) { font-size: 16px; line-height: 1.7; color: rgba(var(--ink-rgb), 0.82); max-width: 32em; margin-bottom: 26px; }
.door .link { align-self: flex-start; margin-top: auto; }
.link.gold::after { background: var(--bronze); transform: scaleX(0); transition: transform 200ms var(--ease-calm); }
.link.gold:hover::after { transform: scaleX(1); }

/* ─── pied de page CONTENT v2 ─── */
.footer-slogan { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3.2vw, 50px); line-height: 1.15; }
.footer-slogan em { font-style: italic; }
.footer-lockup { font-size: 22px; margin-bottom: 18px; }

/* marqueur de texte manquant (visible en développement, CLAUDE.md) */
.todo { font-family: var(--sans); font-style: normal; font-size: 0.82em; color: #A23A3A; outline: 1px dashed rgba(162, 58, 58, 0.6); padding: 0 4px; }

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

/* ═══════════════════════════════════════════════════════════
   12. HOME — « JOURNEY » : vue drone → scène des cinq lieux → plongée
   Démo provisoire (photos réelles) ; les vidéos Higgsfield prendront le
   relais sans changer le HTML (data-approach / place.video).
   ═══════════════════════════════════════════════════════════ */
.journey { position: relative; background: var(--ink); }
.journey__pin { position: relative; }

/* ─── état A : vue drone ─── */
.journey__island { position: relative; height: 100vh; height: 100svh; overflow: hidden; color: #fff; background: var(--teal); }
.journey__island picture, .journey__island img, .journey__approach { position: absolute; inset: 0; width: 100%; height: 100%; }
.journey__island img, .journey__approach { object-fit: cover; transform-origin: 66% 52%; will-change: transform; }
.journey__approach { opacity: 0; }
.journey__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--teal-rgb), 0.6) 0%, rgba(var(--teal-rgb), 0.3) 38%, rgba(var(--teal-rgb), 0) 66%); }
.journey__intro { position: absolute; left: 0; right: 0; top: 0; padding: calc(74px + 10vh) var(--gutter) 0; text-align: center; will-change: transform, opacity; }
.journey__eyebrow { margin-bottom: 26px; opacity: 0.92; }
.journey__manifesto { font-family: var(--serif); font-weight: 300; font-size: clamp(38px, 5.4vw, 86px); line-height: 1.05; letter-spacing: -0.015em; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.28); }
.journey__manifesto em { font-style: italic; }
.h1-seo { font-family: var(--sans); font-weight: 400; font-size: clamp(13px, 1.05vw, 16px); line-height: 1.55; letter-spacing: 0.03em; max-width: 30em; margin: 30px auto 0; opacity: 0.94; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.journey__cue { position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; opacity: 0.9; }
.journey__cue::after { content: ''; width: 1px; height: 46px; background: rgba(255, 255, 255, 0.8); animation: cue 2.2s var(--ease-inout) infinite; transform-origin: top; }

/* ─── état B : la scène des cinq lieux ─── */
.journey__scene { position: relative; background: var(--ink); color: var(--bone); padding: 10vh 0 9vh; }
.journey__viewport { position: relative; }
.journey__stage { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; }
.journey__parallax { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 40%; }
.journey__scene-img, .journey__scene-img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.journey__scene-img img { object-fit: cover; }
.journey__places { position: absolute; inset: 0; }
.journey__hit { position: absolute; display: block; color: var(--bone); }
.journey__hit:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
/* projecteur : un halo doux autour du lieu survolé, le reste s'assombrit (seule l'opacité est animée) */
.journey__dim {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity var(--dur-calm) var(--ease-calm);
  background: radial-gradient(ellipse var(--rw, 12%) var(--rh, 24%) at var(--cx, 50%) var(--cy, 50%),
    rgba(10, 16, 16, 0) 0%, rgba(10, 16, 16, 0) 58%, rgba(10, 16, 16, 0.62) 100%);
}
.journey__dim.is-on { opacity: 1; }
/* repères des lieux en bord de scène : alignés vers l'intérieur pour ne jamais être coupés */
.journey__hit[data-place="residence"] .journey__marker { left: 8px; transform: translate(0, -14px); align-items: flex-start; text-align: left; }
.journey__hit[data-place="hospitality"] .journey__marker { left: auto; right: 8px; transform: translate(0, -14px); align-items: flex-end; text-align: right; }
.journey__marker { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -14px); display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: none; }
.journey__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bone); box-shadow: 0 0 0 6px rgba(var(--bone-rgb), 0.3), 0 4px 18px rgba(0, 0, 0, 0.45); transition: transform var(--dur-calm) var(--ease-calm); }
.journey__hit.is-active .journey__dot { transform: scale(1.3); }
.journey__tag { background: rgba(var(--ink-rgb), 0.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 6px 10px; border-radius: 2px; white-space: nowrap; }
.journey__intent { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.6vw, 26px); line-height: 1.2; color: #fff; white-space: nowrap; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7); opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease-calm), transform 300ms var(--ease-calm); }
.journey__enter { opacity: 0; transition: opacity 300ms var(--ease-calm); border-bottom: 1px solid var(--bronze); padding-bottom: 3px; }
.journey__hit.is-active .journey__intent, .journey__hit.is-active .journey__enter { opacity: 1; transform: none; }
/* galerie : le logo Art Samui remplace le point */
.journey__logo { display: flex; align-items: center; gap: 9px; background: var(--white); color: var(--ink); padding: 7px 12px 7px 8px; border-radius: 2px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38); }
.journey__logo .m { height: 26px; width: auto; }
.journey__logo .w { height: 13px; width: auto; }
/* la question est posée sur la photo, au milieu de la plage (≈ 77 % de la hauteur de la scène) ; cadre fixe : elle ne défile pas avec le panorama mobile */
.journey__frame { position: relative; }
.journey__question { position: absolute; left: 0; right: 0; top: 77%; transform: translateY(-50%); z-index: 4; margin: 0; padding: 0 var(--gutter); pointer-events: none; text-align: center; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.9vw, 50px); line-height: 1.15; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 28px rgba(0, 0, 0, 0.5); }
.journey__question em { font-style: italic; }
.journey__hint { display: none; }
.journey__credit { position: absolute; right: 12px; bottom: 10px; color: rgba(255, 255, 255, 0.75); font-size: 9px; letter-spacing: 0.14em; pointer-events: none; }

/* ─── épinglage (≥ 768 px, JS, mouvement autorisé) ─── */
.journey.is-layered .journey__pin { height: 100vh; height: 100svh; overflow: hidden; }
.journey.is-layered .journey__island, .journey.is-layered .journey__scene { position: absolute; inset: 0; }
.journey.is-layered .journey__island { z-index: 2; }
.journey.is-layered.scene-on .journey__island { visibility: hidden; }
.journey.is-layered .journey__scene { z-index: 1; padding: 74px 0 0; display: flex; flex-direction: column; justify-content: center; }
.journey.is-layered .journey__stage { width: min(100vw, calc((100svh - 120px) * 16 / 9)); }
.journey.is-layered:not(.scene-ready) .journey__places { pointer-events: none; }

/* ─── mobile : panorama à points d'arrêt ─── */
@media (max-width: 767px) {
  .journey__intro { padding-top: calc(66px + 9vh); }
  .journey__manifesto { font-size: clamp(34px, 10vw, 48px); }
  .journey__scene { padding: 7vh 0 8vh; }
  .js .journey__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .js .journey__viewport::-webkit-scrollbar { display: none; }
  .js .journey__stage { height: 62svh; width: auto; max-width: none; }
  .js .journey__hit { scroll-snap-align: center; }
  .journey__hint { display: block; text-align: center; color: rgba(var(--bone-rgb), 0.6); margin-top: 14px; }
}

/* ─── plongée (au clic) : calque plein écran ─── */
.dive { position: fixed; inset: 0; z-index: 180; background: var(--ink); visibility: hidden; pointer-events: none; }
.dive.is-on { visibility: visible; pointer-events: auto; }
.dive__layer, .dive__video { position: absolute; inset: 0; overflow: hidden; opacity: 0; }
.dive__layer img, .dive__video { width: 100%; height: 100%; object-fit: cover; will-change: transform, opacity; }
.dive__scene { opacity: 1; overflow: visible; }
.dive__scene img { position: absolute; max-width: none; }
.dive__caption { position: absolute; left: var(--gutter); bottom: 10vh; color: #fff; opacity: 0; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55); }
.dive__caption .mono { display: block; margin-bottom: 12px; }
.dive__caption em { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 4.6vw, 72px); line-height: 1.05; }

/* sans JavaScript : la scène s'affiche avec ses liens, sans plongée */
html:not(.js) .journey__intent, html:not(.js) .journey__enter { opacity: 1; transform: none; }
html:not(.js) .dive { display: none; }

/* ─── pages de lieux : l'intérieur de la plongée devient l'image d'ouverture ─── */
.page-hero.place .page-hero-media { inset: 0; }
.page-hero.place .page-hero-media img { transform: none; transition: none; }
.page-hero.place::after { background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.5) 100%); transition: opacity 1.2s var(--ease-calm) .25s; }
html.from-dive .page-hero.place::after { opacity: 0; }
html.from-dive body.is-ready .page-hero.place::after { opacity: 1; }
html.from-dive .veil { opacity: 0 !important; transition: none !important; }
.page-hero.place .page-hero-copy .intention { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(44px, 6.4vw, 104px); line-height: 1.02; letter-spacing: -0.02em; max-width: 13em; }
.page-hero.place h1 { font-family: var(--sans); font-style: normal; font-weight: 400; font-size: clamp(14px, 1.2vw, 18px); letter-spacing: 0.02em; line-height: 1.5; margin-top: 22px; max-width: 34em; }
.place-caption { position: absolute; right: var(--gutter); bottom: 4vh; z-index: 2; color: rgba(255, 255, 255, 0.85); }
.place-links { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 28px; }
/* ═══════════════════════════════════════════════════════════
   13. PAGES v2 (CONTENT v2) — Approach, Services, Contact, Partners, Journal
   Hero : phrase d'intention en serif italique, H1 de référencement en dessous (gabarit des pages de lieux).
   ═══════════════════════════════════════════════════════════ */
.page-hero .page-hero-copy .intention { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(44px, 6.4vw, 104px); line-height: 1.02; letter-spacing: -0.02em; max-width: 13em; }
.page-hero h1.seo { font-family: var(--sans); font-style: normal; font-weight: 400; font-size: clamp(14px, 1.2vw, 18px); letter-spacing: 0.02em; line-height: 1.5; margin-top: 22px; max-width: 34em; }
.hero-lede { font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.3; font-weight: 300; margin-top: 18px; max-width: 22em; }
.inline { border-bottom: 1px solid currentColor; }
.inline:hover { color: var(--bronze); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-done { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.25; max-width: 18em; }

/* Journal : liste sobre des textes longs */
.journal-list { border-top: 1px solid var(--ink); }
.journal-item { display: grid; grid-template-columns: 220px 1fr auto; gap: 14px 40px; align-items: baseline; padding: 5vh 0; border-bottom: 1px solid var(--hair); transition: padding .6s var(--ease-out); }
.journal-item:hover { padding-left: 18px; }
.journal-title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(34px, 4vw, 64px); line-height: 1.04; letter-spacing: -0.015em; }
.journal-sub { grid-column: 2; font-family: var(--serif); font-size: clamp(20px, 1.7vw, 26px); line-height: 1.35; color: var(--ash); }
.journal-item .link { grid-column: 3; grid-row: 1; }

/* Article : colonne de lecture */
.article-hero .page-hero-copy { max-width: 1100px; }
.page-hero h1.article-title { font-size: clamp(46px, 6vw, 96px); max-width: 12em; }
.article-sub { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 34px); line-height: 1.3; font-weight: 300; color: var(--ash); margin-top: 22px; max-width: 22em; }
.article { max-width: 760px; padding-bottom: 14vh; }
.article p { font-size: 18px; line-height: 1.8; color: rgba(var(--ink-rgb), 0.88); }
.article p + p { margin-top: 1.25em; }
.article h2 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; margin: 2.2em 0 0.8em; }
.article-rule { border: 0; height: 1px; background: var(--bronze); width: 64px; margin: 3.2em 0; }
.article-sig { display: grid; gap: 6px; margin-top: 4em; padding-top: 24px; border-top: 1px solid var(--hair); }
.article-sig .serif { font-family: var(--serif); font-style: italic; font-size: 28px; }

@media (max-width: 900px) {
  .journal-item { grid-template-columns: 1fr; }
  .journal-sub, .journal-item .link { grid-column: 1; grid-row: auto; }
  .article p { font-size: 17px; }
  .spec { flex-direction: column; gap: 6px; }
  .spec li + li::before { display: none; }
}
/* ═══════════════════════════════════════════════════════════
   14. RETOURS DU 04/10 — titres de section au bleu du logo, CTA partenaires, lieux empilés
   ═══════════════════════════════════════════════════════════ */
:root { --logo-blue: #54A4CA; }   /* bleu du mot « Art Samui » du logo (échantillonné sur logo-wordmark.png) */
.k-num, .kicker, .kicker.ash, .footer-cols .mono,
.sec.dark .k-num, .sec.dark .kicker { color: var(--logo-blue); }
.place-links.stack { flex-direction: column; align-items: flex-start; gap: 20px; }
.partner-cta { margin-top: 12vh; padding: 9vh clamp(24px, 5vw, 80px); background: var(--bone); text-align: center; }
.partner-cta__title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(38px, 4.4vw, 68px); line-height: 1.04; letter-spacing: -0.015em; margin: 20px 0 18px; }
.partner-cta__text { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 27px); line-height: 1.4; color: rgba(var(--ink-rgb), 0.82); max-width: 30em; margin: 0 auto 34px; }
/* ═══════════════════════════════════════════════════════════
   15. PIED DE PAGE — slogan « lecture » et rythme resserré (retours du 04-05/10)
   Les lettres s'allument l'une après l'autre, comme une lecture : chaque lettre passe
   brièvement par le bronze (la « tête de lecture ») puis se pose à l'encre. Une seule fois.
   Sans JS ou mouvement réduit : texte entier, directement.
   ═══════════════════════════════════════════════════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.footer-slogan { display: flex; flex-direction: column; align-items: center; }
.slogan__l1, .slogan__l2 { display: block; }
.slogan__l2 { margin-top: 0.12em; }
html.js .footer-slogan .sc { color: rgba(var(--ink-rgb), 0.13); }
html.js .footer-slogan.is-on .sc { animation: slogan-read .95s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--k) * 34ms); }   /* 05/10 : 34 ms par lettre (≈ 3,4 s le slogan) ; garder STEP et SLOGAN_DUR de site.js identiques */
@keyframes slogan-read {
  0%   { color: rgba(var(--ink-rgb), 0.13); text-shadow: none; }
  30%  { color: var(--bronze); text-shadow: 0 0 14px rgba(168, 135, 90, 0.45); }
  100% { color: var(--ink); text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .footer-slogan .sc, html.js .footer-slogan.is-on .sc { animation: none; color: var(--ink); }
}
/* « Art Samui » : environ 3 fois le slogan (au lieu de 5 à 6), écarts resserrés jusqu'aux colonnes */
.footer { padding-top: 15vh; }
.footer-name { margin-top: 5vh; font-size: clamp(60px, 9.5vw, 168px); }
.footer-cols { margin-top: 6vh; }
@media (max-width: 900px) {
  .footer-name { font-size: clamp(54px, 17vw, 96px); }
}/* chaque ligne du slogan tient sur une ligne, même sur téléphone (ligne la plus longue ≈ 13,6 em) */
.footer-slogan { font-size: min(clamp(28px, 3.2vw, 50px), calc((100vw - 2 * var(--gutter)) / 14.2)); }
.slogan__l1, .slogan__l2 { white-space: nowrap; }
/* ═══════════════════════════════════════════════════════════
   16. RETOURS DU 05/10
   ═══════════════════════════════════════════════════════════ */
/* « ligne bleue » à l'arrivée : le menu fermé (teal) n'est plus seulement rogné, il est invisible
   (aucun calque ne peut plus apparaître pendant le chargement) ; il le reste jusqu'à la fin de sa fermeture */
.menu { visibility: hidden; transition: clip-path .9s var(--ease-inout), visibility 0s linear .9s; }
body.menu-open .menu { visibility: visible; transition: clip-path .9s var(--ease-inout), visibility 0s; }
/* l'aperçu flou de l'île remplit la section avant la photo */
.journey__island { background-size: cover; background-position: center; }

/* scène des lieux (07/10) : les repères battent en bleu, un lieu après l'autre — Residences, Developments, Wellness,
   Hospitality — et la vague finit sur Art Samui ; puis une pause, et la vague recommence (cycle de 6 s) */
@keyframes journey-beat {
  0%   { background: var(--bone); box-shadow: 0 0 0 0 rgba(84, 164, 202, 0.75), 0 4px 18px rgba(0, 0, 0, 0.45); }
  6%   { background: var(--logo-blue); box-shadow: 0 0 0 7px rgba(84, 164, 202, 0.45), 0 4px 18px rgba(0, 0, 0, 0.45); }
  16%  { background: var(--bone); box-shadow: 0 0 0 22px rgba(84, 164, 202, 0), 0 4px 18px rgba(0, 0, 0, 0.45); }
  100% { background: var(--bone); box-shadow: 0 0 0 6px rgba(var(--bone-rgb), 0.3), 0 4px 18px rgba(0, 0, 0, 0.45); }
}
@keyframes journey-beat-logo {
  0%   { box-shadow: 0 0 0 0 rgba(84, 164, 202, 0.8); }
  8%   { box-shadow: 0 0 0 12px rgba(84, 164, 202, 0.4); }
  20%  { box-shadow: 0 0 0 34px rgba(84, 164, 202, 0); }
  100% { box-shadow: 0 0 0 34px rgba(84, 164, 202, 0); }
}
.journey__dot { animation: journey-beat 6s var(--ease-out) infinite both; }
.journey__hit[data-place="residence"] .journey__dot { animation-delay: 0s; }
.journey__hit[data-place="development"] .journey__dot { animation-delay: .8s; }
.journey__hit[data-place="wellness"] .journey__dot { animation-delay: 1.6s; }
.journey__hit[data-place="hospitality"] .journey__dot { animation-delay: 2.4s; }
.journey__logo { position: relative; isolation: isolate; }   /* l'anneau reste derrière le symbole mais devant la photo */
.journey__logo::before {
  content: ''; position: absolute; left: 50%; top: 0; z-index: -1; border-radius: 50%;
  width: min(5.65vw, calc((100svh - 146px) * 0.1004)); height: min(5.65vw, calc((100svh - 146px) * 0.1004)); transform: translateX(-50%);
  animation: journey-beat-logo 6s var(--ease-out) 3.2s infinite both;   /* Art Samui clôt la vague */
}
@media (max-width: 767px) { .js .journey__logo::before { width: 6.2svh; height: 6.2svh; } }
@media (prefers-reduced-motion: reduce) { .journey__dot, .journey__logo::before { animation: none; } }/* fin des pages de lieux : phrase puis « Open the conversation », vides resserrés jusqu'à « Art Samui » */
.closing.ending { padding: 16vh 0 4vh; }
.ending-cta { margin-top: 7vh; }
.closing.contact-lead { padding: 14vh 0 2vh; }
.sec.contact-sec { padding: 10vh 0 6vh; }
main:has(> .tight-end) + .footer { padding-top: 8vh; }
.footer-name { margin-top: 3vh; }

/* H1 de référencement sur une seule ligne (ordinateur) : « …every artwork we place » ne passe plus à la ligne */
.page-hero h1.seo, .page-hero.place h1 { max-width: 60em; }

/* Approach · les trois opérations : au survol, la carte se soulève, un filet bronze se trace, le numéro passe au bronze */
.k-grid .k-item { position: relative; }
.k-grid .k-item::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-inout); }
html.js .k-grid .k-item.reveal { transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out), translate .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s; }
.k-grid .k-item h3 { transition: transform .6s var(--ease-out); }
.k-grid .k-item > .mono { transition: color .4s; }
.k-grid .k-item:hover { translate: 0 -8px; }
.k-grid .k-item:hover::before { transform: scaleX(1); }
.k-grid .k-item:hover h3 { transform: translateX(8px); }
.k-grid .k-item:hover > .mono, .sec.dark .k-grid .k-item:hover > .mono { color: var(--bronze); }

/* « Next — Services » : nom de la page suivante moins gros */
.next-page a.big { font-size: clamp(34px, 3.8vw, 62px); gap: 16px; }

/* bouton Contact du dock : bleu du logo, or (bronze) au survol */
.dock-cta { background: var(--logo-blue); color: #fff; transition: background .35s var(--ease-out), color .35s; }
.dock-cta:hover { background: var(--bronze); color: #fff; }
/* ═══ 17. « Art Samui » prend la suite du slogan (toutes les pages) ═══
   Séquence pilotée par site.js (Web Animations) : sans attente après « experience. », une lueur bronze
   forte fait un aller-retour rapide, puis la lecture reprend au rythme du slogan et pose l'encre.
   Ici : l'état « fantôme » d'attente (remplace la montée des lettres), et l'état final quand le script ne peut pas animer. */
html.js .footer-name .ch { overflow: visible; }
html.js .footer-name .chi { transform: none; transition: none; color: rgba(var(--ink-rgb), 0.1); }
html.js .footer-name.is-read .chi { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  html.js .footer-name .chi { color: var(--ink); }
}
/* la lumière finit sur le point du « i » de « Samui » (positionné par site.js) */
.footer-name { position: relative; }
.name-glint {
  position: absolute; border-radius: 50%; pointer-events: none; opacity: 0;
  /* lumière blanche, sans teinte dorée (05/10) : le point devient un éclat de lumière */
  background: radial-gradient(circle, #fff 0%, #fff 50%, rgba(255, 255, 255, 0.8) 62%, rgba(255, 255, 255, 0) 76%);
  box-shadow: 0 0 30px 14px #fff, 0 0 90px 38px rgba(255, 255, 255, 0.75);
}
/* ═══════════════════════════════════════════════════════════
   18. RETOURS DU 05/10 (2)
   ═══════════════════════════════════════════════════════════ */
:root { --sea: #70AE92; }   /* la mer en bas de la scène des lieux (relevée sur la photo) */

/* Home · premier écran : le bas du texte se pose au milieu de la photo */
.journey__intro { top: auto; bottom: 50%; padding: 0 var(--gutter); }

/* Home · la scène se prolonge par la mer : bande sous la photo et manifeste à la couleur de l'eau, textes à l'encre */
.journey__scene { background: linear-gradient(var(--ink) 0 50%, var(--sea) 50% 100%); }
.journey__hint { color: rgba(var(--ink-rgb), 0.7); }
.manifesto { background: var(--sea); color: var(--ink); }
.manifesto__kicker, .manifesto__kicker.kicker { color: rgba(var(--ink-rgb), 0.72); }
.manifesto.is-armed .fc { color: rgba(var(--ink-rgb), 0.2); }
.manifesto.is-armed .fc.on { color: var(--ink); }
.manifesto__oval path { stroke: #fff; stroke-width: 1.7; }   /* l'ovale devient écume */

/* fins de page : une phrase de clôture plus large tient sur sa ligne (« Guests never experience the brief. ») */
.closing .ink-text { max-width: 17em; }

/* Approach · The method : au bleu du logo (comme le bouton Contact), textes à l'encre, survol en blanc */
.sec.blue { background: var(--logo-blue); color: var(--ink); }
.sec.blue .k-num, .sec.blue .kicker { color: var(--ink); }
.sec.blue .k-num::after { background: var(--ink); }
.sec.blue .k-item { border-top-color: rgba(var(--ink-rgb), 0.45); }
.sec.blue .k-item > .mono { color: rgba(var(--ink-rgb), 0.62); }
.sec.blue .k-item p { color: rgba(var(--ink-rgb), 0.85); }
.sec.blue .k-grid .k-item::before { background: #fff; }
.sec.blue .k-grid .k-item:hover > .mono { color: #fff; }

/* Residences · la toile de l'image d'ouverture est cliquable : cadre de lumière, titre et « Collection 2026 » */
.art-spot { position: absolute; z-index: 3; display: block; border-radius: 1px; outline: none; transition: box-shadow .6s var(--ease-out), background-color .6s var(--ease-out); }
.art-spot:hover, .art-spot:focus-visible { background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 8px rgba(255, 255, 255, 0.12), 0 26px 60px rgba(0, 0, 0, 0.32); }
.art-spot-label {
  position: absolute; left: 0; top: calc(100% + 16px); display: flex; flex-direction: column; gap: 6px; white-space: nowrap;
  padding: 12px 16px 13px; color: #fff; background: rgba(var(--ink-rgb), 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: var(--radius);
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); pointer-events: none;
}
.art-spot-title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(22px, 1.8vw, 30px); line-height: 1.1; }
.art-spot .arr { display: inline-block; transition: transform .5s var(--ease-out); }
.art-spot:hover .art-spot-label, .art-spot:focus-visible .art-spot-label { opacity: 1; transform: none; }
.art-spot:hover .arr { transform: translateX(5px); }
@media (hover: none) { .art-spot-label { opacity: 1; transform: none; } }
.art-spot.label-right .art-spot-label { left: auto; right: 0; }   /* 09/10 : toile au bord droit de l'image, l'étiquette ne sort pas du cadre */

/* Services · By kind of place : quatre colonnes (image cadrée sur la toile, titre, intention) ; au survol, l'image s'approche, le titre se souligne d'or, les autres colonnes s'effacent */
.kinds-sec { padding: 14vh 0; }
.kinds { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 32px); margin-top: 3vh; }
.kind { display: flex; flex-direction: column; color: var(--ink); }
.kind > * { transition: opacity .5s var(--ease-out); }
.kind-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--ink-faint); }
.kind-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.4s var(--ease-out); }
.kind-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.25)); opacity: 0; transition: opacity .6s var(--ease-out); }
.kind-title { position: relative; align-self: flex-start; margin-top: 22px; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(26px, 2.1vw, 34px); line-height: 1.1; }
.kind-title::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-inout); }
.kind-intent { margin-top: 12px; font-size: 15px; line-height: 1.55; color: rgba(var(--ink-rgb), 0.72); }
.kind-go { margin-top: 18px; color: var(--ash); transition: color .4s; }
.kind-go .arr { display: inline-block; transition: transform .5s var(--ease-out); }
.kind:hover .kind-media img { transform: scale(1.08); }
.kind:hover .kind-media::after { opacity: 1; }
.kind:hover .kind-title::after { transform: scaleX(1); }
.kind:hover .kind-go { color: var(--bronze); }
.kind:hover .kind-go .arr { transform: translateX(6px); }
.kinds:hover .kind:not(:hover) > * { opacity: 0.45; }
@media (max-width: 1000px) { .kinds { grid-template-columns: 1fr 1fr; row-gap: 52px; } }
@media (max-width: 520px) { .kinds { grid-template-columns: 1fr; } }
/* ═══ 19. RETOURS DU 07/10 ═══ */
/* phrase d'ouverture longue (Hospitality) : un cran plus petite pour ne pas couvrir l'image */
.page-hero .page-hero-copy .intention.long { font-size: clamp(34px, 4.2vw, 66px); line-height: 1.06; max-width: 19em; }
/* appel à l'action dans l'image d'ouverture */
.page-hero .hero-cta { margin-top: 30px; }
.page-hero .hero-cta .link { color: #fff; }
.page-hero .hero-cta .link::after { background: currentColor; }
/* appels longs en fin de page : retour à la ligne propre sur téléphone */
.ending-cta .link { max-width: 100%; white-space: normal; text-align: center; line-height: 1.6; }
/* ═══ 20. APPELS À L'ACTION (validé le 07/10, tout le site) — texte bleu + repère qui bat comme un cœur ═══
   Le point bleu bat comme un cœur (45/min), avec l'anneau des repères de la carte ; au survol il s'accélère (120/min),
   le texte s'éclaire d'une lueur, se souligne et la flèche avance. */
.cta-pulse { display: inline-flex; align-items: center; gap: 14px; max-width: 100%; color: var(--logo-blue); text-align: left; line-height: 1.5; transition: color .4s var(--ease-out), text-shadow .5s var(--ease-out); }
.cta-pulse { font-size: 13px; gap: 16px; }   /* 07/10 : un peu plus grand */
/* le point bat comme un cœur (double pulsation) : 45 battements/min au repos, 100 au survol ; lueur adoucie (07/10) */
.cta-pulse__dot { flex: none; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #B9E1F4 0%, #7DC3E5 42%, var(--logo-blue) 80%); box-shadow: 0 0 0 0 rgba(120, 196, 232, 0.55), 0 0 5px rgba(120, 196, 232, 0.3); animation: cta-heartbeat 1.333s ease-in-out infinite; }
@keyframes cta-heartbeat {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(120, 196, 232, 0.55),  0 0 5px 0 rgba(120, 196, 232, 0.3); }
  14%  { transform: scale(1.26); box-shadow: 0 0 0 6px rgba(120, 196, 232, 0.28), 0 0 11px 2px rgba(130, 202, 236, 0.5); }   /* boum */
  28%  { transform: scale(1);    box-shadow: 0 0 0 10px rgba(120, 196, 232, 0.1), 0 0 6px 1px rgba(120, 196, 232, 0.32); }
  42%  { transform: scale(1.14); box-shadow: 0 0 0 13px rgba(120, 196, 232, 0.04), 0 0 9px 2px rgba(130, 202, 236, 0.42); }   /* boum */
  70%  { transform: scale(1);    box-shadow: 0 0 0 16px rgba(120, 196, 232, 0),   0 0 5px 0 rgba(120, 196, 232, 0.28); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(120, 196, 232, 0),      0 0 5px 0 rgba(120, 196, 232, 0.3); }
}.cta-pulse__label { position: relative; }
.cta-pulse__label::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-inout); }
.cta-pulse .arr { display: inline-block; transition: transform .5s var(--ease-out); }
.cta-pulse:hover, .cta-pulse:focus-visible { text-shadow: 0 0 18px rgba(84, 164, 202, 0.55); }
/* sur une photo : bleu un peu plus clair (même teinte) et ombre douce, pour rester lisible sur les zones claires */
.page-hero .cta-pulse { color: #8ACDEB; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.5); }
.page-hero .cta-pulse:hover, .page-hero .cta-pulse:focus-visible { color: #B3E0F5; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 16px rgba(120, 196, 232, 0.6); }
.cta-pulse:hover .cta-pulse__dot, .cta-pulse:focus-visible .cta-pulse__dot { animation-duration: .5s; }   /* le cœur s'accélère : 120 battements/min */
.cta-pulse:hover .cta-pulse__label::after, .cta-pulse:focus-visible .cta-pulse__label::after { transform: scaleX(1); }
.cta-pulse:hover .arr, .cta-pulse:focus-visible .arr { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) { .cta-pulse__dot { animation: none; } }
/* sur fond sombre (teal) : même bleu, lisible ; centré dans les blocs centrés */
.sec.dark .cta-pulse:hover, .sec.dark .cta-pulse:focus-visible { color: #8ACDEB; }
.partner-cta .cta-pulse, .ending-cta .cta-pulse, [style*="text-align:center"] .cta-pulse { text-align: left; }

/* Home · carte des lieux : le repère de la galerie sans fond (07/10) — symbole au-dessus, « Art Samui » en texte blanc,
   même couleur et même ombre que la question « Every place calls for its own art… » */
.journey__logo { flex-direction: column; align-items: center; gap: 7px; background: transparent; box-shadow: none; padding: 0; }
.journey__logo .m { height: 32px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55)); }
.journey__logo .w { height: auto; font-family: var(--sans); font-weight: 500; font-size: 16px; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 28px rgba(0, 0, 0, 0.5); }
/* Home · carte : Art Samui au sommet de l'arc formé par les lieux, de Residences à Hospitality (07/10) */
.journey__hit[data-place="gallery"] .journey__marker { top: 21%; left: 28%; }   /* un peu à gauche (07/10) */
/* symbole de la galerie à la taille du pavillon rond juste en dessous (≈ 5,65 % de la largeur de la scène), quel que soit l'écran */
.journey__logo .m { height: min(5.65vw, calc((100svh - 120px) * 0.1004)); }
@media (max-width: 767px) { .js .journey__logo .m { height: 6.2svh; } }
/* Home · carte : le point toujours centré au-dessus du nom du lieu, y compris pour Residences et Hospitality
   (dont le repère reste aligné sur le bord de la scène pour ne jamais être coupé) */
.journey__head { display: flex; flex-direction: column; align-items: center; gap: 9px; }
/* ═══ 21. SECTIONS EN PARALLAXE (07/10 — tout le site, moteur dans site.js) ═══
   Chaque section recouvre la précédente : empilement croissant (posé par site.js), fond opaque, ombre douce en haut.
   :where() garde la spécificité à zéro : les sections qui ont déjà un fond (mer, blanc, teal, bleu, photo) le gardent. */
:where(.px-sec) { background-color: var(--bone); }
.px-sec { position: relative; overflow: clip; }
.px-cover { box-shadow: 0 -28px 60px rgba(28, 27, 25, 0.14); }


/* téléphone : moins de vide entre la photo des lieux (et son indication) et le manifeste */
@media (max-width: 767px) { .journey__scene { padding-bottom: 2vh; } }

/* Home · scène des lieux (07/10, v3) : la photo commence juste sous le menu (les lieux descendent) et sa taille suit la
   hauteur de l'écran, pour laisser voir en bas « — Art Samui · Koh Samui », le titre de la section suivante, pendant la
   pause. Autour : la couleur de la mer (jamais de noir), qui se prolonge dans le manifeste. */
.journey.is-layered .journey__scene { padding: 82px 0 0; justify-content: flex-start; overflow: hidden; background: var(--sea); }
.journey.is-layered .journey__stage { width: min(100%, calc((100svh - 82px - 64px) * 16 / 9)); }
.journey__next { position: relative; z-index: 1; margin: 20px 0 0; text-align: center; color: rgba(var(--ink-rgb), 0.72); }
.journey__scene .journey__next { display: block; }
@media (max-width: 767px) { .journey__next { margin-top: 18px; } }
/* symbole de la galerie : toujours la taille du pavillon rond (5,65 % de la largeur de la photo) */
.journey__logo .m { height: min(5.65vw, calc((100svh - 146px) * 0.1004)); }
@media (max-width: 767px) { .js .journey__logo .m { height: 6.2svh; } }
/* la question suit la taille de la photo (2,9 % de sa largeur) */
.journey.is-layered .journey__question { font-size: clamp(22px, min(2.9vw, calc((100svh - 146px) * 0.0516)), 50px); }

/* ═══ 22. RETOURS DU 07/10 (3) ═══ */
/* Home · ouverture : le texte (« Art in Koh Samui », la phrase, le H1) centré verticalement sous le menu */
.journey__intro { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; padding: 74px var(--gutter) 0; }

/* Approach · The method : couleur de la mer (comme sous la plage de la Home), textes à l'encre */
.sec.sea { background: var(--sea); color: var(--ink); }
.sec.sea .k-num, .sec.sea .kicker { color: var(--ink); }
.sec.sea .k-num::after { background: var(--ink); }
.sec.sea .k-item { border-top-color: rgba(var(--ink-rgb), 0.45); }
.sec.sea .k-item > .mono { color: rgba(var(--ink-rgb), 0.62); }
.sec.sea .k-item p { color: rgba(var(--ink-rgb), 0.85); }
.sec.sea .k-grid .k-item::before { background: #fff; }

/* colonnes (Approach · méthode, Home · how we work, Partners · how we work together) : au survol la colonne se soulève,
   un filet se trace au-dessus, le titre glisse et TOUT le texte de la colonne change de couleur (blanc sur la mer, or sur fond clair) */
.door, .steps-row li { position: relative; }
.door::before, .steps-row li::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-inout); }
html.js .door.reveal, html.js .steps-row li.reveal { transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out), translate .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s; }
.k-grid .k-item *, .door *, .steps-row li * { transition: color .45s var(--ease-out), transform .6s var(--ease-out); }
.door:hover, .steps-row li:hover { translate: 0 -8px; }
.door:hover::before, .steps-row li:hover::before { transform: scaleX(1); }
.door:hover h3, .steps-row li:hover h3 { transform: translateX(8px); }
.sec.sea .k-grid .k-item:hover, .sec.sea .k-grid .k-item:hover *, .sec.sea .k-grid .k-item:hover > .mono { color: #fff; }
.door:hover, .door:hover *, .steps-row li:hover, .steps-row li:hover * { color: var(--bronze); }

/* Home · how we work : les trois colonnes sur une même ligne */
.doors__grid { grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 3vw, 56px); }
@media (max-width: 900px) { .doors__grid { grid-template-columns: 1fr; gap: 56px; } }

/* Partners · la phrase de principe en citation */
.prose blockquote.quote { margin: 0 0 1.4em; padding-left: 1.1em; border-left: 1px solid var(--bronze); font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(26px, 2.3vw, 36px); line-height: 1.3; color: var(--ink); }
.prose blockquote.quote p { font: inherit; color: inherit; max-width: 34em; }

/* pied de page : présentation Art Samui (07/10) */
.footer-cols .footer-about { max-width: 26em; line-height: 1.7; }
.door:hover p:not(.mono), .door:hover .link, .steps-row li:hover p, .steps-row li:hover .n { color: var(--bronze); }   /* tout le texte de la colonne, paragraphe compris */

/* ═══ 23. 08/10 — bannière photo « Become a partner » (Partners) ═══ */
.partner-cta--photo { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: #1C1B19 url(../photos/partner-banner.jpg) center / cover no-repeat; }
.partner-cta--photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(20, 18, 16, 0.5), rgba(20, 18, 16, 0.64)); }
.partner-cta--photo .kicker { color: #9AD3EE; }
.partner-cta--photo .partner-cta__title { color: #fff; }
.partner-cta--photo .partner-cta__text { color: rgba(255, 255, 255, 0.9); }
.partner-cta--photo .cta-pulse { color: #8ACDEB; font-weight: 600; }
.partner-cta--photo .cta-pulse:hover, .partner-cta--photo .cta-pulse:focus-visible { color: #BFE6F7; }
/* ═══ 24. 08/10 — scène des lieux pleine largeur (comme les images bord à bord de skylineart.com) ═══
   La photo commence sous le menu et occupe toute la largeur ; l'écran étant moins haut qu'elle, elle glisse vers le haut
   pendant la pause (journey.js) pour amener la plage, la question puis « — Art Samui · Koh Samui ». */
.journey.is-layered .journey__stage { width: min(100%, 225svh); }
.journey.is-layered .journey__question { font-size: clamp(22px, min(2.9vw, 6.5svh), 50px); }
.journey__logo .m, .journey__logo::before { height: min(5.65vw, 12.71svh); }
.journey__logo::before { width: min(5.65vw, 12.71svh); }
.journey__frame, .journey__next { will-change: transform; }

/* ═══ 25. 08/10 — défilement adouci Lenis, tout le site (moteur dans site.js ; règles de lenis.css 1.3.11, actives seulement si html.lenis) ═══ */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ═══ 26. 08/10 — page How it works (rubrique About us) : cinq phases, puis quatre services illustrés ═══ */
@media (min-width: 1181px) { .steps-row.five { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 901px) and (max-width: 1180px) { .steps-row.five { grid-template-columns: repeat(3, 1fr); row-gap: 48px; } }
.steps-row p.step-time { font-size: 11px; line-height: 1.5; color: var(--ash); margin: -2px 0 10px; }
.steps-row li:hover .step-time { color: var(--bronze); }
.fmt .figure { margin-bottom: 22px; }
.fmt .figure figcaption { color: rgba(var(--ink-rgb), 0.62); min-height: 4.5em; }   /* trois lignes : numéros et titres alignés d'une colonne à l'autre */
.fmt .spec { flex-direction: column; gap: 4px; margin: 0 0 16px; }
.sec.sea .fmt .spec, .sec.sea .fmt .spec li { color: rgba(var(--ink-rgb), 0.78); }
@media (max-width: 480px) { .fmt .figure figcaption { min-height: 0; } }
.fmt .fmt-go { margin: auto 0 0; padding-top: 6px; }
.fmt-todo { margin-top: 8vh; }

/* ═══ 27. 08/10 — pages de lieux v4.1, Spatial storytelling, Artists, article « villas look alike » ═══ */
.sec-title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(30px, 3.1vw, 50px); line-height: 1.08; letter-spacing: -0.01em; margin-top: 10px; max-width: 12em; }
.prose .key { font-family: var(--serif); font-size: clamp(21px, 1.8vw, 26px); line-height: 1.4; color: var(--ink); padding-left: 1em; border-left: 1px solid var(--bronze); margin: 1.6em 0; }
/* intentions : deux rangées d'étiquettes */
.intents { margin: 1.6em 0; }
.intents .mono { color: var(--ash); margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.2; padding: 8px 18px; border: 1px solid rgba(var(--ink-rgb), 0.3); border-radius: 999px; transition: border-color .4s, color .4s; }
.chips li:hover { border-color: var(--bronze); color: var(--bronze); }
.intents + .intents .chips li { font-size: 17px; border-style: dashed; }
/* moments lus, séquences */
.read-list { margin: 1.4em 0; border-top: 1px solid var(--hair); }
.read-list li { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 17px; line-height: 1.55; }
.read-list li .mono { color: var(--ash); padding-top: 4px; }
.read-list.sequence li span:last-child { font-family: var(--serif); font-size: 21px; line-height: 1.4; }
.duo { display: grid; gap: 26px; margin: 1.6em 0; }
.duo > div { padding-top: 18px; border-top: 1px solid var(--hair); }
.duo h3 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(24px, 2vw, 30px); margin-bottom: 8px; }
.duo .link { margin-top: 12px; display: inline-flex; }
/* l'œuvre de l'image, « Informed by », appel */
.art-thumb { max-width: 340px; margin: 0 0 1.6em; }
.art-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 18px 40px rgba(28, 27, 25, 0.16); }
.art-thumb figcaption { margin-top: 12px; color: var(--ash); }
.cta-hook { font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.35; max-width: 24em; margin: 0 auto 4vh; }
.cta-note { margin-top: 2.4vh; color: var(--ash); }
.cta-more { margin-top: 3vh; }
/* Artists */
.art-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 40px); margin-top: 6vh; }
.art-square img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.art-square figcaption { margin-top: 12px; color: var(--ash); }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); }
.way { border-top: 1px solid rgba(var(--ink-rgb), 0.45); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.way h3 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--t-h3); line-height: 1.1; }
.way p { font-size: 16px; line-height: 1.65; }
.way .link { margin-top: auto; align-self: flex-start; }
.ways-note { margin: 7vh 0 3vh; max-width: 46em; font-size: 17px; line-height: 1.7; }
.send-label { color: var(--ash); margin-top: 1.6em; }
.send-list { margin: 10px 0 2em; padding-left: 1.1em; list-style: disc; }
.send-list li { font-size: 16px; line-height: 1.7; }
.msg-row { display: flex; flex-wrap: wrap; gap: 26px 60px; margin: 2em 0 1.4em; }
.msg { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.msg-qr { width: 120px; border-radius: var(--radius); mix-blend-mode: multiply; }
@media (hover: none), (max-width: 900px) { .msg-qr { display: none; } }   /* le QR ne sert que sur ordinateur */
.cta-pulse.is-todo { opacity: .45; cursor: not-allowed; }
.msg-note { font-size: 15px; color: rgba(var(--ink-rgb), 0.72); }
.faq-group { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(24px, 2vw, 30px); margin: 0 0 10px; scroll-margin-top: 110px; }
.faq-group ~ .faq-group { margin-top: 6vh; }
.faq-item { border-top: 1px solid var(--hair); }
.faq-item:last-of-type { border-bottom: 1px solid var(--hair); }
.faq-item summary { cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative; font-size: 17px; line-height: 1.45; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font-size: 20px; color: var(--ash); transition: transform .4s var(--ease-out); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--bronze); }
.faq-item p { padding: 0 0 20px; font-size: 16px; line-height: 1.7; color: rgba(var(--ink-rgb), 0.8); max-width: 40em; }
#contact, #partners, #faq-direction, #faq-collections { scroll-margin-top: 100px; }
.credits { padding: 4vh 0 8vh; text-align: center; }
.credits .mono { color: var(--ash); margin-bottom: 8px; }
.form-artists { margin-top: 26px; }
@media (max-width: 900px) {
  .art-strip { grid-template-columns: 1fr 1fr; }
  .ways { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .art-strip { grid-template-columns: 1fr; } }
/* article : figures, paires d'images, liste, appel, FAQ */
.article .a-fig, .article .a-pair { margin: 3em 0; }
.article .a-fig { max-width: 460px; }
.article-hero .a-hero { margin: 5vh 0 4vh; }   /* 09/10 : première image de l'article, sous le titre */
.article-hero .a-hero img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.article .a-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.article .a-pair .a-legend { grid-column: 1 / -1; }
.a-img img { width: 100%; display: block; }
.a-img .mono { display: block; margin-top: 10px; color: var(--ash); }
.a-missing { aspect-ratio: 4 / 5; display: grid; place-items: center; padding: 20px; background: rgba(var(--ink-rgb), 0.05); border: 1px dashed rgba(var(--ink-rgb), 0.25); }
.a-legend { margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.4; color: rgba(var(--ink-rgb), 0.8); }
.article .a-list { margin: 1.2em 0 1.6em; border-top: 1px solid var(--hair); }
.article .a-list li { padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 18px; line-height: 1.6; }
.article .a-cta { margin-top: 2.4em; }
.article .a-note { margin-top: 1.2em; }
.article .a-end { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.35; margin: 1.4em 0; }
.article .faq-item p { font-size: 17px; }
@media (max-width: 767px) { .article .a-pair { grid-template-columns: 1fr; } }

/* ═══ 28. 09/10 — How it works (cartes sans légende ni numéro), Art Samui Gallery, vignettes du listing News ═══ */
.fmt .figure { margin-bottom: 20px; }
.fmt .media img { transform: none; will-change: auto; }   /* pas de zoom : le survol de la toile (carte 04) tombe juste */
.fmt .art-spot-title { font-size: 22px; }
.gallery-cta { margin-top: 2.4em; }
.journal-item.has-thumb { grid-template-columns: 180px 190px 1fr auto; }
.has-thumb .journal-thumb { grid-row: 1 / span 2; align-self: start; }
.has-thumb .journal-sub { grid-column: 3; }
.has-thumb .link { grid-column: 4; }
.journal-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); }
.journal-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.journal-item:hover .journal-thumb img { transform: scale(1.04); }
.journal-thumb.is-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #fff; border: 1px solid var(--hair); }
.journal-thumb.is-logo .lockup-mark { width: auto; height: 34%; object-fit: contain; }
.journal-thumb.is-logo .lockup-word { width: 62%; height: auto; object-fit: contain; }
.journal-item:hover .journal-thumb.is-logo img { transform: none; }
/* ═══ 29. 09/10 — sous-rubriques de Services : liste au survol dans le dock, ligne sous « Services » dans le menu plein écran ═══ */
.dock-drop { position: relative; display: flex; }
.dock-drop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 22px; }   /* pont : le survol ne se perd pas */
.dock-sub {
  position: absolute; top: calc(100% + 20px); left: 0; min-width: 240px; display: flex; flex-direction: column; padding: 10px 0;
  background: rgba(var(--bone-rgb), 0.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--ink-rgb), 0.08); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(28, 27, 25, 0.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .3s, transform .45s var(--ease-out), visibility 0s linear .3s;
}
.dock-drop:hover .dock-sub, .dock-drop:focus-within .dock-sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dock-sub a { padding: 10px 20px; color: var(--ink); white-space: nowrap; transition: color .3s, padding .4s var(--ease-out); }
.dock-sub a:hover, .dock-sub a:focus-visible { color: var(--bronze); padding-left: 26px; }
.menu-list .menu-sub { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 2px 0 12px 42px; }
.menu-list .menu-sub li { overflow: hidden; }
.menu-list .menu-sub a {
  display: inline-block; font-family: var(--sans); font-style: normal; font-weight: 400; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  line-height: 2; color: rgba(var(--bone-rgb), 0.72); transition-delay: .5s;
}
.menu-list .menu-sub a:hover { color: var(--bronze); }
.pillar { scroll-margin-top: 110px; }   /* arrivée depuis les sous-rubriques : le titre du service sous le dock */

/* ═══ 30. 09/10 — Home · Art Samui Method : titre, citation (trait bronze comme sur Partners), appel vers Approach ═══ */
.method-quote blockquote.quote { margin: 0; padding-left: 1.1em; border-left: 1px solid var(--bronze); font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 2.7vw, 44px); line-height: 1.3; color: var(--ink); }
.method-quote blockquote.quote p { font: inherit; color: inherit; max-width: 22em; }
.method-cta { margin-top: 6vh; padding-left: 1.1em; }

@media (max-width: 900px) {
  .journal-item.has-thumb { grid-template-columns: 1fr; }
  .has-thumb .journal-thumb { grid-row: auto; max-width: 360px; }
  .has-thumb .journal-sub, .has-thumb .link { grid-column: 1; grid-row: auto; }
}

/* ═══ 31. 09/10 — audit v2 : accessibilité, boutons pleins, pied de page, nouvelles pages ═══ */
/* E29 : même bleu, assombri pour les textes de moins de 14 px (contraste ≥ 4,5:1 sur --bone) ; le bleu du logo reste sur les filets, points et grands éléments */
:root { --logo-blue-text: #2F6F8F; }
.k-num, .kicker, .kicker.ash, .footer-cols .mono, .cta-pulse { color: var(--logo-blue-text); }
/* R3 : appels de fin de page en vrai bouton plein, le repère bat toujours */
.cta-pulse.is-solid { background: var(--logo-blue-text); color: #fff; padding: 15px 26px 15px 20px; border-radius: var(--radius); transition: background .35s var(--ease-out); }
.cta-pulse.is-solid:hover, .cta-pulse.is-solid:focus-visible { background: var(--bronze); color: #fff; text-shadow: none; }
.cta-pulse.is-solid .cta-pulse__dot { background: radial-gradient(circle at 38% 35%, #fff 0%, #E3F3FB 55%, #B9E1F4 95%); }
.ending-cta .cta-note { margin-top: 2.4vh; color: var(--ash); }
/* accueil : quatre services, bandeau Perspicism */
.doors__grid.four { grid-template-columns: repeat(4, 1fr); gap: 0 clamp(24px, 3vw, 48px); }
@media (max-width: 1100px) { .doors__grid.four { grid-template-columns: 1fr 1fr; gap: 56px clamp(24px, 3vw, 48px); } }
@media (max-width: 900px) { .doors__grid.four { grid-template-columns: 1fr; } }
.perspicism-band { text-align: center; padding: 14vh 0; }
.perspicism-band .band-text { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 38px); line-height: 1.35; font-weight: 300; max-width: 26em; margin: 0 auto 3.5vh; }
/* Architects / Interior designers, Curation, How it works */
.prose .you-we { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 2em 0; border-top: 1px solid var(--hair); }
.prose .you-we p { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 16px; line-height: 1.5; }
.prose .you-we p.mono { color: var(--ash); font-size: 11px; }
.titled-list { margin: 1.2em 0; border-top: 1px solid var(--hair); }
.titled-list li { padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 16px; line-height: 1.6; color: rgba(var(--ink-rgb), 0.86); }
.titled-list strong, .read-list.titled strong { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 21px; line-height: 1.3; color: var(--ink); margin-bottom: 4px; }
.prose .trade-band { margin-top: 2em; color: var(--ash); line-height: 2; }
.prose .mono.curator { color: var(--ash); margin-bottom: -0.6em; }
.how-intro { margin: 0 0 8vh; font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.35; max-width: 30em; }
.how-more { margin-top: 8vh; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: baseline; font-size: 17px; }
.art-strip.art-grid { grid-template-columns: repeat(5, 1fr); margin-top: 0; }
@media (max-width: 1100px) { .art-strip.art-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .art-strip.art-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .art-strip.art-grid { grid-template-columns: 1fr; } }
/* Privacy */
.policy h2 { font-size: clamp(26px, 2.4vw, 34px); }
.policy ul { list-style: disc; padding-left: 1.2em; margin: 1em 0; }
.policy li { font-size: 17px; line-height: 1.7; }
.policy-table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15px; line-height: 1.5; }
.policy-table th, .policy-table td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hair); }
.policy-table th { font-weight: 500; }
/* Artists et Contact : LINE en QR code seulement tant que l'identifiant manque (E27) ; message d'erreur d'envoi (E3) */
.msg-label { color: var(--ash); }
@media (hover: none), (max-width: 900px) { .msg-line { display: none; } }
.form-error { margin-top: 18px; color: #A23A3A; }
/* mobile : E33 étiquette d'œuvre masquée sous 480 px, E34 légende dans la marge, E35 pas de bande noire au-dessus de la scène */
@media (max-width: 480px) { .page-hero .art-spot-label { display: none; } }
@media (max-width: 767px) { .place-caption { left: var(--gutter); right: var(--gutter); text-align: right; } .journey__scene { background: var(--sea); } }

/* ═══ 32. 09/10 — rectifications de l'utilisateur ═══ */
/* titres de section en bleu : bleu du logo à peine assombri (contraste ≥ 3:1 sur --bone, seuil des grands textes) ;
   sur fond mer, teal ou bleu, les titres gardent l'encre ou le blanc pour rester lisibles */
:root { --title-blue: #4593BA; }
.k-title, .sec-title, .pillar h2, .article h2, .policy h2, .hl-blue { color: var(--title-blue); }
:is(.sec.sea, .sec.dark, .sec.blue) :is(.k-title, .sec-title) { color: inherit; }
.hl-blue { font-weight: inherit; }
/* sous-titres en gras (sections à sous-titres et sections en colonnes) */
.titled-list strong, .read-list.titled strong, .duo h3, .k-grid .k-item h3, .steps-row h3, .door h3, .triad-item h3, .way h3, .kind-title { font-weight: 600; }
/* citation sur toute la largeur (accueil : la règle ; Approach : l'intention) */
.quote.quote-wide { margin: 0; padding-left: 0.8em; border-left: 1px solid var(--bronze); font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(30px, 3.4vw, 54px); line-height: 1.25; color: var(--ink); }
.quote.quote-wide p { font: inherit; color: inherit; max-width: none; }
.method-quote .method-cta { padding-left: 0.8em; }
/* Artists · « Two ways to work together » : teinte de la mer sur la vue aérienne de l'île (#398975, 165°),
   éclaircie pour que le texte reste lisible (contraste de l'encre ≥ 4,5:1) */
:root { --turquoise: #44A28A; }
.sec.sea.turquoise { background: var(--turquoise); }