/* ============================================================
   Personnages-guides AnimToon — prototype home
   Comportement : inerte → survol/focus = bulle texte (silencieux)
   → clic = la réplique est lue à voix haute (voix neuronales MS).
   Anti-tonitruant : aucun son sans clic explicite.
   ============================================================ */

.perso-guide{
  position:absolute;
  bottom:0;
  z-index:6;
  width:118px;
  pointer-events:none;           /* seul le bouton capte la souris */
  --pg-accent:#ff6a45;           /* décoratif uniquement (fond/illustration) */
  --pg-accent-text:#c2421f;      /* usages TEXTE : ~5,4:1 sur blanc, conforme AA */
}
.perso-guide--left{ left:clamp(8px, 2vw, 40px); }
.perso-guide--right{ right:clamp(8px, 2vw, 40px); }

/* Olivier dans le hero : un peu plus petit, se tient dans la bande basse */
.perso-guide--hero{ width:104px; bottom:18px; }
.perso-guide--hero .perso-guide__btn{ width:104px; }
.perso-guide--hero .perso-guide__art{ width:104px; height:156px; }
.perso-guide--hero .perso-guide__bubble{ bottom:164px; }

/* Bouton = zone cliquable du personnage */
.perso-guide__btn{
  pointer-events:auto;
  display:block;
  width:118px;
  padding:0;
  margin:0;
  border:0;
  background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.perso-guide__btn:focus{ outline:none; }
.perso-guide__btn:focus-visible .perso-guide__art{
  outline:3px solid var(--pg-accent);
  outline-offset:6px;
  border-radius:14px;
}

/* Pile des poses (neutre / presente / parle) superposées */
.perso-guide__art{
  position:relative;
  display:block;
  width:118px;
  height:177px;                  /* ratio 200x300 */
  transform:translateY(0);
  transform-origin:bottom center;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 10px 16px rgba(11,17,33,.22));
}
.perso-guide__layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:bottom center;
  opacity:0;
  transition:opacity .18s ease;
}
.perso-guide__layer.is-neutre{ opacity:1; }

/* État actif : survol OU focus clavier — le personnage se met à RESPIRER,
   sans changer de pose (il reste en position neutre). Aucun bras tendu. */
.perso-guide.is-active .perso-guide__art{
  transform:translateY(0) scale(1.04);
  animation:pg-breathe 2.6s ease-in-out infinite;
}

/* En lecture (clic) : bascule vers la pose détendue « parle » (bras plié,
   main ouverte), tenue figée, + la voix démarre. La respiration continue. */
.perso-guide.is-talking .perso-guide__layer.is-neutre{ opacity:0; }
.perso-guide.is-talking .perso-guide__layer.is-parle{ opacity:1; }
@keyframes pg-breathe{
  0%,100%{ transform:translateY(0) scale(1.04); }
  50%    { transform:translateY(-2px) scale(1.055); }
}

/* Bulle de dialogue */
.perso-guide__bubble{
  position:absolute;
  bottom:186px;
  width:250px;
  max-width:44vw;
  padding:14px 16px;
  background:#fff;
  color:#1a1f2b;
  border:1px solid rgba(11,17,33,.10);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(11,17,33,.22);
  font-size:.92rem;
  line-height:1.5;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px) scale(.96);
  transform-origin:bottom left;
  transition:opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1), visibility 0s .22s;
  pointer-events:none;
}
.perso-guide--left  .perso-guide__bubble{ left:8px; transform-origin:bottom left; }
.perso-guide--right .perso-guide__bubble{ right:8px; transform-origin:bottom right; }

.perso-guide.is-active .perso-guide__bubble{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1), visibility 0s 0s;
}

/* Petite flèche de la bulle */
.perso-guide__bubble::after{
  content:"";
  position:absolute;
  bottom:-8px;
  width:16px;height:16px;
  background:#fff;
  border-right:1px solid rgba(11,17,33,.10);
  border-bottom:1px solid rgba(11,17,33,.10);
  transform:rotate(45deg);
}
.perso-guide--left  .perso-guide__bubble::after{ left:34px; }
.perso-guide--right .perso-guide__bubble::after{ right:34px; }

.perso-guide__bubble b{
  display:block;
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--pg-accent-text);
  margin-bottom:4px;
}
.perso-guide__hint{
  display:block;
  margin-top:8px;
  font-size:.76rem;
  color:#6b7280;
  transition:color .2s;
}
.perso-guide.is-talking .perso-guide__hint{ color:var(--pg-accent-text); font-weight:600; }

/* Réduction des animations */
@media (prefers-reduced-motion:reduce){
  .perso-guide__art{ transition:none; }
  .perso-guide.is-active .perso-guide__art{ animation:none; }
  .perso-guide__layer{ transition:opacity .01s; }
  .perso-guide.is-active .perso-guide__art{ transform:translateY(0); }
  .perso-guide__bubble{ transition:opacity .01s; }
}

/* ===== Version mobile compacte (< 900px) =====
   Pas de survol possible : le personnage devient une petite pastille
   tactile « 🔊 Écouter » posée en fin de section (dans le flux, donc
   jamais de chevauchement). Au toucher : une feuille basse s'ouvre avec
   le texte, et la voix se lit. Toucher la feuille la referme. */
@media (max-width:900px){
  .perso-guide,
  .perso-guide--hero{
    position:static;
    display:block;
    width:auto;
    left:auto; right:auto; bottom:auto;
    margin:6px 20px 10px;
    z-index:auto;
    pointer-events:auto;
  }

  /* la pastille : mini-personnage + libellé */
  .perso-guide__btn,
  .perso-guide--hero .perso-guide__btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:auto;
    min-height:44px;
    padding:5px 16px 5px 8px;
    background:#fff;
    border:1px solid rgba(11,17,33,.12);
    border-radius:999px;
    box-shadow:0 6px 16px rgba(11,17,33,.14);
  }
  .perso-guide__btn::after{
    content:"🔊 Écouter";
    font-family:"Space Grotesk", system-ui, sans-serif;
    font-size:.92rem;
    font-weight:600;
    color:var(--pg-accent-text);
    white-space:nowrap;
  }
  .perso-guide__btn:focus-visible{ outline:3px solid var(--pg-accent-text); outline-offset:2px; }
  .perso-guide__btn:focus-visible .perso-guide__art{ outline:none; }

  .perso-guide__art,
  .perso-guide--hero .perso-guide__art{
    width:40px; height:60px;
    flex:none;
    transform:none !important;
    animation:none !important;
    filter:drop-shadow(0 3px 5px rgba(11,17,33,.18));
  }
  /* dans la pastille, on garde la pose neutre (pas de bascule ni respiration) */
  .perso-guide.is-active .perso-guide__layer.is-neutre,
  .perso-guide.is-talking .perso-guide__layer.is-neutre{ opacity:1; }
  .perso-guide.is-active .perso-guide__layer.is-parle,
  .perso-guide.is-talking .perso-guide__layer.is-parle{ opacity:0; }

  /* bulle = feuille basse fixe, lisible plein écran */
  .perso-guide__bubble,
  .perso-guide--left .perso-guide__bubble,
  .perso-guide--right .perso-guide__bubble,
  .perso-guide--hero .perso-guide__bubble{
    position:fixed;
    left:12px; right:12px; bottom:12px;
    width:auto; max-width:none;
    padding:18px;
    transform:translateY(140%);
    transform-origin:center bottom;
    z-index:2000;
    pointer-events:auto;
    box-shadow:0 -8px 40px rgba(11,17,33,.30);
    transition:opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility 0s .3s;
  }
  .perso-guide.is-active .perso-guide__bubble{
    transform:translateY(0);
    transition:opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility 0s 0s;
  }
  .perso-guide__bubble b{ font-size:.92rem; }
  /* on remplace la flèche par une consigne de fermeture */
  .perso-guide__hint{ display:none; }
  .perso-guide__bubble::after{
    content:"Touchez pour fermer";
    position:static;
    display:block;
    width:auto; height:auto;
    margin-top:14px;
    background:none; border:0; transform:none;
    font-size:.78rem; color:#8b93a3; font-weight:600;
    left:auto; right:auto; bottom:auto;
  }
}