@charset "UTF-8";

                                                                          
                                                                         
                               
html.lux .oc-accueil{
  --ol-h:252.3;
  --ol-h-pap:85;
  --ol-h-jade:163;
  --ol-c-body:calc(.0062 * 1.36);
  --ol-c-pap:.0978112;
  --ol-c-jade:.12648;
  --ol-ui:Inter,-apple-system,system-ui,sans-serif;
}
/* ══════════════════════════════════════════════════════════════════════════
   LES RÈGLES DE L'ACCUEIL
   Extraites de CSS/olympe-eclat-v9232.css par découpage de blocs — donc
   COMPLÈTES PAR CONSTRUCTION, et non par inventaire à la main.
   Dans le build elles vivent dans olympe-eclat-v9232.css, chargé APRÈS
   olympe-system.css et caravelli-v912.css : c'est cet ordre qui leur permet
   de l'emporter. Copie de travail — ce fichier n'est pas chargé.
   ══════════════════════════════════════════════════════════════════════════ */

/* — 5.3 Suspendue ————————————————————————————————————————————————————————— */
body[data-page] :is(
  .legacy-media, .lux-matiere figure, .folco-portrait,
  .pensee-cine .pensee-video, .pensee-cine video,
  .contact-form, .oc-consent, .hc-consent, .clb-home-portal,
  .cp-article > .cp-media, .ai-pn
){ box-shadow: var(--eclat-ombre-suspendue); }

/* ══════════════════════════════════════════════════════════════════════════
   LE SEUIL — le preloader de la Maison
   ARXIV8 §00 §B.3 : « un preloader qui a du sens — pourcentage réel, pas un
   faux délai ». Le rideau livré attendait 6 800 ms sans rien mesurer.
   Ici, le disque se remplit par le bas au rythme du chargement réel, et le
   nombre est celui de la mesure, pas d'une minuterie.
   ══════════════════════════════════════════════════════════════════════════ */
html.lux .oc-seuil{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  z-index:6;
  pointer-events:none;
  transition:opacity .42s cubic-bezier(.19,1,.22,1), transform .42s cubic-bezier(.19,1,.22,1);
}

html.lux .oc-seuil--parti{ opacity:0; transform:translate(-50%,-50%) scale(1.035); }

/* La trame et le nombre occupent la MÊME cellule de grille : le compteur est
   au centre du disque, pas au-dessous. */
html.lux .oc-seuil__trame,
html.lux .oc-seuil__nombre{ grid-area:1 / 1; }

html.lux .oc-seuil__nombre{
  margin:0;
  font-family:var(--cv-typo-current-ff, "IBM Plex Mono",ui-monospace,monospace);
  font-size:var(--cv-typo-current-fs, clamp(15px,1.5vw,19px));
  font-weight:var(--cv-typo-current-fw, 500);
  letter-spacing:var(--cv-typo-current-ls, .10em);
  font-variant-numeric:tabular-nums;
  color:oklch(.9198 calc(var(--ol-c-pap)*.13) var(--ol-h-pap));
  text-shadow:0 0 22px oklch(.1210 calc(var(--ol-c-body)*.30) var(--ol-h) / .85);
}

/* La barre oblique reprend le verde minerale : c'est le seul point de couleur
   de tout le seuil, et il désigne la mesure. */
html.lux .oc-seuil__bar{
  color:oklch(.6378 calc(var(--ol-c-jade)*.72) var(--ol-h-jade));
  margin-right:.12em;
}

/* Le compte n'est annoncé qu'une fois par palier aux technologies
   d'assistance : `aria-live` sur un compteur à 60 im/s serait un bavardage. */
html.lux .oc-seuil__lu{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
  html.lux .oc-seuil{ transition:opacity .5s linear; }
  html.lux .oc-seuil--parti{ transform:translate(-50%,-50%); }
}

/* ══════════════════════════════════════════════════════════════════════════
   L'ACCUEIL — LE CHAMP DE CARRARE
   Relevé sur immersive-g.com : fond rgb(232,232,232), un canvas plein écran,
   serif sans effet, ~90 % de vide. Leur luxe tient à la retenue.
   Ici le champ est un Carrare laiteux — et c'est doublement juste : le
   Carrare EST une pierre blanche, et #E8E4DC figure déjà dans la palette
   du cahier des charges (§F). Le site entier est en obsidienne ; cet écran
   d'arrivée est son inverse exact, ce qui fait de l'entrée dans la nuit,
   juste après, un vrai passage.
   ══════════════════════════════════════════════════════════════════════════ */
html.lux .oc-accueil{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  isolation:isolate;
  overflow:hidden;
  /* Le champ. La scène WebGL peint EXACTEMENT cette couleur en fond, donc la
     maison ne peut pas se détacher par une différence de blanc. */
  background:oklch(.9198 .0127155 85) !important;
}

html.lux .oc-maison-host{ position:absolute; inset:0; z-index:0; pointer-events:none; }

html.lux .oc-maison-host.oc-3d-fallback{ display:none; }

/* ══════════════════════════════════════════════════════════════════════════
   LA PORTE
   L'accueil n'a pas d'en-tête : sans une entrée explicite, le visiteur n'a
   aucune porte visible et doit deviner qu'il faut défiler. Immersive Garden
   peut se le permettre — leur public est celui d'un studio. Une Maison qui
   reçoit des clients ne le peut pas.
   La porte est donc nommée, centrée sous la ligne, et prolongée d'un FIL
   VERTICAL qui descend : c'est le fil qui indique la direction, le mot qui
   indique la destination. Le fil s'allonge au survol — il tire vers le bas,
   ce qui est exactement le geste demandé.
   `pointer-events:auto` la réactive : le bloc de texte est neutralisé pour
   laisser la main atteindre la pierre.
   ══════════════════════════════════════════════════════════════════════════ */
html.lux .oc-accueil-entrer{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(34px,4.4vw,58px);
  pointer-events:auto;
  text-decoration:none;
}

html.lux .oc-accueil-entrer__mot{
  font-family:var(--ol-ui,Inter,sans-serif);
  font-size:11px;
  font-weight:500;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:oklch(.2126 calc(var(--ol-c-body)*.42) var(--ol-h) / .92);
  padding-bottom:6px;
  background:linear-gradient(currentColor,currentColor) 50% 100%/0 1px no-repeat;
  transition:background-size .62s cubic-bezier(.19,1,.22,1);
}

html.lux .oc-accueil-entrer__fil{
  display:block;
  width:1px;
  height:clamp(30px,4.6vw,58px);
  background:linear-gradient(
    oklch(.2126 calc(var(--ol-c-body)*.42) var(--ol-h) / .55),
    oklch(.2126 calc(var(--ol-c-body)*.42) var(--ol-h) / 0));
  transform-origin:50% 0;
  transition:transform .7s cubic-bezier(.19,1,.22,1);
}

html.lux .oc-accueil-entrer:hover .oc-accueil-entrer__mot,
html.lux .oc-accueil-entrer:focus-visible .oc-accueil-entrer__mot{ background-size:100% 1px; }

html.lux .oc-accueil-entrer:hover .oc-accueil-entrer__fil,
html.lux .oc-accueil-entrer:focus-visible .oc-accueil-entrer__fil{ transform:scaleY(1.42); }

html.lux .oc-accueil-entrer:focus-visible{
  outline:1.5px solid oklch(.5314 calc(var(--ol-c-jade)*.70) var(--ol-h-jade));
  outline-offset:10px;
}

/* Le fil respire tant qu'on n'a rien fait : c'est le seul mouvement
   automatique de l'écran, et il désigne la sortie. */
@keyframes ocFilRespire{
  0%,100%{ transform:scaleY(1);    opacity:.75 }
  50%    { transform:scaleY(1.20); opacity:1   }
}

html.lux .oc-accueil-entrer__fil{ animation:ocFilRespire 3.4s cubic-bezier(.32,.06,.24,1) infinite 2s; }

html.lux .oc-accueil-entrer:hover .oc-accueil-entrer__fil{ animation:none; }

@media (prefers-reduced-motion:reduce){
  html.lux .oc-accueil-entrer__fil{ animation:none; transition:none; }
}

html.lux .oc-accueil-in{
  /* Descendu en bas, le nom passait sous la plaque de consentement. Il
     revient au centre — et c'est mieux : posé sur la masse du château, il
     se lit comme un titre gravé sur une estampe, pas comme une légende. */
  position:relative; z-index:2;
  text-align:center;
  padding:0 24px;
  pointer-events:none;   /* la main doit atteindre la pierre, pas le texte */
}

/* Le nom est un LINTEAU, pas une phrase : très interlettré, corps large mais
   graisse fine. Une Bodoni en display à cette taille demande de l'air entre
   les lettres, sans quoi les pleins se touchent et le mot fait bloc. */
html.lux .oc-accueil-nom{
  margin:0;
  /* Posé sur les meneaux, un texte se fait hacher par le quadrillage. Un
     halo de la couleur du champ, très large et très doux, dégage la
     contre-forme des lettres sans qu'on voie de boîte. */
  text-shadow:
    0 0 clamp(30px,4vw,64px) oklch(.9198 calc(var(--ol-c-pap)*.13) var(--ol-h-pap)),
    0 0 clamp(14px,1.8vw,26px) oklch(.9198 calc(var(--ol-c-pap)*.13) var(--ol-h-pap));
  font-family:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  font-weight:400;
  font-size:clamp(44px,10.6vw,186px);
  line-height:1;
  letter-spacing:.115em;
  text-indent:.13em;              /* compense l'interlettre du dernier signe */
  color:oklch(.2126 calc(var(--ol-c-body)*.42) var(--ol-h));
}

/* LA LIGNE FLORENTINE.
   Elle était en Cormorant à 13-16 px : trop petite pour être lue, et d'une
   autre famille que le nom. Elle passe à la BODONI en italique — la seconde
   voix de la même police, ce que la typographie classique appelle le rapport
   romain/italique : c'est la manière la plus ancienne et la plus sobre de
   changer de registre sans changer de caractère.
   Elle est soulignée d'un filet fin, détaché de la ligne de base par un
   `text-underline-offset` généreux : sur une didone, un soulignement collé
   coupe les jambages et salit les déliés. */
html.lux .oc-accueil-ligne{
  margin:clamp(26px,3.2vw,44px) 0 0;
  text-shadow:0 0 22px oklch(.9198 calc(var(--ol-c-pap)*.13) var(--ol-h-pap)),
              0 0 10px oklch(.9198 calc(var(--ol-c-pap)*.13) var(--ol-h-pap));
  font-family:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(17px,1.75vw,27px);
  line-height:1.5;
  letter-spacing:.004em;
  color:oklch(.2599 calc(var(--ol-c-body)*.40) var(--ol-h) / .94);
  max-width:26ch;
  margin-inline:auto;
  text-decoration:underline;
  text-decoration-thickness:.5px;
  text-underline-offset:.34em;
  text-decoration-color:oklch(.7625 calc(var(--ol-c-pat)*.62) var(--ol-h-pat) / .58);
}

/* Florence porte le nom : on le laisse en romain au milieu de l'italique.
   L'inversion romain/italique est plus distinguée qu'un gras ou une couleur. */
html.lux .oc-accueil-ligne em{
  font-style:normal;
  letter-spacing:.03em;
}

/* Les deux mentions de pied : minuscules, aux angles, comme chez eux. */
html.lux .oc-accueil-geste,
html.lux .oc-accueil-suite{
  position:absolute; z-index:2; bottom:clamp(22px,3.4vw,44px);
  margin:0;
  font-family:var(--ol-ui,Inter,sans-serif);
  font-size:10px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:oklch(.4278 calc(var(--ol-c-body)*.40) var(--ol-h) / .62);
}

html.lux .oc-accueil-geste{ left:clamp(20px,3.4vw,46px); }

html.lux .oc-accueil-suite{
  right:clamp(20px,3.4vw,46px);
  text-decoration:none;
  padding-bottom:4px;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .62s cubic-bezier(.19,1,.22,1), color .4s ease;
}

html.lux .oc-accueil-suite:hover,
html.lux .oc-accueil-suite:focus-visible{
  background-size:100% 1px;
  color:oklch(.2126 calc(var(--ol-c-body)*.42) var(--ol-h));
}

@media (max-width:640px){
  html.lux .oc-accueil-geste{ display:none; }
  html.lux .oc-accueil-suite{ left:50%; right:auto; transform:translateX(-50%); }
}

@media (prefers-reduced-motion:reduce){
  html.lux .oc-accueil-geste{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LE CONSENTEMENT — REFONTE
   L'état livré était une barre large posée en travers du bas de l'écran,
   avec un bouton doré plein. Trois défauts :
     · elle coupait la composition en deux, juste sous le sujet ;
     · le bouton plein est le seul aplat de couleur du site — il criait ;
     · aucun autre élément de la Maison n'a de boîte à coins arrondis.
   Elle devient une PLAQUE étroite dans l'angle : un filet, du texte, deux
   actions soulignées au trait. Rien n'est retiré — même markup, mêmes
   boutons, même stockage (§O) : seule la forme change.
   Spécificité `html.lux` (0,2,1) pour passer devant les 51 règles héritées.
   ══════════════════════════════════════════════════════════════════════════ */
html.lux .hc-consent{
  position:fixed;
  /* À DROITE, et pas à gauche : le corps de Hero est ferré à gauche et monte
     désormais à 124 px — une plaque à gauche mordait sur la troisième ligne
     du titre. C'est aussi le côté qu'Active Theory retient pour la sienne. */
  right:clamp(18px,3.2vw,44px);
  left:auto;
  bottom:clamp(18px,3.2vw,44px);
  width:min(calc(100vw - 36px), 360px);
  max-width:none;
  display:block;
  padding:clamp(16px,1.5vw,20px) clamp(16px,1.6vw,22px) clamp(14px,1.4vw,18px);
  border:0;
  border-top:1px solid oklch(.7625 calc(var(--ol-c-pat)*.60) var(--ol-h-pat) / .34);
  border-radius:0;
  box-shadow:0 24px 70px oklch(.0700 calc(var(--ol-c-body)*.22) var(--ol-h) / .42);
  /* Une plaque d'obsidienne : elle tient aussi bien sur le champ de Carrare
     de l'accueil que sur la nuit du reste du site. C'était la largeur qui
     posait problème, pas l'obscurité. */
  background:oklch(.1210 calc(var(--ol-c-body)*.30) var(--ol-h) / .94);
  backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  transform:translateY(14px);
  opacity:0;
  transition:opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1);
}

html.lux .hc-consent.hc-consent--visible{ transform:none; opacity:1; }

html.lux .hc-consent__titre{
  margin:0 0 8px;
  font-family:var(--cv-typo-current-ff, var(--ol-ui,Inter,sans-serif));
  font-size:var(--cv-typo-current-fs, 9px); font-weight:var(--cv-typo-current-fw, 500); letter-spacing:var(--cv-typo-current-ls, .30em); text-transform:var(--cv-typo-current-tt, uppercase);
  color:oklch(.7588 calc(var(--ol-c-jade)*.50) var(--ol-h-jade) / .80);
}

html.lux .hc-consent__texte{
  margin:0 0 clamp(12px,1.3vw,16px);
  font-family:var(--cv-typo-current-ff, var(--ol-editorial,"Cormorant Garamond",Georgia,serif));
  font-size:var(--cv-typo-current-fs, 14px);
  line-height:var(--cv-typo-current-lh, 1.62);
  color:oklch(.9687 calc(var(--ol-c-pap)*.058) var(--ol-h-pap) / .82);
}

html.lux .hc-consent__texte a{
  color:oklch(.9198 calc(var(--ol-c-pap)*.13) var(--ol-h-pap));
  text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  padding-bottom:2px;
}

html.lux .hc-consent__actions{
  display:flex; flex-wrap:wrap; gap:clamp(14px,1.6vw,24px); align-items:baseline;
}

/* Plus de bouton plein : deux actions typographiques. Celle qui engage porte
   le trait déjà tracé, l'autre l'obtient au survol — la hiérarchie se lit
   sans qu'aucune couleur n'ait à crier. */
html.lux .hc-consent__btn{
  appearance:none; -webkit-appearance:none;
  margin:0; padding:0 0 4px;
  border:0; border-radius:0; background:transparent; box-shadow:none;
  font-family:var(--cv-typo-current-ff, var(--ol-ui,Inter,sans-serif));
  font-size:var(--cv-typo-current-fs, 10px); font-weight:var(--cv-typo-current-fw, 500); letter-spacing:var(--cv-typo-current-ls, .22em); text-transform:var(--cv-typo-current-tt, uppercase);
  cursor:pointer;
  transition:color .4s ease, background-size .55s cubic-bezier(.19,1,.22,1);
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
}

html.lux .hc-consent__btn--oui{
  color:oklch(.9198 calc(var(--ol-c-pap)*.13) var(--ol-h-pap));
  background-size:100% 1px;
}

html.lux .hc-consent__btn--non{
  color:oklch(.7724 calc(var(--ol-c-body)*.44) var(--ol-h) / .74);
  background-size:0 1px;
}

html.lux .hc-consent__btn--non:hover,
html.lux .hc-consent__btn--non:focus-visible{
  color:oklch(.9198 calc(var(--ol-c-pap)*.13) var(--ol-h-pap));
  background-size:100% 1px;
}

html.lux .hc-consent__btn:focus-visible{
  outline:1.5px solid oklch(.7588 calc(var(--ol-c-jade)*.50) var(--ol-h-jade));
  outline-offset:4px;
}

@media (max-width:640px){
  html.lux .hc-consent{ left:14px; right:14px; bottom:14px; width:auto; }
}

/* La mention « passez la main » vit en bas à gauche de l'accueil : sur un
   écran court elle croiserait la plaque si celle-ci restait à gauche. */
@media (max-height:620px){
  html.lux .oc-accueil-geste{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html.lux .hc-consent{ transition:opacity .5s linear; transform:none; }
}

/* Le Seuil posé sur l'accueil : il occupe le centre du champ de Carrare
   pendant que les nuanceurs compilent, puis s'efface — l'accueil était déjà
   dessous. Ses caractères passent à l'encre : la trame était réglée pour le
   noir du rideau supprimé, elle serait invisible sur du blanc. */
html.lux .oc-accueil .oc-seuil{ position:absolute; z-index:5; }

html.lux .oc-accueil .oc-seuil__nombre{
  color:oklch(.2126 calc(var(--ol-c-body)*.42) var(--ol-h));
  text-shadow:0 0 26px oklch(.9198 calc(var(--ol-c-pap)*.13) var(--ol-h-pap));
}

html.lux .oc-accueil .oc-seuil__bar{
  color:oklch(.5314 calc(var(--ol-c-jade)*.78) var(--ol-h-jade));
}

/* Tant que le Seuil est là, le nom et la maison attendent : ils entrent
   APRÈS, sinon le compteur se superpose au titre. */
html.lux .oc-accueil-in,
html.lux .oc-accueil-geste,
html.lux .oc-accueil-suite{
  opacity:0;
  transition:opacity 1.15s cubic-bezier(.19,1,.22,1) .18s;
}

html.oc-seuil-passe .oc-accueil-in,
html.oc-seuil-passe .oc-accueil-geste,
html.oc-seuil-passe .oc-accueil-suite{ opacity:1; }

/* Sans JS, rien ne pose `oc-seuil-passe` : le contenu doit rester visible. */
html:not(.ol-loco) .oc-accueil-in,
html:not(.ol-loco) .oc-accueil-geste,
html:not(.ol-loco) .oc-accueil-suite{ opacity:1; }

/* ══════════════════════════════════════════════════════════════════════════
   LA COUPE D'OBSIDIENNE — ARXIV8 §09 (Merci Michel, §8)
   « Durées contrastées : certains éléments en 0,2 s, d'autres en 1,5 s.
     Le contraste de vitesse est la signature. »

   Tout, sur cet accueil, vivait entre 0,6 et 3,2 s. Une lenteur uniforme
   n'est pas de la lenteur, c'est de la mollesse : il faut un geste sec pour
   que la lenteur du reste devienne un choix.

   La lame traverse en 420 ms, contre 1 à 3 secondes pour le reste de
   l'écran — un rapport de 1 à 7. Elle entre par la gauche et sort par la
   droite : elle ne revient jamais sur ses pas, parce qu'un geste d'outil ne
   fait pas marche arrière.

   Sa courbe est `cubic-bezier(.7,0,.2,1)` — départ très sec, arrivée nette.
   C'est l'inverse exact de `--ol-e-pierre`, la courbe lente de la masse
   qu'on relâche : les deux doivent coexister, sinon il n'y a pas de contraste.
   ══════════════════════════════════════════════════════════════════════════ */
html.lux .oc-coupe{
  position:fixed;
  inset:0;
  z-index:2147482000;   /* au-dessus de tout, y compris la plaque de consentement */
  pointer-events:none;
  background:oklch(.0980 calc(var(--ol-c-body)*.26) var(--ol-h));
  transform:scaleX(0);
  transform-origin:0 50%;
  will-change:transform;
}

/* 1 · la lame entre — 420 ms, sec */
html.lux .oc-coupe--entre{
  transform:scaleX(1);
  transition:transform .42s cubic-bezier(.7,0,.2,1);
}

/* 2 · elle sort par l'AUTRE bord — 520 ms */
html.lux .oc-coupe--sort{
  transform-origin:100% 50%;
  transform:scaleX(0);
  transition:transform .52s cubic-bezier(.7,0,.2,1);
}

/* Le fil vertical de la porte se rétracte d'un coup au clic : 140 ms, le
   geste le plus rapide de tout le site. C'est lui qui donne le départ. */
html.lux .oc-accueil-entrer:active .oc-accueil-entrer__fil{
  transform:scaleY(.24);
  transition:transform .14s cubic-bezier(.7,0,.2,1);
  animation:none;
}

@media (prefers-reduced-motion:reduce){
  html.lux .oc-coupe{ display:none; }
  html.lux .oc-accueil-entrer:active .oc-accueil-entrer__fil{ transform:none; transition:none; }
}

/* L'en-tête sombre du site serait illisible sur ce champ clair : on le
   bascule en encre tant que l'accueil occupe le haut de l'écran. */
html.lux body[data-page="index"] .hd:not(.is-scrolled) :is(.logo-n,.logo-s,.nl,.lb,.ncta){
  color:oklch(.2126 calc(var(--ol-c-body)*.42) var(--ol-h));
}

html.lux body[data-page="index"] .hd:not(.is-scrolled) .ncta{
  border-color:oklch(.2126 calc(var(--ol-c-body)*.42) var(--ol-h) / .38);
}

/* ══════════════════════════════════════════════════════════════════════════
   L'ACCUEIL N'A PAS D'EN-TÊTE
   J'avais d'abord rendu la barre transparente et passé ses libellés à
   l'encre. C'était encore trop : Immersive Garden n'a qu'un logotype et le
   mot « About » ; Active Theory, une pastille de deux entrées. Aucun des
   deux ne pose une navigation complète sur son écran d'arrivée — parce
   qu'une barre de dix liens annonce un site, quand l'écran d'arrivée doit
   annoncer une Maison.

   L'en-tête est donc RETIRÉ tant que le lecteur n'a pas quitté l'accueil.
   `.is-scrolled` est posée par caravelli-v912.js au-delà de 120 px : la
   navigation revient donc au premier geste de défilement, entière et à sa
   place, sur la nuit du site.

   Elle n'est pas masquée pour le clavier ni pour les lecteurs d'écran :
   `visibility` reste héritée et le focus la ramène (voir :focus-within),
   sans quoi on perdrait la navigation au premier Tab.
   ══════════════════════════════════════════════════════════════════════════ */
/* `.dubai-band` n'est pas adjacente à `.hd` dans le flux — un sélecteur `+`
   ne l'atteint pas. On s'appuie sur `cv912-scrolled`, que caravelli-v912.js
   pose sur la RACINE au-delà de 120 px : un seul état, lisible partout. */
html.lux:not(.cv912-scrolled) body[data-page="index"] .hd,
html.lux:not(.cv912-scrolled) body[data-page="index"] .dubai-band,
html.lux:not(.cv912-scrolled) body[data-page="index"] .jj-scene{
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px);
  /* `opacity:0` ne libère pas la place : la bande et la scène du jour
     restaient dans le flux et poussaient l'accueil vers le bas, laissant
     apparaître l'obsidienne du body au-dessus du champ de Carrare.
     On annule donc leur encombrement — pas leur existence. */
  height:0;
  min-height:0;
  margin:0;
  padding:0;
  border-width:0;
  overflow:hidden;
  transition:opacity .7s cubic-bezier(.19,1,.22,1), transform .7s cubic-bezier(.19,1,.22,1);
}

/* Au clavier, la navigation doit revenir dès qu'on l'atteint. */
html.lux:not(.cv912-scrolled) body[data-page="index"] .hd:focus-within{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

html.lux.cv912-scrolled body[data-page="index"] .hd,
html.lux.cv912-scrolled body[data-page="index"] .dubai-band{
  opacity:1;
  pointer-events:auto;
  transform:none;
  height:auto;
  overflow:visible;
  transition:opacity .7s cubic-bezier(.19,1,.22,1), transform .7s cubic-bezier(.19,1,.22,1);
}

@media (prefers-reduced-motion:reduce){
  html.lux:not(.cv912-scrolled) body[data-page="index"] .hd,
  html.lux.cv912-scrolled body[data-page="index"] .hd{ transform:none; transition:opacity .5s linear; }
}

/* La bande « Inaugurée le 7 août 2026 · Dubaï » réserve sa place par un
   `padding-top:34px` sur le body. Masquer la bande ne suffisait donc pas :
   la réserve subsistait, et l'obsidienne du body apparaissait en bandeau
   au-dessus du champ de Carrare. On annule la réserve tant qu'on est sur
   l'accueil ; elle revient avec la bande au premier défilement. */
html.lux:not(.cv912-scrolled) body[data-page="index"]{ padding-top:0 !important; }