/* =====================================================================
   POWERLOC — assistant conversationnel (section « Questions »)
   S'appuie sur les variables de site.css. Agent ElevenLabs, chargé seulement
   au premier message (assets/js/assistant.js).
   ===================================================================== */
.faq-layout { align-items: stretch; }
.chat {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px; border: var(--bw-filet) solid var(--filet-papier); border-radius: var(--r-lg);
  background: var(--blanc); box-shadow: var(--sh-douce); min-width: 0;
}
.chat__log {
  display: flex; flex-direction: column; gap: 10px;
  height: clamp(200px, calc(var(--vh) * 34), 420px); overflow-y: auto; overscroll-behavior: contain;
  padding: 12px; border-radius: var(--r-md); background: var(--papier);
}
.chat__log:focus-visible { outline-offset: -2px; }
.chat__msg { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.chat__msg p { margin: 0; }
.chat__msg p + p { margin-top: 6px; }
.chat__msg--ai { align-self: flex-start; background: var(--blanc); color: var(--encre); border: var(--bw-filet) solid var(--filet-papier); border-bottom-left-radius: 6px; }
.chat__msg--user { align-self: flex-end; background: var(--vertp); color: var(--blanc); border-bottom-right-radius: 6px; }
.chat__msg--info { align-self: center; max-width: 100%; padding: 4px 8px; background: none; color: var(--graphite); font-size: var(--fs-caption); text-align: center; }
.chat__msg--info a { color: var(--vertp); font-weight: 600; }
.chat__msg--new { animation: monter var(--t-etat) var(--ease-out) both; }
.chat__typing { display: inline-flex; gap: 4px; align-items: center; height: 20px; }
.chat__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--graphite); opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .chat__typing span { animation: chat-dot 1s var(--ease) infinite; }
  .chat__typing span:nth-child(2) { animation-delay: .15s; }
  .chat__typing span:nth-child(3) { animation-delay: .3s; }
}
@keyframes chat-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.chat__chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.chat__chips::-webkit-scrollbar { display: none; }
.chat__chips[hidden] { display: none; }
.chip {
  flex: none; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill);
  border: var(--bw-contour) solid var(--filet-papier); background: var(--blanc); color: var(--encre);
  font: 600 14px/1 var(--font-texte); cursor: pointer; white-space: nowrap;
  transition: border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
@media (hover: hover) { .chip:hover { border-color: var(--vertp); color: var(--vertp); } }
@media (pointer: coarse) { .chip { min-height: 44px; } }

.chat__form { display: flex; gap: 8px; align-items: center; }
.chat__input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 18px;
  border: var(--bw-contour) solid var(--contour-papier); border-radius: var(--r-pill);
  background: var(--blanc); color: var(--encre); font: 400 16px/1.2 var(--font-texte);
}
.chat__input::placeholder { color: var(--graphite); opacity: 1; }
.chat__input:focus { outline: none; border-color: var(--vertp); box-shadow: var(--sh-halo); }
.chat__send, .chat__icon-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border-radius: 50%; cursor: pointer;
  transition: background-color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}
.chat__send { border: var(--bw-contour) solid var(--vertp); background: var(--vertp); color: var(--blanc); }
@media (hover: hover) { .chat__send:hover { background: var(--vertp-hover); border-color: var(--vertp-hover); } }
.chat__send:active, .chat__icon-btn:active { transform: scale(.95); }
.chat__send:disabled { opacity: .5; cursor: default; }
.chat__icon-btn { border: var(--bw-contour) solid var(--contour-papier); background: var(--blanc); color: var(--encre); }
@media (hover: hover) { .chat__icon-btn:hover { border-color: var(--vertp); color: var(--vertp); } }
.chat__icon-btn[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--vert); }
@media (prefers-reduced-motion: no-preference) {
  .chat__icon-btn[aria-pressed="true"] { animation: chat-pulse 1.6s var(--ease) infinite; }
}
@keyframes chat-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(154,223,62,.45); } 50% { box-shadow: 0 0 0 6px rgba(154,223,62,0); } }
.chat__icon-btn[hidden] { display: none; }

.chat__note { margin: 0; padding: 0 6px; color: var(--graphite); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.chat__note a { color: inherit; text-underline-offset: 3px; }
.chat__status { margin: 0; padding: 0 6px; min-height: 0; color: var(--graphite); font-size: var(--fs-caption); }
.chat__status:empty { display: none; }

/* FAQ repliée sous le chat */
.faq-more { margin-top: 28px; }
.faq-more > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 16px; color: var(--vertp); border-radius: var(--r-xs);
}
.faq-more > summary::-webkit-details-marker { display: none; }
.faq-more > summary::after { content: "+"; font: 600 20px/1 var(--font-texte); transition: transform var(--t-etat) var(--ease-out); }
.faq-more[open] > summary::after { transform: rotate(45deg); }
@media (hover: hover) { .faq-more > summary:hover { text-decoration: underline; text-underline-offset: 5px; } }
.faq-more .faq-list { margin-top: 12px; }
@media (min-width: 900px) {
  .faq-more { margin-left: calc((100% - 64px) / 3 + 64px); }
}
@media (max-width: 599px) {
  .chat { padding: 10px; margin-inline: calc(-1 * var(--sp-sm)); }
  .chat__log { height: clamp(220px, calc(var(--vh) * 40), 380px); }
  .chat__msg { max-width: 92%; }
}