@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   CARAVELLI — OLYMPE · TRANSITIONS INTER-DOCUMENTS — LUXURY BRANCH
   Priorité 1.

   ── CE QUE J'AI TROUVÉ AVANT D'ÉCRIRE, ET QUI A CHANGÉ LE TRAVAIL ─────────
   La Maison a DÉJÀ des transitions inter-documents, et elles sont bonnes.
   `CSS/olympe-system.css` déclare `@view-transition { navigation: auto }`,
   apparie `header#hd` (`hc-entete`), `#vg-btn` (`hc-visite`) et `#aiw`
   (`hc-concierge`), et va jusqu'aux TRANSITIONS TYPÉES — `ol-detail`,
   `ol-rubrique`, `ol-retour` — posées par `JS/olympe-engine.js` sur
   `pageswap` / `pagereveal` via `types.add()`. Sous mouvement réduit, elle
   repasse même en `navigation: none`.

   Une première version de cette feuille redéfinissait les animations de
   `root` avec ses propres durées et posait un second jeu de noms. Elle
   écrasait un dispositif plus fin que le sien — exactement ce qu'il ne faut
   pas faire. Elle a été retirée.

   ── LE VRAI MANQUE ────────────────────────────────────────────────────────
   Les 30 pages de la **Luxury Branch** n'ont AUCUNE transition : elles ne
   chargent pas `olympe-system.css`. On passait d'une fiche de bien à l'autre
   par un blanc, alors que la Maison, elle, glissait.

   Cette feuille ne s'adresse donc qu'à la Branche, et elle s'aligne sur la
   Maison plutôt que d'inventer : mêmes durées (0,42 s en sortie, 0,58 s en
   entrée), mêmes courbes, et surtout **le même nom d'appariement pour
   l'en-tête** — `hc-entete`. Conséquence voulue : une navigation de la
   Maison vers la Branche garde son en-tête en place. C'est le seul endroit
   du site où les deux gabarits se parlent.

   ── DÉGRADATION ───────────────────────────────────────────────────────────
   Firefox ignore `@view-transition` : on navigue comme avant, sans un
   avertissement. Aucun JavaScript n'est ajouté — rien ne peut échouer à
   l'exécution. Sous `prefers-reduced-motion`, on passe en `navigation: none`
   comme le fait la Maison : même politique des deux côtés.

   AUCUNE PROPRIÉTÉ TYPOGRAPHIQUE ici.
   ══════════════════════════════════════════════════════════════════════════ */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {

  /* ══ 1 · LE FONDU GÉNÉRAL — calé sur celui de la Maison ═════════════════
     L'ancienne page s'efface plus vite qu'elle n'est remplacée : les deux
     ne sont jamais pleinement opaques ensemble, donc jamais de surimpression
     sale au milieu du passage. */

  ::view-transition-old(root) {
    animation: lbSortie .42s cubic-bezier(.4, 0, .2, 1) both;
  }
  ::view-transition-new(root) {
    animation: lbEntree .58s cubic-bezier(.19, 1, .22, 1) both;
  }

  @keyframes lbSortie {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: scale(.994); }
  }
  @keyframes lbEntree {
    from { opacity: 0; transform: scale(1.006); }
    to   { opacity: 1; transform: none; }
  }

  /* ══ 2 · LES ÉLÉMENTS APPARIÉS ═════════════════════════════════════════
     Deux, et deux seulement. Apparier davantage produit un ballet, et un
     ballet n'est pas du luxe.

     `hc-entete` est le nom employé par la Maison : c'est délibéré. Il rend
     l'en-tête continu d'une branche à l'autre. */

  .site-header { view-transition-name: hc-entete; }
  .site-footer { view-transition-name: lb-pied; }

  ::view-transition-group(hc-entete),
  ::view-transition-group(lb-pied) {
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(.19, 1, .22, 1);
  }

  /* L'en-tête et le pied ne changent pas de contenu d'une page à l'autre.
     Les faire fondre les ferait clignoter : on les tient pleinement opaques
     pendant tout le passage, ils ne font que rester. */
  ::view-transition-old(hc-entete),
  ::view-transition-new(hc-entete),
  ::view-transition-old(lb-pied),
  ::view-transition-new(lb-pied) {
    animation: none;
    mix-blend-mode: normal;
    opacity: 1;
  }
}

/* ══ 3 · GARDE-FOUS ══════════════════════════════════════════════════════ */

/* Rien ne défile sous une page en cours de passage. */
html:active-view-transition { overflow: clip; }

/* Même politique que la Maison : sous mouvement réduit, pas de transition
   du tout. Un fondu imposé à qui demande moins de mouvement reste du
   mouvement. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}