/* ============================================================
   SpiLi — les Expositions (lot r-expositions)
   ------------------------------------------------------------
   Une exposition se lit d'un défilement : un seuil, des salles
   d'un écran chacune, une dernière salle qui donne la réponse.

   Le mouvement suit la grammaire du filet (note du 4 août) :
   le TRACÉ — 640 ms, cubic-bezier(.22,.61,.36,1) — pour le filet
   qui s'étire sous chaque question et le rideau qui découvre
   l'objet phare. Il n'existe que si le script a posé
   `data-anime` sur l'exposition ET si le système n'a pas
   demandé de réduire le mouvement : sans lui, tout est en place
   dès le premier rendu. Aucun mouvement n'est nécessaire à la
   lecture, aucun ne boucle.
   ============================================================ */

:root {
  --expo-courbe: cubic-bezier(.22, .61, .36, 1);
  --expo-trace: 640ms;
  --expo-plan: 56px; /* hauteur du plan collé, avec le script */
}

.expo em, .expo cite, .expo-galerie em { font-style: italic; }

/* ---------- Surtitres et filets communs ---------- */

.expo-surtitre,
.salle-numero,
.expo-mesure,
.expo-carte-meta,
.salle-objet-mention,
.expo-plan-titre,
.expo-plan-num,
.cartel-ligne,
.cartel-source,
.salle-enquete-titre,
.salle-verdict,
.salle-certitude-libelle,
.salle-sources-titre,
.expo-grande-idee-mention,
.expo-autres-nom {
  font-family: var(--spili-data);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--spili-texte-faible);
}

.expo-trace,
.salle-filet {
  border: 0;
  height: var(--spili-notation);
  background: var(--spili-texte);
  transform-origin: left center;
}
.expo-trace { width: 120px; margin: 28px 0 26px; }
.salle-filet { width: 64px; margin: 20px 0 24px; }

/* ============================================================
   La galerie
   ============================================================ */

.expo-galerie-seuil { padding: 80px 0 36px; }
.expo-galerie-titre {
  font-size: clamp(2.3rem, 5.6vw, 4rem);
  max-width: 17ch;
  margin-top: 14px;
}
.expo-galerie-lead {
  max-width: 54ch;
  font-size: 19px;
  line-height: 1.55;
  color: var(--spili-texte-doux);
}

.expo-galerie { padding: 20px 0 96px; }
.expo-cartes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px;
}

.expo-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--spili-fond-eleve);
  border-top: var(--spili-notation) solid var(--spili-texte);
}
.expo-carte--une {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.expo-carte-image {
  background: var(--spili-fond-carte);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.expo-carte--une .expo-carte-image { aspect-ratio: auto; min-height: 420px; }
.expo-carte-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.expo-carte-corps { padding: 24px 26px 30px; }
.expo-carte--une .expo-carte-corps { padding: 40px 40px 44px; align-self: center; }
.expo-carte-titre {
  margin: 12px 0 14px;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.15;
}
.expo-carte--une .expo-carte-titre { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.expo-carte-lien {
  color: var(--spili-texte);
  text-decoration: none;
}
/* Le lien s'étend à toute la carte : on clique l'image comme le titre. */
.expo-carte-lien::after {
  content: "";
  position: absolute;
  inset: 0;
}
.expo-carte-lien:hover,
.expo-carte-lien:focus-visible { color: var(--spili-accent); }
.expo-carte:focus-within { outline: 2px solid var(--spili-accent); outline-offset: 4px; }
.expo-carte-lien:focus-visible { outline: none; }
.expo-carte-accroche { font-size: 15.5px; color: var(--spili-texte-doux); max-width: 52ch; }

@media (prefers-reduced-motion: no-preference) {
  .expo-carte-image img { transition: transform 640ms var(--expo-courbe); }
  .expo-carte:hover .expo-carte-image img,
  .expo-carte:focus-within .expo-carte-image img { transform: scale(1.035); }
}

/* ============================================================
   Le seuil d'une exposition
   ============================================================ */

.expo-seuil {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--spili-entete));
  padding: 56px 0 64px;
  overflow: hidden;
}
.expo-seuil:focus { outline: none; }
.expo-seuil-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  background: var(--spili-fond-carte);
}
.expo-seuil-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.expo-seuil-corps { position: relative; width: 100%; }
.expo-seuil-corps > * { max-width: 50%; }
.expo-fil { font-size: 13.5px; margin-bottom: 44px; color: var(--spili-texte-faible); }
.expo-fil a { color: var(--spili-texte-faible); }
.expo-fil a:hover { color: var(--spili-accent); }
.expo-fil span[aria-hidden] { margin: 0 6px; }
.expo-titre {
  margin-top: 16px;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 1.02;
}
.expo-accroche {
  font-size: 19.5px;
  line-height: 1.55;
  color: var(--spili-texte-doux);
}
.expo-mesure { margin-top: 22px; }
.expo-commencer {
  display: inline-block;
  margin-top: 30px;
  padding: 13px 22px;
  background: var(--spili-texte);
  color: var(--spili-fond);
  text-decoration: none;
  font-size: 15px;
}
.expo-commencer:hover,
.expo-commencer:focus-visible { background: var(--spili-accent); color: var(--spili-fond); }

/* ============================================================
   Le plan, et la progression
   ============================================================ */

.expo-plan {
  border-top: 1px solid var(--spili-trait);
  border-bottom: 1px solid var(--spili-trait);
  background: var(--spili-fond);
  padding: 22px 0;
}
.expo-plan-titre { margin-bottom: 10px; }
.expo-plan-liste { list-style: none; display: grid; gap: 6px; }
.expo-plan-liste a {
  display: flex;
  gap: 14px;
  align-items: baseline;
  color: var(--spili-texte-doux);
  text-decoration: none;
}
.expo-plan-liste a:hover { color: var(--spili-accent); }
.expo-plan-num { color: inherit; }
.expo-progression { display: none; }

/* Avec le script : le plan se replie en une ligne collée sous l'en-tête,
   numéros seulement, et le filet de progression court dessous. */
.expo[data-conduite] .expo-plan {
  position: sticky;
  top: var(--spili-entete);
  z-index: 20;
  padding: 0;
}
.expo[data-conduite] .expo-plan-corps {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--expo-plan);
}
.expo[data-conduite] .expo-plan-titre { margin: 0; flex: none; }
.expo[data-conduite] .expo-plan-liste {
  display: flex;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.expo[data-conduite] .expo-plan-liste li { min-width: 0; }
.expo[data-conduite] .expo-plan-liste a {
  padding: 8px 10px;
  border-bottom: 2px solid transparent;
}
.expo[data-conduite] .expo-plan-nom {
  /* Le nom de la salle courante seulement : les autres restent annoncés
     (texte masqué visuellement), et le plan tient sur une ligne. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.expo[data-conduite] .expo-plan-liste a.est-courante {
  color: var(--spili-texte);
  border-bottom-color: var(--spili-texte);
}
.expo[data-conduite] .expo-plan-liste a.est-courante .expo-plan-nom {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 46ch;
  vertical-align: bottom;
  color: var(--spili-texte);
}
.expo[data-conduite] .expo-plan-liste a.est-passee { color: var(--spili-texte); }
.expo[data-conduite] .expo-progression {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--spili-notation);
}
.expo-progression-filet {
  display: block;
  height: 100%;
  background: var(--spili-texte);
  transform-origin: left center;
  transform: scaleX(var(--progression, 0));
}

/* ============================================================
   Les salles
   ============================================================ */

.salle {
  border-top: 1px solid var(--spili-trait);
  padding: 80px 0 88px;
  min-height: calc(100svh - var(--spili-entete));
  display: flex;
  align-items: center;
  scroll-margin-top: var(--spili-entete);
}
.expo[data-conduite] .salle { scroll-margin-top: calc(var(--spili-entete) + var(--expo-plan)); }
.salle:focus { outline: none; }
.salle > .container { width: 100%; }

.salle-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
/* Une salle sur deux inverse l'objet et le récit : le rythme d'un
   accrochage, pas celui d'un gabarit. */
.salle:nth-of-type(even) .salle-scene { order: 2; }

.salle-objet-mention { margin-bottom: 12px; }

.objet { margin: 0; }
.objet-cadre {
  background: var(--spili-fond-carte);
  padding: 22px;
  display: flex;
  justify-content: center;
}
.objet-cadre img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: min(68vh, 720px);
  width: auto;
  object-fit: contain;
}
.cartel {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--spili-texte);
  max-width: 60ch;
}
.cartel-titre { color: var(--spili-texte); font-size: 15px; }
.cartel-titre cite { font-style: italic; }
.cartel-ligne { margin-top: 2px; text-transform: none; letter-spacing: 0; }
.cartel-texte { margin-top: 10px; font-size: 14.5px; color: var(--spili-texte-doux); }
.cartel-source { margin-top: 10px; text-transform: none; letter-spacing: 0; font-size: 12px; }
.cartel-source a { color: var(--spili-accent); overflow-wrap: anywhere; }

.salle-numero { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.salle-date { color: var(--spili-texte); }
.salle-question {
  margin-top: 14px;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  max-width: 20ch;
}
.salle-texte p {
  font-size: 17.5px;
  line-height: 1.66;
  color: var(--spili-texte-doux);
  max-width: 60ch;
}
.salle-texte p + p { margin-top: 16px; }

.salle-citation {
  margin: 30px 0 4px;
  padding-top: 16px;
  border-top: 1px solid var(--spili-trait);
  max-width: 54ch;
}
.salle-citation p {
  font-size: 20px;
  line-height: 1.45;
  font-weight: 300;
  color: var(--spili-texte);
}
.salle-citation footer { margin-top: 8px; font-size: 14px; color: var(--spili-texte-faible); }

/* Le jeu : une affirmation, un verdict à ouvrir. Pas de score. */
.salle-enquete {
  margin-top: 30px;
  border: 1px solid var(--spili-texte);
  background: var(--spili-fond-eleve);
  max-width: 60ch;
}
.salle-enquete summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px 18px;
  display: grid;
  gap: 6px;
}
.salle-enquete summary::-webkit-details-marker { display: none; }
.salle-enquete summary:focus-visible { outline: 2px solid var(--spili-accent); outline-offset: 2px; }
.salle-enquete-titre { color: var(--spili-texte); }
.salle-enquete-affirmation { font-size: 18px; line-height: 1.45; color: var(--spili-texte); }
.salle-enquete-consigne { font-size: 14px; color: var(--spili-texte-faible); }
.salle-enquete-bouton {
  margin-left: 8px;
  color: var(--spili-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.salle-enquete[open] .salle-enquete-consigne { display: none; }
.salle-enquete-reponse {
  padding: 0 20px 18px;
  font-size: 15.5px;
  color: var(--spili-texte-doux);
}
.salle-verdict { color: var(--spili-texte); margin-bottom: 6px; }

.salle-sortie {
  margin-top: 30px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--spili-texte);
  max-width: 56ch;
}
.salle-suivante {
  display: inline-block;
  margin-top: 14px;
  font-size: 15px;
  color: var(--spili-accent);
}

/* « Comment nous savons » : là, toujours, mais au second plan. */
.salle-savoir {
  margin-top: 34px;
  padding-top: 12px;
  border-top: 1px solid var(--spili-trait);
  max-width: 60ch;
  font-size: 14px;
}
.salle-savoir summary {
  cursor: pointer;
  color: var(--spili-texte-faible);
  font-size: 14px;
}
.salle-savoir summary:hover { color: var(--spili-accent); }
.salle-savoir summary:focus-visible { outline: 2px solid var(--spili-accent); outline-offset: 2px; }
.salle-savoir-corps { padding-top: 12px; color: var(--spili-texte-doux); }
.salle-certitude .spili-preuve { width: 72px; margin: 6px 0 8px; }
.salle-sources-titre { margin-top: 16px; }
.salle-sources { margin: 6px 0 0 18px; }
.salle-sources li + li { margin-top: 4px; }

/* ============================================================
   La dernière salle
   ============================================================ */

.salle--fin { background: var(--spili-fond-eleve); }
.salle--fin .container > * { max-width: 760px; }
.expo-rappel {
  font-size: 17px;
  color: var(--spili-texte-faible);
}
.expo-grande-idee {
  margin-top: 14px;
  font-size: clamp(1.55rem, 3.1vw, 2.35rem);
  line-height: 1.25;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--spili-texte);
}
.expo-grande-idee-mention { display: block; margin-bottom: 10px; }
.expo-retenir {
  margin: 34px 0 0;
  padding-left: 0;
  list-style: none;
  counter-reset: retenir;
  display: grid;
  gap: 14px;
}
.expo-retenir li {
  counter-increment: retenir;
  position: relative;
  padding-left: 44px;
  font-size: 16.5px;
  color: var(--spili-texte-doux);
}
.expo-retenir li::before {
  content: counter(retenir, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: var(--spili-data);
  font-size: 13px;
  color: var(--spili-texte);
  top: 3px;
}
.salle--fin .container > .expo-suite {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: 52px;
  padding-top: 26px;
  border-top: var(--spili-notation) solid var(--spili-texte);
}
.expo-suite h3 { font-size: 1.25rem; font-weight: 400; margin-bottom: 12px; }
.expo-suite ul { list-style: none; display: grid; gap: 10px; }
.expo-autres li { display: flex; flex-direction: column; gap: 2px; }
.expo-autres-nom { order: -1; }
.expo-retour { display: inline-block; margin-top: 18px; }
.expo-publication { margin-top: 48px; font-size: 13px; color: var(--spili-texte-faible); }

.expo-aide {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 15;
  padding: 8px 12px;
  background: var(--spili-fond-eleve);
  border: 1px solid var(--spili-trait);
  font-size: 12.5px;
  color: var(--spili-texte-faible);
}
.expo-aide[hidden] { display: none; }

/* ============================================================
   Le mouvement — seulement avec le script, seulement si accepté
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  /* Le tracé sous le titre, au seuil. */
  .expo[data-anime] .expo-trace,
  .expo-galerie-seuil .expo-trace {
    animation: expo-trace var(--expo-trace) var(--expo-courbe) 200ms both;
  }

  /* Dans une salle qui n'est pas encore entrée dans l'écran : le rideau
     est tiré sur l'objet, le filet n'est pas tracé, le récit attend. */
  .expo[data-anime] .salle:not(.est-vue) .objet-cadre img { clip-path: inset(0 100% 0 0); }
  .expo[data-anime] .salle:not(.est-vue) .salle-filet { transform: scaleX(0); }
  .expo[data-anime] .salle:not(.est-vue) .salle-question,
  .expo[data-anime] .salle:not(.est-vue) .salle-texte,
  .expo[data-anime] .salle:not(.est-vue) .expo-grande-idee { opacity: 0; transform: translateY(14px); }

  .expo[data-anime] .objet-cadre img {
    transition: clip-path 1100ms var(--expo-courbe) 120ms;
  }
  .expo[data-anime] .salle-filet {
    transition: transform var(--expo-trace) var(--expo-courbe) 380ms;
  }
  .expo[data-anime] .salle-question,
  .expo[data-anime] .salle-texte,
  .expo[data-anime] .expo-grande-idee {
    transition: opacity 520ms var(--expo-courbe), transform 520ms var(--expo-courbe);
  }
  .expo[data-anime] .salle-texte { transition-delay: 160ms; }
  .expo[data-anime] .expo-grande-idee { transition-delay: 260ms; }

  .expo-progression-filet { transition: transform 160ms linear; }
}

@keyframes expo-trace {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ============================================================
   Formats
   ============================================================ */

@media (max-width: 960px) {
  .salle-grille { grid-template-columns: 1fr; gap: 36px; }
  .salle:nth-of-type(even) .salle-scene { order: 0; }
  .salle { min-height: 0; padding: 60px 0 68px; }
  .expo-seuil { min-height: 0; display: block; padding: 0 0 48px; }
  .expo-seuil-image { position: relative; width: 100%; height: 42vh; }
  .expo-seuil-corps { padding-top: 28px; }
  .expo-seuil-corps > * { max-width: none; }
  .expo-fil { margin-bottom: 26px; }
  .expo-carte--une { grid-template-columns: 1fr; }
  .expo-carte--une .expo-carte-image { min-height: 0; aspect-ratio: 4 / 3; }
  .expo-carte--une .expo-carte-corps { padding: 24px 26px 30px; }
  .expo[data-conduite] .expo-plan-liste a.est-courante .expo-plan-nom { max-width: 26ch; }
}

@media (max-width: 680px) {
  .expo-cartes { grid-template-columns: 1fr; }
  .salle--fin .container > .expo-suite { grid-template-columns: 1fr; }
  .expo[data-conduite] .expo-plan-titre { display: none; }
  .expo[data-conduite] .expo-plan-liste a { padding: 8px 6px; }
  .expo[data-conduite] .expo-plan-liste a.est-courante .expo-plan-nom { display: none; }
  .objet-cadre { padding: 12px; }
  .expo-aide { display: none; }
}

@media print {
  .expo-plan, .salle-suivante, .expo-commencer, .expo-aide { display: none; }
  .salle { min-height: 0; break-inside: avoid; }
  .salle-savoir > :not(summary) { display: block; }
}