/**
 * PlayAwale — Le rapport des ouvertures
 * -----------------------------------------------------------------------------
 * AUTONOME : cette feuille voyage avec le rapport. Le bouton « Copier le
 * rapport » la place dans une balise <style> en tête du fragment, pour un bloc
 * « HTML personnalisé » de WordPress. Elle ne s'appuie donc sur AUCUNE variable
 * du site : les couleurs du jeu y sont écrites en valeurs — celles de
 * base/tokens.css et du thème de plateau themes/board/bois.css —, sous le seul
 * préfixe « pao- », pour ne rien toucher du thème qui l'accueille.
 *
 * Si une couleur du jeu change dans tokens.css, elle est à reporter ici.
 *
 * La mise en page de la page elle-même est dans pages/ouvertures-page.css.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

.pao {
  /* Les couleurs du jeu — base/tokens.css. */
  --pao-brun: #3c2723;
  --pao-brun-doux: rgba(60, 39, 35, 0.78);
  --pao-creme: #f0e1d1;
  --pao-sable: #e0dbcc;
  --pao-sable-fonce: #b8a995;
  --pao-ambre: #ffc966;
  --pao-ambre-clair: #ffdb99;
  --pao-ambre-profond: #d8a44e;
  --pao-vert: #4c9a50;
  --pao-rouge: #9a3412;

  /* Le plateau — themes/board/bois.css. */
  --pao-bois: #a3693c;
  --pao-trou: #5e4137;

  box-sizing: border-box;
  max-width: 940px;
  margin: 0 auto;
  color: var(--pao-brun);
  font-family: 'Roboto', 'Segoe UI', 'Noto Sans', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;

  /* Aligné à gauche : sur le site, la page centre tout, et de longs
     paragraphes centrés se lisent mal. */
  text-align: left;
}

.pao *,
.pao *::before,
.pao *::after {
  box-sizing: inherit;
}

/* LES TITRES EN POLICE DE LECTURE, ET NON EN JOTI ONE. Sur le site, où la
   police du jeu se charge, Joti One sur le bandeau et chaque titre rendait la
   page « chargée, grossière, grasse » — demandé le 29/09/2026. Elle reste au
   grand titre de la page (ouvertures-page.css) ; le rapport garde un Roboto
   demi-gras, plus fin, le même sur le blog. */
.pao h2,
.pao h3 {
  margin: 0 0 0.5rem;
  color: var(--pao-brun);
  font-family: 'Roboto', 'Segoe UI', 'Noto Sans', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.3;
}

.pao h2 {
  font-size: 1.3rem;
}

.pao h3 {
  margin-top: 1.25rem;
  font-size: 1.05rem;
}

.pao p {
  margin: 0 0 0.75rem;
}

.pao a {
  color: var(--pao-rouge);
}

.pao-note {
  color: var(--pao-brun-doux);
  font-size: 0.875rem;
}

/* =============================================================================
   EN TÊTE : GÉNÉRÉ AUTOMATIQUEMENT, ET À TITRE INDICATIF
   ============================================================================= */

/* L'ambre des boutons du jeu, et non un aplat brun : le bandeau doit se voir en
   premier sans trancher sur le reste de la page. */
.pao-auto {
  margin-bottom: 1rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(180deg, var(--pao-ambre-clair), var(--pao-ambre));
  border-radius: 15px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  color: var(--pao-brun);
  text-align: center;
}

.pao-auto__titre {
  margin: 0 0 0.35rem !important;
  font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--pao-brun);
}

.pao-auto__detail {
  margin: 0 !important;
  font-size: 0.95rem;
}

.pao-avertissement {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--pao-creme);
  border-left: 4px solid var(--pao-ambre-profond);
  border-radius: 10px;
}

.pao-avertissement__titre {
  margin-bottom: 0.25rem !important;
  font-weight: 600;
}

.pao-avertissement p:last-child {
  margin: 0;
}

/* =============================================================================
   LES SECTIONS
   ============================================================================= */

.pao-section {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--pao-creme);
  border-radius: 15px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}

.pao-section > :last-child {
  margin-bottom: 0;
}

.pao-conclusion {
  border: 3px solid var(--pao-ambre);
}

.pao-conclusion p {
  font-size: 1.1rem;
}

.pao-etapes,
.pao-essentiel,
.pao-reponses {
  margin: 0;
  padding-left: 1.4rem;
}

.pao-etapes li,
.pao-essentiel li,
.pao-reponses li {
  margin-bottom: 0.5rem;
}

.pao-essentiel li::marker {
  color: var(--pao-ambre-profond);
}

/* =============================================================================
   LES SIX OUVERTURES : un petit plateau pour chacune
   ============================================================================= */

.pao-formes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 1rem;
  margin: 0.75rem 0;
}

.pao-forme {
  margin: 0;
  text-align: center;
}

.pao-forme figcaption {
  margin-top: 0.35rem;
  font-size: 0.95rem;
}

.pao-plateau {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.pao-plateau__camp {
  color: var(--pao-brun-doux);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Le bois du plateau, avec son ombre portée. */
.pao-plateau__bois {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.45rem;
  background: var(--pao-bois);
  border-radius: 0.9rem;
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.35);
}

.pao-rangee {
  display: flex;
  gap: 0.3rem;
}

/* Un trou creusé, et son nombre de graines. */
.pao-trou {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  background: var(--pao-trou);
  border-radius: 50%;
  box-shadow: inset 0 0 0.8rem rgba(68, 37, 1, 0.8);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
}

/* A reçu une graine : la couleur des graines. */
.pao-trou--recu {
  background: radial-gradient(circle at 30% 30%, #ffd54f, #ffa000);
  box-shadow: none;
  color: var(--pao-brun);
}

/* Le trou joué, vidé. */
.pao-trou--joue {
  outline: 2px dashed #ffffff;
  outline-offset: -3px;
}

/* =============================================================================
   LES TABLEAUX
   ============================================================================= */

.pao-tableau {
  margin: 0.75rem 0;
  overflow-x: auto;
}

.pao table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.925rem;
}

.pao th,
.pao td {
  padding: 0.45rem 0.6rem;
  text-align: right;
  vertical-align: middle;
  border: 0;
}

.pao thead th {
  color: var(--pao-brun-doux);
  font-size: 0.8rem;
  font-weight: 500;
  text-align: right;
  border-bottom: 2px solid var(--pao-sable-fonce);
}

.pao thead th:first-child,
.pao tbody th {
  text-align: left;
}

.pao tbody th {
  font-weight: 600;
  white-space: nowrap;
}

.pao tbody th .pao-note {
  display: block;
  font-weight: 400;
}

.pao tbody tr + tr {
  border-top: 1px solid var(--pao-sable);
}

.pao-moins {
  color: var(--pao-rouge);
}

/* La barre d'écart, de part et d'autre du trait de la moyenne. */
.pao-col-barre {
  min-width: 13rem;
}

.pao-barre {
  position: relative;
  display: block;
  height: 0.9rem;
  margin-bottom: 0.2rem;
  background: var(--pao-sable);
  border-radius: 999px;
}

.pao-barre__valeur {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
}

.pao-barre__valeur--plus {
  background: var(--pao-vert);
}

.pao-barre__valeur--moins {
  background: var(--pao-rouge);
}

/* Dans la marge d'incertitude : la même barre, estompée. */
.pao-barre--incertaine .pao-barre__valeur {
  opacity: 0.45;
}

.pao-barre__marge {
  position: absolute;
  top: 50%;
  height: 2px;
  background: var(--pao-brun);
  transform: translateY(-50%);
}

.pao-barre__zero {
  position: absolute;
  top: -0.2rem;
  bottom: -0.2rem;
  left: 50%;
  width: 2px;
  background: var(--pao-brun);
}

/* SUR LE SITE, LES BARRES SONT DES DESSINS SVG. La politique de sécurité du
   site (« style-src 'self' ») ignore les attributs style="width:…" du HTML : les
   barres y restaient vides. Un rectangle SVG prend sa position et sa largeur
   dans ses attributs x et width, que la politique laisse passer. Le blog, lui,
   garde les barres en HTML, qui s'y affichent bien. */
.pao-svg {
  display: block;
  width: 100%;
  height: 0.9rem;
  margin-bottom: 0.2rem;
  overflow: visible;
}

.pao-graphique .pao-svg {
  height: 1.1rem;
  margin: 0;
}

.pao-adversaire .pao-svg {
  height: 0.8rem;
  margin: 0;
}

.pao-barre__texte {
  display: block;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* =============================================================================
   LE GRAPHIQUE DU HAUT : une ligne par ouverture, une barre, une valeur
   ============================================================================= */

.pao-graphique {
  margin: 0.75rem 0;
  padding: 0;
  list-style: none;
}

.pao-graphique li {
  display: grid;
  grid-template-columns: 4.5rem 1fr 11rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.4rem 0;
}

.pao-graphique .pao-barre {
  height: 1.1rem;
  margin: 0;
}

.pao-graphique__trou {
  font-weight: 600;
}

.pao-graphique__valeur {
  font-size: 0.9rem;
  white-space: nowrap;
}

/* =============================================================================
   « POUR ALLER PLUS LOIN » : tout le détail, replié
   ============================================================================= */

.pao-plus {
  margin: 0 0 1.5rem;
}

.pao-plus > summary {
  padding: 0.9rem 1.25rem;
  background: var(--pao-creme);
  border: 2px solid var(--pao-sable-fonce);
  border-radius: 15px;
  color: var(--pao-brun);
  font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  cursor: pointer;
}

.pao-plus[open] > summary {
  margin-bottom: 1rem;
}

/* Sur un blog, rien n'est replié : le même bandeau, en simple titre. */
.pao .pao-plus__titre {
  margin: 0 0 1rem;
  padding: 0.9rem 1.25rem;
  background: var(--pao-creme);
  border: 2px solid var(--pao-sable-fonce);
  border-radius: 15px;
  font-size: 1.15rem;
}

.pao-plus > .pao-note {
  margin: 0 0 1rem;
}

/* =============================================================================
   LES ADVERSAIRES
   ============================================================================= */

.pao-adversaires {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.pao-adversaire {
  display: grid;
  /* La troisième colonne a une largeur fixe : sinon chaque jauge prendrait la
     place que lui laisse son texte, et elles n'auraient plus la même échelle. */
  grid-template-columns: minmax(9rem, 14rem) 1fr 3.5rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.35rem 0;
}

.pao-adversaire--debut {
  opacity: 0.7;
}

.pao-jauge {
  display: block;
  height: 0.8rem;
  background: var(--pao-sable);
  border-radius: 999px;
  overflow: hidden;
}

.pao-jauge span {
  display: block;
  height: 100%;
  background: var(--pao-ambre-profond);
}

.pao-adversaire__taux {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.pao-source {
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
}

@media (max-width: 36rem) {
  .pao-section,
  .pao-auto {
    padding: 1rem;
  }

  .pao-adversaire {
    grid-template-columns: 1fr auto;
  }

  /* Sur téléphone, la valeur passe sous la barre. */
  .pao-graphique li {
    grid-template-columns: 4.5rem 1fr;
  }

  .pao-graphique__valeur {
    grid-column: 2;
  }

  .pao-jauge {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}