/*
Theme Name: Lumieres Studio
Description: Theme custom pour Lumieres Studio / Odile Soudant
Author: Andy Rank
Version: 1.9
Text Domain: lumieres-studio
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --beige: #FEFAF7; --gris: #56524E; }
html, body { height: 100%; }
body { background-color: var(--beige); color: var(--gris); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ============================================
   OVALE PLUGIN
   ============================================ */
.vhgb-directional-cursor { opacity: 0 !important; pointer-events: none !important; }

/* ============================================
   POLICE SANG BLEU DANS LA FRISE
   ============================================ */
.vhgb-meta-item,
.vhgb-meta-feed,
.vhgb-element-text,
.vhgb-project-meta,
.vhgb-gallery-wrap * {
    font-family: "SangBleuKingdom", Georgia, serif !important;
}
.vhgb-meta-item    { font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.06em !important; }
.vhgb-meta-feed    { font-size: 9px  !important; letter-spacing: 0.05em !important; opacity: 0.8; }
.vhgb-element-text { font-size: 9px  !important; letter-spacing: 0.04em !important; line-height: 1.5 !important; font-style: italic !important; }

/* ============================================
   HEADER — 48px fixe
   ============================================ */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    height: 48px; padding: 0 40px 0 0;
    display: flex; align-items: center; justify-content: space-between;
    background-color: var(--beige); color: var(--gris);
    transition: background-color 0.3s, color 0.3s;
}
.site-logo { padding-left: 30px; display: flex; align-items: center; }
.site-logo img { height: 20px; width: auto; }

/* ============================================
   NAV HOMEPAGE — items restent en place
   ============================================ */
.site-nav { display: flex; align-items: center; }
.site-nav ul { list-style: none; display: flex; align-items: center; gap: 28px; }
.site-nav ul li { transition: opacity 0.2s; }
.site-nav ul li a {
    font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase;
    white-space: nowrap; opacity: 0.75; transition: opacity 0.2s;
}
.site-nav ul li a:hover, .site-nav ul li.active-filter a { opacity: 1; }

/* Burger en bout — toujours dans le DOM */
.nav-burger {
    background: none; border: none; cursor: pointer; color: inherit;
    padding: 4px; margin-left: 16px;
    display: flex; align-items: center; flex-shrink: 0; width: 24px;
    visibility: hidden;
}
.nav-burger svg { width: 16px; height: 16px; stroke: currentColor; }

/* ============================================
   NAV ARTICLE
   ============================================ */
.article-nav { display: flex; align-items: center; gap: 14px; }
.current-cat { font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap; }
.burger-btn {
    background: none; border: none; cursor: pointer; color: inherit;
    padding: 4px; display: flex; align-items: center;
}
.burger-btn svg { width: 16px; height: 16px; stroke: currentColor; }

.other-cats {
    display: flex; align-items: center; gap: 24px;
    overflow: hidden; max-width: 0; opacity: 0;
    transition: max-width 0.4s ease, opacity 0.3s ease; white-space: nowrap;
}
.other-cats.open { max-width: 900px; opacity: 1; }
.other-cats a { font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; opacity: 0.6; transition: opacity 0.2s; }
.other-cats a:hover { opacity: 1; }

/* ============================================
   HOMEPAGE GRILLE
   ============================================ */
.homepage-grid {
    padding: 64px 48px 80px;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 120px 48px; align-items: start;
    background-color: var(--beige); min-height: 100vh;
}
.grid-item { display: block; position: relative; }
.grid-item-image { width: 100%; overflow: hidden; position: relative; }
.grid-item-image img { width: 100%; height: auto; display: block; }

.grid-item-overlay {
    position: absolute; bottom: 10px; right: 10px;
    opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
    white-space: nowrap;
}
.grid-item:hover .grid-item-overlay { opacity: 1; }
.overlay-label {
    font-size: 9px; color: #ffffff; letter-spacing: 0.05em; line-height: 1;
    text-shadow:
        -1px -1px 0 rgba(86,82,78,0.6),
         1px -1px 0 rgba(86,82,78,0.6),
        -1px  1px 0 rgba(86,82,78,0.6),
         1px  1px 0 rgba(86,82,78,0.6);
}
.grid-item.filtered-out { display: none; }

/* ============================================
   CATEGORY
   ============================================ */
.archive-header { padding: 64px 48px 48px; background-color: var(--beige); }
.archive-title  { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; }
.category-grid  {
    padding: 0 48px 120px; display: grid;
    grid-template-columns: 1fr 1fr 1fr; gap: 160px 40px;
    align-items: start; background-color: var(--beige);
}

/* ============================================
   SINGLE — 100vh exact
   ============================================ */
body.single-post { overflow: hidden; height: 100vh; }
.single-project  { height: 100vh; display: flex; flex-direction: column; overflow: hidden; padding: 0 30px 30px 30px; }
.project-gallery { flex: 1; overflow: hidden; position: relative; min-height: 0; }

.project-gallery .vhgb-gallery-wrap,
.project-gallery .vhgb-gallery-inner { height: 100% !important; }

/* ============================================
   CHEVRONS
   ============================================ */
.vhgb-zone-left, .vhgb-zone-right {
    position: fixed; top: 48px; bottom: 30px; width: 25%;
    z-index: 100; display: flex; align-items: center; cursor: none;
}
.vhgb-zone-left  { left: 30px;  justify-content: flex-start; padding-left: 20px; }
.vhgb-zone-right { right: 30px; justify-content: flex-end;   padding-right: 20px; }
.vhgb-chevron { opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.vhgb-chevron svg { width: 40px; height: 40px; }
.vhgb-zone-right:hover .vhgb-chevron { opacity: 1; }
.vhgb-zone-left.can-go-left:hover .vhgb-chevron { opacity: 1; }
.vhgb-zone-left:not(.can-go-left) { pointer-events: none; }

/* ============================================
   PAGE
   ============================================ */
.page-content { padding: 80px 48px; max-width: 680px; min-height: 100vh; }
.page-content h1 { font-size: 20px; font-weight: 300; margin-bottom: 40px; }
.page-content p  { font-size: 13px; line-height: 1.8; opacity: 0.85; margin-bottom: 24px; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .homepage-grid { gap: 80px 32px; padding: 64px 32px 60px; }
    .category-grid { grid-template-columns: 1fr 1fr; gap: 100px 32px; padding: 0 32px 80px; }
    .site-nav ul   { gap: 18px; }
}
@media (max-width: 768px) {
    .site-header   { padding: 0 24px 0 0; }
    .site-logo     { padding-left: 24px; }
    .site-nav ul   { display: none; }
    .homepage-grid { grid-template-columns: 1fr; gap: 60px; padding: 64px 24px 40px; }
    .category-grid { grid-template-columns: 1fr; gap: 60px; padding: 0 24px 60px; }
    .vhgb-zone-left, .vhgb-zone-right { display: none; }
    .single-project { padding: 0 16px 16px; }
}