/* =========================================================
   Astronomie ancienne — mise en page des chapitres
   Un « livre ouvert » (deux pages) qui tient dans l'écran,
   une section visible à la fois.
   À charger APRÈS astro-commun.css
   ========================================================= */

:root {
  --papier:      #f3ead6;
  --papier-2:    #e9dcbf;
  --encre:       #2b2116;
  --encre-douce: #5a4a35;
  --sepia:       #7a5a1c;
}

body.chapitre {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* bandeau : titre du chapitre au centre */
.barre .chapitre-titre {
  font-family: var(--capitales);
  font-size: 18px;
  letter-spacing: .12em;
  color: var(--texte-doux);
  text-align: center;
  flex: 1 1 auto;
}

/* ---------- le livre ---------- */
.scene-livre,
main.scene-livre {
  max-width: none;
  width: 100%;
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 16px 14px;
  min-height: 0;
}

.livre {
  /* format de référence 1200 × 760 ; tout est exprimé en --u (1 px à 1200 de large) */
  width: min(100% - 40px, 1400px, calc((100dvh - 200px) * 1200 / 760));
  aspect-ratio: 1200 / 760;
  container-type: inline-size;
  position: relative;
  --u: calc(100cqw / 1200);
}
@supports not (height: 1dvh) {
  .livre { width: min(100% - 40px, 1400px, calc((100vh - 200px) * 1200 / 760)); }
}

.section { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.section[hidden] { display: none; }
.section.entre { animation: entree .35s ease; }
@keyframes entree { from { opacity: 0; } to { opacity: 1; } }

.page {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  padding: calc(34 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u));
  color: var(--encre);
  font-family: var(--serif);
  font-size: calc(18 * var(--u));
  line-height: 1.38;
  background: var(--papier);
  overflow: hidden;
}
/* ---------- papier ancien ----------
   Couches (de haut en bas) : rousseurs, ombre de la reliure, vignettage des bords,
   grain fin, grandes taches d'humidité, teinte du papier. Tout est en CSS/SVG. */
.page {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .30 0 0 0 0 .15 0 0 0 .38 -.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --taches: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 760' preserveAspectRatio='none'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .009' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .40 0 0 0 0 .18 0 0 0 1.1 -.58'/%3E%3C/filter%3E%3Crect width='600' height='760' filter='url(%23t)'/%3E%3C/svg%3E");
  --taches-droite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 760' preserveAspectRatio='none'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .009' numOctaves='4' seed='23'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .40 0 0 0 0 .18 0 0 0 1.1 -.58'/%3E%3C/filter%3E%3Crect width='600' height='760' filter='url(%23t)'/%3E%3C/svg%3E");
  background-color: var(--papier);
}
.page.gauche {
  border-radius: calc(4 * var(--u)) 0 0 calc(4 * var(--u));
  background-image:
    radial-gradient(circle at 18% 12%, rgba(150,100,40,.09) 0, transparent calc(9 * var(--u))),
    radial-gradient(circle at 81% 86%, rgba(140,90,35,.07) 0, transparent calc(14 * var(--u))),
    radial-gradient(circle at 9% 71%, rgba(150,100,40,.09) 0, transparent calc(6 * var(--u))),
    linear-gradient(to right, transparent 78%, rgba(110,75,30,.10) 90%, rgba(70,45,15,.32) 100%),
    radial-gradient(ellipse 85% 80% at 55% 50%, transparent 55%, rgba(125,85,35,.16) 100%),
    var(--grain), var(--taches);
  background-size: auto, auto, auto, auto, auto, 256px 256px, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  /* tranche des pages, côté extérieur */
  box-shadow:
    calc(-1 * var(--u)) 0 0 #e6d8b8, calc(-2 * var(--u)) 0 0 #cbb68c,
    calc(-3 * var(--u)) 0 0 #e3d4b2, calc(-4 * var(--u)) 0 0 #c4ae82,
    calc(-5 * var(--u)) calc(1 * var(--u)) 0 #ddcca7;
}
.page.droite {
  border-radius: 0 calc(4 * var(--u)) calc(4 * var(--u)) 0;
  background-image:
    radial-gradient(circle at 74% 9%, rgba(150,100,40,.11) 0, transparent calc(8 * var(--u))),
    radial-gradient(circle at 22% 93%, rgba(140,90,35,.08) 0, transparent calc(12 * var(--u))),
    radial-gradient(circle at 93% 58%, rgba(150,100,40,.08) 0, transparent calc(7 * var(--u))),
    linear-gradient(to left, transparent 78%, rgba(110,75,30,.10) 90%, rgba(70,45,15,.32) 100%),
    radial-gradient(ellipse 85% 80% at 45% 50%, transparent 55%, rgba(125,85,35,.16) 100%),
    var(--grain), var(--taches-droite);
  background-size: auto, auto, auto, auto, auto, 256px 256px, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 128px 64px, 0 0;
  box-shadow:
    calc(1 * var(--u)) 0 0 #e6d8b8, calc(2 * var(--u)) 0 0 #cbb68c,
    calc(3 * var(--u)) 0 0 #e3d4b2, calc(4 * var(--u)) 0 0 #c4ae82,
    calc(5 * var(--u)) calc(1 * var(--u)) 0 #ddcca7;
}
/* pli central : un léger creux sur les deux pages */
.section::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: calc(36 * var(--u)); transform: translateX(-50%);
  background: linear-gradient(to right, transparent, rgba(60,38,12,.18) 45%, rgba(40,25,8,.30) 50%, rgba(60,38,12,.18) 55%, transparent);
  pointer-events: none;
}
.livre::before {               /* couverture en cuir, filet doré, ombre */
  content: "";
  position: absolute; inset: calc(-16 * var(--u)) calc(-18 * var(--u));
  border-radius: calc(12 * var(--u));
  background-color: #4a2c16;
  background-image:
    radial-gradient(ellipse at 50% 40%, rgba(120,72,35,.55), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.35' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .10 0 0 0 0 .05 0 0 0 0 .02 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  box-shadow:
    inset 0 0 0 calc(5 * var(--u)) #3b2210,
    inset 0 0 0 calc(6 * var(--u)) rgba(214,180,108,.75),
    inset 0 0 calc(20 * var(--u)) rgba(0,0,0,.55),
    0 calc(18 * var(--u)) calc(50 * var(--u)) rgba(0,0,0,.6);
  pointer-events: none;
}

/* ---------- typographie des pages ---------- */
.titre-section {
  margin: 0;
  font-family: var(--capitales);
  font-weight: 600;
  font-size: calc(30 * var(--u));
  letter-spacing: .08em;
  line-height: 1.1;
  color: var(--sepia);
}
.partie {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: calc(44 * var(--u));
  line-height: 1.02;
  color: var(--encre);
}
.page p { margin: 0; }
.page .texte { font-style: italic; text-align: justify; hyphens: auto; }
.page .texte.grand { font-size: calc(22 * var(--u)); line-height: 1.42; }
.page .question { font-size: calc(21 * var(--u)); font-weight: 600; font-style: italic; color: var(--sepia); }
.page .source { font-size: calc(15 * var(--u)); color: var(--encre-douce); }
.page ul.texte { margin: 0; padding-left: 1.1em; }
.page ul.texte li + li { margin-top: .35em; }

/* ---------- figures ---------- */
figure { margin: 0; min-height: 0; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
figure img {
  display: block;
  min-height: 0;
  max-width: 100%;
  object-fit: contain;
  object-position: center top;
}
figcaption {
  font-style: italic;
  font-size: calc(14.5 * var(--u));
  line-height: 1.3;
  color: var(--encre-douce);
  text-align: center;
}
.extensible { flex: 1 1 auto; min-height: 0; }
.extensible img, .rangee > figure img {
  flex: 0 1 auto; width: 100%; height: auto; max-height: 100%;
}

/* planche de Guillaume Duprat (page de gauche) */
.planche { flex: 1 1 0; flex-direction: row; align-items: stretch; gap: calc(8 * var(--u)); }
.planche img {
  flex: 1 1 0; width: 100%; height: 100%;
  object-position: left center;
  filter: drop-shadow(calc(3 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.35));
}
.credit {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-style: italic;
  font-size: calc(12.5 * var(--u));
  color: var(--encre-douce);
  white-space: nowrap;
  text-align: right;
}
.legende {
  font-style: italic;
  font-size: calc(15.5 * var(--u));
  line-height: 1.32;
  text-align: justify;
  color: var(--encre);
}

/* rangées de figures côte à côte */
.rangee { display: flex; gap: calc(18 * var(--u)); min-height: 0; flex: 1 1 0; align-items: stretch; }
.rangee > figure { flex: 1 1 0; min-width: 0; }

/* rangée de drapeaux : hauteur fixe */
.rangee.drapeaux { flex: 0 0 auto; }
.rangee.drapeaux img { height: calc(105 * var(--u)); width: auto; max-width: 100%; margin: 0 auto;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); }

/* tableau des mesures */
.mesures {
  border-collapse: collapse;
  font-size: calc(15 * var(--u));
  line-height: 1.25;
  width: 100%;
}
.mesures caption {
  text-align: left; font-style: italic; color: var(--sepia);
  font-size: calc(16 * var(--u)); padding-bottom: calc(4 * var(--u));
}
.mesures td { padding: calc(2.5 * var(--u)) calc(6 * var(--u)); border-bottom: 1px dotted #c8b48a; }
.mesures td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mesures tr.actuel td { font-weight: 700; border-bottom: 0; }

/* encart « animation » (section 11) */
.encart {
  border: 1px solid #c8b48a;
  background: #fbf6ea;
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  text-align: center;
  display: flex; flex-direction: column; gap: calc(6 * var(--u)); align-items: center;
}
.encart h3 {
  margin: 0; font-family: var(--serif); font-weight: 700;
  font-size: calc(26 * var(--u)); color: #24467f;
}
.encart p { font-style: italic; font-size: calc(15 * var(--u)); color: var(--encre-douce); }
.bouton {
  font: inherit;
  font-family: var(--capitales);
  font-size: calc(17 * var(--u));
  letter-spacing: .08em;
  min-height: 44px;
  padding: calc(6 * var(--u)) calc(22 * var(--u));
  color: #fff;
  background: #24467f;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.bouton:hover { background: #1b3866; }
.bouton:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* ---------- navigation entre sections (en haut, au-dessus du livre) ---------- */
.navigation {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 8px;
  padding: 8px 16px;
  border: 1px solid var(--trait-2);
  border-radius: 999px;
  background: rgba(23, 40, 58, .75);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.navigation button {
  font: inherit;
  font-family: var(--capitales);
  font-weight: 600;
  font-size: 18px;
  width: 42px; height: 42px;
  padding: 0;
  color: var(--texte);
  background: transparent;
  border: 1px solid var(--trait-2);
  border-radius: 50%;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.navigation button:hover { color: var(--or-clair); border-color: var(--or); transform: translateY(-1px); }
.navigation button[aria-current="true"] {
  color: var(--nuit); background: var(--or); border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(214,180,108,.25);
}
.navigation button.fleche { border-radius: 50%; font-size: 26px; line-height: 1; color: var(--or); border-color: var(--or); }
.navigation button.fleche:hover { background: var(--or); color: var(--nuit); }
.navigation button:disabled { opacity: .25; cursor: default; transform: none; background: transparent; color: var(--or); }
.navigation button:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.navigation .separation { width: 1px; height: 26px; background: var(--or); opacity: .55; margin: 0 4px; }
.navigation .repere {
  margin: 0 0 0 10px;
  padding-left: 14px;
  border-left: 1px solid var(--trait-2);
  display: flex; flex-direction: column; line-height: 1.15;
  min-width: 15em;
}
.repere-num { font-family: var(--capitales); font-size: 14px; letter-spacing: .15em; color: var(--texte-doux); }
.repere-titre { font-style: italic; font-size: 19px; color: var(--or); }

/* ---------- fenêtre des animations Flash (Ruffle) ---------- */
dialog.animation {
  width: min(96vw, 1000px);
  max-height: 96vh;
  padding: 0;
  border: 1px solid var(--or);
  background: var(--nuit);
  color: var(--texte);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
dialog.animation::backdrop { background: rgba(5, 10, 18, .78); }
.animation-tete {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px;
  border-bottom: 1px solid var(--trait);
}
.animation-tete [role="tab"] {
  font: inherit; font-size: 17px;
  min-height: 40px; padding: 0 14px;
  color: var(--texte-doux); background: transparent;
  border: 1px solid transparent; border-radius: 3px; cursor: pointer;
}
.animation-tete [role="tab"][aria-selected="true"] { color: var(--or); border-color: var(--or); }
.animation-tete [role="tab"]:hover { color: var(--or-clair); }
.animation-tete .fermer {
  margin-left: auto;
  font: inherit; font-family: var(--capitales); font-size: 16px; letter-spacing: .1em;
  min-height: 40px; padding: 0 14px;
  color: var(--texte); background: transparent;
  border: 1px solid var(--trait-2); border-radius: 3px; cursor: pointer;
}
.animation-tete .fermer:hover { border-color: var(--or); color: var(--or-clair); }
.animation-cadre { background: #fff; width: 100%; }
.animation-cadre ruffle-player, .animation-cadre ruffle-object { display: block; width: 100%; height: 100%; }
.animation-pied { padding: 8px 12px; font-size: 14px; color: var(--texte-doux); }
.animation-pied a { color: var(--or); }

/* ---------- petits écrans : on autorise le défilement ---------- */
@media (max-width: 760px), (max-height: 520px) and (max-width: 1000px) {
  .livre { width: 100%; aspect-ratio: auto; container-type: normal; --u: 1px; }
  .section { position: static; grid-template-columns: 1fr; }
  .page.gauche, .page.droite { border-radius: 4px; }
  .page.droite { margin-top: 10px; }
  .planche { flex: none; height: 70vh; }
  .extensible, .rangee { flex: none; }
  .extensible img, .rangee > figure img { height: auto; }
  .rangee { flex-direction: column; }
  .livre::before { display: none; }
  .barre .chapitre-titre { display: none; }
  .navigation { border-radius: 12px; }
  .navigation .repere { flex-basis: 100%; margin: 4px 0 0; padding: 0; border: 0; text-align: center; min-width: 0; }
}

/* siècles en petites capitales : <span class="sc">xiii</span><sup>e</sup> */
.sc { font-variant: small-caps; }