/* =========================================================
   Chapitre X — L'astrolabe planisphérique
   Page à défilement : l'astrolabe (Ruffle) dans un cadre ancien,
   puis l'histoire, la projection et le mode d'emploi.
   ========================================================= */
.titre-barre { font-family: var(--capitales); font-size: 18px; letter-spacing: .12em; color: var(--texte-doux); }
.tete { text-align: center; padding: 30px 16px 8px; background: radial-gradient(ellipse at 50% 100%, #1c3048 0%, var(--nuit) 70%); }
.surtitre-a { margin: 0; font-family: var(--capitales); letter-spacing: .3em; color: var(--or); font-size: 15px; }
.tete h1 { margin: 4px 0 0; font-weight: 600; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; color: var(--texte); }
.sous-titre { margin: 4px 0 0; font-style: italic; color: var(--texte-doux); font-size: 21px; }

/* ---------- le cadre ancien ---------- */
.cadre-ancien {
  --l: min(100vw - 32px, (100vh - 110px) * 1200 / 956, 1180px);
  position: relative;
  width: var(--l);
  margin: 18px auto 8px;
  padding: 26px;
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.08), transparent 55%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #5a3618 0%, #8a5a2b 22%, #5c3719 48%, #7d4f24 72%, #4a2c13 100%);
  box-shadow:
    0 18px 50px rgba(0,0,0,.65),
    inset 0 0 0 2px #2c190a,
    inset 0 0 0 6px #b98d4a,
    inset 0 0 0 8px #2c190a,
    inset 0 0 18px rgba(0,0,0,.6);
}
.cadre-ancien::before {   /* filet doré intérieur */
  content: ""; position: absolute; inset: 15px; border-radius: 3px; pointer-events: none;
  border: 2px solid #d6b46c;
  box-shadow: 0 0 0 1px #3b230e, inset 0 0 0 1px #3b230e, inset 0 0 0 4px rgba(214,180,108,.35);
}
.coin { position: absolute; width: 38px; height: 38px; pointer-events: none; z-index: 2;
  background:
    radial-gradient(circle at 50% 50%, #f1d58e 0 5px, #9a6f2c 6px 7px, transparent 8px),
    conic-gradient(from 45deg, transparent 0 25%, rgba(241,213,142,.0) 25%) ;
}
.coin::before, .coin::after { content: ""; position: absolute; background: #d6b46c; border: 1px solid #3b230e; }
.coin::before { width: 26px; height: 3px; top: 17px; left: 6px; }
.coin::after { width: 3px; height: 26px; left: 17px; top: 6px; }
.coin.hg { top: -1px; left: -1px; } .coin.hd { top: -1px; right: -1px; }
.coin.bg { bottom: -1px; left: -1px; } .coin.bd { bottom: -1px; right: -1px; }
.scene-astrolabe {
  position: relative; width: 100%; aspect-ratio: 1200 / 956;
  background: #0b1420;
  box-shadow: 0 0 0 2px #3b230e, inset 0 0 30px rgba(0,0,0,.6);
}
.scene-astrolabe ruffle-player, .scene-astrolabe ruffle-object { width: 100%; height: 100%; display: block; }
.aide { text-align: center; font-style: italic; color: var(--texte-doux); font-size: 16px; margin: 6px 16px 0; }

/* ---------- le texte, sur papier ---------- */
.texte-astrolabe {
  max-width: 1080px; margin: 34px auto 60px; padding: 0 16px;
  display: flex; flex-direction: column; gap: 26px;
}
.bloc {
  background: #f3e9d2 radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.5), transparent 60%);
  color: #2b2116;
  border-radius: 4px;
  padding: 26px clamp(18px, 4vw, 44px) 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px #c8b48a, inset 0 0 40px rgba(122,90,28,.18);
}
.bloc h2 { margin: 0 0 12px; font-style: italic; font-weight: 700; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; color: #2b2116; }
.bloc h2::after { content: ""; display: block; width: 120px; height: 2px; margin-top: 8px; background: linear-gradient(90deg, #b5852a, transparent); }
.bloc p { margin: 0 0 12px; font-size: 19px; line-height: 1.5; text-align: justify; hyphens: auto; }
.bloc a { color: #24467f; text-decoration: underline; text-underline-offset: 2px; }
.bloc a:hover { color: #b23a2e; }
.sc { font-variant: small-caps; }
.deux-colonnes { columns: 2 380px; column-gap: 38px; }
.deux-colonnes p { break-inside: avoid; }
.pieces { margin: 8px 0 0; padding: 14px 20px 14px 38px; background: rgba(214,180,108,.16); border-left: 3px solid #b5852a; font-size: 18px; line-height: 1.45; }
.pieces li + li { margin-top: 5px; }

.projection { display: grid; grid-template-columns: minmax(280px, 1fr) 1.15fr; gap: 30px; align-items: start; }
.figure-projection { margin: 0; }
.figure-projection svg { width: 100%; height: auto; display: block; background: #fbf6ea; border: 1px solid #c8b48a; touch-action: none; user-select: none; }
.figure-projection figcaption { margin-top: 6px; font-style: italic; font-size: 15px; color: #6b5a40; text-align: center; }
.pr-sphere { fill: rgba(36,70,127,.06); stroke: #24467f; stroke-width: 2; }
.pr-plan { stroke: #7a5a1c; stroke-width: 3; }
.pr-tropique { stroke: #b5852a; stroke-width: 1.4; stroke-dasharray: 6 5; }
.pr-visee { stroke: #b23a2e; stroke-width: 1.4; stroke-dasharray: 5 4; }
.pr-astre { fill: #e0574a; stroke: #fff; stroke-width: 2; cursor: grab; }
.pr-proj { fill: #24467f; stroke: #fff; stroke-width: 2; }
.pr-pole { fill: #2b2116; }
.pr-txt { font: 600 16px var(--serif); fill: #2b2116; }
.pr-txt.petit { font-size: 14px; fill: #6b5a40; font-style: italic; }
.pr-txt.bleu { fill: #24467f; font-weight: 700; }

.liens-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 6px; }
.bloc a.bouton-doc {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 12px 22px 12px 58px; position: relative;
  background: #24467f; color: #fbf6ea; text-decoration: none; border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.bloc a.bouton-doc::before { content: "📜"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 26px; }
.bloc a.bouton-doc:hover { background: #1b3866; color: #fff; }
.doc-titre { font-family: var(--capitales); font-size: 21px; letter-spacing: .04em; }
.doc-detail { font-style: italic; font-size: 15px; opacity: .85; }
.bloc .source { font-size: 16px; color: #6b5a40; text-align: left; }

@media (max-width: 760px) {
  .titre-barre { display: none; }
  .cadre-ancien { padding: 14px; } .cadre-ancien::before { inset: 7px; }
  .coin { display: none; }
  .projection { grid-template-columns: 1fr; }
}
.page-cartes .cadre-ancien { margin-bottom: 10px; }
.aide a.retour-accueil { color: var(--or); font-style: normal; }
.page-cartes { padding-bottom: 40px; }