/* Joffrey IA : feuille autonome, partagée par le site et les propositions.
   Les variables du site (--serif, --texte…) sont utilisées si elles existent. */
/* ============================================================
   JOFFREY IA : le bouton en haut au centre, et son panneau.
   Sa propre palette (encre sur papier), quel que soit le régime de la page.
   Sans script, le panneau se lit comme une section du document.
   ============================================================ */
.ia-bouton { display: none; }
.assistant {
  --ia-encre: #16120d; --ia-gris: #5d554b; --ia-papier: #f6f1e8; --ia-carte: #fffdf8; --ia-trait: rgba(40, 28, 15, 0.14);
  max-width: 1180px; margin: 0 auto; padding: 40px var(--marge, 16px);
}
.assistant h2 { margin: 0; font: 400 34px/1 var(--serif, "Instrument Serif", Georgia, serif); }
.assistant h3 { margin: 18px 0 10px; font: 500 11px/1.2 var(--mono, ui-monospace, Consolas, monospace); letter-spacing: 0.14em; text-transform: uppercase; }
.assistant ul { list-style: none; margin: 0; padding: 0; }
.ia-tete img { display: none; }
.ia-fermer, .ia-form { display: none; }
.ia-sujets, .ia-puces { display: grid; gap: 8px; }
.ia-sujets button, .ia-puces button {
  width: 100%; text-align: left; background: none; border: 1px solid var(--trait, rgba(40, 28, 15, 0.14)); border-radius: 12px;
  padding: 10px 12px; color: inherit; font: 400 14px/1.4 var(--texte, system-ui, -apple-system, "Segoe UI", sans-serif);
}
.ia-sujets strong, .ia-puces strong { font-weight: 600; }
.ia-sujets span { display: block; opacity: 0.75; font-size: 13px; }

.ia-prete .ia-bouton {
  position: absolute; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 16px 5px 5px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(40, 28, 15, 0.16); background: rgba(255, 252, 246, 0.82); backdrop-filter: blur(8px);
  color: #16120d; font: 500 14px/1 var(--texte, system-ui, -apple-system, "Segoe UI", sans-serif); letter-spacing: 0.01em;
  box-shadow: 0 6px 22px rgba(60, 35, 10, 0.16);
  transition: transform 0.25s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow 0.25s;
}
.ia-prete .ia-bouton:hover { transform: translateX(-50%) translateY(-1px); box-shadow: 0 10px 28px rgba(60, 35, 10, 0.22); }
.ia-bouton img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ia-bouton i { width: 8px; height: 8px; border-radius: 50%; background: #d4561e; box-shadow: 0 0 0 0 rgba(212, 86, 30, 0.6); animation: ia-pouls 2.2s infinite; }
.ia-bouton.vu i { animation: none; background: #3f9a52; box-shadow: none; }
.ia-bouton[aria-expanded="true"] { background: #16120d; color: #fffdf8; border-color: #16120d; }
@keyframes ia-pouls { 0% { box-shadow: 0 0 0 0 rgba(212, 86, 30, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(212, 86, 30, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 86, 30, 0); } }

.ia-prete .assistant {
  position: fixed; z-index: 30; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 58px);
  width: min(440px, calc(100% - 2 * var(--marge, 16px))); max-height: calc(100dvh - 92px);
  margin: 0; padding: 0; display: flex; flex-direction: column;
  background: var(--ia-papier); color: var(--ia-encre);
  border: 1px solid var(--ia-trait); border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(40, 22, 5, 0.32);
  opacity: 0; visibility: hidden; transform: translate(-50%, -10px) scale(0.98); transform-origin: 50% 0;
  transition: opacity 0.3s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), transform 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), visibility 0.3s;
}
.ia-prete .assistant.ouvert { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.ia-prete .ia-tete { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--ia-trait); background: var(--ia-carte); }
.ia-prete .ia-tete img { display: block; width: 40px; height: 40px; border-radius: 50%; }
.ia-prete .ia-tete div { flex: 1; min-width: 0; }
.ia-prete .assistant h2 { font-size: 24px; }
.ia-prete .ia-tete p { margin: 3px 0 0; font-size: 13px; color: var(--ia-gris); }
.ia-prete .ia-fermer {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--ia-trait); background: transparent; color: var(--ia-encre); cursor: pointer;
}
.ia-fermer svg, .ia-envoi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ia-prete .ia-fil { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 4px 16px 14px; }
.ia-prete .assistant h3 { color: var(--ia-gris); }
.ia-prete .ia-sujets button, .ia-prete .ia-puces button { background: var(--ia-carte); border-color: var(--ia-trait); cursor: pointer; transition: border-color 0.2s, transform 0.2s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)); }
.ia-prete .ia-sujets button:hover, .ia-prete .ia-puces button:hover { border-color: var(--ia-encre); transform: translateY(-1px); }
.ia-prete .ia-sujets span { color: var(--ia-gris); opacity: 1; }
.ia-prete .ia-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-prete .ia-puces li { flex: 0 1 auto; }
.ia-prete .ia-puces button { width: auto; padding: 7px 11px; border-radius: 999px; font-size: 12.5px; color: var(--ia-gris); }
.ia-prete .ia-puces strong { color: var(--ia-encre); margin-right: 3px; }
.ia-messages { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ia-bulle { max-width: 88%; padding: 10px 13px; border-radius: 16px; font: 400 14.5px/1.5 var(--texte, system-ui, -apple-system, "Segoe UI", sans-serif); overflow-wrap: anywhere; }
.ia-bulle.bot { align-self: flex-start; background: var(--ia-carte); border: 1px solid var(--ia-trait); border-bottom-left-radius: 5px; }
.ia-bulle.moi { align-self: flex-end; background: var(--ia-encre); color: var(--ia-carte); border-bottom-right-radius: 5px; white-space: pre-wrap; }
.ia-bulle p { margin: 0 0 8px; } .ia-bulle p:last-child { margin-bottom: 0; }
.assistant .ia-bulle ul { list-style: disc; } .assistant .ia-bulle ol { list-style: decimal; }
.ia-bulle ul, .ia-bulle ol { margin: 4px 0 8px; padding-left: 20px; } .ia-bulle li { margin: 2px 0; }
.ia-bulle a { color: #9a3d12; }
.ia-bulle.attente { display: inline-flex; gap: 5px; padding: 14px 16px; }
.ia-bulle.attente i { width: 7px; height: 7px; border-radius: 50%; background: var(--ia-gris); animation: ia-point 1.1s infinite ease-in-out; }
.ia-bulle.attente i:nth-child(2) { animation-delay: 0.15s; } .ia-bulle.attente i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ia-point { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ia-prete .ia-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--ia-trait); background: var(--ia-carte); }
.ia-form textarea {
  flex: 1; resize: none; max-height: 120px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--ia-trait); background: var(--ia-papier); color: var(--ia-encre); font: 400 15px/1.4 var(--texte, system-ui, -apple-system, "Segoe UI", sans-serif);
}
.ia-form textarea:focus { outline: none; border-color: var(--ia-encre); }
.ia-envoi { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--ia-encre); color: var(--ia-carte); cursor: pointer; flex: none; }
.ia-envoi:disabled { opacity: 0.4; cursor: progress; }
@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  .ia-prete .assistant { top: calc(max(10px, env(safe-area-inset-top)) + 56px); bottom: 10px; max-height: none; width: calc(100% - 20px); }
  .ia-prete .ia-bouton { padding-right: 13px; font-size: 13px; }
}