/* ==========================================================================
   WEBIPHI — Couche d'effets                                       wbp-fx.css
   Apparitions au défilement, entrée du héros, mots qui se révèlent,
   inclinaison au survol, boutons magnétiques.

   Trois garde-fous non négociables :
     1. Tout est enfermé dans .wbp-js — sans JavaScript, rien n'est masqué.
        C'est la règle qui évite la page blanche quand le script tombe.
     2. prefers-reduced-motion coupe tout, ici comme dans wbp-core.css.
     3. On n'anime que transform / opacity / clip-path : jamais une propriété
        qui force un recalcul de mise en page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Apparition au défilement
   --wbp-i porte le rang de l'élément dans son groupe : la cascade se règle
   en CSS, le script n'a qu'à poser .is-in.
   -------------------------------------------------------------------------- */
.wbp-js .wbp-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--wbp-ease), transform .7s var(--wbp-ease);
  transition-delay:calc(var(--wbp-i,0) * 70ms);
  will-change:opacity,transform;
}
.wbp-js .wbp-reveal.is-in{opacity:1;transform:none;will-change:auto}

/* Variantes — même mécanique, autre trajectoire. */
.wbp-js .wbp-reveal--left{transform:translateX(-28px)}
.wbp-js .wbp-reveal--right{transform:translateX(28px)}
.wbp-js .wbp-reveal--zoom{transform:scale(.96)}
.wbp-js .wbp-reveal--left.is-in,
.wbp-js .wbp-reveal--right.is-in,
.wbp-js .wbp-reveal--zoom.is-in{transform:none}

/* --------------------------------------------------------------------------
   Titre qui se révèle mot à mot
   Chaque mot est enveloppé par le script dans un masque à overflow:clip ; le
   mot monte depuis sous la ligne. clip et non hidden : hidden rognerait les
   jambages des lettres (p, g, j) sur certaines polices.
   -------------------------------------------------------------------------- */
.wbp-word{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.06em}
.wbp-word > span{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .8s var(--wbp-ease);
  transition-delay:calc(var(--wbp-i,0) * 48ms);
}
.wbp-split.is-in .wbp-word > span,
.is-in .wbp-word > span{transform:none}

/* --------------------------------------------------------------------------
   Entrée du héros — jouée au chargement, pas au défilement : le héros est
   déjà à l'écran, l'observateur le déclencherait avec un temps de retard.
   -------------------------------------------------------------------------- */
.wbp-js .wbp-in{
  opacity:0;transform:translateY(18px);
  transition:opacity .85s var(--wbp-ease), transform .85s var(--wbp-ease);
  transition-delay:calc(var(--wbp-i,0) * 90ms);
}
.wbp-js.wbp-ready .wbp-in{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   Inclinaison au survol — réservée au pointeur fin.
   Au doigt, :hover reste collé après le tap et la carte garde son angle.
   -------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .wbp-js [data-wbp-tilt]{
    transform:perspective(900px)
              rotateX(var(--wbp-rx,0deg))
              rotateY(var(--wbp-ry,0deg))
              translateY(var(--wbp-ty,0px));
    transition:transform .4s var(--wbp-ease), box-shadow .4s;
  }
  .wbp-js [data-wbp-tilt].is-tilting{transition:transform .12s linear}
}

/* --------------------------------------------------------------------------
   Bouton magnétique — le déplacement est plafonné à 6px par le script : au
   delà, le curseur « rate » le bouton et le clic tombe à côté.
   -------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .wbp-js [data-wbp-magnet]{
    transform:translate(var(--wbp-mx,0px),var(--wbp-my,0px));
    transition:transform .28s var(--wbp-ease);
  }
  .wbp-js [data-wbp-magnet].is-magnet{transition:transform .1s linear}
  /* Le survol du bouton porte déjà un translateY : les deux transforms se
     battraient. Sur une cible magnétique, on neutralise celui du survol. */
  .wbp-js .wbp-btn[data-wbp-magnet]:hover{transform:translate(var(--wbp-mx,0px),var(--wbp-my,0px))}
}

/* --------------------------------------------------------------------------
   Lueur qui suit le curseur sur une carte
   -------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .wbp-js [data-wbp-glow]{position:relative;isolation:isolate}
  .wbp-js [data-wbp-glow]::before{
    content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
    background:radial-gradient(240px circle at var(--wbp-gx,50%) var(--wbp-gy,0%),
               rgba(163,20,50,.09),transparent 72%);
    opacity:0;transition:opacity .3s;pointer-events:none;
  }
  .wbp-js [data-wbp-glow]:hover::before{opacity:1}
}

/* --------------------------------------------------------------------------
   Barre de progression de lecture (pages longues)
   -------------------------------------------------------------------------- */
.wbp-progress{
  position:fixed;left:0;top:0;z-index:120;height:2px;width:100%;
  transform:scaleX(var(--wbp-p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--wbp-brand),var(--wbp-brand-mid));
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   Retour haut de page
   -------------------------------------------------------------------------- */
.wbp-top{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:90;
  width:46px;height:46px;display:grid;place-items:center;
  border:none;border-radius:50%;cursor:pointer;
  background:var(--wbp-brand);color:var(--wbp-cream);
  box-shadow:var(--wbp-shadow-brand);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s,visibility .3s,transform .3s var(--wbp-ease),background .2s;
}
.wbp-top.is-in{opacity:1;visibility:visible;transform:none}
.wbp-top:hover{background:#7E0B1F}
.wbp-top svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------------------------
   Filet de sécurité : mouvement réduit.
   On répète ici la remise à plat, car ces règles-ci sont chargées après
   wbp-core.css et pourraient repasser devant.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .wbp-js .wbp-reveal,
  .wbp-js .wbp-in{opacity:1 !important;transform:none !important}
  .wbp-word > span{transform:none !important}
  .wbp-js [data-wbp-tilt],
  .wbp-js [data-wbp-magnet]{transform:none !important}
}