body.lune-page { height:auto; min-height:100vh; overflow-x:hidden; overflow-y:auto; background:radial-gradient(circle at 88% 10%, rgba(51,128,177,.26), transparent 29rem), var(--night); }
.lune-page .site-header { position:relative; background:rgba(7,17,31,.9); }
.lune-shell { max-width:1500px; margin:0 auto; padding:clamp(2rem,5vw,5rem); }
.lune-intro { max-width:780px; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 2rem; color:var(--muted); font-size:.72rem; letter-spacing:.06em; }.breadcrumb a:hover { color:var(--cyan); }
.eyebrow { margin:0 0 .75rem; color:var(--cyan); font-size:.68rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.lune-intro h1, .calendar-heading h2 { margin:0; font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-.045em; line-height:1; }.lune-intro h1 { font-size:clamp(2.5rem,6vw,5.7rem); }.lune-intro h1 span, .calendar-heading h2 span { color:var(--cyan); }.lune-intro > p:last-child { max-width:640px; color:var(--muted); line-height:1.65; }
.settings { display:flex; align-items:end; flex-wrap:wrap; gap:1rem 1.25rem; margin:2.5rem 0 1.4rem; padding:1.1rem 1.3rem; border:1px solid var(--line); background:rgba(11,28,45,.74); }.settings form { display:flex; flex-wrap:wrap; align-items:end; gap:.7rem; }.settings label { display:grid; gap:.35rem; color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.settings input { width:130px; padding:.6rem; color:var(--text); border:1px solid var(--line); background:#07111f; font:inherit; }.settings input:focus-visible, .settings button:focus-visible, .copy-calendar:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }.settings button { padding:.7rem 1rem; color:var(--night); border:1px solid var(--cyan); background:var(--cyan); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }.settings button:hover { color:var(--text); background:transparent; }.settings-note { margin:0 0 .15rem; color:var(--muted); font-size:.72rem; }
#calendrier { padding:clamp(1rem,2.5vw,1.8rem); border:1px solid var(--line); background:rgba(11,28,45,.72); box-shadow:10px 12px 0 rgba(0,0,0,.18); }.calendar-heading { display:flex; justify-content:space-between; gap:1rem; align-items:end; }.calendar-heading h2 { font-size:clamp(1.8rem,3vw,2.5rem); }.calendar-actions { display:grid; justify-items:end; gap:.6rem; }.calendar-heading #period-label { max-width:250px; margin:0; color:var(--muted); font-size:.75rem; line-height:1.5; text-align:right; }.copy-calendar { padding:.55rem .8rem; color:var(--night); border:1px solid var(--cyan); background:var(--cyan); font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }.copy-calendar:hover { color:var(--text); background:transparent; }.copy-calendar:disabled { cursor:wait; opacity:.7; }.legend { display:flex; flex-wrap:wrap; gap:1rem 1.5rem; margin:1.2rem 0; color:var(--muted); font-size:.72rem; }.legend span { display:flex; align-items:center; gap:.45rem; }.legend i { display:inline-block; width:.65rem; height:.65rem; border-radius:50%; }.legend-moon { background:linear-gradient(90deg,#21374e 45%,#e8f2ff 46%); box-shadow:0 0 8px #d8ecff; }.legend-alert { background:#f6bf59; box-shadow:0 0 8px #f6bf59; }
.moon-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.8rem; overflow:hidden; padding-bottom:.25rem; }.moon-day { min-width:0; padding:1rem; border:1px solid rgba(132,184,213,.24); background:rgba(5,13,23,.74); }.moon-day header { display:flex; justify-content:space-between; gap:.5rem; align-items:baseline; padding-bottom:.65rem; border-bottom:1px solid rgba(132,184,213,.16); }.day-name { margin:0; color:var(--cyan); font-size:.72rem; font-weight:700; text-transform:uppercase; }.day-date { color:var(--muted); font-size:.72rem; }.phase-block { display:flex; align-items:center; gap:.65rem; margin:.8rem 0; }.moon-canvas { width:56px; height:56px; flex:0 0 56px; }.phase-block strong { display:block; color:var(--text); font-size:.82rem; line-height:1.2; }.phase-block p { margin:.22rem 0 0; color:var(--muted); font-size:.71rem; }
dl { margin:0; }.coordinates, .events { display:grid; gap:.4rem; }.coordinates { padding:.65rem 0; border-top:1px solid rgba(132,184,213,.16); }.coordinates div { display:grid; grid-template-columns:1fr; gap:.14rem; }.coordinates dt, .events dt { color:var(--muted); font-size:.68rem; }.coordinates dd, .events dd { min-width:0; margin:0; color:var(--text); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.71rem; overflow-wrap:anywhere; text-align:right; }.coordinates dd { overflow-wrap:normal; text-align:left; white-space:nowrap; }.events { grid-template-columns:repeat(3,1fr); gap:.3rem; padding:.65rem 0; border-top:1px solid rgba(132,184,213,.16); }.events div { display:block; }.events dd { margin-top:.22rem; text-align:left; }.nearby { padding-top:.65rem; border-top:1px solid rgba(132,184,213,.16); }.nearby p { margin:0 0 .4rem; color:var(--muted); font-size:.68rem; }.nearby-list { display:flex; flex-wrap:wrap; gap:.3rem; min-height:1.55rem; }.planet-pill { max-width:100%; padding:.22rem .38rem; color:#ffe3a7; border:1px solid rgba(246,191,89,.55); background:rgba(246,191,89,.1); font-size:.65rem; overflow-wrap:anywhere; }.none { color:var(--muted); font-size:.68rem; font-style:italic; }
@media (max-width:1100px) { .moon-days { grid-template-columns:repeat(4,minmax(185px,1fr)); } } @media (max-width:700px) { .lune-shell { padding:2rem 1rem; }.calendar-heading { display:block; }.calendar-actions { justify-items:start; margin-top:.65rem; }.calendar-heading #period-label { max-width:none; text-align:left; }.moon-days { grid-template-columns:repeat(2,minmax(185px,1fr)); }.settings input { width:100%; }.settings label { flex:1 1 120px; } } @media (max-width:440px) { .moon-days { grid-template-columns:1fr; } }