/*
 * PORTALE CARAVELLI — témoin de lecture et de continuité.
 *
 * Cette feuille est volontairement locale à luxury-branch. La couche ARXIV8
 * place les enfants directs d'un chapitre au premier plan ; sur Portale cette
 * règle générique touchait aussi les médias absolus, le canvas et le sticky du
 * seuil. Ils redevenaient alors des items de flux et repoussaient toute la
 * copie hors du viewport. Les corrections ci-dessous restaurent la géométrie
 * native tout en gardant les matières ARXIV8 derrière le contenu.
 */

body[data-page="portale-home"] {
  overflow-x: clip !important;
}

body[data-page="portale-home"] .cv3-boussole-field::after,
body[data-page="portale-home"] .cv3-room-light::before{
  content:none !important;
  display:none !important;
  animation:none !important;
}

/* L'entrée reste cinématique grâce à la vidéo et à la Boussole. Elle ne
   retarde jamais l'accès au contenu, quelle que soit la langue ou la vitesse
   de chargement des médias. */
body[data-page="portale-home"] .preloader {
  display: none !important;
}

/* La matière courante peut réécrire les variables Oklch de la page. La barre
   fixe ne doit jamais hériter le Carrara et perdre ses libellés ivoire. */
body[data-page="portale-home"] .site-header.scrolled {
  background:
    linear-gradient(180deg,rgba(5,10,9,.96),rgba(9,19,16,.92)),
    url("/assets/palette02/serpentinite_noire_1024.webp") center / 720px auto !important;
  border-bottom-color: rgba(149,161,158,.24) !important;
  box-shadow: 0 14px 38px rgba(5,10,9,.24),inset 0 -1px rgba(228,232,228,.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
}

body[data-page="portale-home"] #hero > .hero-content,
body[data-page="portale-home"] #hero-title {
  visibility: visible !important;
  opacity: 1 !important;
}

body[data-page="portale-home"] main,
body[data-page="portale-home"] main > *,
body[data-page="portale-home"] main > section,
body[data-page="portale-home"] main .wrap {
  min-width: 0;
  max-width: 100%;
}

/* Le héros reste une seule scène : média, réfraction, lumière, puis lecture. */
body[data-page="portale-home"] #hero {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 100svh !important;
  padding: 0 !important;
  overflow: clip !important;
  isolation: isolate;
}

body[data-page="portale-home"] #hero > :is(
  .cv3-boussole-field,
  .hero-video,
  .hero-overlay,
  .hero-lens,
  .hero-ray,
  #fx5-hero-dim
) {
  position: absolute !important;
  margin: 0 !important;
}

body[data-page="portale-home"] #hero > :is(
  .cv3-boussole-field,
  .hero-video,
  .hero-overlay,
  .hero-lens,
  #fx5-hero-dim
) {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

body[data-page="portale-home"] #hero > .hero-video {
  z-index: 0 !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center 58% !important;
}

body[data-page="portale-home"] #hero > .hero-overlay { z-index: 1 !important; }
body[data-page="portale-home"] #hero > :is(.cv3-boussole-field,.hero-lens,.hero-ray,#fx5-hero-dim) {
  z-index: 2 !important;
  pointer-events: none !important;
}

body[data-page="portale-home"] #hero > .hero-content {
  position: relative !important;
  z-index: 8 !important;
  flex: 0 0 auto !important;
  width: min(620px, 48vw) !important;
  max-width: min(620px, 48vw) !important;
  margin-left: clamp(56px, 8vw, 120px) !important;
  margin-right: auto !important;
  padding: clamp(154px, 18vh, 194px) 0 clamp(206px, 24vh, 252px) !important;
}

body[data-page="portale-home"] #hero > .video-toggle {
  position: absolute !important;
  z-index: 10 !important;
  right: clamp(168px, 13vw, 210px) !important;
  left: auto !important;
  top: auto !important;
  bottom: 150px !important;
}

body[data-page="portale-home"] #hero > .search-panel {
  position: absolute !important;
  z-index: 9 !important;
  left: clamp(56px, 4vw, 76px) !important;
  right: clamp(168px, 13vw, 210px) !important;
  bottom: 28px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
}

body[data-page="portale-home"] #hero-title,
body[data-page="portale-home"] #hero-title > span {
  color: #e4e8e4 !important;
  -webkit-text-fill-color: #e4e8e4 !important;
  font-family: var(--cv-typo-current-ff, "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif) !important;
  text-shadow: 0 2px 2px rgba(1,12,10,.62), 0 10px 24px rgba(1,12,10,.26) !important;
}

body[data-page="portale-home"] :is(.hero-eyebrow,.cv-portale-kicker,.hero-intro) {
  opacity: 1 !important;
}

body[data-page="portale-home"] .hero-intro {
  color: rgba(228,232,228,.94) !important;
  -webkit-text-fill-color: rgba(228,232,228,.94) !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.72) !important;
}

/* Le rythme cérémoniel reste ample, mais aucune section ne reçoit deux fois
   les réserves verticales du système natif et de l'orchestrateur. */
body[data-page="portale-home"] main > .philosophy {
  min-height: 0 !important;
  padding: 0 !important;
}

body[data-page="portale-home"] .philosophy > .sdf-canvas {
  display: none !important;
}

body[data-page="portale-home"] .philosophy > .philosophy-grid {
  position: relative !important;
  z-index: 3 !important;
}

body[data-page="portale-home"] main > .stage-seuil {
  height: auto !important;
  min-height: 100svh !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  overflow: clip !important;
}

body[data-page="portale-home"] .stage-seuil > .stage-sticky {
  position: relative !important;
  top: auto !important;
  z-index: 4 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100svh !important;
  aspect-ratio: auto !important;
}

body[data-page="portale-home"] main > .properties {
  min-height: 0 !important;
  padding: clamp(72px,7vw,104px) 0 clamp(68px,6vw,92px) !important;
}

body[data-page="portale-home"] main > .destinations {
  min-height: 0 !important;
  padding: clamp(58px,5vw,78px) 0 clamp(72px,7vw,104px) !important;
}

body[data-page="portale-home"] main > .private-office {
  position: relative !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: clip !important;
}

body[data-page="portale-home"] .private-office > .guilloche {
  display: none !important;
}

body[data-page="portale-home"] .private-office > :is(.po-media,.po-body) {
  position: relative !important;
  z-index: 3 !important;
  min-width: 0 !important;
}

body[data-page="portale-home"] main > .partners {
  min-height: 0 !important;
  padding: clamp(68px,6vw,92px) 0 clamp(62px,5vw,82px) !important;
}

body[data-page="portale-home"] main > .partners > .cachet-final {
  box-sizing: border-box;
  width: min(100%, 760px) !important;
  margin: 58px auto 0 !important;
}

/* Contraste déterministe : aucun titre ne dépend de la couleur héritée de la
   salle qui le précède. */
body[data-page="portale-home"] :is(
  .section-light h2,
  .property-copy h3,
  .partner-col li
) {
  color: #11181b !important;
  -webkit-text-fill-color: #11181b !important;
}

body[data-page="portale-home"] :is(
  .hero h1,
  .philosophy h2,
  .stage-copy h2,
  .po-body h2,
  .destination-copy h3,
  .footer-brand .brand-main
) {
  font-family: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif !important;
}

body[data-page="portale-home"] :is(
  .philosophy h2,
  .stage-copy h2,
  .po-body h2,
  .destination-copy h3,
  .site-footer .brand-main,
  .site-footer .brand-sub,
  .site-footer .brand-branch
) {
  color: #e4e8e4 !important;
  -webkit-text-fill-color: #e4e8e4 !important;
}

body[data-page="portale-home"] :is(.philosophy p,.stage-copy p,.po-body p,.footer-brand p,.footer-col li,.footer-col a) {
  color: rgba(228,232,228,.84) !important;
  -webkit-text-fill-color: rgba(228,232,228,.84) !important;
}

body[data-page="portale-home"] :is(.search-field label,.search-field select,.search-submit,.btn,.text-link) {
  opacity: 1 !important;
}

/* La copie est disponible dès le premier paint. Les mouvements ARXIV8
   restent portés par les médias, le cadre et les matières, jamais par une
   disparition temporaire du texte. */
body[data-page="portale-home"] :is(.property-copy,.destination-copy,.partners-note) {
  visibility: visible !important;
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
}

html body.cv3-witness-portale[data-page="portale-home"] #partners.partners.section-light .partners-note {
  color: rgba(39,48,54,.78) !important;
  -webkit-text-fill-color: rgba(39,48,54,.78) !important;
  font-size: var(--cv-typo-current-fs, 11px) !important;
  line-height: var(--cv-typo-current-lh, 1.55) !important;
}

/* Le cachet reste une apparition de matière, mais jamais un texte flou. */
html body.cv3-witness-portale[data-page="portale-home"] #partners .cachet-final,
html body.cv3-witness-portale[data-page="portale-home"] #partners .cachet-final * {
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

body[data-page="portale-home"] .search-field select {
  color: #e4e8e4 !important;
  -webkit-text-fill-color: #e4e8e4 !important;
}

body[data-page="portale-home"] :is(.property-card,.destination-card,.po-media,.eng-row,.engraving) {
  min-width: 0 !important;
  max-width: 100% !important;
}

body[data-page="portale-home"] :is(.property-card,.destination-card) {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Sur le Portale, la décision de confidentialité se place après le footer.
   Elle n'occupe donc jamais le bas du viewport au-dessus d'une recherche,
   d'un CTA ou d'une photographie. */
body[data-page="portale-home"] .hc-consent--branch {
  position: relative !important;
  inset: auto !important;
  z-index: 20 !important;
  box-sizing: border-box !important;
  width: min(1280px,calc(100% - 48px)) !important;
  max-width: 1280px !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto 18px !important;
  transform: none !important;
}

body[data-page="portale-home"] :is(img,video,canvas,svg) {
  max-width: 100%;
}

@media (max-width: 900px) {
  body[data-page="portale-home"] #hero {
    display: block !important;
    min-height: 0 !important;
  }

  body[data-page="portale-home"] #hero > .hero-content {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    min-height: min(720px,100svh) !important;
    margin: 0 20px !important;
    padding: 124px 0 46px !important;
  }

  body[data-page="portale-home"] #hero > .search-panel {
    position: relative !important;
    inset: auto !important;
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 20px 24px !important;
    transform: none !important;
  }

  body[data-page="portale-home"] #hero > .video-toggle {
    right: 18px !important;
    top: 88px !important;
    bottom: auto !important;
  }

  body[data-page="portale-home"] #hero-title > span:first-child {
    font-size: var(--cv-typo-current-fs, clamp(54px,17vw,76px)) !important;
  }

  body[data-page="portale-home"] #hero-title > span:last-child {
    font-size: var(--cv-typo-current-fs, clamp(42px,13.6vw,64px)) !important;
  }

  body[data-page="portale-home"] .philosophy-grid {
    width: calc(100% - 40px) !important;
  }

  body[data-page="portale-home"] main > .stage-seuil {
    height: auto !important;
    min-height: 78svh !important;
  }

  body[data-page="portale-home"] :is(.property-grid,.destination-grid,.partners-grid,.footer-grid) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-page="portale-home"] .private-office {
    grid-template-columns: minmax(0,1fr) !important;
  }

  body[data-page="portale-home"] .po-body {
    padding: 52px 20px 60px !important;
  }

  body[data-page="portale-home"] :is(.engraving,.eng-row,#eng-canvas) {
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-page="portale-home"] .site-footer {
    padding-bottom: max(28px,env(safe-area-inset-bottom)) !important;
  }

  body[data-page="portale-home"] .hc-consent--branch {
    width: calc(100% - 20px) !important;
    margin: 0 10px 10px !important;
  }

  body[data-page="portale-home"] :is(
    .btn,.text-link,.search-submit,.destination-link,.property-link,
    .partner-col h3,.footer-col h4,.footer-col a,.footer-bottom,
    .property-fav,.video-toggle,.ambiance-btn
  ) {
    font-size: var(--cv-typo-current-fs, 12px) !important;
    line-height: var(--cv-typo-current-lh, 1.45) !important;
  }

  body[data-page="portale-home"] :is(.btn,.search-submit,.destination-link,.property-link) {
    min-height: 46px !important;
  }
}

@media (max-width: 620px) {
  body[data-page="portale-home"] #hero > .hero-content {
    min-height: min(680px,100svh) !important;
  }

  body[data-page="portale-home"] #hero > .search-panel {
    grid-template-columns: minmax(0,1fr) !important;
  }

  body[data-page="portale-home"] .section-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body[data-page="portale-home"] .property-grid,
  body[data-page="portale-home"] .destination-grid,
  body[data-page="portale-home"] .partners-grid,
  body[data-page="portale-home"] .footer-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }

  body[data-page="portale-home"] .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="portale-home"] #hero > .hero-video,
  body[data-page="portale-home"] .cv3-room-light::before,
  body[data-page="portale-home"] .cv3-room-light::after {
    animation: none !important;
  }
}

/* Géométrie finale du héros mobile dès le premier affichage (17/09/2026).
   JS/caravelli-v3-orchestrator.js pose body.cv3-witness-portale après le premier affichage. Les règles
   @media (max-width:760px) de CSS/caravelli-v3-orchestrator.css changeaient alors la largeur des boutons du héros
   (le libellé se recentrait, jusqu'à 119,5 px), l'introduction et le titre. Les mêmes déclarations sont posées ici
   sur le sélecteur statique de la page, à spécificité égale : quand l'orchestrateur s'active, la géométrie ne change plus.
   Aucune règle par langue ni par libellé ; rien au-delà de 760 px. */
@media (max-width: 760px) {
  body[data-page="portale-home"] [id="hero-title"] {
    max-width: 100%;
    text-wrap: balance;
    letter-spacing: var(--cv-typo-current-ls, -.045em);
    font-size: var(--cv-typo-current-fs, clamp(50px,14vw,78px)) !important;
    line-height: var(--cv-typo-current-lh, .9) !important;
  }

  body[data-page="portale-home"] #hero-title {
    width: auto;
    max-width: none;
  }

  body[data-page="portale-home"] #hero-title span {
    display: block;
    white-space: nowrap;
  }

  body[data-page="portale-home"] #hero-title > span .lw {
    display: inline-block !important;
    width: auto !important;
  }

  body[data-page="portale-home"] .hero-intro {
    width: min(100%,28ch) !important;
    max-width: min(100%,28ch) !important;
    font-size: var(--cv-typo-current-fs, clamp(17px,4.7vw,20px)) !important;
    line-height: var(--cv-typo-current-lh, 1.42) !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  body[data-page="portale-home"] .hero-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body[data-page="portale-home"] .hero-buttons .btn {
    width: 100% !important;
    min-height: 44px !important;
  }
}