/* DI_LUNE_COMPACTE — disposition compacte, FR et EN. */
.hi-marine [data-di-moon] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 0;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 34% 45%,
      #163452 0%,#071d36 45%,#031224 100%);
  border: 1px solid #39506a;
  box-shadow:
    0 24px 55px rgba(7,27,49,.17),
    inset 0 1px rgba(255,255,255,.09);
  color: #f7f0e6;

margin-top:16px;font-family:inherit;
}
.hi-marine [data-di-moon]:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .6;
  background-image:
    radial-gradient(circle at 13% 18%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 72% 14%,#d5e7ff 0 1px,transparent 1.5px),
    radial-gradient(circle at 84% 59%,#fff 0 .8px,transparent 1.4px),
    radial-gradient(circle at 41% 86%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 61% 77%,#fff 0 .8px,transparent 1.3px);
  background-size: 178px 163px,227px 193px,153px 211px,
                   243px 179px,201px 167px;
}
.hi-marine [data-di-moon] .moon-visual:before {
  content: "";
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(244,151,68,.25) 0%,
      rgba(235,130,48,.17) 42%,
      rgba(226,112,36,.08) 58%,
      transparent 74%);
  filter: blur(26px);
  transform: scale(1.1);
}
.hi-marine [data-di-moon] .moon-image {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  filter:
    sepia(.22)
    saturate(1.32)
    brightness(1.10)
    contrast(1.13);
  opacity: 0;
  transition: opacity .6s ease;
}
.hi-marine [data-di-moon] .moon-image.loaded { opacity: 1; }
.hi-marine [data-di-moon] .moon-footer a { color: #c9ae80; }

.hi-marine [data-di-moon],
.hi-marine [data-di-moon] * { box-sizing:border-box; }
.hi-marine [data-di-moon] * { font-family:inherit; }
.hi-marine [data-di-moon] .moon-top {
  position:relative;z-index:2;display:flex;
  align-items:center;justify-content:space-between;
  padding:16px 20px 0;
}
.hi-marine [data-di-moon] .moon-heading {
  color:#e2bb7a;font-size:11px;letter-spacing:.18em;font-weight:600;
}
.hi-marine [data-di-moon] .moon-ornament {
  color:#d8bd8c;font-size:19px;
}
.hi-marine [data-di-moon] .moon-body {
  position:relative;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-rows:auto auto auto;
  align-items:center;gap:8px 14px;
  padding:12px 20px 16px;min-height:0;
}
.hi-marine [data-di-moon] .moon-visual {
  position:relative;grid-column:2;grid-row:1 / 3;
  width:100%;max-width:175px;aspect-ratio:1;
  margin:0 auto;align-self:center;
}
.hi-marine [data-di-moon] .moon-copy { display:contents; }
.hi-marine [data-di-moon] .phase {
  position:relative;z-index:2;grid-column:1;grid-row:1;
  align-self:end;margin:0;color:#f7f0e6;
  font-size:clamp(18px,4.5vw,25px);font-weight:400;
  line-height:1.18;letter-spacing:-.02em;
  min-width:0;overflow-wrap:break-word;
}
.hi-marine [data-di-moon] .illumination {
  position:relative;z-index:2;grid-column:1;grid-row:2;
  align-self:start;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:2px 8px;
  padding:0;border:0;min-width:0;
}
.hi-marine [data-di-moon] .illumination strong {
  font-size:27px;font-weight:400;line-height:1.2;color:#f2d8a6;
}
.hi-marine [data-di-moon] .illumination span {
  font-size:11px;line-height:1.35;color:#c2cede;
}
.hi-marine [data-di-moon] .times {
  position:relative;z-index:2;grid-column:1 / -1;grid-row:3;
  display:grid;grid-template-columns:1fr 1fr;
  gap:12px;margin:4px 0 0;padding-top:12px;
  border-top:1px solid rgba(225,203,162,.25);
}
.hi-marine [data-di-moon] .times > div {
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-width:0;
}
.hi-marine [data-di-moon] .times span {
  font-size:11px;line-height:1.3;color:#b5c8d8;margin:0;
}
.hi-marine [data-di-moon] .times strong {
  color:#f7f0e6;font-size:20px;font-weight:400;line-height:1.2;
}
.hi-marine [data-di-moon] .moon-footer {
  position:relative;z-index:2;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;
  gap:4px 12px;padding:10px 20px;
  border-top:1px solid rgba(255,255,255,.09);
  color:#93a9bc;font-size:10px;line-height:1.4;
}
.hi-marine [data-di-moon] .moon-image[hidden] { display:none; }
.hi-marine [data-di-moon] .moon-image-status {
  position:absolute;inset:35% 5% auto;text-align:center;
  font-size:11px;line-height:1.4;color:#b5c8d8;
}
@media (max-width:380px) {
  .hi-marine [data-di-moon] .moon-top { padding:14px 14px 0; }
  .hi-marine [data-di-moon] .moon-body {
    padding:10px 14px 14px;column-gap:10px;
  }
  .hi-marine [data-di-moon] .phase { font-size:18px; }
  .hi-marine [data-di-moon] .moon-footer { padding:9px 14px; }
}
@media (prefers-reduced-motion:reduce) {
  .hi-marine [data-di-moon] .moon-image { transition:none; }
}