/* =========================================================
   Liséa Création · couche « haute couture »
   Animations additionnelles. Se charge APRÈS style.css.
   Rien ici ne modifie style.css : tout est retirable
   en supprimant les 3 lignes ajoutées dans les pages HTML.
   ========================================================= */

:root{
  --lx-ease: cubic-bezier(.22,1,.36,1);
}

/* ---------------------------------------------------------
   1 · Défilement inertiel (Lenis)
   --------------------------------------------------------- */
html.lenis, html.lenis body{ height:auto }
html.lenis{ scroll-behavior:auto }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain }
.lenis.lenis-stopped{ overflow:hidden }

/* ---------------------------------------------------------
   2 · Titres : chaque ligne monte de derrière un pli
   --------------------------------------------------------- */
.lx-split{ opacity:1 !important; transform:none !important }
.lx-ligne{
  display:block; overflow:hidden;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.lx-ligne-in{ display:block; will-change:transform }
.lx-split .lx-ligne-in{ transform:translateY(108%) }

/* ---------------------------------------------------------
   3 · Le fil de couture : progression de lecture
   (surpiqûre qui se coud en haut de page au défilement)
   --------------------------------------------------------- */
#lx-fil{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:9990; pointer-events:none; opacity:.7;
  background:repeating-linear-gradient(90deg,
    var(--marron) 0 9px, transparent 9px 17px);
  transform:scaleX(0); transform-origin:0 50%;
}

/* ---------------------------------------------------------
   4 · Grain de tissu (texture très légère sur tout le site)
   --------------------------------------------------------- */
#lx-grain{
  position:fixed; inset:0; z-index:9985; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply; background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------
   5 · Mots qui s'encrent au défilement
   --------------------------------------------------------- */
.lx-mot{ display:inline-block; color:var(--taupe) }

/* ---------------------------------------------------------
   6 · Cartes pièces : survol
   --------------------------------------------------------- */
.lx-on .carte-img img{ transition:none }   /* la parallaxe JS prend la main */

.lx-voir{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:26px 14px 14px; text-align:center;
  font-size:10px; font-weight:500; letter-spacing:.28em;
  text-transform:uppercase; color:var(--blanc);
  background:linear-gradient(to top, rgba(46,33,27,.78), rgba(46,33,27,0));
  transform:translateY(101%); opacity:0;
  transition:transform .55s var(--lx-ease), opacity .4s ease;
}
.carte:hover .lx-voir{ transform:translateY(0); opacity:1 }
.epuise .lx-voir{ display:none }

/* ---------------------------------------------------------
   7 · Étapes : le trait se coud de gauche à droite
   --------------------------------------------------------- */
.lx-on .etape{ position:relative; border-top-color:transparent }
.lx-trait{
  position:absolute; top:-2px; left:0; right:0; height:2px;
  background:var(--marron); transform:scaleX(0); transform-origin:0 50%;
}
.sombre .lx-trait{ background:var(--safran) }

/* ---------------------------------------------------------
   8 · Transitions entre les pages (natif, navigateurs récents)
   --------------------------------------------------------- */
@view-transition{ navigation:auto }
#site-header{ view-transition-name:lx-entete }

@media (prefers-reduced-motion: no-preference) and (pointer:fine){
  ::view-transition-old(root){ animation:lx-sortie .32s ease both }
  ::view-transition-new(root){ animation:lx-entree .55s var(--lx-ease) both }
}

/* Mobile et tactile : changement de page instantané, pas de fondu,
   et défilement natif du téléphone (voir lux.js). */
@media (pointer:coarse){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none }
  html{ scroll-padding-top:90px }
  #lx-grain, #lx-fil{ display:none }
}
@keyframes lx-sortie{ to{ opacity:0; transform:translateY(-12px) } }
@keyframes lx-entree{ from{ opacity:0; transform:translateY(24px) } }

/* ---------------------------------------------------------
   9 · Accessibilité : on coupe tout si l'utilisateur le demande
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  #lx-fil, #lx-grain{ display:none }
  .lx-split .lx-ligne-in{ transform:none !important }
  .lx-mot{ color:inherit !important }
  .lx-trait{ transform:none !important }
  .lx-voir{ display:none }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none }
}