.typing {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 58px;
}

.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #bcaeb6;
  animation: typing 1.15s infinite ease-in-out;
}

.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }

.composer:focus-within {
  border-color: rgba(214, 102, 135, .65);
}

.ai-disclosure {
  display: block;
  padding: 7px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #82777e;
  font-size: .68rem;
  letter-spacing: .04em;
  text-align: center;
}

.composer .generate-image {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e28ca7;
  font-size: .75rem;
  white-space: nowrap;
}

.composer .generate-image span:first-child { font-size: 1rem; }
.image-generator-dialog .data-note { margin-bottom: 24px; }

.chat-dialog[open] {
  height: min(760px, calc(100dvh - 36px));
  max-height: calc(100dvh - 36px);
  overflow: hidden;
}

.chat-profile,
.chat-main,
.messages {
  min-height: 0;
}

.chat-main {
  overflow: hidden;
}

.messages {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

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

@media (prefers-reduced-motion: reduce) {
  .typing i { animation: none; }
}

@media (max-width: 850px) {
  .chat-dialog[open] {
    height: min(760px, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px);
    overflow: hidden;
  }

  .chat-main {
    height: 100%;
    max-height: 100%;
  }
}

/* Galeries alimentées depuis l'administration */
.gallery-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: 190px;
}

.gallery-grid figure {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: #21171e;
}

.gallery-grid figure.gallery-featured {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-grid figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-image-button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.gallery-image-button:focus-visible {
  outline: 2px solid #f6f1ef;
  outline-offset: -4px;
}

.gallery-image-button img {
  transition: transform .2s ease;
}

.gallery-image-button:hover img {
  transform: scale(1.03);
}

.image-lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.image-lightbox[open] {
  display: grid;
  place-items: center;
}

.image-lightbox::backdrop {
  background: rgba(8, 4, 7, .35);
  backdrop-filter: blur(16px);
}

.image-lightbox img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 36px);
  object-fit: contain;
  cursor: default;
}

.gallery-grid figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 28px 12px 10px;
  background: linear-gradient(transparent, rgba(8,4,7,.9));
  color: #f6f1ef;
  font-size: .72rem;
}

@media (max-width: 850px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: 160px;
  }

  .gallery-grid figure.gallery-featured {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 280px;
  }
}

@media (max-width: 520px) {
  .composer .generate-image span:last-child { display: none; }
}

.demo-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 42px;
  padding: 9px 18px;
  background: #f6f1ef;
  color: #24131b;
  font-size: .75rem;
  letter-spacing: .04em;
  text-align: center;
}

.demo-banner button {
  flex: 0 0 auto;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: #9d2148;
  cursor: pointer;
  font-weight: 600;
}

.badge.semi-realiste { background: linear-gradient(90deg, #6247c9, #b42c70); }

.waitlist-section {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 8vw;
  align-items: center;
  margin: 20px 0 80px;
  padding: 48px;
  border: 1px solid rgba(255,255,255,.11);
  background: radial-gradient(circle at 5% 100%, rgba(137,32,63,.28), transparent 45%), #171017;
}

.waitlist-section h2,
.feedback-dialog h2,
.age-dialog h2 {
  margin: 0 0 14px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
}

.waitlist-section p:not(.eyebrow),
.age-dialog > p:not(.eyebrow) { color: #a89fa6; line-height: 1.65; }

.waitlist-form,
.feedback-form { display: grid; gap: 15px; }

.waitlist-form label,
.feedback-form label { display: grid; gap: 7px; color: #c8bdc3; font-size: .82rem; }

.waitlist-form input,
.feedback-form input,
.feedback-form select,
.feedback-form textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.11);
  background: #21171e;
  color: #fff;
  outline: none;
  padding: 13px;
}

.waitlist-form input:focus,
.feedback-form input:focus,
.feedback-form select:focus,
.feedback-form textarea:focus { border-color: rgba(214,102,135,.65); }

.consent,
.choice { grid-template-columns: auto 1fr !important; align-items: start; }
.consent input,
.choice input { width: auto; margin-top: 2px; accent-color: #be315c; }
.waitlist-form small,
.feedback-form small { min-height: 1.2em; color: #df668b; }

footer a { color: inherit; }

.feedback-dialog,
.age-dialog { max-width: 620px; padding: 52px; }
.feedback-dialog[open],
.age-dialog[open] { display: block; }
.feedback-dialog h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.data-note { margin: 0; color: #81777d; font-size: .74rem; line-height: 1.5; }

.age-dialog { max-width: 500px; text-align: center; }
.age-mark { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 22px; border: 1px solid #d4557b; border-radius: 50%; color: #e87899; font: 600 1.5rem "Playfair Display", Georgia, serif; }
.age-dialog .eyebrow { text-align: center; }
.age-dialog .primary { margin-top: 28px; }
.leave { margin-top: 14px; border: 0; background: transparent; color: #8f858b; text-decoration: underline; cursor: pointer; }

@media (max-width: 850px) {
  .demo-banner { align-items: flex-start; justify-content: space-between; text-align: left; }
  .waitlist-section { grid-template-columns: 1fr; gap: 28px; padding: 34px 22px; }
  .feedback-dialog,
  .age-dialog { padding: 46px 22px 28px; }
}