:root {
  --fond: #140d08;
  --fond2: #2a1c12;
  --or1: #f6e3a1;
  --or2: #d4a640;
  --or3: #8a5f1c;
  --or4: #5c3c0e;
  --texte: #f4e9d6;
  --doux: #c9b593;
  --rouge: #c0392b;
  --taille: min(76vw, 52vh, 430px);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(ellipse at 50% 38%, #3a2716 0%, var(--fond2) 32%, var(--fond) 72%) fixed;
  background-color: var(--fond);
  color: var(--texte);
  font-family: "Lato", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
.cache { display: none !important; }

.scene {
  min-height: 100%;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  padding: max(20px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  text-align: center;
}

/* ------------------------------------------------ médaillon doré */
.medaillon {
  position: relative;
  width: var(--taille); height: var(--taille);
  flex: none;
  margin-bottom: 8px;
}
.anneau {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    conic-gradient(from 210deg, var(--or1), var(--or2) 12%, var(--or4) 24%, var(--or2) 36%, var(--or1) 46%,
      var(--or3) 58%, var(--or2) 70%, var(--or1) 80%, var(--or4) 90%, var(--or1));
  box-shadow:
    0 0 0 1px #00000066,
    0 18px 50px #000000aa,
    0 0 70px #d4a64033,
    inset 0 0 0 1px #fff6d040,
    inset 0 3px 6px #fff6d080,
    inset 0 -4px 8px #00000080;
}
/* perles gravées sur l'anneau */
.anneau::before {
  content: ""; position: absolute; inset: 3.2%; border-radius: 50%;
  background: repeating-conic-gradient(#fff2c055 0 1.2deg, transparent 1.2deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 66%, transparent 67%);
          mask: radial-gradient(circle, transparent 62%, #000 63%, #000 66%, transparent 67%);
  opacity: .9;
}
.anneau::after {
  content: ""; position: absolute; inset: 6.4%; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--or4), 0 0 0 3px #fff3c799, inset 0 0 0 2px #00000099;
}
.ecran {
  position: absolute; inset: 7%; border-radius: 50%; overflow: hidden;
  background: #2b2119;
  box-shadow: inset 0 0 24px #000000aa;
  isolation: isolate;
}
.ecran video, .ecran .pose {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .32s ease;
}
.ecran .parle { opacity: 0; }
.ecran .parle.visible { opacity: 1; }
.ecran .pose { z-index: 0; }
#v-ecoute { z-index: 1; }
.ecran .parle { z-index: 2; }
.reflet {
  position: absolute; inset: 0; border-radius: 50%; z-index: 3; pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 18%, #ffffff22, transparent 42%),
    radial-gradient(circle, transparent 62%, #00000066 100%);
}
body[data-etat="accueil"] .ecran video { opacity: 0; }
body[data-etat="accueil"] .pose { filter: sepia(.35) brightness(.8); }
.halo {
  position: absolute; inset: -4%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, #f6d77a55 50%, transparent 70%);
  opacity: var(--niv, 0); transform: scale(calc(1 + var(--niv, 0) * .05));
  transition: opacity .12s linear;
}

/* ------------------------------------------------ textes */
.nom {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600; font-size: clamp(30px, 5vh, 42px); letter-spacing: .04em;
  margin: 2px 0 0;
  background: linear-gradient(180deg, var(--or1), var(--or2) 60%, var(--or3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.statut { margin: 0; min-height: 1.3em; color: var(--doux); font-size: 15px; letter-spacing: .03em; }
.sous-titre {
  margin: 0; max-width: 620px; min-height: 3.2em;
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: clamp(18px, 2.6vh, 22px);
  line-height: 1.35; color: var(--texte); opacity: .92;
}
.sous-titre .question { color: var(--doux); font-size: .9em; }

/* ------------------------------------------------ boutons */
button { font: inherit; cursor: pointer; }
.btn-commencer {
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; border-radius: 999px; padding: 15px 30px 15px 24px; font-size: 18px; font-weight: 700;
  color: #2a1a06; background: linear-gradient(180deg, var(--or1), var(--or2) 70%, var(--or3));
  box-shadow: 0 8px 24px #00000088, 0 0 30px #d4a64033, inset 0 2px 0 #fff8;
  animation: invite 2.4s ease-in-out infinite;
}
.btn-commencer svg { width: 24px; height: 24px; fill: currentColor; }
.btn-commencer:hover { filter: brightness(1.06); }
@keyframes invite { 50% { box-shadow: 0 8px 24px #00000088, 0 0 46px #f6d77a66, inset 0 2px 0 #fff8; } }
.btn-or {
  border: 0; border-radius: 999px; padding: 11px 20px; font-weight: 700; color: #2a1a06;
  background: linear-gradient(180deg, var(--or1), var(--or2));
}
.accueil { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 6px; }
#form-code, .form-question { display: flex; gap: 8px; width: min(100%, 460px); }
#form-code input, .form-question input {
  flex: 1; min-width: 0; border-radius: 999px; border: 1px solid #d4a64066; background: #00000055; color: var(--texte);
  padding: 11px 16px; font-size: 16px; outline: none;
}
#form-code input:focus, .form-question input:focus { border-color: var(--or2); }

.commandes { display: none; align-items: center; gap: 22px; margin-top: 4px; }
body:not([data-etat="accueil"]) .commandes { display: flex; }
body[data-etat="accueil"] .form-question { display: none !important; }
body:not([data-etat="accueil"]) .accueil { display: none; }
.btn-rond {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid #d4a64055;
  background: #ffffff10; color: var(--texte); display: grid; place-items: center; font-size: 22px;
}
.btn-rond svg { width: 26px; height: 26px; fill: currentColor; }
.btn-rond.micro {
  width: 76px; height: 76px; border: 0; color: #2a1a06;
  background: linear-gradient(180deg, var(--or1), var(--or2) 70%, var(--or3));
  box-shadow: 0 0 0 calc(var(--niv, 0) * 14px) #f6d77a40, 0 8px 22px #00000088, inset 0 2px 0 #fff8;
  transition: box-shadow .08s linear;
}
.btn-rond.micro svg { width: 34px; height: 34px; }
body:not([data-etat="parle"]):not([data-etat="reflexion"]) #arreter { opacity: .35; }
body[data-etat="ecoute"] .btn-rond.micro { background: linear-gradient(180deg, #ffefc2, #f0b84a); animation: respire 1.4s ease-in-out infinite; }
@keyframes respire { 50% { transform: scale(1.06); } }
body[data-etat="reflexion"] .btn-rond.micro { opacity: .7; }

@media (max-height: 560px) { :root { --taille: min(60vw, 46vh, 300px); } .sous-titre { min-height: 2.4em; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
body[data-etat="accueil"] .sous-titre, body[data-etat="accueil"] .statut { min-height: 0; }

/* idées de questions, sous le micro */
.idees { display: none; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 560px; margin-top: 4px; }
body:not([data-etat="accueil"]) .idees { display: flex; }
body[data-etat="ecoute"] .idees, body[data-etat="reflexion"] .idees { visibility: hidden; }
.idee {
  border: 1px solid #d4a64055; border-radius: 999px; background: #ffffff0a; color: var(--doux);
  padding: 7px 14px; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 16px; line-height: 1.2;
}
.idee:hover, .idee:focus-visible { color: var(--texte); border-color: var(--or2); outline: none; }