/* =====================================================================
   COMPAGNON ANIMÉ "AMI" — styles (v6.15)
   Pas de dépendance externe : SVG + CSS pur, cohérent avec la palette
   existante (variables --accent / --accent-soft / --warm de style.css).
   v6.15 : les animations des jambes/yeux/éclat sont maintenant en SVG
   natif (animateTransform/animate, générées dans js/companion.js), pas
   en CSS — voir le commentaire dans companion.js pour le détail. Ce
   fichier ne gère plus que le flottement du corps entier (translateY
   pur, fiable en CSS classique) et l'entrée en scène.
===================================================================== */

.companion-widget{
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0;
}

/* Conteneur qui joue l'animation d'entrée (glisse + apparaît). */
.companion-enter{
  display:inline-flex;
  animation: companion-slide-in .5s ease-out;
}

.companion-svg{
  flex-shrink:0;
  overflow:visible;
}

/* v6.15 : la classe "companion-animated" n'est ajoutée par le JS que si
   ni "réduire les animations" (système) ni le mode lecture facilitée ne
   sont actifs — donc pas besoin de dupliquer cette logique ici en CSS. */
.companion-svg.companion-animated{
  animation: companion-bob 2.4s ease-in-out infinite;
}
.companion-svg.companion-animated.mood-delighted{
  animation: companion-bob-big 1.1s ease-in-out infinite;
}

.companion-textwrap{
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:1;
}

.companion-name{
  font-family:'Source Sans 3',sans-serif;
  font-size:.8rem;
  font-weight:600;
  color:var(--accent-dark);
  
  
}

/* v6.9.1 : couleurs définies ici en CSS (et non en attribut fill="var(...)"
   dans le SVG) — c'est la correction du bug "Ami invisible" : les
   attributs de présentation SVG ne résolvent pas var() de façon fiable
   sur tous les navigateurs, en particulier Safari/iOS. */
.companion-body{ fill:var(--accent); }
.companion-belly{ fill:var(--accent-soft); opacity:.55; }
.companion-eye{ fill:#1d2521; }
.companion-mouth{ fill:none; stroke:#1d2521; stroke-width:3; stroke-linecap:round; }
.companion-spark{ fill:var(--warm); }
.companion-leg{ fill:var(--accent-dark); }

/* v6.12 : la bulle ressemblait trop à un champ de saisie (même fond
   blanc, même bordure fine, mêmes coins arrondis que .field input dans
   style.css) — un patient a essayé d'y écrire. Corrigé : fond teinté
   distinct, pas de bordure grise, petite pointe qui désigne Ami comme
   une vraie bulle de bande dessinée, et texte non sélectionnable pour
   ne plus ressembler à un champ éditable. */
.companion-bubble{
  position:relative;
  background:var(--accent-soft);
  border:none;
  border-radius:14px;
  padding:10px 14px;
  font-size:.95rem;
  font-family:'Source Sans 3',sans-serif;
  font-style:italic;
  font-weight:400;
  color:var(--ink);
  box-shadow:none;
  min-height:1.3em;
  flex:1;
  cursor:default;
  
  
  user-select:none;
}
.companion-bubble::before{
  content:'';
  position:absolute;
  left:-7px;
  top:16px;
  width:14px;
  height:14px;
  background:var(--accent-soft);
  clip-path:polygon(100% 0, 100% 100%, 0 50%);
}

@keyframes companion-slide-in{
  from{ transform:translateX(-22px); opacity:0; }
  to  { transform:translateX(0);     opacity:1; }
}

/* v6.34 : entrée "Ami arrive sur l'exercice pour expliquer" — glissement
   plus long et plus lent que l'entrée par défaut (companion-slide-in),
   pour donner l'impression qu'il vient de plus loin exprès pour être
   là. Utilisée uniquement via svg(mood,{arriving:true}) — voir
   companion.js. */
.companion-enter-explain{
  display:inline-flex;
  animation: companion-slide-in-explain .85s cubic-bezier(.22,.8,.28,1);
}
@keyframes companion-slide-in-explain{
  from{ transform:translateX(-64px); opacity:0; }
  to  { transform:translateX(0);      opacity:1; }
}

/* v6.34 : la bulle de texte n'apparaît qu'une fois qu'Ami a fini
   d'arriver — évite d'afficher l'explication avant même qu'il soit en
   place. Le délai (.6s) correspond à peu près à la durée de
   companion-slide-in-explain ci-dessus. */
.companion-bubble-delayed{
  opacity:0;
  animation: companion-bubble-fade .35s ease-out forwards;
  animation-delay:.6s;
}
@keyframes companion-bubble-fade{
  from{ opacity:0; }
  to  { opacity:1; }
}

@keyframes companion-bob{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

@keyframes companion-bob-big{
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-9px) rotate(2deg); }
}

/* Respecte les préférences d'accessibilité pour l'entrée en scène (HTML,
   pas SVG) — le reste (jambes/yeux/éclat) est déjà géré côté JS. */
@media (prefers-reduced-motion: reduce){
  .companion-enter, .companion-svg, .companion-enter-explain, .companion-bubble-delayed{ animation:none; opacity:1; }
}
body.dys .companion-enter, body.dys .companion-svg, body.dys .companion-enter-explain, body.dys .companion-bubble-delayed{
  animation:none; opacity:1; /* mode lecture facilitée : on limite les distractions visuelles */
}