/* ═══════════════════════════════════════════════════════════════════════
   VIEUX-LOUP — l'âme du Loup, tout dans les yeux.
   Source de vérité : mockups/vieux-loup-anime-V1.html (élu C1 + A2 calme,
   décision Maxime 21/07/2026, TICKET-VIEUX-LOUP-AVATAR §0).
   Keyframes copiées du mockup — NE PAS réinterpréter.
   Consommé par js/vieux-loup-avatar.js (composant canonique).
   ═══════════════════════════════════════════════════════════════════════ */

/* Halo PERMANENT (demande Maxime 21/07 « rajoute toujours un halo autour de
   lui ») : anneau blanc net (le détache de tout fond, même le bouton vert)
   + aura verte MA + ombre douce. Une seule définition — jamais de halo local. */
.vl-avatar {
  border-radius: 50%; display: block; flex-shrink: 0;
  box-shadow:
    0 0 0 2px var(--card, #FFFFFF),
    0 0 0 4.5px rgba(47, 191, 122, .35),
    0 3px 10px rgba(13, 27, 15, .16);
}

svg.vl-avatar .lp-pupille, svg.vl-avatar .lp-lid, svg.vl-avatar .lp-sourcil { transform-box: fill-box; }
svg.vl-avatar .lp-pupille { transform-origin: center; }
svg.vl-avatar .lp-lid { transform-origin: center top; transform: scaleY(0); }
svg.vl-avatar .lp-sourcil { transform-origin: center; }

/* ── Cycle CALME (7 s) — L'UNIQUE animation ambiante : clignement + regard qui glisse ── */
.anim-calme .lp-pupille { animation: lp-regard-calme 7s ease-in-out infinite; }
.anim-calme .lp-lid { animation: lp-cligne 7s ease-in-out infinite; }
@keyframes lp-regard-calme {
  0%, 40% { transform: none; }
  46%, 56% { transform: translateX(-2.2px); }
  62%, 100% { transform: none; }
}
@keyframes lp-cligne {
  0%, 82% { transform: scaleY(0); }
  84%, 85.5% { transform: scaleY(1); }
  87%, 100% { transform: scaleY(0); }
}

/* ── Cycle BLASÉ (9 s) — RÉSERVÉ (cartes d'analyse, sur validation Maxime à l'usage) ── */
.anim-blase .lp-pupille { animation: lp-regard 9s ease-in-out infinite; }
.anim-blase .lp-lid { animation: lp-paupiere 9s ease-in-out infinite; }
.anim-blase .lp-sourcil-d { animation: lp-sourcil 9s ease-in-out infinite; }
@keyframes lp-regard {
  0%, 20% { transform: none; }
  24%, 34% { transform: translateY(-2.4px); }   /* il lève les yeux au ciel */
  38%, 40% { transform: none; }
  54%, 64% { transform: translateX(-2.6px); }   /* « sérieusement ? » */
  68%, 100% { transform: none; }
}
@keyframes lp-paupiere {
  0%, 20% { transform: scaleY(0); }
  24%, 34% { transform: scaleY(.5); }           /* mi-clos pendant le roulement */
  38%, 76% { transform: scaleY(0); }
  78%, 79.5% { transform: scaleY(1); }          /* clignement sec */
  81%, 100% { transform: scaleY(0); }
}
@keyframes lp-sourcil {
  0%, 21% { transform: none; }
  24%, 34% { transform: translateY(-1.8px) rotate(-5deg); }  /* le sourcil qui juge */
  38%, 100% { transform: none; }
}

/* ── Le grand roulement d'yeux — déclenché par ÉVÉNEMENT (.joue), UNE fois, jamais en boucle ── */
.anim-clic.joue .lp-pupille { animation: lp-roule-clic 1.8s ease-in-out 1; }
.anim-clic.joue .lp-lid { animation: lp-lid-clic 1.8s ease-in-out 1; }
.anim-clic.joue .lp-sourcil-d { animation: lp-sourcil-clic 1.8s ease-in-out 1; }
@keyframes lp-roule-clic {
  0% { transform: none; }
  18% { transform: translate(1.6px, -1.6px); }
  38% { transform: translateY(-2.6px); }
  58% { transform: translate(-1.6px, -1.6px); }  /* le tour complet au ciel */
  76% { transform: none; }
  100% { transform: none; }
}
@keyframes lp-lid-clic {
  0% { transform: scaleY(0); }
  18%, 62% { transform: scaleY(.5); }
  80%, 100% { transform: scaleY(0); }
}
@keyframes lp-sourcil-clic {
  0% { transform: none; }
  18%, 62% { transform: translateY(-2px) rotate(-6deg); }
  80%, 100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  svg.vl-avatar * { animation: none !important; }
  /* SOMMEIL (23/07) : rotor et z vivent HORS du svg — éteints aussi ; sans
     mouvement, pas de dodo : il reste éveillé, halo complet. */
  .vl-scene-sommeil .sb-v3__note-loup { animation: none !important; }
  .vl-zz span { animation: none !important; opacity: 0 !important; }
  .vl-scene-sommeil:not(:hover) .vl-avatar {
    box-shadow:
      0 0 0 2px var(--card, #FFFFFF),
      0 0 0 4.5px rgba(47, 191, 122, .35),
      0 3px 10px rgba(13, 27, 15, .16);
  }
  .vl-scene-sommeil:not(:hover) .vl-avatar .lp-lid { animation: none !important; }
}

/* ═══ LES 8 PRISES (R10-ANIM, élections Maxime 23/07 « tu peux tout prendre »
   — mockup-loi vieux-loup-expressions-V1, keyframes copiées à l'IDENTIQUE,
   renommées vl-*). La règle d'or : la pupille se DILATE quand il s'intéresse,
   se RESSERRE quand il se méfie. Chaque prise = UNE fois (.joue), jamais en
   boucle. reduced-motion (bloc final existant) éteint tout. ═══ */

/* E1 · L'APPEL — clic sur sa tête : dilatation + haussement des 2 sourcils */
.vl-avatar.vl-e1.joue .lp-pupille { animation: vl-e1-pup 1.5s cubic-bezier(.25,.8,.3,1) 1; }
@keyframes vl-e1-pup { 0% { transform: scale(.72); } 30%, 70% { transform: scale(1.42); } 100% { transform: scale(1); } }
.vl-avatar.vl-e1.joue .lp-sourcil { animation: vl-e1-sourcil 1.5s ease-in-out 1; }
@keyframes vl-e1-sourcil { 0% { transform: none; } 26%, 62% { transform: translateY(-1.6px); } 100% { transform: none; } }

/* E2 · L'ÉCOUTE — il suit ta voix, pupilles vers le champ, clignement espacé */
.vl-avatar.vl-e2.joue .lp-pupille { animation: vl-e2-pup 3.4s ease-in-out 1; }
@keyframes vl-e2-pup { 0% { transform: none; } 14%, 88% { transform: translateY(1.7px) scale(1.18); } 100% { transform: none; } }
.vl-avatar.vl-e2.joue .lp-lid { animation: vl-e2-lid 3.4s ease-in-out 1; }
@keyframes vl-e2-lid { 0%, 44% { transform: scaleY(0); } 46%, 47.5% { transform: scaleY(1); } 49%, 100% { transform: scaleY(0); } }

/* E3 · IL CREUSE — paupières mi-closes, allers-retours rapides (il LIT) */
.vl-avatar.vl-e3.joue .lp-lid { animation: vl-e3-lid 2.6s ease-in-out 1; }
@keyframes vl-e3-lid { 0% { transform: scaleY(0); } 12%, 86% { transform: scaleY(.42); } 100% { transform: scaleY(0); } }
.vl-avatar.vl-e3.joue .lp-pupille { animation: vl-e3-pup 2.6s ease-in-out 1; }
@keyframes vl-e3-pup {
  0% { transform: none; }
  14% { transform: translate(-1.8px, .8px) scale(.8); } 26% { transform: translate(1.8px, .8px) scale(.8); }
  38% { transform: translate(-1.8px, .8px) scale(.8); } 50% { transform: translate(1.8px, .8px) scale(.8); }
  62% { transform: translate(-1.4px, .8px) scale(.8); } 74% { transform: translate(1.4px, .8px) scale(.8); }
  88%, 100% { transform: none; } }

/* E4 · L'EURÊKA — dilatation franche + double haussement bref */
.vl-avatar.vl-e4.joue .lp-pupille { animation: vl-e4-pup 1.6s cubic-bezier(.25,.8,.3,1) 1; }
@keyframes vl-e4-pup { 0% { transform: scale(.78); } 22%, 55% { transform: scale(1.5); } 100% { transform: scale(1); } }
.vl-avatar.vl-e4.joue .lp-sourcil { animation: vl-e4-sourcil 1.6s ease-in-out 1; }
@keyframes vl-e4-sourcil {
  0% { transform: none; } 16% { transform: translateY(-1.8px); } 30% { transform: translateY(-.4px); }
  44% { transform: translateY(-1.8px); } 66%, 100% { transform: none; } }

/* E5 · LE SCEPTIQUE — UN sourcil monte, pupilles resserrées, mi-clos. « Mouais. » */
.vl-avatar.vl-e5.joue .lp-sourcil-d { animation: vl-e5-sourcil 2.4s ease-in-out 1; }
@keyframes vl-e5-sourcil { 0% { transform: none; } 18%, 80% { transform: translateY(-2.2px) rotate(-7deg); } 100% { transform: none; } }
.vl-avatar.vl-e5.joue .lp-pupille { animation: vl-e5-pup 2.4s ease-in-out 1; }
@keyframes vl-e5-pup { 0% { transform: none; } 18%, 80% { transform: scale(.68); } 100% { transform: scale(1); } }
.vl-avatar.vl-e5.joue .lp-lid { animation: vl-e5-lid 2.4s ease-in-out 1; }
@keyframes vl-e5-lid { 0% { transform: scaleY(0); } 22%, 76% { transform: scaleY(.34); } 100% { transform: scaleY(0); } }

/* E6 · C'EST NOTÉ — UN clignement LENT : l'acquiescement du vieux (remplace le roulement) */
.vl-avatar.vl-e6.joue .lp-lid { animation: vl-e6-lid 1.7s cubic-bezier(.4,.1,.3,1) 1; }
@keyframes vl-e6-lid { 0% { transform: scaleY(0); } 30%, 52% { transform: scaleY(1); } 78%, 100% { transform: scaleY(0); } }
.vl-avatar.vl-e6.joue .lp-pupille { animation: vl-e6-pup 1.7s ease-in-out 1; }
@keyframes vl-e6-pup { 0%, 60% { transform: scale(1); } 78%, 100% { transform: scale(1.15); } }

/* E7 · LE FRONCEMENT — sourcils vers le nez, pupilles contractées (URGENT) */
.vl-avatar.vl-e7.joue .lp-sourcil-g { animation: vl-e7-sg 2.3s ease-in-out 1; }
@keyframes vl-e7-sg { 0% { transform: none; } 16%, 78% { transform: translateY(1.1px) rotate(9deg); } 100% { transform: none; } }
.vl-avatar.vl-e7.joue .lp-sourcil-d { animation: vl-e7-sd 2.3s ease-in-out 1; }
@keyframes vl-e7-sd { 0% { transform: none; } 16%, 78% { transform: translateY(1.1px) rotate(-9deg); } 100% { transform: none; } }
.vl-avatar.vl-e7.joue .lp-pupille { animation: vl-e7-pup 2.3s ease-in-out 1; }
@keyframes vl-e7-pup { 0% { transform: none; } 16%, 78% { transform: scale(.62); } 100% { transform: scale(1); } }

/* E8 · LA FIERTÉ BLASÉE — le roulement ADOUCI + retombée lente. « Enfin. » */
.vl-avatar.vl-e8.joue .lp-pupille { animation: vl-e8-pup 2.1s ease-in-out 1; }
@keyframes vl-e8-pup {
  0% { transform: none; } 20% { transform: translate(1.3px, -1.3px); } 40% { transform: translateY(-2.2px) scale(1.2); }
  60% { transform: translate(-1.3px, -1.3px); } 78%, 100% { transform: none; } }
.vl-avatar.vl-e8.joue .lp-lid { animation: vl-e8-lid 2.1s ease-in-out 1; }
@keyframes vl-e8-lid { 0% { transform: scaleY(0); } 22%, 64% { transform: scaleY(.5); } 86%, 100% { transform: scaleY(0); } }
.vl-avatar.vl-e8.joue .lp-sourcil-d { animation: vl-e8-sourcil 2.1s ease-in-out 1; }
@keyframes vl-e8-sourcil { 0% { transform: none; } 22%, 64% { transform: translateY(-2px) rotate(-6deg); } 86%, 100% { transform: none; } }

/* ═══ P2 · L'APPEL DEPUIS LE HALO (mockup-loi vieux-loup-appel-animations-V1,
   élu Maxime — « la fenêtre arrive un poil trop vite ») : au clic sur sa tête
   sidebar, l'aura PULSE ; la modale ÉMERGE de sa tête (origin côté avatar,
   bas-gauche), jamais une apparition sèche. ═══ */
.vl-avatar.vl-halo-pulse { animation: vl-p2-halo .9s ease-out 1; }
@keyframes vl-p2-halo {
  0% { box-shadow: 0 0 0 2px var(--card, #FFFFFF), 0 0 0 4.5px rgba(47, 191, 122, .35), 0 3px 10px rgba(13, 27, 15, .18); }
  32% { box-shadow: 0 0 0 2px var(--card, #FFFFFF), 0 0 0 13px rgba(47, 191, 122, .22), 0 3px 10px rgba(13, 27, 15, .18); }
  100% { box-shadow: 0 0 0 2px var(--card, #FFFFFF), 0 0 0 4.5px rgba(47, 191, 122, .35), 0 3px 10px rgba(13, 27, 15, .18); } }

/* ══ LE SOMMEIL + LE RÉVEIL R3 « L'ÉTIREMENT » (élu Maxime 23/07 — mockup-loi
   vieux-loup-sommeil-V3, copié à l'IDENTIQUE). Au repos il DORT : tête
   penchée qui respire, pique du nez toutes les ~7 s, yeux clos, z
   typographiques, HALO ÉTEINT. Le survol le RÉVEILLE en séquence
   (redressement lent, sourcils étirés, UN clignement, dilatation,
   marmonnement de barbe ×2) — puis le ×3 sidebar arrive en ABOUTISSEMENT
   (délai côté sidebar-v3.css). Sortie de souris : il se rendort.
   Scope .vl-scene-sommeil (le bouton sidebar) — jamais ailleurs sans GO. ══ */
svg.vl-avatar .lp-barbe { transform-box: fill-box; transform-origin: 50% 0%; }

.vl-scene-sommeil .sb-v3__note-loup {
  transform-origin: 50% 78%;
  animation: vl-dodo-pique 7s ease-in-out .8s infinite;
}
/* au dodo : halo éteint (l'aura verte s'éteint, l'anneau blanc + l'ombre
   restent — il doit rester lisible sur le bouton vert), yeux CLOS (prime
   sur le clignement calme), pupille figée */
.vl-scene-sommeil:not(:hover) .vl-avatar {
  box-shadow:
    0 0 0 2px var(--card, #FFFFFF),
    0 3px 10px rgba(13, 27, 15, .16);
}
.vl-scene-sommeil:not(:hover) .vl-avatar .lp-lid { animation: vl-s-endort 1.6s ease-in-out forwards; }
.vl-scene-sommeil:not(:hover) .vl-avatar .lp-pupille { animation: none; }
@keyframes vl-dodo-pique {
  0%, 100% { transform: rotate(5deg) scale(1); }
  46% { transform: rotate(5.6deg) scale(1.02); }        /* la respiration */
  78% { transform: rotate(5deg) scale(1); }
  86% { transform: rotate(10.5deg) scale(1); }          /* il pique du nez… */
  90% { transform: rotate(3.6deg) scale(1); }           /* …et se rattrape */
  94% { transform: rotate(5.4deg) scale(1); } }
@keyframes vl-s-endort { 0% { transform: scaleY(0); } 55%, 100% { transform: scaleY(1); } }

/* les z typographiques qui s'élèvent — éteints dès le survol */
.vl-zz { position: absolute; top: -14px; right: -10px; pointer-events: none; }
.vl-zz span {
  position: absolute; right: 0; bottom: 0;
  font-size: 9px; font-weight: 800; color: var(--muted, #7A9480);
  opacity: 0; animation: vl-z-monte 8s ease-in-out infinite;
}
.vl-zz span:nth-child(2) { animation-delay: 2.6s; font-size: 8px; }
.vl-zz span:nth-child(3) { animation-delay: 5.2s; font-size: 7px; }
@keyframes vl-z-monte {
  0%, 12% { opacity: 0; transform: translate(0, 0); }
  22% { opacity: .85; }
  46% { opacity: 0; transform: translate(7px, -16px); }
  100% { opacity: 0; } }
.vl-scene-sommeil:hover .vl-zz span { animation: none; opacity: 0; }

/* LE RÉVEIL R3 — redressement lent, sourcils étirés (le bâillement des
   yeux), UN clignement, dilatation, marmonnement ×2. :not(.joue) : une
   expression cliquée (E1…) reprend la main sur lid/pupille. */
.vl-scene-sommeil:hover .sb-v3__note-loup { animation: vl-r3-tete 1.15s cubic-bezier(.3,.8,.3,1) forwards; }
@keyframes vl-r3-tete { 0% { transform: rotate(5deg); } 40% { transform: rotate(6.4deg); } 100% { transform: rotate(0); } }
.vl-scene-sommeil:hover .vl-avatar:not(.joue) .lp-sourcil { animation: vl-r3-sourcil 1.5s ease-in-out; }
@keyframes vl-r3-sourcil { 0%, 20% { transform: none; } 42%, 66% { transform: translateY(-2.4px); } 100% { transform: none; } }
.vl-scene-sommeil:hover .vl-avatar:not(.joue) .lp-lid { animation: vl-r3-lid 1.5s ease-in-out forwards; }
@keyframes vl-r3-lid {
  0%, 24% { transform: scaleY(1); }
  52% { transform: scaleY(0); }                          /* ouverts…       */
  62%, 66% { transform: scaleY(1); }                     /* …le clignement */
  74%, 100% { transform: scaleY(0); } }
.vl-scene-sommeil:hover .vl-avatar:not(.joue) .lp-pupille { animation: vl-r3-pup 1.9s ease-in-out forwards; }
@keyframes vl-r3-pup { 0%, 48% { transform: scale(.75); } 78% { transform: scale(1.3); } 100% { transform: scale(1); } }
.vl-scene-sommeil:hover .vl-avatar .lp-barbe { animation: vl-r3-barbe 1.3s ease-in-out .75s 2; }
@keyframes vl-r3-barbe {
  0% { transform: none; }
  18% { transform: translateY(2.2px) scaleY(.97); }     /* « hmpf »     */
  34% { transform: translateY(.4px); }
  52% { transform: translateY(1.9px) scaleY(.975); }    /* « oui »      */
  68% { transform: translateY(.3px); }
  82% { transform: translateY(1.4px) scaleY(.985); }    /* « j'écoute » */
  100% { transform: none; } }

/* ══ BARBE = BOUCHE (demande Maxime 23/07 « quand il répond, faut faire
   bouger la barbe ») : vl-parle = boucle douce pendant qu'il travaille
   (bulle d'attente « … » / « il creuse… ») ; vl-marmonne = ×2 quand la
   réponse se pose, puis silence. Mouvement en HAUT de la barbe. ══ */
.vl-avatar.vl-parle .lp-barbe { animation: vl-r3-barbe 1.3s ease-in-out infinite; }
.vl-avatar.vl-marmonne .lp-barbe { animation: vl-r3-barbe 1.3s ease-in-out 2; }