/* =====================================================================
   L'ASSISTANCE · pastille et panneau

   Elle prend la place qu'occupait la pastille WhatsApp sur l'accueil, et
   WhatsApp descend d'un cran : il vit désormais dans le pied du panneau,
   toujours atteignable, sans qu'une seconde pastille flotte au-dessus
   d'une page qui tient au vide.

   Le vocabulaire est celui du reste du site et rien n'y est inventé :
   pastille sombre à filet d'un pixel, capitales espacées en Archivo,
   Bodoni pour ce qui se lit, mêmes durées et mêmes courbes. Un widget de
   conversation a une pente naturelle vers le gadget bleu arrondi ; la
   seule chose qui l'en tient éloigné est de ne rien s'autoriser ici qui
   ne soit déjà ailleurs.

   Les variables viennent de la page hôte. `page.css` et `index.html` les
   déclarent toutes les deux : ce fichier n'en pose aucune et se contente
   de replis pour les deux ou trois que seul l'accueil connaît.
   ===================================================================== */

.assist,
.assist-panneau{
  --assist-ease: cubic-bezier(.22,1,.36,1);
  --assist-fond: #14110E;
  font-family:'Archivo', system-ui, sans-serif;
}

/* ---------- La pastille ---------- */

.assist{
  position:fixed; z-index:12;
  right:clamp(1rem,3vw,2.25rem);
  bottom:clamp(1rem,3vh,2.25rem);
  bottom:calc(clamp(1rem,3vh,2.25rem) + env(safe-area-inset-bottom, 0px));
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.7rem 1.15rem;
  border-radius:999px;
  background:rgba(26,26,26,.82);
  border:1px solid var(--color-border-subtle, rgba(184,172,152,.2));
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  font-stretch:78%;
  font-size:.66rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--color-greige, #B8AC98);
  cursor:pointer;
  /* Compositeur seul : opacité et transformée, jamais de mise en page. */
  opacity:0; transform:translate3d(0,12px,0); pointer-events:none;
  transition:opacity .55s var(--assist-ease), transform .55s var(--assist-ease),
             color .25s ease, border-color .25s ease;
}
.assist.on{ opacity:1; transform:translate3d(0,0,0); pointer-events:auto }
.assist.on:active{ transform:translate3d(0,0,0) scale(.97) }
.assist[aria-expanded="true"]{ opacity:0; transform:translate3d(0,12px,0); pointer-events:none }

/* La bulle fait le travail que le libellé ne peut pas faire seul : dire en un
   dixième de seconde que ceci est une conversation, et non un formulaire de
   plus. Même rôle que le glyphe de la messagerie sur l’ancienne pastille.
   Angles droits, trait d’un pixel : le site n’a d’arrondi nulle part. */
.assist__glyphe{
  width:14px; height:14px; flex:none; display:block;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:square; stroke-linejoin:miter;
}

@media (hover:hover) and (pointer:fine){
  .assist:hover{ color:var(--color-ivoire, #F4F1EC); border-color:rgba(184,172,152,.45) }
}
@media (max-width:420px){
  .assist{ padding:.68rem .95rem; font-size:.62rem; letter-spacing:.16em; gap:.5rem }
}

/* ---------- Le panneau ---------- */

.assist-panneau{
  position:fixed; z-index:13;
  right:clamp(1rem,3vw,2.25rem);
  bottom:clamp(1rem,3vh,2.25rem);
  bottom:calc(clamp(1rem,3vh,2.25rem) + env(safe-area-inset-bottom, 0px));
  width:min(382px, calc(100vw - 2rem));
  height:min(560px, calc(100vh - 6rem));
  display:flex; flex-direction:column;
  background:var(--assist-fond);
  border:1px solid var(--color-border-subtle, rgba(184,172,152,.2));
  box-shadow:0 32px 90px rgba(0,0,0,.5);
  /* Aucun arrondi. Le site n'en a nulle part, et c'est ce détail qui
     sépare une maison d'un widget de support. */
  opacity:0; transform:translate3d(0,16px,0) scale(.99);
  transform-origin:100% 100%;
  pointer-events:none;
  transition:opacity .42s var(--assist-ease), transform .42s var(--assist-ease);
}
.assist-panneau.on{ opacity:1; transform:none; pointer-events:auto }

@media (max-width:520px){
  .assist-panneau{
    right:0; left:0; bottom:0;
    width:100%; height:min(88vh, 100% - 2.5rem);
    border-left:0; border-right:0; border-bottom:0;
  }
}

/* ---------- En-tête ---------- */

.assist__tete{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.05rem 1.2rem;
  border-bottom:1px solid var(--color-border-subtle, rgba(184,172,152,.2));
}
.assist__ident{ display:flex; flex-direction:column; gap:.3rem; min-width:0 }
.assist__maison{
  font-family:'Bodoni Moda', Georgia, serif;
  font-size:.95rem; letter-spacing:.02em; color:var(--color-ivoire, #F4F1EC);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.assist__role{
  font-size:.55rem; font-stretch:78%; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--color-greige-dark, #9A8E7E);
}
.assist__fermer{
  flex:none; width:30px; height:30px;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer; padding:0;
  color:var(--color-greige-dark, #9A8E7E);
  transition:color .25s ease;
}
.assist__fermer:hover{ color:var(--color-ivoire, #F4F1EC) }
.assist__fermer svg{ width:13px; height:13px; display:block; stroke:currentColor; stroke-width:1.4; fill:none }

/* ---------- Le fil ---------- */

.assist__fil{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:1.2rem; display:flex; flex-direction:column; gap:1rem;
  scrollbar-width:thin; scrollbar-color:rgba(184,172,152,.25) transparent;
}
.assist__fil::-webkit-scrollbar{ width:3px }
.assist__fil::-webkit-scrollbar-thumb{ background:rgba(184,172,152,.25) }

.assist__msg{
  max-width:86%;
  font-size:.86rem; line-height:1.62;
  white-space:pre-wrap; overflow-wrap:anywhere;
  animation:assist-entree .45s var(--assist-ease) both;
}
@keyframes assist-entree{ from{ opacity:0; transform:translate3d(0,6px,0) } }

.assist__msg--nous{
  align-self:flex-start;
  color:var(--color-greige-light, #D4CBBD);
  font-family:'Bodoni Moda', Georgia, serif;
}
.assist__msg--vous{
  align-self:flex-end;
  color:var(--color-ivoire, #F4F1EC);
  background:rgba(184,172,152,.09);
  border:1px solid var(--color-border-subtle, rgba(184,172,152,.2));
  padding:.6rem .85rem;
}

/* Trois points, le temps de la réponse. Ils disent que quelqu'un écrit,
   ce qui est la seule chose à dire pendant ce temps-là. */
.assist__attente{ align-self:flex-start; display:flex; gap:5px; padding:.5rem .1rem }
.assist__attente span{
  width:4px; height:4px; border-radius:50%;
  background:var(--color-greige-dark, #9A8E7E);
  animation:assist-points 1.25s ease-in-out infinite;
}
.assist__attente span:nth-child(2){ animation-delay:.16s }
.assist__attente span:nth-child(3){ animation-delay:.32s }
@keyframes assist-points{ 0%,60%,100%{ opacity:.25; transform:translateY(0) } 30%{ opacity:.9; transform:translateY(-3px) } }

/* ---------- Suggestions ---------- */

.assist__pistes{
  display:flex; flex-wrap:wrap; gap:.45rem;
  margin-top:.1rem;
  animation:assist-entree .45s var(--assist-ease) both;
}
.assist__pistes[hidden]{ display:none }
.assist__piste{
  font-family:inherit; font-size:.7rem; line-height:1.3;
  color:var(--color-greige, #B8AC98);
  background:none; cursor:pointer;
  border:1px solid var(--color-border-subtle, rgba(184,172,152,.2));
  padding:.42rem .7rem;
  transition:color .25s ease, border-color .25s ease;
}
.assist__piste:hover{ color:var(--color-ivoire, #F4F1EC); border-color:rgba(184,172,152,.45) }

/* ---------- Saisie ---------- */

.assist__pied{
  flex:none;
  border-top:1px solid var(--color-border-subtle, rgba(184,172,152,.2));
  padding:.85rem 1.2rem 1rem;
}
.assist__ligne{ display:flex; align-items:flex-end; gap:.6rem }
.assist__champ{
  flex:1 1 auto; min-width:0;
  background:none; border:0; outline:none; resize:none;
  font-family:'Bodoni Moda', Georgia, serif;
  font-size:.9rem; line-height:1.5;
  color:var(--color-ivoire, #F4F1EC);
  max-height:104px; padding:.35rem 0;
}
.assist__champ::placeholder{ color:var(--color-greige-dark, #9A8E7E); opacity:.75 }
.assist__envoi{
  flex:none; width:30px; height:30px;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer; padding:0;
  color:var(--color-greige, #B8AC98);
  transition:color .25s ease, opacity .25s ease;
}
.assist__envoi svg{ width:15px; height:15px; display:block; stroke:currentColor; stroke-width:1.4; fill:none }
.assist__envoi:hover{ color:var(--color-ivoire, #F4F1EC) }
.assist__envoi:disabled{ opacity:.3; cursor:default }

.assist__mention{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:.6rem;
  font-size:.55rem; font-stretch:78%; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-greige-dark, #9A8E7E);
}
.assist__wa{
  display:inline-flex; align-items:center; gap:.4rem;
  color:inherit; text-decoration:none; white-space:nowrap;
  transition:color .25s ease;
}
.assist__wa:hover{ color:var(--color-ivoire, #F4F1EC) }
.assist__wa svg{ width:12px; height:12px; display:block; fill:#25D366; flex:none }

@media (prefers-reduced-motion: reduce){
  .assist, .assist-panneau, .assist__msg{ transition-duration:.01ms; animation:none }
  .assist.on .assist__point, .assist__attente span{ animation:none }
}

/* Sans JavaScript, rien de tout cela n'existe : le script crée le DOM. La
   règle ci-dessous ne sert qu'au cas où le balisage serait posé à la main
   un jour, pour qu'une pastille morte ne reste pas à l'écran. */
html:not(.js) .assist, html:not(.js) .assist-panneau{ display:none }