@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   CARAVELLI OLYMPE — ATELIER V923.2
   Reprise des défauts relevés sur la V923.1 déployée.
   Chargée EN DERNIER : elle corrige par la cascade.

   Garde-fous respectés : aucune police touchée, mentions-legales.html,
   confidentialite.html et CSS/legal.css intacts, palette de luxury-branch/
   non atteinte, aucun recadrage arbitraire de portrait ou de vidéo verticale.

   1. En-tête — le bouton « Entrer en relation » n'est plus coupé
   2. Accueil / Matière — plus de cases vides sous les visuels
   3. Pied de page — la ligne de mentions retrouve sa ligne de base
   4. Inauguration Dubaï — l'arche décorative libère le mémorial
   5. Le Portale Caravelli — écrin du monogramme
   ══════════════════════════════════════════════════════════════════════════ */


/* ══ 1 · EN-TÊTE ═══════════════════════════════════════════════════════════
   Mesuré à 1440 : `.hd` est haute de 84 px alors que `.hd-in` en réclame
   95,15. La barre intérieure, centrée, débordait donc de 6 px en haut et de
   5 px en bas ; le bouton « Entrer en relation », élément le plus haut de la
   rangée, commençait à y = −3 px et son filet supérieur était rogné par le
   bord de la page. Le défaut se voyait sur les 49 pages.

   On rend à l'en-tête la hauteur de son contenu. 84 px devient un minimum,
   plus un plafond. */

body[data-page] .hd {
  height: auto;
  min-height: 84px;
  display: flex;
  align-items: center;
}

body[data-page] .hd-in {
  padding-block: 6px;        /* le contenu ne touche plus les arêtes */
}

/* Le bouton reprend une hauteur maîtrisée et ne peut plus dépasser la barre. */
body[data-page] .hd .ncta {
  align-self: center;
  padding: 11px 18px;
  line-height: 1;
}


/* ══ 2 · ACCUEIL — LA BANDE « MATIÈRE » ════════════════════════════════════
   Mesuré à 1440 : chaque cartouche fait 628 × 785 (rapport 4/5) tandis que
   la photographie, native en 3840 × 2160, s'y rend en 626 × 352. Il restait
   donc **433 px de vide** sous chaque visuel — les « cases vides » signalées.

   Cause : `object-fit: cover` était bien posé, mais l'image n'avait aucune
   règle de hauteur ; elle se rendait à son rapport naturel, sans jamais
   remplir le cartouche.

   Deux réponses possibles : étirer le cadre sur l'image, ou recadrer l'image
   dans le cadre. Passer un 16/9 dans un 4/5 amputerait 55 % de la largeur du
   cliché. On donne donc au cartouche le rapport réel des photographies :
   plus aucun vide, et pas un pixel de recadrage. */

html.lux body[data-page="index"] .lux-matiere figure,
body[data-page="index"] .lux-matiere figure {
  aspect-ratio: 16 / 9;
}

html.lux body[data-page="index"] .lux-matiere img,
body[data-page="index"] .lux-matiere img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La légende retrouve sa place dans un cartouche devenu plus bas. */
html.lux body[data-page="index"] .lux-matiere figcaption {
  bottom: clamp(12px, 1.1vw, 18px);
}


/* ══ 3 · PIED DE PAGE — LA LIGNE DE MENTIONS ═══════════════════════════════
   Mesuré à 1440 : la mention légale portait un `margin-top:10px` en attribut
   `style`, hérité d'une version où elle passait à la ligne. Dans la rangée
   souple actuelle elle reste sur la même ligne que le reste, mais **10 px
   plus bas** — d'où l'impression de décalage. Aux largeurs intermédiaires
   elle passait à la ligne en conservant l'alinéa de la rangée, ce qui la
   renvoyait au milieu du pied de page.

   On reprend la rangée entière : une seule ligne de base, des séparateurs
   réguliers, et un retour à la ligne propre au fer à gauche. */

body[data-page] .ft-bot .ft-cp-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* Au fer à gauche, en continu : un séparateur ne se justifie que si les
     mentions se touchent. Réparties sur 1280 px, elles laissaient 174 px
     entre chaque filet, qui ne séparait alors plus rien. */
  justify-content: flex-start;
  gap: 8px 0;
  width: 100%;
}

body[data-page] .ft-bot :is(.ft-cp, .ft-indep, .ft-legal) {
  display: inline-block;
  margin: 0;                 /* neutralise le `margin-top:10px` en attribut */
  font-size: 10.5px;
  letter-spacing: .12em;
  line-height: 1.5;
}

/* Séparateur de Maison entre les mentions : un cheveu bronze, jamais une
   barre pleine. Il disparaît en début de ligne après un retour. */
body[data-page] .ft-bot :is(.ft-indep, .ft-legal) {
  padding-left: 18px;
  margin-left: 18px;
  border-left: 1px solid color-mix(in oklab, var(--ol-bronze) 30%, transparent);
}

body[data-page] .ft-legal a {
  color: inherit;
  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 .5s cubic-bezier(.19, 1, .22, 1), color .5s;
}

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

/* Sous 1100 px la ligne ne tient plus : chaque mention reprend le fer à
   gauche et perd son séparateur, plutôt que de passer à la ligne en gardant
   un filet orphelin en tête. Mesuré : à 1024 la mention légale basculait
   seule sur une seconde ligne, précédée d'un séparateur qui ne séparait
   plus rien. */
@media (max-width: 1100px) {
  body[data-page] .ft-bot .ft-cp-wrap { display: block; }
  body[data-page] .ft-bot :is(.ft-cp, .ft-indep, .ft-legal) {
    display: block;
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
    margin-top: 8px;
  }
}


/* ══ 4 · INAUGURATION DUBAÏ — LIBÉRER LE MÉMORIAL ══════════════════════════
   Mesuré : `figure.dxb-monument` est un décor de 460 × 282 posé en absolu à
   x = 894, opacité .76, au-dessus de la photographie du mémorial qu'il
   masque. La page porte déjà un héros photographique, un grand décompte, un
   canvas atmosphérique et un champ lumineux : cette arche est la couche de
   trop. On la retire — la photographie se suffit.

   L'élément reste dans le HTML : rien n'est supprimé, seul l'affichage est
   levé. Le retour en arrière tient en une ligne. */

body[data-page="inauguration-dubai"] .dxb-monument,
body[data-page="inauguration-dubai"] .dxb-monument-aura {
  display: none;
}

/* La page respire : sans l'arche, le héros reprend toute sa profondeur. */
body[data-page="inauguration-dubai"] .dxb-hero-veil {
  background:
    linear-gradient(90deg, oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h) / .74) 0%, oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h) / .22) 52%, oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h) / .46) 100%),
    linear-gradient(180deg, oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h) / .18) 0%, transparent 34%, oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h) / .62) 88%, oklch(.1695 calc(var(--ol-c-body)*.423) var(--ol-h)) 100%);
}


/* ══ 5 · LE PORTALE CARAVELLI — L'ÉCRIN DU MONOGRAMME ══════════════════════
   Les trois lettres « CLB » tenaient lieu de marque. Elles sont remplacées
   dans le HTML par un monogramme dessiné ; cette section lui donne son
   écrin : dimension tenue, or de la Maison, et une lente montée de lumière
   au survol du portail. */

body[data-page="index"] .clb-home-mark {
  display: grid;
  place-items: center;
  width: min(46%, 210px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  font-size: 0;              /* neutralise tout repli textuel résiduel */
}

body[data-page="index"] .clb-home-mark svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 10px 34px rgba(0, 0, 0, .55));
  transition: transform 1.4s cubic-bezier(.19, 1, .22, 1),
              filter    1.4s cubic-bezier(.19, 1, .22, 1);
}

body[data-page="index"] .clb-home-portal:hover .clb-home-mark svg {
  transform: scale(1.035);
  filter: drop-shadow(0 14px 44px rgba(0, 0, 0, .62))
          drop-shadow(0 0 22px oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .34));
}

/* Le halo du monogramme s'allume au survol, jamais avant. */
body[data-page="index"] .clb-home-mark .clb-halo {
  opacity: .34;
  transition: opacity 1.4s cubic-bezier(.19, 1, .22, 1);
}

body[data-page="index"] .clb-home-portal:hover .clb-home-mark .clb-halo {
  opacity: .82;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="index"] .clb-home-mark svg,
  body[data-page="index"] .clb-home-mark .clb-halo { transition: none; }
}


/* ══ 6 · LE RIDEAU D'INTRODUCTION NE PREND PLUS LA NAVIGATION EN OTAGE ══════
   Relevé à l'arrivée sur l'accueil : `#oc-intro` couvre tout l'écran en
   `z-index:100000`, au-dessus de l'en-tête qui est à 8500. Pendant toute la
   séquence — 14 s à la première visite — la barre de navigation, le sélecteur
   de langue et la bande d'annonce Dubaï sont masqués ET inatteignables, le
   défilement étant par-dessus le marché verrouillé.

   On ne supprime pas le rideau : c'est un parti pris de la Maison, et il est
   beau. On le fait passer DERRIÈRE la seule chose qui doit rester accessible
   à tout instant — l'en-tête. Le visiteur voit la composition se jouer et
   peut partir quand il veut. C'est la différence entre une entrée en matière
   et une porte fermée à clé.
   ══════════════════════════════════════════════════════════════════════════ */

body[data-page="index"] .hd{
  z-index: 100010;              /* au-dessus de #oc-intro (100000) */
}

/* Tant que le rideau est là, l'en-tête se pose sur lui sans l'écraser :
   on lui donne juste ce qu'il faut de fond pour rester lisible sur la fumée. */
body[data-page="index"]:has(#oc-intro) .hd{
  background: color-mix(in oklab, var(--ol-night) 46%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}

/* La sortie du rideau était un bouton de 7 px — sous le plancher de
   lisibilité du site, et c'était la SEULE issue. Elle devient une porte. */
.oc-intro-skip,
.oc-intro-skip--v9232{
  font-size: 12px !important;   /* la règle d'origine porte un !important */
  letter-spacing: .26em;
  padding: 14px 30px;
  border: 1px solid color-mix(in oklab, var(--ol-bronze) 46%, transparent);
  color: var(--ol-carrara);
  background: color-mix(in oklab, var(--ol-satin) 42%, transparent);
  cursor: pointer;
  transition: border-color .5s var(--v923-ease), background-color .5s var(--v923-ease),
              letter-spacing .5s var(--v923-ease);
}

.oc-intro-skip:hover,
.oc-intro-skip--v9232:hover{
  border-color: color-mix(in oklab, var(--ol-bronze) 82%, transparent);
  background: color-mix(in oklab, var(--ol-bronze) 14%, var(--ol-satin));
  letter-spacing: .32em;
}

.oc-intro-skip:focus-visible{
  outline: 1px solid var(--ol-bronze);
  outline-offset: 4px;
}