/**
 * PlayAwale — La page des ouvertures
 * -----------------------------------------------------------------------------
 * La mise en page de ouvertures.php AUTOUR du rapport : titre, barre d'outils.
 * Le rapport lui-même a sa feuille autonome, pages/ouvertures.css, qui part avec
 * lui sur le blog ; ce qui est ici reste sur le site et s'appuie donc sur les
 * variables du site.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

.ouvertures-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

/* Une colonne lisible : la même que pieges.php. */
.ouvertures-page > * {
  width: 100%;
  max-width: min(92vw, 940px);
  margin-inline: auto;
}

/* PLUS PETIT QUE LE TITRE DES AUTRES PAGES — 30/09/2026 : « titre trop gros
   aussi ». Une phrase, et non un mot : même mesure que .pieges-title. */
.ouvertures-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  text-align: center;
  text-shadow: var(--shadow-heading);
}

/* Rien à montrer : aucun relevé n'a encore été fait. */
.ouvertures-empty {
  padding: var(--space-xl);
  text-align: center;
  background-color: var(--color-surface-glass);
  border-radius: var(--radius-lg);
}

.ouvertures-empty h2 {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
}

.ouvertures-empty p {
  margin: 0;
  color: var(--color-text-muted);
}


/* =============================================================================
   LES SIX PETITS PLATEAUX : le vrai plateau du jeu, en petit
   -----------------------------------------------------------------------------
   Même balisage, même thème que la page d'analyse — voir
   awale_openings_board_site(). Seule la mesure de référence change, comme sur
   pieges.php (.pieges-board) : tout le reste en découle.
   ============================================================================= */

.pao-board {
  --hole-size: 36px;
  --hole-gap: calc(var(--hole-size) * 0.16667);
  --board-padding: calc(var(--hole-size) * 0.25);
  --shake: calc(var(--hole-size) / 120);

  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

/* Un plateau qu'on regarde : ni barres de tour, ni curseur de main. */
.pao-board .turn-bar {
  display: none;
}

.pao-board .hole {
  cursor: default;
}

/* L'anneau du trou joué, de la même épaisseur que sur la page d'analyse
   (.analysis-viewer__board) : plus épais qu'en partie, c'est lui qu'on vient
   voir. */
.pao-board .hole.is-chosen {
  outline-width: calc(var(--hole-size) * 0.07);
}

/* LA LÉGENDE est celle de l'analyse, à l'identique : components/
   board-legend.css. Il ne reste ici que sa place sous les plateaux. */
.pao-legende {
  margin-top: var(--space-sm);
}


/* REMONTER EN HAUT : la pastille commune « Haut de page », en bas à droite —
   voir inc/partials/nav-tools.php et components/game-tools.css (01/10/2026). */

@media (prefers-reduced-motion: no-preference) {

  html:has(.ouvertures-page) {
    scroll-behavior: smooth;
  }
}