/* ============================================================
   YJ SITE — AJAX Transitions
   Animations de transition entre les sections (AJAX)
============================================================ */

/* Quand on charge une nouvelle section : fade out + slide up */
.yj-app__section-wrap.is-leaving{
    opacity:0;
    transform:translateY(-20px);
    transition:opacity .35s var(--yj-ease), transform .35s var(--yj-ease);
}

/* Quand la nouvelle section arrive : fade in + slide up from below */
.yj-app__section-wrap.is-entering > section{
    animation:yjSectionEnter .6s var(--yj-ease-out);
}
@keyframes yjSectionEnter{
    from{opacity:0;transform:translateY(24px);}
    to{opacity:1;transform:translateY(0);}
}

/* Loader pendant le fetch AJAX */
.yj-loader{
    position:fixed;
    top:0;left:0;right:0;
    height:3px;
    background:transparent;
    z-index:10000;
    pointer-events:none;
}
.yj-loader__bar{
    height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--yj-green-deep), var(--yj-terracotta));
    transition:width .3s var(--yj-ease);
    box-shadow:0 0 12px rgba(199,93,58,.5);
}
.yj-loader.is-loading .yj-loader__bar{
    width:60%;
    transition:width 1.5s cubic-bezier(.4,0,.2,1);
}
.yj-loader.is-done .yj-loader__bar{
    width:100%;
    transition:width .25s cubic-bezier(.4,0,.2,1);
}
.yj-loader.is-done{
    opacity:0;
    transition:opacity .3s .25s var(--yj-ease);
}