/* ═══════════════════════════════════════
   EYLIR VISUALS — pages works en version sombre
   (même interface que SWM Swiss Edition 2026)
   ═══════════════════════════════════════ */
:root { --wd-bg:#0a0a0a; --wd-line:#222; --wd-muted:#8f8f8f; }
html, body { background: var(--wd-bg) !important; color:#fff; }

/* nav */
.nav { background: var(--wd-bg); border-bottom-color: var(--wd-line); }
.nav-logo-img img { filter: invert(1); }
.nav-brand { color:#fff; }
.nav-links a { color: var(--wd-muted); }
.nav-links a:hover, .nav-links a.active { color:#fff; }
.nav-links a::after { background:#fff; }
.nav-burger span { background:#fff; }
.mobile-menu { background: var(--wd-bg); }
.mobile-menu a { color:#fff; }
.lang-btn:hover, .lang-option:hover, .lang-option-mobile:hover { color:#fff; }
.lang-dropdown { background:#141414; border-color: var(--wd-line); }
.lang-option:hover { background:#1c1c1c; }
.lang-sep { color:#333; }

/* footer */
.footer-nav-row, .footer-cta-row, .site-footer { border-top-color: var(--wd-line); }
.footer-nav-row a { color:#fff; }
.site-footer-center svg { color:#fff !important; }
.legal-links a { color: var(--wd-muted); }
.legal-links a:hover { color:#fff; }
.btn-outline { border-color:#fff; color:#fff; }
.btn-outline:hover { background:#fff; color:#000; }
.label { color: var(--wd-muted); }

/* bandeau cookies sombre */
#eylir-cookie-banner { background:#111 !important; border-top-color:#333 !important; }
#eylir-cookie-banner p { color:#ddd !important; }
#eylir-cb-accept { background:#fff !important; color:#000 !important; border-color:#fff !important; }
#eylir-cb-accept:hover { background:transparent !important; color:#fff !important; }
#eylir-cb-refuse { background:transparent !important; color:#fff !important; border-color:#fff !important; }
#eylir-cb-refuse:hover { background:#fff !important; color:#000 !important; }

.work-dark p { text-align:left; }

/* ── HERO ── */
.work-hero {
  display:grid; grid-template-columns: 1fr auto;
  min-height: calc(100vh - 110px);
  border-bottom:1px solid var(--wd-line);
}
.work-hero-text {
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 72px 64px 64px 48px; gap: 28px;
  container-type: inline-size;
}
.work-hero-text h1 {
  font-size: clamp(2.8rem, 6vw, 6.4rem);
  font-size: clamp(2.8rem, 14cqi, 22rem);
  font-weight:400; line-height:0.98; letter-spacing:-0.035em;
  overflow-wrap: break-word;
}
.work-hero-text p { font-size: clamp(15px, 1.15vw, 21px); line-height:1.8; color: var(--wd-muted); max-width: 46em; }
.work-scroll { font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color: var(--wd-muted); }
.work-hero-img { height: calc(100vh - 110px); min-height:560px; aspect-ratio: 2/3; overflow:hidden; }
.work-hero-img img { width:100%; height:100%; object-fit:cover; }

/* ── MOSAÏQUE ── */
.mosaic {
  display:grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense; gap:6px; padding:6px;
  container-type: inline-size;
}
.mosaic-item { margin:0; aspect-ratio:2/3; overflow:hidden; background:#141414; cursor:zoom-in; }
.mosaic-item.big { grid-column: span 2; grid-row: span 2; aspect-ratio:auto; }
.mosaic-item.big.right { grid-column: 3 / span 2; }
.mosaic-item.wide { grid-column: span 2; aspect-ratio:auto;
  /* hauteur d'une ligne normale, même si 2 paysages partagent la ligne */
  min-height: calc((100cqw - 18px) * 0.375); }
.mosaic-item img {
  width:100%; height:100%; object-fit:cover;
  transition: transform 0.7s cubic-bezier(.2,.7,.2,1), filter 0.4s;
}
.mosaic-item:hover img { transform: scale(1.035); filter: brightness(1.08); }

/* ── NAV PROJETS ── */
.work-nav {
  padding: 40px 48px; display:flex; justify-content:space-between;
  border-bottom:1px solid var(--wd-line); border-top:1px solid var(--wd-line);
}
.work-nav a { font-size:13px; color: var(--wd-muted); transition: color 0.2s; }
.work-nav a:hover { color:#fff; }

/* ── TABLETTE ── */
@media (max-width: 1024px) {
  .work-hero { grid-template-columns: 1fr; min-height:0; }
  .work-hero-img { order:-1; height:auto; min-height:0; width:100%; aspect-ratio: 4/5; }
  .work-hero-text { padding: 48px 40px 56px; }
}

/* ── MOBILE ── */
@media (max-width: 768px) {
  .work-hero-text { padding: 36px 20px 44px; gap:20px; }
  .mosaic { grid-template-columns: repeat(2, 1fr); gap:4px; padding:4px; }
  .mosaic-item.big, .mosaic-item.big.right { grid-column: 1 / -1; grid-row: span 1; aspect-ratio: 2/3; }
  .mosaic-item.wide { grid-column: 1 / -1; aspect-ratio: 3/2; min-height:0; }
  .work-nav { padding: 28px 20px; }
}