/* =============================================
   BÉATRICE CASANOVA — Design System
   ============================================= */

/* Graisses réellement utilisées uniquement : Cormorant 400/500 (romain + italique),
   Jost 200/400/500/600. Le 600 de Jost sert aux mots en gras dans les paragraphes. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Jost:wght@200;400;500;600&display=swap');

/* === TOKENS === */
:root {
  --cream:      #F4F1EB;
  --cream-dark: #EDE9E0;
  --charcoal:   #1C1A17;
  --bronze:     #B8926A;
  --bronze-dark:#9A7452;
  --text:       #2C2A26;
  --text-light: #7A776F;
  --border:     #DDD9D0;
  --white:      #FFFFFF;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', system-ui, sans-serif;

  --nav-h: 60px;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  /* Regular plutôt que Light : le texte courant gagne nettement en lisibilité */
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--nav-h);
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-body); }

/* =============================================
   NAVIGATION
   ============================================= */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

.nav.scrolled { border-color: var(--border); }

.nav-logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active { color: var(--bronze); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--charcoal);
  transition: all 0.3s;
}

/* Burger ouvert → croix */
.nav-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =============================================
   BOUTONS
   ============================================= */

.btn {
  display: inline-block;
  padding: 12px 28px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all 0.25s;
  border: none;
}

.btn-dark {
  background: var(--charcoal);
  color: var(--cream);
}
.btn-dark:hover { background: #333; }

.btn-outline {
  background: transparent;
  color: var(--charcoal);
  border: 1px solid var(--charcoal);
}
.btn-outline:hover {
  background: var(--charcoal);
  color: var(--cream);
}

/* =============================================
   ÉLÉMENTS PARTAGÉS
   ============================================= */

.eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-light);
  display: block;
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.1vw, 44px);
  font-weight: 400;
  line-height: 1.15;
}
.section-title em {
  font-style: italic;
  color: var(--bronze);
}

/* =============================================
   STATS BAR
   ============================================= */

.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 20px 20px;
  background: var(--cream-dark);
}

.stat-item {
  padding: 36px 24px;
  text-align: center;
  background: var(--cream);
  border: 1px solid var(--border);
}

.stat-number {
  font-family: var(--font-display);
  font-size: 39px;
  font-weight: 400;
  letter-spacing: 0.02em;
  display: block;
}
.stat-label {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 6px;
  display: block;
}

/* =============================================
   CITATION
   ============================================= */

.quote-section {
  padding: 80px 48px;
  text-align: center;
  background: var(--cream);
}

.quote-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 3.1vw, 30px);
  font-weight: 400;
  line-height: 1.5;
  max-width: 680px;
  margin: 0 auto 20px;
  color: var(--text);
}

.quote-author {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* =============================================
   FOOTER
   ============================================= */

.footer {
  background: var(--charcoal);
  color: var(--cream);
  padding: 40px 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 400;
}

.footer-links {
  display: flex;
  gap: 32px;
  list-style: none;
  justify-content: center;
}

.footer-links a {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,241,235,0.6);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--cream); }

.footer-copy {
  font-size: 12.5px;
  color: rgba(244,241,235,0.5);
  text-align: right;
  letter-spacing: 0.04em;
}

/* =============================================
   PAGE : ACCUEIL (index.html)
   ============================================= */

.hero {
  margin-top: calc(-1 * var(--nav-h));
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.hero-image {
  position: relative;
  overflow: hidden;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-content {
  padding: 64px 60px 64px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-surtitle {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 20px;
}

.hero-name {
  font-family: var(--font-display);
  font-size: clamp(42px, 5.1vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.hero-name em {
  font-style: italic;
  color: var(--bronze);
}

.hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2.1vw, 22px);
  font-weight: 400;
  color: var(--bronze);
  margin-bottom: 32px;
}

.hero-text {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 16px;
}
.hero-text strong { font-weight: 600; }

.hero-ctas {
  display: flex;
  gap: 12px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* --- Slider hero (accueil) --- */
.hero-slider { position: relative; overflow: hidden; }

.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.1s ease, visibility 0s;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cartouche titre de l'œuvre */
.hero-slide-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* Réserve à droite la place réellement occupée par les puces
     (5 × 26px + 4 × 8px d'écart + 28px de marge = 190px), plus une marge. */
  padding: 64px 210px 24px 28px;
  background: linear-gradient(to top, rgba(28,26,23,0.85) 0%, rgba(28,26,23,0.45) 45%, transparent 100%);
  pointer-events: none;
}

.hsc-title {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--cream);
  line-height: 1.2;
}

.hsc-meta {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,241,235,0.72);
  margin-top: 5px;
}

/* Flèches */
.hero-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28,26,23,0.32);
  border: none;
  color: var(--cream);
  font-size: 18.5px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.3s, background 0.25s;
}

.hero-slider:hover .hero-slider-arrow,
.hero-slider-arrow:focus-visible { opacity: 1; }
.hero-slider-arrow:hover { background: rgba(28,26,23,0.6); }

.hero-slider-prev { left: 16px; }
.hero-slider-next { right: 16px; }

/* Puces */
.hero-slider-dots {
  position: absolute;
  right: 28px;
  bottom: 30px;
  z-index: 3;
  display: flex;
  gap: 8px;
}

.hero-slider-dots button {
  width: 26px;
  height: 2px;
  padding: 0;
  border: none;
  background: rgba(244,241,235,0.45);
  transition: background 0.3s;
}

.hero-slider-dots button:hover { background: rgba(244,241,235,0.8); }
.hero-slider-dots button.is-active { background: var(--bronze); }

/* Zone de clic confortable autour des puces */
.hero-slider-dots button::before {
  content: '';
  position: absolute;
  top: -12px; bottom: -12px;
  left: 0; right: 0;
}
.hero-slider-dots button { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity 0.01ms; }
}

/* Dernière expo (accueil) */
.last-expo {
  padding: 80px 48px;
  background: var(--cream);
}

.last-expo-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.last-expo-header {
  margin-bottom: 48px;
}

.last-expo-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 80px;
  align-items: center;
}

.expo-poster img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.expo-caption {
  padding: 20px 0 0;
}
.expo-caption .expo-title-bold {
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.expo-caption p {
  font-size: 12.5px;
  color: var(--text-light);
  letter-spacing: 0.04em;
  margin-top: 4px;
  line-height: 1.5;
}
.expo-caption .expo-venue {
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 500;
  margin-top: 8px;
  color: var(--text);
}

.expo-info .expo-date {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 28px);
  color: var(--bronze);
  margin-bottom: 12px;
}

.expo-info .expo-desc {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 28px;
  max-width: 480px;
}

/* Séries (accueil) */
.series-section {
  padding: 80px 0;
  background: var(--cream-dark);
}

.series-section .section-header {
  margin-bottom: 48px;
  padding: 0 48px;
}

.series-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1920px;
  margin: 0 auto 48px;
}

.serie-card { cursor: pointer; }

.serie-card-img {
  overflow: hidden;
  aspect-ratio: 0.7;
}

.serie-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.serie-card:hover .serie-card-img img {
  transform: scale(1.04);
}

.serie-card-label {
  margin-top: 8px;
  padding: 0 12px 16px;
}

.serie-card-label .serie-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17.5px;
  font-weight: 400;
  color: var(--text);
}

.serie-card-label .serie-medium {
  font-size: 13.5px;
  color: var(--text-light);
  margin-top: 2px;
}

.series-cta {
  text-align: center;
  margin-top: 48px;
  padding: 0 48px;
}

/* =============================================
   PAGE : À PROPOS (a-propos.html)
   ============================================= */

.apropos-hero {
  margin-top: calc(-1 * var(--nav-h));
  display: grid;
  grid-template-columns: 55% 1fr;
  min-height: 100vh;
}

.apropos-hero-img {
  overflow: hidden;
}
.apropos-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.apropos-hero-content {
  padding: 72px 64px 72px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}

.apropos-hero-content .eyebrow { margin-bottom: 16px; }

.apropos-name {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.1vw, 58px);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 16px;
}
.apropos-name em {
  font-style: italic;
  color: var(--bronze);
}

.apropos-body {
  font-size: 15px;
  line-height: 1.78;
  color: var(--text);
  margin-bottom: 14px;
}
.apropos-body strong { font-weight: 600; }

.apropos-ctas {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* =============================================
   PAGE : EXPOSITIONS (expositions.html)
   ============================================= */

.expo-page-header {
  padding: 56px 48px 48px;
  background: var(--cream-dark);
  border-bottom: 1px solid var(--border);
}

.expo-feature {
  padding: 64px 48px;
  background: var(--cream);
}

.expo-feature-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 80px;
  align-items: center;
}

.expo-poster-img { overflow: hidden; }
.expo-poster-img img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.expo-poster-caption { padding: 16px 0 0; }
.expo-poster-caption .bold-title {
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.expo-poster-caption p {
  font-size: 12.5px;
  color: var(--text-light);
  line-height: 1.55;
  margin-top: 4px;
}
.expo-poster-caption .venue {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 500;
  color: var(--text);
  margin-top: 6px;
}

.expo-feature-info .expo-sub {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 12px;
}
.expo-feature-info h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.1vw, 50px);
  font-weight: 400;
  margin-bottom: 8px;
}
.expo-feature-info .date {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  color: var(--bronze);
  margin-bottom: 20px;
}
.expo-feature-info p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text);
  max-width: 440px;
  margin-bottom: 28px;
}

/* --- Vidéo de l'exposition --- */
.expo-video {
  padding: 72px 48px;
  background: var(--cream-dark);
  border-top: 1px solid var(--border);
}

.expo-video-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Les films sont présentés en paire, de même largeur */
.expo-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.expo-video-item { margin: 0; }

/* En dessous de cette largeur, deux films côte à côte deviendraient trop
   petits : on les empile pour qu'ils occupent toute la largeur. */
@media (max-width: 1100px) {
  .expo-video-grid { grid-template-columns: 1fr; gap: 30px; }
}

.expo-video-header {
  margin-bottom: 36px;
}

.expo-video-header p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text);
  max-width: 560px;
  margin-top: 18px;
}

/* Cadre sombre : la vidéo garde ses proportions, jamais recadrée */
.expo-video-player {
  background: var(--charcoal);
  line-height: 0;
}

.expo-video-player video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--charcoal);
}

.expo-video-fallback {
  padding: 32px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(244,241,235,0.75);
}
.expo-video-fallback a {
  color: var(--bronze);
  text-decoration: underline;
}

.expo-video-legende {
  margin-top: 14px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--text-light);
}

.expo-video-legende .evl-titre {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18.5px;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 2px;
}

.past-expos {
  padding: 64px 48px 80px;
  background: var(--cream-dark);
}

.past-expos-inner {
  max-width: 700px;
  margin: 0 auto;
}

.past-expos h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.1vw, 42px);
  font-weight: 400;
  margin-bottom: 48px;
}
.past-expos h2 em {
  font-style: italic;
  color: var(--bronze);
}

.year-group { margin-bottom: 32px; }

.year-label {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--text-light);
  padding: 6px 12px;
  border-left: 2px solid var(--bronze);
  margin-bottom: 16px;
  display: inline-block;
}

.expo-entry {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.expo-entry:first-of-type { border-top: 1px solid var(--border); }

.expo-entry-name {
  font-size: 15.5px;
  color: var(--text);
  margin-bottom: 6px;
}

.expo-tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--text-light);
}

/* =============================================
   PAGE : OEUVRES (oeuvres.html)
   ============================================= */

.oeuvres-header {
  padding: 56px 48px 48px;
  background: var(--cream-dark);
  border-bottom: 1px solid var(--border);
}

.oeuvres-header h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.1vw, 46px);
  font-weight: 400;
  margin-bottom: 20px;
}

.oeuvres-header p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text);
  max-width: 760px;
  margin-bottom: 12px;
}

.oeuvres-section {
  padding: 64px 0 80px;
  background: var(--cream);
}

.oeuvres-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1920px;
  margin: 0 auto;
}

.oeuvre-card {
  display: block;
  cursor: pointer;
}

.oeuvre-card-img {
  overflow: hidden;
  background: var(--cream-dark);
}

.oeuvre-card-img img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}

.oeuvre-card:hover .oeuvre-card-img img {
  transform: scale(1.05);
}

.oeuvre-card-info {
  padding: 8px 12px 16px;
}

.oeuvre-card-info .serie-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17.5px;
  font-weight: 400;
  color: var(--text);
}

.oeuvre-card-info .serie-medium {
  font-size: 13.5px;
  color: var(--text-light);
  margin-top: 2px;
}

.oeuvre-card.wide { grid-column: span 2; }
.oeuvre-card.wide .oeuvre-card-img img { aspect-ratio: 16/9; }

/* =============================================
   PAGE : GALERIE (galerie.html)
   ============================================= */

.galerie-header {
  padding: 56px 48px 48px;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  max-width: 900px;
}

.galerie-header h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.1vw, 46px);
  font-weight: 400;
  margin-bottom: 24px;
}

.galerie-header p {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--text);
  margin-bottom: 12px;
  max-width: 680px;
}

.galerie-section {
  padding: 48px 0 80px;
  background: var(--cream);
}

.galerie-back {
  text-align: center;
  padding: 0 0 60px;
  background: var(--cream);
}

/* Grille galerie : lignes justifiées. Les œuvres se suivent dans l'ordre
   de lecture — de gauche à droite, puis ligne suivante. Sur chaque ligne
   elles partagent la même hauteur et remplissent exactement la largeur,
   sans jamais être recadrées. Les largeurs sont calculées en JS. */
.masonry-grid {
  display: flex;
  flex-wrap: wrap;
  /* pas d'étirement : chaque cadre épouse exactement son image */
  align-items: flex-start;
  gap: 6px;
  padding: 0 48px;
  max-width: 1920px;
  margin: 0 auto 48px;
}

.masonry-item {
  flex: 0 0 auto;
  /* Repli sans JS : 4 œuvres par ligne */
  width: calc(25% - 4.5px);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.masonry-item:hover img { transform: scale(1.04); }

/* === OVERLAY SURVOL === */
.masonry-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,26,23,0.82) 0%, rgba(28,26,23,0.2) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 16px 16px;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.masonry-item:hover .masonry-overlay { opacity: 1; }

.mo-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16.5px;
  /* posé sur l'image : un cran de plus pour rester lisible */
  font-weight: 500;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 4px;
}

.mo-technique {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: rgba(244,241,235,0.7);
  text-transform: uppercase;
}

/* === LIGHTBOX === */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,18,15,0.96);
  z-index: 200;
}
.lightbox.open { display: block; }

.lightbox-close {
  position: absolute;
  top: 20px; right: 28px;
  background: none;
  border: none;
  color: rgba(244,241,235,0.6);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  font-weight: 200;
  z-index: 10;
  transition: color 0.2s;
}
.lightbox-close:hover { color: var(--cream); }

.lightbox-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  /* Rangée de hauteur définie : sans elle, le max-height des images
     ne peut pas se résoudre et les grands formats débordent de l'écran. */
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* Flèches positionnées en absolu sur la zone image */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(244,241,235,0.4);
  font-size: 30px;
  cursor: pointer;
  padding: 16px 20px;
  transition: color 0.2s;
  z-index: 10;
}
.lightbox-nav:hover { color: var(--cream); }
.lightbox-prev { left: 12px; }
.lightbox-next { right: calc(340px + 12px); }

.lightbox-img-wrap {
  height: 100%;
  /* Autorise la cellule de grille à se réduire sous la taille du contenu */
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 48px 40px;
}

/* L'œuvre est toujours affichée en entier, jamais rognée */
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Panneau info lightbox */
.lightbox-info {
  align-self: stretch;
  background: rgba(28,26,23,0.55);
  border-left: 1px solid rgba(244,241,235,0.10);
  padding: 80px 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}

.li-serie {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 16px;
}

.li-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(24px, 3.1vw, 34px);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 28px;
}

.li-meta {
  border-top: 1px solid rgba(244,241,235,0.12);
  padding-top: 20px;
  margin-bottom: 24px;
}

.li-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(244,241,235,0.08);
  gap: 12px;
}

.li-meta dt {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,241,235,0.4);
  flex-shrink: 0;
}

.li-meta dd {
  font-family: var(--font-display);
  font-size: 15.5px;
  color: rgba(244,241,235,0.85);
  text-align: right;
}

.li-description {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(244,241,235,0.55);
  margin-bottom: 32px;
}

.li-counter {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: rgba(244,241,235,0.3);
  margin-top: auto;
}

/* =============================================
   PAGE : CONTACT (contact.php)
   ============================================= */

.contact-header {
  padding: 56px 48px 48px;
  background: var(--cream-dark);
  border-bottom: 1px solid var(--border);
}

.contact-header p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text);
  max-width: 680px;
  margin-top: 20px;
}

.contact-section {
  padding: 64px 48px 80px;
  background: var(--cream);
}

.contact-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
  align-items: start;
}

.contact-block {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.contact-block:first-child { padding-top: 0; }

.contact-block-label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 6px;
}

.contact-block-value {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text);
}
a.contact-block-value:hover { color: var(--bronze); }

.contact-block-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text);
}

/* Formulaire */
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field { margin-bottom: 20px; }

.form-field label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 8px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15.5px;
  color: var(--text);
  transition: border-color 0.2s;
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--bronze);
}

/* Honeypot invisible */
.form-hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.form-feedback {
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 15.5px;
  line-height: 1.6;
}

.form-success {
  background: var(--cream-dark);
  border: 1px solid var(--bronze);
  padding: 40px 32px;
  text-align: center;
}
.form-success p:first-child {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--bronze);
  margin-bottom: 8px;
}

.form-error {
  background: #F7ECE8;
  border: 1px solid #C0674A;
  color: #8A4630;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 900px) {
  /* Navigation : on resserre avant le passage au menu burger, sinon les
     libellés agrandis viennent toucher le logo autour de 780px. */
  .nav { padding: 0 28px; }
  .nav-links { gap: 24px; }

  /* Accueil hero */
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-image { height: 55vw; min-height: 300px; }
  .hero-content { padding: 48px 24px; }

  /* Slider hero : contrôles visibles au doigt */
  .hero-slider-arrow { opacity: 1; width: 40px; height: 40px; }
  .hero-slider-prev { left: 8px; }
  .hero-slider-next { right: 8px; }
  /* Cartouche pleine largeur, puces centrées en dessous */
  .hero-slide-caption { padding: 56px 20px 40px; }
  .hsc-title { font-size: 18.5px; }
  .hsc-meta { font-size: 10.5px; letter-spacing: 0.12em; }
  .hero-slider-dots { left: 0; right: 0; bottom: 15px; justify-content: center; }
  .hero-slider-dots button { width: 20px; }
  .last-expo-grid { grid-template-columns: 1fr; gap: 40px; }
  .series-grid { grid-template-columns: repeat(2, 1fr); }
  .last-expo { padding: 60px 24px; }
  .series-section { padding: 60px 0; }
  .series-section .section-header { padding: 0 24px; }
  .series-cta { padding: 0 24px; }

  /* À propos */
  .apropos-hero { grid-template-columns: 1fr; }
  .apropos-hero-img { height: 60vw; }
  .apropos-hero-content { padding: 48px 24px; }

  /* Expositions */
  .expo-feature-inner { grid-template-columns: 1fr; gap: 40px; }
  .expo-feature { padding: 48px 24px; }
  .expo-page-header { padding: 48px 24px 36px; }
  .past-expos { padding: 48px 24px 60px; }
  .expo-video { padding: 48px 24px; }
  .expo-video-header { margin-bottom: 28px; }

  /* Oeuvres */
  .oeuvres-grid { grid-template-columns: repeat(2, 1fr); }
  .oeuvre-card.wide { grid-column: span 1; }
  .oeuvre-card.wide .oeuvre-card-img img { aspect-ratio: 3/4; }
  .oeuvres-header { padding: 48px 24px 36px; }
  .oeuvres-section { padding: 48px 0 60px; }

  /* Galerie */
  .masonry-grid { padding: 0 24px; }
  .masonry-item { width: calc(33.333% - 4px); }
  .galerie-header { padding: 48px 24px 36px; }
  .galerie-section { padding: 32px 0 60px; }

  /* Contact */
  .contact-header { padding: 48px 24px 36px; }
  .contact-section { padding: 48px 24px 60px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-form .form-row { grid-template-columns: 1fr; gap: 0; }

  /* Lightbox responsive */
  .lightbox-inner { grid-template-columns: 1fr 260px; }
  .lightbox-next { right: calc(260px + 12px); }
  .lightbox-info { padding: 60px 20px 32px; }
}

@media (max-width: 768px) {
  .nav { padding: 0 24px; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--cream);
    flex-direction: column;
    padding: 24px;
    gap: 20px;
    border-bottom: 1px solid var(--border);
  }
  .nav-links.open { display: flex; }

  .stats-bar { grid-template-columns: repeat(2, 1fr); }

  .footer { grid-template-columns: 1fr; text-align: center; }
  .footer-links { flex-wrap: wrap; }
  .footer-copy { text-align: center; }

  .quote-section { padding: 60px 24px; }
}

@media (max-width: 600px) {
  .masonry-grid { padding: 0 12px; }
  .masonry-item { width: calc(50% - 3px); }

  /* Lightbox mobile : image en haut, infos en dessous, l'ensemble défile.
     C'est la visionneuse qui défile (et non la grille qui comprime la zone
     image), sinon le panneau d'infos vient recouvrir le bas de l'œuvre. */
  .lightbox {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lightbox-close { position: fixed; }
  .lightbox-inner {
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    height: auto;
    min-height: 100%;
  }
  .lightbox-prev { display: none; }
  .lightbox-next { display: none; }
  .lightbox-img-wrap {
    height: auto;
    padding: 60px 16px 16px;
  }
  /* L'œuvre tient entièrement dans l'écran, les infos défilent en dessous */
  .lightbox-img { max-height: 70vh; }
  .lightbox-info {
    height: auto;
    border-left: none;
    border-top: 1px solid rgba(244,241,235,0.08);
    padding: 24px 20px 40px;
  }
}

@media (max-width: 500px) {
  .series-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .oeuvres-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Très petits écrans : sans cela, un mot long en capitales espacées
   ("D'ACTIVITÉ") impose sa largeur à la colonne et fait déborder la page. */
@media (max-width: 400px) {
  .stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-item { padding: 28px 12px; }
  .stat-label { letter-spacing: 0.12em; }
}