/* Phase de la lune */
.mn { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.2vh, 24px); text-align: center; width: 100%; }
.mn .mn-q { text-wrap: balance; }
.mn-pane { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.2vh, 24px); width: 100%; }
.mn-hero { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3.4vw, 48px); }
.mn-moon { flex: none; width: calc(clamp(132px, min(26vh, 22vw), 240px) * var(--cs, 1)); height: auto; overflow: visible; }
.mn-dark { fill: var(--white); opacity: .16; }
.mn-lit { fill: var(--white); }
.mn-out { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; }
.mn-name { margin: 0; font-family: var(--f-display); font-size: calc(clamp(44px, 6.2vw, 92px) * var(--cs, 1)); line-height: .98; letter-spacing: .005em; text-wrap: balance; }
.mn-detail { margin: .55em 0 0; font-size: clamp(16px, 1.7vw, 21px); font-weight: 500; opacity: .92; max-width: 30em; }
.mn-next { display: flex; justify-content: center; gap: clamp(28px, 6vw, 88px); }
.mn-nx { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mn-nx-l { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.mn-nx-c { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mn-nx-d { font-size: 15px; font-weight: 500; opacity: .85; }
.mn-rise { margin: 0; font-size: clamp(16px, 1.6vw, 19px); font-weight: 500; line-height: 2; text-wrap: balance; }
.mn-rise .cyc { font-size: inherit; }
.mn-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px; background: var(--frame); color: var(--white); vertical-align: middle; transition: background-color .15s; }
.mn-arrow:hover { background: var(--frame-hi); }
.mn-arrow svg { width: 22px; height: 22px; }
/* Calendrier du mois */
.mn-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; width: min(100%, 430px, max(300px, calc(100vh - 380px))); }
.mn-wd { font-size: 13px; font-weight: 700; opacity: .8; padding-bottom: 2px; }
.mn-cell { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--white); transition: background-color .15s; }
.mn-cell--empty { pointer-events: none; }
button.mn-cell:hover { background: var(--frame); }
.mn-cell.is-ev { background: var(--frame); }
.mn-cell[aria-current="date"] { box-shadow: inset 0 0 0 2px var(--white); }
.mn-dn { position: absolute; left: 7px; top: 4px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mn-ar { position: absolute; right: 6px; bottom: 2px; font-size: 12px; font-weight: 700; opacity: .75; }
.mn-mini { width: 46%; height: auto; margin-top: 6px; }
.mn-legend { margin: 0; font-size: 15px; font-weight: 500; opacity: .9; max-width: 640px; text-wrap: balance; }
/* Pleines lunes de l'année */
.mn-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: min(100%, 860px); }
.mn-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--frame); color: var(--white); text-align: left; transition: background-color .15s; }
.mn-card:hover { background: var(--frame-hi); }
.mn-card.is-special { background: var(--white); color: var(--bg); }
.mn-card-d { font-family: var(--f-display); font-size: 26px; line-height: 1.05; }
.mn-card-n { font-size: 15px; font-weight: 700; line-height: 1.2; }
.mn-card-t { font-size: 13px; font-weight: 500; opacity: .85; line-height: 1.3; }
@media (max-width: 720px) {
  .mn-bar { position: relative; } /* la pastille glissante se place par rapport à la barre */
  .mn-hero { flex-direction: column; gap: 12px; }
  .mn-out { align-items: center; text-align: center; }
  .mn-moon { width: calc(clamp(120px, 34vw, 170px) * var(--cs, 1)); }
  .mn-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mn-card { padding: 8px 9px; }
  .mn-card-d { font-size: 22px; }
  .mn-card-n { font-size: 13px; }
  .mn-card-t { font-size: 12px; }
}
@media (max-width: 520px) { .mn-bar .bar-sep, .mn-bar [data-mn-today] { display: none; } .mn-bar .chip-btn { padding: 0 14px; } .mn-next { gap: 22px; } .mn-nx-c { font-size: 26px; } .mn-legend { font-size: 13px; } }
.hero.is-fs .mn-bar, .hero.is-fs .mn-rise, .hero.is-fs .mn-q { display: none; }