/*
 * Styles des pages tableaux (tableaux/*.html, G-09).
 * Les styles communs (jetons, en-tête, boutons, pied de page) sont dans commun.css.
 * Référence : maquette/tableau.html et design.md « Modifications validées » §3 (repo de l'agence).
 */

/* ---------- Le mur ---------- */
/*
 * Hauteur réservée sous le mur pour que le titre apparaisse dans le premier écran.
 * Le tableau tient entier dans l'écran : sa largeur est plafonnée par la hauteur disponible × son ratio
 * (--ratio et --largeur-native sont posés sur .mur par la page).
 */
.mur {
  --hauteur-tableau: calc(100vh - var(--entete-h) - 10rem);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-4) var(--marge);
  /* --mur : posée sur <html> par le script du <head> et js/tableau.js. Par défaut : blanc cassé. */
  background-color: var(--mur, #F3F0EA);
}

@supports (height: 100svh) {
  .mur { --hauteur-tableau: calc(100svh - var(--entete-h) - 10rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .mur { transition: background-color .5s; }
}

/* Ombre au pied du mur : suggère un sol, quelle que soit la couleur. */
.mur::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 14%;
  background: linear-gradient(transparent, rgba(0, 0, 0, .08));
  pointer-events: none;
}

.mur picture { display: block; width: 100%; }

.mur img {
  position: relative;
  z-index: 1;
  width: min(100%, var(--largeur-native), var(--hauteur-tableau) * var(--ratio));
  height: auto;
  margin-inline: auto;
  box-shadow: 0 20px 40px rgba(22, 21, 20, .28);
  view-transition-name: tableau;   /* G-14, A3 : même nom que l'image cliquée sur l'accueil (js/flux.js) */
}

@media (min-width: 1024px) {
  .mur { padding-block: var(--e-5); }
  .mur { --hauteur-tableau: calc(100vh - var(--entete-h) - 12rem); }
}

@supports (height: 100svh) {
  @media (min-width: 1024px) {
    .mur { --hauteur-tableau: calc(100svh - var(--entete-h) - 12rem); }
  }
}

/* ---------- Titre, légende ---------- */
.infos {
  max-width: calc(900px + 2 * var(--marge));
  padding-block: var(--e-4) var(--e-6);
}

.infos h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
}

.legende { margin: var(--e-1) 0 var(--e-4); }

/* G-14, A4 : les infos montent à l'arrivée sur la page, l'une après l'autre. */
@media (prefers-reduced-motion: no-preference) {
  .infos h1,
  .legende,
  .choix,
  .appel {
    animation: infos-entree 500ms cubic-bezier(.2, .7, .2, 1) 150ms both;
  }
  .legende { animation-delay: 210ms; }
  .choix { animation-delay: 270ms; }
  .appel { animation-delay: 330ms; }
}

@keyframes infos-entree {
  from { opacity: 0; transform: translateY(16px); }
}

/* ---------- Choix du mur ---------- */
.choix[hidden] { display: none; }

.choix { margin-bottom: var(--e-5); }

.choix__titre { margin-bottom: var(--e-2); }

/* Mobile : grille 2 × 2 ; plus large : une ligne. */
.choix__boutons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}

@media (min-width: 600px) {
  .choix__boutons { display: flex; flex-wrap: wrap; }
}

.choix__bouton {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 48px;
  padding: 0 1rem 0 .625rem;
  background: none;
  border: 1.5px solid var(--filet);
  border-radius: 0;
  color: var(--encre);
  font: 400 .9375rem/1.2 var(--police);
  text-align: left;
  cursor: pointer;
}

.choix__pastille {
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(0, 0, 0, .25);
}

/* Bouton actif : contour épais à l'encre + texte en gras (pas seulement une couleur). */
.choix__bouton[aria-pressed="true"] {
  border: 2px solid var(--encre);
  font-weight: 600;
}

@media (hover: hover) {
  .choix__bouton:hover { border-color: var(--encre); }
}

/* ---------- Appel ---------- */
.appel p { margin-bottom: var(--e-2); }

/* ---------- Précédent / suivant / accueil ---------- */
.suite {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
  margin-top: var(--e-5);
  padding-top: var(--e-3);
  border-top: 1px solid var(--filet);
}

.suite a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
  text-decoration: none;
}

.suite a:hover { text-decoration: underline; text-underline-offset: 4px; }

.suite__lien--suiv { align-items: flex-end; text-align: right; }

.suite .suite__accueil {
  grid-column: 1 / -1;
  text-decoration: underline;
  text-underline-offset: 4px;
}