/*
 * Puzzle : identité visuelle de l'accueil.
 * Le hero (.hero-jeu, motifs, .hero-decos, .deco-flottante), les cartes de mode, les
 * règles et les sections viennent du CSS partagé (proxies/css-accueil.php). Ce fichier
 * ne pose que le remplissage des pièces décoratives et quelques réglages propres au jeu.
 */

:root { --rules-symbole: '🧩'; }

/* Trois pièces de puzzle en aplat, chacune avec son tenon. */
.piece-flottante { border-radius: 6px; position: relative; }
.piece-flottante::after {
  content: "";
  position: absolute;
  width: 42%;
  height: 42%;
  border-radius: 50%;
  background: inherit;
  right: -24%;
  top: 29%;
}
.pf-1 { background: #14b8a6; }
.pf-2 { background: #fbbf24; }
.pf-3 { background: #f472b6; }

a.mode-card { text-decoration: none; color: inherit; display: block; }
a.mode-card:hover { text-decoration: none; }

.modes-header {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-accent);
  margin: 26px 0 14px;
}
#section-modes .modes { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.lien-classement-accueil {
  display: block;
  margin-top: 4px;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-light);
  text-decoration: none;
}
.lien-classement-accueil:hover { text-decoration: underline; }

.hero-jeu .lien-defi-hero {
  display: block;
  margin-top: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
}
.hero-jeu .lien-defi-hero:hover { text-decoration: underline; }
.hero-jeu a.btn-cta-hero { text-decoration: none; display: inline-block; }

.tableau-defilant { overflow-x: auto; margin: 8px 0 14px; border: 1px solid var(--line); border-radius: 10px; }
.tableau-regles { width: 100%; border-collapse: collapse; font-size: 0.9rem; text-align: left; }
.tableau-regles th, .tableau-regles td { padding: 9px 12px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.tableau-regles thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-faible); }
.tableau-regles tbody th { color: var(--color-accent); font-weight: 700; white-space: nowrap; }
.tableau-regles td { color: var(--texte-doux); }
.tableau-regles tbody tr:last-child th, .tableau-regles tbody tr:last-child td { border-bottom: 0; }
.rules a { color: var(--color-light); }
/* « En bref » : la définition du jeu en deux lignes (lisible par les moteurs à réponse) */
.en-bref-jeu {
  margin: 14px 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--color-accent);
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--texte-doux);
  line-height: 1.55;
  text-align: left;
}
.en-bref-jeu strong { color: var(--texte); }

.faq-section { margin: 34px 0 10px; }
.faq-section h2 { font-family: var(--font-display); }
.faq-item { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; background: var(--surface-1); overflow: hidden; }
.faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 15px 18px; background: none; border: 0; color: #f1f5f9; font: inherit; font-weight: 600;
  text-align: left; cursor: pointer; min-height: 54px;
}
.faq-question:hover { background: color-mix(in srgb, var(--color-mid) 12%, transparent); }
.faq-question:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.faq-question::after {
  content: ''; flex: 0 0 auto; width: 9px; height: 9px;
  border-right: 2px solid var(--color-light); border-bottom: 2px solid var(--color-light);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s ease;
}
.faq-question[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-answer { padding: 0 18px 16px; color: var(--texte-doux); line-height: 1.7; }
.faq-answer[hidden] { display: none; }
.faq-answer p { margin: 0; }