/* =========================================================
   Chapitre I · L'horreur du vide ? — compléments
   (à charger après chapitre.css)
   ========================================================= */

/* ---------- expériences animées (SVG dessiné par vide.js) ---------- */
.experience {
  flex: 1 1 0; min-height: 0;
  display: flex; flex-direction: column; gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  background: rgba(251, 246, 234, .75);
  border: 1px solid #c8b48a;
  border-radius: calc(4 * var(--u));
}
.experience.grande { min-height: calc(250 * var(--u)); }
.experience > svg { flex: 1 1 0; min-height: 0; width: 100%; }
.experience .etiquette { font-family: var(--serif); font-style: italic; font-size: 15px; fill: #4a3a26; }
.experience .etiquette.clair { fill: #f3e8cf; }
.experience .etiquette.grand { font-size: 22px; font-style: normal; font-weight: 600; }
.experience .etiquette.vide { font-family: var(--capitales); font-style: normal; font-weight: 600; letter-spacing: .25em; font-size: 13px; fill: #7a5a1c; }
.experience .etiquette.vide.clair { fill: #f3e8cf; }
.experience .etiquette.grand-vide { font-size: 22px; fill: #b8312f; }
.experience .etiquette.rouge { fill: #b8312f; font-style: normal; font-weight: 600; }
.experience .graduation { font-family: var(--serif); font-size: 11px; fill: #6b5235; }
.experience .message {
  margin: 0; min-height: 2.6em;
  font-style: italic; font-size: calc(15 * var(--u)); line-height: 1.3;
  color: var(--encre);
}
.experience .message.en-haut { min-height: 5.3em; }
.commandes { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); justify-content: center; align-items: center; }
.commandes span { font-style: italic; font-size: calc(15 * var(--u)); color: var(--encre-douce); }
.bouton.petit {
  font-size: calc(14 * var(--u)); min-height: 34px;
  padding: calc(4 * var(--u)) calc(12 * var(--u));
  background: #7a5420;
}
.bouton.petit:hover { background: #5e3f14; }
.bouton.petit.clair { background: #fbf6ea; color: #5e3f14; border: 1px solid #b8862f; }
.bouton.petit.clair:hover { background: #f1e3c2; }
.bouton:disabled { opacity: .4; cursor: default; }

/* ---------- animations image par image (vis d'Archimède, éolipyle) ---------- */
.sprite {
  height: 100%; max-width: 100%; margin: 0 auto;
  background-repeat: no-repeat;
  background-size: calc(var(--images) * 100%) 100%;
  animation: sprite var(--duree) infinite;
}
@keyframes sprite { from { background-position: 0 0; } to { background-position: 100% 0; } }
.sprite.vis      { --images: 50; --duree: 4s; aspect-ratio: 200 / 146; background-image: url("../images/vide/vis-sprite.webp"); animation-timing-function: steps(49); }
.sprite.eolipyle { --images: 5;  --duree: .5s; aspect-ratio: 200 / 230; background-image: url("../images/vide/eolipyle-sprite.webp"); animation-timing-function: steps(4); }
@media (prefers-reduced-motion: reduce) { .sprite { animation: none; } }

/* petites animations image par image, centrées, sans prendre toute la page */
.petite-anim { flex: 0 1 auto; min-height: 0; align-items: center; }
.petite-anim .sprite { height: auto; width: calc(220 * var(--u)); max-width: 60%; }
.petite-anim .sprite.eolipyle { width: calc(150 * var(--u)); }

/* commentaire (texte ajouté pour la version HTML) */
.commentaire {
  border-left: calc(3 * var(--u)) solid var(--or);
  background: rgba(201, 161, 74, .10);
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  font-size: calc(15.5 * var(--u)); line-height: 1.35;
}
.commentaire p { margin: 0; text-align: justify; hyphens: auto; }
.commentaire .commentaire-titre {
  font-family: var(--capitales); letter-spacing: .06em; color: var(--sepia);
  font-size: calc(16 * var(--u)); margin-bottom: calc(3 * var(--u));
}

/* le vide d'Épicure (canvas) */
.experience.atomes { padding: calc(6 * var(--u)); gap: calc(4 * var(--u)); min-height: calc(170 * var(--u)); }
.experience.atomes canvas { flex: 1 1 0; min-height: 0; width: 100%; display: block; }
.experience.atomes figcaption { font-size: calc(13.5 * var(--u)); }

/* ---------- mises en page propres au chapitre ---------- */
.page .citation { font-style: italic; text-align: justify; hyphens: auto; }
.page .citation + .source { text-align: right; }
.portrait { flex-direction: row; align-items: flex-start; gap: calc(14 * var(--u)); }
.portrait img { width: calc(130 * var(--u)); height: auto; flex: none; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.portrait.petit img { width: calc(90 * var(--u)); }
.portrait.grand img { width: calc(210 * var(--u)); }
.portrait figcaption { text-align: left; }
.flottant { float: right; width: calc(110 * var(--u)); margin: 0 0 calc(8 * var(--u)) calc(14 * var(--u)); }
.flottant.large { width: calc(150 * var(--u)); }
.flottant figcaption { font-size: calc(12.5 * var(--u)); }
.experience canvas { flex: 1 1 0; min-height: 0; width: 100%; display: block; }
.flottant.gauche { float: left; margin: 0 calc(14 * var(--u)) calc(8 * var(--u)) 0; }
.flottant img { width: 100%; height: auto; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.bloc-texte { display: block; }
.bloc-texte::after { content: ""; display: table; clear: both; }
.fac-simile img { box-shadow: 0 2px 8px rgba(60,40,10,.3); }
.transcription { font-size: calc(16 * var(--u)); line-height: 1.34; }
.transcription .theoreme { font-family: var(--capitales); font-style: normal; letter-spacing: .06em; color: var(--sepia); }
.lien { color: #7a3f12; text-decoration: underline; text-underline-offset: 2px; }
.lien:hover { color: #b8312f; }
.ajout { /* texte écrit pour la version HTML (à relire) */ }