/* Assistant de discussion ARDOIZA : style du widget (public/assistant.js). */
/* Charte : braise #b8471f, ardoise #172a30, crème #fcf7f3, filet #e2d8c6, Inter Tight. Même langage que les écrans de connexion : */
/* coins à 16 px, champs blancs bordés avec icône, bouton orange, ombres douces. */
/* Tout est préfixé par .ardz-assistant : la feuille est aussi chargée par la vitrine, elle ne doit rien y changer. */

.ardz-assistant {
  --ardz-ember: #c45122;
  --ardz-ember-d: #a83f18;
  --ardz-ink: #172a30;
  --ardz-soft: #4d5a5e;
  --ardz-faint: #6b7679;
  --ardz-cream: #faf7f3;
  --ardz-beige: #ece3d3;
  --ardz-sand: #f1e4d1;
  --ardz-line: #ddd5cc;
  --ardz-err: #a3271b;
  --ardz-radius: 14px;
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.45; color: var(--ardz-ink);
  pointer-events: none;
}
.ardz-assistant > * { pointer-events: auto; }
.ardz-assistant *, .ardz-assistant *::before, .ardz-assistant *::after { box-sizing: border-box; }
.ardz-assistant [hidden] { display: none !important; }
.ardz-assistant button, .ardz-assistant input, .ardz-assistant textarea { font: inherit; color: inherit; }
.ardz-assistant :focus-visible { outline: 3px solid var(--ardz-ember); outline-offset: 2px; }

.ardz-assistant__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Bulle ---------- */
.ardz-assistant .ardz-assistant__toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 22px 0 18px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ardz-ember); color: #fff; font-weight: 700;
  box-shadow: 0 16px 28px -14px rgba(154, 58, 24, .9);
}
.ardz-assistant .ardz-assistant__toggle:hover { background: var(--ardz-ember-d); }
.ardz-assistant .ardz-assistant__toggle:focus-visible { outline-color: var(--ardz-ink); }

/* ---------- Panneau ---------- */
.ardz-assistant__panel {
  display: flex; flex-direction: column;
  width: 400px; max-width: calc(100vw - 40px);
  height: 600px; max-height: calc(100vh - 110px);
  background: #fff; border: 1px solid var(--ardz-line); border-radius: 24px; overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(23, 42, 48, .5), 0 0 0 1px rgba(23, 42, 48, .03);
}
.ardz-assistant__header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 12px 14px 18px; background: var(--ardz-ink);
}
/* Pastille corail « en ligne » devant le titre (palette sans vert du 21/09/2026). */
.ardz-assistant .ardz-assistant__title {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: "Orbitron", "Inter Tight", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
.ardz-assistant .ardz-assistant__title::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: #e8a98c; box-shadow: 0 0 0 3px rgba(232, 169, 140, .3);
}
.ardz-assistant__header-actions { display: flex; align-items: center; gap: 4px; }
.ardz-assistant .ardz-assistant__reset, .ardz-assistant .ardz-assistant__close {
  border: 0; background: transparent; color: #fff; cursor: pointer; border-radius: 10px;
  min-height: 38px; padding: 0 12px; font-size: 13.5px; font-weight: 500;
}
.ardz-assistant .ardz-assistant__close { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 0; }
.ardz-assistant .ardz-assistant__reset:hover, .ardz-assistant .ardz-assistant__close:hover { background: rgba(255, 255, 255, .14); }
.ardz-assistant__header :focus-visible { outline-color: #fff; }

.ardz-assistant__messages {
  flex: 1 1 0; min-height: 72px; overflow-y: auto; padding: 18px 16px 12px;
  display: flex; flex-direction: column; gap: 10px; background: var(--ardz-cream);
  scrollbar-color: #cdbfa5 transparent; scrollbar-width: thin;
}
.ardz-assistant__messages:focus-visible { outline-offset: -3px; }
.ardz-assistant__message { display: flex; max-width: 86%; }
.ardz-assistant__message--user { align-self: flex-end; }
.ardz-assistant__message--bot { align-self: flex-start; }
.ardz-assistant .ardz-assistant__bubble {
  margin: 0; padding: 12px 16px; border-radius: 18px 18px 18px 6px; white-space: pre-wrap; overflow-wrap: anywhere;
  background: #fff; border: 1px solid var(--ardz-line); color: var(--ardz-ink);
  box-shadow: 0 8px 18px -14px rgba(23, 42, 48, .35);
}
.ardz-assistant .ardz-assistant__message--user .ardz-assistant__bubble {
  background: var(--ardz-ink); border-color: var(--ardz-ink); color: #fff; border-radius: 18px 18px 6px 18px; box-shadow: none;
}
.ardz-assistant .ardz-assistant__bubble a { color: var(--ardz-ember-d); font-weight: 600; text-decoration: underline; }

.ardz-assistant .ardz-assistant__status { margin: 0; padding: 8px 18px 0; font-size: 13px; color: var(--ardz-faint); font-style: italic; }

.ardz-assistant__suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 0; max-height: 140px; overflow-y: auto; flex: 0 0 auto; }
.ardz-assistant .ardz-assistant__suggestion {
  border: 1px solid var(--ardz-line); background: #fff; color: var(--ardz-ink); cursor: pointer;
  border-radius: 999px; padding: 8px 14px; font-size: 13.5px; font-weight: 500; text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.ardz-assistant .ardz-assistant__suggestion:hover { border-color: var(--ardz-ember); background: #fff7f3; color: var(--ardz-ember-d); }

/* ---------- Passation ---------- */
/* Ne se comprime jamais : sinon le bouton « Ouvrir une demande » se retrouve écrasé contre le pied du panneau.
   C'est la zone des messages qui cède la place. */
.ardz-assistant__handoff { padding: 12px 16px 2px; overflow-y: auto; flex: 0 0 auto; max-height: 60%; }
.ardz-assistant .ardz-assistant__handoff-button {
  display: block; width: 100%; text-align: center; text-decoration: none; cursor: pointer;
  border: 0; background: var(--ardz-ink); color: #fff;
  border-radius: var(--ardz-radius); padding: 13px 16px; font-weight: 700;
  box-shadow: 0 14px 24px -16px rgba(23, 42, 48, .8);
}
.ardz-assistant .ardz-assistant__handoff-button:hover { background: #0f1a1e; color: #fff; }
.ardz-assistant .ardz-assistant__contact-title { margin: 0 0 10px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.ardz-assistant__field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.ardz-assistant .ardz-assistant__label { font-size: 13px; font-weight: 600; color: var(--ardz-faint); padding-left: 4px; }
.ardz-assistant .ardz-assistant__control, .ardz-assistant .ardz-assistant__input {
  width: 100%; border: 1px solid var(--ardz-line); border-radius: var(--ardz-radius); padding: 12px 16px; background: #fff; color: var(--ardz-ink);
  box-shadow: 0 1px 2px rgba(23, 42, 48, .04); transition: border-color .2s ease, box-shadow .2s ease;
}
.ardz-assistant .ardz-assistant__control:hover, .ardz-assistant .ardz-assistant__input:hover { border-color: #c9bca4; }
.ardz-assistant .ardz-assistant__control:focus-visible, .ardz-assistant .ardz-assistant__input:focus-visible {
  outline: 0; border-color: var(--ardz-ink); box-shadow: 0 6px 18px -12px rgba(23, 42, 48, .45);
}
.ardz-assistant .ardz-assistant__control::placeholder, .ardz-assistant .ardz-assistant__input::placeholder { color: #7d878a; opacity: 1; }
.ardz-assistant__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ardz-soft); margin-bottom: 10px; padding-left: 4px; }
.ardz-assistant__consent input { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--ardz-ember); border-radius: 6px; }
.ardz-assistant__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ardz-assistant .ardz-assistant__error { margin: 0 0 8px; color: var(--ardz-err); font-size: 13.5px; font-weight: 600; }
.ardz-assistant__contact-actions { display: flex; align-items: center; gap: 12px; }
.ardz-assistant .ardz-assistant__link { border: 0; background: transparent; color: var(--ardz-soft); text-decoration: underline; cursor: pointer; padding: 6px; }

/* ---------- Saisie : un seul champ arrondi, le bouton d'envoi rond posé dedans ---------- */
.ardz-assistant__form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px 6px; flex: 0 0 auto; }
.ardz-assistant .ardz-assistant__input { flex: 1 1 auto; min-height: 50px; max-height: 120px; resize: none; padding: 13px 16px; }
.ardz-assistant .ardz-assistant__send {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 18px; border: 0; border-radius: var(--ardz-radius); cursor: pointer;
  background: var(--ardz-ember); color: #fff; font-weight: 700;
  box-shadow: 0 12px 22px -14px rgba(154, 58, 24, .9); transition: background .15s ease;
}
.ardz-assistant .ardz-assistant__send::after {
  content: ""; width: 16px; height: 16px; flex: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.ardz-assistant .ardz-assistant__send:hover { background: var(--ardz-ember-d); }
.ardz-assistant .ardz-assistant__send:disabled { opacity: .55; cursor: default; }
.ardz-assistant .ardz-assistant__note { margin: 0; padding: 2px 18px 12px; font-size: 12px; color: var(--ardz-faint); flex: 0 0 auto; }

/* ---------- Petits écrans : la bulle devient un rond, le panneau une feuille en bas d'écran ---------- */
@media (max-width: 640px) {
  .ardz-assistant { right: 12px; bottom: 12px; }
  .ardz-assistant .ardz-assistant__toggle { width: 56px; height: 56px; min-height: 56px; padding: 0; justify-content: center; }
  .ardz-assistant__toggle-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .ardz-assistant--open { left: 0; right: 0; bottom: 0; align-items: stretch; }
  .ardz-assistant--open .ardz-assistant__toggle { display: none; }
  .ardz-assistant--open .ardz-assistant__panel {
    width: 100%; max-width: none; height: 82vh; max-height: 82vh;
    border-radius: 24px 24px 0 0; border-bottom: 0;
  }
  .ardz-assistant .ardz-assistant__send { padding: 0 14px; }
  /* Place réservée sous le contenu : en bas de page, la bulle ne recouvre aucun bouton d'action. */
  body.ardz-assistant-present { padding-bottom: 80px; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ardz-open { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes ardz-bubble { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes ardz-pulse { 0%, 100% { box-shadow: 0 16px 28px -14px rgba(154, 58, 24, .9), 0 0 0 0 rgba(184, 71, 31, .45); } 60% { box-shadow: 0 16px 28px -14px rgba(154, 58, 24, .9), 0 0 0 14px rgba(184, 71, 31, 0); } }
  .ardz-assistant .ardz-assistant__toggle { transition: background-color .15s ease, transform .15s ease; animation: ardz-pulse 2.4s ease-out 1.5s 2; }
  .ardz-assistant .ardz-assistant__toggle:hover { transform: translateY(-1px); }
  .ardz-assistant--open .ardz-assistant__panel { transform-origin: 100% 100%; animation: ardz-open .3s cubic-bezier(.2, .7, .2, 1) both; }
  .ardz-assistant__message { animation: ardz-bubble .28s cubic-bezier(.2, .7, .2, 1) both; }
  .ardz-assistant .ardz-assistant__suggestion:hover { transform: translateY(-1px); }
  .ardz-assistant .ardz-assistant__suggestion { transition: border-color .15s ease, background .15s ease, transform .15s ease; }
  .ardz-assistant .ardz-assistant__send:hover::after { transform: translateX(3px); }
  .ardz-assistant .ardz-assistant__send::after { transition: transform .2s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .ardz-assistant .ardz-assistant__suggestion, .ardz-assistant .ardz-assistant__control, .ardz-assistant .ardz-assistant__input, .ardz-assistant .ardz-assistant__send { transition: none; }
}

@media print {
  .ardz-assistant { display: none !important; }
}

/* Réserve sous le contenu : la bulle ne recouvre ni un compteur, ni un bouton en bas de page. */
body:has(.ardz-assistant) .content, body:has(.ardz-assistant) .public { padding-bottom: 84px; }

/* =============================================================
   Revue design 2 du 20/09/2026.
   - Espace client connecté (page avec menu latéral) : la bulle n'est plus un second bouton orange sur chaque écran
     (charte, sections 5 et 9). Elle passe en marine, coins 14 px comme tous les boutons ; l'orange reste à l'action
     principale de la page. Les écrans d'entrée et la vitrine gardent la bulle orange validée.
   - Saisie : le champ et le bouton « Envoyer » ont la même hauteur (50 px) et la même ligne de base ; le champ
     grandit avec le texte là où le navigateur le permet (field-sizing), il défile ailleurs.
   - Cibles tactiles de 44 px sous 640 px : « Recommencer », fermeture, suggestions, « Annuler ».
   ============================================================= */
body[data-base] .ardz-assistant .ardz-assistant__toggle {
  background: var(--ardz-ink); color: #fff; border-radius: var(--ardz-radius);
  /* Liseré clair : la bulle reste lisible quand elle passe devant l'ardoise ou le pied de page, eux aussi marine. */
  border: 1.5px solid rgba(255, 255, 255, .55);
  box-shadow: 0 16px 28px -16px rgba(23, 42, 48, .8); animation: none;
}
body[data-base] .ardz-assistant .ardz-assistant__toggle:hover { background: #0f1a1e; }
body[data-base] .ardz-assistant .ardz-assistant__toggle:focus-visible { outline-color: var(--ardz-ember); }
/* Sous 1600 px de large, la bulle avec son libellé (environ 180 px) passait devant le bord droit des champs, des prix et
   des boutons de la colonne de contenu (1240 px). Elle se réduit à son pictogramme (52 px) : elle tient alors dans la
   marge, à droite du contenu, et ne masque plus rien. Le libellé reste lu par les lecteurs d'écran. */
@media (min-width: 641px) and (max-width: 1599px) {
  body[data-base] .ardz-assistant .ardz-assistant__toggle { width: 52px; padding: 0; justify-content: center; }
  body[data-base] .ardz-assistant__toggle-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}
.ardz-assistant__form { align-items: flex-end; }
.ardz-assistant .ardz-assistant__input { height: 50px; field-sizing: content; line-height: 1.45; }
@media (max-width: 640px) {
  .ardz-assistant .ardz-assistant__reset, .ardz-assistant .ardz-assistant__close { min-height: 44px; }
  .ardz-assistant .ardz-assistant__close { min-width: 44px; }
  .ardz-assistant .ardz-assistant__suggestion { min-height: 44px; }
  .ardz-assistant .ardz-assistant__link { min-height: 44px; }
  .ardz-assistant .ardz-assistant__title { font-size: 12px; }
}

/* ---------- Revue design 2 du 20/09/2026, relecture ---------- */
/* Tout l'espace client (pages connectées ET écrans d'entrée, reconnus à body[data-base]) : bulle marine, un seul bouton
   orange par écran (charte, sections 5 et 9). La vitrine, qui charge aussi cette feuille, n'a pas cet attribut : rien
   n'y change. « Envoyer » passe en marine lui aussi : panneau ouvert, l'orange reste à l'action de la page. */
body[data-base] .ardz-assistant .ardz-assistant__send { background: var(--ardz-ink); box-shadow: 0 12px 22px -14px rgba(23, 42, 48, .8); }
body[data-base] .ardz-assistant .ardz-assistant__send:hover { background: #0f1a1e; }
/* Téléphone : la bulle ne flotte plus sur le contenu (elle masquait la fin d'un champ, d'une aide, d'un lien du pied).
   Elle devient un pictogramme de 44 px dans la barre du haut, à droite, à la place que style.css lui réserve
   (padding-right de .topbar__inner). Panneau ouvert, l'assistant redevient la feuille du bas d'écran. */
@media (max-width: 640px) {
  body[data-base] .ardz-assistant:not(.ardz-assistant--open) { top: 7px; bottom: auto; right: 16px; }
  body[data-base] .ardz-assistant .ardz-assistant__toggle { width: 44px; height: 44px; min-height: 44px; box-shadow: none; border-color: transparent; }
  body[data-base].ardz-assistant-present { padding-bottom: 0; }
}