@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   CARAVELLI — OLYMPE · CRISTAL v9233 — la bande du seuil
   Feuille compagnon de JS/olympe-cristal-v9233.js.

   Le cristal n'est plus DANS le pied de page : il est le SEUIL qui y mène.
   Cette feuille ne fait que trois choses :
     1. tenir la bande, pleine largeur, juste avant `footer.ft` ;
     2. la raccorder au dégradé du pied de page pour qu'on ne voie aucune
        couture — la bande et le pied doivent se lire d'un seul tenant ;
     3. porter les garde-fous : mobile, mouvement réduit, impression.

   Rien n'est stylé tant que le script n'a pas posé `.cristal9233--on` : une
   page qui charge la feuille sans le script ne reçoit aucun style, et le
   pied de page reste exactement ce qu'il était.

   AUCUNE PROPRIÉTÉ TYPOGRAPHIQUE ici. Ni font-family, ni font-size, ni
   font-weight, ni letter-spacing, ni line-height. La bande ne contient pas
   de texte : elle n'a aucune raison d'en toucher.
   ══════════════════════════════════════════════════════════════════════════ */

.cristal9233{
  position:relative;
  display:block;
  width:100%;
  /* Assez haut pour que la taille se lise, assez bas pour ne pas repousser
     le pied de page hors de vue sur un portable. */
  height:clamp(280px, 30vw, 440px);
  margin:0;
  padding:0;
  overflow:hidden;
  pointer-events:none;
  contain:layout paint style;
  /* Le fond de repli : si la toile met un instant à peindre, on ne voit pas
     un trou blanc mais la nuit de la Maison. */
  background:linear-gradient(180deg,
      oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h) / 0) 0%,
      oklch(.147 calc(var(--ol-c-body)*.375) var(--ol-h) / .62) 22%,
      oklch(.1625 calc(var(--ol-c-body)*.435) var(--ol-h) / .96) 62%,
      oklch(.1272 calc(var(--ol-c-body)*.299) var(--ol-h)) 100%);
  /* Le raccord : le haut de la bande s'efface dans la section qui précède,
     le bas rejoint franchement le pied de page. Sans cela, deux rectangles. */
  -webkit-mask-image:linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,.55) 11%, #000 26%, #000 100%);
          mask-image:linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,.55) 11%, #000 26%, #000 100%);
}

.cristal9233__toile{
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity 1600ms cubic-bezier(.22,.61,.36,1);
}
.cristal9233--on .cristal9233__toile{ opacity:1; }

/* Le pied de page qui suit ne doit plus porter de marge haute : la bande
   fait la transition, une marge rouvrirait la couture. */
.cristal9233 + footer.ft{ margin-top:0; }

/* ══ GARDE-FOUS ══════════════════════════════════════════════════════════ */

/* Sur petit écran la bande se resserre : le cristal doit rester un seuil,
   pas confisquer un demi-écran de défilement. */
@media (max-width:860px){
  .cristal9233{ height:clamp(190px, 42vw, 260px); }
}
@media (max-width:520px){
  .cristal9233{ height:180px; }
}

/* Mouvement réduit : le script ne lance aucune boucle et peint une seule
   image. On retire aussi le fondu d'apparition — une apparition est un
   mouvement. */
@media (prefers-reduced-motion:reduce){
  .cristal9233__toile{ transition:none; opacity:1; }
}

/* À l'impression, un ornement n'a rien à faire sur le papier. */
@media print{
  .cristal9233{ display:none; }
}