/* =========================================================
   La sphère céleste du marin (sphere.js)
   ========================================================= */
.fig-sphere svg { background: #f8f2e2; border-radius: 6px; cursor: grab; touch-action: none; }
.fig-sphere .aide-sphere { margin: 0; text-align: center; font-size: calc(14 * var(--u)); }
.fig-sphere .commandes input[type="range"] { width: calc(120 * var(--u)); }
.sph-contour { fill: #fffaf0; stroke: #9aa7b2; stroke-width: 2.5; }
:is(.sph-horizon, .sph-equateur, .sph-meridien, .sph-horaire, .sph-vertical, .cote, .sph-arc-phi, .sph-arc-delta, .sph-arc-h) path { fill: none; }
.sph-horizon path { stroke: #5fb4e6; stroke-width: 2.5; }
.sph-equateur path { stroke: #d2343a; stroke-width: 2.5; }
.sph-meridien path, .sph-horaire path, .sph-vertical path { stroke: #7c7c7c; stroke-width: 1.2; }
.cote path { stroke-width: 4; stroke-linecap: round; }
.sph-pz path { stroke: #2f62c9; } .sph-pe path { stroke: #2f9a4a; } .sph-ze path { stroke: #e08a10; }
.sph-arc-phi path { stroke: #7b3fb0; stroke-width: 5; } .sph-arc-delta path { stroke: #b3261e; stroke-width: 5; } .sph-arc-h path { stroke: #c46a00; stroke-width: 5; }
path.ar { stroke-dasharray: 5 5; opacity: .45; }
.sph-triangle { fill: #2b1d0c; fill-opacity: .12; }
.sph-angle { fill: #f2c94c; fill-opacity: .7; stroke: #a17a10; stroke-width: 1; }
.sph-axe { stroke: #555; stroke-width: 1; stroke-dasharray: 4 4; }
.sph-point { fill: #2b1d0c; } .sph-point.p-E { fill: #f2b01e; stroke: #8a5a00; stroke-width: 1.5; }
.sph-point.derriere { opacity: .35; }
.sph-nom { font: 700 20px var(--serif); fill: #2b1d0c; text-anchor: middle; paint-order: stroke; stroke: #fffaf0; stroke-width: 4px; }
.sph-nom.petit-nom { font-size: 15px; font-weight: 600; fill: #5a4428; }
.sph-nom.derriere { opacity: .45; }
.sph-cote-nom { font: italic 700 17px var(--serif); }
.c-pz { fill: #2f62c9; } .c-pe { fill: #2f9a4a; } .c-ze { fill: #c46a00; } .c-h { fill: #8a6a00; }
.c-phi { fill: #7b3fb0; } .c-delta { fill: #b3261e; } .c-hh { fill: #c46a00; }
/* révélation progressive */
.fig-sphere svg:not(.vu-PN) :is(.sph-arc-phi, .c-phi), .fig-sphere svg:not(.vu-eE) :is(.sph-arc-delta, .c-delta),
.fig-sphere svg:not(.vu-e2E) :is(.sph-arc-h, .c-hh) { display: none; }
.fig-sphere svg.vu-tout :is(.sph-arc-phi, .sph-arc-delta, .sph-arc-h, .c-phi, .c-delta, .c-hh) { display: none; }
.fig-sphere svg:not(.vu-PZ):not(.etape-ab) .c-pz, .fig-sphere svg:not(.vu-PE):not(.etape-ab) .c-pe,
.fig-sphere svg:not(.vu-ZE):not(.etape-ab) .c-ze, .fig-sphere svg:not(.vu-H):not(.etape-ab) .c-h { display: none; }
.fig-sphere svg:not(.vu-H):not(.etape-ab) .sph-angle { display: none; }
.fig-sphere svg.etape-ab :is(.sph-horizon, .sph-equateur, .sph-meridien, .sph-horaire, .sph-vertical, .sph-axe, .p-N, .p-S, .p-Est, .p-Ouest, .p-e, .p-e2),
.fig-sphere svg.etape-ab .sph-nom.petit-nom, .fig-sphere svg.etape-ab .nom-ns { display: none; }
.fig-sphere svg.etape-ab .p-O { display: inline; }
/* les étapes */
.etapes { border: 1px solid #c8b48a; background: rgba(251,246,234,.8); padding: calc(8 * var(--u)) calc(14 * var(--u)); flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.etapes-tete { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.etapes-tete button { font: inherit; font-size: calc(22 * var(--u)); line-height: 1; padding: 0 calc(12 * var(--u)); cursor: pointer; color: var(--encre); background: transparent; border: 1px solid rgba(122,90,28,.6); border-radius: 999px; }
.etapes-tete button:disabled { opacity: .3; cursor: default; }
.etape-num { font-family: var(--capitales); font-size: calc(16 * var(--u)); letter-spacing: .04em; color: #24467f; text-align: center; }
.etape-texte { font-size: calc(16.5 * var(--u)); line-height: 1.35; text-align: justify; }
.formule-etape { display: block; text-align: center; font-weight: 700; color: #24467f; margin: calc(5 * var(--u)) 0; font-size: calc(17 * var(--u)); }
.formule-etape.grande { font-size: calc(21 * var(--u)); }
.mesures-vives.verif { font-size: calc(15 * var(--u)); }
.fig-sphere .commandes { gap: calc(4 * var(--u)) calc(10 * var(--u)); }
.fig-sphere .commandes input[type="range"] { width: calc(90 * var(--u)); }
.fig-sphere .commandes output { font-style: normal; font-weight: 700; min-width: 3.2em; font-variant-numeric: tabular-nums; }
.c-h { font-size: 19px; }
.sph-grille path { fill: none; stroke: #9aa7b2; stroke-width: 1; }
.sph-grille.eq path { stroke: #7f8c97; stroke-width: 1.8; }
.sph-pole-g { fill: #5a6672; } .sph-pole-g.derriere { opacity: .35; }
.fig-sphere svg:not(.etape-ab) :is(.sph-grille, .sph-pole-g, .sph-pole-nom) { display: none; }
.sph-pole-nom { font-size: 15px; font-weight: 600; fill: #5a6672; }
.etape-texte { flex: 1 1 auto; }
.etape-pied { margin-top: auto; padding-top: calc(8 * var(--u)); border-top: 1px solid #c8b48a; display: flex; justify-content: space-between; gap: calc(10 * var(--u)); }
.lien-etape { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font: inherit; font-family: var(--serif); font-weight: 700; font-size: calc(16 * var(--u)); color: #24467f; background: rgba(36,70,127,.06); border: 1px solid rgba(36,70,127,.45); border-radius: 8px; padding: calc(4 * var(--u)) calc(12 * var(--u)); cursor: pointer; text-align: left; max-width: 48%; }
.lien-etape small { font-family: var(--capitales); font-weight: 600; font-size: calc(12.5 * var(--u)); letter-spacing: .05em; color: var(--sepia); }
.lien-etape.suivante { margin-left: auto; align-items: flex-end; text-align: right; background: #24467f; color: #fbf6ea; border-color: #24467f; }
.lien-etape.suivante small { color: #e9dcbc; }
.lien-etape:hover { filter: brightness(1.1); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.sph-plan { fill: #6f8fb0; fill-opacity: .13; stroke: none; }
.sph-plan.celeste { fill: #d2343a; fill-opacity: .08; }
.fig-sphere .commandes label[hidden] { display: none; }
.sph-rayon-o { stroke: #2b1d0c; stroke-width: 1.2; stroke-dasharray: 5 3; stroke-opacity: .7; }
.fig-sphere svg:not(.etape-ab) .sph-rayon-o { display: none; }
.sph-halo circle { fill: #ffd34d; fill-opacity: .35; stroke: #f2b01e; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: halo-astre 2.2s ease-out infinite; pointer-events: none; }
.sph-halo .onde2 { animation-delay: 1.1s; }
.sph-halo.derriere { opacity: .4; }
@keyframes halo-astre { from { transform: scale(.4); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sph-halo circle { animation: none; opacity: .5; } }
.fig-sphere svg.etape-ab :is(.sph-halo, .sph-observateur) { display: none; }
.sph-observateur { opacity: .6; }
.sph-observateur circle { fill: #fff; stroke: #5a4428; stroke-width: 1.2; }
.sph-observateur path { fill: none; stroke: #5a4428; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* replacer la sphère : zénith vertical / pôle céleste vertical */
.fig-sphere .vue-sphere { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(4 * var(--u)) calc(8 * var(--u)); }
.fig-sphere .vue-sphere button { font: inherit; font-size: calc(13.5 * var(--u)); padding: calc(2 * var(--u)) calc(10 * var(--u)); border: 1px solid #b89a5e; border-radius: 999px; background: transparent; color: #24467f; cursor: pointer; }
.fig-sphere .vue-sphere button:hover { background: rgba(214,180,108,.3); }
.fig-sphere .vue-sphere button[aria-pressed="true"] { background: #24467f; border-color: #24467f; color: #fbf6ea; }
.fig-sphere .vue-sphere button:focus-visible { outline: 2px solid #24467f; outline-offset: 2px; }
.sph-plan.horizon { fill: #5fb4e6; fill-opacity: .16; }
.fig-sphere svg.etape-ab .sph-plan.horizon { display: none; }
.fig-sphere .vue-sphere button[hidden] { display: none; }
.sph-est-ouest { stroke: #8a4fb8; stroke-width: 1; }
.fig-sphere svg.etape-ab .sph-est-ouest { display: none; }

/* étape 9 : le mouvement diurne */
.sph-diurne path { fill: none; stroke: #c98a0c; }
.sph-diurne.haut .av { stroke-width: 2.6; }
.sph-diurne.haut .ar { stroke-width: 1.6; stroke-opacity: .55; }
.sph-diurne.bas path { stroke-width: 1.4; stroke-dasharray: 3 4; stroke-opacity: .7; }
.sph-diurne.bas .ar { stroke-opacity: .35; }
.fig-sphere svg:not(.diurne) :is(.sph-diurne, .sph-repere) { display: none; }
.sph-repere .pt { fill: #fbf6ea; stroke: #8a4fb8; stroke-width: 2; }
.r-culmin .pt { stroke: #c98a0c; }
.sph-repere .eclair { fill: #f4c430; opacity: 0; }
.sph-repere.flash .eclair { animation: eclair-repere 1.1s ease-out; }
@keyframes eclair-repere { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }
.sph-repere-nom { font-family: var(--serif); font-size: 15px; font-weight: 700; font-style: italic; fill: #5b2f86; text-anchor: middle; paint-order: stroke; stroke: #f8f2e2; stroke-width: 3px; }
.r-culmin .sph-repere-nom { fill: #8a5a00; }
.sph-repere.derriere { opacity: .5; }
.fig-sphere svg.diurne :is(.sph-cote-nom, .sph-angle, .sph-triangle, .cote, .sph-horaire, .sph-arc-phi, .sph-arc-delta, .sph-arc-h) { display: none; }
.presets { display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)) calc(6 * var(--u)); margin: calc(6 * var(--u)) 0 calc(4 * var(--u)); }
.presets button, .diurne-ligne .lecture { font: inherit; font-size: calc(13.5 * var(--u)); line-height: 1.2; padding: calc(2 * var(--u)) calc(9 * var(--u)); border: 1px solid #b89a5e; border-radius: 999px; background: transparent; color: #24467f; cursor: pointer; text-align: left; }
.presets button:hover, .diurne-ligne .lecture:hover { background: rgba(214,180,108,.3); }
.presets button[aria-pressed="true"] { background: #24467f; border-color: #24467f; color: #fbf6ea; }
.diurne-ligne { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(15 * var(--u)); }
.diurne-heure { font-variant-numeric: tabular-nums; font-weight: 700; }
.diurne-res { display: grid; grid-template-columns: auto 1fr; gap: 0 calc(10 * var(--u)); margin: calc(4 * var(--u)) 0 0; font-size: calc(14.5 * var(--u)); }
.diurne-res dt { font-style: italic; color: var(--encre-douce, #5a4a32); }
.diurne-res dd { margin: 0; font-weight: 600; }
.diurne-note { margin: calc(3 * var(--u)) 0 0; font-size: calc(12.5 * var(--u)); font-style: italic; color: var(--encre-douce, #5a4a32); }
.section.etape-diurne .verif { display: none; }
.diurne-expl { margin: calc(6 * var(--u)) 0 0; padding: calc(6 * var(--u)) calc(10 * var(--u)); border: 1px solid #b89a5e; border-left: calc(4 * var(--u)) solid #c98a0c; background: rgba(255,248,226,.85); border-radius: calc(3 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: 1.3; }
.diurne-expl[hidden] { display: none; }
.diurne-expl .action-preset { font: inherit; font-size: calc(13.5 * var(--u)); margin-left: calc(4 * var(--u)); padding: calc(1 * var(--u)) calc(9 * var(--u)); border: 1px solid #24467f; border-radius: 999px; background: #24467f; color: #fbf6ea; cursor: pointer; }
.diurne-expl .action-preset:hover { background: #2f5a9e; }
.section.etape-diurne .etape-pied { display: none; }


/* une seule étape : pas de navigation */
.etapes.unique :is(.etape-prec, .etape-suiv) { visibility: hidden; }
.etapes.unique .etape-pied { display: none; }
.etapes.unique .etape-num { font-weight: 600; }

/* mode « terre » : la sphère devient le globe, Z la ville, E La Mecque */
.fig-sphere svg.terre :is(.sph-horizon, .sph-plan.horizon, .sph-vertical, .sph-est-ouest, .sph-observateur, .sph-arc-phi, .sph-arc-delta, .sph-arc-h, .p-N, .p-S, .p-Est, .p-Ouest, .p-e, .p-e2, .p-O, .nom-ns),
.fig-sphere svg.terre .sph-nom.petit-nom, .fig-sphere svg.terre :is(.c-phi, .c-delta, .c-hh) { display: none; }
.fig-sphere svg:not(.terre) :is(.angle-z, .c-q) { display: none; }
.sph-angle.angle-z { fill: #8fd0a0; fill-opacity: .75; stroke: #2f7a44; }
.c-q { fill: #2f7a44; font-size: 17px; }
.sph-contour { transition: fill .3s; }
.fig-sphere svg.terre .sph-contour { fill: #eef4f7; }
.fig-sphere svg.terre .sph-horaire path { stroke: #5a6672; stroke-dasharray: none; }
.fig-sphere svg.terre .sph-meridien path { stroke: #5a6672; }
.villes button[aria-pressed="true"] { background: #2f7a44; border-color: #2f7a44; color: #fbf6ea; }
.terre-res { font-size: calc(15.5 * var(--u)); }


/* la durée du jour */
.fig-duree svg { background: #f8f2e2; border-radius: 6px; }
.dj-grille line { stroke: #d8c9a6; stroke-width: 1; }
.dj-grille line.fort { stroke: #b89a5e; stroke-width: 1.4; }
.dj-axe { font: 14px var(--serif); fill: #5a4428; }
.dj-repere { font: italic 13px var(--serif); fill: #8a6a2a; }
.dj-courbe { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.dj-courbe.r0, .dj-nom.r0 { stroke: #c24a2c; fill: #c24a2c; }
.dj-courbe.r1, .dj-nom.r1 { stroke: #2f7a44; fill: #2f7a44; }
.dj-courbe.r2, .dj-nom.r2 { stroke: #2f62c9; fill: #2f62c9; }
.dj-courbe.r3, .dj-nom.r3 { stroke: #7b3fb0; fill: #7b3fb0; }
.dj-courbe.r4, .dj-nom.r4 { stroke: #5a6672; fill: #5a6672; }
path.dj-courbe { fill: none !important; stroke-opacity: .75; }
.dj-nom { font: italic 700 14px var(--serif); stroke: none !important; paint-order: stroke; }
.dj-courbe.choix { stroke: #c98a0c; stroke-width: 3.4; stroke-opacity: 1; }
.dj-curseur { stroke: #24467f; stroke-width: 1.4; stroke-dasharray: 5 4; }
.dj-point { fill: #f2b01e; stroke: #8a5a00; stroke-width: 2; }
.fig-duree .commandes output { font-style: normal; font-weight: 700; min-width: 5.5em; }
.duree-res { font-size: calc(15.5 * var(--u)); }
.etapes.unique { flex: 0 1 auto; }

/* la hauteur h mesurée par l'observateur, au centre O */
.sph-hauteur .secteur { fill: #f2b01e; fill-opacity: .55; stroke: #c46a00; stroke-width: 1.6; }
.sph-hauteur .visee { stroke: #c46a00; stroke-width: 2.2; }
.sph-hauteur .sol { stroke: #c46a00; stroke-width: 1.6; stroke-dasharray: 5 3; }
.sph-hauteur .nom-h { font: italic 700 20px var(--serif); fill: #8a4a00; text-anchor: middle; paint-order: stroke; stroke: #fbf6ea; stroke-width: 4px; }