/* ============================================================
   STYLE DU QUIZ (seulement ce qui lui est propre)
   Le reste de la page : /salon/salon.css et /style.css
   ============================================================ */

/* Une manche */
#manche { display: flex; flex-direction: column; align-items: center; gap: 16px; }
#question {
  font-family: var(--police-titre); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800;
  color: var(--fougere-nuit); line-height: 1.2;
}
#media img {
  max-width: 100%; max-height: 38vh; border-radius: 14px;
  border: 4px solid #fff; box-shadow: var(--ombre-forte);
}
/* Bouton pour écouter / réécouter le son de la question */
.bouton-son {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px 10px 14px; border-radius: 999px; font-size: 1.05em;
}
.bouton-son .icone { width: 22px; height: 22px; fill: currentColor; }
.progression-son { /* petite barre qui avance pendant la lecture */
  width: 90px; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(243, 236, 216, 0.3);
}
.progression-son span { display: block; height: 100%; width: 0; background: var(--ocre-pale); }
.bouton-son.en-lecture .icone { animation: pulse 0.8s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(0.8); opacity: 0.6; } }

.chrono-zone { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 480px; }
#barreTemps { flex: 1; height: 10px; border-radius: 999px; background: var(--beige-fonce); overflow: hidden; }
#barreTemps span { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--fougere), var(--mousse)); }
#barreTemps.urgent span { background: linear-gradient(90deg, var(--rouge), #d9774f); }
#chrono { font-weight: 800; font-size: 1.4em; color: var(--fougere-fonce); min-width: 52px; font-variant-numeric: tabular-nums; }
#barreTemps.urgent + #chrono { color: var(--rouge); }

.champ-reponse {
  display: flex; gap: 8px; width: 100%; max-width: 480px;
  padding: 6px; border-radius: 999px; background: #fff;
  border: 2px solid var(--beige-fonce); box-shadow: var(--ombre);
}
.champ-reponse:focus-within { border-color: var(--fougere); }
.champ-reponse input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 1.15em; padding: 8px 14px; }
.champ-reponse input:focus { box-shadow: none; }
.secoue { animation: secoue 0.35s; }
@keyframes secoue {
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
#message { font-weight: 700; min-height: 1.5em; }
.message-juste { color: var(--fougere); }
.message-faux { color: var(--rouge); }

#revelation {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 28px; border-radius: 14px;
  background: var(--ocre-pale); border: 2px solid var(--ocre);
  animation: apparait 0.3s ease-out;
}
#revelation small { color: #7a5813; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
#revelation strong { font-family: var(--police-titre); font-size: 1.6em; color: var(--fougere-nuit); }
.credit-question { font-size: 0.82em; font-style: italic; color: #7a5813; margin-top: 2px; }

/* Faire appel */
.zone-appel {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-width: 480px; padding: 14px 18px; border-radius: 14px;
  background: var(--beige-clair); border: 1px dashed var(--fougere); font-size: 0.95em;
}
.zone-appel .puce span { font-style: italic; }
#messageAppel:empty { display: none; }

/* ---------- Petit écran (téléphone) ---------- */
@media (max-width: 800px) {
  #manche { gap: 12px; }
  #media img { max-height: 30vh; }
}

/* La question, posée dans sa fenêtre */
.fenetre-question {
  width: 100%; max-width: 680px; padding: 18px 24px; border-radius: 18px;
  background: #fff; border: 2px solid var(--beige-fonce); box-shadow: var(--ombre);
}
/* Le texte à reconnaître (paroles, citation…), sous la fenêtre */
.contenu-question {
  margin: 0; max-width: 640px;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem); font-style: italic; line-height: 1.5;
  color: var(--fougere-fonce); white-space: pre-line; overflow-wrap: anywhere;
}