/*
Theme Name: SFIYA
Theme URI: https://sfiya.art
Author: SFIYA
Description: Thème sur-mesure pour le site de l'artiste SFIYA — peinture & réalité virtuelle.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: sfiya
*/

:root{
  --ink:#211E18;
  --bg:#F3EFE6;
  --accent:#9C4A2B;
  --muted:#9A927E;
  --muted2:#6B6555;
  --line:#DAD3C3;
  --card-bg:#E7E1D3;
  --card-line:#D2CBBA;
  --green:#34433A;          /* lighter step of the brand green (hover fills) */
  --green-deep:#1F2A24;     /* brand colour: modals, SFIYA word, buttons (Personnaliser overrides it) */
  --green-soft:#DDE2D9;
  --serif:'Cormorant Garamond',Georgia,serif;
  /* Two font families for the whole site: --serif for titles / big clickable
     elements, Roboto for all text and small labels (--body, --sans, --text). */
  --body:'Roboto',Helvetica,Arial,sans-serif;
  --sans:'Roboto',Helvetica,Arial,sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); overflow-x:hidden; cursor:none; min-height:100vh; position:relative; }
body.sfiya-no-cursor{ cursor:auto; }
::selection{ background:var(--green); color:var(--bg); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.sfiya-wrap{ min-height:100vh; position:relative; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 38px; background:rgba(243,239,230,.88);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.site-logo{
  color:var(--green-deep);
  font-family:var(--serif); font-size:22px; font-weight:500;
  letter-spacing:.34em; padding-left:.34em; transition:opacity .2s ease;
}
.site-logo:hover{ opacity:.62; }
.header-nav{ display:flex; align-items:center; gap:32px; }
.header-nav ul{ display:flex; align-items:center; gap:32px; margin:0; padding:0; }
.header-nav li{ list-style:none; }
.header-nav a{
  font-family:var(--sans); font-size:13.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:#5A5446; border-bottom:1px solid transparent; padding-bottom:3px;
  display:inline-flex; align-items:center; gap:4px;
  transition:color .2s ease, border-color .2s ease;
}
.header-nav a:hover, .header-nav .current-menu-item > a{ color:var(--ink); border-bottom-color:var(--green); }
.header-nav .nav-arrow{ opacity:.5; flex:none; width:8px; height:8px; }
@media (max-width:1180px){ .header-nav a{ font-size:12.5px; letter-spacing:.1em; } .header-nav, .header-nav ul{ gap:24px; } }
/* ---- Page titles use the brand green ---- */
h1, h1.elementor-heading-title, .elementor-widget-heading h1 .elementor-heading-title, .detail-title, .page-title{ color:var(--green-deep) !important; }
/* ---- Actualités page ---- */
.actu-list{ width:100%; max-width:1100px; margin:20px auto 0; }
.actu-item{ display:grid; grid-template-columns:minmax(200px,280px) minmax(0,1fr); gap:20px 56px; padding:44px 0; border-top:1px solid var(--line); align-items:start; }
.actu-date{ font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); line-height:1.5; padding-top:10px; }
.actu-title{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.6vw,48px); line-height:1.05; margin:0 0 12px; color:var(--ink); }
.actu-lieu{ font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; }
.actu-text, .actu-text p{ font-family:var(--text); font-size:17px; line-height:1.7; color:#352F26; max-width:62ch; }
.actu-text p{ margin:0 0 12px; }
.actu-note{ font-family:var(--text); font-size:14px; line-height:1.5; color:var(--muted); margin:6px 0 0; max-width:62ch; }
.actu-link{ display:inline-block; margin-top:20px; font-family:var(--serif); font-weight:600; font-size:19px; letter-spacing:.01em; color:var(--ink); border:1px solid #C9C1B0; border-radius:999px; padding:9px 20px; transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.actu-link:hover{ background:var(--green-deep); border-color:var(--green-deep); color:var(--bg); transform:translateY(-2px); }
.actu-past-label{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:56px 0 0; padding-bottom:14px; }
.actu-item.is-past{ opacity:.62; }
.actu-empty{ text-align:center; color:var(--muted); padding:40px 0; }
@media (max-width:760px){ .actu-item{ grid-template-columns:minmax(0,1fr); gap:10px; padding:32px 0; } .actu-date{ padding-top:0; } }
/* About texts are text-editor widgets bound to the page fields (not title boxes). */
.about-text, .about-text .elementor-widget-container, .about-text p{ font-family:var(--text); font-weight:400; font-size:19px; line-height:1.5 !important; color:#352F26; }
.about-text strong, .about-text b{ font-weight:700; }
.about-text em, .about-text i{ font-style:italic; }
.about-text h3{ font-family:var(--text); font-size:1.17em; font-weight:700; line-height:1.5; margin:1em 0; color:#352F26; }
/* Same rendering as when these texts sat in heading widgets: bold italic sans-serif lead. */
.demarche-lead.elementor-widget-text-editor, .demarche-lead .elementor-widget-container, .demarche-lead p{ font-family:var(--text); font-style:italic; font-weight:600; font-size:clamp(26px,3.4vw,40px); line-height:1.4 !important; color:var(--ink); margin:0; }
.demarche-lead{ margin-bottom:48px; }
/* (older rule, kept for text inside heading widgets) About texts sit in Elementor heading widgets (bold by default). The French text resets it with inline spans (font-weight:400); this does the same for any text without them, e.g. the English version. */
.about-bio .elementor-heading-title, .about-demarche .elementor-heading-title, .about-bio .elementor-heading-title p, .about-demarche .elementor-heading-title p{ font-weight:400; }
.about-bio .elementor-heading-title strong, .about-bio .elementor-heading-title b, .about-demarche .elementor-heading-title strong, .about-demarche .elementor-heading-title b{ font-weight:700; }
.about-bio .elementor-heading-title em, .about-bio .elementor-heading-title i, .about-demarche .elementor-heading-title em, .about-demarche .elementor-heading-title i{ font-style:italic; }
/* ---- Buttons and big clickable links share the title font (serif) ---- */
.wpcf7-form input[type=submit], .news-cta, .ov-viewall, a[href$=".pdf"], a[href$=".pdf"] .elementor-heading-title{ font-family:var(--serif) !important; font-weight:600 !important; font-size:19px !important; letter-spacing:.01em !important; text-transform:none !important; }
.ov-viewall{ font-size:18px !important; }
/* ---- Photo gallery (lightbox) on project pages ---- */
.detail-images figure[data-full]{ cursor:zoom-in; outline:none; }
.detail-images figure[data-full]:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
.sfiya-lightbox{ position:fixed; inset:0; z-index:90; background:rgba(26,22,18,.99); color:#EFE9DC; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s; }
.sfiya-lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .35s ease, visibility 0s; }
.lb-stage{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:64px 96px 72px; box-sizing:border-box; cursor:zoom-out; }
.lb-stage img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; opacity:0; transform:scale(.985); transition:opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); box-shadow:0 30px 80px rgba(0,0,0,.45); cursor:default; }
.lb-stage img.is-in{ opacity:1; transform:none; }
.lb-close{ position:absolute; top:22px; right:26px; width:30px; height:30px; border:0; background:none; cursor:pointer; z-index:2; transition:opacity .2s ease; }
.lb-close:hover{ opacity:.6; }
.lb-close span{ position:absolute; top:14px; left:3px; width:24px; height:1.5px; background:#EFE9DC; }
.lb-close span:nth-child(1){ transform:rotate(45deg); }
.lb-close span:nth-child(2){ transform:rotate(-45deg); }
.lb-nav{ position:absolute; top:50%; width:64px; height:64px; margin-top:-32px; border:0; background:none; color:#EFE9DC; cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center; opacity:.75; transition:opacity .2s ease, transform .25s ease; }
.lb-nav:hover{ opacity:1; }
.lb-nav svg{ width:30px; height:30px; overflow:visible; }
.lb-prev{ left:18px; }
.lb-prev svg{ transform:rotate(-135deg); }
.lb-prev:hover{ transform:translateX(-4px); }
.lb-next{ right:18px; }
.lb-next svg{ transform:rotate(45deg); }
.lb-next:hover{ transform:translateX(4px); }
.lb-count{ position:absolute; left:0; right:0; bottom:26px; text-align:center; font-family:var(--sans); font-size:11px; letter-spacing:.3em; color:rgba(239,233,220,.7); }
@media (max-width:700px){ .lb-stage{ padding:60px 12px 64px; } .lb-nav{ width:48px; height:48px; margin-top:-24px; } .lb-prev{ left:2px; } .lb-next{ right:2px; } }
/* Same arrow inside buttons and links (injected from main.js) */
.btn-arrow-wrap{ display:inline-block; margin-left:.5em; line-height:0; vertical-align:baseline; }
.btn-arrow-wrap.is-lead{ margin-left:0; margin-right:.5em; }
.btn-arrow{ display:inline-block; width:.68em; height:.68em; overflow:visible; }
.header-divider{ width:1px; height:13px; background:#C6BEAC; flex:none; }
.header-lang{ display:flex; align-items:center; gap:8px; font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.08em; }
.header-lang span[data-cursor]{ color:var(--muted); cursor:pointer; transition:color .2s ease; }
.header-lang span.is-active{ color:var(--ink); }
.header-lang span[data-cursor]:hover{ color:var(--ink); }
.header-lang .sep{ opacity:.35; }
.header-lang a{ color:var(--muted); transition:color .2s ease; }
.header-lang a.is-active, .header-lang a:hover{ color:var(--ink); }
.mobile-lang{ display:flex; align-items:center; gap:10px; padding:0 24px; margin:6px 0 4px; font-family:var(--sans); font-size:15px; font-weight:500; letter-spacing:.08em; }
.mobile-lang a{ color:var(--muted); }
.mobile-lang a.is-active{ color:var(--ink); }
.mobile-lang .sep{ opacity:.35; }
.mobile-nav-links ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:24px; }

.burger-btn{ display:none; border:none; background:none; cursor:pointer; width:26px; height:20px; position:relative; flex:none; padding:0; }
.burger-btn span{ position:absolute; left:0; width:26px; height:1.5px; background:var(--ink); }
.burger-btn span:nth-child(1){ top:0; }
.burger-btn span:nth-child(2){ top:9px; }
.burger-btn span:nth-child(3){ top:18px; }

.mobile-nav-panel{
  position:fixed; inset:0; z-index:75; background:var(--bg);
  display:none; flex-direction:column; padding:24px 26px;
  animation:overlayIn .3s cubic-bezier(.2,.7,.2,1) both;
}
.mobile-nav-panel.is-open{ display:flex; }
.mobile-nav-top{ display:flex; align-items:center; justify-content:space-between; }
.mobile-nav-links{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:24px; padding:20px 4px; overflow-y:auto; }
.mobile-nav-links a{ font-family:var(--serif); font-weight:300; font-size:38px; line-height:1.05; color:var(--ink); }
.close-btn{ border:none; background:none; cursor:pointer; width:24px; height:24px; position:relative; flex:none; }
.close-btn span{ position:absolute; top:11px; left:1px; width:22px; height:1.5px; background:var(--ink); }
.close-btn span:nth-child(1){ transform:rotate(45deg); }
.close-btn span:nth-child(2){ transform:rotate(-45deg); }

@keyframes overlayIn{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- Hero (Accueil) ---------- */
.hero-section{ height:100vh; display:flex; flex-direction:column; position:relative; }
.hero-main{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:110px 20px 60px; min-height:0; overflow-y:auto; }
/* These four are also meant to be pasted into any Elementor widget's
   "Classes CSS" field (Advanced tab) to match the SFIYA look — !important
   is needed there since Elementor's own widget styles are otherwise more
   specific than a plain inherited value from the wrapper. */
.hero-tagline, .hero-tagline p, .hero-tagline .elementor-heading-title{
  font-family:var(--sans) !important; font-size:11px !important; letter-spacing:.3em !important;
  text-transform:uppercase !important; color:var(--muted) !important; margin-bottom:30px !important;
}
.hero-title, .hero-title .elementor-heading-title{
  font-family:var(--serif) !important; font-weight:300 !important; font-size:clamp(70px,16vw,220px) !important;
  line-height:.9 !important; margin:0 !important; letter-spacing:.22em !important; padding-left:.22em !important;
  color:var(--green-deep) !important; position:relative !important; z-index:1;
}

/* Birds animation floating behind/around the SFIYA title, blended into
   the page's own cream background so only the dark brushwork reads. */
.hero-birds-bg{
  position:absolute !important; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(1240px,100vw) !important; max-width:none !important; height:auto; z-index:0; pointer-events:none;
  mix-blend-mode:darken; opacity:1;
}
/* The reveal-on-scroll animation leaves a transform on the parents, which
   isolates the video from the page background and kills the blend. */
[data-reveal]:has(.hero-birds-bg){ transform:none !important; }
/* Crops the generator's watermark band at the bottom of the clip. */
.hero-birds-bg{ clip-path:none; }
/* Light-yellow rectangle behind SFIYA: the colour of the frame tints the video's cream background (change --hero-frame). */
:root{ --hero-frame:#FBF3D6; }
.elementor-element-882d84c{ position:static !important; } /* so the frame is centred on the hero block, not on its own 0-height widget */
.hero-birds-frame{ position:absolute; top:56%; left:50%; transform:translate(-50%,-50%); width:min(1100px,94vw); aspect-ratio:16/9; background:var(--hero-frame); box-shadow:0 30px 80px rgba(33,30,24,.10); overflow:hidden; z-index:0; pointer-events:none; }
.hero-birds-frame .hero-birds-bg{ position:static !important; transform:none; width:100% !important; height:100%; max-width:none !important; object-fit:cover; display:block; mix-blend-mode:multiply; }
@media (max-width:700px){ .hero-birds-frame{ width:92vw; aspect-ratio:4/5; top:55%; } .hero-birds-bg{ width:100% !important; } }
.hero-title span{ display:inline-block; will-change:transform; }
.hero-ig, .hero-ig a{
  display:inline-flex !important; align-items:center; gap:9px; font-family:var(--body) !important;
  font-style:italic !important; font-size:clamp(16px,2vw,21px) !important; color:#5C564A !important; transition:color .2s ease;
}
.hero-ig:hover, .hero-ig a:hover{ color:var(--ink) !important; }
.hero-icons-row{ display:flex; align-items:center; justify-content:center; gap:26px; margin-top:34px; }
.hero-icons-row .hero-ig{ margin-top:0; }

/* Small autoplaying preview clips of animated artworks, below the hero
   icons — a discreet artistic accent, not competing with the SFIYA title. */
.hero-anim-label{ font-family:var(--sans) !important; font-size:10px !important; letter-spacing:.24em !important; text-transform:uppercase !important; color:var(--muted) !important; margin-top:56px !important; text-align:center; }
video.hero-anim-video{ width:130px !important; height:auto !important; max-width:130px !important; border:1px solid var(--card-line); display:block; }
@media (max-width:600px){ video.hero-anim-video{ width:100px !important; max-width:100px !important; } }

/* Homepage: the giant centered hero title already carries the SFIYA
   mark, so the header/footer wordmarks are hidden here only to avoid
   showing the name three times on one screen (kept in the DOM so the
   header layout doesn't shift and the mobile panel is unaffected). */
body.home .site-header .site-logo{ visibility:hidden; }
body.home .footer-logo{ display:none; }

.site-footer{ border-top:1px solid var(--line); padding:34px 38px; max-width:1240px; margin:0 auto; width:100%; }
.site-footer.is-inner{ padding:58px 38px 46px; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px 24px; }
.footer-logo{ font-family:var(--serif); font-size:32px; font-weight:300; letter-spacing:.16em; padding-left:.16em; color:var(--green-deep); }
.site-footer.is-inner .footer-logo{ font-size:46px; }
.footer-links{ display:flex; align-items:center; gap:26px; font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:var(--muted2); }
.footer-links a{ transition:color .2s ease; }
.footer-links a:hover{ color:var(--ink); }
.footer-meta{ font-family:var(--sans); font-size:12px; line-height:1.9; color:var(--muted2); text-align:right; }
.footer-meta a{ display:block; transition:color .2s ease; }
.footer-meta a:hover{ color:var(--ink); }
.footer-meta .copyright{ color:#9A927E; }
.footer-meta .footer-credit{ margin-top:0; }
.footer-meta{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; gap:0 22px; }

/* ---------- Generic page layout ---------- */
.inner-main{ padding-top:128px; }
.page-wrap{ max-width:1240px; margin:0 auto; padding:0 38px; }
.page-wrap.narrow{ max-width:1180px; }
/* Hidden site-wide: the page name already shows once, large, in
   .page-title — the small eyebrow above it just repeated the same text. */
.page-eyebrow{ display:none; }
/* Plain-text pages (privacy policy…): centred column, same width as About */
.legal-page{ max-width:760px; margin:0 auto; padding:0 24px 120px; }
.legal-page .page-title{ text-align:center; margin:18px 0 56px; }
.legal-body{ font-family:var(--text); font-size:17px; line-height:1.7; color:#352F26; }
.legal-body h2{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,2.6vw,30px); line-height:1.2; color:var(--green-deep); margin:46px 0 12px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p, .legal-body li{ font-size:17px; line-height:1.7; margin:0 0 14px; }
.legal-body ul{ margin:0 0 14px; padding-left:22px; }
.legal-body li{ margin-bottom:10px; }
.legal-body a{ color:var(--green-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.legal-body a:hover{ color:var(--accent); }
.legal-body strong{ font-weight:700; }
@media (max-width:600px){ .legal-page{ padding:0 20px 80px; } .legal-page .page-title{ font-size:34px !important; margin-bottom:36px; } }
.page-title, .page-title .elementor-heading-title{
  font-family:var(--serif) !important; font-weight:300 !important; font-size:clamp(44px,8vw,104px) !important;
  line-height:.95 !important; margin:18px 0 0; color:var(--green-deep) !important;
}

.tabs-row{ display:flex; gap:30px; flex-wrap:wrap; margin:54px 0 0; padding-bottom:18px; border-bottom:1px solid var(--line); }
.tabs-row a{ font-family:var(--sans); font-size:13px; font-weight:400; letter-spacing:.15em; text-transform:uppercase; padding:0 0 7px; border:0; border-bottom:3px solid transparent; border-radius:0; line-height:1.2; color:#5A5446 !important; transition:color .2s ease, border-color .2s ease; }
.tabs-row a{ white-space:nowrap; }
@media (max-width:600px){ .tabs-row{ gap:12px 18px; } .tabs-row a{ font-size:11.5px; letter-spacing:.08em; } }
.tabs-row a:not(.is-active):hover{ color:var(--ink) !important; border-bottom-color:rgba(60,90,58,.45) !important; }
body .tabs-row a:not(.is-active):not(:hover){ color:#5A5446 !important; font-weight:400; }
.tabs-row a.is-active{ color:var(--ink) !important; font-weight:700; border-bottom-color:var(--green-deep) !important; }
.tabs-empty-message{ font-family:var(--body); font-style:italic; font-size:17px; color:var(--muted2); padding:60px 0; margin:0; }

.btn-pill, .btn-pill .elementor-button{
  display:inline-block !important; font-family:var(--sans) !important; font-size:11px !important; font-weight:600 !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:var(--ink) !important; background:transparent !important; border:1px solid #C9C1B0 !important; border-radius:999px !important; padding:14px 26px !important; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-pill:hover, .btn-pill .elementor-button:hover{ background-color:var(--green-deep) !important; color:var(--bg) !important; border-color:var(--green-deep) !important; transform:scale(1.05); box-shadow:0 10px 24px rgba(33,30,24,.22); }

/* ---------- Placeholder image box (no photo uploaded yet) ---------- */
.img-placeholder{ position:relative; background:var(--card-bg); overflow:hidden; }
.img-placeholder::before{ content:""; position:absolute; inset:16px; border:1px solid var(--card-line); }
.img-placeholder::after{ content:none; }
.img-placeholder img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- About page ---------- */
/* All four tab panels share one width, centered on the page.
   .about-bio-panel is Biographie's outer wrapper (portrait stacked above
   its text); .about-grid only wraps the text inside it, so it isn't the
   right target for the panel's overall width. */
.about-bio-panel, .about-demarche, .about-cv, .about-presse{ max-width:760px; margin-left:auto; margin-right:auto; }
/* Portrait and text now stack as siblings inside .about-bio-panel (not
   side-by-side grid columns), so .about-grid just needs to fill that
   panel's full width instead of splitting into two tracks for a single
   child. */
.about-grid{ width:100% !important; padding:64px 0 120px; }
.about-portrait{ aspect-ratio:4/5; width:100%; max-width:340px; }
@media (max-width: 900px){ .about-portrait{ max-width:none; } }
.about-bio{ font-size:19px; line-height:1.9; font-weight:400; color:#352F26; }
.about-bio, .about-bio .elementor-heading-title, .about-bio p, .about-bio span{ line-height:1.5 !important; }
.presse-intro, .presse-intro .elementor-heading-title{ line-height:1.5 !important; }
.contact-intro, p.contact-intro{ line-height:1.55 !important; }
.demarche-lead, .demarche-lead .elementor-heading-title{ line-height:1.4 !important; }
.about-bio p{ margin:0 0 26px; }
.about-bio p:last-child{ margin-bottom:0; }
.about-demarche{ padding:64px 0 120px; }
.demarche-lead{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(26px,3.4vw,40px); line-height:1.3; margin-bottom:48px; }
.about-cv{ padding:64px 0 120px; }
.cv-row{ display:grid; grid-template-columns:220px 1fr; gap:30px; padding:30px 0; border-top:1px solid var(--line); }
.cv-group-title{ font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.cv-entry{ display:flex; gap:20px; padding:7px 0; font-size:18px; line-height:1.5; }
.cv-entry .yr{ font-family:var(--sans); font-size:13px; color:var(--muted); min-width:54px; }
.about-presse{ padding:64px 0 120px; }
.presse-intro{ font-size:19px; line-height:1.75; color:#352F26; max-width:620px; margin:0 0 48px; }
.presse-row{ display:flex !important; align-items:center; justify-content:space-between !important; gap:24px; padding:26px 0; border-top:1px solid var(--line); transition:padding-left .25s ease; }
.presse-row:hover{ padding-left:10px; }
.presse-row:hover .ttl{ color:var(--ink); }
.proj-row{ cursor:default; }
/* Only the title and the buttons are interactive, not the whole card. */
.proj-row .proj-thumb, .proj-row a.proj-thumb{ pointer-events:none; }
.proj-title{ width:fit-content !important; max-width:100%; align-self:flex-start !important; }
.proj-actions{ margin-top:4px; }
.proj-btn{ width:auto !important; }
.proj-actions{ gap:10px !important; flex-wrap:nowrap !important; }
.proj-row .proj-meta, .proj-row .proj-actions{ padding-left:0 !important; padding-right:0 !important; }
.proj-row .proj-actions{ column-gap:10px !important; row-gap:10px !important; --gap:10px; --row-gap:10px; --column-gap:10px; justify-content:flex-start !important; align-items:center; }
.proj-row .proj-btn{ margin:0 !important; }
@media (max-width:900px){
  .proj-list .proj-row{ grid-template-columns:minmax(0,1fr) !important; gap:22px !important; padding:34px 0 !important; align-items:start !important; }
  .proj-list .proj-row:nth-child(2n) .proj-thumb, .proj-list .proj-row .proj-thumb{ order:0 !important; }
  .proj-row .proj-thumb{ width:100% !important; }
  .proj-row > .e-con:not(.proj-thumb){ width:100% !important; padding-left:0 !important; padding-right:0 !important; }
  .proj-row .proj-meta{ margin-bottom:12px; }
  .proj-title{ margin-bottom:14px; }
  .proj-desc{ max-width:none; margin-bottom:20px; }
  .proj-list .elementor-loop-container{ margin-top:-24px; }
}
@media (max-width:600px){
  .tabs-row{ gap:10px 20px; }
  .tabs-row a{ font-size:12px; letter-spacing:.1em; padding:0 0 6px; }
  .proj-actions{ flex-direction:column !important; align-items:stretch !important; flex-wrap:nowrap !important; max-width:260px; }
  .proj-row .proj-actions .proj-btn{ width:100% !important; }
  .proj-row .proj-actions .proj-btn a{ display:block !important; text-align:center; padding:11px 15px; }
}
.proj-btn a{ display:inline-block; white-space:nowrap; font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink) !important; border:1px solid #C9C1B0; border-radius:999px; padding:8px 15px; line-height:1; transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.proj-btn a:hover{ background-color:var(--green-deep); border-color:var(--green-deep); color:var(--bg) !important; transform:translateY(-2px); box-shadow:0 8px 18px rgba(43,64,41,.22); }
.proj-btn-detail a{ background-color:var(--green-deep); border-color:var(--green-deep); color:var(--bg) !important; }
.proj-btn-detail a:hover{ background-color:var(--green); border-color:var(--green); }
.proj-row .proj-actions .proj-btn.proj-btn-detail a, .proj-row .proj-actions .proj-btn.proj-btn-detail a:visited{ color:#F3EFE6 !important; }
.proj-row .proj-actions .proj-btn.proj-btn-site a:hover{ color:#F3EFE6 !important; }
.proj-btn-site:not(:has(a)){ display:none !important; }
.proj-discover{ border-bottom:1px solid transparent; transition:border-color .2s ease, color .2s ease; }
.proj-row:hover .proj-discover{ color:var(--green) !important; border-bottom-color:var(--green); }
.presse-row .left{ display:flex; align-items:baseline; gap:22px; }
.presse-row .src{ font-family:var(--sans); font-size:12px; color:var(--muted); }
.presse-row .ttl{ font-family:var(--serif); font-size:clamp(22px,2.6vw,30px); }
.presse-row .act{ font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.about-pager{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding:34px 0 96px; border-top:1px solid var(--line); }
.about-pager a{ max-width:44%; transition:opacity .2s ease; }
.about-pager a:hover{ opacity:.6; }
.about-pager .lbl{ font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.about-pager .next-title{ font-family:var(--serif); font-size:clamp(22px,3vw,34px); line-height:1.05; }
.about-pager .right{ text-align:right; }

/* ---------- Projets list ---------- */
/* The Loop Grid widget's own "columns" setting is 1, but Elementor's
   cached per-page CSS still ships a stale 2-column grid-template-columns
   — force a single column here until that cache regenerates. */
.proj-list{ padding:0 0 30px !important; }
.proj-list .elementor-loop-container{ margin-top:-44px; }
.proj-list .elementor-loop-container.elementor-grid{ grid-template-columns:1fr !important; }
.proj-row{ display:grid !important; grid-template-columns:1.15fr 1fr !important; gap:60px; align-items:center; padding:54px 0; }
/* Last project: no separator line below it. */
.elementor-loop-container > .e-loop-item:last-child .proj-row{ border-bottom-width:0 !important; }
.proj-row .proj-thumb{ aspect-ratio:16/11 !important; height:auto !important; transition:box-shadow .3s ease; }
.proj-row:nth-child(2n) .proj-thumb{ order:1; }
.proj-status{ position:absolute; top:16px; left:16px; z-index:1; font-family:var(--sans); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink) !important; background:var(--bg); padding:6px 11px; }
.proj-meta{ display:flex !important; flex-direction:row !important; gap:6px; font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted) !important; margin-bottom:18px; }
.proj-meta *{ color:var(--muted) !important; }
.proj-title{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,4.4vw,60px); line-height:1.02; margin:0 0 22px; transition:color .25s ease, transform .25s ease; transform-origin:left; color:var(--ink) !important; }
.proj-title:hover{ color:var(--accent) !important; transform:translateX(6px); }
.proj-title:hover a, .proj-title:hover .elementor-heading-title{ color:var(--accent) !important; }
.proj-desc{ font-size:18px; line-height:1.7; color:#4A4439 !important; max-width:440px; margin:0 0 26px; }
.proj-desc *{ color:#4A4439 !important; }
.proj-discover{ font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent) !important; }
.load-more-wrap{ display:flex; justify-content:center; padding:10px 0 90px; }

/* ---------- Detail (projet / expo) ---------- */
.detail-main{ padding:104px 38px 96px; max-width:1480px !important; margin:0 auto !important; width:100% !important; }
.detail-grid{ display:grid !important; grid-template-columns:minmax(320px,40%) 1fr !important; gap:64px; align-items:start; }
.detail-sticky{ position:sticky; top:104px; align-self:start; padding-right:10px; }
.detail-back{ display:inline-block; font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted) !important; margin-bottom:34px; transition:color .2s ease; }
.detail-back:hover{ color:var(--ink) !important; }
.detail-title{ font-family:var(--serif); font-weight:300; font-size:clamp(40px,5vw,76px); line-height:.98; margin:0; max-width:14ch; color:var(--green-deep) !important; }
.detail-tags{ display:flex !important; gap:14px; flex-wrap:wrap; font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) !important; margin:30px 0 0; }
.detail-tags *{ color:var(--muted) !important; }
.detail-tags .yr{ color:var(--ink) !important; }
.detail-site-link{ display:inline-block; margin:26px 0 0; font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; line-height:1; color:#F3EFE6 !important; background:var(--green-deep); border:1px solid var(--green-deep); border-radius:999px; padding:10px 18px; transition:background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.detail-site-link:hover{ background:var(--green); border-color:var(--green); transform:translateY(-2px); box-shadow:0 8px 18px rgba(43,64,41,.22); }
.detail-desc{ font-size:18px; line-height:1.72; color:#352F26 !important; max-width:42ch; margin:30px 0 0; }
.detail-desc *{ color:#352F26 !important; }
.detail-scroll-hint{ display:flex; align-items:center; gap:12px; margin:40px 0 0; font-family:var(--sans); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.detail-scroll-hint .bar{ display:block; width:42px; height:1px; background:#C9C1B0; }
/* Staggered mosaic: two columns of unequal width, photos keep their own proportions. */
.detail-images{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); column-gap:22px; align-items:start; }
.detail-col{ display:flex; flex-direction:column; gap:22px; min-width:0; }
.detail-col-1{ margin-top:clamp(70px,9vw,150px); }
.detail-images figure{ position:relative; margin:0; }
.detail-images figure img{ display:block; width:100%; height:auto; }
.detail-images .img-placeholder{ aspect-ratio:4/5; width:100%; }
.detail-images > .e-con-inner{ display:contents !important; }
.detail-images > .e-con-inner > .img-placeholder{ aspect-ratio:4/5 !important; break-inside:avoid; margin:0 0 20px; display:block !important; width:100% !important; min-width:0 !important; }
.detail-navbar{
  position:fixed; bottom:0; left:0; right:0; z-index:50; display:flex; align-items:flex-end; justify-content:space-between; gap:30px;
  padding:48px 38px 22px; pointer-events:none; background:linear-gradient(to top, var(--bg) 46%, rgba(243,239,230,0));
}
.detail-navbar a{ pointer-events:auto; max-width:44%; transition:opacity .2s ease; }
.detail-navbar a:hover{ opacity:.6; }
.detail-navbar .right{ text-align:right; }
.detail-navbar .lbl{ font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.detail-navbar .ttl{ font-family:var(--serif); font-size:clamp(18px,2.4vw,26px); line-height:1.05; }

/* ---------- Expositions (accordion) ---------- */
/* Same stale Elementor Loop Grid CSS cache issue as .proj-list — the
   widget's own "columns" setting is 1 but the cached per-page CSS still
   ships a 2-column grid-template-columns. */
.expo-list{ padding:30px 0 110px; }
.expo-list .elementor-loop-container.elementor-grid{ grid-template-columns:1fr !important; }
.expo-item{ border-bottom:1px solid var(--line); }
.expo-row{
  display:grid !important; grid-template-columns:120px minmax(0,1fr) auto 22px !important; grid-template-rows:auto !important; column-gap:30px; row-gap:0; align-items:center; padding:32px 26px; margin:0 -26px;
  transition:background-color .25s ease, padding-left .25s ease; cursor:pointer; border:none; background:none; width:calc(100% + 52px); text-align:left;
}
.expo-row:hover{ background-color:transparent; }
.expo-row:hover .ttl .elementor-heading-title{ color:var(--accent) !important; }
.expo-row .yr{ font-family:var(--sans); font-size:13px; color:var(--muted); grid-column:1; grid-row:1; }
.expo-row > .e-con-inner{ display:contents !important; }
.expo-row > .e-con-inner > .e-con{ display:block !important; width:100% !important; min-width:0 !important; grid-column:1; grid-row:2 / span 2; }
.expo-row > .e-con-inner > .e-con, .expo-row > .e-con-inner > .e-con > .e-con-inner{ align-items:flex-start !important; justify-content:flex-start !important; text-align:left !important; padding:0 !important; }
.expo-row > .e-con{ grid-column:2 !important; grid-row:1 !important; width:100% !important; min-width:0 !important; align-items:flex-start !important; justify-content:flex-start !important; padding:0 !important; }
.expo-row .ttl, .expo-row .venue{ width:auto !important; align-self:flex-start !important; }
.expo-row .ttl .elementor-heading-title{ font-family:var(--serif) !important; font-weight:400 !important; font-size:clamp(26px,3.4vw,42px) !important; line-height:1.05 !important; text-align:left !important; color:var(--ink); transition:color .25s ease; }
.expo-row .venue .e-con-inner{ display:flex !important; flex-direction:row !important; flex-wrap:wrap; gap:0 6px; padding:0 !important; justify-content:flex-start !important; }
.expo-row .venue .elementor-heading-title{ font-family:var(--body) !important; font-style:italic !important; font-weight:400 !important; font-size:17px !important; color:var(--muted2) !important; text-align:left !important; }
.expo-row .venue .elementor-widget:first-child .elementor-heading-title::after{ content:","; }
.expo-row .expo-tag{ width:auto !important; align-self:center !important; margin:0 0 0 10px !important; }
@media (max-width:700px){
  .expo-list .expo-row{ grid-template-columns:minmax(0,1fr) auto 22px !important; column-gap:14px; row-gap:8px; }
  .expo-list .expo-row .yr{ grid-column:1 !important; grid-row:1 !important; }
  .expo-list .expo-row > .e-con{ grid-column:1 / -1 !important; grid-row:2 !important; }
  .expo-list .expo-row .status{ grid-column:2 !important; grid-row:1 !important; }
  .expo-list .expo-row::after{ grid-column:3 !important; grid-row:1 !important; }
  .expo-list .expo-row .ttl, .expo-list .expo-row .ttl .elementor-widget-container{ text-align:left !important; width:100% !important; }
  .expo-list .expo-row .expo-tag{ margin:8px 0 0 0 !important; align-self:flex-start !important; }
  .expo-list .expo-row .venue{ width:100% !important; }
  .expo-list .expo-item .expo-panel, .expo-list .expo-item.is-open .expo-panel{ grid-template-columns:minmax(0,1fr) !important; column-gap:0 !important; row-gap:22px !important; }
}
.expo-row .expo-tag .elementor-heading-title{ display:inline-block; font-family:var(--sans) !important; font-size:10px !important; font-weight:600 !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--green-deep) !important; background:var(--green-soft); border:1px solid rgba(60,90,58,.35); border-radius:999px; padding:5px 11px; line-height:1 !important; font-style:normal !important; }
.expo-row::after{ content:""; grid-column:4; grid-row:1; width:22px; height:22px; flex:none; transition:transform .3s ease;
  background:linear-gradient(var(--ink),var(--ink)) center/22px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) center/1px 22px no-repeat; }
.expo-item.is-open .expo-row::after{ transform:rotate(45deg); }
.expo-row .ttl{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.4vw,42px); line-height:1.05; text-align:left; grid-column:1; grid-row:2; }
.expo-row .venue{ font-family:var(--body); font-style:italic; font-size:17px; color:var(--muted2); margin-top:4px; text-align:left; grid-column:1; grid-row:3; }
.expo-row .status{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; grid-column:3; grid-row:1; text-align:right; white-space:nowrap; margin-top:0; }
.expo-row .status.future .elementor-heading-title{ color:var(--accent) !important; }
.expo-row > .yr, .expo-row > .status, .expo-row > .e-con, .expo-row::after{ align-self:center !important; }
.expo-row .venue{ padding:0 !important; margin-top:6px; }
.expo-row .venue .e-con-inner{ align-items:center !important; }
.expo-row .status.future{ color:var(--accent); }
.expo-row .status.passee{ color:var(--muted); }
.expo-row .chevron{ grid-column:3; grid-row:2; width:22px; height:22px; position:relative; flex:none; transition:transform .3s ease; }
.expo-row .chevron span{ position:absolute; background:var(--ink); }
.expo-row .chevron span:nth-child(1){ top:50%; left:0; width:22px; height:1px; }
.expo-row .chevron span:nth-child(2){ top:0; left:50%; width:1px; height:22px; }
.expo-item.is-open .chevron{ transform:rotate(45deg); }
.expo-item.is-closing .expo-row::after, .expo-item.is-closing .chevron{ transform:none; }
.expo-item.is-closing .expo-row .ttl .elementor-heading-title{ color:var(--ink) !important; }
.expo-panel{ display:none !important; grid-template-columns:minmax(0,clamp(420px,48%,680px)) minmax(0,1fr) !important; gap:44px; padding:0 0 48px; align-items:start; }
.expo-item.is-open .expo-panel{ display:grid !important; column-gap:48px !important; row-gap:24px !important; }
.expo-panel > .e-con-inner{ display:contents !important; }
.expo-panel > .e-con-inner > .e-con{ display:block !important; width:100% !important; min-width:0 !important; }
/* Last exposition: no separator line below it. */
.elementor-loop-container > .e-loop-item:last-child .expo-item{ border-bottom-width:0 !important; }
/* Landscape frame so the whole photo is visible (never cropped). */
.expo-panel .thumb{ aspect-ratio:3/2 !important; height:auto !important; background-size:contain !important; background-repeat:no-repeat !important; background-position:left top !important; background-color:transparent !important; }
.expo-panel .thumb.img-placeholder::before{ display:none; }
.expo-panel .caption{ font-family:var(--body); font-style:italic; font-size:15px; color:var(--muted2); margin-top:14px; }
.expo-panel p{ font-size:17px; line-height:1.72; color:#352F26; max-width:52ch; margin:6px 0 0; }

/* ---------- Galerie ---------- */
.page-gallery .page-wrap{ max-width:1320px; padding-bottom:100px; }
.page-gallery .wp-block-gallery{ margin-top:60px; display:grid !important; grid-template-columns:repeat(3,1fr); gap:36px 28px; }
.page-gallery .wp-block-gallery > .wp-block-image{ margin:0; width:auto !important; }
.page-gallery .wp-block-gallery img{ aspect-ratio:4/5; width:100%; object-fit:cover; transition:box-shadow .3s ease, transform .3s ease; }
.page-gallery .wp-block-gallery .wp-block-image:hover img{ box-shadow:0 20px 40px rgba(33,30,24,.18); transform:translateY(-4px); }
.page-gallery .wp-block-gallery figcaption{ font-family:var(--sans); font-size:11px; letter-spacing:.06em; color:var(--muted); margin-top:10px; }

/* ---------- About tabs: initial hidden state for inactive panels
   (JS then drives visibility via inline style once a tab is clicked) ---------- */
.about-tab-hidden.about-tab-hidden{ display:none; }

/* Elementor editor only: show every About tab-panel (Démarche/CV/Dossier
   de presse) at once so they can be clicked into and edited directly,
   instead of only ever showing whichever panel is active by default.
   Front-end visitors are unaffected — still one panel at a time. */
body.elementor-editor-active .about-tab-hidden.about-tab-hidden{ display:flex !important; }

/* ---------- Galerie (Loop Grid) ---------- */
.gallery-grid{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:36px 28px; padding:60px 0 100px; }
.gallery-card .photo{ aspect-ratio:4/5 !important; transition:box-shadow .3s ease, transform .3s ease; }
.gallery-card:hover .photo{ box-shadow:0 20px 40px rgba(33,30,24,.18); transform:translateY(-4px); }
.gallery-card .legend{ font-family:var(--sans); font-size:11px; letter-spacing:.06em; color:var(--muted) !important; margin-top:10px; }
@media (max-width: 900px){ .gallery-grid{ grid-template-columns:repeat(2,1fr) !important; gap:28px 16px; } }
@media (max-width: 480px){ .gallery-grid{ grid-template-columns:1fr !important; } }

/* ---------- Contact ---------- */
.contact-intro{ font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(24px,3vw,32px); line-height:1.25; max-width:34ch; margin:0 0 40px; }
.wpcf7-form p{ margin:0 0 16px; }
.wpcf7-form label{ display:flex; flex-direction:column; gap:7px; font-family:var(--sans); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form textarea{
  font-family:var(--body); font-size:17px; color:var(--ink); background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:9px 2px; outline:none; width:100%;
}
.wpcf7-form input[type=submit]{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--bg);
  background:var(--ink); border:none; border-radius:999px; padding:14px 30px; cursor:pointer;
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wpcf7-form input[type=submit]:hover{ background-color:var(--accent); transform:scale(1.05); box-shadow:0 10px 24px rgba(33,30,24,.28); }
.contact-or{ display:flex; align-items:center; gap:12px; margin-top:30px; padding-top:22px; border-top:1px solid var(--line); font-family:var(--sans); font-size:11px; color:var(--muted); }
.contact-or a{ color:var(--accent); }

/* Contact: form + animated-artwork accent side by side. */
.elementor-element-d08f988{ align-items:flex-start !important; }
.elementor-element-6a03210{ flex:1 1 360px; min-width:280px; }
video.contact-anim{ flex:0 0 260px !important; width:260px !important; max-width:100% !important; height:auto !important; border:1px solid var(--card-line); }
/* ---- Contact page: centred intro, form + illustration side by side ---- */
.contact-intro, p.contact-intro{ text-align:center !important; margin:0 auto 52px !important; max-width:32ch; }
.contact-grid{ display:grid !important; grid-template-columns:minmax(0,480px) minmax(0,380px) !important; gap:80px !important; justify-content:center !important; justify-items:center; align-items:center !important; width:100% !important; max-width:1100px !important; margin:0 auto !important; padding:0 !important; }
.contact-grid > .e-con-inner{ display:contents !important; }
.contact-grid .elementor-widget{ width:100% !important; max-width:none !important; }
video.contact-anim{ flex:none !important; width:100% !important; max-width:380px !important; border:0 !important; display:block; margin:0 auto; mix-blend-mode:darken; }
[data-reveal]:has(.contact-anim){ transform:none !important; }
/* /contact/ page: same soft filled fields as the modal */
.contact-grid .wpcf7-form input[type=text], .contact-grid .wpcf7-form input[type=email], .contact-grid .wpcf7-form textarea{ border:0 !important; border-radius:8px; background:rgba(31,42,36,.07) !important; padding:14px 16px !important; font-size:16px; }
.contact-grid .wpcf7-form textarea{ min-height:110px; resize:none; }
.contact-grid .wpcf7-form p{ margin:0 0 18px; }
.contact-grid .wpcf7-form input[type=submit]{ background:var(--green-deep); }
.contact-or{ flex-wrap:wrap; gap:6px 12px; }
@media (max-width:600px){ .contact-grid .wpcf7-form input[type=submit]{ width:100%; } .contact-or{ justify-content:flex-start; } }
.contact-or{ justify-content:center; max-width:1100px; width:100%; margin-left:auto; margin-right:auto; }
@media (max-width:900px){
  .contact-grid{ grid-template-columns:minmax(0,1fr) !important; gap:44px !important; }
  video.contact-anim{ max-width:300px !important; }
}
@media (max-width:700px){ video.contact-anim{ flex-basis:100%; width:100% !important; max-width:320px !important; margin:0 auto; } }
.wpcf7-not-valid-tip{ color:#B3261E; font-size:12px; margin-top:4px; }
.wpcf7-response-output{ font-family:var(--body); font-style:italic; font-size:17px; border:none !important; margin:24px 0 0 !important; padding:0 !important; }

/* ---------- News popup ---------- */
.news-popup{
  position:fixed; bottom:28px; right:28px; z-index:70; width:300px; background:var(--bg); border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(33,30,24,.14); padding:22px 22px 24px;
  opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.news-popup.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.news-popup .close-btn{ position:absolute; top:14px; right:14px; width:18px; height:18px; }
.news-popup .close-btn span{ top:8px; left:0; width:18px; background:var(--muted); }
.news-label{ font-family:var(--sans); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.news-date{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); margin:0 0 8px; }
.news-text{ font-family:var(--serif); font-weight:400; font-style:italic; font-size:21px; line-height:1.28; margin-bottom:16px; max-width:22ch; }
.news-cta{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); transition:gap .2s ease; }
.news-cta:hover{ gap:13px; }

/* ---------- PDF download card (CV / Presse) ---------- */
.pdf-card{ display:flex; align-items:center; gap:24px; padding:34px 0; border-top:1px solid var(--line); max-width:520px; }
.pdf-card .pdf-icon{ width:52px; height:64px; flex:none; border:1px solid var(--card-line); background:var(--card-bg); display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:10px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.pdf-card .pdf-title{ font-family:var(--serif); font-size:22px; margin:0 0 6px; }
.pdf-card .pdf-meta{ font-family:var(--sans); font-size:12px; color:var(--muted); margin:0 0 16px; }

/* ---------- Inline PDF preview (below the download card) ---------- */
.pdf-viewer{ --pdf-viewer-height:760px; margin-top:8px; max-width:820px; border:1px solid var(--card-line); background:var(--card-bg); }
.pdf-viewer iframe{ display:block; width:100%; height:var(--pdf-viewer-height); border:0; }
@media (max-width: 900px){ .pdf-viewer{ --pdf-viewer-height:520px; } }

/* ---------- Fullscreen section overlay (À Propos / Projets nav) ---------- */
body.sfiya-overlay-lock{ overflow:hidden; }
.sfiya-overlay{
  position:fixed; inset:0; z-index:80; background:var(--ov-bg,#1F2A24); color:#EFE9DC;
  display:flex; flex-direction:column; visibility:hidden; pointer-events:none; cursor:auto;
  /* Closed: parked below the screen. Opening slides it up; closing slides it back down. */
  transform:translateY(100%);
  transition:transform .7s cubic-bezier(.65,0,.25,1), visibility 0s linear .7s;
}
.sfiya-overlay.is-open{ transform:translateY(0); visibility:visible; pointer-events:auto; transition:transform .7s cubic-bezier(.22,.8,.2,1), visibility 0s; }
@media (prefers-reduced-motion:reduce){
  .sfiya-overlay{ transform:none; opacity:0; transition:opacity .25s ease, visibility 0s linear .25s; }
  .sfiya-overlay.is-open{ opacity:1; transition:opacity .25s ease, visibility 0s; }
}
.ov-topbar{ display:flex; align-items:center; gap:30px; padding:30px 44px; }
.ov-title{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; }
.ov-rule{ flex:1; max-width:300px; height:1px; background:rgba(239,233,220,.5); }
.ov-spacer{ flex:1; }
.ov-viewall{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#EFE9DC; border:1px solid rgba(239,233,220,.55); border-radius:999px; padding:9px 18px; white-space:nowrap; transition:background-color .2s ease, color .2s ease, transform .2s ease; }
.ov-viewall:hover{ background-color:#EFE9DC; color:#3A332B; transform:scale(1.06); }
.ov-close{ border:none; background:none; cursor:pointer; width:26px; height:26px; position:relative; flex:none; transition:opacity .2s ease; }
.ov-close:hover{ opacity:.6; }
.ov-close span{ position:absolute; top:12px; left:3px; width:20px; height:1.5px; background:#EFE9DC; }
.ov-close span:nth-child(1){ transform:rotate(45deg); }
.ov-close span:nth-child(2){ transform:rotate(-45deg); }
.ov-body{ flex:1; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:56px; align-items:center; padding:10px 44px 150px; max-width:none; margin:0; width:100%; overflow-y:auto; }
.ov-preview{ justify-self:end; max-width:430px; }

.ov-list, .ov-preview{ min-width:0; }
@media (max-width:900px){ .ov-body{ grid-template-columns:minmax(0,1fr) !important; } .ov-preview{ justify-self:stretch; } .ov-preview:has(.ov-preview-box){ display:none; } }
@media (max-width:600px){ .ov-item-titlerow{ flex-wrap:wrap; } .ov-item-title-serif, .ov-item-title-sans{ white-space:normal !important; flex:0 1 auto !important; min-width:0; font-size:clamp(26px,8vw,34px) !important; } }
.ov-list{ display:flex; flex-direction:column; align-items:flex-start; }
/* The row only is as wide as its text, so empty space is neither hoverable nor clickable. */
.ov-item{ display:block; width:fit-content; max-width:100%; padding:0; margin:24px 0; cursor:pointer; transition:transform .25s ease; }
.ov-item:hover, .ov-item.is-hover{ transform:translateX(10px); }
.ov-item-titlerow{ display:flex; align-items:baseline; gap:22px; flex-wrap:nowrap; }
.ov-item-title-sans{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,4.6vw,72px); white-space:nowrap; flex:none; line-height:1.04; letter-spacing:0; color:rgba(239,233,220,.6); padding-bottom:6px; transition:color .3s ease; }
.ov-item.is-hover .ov-item-title-sans{ color:#EFE9DC; }
.ov-item-title-serif{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,4.6vw,72px); line-height:1.04; white-space:nowrap; flex:none; color:rgba(239,233,220,.6); transition:color .3s ease; }
.ov-item.is-hover .ov-item-title-serif{ color:#FBF7EE; }
.ov-badge{ font-family:var(--sans); font-size:clamp(10px,.8vw,13px); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#EFE9DC; background:rgba(239,233,220,.13); border:1px solid rgba(239,233,220,.3); padding:4px 8px; white-space:nowrap; }
.ov-badge.is-on{ color:#3A332B; background:#EFE9DC; border:none; padding:5px 9px; }
.ov-item-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin-top:12px; }
.ov-item-meta .ov-item-sub{ margin-top:0; }
.ov-item-sub{ font-family:var(--sans); font-size:clamp(13px,1vw,17px); letter-spacing:.04em; color:rgba(239,233,220,.74); margin-top:9px; }
.ov-preview-heading{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(26px,3vw,38px); line-height:1.1; margin-bottom:28px; }
.ov-preview-body{ font-family:var(--body); font-size:18px; line-height:1.72; color:#E4DCCD; }
.ov-preview-body p{ margin:0 0 18px; }
.ov-preview-box{ position:relative; width:260px; height:333px; overflow:hidden; }
.ov-preview-tag{ display:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:var(--sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(239,233,220,.5); }
.ov-preview-caption{ position:absolute; left:16px; right:16px; bottom:15px; font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#EFE9DC; }
.ov-preview-box img, .ov-preview-box video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* Decorative sheep in the bottom-left corner of the Projets / Expositions
   menus; black video background disappears with the screen blend. */
.ov-body{ position:relative; z-index:1; }
.ov-sheep{ display:none; position:absolute; left:34px; bottom:70px; width:clamp(230px,28vw,400px); height:auto; mix-blend-mode:screen; pointer-events:none; opacity:0; z-index:0; }
.sfiya-overlay.has-sheep .ov-sheep{ display:block; }
.sfiya-overlay.sheep-right .ov-sheep{ left:auto; right:34px; width:clamp(340px,40vw,600px); }
.sfiya-overlay.sheep-right .ov-preview{ display:none; }
@media (max-width:900px){ .sfiya-overlay.sheep-right .ov-sheep{ right:20px; left:auto; width:clamp(190px,56vw,340px); } }
.sfiya-overlay.is-open .ov-sheep{ animation:ovSheepIn 1s .5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes ovSheepIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:.95; transform:none; } }
.sfiya-overlay.is-open .ov-topbar{ animation:ovFadeDown .5s cubic-bezier(.2,.7,.2,1) backwards; }
.sfiya-overlay.is-open .ov-item{ animation:ovItemIn .65s cubic-bezier(.2,.7,.2,1) backwards; }
.sfiya-overlay.is-open .ov-item:nth-child(1){ animation-delay:.12s; }
.sfiya-overlay.is-open .ov-item:nth-child(2){ animation-delay:.22s; }
.sfiya-overlay.is-open .ov-item:nth-child(3){ animation-delay:.32s; }
.sfiya-overlay.is-open .ov-item:nth-child(4){ animation-delay:.42s; }
.sfiya-overlay.is-open .ov-item:nth-child(n+5){ animation-delay:.52s; }
.sfiya-overlay.is-open .ov-preview-box{ animation:ovBoxIn .55s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes ovItemIn{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
@keyframes ovFadeDown{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:none; } }
@keyframes ovBoxIn{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
@media (max-width:900px){ .ov-sheep{ width:clamp(140px,40vw,230px); left:20px; bottom:64px; } }
@media (prefers-reduced-motion:reduce){ .sfiya-overlay.is-open .ov-item, .sfiya-overlay.is-open .ov-preview-box, .sfiya-overlay.is-open .ov-topbar{ animation:none; } }
.ov-preview-box.has-img{ width:auto; height:auto; display:inline-block; line-height:0; }
.ov-preview-box.has-img img{ position:static; inset:auto; display:block; width:auto; height:auto; max-width:360px; max-height:440px; object-fit:contain; }
.ov-preview-box.has-img .ov-preview-caption{ line-height:1.3; }
/* ---- Contact menu: form on the left, animation on the right (like the sheep) ---- */
.ov-contact{ display:none; }
.sfiya-overlay.is-contact .ov-body{ display:none; }
.sfiya-overlay.is-contact .ov-contact{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,720px) minmax(0,1fr); gap:48px; align-items:center; padding:0 44px 24px; width:100%; overflow-y:auto; }
.sfiya-overlay.is-contact .ov-footer{ display:none; }
.ov-contact-intro{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(26px,2.7vw,40px); line-height:1.25; color:#FBF7EE; margin:0 0 34px; max-width:none; text-wrap:balance; }
.ov-contact-actions{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:flex-start; gap:26px; margin-top:8px; }
.ov-contact-actions > p{ margin:0 !important; }
.ov-contact-direct{ margin:0; padding:0; border:0; }
.ov-contact-or{ display:block; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(239,233,220,.75); margin-bottom:8px; }
.ov-contact-mail{ display:inline-block; font-family:var(--serif); font-weight:400; font-size:clamp(26px,2.5vw,38px); line-height:1.1; color:#FBF7EE; border-bottom:2px solid rgba(251,247,238,.55); padding-bottom:3px; word-break:break-all; transition:border-color .25s ease, transform .25s ease; }
.ov-contact-mail:hover{ border-bottom-color:#FBF7EE; transform:translateX(6px); }
.ov-contact-direct{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.ov-contact-ig{ font-family:var(--serif); font-weight:500; font-size:clamp(20px,1.7vw,26px); line-height:1.1; color:rgba(251,247,238,.85); border-bottom:1px solid rgba(251,247,238,.35); padding-bottom:2px; transition:color .2s ease, border-color .2s ease, transform .25s ease; }
.ov-contact-ig:hover{ color:#FBF7EE; border-bottom-color:#FBF7EE; transform:translateX(6px); }
.contact-or .contact-or-sep{ opacity:.5; }
.ov-contact-art{ display:flex; justify-content:flex-end; align-items:center; min-width:0; min-height:0; }
.ov-contact-video{ width:auto; height:auto; max-width:100%; max-height:min(62vh,560px); mix-blend-mode:screen; pointer-events:none; display:block; }
.ov-contact .wpcf7-form{ display:grid; grid-template-columns:1fr 1fr; column-gap:32px; }
.ov-contact .wpcf7-form > p:nth-of-type(n+3), .ov-contact .wpcf7-form > .wpcf7-response-output{ grid-column:1 / -1; }
.ov-contact .wpcf7-form .hidden-fields-container{ display:none; }
.ov-contact .wpcf7-form p{ margin:0 0 26px; }
.ov-contact .wpcf7-form label{ color:rgba(239,233,220,.78); }
/* Fields: a soft filled background instead of underlines. */
.ov-contact .wpcf7-form input[type=text], .ov-contact .wpcf7-form input[type=email], .ov-contact .wpcf7-form textarea{ color:#FBF7EE; border:0 !important; border-radius:8px; background:rgba(255,255,255,.09) !important; padding:16px 18px !important; transition:background-color .2s ease; }
.ov-contact .wpcf7-form ::placeholder{ color:rgba(239,233,220,.5); opacity:1; }
.ov-contact .wpcf7-form input:focus, .ov-contact .wpcf7-form textarea:focus{ background:rgba(255,255,255,.16) !important; outline:none; }
.ov-contact .wpcf7-form textarea{ min-height:110px; height:124px; resize:none; }
.ov-contact .wpcf7-form label{ gap:10px; }
.ov-contact .wpcf7-form .wpcf7-response-output{ margin:10px 0 0 !important; }
.ov-contact .wpcf7-form input[type=submit]{ background:#EFE9DC; color:#3A332B; }
.ov-contact .wpcf7-form input[type=submit]:hover{ background:#FBF7EE; color:#3A332B; }
.ov-contact .wpcf7-not-valid-tip{ color:#FFD2C9; }
.ov-contact .wpcf7-response-output{ color:#EFE9DC; }
.sfiya-overlay.is-open .ov-contact-form{ animation:ovItemIn .65s .15s cubic-bezier(.2,.7,.2,1) backwards; }
.sfiya-overlay.is-open .ov-contact-art{ animation:ovSheepIn 1s .35s cubic-bezier(.2,.7,.2,1) backwards; }
@media (max-width:900px){
  .sfiya-overlay.is-contact .ov-contact{ grid-template-columns:minmax(0,1fr); gap:24px; padding:6px 24px 36px; align-items:start; }
  .ov-contact-art{ justify-content:center; }
  .ov-contact-video{ max-width:280px; max-height:none; }
}
@media (max-width:600px){
  .ov-contact .wpcf7-form{ grid-template-columns:1fr; }
  /* Phone: a compact, thumb-friendly Contact modal */
  .sfiya-overlay.is-contact .ov-topbar{ padding:16px 20px; }
  .sfiya-overlay.is-contact .ov-contact{ padding:2px 20px 40px; gap:18px; }
  .ov-contact-intro{ font-size:23px; line-height:1.22; margin:0 0 20px; }
  .ov-contact .wpcf7-form p{ margin:0 0 14px; }
  .ov-contact .wpcf7-form label{ gap:7px; font-size:9.5px; }
  .ov-contact .wpcf7-form input[type=text], .ov-contact .wpcf7-form input[type=email], .ov-contact .wpcf7-form textarea{ padding:13px 14px !important; font-size:16px; }
  .ov-contact .wpcf7-form textarea{ min-height:84px; height:92px; }
  .ov-contact-actions{ gap:16px; margin-top:2px; }
  .ov-contact .wpcf7-form input[type=submit]{ width:100%; padding:15px 24px; }
  .ov-contact-actions > p{ width:100%; }
  .ov-contact-mail{ font-size:26px; }
  .ov-contact-ig{ font-size:19px; }
  .ov-contact-art{ justify-content:flex-end; margin-top:6px; }
  .ov-contact-video{ max-width:180px; }
}
/* ---- Projects: serif for titles and clickable links, body font for the text ---- */
.proj-row .proj-title, .proj-row .proj-title .elementor-heading-title, .proj-row .proj-title a{ font-family:var(--serif) !important; font-weight:400 !important; font-size:clamp(34px,4.4vw,60px) !important; line-height:1.02 !important; letter-spacing:0 !important; text-transform:none !important; }
/* One font for all running text (About, exhibitions, projects, contact): change --text in :root. */
:root{ --text:'Roboto',Helvetica,Arial,sans-serif; }
.expo-panel p, .expo-panel .elementor-widget-theme-post-content{ font-family:var(--text) !important; }
.detail-desc, .detail-desc p, .detail-desc li{ font-family:var(--text) !important; font-size:18px; line-height:1.7; color:#352F26; }
.proj-row .elementor-widget-text-editor, .proj-row .elementor-widget-text-editor p{ font-family:var(--text) !important; font-size:18px !important; line-height:1.6 !important; font-weight:400 !important; color:var(--muted2); }
.proj-row .proj-actions .proj-btn a, .proj-row .proj-actions .proj-btn .elementor-button{ font-family:var(--serif) !important; font-size:20px !important; font-weight:600 !important; letter-spacing:.01em !important; text-transform:none !important; }
.detail-back, .detail-site-link{ font-family:var(--serif) !important; font-size:19px !important; font-weight:600 !important; letter-spacing:.01em !important; text-transform:none !important; }
@media (min-width:901px) and (max-height:700px){
  .ov-contact-intro{ margin-bottom:18px; font-size:26px; }
  .ov-contact-mail{ font-size:26px; }
  .ov-contact-or{ margin-bottom:4px; }
  .ov-contact .wpcf7-form p{ margin-bottom:14px; }
  .ov-contact .wpcf7-form textarea{ height:76px; min-height:64px; }
  .ov-contact .wpcf7-form input[type=text], .ov-contact .wpcf7-form input[type=email], .ov-contact .wpcf7-form textarea{ padding:11px 16px !important; }
  .ov-contact-actions{ gap:14px; }
}
.ov-preview-box.has-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 45%); pointer-events:none; }
.ov-preview-caption{ z-index:1; }
.ov-footer{ display:flex; align-items:center; justify-content:flex-end; padding:24px 44px; font-family:var(--sans); font-size:11px; letter-spacing:.12em; color:rgba(239,233,220,.72); border-top:1px solid rgba(239,233,220,.2); }
@media (max-width:900px){
  .ov-body{ grid-template-columns:1fr; padding:10px 24px 40px; gap:30px; }
  .ov-topbar{ padding:22px 24px; flex-wrap:wrap; }
  .ov-rule{ display:none; }
  .ov-preview{ order:-1; }
  .ov-preview-box{ width:100%; max-width:260px; height:320px; }
}

/* ---------- Contact modal ---------- */
.sfiya-contact-modal{
  position:fixed; inset:0; z-index:85; background:rgba(33,30,24,.5); display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease, visibility .3s ease; cursor:auto;
}
.sfiya-contact-modal.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.cm-box{ position:relative; width:100%; max-width:520px; background:var(--bg); padding:44px 40px 40px; }
.cm-close{ position:absolute; top:20px; right:20px; border:none; background:none; cursor:pointer; width:22px; height:22px; transition:opacity .2s ease; }
.cm-close:hover{ opacity:.6; }
.cm-close span{ position:absolute; top:10px; left:0; width:22px; height:1px; background:var(--ink); }
.cm-close span:nth-child(1){ transform:rotate(45deg); }
.cm-close span:nth-child(2){ transform:rotate(-45deg); }
.cm-eyebrow{ font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.cm-lead{ font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(24px,3vw,32px); line-height:1.25; color:var(--ink); margin:14px 0 30px; max-width:34ch; }
.cm-form-slot .wpcf7-form p{ margin:0 0 16px; }
.cm-or{ display:flex; align-items:center; gap:12px; margin-top:30px; padding-top:22px; border-top:1px solid var(--line); font-family:var(--sans); font-size:11px; color:var(--muted); }
.cm-or a{ color:var(--accent); }

/* ---------- Elementor heading/text color inheritance ---------- */
/* Elementor's own compiled per-widget CSS sets an explicit (often blue,
   kit-default) color on .elementor-heading-title / .elementor-button /
   links with !important, which otherwise beats any custom class color
   rule regardless of specificity. Forcing inherit here lets the color
   set on the SFIYA custom class (Advanced > CSS Classes) win instead. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor a,
.elementor-widget-heading a{ color:inherit !important; }

/* ---------- Reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in{ opacity:1; transform:translateY(0); }

/* ---------- Custom cursor ---------- */
#sfiya-cursor{ position:fixed; top:0; left:0; z-index:90; pointer-events:none; opacity:0; will-change:transform; }
#sfiya-cursor .ring{
  display:flex; align-items:center; justify-content:center; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
  background:var(--ink); transition:width .32s cubic-bezier(.2,.7,.2,1), height .32s cubic-bezier(.2,.7,.2,1), margin .32s cubic-bezier(.2,.7,.2,1), background-color .3s ease, opacity .2s ease;
}
#sfiya-cursor .label{ font-family:var(--sans); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--bg); white-space:nowrap; opacity:0; transition:opacity .2s ease; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .header-nav{ display:none; }
  .burger-btn{ display:block; }
  .site-header{ padding:18px 20px; }
  .page-wrap{ padding-left:20px; padding-right:20px; }
  .tabs-row{ gap:20px; margin-top:34px; }
  .about-grid{ grid-template-columns:1fr; gap:36px; }
  .cv-row{ grid-template-columns:1fr; gap:10px; }
  .proj-row{ grid-template-columns:1fr; gap:22px; padding:34px 0; }
  .proj-row:nth-child(2n) .proj-thumb{ order:0; }
  .detail-main{ padding:96px 20px 72px; }
  .detail-grid{ grid-template-columns:minmax(0,1fr) !important; gap:36px; }
  .detail-sticky{ position:static; top:auto; padding-right:0; }
  /* Phones: one column, original photo order kept via --i. */
  .detail-images{ display:flex; flex-direction:column; gap:20px; }
  .detail-col{ display:contents; }
  .detail-images figure{ order:var(--i,0); }
  .detail-navbar{ padding:28px 20px 18px; gap:16px; }
  .expo-row{ grid-template-columns:1fr auto; column-gap:14px; row-gap:8px; padding:28px 16px; margin:0 -16px; width:calc(100% + 32px); }
  .expo-row .yr{ grid-column:1 / -1; order:-1; }
  .expo-panel{ grid-template-columns:1fr; gap:26px; }
  .page-gallery .wp-block-gallery{ grid-template-columns:repeat(2,1fr); gap:28px 16px; }
  .contact-or{ flex-wrap:wrap; }
}

@media (max-width: 480px){
  .site-logo{ font-size:17px; letter-spacing:.24em; }
  .detail-navbar{ flex-direction:column; align-items:flex-start; gap:10px; }
  .detail-navbar > a{ max-width:100%; text-align:left; }
  .page-gallery .wp-block-gallery{ grid-template-columns:1fr; }
  .news-popup{ left:16px; right:16px; bottom:16px; width:auto; }
}