/* Page d'accueil — règles propres à la bataille navale.
   L'habillage commun est dans fichiers-partages-des-jeux/css/accueil.css
   (servi par css-accueil.php), l'identité visuelle dans bataille-accueil.css.
   Ici : la carte « tournoi » et l'accordéon FAQ. */

/* --- Carte tournoi ------------------------------------------------------- */
.mode-card-tournoi {
  position: relative;
}

.mode-card-tournoi .mode-badge {
  background: transparent;
  color: #d2973a;
  border: 1px solid #6b5227;
}

.badge-tournoi-attente {
  background: transparent !important;
  color: var(--texte-doux) !important;
  border: 1px solid var(--line-forte) !important;
}

/* Inscriptions ouvertes : seul badge en aplat plein, c'est l'état qui appelle à agir */
.badge-tournoi-actif {
  background: #3f7a55 !important;
  border-color: #3f7a55 !important;
  color: #fff !important;
  animation: tournoi-pulse 2s ease-in-out infinite;
}

.badge-tournoi-encours {
  background: #a3742c !important;
  border-color: #a3742c !important;
  color: #fff !important;
}

.mode-card-tournoi.tournoi-aucun {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* tournoi-a-venir reste cliquable (renvoie vers la page tournoi : countdown ou
   résultat du dernier tournoi terminé) mais on garde un look discret. */
.mode-card-tournoi.tournoi-a-venir {
  opacity: 0.9;
}

/* Carte mise en avant : bordure franche plutôt qu'un halo pulsant */
.mode-card-tournoi.tournoi-inscriptions {
  border-color: #64ab7c;
}

.mode-card-tournoi.tournoi-en-cours {
  border-color: #d2973a;
}

.tournoi-countdown {
  display: inline-block;
  margin-top: 4px;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-weight: 700;
  color: #64ab7c;
  font-size: 0.9em;
}

@keyframes tournoi-pulse {

  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

/* --- FAQ ----------------------------------------------------------------- */

/* Même traitement que la FAQ des guides (article.css) : filets, pas d'encadrés.
   text-align gauche : #app centre tout par défaut, une FAQ se lit alignée. */
.faq-section {
  margin-top: 32px;
  text-align: left;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.faq-section h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #f0f3f6;
  text-align: left;
  margin-bottom: 4px;
}

.faq-item {
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: #e6eaef;
  font-size: 0.95rem;
  font-family: inherit;
  text-align: left;
  transition: color 0.15s;
}

.faq-question:hover {
  color: var(--color-light);
}

.faq-question:focus-visible {
  outline: 2px solid var(--color-light);
  outline-offset: -2px;
}

.faq-question::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--texte-faible);
  flex-shrink: 0;
  margin-left: 12px;
}

.faq-question[aria-expanded="true"]::after {
  content: '\2212';
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 2px;
  color: var(--texte-doux);
  line-height: 1.7;
  font-size: 0.93rem;
}

.faq-answer[aria-hidden="false"] {
  max-height: 600px;
  padding: 0 2px 18px;
}

/* Cartes de mode : la carte entière est un lien, on ne veut pas de soulignement */
.mode-card {
  text-decoration: none;
}