/* Direction artistique : maquettes Figma « Michel Polnareff » (Frame 40) et « Polnarêve » (Frame 47).
   Couleurs relevées dans les exports ; polices = approximations Google Fonts. */
:root {
  --ciel-haut-clair: #b0ac99;
  --ciel-haut: #757568;
  --ciel-haut-sombre: #4c4f4a;
  --ciel-milieu: #c4a686;
  --horizon-peche: #c4927b;
  --horizon-rose: #b27d6e;
  --horizon-mauve: #6b5256;
  --nuit: #090402;
  --sillon-or: #724532;
  --sillon-or-vif: #d9a066;
  --sillon-bleu: #2c3c3f;
  --reve-lilas: #8e94af;
  --reve-corail: #ce8773;
  --reve-lumiere: #dbdbff;
  --blanc: #fbf7f1;
  --blanc-doux: rgba(251, 247, 241, 0.72);
  --contour: rgba(251, 247, 241, 0.45);
  --erreur: #7a1f12;
  --encre: #2b1b18;
  --encre-douce: rgba(43, 27, 24, 0.68);
  --contour-encre: rgba(43, 27, 24, 0.3);
  --script: "Mrs Saint Delafield", "Brush Script MT", cursive;
  --texte: "Work Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--horizon-rose);
  color: var(--blanc);
  font-family: var(--texte);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ---------- Décor : ciel de coucher de soleil prolongé par la dernière teinte du dégradé ---------- */
.decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.ciel {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(196, 166, 134, 0) 0%,
      rgba(196, 166, 134, 0.45) 21%,
      rgba(196, 146, 123, 0.9) 40%,
      var(--horizon-rose) 52%,
      var(--horizon-rose) 100%),
    linear-gradient(100deg, var(--ciel-haut-clair) 0%, var(--ciel-haut) 50%, var(--ciel-haut-sombre) 100%);
}

.ciel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(107, 82, 86, 0.35) 100%);
}

/* ---------- Mise en page ---------- */
.entete {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
  min-height: 64px;
}

.scene {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Portail : écran de l'avatar, comme la porte lumineuse de Polnarêve */
.portail {
  position: relative;
  width: min(72vw, 380px, calc((100dvh - 470px) * 0.75));
  min-width: 200px;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 28px 28px;
  overflow: hidden;
  background: linear-gradient(180deg, #2a2420, var(--nuit));
  border: 1px solid var(--contour);
  box-shadow: 0 0 0 6px rgba(251, 247, 241, 0.04), 0 30px 80px rgba(196, 146, 123, 0.28);
  transition: box-shadow 400ms ease;
}

video, .placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder {
  background:
    radial-gradient(70% 50% at 50% 35%, rgba(219, 219, 255, 0.35), transparent 70%),
    linear-gradient(180deg, var(--reve-lilas), var(--reve-corail) 75%, var(--horizon-mauve));
  opacity: 0.85;
}

.badge {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--contour);
  background: rgba(9, 4, 2, 0.45);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

body[data-etat="reflexion"] .portail { animation: respiration 1.6s ease-in-out infinite; }
body[data-etat="parole"] .portail { box-shadow: 0 0 0 6px rgba(251, 247, 241, 0.06), 0 30px 90px rgba(217, 160, 102, 0.55); }

@keyframes respiration {
  0%, 100% { box-shadow: 0 0 0 6px rgba(251, 247, 241, 0.04), 0 30px 80px rgba(142, 148, 175, 0.25); }
  50% { box-shadow: 0 0 0 10px rgba(251, 247, 241, 0.08), 0 30px 100px rgba(219, 219, 255, 0.45); }
}

/* Signature manuscrite, posée sur le bas du portail comme sur la Frame 40 */
.signature {
  margin: -58px 0 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(54px, 13vw, 84px);
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 18px rgba(9, 4, 2, 0.6);
  position: relative;
  z-index: 1;
}

/* Libellés : petites capitales espacées */
.etat, .libelle {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}

.etat { color: var(--encre); min-height: 1.4em; }
.libelle { color: var(--encre); }

body[data-etat="reflexion"] .etat {
  text-transform: none;
  letter-spacing: 0.02em;
  font-style: italic;
  font-size: 14px;
}

body[data-etat="reflexion"] .etat::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: points 1.2s steps(4, end) infinite;
}

@keyframes points {
  0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; }
}

/* Micro : fine ligne dorée */
.micro { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(60vw, 240px); }

.niveau {
  width: 100%;
  height: 2px;
  background: var(--contour-encre);
  border-radius: 2px;
  overflow: hidden;
}

.niveau-barre {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--sillon-or), var(--encre));
  transition: width 60ms linear;
}

.micro-nom { margin: 0; font-size: 11px; color: var(--encre-douce); text-align: center; }

/* Commandes */
.controles {
  display: grid;
  grid-template-columns: auto;
  justify-items: center;
  gap: 10px;
  margin-top: 4px;
}

.pilule {
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  width: min(70vw, 240px);
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--contour-encre);
  background: rgba(251, 247, 241, 0.35);
  color: var(--encre);
  backdrop-filter: blur(6px);
}

.pilule::placeholder { color: var(--encre-douce); }
.pilule:focus { outline: none; border-color: var(--encre); }

.rond {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease;
}

.rond svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.rond:active { transform: scale(0.96); }
.rond:disabled { opacity: 0.5; cursor: default; }

.rond-plein {
  border: none;
  background: var(--blanc);
  color: var(--nuit);
  box-shadow: 0 0 40px rgba(219, 219, 255, 0.55);
}

.rond-contour {
  width: 52px;
  height: 52px;
  border: 1px solid var(--contour);
  background: rgba(9, 4, 2, 0.25);
  color: var(--blanc);
  backdrop-filter: blur(6px);
}

.statut { margin: 0; font-size: 13px; color: var(--erreur); text-align: center; min-height: 1.2em; }

/* Exemples de questions : bandeau défilant sur mobile, colonne à droite sur grand écran */
.questions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.questions-titre { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--encre-douce); }

.questions-liste {
  list-style: none;
  margin: 0;
  padding: 2px 16px 6px;
  width: calc(100% + 32px);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.questions-liste::-webkit-scrollbar { display: none; }

.questions-liste li {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--contour-encre);
  background: rgba(251, 247, 241, 0.55);
  backdrop-filter: blur(6px);
  font-size: 13px;
  color: var(--encre);
  white-space: nowrap;
}

@media (min-width: 700px) and (max-width: 1099px) {
  .questions-liste { flex-wrap: wrap; justify-content: center; overflow: visible; width: 100%; padding: 0; }
}

@media (min-width: 1100px) {
  .questions {
    position: fixed;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    align-items: flex-end;
    z-index: 1;
  }
  .questions-liste { flex-direction: column; align-items: flex-end; overflow: visible; padding: 0; width: auto; }
  .questions-liste li { white-space: normal; text-align: right; }
  .portail { width: min(72vw, 380px, calc((100dvh - 390px) * 0.75)); }
}

.bandeau {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  max-width: 560px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--encre-douce);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  body[data-etat="reflexion"] .portail, body[data-etat="reflexion"] .etat {
  text-transform: none;
  letter-spacing: 0.02em;
  font-style: italic;
  font-size: 14px;
}

body[data-etat="reflexion"] .etat::after { animation: none; }
}