/* =========================================================
   Chapitre IX — L'essor des sciences en terres musulmanes
   Complète chapitre.css.
   ========================================================= */
.page .texte { font-size: calc(17.5 * var(--u)); line-height: 1.36; }
.page .petit-texte { font-size: calc(14.5 * var(--u)); line-height: 1.3; color: var(--encre-douce); }
.page.droite { gap: calc(9 * var(--u)); }
.partie .dates { font-size: .5em; font-weight: 600; color: var(--sepia); white-space: nowrap; }

/* la flûte, dans le bandeau */
.barre-droite { display: flex; align-items: center; gap: 18px; }
.musique { font: inherit; font-size: 15px; color: var(--or); background: transparent; border: 1px solid rgba(214,180,108,.5); border-radius: 999px; padding: 4px 14px; cursor: pointer; }
.musique:hover { background: rgba(214,180,108,.15); }
.musique[aria-pressed="true"] { background: #d6b46c; color: #0e1824; }
.musique[aria-pressed="true"]::after { content: " ❚❚"; font-size: .8em; }

/* cartes */
.carte-monde { flex: 1 1 0; min-height: 0; justify-content: center; gap: calc(8 * var(--u)); }
.carte-monde svg { width: 100%; height: auto; max-height: 100%; display: block; box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.3); }
.m-mer { fill: #f4efe2; }
.m-terre { fill: #cdbb8e; stroke: #6b5a36; stroke-width: .8; }
.m-islam { fill: #6aa357; fill-opacity: .85; }
.m-ville { fill: #c8372d; stroke: #fff; stroke-width: 1.2; }
.m-nom { font: 700 21px var(--serif); fill: #2a1d0e; paint-order: stroke; stroke: rgba(255,250,236,.9); stroke-width: 3.5px; stroke-linejoin: round; }
.m-mer-nom { font: italic 600 18px var(--serif); fill: #6f8aa8; letter-spacing: .08em; }
.m-inst { cursor: pointer; pointer-events: bounding-box; }
.m-islam, .m-mer-nom, .m-nom { pointer-events: none; }
.m-inst circle.halo { fill: #ffd34d; fill-opacity: 0; stroke: #b5852a; stroke-width: 2; transition: fill-opacity .2s; }
.m-inst circle.coeur { fill: #24467f; stroke: #fff; stroke-width: 1.5; }
.m-inst text { font: 700 21px var(--serif); fill: #24467f; paint-order: stroke; stroke: rgba(255,250,236,.95); stroke-width: 3.5px; stroke-linejoin: round; }
.m-inst:hover circle.halo, .m-inst:focus circle.halo { fill-opacity: .55; }
.m-inst.choisi circle.halo { fill-opacity: .9; }
.m-inst.choisi circle.coeur { fill: #b23a2e; }
.m-inst:focus { outline: none; }

/* les savants */
.choix-savant { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(5 * var(--u)) calc(6 * var(--u)); flex: none; }
.choix-savant button { font: inherit; font-family: var(--capitales); font-size: calc(15 * var(--u)); letter-spacing: .03em; padding: calc(2 * var(--u)) calc(11 * var(--u)); cursor: pointer; color: var(--encre); background: transparent; border: 1px solid rgba(122,90,28,.6); border-radius: 999px; }
.choix-savant button:hover { background: rgba(214,180,108,.35); }
.choix-savant button[aria-selected="true"] { background: #24467f; color: #fbf6ea; border-color: #24467f; }
.illustrations { flex: 1 1 0; min-height: 0; display: flex; }
.illus { flex: 1 1 0; min-height: 0; display: flex; gap: calc(14 * var(--u)); align-items: center; justify-content: center; }
.illus[hidden], .illus.trois[hidden] { display: none; }
.illus > figure { flex: 1 1 0; min-width: 0; height: 100%; justify-content: center; }
.illus > figure.seule { flex: 0 1 80%; }
.illus img { flex: 0 1 auto; width: auto; max-width: 100%; height: auto; max-height: 88%; margin: 0 auto; box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.3); background: #fff; }
.illus figcaption { font-size: calc(13.5 * var(--u)); }
.savant[hidden], .fiche[hidden] { display: none; }
.savant, .fiche { display: flex; flex-direction: column; gap: calc(9 * var(--u)); min-height: 0; }
.equation { border: 1px solid #c8b48a; background: rgba(251,246,234,.8); padding: calc(5 * var(--u)) calc(14 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.45; }
.equation p { margin: 0; display: flex; justify-content: space-between; gap: 1em; }
.equation span { font-family: "Cambria Math", "STIX Two Math", serif; font-style: italic; color: #24467f; font-weight: 600; margin-left: auto; }
.traducteurs { border-left: 3px solid #b5852a; padding: calc(4 * var(--u)) calc(12 * var(--u)); font-size: calc(16.5 * var(--u)); line-height: 1.3; font-style: italic; color: var(--encre); background: rgba(214,180,108,.12); }

/* Tusi */
#fig-tusi { flex: 1 1 0; height: 100%; gap: calc(6 * var(--u)); }
#fig-tusi svg { flex: 1 1 0; min-height: 0; width: 100%; }
.commandes { flex: none; display: flex; justify-content: center; }
.commandes button { font: inherit; font-family: var(--capitales); font-size: calc(15 * var(--u)); padding: calc(2 * var(--u)) calc(12 * var(--u)); cursor: pointer; color: var(--encre); background: transparent; border: 1px solid rgba(122,90,28,.6); border-radius: 999px; }
.t-grand { fill: #fbf6ea; stroke: #7a5a1c; stroke-width: 3; }
.t-petit { fill: rgba(36,70,127,.12); stroke: #24467f; stroke-width: 2.5; }
.t-diam { stroke: #b23a2e; stroke-width: 2; stroke-dasharray: 6 5; }
.t-point { fill: #b23a2e; stroke: #fff; stroke-width: 1.5; }
.t-rayon { stroke: #24467f; stroke-width: 1.5; }
.t-trace { fill: none; stroke: #b23a2e; stroke-width: 3; stroke-opacity: .5; }
.t-centre { fill: #7a5a1c; }

/* images dans le texte */
.avec-image { display: block; flex: none; }
.avec-image::after { content: ""; display: block; clear: both; }
.avec-image .texte { margin: 0 0 calc(8 * var(--u)); }
.page .flottant { float: right; width: 30%; margin: calc(2 * var(--u)) 0 calc(6 * var(--u)) calc(14 * var(--u)); display: block; }
.page .flottant.large { width: 46%; }
.page .flottant img { display: block; width: 100%; height: auto; box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.3); background: #fff; }
.page .flottant figcaption { font-size: calc(12.5 * var(--u)); line-height: 1.25; margin-top: calc(3 * var(--u)); }
.rangee.petites { flex: 0 0 auto; height: calc(250 * var(--u)); }
.rangee.petites figure { flex: 1 1 0; min-width: 0; align-items: center; }
.rangee.petites img { flex: none; height: calc(205 * var(--u)); width: auto; max-width: 100%; object-fit: cover; box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.3); }
.rangee.petites figcaption { font-size: calc(12.5 * var(--u)); }

@media (max-width: 760px) {
  .page .flottant, .page .flottant.large { float: none; width: 70%; margin: 0 auto 8px; }
  .illus { flex-direction: column; }
  .barre-droite .musique span { display: none; }
}
.illus.trois { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0,1fr) minmax(0,1fr); }
.illus.trois > figure { height: 100%; min-height: 0; }
.illus.trois > figure:first-child { grid-row: span 2; }
.illus .colonne { flex: 0 0 38%; height: 100%; display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-height: 0; }
.illus .colonne figure { flex: 1 1 0; min-height: 0; justify-content: center; }
.illus .colonne img { max-height: 70%; }
.fiche .bandeau { flex: none; }
.fiche .bandeau img { width: 100%; height: calc(150 * var(--u)); object-fit: cover; box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.3); }
.fiche .bandeau figcaption { font-size: calc(12.5 * var(--u)); }
#hommes .illus figure, #hommes .illus .colonne { max-height: 100%; overflow: hidden; }
.illustrations { overflow: hidden; }
/* zoom au survol sur toutes les images */
#hommes .illustrations, #hommes .illus figure, #hommes .illus .colonne, .fiche figure { overflow: visible; }
.illus figure, .fiche figure { position: relative; z-index: 5; }
.illus img, .fiche figure img { transition: transform .35s ease; cursor: zoom-in; position: relative; }
.illus figure:hover, .fiche figure:hover { z-index: 40; }
.illus figure:hover img { transform: scale(2); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.illus > figure:first-child img { transform-origin: left center; }
.illus > figure:not(:first-child) img, .illus .colonne img { transform-origin: right center; }
.illus.trois > figure:not(:first-child) img { transform-origin: right top; }
.illus.trois > figure:last-child img { transform-origin: right bottom; }
.illus > figure.seule img { transform-origin: center center; }
.illus > figure.seule:hover img { transform: scale(1.35); }
.fiche .flottant img { transform-origin: right top; }
.fiche .flottant:hover img { transform: scale(2.6); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.fiche .flottant.large:hover img { transform: scale(1.9); }
.fiche .rangee.petites figure:first-child img { transform-origin: left top; }
.fiche .rangee.petites figure:last-child img { transform-origin: right top; }
.fiche .rangee.petites figure:hover img { transform: scale(2.1); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.fiche .bandeau img { transform-origin: center top; }
.fiche .bandeau:hover img { transform: scale(1.4); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
#fig-tusi img, #fig-tusi:hover img { transform: none; }
@media (hover: none), (prefers-reduced-motion: reduce) { .illus figure:hover img, .fiche figure:hover img { transform: none; } }
/* le grand sextant */
#fig-sextant[hidden], .carte-monde[hidden] { display: none; }
#fig-sextant { flex: 1 1 0; min-height: 0; gap: calc(6 * var(--u)); }
#fig-sextant svg { flex: 1 1 0; min-height: 0; width: 100%; box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.3); }
#fig-sextant .commandes { flex-wrap: wrap; gap: calc(6 * var(--u)) calc(10 * var(--u)); align-items: center; font-size: calc(15 * var(--u)); }
#fig-sextant .commandes label { display: flex; align-items: center; gap: 6px; font-style: italic; }
#fig-sextant input[type="range"] { width: calc(150 * var(--u)); accent-color: #24467f; }
#fig-sextant output { font-weight: 700; min-width: 7em; }
.s-titre { font: 700 15px var(--capitales); letter-spacing: .08em; fill: #24467f; }
.s-txt { font: italic 600 14px var(--serif); fill: #3b2410; }
.s-info { font: 700 18px var(--serif); fill: #b23a2e; }
.s-grad { font: 700 13px var(--serif); fill: #3b2410; }
.s-petit { font: 600 10px var(--serif); fill: #3b2410; }
.voir-sextant { min-height: 34px; font-size: calc(15 * var(--u)); padding: calc(3 * var(--u)) calc(14 * var(--u)); }
.texte-sextant { display: flex; flex-direction: column; gap: calc(9 * var(--u)); }
a.voir-sextant { display: inline-block; text-decoration: none; }
#fig-sextant svg { overflow: hidden; }
/* le grand sextant : la photo de 1908 dans le texte */
.texte-sextant .flottant { width: 24%; position: relative; z-index: 5; }
.texte-sextant .flottant img { transition: transform .35s ease, box-shadow .35s ease; cursor: zoom-in; position: relative; transform-origin: right top; }
.texte-sextant .flottant:hover { z-index: 40; }
.texte-sextant .flottant:hover img { transform: scale(2.6); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.texte-sextant .avec-image .texte { text-align: justify; }