/* ============================================================
   Notacor - widget de contact

   Le widget est injecte par js/main.js sur toutes les pages sauf
   /contact, qui porte deja le formulaire, et /liens, dont le body
   porte data-sans-widget. Son markup n'existe dans aucune page HTML,
   mais ses regles ont besoin d'une feuille : les voici, reprises de
   l'ancienne feuille commune supprimee avec la refonte 3.0.

   Mise en forme conversationnelle : l'adresse de reponse reste visible
   dans le fil, la question s'ecrit en bas. Le message part pourtant par
   courriel, ce que le pied de panneau dit sans jamais promettre une
   presence en direct. Aucune requete au chargement : les trois photos
   n'ont de src qu'a la premiere ouverture.
   ============================================================ */

/* Panneau, ligne d'adresse et zone de saisie portent un display explicite :
   sans cette regle, il l'emporterait sur l'attribut hidden et le panneau
   s'afficherait des le chargement. Meme piege que pour les blocs du canvas. */
.widget-racine[hidden],
.widget-racine [hidden] { display: none !important; }

.widget-racine {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90; /* au-dessus de l'en-tete, sous la modale de rendez-vous */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: var(--font-body);
}

/* ── Bulle fermee : icone seule, halo tres discret ───────────── */
.widget-bulle {
  width: 58px;
  height: 58px;
  flex: none;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 9999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  cursor: pointer;
  box-shadow: 0 14px 32px -14px rgba(0, 10, 30, 0.5);
  animation: widgetHalo 3.2s ease-out infinite;
  transition: background 0.2s;
}
.widget-bulle:hover { background: var(--color-primary-container); }
.widget-bulle svg { width: 25px; height: 25px; }

@keyframes widgetHalo {
  0%, 100% { box-shadow: 0 14px 32px -14px rgba(0,10,30,.5), 0 0 0 0 rgba(8,125,209,.30); }
  55%      { box-shadow: 0 14px 32px -14px rgba(0,10,30,.5), 0 0 0 11px rgba(8,125,209,0); }
}

/* ── Panneau ─────────────────────────────────────────────────── */
.widget-panneau {
  width: 372px;
  max-width: calc(100vw - 40px);
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--r-panel);
  box-shadow: 0 28px 64px -28px rgba(0, 10, 30, 0.42);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.widget-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.widget-visages { display: flex; flex: none; }
.widget-visages img {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  object-fit: cover;
  background: var(--color-surface-container);
  box-shadow: 0 0 0 2px var(--color-primary);
}
.widget-visages img + img { margin-left: -12px; }
.widget-titre {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
}
/* Chaque prenom reste insecable : sans cela la ligne casse au trait
   d'union de Francois-Xavier. */
.widget-titre span { white-space: nowrap; }
.widget-fermer {
  margin-left: auto;
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-on-primary);
  cursor: pointer;
}
.widget-fermer:hover { background: rgba(255, 255, 255, 0.14); }
.widget-fermer svg { width: 16px; height: 16px; }

/* ── Fil de discussion ───────────────────────────────────────── */
.widget-fil {
  background: var(--color-surface);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 46vh;
  overflow-y: auto;
}
.widget-message {
  max-width: 86%;
  padding: 11px 14px;
  font-size: 14.5px;
  line-height: 1.5;
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 14px 14px 14px 4px;
  color: var(--color-on-surface);
  overflow-wrap: anywhere;
}
/* Deux messages consecutifs du meme emetteur se groupent. */
.widget-message + .widget-message {
  margin-top: -6px;
  border-radius: 4px 14px 14px 4px;
}
.widget-message.sortant {
  align-self: flex-end;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  border-radius: 14px 14px 4px 14px;
  margin-top: 0;
}

/* L'adresse de reponse reste dans le fil : c'est elle qui recevra la
   reponse, la masquer apres saisie serait la cacher au moment ou elle
   compte le plus. */
.widget-email {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 14px;
  transition: border-color 0.2s;
}
.widget-email:focus-within { border-color: var(--color-tertiary); }
.widget-email[data-erreur="oui"] { border-color: var(--color-error); }
.widget-email > svg:first-child {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--color-outline);
}
.widget-email input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--color-on-surface);
  padding: 2px 0;
}
.widget-coche {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--color-success);
}

.widget-erreur {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-error);
}

/* ── Zone de saisie, en bas comme dans une messagerie ────────── */
.widget-composer {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 12px 14px;
  border-top: 1px solid var(--color-outline-variant);
  background: var(--color-surface-lowest);
}
.widget-composer textarea {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  max-height: 112px;
  /* 8 px et non 10 : a 10 px la ligne de texte depasse de 0,3 px la
     hauteur utile et fait apparaitre une barre de defilement des le
     champ vide. */
  padding: 8px 13px;
  border: 1px solid var(--color-outline-variant);
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--color-on-surface);
  background: var(--color-surface-lowest);
  outline: none;
  resize: none;
  overflow-y: auto;
  transition: border-color 0.2s;
}
.widget-composer textarea:focus { border-color: var(--color-tertiary); }
.widget-envoi {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 9999px;
  background: var(--color-tertiary);
  color: var(--color-on-tertiary);
  cursor: pointer;
  transition: background 0.2s;
}
.widget-envoi:disabled {
  background: var(--color-surface-high);
  color: var(--color-outline);
  cursor: default;
}
.widget-envoi svg { width: 18px; height: 18px; }

.widget-pied {
  padding: 0 14px 12px;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--color-secondary);
  background: var(--color-surface-lowest);
}
.widget-pied a { color: var(--color-tertiary-texte); }

.widget-rejouer {
  align-self: flex-start;
  padding: 9px 14px;
  border: 1px solid var(--color-outline-variant);
  border-radius: 9999px;
  background: var(--color-surface-lowest);
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--color-on-surface);
  cursor: pointer;
}
.widget-rejouer:hover { background: var(--color-surface-low); }

.widget-racine :focus-visible {
  outline: 2px solid var(--color-tertiary);
  outline-offset: 3px;
}

/* En dessous de 480 px le panneau occupe toute la largeur. */
@media (max-width: 480px) {
  .widget-racine { right: 12px; left: 12px; bottom: 12px; align-items: flex-end; }
  .widget-panneau { width: 100%; max-width: none; }
  .widget-fil { max-height: 40vh; }
}

@media (prefers-reduced-motion: reduce) {
  .widget-bulle { animation: none; }
  .widget-bulle,
  .widget-email,
  .widget-composer textarea,
  .widget-envoi { transition: none; }
}