/* =========================================================================
   AGENT IA CONVERSATIONNEL — HABILLAGE
   -------------------------------------------------------------------------
   Aucune couleur n'est écrite en dur ici. Tout passe par les variables
   définies en haut de styles.css, pour que la bulle suive automatiquement
   le thème clair et le thème sombre.

   Si vous voulez changer les couleurs, ne modifiez pas ce fichier :
   modifiez le pavé « OÙ CHANGER LES COULEURS » de styles.css.
   ========================================================================= */

.agent {
  position: fixed;
  right: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  bottom: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  z-index: 900;                 /* sous le bandeau cookies, qui doit primer */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  font-family: var(--sans);
}

/* --- Le bouton flottant --------------------------------------------------- */
.agent__bulle {
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  border: 1px solid var(--champagne);
  background: var(--fond-contraste);
  color: var(--champagne-clair);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.22);
  transition: transform var(--transition), box-shadow var(--transition);
}

.agent__bulle:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(16, 24, 40, 0.28); }
.agent__bulle:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

.agent__bulle svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.agent__bulle--ouvert { transform: scale(0.94); }

/* --- Le panneau ----------------------------------------------------------- */
.agent__panneau {
  width: min(380px, calc(100vw - 2rem));
  height: min(560px, calc(100vh - 8rem));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.24);
  overflow: hidden;
}

.agent__panneau[hidden] { display: none; }

.agent__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--fond-contraste);
  color: var(--ivoire);
}

.agent__titre {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.2;
}

.agent__sous-titre {
  margin: 0.15rem 0 0;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--champagne-clair);
}

.agent__fermer {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
}
.agent__fermer:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }
.agent__fermer svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round;
}

/* --- Le fil de discussion ------------------------------------------------- */
.agent__fil {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.agent__ligne { display: flex; }
.agent__ligne--moi { justify-content: flex-end; }
.agent__ligne--eux { justify-content: flex-start; }

.agent__message {
  max-width: 85%;
  padding: 0.65rem 0.9rem;
  border-radius: var(--r-md);
  font-size: var(--t-small);
  line-height: 1.65;
  white-space: normal;
  overflow-wrap: anywhere;
}

.agent__ligne--eux .agent__message {
  background: var(--surface-creuse);
  color: var(--texte);
  border-bottom-left-radius: var(--r-sm);
}

.agent__ligne--moi .agent__message {
  background: var(--fond-contraste);
  color: var(--ivoire);
  border-bottom-right-radius: var(--r-sm);
}

/* --- Les trois points d'attente ------------------------------------------- */
.agent__attente { display: flex; gap: 4px; align-items: center; padding: 0.85rem 0.9rem; }
.agent__attente span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--texte-faible);
  animation: agent-point 1.2s infinite ease-in-out;
}
.agent__attente span:nth-child(2) { animation-delay: 0.16s; }
.agent__attente span:nth-child(3) { animation-delay: 0.32s; }

@keyframes agent-point {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

/* --- Les appels à l'action ------------------------------------------------ */
.agent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 1.1rem 0.6rem;
}
.agent__actions:empty { display: none; }

.agent__cta {
  font-size: var(--t-micro);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--champagne);
  border-radius: var(--r-pill);
  color: var(--texte-fort);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.agent__cta:hover { background: var(--champagne); color: var(--nuit); }
.agent__cta:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }

/* --- La saisie ------------------------------------------------------------ */
.agent__saisie {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border-top: 1px solid var(--trait);
}

.agent__champ {
  flex: 1;
  resize: none;
  max-height: 120px;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 1rem;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
}
.agent__champ:focus { outline: none; border-color: var(--champagne); }

.agent__envoyer {
  flex: none;
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  border: 0;
  background: var(--fond-contraste);
  color: var(--champagne-clair);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.agent__envoyer:disabled { opacity: 0.5; cursor: default; }
.agent__envoyer:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }
.agent__envoyer svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* --- Le pied ------------------------------------------------------------- */
.agent__pied {
  margin: 0;
  padding: 0 1.1rem 0.85rem;
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--texte-faible);
}
.agent__pied a { color: inherit; text-decoration: underline; }

/* --- Petits écrans -------------------------------------------------------- */
@media (max-width: 480px) {
  .agent { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; align-items: stretch; }
  .agent__panneau { width: 100%; height: min(72vh, calc(100vh - 6rem)); }
  .agent__bulle { align-self: flex-end; }
}

/* --- Mouvement réduit -----------------------------------------------------
   Un visiteur qui a demandé moins d'animations ne doit pas subir trois
   points qui sautillent en permanence.                                     */
@media (prefers-reduced-motion: reduce) {
  .agent__bulle { transition: none; }
  .agent__attente span { animation: none; opacity: 0.55; }
}

/* --- Impression ----------------------------------------------------------- */
@media print {
  .agent { display: none !important; }
}

/* =========================================================================
   MIA — IDENTITÉ VISUELLE DE L'ASSISTANTE (17 septembre 2026)
   -------------------------------------------------------------------------
   Le portrait de MIA remplace l'icône de bulle. Trois précautions :

   1. La photo remplit la bulle sans la déformer (object-fit: cover) et ne
      dépasse jamais du cercle (overflow: hidden).
   2. La pastille « IA » indique, dès la bulle fermée, qu'on s'adresse à une
      assistante automatique et non à une personne.
   3. Si le fichier image manque, agent.js ajoute « agent__bulle--sans-photo »
      et l'ancienne icône dessinée reprend sa place : rien ne disparaît.
   ========================================================================= */
.agent__bulle {
  overflow: hidden;
  padding: 0;
  position: relative;
}

.agent__bulle-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  display: block;
  border-radius: inherit;
}

/* La pastille « IA » : petit repère doré en bas à droite de la bulle. */
.agent__bulle-pastille {
  position: absolute;
  right: -1px;
  bottom: -1px;
  padding: 0.1rem 0.32rem;
  border-radius: var(--r-pill);
  background: var(--fond-contraste);
  color: var(--champagne-clair);
  border: 1px solid var(--champagne);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.25;
}

.agent__bulle--sans-photo { padding: initial; }

/* --- En-tête du panneau : portrait + prénom ------------------------------- */
.agent__identite {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.agent__avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: var(--r-pill);
  object-fit: cover;
  object-position: 50% 28%;
  border: 1px solid var(--champagne);
}

/* --- Portrait de MIA dans les pages -------------------------------------- */
/* Utilisé par l'accueil, Smart IA™ et Smart Avatar™. La pastille reprend le
   même repère « Assistante IA » que la bulle, pour que le visiteur ne prenne
   jamais MIA pour une collaboratrice humaine. */
.mia-jeton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.9rem 0.4rem 0.4rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 0.92rem;
  line-height: 1.3;
  text-align: left;
}

.mia-jeton img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--r-pill);
  object-fit: cover;
  object-position: 50% 28%;
}

.mia-jeton strong { letter-spacing: 0.02em; }
.mia-jeton span { display: block; font-size: 0.8rem; color: var(--texte-doux); }

/* Le jeton reste une pastille CLAIRE, même posée sur une bande sombre :
   sans cette règle, « .section-nuit p » le peignait en ivoire sur ivoire et
   le sous-titre devenait invisible (constaté le 17 sept. 2026). */
.section-nuit .mia-jeton { color: var(--texte); }
.section-nuit .mia-jeton strong { color: var(--texte-fort); }
.section-nuit .mia-jeton span { color: var(--texte-doux); }

@media (max-width: 420px) {
  .mia-jeton { font-size: 0.86rem; }
  .mia-jeton img { width: 38px; height: 38px; flex-basis: 38px; }
}

/* =========================================================================
   LA FENÊTRE NE DÉPASSE JAMAIS L'ÉCRAN (18 septembre 2026)
   -------------------------------------------------------------------------
   Défaut constaté par Léa : avec une fenêtre de navigateur peu haute, ou un
   navigateur très zoomé, la fenêtre de conversation devenait plus haute que
   l'écran. Elle sortait par le haut, emportant le nom de MIA et la croix de
   fermeture : le visiteur ne pouvait plus la refermer.

   Trois règles suffisent, et elles remplacent les hauteurs fixes posées plus
   haut dans ce fichier (c'est voulu : les dernières règles l'emportent).

   1. Le bloc flottant entier est plafonné à la hauteur visible.
   2. La fenêtre garde sa hauteur souhaitée, mais ne dépasse plus ce plafond.
   3. L'en-tête et la zone de saisie ne se compriment pas ; c'est la liste des
      messages qui défile — « min-height: 0 » est indispensable, sinon un
      contenu long refuse de se réduire et repousse l'en-tête dehors.

   « dvh » = hauteur réellement visible, barres du navigateur mobile déduites.
   La ligne « vh » juste avant sert de repli pour les navigateurs anciens.
   ========================================================================= */
.agent {
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
}

.agent__panneau {
  height: auto;
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(100vh - 6.5rem);
  max-height: calc(100dvh - 6.5rem);
}

/* Hauteur souhaitée, tant que la place le permet. */
@media (min-height: 620px) {
  .agent__panneau { height: 560px; }
}

.agent__entete,
.agent__saisie,
.agent__actions,
.agent__pied { flex: 0 0 auto; }

.agent__fil { flex: 1 1 auto; min-height: 0; overflow-y: auto; }