/* ═══════════════════════════════════════════════════════════════════
   L'enquête du jour
   ═══════════════════════════════════════════════════════════════════ */

.enquete {
  margin-top: var(--nav-height, 70px);   /* l'en-tête du site est fixe */
  padding-block: var(--space-8, 2rem) var(--space-12, 3rem);
}

.enquete [hidden] { display: none !important; }

.enquete__header { margin-bottom: var(--space-6, 1.5rem); }

.enquete__title {
  font-size: var(--font-3xl, 2rem);
  margin-bottom: var(--space-2, 0.5rem);
}

.enquete__sub {
  color: var(--clr-text-secondary, #52504C);
  font-size: var(--font-base, 1rem);
}

.enquete h2 {
  font-size: var(--font-lg, 1.25rem);
  margin-bottom: var(--space-3, 0.75rem);
}

/* ─── Bandeau d'état (série, essais, connexion) ───────────────────── */

.enquete__etat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem) var(--space-5, 1.25rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  margin-bottom: var(--space-6, 1.5rem);
  background: var(--clr-bg-secondary, #fff);
  border: 1px solid var(--clr-border, #D4CCBF);
  border-radius: var(--radius-base, 8px);
  font-size: var(--font-sm, 0.875rem);
  color: var(--clr-text-secondary, #52504C);
}

.enquete__etat strong { color: var(--clr-text, #1A1A1A); }
.enquete__etat a { color: var(--clr-primary, #1B4332); text-decoration: underline; }

/* ─── Mise en page : documents à gauche, arbre à droite ───────────── */

.enquete__jeu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8, 2rem);
}

@media (min-width: 1100px) {
  .enquete__jeu { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .enquete__plateau { position: sticky; top: calc(var(--nav-height, 70px) + var(--space-4, 1rem)); }
}

/* ─── Documents ────────────────────────────────────────────────────── */

.enq-doc {
  margin-bottom: var(--space-4, 1rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  background: var(--clr-bg-secondary, #fff);
  border: 1px solid var(--clr-border, #D4CCBF);
  border-left: 4px solid var(--clr-accent, #C7901E);
  border-radius: var(--radius-base, 8px);
}

.enq-doc__titre {
  font-size: var(--font-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-text-muted, #8A7E73);
  margin-bottom: var(--space-2, 0.5rem);
}

.enq-doc__texte {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--font-base, 1rem);
  line-height: 1.65;
  color: var(--clr-text, #1A1A1A);
  white-space: pre-line;
}

.enquete__lexique,
.enquete__regles {
  margin-top: var(--space-4, 1rem);
  font-size: var(--font-sm, 0.875rem);
  color: var(--clr-text-secondary, #52504C);
}

.enquete__lexique summary,
.enquete__regles summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--clr-text, #1A1A1A);
}

.enquete__lexique dl { margin-top: var(--space-3, 0.75rem); }
.enquete__lexique dt { font-weight: 600; color: var(--clr-text, #1A1A1A); }
.enquete__lexique dd { margin: 0 0 var(--space-2, 0.5rem); }

.enquete__regles { margin-top: var(--space-8, 2rem); }
.enquete__regles ul { margin-top: var(--space-3, 0.75rem); padding-left: 1.2em; line-height: 1.6; }

/* ─── Plateau ──────────────────────────────────────────────────────── */

.enquete__aide {
  font-size: var(--font-sm, 0.875rem);
  color: var(--clr-text-secondary, #52504C);
  margin-bottom: var(--space-4, 1rem);
}

.enq-banque {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  min-height: 2.75rem;
  padding: var(--space-3, 0.75rem);
  margin-bottom: var(--space-4, 1rem);
  background: var(--clr-bg-elevated, #EBE5D9);
  border-radius: var(--radius-base, 8px);
}

.enq-banque:empty::before {
  content: 'Tout le monde est placé.';
  font-size: var(--font-sm, 0.875rem);
  color: var(--clr-text-muted, #8A7E73);
}

.enq-nom {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: var(--clr-bg-secondary, #fff);
  border: 1px solid var(--clr-border-strong, #B8AFA3);
  border-radius: 999px;
  font: inherit;
  font-size: var(--font-sm, 0.875rem);
  color: var(--clr-text, #1A1A1A);
  cursor: pointer;
}

.enq-nom:hover { border-color: var(--clr-primary, #1B4332); }

.enq-nom.is-choisi,
.enq-case.is-choisi {
  border-color: var(--clr-accent, #C7901E);
  box-shadow: 0 0 0 3px var(--clr-accent-light, rgba(199, 144, 30, 0.12));
}

.enq-arbre-defile {
  overflow-x: auto;
  padding-bottom: var(--space-3, 0.75rem);
}

/* Arbre descendant : traits tracés par les pseudo-éléments des <li> */
.enq-arbre,
.enq-arbre ul {
  display: flex;
  justify-content: center;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.enq-arbre { width: max-content; min-width: 100%; }
.enq-arbre ul { padding-top: 20px; }

.enq-arbre li {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 20px 4px 0;
}

/* Trait horizontal entre frères et sœurs, puis descente vers chaque enfant */
.enq-arbre li::before,
.enq-arbre li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: 20px;
  border-top: 2px solid var(--clr-border-strong, #B8AFA3);
}

.enq-arbre li::after {
  right: auto;
  left: 50%;
  border-left: 2px solid var(--clr-border-strong, #B8AFA3);
}

.enq-arbre li:only-child::before,
.enq-arbre li:only-child::after { display: none; }
.enq-arbre li:only-child { padding-top: 0; }

.enq-arbre li:first-child::before,
.enq-arbre li:last-child::after { border: 0 none; }
.enq-arbre li:last-child::before { border-right: 2px solid var(--clr-border-strong, #B8AFA3); }

/* Descente du couple vers ses enfants */
.enq-arbre ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  height: 20px;
  border-left: 2px solid var(--clr-border-strong, #B8AFA3);
}

.enq-couple {
  display: flex;
  align-items: center;
  gap: 4px;
}

.enq-couple__lien {
  color: var(--clr-text-muted, #8A7E73);
  font-size: var(--font-sm, 0.875rem);
}

.enq-case {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 92px;
  min-height: 58px;
  padding: 4px 6px;
  background: var(--clr-bg-secondary, #fff);
  border: 2px solid var(--clr-border-strong, #B8AFA3);
  border-radius: var(--radius-base, 8px);
  font: inherit;
  color: var(--clr-text, #1A1A1A);
  cursor: pointer;
  text-align: center;
}

.enq-case--conjoint { border-style: dashed; }
.enq-case:hover:not(:disabled) { border-color: var(--clr-primary, #1B4332); }
.enq-case:disabled { cursor: default; }

.enq-case__sexe {
  font-size: var(--font-xs, 0.75rem);
  color: var(--clr-text-muted, #8A7E73);
}

.enq-case__nom {
  font-size: var(--font-xs, 0.75rem);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.enq-case.is-vide .enq-case__nom {
  font-weight: 400;
  color: var(--clr-text-muted, #8A7E73);
}

.enq-case.is-indice {
  border-color: var(--clr-accent, #C7901E);
  background: var(--clr-accent-light, rgba(199, 144, 30, 0.12));
  cursor: default;
}

.enq-case.is-juste { border-color: var(--clr-success, #2D6A4F); background: var(--clr-success-bg, rgba(45, 106, 79, 0.1)); }
.enq-case.is-faux  { border-color: var(--clr-error, #C0392B); background: var(--clr-error-bg, rgba(192, 57, 43, 0.1)); }

.enq-case.is-refus { animation: enq-refus 0.3s; }

@keyframes enq-refus {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .enq-case.is-refus { animation: none; }
}

.enquete__message {
  min-height: 1.5em;
  margin-top: var(--space-3, 0.75rem);
  font-size: var(--font-sm, 0.875rem);
  color: var(--clr-text-secondary, #52504C);
}

.enquete__message.is-erreur { color: var(--clr-error, #C0392B); }

.enquete__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-3, 0.75rem);
}

/* ─── Résultat et classement ───────────────────────────────────────── */

.enquete__resultat {
  margin-bottom: var(--space-6, 1.5rem);
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  border-radius: var(--radius-lg, 12px);
  background: var(--clr-success-bg, rgba(45, 106, 79, 0.1));
  border: 1px solid var(--clr-success, #2D6A4F);
}

.enquete__resultat.is-echec {
  background: var(--clr-bg-secondary, #fff);
  border-color: var(--clr-border, #D4CCBF);
}

.enquete__resultat h2 { margin-bottom: var(--space-2, 0.5rem); }
.enquete__resultat p { margin-bottom: var(--space-2, 0.5rem); }
.enquete__resultat .btn { margin-top: var(--space-2, 0.5rem); }

.enquete__classement {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6, 1.5rem);
  margin-top: var(--space-8, 2rem);
}

.enquete__classement ol {
  list-style: decimal;
  padding-left: 1.5em;
  font-size: var(--font-sm, 0.875rem);
  line-height: 1.8;
  color: var(--clr-text, #1A1A1A);
}

.enquete__classement span { color: var(--clr-text-muted, #8A7E73); }

.enquete__classement-vide {
  font-size: var(--font-sm, 0.875rem);
  color: var(--clr-text-muted, #8A7E73);
}

/* Le lien « Voir le classement » ne doit pas arriver sous l'en-tête fixe */
.enquete__classement { scroll-margin-top: calc(var(--nav-height, 70px) + var(--space-4, 1rem)); }

/* ─── Encart de la page d'accueil ──────────────────────────────────── */

.enquete-encart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  background: var(--clr-bg-secondary, #fff);
  border: 1px solid var(--clr-border, #D4CCBF);
  border-left: 4px solid var(--clr-accent, #C7901E);
  border-radius: var(--radius-lg, 12px);
}

.enquete-encart__titre {
  font-size: var(--font-xl, 1.5rem);
  margin-bottom: var(--space-1, 0.25rem);
}

.enquete-encart__texte {
  color: var(--clr-text-secondary, #52504C);
  font-size: var(--font-sm, 0.875rem);
}

/* Variante posée dans le bandeau sombre du haut de la page d'accueil */
.enquete-encart--hero {
  margin-bottom: var(--space-10, 2.5rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 4px solid var(--clr-accent, #C7901E);
  max-width: 520px;
}

.enquete-encart--hero .enquete-encart__titre {
  font-size: var(--text-xl, 1.25rem);
  color: var(--clr-hero-text, #F5F0E8);
}

.enquete-encart--hero .enquete-encart__texte {
  color: var(--clr-hero-muted, rgba(245, 240, 232, 0.65));
}