/* =====================================================================
   Missions Labo — MON AGENT illustré  (css/agents.css, après base.css)
   Images img/agents/<id>.png et <id>-waouh.png posées par js/agents.js.
   .agent[data-illu] > .ag-illu (sens du regard) > .ag-pose (pose durable)
   > .ag-anim (balancement, gestes d'un coup) > .ag-img
   Tout est en % de la boîte de l'agent (largeur --agent-l, rapport 200/280 de base.css).
   Le dessin SVG de repli garde les règles de base.css.
   ===================================================================== */

/* --- Portrait SVG (barre du haut, bulles, cartes) : le dessin de repli reste caché tant que l'image est là --- */
.ag-svg.ag-svg-tete, .agent .ag-svg.ag-svg-tete { overflow: hidden; }
.ag-svg-illu .ag-repli { display: none; }
.ag-svg-illu.ag-sans-image .ag-repli { display: inline; }
.ag-svg-illu.ag-sans-image .ag-img { display: none; }

/* --- Structure --- */
.agent[data-illu] { --ag-pied: 95.5%; --ag-amp: 1; }
.agent[data-illu][data-tete] { --ag-pied: 92%; --ag-amp: 0.45; }
.agent[data-illu] .ag-illu { position: absolute; inset: 0; pointer-events: none; }
.agent[data-illu][data-regard="gauche"] .ag-illu { transform: scaleX(-1); }
.agent[data-illu][data-regard="gauche"] .ag-svg { transform: none; } /* le sens est déjà donné par .ag-illu */
.agent[data-illu] .ag-pose, .agent[data-illu] .ag-anim { position: absolute; inset: 0; transform-origin: 50% var(--ag-pied); }
.agent[data-illu] .ag-pose { transition: transform 0.45s cubic-bezier(.3, 1.4, .5, 1); }
.agent[data-illu] .ag-anim { will-change: transform; }
.agent[data-illu] img.ag-img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none;
  object-fit: contain; object-position: 50% 100%;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
  transform-origin: 50% var(--ag-pied); transition: transform 0.35s ease, filter 0.35s ease;
}

/* Ombre au sol (reste au sol pendant les sauts) */
.agent[data-illu] .ag-sol {
  position: absolute; left: 24%; right: 24%; bottom: 1.2%; height: 5%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(36, 50, 74, 0.24), rgba(36, 50, 74, 0));
  transform-origin: 50% 50%;
}

/* --- Image « waouh » (bras en l'air, bouche ouverte) : joie, sursaut, applaudir, rire, surpris --- */
.agent[data-illu] .ag-img-waouh { visibility: hidden; }
.agent[data-illu]:not([data-sans-waouh]):is([data-pose="joie"], [data-pose="sursauter"], [data-pose="applaudir"], [data-humeur="rire"], [data-humeur="surpris"]) .ag-img-waouh { visibility: visible; }
.agent[data-illu]:not([data-sans-waouh]):is([data-pose="joie"], [data-pose="sursauter"], [data-pose="applaudir"], [data-humeur="rire"], [data-humeur="surpris"]) .ag-img-base { visibility: hidden; }

/* --- Humeurs (les visages sont dans les images : on joue sur la posture) --- */
.agent[data-illu][data-humeur="triste"] img.ag-img { transform: translateY(1.5%) scale(1.01, 0.975); filter: saturate(0.7) brightness(0.97); }
.agent[data-illu][data-humeur="concentre"] img.ag-img { transform: translateY(0.6%) scale(1, 0.992); }

/* --- Poses durables --- */
.agent[data-illu][data-pose="respirer"] .ag-anim { animation: ag-i-balance 3.6s ease-in-out infinite; }
.agent[data-illu][data-pose="pencher"] .ag-pose { transform: rotate(5deg) translateX(3%); }
.agent[data-illu][data-pose="pencher"] .ag-anim { animation: ag-i-balance-doux 4.2s ease-in-out infinite; }
.agent[data-illu][data-pose="observer"] .ag-pose { transform: rotate(7deg) translateX(4%) scale(1.02); }
.agent[data-illu][data-pose="observer"] .ag-anim { animation: ag-i-scrute 2.8s ease-in-out infinite; }
.agent[data-illu][data-pose="pointer"] .ag-pose { transform: rotate(3deg) translateX(2%); }
.agent[data-illu][data-pose="pointer"] .ag-anim { animation: ag-i-pointe 1.1s ease-in-out infinite; }
.agent[data-illu][data-pose="reflechir"] .ag-pose { transform: rotate(-3deg); }
.agent[data-illu][data-pose="reflechir"] .ag-anim { animation: ag-i-balance-doux 4.6s ease-in-out infinite; }

/* --- Gestes d'un coup (durées = js/agents.js UNE_FOIS) --- */
.agent[data-illu][data-pose="sursauter"] .ag-anim { animation: ag-i-sursaut 0.75s cubic-bezier(.2, .9, .3, 1) both; }
.agent[data-illu][data-pose="sursauter"] .ag-sol { animation: ag-i-ombre 0.75s cubic-bezier(.2, .9, .3, 1) both; }
.agent[data-illu][data-pose="applaudir"] .ag-anim { animation: ag-i-applaudit 0.68s ease-in-out 2.5; }
.agent[data-illu][data-pose="applaudir"] .ag-sol { animation: ag-i-ombre-petit 0.34s ease-in-out 5; }
.agent[data-illu][data-pose="joie"] .ag-anim { animation: ag-i-joie 0.53s ease-in-out 3; }
.agent[data-illu][data-pose="joie"] .ag-sol { animation: ag-i-ombre 0.53s ease-in-out 3; }
.agent[data-illu][data-pose="oui"] .ag-anim { animation: ag-i-oui 0.3s ease-in-out 3; }
.agent[data-illu][data-pose="non"] .ag-anim { animation: ag-i-non 0.3s ease-in-out 3; }

@keyframes ag-i-balance {
  0%, 100% { transform: rotate(calc(-1.4deg * var(--ag-amp))); }
  50% { transform: rotate(calc(1.4deg * var(--ag-amp))) scale(1.006, 1.012); }
}
@keyframes ag-i-balance-doux {
  0%, 100% { transform: rotate(calc(-0.8deg * var(--ag-amp))); }
  50% { transform: rotate(calc(0.8deg * var(--ag-amp))) scale(1.004, 1.01); }
}
@keyframes ag-i-scrute {
  0%, 100% { transform: none; }
  30% { transform: rotate(calc(2deg * var(--ag-amp))) translateY(calc(0.8% * var(--ag-amp))); }
  60% { transform: rotate(calc(-0.8deg * var(--ag-amp))); }
}
@keyframes ag-i-pointe {
  0%, 100% { transform: none; }
  45% { transform: translateX(calc(2.8% * var(--ag-amp))) rotate(calc(1.2deg * var(--ag-amp))); }
}
@keyframes ag-i-sursaut {
  0% { transform: none; }
  16% { transform: translateY(calc(2% * var(--ag-amp))) scale(1.05, 0.93); }
  42% { transform: translateY(calc(-14% * var(--ag-amp))) scale(0.95, 1.07); }
  70% { transform: translateY(0) scale(1.05, 0.95); }
  86% { transform: scale(0.98, 1.02); }
  100% { transform: none; }
}
@keyframes ag-i-applaudit {
  0%, 50%, 100% { transform: none; }
  25% { transform: translateY(calc(-4.5% * var(--ag-amp))) rotate(calc(-2.5deg * var(--ag-amp))); }
  75% { transform: translateY(calc(-4.5% * var(--ag-amp))) rotate(calc(2.5deg * var(--ag-amp))); }
}
@keyframes ag-i-joie {
  0%, 100% { transform: none; }
  14% { transform: translateY(calc(1.5% * var(--ag-amp))) scale(1.05, 0.94); }
  45% { transform: translateY(calc(-13% * var(--ag-amp))) scale(0.96, 1.05); }
  78% { transform: translateY(0) scale(1.04, 0.96); }
}
@keyframes ag-i-oui {
  0%, 100% { transform: none; }
  50% { transform: translateY(calc(2.2% * var(--ag-amp))) scale(1.01, 0.97) rotate(calc(1.5deg * var(--ag-amp))); }
}
@keyframes ag-i-non {
  0%, 100% { transform: none; }
  25% { transform: rotate(calc(-3.5deg * var(--ag-amp))) translateX(calc(-1% * var(--ag-amp))); }
  75% { transform: rotate(calc(3.5deg * var(--ag-amp))) translateX(calc(1% * var(--ag-amp))); }
}
@keyframes ag-i-ombre {
  0%, 100% { transform: none; opacity: 1; }
  42%, 45% { transform: scale(0.68); opacity: 0.55; }
}
@keyframes ag-i-ombre-petit {
  0%, 100% { transform: none; }
  50% { transform: scale(0.88); }
}

/* --- Bulle de réflexion (pose « reflechir ») : 3 ronds près de la tête --- */
.agent[data-illu] .ag-pensee { position: absolute; inset: 0; }
.agent[data-illu] .ag-pensee i {
  position: absolute; aspect-ratio: 1; border-radius: 50%; box-sizing: border-box;
  background: var(--blanc, #fff); border: max(1.5px, 0.1rem) solid var(--encre, #24324a);
  opacity: 0; transform: scale(0.3); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.3, 1.6, .5, 1);
}
.agent[data-illu] .ag-pensee i:nth-child(1) { left: 66%; top: 21%; width: max(0.4rem, 5.5%); }
.agent[data-illu] .ag-pensee i:nth-child(2) { left: 72%; top: 12%; width: max(0.55rem, 8.5%); transition-delay: 0.08s; }
.agent[data-illu] .ag-pensee i:nth-child(3) { left: 80%; top: 1.5%; width: max(0.75rem, 13%); transition-delay: 0.16s; }
.agent[data-illu][data-pose="reflechir"] .ag-pensee i { opacity: 1; transform: none; animation: ag-i-pensee 2.4s ease-in-out infinite; }
.agent[data-illu][data-pose="reflechir"] .ag-pensee i:nth-child(2) { animation-delay: 0.3s; }
.agent[data-illu][data-pose="reflechir"] .ag-pensee i:nth-child(3) { animation-delay: 0.6s; }
@keyframes ag-i-pensee { 0%, 100% { transform: none; } 40% { transform: translateY(-18%) scale(1.12); } }

/* --- Flèche du geste « pointer » (devant l'agent, du côté du regard) --- */
.agent[data-illu] .ag-fleche {
  position: absolute; left: 77%; top: 39%; width: 20%; aspect-ratio: 1;
  opacity: 0; transform: translateX(-20%) scale(0.5); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.3, 1.6, .5, 1);
}
.agent[data-illu] .ag-fleche::before, .agent[data-illu] .ag-fleche::after { content: ''; position: absolute; inset: 0; }
.agent[data-illu] .ag-fleche::before { background: var(--encre, #24324a); clip-path: polygon(0% 31%, 45% 31%, 45% 0%, 100% 50%, 45% 100%, 45% 69%, 0% 69%); }
.agent[data-illu] .ag-fleche::after { background: var(--ag-accent, var(--orange, #ff8a1f)); clip-path: polygon(8% 39%, 52% 39%, 52% 17%, 89% 50%, 52% 83%, 52% 61%, 8% 61%); }
.agent[data-illu][data-pose="pointer"] .ag-fleche { opacity: 1; transform: none; animation: ag-i-fleche 1.1s ease-in-out infinite; }
@keyframes ag-i-fleche { 0%, 100% { transform: none; } 45% { transform: translateX(22%); } }

/* La bulle de texte de l'agent passe devant : on range la réflexion pendant qu'elle parle. */
.agent[data-illu]:has(> .agent-bulle:not([hidden])) .ag-pensee i { opacity: 0; }

/* Petits formats et portrait : pas de décor autour */
.agent[data-illu][data-tete] .ag-pensee, .agent[data-illu][data-tete] .ag-fleche, .agent[data-illu][data-taille="xs"] .ag-pensee, .agent[data-illu][data-taille="xs"] .ag-fleche { display: none; }

/* --- Agent mystère (créateur, avant le choix) : silhouette --- */
.agent-mystere[data-illu] img.ag-img, .agent-mystere[data-illu] .ag-svg { filter: brightness(0); opacity: 0.2; }
.agent-mystere[data-illu] .ag-pensee, .agent-mystere[data-illu] .ag-fleche { display: none; }

/* --- Mouvement réduit : pas de balancement ni de saut (les poses restent lisibles) --- */
@media (prefers-reduced-motion: reduce) {
  .agent[data-illu] .ag-anim, .agent[data-illu] .ag-sol, .agent[data-illu] .ag-pensee i, .agent[data-illu] .ag-fleche { animation: none !important; }
}

/* Portrait animé (ctx.agent avec tete: true) : l'humeur triste se voit aussi */
.agent[data-illu][data-tete][data-humeur="triste"] .ag-svg { filter: saturate(0.7) brightness(0.97); }

/* Carte d'agent (fenêtre du menu) : sur un écran bas (Windows 125 %, téléphone couché), l'agent rapetisse pour que la carte tienne. */
.carte-agent-perso .agent[data-illu][data-taille="l"] { --agent-l: min(clamp(9rem, 32vw, 15rem), 30dvh); }

/* Dessin de repli hors d'un .agent (portrait de la barre, d'une carte) : une seule bouche, le sourire.
   Spécificité nulle : dans un .agent, les humeurs de base.css décident. */
:where(.ag-svg .ag-bouche > :not(.ag-b-content)) { display: none; }