/* =========================================================================
   WISY SAFETY — Assistant Wisy · LAUNCHER (bouton flottant + bulle)
   -------------------------------------------------------------------------
   Feuille CHARGÉE SUR TOUTES LES PAGES : volontairement courte. Le panneau
   conversationnel vit dans css/assistant-panel.css, chargé à la demande
   (au 1er survol / focus / toucher / clic, ou en tâche de fond) par
   js/assistant/launcher.js.

   Composition :   [ bulle d'invitation ]  ( mascotte )
     • mascotte  : tête détourée (assets/images/assistant/) dans un disque
                   crème, filet granit, anneau épinette discret ;
     • indicateur de disponibilité : turquoise, UNIQUE accent du composant ;
     • pastille « IA » : épinette (jamais un 2e accent turquoise).

   Palette (rôles stricts)
     Épinette #1F6F64 primaire · Sarcelle #2F7D8C secondaire · Turquoise #48D6C2
     accent CTA/disponibilité seulement (≪ 10 % de la surface) · Brume #3FA69B
     survol · Crème #F4FAF9 surfaces · Granit #5E6D6A texte secondaire/bordures ·
     Jais #1B2D28 texte principal. Texte posé sur turquoise = jais.

   Échelle z-index du site (voir aussi css/registration.css) :
     60 recherche · 1000 en-tête · 1100 voile du menu · 1150 assistant [--wa-z] ·
     1160 barre d'inscription mobile · 1200 menu mobile · 2000 liens d'évitement.

   Réglages rapides (variables, surchargeables par n'importe quelle page) :
     --wa-size    diamètre du launcher (72px desktop, 58px mobile)
     --wa-offset  distance aux bords du viewport (24–32px, 16px mobile)
     --wa-lift    décalage vertical supplémentaire (ex. barre collante, bandeau
                  cookies futur) : `body.x #wisy-assistant { --wa-lift: 80px }`
   ========================================================================= */

#wisy-assistant {
  /* Tokens locaux (fallback si la page ne définit pas la variable). */
  --wa-epinette: var(--epinette, #1F6F64);
  --wa-sarcelle: var(--sarcelle, #2F7D8C);
  --wa-turquoise: var(--turquoise, #48D6C2);
  --wa-brume: var(--brume, #3FA69B);
  --wa-creme: var(--creme, #F4FAF9);
  --wa-granit: var(--granit, #5E6D6A);
  --wa-jais: var(--noir-jais, #1B2D28);
  --wa-surface: #ffffff;
  --wa-line: rgba(94, 109, 106, 0.16);
  --wa-line-soft: rgba(94, 109, 106, 0.10);
  --wa-border: rgba(94, 109, 106, 0.32);            /* filet du launcher (granit) */

  --wa-font-title: var(--font-titre, "Poppins", system-ui, sans-serif);
  --wa-font-text: var(--font-texte, "Inter", system-ui, sans-serif);

  --wa-radius: 16px;
  --wa-radius-lg: 22px;
  --wa-radius-pill: 999px;

  --wa-shadow-panel: 0 26px 70px rgba(27, 45, 40, 0.26), 0 6px 18px rgba(27, 45, 40, 0.12);
  --wa-shadow-card: 0 6px 18px rgba(27, 45, 40, 0.10);

  --wa-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wa-ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --wa-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Launcher */
  --wa-size: 72px;
  --wa-offset: clamp(24px, 1.8vw, 32px);
  --wa-lift: 0px;
  --wa-z: 1150;

  /* Anneaux : 3px de crème (respiration) puis filet épinette (75 % : 3,3:1 sur blanc, seuil AA des
     composants d'interface) ; plein au survol et quand l'assistant est ouvert */
  --wa-ring-gap: 0 0 0 3px var(--wa-creme);
  --wa-ring: 0 0 0 4.5px rgba(31, 111, 100, 0.75);
  --wa-ring-strong: 0 0 0 4.5px var(--wa-epinette);
  --wa-fab-shadow: 0 12px 30px rgba(27, 45, 40, 0.20), 0 2px 6px rgba(27, 45, 40, 0.12);

  /* Décalage panneau : il s'ouvre AU-DESSUS du launcher (voir assistant-panel.css) */
  --wa-panel-bottom: calc(max(var(--wa-offset), env(safe-area-inset-bottom, 0px)) + var(--wa-lift) + var(--wa-size) + 16px);

  position: fixed;
  z-index: var(--wa-z);
  font-family: var(--wa-font-text);
  color: var(--wa-jais);
}

#wisy-assistant *,
#wisy-assistant *::before,
#wisy-assistant *::after { box-sizing: border-box; }

/* Texte réservé aux technologies d'assistance (pas de left:-9999px : scroll en RTL) */
.wa-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* =========================================================================
   1. CONTENEUR — fixé en bas à droite ; ne pèse jamais sur la mise en page
   ========================================================================= */
.wa-launcher {
  position: fixed;
  right: max(var(--wa-offset), env(safe-area-inset-right, 0px));
  bottom: calc(max(var(--wa-offset), env(safe-area-inset-bottom, 0px)) + var(--wa-lift));
  z-index: var(--wa-z);
  width: var(--wa-size);
  height: var(--wa-size);

  /* Apparition (500–600 ms, sans rebond) : déclenchée par .is-ready */
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition:
    opacity 0.55s var(--wa-ease-premium),
    transform 0.55s var(--wa-ease-premium),
    bottom 0.3s var(--wa-ease-out);
}
.wa-launcher.is-ready { opacity: 1; transform: none; }

/* =========================================================================
   2. MASCOTTE — vrai <button>, disque crème, anneau discret
   ========================================================================= */
.wa-fab {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--wa-border);
  background: #F4FAF9;
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, var(--wa-creme) 56%,
    color-mix(in srgb, var(--wa-epinette) 9%, var(--wa-creme)) 100%);
  color: var(--wa-jais);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: var(--wa-ring-gap), var(--wa-ring), var(--wa-fab-shadow);
  transition:
    transform 0.22s var(--wa-ease-out),
    box-shadow 0.22s var(--wa-ease-out),
    border-color 0.22s var(--wa-ease);
}

/* Disque qui rogne la mascotte (le point de disponibilité déborde, lui) */
.wa-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}
.wa-avatar,
.wa-avatar img { display: block; width: 100%; height: 100%; }
.wa-avatar img {
  object-fit: cover;
  object-position: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Repli propre si l'image ne charge pas : glyphe assistant (jamais un cercle cassé) */
.wa-fallback {
  display: none;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--wa-epinette);
}
.wa-fallback svg { width: 46%; height: 46%; }
.is-fallback > .wa-avatar { display: none; }
.is-fallback > .wa-fallback { display: grid; }

/* Indicateur de disponibilité — turquoise, statique (jamais clignotant).
   Il indique seulement que l'assistant est accessible, pas qu'une personne est en ligne. */
.wa-fab__status {
  --wa-dot: 12px;
  --wa-dot-border: 2.5px;
  position: absolute;
  right: calc(var(--wa-size) * 0.1464 - (var(--wa-dot) / 2 + var(--wa-dot-border)));
  bottom: calc(var(--wa-size) * 0.1464 - (var(--wa-dot) / 2 + var(--wa-dot-border)));
  width: var(--wa-dot);
  height: var(--wa-dot);
  box-sizing: content-box;
  border: var(--wa-dot-border) solid var(--wa-creme);
  border-radius: 50%;
  background: var(--wa-turquoise);
  pointer-events: none;
}

/* Pastille « IA » : épinette + crème (contraste 6:1) — l'accent turquoise reste unique */
.wa-fab__badge {
  position: absolute;
  top: -3px;
  left: -5px;
  min-width: 22px;
  height: 17px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid var(--wa-creme);
  border-radius: var(--wa-radius-pill);
  box-sizing: content-box;
  background: var(--wa-epinette);
  color: var(--wa-creme);
  font: 700 10px/1 var(--wa-font-title);
  letter-spacing: 0.06em;
  pointer-events: none;
}

/* Icône de fermeture : remplace le point quand l'assistant est ouvert */
.wa-fab__chev {
  position: absolute;
  right: calc(var(--wa-size) * 0.1464 - 12px);
  bottom: calc(var(--wa-size) * 0.1464 - 12px);
  width: 24px;
  height: 24px;
  display: none;
  place-items: center;
  border: 2px solid var(--wa-creme);
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--wa-epinette);
  color: var(--wa-creme);
  pointer-events: none;
}
.wa-fab__chev svg { width: 12px; height: 12px; }

/* Halo d'appel : anneau sarcelle qui s'élargit une fois puis disparaît (transform + opacity) */
.wa-fab__halo {
  position: absolute;
  inset: -4.5px;
  border: 1.5px solid var(--wa-sarcelle);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* ---- États --------------------------------------------------------- */
.wa-fab:active { transform: scale(0.98); transition-duration: 0.09s; }

/* Focus clavier : jais (contraste 3:1 sur fond clair) + turquoise (visible sur fond sombre) */
.wa-fab:focus-visible {
  outline: 3px solid transparent;               /* visible en mode contraste forcé */
  outline-offset: 4px;
  box-shadow: var(--wa-ring-gap), 0 0 0 5px var(--wa-jais), 0 0 0 8px var(--wa-turquoise), var(--wa-fab-shadow);
}

/* Survol (pointeur précis uniquement) : -2px, ×1.02, filet et anneau vers brume */
@media (hover: hover) and (pointer: fine) {
  .wa-fab:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: var(--wa-brume);
    box-shadow: var(--wa-ring-gap), var(--wa-ring-strong),
      0 16px 36px rgba(27, 45, 40, 0.24), 0 3px 8px rgba(27, 45, 40, 0.14);
  }
  .wa-fab:hover:active { transform: scale(0.98); }
  .wa-fab:focus-visible:hover {
    box-shadow: var(--wa-ring-gap), 0 0 0 5px var(--wa-jais), 0 0 0 8px var(--wa-turquoise), var(--wa-fab-shadow);
  }
}

/* Assistant ouvert : plus de halo, anneau brume, pastille de fermeture */
.is-open .wa-fab {
  transform: none;
  border-color: var(--wa-brume);
  box-shadow: var(--wa-ring-gap), var(--wa-ring-strong), var(--wa-fab-shadow);
}
.is-open .wa-fab:focus-visible {
  box-shadow: var(--wa-ring-gap), 0 0 0 5px var(--wa-jais), 0 0 0 8px var(--wa-turquoise), var(--wa-fab-shadow);
}
.is-open .wa-fab__status { display: none; }
.is-open .wa-fab__chev { display: grid; }
.is-open .wa-fab__halo { display: none; }

/* Chargement du moteur (clic très précoce) : halo doux, curseur d'attente */
.is-loading .wa-fab { cursor: progress; }
.is-loading .wa-fab__halo { animation: wa-loading 1.3s var(--wa-ease) infinite; }
@keyframes wa-loading {
  0%   { opacity: 0.5; transform: scale(0.98); }
  100% { opacity: 0;   transform: scale(1.22); }
}

/* ---- Micro-animations d'appel : UNE à la fois, jamais en continu ---- */
.is-cue-lift .wa-avatar img { animation: wa-cue-lift 5s ease-in-out 1; }
@keyframes wa-cue-lift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.is-cue-halo .wa-fab__halo { animation: wa-cue-halo 3.4s var(--wa-ease-out) 1; }
@keyframes wa-cue-halo {
  0%   { opacity: 0.55; transform: scale(0.98); }
  100% { opacity: 0;    transform: scale(1.3); }
}

/* =========================================================================
   3. BULLE D'INVITATION (.wa-invite) — surface crème, pointe vers la mascotte
   ========================================================================= */
.wa-invite {
  --wa-bx: 6px;
  position: absolute;
  right: calc(100% + 16px);
  top: 50%;
  width: max-content;
  max-width: 260px;
  padding: 12px 40px 12px 16px;
  background: var(--wa-creme);
  border: 1px solid rgba(94, 109, 106, 0.26);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(27, 45, 40, 0.14), 0 2px 6px rgba(27, 45, 40, 0.08);
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(var(--wa-bx), -50%);
  transition:
    opacity 0.4s var(--wa-ease-out),
    transform 0.4s var(--wa-ease-out),
    visibility 0s linear 0.4s;
}
/* Pointe (carré tourné, 2 côtés bordés) orientée vers la mascotte */
.wa-invite::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 11px;
  height: 11px;
  background: var(--wa-creme);
  border-top: 1px solid rgba(94, 109, 106, 0.26);
  border-right: 1px solid rgba(94, 109, 106, 0.26);
  border-top-right-radius: 3px;
  transform: translateY(-50%) rotate(45deg);
}
.is-intro .wa-invite,
.is-hint .wa-invite,
.is-notice .wa-invite {
  --wa-bx: 0px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.4s var(--wa-ease-out),
    transform 0.4s var(--wa-ease-out),
    visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
  .wa-launcher:hover .wa-invite { --wa-bx: 3px; }   /* la bulle se rapproche de 3 px */
}
.wa-invite__title {
  margin: 0;
  font: 600 0.94rem/1.25 var(--wa-font-title);
  color: var(--wa-jais);
}
.wa-invite__text {
  margin: 2px 0 0;
  font: 400 0.8125rem/1.4 var(--wa-font-text);
  color: var(--wa-granit);                           /* 5,1:1 sur crème */
}
.wa-invite__cta {
  display: none;
  margin-top: 8px;
  font: 600 0.8125rem/1.3 var(--wa-font-title);
  color: var(--wa-epinette);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wa-invite__cta:focus-visible { outline: 2px solid var(--wa-jais); outline-offset: 3px; border-radius: 4px; }
.is-notice .wa-invite__cta { display: inline-block; }

/* Fermer la bulle : 24 px visibles, zone tactile 44 × 44 */
.wa-invite__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wa-granit);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wa-invite__close::before { content: ""; position: absolute; inset: -9px; }   /* zone tactile 44 px */
.wa-invite__close svg { width: 14px; height: 14px; }
.wa-invite__close:hover { background: rgba(94, 109, 106, 0.12); color: var(--wa-jais); }
.wa-invite__close:focus-visible { outline: 2px solid var(--wa-jais); outline-offset: 2px; }

/* Laisse la place au launcher : rien d'essentiel du pied de page n'est masqué
   (72 px de mascotte + 32 px de marge maximale + 12 px d'air ; 58 + 16 + 12 sur mobile) */
.has-wisy-assistant .site-footer { padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px)); }

/* Formes des éléments focusables. Les pages posent `:focus-visible { border-radius: 4px }` : ce serait
   la forme de tout bouton au focus clavier (le launcher deviendrait un carré). La spécificité #id
   (1,1,0) garantit que la forme reste la même dans TOUS les états. */
#wisy-assistant .wa-fab,
#wisy-assistant .wa-invite__close { border-radius: 50%; }

/* =========================================================================
   4. RESPONSIVE — vraie adaptation mobile (pas une simple réduction)
   ========================================================================= */
@media (max-width: 640px) {
  #wisy-assistant {
    --wa-size: 58px;                                  /* zone tactile ≥ 44 px */
    --wa-offset: 16px;
  }
  /* Bulle compacte : le titre seul, largeur bornée (320 px : ≥ 90 px de marge à gauche) */
  .wa-invite { max-width: calc(100vw - 2 * var(--wa-offset) - var(--wa-size) - 14px - 8px); padding: 10px 36px 10px 14px; }
  .wa-invite__text { display: none; }
  .is-notice .wa-invite__text { display: block; }
  .wa-fab__badge { top: -4px; left: -4px; min-width: 19px; height: 15px; font-size: 9px; padding: 0 4px; }
  .has-wisy-assistant .site-footer { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 360px) {
  .wa-fab__badge { display: none; }                    /* 58 px : la mascotte prime */
}
/* Feuille plein écran (≤ 560 px) : le launcher s'efface quand l'assistant est ouvert */
@media (max-width: 560px) {
  .is-open .wa-launcher { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* Paysage bas (téléphone) : même logique, le panneau occupe la hauteur */
@media (max-height: 520px) and (min-width: 561px) {
  .is-open .wa-launcher { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* =========================================================================
   5. MOUVEMENT RÉDUIT — plus d'idle, de halo ni de micro-mouvement décoratif
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .wa-launcher { transform: none; transition: opacity 0.15s linear; }
  .wa-fab,
  .wa-invite { transition-duration: 0.01ms; }
  .wa-fab:hover,
  .wa-fab:active { transform: none; }
  .wa-invite { --wa-bx: 0px !important; }
  .wa-avatar img,
  .wa-fab__halo { animation: none !important; }
  .wa-fab__halo { display: none; }
}

/* Jamais à l'impression : un bouton flottant n'a rien à faire sur le papier */
@media print {
  #wisy-assistant { display: none !important; }
  .has-wisy-assistant .site-footer { padding-bottom: 0; }
}