/* Logo de l'en-tête animé au défilement (assets/js/modules/header-logo.js).
   Au repos : « altaide » en dégradé. En défilant vers le bas : les lettres disparaissent de droite à
   gauche, puis le « a » devient l'icône de l'app. En remontant : l'inverse.
   Le dégradé de chaque lettre est calé sur le mot entier (--lw, --lx mesurés par le JS) : au repos,
   le rendu est identique à l'ancien logotype d'une seule pièce. */

.logo-anim {
    display: inline-flex;
    align-items: center;
    height: 32px;
    font-family: 'Comfortaa', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}
.logo-anim i, .logo-anim b { font-style: normal; font-weight: 400; }

.logo-anim .lg {
    display: inline-block;
    line-height: 1;
    padding: 0.08em 0;
    margin: -0.08em 0;
    color: var(--color-accent); /* repli si background-clip:text échoue */
    background: var(--brand-gradient);
    background-repeat: no-repeat;
    background-size: var(--lw, 100%) 100%;
    background-position: calc(var(--lx, 0px) * -1) 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Le « a » : lettre en dégradé au repos ; replié, il devient un « a » sombre suivi d'un point d'accent */
.logo-anim .la {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 32px;
}
/* Deux « a » identiques superposés : le dégradé s'efface pendant que le « a » uni apparaît, sans
   décalage, ce qui se lit comme un changement de couleur. */
.logo-anim .lq { display: inline-grid; }
.logo-anim .lq > i { grid-area: 1 / 1; }
.logo-anim .la .lg { transition: opacity .2s ease .1s; }
.logo-anim .ls {
    display: inline-block;
    line-height: 1;
    padding: 0.08em 0;
    margin: -0.08em 0;
    color: var(--text-strong);
    -webkit-text-fill-color: currentColor;
    opacity: 0;
    transition: opacity .2s ease;
}
/* Le point : même police et même taille que les lettres, couleur d'accent */
.logo-anim .ld {
    display: inline-block;
    overflow: hidden;
    max-width: 0;
    line-height: 1;
    padding: 0.08em 0;
    margin: -0.08em 0;
    color: var(--color-accent);
    -webkit-text-fill-color: currentColor;
    opacity: 0;
    transform: scale(.4);
    transform-origin: 30% 80%;
    transition: opacity .15s ease, transform .15s ease, max-width .2s cubic-bezier(.4, 0, .2, 1);
}

/* Les autres lettres : « ltaide » */
.logo-anim .lr {
    display: inline-flex;
    overflow: hidden;
    max-width: var(--rw, 240px);
    padding: 0.08em 0;
    margin: -0.08em 0;
    transition: max-width .3s cubic-bezier(.4, 0, .2, 1) .12s;
}
/* Déploiement : de gauche à droite (--k vaut 5 pour « l » … 0 pour « e ») */
.logo-anim .lr .lg {
    transition: opacity .2s ease calc(.2s + (5 - var(--k)) * .045s),
                transform .2s ease calc(.2s + (5 - var(--k)) * .045s);
}

/* Replié : les lettres partent de droite à gauche, puis le « a » devient sombre et le point apparaît */
.logo-anim.is-collapsed .lr { max-width: 0; transition-delay: .28s; }
.logo-anim.is-collapsed .lr .lg {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .18s ease calc(var(--k) * .045s), transform .18s ease calc(var(--k) * .045s);
}
.logo-anim.is-collapsed .la .lg { opacity: 0; transition: opacity .22s ease .38s; }
.logo-anim.is-collapsed .ls { opacity: 1; transition: opacity .22s ease .38s; }
.logo-anim.is-collapsed .ld {
    max-width: var(--dw, 12px);
    opacity: 1;
    transform: scale(1);
    transition: opacity .2s ease .5s, transform .34s cubic-bezier(.34, 1.56, .64, 1) .5s, max-width .2s cubic-bezier(.4, 0, .2, 1) .5s;
}

/* « Réduire les animations » : bascule instantanée, sans mouvement */
@media (prefers-reduced-motion: reduce) {
    .logo-anim, .logo-anim * { transition-duration: 0s !important; transition-delay: 0s !important; }
}