/* =========================================================
   Chapitre VIII — L'heure qu'il est (la longitude)
   Complète chapitre.css.
   ========================================================= */
.page .texte { font-size: calc(17 * var(--u)); line-height: 1.34; }
.page .petit-texte { font-size: calc(15 * var(--u)); line-height: 1.3; color: var(--encre-douce); }
.page.droite { gap: calc(10 * var(--u)); }

/* citations */
.citation { margin: 0; padding: calc(4 * var(--u)) calc(14 * var(--u)); border-left: 3px solid #c8b48a; font-style: italic; font-size: calc(16.5 * var(--u)); line-height: 1.32; color: var(--encre); text-align: justify; }
.citation cite { display: block; margin-top: calc(3 * var(--u)); font-size: calc(14 * var(--u)); color: var(--encre-douce); text-align: right; }

/* images flottantes 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)); }
.avec-image .texte:last-of-type { margin-bottom: 0; }
.page .flottant { float: right; width: 26%; margin: calc(2 * var(--u)) 0 calc(6 * var(--u)) calc(16 * var(--u)); display: block; }
.page .flottant.droite-img { width: 42%; }
.page .flottant img { display: block; width: 100%; height: auto; box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.35); }
.page .flottant figcaption { font-size: calc(13 * var(--u)); line-height: 1.25; margin-top: calc(4 * var(--u)); }

.encart.idee { padding: calc(8 * var(--u)) calc(16 * var(--u)); gap: calc(3 * var(--u)); }
.encart.idee h3 { font-size: calc(21 * var(--u)); }
.encart.idee p { font-size: calc(15.5 * var(--u)); color: var(--encre); }

/* planche « schéma » (fond blanc) */
.planche.schema img { object-position: center center; background: #fff; padding: calc(10 * var(--u)); box-sizing: border-box; height: auto; max-height: 100%; align-self: center; }

/* la vidéo */
.video { flex: 1 1 0; justify-content: center; gap: calc(8 * var(--u)); }
.video video { width: 100%; height: auto; max-height: 100%; min-height: 0; background: #000; box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.4); }

/* chronomètres */
.rangee.chronometres { align-items: center; }
.rangee.chronometres figure { height: 100%; justify-content: center; }
.rangee.chronometres img { flex: 0 1 auto; width: auto; max-width: 100%; height: auto; max-height: 85%; margin: 0 auto; box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.35); }

/* trois observatoires */
.observatoires { flex: 1 1 0; min-height: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: calc(8 * var(--u)); }
.observatoires figure { min-height: 0; flex-direction: row; align-items: center; gap: calc(12 * var(--u)); }
.observatoires img { height: 100%; width: auto; max-width: 62%; object-fit: cover; box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.35); }
.observatoires figcaption { text-align: left; font-size: calc(15 * var(--u)); }

/* déclinaison : la carte animée */
.cadre-carte { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.cadre-carte canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; aspect-ratio: 351 / 293; background: #fff; box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.35); }
#fig-declinaison figcaption { font-size: calc(13 * var(--u)); }
#fig-declinaison .r-annee { width: calc(260 * var(--u)); }
.o-annee { font-size: calc(22 * var(--u)); min-width: 3em; }

/* exercice */
.question { font-size: calc(19 * var(--u)) !important; }
.reponse-exo { display: flex; flex-direction: column; align-items: flex-start; gap: calc(8 * var(--u)); }
.reponse-exo .bouton { min-height: 36px; font-size: calc(15 * var(--u)); padding: calc(4 * var(--u)) calc(16 * var(--u)); }
.consigne-anim { font-style: italic; color: var(--sepia); }

/* calculateur */
.calcul { display: flex; flex-direction: column; gap: calc(6 * var(--u)); font-size: calc(16 * var(--u)); }
.calcul .ligne { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--u)) calc(10 * var(--u)); }
.calcul input[type="time"], .calcul input[type="date"] { font: inherit; font-size: calc(16 * var(--u)); padding: 1px 6px; border: 1px solid #c8b48a; background: #fffaf0; color: var(--encre); }
.calcul .lieu { font-weight: 700; color: #24467f; }
.calcul label { display: inline-flex; align-items: center; gap: 5px; }
.calcul output { font-weight: 700; font-variant-numeric: tabular-nums; }
.mesures.etapes td:last-child { font-weight: 700; }

/* animations */
.figure-anim { flex: 1 1 0; min-height: 0; gap: calc(6 * var(--u)); }
.figure-anim > svg { overflow: hidden; flex: 1 1 0; min-height: 0; width: 100%; display: block; user-select: none; -webkit-user-select: none; touch-action: none; }
.figure-anim > svg:focus { outline: none; }
.commandes { flex: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(12 * var(--u)); font-family: var(--serif); font-size: calc(16 * var(--u)); color: var(--encre); }
.commandes label { display: flex; align-items: center; gap: calc(7 * var(--u)); font-style: italic; }
.commandes input[type="range"] { width: calc(160 * var(--u)); accent-color: #24467f; }
.commandes input[type="checkbox"] { accent-color: #24467f; }
.commandes output { font-weight: 700; font-variant-numeric: tabular-nums; }
.commandes button { font: inherit; font-family: var(--capitales); font-size: calc(15 * var(--u)); letter-spacing: .04em; 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; }
.commandes button:hover { background: rgba(214,180,108,.35); }
.commandes button[aria-pressed="true"], .annees button[aria-pressed="true"] { background: #24467f; color: #fbf6ea; border-color: #24467f; }
.bascule { display: inline-flex; }
.bascule button { border-radius: 0; }
.bascule button:first-child { border-radius: 999px 0 0 999px; }
.bascule button:last-child { border-radius: 0 999px 999px 0; }
.bascule button + button { border-left: none; }
.annees { gap: calc(5 * var(--u)); }
.annees button { padding: calc(1 * var(--u)) calc(9 * var(--u)); }
#fig-oppositions .r-date { width: calc(250 * var(--u)); }
.date-opp { min-width: 8.5em; }


/* dessins (SVG) */
.l-meridien-heure { stroke: #ffd34d; stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 3 4; }
.l-heure { font: 700 14px var(--serif); fill: #7a5a1c; }
.l-heure.midi { font-size: 17px; fill: #b23a2e; }
.l-bande-heure { fill: #ffd34d; fill-opacity: .38; stroke: #ffd34d; stroke-width: 1.5; }
.l-bande-blanche { fill: #ffffff; fill-opacity: .45; stroke: #ffffff; stroke-width: 1; }
.l-accolade { fill: none; stroke: #ffd34d; stroke-width: 3; stroke-linejoin: round; }
.l-pastille { fill: #0e1824; fill-opacity: .9; stroke: #ffd34d; stroke-width: 2; }
.l-pastille-txt { font: 700 22px var(--serif); fill: #ffd34d; }
.l-riviere { fill: #3d78a6; }
.l-air { fill: #dcebf5; }
.l-fond-riviere { fill: #8a7346; }
.l-filet { stroke: #e9f4fb; stroke-width: 2; stroke-linecap: round; stroke-opacity: .7; }
.l-tube { fill: none; stroke: #6b7f8f; stroke-width: 3; }
.l-eau-tube { fill: #3d78a6; }
.l-regle { stroke: #3b2410; stroke-width: 1; }
.l-regle-txt { font: 600 13px var(--serif); fill: #3b2410; }
.l-h { stroke: #e0574a; stroke-width: 2; }
.l-h-txt { font: italic 700 20px var(--serif); fill: #b23a2e; }

.l-mer { fill: #2a5d8a; }
.l-terre { fill: #d8c79c; stroke: #8a7346; stroke-width: .25; }
.l-grille { stroke: #ffffff; stroke-opacity: .25; stroke-width: .5; fill: none; }
.l-grille.fort { stroke-opacity: .55; stroke-width: .9; }
.l-ligne-coord { stroke: #ffd34d; stroke-width: 2; }
.l-etiquette { font: 600 16px var(--serif); fill: #fff; paint-order: stroke; stroke: rgba(10,25,45,.85); stroke-width: 3px; }
.l-etiquette.petite { font-size: 13px; }
.l-etiquette.grande { font-size: 19px; }
.l-info { font: italic 600 20px var(--serif); fill: #fff; paint-order: stroke; stroke: rgba(10,25,45,.85); stroke-width: 3px; }
.l-onde { fill: none; stroke: #ffd34d; stroke-width: 2.5; opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; }
.l-onde.a-midi { animation: onde-midi 1.1s ease-out infinite; }
@keyframes onde-midi { 0% { transform: scale(1); opacity: .95; } 100% { transform: scale(5); opacity: 0; } }
.l-ville.a-midi { fill: #ffd34d; stroke: #b23a2e; stroke-width: 2; r: 6px; filter: drop-shadow(0 0 5px #ffd34d); }
.l-nom-midi { opacity: 0; transition: opacity .3s; pointer-events: none; }
.l-nom-midi.a-midi { opacity: 1; fill: #ffd34d; }
text.l-etiquette.a-midi { fill: #ffd34d; }
.l-ville { fill: #e0574a; stroke: #fff; stroke-width: 1.2; }
.l-meridien-soleil { stroke: #ffd34d; stroke-width: 2.5; }
.l-soleil { fill: #ffe066; stroke: #ffb703; stroke-width: 2; cursor: grab; }
.l-nuit { fill: #06101c; fill-opacity: .45; }
.l-fuseau { stroke: #6b5a36; stroke-width: .3; cursor: pointer; }
.l-fuseau.pair { fill: #e8d9ae; }
.l-fuseau.impair { fill: #d3bf8a; }
.l-fuseau.choisi { fill: #f0b35a; }
.l-terre-contour { fill: #6b8f4e; fill-opacity: .28; stroke: #4a3412; stroke-width: .6; pointer-events: none; }
.villes-rapides button { padding: calc(1 * var(--u)) calc(10 * var(--u)); }
.l-trajet { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 5 5; }
.l-cadran { fill: #fbf6ea; stroke: #7a5a1c; stroke-width: 3; }
.l-aiguille { stroke: #1d1d1d; stroke-linecap: round; }
.l-chiffre { font: 600 15px var(--serif); fill: #3a2a14; text-anchor: middle; }
.l-boitier { fill: #8a6a32; stroke: #4a3412; stroke-width: 2; }
.l-mer-loch { fill: #2a5d8a; }
.l-ciel-loch { fill: #cfe3f2; }
.l-coque { fill: #6b4a2a; stroke: #3b2410; stroke-width: 1.5; }
.l-corde { fill: none; stroke: #f3ead2; stroke-width: 1.4; }
.l-noeud { fill: #e0574a; }
.l-sable { fill: #e9c97a; }
.l-verre { fill: rgba(255,255,255,.35); stroke: #6b4a2a; stroke-width: 1.5; }

@media (prefers-reduced-motion: reduce) { .l-onde.a-midi { animation: none; opacity: .8; transform: scale(2.2); } }
@media (max-width: 760px) {
  .page .flottant, .page .flottant.droite-img { float: none; width: 60%; margin: 0 auto 8px; }
  .observatoires { display: flex; flex-direction: column; }
}
#fig-fuseaux > svg { flex: none; height: auto; }
#fig-fuseaux { justify-content: flex-start; }
.page .flottant.loch { width: 38%; }
/* Taveuni : agrandissement au survol */
#meridien .flottant img { transition: transform .35s ease; transform-origin: right bottom; position: relative; z-index: 1; cursor: zoom-in; }
#meridien .flottant:hover img, #meridien .flottant:focus-within img { transform: scale(3.2); z-index: 20; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
#meridien .flottant { position: relative; z-index: 5; }