/* Avatars et assistant de la plateforme (lot AV).
   Couleurs fixées par composant : le texte garde au moins 4,5:1 de contraste dans le thème clair comme dans le thème sombre.
   Le niveau de connexion (classe sur <html>) coupe les animations, les effets 3D et, au rouge et au gris, le robot. */

/* --- Robot (dessin SVG) --- */
.avatar-robot {
  position: relative;
  display: inline-block;
  width: var(--avatar-taille, 64px);
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.25rem;
  background: #e8f0f7;
  border-radius: 16px;
  vertical-align: middle;
}

.avatar-robot > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.avatar-robot .robot-pupille {
  transform: translate(var(--regard-x, 0px), var(--regard-y, 0px));
}

.avatar-robot .robot-voyant {
  animation: avatar-voyant 2.4s ease-in-out infinite;
}

.avatar-robot .robot-oeil-g {
  transform-box: fill-box;
  transform-origin: center;
  animation: avatar-clignement 6s ease-in-out infinite;
}

/* Le bras salue trois fois, puis s'arrête. */
.avatar-robot .robot-bras-droit {
  transform-box: view-box;
  transform-origin: 84px 88px;
  animation: avatar-salut 1.6s ease-in-out 0.8s 3;
}

.avatar-badge {
  position: absolute;
  right: -0.5rem;
  bottom: -0.5rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: #1d3557;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* --- Médaillon personnel (initiales ou photo) --- */
.avatar-personne {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-taille, 64px);
  height: var(--avatar-taille, 64px);
  box-sizing: border-box;
  border: 2px solid #ffffff;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  vertical-align: middle;
}

.avatar-personne .avatar-initiales {
  color: #ffffff;
  font-size: calc(var(--avatar-taille, 64px) * 0.36);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.avatar-personne .avatar-photo {
  width: 100%;
  height: 100%;
}

.avatar-photo {
  display: block;
  width: var(--avatar-taille, 96px);
  height: var(--avatar-taille, 96px);
  border-radius: 50%;
  object-fit: cover;
}

/* Inclinaison 3D au survol : niveau vert seulement, et seulement avec une souris. */
.avatar-3d {
  transition: transform 0.25s ease;
  transform-style: preserve-3d;
}

@media (hover: hover) {
  html.niveau-vert .avatar-3d:hover {
    transform: perspective(360px) rotateX(8deg) rotateY(-10deg);
  }
}

html.niveau-jaune .avatar-3d,
html.niveau-rouge .avatar-3d,
html.niveau-gris .avatar-3d {
  transition: none;
}

/* --- Assistant : bouton flottant et panneau ---
   Remarque du 01/11/2026 : ouvert, le panneau passe devant l'en-tête figé (z-index 60) au lieu de glisser dessous,
   et ne dépasse jamais la hauteur de l'écran (il défile alors à l'intérieur). Le volet du profil (70 et 80) reste
   au-dessus. */
.assistant-robot {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
}

.assistant-robot:has(.assistant-panneau:not([hidden])) {
  z-index: 65;
}

.assistant-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  padding: 0.2rem;
  border: 2px solid #1d3557;
  border-radius: 50%;
  background: #e8f0f7;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.assistant-bouton:hover {
  background: #ffffff;
}

.assistant-panneau {
  position: absolute;
  right: 0;
  bottom: 5.25rem;
  width: min(20rem, calc(100vw - 2rem));
  max-height: calc(100vh - 7rem);
  max-height: calc(100dvh - 7rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 1rem 1.1rem;
  border: 1px solid #5b6b7c;
  border-radius: 12px;
  background: #ffffff;
  color: #1d2733;
  font-size: 1rem;
  line-height: 1.6;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.assistant-panneau[hidden] {
  display: none;
}

.assistant-panneau a {
  color: #1d3557;
  font-weight: 700;
}

.assistant-panneau h2 {
  margin: 0;
  font-size: 1.1rem;
}

.assistant-panneau p {
  margin: 0.5rem 0;
}

.assistant-entete {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.assistant-fermer {
  padding: 0.4rem 0.9rem;
  border: 1px solid #5b6b7c;
  border-radius: 8px;
  background: #ffffff;
  color: #1d2733;
  font: inherit;
  cursor: pointer;
}

:root[data-theme="sombre"] .assistant-panneau {
  background: #1f2a38;
  color: #e6edf3;
  border-color: #7d8fa3;
}

:root[data-theme="sombre"] .assistant-panneau a {
  color: #9cc3ff;
}

:root[data-theme="sombre"] .assistant-fermer {
  background: #1f2a38;
  color: #e6edf3;
  border-color: #7d8fa3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .assistant-panneau {
    background: #1f2a38;
    color: #e6edf3;
    border-color: #7d8fa3;
  }

  :root:not([data-theme="clair"]) .assistant-panneau a {
    color: #9cc3ff;
  }

  :root:not([data-theme="clair"]) .assistant-fermer {
    background: #1f2a38;
    color: #e6edf3;
    border-color: #7d8fa3;
  }
}

/* Contour de focus (constat B4) : #c06a00 atteint 3,66:1 sur le fond clair #f5f6f8, 3,96:1 sur la carte #ffffff,
   3,45:1 sur le survol clair #eaf0f7, 4,41:1 sur le fond sombre #151a22, 3,67:1 sur le panneau sombre #1f2a38 et
   3,54:1 sur le survol sombre #242c3a. L'ancien jaune vif n'atteignait que 1,75:1 sur blanc. */
.assistant-bouton:focus-visible,
.assistant-fermer:focus-visible,
.assistant-panneau a:focus-visible {
  outline: 3px solid #c06a00;
  outline-offset: 3px;
}

/* --- Masquer l'assistant (constat B4) ---
   Le bouton « Masquer l'assistant » n'apparaît que si le script assistant_masquer.js est chargé (classe ajoutée sur
   <html>). Le bouton « Afficher l'assistant » n'apparaît que lorsque l'assistant est masqué. */
.assistant-masquer {
  display: none;
}

html.assistant-masquage-actif .assistant-masquer {
  display: inline-block;
}

.assistant-reafficher {
  display: none;
}

.assistant-robot.assistant-masque .assistant-bouton,
.assistant-robot.assistant-masque .assistant-panneau {
  display: none;
}

.assistant-robot.assistant-masque .assistant-reafficher {
  display: inline-block;
}

/* Écran de 600 px ou moins : bouton plus petit (3 rem), décalé vers le haut pour ne pas couvrir le bas des formulaires. */
@media (max-width: 600px) {
  .assistant-robot {
    bottom: 4.5rem;
  }

  .assistant-bouton {
    width: 3rem;
    height: 3rem;
  }

  .assistant-bouton .avatar-robot {
    width: 2.25rem;
  }

  .assistant-panneau {
    bottom: 4rem;
    max-height: calc(100vh - 9rem);
    max-height: calc(100dvh - 9rem);
  }
}

/* --- Niveaux de connexion --- */
html.niveau-jaune .avatar-robot *,
html.niveau-jaune .assistant-robot * {
  animation: none !important;
}

html.niveau-rouge .avatar-robot,
html.niveau-gris .avatar-robot,
html.niveau-rouge .assistant-robot,
html.niveau-gris .assistant-robot {
  display: none !important;
}

/* --- Mouvement réduit --- */
@media (prefers-reduced-motion: reduce) {
  .avatar-robot *,
  .avatar-3d,
  .assistant-bouton,
  .assistant-panneau {
    animation: none !important;
    transition: none !important;
  }

  .avatar-robot .robot-pupille {
    transform: none !important;
  }

  html.niveau-vert .avatar-3d:hover {
    transform: none !important;
  }
}

/* --- Divers --- */
.avatar-masque {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.avatar-page .avatar-apercu {
  margin: 0.5rem 0;
}

.avatar-page form {
  margin: 0.5rem 0 0;
}

@media print {
  .assistant-robot {
    display: none !important;
  }
}

@keyframes avatar-clignement {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

@keyframes avatar-voyant {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes avatar-salut {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-12deg); }
  50% { transform: rotate(4deg); }
  75% { transform: rotate(-12deg); }
}