/**
 * AZALPLUS — Aide au moment ou ca bloque : mise en evidence du champ
 * =================================================================
 *
 * Marceau dit quel champ manque ; cette feuille le MONTRE. Nommer une case
 * ne suffit pas quand le formulaire en compte quarante : il faut que l'oeil
 * la trouve sans la chercher.
 *
 * Aucune couleur en dur (AZA-CSS-001) : tout vient des variables centrales,
 * donc la surbrillance suit les 8 themes et le mode sombre sans une ligne
 * de plus.
 */

.azal-aide-cible {
  /* L'anneau se pose PAR-DESSUS la bordure du champ sans la remplacer :
     un formulaire qui signale deja une erreur en rouge garde son signal. */
  outline: 2px solid var(--azalplus-warning, #f59e0b) !important;
  outline-offset: 2px;
  border-radius: var(--azalplus-radius, 8px);
  background-color: var(--azalplus-warning-light, #fef3c7);
  /* Trois battements, puis le calme. Une pulsation sans fin se transforme
     vite en clignotant qu'on ne voit plus — ou qu'on ne supporte plus. */
  animation: azal-aide-battement 1.1s ease-out 3;
}

@keyframes azal-aide-battement {
  0%   { box-shadow: 0 0 0 0 var(--azalplus-warning, #f59e0b); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Respect du reglage systeme : certaines personnes sont genees par le
   mouvement. L'anneau reste, le battement disparait. */
@media (prefers-reduced-motion: reduce) {
  .azal-aide-cible { animation: none; }
}

/**
 * « Je suis là si vous avez besoin de moi »
 * ----------------------------------------
 * Une annonce, pas une interruption. Elle se pose a cote du bouton Marceau,
 * ne recouvre rien, n'attend pas de reponse, et s'efface seule.
 *
 * Volontairement DISCRETE : a ce moment-la, on ne sait PAS ce qui bloque —
 * peut-etre rien du tout. Ouvrir le panneau et se mettre a parler serait
 * s'imposer a quelqu'un qui est simplement en train de reflechir.
 */
.azal-aide-presence {
  position: fixed;
  /* Position calculee a l'execution, au-dessus de la pile de boutons
     flottants : le coin bas-droit en compte DEJA trois (Marceau, hotline,
     micro vocal) et se poser « a cote » revient a en recouvrir un — constate
     a l'ecran, invisible dans le code. Les valeurs ci-dessous ne servent que
     si le bouton Marceau est absent. */
  right: var(--azal-aide-droite, 24px);
  bottom: var(--azal-aide-bas, 96px);
  z-index: 9998;
  max-width: 250px;
  padding: 10px 14px;
  border-radius: var(--azalplus-radius, 8px);
  background: var(--azalplus-gray-700, #374151);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: var(--azalplus-shadow-md, 0 4px 6px -1px rgba(0,0,0,.1));
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

.azal-aide-presence.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Sur un telephone, le bouton occupe deja le coin : on se pose au-dessus. */
@media (max-width: 640px) {
  .azal-aide-presence {
    right: var(--azal-aide-droite, 16px);
    max-width: calc(100vw - 32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .azal-aide-presence { transition: none; }
}


/* ---------------------------------------------------------------------------
   Bulle autonome — pages publiques (inscription), sans widget Marceau.
   Positionnee seule, puisqu'il n'y a pas de bouton auquel s'accrocher.
   Couleurs prises aux variables du theme : aucune valeur en dur (AZA-CSS-001).
--------------------------------------------------------------------------- */
.azal-aide-autonome {
  position: fixed;
  right: var(--space-4, 1rem);
  bottom: var(--space-4, 1rem);
  left: auto;
  top: auto;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: var(--space-4, 1rem);
  padding-right: var(--space-6, 1.5rem);
  background: var(--azalplus-surface, #fff);
  color: var(--azalplus-text, #1a1a1a);
  border: 1px solid var(--azalplus-border, #e0e0e0);
  border-radius: var(--radius-md, 0.5rem);
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.12));
  z-index: 9999;
  font-size: var(--font-size-sm, 0.9rem);
  line-height: 1.5;
}

.azal-aide-autonome strong {
  display: block;
  margin-bottom: var(--space-1, 0.25rem);
  color: var(--azalplus-primary, #3454d1);
}

.azal-aide-autonome .azal-aide-fermer {
  position: absolute;
  top: var(--space-2, 0.5rem);
  right: var(--space-2, 0.5rem);
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--font-size-lg, 1.1rem);
  line-height: 1;
  color: var(--azalplus-text-muted, #6b7280);
}

/* Une aide qui surgit ne doit pas surprendre : elle arrive en douceur, et
   reste immobile pour qui a demande a reduire les animations. */
@media (prefers-reduced-motion: no-preference) {
  .azal-aide-autonome { animation: azal-aide-apparition 0.25s ease-out; }
  @keyframes azal-aide-apparition {
    from { opacity: 0; transform: translateY(0.5rem); }
    to   { opacity: 1; transform: translateY(0); }
  }
}