/* ===========================================================
   PERSONNAGES — animations (voir assets/persos.js)
   =========================================================== */
.perso { position: relative; }
.perso-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.perso-svg g { transform-box: view-box; }
.perso-svg .corps-entier { transform-origin: 50px 130px; animation: respire 3.4s ease-in-out infinite; }
.perso-svg .tete { transform-origin: 50px 78px; transition: transform 0.35s ease; }
.perso-svg .bras-g { transform-origin: 27px 92px; transition: transform 0.35s cubic-bezier(.3, 1.5, .5, 1); }
.perso-svg .bras-d { transform-origin: 73px 92px; transition: transform 0.35s cubic-bezier(.3, 1.5, .5, 1); }
.perso-svg .yeux { transform-box: fill-box; transform-origin: center; animation: cligne 4.6s infinite; }
.perso-svg .b-joie, .perso-svg .b-triste, .perso-svg .b-parle, .perso-svg .larme { opacity: 0; transition: opacity 0.15s; }
.perso-svg .b-neutre { transition: opacity 0.15s; }
.perso-svg .sourcils { transition: transform 0.3s; transform-box: fill-box; transform-origin: center; }

/* Content : bras en l'air, saute, grand sourire */
.perso.content .perso-svg .corps-entier { animation: saute 0.55s ease-in-out 3; }
.perso.content .perso-svg .bras-g { transform: rotate(150deg); }
.perso.content .perso-svg .bras-d { transform: rotate(-150deg); }
.perso.content .perso-svg .b-joie { opacity: 1; }
.perso.content .perso-svg .b-neutre { opacity: 0; }
.perso.content .perso-svg .sourcils { transform: translateY(-2px); }

/* Triste : tête basse, moue, petite larme */
.perso.triste .perso-svg .tete { transform: rotate(-7deg) translateY(3px); }
.perso.triste .perso-svg .corps-entier { animation: secoue-perso 0.5s ease 1, respire 3.4s ease-in-out 0.5s infinite; }
.perso.triste .perso-svg .b-triste, .perso.triste .perso-svg .larme { opacity: 1; }
.perso.triste .perso-svg .larme { animation: larme 1.4s ease-in infinite; }
.perso.triste .perso-svg .b-neutre { opacity: 0; }
.perso.triste .perso-svg .sourcils { transform: rotate(8deg); }

/* Attend (c'est son tour) : se penche, sourcils levés */
.perso.attend .perso-svg .tete { transform: rotate(4deg); }
.perso.attend .perso-svg .bras-d { transform: rotate(-35deg); }
.perso.attend .perso-svg .sourcils { transform: translateY(-1.5px); }

/* Parle (présentateur) : bouche qui bouge, micro levé */
.perso.parle .perso-svg .b-parle { opacity: 1; animation: parle 0.22s steps(2) infinite; }
.perso.parle .perso-svg .b-neutre { opacity: 0; }
.perso.parle .perso-svg .bras-g { transform: rotate(40deg); }
.perso.parle .perso-svg .tete { animation: hoche 0.9s ease-in-out infinite; }

/* Cache : se cache les yeux (pendant que l'autre répond en secret) */
.perso-svg .mains-yeux { opacity: 0; transition: opacity 0.2s 0.1s; }
.perso.cache .perso-svg .mains-yeux { opacity: 1; }
.perso.cache .perso-svg .bras-g { transform: rotate(160deg); }
.perso.cache .perso-svg .bras-d { transform: rotate(-160deg); }
.perso.cache .perso-svg .tete { transform: rotate(-4deg) translateY(1px); }

@keyframes respire { 50% { transform: scaleY(1.018) translateY(-0.6px); } }
@keyframes cligne { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes saute { 50% { transform: translateY(-12px) scaleY(1.03); } }
@keyframes secoue-perso { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes larme { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
@keyframes parle { 50% { transform: scaleY(0.35); } }
@keyframes hoche { 50% { transform: rotate(-3deg); } }

@media (prefers-reduced-motion: reduce) {
  .perso-svg *, .perso-svg { animation: none !important; }
}
.perso-svg .b-parle { transform-box: fill-box; transform-origin: center; }