/* =========================================================
   Annexe — Les calendriers
   Complète chapitre.css.
   ========================================================= */

/* les animations */
.figure-anim { flex: 1 1 0; min-height: 0; gap: calc(6 * var(--u)); }
.figure-anim svg { flex: 1 1 0; min-height: 0; width: 100%; display: block; user-select: none; -webkit-user-select: none; }
.commandes { flex: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: calc(6 * 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(170 * var(--u)); accent-color: #24467f; }
.commandes input[type="number"] { font: inherit; font-style: normal; font-weight: 700; width: 5.2em; padding: calc(2 * var(--u)) calc(6 * var(--u)); border: 1px solid #b89a5e; border-radius: calc(4 * var(--u)); background: #fbf6ea; color: var(--encre); }
#fig-julien .commandes input[type="number"] { width: 3.6em; }
#fig-julien .commandes input.n-annee { width: 5.6em; }
.commandes output { font-weight: 700; min-width: 6em; }
.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 .case { font-style: normal; }
.commandes .case input { accent-color: #24467f; width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

/* le ciel (sections 1 et 2) */
.ciel-fond { fill: #0e1d31; }
.ciel-etoiles circle { fill: #e8eefc; opacity: .55; }
.c-orbite { fill: none; stroke: #5aa9e6; stroke-width: 1.2; stroke-opacity: .6; }
.c-orbite-lune { fill: none; stroke: #b7bec7; stroke-width: 1; stroke-opacity: .5; stroke-dasharray: 3 3; }
.c-soleil { fill: #ffe066; stroke: #ffb703; stroke-width: 1.5; }
.c-terre-nuit { fill: #1d3d63; } .c-terre-jour { fill: #4b9be0; }
.c-terre-bord { fill: none; stroke: #cfe6ff; stroke-width: 1; }
.c-lune-nuit { fill: #3a3f47; } .c-lune-jour { fill: #e3e6ea; }
.c-visee-soleil { stroke: #ffd34d; stroke-width: 1.3; stroke-dasharray: 6 4; }
.c-visee-lune { stroke: #e3e6ea; stroke-width: 1.2; }
.c-etoile-dir { stroke: #9fb6d6; stroke-width: 1.4; marker-end: url(#fleche-etoile); }
.c-etoile-dir.repere { stroke: #f2c14e; stroke-width: 2; }
.c-texte { font: 18px var(--serif); fill: #c9d6e8; }
.c-texte.fort { font-weight: 700; fill: #fbf6ea; font-size: 20px; }
.c-texte.or { fill: #f2c14e; font-weight: 700; }
.c-texte.centre { text-anchor: middle; }
.c-medaillon { fill: none; stroke: #d6b46c; stroke-width: 1.5; }
.c-flash { font: italic 700 18px var(--serif); fill: #f2c14e; text-anchor: middle; paint-order: stroke; stroke: #0e1d31; stroke-width: 4px; transition: opacity .6s; }
.zod .anneau { fill: none; stroke: rgba(214,180,108,.1); stroke-width: 44; }
.zod .trait { fill: none; stroke: #8fa6c2; stroke-width: 1; stroke-opacity: .55; }
.zod .trait.fin { stroke-opacity: .28; }
.zod .signe { font: 22px "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols", serif; fill: #d6b46c; text-anchor: middle; }
.zod .signe-oph path { fill: none; stroke: #d6b46c; stroke-width: 1.8; stroke-linecap: round; }
.zod .mois { font: 600 15px var(--capitales); letter-spacing: .1em; fill: #c9d6e8; fill-opacity: .75; text-anchor: middle; dominant-baseline: central; }
.zod .jour { stroke: #c9d6e8; stroke-opacity: .35; stroke-width: .8; }
.zod .jour.dix { stroke-opacity: .6; }
.zod .jour.mois1 { stroke: #d6b46c; stroke-opacity: .9; stroke-width: 1.4; }
.zod .saison { fill: #f2c14e; }
.zod .saison-nom { font: italic 600 14px var(--serif); fill: #f2c14e; text-anchor: middle; dominant-baseline: central; }
.zod .etoile-b { fill: #fbf6ea; }
.zod .etoile-nom { font: italic 15px var(--serif); fill: #e8eefc; text-anchor: middle; }
.z-curseur { stroke: #f2c14e; stroke-width: 2.4; }
.z-nom { font: italic 700 19px var(--serif); fill: #ffd34d; text-anchor: middle; paint-order: stroke; stroke: #0e1d31; stroke-width: 4px; }

/* page de droite */
.parametres { flex: none; width: 100%; border-collapse: collapse; font-size: calc(15 * var(--u)); line-height: 1.22; }
.parametres th { text-align: left; font-weight: 700; padding: calc(3 * var(--u)) calc(8 * var(--u)) calc(3 * var(--u)) 0; white-space: nowrap; color: #24467f; }
.parametres td { padding: calc(3 * var(--u)) calc(6 * var(--u)); vertical-align: top; }
.parametres td:nth-child(2) { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.parametres tr { border-bottom: 1px solid rgba(122,90,28,.25); }
.parametres tr.actif { background: rgba(242,193,78,.3); }
.parametres button { font: inherit; font-size: calc(13 * var(--u)); font-family: var(--capitales); padding: 0 calc(8 * var(--u)); margin-left: calc(4 * var(--u)); border: 1px solid #24467f; color: #24467f; background: transparent; border-radius: 999px; cursor: pointer; }
.parametres button:hover { background: #24467f; color: #fbf6ea; }
.encart-cal { flex: none; border: 1px solid #b89a5e; border-left: calc(4 * var(--u)) solid #c98a0c; background: rgba(255,248,226,.85); padding: calc(6 * var(--u)) calc(12 * var(--u)); font-size: calc(15.5 * var(--u)); line-height: 1.3; }
.mesures-cal { flex: none; display: grid; grid-template-columns: auto 1fr; gap: calc(2 * var(--u)) calc(14 * var(--u)); margin: 0; padding: calc(6 * var(--u)) calc(12 * var(--u)); border: 1px solid #c8b48a; background: rgba(251,246,234,.75); font-size: calc(15.5 * var(--u)); }
.mesures-cal dt { font-style: italic; color: var(--encre-douce); }
.mesures-cal dd { margin: 0; font-weight: 700; color: var(--encre); }
.consigne { font-style: italic; color: var(--encre-douce); }

/* les calendriers : onglets */
.choix-cal { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(5 * var(--u)) calc(6 * var(--u)); flex: none; }
.choix-cal 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-cal button:hover { background: rgba(214,180,108,.35); }
.choix-cal 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: grid; gap: calc(10 * var(--u)); }
.illus[hidden] { display: none; }
.illus.deux { grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr); }
.illus.quatre { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.illus.trois-cal { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1.15fr); }
.illus.trois-cal > figure:first-child { grid-column: span 2; }
.illus figure { min-height: 0; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 5; }
.illus img { flex: 0 1 auto; min-height: 0; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.3); background: #fff; transition: transform .35s ease, box-shadow .35s ease; cursor: zoom-in; position: relative; }
.illus figcaption { flex: none; font-size: calc(13 * var(--u)); line-height: 1.2; text-align: center; margin-top: calc(3 * var(--u)); font-style: italic; color: var(--encre-douce); }
.illus figure:hover { z-index: 40; }
.illus figure:not(.schema):hover img { transform: scale(2); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.illus.quatre > figure:nth-child(odd) img { transform-origin: left center; }
.illus.quatre > figure:nth-child(even) img { transform-origin: right center; }
.illus.quatre > figure:nth-child(n+3) img { transform-origin: center bottom; }
.illus.quatre > figure:nth-child(3) img { transform-origin: left bottom; }
.illus.quatre > figure:nth-child(4) img { transform-origin: right bottom; }
.illus.trois-cal > figure:first-child img { transform-origin: center top; }
.illus.trois-cal > figure:first-child:hover img { transform: scale(1.5); }
.illus.deux > figure:last-child img { transform-origin: center bottom; }
.illus figure.etroite img { max-height: 100%; }
.illus .schema svg { flex: 1 1 0; min-height: 0; width: 100%; }
.illus .schema figcaption { font-style: normal; }
.illus .schema label { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-style: italic; }
.illus .schema input[type="range"] { width: calc(120 * var(--u)); accent-color: #24467f; }
.illus .schema output { font-weight: 700; font-style: normal; }
.cal[hidden] { display: none; }
.cal { display: flex; flex-direction: column; gap: calc(7 * var(--u)); min-height: 0; }
.cal .texte { margin: 0; }
.cal .dates { font-size: .62em; font-style: italic; font-weight: 400; color: var(--encre-douce); }
.mois-liste { margin: 0; font-size: calc(14 * var(--u)); line-height: 1.3; padding: calc(5 * var(--u)) calc(10 * var(--u)); border-top: 1px solid rgba(122,90,28,.35); border-bottom: 1px solid rgba(122,90,28,.35); }
.fractions { width: 100%; border-collapse: collapse; font-size: calc(14.5 * var(--u)); }
.fractions th { font-weight: 600; font-style: italic; text-align: left; border-bottom: 1px solid #b89a5e; padding: calc(2 * var(--u)) calc(6 * var(--u)); color: var(--encre-douce); }
.fractions td { padding: calc(2 * var(--u)) calc(6 * var(--u)); border-bottom: 1px solid rgba(122,90,28,.2); }
.fractions td:nth-child(2) { font-variant-numeric: tabular-nums; font-weight: 700; }
.fractions tr:last-child td { background: rgba(242,193,78,.25); }

/* schémas des calendriers */
.roue-egypte text { font: 12px var(--serif); fill: #3b2a14; text-anchor: middle; dominant-baseline: central; }
.roue-egypte .saison-t { font: 600 13px var(--capitales); letter-spacing: .08em; fill: #fbf6ea; }
.roue-egypte .centre-t { font: 700 18px var(--serif); fill: #3b2a14; }
.ramadan-svg text { font: 12px var(--serif); fill: #3b2a14; text-anchor: middle; dominant-baseline: central; }
.ramadan-svg .gros { font: 700 14px var(--serif); }

/* les algorithmes */
.bloc-code { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; border-radius: calc(6 * var(--u)); overflow: hidden; box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.35); background: #1b2230; }
.code-tete { flex: none; display: flex; align-items: center; justify-content: space-between; padding: calc(4 * var(--u)) calc(10 * var(--u)); background: #252e40; color: #9fb0c8; font: calc(13 * var(--u)) ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.copier { font: 600 calc(13 * var(--u)) var(--serif); padding: calc(1 * var(--u)) calc(12 * var(--u)); border-radius: 999px; border: 1px solid #6c7d99; background: transparent; color: #dfe7f3; cursor: pointer; }
.copier:hover { background: #3a4760; }
.copier.ok { border-color: #7fc98a; color: #7fc98a; }
.bloc-code pre { flex: 1 1 0; min-height: 0; overflow: auto; margin: 0; padding: calc(8 * var(--u)) calc(12 * var(--u)); font: calc(13 * var(--u))/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", monospace; color: #dfe7f3; tab-size: 4; }
.bloc-code code { font: inherit; white-space: pre; }
.py-com { color: #8a9bb3; font-style: italic; }
.py-str { color: #a8d38a; }
.py-doc { color: #c9b98a; font-style: italic; }
.py-mot { color: #f08bb0; font-weight: 600; }
.py-num { color: #f2b77c; }
.py-fn { color: #82c4f2; }
.py-bi { color: #d3a8f0; }

/* bissextile, Pâques, identiques, jour julien */
.b-case { stroke: #fbf6ea; stroke-width: 1; cursor: pointer; }
.b-commune { fill: #e9dfc6; } .b-bis { fill: #5b8fd6; } .b-sec { fill: #d4574a; } .b-400 { fill: #e6a91a; }
.b-case.choisie { stroke: #1b2230; stroke-width: 2.5; }
.b-t { font: 15px var(--serif); fill: #3b2a14; }
.b-t.fort { font-weight: 700; font-size: 17px; }
.b-noeud rect { fill: #fbf6ea; stroke: #b89a5e; stroke-width: 1.2; }
.b-noeud.actif rect { fill: #f7e3a8; stroke: #c98a0c; stroke-width: 2.2; }
.b-noeud text { font: 15px var(--serif); fill: #3b2a14; text-anchor: middle; dominant-baseline: central; }
.b-lien { stroke: #b89a5e; stroke-width: 1.4; fill: none; }
.b-lien.actif { stroke: #c98a0c; stroke-width: 3; }
.b-lien-t { font: italic 14px var(--serif); fill: #6a5432; text-anchor: middle; }
.p-case rect { fill: #fbf6ea; stroke: #d8c9a6; }
.p-case text { font: 15px var(--serif); fill: #3b2a14; text-anchor: middle; dominant-baseline: central; }
.p-case.dimanche text { fill: #b23a2e; }
.p-case.hors rect { fill: #efe6d0; } .p-case.hors text { fill: #b6a78a; }
.p-case.equinoxe rect { fill: #cfe3f6; }
.p-case.pleine rect { fill: #24467f; stroke: #24467f; stroke-width: 2; }
.p-case.pleine text { fill: #fbf6ea; font-weight: 700; }
.p-case.paques rect { fill: #f2c14e; stroke: #8a5a00; stroke-width: 2; }
.p-case.paques text { font-weight: 700; fill: #3b2a14; }
.p-mois { font: 600 17px var(--capitales); letter-spacing: .08em; fill: #24467f; text-anchor: middle; }
.p-js { font: italic 13px var(--serif); fill: #8a7350; text-anchor: middle; }
.p-leg text { font: 15px var(--serif); fill: #3b2a14; dominant-baseline: central; }
.p-var text { font: 13px ui-monospace, Menlo, Consolas, monospace; fill: #3b2a14; }
.p-var .val { font-weight: 700; fill: #24467f; }
.i-case rect { stroke: #fbf6ea; stroke-width: 1; cursor: pointer; }
.i-case text { font: 13.5px var(--serif); text-anchor: middle; dominant-baseline: central; fill: #2b2112; pointer-events: none; }
.i-case.bis rect { stroke: #1b2230; stroke-width: 2; }
.i-case.choisie rect { stroke: #b23a2e; stroke-width: 3.5; }
.i-case.pareil rect { stroke: #b23a2e; stroke-width: 3; stroke-dasharray: 4 2; }
.i-case.choisie text, .i-case.pareil text { font-weight: 700; }
.i-case.estompe { opacity: .35; }
.i-leg text { font: 14px var(--serif); fill: #3b2a14; dominant-baseline: central; }
.j-axe { stroke: #3b2a14; stroke-width: 1.5; }
.j-grad { stroke: #8a7350; stroke-width: 1; }
.j-grad-t { font: 13px var(--serif); fill: #6a5432; text-anchor: middle; }
.j-repere line { stroke: #8a7350; stroke-width: 1; stroke-dasharray: 3 3; }
.j-repere circle { fill: #24467f; }
.j-repere text { font: 14px var(--serif); fill: #3b2a14; }
.j-curseur line { stroke: #c98a0c; stroke-width: 2.5; }
.j-curseur circle { fill: #f2c14e; stroke: #8a5a00; stroke-width: 2; }
.j-gros { font: 700 38px var(--serif); fill: #24467f; text-anchor: middle; font-variant-numeric: tabular-nums; }
.j-moyen { font: italic 18px var(--serif); fill: #3b2a14; text-anchor: middle; }
.j-ecart { font: 16px var(--serif); fill: #3b2a14; text-anchor: middle; }

@media (max-width: 760px) {
  .figure-anim svg { flex: none; height: auto; }
  .illustrations { min-height: 70vh; }
  .bloc-code { flex: none; max-height: 70vh; }
  .illus figure:not(.schema):hover img { transform: none; }
}