/* ─────────────────────────────────────────────────────────────
   Suzie — assistante Edouard-O
   Palette sobre, chaleureuse, adaptée au mobilier/décoration.
   Pour changer l'identité : les variables ci-dessous suffisent.
   ───────────────────────────────────────────────────────────── */

:root {
  --fond:          #faf8f5;
  --fond-eleve:    #ffffff;
  --encre:         #1c1a17;
  --encre-douce:   #6b6560;
  --trait:         #e6e0d8;
  --accent:        #2f2a24;
  --accent-clair:  #f2ede6;
  --bulle-visiteur:#efe9e0;
  --whatsapp:      #1f7a4d;
  --rayon:         14px;
  --largeur:       740px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

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

.entete {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--trait);
  background: color-mix(in srgb, var(--fond) 85%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  position: sticky;
  top: 0;
  z-index: 5;
  padding-top: env(safe-area-inset-top);
}

.entete-marque {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.wordmark {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.16em;
  font-weight: 600;
}

.entete-sep {
  width: 1px;
  height: 14px;
  background: var(--trait);
}

.entete-role {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--encre-douce);
  text-transform: uppercase;
}

/* ── Scène ───────────────────────────────────────────────── */

.scene {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.accueil {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 56px 20px 24px;
}

.accueil.parti { display: none; }

.accueil-titre {
  font-family: var(--serif);
  font-size: clamp(38px, 9vw, 54px);
  line-height: 1.05;
  margin: 0 0 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.accueil-texte {
  margin: 0 0 30px;
  font-size: 17px;
  color: var(--encre-douce);
  max-width: 30em;
}

.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.suggestion {
  font: inherit;
  font-size: 14.5px;
  color: var(--encre);
  background: var(--fond-eleve);
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
  text-align: left;
}

.suggestion:hover { background: var(--accent-clair); border-color: #d8cfc2; }
.suggestion:active { transform: translateY(1px); }

/* ── Fil de conversation ─────────────────────────────────── */

.fil {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 20px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tour { display: flex; }
.tour.visiteur { justify-content: flex-end; }

.bulle {
  max-width: 86%;
  padding: 12px 16px;
  border-radius: var(--rayon);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.tour.visiteur .bulle {
  background: var(--bulle-visiteur);
  border-bottom-right-radius: 5px;
}

.tour.suzie .bulle {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

.tour.suzie .bulle p { margin: 0 0 0.85em; }
.tour.suzie .bulle p:last-child { margin-bottom: 0; }
.tour.suzie .bulle ul { margin: 0 0 .85em; padding-left: 1.15em; }
.tour.suzie .bulle li { margin: .2em 0; }
.tour.suzie .bulle strong { font-weight: 600; }

.signature {
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 6px;
}

/* Indicateur d'attente */

.points { display: inline-flex; gap: 5px; padding: 4px 0 2px; }
.points span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #b8afa3;
  animation: pulse 1.15s infinite ease-in-out;
}
.points span:nth-child(2) { animation-delay: .16s; }
.points span:nth-child(3) { animation-delay: .32s; }

@keyframes pulse {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .points span { animation: none; opacity: .55; }
  .scene { scroll-behavior: auto; }
}

.erreur {
  color: #8a3d2c;
  background: #fbf1ee;
  border: 1px solid #f0d9d2;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14.5px;
}

/* ── Zone de saisie ──────────────────────────────────────── */

.composeur-zone {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, var(--fond) 22%);
  padding-bottom: env(safe-area-inset-bottom);
}

.composeur-interne {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 12px 20px 12px;
}

.composeur {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--fond-eleve);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 8px 8px 8px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.composeur:focus-within {
  border-color: #cfc4b4;
  box-shadow: 0 0 0 3px rgba(47, 42, 36, .07);
}

.saisie {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  font: inherit;
  font-size: 16px;           /* 16px : empêche le zoom automatique sur iOS */
  line-height: 1.45;
  color: var(--encre);
  max-height: 168px;
  padding: 6px 0;
}

.saisie::placeholder { color: #a49b90; }

.envoyer {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity .15s ease, transform .1s ease;
}

.envoyer:disabled { opacity: .3; cursor: default; }
.envoyer:not(:disabled):active { transform: translateY(1px); }

/* ── Pied ────────────────────────────────────────────────── */

.pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--whatsapp);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--whatsapp) 28%, var(--trait));
  border-radius: 999px;
  padding: 8px 15px;
  background: var(--fond-eleve);
  transition: background .15s ease;
}

.whatsapp:hover { background: color-mix(in srgb, var(--whatsapp) 7%, var(--fond-eleve)); }
.whatsapp[hidden] { display: none; }

.mention {
  margin: 0;
  font-size: 11.5px;
  color: #9b938a;
  flex: 1 1 auto;
  text-align: right;
  min-width: 180px;
}

/* ── Mobile ──────────────────────────────────────────────── */

@media (max-width: 640px) {
  .accueil { padding: 36px 18px 18px; }
  .accueil-texte { font-size: 16px; margin-bottom: 24px; }
  .suggestion { font-size: 14px; padding: 8px 14px; }
  .fil { padding: 16px 18px 4px; }
  .composeur-interne { padding: 10px 14px; }
  .bulle { max-width: 92%; }
  .mention { text-align: left; }
  .pied { gap: 10px; }
}

@media (max-width: 380px) {
  .suggestions { flex-direction: column; align-items: stretch; }
  .suggestion { text-align: center; }
}