/* XANDERDELY V9 — étape 1 : tokens sémantiques, navigation, hero. Chargé après base.css (règles V7 encore utiles, extraites par tools/prune-css.js).
   Règle : le noir structure, l'ivoire éclaire le texte (jamais un fond), le bordeaux signe, le bronze enrichit.
   Un seul fond uni (--bg-deep) ; l'atmosphère vient des images, fondues sur leurs bords. */

:root {
  /* Palette officielle */
  --c-noir: #1D1A1C; --c-bordeaux: #6A1F2C; --c-brun: #5A3B2E; --c-bronze: #8F6B4D; --c-ivoire: #D6D0C6;

  /* Fonds */
  --bg: var(--c-noir);
  --bg-deep: #141113;            /* sol, puits, fondus d'image */
  --bg-raised: #221F21;          /* surfaces élevées */
  --bg-paper: #E9E4DB;           /* éditorial clair (ivoire éclairci, sections claires futures) */
  /* Textes */
  --text-on-dark: #EFEBE4;       /* 14.6:1 sur --bg */
  --text-on-dark-2: #D6D0C6;     /* 11.4:1 */
  --text-muted: #A69E94;         /* 6.6:1 */
  --text-on-paper: #1D1A1C;      /* 13.9:1 sur --bg-paper */
  --text-on-paper-2: #5A3B2E;    /* 8.1:1 sur --bg-paper */
  /* Lignes, accent, focus */
  --border: rgba(214, 208, 198, .12);
  --border-strong: rgba(214, 208, 198, .26);
  --accent: var(--c-bordeaux);   /* signature : rare */
  --accent-lit: #B0473F;         /* bordeaux éclairé : point « en cours », état actif */
  --bronze: var(--c-bronze);     /* filets, détails — jamais en dégradé doré */
  --focus: var(--c-ivoire);
  /* Boutons */
  --btn-primary-bg: var(--c-ivoire); --btn-primary-fg: var(--c-noir);
  --btn-glass-bg: rgba(29, 26, 28, .42); --btn-glass-fg: var(--text-on-dark);

  /* Mouvement : une seule famille */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-ui: 160ms; --t-reveal: 700ms; --t-scene: 1400ms; --stagger: 80ms;
}
:root { --ink: #EFEBE4; --ink-2: #D6D0C6; --ink-3: #A69E94; --paper-2: rgba(214, 208, 198, .07); --paper-line: rgba(214, 208, 198, .14); --bordeaux-ink: #C9675C; --copper: #C2A07F;
  }
/* Un seul fond hors image : --bg-deep, la couleur où se fond le bas du hero. Seuls les bords d'images (dragon) sont fondus dans ce fond. */
body { background: var(--bg-deep); }

/* ════ 1 · Hero — nuit. L'image ne change pas : le texte s'ancre en bas à gauche, le vide à droite devient le sujet. ════ */
.hero--v9 { min-height: min(calc(100svh - 72px), 960px); padding: calc(52px + 48px + var(--safe-t)) 0 clamp(40px, 7vh, 80px); justify-content: flex-end; background: var(--bg-deep); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 82% 55%; transform: translate3d(0, calc(var(--p, 0) * 5%), 0); }
.hero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 17, 19, .74) 0%, rgba(20, 17, 19, .4) 36%, rgba(20, 17, 19, 0) 58%),
              linear-gradient(180deg, rgba(20, 17, 19, .5) 0%, rgba(20, 17, 19, 0) 18%, rgba(20, 17, 19, 0) 66%, var(--bg-deep) 100%); }
.hero__body { display: grid; justify-items: start; }
.hero__sig { font-size: 11.5px; letter-spacing: .3em; color: var(--text-on-dark-2); margin-bottom: clamp(18px, 2.6vh, 28px); }
.hero__title { max-width: 13.5ch; font: 400 clamp(44px, 6vw, 96px)/.98 var(--serif); letter-spacing: -.018em; color: var(--text-on-dark); text-wrap: balance; }
.hero__lede { margin-top: clamp(18px, 2.6vh, 26px); max-width: 40ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--text-on-dark-2); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(26px, 3.8vh, 38px); }
/* CTA principal : une seule action pleine dans la page. Titre serif (la voix du site), compteur mono (ce qu'on va trouver),
   pastille-flèche sombre (la direction). Survol/focus : la flèche avance, la pastille s'allume du cuivre du soleil. Pression : 1 px. */
.cta { --e: cubic-bezier(.2, .7, .2, 1); display: inline-grid; grid-template-columns: auto auto auto; align-items: center; min-height: 62px; padding: 0 9px 0 24px; border-radius: 16px;
  color: #1D1A1C; background: linear-gradient(180deg, #F2EEE8 0%, #DCD5CB 100%); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(214, 208, 198, .55), 0 18px 40px -22px rgba(0, 0, 0, .95);
  transition: transform 160ms var(--e), box-shadow 240ms var(--e), background 240ms var(--e); }
.cta__t { font: 400 clamp(21px, 1.6vw, 24px)/1 var(--serif); letter-spacing: -.005em; padding-top: 2px; }
.cta__m { margin-left: 18px; padding-left: 16px; border-left: 1px solid rgba(29, 26, 28, .2); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #5E554D; white-space: nowrap; }
.cta__a { display: grid; place-items: center; width: 44px; height: 44px; margin-left: 18px; border-radius: 11px; color: #EFEBE4; background: #1D1A1C;
  transition: background 240ms var(--e), box-shadow 240ms var(--e); }
.cta__a .i { width: 18px; height: 18px; transition: transform 240ms var(--e); }
.cta:hover { background: linear-gradient(180deg, #F7F4EF 0%, #E3DDD4 100%); }
.cta:hover .cta__a, .cta:focus-visible .cta__a { background: #2A1C1A; box-shadow: inset 0 0 0 1px rgba(240, 140, 90, .55), 0 0 14px -2px rgba(232, 128, 80, .55); }
.cta:hover .cta__a .i, .cta:focus-visible .cta__a .i { transform: translate(2px, -2px); }
.cta:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 1px rgba(214, 208, 198, .55), 0 10px 24px -18px rgba(0, 0, 0, .95); }
.cta:focus-visible { outline: 2px solid #E9C9A8; outline-offset: 4px; }

/* « Me trouver » : service, pas spectacle — mots + icônes fines, contraste inférieur au CTA, cibles de 44 px. */
.hub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin-top: clamp(16px, 2.4vh, 22px); }
.hub__k { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-on-dark-2); opacity: .8; }
.hub ul { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 0 0 -10px; padding: 0; list-style: none; }
.hub a { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 10px; font-size: 14.5px; color: var(--text-on-dark);
  text-decoration: none; transition: color 160ms, background-color 160ms; }
.hub a .i { width: 17px; height: 17px; opacity: .78; transition: opacity 160ms; }
.hub a span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size 240ms cubic-bezier(.2, .7, .2, 1); }
.hub a:hover, .hub a:focus-visible { background: rgba(239, 235, 228, .06); }
.hub a:hover .i, .hub a:focus-visible .i { opacity: 1; }
.hub a:hover span, .hub a:focus-visible span { background-size: 100% 1px; }
.hub a:focus-visible { outline: 2px solid #E9C9A8; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cta, .cta__a, .cta__a .i, .hub a span { transition: none; } .cta:active { transform: none; } .cta:hover .cta__a .i, .cta:focus-visible .cta__a .i { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero--v9 [style*="--d"] { animation: rise var(--t-scene) var(--ease-out) both; animation-delay: calc(var(--d) * 110ms + 120ms); }
}
@keyframes rise { from { transform: translateY(14px); } } /* translation seule : le texte du hero est lisible dès t = 0 (audit master D3) */

/* ════ 2 · Bande — six films choisis. Une rangée posée (pas de défilement automatique) ; un seul aperçu muet à la fois,
   comme un projecteur qui passe d'une affiche à l'autre. Clic = lecteur avec le son (player.css). ════ */
.band { position: relative; background: var(--bg-deep); padding: clamp(12px, 2vw, 28px) 0 clamp(64px, 8vw, 112px); }
.band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.band__h { margin: 0; font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.band__hint { margin: 8px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--text-on-dark-2); }
.band__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); margin-top: 0; margin-bottom: 0; list-style: none; align-items: start; }
.band__it { min-width: 0; }
.band__it:nth-child(even) { margin-top: clamp(14px, 2.6vw, 44px); }
.band__play { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: #0f0d0e;
  box-shadow: 0 0 0 1px rgba(214, 208, 198, .1), 0 30px 60px -36px rgba(0, 0, 0, .95); transition: transform var(--t-reveal) var(--ease-out), box-shadow var(--t-reveal) var(--ease-out); }
.band__play .clip { transition: filter 600ms var(--ease-out), transform 1200ms var(--ease-out); filter: brightness(.8); }
.band__it.is-on .clip, .band__play:hover .clip, .band__play:focus-visible .clip { filter: none; }
.band__play:hover, .band__play:focus-visible { box-shadow: 0 0 0 1px rgba(214, 208, 198, .34), 0 36px 70px -36px rgba(0, 0, 0, 1); }
.band__play:hover .clip, .band__play:focus-visible .clip { transform: scale(1.025); }
.band__play:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.band__glyph { position: absolute; left: 10px; bottom: 10px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(239, 235, 228, .92); color: #1D1A1C;
  opacity: 0; transform: translateY(6px) scale(.92); transition: opacity var(--t-ui) var(--ease-out), transform 360ms var(--ease-out); }
.band__glyph .i { width: 15px; height: 15px; margin-left: 2px; fill: currentColor; stroke: none; }
.band__play:hover .band__glyph, .band__play:focus-visible .band__glyph { opacity: 1; transform: none; }
.band__cap { display: grid; gap: 4px; margin: 12px 0 0; }
.band__meta { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.band__b { font: 400 clamp(17px, 1.35vw, 21px)/1.15 var(--serif); color: var(--text-on-dark); }
.band__it.is-on .band__meta { color: var(--copper); }
.band__bar { display: flex; justify-content: flex-end; margin-top: clamp(22px, 3vw, 36px); }
.band__all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; color: var(--text-on-dark); border-bottom: 1px solid rgba(239, 235, 228, .3); transition: border-color var(--t-ui), gap var(--t-ui); }
.band__all:hover { border-color: var(--text-on-dark); gap: 12px; }
.band__all .i { width: 15px; height: 15px; }
.band__pause { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; background: transparent; color: var(--text-on-dark-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.band__pause:hover { color: var(--text-on-dark); box-shadow: inset 0 0 0 1px var(--text-on-dark-2); }
.band__pi { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.band__pause[aria-pressed="true"] .band__pi { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; margin-left: 3px; }
.clip { display: block; width: 100%; height: 100%; object-fit: cover; background: #0f0d0e; }
@media (prefers-reduced-motion: reduce) { .band__pause { display: none; } .band__play .clip { transition: none; } }

/* ════ 5 · Parcours — l'ombre des fondations, puis l'aube ════ */
.journey { --jp: 1; position: relative; padding-bottom: 0; isolation: isolate; border-top: 0; overflow: clip;
  /* La nuit tombe : le fond s'approfondit au cœur des origines, puis remonte vers le contact. Une seule grande transition dans la page. */
  background: linear-gradient(180deg, var(--bg-deep) 0%, #0c0a0b 22%, #0c0a0b 78%, var(--bg-deep) 100%); }
/* Le dragon : de l'environnement, pas du contenu. Il naît du noir, reste à gauche sous la grande année, et s'éteint avant les textes. */
.journey__deep { position: absolute; z-index: -1; left: 0; top: clamp(120px, 14vw, 220px); bottom: clamp(80px, 10vw, 160px); width: min(60vw, 980px); pointer-events: none;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%), linear-gradient(90deg, #000 0%, #000 42%, transparent 96%);
  -webkit-mask-composite: source-in; mask: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%), linear-gradient(90deg, #000 0%, #000 42%, transparent 96%); mask-composite: intersect; }
.journey__deep picture, .journey__deep img { display: block; width: 100%; height: 100%; }
.journey__deep img { object-fit: cover; object-position: 58% 50%; opacity: calc(.18 + .74 * var(--jp)); filter: saturate(.92); transform: translate3d(0, calc((1 - var(--jp)) * 5%), 0); will-change: opacity, transform; }
.journey__head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.journey__run { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 5vw, 80px); }
.journey__rail { position: relative; }
.journey__year { display: none; }
.journey__steps { display: grid; gap: clamp(40px, 6vh, 64px); }
.jc { display: grid; gap: 10px; align-content: start; }
.jc__y { margin: 0 0 4px; font: 400 clamp(56px, 7vw, 96px)/.9 var(--serif); letter-spacing: -.03em; color: var(--text-on-dark); }
.jc__pre { font-style: italic; font-size: .5em; letter-spacing: 0; color: var(--text-on-dark-2); }
.jc__s { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.jc__age { color: var(--text-on-dark-2); letter-spacing: .12em; }
.jc__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.jc--now .jc__s { color: var(--text-on-dark); } .jc--now .jc__dot { background: var(--accent-lit); box-shadow: 0 0 0 4px rgba(176, 71, 63, .22); }
.jc--next .jc__s { color: #C2A07F; } .jc--next .jc__dot { background: none; box-shadow: inset 0 0 0 1.4px #C2A07F; }
.jc__h { margin: 0; font: 400 clamp(25px, 2.3vw, 34px)/1.1 var(--serif); color: var(--text-on-dark); }
.jc__p { margin: 0; max-width: 52ch; font-size: 16.5px; line-height: 1.6; color: var(--text-on-dark-2); text-wrap: pretty; }
.jc__list { margin: 6px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.jc__list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.jc__li { color: var(--text-on-dark); font-size: 15.5px; }
.jc__note { font-size: 11.5px; color: var(--text-muted); }
.jc__link { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--text-on-dark); font-size: 13.5px; }
.jc__link .i { width: 14px; height: 14px; } .jc__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.jc__tags { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jc--next .jc__y { color: var(--copper); font-style: italic; font-size: .6em; }
.jc--next .jc__h { font-style: italic; }
.jc--next .jc__list { border-top-style: dashed; border-color: rgba(194, 160, 127, .35); }
.jc--next .jc__list li { border-bottom-style: dashed; border-color: rgba(194, 160, 127, .35); }
.jc--next .jc__li { color: var(--text-on-dark-2); }
.jc__more { margin: 4px 0 0; font: italic 400 19px/1.4 var(--serif); color: var(--text-muted); }
/* L'aube : le fond quitte la nuit après 2027, sans promesse — juste de la lumière qui monte vers le contact. */
/* Après 2027 : pas de jour blanc. Une braise cuivrée monte du bas et ouvre la lumière du contact. */
.journey__dawn { height: clamp(40px, 6vw, 96px); }
.journey__end { margin: 0 auto; padding-top: 0; padding-bottom: clamp(24px, 3vw, 40px); font: italic 400 clamp(22px, 2.2vw, 30px)/1.2 var(--serif); color: var(--text-on-dark-2); }

/* Desktop + JS : une seule grande année tient la gauche et change avec la lecture. */
@media (min-width: 900px) {
  .js .journey__year { display: block; position: sticky; top: 18vh; margin: 0; font: 400 clamp(120px, 15vw, 220px)/.82 var(--serif); letter-spacing: -.04em; color: var(--text-on-dark); font-variant-numeric: lining-nums; transition: color 600ms var(--ease-out); }
  .js .journey__pre { display: block; font: italic 400 .26em/1.4 var(--serif); letter-spacing: 0; color: var(--text-on-dark-2); min-height: 1.4em; }
  .js .journey__year [data-num] { display: inline-block; transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
  .js .journey__year.is-swap [data-num] { opacity: 0; transform: translateY(.08em); }
  /* « Ensuite » : un horizon, pas une date. Italique cuivré, moitié de l'échelle des années (il ne doit pas dominer l'écran). */
  .js .journey__year.is-next [data-num] { font-size: .48em; font-style: italic; color: var(--copper); letter-spacing: -.01em; }
  .js .jc__y { display: none; }
  .js .jc { opacity: .62; transition: opacity 500ms var(--ease-out); }
  .js .jc.is-on { opacity: 1; }
  /* Règle de montage : un filet bronze relie les étapes ; un repère glisse sur l'étape lue. */
  .journey__steps { position: relative; padding-left: clamp(24px, 2.4vw, 36px); border-left: 1px solid rgba(143, 107, 77, .32); }
  .jc { position: relative; }
  .jc::before { content: ""; position: absolute; left: calc(-1 * clamp(24px, 2.4vw, 36px) - 1px); top: .2em; width: 1px; height: 0; background: var(--copper); transition: height 600ms var(--ease-out); }
  .jc.is-on::before { height: 2.6em; }
  .journey__steps { gap: clamp(48px, 8vh, 80px); padding-bottom: 6vh; }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) { .js .jc { opacity: 1; } .js .journey__year [data-num] { transition: none; } }

/* ════ 6 · Contact — la nuit s'ouvre : lumière plus douce et plus large, toujours le même territoire ════ */
.contact { position: relative; padding: 0 0 clamp(80px, 10vw, 128px); border-top: 0; color: var(--ink); background: var(--bg-deep); isolation: isolate; }
/* Le jour levé : le ciel de l'ouverture, recadré sur le soleil, en bandeau qui se fond dans la nuit ; le titre s'y pose. */
.contact__sky { position: relative; z-index: -1; height: clamp(240px, 36vw, 520px); margin-bottom: calc(-1 * clamp(110px, 13vw, 210px));
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 58%, transparent 100%); mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 58%, transparent 100%); }
.contact__sky picture, .contact__sky img { display: block; width: 100%; height: 100%; }
.contact__sky img { object-fit: cover; object-position: 50% 60%; opacity: .78; }
.contact__body { position: relative; }
.contact__head { display: grid; gap: 14px; max-width: 760px; }
.contact__h { font: 400 clamp(46px, 7vw, 104px)/.95 var(--serif); letter-spacing: -.02em; color: var(--ink); text-shadow: 0 1px 24px rgba(12, 10, 11, .35); }
.contact__p { font-size: 17px; color: var(--ink-2); }
.contact__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: clamp(36px, 5vw, 60px) 0 0; padding-bottom: 0; border-bottom: 0; --x: var(--paper-line); }
.contact__mail > a { font: 400 clamp(26px, 4.2vw, 60px)/1.05 var(--serif); color: var(--ink); text-decoration: underline; text-decoration-color: var(--bordeaux-ink); text-decoration-thickness: 1.5px; text-underline-offset: .16em; overflow-wrap: anywhere; }
.contact__mail > a { text-decoration: none; background: linear-gradient(90deg, #B8784F, #E0573F) 0 100% / 100% 1.5px no-repeat; padding-bottom: .08em; transition: background-size 240ms cubic-bezier(.2, .7, .2, 1), color 160ms; }
.contact__mail > a:hover, .contact__mail > a:focus-visible { color: #F6F3EE; background-size: 100% 3px; }
.contact__mail > a:focus-visible, .contact__copy:focus-visible { outline: 2px solid #E9C9A8; outline-offset: 4px; }
.contact__copy { transition: background-color 160ms, box-shadow 160ms; }
.contact__copy.is-done { box-shadow: inset 0 0 0 1px rgba(240, 140, 90, .6); color: #F2C9A6; }
.contact__copy { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--ink); font: 500 14px/1 var(--sans); box-shadow: inset 0 0 0 1px var(--border-strong); }
.contact__copy:hover { background: var(--paper-2); }
.contact__copy .i { width: 16px; height: 16px; }
.contact :focus-visible { outline-color: var(--focus); }
.foot--night { background: var(--bg-deep); color: var(--ink-2); border-top: 1px solid var(--border); }
.foot--night .foot__line { color: var(--ink); }
.foot--night .foot__meta, .foot--night .foot__meta a { color: var(--ink-3); }

/* ════ Langue chinoise : pas d'italique synthétique ════ */
:lang(zh-Hans) .jc__pre, :lang(zh-Hans) .jc--next .jc__h, :lang(zh-Hans) .jc__more, :lang(zh-Hans) .journey__end, :lang(zh-Hans) .journey__pre { font-style: normal; }
:lang(zh-Hans) .hero__title { font-family: var(--sans); font-weight: 500; font-size: clamp(36px, 4.6vw, 72px); line-height: 1.2; max-width: 11em; }

/* ════ Tablette / mobile : recomposé, pas empilé ════ */
@media (max-width: 899px) {
  .journey__run { grid-template-columns: 1fr; }
  .journey__rail { display: none; }
  /* Mobile : le dragon passe derrière toute la colonne, assombri et recadré sur les écailles ; masque vertical seulement. */
  .journey__deep { width: 100%; top: 70px; bottom: 40px; -webkit-mask: linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%); mask: linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%); }
  .journey__deep img { object-position: 46% 50%; opacity: calc(.12 + .38 * var(--jp)); }
  /* Frise mobile : colonne d'années étroite à gauche, contenu à droite (planche P6 : −23 % de hauteur, rien de retiré). */
  .jc { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; }
  .jc > * { grid-column: 2; }
  .jc > .jc__y { grid-column: 1; grid-row: 1 / span 6; margin: 2px 0 0; font-size: 30px; line-height: 1; letter-spacing: -.01em; font-variant-numeric: oldstyle-nums; }
  .jc__pre { display: block; font-size: .5em; margin-bottom: 2px; }
  .jc--next .jc__y { font-size: 22px; }
  .journey__steps { gap: 40px; }
  .jc__h { font-size: 23px; }
}
@media (max-width: 719px) {
  .contact__sky { height: 300px; margin-bottom: -96px; }
  .contact__sky img { object-position: 60% 55%; }
  .band__row { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding-bottom: 6px; scrollbar-width: none; }
  .band__row::-webkit-scrollbar { display: none; }
  .band__it { flex: 0 0 min(56vw, 240px); scroll-snap-align: start; }
  .band__it:nth-child(even) { margin-top: 0; }
  .band__hint { font-size: 14.5px; }
  .hero--v9 { min-height: calc(100svh - 56px); padding-top: 46svh; padding-bottom: 28px; justify-content: flex-start; }
  .hero__media { bottom: auto; height: 66svh; }
  .hero__media img { object-position: 62% 50%; }
  .hero__veil { background: linear-gradient(180deg, rgba(20, 17, 19, .5) 0%, rgba(20, 17, 19, 0) 16%, rgba(20, 17, 19, 0) 34%, rgba(20, 17, 19, .88) 62%, var(--bg-deep) 74%); }
  .hero__title { font-size: clamp(36px, 10.4vw, 52px); max-width: 12ch; }
  .hero__lede { font-size: 15.5px; }
  .hero__actions { width: 100%; display: block; }
  .cta { display: grid; grid-template-columns: 1fr auto auto; width: 100%; min-height: 60px; padding-left: 20px; }
  .cta__a { margin-left: 14px; }
  .cta__t { font-size: 20px; }
  .cta__m { margin-left: 10px; padding-left: 12px; }
  .hub { margin-top: 10px; gap: 0 8px; }
  .hub__k { display: none; }
}
@media (max-width: 379px) { .cta__m { display: none; } .cta__t { font-size: 19px; } }
@media (max-width: 719px) and (max-height: 700px) { .hero--v9 { padding-top: 38svh; } .hero__media { height: 58svh; } }
@media (max-height: 520px) and (orientation: landscape) { .hero--v9 { min-height: 0; padding-top: 96px; } }
.foot__meta a { display: inline-flex; align-items: center; min-height: 24px; }

/* Jonctions : la bande enchaîne sur le parcours sans double marge ; le contact naît du parcours sans filet (.sec + .sec l'emportait). */
.sec.journey { padding-top: clamp(72px, 8vw, 120px); }
.sec.journey, .sec.contact { border-top: 0; }

/* Parcours — précision entre parenthèses et phrase de clôture dans la colonne des étapes (elle prolonge « Et après »). */
.jc__q { color: var(--text-muted); }
.journey__steps > .journey__end { max-width: 30ch; margin: clamp(8px, 2vw, 24px) 0 0; padding: 0; text-align: left; color: var(--text-on-dark-2); }

/* Pied V9 : signature (même dessin que la barre) + réseaux en mots. */
.foot__in.foot__in--v9 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.foot__sig { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--ink); }
.foot__name { font: 400 17px/1 var(--serif); letter-spacing: .085em; }
.foot__sig .nav__sun { width: 5px; height: 5px; margin-top: -8px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #F7B27F, #D9774A 55%, #9E4A33); }
.foot__city { margin-left: 10px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.foot__soc { display: flex; gap: 4px; margin: 0 -10px 0 0; padding: 0; list-style: none; }
.foot__soc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.foot__soc a:hover, .foot__soc a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Grammaire visuelle (refinement) — un seul signe récurrent : le point soleil = « maintenant ».
   Signature de la barre, statut « En cours » du parcours. Le cadre de projection = « ceci se lit » : vidéo active de la bande, vidéo phare /ugc. */
.jc--now .jc__dot { background: radial-gradient(circle at 40% 35%, #F7B27F 0%, #D9774A 55%, #9E4A33 100%); box-shadow: 0 0 8px rgba(232, 128, 80, .5); }
.band__play::after { content: ""; position: absolute; inset: 9px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 240ms cubic-bezier(.2, .7, .2, 1);
  background: linear-gradient(#EFEBE4, #EFEBE4) 0 0 / 10px 1px, linear-gradient(#EFEBE4, #EFEBE4) 0 0 / 1px 10px, linear-gradient(#EFEBE4, #EFEBE4) 100% 0 / 10px 1px, linear-gradient(#EFEBE4, #EFEBE4) 100% 0 / 1px 10px,
              linear-gradient(#EFEBE4, #EFEBE4) 0 100% / 10px 1px, linear-gradient(#EFEBE4, #EFEBE4) 0 100% / 1px 10px, linear-gradient(#EFEBE4, #EFEBE4) 100% 100% / 10px 1px, linear-gradient(#EFEBE4, #EFEBE4) 100% 100% / 1px 10px;
  background-repeat: no-repeat; }
.band__it.is-on .band__play::after, .band__play:hover::after, .band__play:focus-visible::after { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .band__play::after { transition: none; } }
.band { padding-bottom: clamp(40px, 5vw, 72px); }
@media (max-width: 719px) { .journey__steps > .journey__end { margin-left: 80px; font-size: 21px; } }
:lang(zh-Hans) .cta__t, :lang(zh-Hans) .card__note-h { font-family: var(--sans); font-weight: 600; font-size: 18px; letter-spacing: .02em; }

/* ═══ 2026-11-07 — Hero validé, transition portfolio → bande, hub à 5 destinations, NEOVITA, contact ouvert. ═══ */
/* Hero : trois lignes de sens (« Je préfère essayer / que me demander / ce qui aurait pu se passer. »). Le titre est seul au centre de gravité. */
.hero__title { max-width: none; font-size: clamp(42px, 5.6vw, 92px); line-height: 1; }
.hero__ln { display: block; }
.hero__ln:nth-child(2) { color: rgba(239, 235, 228, .78); }
.hero__lede { max-width: 44ch; }
.hub { margin-top: clamp(22px, 3.2vh, 32px); }
:lang(zh-Hans) .hero__title { max-width: none; }
/* Transition : l'intitulé et le CTA sont posés sur la même ligne que le haut de la rangée, le filet cuivre relie l'un à l'autre. */
.band { padding-top: clamp(36px, 5vw, 72px); }
.band__head { align-items: end; margin-bottom: 0; }
.band__k { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-on-dark-2); }
.band__rule { width: 28px; height: 1px; background: linear-gradient(90deg, #B8784F, #E0573F); }
.band__h { font: 400 clamp(28px, 3vw, 44px)/1.05 var(--serif); letter-spacing: -.01em; text-transform: none; color: var(--text-on-dark); }
.cta--band { min-height: 56px; flex: none; }
.cta--band .cta__t { font-size: clamp(19px, 1.4vw, 21px); }
.cta--band .cta__a { width: 40px; height: 40px; }
.band__sub { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px auto clamp(18px, 2.4vw, 26px); padding-top: 14px; border-top: 1px solid rgba(214, 208, 198, .12); }
.band__sub .band__hint { margin: 0; }
/* Survol / focus du CTA : la rangée s'éclaire de gauche à droite, coins de projection en cascade — « ces six-là font partie du portfolio ». */
.band__play::after { transition-delay: 0ms; }
.band:has(.cta--band:hover, .cta--band:focus-visible) .band__play::after { opacity: .8; transition-delay: calc(var(--i, 0) * 45ms); }
.band:has(.cta--band:hover, .cta--band:focus-visible) .band__play .clip { filter: none; transition-delay: calc(var(--i, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) { .band:has(.cta--band:hover, .cta--band:focus-visible) .band__play::after, .band:has(.cta--band:hover, .cta--band:focus-visible) .band__play .clip { transition-delay: 0ms; } }

/* Hub : icône + mot sur grand écran ; sur mobile, cinq pastilles icônes de 44 px avec nom accessible (le mot n'y tient pas sans 2 lignes). */
.hub a .i { width: 18px; height: 18px; }
@media (max-width: 719px) {
  .hub { margin-top: 18px; }
  .hub ul { gap: 8px; margin: 0; }
  .hub a { width: 46px; height: 46px; justify-content: center; padding: 0; border-radius: 50%; background: rgba(239, 235, 228, .05); box-shadow: inset 0 0 0 1px rgba(214, 208, 198, .16); }
  .hub a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hub a .i { opacity: .9; }
  .band__head { display: grid; gap: 18px; }
  .cta--band { width: 100%; }
  .band__sub .band__hint { font-size: 14px; }
}

/* NEOVITA : étude de projet. Texte à gauche, vraie capture à droite (fenêtre + téléphone). Ne dépasse pas la hauteur d'un écran. */
.neo { position: relative; padding: clamp(72px, 9vw, 140px) 0 clamp(40px, 6vw, 96px); background: var(--bg-deep); border-top: 0; }
.neo__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.neo__h { margin: 14px 0 0; font: 400 clamp(38px, 4.6vw, 68px)/1 var(--serif); letter-spacing: -.015em; color: var(--text-on-dark); }
.neo__p { margin: 20px 0 0; max-width: 46ch; font-size: 16.5px; line-height: 1.6; color: var(--text-on-dark-2); }
.neo__role { display: grid; gap: 0; margin: 28px 0 0; border-top: 1px solid rgba(214, 208, 198, .14); }
.neo__role > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(214, 208, 198, .14); }
.neo__role dt { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); padding-top: 4px; }
.neo__role dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--text-on-dark); }
.neo__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 30px 0 0; }
.neo__cta { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px; font-size: 15.5px; color: var(--text-on-dark); text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(214, 208, 198, .4); transition: box-shadow 160ms, background-color 160ms, gap 240ms cubic-bezier(.2, .7, .2, 1); }
.neo__cta .i { width: 16px; height: 16px; }
.neo__cta:hover, .neo__cta:focus-visible { background: rgba(239, 235, 228, .06); box-shadow: inset 0 0 0 1px rgba(239, 235, 228, .8); gap: 14px; }
.neo__cta:focus-visible { outline: 2px solid #E9C9A8; outline-offset: 3px; }
.neo__url { font-size: 11px; letter-spacing: .08em; color: var(--text-muted); }
.neo__risk { margin: 18px 0 0; font-size: 12.5px; color: var(--text-muted); }
.neo__shot { position: relative; margin: 0; padding: 0 0 clamp(28px, 4vw, 56px) 0; }
.neo__win { border-radius: 12px; overflow: hidden; background: #0b0b0c; box-shadow: 0 0 0 1px rgba(214, 208, 198, .14), 0 50px 90px -50px rgba(0, 0, 0, 1); }
.neo__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #151314; border-bottom: 1px solid rgba(214, 208, 198, .08); }
.neo__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(214, 208, 198, .22); }
.neo__bar span { margin-left: 10px; font-size: 10.5px; letter-spacing: .04em; color: var(--text-muted); }
.neo__win img { display: block; width: 100%; height: auto; }
.neo__phone { position: absolute; right: clamp(-12px, -1vw, 0px); bottom: 0; width: clamp(110px, 12vw, 160px); aspect-ratio: 9 / 18; border-radius: 22px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 5px #121011, 0 0 0 6px rgba(214, 208, 198, .18), 0 40px 70px -30px rgba(0, 0, 0, 1); }
.neo__phone img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
@media (max-width: 899px) {
  .neo__in { grid-template-columns: 1fr; }
  .neo__shot { order: -1; margin-right: 34px; }
  .neo__phone { right: -34px; width: 104px; }
  .neo__role > div { grid-template-columns: 1fr; gap: 4px; }
}
/* Le « 2026 » du parcours renvoie à la rubrique. */
.jc__a { color: inherit; text-decoration: underline; text-decoration-color: rgba(224, 87, 63, .7); text-underline-offset: 4px; }
.jc__a:hover, .jc__a:focus-visible { text-decoration-color: currentColor; }

/* Contact ouvert */
.contact__p { max-width: 44ch; font-size: 18px; line-height: 1.55; }
.contact__p2 { margin: 0; font-size: 14.5px; color: var(--ink-3); }
.jc__a { display: inline-block; padding: 3px 0; }
.foot__soc { flex-wrap: wrap; }