/* =========================================================
   Chapitre III — Hauteur des astres (1) : figures interactives
   Complète chapitre.css.
   ========================================================= */

/* --- figure interactive sur la page de gauche --- */
.figure-anim { flex: 1 1 0; min-height: 0; gap: calc(8 * var(--u)); }
.figure-anim svg { flex: 1 1 0; min-height: 0; width: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.commandes {
  flex: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: calc(8 * var(--u)) calc(14 * var(--u));
  font-family: var(--serif); font-size: calc(16 * var(--u)); color: var(--encre);
}
.commandes label { display: flex; align-items: center; gap: calc(8 * var(--u)); font-style: italic; }
.commandes input[type="range"] { width: calc(220 * var(--u)); accent-color: #24467f; }
.commandes button {
  font: inherit; font-family: var(--capitales); font-size: calc(15 * var(--u)); letter-spacing: .05em;
  padding: calc(3 * var(--u)) calc(14 * var(--u)); cursor: pointer; color: var(--encre);
  background: transparent; border: 1px solid rgba(122,90,28,.6); border-radius: 999px;
}
.commandes button:hover { background: rgba(214,180,108,.35); }
.commandes button:focus-visible, .commandes input:focus-visible { outline: 2px solid #24467f; outline-offset: 2px; }

/* --- textes --- */
.page .consigne { font-style: italic; color: var(--sepia); font-size: calc(16.5 * var(--u)); }
.page h3.instrument {
  margin: calc(2 * var(--u)) 0 calc(-4 * var(--u)); font-family: var(--capitales); font-weight: 600;
  font-size: calc(18 * var(--u)); letter-spacing: .04em; color: #24467f;
}
.mesures-vives {
  display: grid; grid-template-columns: 1fr auto; gap: calc(4 * var(--u)) calc(16 * var(--u));
  margin: 0; padding: calc(10 * var(--u)) calc(16 * var(--u));
  border: 1px solid #c8b48a; background: rgba(251,246,234,.75);
  font-size: calc(17 * var(--u));
}
.mesures-vives dt { font-style: italic; color: var(--encre-douce); }
.mesures-vives dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--encre); }
.mesures-vives .blanc { color: #8a6a2a; }
.mesures-vives .bleu { color: #2a6fb3; }

/* trois instruments, page de gauche */
.trio { flex: 1 1 0; min-height: 0; display: grid; grid-template-rows: 1.2fr 1fr 1fr; gap: calc(10 * var(--u)); }
.trio figure { min-height: 0; }
.trio img { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: drop-shadow(calc(2 * var(--u)) calc(3 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.3)); }
.trio figcaption { font-size: calc(13.5 * var(--u)); }

/* --- dessins SVG : globe à l'encre --- */
.figure-anim .globe { fill: #e9dcbc; stroke: #5a4428; stroke-width: 1.4; }
#fig-angles .globe { fill: #2a5d93; stroke: #13304f; }
.figure-anim .parallele, .figure-anim .meridien { fill: none; stroke: #8d6e41; stroke-width: .8; stroke-dasharray: 3 3; }
.figure-anim .equateur { fill: none; stroke: #8a3a24; stroke-width: 1.2; }
.figure-anim .axe { stroke: #5a4428; stroke-width: 1.2; stroke-dasharray: 6 4; }
#fig-angles .axe { stroke: #e9dcbc; stroke-opacity: .8; }
.figure-anim .lettre { font: 700 15px var(--serif); fill: #3b2a14; }
.figure-anim .petit { font: italic 14px var(--serif); fill: #5a4428; }
.figure-anim .lieu { fill: #8a3a24; }
.figure-anim .lieu-nom { font: italic 700 20px var(--serif); fill: #3b2a14; }
.figure-anim .lieu-lat { font: 16px var(--serif); fill: #5a4428; }
.figure-anim .coque { fill: #3b2a14; }
.figure-anim .voiles { fill: #fbf6ea; stroke: #3b2a14; stroke-width: 1; stroke-linejoin: round; }

/* panneaux de ciel (nuit) */
.ciel-fond { fill: #12223a; }
.ciel-mer { fill: #0b1626; fill-opacity: .78; }   /* les astres sous l'horizon restent devinés */
.ciel-horizon { stroke: #9ed4ff; stroke-width: 1; stroke-opacity: .8; }
.ciel-cadre { fill: none; stroke: #7a5a1c; stroke-width: 2; }
.ciel-traits path, .ciel-traits-p { fill: none; stroke: #d6b46c; stroke-opacity: .45; stroke-width: 1; }
.ciel-etoiles circle, .etoile-p { fill: #fff6d8; }
.ciel-etoiles circle.polaire { fill: #ffffff; filter: drop-shadow(0 0 3px #fff); }
.ciel-noms text, .nom-p { font: italic 13px var(--serif); fill: #e9d9a8; }
.ciel-titre { font: 600 14px var(--capitales); letter-spacing: .06em; fill: #d6b46c; }

/* figure 2 : les angles */
#fig-angles svg { background: #1d3f68; border-radius: 6px; }
.etoile-fond { fill: #fff6d8; opacity: .8; transition: opacity .2s; }
.etoile-fond.sous-horizon { opacity: .18; }
#fig-angles .petit { fill: #e9dcbc; }
.equateur-plan { stroke: #e9dcbc; stroke-opacity: .6; stroke-width: 1; }
.rayon { stroke: #fbf6ea; stroke-width: 1.4; }
.angle-blanc { fill: rgba(251,246,234,.55); stroke: #fbf6ea; stroke-width: 1.2; }
.horizon { stroke: #9ed4ff; stroke-width: 1; }
.visee { stroke: #fff2b0; stroke-width: 1.6; }
.fleche { fill: #fff2b0; }
.angle-bleu { fill: rgba(80,170,255,.55); stroke: #8fd0ff; stroke-width: 1.2; }
#fig-angles .visee-nom { fill: #fff2b0; }
#fig-angles .voiles { fill: #fbf6ea; }
#fig-angles .coque { fill: #0e1824; }
.poignee { cursor: grab; }
.poignee:active { cursor: grabbing; }
.poignee .zone { fill: rgba(255,255,255,.14); stroke: rgba(255,255,255,.5); stroke-dasharray: 3 3; }
.poignee:focus-visible .zone { stroke: #fff2b0; stroke-width: 2; stroke-dasharray: none; }
.poignee:focus { outline: none; }

/* figure 3 : le Regimento */
.cercle-polaire { fill: none; stroke: #fff2b0; stroke-opacity: .6; stroke-dasharray: 2 3; }
.homme { fill: none; stroke: #9ed4ff; stroke-opacity: .35; stroke-width: 1.2; }
.homme-nom { font: italic 14px var(--serif); fill: #9ed4ff; fill-opacity: .8; }
.pole { stroke: #ff9c7a; stroke-width: 1.6; }
.pole-nom { font: italic 13px var(--serif); fill: #ff9c7a; }

/* figure 4 : la précession */
.cercle-precession { fill: none; stroke: #ff9c7a; stroke-opacity: .7; stroke-width: 1.4; stroke-dasharray: 5 4; }
.repere-date { fill: #ff9c7a; }
.date-p { font: 600 13px var(--serif); fill: #ffb89e; }
.pole-ecl { stroke: #d6b46c; stroke-opacity: .7; }
.nom-p.discret { font-size: 12px; fill-opacity: .6; }
.pole-p { stroke: #ff9c7a; stroke-width: 2.2; }
.pole-p-halo { fill: rgba(255,156,122,.25); stroke: #ff9c7a; }

@media (max-width: 760px) {
  .figure-anim svg { flex: none; height: 62vh; }
  .trio { grid-template-rows: none; }
  .trio img { height: auto; max-height: 40vh; }
}
.ciel-graduations line { stroke: #d6b46c; stroke-opacity: .6; }
.ciel-graduations text { font: 11px var(--serif); fill: #d6b46c; fill-opacity: .75; }
#trois-instruments .page.droite .texte { line-height: 1.3; }
.ciel-pole { stroke: #ff9c7a; stroke-width: 1.6; }
.ciel-etoiles .ciel-pole-halo { fill: none; stroke: #ff9c7a; stroke-opacity: .5; stroke-dasharray: 2 2; }
.ciel-pole-nom { font: italic 13px var(--serif); fill: #ffb89e; }
.epoques { display: inline-flex; }
.commandes .epoques button { border-radius: 0; }
.commandes .epoques button:first-child { border-radius: 999px 0 0 999px; }
.commandes .epoques button + button { border-radius: 0 999px 999px 0; border-left: none; }
.commandes .epoques button[aria-pressed="true"] { background: #24467f; color: #fbf6ea; border-color: #24467f; }
/* image flottante sur la page de droite (filé d'étoiles, toupie) */
.page .avec-image { display: block; flex: none; }
.page .avec-image::after { content: ""; display: block; clear: both; }
.page .avec-image .texte { margin: 0; }
.page .flottant { display: block; float: right; width: 42%; margin: calc(4 * var(--u)) 0 calc(6 * var(--u)) calc(16 * var(--u)); }
.page .flottant video { display: block; width: 100%; height: auto; background: #000; box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.35); }
.page .flottant img { display: block; flex: none; width: 100%; height: auto; min-height: 0; object-fit: initial; box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.35); }
.page .flottant figcaption { font-size: calc(12.5 * var(--u)); line-height: 1.25; margin-top: calc(4 * var(--u)); color: var(--encre-douce); font-style: italic; }
.page .mesures-vives { clear: both; }
/* figure 2 : la Terre en transparence */
#fig-angles .globe { fill: url(#degrade-terre); fill-opacity: .32; stroke: #9ed4ff; stroke-opacity: .7; stroke-width: 1.2; }
#fig-angles .continents { fill: #a9c98f; fill-opacity: .26; stroke: #d9f0c4; stroke-opacity: .35; stroke-width: .6; }
@media (max-width: 760px) { .page .flottant { float: none; width: 100%; margin: 0; } }
#regimento .mesures-vives { padding: calc(6 * var(--u)) calc(16 * var(--u)); row-gap: calc(1 * var(--u)); }
#regimento .flottant { margin-bottom: 0; }
#fig-sud .svg-globe { flex: 340 1 0; }
#fig-sud .svg-ciel { flex: 360 1 0; }
.ciel-fond-etoiles circle { fill: #e8eefc; opacity: .55; }
/* pôles de 1500 et d'aujourd'hui (section 1) */
.ciel-pole.pauj { stroke: #8fd8ff; } .ciel-etoiles .ciel-pole-halo.pauj { stroke: #8fd8ff; } .ciel-pole-nom.pauj { fill: #bfe8ff; }
/* trouver la polaire */
.ciel-traits path.fort { stroke-opacity: .8; stroke-width: 1.5; }
.guide-polaire { stroke: #ffd34d; stroke-width: 2; stroke-dasharray: 7 5; }
.guide-polaire.cas { stroke: #b9a7e0; }
.guide-pas { fill: #ffd34d; }
.guide-txt { font: 700 20px var(--serif); fill: #ffd34d; paint-order: stroke; stroke: #0b1626; stroke-width: 3px; }
.nom-constellation { font: italic 600 15px var(--serif); fill: #d6b46c; fill-opacity: .9; letter-spacing: .04em; }
.ciel-noms .nom-polaire { font-weight: 700; fill: #fff; font-size: 16px; }
#fig-trouver .commandes label { display: inline-flex; align-items: center; gap: 4px; }
.file-etoiles path { fill: none; stroke: #e8eefc; stroke-opacity: .45; stroke-width: .5; }
.file-etoiles path.brillantes { stroke: #fff6d8; stroke-opacity: .8; stroke-width: .8; }
#trouver-polaire .file-photo { flex: 1 1 0; min-height: 0; margin: 0; display: flex; flex-direction: column; align-items: center; }
#trouver-polaire .file-photo img { flex: 0 1 auto; min-height: 0; max-height: 100%; width: auto; max-width: 100%; object-fit: contain; box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.35); }
#trouver-polaire .file-photo figcaption { font-size: calc(13 * var(--u)); }
#trouver-polaire .page.droite { gap: calc(9 * var(--u)); }
#trouver-polaire .texte { font-size: calc(17 * var(--u)); line-height: 1.34; }
/* liens dans le texte des pages */
.page p a { color: #24467f; font-weight: 700; font-style: normal; text-decoration: underline; text-decoration-color: rgba(36,70,127,.45); text-underline-offset: 2px; }
.page p a:hover { color: #b23a2e; text-decoration-color: currentColor; }