/* Marshall · assistant du site : une seule feuille pour toutes les pages (avant css/marshall-bot.css, qui l'habille).
   Reprise exacte du chat de l'accueil (index.html) + module « Créer un ticket ». */
/* ——— Marshall : habillage marque (Fredoka + orange bonbon) ——— */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700;900&family=Nunito:wght@400;600;700&display=swap');
.mcd-chat, .mcd-chat * { box-sizing: border-box; }

.mcd-chat {
  --orange: #F3852B;
  --orange-clair: #FF9C46;
  --orange-fonce: #C7620E;
  --encre: #3B2A1C;
  --gris: #A08A76;
  --creme: #FFF8EF;
  --creme-2: #FFF1E2;
  font-family: 'Nunito', system-ui, sans-serif;
  position: fixed;
  left: clamp(16px, 4vw, 48px);
  top: calc(clamp(14px, 2.4vw, 26px) + 66px);
  z-index: 9990;
}

/* Lanceur */
.mcd-lanceur {
  width: 62px; height: 62px; padding: 0;
  border: none; border-radius: 50%; overflow: hidden;
  background: linear-gradient(to bottom, #ffb066, #ef7d21);
  cursor: pointer; font-size: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 6px 0 #b8520f, 0 14px 24px rgba(150,62,22,.24);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mcd-lanceur img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; transform: scale(1.55); transform-origin: 50% 8%; display: block; }
.mcd-lanceur:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 8px 0 #b8520f, 0 18px 28px rgba(150,62,22,.28); }
.mcd-lanceur:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 3px 0 #b8520f; }
.mcd-lanceur:focus-visible { outline: 3px solid var(--orange-fonce); outline-offset: 3px; }

/* Fenêtre */
.mcd-fenetre {
  display: none;
  position: absolute; left: 0; top: 78px;
  width: 392px; max-width: calc(100vw - 32px);
  height: 540px; max-height: calc(100vh - 190px);
  background: var(--creme);
  border-radius: 30px;
  box-shadow: 0 24px 48px rgba(150,62,22,.26), inset 0 2px 0 rgba(255,255,255,.9);
  overflow: hidden;
  flex-direction: column;
}
.mcd-chat[data-ouvert="true"] .mcd-fenetre { display: flex; }

.mcd-entete {
  background: linear-gradient(to bottom, var(--orange-clair), var(--orange));
  box-shadow: 0 4px 0 var(--orange-fonce);
  color: #FFF7DB;
  padding: 18px 20px;
  display: flex; align-items: center; gap: 13px;
}
.mcd-avatar {
  width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden;
  background: linear-gradient(to bottom, #ffb066, #ef7d21);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 3px 6px rgba(150,62,22,.28);
}
.mcd-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; transform: scale(1.55); transform-origin: 50% 8%; display: block; }
.mcd-entete h2 { margin: 0; font-family: 'Fredoka', sans-serif; font-weight: 900; font-size: 19px; line-height: 1.1; color: #FFF7DB; text-shadow: 0 2px 0 rgba(150,70,0,.32); }
.mcd-entete p  { margin: 3px 0 0; font-size: 12.5px; font-weight: 600; color: #FFEFDA; }
.mcd-fermer {
  margin-left: auto; width: 32px; height: 32px; flex: none;
  background: rgba(255,255,255,.24); border: none; border-radius: 50%;
  color: #FFF7DB; font-size: 17px; line-height: 1; cursor: pointer;
}
.mcd-fermer:hover { background: rgba(255,255,255,.4); }
.mcd-fermer:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.mcd-fil {
  flex: 1; overflow-y: auto;
  padding: 20px 18px; display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, var(--creme), var(--creme-2));
}

.mcd-bulle {
  max-width: 80%;
  padding: 12px 15px;
  font-size: 14.5px; line-height: 1.5;
  white-space: pre-wrap; word-wrap: break-word;
}
.mcd-bulle.assistant {
  align-self: flex-start;
  background: #fff; color: var(--encre);
  border-radius: 20px 20px 20px 6px;
  box-shadow: 0 3px 0 rgba(199,98,14,.16), 0 8px 18px rgba(150,62,22,.12);
}
.mcd-bulle.visiteur {
  align-self: flex-end; font-weight: 600;
  background: linear-gradient(to bottom, var(--orange-clair), var(--orange));
  color: #FFF7DB;
  border-radius: 20px 20px 6px 20px;
  box-shadow: 0 3px 0 var(--orange-fonce);
}
.mcd-bulle.erreur { align-self: center; background: #FDECEC; color: #92312F; font-size: 13px; border-radius: 16px; }
.mcd-bulle a { color: var(--orange-fonce); }

/* Indicateur d'écriture */
.mcd-points { display: inline-flex; gap: 5px; align-items: center; height: 9px; }
.mcd-points i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
  animation: mcd-saut 1.2s infinite ease-in-out;
}
.mcd-points i:nth-child(2) { animation-delay: .15s; }
.mcd-points i:nth-child(3) { animation-delay: .3s; }
@keyframes mcd-saut { 0%,60%,100% { transform: translateY(0); opacity:.45 } 30% { transform: translateY(-5px); opacity:1 } }

/* Suggestions */
.mcd-suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 14px; background: var(--creme-2); }
.mcd-suggestions button {
  font-family: 'Nunito', sans-serif; font-weight: 700;
  background: #fff; border: none; color: var(--orange-fonce);
  border-radius: 999px; padding: 8px 14px; font-size: 12.5px; cursor: pointer;
  box-shadow: 0 3px 0 rgba(199,98,14,.2);
  transition: transform .16s ease, background .16s ease;
}
.mcd-suggestions button:hover { background: #fff6ec; transform: translateY(-1px); }
.mcd-suggestions button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(199,98,14,.2); }

/* Saisie */
.mcd-saisie { display: flex; gap: 10px; align-items: center; padding: 14px 16px 10px; background: #fff; box-shadow: 0 -3px 0 rgba(199,98,14,.1); }
.mcd-saisie textarea {
  flex: 1; resize: none; border: none; border-radius: 24px;
  background: #FFF3E6; box-shadow: inset 0 2px 4px rgba(199,98,14,.14);
  padding: 13px 17px; font: inherit; font-size: 14.5px; max-height: 90px;
  color: var(--encre);
}
.mcd-saisie textarea::placeholder { color: var(--gris); }
.mcd-saisie textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.mcd-envoyer {
  width: 50px; height: 50px; flex: none; padding: 0;
  border: none; border-radius: 18px;
  background: linear-gradient(to bottom, var(--orange-clair), var(--orange));
  box-shadow: 0 4px 0 var(--orange-fonce), 0 8px 16px rgba(150,62,22,.22);
  color: #FFF7E6; cursor: pointer;
  display: grid; place-items: center;
  transition: transform .16s ease, box-shadow .16s ease;
}
.mcd-envoyer:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--orange-fonce), 0 12px 20px rgba(150,62,22,.26); }
.mcd-envoyer:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--orange-fonce); }
.mcd-envoyer:disabled { opacity: .45; cursor: default; transform: none; }

.mcd-mention { text-align: center; font-size: 11.5px; color: var(--gris); padding: 6px 16px 14px; margin: 0; background: #fff; }

@media (max-width: 520px) {
  .mcd-chat { left: 12px; }
  .mcd-fenetre { width: calc(100vw - 24px); border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .mcd-lanceur, .mcd-points i, .mcd-envoyer, .mcd-suggestions button { transition: none; animation: none; }
}

/* Position (comme sur l'accueil) : Marshall en haut à gauche, la conversation s'ouvre vers le bas.
   Sans !important : une page peut la régler après coup (paiement, qui-suis-je). */
.mcd-chat{left:var(--pad,24px);right:auto;top:82px;bottom:auto;z-index:59}
.mcd-chat[data-ouvert="true"]{z-index:999999}
.mcd-fenetre{left:0;right:auto;bottom:auto;top:72px;max-height:calc(100vh - 170px)}
@media (max-width:520px){.mcd-chat{left:12px;top:86px}.mcd-lanceur{width:52px;height:52px}.mcd-fenetre{top:62px;width:calc(100vw - 24px)}
  /* Clavier ouvert : la conversation rétrécit au-dessus du clavier au lieu de faire remonter la page */
  .mcd-chat[data-ouvert] .mcd-fenetre{height:min(540px,calc(var(--mcd-vh,100dvh) - 146px));max-height:none}
  .mcd-chat.clavier .mcd-mention,.mcd-chat.clavier .mcd-suggestions{display:none}
  .mcd-chat .mcd-saisie textarea{font-size:16px}   /* 16 px : le téléphone ne zoome plus en touchant le champ */
  html.chat-fige,html.chat-fige body{overflow:hidden;overscroll-behavior:none}}

/* Module « Créer un ticket » */
.mcd-tk{align-self:stretch;background:#fff;border:2px solid #F3852B;border-radius:16px;padding:14px;display:grid;gap:9px;font-size:14px;color:#3d1a00}
.mcd-tk h3{margin:0;font:900 20px/1 Archivo,system-ui,sans-serif;font-stretch:62%;text-transform:uppercase;color:#F3852B}
.mcd-tk p{margin:0}
.mcd-tk .tk-cats{display:flex;flex-wrap:wrap;gap:6px}
.mcd-tk .tk-cats button{border:1.5px solid #F3852B;background:#fff;color:#C7620E;border-radius:999px;padding:6px 10px;font:700 13px Archivo,system-ui,sans-serif;cursor:pointer}
.mcd-tk .tk-cats button[aria-pressed="true"]{background:#F3852B;color:#fff}
.mcd-tk input,.mcd-tk textarea{width:100%;box-sizing:border-box;border:1.5px solid #f0d6bd;border-radius:10px;padding:8px 10px;font:600 14px Archivo,system-ui,sans-serif;color:#3d1a00;background:#fffaf4}
.mcd-tk textarea{min-height:76px;resize:vertical}
.mcd-tk input:focus,.mcd-tk textarea:focus{outline:none;border-color:#F3852B}
.mcd-tk .tk-ok{border:0;border-radius:12px;background:#F3852B;color:#fff;padding:10px;font:900 16px Archivo,system-ui,sans-serif;font-stretch:62%;text-transform:uppercase;cursor:pointer}
.mcd-tk .tk-ok:disabled{opacity:.5}
.mcd-tk a.tk-ok{display:block;text-align:center;text-decoration:none}
.mcd-tk .tk-petit,.mcd-tk .tk-qui{font-size:12.5px;color:#8a6a4a}
.mcd-tk .tk-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mcd-tk .tk-liste li{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;border-bottom:1px dashed #f0d6bd;padding-bottom:6px}
.mcd-tk .tk-n{font-weight:900;color:#F3852B}.mcd-tk .tk-s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcd-tk .tk-liste li{cursor:pointer}.mcd-tk .tk-liste li:hover .tk-s{text-decoration:underline}
.mcd-tk .tk-sujet{font-weight:800}
.mcd-tk .tk-fil{display:grid;gap:8px;max-height:260px;overflow-y:auto}
.mcd-tk .tk-msg{padding:8px 10px;border-radius:12px;background:#fff6ec;max-width:92%}
.mcd-tk .tk-msg.equipe{background:#e8f5fc;justify-self:start}.mcd-tk .tk-msg.client{justify-self:end}
.mcd-tk .tk-msg small{display:block;font-size:11px;font-weight:700;color:#8a6a4a}.mcd-tk .tk-msg p{margin:2px 0 0;white-space:pre-wrap}
.mcd-tk .tk-rep{display:grid;gap:8px}
.mcd-tk .tk-liste .tk-e{grid-column:2}
.mcd-tk .tk-e{font-size:12px;font-weight:700;color:#8a6a4a}.mcd-tk .tk-e[data-statut="resolu"]{color:#1f7a43}.mcd-tk .tk-e[data-statut="attente-client"]{color:#d93f3f}
.mcd-tk .tk-err{color:#d93f3f;font-weight:700}
.mcd-tk .tk-piege{position:absolute;left:-9999px}
.mcd-tk.fait{border-color:#1f7a43;text-align:center}
.mcd-tk.fait h3{color:#1f7a43}
.mcd-tk .tk-num{display:inline-block;margin:4px auto;background:#F3852B;color:#fff;border-radius:10px;padding:6px 14px;font:900 28px Archivo,system-ui,sans-serif;font-stretch:62%;letter-spacing:.04em}
.mcd-tk-btn{border:1.5px solid currentColor;background:transparent;color:inherit;border-radius:999px;padding:4px 10px;font:800 12px Archivo,system-ui,sans-serif;cursor:pointer;margin-left:auto;margin-right:6px;white-space:nowrap}
