/* ════════════════════════════════════════════════════════════
   GALERIE FRACAS — Feuille de style globale
   Multi-page · Mons · Initiative CRC
   ════════════════════════════════════════════════════════════ */

:root {
  --white:   #FFFFFF;
  --off:     #F8F7F4;
  --light:   #EFEFEB;
  --border:  #E2E0DA;
  --border2: #D0CEC7;
  --muted:   #9A9690;
  --mid:     #6B6760;
  --ink:     #1C1B18;
  --black:   #0D0D0B;

  --green:       #4A9F36;
  --green-dark:  #357228;
  --green-deep:  #224A1B;
  --green-light: #6BBD55;
  --green-pale:  #EBF5E8;
  --green-fog:   rgba(74,159,54,.08);

  --T: cubic-bezier(0.76,0,0.24,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family: 'Instrument Sans', sans-serif;
  background: var(--white);
  color: var(--ink);
  overflow-x: hidden;
  cursor: none;
  min-height: 100vh;
}

/* CURSOR */
#cur { position:fixed; width:7px; height:7px; background:var(--green); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:transform .1s; }
#cur-ring { position:fixed; width:38px; height:38px; border:1.5px solid rgba(74,159,54,.4); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .4s var(--T),height .4s var(--T),border-color .4s; }
body.hovered #cur-ring { width:60px; height:60px; border-color:var(--green); }

/* TRANSITION OVERLAY */
#tov { position:fixed; inset:0; background:var(--green-pale); z-index:8000; transform:scaleY(0); transform-origin:bottom; pointer-events:none; }
#tov.out { animation:tOut .45s var(--T) forwards; }
#tov.in  { animation:tIn  .4s  var(--T) forwards; }
@keyframes tOut { to { transform:scaleY(1); } }
@keyframes tIn  { from{transform:scaleY(1);transform-origin:top} to{transform:scaleY(0);transform-origin:top} }

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:68px; display:flex; align-items:center; justify-content:space-between;
  padding:0 3.5rem;
  background: var(--white);
  border-bottom:1px solid var(--border);
  transition: box-shadow .4s;
}
nav.scrolled { box-shadow:0 2px 24px rgba(28,27,24,.06); }

.logo { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:1rem; font-weight:400; letter-spacing:.3em; text-transform:uppercase; text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:.6rem; cursor:none; }
.logo-mark { width:26px; height:26px; border:1.5px solid var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.logo-mark::before { content:''; width:7px; height:7px; background:var(--green); border-radius:50%; }
.logo span { color:var(--green); font-style:italic; }

.nav-c { position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:3rem; list-style:none; }
.nav-c a { font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .3s; position:relative; padding-bottom:3px; cursor:none; }
.nav-c a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1.5px; background:var(--green); transition:width .4s var(--T); }
.nav-c a:hover, .nav-c a.active { color:var(--ink); }
.nav-c a:hover::after, .nav-c a.active::after { width:100%; }

.nav-r { display:flex; align-items:center; gap:1.5rem; }
.nav-time { font-family:'DM Mono',monospace; font-size:.55rem; letter-spacing:.15em; color:var(--muted); }
.nav-btn { font-family:'DM Mono',monospace; font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; padding:9px 22px; border:1.5px solid var(--green); color:var(--green); background:transparent; text-decoration:none; transition:background .3s,color .3s; cursor:none; display:inline-block; }
.nav-btn:hover { background:var(--green); color:var(--white); }

/* PAGE ENTRANCE ANIMATION */
main, .page-content { animation:pShow .6s var(--T) both; }
@keyframes pShow { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ────── SHARED ────── */
.ey-row { display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.ey-line { width:32px; height:1.5px; background:var(--green); }
.ey-lbl { font-family:'DM Mono',monospace; font-size:.57rem; letter-spacing:.3em; text-transform:uppercase; color:var(--green); }
.s-h2 { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:clamp(1.9rem,3.2vw,2.9rem); font-weight:400; letter-spacing:-.01em; }
.s-h2 em { font-style:italic; color:var(--green); }
.pg-title { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:clamp(2.8rem,5.5vw,6rem); font-weight:400; line-height:.9; letter-spacing:-.02em; }
.pg-title em { font-style:italic; color:var(--green); display:block; }

.btn-green { font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; padding:14px 36px; background:var(--green); color:var(--white); border:none; cursor:none; text-decoration:none; font-weight:500; position:relative; overflow:hidden; transition:background .3s,letter-spacing .4s var(--T); display:inline-block; }
.btn-green::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.12); transform:translateX(-100%); transition:transform .5s var(--T); }
.btn-green:hover::after { transform:translateX(0); }
.btn-green:hover { background:var(--green-dark); letter-spacing:.3em; }

.btn-ghost { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-style:italic; font-size:1rem; color:var(--mid); text-decoration:none; display:flex; align-items:center; gap:.7rem; transition:color .3s,gap .4s var(--T); cursor:none; }
.btn-ghost:hover { color:var(--green); gap:1.2rem; }
.btn-ghost::after { content:'→'; font-style:normal; }

.lk-all { font-family:'DM Mono',monospace; font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mid); text-decoration:none; display:flex; align-items:center; gap:.6rem; transition:color .3s,gap .4s; cursor:none; }
.lk-all:hover { color:var(--green); gap:1rem; }

.reveal { opacity:0; transform:translateY(26px); transition:opacity .75s var(--T),transform .75s var(--T); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ═══════ ACCUEIL ═══════ */
.hero { min-height:100vh; display:grid; grid-template-rows:1fr auto; position:relative; overflow:hidden; background:var(--black); }

.hero-parallax {
  position:absolute; inset:0; z-index:0;
  background-image: url('https://cdn.myportfolio.com/f1858cd8-aaad-4bb9-a29f-1b486927a9b7/207e12e2-3d23-41ee-8fee-9f6cd753f50c_rw_1920.jpg?h=387d09fb62ed4c35d3f642bd662419be');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
}
.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(135deg, rgba(28,27,24,.78) 0%, rgba(28,27,24,.55) 50%, rgba(28,27,24,.72) 100%);
}

/* Subtle green radial glow top-right */
.hero-bg { position:absolute; inset:0; z-index:1; background: radial-gradient(ellipse 45% 60% at 90% 15%, rgba(74,159,54,.12) 0%, transparent 55%), radial-gradient(ellipse 35% 45% at 5% 85%, rgba(74,159,54,.08) 0%, transparent 50%); }

/* Large decorative ring */
.hero-ring { position:absolute; right:-6vw; top:50%; transform:translateY(-50%); width:68vh; height:68vh; border:1px solid rgba(74,159,54,.12); border-radius:50%; animation:spin 50s linear infinite; z-index:2; }
.hero-ring::before { content:''; position:absolute; inset:28px; border:1px solid rgba(74,159,54,.07); border-radius:50%; }
.hero-ring::after  { content:''; position:absolute; inset:76px; border:1px dashed rgba(74,159,54,.05); border-radius:50%; }
@keyframes spin { to { transform:translateY(-50%) rotate(360deg); } }

#hero-c { position:absolute; inset:0; pointer-events:none; z-index:2; }

.hero-content { position:relative; z-index:3; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:0 3.5rem; padding-top:68px; min-height:100vh; max-width:720px; }
.hero-left { padding-top:2rem; width:100%; }

.h-kicker { display:flex; align-items:center; gap:1rem; margin-bottom:2.5rem; opacity:0; animation:fUp .8s .2s var(--T) forwards; }
.h-kicker-line { width:40px; height:1.5px; background:var(--green); }
.h-kicker-t { font-family:'DM Mono',monospace; font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:var(--green-light); }

.hero-title { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:clamp(3.4rem,6vw,6.8rem); font-weight:400; line-height:.92; letter-spacing:-.02em; margin-bottom:2.5rem; opacity:0; animation:fUp .9s .35s var(--T) forwards; color:var(--white); }
.hero-title em { font-style:italic; color:var(--green-light); display:block; }
.hero-title strong { font-weight:700; color:var(--white); }

.hero-desc { font-size:1rem; line-height:1.9; color:rgba(255,255,255,.7); max-width:520px; margin-bottom:3rem; font-weight:300; opacity:0; animation:fUp .8s .5s var(--T) forwards; }

.hero-ctas { display:flex; gap:1.5rem; align-items:center; opacity:0; animation:fUp .8s .65s var(--T) forwards; }

/* Artwork frame — light background version */
.hero-right { position:relative; opacity:0; animation:fLeft .9s .4s var(--T) forwards; }
@keyframes fLeft { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }

.art-frame { position:relative; width:100%; overflow:hidden; background:var(--light); border:1px solid var(--border); }
.art-frame::before { content:''; position:absolute; inset:0; border:1px solid rgba(74,159,54,.15); z-index:2; pointer-events:none; }
.fc { position:absolute; z-index:3; width:22px; height:22px; }
.fc.tl { top:-1px; left:-1px; border-top:2px solid var(--green); border-left:2px solid var(--green); }
.fc.tr { top:-1px; right:-1px; border-top:2px solid var(--green); border-right:2px solid var(--green); }
.fc.bl { bottom:-1px; left:-1px; border-bottom:2px solid var(--green); border-left:2px solid var(--green); }
.fc.br { bottom:-1px; right:-1px; border-bottom:2px solid var(--green); border-right:2px solid var(--green); }
.art-frame svg { width:100%; height:100%; display:block; transition:transform 10s ease; }
.art-frame:hover svg { transform:scale(1.04); }
.art-lbl { position:absolute; bottom:0; left:0; right:0; z-index:4; padding:1.2rem 1.5rem; background:rgba(248,247,244,.92); backdrop-filter:blur(8px); border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.art-lbl-t { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:.95rem; font-style:italic; color:var(--ink); }
.art-lbl-n { font-family:'DM Mono',monospace; font-size:.55rem; letter-spacing:.2em; color:var(--green); }

.hero-strip { position:absolute; right:-2.5rem; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; text-orientation:mixed; display:flex; gap:2rem; align-items:center; }
.strip-t { font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.strip-l { width:1px; height:55px; background:rgba(74,159,54,.2); }

.scroll-ind { position:relative; z-index:3; padding:1.8rem 3.5rem; display:flex; align-items:center; gap:2rem; border-top:1px solid rgba(255,255,255,.1); opacity:0; animation:fUp .8s 1s var(--T) forwards; background:rgba(28,27,24,.4); backdrop-filter:blur(6px); }
.s-line { width:55px; height:1.5px; background:var(--green); position:relative; overflow:hidden; }
.s-line::after { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:rgba(255,255,255,.3); animation:sScan 2.4s ease-in-out infinite; }
@keyframes sScan { 0%{left:-100%} 100%{left:200%} }
.s-lbl { font-family:'DM Mono',monospace; font-size:.55rem; letter-spacing:.25em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.s-cnt { margin-left:auto; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:.85rem; color:rgba(255,255,255,.4); }
.s-cnt span { color:var(--green-light); font-style:italic; }

/* TICKER */
.ticker-bar { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--green-pale); overflow:hidden; padding:11px 0; display:flex; align-items:center; }
.ticker-lbl { font-family:'DM Mono',monospace; font-size:.52rem; letter-spacing:.25em; text-transform:uppercase; color:var(--green-dark); background:var(--green); color:var(--white); padding:0 1.6rem; white-space:nowrap; align-self:stretch; display:flex; align-items:center; flex-shrink:0; margin-right:0; }
.ticker-track { overflow:hidden; flex:1; }
.ticker-inner { display:flex; white-space:nowrap; animation:tickA 26s linear infinite; }
.ticker-item { font-family:'DM Mono',monospace; font-size:.57rem; letter-spacing:.15em; text-transform:uppercase; color:var(--mid); padding:0 3rem; flex-shrink:0; }
.t-sep { color:var(--green); opacity:.5; }
@keyframes tickA { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* FEATURED WORKS */
.home-works { padding:6rem 3.5rem; border-bottom:1px solid var(--border); }
.s-eyebrow { display:flex; align-items:center; justify-content:space-between; margin-bottom:3.5rem; }
.ey-l { display:flex; align-items:center; gap:1.5rem; }

.works-m { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; border:1px solid var(--border); }
.wc { position:relative; overflow:hidden; background:var(--light); cursor:none; aspect-ratio:1/1; }
.wc:nth-child(1) { grid-row:unset; }
.wc svg { width:100%; height:100%; display:block; transition:transform 8s ease; }
.wc img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 8s ease; }
.wc:hover svg, .wc:hover img { transform:scale(1.05); }
.wo { position:absolute; inset:0; background:linear-gradient(to top,rgba(28,27,24,.88) 0%,transparent 55%); display:flex; flex-direction:column; justify-content:flex-end; padding:1.8rem; opacity:0; transition:opacity .4s; }
.wc:hover .wo { opacity:1; }
.w-title { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:1.2rem; font-weight:400; margin-bottom:.3rem; color:var(--white); }
.w-artist { font-family:'DM Mono',monospace; font-size:.54rem; letter-spacing:.15em; text-transform:uppercase; color:var(--green-light); }
.w-disciplines { font-family:'DM Mono',monospace; font-size:.48rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:.55rem; }
.w-slogan { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-style:italic; font-size:.82rem; color:rgba(255,255,255,.75); margin-bottom:.55rem; line-height:1.4; }

/* STATEMENT */
.statement { padding:7rem 3.5rem; display:grid; grid-template-columns:1fr 3fr; gap:5rem; align-items:start; border-bottom:1px solid var(--border); background:var(--off); }
.stmt-lbl-t { font-family:'DM Mono',monospace; font-size:.55rem; letter-spacing:.3em; text-transform:uppercase; color:var(--green); writing-mode:vertical-lr; padding-top:.5rem; }
.stmt-body { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:clamp(1.3rem,1.6vw,1.5rem); font-weight:400; line-height:1.7; color:var(--ink); }
.stmt-body em { font-style:normal; color:var(--green); }
.stmt-body p+p { margin-top:1.2rem; }

/* METRICS */
.metrics { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--border); }
.metric { padding:3.5rem; border-right:1px solid var(--border); position:relative; overflow:hidden; transition:background .3s; }
.metric:hover { background:var(--green-pale); }
.metric::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--T); }
.metric:hover::before { transform:scaleX(1); }
.metric:last-child { border-right:none; }
.m-num { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:4rem; font-weight:400; letter-spacing:-.04em; color:var(--ink); line-height:1; margin-bottom:.5rem; }
.m-num sup { font-size:1.4rem; color:var(--green); font-style:italic; vertical-align:super; }
.m-desc { font-family:'DM Mono',monospace; font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* ═══════ EXPOSITIONS ═══════ */
.expo-hdr { padding:7rem 3.5rem 3.5rem; border-bottom:1px solid var(--border); background:var(--white); }
.expo-hdr-top { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:3rem; }

.expo-tabs { display:flex; gap:.4rem; border-bottom:1px solid var(--border); }
.tab { font-family:'DM Mono',monospace; font-size:.57rem; letter-spacing:.2em; text-transform:uppercase; padding:10px 22px; color:var(--muted); background:transparent; border:none; border-bottom:2px solid transparent; cursor:none; transition:color .3s,border-color .3s; margin-bottom:-1px; }
.tab.active { color:var(--green); border-bottom-color:var(--green); }
.tab:hover { color:var(--ink); }

.expo-spot { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--border); min-height:448px; }
.spot-vis { position:relative; overflow:hidden; background:var(--light); border-right:1px solid var(--border); }
.spot-vis svg { width:100%; height:100%; display:block; transition:transform 8s ease; }
.spot-vis:hover svg { transform:scale(1.04); }
.spot-badge { position:absolute; top:2rem; left:2rem; font-family:'DM Mono',monospace; font-size:.52rem; letter-spacing:.2em; text-transform:uppercase; padding:6px 16px; background:var(--green); color:var(--white); font-weight:500; }
.spot-vig { position:absolute; inset:0; background:linear-gradient(135deg,rgba(248,247,244,.2) 0%,transparent 60%); pointer-events:none; }

.spot-info { padding:3rem; display:flex; flex-direction:column; justify-content:space-between; background:var(--white); }
.spot-dates { display:flex; align-items:center; gap:1rem; margin-bottom:1.8rem; }
.d-from, .d-to { font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.15em; color:var(--green); }
.d-dash { color:var(--muted); }
.spot-artist { font-family:'DM Mono',monospace; font-size:.56rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem; }
.spot-title { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:clamp(1.8rem,3vw,3rem); font-weight:400; line-height:1.05; margin-bottom:2rem; }
.spot-title em { font-style:italic; color:var(--green); }
.spot-text { font-size:.93rem; line-height:1.95; color:var(--mid); margin-bottom:2.5rem; font-weight:300; }
.spot-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.5rem; }
.tag-pill { font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.15em; text-transform:uppercase; padding:5px 14px; border:1.5px solid rgba(74,159,54,.3); color:var(--green-dark); }

.expo-grid { display:flex; flex-direction:column; border-top:1px solid var(--border); }

/* Carte = 2 colonnes : image | texte */
.ec {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--white);
  border-bottom:1px solid var(--border);
  cursor:none;
  transition:background .3s;
}
.ec:hover { background:var(--green-pale); }

/* Rangées paires : texte | image (ordre inversé) */
.ec-link:nth-child(even) .ec-img  { order:2; }
.ec-link:nth-child(even) .ec-body { order:1; border-right:1px solid var(--border); border-left:none; }

.ec-img { overflow:hidden; background:var(--light); border-left:1px solid var(--border); display:flex; align-items:center; justify-content:center; min-height:240px; }
.ec-img img { width:100% !important; height:auto !important; object-fit:initial !important; display:block; transition:transform .7s ease; align-self:stretch; }
.ec-img svg { width:100%; height:auto; display:block; transition:transform .7s ease; }
.ec:hover .ec-img img, .ec:hover .ec-img svg { transform:scale(1.04); }
.ec-body { display:flex; flex-direction:column; justify-content:center; }

.ec-body { padding:2.5rem 3rem; display:flex; flex-direction:column; gap:.5rem; justify-content:center; }
.ec-date { font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; }
.ec-title { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:1.05rem; font-weight:400; line-height:1.2; margin-bottom:.3rem; color:var(--ink); }
.ec-artist { font-size:.82rem; color:var(--mid); font-style:italic; margin-bottom:1rem; }
.sdot { display:inline-flex; align-items:center; gap:6px; font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.15em; text-transform:uppercase; }
.sdot::before { content:''; width:5px; height:5px; border-radius:50%; }
.sdot.curr  { color:var(--green);  } .sdot.curr::before  { background:var(--green); box-shadow:0 0 6px rgba(74,159,54,.5); }
.sdot.up    { color:var(--green-dark); } .sdot.up::before    { background:var(--green-dark); }
.sdot.past  { color:var(--muted);  } .sdot.past::before  { background:var(--muted); }

/* ═══════ BLOG ═══════ */
.blog-hdr { padding:7rem 3.5rem 3.5rem; display:flex; align-items:flex-end; justify-content:space-between; border-bottom:1px solid var(--border); }

.blog-hero-lay { display:block; border-bottom:1px solid var(--border); }

.bhv svg { width:100%; height:100%; display:block; transition:transform 8s ease; }
.bhv:hover svg { transform:scale(1.04); }
.bhv-ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(28,27,24,.9) 0%,rgba(28,27,24,.15) 50%,transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:3rem; }
.b-cat { font-family:'DM Mono',monospace; font-size:.55rem; letter-spacing:.25em; text-transform:uppercase; color:var(--green-light); margin-bottom:1rem; }
.bh-title { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:clamp(1.65rem,3vw,2.6rem); font-weight:400; line-height:1.15; max-width:560px; margin-bottom:1rem; color:var(--white); }
.bh-meta { font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.45); display:flex; gap:1.5rem; }

.bsl { display:flex; flex-direction:column; background:var(--white); }
.bsi { padding:1.4rem 1.8rem; border-bottom:1px solid var(--border); cursor:none; transition:background .3s; flex:1; display:flex; gap:1rem; align-items:center; }
.bsi:hover { background:var(--green-pale); }
.bsi:last-child { border-bottom:none; }
.bsi-cat { font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.2em; text-transform:uppercase; color:var(--green); margin-bottom:.5rem; }
.bsi-t { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:.97rem; font-weight:400; line-height:1.3; color:var(--ink); margin-bottom:.5rem; }
.bsi-m { font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.1em; color:var(--muted); }

.blog-grid { display:flex; gap:1px; background:var(--border); border-top:1px solid var(--border); overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; -ms-overflow-style:none; scrollbar-width:none; }
.blog-grid::-webkit-scrollbar { display:none; }
.bc { background:var(--white); cursor:none; transition:background .3s; }
.bc:hover { background:var(--green-pale); }
.bc-img { height:220px; overflow:hidden; background:var(--light); }
.bc-img svg { width:100%; height:100%; display:block; transition:transform .7s ease; }
.bc:hover .bc-img svg { transform:scale(1.08); }
.bc-body { padding:2rem; }
.bc-cat2 { font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.2em; text-transform:uppercase; color:var(--green); margin-bottom:.7rem; }
.bc-title { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:1.12rem; font-weight:400; line-height:1.25; margin-bottom:.8rem; color:var(--ink); }
.bc-exc { font-size:.86rem; line-height:1.85; color:var(--mid); margin-bottom:1.2rem; font-weight:300; }
.bc-meta2 { font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.1em; color:var(--muted); display:flex; justify-content:space-between; align-items:center; }
.rm { color:var(--green); font-size:.54rem; letter-spacing:.15em; text-transform:uppercase; font-family:'DM Mono',monospace; text-decoration:none; cursor:none; display:flex; align-items:center; gap:.5rem; transition:gap .3s,color .3s; }
.rm:hover { gap:.9rem; color:var(--green-dark); }

/* ═══════ INFOS ═══════ */
.infos-hdr { padding:7rem 3.5rem 3.5rem; border-bottom:1px solid var(--border); }
.infos-lay { display:grid; grid-template-columns:3fr 2fr; border-bottom:1px solid var(--border); }
.infos-main { border-right:1px solid var(--border); }
.info-sec { padding:3rem 3.5rem; border-bottom:1px solid var(--border); }
.info-sec:last-child { border-bottom:none; }
.info-sec-lbl { font-family:'DM Mono',monospace; font-size:.52rem; letter-spacing:.3em; text-transform:uppercase; color:var(--green); margin-bottom:1.5rem; }
.info-sec-t { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:1.7rem; font-weight:400; color:var(--ink); margin-bottom:1.8rem; }

.hours-l { display:flex; flex-direction:column; }
.hr { display:flex; justify-content:space-between; align-items:center; padding:.9rem 0; border-bottom:1px solid var(--border); }
.hr:last-child { border-bottom:none; }
.hr-day { font-size:.93rem; color:var(--mid); font-style:italic; }
.hr-t { font-family:'DM Mono',monospace; font-size:.7rem; letter-spacing:.08em; color:var(--ink); }
.hr-t.cl { color:#C0392B; }

.map-a { height:380px; background:var(--light); position:relative; overflow:hidden; }
.map-a svg { width:100%; height:100%; display:block; }
.map-bar { position:absolute; bottom:0; left:0; right:0; padding:1.2rem 2rem; background:linear-gradient(transparent,rgba(248,247,244,.97)); display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid var(--border); }
.map-addr { font-size:.92rem; color:var(--ink); }
.map-sub { font-family:'DM Mono',monospace; font-size:.52rem; letter-spacing:.1em; color:var(--muted); margin-top:.2rem; }
.dir-lk { font-family:'DM Mono',monospace; font-size:.54rem; letter-spacing:.2em; text-transform:uppercase; color:var(--green); text-decoration:none; cursor:none; }
.dir-lk:hover { color:var(--green-dark); }

.acc-l { display:flex; flex-direction:column; }
.acc-r { display:flex; justify-content:space-between; align-items:center; padding:.85rem 0; border-bottom:1px solid var(--border); }
.acc-r:last-child { border-bottom:none; }
.acc-m { font-size:.92rem; color:var(--mid); }
.acc-i { font-family:'DM Mono',monospace; font-size:.57rem; letter-spacing:.08em; color:var(--muted); text-align:right; }

.infos-sb { background:var(--off); }
.sb-sec { padding:2.5rem; border-bottom:1px solid var(--border); }
.sb-sec:last-child { border-bottom:none; }
.sb-t { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:1.35rem; font-weight:400; color:var(--ink); margin-bottom:1.5rem; }
.ct-l { display:flex; flex-direction:column; gap:1.2rem; }
.ct-r { display:flex; align-items:flex-start; gap:1rem; }
.ct-ico { width:32px; height:32px; border:1.5px solid rgba(74,159,54,.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.7rem; color:var(--green); }
.ct-dl { font-family:'DM Mono',monospace; font-size:.49rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:.2rem; }
.ct-dv { font-size:.87rem; color:var(--mid); }

.nws-d { font-size:.87rem; color:var(--mid); line-height:1.8; margin-bottom:1.5rem; font-weight:300; }
.nf { width:100%; padding:12px 16px; background:var(--white); border:1.5px solid var(--border); color:var(--ink); font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:.92rem; font-style:italic; outline:none; margin-bottom:.8rem; transition:border-color .3s; cursor:none; }
.nf:focus { border-color:var(--green); }
.nf::placeholder { color:var(--muted); }

.pr-r { display:flex; justify-content:space-between; align-items:baseline; padding:.88rem 0; border-bottom:1px solid var(--border); }
.pr-r:last-child { border-bottom:none; }
.pr-l { font-size:.88rem; color:var(--mid); }
.pr-v { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:1.05rem; color:var(--ink); }
.pr-v.free { color:var(--green); font-style:italic; }

/* FOOTER */
footer { border-top:1px solid var(--border); background:var(--ink); color:rgba(255,255,255,.45); }
.ft-top { display:grid; grid-template-columns:2fr 1fr 1fr; gap:4rem; padding:4rem 3.5rem; border-bottom:1px solid rgba(255,255,255,.07); }
.ft-logo { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:.95rem; font-weight:400; letter-spacing:.3em; text-transform:uppercase; display:flex; align-items:center; gap:.6rem; margin-bottom:1.2rem; }
.ft-logo .logo-mark { border-color:var(--green); }
.ft-logo .logo-mark::before { background:var(--green); }
.ft-logo span { color:inherit; font-style:normal; }
.ft-tag { font-size:.86rem; color:rgba(255,255,255,.4); line-height:1.8; font-weight:300; }
.ft-cl { font-family:'DM Mono',monospace; font-size:.52rem; letter-spacing:.3em; text-transform:uppercase; color:var(--green); margin-bottom:1.2rem; }
.ft-ll { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.ft-ll a, .ft-ll li { font-size:.87rem; color:rgba(255,255,255,.45); text-decoration:none; transition:color .3s; cursor:none; line-height:1.6; }
.ft-ll a:hover { color:var(--white); }
.ft-bot { display:flex; justify-content:space-between; align-items:center; padding:1.5rem 3.5rem; }
.ft-copy { font-family:'DM Mono',monospace; font-size:.52rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.28); }
.ft-soc { display:flex; gap:1.5rem; }
.ft-soc a { font-family:'DM Mono',monospace; font-size:.52rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.3); text-decoration:none; transition:color .3s; cursor:none; }
.ft-soc a:hover { color:var(--green-light); }

@keyframes fUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

/* Barre de défilement principale — épaissie pour être facilement cliquable */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--off); }
::-webkit-scrollbar-thumb { background:rgba(74,159,54,.45); border-radius:0; }
::-webkit-scrollbar-thumb:hover { background:rgba(74,159,54,.7); }
/* Firefox */
html { scrollbar-width:auto; scrollbar-color:rgba(74,159,54,.45) var(--off); }

/* ════════════════════════════════════════════════════════════
   AJOUTS — PAGE EXPOSITIONS (nouveau layout)
   ════════════════════════════════════════════════════════════ */

/* Stats en-tête expositions */
.expo-stats { display:flex; gap:2rem; padding-bottom:.5rem; }
.stat { display:flex; flex-direction:column; gap:.3rem; }
.stat-n { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:2rem; font-weight:400; color:var(--green); line-height:1; }
.stat-l { font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.tab-count { display:inline-block; margin-left:.5rem; opacity:.5; }

/* Description dans cartes expo (clamp 4 lignes) */
.ec-desc { font-size:.82rem; color:var(--mid); line-height:1.65; font-weight:300; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* Image spot exposition : naturelle, pas étirée */
.expo-spot { align-items:stretch; }
.expo-spot .spot-vis { overflow:hidden; min-height:448px; display:flex; align-items:center; justify-content:center; background:var(--white); }
.expo-spot .spot-vis img { width:100%; height:100%; object-fit:contain; object-position:center; display:block; }

/* Adapter le header pour les nouveaux contenus */
.expo-hdr-top { flex-wrap:wrap; gap:2rem; }

/* ════════════════════════════════════════════════════════════
   PAGES DÉTAIL EXPOSITIONS (sous-dossier expositions/)
   ════════════════════════════════════════════════════════════ */

/* ── Cartes cliquables sur listing ── */
.ec-link { display:block; text-decoration:none; color:inherit; }
.ec-link .ec { position:relative; }
.ec-link::after { content:'↗'; position:absolute; top:1rem; right:1rem; width:32px; height:32px; border:1px solid var(--green); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'DM Mono',monospace; font-size:.6rem; color:var(--green); background:var(--white); opacity:0; transform:translateY(8px); transition:opacity .4s var(--T),transform .4s var(--T); z-index:5; }
.ec-link:hover::after { opacity:1; transform:translateY(0); }

/* ── Article détail ── */
.expo-detail { padding-top:68px; max-width:1280px; margin:0 auto; animation:pShow .6s var(--T) both; }

.expo-bread { display:flex; justify-content:space-between; align-items:center; padding:2.5rem 3.5rem 1.5rem; }
.expo-bread a { font-family:'DM Mono',monospace; font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mid); text-decoration:none; transition:color .3s,gap .4s var(--T); cursor:none; }
.expo-bread a:hover { color:var(--green); }
.bread-num { font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.2em; color:var(--muted); }

.expo-d-hero { position:relative; margin:0 3.5rem 4rem; background:var(--light); overflow:hidden; border:1px solid var(--border); }
.expo-d-hero img { width:100%; height:auto; display:block; }
.expo-d-badge { position:absolute; top:2rem; left:2rem; font-family:'DM Mono',monospace; font-size:.52rem; letter-spacing:.22em; text-transform:uppercase; padding:6px 16px; color:var(--white); }
.expo-d-badge.curr { background:var(--green); }
.expo-d-badge.up   { background:var(--green-dark); }
.expo-d-badge.past { background:var(--muted); }

.expo-d-head { padding:0 3.5rem 3rem; max-width:780px; margin:0 auto; text-align:left; }
.expo-d-artist { font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--green); margin-bottom:1rem; }
.expo-d-title { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:clamp(2.3rem,4.5vw,4rem); font-weight:400; line-height:1.02; letter-spacing:-.02em; color:var(--ink); margin-bottom:2rem; }

.expo-d-body { padding:0 3.5rem 4rem; max-width:780px; margin:0 auto; }
.expo-d-body p { font-size:1.02rem; line-height:1.95; color:var(--mid); margin-bottom:1.6rem; font-weight:300; }
.expo-d-body p:first-of-type::first-letter { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:3.6rem; font-weight:400; float:left; line-height:.9; padding:.4rem .6rem 0 0; color:var(--green); }
.expo-d-body em, .expo-d-body i { color:var(--ink); }
.expo-d-body strong { color:var(--ink); font-weight:500; }

.expo-d-sources { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border); }
.src-link { display:block; font-family:'DM Mono',monospace; font-size:.56rem; letter-spacing:.12em; text-transform:lowercase; color:var(--green); text-decoration:none; padding:.6rem 0; border-bottom:1px solid var(--border); transition:color .3s,padding .3s; cursor:none; }
.src-link:last-child { border-bottom:none; }
.src-link:hover { color:var(--green-dark); padding-left:.6rem; }

.expo-d-nav { display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:center; padding:2.5rem 3.5rem 5rem; border-top:1px solid var(--border); margin:0 3.5rem; }
.expo-d-nav a { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-style:italic; font-size:.95rem; color:var(--mid); text-decoration:none; transition:color .3s; cursor:none; }
.expo-d-nav .nav-prev { text-align:left; }
.expo-d-nav .nav-next { text-align:right; }
.expo-d-nav .nav-back { font-family:'DM Mono',monospace; font-style:normal; font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; color:var(--green); padding:.7rem 1.5rem; border:1px solid var(--green); white-space:nowrap; }
.expo-d-nav .nav-back:hover { background:var(--green); color:var(--white); }
.expo-d-nav a:not(.nav-back):hover { color:var(--green); }
.nav-disabled { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-style:italic; font-size:.95rem; color:var(--border2); }
.expo-d-nav .nav-prev.nav-disabled { text-align:left; }
.expo-d-nav .nav-next.nav-disabled { text-align:right; }

/* Cursor over disabled */
.nav-disabled:nth-child(1) { text-align:left; }
.nav-disabled:nth-child(3) { text-align:right; }

/* ════════════════════════════════════════════════════════════
   MODALE — FICHE DÉTAIL EXPOSITION
   ════════════════════════════════════════════════════════════ */

#expo-modal { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; }
#expo-modal[hidden] { display:none; }

#modal-backdrop { position:absolute; inset:0; background:rgba(28,27,24,.78); backdrop-filter:blur(6px); cursor:none; }

#modal-panel {
  position:relative; z-index:2001;
  width:min(860px, 94vw); max-height:90vh;
  background:var(--white);
  display:flex; flex-direction:column;
  box-shadow:0 40px 100px rgba(0,0,0,.35);
  animation:modalIn .35s var(--T) both;
}
@keyframes modalIn { from{opacity:0;transform:translateY(24px) scale(.98)} to{opacity:1;transform:none} }

#modal-close {
  position:absolute; top:1.2rem; right:1.2rem; z-index:10;
  width:36px; height:36px; border:1px solid var(--border);
  background:var(--white); color:var(--ink); font-size:1rem;
  cursor:none; transition:background .2s,color .2s;
  display:flex; align-items:center; justify-content:center;
}
#modal-close:hover { background:var(--ink); color:var(--white); }

#modal-scroll { flex:1; overflow-y:auto; overscroll-behavior:contain; }
#modal-scroll::-webkit-scrollbar { width:6px; }
#modal-scroll::-webkit-scrollbar-thumb { background:rgba(74,159,54,.45); }
#modal-scroll::-webkit-scrollbar-thumb:hover { background:rgba(74,159,54,.7); }
#modal-scroll { scrollbar-width:thin; scrollbar-color:rgba(74,159,54,.45) transparent; }

/* Hero */
#modal-hero-wrap { position:relative; background:var(--light); border-bottom:1px solid var(--border); }
#modal-img { width:100%; height:auto; display:block; max-height:550px; object-fit:contain; background:var(--off); }
.modal-badge-curr { position:absolute; top:1.2rem; left:1.2rem; background:var(--green); color:#fff; font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.2em; text-transform:uppercase; padding:5px 14px; }
.modal-badge-up   { position:absolute; top:1.2rem; left:1.2rem; background:var(--green-dark); color:#fff; font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.2em; text-transform:uppercase; padding:5px 14px; }
.modal-badge-past { position:absolute; top:1.2rem; left:1.2rem; background:var(--muted); color:#fff; font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.2em; text-transform:uppercase; padding:5px 14px; }

/* Header */
#modal-body { padding:2.5rem 3rem 2rem; }
#modal-meta { display:flex; align-items:center; gap:1.5rem; margin-bottom:1rem; }
#modal-num-display { font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.2em; color:var(--muted); }
#modal-dates-display { font-family:'DM Mono',monospace; font-size:.52rem; letter-spacing:.18em; text-transform:uppercase; color:var(--green); }
#modal-artist-display { font-family:'DM Mono',monospace; font-size:.58rem; letter-spacing:.25em; text-transform:uppercase; color:var(--mid); margin-bottom:.6rem; }
#modal-title-h { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:clamp(1.6rem,3vw,2.4rem); font-weight:400; line-height:1.1; color:var(--ink); margin-bottom:2rem; }

/* Text body */
#modal-text-body { font-size:.93rem; line-height:1.95; color:var(--mid); font-weight:300; }
#modal-text-body p { margin-bottom:1.4rem; }
#modal-text-body p:last-child { margin-bottom:0; }
#modal-text-body p:first-of-type:not(.no-cap)::first-letter {
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:3.2rem; font-weight:400;
  float:left; line-height:.85; padding:.35rem .55rem 0 0; color:var(--green);
}
/* Lettrine manuelle — quand le 1er paragraphe commence par un guillemet, on cible une lettre précise */
#modal-text-body .dc-letter {
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:3.2rem; font-weight:400;
  float:left; line-height:.85; padding:.35rem .55rem 0 0; color:var(--green);
  font-style:normal;
}

/* Sources */
#modal-sources-wrap { margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.modal-src-lbl { font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.25em; text-transform:uppercase; color:var(--green); margin-bottom:.8rem; }
#modal-sources-body a { display:block; font-family:'DM Mono',monospace; font-size:.52rem; letter-spacing:.1em; color:var(--green); text-decoration:none; padding:.5rem 0; border-bottom:1px solid var(--border); transition:padding-left .25s,color .25s; cursor:none; }
#modal-sources-body a:last-child { border-bottom:none; }
#modal-sources-body a:hover { padding-left:.5rem; color:var(--green-dark); }

/* Nav prev/next */
#modal-nav {
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:1rem; align-items:center;
  padding:1.2rem 2rem; border-top:1px solid var(--border);
  background:var(--off); flex-shrink:0;
}
#modal-nav button {
  font-family:'DM Mono',monospace; font-size:.52rem; letter-spacing:.18em; text-transform:uppercase;
  background:none; border:none; color:var(--mid); cursor:none; padding:.5rem; transition:color .25s;
}
#modal-nav button:hover:not(:disabled) { color:var(--green); }
#modal-nav button:disabled { opacity:.3; }
#modal-prev { text-align:left; }
#modal-next { text-align:right; }
#modal-all {
  border:1px solid rgba(74,159,54,.4); color:var(--green); padding:.6rem 1.2rem; white-space:nowrap;
}
#modal-all:hover { background:var(--green); color:#fff; }

/* Cards hover indicator */
[data-open-expo] { cursor:none; }
[data-open-expo]:hover .ec { background:var(--green-pale); }


/* Message si la grille filtre n'a aucun résultat */
.expo-empty {
  display:none;
  padding:5rem 3.5rem;
  text-align:center;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style:italic;
  font-size:1.2rem;
  color:var(--muted);
  border-bottom:1px solid var(--border);
}
.expo-empty.show { display:block; }


/* ════════════════════════════════════════════════════════════
   CARROUSEL CHRONIQUES — affiche 3 cartes, défile par 1
   ════════════════════════════════════════════════════════════ */

.blog-carousel-wrap {
  position:relative;
  border-top:1px solid var(--border);
}

.blog-carousel-wrap .blog-grid {
  border-top:none;
}

/* Chaque carte = 1/3 de la largeur (3 visibles), elles ne rétrécissent pas */
.blog-carousel-wrap .bc {
  flex:0 0 calc((100% - 2px) / 3);
  min-width:0;
  scroll-snap-align:start;
}

/* Boutons flèches */
.blog-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  background:var(--white);
  border:1px solid var(--border);
  color:var(--ink);
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:1.3rem;
  cursor:none;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .25s, color .25s, opacity .25s;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.blog-arrow:hover:not(:disabled) {
  background:var(--green);
  color:var(--white);
  border-color:var(--green);
}
.blog-arrow:disabled {
  opacity:.3;
  cursor:not-allowed;
}
.blog-prev { left:1rem; }
.blog-next { right:1rem; }

/* Mobile : afficher 1 carte à la fois */
@media (max-width:768px) {
  .blog-carousel-wrap .bc { flex:0 0 100%; }
  .blog-arrow { width:40px; height:40px; }
}


/* ════════════════════════════════════════════════════════════
   BLOG HERO — image réduite (70%) + descriptif à droite (30%)
   ════════════════════════════════════════════════════════════ */

.bhv {
  display:grid;
  grid-template-columns:7fr 3fr;
  background:var(--ink);
  overflow:hidden;
  min-height:285px;
}

.bhv-img-w {
  position:relative;
  overflow:hidden;
  background:var(--light);
}

.bhv-img-w img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 8s ease;
}

.bhv-desc {
  padding:1.8rem 1.8rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:var(--white);
  background:var(--ink);
  gap:.7rem;
}

.bhv-desc-cat {
  font-family:'DM Mono',monospace;
  font-size:.55rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--green-light);
}

.bhv-desc-txt {
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style:italic;
  font-size:.85rem;
  line-height:1.55;
  color:rgba(255,255,255,.82);
  font-weight:400;
}

.bhv-desc-meta {
  display:flex;
  gap:1.5rem;
  font-family:'DM Mono',monospace;
  font-size:.52rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.12);
}

.bhv-desc-cta {
  font-family:'DM Mono',monospace;
  font-size:.55rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--green-light);
  text-decoration:none;
  padding:.8rem 0;
  border-bottom:1px solid rgba(255,255,255,.2);
  transition:padding-left .3s,color .3s;
  align-self:flex-start;
  cursor:none;
}

.bhv-desc-cta:hover {
  padding-left:.5rem;
  color:var(--white);
}

/* L'overlay du titre reste sur l'image */
.bhv-img-w .bhv-ov {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:1.3rem 1.6rem 1.1rem;
  background:linear-gradient(to top, rgba(28,27,24,.92), rgba(28,27,24,0));
  color:var(--white);
}

/* Mobile : pile verticale */
@media (max-width:768px) {
  .bhv { grid-template-columns:1fr; }
  .bhv-desc { padding:1.8rem 1.5rem; }
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Tablette · Mobile · Tactile
   Ajouté pour la compatibilité téléphone & tablette.
   (Surcharge non destructive : les règles desktop restent intactes)
   ════════════════════════════════════════════════════════════ */

/* ── Bouton menu mobile (hamburger) — injecté par script.js ── */
.nav-toggle {
  display: none;                 /* caché sur desktop */
  position: relative; z-index: 10;
  width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid var(--border2);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: none; flex-shrink: 0;
  transition: border-color .3s;
}
.nav-toggle:hover { border-color: var(--green); }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink);
  transition: transform .35s var(--T), opacity .25s; }
#mnav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#mnav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
#mnav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ═══════════ TABLETTE (≤ 1024px) ═══════════ */
@media (max-width: 1024px) {
  nav { padding: 0 2rem; }

  .hero-content,
  .scroll-ind        { padding-left: 2rem; padding-right: 2rem; }
  .home-works,
  .blog-hdr,
  .expo-hdr,
  .infos-hdr         { padding-left: 2rem; padding-right: 2rem; }
  .statement         { gap: 3rem; padding-left: 2rem; padding-right: 2rem; }
  .info-sec          { padding-left: 2rem; padding-right: 2rem; }

  /* Grilles 4 colonnes → 2 colonnes */
  .metrics,
  .works-m           { grid-template-columns: 1fr 1fr; }
  .metric { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 2.6rem; }
  .metric:nth-child(2n) { border-right: none; }

  /* Pied de page : 4 → 2 colonnes */
  .ft-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .ft-top > div:first-child { grid-column: 1 / -1; }

  /* Grilles à 4 colonnes définies en inline (process, etc.) → 2 colonnes */
  [style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }

  /* Hero : anneau décoratif réduit pour éviter le débordement */
  .hero-ring { width: 80vw; height: 80vw; right: -25vw; }
}

/* ═══════════ NAVIGATION MOBILE (≤ 900px) ═══════════ */
@media (max-width: 900px) {
  nav { padding: 0 1.3rem; }

  .nav-toggle { display: flex; }     /* afficher le hamburger */
  .nav-r { display: none; }          /* masquer horloge + bouton (repris dans le menu) */

  /* Le menu central devient un panneau déroulant */
  .nav-c {
    position: absolute; top: 100%; left: 0; right: 0;
    transform: none;
    flex-direction: column; gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 30px rgba(28,27,24,.09);
    padding: .4rem 0;
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .42s var(--T), opacity .3s, padding .42s var(--T);
  }
  #mnav.nav-open .nav-c {
    max-height: 80vh; opacity: 1; pointer-events: auto; padding: .6rem 0;
  }
  .nav-c li { width: 100%; }
  .nav-c a {
    display: block; width: 100%;
    padding: 1.05rem 1.5rem;
    font-size: .72rem; letter-spacing: .22em;
    color: var(--ink); border-bottom: 1px solid var(--light);
  }
  .nav-c li:last-child a { border-bottom: none; }
  .nav-c a::after { display: none; }
  .nav-c a.active { color: var(--green); }
}

/* ═══════════ MOBILE / PETITE TABLETTE (≤ 768px) ═══════════ */
@media (max-width: 768px) {

  /* — Effondrement générique de toute grille multi-colonnes en ligne — */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* — Réduction des grands paddings horizontaux définis en ligne — */
  [style*="padding:4rem 3.5rem"],
  [style*="padding:5rem 3.5rem"],
  [style*="padding:4.5rem 3.5rem"] { padding-left: 1.3rem !important; padding-right: 1.3rem !important; }
  [style*="padding:2.8rem 2.2rem"] { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  [style*="min-height:480px"] { min-height: 300px !important; }
  [style*="align-self:flex-end"] { align-self: stretch !important; text-align: center; }

  /* ── HERO ── */
  .hero { min-height: auto; }
  .hero-content {
    padding: 0 1.3rem; padding-top: 100px; padding-bottom: 2.5rem;
    min-height: auto; max-width: 100%;
  }
  .hero-left { padding-top: 1rem; }
  .h-kicker { margin-bottom: 1.6rem; }
  .h-kicker-t { font-size: .52rem; letter-spacing: .2em; }
  .hero-title { font-size: clamp(2.7rem, 13vw, 4rem); margin-bottom: 1.6rem; }
  .hero-desc { font-size: .95rem; line-height: 1.8; margin-bottom: 2rem; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 1rem; }
  .hero-ctas .btn-green { text-align: center; }
  .hero-ctas .btn-ghost { justify-content: center; }
  .scroll-ind { padding: 1.1rem 1.3rem; gap: .9rem; flex-wrap: wrap; }
  .s-cnt { margin-left: 0; width: 100%; }

  /* ── TICKER ── */
  .ticker-item { padding: 0 1.6rem; font-size: .54rem; }

  /* ── SECTIONS ACCUEIL ── */
  .home-works { padding: 3.2rem 1.3rem; }
  .s-eyebrow { flex-wrap: wrap; gap: 1rem; margin-bottom: 2.2rem; }
  .statement { grid-template-columns: 1fr; gap: 1.4rem; padding: 3.2rem 1.3rem; }
  .stmt-lbl-t { writing-mode: horizontal-tb; padding-top: 0; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric { padding: 1.8rem 1.3rem; }
  .m-num { font-size: 2.7rem; }

  /* ── PIED DE PAGE ── */
  .ft-top { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; padding: 2.8rem 1.3rem; }
  .ft-bot { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.3rem; }
  .ft-soc { flex-wrap: wrap; gap: .9rem 1.3rem; }

  /* ── EXPOSITIONS (listing) ── */
  .expo-hdr { padding: 5.5rem 1.3rem 2rem; }
  .expo-hdr-top { flex-wrap: wrap; gap: 1.5rem; }
  .expo-stats { gap: 1.4rem; flex-wrap: wrap; }
  .stat-n { font-size: 1.6rem; }
  .expo-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .expo-tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex-shrink: 0; padding: 10px 16px; }

  /* Spotlight : 2 colonnes → 1 */
  .expo-spot { grid-template-columns: 1fr; min-height: auto; }
  .expo-spot .spot-vis { min-height: 240px; border-right: none; border-bottom: 1px solid var(--border); }
  .spot-info { padding: 2rem 1.3rem; }
  .spot-badge { top: 1rem; left: 1rem; }

  /* Cartes exposition : image au-dessus, texte dessous (toujours) */
  .ec { grid-template-columns: 1fr; height: auto; }
  .ec-img { height: 210px; border-left: none; border-bottom: 1px solid var(--border); order: 0 !important; }
  .ec-body { padding: 1.7rem 1.3rem; order: 1 !important; }
  .ec-link:nth-child(even) .ec-img { order: 0 !important; }
  .ec-link:nth-child(even) .ec-body { order: 1 !important; border-right: none; border-left: none; }
  .ec-link::after { top: .8rem; right: .8rem; }

  /* ── BLOG ── */
  .blog-hdr { padding: 5.5rem 1.3rem 2rem; flex-wrap: wrap; gap: 1rem; }
  .bhv-ov { padding: 1.4rem 1.3rem; }
  .bc-body { padding: 1.6rem; }

  /* ── INFOS ── */
  .infos-hdr { padding: 5.5rem 1.3rem 2rem; }
  .infos-lay { grid-template-columns: 1fr; }
  .infos-main { border-right: none; }
  .info-sec { padding: 2rem 1.3rem; }
  .info-sec-t { font-size: 1.4rem; }
  .sb-sec { padding: 2rem 1.3rem; }
  .map-a { height: 300px; }

  /* ── FICHE DÉTAIL EXPOSITION ── */
  .expo-bread { padding: 5rem 1.3rem 1rem; flex-wrap: wrap; gap: .6rem; }
  .expo-d-hero { margin: 0 1.3rem 2.2rem; }
  .expo-d-head { padding: 0 1.3rem 1.8rem; }
  .expo-d-body { padding: 0 1.3rem 3rem; }
  .expo-d-body p { font-size: .97rem; }
  .expo-d-nav { grid-template-columns: 1fr; gap: 1.2rem; text-align: center; margin: 0 1.3rem; padding: 2rem 0 3.5rem; }
  .expo-d-nav .nav-prev, .expo-d-nav .nav-next,
  .expo-d-nav .nav-prev.nav-disabled, .expo-d-nav .nav-next.nav-disabled { text-align: center; }
  .expo-d-nav .nav-back { order: -1; justify-self: center; }

  /* ── MODALE ── */
  #modal-body { padding: 1.8rem 1.4rem 1.4rem; }
  #modal-img { max-height: 55vh; }
  #modal-meta { gap: 1rem; flex-wrap: wrap; }
  #modal-nav { padding: 1rem 1.2rem; gap: .6rem; }
  #modal-nav button { padding: .4rem; font-size: .5rem; }

  /* Titres de page un peu plus contenus */
  .pg-title { font-size: clamp(2.6rem, 11vw, 4rem); }
}

/* ═══════════ PETIT MOBILE (≤ 460px) ═══════════ */
@media (max-width: 460px) {
  .logo { font-size: .82rem; letter-spacing: .18em; gap: .45rem; }
  .logo-mark { width: 22px; height: 22px; }

  .hero-title { font-size: clamp(2.3rem, 13.5vw, 3.2rem); }
  .pg-title { font-size: clamp(2.2rem, 12vw, 3.2rem); }
  .s-h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); }

  /* Métriques sur une seule colonne pour respirer */
  .metrics { grid-template-columns: 1fr; }
  .metric { border-right: none !important; }

  .ec-img, .expo-spot .spot-vis { height: 180px; min-height: 180px; }
  .ft-top { grid-template-columns: 1fr; }
  .ft-top > div:first-child { grid-column: auto; }
}

/* ═══════════ ÉCRANS TACTILES — restaurer un vrai curseur ═══════════ */
@media (hover: none), (pointer: coarse) {
  /* Le curseur personnalisé n'a pas de sens sans souris : on le masque */
  #cur, #cur-ring { display: none !important; }

  /* Rétablir le curseur natif (le site force "cursor:none" partout) */
  * { cursor: auto !important; }
  a, button, [role="button"], input, textarea, select,
  .tab, .nav-toggle, .btn-green, .btn-ghost, .nav-btn,
  [data-open-expo], .ec-link, .lk-all, .rm { cursor: pointer !important; }

  /* Sur tactile, les overlays "au survol" sont toujours visibles
     (sinon l'info n'apparaît jamais) */
  .wc .wo { opacity: 1; background: linear-gradient(to top, rgba(28,27,24,.9) 0%, transparent 60%); }
}


/* ════════════════════════════════════════════════════════════
   CORRECTIFS IMAGES — Mobile & Tablette
   ════════════════════════════════════════════════════════════ */

/* (1) HÉRO ACCUEIL — la photo doit remplir tout le héros
   (avant : "100% auto" ne montrait qu'une bande en haut) */
@media (max-width: 1024px) {
  .hero-parallax {
    background-size: cover;
    background-position: center center;
  }
}

@media (max-width: 768px) {

  /* (2) BLOG — les images de chroniques s'affichent en entier
     (avant : conteneur figé à 220px → bande grise sous l'image) */
  .bc-img { height: auto; }
  .bc-img img { height: auto; }
  .bc-img svg { height: auto; }   /* sécurité si une carte utilise un SVG */

  /* (3) INFOS — image recentrée
     (avant : "padding-right:0" en ligne la collait au bord droit) */
  .infos-hdr {
    padding-left: 1.3rem !important;
    padding-right: 1.3rem !important;
    gap: 1.8rem !important;
  }
  .infos-hdr > div:last-child { min-height: 220px; }
}


/* ════════════════════════════════════════════════════════════
   ERGONOMIE — Zones cliquables & liens
   ════════════════════════════════════════════════════════════ */

/* (A) Menu desktop/tablette large : toute la surface de l'item est
   cliquable, pas seulement le texte (zone de clic étendue, invisible).
   Sur mobile (≤900px) le menu déroulant est déjà pleine largeur. */
@media (min-width: 901px) {
  .nav-c li { position: relative; }
  .nav-c a  { position: relative; }
  .nav-c a::before {
    content: '';
    position: absolute;
    top: -24px; bottom: -16px;
    left: -1.5rem; right: -1.5rem;   /* couvre l'espace entre les items */
  }
}

/* (D) Lien téléphone (page Infos) : cliquable mais discret,
   conserve l'identité visuelle du site */
.tel-link { color: inherit; text-decoration: none; cursor: none; transition: color .3s; }
.tel-link:hover { color: var(--green); }

/* (B) Cartes de chroniques cliquables : retour visuel au survol */
.bhv { transition: background .3s; }

/* Curseur pointer sur écrans tactiles pour les éléments rendus
   cliquables par JS (cartes blog, téléphone) */
@media (hover: none), (pointer: coarse) {
  .bc, .bhv, .tel-link { cursor: pointer !important; }
}


/* ════════════════════════════════════════════════════════════
   IMAGES CHRONIQUES = MÊME TAILLE QUE L'IMAGE HÉRO « À LA UNE »
   (héro et cartes calés sur le même format 4:3, recadrage cover)
   ════════════════════════════════════════════════════════════ */

/* Tablette + mobile : cartes de chroniques au format 4:3 */
@media (max-width: 1024px) {
  .bc-img { height: auto; aspect-ratio: 4 / 3; overflow: hidden; }
  .bc-img img,
  .bc-img svg { width: 100%; height: 100% !important; object-fit: cover; display: block; }
}

/* Mobile : l'image héro adopte aussi le 4:3 → cartes et héro identiques
   (les deux occupent toute la largeur, donc exactement la même taille) */
@media (max-width: 768px) {
  .bhv-img-w { aspect-ratio: 4 / 3; }
  .bhv-img-w img { width: 100%; height: 100%; object-fit: cover; }
}


/* ════════════════════════════════════════════════════════════
   ICÔNES RÉSEAUX SOCIAUX DANS LE HEADER
   (remplacent l'ancien bouton « Nous visiter »)
   ════════════════════════════════════════════════════════════ */
.nav-soc {
  display: flex; align-items: center; gap: .8rem;
  list-style: none; padding: 0; margin: 0;
}
.nav-soc a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  color: var(--ink); cursor: none;
  border: 1px solid var(--border2);
  transition: color .3s, border-color .3s, transform .3s;
}
.nav-soc a:hover {
  color: var(--green);
  border-color: var(--green);
}
.nav-soc svg { display: block; }

/* Mobile : icônes plus compactes mais toujours visibles à droite du logo */
@media (max-width: 900px) {
  .nav-r { display: flex !important; align-items: center; gap: .6rem; }
  .nav-time { display: none; }       /* on cache l'horloge sur mobile */
  .nav-soc { gap: .35rem; }
  .nav-soc a { width: 30px; height: 30px; }
  .nav-soc svg { width: 15px; height: 15px; }
}
@media (max-width: 460px) {
  .nav-soc a { width: 28px; height: 28px; }
}

/* ════════════════════════════════════════════════════════════
   ESPACEMENT KICKER ↔ TITRE — Présentation plus compacte
   ════════════════════════════════════════════════════════════ */
.ey-row    { margin-bottom: .75rem; }   /* avant: 1.4rem */
.h-kicker  { margin-bottom: 1.4rem; }   /* avant: 2.5rem */

/* ════════════════════════════════════════════════════════════
   ENCART TRANSLUCIDE DERRIÈRE LE KICKER DE L'ACCUEIL
   « Mons · Rhiz[H]ome #1 · Initiative du CRC »
   ════════════════════════════════════════════════════════════ */
.h-kicker-t {
  background: rgba(28, 27, 24, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: .55rem 1rem;
  border-left: 2px solid var(--green);
  display: inline-block;
}
/* On retire la petite ligne décorative à gauche : remplacée par la bordure verte intégrée à l'encart */
.h-kicker .h-kicker-line { display: none; }


/* ════════════════════════════════════════════════════════════
   UNIFORMISATION TYPOGRAPHIQUE
   Header en noir non-italique + suppression de tous les italiques
   dans les titres, sur toutes les pages
   ════════════════════════════════════════════════════════════ */

/* 1. Logo header : « FRACAS » en noir, sans italique */
.logo span { color: var(--ink); font-style: normal; }

/* 2. Suppression des italiques dans TOUS les titres/em du site
   La couleur verte des <em> est conservée comme accent visuel,
   mais le style italique est supprimé */
.hero-title em,
.pg-title em,
.s-h2 em,
.spot-title em,
.bh-title em,
.stmt-h em,
h1 em, h2 em, h3 em, h4 em,
.hero-desc em,
h1 strong, h2 strong, h3 strong,
.hero-title strong { font-style: normal !important; }

/* Titre spotlight et bloc « à l'affiche » de l'accueil : em non-italique */
[class*="title"] em, [class*="Title"] em { font-style: normal !important; }

/* ════════════════════════════════════════════════════════════
   AUGMENTATION DE LA TAILLE MINIMALE DES TEXTES (desktop)
   ════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  /* Racine légèrement plus grande → tous les rem grimpent proportionnellement */
  html { font-size: 17.5px; }

  /* Bump ciblé des étiquettes mono très petites (les plus difficiles à lire) */
  .ey-lbl,
  .ft-cl,
  .m-lbl,
  .stmt-lbl-t,
  .s-eyebrow .ey-lbl { font-size: .72rem !important; letter-spacing: .2em; }

  /* Descriptifs de cartes d'expositions un peu plus grands */
  .ec-desc { font-size: .95rem !important; line-height: 1.75; }
  .ec-date { font-size: .78rem !important; }
  .ec-artist { font-size: .82rem !important; }

  /* Compteurs des onglets */
  .tab { font-size: .78rem !important; }
  .tab-count { font-size: .68rem !important; }

  /* Étiquettes de tags et badges */
  .spot-badge, .sdot { font-size: .62rem !important; letter-spacing: .2em; }
  .tag-pill { font-size: .68rem !important; }

  /* Ticker sous le héros */
  .ticker-item { font-size: .68rem !important; }

  /* Meta info dans les cartes blog */
  .bc-cat2, .bc-meta2 { font-size: .68rem !important; }
}


/* ════════════════════════════════════════════════════════════
   INTERTITRE « EXPOSITIONS PASSÉES » (page Expositions)
   Séparateur visuel entre le spotlight (En cours) et la grille
   ════════════════════════════════════════════════════════════ */
.expo-section-header {
  padding: 4rem 3.5rem 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.expo-section-header.hidden { display: none; }
.expo-section-header .s-h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: .3rem 0 0; }

/* Adaptation mobile — mêmes marges que les autres blocs */
@media (max-width: 768px) {
  .expo-section-header { padding: 2.5rem 1.3rem 1.4rem; }
}


/* ════════════════════════════════════════════════════════════
   LOGO HÉROS (page d'accueil)
   Remplace l'ancien titre + description
   Le PNG (noir sur fond transparent) est inversé en blanc pour
   se détacher sur le fond sombre du héros
   ════════════════════════════════════════════════════════════ */
.hero-logo {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: 0 0 2.5rem;
  filter: brightness(0) invert(1);   /* transforme le noir en blanc */
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 1024px) {
  .hero-logo { max-width: 400px; margin-bottom: 2rem; }
}

@media (max-width: 768px) {
  .hero-logo { max-width: 300px; margin-bottom: 1.6rem; }
}

@media (max-width: 460px) {
  .hero-logo { max-width: 260px; }
}


/* ════════════════════════════════════════════════════════════
   CTA « EXPOSER » sur la page Expositions
   Bloc invitant les artistes à candidater, placé après la grille
   ════════════════════════════════════════════════════════════ */
.expo-cta {
  padding: 5.5rem 3.5rem;
  background: var(--green-pale);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.expo-cta-inner { max-width: 720px; margin: 0 auto; }
.expo-cta .ey-row { justify-content: center; margin-bottom: 1.4rem; }
.expo-cta-title {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 1.4rem;
}
.expo-cta-title em { font-style: normal !important; color: var(--green); }
.expo-cta-desc {
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  line-height: 1.75;
  color: var(--mid);
  max-width: 580px;
  margin: 0 auto 2.4rem;
}
.expo-cta-btns { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 768px) {
  .expo-cta { padding: 3.5rem 1.3rem; }
}


/* ════════════════════════════════════════════════════════════
   PAGE EXPOSITIONS — Bouton "Comment exposer ?" (en-tête)
   ════════════════════════════════════════════════════════════ */
.expo-hdr-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.8rem;
}
.expo-how-btn {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .85rem 1.4rem;
  border: 1px solid var(--green);
  color: var(--green);
  text-decoration: none;
  transition: background .3s, color .3s;
  white-space: nowrap;
}
.expo-how-btn:hover { background: var(--green); color: var(--white); }

@media (max-width: 768px) {
  .expo-hdr-right { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; width: 100%; }
  .expo-how-btn { font-size: .55rem; padding: .7rem 1rem; }
}

/* ════════════════════════════════════════════════════════════
   PAGINATION (grille expositions — 20 cartes / page)
   ════════════════════════════════════════════════════════════ */
.expo-pagination {
  display: flex;                /* toggled par JS si 1 seule page */
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 2.8rem 3.5rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--off);
}
.page-btn {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .85rem 1.6rem;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--ink);
  cursor: none;
  transition: border-color .3s, color .3s, background .3s, opacity .3s;
}
.page-btn:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.page-btn:disabled { opacity: .3; cursor: not-allowed; }
.page-info {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mid);
}

@media (max-width: 768px) {
  .expo-pagination { padding: 1.8rem 1.3rem; gap: .8rem; flex-wrap: wrap; justify-content: center; }
  .page-btn { padding: .7rem 1.1rem; font-size: .55rem; }
  .page-info { flex-basis: 100%; text-align: center; order: -1; margin-bottom: .3rem; }
}