/* ═══════════════════════════════════════════════════════════════════════════
   CARAVELLI — OLYMPE · CRISTAL TAILLÉ v9232
   ───────────────────────────────────────────────────────────────────────────
   Feuille compagnon de JS/olympe-cristal-v9232.js.

   Le script émet une scène SVG complète (tablette, reflets, ombres,
   caustiques, pièces, feu). Cette feuille ne fait que trois choses :
     1. poser la scène dans le pied de page sans jamais rien recouvrir ;
     2. faire dériver la lumière — le fondu croisé des trois calques de feu ;
     3. tenir les garde-fous : mobile, mouvement réduit, impression.

   Tout est porté par la classe d'activation .cristal-v9232--on : une page
   qui charge la feuille sans le script ne reçoit strictement aucun style.
   ═════════════════════════════════════════════════════════════════════════ */

/* ══ 1. LE PIED DE PAGE COMME REPÈRE ═══════════════════════════════════════
   isolation:isolate enferme le contexte d'empilement : quel que soit le
   z-index des voisins (panneau IA, bandeau de consentement), la scène ne
   peut jamais remonter par-dessus quoi que ce soit hors du pied de page. */
footer.ft.cristal-v9232--on{
  position:relative;
  isolation:isolate;
}

/* Tout le contenu réel du pied de page repasse DEVANT la scène. On ne touche
   qu'aux enfants directs, et jamais à celui qu'on a inséré nous-mêmes. */
footer.ft.cristal-v9232--on > *:not(.cristal-v9232){
  position:relative;
  z-index:1;
}

/* ══ 2. LA VITRINE ═════════════════════════════════════════════════════════
   Bande basse, pleine largeur du pied de page — donc aucun débordement
   horizontal possible. Le masque ne fait fondre que le tout dernier tiers
   haut : la composition doit se lire entière, seule l'atmosphère au-dessus
   des pièces se perd dans le bleu nuit. */
.cristal-v9232{
  position:absolute;
  inset:auto 0 0 0;
  height:clamp(178px, 21vw, 290px);
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  contain:layout paint style;
  -webkit-mask-image:linear-gradient(to top,
              #000 0%, #000 68%, rgba(0,0,0,.55) 88%, transparent 100%);
          mask-image:linear-gradient(to top,
              #000 0%, #000 68%, rgba(0,0,0,.55) 88%, transparent 100%);
}

/* La scène est calée à droite, là où le pied de page est vide : la colonne
   de texte et le bloc de copyright occupent la gauche. `meet` garantit
   qu'elle tient TOUJOURS dans sa boîte, quelle que soit la proportion — la
   composition ne peut donc jamais être rognée. */
.cristal-v9232__scene{
  position:absolute;
  right:3%;
  bottom:0;
  width:min(780px, 76%);
  height:100%;
  display:block;
  opacity:0;
  pointer-events:none;
  transition:opacity 1400ms cubic-bezier(.22,.61,.36,1);
  /* Un objet de verre ajoute de la lumière au fond, il n'en retire pas. */
  shape-rendering:geometricPrecision;
}
.cristal-v9232--on .cristal-v9232__scene{opacity:1;}

/* ══ 3. LA DÉRIVE DE LA LUMIÈRE ════════════════════════════════════════════
   Trois états de verrière calculés à l'avance, trois calques de feu et trois
   calques de caustiques qui se relaient en fondu. La géométrie ne bouge pas :
   seule la lumière court sur la taille. C'est la seule animation du module,
   et elle ne coûte qu'une composition d'opacité — aucun re-calcul de mise en
   page, aucune re-peinture, aucune trame JavaScript.

   Cycle de 33 s : à ce rythme, on ne « voit » pas l'animation, on remarque
   seulement que la pièce n'est pas tout à fait la même qu'il y a un instant.
   C'est exactement l'effet recherché en pied de page. */
.cr-b,.cr-d{opacity:0;}
.cr-a{opacity:1;}

@keyframes cristalV9232A{0%,100%{opacity:1}33%,66%{opacity:0}}
@keyframes cristalV9232B{0%,66%,100%{opacity:0}33%{opacity:1}}
@keyframes cristalV9232C{0%,33%,100%{opacity:0}66%{opacity:1}}

.cristal-v9232--vif .cr-a{animation:cristalV9232A 33s ease-in-out infinite;}
.cristal-v9232--vif .cr-b{animation:cristalV9232B 33s ease-in-out infinite;}
.cristal-v9232--vif .cr-d{animation:cristalV9232C 33s ease-in-out infinite;}

/* Les caustiques dérivent avec un temps de retard : la lumière atteint la
   pierre après avoir traversé la pièce. Détail infime, mais c'est de ces
   détails qu'est faite la différence entre un décor et un objet. */
.cristal-v9232--vif .cr-c{animation-delay:-1.4s;}

/* ══ 4. TÉLÉPHONE (≤720px) ═════════════════════════════════════════════════
   Le script ne compose alors que la pièce maîtresse — pas de satellites,
   caustiques réduites. Ici on abaisse la bande et on rend la scène plus
   discrète : sur un écran étroit, le pied de page est déjà dense. */
@media (max-width:720px){
  .cristal-v9232{
    height:clamp(126px, 30vw, 178px);
    -webkit-mask-image:linear-gradient(to top,
                #000 0%, #000 62%, rgba(0,0,0,.45) 86%, transparent 100%);
            mask-image:linear-gradient(to top,
                #000 0%, #000 62%, rgba(0,0,0,.45) 86%, transparent 100%);
  }
  .cristal-v9232__scene{width:min(340px, 64%);right:2%;opacity:0;}
  .cristal-v9232--on .cristal-v9232__scene{opacity:.82;}
}

/* Écrans très étroits : la colonne de liens occupe toute la largeur. On
   allège encore plutôt que de retirer — une pièce à peine devinée vaut
   mieux qu'un pied de page nu. */
@media (max-width:420px){
  .cristal-v9232{height:clamp(104px, 32vw, 140px);}
  .cristal-v9232--on .cristal-v9232__scene{opacity:.66;}
  .cristal-v9232__scene{width:min(260px, 68%);}
}

/* ══ 5. MOUVEMENT RÉDUIT ═══════════════════════════════════════════════════
   Le script ne pose pas la classe --vif : aucune animation ne démarre. La
   scène reste sur son premier état de verrière, celui qui a été composé pour
   être vu seul. On coupe aussi le fondu d'apparition. */
@media (prefers-reduced-motion:reduce){
  .cristal-v9232__scene{transition:none;opacity:1;}
  .cr-a,.cr-b,.cr-d{animation:none !important;}
}

/* ══ 6. IMPRESSION ═════════════════════════════════════════════════════════ */
@media print{
  .cristal-v9232{display:none !important;}
}