.today-panel {
    width: min(1100px, 92vw);
    margin: 26px auto;
    padding: 30px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(255,190,80,.07),
            transparent 34%
        ),
        rgba(13,30,50,.68);

    box-shadow:
        0 22px 65px rgba(0,0,0,.16);
}

.today-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.today-kicker {
    color: #7fa1c4;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.today-head h2 {
    margin: 4px 0 0;

    font-size: clamp(28px, 5vw, 42px);
    letter-spacing: -.035em;
}

.today-location {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;

    color: rgba(255,255,255,.55);
    font-size: 12px;
}

.today-location button {
    min-height: 36px;

    padding: 0 13px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;

    background: rgba(255,255,255,.045);
    color: inherit;

    cursor: pointer;
}

.today-location button:hover {
    background: rgba(255,255,255,.08);
}

.today-main-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.today-main-card {
    min-height: 130px;

    padding: 20px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;

    background: rgba(255,255,255,.025);
}

.today-icon {
    font-size: 27px;
}

.today-label {
    margin-top: 8px;

    color: rgba(255,255,255,.48);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.today-value {
    margin-top: 5px;

    color: #f4f7fb;

    font-size: clamp(25px, 4vw, 36px);
    font-weight: 680;
    letter-spacing: -.035em;

    font-variant-numeric: tabular-nums;
}

.today-secondary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;

    margin-top: 12px;
}

.today-small-card {
    padding: 16px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 15px;

    background: rgba(255,255,255,.018);
}

.today-small-label {
    color: rgba(255,255,255,.43);
    font-size: 10px;
}

.today-small-value {
    margin-top: 6px;

    color: rgba(255,255,255,.90);

    font-size: 16px;
    font-weight: 620;

    font-variant-numeric: tabular-nums;
}

.today-foot {
    margin-top: 15px;

    color: rgba(255,255,255,.40);
    font-size: 10px;
    line-height: 1.5;
}

@media (max-width: 800px) {
    .today-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .today-location {
        justify-content: flex-start;
    }

    .today-main-grid {
        grid-template-columns: 1fr;
    }

    .today-secondary {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 420px) {
    .today-panel {
        width: calc(100% - 20px);
        padding: 20px;

        border-radius: 20px;
    }

    .today-secondary {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   Cycle solaire — frise dynamique
   ========================================================= */

.solar-timeline {
    margin-top: 16px;
    padding: 16px 18px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;

    background: rgba(255,255,255,.018);
}

.solar-timeline-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 12px;

    color: rgba(255,255,255,.58);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#solar-timeline-status {
    color: rgba(255,255,255,.82);
    font-variant-numeric: tabular-nums;
}

.solar-track {
    position: relative;

    height: 14px;

    overflow: visible;

    border-radius: 999px;

    background:
        linear-gradient(
            to right,

            #081321 0%,

            #081321 var(--astro-dawn, 18%),

            #243653 var(--astro-dawn, 18%),

            #395679 var(--nautical-dawn, 21%),

            #7595b6 var(--civil-dawn, 24%),

            #e6b760 var(--sunrise, 27%),

            #f2d56b 50%,

            #e6b760 var(--sunset, 73%),

            #7595b6 var(--civil-dusk, 76%),

            #395679 var(--nautical-dusk, 79%),

            #243653 var(--astro-dusk, 82%),

            #081321 var(--astro-dusk, 82%),

            #081321 100%
        );

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.08);
}

.solar-now {
    position: absolute;
    top: 50%;
    left: var(--solar-now, 50%);

    width: 2px;
    height: 26px;

    transform: translate(-50%, -50%);

    background: #ffffff;

    border-radius: 999px;

    box-shadow:
        0 0 0 3px rgba(255,255,255,.12),
        0 0 14px rgba(255,255,255,.45);
}

.solar-now span {
    position: absolute;
    top: -5px;
    left: 50%;

    width: 6px;
    height: 6px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #ffffff;
}

.solar-track-labels {
    display: grid;
    grid-template-columns:
        1fr
        auto
        1fr
        auto
        1fr;

    align-items: center;

    margin-top: 10px;

    color: rgba(255,255,255,.38);
    font-size: 9px;
}

.solar-track-labels span:nth-child(2),
.solar-track-labels span:nth-child(4) {
    padding: 0 10px;
}

.solar-track-labels span:nth-child(3) {
    text-align: center;
}

.solar-track-labels span:last-child {
    text-align: right;
}

[data-theme="light"] #today-panel .solar-timeline {
    background: #F8FAFC;
    border-color: #C7D1DC;
}

[data-theme="light"] #today-panel .solar-timeline-title {
    color: #475569;
}

[data-theme="light"] #today-panel #solar-timeline-status {
    color: #1E293B;
}

[data-theme="light"] #today-panel .solar-track-labels {
    color: #64748B;
}

@media (max-width: 600px) {
    .solar-track-labels {
        font-size: 8px;
    }

    .solar-track-labels span:nth-child(2),
    .solar-track-labels span:nth-child(4) {
        padding: 0 4px;
    }
}


/* =========================================================
   Cycle lunaire
   ========================================================= */

.moon-cycle {
    margin-top: 12px;
    padding: 18px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(190,205,230,.08),
            transparent 28%
        ),
        rgba(255,255,255,.018);
}

.moon-cycle-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.moon-phase-name {
    margin-top: 6px;

    color: rgba(255,255,255,.92);

    font-size: 18px;
    font-weight: 650;
}

.moon-illumination {
    color: rgba(255,255,255,.78);

    font-size: 13px;
    font-weight: 650;

    font-variant-numeric: tabular-nums;
}

.moon-track {
    position: relative;

    height: 8px;
    margin-top: 18px;

    border-radius: 999px;

    background:
        linear-gradient(
            to right,
            #0a111c 0%,
            #526076 25%,
            #eef2f7 50%,
            #526076 75%,
            #0a111c 100%
        );

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.09);
}

.moon-cycle-marker {
    position: absolute;
    top: 50%;
    left: 0%;

    width: 14px;
    height: 14px;

    transform: translate(-50%, -50%);

    border: 2px solid #ffffff;
    border-radius: 50%;

    background: #132033;

    box-shadow:
        0 0 0 3px rgba(255,255,255,.10),
        0 0 12px rgba(255,255,255,.28);
}

.moon-track-labels {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

    margin-top: 9px;

    color: rgba(255,255,255,.38);
    font-size: 8px;
}

.moon-track-labels span:nth-child(2),
.moon-track-labels span:nth-child(3),
.moon-track-labels span:nth-child(4) {
    text-align: center;
}

.moon-track-labels span:last-child {
    text-align: right;
}

.moon-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    margin-top: 17px;
}

.moon-details > div {
    padding: 12px 14px;

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;

    background: rgba(255,255,255,.015);
}

.moon-details span {
    display: block;

    color: rgba(255,255,255,.40);

    font-size: 9px;
}

.moon-details strong {
    display: block;

    margin-top: 5px;

    color: rgba(255,255,255,.90);

    font-size: 14px;
    font-weight: 620;

    font-variant-numeric: tabular-nums;
}

[data-theme="light"] #today-panel .moon-cycle {
    background: #F8FAFC;
    border-color: #C7D1DC;
}

[data-theme="light"] #today-panel .moon-phase-name,
[data-theme="light"] #today-panel .moon-illumination,
[data-theme="light"] #today-panel .moon-details strong {
    color: #1E293B;
}

[data-theme="light"] #today-panel .moon-track-labels,
[data-theme="light"] #today-panel .moon-details span {
    color: #64748B;
}

[data-theme="light"] #today-panel .moon-details > div {
    border-color: #D7DEE7;
    background: #F1F5F9;
}

@media (max-width: 700px) {
    .moon-details {
        grid-template-columns: 1fr;
    }

    .moon-track-labels {
        font-size: 7px;
    }
}


/* =========================================================
   Lumiere et Soleil avance
   ========================================================= */

.light-advanced {
    margin-top: 12px;
    padding: 17px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;

    background: rgba(255,255,255,.018);
}

.light-advanced-head {
    margin-bottom: 11px;

    color: rgba(255,255,255,.52);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.light-advanced-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.light-advanced-grid > div {
    padding: 12px 13px;

    border: 1px solid rgba(255,255,255,.055);
    border-radius: 12px;

    background: rgba(255,255,255,.012);
}

.light-advanced-grid span {
    display: block;

    color: rgba(255,255,255,.39);
    font-size: 9px;
}

.light-advanced-grid strong {
    display: block;

    margin-top: 5px;

    color: rgba(255,255,255,.91);

    font-size: 14px;
    font-weight: 620;

    font-variant-numeric: tabular-nums;
}

[data-theme="light"] #today-panel .light-advanced {
    background: #F8FAFC;
    border-color: #C7D1DC;
}

[data-theme="light"] #today-panel .light-advanced-grid > div {
    background: #F1F5F9;
    border-color: #D7DEE7;
}

[data-theme="light"] #today-panel .light-advanced-head,
[data-theme="light"] #today-panel .light-advanced-grid span {
    color: #64748B;
}

[data-theme="light"] #today-panel .light-advanced-grid strong {
    color: #1E293B;
}

@media (max-width: 800px) {
    .light-advanced-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 420px) {
    .light-advanced-grid {
        grid-template-columns: 1fr;
    }
}