@charset "UTF-8";
/*
 * CARAVELLI — ROI DU DESIGN / gate 2026-08-14
 *
 * Traduction de cinq principes observés sur les sites officiels de studios
 * primés, sans copier leurs formes, leurs assets ou leur code :
 *   Immersive Garden — relief clair et lumière rasante ;
 *   Dogstudio       — profondeur de pièces reliées ;
 *   Locomotive      — monumentalité éditoriale ;
 *   Active Theory   — caméra pilotée par le défilement ;
 *   Resn            — facettes sculpturales et lumière spéculaire.
 *
 * Cette feuille n'ajoute ni canvas, ni boucle RAF, ni nœud décoratif. Elle
 * anime uniquement les trois couches déjà créées par l'orchestrateur
 * (.cv3-room-light + les deux pseudo-éléments de .cv3-plane) et applique un
 * étalonnage statique au host d'accueil existant. Les textes, formulaires,
 * légendes et actions demeurent dans le plan de contenu.
 */

:root {
  --roi-carrara: rgba(250, 247, 239, .82);
  --roi-platinum: rgba(218, 222, 224, .44);
  --roi-champagne: rgba(203, 173, 114, .42);
  --roi-obsidian: rgba(7, 8, 9, .44);
  --roi-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------------------------------------------------------------------
   WITNESS ROOMS — visible depth with the orchestrator's existing layers.
   --------------------------------------------------------------------- */
body.cv3-nonhome.cv3-witness .cv3-room {
  isolation: isolate;
}

body.cv3-nonhome.cv3-witness .cv3-room-light {
  transform-origin: 52% 42%;
}

/* The plane's own after-layer becomes a low-opacity faceted reflection.
   Captions and content are already protected at z-index 4 by the Studios
   gate; this layer remains at the orchestrator's z-index 1. */
body.cv3-nonhome.cv3-witness .cv3-plane::after {
  background:
    linear-gradient(124deg, transparent 0 35%, rgba(247, 245, 239, .13) 43%, transparent 51%),
    linear-gradient(54deg, transparent 0 48%, rgba(203, 173, 114, .08) 54%, transparent 63%),
    radial-gradient(42% 58% at 64% 34%, rgba(218, 222, 224, .14), transparent 74%);
  clip-path: polygon(0 0, 100% 0, 100% 76%, 79% 100%, 0 90%);
  mix-blend-mode: screen;
  opacity: .48;
  transform: translate3d(-4%, 2%, 0) scale(1.1) rotate(-.18deg);
  transform-origin: 50% 50%;
}

body.cv3-nonhome.cv3-witness .cv3-plane:is(:hover, :focus-within)::after {
  opacity: .76;
}

/* Carrara rooms need a darker engraved reflection, never a white veil. */
body.cv3-nonhome.cv3-witness :is(.cv3-material--carrara, .cv3-material--ivory) .cv3-plane::after {
  background:
    linear-gradient(124deg, transparent 0 35%, rgba(35, 38, 40, .10) 43%, transparent 51%),
    linear-gradient(54deg, transparent 0 48%, rgba(121, 94, 54, .075) 54%, transparent 63%),
    radial-gradient(42% 58% at 64% 34%, rgba(35, 38, 40, .07), transparent 74%);
  mix-blend-mode: multiply;
}

/* Locomotive-inspired editorial discipline: only balance and measure. The
   House's Bodoni family, colors and contrast gates remain untouched. */
body.cv3-nonhome.cv3-witness :is(
  .ph-h1,
  .display,
  .h2,
  .dxb-t,
  .cine-quote blockquote
) {
  text-wrap: balance;
  font-kerning: normal;
  font-feature-settings: var(--cv-typo-current-ffs, "kern" 1, "liga" 1);
}

/* Active Theory camera + Immersive Garden light + Resn facets. These are
   scroll-linked compositor animations; no JavaScript scheduler is created. */
@supports (animation-timeline: view()) {
  body.cv3-nonhome.cv3-witness .cv3-room {
    view-timeline-name: --roi-room;
    view-timeline-axis: block;
  }

  body.cv3-nonhome.cv3-witness .cv3-room-light {
    animation: roi-room-light linear both;
    animation-timeline: --roi-room;
    animation-range: entry 0% exit 100%;
  }

  body.cv3-nonhome.cv3-witness .cv3-plane {
    view-timeline-name: --roi-plane;
    view-timeline-axis: block;
  }

  body.cv3-nonhome.cv3-witness .cv3-plane::after {
    animation: roi-facet-camera linear both;
    animation-timeline: --roi-plane;
    animation-range: entry 0% exit 100%;
  }

}

@keyframes roi-room-light {
  0%   { opacity: .28; transform: translate3d(-4%, 4%, 0) scale(1.12); }
  48%  { opacity: .86; transform: translate3d(1%, -1%, 0) scale(1.04); }
  100% { opacity: .38; transform: translate3d(4%, -3%, 0) scale(1.12); }
}

@keyframes roi-facet-camera {
  0%   { opacity: .20; transform: translate3d(-12%, 5%, 0) scale(1.16) rotate(-.3deg); }
  52%  { opacity: .68; transform: translate3d(1%, -1%, 0) scale(1.08) rotate(.08deg); }
  100% { opacity: .28; transform: translate3d(11%, -4%, 0) scale(1.16) rotate(.3deg); }
}

                                                                        
                                                                            
                                                                           
                                                                              
                                                                           
                                                                         
                                                                   
                                                                           
html:not(.oc-entree-passee) body[data-page="index"] #accueil #oc-maison {
  filter:
    contrast(1.10)
    saturate(.78)
    brightness(.95);
  -webkit-mask-image: none;
  mask-image: none;
}

/* Le balayage est désormais calculé dans l'unique scène WebGL : le host et la
   composition Bodoni restent absolument fixes pendant que les trois plans de
   pierre se déplacent à des vitesses distinctes. */
html.oc-seuil-passe:not(.oc-entree-passee) body[data-page="index"] #accueil #oc-maison {
  animation: none;
  opacity: 1;
  transform: none;
}

/* The click gives the moving stone one final, decisive camera push. The
   existing obsidian cut then takes over above it; text and CTA never move. */
html.oc-entree-en-cours:not(.oc-entree-passee) body[data-page="index"] #accueil #oc-maison {
  animation: none;
  opacity: .58;
  transform: translate3d(-42vw, .5%, 0) scale(1.44);
  filter: contrast(1.34) saturate(.66) brightness(.80)
    drop-shadow(32px 38px 56px rgba(35, 38, 40, .27));
  transition:
    transform .76s cubic-bezier(.72, 0, .18, 1),
    opacity .76s cubic-bezier(.72, 0, .18, 1),
    filter .76s cubic-bezier(.72, 0, .18, 1);
}

/* One existing transition surface, now materially legible in every frame:
   obsidian mass, a Carrara cutting edge and a restrained champagne glint. */
html.lux .oc-coupe {
  background:
    linear-gradient(90deg,
      #070809 0 72%,
      #101113 82%,
      rgba(204, 174, 117, .94) 88%,
      rgba(248, 245, 237, .98) 92%,
      #0b0c0e 96%,
      #050607 100%);
  box-shadow: 32px 0 72px rgba(7, 8, 9, .42);
  filter: contrast(1.04) saturate(.88);
}

html.lux .oc-coupe--entre {
  transition: transform .76s cubic-bezier(.72, 0, .18, 1);
}

html.lux .oc-coupe--sort {
  transition: transform .78s cubic-bezier(.18, 0, .12, 1);
}

/* ---------------------------------------------------------------------
   HOME POST-ENTRY — the figure itself becomes the camera aperture; no extra
   decorative layer.
   --------------------------------------------------------------------- */
html.oc-seuil-passe body[data-page="index"] :is(
  .cv-manifesto-media,
  .cv-material-photo,
  .cv-trans-media
) {
  isolation: isolate;
  overflow: clip;
  outline: 1px solid rgba(250, 247, 239, .20);
  outline-offset: -1px;
  transform-origin: 50% 44%;
}

html.oc-seuil-passe body[data-page="index"] :is(
  .cv-manifesto-media,
  .cv-material-photo,
  .cv-trans-media
) img {
  transform-origin: 50% 44%;
}

html.oc-seuil-passe body[data-page="index"] .cv-ending-light {
  transform-origin: 50% 50%;
}

html.oc-seuil-passe body[data-page="index"] :is(
  #heritage-1948,
  #maison-transmission,
  #fondazione-home
) h2 {
  text-wrap: balance;
  font-kerning: normal;
  font-feature-settings: var(--cv-typo-current-ffs, "kern" 1, "liga" 1);
}

@supports (animation-timeline: view()) {
  html.oc-seuil-passe body[data-page="index"] :is(
    .cv-manifesto-media,
    .cv-material-photo,
    .cv-trans-media
  ) {
    view-timeline-name: --roi-home-camera;
    view-timeline-axis: block;
    animation: roi-home-camera var(--roi-ease) both;
    animation-timeline: --roi-home-camera;
    animation-range: entry 0% entry 92%;
  }

  html.oc-seuil-passe body[data-page="index"] .cv-home-ending {
    view-timeline-name: --roi-ending;
    view-timeline-axis: block;
  }

  html.oc-seuil-passe body[data-page="index"] .cv-ending-light {
    animation: roi-ending-sculpture linear both;
    animation-timeline: --roi-ending;
    animation-range: entry 0% cover 70%;
  }
}

@keyframes roi-home-camera {
  from {
    clip-path: inset(7% 5% 9% 5% round 1px);
    filter: saturate(.74) contrast(1.05) brightness(.82);
    transform: translate3d(0, 22px, 0) scale(.985);
  }
  to {
    clip-path: inset(0 round 0);
    filter: saturate(.94) contrast(1.035) brightness(.94);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes roi-ending-sculpture {
  from { opacity: .16; transform: scale(.72) rotate(-7deg); filter: blur(5px); }
  to   { opacity: .88; transform: scale(1.06) rotate(0); filter: blur(0); }
}

/* ---------------------------------------------------------------------
   PERFORMANCE / ACCESSIBILITY GATES.
   --------------------------------------------------------------------- */
@media (max-width: 760px), (pointer: coarse) {
  html:not(.oc-entree-passee) body[data-page="index"] #accueil #oc-maison {
    filter: contrast(1.12) saturate(.82);
    -webkit-mask-image: none;
    mask-image: none;
  }

  html.oc-seuil-passe:not(.oc-entree-passee) body[data-page="index"] #accueil #oc-maison {
    animation: none;
    opacity: 1;
    transform: none;
  }

  html.oc-entree-en-cours:not(.oc-entree-passee) body[data-page="index"] #accueil #oc-maison {
    animation: none;
    opacity: .70;
    transform: translate3d(-25vw, 0, 0) scale(1.24);
    filter: contrast(1.22) saturate(.72) brightness(.86);
  }

  body.cv3-nonhome.cv3-witness .cv3-room-light,
  body.cv3-nonhome.cv3-witness .cv3-plane::after,
  html.oc-seuil-passe body[data-page="index"] .cv-ending-light {
    animation: none !important;
    transform: none !important;
  }

  body.cv3-nonhome.cv3-witness .cv3-room-light { opacity: .52 !important; }
  body.cv3-nonhome.cv3-witness .cv3-plane::after { opacity: .24; }

  html.oc-seuil-passe body[data-page="index"] :is(
    .cv-manifesto-media,
    .cv-material-photo,
    .cv-trans-media
  ) {
    animation: none !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
    outline-color: rgba(35, 38, 40, .18);
  }
}

@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  html:not(.oc-entree-passee) body[data-page="index"] #accueil #oc-maison {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body.cv3-nonhome.cv3-witness .cv3-room-light,
  body.cv3-nonhome.cv3-witness .cv3-plane::after,
  html.oc-seuil-passe body[data-page="index"] .cv-ending-light,
  html.oc-seuil-passe body[data-page="index"] :is(
    .cv-manifesto-media,
    .cv-material-photo,
    .cv-trans-media
  ) {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  html.oc-seuil-passe body[data-page="index"] :is(
    .cv-manifesto-media,
    .cv-material-photo,
    .cv-trans-media
  ) { clip-path: none !important; }
}

/* DUBAÏ mobile — la photographie d'autorité porte déjà le nom de la Maison
   dans la pierre. Le recadrage vertical garde ce signe dans le décor sans le
   laisser traverser le titre, puis réserve une vraie colonne au bloc marque
   et à la commande de navigation. Aucun autre témoin n'est concerné. */
@media (max-width: 760px) {
  body[data-page="dubai-bureaux"] #hd .hd-in {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)) !important;
  }

  body[data-page="dubai-bureaux"] #hd .logo {
    position: relative !important;
    z-index: 4 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 60px) !important;
    overflow: visible !important;
  }

  body[data-page="dubai-bureaux"] #hd .logo > div:last-child {
    display: grid !important;
    min-width: max-content !important;
    overflow: visible !important;
  }

  body[data-page="dubai-bureaux"] #hd :is(.logo-n, .logo-s) {
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  body[data-page="dubai-bureaux"] #hd .ntog {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 4 !important;
    flex: 0 0 44px !important;
    margin-left: auto !important;
  }

  body[data-page="dubai-bureaux"] #hd .ntog span {
    display: block !important;
    width: 24px !important;
    height: 1px !important;
    margin: 5px auto !important;
    background: #f5f1e8 !important;
    transform-origin: 50% 50%;
    transition: transform .35s cubic-bezier(.19,1,.22,1), opacity .22s ease;
  }

  body[data-page="dubai-bureaux"].nopen #hd .ntog span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body[data-page="dubai-bureaux"].nopen #hd .ntog span:nth-child(2) { opacity: 0; }
  body[data-page="dubai-bureaux"].nopen #hd .ntog span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  body[data-page="dubai-bureaux"].nopen { overflow: hidden !important; }

  body[data-page="dubai-bureaux"] #snav {
    z-index: 3 !important;
    background: rgba(5,7,8,.985) !important;
  }

  body[data-page="dubai-bureaux"] #snav > .nl {
    font-family: var(--cv-typo-current-ff, "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif) !important;
    font-size: var(--cv-typo-current-fs, 18px) !important;
    line-height: var(--cv-typo-current-lh, 1.05) !important;
    letter-spacing: var(--cv-typo-current-ls, .035em) !important;
    text-transform: var(--cv-typo-current-tt, none) !important;
    color: #f4f0e8 !important;
  }

  body[data-page="dubai-bureaux"] #snav > .ncta {
    font-size: var(--cv-typo-current-fs, 9px) !important;
    color: #f4f0e8 !important;
  }

  body[data-page="dubai-bureaux"] .dxb-hero .dxb-v9 {
    transform: translate3d(0,-14%,0) scale(1.35) !important;
    transform-origin: 50% 50% !important;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  body[data-page="dubai-bureaux"] #hd .ntog span { transition: none; }
}

@media (prefers-contrast: more), (forced-colors: active) {
  body.cv3-nonhome.cv3-witness .cv3-room-light,
  body.cv3-nonhome.cv3-witness .cv3-plane::after {
    display: none !important;
  }

}