@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   CARAVELLI OLYMPE — ATELIER V923
   Couche de reprise éditoriale. Chargée EN DERNIER, après olympe-system.css
   et après caravelli-v912.css : elle corrige par la cascade, jamais par
   !important sauf lorsqu'une règle antérieure en utilise un.

   Périmètre volontairement exclu :
   — aucune police n'est redéfinie ;
   — mentions-legales.html, confidentialite.html et CSS/legal.css intacts ;
   — luxury-branch/ garde sa palette propre (aucun sélecteur ne l'atteint).

   Sommaire
   0. Primitives : jetons, cadences, masques de fondu
   1. Héros — plus de coupure nette en bas d'image
   2. Accueil — filigrane 1948, bande Matière, carrousel Réalisations
   3. Portfolio — grille des réalisations
   4. Portfolio — carnets de chantiers privés au format natif
   5. La Pensée — refonte éditoriale complète
   6. Médias — fondu des arêtes, jamais d'image entrecoupée
   7. Cinétique — révélations pilotées par le défilement
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   0 · PRIMITIVES
   ══════════════════════════════════════════════════════════════════════════ */

/* Angle animable : @property permet d'interpoler un <angle> dans un dégradé
   conique, ce qu'une variable CSS ordinaire ne sait pas faire. C'est ce qui
   donne au filet de lumière des cartouches sa rotation continue sans JS. */
@property --v923-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --v923-avance {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

:root {
  --v923-ease:        cubic-bezier(.19, 1, .22, 1);
  --v923-ease-doux:   cubic-bezier(.33, 1, .68, 1);

  /* Gouttière commune à toutes les grilles reprises. Une seule valeur pour
     tout le site : c'est ce qui fait qu'une page « tient » avec l'autre. */
  --v923-gouttiere:   clamp(14px, 1.7vw, 28px);
  --v923-cadre:       min(calc(100% - var(--pad, 24px) - var(--pad, 24px)), var(--max, 1280px));

  /* Filet de la Maison : un cheveu bronze, jamais une bordure franche. */
  --v923-filet:       color-mix(in oklab, var(--ol-bronze) 26%, transparent);
  --v923-filet-clair: color-mix(in oklab, var(--ol-bronze) 34%, transparent);

  /* Voile de lisibilité posé sous les cartouches. Assez dense pour porter
     un texte clair sur une photographie de plein soleil. */
  --v923-voile-carte:
    linear-gradient(to top,
      oklch(.1419 calc(var(--ol-c-body)*.294) var(--ol-h) / .94) 0%,
      oklch(.1419 calc(var(--ol-c-body)*.294) var(--ol-h) / .84) 24%,
      oklch(.1419 calc(var(--ol-c-body)*.294) var(--ol-h) / .56) 46%,
      oklch(.1419 calc(var(--ol-c-body)*.294) var(--ol-h) / .22) 68%,
      oklch(.1419 calc(var(--ol-c-body)*.294) var(--ol-h) / .04) 86%,
      transparent 100%);

  /* Fondu vertical réutilisable : évite l'arête franche en bas des visuels. */
  --v923-fondu-bas:
    linear-gradient(180deg,
      #000 0%, #000 54%,
      rgba(0, 0, 0, .92) 70%,
      rgba(0, 0, 0, .60) 84%,
      rgba(0, 0, 0, .22) 94%,
      transparent 100%);
}

/* Ponctuation typographique commune aux blocs repris. `pretty` évite les
   lignes veuves sur les paragraphes, `balance` équilibre les titres courts. */
.v923-mesure { text-wrap: pretty; }


/* ══════════════════════════════════════════════════════════════════════════
   1 · HÉROS — la photographie ne se coupe plus au couteau

   Constat : les héros `.ph` / `.ph-full` s'arrêtent net sur le bord bas de
   la section. À 1440 px l'image passe du plein contraste au bleu nuit en un
   pixel : c'est la « coupure » signalée. On rend la fin de l'image au fond
   de page par un dégradé long, et on ajoute un plancher de nuit sous le
   héros pour que la transition ait où aller.
   ══════════════════════════════════════════════════════════════════════════ */

body[data-page] :is(.ph, .ph-full, .merci, .pensee-hero) {
  background:
    linear-gradient(180deg,
      var(--ol-satin) 0%,
      var(--ol-night) 58%,
      oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h)) 100%);
}

/* Le fondu est porté par le calque d'image lui-même : il suit donc la
   parallaxe et ne peut pas se désolidariser du visuel. La plage démarre
   haut (50 %) pour absorber les ±4 % de translation sans laisser d'arête. */
body[data-page] :is(.ph, .ph-full) :is(.ph-bg, .ph-full-bg) {
  -webkit-mask-image:
    linear-gradient(180deg,
      #000 0%, #000 50%,
      rgba(0, 0, 0, .90) 68%,
      rgba(0, 0, 0, .52) 82%,
      rgba(0, 0, 0, .16) 93%,
      transparent 100%);
  mask-image:
    linear-gradient(180deg,
      #000 0%, #000 50%,
      rgba(0, 0, 0, .90) 68%,
      rgba(0, 0, 0, .52) 82%,
      rgba(0, 0, 0, .16) 93%,
      transparent 100%);
}

/* Le voile général du héros reprend la même course : lumière en haut,
   nuit en bas, sans marche visible. Redéfinit `.ph::after` (z-index 0),
   qui reste donc sous le contenu comme dans le système d'origine. */
body[data-page] .ph::after,
body[data-page] .ph-full::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 78% at 50% 4%,
      oklch(.9445 calc(var(--ol-c-body)*.193) var(--ol-h) / .16), transparent 62%),
    linear-gradient(90deg,
      oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h) / .62), oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h) / .12) 46%, oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h) / .48)),
    linear-gradient(180deg,
      oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h) / .10) 0%,
      oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h) / .00) 34%,
      oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h) / .58) 82%,
      oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h)) 100%);
}

/* Filet de lumière au ras du bord bas : la Maison signe sa fin de héros au
   lieu de la subir. Le cheveu est la dernière couche du voile ci-dessus —
   posé là plutôt que sur `::before`, qui serait recouvert par le fondu. */
body[data-page] .ph::after,
body[data-page] .ph-full::after {
  background-image:
    linear-gradient(90deg,
      transparent, var(--v923-filet-clair) 40%, var(--v923-filet-clair) 60%, transparent),
    radial-gradient(120% 78% at 50% 4%,
      oklch(.9445 calc(var(--ol-c-body)*.193) var(--ol-h) / .16), transparent 62%),
    linear-gradient(90deg,
      oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h) / .62), oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h) / .12) 46%, oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h) / .48)),
    linear-gradient(180deg,
      oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h) / .10) 0%,
      oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h) / .00) 34%,
      oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h) / .58) 82%,
      oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h)) 100%);
  background-size: 100% 1px, auto, auto, auto;
  background-position: bottom left, center, center, center;
  background-repeat: no-repeat, repeat, repeat, repeat;
}


/* ── 1.1 Ordre d'empilement des héros porteurs de fumée ──────────────────
   La fumée volumétrique (CSS/olympe-fumee-v923.css + JS/olympe-fumee-v923.js)
   doit passer DEVANT la photographie et devant le voile, mais DERRIÈRE les
   écrits. Sans cet ordre explicite, le canvas — premier enfant, z-index 0 —
   se retrouverait sous `.ph-bg` et sous `::after`, et la fumée ne se
   verrait plus. C'est exactement l'effet demandé : très présente, jamais
   au détriment de la lisibilité du titre.
   ─────────────────────────────────────────────────────────────────────── */

/* La feuille de la fumée pose `position:relative` sur tous les enfants de
   l'hôte pour les faire passer devant le canvas. Sur un héros, `.ph-bg` est
   un calque ABSOLU : le repasser en `relative` en ferait un item de la
   flexbox, qui pousserait le titre vers la droite. On lui rend sa position. */
body[data-page] [data-fumee-v923] > :is(.ph-bg, .ph-full-bg) {
  position: absolute;
  inset: 0;
  z-index: 0;
}
body[data-page] [data-fumee-v923]::after                      { z-index: 1; }
body[data-page] [data-fumee-v923] > .fumee-v923__canvas        { z-index: 2; }
body[data-page] [data-fumee-v923] > :is(.container, .pensee-hero-inner, .ph-full-body) { z-index: 3; }

/* Sous la fumée, la photographie recule : c'est la vapeur qui porte la
   lumière, pas le cliché. */
body[data-page] [data-fumee-v923] > :is(.ph-bg, .ph-full-bg) {
  filter: saturate(.52) contrast(1.20) brightness(.42);
}


/* ══════════════════════════════════════════════════════════════════════════
   2 · ACCUEIL
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 2.1 Filigrane « 1948 » ──────────────────────────────────────────────
   Il était posé à 81 % d'opacité : il écrasait le numéro 01, le titre et
   la copie. Un filigrane se devine, il ne se lit pas. On l'assombrit, on
   le recadre à droite et on le confine sous le contenu. */
html.lux body[data-page="index"] .legacy-film::before,
html.lux body[data-page="about"] .legacy-film::before {
  color: color-mix(in oklab, var(--ol-platinum) 7%, transparent);
  right: clamp(-2.4vw, -1.2vw, 0px);
  top: -.14em;
  z-index: 0;
  font-size: clamp(150px, 26vw, 420px);
  letter-spacing: -.02em;
  /* On l'éteint sur sa moitié basse : il ne concurrence plus la copie. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 58%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 58%, transparent 92%);
}

html.lux body[data-page="index"] .legacy-grid,
html.lux body[data-page="about"] .legacy-grid {
  position: relative;
  z-index: 1;
  /* La colonne de texte passe de ~300 px à une mesure lisible : plus de
     « La / main / avant / l'image. » en quatre lignes hachées. */
  grid-template-columns: minmax(0, 1.08fr) minmax(clamp(340px, 34vw, 470px), .92fr);
  align-items: center;
}

html.lux body[data-page="index"] .legacy-title,
html.lux body[data-page="about"] .legacy-title {
  font-size: clamp(40px, 4.4vw, 74px);
  line-height: .94;
  text-wrap: balance;
}

html.lux body[data-page="index"] .legacy-copy,
html.lux body[data-page="about"] .legacy-copy {
  font-size: clamp(15px, 1.06vw, 17px);
  line-height: 1.78;
  max-width: 46ch;
  text-wrap: pretty;
}

html.lux body[data-page="index"] .legacy-index {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(34px, 3.2vw, 54px);
  line-height: 1;
  color: color-mix(in oklab, var(--ol-silver) 78%, transparent);
}

/* Le visuel reçoit un cadre de Maison : filet bronze, ombre profonde,
   et une arête basse fondue plutôt que tranchée. */
html.lux body[data-page="index"] .legacy-media {
  aspect-ratio: 5 / 3;
  border: 1px solid var(--v923-filet);
  box-shadow:
    0 60px 140px -50px rgba(0, 0, 0, .78),
    0 0 0 1px rgba(255, 255, 255, .03) inset;
}


/* ── 2.2 Bande MATIÈRE ───────────────────────────────────────────────────
   Quatre visuels bord à bord, 2 px de gouttière, légendes noyées : la
   bande faisait « planche contact » et non « Maison ». On la recadre, on
   l'aère, on rend les légendes lisibles et on fond les extrémités. */
html.lux body[data-page="index"] .lux-matiere {
  width: var(--v923-cadre);
  margin-inline: auto;
  gap: var(--v923-gouttiere);
  /* Les extrémités s'éteignent : la bande n'est plus un bloc posé sur la
     page, elle s'y dissout. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

html.lux body[data-page="index"] .lux-matiere figure {
  aspect-ratio: 4 / 5;
  border: 1px solid color-mix(in oklab, var(--ol-platinum) 9%, transparent);
  box-shadow: 0 40px 90px -46px rgba(0, 0, 0, .82);
  isolation: isolate;
}

html.lux body[data-page="index"] .lux-matiere figure::after {
  background: var(--v923-voile-carte);
}

html.lux body[data-page="index"] .lux-matiere img {
  filter: saturate(.86) contrast(1.05) brightness(.82);
}

html.lux body[data-page="index"] .lux-matiere figure:hover img {
  filter: saturate(.98) contrast(1.06) brightness(.98);
}

/* Légende : elle passait sous le seuil de lisibilité (9 px, sans voile). */
html.lux body[data-page="index"] .lux-matiere figcaption {
  left: clamp(14px, 1.4vw, 22px);
  bottom: clamp(13px, 1.3vw, 20px);
  font-size: 10px;
  letter-spacing: .30em;
  color: var(--ol-carrara);
  text-shadow: 0 1px 14px oklch(.1419 calc(var(--ol-c-body)*.294) var(--ol-h) / .9);
}

/* Un cheveu bronze apparaît sous la légende au survol : rien de plus. */
html.lux body[data-page="index"] .lux-matiere figcaption::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 7px;
  background: var(--v923-filet-clair);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--v923-ease);
}

html.lux body[data-page="index"] .lux-matiere figure:hover figcaption::after {
  transform: scaleX(1);
}


/* ── 2.3 Carrousel RÉALISATIONS ──────────────────────────────────────────
   Défaut majeur : aucune règle de disposition n'existait pour
   .proj-wrap / .proj-track / .proj-sl. Les diapositives s'empilaient en
   bloc pleine largeur et chaque image de 735 × 919 était affichée en
   1440 × 1800 — d'où « les images sont trop grandes ». On reconstruit la
   piste attendue par JS/olympe-engine.js (translate de
   largeurDiapo + 22 px), sans toucher au script. */
body[data-page="index"] .proj-wrap {
  position: relative;
  width: var(--v923-cadre);
  margin-inline: auto;
  overflow: hidden;
  /* Fondu très court sur les deux bords : les diapositives sortent du cadre
     sans marche, mais la première n'est pas voilée à l'arrêt. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 .9%, #000 99.1%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 .9%, #000 99.1%, transparent 100%);
}

body[data-page="index"] .proj-track {
  display: flex;
  align-items: stretch;
  gap: 22px;                 /* doit rester égal au pas utilisé par le script */
  will-change: transform;
  transition: transform 1.05s var(--v923-ease);
}

body[data-page="index"] .proj-sl {
  flex: 0 0 calc((100% - 2 * 22px) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body[data-page="index"] .proj-sl > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

body[data-page="index"] .proj-iw {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--ol-platinum) 9%, transparent);
  background: var(--ol-night);
}

body[data-page="index"] .proj-iw img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Le cartouche de survol : voile + libellé, jamais du texte nu sur photo. */
body[data-page="index"] .proj-ov {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--v923-voile-carte);
  opacity: .82;
  transition: opacity .7s var(--v923-ease);
}

body[data-page="index"] .proj-sl:hover .proj-ov { opacity: 1; }

body[data-page="index"] .proj-ovt {
  position: absolute;
  z-index: 3;
  left: clamp(16px, 1.5vw, 24px);
  bottom: clamp(14px, 1.4vw, 22px);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ol-carrara);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--v923-ease), transform .6s var(--v923-ease);
}

body[data-page="index"] .proj-sl:hover .proj-ovt {
  opacity: 1;
  transform: none;
}

body[data-page="index"] .proj-mt {
  padding: 20px 2px 0;
}

body[data-page="index"] .proj-cat {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--ol-bronze-soft);
  margin: 0 0 9px;
}

body[data-page="index"] .proj-nm {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 1.7vw, 28px);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--ol-carrara);
  margin: 0 0 6px;
}

body[data-page="index"] .proj-lc {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ol-silver) 88%, transparent);
  margin: 0;
}

/* Commandes du carrousel : deux disques de nuit, filet bronze au survol. */
/* Les deux disques à gauche, le lien vers le portfolio à droite : la barre
   de commandes lit dans le sens de lecture. */
body[data-page="index"] .proj-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(26px, 3vw, 44px);
}

body[data-page="index"] .proj-nav > div:last-child {
  margin-left: auto;
}

body[data-page="index"] .pnb {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--ol-satin) 82%, transparent);
  border: 1px solid var(--v923-filet);
  color: var(--ol-carrara);
  cursor: pointer;
  transition: background .5s var(--v923-ease), border-color .5s var(--v923-ease), transform .5s var(--v923-ease);
}

body[data-page="index"] .pnb:hover {
  background: color-mix(in oklab, var(--ol-bronze) 16%, var(--ol-satin));
  border-color: var(--v923-filet-clair);
  transform: translateY(-2px);
}

/* Une borne atteinte se voit : le disque s'éteint au lieu d'enrouler. */
body[data-page="index"] .pnb:disabled {
  opacity: .3;
  cursor: default;
  transform: none;
}

@media (max-width: 1024px) {
  body[data-page="index"] .proj-sl { flex-basis: calc((100% - 22px) / 2); }
}

/* La reprise de `.legacy-grid` en deux colonnes ci-dessus a une spécificité
   supérieure au repli mobile du système : il faut donc la neutraliser
   explicitement, sans quoi la colonne de texte garde 340 px de minimum et
   déborde sur un écran de 390 px. */
@media (max-width: 900px) {
  html.lux body[data-page="index"] .legacy-grid,
  html.lux body[data-page="about"] .legacy-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  html.lux body[data-page="index"] .legacy-media { aspect-ratio: 3 / 2; }
}

@media (max-width: 680px) {
  body[data-page="index"] .proj-sl { flex-basis: 100%; }
  body[data-page="index"] .proj-iw { aspect-ratio: 3 / 4; }
  html.lux body[data-page="index"] .lux-matiere { grid-template-columns: repeat(2, 1fr); }
  html.lux body[data-page="index"] .legacy-film::before,
  html.lux body[data-page="about"] .legacy-film::before { font-size: clamp(110px, 40vw, 200px); }
}


/* ══════════════════════════════════════════════════════════════════════════
   3 · PORTFOLIO — grille des réalisations

   Constat : `grid-template-columns:repeat(2,1fr); gap:1px` en pleine
   largeur, hauteur fixe jusqu'à 440 px, et un voile gris-bleu à .72 qui ne
   suffit pas sous un texte clair posé sur une façade en plein soleil. Les
   titres étaient illisibles.
   ══════════════════════════════════════════════════════════════════════════ */

body[data-page="portfolio"] .v6-inline-portfolio-32 {
  width: var(--v923-cadre);
  margin-inline: auto;
  gap: var(--v923-gouttiere);
  margin-top: clamp(44px, 5vw, 72px);
}

body[data-page="portfolio"] .v6-inline-portfolio-33 {
  border: 1px solid color-mix(in oklab, var(--ol-platinum) 10%, transparent);
  box-shadow: 0 46px 110px -54px rgba(0, 0, 0, .72);
  isolation: isolate;
  transition: box-shadow .9s var(--v923-ease), border-color .9s var(--v923-ease);
}

body[data-page="portfolio"] .v6-inline-portfolio-33:hover {
  border-color: var(--v923-filet);
  box-shadow: 0 60px 130px -50px rgba(0, 0, 0, .82);
}

/* Hauteur fixe remplacée par un rapport : la composition tient à toutes
   les largeurs et l'image n'est plus démesurée. */
body[data-page="portfolio"] .v6-inline-portfolio-34 {
  height: auto;
  aspect-ratio: 4 / 3;
  transform: scale(1.001);
}

body[data-page="portfolio"] .v6-inline-portfolio-33:hover .v6-inline-portfolio-34 {
  transform: scale(1.035);
}

/* Voile de lisibilité réel. Le texte se lit maintenant sur la Toscane en
   plein midi comme sur un intérieur sombre. */
body[data-page="portfolio"] .v6-inline-portfolio-35,
body[data-page="portfolio"] .v6-inline-portfolio-43,
body[data-page="portfolio"] .v6-inline-portfolio-51,
body[data-page="portfolio"] .v6-inline-portfolio-59 {
  background: var(--v923-voile-carte);
}

body[data-page="portfolio"] .v6-inline-portfolio-36,
body[data-page="portfolio"] .v6-inline-portfolio-44,
body[data-page="portfolio"] .v6-inline-portfolio-52,
body[data-page="portfolio"] .v6-inline-portfolio-60 {
  padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.6vw, 38px);
  z-index: 2;
}

/* Le cartouche est posé sur une photographie : son texte doit être clair.
   La section porte `.sec--blanc`, dont la règle de contraste du système
   (`html.lux main :is(.sec--blanc,…) :is(h1,h2,h3,…)`) force l'encre
   sombre avec une spécificité de (0,2,3). C'est elle qui rendait les
   titres illisibles. On la dépasse structurellement — sans !important —
   en visant la carte par sa position dans la grille. */
html.lux body[data-page="portfolio"] .v6-inline-portfolio-32 > a > div:last-of-type > p:first-child {
  font-size: 9.5px;
  letter-spacing: .28em;
  color: var(--ol-bronze-soft);
  margin-bottom: 12px;
  text-shadow: 0 1px 12px oklch(.1419 calc(var(--ol-c-body)*.294) var(--ol-h) / .9);
}

html.lux body[data-page="portfolio"] .v6-inline-portfolio-32 > a > div:last-of-type > h3 {
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: oklch(1 0 var(--ol-h));
  text-shadow: 0 2px 26px oklch(.1419 calc(var(--ol-c-body)*.294) var(--ol-h) / .95), 0 1px 4px oklch(.1419 calc(var(--ol-c-body)*.294) var(--ol-h) / .8);
  margin-bottom: 10px;
}

html.lux body[data-page="portfolio"] .v6-inline-portfolio-32 > a > div:last-of-type > h3 em {
  color: var(--ol-platinum);
  -webkit-text-fill-color: var(--ol-platinum);
}

html.lux body[data-page="portfolio"] .v6-inline-portfolio-32 > a > div:last-of-type > p:last-child {
  font-size: 10px;
  letter-spacing: .22em;
  color: oklch(.966 calc(var(--ol-c-body)*.07) var(--ol-h-pap) / .90);
  text-shadow: 0 1px 12px oklch(.1419 calc(var(--ol-c-body)*.294) var(--ol-h) / .9);
}

@media (max-width: 760px) {
  body[data-page="portfolio"] .v6-inline-portfolio-32 { grid-template-columns: 1fr; }
  body[data-page="portfolio"] .v6-inline-portfolio-34 { aspect-ratio: 3 / 2; }
}


/* ══════════════════════════════════════════════════════════════════════════
   4 · PORTFOLIO — CARNETS DE CHANTIERS PRIVÉS

   Constat : sept films verticaux (406 × 720, et 720 × 720 pour Charleroi)
   étaient posés dans un cadre 16/10 pleine largeur — soit un cadrage
   agressif ET un agrandissement de ×3. C'est la cause exacte du « flou » et
   du « cassé ». Aucun master n'étant fourni, la seule réponse honnête est
   de publier chaque film à SON format et de plafonner l'agrandissement.

   Nouvelle disposition : un carnet. Une entrée par film, plaque verticale
   d'un côté, appareil critique de l'autre, côtés alternés. La largeur de la
   plaque est plafonnée par JS/olympe-atelier-v923.js à 1,25 × la définition
   native (--v923-plaque), et le rapport est lu sur le fichier lui-même
   (--v923-ratio) : rien n'est plus étiré ni recadré.
   ══════════════════════════════════════════════════════════════════════════ */

/* La section devient une nuit de Maison. Elle héritait d'un fond blanc et
   d'une encre sombre par la règle générique `.sec:not(…)` : comme cette
   règle est très spécifique, tout le lettrage doit être repris ici. Un
   sélecteur d'identifiant suffit à passer devant, sans un seul !important. */
body[data-page="portfolio"] #carnets-prives {
  background:
    radial-gradient(120% 60% at 50% 0%, oklch(.2906 calc(var(--ol-c-body)*.704) var(--ol-h) / .55), transparent 62%),
    linear-gradient(180deg, oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h)) 0%, var(--ol-night) 40%, oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h)) 100%);
  color: var(--ol-carrara);
}

body[data-page="portfolio"] #carnets-prives :is(h2, h3, .h2) {
  color: var(--ol-carrara);
  text-shadow: none;
}

body[data-page="portfolio"] #carnets-prives :is(p, .body, li) {
  color: oklch(.966 calc(var(--ol-c-body)*.07) var(--ol-h-pap) / .80);
  text-shadow: none;
}

/* Les titres de carnet sont des <p class="h2"> : la règle des paragraphes
   ci-dessus les rattrapait. On les reprend après, plus précisément. */
body[data-page="portfolio"] #carnets-prives .cp-card .h2 {
  color: var(--ol-carrara);
}

body[data-page="portfolio"] #carnets-prives :is(.kicker, .eyebrow) {
  color: var(--ol-bronze-soft);
}

body[data-page="portfolio"] #carnets-prives em {
  color: var(--ol-platinum);
  -webkit-text-fill-color: var(--ol-platinum);
}

body[data-page="portfolio"] #carnets-prives .v6-inline-portfolio-114 {
  width: var(--v923-cadre);
  max-width: none;
  padding-inline: 0;
}

/* Le chapeau était centré alors que le carnet s'aligne à gauche : deux axes
   dans la même section. On les ramène sur le même fer. */
body[data-page="portfolio"] #carnets-prives .v6-inline-portfolio-114 > :is(p, h2) {
  text-align: left;
  margin-inline: 0;
}

body[data-page="portfolio"] #carnets-prives .v6-inline-portfolio-116 {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 14px 0 18px;
}

body[data-page="portfolio"] #carnets-prives .v6-inline-portfolio-117 {
  max-width: 58ch;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.8;
}

/* La liste devient un carnet : une entrée par ligne, séparées d'un cheveu. */
body[data-page="portfolio"] .v6-inline-portfolio-118 {
  display: block;
  margin-top: clamp(46px, 5vw, 78px);
}

body[data-page="portfolio"] .v6-inline-portfolio-118 > .cp-card {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 4.4vw, 76px);
  width: 100%;
  padding: clamp(38px, 4.4vw, 68px) 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid color-mix(in oklab, var(--ol-platinum) 10%, transparent);
  overflow: visible;
}

body[data-page="portfolio"] .v6-inline-portfolio-118 > .cp-card:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Alternance : la plaque passe à droite une entrée sur deux. */
body[data-page="portfolio"] .v6-inline-portfolio-118 > .cp-card:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
}

body[data-page="portfolio"] .v6-inline-portfolio-118 > .cp-card:nth-child(even) > video {
  order: 2;
}

/* ── La plaque : format natif, agrandissement plafonné ─────────────────── */
body[data-page="portfolio"] .v6-inline-portfolio-120 {
  /* --v923-ratio et --v923-plaque sont posés par le script à partir de
     videoWidth / videoHeight. Les valeurs de repli couvrent le cas où les
     métadonnées ne sont pas encore lues. */
  width: min(var(--v923-plaque, 400px), 38vw);
  min-width: 190px;
  height: auto;
  aspect-ratio: var(--v923-ratio, 9 / 16);
  object-fit: contain;          /* plus aucun recadrage imposé */
  background: oklch(.1419 calc(var(--ol-c-body)*.294) var(--ol-h));
  border: 1px solid var(--v923-filet);
  box-shadow:
    0 60px 130px -52px rgba(0, 0, 0, .88),
    0 0 0 1px rgba(255, 255, 255, .035) inset;
  display: block;
}

/* Le grain fin de la Maison : il casse l'escalier de pixels d'un film
   sous-défini bien mieux qu'un flou, sans rien adoucir de l'image. */
body[data-page="portfolio"] .cp-card {
  position: relative;
}

/* ── L'appareil critique ────────────────────────────────────────────────── */
body[data-page="portfolio"] .v6-inline-portfolio-121,
body[data-page="portfolio"] .v6-inline-portfolio-129,
body[data-page="portfolio"] .v6-inline-portfolio-137,
body[data-page="portfolio"] .v6-inline-portfolio-145,
body[data-page="portfolio"] .v6-inline-portfolio-153,
body[data-page="portfolio"] .v6-inline-portfolio-161,
body[data-page="portfolio"] .v6-inline-portfolio-169 {
  padding: 0;
  max-width: 60ch;
}

body[data-page="portfolio"] .cp-card .kicker {
  color: var(--ol-bronze-soft);
  font-size: 10px;
  letter-spacing: .30em;
  margin-bottom: 14px;
}

body[data-page="portfolio"] .cp-card .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.5vw, 42px);
  line-height: 1.06;
  letter-spacing: -.028em;
  color: var(--ol-carrara);
  margin: 0 0 18px;
  text-wrap: balance;
}

body[data-page="portfolio"] .cp-card .body {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.82;
  color: color-mix(in oklab, var(--ol-carrara) 80%, transparent);
  text-wrap: pretty;
  margin: 0 0 22px;
}

/* Lien « version sonore » : un bouton de Maison, pas un lien nu. */
body[data-page="portfolio"] .cp-card .btn-l {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ol-carrara);
  border: 1px solid var(--v923-filet);
  background: color-mix(in oklab, var(--ol-satin) 55%, transparent);
  text-decoration: none;
  transition: background .6s var(--v923-ease), border-color .6s var(--v923-ease), color .6s var(--v923-ease);
}

body[data-page="portfolio"] .cp-card .btn-l:hover {
  background: color-mix(in oklab, var(--ol-bronze) 15%, var(--ol-satin));
  border-color: var(--v923-filet-clair);
  color: #FFF;
}

/* Cartouche de définition : la Maison assume la provenance du film au lieu
   de le gonfler. Le script écrit `data-v923-def` (ex. « 406 × 720 »). */
body[data-page="portfolio"] .cp-card > video[data-v923-def]::after { content: none; }

body[data-page="portfolio"] .cp-card .v923-def {
  display: block;
  margin-top: 12px;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ol-silver) 62%, transparent);
}

@media (max-width: 860px) {
  body[data-page="portfolio"] .v6-inline-portfolio-118 > .cp-card,
  body[data-page="portfolio"] .v6-inline-portfolio-118 > .cp-card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: left;
    gap: clamp(24px, 5vw, 38px);
  }
  body[data-page="portfolio"] .v6-inline-portfolio-118 > .cp-card:nth-child(even) > video { order: 0; }
  body[data-page="portfolio"] .v6-inline-portfolio-120 {
    width: min(var(--v923-plaque, 400px), 78vw);
  }
}


/* ── 4 bis · Les mêmes films ailleurs sur le site ────────────────────────
   L'accueil (teaser Chantiers privés) plaçait le film d'Ouchy — 608 × 1080,
   donc vertical — dans un cadre 16/10 en `cover` : il n'en restait qu'un
   tiers, agrandi. Partout où le script a pu lire la définition réelle, la
   plaque prend le rapport du film et ne dépasse jamais sa largeur native. */
/* Spécificité alignée sur `html.lux .cp-card:nth-child(1) .cp-media`, qui
   imposait un 16/10 à un film vertical. */
html.lux body[data-page] .cp-media[data-v923-plaque],
body[data-page] .cp-media[data-v923-plaque] {
  aspect-ratio: var(--v923-ratio, 4 / 5);
  width: 100%;
  max-width: var(--v923-plaque, none);
  height: auto;
  min-height: 0;
  margin-inline: auto;
  justify-self: center;
}

html.lux body[data-page] .cp-media[data-v923-plaque] > video,
body[data-page] .cp-media[data-v923-plaque] > video {
  object-fit: contain;          /* aucun recadrage imposé */
  background: oklch(.1311 calc(var(--ol-c-body)*.281) var(--ol-h));
}

/* Exception : les articles pleine page de `chantiers-prives.html` sont
   composés autour d'une grande plaque et utilisaient déjà `contain` — donc
   sans déformation ni recadrage. Les réduire à 406 px y détruirait la
   composition. On y tolère un agrandissement de 1,35 ×, borne au-delà de
   laquelle l'escalier de pixels devient visible. */
html.lux body[data-page] .cp-article > .cp-media[data-v923-plaque],
body[data-page] .cp-article > .cp-media[data-v923-plaque] {
  max-width: min(620px, calc(var(--v923-plaque) * 1.35));
}

/* Le teaser de l'accueil garde sa composition, mais les trois plaques
   s'alignent désormais sur le même axe et respirent. */
body[data-page="index"] .cp-teaser .cp-media[data-v923-plaque] {
  border: 1px solid var(--v923-filet);
  box-shadow: 0 54px 120px -56px rgba(0, 0, 0, .85);
}


/* ══════════════════════════════════════════════════════════════════════════
   5 · LA PENSÉE — refonte éditoriale

   Trois défauts cumulés :
   a) `.pensee-hero-inner` recevait `width:min(100% - 30px,1160px)` SANS
      `margin-inline:auto` : le titre partait donc à x = 0, collé au bord.
      C'est la « coupure » vue en haut de page.
   b) `.pm-stanza` montait à 52 px : un manifeste de seize strophes en 52 px
      n'est pas un manifeste, c'est une affiche.
   c) `.pensee-cine` mesurait 0 px de haut (la vidéo est en position
      absolue et rien ne donnait de hauteur au conteneur) : la bande
      cinéma n'existait tout simplement pas.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 5.1 Héros ──────────────────────────────────────────────────────────── */
body[data-page="pensee"] .pensee-hero-inner,
body[data-page] .hero-body,
body[data-page] .ph .container,
body[data-page] .ph-full-body,
body[data-page] .merci-inner,
body[data-page] .dxb-hero-in {
  margin-inline: auto;          /* LE correctif de la coupure */
}

body[data-page="pensee"] .pensee-hero {
  min-height: 88svh;
  padding-bottom: clamp(60px, 8vh, 110px);
}

body[data-page="pensee"] .pensee-eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .38em;
  text-transform: uppercase;
  margin-bottom: clamp(20px, 2.4vw, 34px);
}

/* Le titre descend de 150 px à une échelle qui laisse respirer la page. */
body[data-page="pensee"] .pensee-h1 {
  font-size: clamp(48px, 7.2vw, 118px);
  line-height: .96;
  letter-spacing: -.035em;
  margin: 0 0 clamp(22px, 2.6vw, 36px);
  max-width: 15ch;
}

body[data-page="pensee"] .pensee-intro {
  font-size: clamp(17px, 1.32vw, 21px);
  line-height: 1.62;
  max-width: 52ch;
  text-wrap: pretty;
}

/* ── 5.2 Bande cinéma — elle réapparaît ─────────────────────────────────
   Le film source est en 720 × 1280. On le présente dans une scène centrée
   plafonnée à 1100 px (soit ×1,53 seulement) plutôt qu'en pleine largeur
   à 1440 px, et on fond les quatre arêtes : la bande devient une image de
   film projetée, pas un bandeau collé. */
body[data-page="pensee"] .pensee-cine {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  height: auto;
  padding: clamp(46px, 6vw, 96px) var(--pad);
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 50% 50%, oklch(.2751 calc(var(--ol-c-body)*.71) calc(var(--ol-h) + 2.9) / .60), transparent 68%),
    linear-gradient(180deg, oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h)), var(--ol-night) 50%, oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h)));
}

body[data-page="pensee"] .pensee-cine .pensee-video,
body[data-page="pensee"] .pensee-cine video {
  position: relative;
  inset: auto;
  width: min(1100px, 100%);
  height: clamp(240px, 34vh, 420px);
  object-fit: cover;
  object-position: center 46%;
  display: block;
  border: 1px solid var(--v923-filet);
  box-shadow: 0 70px 160px -60px rgba(0, 0, 0, .9);
  /* Les quatre arêtes se dissolvent : plus de rectangle posé. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

body[data-page="pensee"] .pensee-cine-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h) / .55), transparent 26%, transparent 74%, oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h) / .55)),
    linear-gradient(180deg, oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h) / .48), transparent 30%, transparent 70%, oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h) / .58));
}

/* ── 5.3 Le manifeste ───────────────────────────────────────────────────
   Un fond de papier lumineux plutôt qu'un aplat gris, une mesure tenue,
   une échelle de lecture, et une numérotation romaine qui donne au texte
   son statut de document de Maison. */
body[data-page="pensee"] .pensee-body {
  padding: clamp(96px, 11vw, 176px) var(--pad) clamp(80px, 9vw, 140px);
  background:
    radial-gradient(72% 46% at 50% 0%, rgba(255, 255, 255, .96), transparent 64%),
    radial-gradient(52% 38% at 12% 26%, oklch(.8452 calc(var(--ol-c-body)*.356) var(--ol-h) / .22), transparent 70%),
    radial-gradient(58% 42% at 92% 74%, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .13), transparent 72%),
    linear-gradient(180deg, oklch(.984 calc(var(--ol-c-body)*.07) var(--ol-h-pap)) 0%, oklch(.9595 calc(var(--ol-c-body)*.089) var(--ol-h)) 52%, oklch(.975 calc(var(--ol-c-body)*.07) var(--ol-h-pap)) 100%);
}

/* Une lumière traverse le papier au fil du défilement. Elle est pilotée par
   scroll-timeline : rien n'est calculé en JS, tout vit sur le compositeur.
   C'est ce mouvement lent qui retire à la page son aspect d'aplat. */
body[data-page="pensee"] .pensee-body::before {
  content: "";
  position: absolute;
  inset: -10% -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 22% 18%, rgba(255, 255, 255, .96), transparent 68%),
    radial-gradient(30% 26% at 78% 62%, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .17), transparent 72%),
    radial-gradient(44% 34% at 52% 96%, oklch(.7033 calc(var(--ol-c-body)*.572) var(--ol-h) / .18), transparent 70%);
  /* Pas de `filter: blur()` ici : sur une section de 3 400 px de haut il
     force une surface hors écran énorme et casse la composition. Les
     dégradés radiaux sont déjà doux par construction. */
  opacity: .9;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body[data-page="pensee"] .pensee-body::before {
      animation: v923-lumiere-papier linear both;
      animation-timeline: view();
      animation-range: cover;
      will-change: transform;
    }
  }
}

@keyframes v923-lumiere-papier {
  from { transform: translate3d(-3%, -4%, 0) scale(1.06); }
  to   { transform: translate3d( 3%,  4%, 0) scale(1.14); }
}

/* Grain de papier : sans lui, un dégradé clair en 8 bits montre ses bandes. */
body[data-page="pensee"] .pensee-body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .026;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)'/></svg>");
  background-size: 180px 180px;
}

body[data-page="pensee"] .pensee-body-inner {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  margin-inline: auto;
  /* Deux colonnes : un rail collant à gauche, le manifeste à droite. La
     colonne de texte est bornée en `ch` et l'ensemble est centré : le bloc
     tombe ainsi sur l'axe optique de la page au lieu de flotter à gauche. */
  display: grid;
  grid-template-columns: 200px minmax(0, 64ch);
  justify-content: center;
  gap: clamp(30px, 5vw, 92px);
  align-items: start;
}

/* Le rail : il est injecté par le script (voir olympe-atelier-v923.js). */
body[data-page="pensee"] .v923-rail {
  position: sticky;
  top: clamp(120px, 16vh, 190px);
  align-self: start;
  padding-top: 6px;
  border-top: 1px solid oklch(.2599 calc(var(--ol-c-body)*.403) var(--ol-h) / .18);
}

body[data-page="pensee"] .v923-rail-t {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: oklch(.5147 calc(var(--ol-c-body)*.709) var(--ol-h));
  margin: 16px 0 10px;
}

body[data-page="pensee"] .v923-rail-s {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: oklch(.4278 calc(var(--ol-c-body)*.474) var(--ol-h));
  margin: 0 0 22px;
  max-width: 22ch;
}

/* Jauge de lecture : la barre se remplit au fil du défilement du manifeste,
   pilotée par scroll-timeline — aucun écouteur JS, donc aucun coût. */
body[data-page="pensee"] .v923-jauge {
  position: relative;
  height: 1px;
  background: oklch(.2599 calc(var(--ol-c-body)*.403) var(--ol-h) / .16);
  overflow: hidden;
}

body[data-page="pensee"] .v923-jauge::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: linear-gradient(90deg, var(--ol-bronze), oklch(.5147 calc(var(--ol-c-body)*.709) var(--ol-h)));
  transform-origin: left;
  transform: scaleX(0);
}

@supports (animation-timeline: scroll()) {
  body[data-page="pensee"] .v923-jauge::after {
    animation: v923-jauge linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes v923-jauge {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

body[data-page="pensee"] .pensee-manifesto {
  max-width: none;
  margin: 0;
}

/* L'échelle de lecture. C'était le défaut principal signalé. */
body[data-page="pensee"] .pm-stanza {
  font-size: clamp(20px, 1.72vw, 29px);
  line-height: 1.46;
  letter-spacing: -.014em;
  color: oklch(.2599 calc(var(--ol-c-body)*.403) var(--ol-h));
  margin: 0;
  text-wrap: pretty;
}

/* Les strophes isolées portent la voix de la Maison : elles se détachent. */
body[data-page="pensee"] .pm-stanza--solo {
  font-style: italic;
  font-size: clamp(22px, 1.94vw, 33px);
  color: oklch(.2184 calc(var(--ol-c-body)*.391) var(--ol-h));
}

body[data-page="pensee"] .pm-stanza--seal {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 46px);
  line-height: 1.12;
  letter-spacing: -.03em;
  color: oklch(.2013 calc(var(--ol-c-body)*.371) var(--ol-h));
  margin-top: 6px;
}

body[data-page="pensee"] .pm-stanza--seal em {
  color: var(--ol-opal-deep, oklch(.5147 calc(var(--ol-c-body)*.709) var(--ol-h)));
}

/* Lettrine sur la première strophe : l'entrée en matière d'un document.
   Deux lignes de hauteur exactement, calées sur la ligne de base. */
body[data-page="pensee"] .pm-stanza:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 2.8em;
  line-height: .80;
  float: left;
  margin: .05em .03em -.05em 0;
  color: var(--ol-opal-deep, oklch(.5147 calc(var(--ol-c-body)*.709) var(--ol-h)));
}

/* Le séparateur : un losange de Maison remplace le trait vertical de 54 px
   qui hachait la lecture. Numéroté en chiffres romains par un compteur. */
body[data-page="pensee"] .pensee-manifesto { counter-reset: v923-strophe; }

body[data-page="pensee"] .pm-rule {
  position: relative;
  display: block;
  height: auto;
  margin: clamp(34px, 3.6vw, 54px) 0;
  background: none;
  opacity: 1;
  text-align: left;
  counter-increment: v923-strophe;
}

body[data-page="pensee"] .pm-rule::before {
  content: counter(v923-strophe, upper-roman);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .30em;
  color: color-mix(in oklab, var(--ol-bronze) 78%, oklch(.5147 calc(var(--ol-c-body)*.709) var(--ol-h)));
}

body[data-page="pensee"] .pm-rule::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 1px;
  background: linear-gradient(90deg,
    oklch(.2599 calc(var(--ol-c-body)*.403) var(--ol-h) / .22), oklch(.2599 calc(var(--ol-c-body)*.403) var(--ol-h) / .05) 42%, transparent 78%);
}

body[data-page="pensee"] .pm-rule--final::after {
  background: linear-gradient(90deg, var(--ol-bronze), oklch(.2599 calc(var(--ol-c-body)*.403) var(--ol-h) / .10) 52%, transparent);
}

/* Le colophon appartient au document, pas au rail : il reste donc dans la
   colonne du manifeste, sous le sceau. */
body[data-page="pensee"] .pensee-signature--house {
  grid-column: 2;
  margin-top: clamp(54px, 6vw, 92px);
  padding-top: clamp(26px, 3vw, 42px);
  border-top: 1px solid oklch(.2599 calc(var(--ol-c-body)*.403) var(--ol-h) / .14);
  font-family: var(--font-display);
  font-size: clamp(19px, 1.5vw, 25px);
  letter-spacing: .02em;
  color: oklch(.2599 calc(var(--ol-c-body)*.403) var(--ol-h));
}

body[data-page="pensee"] .pensee-signature--house small {
  display: block;
  margin-top: 9px;
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: oklch(.5147 calc(var(--ol-c-body)*.709) var(--ol-h));
}

@media (max-width: 900px) {
  body[data-page="pensee"] .pensee-body-inner { grid-template-columns: minmax(0, 1fr); }
  body[data-page="pensee"] .v923-rail { position: static; margin-bottom: 34px; }
  body[data-page="pensee"] .pensee-signature--house { grid-column: 1; }
  body[data-page="pensee"] .pensee-h1 { max-width: none; }
  body[data-page="pensee"] .pensee-cine .pensee-video,
  body[data-page="pensee"] .pensee-cine video { height: clamp(200px, 30vh, 300px); }
}


/* ══════════════════════════════════════════════════════════════════════════
   6 · MÉDIAS — aucune image ne se coupe au couteau

   Règle générale : tout visuel de section reçoit un cadre (filet + ombre)
   et une arête fondue. C'est ce qui distingue une planche d'un collage.
   ══════════════════════════════════════════════════════════════════════════ */

body[data-page="savoir-faire"] .v6-inline-savoir-faire-3,
body[data-page] .fig,
body[data-page] .sc-live-fig,
body[data-page] .dxb-ph {
  border: 1px solid color-mix(in oklab, var(--ol-platinum) 9%, transparent);
  box-shadow: 0 44px 100px -52px rgba(0, 0, 0, .70);
}

/* Les deux mentions verticales qui se chevauchaient (`.cv90-frame__mark` et
   l'étiquette du rail de progression) sont corrigées à la source, dans
   `assets/caravelli-signature/caravelli-signature-v90.css` : cette feuille
   est partagée avec Luxury Branch, où le défaut existait aussi et où la
   présente couche n'est volontairement pas chargée. */

/* Le séparateur de section devient un cheveu qui s'éteint aux extrémités,
   au lieu d'une règle pleine largeur qui souligne la coupure. */
body[data-page] .sep,
body[data-page] .sep--light {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg,
    transparent, var(--v923-filet) 22%, var(--v923-filet-clair) 50%, var(--v923-filet) 78%, transparent);
}


/* ══════════════════════════════════════════════════════════════════════════
   7 · CINÉTIQUE — révélations pilotées par le défilement

   `animation-timeline: view()` remplace l'IntersectionObserver là où le
   navigateur le sait faire : l'animation vit sur le compositeur, ne
   déclenche aucun style recalculé et suit exactement la position réelle du
   bloc. Repli : rien ne bouge, tout reste visible et lisible.
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    body[data-page="pensee"] .pm-stanza,
    body[data-page="portfolio"] .v6-inline-portfolio-118 > .cp-card,
    body[data-page="index"] .lux-matiere figure {
      animation: v923-monte linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 46%;
    }

    /* Décalage par colonne sur la bande Matière : les quatre visuels ne
       montent pas ensemble, ils se répondent. */
    body[data-page="index"] .lux-matiere figure:nth-child(2) { animation-range: entry 9%  entry 50%; }
    body[data-page="index"] .lux-matiere figure:nth-child(3) { animation-range: entry 12% entry 54%; }
    body[data-page="index"] .lux-matiere figure:nth-child(4) { animation-range: entry 15% entry 58%; }

    /* Le grand titre du carnet gagne une très lente dérive d'échelle : le
       « poids » d'une page de luxe tient à ce genre de détail invisible. */
    body[data-page="portfolio"] .v6-inline-portfolio-120 {
      animation: v923-respire linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

/* ── 7.1 Le filet vivant ────────────────────────────────────────────────
   Un cheveu de lumière tourne très lentement autour des cartouches au
   survol. Il est produit par un dégradé CONIQUE dont l'angle est une
   propriété enregistrée (@property) : c'est la seule façon d'animer un
   angle en CSS pur, et cela reste sur le compositeur.
   ─────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  body[data-page="portfolio"] .v6-inline-portfolio-33::after,
  body[data-page="index"] .proj-iw::before {
    content: "";
    display: block;            /* le système mettait `.proj-iw::before` à none */
    position: absolute;
    inset: -1px;
    z-index: 4;
    pointer-events: none;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--v923-angle),
      transparent 0turn,
      transparent .58turn,
      color-mix(in oklab, var(--ol-bronze) 88%, transparent) .74turn,
      color-mix(in oklab, var(--ol-carrara) 92%, transparent) .80turn,
      color-mix(in oklab, var(--ol-bronze) 88%, transparent) .86turn,
      transparent 1turn);
    /* Le dégradé ne subsiste que sur le contour : masque « padding-box
       creusé dans border-box », la technique de bord dégradé sans SVG. */
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .8s var(--v923-ease);
  }

  body[data-page="portfolio"] .v6-inline-portfolio-33:hover::after,
  body[data-page="index"] .proj-sl:hover .proj-iw::before {
    opacity: .9;
    animation: v923-tour 5.5s linear infinite;
  }
}

@keyframes v923-tour {
  to { --v923-angle: 1turn; }
}

/* ── 7.2 Détail typographique ───────────────────────────────────────────
   Chiffres elzéviriens dans le corps de texte, ligatures rares sur les
   titres : ce sont ces réglages-là qui font qu'une page « sent » la
   composition et non le gabarit. */
body[data-page] :is(.legacy-copy, .cp-card .body, .pm-stanza, .pensee-intro, .lead) {
  font-variant-numeric: oldstyle-nums proportional-nums;
}

body[data-page] :is(.display, .ph-h1, .pensee-h1, .legacy-title, .proj-nm, .cp-card .h2) {
  font-variant-ligatures: common-ligatures discretionary-ligatures;
  font-kerning: normal;
}

@keyframes v923-monte {
  from { opacity: 0; transform: translate3d(0, 30px, 0); filter: blur(2px); }
  to   { opacity: 1; transform: none;                    filter: blur(0); }
}


/* ══════════════════════════════════════════════════════════════════════════
   8 · LE VENT DE LUXE — toutes les pages

   Ce qui précède corrigeait des défauts. Ce qui suit relève le niveau
   général : ce sont les gestes qui, répétés page après page, font la
   différence entre un gabarit et une Maison. Aucun n'est spectaculaire pris
   isolément — c'est leur constance qui se voit.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 8.1 Le chrome ──────────────────────────────────────────────────────
   L'en-tête flottait sur le contenu sans jamais s'en détacher. Dès le
   premier défilement il gagne une profondeur de champ et un cheveu bronze :
   la navigation devient une plaque posée sur la page, pas un calque perdu. */

/* `backdrop-filter` et `background-color` NE sont pas mis en transition :
   partant de `none` / `transparent`, l'interpolation reste bloquée sur sa
   valeur de départ dans plusieurs moteurs — l'en-tête ne se voilait donc
   jamais. Ils basculent d'un coup, seule l'ombre s'installe en douceur.
   C'est aussi le réglage le moins coûteux : un flou de fond animé sur une
   barre fixe est l'un des effets les plus chers du navigateur. */
body[data-page] .hd {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

body[data-page].hc-defile .hd,
html.cv90-has-scrolled body[data-page] .hd {
  background: color-mix(in oklab, var(--ol-night) 62%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg,
      transparent, var(--v923-filet) 18%, var(--v923-filet-clair) 50%, var(--v923-filet) 82%, transparent) 1;
  box-shadow: 0 24px 60px -40px rgba(0, 0, 0, .9);
}

/* La sélection de texte porte la couleur de la Maison. Détail minuscule,
   mais c'est le genre de chose qu'on ne voit que sur les sites soignés. */
body[data-page] ::selection {
  background: color-mix(in oklab, var(--ol-bronze) 34%, var(--ol-satin));
  color: oklch(1 0 var(--ol-h));
}

/* Anneau de focus visible et de Maison : l'accessibilité au clavier ne doit
   pas ressembler à un défaut de style. */
body[data-page] :is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 1px solid var(--ol-bronze);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Barre de défilement fine, dans la palette. */
body[data-page] { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--ol-bronze) 46%, transparent) transparent; }
body[data-page]::-webkit-scrollbar { width: 10px; }
body[data-page]::-webkit-scrollbar-track { background: transparent; }
body[data-page]::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--ol-bronze) 40%, transparent);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 10px;
}


/* ── 8.2 Le filet de chapitre ───────────────────────────────────────────
   Chaque surtitre reçoit un cheveu qui se dessine à l'approche. C'est la
   ponctuation éditoriale du site : elle donne un début à chaque section au
   lieu de laisser les blocs se succéder. */

body[data-page] :is(.eyebrow, .kicker, .hero-ey, .pensee-eyebrow, .dxb-date, .legacy-index):not(.v923-sans-filet) {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

body[data-page] :is(.eyebrow, .kicker, .hero-ey, .pensee-eyebrow, .dxb-date):not(.v923-sans-filet)::after {
  content: "";
  display: block;
  width: clamp(34px, 4.4vw, 76px);
  height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--v923-filet-clair), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    body[data-page] :is(.eyebrow, .kicker, .hero-ey, .pensee-eyebrow, .dxb-date):not(.v923-sans-filet)::after {
      animation: v923-filet linear both;
      animation-timeline: view();
      animation-range: entry 14% entry 52%;
    }
  }
}

@keyframes v923-filet {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}


/* ── 8.3 L'éclat des titres sur fond de nuit ────────────────────────────
   Un très léger dégradé vertical dans la lettre — carrare en haut, platine
   en bas. C'est ce qui donne au Bodoni son aspect de métal poli plutôt que
   d'aplat blanc. Réservé aux fonds sombres : sur papier clair, ce serait
   une faute. */

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  body[data-page] :is(.sec--noir, .lux-deep, .legacy-film, .cp-teaser, .ft, .cine) :is(.display, .h2, .legacy-title, .oc-frag-t) {
    background-image: linear-gradient(180deg,
      oklch(1 0 var(--ol-h)) 0%,
      var(--ol-carrara) 42%,
      color-mix(in oklab, var(--ol-platinum) 88%, var(--ol-silver)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Repli si le clip échoue : la couleur d'origine reste lisible. */
    color: var(--ol-carrara);
  }

  /* Les italiques gardent leur voix propre : on leur rend une teinte pleine. */
  body[data-page] :is(.sec--noir, .lux-deep, .legacy-film, .cp-teaser, .ft, .cine) :is(.display, .h2, .legacy-title, .oc-frag-t) em {
    -webkit-text-fill-color: var(--ol-platinum);
    color: var(--ol-platinum);
  }
}


/* ── 8.4 Les médias, partout, dans un cadre ─────────────────────────────
   Le site posait ses photographies à nu sur le fond. Chacune reçoit
   désormais un filet, une ombre profonde et basse, et une arête inférieure
   fondue : trois choses qui distinguent une planche d'un collage. */

body[data-page] :is(.sec, .lux-sec, .pj-sec, .dxb-sec, .cp-teaser, .legacy-film) figure:not(.cp-card):not([class*="matiere"]) {
  position: relative;
  isolation: isolate;
}

body[data-page] :is(.sec, .lux-sec, .pj-sec, .dxb-sec) :is(figure, .fig, .pj-iw, .sc-live-fig) > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Dérive très lente des visuels de section : le décor respire pendant la
   lecture, sans jamais attirer l'œil. Transformation seule — donc rien à
   recalculer, tout se joue sur le compositeur. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    body[data-page] :is(.fig, .pj-iw, .sc-live-fig, .dxb-ph) > img,
    body[data-page] :is(.sec, .lux-sec, .pj-sec) figure > img {
      animation: v923-derive linear both;
      animation-timeline: view();
      animation-range: cover;
      will-change: transform;
    }
  }
}

@keyframes v923-derive {
  from { transform: scale(1.045) translate3d(0,  1.4%, 0); }
  to   { transform: scale(1.045) translate3d(0, -1.4%, 0); }
}


/* ── 8.5 La finition des commandes ──────────────────────────────────────
   Les boutons avaient déjà leur balayage de lumière. Il leur manquait le
   geste : la flèche avance, la lettre s'ouvre, le filet s'allume. */

body[data-page] :is(.btn, .btn-l, .btn-n, .btn-o, .ncta) {
  transition:
    color .55s var(--v923-ease),
    background-color .55s var(--v923-ease),
    border-color .55s var(--v923-ease),
    letter-spacing .55s var(--v923-ease),
    box-shadow .7s var(--v923-ease),
    transform .55s var(--v923-ease);
}

body[data-page] :is(.btn, .btn-l, .btn-n, .btn-o, .ncta):hover {
  letter-spacing: .30em;
  box-shadow: 0 18px 46px -26px rgba(0, 0, 0, .8);
}

body[data-page] :is(.btn, .btn-l, .btn-n, .btn-o) .arr {
  display: inline-block;
  transition: transform .55s var(--v923-ease);
}

body[data-page] :is(.btn, .btn-l, .btn-n, .btn-o):hover .arr {
  transform: translateX(6px);
}

/* Le lien de texte : un cheveu qui se dessine sous la ligne, jamais un
   soulignement franc. */
body[data-page] :is(.sec, .lux-sec, .pj-sec, .dxb-sec, .pensee-body) p a:not(.btn):not(.btn-l):not(.btn-n):not(.btn-o) {
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--ol-bronze), var(--ol-bronze));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .55s var(--v923-ease);
}

body[data-page] :is(.sec, .lux-sec, .pj-sec, .dxb-sec, .pensee-body) p a:not(.btn):not(.btn-l):not(.btn-n):not(.btn-o):hover {
  background-size: 100% 1px;
}


/* ── 8.6 Le pied de page — la plaque de clôture ─────────────────────────
   Un pied de page bâclé annule tout ce qui précède. Celui-ci devient la
   dernière plaque du document : filet d'entrée, respiration, colonnes
   tenues, mentions au bon poids. */

body[data-page] .ft {
  position: relative;
  padding-block: clamp(76px, 8vw, 128px) clamp(38px, 4vw, 58px);
}

body[data-page] .ft::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--v923-filet) 20%, var(--v923-filet-clair) 50%, var(--v923-filet) 80%, transparent);
}

body[data-page] .ft-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(38px, 5vw, 92px);
  align-items: start;
}

body[data-page] .ft-name {
  display: block;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.3vw, 21px);
  letter-spacing: .16em;
  color: var(--ol-carrara);
}

body[data-page] .ft-tag {
  display: block;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ol-silver) 86%, transparent);
}

body[data-page] .ft-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px clamp(20px, 2.4vw, 40px);
  align-content: start;
}

body[data-page] .ft-nav a {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ol-carrara) 74%, transparent);
  text-decoration: none;
  padding-bottom: 4px;
  background-image: linear-gradient(90deg, var(--ol-bronze), var(--ol-bronze));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color .5s var(--v923-ease), background-size .5s var(--v923-ease);
}

body[data-page] .ft-nav a:hover {
  color: oklch(1 0 var(--ol-h));
  background-size: 100% 1px;
}

body[data-page] .ft-sep {
  margin-block: clamp(34px, 4vw, 58px) clamp(20px, 2.4vw, 32px);
}

body[data-page] .ft-bot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: baseline;
}

body[data-page] :is(.ft-cp, .ft-indep, .ft-legal) {
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: color-mix(in oklab, var(--ol-silver) 78%, transparent);
}

body[data-page] .ft-indep {
  padding-left: 16px;
  border-left: 1px solid var(--v923-filet);
}

@media (max-width: 860px) {
  body[data-page] .ft-top { grid-template-columns: minmax(0, 1fr); }
}

@keyframes v923-respire {
  from { transform: scale(1.012) translate3d(0, 8px, 0); }
  to   { transform: scale(1)     translate3d(0, -8px, 0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   9 · STABILISATION V923.1 — média natif, scène unique, zéro collision
   Aucune police n'est modifiée dans ce bloc.
   ══════════════════════════════════════════════════════════════════════════ */

/* L'accueil tient dans la première scène même sur un écran 1280 × 720.
   Le titre et le décompte occupent deux plans distincts, sans recouvrement. */
@media (min-width: 1100px) {
  body[data-page="index"] .hero {
    min-height: calc(100svh - 84px);
    height: calc(100svh - 84px);
  }
  body[data-page="index"] .hero-body {
    box-sizing: border-box;
    position: absolute;
    inset: clamp(142px, 20vh, 175px) auto auto max(var(--pad), calc((100vw - 1180px) / 2));
    width: min(46vw, 548px);
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  body[data-page="index"] .hero-motif {
    width: auto;
    height: clamp(42px, 5.4vh, 54px);
    object-fit: contain;
    object-position: left center;
    margin-bottom: 13px;
  }
  body[data-page="index"] .hero-ey { max-width: 530px; }
  body[data-page="index"] .hero-h1 {
    width: min(46vw, 548px);
    max-width: 548px;
    margin: 14px 0 18px;
    font-size: clamp(58px, 5.8vw, 76px);
    line-height: .88;
  }
  body[data-page="index"] .hero-h1 .sln { line-height: .94; }
  body[data-page="index"] .hero-sub {
    width: min(43vw, 520px);
    max-width: 520px;
    font-size: clamp(14px, 1.12vw, 17px);
    line-height: 1.52;
  }
  body[data-page="index"] .hero-act { margin-top: 20px; }
  body[data-page="index"] .hero-event-trace { display: none; }
  body[data-page="index"] .hero > .cv912-countdown--hero {
    position: absolute;
    z-index: 7;
    top: 45%;
    right: max(34px, calc((100vw - 1180px) / 2));
    bottom: auto;
    width: min(42vw, 500px);
    margin: 0;
    padding: 25px 27px 23px;
    transform: translateY(-50%);
  }
  body[data-page="index"] .cv912-countdown__value {
    font-size: clamp(42px, 4vw, 62px);
  }
  body[data-page="index"] .hero-sc { display: none; }
}

@media (min-width: 821px) and (max-width: 1099px) {
  body[data-page="index"] .hero {
    min-height: auto;
    height: auto;
    display: block;
    padding-bottom: 76px;
  }
  body[data-page="index"] .hero-body {
    padding: 150px 0 44px;
  }
  body[data-page="index"] .hero-h1 {
    max-width: 760px;
    font-size: clamp(62px, 9vw, 92px);
  }
  body[data-page="index"] .hero > .cv912-countdown--hero {
    position: relative;
    inset: auto;
    width: min(calc(100% - var(--pad) - var(--pad)), 760px);
    margin: 0 auto;
    transform: none;
  }
  body[data-page="index"] .hero-event-trace { display: none; }
}

/* Les quatre cartes du portfolio partagent exactement le même traitement.
   Leur ratio source est vertical : 3/4 conserve le cadre sans couper. */
body[data-page="portfolio"] :is(.v6-inline-portfolio-33,.v6-inline-portfolio-41,.v6-inline-portfolio-49,.v6-inline-portfolio-57) {
  border: 1px solid color-mix(in oklab, var(--ol-platinum) 10%, transparent);
  box-shadow: 0 46px 110px -54px rgba(0, 0, 0, .72);
  isolation: isolate;
}
body[data-page="portfolio"] :is(.v6-inline-portfolio-34,.v6-inline-portfolio-42,.v6-inline-portfolio-50,.v6-inline-portfolio-58) {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: linear-gradient(145deg, oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h)), oklch(.273 calc(var(--ol-c-body)*.76) var(--ol-h)));
  transform: none;
}

/* Une seule destination pour les films privés : la page Chantiers. */
body[data-page="portfolio"] .v923-chantiers-teaser {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(76svh, 820px);
  display: grid;
  place-items: center;
  padding: clamp(90px, 12vw, 170px) var(--pad);
  color: var(--ol-carrara);
  background:
    radial-gradient(52% 80% at 78% 35%, oklch(.7724 calc(var(--ol-c-body)*.438) var(--ol-h) / .16), transparent 70%),
    linear-gradient(145deg, oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h)), oklch(.2606 calc(var(--ol-c-body)*.72) var(--ol-h)) 58%, oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h)));
}
body[data-page="portfolio"] .v923-chantiers-teaser__light {
  position: absolute;
  z-index: 0;
  inset: -34% 44% -34% -18%;
  transform: rotate(8deg);
  background: linear-gradient(98deg, transparent 24%, oklch(.966 calc(var(--ol-c-body)*.07) var(--ol-h-pap) / .03) 38%, oklch(.966 calc(var(--ol-c-body)*.07) var(--ol-h-pap) / .18) 49%, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .08) 54%, transparent 70%);
  filter: blur(18px);
  animation: v923-lame-privee 11s var(--v923-ease) infinite alternate;
}
body[data-page="portfolio"] .v923-chantiers-teaser__inner {
  position: relative;
  z-index: 2;
  width: min(920px, 100%);
  text-align: center;
}
body[data-page="portfolio"] .v923-chantiers-teaser h2 {
  margin: 18px auto 26px;
  max-width: 12ch;
  font-size: clamp(52px, 8vw, 118px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.035em;
  color: var(--ol-carrara);
  text-wrap: balance;
}
body[data-page="portfolio"] .v923-chantiers-teaser h2 em { color: var(--ol-platinum); }
body[data-page="portfolio"] .v923-chantiers-teaser p:not(.eyebrow) {
  max-width: 58ch;
  margin: 0 auto 34px;
  color: color-mix(in oklab, var(--ol-carrara) 78%, transparent);
  text-wrap: pretty;
}
@keyframes v923-lame-privee {
  from { transform: translate3d(-8%,0,0) rotate(8deg); opacity: .42; }
  to   { transform: translate3d(18%,0,0) rotate(8deg); opacity: .82; }
}

/* Les portraits sont présentés comme des plaques, jamais transformés en
   panoramas. Le visiteur voit donc l'intégralité de l'image source. */
body[data-page="index"] .legacy-media {
  width: min(100%, 620px);
  max-width: 620px;
  aspect-ratio: 736 / 1030;
  justify-self: center;
}
body[data-page="index"] .legacy-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}
body[data-page="index"] .lux-matiere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-page="index"] .lux-matiere figure { aspect-ratio: 16 / 10; }

body[data-page="savoir-faire"] .v6-inline-savoir-faire-7 {
  padding: clamp(72px, 9vw, 128px) var(--pad);
  background: radial-gradient(62% 78% at 50% 38%, oklch(.3263 calc(var(--ol-c-body)*.788) var(--ol-h)), oklch(.2068 calc(var(--ol-c-body)*.543) var(--ol-h)) 64%, oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h)));
}
body[data-page="savoir-faire"] .v6-inline-savoir-faire-8 {
  width: min(720px, 72vw);
  margin-inline: auto;
  padding: clamp(10px, 1.4vw, 18px);
  border: 1px solid var(--v923-filet);
  box-shadow: 0 70px 150px -64px rgba(0,0,0,.92);
}
body[data-page="savoir-faire"] .v6-inline-savoir-faire-9 {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

body[data-page="pensee"] .pensee-cine .pensee-video,
body[data-page="pensee"] .pensee-cine video {
  width: min(420px, 76vw);
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  object-position: center;
}

/* Fumée volumétrique de Chantiers : sous le texte et sous les commandes. */
body[data-page="chantiers-prives"] .cp-page-hero { isolation: isolate; }
body[data-page="chantiers-prives"] .cp-page-hero > canvas,
body[data-page="chantiers-prives"] .cp-page-hero > .ol-fumee-v923 {
  z-index: 1;
}
body[data-page="chantiers-prives"] .cp-page-hero > div:not(.ol-fumee-v923) {
  position: relative;
  z-index: 3;
}
body[data-page="chantiers-prives"] .cp-page-hero::before {
  color: oklch(.9046 calc(var(--ol-c-body)*.11) var(--ol-h) / .09) !important;
  -webkit-text-fill-color: oklch(.9046 calc(var(--ol-c-body)*.11) var(--ol-h) / .09) !important;
  text-shadow: 0 0 64px oklch(.8036 calc(var(--ol-c-body)*.42) var(--ol-h) / .035) !important;
}

/* Le grand décompte appartient au héros Dubaï, plus au pied de page. */
body[data-page="inauguration-dubai"] #ol-atmosphere-dubai {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
body[data-page="inauguration-dubai"] .dxb-hero {
  height: calc(100svh - 84px);
  min-height: 636px;
}
body[data-page="inauguration-dubai"] .dxb-hero-in {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(92px, 13vh, 132px);
  padding-bottom: clamp(58px, 8vh, 78px);
}
body[data-page="inauguration-dubai"] .dxb-h1 {
  max-width: 640px;
  font-size: clamp(62px, 6.5vw, 92px);
  line-height: .92;
}
body[data-page="inauguration-dubai"] .dxb-sub { max-width: 570px; }
body[data-page="inauguration-dubai"] .dxb-monument {
  top: 12%;
  right: clamp(52px, 6vw, 92px);
  width: min(36vw, 460px);
  transform: none;
  opacity: .76;
}
body[data-page="inauguration-dubai"] .dxb-hero > .cv912-countdown--hero {
  position: absolute;
  z-index: 6;
  right: max(var(--pad), calc((100vw - 1280px) / 2));
  bottom: clamp(30px, 4.5vh, 48px);
  width: min(42vw, 510px);
  margin: 0;
  padding: 22px 24px 20px;
}

/* Le champ de lumière reste une atmosphère, jamais un voile devant le texte. */
body[data-page] .ol-lightfield { z-index: 0; opacity: .24; }

/* La dérive conserve le mouvement compositeur mais n'agrandit plus les
   médias : aucune coupe supplémentaire au fil du défilement. */
@keyframes v923-derive {
  from { transform: translate3d(0,  .65%, 0); }
  to   { transform: translate3d(0, -.65%, 0); }
}

@media (max-width: 1180px) {
  body.nopen .cv912-countdown-compact {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 820px) {
  body[data-page="index"] .dubai-band {
    color: oklch(.966 calc(var(--ol-c-body)*.07) var(--ol-h-pap) / .82) !important;
    background: linear-gradient(90deg, oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h) / .96), oklch(.3029 calc(var(--ol-c-body)*.782) calc(var(--ol-h) + -2.1) / .96), oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h) / .96));
    border-color: oklch(.9046 calc(var(--ol-c-body)*.11) var(--ol-h) / .24);
  }
  body[data-page="index"] .dubai-band-txt { color: oklch(.966 calc(var(--ol-c-body)*.07) var(--ol-h-pap) / .82) !important; }
  body[data-page="index"] .dubai-band strong { color: #fff !important; }
  body[data-page="index"] .hero-h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(44px, 11.6vw, 52px);
    line-height: .98;
    letter-spacing: -.048em;
  }
  body[data-page="index"] .lux-matiere { grid-template-columns: 1fr; }
  body[data-page="index"] .lux-matiere figure { aspect-ratio: 16 / 10; }
  body[data-page="savoir-faire"] .v6-inline-savoir-faire-8 { width: min(520px, 88vw); }
  body[data-page="inauguration-dubai"] .dxb-hero {
    display: block;
    height: auto;
    min-height: auto;
    padding-bottom: 58px;
  }
  body[data-page="inauguration-dubai"] .dxb-hero-in {
    height: auto;
    display: block;
    padding-top: clamp(116px, 20vw, 154px);
    padding-bottom: 34px;
  }
  body[data-page="inauguration-dubai"] .dxb-h1 {
    max-width: 12ch;
    font-size: clamp(54px, 14vw, 82px);
  }
  body[data-page="inauguration-dubai"] .dxb-hero > .cv912-countdown--hero {
    position: relative;
    inset: auto;
    width: min(calc(100% - var(--pad) - var(--pad)), 620px);
    margin: 0 auto;
    transform: none;
  }
  body[data-page="inauguration-dubai"] .dxb-monument {
    top: 31%;
    right: -8vw;
    width: 82vw;
    transform: none;
    opacity: .56;
  }
}

@media (max-width: 560px) {
  body[data-page="pensee"] .pensee-cine .pensee-video,
  body[data-page="pensee"] .pensee-cine video { width: min(360px, 86vw); }
  body[data-page="inauguration-dubai"] .dxb-monument {
    top: 29%;
    right: -12vw;
    width: 94vw;
    opacity: .52;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page] .lux-matiere figcaption::after { transition: none; }
  body[data-page="index"] .proj-track { transition: none; }
}