/* =============================================================
   Phases de la Lune — Météo Sevy
   Page dédiée : héro + frise -7j / +28j, thème nuit, animations
   ============================================================= */

/* Sécurité plein écran. La page lune a une structure simple
   (#content > .ast-container > .moon-page) sans #primary/article.
   Astra met .ast-container en display:flex → .moon-page (sans width
   explicite) ne prend pas 100 % et se retrouve dans une colonne à droite.
   Comme ce CSS n'est chargé QUE sur /lune/, on peut cibler .ast-container
   directement sans impacter les autres pages. */
.ast-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.moon-page {
    width: 100%;
}

.moon-page {
    --moon-bg-top:    #070b16;
    --moon-bg-bottom: #0d1424;
    --moon-gold:      var(--color-primary, #f5b82e);
    --moon-text:      #eef2f8;
    --moon-text-dim:  #97a3b6;
    --moon-card:      rgba(255, 255, 255, 0.04);
    --moon-card-bd:   rgba(255, 255, 255, 0.08);

    position: relative;
    min-height: 100vh;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem) 4rem;
    background:
        radial-gradient(1200px 600px at 70% -10%, rgba(60, 90, 160, 0.18), transparent 60%),
        linear-gradient(180deg, var(--moon-bg-top) 0%, var(--moon-bg-bottom) 100%);
    color: var(--moon-text);
    overflow: hidden;
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

/* Champ d'étoiles (deux couches via pseudo-éléments) */
.moon-page::before,
.moon-page::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: repeat;
    opacity: 0.55;
}
.moon-page::before {
    background-image:
        radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 75% 15%, #fff, transparent),
        radial-gradient(1px 1px at 40% 70%, #cdd6ff, transparent),
        radial-gradient(1.6px 1.6px at 88% 55%, #fff, transparent),
        radial-gradient(1px 1px at 60% 40%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 10% 80%, #e9efff, transparent),
        radial-gradient(1px 1px at 33% 18%, #fff, transparent);
    background-size: 100% 100%;
    animation: moonTwinkle 6s ease-in-out infinite alternate;
}
.moon-page::after {
    background-image:
        radial-gradient(1px 1px at 50% 25%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 15% 55%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 82% 78%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 67% 62%, rgba(255,255,255,0.5), transparent);
    background-size: 100% 100%;
    opacity: 0.35;
    animation: moonTwinkle 9s ease-in-out infinite alternate-reverse;
}
@keyframes moonTwinkle {
    from { opacity: 0.25; }
    to   { opacity: 0.6; }
}

.moon-wrap {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}

/* ── En-tête ───────────────────────────────────────────────── */
.moon-title {
    text-align: center;
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 0.3rem;
    background: linear-gradient(180deg, #fff 0%, #d8c79a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.moon-subtitle {
    text-align: center;
    color: var(--moon-text-dim);
    font-size: clamp(0.85rem, 2.4vw, 1rem);
    margin: 0 0 2.5rem;
    letter-spacing: 0.04em;
}

/* ── Héro : lune (gauche) + prochaines phases (droite) ─────── */
.moon-hero-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 7vw, 6rem);
    flex-wrap: wrap;
    margin-bottom: 2.4rem;
}

.moon-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;

    opacity: 0;
    transform: scale(0.82) translateY(10px);
    transition: opacity 1s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.moon-ready .moon-hero { opacity: 1; transform: none; }

.moon-hero-disc {
    position: relative;
    filter: drop-shadow(0 0 40px rgba(245, 230, 180, 0.25));
    animation: moonFloat 7s ease-in-out infinite;
}
@keyframes moonFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.moon-hero-name {
    font-family: var(--font-display, serif);
    font-size: clamp(1.4rem, 4vw, 2.1rem);
    font-weight: 600;
    color: #fff;
    margin-top: 1rem;
}
.moon-hero-illum {
    color: var(--moon-gold);
    font-weight: 600;
    letter-spacing: 0.05em;
    font-size: clamp(0.95rem, 2.6vw, 1.1rem);
}
.moon-hero-date {
    color: var(--moon-text-dim);
    text-transform: capitalize;
    font-size: 0.9rem;
}

/* ── Prochaines phases clés (empilées à droite de la lune) ──── */
.moon-next {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}
.moon-ready .moon-next { opacity: 1; transform: none; }

.moon-next-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1.4rem;
    background: var(--moon-card);
    border: 1px solid var(--moon-card-bd);
    border-radius: 14px;
    backdrop-filter: blur(6px);
}
.moon-next-emoji { font-size: 1.8rem; line-height: 1; }
.moon-next-label { color: var(--moon-text-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.moon-next-date  { color: #fff; font-weight: 600; text-transform: capitalize; font-size: 0.98rem; }

/* ── Graphe linéaire d'illumination ────────────────────────── */
.moon-grid-title {
    text-align: center;
    color: var(--moon-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    margin-bottom: 1.2rem;
}
.moon-graph {
    background: var(--moon-card);
    border: 1px solid var(--moon-card-bd);
    border-radius: 18px;
    padding: 1rem clamp(0.5rem, 2vw, 1.5rem);
    backdrop-filter: blur(6px);

    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s ease 0.4s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
.moon-ready .moon-graph { opacity: 1; transform: none; }

.moon-graph-svg { display: block; width: 100%; height: auto; overflow: visible; }
.moon-axis-lbl { fill: var(--moon-text-dim); font-size: 13px; font-family: var(--font-mono, monospace); text-transform: capitalize; }
.moon-today-lbl { fill: var(--moon-gold); font-size: 13px; font-weight: 700; font-family: var(--font-body, sans-serif); }

/* Animation de tracé de la courbe à l'ouverture */
.moon-graph-line {
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
}
.moon-ready .moon-graph-line {
    animation: moonDraw 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}
@keyframes moonDraw { to { stroke-dashoffset: 0; } }

.moon-graph-area { opacity: 0; }
.moon-ready .moon-graph-area { animation: moonFade 1.2s ease 1.6s forwards; }
@keyframes moonFade { to { opacity: 1; } }

.moon-svg { display: block; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 600px) {
    .moon-axis-lbl, .moon-today-lbl { font-size: 18px; }  /* viewBox fixe → agrandir pour lisibilité mobile */
}

/* Respecte prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .moon-hero, .moon-next, .moon-graph { transition: none; opacity: 1; transform: none; }
    .moon-hero-disc, .moon-page::before, .moon-page::after { animation: none; }
    .moon-graph-line { stroke-dashoffset: 0; animation: none; }
    .moon-graph-area { opacity: 1; animation: none; }
}