:root {
    color-scheme: dark;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #05080d;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body { min-height: 100dvh; }
button, input { font: inherit; }

.app {
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    background: #05080d;
    --scene-brightness: .07;
    --scene-saturation: .72;
    --scene-contrast: 1.06;
    --sun-size: 56px;
    --sun-bloom: 1;
    --sun-core-opacity: 1;
    --eclipse-warmth: 0;
}

.scene,
.landscape,
.atmosphere,
.scene-grade,
.eclipse-amber,
.milky-way,
.vignette {
    position: absolute;
    inset: 0;
}

.landscape {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.003);
    filter:
        brightness(var(--scene-brightness))
        saturate(var(--scene-saturation))
        contrast(var(--scene-contrast));
    transition: filter .22s linear;
}

.landscape-base { z-index: 0; }

.atmosphere {
    z-index: 1;
    pointer-events: none;
    background: rgba(2, 12, 34, .76);
    mix-blend-mode: multiply;
    transition: background-color .22s linear, opacity .22s linear;
}

.stars {
    position: absolute;
    z-index: 2;
    inset: 0 0 34% 0;
    width: 100%;
    height: 66%;
    pointer-events: none;
    opacity: 1;
    transition: opacity .22s linear;
}

.milky-way {
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    transform: rotate(-18deg) scale(1.22);
    transform-origin: 58% 38%;
    background:
        radial-gradient(ellipse at 61% 34%, rgba(247,235,219,.085) 0 4%, rgba(190,205,229,.045) 12%, transparent 35%),
        linear-gradient(112deg, transparent 22%, rgba(141,158,189,.04) 31%, rgba(235,221,204,.060) 42%, rgba(174,190,216,.030) 51%, transparent 64%);
    filter: blur(8px);
    mask-image: linear-gradient(to bottom, #000 0 61%, transparent 79%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0 61%, transparent 79%);
    transition: opacity .35s linear;
}

.cloud-field {
    position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; opacity:0;
    transition:opacity .3s linear; mix-blend-mode:screen;
}
.cloud {
    position:absolute; left:0; top:0; width:150px; height:34px; border-radius:50%;
    opacity:.23; filter:blur(7px); will-change:transform;
    background:radial-gradient(ellipse at center, rgba(255,255,255,.68) 0 28%, rgba(245,248,252,.31) 54%, transparent 76%);
}
.cloud::before,.cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; }
.cloud::before { width:72px; height:48px; left:24px; top:-17px; }
.cloud::after { width:82px; height:42px; right:14px; top:-11px; }
.cloud-b { width:205px; opacity:.17; }
.cloud-c { width:124px; opacity:.20; }
.cloud-d { width:177px; opacity:.14; }

.moon-layer {
    position:absolute; z-index:4; left:0; top:0; width:48px; height:48px; transform:translate(9vw,67vh);
    opacity:0; pointer-events:none; will-change:transform,opacity;
}
.moon-layer canvas { width:48px; height:48px; transform:translate(-50%,-50%); display:block; }

.horizon-glow {
    position: absolute;
    z-index: 3;
    left: -16%;
    right: -16%;
    bottom: 27%;
    height: 34%;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(ellipse at var(--glow-x, 50%) 100%,
            rgba(255, 205, 128, .55) 0%,
            rgba(255, 145, 43, .34) 22%,
            rgba(255, 94, 21, .12) 47%,
            transparent 72%);
    mix-blend-mode: screen;
    filter: blur(3px);
    transition: opacity .22s linear;
}

.eclipse-amber {
    z-index: 3;
    pointer-events: none;
    opacity: var(--eclipse-warmth);
    background:
        radial-gradient(ellipse at 82% 58%, rgba(255, 191, 93, .24), transparent 40%),
        linear-gradient(to bottom,
            rgba(115, 74, 33, .18) 0%,
            rgba(168, 101, 38, .28) 52%,
            rgba(238, 144, 48, .24) 73%,
            rgba(63, 35, 20, .10) 100%);
    mix-blend-mode: screen;
    transition: opacity .15s linear;
}

/* Soleil : lumière d'abord, disque seulement comme support de l'éclipse. */
.sun-orbit {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
}

.solar-system {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--sun-size);
    height: var(--sun-size);
    transform: translate(-50%, -50%);
}

.sun-bloom {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    opacity: var(--sun-bloom);
    mix-blend-mode: screen;
}

.sun-bloom-wide {
    width: calc(var(--sun-size) * 6.4);
    height: calc(var(--sun-size) * 6.4);
    background: radial-gradient(circle,
        rgba(255,255,255,.50) 0%,
        rgba(255,252,235,.28) 11%,
        rgba(255,224,168,.12) 27%,
        rgba(255,180,95,.045) 48%,
        transparent 74%);
    filter: blur(17px);
}

.sun-bloom-near {
    width: calc(var(--sun-size) * 2.75);
    height: calc(var(--sun-size) * 2.75);
    background: radial-gradient(circle,
        rgba(255,255,255,1) 0%,
        rgba(255,255,252,.92) 16%,
        rgba(255,244,214,.38) 34%,
        rgba(255,209,144,.10) 52%,
        transparent 72%);
    filter: blur(8px);
}

/* Fenêtre ronde : l'ombre lunaire est enfermée ici. Elle ne peut donc jamais
   apparaître dans le ciel avant de toucher réellement le Soleil. */
.sun-disc-window {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #fffef5;
    box-shadow:
        0 0 5px 2px rgba(255,255,255,1),
        0 0 15px 5px rgba(255,250,225,.96),
        0 0 34px 12px rgba(255,218,145,.62),
        0 0 64px 20px rgba(255,181,83,.22);
}

.sun-photosphere {
    position: absolute;
    inset: -3%;
    border-radius: 50%;
    opacity: var(--sun-core-opacity);
    background: radial-gradient(circle at 50% 50%,
        #ffffff 0 58%,
        rgba(255,255,252,1) 68%,
        rgba(255,250,229,.98) 79%,
        rgba(255,229,173,.82) 90%,
        rgba(255,201,112,.28) 100%);
    filter: blur(.35px);
}

.moon-shadow {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: 100.8%;
    height: 100.8%;
    border-radius: 50%;
    background: radial-gradient(circle at 48% 46%, #080706 0 70%, #020202 100%);
    opacity: 0;
    transform: translate(-151.5%, -50%);
    box-shadow: inset -1px -1px 2px rgba(58,37,20,.12);
    will-change: transform, opacity;
}

/* V4 : couronne photographique diffuse. Pas de rayons dessinés en branches :
   l'anneau est très lumineux au bord lunaire puis se dissout en halo chaud. */
.corona {
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: calc(var(--sun-size) * 5.2);
    height: calc(var(--sun-size) * 5.2);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle,
        transparent 0 17.5%,
        rgba(255,255,252,.98) 19.1%,
        rgba(255,246,219,.82) 21.2%,
        rgba(255,218,168,.36) 25.5%,
        rgba(255,185,113,.17) 33%,
        rgba(255,155,77,.07) 45%,
        transparent 68%);
    filter: blur(4.5px);
    mix-blend-mode: screen;
    will-change: opacity;
}

.corona::before,
.corona::after {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    pointer-events: none;
}

.corona::before {
    background: radial-gradient(circle,
        transparent 0 19%,
        rgba(255,255,255,.72) 20.3%,
        rgba(255,230,190,.24) 24%,
        transparent 39%);
    filter: blur(2px);
}

.corona::after {
    inset: -8%;
    background: radial-gradient(circle,
        rgba(255,183,97,.055) 0 24%,
        rgba(255,163,80,.055) 29%,
        rgba(255,145,66,.025) 43%,
        transparent 67%);
    filter: blur(20px);
}

.diamond-glow {
    position: absolute;
    z-index: 5;
    width: 16%;
    height: 16%;
    right: -2%;
    bottom: 11%;
    border-radius: 50%;
    opacity: 0;
    background: white;
    box-shadow:
        0 0 5px rgba(255,255,255,1),
        0 0 12px rgba(255,235,197,.95),
        0 0 25px rgba(255,191,105,.60);
}

/* Ligne de relief V2, recalée sur la photo source. Le duplicata utilise le
   même cadrage ET le même filtre que l'image de base : il est invisible,
   sauf lorsqu'il masque le Soleil. */
.terrain-foreground {
    z-index: 5;
    pointer-events: none;
    /* V5 : ligne abaissée davantage pour supprimer le raccord visible à l’aube de la hauteur. Le masque commence
       volontairement quelques pixels DANS le relief pour éviter toute arête
       grise visible à l'aube/crépuscule. */
    clip-path: polygon(
        0% 58.6%,
        4% 58.6%,
        8% 58.4%,
        12% 58.3%,
        16% 58.1%,
        20% 58.6%,
        24% 59.2%,
        28% 59.8%,
        32% 60.6%,
        36% 61.1%,
        40% 61.5%,
        44% 61.3%,
        48% 60.9%,
        52% 60.3%,
        56% 59.5%,
        60% 58.6%,
        64% 57.7%,
        68% 56.7%,
        72% 55.9%,
        76% 55.0%,
        80% 54.1%,
        84% 53.2%,
        88% 52.5%,
        92% 51.8%,
        96% 51.0%,
        100% 50.4%,
        100% 100.0%,
        0% 100.0%
    );
}

.scene-grade {
    z-index: 6;
    pointer-events: none;
    background: transparent;
    mix-blend-mode: color;
    transition: background-color .2s linear, opacity .2s linear;
}

.vignette {
    z-index: 7;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 47%, rgba(0,0,0,.16) 100%),
        linear-gradient(to bottom, rgba(0,0,0,.015), rgba(0,0,0,.13));
}

.hud {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 18px calc(18px + var(--safe-bottom)) 18px;
    color: white;
    background: linear-gradient(to top, rgba(3,6,11,.91), rgba(3,6,11,.48) 68%, transparent);
    text-shadow: 0 1px 8px rgba(0,0,0,.65);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

.app.controls-visible .hud {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
}

.hud-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}

.eyebrow {
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .64;
}

.time {
    font-size: clamp(34px, 10vw, 52px);
    line-height: 1;
    letter-spacing: -.045em;
    font-weight: 720;
}

.status {
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 700;
}


.date-panel {
    display: grid;
    grid-template-columns: minmax(105px, .9fr) minmax(145px, 1.1fr);
    align-items: center;
    gap: 7px 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;
    background: rgba(6,8,12,.40);
    backdrop-filter: blur(13px);
}
.date-panel label { font-size: 11px; font-weight: 700; opacity: .78; }
.date-panel input[type="date"] {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    color: white;
    color-scheme: dark;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    padding: 7px 9px;
    font-size: 11px;
}
.date-panel span {
    grid-column: 1 / -1;
    font-size: 10px;
    opacity: .58;
}

.eclipse-panel {
    margin-bottom: 13px;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;
    background: rgba(6,8,12,.43);
    backdrop-filter: blur(13px);
    opacity: .36;
    transition: opacity .25s ease;
}
.eclipse-panel.active { opacity: 1; }
.eclipse-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.eclipse-row span { font-weight: 700; }
.eclipse-row strong { font-size: 12px; }
.eclipse-progress { height: 5px; margin-top: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.14); }
.eclipse-progress span { display:block; width:0; height:100%; border-radius:inherit; background:white; }
.eclipse-meta { display:flex; justify-content:space-between; margin-top:6px; gap:8px; font-size:9px; opacity:.65; }

.controls {
    display: grid;
    padding-right: 54px;
    grid-template-columns: 46px 1fr 58px;
    align-items: center;
    gap: 11px;
}

.round-btn {
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    color: white;
    background: rgba(255,255,255,.105);
    backdrop-filter: blur(10px);
    font-weight: 800;
    -webkit-tap-highlight-color: transparent;
}
.round-btn:active { transform: scale(.97); }
.speed-btn { font-size: 12px; }
input[type="range"] { width: 100%; accent-color: white; }

.settings-toggle {
    position: absolute;
    z-index: 12;
    right: max(14px, var(--safe-right));
    bottom: calc(14px + var(--safe-bottom));
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 50%;
    color: rgba(255,255,255,.82);
    background: rgba(8,11,18,.30);
    -webkit-backdrop-filter: blur(11px);
    backdrop-filter: blur(11px);
    box-shadow: 0 3px 18px rgba(0,0,0,.18);
    opacity: .58;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .2s ease, background .2s ease, transform .25s ease;
}
.settings-toggle svg { width: 19px; height: 19px; fill: currentColor; transition: transform .28s ease; }
.settings-toggle:active { transform: scale(.94); }
.settings-toggle:focus-visible { outline: 2px solid white; outline-offset: 3px; opacity: 1; }
.app.controls-visible .settings-toggle { opacity: .94; background: rgba(8,11,18,.58); }
.app.controls-visible .settings-toggle svg { transform: rotate(42deg); }

@media (min-width: 720px) {
    .hud { max-width: 620px; left: 50%; transform: translate(-50%, 14px); border-radius: 22px 22px 0 0; }
    .app.controls-visible .hud { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hud, .settings-toggle, .landscape, .atmosphere, .stars, .horizon-glow { transition: none; }
}

/* ===== V6 overrides ===== */
.sky-base {
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(ellipse at 50% 62%, rgba(229,241,250,.72) 0%, rgba(164,205,236,.36) 27%, transparent 58%),
        linear-gradient(to bottom, #5b8fc2 0%, #76a9d1 38%, #b8d4e6 67%, #d8e5e7 100%);
    filter: brightness(var(--scene-brightness)) saturate(var(--scene-saturation)) contrast(var(--scene-contrast));
    transition:filter .22s linear;
}

/* Le ciel original de la photo n'est plus affiché : terrain.png contient une
   transparence calculée pixel par pixel le long de la crête. Plus de doublon
   clair/gris au lever du jour. */
.terrain-foreground {
    z-index:5;
    clip-path:none !important;
    -webkit-clip-path:none !important;
    pointer-events:none;
    object-fit:cover;
    object-position:center center;
    transform:scale(1.003);
}

/* V6 : Voie lactée volontairement discrète, elle tourne avec tout le ciel. */
.milky-way {
    transform-origin:50% 58%;
    background:
        radial-gradient(ellipse at 61% 34%, rgba(242,236,226,.050) 0 5%, rgba(186,201,224,.028) 14%, transparent 36%),
        linear-gradient(112deg, transparent 21%, rgba(139,156,184,.022) 31%, rgba(230,219,205,.038) 43%, rgba(170,188,214,.018) 52%, transparent 65%);
    filter:blur(10px);
    transition:opacity .28s linear, transform .22s linear;
}

/* Nuages V6 : plus denses, plus charnus et variables. Ils sont entièrement
   synthétiques, le nuage d'origine de la photographie n'est plus utilisé. */
.cloud-field { mix-blend-mode:screen; }
.cloud {
    --puff-a:72px;
    --puff-b:86px;
    --cloud-alpha:.78;
    width:210px;
    height:58px;
    opacity:.34;
    border-radius:48% 52% 46% 54% / 58% 50% 50% 42%;
    filter:blur(4.6px);
    background:
        radial-gradient(ellipse at 46% 57%, rgba(255,255,255,calc(var(--cloud-alpha) * .92)) 0 31%, rgba(248,250,252,calc(var(--cloud-alpha) * .54)) 51%, rgba(228,235,242,calc(var(--cloud-alpha) * .18)) 69%, transparent 80%);
    will-change:transform;
}
.cloud::before,
.cloud::after {
    content:"";
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.72) 0 43%, rgba(241,246,250,.35) 66%, transparent 78%);
    filter:blur(2px);
}
.cloud::before { width:var(--puff-a); height:calc(var(--puff-a) * .78); left:21%; top:-32%; }
.cloud::after { width:var(--puff-b); height:calc(var(--puff-b) * .70); right:11%; top:-20%; }
.cloud-b { width:260px; opacity:.30; }
.cloud-c { width:168px; opacity:.32; }
.cloud-d { width:230px; opacity:.27; }
.cloud-e { width:188px; opacity:.30; }
.cloud-f { width:245px; opacity:.25; }


/* ===== V11 correction 6 : occultation lunaire exacte =====
   L'occultateur occupe tout l'écran et est découpé par clip-path au diamètre lunaire.
   À l'intérieur, on redessine EXACTEMENT la couche sky-base puis la couche atmosphere.
   Contrairement aux versions précédentes, aucune couleur moyenne n'est inventée : le
   gradient conserve donc sa position réelle sous la Lune. La couche de ciel est opaque. */
.moon-sky-occluder {
    --moon-occ-radius: 19px;
    --moon-occ-x: 50vw;
    --moon-occ-y: 50vh;
    position: absolute;
    z-index: 3.95;
    inset: 0;
    opacity: 1 !important;
    pointer-events: none;
    overflow: hidden;
    clip-path: circle(var(--moon-occ-radius) at var(--moon-occ-x) var(--moon-occ-y));
    -webkit-clip-path: circle(var(--moon-occ-radius) at var(--moon-occ-x) var(--moon-occ-y));
    will-change: clip-path;
}

.moon-occ-sky,
.moon-occ-atmosphere {
    position: absolute;
    inset: 0;
    opacity: 1;
    pointer-events: none;
}

.moon-occ-sky {
    background:
        radial-gradient(ellipse at 50% 62%, rgba(229,241,250,.72) 0%, rgba(164,205,236,.36) 27%, transparent 58%),
        linear-gradient(to bottom, #5b8fc2 0%, #76a9d1 38%, #b8d4e6 67%, #d8e5e7 100%);
    filter: brightness(var(--scene-brightness)) saturate(var(--scene-saturation)) contrast(var(--scene-contrast));
}

.moon-occ-atmosphere {
    background: rgb(4, 18, 50);
    mix-blend-mode: multiply;
}

/* La texture lunaire est juste au-dessus de l'occultateur ; le relief reste devant. */
.moon-layer { z-index: 4; }

/* V11 correction 5 : le cadre date reste dans l'écran, même sur petits mobiles. */
@media (max-width: 390px) {
    .date-panel { grid-template-columns: 1fr; }
    .date-panel input[type="date"] { width: 100%; min-width: 0; }
    .date-panel span { grid-column: 1; }
}

/* DEBUG occultation lunaire : disque jaune #ffff00, strictement opaque */
.moon-sky-occluder {
    background: #ffff00 !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    isolation: isolate;
}
.moon-sky-occluder .moon-occ-sky,
.moon-sky-occluder .moon-occ-atmosphere {
    display: none !important;
}

/* ===== V11 DEBUG correction z-index occultation =====
   IMPORTANT : z-index n'accepte que des entiers. La valeur 3.95 des versions
   precedentes etait invalide et etait donc ignoree par le navigateur.
   L'occultateur se retrouvait sous le canvas etoile, donnant une fausse
   impression de transparence. Pour ce test, le disque jaune est place au-dessus
   de TOUT le ciel et des filtres visuels, mais sous la Lune et sous le relief. */
.moon-sky-occluder {
    z-index: 8 !important;
    opacity: 1 !important;
    background: #ffff00 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    transition: none !important;
}
.moon-layer { z-index: 9 !important; }
.terrain-foreground { z-index: 10 !important; }

/* ===== V11 correction 7 : ordre des couches lune / occultateur =====
   Le disque jaune de diagnostic reste au-dessus de toutes les couches du ciel.
   Le canvas lunaire est forcé dans une couche supérieure distincte afin que la
   partie éclairée de la Lune soit toujours peinte au-dessus de l'occultateur. */
.moon-sky-occluder {
    z-index: 20 !important;
    opacity: 1 !important;
    background: #ffff00 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    transition: none !important;
}
.moon-layer {
    z-index: 21 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    visibility: visible !important;
}
.moon-layer canvas {
    position: relative;
    z-index: 1;
    opacity: 1;
    mix-blend-mode: normal;
}
.terrain-foreground { z-index: 30 !important; }

/* Cadre de date plus compact : aucune largeur minimale ne peut pousser la grille
   hors de son parent, y compris sur les mobiles étroits. */
.date-panel {
    width: min(94%, 340px);
    max-width: calc(100% - 12px);
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 6px 8px;
    padding: 8px 9px;
}
.date-panel label { min-width: 0; }
.date-panel input[type="date"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 6px 7px;
    font-size: 10px;
}
.date-panel span {
    min-width: 0;
    overflow-wrap: anywhere;
}
@media (max-width: 360px) {
    .date-panel {
        width: calc(100% - 18px);
        max-width: calc(100% - 18px);
        grid-template-columns: 82px minmax(0, 1fr);
        padding: 7px 8px;
    }
    .date-panel label { font-size: 10px; }
    .date-panel input[type="date"] { font-size: 9px; padding: 5px 6px; }
}

/* ===== V11 correction 8 : interface toujours au-dessus du relief =====
   Le relief est volontairement en z-index 30 pour masquer les astres a l'horizon.
   Les controles doivent rester hors de cette pile visuelle : on les force au-dessus. */
.hud {
    z-index: 100 !important;
}
.settings-toggle {
    z-index: 110 !important;
}

/* Les panneaux interactifs du HUD restent eux aussi dans la couche UI. */
.date-panel,
.eclipse-panel,
.controls,
.hud-head,
.status {
    position: relative;
    z-index: 1;
}

/* ===== V11 correction 9 : occultation lunaire finale =====
   L'occultateur revient dans la pile du ciel : au-dessus des etoiles (2),
   sous la Lune (4), tandis que les filtres globaux (6/7) s'appliquent aux deux.
   Son contenu reproduit le ciel de fond + l'atmosphere dynamique. */
.moon-sky-occluder {
    z-index: 3 !important;
    opacity: 1 !important;
    background: transparent !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    transition: none !important;
    isolation: isolate;
}
.moon-sky-occluder .moon-occ-sky,
.moon-sky-occluder .moon-occ-atmosphere {
    display: block !important;
    opacity: 1 !important;
}
.moon-occ-sky {
    z-index: 0;
    background:
        radial-gradient(ellipse at 50% 62%, rgba(229,241,250,.72) 0%, rgba(164,205,236,.36) 27%, transparent 58%),
        linear-gradient(to bottom, #5b8fc2 0%, #76a9d1 38%, #b8d4e6 67%, #d8e5e7 100%) !important;
    filter: brightness(var(--scene-brightness)) saturate(var(--scene-saturation)) contrast(var(--scene-contrast)) !important;
    mix-blend-mode: normal !important;
}
.moon-occ-atmosphere {
    z-index: 1;
    mix-blend-mode: multiply !important;
    filter: none !important;
}
.moon-layer { z-index: 4 !important; }

/* Cadre date encore plus etroit. */
.date-panel {
    width: min(82%, 280px) !important;
    max-width: calc(100% - 28px) !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 5px 6px !important;
    padding: 7px 8px !important;
}
.date-panel label { font-size: 9px !important; line-height: 1.15; }
.date-panel input[type="date"] { font-size: 9px !important; padding: 5px 5px !important; }
.date-panel span { font-size: 9px !important; }
@media (max-width: 360px) {
    .date-panel {
        width: min(78%, 250px) !important;
        max-width: calc(100% - 36px) !important;
        grid-template-columns: 1fr !important;
    }
}

/* ===== V12 mobile first / photo personnalisable ===== */
.photo-foreground,.water-effects{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.photo-foreground{z-index:30;filter:brightness(var(--scene-brightness)) saturate(var(--scene-saturation)) contrast(var(--scene-contrast));transition:filter .22s linear}
.water-effects{z-index:31;mix-blend-mode:screen;opacity:.9}
.moon-sky-occluder{z-index:20!important}.moon-layer{z-index:21!important}.sun-orbit{z-index:4!important}
.hud{z-index:100!important}.settings-toggle{z-index:110!important}
.photo-panel{width:min(230px,68vw);padding:10px 11px;border-radius:16px;background:rgba(4,8,14,.72);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(16px);margin-bottom:8px}
.photo-panel .panel-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;opacity:.65;margin-bottom:8px}
.photo-button,.photo-reset{display:block;width:100%;border:0;border-radius:10px;padding:9px 10px;color:#fff;background:rgba(255,255,255,.10);text-align:center;cursor:pointer}
.photo-button{background:rgba(31,117,255,.72);margin-bottom:6px}.photo-reset{font-size:12px}.photo-panel small{display:block;margin-top:7px;font-size:10px;line-height:1.25;opacity:.55}
.date-panel{width:min(230px,68vw)!important;max-width:230px!important;padding:9px 10px!important}
.date-panel input{min-width:0!important;width:100%!important;font-size:13px!important;padding:7px 6px!important}
@media(max-width:390px){.photo-panel,.date-panel{width:min(205px,62vw)!important;max-width:205px!important}.date-panel input{font-size:12px!important}.hud{left:12px!important;right:auto!important;max-width:calc(100vw - 78px)!important}}

/* ===== V13 : calibration photo + choix des phénomènes + cumulus réalistes ===== */
.features-panel{width:min(230px,68vw);padding:10px 11px;border-radius:16px;background:rgba(4,8,14,.76);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(16px);margin-bottom:8px}
.features-panel .panel-title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;opacity:.68;margin-bottom:7px}
.features-panel label{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 1px;font-size:11px}
.features-panel input[type=checkbox]{width:34px;height:20px;accent-color:#2381ff;cursor:pointer}
.calibrate-auto{margin-top:7px;margin-bottom:7px}
.calibration-grid{display:grid;gap:6px}
.calibration-grid label{display:grid;grid-template-columns:58px 1fr;gap:6px;align-items:center;font-size:9px;opacity:.86}
.calibration-grid input{width:100%;min-width:0;cursor:pointer}

/* V13 corrigée : vrais cumulus composés de volumes opaques. Pas de blur global. */
.cloud-field{mix-blend-mode:normal!important;filter:none!important;overflow:hidden}
.cloud{position:absolute;width:250px;height:112px;opacity:.93!important;background:none!important;border-radius:0!important;filter:drop-shadow(0 13px 12px rgba(37,55,73,.18))!important;will-change:transform;transform-origin:50% 65%;isolation:isolate}
.cloud .cumulus-base{position:absolute;left:8%;right:7%;bottom:15%;height:42%;border-radius:48% 52% 42% 44%/52% 55% 45% 42%;background:linear-gradient(to bottom,rgba(250,252,253,.98) 0 32%,rgba(226,233,239,.98) 63%,rgba(177,191,204,.94) 100%);box-shadow:inset 0 -8px 12px rgba(119,138,156,.14);z-index:1}
.cloud .cumulus-puff{position:absolute;border-radius:50%;z-index:2;background:radial-gradient(circle at 36% 25%,#fff 0 24%,#fbfcfd 43%,#eef2f5 66%,#d3dde5 82%,#b9c8d3 100%);box-shadow:inset -8px -12px 16px rgba(120,139,157,.13),inset 4px 5px 9px rgba(255,255,255,.55);will-change:transform,left,top,width,height}
.cloud .cumulus-puff:nth-child(2){left:5%;top:43%;width:34%;height:38%}
.cloud .cumulus-puff:nth-child(3){left:20%;top:25%;width:38%;height:50%}
.cloud .cumulus-puff:nth-child(4){left:37%;top:6%;width:41%;height:61%}
.cloud .cumulus-puff:nth-child(5){left:57%;top:18%;width:37%;height:49%}
.cloud .cumulus-puff:nth-child(6){left:72%;top:39%;width:27%;height:35%}
.cloud .cumulus-puff:nth-child(7){left:31%;top:39%;width:29%;height:38%}
.cloud .cumulus-puff:nth-child(8){left:51%;top:43%;width:31%;height:36%}
.cloud .cumulus-puff:nth-child(9){left:13%;top:52%;width:27%;height:28%;opacity:.96}
.cloud-b{width:320px;height:138px}.cloud-c{width:190px;height:92px}.cloud-d{width:285px;height:126px}.cloud-e{width:215px;height:103px}.cloud-f{width:300px;height:132px}

/* Pendant un réglage, les limites s'affichent brièvement sur l'eau pour confirmer l'action. */
.app.calibrating .water-effects{filter:drop-shadow(0 0 1px rgba(255,255,255,.2))}
@media(max-width:390px){.features-panel{width:min(205px,62vw);max-width:205px}.features-panel label{font-size:10px}.calibration-grid label{grid-template-columns:52px 1fr}.cloud{width:205px;height:92px}.cloud-b{width:260px;height:112px}.cloud-d{width:235px;height:104px}.cloud-f{width:245px;height:108px}}