/* Détecteurs de mensonges — thème enquête, lisible sur grand écran */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  background: #14100c;
  color: #f5efdd;
  min-height: 100vh;
}
.ecran { display: none; padding: 4vh 4vw; min-height: 100vh; }
.ecran.actif { display: block; }
.cache { display: none !important; }

/* ---------- Accueil : titre animé comme le PowerPoint ---------- */
#ecran-accueil { text-align: center; padding-top: 10vh; }
.titre-anime {
  display: flex; align-items: center; justify-content: center; gap: 3vw;
}
.titre-anime h1 {
  font-size: clamp(2.5rem, 8vw, 6rem);
  margin: 0; line-height: 1.1; color: #ffd75e;
  text-shadow: 0 0 18px rgba(255, 215, 94, .35);
}
.titre-anime .mot { display: inline-block; opacity: 0; animation: apparait 1s forwards; }
.titre-anime .mot1 { animation-delay: .3s; }
.titre-anime .mot2 { animation-delay: 1.1s; font-size: .6em; color: #f5efdd; }
.titre-anime .mot3 { animation-delay: 1.9s; }
@keyframes apparait {
  from { opacity: 0; transform: translateY(30px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.detective { object-fit: contain; }
.titre-det1, .titre-det2 {
  height: clamp(260px, 40vh, 540px);
  opacity: 0; animation: apparait 1s forwards;
}
.titre-det1 { animation-delay: 2.7s; animation-name: apparait-flip; }
.titre-det2 { animation-delay: 3.4s; }
@keyframes apparait-flip {
  from { opacity: 0; transform: translateY(30px) scale(-0.9, 0.9); }
  to   { opacity: 1; transform: translateY(0) scale(-1, 1); }
}
.sous-titre { font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-style: italic; margin: 4vh 0; }
.boutons-accueil { display: flex; gap: 2vw; justify-content: center; flex-wrap: wrap; }
.pied { margin-top: 6vh; opacity: .6; }

/* ---------- Boutons ---------- */
button { cursor: pointer; font-family: inherit; border: none; border-radius: 14px; }
.gros {
  font-size: clamp(1.3rem, 3vw, 2rem); padding: 16px 34px;
  background: #ffd75e; color: #241a08; font-weight: bold;
}
.gros.secondaire { background: #3a3226; color: #f5efdd; }
.moyen { font-size: 1.15rem; padding: 12px 22px; background: #3a3226; color: #f5efdd; }
.petit { font-size: 1rem; padding: 9px 16px; background: #2a241b; color: #f5efdd; margin-top: 3vh; }
button.danger { background: #7a2a20; }
button:disabled { opacity: .4; cursor: default; }

/* ---------- Jeu ---------- */
.barre-jeu {
  display: flex; align-items: center; gap: 2vw; flex-wrap: wrap;
  margin-bottom: 3vh;
}
.barre-jeu h2 { margin: 0; font-size: 1.6rem; }
.barre-jeu .petit { margin-top: 0; }
#compteur { font-size: 1.2rem; margin-left: auto; }
.page-participant {
  display: flex; align-items: flex-start; gap: 3vw;
  background: #221c14; border: 2px solid #ffd75e; border-radius: 20px;
  padding: 4vh 3vw; min-height: 46vh;
}
.page-detective { height: clamp(280px, 48vh, 560px); cursor: pointer; flex-shrink: 0; }
.page-detective.flip { transform: scaleX(-1); }
.contenu-participant { flex: 1; }
.nom {
  font-size: clamp(2rem, 5.5vw, 4rem); font-weight: bold; color: #ffd75e;
  margin-bottom: 3vh;
}
.nom.cache-nom { visibility: hidden; }
.affirmations { display: flex; flex-direction: column; gap: 2vh; }
.affirmation {
  font-size: clamp(1.4rem, 3.2vw, 2.4rem); line-height: 1.35;
  background: #2f2618; border-radius: 14px; padding: 14px 20px;
  opacity: 1; transition: opacity .4s;
  display: flex; align-items: center; gap: 14px;
}
.affirmation .texte { flex: 1; }
.votes {
  width: 88px; flex-shrink: 0;
  font-size: 1.3rem; font-weight: bold; text-align: center;
  padding: 8px 6px; border-radius: 10px; border: 2px solid #ffd75e;
  background: #14100c; color: #ffd75e; font-family: inherit;
}
.affirmation.cachee { opacity: 0; }
.affirmation .lettre { color: #ffd75e; font-weight: bold; margin-right: 8px; }
.indice { text-align: center; opacity: .7; margin: 2vh 0; }
.boutons-jeu { display: flex; gap: 2vw; justify-content: center; flex-wrap: wrap; }
.message-vide { font-size: 1.4rem; text-align: center; }

/* ---------- Paramètres ---------- */
.explication { font-size: 1.15rem; line-height: 1.5; max-width: 800px; }
.formulaire {
  display: flex; flex-direction: column; gap: 12px; max-width: 800px;
  background: #221c14; border-radius: 16px; padding: 20px; margin-bottom: 4vh;
}
.formulaire input {
  font-size: 1.15rem; padding: 12px 14px; border-radius: 10px;
  border: 1px solid #574a30; background: #14100c; color: #f5efdd; font-family: inherit;
}
.boutons-form { display: flex; gap: 12px; flex-wrap: wrap; }
.liste { list-style: none; padding: 0; max-width: 800px; }
.liste li {
  display: flex; align-items: center; gap: 12px;
  background: #221c14; border-radius: 12px; padding: 12px 16px; margin-bottom: 10px;
}
.liste .qui { flex: 1; }
.liste .qui b { color: #ffd75e; }
.liste .qui span { opacity: .8; font-size: .95rem; }
.boutons-params { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4vh; }
@media (max-width: 700px) {
  .titre-anime { flex-direction: column; }
  .page-participant { flex-direction: column; align-items: center; text-align: center; }
}